/* ══════════════════════════════════════════════════════════════════════════
   Olbra Chain — additions to brand.css. Nothing here restyles a brand class;
   every rule is for a device the site has no component for.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the architecture diagram ─────────────────────────────────────────────
   One inline SVG. Type inside it is set in CSS so it inherits the page's two
   faces; the SVG carries no font attributes of its own. */
.arch{margin-top:var(--s7);width:100%}
.arch svg{width:100%;height:auto;display:block}
.arch .t{font-family:'Inter Tight',sans-serif;font-size:14px;font-weight:500;
  letter-spacing:-.03em;fill:var(--ink)}
.arch .s{font-family:'Inter Tight',sans-serif;font-size:12.5px;font-weight:400;
  letter-spacing:-.02em;fill:var(--ink-3)}
.arch .m{font-family:'Fragment Mono',monospace;font-size:11px;letter-spacing:0;
  fill:var(--ink-3)}
.arch .m--ox{fill:var(--ox)}
.arch .band{fill:none;stroke:var(--rule-2);stroke-width:1;rx:12}
.arch .band--ox{stroke:var(--ox);stroke-width:1.5}
.arch .dash{stroke:var(--rule);stroke-width:1;stroke-dasharray:3 4}
.arch .flow{stroke:var(--ox);stroke-width:1.5;fill:none}
.arch .dot{fill:var(--ox)}
@media (max-width:52rem){
  .arch{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .arch svg{min-width:620px}
}

/* ── comparison table ─────────────────────────────────────────────────────
   .dtable with a sticky first column, because eight columns of chain names
   scroll horizontally on a laptop and the row label has to stay. */
.ctable th:first-child,.ctable td:first-child{
  position:sticky;left:0;background:var(--ground);z-index:1;
  padding-right:var(--s5)}
.ctable td:first-child{color:var(--ink);font-weight:500}
.ctable .is-us{color:var(--ox)}
.ctable td{white-space:normal;min-width:9.5rem;vertical-align:top}
.ctable th{white-space:nowrap}
.ctable tr.is-us th:first-child{color:var(--ox)}
/* The tier ladder is seven short columns, so it does not need the chain
   table's 9.5rem floor — at that width it scrolls on a laptop for no reason. */
.tiers td{min-width:6.5rem}
.tiers td:first-child,.tiers td:nth-child(2){min-width:5rem}

/* ── the roadmap rail ─────────────────────────────────────────────────────
   A left rule with a ring per phase — the registration frame's corner ring,
   reused at the scale of a list item. */
.rail{margin-top:var(--s7);display:flex;flex-direction:column;gap:var(--s7)}
.rail__item{position:relative;padding-left:var(--s7)}
.rail__item::before{content:"";position:absolute;left:5px;top:0;bottom:calc(-1 * var(--s7));
  width:1px;background:repeating-linear-gradient(to bottom,var(--rule) 0 3px,transparent 3px 7px)}
.rail__item:last-child::before{display:none}
.rail__item::after{content:"";position:absolute;left:0;top:5px;
  width:11px;height:11px;border-radius:50%;
  background:var(--ground);border:1px solid var(--rule)}
.rail__item--now::after{background:var(--ox);border-color:var(--ox)}
.rail__when{display:block;font-family:'Fragment Mono',monospace;font-size:var(--t-mono);
  letter-spacing:0;color:var(--ink-3);margin-bottom:var(--s2)}
.rail__item h3{font-size:var(--t-h3);margin-bottom:var(--s3)}
.rail__item p{font-size:var(--t-body);line-height:1.6;color:var(--ink-2);max-width:62ch}
.rail__list{margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.rail__list li{font-size:var(--t-sm);line-height:1.55;color:var(--ink-2);
  display:grid;grid-template-columns:1.1rem 1fr;gap:var(--s2);max-width:62ch}
.rail__list li::before{content:"—";color:var(--ink-3)}

/* ── a figure that carries an oxblood numeral ─────────────────────────────
   .stmt already does this; .fig is its inline cousin for prose. */
.fig{color:var(--ox);font-weight:500;font-variant-numeric:tabular-nums}

/* ── the source note ──────────────────────────────────────────────────────
   Small, quiet, and always directly under the claim it supports. */
.src{margin-top:var(--s4);font-size:var(--t-mono);line-height:1.6;
  color:var(--ink-3);letter-spacing:-.01em;max-width:68ch}
.dark .src{color:rgba(255,255,255,.45)}

/* ── a two-column outline pair, tighter than .pcards ──────────────────────*/
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5);margin-top:var(--s6)}
@media (max-width:52rem){.split{grid-template-columns:1fr}}

