/* ════════════════════════════════════════════════════════════════════
   essays.css — the fold-out dossier (landing) + the essay document pages
   A scientist's desk of investigative files: manila folders, scattered and
   patina'd, that fold open under gravity. And a clean typeset document for
   each essay in its own right.
   ════════════════════════════════════════════════════════════════════ */

/* paper grain reused from the archive */
:root {
  --manila:      #E4D4A8;
  --manila-deep: #D6C28B;
  --manila-edge: #C9B27A;
  --paper:       #F7F2E6;
  --essay-measure: 760px;
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.is-active { color: var(--red) !important; }

/* ───────────────────────────── DOSSIER LANDING ──────────────────────── */
.dossier-page { padding-bottom: var(--space-4xl); }

.dossier-hero {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: calc(var(--space-5xl) + 40px) var(--gutter) var(--space-md);
}

.dossier-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--ink);
  position: relative;
  margin-bottom: var(--space-md);
}
.dossier-hero__title::before {
  content: attr(data-text);
  position: absolute;
  top: 3px; left: 5px;
  color: var(--orange);
  opacity: 0.08;
  z-index: -1;
}
.dossier-hero__title .accent { color: var(--orange); }

.dossier-hero__sub {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1.5vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.55;
  max-width: 56ch;
}

.dossier-foot {
  max-width: var(--container-max);
  margin: var(--space-2xl) auto 0;
  padding: var(--space-xl) var(--gutter) 0;
  border-top: 1px solid rgba(26, 26, 26, 0.08);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  line-height: 1.85;
  color: var(--grey);
  max-width: 60ch;
}

/* The desk: an ordered grid the folders sit slightly askew upon */
.desk {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.75rem);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-3xl) var(--gutter) var(--space-xl);
}

/* ───────────────────────────── FOLDER ───────────────────────────────── */
.folder {
  position: relative;
  height: 366px;
  /* each folder carries its own perspective so the fold renders the same in
     every row — a shared desk perspective skewed the top row badly in Safari.
     A closer value gives the open real depth — the cover swings back in 3D. */
  perspective: 820px;
  perspective-origin: 50% 32%;
  transform-style: flat;
  cursor: pointer;
  outline: none;
  /* resting scatter — static fallback; JS re-applies around these values */
  transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0px));
}
.folder:focus-visible { outline: none; }
.folder:focus-visible .folder__cover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 6px rgba(0,0,0,.18),
              0 0 0 2px var(--bg), 0 0 0 4px var(--accent, var(--ink));
}

/* per-index scatter (rotation + vertical jitter) */
.folder[data-index="0"] { --rot: -2.0deg; --dy: 8px;  --tabx: 16px; }
.folder[data-index="1"] { --rot:  1.4deg; --dy: 26px; --tabx: 74px; }
.folder[data-index="2"] { --rot: -1.0deg; --dy: 0px;  --tabx: 120px; }
.folder[data-index="3"] { --rot:  2.2deg; --dy: 30px; --tabx: 40px; }
.folder[data-index="4"] { --rot: -2.6deg; --dy: 14px; --tabx: 96px; }
.folder[data-index="5"] { --rot:  1.0deg; --dy: 24px; --tabx: 60px; }
.folder[data-index="6"] { --rot: -1.6deg; --dy: 6px;  --tabx: 28px; }

/* accent per file */
.folder[data-accent="orange"] { --accent: var(--orange); }
.folder[data-accent="blue"]   { --accent: var(--blue); }
.folder[data-accent="red"]    { --accent: var(--red); }
.folder[data-accent="ink"]    { --accent: var(--ink); }

/* contact shadow on the desk */
.folder__shadow {
  position: absolute;
  left: 8%; right: 8%; bottom: -14px;
  height: 26px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.18), rgba(0,0,0,0) 70%);
  filter: blur(2px);
  z-index: 0;
  transform: translateZ(-1px);
}

