/* AYIKAMAZSIN · the queue
   Page styles over scrollcraft.css. No inline styles anywhere: the production
   CSP (style-src 'self') refuses them, so every per-leg value lives here. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-degisken-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Pirata One";
  src: url("fonts/PirataOne-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --sc-canvas:     #0a0a0b;
  --sc-surface:    #141416;
  --sc-ink:        #edebe5;
  --sc-ink-soft:   #aaa69e;
  --sc-accent:     #edebe5;
  --sc-accent-ink: #0a0a0b;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Archivo", system-ui, sans-serif;
  --gothic: "Pirata One", "Archivo", serif;
  --feather: radial-gradient(ellipse 50% 50% at 50% 50%, #000 54%, transparent 100%);

  /* One face size for the whole flight. Height governs on a wide screen, the
     width cap on a narrow one. */
  --face: min(100svh, 64vw);
}
html { background: var(--sc-canvas); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 1rem; top: 1rem; z-index: 90;
  padding: 0.7rem 1rem; background: var(--sc-ink); color: var(--sc-canvas);
  font-size: 0.85rem; font-weight: 600; text-decoration: none; border-radius: 2px;
  transform: translateY(-180%); transition: transform 160ms var(--sc-ease-out);
}
.skip:focus-visible { transform: none; }

/* ============================================================== tunnel == */

/* Lenis owns the wheel on desktop; the engine's smooth-scroll would fight it. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }

/* The scenes live in one 3D tunnel. queue.js places each at its depth: far
   ones small, fogged and off to one side, the current one flat in the frame,
   the last one rushing past the camera. The engine keeps empty markers. */
.marker { display: none; }
.tunnel { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 50%; }
.tunnel .leg {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  /* will-change is granted by queue.js only to the scenes on screen: twenty
     full-screen layers held at once is memory a phone spends on jank. */
  /* Soft edges, so a scene in the distance reads as a light in the fog rather
     than as a floating card. */
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 58%, transparent 100%);
          mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 58%, transparent 100%);
}

/* ================================================================ legs == */

.leg .poster { display: none; }
/* --near (set by queue.js): 1 when the scene is in the frame, falling to 0 as
   it recedes. The plates and shades that frame a scene fade with it, so a
   distant scene is only its face in the fog, never a floating card. */
.leg__far {
  position: absolute; inset: -8%;
  background: center / cover no-repeat;
  opacity: calc(0.45 * var(--near, 1));
  /* Its own soft edge too: at any scale in the tunnel, never a rectangle. */
  -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 35%, transparent 100%);
  will-change: transform;
}
.leg__glow { position: absolute; inset: 0; pointer-events: none; }
.leg__veil { position: absolute; inset: 0; background: #050506; opacity: 0; pointer-events: none; z-index: 5; }

/* The square frame most scenes live in. --cx: its centre across the viewport
   (vw). --fx/--fy: the point a scene moves around, as a fraction of it. */
.leg { --cx: 50; --fx: 0.5; --fy: 0.5; --mx: 0.5; }
.leg.img-l { --cx: 35; }
.leg.img-r { --cx: 65; }
.leg__cam {
  position: absolute; z-index: 2;
  /* --fs: this scene's scale against the shared face size, so the flight
     alternates close-ups and distance instead of one frame size throughout. */
  width: calc(var(--face) * var(--fs, 1)); height: calc(var(--face) * var(--fs, 1));
  left: calc(var(--cx) * 1vw - var(--face) * var(--fs, 1) / 2);
  top: calc(50svh - var(--face) * var(--fs, 1) / 2);
  transform-origin: calc(var(--fx) * 100%) calc(var(--fy) * 100%);
  will-change: transform;
}
.leg__cam > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  -webkit-mask-image: var(--feather); mask-image: var(--feather);
}
.leg__cam.slices, .leg__cam.tiles { -webkit-mask-image: var(--feather); mask-image: var(--feather); }
.slices .part, .tiles .part { position: absolute; background-repeat: no-repeat; will-change: transform; }
.slices .part { top: 0; height: 100%; }

