/* ponytail: CSS 3D transforms instead of WebGL. A perspective container plus
   preserve-3d gets a real piano in ~80 lines with no runtime, no shaders and no
   200kB dependency. Reach for three.js only if this ever needs lighting or a
   camera path. */

:root{
  --bg:      #E9E3DA;
  --bg-warm: #DFD7CB;
  --bg-deep: #D4CABB;
  --card:    #F4EFE8;
  --ink:     #2B2621;
  --muted:   #6C6157;
  --brass:   #A9743C;
  --brass-lt:#D3A263;
  --line:    rgba(43,38,33,.13);

  --kw:  clamp(24px, 3.1vw, 40px);   /* white key width  */
  --bkw: calc(var(--kw) * .62);      /* black key width  */
  --gap: 2px;

  --p: 0;   /* hero scroll progress, 0 → 1 (set by app.js) */
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background:
    radial-gradient(120% 70% at 50% -10%, #F2ECE3 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 55%, var(--bg-deep) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font: 400 17px/1.65 ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,.brand,.btn,.pill,.eyebrow,.hint,cite{
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Inter, system-ui, sans-serif;
}

h1,h2,h3{ line-height:1.12; letter-spacing:-.02em; margin:0 0 .5em; font-weight:650; }
h1{ font-size: clamp(2.6rem, 6.2vw, 4.6rem); letter-spacing:-.035em; }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3{ font-size: 1.24rem; }
p{ margin:0 0 1em; }
em{ font-style: normal; color: var(--brass); }

a{ color: inherit; }

.wrap{ max-width: 1120px; margin: 0 auto; padding: 0 28px; }

.skip{
  position:absolute; left:-9999px; top:12px; z-index:99;
  background: var(--ink); color: var(--bg); padding:10px 16px; border-radius:8px;
}
.skip:focus{ left:16px; }

:focus-visible{ outline: 3px solid var(--brass); outline-offset: 3px; border-radius: 4px; }

/* ── nav ─────────────────────────────────────────────────────────── */

.nav{
  position: sticky; top:0; z-index: 30;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding: 14px 28px;
  background: rgba(236,230,221,.72);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
.nav nav{ display:flex; align-items:center; gap:26px; font-size:.94rem; }
.nav nav a{ text-decoration:none; color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; }
.nav nav a:hover{ color: var(--ink); }

.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:650; font-size:1.06rem; letter-spacing:-.02em; text-decoration:none;
}
.brand-mark{ display:inline-flex; gap:2px; align-items:flex-end;
  background: var(--brass); padding:4px 4px 3px; border-radius:6px; }
.brand-mark i{ width:3px; height:13px; background:#FBF7F0; border-radius:0 0 1px 1px; }
.brand-mark i:nth-child(2){ height:16px; }

.btn{
  display:inline-block; text-decoration:none;
  background: var(--ink); color: #F6F1E9;
  padding: 13px 24px; border-radius: 999px;
  font-size:.96rem; font-weight:550;
  transition: transform .18s ease, background .18s ease;
}
.btn:hover{ transform: translateY(-2px); background:#3B342C; }
.btn-sm{ padding: 8px 17px; font-size:.9rem; }
.btn-ghost{ background:transparent; color:var(--ink); box-shadow: inset 0 0 0 1.5px rgba(43,38,33,.25); }
.btn-ghost:hover{ background: rgba(43,38,33,.06); }

/* ── hero ────────────────────────────────────────────────────────── */

.hero{
  position: relative;
  min-height: 94vh;
  padding: clamp(48px, 9vh, 110px) 0 0;
  overflow: hidden;
  display: flex; flex-direction: column;
}

.hero-copy{
  position: relative; z-index: 2;
  max-width: 700px; margin: 0 auto; padding: 0 28px;
  text-align: center;
}
.eyebrow{
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--brass); font-weight:600; margin-bottom:1.1em;
}
.lede{ font-size: clamp(1.06rem, 1.6vw, 1.24rem); color: var(--muted); max-width: 56ch; margin: 0 auto 2em; }
.hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hint{ margin-top: 22px; font-size:.85rem; color: var(--muted); min-height: 1.4em; opacity:.75; }

/* ── the piano ───────────────────────────────────────────────────── */

.stage{
  position: relative;
  flex: 1;
  min-height: clamp(240px, 34vh, 400px);
  perspective: 1250px;
  perspective-origin: 50% 20%;
  overflow: hidden;
  margin-top: clamp(24px, 5vh, 64px);
}

.piano{
  position:absolute; left:50%; bottom: -6%;
  transform-style: preserve-3d;
  /* scroll drives the camera: the lid tips open and the board slides forward */
  transform:
    translateX(-50%)
    translateY(calc(var(--p) * 10%))
    rotateX(calc(64deg - var(--p) * 26deg))
    rotateZ(calc(var(--p) * -1.5deg));
  transition: transform .12s linear;
}

.keyboard{
  display:flex; position: relative;
  transform-style: preserve-3d;
  padding: 0 6px;
  filter: drop-shadow(0 26px 30px rgba(70,55,40,.30));
}

.key{
  --d: 0;                       /* 0 = up, 1 = fully pressed */
  position: relative;
  padding:0; border:0; cursor:pointer; -webkit-appearance:none;
  transform-style: preserve-3d;
  transform-origin: 50% 0 0;
  will-change: transform;
}
.key::after{                    /* the front face you only see because of 3D */
  content:''; position:absolute; left:0; right:0; top:100%;
  transform-origin: top center; transform: rotateX(-90deg);
}

.key.white{
  width: var(--kw); height: calc(var(--kw) * 5.4);
  margin-right: var(--gap);
  border-radius: 0 0 5px 5px;
  background: linear-gradient(#FFFDF8, #F4EDE2 62%, #E6DCCC);
  box-shadow:
    inset 0 -10px 14px rgba(130,108,80,.16),
    inset 1px 0 0 rgba(255,255,255,.8),
    0 0 0 1px rgba(90,73,55,.11);
  transform: rotateX(calc(var(--d) * 5.5deg));
}
.key.white::after{
  height: calc(var(--kw) * .55);
  background: linear-gradient(#F0E8DA, #D9CDB9);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 0 1px rgba(90,73,55,.11);
}

.key.black{
  position:absolute; top:0; z-index:3;
  /* --n = index of the white key on its left */
  left: calc((var(--n) + 1) * (var(--kw) + var(--gap)) - var(--bkw)/2 + 6px);
  width: var(--bkw); height: calc(var(--kw) * 3.4);
  border-radius: 0 0 4px 4px;
  background: linear-gradient(#40382E, #241E19 60%, #14100C);
  box-shadow: inset 0 -6px 8px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.3);
  transform: translateZ(calc(var(--kw) * .44)) rotateX(calc(var(--d) * 5.5deg));
}
.key.black::after{
  height: calc(var(--kw) * .44);
  background: linear-gradient(#2A241D, #171310);
}

/* pressed keys catch a little light */
.key.white{ background-image:
  linear-gradient(rgba(196,140,72,calc(var(--d) * .5)), rgba(196,140,72,calc(var(--d) * .12))),
  linear-gradient(#FFFDF8, #F4EDE2 62%, #E6DCCC); }
.key.black{ background-image: linear-gradient(rgba(211,162,99,calc(var(--d) * .6)), transparent 70%),
  linear-gradient(#40382E, #241E19 60%, #14100C); }

.rail{
  position:absolute; left:0; right:0; bottom: 100%;
  height: calc(var(--kw) * 1.5);
  transform-origin: bottom center;
  transform: rotateX(-78deg);
  background: linear-gradient(#6B5540, #4C3B2B 70%, #3A2C20);
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 0 -8px 26px rgba(60,44,30,.3);
  display:flex; align-items:center; justify-content:center;
}
.rail span{
  font: 600 clamp(9px,.85vw,12px)/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing:.34em; text-transform:uppercase;
  color: var(--brass-lt); opacity:.72;
}

/* falling note bars — a piano roll floating above the board */
.roll{ position:absolute; inset:0 0 auto; transform-style: preserve-3d; pointer-events:none; }
.roll i{
  position:absolute; bottom:0;
  width: var(--kw); height: calc(var(--kw) * 2.2);
  border-radius: 3px;
  background: linear-gradient(rgba(169,116,60,0), rgba(211,162,99,.55));
  transform: translateZ(calc(var(--kw) * 1.6)) translateY(-100%);
  animation: fall 4.4s linear infinite;
  opacity: 0;
}
@keyframes fall{
  0%   { transform: translateZ(calc(var(--kw)*1.6)) translateY(-820%); opacity:0; }
  12%  { opacity:.85; }
  88%  { opacity:.85; }
  100% { transform: translateZ(calc(var(--kw)*1.6)) translateY(-40%); opacity:0; }
}

.glow{
  position:absolute; left:50%; bottom:-14%; translate:-50% 0;
  width: 78%; height: 46%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(169,116,60,.28), transparent 70%);
  filter: blur(28px); pointer-events:none;
}

/* ── content bands ───────────────────────────────────────────────── */

.band{ padding: clamp(72px, 11vh, 132px) 0; }
.band-alt{
  background: linear-gradient(180deg, rgba(255,253,248,.55), rgba(255,253,248,.18));
  border-block: 1px solid var(--line);
}
.section-lede{ color: var(--muted); max-width: 62ch; font-size:1.08rem; margin-bottom: 3rem; }

.cards{ display:grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }

.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 26px 26px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 12px 28px -22px rgba(70,55,40,.5);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(70,55,40,.65); }
.card p{ color: var(--muted); margin-bottom:0; }
.card p + .link{ margin-top: 14px; display:inline-block; }

.pill{
  display:inline-block; margin-bottom:14px;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color: var(--brass); background: rgba(169,116,60,.11);
  padding: 5px 11px; border-radius: 999px;
}
.pill-wip{ color:#7A6236; background: rgba(169,116,60,.16); }

.link{ color: var(--brass); text-decoration:none; font-weight:550;
  font-family: ui-sans-serif, system-ui, sans-serif; font-size:.95rem; }
.link:hover{ text-decoration: underline; }

.split{ display:grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.feature{
  background: var(--card); border:1px solid var(--line); border-radius: 20px;
  overflow: hidden; display:flex; flex-direction: column;
  box-shadow: 0 14px 34px -26px rgba(70,55,40,.6);
}
.feature-body{ padding: 26px 28px 30px; }
.feature-body p{ color: var(--muted); }

.feature-art{ height: 150px; display:grid; place-items:center; border-bottom:1px solid var(--line); }
.art-braille{ background: linear-gradient(120deg, #E4DACA, #F0E8DA); }
.art-pulse{ background: linear-gradient(120deg, #DFDDD2, #EEEAE0); }

.dots{ display:grid; grid-template-columns: repeat(3, 22px); gap: 16px; }
.dots i{ width:22px; height:22px; border-radius:50%; background: var(--brass);
  box-shadow: inset 0 -3px 5px rgba(0,0,0,.22); opacity:.28; }
.dots i:nth-child(1), .dots i:nth-child(4), .dots i:nth-child(5){ opacity:.95; }

.bars{ display:flex; align-items:flex-end; gap:9px; height: 78px; }
.bars i{ width:12px; border-radius:3px; background: var(--brass); opacity:.75;
  animation: bounce 1.5s ease-in-out infinite; }
.bars i:nth-child(1){ height:26px; animation-delay:0s }
.bars i:nth-child(2){ height:48px; animation-delay:.11s }
.bars i:nth-child(3){ height:70px; animation-delay:.22s }
.bars i:nth-child(4){ height:38px; animation-delay:.33s }
.bars i:nth-child(5){ height:62px; animation-delay:.44s }
.bars i:nth-child(6){ height:30px; animation-delay:.55s }
.bars i:nth-child(7){ height:52px; animation-delay:.66s }
@keyframes bounce{ 0%,100%{ transform: scaleY(.45) } 50%{ transform: scaleY(1) } }

.ticks{ list-style:none; padding:0; margin: 18px 0 0; color: var(--muted); font-size:.98rem; }
.ticks li{ padding-left: 26px; position: relative; margin-bottom: 9px; }
.ticks li::before{
  content:''; position:absolute; left:2px; top:.62em;
  width:9px; height:9px; border-radius:2px; background: var(--brass); opacity:.55;
}

.note{ margin-top: 34px; color: var(--muted); font-size:.98rem; max-width: 62ch; }

.quote-band{ padding: clamp(60px, 9vh, 100px) 0; }
blockquote{ margin:0; max-width: 44ch; }
blockquote p{ font-size: clamp(1.35rem, 2.6vw, 1.95rem); line-height:1.34; letter-spacing:-.015em; }
cite{ font-style:normal; font-size:.9rem; color: var(--muted); letter-spacing:.04em; }

/* ── about page ──────────────────────────────────────────────────── */

.page-head{ padding: clamp(64px, 10vh, 118px) 0 clamp(30px, 5vh, 56px); }
.page-head h1{ font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 18ch; }
.prose{ max-width: 66ch; }
.prose p{ color: var(--muted); font-size: 1.08rem; }
.prose h2{ margin-top: 2.2em; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.prose h2:first-child{ margin-top:0; }
.prose strong{ color: var(--ink); font-weight:600; }

.facts{ display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); margin: 40px 0 0; }
.fact{ border-left: 3px solid var(--brass); padding: 4px 0 4px 16px; }
.fact dt{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color: var(--brass);
  font-family: ui-sans-serif, system-ui, sans-serif; font-weight:600; margin-bottom:6px; }
.fact dd{ margin:0; color: var(--muted); font-size:.99rem; }

/* ── footer ──────────────────────────────────────────────────────── */

.foot{ border-top:1px solid var(--line); padding: 44px 0 56px; }
.foot-grid{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-start; }
.foot-grid nav{ display:flex; flex-direction:column; gap:9px; font-size:.94rem;
  font-family: ui-sans-serif, system-ui, sans-serif; }
.foot-grid nav a{ color: var(--muted); text-decoration:none; }
.foot-grid nav a:hover{ color: var(--ink); }
.foot-note{ color: var(--muted); font-size:.94rem; margin:12px 0 0; }

/* ── reveal on scroll ────────────────────────────────────────────── */

.reveal{ opacity:0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.cards .reveal.in:nth-child(2), .split .reveal.in:nth-child(2){ transition-delay:.09s }
.cards .reveal.in:nth-child(3){ transition-delay:.18s }

/* ── small screens ───────────────────────────────────────────────── */

@media (max-width: 760px){
  .nav nav a:not(.btn){ display:none; }
  .stage{ perspective: 900px; }
  .foot-grid{ flex-direction:column; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation: none !important; transition: none !important; }
  .reveal{ opacity:1; transform:none; }
  .piano{ transform: translateX(-50%) rotateX(48deg); }
  .roll{ display:none; }
}