/* ORB SCIENCE brand site prototype — design tokens and components
   Visual principles borrowed from a deep-liquid editorial style: dark liquid hero,
   alternating light sections, mono section labels, pill navigation. No assets or layout copied. */

:root {
  /* Label colours (print CMYK -> sRGB via Japan Color 2001 Coated; approximate, confirm against a proof) */
  --rich-black: #252122;          /* C50 M40 Y40 K100 */
  --royal-purple: #572c82;        /* C80 M100 Y0 K10 */
  --gold-edge: #bb9a4d; --gold-mid: #fff2af;      /* Champagne Gold C30 M40 Y80 K5 / C0 M5 Y40 K0 */
  --silver-edge: #8f9ba1; --silver-mid: #f7f7f7;  /* Platinum Silver K50 C15 / K5 */
  --matte-edge: #66767f; --matte-mid: #dde3e6;    /* Platinum Matte Grey K65 C25 / K15 C5 */
  --grad-purple: linear-gradient(135deg, #3c1d5c, var(--royal-purple) 55%, #7a49a8);
  --grad-gold: linear-gradient(120deg, var(--gold-edge), var(--gold-mid) 50%, var(--gold-edge));
  --grad-silver: linear-gradient(120deg, var(--silver-edge), var(--silver-mid) 50%, var(--silver-edge));
  --grad-matte: linear-gradient(120deg, var(--matte-edge), var(--matte-mid) 50%, var(--matte-edge));
  --abyss: #010818;
  --deep: #04143f;
  --navy: #0a2166;
  --cobalt: #1b4fe4;
  --azure: #3b82ff;
  --aqua: #8fd8ff;
  --ice: #eaf5ff;
  --frost: #e7edf2;
  --paper: #f4f7f9;
  --ink: #071230;
  --ink-2: #39466a;
  --ink-3: #56628a;
  --line-d: rgba(143, 216, 255, .22);
  --line-l: rgba(7, 18, 48, .14);
  --serif: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1240px;
  --radius: 18px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* The floating header covers the top 84px: tell the browser, so PageUp/PageDown overlap cleanly and anchors land below it */
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--abyss); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.85; letter-spacing: .02em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--azure); outline-offset: 3px; border-radius: 6px;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.35; margin: 0; letter-spacing: .04em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }
.sec { position: relative; padding: clamp(72px, 11vw, 150px) 0; }
.sec--dark { background: var(--abyss); color: var(--ice); }
.sec--deep { background: linear-gradient(180deg, var(--abyss), var(--deep) 60%, var(--navy)); color: var(--ice); }
.sec--light { background: var(--frost); color: var(--ink); }
.sec--paper { background: var(--paper); color: var(--ink); }
.label {
  font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); display: flex; gap: .8em; align-items: center; margin-bottom: 28px;
}
.sec--dark .label, .sec--deep .label, .hero .label { color: var(--aqua); }
.label::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.h-xl { font-size: clamp(32px, 5.6vw, 76px); letter-spacing: .06em; }
.h-lg { font-size: clamp(26px, 3.6vw, 48px); }
.h-md { font-size: clamp(20px, 2.2vw, 28px); }
.lead { font-size: clamp(16px, 1.5vw, 19px); max-width: 38em; color: inherit; opacity: .88; }
.muted { color: var(--ink-3); }
.sec--dark .muted, .sec--deep .muted { color: rgba(234, 245, 255, .62); }
.mono { font-family: var(--mono); letter-spacing: .08em; }
.grid { display: grid; gap: clamp(18px, 2.4vw, 32px); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.stack > * + * { margin-top: 1.2em; }

/* ---------- header (floating pill) ---------- */
.hdr { position: fixed; z-index: 50; top: 14px; left: 0; right: 0; pointer-events: none; }
.hdr .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.brand { pointer-events: auto; font-family: var(--serif); font-size: 20px; letter-spacing: .22em; color: var(--ice); mix-blend-mode: normal; display: inline-flex; align-items: baseline; gap: .5em; }
.brand small { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; opacity: .7; }
.pill { pointer-events: auto; display: flex; align-items: center; gap: 4px; background: rgba(244, 247, 249, .94); color: var(--ink); padding: 6px; border-radius: 999px; box-shadow: 0 8px 30px rgba(1, 8, 24, .28); backdrop-filter: blur(10px); }
.pill a, .pill button { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 9px 14px; border-radius: 999px; border: 0; background: none; color: inherit; cursor: pointer; white-space: nowrap; }
.pill a:hover, .pill button:hover, .pill a[aria-current="page"] { background: var(--ink); color: var(--ice); }
.burger { display: none; }
.hdr--solid .brand { color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: var(--ice); overflow: hidden; background: var(--abyss); isolation: isolate; }
.hero__bg { position: absolute; inset: -4% 0; z-index: -3; background: var(--deep) center / cover no-repeat; will-change: transform; }
.hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(1, 8, 24, .35) 0%, rgba(1, 8, 24, 0) 35%, rgba(1, 8, 24, .55) 78%, var(--abyss) 100%); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero__body { padding-block: clamp(120px, 20vh, 220px) clamp(48px, 9vh, 96px); }
.hero h1 { font-size: clamp(34px, 6.6vw, 92px); line-height: 1.22; letter-spacing: .08em; text-shadow: 0 2px 40px rgba(1, 8, 24, .55); }
.hero h1 span { display: block; }
.hero .lead { margin-top: 28px; max-width: 34em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__mark { position: absolute; z-index: -1; left: 50%; bottom: -.12em; transform: translateX(-50%); font-family: var(--serif); font-size: clamp(48px, 12.5vw, 210px); letter-spacing: .1em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(143, 216, 255, .16); user-select: none; pointer-events: none; }
.hero__note { position: absolute; right: var(--gutter); bottom: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: rgba(234, 245, 255, .5); }
.scrollcue { position: absolute; left: var(--gutter); bottom: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--aqua); display: flex; align-items: center; gap: 10px; }
.scrollcue i { width: 1px; height: 38px; background: linear-gradient(var(--aqua), transparent); animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.page-hero { position: relative; padding: clamp(150px, 24vh, 260px) 0 clamp(60px, 9vw, 110px); color: var(--ice); background: var(--abyss) center / cover no-repeat; overflow: hidden; isolation: isolate; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(1, 8, 24, .55), rgba(1, 8, 24, .2) 40%, var(--abyss)); }
.page-hero .lead { margin-top: 22px; }
.crumbs { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; margin-bottom: 26px; color: var(--aqua); }
.crumbs a { opacity: .75; } .crumbs a:hover { opacity: 1; text-decoration: underline; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 15px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .3s var(--ease), background .3s, color .3s, border-color .3s; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--cobalt); color: #fff; }
.btn--primary:hover { background: var(--azure); }
.btn--ghost { border-color: rgba(234, 245, 255, .45); color: var(--ice); }
.btn--ghost:hover { background: rgba(234, 245, 255, .12); }
.btn--ink { background: var(--ink); color: var(--ice); }
.btn--line { border-color: var(--line-l); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn .arr { font-size: 14px; }

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv.d1 { transition-delay: .06s; } .js .rv.d2 { transition-delay: .12s; } .js .rv.d3 { transition-delay: .18s; }
[data-tier="lite"] .rv, .motion-off .rv { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- beats (message order) ---------- */
.beats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-l); margin-top: clamp(40px, 6vw, 80px); }
.beat { padding: 28px 24px 8px 0; border-right: 1px solid var(--line-l); }
.beat:last-child { border-right: 0; }
.beat + .beat { padding-left: 24px; }
.beat .mono { font-size: 12px; color: var(--cobalt); }
.beat h3 { font-size: 22px; margin: 12px 0 10px; }
.beat p { font-size: 15px; color: var(--ink-2); }

