/* The shared editorial shell for the Writing essays (/writing/<slug>).
 *
 * Both /writing/origin and /writing/the-hand wear this, so the two cannot
 * drift into "different templates" -- the fault this file exists to answer.
 * It carries the SHELL only: the fixed near-black palette, the measure, the
 * masthead breadcrumb, the numbered sections, the fixed table-of-contents
 * rail, and the foot. Each essay keeps its own BESPOKE body components inline
 * (the origin story's chips and strips; the hand's live card demo), the same
 * way a page owns what it is organised by.
 *
 * The palette is FIXED, not the theme tokens -- a self-contained editorial
 * surface exactly like the entry screen and /origin always were, which is why
 * design/check-colours.py lists this file beside entry.css and page.css. The
 * essays read the same on every skin, on purpose.
 */
:root {
  --stage: #030504;
  --panel: #0c1110;
  --bone: #f0eadc;
  --bone-hi: #faf7f0;
  --text: #c5c0b4;
  --muted: #858f88;
  --verdigris: #6e9a8d;
  --rust: #c8887a;
  --rule: rgb(133 143 136 / .28);
  --serif: "EB Garamond", Georgia, ui-serif, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--stage);
  color: var(--text);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 42rem; margin: 0 auto; padding: 0 1.25rem 6rem; }

/* Masthead: a breadcrumb, the title, the deck. */
.mast { padding: 5rem 0 3rem; border-bottom: 1px solid var(--rule); }
.mast__mark {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .32em;
  text-transform: uppercase; margin: 0 0 1.4rem;
}
.mast__mark a { color: var(--muted); text-decoration: none; transition: color .2s; }
.mast__mark a:hover, .mast__mark a:focus-visible { color: var(--bone); }
.mast__mark .crumb { color: var(--verdigris); }
.mast__mark .sep { color: var(--muted); margin: 0 .5em; }
.mast h1 {
  font-family: var(--serif); font-weight: 600; color: var(--bone);
  font-size: clamp(2.4rem, 7vw, 3.6rem); line-height: 1.02;
  letter-spacing: -.02em; margin: 0 0 1.2rem; text-wrap: balance;
}
.mast__dek { font-size: 1.2rem; color: var(--text); max-width: 36rem; margin: 0 0 1.1rem; }
.mast__dek:last-child { margin-bottom: 0; }
.mast__dek em { color: var(--bone); font-style: italic; }

/* Numbered sections. */
.sec { padding: 3.2rem 0 0; }
.sec__num {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .28em;
  color: var(--verdigris); text-transform: uppercase; margin: 0 0 .7rem;
}
.sec h2 {
  font-family: var(--serif); font-weight: 600; color: var(--bone);
  font-size: clamp(1.6rem, 4.4vw, 2.1rem); line-height: 1.08;
  letter-spacing: -.015em; margin: 0 0 1.1rem; text-wrap: balance;
  scroll-margin-top: 2rem;
}
.sec p { margin: 0 0 1.1rem; }
.sec a { color: var(--verdigris); text-decoration: underline;
  text-decoration-color: rgb(110 154 141 / .45); text-underline-offset: 3px; }
.sec a:hover, .sec a:focus-visible { color: var(--bone); }
.sec strong, .sec b { color: var(--bone); font-weight: 600; }
.sec em { color: var(--bone); }
.sec .quiet { color: var(--muted); }

.pull {
  margin: 1.8rem 0; padding: 0 0 0 1.2rem;
  border-left: 2px solid var(--verdigris);
  font-size: 1.28rem; line-height: 1.4; color: var(--bone); font-style: italic;
}
.pull cite { display: block; margin-top: .5rem; font-style: normal;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }

.foot { margin-top: 3.5rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.foot a { color: var(--verdigris); text-decoration: none; }
.foot a:hover { color: var(--bone); }

/* The fixed section rail: a column to the left of the measure, shown only
 * where there is room, with a scroll-spy lighting the section you are in and a
 * back-link to the Writing index at its foot. Below 78rem it hides and the
 * essay is one column. */
.toc { position: fixed; top: 50%; transform: translateY(-50%);
  left: calc(50% - 34.5rem); width: 12rem; display: none; z-index: 5; }
@media (min-width: 78rem) { .toc { display: flex; flex-direction: column; gap: .1rem; } }
.toc__title { font-family: var(--mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem .7rem; }
.toc a { display: flex; gap: .55rem; align-items: baseline;
  font-family: var(--serif); font-size: .92rem; color: var(--muted);
  text-decoration: none; padding: .28rem 0 .28rem .7rem;
  border-left: 2px solid transparent; transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--text); }
.toc a.is-on { color: var(--bone); border-left-color: var(--verdigris); }
.toc__n { font-family: var(--mono); font-size: .6rem; letter-spacing: .06em;
  color: var(--verdigris); opacity: .7; }
.toc a.is-on .toc__n { opacity: 1; }
.toc__back { margin-top: .9rem; font-family: var(--mono) !important; font-size: .58rem !important;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted) !important;
  border-left: 0 !important; }
.toc__back:hover { color: var(--verdigris) !important; }

@media (prefers-reduced-motion: no-preference) {
  .mast h1 { animation: rise .6s ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}