/* Beyond Purdue. Plain CSS, no framework. */
:root{
  --paper:#f4f1ea; --paper-2:#ebe6db; --card:#fbf9f4; --ink:#14212e; --ink-2:#3b4855; --muted:#6c7680;
  --navy:#1f4e79; --navy-d:#163a5b; --l0:#b3261e; --diode:#c55a11; --line:#d9d2c4; --line-2:#c9c0ae;
  --f-display:'Zodiak','Iowan Old Style',serif; --f-body:'Satoshi','Segoe UI',sans-serif; --f-mono:'JetBrains Mono','SFMono-Regular',monospace;
  --w:1180px; --prose:680px; --r:6px;
  --t-sm:clamp(.8rem,.78rem + .1vw,.875rem); --t-base:clamp(1rem,.97rem + .15vw,1.0625rem);
  --t-lg:clamp(1.125rem,1.06rem + .3vw,1.3rem); --t-xl:clamp(1.5rem,1.3rem + .9vw,2.1rem);
  --t-2xl:clamp(2rem,1.6rem + 2vw,3.2rem); --t-hero:clamp(2.6rem,1.6rem + 4.6vw,5.6rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--t-base);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--diode)}
:focus-visible{outline:2px solid var(--diode);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:9}
.skip:focus{left:8px}
h1,h2,h3{font-family:var(--f-display);font-weight:500;letter-spacing:-.01em;line-height:1.12;margin:0;text-wrap:balance}
p{margin:0 0 1em}
.mono{font-family:var(--f-mono);font-size:.86em;letter-spacing:-.01em}
.eyebrow{font-family:var(--f-mono);font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 14px}
.eyebrow b{color:var(--diode);font-weight:500}

/* Header */
.site-h{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-h .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--f-display);font-size:1.25rem;font-weight:500;letter-spacing:-.01em}
.brand svg{width:38px;height:28px;flex:none}
.nav{display:flex;gap:clamp(14px,2.4vw,30px);font-size:var(--t-sm);font-weight:500}
.nav a{color:var(--ink-2);text-decoration:none;padding:6px 0;border-bottom:1.5px solid transparent}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--diode)}

/* Hero */
.hero{padding:clamp(56px,9vw,120px) 0 clamp(40px,6vw,72px);border-bottom:1px solid var(--line)}
.hero h1{font-size:var(--t-hero);font-weight:400;max-width:15ch}
.hero h1 em{font-style:italic;color:var(--navy)}
.hero .lede{font-size:var(--t-lg);color:var(--ink-2);max-width:56ch;margin:26px 0 0}
.lane{margin:clamp(36px,5vw,60px) 0 0;color:var(--navy);position:relative}
.lane-track{position:relative}
.lane-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 14px;background:var(--paper);line-height:0}

.lane svg{width:100%;height:auto;overflow:visible}
.lane .lane-mark svg{width:72px;height:52px;display:block}
.lane .lane-labels{margin-top:22px}
.lane .pulse{animation:flow 3.6s linear infinite}
@keyframes flow{from{transform:translateX(0)}to{transform:translateX(1000px)}}
@media (prefers-reduced-motion:reduce){.lane .pulse{animation:none;opacity:0}}
.lane-labels{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:var(--t-sm);color:var(--muted);margin-top:10px}
.hero-meta{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:34px;font-size:var(--t-sm);color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:500;font-size:var(--t-sm)}
.btn:hover{background:var(--navy);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--ink);color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* Sections */
section.block{padding:clamp(40px,5vw,72px) 0;border-bottom:1px solid var(--line)}
.sec-head{display:grid;gap:14px;max-width:900px;margin-bottom:clamp(24px,3vw,36px)}
.sec-head h2{font-size:var(--t-2xl)}
.sec-head>p{color:var(--ink-2);max-width:68ch;margin:0;font-size:var(--t-lg)}
.sec-head .step{margin:0 0 6px}
.step{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--diode)}

/* Laws */
.laws{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.laws li{padding:22px 22px 26px 0;border-bottom:1px solid var(--line);position:relative}
.laws li:not(:nth-child(3n+1)){padding-left:22px;border-left:1px solid var(--line)}
.laws .n{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--muted);display:block;margin-bottom:8px}
.laws h3{font-size:var(--t-lg);margin-bottom:8px}
.laws p{margin:0;color:var(--ink-2);font-size:.98em}
.laws li.zero .n,.laws li.zero h3{color:var(--l0)}

