/* ============================================================
   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:1.125rem; 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, .sitenav .nav-design { 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, .nav-design.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.64rem; 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.45rem; 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; }
.page h3 { font-family:var(--mono); font-weight:400; font-size:0.9rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); margin:2rem 0 0.3rem; scroll-margin-top:1.5rem; }
.page h3 + figure.evidence { margin-top:0.4rem; }
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.88em; color:var(--code-ink); background:var(--code-bg); padding:0.08em 0.36em; border-radius:3px; } /* 0.88em so mono optically matches the serif body (mono reads ~10% large at equal em) */
strong, b { font-weight:600; } /* map bold to the real 600 face; no 700 woff2 exists, avoid faux-bold */
.lightbox { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:3vh 3vw; background:rgba(10,6,3,0.92); cursor:zoom-out; }
.lightbox.open { display:flex; }
.lightbox img { max-width:94vw; max-height:94vh; width:auto; height:auto; border:1px solid rgba(244,166,74,0.25); border-radius:5px; box-shadow:0 0 44px rgba(0,0,0,0.6); }
ul.refs { margin:0; padding-left:1.2rem; }
ul.refs li { margin:0 0 0.4rem; }

/* --- Decisions table (design rationale; shared) --- */
.dtable { width:100%; border-collapse:collapse; margin:1.4rem 0 1.6rem; }
.dtable th { text-align:left; font-family:var(--mono); font-weight:600; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber); padding:0 1rem 0.5rem 0; border-bottom:1px solid var(--rule); vertical-align:bottom; }
.dtable td { padding:0.6rem 1rem 0.6rem 0; border-bottom:1px solid var(--edge); vertical-align:top; line-height:1.5; }
.dtable td:first-child { color:var(--ink); font-weight:600; width:45%; }
.dtable td:last-child { color:var(--ink-soft); }
.dtable tr:last-child td { border-bottom:none; }

/* --- Signal-chain diagram (design rationale) --- */
.chainfig { margin:1.8rem 0 2rem; }
.chainflow { list-style:none; margin:0; padding:0; }
.chainflow li { position:relative; padding:0.5rem 0.9rem; margin:0 0 0.55rem; border:1px solid var(--edge); border-left-width:3px; border-radius:4px; background:rgba(255,255,255,0.015); }
.chainflow li.color { border-left-color:var(--amber); box-shadow:0 0 14px rgba(224,138,56,0.09) inset; }
.chainflow li.clean { border-left-color:var(--rule); }
.chainflow li.bus { border-left-color:var(--amber); border-style:dashed; background:rgba(224,138,56,0.05); margin-top:0.9rem; }
.chainflow li:not(:last-child)::after { content:""; position:absolute; left:1.05rem; bottom:-0.58rem; width:1px; height:0.55rem; background:var(--rule); }
.chainflow .st-name { display:block; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.02em; text-transform:uppercase; color:var(--ink); }
.chainflow li.color .st-name { color:var(--amber-hi); }
.chainflow .st-note { display:block; font-family:var(--body); font-size:0.82rem; line-height:1.4; color:var(--ink-soft); margin-top:0.25rem; }
.chainflow-legend { display:flex; flex-wrap:wrap; gap:1.4rem; margin:0.7rem 0 0; font-family:var(--mono); font-size:0.64rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); }
.chainflow-legend span { display:inline-flex; align-items:center; gap:0.45rem; }
.chainflow-legend .sw { width:0.9rem; height:0.9rem; border-radius:2px; border:1px solid var(--edge); border-left:3px solid var(--rule); }
.chainflow-legend .sw.color { border-left-color:var(--amber); }
.chainfig figcaption { font-family:var(--mono); font-size:0.72rem; letter-spacing:0.03em; line-height:1.5; color:var(--ink-soft); margin-top:0.8rem; }

footer { margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--edge); font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }

/* --- Tight list + evidence figure (weekly reports; shared so every week matches) --- */
.page ul.tight { margin:0.7rem 0 0.95rem 1.15rem; padding:0; }
.page ul.tight li { margin:0.3rem 0; }
figure.evidence { margin:1.6rem 0; }
figure.evidence img { display:block; width:100%; height:auto; border:1px solid rgba(244,166,74,0.18); border-radius:5px; }
figure.evidence audio { width:100%; margin-top:0.2rem; }

/* --- Audio player (app.js swaps native controls for this; native remains without JS) --- */
.eplayer { display:flex; align-items:center; gap:0.85rem; margin-top:0.2rem; padding:0.55rem 0.85rem; background:rgba(0,0,0,0.22); border:1px solid var(--edge); border-left:3px solid var(--rule); border-radius:4px; font-family:var(--mono); transition:border-color .15s, box-shadow .15s; }
.eplayer.playing { border-left-color:var(--amber); box-shadow:0 0 14px rgba(224,138,56,0.09) inset; }
.eplayer audio { display:none; }
.eplayer-btn { flex:none; position:relative; width:2.1rem; height:2.1rem; padding:0; border:1px solid var(--rule); border-radius:4px; background:transparent; color:var(--amber-hi); cursor:pointer; transition:border-color .15s, background .15s; }
.eplayer-btn:hover, .eplayer-btn:focus-visible { border-color:var(--amber); background:rgba(224,138,56,0.08); outline:none; }
.eplayer-btn::before { content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%); border-left:0.62rem solid currentColor; border-top:0.38rem solid transparent; border-bottom:0.38rem solid transparent; }
.eplayer.playing .eplayer-btn::before { left:50%; width:0.62rem; height:0.72rem; border:0; background:linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66% 100%); }
.eplayer-time { flex:none; font-size:0.7rem; letter-spacing:0.04em; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
.eplayer-bar { --pct:0%; flex:1 1 auto; min-width:0; height:1.4rem; margin:0; background:transparent; -webkit-appearance:none; appearance:none; cursor:pointer; }
.eplayer-bar:focus-visible { outline:1px dotted var(--amber); outline-offset:2px; }
.eplayer-bar::-webkit-slider-runnable-track { height:3px; border-radius:2px; background:linear-gradient(90deg, var(--amber) var(--pct), var(--edge) var(--pct)); }
.eplayer-bar::-moz-range-track { height:3px; border-radius:2px; background:var(--edge); }
.eplayer-bar::-moz-range-progress { height:3px; border-radius:2px; background:var(--amber); }
.eplayer-bar::-webkit-slider-thumb { -webkit-appearance:none; width:0.7rem; height:0.7rem; margin-top:-0.25rem; border:0; border-radius:50%; background:var(--amber-hi); box-shadow:0 0 8px rgba(244,166,74,0.45); }
.eplayer-bar::-moz-range-thumb { width:0.7rem; height:0.7rem; border:0; border-radius:50%; background:var(--amber-hi); box-shadow:0 0 8px rgba(244,166,74,0.45); }
.eplayer-mute { flex:none; width:1.6rem; height:1.6rem; padding:0.15rem; border:0; background:transparent; color:var(--ink-soft); cursor:pointer; transition:color .15s; }
.eplayer-mute:hover, .eplayer-mute:focus-visible { color:var(--amber-hi); outline:none; }
.eplayer-mute svg { display:block; width:100%; height:100%; }
.eplayer-mute .eplayer-x { display:none; }
.eplayer.muted .eplayer-mute .eplayer-waves { display:none; }
.eplayer.muted .eplayer-mute .eplayer-x { display:inline; }
.eplayer-bar.eplayer-vol { flex:none; width:4.6rem; }
html.is-mobile .eplayer-btn { width:2.6rem; height:2.6rem; }
html.is-mobile .eplayer-bar.eplayer-vol { display:none; } /* phones set volume in hardware; keep the mute toggle */

/* Section map: the row under the playhead. Distinct from .color (which marks the
   capability sections by their left border): a full amber outline and glow. */
.sectionmap .chainflow li { transition:border-color .2s, box-shadow .2s, background .2s; }
.sectionmap .chainflow li.now { border-color:var(--amber); background:rgba(224,138,56,0.10); box-shadow:0 0 0 1px var(--amber) inset, 0 0 18px rgba(244,166,74,0.16); }
.sectionmap .chainflow li.now .st-time, .sectionmap .chainflow li.now .st-name { color:var(--amber-hi); text-shadow:var(--glow); }
@media print { .eplayer { display:none; } .sectionmap .chainflow li.now { box-shadow:none; background:#fff; } }
figure.evidence figcaption { font-family:var(--mono); font-size:0.72rem; letter-spacing:0.03em; color:var(--ink-soft); margin-top:0.5rem; }

/* --- Section map: .chainflow reused as a TIME axis (Week 8 musical structure) ---
   The signal chain and a piece's section list are the same shape: an ordered
   sequence with a name and a note per item, indexed by signal order in one case
   and by elapsed time in the other. Everything below inherits from .chainflow —
   the connector spine, the clean/color left-border semantics, the legend swatches.
   The spine at left:1.05rem lands under the time column, which is correct here:
   on a timeline the times ARE the sequence. */
.sectionmap .chainflow li { display:grid; grid-template-columns:3.9rem minmax(0,1fr); column-gap:0.9rem; border-left-width:4.25px; }
.sectionmap .chainflow li.color { border-left-color:var(--amber-hi); box-shadow:0 0 18px rgba(224,138,56,0.14) inset; }
.sectionmap .st-time { grid-row:1 / span 2; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.04em; color:var(--amber); padding-top:0.1rem; }
.sectionmap .ctl { color:var(--amber); }
.sectionmap .ctl-note { font-family:var(--mono); font-size:0.64rem; letter-spacing:0.03em; line-height:1.6; color:var(--ink-faint); margin:0.55rem 0 0; }
@media (max-width:40rem) { .sectionmap .chainflow li { grid-template-columns:minmax(0,1fr); } .sectionmap .st-time { grid-row:auto; margin-bottom:0.15rem; } }
/* Week 8 piece heading: a rule above separates the works; title in amber, description before the player. */
.page h3.piece { font-size:1rem; color:var(--amber-hi); text-shadow:0 0 12px rgba(224,138,56,0.16); border-top:1px solid var(--edge); padding-top:1.6rem; margin:2.8rem 0 0.5rem; }
.page p.piece-desc { margin:0 0 0.9rem; }
.page p.piece-desc + figure.evidence { margin-top:0.6rem; }
@media print { .page h3.piece { color:#8a5018; text-shadow:none; border-top-color:#ccc; } }

/* --- 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.6rem; 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 { align-self:start; } /* not pinned — it scrolls with the page; a long glossary (17 terms) was awkward when sticky */
.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.78rem; 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, .content a code { color:var(--amber-hi); } /* every code token wears the chip; linked code keeps it and takes brighter amber as the only link cue */
.term:has(code), .content a:has(code) { border-bottom:none; } /* drop the link underline when it wraps a code chip, so the chip isn't double-marked */
@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:1.0625rem; }
}

/* --- 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.15rem; }
html.is-mobile .meta { font-size:0.66rem; }
html.is-mobile footer { 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; }
  .chainflow li { background:#fff; box-shadow:none; border-color:#ccc; border-left-color:#b07c2a; }
  .chainflow .st-name { color:#2a2018; } .chainflow li.color .st-name { color:#8a5018; }
  .chainflow .st-note, .chainfig figcaption, .chainflow-legend { color:#4a3f30; }
  .content a { color:#2a2018; border-bottom:none; }
  .glossary { position:static; }
}