/* EMET · below the fold. A ledger on the clay flood: hairline rules instead of boxes, Roman numerals in Cardo
 * for the six places in the mouth, Inter 700 for every figure, white cards only for instruments (the sheet of
 * the book, tomorrow's word, the split), one second shader strip and one parchment band. Colours: tokens.css. */

.sec { position: relative; border-top: 1px solid var(--hairline); padding-block: clamp(72px, 9vw, 128px); }
.sec__in { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { display: flex; align-items: baseline; gap: 12px; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-75); }
.eyebrow b { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0; color: var(--ink); }
.h2 { margin: 18px 0 0; max-width: 17ch; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.3rem, 4.6vw, 4.25rem); line-height: 1.02; letter-spacing: -0.02em; }
.h2 em { font-style: normal; color: var(--ink-75); }
.sec__text { max-width: 34rem; margin: 22px 0 0; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--ink-92); }
.sec__text--lg { font-size: 16px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease-out, transform 700ms ease-out; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- I. the book: the dashboard, right under the first screen ---------- */
.book__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.book__state { margin: 0; font-size: 13px; color: var(--ink-75); }
.sheet { margin-top: 40px; padding: clamp(18px, 3vw, 32px); border-radius: 22px; background: var(--surface); color: var(--dark); box-shadow: var(--shadow-float); }
.sheet__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 28px; }
.sheet__stats .stat { padding: 0 18px; border-left: 1px solid var(--slate-hairline); }
.sheet__stats .stat:first-child { padding-left: 0; border-left: 0; }
.sheet__stats dd { margin-top: 6px; font-size: clamp(1.45rem, 2.3vw, 2rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; }
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--slate-hairline); }
.tab { padding: 10px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500; color: var(--dark-muted); }
.tab[aria-selected="true"] { border-color: var(--brand); color: var(--dark); }
.sheet__rehearsal { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(var(--brand-rgb) / 0.07); font-size: 13px; font-weight: 500; color: var(--brand-deep); }
.sheet__table { min-height: 180px; max-height: 620px; overflow: auto; overscroll-behavior: contain; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tbl th { position: sticky; top: 0; z-index: 1; padding: 12px 12px 8px 0; background: var(--surface); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-align: left; text-transform: uppercase; color: var(--dark-muted); }
.tbl td { padding: 12px 12px 12px 0; border-top: 1px solid var(--slate-hairline); vertical-align: top; }
.tbl .r { text-align: right; padding-right: 0; }
.tbl th.r + th.r, .tbl td.r + td.r { padding-left: 16px; }
.tbl .muted { color: var(--dark-muted); }
.tbl .nowrap { white-space: nowrap; }
.tbl .num { font-weight: 700; }
.tbl .clip { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dark-80); }
.tbl .what { font-weight: 600; }
.tbl .what--burn::before, .tbl .what--airdrop::before, .tbl .what--pay::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 999px; background: var(--brand); vertical-align: 1px; }
.tbl .what--airdrop::before { background: var(--brand-2); }
.tbl .what--pay::before { background: transparent; border: 1.5px solid var(--brand); width: 5px; height: 5px; }
.tbl .kind { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.tbl .line { color: var(--dark-80); line-height: 1.5; }
.tbl--journal td:first-child { width: 4.5rem; }
.tbl--journal td:nth-child(2) { width: 7rem; }
.empty { display: grid; justify-items: start; gap: 6px; padding: 36px 0 20px; }
.empty strong { font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.empty span { max-width: 34rem; font-size: 14px; color: var(--dark-60); }
.empty__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.empty__cta { padding: 10px 16px; border-radius: 12px; background: var(--brand); color: var(--ink); font-size: 14px; font-weight: 600; }
.empty__more { padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(var(--brand-rgb) / 0.3); color: var(--brand); font-size: 14px; font-weight: 600; }
.empty__more:hover { background: rgba(var(--brand-rgb) / 0.06); }
.stat dd.is-empty { color: var(--dark-muted); font-weight: 500; }
.sheet__note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--slate-hairline); font-size: 13px; color: var(--dark-muted); }
.sheet__wallet { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--dark); text-decoration: none; border-bottom: 1px solid currentColor; }
.tbl a.tx { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.tbl a.tx:hover { border-bottom-style: solid; }

/* ---------- II. the mouth: the golem at its stage and six places ---------- */
.mouth__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
.mouth__text { max-width: 30rem; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--ink-92); }
.mouth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; margin-top: 56px; }
.golem { position: sticky; top: 88px; margin: 0; }
.golem__stage { position: relative; aspect-ratio: 512 / 412; }
/* the golem stands in the light of its own parchment */
.golem__stage::before { content: ""; position: absolute; inset: 4% 8% -6%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 55%, rgba(255, 233, 168, 0.22), rgba(255, 233, 168, 0.06) 55%, transparent 72%); }
.golem__stage::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -2%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.38), transparent); }
.golem__stage img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; }
.golem__met { position: absolute; inset: auto 0 38%; z-index: 2; margin: 0; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 7vw, 5.5rem); letter-spacing: 0.04em; color: var(--ink); opacity: 0; transition: opacity 400ms; }
.golem__met s, .slots__met-word s { text-decoration-thickness: 0.08em; color: var(--ink-55); }
.golem.is-met img { filter: grayscale(0.85) brightness(0.55); }
.golem.is-met .golem__met { opacity: 1; }
.golem__marks { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.golem__marks i { width: 26px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ink-55); }
.golem__marks i.is-on { border-color: var(--glow); background: var(--glow); box-shadow: 0 0 14px rgba(255, 233, 168, 0.5); }
.golem figcaption { display: grid; justify-items: center; gap: 4px; margin-top: 16px; text-align: center; }
.golem figcaption strong { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.golem figcaption span { max-width: 26rem; font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--ink-75); }
.golem__tag { margin-top: 8px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--glass); font-size: 12px !important; color: var(--ink-92) !important; }

