/* ═══════════════════════════════════════════════════════════════
   WELFY · ink and watercolour on paper, over a live workshop
   The whole first screen is a 3D room: the loom, the warp, the reed,
   the madder pot and the shelf of cut pieces. Everything drawn on
   top of it is paper and ink: hand-cut corners, hard shadows with no
   blur, one grain layer in multiply over the canvas AND over the
   page, so the WebGL and the DOM belong to the same sheet.

   DESIGN INTENT · do not "improve" these
   1. The two threads are one dye at two lightnesses, never a red and
      a green. The colour of a row is a record, not a score.
   2. Madder appears in three places only: the pot, every burned
      figure, and the shears. Nowhere else.
   3. Every card is cut by hand: eight different border-radius values
      and an offset shadow with zero blur. No soft shadow anywhere.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrumentserif-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("assets/fonts/publicsans-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --paper:    #ede4d0;
  --paper-2:  #f7f1e3;
  --paper-3:  #e2d7be;
  --ink:      #2a2622;
  --ink-2:    #5a5348;
  --ink-3:    #8a8070;
  --natural:  #cdb98f;
  --indigo:   #33496b;
  --oak:      #c0a177;
  --brass:    #b8863b;
  --madder:   #a63a2b;
  --leaf:     #6d8a4f;

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --text: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --max: 1240px;
  --gut: clamp(1rem, 2.6vw, 2.4rem);
  --fs-label: clamp(.64rem, .18vw + .6rem, .7rem);
  --cut-a: 16px 12px 18px 11px / 11px 18px 12px 16px;
  --cut-b: 12px 9px 13px 8px / 8px 13px 9px 12px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); }
[hidden] { display: none !important; }
.hidden { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg, canvas { display: block; }
button { font: inherit; color: inherit; }
code { font-family: var(--text); font-weight: 700; }
b, strong { font-weight: 700; }
::selection { background: var(--indigo); color: var(--paper-2); }
:focus-visible { outline: 2.5px solid var(--brass); outline-offset: 3px; }
.warm { color: var(--madder); }
.muted { color: var(--ink-3); }
.lab { font-size: var(--fs-label); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }

/* ─── the room, and the grain over everything ─────────────────── */

#scene { position: fixed; inset: 0; z-index: 0; background: var(--paper); }
#scene canvas { width: 100%; height: 100%; display: block; outline: none; }

/* one grain layer in multiply, so the canvas and the paper are the same sheet */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .30; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ─── the hand-cut paper: one recipe, used everywhere ─────────── */

.card, .rule-card, .figures, .panel, .tag, .btn, .mark-btn, .caption, .hints, .chip {
  background: var(--paper-2);
  border: 2px solid var(--ink);
}

/* ─── the top bar ─────────────────────────────────────────────── */

.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: max(var(--gut), env(safe-area-inset-top)) max(var(--gut), env(safe-area-inset-right)) 0 max(var(--gut), env(safe-area-inset-left));
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.brand {
  display: flex; align-items: center; gap: .6rem; text-decoration: none;
  padding: 7px 14px 9px 10px;
  border-radius: var(--cut-a);
  box-shadow: 3px 4px 0 rgba(42,38,34,.2);
  transform: rotate(-1.1deg);
}
.brand img { width: 34px; height: 34px; border-radius: 5px; }
.brand .word { display: grid; font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.brand .word em { display: none; }
.brand .word small { font-family: var(--text); font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-top: .25rem; }
.top-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 14px; cursor: pointer; text-decoration: none;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  border-radius: var(--cut-b);
  box-shadow: 2px 3px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn.icon { width: 38px; padding: 0; font-size: 1rem; }
.btn.block { width: 100%; margin-top: .8rem; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); border: 1.5px solid var(--ink); }
.wallet-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--paper-3); border: 1.5px solid var(--ink); }
#wallet.is-on .wallet-dot { background: var(--brass); }
#wallet.is-off .wallet-dot { background: var(--madder); }

/* ─── the rule, on a scrap of paper pinned over the room ──────── */

.rule-card {
  position: fixed; z-index: 10;
  left: max(var(--gut), env(safe-area-inset-left));
  top: clamp(5.4rem, 12vh, 7.6rem);
  width: min(26rem, 34vw);
  padding: .9rem 1.1rem 1rem;
  border-radius: var(--cut-a);
  box-shadow: 4px 5px 0 rgba(42,38,34,.18);
  transform: rotate(-.5deg);
}
.kicker { font-size: var(--fs-label); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.kicker b { color: var(--ink); }
.h1 { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 2.9vw, 2.7rem); line-height: 1.02; margin: .35rem 0 .5rem; }
.line { font-size: .85rem; line-height: 1.5; color: var(--ink-2); }
.line + .line { margin-top: .35rem; }
.line em { font-style: normal; font-weight: 700; color: var(--ink); }
.live { margin-top: .55rem; font-size: .72rem; color: var(--ink-3); }
.live a { color: var(--indigo); }

/* ─── the figures ─────────────────────────────────────────────── */

.figures {
  position: fixed; z-index: 10;
  right: max(var(--gut), env(safe-area-inset-right));
  top: clamp(5.4rem, 12vh, 7.6rem);
  width: clamp(168px, 15vw, 200px);
  padding: .85rem 1rem 1rem;
  display: grid; gap: .7rem;
  border-radius: var(--cut-a);
  box-shadow: 4px 5px 0 rgba(42,38,34,.18);
  transform: rotate(.6deg);
}
.fig { display: grid; gap: .05rem; }
.fig b { font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.05; }
.fig small { font-size: .68rem; color: var(--ink-3); line-height: 1.3; }
.fig.warm b { color: var(--madder); }
.fig b.is-night { color: var(--indigo); }
.gauge { --p: 0; position: relative; height: 3px; background: var(--paper-3); margin-top: .25rem; }
.gauge::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--indigo); transition: width .5s var(--ease); }
.fig-foot { font-size: .68rem; color: var(--ink-3); border-top: 1.5px dashed rgba(42,38,34,.3); padding-top: .55rem; }
.fig-foot b { color: var(--ink); }

/* ─── the floating tags ───────────────────────────────────────── */

.tags { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
.tag {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer;
  padding: 3px 10px 5px; white-space: nowrap;
  font-family: var(--display); font-size: 1.05rem; line-height: 1.15;
  border-radius: 10px 12px 9px 13px;
  box-shadow: 2px 3px 0 rgba(42,38,34,.25);
  transition: opacity .25s, background .2s;
  will-change: transform;
}
.tag::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 2px; height: 8px; background: var(--ink); }
.tag:hover { background: var(--natural); }

/* ─── the two marks, drawn exactly alike ──────────────────────── */

.marks {
  position: fixed; z-index: 12;
  left: 50%; transform: translateX(-50%);
  bottom: max(clamp(4.6rem, 11vh, 6rem), calc(env(safe-area-inset-bottom) + 4.6rem));
  display: flex; gap: .7rem;
}
.mark-btn {
  display: grid; justify-items: center; gap: .02rem;
  min-width: 120px; min-height: 52px; padding: .4rem 1rem .5rem;
  cursor: pointer; border-radius: var(--cut-b);
  box-shadow: 2px 3px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.mark-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 4px 0 var(--ink); }
.mark-btn:active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--ink); }
.mark-btn span:not(.swatch) { font-family: var(--display); font-size: 1.3rem; line-height: 1.1; }
.mark-btn small { font-size: .66rem; color: var(--ink-2); }
.swatch { width: 30px; height: 7px; border: 1.5px solid var(--ink); margin-bottom: .2rem; }
.swatch.light { background: var(--natural); }
.swatch.dark { background: var(--indigo); }

