/* J. Frances Dunne  ·  Willow Creek
   Palette, line quality and light sampled from her own three book covers.
   The page is a picture book: a plate, then a caption. Never a scrim over art. */

:root{
  --parchment:#F5EBD6;
  --parchment-2:#EEE0C4;
  --parchment-3:#E3D2AE;
  --ink:#231B12;
  --ink-70:#4B3E2D;
  --ink-55:#6D5C44;
  --ochre:#A2601B;
  --ochre-ink:#8A4F14;   /* AA on parchment (5.53) and on the tone panel (5.02) */
  --ochre-lit:#DBA357;
  --rose:#9E4C45;
  --moss:#5A6C44;
  --dusk:#2B3450;
  --dusk-deep:#141B2C;
  --rule:rgba(35,27,18,.15);
  --rule-2:rgba(35,27,18,.28);

  --wrap:1160px;
  --gut:clamp(20px,5vw,56px);

  --f-display:"Alegreya","Iowan Old Style",Georgia,serif;
  --f-body:"Alegreya Sans","Avenir Next",system-ui,-apple-system,Segoe UI,sans-serif;

  --step--1:clamp(.87rem,.84rem + .14vw,.96rem);
  --step-0:clamp(1.03rem,1rem + .2vw,1.15rem);
  --step-1:clamp(1.22rem,1.12rem + .5vw,1.5rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,2.1rem);
  --step-3:clamp(1.95rem,1.55rem + 2vw,3.1rem);
  --step-4:clamp(2rem,1.4rem + 3.4vw,4.6rem);
  --step-5:clamp(2.7rem,1.7rem + 5.6vw,6.8rem);

  --ease:cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
/* Any class that sets display (.row is display:grid) silently beats the browser's
   own [hidden]{display:none}, so hidden elements kept rendering. Make it win. */
[hidden]{display:none !important}
a{color:inherit}

h1,h2,h3{
  font-family:var(--f-display);
  font-weight:500;line-height:1.03;letter-spacing:-.012em;margin:0;
  text-wrap:balance;
}

.wrap{width:min(100% - (var(--gut) * 2),var(--wrap));margin-inline:auto}

:focus-visible{outline:3px solid var(--ochre);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--parchment);padding:12px 18px}
.skip:focus{left:12px;top:12px}

/* ---------------------------------------------------------------- nav */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;gap:18px;padding:13px var(--gut);
  transition:transform .42s var(--ease),background .35s ease,box-shadow .35s ease;
}
.nav.hide{transform:translateY(-104%)}
.nav.solid{
  background:color-mix(in srgb,var(--parchment) 94%,transparent);
  backdrop-filter:saturate(1.15) blur(10px);
  box-shadow:0 1px 0 var(--rule);
}
.nav .mark{font-family:var(--f-display);font-size:1.08rem;text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px}
.nav .links{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav .links a{text-decoration:none;font-size:var(--step--1);color:var(--ink-70);position:relative;padding:4px 0}
.nav .links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ochre);
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease);
}
.nav .links a:hover::after,.nav .links a:focus-visible::after{transform:scaleX(1)}
.nav .links .cta{
  border:1.5px solid var(--rule-2);border-radius:999px;padding:.62em 1.15em;
  font-weight:600;color:var(--ink);min-height:44px;display:inline-flex;align-items:center;
}
.nav .links .cta::after{display:none}
.nav .links .cta:hover{background:var(--ink);color:var(--parchment);border-color:var(--ink)}
@media (max-width:880px){.nav .links a:not(.cta){display:none}}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--f-body);font-size:var(--step--1);font-weight:600;
  padding:.85em 1.55em;border-radius:999px;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;min-height:48px;
  transition:transform .25s var(--ease),background .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--ochre);color:#FFF7E7;border-color:var(--ochre)}
