/* paper.css — ONE crafted physical PAPER object on the permanent-dark plane.
 *
 * PHYSICS LAW (docs/DESIGN.md) — encoded here, honored everywhere:
 *   • The blob is the ONLY liquid thing. Paper is the ONLY solid thing.
 *   • No glow / blur-morph / liquid behavior on paper — ever.
 *   • Paper motion is DIEGETIC: slide, stack, lift-on-hover, edge catching light, page-turn.
 *     A hover-lift is the only paper motion wired this pass.
 *
 * The sheet is real material: SVG feTurbulence fiber + a feDisplacementMap deckle edge (filter
 * defs live in index.html), layered contact + ambient shadows that FOLLOW the deckle (CSS
 * drop-shadow tracks the alpha silhouette; box-shadow would not), a hairline edge, a slight
 * lift, and a warm rim-light matching the chrome blob's light landing on the top edge. The
 * paper is lit BY the dark world — that warm rim is what fuses the two languages. */

.paper-stage {
  position: relative;
  display: flex;
  justify-content: center;
  padding: clamp(90px, 18vh, 220px) clamp(20px, 6vw, 90px);
}

/* The physical sheet. position:relative; its ::before is the deckled, shadowed, rim-lit body. */
.paper {
  position: relative;
  width: min(600px, 100%);
  padding: clamp(36px, 5vw, 60px);
  isolation: isolate; /* contain the fiber's multiply so it can't darken the dark plane behind */
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Sheet body: cream stock + a warm top rim-light, deckled and shadowed, BEHIND the content. */
.paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 2px;
  background:
    /* warm rim-light — POSITIONAL. --rim-angle aims the warm band at the edge facing the blob;
       --rim-strength scales it by proximity. Both are set per panel by paper-rim.js (on layout +
       resize). Defaults give a gentle top rim before JS runs. Hue echoes the blob's warm key. */
    linear-gradient(
      var(--rim-angle, 180deg),
      rgb(255 219 168 / calc(var(--rim-strength, 0.5) * 58%)) 0%,
      rgb(255 219 168 / 0) 22%
    ),
    var(--paper);
  /* deckle edge first, then hairline + tight contact + soft ambient shadow — all follow it */
  filter:
    url(#paper-deckle)
    drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.45))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55))
    drop-shadow(0 26px 46px rgba(0, 0, 0, 0.5));
}

/* Fine paper fiber — held just inside the deckle so it never spills past the cut edge. */
.paper__fiber {
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: 2px;
  filter: url(#paper-fiber);
  opacity: 0.13;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Lift on hover — diegetic (the sheet rises off the surface); the shadow deepens to match. */
.paper:hover {
  transform: translateY(-6px);
}
.paper:hover::before {
  filter:
    url(#paper-deckle)
    drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.45))
    drop-shadow(0 3px 5px rgba(0, 0, 0, 0.55))
    drop-shadow(0 38px 64px rgba(0, 0, 0, 0.5));
}

/* ---- type specimen: ONE real cream-build content block (the v1 masthead), brand tokens ---- */
.paper__content {
  position: relative; /* paints above ::before + fiber */
}
.paper__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
}
.paper__head {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: lowercase;
  letter-spacing: -0.045em;
  line-height: 0.92;
  font-size: clamp(34px, 4.6vw, 58px);
  color: var(--ink-on-cream);
}
.paper__head em {
  font-family: var(--font-break);
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}
.paper__stand {
  margin: 24px 0 0;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.5;
  color: var(--ink-on-cream-dim);
  max-width: 42ch;
}
.paper__foot {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 30px;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-on-cream-dim);
}
/* The live-dot is FLAT on paper — no glow. Glow belongs to the liquid/computational world,
   not to a solid object. (Same dot glows in the dark hero; here it is just ink.) */
.paper__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
}

/* ============================================================================
 * CHAPTER PRIMITIVES — the content patterns carried INSIDE a paper object.
 * All ink-on-cream, hairline rules (never shadows — that is the cream-build law),
 * mono labels + lowercase display. No new material, no glow: these are just type
 * and rules set onto the same crafted sheet above. Carried from the v1 cream
 * specimen (builds/cream) so the editorial voice is exact.
 * ========================================================================== */

/* Wider sheet for grids + ledgers; the default .paper (600px) stays for text. */
.paper--wide {
  width: min(920px, 100%);
}

/* Top editorial meta row — the masthead voice (studio / place / edition). */
.paper__meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 clamp(30px, 5vw, 54px);
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-on-cream-dim);
  line-height: 1.7;
}
.paper__meta b {
  color: var(--ink-on-cream);
  font-weight: 500;
}
.paper__meta > :last-child {
  text-align: right;
}

