/* Soundscape Studio — "rain on the night window" liner notes. Hand-written for this app only. */
:root{
  --night:#0A1224; --deep:#050A17; --pane:#14203A; --pane-hi:#1C2947;
  --mist:#8FB0C7; --fog:#C9D6E3; --lamp:#E8A849; --lamp-soft:#FAC76E; --tide:#4FCCC4;
  --ink:#EAF0F8; --rule:rgba(143,176,199,.18);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--deep)}
body{
  margin:0;color:var(--ink);font:17px/1.68 var(--sans);min-height:100vh;
  background:
    radial-gradient(60rem 30rem at 88% -8%,rgba(232,168,73,.22),transparent 60%),
    radial-gradient(40rem 40rem at -10% 110%,rgba(79,204,196,.10),transparent 60%),
    linear-gradient(180deg,#16203F 0%,var(--night) 38%,var(--deep) 100%);
}
/* falling rain, purely decorative */
body::before{
  content:"";position:fixed;inset:-50% 0 0 0;pointer-events:none;z-index:0;opacity:.35;
  background-image:
    repeating-linear-gradient(103deg,transparent 0 46px,rgba(201,214,227,.16) 46px 47px,transparent 47px 91px),
    repeating-linear-gradient(98deg,transparent 0 71px,rgba(143,176,199,.12) 71px 72px,transparent 72px 133px);
  animation:drizzle 2.6s linear infinite;
}
@keyframes drizzle{to{transform:translateY(50%)}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}
a{color:var(--lamp-soft);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--tide)}
.sill{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:28px 20px 72px}

/* window frame masthead */
.frame{
  position:relative;border:10px solid #22304F;border-radius:6px 6px 2px 2px;
  background:linear-gradient(160deg,rgba(28,41,71,.92),rgba(10,18,36,.92));
  box-shadow:0 0 0 1px #2F4066,0 30px 60px -30px #000,inset 0 0 80px rgba(232,168,73,.08);
  padding:34px 30px 30px;overflow:hidden;
}
.frame::before,.frame::after{content:"";position:absolute;background:#22304F}
.frame::before{left:50%;top:0;bottom:0;width:8px;transform:translateX(-50%);opacity:.55}
.frame::after{top:50%;left:0;right:0;height:8px;transform:translateY(-50%);opacity:.55}
.frame>*{position:relative;z-index:1}
.glow{position:absolute!important;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(250,199,110,.55),rgba(232,168,73,0) 70%);z-index:0!important}
.brand{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.brand svg{flex:none}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,6vw,50px);line-height:1.08;margin:18px 0 8px;letter-spacing:-.01em}
h1 em{font-style:italic;color:var(--lamp-soft)}
.lede{color:var(--fog);max-width:34em;margin:0}
.stamp{margin-top:18px;font-family:var(--mono);font-size:12.5px;color:var(--mist)}
.stamp b{color:var(--tide);font-weight:500}

/* J-card spine navigation */
nav.spine{display:flex;margin:22px 0 34px;border:1px solid var(--rule);border-radius:999px;overflow:hidden;background:rgba(5,10,23,.6)}
nav.spine a{flex:1;text-align:center;padding:11px 8px;text-decoration:none;color:var(--mist);font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;border-right:1px solid var(--rule)}
nav.spine a:last-child{border-right:0}
nav.spine a[aria-current="page"]{background:linear-gradient(90deg,var(--lamp),var(--lamp-soft));color:#1A1205;font-weight:600}
nav.spine a:not([aria-current]):hover{color:var(--ink);background:var(--pane)}

/* liner-note tracks */
.track{display:grid;grid-template-columns:64px 1fr;gap:4px 18px;padding:26px 0;border-top:1px dashed var(--rule)}
.track:first-of-type{border-top:0}
.no{font-family:var(--mono);font-size:12px;color:var(--tide);padding-top:7px;letter-spacing:.06em}
.no span{display:block;font-size:26px;color:var(--lamp);line-height:1;margin-top:4px;font-family:var(--serif)}
h2{font-family:var(--serif);font-weight:600;font-size:24px;margin:0 0 8px;color:var(--ink)}
h3{font-size:15px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--lamp-soft);margin:18px 0 4px}
p,li{color:var(--fog)}
ul{padding-left:20px;margin:8px 0}
li{margin:4px 0}
li::marker{color:var(--tide)}
strong{color:var(--ink)}
.track>div>:last-child{margin-bottom:0}

/* signal path table */
.path{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:15px;margin:10px 0 4px}
.path th{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);text-align:left;padding:0 12px}
.path td{background:var(--pane);padding:12px;vertical-align:top;color:var(--fog);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.path td:first-child{border-left:3px solid var(--tide);border-radius:10px 0 0 10px;color:var(--ink);font-weight:600}
.path td:last-child{border-radius:0 10px 10px 0;border-right:1px solid var(--rule)}
@media (max-width:640px){
  .path thead{display:none}
  .path tr{display:block;margin-bottom:10px}
  .path td{display:block;border-radius:0!important;border-left:3px solid var(--rule)}
  .path td:first-child{border-radius:10px 10px 0 0!important;border-left-color:var(--tide)}
  .path td:last-child{border-radius:0 0 10px 10px!important}
  .track{grid-template-columns:1fr}
  .no{display:flex;gap:10px;align-items:baseline;padding:0}
  .no span{font-size:20px;margin:0}
}
.note{background:linear-gradient(90deg,rgba(232,168,73,.12),rgba(232,168,73,.03));border-left:3px solid var(--lamp);padding:12px 16px;border-radius:0 10px 10px 0;color:var(--fog);margin:14px 0}

/* home + support cards */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
@media (max-width:640px){.doors{grid-template-columns:1fr}}
.door{display:block;text-decoration:none;background:var(--pane);border:1px solid var(--rule);border-radius:14px;padding:18px;color:var(--fog);transition:transform .2s,border-color .2s}
.door:hover{transform:translateY(-3px);border-color:var(--lamp);color:var(--fog)}
.door b{display:block;font-family:var(--serif);font-size:21px;color:var(--ink);margin-bottom:4px}
.door small{font-family:var(--mono);color:var(--tide);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.mailto{display:inline-flex;align-items:center;gap:10px;margin:8px 0 4px;padding:13px 20px;border-radius:999px;background:linear-gradient(90deg,var(--lamp),var(--lamp-soft));color:#1A1205;text-decoration:none;font-weight:600}
.mailto:hover{color:#1A1205;filter:brightness(1.06)}
details{background:var(--pane);border:1px solid var(--rule);border-radius:12px;padding:12px 16px;margin:10px 0}
summary{cursor:pointer;color:var(--ink);font-weight:600}
summary::marker{color:var(--lamp)}
details p{margin:8px 0 2px}

footer{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:0 20px 40px;font-family:var(--mono);font-size:12px;color:var(--mist);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
footer .fade{letter-spacing:.3em}