.btn-solid:hover{background:#834C12;border-color:#834C12}
.btn-line{border-color:var(--rule-2);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--parchment);border-color:var(--ink)}
.dusk .btn-line{border-color:rgba(245,235,214,.45);color:var(--parchment)}
.dusk .btn-line:hover{background:var(--parchment);color:var(--ink);border-color:var(--parchment)}

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative;
  min-height:min(100svh,940px);
  display:grid;grid-template-rows:auto 1fr;
  background:var(--parchment);
  overflow:hidden;isolation:isolate;
}
.hero-type{
  position:relative;z-index:5;
  width:min(100% - (var(--gut) * 2),var(--wrap));margin-inline:auto;
  padding-top:clamp(84px,15vh,150px);
  pointer-events:none;
}
.hero-type>*{pointer-events:auto}
.hero h1{
  font-size:var(--step-5);line-height:.92;letter-spacing:-.028em;
  max-width:10ch;   /* breaks after "Frances", so the name reads as a masthead */
  text-wrap:initial;
}
.hero .line{
  margin:clamp(16px,2.6vh,26px) 0 0;font-size:var(--step-1);max-width:31ch;
  color:var(--ink-70);line-height:1.38;
}
.hero .acts{display:flex;flex-wrap:wrap;gap:11px;margin-top:clamp(20px,3.4vh,32px)}

/* ---------------------------------------------------------------- the signature */
/* NOT .signed: the signed-copies panel on the shelf owns that class name */
/* Her name, written by the quill, is the masthead. The typed name stays inside the
   h1 for search engines and screen readers, visually hidden; with no JavaScript the
   signature cannot be written, so the typed name shows instead. */
h1.masthead{margin:0;font-size:inherit;line-height:1;max-width:none}
.sig-name{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
html.no-js .sig-name{
  position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;
  white-space:normal;font-size:var(--step-5);line-height:.92;letter-spacing:-.028em;
}
html.no-js .signature{display:none}

.signature{
  position:relative;display:block;
  width:min(100%, 880px);margin-left:-1.5%;
}
.sig{display:block;width:100%;height:auto;overflow:visible}
.sig .ink{fill:#1d140c}
.sig-stack{display:none}
@media (max-width:820px){
  /* room underneath for the quill, which lies below the name on a phone */
  .signature{width:min(100%, 360px);margin-left:-2%;margin-bottom:34px}
  .sig-line{display:none}
  .sig-stack{display:block}
}
.signature .quill{
  position:absolute;left:0;top:0;
  width:auto;height:140px;max-width:none;
  will-change:transform;
  filter:drop-shadow(0 6px 10px rgba(35,27,18,.18));
}
/* With JS, keep it out of sight until the script has cleared the ink and is ready
   to write, so the finished name never flashes first. If the script never runs,
   the fallback shows it anyway after a moment. */
html.js h1.masthead:not(.ready) .signature{visibility:hidden;animation:sigShow 0s 2.5s forwards}
@keyframes sigShow{to{visibility:visible}}
/* the quill starts invisible and is faded in on its first placed frame */
html.js .signature .quill{opacity:0}

/* The small typed name in the nav would sit right above the written one, so it
   waits until the page has been scrolled and the nav turns solid. */
.nav .mark{transition:opacity .35s ease}
.nav:not(.solid) .mark{opacity:0;pointer-events:none}
/* but a keyboard user tabbing to it must still see where focus is */
.nav:not(.solid) .mark:focus-visible{opacity:1}

.hero-art{position:relative;z-index:1;min-height:0}
.hero-art img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 66%;
}
/* the watercolour paint-in: a parchment mask that blooms away */
.hero-paint{position:absolute;inset:0;z-index:3;pointer-events:none}
/* keeps the type readable where it crosses the top of the picture */
.hero-art::before{
  content:"";position:absolute;inset:0 0 auto 0;height:42%;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,var(--parchment) 0%,rgba(245,235,214,.72) 32%,rgba(245,235,214,0) 100%);
}
/* Her own cattails stand in the water at the foot of the hero, tips dissolving
   into it, so the picture ends on a painted foreground rather than a cut. */
.hero-art .reeds{
  /* top:auto matters: the generic .hero-art img rule sets inset:0, and a live
     top:0 beats bottom:0 once an explicit height is given, which pinned the
     reeds to the top of the picture instead of its foot */
  position:absolute;top:auto;left:0;right:0;bottom:0;z-index:2;
  width:100%;height:clamp(84px,10.5vw,152px);max-width:none;
  object-fit:cover;object-position:50% 100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.75) 34%,#000 62%);
          mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.75) 34%,#000 62%);
}
@media (max-width:820px){
  .hero{min-height:auto}
  .hero-art{aspect-ratio:3/4;min-height:56svh}
  .hero-type{padding-bottom:clamp(14px,3vh,26px)}
  .hero h1{max-width:100%}
}