/* ---------- state simulator ---------- */
.sim { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid var(--line-d); background: #020a22 center / cover no-repeat; min-height: 560px; }
.sim canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sim__crystal { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .8s var(--ease); pointer-events: none; }
.sim__crystal svg { width: min(78%, 460px); height: auto; filter: drop-shadow(0 0 22px rgba(143, 216, 255, .5)); animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sim__hud { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px clamp(18px, 3vw, 36px) 26px; background: linear-gradient(0deg, rgba(1, 8, 24, .92), rgba(1, 8, 24, 0)); }
.sim__name { font-family: var(--serif); font-size: clamp(24px, 3vw, 38px); letter-spacing: .1em; }
.sim__sub { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--aqua); }
.range { width: 100%; margin: 18px 0 8px; -webkit-appearance: none; appearance: none; height: 28px; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, #bfe9ff, #3b82ff 50%, #8fd8ff); border-radius: 3px; }
.range::-moz-range-track { height: 3px; background: linear-gradient(90deg, #bfe9ff, #3b82ff 50%, #8fd8ff); border-radius: 3px; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #8fd8ff 60%, #3b82ff); box-shadow: 0 0 0 6px rgba(143, 216, 255, .22); border: 0; }
.range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #8fd8ff 60%, #3b82ff); box-shadow: 0 0 0 6px rgba(143, 216, 255, .22); border: 0; }
.ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: rgba(234, 245, 255, .6); }
.ticks button { background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; padding: 6px 2px; }
.ticks button[aria-pressed="true"] { color: var(--aqua); }
.statecards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.statecard { border: 1px solid var(--line-d); border-radius: var(--radius); padding: 22px; background: rgba(4, 20, 63, .5); transition: border-color .4s, background .4s, transform .4s var(--ease); }
.statecard.is-on { border-color: var(--aqua); background: rgba(27, 79, 228, .22); transform: translateY(-4px); }
.statecard h3 { font-size: 20px; margin-bottom: 8px; }
.statecard dl { margin: 0; font-size: 14px; }
.statecard dt { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--aqua); margin-top: 12px; }
.statecard dd { margin: 2px 0 0; opacity: .88; }
.line-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 32px; font-size: 15px; }
.line-chain span { padding: 8px 16px; border: 1px solid var(--line-d); border-radius: 999px; transition: background .4s, border-color .4s, color .4s; }
.line-chain i { font-style: normal; color: var(--aqua); opacity: .7; }
.line-chain span.on { background: var(--aqua); color: var(--abyss); border-color: var(--aqua); }

/* ---------- cycle diagram ---------- */
.cycle { position: relative; width: min(100%, 560px); aspect-ratio: 1; margin-inline: auto; }
.cycle svg { width: 100%; height: 100%; overflow: visible; }
.cycle text { font-family: var(--sans); fill: currentColor; }
.cycle .node { cursor: pointer; }
.cycle .node circle { fill: var(--frost); stroke: var(--cobalt); stroke-width: 1.5; transition: fill .3s, r .3s; }
.sec--dark .cycle .node circle, .sec--deep .cycle .node circle { fill: var(--deep); stroke: var(--aqua); }
.cycle .node:hover circle, .cycle .node.on circle { fill: var(--cobalt); }
.cycle .node.on text, .cycle .node:hover text { fill: #fff; }
.cycle .ring { fill: none; stroke: var(--cobalt); stroke-width: 1; stroke-dasharray: 3 7; opacity: .55; }
.cycle .sweep { fill: none; stroke: var(--azure); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 60 1000; animation: sweep 14s linear infinite; transform-origin: 50% 50%; }
@keyframes sweep { to { stroke-dashoffset: -1060; } }
.cycle__core { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; padding: 26%; }
.cycle__core b { font-family: var(--serif); font-weight: 500; font-size: clamp(16px, 2vw, 22px); display: block; }
.cycle__core span { font-size: 13px; opacity: .75; }

/* ---------- spirals ---------- */
.spirals { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 40px); }
.spiral { border-radius: 24px; padding: clamp(24px, 3vw, 40px); position: relative; overflow: hidden; }
.spiral--loss { background: linear-gradient(160deg, #0b1020, #1a2036); border: 1px solid rgba(255, 255, 255, .12); }
.spiral--gain { background: linear-gradient(160deg, #06307c, #1b4fe4); border: 1px solid rgba(143, 216, 255, .4); }
.spiral svg { width: 140px; height: 140px; float: right; margin: 0 0 12px 12px; opacity: .9; }
.spiral ol { counter-reset: s; margin-top: 18px; clear: both; }
.spiral li { counter-increment: s; position: relative; padding: 10px 0 10px 40px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 15px; }
.spiral li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 12px; font-family: var(--mono); font-size: 12px; color: var(--aqua); }

/* ---------- flows (VOID / FAIL) ---------- */
.flow { border: 1px solid var(--line-l); border-radius: var(--radius); padding: 22px 24px; background: var(--paper); }
.flow + .flow { margin-top: 14px; }
.flow__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 15px; }
.flow__row span { background: #fff; border: 1px solid var(--line-l); padding: 5px 14px; border-radius: 999px; }
.flow__row i { font-style: normal; color: var(--cobalt); }
.flow__row .end-gain { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.flow__row .end-loss { background: var(--ink); color: var(--ice); border-color: var(--ink); }
.flow h4 { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 10px; text-transform: uppercase; font-weight: 400; }

/* ---------- diagnostic guide ---------- */
.guide { border: 1px solid var(--line-l); border-radius: 28px; background: var(--paper); overflow: hidden; }
.guide__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 16px clamp(18px, 3vw, 32px); border-bottom: 1px solid var(--line-l); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; }
.guide__steps { display: flex; gap: 6px; flex-wrap: wrap; }
.guide__steps button { font: inherit; letter-spacing: inherit; background: none; border: 1px solid var(--line-l); border-radius: 999px; padding: 6px 14px; cursor: pointer; color: var(--ink-3); }
.guide__steps button[aria-current="step"] { background: var(--ink); color: var(--ice); border-color: var(--ink); }
.guide__steps button:disabled { opacity: .4; cursor: default; }
.guide__reset { background: none; border: 0; font: inherit; letter-spacing: inherit; cursor: pointer; color: var(--cobalt); text-decoration: underline; text-underline-offset: 4px; }
.guide__body { padding: clamp(24px, 4vw, 56px) clamp(18px, 3vw, 40px); min-height: 360px; }
.guide__q { font-size: clamp(22px, 2.6vw, 34px); margin-bottom: 8px; }
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
.opt { text-align: left; font: inherit; background: #fff; border: 1px solid var(--line-l); border-radius: var(--radius); padding: 20px 22px; cursor: pointer; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; display: grid; gap: 4px; color: var(--ink); }
.opt:hover { transform: translateY(-3px); border-color: var(--cobalt); box-shadow: 0 14px 34px rgba(27, 79, 228, .12); }
.opt b { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: .04em; }
.opt span { font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.result { display: grid; gap: 22px; }
.rcard { background: #fff; border: 1px solid var(--line-l); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: start; }
.rcard h3 { font-size: 24px; }
.rcard .tag { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--cobalt); text-transform: uppercase; }
.rcard ul { grid-column: 1 / -1; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2); }
.rcard li { padding-left: 1.2em; position: relative; }
.rcard li::before { content: "—"; position: absolute; left: 0; color: var(--cobalt); }
.limit { background: var(--ink); color: var(--ice); border-radius: var(--radius); padding: 22px 26px; font-size: 14.5px; }
.limit h4 { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--aqua); margin-bottom: 8px; font-weight: 400; text-transform: uppercase; }
.limit li { padding-left: 1.2em; position: relative; margin-top: 4px; }
.limit li::before { content: "!"; position: absolute; left: 0; color: var(--aqua); font-family: var(--mono); }

/* ---------- product cards / pages ---------- */
.pcard { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-l); transition: transform .4s var(--ease), box-shadow .4s; color: var(--ink); }
.pcard:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(7, 18, 48, .16); }
.pcard__ph { aspect-ratio: 4 / 3; position: relative; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, #bfe3ff, #5a8dff 60%, #123a9c); overflow: hidden; }
.pcard__ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 85%, rgba(255, 255, 255, .25), transparent 40%); }
.pcard__ph--wood { background: radial-gradient(circle at 30% 20%, #dfeaf0, #7fa0b8 60%, #1a3560); }
.ph-slot { position: relative; z-index: 1; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: rgba(255, 255, 255, .9); border: 1px dashed rgba(255, 255, 255, .7); border-radius: 999px; padding: 8px 16px; text-align: center; }
.pcard__body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pcard__kind { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--cobalt); text-transform: uppercase; }
.pcard h3 { font-size: 26px; letter-spacing: .06em; }
.pcard p { font-size: 15px; color: var(--ink-2); margin: 0; }
.pcard__go { margin-top: auto; padding-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; display: flex; justify-content: space-between; border-top: 1px solid var(--line-l); }

.kv { border-top: 1px solid var(--line-l); }
.kv div { display: grid; grid-template-columns: 11em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-l); font-size: 15px; }
.kv dt { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-3); padding-top: 3px; }
.kv dd { margin: 0; }
dl.kv { margin: 0; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: st; }
.steps3 li { counter-increment: st; padding: 26px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line-l); }
.steps3 li::before { content: "STEP " counter(st); font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--cobalt); display: block; margin-bottom: 10px; }
.steps3 b { font-family: var(--serif); font-weight: 500; font-size: 20px; display: block; margin-bottom: 6px; }
.steps3 span { font-size: 14.5px; color: var(--ink-2); }
.sys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line-d); border-radius: 24px; overflow: hidden; }
.sys li { padding: 28px; background: rgba(4, 20, 63, .55); }
.sys li + li { border-left: 1px solid var(--line-d); }
.sys .mono { font-size: 12px; color: var(--aqua); }
.sys h3 { font-size: 26px; margin: 8px 0 10px; }
.sys p { font-size: 14.5px; opacity: .88; margin: 0; }
.photo-slot { border: 1px dashed var(--ink-3); border-radius: var(--radius); display: grid; place-items: center; text-align: center; padding: 28px; min-height: 220px; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(7, 18, 48, .04) 14px 15px); color: var(--ink-3); font-size: 14px; }
.photo-slot b { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--ink); margin-bottom: 6px; }
.notice { font-size: 14.5px; color: var(--ink-3); border-left: 2px solid var(--cobalt); padding-left: 14px; }
.sec--dark .notice, .sec--deep .notice { color: rgba(234, 245, 255, .66); border-color: var(--aqua); }