/* slivers of paper peeking from inside the closed folder */
.folder__stack {
  position: absolute;
  left: 9px; right: 5px; top: 12px; bottom: 9px;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0,0,0,.12);
  z-index: 1;
}
.folder__stack::before,
.folder__stack::after {
  content: '';
  position: absolute;
  left: 4px; right: -4px; top: 4px; bottom: -4px;
  background: #EFE7D2;
  border-radius: 2px;
  z-index: -1;
}
.folder__stack::after { left: 8px; right: -8px; top: 8px; bottom: -8px; background: #E7DCC2; z-index: -2; }

/* the manila cover — folds up on a top hinge */
.folder__cover {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(158deg, var(--manila) 0%, var(--manila-deep) 60%, var(--manila-edge) 100%);
  border-radius: 3px 3px 5px 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42),
              inset 0 -10px 22px rgba(120,96,46,.18),
              0 2px 5px rgba(0,0,0,.16);
  transform-origin: top center;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.4rem 1.3rem 1.2rem;
  overflow: visible;
  /* the fold is CSS-driven so the contents can never get stuck mid-animation */
  transform: rotateX(0deg);
  transform-origin: top center;
  /* heavy flap: slow off the hinge (weight), accelerates, swings back and settles */
  transition: transform 0.85s cubic-bezier(0.62, 0.02, 0.18, 1), box-shadow 0.6s ease;
}
/* grain + a faint horizontal fold crease */
.folder__cover::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: 0.16;
  mix-blend-mode: multiply;
  border-radius: inherit;
  pointer-events: none;
}
.folder__cover::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 46%;
  height: 1px;
  background: rgba(120,96,46,.18);
  box-shadow: 0 1px 0 rgba(255,255,255,.3);
  pointer-events: none;
}

/* the angled tab */
.folder__tab {
  position: absolute;
  top: -23px;
  left: var(--tabx, 24px);
  height: 25px;
  padding: 0 11px 0 10px;
  background: linear-gradient(180deg, var(--manila) 0%, var(--manila-deep) 100%);
  border-radius: 5px 5px 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 -1px 2px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  z-index: 1;
}
.folder__tab b { color: var(--accent, var(--ink)); font-weight: 700; }
.folder__tab i { font-style: normal; color: rgba(26,26,26,.5); }

/* cover face content */
.folder__face { position: relative; z-index: 1; }
.folder__face-code {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent, var(--ink));
  margin-bottom: 0.55rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(120,96,46,.28);
}
.folder__face-title {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #2A2416;
  margin-bottom: 0.5rem;
}
.folder__face-dek {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(42,36,22,.62);
  margin-bottom: 0.85rem;
}
.folder__face-meta {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: rgba(42,36,22,.5);
}

.folder__hint {
  position: absolute;
  bottom: 12px; right: 14px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(42,36,22,.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.folder:hover .folder__hint { opacity: 1; }
.folder.is-open .folder__hint { opacity: 0; }

/* ───────────── inner sheet (revealed contents) ───────────── */
.folder__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
/* the document sits set back inside the folder, then rises forward into view as
   the cover clears — translateZ + the folder's perspective give it real depth */
.folder__inner {
  opacity: 0;
  transform: translateZ(-90px) translateY(14px);
  transition: opacity 0.5s ease 0.2s,
              transform 0.7s cubic-bezier(0.22, 0.9, 0.26, 1.05) 0.16s;
}
.folder.is-open .folder__inner {
  opacity: 1;
  transform: translateZ(0) translateY(0);
  pointer-events: auto;
  cursor: pointer;
}

/* ─── CSS-driven fold-open (robust — content can't get stuck hidden) ─── */
.folder.is-open { z-index: 50; }
.folder.is-open .folder__cover {
  transform: rotateX(-118deg);
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 -8px 20px rgba(120,96,46,.25);
}
/* the rise/depth is handled on .folder__inner; the sheet stays put underneath */

@media (prefers-reduced-motion: reduce) {
  .folder__cover, .folder__inner, .folder__sheet { transition: none; }
}

.folder__sheet {
  position: absolute;
  inset: 0;
  background: var(--paper);
  border-radius: 3px;
  padding: 1.5rem 1.45rem 1.4rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 4px rgba(0,0,0,.12), inset 0 0 0 1px rgba(120,96,46,.08);
  overflow: hidden;
}
.folder__sheet::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 200px 200px;
  opacity: 0.06;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* accent spine down the left of the open sheet */
.folder__sheet::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent, var(--ink));
  opacity: 0.85;
}

