/* A Theory of Everything — book styles. Original CSS; layout inspired by classic web-book design. */
:root{
  --ink:29,45,53; --paper:255,255,255; --accent:166,108,40;
  --base:calc(1.0rem + 0.35vw);
  --mk-s:rgba(var(--ink),.16); --mk-d:rgba(var(--accent),.55);
  --tint-s:rgba(var(--ink),.045); --tint-d:rgba(var(--accent),.10);
  --gw:15rem; --gap:2.25rem;
}
@media (prefers-color-scheme:dark){
  :root{--ink:236,232,224;--paper:18,20,22;--accent:226,170,98;--mk-s:rgba(var(--ink),.22);--tint-s:rgba(var(--ink),.06);--tint-d:rgba(var(--accent),.13)}
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;overflow-anchor:none}
body{margin:0;font-family:"Source Serif 4",Charter,"Bitstream Charter","Iowan Old Style",Georgia,serif;font-size:var(--base);line-height:1.5;color:rgb(var(--ink));background:rgb(var(--paper));overflow-x:hidden;font-optical-sizing:auto}
::selection{color:rgb(var(--paper));background:rgb(var(--ink))}
a{color:rgb(var(--ink))}
h1,h2,h3{font-weight:700;line-height:1.2;margin:1.5em 0 0}
p{margin:1em 0 0}
ul,ol{margin:1em 0 0 1.1em;padding:0}
li{margin:.2em 0 0;padding-left:.15em}
blockquote{margin:1em 0 0;padding:0 0 0 1em;border-left:.15rem solid rgb(var(--ink));font-style:italic}
blockquote p:first-child{margin-top:0}
strong{font-weight:700}
.icon{width:1.05em;height:.8em;fill:currentColor;flex-shrink:0;margin-right:.6em}
.button{display:inline-flex;align-items:center;padding:.5em .95em;border-radius:1.25em;background:rgb(var(--ink));color:rgb(var(--paper));font-weight:700;text-decoration:none;line-height:1.25;border:0;font:inherit;font-weight:700;cursor:pointer}
.button:hover,.button:visited{color:rgb(var(--paper))}

/* ---------- layout ---------- */
.wb{display:grid;grid-template-columns:minmax(0,1fr);padding:1.5rem 1.4rem 7rem;max-width:110rem;margin:0 auto}
.intro__book-title{font-size:.95em}
.intro__masthead{margin:2.2em 0 0;text-transform:uppercase;letter-spacing:.25em;font-size:.62em}
.intro__title{margin:.35em 0 0;font-size:2em}
.intro__title a{text-decoration:none}
.intro__draft{margin:.6em 0 0;font-size:.72em;font-style:italic;opacity:.75}
.intro__sections,.intro__next{display:none}
.content{min-width:0}
.text{counter-reset:sn;max-width:34em}
.text h2{font-size:1.55em;scroll-margin-top:1.5rem;position:relative}
.text>.sec:first-child>p:first-child{margin-top:1.4em}
.footer{margin:4em 0 0;padding:1em 0 0;border-top:.08rem solid rgb(var(--ink));font-size:.7em;max-width:calc(34em / .7)}

@media (min-width:50em){
  :root{--base:calc(.62rem + .78vw)}
  .wb{grid-template-columns:minmax(13em,.85fr) minmax(0,2.5fr);padding:2em 2em 4em}
  .intro__content{position:sticky;top:2em;text-align:right;padding-top:.2em}
  .intro__sections{display:block;list-style:none;margin:.9em 0 0;padding:0}
  .intro__section{font-size:.78em;font-style:italic;margin:.25em 0 0;padding:0}
  .intro__next{display:block;font-size:.78em;margin-top:1.2em}
  .content{padding:2.65em 1em 0 3.25em}
}
@media (min-width:76em){
  .text{max-width:calc(32em + var(--gw) + var(--gap));padding-right:calc(var(--gw) + var(--gap))}
}
@media (min-width:110em){:root{--base:1.45rem}}

