/* Shared by every page. One theme: deep, cool black. */

@font-face { font-family: "Excon"; src: url("../fonts/Excon-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Excon"; src: url("../fonts/Excon-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Excon"; src: url("../fonts/Excon-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Ranade"; src: url("../fonts/Ranade-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Ranade"; src: url("../fonts/Ranade-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ranade"; src: url("../fonts/Ranade-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
/* The wordmark waits for its own face rather than flashing another: it's the
   first thing on the loader and in the ring between pages. */
@font-face { font-family: "Chillax"; src: url("../fonts/Chillax-Semibold.woff2") format("woff2"); font-weight: 600; font-display: block; }

:root {
  color-scheme: dark;
  --bg: #030304;
  --ink: #f2f3f7;
  --ink-rgb: 242 243 247;
  --ink2: #a9adb8;
  --ink3: #6f7482;
  --line: rgb(242 243 247 / .1);
  --line2: rgb(242 243 247 / .18);
  --card-top: rgb(255 255 255 / .09);
  --card-bot: rgb(255 255 255 / .03);
  --shadow: rgb(0 0 0 / .55);
  --iris: linear-gradient(100deg, #9fd4ff 0%, #c7b4ff 30%, #ffb4e1 55%, #ffe6b0 75%, #a8ffe0 100%);

  --excon: "Excon", ui-sans-serif, system-ui, sans-serif;
  --ranade: "Ranade", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --chillax: "Chillax", "Excon", ui-sans-serif, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --gutter: clamp(18px, 3.4vw, 44px);
  --max: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink2);
  font: 400 17px/1.6 var(--ranade);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg, canvas { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
/* No words on the site can be highlighted; only what you type can. */
body { -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; color: var(--ink); }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: rgb(var(--ink-rgb) / .9); color: #000; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; border-radius: 6px; }

/* SplitText masks clip at the line box, which cuts descenders; pad them out. */
.line-mask, .char-mask { padding-bottom: .2em; margin-bottom: -.2em; padding-right: .06em; }

/* A policy page on a touch screen stops scrolling under the menu or the popup (doc.js). */
html.is-locked, html.is-locked body { overflow: hidden; overscroll-behavior: none; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The cursor: a dot, and a ring that wraps whatever you're about to press. */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity .3s; }
.cursor.is-on { opacity: 1; }
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor input { cursor: text !important; }
.cursor__dot { position: fixed; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; transition: opacity .3s, scale .4s var(--ease); }
.cursor__ring {
  position: fixed; left: 0; top: 0; width: 38px; height: 38px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6); display: grid; place-items: center;
  transition: background-color .35s, box-shadow .35s, opacity .35s, scale .5s var(--ease), border-radius .35s var(--ease);
}
.cursor__ring span { font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #000; opacity: 0; transition: opacity .25s; white-space: nowrap; }
.cursor.is-stuck .cursor__ring { background: #fff; box-shadow: none; }
/* A whole option (a page in the menu, a question): a block, not a pill. */
.cursor.is-block .cursor__ring { border-radius: 18px; }
/* Under the white, the words invert; their spectral light would turn muddy. */
.has-cursor .is-wrapped .lit__light { opacity: 0; }
.cursor.is-stuck .cursor__dot, .cursor.is-pill .cursor__dot { opacity: 0; }
/* Over a button the ring swells into a white disc that inverts whatever is under it. */
.cursor.is-pill .cursor__ring { background: #fff; box-shadow: none; scale: 1.8; }
.cursor.is-text { mix-blend-mode: normal; }
.cursor.is-text .cursor__dot { opacity: 0; }
.cursor.is-text .cursor__ring { background: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / .35); scale: 2.1; }
.cursor.is-text .cursor__ring span { opacity: 1; scale: .48; }
/* Framing a station of the hero's orbit: a thin lens, the dot still at the pointer. */
.cursor.is-aim .cursor__ring { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .75), 0 0 24px rgb(160 200 255 / .25); }
.cursor.is-down .cursor__ring { scale: .8; }
.cursor.is-text.is-down .cursor__ring { scale: 1.8; }

/* The world behind every page, drawn by three.js. */
.world { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.no-gl .world { display: none; }

/* A label with an iris dash in front. */
.ch__kicker { color: var(--ink); margin-bottom: 26px; display: flex; align-items: center; gap: 12px; }
.ch__kicker::before { content: ""; width: 26px; height: 1px; background: var(--iris); }

/* ------------------------------------------------------------ top bar */

.hud { position: fixed; z-index: 40; }
.hud--top { inset: 0 0 auto; display: flex; align-items: center; gap: 24px; padding: 22px var(--gutter); pointer-events: none; }
.hud--top > * { pointer-events: auto; }
.hud__meta { margin-right: auto; margin-left: 18px; white-space: nowrap; }
@media (max-width: 1100px) { .hud__meta { display: none; } }
.hud__nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.hud__link { color: var(--ink2); text-decoration: none; transition: color .3s; padding: 6px 2px; }
.hud__link span { color: var(--ink3); margin-left: 6px; }
.hud__link:hover { color: var(--ink); }
.hud__link--ig span { margin-left: 6px; }
/* On the policy pages: a way home, and a shade the words scroll under,
   blurred, so they don't read through the bar's own words. */
.hud--doc { padding-bottom: 36px; }
.hud--doc::before {
  content: ""; position: absolute; inset: 0 0 -12px; z-index: -1; pointer-events: none; transition: opacity .4s;
  background: linear-gradient(rgb(3 3 4 / .9), rgb(3 3 4 / .72) 60%, rgb(3 3 4 / 0));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
.hud__back { display: inline-flex; align-items: center; gap: 12px; margin-left: 20px; margin-right: auto; padding: 8px 6px; color: var(--ink); text-decoration: none; }
.hud__back i { position: relative; width: 22px; height: 1px; background: currentColor; transition: width .5s var(--ease); }
.hud__back i::before { content: ""; position: absolute; left: 0; top: -4px; width: 8px; height: 8px; border: solid currentColor; border-width: 0 0 1px 1px; transform: rotate(45deg); transform-origin: 0 0; translate: 0 4px; }
.hud__back:hover i { width: 32px; }
.hud__back .short { display: none; }

/* The Policies menu (src/menu.js). Not a dropdown: the page gives way, the
   five links rise as big type on the right, and the world draws each page's
   emblem on the left as you point at it. The stage sits under the top bar's
   own links, so "Policies" stays there to close it. */
.menu { position: relative; }
.menu__btn { display: inline-flex; align-items: center; gap: 10px; }
.menu__btn i { position: relative; width: 9px; height: 9px; transition: transform .6s var(--ease); }
.menu__btn i::before, .menu__btn i::after { content: ""; position: absolute; left: 0; top: 4px; width: 9px; height: 1px; background: currentColor; }
.menu__btn i::after { transform: rotate(90deg); }
.menu.is-open .menu__btn { color: var(--ink); }
.menu.is-open .menu__btn i { transform: rotate(135deg); }
.menu-open .hud--top { z-index: 60; }
.menu-open .hud--doc::before { opacity: 0; }
.menu__stage {
  position: fixed; inset: 0; z-index: -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  align-items: center; padding: 96px calc(var(--gutter) + 2vw) 56px; text-align: left;
}
.menu__stage[hidden] { display: none; }
/* Dark behind the words, lighter where the emblem is. */
.menu__scrim { position: absolute; inset: 0; background: radial-gradient(ellipse 58% 80% at 76% 50%, rgb(3 3 4 / .74), rgb(3 3 4 / .42) 70%), rgb(3 3 4 / .18); }
:root:not(.gl) .menu__scrim, :root:not(.motion) .menu__scrim { background: rgb(3 3 4 / .96); }
.menu__emblem { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.menu__emblem[hidden] { display: none; }
.menu__col { position: relative; grid-column: 2; }
.menu__col .ch__kicker { margin-bottom: clamp(12px, 2.4vh, 26px); }
/* As wide as its widest page, so the cursor's block hugs the words, the same on every row. */
.menu__list { width: max-content; max-width: 100%; }
.menu__list li + li { margin-top: clamp(2px, .8vh, 10px); }
.menu__link { position: relative; display: grid; grid-template-columns: clamp(34px, 3vw, 48px) minmax(0, 1fr); align-items: baseline; column-gap: 8px; padding: clamp(4px, .9vh, 10px) 0; color: var(--ink); text-decoration: none; }
.menu__num { transition: color .3s; }
.menu__label { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; padding-right: .08em; }
.menu__word { display: block; font: 400 clamp(38px, min(5.4vw, 8.4vh), 104px)/.98 var(--excon); letter-spacing: -.05em; white-space: nowrap; transition: color .5s var(--ease), translate .7s var(--ease); }
.menu__note { grid-column: 2; margin-top: 6px; transition: color .4s; }
.menu__list.is-pointing .menu__link:not(.is-on) .menu__word { color: rgb(var(--ink-rgb) / .3); }
.menu__link.is-on .menu__word { translate: .12em 0; }
.menu__link.is-on .menu__num, .menu__link[aria-current="page"] .menu__num { color: #bfe3ff; }
.menu__link.is-on .menu__note { color: var(--ink2); }
.menu__link[aria-current="page"] .menu__note::after { content: " · you’re here"; color: var(--ink2); }
@media (max-width: 900px), (max-aspect-ratio: 11/10) {
  .menu__stage { grid-template-columns: minmax(0, 1fr); align-items: end; padding: 84px var(--gutter) max(36px, env(safe-area-inset-bottom)); }
  .menu__col { grid-column: 1; }
  .menu__scrim { background: linear-gradient(transparent 30%, rgb(3 3 4 / .7) 62%), rgb(3 3 4 / .3); }
  .menu__word { font-size: clamp(34px, min(10.5vw, 7vh), 64px); }
}

/* Spectral type: the hero's headline, the policy pages' titles, "Back to
   Mull". [data-lit] holds the words (.lit__base) and a copy of them in
   spectral light (.lit__light), which shows at the front of a burn as the
   words appear (--r, 0 → 1), wherever the cursor is (--mx, --my, --ml), and
   in a slow sweep now and then (--sh). src/fx.js drives the last two. */
[data-lit] { position: relative; }
.lit__base, .lit__light { margin: 0; }
/* The masks clip at the box, and these lines are set tight: room below for
   descenders (the g of "group", the y of "Privacy"). */
.lit__base { padding-bottom: .18em; margin-bottom: -.18em; }
.lit__light {
  position: absolute; inset: 0 0 -.18em; pointer-events: none; user-select: none; -webkit-user-select: none;
  color: transparent; background: linear-gradient(100deg, #9fd4ff 0%, #c7b4ff 22%, #ffb4e1 42%, #ffe6b0 62%, #a8ffe0 82%, #9fd4ff 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 22px rgb(170 200 255 / .35));
  --f: calc(var(--r, 1) * 150% - 30%);
  --s: calc(var(--sh, -1) * 150% - 30%);
  -webkit-mask-image:
    linear-gradient(100deg, transparent calc(var(--f) - 16%), #000 calc(var(--f) - 3%), transparent calc(var(--f) + 5%)),
    linear-gradient(100deg, transparent calc(var(--s) - 12%), rgb(0 0 0 / .8) var(--s), transparent calc(var(--s) + 12%)),
    radial-gradient(circle clamp(130px, 13vw, 260px) at var(--mx, -999px) var(--my, -999px), rgb(0 0 0 / var(--ml, 0)), transparent);
  mask-image:
    linear-gradient(100deg, transparent calc(var(--f) - 16%), #000 calc(var(--f) - 3%), transparent calc(var(--f) + 5%)),
    linear-gradient(100deg, transparent calc(var(--s) - 12%), rgb(0 0 0 / .8) var(--s), transparent calc(var(--s) + 12%)),
    radial-gradient(circle clamp(130px, 13vw, 260px) at var(--mx, -999px) var(--my, -999px), rgb(0 0 0 / var(--ml, 0)), transparent);
}
.motion.gl [data-burn], .motion [data-burn="always"] { --r: 0; }
.motion.gl [data-burn] .lit__base, .motion [data-burn="always"] .lit__base {
  --f: calc(var(--r, 1) * 150% - 30%);
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--f) - 12%), transparent calc(var(--f) + 2%));
  mask-image: linear-gradient(100deg, #000 calc(var(--f) - 12%), transparent calc(var(--f) + 2%));
}
:root:not(.motion) .lit__light, .no-gl [data-burn]:not([data-burn="always"]) .lit__light { display: none; }

/* ------------------------------------------------ notify, share, footer */

.notify { margin-top: 26px; display: flex; gap: 8px; width: min(460px, 100%); padding: 6px; border-radius: 999px; background: rgb(var(--ink-rgb) / .08); box-shadow: inset 0 0 0 1px var(--line2); transition: box-shadow .4s; }
.notify:focus-within { box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .6), 0 0 40px rgb(160 200 255 / .15); }
.notify input { flex: 1; min-width: 0; height: 46px; padding: 0 18px; border: 0; outline: 0; background: none; color: var(--ink); font: 400 16px/1 var(--ranade); }
.notify input::placeholder { color: var(--ink3); }
.notify .pill { height: 46px; }
.notify.is-done { box-shadow: inset 0 0 0 1px rgb(191 227 255 / .5); }
.notify__msg { margin-top: 12px; min-height: 1.5em; }
.share { margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.share__btn { font: 500 14px/1 var(--ranade); color: var(--ink); text-decoration: none; padding: 8px 4px; display: inline-block; }
.share__btn[hidden] { display: none; }

.endfoot { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); }
.endfoot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.endfoot a { color: var(--ink2); text-decoration: none; display: inline-block; padding: 4px 2px; }

/* -------------------------------------------------------------- popup */

/* The popup is not a card. Its words stand in the world like a chapter, and
   the loader's ring of ticks forms round them: drawn by the particles
   (world/glsl.js), or by .pop__ring where there is no world (src/notify.js).
   The scrim only darkens inside the ring, so the words read over the stars. */
.pop { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 84px 22px 40px; overflow: hidden; }
.pop[hidden] { display: none; }
.pop__scrim { position: absolute; inset: 0; background: radial-gradient(circle calc(var(--R, 300px) * 1.02) at var(--x, 50%) var(--y, 50%), rgb(3 3 4 / .66), rgb(3 3 4 / .5) 62%, rgb(3 3 4 / .1) 100%, rgb(3 3 4 / .06)); }
:root:not(.gl) .pop__scrim, :root:not(.motion) .pop__scrim { background: rgb(3 3 4 / .95); }
.pop__ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pop__ring[hidden] { display: none; }
.pop__close { position: fixed; top: 22px; right: var(--gutter); z-index: 1; display: inline-flex; align-items: center; gap: 12px; padding: 12px 4px; color: var(--ink); }
.pop__close i { position: relative; width: 12px; height: 12px; transition: transform .6s var(--ease); }
.pop__close i::before, .pop__close i::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1px; background: currentColor; transform: rotate(45deg); }
.pop__close i::after { transform: rotate(-45deg); }
.pop__close:hover i { transform: rotate(90deg); }
.pop__words:focus { outline: none; }
.pop__words { position: relative; width: min(470px, 100%); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.pop .ch__kicker { justify-content: center; margin-bottom: 18px; }
.pop__title { width: 100%; }
.pop__title > * { font: 400 clamp(36px, 4vw, 56px)/1 var(--excon); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.pop__body { margin-top: 16px; max-width: 34ch; color: var(--ink2); font-size: 16px; line-height: 1.55; text-wrap: balance; }
.pop .notify { margin-top: 26px; width: 100%; max-width: 440px; }
.pop__after { display: none; margin-top: 18px; }
.pop.is-done .pop__after { display: grid; justify-items: center; gap: 4px; }
.pop.is-done .notify, .pop.is-done .pop__body { display: none; }
@media (max-width: 760px) {
  .pop__close { top: 14px; }
  .pop__title > * { font-size: clamp(32px, 9.4vw, 40px); }
  .pop__body { font-size: 15px; }
}
.notify__msg a { color: var(--ink2); }
.notify.is-busy { opacity: .6; pointer-events: none; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pill .ig { width: 18px; height: 18px; }


/* The loader's wordmark, in the middle of its ring: on the landing page's
   loader, and in the ring between pages (the same place, the same size). */
.ring-mark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; font: 600 clamp(44px, 5vw, 64px)/1 var(--chillax); letter-spacing: -.005em; color: var(--ink); white-space: nowrap; }

/* Moving between pages (src/transition.js): the iris, its ring of ticks and
   the wordmark. On a page arrived at that way, the script under .tx has drawn
   the ring before the first paint; the black behind it is a backstop. */
.tx { position: fixed; inset: 0; z-index: 400; display: none; pointer-events: none; }
.tx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tx.is-on, .tx-in .tx { display: block; }
.tx-in body::before { content: ""; position: fixed; inset: 0; z-index: 399; background: #000; }

/* The sound switch, in the top bar (initSoundSwitch in src/sound.js). Its
   bars dance to the score while it plays; while it's off they lie still and
   ripple when you point at it, offering the music. */
.hud__sound { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.hud__sound b { font-weight: 400; color: var(--ink); display: inline-block; min-width: 3ch; text-align: left; }
.bars { display: flex; align-items: center; gap: 2px; height: 16px; }
.bars i { width: 2px; height: 16px; border-radius: 1px; background: var(--ink); transform: scaleY(.2); transform-origin: 50% 50%; }
.hud__sound.is-on .bars i { background: linear-gradient(#bfe3ff, var(--ink) 40%, var(--ink) 60%, #e6d4ff); }
@media (hover: hover) {
  .hud__sound:not(.is-on):hover .bars i { animation: barwave .7s var(--ease-io) infinite alternate; }
  .hud__sound:not(.is-on):hover .bars i:nth-child(2) { animation-delay: -.14s; } .hud__sound:not(.is-on):hover .bars i:nth-child(3) { animation-delay: -.28s; }
  .hud__sound:not(.is-on):hover .bars i:nth-child(4) { animation-delay: -.42s; } .hud__sound:not(.is-on):hover .bars i:nth-child(5) { animation-delay: -.56s; }
}
@keyframes barwave { from { transform: scaleY(.2); } to { transform: scaleY(.85); } }
.no-gl .hud__sound { display: none; }

@media (max-width: 760px) {
  .hud__meta, .hud__link--ig, .hud__sound-word { display: none; }
  .hud__sound { min-width: 40px; min-height: 40px; justify-content: center; }
  .hud--top { padding: 16px var(--gutter); gap: 12px; }
  .hud__nav { gap: 14px; }
  .hud--top .pill { padding: 0 16px; height: 40px; }
  .hud__back { margin-left: 4px; gap: 8px; }
  .hud__back .long { display: none; }
  .hud__back .short { display: inline; }
  .hud--doc { padding-bottom: 30px; }
  .notify .pill { padding: 0 16px; }
  .endfoot { justify-content: center; text-align: center; }
  .endfoot nav { justify-content: center; gap: 14px; }
}

/* A phone's top bar has room for the wordmark, the sound, Policies and Get
   notified, no more. On a policy page the wordmark is the way home, and an
   arrow says so ("Back to Mull" is also at the end of every page). */
@media (max-width: 560px) {
  .hud__back { display: none; }
  .hud--doc .wordmark { display: inline-flex; align-items: center; gap: 9px; }
  .hud--doc .wordmark::before { content: ""; width: 7px; height: 7px; margin-top: 3px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); }
}
@media (max-width: 400px) {
  .hud--top, .hud__nav { gap: 10px; }
  .hud__sound { min-width: 34px; }
  .menu__btn { gap: 7px; }
  .hud--top .pill { padding: 0 14px; height: 38px; font-size: 13.5px; }
}
@media (max-width: 350px) {
  .hud--top { padding-left: 14px; padding-right: 14px; }
  .hud--top, .hud__nav { gap: 8px; }
  .hud__sound { min-width: 28px; }
  .menu__btn { letter-spacing: .04em; }
  .menu__btn i { display: none; }
  .hud--top .pill { padding: 0 12px; font-size: 13px; }
  .hud--doc .wordmark { gap: 7px; }
}

/* A fine grain over every page. */
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }

.mono { font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.wordmark { font: 600 24px/1 var(--chillax); letter-spacing: -.005em; color: var(--ink); text-decoration: none; }

.skip { position: fixed; left: 16px; top: 16px; z-index: 200; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: #000; text-decoration: none; transform: translateY(-200%); transition: transform .3s var(--ease); }
.skip:focus { transform: none; }

/* Pills: the only buttons on the site. */
.pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 22px; border-radius: 999px; overflow: hidden; isolation: isolate;
  font: 500 14px/1 var(--ranade); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: transform .5s var(--ease), color .4s var(--ease);
}
.pill--lg { height: 58px; padding: 0 32px; font-size: 16px; }
.pill--light { background: var(--ink); color: #050507; }
.pill--ghost { color: var(--ink); background: rgb(var(--ink-rgb) / .06); box-shadow: inset 0 0 0 1px var(--line2); }
.pill::before {
  /* A sweep of spectral light on hover, like a glass edge catching the sun. */
  content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--iris);
  transform: translateX(-105%) skewX(-12deg); transition: transform .8s var(--ease);
}
.pill--light::before { opacity: .9; }
.pill--ghost::before { opacity: .22; }
@media (hover: hover) { .pill:hover::before { transform: translateX(0) skewX(-12deg); } }
.pill:active { transform: scale(.97); }
.pill > span { position: relative; }

.ulink { color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.ulink:hover { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}