/* Mineral world — the palette of content.json (named after the materials) and the type measured on the nearest reference of the sector
   (display 168 px at 1440, weight 500, leading 0.70, tracking −0.04 em → Geist 500 (OFL; General Sans left: the ITF licence forbids SaaS use)). */
:root {
  --ivory: #efeae0; --porcelain: #fcfbf7; --graphite: #1d1c1a; --oxide: #8f3b27; --gold: #c2af8a;
  --ink: var(--graphite);
  --face: 'Geist', ui-sans-serif, sans-serif;
  --display: clamp(44px, 11.6vw, 168px);
  --lead: 0.84;
  --track: -0.04em;
  --gutter: clamp(16px, 2.2vw, 32px);
  /* the measured line reveal: lines from −110 % → 0, power3.out, 0.78–0.94 s, 0.08 s between lines */
  --reveal-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --reveal-dur: 0.86s;
}
/* dark: the same place at dusk (world.js relights the scene on `themechange`): fired-clay air, porcelain ink, the plates
   turn to fired earth. Dark, never black. */
:root[data-theme='dark'] { --ivory: #2b2520; --ink: var(--porcelain); }
:root[data-theme='dark'] .loader__n { color: var(--porcelain); }
html { background: var(--ivory); }
body { margin: 0; color: var(--ink); font-family: var(--face); font-weight: 400; -webkit-font-smoothing: antialiased; background: transparent; transition: color 0.6s var(--reveal-ease); }
/* the future is lit too (22/10): the ink stays graphite on both sides of the threshold */
#world { position: fixed; inset: 0; width: 100vw; height: 100svh; z-index: 0; display: block; pointer-events: none; }
main { position: relative; z-index: 1; }


.loader { position: fixed; inset: 0; z-index: 10; background: var(--ivory); display: flex; align-items: flex-end; justify-content: flex-end; padding: var(--gutter); transition: opacity 0.9s var(--reveal-ease), visibility 0s linear 0.9s; }
.loader__n { font-size: var(--display); font-weight: 500; line-height: 0.8; letter-spacing: var(--track); font-variant-numeric: tabular-nums; color: var(--graphite); }
body:not(.is-loading) .loader { opacity: 0; visibility: hidden; }

/* a section: tall for scroll, its words held on screen while the world moves behind them (heights set per section) */
.ch { position: relative; height: 120svh; }
.ch__hold { position: sticky; top: 0; height: 100svh; display: grid; padding: calc(var(--gutter) * 3.2) var(--gutter) calc(var(--gutter) * 1.6); box-sizing: border-box; }
.ch--hero .ch__hold { align-content: end; }
.pos-l .ch__hold { align-content: center; justify-items: start; }
.pos-r .ch__hold { align-content: center; justify-items: end; text-align: right; }
.pos-c .ch__hold { align-content: center; justify-items: center; text-align: center; }
.pos-bl .ch__hold { align-content: end; justify-items: start; }
.pos-br .ch__hold { align-content: end; justify-items: end; text-align: right; }
.pos-tr .ch__hold { align-content: start; justify-items: end; text-align: right; }
.pos-tl .ch__hold { align-content: start; justify-items: start; }
.ch--close .ch__hold { align-content: end; }
.ch--close .ch__inner { width: 100%; }

/* one word of content.json, at the size of the idea, with its place in the list */
.word { font-size: var(--display); font-weight: 500; line-height: var(--lead); letter-spacing: var(--track); margin: 0; }
.idx { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; font-variant-numeric: tabular-nums; }
.pos-br .idx, .pos-tr .idx, .pos-r .idx { justify-content: flex-end; }
.pos-c .idx { justify-content: center; }
.idx__sep { width: 28px; height: 1px; background: currentColor; opacity: 0.5; }

.big { font-size: var(--display); font-weight: 500; line-height: var(--lead); letter-spacing: var(--track); margin: 0; max-width: 14ch; text-transform: uppercase; }
.ch--hero .big { max-width: 11ch; }
.mid { font-size: clamp(28px, 4.4vw, 64px); font-weight: 500; line-height: 0.98; letter-spacing: -0.03em; margin: 0; max-width: 18ch; }
.small { font-size: 15px; line-height: 1.4; margin: 0 0 18px; max-width: 34ch; opacity: 0.78; }
.words { display: flex; flex-wrap: wrap; gap: 0 0.35em; margin: 22px 0 0; padding: 0; list-style: none; font-size: clamp(28px, 4.4vw, 64px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.wordmark { font-size: 18vw; font-weight: 500; letter-spacing: -0.055em; line-height: 0.8; margin: 0; white-space: nowrap; width: max-content; }
.wordmark sup { font-size: 0.16em; vertical-align: top; position: relative; top: 0.5em; margin-left: 0.06em; letter-spacing: 0; }
.wordmark sup { font-size: 0.2em; vertical-align: top; position: relative; top: 0.32em; margin-left: 0.04em; letter-spacing: 0; }
.close__row { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-top: 28px; font-size: 15px; }

/* the edges (core/edges.css): nothing bars the view. The name, the parts of the page and the button float as stones over
   the world, each on its own pill of frosted air, and they turn ivory or graphite with the world they cross. The readout
   is the kiln: room heat over the ground, firing heat at the form. The page already ends on the name, so the footer
   does not repeat it. */
:root {
  --edge-accent: var(--oxide); --edge-accent-ink: var(--porcelain); --edge-face: var(--face); --edge-text: var(--face);
  --edge-backdrop: transparent; --edge-sheet-bg: var(--graphite); --edge-sheet-ink: var(--porcelain);
  --edge-foot-bg: var(--graphite); --edge-foot-ink: var(--porcelain); --edge-radius: 999px;
}
.edge-head { --edge-ink: var(--ink); --edge-line: color-mix(in srgb, var(--ink) 20%, transparent); --pill: color-mix(in srgb, var(--ivory) 62%, transparent); }
body.edge-open .edge-head { --pill: transparent; --edge-line: rgba(252, 251, 247, 0.2); }
.edge-head[data-state='pinned'] { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
.edge-brand, .edge-nav, .edge-live, .edge-menu, .edge-theme { background: var(--pill); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 999px; transition: background-color 0.6s var(--reveal-ease); }
.edge-brand { height: 40px; padding: 0 16px 0 12px; box-sizing: border-box; }
.edge-brand__word { font-weight: 500; letter-spacing: -0.02em; }
.edge-nav { justify-self: center; padding: 0 22px; border: 1px solid var(--edge-line); }
.edge-nav__link { padding: 13px 0; }
.edge-nav__bar { bottom: 6px; height: 1.5px; }
.edge-nav__detail { padding: 6px 12px; border-radius: 999px; background: var(--pill); }
.edge-live { padding: 8px 16px 9px; }
.edge-menu, .edge-theme { border-color: var(--edge-line); }
.edge-mark__fire { fill: var(--oxide); opacity: calc(0.2 + var(--k, 0) * 0.8); transform-box: fill-box; transform-origin: center; transform: scale(calc(0.6 + var(--k, 0) * 0.5)); transition: opacity 0.4s, transform 0.4s; }
.edge-sheet { background-image: radial-gradient(120% 80% at 100% 100%, rgba(143, 59, 39, 0.38), transparent 60%); }
.edge-sheet__label, .edge-foot__statement { font-weight: 500; letter-spacing: -0.04em; }
.edge-sheet__link.is-on .edge-sheet__label { color: var(--gold); }
.edge-sheet .edge-live__meter i { background: var(--gold); }
.edge-foot { --edge-accent: var(--gold); --edge-accent-ink: var(--graphite); --edge-line: rgba(252, 251, 247, 0.16); }
.edge-foot__mark { display: none; }
@media (max-width: 900px) { .edge-head > .edge-live { display: none; } }

/* the line reveal: each line is a mask, its inner moves from below (play on enter, reverse on leave) */
.line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.line > span { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform var(--reveal-dur) var(--reveal-ease); transition-delay: calc(var(--i, 0) * 0.08s); will-change: transform; }
.is-in .line > span { transform: none; }
.fade { opacity: 0; transition: opacity 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.35s; }
.is-in .fade { opacity: 1; }

/* the hand: a dot that becomes a ring on stone, and a wider ring with arrows on the form it can turn */
.cursor { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; width: 0; height: 0; color: var(--ink); transition: color 0.6s var(--reveal-ease); }
.cursor span { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-sizing: border-box; transition: width 0.45s var(--reveal-ease), height 0.45s var(--reveal-ease), left 0.45s var(--reveal-ease), top 0.45s var(--reveal-ease), background-color 0.3s, border-color 0.3s; border: 1px solid transparent; }
.cursor.is-hot span { width: 46px; height: 46px; left: -23px; top: -23px; background: transparent; border-color: currentColor; }
.cursor.is-form span { width: 72px; height: 72px; left: -36px; top: -36px; background: transparent; border-color: var(--gold); }
.cursor::before, .cursor::after { content: ''; position: absolute; top: -4px; width: 7px; height: 7px; border: solid var(--gold); border-width: 0 0 1px 1px; opacity: 0; transition: opacity 0.3s, transform 0.45s var(--reveal-ease); }
.cursor::before { left: -50px; transform: rotate(45deg) translate(6px, -6px); }
.cursor::after { left: 42px; transform: rotate(-135deg) translate(6px, -6px); }
.cursor.is-form::before, .cursor.is-form::after { opacity: 1; }
body.is-dragging { cursor: grabbing; user-select: none; }
@media (pointer: fine) { html, body, a { cursor: none; } }
@media (pointer: coarse) { .cursor { display: none; } main { touch-action: pan-y; } }

@media (max-width: 720px) {
  .pos-r .ch__hold, .pos-br .ch__hold, .pos-tr .ch__hold { justify-items: start; text-align: left; }
  .pos-br .idx, .pos-tr .idx, .pos-r .idx { justify-content: flex-start; }
  /* on a phone the camera looks down on the storm: the calm ground is the top of the frame (1.65:1 mid-screen, 22/10) */
  .pos-r .ch__hold { align-content: start; }
  .close__row { flex-direction: column; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .line > span, .fade { transition: none; transform: none; opacity: 1; }
}
/* the eyebrow is a pill of blurred ivory, like the bar's: it crosses stone and rock and must still read (gate, 22/10) */
.idx { width: max-content; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ivory) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pos-br .idx, .pos-tr .idx, .pos-r .idx { margin-left: auto; }
.pos-c .idx { margin-left: auto; margin-right: auto; }
.edge-live__k { opacity: 0.8; }
@media (max-width: 720px) { .pos-br .idx, .pos-tr .idx, .pos-r .idx { margin-left: 0; } }

/* on a phone the world's object holds the middle of the screen (the porcelain shards cross it in the future part):
   title chapters sit in the upper third, clear of it (contrast gate, 390 future 1.86:1, 22/10) */
@media (max-width: 720px) { .ch--title .ch__hold { align-content: start; padding-top: max(96px, 16svh); } }

/* the cursor shows only while a pointer is over the page: at rest it was a dot parked on the scene, in every screenshot and card video (22/10) */
.cursor { opacity: 0; transition: color 0.6s var(--reveal-ease), opacity 0.3s; } .cursor.is-in { opacity: 1; }

/* what a stop says besides its word (22/10: «todos têm um texto ali assim, sem mais nada»): the material, one sentence,
   its numbers, on a plate of frosted ivory so it reads over stone and porcelain alike. No rules between the facts. */
.stop { width: min(400px, 100%); box-sizing: border-box; margin-top: 26px; padding: 18px 20px 20px; border-radius: 20px; text-align: left; background: color-mix(in srgb, var(--ivory) 80%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.stop__name { margin: 0 0 6px; font-size: 21px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.stop__line { margin: 0; font-size: 15px; line-height: 1.45; }
.stop__spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; }
.stop--spec .stop__spec { margin: 0; }
.stop__fact { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 3px; margin: 0; }
.stop__fact dd { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; }
.stop__fact dt { font-size: 12px; line-height: 1.3; opacity: 0.8; }
.stop__go { display: inline-flex; margin-top: 18px; padding: 10px 16px; border-radius: 999px; background: var(--oxide); color: var(--porcelain); font-size: 14px; font-weight: 500; text-decoration: none; }
.about { margin: 22px 0 0; max-width: 44ch; font-size: 17px; line-height: 1.45; padding: 12px 16px; border-radius: 16px; text-align: left; background: color-mix(in srgb, var(--ivory) 80%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } /* over stone and fog it read at 3.0–4.2:1 (gate, 22/10) */
.pos-c .about, .pos-c .stop { margin-left: auto; margin-right: auto; }
.pos-r .stop, .pos-br .stop, .pos-tr .stop { margin-left: auto; }
@media (max-width: 720px) { .stop { margin-top: 18px; padding: 14px 16px 16px; } .stop__spec { gap: 10px; } .stop__fact dd { font-size: 15px; } .about { font-size: 15px; } .pos-r .stop, .pos-br .stop, .pos-tr .stop { margin-left: 0; } }