@font-face{font-family:"Source Sans 3";src:url("fonts/source-sans-3-roman.woff2") format("woff2");font-style:normal;font-weight:200 900;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/source-sans-3-italic.woff2") format("woff2");font-style:italic;font-weight:200 900;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-roman.woff2") format("woff2");font-style:normal;font-weight:200 900;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-italic.woff2") format("woff2");font-style:italic;font-weight:200 900;font-display:swap}
:root{--paper:#f7f5f0;--surface:#fffefa;--ink:#1d2927;--muted:#5b6663;--line:#c9d1cb;--accent:#9d442b;--wash:#eaeee8;--book-size:1.09rem;--font-sans:"Source Sans 3",sans-serif;--font-serif:"Source Serif 4",serif;--font-display:"Source Serif 4",serif;--font-micro:"Source Sans 3",sans-serif;color-scheme:light}
[data-theme="dark"]{--paper:#161d1b;--surface:#1f2926;--ink:#efebe1;--muted:#b6c3bb;--line:#42504a;--accent:#e8a688;--wash:#25332d;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:auto;-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.55 var(--font-sans)}img{max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}a:hover{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Tools that need script stay out of the layout until the script has run.
   The selector is scoped to html without .js so it outranks the component
   rules below and can never be re-enabled by source order. */
html:not(.js) .js-only{display:none}

/* Smooth scrolling is a convenience for links the reader chooses. The move to a
   fragment on load is not: while it is animated, the browser keeps writing a
   destination it measured before the webfont swap, and a correction is
   overwritten by the animation that is still running. The class is therefore
   added by the script once the page has settled, and every later in-page link
   is animated as before. */
html.scroll-smooth{scroll-behavior:smooth}

.skip{position:absolute;z-index:9;top:-5rem;left:1rem;padding:.6rem 1rem;background:var(--ink);color:var(--surface)}.skip:focus{top:.75rem;color:var(--surface)}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:4.25rem;padding:.5rem clamp(1rem,4vw,4rem);border-bottom:1px solid var(--line);background:var(--surface)}
.wordmark{font-size:1.1rem;font-weight:750;letter-spacing:-.045em;text-decoration:none;white-space:nowrap}.wordmark span{margin-left:.16em;color:var(--accent)}
.site-header nav{display:flex;align-items:center;gap:clamp(.75rem,2.5vw,2rem);font-size:.9rem;font-weight:600}.site-header nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}.site-header nav a:hover{text-decoration:underline}
.eyebrow{font:650 .78rem/1.4 var(--font-micro);color:var(--accent);letter-spacing:.06em;text-transform:uppercase;margin:0 0 1rem}

