/* Reading layer, 2026-10. Loaded last on native, classic and canon pages.
   Synthesised from three independent design reviews: one paper palette,
   one accent, serif prose at a 66ch measure, sans display and interface,
   no hyphenation, quieter chrome. Book editions keep their own system. */

@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/books/fonts/SourceSerif4-400-latin.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/books/fonts/SourceSerif4-400i-latin.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/books/fonts/SourceSerif4-600-latin.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:600;font-display:swap;src:url(/assets/books/fonts/SourceSerif4-600i-latin.woff2) format('woff2')}

html:root{
  --bg:#faf8f3; --paper:#faf8f3; --plate:#fff; --rule:#e4dfd4;
  --ink:#141720; --ink-soft:#2b2f3d; --muted:#545c70; --faint:#666d80;
  --line:#dcd8cf; --line-soft:#ebe7de; --instrument:#f2efe8;
  --rx:#9a3412; --accent:var(--rx); --accent-wash:#f7e8de; --sel:#f3d7c4;
  --f-display:'Space Grotesk',system-ui,sans-serif;
  --f-body:'Space Grotesk',system-ui,sans-serif;
  --f-prose:'Source Serif 4',Georgia,'Times New Roman',serif;
  --r-body:clamp(1.0625rem,.98rem + .36vw,1.1875rem);
  --r-measure:38.5rem; --r-rail:14rem; --r-gap:4.5rem;
  --r-shell:calc(var(--r-measure) + var(--r-rail) + var(--r-gap));
  --r-pad:clamp(1rem,4vw,2rem);
  --sans:'Space Grotesk',system-ui,sans-serif; /* canon papers: replaces the unloaded Aptos */
}
html[data-read="sepia"]{
  --bg:#f3ead8; --paper:#f3ead8; --plate:#faf4e8; --rule:#ddd0b8;
  --ink:#251f17; --ink-soft:#3a3226; --muted:#5f5444; --faint:#6c604e;
  --line:#d6c8ad; --line-soft:#e6dbc6; --instrument:#ebe0cb; --rx:#8a2f0f; --sel:#ecc9ad;
}
html body{background:var(--bg)!important;color:var(--ink-soft)}
/* Reading pages carry one accent; territory hues stay on hubs and indexes */
html body:has(.m-paper){--accent:var(--rx);--terr:var(--rx);--violet:var(--rx)}
html{background:var(--bg)!important}
.m-paper,.m-paper .paper-tldr,.m-paper .prose article,.m-paper .prose .article-inner,.m-paper .prose .imported-paper{background:transparent!important}
.m-paper .prose .evidence-note,.m-paper .prose details,.m-paper .prose .card{background:var(--plate)!important}
.m-paper .paper-toc a{font-size:.84rem!important;font-weight:500!important;color:var(--ink-soft)!important}
.m-paper .paper-toc a:hover{color:var(--rx)!important}
.m-paper .work-summary{border:0!important;gap:0!important;background:transparent!important}
.m-paper .work-summary section{background:var(--plate)!important;border:1px solid var(--line);margin:0 -1px -1px 0}
.m-paper .work-summary h2{color:var(--rx)!important}
.m-paper .crumb span:last-child{color:var(--ink)!important}
::selection{background:var(--sel)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Chrome */
.gnav{background:color-mix(in srgb,var(--bg) 92%,transparent)!important;backdrop-filter:saturate(1.2) blur(10px)}
.gnav .brand em{border-bottom:0!important;color:inherit!important}
.gnav a[aria-current="page"],.gnav a.on{color:var(--ink)}
.gnav .links a.on{border-bottom:2px solid var(--rx)!important}
.btn.primary{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--bg)!important}
.btn.primary:hover{background:var(--accent)!important;border-color:var(--accent)!important}
#rprog{height:2px!important;background:var(--accent)!important;box-shadow:none!important}

/* No automatic hyphenation anywhere; ragged right */
p,li,dd,dt,blockquote,figcaption,.paper-brief,.workdeck,.sub{hyphens:manual!important;-webkit-hyphens:manual!important;text-wrap:pretty}
h1,h2,h3{text-wrap:balance}

/* ---------- Reading template: essays, research, work, canon papers ---------- */
.m-paper .dochead h1{
  font-family:var(--f-display)!important;font-weight:600!important;
  font-size:clamp(2.2rem,1.55rem + 2.5vw,3.4rem)!important;line-height:1.06!important;
  letter-spacing:-.028em!important;max-width:22ch!important;color:var(--ink)!important}
.m-paper .paper-brief,.m-paper .dochead .workdeck{
  font-family:var(--f-prose)!important;font-weight:400!important;
  font-size:clamp(1.15rem,1.04rem + .45vw,1.36rem)!important;line-height:1.5!important;
  color:var(--ink-soft)!important;max-width:56ch!important;letter-spacing:0!important}
.m-paper .crumb{font-family:var(--f-body)!important;font-size:.78rem!important;letter-spacing:.02em!important;text-transform:none!important;color:var(--muted)!important}

