/* =======================================================================
   Field notes — the recurring device set.

   Rule of use: no more than five of these on any one page. They are
   punctuation, not wallpaper. The review's own guardrail says avoid a
   scrapbook treatment and faux-handmade clutter, and that is the failure
   mode this file is one bad afternoon away from.

   Shantell Sans is reserved for exactly the classes in here plus .cap.
   If a piece of text is not Todd speaking in his own hand, it is not
   Shantell.
   ======================================================================= */

/* --- Todd-ism: a short line in his voice, set large ------------------- */
.toddism{
  font-family:var(--hand);font-weight:600;font-variation-settings:"BNCE" 4;
  font-size:clamp(19px,1.9vw,24px);line-height:1.45;color:var(--trail);
  max-width:30ch;margin:0;
}
.toddism.on-dark{color:var(--sun)}

/* --- Field note: a small aside with a hand-drawn arrow ---------------- */
.fieldnote{
  display:flex;gap:14px;align-items:flex-start;max-width:min(100%,52ch);
  font-family:var(--hand);font-weight:600;font-size:15.5px;line-height:1.5;
  color:var(--trail);
}
.fieldnote svg{flex:none;margin-top:2px;color:var(--clay)}
.fieldnote.on-dark{color:rgba(240,235,218,.9)}
.fieldnote.on-dark svg{color:var(--sun)}

/* --- Fact tag: a small stamped fact ----------------------------------- */
.facttag{
  display:inline-flex;align-items:baseline;gap:10px;
  border:1px solid var(--line-2);border-radius:10px;padding:11px 15px;
  background:var(--paper);max-width:46ch;
}
.facttag b{
  font-family:var(--body);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--clay);flex:none;
}
.facttag span{font-size:14.5px;line-height:1.5;color:var(--ink-2)}

/* --- Look, don't touch: the safety cue -------------------------------- */
.safety{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--hand);font-weight:700;font-size:14px;color:var(--berry-dk);
  background:#FBEEE9;border:1px solid #F0CABD;border-radius:999px;padding:7px 15px;
}
.safety svg{flex:none}

/* --- Photo strip: candid sequence, horizontal ------------------------- */
.strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);
}
@media(max-width:900px){
  .strip{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:16px;padding-bottom:var(--s2);
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
  }
  .strip > *{flex:0 0 76%;scroll-snap-align:start}
}
.strip figure{margin:0;background:none;border:0}
.strip .figframe{border-radius:10px}
.strip figcaption{
  font-family:var(--hand);font-weight:600;font-size:14px;line-height:1.45;
  color:var(--trail);padding:12px 2px 0;
}
/* honest placeholder for the shots that don't exist yet */
.pending{
  aspect-ratio:4/5;border:1px dashed var(--line-2);border-radius:10px;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;
  font-size:13px;color:var(--ink-3);line-height:1.5;
}

/* --- The question wall ------------------------------------------------
   Was a wrapped run of questions with dot separators; it read as one long
   sentence. Now four columns, one per chapter, each a plain vertical list.
   Organised, scannable, and it survives being scanned rather than read. */
.wall{padding:var(--s7) 0;background:var(--fern);color:#F0EBDA}
.wall .wall-hd{margin-bottom:var(--s6)}
.wall h2{color:#FBF6E9;max-width:17ch}
.wall .wall-hd p{color:rgba(240,235,218,.78);max-width:44ch;margin-top:var(--s3)}

.wall-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut)}
@media(max-width:980px){.wall-cols{grid-template-columns:1fr 1fr;gap:var(--s5) var(--gut)}}
@media(max-width:600px){.wall-cols{grid-template-columns:1fr;gap:var(--s4)}}

