/* Horrac: the studio. White paper and navy ink, with the logo's own colours
   for accents: the ocean's blue, the dawn's cream and the sun's gold.
   Deliberately single-theme: the studio is always light, whatever the
   visitor's OS theme, and its product (Ostrel) is the one that goes dark. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/libre-franklin-latin.woff2') format('woff2');
}

@view-transition { navigation: auto; }

:root {
  --paper: #ffffff;
  --dawn: #fff6e3;
  --ink: #0b1330;
  --ink-2: #3d4561;
  --muted: #6b7289;
  --line: #0b1330;
  --soft-line: #e4e6ee;
  --navy: #0b1b45;
  --sea: #1f55e8;
  --sea-deep: #1741b9;
  --sun: #ffb400;
  --danger: #c8231d;
  --night: #050505;
  --night-ink: #f4f6f5;
  --night-muted: #9aa39f;
  --bar-h: 68px;
  --gutter: clamp(18px, 4vw, 56px);
  --font: 'Geist', 'Helvetica Neue', Arial, sans-serif;

  /* Type. One family, nine roles; every text style on a white Horrac page
     is one of them, and never sets a size of its own. Tracking tightens as
     size grows, one step per role. Weights: 600 for anything that names a
     thing (headings, labels), 500 for anything you press, 400 for reading.
     The black Ostrel panels use Ostrel's scale instead (the --g- tokens). */
  --fs-title: clamp(52px, 8.6vw, 144px);    /* page h1 you read; the close */
  --fs-headline: clamp(40px, 5.8vw, 88px);  /* section h2; h1 of a task page */
  --fs-subhead: clamp(30px, 3.8vw, 56px);   /* a heading inside a section */
  --fs-heading: clamp(22px, 2.3vw, 32px);   /* card and list headings */
  --fs-kicker: clamp(18px, 1.5vw, 22px);    /* the blue line over a heading */
  --fs-lede: clamp(18px, 1.5vw, 21px);      /* the paragraph under a heading */
  --fs-body: 17px;
  --fs-small: 15px;                         /* labels (600) and asides (400) */
  --fs-tiny: 13px;                          /* badges only */
  --fs-input: 18px;
  --ls-title: -0.055em;
  --ls-headline: -0.045em;
  --ls-subhead: -0.04em;
  --ls-heading: -0.03em;
  --ls-kicker: -0.02em;
  --ls-text: -0.01em;

  /* Ostrel's scale, the same values as gecko.css (which takes them from the
     app itself), for the Ostrel panels here. Horrac's rules stop at a black
     panel's edge. */
  --g-font: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --g-fs-display: clamp(40px, 5.6vw, 84px);
  --g-fs-h3: 22px;
  --g-fs-lede: clamp(17px, 1.4vw, 20px);
  --g-fs-small: 14px;
  --g-fs-label: 12px;
  --g-fs-figure: clamp(84px, 12vw, 190px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.move { scroll-behavior: smooth; }
#account { scroll-margin-top: var(--bar-h); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
::selection { background: var(--sea); color: var(--paper); }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 14px; text-decoration: none;
}
.skip:focus { top: 12px; }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }

/* The lockup: the mark and the word, sized together in em so the hero's
   copy can fly into the bar's copy and land exactly on it. */
.lockup {
  display: inline-flex; align-items: center; gap: 0.24em;
  font-family: var(--font); font-weight: 600; letter-spacing: -0.05em; line-height: 1;
  white-space: nowrap;
}
.lockup > img, .lockup > svg { width: 0.96em; height: 0.96em; flex: none; }
.lockup__word { display: inline-block; padding-bottom: 0.06em; }

/* ---- The arrow. One shape (arrow.svg's path), always 0.95em of the text
   beside it, so its stroke keeps pace with the type's weight. It has two
   jobs: after an action's label it says "this goes somewhere" and nudges on
   hover; before the second half of a before-and-after it says "becomes"
   and stays still. It is never decoration and never a bullet. ---- */
.arw {
  width: 0.95em; height: 0.95em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 260ms var(--ease-out);
}
@media (hover: hover) {
  a:hover > .arw, button:hover > .arw, a:hover .tile__go > .arw { transform: translateX(0.2em); }
}

/* ---- Buttons and small shared pieces. ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px;
  font: 500 16px/1 var(--font); letter-spacing: var(--ls-text);
  color: var(--ink); background: transparent;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1.5px solid var(--ink); border-radius: 999px;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 160ms var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn--ink, .btn--solid { background: var(--ink); color: var(--paper); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: var(--fs-small); }
.btn--danger { color: var(--danger); border-color: var(--danger); }
@media (hover: hover) {
  .btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
  .btn--ink:hover:not(:disabled), .btn--solid:hover:not(:disabled) { background: var(--sea); border-color: var(--sea); }
  .btn--danger:hover:not(:disabled) { background: var(--danger); border-color: var(--danger); color: var(--paper); }
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Continue with Google: white, Google's own grey outline and the full-colour
   G, as its sign-in branding asks. It never takes the ink hover. */
.btn--google { width: 100%; gap: 12px; background: #ffffff; color: #1f1f1f; border: 1px solid #747775; }
.btn--google .gmark { width: 20px; height: 20px; }
@media (hover: hover) {
  .btn--google:hover:not(:disabled) { background: #f4f6fa; color: #1f1f1f; border-color: #1f1f1f; }
}
/* The "or" between Google and email. */
.or { display: flex; align-items: center; gap: 14px; margin: 4px 0; font-size: var(--fs-small); letter-spacing: var(--ls-text); color: var(--muted); }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--soft-line); }