.order-note{margin-top:20px;font-size:var(--t-sm);color:var(--muted)}

.meta-law{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;padding:18px 22px;background:var(--ink);color:var(--paper);border-radius:var(--r) var(--r) 0 0}
.meta-law .n{font-family:var(--f-mono);font-size:var(--t-sm);color:#f0a46c}
.meta-law p{margin:0;font-family:var(--f-display);font-size:var(--t-lg)}
.laws.after-meta{border-top:0}
/* Levels */
.levels{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.lvl{display:grid;grid-template-columns:120px 150px 1fr 1fr;gap:20px;padding:16px 20px;border-top:1px solid var(--line);align-items:baseline}
.lvl:first-child{border-top:0}
.lvl.head{background:var(--paper-2);font-family:var(--f-mono);font-size:var(--t-sm);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding-block:10px}
.lvl .code{font-family:var(--f-display);font-size:1.35rem;color:var(--navy)}
.lvl .code small{display:block;font-family:var(--f-body);font-size:.78rem;color:var(--muted);margin-top:2px}
.lvl.l0 .code{color:var(--l0)}
.lvl .auth{font-weight:600}
.lvl .never{color:var(--muted)}
.lvl-note{margin-top:16px;font-size:var(--t-sm);color:var(--muted)}

/* Split */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(28px,5vw,72px);align-items:center}
.split.rev{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.split h2{font-size:var(--t-xl);margin-bottom:16px}
.split p{color:var(--ink-2)}
figure{margin:0}
.fig{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(8px,1.4vw,16px)}
figcaption{font-size:var(--t-sm);color:var(--muted);margin-top:10px;line-height:1.45}
pre.names{font-family:var(--f-mono);font-size:clamp(.72rem,.66rem + .3vw,.86rem);line-height:1.85;background:var(--ink);color:#e9e4d8;padding:22px 24px;border-radius:var(--r);overflow-x:auto;margin:0}
pre.names i{font-style:normal;color:#8fa3b5}
pre.names b{font-weight:400;color:#f0a46c}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(40px,5vw,64px)}
.pillar{border-top:1px solid var(--ink);padding-top:18px}
.pillar h3{font-size:var(--t-lg);margin-bottom:8px}
.pillar p{color:var(--ink-2);margin:0;font-size:.97em}

/* Works */
.works{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.video{border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:16/9}
.video video{width:100%;height:100%;display:block}
.doclist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.doclist a{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:.96em}
.doclist a span{font-family:var(--f-mono);font-size:.78rem;color:var(--muted);white-space:nowrap}
.doclist a:hover{color:var(--navy)}

/* Cards */
.feature-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.card{grid-column:span 2;display:flex;flex-direction:column;color:inherit;text-decoration:none}
.card.lead{grid-column:span 4;grid-row:span 2}
.card.lead + .card,.card.lead + .card + .card{grid-column:span 2}
.card.lead ~ .card:nth-child(n+4){grid-column:span 3}
.card .thumb{aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);background:var(--paper-2);border:1px solid var(--line)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .thumb img{transform:scale(1.03)}
.card .meta{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--f-mono);font-size:.75rem;color:var(--muted);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.05em}
.card .meta .tag{color:var(--diode)}
.card h3{font-size:var(--t-lg);transition:color .2s}
.card.lead h3{font-size:var(--t-xl)}
.card:hover h3{color:var(--navy)}
.card p{color:var(--ink-2);margin:8px 0 0;font-size:.95em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card.lead p{-webkit-line-clamp:4}
.more{margin-top:clamp(28px,4vw,44px)}

/* Blog index list */
.archive{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.archive li a{display:grid;grid-template-columns:72px 150px minmax(0,1fr) 140px;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.archive .no{font-family:var(--f-mono);color:var(--diode);font-size:var(--t-sm)}
.archive .d{font-family:var(--f-mono);color:var(--muted);font-size:var(--t-sm);white-space:nowrap}
.archive .t{font-family:var(--f-display);font-size:var(--t-lg);line-height:1.25}
.archive .tg{font-size:var(--t-sm);color:var(--muted);text-align:right}
.archive li a:hover .t{color:var(--navy)}

/* Article */
.art-h{padding:clamp(48px,7vw,96px) 0 clamp(28px,4vw,44px)}
.art-h .wrap{max-width:calc(var(--prose) + 300px)}
.art-h h1{font-size:var(--t-2xl);font-weight:400;max-width:22ch}
.art-h .dek{font-size:var(--t-lg);color:var(--ink-2);max-width:58ch;margin:20px 0 0}
.byline{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font-size:var(--t-sm);color:var(--muted)}
.byline b{color:var(--ink);font-weight:500}
.cover{max-width:calc(var(--prose) + 300px);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.cover img{width:100%;border-radius:var(--r);border:1px solid var(--line)}
.art-body{display:grid;grid-template-columns:minmax(0,var(--prose)) 240px;gap:60px;max-width:calc(var(--prose) + 300px);margin:0 auto;padding:clamp(36px,5vw,60px) clamp(20px,4vw,40px) clamp(48px,6vw,80px)}
.prose{font-size:clamp(1.06rem,1rem + .25vw,1.17rem);line-height:1.72}
.prose>*{margin:0 0 1.1em}
.prose h2{font-size:var(--t-xl);margin:1.8em 0 .6em}
.prose h3{font-size:var(--t-lg);margin:1.6em 0 .5em;font-weight:600}
.prose ul,.prose ol{padding-left:1.2em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--diode)}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:2px solid var(--diode);font-family:var(--f-display);font-size:1.22em;line-height:1.45;color:var(--ink)}
.prose figure{margin:2em 0}
.prose figure img{border-radius:var(--r);border:1px solid var(--line);background:#fff}
.prose .lead-p{font-size:1.1em;color:var(--ink)}
.prose a{word-break:break-word}
.note{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;font-size:.92em;color:var(--ink-2)}
.aside{position:sticky;top:90px;align-self:start;font-size:var(--t-sm);color:var(--ink-2)}
.aside h4{font-family:var(--f-mono);font-weight:500;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px}
.aside .box{border-top:1px solid var(--ink);padding-top:14px;margin-bottom:28px}
.aside p{margin:0 0 10px}
.aside .slogan{font-family:var(--f-display);font-size:1.08rem;line-height:1.35;color:var(--ink)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--line);padding-top:24px;margin-top:40px}
.pn a{text-decoration:none;color:var(--ink)}
.pn small{display:block;font-family:var(--f-mono);font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.pn span{font-family:var(--f-display);font-size:1.05rem;line-height:1.3}
.pn a:hover span{color:var(--navy)}
.pn .next{text-align:right}
.related{background:var(--paper-2);padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--line)}
.related h2{font-size:var(--t-xl);margin-bottom:28px}
.related .feature-grid .card{grid-column:span 2}

/* Footer */
.site-f{padding:56px 0 44px;font-size:var(--t-sm);color:var(--muted)}
.site-f .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:32px}
.site-f .slogan{font-family:var(--f-display);font-size:1.3rem;line-height:1.3;color:var(--ink);max-width:30ch;margin-bottom:12px}
.site-f h4{font-family:var(--f-mono);font-weight:500;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;color:var(--muted)}
.site-f ul{list-style:none;margin:0;padding:0}
.site-f li{margin:6px 0}
.site-f a{color:var(--ink-2);text-decoration:none}
.site-f a:hover{color:var(--diode)}
.fine{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

/* Responsive */
@media (max-width:960px){
  .laws{grid-template-columns:repeat(2,minmax(0,1fr))}
  .laws li,.laws li:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .laws li:nth-child(2n){padding-left:20px;border-left:1px solid var(--line)}
  .art-body{grid-template-columns:minmax(0,1fr)}
  .aside{position:static;display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .aside .box{margin:0}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card,.card.lead,.card.lead + .card,.card.lead + .card + .card,.related .feature-grid .card{grid-column:span 1;grid-row:auto}
  .card.lead,.card.lead ~ .card:nth-child(n+4){grid-column:1/-1}
  .card.lead ~ .card:nth-child(n+4){grid-column:span 1}
  .works{grid-template-columns:minmax(0,1fr)}
  .lvl{grid-template-columns:100px 1fr;gap:6px 16px}
  .lvl .allowed,.lvl .never{grid-column:2}
  .lvl.head{display:none}
}
@media (max-width:720px){
  .sec-head,.split,.split.rev{grid-template-columns:minmax(0,1fr)}
  .split.rev .fig{order:2}
  .pillars{grid-template-columns:minmax(0,1fr)}
  .laws{grid-template-columns:minmax(0,1fr)}
  .laws li:nth-child(2n){padding-left:0;border-left:0}
  .feature-grid,.related .feature-grid{grid-template-columns:minmax(0,1fr)}
  .card.lead{grid-column:auto}
  .archive li a{grid-template-columns:56px minmax(0,1fr);gap:4px 14px}
  .archive .d{grid-column:2;order:3}
  .archive .tg{display:none}
  .site-f .wrap{grid-template-columns:1fr 1fr}
  .site-f .wrap>div:first-child{grid-column:1/-1}
  .aside{grid-template-columns:minmax(0,1fr)}
  .nav{gap:14px}
  .nav .hide-s{display:none}
  .pn{grid-template-columns:1fr}
  .pn .next{text-align:left}
}
.prose p,.prose li,.prose a{overflow-wrap:anywhere}
.brand{white-space:nowrap}
@media (max-width:520px){
  .nav{gap:12px;font-size:13px}
  .nav a{white-space:nowrap}
  .lane-labels{font-size:11px;gap:8px}
  .lane-labels span:nth-child(2){display:none}
  .lane .lane-mark svg{width:50px;height:36px}
  .lane .lane-mark{padding:0 8px}
}

/* The arrow mark page */
.mk-hero{background:#0b1628;color:#e8dcc4;padding:clamp(56px,8vw,110px) 0 clamp(44px,6vw,80px)}
.mk-hero h1{font-size:var(--t-2xl);font-weight:400;color:#fff;max-width:20ch}
.mk-hero .lede{color:#c9cfdb;font-size:var(--t-lg);max-width:52ch;margin:22px 0 0}
.mk-hero .eyebrow{color:#8c97ab}.mk-hero .eyebrow b{color:#f2a93b}
.stage{margin:clamp(36px,5vw,64px) auto 0;max-width:820px}
.reader{width:100%;height:auto;display:block;overflow:visible}
.reader text{font-family:var(--f-mono);font-size:.8333px;opacity:0;transition:opacity .5s ease;transition-delay:calc(var(--i)*70ms)}
.reader rect{transition:opacity .5s ease;transition-delay:calc(var(--i)*70ms)}
.reader.read rect{opacity:.13}
.reader.read text{opacity:1}
.reader.read .r-a text,.reader.read .r-a rect,.reader.read .r-b text,.reader.read .r-b rect{transition-delay:calc(900ms + var(--i)*120ms)}
.stage-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;justify-content:center;margin-top:clamp(28px,4vw,44px)}
.mk-hero .btn{background:#f2a93b;color:#0b1628;border:0;cursor:pointer;font:inherit;font-weight:500;font-size:var(--t-sm)}
.mk-hero .btn:hover{background:#e8dcc4;color:#0b1628}
.stage-ctl .hint{font-size:var(--t-sm);color:#8c97ab}
.feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.feats li{background:var(--card);padding:28px 26px 26px}
.feats .n{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--diode)}
.feats h3{font-size:var(--t-lg);margin:10px 0 10px}
.feats p{color:var(--ink-2);margin:0}
.tbl{overflow-x:auto;border:1px solid var(--line);background:var(--card)}
table.anat{border-collapse:collapse;width:100%;font-size:var(--t-sm)}
.anat th,.anat td{text-align:left;padding:10px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.anat th{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:.75rem;color:var(--muted)}
.anat tr:last-child td{border-bottom:0}
.anat td:last-child{font-family:var(--f-mono);white-space:pre}
.sw i{display:inline-block;width:22px;height:7px;border-radius:4px;margin-right:9px;vertical-align:middle}
.sw-h i{background:#283a5a}.sw-a i{background:#f2a93b}.sw-b i{background:#60b2f0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px)}
.two h2{margin-bottom:22px}
.spec{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:0}
.spec dt{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
.spec dd{margin:0}
.pal{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pal li{display:grid;grid-template-columns:40px 90px 90px 1fr;align-items:center;gap:12px}
.pal i{width:40px;height:40px;border-radius:8px;border:1px solid var(--line)}
.pal em{font-style:normal;color:var(--muted);font-size:var(--t-sm)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pane{border-radius:10px;display:flex;align-items:center;justify-content:center;padding:clamp(32px,6vw,64px)}
.pane svg{width:min(260px,70%);height:auto}
.pane.light{background:#fff;border:1px solid var(--line)}.pane.dark{background:#0b1628}
.sizes{display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px 40px;margin-top:32px}
.sizes figure{margin:0;text-align:center}
.sz svg{width:var(--s);height:auto;display:block}
.sizes figcaption{font-family:var(--f-mono);font-size:.75rem;color:var(--muted);margin-top:10px}
.where{margin-top:32px;color:var(--ink-2);max-width:70ch}
.refs{margin:0;padding-left:1.2em;color:var(--ink-2);display:grid;gap:12px;max-width:90ch;overflow-wrap:anywhere}
@media (max-width:1020px){.feats{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.feats{grid-template-columns:1fr}}
@media (max-width:760px){.two,.duo{grid-template-columns:1fr}.pal li{grid-template-columns:36px 80px 1fr}.pal em{grid-column:2/-1;margin-top:-8px}.pal i{width:36px;height:36px}}
@media (prefers-reduced-motion:reduce){.reader text,.reader rect{transition:none}}
@media (max-width:430px){
  .brand{font-size:1.02rem;gap:7px}
  .brand svg{width:28px;height:21px}
  .nav{gap:11px;font-size:12.5px}
  .nav .the{display:none}
  .brand{font-size:0}.brand svg{width:30px;height:22px}
}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose blockquote cite{display:block;margin-top:.6em;font-family:var(--f-body);font-size:.7em;font-style:normal;color:var(--ink-2)}
.prose figure.video{margin:2em 0}
@media (max-width:360px){.brand{font-size:0}.brand svg{width:34px;height:25px}}

/* The passive data diode */
.d-hero{background:#0b1628;color:#e8dcc4;padding:clamp(48px,7vw,96px) 0}
.d-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.d-hero h1{font-size:clamp(2.3rem,1.5rem + 3.4vw,4.4rem);font-weight:400;color:#fff;max-width:14ch}
.d-hero .eyebrow{color:#9fb0c0}.d-hero .eyebrow b{color:#f2a93b}
.d-hero .lede{font-size:var(--t-lg);color:#cfd6dd;max-width:52ch;margin:24px 0 0}
.d-hero .btn{background:#f2a93b;color:#0b1628}.d-hero .btn:hover{background:#fff;color:#0b1628}
.d-hero .btn.ghost{background:transparent;color:#e8dcc4;border-color:#3a4a63}.d-hero .btn.ghost:hover{border-color:#e8dcc4}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.d-arrow img{width:100%;border-radius:10px}
.vtog{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;margin-bottom:18px}
.vtog button{font:inherit;font-size:var(--t-sm);border:0;background:transparent;color:var(--ink-2);padding:7px 16px;border-radius:999px;cursor:pointer}
.vtog button.on{background:var(--ink);color:var(--paper)}
.dvid.portrait{aspect-ratio:9/16;max-height:82vh;margin:0 auto}
.dlines{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.dlines li{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.dlines .l{font-size:1rem;color:#283a5a;padding-left:14px;border-left:4px solid #283a5a}
.dlines .ln-a .l{color:#a8650a;border-color:#f2a93b}.dlines .ln-b .l{color:#1f4e79;border-color:#60b2f0}
.dlines p{margin:0;color:var(--ink-2)}
.opwrap{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(10px,2vw,24px);overflow-x:auto}
.opath{display:block;width:100%;min-width:760px;height:auto}
.opath .bx{font-family:var(--f-display);font-size:20px}.opath .sm{font-size:12px}.opath .lb{font-size:13px;fill:#3b4855}
.opath .mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em}
.facts{display:grid;gap:18px}
.facts>div{border-top:1px solid var(--ink);padding-top:14px}
.facts h3{font-size:var(--t-lg);margin-bottom:6px}.facts p{margin:0;color:var(--ink-2)}
sup a{text-decoration:none;font-family:var(--f-mono);font-size:.75em;color:var(--diode)}
.steps{margin:0 0 18px;padding-left:1.3em;display:grid;gap:8px;color:var(--ink-2)}
.note{font-size:var(--t-sm);color:var(--muted)}
.stories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.story{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column}
.story .sec{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--diode);margin:0 0 8px}
.story h3{font-size:var(--t-lg);margin-bottom:10px}.story p{color:var(--ink-2);font-size:.95em}
.story .flow{font-size:.78rem;color:var(--navy);margin:0 0 8px}
.story .badge{display:inline-block;align-self:flex-start;font-size:.75rem;background:var(--paper-2);border-radius:999px;padding:3px 10px;margin:0 0 12px;color:var(--ink)}
.story .lim{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:.85em;color:var(--muted)}
.story .lim b{color:var(--ink-2);font-weight:600}
.incidents{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.incidents li{display:grid;grid-template-columns:170px minmax(0,1.2fr) minmax(0,1fr);gap:24px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.incidents p{margin:0}.incidents .when{font-size:var(--t-sm);color:var(--muted)}
.incidents .angle{color:var(--navy);border-left:3px solid var(--diode);padding-left:12px}
.nights{background:#0b1628;color:#e8dcc4}
.nights h2{color:#fff}.nights .split p{color:#cfd6dd}.nights .step{color:#f2a93b}
.nightlist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.nightlist li{color:#cfd6dd;padding-bottom:12px;border-bottom:1px solid #22324a}
.nightlist b{color:#fff;font-weight:500}
.nightlist .dawn{font-family:var(--f-display);font-style:italic;font-size:var(--t-lg);color:#f2a93b;border:0}
.beypur{border:1px solid var(--ink);border-radius:10px;padding:clamp(22px,3.5vw,40px);background:var(--card)}
.beypur .tagline{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--diode);margin:0 0 14px}
.bp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.bp-grid h2{font-size:var(--t-xl);margin-bottom:14px}.bp-grid p{color:var(--ink-2)}
@media (max-width:900px){.d-hero .wrap,.bp-grid{grid-template-columns:1fr}.stories{grid-template-columns:1fr 1fr}.incidents li{grid-template-columns:1fr;gap:6px}}
@media (max-width:700px){.d-arrow{max-width:440px}}
@media (max-width:640px){.stories{grid-template-columns:1fr}.dlines li{grid-template-columns:1fr;gap:6px}}

/* concept pages */
.prose .lawlist,.lawlist{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.lawlist li{border-bottom:1px solid var(--line);padding:14px 0}
.lawlist li p{margin:0}
.lawlist li:nth-child(2) b{color:var(--l0)}
a.ref{font-family:var(--f-mono);font-size:.72em;vertical-align:super;line-height:0;text-decoration:none;margin-left:2px;color:var(--muted)}
.levels.in-prose .lvl{grid-template-columns:72px 110px 1fr 1fr;gap:14px;padding:14px 16px;font-size:var(--t-sm)}
.aside ul.plain{list-style:none;padding:0;margin:0;display:grid;gap:8px}
@media (max-width:760px){.levels.in-prose .lvl{grid-template-columns:72px 1fr;gap:6px 14px}}

/* diode page layout fixes, 15 Nov 2026 */
.split p.step{color:var(--diode)}
.nights .split p.step{color:#f2a93b}
sup{line-height:0}
.nights .split{align-items:start}
@media (min-width:901px){.nights .split>div:first-child{position:sticky;top:110px}}
.opath{min-width:700px}
.ophint{display:none;margin:10px 0 0;font-size:var(--t-sm);color:var(--muted)}
@media (max-width:780px){.ophint{display:block}}
@media (max-width:560px){
  .spec{grid-template-columns:1fr;gap:2px}
  .spec dd{margin:0 0 12px}
  .beypur .actions .btn{flex:1 1 100%;justify-content:center;text-align:center}
}