@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ============================================================
   GLOAMWRIGHT — salvaged-glass terminal theme
   Background paintings are treated as the viewport itself, not
   decoration. Content sits on translucent "glass" panels.
   ============================================================ */

:root{
  --void:#0a0908;
  --ink:#ece3d0;
  --ink-dim:#b3a68a;
  --ink-faint:#7d735e;
  --panel:rgba(11,10,8,.66);
  --panel-strong:rgba(8,7,6,.86);
  --line:rgba(236,228,210,.2);
  --line-strong:rgba(236,228,210,.34);
  --brass:#caa057;
  --brass-dim:#8a7040;
  --red:#b1543f;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--void) center/cover no-repeat;
  color:var(--ink);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ---- page backdrop: painting + scrim, fixed behind everything ---- */
.backdrop{
  position:fixed; inset:0; z-index:-2;
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
.backdrop:after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,5,4,.42) 0%, rgba(6,5,4,.58) 38%, rgba(4,3,2,.86) 100%),
    radial-gradient(ellipse at 50% 0%, transparent 0%, rgba(4,3,2,.35) 72%);
}
/* faint fixed grain, kept from the old terminal skin */
.grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.15; mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px,transparent 5px);}

a{color:inherit; text-decoration:none}
::selection{background:var(--brass-dim); color:#100d09}
:focus-visible{outline:2px solid var(--brass); outline-offset:2px}

.shell{max-width:1180px; margin:0 auto; padding:22px 26px 70px}

/* ---- topbar ---- */
.topbar{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  padding:14px 20px 18px;
  border-bottom:1px solid var(--line);
  background:var(--panel); backdrop-filter:blur(6px);
}
.wordmark{font-size:34px; letter-spacing:.06em; font-weight:600; color:var(--ink)}
.subtitle{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); margin-top:2px}
.topmeta{text-align:right; font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--brass); letter-spacing:.06em; line-height:1.7}

/* ---- layout: nav rail + content, both glass, image shows through gaps ---- */
.layout{display:grid; grid-template-columns:200px 1fr; gap:0; margin-top:18px}
.menu{
  padding:18px 16px 24px; background:var(--panel); backdrop-filter:blur(6px);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.menu-title{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em; color:var(--ink-faint); margin-bottom:10px}
.menu a{display:block; padding:7px 6px; font-size:18px; color:var(--ink-dim); border-left:2px solid transparent}
.menu a:before{content:"◇ "; font-size:10px; color:var(--brass-dim)}
.menu a:hover{color:var(--ink)}
.menu a.active{color:var(--brass); border-left-color:var(--brass)}
.menu a.active:before{color:var(--brass)}

.content{min-width:0; background:var(--panel); backdrop-filter:blur(4px); border-bottom:1px solid var(--line); padding:36px 40px 50px}

/* ---- hero ---- */
.hero{min-height:56vh; display:flex; flex-direction:column; justify-content:center}
.kicker{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.2em; color:var(--brass); text-transform:uppercase}
h1{font-size:60px; font-weight:600; line-height:.98; margin:12px 0 22px; color:var(--ink);
   text-shadow:0 2px 18px rgba(0,0,0,.5)}
h2{font-size:29px; font-weight:600; border-bottom:1px solid var(--line); padding-bottom:9px; margin:38px 0 18px; color:var(--ink)}
h3{font-size:22px; font-weight:600; color:var(--ink)}
.lead{font-size:22px; max-width:640px; color:var(--ink-dim)}
p{max-width:680px}
.ornament{color:var(--brass-dim); letter-spacing:.5em; margin:26px 0}

/* ---- panels & cards ---- */
.dark-panel{background:var(--panel-strong); color:var(--ink); padding:24px; position:relative; border:1px solid var(--line)}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.card{border:1px solid var(--line); padding:18px; background:rgba(20,17,13,.5)}
.card h3{margin:0 0 6px}
.card p{margin:6px 0; color:var(--ink-dim)}

.meta{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--ink-faint); letter-spacing:.08em}
.entry{padding:24px 0; border-bottom:1px solid var(--line)}
.entry:last-child{border-bottom:none}
.entry h3{margin:5px 0 8px}
.entry p{color:var(--ink-dim)}
.notice{border-left:3px solid var(--red); padding:10px 16px; background:rgba(30,20,17,.5); color:var(--ink-dim)}

