/* ============================================================
   ARCHIVE · Saipher Zureti — essay pages
   editorial print / kinetic typography — Fable 15, folio 11
   paper: #f3ecdf · ink: #221e1a · burgundy: #6f2432
   ============================================================ */

:root {
  --paper:      #f3ecdf;
  --paper-deep: #ece2cf;
  --ink:        #221e1a;
  --ink-soft:   #554c44;
  --ink-faint:  rgba(34, 30, 26, 0.14);
  --accent:     #6f2432;
  --accent-soft:rgba(111, 36, 50, 0.55);
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono:  "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --measure: 33rem;
  --chrome-h: 2.6rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--paper);
  scrollbar-color: var(--accent-soft) var(--paper);
  scrollbar-width: thin;
}

body {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(1.09rem, 1rem + 0.35vw, 1.22rem);
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: oldstyle-nums;
  overflow-x: hidden;
}

.chapter-head h2, .deck { text-wrap: balance; }
.para p { text-wrap: pretty; }

::selection { background: var(--accent); color: var(--paper); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
  background: var(--accent-soft);
  border: 3px solid var(--paper);
  border-radius: 6px;
}

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- fixed chrome ---------- */

.grain {
  position: fixed; inset: -20%;
  z-index: 60;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.55;
  /* background-image set by JS (canvas noise tile) */
}

.vignette {
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%,   transparent 60%, rgba(90, 70, 40, 0.07) 100%),
    radial-gradient(130% 100% at 50% 100%, transparent 55%, rgba(60, 40, 25, 0.08) 100%);
}

