/* ═══════════════════════════════════════════════════════════════════════════
   WSPR Stories — the archive

   Same design system as the Screening Suite: Anton display, Poppins body,
   black ground with blush bands, coral accent. The suite is the better-built
   of the two properties, so its rhythm is the reference here rather than the
   Squarespace original this replaces.

   One deliberate difference from the suite: this site is READING, not
   deciding. So the measure is wider, the line-height is looser, and the
   body type is a touch larger. A screening report is scanned; an interview
   is read.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --black:#0d0d0d; --black-raised:#141211; --black-lift:#1e1a17;
  --blush:#f7ded9; --blush-raised:#fdf5f2; --blush-sunken:#f0d2cb;
  --coral:#e2967f; --coral-deep:#c97a62;
  /* #b06147 — the lightest coral clearing AA (4.52:1) against white.
     Any coral surface carrying white text uses this, never --coral. */
  --coral-press:#b06147;
  --ink:#201c1a; --ink-dim:#5f544e; --ink-faint:#8d827a;
  --paper:#f5ede8; --paper-dim:#cabdb5; --paper-faint:#8d827a;
  --line-dark:#332d2a; --line-light:#e6c9c0;
  /* The reading room. Only the article page uses these, and they exist
     because the article page is the one screen somebody looks at for six
     minutes. Cream on near-black measured 16.81:1, which is far past what
     sustained reading wants — very bright text on a very dark ground makes
     the letterforms bleed outward, worse the higher the contrast goes and
     much worse with astigmatism. The ink comes down to 12.45:1.

     The column stays pure black and the page LIFTS around it. That is not
     only a look: a bright column floating in total darkness is the condition
     that opens the pupil widest, which is exactly when the bloom is worst.
     A slightly lighter surround keeps it closed a little and the text
     steadier. The frame sits 1.10:1 off the column — a matte around a print,
     not a border. */
  --read-frame:#191817; --read-col:#0d0d0d;
  --read-ink:#d8cdc4; --read-head:#efe7df;
  --display:"Anton","Archivo Black",Impact,sans-serif;
  --body:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --measure:68ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--black);color:var(--paper);
  font-family:var(--body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.shell{max-width:1120px;margin:0 auto;padding:0 26px}
.shell-narrow{max-width:760px;margin:0 auto;padding:0 26px}
.nb{white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Bands ─────────────────────────────────────────────────────────────────
   The alternating black/blush rhythm from the original, but the seam is a
   1px coral rule rather than the 4px slab it used to be. At full weight the
   seam competed with the headings for attention. */
.band{padding:clamp(52px,8vw,96px) 0}
.band-light{background:var(--blush);color:var(--ink);border-top:1px solid var(--coral);border-bottom:1px solid var(--coral)}
.band-light a{color:var(--coral-press)}
.band-dark{background:var(--black)}
/* A third ground, and not a new colour: it is the article page's own frame.
   The one band on the landing where a reader sees the room she is being
   invited to read in. Near-neutral on purpose — a warm near-black panel was
   tried on the article page and read as "a pink film". */
.band-read{background:var(--read-frame);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}

/* Masthead ──────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:40;background:rgba(13,13,13,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line-dark)}
/* padding-block only. This used to be `padding:16px 0`, which — because
   .nav-inner is on the same element as .shell and comes later in the file at
   the same specificity — cancelled the shell's 26px side gutters outright.
   Invisible on a desktop, where the 1120px shell is narrower than the window
   and the leftover margin fakes a gutter. On a phone there is no leftover, so
   the mark sat flush against the left edge of the screen. */
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:16px}
.mark{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.mark-name{font-family:var(--display);font-size:1.35rem;letter-spacing:.1em;color:var(--coral);line-height:1}
.mark-rule{width:1px;height:22px;background:var(--line-dark)}
.mark-sub{font-weight:600;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-dim);line-height:1.5}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{font-size:.84rem;color:var(--paper-dim);text-decoration:none}
.nav-links a:hover{color:var(--coral)}
@media (max-width:620px){ .nav-links{gap:16px} .nav-links a{font-size:.78rem} .nav-links .nav-hide-sm{display:none} }

/* Type ──────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;line-height:1.06;letter-spacing:.005em}
.h-hero{font-size:clamp(2.2rem,6.4vw,4.3rem);max-width:16ch}
/* The landing headline is broken into two blocks in the markup rather than
   left to wrap inside a measure, so it cannot become three lines when Anton
   has not loaded and the wider fallback is standing in.

   Sized off the longer line, measured in BOTH faces because the fallback is
   what renders during the font swap: 9.26x its own font-size at the worst of
   the two. 8.9vw was tried first and came four pixels short on a 360px window
   — the desktop scrollbar takes 15px off the column and the line wrapped. So
   8.4vw, which clears it in either font with or without a scrollbar, and still
   reaches the full 4.3rem hero size from about 820px up. */
.h-hero-two{font-size:clamp(1.6rem,8.4vw,4.3rem);max-width:none}
.h-hero-two span{display:block}
.h-sec{font-size:clamp(1.7rem,3.6vw,2.6rem);max-width:20ch}
.h-sub{font-size:clamp(1.15rem,2.1vw,1.45rem)}
em.hl{font-style:normal;color:var(--coral)}
.band-light em.hl{color:var(--coral-press)}
.eyebrow{font-family:var(--body);font-weight:700;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--coral);margin-bottom:16px}
.band-light .eyebrow{color:var(--coral-press)}
.lede{font-size:clamp(1.02rem,1.7vw,1.16rem);color:var(--paper-dim);max-width:58ch;line-height:1.72;margin:22px 0 0}
.band-light .lede{color:var(--ink-dim)}

/* Buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  /* Labels never wrap. This has been flagged repeatedly across the project;
     a two-line button label is a bug here, not a style choice. */
  white-space:nowrap;
  padding:14px 26px;border-radius:2px;border:1px solid transparent;
  font-family:var(--body);font-weight:600;font-size:.92rem;
  text-decoration:none;cursor:pointer;transition:background 180ms ease,color 180ms ease,border-color 180ms ease;
}
.btn-primary{background:var(--coral-press);color:#fff}
.btn-primary:hover{background:var(--coral-deep)}
.btn-ghost{background:transparent;color:var(--paper);border-color:var(--line-dark)}
.btn-ghost:hover{border-color:var(--coral);color:var(--coral)}
.band-light .btn-ghost{color:var(--ink);border-color:var(--line-light)}
.btn-small{padding:9px 16px;font-size:.82rem}

/* Search ────────────────────────────────────────────────────────────── */
.search-wrap{margin:34px 0 0;max-width:520px}
.search{
  width:100%;padding:15px 18px;border-radius:2px;
  background:var(--black-raised);border:1px solid var(--line-dark);
  color:var(--paper);font-family:var(--body);font-size:1rem;
}
.search::placeholder{color:var(--paper-faint)}
.search:focus{outline:none;border-color:var(--coral)}
.search-note{margin:10px 0 0;font-size:.82rem;color:var(--paper-faint);min-height:1.4em}

/* Post list ─────────────────────────────────────────────────────────────
   Rows, not cards. The archive is a list of readings and a card grid makes
   eight interviews look like eight products. Rows butt together as one
   block and the whole row is the target. */
.plist{margin-top:clamp(26px,4vw,44px);border-top:1px solid var(--line-dark)}
/* The row holds a link AND buttons, so it is a container rather than one
   big <a> — an <a> wrapping a <button> is invalid, and browsers resolve it
   by swallowing the button. The link keeps the grid; the tags sit under it. */
.prow{
  padding:26px 4px;border-bottom:1px solid var(--line-dark);
  transition:background 160ms ease,padding 160ms ease;
}
.prow-hit{
  display:grid;grid-template-columns:1fr auto;gap:8px 28px;align-items:baseline;
  text-decoration:none;color:inherit;
}
.prow:hover{background:var(--black-raised);padding-left:14px;padding-right:14px}
.prow-title{font-family:var(--display);font-size:clamp(1.35rem,2.6vw,1.95rem);line-height:1.1;color:var(--paper);transition:color 160ms ease}
.prow:hover .prow-title{color:var(--coral)}
.prow-dek{grid-column:1/-1;margin:0;color:var(--paper-dim);font-size:.96rem;max-width:62ch;line-height:1.65}
.prow-meta{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-faint);white-space:nowrap}
/* Outside the link now, so it no longer needs a grid column. */
.prow-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tag{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);border:1px solid var(--line-dark);border-radius:2px;padding:3px 9px}
/* A tag in the listing is a filter you can press. It has to look pressable,
   or nobody presses it. */
