/* SIMPLEX point-field pages: the shared shell (tokens, type, paper layers, bar, index, stage). Concept C's styles, on paper. */
@font-face { font-family: "Bodoni Moda"; src: url("fonts/bodoni-moda-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --void: #f8f8f6; /* the paper: a neutral near-white (owner, 2026-10-29) */
  --cream: #1c1b19; /* the ink */
  --stone: #6b6458;
  --green: #008656; /* the wordmark's green, the only colour */
  --green-l: #008656;
  --glow: #008656;
  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Jost", Futura, "Avenir Next", system-ui, sans-serif;
  --gut: clamp(20px, 4.4vw, 64px);
  --col: max(var(--gut), 15vw);
  --top: 15vh;
  --fs-hero: clamp(44px, 6.6vw, 112px);
  --fs-xl: clamp(44px, 6.4vw, 104px);
  --fs-l: clamp(34px, 4.6vw, 74px);
  --fs-m: clamp(27px, 2.75vw, 44px);
  --fs-s: clamp(17px, 1.3vw, 20px);
  --fs-xs: 13px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--void); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--void); color: var(--cream); font: 400 var(--fs-s)/1.55 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html[lang="en"] .pt, html:not([lang="en"]) .en { display: none !important; }
h1, h2, p, ol, ul, li, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
br.m { display: none; }
::selection { background: rgba(0, 134, 86, .18); color: var(--cream); }
:focus-visible { outline: 2px solid var(--green-l); outline-offset: 4px; border-radius: 2px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--cream); color: var(--void); font-size: 14px; text-decoration: none; }
.skip:focus { top: 12px; }

/* type: Bodoni Moda for statements, Jost for the reading lines */
.hero, .d-xl, .d-l, .d-m, .d-s, .cta, .serif { font-family: var(--serif); font-weight: 400; font-optical-sizing: auto; letter-spacing: -.012em;
  -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* grayscale smoothing thins Didone hairlines */
.hero { font-size: var(--fs-hero); line-height: 1.0; max-width: 13.5em; }
.d-xl, .d-l, .d-m, .d-s, .t-s { text-wrap: balance; }
.d-xl { font-size: var(--fs-xl); line-height: 1.0; }
.d-l { font-size: var(--fs-l); line-height: 1.06; max-width: 15em; }
.d-m { font-size: var(--fs-m); line-height: 1.16; max-width: 19em; font-weight: 440; }
.d-s { font-size: clamp(23px, 2.1vw, 34px); line-height: 1.22; max-width: 24em; font-weight: 440; }
.t-s { font-size: var(--fs-s); line-height: 1.55; max-width: 34em; color: var(--stone); }
.kick { font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--green-l); }
.wm, .w { display: inline-block; }
.nw { white-space: nowrap; }
[data-split="rise"] .wm { clip-path: inset(-.6em -.12em -.04em -.12em); } /* a whole line rises from behind its own baseline */
.sweep { -webkit-background-clip: text; background-clip: text; color: transparent; background-repeat: no-repeat; background-size: 260% 100%; background-position: 0% 0;
  background-image: linear-gradient(100deg, var(--cream) 0 44%, var(--glow) 49.5%, rgba(0, 134, 86, 0) 55%); }
html:not(.fx) .sweep { color: inherit; background: none !important; }
.cue { display: flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: .04em; color: var(--stone); }
.cue i { position: relative; width: 120px; height: 1px; background: rgba(28, 27, 25, .2); overflow: hidden; }
.cue i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--green), transparent); transform: translateX(-100%); }
.fx .cue i::after { animation: cue 1.6s linear infinite; } /* a spark that never stops: the page is waiting for the reader */
@keyframes cue { to { transform: translateX(250%); } }

/* fixed paper layers */
.sky, .vig, .grain, .shade { position: fixed; pointer-events: none; }
.sky { inset: 0; z-index: 0; background: linear-gradient(180deg, #f9f9f7 0%, #f7f7f5 100%); }
.vig { inset: 0; z-index: 4; background: radial-gradient(120% 95% at 50% 45%, transparent 62%, rgba(70, 70, 64, .05) 100%); } /* a faint neutral edge, never a grey frame */
.shade { left: 0; right: 0; top: 0; height: 104px; z-index: 20; background: linear-gradient(180deg, rgba(248, 248, 246, .94), rgba(248, 248, 246, .6) 50%, rgba(248, 248, 246, 0)); }
.grain { z-index: 40; inset: -60%; width: 220%; height: 220%; opacity: .05; mix-blend-mode: multiply; background-size: 160px 160px; } /* the paper's tooth */
.fx .grain { animation: grain 1.1s steps(7) infinite; }
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); } 15% { transform: translate3d(-3%, 2%, 0); } 30% { transform: translate3d(2%, -4%, 0); }
  45% { transform: translate3d(-4%, -1%, 0); } 60% { transform: translate3d(3%, 3%, 0); } 75% { transform: translate3d(-1%, 4%, 0); } 90% { transform: translate3d(4%, -2%, 0); } }