.slots { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hairline); }
.slot { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px 20px; align-items: start; padding: 20px 0; border-top: 1px solid var(--hairline); }
.slot__num { align-self: start; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.1; }
.slot__body { min-width: 0; }
.slot h3 { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.2; }
.slot__body p { margin: 4px 0 0; font-size: 13px; font-weight: 500; color: var(--ink-75); }
.slot__life { height: 4px; margin-top: 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.slot__life i { display: block; height: 100%; border-radius: 4px; background: var(--glow); }
.slot__nums { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 18px; margin: 0; }
.slot__nums div { display: grid; gap: 3px; }
.slot__nums dt { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-75); }
.slot__nums dd { margin: 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slot__code { grid-column: 3; grid-row: 1; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--glass); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background-color 200ms; }
.slot__code:hover { background: var(--glass-hover); }
.slot--empty { align-items: center; }
.slot--empty .slot__num, .slot--empty h3 { color: var(--ink-55); }
.slot--empty .slot__body p { color: var(--ink-55); }
.slot__scroll { color: var(--ink-55); }
.slot__scroll svg { display: block; width: 56px; height: 40px; }
.slot.is-off { opacity: 0.4; }
.slots__met { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; margin-bottom: 24px; padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(255, 233, 168, 0.4); background: rgba(255, 233, 168, 0.06); }
.slots__met-word { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: 0.04em; }
.slots__met p:last-child { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink-92); }

/* ---------- III. the queue: four rules and tomorrow's word ---------- */
.machine { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.rules { list-style: none; margin: 36px 0 0; padding: 0; }
.rule { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-top: 1px solid var(--hairline); }
.rule:last-child { border-bottom: 1px solid var(--hairline); }
.rule__num { font-family: var(--font-sans); font-weight: 700; font-size: 28px; line-height: 1; color: var(--ink-75); }
.rule h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.rule p { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.55; color: var(--ink-75); }
.machine__stage { margin: 0; position: sticky; top: 88px; }

.inst { overflow: hidden; border-radius: 20px; background: var(--surface); color: var(--dark); box-shadow: var(--shadow-float); }
.inst__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--slate-hairline); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark-muted); }
.inst__live { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); }
.inst__live:empty { display: none; }
.inst__live::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.inst__stage { display: grid; gap: 20px; padding: 22px; }
.inst__stage > * { min-width: 0; }
.m-label { margin: 0 0 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-muted); }

