/* East Nashville Press.
   ------------------------------------------------------------------------
   Everything here is taken off the mark rather than invented beside it. The
   logo is a hand-drawn keyline box, a five-point star, three stacked rules,
   and heavy hand-cut lettering, printed in a wheat khaki. So:

     - The keyline is the layout device. Blocks sit inside a ruled box the way
       the wordmark does.
     - The star is the marker — the bullet in the slug line, the dinkus between
       sections. Not decoration: it is the press's own glyph.
     - The three rules under the star become the section divider, at the same
       three widths.
     - Wheat (#C8B890, sampled from the file) draws rules, keylines and the
       star. It is 1.7:1 on white, so it never sets a word; a darkened mix of
       the same hue does the text.
     - Courier Prime everywhere except the reading. A press's own voice is the
       spec sheet taped to the machine.

   White paper, and a lot of it. */

:root{
  /* THE NAV BREAKPOINT, published so the script does not keep its own copy.

     It did: the CSS said 825 and site.js said 826, two numbers that had to
     agree and nothing making them. Raising one silently left the other behind,
     so widening the window past the real breakpoint no longer closed the open
     panel. site.js now reads this value.

     The width itself is measured, not chosen -- see the note above the nav
     media query. */
  --bp-nav: 660px;

  --paper:#FFFFFF; --paper-2:#FAF9F5; --paper-3:#F2F0E9;
  --ink:#161512; --ink-2:#3C3A34; --ink-soft:#5B584E;
  /* The mark's own khaki, and the mix that is legible at 12px. */
  --wheat:#C8B890; --wheat-mid:#A8946A; --wheat-txt:#7A6838;
  --keyline:#161512; --rule:#DEDACE;
  --slab:#161512; --on-slab:#FAF9F5; --on-slab-2:#BFBAAA; --on-slab-3:#8A867A;
  --on-ink:#FFFFFF;

  --mono:"Courier Prime",ui-monospace,"Courier New",monospace;
  --prose:"Newsreader",Georgia,"Times New Roman",serif;

  --fs-3xs:.6875rem; --fs-2xs:.75rem; --fs-xs:.8125rem; --fs-sm:.875rem;
  --fs-base:1rem; --fs-md:1.0625rem; --fs-lg:1.15rem; --fs-xl:1.3rem;

  /* Display sizes. There was a scale for body text and none for headings, so
     each heading carried its own hand-written clamp — five of them, two
     near-identical. These are the curves the design already had, given names:
     re-deriving them would mean new interpolated sizes at every width, which
     makes a page render MORE distinct sizes, not fewer. A heading picks a
     role; it does not invent a size. */
  --ds-lede:clamp(1.85rem, 5.2vw, 3.4rem);    /* the page's opening statement */
  --ds-title:clamp(1.45rem, 3.6vw, 2.15rem);  /* headings inside a record */
  --ds-head:clamp(1.3rem, 2.8vw, 1.85rem);    /* ordinary section heads */
  --ds-mark:clamp(.95rem, 2vw, 1.15rem);      /* the wordmark */

  /* Spacing, on a 4px grid. New work uses these; values already in the file
     were converted only where the shift is under a pixel. */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4rem; --s-9:6rem;
  --wrap:1080px; --gut:clamp(1.25rem,4vw,3rem);

  /* The three rules under the star, drawn rather than typed. */
  --tri:linear-gradient(var(--wheat),var(--wheat)) center top/64px 2px no-repeat,
        linear-gradient(var(--wheat),var(--wheat)) center 7px/40px 2px no-repeat,
        linear-gradient(var(--wheat),var(--wheat)) center 14px/22px 2px no-repeat;
}
/* The dark surfaces sat 1.03-1.04:1 from the page behind them, so the header
   and the plate were indistinguishable from the ground and every section
   boundary dissolved. Same fault as the author site: the ramp was darkened as
   three separate values rather than as a ramp. The ground is the floor now and
   each surface steps up from it. Text was already clear of 4.5:1 and stays there. */