.tag-btn{font-family:var(--body);font-weight:500;background:none;cursor:pointer;line-height:1.6}
.tag-btn:hover{border-color:var(--coral);background:rgba(226,150,127,.08)}
.tag-btn:focus-visible{outline:2px solid var(--coral);outline-offset:1px}
.tag-btn.is-on{background:var(--coral);color:var(--black);border-color:var(--coral)}
.tagbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
/* ── /archive: the search IS the hero ───────────────────────────────────
   That page carries no display headline, so the box is the largest thing on
   it rather than the third thing down. Measured against the old hero: the box
   moves from 420px to 230px and grows from 520x57 at 16px to 760x79 at 22px,
   and the first story row comes up by 166px. */
.search-hero{max-width:760px;margin-top:24px}
.search-hero .search{padding:22px 24px;font-size:clamp(1.05rem,2vw,1.35rem);border-color:#4a413c}
.search-hero .search::placeholder{color:#7d726b}

/* One row, and it scrolls sideways.
   Sixteen chips wrap to two rows on a desktop and SIX on a 390px phone — 192px
   of buttons above the first story. Capping the list would hide eight topics
   on the one page that is meant to hold all of them, so the row scrolls
   instead: every topic still reachable, in 25px instead of 192.

   The bar stays inside the 26px gutter rather than bleeding to the glass,
   because render-check asserts that nothing at the top level comes within 8px
   of the screen edge, and that check exists because a cancelled gutter shipped
   for months. The chip clipped at the container edge is the affordance.

   Chips are buttons, so Tab reaches the ones off-screen and the browser
   scrolls them into view — the scroll is not the only way in. */
.tagbar-row{flex-wrap:nowrap;overflow-x:auto;max-width:none;scrollbar-width:none;
  padding-bottom:2px;overscroll-behavior-x:contain}
.tagbar-row::-webkit-scrollbar{display:none}
.tagbar-row .tag-btn{flex:0 0 auto}
/* On a phone the bar is the difference between a story being on the first
   screen and not: six chips wrap to three rows there and push the first story
   row about 40px under the fold. Four still shows what the archive is filed
   by, and /archive carries all sixteen beside its own search box. Landing
   only — #tagBar is what data-limit caps, and this trims what is already
   capped. */
@media (max-width:560px){ #tagBar[data-limit] .tag-btn:nth-child(n+5){display:none} }
/* Under the search box, so they read as things you could have typed. The
   landing caps the bar at eight (data-limit); /archive runs it uncapped. All
   sixteen up here ran three rows on a desktop and six on a phone and put the
   first story row at 815px, below the fold on a 1440x900 laptop. */
/* The whole subject-facing ask on the reader's page, in one line. */
.aside-line{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:baseline;
  padding:26px 0 0;margin-top:26px;border-top:1px solid var(--line-dark)}
.aside-line p{margin:0;color:var(--paper-dim);font-size:1rem}

/* Pull quotes ───────────────────────────────────────────────────────────
   Set like the article's own blockquote — Anton, a coral rule down the left —
   because that is what they are: a sentence lifted out of a piece, shown at
   the size it deserves. Three across on a wide screen, stacked below 860,
   where a display quote in a third of the width starts breaking every two
   words. The attribution is the link; the quote is not, so a reader cannot
   land on a story by brushing the text she is reading. */
.quotes{display:grid;gap:clamp(26px,3.4vw,44px);margin-top:clamp(26px,3.6vw,40px)}
@media (min-width:860px){ .quotes{grid-template-columns:repeat(3,1fr)} }
.pullquote{margin:0;padding-left:22px;border-left:2px solid var(--coral)}
.pullquote blockquote{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(1.22rem,2.1vw,1.6rem);line-height:1.24;letter-spacing:.005em;
  color:var(--read-head);
}
.pullquote figcaption{
  margin-top:14px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-faint);
}
.pullquote figcaption a{color:var(--coral);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:1px}
.pullquote figcaption a:hover{border-bottom-color:var(--coral)}

/* The close. The button is the only one on the reader's page, so it gets air
   above it rather than a rule to separate it from the sentence it follows. */
.close-act{margin:clamp(26px,3.2vw,34px) 0 0}
.plist-more{margin:26px 0 0}
.more-link{font-weight:600;color:var(--coral);text-decoration:none;
  border-bottom:1px solid var(--coral);padding-bottom:2px}
.more-link:hover{color:var(--paper);border-color:var(--paper)}
.plist-empty{padding:44px 4px;color:var(--paper-faint);border-bottom:1px solid var(--line-dark)}
/* Follows the grid. This used to name .prow, which WAS the grid; when the
   grid moved down to .prow-hit so the row could hold pressable tags, the
   collapse stopped working and the stray grid-row on the meta pushed the
   title into the second column. */
@media (max-width:560px){ .prow-hit{grid-template-columns:1fr} .prow-meta{grid-row:2} }

/* Topic grid ────────────────────────────────────────────────────────── */
.topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(24px,3.5vw,44px);margin-top:clamp(28px,4vw,46px)}
.topic{border-top:1px solid var(--line-light);padding-top:20px}
.band-dark .topic{border-top-color:var(--line-dark)}
.topic-n{font-family:var(--display);font-size:1rem;color:var(--coral-press);letter-spacing:.06em}
.band-dark .topic-n{color:var(--coral)}
.topic h3{font-size:clamp(1.1rem,1.9vw,1.35rem);margin-top:10px}
/* #why is the value band: a question somebody arrives with, answered by a
   real story. The question is the argument, so it runs a step above a normal
   topic heading and the story under it reads as a link, not as body copy. */
#why .topic h3{font-size:clamp(1.18rem,2.1vw,1.5rem);line-height:1.16}
#why .topic p a{font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
.topic p{margin:10px 0 0;font-size:.93rem;line-height:1.68;color:var(--ink-dim)}
.band-dark .topic p{color:var(--paper-faint)}

/* Steps ─────────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,3.5vw,44px);margin-top:clamp(28px,4vw,46px)}
.step{border-top:1px solid var(--line-dark);padding-top:20px}
.band-light .step{border-top-color:var(--line-light)}
.step-n{font-family:var(--display);font-size:1rem;color:var(--coral);letter-spacing:.06em}
.band-light .step-n{color:var(--coral-press)}
.step h3{font-size:clamp(1.1rem,1.9vw,1.32rem);margin-top:10px}
.step p{margin:10px 0 0;font-size:.93rem;line-height:1.68;color:var(--paper-faint)}
.band-light .step p{color:var(--ink-dim)}

/* FAQ ───────────────────────────────────────────────────────────────── */
.faq{margin-top:clamp(26px,4vw,42px);max-width:var(--measure)}
.faq-item{border-bottom:1px solid var(--line-light)}
.band-dark .faq-item{border-bottom-color:var(--line-dark)}
.faq-item summary{
  position:relative;cursor:pointer;list-style:none;padding:20px 40px 20px 0;
  font-family:var(--display);font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.25;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:4px;top:18px;font-family:var(--body);font-size:1.3rem;line-height:1;color:var(--coral-press)}
.band-dark .faq-item summary::after{color:var(--coral)}
.faq-item[open] summary::after{content:"\2013"}
.faq-item p{margin:0 0 20px;font-size:.95rem;line-height:1.72;color:var(--ink-dim);max-width:62ch}
.band-dark .faq-item p{color:var(--paper-dim)}

/* ── Article ─────────────────────────────────────────────────────────────
   Served as real HTML by netlify/functions/render-post.js, not assembled in
   the browser. An archive that wants to be found has to arrive as text a
   crawler can read on the first request. */
body:has(main.article){background:var(--read-frame)}
body:has(main.article) .foot{background:var(--read-frame)}
.article{padding:clamp(30px,4vw,52px) 0 clamp(40px,6vw,80px)}
.article > .shell{
  max-width:880px;background:var(--read-col);border-radius:2px;
  padding:clamp(30px,5vw,64px) clamp(22px,5vw,60px) clamp(34px,5vw,56px);
}
.article-head{max-width:var(--measure);margin:0 auto}
.article-kicker{font-weight:700;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--coral)}
.article h1{font-size:clamp(2rem,5vw,3.4rem);margin:18px 0 0;max-width:20ch}
.article-dek{margin:20px 0 0;font-size:clamp(1.05rem,1.8vw,1.22rem);color:var(--paper-dim);line-height:1.66;max-width:56ch}
.article-meta{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line-dark);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-faint);display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.article-body{max-width:var(--measure);margin:clamp(34px,5vw,52px) auto 0}
.article-body p{margin:0 0 1.35em;font-size:1.06rem;line-height:1.85;color:var(--read-ink)}
/* Every level the renderer can emit is styled here. It previously stopped
   at h3, and the renderer shifts markdown down one — # is h2, ## is h3,
   ### is h4 — so a post written with ### produced headings with no size
   and no space at all, sitting at body weight against the paragraph under
   them. Thirteen imported stories all did exactly that, and it read as
   text somebody forgot to format. */
