/* ===========================================================
   Erskine Press — erskinepress.com
   Tokens from plan §1.3. Hand-editable; no build step.
   =========================================================== */

:root{
  /* Paper & ink */
  --paper:#FAF8F5;
  --paper-2:#F3EFEA;
  --paper-3:#EBE5DC;
  --ink:#1C2B22;
  --ink-soft:#474C46;

  /* Rules and borders are their own tokens — paper tones are for surfaces.
     Using --paper-3 as a border gave 1.09:1 against band 2, i.e. invisible. */
  --line:#C9BEAC;          /* 1.73:1 on paper — general borders */
  --line-strong:#9E8C72;   /* 3.07:1 — separators between adjacent controls */

  --surface:#FFFFFF;      /* card face, per plan §1.3 */

  /* A scan of real paper stock — Kyle T. Webster's pack, reduced to fine grain and
     re-seamed by check/make-paper-grain.py — on the header and the footer, and nowhere
     else. The chrome is where the site can afford to feel like a made object; the
     reading surfaces stay flat, which is both what the brief's first commitment asks for
     and what this audience needs behind sentences. Because it now has to carry the
     boutique feel from two thin bands rather than from everything at once, it is baked
     several times stronger than a full-page grain could ever be.

     Served at half its pixel size so a 2x screen paints it one image pixel to one device
     pixel — the difference between paper and a pattern. Strength is baked into the file:
     a background-image cannot be faded without fading the element's contents with it. */
  --grain:url("../assets/paper-grain.png");
  --grain-size:128px;
  /* Never put this on --paper-3. ink-soft on flat #EBE5DC is 7.02:1 — two hundredths
     above AAA — and the tile's darkest patch takes that to 6.53:1. plan-check.py R30
     composites the real tile over the real grounds and will fail the push. */
  --brand-green:#3a4436;

  --title-face:Georgia,"Times New Roman",serif;
  --body-face:"Atkinson Hyperlegible",Arial,sans-serif;
  --text-body:17px;
  /* Named by role, not size: applying --text-meta to a sentence should look
     wrong as you type it. §1.3 forbids 14px body copy outright. */
  --text-meta:14px;       /* facts ABOUT content: tags, dates, captions, gloss, subtitle */
  --text-chrome:14px;     /* furniture: nav, language menu, footer */
  --text-card-hook:.92rem;/* the one sanctioned sub-body sentence — §1.7's .card-hook */
  --text-lede:20px;
  --measure:65ch;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  --touch-min:48px;
  --motion-fast:.18s;
  --motion-expand:.28s;

  /* lets block-size:auto animate on ::details-content */
  interpolate-size: allow-keywords;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body-face);font-size:var(--text-body);line-height:1.6;
  -webkit-text-size-adjust:100%;
}

/* Japanese: a real Mincho stack for display type. Without this, headings fell
   through Georgia to whatever generic serif the OS picked. text-transform is
   left global — it is a no-op on kana and kanji, and applies to embedded Latin
   consistently in both languages. */
html[lang="ja"] body{
  font-family:"Atkinson Hyperlegible","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
}
html[lang="ja"]{
  --title-face:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
}
html[lang="ja"] h1,
html[lang="ja"] .ct__title{letter-spacing:.08em;font-weight:600}

img,svg{max-width:100%;height:auto}
.ico{width:18px;height:18px;flex:none;margin-right:var(--s2);vertical-align:-3px}
/* covers render white-on-signature by default; the spine row overrides it */
.cover{color:#FFFFFF}

a{color:var(--brand-green);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}

/* Double ring: ink is dark enough for cream, and the paper "moat" guarantees a
   gap even when the element behind it is a dark signature colour. Brand green
   on a signature block measured 1.08:1 — effectively no ring at all. */
:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
  box-shadow:0 0 0 3px var(--paper);
}

.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:var(--s5)}
.measure{max-width:var(--measure)}
/* short one-line messages don't want a measure cap */
.book-msg{max-width:none}

.skip{position:absolute;left:-9999px;top:0;background:var(--brand-green);color:var(--paper);padding:var(--s3) var(--s4);z-index:10}
.skip:focus{left:0}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- Header ---------- */
/* The header sits on --paper-2, the footer's tone, rather than on the page's own --paper.
   On --paper the same tile read as smudge: a 76px band shows one narrow slice of it
   repeating across the width, and against the lightest tone the specks are isolated enough
   that the eye locks onto the repeat. The darker ground gives them somewhere to sit, so
   they read as stock — and it makes the two bands that frame the page a matched pair
   rather than one textured band and one textured background. */
