
:root{
  --paper:#f6f1e7; --paper-2:#efe7d6; --ink:#241f18; --ink-soft:#5b5344; --ink-faint:#8a8069;
  --gold:#b08428; --gold-pale:#e7d3a3; --line:#d8cdb4;
  --lane-doc:#4a6b4a; --lane-inf:#8a6d2f; --lane-hyp:#9a5b3c;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;font-weight:300;line-height:1.75;font-size:16px}
.grain{position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.5;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(36,31,24,.35) .5px, transparent .5px);background-size:4px 4px}
.masthead{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;background:rgba(246,241,231,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.masthead a.brand{display:block}
.masthead .wordmark{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none}
main{max-width:1080px;margin:0 auto;padding:120px 28px 80px}
.module{position:relative;padding:72px 0;border-bottom:1px solid var(--line)}
.module::before{content:attr(data-num);position:absolute;top:34px;right:0;font-family:'Cormorant Garamond',serif;
  font-size:clamp(72px,11vw,148px);color:var(--gold);opacity:.08;line-height:1;pointer-events:none}
.kicker{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.kicker .rule{height:1px;width:56px;background:var(--gold);flex:none}
.kicker .label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.module h1,.module h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(30px,4.6vw,52px);line-height:1.12;letter-spacing:-.01em;margin-bottom:20px}
.module h2{font-size:clamp(26px,3.6vw,40px)}
.lede{font-size:18px;font-weight:300;color:var(--ink-soft);max-width:62ch}
.prose{max-width:66ch}
.prose p{margin-bottom:18px}
.prose p:last-child{margin-bottom:0}
.pull{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(20px,2.6vw,26px);line-height:1.45;
  color:var(--ink);border-left:2px solid var(--gold);padding:6px 0 6px 22px;margin:28px 0;max-width:56ch}
figure.fig{margin:34px 0;position:relative}
figure.fig .frame{position:relative;aspect-ratio:21/9;overflow:hidden;background:var(--paper-2)}
figure.fig img{width:100%;height:100%;object-fit:cover;display:block}
figure.fig .frame::before,figure.fig .frame::after{content:"";position:absolute;width:22px;height:22px;z-index:2}
figure.fig .frame::before{top:10px;left:10px;border-top:1px solid var(--gold);border-left:1px solid var(--gold)}
figure.fig .frame::after{bottom:10px;right:10px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold)}
figure.fig figcaption{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-top:10px}
.tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:2px 8px;border:1px solid;margin-right:10px;vertical-align:1px;white-space:nowrap}
.tag[data-lane="doc"]{color:var(--lane-doc);border-color:var(--lane-doc)}
.tag[data-lane="inf"]{color:var(--lane-inf);border-color:var(--lane-inf)}
.tag[data-lane="hyp"]{color:var(--lane-hyp);border-color:var(--lane-hyp)}
body[data-filter="doc"] .tag[data-lane="inf"],body[data-filter="doc"] .tag[data-lane="hyp"],
body[data-filter="inf"] .tag[data-lane="doc"],body[data-filter="inf"] .tag[data-lane="hyp"],
body[data-filter="hyp"] .tag[data-lane="doc"],body[data-filter="hyp"] .tag[data-lane="inf"]{display:none}
.filters{display:flex;gap:8px;margin:26px 0 6px}
.filters button{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;background:transparent;border:1px solid var(--line);color:var(--ink-faint);cursor:pointer}
.filters button.on{border-color:var(--gold);color:var(--gold)}
details.practice{margin:26px 0;border:1px solid var(--line);background:var(--paper-2)}
details.practice summary{list-style:none;cursor:pointer;padding:14px 18px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
details.practice summary::before{content:"+ ";color:var(--gold)}
details.practice[open] summary::before{content:"– "}
details.practice .pbody{padding:4px 18px 20px;max-width:66ch}
details.practice .pbody p{margin-bottom:12px}
details.practice .pbody p:last-child{margin-bottom:0}
.law{border-top:1px solid var(--line);padding:22px 0}
.law:last-of-type{border-bottom:1px solid var(--line)}
.law .n{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold);float:left;margin-right:16px;line-height:1}
.law h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:24px;margin-bottom:6px}
.law p{color:var(--ink-soft);max-width:60ch}
.roadmap{margin:26px 0;border:1px solid var(--line);background:var(--paper-2)}
.roadmap .rrow{display:flex;gap:16px;align-items:baseline;padding:12px 18px;border-bottom:1px solid var(--line)}
.roadmap .rrow:last-child{border-bottom:none}
.roadmap .rn{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold);flex:none;width:26px}
.roadmap .rt{font-size:15px;color:var(--ink-soft)}
.roadmap .rt b{font-weight:500;color:var(--ink)}
.close{text-align:center;padding:80px 0 30px}
.close .signoff{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(22px,3vw,30px);margin-bottom:30px}
.btn{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);border:1px solid var(--ink);padding:14px 30px;text-decoration:none}
.btn:hover{background:var(--gold);border-color:var(--gold);color:var(--paper)}
footer{max-width:1080px;margin:0 auto;padding:30px 28px 50px;display:flex;justify-content:space-between;gap:16px;
  border-top:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.rail{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;gap:16px}
.rail a{position:relative;width:7px;height:7px;border-radius:50%;background:var(--line);display:block}
.rail a.active{background:var(--gold)}
.rail a.active::after{content:attr(data-n);position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--gold)}
.js .reveal{opacity:0;transform:translateY(14px)}
.js .module.in .reveal{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
.js .module.in .reveal:nth-child(2){transition-delay:.08s}
.js .module.in .reveal:nth-child(3){transition-delay:.16s}
.js .module.in .reveal:nth-child(4){transition-delay:.24s}
.js .module.in .reveal:nth-child(5){transition-delay:.32s}
.js .module.in .reveal:nth-child(6){transition-delay:.40s}
.js .module.in .reveal:nth-child(7){transition-delay:.48s}
@media(max-width:1220px){.rail{display:none}}
@media(max-width:720px){main{padding-top:96px}.module{padding:52px 0}}