/* ONE PALETTE, AND IT IS LIGHT.

   This site used to follow the reader's operating system, so the same page
   arrived as two quite different objects and only one of them had ever been
   looked at properly. The author site made this exact decision in the other
   direction, for the same reason.

   Light is not a default here, it is the identity. A publisher's world is
   print: paper stock, ink, a letterpress rule, Courier Prime, a gold star.
   The dark variant was twelve swapped tokens and nothing else, and the proof
   was the logo -- it stayed the light-mode asset and rendered as a white box
   floating on near-black, the loudest object on the page. It measured clean on
   contrast and still read as unfinished, which is what a token swap always
   does.

   color-scheme tells the browser this is deliberate, so Chrome and Safari do
   not auto-darken form controls and scrollbars on a page that has committed
   the other way. */
:root{color-scheme:light}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:var(--fs-md)/1.75 var(--prose);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--wheat-txt);text-underline-offset:.2em;text-decoration-thickness:.06em}
:focus-visible{outline:2px solid var(--wheat-txt);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--ink);color:var(--paper);
  padding:var(--s-3) 1rem;font-family:var(--mono);font-size:var(--fs-sm)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The typewriter voice: anything that is not the reading. */
.mono,.eyebrow,nav.main a,.btn,label,th,.rec-data,.rec-no,.fineprint,.colophon,
.epigraph p,.tp-year,footer.site h3,.said,form.join button,form.join input,.q cite{
  font-family:var(--mono)}

/* ---- slug line ---------------------------------------------------------- */
.epigraph{background:var(--slab);color:var(--on-slab-2)}
.epigraph p{margin:0;padding:var(--s-2) 0;font-size:var(--fs-3xs);letter-spacing:.14em;text-transform:uppercase}
.epigraph b{color:var(--on-slab);font-weight:400}
.epigraph .dot{color:var(--wheat)}

/* ---- masthead ----------------------------------------------------------- */
header.site{border-bottom:1px solid var(--rule)}
header.site .bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;padding-block:1.5rem 1.35rem}
/* The wordmark is the mark itself, set in a keyline box like the logo's own. */
.mark{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--ink)}
.mark img{width:38px;height:auto}
.mark span{font-family:var(--mono);font-weight:700;font-size:var(--ds-mark);
  letter-spacing:.02em;text-transform:uppercase;line-height:1.15;max-width:11ch}
nav.main{display:flex;gap:clamp(.9rem,2.4vw,2rem);flex-wrap:wrap}
nav.main a{font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;padding-block:.4rem}
nav.main a[aria-current="page"]{color:var(--ink);box-shadow:0 2px 0 var(--wheat-mid)}

/* ---- the star, the press's own glyph ------------------------------------ */
.star{display:inline-block;width:1em;height:1em;background:var(--wheat);vertical-align:-.12em;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
/* Star over three rules, exactly as the mark stacks them. */

/* ---- the shop window ---------------------------------------------------- */
.titlepage{padding-block:clamp(3.5rem,9vw,6.5rem) 0}
.tp-year{font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 clamp(1.5rem,4vw,2.25rem);display:flex;gap:.5rem 1.1rem;
  flex-wrap:wrap;align-items:center}
.tp-year b{color:var(--wheat-txt);font-weight:400}
.tp-year span:not(.star){position:relative;padding-left:1.5rem}
.tp-year span:not(.star)::before{content:"";position:absolute;left:.4rem;top:.28em;width:.72em;height:.67em;
  background-color:var(--wheat-mid);
  -webkit-mask:url(/assets/img/enp-star.a6a801c397.svg) center/contain no-repeat;
  mask:url(/assets/img/enp-star.a6a801c397.svg) center/contain no-repeat}
.tp-lede{font-family:var(--mono);font-weight:700;font-size:var(--ds-lede);
  line-height:1.14;letter-spacing:-.03em;margin:0;max-width:19ch;text-wrap:balance}
.tp-lede em{font-style:normal;color:var(--wheat-txt)}
.tp-sub{margin:clamp(1.5rem,4vw,2.25rem) 0 0;max-width:52ch;font-size:var(--fs-lg);color:var(--ink-2)}

/* ---- the keyline plate, the logo's own device --------------------------- */
.plate-box{border:1.5px solid var(--keyline);padding:clamp(1.4rem,4vw,2.75rem);background:var(--paper)}

/* ---- one book, given the room one book deserves ------------------------- */
.record{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,3.5rem);align-items:start}
.rec-cover{margin:0}
.rec-cover img{width:100%;border:1.5px solid var(--keyline)}
.rec-no{font-size:var(--fs-2xs);letter-spacing:.08em;color:var(--wheat-txt);margin:0 0 var(--s-3);
  text-transform:uppercase}