.wall-group{border-top:1px solid rgba(240,235,218,.28);padding-top:var(--s3)}
.wall-label{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--sun);margin:0 0 4px;
}
.wall-sub{font-size:13px;color:rgba(240,235,218,.5);margin:0 0 var(--s3);line-height:1.4}
.wall-qs{margin:0;padding:0;list-style:none;max-width:none}
.wall-qs li{margin:0 0 var(--s2)}
.wall-qs li:last-child{margin-bottom:0}
.wall-qs a{
  font-family:var(--disp);font-weight:600;font-variation-settings:"opsz" 34,"SOFT" 40,"WONK" 0;
  font-size:18.5px;line-height:1.3;letter-spacing:-.012em;
  color:rgba(251,246,233,.88);text-decoration:none;display:block;
  padding-left:16px;position:relative;transition:color .18s,padding-left .2s cubic-bezier(.34,1.4,.64,1);
}
.wall-qs a::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:rgba(242,185,59,.6);transition:background .18s;
}
.wall-qs a:hover{color:#fff;padding-left:21px}
.wall-qs a:hover::before{background:var(--sun)}

/* --- Trust panel: compact, sober, for the grown-ups ------------------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
@media(max-width:900px){.trust{grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4)}}
@media(max-width:520px){.trust{grid-template-columns:1fr}}
.trust h4{margin-bottom:7px}
.trust p{font-size:14.5px;line-height:1.58;color:var(--ink-2);margin:0}

/* --- Purchase module -------------------------------------------------- */
.buybox{
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:var(--s5);box-shadow:0 1px 2px rgba(34,48,31,.05),0 26px 56px -34px rgba(34,48,31,.45);
}
@media(max-width:600px){.buybox{padding:var(--s4) var(--s3)}}
.buybox .price{font-family:var(--disp);font-weight:700;font-variation-settings:"opsz" 72;
  font-size:clamp(34px,3.4vw,44px);line-height:1;letter-spacing:-.03em;margin:0}
.buybox .alt{font-size:14px;color:var(--ink-3);line-height:1.6;margin:0;max-width:none;width:100%}
.buybox .alt a{color:var(--fern);text-decoration:none;border-bottom:1px solid rgba(47,107,63,.3)}

/* --- Backyard / bookshelf / outdoors triptych ------------------------- */
.places{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--gut);align-items:start}
@media(max-width:980px){.places{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.places{grid-template-columns:1fr;gap:var(--s5)}}
.place h3{margin:var(--s3) 0 10px}
.place p{font-size:15.4px;color:var(--ink-2);margin:0;line-height:1.62}
.place .media{border-radius:12px;overflow:hidden;background:#000;
  box-shadow:0 1px 2px rgba(34,48,31,.06),0 18px 40px -24px rgba(34,48,31,.5)}
.place .media img,.place .media video{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}

/* video: muted by default, one visible sound control, never autoplays audio */
.vwrap{position:relative}
.vbtn{
  position:absolute;right:11px;bottom:11px;display:inline-flex;align-items:center;gap:7px;
  background:rgba(20,30,18,.72);color:#F6F1E0;border:1px solid rgba(246,241,224,.28);
  border-radius:999px;padding:8px 14px;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;
  backdrop-filter:blur(6px);transition:background .18s;
}
.vbtn:hover{background:rgba(20,30,18,.9)}
.vbtn svg{flex:none}
.vnote{font-family:var(--hand);font-weight:600;font-size:13.5px;color:var(--trail);margin-top:10px}

/* --- What's next: placeholder cards ---------------------------------- */
.next{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut)}
@media(max-width:760px){.next{grid-template-columns:1fr}}
.nextcard{
  border:1px dashed var(--line-2);border-radius:16px;padding:var(--s4);background:var(--paper);
  display:flex;flex-direction:column;gap:12px;
}
.nextcard .tbd{
  align-self:flex-start;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--clay);background:#F7E9E2;border:1px solid #EBD3C8;padding:5px 11px;border-radius:999px;
}
.nextcard h3{margin:0}
.nextcard p{font-size:15px;color:var(--ink-2);margin:0;max-width:none}
.nextcard form{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.nextcard input{
  flex:1 1 200px;padding:13px 15px;border:1px solid var(--line-2);border-radius:999px;
  font:inherit;font-size:15px;background:#fff;
}
.nextcard .fineprint{font-size:12.8px;color:var(--ink-3);line-height:1.55;margin:0;max-width:none}
/* Pin the small print to the bottom of each card so the pair ends level
   however much copy sits above it. */
.nextcard .fineprint{margin-top:auto;padding-top:6px}
.nextcard .sumcheck{margin:2px 0 0;gap:10px}
.nextcard .sumcheck input{flex:0 1 110px;padding:11px 14px}
.nextcard .sumcheck span{font-size:13.5px;color:var(--ink-2)}

/* --- type roles ------------------------------------------------------
   One rule, applied everywhere: Fraunces carries every heading — h1, h2,
   h3, no exceptions — and Shantell Sans is only ever used where something
   is meant to read as Todd's own hand: the wordmark, photo captions, field
   notes, the quote attributions and his sign-off. Mixing the two inside the
   heading hierarchy is what made the old pages look unresolved.

   The three place headings below used to be cursive. They are now plain
   headings like every other h3; the cursive lives in the caption under
   each picture instead. */
.placeh{
  font-size:clamp(20px,1.9vw,24px);letter-spacing:-.005em;line-height:1.25;
  color:var(--fern);margin:0 0 10px;
}

/* --- backyard video: click to play, with sound ----------------------- */
.vwrap{position:relative}
.vplay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;
  flex-direction:column;background:rgba(20,30,18,.28);border:0;color:#FBF6E9;cursor:pointer;
  font:inherit;font-size:14px;font-weight:650;transition:background .2s,opacity .25s;
}
.vplay:hover{background:rgba(20,30,18,.42)}
.vplay svg{
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.45));
  transition:transform .2s cubic-bezier(.34,1.4,.64,1);
}
.vplay:hover svg{transform:scale(1.12)}
.vwrap.playing .vplay{opacity:0;pointer-events:none}
.vwrap.playing:hover .vplay{opacity:1;pointer-events:auto;background:rgba(20,30,18,.35)}