/* Section breaks. Measured off the old setting: a heading at 1.32x the body
   with 40px above it — against a 31px body leading, barely one blank line —
   did not register as a different KIND of thing, just a slightly bigger
   sentence. The heading now runs ~1.8x the body, and the space above it is
   two full lines of body leading while the space below stays tight, so it
   reads as belonging to the text it introduces rather than floating between
   two blocks.

   The heading is cream, not coral. Coral already means eyebrow, tag, link
   and mark; adding "section heading" to that list gives a reader four things
   and no rule. And the colour is no longer needed to find a break — the size
   and the air do it. What the heading gets instead is brightness: pulling the
   body ink back to #d8cdc4 leaves the heading a step brighter than the text
   as well as bigger, which is a second signal the old setting never had. */
.article-body h2{
  font-size:clamp(1.5rem,3vw,1.9rem);line-height:1.15;margin:2em 0 .6em;
  color:var(--read-head);
}
/* A sub-head inside a section. */
.article-body h3{font-size:clamp(1.22rem,2.2vw,1.45rem);line-height:1.2;margin:1.9em 0 .5em;color:var(--read-head)}

/* An article with no h2 in it has no sub-heads either — its h3s ARE its
   section breaks, and they get the section treatment. This is not a nicety:
   every post imported before the levels were corrected is written that way,
   and without this rule those articles render their breaks at sub-head size
   in body colour, which is precisely the "white heading text" this was
   reported as. It also means a writer who only ever presses Sub-head still
   gets a properly set article. */