.qmeta { margin: 0; font-size: 13px; font-weight: 600; color: var(--dark-60); }
.qtitle { margin: 6px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1.08; letter-spacing: -0.01em; }
.qtimer { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 16px; padding: 16px 18px; border-radius: 14px; background: rgba(var(--brand-rgb) / 0.06); }
.qtimer > span:first-child { grid-column: 1 / -1; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-muted); }
.qclock { font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--brand); }
.qat { font-size: 13px; font-weight: 500; color: var(--dark-60); }
.qthesis { margin: 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--brand-2); }
.qthesis span { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-muted); }
.qthesis p { margin: 6px 0 0; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--dark); }
.qthesis p::before { content: "“"; }
.qthesis p::after { content: "”"; }
.qrows { display: grid; margin: 0; border-top: 1px solid var(--slate-hairline); }
.qrow { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--slate-hairline); font-size: 13.5px; }
.qrow dt { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark-muted); padding-top: 2px; }
.qrow dd { margin: 0; min-width: 0; color: var(--dark-80); overflow-wrap: anywhere; }
.qmono, .qlink { font-family: var(--font-mono); font-size: 12.5px; color: var(--dark); }
.qlink { border-bottom: 1px dotted currentColor; }
.qsmall { display: block; margin-top: 2px; font-size: 12px; color: var(--dark-muted); }
.qsmall:empty { display: none; }
.qcheck { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.qcheck::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--dark-muted); }
.qcheck.is-ok { color: var(--up); }
.qcheck.is-ok::before { background: var(--up); }
.qcheck.is-bad { color: var(--down); }
.qcheck.is-bad::before { background: var(--down); }
.qcode summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--brand); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.qcode summary::-webkit-details-marker { display: none; }
.qcode summary i { position: relative; width: 12px; height: 12px; }
.qcode summary i::before, .qcode summary i::after { content: ""; position: absolute; top: 5px; left: 0; width: 12px; height: 1.5px; background: currentColor; transition: transform 250ms; }
.qcode summary i::after { transform: rotate(90deg); }
.qcode[open] summary i::after { transform: none; }
.qcode pre { max-height: 340px; margin: 10px 0 0; padding: 14px 16px; overflow: auto; border-radius: 12px; background: #1c120d; color: #f3e6d4; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; tab-size: 2; }
.qopen { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--brand); }
.qmore p { margin: 4px 0 0; font-size: 13px; color: var(--dark-80); }
.qempty h3 { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.qempty .qclock { display: block; margin-top: 10px; }
.qempty p { margin: 8px 0 0; font-size: 14px; color: var(--dark-60); }

/* ---------- the second shader strip: a painting under one statement ---------- */
.strip { position: relative; isolation: isolate; display: flex; align-items: center; min-height: min(88vh, 800px); overflow: hidden; border-top: 1px solid var(--hairline); background: var(--brand); }
.strip__field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.strip__vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(var(--brand-rgb) / 0.88) 0%, rgba(var(--brand-rgb) / 0.55) 32%, rgba(var(--brand-rgb) / 0) 55%); }
.strip__in { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.strip__line { max-width: 12ch; margin: 18px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 1.02; letter-spacing: -0.02em; }
.strip__line em { font-style: normal; color: var(--ink-75); }

/* ---------- the parchment band: the legend under a wax seal. The one place the page leaves the flood ---------- */
.charter { position: relative; isolation: isolate; overflow: hidden; background-color: var(--paper); color: var(--dark); padding-block: clamp(64px, 8vw, 112px);
  /* paper grain + ledger ruling, drawn, not photographed */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(transparent 0 35px, var(--paper-rule) 35px 36px),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(110, 80, 40, 0.14) 100%); }