.site-head{
  border-bottom:1px solid var(--line);
  background-color:var(--paper-2);background-image:var(--grain);background-size:var(--grain-size);
}
.site-head .wrap{display:flex;align-items:center;gap:var(--s4);min-height:72px;flex-wrap:wrap}
.wordmark{
  display:inline-flex;align-items:center;gap:var(--s3);
  font-family:var(--title-face);text-transform:uppercase;letter-spacing:.12em;
  font-size:18px;color:var(--brand-green);text-decoration:none;font-weight:700;margin-right:auto;
}
/* "Erskine" bold, "Press" regular: the weight break says imprint-of-a-company
   without adding a word. §1.3 fixes the face, case and tracking but not weight. */
.wordmark__press{font-weight:400}
.wordmark__mark{width:26px;height:26px;flex:none;color:var(--brand-green)}
.wordmark:hover{text-decoration:underline}
.site-nav{display:flex;align-items:center;gap:var(--s4);font-size:var(--text-chrome)}
.site-nav>a{color:var(--brand-green);display:inline-flex;align-items:center;min-height:var(--touch-min)}
.site-nav [aria-current="page"]{text-decoration:none;color:var(--ink-soft)}

/* Language menu — a disclosure rather than two codes side by side, which
   wrapped the header onto two lines on a phone. Native <details>, so it opens
   with JavaScript off. The globe never appears alone: the current language
   code sits beside it, so the control is never icon-only. */
.langmenu{position:relative}
.langmenu summary{
  display:inline-flex;align-items:center;gap:6px;
  min-height:var(--touch-min);padding-inline:var(--s2);
  font-size:var(--text-chrome);letter-spacing:.08em;color:var(--ink-soft);
  cursor:pointer;list-style:none;
}
.langmenu summary::-webkit-details-marker{display:none}
.langmenu summary::marker{content:""}
.langmenu summary:hover{color:var(--brand-green)}
.langmenu__icon{width:18px;height:18px;flex:none}
.langmenu__code{font-weight:700;color:var(--ink)}
.langmenu ul{
  position:absolute;right:0;top:100%;z-index:30;
  margin:var(--s1) 0 0;padding:var(--s2);list-style:none;
  min-width:150px;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 6px 16px rgba(28,43,34,.12);
}
.langmenu li{margin:0}
.langmenu ul a{
  display:flex;align-items:center;min-height:var(--touch-min);
  padding-inline:var(--s3);border-radius:6px;
  color:var(--ink);text-decoration:none;font-size:var(--text-chrome);
}
.langmenu ul a:hover{background:var(--paper-2);text-decoration:underline}
.langmenu ul a[aria-current="true"]{font-weight:700;color:var(--brand-green)}

@media (max-width:479px){
  .site-head .wrap{gap:var(--s3)}
  .wordmark{font-size:16px;gap:var(--s2)}
  .wordmark__mark{width:22px;height:22px}
}

/* ---------- Page furniture ---------- */
main{display:block;padding-block:var(--s7) var(--s8)}
.lede{font-size:var(--text-lede);line-height:1.55;margin:0 0 var(--s6)}

/* Uppercase is the brand's strongest typographic signal, and it belongs on
   short display strings only — never on tags, hooks or running text, where
   all-caps costs word-shape recognition this readership relies on. */
h1{
  font-family:var(--title-face);
  font-size:clamp(1.5rem,4vw,2.25rem);line-height:1.2;margin:0 0 var(--s4);
  text-transform:uppercase;letter-spacing:.03em;
}
h2{font-family:var(--title-face);font-size:1.25rem;line-height:1.25;margin:var(--s7) 0 var(--s4)}
h3{font-size:1.25rem;margin:var(--s6) 0 var(--s3)}
p{margin:0 0 var(--s4)}

/* ---------- Catalogue ----------
   Phone: spine stack (§1.5). Wide: editorial grid (§1.7). One DOM. */