.article-body:not(:has(h2)) h3{
  font-size:clamp(1.5rem,3vw,1.9rem);line-height:1.15;margin:2em 0 .6em;
  color:var(--read-head);
}
.article-body h4{font-size:clamp(1.02rem,1.7vw,1.16rem);margin:1.7em 0 .5em;
  letter-spacing:.02em;color:var(--read-head)}
/* The first heading in a body sits under the standfirst and the byline rule,
   which already provide the break. */
.article-body > h2:first-child{margin-top:0}
.article-body ul,.article-body ol{margin:0 0 1.35em;padding-left:1.3em}
.article-body li{margin-bottom:.5em;line-height:1.8;color:var(--read-ink)}
.article-body a{color:var(--coral);text-decoration:underline;text-underline-offset:2px}
.article-body blockquote{
  margin:1.8em 0;padding:4px 0 4px 24px;border-left:2px solid var(--coral);
  font-family:var(--display);font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.3;color:var(--paper);
}
.article-body blockquote p{font-size:inherit;line-height:inherit;margin:0}
.article-body hr{border:0;border-top:1px solid var(--line-dark);margin:2.4em 0}
.article-foot{max-width:var(--measure);margin:clamp(44px,6vw,72px) auto 0;padding-top:26px;border-top:1px solid var(--line-dark)}

/* ── Admin ───────────────────────────────────────────────────────────────
   Deliberately plain. This is the one screen nobody but the author sees, so
   it gets no atmosphere — just a big writing area and controls that are
   where you expect them. */
.gate{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.gate-card{width:100%;max-width:400px;background:var(--black-raised);border:1px solid var(--line-dark);padding:36px 30px;border-radius:3px}
.gate-card h1{font-size:1.5rem;margin-bottom:8px}
.field{margin-bottom:18px}
.field label{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint);margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%;padding:12px 14px;border-radius:2px;
  background:var(--black);border:1px solid var(--line-dark);
  color:var(--paper);font-family:var(--body);font-size:1rem;line-height:1.6;
}
.field textarea{resize:vertical;min-height:120px}

