/* Purple Piano — shared styles. Deep-space violet + candy rainbow. */

:root {
  --bg-deep:    #140a24;
  --bg-mid:     #2a1440;
  --panel:      #1e1133;
  --panel-edge: #3a2560;
  --ink:        #f4eefe;
  --ink-soft:   #cbbce6;
  --ink-dim:    #a795c4;
  --accent:     #a78bfa;
  --accent-hot: #c4b0ff;

  /* Pitch colors: pastel fill + saturated lip, by hue. */
  --c-fill: #ffc9dd;  --c-lip: #ff4d8d;   /* C  350° pink     */
  --d-fill: #ffd4b0;  --d-lip: #ff8a3d;   /* D   20° peach    */
  --e-fill: #f7e6a8;  --e-lip: #e8b400;   /* E   45° gold     */
  --f-fill: #cdeeb8;  --f-lip: #4caf50;   /* F   95° green    */
  --g-fill: #b3f0e6;  --g-lip: #00bfae;   /* G  190° cyan     */
  --a-fill: #c2d8fb;  --a-lip: #4d8dff;   /* A  225° blue     */
  --b-fill: #e2ccfa;  --b-lip: #a259ff;   /* B  295° lavender */

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-pill: 999px;

  --wrap: 1080px;
  --mx: 0; --my: 0; --glow: 0;
  --wordmark: "Poppins", ui-rounded, system-ui, sans-serif;
  --display: "Baloo 2", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -10%, var(--bg-mid) 0%, transparent 60%),
    radial-gradient(ellipse 90% 60% at 85% 100%, #251043 0%, transparent 65%);
  overflow-x: hidden;
}

/* ---------- Starfield ----------
   The app's deterministic 48-star field (star-field.tsx): most are round,
   the brightest few are four-point sparkles. */
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  contain: strict;
}
.stars span {
  position: absolute;
  background: oklch(0.98 0.01 300 / .7);
  animation: twinkle 4s ease-in-out infinite alternate;
}
.stars span:nth-child(3n)   { animation-duration: 5.5s; animation-delay: .8s; }
.stars span:nth-child(4n)   { animation-duration: 3.2s; animation-delay: 1.6s; }
.stars span:nth-child(5n+2) { animation-duration: 6s;   animation-delay: 2.4s; }

@keyframes twinkle { from { opacity: .45; } to { opacity: .85; } }

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

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; position: relative; z-index: 1; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #1a0f2e; font-weight: 700;
  padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) 0; z-index: 100;
}
.skip-link:focus { left: 0; }

:where(a, button):focus-visible {
  outline: 3px solid var(--accent-hot);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- Header ---------- */
.site-header {
  position: relative; z-index: 2;
  padding: 1.5rem 0;
}
.site-header .wrap { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* The brand link now wraps the wordmark, which carries its own type —
   no uppercasing or extra tracking on top of it. */
.brand {
  display: inline-flex; align-items: center;
  text-decoration: none;
}

.nav { display: flex; gap: .4rem; }
.nav a {
  color: var(--ink-soft); text-decoration: none;
  font-size: .95rem; font-weight: 600;
  padding: .45rem .95rem; border-radius: var(--r-pill);
  transition: background-color .18s ease, color .18s ease;
}
.nav a:hover, .nav a[aria-current="page"] { background: rgba(167,139,250,.16); color: var(--ink); }

/* ---------- Hero ---------- */
h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.75rem, 9vw, 4.75rem);
  line-height: 1.05;
  margin: 0 0 1rem;
  letter-spacing: -.01em;
  background: linear-gradient(100deg, var(--c-fill) 0%, var(--e-fill) 26%, var(--f-fill) 46%, var(--g-fill) 64%, var(--a-fill) 80%, var(--b-fill) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.25rem, 3.4vw, 1.75rem);
  color: var(--ink);
  margin: 0 auto 1rem;
  max-width: 22ch;
  line-height: 1.3;
}

.subtitle { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 2rem; font-size: 1.0625rem; }