.cue{
  /* it sits over a painting whose tone swings from pale sky to a dark cypress
     trunk, so it rides on its own small piece of paper rather than trusting the
     picture. Text shadows alone measured 2.2:1 over the trunk. */
  position:absolute;left:var(--gut);bottom:calc(clamp(84px,10.5vw,152px) + 14px);z-index:7;
  font-size:.94rem;letter-spacing:.01em;color:var(--ink);
  display:flex;align-items:center;gap:10px;font-style:italic;font-family:var(--f-display);
  background:rgba(245,235,214,.93);
  padding:.34em .92em .38em;border-radius:999px;
  box-shadow:0 2px 14px rgba(35,27,18,.14);
}
.cue i{display:block;width:32px;height:1.5px;background:var(--ochre-ink);transform-origin:left}
@media (prefers-reduced-motion:no-preference){.cue i{animation:reach 2.8s var(--ease) infinite}}
@keyframes reach{0%,100%{transform:scaleX(.25)}50%{transform:scaleX(1)}}
@media (max-width:820px){.cue{display:none}}

/* ---------------------------------------------------------------- world */
#world{padding-top:clamp(20px,2.6vw,38px);background:var(--parchment)}

/* ---------------------------------------------------------------- plates */
/* A picture-book page: the plate, then one line of caption on paper. */
.plate{position:relative;background:var(--parchment)}
.plate .art{position:relative;overflow:hidden;background:var(--parchment-3)}
.plate .art>img{width:100%;height:auto;display:block}
.plate .paint{position:absolute;inset:0;z-index:2;pointer-events:none}
/* On a phone a 16:9 plate is a 110px strip and the artwork stops carrying the
   page, so each scene is re-framed taller and cropped to its own subject. */
@media (max-width:760px){
  .plate .art{aspect-ratio:4/3}
  .plate .art>img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:var(--pos,50% 50%);
  }
}
@media (max-width:430px){.plate .art{aspect-ratio:1/1}}

.plate .cap{
  width:min(100% - (var(--gut) * 2),var(--wrap));margin-inline:auto;
  padding-block:clamp(26px,4.4vw,54px) clamp(34px,6vw,80px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,38ch);
  gap:clamp(14px,3vw,40px);align-items:end;
}
@media (max-width:760px){.plate .cap{grid-template-columns:1fr;align-items:start}}
.plate .cap h2{font-size:var(--step-3);letter-spacing:-.02em;max-width:17ch;margin:0}
.plate .cap p{margin:0;color:var(--ink-70);font-size:var(--step-0);line-height:1.5;max-width:38ch}

/* ---------------------------------------------------------------- sections */
.sect{padding-block:clamp(62px,9.5vw,124px)}
.sect.dusk{background:var(--dusk-deep);color:var(--parchment)}
.sect.tone{background:var(--parchment-2)}

.eyebrow{font-family:var(--f-display);font-style:italic;font-size:var(--step-0);color:var(--ochre-ink);margin:0 0 .3em}
.dusk .eyebrow{color:var(--ochre-lit)}
h2.big{font-size:var(--step-4);letter-spacing:-.024em;max-width:15ch}
h2.mid{font-size:var(--step-3);letter-spacing:-.018em;max-width:19ch}
.lede{font-size:var(--step-1);line-height:1.44;max-width:37ch;color:var(--ink-70);margin:.7em 0 0}
.dusk .lede{color:rgba(245,235,214,.78)}

/* ---------------------------------------------------------------- cast */
.cast{display:grid;gap:clamp(20px,3.2vw,42px);grid-template-columns:repeat(4,1fr);margin-top:clamp(32px,5vw,56px)}
@media (max-width:980px){.cast{grid-template-columns:repeat(2,1fr)}}
@media (max-width:430px){.cast{grid-template-columns:1fr;gap:24px}}
.cast figure{margin:0;display:flex;flex-direction:column;gap:13px}
.cast .plateimg{
  aspect-ratio:1;border-radius:50%;overflow:hidden;background:#22293C;
  box-shadow:inset 0 0 0 1px rgba(245,235,214,.14);
}
.cast .plateimg img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.cast figure:hover .plateimg img{transform:scale(1.06)}
.cast h3{font-size:var(--step-1);letter-spacing:-.01em}
.cast figcaption p{margin:.25em 0 0;font-size:var(--step--1);color:rgba(245,235,214,.7);line-height:1.5}

