/* ======================================================================
   the Zone — design tokens & base styles
   Single source of visual truth. See notes/spec.org Part 0 Sub-spec B.
   Dark "the Zone" is the launch theme; light "Sepia" arrives in Stage 4.
   ====================================================================== */

/* ---- Fonts (self-hosted, subset woff2) ------------------------------- */
@font-face {
  font-family: "JuliaMono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/fonts/JuliaMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "JuliaMono"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("/fonts/JuliaMono-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "JuliaMono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/fonts/JuliaMono-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "JuliaMono"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/fonts/JuliaMono-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/fonts/EBGaramond-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("/fonts/EBGaramond-Italic.woff2") format("woff2");
}

/* ---- Tokens ---------------------------------------------------------- */
:root {
  /* color — dark "the Zone" (Q4.2) */
  --bg:        #0e1110;
  --bg-alt:    #161a18;
  --fg:        #c8c2b6;
  --fg-muted:  #7c8079;
  --amber:     #c8923d;
  --rust:      #a44f3e;
  --teal:      #4e8d86;
  --string:    #8a9b6e;

  /* links (Q4.4) */
  --link:         var(--teal);
  --link-hover:   var(--amber);
  --link-visited: var(--rust);

  /* type (Q5.4) */
  --font-mono:  "JuliaMono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --fs-base: 18px;
  --lh-base: 1.6;
  --measure: 68ch;

  /* modular scale 1.25 (Q5.7) */
  --fs-h1: 2.441rem;
  --fs-h2: 1.953rem;
  --fs-h3: 1.563rem;
  --fs-h4: 1.25rem;

  --fw-light: 300;  /* JuliaMono Light not shipped; falls back to Regular */
  --fw-ui:    500;  /* Medium, for chrome */

  --space: 1.5rem;
}

/* ---- Reset-ish ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; font-size: var(--fs-base); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  line-height: var(--lh-base);
  /* ligatures OFF everywhere (Q5.5) */
  font-feature-settings: "liga" 0, "calt" 0;
  font-variant-ligatures: none;
}

/* ---- Layout ---------------------------------------------------------- */
#content, .page {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space) 1.25rem;
  flex: 1 0 auto;
}