/* Cover module: the title carries the hierarchy, the cover reads as an object. */
.home{max-width:1600px;margin:auto}
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);align-items:center;gap:clamp(2rem,5vw,6rem);padding:clamp(2.5rem,6vw,5.5rem) clamp(1.25rem,7vw,8rem);background:var(--wash);border-bottom:1px solid var(--line)}
.hero-copy{max-width:44rem}
.hero-title{font:700 clamp(2.9rem,7.4vw,5.6rem)/.95 var(--font-display);letter-spacing:-.04em;margin:0 0 1.1rem}
.hero-rule{width:4.5rem;height:3px;background:var(--accent);margin:0 0 1.4rem}
.hero-deck{font:500 clamp(1.18rem,1.85vw,1.55rem)/1.4 var(--font-serif);margin:0 0 1.5rem;max-width:34ch}
.hero-quote{font:italic 400 clamp(1.22rem,1.95vw,1.7rem)/1.45 var(--font-serif);color:var(--accent);margin:0 0 2.1rem;max-width:28ch}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.7rem}
.button{display:inline-flex;align-items:center;gap:1.6rem;min-height:52px;padding:.8rem 1.35rem;border:1px solid var(--ink);text-decoration:none;font-weight:650}
.primary{background:var(--ink);color:var(--surface)}.primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.text-link{font-weight:650;border-bottom:1px solid var(--line);padding-bottom:.15rem}
.cover-stage{position:relative;justify-self:center;width:min(100%,360px)}
.cover-frame{position:relative;background:#0f1412;padding:.55rem;box-shadow:0 30px 55px -22px #0c19159c,0 1px 0 #0000004d}
.cover-frame img{display:block;width:100%;height:auto}
.cover-frame::before{content:"";position:absolute;top:0;bottom:0;left:0;width:16px;background:linear-gradient(90deg,#0000008c,#0000);pointer-events:none}
.cover-frame::after{content:"";position:absolute;top:8px;bottom:8px;right:-8px;width:9px;background:repeating-linear-gradient(90deg,#efe9dd 0 1px,#cfc7b8 1px 2px);box-shadow:2px 0 6px #00000040}

.intro,.structure,.downloads{padding:clamp(3.5rem,7vw,6.5rem) clamp(1.25rem,7vw,8rem);border-bottom:1px solid var(--line)}
.intro{max-width:1100px}.intro h2,.structure h2,.downloads h2{font:550 clamp(2.1rem,3.7vw,3.6rem)/1.13 var(--font-display);letter-spacing:-.015em;margin:0 0 1.6rem}
.intro p:not(.eyebrow){font:400 1.18rem/1.7 var(--font-serif);max-width:66ch;margin:0 0 1.15rem}
.structure{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,5rem);background:var(--surface)}
.structure ol{margin:0;padding:0;list-style:none}.structure li{border-top:1px solid var(--line)}.structure li:last-child{border-bottom:1px solid var(--line)}
.structure li a{display:block;padding:.9rem 0;font:500 1.2rem/1.35 var(--font-serif);text-decoration:none}.structure li a:hover{text-decoration:underline}
.downloads>p:not(.eyebrow){font:400 1.14rem/1.55 var(--font-serif);max-width:54ch}
.download-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;max-width:850px;margin-top:2rem;border-top:1px solid var(--line)}
.download-grid a{display:grid;grid-template-columns:1fr auto;gap:.2rem;padding:1rem .6rem 1rem 0;border-bottom:1px solid var(--line);text-decoration:none}.download-grid a:first-child{margin-right:1.25rem}
.download-grid strong{font:550 1.38rem/1.25 var(--font-serif)}.download-grid span{grid-column:1;color:var(--muted);font-size:.9rem}.download-grid b{grid-column:2;grid-row:1/3;color:var(--accent);font-size:1.5rem;align-self:center}

.reader{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);max-width:1550px;margin:auto}
.reader-rail{border-right:1px solid var(--line);background:var(--surface)}
.rail-inner{position:sticky;top:0;max-height:100vh;overflow:auto;padding:2.25rem 1.2rem 2rem clamp(1rem,3vw,3rem)}
.rail-inner h2{font:550 1.55rem/1.2 var(--font-display);margin:0 0 1.2rem}
.toc-list{list-style:none;margin:0;padding:0}.toc-list li{margin:.42rem 0}.toc-list a{display:block;font-size:.88rem;line-height:1.35;text-decoration:none}.toc-list a:hover{text-decoration:underline}
.toc-l2{padding-left:.85rem}.toc-l3{padding-left:1.4rem}
.reading-column{width:100%;min-width:0;max-width:920px;padding:0 clamp(1rem,5vw,5rem) 5rem}
.reading-tools{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:.8rem;letter-spacing:.02em}
.tool-buttons{display:flex;gap:.4rem}.tool-buttons button{min-width:44px;min-height:44px;padding:.4rem .55rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}.tool-buttons button:hover{border-color:var(--accent)}
.resume{margin:1.1rem 0 0;padding:.7rem 1rem;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--wash);font:650 .95rem/1.4 var(--font-sans)}
.resume[hidden]{display:none}.resume a{text-decoration:none}.resume a:hover{text-decoration:underline}
.mobile-toc{display:none}
.search-panel{padding:1.1rem 0;border-bottom:1px solid var(--line)}.search-panel summary{cursor:pointer;font:500 1.15rem/1.3 var(--font-serif)}
.search-inner{padding-top:1rem}.search-panel label{display:block;font-size:.9rem;margin-bottom:.35rem}
.search-row{display:flex;gap:.5rem}.search-row input{width:100%;min-width:0;min-height:44px;padding:.55rem .7rem;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.search-row button{min-height:44px;padding:.55rem 1rem;border:0;background:var(--ink);color:var(--surface);cursor:pointer}.search-row button:hover{background:var(--accent)}
#search-status{margin-top:.5rem;color:var(--muted);font-size:.9rem}
#search-results{max-height:25rem;overflow:auto;padding-left:1.4rem;margin:1rem 0 0}#search-results li{margin:0 0 1rem}#search-results a{font-weight:650}#search-results p{font:400 .98rem/1.5 var(--font-serif);margin:.25rem 0}

.book{font:400 var(--book-size)/1.72 var(--font-serif);overflow-wrap:anywhere;max-width:66ch;font-optical-sizing:auto}
.book h1,.book h2,.book h3,.book h4{font-family:var(--font-display);line-height:1.17;scroll-margin-top:1.5rem;break-after:avoid}
.book h1{font-size:clamp(2.2rem,3.6vw,3.3rem);font-weight:600;letter-spacing:-.015em;margin:4.5rem 0 1.6rem;padding-top:2rem;border-top:1px solid var(--line)}
.book h1:first-child{margin-top:2rem;padding-top:0;border:0}
.book h2{font-size:clamp(1.6rem,2.15vw,2.1rem);font-weight:600;margin:3.4rem 0 1rem}
.book h3{font-size:1.28em;font-weight:600;margin:2.5rem 0 .9rem}.book h4{font-size:1.1em;font-weight:600;margin:2rem 0 .65rem}
.book p{margin:0 0 1.25em}.book ul,.book ol{padding-left:1.4em}.book li{margin:.35em 0}.book a{color:var(--accent)}
.book blockquote{margin:2rem 0;padding:.35rem 1.2rem;border-left:3px solid var(--accent);background:var(--wash)}
.table-scroll{max-width:100%;overflow-x:auto;margin:1.8rem 0 2.2rem}
.table-scroll:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.book table{border-collapse:collapse;font-size:.87em;line-height:1.5;overflow-wrap:normal}
/* Cells keep their words whole: the column is never narrower than the longest
   word, so a wide table scrolls sideways instead of breaking words in half. */
.book td,.book th{min-width:8rem;padding:.65rem .7rem;border:1px solid var(--line);vertical-align:top;overflow-wrap:break-word}.book th{text-align:left;background:var(--wash)}

/* Figures: the caption stays in the flow, the diagram opens at full size
   without script and without a second copy of the image bytes. */
.book-figure{margin:2.6rem 0 3rem}
.book-figure figcaption{margin:0;padding-top:.8rem;border-top:1px solid var(--line);color:var(--muted);font:400 .92rem/1.55 var(--font-sans)}
.figure-zoom>summary{display:block;cursor:zoom-in}
.figure-zoom>summary::-webkit-details-marker{display:none}.figure-zoom>summary::marker{content:""}
.zoom-hint{display:block;margin:0 0 .7rem;color:var(--accent);font:650 .8rem/1.4 var(--font-micro);letter-spacing:.05em;text-transform:uppercase}
.zoom-close{display:none}
.zoom-img{display:block;width:100%;height:auto;margin:auto;border:1px solid var(--line);background:#fff}
.figure-zoom[open]>summary{position:fixed;inset:0;z-index:60;display:block;overflow:auto;padding:clamp(3rem,7vw,4rem) clamp(.75rem,3vw,2rem) clamp(1.5rem,4vw,2.5rem);background:var(--paper);cursor:zoom-out}
.figure-zoom[open] .zoom-hint{display:none}
.figure-zoom[open] .zoom-close{position:fixed;top:.7rem;right:.9rem;z-index:61;display:block;padding:.5rem .9rem;border:1px solid var(--line);background:var(--ink);color:var(--surface);font:650 .82rem/1.4 var(--font-micro)}
.figure-zoom[open] .zoom-img{width:auto;max-width:none;margin:0 auto;border:0}

.endmark{text-align:center;color:var(--accent);padding:3rem}.book-end{text-align:center;font-size:.95rem}
.site-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:1.4rem clamp(1.25rem,4vw,4rem);border-top:1px solid var(--line);color:var(--muted);font-size:.84rem}.site-footer a{text-decoration:none}

@media(max-width:1024px){.reader{display:block}.reader-rail{display:none}.reading-column{max-width:820px;margin:auto}.mobile-toc{display:block;padding:1rem 0;border-bottom:1px solid var(--line)}.mobile-toc summary{cursor:pointer;font-weight:600}.mobile-toc nav{margin-top:1rem}.hero{grid-template-columns:minmax(0,1fr) minmax(200px,.62fr)}}
@media(max-width:767px){.hero{grid-template-columns:1fr;gap:2.4rem;padding:3rem 1.25rem}.cover-stage{width:min(62vw,260px);justify-self:start}.structure{grid-template-columns:1fr;gap:1rem}.download-grid{grid-template-columns:1fr}.download-grid a:first-child{margin-right:0}.reading-tools>span:first-child{max-width:9rem}.site-header nav{gap:.9rem;font-size:.82rem}}
@media(max-width:390px){.site-header{gap:.6rem}.wordmark{font-size:.98rem}.site-header nav{gap:.5rem;font-size:.74rem}.reading-column{padding-left:1rem;padding-right:1rem}}
@media(prefers-reduced-motion:reduce){html.scroll-smooth{scroll-behavior:auto}}
@media print{.site-header,.reader-rail,.reading-tools,.search-panel,.mobile-toc,.site-footer,.book-end,.zoom-hint{display:none!important}.reader{display:block}.reading-column{max-width:none;padding:0}.book{font-size:11pt}.book h1{break-before:page}}@media print{.book h1:first-child{break-before:auto}}