/* =========================================================
   SengGack.net (v2)
   Luxury Sepia Atelier of Sharp Futures
   Magazine-spread layout, mono typography, sepia palette,
   magnetic interactions, sharp-angle motifs.
   ========================================================= */

:root {
  --tobacco-black: #1A140C;
  --walnut-velvet: #2D2417;
  --aged-bronze:   #7E6747;
  --linen-sepia:   #C8A874;
  --ivory-page:    #F2E8D2;
  --bone-sharp:    #EFEDE7;
  --burnt-ochre:   #7C2A1A;

  --rhythm: 28px;
  --gutter: 6vw;
  --margin: 10vw;

  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;

  --ease-out: cubic-bezier(.2,.7,.2,1);
}

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

html, body {
  background: var(--tobacco-black);
  color: var(--linen-sepia);
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.sg-body {
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 80% 10%, rgba(124,42,26,0.06), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(200,168,116,0.04), transparent 60%),
    var(--tobacco-black);
}

/* film-grain noise overlay */
body.sg-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(242,232,210,0.6) 1px, transparent 1px),
    radial-gradient(rgba(124,42,26,0.4) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 1px;
}

/* =========================================================
   Selection
   ========================================================= */
::selection {
  background: var(--burnt-ochre);
  color: var(--ivory-page);
}

/* =========================================================
   HEADER RAIL
   ========================================================= */
.rail {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--margin);
  z-index: 8000;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--linen-sepia);
  text-transform: uppercase;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(26,20,12,0.85), rgba(26,20,12,0));
}

.rail-left, .rail-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rail-mark {
  font-weight: 700;
  color: var(--ivory-page);
  border: 1px solid var(--aged-bronze);
  padding: 4px 8px;
  letter-spacing: 0.1em;
}

.rail-sep { color: var(--aged-bronze); }
.rail-archive { color: var(--linen-sepia); }
.rail-year { color: var(--linen-sepia); }

.rail-cipher {
  font-weight: 700;
  color: var(--ivory-page);
  letter-spacing: 0.22em;
  border-top: 1px solid var(--aged-bronze);
  border-bottom: 1px solid var(--aged-bronze);
  padding: 4px 10px;
  transition: color 400ms var(--ease-out), border-color 400ms var(--ease-out);
}
.rail-cipher.flicker {
  animation: flicker 600ms steps(6) 1;
}
@keyframes flicker {
  0%   { opacity: 1; }
  20%  { opacity: 0.2; }
  40%  { opacity: 1; }
  60%  { opacity: 0.4; }
  80%  { opacity: 1; }
  100% { opacity: 1; }
}

/* =========================================================
   SPREAD WRAPPER
   ========================================================= */
.spread {
  position: relative;
  min-height: 100vh;
  padding: 12vh var(--margin) 12vh;
  overflow: hidden;
  border-bottom: 1px solid rgba(126,103,71,0.18);
}

.spread-meta {
  position: absolute;
  top: 78px;
  left: var(--margin);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aged-bronze);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 30;
}
.spread-meta .meta-num { color: var(--linen-sepia); }
.spread-meta .meta-sep { color: var(--aged-bronze); }
.spread-meta .meta-title { color: var(--ivory-page); letter-spacing: 0.24em; }

/* =========================================================
   COVER SPREAD
   ========================================================= */
.spread-cover {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  min-height: 100vh;
  padding-top: 16vh;
}

.page {
  position: relative;
  z-index: 5;
}

.page-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 76vh;
}

.page-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
}

.sengtag {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--linen-sepia);
  transform: rotate(-32deg);
  transform-origin: top left;
  position: absolute;
  top: 10vh;
  left: 0;
  width: 60vw;
}
.sengtag-line {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--ivory-page);
  width: 0;
}
.sengtag-line.typed {
  animation: typing 1.6s steps(28, end) forwards;
}
.sengtag-line.done {
  border-right-color: transparent;
}
@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

/* Cover wordmark */
.cover-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--aged-bronze);
}

.wordmark {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 140px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ivory-page);
  display: inline-block;
}
.wm-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.2em);
}
.wm-char.revealed {
  animation: charReveal 380ms var(--ease-out) forwards;
}
.wm-dot { color: var(--burnt-ochre); }
@keyframes charReveal {
  from { opacity: 0; transform: translateY(0.25em); }
  to   { opacity: 1; transform: translateY(0); }
}

.year-stamp {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--linen-sepia);
  opacity: 0;
}
.year-stamp.shown {
  animation: fadeIn 800ms 1.4s var(--ease-out) forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}

.cover-footline {
  margin-top: 50px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.cover-line {
  display: inline-block;
  width: 80px;
  height: 1px;
  background: var(--aged-bronze);
}
.cover-foot-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--aged-bronze);
}

/* Obsidian wedge cover-corner */
.obsidian-wedge {
  position: absolute;
  top: 0;
  right: 0;
  width: 120%;
  height: 60vh;
  background:
    linear-gradient(120deg, transparent 0 38%, var(--walnut-velvet) 38% 60%, transparent 60% 62%, var(--bone-sharp) 62% 62.6%, transparent 62.6% 100%);
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 0);
  transform: translateX(40%) translateY(-100%);
  z-index: 1;
}
.obsidian-wedge.in {
  animation: wedgeIn 1.4s var(--ease-out) forwards;
}
@keyframes wedgeIn {
  from { transform: translateX(40%) translateY(-100%); }
  to   { transform: translateX(0) translateY(0); }
}

/* Editor's seal */
.editor-seal {
  position: absolute;
  right: var(--margin);
  bottom: 8vh;
  width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
  z-index: 6;
  opacity: 0;
  transform: scale(0.6);
}
.editor-seal.in {
  animation: sealIn 800ms 1.6s var(--ease-out) forwards;
}
@keyframes sealIn {
  to { opacity: 1; transform: scale(1); }
}
.seal-ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--burnt-ochre);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(124,42,26,0.4);
}
.seal-letter {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 28px;
  color: var(--burnt-ochre);
  letter-spacing: 0;
}

/* =========================================================
   FOREWORD SPREAD
   ========================================================= */
.foreword-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--gutter);
  align-items: start;
  margin-top: 4vh;
}

.spread-head {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 90px);
  line-height: 1.02;
  letter-spacing: 0.04em;
  color: var(--ivory-page);
  text-transform: uppercase;
  margin-bottom: 48px;
}

.foreword-lede {
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.7;
  color: var(--ivory-page);
  margin-bottom: 28px;
  position: relative;
}

.foreword-prose, .feature-prose, .foreword-body {
  font-family: var(--font-serif);
  color: var(--linen-sepia);
  margin-bottom: 22px;
}

.drop-cap {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 5.2em;
  line-height: 0.86;
  letter-spacing: 0;
  color: var(--ivory-page);
  float: left;
  padding: 6px 14px 0 0;
  margin: 4px 8px 0 0;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 220ms var(--ease-out), color 320ms var(--ease-out), text-shadow 320ms var(--ease-out);
  cursor: pointer;
}
.drop-cap:hover {
  color: var(--burnt-ochre);
  text-shadow: 0 0 16px rgba(124,42,26,0.45);
}

.foreword-signature {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aged-bronze);
}

.foreword-aside {
  position: sticky;
  top: 18vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.aside-caption {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--aged-bronze);
  line-height: 1.5;
}

/* Drift shapes */
.drift {
  display: block;
  width: 100%;
  height: auto;
}
.drift-cover {
  position: absolute;
  bottom: 6vh;
  left: 4vw;
  width: 240px;
  opacity: 0.95;
}
.drift-aside {
  width: 100%;
  max-width: 280px;
}
.shape { transition: opacity 600ms var(--ease-out); }
.shape-fill-sepia { fill: var(--linen-sepia); }
.shape-fill-ivory { fill: var(--ivory-page); opacity: 0.85; }
.shape-fill-bone  { fill: var(--bone-sharp);  }
.shape-fill-ochre { fill: var(--burnt-ochre); }
.shape-stroke     { fill: none; stroke: var(--aged-bronze); stroke-width: 1.4; }
.shape-stroke-ochre { fill: none; stroke: var(--burnt-ochre); stroke-width: 1.4; }