/* ---------------------------------------------------------------- her */
.her{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(20px,4vw,44px) clamp(28px,5vw,70px);align-items:start;
}
.her .herhead{grid-column:1 / -1}
/* this heading sits beside a picture rather than running full bleed, so it takes
   the smaller display size: at the big one it wraps to one or two words a line */
.her .herhead h2{font-size:var(--step-3);max-width:26ch}
.her .herhead .eyebrow{margin-bottom:.25em}
@media (min-width:901px){
  /* on a wide screen the heading belongs beside the picture, not above both */
  .her{grid-template-areas:"portrait head" "portrait body";grid-template-rows:auto 1fr}
  .her .herhead{grid-area:head}   /* a ch measure here resolves against the
     wrapper's body font size, not the heading's, so it belongs on the h2 */
  .her .portrait{grid-area:portrait}
  .her .body{grid-area:body}
}
@media (max-width:900px){.her{grid-template-columns:1fr}}
.portrait{position:relative;background:var(--parchment-3);aspect-ratio:4/5;overflow:hidden;
  box-shadow:0 20px 48px -28px rgba(35,27,18,.6)}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait .todo{
  /* margin:0 matters: a p keeps its default bottom margin even when absolutely
     positioned, which lifted the bar and left a sliver of picture under it */
  position:absolute;inset:auto 0 0 0;margin:0;padding:11px 14px;
  background:rgba(35,27,18,.94);color:var(--parchment);font-size:.78rem;line-height:1.4;
}
.her .body p{max-width:58ch;margin:0}
.her .body p+p{margin-top:1.05em}
.pull{
  font-family:var(--f-display);font-size:var(--step-2);line-height:1.2;letter-spacing:-.014em;
  margin:1.5em 0 0;max-width:25ch;color:var(--ink);
}
.pull cite{display:block;font-family:var(--f-body);font-style:normal;font-size:.42em;
  letter-spacing:.01em;color:var(--ink-55);margin-top:1.05em;line-height:1.5}

/* ---------------------------------------------------------------- process */
.process{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,5vw,64px);align-items:center}
@media (max-width:900px){.process{grid-template-columns:1fr}}
.process .shot{overflow:hidden;box-shadow:0 22px 52px -32px rgba(35,27,18,.62)}
.beats{display:flex;flex-direction:column;margin-top:clamp(20px,3vw,30px);border-top:1px solid var(--rule)}
.beats div{padding:15px 0;border-bottom:1px solid var(--rule);display:grid;
  grid-template-columns:minmax(0,12.5ch) 1fr;gap:20px;align-items:baseline}
@media (max-width:520px){.beats div{grid-template-columns:1fr;gap:2px}}
.beats b{font-family:var(--f-display);font-weight:500;font-size:var(--step-1);color:var(--ochre-ink);letter-spacing:-.01em}
.beats p{margin:0;color:var(--ink-70);font-size:var(--step--1);line-height:1.5}