.rec-body h1,.rec-body h2,.rec-body h3{font-family:var(--mono);font-weight:700;text-transform:uppercase;
  font-size:var(--ds-title);line-height:1.12;letter-spacing:-.025em;margin:0}
.rec-body h2 a,.rec-body h3 a{color:inherit;text-decoration:none}
.rec-line{font-style:italic;font-size:var(--fs-lg);color:var(--ink);margin:1.1rem 0 0;
  max-width:44ch;line-height:1.6}
.rec-blurb{margin:1.1rem 0 0;max-width:52ch;color:var(--ink-2);font-size:var(--fs-base)}
/* The catalogue data, set like a spec sheet: label over value, ruled off. */
/* Rules drawn per cell, not faked with a background showing through a 1px gap:
   six items in a four-column grid leave two empty slots, and the gap colour
   fills them as if they were data. */
/* auto-fit left one cell alone on its row between about 520 and 700px, which
   reads as a broken table rather than a spec sheet. Two, then four. */
.rec-data{margin:1.5rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.rec-data div{padding:var(--s-3) var(--s-3);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.rec-data dt,.rec-data .k{display:block;font-size:var(--fs-3xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.25rem}
.rec-data dd,.rec-data .v{margin:0;font-size:var(--fs-sm);color:var(--ink)}
.rec-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.5rem}

/* ---- buttons ------------------------------------------------------------ */
/* --keyline is #3A372F in dark, which is 1.59:1 on the page. A control's
   boundary needs 3:1 in both themes, so the outline button borrows the ink. */
.btn{display:inline-block;font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;padding:.85rem 1.35rem;border:1.5px solid var(--ink-soft);line-height:1;
  background:transparent;color:var(--ink)}
.btn-solid{background:var(--ink);color:var(--on-ink)}

/* ---- sections ----------------------------------------------------------- */
.sec{padding-block:clamp(1.5rem,3vw,2.25rem) clamp(2.5rem,6vw,4.5rem)}
.sec-tight{padding-block:clamp(1.5rem,3.5vw,2.5rem)}
.eyebrow{font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--wheat-txt);margin:0 0 var(--s-3)}
.sec h2{font-family:var(--mono);font-weight:700;text-transform:uppercase;
  font-size:var(--ds-head);line-height:1.16;letter-spacing:-.02em;margin:0}
.sec h3{font-family:var(--mono);font-weight:700;text-transform:uppercase;font-size:var(--fs-lg);
  letter-spacing:-.01em;margin:0 0 .5rem}
.lede{font-size:var(--fs-lg);color:var(--ink-2);max-width:56ch;margin:1rem 0 0}
.prose{max-width:62ch}
.prose p{margin:0 0 1.2em}
.prose p:last-child{margin-bottom:0}
.rule{border:0;border-top:1px solid var(--rule);margin:1.4rem 0 0}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.narrow-page{max-width:34rem;padding:5rem 1.25rem}
.sub-h{font-family:var(--prose);font-size:var(--fs-lg);font-weight:600;letter-spacing:0;
  text-transform:none;margin:2rem 0 .6rem;color:var(--ink)}
.gap-1{margin-top:1rem}

/* ---- one dark band ------------------------------------------------------ */
.plate{background:var(--slab);color:var(--on-slab)}
.plate .wrap{padding-block:clamp(2.5rem,6vw,3.75rem)}
.plate .eyebrow{color:var(--wheat)}
.plate h2{color:var(--on-slab)}
.plate p{color:var(--on-slab-2)}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:clamp(1.5rem,4vw,3rem)}
.q blockquote{margin:0;font-size:var(--fs-md);line-height:1.65;color:var(--on-slab)}
.q cite{display:block;margin-top:.9rem;font-size:var(--fs-3xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-slab-3);font-style:normal}

