/* Black homepage treatment. Keeps the existing markup, media, and interactions. */
@font-face { font-family:Inter; src:url('/gloss-fonts/InterVariable.woff2') format('woff2'); font-display:swap; }
:root { color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:32px; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
.skip { position:fixed; top:-80px; left:20px; z-index:10; background:var(--paper); padding:16px; }
.skip:focus { top:12px; }
.rail { position:fixed; inset:0 auto 0 0; z-index:3; display:flex; flex-direction:column; overflow-y:auto; }
.brand { display:inline-flex; align-items:center; gap:10px; }
.mark { position:relative; display:inline-block; }
.mark::after { position:absolute; left:0; content:''; }
.rail nav { display:grid; }
.rail nav a { display:block; }
.rail-bottom { display:grid; margin-top:auto; }
main { min-width:0; }
.topline { display:flex; align-items:center; justify-content:space-between; padding-bottom:28px; }
.edition::before { display:inline-block; content:''; }
h1,h2 { margin:0; }
.cinema-head { display:flex; align-items:center; justify-content:flex-end; }
.switcher { display:flex; }
.stage { position:relative; aspect-ratio:16/9; overflow:hidden; }
.stage iframe { display:block; width:100%; height:100%; border:0; }
.demo-status { position:absolute; margin:0; pointer-events:none; }
.film-caption { display:flex; align-items:center; justify-content:space-between; }
.section-top { display:flex; align-items:baseline; justify-content:space-between; }
.reading { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
figure { margin:0; }
.reading img { display:block; width:100%; height:auto; object-fit:contain; object-position:top; }
.reading figcaption { display:flex; justify-content:space-between; }
.review-pair { display:grid; align-items:center; }
.review-pair img { display:block; width:100%; height:auto; }
.comments-shell { margin:auto; }
.comment-item { overflow-wrap:anywhere; padding:22px 0; }
.comment-meta { display:flex; flex-wrap:wrap; align-items:baseline; }
.comment-name { font-weight:600; }
.comment-body { margin-top:12px; white-space:pre-wrap; line-height:1.65; }
.comment-form { display:grid; }
.comment-form label { display:grid; min-width:0; }
.comment-form textarea { resize:vertical; }
.comment-submit { cursor:pointer; }
.comment-submit:disabled { cursor:wait; opacity:.6; }
.comment-status { overflow-wrap:anywhere; }
.comment-status.error { color:#ffb5a9; }
.comment-honeypot { display:none; }
footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; }
footer nav { display:flex; flex-wrap:wrap; }


:root { --accent:#ededed; --ink:#f4f4f4; --muted:#a4a7ab; --paper:#0b0c0d; --line:#252729; }
body { margin:0; background:var(--paper); color:var(--ink); font:14px Inter,system-ui,sans-serif; }
a,button,summary { transition:color 140ms ease,border-color 140ms ease,background-color 140ms ease; }
:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.rail { width:180px; padding:32px 20px; border-right:1px solid #242628; background:#000; }
.brand { font-size:21px; font-weight:500; letter-spacing:-.055em; }
.mark { width:20px; height:26px; border-top:5px solid var(--ink); border-bottom:5px solid var(--ink); transform:skewY(-14deg); }
.mark::after { top:6px; width:14px; height:4px; background:var(--ink); }
.rail nav { display:flex; flex-direction:column; gap:4px; margin-top:52px; }
.rail nav a { position:relative; display:flex; align-items:center; min-height:40px; padding:9px 0; color:var(--muted); font-size:13px; line-height:1.4; }
.rail nav a:hover,.rail-bottom a:hover,.rail nav a[aria-current] { color:#fff; }
.rail nav a[aria-current] { font-weight:500; }
.rail nav a[aria-current]::before { content:''; position:absolute; left:-20px; top:12px; bottom:12px; width:2px; background:var(--ink); }
.rail-bottom { gap:16px; padding-top:40px; color:#9b9ea4; font-size:12px; }
.home-menu { display:none; }
main { margin-left:180px; }
.intro { display:grid; grid-template-columns:230px minmax(0,1fr); align-items:start; gap:40px; max-width:1160px; margin:auto; padding:44px 44px 26px; }
h1,h2 { font-weight:450; }
.intro h1 { font-size:48px; line-height:1.1; letter-spacing:-.065em; }
.intro-summary p { max-width:230px; margin:14px 0 0; color:var(--muted); font-size:16px; line-height:1.55; }
.project-description { margin:0; color:#c0c3c7; font-size:14px; line-height:1.65; }
.project-description a { color:#fff; text-decoration:underline; text-decoration-color:#777b80; text-underline-offset:3px; }
.cinema { max-width:1160px; margin:auto; padding:10px 44px 32px; }
.cinema-head { margin-bottom:12px; }
.switcher { gap:20px; }
.switcher button { min-height:40px; padding:8px 0; border:0; border-bottom:1px solid transparent; background:transparent; color:#92969c; font-size:12px; cursor:pointer; }
.switcher button[aria-pressed='true'] { border-bottom-color:var(--ink); color:var(--ink); }
.switcher button:hover { color:#fff; }
.stage { border:1px solid #2b2d30; border-radius:8px; background:var(--paper); }
.demo-status { top:12px; right:12px; left:12px; background:rgba(5,6,7,.9); padding:12px; color:var(--ink); }
.film-caption { gap:18px; padding-top:14px; }
.film-caption h2 { font-size:14px; letter-spacing:-.015em; }
.film-caption a { color:var(--muted); font-size:12px; }
.section { max-width:1072px; margin:0 auto; padding:36px 0; border-top:1px solid var(--line); }
#read { max-width:1500px; width:calc(100% - 88px); }
.section-top { gap:24px; margin-bottom:24px; }
.section-top h2,.comments-shell h2 { font-size:26px; line-height:1.3; letter-spacing:-.04em; }
.reading { gap:22px; }
.reading img { aspect-ratio:5/3; object-fit:cover; object-position:center; background:#111214; border:1px solid var(--line); border-radius:6px; }
.reading figcaption { gap:10px; padding-top:10px; color:var(--muted); font-size:12px; }
.review-pair { grid-template-columns:minmax(0,1.475fr) 40px minmax(0,1fr); gap:18px; }
.review-pair img { border:1px solid var(--line); border-radius:6px; }
.reading figure,.review-pair figure { position:relative; }
.reading figure:focus-within,.review-pair figure:focus-within { z-index:2; }
.review-image-trigger { display:block; width:100%; border:0; padding:0; background:transparent; cursor:zoom-in; transition:transform 220ms ease; }
.review-image-trigger:focus-visible { transform:scale(1.25); }
@media (hover:hover) and (pointer:fine) {
  .reading figure:hover,.review-pair figure:hover { z-index:2; }
  .review-image-trigger:hover { transform:scale(1.25); }
}
.mining-image-viewer { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); max-width:96vw; max-height:94vh; margin:0; padding:0; border:0; background:transparent; color:var(--ink); }
.mining-image-viewer img { display:block; width:auto; height:auto; max-width:96vw; max-height:94vh; border:1px solid var(--line); border-radius:6px; box-shadow:0 20px 90px rgba(0,0,0,.65); }
.mining-image-viewer::backdrop { background:rgba(0,0,0,.88); backdrop-filter:blur(3px); }
.mining-image-viewer[open] { animation:mining-image-open 180ms ease-out; }
@keyframes mining-image-open { from { opacity:0; transform:translate(-50%,-50%) scale(.96); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
.mining-image-close { position:absolute; top:12px; right:12px; width:44px; height:44px; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:rgba(8,10,11,.86); color:var(--ink); font-size:30px; line-height:1; cursor:pointer; }
.pair-arrow { color:#888e96; font-size:30px; justify-self:center; display:grid; place-items:center; width:32px; height:32px; }
.comments-shell { max-width:720px; }
.comments-shell h2 { margin:8px 0 0; }
.comment-item { border-bottom:1px solid var(--line); }
.comment-meta time { color:var(--muted); font-size:12px; }
.comment-form { gap:16px; margin-top:26px; }
.comment-form label { gap:8px; color:var(--muted); font-size:12px; }
.comment-form input,.comment-form textarea { border:1px solid #292b2e; border-radius:6px; background:#111214; padding:12px; color:var(--ink); }
.comment-form textarea { min-height:110px; }
.comment-grid { display:grid; grid-template-columns:1fr auto; align-items:end; gap:14px; }
.comment-submit { min-height:44px; border:1px solid var(--accent); border-radius:6px; background:var(--accent); padding:10px 22px; color:#111214; font-weight:500; }
.comment-status { color:var(--muted); font-size:12px; }
footer { max-width:1160px; margin:auto; gap:18px; padding:28px 44px; color:var(--muted); font-size:12px; }
footer nav { gap:18px; }
footer a:hover { color:#fff; }
@media(max-width:1100px) { .intro { grid-template-columns:200px minmax(0,1fr); gap:28px; } .section { margin-inline:44px; } }
@media(max-width:900px) { .reading { grid-template-columns:1fr; } }
@media(max-width:700px) {
  .rail { position:relative; inset:auto; overflow:visible; flex-direction:row; align-items:center; width:100%; gap:20px; padding:20px; border-right:0; border-bottom:1px solid var(--line); }
  .rail .brand { flex:1; }
  .rail > nav,.rail-bottom { display:none; }
  .home-menu { display:block; margin-right:110px; }
  .rail ~ .site-auth.is-floating { max-width:110px; }
  .home-menu > summary { min-height:40px; display:flex; align-items:center; cursor:pointer; color:var(--muted); font-size:13px; }
  .home-menu nav { position:absolute; z-index:20; right:20px; top:66px; width:min(230px,calc(100vw - 40px)); max-height:calc(100dvh - 82px); overflow-y:auto; margin:0; padding:14px 20px; background:#000; border:1px solid #303236; border-radius:6px; }
  .rail nav a[aria-current]::before { display:none; }
  main { margin-left:0; }
  .intro { display:block; padding:28px 22px 20px; }
  .intro h1 { font-size:40px; }
  .intro-summary p { max-width:none; margin:10px 0 22px; font-size:15px; }
  .cinema { padding:0 14px 28px; }
  .cinema-head,.film-caption { padding-inline:8px; }
  .film-caption { align-items:flex-start; flex-direction:column; gap:10px; }
  .section { margin-inline:22px; padding-block:28px; }
  #read { width:auto; }
  .section-top h2,.comments-shell h2 { font-size:24px; }
  .reading,.review-pair,.comment-grid { grid-template-columns:1fr; }
  .pair-arrow { transform:rotate(90deg); }
  .comment-submit { width:100%; }
  footer { padding-inline:22px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; } .review-image-trigger:hover,.review-image-trigger:focus-visible { transform:none; } .mining-image-viewer[open] { animation:none; } }

.comparison-image-trigger img { display:block; width:100%; height:auto; }
.comparison-image-trigger:hover,.comparison-image-trigger:focus-visible { transform:none; }
.comparison-image-trigger:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }

.section-prose { max-width:none; margin:0; color:#b7bcba; font-size:13px; line-height:1.5; }
.section-prose p { margin:0 0 8px; }
.section-prose ul,.research-list { padding-left:18px; }
.section-prose ul { margin:0; }
.section-prose li + li { margin-top:6px; }
.section-prose a { text-decoration:underline; text-underline-offset:3px; }
.section-prose a:hover { color:var(--accent); }
.comparison-description { margin:0 0 12px; }
.mining-description { margin-top:12px; }
#gloss-usage,#research { padding-block:18px; }
#gloss-usage .section-top,#research .section-top { margin-bottom:10px; }
#gloss-usage .section-top h2,#research .section-top h2 { font-size:17px; letter-spacing:-.04em; line-height:1.25; }
@media (min-width:1000px) {
  .gloss-usage .section-prose ul,.research-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 28px; }
  .gloss-usage .section-prose li + li,.research-list li + li { margin-top:0; }
}

@media (max-width:700px) {
  .intro { padding-bottom:16px; }
  .intro h1 { margin-top:0; font-size:40px; }
  .intro-summary p { margin-bottom:0; font-size:15px; }
  .cinema + .project-description { max-width:none; margin:0 22px 24px; }
}