/* Scale, per scene: close-ups and distance. */
.leg--lowwr   { --fs: 1.18; }
.leg--inflated{ --fs: 0.9; }
.leg--bronze  { --fs: 1.08; }
.leg--negwr   { --fs: 1.12; }
.leg--openmid { --fs: 0.84; }
.leg--lpdonor { --fs: 1.2; }
.leg--stuck   { --fs: 1.28; }
.leg--warmup  { --fs: 1.16; }
.leg--lpdonor .leg__face { filter: brightness(1.4) contrast(1.06); }

/* The verdict. The one colour on the page, and only on the full stop. */
.dot { color: #e2323c; }

/* A third plane: the scene's word, enormous and hollow, behind the face and
   drifting against it. Decorative; the readable word is in the copy layer. */
.ghost-word {
  position: absolute; left: 50%; top: 50%; z-index: 1; margin: 0;
  transform: translate(-50%, -50%);
  font-family: var(--sc-font-display); font-weight: 900; font-stretch: 125%;
  font-size: 25vw; line-height: 0.8; letter-spacing: -0.04em; text-transform: uppercase;
  white-space: nowrap; pointer-events: none;
  color: transparent; -webkit-text-stroke: 2px rgb(237 235 229 / 0.34);
  will-change: transform, opacity;
}

/* Focal points, per scene. */
.leg--queue    { --fx: 0.5;  --fy: 0.47; }
.leg--fresh    { --fx: 0.27; --fy: 0.55; --mx: 0.38; }
.leg--gonext   { --fx: 0.44; --fy: 0.32; }
.leg--lowwr    { --fx: 0.32; --fy: 0.40; --mx: 0.4; }
.leg--inflated { --fx: 0.46; --fy: 0.30; }
.leg--bronze   { --fx: 0.5;  --fy: 0.45; }
.leg--negwr    { --fx: 0.5;  --fy: 0.35; }
.leg--openmid  { --fx: 0.5;  --fy: 0.52; }
.leg--mechanics{ --fx: 0.4;  --fy: 0.5; }
.leg--doglow   { --fx: 0.49; --fy: 0.40; }
.leg--lpdonor  { --fx: 0.45; --fy: 0.45; }
.leg--stuck    { --fx: 0.57; --fy: 0.61; --mx: 0.55; }
.leg--warmup   { --fx: 0.5;  --fy: 0.40; }
.leg--mental   { --fx: 0.45; --fy: 0.38; }

/* Ambient plates. */
.leg--queue .leg__far    { background-image: url("assets/far/hero-wall.webp"); opacity: var(--near, 1); inset: -4%; }
.leg--fresh .leg__far    { background-image: url("assets/far/08-sargi.webp"); }
.leg--pisslow .leg__far  { background-image: url("assets/far/pisslow.webp"); opacity: calc(0.35 * var(--near, 1)); }
.leg--gonext .leg__far   { background-image: url("assets/far/gonext.webp"); }
.leg--lowwr .leg__far    { background-image: url("assets/far/lowwr.webp"); }
.leg--inflated .leg__far { background-image: url("assets/far/inflated.webp"); }
.leg--bronze .leg__far   { background-image: url("assets/far/bronze.webp"); }
.leg--negwr .leg__far    { background-image: url("assets/far/03-hate.webp"); opacity: calc(0.6 * var(--near, 1)); }
.leg--openmid .leg__far  { background-image: url("assets/far/openmid.webp"); }
.leg--mechanics .leg__far{ background-image: url("assets/far/mechanics.webp"); }
.leg--doglow .leg__far   { background-image: url("assets/far/doglow.webp"); }
.leg--lpdonor .leg__far  { background-image: url("assets/far/lpdonor.webp"); }
.leg--stuck .leg__far    { background-image: url("assets/far/06-boynuz.webp"); opacity: calc(0.3 * var(--near, 1)); }
.leg--warmup .leg__far   { background-image: url("assets/far/warmup.webp"); }
.leg--mental .leg__far   { background-image: url("assets/far/mental.webp"); }
.leg--others .leg__far   { background-image: url("assets/far/14-melek.webp"); opacity: 0.12; }
.leg--server .leg__far   { background-image: url("assets/far/27-beyaz-goz.webp"); opacity: calc(0.34 * var(--near, 1)); }

.leg--queue .leg__glow {
  z-index: 1;
  background: radial-gradient(24vmin 22vmin at 50% 47%, rgb(237 235 229 / 0.18), transparent 72%);
}
.leg--server .leg__glow {
  background: radial-gradient(46vmax 34vmax at 50% 52%, rgb(237 235 229 / 0.07), transparent 70%);
}

/* Density only where type sits: a column on the copy's side, a pool under the
   wordmark, a floor under a low line. */
.leg__shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: var(--near, 1); }
.sh-pool { background: radial-gradient(ellipse 46vw 36svh at 50% 84%, rgb(8 8 9 / 0.95) 0%, rgb(8 8 9 / 0.86) 45%, rgb(8 8 9 / 0) 100%); }
.sh-l { background: linear-gradient(to right, rgb(8 8 9 / 0.95) 0%, rgb(8 8 9 / 0.9) 34vw, rgb(8 8 9 / 0.45) 46vw, rgb(8 8 9 / 0) 58vw); }
.sh-r { background: linear-gradient(to left, rgb(8 8 9 / 0.95) 0%, rgb(8 8 9 / 0.9) 36vw, rgb(8 8 9 / 0.45) 48vw, rgb(8 8 9 / 0) 60vw); }
.sh-b { background: linear-gradient(to top, rgb(8 8 9 / 0.95) 0%, rgb(8 8 9 / 0.85) 24svh, rgb(8 8 9 / 0) 40svh); }

