/* The pastoral and character development page. It uses the front page's styles (front.css) and adds its own cover,
   the frame that holds the live journal and the picture rows. The book's colour is the yellow of its cover on the shelf. */
.pastoral { --c: #E2A21B; --c2: #b9800c; }

/* ------------------------------------------------------------ the cover, laid out like the drama logbook's cover */
.cover { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto; grid-template-areas: "head label" "btns note" "peek peek"; gap: clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 5vw, 5rem); padding: calc(var(--bar) + clamp(1.5rem, 6vh, 4rem)) clamp(1.5rem, 5.6vw, 5.5rem) 0 clamp(2.4rem, 6.6vw, 6.5rem); color: var(--graphite);
  background: var(--grain), linear-gradient(90deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .09) 14px, rgba(0, 0, 0, 0) 60px), var(--c); }
.cover .staple { left: 9px; width: 4px; height: 34px; }
.cover-head { grid-area: head; align-self: center; }
.cover h1 { margin: 0; font: 400 clamp(2.3rem, 5.6vw, 5.4rem)/1.02 var(--serif); letter-spacing: -.022em; text-wrap: balance; }
.cover-head p { max-width: 35rem; margin-top: clamp(1rem, 2.4vh, 1.6rem); font-size: clamp(1.0625rem, 1.45vw, 1.28rem); line-height: 1.5; }
.cover-label { grid-area: label; align-self: center; justify-self: end; width: min(100%, 26rem); padding: 7px; background: #F7F7F3; border-radius: 3px; transform: rotate(-1.4deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .22), 0 10px 22px -14px rgba(0, 0, 0, .7); }
.cover-label dl { display: grid; gap: .7rem; padding: 1rem 1.15rem 1.15rem; border: 2px solid var(--c2); border-radius: 2px; }
.cover-label dl > div { display: grid; grid-template-columns: 5.6rem 1fr; align-items: baseline; padding-bottom: .15rem; border-bottom: 1px solid rgba(23, 24, 28, .38); }
.cover-label dt { font-size: .82rem; font-weight: 500; color: var(--soft); }
.cover-label dd { font: 400 clamp(1.25rem, 1.9vw, 1.6rem)/1.2 var(--serif); }
.cover-btns { grid-area: btns; align-self: end; display: flex; flex-wrap: wrap; gap: .7rem; }
.cover-btns .btn-ghost:hover { background: rgba(31, 33, 37, .1); }
.cover-note { grid-area: note; align-self: end; justify-self: end; font-size: .95rem; text-align: right; }

/* ------------------------------------------------------------ the journal itself, running */
.screen { margin-top: clamp(1.8rem, 4vh, 2.6rem); padding: clamp(.4rem, .8vw, .7rem); border-radius: 10px; background: var(--grain), var(--c); box-shadow: 0 2px 0 rgba(0, 0, 0, .16), 0 36px 64px -34px rgba(31, 33, 37, .62); }
.screen iframe { display: block; width: 100%; height: clamp(36rem, 82vh, 54rem); border: 0; border-radius: 5px; background: #f7f8fa; }
.try-links { margin-top: 1rem; }
.try-links a, .row a { text-decoration-color: var(--gel); text-decoration-thickness: 2px; text-underline-offset: .22em; }

/* ------------------------------------------------------------ real pictures of the journal beside what they show */
.rows { display: grid; gap: clamp(2.2rem, 6vh, 4.2rem); margin-top: clamp(2rem, 5vh, 3.2rem); }
.row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4.5vw, 4.5rem); }
.row:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.row:nth-child(even) img { order: 2; }
.row img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px rgba(31, 33, 37, .08), 0 26px 50px -30px rgba(31, 33, 37, .55); }
.row-box img { max-width: 24rem; justify-self: center; border-radius: 14px; }
.row h3 { font: 400 clamp(1.5rem, 2.4vw, 2.1rem)/1.12 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.row p { margin-top: .8rem; max-width: 30rem; font-size: clamp(1.0625rem, 1.25vw, 1.18rem); line-height: 1.6; color: var(--soft); }

.yours-out { max-width: 44rem; margin-top: 1.4rem; font-size: clamp(1.0625rem, 1.25vw, 1.18rem); line-height: 1.6; }
.ask { padding-bottom: clamp(4rem, 11vh, 7rem); }
.ask h2 { font: 400 clamp(2rem, 3.7vw, 3.35rem)/1.05 var(--serif); letter-spacing: -.021em; }
.ask p { max-width: 40rem; margin-top: 1rem; font-size: clamp(1.0625rem, 1.3vw, 1.2rem); line-height: 1.6; color: var(--soft); }
.ask-btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }

@media (max-width: 899px) {
  .cover { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto auto; grid-template-areas: "head" "label" "note" "btns" "peek"; padding-left: 2rem; padding-right: 1.25rem; }
  .cover-label { justify-self: start; align-self: start; }
  .cover-note { justify-self: start; text-align: left; }
  .row, .row:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .row:nth-child(even) img { order: 0; }
}

/* ------------------------------------------------------------ after the two reviews, 11 Nov 2026 */
/* the top of the real logbook shows under the cover, so the first screen has the product in it */
.cover-peek { grid-area: peek; display: block; height: clamp(7.5rem, 24svh, 15rem); margin-top: clamp(.6rem, 2vh, 1.4rem); overflow: hidden; border-radius: 10px 10px 0 0; background: #f7f8fa; box-shadow: 0 -1px 0 rgba(0, 0, 0, .2), 0 -22px 44px -26px rgba(31, 33, 37, .7); }
.cover-peek img { display: block; width: 100%; height: auto; }
.cover-peek:hover img { transform: translateY(-4px); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
/* pink on yellow is too faint for a focus ring, so on the cover it is graphite */
.cover :focus-visible { outline-color: var(--graphite); }
.screen { scroll-margin-top: calc(var(--bar) + .9rem); }
.skip-frame { position: absolute; left: -200vw; display: inline-block; margin-top: 1rem; padding: .7rem 1rem; border-radius: 3px; background: var(--graphite); color: #fff; }
.skip-frame:focus { position: static; }
.screen-phone { display: none; }
.screen-none { padding: 2rem 1rem; text-align: center; }
.try-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.pastoral .bar-brand { min-width: 2.75rem; min-height: 2.75rem; }
.ask p a { text-decoration-color: var(--gel); text-decoration-thickness: 2px; text-underline-offset: .22em; }
@media (max-width: 699px) {
  /* on a phone a frame inside the page traps the thumb, so here it is a picture with one button that opens the logbook on its own */
  .screen iframe { display: none; }
  .screen-phone { position: relative; display: block; overflow: hidden; max-height: 30rem; border-radius: 5px; }
  .screen-phone img { display: block; width: 100%; height: auto; }
  .screen-phone .btn { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); white-space: nowrap; box-shadow: 0 10px 30px -8px rgba(31, 33, 37, .7); }
  .screen-phone::after { content: ""; position: absolute; inset: auto 0 0 0; height: 9rem; background: linear-gradient(rgba(247, 248, 250, 0), rgba(247, 248, 250, .96)); }
  .screen-phone .btn { z-index: 1; }
  .try-links { display: none; }
}
@media (max-width: 360px) { .pastoral .bar-cta { display: none; } }
.row img.tall { width: auto; max-width: 100%; max-height: 36rem; justify-self: center; }