/* Ether — etherstudios.co. A gate (the last frame of the sizzle, explored with a light), then one scroll of framed
   screens: the sizzle, Still, Sound, Motion, About, Begin, Stay close. /inquire and /connect are their own pages.
   Token NAMES are cgos-ui's (--cg-*); the VALUES are Ether's, so this block is the theme. --ether-* are the few
   brand extras cgos-ui has no slot for. No hex or rgba outside this block.
   The palette is read off Erik's photographs: matte umber darks, warm paper, dusty browns, and one gold that is
   only ever light. */
:root {
  --pad: clamp(16px, 2.6vw, 44px);
  --wrap: min(1840px, calc(100% - 2 * var(--pad)));
  --bar-h: calc(52px + env(safe-area-inset-top, 0px));
  --stage-h: 100vh;

  --ether-night: #16120e;   /* the room with the light off */
  --ether-umber: #2b231c;
  --ether-bark:  #5e4c3f;
  --ether-taupe: #8f7c6d;
  --ether-sand:  #c6b4a1;
  --ether-cream: #f3ebdf;   /* type on the dark */
  --ether-sun:   #e3ae63;   /* the light */
  --ether-glow:  #f8dcab;   /* the light's core */
  --ether-black: #0c0907;   /* behind the film */
  --ether-shade: rgba(22, 18, 14, .18);
  --ether-shade-far: rgba(22, 18, 14, .08);
  --ether-shade-deep: rgba(8, 6, 4, .5);
  /* One grade for every photograph, and the two states the light moves between. */
  --ether-grade: saturate(.84) sepia(.07);
  --ether-grade-rest: grayscale(.8) sepia(.22) brightness(.84);
  --ether-grey: grayscale(1) sepia(.16) brightness(.58) contrast(1.08);
  --ether-ease-fall: cubic-bezier(.5, 0, .9, .55);   /* slow off the top, fast into the floor */

  --cg-bg:               #efe8dd;
  --cg-bg-elevated:      #f9f4ec;
  --cg-bg-surface:       #e3d9cb;
  --cg-bg-overlay:       color-mix(in srgb, var(--ether-night) 88%, transparent);
  --cg-text:             #1e1914;
  --cg-text-secondary:   #6b5c4f;
  --cg-text-dim:         color-mix(in srgb, var(--cg-text) 56%, transparent);
  --cg-text-muted:       color-mix(in srgb, var(--cg-text) 38%, transparent);
  --cg-text-accent:      #8b5b24;
  --cg-accent:           #c68b3e;
  --cg-accent-subtle:    color-mix(in srgb, var(--cg-accent), transparent 88%);
  --cg-border:           color-mix(in srgb, var(--cg-text) 10%, transparent);
  --cg-border-hover:     color-mix(in srgb, var(--cg-text) 22%, transparent);
  --cg-border-subtle:    color-mix(in srgb, var(--cg-text) 6%, transparent);
  --cg-fill:             color-mix(in srgb, var(--cg-text) 4%, transparent);
  --cg-fill-hover:       color-mix(in srgb, var(--cg-text) 7%, transparent);
  --cg-status-error:     #a8452d;

  --cg-font:      "SF Pro Display", -apple-system, system-ui, "Inter", "Helvetica Neue", sans-serif;
  --cg-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --ether-font-serif: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;

  --cg-radius-full: 999px;
  --ether-radius-door: clamp(22px, 1.8vw, 34px);
  --cg-control-h-md: 40px;
  --cg-control-h-lg: 48px;

  --cg-elev-1: 0 1px 2px rgba(60, 40, 20, .06);
  --cg-elev-2: 0 2px 10px rgba(60, 40, 20, .07);
  --cg-elev-3: 0 10px 30px rgba(60, 40, 20, .10);
  --cg-elev-4: 0 24px 60px rgba(60, 40, 20, .16);

  --cg-glass-bg:         color-mix(in srgb, var(--cg-bg-elevated) 62%, transparent);
  --cg-glass-border:     color-mix(in srgb, var(--cg-text) 8%, transparent);
  --cg-glass-border-top: rgba(255, 250, 240, .7);
  --cg-glass-blur:       blur(22px) saturate(140%);

  /* Motion. UI stays under 300ms; only the scenes run long, and none of those answers a tap. */
  --cg-duration-fast: 140ms; --cg-duration-base: 220ms; --cg-duration-slow: 300ms; --cg-duration-slower: 600ms;
  --cg-ease: ease;                                  /* hover and colour */
  --cg-ease-entry: cubic-bezier(0.23, 1, 0.32, 1);  /* strong ease-out: entering, pressing, responding */
  --cg-ease-emphasize: cubic-bezier(0.77, 0, 0.175, 1); /* strong ease-in-out: something moving across the screen */
}
@supports (height: 100lvh) { :root { --stage-h: 100lvh; } }

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scrollbar-gutter: stable; background: var(--ether-night); }
body {
  background: var(--ether-night); color: var(--cg-text);
  font: 400 17px/1.5 var(--cg-font); letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video, iframe { display: block; max-width: 100%; }
img { -webkit-user-drag: none; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
input, textarea { font-size: max(16px, 1em); } /* under 16px, iOS zooms the page on focus */
button, a, [role="button"] { touch-action: manipulation; }
.cg-btn, .opt, .choice, .chip, .card, .sleeve, .door, .stay, .enter, .bar a, .film-sound, .cue { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Type ── */
.slate { font: 500 10.5px/1.4 var(--cg-font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cg-text-dim); }
.charged { font-family: var(--ether-font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; line-height: 1.1; }
.label { font-size: 13px; font-weight: 500; color: var(--cg-text-dim); }
.word { font-family: var(--ether-font-serif); font-weight: 400; letter-spacing: -.04em; line-height: .8; -webkit-user-select: none; user-select: none; }
.line { font-family: var(--ether-font-serif); font-size: clamp(1.3rem, 2vw, 2.1rem); letter-spacing: -.012em; line-height: 1.1; }
/* The name, in plain type, until the logo exists. */
.name { font-family: var(--ether-font-serif); font-weight: 500; font-size: 21px; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }

/* ── Stand-ins for cgos-ui atoms (Button, IconButton, GlassSurface) ── */
.cg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--cg-control-h-lg); padding: 0 24px;
  border: 0; border-radius: var(--cg-radius-full); background: var(--cg-text); color: var(--cg-bg-elevated);
  font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: transform var(--cg-duration-fast) var(--cg-ease-entry), opacity var(--cg-duration-base);
}
.cg-btn:active { transform: scale(.97); }
.cg-btn[disabled] { opacity: .4; cursor: default; }
.cg-btn.sm { height: var(--cg-control-h-md); padding: 0 18px; font-size: 14px; }
.cg-btn.ghost { background: transparent; color: var(--cg-text-secondary); }
.glass {
  background: var(--cg-glass-bg); -webkit-backdrop-filter: var(--cg-glass-blur); backdrop-filter: var(--cg-glass-blur);
  border: 1px solid var(--cg-glass-border); box-shadow: inset 0 1px 0 var(--cg-glass-border-top), var(--cg-elev-2);
}
.cg-icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; font-size: 15px; transition: transform var(--cg-duration-fast) var(--cg-ease-entry); }
.cg-icon-btn:active { transform: scale(.94); }
.chip { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--cg-radius-full); font-size: 14px; font-weight: 500; border: 1px solid var(--cg-border); background: var(--cg-bg-elevated); transition: border-color var(--cg-duration-base); }

