/* nav */
.nav { border-bottom:1px solid var(--rule); }
.nav .shell { display:flex; align-items:center; gap:var(--s3); padding-block:18px; }
.mark { font-weight:800; font-size:20px; letter-spacing:-.04em; }
.mark i { font-style:normal; color:var(--acc); }
.nav nav { display:flex; gap:22px; font-size:14.5px; color:var(--soft); }
.nav nav a { text-decoration:none; }
.nav .sp { flex:1 1 auto; }
.search { display:flex; align-items:center; gap:8px; border:1px solid var(--rule); border-radius:999px; padding:8px 16px; min-width:0; }
.search input { border:0; background:transparent; color:var(--ink); font:14px var(--f); width:19ch; min-width:0; outline:none; }
.search input::placeholder { color:var(--faint); }
/* The navigation wraps to a second row rather than disappearing. Hiding `.nav nav` here
   left the paper page - the page people arrive on from a link - with a logo and a pair
   of account links and no route to the library, the reels or anything else, at every
   width below 900px. The search box does still go; the library page carries its own. */
@media (max-width:900px) {
  .nav .shell { flex-wrap:wrap; row-gap:0; column-gap:18px; padding-bottom:0; }
  .nav nav { order:4; width:100%; gap:24px; margin-top:14px; padding-block:2px;
    border-top:1px solid var(--rule); font-size:13px; }
  .nav nav a { padding-block:12px; }
  .search { display:none; }
}

/* ---------- 1 · player with chapters on the scrubber ---------- */
.watch .shell { padding-block:var(--s3) var(--section); }
.crumb { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:20px; font:500 11px/1.5 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.crumb a { color:var(--acc); text-decoration:none; }

.player { position:relative; border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; background:#0b100e; }
.player video { width:100%; aspect-ratio:16/9; object-fit:contain; background:#0b100e; display:block; }
.player .big { position:absolute; inset:0; display:grid; place-items:center; border:0; background:transparent; cursor:pointer; }
.player .big span { width:74px; height:74px; border-radius:50%; background:rgba(10,18,15,.55); border:1.5px solid rgba(255,255,255,.85); display:grid; place-items:center; transition:transform .18s; }
.player .big span::after { content:""; width:0; height:0; margin-left:5px; border-left:20px solid #fff; border-top:13px solid transparent; border-bottom:13px solid transparent; }
.player .big:hover span { transform:scale(1.06); }
.player.playing .big { display:none; }

.bar { position:absolute; left:0; right:0; bottom:0; padding:28px 16px 12px;
  background:linear-gradient(to top,rgba(6,12,10,.92),rgba(6,12,10,.55) 55%,transparent);
  opacity:0; transition:opacity .2s; }
.player:hover .bar,.player.paused .bar,.player:focus-within .bar { opacity:1; }

.track { position:relative; display:flex; gap:3px; height:16px; align-items:center; cursor:pointer; }
.seg { position:relative; flex:0 0 auto; height:5px; border-radius:3px; background:rgba(255,255,255,.28); overflow:hidden; transition:height .15s; }
.track:hover .seg { height:8px; }
.seg i { position:absolute; inset:0 auto 0 0; width:0; background:var(--acc); display:block; }
.tip { position:absolute; bottom:26px; transform:translateX(-50%); white-space:nowrap; pointer-events:none;
  background:rgba(8,16,13,.95); color:#fff; font:12px/1.4 var(--f); padding:7px 11px; border-radius:7px; opacity:0; transition:opacity .12s; }
.tip b { display:block; font-weight:600; }
.tip span { font:11px var(--f-mono); color:#9fb5ad; }
.track:hover .tip { opacity:1; }

.ctl { display:flex; align-items:center; gap:14px; margin-top:10px; color:#fff; }
.ctl button { background:transparent; border:0; color:#fff; cursor:pointer; padding:4px; display:grid; place-items:center; border-radius:6px; }
.ctl button:hover { background:rgba(255,255,255,.14); }
.ctl .t { font:12px var(--f-mono); color:#cfe0d9; font-variant-numeric:tabular-nums; }
.ctl .now { flex:1 1 auto; font:12px var(--f-mono); color:#cfe0d9; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ico { width:18px; height:18px; fill:currentColor; }

/* title block */
.paper-title { font-size:clamp(26px,2.9vw,40px); line-height:1.16; font-weight:600; letter-spacing:-.035em; margin-top:var(--gap); max-width:44ch; }
.byline { color:var(--soft); font-size:16px; margin-top:14px; max-width:70ch; }
.facts { display:flex; gap:10px 22px; flex-wrap:wrap; margin-top:18px; font:11px/1.8 var(--f-mono); letter-spacing:.04em; color:var(--faint); }
.facts a { color:var(--acc); text-decoration:none; }

.files { display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--gap); padding-top:var(--gap); border-top:1px solid var(--rule); }
.files .btn { justify-content:flex-start; gap:10px; }
.files .btn small { font:400 11px var(--f-mono); color:var(--faint); }
.files .btn.pri small { color:rgba(255,255,255,.75); }
.files .note { flex:1 1 100%; margin-top:4px; font-size:13px; color:var(--faint); }

/* ---------- feedback ---------- */
.feedback .shell { display:grid; gap:var(--gap); grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); align-items:start; }
@media (max-width:900px) { .feedback .shell { grid-template-columns:1fr; } }
.stars { display:flex; gap:6px; align-items:center; }
.stars button { background:transparent; border:0; cursor:pointer; padding:4px; line-height:0; border-radius:6px; }
.stars svg { width:34px; height:34px; fill:none; stroke:var(--soft); stroke-width:1.6; transition:fill .12s,stroke .12s,transform .12s; }
.stars button:hover svg { transform:scale(1.08); }
.stars button.on svg { fill:var(--acc); stroke:var(--acc); }
.stars .out { margin-left:12px; font:12px var(--f-mono); color:var(--faint); }
.chips { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.chip { border:1px solid var(--rule); border-radius:999px; background:var(--bg); color:var(--soft); font:14px var(--f); padding:9px 16px; cursor:pointer; }
.chip:hover { border-color:var(--soft); color:var(--ink); }
.chip[aria-pressed="true"] { border-color:var(--acc); color:var(--acc); }
.note { margin-top:22px; }
.note label { display:block; font:500 11px/1.5 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:10px; }
.note textarea { width:100%; min-height:92px; resize:vertical; padding:14px 16px; border:1px solid var(--rule); border-radius:9px; background:var(--bg); color:var(--ink); font:15px/1.6 var(--f); }
.note textarea::placeholder { color:var(--faint); }
.note .row { display:flex; gap:14px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.note .row small { font-size:13px; color:var(--faint); }

/* ---------- 4 · next ---------- */
.suggest .head { margin-bottom:36px; }


/* ---------- 4 · authors ---------- */
.authors { background:var(--band); }
.authors .shell { padding-block:var(--section); display:grid; gap:var(--gap);
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); align-items:start; }
@media (max-width:900px) { .authors .shell { grid-template-columns:1fr; } }
.gains { display:grid; gap:var(--s3); }
.gain { display:grid; grid-template-columns:26px 1fr; gap:14px; align-items:start; }
.gain b { font:500 13px/1.6 var(--f-mono); color:var(--acc); }
.gain p { font-size:15px; color:var(--soft); }
.gain p strong { color:var(--ink); font-weight:600; display:block; margin-bottom:2px; font-size:16px; }
.authors .acts { display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--s3); align-items:center; }
.authors .acts small { font-size:13px; color:var(--faint); }

.credit { border-top:1px solid var(--rule); }
.credit .shell { padding-block:26px; }
.credit .cite { max-width:92ch; font-size:13px; line-height:1.75; color:var(--faint); }
.credit .cite a,.credit .acts a { color:var(--soft); }
.credit .acts { margin-top:10px; font-size:13px; color:var(--faint); }

footer { border-top:1px solid var(--rule); }
footer .shell { padding-block:28px 64px; display:flex; gap:var(--s3); justify-content:space-between; flex-wrap:wrap; font-size:14px; color:var(--faint); }
footer a { color:var(--soft); text-decoration:none; margin-right:20px; }

/* A paper whose only output is a reel: a portrait player, not a stretched
   walkthrough frame. */
.player.portrait { max-width:min(380px,100%); margin-inline:auto; }
.player.portrait video { aspect-ratio:9/16; object-fit:cover; }

/* The captions toggle. Lettered rather than an icon, and legible when OFF: at .5 opacity
   with an outline-box glyph it was invisible on the dark bar and a viewer reported not
   being able to find it. Off is a readable outline; on is filled. */
.ctl button.cc { font:600 11px/1 var(--f-mono); letter-spacing:.5px; padding:3px 5px;
                 border:1px solid rgba(255,255,255,.55); color:#fff; opacity:.85; }
.ctl button.cc[aria-pressed="true"] { background:#fff; color:#10231d; border-color:#fff; opacity:1; }
.ctl button.cc:hover { border-color:#fff; opacity:1; }