@font-face {
  font-family: "Inter";
  src: url("/assets/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0b0b0b;
  --paper: #ffffff;
  --orange: #ff3b00;
  --muted: #5f5f5f;
  --gutter: clamp(16px, 3vw, 40px);
}

/* lights off (the pull cord, assets/pullcord.js) */
:root[data-theme="dark"] {
  --ink: #f3f1ee;
  --paper: #0b0b0b;
  --muted: #9d9d9d;
  color-scheme: dark;
}
/* the dark spreads from the knob in a circle (pullcord.js animates the new view's clip-path) */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

/* ---------- home ---------- */
.stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--gutter) * 2) var(--gutter) var(--gutter);
  overflow: hidden;
}
.block { width: fit-content; }
.lockup {
  position: relative;
  font-size: min(15.2vw, 27vh);
  padding-bottom: .42em;
}
.word {
  font-size: 1em;
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mask {
  display: block;
  overflow: hidden;
  padding: .22em .05em 0;
  margin: -.22em -.05em 0;
}
.ch, .w { display: inline-block; }
.gem { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.gem-shape { position: absolute; left: 0; top: 0; width: .15em; height: .15em; background: var(--orange); }

/* the row takes the wordmark's width without widening it */
.row {
  width: 0;
  min-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 24px;
}
.soon {
  font-size: clamp(16px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.tag {
  font-size: clamp(14px, 1.45vw, 21px);
  font-weight: 500;
  color: var(--muted);
}
.row .mask { padding-top: .3em; margin-top: -.3em; }

/* hidden until the script places everything (no script = everything visible) */
html.js .ch, html.js .gem, html.js .row .w { visibility: hidden; }

/* ---------- the pull cord (assets/pullcord.js) ----------
   Hangs from the top of the page; every moving part is placed from the cord's anchor (the top centre of
   .pull) by a transform each frame. */
.pull {
  --pull-length: 62px;
  --pull-reach: 56px;
  --pull-click: 28px;
  position: fixed;
  top: 0;
  right: calc(var(--gutter) + 6px);
  z-index: 30;
  width: 44px;
  height: 0;
}
.pull__cord { position: absolute; left: 50%; top: 0; overflow: visible; pointer-events: none; }
.pull__line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.pull__fitting { fill: var(--ink); }
/* the knob is the switch: a 44 × 66 target (the tag hangs inside it), turned about the tie point */
.pull__knob {
  position: absolute;
  left: 50%;
  top: 0;
  width: 44px;
  height: 66px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  transform-origin: 22px 10px;
  transform: translate(-22px, calc(var(--pull-length) - 10px));
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}
.pull.is-held .pull__knob { cursor: grabbing; }
.pull__bob {
  position: absolute;
  left: 15px;
  top: 12.9px;
  width: 14px;
  height: 14px;
  background: var(--orange);
  transform: rotate(45deg);
}
.pull__halo {
  position: absolute;
  left: 0;
  top: -2px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 59, 0, .45), transparent 66%);
  opacity: 0;
  transition: opacity 240ms cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}
.pull.is-dark .pull__halo { opacity: .55; }
@media (hover: hover) { .pull__knob:hover .pull__halo { opacity: 1; } }
.pull.is-held .pull__halo { opacity: 1; }
.pull__flash { position: absolute; left: -10px; top: -12px; overflow: visible; pointer-events: none; }
.pull__ring { fill: none; stroke: var(--orange); stroke-width: 0; }
.pull__knob:focus-visible { outline: none; }
.pull__knob:focus-visible .pull__bob { outline: 2px solid var(--ink); outline-offset: 4px; }
/* the tag hangs under the knob on a short thread and turns over when the lights change */
.pull__tag {
  position: absolute;
  left: 50%;
  top: 0;
  width: 44px;
  padding-top: 5px;
  transform-origin: 22px 0;
  transform: translate(-22px, calc(var(--pull-length) + 20px));
  pointer-events: none;
  perspective: 160px;
  will-change: transform;
}
.pull__tag::before { content: ""; position: absolute; left: 21.5px; top: 0; width: 1px; height: 6px; background: var(--ink); }
.pull__card { display: grid; transform-style: preserve-3d; transition: transform 460ms cubic-bezier(0.23, 1, 0.32, 1); }
.pull.is-dark .pull__card { transform: rotateY(180deg); }
.pull__face {
  grid-area: 1 / 1;
  padding: 3px 0 2px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 800;
  line-height: 12px;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.pull__face--light { background: #0b0b0b; color: #ffffff; }
.pull__face--dark { background: var(--orange); color: #0b0b0b; transform: rotateY(180deg); }
@media (max-width: 700px) {
  .pull { --pull-length: 44px; --pull-reach: 44px; --pull-click: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .pull__card, .pull__halo { transition: none; }
}

/* ---------- footer ---------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 16px var(--gutter) max(16px, env(safe-area-inset-bottom));
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- legal pages ---------- */
.legal {
  flex: 1;
  width: 100%;
  max-width: 70ch;
  margin: 0 auto;
  padding: calc(var(--gutter) * 1.5) var(--gutter) 64px;
  font-size: 16px;
  line-height: 1.6;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 48px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.back i { width: 11px; height: 11px; background: var(--orange); transform: rotate(45deg); }
.legal h1 {
  margin-bottom: 32px;
  font-size: clamp(38px, 7vw, 72px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: uppercase;
  hyphens: manual;
}
.legal h2 { margin: 36px 0 8px; font-size: 18px; font-weight: 800; line-height: 1.3; }
.legal p, .legal ul { margin-bottom: 12px; }
.legal ul { padding-left: 1.2em; }
.legal address { font-style: normal; }
.legal .meta { color: var(--muted); font-size: 14px; }

/* ---------- 404 ---------- */
.lost { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: var(--gutter); text-align: center; }
.lost b { font-size: min(34vw, 40vh); font-weight: 900; line-height: .8; letter-spacing: -.06em; }
.lost p { font-size: clamp(16px, 2vw, 22px); font-weight: 600; }
.lost a { font-weight: 800; text-transform: uppercase; letter-spacing: .03em; text-underline-offset: 4px; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }