/* Crisp layer, loaded after site.css. Same look, sharper finish, modeled on a set of TV home screens:
   no film grain, hairline glass edges with a lit top rim, thin system numerals, wide-tracked labels
   with a glowing dot, and an Apple-style translucent bar on desktop. Nothing here changes a word. */

:root{
  --text:#14100C; --muted:#57514B; --line:#E6DED4;
  --hair:rgba(20,16,12,.09);
  --lift:0 1px 1px rgba(20,16,12,.04),0 14px 34px -20px rgba(20,16,12,.22);
  --rim-top:inset 0 1px 0 rgba(255,255,255,.22);
  --rim:inset 0 0 0 1px rgba(255,255,255,.07);
  --num:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",system-ui,sans-serif;
}
body{text-rendering:optimizeLegibility;font-feature-settings:"kern" 1}
h1,h2,h3{letter-spacing:-.028em}

/* the grain made every window soft; the sky is now drawn at full screen sharpness instead */
.window::after{display:none}
/* rounded windows get a hairline glass edge and a lit top rim, like the TV's weather card */
.stats.window,.closing-win,.band{box-shadow:0 0 0 10000px var(--paper,var(--bg)),var(--rim-top),var(--rim)}

/* labels: wide tracking, and on the night sky a small glowing dot */
.label{letter-spacing:.2em;font-size:12px}
.window .label{display:inline-flex;align-items:center;gap:10px;color:rgba(243,236,227,.86)}
.window .label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--glow);box-shadow:0 0 12px 2px rgba(242,163,92,.75)}

/* big numbers: thin system numerals, the way the TV clock is set */
.stat .n,.card .n{font-family:var(--num);font-weight:200;letter-spacing:-.045em}
.stat .n{font-size:clamp(52px,5.6vw,80px)}
.card .n{font-weight:250}

/* paper cards: hairline plus a soft two-layer shadow instead of a flat border */
.dept,.trio div,.quote,.prose .quote{border:1px solid var(--hair);box-shadow:var(--lift)}
.card,.creds-block{box-shadow:inset 0 0 0 1px var(--hair)}
.track li{border-color:var(--hair);box-shadow:0 1px 2px rgba(20,16,12,.05)}
.btn-ghost{border-color:rgba(20,16,12,.22)}

/* ghost buttons on the sky read as glass */
.window .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);box-shadow:var(--rim-top)}
.window .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}

/* the sticky bar is translucent glass on desktop (phones keep it solid: no blur under 760px) */
.topbar{border-bottom-color:var(--hair)}
@media (min-width:761px){
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .topbar{background:rgba(250,247,242,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
  }
}

/* the giant wordmark: a touch of light on its top edge */
.giant{text-shadow:0 1px 0 rgba(255,255,255,.06),0 18px 60px rgba(232,120,26,.12)}

/* the notch menu fits one more tab on small phones */
@media (max-width:400px){
  .window>.notch{gap:11px;padding-left:12px}
  .notch a{font-size:12.5px}
  .notch .btn-shiny{padding:8px 12px}
}
@media (prefers-reduced-transparency:reduce){
  .topbar{background:rgba(250,247,242,.98);-webkit-backdrop-filter:none;backdrop-filter:none}
}