.status{display:grid; grid-template-columns:140px 1fr; gap:5px; font-family:"IBM Plex Mono",monospace; font-size:11px}
.status span:nth-child(odd){color:var(--ink-faint)}
.status span:nth-child(even){color:var(--ink)}

blockquote{margin:20px 0; padding:14px 22px; border-left:2px solid var(--brass-dim); font-size:21px; font-style:italic; color:var(--ink-dim)}
pre{font:11px/1.7 "IBM Plex Mono",monospace; background:rgba(10,9,7,.75); color:#dcd2ba; padding:20px; overflow:auto; border:1px solid var(--line)}
ul{color:var(--ink-dim)}

.paper-panel a{color:var(--brass); border-bottom:1px solid var(--brass-dim)}
.paper-panel a:hover{color:var(--ink)}

footer{border-top:1px solid var(--line); background:var(--panel); backdrop-filter:blur(6px);
  padding:16px 24px; text-align:center; color:var(--ink-faint); font-size:12.5px; font-family:"IBM Plex Mono",monospace; letter-spacing:.02em}
.secret{color:transparent; user-select:none}
.secret:hover{color:var(--red)}

/* ============================================================
   SIGNAL DECK — audio dock
   ============================================================ */
.signal-deck{
  position:fixed; right:20px; bottom:20px; z-index:50;
  width:260px; font-family:"IBM Plex Mono",monospace;
  background:var(--panel-strong); border:1px solid var(--line-strong);
  color:var(--ink); backdrop-filter:blur(8px);
  transition:width .2s ease;
}
.signal-deck.collapsed{width:46px}
.deck-head{
  display:flex; align-items:center; gap:8px; padding:9px 10px;
  border-bottom:1px solid var(--line); cursor:pointer; user-select:none;
}
.signal-deck.collapsed .deck-head{border-bottom:none}
.deck-dot{width:7px; height:7px; border-radius:50%; background:var(--ink-faint); flex:none}
.deck-dot.live{background:var(--brass); box-shadow:0 0 6px var(--brass)}
.deck-label{font-size:10px; letter-spacing:.14em; color:var(--ink-dim); white-space:nowrap; overflow:hidden}
.signal-deck.collapsed .deck-label,.signal-deck.collapsed .deck-body{display:none}
.deck-toggle{margin-left:auto; color:var(--ink-faint); font-size:12px}

.deck-body{padding:10px 12px 12px}
.deck-track{font-size:11.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:8px; letter-spacing:.02em}
.deck-track.empty{color:var(--ink-faint)}
.deck-controls{display:flex; align-items:center; gap:6px; margin-bottom:9px}
.deck-btn{
  background:transparent; border:1px solid var(--line-strong); color:var(--ink-dim);
  width:28px; height:26px; font-size:12px; cursor:pointer; font-family:inherit;
}
.deck-btn:hover{color:var(--brass); border-color:var(--brass-dim)}
.deck-btn.play{width:34px}
.deck-progress{flex:1; height:26px; display:flex; align-items:center}
.deck-progress input[type=range]{width:100%; accent-color:var(--brass)}
.deck-row{display:flex; align-items:center; gap:8px}
.deck-vol input[type=range]{width:60px; accent-color:var(--brass-dim)}
.deck-load{
  flex:1; text-align:center; font-size:10px; letter-spacing:.08em; padding:6px 0;
  border:1px dashed var(--line-strong); color:var(--ink-faint); cursor:pointer;
}
.deck-load:hover{color:var(--brass); border-color:var(--brass-dim)}
.deck-hint{font-size:9.5px; color:var(--ink-faint); margin-top:8px; line-height:1.5}

@media(max-width:760px){
  .shell{padding:14px 14px 70px}
  .topbar{display:block; padding:12px 14px}
  .topmeta{text-align:left; margin-top:6px}
  .layout{grid-template-columns:1fr}
  .menu{border-right:0}
  .menu a{display:inline-block; margin-right:6px; padding:6px 4px}
  .content{padding:26px 20px 36px}
  .hero{min-height:40vh}
  h1{font-size:42px}
  .grid{grid-template-columns:1fr}
  .signal-deck{right:12px; bottom:12px; width:220px}
}

@media(prefers-reduced-motion:reduce){
  .signal-deck{transition:none}
}