/* ---------- table (Pouch-like comparison, rewritten) ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th, .tbl td { text-align: left; padding: 16px 14px; border-bottom: 1px solid var(--line-l); vertical-align: top; }
.tbl th { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; font-weight: 400; color: var(--ink-3); text-transform: uppercase; }
.tbl td:first-child { font-family: var(--serif); font-size: 17px; white-space: nowrap; }

/* ---------- FAQ ---------- */
.faq details { border-top: 1px solid var(--line-l); }
.faq details:last-child { border-bottom: 1px solid var(--line-l); }
.faq summary { cursor: pointer; list-style: none; padding: 24px 40px 24px 0; font-family: var(--serif); font-size: clamp(17px, 1.8vw, 22px); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 22px; color: var(--cobalt); transition: transform .3s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .ans { padding: 0 0 26px; max-width: 46em; color: var(--ink-2); font-size: 15.5px; }

/* ---------- footer ---------- */
.ftr { position: relative; background: var(--abyss) center bottom / cover no-repeat; color: var(--ice); padding: clamp(80px, 12vw, 160px) 0 36px; overflow: hidden; isolation: isolate; }
.ftr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--abyss), rgba(1, 8, 24, .55) 40%, rgba(1, 8, 24, .78)); }
.ftr__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-top: 56px; font-size: 14px; }
.ftr h4 { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--aqua); font-weight: 400; margin-bottom: 14px; text-transform: uppercase; }
.ftr li + li { margin-top: 8px; }
.ftr a:hover { text-decoration: underline; }
.ftr__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line-d); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: rgba(234, 245, 255, .6); }
.ftr__bar button { background: none; border: 1px solid var(--line-d); color: var(--ice); font: inherit; letter-spacing: inherit; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.ftr .h-lg { max-width: 18em; }

/* ---------- lite tier / motion off ---------- */
[data-tier="lite"] .hero__bg, .motion-off .hero__bg { transform: none !important; }
[data-tier="lite"] .scrollcue i, .motion-off .scrollcue i, .motion-off .cycle .sweep, .motion-off .sim__crystal svg { animation: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .scrollcue i, .cycle .sweep, .sim__crystal svg { animation: none; } }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .beats { grid-template-columns: repeat(2, 1fr); }
  .beat:nth-child(2) { border-right: 0; }
  .beat:nth-child(3) { padding-left: 0; }
  .beat:nth-child(n+3) { border-top: 1px solid var(--line-l); margin-top: 24px; }
  .ftr__cols { grid-template-columns: 1fr 1fr; }
  .sys { grid-template-columns: 1fr; } .sys li + li { border-left: 0; border-top: 1px solid var(--line-d); }
}
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .pill { position: absolute; top: 56px; right: var(--gutter); left: var(--gutter); flex-direction: column; align-items: stretch; border-radius: 24px; padding: 10px; display: none; }
  .nav-open .pill { display: flex; }
  .no-js .pill { position: static; display: flex; flex-direction: row; flex-wrap: wrap; border-radius: 18px; }
  .burger { display: inline-flex; pointer-events: auto; background: rgba(244, 247, 249, .94); color: var(--ink); border: 0; border-radius: 999px; padding: 10px 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; cursor: pointer; }
  .no-js .burger { display: none; }
  .hdr .wrap { flex-wrap: nowrap; }
  .brand { font-size: 16px; } .brand small { display: none; }
  .hero h1 { font-size: 7.3vw; letter-spacing: .04em; }
  .page-hero .h-xl { font-size: 8vw; }
  .g2, .g3, .g4, .statecards, .steps3, .opts, .spirals { grid-template-columns: 1fr; }
  .beats { grid-template-columns: 1fr; } .beat { border-right: 0; padding-left: 0 !important; border-top: 1px solid var(--line-l); } .beat:first-child { border-top: 0; }
  .sim { min-height: 520px; border-radius: 22px; }
  .kv div { grid-template-columns: 1fr; gap: 2px; }
  .rcard { grid-template-columns: 1fr; }
  .tbl { display: block; overflow-x: auto; }
  .ftr__cols { grid-template-columns: 1fr; }
  .hero__note { display: none; }
  .scrollcue { display: none; }
}