.float-a { animation: floatA 14s ease-in-out infinite; transform-origin: center; }
.float-b { animation: floatB 16s ease-in-out infinite; }
.float-c { animation: floatC 18s ease-in-out infinite; mix-blend-mode: difference; }
@keyframes floatA {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-18px) rotate(2deg); }
}
@keyframes floatB {
  0%,100% { transform: translateY(0) rotate(0); }
  50%     { transform: translateY(14px) rotate(-1.6deg); }
}
@keyframes floatC {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(8px,-8px); }
}

/* Page wedges */
.page-wedge {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.wedge-tl {
  top: 0; left: 0;
  width: 60vw; height: 32vh;
  background: linear-gradient(135deg, var(--bone-sharp) 0 0.6%, transparent 0.6% 100%);
  clip-path: polygon(0 0, 90% 0, 0 100%);
  opacity: 0.85;
}
.wedge-tl-2 {
  top: 0; right: 0;
  width: 50vw; height: 28vh;
  background: linear-gradient(225deg, var(--bone-sharp) 0 0.6%, transparent 0.6% 100%);
  clip-path: polygon(10% 0, 100% 0, 100% 100%);
  opacity: 0.75;
}
.wedge-br {
  bottom: 0; right: 0;
  width: 56vw; height: 30vh;
  background: linear-gradient(315deg, var(--burnt-ochre) 0 0.4%, transparent 0.4% 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0.55;
}
.wedge-br-2 {
  bottom: 0; left: 0;
  width: 50vw; height: 26vh;
  background: linear-gradient(45deg, var(--bone-sharp) 0 0.5%, transparent 0.5% 100%);
  clip-path: polygon(0 100%, 100% 100%, 0 0);
  opacity: 0.7;
}

/* =========================================================
   FEATURE SPREADS
   ========================================================= */
.spread-feature { padding-top: 18vh; padding-bottom: 14vh; }

.feature-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--gutter);
  align-items: center;
  min-height: 72vh;
}
.feature-grid-reverse {
  grid-template-columns: 1fr 1.05fr;
}

.feature-image {
  position: relative;
}
.duotone-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5.2;
  background: var(--walnut-velvet);
  border: 1px solid var(--aged-bronze);
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.55),
    inset 0 0 0 6px rgba(26,20,12,0.6);
}
.duotone {
  width: 100%; height: 100%;
  display: block;
}
.duotone-caption {
  position: absolute;
  bottom: -28px;
  left: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--aged-bronze);
}

.feature-body { position: relative; }
.feature-kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--burnt-ochre);
  margin-bottom: 18px;
}

.feature-head {
  margin-bottom: 36px;
}

.pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1.4;
  color: var(--ivory-page);
  border-left: 2px solid var(--burnt-ochre);
  padding-left: 22px;
  margin: 28px 0;
  position: relative;
}
.pull-quote::after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  background: var(--linen-sepia);
  margin-top: 18px;
  transition: width 1.4s var(--ease-out);
}
.pull-quote.in::after { width: 60%; }

/* =========================================================
   INTERLUDE SPREADS
   ========================================================= */
.spread-interlude {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 18vh;
  padding-bottom: 14vh;
  text-align: center;
}

.big-wedge {
  width: 76vw;
  max-width: 1100px;
  height: auto;
  margin: 0 auto 60px;
  opacity: 0.95;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.55));
}
.big-shape { transform-origin: center; }
.big-edge  { stroke-width: 2; }

.aphorism {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(24px, 2.4vw, 40px);
  line-height: 1.4;
  color: var(--ivory-page);
  max-width: 56ch;
  margin: 0 auto;
  letter-spacing: 0.005em;
}
.aphorism-cite {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--aged-bronze);
}

