/* ============================================================
   Eidolon — ILC site · shared house style
   Restrained cassette-futurism: serif report body, monospace
   instrument chrome, amber-only, faint phosphor glow on headings.
   url()s resolve relative to this file (site root).
   ============================================================ */

/* --- Self-hosted fonts (offline-safe) --- */
@font-face { font-family:"IBM Plex Mono"; font-weight:600; font-style:normal; font-display:swap; src:url(assets/fonts/plex-mono-600.woff2) format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-weight:400; font-style:normal; font-display:swap; src:url(assets/fonts/source-serif-400.woff2) format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-weight:600; font-style:normal; font-display:swap; src:url(assets/fonts/source-serif-600.woff2) format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-weight:400; font-style:italic; font-display:swap; src:url(assets/fonts/source-serif-400i.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:400; font-style:normal; font-display:swap; src:url(assets/fonts/plex-mono-400.woff2) format("woff2"); }

:root {
  --bg:#1a0f08; --bg-side:#140b05;
  --panel-a:#2e1d0f; --panel-b:#221408; --panel-c:#1d1209;
  --ink:#efe2c6; --ink-soft:#bda886; --ink-faint:#7a6648;
  --amber:#e08a38; --amber-hi:#f4a64a;
  --rule:#6b4a26; --edge:#46321e;
  --code-bg:rgba(255,255,255,0.05); --code-ink:#e0b07a;
  --glow:0 0 16px rgba(244,166,74,0.20);
  --body:"Source Serif 4","Iowan Old Style",Palatino,Georgia,serif;
  --mono:"IBM Plex Mono","SF Mono",Menlo,monospace;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:18px; line-height:1.72; }

/* --- Shell --- */
.shell { display:grid; grid-template-columns:16.5rem minmax(0,1fr); min-height:100vh; }

/* --- Sidebar --- */
.sidebar { position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; background:var(--bg-side); border-right:1px solid var(--edge); padding:1.7rem 1.25rem 2rem; }
.brand { display:flex; align-items:center; gap:0.75rem; margin-bottom:1.8rem; text-decoration:none; }
.brand-logo { width:3.6rem; height:auto; flex:none; display:block; }
.brand-name { display:block; font-family:var(--mono); font-weight:400; font-size:1.02rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--amber-hi); line-height:1; text-shadow:var(--glow); }
.brand-sub { display:block; font-family:var(--mono); font-size:0.6rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--ink-soft); margin-top:0.4rem; }

.sitenav { font-family:var(--mono); }
.sitenav .nav-home, .sitenav .nav-tooling { font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft); display:block; padding:0.4rem 0; transition:color .15s; }
.sitenav a:hover { color:var(--amber-hi); }
.nav-home.active, .nav-tooling.active { color:var(--amber-hi); }
.nav-tooling { margin-top:0.7rem; padding-top:0.7rem; border-top:1px solid var(--edge); }

.nav-group { margin:0.9rem 0 0.4rem; }
.nav-group-label { display:block; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--amber); padding-bottom:0.5rem; margin-bottom:0.5rem; border-bottom:1px solid var(--edge); }
.nav-week { display:block; font-family:var(--mono); font-size:0.74rem; letter-spacing:0.01em; text-transform:uppercase; padding:0.32rem 0; text-decoration:none; color:var(--ink-soft); transition:color .15s; }
a.nav-week:hover { color:var(--amber-hi); }
.nav-week.active { color:var(--amber-hi); }
.nav-week.upcoming { color:var(--ink-faint); cursor:default; }
.nav-sections { counter-reset:s; list-style:none; margin:0.2rem 0 0.7rem; padding:0 0 0 0.15rem; border-left:1px solid var(--edge); }
.nav-sections li { counter-increment:s; }
.nav-sections a { display:block; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.01em; padding:0.2rem 0 0.2rem 0.7rem; color:var(--ink-soft); text-decoration:none; transition:color .15s; }
.nav-sections a::before { content:"[" counter(s,decimal-leading-zero) "] "; color:var(--rule); }
.nav-sections a:hover, .nav-sections a.active { color:var(--amber-hi); }
.nav-sections a.active::before { color:var(--amber); }

/* Active week / tooling = click-to-collapse accordion */
.nav-week.active, .nav-tooling.active { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; cursor:pointer; }
.nav-week.active::after, .nav-tooling.active::after { content:""; flex:none; width:0; height:0; border-top:4px solid currentColor; border-left:3.5px solid transparent; border-right:3.5px solid transparent; opacity:0.7; transition:transform .15s; }
.nav-week.active.collapsed::after, .nav-tooling.active.collapsed::after { transform:rotate(-90deg); }
.nav-week.active.collapsed + .nav-sections, .nav-tooling.active.collapsed + .nav-sections { display:none; }