/* ── the closing band ─────────────────────────────────────────────────────
   It lives inside <footer class="dark"> so the two share one gradient — as
   two elements each restarted the radial glow and the seam showed. */
.close{padding-block:var(--s9) var(--s8)}
.close h2{max-width:22ch}
.close + .foot{padding-top:var(--s8);border-top:1px solid rgba(255,255,255,.12)}

/* ── hero tweaks for a headline longer than the site's ───────────────────
   The house h1 caps at 15ch for a four-word headline. This one is a
   sentence, so the cap moves out far enough to stop it stacking into six
   lines on a laptop. */
.hero__copy .badge{margin-bottom:var(--s5)}
.hero h1{max-width:19ch}
.hero .lead{max-width:52ch}

/* ── the hero readout ─────────────────────────────────────────────────────
   The site's hero puts a photograph in the right column. This one is an
   internal proposal, so it puts the specification there instead — the same
   mono key/value grammar the imprint page uses for register numbers. */
.hero__inner{grid-template-columns:minmax(0,1fr)}
.hero__spec{display:none}
@media (min-width:64rem){
  .hero__inner{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
  .hero__spec{display:flex;flex-direction:column;
    border-top:1px solid rgba(255,255,255,.18);max-width:26rem;justify-self:end}
  .hero__spec > div{display:grid;grid-template-columns:minmax(0,8rem) minmax(0,1fr);
    gap:var(--s4);padding-block:var(--s4);
    border-bottom:1px solid rgba(255,255,255,.12)}
  .hero__spec dt{margin:0;font-size:var(--t-mono);letter-spacing:-.01em;
    color:rgba(255,255,255,.45)}
  .hero__spec dd{margin:0;font-family:'Fragment Mono',monospace;font-size:var(--t-mono);
    letter-spacing:0;line-height:1.5;color:#fff;font-variant-ligatures:none}
}

/* Below 62rem brand.css inverts the hero to cream and ink. It restyles the
   headline, the prose and both buttons, and the badge is the one component
   the live hero never put there — so it is still wearing its dark colours. */
@media (max-width:62rem){
  .hero.dark .badge{color:var(--ink-2);border-color:var(--rule);background:var(--ground)}
  .hero.dark .badge::before{background:var(--ox)}
  /* The lane inherits the dark band's warm gradient, which on cream reads
     as a stray pink. Same fix as the badge, same reason. */
  .hero.dark .lane i{background:var(--ox)}
  .hero.dark .lane i:last-child{background:transparent;box-shadow:inset 0 0 0 1px var(--rule)}
}

.archhint{display:none}
@media (max-width:52rem){.archhint{display:block}}

/* ── a .spec whose values are prose, not register data ────────────────────
   DESIGN.md reserves Fragment Mono for things a reader transcribes. The
   worked example's values are sentences, so they take the body face and the
   figures inside them carry .mono on their own. */
.spec--prose .spec__v{font-family:inherit;font-size:var(--t-sm);
  letter-spacing:-.02em;line-height:1.6;color:var(--ink-2)}
.spec--prose .spec__v strong{color:var(--ink);font-weight:500}

/* The rate card's second column carries a sentence, so it needs a wider
   floor than the staking ladder's short values. Scoped, because both tables
   share .tiers and the ladder would then scroll at 1440 for no reason. */
.tiers--wide td:first-child{min-width:13rem}

/* ── the three-page split ─────────────────────────────────────────────────
   One slug, three documents, one stylesheet. The nav marks the page you are
   on; the foot of each page hands you the other two. */
.nav__links a[aria-current="page"]{color:var(--ink)}
.nav__links a[aria-current="page"]::after{content:"";display:block;height:1px;
  margin-top:3px;background:var(--ox)}

.onward{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5);margin-top:var(--s7)}
@media (max-width:52rem){.onward{grid-template-columns:1fr}}
.onward a{display:flex;flex-direction:column;gap:var(--s2);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-card);
  padding:var(--s5);transition:border-color .18s ease}