/* Formatting bar. Fixed above the writing area rather than a popup that
   follows the selection: on a phone a floating menu fights the operating
   system's own text-selection menu for the same few pixels, and loses. This
   is always in the same place, and it works the same way on both. */
.fmt{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.fmt button{
  font-family:var(--body);font-size:.78rem;font-weight:600;
  padding:6px 11px;border-radius:2px;cursor:pointer;white-space:nowrap;
  background:var(--black-raised);border:1px solid var(--line-dark);color:var(--paper-dim);
}
.fmt button:hover{border-color:var(--coral);color:var(--paper)}
.fmt button:focus-visible{outline:2px solid var(--coral);outline-offset:1px}
.fmt .fmt-sep{width:1px;background:var(--line-dark);margin:2px 4px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--coral)}
.field .hint{margin:7px 0 0;font-size:.78rem;color:var(--paper-faint)}

.editor{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:34px;align-items:start;padding:34px 0 80px}
@media (max-width:900px){ .editor{grid-template-columns:1fr;gap:26px} }
.editor-side{position:sticky;top:78px;background:var(--black-raised);border:1px solid var(--line-dark);padding:22px 20px;border-radius:3px}
@media (max-width:900px){ .editor-side{position:static} }
.editor-body textarea{min-height:56vh;font-size:1.02rem;line-height:1.8}

/* One box. Preview swaps the rendered article INTO the same box the writing
   was in, at the same size and the same place on the page, and swaps back.
   Nothing moves and nothing scrolls.
   Two earlier shapes were wrong for the same reason: a pane underneath meant
   checking a heading cost you sight of the sentence you were writing, and a
   second column meant reading your own writing at half width. */
.editor-stack{position:relative}
.editor-stack textarea{width:100%}
.live{
  display:none;position:absolute;inset:0;overflow:auto;
  border:1px solid var(--line-dark);border-radius:2px;
  background:var(--black);padding:22px 24px;
}
.editor-stack.is-preview .live{display:block}
.editor-stack.is-preview textarea{visibility:hidden}
.live .article-body{max-width:62ch;margin:0}
.live .article-body p{font-size:1.02rem}
/* Nothing here overrides heading colour. It used to force cream, which was
   harmless while the article's own headings were cream too — and became a
   lie the moment they went coral. The preview and the published page run one
   renderer and one stylesheet; anywhere the editor restates a value, it can
   drift out of agreement with the page it is previewing. */
.editor-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}
.editor-status{font-size:.82rem;color:var(--paper-faint)}

.adminlist{border-top:1px solid var(--line-dark);margin-top:22px}
.adminrow{display:grid;grid-template-columns:1fr auto auto;gap:12px 18px;align-items:center;padding:15px 4px;border-bottom:1px solid var(--line-dark)}
.adminrow-t{font-weight:600;font-size:.98rem}
.adminrow-t a{text-decoration:none}
.adminrow-t a:hover{color:var(--coral)}
.pill{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:2px;border:1px solid var(--line-dark);color:var(--paper-faint);white-space:nowrap}
.pill.is-live{color:var(--coral);border-color:var(--coral)}
@media (max-width:600px){ .adminrow{grid-template-columns:1fr auto} }

/* Setup errors arrive as several lines of instructions. Collapsing them into
   one paragraph is how a message that tells you the fix stops telling you. */
.alert{padding:13px 16px;border-radius:2px;font-size:.9rem;margin-bottom:18px;line-height:1.55;white-space:pre-line}
.alert-error{background:rgba(201,122,98,.12);border:1px solid var(--coral-deep);color:var(--paper)}
.alert-ok{background:rgba(226,150,127,.1);border:1px solid var(--line-dark);color:var(--paper-dim)}
.alert:empty{display:none;margin:0;padding:0;border:0}

/* Footer ────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line-dark);padding:32px 0 46px;background:var(--black)}
.foot-grid{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:baseline}
.foot a{font-size:.83rem;color:var(--paper-dim);text-decoration:none;margin-left:20px}
.foot a:first-child{margin-left:0}
.foot a:hover{color:var(--coral)}
.foot span{font-size:.83rem;color:var(--paper-faint)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}