.folder__inner-code {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent, var(--ink));
  margin-bottom: 0.6rem;
}
.folder__inner-title {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.folder__inner-dek {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--grey);
  margin-bottom: 0.7rem;
}
.folder__inner-abstract {
  font-family: var(--font-body);
  font-size: 0.79rem;
  line-height: 1.55;
  color: rgba(26,26,26,.78);
  margin-bottom: auto;
  /* keep the card from ever clipping the "Open file" affordance */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.folder__inner-foot { margin-top: 0.9rem; }
.folder__dates {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.05em;
  color: var(--grey);
  margin-bottom: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(26,26,26,.1);
}
.folder__dates b { color: var(--ink); font-weight: 600; }
.folder__open {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--bg);
  background: var(--ink);
  padding: 0.5rem 0.9rem;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.folder__open:hover { background: var(--accent, var(--orange)); transform: translateX(2px); }

/* ───────────── patina decorations ───────────── */
.patina { position: absolute; pointer-events: none; z-index: 2; }

.patina--coffee {
  top: 8%; right: 10%;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
      rgba(120,86,40,0) 52%, rgba(120,86,40,.22) 56%, rgba(95,66,28,.30) 63%,
      rgba(120,86,40,.12) 70%, rgba(120,86,40,0) 74%);
  mix-blend-mode: multiply;
  transform: rotate(8deg) scale(1.05);
  opacity: 0.8;
}

.patina--clip {
  top: -10px; right: 26px;
  width: 16px; height: 46px;
  border: 2.5px solid rgba(110,110,118,.7);
  border-radius: 9px;
  background: linear-gradient(100deg, rgba(255,255,255,.5), rgba(150,150,156,.2));
  box-shadow: 1px 1px 1px rgba(0,0,0,.2);
  transform: rotate(-4deg);
  z-index: 4;
}
.patina--clip::after {
  content: '';
  position: absolute; left: 3px; right: 3px; top: 8px; bottom: 14px;
  border: 2px solid rgba(110,110,118,.55);
  border-radius: 6px;
}

.patina--tape {
  width: 74px; height: 26px;
  background: linear-gradient(180deg, rgba(228,222,196,.55), rgba(214,206,176,.5));
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  opacity: 0.85;
}
.patina--tape::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 3px, rgba(255,255,255,0) 3px 6px);
}
.patina--tape-nw { top: 14px; left: -16px; transform: rotate(-38deg); }
.patina--tape-ne { top: 14px; right: -16px; transform: rotate(38deg); }

.patina--foxing {
  bottom: 12%; left: 8%;
  width: 90px; height: 70px;
  background:
    radial-gradient(circle at 20% 30%, rgba(120,86,40,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 50%, rgba(120,86,40,.15) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 70%, rgba(120,86,40,.20) 0 1.5px, transparent 3px),
    radial-gradient(circle at 80% 20%, rgba(120,86,40,.14) 0 1.5px, transparent 3px),
    radial-gradient(circle at 30% 90%, rgba(120,86,40,.16) 0 2px, transparent 3px);
  mix-blend-mode: multiply;
  opacity: 0.7;
}

.patina--stamp {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--red);
  border: 2px solid var(--red);
  border-radius: 3px;
  padding: 4px 8px;
  opacity: 0.34;
  mix-blend-mode: multiply;
  text-transform: uppercase;
}
.patina--stamp-nw { top: 18px;  left: 16px;  transform: rotate(-13deg); }
.patina--stamp-se { bottom: 58px; right: 16px; transform: rotate(-8deg); }

/* ───────────── reduced motion: present folders slightly ajar ───────── */
@media (prefers-reduced-motion: reduce) {
  .folder { transition: none; }
  .folder__hint { opacity: 1; }
}

/* ───────────── responsive ───────────── */
@media (max-width: 620px) {
  /* the desk uses margin:0 auto, which in the flex-column .page shrinks it to
     content width; the single 1fr column then collapses because the folders'
     content is all absolutely positioned. Force full width so it stays usable. */
  .dossier-hero, .desk, .dossier-foot { width: 100%; align-self: stretch; }
  .desk {
    grid-template-columns: minmax(0, 1fr);
    gap: 3.5rem;
  }
  .folder { --rot: 0deg !important; --dy: 0px !important; max-width: 340px; margin: 0 auto; width: 100%; }
}

/* ════════════════════════════ ESSAY DOCUMENT ════════════════════════ */
.essay { padding-bottom: var(--space-3xl); }

.essay-masthead {
  position: relative;
  max-width: var(--essay-measure);
  margin: 0 auto;
  padding: calc(var(--space-5xl) + 20px) var(--gutter) var(--space-lg);
}

.essay-filing {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  padding-bottom: 0.9rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid rgba(26,26,26,.12);
}
.essay-doc[data-accent="orange"] { --accent: var(--orange); }
.essay-doc[data-accent="blue"]   { --accent: var(--blue); }
.essay-doc[data-accent="red"]    { --accent: var(--red); }
.essay-doc[data-accent="ink"]    { --accent: var(--ink); }
.essay-doc[data-accent="orange"] .essay-filing__code { color: var(--orange); }
.essay-doc[data-accent="blue"]   .essay-filing__code { color: var(--blue); }
.essay-doc[data-accent="red"]    .essay-filing__code { color: var(--red); }
.essay-doc[data-accent="ink"]    .essay-filing__code { color: var(--ink); }