.caption {
  position: fixed; z-index: 11;
  left: 50%; transform: translateX(-50%);
  bottom: max(clamp(2.4rem, 6vh, 3.2rem), calc(env(safe-area-inset-bottom) + 2.4rem));
  width: min(52rem, calc(100vw - 2 * var(--gut)));
  padding: .45rem .9rem .5rem; text-align: center;
  font-size: .78rem; color: var(--ink-2); line-height: 1.4;
  border-radius: var(--cut-b);
  box-shadow: 2px 3px 0 rgba(42,38,34,.16);
}
.caption.is-cut { color: var(--ink); background: #F6E7C8; }
.hints {
  position: fixed; z-index: 11; left: max(var(--gut), env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid; gap: .25rem;
  padding: .45rem .7rem .5rem; font-size: .68rem; font-weight: 700; color: var(--ink-2);
  border-radius: var(--cut-b); box-shadow: 2px 2px 0 rgba(42,38,34,.14);
  transition: opacity .6s, transform .6s;
}
.hints span { display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; }
.hints.gone { opacity: 0; transform: translateY(8px); pointer-events: none; }
kbd {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  border: 1.5px solid var(--ink); border-bottom-width: 3px; border-radius: 5px;
  background: var(--paper-2); font: 700 10px/1 var(--text);
}

/* the card that appears when the weaver stands at a place */
.near-card {
  position: fixed; z-index: 13;
  left: 50%; bottom: max(clamp(8.4rem, 18vh, 10rem), calc(env(safe-area-inset-bottom) + 8.4rem));
  width: min(34rem, calc(100vw - 2 * var(--gut)));
  display: flex; align-items: center; gap: .9rem;
  padding: .6rem .7rem .65rem 1rem;
  background: var(--paper-2); border: 2px solid var(--ink);
  border-radius: var(--cut-a); box-shadow: 4px 5px 0 rgba(42,38,34,.2);
  transform: translate(-50%, 160%); visibility: hidden; opacity: 0;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .25s;
}
.near-card.on { transform: translate(-50%, 0); visibility: visible; opacity: 1; }
.near-card div { display: grid; gap: .05rem; min-width: 0; flex: 1; }
.near-card b { font-family: var(--display); font-weight: 400; font-size: 1.35rem; line-height: 1.1; }
.near-card span { font-size: .76rem; color: var(--ink-2); line-height: 1.35; }
.near-card .btn { flex: none; }
.btn.primary { background: linear-gradient(170deg, #DCC79B, #CDB98F); }
.tag.near { background: var(--natural); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.laws.small li { padding: .5rem 0; font-size: .85rem; grid-template-columns: 1.9rem minmax(0, 1fr); }
.laws.small li span { font-size: .85rem; }

/* the touch controls */
.touch { display: none; }
.jump-btn { display: none; }
@media (hover: none) and (pointer: coarse) { .jump-btn { display: inline-flex; } }
@media (hover: none) and (pointer: coarse) {
  .hints { display: none; }
  .touch { display: block; }
  .stick {
    position: fixed; z-index: 14;
    left: max(1rem, env(safe-area-inset-left)); bottom: max(1.2rem, calc(env(safe-area-inset-bottom) + 1.2rem));
    width: 108px; height: 108px; border-radius: 50%;
    border: 2.5px solid var(--ink); background: rgba(247,241,227,.72); touch-action: none;
  }
  .knob {
    position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
    border-radius: 50%; border: 2.5px solid var(--ink); background: var(--natural);
    box-shadow: 2px 3px 0 var(--ink);
  }
  .interact {
    position: fixed; z-index: 14;
    right: max(1rem, env(safe-area-inset-right)); bottom: max(2.6rem, calc(env(safe-area-inset-bottom) + 2.6rem));
    min-height: 54px; padding: 0 1.3rem;
  }
  .jump-btn {
    position: fixed; z-index: 14;
    right: max(1rem, env(safe-area-inset-right)); bottom: max(7.2rem, calc(env(safe-area-inset-bottom) + 7.2rem));
    min-height: 48px; padding: 0 1.1rem;
  }
  .marks { bottom: max(9.4rem, calc(env(safe-area-inset-bottom) + 9.4rem)); }
  .near-card { bottom: max(13rem, calc(env(safe-area-inset-bottom) + 13rem)); }
  .caption { bottom: max(7.4rem, calc(env(safe-area-inset-bottom) + 7.4rem)); }
}

/* ─── the panel ───────────────────────────────────────────────── */

.panel {
  position: fixed; z-index: 30;
  top: max(var(--gut), env(safe-area-inset-top));
  right: max(var(--gut), env(safe-area-inset-right));
  bottom: max(var(--gut), env(safe-area-inset-bottom));
  width: min(25rem, calc(100vw - 2 * var(--gut)));
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  border-radius: 20px 15px 22px 13px / 13px 22px 15px 20px;
  box-shadow: 6px 8px 0 rgba(42,38,34,.2);
  transform: translateX(calc(100% + 3rem)) rotate(1.2deg);
  transition: transform .45s var(--ease);
}
.panel.on { transform: none; }
.panel-head { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.1rem .8rem; border-bottom: 2px dashed rgba(42,38,34,.32); }
.panel-head h2 { font-family: var(--display); font-weight: 400; font-size: 1.85rem; line-height: 1.05; }
.panel-head p { font-size: .78rem; color: var(--ink-2); margin-top: .15rem; }
.panel-head .btn { margin-left: auto; flex: none; }
.panel-body { overflow-y: auto; padding: 1rem 1.1rem 1.2rem; display: grid; gap: .8rem; align-content: start; }
.panel-body p { font-size: .87rem; color: var(--ink-2); }
.panel-body .fine { font-size: .76rem; color: var(--ink-3); }
.panel-body .big { display: grid; gap: .1rem; padding: .7rem .8rem; border: 2px dashed rgba(42,38,34,.32); border-radius: 12px; }
.panel-body .big b { font-family: var(--display); font-weight: 400; font-size: 2.4rem; line-height: 1; }
.terms { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .8rem; padding: .7rem .8rem; border: 2px dashed rgba(42,38,34,.32); border-radius: 12px; font-size: .8rem; }
.terms dt { color: var(--ink-2); }
.terms dd { margin: 0; text-align: right; font-weight: 700; }
.pieces { display: grid; gap: .5rem; }
.pieces li { display: grid; gap: .04rem; padding: .55rem .7rem; border: 2px solid var(--ink); border-radius: 11px; background: rgba(255,255,255,.35); font-size: .74rem; color: var(--ink-2); }
.pieces b { font-family: var(--display); font-weight: 400; font-size: 1.1rem; color: var(--ink); }

/* ─── the loader: a warp, and a shuttle going back and forth across it ── */

.loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 1.2rem;
  background: var(--paper); transition: opacity .9s var(--ease), visibility .9s;
}
.loader p { font-family: var(--display); font-size: 1.6rem; color: var(--ink-2); }
.loader-loom { position: relative; width: 168px; height: 44px; }
.loader-loom .warp {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, var(--oak) 0 2px, transparent 2px 8px);
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.loader-loom .shuttle {
  position: absolute; top: 50%; left: 0; width: 34px; height: 12px; margin-top: -6px;
  background: var(--brass); border: 2px solid var(--ink); border-radius: 50%;
  animation: shuttle 1.1s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
@keyframes shuttle { from { transform: translateX(0) rotate(-4deg); } to { transform: translateX(134px) rotate(4deg); } }
body.is-ready .loader { opacity: 0; visibility: hidden; }

/* ─── the first screen arrives in order: card, figures, marks, caption ── */

.rule-card, .figures, .marks, .caption, .hints, body:not(.doc) .top { opacity: 0; }
body.is-ready .rule-card, body.is-ready .figures, body.is-ready .marks, body.is-ready .caption, body.is-ready .hints, body.is-ready .top {
  animation: arrive .8s var(--ease) both;
}
body.is-ready .top { animation-delay: .1s; }
body.is-ready .rule-card { animation-delay: .25s; }
body.is-ready .figures { animation-delay: .4s; }
body.is-ready .marks { animation-delay: .55s; }
body.is-ready .caption { animation-delay: .7s; }
body.is-ready .hints { animation-delay: .9s; }
@keyframes arrive { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
/* the ones that carry their own transform keep it: translate is a separate property, so the two never fight */
body.is-ready .hints.gone { animation: none; opacity: 0; }

/* a figure that changes gives one nod */
.tick { animation: tick .45s var(--ease); }
@keyframes tick { 0% { translate: 0 -3px; color: var(--brass); } 100% { translate: 0 0; } }
.caption.tick { animation: caption-tick .5s var(--ease); }
@keyframes caption-tick { 0% { opacity: .55; translate: 0 4px; } 100% { opacity: 1; translate: 0 0; } }

/* ─── everything below the room ───────────────────────────────── */

.below {
  position: relative; z-index: 5;
  margin-top: 100vh; margin-top: 100svh;
  background: var(--paper);
  border-top: 2px solid var(--ink);
  padding: 0 var(--gut) clamp(3rem, 8vh, 5rem);
}
.below > * { max-width: var(--max); margin-inline: auto; }
.sec { padding-top: clamp(2.8rem, 8vh, 5rem); }
.sec-label { display: flex; align-items: center; gap: .7rem; margin-bottom: clamp(.9rem, 2.2vh, 1.5rem); }
.sec-label .n { font-size: var(--fs-label); font-weight: 700; letter-spacing: .2em; color: var(--ink-3); }
.sec-label .rule { flex: 0 0 clamp(36px, 5vw, 64px); height: 1.5px; background: rgba(42,38,34,.22); }
.sec-label .t { font-size: var(--fs-label); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.08; max-width: 24ch; }
.lead { margin-top: clamp(.7rem, 1.6vh, 1.1rem); color: var(--ink-2); max-width: 72ch; font-size: .94rem; }

.sides { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 4vw, 3.4rem); margin-top: clamp(1.3rem, 3vh, 2rem); position: relative; }
.sides::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--paper-3); }
.side h3 { font-family: var(--display); font-weight: 400; font-size: 1.45rem; margin-bottom: .4rem; }
.side .swatch { width: 44px; height: 8px; margin-bottom: .6rem; }
.side p { color: var(--ink-2); font-size: .9rem; }

.laws { margin-top: clamp(1.3rem, 3vh, 2rem); counter-reset: law; display: grid; }
.laws li {
  counter-increment: law; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: clamp(.6rem, 1.6vw, 1.2rem); align-items: baseline;
  padding: clamp(.8rem, 2vh, 1.1rem) 0; border-top: 1px solid var(--paper-3);
}
.laws li:last-child { border-bottom: 1px solid var(--paper-3); }
.laws li::before { content: counter(law, decimal-leading-zero); font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; color: var(--ink-3); }
.laws li span { font-size: .93rem; }
.law-foot { margin-top: 1rem; font-size: .82rem; color: var(--ink-3); }
.law-foot a { color: var(--indigo); }

.plain { display: grid; gap: clamp(.8rem, 2vh, 1.2rem); margin-top: clamp(1.3rem, 3vh, 2rem); max-width: 78ch; }
.plain p { color: var(--ink-2); font-size: .93rem; }
.plain strong { color: var(--ink); }

.foot { margin-top: clamp(2.6rem, 7vh, 4rem); padding-top: clamp(1.2rem, 3vh, 1.8rem); border-top: 1px solid var(--paper-3); }
.foot-links { display: flex; gap: clamp(1rem, 2.6vw, 2.2rem); flex-wrap: wrap; margin-bottom: .9rem; }
.foot-links a { font-size: var(--fs-label); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); }
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.legal { font-size: .72rem; color: var(--ink-3); max-width: 92ch; line-height: 1.6; }

/* ─── the law page ────────────────────────────────────────────── */

.doc { background: var(--paper-2); }
.doc .below { margin-top: 0; border-top: 0; }
.doc-top {
  position: relative; max-width: var(--max); margin: 0 auto;
  padding: clamp(6rem, 13vh, 8rem) var(--gut) clamp(1.6rem, 4vh, 2.6rem);
}
.doc-top .h1 { max-width: 18ch; }
.doc-top .line { max-width: 74ch; font-size: .94rem; }
.doc-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut) clamp(3rem, 8vh, 5rem); display: grid; grid-template-columns: clamp(155px, 17vw, 220px) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
.lines { position: sticky; top: clamp(1.2rem, 4vh, 2.4rem); display: grid; gap: .25rem; }
.lines a { font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; padding: .3rem 0 .3rem .7rem; border-left: 2px solid transparent; transition: color .2s, border-color .2s; }
.lines a:hover { color: var(--ink-2); }
.lines a.active { color: var(--ink); border-left-color: var(--madder); }
.art { padding-bottom: clamp(1.5rem, 4vh, 2.4rem); border-bottom: 1px solid var(--paper-3); margin-bottom: clamp(1.5rem, 4vh, 2.4rem); scroll-margin-top: 2rem; }
.art:last-of-type { border-bottom: 0; }
.art h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1.1; margin-bottom: .55rem; }
.art h2 .n { display: block; font-family: var(--text); font-size: var(--fs-label); font-weight: 700; letter-spacing: .2em; color: var(--ink-3); margin-bottom: .3rem; }
.art p { color: var(--ink-2); font-size: .93rem; }
.art p + p { margin-top: .6rem; }
.art ul { display: grid; gap: .38rem; margin-top: .6rem; }
.art li { position: relative; padding-left: 1.3rem; color: var(--ink-2); font-size: .91rem; }
.art li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--indigo); }
.art li strong { color: var(--ink); }
.params { margin-top: .85rem; display: grid; }
.params > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--paper-3); align-items: baseline; }
.params > div:last-child { border-bottom: 1px solid var(--paper-3); }
.params dt { font-size: .88rem; color: var(--ink-2); }
.params dd { margin: 0; font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

/* ─── responsive · no horizontal overflow from 320 to 1440 ────── */

@media (max-width: 1100px) {
  .rule-card { width: min(26rem, 52vw); }
  .figures { width: 158px; }
  .fig b { font-size: 1.6rem; }
}

@media (max-width: 860px) {
  .brand .word small { display: none; }
  .chip { display: none; }
  .rule-card {
    position: static; width: auto; margin: 0; transform: none;
    border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; box-shadow: none;
    padding: 5.6rem var(--gut) .9rem;
  }
  .figures {
    position: fixed; top: auto; bottom: max(8.4rem, calc(env(safe-area-inset-bottom) + 8.4rem));
    left: max(var(--gut), env(safe-area-inset-left)); right: max(var(--gut), env(safe-area-inset-right));
    width: auto; transform: none;
    grid-template-columns: 1fr 1fr; gap: .5rem .9rem; padding: .7rem .8rem .75rem;
  }
  .fig b { font-size: 1.45rem; }
  .fig small { display: none; }
  .fig-foot { grid-column: 1 / -1; }
  .caption { bottom: max(1.1rem, calc(env(safe-area-inset-bottom) + 1.1rem)); font-size: .72rem; }
  .hints { display: none; }
  .marks { bottom: max(3.4rem, calc(env(safe-area-inset-bottom) + 3.4rem)); }
  .panel { width: auto; left: max(var(--gut), env(safe-area-inset-left)); }
  .sides { grid-template-columns: 1fr; gap: 1.5rem; }
  .sides::before { display: none; }
  .side + .side { padding-top: 1.3rem; border-top: 1px solid var(--paper-3); }
  .doc-wrap { grid-template-columns: minmax(0, 1fr); }
  .lines { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: .85rem; padding-bottom: .5rem; }
  .lines a { border-left: 0; border-bottom: 2px solid transparent; padding: .2rem 0; }
  .lines a.active { border-left-color: transparent; border-bottom-color: var(--madder); }
}

/* on a short or narrow screen the room is the top half and the words follow */
@media (max-width: 860px) {
  #scene { position: fixed; inset: 0 0 auto 0; height: 100svh; }
  .below { margin-top: 100svh; }
  /* the rule sits over the room, so the floating tags pass behind it */
  .rule-card { position: relative; top: auto; left: auto; z-index: 10; padding-top: 5.2rem; }
  .h1 { font-size: 1.7rem; }
  .line { font-size: .8rem; }
  .live { margin-top: .4rem; }
  /* the figures become one strip: four columns, and the foot under them */
  .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem .5rem; padding: .55rem .7rem .55rem; }
  .fig b { font-size: 1.2rem; }
  .fig .lab { font-size: .52rem; letter-spacing: .1em; }
  .fig-foot { padding-top: .35rem; font-size: .62rem; }
  .gauge { margin-top: .15rem; }
}

/* a phone: the whole bottom stack, in one place, so nothing lands on the stick.
   Written after both blocks above on purpose: it has to win against each of them. */
@media (hover: none) and (pointer: coarse) and (max-width: 860px) {
  .stick { width: 100px; height: 100px; }
  .knob { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .interact { bottom: max(1.2rem, calc(env(safe-area-inset-bottom) + 1.2rem)); min-height: 50px; }
  .jump-btn { bottom: max(5.2rem, calc(env(safe-area-inset-bottom) + 5.2rem)); min-height: 44px; }
  .caption { bottom: max(8.6rem, calc(env(safe-area-inset-bottom) + 8.6rem)); left: 1rem; right: 1rem; width: auto; transform: none; }
  .caption.tick { animation: caption-tick-m .5s var(--ease); }
  .marks { bottom: max(11.8rem, calc(env(safe-area-inset-bottom) + 11.8rem)); }
  .figures { bottom: max(16.2rem, calc(env(safe-area-inset-bottom) + 16.2rem)); }
  .near-card { bottom: max(16.2rem, calc(env(safe-area-inset-bottom) + 16.2rem)); }
}
@keyframes caption-tick-m { 0% { opacity: .55; translate: 0 4px; } 100% { opacity: 1; translate: 0 0; } }

@media (max-width: 460px) {
  :root { --fs-label: .62rem; }
  body { font-size: 14.5px; }
  .top { gap: 8px; }
  .btn { min-height: 36px; padding: 0 11px; font-size: .74rem; }
  .mark-btn { min-width: 108px; }
  .laws li { grid-template-columns: 2rem minmax(0, 1fr); }
}

@media (max-width: 359px) {
  .marks { flex-direction: column; }
  .figures { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover, .mark-btn:hover { transform: none; }
  /* nothing arrives: it is simply there */
  .rule-card, .figures, .marks, .caption, .hints, .top { opacity: 1; }
  .loader-loom .shuttle { left: 67px; }
}