.charter::before { content: ""; position: absolute; inset: 0 auto 0 clamp(20px, 6vw, 96px); width: 1px; background: color-mix(in srgb, var(--wax) 45%, transparent); }   /* the ledger's red margin */
.charter__in { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: center; max-width: var(--container); margin-inline: auto; padding-inline: calc(var(--gutter) + clamp(12px, 3vw, 48px)) var(--gutter); }
.charter__eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wax); }
.charter__title { max-width: 18ch; margin: 16px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.3rem, 4.4vw, 4rem); line-height: 1.02; letter-spacing: -0.02em; }
.charter__title em { font-style: normal; color: var(--dark-60); }
.charter__text { max-width: 40rem; margin: 28px 0 0; font-size: 18px; font-weight: 500; line-height: 1.65; color: var(--dark-80); }
.charter__sign { margin: 28px 0 0; max-width: 40rem; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wax); }
.seal { display: block; width: 100%; max-width: 300px; height: auto; margin-inline: auto; transform: rotate(-8deg); filter: drop-shadow(0 14px 18px rgba(80, 20, 10, 0.28)); }
.seal__blob { fill: url(#wax); }
.seal__ring { fill: none; stroke: var(--wax-deep); stroke-opacity: 0.55; stroke-width: 2; }
.seal__ring--in { stroke-opacity: 0.35; stroke-width: 1.2; }
.seal__text { fill: var(--wax-deep); fill-opacity: 0.8; font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.24em; }
.seal__word { fill: var(--wax-deep); fill-opacity: 0.88; font-family: var(--font-display); font-weight: 700; font-size: 44px; }
.seal__word--hi { fill: #fff; fill-opacity: 0.16; }
.seal__shine { fill: #fff; fill-opacity: 0.16; }

/* ---------- IV. the money: the loop and the hourly split ---------- */
.token { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: 12px; }
.wheel svg { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; overflow: visible; }
.wheel__ring { fill: none; stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 1 5; }
.wheel__track { fill: none; stroke: rgba(255, 233, 168, 0.45); stroke-width: 1.5; stroke-dasharray: 2 7; }
.wheel__arrows path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wheel__dots circle { fill: var(--glow); }
.wheel__node circle { fill: var(--brand); stroke: var(--ink); stroke-width: 2; }
.wheel__node text { fill: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 21px; }
.wheel__node .wheel__sub { font-family: var(--font-sans); font-size: 12px; font-weight: 500; fill: var(--ink-75); }
.wheel__hub circle { fill: var(--ink); }
/* the split: a white card with a proportion bar and three equal columns ("табличка") */
.splitcard { margin-top: clamp(48px, 7vw, 88px); padding: clamp(20px, 3vw, 32px); border-radius: 22px; background: var(--surface); color: var(--dark); box-shadow: var(--shadow-float); }
.splitcard__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }
.splitcard__head h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; }
.splitcard__head p { max-width: 30rem; margin: 0; font-size: 14px; line-height: 1.5; color: var(--dark-60); }
.splitcard__bar { display: grid; gap: 4px; height: 14px; margin-top: 24px; transition: grid-template-columns 600ms ease-out; }
.splitcard__bar i { border-radius: 999px; background: var(--swatch); }
.splitcard .is-0 { --swatch: var(--brand); }
.splitcard .is-1 { --swatch: var(--brand-2); }
.splitcard .is-2 { --swatch: var(--brand-3); }
.splitcard__bar.is-burn .is-2 { background: repeating-linear-gradient(135deg, var(--brand-3) 0 6px, #f1dcc2 6px 12px); }
.splitcard__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.splitcard__col { display: grid; align-content: start; gap: 8px; padding: 6px 20px; border-left: 1px solid var(--slate-hairline); }
.splitcard__col:first-child { padding-left: 0; border-left: 0; }
.splitcard__col strong { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.splitcard__col strong::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--swatch); }
.splitcard__col span { font-size: 14px; line-height: 1.45; color: var(--dark-60); }
.splitcard__now { margin: 22px 0 0; padding: 12px 16px; border-radius: 12px; background: rgba(var(--brand-rgb) / 0.06); font-size: 14.5px; font-weight: 600; color: var(--dark); }
.splitcard__foot { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--slate-hairline); font-size: 13px; color: var(--dark-muted); }

/* ---------- V. what a word can do: four actions as one list ---------- */
.acts { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.acts__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hairline); }
.act { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--hairline); }
.act h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; }
.act p { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ink-92); }
.act code { padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.22); font-family: var(--font-mono); font-size: 13px; color: var(--glow); white-space: nowrap; }