.kicker {
  margin: 0 0 22px;
  font-size: var(--fs-kicker); font-weight: 600; letter-spacing: var(--ls-kicker); line-height: 1.2;
  color: var(--sea);
}
/* The heading roles. A page you read opens with a title; a page where you
   do something (the account, checkout) opens with a headline, so the form
   stays on screen. */
.title, .close__line {
  margin: 0; font-weight: 600;
  font-size: var(--fs-title); letter-spacing: var(--ls-title); line-height: 0.95;
  text-wrap: balance;
}
.headline, .display {
  margin: 0; font-weight: 600;
  font-size: var(--fs-headline); letter-spacing: var(--ls-headline); line-height: 1;
  text-wrap: balance;
}
.subhead, .cta h2, .acct__email {
  margin: 0; font-weight: 600;
  font-size: var(--fs-subhead); letter-spacing: var(--ls-subhead); line-height: 1.05;
}
.heading, .cell h3, .mark-story h2, .cut__was, .cut__sign {
  font-weight: 600;
  font-size: var(--fs-heading); letter-spacing: var(--ls-heading); line-height: 1.2;
}
.lede { margin: 26px 0 0; max-width: 46ch; font-size: var(--fs-lede); color: var(--ink-2); letter-spacing: var(--ls-text); }
/* Labels: small, semibold, sentence case. Never tracked capitals. */
.lab, .join label, .field-row label, .facts__row dt, .ob__rail li, .foot__cols h2, .me__who strong {
  font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--ls-text);
}

/* ---- The bar. ---- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--bar-h);
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--soft-line);
  transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease;
}
.bar__in {
  height: 100%;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding: 0 var(--gutter);
}
.bar__word { text-decoration: none; color: inherit; margin-right: auto; }
.bar__word .lockup { font-size: 27px; }
.bar__nav, .bar__acct { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.bar__acct { gap: 18px; }
.bar__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-small); font-weight: 500; text-decoration: none; color: inherit;
  padding: 8px 0;
}
.bar__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform 260ms var(--ease-out);
}
.bar__link[aria-current='page']::after { transform: scaleX(1); }
@media (hover: hover) {
  .bar__link:hover::after { transform: scaleX(1); transform-origin: left center; }
}
/* The name OSTREL, wherever it is written: set the way the Ostrel site's
   header sets it, in bold (600) tracked capitals of Libre Franklin, at
   0.86em so the capitals sit at the height of the words around them. Only
   the big standalone wordmarks drop to 500, where size alone reads bold.
   Pages wrap the word in .gword; scripts do the same. */
.gword { font-family: var(--g-font); font-weight: 600; font-size: 0.86em; letter-spacing: 0.19em; text-transform: uppercase; margin-right: -0.19em; }

/* Where the text around it is already capitals (Ostrel's buttons, labels
   and pins), OSTREL keeps that text's size. */
.gz__btn .gword, .gz__lab .gword, .tile__go .gword, .pin .gword { font-size: 1em; }
.bar__gecko { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14); }
.bar__cta { min-height: 40px; padding: 0 18px; font-size: var(--fs-small); }

/* Phones: the lockup, the account button and a menu. */
.bar__menu { display: none; position: relative; }
.bar__menu summary {
  list-style: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 999px; border: 1.5px solid currentColor;
  display: grid; place-content: center; gap: 5px;
}
.bar__menu summary::-webkit-details-marker { display: none; }
.bar__menu summary span { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform 220ms var(--ease-out); }
.bar__menu[open] summary span:first-child { transform: translateY(3.25px) rotate(45deg); }
.bar__menu[open] summary span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.bar__sheet {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 220px; padding: 8px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 18px;
  box-shadow: 0 18px 40px rgb(11 19 48 / 0.14);
  display: flex; flex-direction: column;
}
.bar__sheet a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px; text-decoration: none; font-weight: 500;
}
.bar__sheet a:hover { background: var(--dawn); }
.bar__menu[open] .bar__sheet { animation: sheet 200ms var(--ease-out); }
@keyframes sheet { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }

/* Home: the bar is see-through over the hero (so the flying lockup passes
   under nothing), goes black over Ostrel's night, and turns solid white once
   the page scrolls on into content. */
.move .home .bar { background: transparent; border-bottom-color: transparent; }
.move .home.bar-solid .bar { background: var(--paper); border-bottom-color: var(--soft-line); }
.home.bar-night .bar { background: var(--night); color: var(--night-ink); border-bottom-color: #1c1f1e; }
.home.bar-night .bar__cta { background: var(--night-ink); color: var(--night); border-color: var(--night-ink); }
.move .home .bar__word .lockup { opacity: var(--land, 0); }

/* ---- Home: the stage. Scrolling flies the lockup into the bar, raises the
   night and reveals Ostrel. Without motion it is simply two stacked panels. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--bar-h) + 5vh) var(--gutter) clamp(70px, 10vh, 110px);
  background: var(--paper);
}
.hero__brand { margin: 0; font-size: clamp(66px, 18vw, 290px); font-weight: 600; line-height: 1; }
.hero__brand .lockup { transform-origin: 0 0; }
.hero__brand .l { display: inline-block; }
.hero__line {
  margin: clamp(26px, 4.5vh, 48px) 0 0;
  font-weight: 500;
  font-size: var(--fs-heading);
  letter-spacing: var(--ls-heading);
  line-height: 1.15;
  /* One line at every width: on a phone the size steps down with the
     screen instead of wrapping (see the 860px block). */
  white-space: nowrap;
}
.hero__line mark { background: none; color: inherit; position: relative; white-space: nowrap; margin: 0 0.08em; }
/* The pencil strikes "busywork" out, once the page has loaded. */
.hero__line mark::after {
  content: ''; position: absolute; left: -1%; right: -1%; top: 54%; height: 0.1em;
  background: var(--sea); border-radius: 2px;
  transform: rotate(-2deg) scaleX(1); transform-origin: left center;
}
.hero__actions { margin-top: clamp(26px, 4vh, 40px); }