/* Hairline divider — rules, not shadows. */
.paper__rule {
  height: 1px;
  margin: clamp(28px, 4vw, 44px) 0;
  border: 0;
  background: var(--rule-on-cream);
}

/* AT A GLANCE — a small grid of discipline cells, hairline-separated. */
.glance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: clamp(26px, 4vw, 40px);
  background: var(--rule-on-cream);
  border: 1px solid var(--rule-on-cream);
}
.glance__cell {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 138px;
  padding: 22px 20px;
  background: var(--paper);
}
.glance__n {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
}
.glance__cell h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  line-height: 1.05;
  color: var(--ink-on-cream);
}
.glance__cell p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-on-cream-dim);
}
@media (max-width: 760px) {
  .glance {
    grid-template-columns: 1fr;
  }
}

/* LEDGER — numbered rows: process movements, cabinet specimens. */
.ledger {
  margin-top: clamp(24px, 4vw, 40px);
  border-top: 1px solid var(--rule-on-cream);
}
.ledger__row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: clamp(14px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(18px, 2.6vw, 28px) 0;
  border-bottom: 1px solid var(--rule-on-cream);
}
.ledger__no {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
}
.ledger__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 44px);
  letter-spacing: -0.025em;
  text-transform: lowercase;
  line-height: 1;
  color: var(--ink-on-cream);
}
.ledger__title em {
  font-family: var(--font-break);
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}
.ledger__body {
  margin: 8px 0 0;
  max-width: 48ch;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-on-cream-dim);
}
/* Cabinet variant: a serif specimen initial, then title, then kind on the right. */
.ledger__row--work {
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
}
.ledger__glyph {
  font-family: var(--font-break);
  font-style: italic;
  font-size: 26px;
  line-height: 1;
  color: var(--signal);
}
.ledger__kind {
  justify-self: end;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-on-cream-dim);
}
@media (max-width: 680px) {
  .ledger__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .ledger__row--work {
    grid-template-columns: auto 1fr;
  }
  .ledger__kind {
    justify-self: start;
    grid-column: 2;
  }
}

/* VOICE — do / do-not columns + a pulled quote. */
.dd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  margin-top: clamp(24px, 4vw, 40px);
}
.dd__col h4 {
  margin: 0 0 14px;
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.dd__col--do h4 {
  color: var(--signal);
}
.dd__col--dont h4 {
  color: var(--ink-on-cream-dim);
}
.dd__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dd__col li {
  position: relative;
  padding: 8px 0 8px 18px;
  border-top: 1px solid var(--rule-on-cream);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-on-cream-dim);
}
.dd__col li:first-child {
  border-top: 0;
}
.dd__col li::before {
  position: absolute;
  left: 0;
  top: 8px;
  font-family: var(--font-label);
  font-size: 9px;
}
.dd__col--do li::before {
  content: "+";
  color: var(--signal);
}
.dd__col--dont li::before {
  content: "—";
  color: var(--ink-on-cream-dim);
}
.dd__col li em {
  font-family: var(--font-break);
  font-style: italic;
  color: var(--signal);
}
@media (max-width: 680px) {
  .dd {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
.pull {
  margin: clamp(30px, 5vw, 52px) 0 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-transform: lowercase;
  color: var(--ink-on-cream);
}
.pull em {
  font-family: var(--font-break);
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}

/* Cabinet caption — the specimen number, set under its title. */
.ledger__cap {
  display: block;
  margin-top: 5px;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-on-cream-dim);
}

/* Any italic break inside paper content is serif + signal (the cream-build em
   rule, scoped to paper so it can't leak onto the dark world). */
.paper__content em {
  font-family: var(--font-break);
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}

/* ----------------------------------------------------------------------------
 * REVEAL — diegetic slide-in / typesetting, driven by paper-reveal.js (an
 * IntersectionObserver toggling .is-in; NO rAF — the seam owns the only loop).
 * Text sheets carry data-reveal on the stage (the whole sheet slides in);
 * grid/ledger sheets carry data-reveal on their content items (the ink sets
 * itself top-down, staggered). The blob stays liquid; paper only slides.
 * -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.85s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Reduced motion: the sheet just sits — no lift, no reveal motion. Paper panels
   simply present in place (spec). */
@media (prefers-reduced-motion: reduce) {
  .paper {
    transition: none;
  }
  .paper:hover {
    transform: none;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}