/* Whispering Verse: a literary news and reviews portal, set like a Sunday literary supplement.
   Cool newsprint, a broadsheet masthead, one press red: section tags and the one action (Subscribe / Send us your work).
   Links that are not the action are ink with an underline. Every page, the front page included, is built by build.py. */
@font-face{font-family:"Source Serif";src:url(/fonts/source-serif.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/fonts/public-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}
/* metric-matched fallbacks (scripts/fallback.mjs), so the page does not jump when the fonts arrive */
@font-face{font-family:"Source Serif Fallback";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos");size-adjust:111.8%;ascent-override:93.03%;descent-override:30.41%;line-gap-override:0%}
@font-face{font-family:"Public Sans Fallback";src:local("Arial"),local("Liberation Sans"),local("Arimo");size-adjust:102.86%;ascent-override:92.36%;descent-override:22.36%;line-gap-override:0%}

:root{color-scheme:light;
  --paper:#F4F5F3;   /* cool newsprint, not cream */
  --white:#FFFFFF;
  --ink:#141617;     /* 17:1 */
  --ink-2:#4B5054;   /* 7.5:1 on paper, secondary text */
  --rule:#C8CCCB;    /* hairlines */
  --red:#C1272D;     /* the press red (5.3:1 on paper, 5.9:1 with white) */
  --night:#15191B;   /* the workroom: hero, closing band */
  --red-lit:#FF8F93; /* red for small text on night (7:1) */
  --mist:#C3C9CC;    /* secondary text on night (10:1) */
  --serif:"Source Serif","Source Serif Fallback",Georgia,"Times New Roman",serif;
  --sans:"Public Sans","Public Sans Fallback",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.23,1,.32,1);     /* entrances and feedback */
  --ease-in-out:cubic-bezier(.77,0,.175,1)} /* things moving on screen */
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;font:400 17px/1.55 var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
main{flex:1}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
::selection{background:rgba(193,39,45,.16);color:var(--ink)}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,56px)}
.skip{position:absolute;left:12px;top:-60px;padding:10px 14px;background:var(--ink);color:#fff;z-index:50}
.skip:focus{top:12px}
.tag{font-size:14px;font-weight:700;color:var(--red)}
.meta{font-size:14px;color:var(--ink-2)}

/* ---------- app bar: the brand, the sections, the one action ---------- */
.bar{border-bottom:1px solid var(--rule);background:var(--paper)}
.bar-in{display:flex;align-items:center;gap:8px 28px;min-height:64px}
.brand{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
.brand b{font:800 23px/1 var(--serif);letter-spacing:-.02em}
.brand span{font:700 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.sections{display:flex;flex-wrap:wrap;gap:0 clamp(14px,2vw,28px);margin-left:auto;font-size:15px;font-weight:600}
.sections a{display:inline-flex;align-items:center;min-height:44px}
.bar-cta{height:38px;font-size:14px}
.home .bar{background:var(--night);border-color:rgba(255,255,255,.08);color:#fff}
.home .brand span{color:var(--red-lit)}
.sections a,.card h2 a,.seconds strong,.latest strong,.cols strong,.list strong,.rev p strong,footer nav a{
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.5em;
  transition:text-decoration-color 180ms ease,text-underline-offset 260ms var(--ease-out),color 180ms ease}
.sections a[aria-current]{text-decoration-color:currentColor;text-underline-offset:6px}
@media (hover:hover) and (pointer:fine){
  .sections a:hover,.card:hover h2 a,.seconds a:hover strong,.latest a:hover strong,.cols a:hover strong,.list a:hover strong,.rev a:hover strong,footer nav a:hover{
    text-decoration-color:currentColor;text-underline-offset:.18em}
  .sections a:hover{text-underline-offset:6px}
}

/* ---------- front page ---------- */
.front{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);border-bottom:1px solid var(--rule)}
.lead{padding:28px clamp(16px,3vw,40px) 28px 0;border-right:1px solid var(--rule)}
/* the headline is the link; the whole card stays clickable through a stretched pseudo-element */
.card{position:relative}
.card h2{margin:8px 0 0;font:700 clamp(32px,4.4vw,64px)/1.03 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.card h2 a::after{content:"";position:absolute;inset:0}
.card .stand{margin:16px 0 0;max-width:52ch;font:400 clamp(18px,1.5vw,21px)/1.45 var(--serif);color:var(--ink-2);text-wrap:pretty}
.card .meta{margin-top:14px}
.seconds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0 clamp(20px,3vw,36px);margin-top:26px;border-top:1px solid var(--rule)}
.seconds a{display:block;padding:16px 0 0}
.seconds strong{display:block;margin-top:4px;font:700 clamp(21px,1.9vw,26px)/1.15 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.side{padding:28px 0 24px clamp(16px,3vw,32px)}
.side h2{margin:0 0 6px;font:700 22px var(--serif)}
.latest{list-style:none;margin:0;padding:0}
.latest li{border-top:1px solid var(--rule)}
.latest a{display:block;padding:12px 0}
.latest .meta,.list .meta,.cols .tag{transition:color 180ms ease}
.latest strong,.list strong,.cols strong{transition:text-decoration-color 180ms ease,text-underline-offset 260ms var(--ease-out),transform 260ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .latest a:hover .meta,.list a:hover .meta{color:var(--red)}
  .latest a:hover strong,.list a:hover strong{transform:translateX(4px)}
}
.latest a:active strong,.list a:active strong,.cols a:active strong,.seconds a:active strong{transform:translateX(4px) scale(.99)}
.latest .meta{display:block;font-size:13px}
.latest strong{display:block;font:600 17px/1.3 var(--serif)}

/* ---------- newsletter ---------- */
.letter{margin-top:16px;padding-top:14px;border-top:3px solid var(--ink)}
.letter label{display:block;font-size:14px;color:var(--ink-2);margin-bottom:10px}
.letter label b{display:block;margin-bottom:2px;font:700 20px/1.2 var(--serif);color:var(--ink)}
.field{display:flex;border:1px solid var(--ink);background:var(--white)}
.field:focus-within{outline:2px solid var(--red);outline-offset:2px}
.field input{flex:1;min-width:0;height:44px;padding:0 10px;border:1px solid transparent;background:transparent;font:400 16px var(--sans);color:var(--ink)}
.field input:focus-visible{outline:none}
.field input::placeholder{color:#6B7175}
.btn{position:relative;flex:none;height:44px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;
  background:var(--red);color:#fff;font:700 15px var(--sans);cursor:pointer;white-space:nowrap;transition:transform 160ms var(--ease-out),background-color 180ms ease}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:#A82127}}
.morph{min-width:112px;overflow:hidden}
.morph .st{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;transition:opacity 200ms ease,transform 300ms var(--ease)}
.morph .st[data-st="idle"]{position:relative;inset:auto}
.morph .st.off{opacity:0;transform:translateY(8px)}
.morph svg{width:15px;height:15px}
.morph[aria-disabled="true"]{cursor:default}
.ts:empty{display:none}
.err{margin:6px 0 0;font-size:14px;color:var(--red)}
.err:empty{margin:0}
.fine{margin:6px 0 0;font-size:13px;color:var(--ink-2)}
.fine a{display:inline-block;padding:4px 0;text-decoration:underline;text-underline-offset:3px}

/* ---------- bands on the front page ---------- */
.band{padding:28px 0 0;border-bottom:1px solid var(--rule)}
.band-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}
.band-head h2{margin:0;font:700 clamp(24px,2.6vw,34px) var(--serif);letter-spacing:-.01em}
.band-head a{font-size:15px;font-weight:700;white-space:nowrap;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.band-head a::after{content:"→";content:"→" / "";display:inline-block;margin-left:6px;transition:transform 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.band-head a:hover::after{transform:translateX(4px)}}
/* reviews: modest typographic jackets (or the real cover) that lean toward the pointer */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:clamp(16px,2vw,28px);padding-bottom:28px}
.rev{max-width:200px}
.rev a{display:block}
.jacket-wrap{perspective:900px}
.jacket{aspect-ratio:2/3;padding:14px 12px;display:flex;flex-direction:column;color:#fff;border-radius:2px 4px 4px 2px;overflow:hidden;
  box-shadow:inset 5px 0 0 rgba(0,0,0,.18),0 14px 22px -14px rgba(20,22,23,.5);transition:transform 300ms var(--ease)}
.jacket b{font:700 clamp(17px,1.5vw,21px)/1.08 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.jacket .jrule{display:block;width:28px;height:1px;margin:10px 0 0;background:rgba(255,255,255,.6)}
.jacket i{margin-top:auto;font:italic 400 13px/1.3 var(--serif);opacity:.92}
.jacket.has-img{padding:0}
.jacket img{display:block;width:100%;height:100%;object-fit:cover}
.jacket.mini{width:64px;padding:7px 6px;flex:none}
.jacket.mini b{font-size:10px;line-height:1.1}
.jacket.mini i,.jacket.mini .jrule{display:none}
.rev p{margin:10px 0 0;font-size:15px;line-height:1.4;color:var(--ink)}
.rev p strong{display:block;font-weight:600}
.verdict{display:block;margin-top:6px;font-weight:700;color:var(--red)}
.verdict.neg{color:var(--ink)}
.vlabel{display:inline-block;margin-right:4px;font-size:12px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:0 clamp(20px,3vw,40px);padding-bottom:28px}
.cols a{display:block;padding:14px 0;border-top:1px solid var(--rule)}
.cols strong{display:block;margin-top:4px;font:600 19px/1.3 var(--serif);text-wrap:pretty}
.dek{display:block;margin-top:6px;font-size:15px;color:var(--ink-2)}
.empty{margin:0;padding:24px 0 32px;color:var(--ink-2)}

/* ---------- section index ---------- */
.intro{padding:clamp(28px,5vh,64px) 0 clamp(18px,3vh,28px);border-bottom:1px solid var(--ink)}
.intro h1{margin:6px 0 0;font:700 clamp(40px,5.6vw,80px)/1.02 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.intro p.lede{margin:14px 0 0;max-width:56ch;font:400 clamp(18px,1.5vw,21px)/1.45 var(--serif);color:var(--ink-2)}
.intro p.lede a,.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px;overflow-wrap:anywhere}
.list{list-style:none;margin:0 0 clamp(48px,8vh,96px);padding:0}
.list li{border-bottom:1px solid var(--rule)}
.list a{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:6px 32px;padding:22px 0}
.list a.with-jacket{grid-template-columns:64px minmax(0,1fr);align-items:start;gap:6px 20px}
.list .meta{padding-top:6px}
.list a.with-jacket .meta{display:block;padding:0}
.list strong{display:block;font:700 clamp(22px,2.2vw,30px)/1.15 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.list .dek{max-width:66ch;font-size:16px}

/* ---------- article ---------- */
.article-head{padding:clamp(28px,5vh,56px) 0 20px;border-bottom:1px solid var(--rule)}
.crumbs{font-size:14px;color:var(--ink-2)}
.crumbs a{display:inline-block;padding:6px 0}
.crumbs a:first-child{text-decoration:underline;text-underline-offset:3px}
.article-head h1{margin:8px 0 0;max-width:22ch;font:700 clamp(34px,4.8vw,66px)/1.04 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.article-head .stand{margin:16px 0 0;max-width:60ch;font:400 clamp(19px,1.6vw,22px)/1.45 var(--serif);color:var(--ink-2);text-wrap:pretty}
.article-head .meta{margin-top:16px;display:flex;flex-wrap:wrap;gap:4px 10px}
.article-head .meta > * + *::before{content:"·";content:"·" / "";margin-right:10px;color:var(--ink-2)}
.article{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:clamp(24px,5vw,72px);padding:28px 0 clamp(48px,8vh,96px)}
/* the contents come first in the HTML (reading and tab order) and sit in the right-hand column on wide screens */
.article > .aside{grid-column:2;grid-row:1}
.article > .col{grid-column:1;grid-row:1}
.prose{font:400 20px/1.62 var(--serif);color:#22262A;hyphens:manual;text-wrap:pretty}
.prose > * + *{margin-top:1em}
.prose > :first-child{margin-top:0}
.prose h2{margin-top:1.8em;font:700 clamp(26px,2.6vw,32px)/1.15 var(--serif);letter-spacing:-.01em;color:var(--ink);hyphens:none;text-wrap:balance}
.prose h3{margin-top:1.6em;font:700 19px var(--sans);color:var(--ink);hyphens:none}
.prose p,.prose ul,.prose ol,.prose blockquote{margin-bottom:0}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--red)}
:is([data-section="guides"],[data-section="reviews"]) article .prose > p:first-child::first-letter{float:left;margin:.07em .09em 0 0;font:800 4.05em/.8 var(--serif);color:var(--red)}
.prose h2{scroll-margin-top:28px}
.prose blockquote{margin-left:0;padding:22px 24px 22px 28px;background:var(--white);border:1px solid var(--rule);box-shadow:inset 3px 0 0 var(--red),0 18px 30px -24px rgba(20,22,23,.35);
  font-size:.9em;line-height:1.6;color:var(--ink)}
.prose blockquote p + p{margin-top:.8em}
.prose strong{font-weight:700;color:var(--ink)}
.sources{margin-top:2em;padding-top:14px;border-top:1px solid var(--rule);font:400 15px/1.5 var(--sans);color:var(--ink-2)}
.sources h2{margin:0 0 6px;font:700 15px var(--sans);color:var(--ink)}
.sources ul{margin:0;padding-left:1.1em}
.sources a{color:var(--ink-2)}
.standards-note{font:400 14px/1.5 var(--sans);color:var(--ink-2)}
.aside{align-self:stretch}
.toc{position:sticky;top:28px;max-height:calc(100dvh - 56px);overflow:auto;padding-top:14px;border-top:3px solid var(--ink)}
.bookcard + .toc{margin-top:28px}
.toc h2{margin:0 0 8px;font:700 15px var(--sans)}
.toc ol{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.35}
.toc a{position:relative;display:block;padding:7px 0 7px 14px;color:var(--ink-2);transition:color 180ms ease}
.toc a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--rule)}
.toc a::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);transform:scaleY(0);transition:transform 260ms var(--ease-out)}
.toc a[aria-current]{color:var(--ink)}
.toc a:focus-visible{outline-offset:-2px}
.toc a[aria-current]::after{transform:scaleY(1)}
@media (hover:hover) and (pointer:fine){.toc a:hover{color:var(--ink)}}
.progress{display:none}
.bookcard{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;padding:16px;margin-bottom:28px;background:var(--white);border:1px solid var(--rule)}
.bookcard .jacket{padding:10px 8px}
.bookcard .jacket b{font-size:14px}.bookcard .jacket i{font-size:11px}
.bookcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-content:start;font-size:14px}
.bookcard dt{color:var(--ink-2)}
.bookcard dd{margin:0;font-weight:600}
.rating{color:var(--red);letter-spacing:2px}
/* after the text: read next, the newsletter (the one filled button), then submissions as a plain link */
.endmatter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 36px;margin-top:48px;padding-top:18px;border-top:4px solid var(--ink)}
.endmatter .letter{margin-top:0;padding-top:0;border-top:0}
.endmatter .related{grid-row:span 2}
.related h2,.cta h2{margin:0 0 6px;font:700 20px var(--serif)}
.related .latest strong{font-size:16px}
.cta p{margin:0 0 10px;font-size:15px;color:var(--ink-2)}
.textlink{font-weight:700;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:4px}
.textlink::after{content:"→";content:"→" / "";display:inline-block;margin-left:6px;transition:transform 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.textlink:hover::after{transform:translateX(4px)}}

/* ---------- the house mark: a typescript page an editor marks up in red ---------- */
.lead-top{display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,16vw,220px);gap:clamp(20px,3vw,40px);align-items:center}
.lost{margin-bottom:clamp(48px,8vh,96px)}
.intro.with-art{display:grid;grid-template-columns:minmax(0,1fr) clamp(130px,14vw,190px);gap:clamp(20px,4vw,56px);align-items:end}
.ms-fig{filter:drop-shadow(0 14px 18px rgba(20,22,23,.14))}
.ms{display:block;width:100%;height:auto;overflow:visible;transform:rotate(-2.5deg);transition:transform 500ms var(--ease-out)}
.ms-page{fill:var(--white);stroke:var(--rule)}
.ms-l{fill:#D7DAD9}
.ms-m{fill:none;stroke:var(--red);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ms-p{fill:var(--red);font:700 20px var(--serif)}
@media (hover:hover) and (pointer:fine){.lead-top:hover .ms,.intro:hover .ms{transform:rotate(0deg) translateY(-4px)}}

/* guides are numbered, like the chapters of a handbook */
[data-section="guides"] .list{counter-reset:guide}
[data-section="guides"] .list li{counter-increment:guide}
[data-section="guides"] .list .meta::before{content:counter(guide,decimal-leading-zero);content:counter(guide,decimal-leading-zero) / "";display:block;margin-bottom:6px;font:800 clamp(34px,3.4vw,48px)/1 var(--serif);
  letter-spacing:-.03em;color:var(--ink-2);transition:color 220ms ease}
@media (hover:hover) and (pointer:fine){[data-section="guides"] .list a:hover .meta::before{color:var(--red)}}
/* a band with a single piece keeps a reading width instead of stretching across the page */
.cols:has(> a:only-child){grid-template-columns:minmax(0,42rem)}

/* ---------- footer ---------- */
footer{border-top:4px solid var(--ink)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 28px;padding-top:20px;padding-bottom:28px;font-size:14px;color:var(--ink-2)}
footer nav{display:flex;flex-wrap:wrap;gap:0 22px}
footer nav a{display:inline-flex;align-items:center;min-height:36px}
@media (hover:hover) and (pointer:fine){footer nav a:hover{color:var(--ink)}}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:60;display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--ink);color:#fff;font-size:15px;border:1px solid transparent;
  max-width:calc(100vw - 32px);box-shadow:0 18px 40px -12px rgba(20,22,23,.5);transform:translate(-50%,calc(100% + 40px));opacity:0;transition:transform 400ms var(--ease),opacity 400ms ease;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}