.essay-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink);
  position: relative;
  margin-bottom: 1.1rem;
}
.essay-title::before {
  content: attr(data-text);
  position: absolute;
  top: 2px; left: 4px;
  opacity: 0.07;
  z-index: -1;
}
.essay-doc[data-accent="orange"] .essay-title::before { color: var(--orange); }
.essay-doc[data-accent="blue"]   .essay-title::before { color: var(--blue); }
.essay-doc[data-accent="red"]    .essay-title::before { color: var(--red); }
.essay-doc[data-accent="ink"]    .essay-title::before { color: var(--orange); }

.essay-dek {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.5;
  color: var(--grey);
  margin-bottom: 1.8rem;
}

.essay-dateline {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(26,26,26,.12);
}
.essay-dateline div { display: flex; flex-direction: column; gap: 0.25rem; }
.essay-dateline dt {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.essay-dateline dd {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink);
}

/* body prose */
.essay-body {
  max-width: var(--essay-measure);
  margin: 0 auto;
  padding: var(--space-md) var(--gutter) 0;
}
.essay-body > p {
  font-family: var(--font-body);
  font-size: 1.12rem;
  line-height: 1.72;
  color: rgba(26,26,26,.88);
  margin-bottom: 1.45rem;
}
.essay-body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 0.78;
  float: left;
  margin: 0.32rem 0.6rem 0 0;
  color: var(--ink);
}

.essay-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ink);
  margin: 2.8rem 0 1.2rem;
  padding-top: 0.4rem;
}
.essay-h2::before {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 1rem;
  background: var(--orange);
}
.essay-doc[data-accent="blue"] .essay-h2::before { background: var(--blue); }
.essay-doc[data-accent="red"]  .essay-h2::before { background: var(--red); }
.essay-doc[data-accent="ink"]  .essay-h2::before { background: var(--ink); }

.essay-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(212,98,43,.5);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s ease;
}
.essay-body a:hover { text-decoration-color: var(--orange); }

.essay-body code {
  font-family: var(--font-mono);
  font-size: 0.84em;
  background: rgba(26,26,26,.06);
  padding: 0.12em 0.4em;
  border-radius: 3px;
  color: #3A3526;
}

.essay-rule {
  border: none;
  height: 1px;
  background: none;
  text-align: center;
  margin: 2.8rem auto;
  max-width: 200px;
  position: relative;
}
.essay-rule::before {
  content: '◆';
  color: var(--grey);
  font-size: 0.6rem;
  opacity: 0.6;
}

/* image plates — silkscreen treatment */
.essay-plate {
  margin: 2.6rem 0;
}
.essay-plate img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  mix-blend-mode: multiply;
  filter: contrast(1.05) saturate(0.86);
  box-shadow: 6px 6px 0 rgba(26,26,26,.06), 0 2px 14px rgba(0,0,0,.1);
}
.essay-figcaption {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--grey);
  margin-top: 0.85rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(26,26,26,.14);
}
.essay-figcaption em { font-style: normal; color: rgba(26,26,26,.7); }
.essay-figcaption a { font-style: normal; }

/* authorial asides (markdown *italic* paragraphs that are not captions) */
.essay-aside {
  font-family: var(--font-body);
  font-size: 0.96rem;
  line-height: 1.62;
  color: var(--grey);
  font-style: italic;
  margin: 1.6rem 0;
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 3px solid var(--orange);
}
.essay-doc[data-accent="blue"] .essay-aside { border-left-color: var(--blue); }
.essay-doc[data-accent="red"]  .essay-aside { border-left-color: var(--red); }
.essay-aside em { font-style: normal; color: var(--ink); }

/* prev / next — pull-the-next-file-from-the-drawer cards (dossier language) */
.essay-nav {
  max-width: var(--essay-measure);
  margin: var(--space-3xl) auto 0;
  padding: var(--space-xl) var(--gutter) 0;
  border-top: 1px solid rgba(26,26,26,.12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.essay-nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-decoration: none;
  padding: 1.15rem 1.25rem 1.25rem;
  background: var(--paper);
  border: 1px solid rgba(120,96,46,.30);
  border-radius: 3px;
  box-shadow: 2px 3px 0 rgba(26,26,26,.05);
  overflow: hidden;
  transform: rotate(-0.5deg);
  transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1),
              box-shadow 0.3s ease, border-color 0.3s ease;
}
/* paper grain on each card, like the folder covers */
.essay-nav__link::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 200px 200px;
  opacity: 0.07;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* accent spine — left for prev, right for next */
.essay-nav__link::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent, var(--orange));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.essay-nav__link--prev::after { left: 0; }
.essay-nav__link--next {
  text-align: right;
  align-items: flex-end;
  transform: rotate(0.5deg);
}
.essay-nav__link--next::after { right: 0; }
.essay-nav__link--empty {
  visibility: hidden;
  background: none;
  border: none;
  box-shadow: none;
}
.essay-nav__link:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 4px 6px 0 rgba(26,26,26,.09);
  border-color: var(--accent, var(--orange));
}
.essay-nav__link:hover::after { opacity: 0.85; }
.essay-nav__link:focus-visible {
  outline: none;
  border-color: var(--accent, var(--orange));
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent, var(--orange));
}
.essay-nav__dir {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, var(--grey));
  position: relative;
  z-index: 1;
}
.essay-nav__title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.18;
  position: relative;
  z-index: 1;
  transition: color 0.2s ease;
}
.essay-nav__link:hover .essay-nav__title { color: var(--accent, var(--orange)); }

@media (max-width: 540px) {
  .essay-body > p { font-size: 1.04rem; }
  .essay-nav { grid-template-columns: 1fr; }
  .essay-nav__link, .essay-nav__link--next {
    text-align: left;
    align-items: flex-start;
    transform: rotate(0deg);
  }
  .essay-nav__link--next { transform: rotate(0deg); }
  .essay-nav__link--next::after { right: auto; left: 0; }
  .essay-nav__link--empty { display: none; }
}


/* ─── essay reading: more generous + dynamic on desktop ─── */
@media (min-width: 1080px) {
  :root { --essay-measure: 800px; }
  .essay-body > p { font-size: 1.2rem; line-height: 1.8; }
  .essay-body > p:first-of-type::first-letter { font-size: 4rem; }
  /* image plates break out wider than the text for rhythm */
  .essay-plate {
    width: min(1060px, 92vw);
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .essay-figcaption { max-width: 680px; }
  .essay-h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-top: 3.2rem; }
}
@media (min-width: 1500px) {
  :root { --essay-measure: 840px; }
}

/* ─── scattered color-wash layers (sit behind all content) ─── */
.dossier-page { position: relative; overflow-x: clip; }
.dossier-hero, .desk, .dossier-foot { position: relative; z-index: 1; }
.essay { position: relative; overflow-x: clip; }
.essay-masthead, .essay-body, .essay-nav { position: relative; z-index: 1; }
.dossier-washes, .essay-washes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.season-sub { position: relative; z-index: 1; }

/* ═══════════════════════════ THE SEASON ════════════════════════════════
   Live files are open, readable folders. Developing files are greyed
   "developing into focus" folders showing title + scheduled date. Both
   states ship in the markup; these rules show the right one per [data-status],
   so JS only flips the attribute when a date passes (no rebuild needed).
   ════════════════════════════════════════════════════════════════════ */

/* show the active variant for each status, hide the other */
.folder[data-status="live"] .folder__foot--dev,
.folder[data-status="live"] .folder__face-meta--dev,
.folder[data-status="live"] .folder__hint--dev { display: none; }
.folder[data-status="developing"] .folder__foot--live,
.folder[data-status="developing"] .folder__face-meta--live,
.folder[data-status="developing"] .folder__hint--open { display: none; }

/* the undeveloped print: desaturated, cooler, the title not yet resolved */
.folder[data-status="developing"] { cursor: default; }
.folder[data-status="developing"] .folder__cover {
  filter: grayscale(0.72) brightness(1.03) contrast(0.96);
}
.folder[data-status="developing"] .folder__face { opacity: 0.74; }
.folder[data-status="developing"] .folder__face-title { color: rgba(42, 36, 22, 0.52); }
.folder[data-status="developing"] .folder__tab b { color: rgba(42, 36, 22, 0.5); }
/* the scheduled date carries the accent so the eye still finds it */
.folder__face-meta--dev { color: var(--accent, var(--ink)); font-weight: 600; }
.folder__hint--dev { color: rgba(42, 36, 22, 0.5); }