/* Printer's crop marks in the hero's corners: the page is a proof. */
.crop { position: absolute; width: 16px; height: 16px; border-color: #c3c6d0; border-style: solid; border-width: 0; pointer-events: none; }
.crop--tl { top: calc(var(--bar-h) + 18px); left: 18px; border-top-width: 1px; border-left-width: 1px; }
.crop--tr { top: calc(var(--bar-h) + 18px); right: 18px; border-top-width: 1px; border-right-width: 1px; }
.crop--bl { bottom: 18px; left: 18px; border-bottom-width: 1px; border-left-width: 1px; }
.crop--br { bottom: 18px; right: 18px; border-bottom-width: 1px; border-right-width: 1px; }

/* Load: the tile settles, the sun comes up, the water rises and its waves
   draw in, then the letters rise and the pencil strikes the busywork out.
   The sun's rays keep turning, slowly, afterwards. */
.logo .logo__sun, .logo .logo__rays, .logo .logo__water { transform-box: fill-box; transform-origin: center; }
.move .hero .logo { animation: tile-in 900ms var(--ease-out) both; }
.move .hero .logo__sun { animation: sun-up 1100ms var(--ease-out) 150ms both; }
.move .hero .logo__rays { animation: rays-in 900ms var(--ease-out) 450ms both, turn 60s linear 1400ms infinite; }
.move .hero .logo__water { animation: water-up 1000ms var(--ease-out) 250ms both; }
/* The three waves draw together, as one movement. */
.move .hero .logo__wave { stroke-dasharray: 1 1; animation: draw 1100ms var(--ease-out) 600ms both; }
.move .hero__brand .l { animation: rise 900ms var(--ease-out) both; animation-delay: 300ms; }
.move .hero__brand .l:nth-child(2) { animation-delay: 350ms; }
.move .hero__brand .l:nth-child(3) { animation-delay: 400ms; }
.move .hero__brand .l:nth-child(4) { animation-delay: 450ms; }
.move .hero__brand .l:nth-child(5) { animation-delay: 500ms; }
.move .hero__brand .l:nth-child(6) { animation-delay: 550ms; }
.move .hero__line { animation: fade-up 800ms var(--ease-out) both; animation-delay: 700ms; }
.move .hero__line mark::after { animation: strike 520ms var(--ease-in-out) both; animation-delay: 1400ms; }
.move .hero__actions { animation: fade-up 800ms var(--ease-out) both; animation-delay: 850ms; }
/* Held until boot.js says the brand font is in (see there), then played. */
.move:not(.go) .hero *, .move:not(.go) .hero *::after { animation-play-state: paused !important; }
@keyframes tile-in { from { opacity: 0; transform: scale(0.86); } }
@keyframes sun-up { from { opacity: 0; transform: translateY(40%); } }
@keyframes rays-in { from { opacity: 0; transform: scale(0.6) rotate(-45deg); } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes water-up { from { transform: translateY(35%); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(0.3em); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes strike { from { transform: rotate(-2deg) scaleX(0); } }

.night {
  position: relative;
  min-height: 100svh;
  background: var(--night);
  color: var(--night-ink);
  display: grid; place-items: center;
  padding: calc(var(--bar-h) + 40px) 24px 60px;
}
.tile {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  text-decoration: none; color: var(--night-ink);
  outline-offset: 12px;
}
.tile__icon {
  width: clamp(116px, 15vw, 188px); aspect-ratio: 1;
  display: grid; place-items: center;
  background: #000;
  border: 2px solid var(--night-ink);
  border-radius: 26%;
  view-transition-name: gecko-icon;
}
.tile__icon img { width: 65%; height: auto; }
.tile__name {
  display: flex; gap: 0.19em;
  margin-top: clamp(28px, 5vh, 52px);
  font-size: var(--g-fs-display);
  font-weight: 500;
  line-height: 1;
}
.tile__name span { display: inline-block; }
.night { font-family: var(--g-font); }
.tile__tag { margin-top: 26px; max-width: 30ch; font-size: var(--g-fs-lede); font-weight: 300; line-height: 1.5; color: var(--night-ink); text-wrap: balance; }
.tile__go {
  margin-top: 40px;
  display: inline-flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 22px;
  font-size: var(--g-fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--night-ink);
  border: 1px solid #3c4441;
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}
.tile__go .arw { stroke-width: 1.4; }
@media (hover: hover) {
  .tile:hover .tile__go { background: var(--night-ink); color: var(--night); border-color: var(--night-ink); }
}

/* The choreographed version. Custom properties are set from horrac.js. */
.move .stage { height: 250vh; position: relative; }
.move .stage__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.move .stage .hero { position: absolute; inset: 0; min-height: 0; }
.move .stage .hero__brand .lockup { opacity: calc(1 - var(--land, 0)); transform: translate(calc(var(--dx, 0px) * var(--a, 0)), calc(var(--dy, 0px) * var(--a, 0))) scale(calc(1 + (var(--s, 1) - 1) * var(--a, 0))); }
.move .stage .hero__rest { opacity: calc(1 - var(--a, 0) * 1.6); transform: translateY(calc(var(--a, 0) * 40px)); }
.move .stage .crop { opacity: calc(1 - var(--a, 0) * 3); }
.move .stage .night {
  position: absolute; inset: 0; min-height: 0;
  clip-path: inset(calc((1 - var(--b, 0)) * 100%) 0 0 0);
}
.move .stage .tile { pointer-events: var(--tile-events, none); }
.move .stage .tile__icon { opacity: var(--c, 0); transform: translateY(calc((1 - var(--c, 0)) * 36px)) scale(calc(0.82 + var(--c, 0) * 0.18)); }
.move .stage .tile__name span { opacity: var(--l, 0); transform: translateY(calc((1 - var(--l, 0)) * 0.55em)); }
.move .stage .tile__tag { opacity: var(--e, 0); transform: translateY(calc((1 - var(--e, 0)) * 16px)); }
.move .stage .tile__go { opacity: var(--f, 0); transform: translateY(calc((1 - var(--f, 0)) * 12px)); }

/* ---- The cut list: the second job, crossed out line by line. ---- */
.cut { padding-top: clamp(96px, 14vh, 170px); padding-bottom: clamp(60px, 9vh, 110px); }
.cut .headline { max-width: 15ch; }
.cut__list { list-style: none; margin: clamp(48px, 7vh, 84px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.cut__row {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 48px; align-items: baseline;
  padding: clamp(22px, 3vh, 32px) 0;
  border-bottom: 1px solid var(--soft-line);
}
.cut__was {
  justify-self: start;
  color: var(--ink);
  transition: color 600ms ease 300ms;
}
/* The stroke is a background under each line of the struck text, so a
   phrase that wraps is crossed out on every line, not just one. */
.cut__was s {
  text-decoration: none;
  padding: 0 0.12em; margin: 0 -0.12em;
  background: linear-gradient(var(--sea), var(--sea)) no-repeat 0 58% / 100% 0.11em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 620ms var(--ease-in-out) 220ms;
}
.move .cut__row .cut__was s { background-size: 0% 0.11em; }
.move .cut__row.in .cut__was s { background-size: 100% 0.11em; }
.cut__row.in .cut__was { color: #a6aabb; }
.cut__now {
  display: flex; gap: 14px; align-items: baseline;
  font-size: var(--fs-lede); color: var(--ink-2); letter-spacing: var(--ls-text);
}
.cut__now .arw { color: var(--sea); transform: translateY(0.12em); }
.move .cut__row .cut__now { opacity: 0; transform: translateX(-10px); transition: opacity 600ms var(--ease-out) 620ms, transform 600ms var(--ease-out) 620ms; }
.move .cut__row.in .cut__now { opacity: 1; transform: none; }
.cut__sign {
  display: inline-flex; align-items: center; gap: 0.4em; margin-top: 40px;
  color: var(--sea); text-decoration: none;
}

/* ---- Ostrel's section of the home page, in Ostrel's own style: near-black
   ground, the ruler of Ostrel's scrub strip along its top edge, Libre
   Franklin set light, square edges and its amber. Sizes come from the --g-
   tokens, which match gecko.css. ---- */
.gz {
  --gk-ground: #0e100f;
  --gk-rule: #272c2b;
  --gk-rule-2: #3c4441;
  --gk-ink: #f2f6f4;
  --gk-ink-2: #c2cfc9;
  --gk-ink-3: #b4c0ba;
  --gk-amber: #c79a4a;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--gk-ground); color: var(--gk-ink);
  font-family: var(--g-font);
  padding-top: clamp(100px, 15vh, 180px); padding-bottom: clamp(24px, 4vh, 48px);
  margin-top: clamp(40px, 6vh, 70px);
}
.gz ::selection { background: var(--gk-ink); color: var(--gk-ground); }
.gz :focus-visible { outline-color: var(--gk-ink); }
.gz__ruler {
  position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: 9px; pointer-events: none;
  background:
    repeating-linear-gradient(to right, rgb(242 246 244 / 0.22) 0 1px, transparent 1px 120px) left top / 100% 9px no-repeat,
    repeating-linear-gradient(to right, rgb(242 246 244 / 0.11) 0 1px, transparent 1px 12px) left top / 100% 4px no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
}
.gz__band { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.gz__lab {
  display: flex; align-items: center; gap: 14px; margin: 0 0 26px;
  font-size: var(--g-fs-label); font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--gk-amber);
}
.gz__chip { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: #000; border: 1px solid var(--gk-ink-3); border-radius: 26%; }
.gz__chip img { width: 65%; height: auto; }
.gz__title { margin: 0; font-weight: 300; font-size: var(--g-fs-display); line-height: 1.02; letter-spacing: -0.022em; text-wrap: balance; }
.gz__lede { margin: 28px 0 0; max-width: 46ch; font-weight: 300; font-size: var(--g-fs-lede); line-height: 1.55; color: var(--gk-ink-2); }
.gz__fine { margin: 22px 0 34px; font-size: var(--g-fs-small); color: var(--gk-ink-3); }
.gz__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 46px; padding: 0 22px;
  font-size: var(--g-fs-label); letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  color: var(--gk-ink); background: transparent; border: 1px solid var(--gk-rule-2);
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms var(--ease-out);
}
.gz__btn .arw { stroke-width: 1.4; }
.gz__btn:active { transform: scale(0.98); }
.gz__btn--solid { background: #e2e8e5; color: var(--gk-ground); border-color: #e2e8e5; }
@media (hover: hover) {
  .gz__btn:hover { border-color: var(--gk-ink); }
  .gz__btn--solid:hover { background: var(--gk-ink); border-color: var(--gk-ink); }
}
.shot { position: relative; margin: 0; }
.shot__frame { border: 1px solid var(--gk-rule-2); overflow: hidden; background: #000; box-shadow: 0 50px 100px -40px #000; }
.shot__frame img { width: 100%; height: auto; }
.shot__marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.shot__marks path { fill: none; stroke: var(--gk-amber); stroke-width: 0.45; stroke-linecap: round; stroke-linejoin: round; }
.pin {
  position: absolute; margin: 0;
  font-size: var(--g-fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2;
  color: var(--gk-ground); background: var(--gk-amber); padding: 8px 12px;
  transform: rotate(-2deg);
  white-space: nowrap;
}
.pin--a { left: 5%; top: 37%; }
.pin--b { right: -1%; top: -6%; transform: rotate(2deg); }
.move .shot__marks path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease-in-out); }
.move .shot.in .shot__marks path { stroke-dashoffset: 0; }
.move .shot.in .shot__marks path + path { transition-delay: 450ms; }
.move .pin { opacity: 0; translate: 0 8px; transition: opacity 500ms var(--ease-out), translate 500ms var(--ease-out); }
.move .shot.in .pin--a { opacity: 1; translate: 0 0; transition-delay: 700ms; }
.move .shot.in .pin--b { opacity: 1; translate: 0 0; transition-delay: 1100ms; }
.gz__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(80px, 12vh, 140px); }
.gz__stat { padding: clamp(24px, 3vw, 40px) clamp(18px, 2vw, 32px) clamp(28px, 3.4vw, 44px); border-top: 1px solid var(--gk-rule); }
.gz__stat + .gz__stat { border-left: 1px solid var(--gk-rule); }
.gz__stat:first-child { padding-left: 0; }
.gz__stat b { display: block; font-weight: 300; font-size: var(--g-fs-figure); letter-spacing: -0.035em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.gz__stat > span { display: block; margin-top: 16px; max-width: 24ch; font-size: var(--g-fs-lede); font-weight: 300; line-height: 1.5; color: var(--gk-ink-2); }

/* ---- Horrac account (home page band). ---- */
.joinband {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: end;
  background: var(--dawn);
  padding-top: clamp(80px, 12vh, 140px); padding-bottom: clamp(80px, 12vh, 140px);
}
.join .btn--google { min-height: 56px; }
.join .or { margin: 18px 0; }
.joinband .or::before, .joinband .or::after { background: #e6dcc6; }
.join label { display: block; margin-bottom: 12px; }
.join__row {
  display: flex; gap: 8px; padding: 6px;
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 999px;
  transition: box-shadow 180ms ease;
}
.join__row:focus-within { box-shadow: 0 0 0 4px rgb(31 85 232 / 0.2); }
.join input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: 400 var(--fs-input)/1 var(--font); color: var(--ink);
  padding: 0 16px;
}
.join input::placeholder { color: #9a9eae; }
.join .btn { min-height: 48px; }
.join__error { min-height: 1.5em; margin: 10px 0 0 16px; font-size: var(--fs-small); color: var(--danger); }
.join__note { margin: 6px 0 0 16px; font-size: var(--fs-small); color: var(--ink-2); max-width: 48ch; }
.join__note a { text-underline-offset: 3px; }

/* ---- Close. ---- */
.close { padding-top: clamp(110px, 16vh, 200px); padding-bottom: clamp(70px, 10vh, 120px); text-align: center; }
.close__line { margin: 0 auto; }
.close .actions { justify-content: center; margin-top: 40px; }
.close__small { margin: 28px 0 0; color: var(--muted); font-size: var(--fs-small); }
.close__small a { color: var(--ink); text-underline-offset: 3px; }

/* ---- Inner pages (about, 404). ---- */
.page { padding-top: var(--bar-h); }
.section { padding-top: clamp(80px, 12vh, 140px); padding-bottom: clamp(80px, 12vh, 140px); }
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  margin-top: clamp(56px, 8vh, 96px);
}
.grid > * { border-bottom: 1px solid var(--soft-line); }
.grid > * + * { border-left: 1px solid var(--soft-line); }
.cell { padding: clamp(24px, 3vw, 40px); padding-left: 0; min-height: 240px; display: flex; flex-direction: column; }
.cell + .cell { padding-left: clamp(24px, 3vw, 40px); }
.cell h3 { margin: 0 0 14px; }
.cell p { margin: 0; color: var(--ink-2); max-width: 36ch; }
.cell .glyph { width: 34px; height: 34px; margin-bottom: 40px; flex: none; color: var(--sea); }
.facts { margin: clamp(56px, 8vh, 96px) 0 0; border-top: 1px solid var(--line); }
.facts__row {
  display: grid; grid-template-columns: minmax(140px, 0.6fr) minmax(0, 1.4fr);
  border-bottom: 1px solid var(--soft-line); padding: 20px 0; gap: 20px;
}
.facts__row dt { color: var(--muted); padding-top: 4px; }
.facts__row dd { margin: 0; font-size: var(--fs-lede); letter-spacing: var(--ls-text); }
.facts__row dd a { text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
  border-top: 1px solid var(--line); padding-top: clamp(28px, 4vw, 48px); margin-top: clamp(56px, 8vh, 96px);
}
.mark-story { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(56px, 8vh, 96px); padding: clamp(24px, 3vw, 40px); background: var(--dawn); border-radius: 22px; }
.mark-story img { width: clamp(96px, 12vw, 150px); height: auto; }
.mark-story h2 { margin: 0 0 10px; }
.mark-story p { margin: 0; color: var(--ink-2); max-width: 58ch; }
.lost { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 36px; padding: calc(var(--bar-h) + 6vh) var(--gutter) 60px; }
.lost .lede { margin: 30px 0 0; }

/* ---- Legal pages (privacy, terms, data deletion). Built from legal/*.md
   by scripts/build-legal-pages.mjs. A contents rail on the left, the text
   at reading width on the right; every size is one of the nine roles. ---- */
.doc {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(56px, 8vh, 96px); padding-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.toc {
  position: sticky; top: calc(var(--bar-h) + 28px); align-self: start;
  max-height: calc(100vh - var(--bar-h) - 56px); overflow: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--soft-line) transparent;
}
.toc .lab { margin: 0; color: var(--muted); }
.toc ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.toc a {
  display: block; padding: 6px 0 6px 14px; border-left: 2px solid var(--soft-line);
  color: var(--ink-2); text-decoration: none;
  font-size: var(--fs-small); letter-spacing: var(--ls-text); line-height: 1.4;
  transition: color 160ms ease, border-color 160ms ease;
}
.toc a.is-on { color: var(--ink); border-left-color: var(--sea); }
.toc .toc__lab { margin-top: 32px; }
@media (hover: hover) { .toc a:hover { color: var(--sea); } }
.prose { max-width: 68ch; font-size: var(--fs-body); letter-spacing: var(--ls-text); line-height: 1.65; color: var(--ink-2); }
.prose h2 {
  margin: 56px 0 16px; padding-top: 24px; border-top: 1px solid var(--soft-line);
  color: var(--ink); font-weight: 600;
  font-size: var(--fs-heading); letter-spacing: var(--ls-heading); line-height: 1.2;
  scroll-margin-top: calc(var(--bar-h) + 20px);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin: 30px 0 10px; color: var(--ink); font-weight: 600; font-size: var(--fs-body); }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--sea); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--sea-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) { .prose a:hover { color: var(--sea); } }
.prose code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.9em;
  background: var(--dawn); color: var(--ink); border-radius: 6px; padding: 2px 6px;
  overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* A scope name reads as one token; the table scrolls sideways instead. */
.prose td code { white-space: nowrap; }
.prose .table-wrap { margin: 0 0 20px; overflow-x: auto; border: 1px solid var(--soft-line); border-radius: 12px; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--soft-line); }
.prose th { color: var(--ink); font-weight: 600; background: var(--dawn); }
.prose tr:last-child td { border-bottom: 0; }

/* ---- The account page: a Horrac page, not an Ostrel one. account.js adds
   chip, choice, meter and button classes at runtime, all styled here. ---- */
.acct-page { padding-top: calc(var(--bar-h) + clamp(40px, 8vh, 90px)); padding-bottom: clamp(80px, 12vh, 140px); min-height: 80svh; }
.lab { margin: 0 0 14px; color: var(--sea); }
.display { outline: none; }
.acct-page .lede { margin-top: 20px; }
.note { font-size: var(--fs-small); color: var(--muted); }
.acct-page p.note { margin: 14px 0 0; max-width: 52ch; }
.acct-page .note a, .acct-page .lede a { text-underline-offset: 3px; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.stack > .lede, .stack > .note { margin-top: 0; }
.acct__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.acct__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px, 5vh, 56px); padding-bottom: clamp(24px, 3vh, 36px); border-bottom: 1px solid var(--line); }
.acct__email { overflow-wrap: anywhere; }
.acct__out { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.acct__done { max-width: 640px; }
.panel { background: var(--paper); border: 1px solid var(--soft-line); border-radius: 22px; padding: clamp(20px, 2.4vw, 30px); }
.acct__grid > .panel { box-shadow: 0 24px 48px -32px rgb(11 19 48 / 0.28); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel__head .lab { margin: 0; }
.panel__body { display: flex; flex-direction: column; gap: 14px; }
.panel__msg:empty { display: none; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--soft-line); }
.panel__head + .row { border-top: 0; padding-top: 4px; }
.row--plain { border-top: 0; padding: 4px 0 0; justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
.row__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.row__main strong { font-weight: 600; letter-spacing: var(--ls-text); }
.row__main > span { color: var(--ink-2); font-size: var(--fs-small); }
.field-row { display: flex; flex-direction: column; gap: 8px; }
.input {
  width: 100%; min-height: 52px; padding: 0 18px;
  font: 400 var(--fs-input)/1 var(--font); color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 14px;
  outline: none; transition: box-shadow 160ms ease;
}
.input:focus { box-shadow: 0 0 0 4px rgb(31 85 232 / 0.2); }
.input--code { font-size: 28px; letter-spacing: 0.4em; font-variant-numeric: tabular-nums; text-align: center; padding-left: calc(18px + 0.4em); }
.panel .btn--solid[type='submit'] { width: 100%; }
.error { margin: 0; font-size: var(--fs-small); color: var(--danger); }
.error:empty { display: none; }
.ok { margin: 0; font-size: var(--fs-small); color: #16734a; }
.chip { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: var(--fs-tiny); font-weight: 600; background: #e7ecff; color: var(--sea-deep); }
.chip--amber { background: #fff1cc; color: #8a5a00; }
.chip--red { background: #fde3e2; color: var(--danger); }
.billing-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.choice { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; margin-top: 10px; border: 1px solid var(--soft-line); border-radius: 16px; }
.choice.is-wanted { border-color: var(--sea); box-shadow: 0 0 0 3px rgb(31 85 232 / 0.12); }
.choice__name { display: flex; align-items: baseline; gap: 10px; }
.choice__name strong { font-size: var(--fs-body); letter-spacing: var(--ls-text); }
.choice__name > span { color: var(--muted); font-size: var(--fs-small); }
.choice__name { flex-wrap: wrap; }
.choice__was { color: var(--muted); font-size: var(--fs-small); }
.choice__name > .choice__free { padding: 2px 8px; border-radius: 999px; background: var(--sun); color: var(--ink); font-size: var(--fs-tiny); font-weight: 600; }
.choice p { margin: 4px 0 0; font-size: var(--fs-small); color: var(--ink-2); }
.meter { display: flex; flex-direction: column; gap: 8px; }
.meter__top { display: flex; justify-content: space-between; font-size: var(--fs-small); }
.meter__track { height: 8px; border-radius: 999px; background: #eceef4; overflow: hidden; }
.meter__fill { height: 100%; width: calc(var(--v, 0) * 1%); background: var(--sea); border-radius: inherit; transition: width 600ms var(--ease-out); }
.meter__fill.warn { background: var(--sun); }
.meter__fill.full { background: var(--danger); }
.confirm { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--soft-line); }
.skel { border-radius: 12px; background: linear-gradient(90deg, #eef0f5 0%, #f7f8fb 50%, #eef0f5 100%) 0 0 / 200% 100%; animation: shine 1.4s linear infinite; }
.skel--title { height: 76px; width: 70%; }
.skel--line { height: 18px; width: 90%; }
.skel--short { width: 55%; }
.skel--block { height: 56px; }
@keyframes shine { to { background-position: -200% 0; } }
.done-mark { width: 72px; height: 72px; color: var(--sea); }
.done-mark svg { width: 100%; height: 100%; }
.done-mark__tick { stroke-dasharray: 40; stroke-dashoffset: 40; animation: tick 700ms var(--ease-out) 200ms forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }

/* ---- Creating the account (account page, first sign-in). One calm column
   and a rail that says where you are. ---- */
.ob { max-width: 720px; margin: 0 auto; }
.ob__rail { list-style: none; margin: 0 0 clamp(40px, 7vh, 72px); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ob__rail li { padding-top: 12px; border-top: 3px solid var(--soft-line); color: var(--muted); transition: border-color 300ms var(--ease-out), color 300ms var(--ease-out); }
.ob__rail li[data-state='done'] { border-top-color: var(--ink); color: var(--ink-2); }
.ob__rail li[data-state='now'] { border-top-color: var(--sea); color: var(--sea); }
.ob__step > .lede { margin-top: 18px; }
.ob__card { margin-top: clamp(28px, 4vh, 40px); display: flex; flex-direction: column; gap: 18px; box-shadow: 0 24px 48px -32px rgb(11 19 48 / 0.28); }
.ob__card .btn--solid { width: 100%; }
.ob__who { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: var(--fs-small); color: var(--muted); }
.ob__who strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.ob__link { padding: 0; border: 0; background: none; font: inherit; color: var(--sea); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ob__link:hover { color: var(--sea-deep); }
.move .ob__step:not([hidden]) { animation: fade-up 520ms var(--ease-out) both; }

/* Checkboxes. */
.tick { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; font-size: var(--fs-body); line-height: 1.5; cursor: pointer; }
.tick a { color: var(--sea); text-underline-offset: 3px; }
.tick input {
  appearance: none; -webkit-appearance: none; margin: 1px 0 0; width: 24px; height: 24px;
  border: 1.5px solid var(--ink); border-radius: 7px; background: var(--paper);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.tick input::before { content: ''; width: 11px; height: 6px; border: solid var(--paper); border-width: 0 0 2.2px 2.2px; transform: translateY(-1.5px) rotate(-45deg) scale(0); transition: transform 180ms var(--ease-out); }
.tick input:checked { background: var(--sea); border-color: var(--sea); }
.tick input:checked::before { transform: translateY(-1.5px) rotate(-45deg) scale(1); }

/* On/off switches. */
.switch { position: relative; flex: none; width: 48px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: #cfd3de; cursor: pointer; transition: background-color 200ms ease; }
.switch span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 3px rgb(11 19 48 / 0.3); transition: transform 220ms var(--ease-out); }
.switch[aria-checked='true'] { background: var(--sea); }
.switch[aria-checked='true'] span { transform: translateX(20px); }
.switch:disabled { opacity: 0.6; cursor: default; }

/* Things to know. */
.fact { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; align-items: start; }
.fact svg { width: 28px; height: 28px; color: var(--sea); }
.fact p { margin: 0; color: var(--ink-2); }
.fact strong { color: var(--ink); font-weight: 600; }
.fact--setting { grid-template-columns: 48px minmax(0, 1fr); padding-top: 18px; border-top: 1px solid var(--soft-line); }

/* Where do you post. */
.ob__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 4vh, 40px); }
.chipbtn { min-height: 48px; padding: 0 22px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); font: 500 16px/1 var(--font); letter-spacing: var(--ls-text); cursor: pointer; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
.chipbtn:active { transform: scale(0.97); }
.chipbtn[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .chipbtn[aria-pressed='false']:hover { background: var(--dawn); } }
.ob__next-line { margin: 0; font-size: var(--fs-lede); letter-spacing: var(--ls-text); color: var(--ink); }
.ob__next .actions .btn { flex: 1 1 auto; }

/* ---- The profile menu in the bar, once someone is signed in. ---- */
.me { position: relative; }
.me__btn { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--navy); color: var(--paper); font: 600 16px/1 var(--font); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 0 transparent; transition: box-shadow 180ms ease, transform 160ms var(--ease-out); }
.me__btn:active { transform: scale(0.95); }
.me__btn[aria-expanded='true'], .me__btn:hover { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--sea); }
.me__btn:empty::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.6; }
.home.bar-night .me__btn { background: var(--night-ink); color: var(--night); }
.home.bar-night .me__btn[aria-expanded='true'], .home.bar-night .me__btn:hover { box-shadow: 0 0 0 3px var(--night), 0 0 0 5px var(--night-ink); }
.me__menu {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 60;
  width: 290px; padding: 8px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 18px;
  box-shadow: 0 18px 40px rgb(11 19 48 / 0.16);
  display: flex; flex-direction: column;
  animation: sheet 200ms var(--ease-out);
}
.me__who { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 12px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--soft-line); }
.me__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--paper); display: grid; place-items: center; font-weight: 600; }
.me__who strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me__who div > span { display: block; font-size: var(--fs-small); color: var(--ink-2); }
.me__who .me__email { font-size: var(--fs-tiny); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px; background: none; color: inherit; font: 500 var(--fs-small)/1.2 var(--font); text-align: left; text-decoration: none; cursor: pointer; }
.me__item svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.me__item:hover, .me__item:focus-visible { background: var(--dawn); outline: none; }
.me__item--danger { color: var(--danger); }
.me__item--danger svg { color: var(--danger); }
.me__item--danger:hover, .me__item--danger:focus-visible { background: #fdeceb; }
.me__sep { height: 1px; margin: 6px 4px; background: var(--soft-line); }

/* ---- Footer, closed by the lockup at full width. ---- */
.foot { border-top: 1px solid var(--line); padding-top: 44px; padding-bottom: clamp(28px, 5vh, 56px); }
.foot__cols { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 28px; font-size: var(--fs-small); }
.foot__cols p { margin: 0 0 6px; color: var(--ink-2); max-width: 34ch; }
.foot__cols h2 { margin: 0 0 12px; color: var(--muted); }
.foot__links { display: flex; flex-direction: column; gap: 7px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__giant { display: flex; margin-top: clamp(44px, 8vh, 90px); }
.foot__giant .lockup { font-size: clamp(44px, 8vw, 128px); }

/* ---- Scroll-in reveal for ordinary content (set up by horrac.js). ---- */
.move [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: var(--delay, 0ms); }
.move [data-reveal].in { opacity: 1; transform: none; }
[data-delay='1'] { --delay: 90ms; }
[data-delay='2'] { --delay: 180ms; }
[data-delay='3'] { --delay: 270ms; }

@media (max-width: 980px) {
  .gz__band, .joinband, .acct__grid { grid-template-columns: minmax(0, 1fr); }
  .pin--b { right: 2%; }
}
@media (max-width: 860px) {
  :root { --bar-h: 60px; }
  .bar__nav, .bar__acct > .bar__link { display: none; }
  .bar__menu { display: block; }
  .bar__acct { gap: 10px; }
  .bar__word .lockup { font-size: 24px; }
  .hero__line { font-size: min(var(--fs-heading), 4.5vw); }
  .cut__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .gz__stats { grid-template-columns: minmax(0, 1fr); }
  .gz__stat, .gz__stat:first-child { padding-left: 0; }
  .gz__stat + .gz__stat { border-left: 0; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > * + * { border-left: 0; }
  .cell, .cell + .cell { min-height: 0; padding-left: 0; }
  .facts__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .mark-story { grid-template-columns: minmax(0, 1fr); }
  .doc { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .toc { position: static; max-height: none; }
  .acct__out { align-items: flex-start; }
  .foot__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__cols > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .bar__cta { padding: 0 14px; }
  .join__row { flex-direction: column; border-radius: 22px; }
  .join input { min-height: 48px; }
  .pin { font-size: 11px; padding: 5px 8px; }
  .choice { flex-direction: column; align-items: flex-start; }
  .row { flex-direction: column; align-items: flex-start; }
  .ob__rail li { font-size: var(--fs-tiny); }
  .me__menu { position: fixed; left: 16px; right: 16px; top: calc(var(--bar-h) + 8px); width: auto; }
}

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