.catalog{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.ct{border-bottom:1px solid var(--line-strong)}
/* White, not --paper-2. Once the header and the footer took the grain, --paper-2 was
   doing two jobs — the chrome tone and the band tone — and on a phone the same colour
   appeared four times down one thumb-scroll under three different treatments. White is
   the row's own material on wide screens, where every .ct is a --surface card, so this
   is the phone borrowing the desktop's vocabulary rather than a new colour entering the
   palette. It also buys back contrast the band was quietly costing: Beowulf's #93301b
   on --paper-2 is 6.85:1, under AAA for the 14px bold "Coming …" line, and on white it
   is 7.84:1. Every signature colour clears AAA on white; two do not on --paper-3, which
   is why the darker direction was not taken. */
.ct:nth-child(even){background:var(--surface)}

/* The plan's own anatomy: a relative row with the art absolutely positioned
   down its full height, and the text simply padded clear of it. A grid whose
   tracks are centred cannot stretch a spanning item to the row's min-height. */
.ct summary{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  height:88px;overflow:hidden;
  padding:var(--s2) 40px var(--s2) 170px;
  cursor:pointer;list-style:none;
}
.ct summary::-webkit-details-marker{display:none}
.ct summary::marker{content:""}
.ct summary:focus-visible{position:relative;z-index:1;outline-offset:3px}

/* Plan 1.5: the spine row shows the same master SVG windowed to a crop and
   RECOLOURED — #cover-art carries no fill of its own, so setting color here is
   the only difference between "true cover" and "cream-page ink". The cover's
   own background rect is suppressed so the paper band shows through. */
.ct__art{
  position:absolute;left:0;top:0;bottom:0;width:154px;
  overflow:hidden;background:transparent;
}
.ct__art .cover{color:var(--sig)}
.ct__art .cover-bg{display:none}
.ct__art svg{
  position:absolute;max-width:none;
  width:var(--iw);height:var(--ih);
  left:50%;top:50%;
  margin-left:calc(-1 * var(--icx));
  margin-top:calc(-1 * var(--icy));
}
.ct__title{
  font-family:var(--title-face);font-weight:700;font-size:1.125rem;line-height:1.25;
  margin:0;color:var(--ink);text-transform:uppercase;letter-spacing:.03em;
}
.ct__gloss{font-size:var(--text-meta);color:var(--ink-soft);margin-top:2px}
.ct__meta{
  font-size:var(--text-meta);color:var(--ink-soft);margin-top:var(--s1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ct__when{font-weight:700;color:var(--sig,var(--ink))}
.ct__tag{display:inline-block}
.ct__sep{opacity:.6}
.ct__hook--card,
.ct__cardlink{display:none}   /* card-only; the phone uses the panel and the arrow */
.ct__arrow{
  position:absolute;right:var(--s4);top:50%;transform:translateY(-50%);
  font-size:1.25rem;line-height:1;color:var(--ink-soft);
  transition:transform var(--motion-fast) ease;
}
.ct details[open] .ct__arrow{transform:translateY(-50%) rotate(90deg)}


/* Animated open/close with no JavaScript. Browsers without ::details-content
   simply snap open — which is the plan's own documented no-JS fallback. */
.ct details::details-content{
  block-size:0;overflow:hidden;
  transition:block-size var(--motion-expand) cubic-bezier(.4,0,.2,1),
             content-visibility var(--motion-expand) allow-discrete;
}
.ct details[open]::details-content{block-size:auto}

.ct__panel{padding:0 0 var(--s4)}   /* no side padding: the hero band is full-bleed */
.ct__hero{border-radius:0 0 10px 10px;overflow:hidden;margin:0}
.ct__heroband{background:var(--sig);padding:10px var(--s5)}
.ct__heroband strong{
  font-family:var(--title-face);font-size:1.05rem;color:#fff;
  text-transform:uppercase;letter-spacing:.03em;
}
.ct__herobody{padding:var(--s4) var(--s5) var(--s5)}
.ct:nth-child(odd) .ct__herobody{background:var(--paper)}
.ct:nth-child(even) .ct__herobody{background:var(--surface)}
.ct__herotags{font-size:var(--text-meta);color:var(--ink-soft);margin:0 0 var(--s2)}
.ct__herotags .ct__tag{display:inline-block}
.ct__herotags .ct__sep{opacity:.6}
.ct__hook{margin:0 0 var(--s3);color:var(--ink)}
.ct__quotelabel{font-size:var(--text-meta);color:var(--ink-soft);margin:0 0 var(--s2)}
.ct__quote{
  margin:0 0 var(--s3);padding:var(--s1) 0 var(--s1) var(--s4);
  border-left:3px solid var(--sig,var(--ink));
  font-family:var(--title-face);font-style:italic;font-size:1.05rem;line-height:1.5;color:var(--ink);
}
.ct__more{
  display:inline-flex;align-items:center;min-height:var(--touch-min);
  font-weight:700;color:var(--sig,var(--brand-green));
}

/* Phone: bands run edge to edge. A padded box is exactly what §1.5 warns off. */
@media (max-width:699px){
  .catalog{margin-inline:calc(var(--s5) * -1)}
  .ct summary{padding-right:var(--s5)}
}

/* Wide: cards on an off-white surface, cover whole, hook always visible,
   no disclosure — a card has room for the sentence an 88px band does not. */
@media (min-width:700px){
  /* Cards keep their size whether the shelf holds two titles or twelve. With
     a 1fr max, a two-book catalogue stretches each card to ~500px; capping the
     track and centring the row keeps the leftover space symmetric instead of
     pooling on one side. */
  .catalog{
    display:grid;gap:var(--s6);border-top:0;margin-inline:0;
    grid-template-columns:repeat(auto-fit,minmax(210px,260px));
    justify-content:center;
  }
  /* The whole card is the link (plan 1.7) — a card has room to show its
     sentence permanently, so there is no tap-to-expand step and no "more". */
  .ct,.ct:nth-child(even){
    position:relative;background:var(--surface);
    border:1px solid var(--line);border-radius:12px;overflow:hidden;
    transition:transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
  }
  .ct:has(.ct__cardlink):hover,
  .ct:has(.ct__cardlink:focus-visible){
    transform:translateY(-3px);box-shadow:0 6px 16px rgba(28,43,34,.12);
  }
  .ct:has(.ct__cardlink):hover .ct__title,
  .ct:has(.ct__cardlink:focus-visible) .ct__title{text-decoration:underline;text-underline-offset:3px}
  .ct__cardlink{display:block;position:absolute;inset:0;z-index:2}

  /* the phone row is a fixed 88px box; a card is not */
  .ct summary{
    display:block;height:auto;min-height:0;overflow:visible;
    padding:0;cursor:default;pointer-events:none;
  }
  .ct__arrow{display:none}
  .ct__art{
    position:static;width:100%;height:auto;aspect-ratio:2/3;
    background:var(--sig);
  }
  .ct__art .cover{color:#FFFFFF}
  .ct__art .cover-bg{display:block}
  .ct__art svg{position:static;width:100%;height:100%;display:block;margin:0}

  /* one padded block of info, matching the plan's .grid-card .info */
  .ct__title,.ct__gloss,.ct__meta,.ct__hook--card{display:block;padding-inline:var(--s4)}
  .ct__title{margin-top:var(--s4);font-size:1.05rem;letter-spacing:.01em}
  .ct__gloss{margin-top:2px}
  .ct__meta{margin-top:var(--s1)}
  .ct__hook--card{
    display:block;margin-top:var(--s3);padding-bottom:var(--s4);
    font-size:var(--text-card-hook);line-height:1.4;color:var(--ink-soft);
  }
  .ct details::details-content{display:none}
}

/* The one claim that survived the About page: a quality statement about the
   books, so it sits with the books. Deliberately not a headed section — a
   heading would over-weight a single sentence. */
.human{
  margin:var(--s7) 0 0;
  font-size:var(--text-body);color:var(--ink);
}

/* ---------- Follow / release news ---------- */
/* A card, not a band. It was --paper-2, which put it in the same tone as the footer
   64px below it — and once the footer carried grain, the two read as the same colour in
   two different materials, in one eyeful. On a phone that tone appears four times in a
   thumb-scroll with three treatments. --surface plus the border and the 12px radius is
   the card language the catalogue already uses on wide screens, and it is what this
   block has always physically been: bordered, padded, sitting inside .wrap. It also
   lifts every pair here well clear of AAA — ink 14.81:1, ink-soft 8.79:1, links 10.19:1. */
.follow{
  margin-top:var(--s8);background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:var(--s6);
}
.follow h2{margin-top:0}
/* One or two sentences on a card do not need a measure — a cap here just
   orphans the last word. */
.follow p{max-width:none}
.follow ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s4)}
.follow a{display:inline-flex;align-items:center;min-height:var(--touch-min);font-weight:700}

/* ---------- Book page ---------- */
.book{display:grid;gap:var(--s7);grid-template-columns:1fr}
@media (min-width:760px){.book{grid-template-columns:320px 1fr;align-items:start}}
.book__art{border:1px solid var(--line);background:var(--sig);line-height:0}
.book__art svg{width:100%;height:auto;display:block}
.book h1{color:var(--sig,var(--ink));margin-bottom:var(--s1)}
.book__gloss{font-size:1rem;color:var(--ink-soft);margin:0 0 var(--s2)}
.book__sub{font-size:var(--text-meta);font-style:italic;color:var(--ink-soft);margin:0 0 var(--s2)}
.book__by{font-size:1rem;color:var(--ink-soft);margin:0 0 var(--s4)}
.book__status{
  display:inline-block;font-weight:700;font-size:1rem;color:var(--sig,var(--ink));
  border:1.5px solid currentColor;border-radius:999px;
  padding:var(--s1) var(--s3);margin:0 0 var(--s5);
}
.book__hook{font-size:1.0625rem;line-height:1.5}
.book__back{margin-top:var(--s7)}
.book__back a{
  font-weight:700;font-size:1rem;color:var(--brand-green);
  text-decoration:underline;text-underline-offset:3px;
}

/* Chapter excerpt (plan 1.8) — a bordered card sitting below the hero, not
   inside its text column, so it gets the full measure rather than sharing a
   row with the cover. Native <details>; the summary names what the reader
   gets, never just an icon. */
/* Fills the container. .wrap already caps the page at 1080px, so the widest
   this can get is ~1032px — and the readership is overwhelmingly on phones and
   tablets, where it is nowhere near that. A cap here would buy a rare desktop
   case at the cost of an obviously unfilled box. */
.bp-chapter{
  margin-top:var(--s6);
  border:1px solid var(--line);border-radius:8px;overflow:hidden;
}
.bp-chapter summary{
  display:flex;align-items:center;gap:var(--s2);
  min-height:var(--touch-min);padding:var(--s3) var(--s4);
  background:var(--paper-2);
  font-weight:700;font-size:var(--text-body);color:var(--ink);
  cursor:pointer;list-style:none;
  transition:background var(--motion-fast) ease;
}
.bp-chapter summary:hover{background:var(--paper-3)}
.bp-chapter summary::marker{content:""}
.bp-chapter summary::-webkit-details-marker{display:none}
.bp-chapter summary::before{
  content:"\203A";font-size:1.25rem;line-height:1;color:var(--sig,var(--ink));
  transition:transform var(--motion-fast) ease;
}
.bp-chapter[open] summary{border-bottom:1px solid var(--line)}
.bp-chapter[open] summary::before{transform:rotate(90deg)}
.bp-chapter__body{padding:var(--s4);font-size:1.0625rem;line-height:1.6}
.bp-chapter__body p{margin:0 0 var(--s3)}
.bp-chapter__body p:last-child{margin-bottom:0}

/* ---------- Footer ---------- */
.site-foot{
  border-top:1px solid var(--line);padding-block:var(--s7);font-size:var(--text-chrome);
  background-color:var(--paper-2);background-image:var(--grain);background-size:var(--grain-size);
}
.site-foot h2{
  font-family:var(--body-face);font-size:var(--text-chrome);text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-soft);margin:0 0 var(--s3);
}
.foot-cols{display:grid;gap:var(--s5) var(--s4);grid-template-columns:1fr 1fr}
@media (min-width:640px){
  .foot-cols{grid-template-columns:repeat(3,1fr)}
  .foot-cols--2{grid-template-columns:repeat(2,1fr)}
}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:0}
.site-foot a{display:inline-flex;align-items:center;min-height:44px}
.follow a{gap:0}
.site-foot .colophon{margin-top:var(--s6);color:var(--ink-soft)}

/* ---------- TODO markers — remove before launch ---------- */
.todo{
  background:#FFF3CD;border:2px dashed #B8860B;color:#4A3A00;
  padding:var(--s3) var(--s4);font-size:var(--text-meta);margin:0 0 var(--s4);
}
.todo::before{content:"DRAFT — ";font-weight:700}


/* ---------- View Transitions (plan 1.6) ----------
   The signature colour should feel like it becomes the next page's hero rather
   than the page reloading underneath it. Cross-document transitions need no
   JavaScript; browsers without support simply navigate, which is the intended
   fallback rather than a broken state. */
@view-transition{ navigation:auto; }

@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation-duration:.28s;
    animation-timing-function:cubic-bezier(.4,0,.2,1);
  }
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*){animation:none!important}
}