/* developing folder's open sheet: scheduled note + subscribe nudge */
.folder__dates--scheduled { color: var(--grey); }
.folder__dates--scheduled b { color: var(--accent, var(--ink)); }
.folder__subscribe-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--accent, var(--ink));
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 0.2s ease;
}
.folder__subscribe-link:hover { opacity: 0.7; }

/* the motion reward — a print resolving into focus when a date passes between
   visits. Only fires on a *newly* released file (see essays.js). */
@keyframes developIntoFocus {
  0%   { filter: grayscale(1) blur(7px) brightness(1.22); }
  100% { filter: grayscale(0) blur(0)   brightness(1); }
}
.folder.is-revealing .folder__cover {
  animation: developIntoFocus 1.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
@media (prefers-reduced-motion: reduce) {
  .folder.is-revealing .folder__cover { animation: none; }
}

/* ─── hero season line + subscribe CTA ─── */
.dossier-hero__season {
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--grey);
}
.dossier-hero__season-next b { color: var(--ink); font-weight: 600; }

/* a prominent, tactile button — burnt-orange offset reads as misregistration */
.dossier-hero__season-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg);
  background: var(--blue);
  padding: 0.8rem 1.6rem;
  border-radius: 3px;
  box-shadow: 3px 3px 0 var(--orange);
  transition: background 0.2s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.dossier-hero__season-cta:hover {
  background: var(--orange);
  box-shadow: 3px 3px 0 var(--blue);
}
.dossier-hero__season-cta:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--orange);
}
.dossier-hero__season-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--orange);
}

/* ─── the subscribe band inside the season ─── */
.season-sub {
  max-width: var(--container-max);
  margin: var(--space-3xl) auto 0;
  padding: 0 var(--gutter);
}
.season-sub__inner {
  position: relative;
  background:
    linear-gradient(158deg, var(--manila, #E9DEC4) 0%, var(--manila-deep, #E0D3B4) 100%);
  border-radius: 4px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 5px rgba(120, 96, 46, 0.18);
  overflow: hidden;
}
.season-sub__inner::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 200px 200px;
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.season-sub__inner > * { position: relative; z-index: 1; }
.season-sub__kicker {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--orange);
  margin-bottom: 0.7rem;
}
.season-sub__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: #2A2416;
  margin-bottom: 0.6rem;
}
.season-sub__lede {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(42, 36, 22, 0.78);
  max-width: 52ch;
  margin-bottom: 1.4rem;
}

/* ═══════════════════════════ SUBSCRIBE ═════════════════════════════════
   One component, reused in the season band, on each essay, and (via #subscribe)
   from the hero CTA. subscribe.js sets [data-state] for the visual states. */
.subscribe { max-width: 32rem; }
.subscribe__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--grey);
  margin-bottom: 0.55rem;
}
.subscribe__row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.subscribe__input {
  flex: 1 1 14rem;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white, #FAFAF7);
  border: 1px solid rgba(26, 26, 26, 0.22);
  border-radius: 3px;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.subscribe__input::placeholder { color: rgba(26, 26, 26, 0.35); }
.subscribe__input:focus-visible {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(212, 98, 43, 0.18);
}
.subscribe__btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--blue);
  border: none;
  border-radius: 3px;
  padding: 0.7rem 1.3rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}
.subscribe__btn:hover { background: var(--orange); }
.subscribe__btn:active { transform: translateY(1px); }
.subscribe__btn:disabled { opacity: 0.6; cursor: progress; }
.subscribe__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--orange);
}
.subscribe__status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  min-height: 1.2em;
  margin-top: 0.7rem;
  color: var(--grey);
}
.subscribe[data-state="error"]   .subscribe__status { color: var(--red); }
.subscribe[data-state="success"] .subscribe__status { color: var(--blue); }
.subscribe[data-state="error"]   .subscribe__input  { border-color: var(--red); }
.subscribe__fineprint {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: rgba(26, 26, 26, 0.4);
  margin-top: 0.5rem;
}

/* essay-end subscribe band */
.essay-subscribe {
  max-width: var(--container-narrow);
  margin: var(--space-3xl) auto 0;
  padding: var(--space-2xl) 0 0;
  border-top: 1px solid rgba(26, 26, 26, 0.12);
}
.essay-subscribe__kicker {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--orange);
  margin-bottom: 0.6rem;
}
.essay-subscribe__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 0.55rem;
}
.essay-subscribe__lede {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--grey);
  max-width: 48ch;
  margin-bottom: 1.4rem;
}