/* ═══════════════════════════════════════════════════════════
   THE READING ROOM — shared site stylesheet (as-built charcoal)
   Link from any The Reading Room page: <link rel="stylesheet" href="readingroom/site.css">
   Pages live at project root, so the href is "readingroom/site.css".
   ═══════════════════════════════════════════════════════════ */
:root{
  --midnight:#101216;     /* page body */
  --brown:#1b110e;        /* warm footer band */
  --surface:#181b20;      /* raised panels */
  --surface-2:#1f2329;
  --ember:#cf5a32;        /* accent fill */
  --ember-text:#de7449;   /* small accents / underlines */
  --offwhite:#f2efe7;     /* ink */
  --grey:#8b949e;         /* secondary ink */
  --hairline:#22262d;     /* 1px rules */
  --r:4px;
  --mx-m:16px; --mx-d:64px;
  --gap:80px; --gutter:24px;
  --col:720px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--midnight);color:var(--offwhite);font-family:'Literata',Georgia,serif;
  min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit;text-decoration:none}
.mono{font-family:'JetBrains Mono',monospace;font-size:12px;line-height:16px;letter-spacing:.05em;font-weight:500}
.fr{font-family:'Fraunces',Georgia,serif}
.crimson{font-family:'Crimson Pro',Georgia,serif;font-size:18px;line-height:1.6}
.muted{color:var(--grey)}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px;border-radius:var(--r)}
::selection{background:rgba(207,90,50,.25);color:var(--offwhite)}

.eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember);display:inline-flex;align-items:center}
.eyebrow .sq{width:8px;height:8px;background:var(--ember);display:inline-block;margin-right:8px}
.rule{border:0;border-top:1px solid var(--hairline)}

/* ── NAV ── */
.lb-nav{position:fixed;top:0;left:0;width:100%;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:8px var(--mx-m);background:var(--midnight);border-bottom:1px solid var(--hairline);min-height:64px}
.lb-nav .brand{font-family:'Fraunces',serif;font-size:24px;font-weight:600;letter-spacing:-.01em;transition:opacity .2s}
.lb-nav .brand:hover{opacity:.8}
.nav-links{display:none;align-items:center;gap:var(--gutter)}
.nav-links a{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey);transition:color .2s;padding-bottom:4px}
.nav-links a:hover{color:var(--offwhite)}
.nav-links a.active{color:var(--offwhite);border-bottom:1px solid var(--ember)}
.nav-sub{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--offwhite);border:1px solid var(--ember);border-radius:var(--r);padding:8px 16px;
  transition:background .2s,color .2s;cursor:pointer;background:transparent}
.nav-sub:hover{background:var(--ember);color:var(--midnight)}
@media(min-width:768px){.lb-nav{padding:8px var(--mx-d)}.nav-links{display:flex}}

/* ── MAIN COLUMN ── */
main{flex:1;padding-top:80px;display:flex;flex-direction:column;align-items:center;width:100%;
  padding-left:var(--mx-m);padding-right:var(--mx-m)}
.col{width:100%;max-width:var(--col);margin:0 auto}
.col-pad{padding:var(--gap) 0}
@media(min-width:768px){main{padding-left:var(--mx-d);padding-right:var(--mx-d)}}

/* ── BUTTONS ── */
.lb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:var(--r);padding:12px 24px;
  cursor:pointer;border:1px solid transparent;transition:background .2s,opacity .2s,color .2s}
.lb-btn--primary{background:var(--ember);color:var(--midnight)}
.lb-btn--primary:hover{opacity:.9}
.lb-btn--ghost{background:transparent;border-color:var(--hairline);color:var(--offwhite)}
.lb-btn--ghost:hover{border-color:var(--ember);color:var(--ember-text)}

/* ── SIGNUP FORM ── */
.signup{display:flex;width:100%;max-width:420px}
.signup input{flex:1;background:var(--surface);border:1px solid var(--hairline);border-right:0;color:var(--offwhite);
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.05em;padding:12px 16px;border-radius:var(--r) 0 0 var(--r)}
.signup input::placeholder{color:var(--grey)}
.signup input:focus{outline:none;border-color:var(--ember)}
.signup button{background:var(--ember);color:var(--midnight);font-family:'JetBrains Mono',monospace;font-size:12px;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:12px 24px;border:0;
  border-radius:0 var(--r) var(--r) 0;cursor:pointer;transition:opacity .2s;white-space:nowrap}
.signup button:hover{opacity:.9}

/* ── CHIP / TAG ── */
.lb-chip{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--hairline);border-radius:2px;padding:4px 9px;color:var(--ember-text);background:transparent;
  cursor:pointer;transition:border-color .2s,color .2s}
.lb-chip:hover{border-color:var(--ember)}
.lb-chip[aria-pressed=true]{border-color:var(--ember);color:var(--ember)}

/* list bullet square */
.lb-bullet{position:relative;padding-left:18px}
.lb-bullet::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;background:var(--ember)}

/* ── FOOTER (warm brown band) ── */
.lb-foot{width:100%;padding:var(--gap) var(--mx-m);display:grid;grid-template-columns:1fr;gap:var(--gutter);
  background:var(--brown);border-top:1px solid var(--hairline);margin-top:auto}
.lb-foot .fr-big{font-family:'Fraunces',serif;font-size:28px;font-weight:600}
.lb-foot .foot-links{display:flex;flex-direction:column;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.05em}
.lb-foot .foot-links a{color:var(--grey);transition:color .2s}
.lb-foot .foot-links a:hover{color:var(--ember)}
.lb-foot .meta-col{display:flex;flex-direction:column;gap:14px;color:var(--grey);font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.05em;line-height:1.6}
.lb-foot .meta-col a:hover{color:var(--ember-text)}
@media(min-width:768px){.lb-foot{grid-template-columns:1fr 1fr 1fr;padding:var(--gap) var(--mx-d)}.lb-foot .meta-col{align-items:flex-end;text-align:right}}