/* =========================================================
   COLOPHON SPREAD
   ========================================================= */
.spread-colophon {
  background:
    linear-gradient(180deg, var(--tobacco-black), var(--walnut-velvet));
  padding-top: 18vh;
}
.colophon-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--gutter);
  align-items: start;
  margin-top: 5vh;
}
.colo-typed {
  background: rgba(242,232,210,0.05);
  border: 1px dashed var(--aged-bronze);
  padding: 38px 42px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ivory-page);
  line-height: 1.85;
}
.typed-line {
  white-space: pre;
  overflow: hidden;
}
.invite-cipher {
  display: inline-block;
  color: var(--burnt-ochre);
  border-bottom: 1px solid var(--burnt-ochre);
  padding-bottom: 2px;
  transform: translate(var(--mx,0), var(--my,0));
  transition: transform 220ms var(--ease-out), color 300ms var(--ease-out);
  cursor: pointer;
}
.invite-cipher:hover { color: var(--ivory-page); }
.invite-rand {
  color: var(--ivory-page);
  font-variant-numeric: tabular-nums;
}

.colo-meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--linen-sepia);
  text-transform: uppercase;
}
.colo-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.22em;
  color: var(--ivory-page);
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--aged-bronze);
}
.colo-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 28px;
  row-gap: 14px;
  align-items: center;
}
.colo-dl dt { color: var(--aged-bronze); }
.colo-dl dd { color: var(--ivory-page); }
.tab-num { font-variant-numeric: tabular-nums; }
.swatch {
  display: inline-block;
  width: 18px; height: 18px;
  border: 1px solid var(--aged-bronze);
  margin-right: 4px;
  vertical-align: middle;
}
.colo-foot {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--aged-bronze);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--aged-bronze);
}

/* =========================================================
   FOOTNOTES & SIDENOTE
   ========================================================= */
.footnote {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.65em;
  color: var(--burnt-ochre);
  padding: 0 4px;
  margin-left: 2px;
  vertical-align: super;
  cursor: pointer;
  transform: translate(var(--mx,0), var(--my,0));
  transition: transform 220ms var(--ease-out), color 400ms var(--ease-out);
}
.footnote:hover {
  color: var(--ivory-page);
  animation: footPulse 800ms ease-in-out infinite;
}
@keyframes footPulse {
  0%,100% { color: var(--linen-sepia); }
  50%     { color: var(--ivory-page); }
}

.sidenote {
  position: fixed;
  top: 0; right: 0;
  width: min(360px, 90vw);
  height: 100vh;
  background: var(--walnut-velvet);
  border-left: 1px solid var(--aged-bronze);
  box-shadow: -20px 0 60px rgba(0,0,0,0.55);
  transform: translateX(100%);
  transition: transform 480ms var(--ease-out);
  z-index: 9500;
  padding: 100px 36px 40px;
  display: flex;
  flex-direction: column;
}
.sidenote.open { transform: translateX(0); }