/* ---- Headings (amber, JuliaMono) ------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--amber);
  font-family: var(--font-mono);
  line-height: 1.25;
  font-weight: 700;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h1.title { font-weight: var(--fw-light); letter-spacing: .02em; }

/* ---- Links ----------------------------------------------------------- */
a            { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover      { color: var(--link-hover); border-bottom-color: currentColor; }
a:visited    { color: var(--link-visited); }
a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---- Code ------------------------------------------------------------ */
code, kbd, samp { font-family: var(--font-mono); }
:not(pre) > code {
  background: var(--bg-alt);
  padding: .1em .35em;
  border-radius: 3px;
  color: var(--fg);
}
pre, pre.src {
  background: var(--bg-alt);
  border: 1px solid #23282625;
  border-radius: 4px;
  padding: .9rem 1rem;
  overflow: auto;
  line-height: 1.45;
}

/* ---- "the Zone" code theme (htmlize 'css output, Sub-spec A) --------- */
/* htmlize emits .org-* classes; map them to the Zone palette.            */
pre.src .org-keyword            { color: var(--amber); }
pre.src .org-function-name      { color: var(--teal); }
pre.src .org-variable-name      { color: var(--fg); }
pre.src .org-string             { color: var(--string); }
pre.src .org-comment,
pre.src .org-comment-delimiter  { color: var(--fg-muted); font-style: italic; }
pre.src .org-constant           { color: var(--rust); }
pre.src .org-type               { color: #b9863d; }
pre.src .org-builtin            { color: #6f9d8f; }
pre.src .org-preprocessor       { color: var(--rust); }
pre.src .org-operator           { color: var(--fg-muted); }
pre.src .org-doc                { color: var(--string); font-style: italic; }
pre.src .org-warning            { color: var(--rust); font-weight: 700; }

/* Language label, restyled from the legacy pre.src-* mechanism (Q8.6) */
pre.src { position: relative; }
pre.src::before {
  position: absolute; top: 0; right: .5rem;
  color: var(--fg-muted); font-size: .7rem; opacity: 0;
  transition: opacity .15s;
}
pre.src:hover::before { opacity: 1; }
pre.src-rust::before   { content: "rust"; }
pre.src-julia::before  { content: "julia"; }
pre.src-python::before { content: "python"; }
pre.src-sh::before, pre.src-bash::before, pre.src-shell::before { content: "shell"; }

/* ---- Prose: serif for blog post bodies ONLY (Q5.8) ------------------- */
/* Blog post content is <main class="content post-body">; serif applies to */
/* running prose only — never code, headings, chrome, or metadata.         */
main.post-body p, main.post-body li {
  font-family: var(--font-serif);
  font-size: 1.18rem;
}
main.post-body code, main.post-body pre,
main.post-body .post-meta { font-family: var(--font-mono); }

/* ---- Blog post metadata / epigraph (Q8.4) ---------------------------- */
.post-meta { color: var(--fg-muted); font-size: .8rem; }
.post-meta .tag { color: var(--teal); }
.post-meta .rt  { color: var(--fg-muted); }
.epigraph {
  color: var(--fg-muted);
  font-family: var(--font-serif);
  font-style: italic;
  border-left: 2px solid var(--rust);
  padding-left: 1rem;
  margin: 1.5rem 0;
}

/* ---- Prev/next + reply (Q8.6/8.7) ------------------------------------ */
.post-nav {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 3rem 0 1rem; font-size: .85rem;
}
.post-nav .next { margin-left: auto; text-align: right; }
.reply { color: var(--fg-muted); font-size: .85rem; }

/* ---- Blog index list ------------------------------------------------- */
.post-list, #content ul { line-height: 1.9; }

/* ---- Breadcrumb nav (Q10.1) ------------------------------------------ */
.nav {
  max-width: var(--measure);
  margin: 0 auto;
  padding: .9rem 1.25rem;
  font-size: .85rem;
  color: var(--fg-muted);
  font-weight: var(--fw-ui);
}
.nav-home { color: var(--fg); }
.nav-sep  { color: var(--fg-muted); }
.nav-here { color: var(--amber); }

/* ---- Modeline footer — signature chrome (Q10.2) ---------------------- */
.modeline {
  flex-shrink: 0;
  background: var(--bg-alt);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-weight: var(--fw-ui);
  font-size: .8rem;
  padding: .4rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  border-top: 1px solid #23282680;
}
.modeline .ml-lead  { color: var(--teal); }
.modeline .ml-buf   { color: var(--fg); }
.modeline .ml-theme { color: var(--amber); }
.modeline .ml-date  { margin-left: auto; }
@media (max-width: 32rem) {
  .modeline .ml-mode, .modeline .ml-lead { display: none; }
  .modeline .ml-date { margin-left: 0; }
}

/* ---- Landing portal (Q9.3) ------------------------------------------- */
.epigraph-zone {
  color: var(--fg-muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  margin: 1.5rem 0 2.5rem;
}
.portal { display: flex; flex-direction: column; gap: .15rem; }
.portal a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem;
  padding: .55rem .25rem;
  border-bottom: 1px solid #23282650;
}
.portal a:hover { background: var(--bg-alt); border-bottom-color: transparent; }
.portal .g { color: var(--amber); min-width: 7ch; }
.portal a:hover .g { color: var(--link-hover); }
.portal .d { color: var(--fg-muted); font-size: .85rem; }

/* ---- About: portrait, email, contacts -------------------------------- */
.portrait {
  float: right; margin: 0 0 1rem 1.5rem;
  max-width: 40%; height: auto;
  border: 1px solid #23282680;
}
.email { clear: both; }
.email .addr { word-break: break-all; }
@media (max-width: 32rem) { .portrait { float: none; display: block; margin: 0 0 1rem; } }

/* ---- Accessibility: skip link + focus (Q13.1) ------------------------ */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--amber); color: var(--bg);
  padding: .5rem .75rem; z-index: 100;
}
.skip-link:focus { left: .5rem; top: .5rem; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---- Minibuffer + help overlay (Q10.3/10.4, JS-only) ----------------- */
.minibuffer, .help-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.5);
  display: flex; justify-content: center; align-items: flex-start;
}
.help-overlay { align-items: center; }
.mb-box, .help-box {
  background: var(--bg-alt); color: var(--fg);
  border: 1px solid var(--amber);
  margin-top: 18vh; padding: 1rem; width: min(90%, 32rem);
  font-family: var(--font-mono);
}
.mb-input {
  width: 100%; box-sizing: border-box;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--fg-muted); padding: .5rem;
  font-family: var(--font-mono); font-size: 1rem;
}
.mb-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.mb-list li { padding: .2rem 0; }
.help-box h2 { margin-top: 0; }
.help-box dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; }
.help-box dt { color: var(--amber); }
.help-hint { color: var(--fg-muted); font-size: .8rem; margin-bottom: 0; }

/* ---- Film-grain overlay (~2%, Q4.5) ---------------------------------- */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  * { animation: none !important; transition: none !important; }
}

/* ---- Light "Sepia" theme (Q4.3) -------------------------------------- */
/* Stalker's framing scenes: aged paper, darkened accents for AA on light. */
:root[data-theme="sepia"] {
  --bg:        #e8e0cf;
  --bg-alt:    #ddd3bd;
  --fg:        #2a2622;
  --fg-muted:  #6b6356;
  --amber:     #8a5a16;
  --rust:      #8c3a2b;
  --teal:      #2f6660;
  --string:    #5c6b3a;
}
:root[data-theme="sepia"] { color-scheme: light; }
/* Honor OS preference when the user has not chosen explicitly. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="sepia"]) {
    --bg:#e8e0cf; --bg-alt:#ddd3bd; --fg:#2a2622; --fg-muted:#6b6356;
    --amber:#8a5a16; --rust:#8c3a2b; --teal:#2f6660; --string:#5c6b3a;
    color-scheme: light;
  }
}

/* ---- Theme toggle button --------------------------------------------- */
.theme-toggle {
  background: none; border: 1px solid var(--fg-muted); color: var(--fg-muted);
  font-family: var(--font-mono); font-size: .75rem; cursor: pointer;
  padding: .1rem .5rem; border-radius: 3px; margin-left: 1rem;
}
.theme-toggle:hover { color: var(--amber); border-color: var(--amber); }
/* Hidden until JS enables it (progressive enhancement). */
.no-js .theme-toggle { display: none; }

/* ---- Print (Q13.4) --------------------------------------------------- */
@media print {
  :root { --bg:#fff; --fg:#000; --fg-muted:#333; }
  body { background:#fff; color:#000; }
  body::after { display:none; }
  .nav, .modeline, .skip-link { display:none !important; }
  a { color:#000; border:0; }
}