/* --- Content --- */
.content { background-image:radial-gradient(ellipse 110% 60% at 50% -6%, #2a1a0e 0%, #1a0f08 70%); padding:3rem 3.5rem 4rem; }
.contentwrap { max-width:46rem; }

.masthead { margin-bottom:2.2rem; }
h1 { font-family:var(--mono); font-weight:600; font-size:1.95rem; line-height:1.14; letter-spacing:0.02em; text-transform:uppercase; color:var(--amber-hi); margin:0 0 0.7rem; text-shadow:var(--glow); overflow-wrap:break-word; }
.titlerule { height:2px; border:0; margin:0 0 0.8rem; background:linear-gradient(90deg,var(--amber-hi) 0%, var(--rule) 55%, transparent 100%); }
.meta { font-family:var(--mono); font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); margin:0; line-height:1.65; }

.page { position:relative; overflow:hidden; background:linear-gradient(180deg,var(--panel-a) 0%, var(--panel-b) 22%, var(--panel-c) 100%); border:1px solid var(--edge); border-top:1px solid #5a4026; border-radius:4px; box-shadow:0 1px 0 rgba(255,210,150,.06) inset, 0 20px 54px rgba(0,0,0,.5); padding:2.8rem 3rem 2.6rem; counter-reset:sec; }

/* Stenciled hardware label strip across the top of the panel */
.panel-label { display:flex; justify-content:space-between; align-items:center; gap:1rem; font-family:var(--mono); font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); background:rgba(0,0,0,0.22); border-bottom:1px solid var(--edge); margin:-2.8rem -3rem 2.3rem; padding:0.62rem 3rem; }
.panel-label .code { color:var(--amber); }

h2 { font-family:var(--mono); font-weight:600; font-size:1.18rem; letter-spacing:0.01em; text-transform:uppercase; color:var(--amber); margin:2.5rem 0 0.6rem; scroll-margin-top:1.5rem; counter-increment:sec; text-shadow:0 0 12px rgba(224,138,56,0.16); overflow-wrap:break-word; }
h2::before { font-weight:400; content:"[" counter(sec,decimal-leading-zero) "]\00a0\00a0"; color:var(--amber-hi); text-shadow:none; }
.lede+h2 { margin-top:0.3rem; }
p { margin:0 0 1.1rem; }
.lede { margin-bottom:1.7rem; }
.content a { color:var(--amber-hi); text-decoration:none; border-bottom:1px solid rgba(244,166,74,.32); }
.content a:hover { border-bottom-color:var(--amber-hi); }
code { font-family:var(--mono); font-size:0.82em; color:var(--code-ink); background:var(--code-bg); padding:0.08em 0.36em; border-radius:3px; }
ul.refs { margin:0; padding-left:1.2rem; }
ul.refs li { margin:0 0 0.4rem; }
footer { margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--edge); font-family:var(--mono); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }

/* --- Home --- */
.hero h1 { font-size:2.5rem; letter-spacing:0.14em; }
.hero .meta { font-size:0.78rem; }
.weekgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr)); gap:1rem; margin:1.8rem 0 0; list-style:none; padding:0; }
.weekcard { border:1px solid var(--edge); border-radius:4px; padding:1rem 1.1rem; text-decoration:none; display:block; background:rgba(255,255,255,0.015); transition:border-color .15s; }
.weekcard.live:hover { border-color:var(--amber); }
.weekcard.soon { opacity:0.45; }
.weekcard .wk { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--amber); }
.weekcard .wt { font-family:var(--mono); font-weight:600; font-size:0.96rem; letter-spacing:0.01em; text-transform:uppercase; color:var(--ink); margin-top:0.4rem; display:block; line-height:1.25; }
.content a.weekcard { border-bottom:1px solid var(--edge); }
.content a.weekcard:hover { border-bottom-color:var(--amber); }

/* --- Week page glossary (right rail, linked from body terms) --- */
.weekcols { display:grid; grid-template-columns:minmax(0,1fr) 14.5rem; gap:2.6rem; align-items:start; max-width:64rem; }
.weekcols .contentwrap { max-width:none; }
.glossary { position:sticky; top:2.4rem; align-self:start; }
.glossary-label { font-family:var(--mono); font-size:0.64rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--amber); margin:0 0 0.8rem; padding-bottom:0.5rem; border-bottom:1px solid var(--edge); }
.glossary-group { margin:0 0 1.2rem; }
.glossary-grouplabel { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 0.45rem; }
.glossary dl { margin:0; }
.glossary dt { font-family:var(--mono); font-weight:400; font-size:0.78rem; letter-spacing:0.01em; color:var(--ink); margin-top:0.7rem; scroll-margin-top:1.5rem; }
.glossary dd { font-family:var(--body); font-size:0.8rem; line-height:1.45; color:var(--ink-soft); margin:0.12rem 0 0; }
.glossary dt:target { color:var(--amber-hi); text-shadow:var(--glow); }
.glossary dt:target + dd { color:var(--ink); }
.term { color:inherit; text-decoration:none; border-bottom:1px dotted var(--rule); cursor:pointer; }
.term:hover { border-bottom-color:var(--amber); }
.term code { border-bottom:none; }
@media (max-width:1080px) {
  .weekcols { grid-template-columns:1fr; max-width:46rem; }
  .glossary { position:static; margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--edge); }
}