/* ── The light ── one gold glow, the same everywhere. On a card, a sleeve or a door it follows the pointer inside
   the element (ether.js moves .glint by transform) and the element lifts a little. */
.glint { position: absolute; left: 0; top: 0; z-index: 3; width: 170%; aspect-ratio: 1; margin: -85% 0 0 -85%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ether-glow) 42%, transparent), color-mix(in srgb, var(--ether-sun) 15%, transparent) 44%, transparent 72%);
  mix-blend-mode: screen; transition: opacity 320ms var(--cg-ease); }
canvas.motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ── The ribbon: the mark, drawn live on a canvas (assets/ribbon.js). The first one sits on the loading hold, above the
   night cover, and fades with it. The second is the hero's signature: set on the motto's own line as if it were the
   next word. Its ink stands on the baseline and rises to the capitals' height (the canvas hangs a little below the
   baseline and is a little taller than the capitals, because the ribbon does not fill it), and the space before it
   is a word space. ── */
.ribbon-main { --rw: min(980px, 66vw); position: fixed; z-index: 1001; left: 50%; top: 50vh; top: 50svh; width: var(--rw); aspect-ratio: 3 / 1; margin: calc(var(--rw) / -6) 0 0 calc(var(--rw) / -2);
  pointer-events: none; opacity: 0; transition: opacity 700ms var(--cg-ease); will-change: transform, opacity; }
html.hold .ribbon-main { opacity: 1; }
.ribbon-sig { display: inline-block; width: 2.4em; height: .89em; margin-left: -.12em; vertical-align: -.1em; pointer-events: none; }
/* The ribbon faces left-to-right, its fine end toward the words (Feather, 2026-11-12). */
.ribbon-main, .ribbon-sig { scale: -1 1; }

/* ── The first paint waits for the picture (the head script sets and clears .hold): a night cover over the finished
   page, which then fades away. A cover, not opacity on the page, so nothing half-drawn ever shows. ── */
body::before { content: ""; position: fixed; inset: 0; z-index: 1000; background: var(--ether-night); opacity: 0; pointer-events: none; transition: opacity 700ms var(--cg-ease); }
html.hold body::before { opacity: 1; transition: none; }

/* ══ The gate ══ A standalone screen in front of the page, shown only when the head script says so (html.gated: a
   first visit this session, no deep link). It cannot be scrolled; Enter is the way in. The last frame of the sizzle
   sits here in grey, with a soft hole in it that follows the light; through the hole shows the hero itself, right
   behind and held on that same frame. So the colour you explore is the film's own first frame, and when the hole
   has opened all the way there is nothing to hand off. A picture and a mask, never a backdrop filter (Safari;
   docs/patterns.md). The gate and the hero share one box and one transform. */
.gate { display: none; position: fixed; top: 0; left: 0; width: 100%; height: var(--stage-h); z-index: 100; overflow: hidden; color: var(--ether-cream); touch-action: none; -webkit-user-select: none; user-select: none; }
html.gated .gate, .gate.out { display: block; }
html.gated, html.gated body { overflow: hidden; }
.gate.out { opacity: 0; pointer-events: none; transition: opacity 600ms var(--cg-ease); }
.gate-cam { position: absolute; inset: 0; transform: scale(1.06); will-change: transform; }
.gate-cam img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gate-grey { position: absolute; inset: 0; background: var(--ether-night);
  -webkit-mask-image: radial-gradient(circle at var(--gx, 50%) var(--gy, 45%), transparent 0, transparent calc(var(--gr, 0px) * .26), color-mix(in srgb, black 48%, transparent) calc(var(--gr, 0px) * .6), black var(--gr, 0px));
          mask-image: radial-gradient(circle at var(--gx, 50%) var(--gy, 45%), transparent 0, transparent calc(var(--gr, 0px) * .26), color-mix(in srgb, black 48%, transparent) calc(var(--gr, 0px) * .6), black var(--gr, 0px)); }
.gate-grey img { filter: var(--ether-grey); }
/* What the light carries with it, seen only where the light is: the shafts and the dust. */
.gate-lit { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at var(--gx, 50%) var(--gy, 45%), black 0, black calc(var(--gr, 0px) * .26), color-mix(in srgb, black 52%, transparent) calc(var(--gr, 0px) * .6), transparent var(--gr, 0px));
          mask-image: radial-gradient(circle at var(--gx, 50%) var(--gy, 45%), black 0, black calc(var(--gr, 0px) * .26), color-mix(in srgb, black 52%, transparent) calc(var(--gr, 0px) * .6), transparent var(--gr, 0px)); }
/* Shafts from the window, placed on the picture itself (ether.js sizes .beams to the picture's drawn box). */
.beams { position: absolute; pointer-events: none; mix-blend-mode: screen; will-change: transform; }
.beams i { position: absolute; left: 12%; top: 41%; width: 62%; height: 7%; transform-origin: 0 50%; border-radius: 50%; filter: blur(14px);
  background: linear-gradient(to right, color-mix(in srgb, var(--ether-glow) 34%, transparent), color-mix(in srgb, var(--ether-sun) 12%, transparent) 46%, transparent 86%); }
.beams i:nth-child(1) { transform: rotate(16deg); }
.beams i:nth-child(2) { transform: rotate(27deg); height: 10%; opacity: .8; }
.beams i:nth-child(3) { transform: rotate(39deg); width: 46%; opacity: .6; }
.gate canvas.motes { inset: -4%; width: 108%; height: 108%; will-change: transform; }
.gate-glow { position: absolute; left: 0; top: 0; width: 92vmin; height: 92vmin; margin: -46vmin 0 0 -46vmin; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; will-change: transform; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ether-glow) 24%, transparent), color-mix(in srgb, var(--ether-sun) 9%, transparent) 46%, transparent 72%); }
/* The name and, beside it, Enter: quiet, a ring of the same light. It brightens as the light comes near (ether.js
   sets the halo). They sit where the bar's name will be once you are in. */