.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 90;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.running {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 80;
  height: var(--chrome-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.25rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom: 1px solid var(--ink-faint);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.running.is-on { opacity: 1; transform: translateY(0); }
.run-mid  { overflow: hidden; text-align: center; flex: 1; white-space: nowrap; text-overflow: ellipsis; }
.run-title, .run-folio { display: inline-block; }
.run-right { color: var(--accent); }

.back {
  position: fixed; left: 1.1rem; bottom: 1.1rem;
  z-index: 85;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  padding: 0.5rem 0.85rem;
  transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}
.back:hover {
  color: var(--paper);
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------- shared leaf layout ---------- */

main { position: relative; z-index: 2; }

.leaf {
  width: min(var(--measure), calc(100vw - 2.75rem));
  margin-inline: auto;
  position: relative;
}

/* ---------- masthead ---------- */

.masthead {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: calc(var(--chrome-h) + 3rem) 0 4rem;
}

.overline {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2.4rem;
}

.rule {
  height: 1px;
  background: var(--ink);
  transform-origin: 50% 50%;
}
.rule-top    { margin-bottom: 2.2rem; }
.rule-bottom { margin-top: 2.2rem; }

.title {
  font-weight: 420;
  font-size: clamp(2.15rem, 8.4vw, 6.1rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 72;
}
.mask { display: block; overflow: hidden; padding-block: 0.04em; }
.line { display: block; white-space: nowrap; }

.deck {
  font-style: italic;
  font-size: clamp(1.12rem, 1rem + 0.7vw, 1.42rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 30rem;
  margin: 2.4rem auto 0;
}

.byline {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2rem;
}

.scroll-cue {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.cue-line {
  display: block;
  width: 1px; height: 3.4rem;
  background: linear-gradient(var(--accent), transparent);
}

/* ---------- asterism / ornaments ---------- */

.asterism {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--accent);
  letter-spacing: 0.4em;
  padding: 1rem 0 0;
}

/* ---------- chapters ---------- */

.chapter { padding: clamp(4.5rem, 10vh, 8rem) 0; }

/* faint numeral watermark in the left margin, wide viewports only */
@media (min-width: 1180px) {
  .chapter::before {
    content: attr(data-num);
    position: absolute;
    left: -11rem;
    top: clamp(4rem, 9vh, 7rem);
    width: 8rem;
    text-align: right;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: 9rem;
    line-height: 1;
    color: var(--ink);
    opacity: 0.055;
    pointer-events: none;
    user-select: none;
  }
}

.chapter-head { margin-bottom: 3rem; }

.kicker {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.chapter-head h2 {
  font-weight: 480;
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.head-rule {
  width: 3.2rem; height: 1px;
  background: var(--accent);
  margin-top: 1.3rem;
  transform-origin: 0 50%;
}

.para { position: relative; }
.para + .para { margin-top: 1.6em; }

.para p { hanging-punctuation: first; }

.has-dropcap::first-letter {
  float: left;
  font-size: 4.55em;
  line-height: 0.8;
  padding: 0.06em 0.12em 0 0;
  font-weight: 500;
  color: var(--accent);
  font-variation-settings: "opsz" 72;
}

em { font-style: italic; }

/* footnote apparatus */

.fnref {
  font-family: var(--mono);
  font-size: 0.62em;
  font-weight: 600;
  color: var(--accent);
  cursor: help;
  padding: 0 0.15em;
  line-height: 0;
  transition: background 0.3s ease, color 0.3s ease;
}
.fnref.lit, .fnref:hover { background: var(--accent); color: var(--paper); }

.note {
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  border-left: 1px solid var(--ink-faint);
  padding-left: 0.9rem;
  transition: border-color 0.35s ease, color 0.35s ease;
}
.note.lit { border-color: var(--accent); color: var(--ink); }
.note-no { color: var(--accent); font-weight: 600; margin-right: 0.35em; }

/* margin notes on wide viewports */
@media (min-width: 1180px) {
  .note {
    position: absolute;
    left: calc(100% + 3rem);
    top: 0.35em;
    width: 13.5rem;
  }
}
@media (max-width: 1179.98px) {
  .note {
    display: block;
    margin: 1.1rem 0 0 1.4rem;
    max-width: 24rem;
  }
}

/* ---------- pull-quotes ---------- */

.pullquote {
  padding: clamp(4rem, 12vh, 8.5rem) 0;
  width: min(52rem, calc(100vw - 2.75rem));
  text-align: center;
}

.pq-rule {
  height: 1px;
  background: var(--ink-faint);
  transform-origin: 50% 50%;
}

.pq-mark {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3.4rem, 2rem + 6vw, 6.5rem);
  line-height: 0.3;
  color: var(--accent);
  padding-top: 3.2rem;
  user-select: none;
}

.pq-text {
  font-style: italic;
  font-weight: 460;
  font-size: clamp(1.9rem, 1rem + 4.6vw, 4.1rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 72;
  padding: 1.6rem 0 2.2rem;
}

/* split words (set by JS) */
.pq-text .w {
  display: inline-block;
  white-space: pre;
}

.pq-cap {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 2.6rem;
}

/* ---------- interlude · fig. 1 ---------- */

.interlude {
  width: 100%;
  max-width: none;
}

.interlude-stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  text-align: center;
  overflow: hidden;
  padding: var(--chrome-h) 1rem 0;
}

.fig-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}

.decay {
  --wght: 720;
  font-family: var(--serif);
  font-variation-settings: "wght" var(--wght), "opsz" 72;
  font-size: clamp(2.4rem, 9vw, 6.4rem);
  transform-origin: 50% 50%;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--ink);
}
.decay .L { display: inline-block; will-change: transform, opacity; }

.fig-caption {
  font-style: italic;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem);
  color: var(--ink-soft);
}

.fig-readout {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  border: 1px solid var(--ink-faint);
  padding: 0.45rem 0.8rem;
}

/* ---------- end mark & colophon ---------- */

.endmark-wrap {
  display: flex;
  justify-content: center;
  padding-top: 4rem;
}
.endmark {
  width: 0.72rem; height: 0.72rem;
  background: var(--accent);
  transform: rotate(45deg);
  display: block;
}

.colophon {
  text-align: center;
  padding: 3rem 0 9rem;
}
.rule-colophon {
  width: 6rem;
  margin: 0 auto 2.6rem;
  background: var(--ink-faint);
}
.colophon-text {
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  max-width: 26rem;
  margin: 0 auto;
}
.ink-chip {
  display: inline-block;
  width: 0.62em; height: 0.62em;
  background: var(--ink);
  margin-right: 0.35em;
  vertical-align: baseline;
}
.colophon-sig {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 1.6rem;
}

/* ---------- initial hidden states (JS present only) ---------- */

.js .masthead .line   { transform: translateY(115%); }
.js .masthead .rule   { transform: scaleX(0); }
.js .masthead .m-fade { opacity: 0; transform: translateY(14px); }

/* everything else is hidden at runtime by GSAP, so a CDN failure
   or reduced-motion never leaves blank content */

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .masthead .line,
  .js .masthead .rule,
  .js .masthead .m-fade {
    transform: none;
    opacity: 1;
  }
  .cue-line { background: var(--ink-faint); }
  .running { transition: none; }
}

/* ---------- print: an archive should archive well ---------- */

@media print {
  .grain, .vignette, .progress, .running, .back,
  .scroll-cue, .fig-readout { display: none !important; }
  body { background: #fff; color: #000; }
  .js .masthead .line, .js .masthead .rule, .js .masthead .m-fade {
    transform: none; opacity: 1;
  }
  .masthead, .interlude-stage { min-height: 0; }
  .note { position: static; margin: 1rem 0 0 1.4rem; width: auto; }
  /* GSAP hides unrevealed content via inline styles; !important wins on paper */
  .rv, .w, .pq-mark, .pq-cap, .pq-rule, .head-rule, .rule-colophon,
  .fig-caption, .fig-label, .decay .L {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  :root { --chrome-h: 2.2rem; }
  .running { padding: 0 0.9rem; font-size: 0.56rem; }
  .run-mid { display: none; }
  .masthead { padding-bottom: 2.5rem; }
  .deck { max-width: 26rem; }
  .scroll-cue { margin-top: 2.6rem; }
  .chapter { padding: 3.6rem 0; }
  .pullquote { padding: 3.4rem 0; }
  .pq-text { padding: 2.2rem 0 1.7rem; }
  .colophon { padding-bottom: 7rem; }
  .back { left: 0.8rem; bottom: 0.8rem; }
}

/* ============================================================
   ARCHIVE · additions for the Saipher Zureti essays
   Same tokens, same apparatus: plates for the calligraphy,
   epigraph furniture, and title sizes for longer headlines.
   ============================================================ */

/* ---------- display titles that run long ---------- */

/* Display titles are set on a single line each, inside a mask that clips any
   overflow — so a title that is too wide simply disappears off the edge. The
   column is only --measure wide, which at the 6.1rem cap holds about ten
   characters. --tn is the length of the longest line, written onto the h1 by
   the builder; dividing the column by it gives a size that always fits.
   1.74 is the reciprocal of the widest per-character advance Newsreader sets
   at this weight, measured across all the titles in the archive. */
.title {
  --fit: calc(min(var(--measure), 100vw - 2.75rem) / var(--tn, 12) * 1.74);
  font-size: clamp(1.6rem, min(8.4vw, var(--fit)), 6.1rem);
}

/* Narrow screens let the lines wrap instead, so the type can stay large. */
@media (max-width: 560px) {
  .title .line { white-space: normal; }
  .title { font-size: clamp(1.8rem, 7.6vw, 2.9rem); }
}

/* ---------- night mode ---------- */

/* The essay pages carry their own copy of the palette so that the lamp works
   here too, not only on the pages that load site.css. Same values, same
   localStorage key, so a reader's choice follows them across the whole site. */
html.night {
  --paper:      #191512;
  --paper-deep: #211c18;
  --ink:        #e9dfd0;
  --ink-soft:   #a99d8d;
  --ink-faint:  rgba(233, 223, 208, 0.16);
  --accent:     #c96f5e;
  --accent-soft:rgba(201, 111, 94, 0.55);
}

html.night .grain { mix-blend-mode: screen; opacity: 0.18; }
html.night .vignette { opacity: 0.5; }

/* the lamp, sat beside the back link */
.lamp {
  position: fixed; right: 1.1rem; bottom: 1.1rem;
  z-index: 85;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}
.lamp:hover {
  color: var(--paper);
  background: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 640px) {
  .lamp { right: 0.8rem; bottom: 0.8rem; }
}

@media print {
  .lamp { display: none !important; }
}

/* ---------- plates: the author's calligraphy ---------- */

/* The title page reserves a little under a full screen so that the top edge of
   the calligraphy meets the fold. At a full 100svh the centred masthead left a
   dead band of blank paper between the scroll cue and the artwork. */
.masthead {
  min-height: 88svh;
  padding-bottom: 2rem;
}

.plate-wrap {
  width: min(52rem, calc(100vw - 2.75rem));
  padding-top: 0;
}

.plate { margin: 0; }

.plate img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ink-faint);
  background: var(--paper-deep);
}

.plate-cap {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 1.1rem;
}
.plate-cap em { font-style: italic; text-transform: none; letter-spacing: 0.1em; }

.plate-inline {
  margin: 2.6rem 0;
  width: 100%;
}

/* ---------- epigraph apparatus ---------- */

.epi-script {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 0.9rem + 1.4vw, 1.75rem);
  line-height: 1.9;
  color: var(--ink);
  max-width: 42rem;
  margin: 0 auto 0.6rem;
}

.epi-translit {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.epi-gloss {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0 auto 1.6rem;
}

.pq-text.pq-long  { font-size: clamp(1.35rem, 0.9rem + 2.1vw, 2.35rem); line-height: 1.28; }
.pq-text.pq-xlong { font-size: clamp(1.15rem, 0.9rem + 1.3vw, 1.7rem);  line-height: 1.45; }

.epi-note-wrap { padding: 0 0 1rem; }

.epi-note {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.85;
  color: var(--ink-soft);
  border-left: 1px solid var(--ink-faint);
  padding-left: 1.1rem;
}
.epi-note p + p { margin-top: 0.9em; }
.epi-note strong { font-weight: 600; color: var(--ink); }

/* ---------- quoted matter inside the body ---------- */

blockquote.inset {
  font-style: italic;
  color: var(--ink-soft);
  border-left: 1px solid var(--accent-soft);
  padding-left: 1.4rem;
  margin: 0.4rem 0;
}

.inset-list { margin-left: 1.3rem; }
.inset-list li + li { margin-top: 0.5em; }

/* ---------- subscriber continuation ---------- */

.paywall-lede {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
}
.paywall-note .para p + p { margin-top: 1.1em; }

.essay-links {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  line-height: 2.2;
}
.essay-links a { text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.essay-links a:hover { border-bottom-color: var(--accent); }

/* ---------- body asterisms between movements ---------- */

.chapter .asterism { padding: 2.4rem 0; }