@charset "UTF-8";
:root { /* paper / ink */ --paper:     #faf8f3; --paper-2:   #f3efe5; --card:      #ffffff; --ink:       #1a1a1a; --ink-2:     #444141; --muted:     #807d75; --hair:      #d8d3c4; --hair-2:    #e8e3d4; /* signals */ --alt:       #0b3d91; --alt-soft:  #dce6f5; --live:      #2f7a3a; /* product colors */ --c-workpads:    #2f7a3a; --c-bitpads:     #8b3a62; --c-bitledger:   #6b3fa0; --c-workwarrior: #b85c1e; --c-works:       #1a6b6b; --c-basics:      #8c5a2b; --c-clarkware:   #c44730; --c-telux:       #0b3d91; --c-outstack:    #3a6b3a; --c-tel:         #556b7a; --c-simba:       #7a6b3a; --c-heybabb:     #3a5a8c; --c-zako:        #8b4513; --term-bg:   #141312; --term-fg:   #e8e3d4; --term-link: #ffd58a; --term-subj: #b7d99a; /* type */ --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace; /* rhythm */ --gutter: 24px; --maxw:   1240px; }

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font: 14px/1.55 var(--mono); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01","cv11"; }

a { color: inherit; text-decoration: none; }

a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--mono); font-weight: 600; margin: 0; letter-spacing: -.01em; }

.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.bleed { width: 100%; }

/* shared keyframes */
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 122, 58, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(47, 122, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 122, 58, 0); } }

@keyframes blink { 50% { opacity: .35; } }

@keyframes fadein { to { opacity: 1; } }

@keyframes typein { from { opacity: 0;
    transform: translateY(-2px); }
  to { opacity: 1;
    transform: translateY(0); } }

/* utilities */
.ascii { color: var(--muted); }

.em-alt { color: var(--alt); }

.small { font-size: 11px; color: var(--muted); }

.ruler { height: 1px; background: var(--hair); margin: 48px 0; }

/* ─── fullframe layout ───────────────────────────────────────── */
.fullframe-page .masthead, .fullframe-page .colophon { display: none; }

.fullframe-main { height: calc(100vh - 32px); overflow: hidden; }

.fullframe-main iframe { width: 100%; height: 100%; border: none; display: block; }

/* ─── system bar ─────────────────────────────────────────────── */
.sysbar { border-bottom: 1px solid var(--hair); background: var(--paper); font-size: 11px; color: var(--muted); letter-spacing: .04em; position: relative; }

.sysbar .row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; gap: 16px; }

#mascot, #mascot-front { position: fixed; top: 0; left: 0; height: 28px; width: auto; pointer-events: auto; user-select: none; transform-origin: center bottom; z-index: 200; visibility: hidden; /* JS shows them after measuring */ }

.sysbar .right { display: flex; gap: 14px; align-items: center; }

.sysbar a:hover { color: var(--ink); }

/* ─── site switcher dropdown (in sysbar) ─────────────────── */
.sysbar .site-select select { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid var(--hair); border-radius: 3px; padding: 2px 18px 2px 7px; font-family: inherit; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 4 4-4' fill='none' stroke='%23999' stroke-width='1'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 5px center; }

.sysbar .site-select select:hover { border-color: var(--ink-2); color: var(--ink); }

.sysbar .site-select select:focus { outline: 1px solid var(--ink-2); outline-offset: 1px; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(47, 122, 58, 0.55); animation: pulse 2.6s infinite; vertical-align: middle; margin-right: 6px; }

/* ─── masthead ───────────────────────────────────────────────── */
header.masthead { border-bottom: 1px solid var(--hair); padding: 22px 0 20px; }

.masthead .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }

.wordmark { font-size: 34px; font-weight: 700; letter-spacing: -.04em; line-height: .9; }

.wordmark .punct { color: var(--alt); }

.tagline { font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; }

nav.primary { display: flex; gap: 22px; font-size: 13px; padding-bottom: 4px; }

nav.primary a { color: var(--ink-2); position: relative; padding: 2px 0; }

nav.primary a:hover { color: var(--ink); text-decoration: none; }

nav.primary a.here { color: var(--ink); }

nav.primary a.here::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--ink); }

/* ─── footer ─────────────────────────────────────────────────── */
footer.colophon { margin-top: 56px; border-top: 1px solid var(--hair); padding: 32px 0 48px; color: var(--ink-2); font-size: 12.5px; }

.col-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 28px; }

.col h4 { font-size: 10.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px; font-weight: 600; }

.col ul { list-style: none; padding: 0; margin: 0; }

.col li { padding: 3px 0; }

.col li a:hover { color: var(--alt); text-decoration: none; }

.col .tag { font-size: 10.5px; color: var(--muted); margin-left: 6px; letter-spacing: .06em; }

.col-id .mark { font-size: 28px; font-weight: 700; letter-spacing: -.04em; line-height: .9; }

.col-id .mark .punct { color: var(--alt); }

.col-id p { margin: 10px 0 14px; line-height: 1.55; max-width: 36ch; }

.col-id .addr { font-size: 11px; color: var(--muted); line-height: 1.6; }

.col-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 18px; border-top: 1px solid var(--hair-2); font-size: 11px; color: var(--muted); letter-spacing: .04em; }

.col-foot .right { display: flex; gap: 14px; }

/* ─── section marker (§ 01 ─── HEADING) ─────────────────────── */
.smark { display: flex; align-items: center; gap: 12px; margin: 46px 0 16px; font-size: 11px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }

.smark .num { color: var(--ink); font-weight: 600; }

.smark .rule { flex: 1; height: 1px; background: var(--hair); }

.smark .meta { color: var(--muted); }

/* ─── crumbs ─────────────────────────────────────────────────── */
.crumbs { font-size: 11px; color: var(--muted); letter-spacing: .06em; margin: 22px 0 6px; }

.crumbs a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); }

.crumbs a:hover { color: var(--alt); text-decoration: none; }

.crumbs .here { color: var(--ink); }

.crumbs .sep { margin: 0 6px; color: var(--hair); }

/* ─── reading progress bar ───────────────────────────────────── */
.progress { position: sticky; top: 0; height: 2px; background: var(--hair-2); z-index: 30; }

.progress .fill { height: 100%; background: var(--alt); width: 0; transition: width .08s linear; }

/* ─── hero + lede ────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1.55fr 1fr; gap: 36px; margin-bottom: 8px; }

.lede { padding-top: 6px; }

.lede h1 { font-size: 48px; line-height: 1.0; letter-spacing: -.03em; font-weight: 700; }

.lede h1 .l1, .lede h1 .l2, .lede h1 .l3 { display: block; white-space: nowrap; }

.lede h1 .l2 { color: var(--alt); }

.lede h1 .l3 { font-weight: 700; color: var(--ink-2); margin-top: .2em; }

.lede h1 .em { color: var(--alt); }

.lede .sub { font-size: 16px; line-height: 1.5; color: var(--ink-2); margin-top: 18px; max-width: 54ch; }

.lede .sub a { border-bottom: 1px solid var(--ink); padding-bottom: 1px; }

.lede .sub a:hover { text-decoration: none; background: #f0eadd; }

.worlds-list { margin-top: 28px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 14px 0; display: flex; flex-wrap: wrap; gap: 0; }

.worlds-list .w { display: flex; align-items: baseline; gap: 8px; padding: 6px 18px 6px 0; border-right: 1px dotted var(--hair-2); margin-right: 6px; font-size: 13px; }

.worlds-list .w:last-child { border-right: none; }

.worlds-list .w .n { font-size: 10px; color: var(--muted); letter-spacing: .06em; }

.worlds-list .w a { color: var(--ink); }

.worlds-list .w a:hover { color: var(--alt); text-decoration: none; }

.worlds-foot { font-size: 11px; color: var(--muted); margin-top: 10px; letter-spacing: .04em; }

.worlds-foot a { color: var(--ink); border-bottom: 1px solid var(--hair); }

.hero-signup { grid-column: 1 / -1; border-top: 1px solid var(--hair); padding-top: 18px; margin-top: 4px; }

.signup-form { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 20px; }

.signup-label { font-size: 12px; color: var(--ink-2); letter-spacing: .02em; flex: 1 1 100%; }

.signup-row { display: flex; gap: 0; flex: 1 1 auto; }

.signup-row input[type="email"] { flex: 1 1 auto; font: inherit; font-size: 13px; background: var(--card); border: 1px solid var(--hair); border-right: none; padding: 8px 12px; color: var(--ink); outline: none; min-width: 0; }

.signup-row input[type="email"]::placeholder { color: var(--muted); }

.signup-row input[type="email"]:focus { border-color: var(--alt); }

.signup-row button { font: inherit; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 8px 18px; cursor: pointer; white-space: nowrap; }

.signup-row button:hover { background: var(--alt); border-color: var(--alt); }

/* ─── updates rail ───────────────────────────────────────────── */
.rail { border: 1px solid var(--hair); background: var(--card); position: relative; height: 520px; overflow: hidden; }

.rail-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--hair); font-size: 11px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; background: var(--paper); }

.rail-head .live { color: var(--live); font-weight: 600; }

.rail-head .live::before { content: "●"; margin-right: 5px; animation: blink 1.6s infinite; }

.rail-viewport { height: calc(100% - 38px); overflow: hidden; position: relative; mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 24px), transparent 100%); }

@keyframes scroll { from { transform: translateY(0); }
  to { transform: translateY(-50%); } }

.rail-track { will-change: transform; padding: 6px 14px 22px; animation: scroll 64s linear infinite; }

.rail:hover .rail-track { animation-play-state: paused; }

.upd { padding: 14px 0; border-top: 1px dotted var(--hair-2); }

.upd:first-child { border-top: none; }

.upd .tt { font-size: 13.5px; line-height: 1.35; color: var(--ink); font-weight: 600; }

.upd .tt a:hover { color: var(--alt); text-decoration: none; }

.upd .desc { font-size: 12px; color: var(--ink-2); margin: 4px 0 7px; line-height: 1.5; }

.upd .tags { font-size: 10.5px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }

.upd .tags .p { color: var(--alt); font-weight: 600; }

.upd .tags .sep { margin: 0 6px; color: var(--hair); }

.upd .when { float: right; font-size: 10.5px; color: var(--muted); font-weight: 400; }

/* ─── slideshow ──────────────────────────────────────────────── */
.slideshow { position: relative; background: var(--paper-2); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); height: 520px; overflow: hidden; }

.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }

.slide.on { opacity: 1; }