.gate-top { position: absolute; z-index: 2; left: max(clamp(20px, 3.2vw, 56px), env(safe-area-inset-left)); top: env(safe-area-inset-top, 0px); height: 52px; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); }
.gate .name { font-size: 19px; }
.enter { position: relative; height: 34px; padding: 0 18px; border-radius: var(--cg-radius-full); cursor: pointer; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--ether-glow) 56%, transparent); background: color-mix(in srgb, var(--ether-night) 46%, transparent); color: var(--ether-cream);
  font-family: var(--ether-font-serif); font-size: 14px; letter-spacing: .22em; text-indent: .22em; text-transform: uppercase; line-height: 1;
  transition: transform var(--cg-duration-fast) var(--cg-ease-entry), background-color var(--cg-duration-base) var(--cg-ease), border-color var(--cg-duration-base) var(--cg-ease), opacity 400ms var(--cg-ease); }
.enter::after { content: ""; position: absolute; inset: -9px -6px; }   /* a finger-sized target around a small pill */
.enter:active { transform: scale(.97); }
.enter i { position: absolute; inset: -14px; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .35;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ether-sun) 50%, transparent), transparent); will-change: opacity; }
.enter:focus-visible { outline: 2px solid var(--ether-glow); outline-offset: 4px; }
html.entering .enter { opacity: 0; pointer-events: none; }   /* the name stays: the bar's own is right under it */

/* ══ The page: framed screens ══ Every section (.act) is a track with one sticky screen (.stage). Each act starts a
   screen early, so its stage slides up over the one before, which holds still under it and dims (ether.js writes
   the shade and a small push). --pin is how many screens of scroll the stage holds for; --tail is the screen it
   spends being covered. */
.page { position: relative; z-index: 1; isolation: isolate; }
.act { position: relative; height: calc(var(--stage-h) * (1 + var(--pin, 0) + var(--tail, 1))); margin-top: calc(-1 * var(--stage-h)); }
.act:first-child { margin-top: 0; }
.stage { position: sticky; top: 0; height: var(--stage-h); overflow: hidden; }
.act + .act > .stage { box-shadow: 0 -20px 70px var(--ether-shade-deep); }
.shade { position: absolute; inset: 0; z-index: 40; background: var(--ether-black); opacity: 0; pointer-events: none; }

/* ── Menu: a translucent bar that takes the tone of the screen under it ── */
.bar {
  position: sticky; top: 0; z-index: 20; height: var(--bar-h); margin-bottom: calc(-1 * var(--bar-h));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: env(safe-area-inset-top, 0px) max(clamp(20px, 3.2vw, 56px), env(safe-area-inset-right)) 0 max(clamp(20px, 3.2vw, 56px), env(safe-area-inset-left));
  color: var(--bar-fg); background-color: transparent;
  transition: background-color 400ms var(--cg-ease), color 400ms var(--cg-ease);
}
.bar[data-tone="paper"] { --bar-fg: var(--cg-text);     --bar-bg: color-mix(in srgb, var(--cg-bg) 72%, transparent); }
.bar[data-tone="ink"]   { --bar-fg: var(--ether-cream); --bar-bg: color-mix(in srgb, var(--ether-night) 72%, transparent); }
.bar[data-tone="black"] { --bar-fg: var(--ether-cream); --bar-bg: transparent; }
.bar.is-scrolled { background-color: var(--bar-bg); }
.bar.is-scrolled:not([data-tone="black"]) { -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); }
.bar .name { font-size: 19px; padding: 8px 0; }
.bar nav { display: flex; gap: clamp(14px, 2.2vw, 32px); }
.bar nav a { position: relative; padding: 8px 0; font-size: 13px; letter-spacing: .01em; opacity: .58; transition: opacity var(--cg-duration-base) var(--cg-ease); }
.bar nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--cg-ease-entry); }
.bar nav a[aria-current] { opacity: 1; }
.bar nav a[aria-current]::after { transform: scaleX(1); }

/* ── The hero: the sizzle, looping. It begins and ends on the gate's frame. ── */
.hero .stage { background: var(--ether-night); color: var(--ether-cream); }
.hero .cam { position: absolute; inset: 0; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .stage::after { content: ""; position: absolute; inset: 56% 0 0 0; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ether-night) 74%, transparent)); pointer-events: none; }
.hero .low { position: absolute; z-index: 2; left: max(clamp(22px, 2.8vw, 48px), env(safe-area-inset-left)); right: 96px; bottom: calc(var(--stage-h) - 100svh + clamp(30px, 4vw, 56px) + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.motto { font-family: var(--ether-font-serif); font-weight: 400; font-size: clamp(34px, 5.4vw, 104px); letter-spacing: -.035em; line-height: .96; white-space: nowrap; }
.cue { position: absolute; z-index: 2; right: max(clamp(20px, 3.2vw, 56px), env(safe-area-inset-right)); bottom: calc(var(--stage-h) - 100svh + clamp(28px, 5vh, 56px) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px; opacity: .72; }
.cue span { font-family: var(--ether-font-serif); font-size: 1rem; letter-spacing: .04em; writing-mode: vertical-rl; }
.cue i { position: relative; width: 1px; height: 44px; overflow: hidden; }
.cue i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, currentColor); transform: translateY(-100%); animation: cue 2.2s var(--cg-ease-emphasize) infinite; }
@keyframes cue { to { transform: translateY(100%); } }
/* Behind the gate the hero wears the gate's overscale and lean (ether.js writes the same transform to both), and
   shows nothing but the picture. Once in, it eases out of the overscale and its words arrive. */
html.gated .hero .cam { transform: scale(1.06); }
html.gated .bar, html.gated .hero .low, html.gated .cue, html.gated .hero .stage::after { visibility: hidden; }
html.arrived .hero .cam { transition: transform 3200ms var(--cg-ease-entry); }
html.arrived .bar nav, html.arrived .hero .low, html.arrived .cue, html.arrived .hero .stage::after { animation: arrive 1400ms 500ms var(--cg-ease) both; }
@keyframes arrive { from { opacity: 0; } }

/* ── Still: the word, then the photographs travelling past in depth. Drag, or scroll. ── */
.still { --pin: 5; }
.still .stage { background: var(--cg-bg); color: var(--cg-text); display: grid; place-items: center; perspective: var(--persp, 1900px); cursor: grab; }
.still .stage.dragging, .still .stage.dragging .card { cursor: grabbing; }
.still .stage::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .5; background-size: 200px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"); }
.still-head { text-align: center; will-change: opacity; }
.still-head .word { font-size: min(44vw, 86vh); }
.still-head .line { margin-top: clamp(20px, 4vh, 48px); }
.deck { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; will-change: transform; }
.card {
  position: absolute; left: 50%; top: 50%; width: var(--cw, 400px); height: var(--ch, 520px); margin: calc(var(--ch, 520px) / -2) 0 0 calc(var(--cw, 400px) / -2);
  padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--cg-bg-surface); cursor: zoom-in; pointer-events: auto;
  box-shadow: 0 4px 20px var(--ether-shade), 0 14px 44px var(--ether-shade-far);
  will-change: transform, opacity; backface-visibility: hidden; opacity: 0; visibility: hidden;
}
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; filter: var(--ether-grade); }
.card .hue { opacity: 0; will-change: opacity; }
.card.is-lifted img, .card.is-lifted .glint { visibility: hidden; } /* the photograph is out; its place in the deck stays */
@media (max-aspect-ratio: 3/4) { .still-head .word { font-size: 40vw; } }

