/* IRGF Implementation Documentation — self-contained stylesheet */

:root{
  --bg:#ffffff; --bg-alt:#f6f8fb; --bg-sink:#eef2f7;
  --fg:#14202c; --fg-soft:#4a5768; --fg-mute:#6b7a8c;
  --line:#dde5ee; --line-soft:#e9eff5;
  --accent:#2f5d8c; --accent-soft:#e7f0f9; --accent-ink:#1b3f63;
  --warn:#8a6d1f; --warn-bg:#fdf6d8; --warn-line:#e6cf8a;
  --note:#b0642f; --note-bg:#fbf1e9;
  --radius:8px;
  --sidebar:310px;
  --measure:74ch;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Charter,"Bitstream Charter","Iowan Old Style","Source Serif Pro",Georgia,serif;
}
html[data-theme="dark"]{
  --bg:#12181f; --bg-alt:#171f28; --bg-sink:#1c2530;
  --fg:#e6edf4; --fg-soft:#b3c1d0; --fg-mute:#8496a8;
  --line:#2a3542; --line-soft:#222c37;
  --accent:#7fb3e0; --accent-soft:#1b2b3a; --accent-ink:#a8cdec;
  --warn:#e3c375; --warn-bg:#2b2617; --warn-line:#4d431f;
  --note:#e0a273; --note-bg:#2a1f17;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.6rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}

.shell{display:flex; align-items:flex-start}

/* ---------------- sidebar ---------------- */
.toc{
  width:var(--sidebar); flex:0 0 var(--sidebar);
  height:100vh; position:sticky; top:0; overflow-y:auto;
  background:var(--bg-alt); border-right:1px solid var(--line);
  padding:1.15rem 0 3rem;
}
.sitelink{
  display:block; padding:.1rem 1.15rem .55rem; font-size:.78rem;
  color:var(--fg-mute); letter-spacing:.02em;
}
.sitelink:hover{color:var(--accent)}
.brand{display:block; padding:0 1.15rem .9rem; text-decoration:none}
.brand:hover{text-decoration:none}
.mark{
  display:inline-block; font-weight:800; letter-spacing:.06em;
  font-size:1.22rem; color:var(--accent-ink);
}
.brandsub{display:block; font-size:.76rem; color:var(--fg-mute); letter-spacing:.04em; margin-top:.1rem}

.searchbox{position:relative; padding:0 1.15rem 1rem}
#q{
  width:100%; padding:.5rem .7rem; font:inherit; font-size:.87rem;
  color:var(--fg); background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius);
}
#q:focus{outline:2px solid var(--accent); outline-offset:1px}
#results{
  display:none; position:absolute; left:1.15rem; right:1.15rem; top:2.6rem; z-index:40;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 8px 26px rgba(20,32,44,.16); max-height:60vh; overflow-y:auto;
}
#results.show{display:block}
#results a{display:block; padding:.55rem .7rem; border-bottom:1px solid var(--line-soft); font-size:.85rem}
#results a:last-child{border-bottom:0}
#results a:hover,#results a.sel{background:var(--accent-soft); text-decoration:none}
#results .rt{font-weight:600; color:var(--fg)}
#results .rx{display:block; color:var(--fg-mute); font-size:.78rem; margin-top:.12rem}
#results mark{background:transparent; color:var(--accent-ink); font-weight:700}
#results .none{padding:.6rem .7rem; color:var(--fg-mute); font-size:.85rem}

.part{
  padding:.95rem 1.15rem .3rem; font-size:.7rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--fg-mute);
}
.toc ul{list-style:none; margin:0; padding:0}
.toc li a{
  display:block; padding:.3rem 1.15rem .3rem 1.4rem; font-size:.855rem;
  color:var(--fg-soft); border-left:2px solid transparent; line-height:1.4;
}
.toc li a:hover{color:var(--fg); background:var(--bg-sink); text-decoration:none}
.toc li a.on{color:var(--accent-ink); font-weight:650; border-left-color:var(--accent); background:var(--accent-soft)}

/* ---------------- main ---------------- */
main{flex:1 1 auto; min-width:0; padding:0 3.2rem 4rem; max-width:calc(var(--measure) + 12rem)}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  position:sticky; top:0; z-index:20; background:var(--bg);
  padding:1rem 0 .7rem; border-bottom:1px solid var(--line-soft); margin-bottom:1.6rem;
}
.crumb{font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-mute); font-weight:600}
.themetoggle{
  border:1px solid var(--line); background:var(--bg-alt); color:var(--fg-soft);
  border-radius:var(--radius); width:2.1rem; height:2.1rem; cursor:pointer; font-size:.95rem; line-height:1;
}
.themetoggle:hover{border-color:var(--accent); color:var(--accent)}
.ico-moon{display:none}
html[data-theme="dark"] .ico-sun{display:none}
html[data-theme="dark"] .ico-moon{display:inline}

/* ---------------- prose ---------------- */
.prose{max-width:var(--measure)}
.prose h1{
  font-size:1.95rem; line-height:1.2; margin:.2rem 0 1rem; letter-spacing:-.012em;
  font-weight:750; color:var(--fg);
}
.prose h2{
  font-size:1.28rem; margin:2.4rem 0 .7rem; padding-top:.5rem; font-weight:700;
  border-top:1px solid var(--line-soft); letter-spacing:-.006em;
}
.prose h3{font-size:1.06rem; margin:1.7rem 0 .5rem; font-weight:700}
.prose h4{font-size:.96rem; margin:1.3rem 0 .4rem; font-weight:700; color:var(--fg-soft)}
.prose p{margin:.85rem 0}
.prose ul,.prose ol{margin:.8rem 0; padding-left:1.35rem}
.prose li{margin:.32rem 0}
.prose strong{font-weight:670}
.prose em{color:var(--fg-soft)}
.prose hr{border:0; border-top:1px solid var(--line); margin:1.5rem 0}
.prose code{
  font-family:var(--mono); font-size:.86em; background:var(--bg-sink);
  padding:.1em .35em; border-radius:4px;
}

/* opening italic chapter note */
.prose > p:first-of-type > em:only-child{
  display:block; font-style:italic; color:var(--fg-soft);
  border-left:3px solid var(--accent); background:var(--accent-soft);
  padding:.8rem 1rem; border-radius:0 var(--radius) var(--radius) 0; font-size:.95rem;
}

blockquote{
  margin:1.1rem 0; padding:.85rem 1.1rem; background:var(--bg-alt);
  border:1px solid var(--line); border-left:3px solid var(--fg-mute);
  border-radius:0 var(--radius) var(--radius) 0; font-size:.93rem;
}
blockquote p{margin:.35rem 0}

/* tables */
.prose table{
  width:100%; border-collapse:collapse; margin:.6rem 0 1.5rem; font-size:.855rem;
  display:block; overflow-x:auto;
}
.prose thead th{
  text-align:left; font-weight:700; color:var(--fg); background:var(--bg-alt);
  border-bottom:2px solid var(--line); padding:.5rem .6rem; vertical-align:bottom;
}
.prose tbody td{border-bottom:1px solid var(--line-soft); padding:.5rem .6rem; vertical-align:top}
.prose tbody tr:hover td{background:var(--bg-alt)}

/* figures */
figure.fig{margin:1.6rem 0; text-align:center}
figure.fig img{
  max-width:100%; height:auto; border:1px solid var(--line);
  border-radius:var(--radius); background:#fff; padding:.5rem;
}
figure.fig figcaption{
  margin-top:.6rem; font-size:.83rem; color:var(--fg-mute); text-align:left; line-height:1.5;
}

/* callouts, driven by the leading bold run pandoc emits */
.callout{
  margin:1.1rem 0; padding:.8rem 1rem; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--bg-alt); font-size:.94rem;
}
.callout.rec{border-color:var(--warn-line); background:var(--warn-bg)}
.callout.warn{border-color:var(--note); background:var(--note-bg)}
.callout p:first-child{margin-top:0}
.callout p:last-child{margin-bottom:0}

/* prev / next */
.pagenav{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:3rem 0 1.5rem;
  padding-top:1.4rem; border-top:1px solid var(--line);
}
.pn{
  display:block; padding:.75rem .9rem; border:1px solid var(--line);
  border-radius:var(--radius); font-size:.88rem; font-weight:600; color:var(--fg);
}
.pn:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.pn span{display:block; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fg-mute); font-weight:600; margin-bottom:.15rem}
.pn.next{text-align:right}

.foot{margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--line-soft);
  font-size:.82rem; color:var(--fg-soft)}
.foot .muted{color:var(--fg-mute); font-size:.78rem}

/* ---------------- landing page ---------------- */
.hero{padding:1rem 0 .5rem}
.hero h1{font-size:2.35rem; margin:.2rem 0 .5rem; letter-spacing:-.02em}
.hero .lede{font-size:1.08rem; color:var(--fg-soft); max-width:62ch}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:1rem; margin:1.8rem 0}
.card{
  border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem;
  background:var(--bg-alt); display:block; color:var(--fg);
}
.card:hover{border-color:var(--accent); text-decoration:none; transform:translateY(-1px)}
.card h3{margin:0 0 .3rem; font-size:1rem; color:var(--accent-ink)}
.card p{margin:0; font-size:.86rem; color:var(--fg-soft); line-height:1.5}

/* ---------------- responsive ---------------- */
.navtoggle{display:none}
.scrim{display:none}
@media (max-width:1020px){
  main{padding:0 1.4rem 3rem}
  .toc{position:fixed; left:0; top:0; z-index:50; transform:translateX(-100%);
       transition:transform .22s ease; box-shadow:0 0 40px rgba(0,0,0,.2)}
  body.nav-open .toc{transform:translateX(0)}
  .navtoggle{
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    position:fixed; top:.7rem; left:.7rem; z-index:60; width:2.4rem; height:2.4rem;
    background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); cursor:pointer;
    align-items:center;
  }
  .navtoggle span{display:block; width:15px; height:2px; background:var(--fg)}
  .topbar{padding-left:3rem}
  body.nav-open .scrim{display:block; position:fixed; inset:0; background:rgba(10,16,22,.42); z-index:45}
}
@media (max-width:640px){
  .pagenav{grid-template-columns:1fr}
  .prose h1{font-size:1.6rem}
  body{font-size:15.5px}
}

/* ---------------- print ---------------- */
@media print{
  .toc,.topbar,.pagenav,.navtoggle,.searchbox,.scrim,.themetoggle{display:none !important}
  main{padding:0; max-width:none}
  body{font-size:10.5pt; color:#000; background:#fff}
  .prose{max-width:none}
  .prose h1{page-break-before:always}
  .prose h2,.prose h3{page-break-after:avoid}
  .prose table,figure.fig{page-break-inside:avoid}
  a{color:#000; text-decoration:none}
  .foot{border-top:1px solid #999}
}