/* ---------- VI. questions ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq > :first-child { position: sticky; top: 96px; }
.faq__list details { border-top: 1px solid var(--hairline); }
.faq__list details:last-child { border-bottom: 1px solid var(--hairline); }
.faq__list summary { display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; gap: 12px; align-items: baseline; padding: 20px 0; font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list .n { font-size: 15px; font-weight: 700; color: var(--ink-75); }
.faq__list summary i { position: relative; width: 14px; height: 14px; align-self: center; }
.faq__list summary i::before, .faq__list summary i::after { content: ""; position: absolute; top: 6px; left: 0; width: 14px; height: 1.5px; background: var(--ink); transition: transform 250ms ease-out; }
.faq__list summary i::after { transform: rotate(90deg); }
.faq__list details[open] summary i::after { transform: rotate(0deg); }
.faq__list details p { max-width: 44rem; margin: 0 0 22px 60px; font-size: 15px; font-weight: 500; line-height: 1.65; color: var(--ink-75); }

/* ---------- colophon ---------- */
.colophon { border-top: 1px solid var(--hairline); padding-block: clamp(56px, 8vw, 96px) 32px; }
.colophon__in { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.colophon__word { display: flex; align-items: center; gap: 0.22em; margin: 0; font-size: clamp(3.2rem, 14vw, 13rem); font-weight: 700; letter-spacing: 0.08em; line-height: 0.9; }
.colophon__word .logo { width: 0.82em; height: 0.82em; }
.colophon__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.colophon__links { display: flex; flex-wrap: wrap; gap: 24px; }
.colophon__links a, .colophon__note { margin: 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-75); }
.colophon__links a:hover { color: var(--ink); }
.colophon__ca { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; color: var(--ink-75); }
.colophon__ca code { font-family: var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.colophon__ca button { padding: 4px 10px; border: 1px solid var(--hairline); border-radius: 8px; font-size: 11px; }

@media (max-width: 1100px) {
  .sheet__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 0; }
  .sheet__stats .stat:nth-child(4) { padding-left: 0; border-left: 0; }
  .tbl .hide-md { display: none; }
}
@media (max-width: 900px) {
  .machine, .mouth__head, .mouth, .token, .faq, .acts, .charter__in { grid-template-columns: minmax(0, 1fr); }
  .machine__stage, .faq > :first-child, .golem { position: static; }
  .mouth__head { gap: 20px; }
  .mouth { margin-top: 36px; }
  .golem__stage { max-width: 420px; margin-inline: auto; }
  .strip { flex-direction: column; align-items: stretch; min-height: 0; }
  .strip__field { position: relative; inset: auto; height: min(92vw, 400px); -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
  .strip__vignette { display: none; }
  .strip__in { margin-top: -40px; padding-bottom: 64px; }
  .rules { margin-top: 28px; }
  .wheel { order: 2; }
  .seal { max-width: 200px; margin: 8px 0 0; }
  .splitcard__cols { grid-template-columns: minmax(0, 1fr); }
  .splitcard__col { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; padding: 14px 0; border-left: 0; border-top: 1px solid var(--slate-hairline); }
  .splitcard__col:first-child { border-top: 0; }
  .splitcard__col strong { min-width: 4.6ch; }
  .book__head { flex-direction: column; align-items: start; }
  .faq__list details p { margin-left: 0; }
  .act { grid-template-columns: 7rem minmax(0, 1fr); }
  .act code { grid-column: 2; justify-self: start; white-space: normal; }
}
@media (max-width: 560px) {
  .wheel__node text { font-size: 25px; }
  .wheel__node .wheel__sub { font-size: 14px; }
  .sheet__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet__stats .stat { padding: 0 12px; }
  .sheet__stats .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .sheet__stats .stat:nth-child(4) { padding-left: 12px; border-left: 1px solid var(--slate-hairline); }
  .tbl .hide-sm { display: none; }
  .tbl { font-size: 13px; }
  .tbl--journal td:nth-child(2) { width: auto; }
  .slot { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px 12px; }
  .slot__num { font-size: 22px; }
  .slot h3 { font-size: 19px; }
  .slot__nums { grid-column: 1 / -1; gap: 4px 10px; }
  .slot__nums dd { font-size: 14px; }
  .slot__code { padding: 6px 10px; }
  .qrow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .inst__stage { padding: 16px; }
  .act { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .act code { grid-column: 1; }
  .charter__text { font-size: 16.5px; }
  .colophon__row { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}