/* A photograph lifted out of the deck. One figure, carried by a matrix from the card's own four corners to the
   middle of the screen and back (ether.js), so it leaves and returns to the exact card. */
.lift { position: fixed; inset: 0; z-index: 60; cursor: zoom-out; overscroll-behavior: contain; touch-action: none; }
.lift[hidden] { display: none; }
.lift-dim { position: absolute; inset: 0; background: var(--cg-bg); opacity: 0; will-change: opacity; }
.lift-fig { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; }
.lift-shadow { position: absolute; inset: 0; border-radius: 14px; opacity: 0; box-shadow: 0 30px 90px var(--ether-shade), 0 6px 24px var(--ether-shade-far); will-change: transform, opacity; }
.lift-clip { position: absolute; inset: 0; background: var(--cg-bg-surface); will-change: clip-path; }
.lift-clip img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: var(--ether-grade); }
.lift-ghost { position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 14px; overflow: hidden; background: var(--cg-bg-surface); pointer-events: none; will-change: transform, opacity;
  box-shadow: 0 4px 20px var(--ether-shade), 0 14px 44px var(--ether-shade-far); }
.lift-ghost[hidden] { display: none; }
.lift-ghost img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: var(--ether-grade); }
.lift-x { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right)); background: var(--cg-fill-hover); color: var(--cg-text); opacity: 0; transition: transform var(--cg-duration-fast) var(--cg-ease-entry); }

/* ── Sound: the word on a string, one row of records to pull sideways, one thin player. All in one screen. ── */
.sound { --pin: .7; }
.sound .stage { background: var(--ether-night); color: var(--ether-cream); }
.sound-set { position: absolute; left: 0; right: 0; top: calc(var(--bar-h) + 2vh); text-align: center; }
.sound-set .word { font-size: min(19vw, 27vh); white-space: nowrap; }
.sound-set .word span { display: inline-block; will-change: transform; transform-origin: 50% 78%; }
.sound-set .base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.sound-set .line { margin-top: clamp(22px, 4vh, 48px); opacity: .86; }
.sound-string { position: absolute; left: 0; width: 100%; pointer-events: none; }
/* The row is a sideways scroller as tall as the stage above the player, so a record can fall into it from the top. */
.sleeves { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-end; gap: clamp(10px, 1.2vw, 18px); padding: 0 clamp(18px, 5vw, 96px);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black clamp(18px, 4vw, 72px), black calc(100% - clamp(18px, 4vw, 72px)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black clamp(18px, 4vw, 72px), black calc(100% - clamp(18px, 4vw, 72px)), transparent 100%); }
.sleeves::-webkit-scrollbar { display: none; }
.sleeves.dragging, .sleeves.dragging .sleeve { cursor: grabbing; }
.sleeve {
  position: relative; flex: none; width: var(--sz, 200px); height: var(--sz, 200px); padding: 0; border: 0; border-radius: 12px; overflow: hidden; isolation: isolate; cursor: pointer;
  color: var(--ether-cream); text-align: left; background: color-mix(in srgb, var(--ether-cream) 8%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ether-black) 45%, transparent); container-type: inline-size;
  transition: transform 560ms var(--ether-ease-fall), opacity 200ms var(--cg-ease), box-shadow 220ms var(--cg-ease);
}
.sleeve:not(.down) { transform: translateY(calc(-1 * var(--fall, 600px))); opacity: 0; pointer-events: none; transition: opacity 160ms var(--cg-ease), transform 0s 160ms; }
.sleeve.landed { transition: transform 220ms var(--cg-ease-entry), opacity 200ms var(--cg-ease), box-shadow 220ms var(--cg-ease); }
.sleeve > * { pointer-events: none; }
.sleeve > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: var(--ether-grade-rest); transition: filter 320ms var(--cg-ease); }
.sleeve::after { content: ""; position: absolute; inset: 40% 0 0 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--ether-black) 82%, transparent), transparent); }
.sleeve .nm { position: absolute; left: 7cqw; right: 7cqw; bottom: 6cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(11px, 6.2cqw, 16px); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.sleeve.is-on { box-shadow: 0 0 0 1px var(--ether-night), 0 0 0 2.5px var(--ether-sun), 0 0 44px color-mix(in srgb, var(--ether-sun) 34%, transparent); }
.sleeve.is-on > img { filter: var(--ether-grade); }
.sleeve.landed:active { transform: scale(.98); }
/* The player: Spotify's single-song strip, docked on the stage's bottom edge. */
.sound-player { position: absolute; left: 0; right: 0; width: min(760px, calc(100% - 2 * var(--pad))); height: 80px; margin: 0 auto; border-radius: 12px; overflow: hidden;
  bottom: calc(var(--stage-h) - 100svh + clamp(12px, 2.4vh, 26px) + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--ether-cream) 6%, transparent); }
.sound-player iframe { width: 100%; height: 80px; border: 0; }

/* ── Motion: the frame opens as the section arrives; the word comes to rest across it, holds, then moves on ── */
.motion { --pin: 1.7; }
.motion .stage { background: var(--ether-black); color: var(--ether-cream); }
.film { position: absolute; inset: 0; will-change: clip-path; }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.film::after { content: ""; position: absolute; inset: 55% 0 0 0; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ether-black) 62%, transparent)); opacity: var(--scrim, 0); pointer-events: none; }
.motion-word { position: absolute; z-index: 2; left: 0; top: 0; white-space: nowrap; will-change: transform; pointer-events: none; }
.motion-line { position: absolute; z-index: 2; left: max(clamp(20px, 3.2vw, 56px), env(safe-area-inset-left)); bottom: calc(var(--stage-h) - 100svh + clamp(28px, 6vh, 64px) + env(safe-area-inset-bottom, 0px)); opacity: 0; }
.film-sound { position: absolute; z-index: 2; right: max(clamp(20px, 3.2vw, 56px), env(safe-area-inset-right)); bottom: calc(var(--stage-h) - 100svh + clamp(22px, 5vh, 56px) + env(safe-area-inset-bottom, 0px));
  height: 44px; padding: 0 20px; border-radius: var(--cg-radius-full); cursor: pointer; font-size: 14px; color: var(--ether-cream); opacity: 0;
  background: color-mix(in srgb, var(--ether-night) 50%, transparent); border: 1px solid color-mix(in srgb, var(--ether-cream) 30%, transparent);
  transition: transform var(--cg-duration-fast) var(--cg-ease-entry), background-color var(--cg-duration-base) var(--cg-ease); }
