/* Hearing Aid Beige — warm 70s print: cream paper, chocolate ink, rust / mustard / olive, Fraunces (soft, wonky), film grain. */
@font-face { font-family:"Fraunces"; src:url("/fonts/fraunces.woff2") format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Fraunces"; src:url("/fonts/fraunces-italic.woff2") format("woff2"); font-weight:300 700; font-style:italic; font-display:swap; }

:root {
  --paper:#e8d5b5; --paper-2:#f0e2c8; --ink:#3b2417; --muted:#7a5a40; --line:#cdb48d;
  --rust:#b4532a; --mustard:#d49a2a; --olive:#6f6a2c; --cocoa:#5a3520;
  --serif:"Fraunces", ui-serif, Georgia, "Times New Roman", serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--serif); font-variation-settings:"SOFT" 50, "WONK" 0; font-optical-sizing:auto;
  color:var(--ink); line-height:1.6; min-height:100vh; display:flex; flex-direction:column;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,240,210,.55), transparent 60%),
    radial-gradient(140% 120% at 50% 100%, rgba(90,53,32,.16), transparent 55%),
    var(--paper);
}
/* film grain: fixed SVG noise over everything, never blocks clicks */
body::after {
  content:""; position:fixed; inset:-50%; pointer-events:none; z-index:50; opacity:.16; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23  0 0 0 0 .14  0 0 0 0 .09  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  body::after { animation:grain 1.2s steps(6) infinite; }
  @keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
                     60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
}
a { color:inherit; text-decoration-color:var(--rust); text-underline-offset:3px; }
a:hover { color:var(--rust); }
.skip { position:absolute; left:-9999px; top:8px; background:var(--ink); color:var(--paper); padding:8px 14px; z-index:60; }
.skip:focus { left:8px; }
.wrap { width:100%; max-width:920px; margin:0 auto; padding-left:20px; padding-right:20px; }
.center { text-align:center; }

/* masthead */
.masthead { padding-top:64px; padding-bottom:28px; text-align:center; }
.band { font-size:clamp(2.9rem, 11.5vw, 7.2rem); font-weight:600; line-height:.9; letter-spacing:-.025em;
        font-variation-settings:"SOFT" 100, "WONK" 1, "opsz" 144; color:var(--cocoa); }
.band a { text-decoration:none; color:inherit; }

/* sections */
section { padding:36px 0; }
.kicker { font-style:italic; font-weight:400; font-size:1.15rem; color:var(--rust); margin-bottom:2px;
          font-variation-settings:"SOFT" 100, "WONK" 1; }
h1, h2 { font-weight:600; line-height:1.1; letter-spacing:-.01em; font-variation-settings:"SOFT" 100, "WONK" 0, "opsz" 72; color:var(--cocoa); }
h2 { font-size:clamp(1.7rem, 5vw, 2.6rem); margin-bottom:20px; }
main > section:first-child { padding-top:20px; }

/* video: rounded like an old TV screen, warm frame */
.video { position:relative; aspect-ratio:16/9; width:100%; background:#1d120b; border-radius:22px; overflow:hidden;
         border:6px solid var(--cocoa); box-shadow:0 18px 40px rgba(59,36,23,.28), inset 0 0 0 1px rgba(255,255,255,.06); }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* music */
.feature { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:32px; align-items:center; }
.feature img { width:100%; height:auto; display:block; filter:drop-shadow(0 16px 26px rgba(59,36,23,.25)); }
.feature p { font-size:1.12rem; margin-bottom:18px; }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.sub { font-size:1.35rem; font-weight:600; margin:44px 0 16px; color:var(--cocoa); font-variation-settings:"SOFT" 100; }
.releases { list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-bottom:26px; }
.tile { display:flex; flex-direction:column; gap:2px; width:100%; padding:0; border:0; background:none; text-align:left; cursor:pointer;
        font:inherit; color:inherit; }
.tile img { width:100%; height:auto; aspect-ratio:1; object-fit:cover; display:block; border-radius:10px; margin-bottom:8px;
            box-shadow:0 8px 20px rgba(59,36,23,.22); outline:3px solid transparent; outline-offset:3px; transition:transform .2s ease, outline-color .2s ease; }
.tile:hover img { transform:translateY(-3px) rotate(-.6deg); }
.tile.active img { outline-color:var(--mustard); }
.tile .t { font-weight:600; font-size:1.05rem; line-height:1.25; font-variation-settings:"SOFT" 100; }
.tile .m { font-size:.9rem; color:var(--muted); font-style:italic; }
.tile:focus-visible { outline:none; } .tile:focus-visible img { outline-color:var(--mustard); }

/* spotify */
.spotify-slot[hidden] { display:none; }
.spotify-slot { border-radius:16px; overflow:hidden; }
.spotify-slot iframe { display:block; width:100%; height:352px; border:0; border-radius:16px; }
.placeholder { min-height:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center;
               padding:28px; background:var(--paper-2); border:2px solid var(--line); border-radius:16px; }
.placeholder p { color:var(--muted); max-width:34ch; }
.small { font-size:.95rem; color:var(--muted); }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:10px; font:600 1rem/1 var(--serif); font-variation-settings:"SOFT" 100;
       background:var(--rust); color:var(--paper-2); border:2px solid var(--rust); padding:13px 22px; border-radius:999px;
       cursor:pointer; text-decoration:none; transition:background .2s ease, transform .2s ease; }
.btn:hover { background:var(--cocoa); border-color:var(--cocoa); color:var(--paper-2); transform:translateY(-1px); }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--ink); }
.btn.ghost:hover { background:var(--ink); color:var(--paper-2); }
.btn.big { font-size:1.15rem; padding:16px 26px; }
.btn svg { fill:currentColor; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline:3px solid var(--mustard); outline-offset:3px; }

.bio { max-width:62ch; font-size:1.12rem; }
.bio p { margin-bottom:16px; }
.bio p:first-child::first-letter { float:left; font-size:3.6em; line-height:.85; font-weight:600; padding:6px 10px 0 0; color:var(--rust);
  font-variation-settings:"SOFT" 100, "WONK" 1, "opsz" 144; }

/* privacy page */
.prose { max-width:68ch; padding-top:12px; padding-bottom:20px; }
.prose h1 { font-size:clamp(2rem, 6vw, 3rem); margin-bottom:18px; }
.prose h2 { font-size:1.45rem; margin:34px 0 10px; }
.prose p, .prose ul { margin-bottom:14px; }
.prose ul { padding-left:1.2em; }

/* footer */
footer.wrap { margin-top:auto; padding-top:40px; border-top:2px solid var(--line); padding-bottom:34px; text-align:center; }
.socials { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.ico { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; border:2px solid var(--cocoa); color:var(--cocoa);
       transition:background .2s ease, color .2s ease, transform .2s ease; }
.ico svg { fill:currentColor; }
.ico:hover { background:var(--cocoa); color:var(--paper-2); transform:translateY(-2px); }
.legal { margin-top:24px; display:flex; gap:10px 22px; justify-content:center; flex-wrap:wrap; font-size:.92rem; color:var(--muted); }
.legal a, .legal button { color:var(--muted); background:none; border:0; font:inherit; cursor:pointer; text-decoration:underline;
       text-decoration-color:var(--line); text-underline-offset:3px; }
.legal a:hover, .legal button:hover { color:var(--rust); }


@media (max-width:760px) { .feature { grid-template-columns:1fr; gap:22px; } .releases { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px) { .ico { width:40px; height:40px; } .ico svg { width:19px; height:19px; } .socials { gap:7px; }
  .masthead { padding-top:44px; padding-bottom:16px; } section { padding:26px 0; }
  .video { border-width:4px; border-radius:16px; }
  .spotify-slot iframe { height:380px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }