/* ============================================================
   Rust Lifetimes — "The Workbench" skin
   Warm paper, dark ink, oxide-rust accents. Light theme.
   Mechanics (spread, pager, slots) follow the BookBank contract.
   ============================================================ */

:root{
  --paper:      #f7f2e9;
  --paper-deep: #efe7d8;
  --ink:        #2b2620;
  --ink-soft:   #5c5347;
  --oxide:      #b7410e;   /* rust! */
  --oxide-deep: #8c3009;
  --patina:     #1f6f6b;   /* teal counterpoint */
  --brass:      #a07d2a;
  --edge:       #d9cdb8;
  --code-bg:    #f1eadb;
  --code-edge:  #e0d5bf;
  --shadow:     rgba(60,45,25,.12);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Iowan Old Style","Palatino","Georgia",serif;
  font-size:17px;
  line-height:1.62;
}

/* subtle paper grain */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(120,90,50,.045) 1px, transparent 1px);
  background-size:5px 5px;
}

/* ---------- top bar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; gap:1rem;
  padding:.5rem 1.1rem;
  background:linear-gradient(to bottom, rgba(247,242,233,.97), rgba(247,242,233,.88));
  border-bottom:1px solid var(--edge);
  font-family:"Avenir Next","Helvetica Neue",sans-serif;
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
}
.topbar .book-title{ font-weight:700; color:var(--oxide-deep); }
.topbar .spacer{ flex:1; }
.topbar a{ color:var(--ink-soft); text-decoration:none; padding:.15rem .4rem; border-radius:4px; }
.topbar a:hover{ color:var(--oxide); background:var(--paper-deep); }

/* ---------- the open-book spread ---------- */
.book-viewport{ position:fixed; inset:0; overflow:hidden; z-index:1; }
.book-leaf{
  height:100vh;
  box-sizing:border-box;
  padding:9vh 0 8vh;
  column-fill:auto;
  transition:transform .55s cubic-bezier(.6,.02,.2,1);
}
.book-leaf > *{ break-inside:avoid; padding-left:2.5vw; padding-right:2.5vw; }
.book-leaf > p{ break-inside:auto; }        /* let long prose flow across pages */
.book-spine{
  position:fixed; top:0; bottom:0; left:50%; width:2px; transform:translateX(-1px);
  background:linear-gradient(to right, rgba(0,0,0,.05), rgba(0,0,0,.02));
  box-shadow:0 0 26px 12px var(--shadow);
  pointer-events:none; z-index:5;
}
.book-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; gap:1.4rem; justify-content:center; align-items:center;
  padding:.55rem;
  background:linear-gradient(to top, rgba(247,242,233,.97), rgba(247,242,233,.85));
  border-top:1px solid var(--edge);
  font-family:"Avenir Next","Helvetica Neue",sans-serif; font-size:.85rem;
}
.book-nav a{
  color:var(--oxide-deep); text-decoration:none; font-weight:600;
  padding:.2rem .7rem; border:1px solid transparent; border-radius:6px;
}
.book-nav a:hover{ border-color:var(--edge); background:var(--paper-deep); }
.book-pageno{ color:var(--ink-soft); font-variant-numeric:tabular-nums; min-width:4.5em; text-align:center; }

/* ---------- required mobile fallback ---------- */
@media (max-width: 900px){
  .book-viewport{ position:static; overflow:visible; }
  .book-leaf{ height:auto; padding:5.5rem 6vw 3rem; }
  .book-leaf > *{ padding-left:0; padding-right:0; }
  .book-spine{ display:none; }
  .book-nav{ position:static; margin-top:2rem; }
}

/* ---------- typography ---------- */
h1,h2,h3{
  font-family:"Avenir Next","Helvetica Neue",sans-serif;
  line-height:1.22; color:var(--ink);
}
h1{ font-size:2.05rem; font-weight:700; margin:0 0 .35rem; }
h1 .ch-no{
  display:block; font-size:.8rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--oxide); margin-bottom:.55rem;
}
h2{ font-size:1.28rem; font-weight:700; margin:1.6rem 0 .6rem; color:var(--oxide-deep); }
h3{ font-size:1.02rem; font-weight:700; margin:1.2rem 0 .4rem; }
p{ margin:0 0 .95rem; }
.lede{ font-size:1.06rem; color:var(--ink-soft); font-style:italic; margin-bottom:1.3rem; }
em{ font-style:italic; }
strong{ color:var(--oxide-deep); }
a{ color:var(--patina); }
hr.flourish{
  border:none; text-align:center; margin:1.4rem 0;
}
hr.flourish::after{ content:"⁂"; color:var(--brass); font-size:1rem; }

blockquote.epigraph{
  margin:0 0 1.4rem; padding:.2rem 0 .2rem 1rem;
  border-left:3px solid var(--brass);
  color:var(--ink-soft); font-style:italic; font-size:.98rem;
}
blockquote.epigraph cite{ display:block; margin-top:.3rem; font-size:.82rem; font-style:normal; letter-spacing:.05em; }

ul,ol{ margin:0 0 1rem 1.4rem; }
li{ margin-bottom:.35rem; }

/* ---------- code ---------- */
code{
  font-family:ui-monospace,"SF Mono","Menlo",monospace;
  font-size:.86em;
  background:var(--code-bg);
  border:1px solid var(--code-edge);
  border-radius:4px;
  padding:.06em .3em;
  color:var(--ink);
}
pre{
  background:var(--code-bg);
  border:1px solid var(--code-edge);
  border-left:3px solid var(--oxide);
  border-radius:8px;
  padding:.85rem 1rem;
  margin:0 0 1.05rem;
  overflow-x:auto;
  break-inside:avoid;
}
pre code{ background:none; border:none; padding:0; font-size:.8rem; line-height:1.55; display:block; }
pre.term{ border-left-color:var(--ink-soft); background:#efe9dc; }

/* highlight classes (hand-rolled, no CDN) */
.kw{ color:#8c3009; font-weight:600; }         /* fn, let, impl … */
.ty{ color:#1f6f6b; }                          /* types */
.fn{ color:#6b4fa0; }                          /* function names */
.st{ color:#3f7d2e; }                          /* strings */
.co{ color:#8d7f6a; font-style:italic; }       /* comments */
.lt{ color:#b7410e; font-weight:700; }         /* lifetimes — the star */
.mc{ color:#a07d2a; }                          /* macros */
.nm{ color:#2c5aa0; }                          /* numbers */
.err{ color:#a02020; font-weight:600; }
.ok{ color:#3f7d2e; font-weight:600; }

/* ---------- callouts ---------- */
.callout{
  border:1px solid var(--edge);
  border-radius:10px;
  padding:.75rem .95rem;
  margin:0 0 1.05rem;
  font-size:.92rem;
  background:var(--paper-deep);
  break-inside:avoid;
}
.callout .co-label{
  display:block; font-family:"Avenir Next","Helvetica Neue",sans-serif;
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:.3rem;
}
.callout.key{ border-left:4px solid var(--oxide); }
.callout.key .co-label{ color:var(--oxide); }
.callout.note{ border-left:4px solid var(--patina); }
.callout.note .co-label{ color:var(--patina); }
.callout.warn{ border-left:4px solid #a02020; background:#f5e9e2; }
.callout.warn .co-label{ color:#a02020; }
.callout.workshop{ border-left:4px solid var(--brass); }
.callout.workshop .co-label{ color:var(--brass); }
.callout p:last-child{ margin-bottom:0; }

/* ---------- tables ---------- */
table{
  width:100%; border-collapse:collapse; margin:0 0 1.05rem;
  font-size:.86rem; break-inside:avoid;
  font-family:"Avenir Next","Helvetica Neue",sans-serif;
}
th{
  text-align:left; padding:.4rem .55rem;
  border-bottom:2px solid var(--oxide);
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--oxide-deep);
}
td{ padding:.4rem .55rem; border-bottom:1px solid var(--edge); vertical-align:top; }
td code{ font-size:.8em; }

/* ---------- figures & SVG diagrams ---------- */
figure{ margin:0 0 1.05rem; break-inside:avoid; }
figure svg{ width:100%; height:auto; display:block; }
figcaption{
  font-family:"Avenir Next","Helvetica Neue",sans-serif;
  font-size:.78rem; color:var(--ink-soft); margin-top:.4rem; text-align:center;
}
figure img{ max-width:100%; height:auto; max-height:52vh; object-fit:contain; display:block; }

/* ---------- image slots ---------- */
.img-slot{ position:relative; }
.img-slot .img-real{
  width:100%;
  aspect-ratio:var(--img-aspect, 16 / 9);
  height:auto; max-height:52vh;
  object-fit:contain; object-position:center;
  display:block;
  border:1px solid var(--edge); border-radius:10px;
  background:var(--paper-deep);
}
.img-slot .img-drop{ display:none; }
.img-slot.img-missing .img-real{ display:none; }
.img-slot.img-missing .img-drop{
  display:block;
  aspect-ratio:var(--img-aspect, 16 / 9);
  max-height:52vh;
  border:2px dashed var(--brass);
  border-radius:10px;
  background:repeating-linear-gradient(45deg, var(--paper-deep), var(--paper-deep) 12px, var(--paper) 12px, var(--paper) 24px);
  overflow:auto;
}
.img-drop-inner{ padding:1rem 1.2rem; font-size:.85rem; }
.img-drop-inner strong{
  font-family:"Avenir Next","Helvetica Neue",sans-serif;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass);
}
.img-prompt{
  font-style:italic; color:var(--ink-soft); margin:.4rem 0 .6rem;
  border-left:3px solid var(--edge); padding-left:.7rem; font-size:.82rem;
}
.img-copy{
  font-family:"Avenir Next","Helvetica Neue",sans-serif;
  font-size:.75rem; font-weight:600;
  background:var(--oxide); color:#fff; border:none; border-radius:6px;
  padding:.35rem .8rem; cursor:pointer;
}
.img-copy:hover{ background:var(--oxide-deep); }
.img-hint{ font-size:.74rem; color:var(--ink-soft); margin:.5rem 0 0; }

/* ---------- cover (index.html) ---------- */
.cover-left h1.cover-title{
  font-size:2.7rem; line-height:1.08; margin:.8rem 0 .5rem;
}
.cover-kicker{
  font-family:"Avenir Next","Helvetica Neue",sans-serif;
  font-size:.78rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--oxide);
}
.cover-sub{ font-size:1.05rem; font-style:italic; color:var(--ink-soft); margin-bottom:1.2rem; }
.cover-byline{
  font-family:"Avenir Next","Helvetica Neue",sans-serif;
  font-size:.82rem; color:var(--ink-soft); margin-top:1rem;
}
.cover-byline b{ color:var(--brass); }

/* table of contents */
.toc{ list-style:none; margin:0; counter-reset:ch; }
.toc li{ counter-increment:ch; margin:0; border-bottom:1px dotted var(--edge); }
.toc a{
  display:flex; align-items:baseline; gap:.8rem;
  padding:.5rem .2rem; text-decoration:none; color:var(--ink);
}
.toc a:hover{ background:var(--paper-deep); }
.toc a::before{
  content:counter(ch, decimal-leading-zero);
  font-family:ui-monospace,"SF Mono",monospace;
  font-size:.8rem; color:var(--oxide); font-weight:700; min-width:2em;
}
.toc .toc-title{ flex:1; font-family:"Avenir Next","Helvetica Neue",sans-serif; font-weight:600; font-size:.95rem; }
.toc .toc-note{ font-size:.78rem; color:var(--ink-soft); font-style:italic; }
.toc li.toc-extra a::before{ content:"※"; }

/* ---------- cheatsheet ---------- */
.cs-grid{ display:block; }
.cs-card{
  border:1px solid var(--edge); border-radius:10px;
  padding:.75rem .9rem; margin-bottom:1rem;
  background:#fbf8f1;
  break-inside:avoid;
  font-size:.85rem;
}
.cs-card h3{
  margin:0 0 .45rem; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--oxide); border-bottom:1px solid var(--edge); padding-bottom:.3rem;
}
.cs-card pre{ margin-bottom:.5rem; padding:.55rem .7rem; }
.cs-card pre code{ font-size:.72rem; }
.cs-card p{ margin-bottom:.4rem; }
.cs-card table{ font-size:.78rem; }

/* ---------- sources footer ---------- */
.sources{
  margin-top:1.6rem; padding-top:.7rem; border-top:1px solid var(--edge);
  font-size:.76rem; color:var(--ink-soft);
  font-family:"Avenir Next","Helvetica Neue",sans-serif;
}
.sources ul{ list-style:none; margin:0; }
.sources li{ margin-bottom:.15rem; }
.sources a{ color:var(--patina); text-decoration:none; }

/* challenges block (persona: Crafting Interpreters style) */
.challenges{
  border:1px solid var(--brass); border-radius:10px;
  padding:.8rem 1rem; margin:1.2rem 0;
  background:#faf5e8; break-inside:avoid; font-size:.9rem;
}
.challenges h3{
  margin:0 0 .5rem; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
}
.challenges ol{ margin-bottom:0; }