/* --- books listing ---------------------------------------------------- */
.booklist{display:flex;flex-direction:column;gap:var(--s6)}
.bookrow{display:grid;grid-template-columns:300px 1fr;gap:var(--s5);align-items:center}
@media(max-width:820px){.bookrow{grid-template-columns:1fr;gap:var(--s3)}}
.bookcover img{width:100%;display:block;border-radius:12px;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(34,48,31,.06),0 20px 44px -26px rgba(34,48,31,.5)}
/* The real cover photo is landscape, so the two placeholders match it —
   otherwise the column steps between two different shapes. */
.bookcover.soon .soonface{
  position:relative;aspect-ratio:4/3;border-radius:12px;background:var(--paper-2);
  border:2px dashed var(--line-2);overflow:hidden;
}
.bookcover.soon svg{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.bookcover.soon .qm{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 1;
  font-size:88px;color:var(--clay);line-height:1;
}
.pill{
  display:inline-block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:6px 13px;border-radius:999px;
}
.pill.out{background:#E6F0E0;color:#255B32;border:1px solid #BCD5AE}
.pill.soon{background:#F7E9E2;color:#8A5A34;border:1px solid #EBD3C8}
.inlineform{display:flex;gap:12px;flex-wrap:wrap;max-width:460px;margin-top:26px}
.inlineform input{
  flex:1 1 200px;padding:14px 17px;border:1px solid var(--line-2);border-radius:999px;
  font:inherit;background:#fff;
}

/* --- form success / error state -------------------------------------- */
.formmsg{
  margin-top:14px;font-size:14.5px;line-height:1.55;border-radius:10px;padding:12px 15px;
  border:1px solid #CBDFC0;background:#EEF5E9;color:#255B32;
}
.formmsg.err{border-color:#F0CABD;background:#FBEEE9;color:#A63A22}

/* --- illustrated question card ---------------------------------------- */
.qart{display:block;width:100%;height:auto}
.bookcover.soon .soonface.plain{
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);border:2px dashed var(--line-2);
}
.bookcover.soon .qm.big{
  position:static;font-size:120px;color:var(--clay);line-height:1;
  font-family:var(--disp);font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 90,"WONK" 1;
  animation:qmbob 5s ease-in-out infinite;
}
@keyframes qmbob{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.bookcover.soon .qm.big{animation:none}}
.ar219 img{aspect-ratio:21/9;object-fit:cover;object-position:50% 26%}

/* --- hero photo: the main event -------------------------------------
   Sized to the full height of the text column beside it, so Todd is the
   first thing you see, and stopped at the page margin so its right edge
   lines up with the Get the book button in the header. */
.hero-photo{display:flex;flex-direction:column}
.hero-photo .figframe{overflow:hidden;border-radius:var(--radius)}
.hero-photo .figframe img{width:100%;height:auto;display:block}
.hero-photo .cap{margin-top:16px;max-width:min(100%,66ch)}
/* the intro gets a longer line now that the photo is smaller */
.herogrid .lede{max-width:min(100%,68ch)}
@media(max-width:900px){
  .hero-photo .figframe{min-height:0}
  .hero-photo .figframe img{height:auto}
}

/* --- forms ------------------------------------------------------------ */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sumcheck{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:var(--s3) 0 var(--s2)}
.sumcheck span{font-size:13.5px;color:var(--ink-2);font-weight:600}
.sumcheck input{
  width:74px;padding:10px 13px;border:1px solid var(--line-2);border-radius:9px;
  font:inherit;font-size:15px;background:#fff;text-align:center;
}
form{position:relative}
.qform{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);max-width:none}
.qform input,.qform textarea,form textarea,form input[type=text],form input[type=email],form input[type=number]{
  width:100%;padding:13px 15px;border:1px solid var(--line-2);border-radius:9px;font:inherit;background:#fff;
}
.inlineform input{border-radius:999px}
.okbox{display:flex;gap:11px;align-items:flex-start;margin-top:16px;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.okbox input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--fern)}
.okbox span{max-width:52ch}

/* A short aside beside a tall form: let it ride down the column instead of
   leaving a slab of empty paper under it. */
.stickynote{position:sticky;top:104px}
@media(max-width:900px){.stickynote{position:static}}

/* The hero is the one place the 12-column grid gets overridden: the headline
   needs a little under half the width and the photo wants everything else. */
.herogrid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
@media(max-width:900px){.herogrid{grid-template-columns:1fr}}

/* The book's name inside a button or link: italic would fight the display
   face, so it takes a small-caps-ish tracking treatment instead. */
.btn em,.tlink em{font-style:normal;letter-spacing:.01em}

/* =======================================================================
   Product page — books.html, and the book block on the home page.
   ======================================================================= */
.specs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s4);
  margin:var(--s4) 0 0;padding:var(--s3) 0 0;border-top:1px solid var(--line-2);max-width:none;
}
.specs > div{display:flex;flex-direction:column;gap:2px}
.specs dt{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-3);
}
.specs dd{margin:0;font-family:var(--disp);font-weight:600;font-size:18px;color:var(--ink)}
@media(max-width:520px){.specs{grid-template-columns:1fr 1fr;gap:var(--s2)}}