/* ---------- helpers added after first build ---------- */
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cycle-list { margin-top: 20px; font-size: 15px; color: var(--ink-2); display: grid; gap: 6px; }
.js .cycle-list.sr { display: block; }
.sec--deep .tbl th, .sec--dark .tbl th { color: var(--aqua); }
.sec--deep .tbl th, .sec--deep .tbl td, .sec--dark .tbl th, .sec--dark .tbl td { border-bottom-color: var(--line-d); }
.sec--deep .limit { background: rgba(1, 8, 24, .55); border: 1px solid var(--line-d); }
.sys { list-style: none; }

/* ---------- approach: need shift and complement rails ---------- */
.shift { display: grid; grid-template-columns: 1fr auto 1.25fr; gap: clamp(14px, 2.5vw, 36px); align-items: stretch; }
.shift__from, .shift__to { border-radius: 24px; padding: clamp(22px, 3vw, 38px); }
.shift__from { border: 1px dashed var(--ink-3); color: var(--ink-2); background: transparent; }
.shift__to { background: var(--ink); color: var(--ice); display: grid; gap: 10px; align-content: start; }
.shift__to .btn { justify-self: start; margin-top: 10px; background: var(--azure); color: #fff; }
.shift .mono { font-size: 12px; color: var(--cobalt); }
.shift__to .mono { color: var(--aqua); }
.shift h3 { font-size: clamp(20px, 2.2vw, 28px); margin: 8px 0; }
.shift p { font-size: 15px; margin: 0; }
.shift__arrow { align-self: center; font-family: var(--mono); font-size: 28px; color: var(--cobalt); }
.rail h3 { margin-bottom: 18px; }
.rail__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: r; }
.rail__row li { counter-increment: r; position: relative; padding: 22px 24px 22px 28px; border: 1px solid var(--line-d); font-size: 16px; line-height: 1.7; }
.rail__row li + li { border-left: 0; }
.rail__row li:first-child { border-radius: 20px 0 0 20px; } .rail__row li:last-child { border-radius: 0 20px 20px 0; }
.rail__row .mono { display: block; font-size: 12px; letter-spacing: .16em; margin-bottom: 6px; opacity: .75; }
.rail__row small { opacity: .75; font-size: 13px; }
.rail__other { background: transparent; color: rgba(234, 245, 255, .7); border-style: dashed !important; }
.rail__mine { background: linear-gradient(160deg, rgba(27, 79, 228, .55), rgba(59, 130, 255, .25)); color: #fff; }
.rail__mine .mono { color: var(--aqua); opacity: 1; }
.rail .notice { margin-top: 16px; }

/* pre-publish gate marker: visible in the prototype only; build.py --public refuses to build while any remain */
.gate { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; line-height: 1.5; background: #ffd84a; color: #3a2a00; border-radius: 4px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; font-style: normal; }

/* compare table: ORB column emphasised */
.cmp td:last-child, .cmp th:last-child { background: rgba(27, 79, 228, .08); }
.cmp td:last-child { font-weight: 500; }
.cmp td:first-child { font-size: 15px; white-space: normal; min-width: 8em; }
.single-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mini { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line-l); transition: transform .3s var(--ease), border-color .3s; color: var(--ink); }
.mini:hover { transform: translateY(-4px); border-color: var(--cobalt); }
.mini .mono { font-size: 12px; color: var(--cobalt); letter-spacing: .14em; }
.mini h3 { font-size: 22px; }
.mini p { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.mini small { margin-top: auto; padding-top: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-3); }

@media (max-width: 1040px) {
  .pill { position: absolute; top: 56px; right: var(--gutter); left: var(--gutter); flex-direction: column; align-items: stretch; border-radius: 24px; padding: 10px; display: none; }
  .nav-open .pill { display: flex; }
  .no-js .pill { position: static; display: flex; flex-direction: row; flex-wrap: wrap; border-radius: 18px; }
  .burger { display: inline-flex; pointer-events: auto; background: rgba(244, 247, 249, .94); color: var(--ink); border: 0; border-radius: 999px; padding: 10px 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; cursor: pointer; }
  .no-js .burger { display: none; }
  .hdr .wrap { flex-wrap: nowrap; }
}
@media (max-width: 860px) {
  .shift { grid-template-columns: 1fr; } .shift__arrow { transform: rotate(90deg); justify-self: center; }
  .rail__row { grid-template-columns: 1fr; }
  .rail__row li + li { border-left: 1px solid var(--line-d); border-top: 0; }
  .rail__row li:first-child { border-radius: 20px 20px 0 0; } .rail__row li:last-child { border-radius: 0 0 20px 20px; }
  .single-grid { grid-template-columns: 1fr; }
}

.hdr--scrolled .brand { background: rgba(244, 247, 249, .94); color: var(--ink); padding: 8px 18px; border-radius: 999px; box-shadow: 0 8px 30px rgba(1, 8, 24, .22); font-size: 16px; }
.hdr--scrolled .brand small { display: none; }

.ea { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--aqua); color: var(--aqua); border-radius: 999px; padding: 3px 12px; margin-right: 12px; vertical-align: middle; }
.ea--sm { border-color: var(--cobalt); color: var(--cobalt); font-size: 12px; align-self: flex-start; margin: 0; }
.sec--light .rail__mine, .sec--paper .rail__mine { background: linear-gradient(160deg, #0f3fc4, #1b4fe4); color: #fff; }
.sec--light .rail__mine .mono, .sec--paper .rail__mine .mono { color: #bfe9ff; }

.hero__what { font-size: clamp(17px, 1.9vw, 24px); line-height: 1.8; opacity: 1; max-width: 30em; }
.mono { font-size: max(1em, 12px); }
.beat .mono, .shift .mono, .sys .mono, .rail__row .mono, .pcard__kind, .mini .mono, .ea, .sim__sub, .ticks, .flow h4, .limit h4 { font-size: max(12px, 1em); }
.sec--light .mini { background: #fff; }
.mini h3 { font-family: var(--serif); font-weight: 500; }

.model { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.model figure { margin: 0; background: #fff; border: 1px solid var(--line-l); border-radius: var(--radius); padding: 14px 14px 18px; }
.model svg { width: 100%; height: auto; border-radius: 10px; background: #f4f7f9; }
.model figcaption { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.model figcaption b { display: block; font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--ink); margin-bottom: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--ink-2); }
.legend i { display: inline-block; width: 13px; height: 13px; border-radius: 3px; margin-right: 7px; vertical-align: -2px; }
.tag-model { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; border: 1px solid var(--cobalt); color: var(--cobalt); border-radius: 999px; padding: 1px 10px; margin-right: 8px; }
@media (max-width: 1100px) { .model { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .model { grid-template-columns: 1fr; } }

/* ---------- point -> line -> cycle -> spiral figure ---------- */
.pls { position: relative; border: 1px solid var(--line-d); border-radius: 28px; padding: clamp(10px, 2vw, 28px); background: linear-gradient(180deg, rgba(4, 20, 63, .55), rgba(1, 8, 24, .35)); overflow: hidden; }
.pls svg { width: 100%; height: auto; }
.pls .spin { transform-origin: 625px 190px; }
.pls .halo { transform-origin: 125px 190px; }
.js .pls .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--ease) var(--d, 0s); }
.js .pls.in .draw { stroke-dashoffset: 0; }
.js .pls .orb, .js .pls .spin { opacity: 0; transition: opacity .8s var(--ease) var(--d, 0s); }
.js .pls.in .orb, .js .pls.in .spin { opacity: 1; }
.js .pls.in .spin { animation: pls-spin 7s linear var(--d, 0s) infinite; }
.js .pls.in .halo { animation: pls-pulse 3.2s ease-in-out infinite; }
@keyframes pls-spin { to { transform: rotate(360deg); } }
@keyframes pls-pulse { 50% { opacity: .38; transform: scale(1.25); } }
.motion-off .pls .draw, [data-tier="lite"] .pls .draw { transition: none; stroke-dashoffset: 0; }
.motion-off .pls .orb, .motion-off .pls .spin, [data-tier="lite"] .pls .orb, [data-tier="lite"] .pls .spin { opacity: 1; transition: none; animation: none; }
.motion-off .pls .halo, [data-tier="lite"] .pls .halo { animation: none; }
.pls__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.pls__cols article { border-top: 1px solid var(--line-d); padding-top: 18px; }
.pls__cols .mono { font-size: 12px; color: var(--aqua); }
.pls__cols h3 { font-size: 20px; margin: 6px 0 8px; }
.pls__cols p { font-size: 14.5px; margin: 0 0 8px; opacity: .9; }
.pls__cols .muted { opacity: .7; }
@media (max-width: 900px) { .pls__cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pls__cols { grid-template-columns: 1fr; } }

/* ---------- POLISH: layer peeling illustration ---------- */
.peel { border: 1px solid var(--line-d); border-radius: 28px; padding: clamp(14px, 2.4vw, 32px); background: linear-gradient(180deg, #06194a, #020a22); color: var(--ice); }
.peel svg { width: 100%; height: auto; max-width: 860px; margin-inline: auto; }
.peel .legend { color: rgba(234, 245, 255, .8); justify-content: center; }
.peel figcaption { margin-top: 10px; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: rgba(234, 245, 255, .7); }
.js .peel .layer { animation: peel 9s ease-in-out infinite; }
.js .peel .glint { animation: glint 9s ease-in-out infinite; }
@keyframes peel { 0%, 100% { d: path("M660 182 L480 182 C430 182 390 170 355 128 C330 98 290 130 240 128 L240 140 C290 144 318 108 340 138 C372 176 420 192 480 192 L660 192 Z"); } 50% { d: path("M660 182 L340 182 C290 182 250 170 215 128 C190 98 150 80 100 78 L100 90 C150 94 178 108 200 138 C232 176 280 192 340 192 L660 192 Z"); } }
@keyframes glint { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
.motion-off .peel .layer, .motion-off .peel .glint, [data-tier="lite"] .peel .layer, [data-tier="lite"] .peel .glint { animation: none; }
@media (prefers-reduced-motion: reduce) { .peel .layer, .peel .glint { animation: none !important; } }

.js .pls .draw.seg { transition-duration: .7s; transition-timing-function: linear; }

/* Japanese line breaking and balance */
body { line-break: strict; }
.h-xl, .h-lg, .h-md, .hero h1, .guide__q { text-wrap: balance; word-break: auto-phrase; }
.lead, .stack > p, .notice { text-wrap: pretty; }

/* ---------- MELT scope ladder ---------- */
.scope { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.scope__item { position: relative; background: #fff; border: 1px solid var(--line-l); border-radius: var(--radius); padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.scope__item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--cobalt); }
.scope__item--maybe::before { background: repeating-linear-gradient(90deg, var(--cobalt) 0 10px, #b9c6e8 10px 20px); }
.scope__item--no { background: var(--paper); color: var(--ink-2); }
.scope__item--no::before { background: #9aa6c4; }
.scope__item .mono { font-size: 12px; color: var(--cobalt); letter-spacing: .1em; }
.scope__item--no .mono { color: var(--ink-3); }
.scope__item h3 { font-size: 18px; line-height: 1.5; }
.scope__item p { font-size: 14px; margin: 0; color: var(--ink-2); }
.scope__item b { margin-top: auto; padding-top: 12px; font-family: var(--serif); font-weight: 500; font-size: 14.5px; line-height: 1.6; }
.scope__item--yes b { color: var(--cobalt); }
@media (max-width: 1100px) { .scope { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .scope { grid-template-columns: 1fr; } }

/* ---------- Fail -> Lore -> Answer rows ---------- */
.fla__row { display: grid; grid-template-columns: 1fr 1.2fr 1fr; border: 1px solid var(--line-l); border-radius: var(--radius); overflow: hidden; background: #fff; }
.fla__row + .fla__row { margin-top: 12px; }
.fla__row > div { padding: 20px 22px; }
.fla__row > div + div { border-left: 1px solid var(--line-l); }
.fla__row .mono { display: block; font-size: 12px; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 6px; }
.fla__row p { margin: 0; font-size: 15px; }
.fla__row > div:last-child { background: linear-gradient(160deg, #0a2166, #1b4fe4); color: #fff; }
.fla__row > div:last-child .mono { color: #bfe9ff; }
@media (max-width: 760px) { .fla__row { grid-template-columns: 1fr; } .fla__row > div + div { border-left: 0; border-top: 1px solid var(--line-l); } }

/* ---------- folded detail blocks ---------- */
.fold-list { display: grid; gap: 12px; }
.fold { background: #fff; border: 1px solid var(--line-l); border-radius: var(--radius); }
.fold summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 24px; font-family: var(--serif); font-size: clamp(18px, 2vw, 24px); position: relative; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 24px; color: var(--cobalt); transition: transform .3s; }
.fold[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.fold summary .mono { font-size: 12px; letter-spacing: .14em; color: var(--cobalt); margin-right: 14px; }
.fold__body { padding: 4px 24px 28px; display: grid; gap: 20px; }
.fold__body .kv div { grid-template-columns: 9em 1fr; }
@media (max-width: 760px) { .fold__body .kv div { grid-template-columns: 1fr; } .fold summary { padding-right: 48px; } }

/* ---------- Area themes: Mirror = cool (glass, sea), Wood = warm (timber, ridges) ---------- */
.pcard__ph--wood { background: radial-gradient(circle at 30% 20%, #f3dcb6, #b47a46 60%, #4a2a14); }
.theme-wood {
  --abyss: #150e09; --deep: #2a1a10; --navy: #4a2f1d;
  --cobalt: #a8552b; --azure: #c9743c; --aqua: #f0c27e; --ice: #fbf1e2;
  --frost: #ece3d3; --paper: #f5efe4; --ink: #1f1710; --ink-2: #4a3d30; --ink-3: #6f5f4e;
  --line-d: rgba(240, 194, 126, .26); --line-l: rgba(31, 23, 16, .16);
}
.theme-wood .pill, .theme-wood .burger, .theme-wood .hdr--scrolled .brand { background: rgba(245, 239, 228, .94); }
.theme-wood .page-hero::after { background: linear-gradient(180deg, rgba(21, 14, 9, .5), rgba(21, 14, 9, .12) 40%, var(--abyss)); }
.theme-wood .ftr { background-image: url(../img/wood-ridges.svg) !important; background-position: center 30%; }
.theme-wood .ftr::before { background: linear-gradient(180deg, var(--abyss), rgba(21, 14, 9, .5) 40%, rgba(21, 14, 9, .82)); }
.theme-wood .sys li, .theme-wood .statecard { background: rgba(70, 42, 22, .5); }
.theme-wood .rail__mine, .theme-wood .sec--light .rail__mine, .theme-wood .sec--paper .rail__mine { background: linear-gradient(160deg, #7a3c1c, #a8552b); }
.theme-wood .fla__row > div:last-child { background: linear-gradient(160deg, #4a2a14, #a8552b); }
.theme-wood .btn--primary:hover { background: var(--azure); }
.theme-wood .range::-webkit-slider-thumb { background: radial-gradient(circle at 35% 30%, #fff, #f0c27e 60%, #a8552b); }

/* ---------- Label signature: a thin purple-gold-silver rule, shared by every area ---------- */
.ftr { border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--royal-purple), var(--gold-edge) 50%, var(--silver-edge)) 1; }
.sigline { display: block; height: 3px; border: 0; background: linear-gradient(90deg, var(--royal-purple), var(--gold-edge) 50%, var(--silver-edge)); }

/* ---------- Photo hero and photo band (stock photos are atmosphere only: always labelled as image) ---------- */
.page-hero--photo { background-position: center 38%; }
.page-hero--photo::after { background: linear-gradient(180deg, rgba(21, 14, 9, .62), rgba(21, 14, 9, .18) 42%, var(--abyss)); }
.sec--tight { padding-block: clamp(36px, 5vw, 64px); }
.photo { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--frost); }
.photo img { display: block; width: 100%; height: auto; }
.photo figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; padding: 12px 18px; font-size: 13px; color: var(--ink-3); }
.photo .credit { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }

/* ---------- Readable breadcrumb on any hero; plank-floor hero ---------- */
.page-hero .crumbs { color: var(--ice); text-shadow: 0 1px 10px rgba(0, 0, 0, .65), 0 0 2px rgba(0, 0, 0, .5); }
.page-hero .crumbs a { opacity: .92; }
.page-hero--planks { background-size: 900px auto; background-repeat: repeat; }
.page-hero--planks::after { background: linear-gradient(180deg, rgba(21, 14, 9, .72), rgba(21, 14, 9, .5) 45%, var(--abyss)); }
.bg-planks { background: url(../img/wood-planks.svg) center / 900px auto repeat; }

/* ---------- Real-photo triptych (WRO before / during / after) ---------- */
.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 24px); }
.tri__f { margin: 0; }
.tri__f img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 34%; border-radius: var(--radius); background: var(--frost); }
.tri__f figcaption { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.tri__f .mono { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .14em; color: var(--ink-3); }
.tri-mini { margin: 0; }
.tri-mini__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: var(--radius); overflow: hidden; }
.tri-mini__strip img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 34%; }
.tri-mini figcaption { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.tri-mini figcaption b { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--ink); margin-bottom: 4px; }
@media (max-width: 700px) { .tri { grid-template-columns: 1fr; } .tri__f img { aspect-ratio: 4 / 3; object-position: 50% 30%; } }

/* ---------- Explanatory model figure (generated blueprint-style illustration, always captioned as a model) ---------- */
.bp { margin: 0; border-radius: var(--radius); overflow: hidden; background: #050b18; }
.bp img { display: block; width: 100%; height: auto; }
.bp figcaption { padding: 12px 18px; font-size: 13px; line-height: 1.7; color: rgba(234, 245, 255, .78); }

/* ---------- Product photos (white-background studio shots) ---------- */
.pcard__ph--photo, .pcard__ph--photo.pcard__ph--wood { background: #fff; }
.pcard__ph--photo::after { display: none; }
.pcard__ph--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.prodshot { margin: 0; background: #fff; border: 1px solid var(--line-l); border-radius: var(--radius); padding: 16px; text-align: center; }
.prodshot img { display: block; margin: 0 auto; max-width: 100%; max-height: 360px; width: auto; height: auto; }
.prodshot--photo img { max-height: 520px; border-radius: 10px; }
.prodshot figcaption { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--ink-2); text-align: left; }

/* ---------- Tables on phones: keep columns readable and let the table scroll sideways ---------- */
@media (max-width: 700px) {
  .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl th, .tbl td { min-width: 12em; }
  .tbl th:first-child, .tbl td:first-child { min-width: 8.5em; position: sticky; left: 0; background: var(--paper); z-index: 1; }
  .sec--deep .tbl th:first-child, .sec--deep .tbl td:first-child, .sec--dark .tbl th:first-child, .sec--dark .tbl td:first-child { background: var(--deep); }
  .sec--light .tbl th:first-child, .sec--light .tbl td:first-child { background: var(--frost); }
}