/* arc.ai: the engraved story. Classic type (Marcellus) over the blue system, the opening corridor, and the walk
   through the arches. Loaded after site.css. */
/* Concepts, round 1: the blue system with the classic serif back */
:root {
  --f-display: "Marcellus", "Optima", "Palatino Linotype", Palatino, serif;
  --f-inscr: "Marcellus", Palatino, serif;
}
h1, h2, h3, h4 { font-weight: 400; }
h1, h2 { letter-spacing: 0.02em; }
.kpis b { font: 700 1.5rem/1 var(--f-body); letter-spacing: -0.01em; }
.inscr { font: 400 clamp(1.9rem, 3.3vw, 3rem)/1 var(--f-display); letter-spacing: 0.04em; }

.cx-hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: var(--arc); color: var(--white); }
.cx-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cx-copy {
  position: absolute; inset: 0; z-index: 2; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 96px var(--gutter) 64px; text-align: center;
}
.cx-copy::before {
  content: ""; position: absolute; left: 50%; top: 52%; z-index: -1; pointer-events: none;
  width: min(1240px, 150vw); height: min(720px, 100svh); transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 45, 222, 0.95), rgba(0, 45, 222, 0.82) 52%, rgba(0, 45, 222, 0) 100%);
}
.cx-mega { font: 400 clamp(3.6rem, 10.6vw, 10.6rem)/0.9 var(--f-display); letter-spacing: 0.01em; }
.cx-copy .lead { max-width: 34em; color: rgba(255, 255, 255, 0.92); }
.cx-copy .lead, .cx-copy .kpis { text-shadow: 0 1px 14px var(--scrim), 0 0 2px var(--scrim); }
.cx-copy-low { justify-content: flex-end; gap: 16px; padding-bottom: clamp(28px, 5vh, 56px); }
.cx-copy-low::before { top: auto; bottom: -10%; height: 46%; width: 140vw; background: radial-gradient(closest-side, rgba(0, 45, 222, 0.95), rgba(0, 45, 222, 0.75) 55%, rgba(0, 45, 222, 0) 100%); transform: translateX(-50%); }
.cx-copy-b::before { width: min(1400px, 160vw); height: min(820px, 110svh); background: radial-gradient(closest-side, rgba(0, 45, 222, 0.97), rgba(0, 45, 222, 0.9) 58%, rgba(0, 45, 222, 0) 100%); }
.cx-monument { top: 64px; height: calc(74% - 64px); }
.cx-copy-low .lead { max-width: 46em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plate .insc { font-family: var(--f-display); font-size: 78px; letter-spacing: 0.06em; }
.plate .insc-sub { font-family: var(--f-inscr); font-size: 15px; letter-spacing: 0.06em; }

/* Concept A with the original concept's type: the headline in upper and lower case,
   Hanken Grotesk for labels, numbers, the nav and buttons; nothing in all caps */
.type-original .cx-mega { text-transform: none; letter-spacing: -0.01em; line-height: 0.95; }
.type-original .kpis, .type-original .eyebrow { font-family: var(--f-body); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em; text-transform: none; }
.type-original .kpis { font-weight: 500; }
.type-original .kpis b { font: 700 1.6rem/1 var(--f-body); letter-spacing: -0.01em; text-transform: none; }
.type-original .nav a { font: 400 0.92rem var(--f-body); letter-spacing: 0.01em; text-transform: none; }
.type-original .btn, .type-original .gh, .type-original .dex { font-family: var(--f-body); font-weight: 600; letter-spacing: 0.01em; text-transform: none; }
.type-original .btn { font-size: 0.98rem; }
.type-original .gh, .type-original .dex { font-size: 0.85rem; }
.type-original h2 { text-transform: none; }


/* Round 3: the hero corridor, then the walk through the arches */
.r3-hero { position: relative; background: var(--arc); color: var(--white); }
.r3-hero .hero-stage { height: 320vh; }
.r3-hero .hero-flash { background: #eef3ff; }
.walk-stage { position: relative; height: 1250vh; background: var(--arc); }
.walk-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.wp { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; visibility: hidden; }
.wp svg.plate { width: 100%; height: 100%; display: block; }
canvas.fx-under, canvas.fx-over { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
canvas.fx-under { z-index: 2; }
canvas.fx-over { z-index: 5; }
canvas.fx-live { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; visibility: hidden; }
/* Play: the walk runs on its own, with time to read each arch */
.walk-play { position: absolute; z-index: 7; right: var(--gutter); bottom: 22px; display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 16px; border: 0; background: var(--arc); color: var(--white); box-shadow: inset 0 0 0 1px var(--line); font: 600 0.88rem var(--f-body); letter-spacing: 0.01em; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s, box-shadow 0.2s; }
.walk-play.on { opacity: 1; visibility: visible; }
.walk-play:hover, .walk-play:focus-visible { box-shadow: inset 0 0 0 1px var(--white); }
.walk-play svg { width: 10px; height: 10px; flex: none; }
.walk-play .i-pause, .walk-play.playing .i-play { display: none; }
.walk-play.playing .i-pause { display: block; }
@media (max-width: 980px) { .walk-play { top: 70px; bottom: auto; right: 10px; width: 40px; height: 40px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; } .walk-play span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.wt { position: absolute; z-index: 6; left: 56vw; top: 50%; width: min(34em, 36vw); display: grid; gap: 16px; opacity: 0; visibility: hidden; }
.wt .inscr { font: 400 clamp(2rem, 3.4vw, 3.2rem)/1 var(--f-display); letter-spacing: 0.02em; text-transform: none; }
.wt h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.wt p { color: var(--ink-soft); }
.walk-intro { position: absolute; z-index: 6; inset: 0; display: grid; place-content: center; justify-items: center; gap: 20px; text-align: center; padding: 0 var(--gutter); opacity: 0; }
.walk-intro h2 { max-width: 18em; }
.walk-intro .lead { color: var(--ink-soft); }
/* the question small, the answer large */
.walk-intro .h-q { display: block; font-size: 0.44em; line-height: 1.15; letter-spacing: 0.01em; margin-bottom: 0.3em; }
.walk-intro .h-a { display: block; font-size: 1.14em; line-height: 0.96; letter-spacing: -0.005em; }
/* over the living opening scene (living-real.js): white, with a soft shadow off the sky */
.walk-intro.on-scene, .walk-intro.on-scene h2, .walk-intro.on-scene .eyebrow, .walk-intro.on-scene .lead { color: #fff; text-shadow: 0 2px 30px rgba(0, 14, 70, 0.55); }
/* the corridor turns to stone and flies into the scene (living-open.js): no white flash between them */
.living-open .hero-flash, .living-open .walk-flash { display: none !important; }
.walk-flash { position: absolute; inset: 0; z-index: 8; background: #eef3ff; opacity: 0; pointer-events: none; }
.r3-end { min-height: 70vh; display: grid; place-content: center; text-align: center; gap: 16px; padding: 10vh var(--gutter); background: var(--arc); color: var(--white); border-top: 1px solid var(--rule-night); }
.r3-hint { position: fixed; right: var(--gutter); bottom: 20px; z-index: 60; font: 600 0.82rem var(--f-body); letter-spacing: 0.01em; color: var(--ink-soft); pointer-events: none; }
@media (max-width: 980px) {
  /* phones: the text sits under the arch (walk.js sizes the arch to the room left above it) */
  .wt { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: max(14px, 2.4vh); gap: 10px; }
  .wt .inscr { font-size: 1.75rem; }
  .wt h3 { font-size: 1.32rem; line-height: 1.15; }
  .wt p { font-size: 0.95rem; line-height: 1.5; }
  .wt .echo { padding-top: 10px; gap: 10px; }
  .wt .echo .device { width: 22px; height: 22px; }
}
/* while an arch zooms past, its lines keep their engraved weight instead of swelling */
.wp svg.zooming .ln, .wp svg.zooming .flow, .wp svg.zooming .puff { vector-effect: non-scaling-stroke; }
canvas.eng-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.nav a.nav-ext { display: inline-flex; align-items: center; gap: 5px; }
.nav a.nav-ext svg { width: 8px; height: 8px; }
.masthead .sound { font-family: var(--f-body); letter-spacing: 0.01em; text-transform: none; font-weight: 600; font-size: 0.8rem; }

/* the sections after the walk, in the classic type */
.type-original .mega, .type-original .rev-final { text-transform: none; }
.type-original .trusting { text-transform: none; }
.type-original .ben h3, .type-original .ledger h3, .type-original .honest-card h3, .type-original .mini h4, .type-original .c-grid h3,
.type-original .c-phases h3, .type-original .c-record h3, .type-original .c-trust h3, .type-original .c-loop-head h3, .type-original .c-loop-steps b { text-transform: none; font-weight: 400; }
.type-original .coda-line, .type-original .prelude-big { text-transform: none; font-weight: 400; }
/* numbers in the bold grotesk, as in the first version */
.type-original .speed-num { font-family: var(--f-body); font-weight: 700; letter-spacing: -0.035em; text-transform: none; }
.type-original .ben-num, .type-original .c-num { font-family: var(--f-body); font-weight: 700; letter-spacing: 0; }
.type-original .ben-num { font-size: 1.7rem; }
.nav a.nav-ext { display: inline-flex; align-items: center; gap: 5px; }
.nav a.nav-ext svg { width: 8px; height: 8px; }

/* phones: the menu opens as a panel under the masthead */
.menu-btn { display: none; min-height: 34px; padding: 0 12px; border: 0; background: transparent; color: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); font: 600 0.8rem var(--f-body); }
@media (max-width: 980px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .masthead.menu-open .nav { display: flex; flex-direction: column; gap: 4px; position: absolute; top: 100%; left: 0; right: 0; padding: 10px var(--gutter) 18px; background: var(--arc); border-bottom: 1px solid var(--line); }
  .masthead.menu-open .nav a { padding: 10px 0; font-size: 1.05rem; opacity: 1; border-top: 1px solid var(--rule-night); }
}
@media (max-width: 420px) { .masthead .gh .gh-stars { display: none; } }
/* the narrowest phones (320 px, the first iPhone SE): the masthead keeps Menu, Sound and DEXTools (GitHub is linked
   further down), and the walk's words are set a size smaller so they sit under the arch instead of over it */
@media (max-width: 340px) {
  .masthead .gh { display: none; }
  .wt { gap: 6px; }
  .wt .inscr { font-size: 1.3rem; }
  .wt h3 { font-size: 1.08rem; }
  .wt p { font-size: 0.8rem; line-height: 1.38; }
  .wt .bay-era .when { font-size: 0.75rem; }
  .wt .echo { padding-top: 6px; gap: 6px; }
}

/* the business page: the promise beside the engraved aqueduct */
.c-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.c-hero .c-hero-copy { display: grid; gap: 24px; justify-items: start; }
.c-hero .c-mega { font: 400 clamp(3.4rem, 7.6vw, 7.4rem)/0.95 var(--f-display); text-transform: none; max-width: none; }
.c-kpis { justify-content: flex-start; }
.c-kpis li:first-child { padding-left: 0; }
.c-plate { margin: 0; }
.c-plate-canvas { display: block; width: 100%; aspect-ratio: 600 / 770; max-height: 82vh; opacity: 0; transition: opacity 0.9s var(--ease); }
.c-plate-canvas.ready { opacity: 1; }
@media (max-width: 980px) { .c-hero-grid { grid-template-columns: minmax(0, 1fr); } .c-plate-canvas { max-width: 460px; margin: 0 auto; } }

/* the engraved finale */
.climax-canvas { display: block; width: 100%; }
.morph-canvas { display: block; width: 100%; max-width: 1200px; margin-inline: auto; }

/* Run a node: the download follows the latest release */
.run { background: var(--arc); color: var(--white); padding-block: clamp(80px, 14vh, 160px); border-top: 1px solid var(--rule-night); }
.run-inner { display: grid; justify-items: center; gap: 20px; text-align: center; }
.run h2 { font: 400 clamp(2.6rem, 5.4vw, 5rem)/1 var(--f-display); text-wrap: balance; max-width: 14em; }
.run .lead { max-width: 38em; }
.run-dl { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.run-others { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin: 0; padding: 0; list-style: none; font: 600 0.92rem var(--f-body); }
.run-others a, .run-meta a, .run-rewards a { color: var(--white); text-underline-offset: 4px; }
/* on a phone: what the node app runs on, and the downloads as rows big enough to tap */
.run-phone { margin: 0; max-width: 30em; color: rgba(255, 255, 255, 0.86); text-wrap: balance; }
@media (max-width: 560px) {
  .run-others { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; font-size: 0.95rem; }
  .run-others a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 10px; text-align: center; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
  .run-others a:active { background: rgba(255, 255, 255, 0.12); }
}
.run-meta { font: 500 0.9rem var(--f-body); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.run-rewards { font: 500 0.95rem var(--f-body); color: var(--ink-soft); }

/* What we will own: one line for each arch, lit as you reach it */
.manifesto { background: var(--arc); color: var(--white); padding-block: clamp(90px, 16vh, 180px); }
.man-inner { display: grid; justify-items: center; }
/* a litany: one line each on a wide screen, the arch's numeral in its own column, the last line on its own */
.man-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(10px, 1.9vh, 20px); width: fit-content; max-width: 100%; font: 400 clamp(1.5rem, 2.75vw, 2.75rem)/1.12 var(--f-display); }
.man-list li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); align-items: baseline; column-gap: 0.55em; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), text-shadow 0.9s var(--ease); }
.man-list li > span:last-child { white-space: nowrap; }
.man-list li:last-child { font-size: 1.5em; grid-template-columns: 2.1333em minmax(0, 1fr); column-gap: 0.3667em; margin-top: 0.55em; padding-top: 0.5em; border-top: 1px solid rgba(255, 255, 255, 0.35); }   /* its columns scaled back, so the words line up */
.man-list li:last-child .man-num { font-size: 0.42em; }
.man-num { font: 400 0.62em/1 var(--f-display); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.62); text-align: right; }
.man-js .man-list li { opacity: 0.38; transform: translateY(8px); }
.man-js .man-list li.in { opacity: 1; transform: none; text-shadow: 0 0 28px rgba(255, 255, 255, 0.22); }
@media (prefers-reduced-motion: reduce) { .man-js .man-list li { opacity: 1; transform: none; transition: none; } }
@media (max-width: 900px) {
  .man-list li > span:last-child { white-space: normal; text-wrap: pretty; }
}
@media (max-width: 600px) {
  .man-list { font-size: clamp(1.35rem, 6.2vw, 1.8rem); width: 100%; }
  .man-list li { grid-template-columns: 2.2em minmax(0, 1fr); column-gap: 0.45em; }
  .man-list li:last-child { font-size: 1.3em; grid-template-columns: 1.692em minmax(0, 1fr); column-gap: 0.346em; }
}

/* each arch's line: what we will own, then how Arc does it */
.echo b.own { margin-bottom: 6px; font: 400 clamp(1.3rem, 1.9vw, 1.7rem)/1.18 var(--f-display); letter-spacing: 0.005em; color: var(--white); text-wrap: balance; }
@media (max-width: 980px) { .wt .echo b.own { font-size: 1.22rem; } }

/* no single word left alone at the end of the opening paragraph */
.hero-copy .lead { text-wrap: pretty; }
.sonic-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block: 1.25rem; }
.sonic-controls .btn { font: inherit; cursor: pointer; }
.sonic-controls [role="status"] { font-size: .85rem; }