.film-sound:active { transform: scale(.97); }
.film-sound[aria-pressed="true"] { background: var(--ether-cream); color: var(--ether-night); }

/* ── About: one screen. The portrait waits in the page's grade; the light shows its own colour. ── */
.about { --pin: .5; }
.about .stage { background: var(--cg-bg); color: var(--cg-text); }
.about-in { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--bar-h) + clamp(10px, 2vh, 28px)); height: calc(100svh - var(--bar-h) - 2 * clamp(10px, 2vh, 28px) - env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 80px); align-items: end; }
.portrait { position: relative; height: 100%; aspect-ratio: 4 / 5; max-width: 48vw; border-radius: var(--ether-radius-door); overflow: hidden; background: var(--cg-bg-surface); box-shadow: var(--cg-elev-3); touch-action: pan-y; will-change: transform, opacity; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait .rest { filter: var(--ether-grade-rest); }
.portrait .hue {
  -webkit-mask-image: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), black 0, black calc(var(--gr, 0px) * .3), color-mix(in srgb, black 50%, transparent) calc(var(--gr, 0px) * .64), transparent var(--gr, 0px));
          mask-image: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), black 0, black calc(var(--gr, 0px) * .3), color-mix(in srgb, black 50%, transparent) calc(var(--gr, 0px) * .64), transparent var(--gr, 0px)); }
.about .words { min-width: 0; padding-bottom: clamp(8px, 3vh, 44px); display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 26px); }
.about .words h2 { font-family: var(--ether-font-serif); font-size: clamp(44px, min(6.6vw, 15vh), 136px); font-weight: 400; letter-spacing: -.04em; line-height: .92; }
.about .words p { max-width: 26em; font-size: clamp(17px, min(1.5vw, 2.6vh), 24px); line-height: 1.42; color: var(--cg-text-secondary); letter-spacing: -.014em; }
.about .links { display: flex; flex-wrap: wrap; gap: 8px; }
[data-rise] { will-change: transform, opacity; }

/* ── Begin: three doors, lit. Each opens /inquire with its answer already given. ── */
.begin { --pin: .5; }
.begin .stage { color: var(--ether-cream); isolation: isolate;
  background: radial-gradient(90% 80% at 100% 0, color-mix(in srgb, var(--ether-sun) 22%, transparent), transparent 62%),
              radial-gradient(80% 70% at 0 110%, color-mix(in srgb, var(--ether-bark) 60%, transparent), transparent 70%), var(--ether-night); }
.begin canvas.motes { z-index: -1; }
.begin-in { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--bar-h) + clamp(8px, 2vh, 28px)); height: calc(100svh - var(--bar-h) - clamp(8px, 2vh, 28px) - clamp(16px, 3vh, 44px) - env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: clamp(14px, 3vh, 40px); }
.begin-in h2 { flex: none; text-align: center; font-family: var(--ether-font-serif); font-size: clamp(44px, min(6vw, 12vh), 112px); font-weight: 400; letter-spacing: -.04em; line-height: .9; }
.doors { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.door { position: relative; display: block; min-height: 0; border-radius: var(--ether-radius-door); overflow: hidden; isolation: isolate; color: var(--ether-cream); background: var(--ether-umber);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ether-glow) 14%, transparent), 0 20px 50px color-mix(in srgb, var(--ether-black) 50%, transparent);
  transition: transform 260ms var(--cg-ease-entry), box-shadow 320ms var(--cg-ease); }
.door > * { pointer-events: none; }
.door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: var(--ether-grade-rest); transition: filter 420ms var(--cg-ease); }
.door::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--ether-night) 92%, transparent), color-mix(in srgb, var(--ether-night) 40%, transparent) 36%, transparent 68%); }
.door:active { transform: scale(.985); }
.door .t { position: absolute; left: clamp(18px, 2vw, 32px); right: clamp(18px, 2vw, 32px); bottom: clamp(16px, 2vw, 30px); }
.door b { display: block; font-family: var(--ether-font-serif); font-size: clamp(34px, min(4.4vw, 9vh), 84px); font-weight: 400; letter-spacing: -.04em; line-height: .9; }
.door small { display: block; margin-top: 10px; font-size: clamp(18px, 1.5vw, 26px); color: color-mix(in srgb, var(--ether-cream) 84%, transparent); }

/* ── Stay close: the way to /connect, and the foot of the page ── */
.close { --pin: 0; --tail: 0; }
.close .stage { background: var(--cg-bg); color: var(--cg-text); }
.close-in { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--bar-h) + clamp(8px, 2vh, 28px)); height: calc(100svh - var(--bar-h) - clamp(8px, 2vh, 28px) - env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; }
.stay { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: clamp(22px, 3.4vw, 64px); border-radius: var(--ether-radius-door); overflow: hidden; isolation: isolate;
  background: var(--cg-bg-elevated); border: 1px solid var(--cg-glass-border); box-shadow: inset 0 1px 0 var(--cg-glass-border-top), var(--cg-elev-2);
  transition: transform 260ms var(--cg-ease-entry), box-shadow 320ms var(--cg-ease); }
.stay > * { pointer-events: none; }
.stay .say { font-family: var(--ether-font-serif); font-size: clamp(60px, min(11vw, 26vh), 220px); font-weight: 400; letter-spacing: -.045em; line-height: .86; }
.stay .go { align-self: flex-end; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 28px; border-radius: var(--cg-radius-full); background: var(--cg-text); color: var(--cg-bg-elevated); font-size: 17px; font-weight: 500; }
.stay .glint { mix-blend-mode: normal; background: radial-gradient(closest-side, color-mix(in srgb, var(--ether-sun) 30%, transparent), color-mix(in srgb, var(--ether-glow) 14%, transparent) 46%, transparent 72%); z-index: -1; }
.stay:active { transform: scale(.992); }
.foot { flex: none; padding: clamp(18px, 3.4vh, 40px) 0 clamp(12px, 2vh, 22px); display: grid; grid-template-columns: 1fr repeat(3, auto); gap: clamp(24px, 4.4vw, 84px); align-items: start; }
.foot p { margin-top: 10px; font-size: 14px; color: var(--cg-text-secondary); }
.foot ul { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--cg-text-secondary); }
.legal { flex: none; display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0 0 clamp(12px, 2.4vh, 28px); font-size: 12.5px; color: var(--cg-text-dim); }