.m-paper .reading{grid-template-columns:minmax(0,var(--r-measure)) var(--r-rail)!important;gap:var(--r-gap)!important}
.m-paper .prose{
  font-family:var(--f-prose)!important;font-size:var(--r-body)!important;line-height:1.66!important;
  color:var(--ink-soft)!important;max-width:var(--r-measure)!important;font-optical-sizing:auto;
  font-variant-numeric:oldstyle-nums proportional-nums}
.m-paper .prose p{margin:0 0 1.1em!important}
.m-paper .prose li{margin-bottom:.45em}
.m-paper .prose>p:first-child,.m-paper .prose>p:first-of-type{font-size:1.06em}
.m-paper .prose h2{
  font-family:var(--f-display)!important;font-weight:600!important;
  font-size:clamp(1.45rem,1.2rem + .95vw,1.95rem)!important;line-height:1.16!important;
  letter-spacing:-.02em!important;color:var(--ink)!important;margin:2.8em 0 .7em!important;scroll-margin-top:5rem}
.m-paper .prose h3{
  font-family:var(--f-display)!important;font-weight:600!important;font-size:1.22rem!important;
  line-height:1.3!important;letter-spacing:-.01em!important;color:var(--ink)!important;margin:2em 0 .5em!important;scroll-margin-top:5rem}
.m-paper .prose strong{color:var(--ink);font-weight:600;background:none!important}
.m-paper .prose a:not(.btn):not(.chip):not(.hlink){
  color:var(--accent)!important;text-decoration:underline!important;text-decoration-thickness:1px!important;
  text-underline-offset:.18em;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)!important}
.m-paper .prose a:not(.btn):hover{text-decoration-color:var(--accent)!important}
.m-paper .prose blockquote{font-style:italic;border-left:2px solid var(--accent)!important;padding-left:1.1rem!important;color:var(--ink)}
.m-paper .prose figcaption,.m-paper figcaption{font-size:.9rem;line-height:1.5}
.m-paper .prose table{font-family:var(--f-body);font-size:.92rem!important;font-variant-numeric:tabular-nums lining-nums}
.m-paper .prose code{font-size:.86em}

/* One shell: header, brief, lead figure, body and ending share a left edge */
.m-paper .dochead,.m-paper .paper-tldr,.m-paper .leadvisual,.m-paper .reading,.m-paper .pn,.m-paper .related,.m-paper .paper-toc,.m-paper .work-summary{
  box-sizing:border-box!important;width:calc(100% - 2*var(--r-pad))!important;max-width:var(--r-shell)!important;
  margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
.m-paper .related .hubhead h2{font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem)!important}
.m-paper .prose{padding-left:0!important;padding-right:0!important;border-left:0!important}

/* In-brief box: one numbered column instead of cramped lanes */
.m-paper .paper-tldr{
  border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;padding-top:0!important;padding-bottom:.4rem!important;display:block!important;margin-top:2rem!important}
.m-paper .paper-tldr h2{border-top:3px solid var(--ink);padding-top:1rem!important;max-width:var(--r-measure)!important;font:600 .78rem/1.3 var(--f-mono)!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--accent)!important;margin:0 0 .4rem!important}
.m-paper .paper-tldr ol{display:block!important;columns:auto!important;border:0!important;padding:0!important;margin:0!important;max-width:var(--r-measure);counter-reset:brief;list-style:none!important}
.m-paper .paper-tldr li{
  position:relative;counter-increment:brief;border:0!important;border-top:1px solid var(--rule)!important;
  min-height:0!important;padding:.75rem 0 .75rem 2.6rem!important;margin:0!important;
  font:400 1.02rem/1.55 var(--f-prose)!important;color:var(--ink-soft)!important}
.m-paper .paper-tldr li::before{
  content:counter(brief,decimal-leading-zero)!important;position:absolute;left:0;top:.95rem!important;
  width:auto!important;height:auto!important;background:none!important;border:0!important;
  font:500 .74rem/1 var(--f-mono)!important;color:var(--accent)!important}
.m-paper .paper-tldr li strong{font-weight:600}

/* Contents rail */
.m-paper .mtoc{top:5rem!important;border-left:1px solid var(--rule)!important;padding-left:0!important}
.m-paper .mtoc .label,.m-paper .toc-label{font:600 .72rem/1.3 var(--f-mono)!important;letter-spacing:.07em!important;text-transform:uppercase;color:var(--muted)!important;padding-left:1rem;margin-bottom:.5rem}
.m-paper .mtoc a{
  font:450 .84rem/1.4 var(--f-body)!important;letter-spacing:0!important;color:var(--muted)!important;
  padding:.34rem 0 .34rem 1rem!important;margin-left:-1px;border-left:2px solid transparent;text-transform:none!important}
.m-paper .mtoc a:hover{color:var(--ink)!important}
.m-paper .mtoc a.on{color:var(--ink)!important;font-weight:600!important;border-left-color:var(--accent)}
.m-paper .mtoc a.read{color:var(--ink-soft)!important}