/* ---------- gutter notes ---------- */
.sn-ref{cursor:pointer;color:rgb(var(--accent));counter-increment:sn}
.sn-ref::after{content:counter(sn);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.6em;font-weight:600;vertical-align:.55em;line-height:0;padding:0 .12em 0 .08em}
.sn-tog{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.sn-tog:focus-visible+.sn,.sn-ref:hover{outline:none}
.sn{display:none;font-size:.78em;line-height:1.45;font-style:normal}
.sn::before{content:counter(sn) ".\00a0";font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:600;font-size:.82em;color:rgb(var(--accent))}
.sn-tog:checked+.sn{display:block;margin:.55em 0 .7em;padding:.55em .8em;border-left:.15rem solid rgb(var(--accent));background:rgba(var(--ink),.04);border-radius:0 .3em .3em 0}
blockquote .sn{font-style:normal}
@media (min-width:76em){
  .sn,.sn-tog:checked+.sn{display:block;float:right;clear:right;width:var(--gw);margin:.15em calc(-1 * (var(--gw) + var(--gap))) .9em 0;padding:0 0 0 .8em;border-left:.08rem solid rgba(var(--ink),.35);background:none;border-radius:0;font-size:.7em;color:rgba(var(--ink),.85);font-style:italic;position:relative}
  .sn-ref{cursor:default}
  li .sn,blockquote .sn{margin-right:calc(-1 * (var(--gw) + var(--gap)))}
}

/* ---------- depth levels ---------- */
html:not(.js) [data-l="d"],
html.js[data-depth="1"] .text>[data-l="s"],html.js[data-depth="1"] .text>[data-l="d"],html.js[data-depth="2"] .text>[data-l="d"],
html.js[data-depth="1"] .sec [data-l="s"],html.js[data-depth="1"] .sec [data-l="d"],
html.js[data-depth="2"] .sec [data-l="d"],
html.js[data-depth="1"] :is(.intro,.toc) [data-l="s"],html.js[data-depth="1"] :is(.intro,.toc) [data-l="d"],html.js[data-depth="2"] :is(.intro,.toc) [data-l="d"],
html:not(.js) :is(.intro,.toc) [data-l="d"]{display:none}
.text [data-l].lv-hold{display:revert !important}
.text :is(p,ul,ol,blockquote,li)[data-l]{position:relative}
.text :is(p,ul,ol,blockquote)[data-l]::before,.text li[data-l]::before{content:"";position:absolute;left:-1.05rem;top:.3em;bottom:.3em;width:.14rem;border-radius:.1rem;background:var(--mk-s)}
.text :is(p,ul,ol,blockquote,li)[data-l="d"]::before{background:var(--mk-d)}
.text ul[data-l]::before,.text ol[data-l]::before{left:-2.1rem}
.text li[data-l]::before{left:-2.15rem}
.text blockquote[data-l]::before{left:-1.2rem}
.text span.lv[data-l="s"]{background:var(--tint-s);border-radius:.2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.text span.lv[data-l="d"]{background:var(--tint-d);border-radius:.2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.text span.lv span.lv{background:none}
.text section.sec[data-l]>h2::before{content:"";position:absolute;left:-1.05rem;top:.15em;bottom:.15em;width:.14rem;background:var(--mk-d);border-radius:.1rem}
.text p[data-l="d"],.text li[data-l="d"]{}
html.no-js .text [data-l]::before{display:none}

/* depth control */
.depth{margin:2em 0 0 auto;max-width:15em;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.62em;text-align:left;color:rgb(var(--ink))}
html.no-js .depth{display:none}
.depth__head{display:flex;justify-content:space-between;align-items:baseline;text-transform:uppercase;letter-spacing:.2em;font-weight:600}
.depth__value{letter-spacing:.06em;text-transform:none;font-weight:700;font-size:1.05em}
.depth__range{-webkit-appearance:none;appearance:none;width:100%;height:1.6em;background:none;margin:.5em 0 .1em;cursor:pointer}
.depth__range::-webkit-slider-runnable-track{height:.28em;border-radius:1em;background:linear-gradient(90deg,rgba(var(--ink),.25),rgba(var(--accent),.65))}
.depth__range::-moz-range-track{height:.28em;border-radius:1em;background:linear-gradient(90deg,rgba(var(--ink),.25),rgba(var(--accent),.65))}
.depth__range::-webkit-slider-thumb{-webkit-appearance:none;width:1.45em;height:1.45em;margin-top:-.585em;border-radius:50%;background:rgb(var(--ink));border:.22em solid rgb(var(--paper));box-shadow:0 0 0 .08em rgb(var(--ink))}
.depth__range::-moz-range-thumb{width:1.1em;height:1.1em;border-radius:50%;background:rgb(var(--ink));border:.22em solid rgb(var(--paper));box-shadow:0 0 0 .08em rgb(var(--ink))}
.depth__range:focus-visible{outline:.15em solid rgb(var(--accent));outline-offset:.2em;border-radius:1em}
.depth__stops{display:flex;justify-content:space-between}
.depth__stops button{font:inherit;background:none;border:0;padding:.3em .1em;color:rgba(var(--ink),.6);cursor:pointer;display:inline-flex;align-items:center;gap:.35em}
.depth__stops button[aria-pressed="true"]{color:rgb(var(--ink));font-weight:700}
.sw{display:inline-block;width:.22em;height:1em;border-radius:.1em}
.sw-s{background:var(--mk-s)}.sw-d{background:var(--mk-d)}
@media (max-width:49.99em){
  .intro .depth{position:fixed;z-index:20;left:50%;bottom:max(.75rem,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(22rem,calc(100% - 1.5rem));max-width:none;margin:0;font-size:.8rem;padding:.6em 1.1em .45em;border-radius:1.2em;background:rgba(var(--paper),.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 .3em 1.6em rgba(0,0,0,.18),0 0 0 .06em rgba(var(--ink),.12)}
  .depth__range{margin:.2em 0 0}
  .text p[data-l]::before,.text blockquote[data-l]::before{left:-.75rem}
  .text ul[data-l]::before,.text ol[data-l]::before,.text li[data-l]::before{left:-1.8rem}
  .text section.sec[data-l]>h2::before{left:-.75rem}
  .wb{padding-left:1.25rem;padding-right:1.25rem}
}

/* pagination */
.pagination{display:grid;grid-template-columns:1fr 1fr;gap:1em;margin:3.5em 0 0;max-width:34em}
.pagination a{display:flex;flex-direction:column;text-decoration:none;font-weight:700;font-size:.9em;line-height:1.3}
.pagination span{font-weight:400;font-size:.7em;text-transform:uppercase;letter-spacing:.22em;margin-bottom:.35em}
.pagination__next{text-align:right;grid-column:2}
.pagination a:hover{text-decoration:underline}

/* slide-in menu */
.menu{position:fixed;z-index:50;top:0;bottom:0;left:0;width:min(26rem,88vw);overflow-y:auto;padding:1.4rem 1.8rem 2rem;background:rgba(var(--paper),.97);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 0 2em rgba(0,0,0,.15);font-size:1rem;transform:translateX(-102%);transition:transform .3s ease}
.menu[hidden]{display:block;visibility:hidden}
.menu.menu--show{transform:none;visibility:visible}
.menu__close{position:absolute;top:.8rem;right:1rem;font-size:1.8rem;line-height:1;border:0;background:none;color:rgb(var(--ink));cursor:pointer}
.menu__book{font-weight:700;font-size:1.3em;margin:.4em 0 0}.menu__book a{text-decoration:none}
.menu__part{margin:1.6em 0 0;padding:.5em 0 0;border-top:.08rem solid rgb(var(--ink));font-weight:700;font-size:.9em}
.menu__list{list-style:none;margin:.3em 0 0;padding:0}
.menu__list a{display:block;padding:.35em 0;text-decoration:none}
.menu__list a:hover{text-decoration:underline}
.menu__num{display:block;text-transform:uppercase;letter-spacing:.22em;font-size:.6em;opacity:.7}
.scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.25)}

/* home */
.landing-title{font-size:2.6em;line-height:1.05;margin:0}
.landing-subtitle{font-size:1.15em;font-weight:700;margin:.6em 0 0}
.landing-author{font-style:italic;margin:.3em 0 0}
.landing-lede{margin:1.2em 0 0;font-size:.9em}
.landing-start{margin:1.5em 0 0}
.landing-depth__note{font-size:.72em;font-style:italic;margin:2.2em 0 0}
.home .depth{margin-top:.8em}
.toc{max-width:34em}
.toc__part-title{display:block;margin:2em 0 0;padding:.5em 0 0;border-top:.08rem solid rgb(var(--ink));font-weight:700}
.toc__part:first-child .toc__part-title{margin-top:1.5em}
.toc__chapters{list-style:none;margin:0;padding:0}
.toc__chapter{margin:1.6em 0 0;padding:0}
.toc__chapter-number{margin:0;text-transform:uppercase;letter-spacing:.25em;font-size:.6em}
.toc__chapter-title{margin:.15em 0 0;font-size:1.15em}
.toc__chapter-title a{text-decoration:none}.toc__chapter-title a:hover{text-decoration:underline}
.toc__sections{list-style:none;margin:.45em 0 0;padding:0 0 0 .6em;border-left:.08rem solid rgb(var(--ink))}
.toc__section{font-size:.8em;font-style:italic;margin:.15em 0 0}
@media (min-width:50em){
  .home .intro__content{text-align:right}
  .landing-title{font-size:3.2em}
  .home .content{padding-top:1em}
}
@media (max-width:49.99em){.home .wb{padding-bottom:3rem}.home .depth{position:static!important;transform:none!important;width:auto!important;box-shadow:none!important;background:none!important;padding:0!important;font-size:.75rem!important}}

/* animation helper */
.lv-flash{animation:lvflash 1.4s ease-out}
@keyframes lvflash{from{background-color:rgba(var(--accent),.22)}}
@media (prefers-reduced-motion:reduce){.menu{transition:none}.lv-flash{animation:none}}
@media print{.intro__book-title,.depth,.pagination,.menu{display:none!important}html [data-l]{display:revert!important}}