.onward a:hover{border-color:rgba(255,255,255,.4)}
.onward .label{margin:0;color:rgba(255,255,255,.45)}
.onward strong{font-size:var(--t-h3);font-weight:500;letter-spacing:-.03em;color:#fff}
.onward span.small{color:rgba(255,255,255,.55)}

/* ══════════════════════════════════════════════════════════════════════════
   PUBLIC SITE — chain.olbra.org
   Everything below this line exists only on the public two-page site. It adds
   the lane, the plate hosts and one scoped type bump; it restyles no brand
   class outside #hero.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ⭐ the lane ──────────────────────────────────────────────────────────
   Ten cells, nine of them a payment. It is the 90% reserved-blockspace fact
   drawn at the size of a rule, and it is the only device on the site that is
   allowed to repeat: under the hero headline, between joined sections, and
   as the figure for the number itself. Nothing else uses it. */
.lane{display:flex;gap:4px;width:100%;max-width:38rem}
.lane i{flex:1 1 0;height:10px;border-radius:2px;background:var(--ox);
  transform-origin:left center}
.lane i:last-child{background:transparent;box-shadow:inset 0 0 0 1px var(--rule)}
.dark .lane i{background:linear-gradient(90deg,var(--ox) 0%,var(--plate-rose) 68%,var(--coin-orange) 100%)}
.dark .lane i:last-child{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}

/* Hero: wider, thinner, and it draws itself once on load with the headline. */
.lane--hero{max-width:34rem;margin-top:var(--s6)}
.lane--hero i{height:8px;border-radius:1px}

/* Divider: a lane instead of a rule where two joined sections meet. */
.lane--rule{max-width:none;gap:5px;margin-block:var(--s8)}
.lane--rule i{height:3px;border-radius:0;background:var(--rule-2)}
.lane--rule i:nth-child(-n+9){background:var(--bloom)}
.lane--rule i:last-child{box-shadow:none;background:var(--rule-2)}

/* Figure: the cells fill left to right when the band is lit. */
.lane--fig{max-width:30rem;margin-top:var(--s4);gap:5px}
.lane--fig i{height:16px;transform:scaleX(0);
  transition:transform .5s cubic-bezier(.2,0,.2,1)}
.lane--fig i:last-child{transform:none}
.rv.is-in .lane--fig i,.stmts.is-in .lane--fig i{transform:none}
.lane--fig i:nth-child(1){transition-delay:.05s}
.lane--fig i:nth-child(2){transition-delay:.10s}
.lane--fig i:nth-child(3){transition-delay:.15s}
.lane--fig i:nth-child(4){transition-delay:.20s}
.lane--fig i:nth-child(5){transition-delay:.25s}
.lane--fig i:nth-child(6){transition-delay:.30s}
.lane--fig i:nth-child(7){transition-delay:.35s}
.lane--fig i:nth-child(8){transition-delay:.40s}
.lane--fig i:nth-child(9){transition-delay:.45s}
@media (prefers-reduced-motion:reduce){
  .lane--fig i{transition:none;transform:none}
}

/* ── plates ──────────────────────────────────────────────────────────────
   A generated field, always decorative and always behind or beside the
   argument — never carrying a claim of its own. The <img> is the whole
   component; there is no shader here and no plate.js. */
.plate{margin-top:var(--s7);border-radius:var(--r-card);overflow:hidden;
  background:var(--sunken);line-height:0}
.plate img{width:100%;height:auto;display:block;
  aspect-ratio:16/6;object-fit:cover}
.plate--tall img{aspect-ratio:16/9}
.platerow .plate img{aspect-ratio:4/3}

/* Ranged into the section, beside prose, at two thirds width. */
.platerow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:var(--s7);align-items:center;margin-top:var(--s7)}
.platerow .plate{margin-top:0}
@media (max-width:56rem){.platerow{grid-template-columns:1fr;gap:var(--s5)}}

