/* Fonts are self-hosted: no requests to third parties. */
@font-face{font-family:"Untoken Stencil";src:url("../fonts/untoken-stencil-5470f023.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
:root{
  --ground:#F4EFE5; --ink:#1E140D; --soft:#74624F; --copper:#BD7543; --teal:#089D8A; --line:rgba(30,20,13,.16);
  --deep:#17302A; --deep-ink:#E9E3D6; --deep-soft:#AEB9B1; --deep-teal:#34C2AB; --deep-copper:#E49957;
  --stencil:"Untoken Stencil", "Avenir Next", "Futura", sans-serif;
  --sans:"Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --size:min(19.5vw, calc(7.2vw + 48px), 17.5svh); --track:.07em;
  /* relative letter sizes of the wordmark: U, T, everything else (all one size since 30 September) */
  --sU:.8em; --sT:.8em; --sR:.8em;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#17302A; --ink:#EAE4D7; --soft:#AAB6AE; --copper:#E49957; --teal:#34C2AB; --line:rgba(234,228,215,.18);
    --deep:#10231F;
  }
}
:root[data-theme="dark"]{
  --ground:#17302A; --ink:#EAE4D7; --soft:#AAB6AE; --copper:#E49957; --teal:#34C2AB; --line:rgba(234,228,215,.18);
  --deep:#10231F;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.f-ink{fill:var(--ink)} .f-copper{fill:var(--copper)} .f-teal{fill:var(--teal)}
/* the static wordmark and mark in the HTML are for visitors without JavaScript (css/noscript.css);
   with JavaScript the page starts blank and the intro draws them */
.nojs{visibility:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* hero */
.hero{position:relative;overflow-x:clip;min-height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:grid;place-items:center;padding:0 5vw}
.lockup{display:flex;flex-direction:column;align-items:center;gap:calc(var(--size) * .3);width:100%;font-size:var(--size)}
.mark{width:.9em;height:auto;display:block;overflow:visible}
.mark rect{transition:opacity .09s linear, fill .35s ease}
#stage{display:grid;place-items:center;width:100%;min-height:1.25em;cursor:default}
#stage.running{cursor:pointer}
#stage > *{grid-area:1/1}
.type{font-family:var(--stencil);font-weight:400;line-height:1.2;text-transform:uppercase;letter-spacing:var(--track);color:var(--ink)}

/* brand colors on the settled word: U N T O K E N */
.c-ink{color:var(--ink)} .c-copper{color:var(--copper)} .c-teal{color:var(--teal)}
.tint{transition:color .35s ease}

/* split-flap */
.szU{font-size:var(--sU)} .szT{font-size:var(--sT)} .szR{font-size:var(--sR)}
.anchor{margin-right:calc(-1 * var(--track));overflow:visible}
.flapword{display:flex;align-items:baseline;justify-content:flex-start;width:max-content}
.un{display:inline-block}
.cellbox{position:relative;display:inline-block;line-height:0;--smear:0px}
.cellbox .bl{display:inline-block;width:0;visibility:hidden;font-size:var(--sR);line-height:1.2}
.cellbox .bp{display:inline-block;width:0;height:0}
/* vertical motion smear at top speed. A real motion blur spreads the letter and makes it fainter,
   so the letter fades (--glyph) while crisp copies of it spread above and below (--smear). */
.cellbox .strut{color:color-mix(in srgb, currentColor var(--glyph,100%), transparent)}
.cellbox.smearing .strut{--m:color-mix(in srgb, currentColor 45%, transparent);--b:calc(var(--smear) * .3);
  text-shadow:0 calc(var(--smear) * .33) var(--b) var(--m),0 calc(var(--smear) * -.33) var(--b) var(--m),
              0 calc(var(--smear) * .67) var(--b) var(--m),0 calc(var(--smear) * -.67) var(--b) var(--m),
              0 var(--smear) var(--b) var(--m),0 calc(var(--smear) * -1) var(--b) var(--m)}
.cell{position:absolute;left:0;top:0;display:block;line-height:1.2;font-size:var(--sR);width:0;white-space:pre;transition:width .12s cubic-bezier(.4,0,.2,1), transform .12s cubic-bezier(.4,0,.2,1), font-size .25s ease;perspective:5em}
.cell.szT{font-size:var(--sT)}
.noanim .cell{transition:none}
.strut{display:block;line-height:1.2}
.measure{position:absolute;visibility:hidden;white-space:pre;pointer-events:none;left:0;top:0}

/* collapse */
.w{white-space:nowrap}
.ch{display:inline-block;white-space:pre;transform-origin:0 0}
.final{text-align:center;white-space:nowrap;margin-right:calc(-1 * var(--track))}

/* cue */
.cue{position:absolute;left:50%;bottom:calc(clamp(8px, 2svh, 22px) + env(safe-area-inset-bottom,0px));transform:translate(-50%,6px);opacity:0;transition:opacity .5s ease,transform .5s ease;color:var(--soft);font:400 clamp(1.05rem, calc(var(--size) * .14), 1.6rem)/1 var(--stencil);text-transform:uppercase;letter-spacing:.12em;margin-right:-.12em;text-decoration:none;padding:12px 16px;display:flex;flex-direction:column;align-items:center;gap:14px}
.cue::after{content:"";width:1px;height:clamp(28px,5svh,44px);background:currentColor;opacity:.55}
.cue.show{opacity:1;transform:translate(-50%,0)}
@media (max-height:460px){.cue{display:none}}
.cue:hover{color:var(--ink)}
.cue:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}

/* scroll effect (js/parallax.js): the manifesto slides over the hero while the lockup recedes.
   --px on the hero runs from 0 at the top to 1 once the hero is covered. */
main{position:relative;z-index:1}
.cue.show{opacity:calc(1 - var(--px,0) * 4)}
.scrollfx .hero{position:sticky;top:0}
.scrollfx .lockup{transform:translate3d(0,calc(var(--px,0) * -18svh),0) scale(calc(1 - var(--px,0) * .12));opacity:calc(1 - var(--px,0) * .75)}

/* manifesto */
.manifesto{background:var(--deep);color:var(--deep-ink);padding:clamp(72px,14vh,168px) clamp(24px,7vw,96px) clamp(24px,4vh,40px);display:flex;justify-content:center}
.col{width:100%;max-width:54rem;text-align:center}   /* wide enough for the longest sentence on one line */
.col h2{font-family:var(--stencil);font-weight:400;text-transform:uppercase;letter-spacing:var(--track);font-size:clamp(28px,calc(1.1rem + 2.2vw),52px);line-height:1.1;margin:0;color:var(--deep-ink)}
.rule{width:56px;height:2px;border:0;margin:clamp(20px,3vw,32px) auto clamp(28px,4vw,44px);background:linear-gradient(90deg,var(--deep-teal),var(--deep-copper))}
.col p{font-size:clamp(1.0625rem,calc(.85rem + .45vw),1.25rem);line-height:1.62;margin:0 0 1.05em;color:var(--deep-soft);text-wrap:balance}
/* the manifesto is set a sentence to a line: .l starts a line; br.n separates two short sentences that share a line
   where the column is wide, and is used only where it is narrow */
.col p .l{display:block}
.col br.n{display:none}
@media (max-width: 640px){ .col br.n{display:inline} }
.col p.beat{color:var(--deep-ink);font-weight:500}
.col p.close{margin-top:1.9em;margin-bottom:0}
.col .site-footer{margin-top:clamp(64px,10vh,112px);padding-top:18px;border-top:1px solid rgba(233,227,214,.16);font-size:.9375rem;color:var(--deep-soft);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.col .site-footer a{color:var(--deep-ink);text-decoration:underline;text-decoration-color:rgba(233,227,214,.35);text-underline-offset:.25em;transition:text-decoration-color .2s ease}
.col .site-footer a:hover{text-decoration-color:var(--deep-teal)}
.col .site-footer a:focus-visible{outline:2px solid var(--deep-teal);outline-offset:3px;border-radius:2px}

/* 404 page */
.nf{min-height:100svh;display:grid;place-content:center;justify-items:center;gap:28px;padding:24px;text-align:center}
.nf .mark{width:72px}
.nf h1{font-family:var(--stencil);font-weight:400;text-transform:uppercase;letter-spacing:var(--track);font-size:clamp(28px,6vw,48px);margin:0}
.nf a{color:var(--soft);font-size:1rem}

/* print: just the manifesto, dark on white */
@media print{
  .hero,.cue{display:none}
  .manifesto{background:#fff;color:#000;padding:0}
  .col p,.col p.beat,.col h2,.col .site-footer,.col .site-footer a{color:#000}
}