/* Endings: one strong continuation */
.m-paper .pn{border-top:1px solid var(--ink);margin-top:3.5rem;padding-top:1.5rem;gap:2rem}
.m-paper .pn a{max-width:46%;gap:.4rem}
.m-paper .pn a>span:last-child{font:600 clamp(1.1rem,.98rem + .55vw,1.4rem)/1.25 var(--f-display);letter-spacing:-.012em;color:var(--ink)}
.m-paper .pn a .label{font:600 .72rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.m-paper .pn a:hover>span:last-child{color:var(--accent)}

/* Reading meta line + appearance control (inserted by reader.js) */
.rmeta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.1rem;margin:1.3rem 0 0;font:500 .82rem/1.4 var(--f-body);color:var(--muted)}
.rmeta>span:not(.rmode)+span:not(.rmode)::before{content:"·";margin-right:1.1rem;color:var(--faint)}
.rmeta a{color:var(--accent);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.rmode{display:inline-flex;border:1px solid var(--line);margin-left:auto}
.rmode button{font:inherit;font-size:.78rem;padding:.28rem .65rem;background:transparent;color:var(--muted);border:0;cursor:pointer}
.rmode button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.rmode button+button{border-left:1px solid var(--line)}

/* Mobile: contents sheet + section pill */
.rtoc{display:none}
.rpill{display:none}
@media (max-width:1020px){
  html:root{--r-shell:var(--r-measure)}
  .m-paper .reading{grid-template-columns:minmax(0,1fr)!important}
  .rtoc{display:block;box-sizing:border-box;width:calc(100% - 2*var(--r-pad));max-width:var(--r-measure);margin:0 auto 1.6rem;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
  .rtoc summary{cursor:pointer;list-style:none;padding:.85rem 0;font:600 .9rem/1.3 var(--f-body);color:var(--ink);display:flex;justify-content:space-between}
  .rtoc summary::after{content:"+";font-weight:500;color:var(--accent)}
  .rtoc[open] summary::after{content:"–"}
  .rtoc nav{display:grid;padding:0 0 .9rem}
  .rtoc nav a{padding:.5rem 0;font:450 .95rem/1.35 var(--f-body);color:var(--ink-soft);border-top:1px solid var(--line-soft);min-height:44px;display:flex;align-items:center}
  .rpill{
    display:flex;position:fixed;left:50%;bottom:max(.9rem,env(safe-area-inset-bottom));z-index:250;
    transform:translate(-50%,160%);transition:transform .22s ease;max-width:calc(100vw - 2rem);
    align-items:center;gap:.6rem;padding:.6rem .95rem;min-height:44px;background:var(--ink);color:var(--bg);
    border:0;font:500 .82rem/1.2 var(--f-body);cursor:pointer;box-shadow:0 6px 24px rgba(20,23,32,.18)}
  .rpill.show{transform:translate(-50%,0)}
  .rpill b{font-family:var(--f-mono);font-weight:500;color:#f2b79a;flex:none}
  .rpill span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-paper .pn{flex-direction:column}
  .m-paper .pn a{max-width:100%}
  .m-paper .pn-next{text-align:left;margin-left:0}
  .rmode{margin-left:0}
  .m-paper .paper-toc>*{padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important}
}
@media (prefers-reduced-motion:reduce){.rpill{transition:none}}

/* ---------- Other templates ---------- */
.work-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media (max-width:700px){.work-summary{grid-template-columns:1fr!important}}
.work-summary p{font-family:var(--f-prose);font-size:1rem!important;line-height:1.55!important;color:var(--ink-soft)}
.about-copy p,.about-narrative p{font-family:var(--f-prose);font-size:var(--r-body)!important;line-height:1.66!important;max-width:62ch;color:var(--ink-soft)}
.hero3 .sub,.hubhero .lede,.hubhero>p{font-family:var(--f-prose);font-size:clamp(1.08rem,1rem + .35vw,1.25rem)!important;line-height:1.55!important;max-width:56ch}
@media (max-width:600px){.herostmt{font-size:clamp(2.05rem,8.4vw,2.6rem)!important;line-height:1.06!important}}

@media print{
  html:root,html[data-read]{--bg:#fff;--ink:#000;--ink-soft:#111;--muted:#333;--rx:#000}
  .rpill,.rtoc,.rmode,#rprog{display:none!important}
  .m-paper .prose{font-size:10.5pt!important;line-height:1.5!important}
}

/* Classic pages on small screens: show the full name, links on their own row */
@media (max-width:760px){
  .gnav:not(:has(.kbd)){flex-wrap:wrap!important;row-gap:.35rem!important}
  .gnav:not(:has(.kbd)) .brand{max-width:none!important;overflow:visible!important;text-overflow:clip!important;flex:1 0 100%}
  .gnav:not(:has(.kbd)) .links{flex:1 0 100%}
}