/* ══ /inquire and /connect: one framed screen each, in the same world ══ */
.solo { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: calc(var(--bar-h) + clamp(6px, 1.6vh, 20px)) var(--pad) 0; }
.solo.ink { background: var(--ether-night); color: var(--ether-cream); }
.solo.paper { background: var(--cg-bg); color: var(--cg-text); }
.solo .legal { padding-top: clamp(12px, 2vh, 22px); }
.solo.ink .legal { color: color-mix(in srgb, var(--ether-cream) 50%, transparent); }

/* Inquire: Reliquary's rules in Ether's look — one question per scene, one-tap answers turn the page, Back always works. */
.inq { position: relative; flex: 1; border-radius: var(--ether-radius-door); color: var(--ether-cream); overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ether-glow) 10%, transparent);
  background: radial-gradient(90% 80% at 100% 0, color-mix(in srgb, var(--ether-sun) 22%, transparent), transparent 62%),
              radial-gradient(80% 70% at 0 110%, color-mix(in srgb, var(--ether-bark) 60%, transparent), transparent 70%), var(--ether-night);
  display: grid; grid-template-rows: auto 1fr auto; }
.inq canvas.motes { z-index: -1; }
.inq .label { color: color-mix(in srgb, var(--ether-cream) 66%, transparent); }
.inq .slate { color: color-mix(in srgb, var(--ether-cream) 62%, transparent); }
.inq-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(18px, 2.2vw, 36px) clamp(22px, 2.6vw, 44px) 0; }
.ribbon { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 32px; margin-top: 14px; }
.ribbon li { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--cg-radius-full); font-size: 13px; font-weight: 500;
  color: color-mix(in srgb, var(--ether-cream) 82%, transparent); background: color-mix(in srgb, var(--ether-cream) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ether-cream) 16%, transparent); animation: stamp 240ms var(--cg-ease-entry); }
@keyframes stamp { from { opacity: 0; transform: scale(.94); } }
.inq .stage { position: static; height: auto; overflow: visible; display: grid; place-items: center; padding: clamp(16px, 2.4vw, 40px) clamp(20px, 3vw, 56px); }
.scene { display: none; width: min(980px, 100%); text-align: center; }
.scene.on { display: block; animation: turn 300ms var(--cg-ease-entry); }
.scene[data-k="offering"] { width: min(1280px, 100%); }
@keyframes turn { from { opacity: 0; transform: translateY(8px); } }
.scene h1, .scene h2 { font-family: var(--ether-font-serif); font-size: clamp(38px, min(4.8vw, 9vh), 84px); font-weight: 400; letter-spacing: -.035em; line-height: 1; }
.scene .help { margin: 14px auto 0; max-width: 30em; font-size: clamp(16px, 1.3vw, 19px); color: color-mix(in srgb, var(--ether-cream) 70%, transparent); }
.inq-foot { display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(22px, 2.6vw, 44px) clamp(18px, 2.2vw, 36px); }
.inq-foot .cg-btn.ghost { color: color-mix(in srgb, var(--ether-cream) 70%, transparent); }
.inq-foot [hidden] { visibility: hidden; display: inline-flex; }
.inq .cg-btn:not(.ghost) { background: var(--ether-cream); color: var(--ether-night); }

.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(22px, 3vw, 48px); }
.choice { position: relative; aspect-ratio: 4 / 5; max-height: 44vh; width: 100%; border: 0; padding: 0; border-radius: 26px; overflow: hidden; isolation: isolate; cursor: pointer; text-align: left;
  color: var(--ether-cream); background: var(--ether-umber); box-shadow: 0 20px 50px color-mix(in srgb, var(--ether-black) 50%, transparent); transition: transform var(--cg-duration-fast) var(--cg-ease-entry), box-shadow 320ms var(--cg-ease); }
.choice > * { pointer-events: none; }
.choice img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: var(--ether-grade-rest); transition: filter 420ms var(--cg-ease); }
.choice::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--ether-night) 92%, transparent), color-mix(in srgb, var(--ether-night) 46%, transparent) 32%, transparent 62%); }
.choice:active { transform: scale(.975); }
.choice.sel { box-shadow: 0 0 0 3px var(--ether-night), 0 0 0 5px var(--ether-sun), 0 0 44px color-mix(in srgb, var(--ether-sun) 30%, transparent); }
.choice.sel img { filter: var(--ether-grade); }
.choice .t { position: absolute; left: 24px; right: 24px; bottom: 22px; }
.choice b { display: block; font-family: var(--ether-font-serif); font-size: clamp(32px, 3vw, 52px); font-weight: 400; letter-spacing: -.035em; line-height: 1; }
.choice small { display: block; margin-top: 8px; font-size: clamp(18px, 1.4vw, 24px); color: color-mix(in srgb, var(--ether-cream) 84%, transparent); }

.big { width: min(640px, 100%); margin-top: 44px; padding: 12px 0 14px; border: 0; border-bottom: 1.5px solid color-mix(in srgb, var(--ether-cream) 30%, transparent); border-radius: 0; background: none; outline: 0;
  font-size: clamp(30px, 3.6vw, 52px); font-weight: 500; letter-spacing: -.035em; text-align: center; transition: border-color var(--cg-duration-base); }
.big:focus { border-color: var(--ether-sun); }
.big::placeholder, .sheet ::placeholder, .fields ::placeholder { color: color-mix(in srgb, var(--ether-cream) 34%, transparent); }
.sheet { width: min(720px, 100%); margin: 30px auto 0; padding: 24px; text-align: left; border-radius: 24px; background: color-mix(in srgb, var(--ether-cream) 7%, transparent); border: 1px solid color-mix(in srgb, var(--ether-cream) 14%, transparent); }
.sheet textarea { width: 100%; min-height: 150px; resize: vertical; border: 0; outline: 0; background: none; font-size: 18px; line-height: 1.5; }
.sheet .bin { margin-top: 12px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--ether-cream) 14%, transparent); }
.pins { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pins .linkchip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 34px; padding: 0 8px 0 14px; border-radius: var(--cg-radius-full); background: color-mix(in srgb, var(--ether-cream) 10%, transparent); font-size: 14px; }
.pins .linkchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pins .linkchip button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--ether-cream) 14%, transparent); cursor: pointer; font-size: 11px; }
.paste { margin-top: 14px; display: flex; gap: 8px; padding: 5px; border-radius: var(--cg-radius-full); background: color-mix(in srgb, var(--ether-cream) 6%, transparent); border: 1px solid color-mix(in srgb, var(--ether-cream) 14%, transparent); }
.paste input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0 14px; font-size: 16px; }
.opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 820px; margin: clamp(28px, 3vw, 44px) auto 0; }
.opt { height: 56px; padding: 0 26px; border-radius: var(--cg-radius-full); border: 1px solid color-mix(in srgb, var(--ether-cream) 22%, transparent); background: color-mix(in srgb, var(--ether-cream) 8%, transparent); font-size: 17px; font-weight: 500; cursor: pointer;
  transition: transform var(--cg-duration-fast) var(--cg-ease-entry), background var(--cg-duration-base), color var(--cg-duration-base); }
.opt:active { transform: scale(.96); }
.opt.sel { background: var(--ether-cream); color: var(--ether-night); border-color: transparent; }
.date { margin-top: 20px; transition: opacity 200ms var(--cg-ease-entry), transform 200ms var(--cg-ease-entry); @starting-style { opacity: 0; transform: translateY(-4px); } }
.date input, .fields input { height: 54px; padding: 0 18px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--ether-cream) 20%, transparent); background: color-mix(in srgb, var(--ether-cream) 7%, transparent); font-size: 17px; outline: 0; width: 100%; color-scheme: dark;
  transition: border-color var(--cg-duration-base), box-shadow var(--cg-duration-base); }
.date input { width: 240px; }
.fields input:focus, .date input:focus { border-color: var(--ether-sun); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ether-sun) 18%, transparent); }
.fields { width: min(620px, 100%); margin: 34px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.fields label { display: grid; gap: 7px; font-size: 13px; color: color-mix(in srgb, var(--ether-cream) 66%, transparent); }
.fields .full { grid-column: 1 / -1; }
.err { margin-top: 18px; font-size: 15px; color: var(--ether-sun); min-height: 1.4em; }

.clap { position: relative; width: min(640px, 100%); margin: 88px auto 0; text-align: left; color: var(--ether-cream); background: var(--ether-black); border-radius: 6px 6px 24px 24px; box-shadow: 0 30px 70px color-mix(in srgb, var(--ether-black) 60%, transparent); }
.clap .stick { height: 32px; background: repeating-linear-gradient(-58deg, var(--ether-cream) 0 28px, var(--ether-night) 28px 56px); }
.clap .stick.top { position: absolute; left: 0; right: 0; top: -34px; border-radius: 6px; background: repeating-linear-gradient(58deg, var(--ether-sun) 0 28px, var(--ether-night) 28px 56px);
  transform-origin: 0 100%; transform: rotate(-4.5deg); transition: transform 150ms cubic-bezier(.5, 0, .9, .4); }
.clap.shut .stick.top { transform: rotate(0); }
.clap dl { display: grid; grid-template-columns: repeat(3, 1fr); }
.clap dl div { padding: 15px 18px 17px; border-top: 1px solid color-mix(in srgb, var(--ether-cream) 16%, transparent); border-left: 1px solid color-mix(in srgb, var(--ether-cream) 16%, transparent); min-width: 0; }
.clap dl div:nth-child(1), .clap dl div:nth-child(3), .clap dl div:nth-child(6) { border-left: 0; }
.clap .w2 { grid-column: span 2; }
.clap dt { font: 500 10px/1.4 var(--cg-font-mono); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--ether-cream) 56%, transparent); }
.clap dd { margin: 6px 0 0; font-size: 19px; font-weight: 500; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clap dd.title { font-family: var(--ether-font-serif); font-style: italic; font-size: 32px; font-weight: 500; line-height: 1.05; letter-spacing: 0; }
.clap .base { display: flex; justify-content: space-between; padding: 13px 18px 15px; border-top: 1px solid color-mix(in srgb, var(--ether-cream) 16%, transparent); font: 500 10px/1.4 var(--cg-font-mono); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--ether-cream) 56%, transparent); }

/* Connect: email only */
.connect { flex: 1; border-radius: var(--ether-radius-door); padding: clamp(26px, 3.4vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 80px); align-items: end; background: var(--cg-bg-elevated); border: 1px solid var(--cg-glass-border); box-shadow: inset 0 1px 0 var(--cg-glass-border-top), var(--cg-elev-2); }
.connect h1 { font-family: var(--ether-font-serif); font-size: clamp(60px, min(9vw, 22vh), 190px); font-weight: 400; letter-spacing: -.045em; line-height: .86; }
.join { display: grid; gap: 12px; min-width: 0; }
.connect > * { min-width: 0; }
.join .row { display: flex; gap: 8px; padding: 6px; border-radius: var(--cg-radius-full); background: var(--cg-bg); border: 1px solid var(--cg-border); box-shadow: var(--cg-elev-1); }
.join input[type=email] { flex: 1; min-width: 0; width: 100%; border: 0; background: none; padding: 0 18px; font-size: 17px; outline: 0; }
.join input::placeholder { color: var(--cg-text-muted); }
.join .box { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--cg-text-secondary); cursor: pointer; }
.join .box input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--cg-text); flex: none; }
.join .fine { font-size: 12.5px; line-height: 1.5; color: var(--cg-text-dim); }
.join .fine a { text-decoration: underline; text-underline-offset: 2px; }
.join .done { font-size: 19px; font-weight: 500; transition: opacity 240ms var(--cg-ease-entry); @starting-style { opacity: 0; } }

