@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-v1-latin.woff2?v=47bff697) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/figtree-variable-latin.woff2?v=4ba7d3d0) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/spacemono-v17-i7dMIFZifjKcF5UAWdDRaPpZUFWaHg.woff2?v=2d46bd15) format('woff2')}

/* ---------- tokens. Names mirror the network's design-tokens.css; values are the dark theme, the only theme. ---------- */
:root{
  color-scheme:dark;
  --disp:'Anton','Arial Narrow','Arial Black',sans-serif;
  --body:'Figtree','Helvetica Neue',Arial,sans-serif;
  --mono:'Space Mono','Courier New',monospace;
  --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:3rem;--s-8:4rem;--s-9:6rem;
  /* the readability floor, pinned in a token: 11.52px, never lower */
  --fs-micro:.72rem;
  --measure:66ch;--grid-max:72rem;--ease:cubic-bezier(.16,1,.3,1);
  --paper:#000;--ink:#fff;--surface:#0a0a0a;--soft:#b3b3b3;--muted:#9a9a9a;
  --rule:color-mix(in srgb,#fff 38%,#000);--line-strong:#6a6a6a;
  --yellow:#ffe000;--on-yellow:#141414;--buy:#ff4536;--on-buy:#000;
  /* colour is a loan: yellow exists only on what the visitor makes */
  --glyph:var(--yellow);--halo:var(--surface);
  /* where the star sits inside the wordmark, measured from the pixels (disc x 230-312, y 1-83 of 1068x89) */
  --sx:.25375;--sy:.4719;--sd:.07678;
}
@media (prefers-contrast:more){:root{--soft:#fff;--muted:#fff;--rule:#fff;--line-strong:#fff}.dial{display:none}}
@media (forced-colors:active){.dial{display:none}.door .ring{border-color:CanvasText}.star:focus-visible{outline:2px solid CanvasText}}
@supports not (color:color-mix(in srgb,#fff 38%,#000)){:root{--rule:#616161}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-padding-top:1rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper)}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:.18em}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
h1[tabindex="-1"]:focus,main:focus{outline:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:var(--paper);padding:0 1rem;min-height:44px;display:inline-flex;align-items:center;font:700 .8125rem/1 var(--mono);text-transform:uppercase}
.skip:focus{left:0}

.page{
  --pad-x:clamp(1rem,.6rem + 1.4vw,1.625rem);
  --fs-meta:clamp(.78rem,.74rem + .18vw,.875rem);
  --fs-body:clamp(1rem,.97rem + .14vw,1.0625rem);
  --fs-lede:clamp(1.0625rem,1rem + .42vw,1.3125rem);
  --fs-h3:clamp(1.3125rem,1.18rem + .6vw,1.5625rem);
  --fs-h2:clamp(1.5rem,1.28rem + 1.05vw,2.05rem);
  --fs-h1:clamp(2rem,1.5rem + 2.4vw,3.1rem);
  --dial:clamp(900px,260vw,1600px);
  position:relative;font-family:var(--body);font-size:var(--fs-body);line-height:1.5;color:var(--ink);background:var(--paper);
  min-height:100svh;display:flex;flex-direction:column;overflow-x:clip;
}
.page main{flex:1;display:flex;flex-direction:column}
.wrap{width:100%;max-width:var(--grid-max);margin-inline:auto;padding-inline:var(--pad-x)}
.kick{font-family:var(--mono);font-weight:700;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.fine{font-size:var(--fs-meta);color:var(--soft)}

/* ---------- buttons: the one primitive, dark ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:0 1rem;font-family:var(--mono);font-weight:700;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;line-height:1.15;text-align:center;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:2px;cursor:pointer;text-decoration:none;transition:background .15s var(--ease),color .15s var(--ease)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:active{transform:translateY(1px)}
.btn--fill{background:var(--ink);color:var(--paper)}
.btn--fill:hover{background:var(--paper);color:var(--ink)}
.btn--chip{padding:0 .75rem}
.btn--buy{background:var(--buy);color:var(--on-buy);border-color:var(--buy)}
.btn--buy:hover{background:var(--buy);color:var(--on-buy);filter:brightness(.92)}
.btn[disabled]{border-color:var(--soft);color:var(--soft);background:var(--paper);cursor:not-allowed}
.btn[disabled]:hover{background:var(--paper);color:var(--soft)}
.btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.btn svg,.arr{width:14px;height:14px;flex:none}

/* =====================================================================
   THE LANDING: one screen, no bar, no footer, nothing to scroll.
   DOM order: emblem, instruction, announcement, doors, status.
   ===================================================================== */
.landing{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--s-5);
  padding:var(--s-5) var(--pad-x) max(var(--s-5),env(safe-area-inset-bottom));text-align:center;overflow:clip;isolation:isolate}
.landing::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse 85% 62% at 36% 42%,#121212 0%,#050505 48%,#000 78%)}
.emblem{flex:1 1 auto;width:100%;min-height:0;display:flex;align-items:center;justify-content:center;padding-block:var(--s-4) 2.75rem}

/* the logo, exactly as supplied. The img is never filtered, faded, blended or transformed. */
.wm{position:relative;width:min(100%,56rem);aspect-ratio:1068/89;flex:none}
.wm h1{margin:0;line-height:0}
.wm img{display:block;width:100%;height:auto;position:relative;z-index:1}
.star{position:absolute;z-index:2;left:calc(var(--sx)*100%);top:calc(var(--sy)*100%);width:max(calc(var(--sd)*100%),44px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:block;text-decoration:none;cursor:pointer}
.star:hover{box-shadow:0 0 0 3px #000,0 0 0 5px #fff}
.star:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.cue{position:absolute;left:calc(var(--sx)*100%);top:calc(100% + .75rem);transform:translateX(-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;white-space:nowrap;
  font-family:var(--mono);font-weight:700;font-size:.8125rem;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);padding-left:.18em;text-shadow:0 0 8px #000,0 0 16px #000,0 0 24px #000}
.cue svg{width:14px;height:14px}
html.seen .cue{display:none}
.under{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s-5);width:100%}
.under::before{content:"";position:absolute;inset:-2.5rem -4rem;z-index:0;pointer-events:none;background:radial-gradient(ellipse 50% 52% at 50% 50%,#000 30%,rgba(0,0,0,.85) 55%,transparent 100%)}
.under>*{position:relative;z-index:1}
.under>nav{width:100%}

/* the dial: the Foundry's wheel seen from far off, centred on the star. No letters, so nothing here is text. */
.dial{position:absolute;left:calc(var(--sx)*100%);top:calc(var(--sy)*100%);width:var(--dial);height:var(--dial);transform:translate(-50%,-50%);z-index:0;pointer-events:none;overflow:visible}
.d-ring{fill:none;stroke:#fff;stroke-opacity:.16;stroke-width:1.1}
.d-tick{stroke:#fff;stroke-opacity:.34;stroke-width:1.1}
.d-trace{fill:none;stroke:#fff;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.d-ping{fill:none;stroke:#fff;stroke-opacity:.7;stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center;animation:ping 7s linear infinite}
@keyframes ping{0%{transform:scale(1);opacity:.8}16%{opacity:.5}100%{transform:scale(15);opacity:0}}
.star:hover~.dial .d-ping{stroke-opacity:1}

/* the doors: one family, each one a labelled ring. Hover and focus fill the ring white, the way the logo's own disc is white. */
.doors{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s-5) clamp(1rem,5vw,3rem);list-style:none;margin:0;padding:0;position:relative;z-index:1}
.door{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);min-width:4.75rem;padding:var(--s-1);text-decoration:none;color:var(--ink);border-radius:6px}
.door .ring{width:64px;height:64px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;background:var(--paper);transition:background .15s var(--ease)}
.door .g{width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.door .dlbl{font-family:var(--mono);font-weight:700;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;padding-left:.14em}
.door:hover .ring,.door:focus-visible .ring,.door[aria-current="page"] .ring{background:var(--ink)}
.door:hover .g,.door:focus-visible .g,.door[aria-current="page"] .g{stroke:var(--paper)}
.door:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.door.soon .ring{border-style:dashed}
.doors--mini{gap:var(--s-4) var(--s-5);justify-content:flex-start}
.doors--mini .door .ring{width:48px;height:48px}
.doors--mini .door .g{width:22px;height:22px}
.doors--mini .door{min-width:4.5rem}

/* on a phone the doors spread across the width, so either thumb reaches one */
@media (max-width:30rem){
  .landing .doors{width:100%;justify-content:center;gap:var(--s-4) 0}
  .landing .doors li{flex:1 1 0;min-width:0}
  .landing .doors .door{width:100%;min-width:0}
}
@media (min-width:46rem){.doors{gap:var(--s-5) clamp(2rem,6vw,4.5rem)}}
@media (min-width:70rem){
  .doors:not(.doors--mini) .door .ring{width:72px;height:72px}
  .doors:not(.doors--mini) .door .g{width:32px;height:32px}
}
/* short screens: landscape phones keep the one-screen promise */
@media (max-height:34rem){
  .landing{gap:.9rem;padding-block:.6rem .8rem}
  .emblem{padding-block:.25rem 2.5rem}
  .door .ring{width:52px;height:52px}
  .door .g{width:24px;height:24px}
  .doors{gap:.5rem 1.25rem}
}

/* =====================================================================
   THE STORY: the star opens it, the star closes it. It spreads from the star outward.
   ===================================================================== */
.story{position:absolute;inset:0;z-index:50;background:var(--paper);overflow:auto;clip-path:circle(0px at var(--ox,30%) var(--oy,26%));visibility:hidden;
  transition:clip-path .85s cubic-bezier(.3,.1,.2,1),visibility 0s linear .85s}
.story:focus{outline:none}
/* :target is the scripts-off path (#about); .open is the scripts-on path, which also knows exactly where the star is */
.story.open,html:not(.js) .story:target{clip-path:circle(var(--or,150vmax) at var(--ox,30%) var(--oy,26%));visibility:visible;transition:clip-path .85s cubic-bezier(.3,.1,.2,1),visibility 0s}
.story-in{padding:var(--s-4) var(--pad-x) var(--s-6);max-width:calc(var(--pad-x) + 46rem);margin-inline:auto}
.sclose{display:inline-flex;align-items:center;gap:var(--s-3);min-height:44px;text-decoration:none}
.starimg{display:block;width:44px;height:44px;object-fit:contain}
.sclose:hover .starimg,.sclose:focus-visible .starimg{box-shadow:0 0 0 3px var(--ink);border-radius:50%}
.sclose:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:30px}
.sclose .t{font-family:var(--mono);font-weight:700;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase}
.story h2{font-family:var(--body);font-weight:800;font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.01em;margin-top:var(--s-6);max-width:30ch}
.story .lede{font-size:var(--fs-lede);line-height:1.4;max-width:40ch;margin-top:var(--s-3)}
.ledger{border-top:1px solid var(--rule);margin-top:var(--s-6)}
.lg{display:grid;gap:var(--s-1) var(--s-5);grid-template-columns:minmax(0,1fr);padding:var(--s-3) 0;border-bottom:1px solid var(--rule)}
.lg .myth{font-family:var(--mono);font-weight:700;font-size:.8125rem;line-height:1.4;color:var(--soft);text-decoration:line-through;text-decoration-thickness:1px}
.lg .real b{font-weight:600;border-bottom:2px solid var(--ink)}
@media (min-width:46rem){.lg{grid-template-columns:clamp(9rem,20vw,13rem) minmax(0,1fr);align-items:baseline}}
.law{margin-top:var(--s-6);font-family:var(--disp);font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.01em;text-transform:uppercase;display:grid}
.story .contact{margin-top:var(--s-6);display:grid;gap:var(--s-1)}
.story .contact a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-weight:700;font-size:.8125rem;letter-spacing:.02em;width:max-content}
.rfoot{margin-top:var(--s-7);padding-top:var(--s-5);border-top:3px solid var(--ink)}

@media (prefers-reduced-motion:reduce){
  .d-ping{animation:none;opacity:.35;transform:scale(2.6)}
  .story,.story:target,.story.open{transition:none}
}
html.story-open .d-ping{animation-play-state:paused}