/* ---------------------------------------------------------------- books */
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,52px);margin-top:clamp(34px,5vw,58px)}
@media (max-width:860px){.shelf{grid-template-columns:1fr;gap:42px}}
.book{display:grid;gap:18px;align-content:start}
@media (max-width:860px){.book{grid-template-columns:145px 1fr;gap:24px;align-items:start}}
@media (max-width:400px){.book{grid-template-columns:1fr}}
.book .jacket{
  /* fit-content, or the link box keeps the full column width and its background
     and shadow spill out beside the cover as a bare slab */
  display:block;width:fit-content;justify-self:start;
  align-self:start;background:var(--parchment-3);
  box-shadow:0 24px 44px -26px rgba(35,27,18,.75),0 1px 0 rgba(35,27,18,.2);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
/* the three covers are different shapes, so they are matched on HEIGHT and left
   to take their natural widths. Matching on width instead left their bottoms and
   therefore their titles on three different lines. */
.book .jacket img{display:block;width:auto;height:clamp(210px,24vw,360px);max-width:100%}
@media (max-width:860px){.book .jacket{width:100%}.book .jacket img{width:100%;height:auto}}
/* Declared after the base rule on purpose: same specificity, so source order is
   what decides. Below 400px the cover stacks above the text, and at full width
   each one is a 550px poster that buries the buy links under three screens. */
@media (max-width:400px){.book .jacket{width:min(236px,62%)}}
.book:hover .jacket,.book .jacket:focus-visible{transform:translateY(-7px) rotate(-.6deg);
  box-shadow:0 32px 54px -26px rgba(35,27,18,.78)}
.book h3{font-size:var(--step-1);letter-spacing:-.012em;max-width:19ch}
.book .meta{font-size:.81rem;color:var(--ink-55);margin:.4em 0 0;font-variant-numeric:tabular-nums}
.book .blurb{font-size:var(--step--1);color:var(--ink-70);margin:.85em 0 0;line-height:1.55}
.buy{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.05em;align-items:center}
.buy a{
  text-decoration:none;font-size:.8rem;font-weight:600;padding:.62em 1.05em;
  border:1.5px solid var(--rule-2);border-radius:999px;color:var(--ink-70);
  min-height:44px;display:inline-flex;align-items:center;
  transition:background .25s,color .25s,border-color .25s;
}
.buy a:hover{background:var(--ink);color:var(--parchment);border-color:var(--ink)}
.stocknote{font-size:.78rem;color:var(--rose);margin:.7em 0 0;line-height:1.45}
/* the direct-from-the-author buy: waits hidden until her IngramSpark link arrives */
.direct{
  display:flex;flex-direction:column;gap:2px;margin-top:12px;
  padding:.72em 1.1em;border-radius:12px;min-height:48px;justify-content:center;
  background:var(--ink);color:var(--parchment);text-decoration:none;font-weight:600;font-size:.92rem;
  transition:transform .25s var(--ease),background .25s;
}
.direct small{font-weight:400;font-size:.74rem;color:rgba(245,235,214,.72)}
.direct:hover{transform:translateY(-2px);background:#3a2c1d}
.direct[hidden]{display:none}
.signed{margin-top:1.1em;padding:13px 15px;background:var(--parchment-3);font-size:.8rem;
  color:var(--ink-70);line-height:1.5}
.signed b{color:var(--ink)}
/* book one's extract: folded away until asked for, so the shelf stays covers first */
.taste{margin-top:14px}
.taste summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5em;min-height:44px;
  font-family:var(--f-display);font-style:italic;font-size:var(--step-0);color:var(--ochre-ink);
  text-decoration:underline;text-decoration-color:rgba(138,79,20,.35);text-underline-offset:4px;
}
.taste summary::-webkit-details-marker{display:none}
.taste summary::after{content:"";width:.42em;height:.42em;border:solid currentColor;border-width:0 1.5px 1.5px 0;
  transform:translateY(-.12em) rotate(45deg);transition:transform .3s var(--ease)}
.taste[open] summary::after{transform:translateY(.1em) rotate(-135deg)}
.taste summary:hover{text-decoration-color:currentColor}
.taste blockquote{
  margin:10px 0 0;padding:clamp(18px,2.4vw,24px) clamp(18px,2.4vw,24px);background:#FCF6E8;
  box-shadow:0 1px 0 rgba(35,27,18,.08),0 16px 30px -24px rgba(35,27,18,.45);
}
.taste blockquote p{margin:0;font-family:var(--f-display);font-size:1.02rem;line-height:1.6;color:var(--ink)}
.taste blockquote p+p{margin-top:.8em}
.taste + .stocknote{margin-top:1.1em}

/* ---------------------------------------------------------------- readers */
/* Four short quotes, set like notes tucked into a book. Real reviews only: see
   _research/reviews.json for where each came from. */
.readers .tally{margin:.7em 0 0;font-size:var(--step--1);color:var(--ink-55)}
.readers .tally a{color:var(--ink-70);text-underline-offset:3px;
  display:inline-block;padding-block:10px;margin-block:-10px}
.readers .tally a:hover{color:var(--ink)}
.slips{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,3vw,34px);margin-top:clamp(28px,4vw,48px);
}
@media (max-width:720px){.slips{grid-template-columns:1fr}}
.slip{
  margin:0;padding:clamp(20px,2.6vw,30px) clamp(20px,2.6vw,32px) clamp(18px,2.2vw,24px);
  background:#FCF6E8;
  box-shadow:0 1px 0 rgba(35,27,18,.08),0 18px 34px -24px rgba(35,27,18,.45);
  transform:rotate(-.55deg);
}
.slip:nth-child(2n){transform:rotate(.5deg)}
.slip:nth-child(3){transform:rotate(.35deg)}
.slip:nth-child(4){transform:rotate(-.4deg)}
/* the publisher's reader's report: a typed sheet across the top, not a review card */
.slip.report{grid-column:1/-1;background:#FFFDF6;transform:rotate(-.18deg)}
.slip.report blockquote{margin:0}
.slip.report blockquote p{font-style:normal;max-width:38ch}
.slip.report figcaption b{color:var(--ink);font-weight:600}
.slip.report ~ .slip:nth-child(2n){transform:rotate(-.55deg)}
.slip.report ~ .slip:nth-child(2n+1){transform:rotate(.5deg)}
@media (prefers-reduced-motion:reduce){.slip,.slip:nth-child(n),.slip.report ~ .slip:nth-child(n){transform:none}}
.slip blockquote{margin:.55em 0 0}
.slip blockquote p{
  margin:0;font-family:var(--f-display);font-style:italic;
  font-size:var(--step-2);line-height:1.22;letter-spacing:-.012em;color:var(--ink);
}
.slip figcaption{margin-top:1em;font-size:.84rem;line-height:1.45;color:var(--ink-55)}
.slip figcaption a{color:var(--ink);font-weight:600;text-decoration:none;
  display:inline-block;padding-block:14px;margin-block:-14px}
.slip figcaption a:hover{text-decoration:underline;text-underline-offset:3px}
.slip figcaption span{display:block}
.stars{display:flex;gap:3px}
.stars i{
  width:14px;height:14px;background:var(--ochre);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

/* ---------------------------------------------------------------- readings */
.readings .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
@media (max-width:900px){.readings .grid{grid-template-columns:1fr}}
.rate{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;
  gap:clamp(18px,3.4vw,40px);margin-top:clamp(22px,3vw,34px)}
.rate div{min-width:0}
.rate b{display:block;font-family:var(--f-display);font-size:var(--step-2);letter-spacing:-.02em;
  color:#FDF4E0;line-height:1;font-weight:500}
.rate span{display:block;font-size:.79rem;color:rgba(245,235,214,.62);margin-top:.45em;line-height:1.4}
/* where she will travel to: for the schools reading it, and for search */
.readings .areas{margin:clamp(20px,2.6vw,28px) 0 0;max-width:46ch;
  font-size:var(--step--1);line-height:1.6;color:rgba(245,235,214,.78)}

form{display:grid;gap:14px}

/* who is asking: real radios, drawn as a row of pills */
fieldset.who{border:0;margin:0 0 4px;padding:0;min-width:0}
fieldset.who legend{padding:0;margin-bottom:9px;font-size:.83rem;color:rgba(245,235,214,.74)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{display:block;position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{
  display:flex;align-items:center;justify-content:center;min-height:44px;
  padding:.55em 1.05em;border-radius:999px;font-size:.92rem;font-weight:500;
  color:rgba(245,235,214,.86);border:1.5px solid rgba(245,235,214,.3);
  transition:background .2s,color .2s,border-color .2s;
}
.seg label:hover span{border-color:rgba(245,235,214,.6)}
.seg input:checked + span{background:var(--ochre-lit);border-color:var(--ochre-lit);color:var(--ink);font-weight:700}
.seg input:focus-visible + span{outline:3px solid var(--ochre-lit);outline-offset:3px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.row{grid-template-columns:1fr}}
label{display:grid;gap:6px;font-size:.83rem;color:rgba(245,235,214,.74)}
input,select,textarea{
  font-family:var(--f-body);font-size:1rem;color:#FDF4E0;
  background:rgba(253,244,224,.07);border:1.5px solid rgba(253,244,224,.24);
  border-radius:4px;padding:.76em .85em;width:100%;min-height:48px;
  transition:border-color .25s,background .25s;
}
textarea{min-height:100px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--ochre-lit);background:rgba(253,244,224,.12)}
input::placeholder,textarea::placeholder{color:rgba(245,235,214,.42)}
select option{background:#1B2233;color:#FDF4E0}
.formnote{font-size:.78rem;color:rgba(245,235,214,.56);line-height:1.5;margin:2px 0 0}
.sent{display:none;padding:16px 18px;background:rgba(140,162,106,.18);
  border:1.5px solid rgba(140,162,106,.55);border-radius:4px;font-size:.93rem;line-height:1.5}
.sent.on{display:block}

/* ---------------------------------------------------------------- post */
.post .inner{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,48px);align-items:center}
@media (max-width:760px){.post .inner{grid-template-columns:1fr}}
.post form{grid-auto-flow:column;grid-template-columns:1fr auto;gap:10px;align-items:start}
@media (max-width:560px){.post form{grid-auto-flow:row;grid-template-columns:1fr}}
.post input{color:var(--ink);background:#FFFCF4;border-color:var(--rule-2);min-width:min(300px,68vw)}
.post input::placeholder{color:var(--ink-55)}
.post .formnote{color:var(--ink-55)}
.post .sent{background:rgba(90,108,68,.14);border-color:rgba(90,108,68,.5);color:var(--ink)}

/* ---------------------------------------------------------------- footer */
footer.site{background:var(--ink);color:var(--parchment);padding-block:clamp(44px,6vw,72px) 26px}
footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(24px,4vw,52px)}
@media (max-width:760px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media (max-width:460px){footer.site .cols{grid-template-columns:1fr}}
footer.site h3{font-size:var(--step-1);margin-bottom:.55em}
footer.site p{color:rgba(245,235,214,.66);font-size:var(--step--1);margin:0;max-width:33ch}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
footer.site ul a{display:inline-flex;align-items:center;min-height:44px}
footer.site a{color:rgba(245,235,214,.8);text-decoration:none;font-size:var(--step--1)}
footer.site a:hover{color:#FDF4E0;text-decoration:underline;text-underline-offset:3px}
.legal{margin-top:clamp(30px,5vw,52px);padding-top:20px;border-top:1px solid rgba(245,235,214,.16);
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
  font-size:.78rem;color:rgba(245,235,214,.58)}
.legal a{color:rgba(245,235,214,.8);text-decoration:underline;text-underline-offset:2px;font-size:inherit;
  display:inline-block;padding-block:15px;margin-block:-9px}

/* ---------------------------------------------------------------- thumbbar */
.thumbbar{
  position:fixed;inset:auto 0 0 0;z-index:70;display:none;gap:9px;
  background:color-mix(in srgb,var(--ink) 96%,transparent);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  box-shadow:0 -1px 0 rgba(245,235,214,.16);
  transform:translateY(105%);transition:transform .4s var(--ease);
}
/* held back until the hero has been passed: a dark bar slicing across the
   opening illustration is the first thing a critic notices */
.thumbbar.on{transform:none}
html.no-js .thumbbar{transform:none}
.thumbbar a{
  flex:1;text-align:center;text-decoration:none;font-size:.87rem;font-weight:600;
  padding:.7em .5em;border-radius:999px;min-height:46px;
  display:flex;align-items:center;justify-content:center;
}
.thumbbar .a{background:var(--ochre);color:#FFF7E7}
.thumbbar .b{color:var(--parchment);border:1.5px solid rgba(245,235,214,.42)}
@media (max-width:860px){.thumbbar{display:flex}body{padding-bottom:72px}}

/* ---------------------------------------------------------------- motion */
.rise{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.in{opacity:1;transform:none}
html.no-js .rise{opacity:1;transform:none}
html.no-js .hero-paint,html.no-js .plate .paint{display:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .book:hover .jacket,.cast figure:hover .plateimg img{transform:none}
  .btn:hover{transform:none}
  .cue i{animation:none}
}

/* the egret crossing between chapters */
.flight{position:relative;height:clamp(120px,15vw,200px);background:var(--parchment);overflow:hidden}
.flight svg.path{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flight img.bird{
  position:absolute;top:0;left:0;width:clamp(96px,13vw,190px);height:auto;
  will-change:transform;
}
.flight.tone{background:var(--parchment-2)}

/* the honeypot: off screen for people, present in the DOM for bots */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* a send that failed says so, in the form, keeping everything they typed */
.sendfail{margin:12px 0 0;padding:12px 14px;border-radius:10px;background:rgba(158,76,69,.14);
  border:1px solid rgba(158,76,69,.5);color:#FBEFE2;font-size:.9rem;line-height:1.5}
.post .sendfail{background:rgba(158,76,69,.1);border-color:rgba(158,76,69,.45);color:var(--ink)}