/* Full-bleed, edge to edge, outside the dashed box. */
.plate--bleed{margin-inline:calc(50% - 50vw);width:100vw;max-width:100vw;
  border-radius:0;margin-top:0}
.plate--bleed img{max-height:58vh;object-fit:cover}

/* ── the hero plate ──────────────────────────────────────────────────────
   Behind the headline, masked away from the left column so the type never
   competes with the field for contrast. */
.hero,.hero--lite{position:relative;isolation:isolate;overflow:hidden}
.hero__plate{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero__plate img{width:100%;height:100%;object-fit:cover;object-position:center 62%;
  opacity:.68}
.hero__plate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--dark-a) 2%,rgba(11,12,15,.78) 38%,rgba(11,12,15,0) 96%),
             linear-gradient(0deg,var(--dark-a) 1%,transparent 34%)}
@media (max-width:62rem){.hero.dark .hero__plate{display:none}}

/* ── the one scoped type bump ────────────────────────────────────────────
   The house h1 tops out at 54px. On a launch page with a one-sentence
   headline that reads timid, so the hero alone goes to 72. Every other h1 on
   the site keeps the house scale. */
@media (min-width:64rem){
  .hero h1,.hero--lite h1{font-size:clamp(3.375rem,2.1rem + 3.2vw,4.5rem);
    line-height:1.02;letter-spacing:-.045em;max-width:17ch}
}

/* ── the compact hero on the token page ─────────────────────────────────
   .dark, never .section.dark — the dot-grid overlay and the registration
   frame fight over ::before and the frame loses. The front page keeps the
   only 100svh fold; this one opens on a band. */
.hero--lite{padding-block:var(--s9) var(--s9);
  margin-bottom:calc(var(--s6) - var(--main-gap))}

/* The nav draws the registration rule and its two corner rings at its own
   bottom edge. On a page that opens straight into a dark band they land on
   the black and read as dirt, so they wait until the band is behind us. */
.page--dark-top .nav__rule{opacity:0;transition:opacity .2s ease}
.page--dark-top .nav.is-past-hero .nav__rule{opacity:1}
.hero--lite .badge{margin-bottom:var(--s5)}
.hero--lite h1{max-width:17ch}
.hero--lite .lead{margin-top:var(--s5);max-width:48ch}
.hero--lite .hero__plate img{object-position:center 46%;opacity:.8}
/* The lattice is centred, so the front page's left-heavy veil would erase it.
   This one lifts from the headline and lets the structure stand. */
.hero--lite .hero__plate::after{
  background:linear-gradient(90deg,var(--dark-a) 0%,rgba(11,12,15,.86) 26%,rgba(11,12,15,.30) 62%,rgba(11,12,15,0) 100%),
             linear-gradient(0deg,var(--dark-a) 0%,transparent 26%)}

/* ── the two-page nav ────────────────────────────────────────────────────*/
.onward--one{grid-template-columns:minmax(0,28rem)}

/* The lane needs one line of explanation the first time it appears, and
   never again. */
.lanenote{margin-top:var(--s4);max-width:44ch;font-size:var(--t-sm);
  line-height:1.55;color:rgba(255,255,255,.55)}
@media (max-width:62rem){.lanenote{color:var(--ink-3)}}