/* Story pages (also shown inside the globe). Palette: WAAW Blue, Deep Blue, Tint, White, Ink.
   Type system matches the landing page: Archivo Black-weight caps for statements,
   Archivo Light for sentences. Layout is editorial, not cards. */
:root { --zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.16' height='6.7' viewBox='0 0 12.16 6.7'%3E%3Cpath d='M0 0H1L3.04 6.7H2.04Z M5.08 0H6.08L4.04 6.7H3.04Z M6.08 0H7.08L9.12 6.7H8.12Z M11.16 0H12.16L10.12 6.7H9.12Z'/%3E%3C/svg%3E"); }
body.pg { background: #fff; color: var(--ink); }
body.pg a { color: inherit; }

/* Header band (standalone pages) */
.pg-head { position: relative; color: #fff; overflow: hidden;
  background: radial-gradient(70% 70% at 100% 20%, var(--glow) 0%, transparent 60%), radial-gradient(60% 60% at 0% 100%, var(--glow) 0%, transparent 55%), linear-gradient(160deg, var(--wb) 0%, var(--mid) 100%); }
.pg-head > * { position: relative; z-index: 1; }
.pg-top { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem var(--pad); }
.pg-logo { display: block; line-height: 0; }
.pg-logo img { height: clamp(1rem, 1.9vw, 1.5rem); width: auto; display: block; }
.pg-nav { display: flex; gap: 1.5rem; align-items: center; }
.pg-nav .link { color: #fff; border-bottom-color: rgba(255,255,255,.45); }
.pg-nav .link:hover { border-color: #fff; }
.pg-hero { padding: clamp(4.5rem, 11vw, 8rem) var(--pad) clamp(3rem, 8vw, 6rem); max-width: 96rem; margin: 0 auto; }
.pg-hero .k { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.7); margin: 0 0 clamp(1.25rem, 3vw, 2rem); }
.pg-title { margin: 0; font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .9; font-size: clamp(2.4rem, 8.6vw, 7.6rem); max-width: 13em; overflow-wrap: break-word; text-wrap: balance; }
.pg-lede { margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; max-width: 30em; font-weight: 300; letter-spacing: -.02em; line-height: 1.15; font-size: clamp(1.25rem, 2.6vw, 2.2rem); color: rgba(255,255,255,.92); }

/* Plates: full-bleed sections, each composed differently */
.plate { position: relative; padding: clamp(4.5rem, 10vw, 8.5rem) var(--pad); }
.plate > * { max-width: 96rem; margin-left: auto; margin-right: auto; }
.plate--tint { background: var(--tint); }
.plate--blue { background: var(--wb); color: #fff; }
.plate--deep { background: var(--deep); color: #fff; }
.zig { display: block; width: clamp(7rem, 22vw, 14rem); aspect-ratio: 12.16 * 4 / 6.7; background: currentColor; -webkit-mask: var(--zig) repeat-x left / auto 100%; mask: var(--zig) repeat-x left / auto 100%; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.lab { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; opacity: .7; margin: 0 0 clamp(1rem, 2.5vw, 1.75rem); }
.disp { margin: 0; font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .88; font-size: clamp(2.4rem, 8vw, 7.4rem); overflow-wrap: break-word; }
.soft { margin: 0; font-weight: 300; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(1.7rem, 4.6vw, 4rem); text-wrap: balance; }
.disp em, .soft em { font-style: normal; color: var(--wb); }
.plate--blue .disp em, .plate--blue .soft em, .plate--deep .disp em, .plate--deep .soft em { color: #fff; opacity: .62; }
.body { margin: 0; max-width: 34em; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; }
.body + .body { margin-top: 1.1rem; }
.body--lead { font-weight: 600; letter-spacing: -.02em; line-height: 1.22; font-size: clamp(1.3rem, 2.3vw, 1.9rem); }
.dim { opacity: .62; }

.split { display: grid; gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.bignum { font-weight: 900; letter-spacing: -.06em; line-height: .78; font-size: clamp(9rem, 34vw, 28rem); color: transparent; -webkit-text-stroke: clamp(2px, .5vw, 5px) var(--wb); margin: 0 0 0 -.04em; }
.bignum-cap { margin: 1rem 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--wb); }
.pair { display: grid; gap: .75rem 4rem; align-items: end; }
.pair + .pair { margin-top: clamp(3rem, 8vw, 6rem); }
.pair .note { max-width: 22em; font-size: 1rem; line-height: 1.5; }

/* Index rows: hairline list, description appears on hover/focus (always on touch) */
.index { list-style: none; margin: clamp(1.5rem, 4vw, 3rem) auto 0; padding: 0; border-top: 2px solid currentColor; }
.index li { display: grid; gap: .4rem 3rem; align-items: baseline; padding: clamp(1rem, 2.4vw, 1.8rem) 0; border-bottom: 1px solid rgba(17,20,33,.2); outline-offset: 4px; }
.plate--blue .index li, .plate--deep .index li { border-bottom-color: rgba(255,255,255,.28); }
.index h3 { margin: 0; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-size: clamp(1.6rem, 4.2vw, 3.6rem); transition: color .3s, transform .45s var(--ease); }
.index p { margin: 0; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.45; max-width: 28em; transition: opacity .35s; }
.index .n { font-weight: 900; letter-spacing: -.05em; line-height: .9; font-size: clamp(2.2rem, 6vw, 5rem); color: var(--wb); }
.plate--blue .index .n, .plate--deep .index .n { color: rgba(255,255,255,.6); }
@media (hover: hover) {
  .index p { opacity: .74; }
  .index li:hover p, .index li:focus-visible p, .index li:focus-within p { opacity: 1; }
  .index li:hover h3, .index li:focus-visible h3 { color: var(--wb); transform: translateX(.4rem); }
  .plate--blue .index li:hover h3, .plate--deep .index li:hover h3 { color: var(--tint); }
}

/* Dictionary rows: label + big text */
.def { display: grid; gap: .75rem 4rem; padding: clamp(1.5rem, 3.5vw, 2.75rem) 0; border-bottom: 1px solid rgba(17,20,33,.2); }
.def:first-of-type { border-top: 2px solid var(--ink); }
.def dt { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--wb); }
.def dd { margin: 0; font-weight: 300; letter-spacing: -.03em; line-height: 1.1; font-size: clamp(1.45rem, 3.2vw, 2.8rem); max-width: 22em; }

/* Race */
.race { list-style: none; margin: clamp(1.5rem, 4vw, 3rem) auto 0; padding: 0; border-top: 2px solid var(--ink); }
.race li { display: grid; grid-template-columns: minmax(6rem, .55fr) 1.5fr auto; align-items: baseline; gap: 1rem; padding: clamp(.8rem, 1.8vw, 1.3rem) 0; border-bottom: 1px solid rgba(17,20,33,.2); transition: padding-left .4s var(--ease), color .3s; }
.race li:hover { padding-left: 1rem; color: var(--wb); }
.race b { font-weight: 900; letter-spacing: -.06em; line-height: .9; font-size: clamp(2.6rem, 9vw, 7.5rem); }
.race span { font-size: clamp(.95rem, 1.5vw, 1.25rem); }
.race em { font-style: normal; font-weight: 800; letter-spacing: -.03em; color: var(--wb); font-size: clamp(1.2rem, 3vw, 2.4rem); text-align: right; }

.lines { list-style: none; margin: clamp(1.5rem, 4vw, 3rem) auto 0; padding: 0; border-top: 2px solid currentColor; }
.lines li { padding: clamp(.8rem, 1.8vw, 1.2rem) 0; border-bottom: 1px solid rgba(17,20,33,.2); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-size: clamp(1.4rem, 3.6vw, 3rem); transition: padding-left .4s var(--ease), color .3s; }
.plate--blue .lines li, .plate--deep .lines li { border-bottom-color: rgba(255,255,255,.28); }
.lines li:hover { padding-left: 1rem; color: var(--wb); }
.plate--blue .lines li:hover { color: var(--tint); }
.lines em { font-style: normal; font-weight: 300; opacity: .6; }

/* Stand rows: not this / not this / WAAW */
.stand { list-style: none; margin: clamp(1.5rem, 4vw, 3rem) auto 0; padding: 0; border-top: 2px solid var(--ink); }
.stand li { display: grid; gap: .5rem 3rem; padding: clamp(1.1rem, 2.4vw, 1.8rem) 0; border-bottom: 1px solid rgba(17,20,33,.2); align-items: baseline; }
.stand .t { font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; opacity: .6; }
.stand h3 { margin: 0; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-size: clamp(1.5rem, 3.4vw, 2.8rem); }
.stand q { quotes: none; display: block; font-weight: 300; letter-spacing: -.02em; font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.2; }
.stand p { margin: .4rem 0 0; font-size: 1rem; line-height: 1.45; opacity: .8; }
.stand .us { background: var(--wb); color: #fff; padding-left: 1.25rem; padding-right: 1.25rem; margin: 0 calc(-1 * 1.25rem); }
.stand .us .t { opacity: .75; }

.rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid currentColor; }
.rows li { padding: .85rem 0; border-bottom: 1px solid rgba(17,20,33,.18); font-weight: 600; font-size: clamp(1.05rem, 1.7vw, 1.35rem); letter-spacing: -.015em; }
.cols2 { display: grid; gap: 2.5rem clamp(2rem, 6vw, 6rem); }
.cols2 h3 { margin: 0 0 .9rem; font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--wb); }

/* Manifesto */
.man { background: var(--wb); color: #fff; padding: clamp(4rem, 10vw, 9rem) var(--pad); }
.man > * { max-width: 96rem; margin-left: auto; margin-right: auto; }
.man p { margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem); max-width: 20em; font-weight: 800; letter-spacing: -.04em; line-height: 1.02; font-size: clamp(1.7rem, 4.6vw, 4rem); }
.man p.dim { font-weight: 300; opacity: .72; letter-spacing: -.035em; }
.man .gap { height: clamp(2rem, 6vw, 5rem); }
.man .end { font-weight: 900; text-transform: uppercase; letter-spacing: -.05em; line-height: .86; font-size: clamp(2.8rem, 12vw, 11rem); max-width: 9em; margin-top: clamp(2rem, 6vw, 4rem); }
.man .sign { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; opacity: .8; }

/* Join (demo form) */
.join { margin-top: clamp(3rem, 7vw, 5rem); padding: clamp(1.5rem, 4vw, 2.75rem); background: var(--deep); color: #fff; max-width: 42rem; }
.join h3 { margin: 0 0 .5rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; line-height: .95; font-size: clamp(1.6rem, 3.6vw, 2.6rem); }
.join p { margin: 0; opacity: .85; }
.join form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.join input { color: #fff; border-color: rgba(255,255,255,.5); }
.join input::placeholder { color: rgba(255,255,255,.5); }
.join input:focus-visible { border-color: #fff; }
.join .btn { background: #fff; color: var(--deep); }
.join .drop__msg { color: rgba(255,255,255,.85); }

/* Previous / next and footer */
.pg-next { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; padding: clamp(2.5rem, 6vw, 4rem) var(--pad); max-width: 96rem; margin: 0 auto; }
.pg-next a { text-decoration: none; font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; font-size: clamp(1.4rem, 3.4vw, 2.8rem); line-height: 1; transition: color .25s; }
.pg-next a small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .22em; color: var(--wb); margin-bottom: .5rem; }
.pg-next a:hover { color: var(--wb); }
.pg-next .r { text-align: right; margin-left: auto; }
.pg-foot { background: var(--deep); color: #fff; padding: clamp(2rem, 5vw, 3rem) var(--pad); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2.5rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.pg-foot img { height: 1.1rem; width: auto; display: block; }
.pg-foot a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: .15rem; }
.pg-foot a:hover { border-color: #fff; }
.pg-foot p { margin: 0; }
.pg-foot .name { font-weight: 800; }

@media (min-width: 52rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .pair { grid-template-columns: minmax(0, 1fr) 22em; }
  .pair--b { margin-left: clamp(0rem, 12vw, 12rem); }
  .index li { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .index--n li { grid-template-columns: minmax(4rem, .3fr) minmax(0, 1.5fr) minmax(0, 1fr); }
  .def { grid-template-columns: 11rem 1fr; align-items: baseline; }
  .stand li { grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 1.2fr); }
  .cols2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 51.99rem) { .index--n li { grid-template-columns: auto 1fr; } .index--n p { grid-column: 2; } }

@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
  .js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
}