/* --- Responsive --- */
@media (max-width:860px) {
  .shell { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; border-right:0; border-bottom:1px solid var(--edge); }
  .content { padding:2rem 1.4rem; }
  .page { padding:2.2rem 1.5rem; }
  .panel-label { margin:-2.2rem -1.5rem 1.8rem; padding:0.55rem 1.5rem; }
  h1 { font-size:1.9rem; } .hero h1 { font-size:2.3rem; }
  body { font-size:17px; }
}

/* --- Mobile build (one source; app.js adds html.is-mobile via matchMedia ≤760px) --- */
.mobilebar { display:none; }
.navscrim { display:none; }
html.is-mobile .mobilebar { display:flex; align-items:center; gap:0.8rem; position:sticky; top:0; z-index:50; background:var(--bg-side); border-bottom:1px solid var(--edge); padding:0.6rem 1rem; }
html.is-mobile .menubtn { font-family:var(--mono); font-size:1.2rem; line-height:1; background:none; border:1px solid var(--edge); color:var(--amber-hi); border-radius:4px; padding:0.2rem 0.6rem; cursor:pointer; }
html.is-mobile .mobilebar-title { font-family:var(--mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); }
html.is-mobile .shell { display:block; }
html.is-mobile .sidebar { position:fixed; top:0; left:0; height:100vh; width:18rem; max-width:86vw; transform:translateX(-100%); transition:transform .22s ease; z-index:60; box-shadow:0 0 44px rgba(0,0,0,.6); padding:1.5rem 1.3rem 2rem; }
html.is-mobile.nav-open .sidebar { transform:translateX(0); }
html.is-mobile.nav-open .navscrim { display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:55; }
html.is-mobile .content { padding:1.6rem 1.2rem 3rem; }
html.is-mobile .page { padding:2rem 1.3rem; }
html.is-mobile .panel-label { margin:-2rem -1.3rem 1.6rem; padding:0.55rem 1.3rem; }
html.is-mobile .weekcols, html.is-mobile .contentwrap { display:block; max-width:none; }
html.is-mobile .glossary { position:static; margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--edge); }
html.is-mobile { overflow-x:hidden; }
html.is-mobile h1 { font-size:1.3rem; }
html.is-mobile h2 { font-size:1.02rem; }
html.is-mobile .meta { font-size:0.66rem; }
html.is-mobile .weekgrid { grid-template-columns:1fr; gap:0.7rem; }
html.is-mobile .content { max-width:100%; overflow-x:hidden; }
html.is-mobile .contentwrap, html.is-mobile .weekcols, html.is-mobile .page,
html.is-mobile .masthead, html.is-mobile .glossary { min-width:0; max-width:100%; }
html.is-mobile .nav-home, html.is-mobile .nav-tooling { padding:0.62rem 0; font-size:0.84rem; }
html.is-mobile .nav-week { padding:0.55rem 0; font-size:0.82rem; }
html.is-mobile .nav-sections a { padding:0.42rem 0 0.42rem 0.7rem; font-size:0.8rem; }

/* --- Print (ink-friendly) --- */
@media print {
  .sidebar, .mobilebar, .navscrim { display:none; }
  .shell { display:block; }
  body { background:#fff; color:#2a2018; font-size:11.5pt; }
  .content { background:#fff; padding:0; }
  .contentwrap, .weekcols { max-width:none; display:block; }
  .page { box-shadow:none; border:none; background:#fff; padding:0; overflow:visible; }
  .panel-label { background:none; color:#6b5a40; margin:0 0 1.2rem; padding:0 0 0.5rem; border-bottom:1px solid #ccc; }
  .panel-label .code { color:#8a5018; }
  h1 { color:#8a5018; text-shadow:none; } h2 { color:#9a6018; text-shadow:none; } h2::before { color:#b07c2a; }
  .meta, footer { color:#6b5a40; }
  .titlerule { background:#b07c2a; }
  code { color:#7a4a10; background:#f3ece0; }
  .content a { color:#2a2018; border-bottom:none; }
  .glossary { position:static; }
}