/* ---------- Cosmic background ---------- */
.cosmos {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  /* The orbs carry blur(70px) over ~830k px². Isolating this subtree keeps
     that rasterisation off the scroll path — it is painted once, then only
     composited. */
  contain: strict;
  transform: translateZ(0);
}

.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; transition: none; }
.orb-1 { width: 60vw; height: 60vw; left: -18vw; top: -8vh;
  background: radial-gradient(circle, #ff8fc7 0%, #b06bff 45%, transparent 70%); }
.orb-2 { width: 52vw; height: 52vw; right: -16vw; top: -14vh;
  background: radial-gradient(circle, #7c5cff 0%, #4a2fb8 50%, transparent 72%); opacity: .6; }
.orb-3 { width: 50vw; height: 50vw; right: -12vw; top: 42vh;
  background: radial-gradient(circle, #2ee6d6 0%, #1b8fd6 48%, transparent 72%); opacity: .42; }

/* The pale ribbon sweeping through the reference image. */
.swoosh {
  position: absolute; left: -12%; right: -12%; top: 12vh; height: 54vh;
  background:
    radial-gradient(60% 100% at 22% 42%, rgba(255,190,235,.30), transparent 62%),
    radial-gradient(58% 100% at 74% 52%, rgba(150,225,255,.24), transparent 64%);
  transform: rotate(-11deg);
  filter: blur(46px);
  transition: none;
}

/* ---------- Hero ---------- */
.hero { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1.25rem, 3vw, 2rem); text-align: center; }

/* Cursor-reactive hero. --mx/--my are set by a small script and default to
   0 on :root, so everything sits correctly with JS off. */
.tagline {
  transform: translate3d(calc(var(--mx) * 5px), calc(var(--my) * 3px), 0);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}

/* ---------- Buttons ---------- */
.cta-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .85rem; margin-top: 2.25rem;
}
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .8rem 1.5rem; border-radius: var(--r-md);
  text-decoration: none; text-align: left;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn-sub  { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; opacity: .72; line-height: 1.45; }
.btn-main { display: block; font-family: var(--display); font-size: 1.1rem; font-weight: 700; line-height: 1.2; }

.btn-primary {
  background: linear-gradient(180deg, #f7f2ff, #ded2ff);
  color: #24123f;
  box-shadow: 0 12px 34px -10px rgba(190,160,255,.6);
}
.btn-primary.is-pending { cursor: default; }

.btn-ghost .btn-main { font-size: 1.15rem; }
.btn-ghost {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  color: var(--ink);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
a.btn:hover { transform: translateY(-2px); }
a.btn-ghost:hover { background: rgba(255,255,255,.15); }

/* ---------- iPad ----------
   Geometry and colour lifted from the app source (purple-piano/*.tsx):
   pitch colours via oklch hue wheel, 6px key lips, black keys at 62%
   height and 60% width centred on the seams, 13-dot knob rings. */
.stage {
  position: relative; z-index: 1;
  padding: clamp(.25rem, 1.5vw, 1rem) 0 clamp(3rem, 8vw, 5rem);
  perspective: 1800px;
  overflow: hidden;
}
.ipad {
  width: min(92%, 1060px);
  margin-inline: auto;
  aspect-ratio: 16 / 11;
  border-radius: clamp(14px, 2vw, 26px);
  padding: clamp(4px, .62vw, 9px);
  background: linear-gradient(150deg, #b9bac9 0%, #74758c 30%, #43445a 62%, #9c9db1 100%);
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.14);
  transform: rotateX(7deg) rotateY(-13deg) rotateZ(2deg);
  transform-origin: 50% 60%;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.stage:hover .ipad { transform: rotateX(3deg) rotateY(-6deg) rotateZ(1deg); }

/* The app's own chrome: --background mixed 86% with the royal-purple tint. */
.ipad-screen {
  height: 100%;
  border-radius: clamp(9px, 1.4vw, 17px);
  background:
    radial-gradient(120% 90% at 50% -10%, oklch(0.42 0.16 300) 0%, transparent 62%),
    radial-gradient(85% 65% at 10% 106%, oklch(0.55 0.18 330 / .58) 0%, transparent 70%),
    radial-gradient(85% 65% at 94% 96%, oklch(0.6 0.15 200 / .48) 0%, transparent 70%),
    oklch(0.19 0.05 300);
  padding: clamp(.4rem, 1vw, .8rem);
  display: flex; flex-direction: column; gap: clamp(.25rem, .7vw, .55rem);
  overflow: hidden;
  container-type: inline-size;
}

/* Sizes track the iPad's own width, so every part scales together. */
.ipad-screen { --u: 1cqw; }

/* Header */
.app-bar { display: flex; align-items: center; gap: 1.2cqw; flex: none; }
.app-brand {
  font-family: var(--display); font-weight: 800;
  font-size: 1.05cqw; letter-spacing: .18em; text-transform: uppercase;
  color: oklch(0.75 0.04 300); white-space: nowrap;
}
.app-preset {
  display: flex; align-items: center; gap: 1cqw;
  margin-inline: auto;
  width: min(34cqw, 420px);
  border-radius: 999px;
  border: 1px solid oklch(0.72 0.11 295 / .3);
  background: oklch(0.28 0.07 300 / .5);
  padding: .45cqw;
}
.app-preset .nav {
  display: grid; place-items: center; flex: none;
  width: 3.4cqw; height: 3.4cqw; border-radius: 999px;
  background: oklch(0.55 0.21 300); color: oklch(0.98 0.01 300);
  font-size: 2cqw; font-style: normal; line-height: 1;
}
.preset-mid { flex: 1; min-width: 0; text-align: center; }
.preset-mid b {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: 1.6cqw; letter-spacing: .12em; text-transform: uppercase;
  color: oklch(0.98 0.01 300); line-height: 1.2;
}
.preset-mid .dots { display: flex; justify-content: center; gap: .35cqw; margin-top: .2cqw; }
.preset-mid .dots i { width: .5cqw; height: .5cqw; border-radius: 999px; background: oklch(0.96 0.01 300 / .25); }
.preset-mid .dots i.on { background: oklch(0.96 0.01 300); }

.app-btns { display: flex; align-items: center; gap: .5cqw; flex: none; }
.app-btns i {
  width: 3.4cqw; height: 3.4cqw; border-radius: 999px;
  border: 1px solid oklch(0.72 0.11 295 / .3);
  background: oklch(0.28 0.07 300 / .6);
}
.app-btns i.paint { background: oklch(0.55 0.21 300); }

/* Knob rack */
.app-rack {
  position: relative; flex: none;
  border-radius: 2cqw;
  border: 1px solid oklch(0.72 0.11 295 / .3);
  background: oklch(0.28 0.07 300 / .5);
  padding: .9cqw 2cqw;
}
.knobs { display: flex; align-items: center; justify-content: center; gap: 2.4cqw; }
.knob { position: relative; width: 6.2cqw; aspect-ratio: 1; flex: none; }
.knob svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.knob i { position: absolute; border-radius: 999px; }
.knob .bezel {
  inset: 13%;
  background: linear-gradient(to bottom, oklch(0.74 0.13 300), oklch(0.38 0.14 300));
  box-shadow: 0 5px 12px -3px rgb(0 0 0 / .5), 0 1px 2px rgb(0 0 0 / .35);
}
.knob .cap {
  inset: 17.5%;
  background: radial-gradient(115% 115% at 32% 22%, oklch(0.76 0.12 300) 0%, oklch(0.55 0.21 300) 48%, oklch(0.44 0.17 300) 100%);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .35), inset 0 -3px 6px rgb(0 0 0 / .3);
}
.knob .sheen { inset: 17.5%; background: radial-gradient(65% 42% at 50% 14%, rgb(255 255 255 / .3), transparent 70%); }
.knob .ptr { inset: 17.5%; }
.knob .ptr b {
  position: absolute; left: 50%; top: 9%;
  height: 34%; width: 9%; transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--acct), var(--acc));
  box-shadow: 0 0 6px var(--accg), inset 0 1px 1px rgb(255 255 255 / .45);
}

.tone { position: absolute; right: 2cqw; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: .3cqw; }
.tone-label { font-size: .85cqw; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: oklch(0.75 0.04 300); }
.tone-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3cqw; }
.tone-grid i {
  border-radius: 999px; padding: .45cqw .8cqw;
  font-size: .9cqw; font-weight: 900; font-style: normal;
  text-transform: uppercase; letter-spacing: .025em; text-align: center;
  background: oklch(0.28 0.07 300 / .7); color: oklch(0.75 0.04 300);
}
.tone-grid i.on { background: oklch(0.55 0.21 300); color: oklch(0.98 0.01 300); }

/* Song maker */
.app-roll { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: .4cqw; padding: 0 .3cqw; }
.roll-head { display: flex; align-items: center; justify-content: space-between; }
.roll-head span {
  font-size: .85cqw; font-weight: 900; text-transform: uppercase;
  letter-spacing: .2em; color: oklch(0.75 0.04 300);
}
.roll-head span:last-child { letter-spacing: .05em; font-weight: 700; }
.roll-body { display: flex; flex: 1; min-height: 0; gap: .7cqw; }
.lanes { display: flex; width: 4cqw; flex: none; flex-direction: column; gap: .5cqw; }
.lane {
  display: flex; flex: 1; min-height: 0; align-items: center; justify-content: center; gap: .4cqw;
  border-radius: .7cqw;
  border: 1px solid oklch(0.72 0.11 295 / .28);
  background: oklch(0.28 0.07 300 / .6);
  font-family: var(--display); font-weight: 900; font-size: 1.1cqw;
  color: oklch(0.96 0.01 300);
}
.lane i { width: .75cqw; height: .75cqw; border-radius: 999px; flex: none; }
.cells { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: .5cqw; }
.rollrow { display: flex; flex: 1; min-height: 0; gap: .5cqw; }
.cell {
  flex: 1; min-width: 0; border-radius: .8cqw;
  border: 1px solid oklch(0.98 0 0 / .15);
  background: oklch(0.98 0 0 / .08);
}
.cell.beat { background: oklch(0.98 0 0 / .15); }
.cell.on { border-color: transparent; background: var(--note); box-shadow: 0 0 12px var(--halo); }

/* Transport */
.app-transport { display: flex; flex: none; align-items: center; justify-content: center; gap: 1.6cqw; padding: .5cqw 0 .3cqw; }
.pill {
  display: inline-flex; align-items: center; gap: .6cqw;
  border-radius: 999px;
  border: 1px solid oklch(0.72 0.11 295 / .3);
  background: oklch(0.28 0.07 300 / .6);
  padding: .5cqw 1.4cqw;
  font-family: var(--display); font-weight: 800;
  font-size: 1.35cqw; text-transform: uppercase; letter-spacing: .06em;
  color: oklch(0.96 0.01 300);
}
.pill i { font-style: normal; }
.pill.oct b { min-width: 3cqw; text-align: center; font-size: 1.05cqw; }
.pill .dot { width: 1.1cqw; height: 1.1cqw; border-radius: 999px; background: oklch(0.75 0.04 300); }
.play {
  display: inline-flex; align-items: center; gap: .7cqw;
  border-radius: 999px;
  background: oklch(0.78 0.1 300);
  padding: .55cqw 2.2cqw;
  font-family: var(--display); font-weight: 800;
  font-size: 1.5cqw; text-transform: uppercase; letter-spacing: .06em;
  color: oklch(0.24 0.09 300);
}
.play svg { width: 1.5cqw; height: 1.5cqw; }

/* Keyboard */
.app-keys { position: relative; flex: none; height: 30%; }
.whites { display: flex; height: 100%; width: 100%; gap: 2px; }
.wk {
  position: relative; display: flex; flex: 1; min-width: 0;
  align-items: flex-end; justify-content: center;
  padding-bottom: .8cqw;
  border-radius: 0 0 1.3cqw 1.3cqw;
  background: linear-gradient(180deg, var(--fill-top) 0%, var(--fill-bot) 100%);
  box-shadow: inset 0 -6px 0 var(--lip);
  font-family: var(--display); font-weight: 900; font-size: 1.3cqw;
  color: var(--ink);
}
.blacks { position: absolute; inset: 0; }
.bk {
  position: absolute; top: 0; height: 62%;
  transform: translateX(-50%);
  border-radius: 0 0 1cqw 1cqw;
  background: linear-gradient(180deg, var(--bk-top) 0%, var(--bk-bot) 100%);
  box-shadow: inset 0 -5px 0 var(--bk-lip), 0 4px 8px oklch(0.15 0.03 275 / .6);
}

@media (max-width: 700px) {
  .ipad { transform: rotateX(4deg) rotateY(-7deg); width: min(96%, 560px); }
  .app-brand, .tone { display: none; }
}
@media (max-width: 430px) {
  .ipad { transform: none; aspect-ratio: 3 / 2.4; }
  .app-btns, .roll-head span:last-child { display: none; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wordmark, .tagline, .ipad { transition: none !important; transform: none !important; }
  .stage:hover .ipad { transform: rotateX(7deg) rotateY(-13deg) rotateZ(2deg); }
}

/* ---------- Launch: hover lift + zoom to fullscreen ----------
   The iPad rises toward the reader while the play button is hovered, then
   flies up to fill the viewport on click while the target page preloads. */

/* Hover lift. .is-lifted is set by script on pointer enter/leave so the
   effect reads from the BUTTON, not from hovering the iPad itself. */
.stage .ipad.is-lifted {
  transform: rotateX(2deg) rotateY(-4deg) rotateZ(0deg) scale(1.045);
}
/* The lift's glow rides on a pseudo-element's OPACITY rather than animating
   box-shadow on the panel itself: opacity is composited, whereas a changing
   shadow repaints a 1000px-wide blurred region every frame. */
.ipad::after {
  content: "";
  position: absolute;
  inset: -2%;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 70px 120px -40px rgba(0,0,0,.8),
              0 0 90px -30px var(--accent);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.stage .ipad.is-lifted::after { opacity: 1; }
.ipad.is-flying::after { display: none; }

/* While launching, the iPad is promoted to a fixed layer and scaled to fill
   the viewport. --fly-* are measured and set by script so the element starts
   exactly where it already sits — no jump at the hand-off. */
/* .stage sets `perspective`, which makes it a containing block for fixed
   descendants — so a flying iPad would anchor to the stage, not the
   viewport. Drop the perspective while a launch is in flight. */
.stage.is-releasing { perspective: none; overflow: visible; }

.ipad.is-flying {
  position: fixed;
  left: var(--fly-x); top: var(--fly-y);
  width: var(--fly-w); height: var(--fly-h);
  margin: 0;
  z-index: 60;
  transform: none;
  transition: none;
  will-change: transform, opacity;
}
.ipad.is-flying.go {
  transform: translate3d(var(--fly-dx), var(--fly-dy), 0) scale(var(--fly-scale));
  transition: transform .72s cubic-bezier(.7,0,.2,1),
              border-radius .72s cubic-bezier(.7,0,.2,1);
  border-radius: 0;
}

/* Curtain fades the page out behind the flying iPad. */
.launch-veil {
  position: fixed; inset: 0; z-index: 55;
  background: oklch(0.19 0.05 300);
  opacity: 0;
  pointer-events: none;
  /* Eases in behind the panel and deliberately trails it, so the iPad is
     never hidden behind the curtain it is flying in front of. */
  transition: opacity .55s ease .12s;
}
.launch-veil.on { opacity: 1; }

/* Anything that isn't the iPad recedes during the flight. */
.is-launching .site-header,
.is-launching .hero,
.is-launching .site-footer,
.is-launching .cosmos,
.is-launching .stars {
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.is-launching { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .stage .ipad.is-lifted { transform: none; }
  .ipad::after { transition: none; }
  .ipad.is-flying.go { transition: none; }
  .launch-veil { transition: none; }
}

/* ---------- Mobile hero ----------
   Small screens lead with the app mark instead of the type wordmark, and
   drop the header nav (Support/Privacy still live in the footer). */

.tag-break { display: none; }

/* ---------- Wordmark ----------
   The Purple Piano logo, matched to the Paper source: Poppins 800 at
   -0.02em, "purple" in solid lavender and "piano" carrying the rainbow
   the app uses for pitch colour. */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--wordmark);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.22;
  white-space: nowrap;
}
.wm-purple { color: #B79BFF; }
.wm-piano {
  margin-left: 0.16em;
  /* sRGB first as the fallback, then the oklab original for browsers that
     support interpolation hints — oklab keeps the mid-tones from going
     muddy between the stops. */
  background-image: linear-gradient(90deg, #f45d9e 0%, #ff9a3d 20%, #f2d93a 40%, #5be0a8 60%, #47c8f0 80%, #8b7bf0 100%);
  background-image: linear-gradient(in oklab 90deg, oklab(69.1% 0.194 -0.011) 0%, oklab(77.6% 0.082 0.136) 20%, oklab(88% -0.028 0.165) 40%, oklab(81.8% -0.136 0.043) 60%, oklab(77.9% -0.091 -0.084) 80%, oklab(65.2% 0.049 -0.162) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The wordmark IS the hero title, and carries the cursor-reactive motion. */
.hero-wordmark {
  display: flex;
  justify-content: center;
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
  transform: translate3d(calc(var(--mx) * 12px), calc(var(--my) * 8px), 0);
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.hero:hover .hero-wordmark { will-change: transform; }

/* Header lockup on the inner pages. */
.brand-wordmark { font-size: 1.25rem; }

@media (max-width: 700px) {
  .site-header { display: none; }
  .hero { padding-top: clamp(1.5rem, 5vh, 3rem); }

  .tag-break { display: inline; }
  .tagline {
    max-width: none;
    font-size: clamp(1.5rem, 6.5vw, 2.1rem);
  }
}

/* ---------- Content pages ---------- */
.page { padding: clamp(2rem, 6vw, 3.5rem) 0 clamp(3rem, 8vw, 5rem); }
.page .lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 60ch; }

.prose { max-width: 68ch; }
.prose p, .prose ul { color: var(--ink-soft); }
.prose h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin-top: 2.75rem; }
.prose h2:first-of-type { margin-top: 2rem; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: .6rem; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent-hot); text-underline-offset: 3px; }
.prose strong { color: var(--ink); }

.panel {
  background: linear-gradient(180deg, rgba(58,37,96,.42), rgba(26,15,48,.62));
  border: 1px solid var(--panel-edge);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2rem);
  margin: 2rem 0;
  max-width: 68ch;
}
.panel h2 { margin-top: 0; }
.panel :last-child { margin-bottom: 0; }

.mail {
  display: inline-block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.05rem, 3.2vw, 1.35rem);
  color: var(--accent-hot);
  word-break: break-word;
  text-underline-offset: 4px;
}

.stamp {
  display: inline-block;
  font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--panel-edge);
  border-radius: var(--r-pill);
  padding: .35rem 1rem;
}

/* ---------- Rainbow rule ---------- */
.rainbow-rule {
  height: 5px; border: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-lip), var(--d-lip), var(--e-lip), var(--f-lip), var(--g-lip), var(--a-lip), var(--b-lip));
  opacity: .85;
  margin: 0;
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid rgba(167,139,250,.16);
  margin-top: 2rem;
  position: relative; z-index: 1;
}
.site-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.copyright { color: var(--ink-dim); font-size: .9rem; margin: 0; }

@media (max-width: 560px) {
  .site-header .wrap { justify-content: center; }
  .site-footer .wrap { flex-direction: column; text-align: center; }
}