/* ── Phone ── */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .bar { gap: 10px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .bar nav { gap: 11px; overflow-x: auto; scrollbar-width: none; }
  .bar nav a { font-size: 12.5px; letter-spacing: 0; }
  .bar .name { font-size: 17px; }
  .gate-top { left: max(14px, env(safe-area-inset-left)); }
  .gate .name { font-size: 17px; }
  .hero .low { right: 48px; }
  .motto { font-size: clamp(21px, 7.3vw, 34px); }   /* the motto and the ribbon share one line, clear of the scroll cue */
  .ribbon-sig { width: 1.9em; }
  .ribbon-main { --rw: 88vw; }
  .sound-set .word { font-size: min(30vw, 17vh); }
  .sound-set .line { margin-top: clamp(14px, 2.4vh, 26px); }
  .about-in { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .portrait { flex: 1 1 0; min-height: 0; height: auto; aspect-ratio: auto; max-width: none; border-radius: 22px; }
  .about .words { flex: none; padding-bottom: 6px; gap: 12px; }
  .about .words h2 { font-size: clamp(40px, 12vw, 60px); }
  .chip { height: 36px; padding: 0 13px; font-size: 13px; }
  .doors { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .door { border-radius: 22px; }
  .door::after { background: linear-gradient(to right, color-mix(in srgb, var(--ether-night) 86%, transparent), color-mix(in srgb, var(--ether-night) 30%, transparent) 60%, transparent); }
  .door .t { top: 50%; bottom: auto; transform: translateY(-50%); }
  .stay { padding: 22px; border-radius: 22px; }
  .foot { grid-template-columns: 1fr 1fr; gap: 14px 24px; } .foot > div { grid-column: 1 / -1; }
  .foot ul { font-size: 13px; }
  .inq { border-radius: 22px; }
  .choices { grid-template-columns: 1fr; gap: 10px; }
  .choice { aspect-ratio: auto; height: 124px; max-height: none; border-radius: 22px; }
  .choice::after { background: linear-gradient(to right, color-mix(in srgb, var(--ether-night) 84%, transparent), transparent 85%); }
  .choice .t { top: 50%; bottom: auto; transform: translateY(-50%); }
  .opt { height: 52px; padding: 0 20px; font-size: 16px; }
  .sheet { padding: 18px; } .sheet textarea { font-size: 16px; min-height: 120px; }
  .fields { gap: 12px; }
  .clap { margin-top: 56px; } .clap dl div { padding: 12px 12px 13px; } .clap dd { font-size: 16px; } .clap dd.title { font-size: 26px; }
  .connect { grid-template-columns: 1fr; gap: 20px; padding: 24px; border-radius: 22px; align-content: end; }
}

@media (hover: hover) and (pointer: fine) {
  .cg-btn.ghost:hover { background: var(--cg-fill-hover); }
  .inq-foot .cg-btn.ghost:hover { background: color-mix(in srgb, var(--ether-cream) 10%, transparent); }
  .bar nav a:hover { opacity: 1; }
  .chip:hover { border-color: var(--cg-border-hover); }
  .opt:hover { background: color-mix(in srgb, var(--ether-cream) 14%, transparent); }
  .foot ul a:hover, .legal a:hover { color: var(--cg-text); }
  .solo.ink .legal a:hover { color: var(--ether-cream); }
  .film-sound:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--ether-cream) 22%, transparent); }
  .enter:hover { background: color-mix(in srgb, var(--ether-sun) 20%, transparent); border-color: var(--ether-glow); }
  [data-lit]:hover > .glint { opacity: 1; }
  .sleeve.landed:hover { transform: translateY(-6px) scale(1.03); z-index: 2; box-shadow: 0 22px 54px color-mix(in srgb, var(--ether-black) 62%, transparent), 0 0 40px color-mix(in srgb, var(--ether-sun) 20%, transparent); }
  .sleeve.landed:hover > img { filter: var(--ether-grade); }
  .sleeve.landed.is-on:hover { box-shadow: 0 0 0 1px var(--ether-night), 0 0 0 2.5px var(--ether-sun), 0 0 54px color-mix(in srgb, var(--ether-sun) 40%, transparent); }
  .door:hover, .choice:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ether-glow) 60%, transparent), 0 0 60px color-mix(in srgb, var(--ether-sun) 26%, transparent), 0 26px 60px color-mix(in srgb, var(--ether-black) 60%, transparent); }
  .door:hover img, .choice:hover img { filter: var(--ether-grade); }
  .choice.sel:hover { box-shadow: 0 0 0 3px var(--ether-night), 0 0 0 5px var(--ether-sun), 0 0 54px color-mix(in srgb, var(--ether-sun) 36%, transparent); }
  .stay:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--cg-glass-border-top), 0 0 0 1px color-mix(in srgb, var(--ether-sun) 50%, transparent), var(--cg-elev-4); }
}
/* Where nothing hovers, the doors and the records wear their colour. */
@media (hover: none) {
  .door img, .choice img, .sleeve > img { filter: var(--ether-grade); }
}

/* ── Reduced motion: the same page, standing still. No gate light to chase, nothing pinned, nothing flying. ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene.on, .ribbon li { animation: fade 200ms var(--cg-ease); }
  canvas.motes { display: none; }
  .gate-cam, .hero .cam { transform: none !important; }
  .gate-glow { display: none; }
  html.arrived .bar nav, html.arrived .hero .low, html.arrived .cue, html.arrived .hero .stage::after { animation: none; }
  .cue i::after { animation: none; transform: none; }

  .act { height: auto; margin-top: 0; }
  .stage { position: relative; height: auto; overflow: visible; box-shadow: none !important; }
  .hero .stage { height: 100vh; height: 100svh; overflow: hidden; }
  .hero .low, .cue { bottom: clamp(28px, 5vh, 56px); }

  .still .stage { display: block; place-items: normal; perspective: none; cursor: auto; padding: clamp(110px, 16vh, 180px) 0 clamp(72px, 12vh, 140px); }
  .still-head .word { font-size: clamp(6rem, 24vw, 22rem); }
  .deck { position: static; display: flex; gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(40px, 7vh, 80px); padding: 0 clamp(20px, 3.2vw, 56px) 28px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; pointer-events: auto; }
  .card { position: static; flex: none; margin: 0; scroll-snap-align: center; opacity: 1; visibility: visible; }
  .card .hue { opacity: 1; }

  .sound .stage { padding: clamp(110px, 16vh, 180px) 0 clamp(72px, 12vh, 140px); }
  .sound-set { position: static; }
  .sleeves { position: static; margin-top: clamp(48px, 8vh, 96px); padding-top: 12px; padding-bottom: 24px !important; }
  .sleeve, .sleeve:not(.down) { transform: none; opacity: 1; pointer-events: auto; transition: box-shadow 200ms var(--cg-ease); }
  .sound-player { position: static; margin-top: 12px; }

  .motion .stage { text-align: center; padding: clamp(110px, 16vh, 180px) 0 clamp(72px, 12vh, 140px); }
  .motion-word { position: static; font-size: clamp(5rem, 22vw, 20rem); }
  .film { position: relative; inset: auto; aspect-ratio: 16 / 9; width: var(--wrap); margin: clamp(32px, 6vh, 72px) auto 0; border-radius: 14px; overflow: hidden; }
  .film::after { display: none; }
  .motion-line { position: static; margin-top: clamp(20px, 4vh, 44px); opacity: 1; }
  .film-sound { display: none; }

  .about .stage, .begin .stage, .close .stage { height: 100vh; height: 100svh; min-height: 620px; }
  .portrait .hue { -webkit-mask-image: none; mask-image: none; }
  .door, .stay, .choice, .sleeve.landed:hover { transition: box-shadow 200ms var(--cg-ease); transform: none !important; }
}
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--cg-bg-elevated); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .bar[data-tone="paper"] { --bar-bg: var(--cg-bg); } .bar[data-tone="ink"] { --bar-bg: var(--ether-night); }
}