@media (max-width:900px){
  .front,.article{grid-template-columns:minmax(0,1fr)}
  /* phones and tablets: the book card and contents come before the text (their HTML order), as a plain list */
  .article > .aside,.article > .col{grid-column:auto;grid-row:auto}
  .toc{position:static;max-height:none;overflow:visible;margin-bottom:8px}
  .toc ol{columns:2 220px;column-gap:24px}
  .toc li{break-inside:avoid}
  .lead{border-right:0;padding-right:0;padding-bottom:20px}
  .side{padding-left:0;padding-top:4px}
}
@media (max-width:600px){
  /* phones: the shelf becomes a row you swipe, so four jackets do not cost a screen of scrolling each */
  .shelf{display:flex;overflow-x:auto;gap:14px;padding-bottom:20px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .rev{flex:0 0 140px;scroll-snap-align:start}
  .list a{grid-template-columns:minmax(0,1fr)}
  .list .meta{padding-top:0}
  .bookcard{grid-template-columns:84px minmax(0,1fr)}
  /* phones: the lead headline keeps the full width; section pages keep a small mark beside the title */
  .lead-top,.intro.with-art{grid-template-columns:minmax(0,1fr)}
  .ms-fig{display:none}
  .endmatter{grid-template-columns:minmax(0,1fr)}
  .endmatter .related{grid-row:auto}
  .prose blockquote{padding:16px 16px 16px 20px}
}
@media (forced-colors:active){.field,.btn,.jacket{border:1px solid CanvasText}}
/* ---------- Studio: the front page ---------- */
.hero{color:#fff;text-align:center;padding:clamp(48px,9vh,104px) 0 0;overflow:hidden}
.hero{background-color:var(--night);background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px}
.eyebrow{margin:0;font:700 13px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--red-lit)}
.hero h1{max-width:15ch;margin:14px auto 0;font:800 clamp(42px,6.6vw,88px)/1.02 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.hero-sub{max-width:54ch;margin:20px auto 0;font:400 clamp(18px,1.6vw,22px)/1.5 var(--serif);color:var(--mist);text-wrap:pretty}
.hero .letter{max-width:470px;margin:30px auto 0;padding:0;border:0;text-align:left}
.hero .letter label{color:var(--mist)}
.hero .letter label b{color:#fff}
.hero .field{border-color:#fff}
.hero .fine{color:var(--mist)}
.hero .err{color:var(--red-lit)}
/* the app in frame: a manuscript mid-revision (drawn in HTML, decoration only) */
.app{display:grid;grid-template-columns:190px minmax(0,1fr) 220px;max-width:1080px;margin:clamp(40px,7vh,72px) auto 0;text-align:left;
  background:#FBFBFA;color:var(--ink);border-radius:10px 10px 0 0;overflow:hidden;box-shadow:0 -12px 70px rgba(0,0,0,.5);font-size:13px;line-height:1.45}
.app-top{grid-column:1/-1;display:flex;align-items:center;gap:6px;padding:10px 14px;background:#EEF0EF;border-bottom:1px solid #E1E4E3;color:var(--ink-2)}
.app-top i{width:10px;height:10px;border-radius:50%;background:#D3D7D6}
.app-top span{margin-left:10px;font-weight:600}
.app-side{list-style:none;margin:0;padding:14px 0;background:#1D2225;color:var(--mist)}
.app-side li{padding:7px 16px}
.app-side .on{background:#2A3034;color:#fff;box-shadow:inset 3px 0 var(--red)}
.app-book{font-weight:700;color:#fff}
.app-sep{margin-top:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8D959A}
.app-page{padding:34px clamp(20px,5vw,64px) 56px;font:400 16px/1.7 var(--serif)}
.app-page h3{margin:0 0 18px;text-align:center;font:700 15px var(--sans);letter-spacing:.12em;text-transform:uppercase}
.app-page p{margin:0 0 .9em}
.app del,.row-vis del{color:var(--red);text-decoration-thickness:2px}
.row-vis ins{text-decoration:none;background:rgba(193,39,45,.09);border-bottom:2px solid var(--red)}
.app-notes{padding:16px;border-left:1px solid #E4E6E5;background:#F6F7F6}
.app-goal,.v-goal{margin:0 0 16px}
.app-goal span,.v-goal span{display:block;color:var(--ink-2)}
.app-goal i,.v-goal i{display:block;height:6px;margin-top:6px;background:#E1E4E3;border-radius:3px;overflow:hidden}
.app-goal s,.v-goal s{display:block;height:100%;width:81%;background:var(--red)}
.app-comment,.v-note{margin:0 0 10px;padding:10px 12px;background:#fff;border:1px solid #E1E4E3;border-left:3px solid var(--red);border-radius:4px}
.app-comment b,.v-note b{display:block;font-size:12px}
/* four rooms */
.feat{padding:clamp(56px,10vh,112px) clamp(16px,4vw,56px) clamp(24px,4vh,48px)}
.feat-head{max-width:40rem;margin:0 auto clamp(24px,4vh,40px);text-align:center}
.feat-head h2,.faq h2{margin:0;font:700 clamp(32px,3.6vw,48px)/1.08 var(--serif);letter-spacing:-.02em}
.feat-head p{margin:12px 0 0;font:400 20px/1.5 var(--serif);color:var(--ink-2)}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(32px,6vh,64px) 0;border-top:1px solid var(--rule)}
.row:nth-of-type(even) .row-vis{order:-1}
.row h3{margin:6px 0 0;font:700 clamp(26px,2.8vw,38px)/1.12 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.row-text p:last-child{margin:14px 0 0;max-width:44ch;font:400 19px/1.55 var(--serif);color:var(--ink-2)}
.row-vis{padding:clamp(20px,3vw,32px);background:var(--white);border:1px solid var(--rule);border-radius:10px;box-shadow:0 24px 40px -30px rgba(20,22,23,.45);font-size:15px}
.v-chapters{list-style:none;margin:0 0 18px;padding:0}
.v-chapters li{padding:9px 12px;border-radius:4px;color:var(--ink-2)}
.v-chapters .on{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 var(--red)}
.v-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.v-board p{margin:0;padding:12px;background:var(--paper);border-radius:6px;color:var(--ink-2);font-size:14px}
.v-board b{display:block;margin-bottom:4px;color:var(--ink);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.v-text{margin:0 0 14px;font:400 17px/1.7 var(--serif)}
.v-books{display:flex;justify-content:center;align-items:flex-end;gap:24px}
.v-epub,.v-pdf{display:flex;flex-direction:column;border-radius:4px}
.v-epub{width:132px;aspect-ratio:3/4;padding:16px 12px;background:#1F3B4D;color:#fff;border:6px solid #2A3034;border-radius:12px}
.v-epub b{font:700 17px/1.1 var(--serif)}
.v-pdf{width:150px;aspect-ratio:5/8;padding:18px 14px;background:#fff;border:1px solid var(--rule);box-shadow:0 14px 24px -16px rgba(20,22,23,.4)}
.v-pdf b{margin-bottom:12px;text-align:center;font:700 11px var(--sans);letter-spacing:.1em;text-transform:uppercase}
.v-pdf span{display:block;height:5px;margin-bottom:8px;background:#DADDDC;border-radius:3px}
.v-epub i,.v-pdf i{margin-top:auto;font:600 11px var(--sans);font-style:normal;opacity:.75}
.home .band{padding-left:clamp(16px,4vw,56px);padding-right:clamp(16px,4vw,56px)}
/* questions */
.faq{max-width:52rem;padding:clamp(48px,8vh,96px) clamp(16px,4vw,56px)}
.faq h2{margin-bottom:18px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;justify-content:space-between;gap:16px;padding:18px 0;font:700 20px/1.3 var(--serif);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";content:"+" / "";color:var(--red);font:400 26px/1 var(--sans);transition:transform 220ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;max-width:62ch;color:var(--ink-2)}
.faq details a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.closing{padding:clamp(56px,10vh,104px) 0;background:var(--night);color:#fff;text-align:center}
.closing h2{margin:0 auto;max-width:18ch;font:800 clamp(32px,4.4vw,56px)/1.05 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.closing p{margin:14px 0 24px;color:var(--mist)}
.home footer{border-top:0}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .app-side,.app-notes{display:none}
  .row{grid-template-columns:minmax(0,1fr)}
  .row:nth-of-type(even) .row-vis{order:0}
}
@media (max-width:600px){
  .bar-in{flex-wrap:wrap;padding-top:10px}
  .sections{order:3;width:100%;margin-left:0;gap:0 18px}
  .bar-cta{display:none} /* the form is on the page; the bar keeps to one line of brand and sections */
  .v-board{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:no-preference){
  .hero .wrap > *{animation:settle 520ms var(--ease-out) both}
  .hero .wrap > :nth-child(2){animation-delay:40ms}
  .hero .wrap > :nth-child(3){animation-delay:80ms}
  .hero .wrap > :nth-child(4){animation-delay:120ms}
  .hero .app{animation:rise 900ms var(--ease-out) 180ms both}
  html.vt .hero .wrap > *{animation:none}
  @supports (animation-timeline:view()){
    .row-vis,.faq details{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}
/* ---------- motion ----------
   Pages cross-fade and the masthead, section bar and headlines glide to their new place (cross-document view
   transitions, no script). On a direct visit the furniture around a headline settles in and the editor's marks draw
   themselves on the house page. List items rise into view as you scroll (transform only for anything you might need
   to read early), and a red line tracks how far through the text you are. Reduced motion: no movement at all. */
@view-transition{navigation:auto}
.brand b{view-transition-name:mast}
.sections{view-transition-name:sections}
::view-transition-group(*){animation-duration:420ms;animation-timing-function:var(--ease-in-out)}
::view-transition-old(root){animation:vt-out 160ms ease both}
::view-transition-new(root){animation:vt-in 300ms ease 60ms both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
@keyframes settle{from{opacity:0;transform:translateY(14px)}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
@keyframes nudge{from{transform:translateY(10px)}}
@keyframes read{to{transform:scaleX(1)}}
@keyframes ms-line{from{opacity:0;transform:translateX(-6px)}}
@keyframes ms-draw{to{stroke-dashoffset:0}}
@keyframes ms-pop{from{opacity:0;transform:scale(.8)}}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .intro > div > :not(h1),.article-head > :not(h1),.card > :not(h2),.ms-fig{animation:settle 460ms var(--ease-out) both}
  .intro > div > :nth-child(2),.article-head > :nth-child(3),.card > :nth-child(3),.ms-fig{animation-delay:50ms}
  .intro > div > :nth-child(3),.article-head > :nth-child(4),.card > :nth-child(4){animation-delay:100ms}
  /* arriving through a page transition, the glide is the motion: nothing else animates in on top of it */
  /* (html.vt is set on pagereveal and stays, so the entrance does not replay once the transition ends) */
  html.vt .intro > div > *,html.vt .article-head > *,html.vt .card > *,html.vt .ms-fig,
  html:active-view-transition .intro > div > *,html:active-view-transition .article-head > *,html:active-view-transition .card > *{animation:none}
  .ms-l{animation:ms-line 420ms var(--ease-out) both;animation-delay:calc(180ms + var(--i) * 35ms)}
  .ms-m{stroke-dasharray:1;stroke-dashoffset:1;animation:ms-draw 620ms var(--ease-in-out) forwards;animation-delay:var(--d)}
  .ms-p{transform-box:fill-box;transform-origin:center;animation:ms-pop 360ms var(--ease-out) 1900ms both}
  @supports (animation-timeline:view()){
    /* ranges end when the item has fully entered, which is always reachable, so nothing can stay half-faded */
    .cols > a,.list > li,.shelf > .rev{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    .cols > a:nth-child(2),.shelf > .rev:nth-child(even){animation-range:entry 15% entry 100%}
    .cols > a:nth-child(3){animation-range:entry 30% entry 100%}
    .band-head,.endmatter > *,.prose > blockquote{animation:nudge linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}
@supports (animation-timeline:view()){
  /* reading progress follows the text itself, not the header, sidebar or footer */
  body{timeline-scope:--read}
  article .prose{view-timeline:--read block}
  .progress{display:block;position:fixed;inset:0 0 auto;z-index:70;height:3px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;
    animation:read linear both;animation-timeline:--read;animation-range:contain 0% contain 100%;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{transition-property:opacity,color,background-color,text-decoration-color!important;animation:none!important}
  .jacket,.ms{transform:none!important}
  .progress{display:none}
}
@media print{
  *,*::before,*::after{animation:none!important;transition:none!important}
  .progress,.letter,.cta,.toast,.sections,.bar-cta,.skip,.ms-fig,footer nav{display:none!important}
  body,html{background:#fff}
  .article{display:block}
  .toc{position:static;max-height:none;overflow:visible}
  .prose a::after{content:" (" attr(href) ")";font-size:.8em;color:var(--ink-2)}
}