.product-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--s6);align-items:start}
@media(max-width:900px){.product-grid{grid-template-columns:1fr;gap:var(--s5)}}
.product-media{position:sticky;top:calc(var(--nav-h) + 28px)}
@media(max-width:900px){.product-media{position:static}}

.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;list-style:none;margin:14px 0 0;padding:0}
.thumbs button{
  display:block;width:100%;padding:0;background:none;cursor:pointer;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;
  transition:border-color .18s,transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .18s;
}
.thumbs button:hover{border-color:var(--moss);transform:translateY(-2px)}
.thumbs button.is-on{border-color:var(--fern);box-shadow:0 0 0 2px rgba(47,107,63,.28)}
.thumbs button:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.thumbs img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;display:block}
#preview{transition:opacity .18s ease}

.byline{font-family:var(--hand);font-size:17px;color:var(--trail);margin:10px 0 0}

.buybar{
  margin-top:var(--s4);padding:var(--s4);background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--radius);
  box-shadow:0 18px 40px -34px rgba(34,48,31,.55);
}
.assure{
  list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:var(--s3) 0 0;padding:var(--s3) 0 0;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3);
}
.assure li{display:flex;align-items:center;gap:7px}
.assure li::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--moss);flex:none;
}

.retail{margin-top:var(--s4)}
.retail-hd{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-3);
  margin:0 0 var(--s2);
}
.retail ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.retail li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.retail b{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--ink);min-width:9.5em}
.retail span{font-size:14px;color:var(--ink-3)}

.teachbox{
  margin-top:var(--s4);padding:var(--s3);border-radius:var(--radius);
  background:var(--clay-lt);border:1px solid rgba(201,138,114,.4);
}
.teachbox b{display:block;font-family:var(--disp);font-size:17px;color:var(--ink);margin-bottom:5px}
.teachbox span{display:block;font-size:14.5px;color:var(--ink-2);line-height:1.55;margin-bottom:10px}