.sidenote-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
}
.sidenote-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 56px;
  letter-spacing: 0;
  color: var(--burnt-ochre);
  line-height: 1;
}
.sidenote-text {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ivory-page);
}
.sidenote-close {
  margin-top: auto;
  align-self: flex-start;
  background: none;
  border: 1px solid var(--aged-bronze);
  color: var(--linen-sepia);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  padding: 8px 16px;
  cursor: pointer;
  text-transform: uppercase;
  transition: color 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.sidenote-close:hover {
  color: var(--ivory-page);
  border-color: var(--ivory-page);
}

/* =========================================================
   WEDGE SWEEP (section transition)
   ========================================================= */
.wedge-sweep {
  position: fixed;
  top: 0; left: 0;
  width: 140vw; height: 100vh;
  background: var(--bone-sharp);
  clip-path: polygon(0 0, 30% 0, 50% 100%, 0 100%);
  transform: translateX(-140vw);
  z-index: 8500;
  pointer-events: none;
  opacity: 0.92;
}
.wedge-sweep.sweep {
  animation: sweep 600ms var(--ease-out) forwards;
}
@keyframes sweep {
  0%   { transform: translateX(-140vw); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(140vw); }
}

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.spread .spread-head,
.spread .feature-prose,
.spread .foreword-body,
.spread .foreword-lede,
.spread .pull-quote,
.spread .duotone-frame,
.spread .drift,
.spread .spread-meta,
.spread .aphorism,
.spread .aphorism-cite,
.spread .colo-typed,
.spread .colo-meta,
.spread .feature-kicker {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1000ms var(--ease-out), transform 1000ms var(--ease-out);
}
.spread.visible .spread-head,
.spread.visible .feature-prose,
.spread.visible .foreword-body,
.spread.visible .foreword-lede,
.spread.visible .pull-quote,
.spread.visible .duotone-frame,
.spread.visible .drift,
.spread.visible .spread-meta,
.spread.visible .aphorism,
.spread.visible .aphorism-cite,
.spread.visible .colo-typed,
.spread.visible .colo-meta,
.spread.visible .feature-kicker {
  opacity: 1;
  transform: translateY(0);
}

/* per-element stagger */
.spread.visible .feature-kicker  { transition-delay: 60ms;  }
.spread.visible .spread-head     { transition-delay: 140ms; }
.spread.visible .foreword-lede   { transition-delay: 220ms; }
.spread.visible .feature-prose:nth-of-type(1) { transition-delay: 220ms; }
.spread.visible .feature-prose:nth-of-type(2) { transition-delay: 320ms; }
.spread.visible .feature-prose:nth-of-type(3) { transition-delay: 420ms; }
.spread.visible .foreword-body:nth-of-type(2) { transition-delay: 320ms; }
.spread.visible .foreword-body:nth-of-type(3) { transition-delay: 420ms; }
.spread.visible .pull-quote      { transition-delay: 380ms; }
.spread.visible .duotone-frame   { transition-delay: 120ms; }
.spread.visible .drift           { transition-delay: 80ms;  }

/* wedge slide-ins */
.page-wedge {
  opacity: 0;
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.spread.visible .page-wedge { opacity: 1; }

.spread.visible .wedge-tl    { transform: translate(0,0); }
.spread.visible .wedge-tl-2  { transform: translate(0,0); }
.spread.visible .wedge-br    { transform: translate(0,0); }
.spread.visible .wedge-br-2  { transform: translate(0,0); }
.wedge-tl    { transform: translate(-20%, -20%); }
.wedge-tl-2  { transform: translate(20%, -20%); }
.wedge-br    { transform: translate(20%, 20%); }
.wedge-br-2  { transform: translate(-20%, 20%); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  :root {
    --margin: 6vw;
    --gutter: 6vw;
  }
  .rail { padding: 16px 6vw; font-size: 10px; }
  .rail-cipher { font-size: 10px; }
  .spread-cover {
    grid-template-columns: 1fr;
    min-height: 100vh;
  }
  .page-left { min-height: 50vh; }
  .sengtag {
    transform: rotate(-22deg);
    top: 14vh;
    width: 80vw;
    font-size: 11px;
  }
  .wordmark { font-size: clamp(36px, 12vw, 80px); }
  .foreword-grid,
  .feature-grid,
  .feature-grid-reverse,
  .colophon-grid {
    grid-template-columns: 1fr;
  }
  .foreword-aside { position: static; margin-top: 24px; }
  .drop-cap { font-size: 4em; }
  .big-wedge { width: 92vw; }
  .duotone-frame { aspect-ratio: 4 / 5; }
  .spread { padding: 14vh 6vw 12vh; }
  .spread-meta { font-size: 11px; top: 70px; }
  .editor-seal { right: 6vw; }
}

@media (max-width: 540px) {
  .wordmark { font-size: clamp(34px, 14vw, 64px); letter-spacing: 0.02em; }
  .spread-head { font-size: clamp(30px, 9vw, 56px); }
  .sengtag { display: none; }
  .obsidian-wedge { height: 40vh; }
}