.slide.t1 { background: repeating-linear-gradient(45deg, #efe8d6 0 10px, #f5efe0 10px 20px); }

.slide.t2 { background: repeating-linear-gradient(0deg, #ece4d0 0 2px, #f4eedf 2px 9px); }

.slide.t3 { background: radial-gradient(circle at 1px 1px, #d8cfb6 1px, transparent 1.5px) 0 0/14px 14px, #f1ead7; }

.slide.t4 { background: linear-gradient(180deg, #efe7d2 0%, #e6dcc1 100%); }

.slide .frame-id { position: absolute; left: 20px; bottom: 18px; font-size: 10.5px; color: rgba(20, 20, 20, 0.55); letter-spacing: .18em; }

.slide .scene { position: absolute; right: 20px; bottom: 18px; font-size: 10.5px; color: rgba(20, 20, 20, 0.5); letter-spacing: .18em; }

/* terminal overlay */
.term { position: absolute; top: 22px; right: 22px; background: var(--term-bg); color: var(--term-fg); font-size: 13px; line-height: 1.45; padding: 0; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); white-space: nowrap; clip-path: inset(0 0 0 100%); transition: clip-path 0.5s cubic-bezier(0.2, 0.6, 0.2, 1); }

.term .pad { padding: 9px 14px; display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; opacity: 0; transition: opacity .35s ease .45s; }

.term.on { clip-path: inset(0 0 0 0%); }

.term.on .pad { opacity: 1; }

.term .subj { color: var(--term-subj); }

.term .pct { color: #888; }

.term a { color: var(--term-link); border-bottom: 1px dotted #b88c4d; }

.term a:hover { color: #fff; text-decoration: none; }

.term .blink { display: inline-block; width: 7px; height: 14px; background: var(--term-fg); animation: blink 1.1s infinite; vertical-align: -2px; margin-left: 2px; }

.slide-dots { position: absolute; left: 22px; bottom: 50px; display: flex; gap: 7px; z-index: 2; }

.slide-dots .d { width: 18px; height: 2px; background: rgba(20, 20, 20, 0.18); cursor: pointer; }

.slide-dots .d.on { background: rgba(20, 20, 20, 0.7); }

/* ─── product grid ───────────────────────────────────────────── */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.prod { background: var(--card); border: 1px solid var(--hair); padding: 18px; aspect-ratio: 1/1; display: flex; flex-direction: column; justify-content: space-between; position: relative; transition: border-color .15s ease, transform .15s ease; }

.prod:hover { border-color: var(--ink); transform: translateY(-1px); }

.prod .num { font-size: 10.5px; color: var(--muted); letter-spacing: .16em; }

.prod .name { font-size: 26px; font-weight: 700; letter-spacing: -.025em; margin-top: 8px; }

.prod .name .punct { color: var(--alt); }

.prod .line { font-size: 12px; color: var(--ink-2); line-height: 1.45; margin-top: 8px; }

.prod .meta { font-size: 10.5px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: end; }

.prod .meta .ver { color: var(--ink); }

.prod .glyph { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; color: var(--alt); opacity: .85; }

/* ─── product intro rows ─────────────────────────────────────── */
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid var(--hair-2); }

.intro:first-child { border-top: none; }

.intro .copy h3 { font-size: 24px; letter-spacing: -.02em; }

.intro .copy h3 .punct { color: var(--alt); }

.intro .copy .kicker { font-size: 10.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; }

.intro .copy p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 48ch; margin: 10px 0; }

.intro .copy .cta { margin-top: 14px; display: flex; gap: 18px; font-size: 12px; }

.intro .copy .cta a { border-bottom: 1px solid var(--ink); }

.intro .copy .specs { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: 11px; color: var(--muted); max-width: 380px; }

.intro .copy .specs b { color: var(--ink); font-weight: 600; }

.shot { background: var(--paper-2); border: 1px solid var(--hair); min-height: 280px; padding: 18px; position: relative; background-image: repeating-linear-gradient(45deg, transparent 0 18px, rgba(0, 0, 0, 0.025) 18px 19px); }

.shot::before { content: attr(data-label); position: absolute; top: 10px; left: 12px; font-size: 10px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }

.shot.right { order: 2; }

.shot.left { order: 0; }

/* ─── telemetry block ────────────────────────────────────────── */
.telem { background: var(--term-bg); color: var(--term-fg); font-size: 12.5px; padding: 18px 22px; border: 1px solid #2a2723; position: relative; overflow: hidden; }

.telem .head { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; color: #9a948a; letter-spacing: .16em; text-transform: uppercase; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid #2a2723; }

.telem .head .live { color: #a3d181; }

.telem .head .live::before { content: "●"; margin-right: 6px; animation: blink 1.6s infinite; }

.tlines { display: flex; flex-direction: column; gap: 3px; }

.tline { display: grid; grid-template-columns: 74px 110px 1fr; gap: 14px; align-items: baseline; opacity: 0; animation: fadein .35s ease forwards; }

.tline.appear { animation: typein .45s ease forwards; }

.tline .ts { color: #6a655b; }

.tline .subj { color: #e6b35a; letter-spacing: .04em; text-transform: lowercase; }

.tline .msg { color: #e8e3d4; }

.tline .msg .lk { color: #ffd58a; border-bottom: 1px dotted #8a6630; }

.telem .cur { display: inline-block; width: 7px; height: 13px; background: var(--term-fg); animation: blink 1.1s infinite; vertical-align: -2px; margin-left: 4px; }

.telem .foot { font-size: 10px; color: #6a655b; letter-spacing: .12em; text-transform: uppercase; margin-top: 14px; padding-top: 10px; border-top: 1px solid #2a2723; display: flex; justify-content: space-between; }

/* ─── responsive ─────────────────────────────────────────────── */
@media (max-width: 1020px) { .hero { grid-template-columns: 1fr; } .rail { height: 380px; } .prod-grid { grid-template-columns: repeat(2, 1fr); } .intro { grid-template-columns: 1fr; } .lede h1 { font-size: 36px; } .col-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 640px) { .wordmark { font-size: 28px; } .lede h1 { font-size: 26px; } .prod-grid { grid-template-columns: 1fr 1fr; } .col-grid { grid-template-columns: 1fr; } nav.primary { flex-wrap: wrap; gap: 14px; } .term { left: 16px; right: 16px; top: 14px; font-size: 11px; overflow: hidden; } .term .pad { padding: 7px 10px; } .slideshow { height: 380px; } }

/* ─── product-colored tags (global) ─────────────────────────── */
.tag[data-product="workpads"] { color: var(--c-workpads) !important; border-color: var(--c-workpads) !important; }

.tag[data-product="bitpads"] { color: var(--c-bitpads) !important; border-color: var(--c-bitpads) !important; }

.tag[data-product="bitledger"] { color: var(--c-bitledger) !important; border-color: var(--c-bitledger) !important; }

.tag[data-product="workwarrior"] { color: var(--c-workwarrior) !important; border-color: var(--c-workwarrior) !important; }

.tag[data-product="works"] { color: var(--c-works) !important; border-color: var(--c-works) !important; }

.tag[data-product="basics"] { color: var(--c-basics) !important; border-color: var(--c-basics) !important; }

.tag[data-product="clarkware"] { color: var(--c-clarkware) !important; border-color: var(--c-clarkware) !important; }

.tag[data-product="telux"] { color: var(--c-telux) !important; border-color: var(--c-telux) !important; }

.tag[data-product="outstack"] { color: var(--c-outstack) !important; border-color: var(--c-outstack) !important; }

.tag[data-product="tel"] { color: var(--c-tel) !important; border-color: var(--c-tel) !important; }

.tag[data-product="simba"] { color: var(--c-simba) !important; border-color: var(--c-simba) !important; }

.tag[data-product="heybabb"] { color: var(--c-heybabb) !important; border-color: var(--c-heybabb) !important; }

.tag[data-product="zako"] { color: var(--c-zako) !important; border-color: var(--c-zako) !important; }

.tag[data-product="protocols"] { color: var(--c-bitpads) !important; border-color: var(--c-bitpads) !important; }

.tag[data-product="standards"] { color: var(--c-basics) !important; border-color: var(--c-basics) !important; }

.tag[data-product="software"] { color: var(--c-workpads) !important; border-color: var(--c-workpads) !important; }

.tag[data-product="systems"] { color: var(--c-telux) !important; border-color: var(--c-telux) !important; }

.tag[data-product="tools"] { color: var(--c-heybabb) !important; border-color: var(--c-heybabb) !important; }

.tag[data-product="manufacturing"] { color: var(--c-clarkware) !important; border-color: var(--c-clarkware) !important; }

/* ─── world selector ─────────────────────────────────────────── */
.wsel { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin: 8px 0 22px; background: var(--paper); }

.wsel-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; }

.wsel button { font: inherit; background: transparent; border: none; cursor: pointer; text-align: left; padding: 14px; position: relative; border-right: 1px dotted var(--hair-2); color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; min-height: 78px; }

.wsel button:last-child { border-right: none; }

.wsel button:hover { background: #f3eede; color: var(--ink); }

.wsel button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.wsel button[aria-pressed="true"] .n { color: var(--alt-soft); }

.wsel button[aria-pressed="true"] .meta { color: #cdc8b6; }

.wsel button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--alt); }

.wsel .n { font-size: 10px; color: var(--muted); letter-spacing: .12em; }

.wsel .nm { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }

.wsel .meta { font-size: 10.5px; color: var(--muted); letter-spacing: .04em; margin-top: auto; }

/* ─── density bars ───────────────────────────────────────────── */
.density-bar { display: flex; gap: 2px; margin-top: 4px; }

.density-bar i { display: block; width: 14px; height: 3px; background: var(--hair); border-radius: 1px; }

.density-bar i.on { background: var(--ink); }

/* ─── all-mode hero ──────────────────────────────────────────── */
.all-hero { display: grid; grid-template-columns: 1.55fr 1fr; gap: 36px; margin: 6px 0 22px; }

.all-hero h1 { font-size: 48px; line-height: 1.02; letter-spacing: -.03em; font-weight: 700; max-width: 16ch; text-wrap: balance; }

.all-hero h1 .em { color: var(--alt); }

.all-hero .sub { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); margin-top: 18px; max-width: 54ch; }

.all-hero .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; padding: 18px; border: 1px solid var(--hair); background: var(--card); align-self: start; }

.all-hero .stat .k { font-size: 10.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }

.all-hero .stat .v { font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; }

.all-hero .stat .v small { font-size: 11px; color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: 6px; }

/* ─── world cards grid ───────────────────────────────────────── */
.wgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }

.wcard { padding: 22px 22px 20px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: var(--card); position: relative; min-height: 230px; display: flex; flex-direction: column; gap: 8px; transition: background .15s ease; }

.wcard:hover { background: #fbf7e9; }

.wcard .kn { font-size: 10.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }

.wcard h3 { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }

.wcard h3 a:hover { color: var(--alt); text-decoration: none; }

.wcard .blurb { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); max-width: 54ch; }

.wcard .subs { font-size: 11px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: auto; }

.wcard .subs a { color: var(--ink-2); border-bottom: 1px dotted var(--hair); }

.wcard .subs a:hover { color: var(--alt); text-decoration: none; }

.wcard .latest { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 12px; border-top: 1px dotted var(--hair-2); padding-top: 10px; margin-top: 6px; }

.wcard .latest .lbl { font-size: 10px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }

.wcard .latest .title { color: var(--ink); font-weight: 500; }

.wcard .latest .title:hover { color: var(--alt); text-decoration: none; }

.wcard .empty { font-size: 12px; color: var(--muted); font-style: italic; padding: 10px 0 0; border-top: 1px dotted var(--hair-2); margin-top: 6px; }

/* ─── mode switching ─────────────────────────────────────────── */
.single { display: none; }

.single.on { display: block; }

.all { display: block; }

.all.off { display: none; }

/* ─── single world: title block ─────────────────────────────── */
.w-title { display: grid; grid-template-columns: 1.55fr 1fr; gap: 36px; margin: 6px 0 22px; padding-bottom: 24px; border-bottom: 1px solid var(--hair); }

.w-title h1 { font-size: 54px; line-height: 1; letter-spacing: -.035em; font-weight: 700; }

.w-title h1 .em { color: var(--alt); }

.w-title .intro { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin-top: 18px; max-width: 54ch; }

.w-title .right { display: flex; flex-direction: column; gap: 14px; align-self: end; }

.w-title .right .meta { font-size: 10.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }

.w-title .right .feed { font-size: 12.5px; color: var(--ink-2); }

.w-title .right .feed a { border-bottom: 1px solid var(--ink); padding-bottom: 1px; }

.subworlds { margin-top: 12px; font-size: 12px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 0 18px; align-items: baseline; }

.subworlds .lbl { font-size: 10.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; margin-right: 6px; }

.subworlds a { color: var(--ink); border-bottom: 1px dotted var(--hair); }

.subworlds a:hover { color: var(--alt); text-decoration: none; }

/* ─── single world: hero ─────────────────────────────────────── */
.w-hero { position: relative; height: 440px; background: var(--paper-2); border: 1px solid var(--hair); overflow: hidden; margin-bottom: 6px; }

.w-hero .bg { position: absolute; inset: 0; }

.w-hero .scene { position: absolute; right: 18px; bottom: 14px; font-size: 10.5px; color: rgba(20, 20, 20, 0.5); letter-spacing: .18em; text-transform: uppercase; }

.w-hero .frame-id { position: absolute; left: 18px; bottom: 14px; font-size: 10.5px; color: rgba(20, 20, 20, 0.5); letter-spacing: .18em; text-transform: uppercase; }

/* world hero textures */
.bg.farming { background: repeating-linear-gradient(0deg, #ece4d0 0 2px, #f4eedf 2px 11px); }

.bg.banking { background: radial-gradient(circle at 1px 1px, #d8cfb6 1px, transparent 1.5px) 0 0/16px 16px, #f1ead7; }

.bg.manufacturing { background: repeating-linear-gradient(45deg, #e0d6bc 0 12px, #efe7d2 12px 24px); }

.bg.building { background: repeating-linear-gradient(90deg, #ebe2cb 0 9px, #f3ecd8 9px 18px); }

.bg.selling { background: linear-gradient(180deg, #f4ecd5 0%, #e7dcbf 100%); }

.bg.communications { background: repeating-linear-gradient(135deg, #e9e0c8 0 4px, #f1ead4 4px 13px); }

.bg.management { background: radial-gradient(ellipse at 30% 30%, #f3ecd8, #dcd0b2 80%); }

.hero-caption { padding: 14px 18px; border: 1px solid var(--hair); border-top: none; background: var(--card); }

.hero-caption .kicker { font-size: 10.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }

.hero-caption h2 { font-size: 24px; letter-spacing: -.02em; margin-top: 4px; }

.hero-caption .by { font-size: 12px; color: var(--muted); margin-top: 6px; }

.hero-caption .by a { color: var(--ink); border-bottom: 1px solid var(--hair); }

/* ─── places row ─────────────────────────────────────────────── */
.places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.place { background: var(--card); border: 1px solid var(--hair); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; transition: border-color .15s ease, transform .15s ease; }

.place:hover { border-color: var(--ink); transform: translateY(-1px); }

.place .plate { height: 120px; border: 1px solid var(--hair-2); background: repeating-linear-gradient(45deg, #f1ead4 0 10px, #f9f3df 10px 20px); position: relative; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }

.place.route .plate { background: linear-gradient(180deg, #f9f3df, #efe6cd), repeating-linear-gradient(45deg, #f1ead4 0 10px, #f9f3df 10px 20px); }

.place .nm { font-size: 15px; font-weight: 600; letter-spacing: -.015em; }

.place .meta { font-size: 10.5px; color: var(--muted); letter-spacing: .06em; display: flex; justify-content: space-between; align-items: end; margin-top: auto; }

.place .meta .pill { border: 1px solid var(--hair); padding: 1px 7px; font-size: 9.5px; letter-spacing: .12em; color: var(--ink-2); }

.place.route .meta .pill { color: var(--alt); border-color: #e3c6a0; }

/* ─── dispatches feed + two-col ─────────────────────────────── */
.twocol { display: grid; grid-template-columns: 1.55fr 1fr; gap: 36px; margin-top: 18px; }

.feed { border-top: 1px solid var(--hair); }

.feed .row { padding: 18px 0; border-bottom: 1px solid var(--hair-2); display: grid; grid-template-columns: 90px 1fr 130px; gap: 18px; align-items: baseline; }

.feed .row:hover { background: #fbf7e9; }

.feed .date { font-size: 11px; color: var(--muted); letter-spacing: .08em; }

.feed .body .kind { font-size: 10.5px; color: var(--alt); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.feed .body h4 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin-top: 3px; }

.feed .body .desc { font-size: 13px; color: var(--ink-2); margin-top: 5px; line-height: 1.5; max-width: 60ch; }

.feed .body .tags { font-size: 10.5px; color: var(--muted); letter-spacing: .04em; margin-top: 7px; }

.feed .body .tags a { color: var(--ink-2); border-bottom: 1px dotted var(--hair); }

.feed .right { font-size: 11px; color: var(--muted); text-align: right; letter-spacing: .04em; }

.feed .right .dur { display: block; color: var(--ink); font-weight: 500; font-size: 13px; letter-spacing: -.01em; margin-bottom: 2px; }

aside.side { display: flex; flex-direction: column; gap: 18px; }

.side .box { border: 1px solid var(--hair); background: var(--card); padding: 14px; }

.side .box h4 { font-size: 10.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; }

.side .box li { list-style: none; padding: 6px 0; border-top: 1px dotted var(--hair-2); font-size: 12.5px; }

.side .box li:first-child { border-top: none; }

.side .box .by { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ─── read/watch/listen ──────────────────────────────────────── */
.rwl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.rwl .box { border: 1px solid var(--hair); background: var(--card); padding: 16px; display: flex; flex-direction: column; gap: 10px; }

.rwl h3 { font-size: 18px; letter-spacing: -.015em; display: flex; justify-content: space-between; align-items: baseline; }

.rwl h3 .ct { font-size: 10.5px; color: var(--muted); letter-spacing: .16em; font-weight: 400; }

.rwl ul { list-style: none; padding: 0; margin: 0; }

.rwl li { padding: 8px 0; border-top: 1px dotted var(--hair-2); font-size: 13px; display: grid; grid-template-columns: 1fr 50px; gap: 8px; align-items: baseline; }

.rwl li:first-child { border-top: none; }

.rwl li .ttl { color: var(--ink); }

.rwl li .ttl:hover { color: var(--alt); text-decoration: none; }

.rwl li .kicker { font-size: 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; display: block; margin-top: 2px; }

.rwl li .dur { font-size: 11px; color: var(--muted); text-align: right; letter-spacing: .04em; }

.rwl .see { font-size: 11px; color: var(--muted); margin-top: 8px; letter-spacing: .04em; }

.rwl .see a { color: var(--ink); border-bottom: 1px solid var(--hair); }

/* ─── products + people rows ─────────────────────────────────── */
.prod-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.prod-row .prod { background: var(--card); border: 1px solid var(--hair); padding: 16px; position: relative; min-height: 120px; }

.prod-row .prod .num { font-size: 10px; color: var(--muted); letter-spacing: .16em; }

.prod-row .prod .name { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; }

.prod-row .prod .name .punct { color: var(--alt); }

.prod-row .prod .role { font-size: 12px; color: var(--ink-2); margin-top: 4px; }

.prod-row .prod .ver { position: absolute; bottom: 14px; right: 14px; font-size: 10.5px; color: var(--muted); letter-spacing: .12em; }

.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.person { background: var(--card); border: 1px solid var(--hair); padding: 12px; display: flex; gap: 10px; align-items: center; min-height: 78px; }

.person .av { width: 46px; height: 46px; flex: 0 0 46px; background: repeating-linear-gradient(45deg, #f1ead4 0 6px, #f9f3df 6px 12px); border: 1px solid var(--hair-2); position: relative; }

.person .av::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--hair); border-radius: 50%; }

.person .nm { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }

.person .role { font-size: 11px; color: var(--muted); margin-top: 2px; letter-spacing: .02em; }

.empty-block { padding: 18px; border: 1px dashed var(--hair); background: var(--paper); font-size: 12px; color: var(--muted); text-align: center; line-height: 1.6; }

.empty-block b { color: var(--ink); font-weight: 600; }

/* ─── worlds responsive ──────────────────────────────────────── */
@media (max-width: 1100px) { .wsel-row { grid-template-columns: repeat(4, 1fr); } .wsel button { border-bottom: 1px dotted var(--hair-2); } .all-hero, .w-title, .twocol { grid-template-columns: 1fr; } .wgrid { grid-template-columns: 1fr; } .places, .rwl, .prod-row { grid-template-columns: 1fr 1fr; } .people { grid-template-columns: 1fr 1fr; } .w-title h1 { font-size: 42px; } }

@media (max-width: 640px) { .wsel-row { grid-template-columns: repeat(2, 1fr); } .places, .rwl, .prod-row, .people { grid-template-columns: 1fr; } .feed .row { grid-template-columns: 1fr; gap: 6px; } .feed .right { text-align: left; } .all-hero h1, .w-title h1 { font-size: 32px; } .w-hero { height: 340px; } }

/* ─── article header ─────────────────────────────────────────── */
.art-head { padding: 24px 0 30px; border-bottom: 1px solid var(--hair); margin-bottom: 30px; }

.art-head .kicker { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: baseline; font-size: 11px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }

.art-head .kicker .k1 { color: var(--alt); font-weight: 600; }

.art-head .kicker .live { color: var(--live); }

.art-head .kicker .live::before { content: "●"; margin-right: 6px; animation: blink 1.8s infinite; }

.art-head .kicker .actions { display: flex; gap: 14px; margin-left: auto; font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }

.art-head .kicker .actions a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); }

.art-head h1 { font-size: 54px; line-height: 1.02; letter-spacing: -.035em; font-weight: 700; max-width: 22ch; text-wrap: balance; }

.art-head .dek { font-size: 18px; line-height: 1.5; color: var(--ink-2); margin-top: 18px; max-width: 60ch; text-wrap: pretty; }

.art-head .byline { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; font-size: 12.5px; color: var(--ink-2); align-items: baseline; }

.art-head .byline a { color: var(--ink); border-bottom: 1px solid var(--hair); }

.art-head .byline .bullet { color: var(--hair); margin: 0 -10px; }

/* ─── lead image ─────────────────────────────────────────────── */
.lead { position: relative; margin-bottom: 8px; }

.lead .img { height: 480px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.04) 100%), repeating-linear-gradient(0deg, #e3d8b8 0 2px, #efe5c4 2px 10px), var(--paper-2); border: 1px solid var(--hair); position: relative; overflow: hidden; }

.lead .img .frame-id { position: absolute; left: 18px; bottom: 16px; font-size: 10.5px; letter-spacing: .18em; color: rgba(20, 20, 20, 0.55); text-transform: uppercase; }

.lead .img .scene { position: absolute; right: 18px; bottom: 16px; font-size: 10.5px; letter-spacing: .18em; color: rgba(20, 20, 20, 0.55); text-transform: uppercase; }

.lead .caption { font-size: 11.5px; color: var(--muted); letter-spacing: .02em; padding: 8px 4px 0; display: flex; justify-content: space-between; gap: 18px; }

.lead .caption .credit { color: var(--ink-2); }

/* ─── article grid: body + sidebar ──────────────────────────── */
.art { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; margin-top: 30px; }

.body { min-width: 0; }

aside.side { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; gap: 18px; font-size: 12.5px; color: var(--ink-2); }

.side .box { border: 1px solid var(--hair); background: var(--card); padding: 14px; }

.side .box h4 { font-size: 10.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; font-weight: 600; }

.side .box .row { padding: 5px 0; border-top: 1px dotted var(--hair-2); display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }

.side .box .row:first-of-type { border-top: none; }

.side .box .row .k { color: var(--muted); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }

.side .box .row .v { color: var(--ink); font-weight: 500; text-align: right; }

.side .box .row .v a { border-bottom: 1px solid var(--hair); }

.side .toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }

.side .toc li { padding: 5px 0; display: flex; align-items: baseline; gap: 8px; counter-increment: toc; font-size: 12px; }

.side .toc li::before { content: counter(toc, upper-roman); color: var(--muted); font-size: 10px; letter-spacing: .06em; min-width: 28px; display: inline-block; }

.side .toc li a { color: var(--ink); flex: 1; }

.side .toc li a:hover { color: var(--alt); text-decoration: none; }

.side .toc li.now a { color: var(--alt); font-weight: 600; }

.side .toc li.now::before { color: var(--alt); }

.side .audio { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--paper-2); border: 1px solid var(--hair-2); font-size: 12px; margin-top: 6px; cursor: pointer; }

.side .audio:hover { background: #ebe2c8; }

.side .audio .ply { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 9px; flex: 0 0 22px; padding-left: 1px; }

.side .audio .lbl { flex: 1; }

.side .audio .bar { flex: 1.4; height: 3px; background: var(--hair); position: relative; margin-left: 4px; }

.side .audio .bar::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 32%; background: var(--ink); }

.side .audio .dur { font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }

.side .related a { display: block; padding: 8px 0; border-top: 1px dotted var(--hair-2); font-size: 12.5px; color: var(--ink); }

.side .related a:first-of-type { border-top: none; }

.side .related a:hover { color: var(--alt); text-decoration: none; }

.side .related .ttl { display: block; }

.side .related .meta { font-size: 10.5px; color: var(--muted); letter-spacing: .06em; display: block; margin-top: 2px; }

/* ─── article body typography ────────────────────────────────── */
.body p { font-size: 15.5px; line-height: 1.72; color: var(--ink-2); margin: 0 0 1.05em; text-wrap: pretty; max-width: 62ch; }

.body p:first-of-type::first-letter { font-size: 48px; font-weight: 700; float: left; line-height: .9; padding: 6px 12px 0 0; color: var(--ink); letter-spacing: -.04em; }

.body a { border-bottom: 1px solid var(--hair); color: var(--ink); }

.body a:hover { color: var(--alt); text-decoration: none; }

.body strong { color: var(--ink); font-weight: 600; }

.body .section-mark { display: flex; align-items: center; gap: 12px; margin: 42px 0 22px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.body .section-mark .num { font-weight: 600; color: var(--ink); min-width: 34px; }

.body .section-mark .nm { color: var(--ink-2); }

.body .section-mark .rule { flex: 1; height: 1px; background: var(--hair); }

.body .h2 { font-size: 22px; letter-spacing: -.018em; font-weight: 600; margin: 0 0 14px; color: var(--ink); }

/* ─── pull-quote ─────────────────────────────────────────────── */
.pull { margin: 32px 0; padding: 18px 0 18px 24px; border-left: 3px solid var(--alt); }

.pull q { font-size: 22px; line-height: 1.32; letter-spacing: -.018em; color: var(--ink); font-weight: 500; quotes: "\201C" "\201D"; display: block; }

.pull q::before { content: open-quote; color: var(--alt); margin-right: 4px; }

.pull q::after { content: close-quote; color: var(--alt); margin-left: 4px; }

.pull .by { font-size: 11.5px; color: var(--muted); letter-spacing: .06em; margin-top: 10px; }

.pull .by .nm { color: var(--ink-2); font-weight: 500; }

/* ─── inline figures ─────────────────────────────────────────── */
.fig { margin: 28px 0; }

.fig .strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.fig .strip .ph { height: 200px; background: repeating-linear-gradient(45deg, #f1ead4 0 10px, #f9f3df 10px 20px); border: 1px solid var(--hair); position: relative; }

.fig .strip .ph::after { content: attr(data-id); position: absolute; left: 8px; bottom: 6px; font-size: 9.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }

.fig.full .strip { grid-template-columns: 1fr; }

.fig.full .ph { height: 380px; }

.fig .cap { font-size: 11.5px; color: var(--muted); margin-top: 8px; display: flex; justify-content: space-between; gap: 16px; }

.fig .cap .credit { color: var(--ink-2); }

/* ─── inline audio clip ──────────────────────────────────────── */
.clip { margin: 28px 0; display: flex; gap: 14px; align-items: center; background: var(--term-bg); color: var(--term-fg); padding: 12px 16px; border: 1px solid #2a2723; }

.clip .ply { width: 30px; height: 30px; border-radius: 50%; background: var(--alt); color: var(--term-fg); display: flex; align-items: center; justify-content: center; font-size: 11px; flex: 0 0 30px; cursor: pointer; }

.clip .meta { font-size: 11px; color: #9a948a; letter-spacing: .12em; text-transform: uppercase; }

.clip .ttl { font-size: 13.5px; color: var(--term-fg); margin-top: 2px; font-weight: 500; }

.clip .ttl a { color: var(--term-link); border-bottom: 1px dotted #8a6630; }

.clip .bar { flex: 1; height: 3px; background: #2a2723; position: relative; margin: 0 6px; }

.clip .bar::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 14%; background: var(--term-fg); }

.clip .dur { font-size: 11px; color: #9a948a; letter-spacing: .04em; }

/* ─── glossary popup ─────────────────────────────────────────── */
.gloss { position: relative; border-bottom: 1px dashed var(--alt); color: var(--ink); cursor: help; }

.gloss:hover { color: var(--alt); }

.gloss .tip { position: absolute; left: 0; top: calc(100% + 8px); width: 280px; background: var(--ink); color: var(--paper); padding: 10px 12px; font-size: 12px; line-height: 1.5; letter-spacing: 0; z-index: 20; opacity: 0; pointer-events: none; transition: opacity .15s ease; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); }

.gloss .tip::before { content: ""; position: absolute; left: 14px; top: -5px; width: 10px; height: 10px; background: var(--ink); transform: rotate(45deg); }

.gloss .tip .gk { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #9a948a; display: block; margin-bottom: 4px; }

.gloss:hover .tip, .gloss:focus-within .tip { opacity: 1; pointer-events: auto; }

/* ─── end-of-piece bar ───────────────────────────────────────── */
.end-bar { margin-top: 48px; padding: 20px 0; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }

.end-bar .actions a { color: var(--ink); border-bottom: 1px solid var(--hair-2); margin-right: 14px; }

.end-bar .actions a:hover { color: var(--alt); text-decoration: none; }

.end-bar .sig { font-style: italic; color: var(--ink-2); letter-spacing: 0; text-transform: none; font-size: 13px; }

/* ─── subscribe band ─────────────────────────────────────────── */
.subband { background: var(--ink); color: var(--paper); padding: 28px; margin: 36px 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }

.subband h3 { font-size: 22px; letter-spacing: -.02em; color: var(--paper); font-weight: 600; }

.subband p { font-size: 13px; color: #cdc8b6; margin: 8px 0 0; max-width: 48ch; line-height: 1.55; }

.subband form { display: flex; gap: 8px; align-items: center; }

.subband input { flex: 1; background: transparent; border: none; border-bottom: 1px solid #5a564d; color: var(--paper); font: inherit; padding: 8px 0; outline: none; }

.subband input::placeholder { color: #8a8478; }

.subband input:focus { border-bottom-color: var(--alt); }

.subband button { font: inherit; font-size: 12px; background: var(--alt); color: var(--paper); border: none; padding: 9px 14px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }

.subband button:hover { background: #bd5a08; }

.subband .alt { font-size: 11px; color: #8a8478; letter-spacing: .08em; margin-top: 14px; }

.subband .alt a { color: var(--paper); border-bottom: 1px solid #5a564d; }

/* ─── prev / next ────────────────────────────────────────────── */
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 36px 0 0; border-top: 1px solid var(--hair); padding-top: 24px; }

.pn a { padding: 18px; border: 1px solid var(--hair); background: var(--card); display: flex; flex-direction: column; gap: 6px; transition: border-color .15s ease; }

.pn a:hover { border-color: var(--ink); text-decoration: none; }

.pn .lbl { font-size: 10.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }

.pn .ttl { font-size: 15px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }

.pn .meta { font-size: 11px; color: var(--muted); letter-spacing: .04em; }

.pn .next { text-align: right; }

/* ─── related cards grid ─────────────────────────────────────── */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }

.rcard { background: var(--card); border: 1px solid var(--hair); padding: 16px; display: flex; flex-direction: column; gap: 6px; min-height: 170px; transition: border-color .15s ease; }

.rcard:hover { border-color: var(--ink); }

.rcard .kind { font-size: 10.5px; color: var(--alt); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.rcard h4 { font-size: 15px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }

.rcard p { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: auto; }

.rcard .meta { font-size: 10.5px; color: var(--muted); letter-spacing: .06em; display: flex; justify-content: space-between; align-items: end; }

/* ─── comments drawer ────────────────────────────────────────── */
.comments { margin-top: 24px; border: 1px solid var(--hair); background: var(--card); }

.comments summary { padding: 14px 18px; font-size: 12px; letter-spacing: .06em; color: var(--ink-2); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }

.comments summary::after { content: "+"; color: var(--muted); font-size: 18px; font-weight: 300; }

.comments[open] summary::after { content: "–"; }

.comments summary:hover { background: #f4eedf; }

.comments .body { padding: 0 18px 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }

.comments .c { padding: 12px 0; border-top: 1px dotted var(--hair-2); }

.comments .c:first-child { border-top: none; padding-top: 14px; }

.comments .c .by { font-size: 11px; color: var(--muted); margin-bottom: 4px; letter-spacing: .04em; }

.comments .c .by .nm { color: var(--ink); font-weight: 500; letter-spacing: 0; }

/* ─── dispatch responsive ────────────────────────────────────── */
@media (max-width: 1020px) { .art { grid-template-columns: 1fr; gap: 36px; } aside.side { position: static; order: 2; } .art-head h1 { font-size: 38px; } .lead .img { height: 340px; } .related-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 640px) { .art-head h1 { font-size: 30px; } .art-head .dek { font-size: 16px; } .body p { font-size: 15px; } .lead .img { height: 240px; } .subband { grid-template-columns: 1fr; } .pn { grid-template-columns: 1fr; } .related-grid { grid-template-columns: 1fr; } }

/* ─── newspaper masthead ─────────────────────────────────────── */
.np-masthead { background: var(--paper); }

.np-masthead .shell { padding-top: 14px; }

.np-rule { height: 1px; background: var(--ink); border: none; margin: 0; display: block; }

.np-rule.np-thick { height: 3px; }

.np-banner { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 0 10px; gap: 12px; }

.np-meta-l, .np-meta-r { font-size: 10.5px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; display: flex; gap: 6px; align-items: baseline; min-width: 140px; }

.np-meta-r { justify-content: flex-end; }

.np-dot { color: var(--hair); }

a.np-title { font-family: Georgia, "Times New Roman", serif; font-size: 54px; font-weight: 700; letter-spacing: -.02em; line-height: 1; text-align: center; color: var(--ink); flex: 1; display: block; }

a.np-title:hover { color: var(--alt); text-decoration: none; }

.np-subline { font-size: 11px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 6px 0; }

nav.np-nav { display: flex; justify-content: center; gap: 28px; padding: 8px 0; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }

nav.np-nav a { color: var(--ink-2); }

nav.np-nav a:hover { color: var(--ink); text-decoration: none; }

nav.np-nav a.here { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--ink); }

/* ─── newspaper page layout ──────────────────────────────────── */
.np-page { padding-top: 28px; padding-bottom: 56px; }

.np-section-mark { display: flex; align-items: center; gap: 12px; margin: 28px 0 18px; font-size: 10.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }

.np-sm-num { color: var(--ink); font-weight: 600; }

.np-sm-label { color: var(--ink-2); }

.np-sm-rule { flex: 1; height: 1px; background: var(--hair); }

.np-sm-meta { color: var(--muted); }

.np-kicker { font-size: 10.5px; color: var(--alt); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }

.np-bull { color: var(--hair); }

/* lead story */
.np-lead { display: grid; grid-template-columns: 1fr 320px; gap: 40px; padding-bottom: 28px; }

.np-lead-hed { font-family: Georgia, "Times New Roman", serif; font-size: 40px; line-height: 1.1; letter-spacing: -.022em; font-weight: 700; margin-bottom: 14px; }

.np-lead-hed a { color: var(--ink); }

.np-lead-hed a:hover { color: var(--alt); text-decoration: none; }

.np-lead-dek { font-size: 17px; line-height: 1.5; color: var(--ink-2); margin-bottom: 12px; }

.np-lead-byline { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; padding: 9px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-bottom: 16px; }

.np-prod-tag { color: var(--alt); font-weight: 600; }

.np-lead-excerpt { font-size: 15px; line-height: 1.72; color: var(--ink-2); max-width: 60ch; }

a.np-continue { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--alt); letter-spacing: .04em; border-bottom: 1px solid var(--alt-soft); }

a.np-continue:hover { text-decoration: none; border-bottom-color: var(--alt); }

.np-lead-art { background: var(--paper-2); border: 1px solid var(--hair); min-height: 300px; background-image: repeating-linear-gradient(45deg, transparent 0 18px, rgba(0, 0, 0, 0.025) 18px 19px); position: relative; }

.np-lead-art::before { content: "FIELD"; position: absolute; bottom: 14px; left: 14px; font-size: 9.5px; color: var(--muted); letter-spacing: .22em; text-transform: uppercase; }

/* secondary grid */
.np-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-bottom: 28px; }

.np-story { padding: 20px 28px 20px 0; border-top: 1px solid var(--hair); }

.np-story h3 { font-family: Georgia, "Times New Roman", serif; font-size: 20px; line-height: 1.22; letter-spacing: -.015em; font-weight: 700; margin-bottom: 8px; }

.np-story h3 a { color: var(--ink); }

.np-story h3 a:hover { color: var(--alt); text-decoration: none; }

.np-story:nth-child(even) { padding-left: 28px; padding-right: 0; border-left: 1px solid var(--hair); }

.np-dek { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 8px; }

.np-story-meta { font-size: 11px; color: var(--muted); letter-spacing: .04em; }

/* lower 3-col briefs */
.np-lower { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0; padding-bottom: 28px; }

.np-lower-col { padding: 20px 28px 20px 0; border-top: 1px solid var(--hair); }

.np-lower-col + .np-lower-col { padding-left: 28px; padding-right: 0; border-left: 1px solid var(--hair); }

.np-col-head { font-size: 10.5px; color: var(--muted); letter-spacing: .18em; text-transform: uppercase; font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--hair-2); margin-bottom: 8px; }

.np-brief { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px dotted var(--hair-2); font-size: 13px; }

.np-brief:last-child { border-bottom: none; }

.np-brief a { color: var(--ink); flex: 1; }

.np-brief a:hover { color: var(--alt); text-decoration: none; }

.np-brief-date { font-size: 10.5px; color: var(--muted); letter-spacing: .04em; min-width: 40px; flex-shrink: 0; }

.np-brief-tag { font-size: 10px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; flex-shrink: 0; }

/* ─── placeholder ────────────────────────────────────────────── */
.np-placeholder { font-size: 14px; color: var(--muted); padding: 20px 0 28px; }

.np-placeholder a { color: var(--ink); border-bottom: 1px solid var(--hair); }

/* ─── worlds listing ─────────────────────────────────────────── */
.np-worlds { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-bottom: 14px; }

a.np-world { display: grid; grid-template-columns: 28px 110px 1fr; gap: 0 14px; align-items: baseline; padding: 9px 14px 9px 0; border-top: 1px dotted var(--hair-2); color: var(--ink); font-size: 13px; }

a.np-world:hover { background: var(--paper-2); text-decoration: none; }

a.np-world:hover .np-world-name { color: var(--alt); }

a.np-world:nth-child(even) { padding-left: 14px; padding-right: 0; border-left: 1px solid var(--hair); }

.np-world-num { font-size: 10px; color: var(--muted); letter-spacing: .1em; }

.np-world-name { font-weight: 600; letter-spacing: -.01em; }

.np-world-line { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }

.np-worlds-foot { font-size: 11px; color: var(--muted); letter-spacing: .04em; padding-bottom: 18px; }

.np-worlds-foot a { color: var(--ink); border-bottom: 1px solid var(--hair-2); }

.np-worlds-foot a:hover { color: var(--alt); text-decoration: none; }

/* ─── places listing ─────────────────────────────────────────── */
.np-places { display: flex; flex-direction: column; gap: 0; padding-bottom: 14px; }

a.np-place { display: grid; grid-template-columns: 1fr 200px 80px; gap: 14px; align-items: baseline; padding: 8px 0; border-top: 1px dotted var(--hair-2); color: var(--ink); font-size: 13px; }

a.np-place:hover { text-decoration: none; }

a.np-place:hover .np-place-name { color: var(--alt); }

.np-place-name { font-weight: 500; }

.np-place-worlds { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }

.np-place-count { font-size: 10.5px; color: var(--muted); letter-spacing: .06em; text-align: right; text-transform: uppercase; }

/* ─── products + changelog ───────────────────────────────────── */
.np-products { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-bottom: 28px; }

.np-prod-block { padding: 20px 28px 20px 0; border-top: 1px solid var(--hair); }

.np-prod-block:nth-child(even) { padding-left: 28px; padding-right: 0; border-left: 1px solid var(--hair); }

.np-prod-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }

a.np-prod-name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }

a.np-prod-name:hover { color: var(--alt); text-decoration: none; }

.np-prod-ver { font-size: 10.5px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }

.np-prod-status { font-size: 10px; color: var(--live); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin-left: auto; }

.np-prod-status.np-alpha { color: var(--alt); }

.np-prod-line { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-bottom: 12px; max-width: 48ch; }

.np-clog { border-top: 1px solid var(--hair-2); padding-top: 8px; }

.np-clog-row { display: grid; grid-template-columns: 52px 46px 1fr; gap: 10px; align-items: baseline; padding: 4px 0; border-bottom: 1px dotted var(--hair-2); font-size: 12px; }

.np-clog-row:last-child { border-bottom: none; }

.np-clog-ver { font-size: 10.5px; color: var(--alt); font-weight: 600; letter-spacing: .04em; }

.np-clog-date { font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }

.np-clog-msg { color: var(--ink-2); }

.np-clog-msg b { color: var(--ink); }

/* ─── newspaper responsive ───────────────────────────────────── */
@media (max-width: 1020px) { a.np-title { font-size: 40px; } .np-lead { grid-template-columns: 1fr; } .np-lead-art { display: none; } .np-lower { grid-template-columns: 1fr 1fr; } .np-lower-col:last-child { grid-column: 1 / -1; border-left: none; padding-left: 0; } .np-worlds { grid-template-columns: 1fr; } a.np-world:nth-child(even) { border-left: none; padding-left: 0; } .np-products { grid-template-columns: 1fr; } .np-prod-block:nth-child(even) { border-left: none; padding-left: 0; } a.np-place { grid-template-columns: 1fr 160px 72px; } }

@media (max-width: 640px) { a.np-title { font-size: 28px; } .np-meta-l, .np-meta-r { display: none; } .np-banner { justify-content: center; } .np-grid { grid-template-columns: 1fr; } .np-story:nth-child(even) { border-left: none; padding-left: 0; } .np-lower { grid-template-columns: 1fr; } .np-lower-col + .np-lower-col { border-left: none; padding-left: 0; } nav.np-nav { flex-wrap: wrap; gap: 12px 18px; justify-content: center; } a.np-place { grid-template-columns: 1fr auto; } .np-place-worlds { display: none; } a.np-world { grid-template-columns: 24px 100px 1fr; } .np-world-line { display: none; } }

/* ─── product title block ────────────────────────────────────── */
.ptitle { display: grid; grid-template-columns: 1.55fr 1fr; gap: 36px; padding: 18px 0 30px; border-bottom: 1px solid var(--hair); margin-bottom: 28px; align-items: end; }

.ptitle .kicker { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.ptitle .kicker .k1 { color: var(--alt); font-weight: 600; margin-right: 14px; }

.ptitle h1 { font-size: 68px; line-height: .94; letter-spacing: -.04em; font-weight: 700; margin-top: 10px; }

.ptitle h1 .punct { color: var(--alt); }

.ptitle .deck { font-size: 18px; line-height: 1.5; color: var(--ink-2); margin-top: 16px; max-width: 48ch; text-wrap: pretty; }

.ptitle .deck b { color: var(--ink); font-weight: 600; }

.status { border: 1px solid var(--hair); background: var(--card); padding: 0; font-size: 12px; }

.status .row { display: grid; grid-template-columns: 90px 1fr 1fr; padding: 11px 14px; border-top: 1px dotted var(--hair-2); align-items: baseline; gap: 10px; }

.status .row:first-of-type { border-top: none; }

.status .row .k { color: var(--muted); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }

.status .row .v { color: var(--ink); font-weight: 500; }

.status .row .v a { border-bottom: 1px solid var(--hair); }

.status .row.head { background: var(--paper); border-top: none; padding: 10px 14px; font-size: 10.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; grid-template-columns: 1fr; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--hair); }

.status .row.head .live { color: var(--live); }

.status .row.head .live::before { content: "●"; margin-right: 6px; animation: blink 1.8s infinite; }

.status .cta { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--hair); }

.status .cta a { padding: 13px 14px; text-align: center; font-size: 12px; color: var(--ink); border-right: 1px solid var(--hair); letter-spacing: .04em; background: #faf6e8; transition: background .15s ease; }

.status .cta a:last-child { border-right: none; }

.status .cta a:hover { background: #f0e8c8; text-decoration: none; }

.status .cta a.dark { background: var(--ink); color: var(--paper); }

.status .cta a.dark:hover { background: #000; }

/* ─── product lead screenshot ────────────────────────────────── */
.plead { position: relative; height: 520px; border: 1px solid var(--hair); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.04) 100%), repeating-linear-gradient(45deg, #efe5c4 0 14px, #f6eed1 14px 28px), var(--paper-2); overflow: hidden; margin-bottom: 8px; }

.plead .frame-id { position: absolute; left: 18px; bottom: 14px; font-size: 10.5px; letter-spacing: .18em; color: rgba(20, 20, 20, 0.55); text-transform: uppercase; }

.plead .scene { position: absolute; right: 18px; bottom: 14px; font-size: 10.5px; letter-spacing: .18em; color: rgba(20, 20, 20, 0.55); text-transform: uppercase; }

.device { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 78%; max-width: 780px; height: 78%; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 16px 38px rgba(20, 20, 20, 0.18); display: flex; flex-direction: column; overflow: hidden; }

.device .top { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--hair); background: var(--paper); font-size: 10.5px; color: var(--muted); letter-spacing: .12em; }

.device .top .lights { display: flex; gap: 6px; }

.device .top .lights i { width: 9px; height: 9px; border-radius: 50%; background: var(--hair); display: block; }

.device .top .lights i:nth-child(1) { background: #d8a988; }

.device .top .lights i:nth-child(2) { background: #e6c97b; }

.device .top .lights i:nth-child(3) { background: var(--live); }

.device .body { flex: 1; display: grid; grid-template-columns: 200px 1fr; min-height: 0; }

.device .nav { border-right: 1px solid var(--hair); padding: 12px 10px; font-size: 12px; color: var(--ink-2); overflow: hidden; background: var(--paper); }

.device .nav .grp { font-size: 9.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; margin: 10px 6px 4px; }

.device .nav .it { padding: 5px 8px; border-radius: 2px; color: var(--ink); font-size: 12px; }

.device .nav .it.on { background: var(--ink); color: var(--paper); }

.device .nav .it .meta { font-size: 9.5px; color: var(--muted); letter-spacing: .08em; margin-left: 6px; }

.device .nav .it.on .meta { color: #cfc8b3; }

.device .doc { flex: 1; padding: 14px 18px; overflow: hidden; font-size: 12.5px; }

.device .doc .hd { font-size: 10.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 4px; }

.device .doc h5 { font-size: 18px; letter-spacing: -.015em; color: var(--ink); font-weight: 600; }

.device .doc .meta { font-size: 10.5px; color: var(--muted); letter-spacing: .06em; margin-top: 3px; }

.device .doc .field { margin-top: 10px; border-top: 1px dotted var(--hair-2); padding-top: 8px; display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: baseline; }

.device .doc .field .k { font-size: 10.5px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }

.device .doc .field .v { color: var(--ink-2); }

.device .doc .field .v.alt { color: var(--alt); font-weight: 500; }

.device .doc .photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }

.device .doc .photo-strip .ph { height: 50px; background: repeating-linear-gradient(45deg, #f1ead4 0 6px, #f9f3df 6px 12px); border: 1px solid var(--hair-2); }

.device .doc .sign { margin-top: 12px; padding-top: 10px; border-top: 1px dotted var(--hair-2); display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); }

.device .doc .sign .sig { color: var(--ink); font-style: italic; }

.device .doc .audio-row { margin-top: 8px; background: var(--term-bg); color: var(--term-fg); padding: 6px 10px; display: flex; gap: 8px; align-items: center; font-size: 11px; }

.device .doc .audio-row .ply { width: 18px; height: 18px; border-radius: 50%; background: var(--alt); color: var(--term-fg); display: flex; align-items: center; justify-content: center; font-size: 8px; }

.device .doc .audio-row .bar { flex: 1; height: 2px; background: #2a2723; position: relative; }

.device .doc .audio-row .bar::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 38%; background: var(--term-fg); }

.lead-cap { font-size: 11.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 16px; padding: 0 2px; }

.lead-cap .credit { color: var(--ink-2); }

/* ─── feature grid ───────────────────────────────────────────── */
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }

.feat .cell { padding: 24px 22px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: var(--card); display: flex; flex-direction: column; gap: 9px; min-height: 200px; transition: background .15s ease; }

.feat .cell:hover { background: #fbf7e9; }

.feat .cell .num { font-size: 10px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }

.feat .cell .gl { width: 28px; height: 28px; color: var(--alt); margin-bottom: 2px; }

.feat .cell h3 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }

.feat .cell p { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 0; max-width: 42ch; }

.feat .cell .tag { font-size: 10.5px; color: var(--muted); letter-spacing: .08em; margin-top: auto; }

/* ─── proof grid ─────────────────────────────────────────────── */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.pcard { background: var(--card); border: 1px solid var(--hair); padding: 18px; display: flex; flex-direction: column; gap: 6px; min-height: 200px; transition: border-color .15s ease; }

.pcard:hover { border-color: var(--ink); }

.pcard .kind { font-size: 10.5px; color: var(--alt); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.pcard h4 { font-size: 16px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }

.pcard p { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin-top: auto; }

.pcard .meta { font-size: 10.5px; color: var(--muted); letter-spacing: .06em; display: flex; justify-content: space-between; align-items: end; }

/* ─── worlds deployed strip ──────────────────────────────────── */
.worlds-deployed { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--hair); background: var(--card); }

.wd { padding: 18px; border-right: 1px solid var(--hair); display: flex; flex-direction: column; gap: 6px; }

.wd:last-child { border-right: none; }

.wd .n { font-size: 10px; color: var(--muted); letter-spacing: .16em; }

.wd .nm { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }

.wd .ct { font-size: 11px; color: var(--ink-2); }

.wd .ct b { color: var(--alt); font-weight: 600; }

.wd:hover { background: #fbf7e9; text-decoration: none; }

/* ─── spec table ─────────────────────────────────────────────── */
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--hair); background: var(--card); }

.spec .col { padding: 0; }

.spec .col + .col { border-left: 1px solid var(--hair); }

.spec h4 { font-size: 10.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; padding: 14px 18px; border-bottom: 1px solid var(--hair); background: var(--paper); font-weight: 600; }

.spec .row { display: grid; grid-template-columns: 140px 1fr; gap: 14px; padding: 10px 18px; border-bottom: 1px dotted var(--hair-2); align-items: baseline; font-size: 13px; }

.spec .row:last-child { border-bottom: none; }

.spec .row .k { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.spec .row .v { color: var(--ink-2); }

.spec .row .v b { color: var(--ink); font-weight: 600; }

.spec .row .v code { font-family: var(--mono); background: var(--paper); padding: 1px 6px; font-size: 11.5px; border: 1px solid var(--hair-2); }

/* ─── changelog ──────────────────────────────────────────────── */
.clog { border-top: 1px solid var(--hair); }

.clog .row { display: grid; grid-template-columns: 120px 110px 1fr 80px; gap: 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px dotted var(--hair-2); font-size: 13px; }

.clog .ver { font-weight: 600; color: var(--ink); letter-spacing: -.01em; }

.clog .date { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }

.clog .msg { color: var(--ink-2); line-height: 1.5; }

.clog .msg b { color: var(--ink); }

.clog .meta { font-size: 11px; color: var(--muted); text-align: right; letter-spacing: .04em; }

.clog .seeall { padding-top: 14px; font-size: 11.5px; color: var(--ink-2); }

.clog .seeall a { border-bottom: 1px solid var(--hair); }

/* ─── get-it band ────────────────────────────────────────────── */
.getit { background: var(--ink); color: var(--paper); padding: 36px; margin: 48px 0 0; display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: start; }

.getit h3 { font-size: 28px; letter-spacing: -.025em; color: var(--paper); font-weight: 600; }

.getit p { font-size: 14px; color: #cdc8b6; margin: 10px 0 0; max-width: 48ch; line-height: 1.6; }

.getit .alt { font-size: 11px; color: #8a8478; letter-spacing: .08em; margin-top: 18px; }

.getit .alt a { color: var(--paper); border-bottom: 1px solid #5a564d; }

.getit .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

.getit .grid a { padding: 14px 16px; background: #1f1d1a; border: 1px solid #2a2723; color: var(--paper); font-size: 13px; text-align: left; transition: background .15s ease; display: flex; flex-direction: column; gap: 4px; }

.getit .grid a:hover { background: #26241f; text-decoration: none; }

.getit .grid a .k { font-size: 10px; letter-spacing: .16em; color: #9a948a; text-transform: uppercase; }

.getit .grid a .v { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }

.getit .grid a .meta { font-size: 10.5px; color: #9a948a; letter-spacing: .06em; margin-top: 2px; }

.getit .grid a.primary { background: var(--alt); border-color: var(--alt); }

.getit .grid a.primary:hover { background: #bd5a08; }

.getit .grid a.primary .k, .getit .grid a.primary .meta { color: #f5d2a8; }

/* ─── product responsive ─────────────────────────────────────── */
@media (max-width: 1100px) { .ptitle { grid-template-columns: 1fr; align-items: start; } .ptitle h1 { font-size: 48px; } .feat { grid-template-columns: 1fr 1fr; } .proof-grid { grid-template-columns: 1fr 1fr; } .worlds-deployed { grid-template-columns: 1fr 1fr 1fr; } .getit { grid-template-columns: 1fr; } .plead { height: 420px; } .device .body { grid-template-columns: 1fr; } .device .nav { display: none; } }

@media (max-width: 640px) { .ptitle h1 { font-size: 36px; } .feat, .proof-grid, .worlds-deployed { grid-template-columns: 1fr; } .plead { height: 340px; } .clog .row { grid-template-columns: 1fr; gap: 4px; } .clog .meta { text-align: left; } .spec { grid-template-columns: 1fr; } .spec .col + .col { border-left: none; border-top: 1px solid var(--hair); } .getit .grid { grid-template-columns: 1fr; } }

/* ─── place sticky chrome ────────────────────────────────────── */
.ph { position: sticky; top: 0; background: var(--paper); border-bottom: 1px solid var(--hair); z-index: 20; transition: padding .25s ease, background .25s ease; }

.ph.scrolled { padding: 0; background: rgba(250, 248, 243, 0.96); backdrop-filter: saturate(1.1) blur(8px); }

.ph .r1 { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 18px 0 14px; transition: padding .25s ease; }

.ph.scrolled .r1 { padding: 9px 0; }

.ph .r1 .left { display: flex; align-items: end; gap: 18px; flex-wrap: wrap; min-width: 0; }

.ph .back { font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px; }

.ph .back .mark { font-weight: 700; color: var(--ink); letter-spacing: -.04em; font-size: 18px; line-height: 1; }

.ph .back .mark .punct { color: var(--alt); }

.ph .back:hover { color: var(--ink); text-decoration: none; }

.ph .crumbs { font-size: 11px; color: var(--muted); letter-spacing: .06em; }

.ph .crumbs a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); }

.ph .crumbs .here { color: var(--ink); }

.ph h1 { font-size: 30px; letter-spacing: -.025em; line-height: 1; font-weight: 700; transition: font-size .25s ease; }

.ph.scrolled h1 { font-size: 18px; }

.ph .worlds { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 11px; }

.ph .worlds .lbl { color: var(--muted); letter-spacing: .16em; text-transform: uppercase; font-size: 10px; }

.ph .worlds .pill { padding: 2px 8px; border: 1px solid var(--hair); font-size: 11px; color: var(--ink-2); background: var(--card); letter-spacing: .04em; }

.ph .worlds .pill:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }

.ph .right { display: flex; gap: 14px; align-items: center; position: relative; }

.ph .status-tag { font-size: 10.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; display: flex; align-items: center; gap: 5px; }

.ph .status-tag .live { color: var(--live); }

.ph .status-tag .live::before { content: "●"; margin-right: 4px; animation: blink 1.8s infinite; }

/* ─── places picker ───────────────────────────────────────────── */
.pp-trigger { font: inherit; font-size: 12px; background: var(--card); border: 1px solid var(--hair); padding: 7px 12px; cursor: pointer; color: var(--ink); letter-spacing: .02em; display: inline-flex; align-items: center; gap: 6px; }

.pp-trigger:hover { border-color: var(--ink); }

.pp-trigger[aria-expanded="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.pp-trigger .car { font-size: 9px; opacity: .7; }

.pp-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 380px; background: var(--card); border: 1px solid var(--hair); box-shadow: 0 12px 32px rgba(20, 20, 20, 0.14); display: none; z-index: 30; }

.pp-panel[data-open="true"] { display: block; }

.pp-search { display: flex; gap: 6px; padding: 12px; border-bottom: 1px solid var(--hair-2); }

.pp-search input { flex: 1; font: inherit; border: 1px solid var(--hair); padding: 7px 10px; background: var(--paper); color: var(--ink); outline: none; font-size: 13px; }

.pp-search input:focus { border-color: var(--ink); }

.pp-section { font-size: 10px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; padding: 10px 14px 4px; }

.pp-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; }

.pp-list li { padding: 9px 14px; cursor: pointer; border-top: 1px dotted var(--hair-2); font-size: 13px; display: flex; flex-direction: column; gap: 3px; }

.pp-list li:first-of-type { border-top: none; }

.pp-list li:hover, .pp-list li[aria-selected="true"] { background: var(--paper-2); }

.pp-list li[aria-selected="true"] { border-left: 2px solid var(--alt); padding-left: 12px; }

.pp-list .ti { font-weight: 500; color: var(--ink); display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }

.pp-list .ti .route-tag { font-size: 9px; color: var(--alt); letter-spacing: .16em; text-transform: uppercase; background: var(--alt-soft); padding: 1px 6px; }

.pp-list .meta { font-size: 11px; color: var(--muted); letter-spacing: .02em; }

.pp-list .hit { color: var(--alt); font-weight: 600; }

.pp-empty { padding: 14px; font-size: 12px; color: var(--muted); font-style: italic; text-align: center; }

.pp-foot { padding: 8px 14px; border-top: 1px solid var(--hair-2); font-size: 10.5px; color: var(--muted); display: flex; justify-content: space-between; letter-spacing: .04em; }

.pp-foot a { color: var(--ink); border-bottom: 1px solid var(--hair-2); }

.pp-foot kbd { font: inherit; font-size: 10px; background: var(--paper-2); padding: 1px 5px; border: 1px solid var(--hair-2); }

/* ─── place anchor nav row ────────────────────────────────────── */
.ph .r2 { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--hair-2); font-size: 12px; padding: 0; }

.ph .anchors { display: flex; gap: 0; overflow-x: auto; min-width: 0; }

.ph .anchors a { padding: 12px 16px; color: var(--ink-2); letter-spacing: .04em; border-right: 1px dotted var(--hair-2); position: relative; white-space: nowrap; display: flex; align-items: center; gap: 7px; transition: padding .2s ease; }

.ph.scrolled .anchors a { padding: 9px 14px; }

.ph .anchors a:hover { color: var(--ink); background: var(--paper-2); text-decoration: none; }

.ph .anchors a.now { color: var(--ink); background: var(--paper-2); font-weight: 600; }

.ph .anchors a.now::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--alt); }

.ph .anchors a .n { font-size: 9.5px; color: var(--muted); letter-spacing: .16em; }

.ph .anchors a.now .n { color: var(--alt); }

.ph .ph-meta { font-size: 10.5px; color: var(--muted); padding: 11px 0; letter-spacing: .06em; text-transform: uppercase; display: flex; gap: 14px; align-items: center; flex-shrink: 0; }

/* ─── §01 shot ────────────────────────────────────────────────── */
.shot-section { margin-top: -1px; }

.shot-frame { position: relative; height: 640px; border-bottom: 1px solid var(--hair); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.18) 100%), repeating-linear-gradient(0deg, #d8c8a0 0 3px, #e5d7b0 3px 14px), var(--paper-2); overflow: hidden; }

.shot-frame .scene-id { position: absolute; left: 24px; top: 20px; font-size: 10.5px; letter-spacing: .18em; color: rgba(20, 20, 20, 0.55); text-transform: uppercase; }

.shot-frame .vignette { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; color: var(--paper); background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45)); display: flex; justify-content: space-between; align-items: end; gap: 32px; }

.shot-frame .vignette .id { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #cdc8b6; }

.shot-frame .vignette .place-name { font-size: 64px; line-height: 1; letter-spacing: -.035em; font-weight: 700; color: #fff; text-wrap: balance; max-width: 18ch; }

.shot-frame .vignette .meta { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #cdc8b6; margin-top: 8px; }

.shot-frame .term { position: absolute; top: 24px; right: 24px; max-width: 560px; background: var(--term-bg); color: var(--term-fg); font-size: 13px; line-height: 1.45; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); overflow: hidden; width: 0; transition: width 0.55s cubic-bezier(0.2, 0.6, 0.2, 1); white-space: nowrap; z-index: 3; }

.shot-frame .term .pad { padding: 9px 14px; display: flex; align-items: baseline; gap: 8px; opacity: 0; transition: opacity .35s ease .45s; }

.shot-frame .term.on { width: auto; }

.shot-frame .term.on .pad { opacity: 1; }

.shot-frame .term .subj { color: var(--term-subj); }

.shot-frame .term .pct { color: #888; }

.shot-frame .term a { color: var(--term-link); border-bottom: 1px dotted #b88c4d; }

.shot-frame .term .blink { display: inline-block; width: 7px; height: 14px; background: var(--term-fg); animation: blink 1.1s infinite; vertical-align: -2px; margin-left: 2px; }

.treatment { display: grid; grid-template-columns: 1.55fr 1fr; gap: 48px; padding: 36px 0 8px; border-bottom: 1px solid var(--hair); }

.treatment .copy h2 { font-size: 11px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; font-weight: 600; }

.treatment .copy .standfirst { font-size: 21px; line-height: 1.45; color: var(--ink); font-weight: 500; letter-spacing: -.015em; max-width: 54ch; }

.treatment .copy p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 14px 0 0; max-width: 60ch; }

.treatment .copy p a { border-bottom: 1px solid var(--hair); }

.treatment .copy p a:hover { color: var(--alt); text-decoration: none; }

.treatment .copy .by { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; margin-top: 18px; }

.treatment .copy .by a { color: var(--ink); border-bottom: 1px solid var(--hair); }

.treatment .side { display: flex; flex-direction: column; gap: 14px; align-self: start; }

.ambient { background: var(--term-bg); color: var(--term-fg); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border: 1px solid #2a2723; }

.ambient .hd { font-size: 10.5px; color: #9a948a; letter-spacing: .16em; text-transform: uppercase; display: flex; justify-content: space-between; }

.ambient .hd .live { color: #a3d181; }

.ambient .hd .live::before { content: "●"; margin-right: 6px; animation: blink 1.8s infinite; }

.ambient .row { display: flex; align-items: center; gap: 10px; }

.ambient .ply { width: 30px; height: 30px; border-radius: 50%; background: var(--alt); color: var(--term-fg); display: flex; align-items: center; justify-content: center; font-size: 11px; flex: 0 0 30px; cursor: pointer; }

.ambient .ply:hover { background: #bd5a08; }

.ambient .lbl { font-size: 13px; }

.ambient .wave { flex: 1; height: 24px; background: repeating-linear-gradient(90deg, #2a2723 0 2px, transparent 2px 4px), linear-gradient(to right, var(--term-fg), var(--term-fg) 30%, #3a3631 30%, #3a3631); background-blend-mode: source-over; background-size: 4px 100%, 100% 60%; background-position: 0 50%, 0 50%; background-repeat: repeat-x, no-repeat; position: relative; mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%); }

.ambient .dur { font-size: 11px; color: #9a948a; letter-spacing: .04em; }

.place-map { position: relative; background: var(--paper-2); border: 1px solid var(--hair); height: 200px; overflow: hidden; }

.place-map .grid { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(20, 20, 20, 0.05) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgba(20, 20, 20, 0.05) 23px 24px), repeating-linear-gradient(45deg, rgba(20, 20, 20, 0.025) 0 1px, transparent 1px 5px); }

.place-map .marker { position: absolute; left: 48%; top: 46%; display: flex; flex-direction: column; align-items: center; gap: 3px; transform: translate(-50%, -50%); }

.place-map .marker .pin { width: 10px; height: 10px; background: var(--ink); border-radius: 50%; box-shadow: 0 0 0 4px rgba(20, 20, 20, 0.08); position: relative; }

.place-map .marker .pin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; border: 1px dashed var(--ink); border-radius: 50%; transform: translate(-50%, -50%); opacity: .4; }

.place-map .marker .lbl { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: var(--paper); padding: 2px 7px; border: 1px solid var(--hair); margin-top: 4px; }

.place-map .ros { position: absolute; left: 14px; top: 12px; font-size: 9.5px; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }

.place-map .coords { position: absolute; right: 14px; bottom: 10px; font-size: 10px; letter-spacing: .04em; color: var(--muted); }

.place-map .scale { position: absolute; left: 14px; bottom: 10px; width: 60px; height: 0; border-top: 1px solid var(--ink); font-size: 9.5px; color: var(--muted); padding-top: 3px; text-align: center; letter-spacing: .06em; }

.place-map .scale::before, .place-map .scale::after { content: ""; position: absolute; width: 1px; height: 5px; background: var(--ink); top: -3px; }

.place-map .scale::before { left: 0; }

.place-map .scale::after { right: 0; }

.facts { border: 1px solid var(--hair); background: var(--card); font-size: 12.5px; }

.facts .row { padding: 9px 14px; border-top: 1px dotted var(--hair-2); display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: baseline; }

.facts .row:first-child { border-top: none; }

.facts .row .k { font-size: 10.5px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }

.facts .row .v { color: var(--ink-2); }

.facts .row .v a { color: var(--ink); border-bottom: 1px solid var(--hair-2); }

/* ─── §02 angles ──────────────────────────────────────────────── */
.angles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.angle { background: var(--card); border: 1px solid var(--hair); display: flex; flex-direction: column; transition: border-color .15s ease; text-decoration: none; }

.angle:hover { border-color: var(--ink); text-decoration: none; }

.angle .plate { height: 260px; position: relative; border-bottom: 1px solid var(--hair); background: var(--paper-2); }

.angle .plate .num { position: absolute; left: 14px; top: 12px; font-size: 10.5px; color: var(--muted); letter-spacing: .16em; font-weight: 600; }

.angle .plate .num b { color: var(--ink); font-weight: 700; }

.angle .plate .lens { position: absolute; right: 14px; top: 12px; font-size: 10px; color: rgba(20, 20, 20, 0.6); letter-spacing: .16em; text-transform: uppercase; }

.angle.t1 .plate { background: repeating-linear-gradient(45deg, #e6d6b0 0 10px, #efe2c2 10px 20px); }

.angle.t2 .plate { background: repeating-linear-gradient(0deg, #dccfb0 0 2px, #e7dab8 2px 11px); }

.angle.t3 .plate { background: radial-gradient(circle at 30% 40%, #efe2c2, #d0c2a0 80%); }

.angle.t4 .plate { background: linear-gradient(135deg, #efe2c2, #cabd95); }

.angle .body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.angle h3 { font-size: 22px; letter-spacing: -.02em; font-weight: 600; color: var(--ink); }

.angle .blurb { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; max-width: 52ch; }

.angle .meta { font-size: 10.5px; color: var(--muted); letter-spacing: .06em; display: flex; gap: 12px; align-items: baseline; margin-top: auto; }

.angle .meta a { color: var(--ink-2); border-bottom: 1px dotted var(--hair); }

details.drawer { margin-top: 6px; border-top: 1px dotted var(--hair-2); padding-top: 8px; }

details.drawer > summary { list-style: none; cursor: pointer; font-size: 12px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; letter-spacing: .04em; padding: 4px 0; }

details.drawer > summary::-webkit-details-marker { display: none; }

details.drawer > summary .car { font-size: 10px; color: var(--muted); transition: transform .2s ease; }

details.drawer[open] > summary .car { transform: rotate(90deg); color: var(--alt); }

details.drawer > summary .car::before { content: "▸"; }

details.drawer > summary .ttl { flex: 1; }

details.drawer .pad { padding: 10px 0 4px; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }

details.drawer .pad .strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }

details.drawer .pad .strip .ph { height: 60px; background: repeating-linear-gradient(45deg, #f1ead4 0 6px, #f9f3df 6px 12px); border: 1px solid var(--hair-2); }

details.drawer .pad .timeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; align-items: end; height: 60px; margin-top: 8px; }

details.drawer .pad .timeline .bar { background: var(--ink); border: 1px solid var(--ink); position: relative; }

details.drawer .pad .timeline .bar .l { position: absolute; left: 0; bottom: -16px; font-size: 9px; color: var(--muted); letter-spacing: .04em; }

/* ─── §03 people ──────────────────────────────────────────────── */
.people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.person { background: var(--card); border: 1px solid var(--hair); padding: 14px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s ease; text-decoration: none; }

.person:hover { border-color: var(--ink); text-decoration: none; }

.person .portrait { height: 170px; background: repeating-linear-gradient(45deg, #f1ead4 0 8px, #f9f3df 8px 16px); border: 1px solid var(--hair-2); position: relative; }

.person .portrait::after { content: ""; position: absolute; inset: 24px; border: 1px solid var(--hair); border-radius: 50%; }

.person .nm { font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }

.person .role { font-size: 11px; color: var(--alt); letter-spacing: .06em; text-transform: uppercase; }

.person .bio { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; flex: 1; max-width: 30ch; }

.person .clip { display: flex; align-items: center; gap: 8px; background: var(--term-bg); color: var(--term-fg); padding: 6px 10px; font-size: 11px; border: 1px solid #2a2723; }

.person .clip .ply { width: 18px; height: 18px; border-radius: 50%; background: var(--alt); color: var(--term-fg); display: flex; align-items: center; justify-content: center; font-size: 8px; }

.person .clip .bar { flex: 1; height: 2px; background: #2a2723; position: relative; }

.person .clip .bar::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 22%; background: var(--term-fg); }

/* ─── §04 b-roll ──────────────────────────────────────────────── */
.broll { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }

.broll .tile { aspect-ratio: 1/1; background: repeating-linear-gradient(45deg, #f1ead4 0 8px, #f9f3df 8px 16px); border: 1px solid var(--hair-2); position: relative; cursor: pointer; transition: transform .15s ease, border-color .15s ease; }

.broll .tile:hover { transform: translateY(-2px); border-color: var(--ink); }

.broll .tile .id { position: absolute; left: 6px; bottom: 5px; font-size: 9px; color: var(--muted); letter-spacing: .12em; }

.broll .tile.audio { background: var(--term-bg); }

.broll .tile.audio .id { color: #9a948a; }

.broll .tile.audio::after { content: "♪"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--term-fg); font-size: 24px; }

.broll .tile.video { background: linear-gradient(135deg, #d8c8a0, #efe2c2); }

.broll .tile.video::after { content: "▶"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(20, 20, 20, 0.45); font-size: 16px; }

.broll .tile.more { background: var(--card); display: flex; align-items: center; justify-content: center; color: var(--ink); font-weight: 600; font-size: 13px; flex-direction: column; gap: 3px; border-color: var(--hair); text-decoration: none; }

.broll .tile.more:hover { transform: translateY(-2px); border-color: var(--ink); }

.broll .tile.more .sm { font-size: 10px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; font-weight: 400; }

.broll-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 11px; color: var(--muted); letter-spacing: .04em; }

.broll-meta a { color: var(--ink); border-bottom: 1px solid var(--hair); }

/* lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(20, 18, 16, 0.92); display: none; align-items: center; justify-content: center; z-index: 100; flex-direction: column; gap: 12px; }

.lightbox.on { display: flex; }

.lightbox .lb-img { width: 80vw; max-width: 1100px; height: 72vh; background: repeating-linear-gradient(45deg, #d8c8a0 0 12px, #e5d7b0 12px 24px); border: 1px solid #5a564d; position: relative; }

.lightbox .lb-img .corner { position: absolute; font-size: 11px; letter-spacing: .18em; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; padding: 14px 18px; }

.lightbox .lb-img .corner.tl { left: 0; top: 0; }

.lightbox .lb-img .corner.tr { right: 0; top: 0; }

.lightbox .lb-img .corner.bl { left: 0; bottom: 0; }

.lightbox .lb-img .corner.br { right: 0; bottom: 0; }

.lightbox .lb-cap { font-size: 12.5px; color: var(--paper); display: flex; justify-content: space-between; width: 80vw; max-width: 1100px; letter-spacing: .04em; }

.lightbox .lb-cap .right { color: #9a948a; }

.lightbox .close { position: absolute; top: 16px; right: 18px; color: var(--paper); font-size: 24px; cursor: pointer; font-weight: 300; line-height: 1; }

.lightbox .nav { position: absolute; top: 50%; transform: translateY(-50%); color: var(--paper); font-size: 36px; cursor: pointer; font-weight: 300; padding: 0 26px; opacity: .6; }

.lightbox .nav:hover { opacity: 1; }

.lightbox .nav.prev { left: 0; }

.lightbox .nav.next { right: 0; }

.lightbox .keys { font-size: 10.5px; color: #7a766e; letter-spacing: .16em; text-transform: uppercase; }

.lightbox .keys kbd { font: inherit; background: #26241f; color: var(--paper); padding: 2px 6px; border: 1px solid #3a3631; font-size: 10px; margin: 0 2px; }

/* ─── §05 field notes ─────────────────────────────────────────── */
.notes-col { display: grid; grid-template-columns: 1.55fr 1fr; gap: 36px; }

.notes-list { display: flex; flex-direction: column; gap: 14px; }

.fnote { background: var(--card); border: 1px solid var(--hair); border-left: 3px solid var(--alt); padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }

.fnote .ts { font-size: 10.5px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: baseline; }

.fnote .ts .anchor { color: var(--alt); }

.fnote .q { font-size: 15.5px; line-height: 1.55; color: var(--ink); max-width: 60ch; }

.fnote .q em { color: var(--alt); font-style: normal; font-weight: 600; }

.fnote .by { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; margin-top: 4px; }

.fnote .by .nm { color: var(--ink-2); font-weight: 500; }

.notes-side .box { border: 1px solid var(--hair); background: var(--card); padding: 14px; }

.notes-side h4 { font-size: 10.5px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; font-weight: 600; }

.notes-side .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.notes-side .stat .k { font-size: 10px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }

.notes-side .stat .v { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; }

.notes-side .stat .v small { font-size: 11px; color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: 5px; }

.notes-side .seeall { font-size: 12px; color: var(--ink-2); margin-top: 14px; padding-top: 10px; border-top: 1px dotted var(--hair-2); }

.notes-side .seeall a { border-bottom: 1px solid var(--hair); }

/* ─── §06 dailies ─────────────────────────────────────────────── */
.dailies { border-top: 1px solid var(--hair); }

.dailies .row { padding: 18px 0; border-bottom: 1px dotted var(--hair-2); display: grid; grid-template-columns: 90px 100px 1fr 100px; gap: 18px; align-items: baseline; }

.dailies .row:hover { background: #fbf7e9; }

.dailies .date { font-size: 11.5px; color: var(--muted); letter-spacing: .06em; }

.dailies .kind { font-size: 10.5px; color: var(--alt); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.dailies .body h4 { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }

.dailies .body h4 a { color: var(--ink); }

.dailies .body .desc { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.55; }

.dailies .right { text-align: right; font-size: 11px; color: var(--muted); letter-spacing: .04em; }

.dailies .right .dur { display: block; color: var(--ink); font-weight: 500; font-size: 13px; letter-spacing: -.01em; }

.dailies-foot { font-size: 11.5px; color: var(--muted); margin-top: 14px; letter-spacing: .04em; }

.dailies-foot a { color: var(--ink); border-bottom: 1px solid var(--hair); }

/* ─── place colophon columns ──────────────────────────────────── */
.place-col-this h4 { color: var(--alt); }

/* ─── responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) { .ph .r1 { flex-direction: column; align-items: start; gap: 14px; } .ph .ph-meta { display: none; } .treatment, .notes-col { grid-template-columns: 1fr; } .angles { grid-template-columns: 1fr; } .people-grid { grid-template-columns: 1fr 1fr; } .broll { grid-template-columns: repeat(4, 1fr); } .shot-frame { height: 480px; } .shot-frame .vignette .place-name { font-size: 42px; } .pp-panel { width: 320px; } }

@media (max-width: 640px) { .ph h1 { font-size: 22px; } .shot-frame { height: 360px; } .shot-frame .vignette .place-name { font-size: 30px; } .people-grid, .broll { grid-template-columns: 1fr 1fr; } .dailies .row { grid-template-columns: 1fr; gap: 6px; } .dailies .right { text-align: left; } .shot-frame .term { left: 14px; right: 14px; max-width: none; top: 14px; } .pp-panel { width: 300px; right: -12px; } }

.ctx { position: sticky; top: 0; background: rgba(250, 248, 243, 0.96); backdrop-filter: saturate(1.1) blur(8px); -webkit-backdrop-filter: saturate(1.1) blur(8px); border-bottom: 1px solid var(--hair); z-index: 20; font-size: 12px; }

.ctx .row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 9px 0; flex-wrap: wrap; }

.ctx .back { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }

.ctx .back .arr { color: var(--alt); }

.ctx .back b { color: var(--ink); font-weight: 600; }

.ctx .here { color: var(--muted); letter-spacing: .06em; font-size: 11px; }

.ctx .here .now { color: var(--ink); font-weight: 500; }

.ctx .anchors { display: flex; gap: 0; font-size: 11.5px; }

.ctx .anchors a { padding: 5px 10px; border: 1px solid var(--hair); margin: -1px 0 0 -1px; color: var(--ink-2); background: var(--card); display: inline-flex; align-items: baseline; gap: 5px; text-decoration: none; }

.ctx .anchors a:hover, .ctx .anchors a.here { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.ctx .more { display: flex; gap: 14px; font-size: 11.5px; }

.ctx .more a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); text-decoration: none; }

.ctx .more a.here { color: var(--ink); font-weight: 600; border-bottom-color: var(--alt); }

.body-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 42px; margin-top: 24px; }

.sidebar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 54px; align-self: start; max-height: calc(100vh - 72px); overflow: auto; }

.sb-box { border: 1px solid var(--hair); background: var(--card); padding: 14px 16px; }

.sb-box h4 { font-size: 10px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }

.sb-box li { font-size: 12.5px; padding: 5px 0; border-bottom: 1px dotted var(--hair-2); display: flex; justify-content: space-between; }

.sb-box li:last-child { border-bottom: none; }

.sb-box li .meta { color: var(--muted); font-size: 10.5px; }

.sb-box.toc li.now a { color: var(--ink); font-weight: 600; }

.pq { padding: 14px 16px; background: var(--paper-2); border-left: 3px solid var(--alt); font-size: 14.5px; line-height: 1.55; font-weight: 500; }

.pq .ts { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 8px; }

.tech .r { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 4px 0; border-bottom: 1px dotted var(--hair-2); font-size: 12.5px; }

.tech .r:last-child { border-bottom: none; }

.tech .r .k { color: var(--muted); }

.plate { position: relative; border: 1px solid var(--hair); background: repeating-linear-gradient(0deg, #d8c8a0 0 3px, #e5d7b0 3px 14px), var(--paper-2); height: 520px; margin-top: 14px; overflow: hidden; }

.plate .vig { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45)); color: #fff; display: flex; justify-content: space-between; align-items: flex-end; gap: 22px; }

.plate .vig .ttl-l { font-size: 60px; letter-spacing: -.035em; font-weight: 700; line-height: 1; }

.atitle { display: grid; grid-template-columns: 1.55fr 1fr; gap: 36px; padding: 32px 0 28px; border-bottom: 1px solid var(--hair); }

.atitle .lede .standfirst { font-size: 22px; line-height: 1.45; color: var(--ink); font-weight: 500; margin-bottom: 18px; }

.atitle .facts { border: 1px solid var(--hair); background: var(--card); font-size: 12.5px; }

.atitle .facts .r { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 8px 14px; border-bottom: 1px dotted var(--hair-2); }

.atitle .facts .r:last-child { border-bottom: none; }

.atitle .facts .r .k { color: var(--muted); }

.prose { font-size: 15px; line-height: 1.7; color: var(--ink); max-width: 62ch; }

.prose h2, .prose h3 { margin: 28px 0 12px; }

.prose p { margin: 0 0 16px; }

.prose a { color: var(--ink); border-bottom: 1px solid var(--hair); text-decoration: none; }

.prose a:hover { border-bottom-color: var(--alt); }

.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 18px 0; }

.strip .ph { aspect-ratio: 1/1; background: repeating-linear-gradient(45deg, #e6d6b0 0 10px, #efe2c2 10px 20px); border: 1px solid var(--hair-2); }

.clip { background: var(--term-bg); color: var(--term-fg); padding: 11px 14px; margin: 18px 0; display: flex; align-items: center; gap: 12px; border: 1px solid #2a2723; }

.clip .ply { width: 28px; height: 28px; border-radius: 50%; background: var(--alt); color: var(--term-fg); flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; }

.clip .info .t { font-size: 12.5px; color: var(--term-fg); }

.clip .info .dur { font-size: 11px; color: #7a766e; margin-top: 2px; }

.gloss-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0; }

.gloss-row span { font-size: 11.5px; color: var(--ink-2); border-bottom: 1px dashed var(--alt); cursor: help; padding: 0 2px; }

.smark { display: flex; align-items: center; gap: 14px; margin: 36px 0 18px; font-size: 11px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }

.smark .num { color: var(--alt); font-weight: 600; }

.smark .rule { flex: 1; height: 1px; background: var(--hair); }

@media (max-width: 1100px) { .atitle, .body-row { grid-template-columns: 1fr; } .plate { height: 340px; } .plate .vig .ttl-l { font-size: 40px; } .sidebar { position: static; max-height: none; } }

@media (max-width: 640px) { .ctx .more { display: none; } .atitle { gap: 24px; } .strip { grid-template-columns: repeat(2, 1fr); } }

.eph { margin-top: 18px; background: var(--term-bg); color: var(--term-fg); border: 1px solid #2a2723; display: grid; grid-template-columns: 1.4fr 1fr; min-height: 260px; }

.eph .left { padding: 24px 28px 22px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid #2a2723; }

.eph .left h1 { font-size: 36px; letter-spacing: -.028em; font-weight: 700; color: #fff; line-height: 1.1; }

.eph .left .dek { font-size: 14px; line-height: 1.55; color: #cdc8b6; }

.eph .left .by { font-size: 12px; color: #7a766e; margin-top: auto; }

.eph .right { padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; background: #181613; }

.eph .right .facts { font-size: 12px; }

.eph .right .facts .r { display: grid; grid-template-columns: 80px 1fr; gap: 8px; padding: 4px 0; border-bottom: 1px dotted #2a2723; }

.eph .right .facts .r:last-child { border-bottom: none; }

.eph .right .facts .r .k { color: #7a766e; }

.eph .right .facts .r .v { color: var(--term-fg); }

.wave { height: 90px; position: relative; background: #0d0c0b; border: 1px solid #2a2723; overflow: hidden; }

.wave svg { display: block; width: 100%; height: 100%; }

.wave .pos { position: absolute; top: 0; bottom: 0; left: 23%; width: 2px; background: var(--alt); }

.controls { display: flex; align-items: center; gap: 14px; }

.controls .ply { width: 46px; height: 46px; border-radius: 50%; background: var(--alt); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.controls .ply .tri { border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; margin-left: 3px; }

.controls .t { font-size: 12px; color: #9a948a; min-width: 38px; }

.controls .tline { flex: 1; height: 4px; background: #2a2723; position: relative; border-radius: 2px; }

.controls .tline .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 23%; background: var(--alt); border-radius: 2px; }

.pillrow { display: flex; gap: 0; border-top: 1px dotted #2a2723; padding-top: 11px; }

.pillrow button { font: inherit; background: transparent; border: 1px solid #2a2723; color: #9a948a; padding: 3px 8px; cursor: pointer; font-size: 11px; }

.pillrow button[aria-pressed="true"] { background: var(--alt); color: #fff; border-color: var(--alt); }

.pillrow button:hover { color: var(--term-fg); }

.chapters { border: 1px solid var(--hair); background: var(--card); }

.chapters .chap-head { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 18px; border-bottom: 1px solid var(--hair); font-size: 11px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }

.chapters .chap-head .nm { font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none; }

.chap { display: grid; grid-template-columns: 90px 1fr 60px; gap: 18px; padding: 13px 18px; cursor: pointer; border-bottom: 1px dotted var(--hair-2); }

.chap:last-child { border-bottom: none; }

.chap:hover { background: var(--paper-2); }

.chap.now { border-left: 3px solid var(--alt); padding-left: 15px; background: var(--paper-2); }

.chap .t { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.chap .body h4 { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }

.chap .body .blurb { font-size: 12px; color: var(--ink-2); line-height: 1.45; }

.chap .right { font-size: 12px; color: var(--muted); text-align: right; }

.tr-head { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 0 10px; border-bottom: 1px solid var(--hair-2); font-size: 11.5px; color: var(--muted); }

.transcript { font-size: 14px; line-height: 1.7; max-width: 62ch; }

.transcript .tr { display: grid; grid-template-columns: 78px 1fr; gap: 18px; padding: 8px 0; cursor: pointer; border-bottom: 1px dotted var(--hair-2); }

.transcript .tr:last-child { border-bottom: none; }

.transcript .tr:hover { background: var(--paper-2); }

.transcript .tr.now { background: var(--alt-soft); border-left: 2px solid var(--alt); padding-left: 8px; }

.transcript .tr .t { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 3px; }

.transcript .tr .l { color: var(--ink); }

.transcript .tr .l .q { font-size: 10px; letter-spacing: .12em; color: var(--alt); font-weight: 600; margin-right: 6px; text-transform: uppercase; }

@media (max-width: 1100px) { .eph { grid-template-columns: 1fr; } .eph .left { border-right: none; border-bottom: 1px solid #2a2723; } .chap { grid-template-columns: 70px 1fr; } .chap .right { display: none; } }

@media (max-width: 640px) { .eph .left h1 { font-size: 28px; } }

.player-wrap { margin-top: 18px; position: relative; background: #000; border: 1px solid var(--hair); overflow: hidden; }

.player { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(ellipse at 30% 30%, #2a2723 0, #0d0c0b 70%); display: flex; align-items: center; justify-content: center; }

.player .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 40px 40px; }

.player .overlay-tl { position: absolute; top: 14px; left: 18px; font-size: 10.5px; letter-spacing: .14em; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; }

.player .overlay-tr { position: absolute; top: 14px; right: 18px; font-size: 10.5px; letter-spacing: .1em; color: rgba(255, 255, 255, 0.55); }

.player .overlay-tr .rec { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e03030; margin-right: 6px; vertical-align: middle; }

.player .play-btn { width: 88px; height: 88px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }

.player .play-btn:hover { background: rgba(255, 255, 255, 0.15); }

.player .play-btn .tri { border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent #fff; margin-left: 4px; }

.player .frame-tag { position: absolute; bottom: 54px; left: 18px; font-size: 9.5px; letter-spacing: .12em; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; }

.player-bar { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)); padding: 34px 18px 14px; color: #fff; display: flex; align-items: center; gap: 14px; }

.player-bar .t { font-size: 12px; min-width: 38px; font-variant-numeric: tabular-nums; }

.player-bar .tline { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.25); position: relative; }

.player-bar .tline .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 23%; background: var(--alt); }

.player-bar .tline .chap { position: absolute; top: -3px; width: 2px; height: 9px; background: rgba(255, 255, 255, 0.6); }

.player-bar .btns { display: flex; gap: 12px; font-size: 11px; color: rgba(255, 255, 255, 0.7); }

.player-bar .btns span { cursor: pointer; }

.player-bar .btns span:hover { color: #fff; }

.player-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 14px 0 0; border-bottom: 1px solid var(--hair-2); font-size: 12.5px; }

.player-meta .left { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; color: var(--ink-2); }

.player-meta .left .kind { color: var(--alt); font-weight: 600; letter-spacing: .06em; font-size: 11px; text-transform: uppercase; }

.player-meta .left .dur { color: var(--ink); }

.player-meta .right { display: flex; gap: 14px; }

.player-meta .right a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); text-decoration: none; font-size: 12px; }

.vtitle { display: grid; grid-template-columns: 1.55fr 1fr; gap: 36px; padding: 28px 0 24px; border-bottom: 1px solid var(--hair); }

.vtitle h1 { font-size: 48px; line-height: 1.05; letter-spacing: -.03em; font-weight: 700; margin-bottom: 14px; }

.vtitle .dek { font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 52ch; margin-bottom: 12px; }

.vtitle .by { font-size: 12.5px; color: var(--muted); }

.vtitle .by .nm { color: var(--ink); font-weight: 600; }

.vtitle .side .facts { border: 1px solid var(--hair); background: var(--card); font-size: 12.5px; }

.vtitle .side .facts .r { display: grid; grid-template-columns: 80px 1fr; gap: 10px; padding: 8px 14px; border-bottom: 1px dotted var(--hair-2); }

.vtitle .side .facts .r:last-child { border-bottom: none; }

.vtitle .side .facts .r .k { color: var(--muted); }

.director-notes { margin-top: 24px; border: 1px solid var(--hair); background: var(--card); padding: 22px 26px; }

.director-notes h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; font-weight: 600; }

.director-notes p { font-size: 15px; line-height: 1.7; color: var(--ink); margin-bottom: 14px; max-width: 62ch; }

.director-notes p em { color: var(--alt); font-style: normal; }

.director-notes .by { font-size: 12.5px; color: var(--muted); margin-top: 18px; }

.director-notes .by .nm { color: var(--ink); font-weight: 600; }

.drawer { margin-top: 24px; border: 1px solid var(--hair); background: var(--card); }

.drawer summary { padding: 14px 22px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 13px; list-style: none; }

.drawer summary::-webkit-details-marker { display: none; }

.drawer summary:hover { background: var(--paper-2); }

.drawer summary .lbl { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 8px; font-weight: 600; }

.drawer summary .nm { color: var(--ink-2); }

.drawer summary .car { color: var(--muted); }

.tr-list { padding: 8px 0 14px; }

.tr { display: grid; grid-template-columns: 80px 1fr; gap: 18px; padding: 7px 22px; cursor: pointer; }

.tr:hover { background: var(--paper-2); }

.tr .t { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }

.tr .l { font-size: 14px; line-height: 1.55; color: var(--ink-2); }

.tr .l .q { font-size: 10px; letter-spacing: .12em; color: var(--alt); font-weight: 600; margin-right: 6px; text-transform: uppercase; }

@media (max-width: 1100px) { .vtitle { grid-template-columns: 1fr; } .vtitle h1 { font-size: 36px; } }

@media (max-width: 640px) { .vtitle h1 { font-size: 28px; } .play-btn { width: 64px !important; height: 64px !important; } .tr { grid-template-columns: 60px 1fr; gap: 10px; padding: 7px 14px; } }

.ttl { display: grid; grid-template-columns: 1.55fr 1fr; gap: 36px; margin: 18px 0; padding-bottom: 18px; border-bottom: 1px solid var(--hair); }

.ttl h1 { font-size: 44px; line-height: 1.05; letter-spacing: -.03em; font-weight: 700; margin-bottom: 10px; }

.ttl .intro { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 52ch; }

.ttl .right { align-self: start; }

.stat-bx { border: 1px solid var(--hair); background: var(--card); padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }

.stat-bx > div .k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 4px; }

.stat-bx > div .v { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }

.stat-bx > div small { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 4px; }

.tools { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; margin: 0 0 12px; padding: 12px 0; border-bottom: 1px solid var(--hair-2); }

.tools input[type="search"] { font: inherit; font-size: 12.5px; background: var(--card); border: 1px solid var(--hair); color: var(--ink); padding: 5px 10px; width: 200px; }

.tools input[type="search"]::placeholder { color: var(--muted); }

.tools .group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.tools .lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.tools .util { margin-left: auto; font-size: 12px; color: var(--ink-2); }

.tools .util a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); text-decoration: none; }

.pill-row { display: flex; gap: 0; flex-wrap: wrap; font-size: 12px; }

.pill-row button { font: inherit; font-size: 12px; background: var(--card); border: 1px solid var(--hair); color: var(--ink-2); padding: 4px 11px; cursor: pointer; margin: -1px 0 0 -1px; display: inline-flex; align-items: center; gap: 5px; }

.pill-row button .n { font-size: 10.5px; color: var(--muted); }

.pill-row button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.pill-row button[aria-pressed="true"] .n { color: rgba(255, 255, 255, 0.6); }

.pill-row button:hover:not([aria-pressed="true"]) { border-color: var(--ink-2); }

.view { display: flex; }

.view button { font: inherit; font-size: 12px; background: var(--card); border: 1px solid var(--hair); color: var(--ink-2); padding: 4px 10px; cursor: pointer; margin: 0 0 0 -1px; }

.view button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }

.grid.dense { grid-template-columns: repeat(8, 1fr); }

.tile { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--hair-2); cursor: pointer; background: var(--paper-2); overflow: hidden; transition: transform .15s ease; }

.tile:hover { transform: translateY(-2px); border-color: var(--ink); }

.tile .meta-tag { position: absolute; top: 6px; left: 6px; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.85); padding: 2px 5px; }

.tile .id { position: absolute; bottom: 22px; left: 6px; font-size: 9.5px; letter-spacing: .1em; color: rgba(0, 0, 0, 0.5); text-transform: uppercase; }

.tile .when { position: absolute; bottom: 6px; left: 6px; font-size: 9px; color: rgba(0, 0, 0, 0.4); }

.tile.t1 { background: repeating-linear-gradient(45deg, #d8c8a0 0 10px, #e5d7b0 10px 20px); }

.tile.t2 { background: repeating-linear-gradient(0deg, #dccfb0 0 2px, #e7dab8 2px 11px); }

.tile.t3 { background: radial-gradient(circle at 30% 40%, #efe2c2, #d0c2a0 80%); }

.tile.t4 { background: linear-gradient(135deg, #efe2c2, #cabd95); }

.tile.t5 { background: repeating-linear-gradient(90deg, #ebe2cb 0 9px, #f3ecd8 9px 18px); }

.tile.t6 { background: radial-gradient(circle at 1px 1px, #d8cfb6 1px, transparent 1.5px) 0 0/16px 16px, #f1ead7; }

.tile.t7 { background: linear-gradient(180deg, #f4ecd5 0%, #e7dac3 100%); }

.tile.dawn { background: linear-gradient(180deg, #f7e8b6, #ec9d6a 60%, #7d3a26); }

.tile.dawn .id, .tile.dawn .when { color: rgba(255, 255, 255, 0.6); }

.tile.night { background: linear-gradient(180deg, #1f1c18, #3a322a 60%, #0d0c0b); }

.tile.night .id, .tile.night .when { color: rgba(255, 255, 255, 0.4); }

.tile.audio { background: var(--term-bg); }

.tile.audio::after { content: "♪"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--term-fg); font-size: 22px; }

.tile.audio .id, .tile.audio .when { color: rgba(255, 255, 255, 0.4); }

.tile.video::after { content: "▶"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.7); font-size: 18px; background: rgba(0, 0, 0, 0.25); }

.grid-foot { margin-top: 18px; padding: 14px 0; border-top: 1px solid var(--hair-2); font-size: 11.5px; color: var(--muted); display: flex; justify-content: space-between; }

.grid-foot a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); text-decoration: none; }

.lb { position: fixed; inset: 0; background: rgba(20, 18, 16, 0.94); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 100; padding: 36px 64px; }

.lb.on { display: flex; }

.lb-img { position: relative; width: 80vw; max-width: 1100px; height: 72vh; max-height: 720px; background: var(--paper-2); border: 1px solid #4a463d; overflow: hidden; }

.lb-img.t1 { background: repeating-linear-gradient(45deg, #d8c8a0 0 12px, #e5d7b0 12px 24px); }

.lb-img.t2 { background: repeating-linear-gradient(0deg, #dccfb0 0 3px, #e7dab8 3px 14px); }

.lb-img.t3 { background: radial-gradient(circle at 30% 40%, #efe2c2, #d0c2a0 80%); }

.lb-img.t4 { background: linear-gradient(135deg, #efe2c2, #cabd95); }

.lb-img.t5 { background: repeating-linear-gradient(90deg, #ebe2cb 0 12px, #f3ecd8 12px 24px); }

.lb-img.t6 { background: radial-gradient(circle at 1px 1px, #d8cfb6 1px, transparent 1.5px) 0 0/20px 20px, #f1ead7; }

.lb-img.t7 { background: linear-gradient(180deg, #f4ecd5 0%, #e7dac3 100%); }

.lb-img.dawn { background: linear-gradient(180deg, #f7e8b6, #ec9d6a 60%, #7d3a26); }

.lb-img.night { background: linear-gradient(180deg, #1f1c18, #3a322a 60%, #0d0c0b); }

.lb-img.audio { background: var(--term-bg); }

.lb-img .corner { position: absolute; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(0, 0, 0, 0.4); padding: 8px 10px; }

.lb-img .corner.tl { top: 0; left: 0; }

.lb-img .corner.tr { top: 0; right: 0; }

.lb-img .corner.bl { bottom: 0; left: 0; }

.lb-img .corner.br { bottom: 0; right: 0; }

.lb-img.night .corner, .lb-img.audio .corner { color: rgba(255, 255, 255, 0.35); }

.lb-cap { width: 80vw; max-width: 1100px; color: var(--paper); display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; font-size: 12.5px; }

.lb-cap h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }

.lb-cap .meta { font-size: 11.5px; color: rgba(255, 255, 255, 0.55); }

.lb-cap .right { text-align: right; color: rgba(255, 255, 255, 0.55); }

.lb-cap .act { margin-top: 6px; }

.lb-cap .act a { color: rgba(255, 255, 255, 0.75); border-bottom: 1px solid rgba(255, 255, 255, 0.2); text-decoration: none; margin-left: 10px; }

.lb-close { position: fixed; top: 16px; right: 18px; font-size: 24px; color: var(--paper); cursor: pointer; background: none; border: none; opacity: .7; }

.lb-close:hover { opacity: 1; }

.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); color: var(--paper); font-size: 32px; cursor: pointer; background: none; border: none; opacity: .6; padding: 0 18px; }

.lb-nav:hover { opacity: 1; }

.lb-nav.prev { left: 0; }

.lb-nav.next { right: 0; }

.lb-keys { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 10.5px; color: #7a766e; letter-spacing: .16em; text-transform: uppercase; display: flex; gap: 14px; }

.lb-keys kbd { display: inline-block; border: 1px solid #4a463d; padding: 1px 6px; font-size: 10px; background: rgba(255, 255, 255, 0.08); }

@media (max-width: 1100px) { .ttl { grid-template-columns: 1fr; } .grid { grid-template-columns: repeat(4, 1fr); } .grid.dense { grid-template-columns: repeat(6, 1fr); } }

@media (max-width: 640px) { .ttl h1 { font-size: 32px; } .grid { grid-template-columns: repeat(3, 1fr); } .grid.dense { grid-template-columns: repeat(4, 1fr); } .lb { padding: 24px 32px; } .lb-nav { padding: 0 10px; } }

.day { margin-bottom: 18px; }

.day[hidden] { display: none; }

.day-head { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 14px 0 10px; border-bottom: 1px solid var(--hair); }

.day-head .d { font-size: 13px; color: var(--muted); letter-spacing: .04em; }

.day-head .d b { display: block; font-size: 30px; color: var(--ink); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }

.day-head .d .when { display: block; font-size: 10.5px; color: var(--muted); margin-top: 4px; }

.day-head .summary { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); padding-top: 6px; }

.day-head .summary em { font-style: italic; }

.notes { display: flex; flex-direction: column; gap: 12px; padding: 14px 0 0; }

.note { background: var(--card); border: 1px solid var(--hair); border-left: 3px solid var(--alt); padding: 16px 22px; display: flex; flex-direction: column; gap: 10px; }

.note[hidden] { display: none; }

.note.au-b { border-left-color: var(--ink); }

.note.au-c { border-left-color: var(--live); }

.note .head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }

.note .head .ts { font-size: 11px; color: var(--muted); letter-spacing: .06em; }

.note .head .ts .nu { display: inline-block; background: var(--ink); color: var(--paper); font-size: 9.5px; padding: 1px 5px; margin-right: 6px; letter-spacing: .1em; }

.note .head .anchor { font-size: 11.5px; color: var(--muted); }

.note .head .anchor.general { color: var(--ink-2); }

.note .head .anchor::before { content: "↳ "; }

.note .head .anchor a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); text-decoration: none; }

.note .body { font-size: 15px; line-height: 1.6; color: var(--ink); max-width: 62ch; }

.note .body em { font-style: italic; }

.note .body strong { font-weight: 700; }

.note .body a { color: var(--ink); border-bottom: 1px solid var(--hair); text-decoration: none; }

.note .body a:hover { border-bottom-color: var(--alt); }

.note .foot { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-top: 6px; border-top: 1px dotted var(--hair-2); }

.note .foot .by { font-size: 12px; color: var(--muted); }

.note .foot .by .nm { color: var(--ink); font-weight: 600; }

.note .foot .util { display: flex; gap: 12px; }

.note .foot .util a { font-size: 11.5px; color: var(--muted); border-bottom: 1px solid var(--hair-2); text-decoration: none; }

.note .foot .util a:hover { color: var(--ink); }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.tagcloud { display: flex; flex-wrap: wrap; gap: 0; font-size: 11px; }

.tagcloud a { border: 1px solid var(--hair); background: var(--paper); color: var(--ink-2); padding: 3px 9px; margin: -1px 0 0 -1px; text-decoration: none; }

.tagcloud a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.authors { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }

.authors .row { display: grid; grid-template-columns: 14px 1fr 30px; gap: 10px; padding: 5px 0; border-bottom: 1px dotted var(--hair-2); }

.authors .row:last-child { border-bottom: none; }

.authors .row .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--alt); align-self: center; }

.authors .row .dot.b { background: var(--ink); }

.authors .row .dot.c { background: var(--live); }

.authors .row .n { font-size: 11px; color: var(--muted); text-align: right; }

@media (max-width: 640px) { .day-head { grid-template-columns: 1fr; gap: 6px; } .stats { grid-template-columns: 1fr 1fr; } }

.page-updates .ttl { display: grid; grid-template-columns: 1.55fr 1fr; gap: 36px; margin: 6px 0 24px; padding-bottom: 22px; border-bottom: 1px solid var(--hair); }

.page-updates .ttl h1 { font-size: 54px; line-height: 1; letter-spacing: -.04em; font-weight: 700; margin-bottom: 10px; }

.page-updates .ttl .dek { font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 48ch; }

.page-updates .ttl .subscribe { border: 1px solid var(--hair); background: var(--card); padding: 14px 16px; font-size: 12.5px; }

.page-updates .ttl .subscribe h4 { font-size: 10px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }

.page-updates .ttl .subscribe li { padding: 5px 0; border-bottom: 1px dotted var(--hair-2); display: flex; justify-content: space-between; }

.page-updates .ttl .subscribe li:last-child { border-bottom: none; }

.page-updates .toolstrip { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; margin: 0 0 18px; padding: 14px 0; border-bottom: 1px solid var(--hair-2); }

.page-updates .toolstrip input[type="search"] { font: inherit; font-size: 12.5px; background: var(--card); border: 1px solid var(--hair); color: var(--ink); padding: 5px 10px; width: 220px; }

.page-updates .toolstrip input[type="search"]::placeholder { color: var(--muted); }

.page-updates .toolstrip .group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.page-updates .toolstrip .lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.page-updates .feat { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; border: 1px solid var(--hair); margin-bottom: 24px; }

.page-updates .feat .cover { min-height: 260px; border-right: 1px solid var(--hair); background: repeating-linear-gradient(45deg, #d8c8a0 0 10px, #e5d7b0 10px 20px); position: relative; }

.page-updates .feat .body { padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; background: var(--card); }

.page-updates .feat .body .kicker { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--alt); font-weight: 600; }

.page-updates .feat .body h2 { font-size: 28px; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }

.page-updates .feat .body .dek { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

.page-updates .feat .body .meta { margin-top: auto; font-size: 12px; color: var(--muted); display: flex; gap: 10px; }

.page-updates .feat .body .meta a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); text-decoration: none; }

.page-updates .feat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 36px; }

.page-updates .feat-row.cols-3 { grid-template-columns: repeat(3, 1fr); }

.page-updates .fcard { border: 1px solid var(--hair); background: var(--card); display: flex; flex-direction: column; transition: border-color .15s ease; text-decoration: none; color: inherit; }

.page-updates .fcard:hover { border-color: var(--ink); text-decoration: none; }

.page-updates .fcard .cover { height: 120px; background: repeating-linear-gradient(0deg, #dccfb0 0 2px, #e7dab8 2px 11px); border-bottom: 1px solid var(--hair); }

.page-updates .fcard .body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }

.page-updates .fcard .body .kicker { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--alt); font-weight: 600; }

.page-updates .fcard .body h4 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }

.page-updates .fcard .body .blurb { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

.page-updates .fcard .body .meta { font-size: 10.5px; color: var(--muted); margin-top: auto; padding-top: 8px; display: flex; gap: 8px; align-items: center; }

.page-updates .rail-head { display: grid; grid-template-columns: 1.55fr 1fr; gap: 36px; align-items: end; padding: 22px 0 14px; border-bottom: 2px solid var(--ink); }

.page-updates .rail-head h2 { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--muted); }

.page-updates .rail-head h3 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }

.page-updates .rail-head .side { text-align: right; font-size: 12px; color: var(--ink-2); }

.page-updates .rail-head .side a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); text-decoration: none; }

.page-updates .rail-list { border: 1px solid var(--hair); background: var(--card); }

.page-updates .urow { display: grid; grid-template-columns: 120px 1fr 200px; gap: 22px; padding: 16px 22px; border-bottom: 1px dotted var(--hair-2); }

.page-updates .urow:last-child { border-bottom: none; }

.page-updates .urow:hover { background: var(--paper-2); }

.page-updates .urow .ts { font-size: 12px; color: var(--muted); letter-spacing: .04em; padding-top: 3px; }

.page-updates .urow .body .kicker { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--alt); font-weight: 600; margin-bottom: 5px; }

.page-updates .urow .body h4 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }

.page-updates .urow .body .blurb { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

.page-updates .urow .meta { text-align: right; font-size: 11.5px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }

.page-updates .urow .meta .tag { display: inline-block; border: 1px solid var(--hair); padding: 1px 6px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); align-self: flex-end; }

.page-updates .rail-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 12px; color: var(--muted); }

.page-updates .rail-foot a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); text-decoration: none; }

.page-updates .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.page-updates .dlist { border: 1px solid var(--hair); background: var(--card); }

.page-updates .drow { padding: 11px 16px; border-bottom: 1px dotted var(--hair-2); display: grid; grid-template-columns: 80px 1fr 80px; gap: 14px; }

.page-updates .drow:last-child { border-bottom: none; }

.page-updates .drow .ts { font-size: 11px; color: var(--muted); letter-spacing: .04em; }

.page-updates .drow .body { font-size: 13px; color: var(--ink); }

.page-updates .drow .meta { font-size: 11px; color: var(--muted); text-align: right; }

.page-updates .archive-wrap { border: 1px solid var(--hair); background: var(--card); }

.page-updates .arch-row { display: grid; grid-template-columns: 130px 1fr; gap: 28px; padding: 18px 22px; border-bottom: 1px dotted var(--hair-2); }

.page-updates .arch-row:last-child { border-bottom: none; }

.page-updates .arch-row .month { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }

.page-updates .arch-row .month small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }

.page-updates .arch-row .items { display: flex; flex-direction: column; gap: 6px; }

.page-updates .arch-row .item { font-size: 13px; color: var(--ink-2); }

.page-updates .arch-row .item a { color: var(--ink); border-bottom: 1px solid var(--hair); text-decoration: none; }

@media (max-width: 1100px) { .page-updates .ttl { grid-template-columns: 1fr; } .page-updates .feat { grid-template-columns: 1fr; } .page-updates .feat .cover { min-height: 180px; border-right: none; border-bottom: 1px solid var(--hair); } .page-updates .feat-row { grid-template-columns: 1fr; } .page-updates .rail-head { grid-template-columns: 1fr; } .page-updates .urow { grid-template-columns: 90px 1fr; } .page-updates .urow .meta { display: none; } }

@media (max-width: 640px) { .page-updates .ttl h1 { font-size: 36px; } .page-updates .feat-row { grid-template-columns: 1fr; } .page-updates .two-col { grid-template-columns: 1fr; } .page-updates .arch-row { grid-template-columns: 1fr; gap: 8px; } }

.page-rwl .modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-left: 1px solid var(--hair); border-bottom: 1px solid var(--ink); margin: 18px 0 0; }

.page-rwl .mode { font: inherit; background: var(--paper); border: 1px solid var(--hair); border-bottom: none; border-left: none; color: var(--ink-2); padding: 22px 24px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: background .15s; }

.page-rwl .mode .nm { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }

.page-rwl .mode .kicker { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.page-rwl .mode .count { font-size: 11.5px; color: var(--muted); }

.page-rwl .mode[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.page-rwl .mode[aria-pressed="true"] .nm, .page-rwl .mode[aria-pressed="true"] .kicker, .page-rwl .mode[aria-pressed="true"] .count { color: var(--paper); }

.page-rwl .mode[aria-pressed="true"] .kicker { color: rgba(255, 255, 255, 0.55); }

.page-rwl .mode:hover:not([aria-pressed="true"]) { background: var(--paper-2); }

.page-rwl .panel { display: none; padding-top: 24px; }

.page-rwl .panel.on { display: block; }

.page-rwl .feat { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; border: 1px solid var(--hair); margin-bottom: 24px; }

.page-rwl .feat .cover { min-height: 280px; border-right: 1px solid var(--hair); background: repeating-linear-gradient(45deg, #d8c8a0 0 10px, #e5d7b0 10px 20px); position: relative; overflow: hidden; }

.page-rwl .feat .body { padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; background: var(--card); }

.page-rwl .feat .body .kicker { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--alt); font-weight: 600; }

.page-rwl .feat .body h2 { font-size: 28px; line-height: 1.15; letter-spacing: -.025em; font-weight: 700; }

.page-rwl .feat .body .dek { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

.page-rwl .feat .body .meta { margin-top: auto; font-size: 12px; color: var(--muted); }

.page-rwl .feat .body .meta a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); text-decoration: none; }

.page-rwl .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.page-rwl .card { background: var(--card); border: 1px solid var(--hair); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color .15s; }

.page-rwl .card:hover { border-color: var(--ink); }

.page-rwl .card .cover { height: 160px; position: relative; border-bottom: 1px solid var(--hair); background: var(--paper-2); overflow: hidden; }

.page-rwl .card .body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.page-rwl .card .body .kicker { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--alt); font-weight: 600; }

.page-rwl .card .body h4 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }

.page-rwl .card .body .blurb { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; margin-top: auto; }

.page-rwl .card .body .meta { font-size: 10.5px; color: var(--muted); display: flex; justify-content: space-between; }

.page-rwl .card .cover.t-steel { background: repeating-linear-gradient(45deg, #d8c8a0 0 10px, #e5d7b0 10px 20px); }

.page-rwl .card .cover.t-pour { background: linear-gradient(180deg, #f7e8b6, #ec9d6a 60%, #7d3a26); }

.page-rwl .card .cover.t-furnace { background: radial-gradient(circle at 30% 40%, #efe2c2, #d0c2a0 80%); }

.page-rwl .card .cover.t-floor { background: repeating-linear-gradient(0deg, #dccfb0 0 2px, #e7dab8 2px 11px); }

.page-rwl .card .cover.t-cast { background: linear-gradient(135deg, #efe2c2, #cabd95); }

.page-rwl .card .cover.t-pulpit { background: repeating-linear-gradient(90deg, #ebe2cb 0 9px, #f3ecd8 9px 18px); }

.page-rwl .card .cover.t-doc { background: radial-gradient(circle at 1px 1px, #d8cfb6 1px, transparent 1.5px) 0 0/16px 16px, #f1ead7; }

.page-rwl .card .cover.t-night { background: linear-gradient(180deg, #1f1c18, #3a322a 60%, #0d0c0b); }

.page-rwl .card .cover.t-dawn { background: linear-gradient(180deg, #f7e8b6, #ec9d6a 60%, #7d3a26); }

.page-rwl .card .cover.video::after { content: "▶"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.8); font-size: 24px; background: rgba(0, 0, 0, 0.25); }

.page-rwl .card .cover.audio { background: var(--term-bg); }

.page-rwl .card .cover.audio::after { content: "♪"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--term-fg); font-size: 28px; }

.page-rwl .grid-foot { margin-top: 18px; padding: 14px 0; border-top: 1px solid var(--hair-2); font-size: 11.5px; color: var(--muted); display: flex; justify-content: space-between; }

.page-rwl .grid-foot a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); text-decoration: none; }

.page-rwl .xlinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }

.page-rwl .xcard { border: 1px solid var(--hair); background: var(--card); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-height: 130px; text-decoration: none; color: inherit; transition: border-color .15s; }

.page-rwl .xcard:hover { border-color: var(--ink); }

.page-rwl .xcard .world { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.page-rwl .xcard h4 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }

.page-rwl .xcard .count { font-size: 11.5px; color: var(--muted); margin-top: auto; }

@media (max-width: 1100px) { .page-rwl .modes { grid-template-columns: 1fr 1fr 1fr; } .page-rwl .feat { grid-template-columns: 1fr; } .page-rwl .feat .cover { min-height: 200px; border-right: none; border-bottom: 1px solid var(--hair); } .page-rwl .cards { grid-template-columns: 1fr 1fr; } .page-rwl .xlinks { grid-template-columns: 1fr 1fr; } }

@media (max-width: 640px) { .page-rwl .modes { grid-template-columns: 1fr; } .page-rwl .mode .nm { font-size: 22px; } .page-rwl .cards { grid-template-columns: 1fr; } .page-rwl .xlinks { grid-template-columns: 1fr 1fr; } }

.p-hero { display: grid; margin: 14px 0 8px; border: 1px solid var(--hair); background: var(--card); }

.p-hero.subject { grid-template-columns: 1fr 1.55fr; min-height: 380px; }

.p-hero.subject .portrait { background: repeating-linear-gradient(45deg, #e6d6b0 0 12px, #efe2c2 12px 24px); position: relative; border-right: 1px solid var(--hair); }

.p-hero.subject .portrait::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #efe2c2, #a89a72 80%); transform: translate(-50%, -50%); }

.p-hero.contributor { grid-template-columns: 280px 1fr; border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--hair); }

.p-hero.contributor .portrait { background: var(--ink); color: var(--paper); border-right: 1px solid var(--ink); position: relative; min-height: 340px; }

.p-hero.contributor .portrait .silhouette { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 64%; aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #4a463d, #1a1815 80%); }

.p-hero.contributor .portrait .badge { position: absolute; left: 18px; top: 18px; font-size: 9.5px; letter-spacing: .18em; color: #cdc8b6; text-transform: uppercase; }

.p-hero.contributor .portrait .punch { position: absolute; right: 18px; top: 18px; width: 32px; height: 32px; border: 1px solid #4a463d; border-radius: 50%; }

.p-hero.contributor .portrait .id-num { position: absolute; left: 18px; bottom: 18px; font-size: 10px; color: #7a766e; letter-spacing: .12em; }

.p-hero .body { padding: 28px 32px; display: flex; flex-direction: column; gap: 12px; }

.p-hero .body .kicker { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.p-hero .body h1 { font-size: 56px; line-height: 1; letter-spacing: -.035em; font-weight: 700; }

.p-hero .body .role { font-size: 18px; color: var(--ink-2); }

.p-hero .body .pills { display: flex; flex-wrap: wrap; gap: 0; }

.p-hero .body .pills .pill { font-size: 11px; letter-spacing: .08em; border: 1px solid var(--hair); padding: 3px 10px; margin: -1px 0 0 -1px; color: var(--ink-2); text-decoration: none; }

.p-hero .body .pills .pill.world { border-color: var(--alt); color: var(--alt); }

.p-hero .body .pills .pill.place { color: var(--ink-2); }

.p-hero .body .since { font-size: 12.5px; color: var(--muted); margin-top: auto; }

.p-hero .body .since span { color: var(--ink); }

.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); margin-top: 14px; }

.stat { padding: 16px 20px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: var(--card); display: flex; flex-direction: column; gap: 3px; min-height: 90px; }

.stat .k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.stat .v { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }

.stat .sub { font-size: 11.5px; color: var(--muted); }

.bio { font-size: 15px; line-height: 1.7; max-width: 62ch; }

.bio p { margin-bottom: 16px; }

.bio blockquote { margin: 22px 0; padding: 6px 22px; border-left: 3px solid var(--alt); font-size: 19px; line-height: 1.45; font-weight: 500; color: var(--ink); }

.bio a { color: var(--ink); border-bottom: 1px solid var(--hair); text-decoration: none; }

.bio a:hover { border-bottom-color: var(--alt); }

.timeline { border: 1px solid var(--hair); background: var(--card); margin-top: 14px; }

.timeline .tl-head { padding: 10px 18px; border-bottom: 1px solid var(--hair); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.tl-row { display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding: 11px 18px; border-bottom: 1px dotted var(--hair-2); }

.tl-row:last-child { border-bottom: none; }

.tl-row .yr { font-size: 12.5px; color: var(--muted); font-weight: 600; padding-top: 2px; }

.tl-row .ev { font-size: 13.5px; line-height: 1.5; }

.app-row, .byline-row { display: grid; grid-template-columns: 120px 60px 1fr 120px; gap: 18px; padding: 14px 0; border-bottom: 1px dotted var(--hair-2); font-size: 13px; }

.app-row:last-child, .byline-row:last-child { border-bottom: none; }

.app-row .ts, .byline-row .ts { color: var(--muted); font-size: 12px; }

.app-row .kind, .byline-row .kind { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--alt); font-weight: 600; }

.app-row h4, .byline-row h4 { font-weight: 600; letter-spacing: -.01em; }

.app-row .meta, .byline-row .meta { text-align: right; font-size: 12px; color: var(--muted); }

.sampler { background: var(--term-bg); color: var(--term-fg); padding: 11px 14px; display: flex; align-items: center; gap: 11px; margin: 14px 0; }

.sampler .ply { width: 32px; height: 32px; border-radius: 50%; background: var(--alt); border: none; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

.sampler .ply .tri { border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; margin-left: 2px; }

.sampler .info .t { font-size: 12.5px; color: var(--term-fg); }

.sampler .info .dur { font-size: 11px; color: #7a766e; margin-top: 2px; }

.bylines { margin-top: 6px; }

.cov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }

.cov { background: var(--card); border: 1px solid var(--hair); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: border-color .15s; }

.cov:hover { border-color: var(--ink); }

.cov .kind { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--alt); font-weight: 600; }

.cov h4 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }

.cov .meta { font-size: 11px; color: var(--muted); margin-top: auto; }

.contact-card { background: var(--ink); color: var(--paper); padding: 18px 20px; margin-top: 14px; }

.contact-card h4 { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); font-weight: 600; margin-bottom: 10px; }

.contact-card .r { font-size: 12.5px; padding: 8px 0; border-bottom: 1px dotted #3a3631; display: grid; grid-template-columns: 80px 1fr; gap: 12px; }

.contact-card .r:last-child { border-bottom: none; }

.contact-card .r .k { color: rgba(255, 255, 255, 0.45); }

.contact-card .r a { color: var(--paper); border-bottom: 1px solid rgba(255, 255, 255, 0.2); text-decoration: none; }

@media (max-width: 1100px) { .p-hero.subject { grid-template-columns: 1fr; min-height: auto; } .p-hero.subject .portrait { min-height: 220px; border-right: none; border-bottom: 1px solid var(--hair); } .p-hero.contributor { grid-template-columns: 1fr; } .p-hero.contributor .portrait { min-height: 180px; border-right: none; border-bottom: 1px solid var(--ink); } .stat-strip { grid-template-columns: repeat(2, 1fr); } .cov-grid { grid-template-columns: 1fr 1fr; } .app-row, .byline-row { grid-template-columns: 90px 50px 1fr; } .app-row .meta, .byline-row .meta { display: none; } }

@media (max-width: 640px) { .p-hero .body h1 { font-size: 36px; } .stat-strip { grid-template-columns: 1fr 1fr; } .cov-grid { grid-template-columns: 1fr; } }

/*# sourceMappingURL=style.css.map */