/* chrome */
.bar { position: fixed; z-index: 30; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 22px var(--gut) 0; pointer-events: none; }
.bar > * { pointer-events: auto; }
.mark img { width: 118px; height: auto; margin: -6px 0 -6px -14px; } /* the wordmark is already the brand green */
.lang { display: flex; gap: 4px; align-items: center; }
html:not(.js) .lang { display: none; }
.lang button { appearance: none; border: 0; background: none; color: var(--stone); font: 500 13px/1 var(--sans); letter-spacing: .06em; padding: 10px 8px; cursor: pointer; }
.lang button[aria-pressed="true"] { color: var(--cream); text-decoration: underline; text-decoration-color: var(--green-l); text-underline-offset: 7px; text-decoration-thickness: 1px; }
.lang button:hover { color: var(--cream); }
.now { display: none; font: 500 13px/1 var(--sans); color: var(--cream); font-variant-numeric: tabular-nums; margin-right: auto; margin-left: 18px; }
.idx { position: fixed; z-index: 30; left: var(--gut); top: 50%; transform: translateY(-50%); display: none; gap: 14px; }
.fx .idx { display: flex; }
.idx ol { display: flex; flex-direction: column; gap: 10px; }
.idx a { display: block; text-decoration: none; font: 500 12px/1 var(--sans); letter-spacing: .04em; color: rgba(28, 27, 25, .42); font-variant-numeric: tabular-nums; padding: 2px 0; transition: color .4s ease; }
.idx a:hover, .idx a.on { color: var(--cream); }
.idx-line { position: relative; width: 1px; background: rgba(28, 27, 25, .14); }
.idx-line i { position: absolute; inset: 0; background: var(--green-l); transform-origin: top; transform: scaleY(0); }
.topline { display: none; }

/* reading order (no JavaScript, reduced motion) */
main { position: relative; z-index: 3; }
.field, .lbl { display: none; }
.ch { position: relative; padding: 15vh var(--gut) 6vh var(--col); display: flex; flex-direction: column; gap: 3.4vh; }
.blk { display: flex; flex-direction: column; gap: 3vh; }
html:not(.fx) .swap { display: flex; flex-direction: column; gap: 3vh; }

/* the stage: one fixed picture, the beats drawn on it */
.fx:not(.ready) main, .fx:not(.ready) .bar, .fx:not(.ready) .idx { visibility: hidden; }
.fx .bar, .fx .idx, .fx .topline { transition: opacity 1s ease .9s; }
.fx:not(.go) .bar, .fx:not(.go) .idx, .fx:not(.go) .topline { opacity: 0; }
.fx .track { position: relative; height: var(--track, 2000vh); }
.fx .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.fx .field { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.fx .ch { position: absolute; inset: 0; z-index: 3; padding: 0; display: block; min-height: 0; pointer-events: none; }
.fx .ch a, .fx .ch button { pointer-events: auto; }
.fx [data-on] { opacity: 0; will-change: opacity; }
.fx .blk { position: absolute; left: var(--col); right: var(--gut); top: var(--top); gap: 0; }
.fx .swap { display: grid; }
.fx .swap > * { grid-area: 1 / 1; }
.fx .lbl { display: block; position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap; font-size: 13px; letter-spacing: .03em; color: var(--stone); will-change: transform, opacity; }

@media (max-width: 760px) {
  :root { --col: var(--gut); --fs-s: 17px; --top: 13vh; }
  br.d { display: none; }
  br.m { display: inline; }
  .fx .idx { display: none; }
  .now { display: block; }
  .fx .topline { display: block; position: fixed; z-index: 31; left: 0; right: 0; top: 0; height: 2px; background: rgba(28, 27, 25, .08); }
  .topline i { position: absolute; inset: 0; background: var(--green-l); transform-origin: left; transform: scaleX(0); }
  .shade { height: 96px; background: linear-gradient(180deg, rgba(248, 248, 246, .97), rgba(248, 248, 246, .88) 52%, rgba(248, 248, 246, 0)); }
  .bar { padding-top: 14px; }
  .mark img { width: 96px; margin-left: -11px; }
  .hero { font-size: clamp(34px, 9.6vw, 44px); line-height: 1.04; }
  .d-xl { font-size: clamp(34px, 9.6vw, 44px); line-height: 1.04; }
  .d-l { font-size: clamp(30px, 8.6vw, 38px); }
  .d-m { font-size: clamp(25px, 7vw, 30px); }
  .d-s { font-size: 20px; }
  .hero, .d-xl, .d-l, .d-m, .d-s, .cta, .serif { font-weight: 480; } /* Didone hairlines need weight at phone sizes */
}