/* Self-hosted (no request leaves the site): the web app's variable faces, OFL (fonts/). */
@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("/fonts/Rubik-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* Layout: a name screen, then full-width colour bands that slide over it (sticky; a band taller than the window sticks by its bottom edge), a questions band and one footer. Nothing is absolutely placed over text. */
:root {
  --bg: oklch(0.979 0.012 91.5);
  --fg: oklch(0.226 0.004 107);
  --card: oklch(0.938 0.022 90);
  --muted-fg: oklch(0.475 0.005 258);
  --line: oklch(0.9 0.018 90);
  --brand: oklch(0.53 0.187 257);
  --brand-hover: oklch(0.47 0.17 257);
  --on-brand: oklch(1 0 0);
  --ring: oklch(0.53 0.187 257);
  --band: oklch(0.53 0.187 257);
  --band-fg: oklch(1 0 0);
  --band-soft: oklch(0.95 0.025 257);
  --band3: oklch(0.93 0.07 95);
  --band3-fg: oklch(0.2 0.02 85);
  --band3-soft: oklch(0.4 0.03 85);
  --step-bg: oklch(0.975 0.03 95);
  --wave-bar: oklch(0.8 0.07 92);
  --wave-sel: oklch(0.97 0.04 95);
  /* objects drawn on the bands (stickers, the chat field, the trim card) keep one look in both themes */
  --paper: oklch(1 0 0);
  --ink: oklch(0.226 0.004 107);
  --ink-soft: oklch(0.475 0.005 258);
  --obj: oklch(0.975 0.015 85);
  --obj-bar: oklch(0.83 0.025 85);
  --obj-sel: oklch(0.9 0.05 257);
  --obj-brand: oklch(0.53 0.187 257);
  --obj-brand-soft: oklch(0.78 0.09 257);
  --t-butter: oklch(0.93 0.09 95);
  --t-mint: oklch(0.9 0.07 165);
  --t-blush: oklch(0.9 0.06 25);
  --t-sky: oklch(0.9 0.06 240);
  --t-lilac: oklch(0.89 0.06 300);
  --t-cream: oklch(0.96 0.025 85);
  --mark-body: oklch(0.55 0.21 264);
  --mark-edge: oklch(1 0 0);
  --mark-flap: oklch(0.94 0.03 85);
  --ok: oklch(0.47 0.11 165.6);
  --warn: oklch(0.55 0.14 60);
  --warn-deep: oklch(0.5 0.13 49);
  --shadow: oklch(0.3 0.03 70 / 0.2);
  --display: "Rubik", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(0.227 0.004 286);
    --fg: oklch(0.971 0.003 286);
    --card: oklch(0.28 0.004 286);
    --muted-fg: oklch(0.787 0.007 286);
    --line: oklch(0.349 0.003 286);
    --brand: oklch(0.53 0.187 257);
    --brand-hover: oklch(0.47 0.17 257);
    --on-brand: oklch(1 0 0);
    --ring: oklch(0.68 0.15 257);
    --band: oklch(0.42 0.15 257);
    --band-soft: oklch(0.88 0.04 257);
    --band3: oklch(0.28 0.004 286);
    --band3-fg: oklch(0.97 0.01 95);
    --band3-soft: oklch(0.78 0.015 95);
    --step-bg: oklch(0.33 0.004 286);
    --wave-bar: oklch(0.45 0.004 286);
    --wave-sel: oklch(0.349 0.003 286);
    --mark-flap: oklch(0.9 0.035 85);
    --shadow: oklch(0 0 0 / 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: oklch(0.227 0.004 286);
  --fg: oklch(0.971 0.003 286);
  --card: oklch(0.28 0.004 286);
  --muted-fg: oklch(0.787 0.007 286);
  --line: oklch(0.349 0.003 286);
  --brand: oklch(0.53 0.187 257);
  --brand-hover: oklch(0.47 0.17 257);
  --on-brand: oklch(1 0 0);
  --ring: oklch(0.68 0.15 257);
  --band: oklch(0.42 0.15 257);
  --band-soft: oklch(0.88 0.04 257);
  --band3: oklch(0.28 0.004 286);
  --band3-fg: oklch(0.97 0.01 95);
  --band3-soft: oklch(0.78 0.015 95);
  --step-bg: oklch(0.33 0.004 286);
    --wave-bar: oklch(0.45 0.004 286);
    --wave-sel: oklch(0.349 0.003 286);
  --mark-flap: oklch(0.9 0.035 85);
  --shadow: oklch(0 0 0 / 0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1rem/1.55 var(--body); -webkit-font-smoothing: antialiased; }
.gut { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 768px) { .gut { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
.in { width: 100%; max-width: 1180px; margin: 0 auto; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }

/* stacking bands */
.stack { position: sticky; top: 0; }
.band { margin-top: 56px; }
.band::before, .faq::before { content: ""; position: absolute; left: 0; right: 0; top: -55px; height: 56px; background: inherit; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.peek { position: absolute; left: 0; right: 0; top: -34px; margin: 0; text-align: center; font: 600 0.9rem/1 var(--display); z-index: 1; }

/* 1 · the name */
.hero { background: var(--bg); min-height: calc(100svh - 56px); display: flex; flex-direction: column; }
.top { padding-block: 18px; }
.top .in { display: flex; align-items: center; gap: 12px; }
.home { display: inline-flex; align-items: center; margin-right: auto; border-radius: 14px; }
.mk { display: block; width: 48px; height: 48px; filter: drop-shadow(0 1.5px 2px var(--shadow)); transition: transform 0.4s cubic-bezier(.3,1.6,.5,1); }
.home:hover .mk { transform: rotate(-8deg) scale(1.06); }
/* text links are always underlined, like the reference's "show all" */
.navlink, .foot nav a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.navlink { font: 700 1rem/1 var(--display); padding: 12px 6px; border-radius: 8px; }
.navlink:hover, .foot nav a:hover { text-decoration-thickness: 3px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--card); flex: none; }
.seg button { border: 0; background: none; color: var(--muted-fg); font: 700 0.85rem/1 var(--display); min-width: 40px; min-height: 38px; padding: 0 10px; border-radius: 999px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
/* secondary pill: cream fill, no outline (the reference never outlines a button) */
.ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.3em; border-radius: 999px; background: var(--card); font: 700 1rem/1 var(--display); text-decoration: none; white-space: nowrap; flex: none; transition: background 0.15s; }
.ghost:hover { background: var(--line); }
@media (max-width: 640px) { .navlink { display: none; } .mk { width: 42px; height: 42px; } .ghost { min-height: 44px; padding: 0 1em; font-size: 0.92rem; } }
@media (max-width: 359px) { .ghost { display: none; } }
.name { flex: 1; display: grid; place-items: center; align-content: center; gap: 18px; text-align: center; padding-block: 16px 40px; }
.word { font: 800 clamp(3rem, 14.2vw, 12.5rem)/0.9 var(--display); letter-spacing: -0.03em; }
.word span { color: var(--brand); }
.tag { margin: 0; font: 600 clamp(1.05rem, 2vw, 1.35rem)/1.35 var(--display); color: var(--muted-fg); max-width: 40ch; text-wrap: balance; }
.cue { display: grid; place-items: center; width: 52px; height: 52px; margin-top: 6px; border-radius: 999px; }
.cue svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

/* 2 · reply with a sound */
.s2 { background: var(--band); color: var(--band-fg); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 4vh, 48px); padding-block: clamp(36px, 6vh, 72px); }
.row { overflow: hidden; padding-block: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.track { display: flex; width: max-content; animation: slide var(--t, 60s) linear infinite; }
.row.rev .track { animation-direction: reverse; }
.row:hover .track { animation-play-state: paused; }
.set { display: flex; align-items: center; gap: 18px; padding-right: 18px; }
@keyframes slide { to { transform: translateX(-50%); } }
.stk { flex: none; display: grid; gap: 10px; min-width: 150px; max-width: 230px; padding: 14px 16px 12px; border: 5px solid var(--paper); border-radius: 26px; background: var(--c, var(--t-cream)); color: var(--ink); box-shadow: 0 16px 28px -16px var(--shadow); rotate: var(--r, 0deg); translate: 0 var(--y, 0px); }
.stk b { font: 800 1.2rem/1.12 var(--display); letter-spacing: -0.01em; }
.stk .ft { display: flex; align-items: center; gap: 8px; font: 600 0.78rem/1 var(--body); color: var(--ink-soft); }
.stk .pl { width: 26px; height: 26px; flex: none; border-radius: 999px; background: var(--ink); color: var(--c, var(--t-cream)); display: grid; place-items: center; }
.stk .pl svg { width: 11px; height: 11px; fill: currentColor; }
.wv { display: flex; align-items: center; gap: 2px; height: 16px; flex: 1; }
.wv i { flex: none; width: 3px; height: 100%; border-radius: 2px; background: var(--ink); transform: scaleY(var(--h, 0.5)); }
.wv i:nth-child(1) { --h: 0.35; } .wv i:nth-child(2) { --h: 0.8; } .wv i:nth-child(3) { --h: 0.55; } .wv i:nth-child(4) { --h: 1; } .wv i:nth-child(5) { --h: 0.6; } .wv i:nth-child(6) { --h: 0.85; } .wv i:nth-child(7) { --h: 0.4; }
.stk:hover .wv i { animation: lvl 0.5s ease-in-out infinite alternate; }
.wv i:nth-child(2n) { animation-delay: -0.25s; } .wv i:nth-child(3n) { animation-delay: -0.1s; }
@keyframes lvl { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }
.set > :nth-child(4n+1) { --r: -3deg; --y: -4px; } .set > :nth-child(4n+2) { --r: 2.5deg; --y: 6px; } .set > :nth-child(4n+3) { --r: -1.5deg; --y: 0px; } .set > :nth-child(4n) { --r: 3.5deg; --y: -6px; }
@media (max-width: 640px) {
  .set { gap: 12px; padding-right: 12px; }
  .stk { min-width: 128px; max-width: 188px; padding: 11px 13px 10px; border-width: 4px; border-radius: 22px; gap: 8px; }
  .stk b { font-size: 1.02rem; }
}

.mid { display: grid; justify-items: center; gap: 22px; text-align: center; }
.mid h2 { font: 800 clamp(2.5rem, 7.2vw, 6.4rem)/0.95 var(--display); letter-spacing: -0.035em; max-width: 13ch; text-transform: lowercase; }
.chat { display: flex; align-items: center; gap: 10px; width: min(440px, 100%); min-height: 56px; padding: 6px 6px 6px 20px; border-radius: 999px; background: var(--paper); color: var(--ink); font: 500 1.08rem/1.2 var(--body); box-shadow: 0 18px 30px -18px var(--shadow); text-align: left; }
.chat .q { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.chat .bot { color: var(--obj-brand); font-weight: 700; }
.caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: -0.22em; background: var(--ink); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.chat .send { width: 44px; height: 44px; flex: none; border-radius: 999px; background: var(--obj-brand); color: var(--paper); display: grid; place-items: center; }
.chat .send svg { width: 20px; height: 20px; fill: currentColor; }
.lead { margin: 0; max-width: 38ch; color: var(--band-soft); font: 500 clamp(1rem, 1.6vw, 1.15rem)/1.5 var(--body); text-wrap: balance; }
.lead b { color: var(--band-fg); }
/* static helper copy is lowercase, like the reference; the bot's chat replies keep sentence case */
.lead, .leg .cap { text-transform: lowercase; }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 56px; padding: 0 1.7em; border-radius: 999px; font: 700 1.08rem/1 var(--display); text-decoration: none; white-space: nowrap; transition: transform 0.2s cubic-bezier(.3,1.6,.5,1), background 0.15s; }
.cta:hover { transform: translateY(-2px); }
.cta svg { width: 22px; height: 22px; fill: currentColor; }
.cta.on-band { background: var(--paper); color: oklch(0.22 0.04 264); }
.cta.brand { background: var(--brand); color: var(--on-brand); }
.cta.brand:hover { background: var(--brand-hover); }

/* 3 · make your own: a full-width tape you trim, the sticker riding on the cut */
.s3 { background: var(--band3); color: var(--band3-fg); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2.6vh, 30px); padding-block: clamp(44px, 7vh, 68px) clamp(32px, 5vh, 56px); }
.s3 .mid h2 { max-width: 12ch; font-size: clamp(2.4rem, 6vw, 5.4rem); }
.s3 .lead { color: var(--band3-soft); }
.tape { position: relative; max-width: 1320px; height: clamp(92px, 13vh, 136px); margin: 104px auto 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: pointer; }
.bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; z-index: 1; pointer-events: none; }
.bars i { flex: 1; min-width: 0; border-radius: 2px; background: var(--wave-bar); }
.bars i.on { background: var(--obj-brand-soft); }
.bars i.on.past { background: var(--obj-brand); }
/* the cut is a die-cut sticker lifted off the tape */
.sel { position: absolute; top: -16px; bottom: -16px; margin-left: -5px; border: 5px solid var(--paper); border-radius: 18px; background: var(--t-cream); box-shadow: 0 20px 32px -18px var(--shadow); pointer-events: none; }
.ph { position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none; }
.ph::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: calc(var(--p, 0) * (100% - 3px)); width: 3px; border-radius: 2px; background: var(--ink); }
/* handles: pill grips; the end one wiggles until the tape is first touched */
.tape, .hd { -webkit-tap-highlight-color: transparent; }
.hd { position: absolute; top: -22px; bottom: -22px; width: 40px; margin-left: -20px; display: grid; place-items: center; z-index: 3; cursor: ew-resize; border-radius: 14px; touch-action: none; outline: none; }
.hd:focus { outline: none; }
.hd::before, .hd::after { content: ""; grid-area: 1 / 1; }
.hd::after { width: 12px; height: 100%; border-radius: 999px; background: var(--obj-brand); box-shadow: 0 0 0 3px var(--paper), 0 6px 12px -4px var(--shadow); transition: width 0.15s; }
.hd::before { z-index: 1; width: 5px; height: 18px; background: linear-gradient(90deg, var(--paper) 0 1.5px, transparent 1.5px 3.5px, var(--paper) 3.5px 5px); }
.hd:hover::after, .tape.dragging .hd::after { width: 14px; }
.hd:focus-visible::after { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ring); }
.tape:not(.touched) .hd[data-h="b"] { animation: wig 2.6s ease-in-out infinite; }
@keyframes wig { 0%, 62%, 100% { translate: 0 0; } 72% { translate: 5px 0; } 82% { translate: -3px 0; } 90% { translate: 2px 0; } }
.nudge { position: absolute; top: 50%; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: 999px; background: var(--band3-fg); color: var(--band3); font: 700 0.82rem/1 var(--display); white-space: nowrap; pointer-events: none; translate: var(--nx, 0%) -50%; animation: nudge 1.4s ease-in-out infinite; }
.nudge svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes nudge { 50% { transform: translateX(5px); } }
.tape.touched .nudge { display: none; }
.tape.dragging .bubble { scale: 1.06; }
.bubble { transition: scale 0.2s; }
.bubble.limit, .bubble.limit::after { background: var(--t-blush); }
.bubble.limit { animation: shake 0.4s; }
@keyframes shake { 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 3px 0; } }
/* a ruler: a tick a second, a label every 6 s */
.ruler { position: relative; max-width: 1320px; height: 34px; margin: 28px auto 0; }
.ruler i { position: absolute; top: 0; width: 1.5px; height: 6px; margin-left: -0.75px; border-radius: 1px; background: var(--wave-bar); }
.ruler i.major { height: 11px; background: var(--band3-soft); }
.ruler span { position: absolute; top: 17px; translate: -50% 0; font: 600 0.8rem/1 var(--display); color: var(--band3-soft); font-variant-numeric: tabular-nums; }
.ruler span:first-of-type { translate: 0 0; }
.ruler span:last-of-type { translate: -100% 0; }
.bubble { position: absolute; bottom: calc(100% + 30px); z-index: 2; display: grid; justify-items: center; gap: 4px; padding: 10px 20px; border: 5px solid var(--paper); border-radius: 22px; background: var(--t-cream); color: var(--ink); box-shadow: 0 16px 28px -16px var(--shadow); white-space: nowrap; transform: translateX(-50%) rotate(-2deg); pointer-events: none; }
.bubble b { font: 800 1.75rem/1 var(--display); font-variant-numeric: tabular-nums; }
.bubble small { font: 600 0.8rem/1.2 var(--body); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bubble::after { content: ""; position: absolute; left: calc(50% + var(--tail, 0px)); bottom: -14px; width: 18px; height: 18px; margin-left: -9px; background: var(--t-cream); border: 5px solid var(--paper); border-top: 0; border-left: 0; border-bottom-right-radius: 4px; transform: rotate(45deg); }
.act { display: grid; justify-items: center; gap: 26px; text-align: center; }
/* the cut sticker's way from private to public: the same sticker three times,
   a label stuck on each, hand-drawn arrows between */
.trip { --gap: clamp(28px, 7vw, 96px); --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 30C28 6 64 4 92 22'/%3E%3Cpath d='M79 24l13-2-6-11'/%3E%3C/svg%3E"); list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); width: min(860px, 100%); margin: 26px 0 0; padding: 0; }
.leg { position: relative; display: grid; justify-items: center; align-content: start; min-width: 0; }
.leg + .leg::before { content: ""; position: absolute; top: 40px; right: calc(100% + 4px); width: calc(var(--gap) - 8px); height: 34px; background: var(--band3-soft); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; }
.leg:nth-child(3)::before { transform: scaleY(-1); }
.lbl { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; margin-bottom: -12px; padding: 6px 12px 6px 9px; border-radius: 999px; background: var(--tag); color: var(--paper); font: 700 0.86rem/1 var(--display); white-space: nowrap; box-shadow: 0 8px 14px -8px var(--shadow); rotate: var(--tr, -4deg); }
.lbl svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.leg .stk { width: min(200px, 100%); min-width: 0; rotate: var(--r, 0deg); animation: drift 3.6s ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
.leg:nth-child(1) .stk { --r: -3deg; }
.leg:nth-child(2) { --tr: 3deg; } .leg:nth-child(2) .stk { --r: 2.5deg; --dl: -1.2s; }
.leg:nth-child(3) .stk { --r: -1.5deg; --dl: -2.4s; }
@keyframes drift { from { translate: 0 -4px; } to { translate: 0 5px; } }
.leg .cap { margin-top: 16px; max-width: 20ch; font: 500 0.95rem/1.4 var(--body); color: var(--band3-soft); text-wrap: balance; }
@media (max-width: 640px) {
  .trip { --gap: 10px; margin-top: 26px; }
  .leg + .leg::before { display: none; }
  .leg .stk { padding: 9px 10px 8px; border-width: 4px; border-radius: 20px; gap: 7px; }
  .leg .stk b { font-size: 0.95rem; }
  .leg .stk .wv { display: none; }
  .lbl { gap: 4px; margin-bottom: -10px; padding: 5px 9px 5px 7px; font-size: 0.74rem; }
  .lbl svg { width: 12px; height: 12px; }
  .leg .cap { margin-top: 12px; font-size: 0.82rem; }
}

/* 4 · questions as a chat, the close, one footer row */
.faq { position: relative; margin-top: 56px; background: var(--bg); padding-block: clamp(56px, 9vh, 104px) 0; }
.faq .mid h2 { max-width: 14ch; }
.thread { max-width: 760px; margin: clamp(32px, 5vh, 56px) auto 0; display: grid; gap: 22px; }
.pair { display: grid; gap: 8px; }
.ask, .reply { margin: 0; }
.ask { justify-self: end; max-width: min(86%, 520px); padding: 12px 18px; border-radius: 22px 22px 6px 22px; background: var(--brand); color: var(--on-brand); font: 700 1.08rem/1.35 var(--display); }
.reply { justify-self: start; display: flex; align-items: flex-end; gap: 10px; max-width: min(94%, 620px); }
.reply .mk { width: 34px; height: 34px; flex: none; }
.say { padding: 12px 18px; border-radius: 22px 22px 22px 6px; background: var(--card); color: var(--fg); line-height: 1.5; min-width: 0; }
.close { display: grid; justify-items: center; gap: 22px; text-align: center; padding-block: clamp(80px, 13vh, 150px) clamp(48px, 7vh, 80px); }
.close .big { display: block; width: clamp(92px, 12vw, 140px); height: clamp(92px, 12vw, 140px); filter: drop-shadow(0 12px 18px var(--shadow)); animation: wob 3.4s ease-in-out infinite; }
@keyframes wob { 50% { transform: rotate(-6deg) translateY(-6px); } }
.close h2 { font: 800 clamp(2.6rem, 7vw, 6rem)/0.95 var(--display); letter-spacing: -0.035em; text-transform: lowercase; max-width: 12ch; }
.foot { padding-block: 8px calc(24px + env(safe-area-inset-bottom, 0px)); }
.foot .in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 22px; font: 700 0.95rem/1 var(--display); }
.foot nav a { padding: 12px 0; }
.copy { font-size: 0.85rem; color: var(--muted-fg); }
@media (max-width: 640px) { .foot .in { flex-direction: column; align-items: flex-start; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .row { overflow-x: auto; scrollbar-width: none; }
  .ph { display: none; }
  .bars i.on { background: var(--obj-brand); }
}