/* Machine Codex -- source browser theme (Issue 10-052). */
:root{
  --ink:#0b0c10; --ink-2:#13151f; --panel:#0e1018;
  --paper:#e9e4d8; --paper-dim:#9b9484; --paper-faint:#6a6457;
  --gold:#d8b14a; --gold-soft:#c6b257; --blue:#74a0e6; --teal:#5f9c92; --coral:#e08363;
  --rule:#24262f; --rule-soft:#191b22;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:'JetBrains Mono',ui-monospace,'Hack',Consolas,monospace;
  font-size:13.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(820px 460px at 8% -12%, rgba(216,177,74,.08), transparent 60%),
    radial-gradient(680px 480px at 104% -6%, rgba(95,156,146,.06), transparent 55%);
  background-attachment:fixed;
}
/* fine grain overlay for paper-like depth */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:var(--blue); text-decoration:none; transition:color .14s ease;}
a:hover{color:var(--gold);}
#wrap{display:flex; align-items:flex-start; min-height:100vh;}

/* ---- sidebar: a book's table of contents ---- */
#side{
  width:308px; min-width:308px; height:100vh; position:sticky; top:0; overflow:auto;
  padding:1.6rem 1.25rem 3rem; border-right:1px solid var(--rule);
  background:linear-gradient(176deg, var(--ink-2), var(--ink) 70%);
  font-size:12.5px; animation:sideIn .55s cubic-bezier(.2,.8,.2,1) both;
}
#side .home{display:block; margin-bottom:1.1rem;}
#side .brand{
  display:block; font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.5rem;
  color:var(--gold); letter-spacing:.005em; line-height:1.05;
}
#side .tagline{
  display:block; margin-top:.4rem; font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--paper-faint);
}
#side .home:hover .brand{color:var(--gold);}
#side .tree{border-top:1px solid var(--rule); padding-top:.9rem;}
#side details{margin:.05rem 0; border-left:1px solid var(--rule-soft); padding-left:.6rem;}
#side summary{
  cursor:pointer; list-style:none; padding:1.5px 0; color:var(--teal);
  font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:.96rem;
}
#side summary::-webkit-details-marker{display:none;}
#side summary::before{content:"\203A\00a0"; color:var(--rule); font-style:normal;}
#side details[open]>summary::before{content:"\02C5\00a0"; color:var(--gold-soft);}
#side summary:hover{color:var(--gold);}
#side a{
  display:block; padding:1.5px 0 1.5px .35rem; color:var(--paper-dim);
  border-left:2px solid transparent; transition:color .12s ease, border-color .12s ease, padding .12s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#side a:hover{color:var(--gold); border-left-color:var(--gold); padding-left:.65rem;}
/* Feature F: a saved page links OUT to the real article (a new tab), not to a
   hosted copy. The arrow tells the reader this link leaves the site. */
#side a.ext::after{content:"\00a0\2197"; color:var(--paper-faint); font-size:.85em;}
#side a.ext:hover::after{color:var(--gold);}
#side .cur{
  display:block; padding:1.5px .4rem; margin-left:.1rem; color:var(--ink);
  background:linear-gradient(90deg,var(--gold),var(--gold-soft)); border-radius:3px; font-weight:700;
}
#side .cur::before{content:"\25A0\00a0"; opacity:.7;}

/* ---- main content ---- */
#main{flex:1; min-width:0; padding:2.3rem 2.9rem 7rem; overflow-x:auto; animation:mainIn .65s cubic-bezier(.2,.8,.2,1) both;}
#main h1{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:1.05rem;
  color:var(--paper); margin:0 0 .15rem; word-break:break-all; letter-spacing:-.01em;
}
#main h1 .dir{color:var(--paper-faint); font-weight:400;}
#main .meta{color:var(--paper-dim); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; margin:.1rem 0 1rem;}
#main .rule{height:1px; background:linear-gradient(90deg,var(--gold) 0,var(--gold) 64px,var(--rule) 64px,transparent); margin:0 0 1.6rem;}

/* code */
/* a div, not a <pre>, so the fold <details> nest validly. Each line is a .cl
   block that carries white-space:pre to keep its own indentation. */
.code{margin:0; font-size:13px; tab-size:4; line-height:1.6; display:block; overflow-x:auto;}
.cl{white-space:pre; display:block;}
/* an issue number inside a comment, linked to its page (Issue 10-055, Feature D) */
.issue-ref{color:var(--gold-soft); border-bottom:1px dotted var(--gold-soft); font-style:normal;}
.issue-ref:hover{color:var(--gold); border-bottom-color:var(--gold);}
.ln{
  color:var(--rule); user-select:none; display:inline-block;
  min-width:3.4rem; padding-right:1.4rem; text-align:right; font-variant-numeric:tabular-nums;
}
.ln:target{color:var(--gold);}
.c-cm{color:var(--teal); font-style:italic;}
.c-st{color:var(--gold-soft);}
.c-kw{color:var(--blue);}
.c-nu{color:var(--coral);}
img{max-width:100%; height:auto; border:1px solid var(--rule); border-radius:2px;}