/* PISSLOW: the photo lives inside the letters. */
.lm {
  position: absolute; left: 50%; top: 48%; z-index: 2; margin: 0;
  transform: translate(-50%, -50%);
  font-family: var(--sc-font-display); font-weight: 900; font-stretch: 62%;
  font-size: 24vw; line-height: 0.86; letter-spacing: -0.01em; text-transform: uppercase;
  white-space: nowrap;
  color: transparent; -webkit-text-fill-color: transparent;
  background: url("assets/img/pisslow.webp") 50% 30% / cover no-repeat;
  -webkit-background-clip: text; background-clip: text;
  will-change: transform, opacity;
}

/* E-GIRL DUO: two halves with the word between them. */
.half { position: absolute; z-index: 2; top: 0; bottom: 0; width: 33vw; overflow: hidden; will-change: transform; }
.half img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.half--a { left: 0;  -webkit-mask-image: linear-gradient(to right, #000 60%, transparent); mask-image: linear-gradient(to right, #000 60%, transparent); }
.half--b { right: 0; -webkit-mask-image: linear-gradient(to left, #000 60%, transparent);  mask-image: linear-gradient(to left, #000 60%, transparent); }

/* DOGLOW / MENTAL BOOM: copies of the picture that slip or trail. */
.leg__cam > .ghost { mix-blend-mode: screen; opacity: 0.5; }
.leg__cam > .trail { opacity: 0.3; }
.leg__cam > .trail:nth-child(2) { opacity: 0.2; }
.leg__cam > .trail:nth-child(1) { opacity: 0.12; }

/* BOOSTED: two counter-turning rings of photos, placed by queue.js. Only
   perspective here, no preserve-3d: the scene's own mask would flatten it, so
   depth order comes from z-index. */
.rings { position: absolute; inset: 0; z-index: 2; perspective: 1100px; --tile: min(15vw, 25vh); }
.rings .part {
  position: absolute; left: 50%; top: 50%;
  width: var(--tile); height: var(--tile); max-width: none;
  margin: calc(var(--tile) / -2) 0 0 calc(var(--tile) / -2);
  object-fit: cover; opacity: 0;
  backface-visibility: hidden;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 64%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 64%, transparent 100%);
  will-change: transform, opacity;
}
.leg__cam > .leg__blur { opacity: 0; }

/* ============================================================ watchers == */

.watchers { position: absolute; inset: 0; z-index: 125; pointer-events: none; }
.eye {
  position: absolute; left: 0; top: 0;
  max-width: none; height: auto;
  opacity: 0;
  transform-origin: 50% 50%;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 48%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 48%, transparent 100%);
  will-change: transform, opacity;
}

.ash { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 130; pointer-events: none; }

.torch {
  position: absolute; left: 0; top: 0; z-index: 124; pointer-events: none;
  width: 72vmin; height: 72vmin; margin: -36vmin 0 0 -36vmin; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(237 235 229 / 0.085), rgb(237 235 229 / 0.03) 55%, transparent);
  opacity: 0; will-change: transform, opacity;
}

/* Kinetic words: each letter rises into place as its window opens. 2D
   transforms on purpose, so three hundred letters never become layers. */
.wd { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; }

/* ================================================================ copy == */

.copy__scrim {
  background: linear-gradient(to top,
    rgb(10 10 11 / 0.9) 0%, rgb(10 10 11 / 0.55) 16%, rgb(10 10 11 / 0) 36%);
}
.c { position: absolute; margin: 0; }

.w { margin: 0; color: var(--sc-ink); text-transform: uppercase; line-height: 0.86; text-wrap: balance; }
.w--cond { font-weight: 850; font-stretch: 62%; letter-spacing: -0.005em; }
.w--wide { font-weight: 900; font-stretch: 125%; letter-spacing: -0.035em; }
.w--goth { font-family: var(--gothic); font-weight: 400; text-transform: none; letter-spacing: 0.01em; line-height: 0.9; }
.w--quiet {
  font-weight: 380; text-transform: none; line-height: 1.1;
  font-size: var(--sc-t-2xl); letter-spacing: -0.015em; color: var(--sc-ink-soft);
}
.s1 { font-size: clamp(3.6rem, 9.4vw, 9.6rem); }
.s2 { font-size: clamp(3rem, 7vw, 7.2rem); }
.s3 { font-size: clamp(2.6rem, 5.6vw, 5.8rem); }
.w--mark  { font-size: clamp(4rem, 11.5vw, 10.5rem); line-height: 0.86; }
.w--close { font-size: clamp(3.4rem, 7.2vw, 6.6rem); }

.pos-l  { left: 7vw;  top: 50%; translate: 0 -50%; max-width: 36vw; }
.pos-r  { right: 8vw; top: 50%; translate: 0 -50%; max-width: 36vw; text-align: right; }
.pos-bl { left: 7vw;  bottom: 8svh; max-width: 70vw; }
.pos-c  { left: 50%;  top: 50%; translate: -50% -50%; width: min(60rem, 32vw); text-align: center; }
/* BOOSTED sits in the hole of the wall, three cells wide. */
.pos-cw { width: min(56rem, 50vw); }

.sub {
  margin: 1.15rem 0 0; max-width: 32ch;
  font-size: var(--sc-t-lg); line-height: 1.42; letter-spacing: -0.005em;
  color: var(--sc-ink-soft); text-wrap: pretty;
}

/* The hero: an establishing shot, symmetric like the mask. */
.c--hero {
  left: 50%; translate: -50% 0; width: max-content; max-width: 94vw;
  bottom: max(4.5svh, 1.25rem);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.tagline {
  margin: 1rem 0 0; padding-left: 0.42em;
  font-size: 0.8rem; font-weight: 600; font-stretch: 125%;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.scrolldown {
  margin: clamp(1.4rem, 4.5svh, 2.75rem) 0 0; padding-left: 0.38em;
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  font-size: 0.66rem; font-weight: 600; font-stretch: 125%;
  letter-spacing: 0.38em; text-transform: uppercase;
  color: rgb(237 235 229 / 0.74);
}
.scrolldown i {
  position: relative; display: block; width: 1px; height: 3.25rem; overflow: hidden;
  margin-left: -0.38em;
  background: rgb(237 235 229 / 0.16);
}
.scrolldown i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 42%;
  background: var(--sc-ink);
  animation: drip 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes drip {
  0%   { transform: translateY(-100%); opacity: 0; }
  18%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(240%); opacity: 0; }
}

.c--others {
  left: 50%; top: 50%; translate: -50% -50%;
  width: min(62rem, 80vw); text-align: center;
}
.peakline {
  margin: 0; font-weight: 500; font-size: clamp(1.75rem, 3.5vw, 3.35rem);
  line-height: 1.08; letter-spacing: -0.022em; color: var(--sc-ink); text-wrap: balance;
}

/* EXCUSES: the line everybody types after the game, dealt at random. */
.c--excuse {
  left: 50%; top: 50%; translate: -50% -50%;
  width: min(54rem, 86vw);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.excuse__ask {
  margin: 0; padding-left: 0.34em;
  font-size: 0.8rem; font-weight: 600; font-stretch: 125%;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.excuse__line {
  margin: 1.1rem 0 0; font-size: clamp(3.2rem, 8vw, 7.4rem);
  /* Two lines reserved, so a long excuse does not push the buttons around. */
  min-height: 1.8em; display: flex; align-items: center; justify-content: center;
}
.excuse__line.is-new { animation: excuse-in 360ms var(--sc-ease-out); }
@keyframes excuse-in {
  from { opacity: 0; transform: translateY(0.14em); }
  to   { opacity: 1; transform: none; }
}
.excuse__do { margin-top: 1.6rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.excuse__btn {
  height: 3rem; padding: 0 1.3rem; cursor: pointer;
  border: 1px solid rgb(237 235 229 / 0.4); border-radius: 2px;
  background: transparent; color: var(--sc-ink);
  font-family: var(--sc-font-text); font-size: 0.78rem; font-weight: 600; font-stretch: 112%;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.excuse__btn[hidden] { display: none; }
.excuse__btn:active { transform: scale(0.97); }
.excuse__btn:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .excuse__btn:hover { border-color: var(--sc-ink); background: rgb(237 235 229 / 0.06); }
}

.c--server {
  left: 50%; top: 50%; translate: -50% -50%;
  width: min(48rem, 90vw);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.sub--center { margin-inline: auto; text-align: center; max-width: 30ch; }

/* What is inside the server, between the pitch and the invite. */
.inside {
  list-style: none; margin: 1.15rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; row-gap: 0.45rem;
  font-size: 0.74rem; font-weight: 600; font-stretch: 125%;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink);
}
.inside li { white-space: nowrap; }
.inside li:not(:last-child)::after { content: "·"; margin: 0 0.85em; color: #e2323c; }
/* Narrower than the one row: two by two, so no separator hangs at a line end. */
@media (max-width: 820px) {
  .inside { display: grid; grid-template-columns: auto auto; column-gap: 1.4rem; }
  .inside li:not(:last-child)::after { content: none; }
}

.join {
  margin-top: 1.5rem;
  display: inline-flex; align-items: center; gap: 0.75rem;
  height: 3.6rem; padding: 0 1.8rem;
  background: var(--sc-ink); color: var(--sc-canvas);
  font-size: 1rem; font-weight: 700; font-stretch: 112%; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset, 0 14px 34px -14px rgb(0 0 0 / 0.9);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.join svg { width: 1.4rem; height: 1.4rem; fill: currentColor; flex: none; }
.join:active { transform: scale(0.97); }
.join:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .join:hover { background: #ffffff; transform: translateY(-1px); }
  .join:hover:active { transform: scale(0.97); }
}
/* Under the invite: the crowd right now and the address itself. One row on a
   wide screen, two on a phone. */
.joinmeta {
  margin-top: 1.1rem;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  column-gap: 1.6rem; row-gap: 0.55rem;
}
.live, .invite {
  margin: 0; display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.7rem; font-weight: 600; font-stretch: 125%;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-ink-soft);
  font-variant-numeric: tabular-nums;
}
/* The hidden attribute loses to display:inline-flex without this. */
.live[hidden], .invite__copy[hidden] { display: none; }
.live i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: #e2323c; flex: none; }
.invite__url { text-transform: none; letter-spacing: 0.06em; color: var(--sc-ink); }
.invite__copy {
  all: unset; cursor: pointer; color: var(--sc-ink-soft);
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  text-decoration: underline; text-underline-offset: 0.35em;
  text-decoration-color: rgb(237 235 229 / 0.35);
}
.invite__copy:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .invite__copy:hover { color: var(--sc-ink); text-decoration-color: currentColor; }
}

.colophon {
  margin: 1.45rem 0 0; padding-left: 0.34em;
  font-size: 0.64rem; font-weight: 600; font-stretch: 125%;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--sc-ink-soft);
}

/* Laptops at 720–820px tall: the invite block has to fit between the two
   walls of eyes (rows at 21vh and 79vh), so it tightens with the height. */
@media (min-width: 761px) and (max-height: 820px) {
  .w--close { font-size: clamp(3rem, min(7.2vw, 10svh), 6.6rem); }
  .c--server .sub { margin-top: 0.8rem; font-size: 1rem; }
  .inside { margin-top: 0.9rem; }
  .join { margin-top: 1.2rem; height: 3.2rem; }
  .joinmeta { margin-top: 0.85rem; }
  .colophon { margin-top: 1rem; }
}

/* Short phones (SE-sized): the same squeeze, and the colophon steps aside. */
@media (max-width: 760px) and (max-height: 720px) {
  .w--close { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .c--server .sub { margin-top: 0.7rem; font-size: 0.95rem; }
  .inside { margin-top: 0.8rem; row-gap: 0.35rem; }
  .join { margin-top: 1.1rem; height: 3.2rem; }
  .joinmeta { margin-top: 0.8rem; }
  .colophon { display: none; }
}

/* ============================================================== chrome == */

/* The live patch, top left, opposite the sound control and on its baseline. */
.patch {
  position: fixed; z-index: 70; margin: 0;
  top: max(1rem, env(safe-area-inset-top)); left: max(1rem, env(safe-area-inset-left));
  /* Block, not flex: a flex container trims the spaces between its text runs
     ("PATCH26.19"). The line box centres it on the sound control instead. */
  display: block; height: 2.75rem; line-height: 2.75rem; white-space: nowrap;
  font-size: 0.66rem; font-weight: 600; font-stretch: 125%;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--sc-ink-soft);
  font-variant-numeric: tabular-nums; text-decoration: none;
  transition: color 160ms var(--sc-ease-out);
}
.patch[hidden] { display: none; }
.patch:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .patch:hover { color: var(--sc-ink); text-decoration: underline; text-underline-offset: 0.45em; }
}

.sound {
  position: fixed; z-index: 70;
  top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right));
  display: inline-flex; align-items: center; gap: 0.65rem;
  height: 2.75rem; padding: 0 1rem;
  background: rgb(10 10 11 / 0.6);
  border: 1px solid rgb(237 235 229 / 0.28);
  border-radius: 2px;
  color: var(--sc-ink);
  font-size: 0.66rem; font-weight: 600; font-stretch: 125%;
  letter-spacing: 0.3em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.sound:active { transform: scale(0.97); }
.sound:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .sound:hover { border-color: rgb(237 235 229 / 0.7); }
}
.sound__state { color: var(--sc-ink-soft); min-width: 2.6em; }
.sound.is-on .sound__state { color: var(--sc-ink); }
.sound__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.sound__bars i {
  display: block; width: 2px; height: 13px; background: currentColor;
  transform-origin: 50% 100%; transform: scaleY(0.22);
  transition: transform 260ms var(--sc-ease-out);
}
.sound.is-on .sound__bars i { animation: eq 1.1s ease-in-out infinite alternate; }
.sound.is-on .sound__bars i:nth-child(2) { animation-duration: 0.8s; animation-delay: -0.3s; }
.sound.is-on .sound__bars i:nth-child(3) { animation-duration: 1.3s; animation-delay: -0.6s; }
.sound.is-on .sound__bars i:nth-child(4) { animation-duration: 0.95s; animation-delay: -0.2s; }
@keyframes eq { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
.sound.is-invite { border-color: rgb(237 235 229 / 0.5); }
.sound.is-invite .sound__bars i { animation: hint 3.2s ease-in-out infinite; }
.sound.is-invite .sound__bars i:nth-child(2) { animation-delay: 0.12s; }
.sound.is-invite .sound__bars i:nth-child(3) { animation-delay: 0.24s; }
.sound.is-invite .sound__bars i:nth-child(4) { animation-delay: 0.36s; }
@keyframes hint { 0%, 70%, 100% { transform: scaleY(0.22); } 80% { transform: scaleY(0.9); } }
.sound:disabled { opacity: 0.45; cursor: default; }

/* ============================================================== phone == */

@media (max-width: 760px) {
  /* The picture takes the top of the screen and the word gets the dark floor
     under it, so no line ever sits on the brightest part of a picture. */
  :root { --face: min(122vw, 62svh); }
  .leg__cam {
    width: var(--face); height: var(--face);
    left: calc(50vw - var(--mx) * var(--face)); top: 5svh;
  }
  .ghost-word { font-size: 38vw; top: 34svh; -webkit-text-stroke-width: 1px; }
  .leg__shade.sh-l, .leg__shade.sh-r { display: none; }
  .sh-pool { background: linear-gradient(to top, rgb(8 8 9 / 0.9) 0%, rgb(8 8 9 / 0.6) 22%, rgb(8 8 9 / 0) 40%); }

  .copy__scrim {
    background: linear-gradient(to top,
      rgb(10 10 11 / 0.94) 0%, rgb(10 10 11 / 0.7) 26%, rgb(10 10 11 / 0) 48%);
  }
  .c--hero { bottom: max(3.5svh, 1rem); }
  .w--mark { font-size: clamp(3.4rem, 19vw, 5.4rem); }
  .tagline { font-size: 0.72rem; letter-spacing: 0.36em; padding-left: 0.36em; }

  .pos-l, .pos-r, .pos-bl {
    left: 1.25rem; right: 1.25rem; top: auto; bottom: 9svh; translate: none;
    max-width: none; text-align: left;
  }
  .pos-c { width: calc(100vw - 2.5rem); }
  .s1 { font-size: clamp(3rem, 15vw, 4.6rem); }
  .s2 { font-size: clamp(2.5rem, 11.5vw, 3.6rem); }
  .s3 { font-size: clamp(2.1rem, 9.5vw, 3rem); }

  .lm { font-size: 30vw; top: 36%; }
  .rings { --tile: min(30vw, 17svh); }
  .half { left: 0; right: 0; width: auto; }
  .half--a { top: 0; bottom: auto; height: 40svh; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
  .half--b { top: auto; bottom: 0; height: 40svh; -webkit-mask-image: linear-gradient(to top, #000 60%, transparent); mask-image: linear-gradient(to top, #000 60%, transparent); }

  .c--others, .c--server { width: calc(100vw - 2.5rem); }
  .peakline { font-size: clamp(1.6rem, 7.4vw, 2.2rem); }
  .w--close { font-size: clamp(2.6rem, 12.5vw, 3.6rem); }
  .c--excuse { width: calc(100vw - 2.5rem); }
  .excuse__ask { font-size: 0.66rem; letter-spacing: 0.24em; padding-left: 0.24em; }
  .excuse__line { font-size: clamp(2.6rem, 12.5vw, 3.8rem); }
  .excuse__btn { height: 2.9rem; padding: 0 1rem; font-size: 0.7rem; letter-spacing: 0.12em; }
  /* Two by two on a phone: a wrapped row would hang its separator. */
  .inside { font-size: 0.64rem; letter-spacing: 0.16em; }
  .patch { font-size: 0.58rem; letter-spacing: 0.2em; }
  .patch__tail { display: none; }
  .join { height: 3.5rem; padding: 0 1.3rem; font-size: 0.95rem; }
  .live, .invite { font-size: 0.62rem; letter-spacing: 0.16em; }
  .colophon { font-size: 0.56rem; letter-spacing: 0.14em; padding-left: 0.14em; white-space: nowrap; }

  .sound { height: 2.75rem; padding: 0 0.85rem; }
  .sound__label { display: none; }
}

/* ===================================================== reduced motion == */

@media (prefers-reduced-motion: reduce) {
  .scrolldown i::after { animation: none; top: 29%; }
  .sound.is-on .sound__bars i { animation: none; transform: scaleY(0.7); }
  .sound.is-invite .sound__bars i { animation: none; }
  .skip, .join, .sound, .excuse__btn { transition: none; }
  .excuse__line.is-new { animation: none; }
}