/* ---- the list --------------------------------------------------------- */
.capture{border-top:1px solid var(--rule);background:var(--paper-2)}
.capture .wrap{padding-block:clamp(2.5rem,6vw,3.75rem)}
.capture h2{font-family:var(--mono);font-weight:700;text-transform:uppercase;
  font-size:var(--ds-head);letter-spacing:-.02em;margin:0}
.capture p{color:var(--ink-2);max-width:50ch;margin:.9rem 0 1.4rem}
form.join{display:flex;gap:.6rem;flex-wrap:wrap;max-width:34rem}
form.join input[type=email]{flex:1 1 15rem;font-size:var(--fs-base);padding:.85rem .9rem;
  background:var(--paper);border:1.5px solid var(--ink-soft);color:var(--ink);margin:0}
form.join input[type=email]:focus-visible{border-color:var(--wheat-txt)}
form.join button{font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--on-ink);border:1.5px solid var(--ink);padding:.85rem 1.35rem;cursor:pointer}
.said{font-size:var(--fs-2xs);color:var(--wheat-txt);margin:var(--s-3) 0 0;min-height:1.2em}
.fineprint{font-size:var(--fs-3xs);letter-spacing:.02em;color:var(--ink-soft);
  margin:.9rem 0 0;max-width:54ch;line-height:1.8}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- forms -------------------------------------------------------------- */
label{display:block;font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .4rem}
/* 1.4.11: the field fill is the page colour, so this border is the only thing
   that says "input". At --rule it measured 1.40:1 on white and 1.28:1 on the
   dark ground, against a 3:1 floor. --ink-soft takes it to 7.0 and 5.2. */
input,select,textarea{width:100%;font:inherit;font-size:var(--fs-base);padding:var(--s-3) .9rem;
  background:var(--paper);border:1.5px solid var(--ink-soft);color:var(--ink);margin-bottom:1rem}
/* Chrome's default placeholder is 4.10:1 on the dark ground. Never styled it,
   so light squeaked through at 4.61 and dark did not. */
::placeholder{color:var(--ink-soft);opacity:1}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--wheat-txt)}
textarea{resize:vertical;line-height:1.6}
.cform button{width:auto}

/* ---- tables ------------------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th{text-align:left;font-size:var(--fs-3xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);padding:var(--s-3) var(--s-3);border-bottom:1.5px solid var(--keyline)}
td{padding:.85rem var(--s-3);border-bottom:1px solid var(--rule);vertical-align:top}
.tablewrap{overflow-x:auto}
.card{border:1.5px solid var(--keyline);padding:clamp(1.1rem,2.6vw,1.6rem);background:var(--paper)}
.card p{margin:0 0 1rem;color:var(--ink-2);font-size:var(--fs-base)}
.card .enp-logo{margin-bottom:var(--s-3)}

/* ---- footer ------------------------------------------------------------- */
footer.site{border-top:1px solid var(--rule);background:var(--paper-2);margin-top:clamp(3rem,7vw,5rem)}
footer.site .wrap{padding-block:clamp(2.5rem,5vw,3.5rem)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,4vw,3rem)}
footer.site h3{font-size:var(--fs-3xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .9rem;font-weight:400}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
/* A list of links is not "inline in a sentence", so SC 2.5.8's exemption does
   not apply to it: each one needs 24px of its own. */
.foot-links a{display:inline-flex;align-items:center;min-height:24px;
  font-size:var(--fs-sm);color:var(--ink-2);text-decoration:none}
.enp-logo{width:104px}
.foot-blurb{font-size:var(--fs-sm);color:var(--ink-2);margin:1rem 0 0;max-width:32ch;line-height:1.7}
.colophon{font-size:var(--fs-3xs);letter-spacing:.02em;color:var(--ink-soft);
  margin:clamp(2rem,4vw,3rem) 0 0;padding-top:1.2rem;border-top:1px solid var(--rule);line-height:1.8}

/* ---- narrow ------------------------------------------------------------- */
@media (min-width:56rem){
  .rec-data{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:820px){
  .record{grid-template-columns:1fr}
  .rec-cover{max-width:15rem}
  .two{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .mark span{max-width:none}
}
/* Reclaim the first screen on a phone. The masthead, the slug line and the
   title page together were taking 287px of a 734px fold, which left the primary
   control 7px tall at the bottom edge and the book more than a screen away. */
@media (max-width:640px){
  .epigraph p{padding-block:.4rem;font-size:var(--fs-3xs);letter-spacing:.1em}
  header.site .bar{padding-block:var(--s-3) var(--s-3);gap:var(--s-3)}
  .m-mark{width:52px}
  nav.main{gap:var(--s-3) 1rem}
  .titlepage{padding-block:1.75rem 0}
  .tp-year{margin-bottom:1rem}
  .tp-sub{margin-top:1rem}
}

/* ---- the mark, at a size that means it ----------------------------------
   It was a 38px thumbnail sitting beside the name it already contains. The mark
   is a stamp, and a stamp that small is a bullet point.

   Painted as a CSS mask rather than placed as an <img>: an <img> renders the
   SVG in its own document, where `fill="currentColor"` resolves to black — so
   the mark would vanish on the dark ground. As a mask it takes the element's
   own colour, and one traced file serves ink in the masthead, wheat in the
   divider and a softer ink in the footer. */
.m-mark,.body-crest,.enp-logo,.dinkus,.star-i{
  display:inline-block;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.m-mark,.enp-logo{
  -webkit-mask-image:url(/assets/img/enp-mark.f26d57b0a4.svg);mask-image:url(/assets/img/enp-mark.f26d57b0a4.svg);
  aspect-ratio:1680/2344}
.body-crest{-webkit-mask-image:url(/assets/img/enp-crest.d0669dba50.svg);mask-image:url(/assets/img/enp-crest.d0669dba50.svg);
  aspect-ratio:1214/749}
.dinkus{-webkit-mask-image:url(/assets/img/enp-crest.d0669dba50.svg);mask-image:url(/assets/img/enp-crest.d0669dba50.svg);
  aspect-ratio:1214/749}
.star-i{-webkit-mask-image:url(/assets/img/enp-star.a6a801c397.svg);mask-image:url(/assets/img/enp-star.a6a801c397.svg);
  aspect-ratio:559/519}

header.site .bar{align-items:flex-end}
.mark{display:inline-block;line-height:0;text-decoration:none;color:var(--ink)}
/* The lockup, at the size a press masthead actually wears it. It contains the
   name, so nothing beside or below it may set the name again. */
.m-mark{width:clamp(66px,7.5vw,92px);color:var(--ink)}
.body-crest{width:clamp(96px,12vw,150px);color:var(--wheat-mid)}
.dinkus{display:block;width:104px;margin:clamp(2.5rem,6vw,4rem) auto;color:var(--wheat-mid)}
.star-i{width:.8em;vertical-align:-.06em;color:var(--wheat-mid)}
.rec-no .star-i{margin-right:var(--s-1)}
.enp-logo{width:96px;color:var(--ink-2)}
.card .enp-logo{color:var(--ink)}
.tp-year{align-items:center}



/* ---- the menu on a phone -------------------------------------------------
   The panel hides behind a class the script adds, so with scripting off the
   nav stays visible rather than becoming a dead end.

   THE NUMBER IS MEASURED, NOT CHOSEN. Forcing the desktop nav visible at every
   width from 1100px down and watching the row's line count: six links plus the
   wordmark fit on ONE ROW down to 592px, and wrap at 591. The breakpoint was
   760 -- so this site was hiding a nav that fitted, for 169px of width. An
   iPad Mini in portrait (744) and every large phone in landscape got a
   hamburger they did not need, and the real nav with it.

   660 gives the measured 592 a comfortable 68px rather than the 8px clearance
   at which it merely fits. The author site's equivalent number is 856 for
   seven longer links; the two differ because the CONTENT differs, which is the
   point. Re-measure with scratchpad/edge2.mjs if the links change. */
.navtoggle{display:none}
@media (max-width:659px){
  .navtoggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    /* flex:none, or the wordmark beside it compresses the button below the
       24x24 minimum — measured at 23x44 on the reader page before this. A
       width alone is a suggestion inside a flex row. */
    flex:0 0 44px;
    width:44px;height:44px;padding:0 10px;margin-inline-start:auto;
    background:none;border:0;cursor:pointer;}
  .navtoggle span{display:block;height:2px;background:var(--ink);transition:transform .18s ease,opacity .18s ease}
  .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  html.js nav.main{display:none}
  html.js .bar.open nav.main{display:flex;flex-direction:column;gap:0;
    position:absolute;left:0;right:0;top:100%;background:var(--paper);
    border-bottom:1px solid var(--keyline);padding:.35rem var(--gut) 1rem;z-index:70}
  html.js .bar.open nav.main a{padding:.9rem 0;border-bottom:1px solid var(--rule);
    min-height:44px;display:flex;align-items:center}
  html.js .bar.open nav.main a:last-child{border-bottom:0}
  .bar{position:relative;flex-wrap:nowrap}
}
@media (prefers-reduced-motion:reduce){.navtoggle span{transition:none}}

/* The cross-list opt-in. Unticked, and it stays unticked: a pre-ticked box is
   not consent under UK/EU GDPR, and both sites record those jurisdictions.
   The label wraps the input so the whole line is the target — a 13px checkbox
   on its own is under the 24px minimum and miserable on a thumb. */
.also{display:flex;gap:.6rem;align-items:flex-start;margin:.15rem 0 0;
  font-family:var(--ui);font-size:var(--fs-2xs);line-height:1.5;cursor:pointer;min-height:32px;padding:.35rem 0}
/* 24x24 is the WCAG 2.2 SC 2.5.8 minimum, and the box itself has to meet it.
   The wrapping label is already 32px tall, so the target was fine in practice —
   but a control that measures 18px is a control that fails every audit, and
   arguing with the scanner costs more than four pixels. */
.also input{margin:.1rem 0 0;width:24px;height:24px;flex:0 0 24px;cursor:pointer}
.also b{font-weight:600}


/* ---------------------------------------------------------------- notice
   See the note in the author site's stylesheet. These are the pages reached
   from an email -- confirm and unsubscribe -- and they used to style
   themselves with an inline <style> block that the site's own CSP does not
   authorise, so they arrived unstyled. Served from here they inherit the
   press's actual design. */
.notice{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;background:var(--paper-2)}
.notice-body{display:grid;place-items:center;padding:var(--s-7) var(--gut)}
.notice-card{max-width:36rem;text-align:center}
.notice-card .eyebrow{margin-bottom:var(--s-4)}
.notice-card h1{
  font-family:var(--prose);font-weight:400;
  font-size:var(--ds-title);line-height:1.12;color:var(--ink);
  margin:0 0 var(--s-3);text-wrap:balance}
.notice-card p{
  font-family:var(--prose);font-size:var(--fs-md);line-height:1.7;
  color:var(--ink-2);margin:0 auto var(--s-3);max-width:34rem}
.notice-card p:last-of-type{margin-bottom:0}
/* The author site has a .cta-row base rule; this site has never had one, so
   `justify-content` alone was styling a block, not a flex row, and the two
   buttons sat flush against each other with no gap. Declare the layout here
   rather than assume a component that does not exist. */
.notice-card .cta-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.8rem}
/* `.notice-card p.notice-fine`, not `.notice-fine` -- see the note in the
   author stylesheet. A lone class loses to `.notice-card p` and the fine print
   rendered as a third body paragraph. */
.notice-card p.notice-fine{
  font-family:var(--mono);font-size:var(--fs-2xs);line-height:1.65;
  color:var(--ink-soft);max-width:30rem;margin:2.4rem auto 0}
.notice-card p.notice-fine a{color:var(--wheat-txt)}
.notice-card p{text-wrap:pretty}
/* `body` already carries a background from the page rules above and the two
   selectors tie, so the later one won and the notice pages rendered pure white
   instead of the paper tone. */
body.notice{background:var(--paper-2)}
.notice-head{padding:var(--s-4) var(--gut);border-bottom:1px solid var(--rule)}
.notice-foot{padding:var(--s-4) var(--gut);border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-soft);text-align:center}
.notice-foot a{color:var(--ink-soft)}
.notice-mark{font-family:var(--mono);font-size:var(--fs-2xs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.notice-mark i{color:var(--wheat-txt);font-style:normal}

/* ---- hover is for pointers that can hover ---------------------------------
   Every hover rule on this site lived unguarded. On a touch screen there is no
   hover state to leave: tapping a link applies :hover and it STAYS applied
   until the reader taps something else, so a tapped button holds its pressed
   colour and a tapped nav item keeps its underline while the next page loads.
   It reads as a stuck UI, and it is the single most common mobile CSS defect.

   `@media (hover: hover)` asks the DEVICE, not the width -- so a laptop with a
   touchscreen still gets hover, and an iPad with a trackpad attached gets it
   too. Focus and active states are deliberately NOT in here: those must work
   everywhere. */
@media (hover:hover){
  a:hover{color:var(--ink)}
  nav.main a:hover{color:var(--ink)}
  .btn-solid:hover{background:var(--wheat-txt);border-color:var(--wheat-txt);color:#fff}
  .btn-ghost:hover{background:var(--paper-3);color:var(--ink)}
  form.join button:hover{background:var(--wheat-txt);border-color:var(--wheat-txt);color:#fff}
  .foot-links a:hover{color:var(--wheat-txt);text-decoration:underline}
}

/* ---- notched screens ------------------------------------------------------
   An iPhone in LANDSCAPE puts the notch and the home indicator inside the
   viewport, and the browser does not inset the page for you unless asked. A
   full-bleed row -- the masthead, the footer, any sticky bar -- runs its first
   characters under the notch, and a bottom-anchored control sits under the
   home indicator where a tap is intercepted by the system gesture.

   env() resolves to 0px everywhere it does not apply, so this costs nothing on
   any other device and needs no media query. max() keeps the design's own
   gutter as the floor, so the inset only ever ADDS. */
.wrap{
  padding-inline:
    max(var(--gut), env(safe-area-inset-left))
    max(var(--gut), env(safe-area-inset-right));
}

/* ---- coarse pointers ------------------------------------------------------
   This site had NO rule for touch at all: every target was whatever the
   desktop layout left it. 44x44 is Apple's guidance, 48dp Material's, and WCAG
   2.2 SC 2.5.8's 24x24 is a floor rather than a target. */
@media (hover:none) and (pointer:coarse){
  .mark{min-height:44px;display:inline-flex;align-items:center}
  .also input[type=checkbox]{width:28px;height:28px}
  .also{min-height:44px;align-items:center}
  nav.main a{min-height:44px;display:inline-flex;align-items:center}
  .foot-links a{min-height:44px;display:inline-flex;align-items:center}
  .btn{min-height:44px}
  form.join button,form.join input[type=email]{min-height:48px}
  a.link-arrow{min-height:44px;display:inline-flex;align-items:center}
}