/* ---- back-to-site link (Issue 10-055) ---- */
#side .site-link{
  display:block; margin:-.4rem 0 1rem; padding:.2rem 0; color:var(--paper-dim);
  font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:.92rem;
}
#side .site-link:hover{color:var(--gold);}
/* output/ is not a real tree branch (it is git-ignored, ~23k pages); it is a
   single deep link to the live site's poem index, where every page is reachable. */
#side .output-link{
  display:block; margin:.9rem 0 0; padding:.5rem .6rem; color:var(--paper-dim);
  border:1px dashed var(--rule); border-radius:3px; font-size:.82rem; letter-spacing:.02em;
}
#side .output-link:hover{color:var(--gold); border-color:var(--gold-soft);}
/* the "download everything" archive (site + source): a solid call-to-action box,
   a touch more prominent than the dashed output/ link it sits beside. */
#side .download-link{
  display:block; margin:.55rem 0 0; padding:.5rem .6rem; color:var(--paper-dim);
  border:1px solid var(--gold-soft); border-radius:3px; font-size:.82rem; letter-spacing:.02em;
}
#side .download-link:hover{color:var(--gold); border-color:var(--gold);}

/* ---- code folds (Issue 10-055): vimfold regions as no-JS <details> ---- */
/* Inside the code <pre>: the marker line is the clickable summary; its body
   lines collapse under it. Default open so the page reads straight through. */
.fold{display:block;}
.fold>summary{cursor:pointer; list-style:none;}
.fold>summary::-webkit-details-marker{display:none;}
.fold>summary .ln{position:relative;}
/* a small triangle in the gutter margin so it reads as a fold handle */
.fold>summary::before{content:"\25BE"; color:var(--gold-soft); margin-right:.25rem;}
.fold:not([open])>summary::before{content:"\25B8"; color:var(--paper-faint);}
.fold:not([open])>summary{color:var(--paper-dim);}

/* ---- rendered markdown (Issue 10-055) ---- */
.md{max-width:80ch; line-height:1.72;}
.md h1,.md h2,.md h3,.md h4{font-family:'Fraunces',Georgia,serif; color:var(--gold); line-height:1.2; margin:1.7rem 0 .6rem;}
.md h1{font-size:1.9rem;} .md h2{font-size:1.45rem;} .md h3{font-size:1.18rem;} .md h4{font-size:1rem;}
.md p{margin:0 0 1rem;}
.md ul,.md ol{margin:0 0 1rem 1.5rem;}
.md li{margin:.25rem 0;}
.md code{font-family:'JetBrains Mono',monospace; background:var(--ink-2); padding:.1rem .32rem; border-radius:3px; color:var(--gold-soft); font-size:.92em;}
.md pre{background:var(--ink-2); padding:1rem 1.1rem; border-radius:4px; overflow-x:auto; margin:0 0 1rem; border:1px solid var(--rule);}
.md pre code{background:none; padding:0; color:var(--paper); font-size:13px;}
.md blockquote{border-left:3px solid var(--gold-soft); margin:0 0 1rem; padding:.2rem 0 .2rem 1rem; color:var(--paper-dim); font-style:italic;}
.md table{border-collapse:collapse; margin:0 0 1.2rem;}
.md th,.md td{border:1px solid var(--rule); padding:.4rem .85rem; text-align:left; vertical-align:top;}
.md th{background:var(--ink-2); color:var(--gold-soft); font-weight:600;}
.md hr{border:0; border-top:1px solid var(--rule); margin:1.7rem 0;}
.md a{color:var(--blue);} .md a:hover{color:var(--gold);}

/* welcome / index */
.welcome{max-width:62ch;}
.welcome h1{
  font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:2.7rem;
  color:var(--gold); margin:.2rem 0 .2rem; line-height:1.04; letter-spacing:.005em;
}
.welcome .kicker{font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--paper-faint); margin:0 0 .4rem;}
.welcome p{font-family:'Fraunces',Georgia,serif; font-size:1.18rem; line-height:1.7; color:var(--paper); margin:0 0 1.1rem;}
.welcome .mono{font-family:'JetBrains Mono',monospace; font-size:.82rem; line-height:1.7; color:var(--paper-dim);}
.welcome .mono b{color:var(--gold-soft); font-weight:500;}
.welcome .div{height:1px; background:linear-gradient(90deg,var(--gold),transparent); margin:1.6rem 0;}

@keyframes sideIn{from{opacity:0; transform:translateX(-14px);} to{opacity:1; transform:none;}}
@keyframes mainIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
@media(prefers-reduced-motion:reduce){*{animation:none !important;}}
@media(max-width:760px){
  #wrap{flex-direction:column;}
  #side{width:100%; min-width:0; height:auto; position:static; border-right:0; border-bottom:1px solid var(--rule);}
  #main{padding:1.6rem 1.15rem 4rem;}
  .welcome h1{font-size:2rem;}
}