/* Bo's Darkroom — built on The Gallery design system
   IKB #002FA7 · Red #E2192C · Saffron #F4C430 · Ink #1A1A1A · Cream #F4EFE6 · Paper #FAF7F0
   Playfair Display (editorial) · Space Mono (metadata) · Lora (text)
   Hairlines, corner brackets, catalog numbers. No radius, no shadows, no gradients. */

:root {
  --ikb: #002FA7; --red: #E2192C; --saffron: #F4C430;
  --ink: #1A1A1A; --cream: #F4EFE6; --paper: #FAF7F0;
  --serif: "Playfair Display", Georgia, serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --text: "Lora", Georgia, serif;
  --pad: clamp(16px, 2.6vw, 36px);
}
body[data-theme="ink"] { --bg: var(--ink); --fg: var(--paper); --dim: rgba(250,247,240,.55); --rule: rgba(250,247,240,.2); }
body[data-theme="paper"] { --bg: var(--paper); --fg: var(--ink); --dim: rgba(26,26,26,.55); --rule: rgba(26,26,26,.18); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--text); -webkit-font-smoothing: antialiased; transition: background .35s, color .35s; }
a { color: inherit; }
button { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
img { display: block; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.dim { color: var(--dim); }
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
body[data-theme="paper"] :focus-visible { outline-color: var(--ikb); }

/* corner brackets: top-left + bottom-right only */
.bk { position: absolute; inset: 7px; pointer-events: none; }
.bk::before, .bk::after { content: ""; position: absolute; width: 11px; height: 11px; border: 0 solid currentColor; }
.bk::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.bk::after { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }

/* ── chrome ───────────────────────────────────────────── */
.chrome { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: baseline; justify-content: space-between; padding: 22px var(--pad); pointer-events: none; }
.chrome > * { pointer-events: auto; }
body[data-theme="paper"] .chrome { background: var(--paper); border-bottom: 1px solid var(--rule); padding-top: 16px; padding-bottom: 14px; }
.wordmark { display: inline-flex; align-items: center; font-family: var(--serif); font-style: italic; font-size: 21px; text-decoration: none; }
::selection { background: var(--ikb); color: #fff; }

/* ── safelight (the one red) ──────────────────────────── */
.safelight { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: safelight 3.2s ease-in-out infinite; }
.safelight.sm { width: 7px; height: 7px; margin-right: 10px; }
@keyframes safelight { 50% { opacity: .35; } }

/* ── loader ───────────────────────────────────────────── */
.loader { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: var(--ink); color: var(--paper); transition: transform .85s cubic-bezier(.7,0,.2,1); }
.loader.done { transform: translateY(-100%); }
.ld-inner { display: flex; align-items: center; gap: 14px; }
.ld-k { color: rgba(250,247,240,.6); }
.ld-n { min-width: 3ch; font-variant-numeric: tabular-nums; }
.ld-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s; }

/* ── curtain between pages ────────────────────────────── */
.curtain { position: fixed; inset: 0; z-index: 150; display: flex; align-items: flex-end; padding: 22px var(--pad); background: var(--ink); color: var(--paper); border-top: 1px solid var(--red); transform: translateY(101%); pointer-events: none; }
.curtain.cover { transform: translateY(0); transition: transform .42s cubic-bezier(.7,0,.3,1); }
.curtain.cover.reveal { transform: translateY(-101%); transition: transform .6s cubic-bezier(.7,0,.3,1); }
.curtain-label { font-size: 11px; }

/* ── cursor (mouse only) ──────────────────────────────── */
html.has-cursor body:not([data-route="admin"]),
html.has-cursor body:not([data-route="admin"]) * { cursor: none !important; }
.cur-dot, .cur-ring { position: fixed; top: 0; left: 0; z-index: 500; pointer-events: none; opacity: 0; transition: opacity .2s; }
html.cur-on .cur-dot, html.cur-on .cur-ring { opacity: 1; }
body[data-route="admin"] .cur-dot, body[data-route="admin"] .cur-ring { display: none; }
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--red); }
.cur-ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; color: #fff; mix-blend-mode: difference; display: flex; align-items: flex-end; justify-content: center; transition: width .28s cubic-bezier(.2,.8,.2,1), height .28s cubic-bezier(.2,.8,.2,1), margin .28s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.cur-ring::before, .cur-ring::after { content: ""; position: absolute; width: 8px; height: 8px; border: 0 solid currentColor; }
.cur-ring::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.cur-ring::after { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.cur-ring.is-link { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
.cur-ring.is-big { width: 86px; height: 86px; margin: -43px 0 0 -43px; }
.cur-ring.is-down { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
.cur-label { font-size: 9px; transform: translateY(18px); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cur-ring.is-big .cur-label { opacity: 1; }

/* ── contact band (the one block of blue) ─────────────── */
.band { display: grid; gap: 18px; padding: clamp(72px, 10vw, 150px) var(--pad); background: var(--ikb); color: #fff; }
.band-k { color: rgba(255,255,255,.72); }
.band-t { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 7.4vw, 120px); line-height: .95; letter-spacing: -.02em; }
.band-t::after { content: ""; display: inline-block; width: .16em; height: .16em; margin-left: .06em; border-radius: 50%; background: var(--red); vertical-align: baseline; }
.band-link { justify-self: start; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #fff; text-underline-offset: 7px; }
.band-link:hover { color: var(--saffron); }
.chrome-nav { display: flex; gap: 22px; }
.chrome-nav a, .chrome-nav button { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.chrome-nav a:hover, .chrome-nav button:hover { text-decoration: underline; text-underline-offset: 4px; }
.demo-admin::before { content: "◆ "; color: var(--saffron); }

/* ── the globe (landing) ──────────────────────────────── */
.globe { position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none; }
.globe.is-dragging, .globe.is-dragging * { cursor: grabbing !important; }
.g-canvas { position: absolute; inset: 0; transition: opacity .3s; }
.g-layer { position: absolute; inset: 0; transition: opacity .3s, transform .3s; }
.globe.leaving .g-layer, .globe.leaving .g-canvas { opacity: 0; }
.globe.leaving .g-layer { transform: scale(1.04); }
.g-ph { position: absolute; top: 0; left: 0; padding: 0; margin: 0; border: 1px solid rgba(250,247,240,.2); background: #262626; cursor: pointer; overflow: hidden; visibility: hidden; transform-origin: 50% 50%; will-change: transform, opacity; }
.g-ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) brightness(.82); transition: filter .35s; pointer-events: none; }
.g-ph.is-hl img, .g-ph:hover img { filter: none; }
.g-ph:hover { border-color: var(--paper); }
.g-ph.is-video::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-left: 9px solid var(--paper); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.g-label { position: absolute; top: 0; left: 0; z-index: 2100; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-bottom: 6px; color: var(--paper); text-decoration: none; white-space: nowrap; visibility: hidden; }
.g-label .mono { font-size: 9px; color: var(--dim); }
.g-label-t { font-family: var(--serif); font-size: 19px; line-height: 1.1; }
.g-label:hover .g-label-t { font-style: italic; }

.g-key { position: absolute; z-index: 3000; left: var(--pad); top: 50%; transform: translateY(-50%); width: min(270px, 24vw); }
.g-key-h { display: block; padding-bottom: 10px; border-bottom: 1px solid var(--paper); font-size: 10px; }
.g-key ol { list-style: none; margin: 0; padding: 0; }
.g-key a { display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.g-key-no, .g-key-n { font-size: 9.5px; color: var(--dim); }
.g-key-t { font-family: var(--serif); font-size: 19px; line-height: 1.15; transition: transform .25s; }
.g-key a.is-on .g-key-t, .g-key a:hover .g-key-t { font-style: italic; transform: translateX(4px); }
.g-key a.is-on .g-key-no, .g-key a:hover .g-key-no { color: var(--saffron); }
.g-name { position: absolute; z-index: 3000; left: var(--pad); bottom: 54px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.g-name h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.6vw, 56px); line-height: 1; letter-spacing: -.01em; }
.g-name .mono { color: var(--dim); font-size: 10px; }
.g-hud { position: absolute; z-index: 3000; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 20px; padding: 18px var(--pad); border-top: 1px solid var(--rule); font-size: 10px; color: var(--dim); pointer-events: none; }
.g-coord { white-space: pre; }
.g-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--dim); }

/* ── index overlay ────────────────────────────────────── */
.index-overlay { position: fixed; inset: 0; z-index: 50; background: var(--ink); color: var(--paper); overflow: auto; opacity: 0; transition: opacity .3s; --dim: rgba(250,247,240,.55); --rule: rgba(250,247,240,.2); }
.index-overlay.open { opacity: 1; }
.ix { padding: 22px var(--pad) 80px; max-width: 1400px; margin: 0 auto; }
.ix-head { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--paper); }
.ix-close { background: none; border: 0; cursor: pointer; padding: 0; }
.ix-list { list-style: none; margin: 40px 0 0; padding: 0; }
.ix-list a { display: grid; grid-template-columns: 56px 64px auto 1fr auto; align-items: baseline; gap: 16px; padding: 16px 10px; border-bottom: 1px solid var(--rule); text-decoration: none; }
.ix-no, .ix-code, .ix-count { color: var(--dim); }
.ix-title { font-family: var(--serif); font-size: clamp(28px, 4.4vw, 60px); line-height: 1.05; }
.ix-leader { border-bottom: 1px dotted var(--rule); transform: translateY(-.4em); }
.ix-list a:hover { background: var(--ikb); }
.ix-list a:hover .ix-title { font-style: italic; }
.ix-list a:hover .ix-no, .ix-list a:hover .ix-code, .ix-list a:hover .ix-count { color: var(--paper); }

/* ── pages ────────────────────────────────────────────── */
.page { padding: 104px var(--pad) 96px; max-width: 1560px; margin: 0 auto; animation: pageIn .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } }
.msg { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.sec-rail { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--fg); }
.back { text-decoration: none; }
.back:hover { text-decoration: underline; text-underline-offset: 4px; }
.sec-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.sec-head .sec-rail { grid-column: 1 / -1; }
.sec-title { grid-column: 1 / span 8; margin: 48px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(54px, 9.5vw, 156px); line-height: .9; letter-spacing: -.025em; overflow-wrap: anywhere; }
.sec-side { grid-column: 9 / -1; align-self: end; display: flex; flex-direction: column; gap: 18px; padding-bottom: 8px; }
.sec-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.sec-dl dt { color: var(--dim); } .sec-dl dd { margin: 0; }
.sec-desc { margin: 0; font-size: 17px; line-height: 1.55; }
.empty-note { margin-top: 64px; }

.masonry { display: grid; column-gap: clamp(16px, 2.2vw, 32px); margin-top: clamp(48px, 7vw, 96px); align-items: start; }
.m-col { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); min-width: 0; }
.ph { margin: 0; }
.ph-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--cream); cursor: zoom-in; color: var(--paper); }
.ph-btn img { width: 100%; height: auto; transition: opacity .3s; }
.ph-btn .bk { opacity: 0; transition: opacity .25s, inset .25s; inset: 14px; }
.ph-btn:hover .bk, .ph-btn:focus-visible .bk { opacity: 1; inset: 9px; }
.ph figcaption { display: flex; gap: 14px; margin-top: 9px; font-size: 10px; color: var(--dim); }
.ph-cap { font-family: var(--text); font-style: italic; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--fg); }

.sec-foot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; margin-top: clamp(80px, 12vw, 160px); padding-top: 18px; border-top: 1px solid var(--rule); }
.thread-link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.thread-link.next { text-align: right; }
.thread-link .mono { color: var(--dim); }
.tl-title { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 34px); }
.thread-link:hover .tl-title { font-style: italic; }
.thread-svg { width: 100%; height: 40px; }
.thread-svg path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .6; }

/* video section */
.reel-list { display: flex; flex-direction: column; gap: clamp(64px, 9vw, 120px); margin-top: clamp(48px, 7vw, 96px); }
.reel { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
.reel-frame { grid-column: 1 / span 8; position: relative; aspect-ratio: var(--ar, 16/9); background: #111; border: 1px solid var(--rule); overflow: hidden; color: var(--paper); }
.reel-meta { grid-column: 9 / -1; display: flex; flex-direction: column; gap: 10px; }
.reel.alt .reel-frame { grid-column: 5 / -1; grid-row: 1; }
.reel.alt .reel-meta { grid-column: 1 / span 4; grid-row: 1; }
.reel-frame img, .reel-frame iframe, .reel-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.reel-frame video { object-fit: contain; background: #000; }
.reel-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border: 1px solid var(--paper); background: rgba(26,26,26,.55); cursor: pointer; transition: background .2s; }
.reel-play span { position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-left: 17px solid var(--paper); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.reel-play:hover { background: var(--ikb); }
.reel-note { position: absolute; left: 14px; bottom: 12px; font-size: 10px; }
.reel-meta .mono { color: var(--dim); }
.reel-meta h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 40px); line-height: 1.05; }
.reel-meta p { margin: 0; line-height: 1.55; }
.reel-meta .ext { color: var(--fg); text-underline-offset: 4px; }

/* about */
.about-name { margin: 48px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(60px, 11vw, 180px); line-height: .9; letter-spacing: -.025em; }
.about-body { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-top: clamp(40px, 6vw, 80px); }
.about-text { grid-column: 5 / span 7; margin: 0 0 1em; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; }
.about-dl { grid-column: 5 / span 7; display: grid; grid-template-columns: 140px 1fr; gap: 10px 18px; margin: 32px 0 0; padding-top: 14px; border-top: 1px solid var(--fg); }
.about-dl dt { color: var(--dim); } .about-dl dd { margin: 0; text-transform: none; letter-spacing: .02em; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 60; display: grid; grid-template: "close close close" auto "prev fig next" 1fr "bar bar bar" auto / 72px 1fr 72px; background: var(--ink); color: var(--paper); opacity: 0; transition: opacity .25s; --dim: rgba(250,247,240,.55); --rule: rgba(250,247,240,.2); }
.lightbox.open { opacity: 1; }
.lb-close { grid-area: close; justify-self: end; margin: 18px var(--pad); background: none; border: 0; cursor: pointer; }
.lb-nav { background: none; border: 0; font-family: var(--serif); font-size: 30px; cursor: pointer; }
.lb-nav.prev { grid-area: prev; } .lb-nav.next { grid-area: next; }
.lb-nav:hover { color: var(--saffron); }
.lb-fig { grid-area: fig; position: relative; margin: 0; display: flex; align-items: center; justify-content: center; min-height: 0; min-width: 0; }
.lb-fig img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; }
.lb-fig .bk { display: none; }
.lb-bar { grid-area: bar; display: flex; gap: 24px; padding: 16px var(--pad); border-top: 1px solid var(--rule); font-size: 10px; }
.lb-n { color: var(--saffron); }
.lb-cap { flex: 1; color: var(--dim); text-transform: none; font-family: var(--text); font-style: italic; font-size: 13px; letter-spacing: 0; }

/* ── admin ────────────────────────────────────────────── */
.adm { min-height: 100vh; }
.adm-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 14px var(--pad); background: var(--paper); border-bottom: 1px solid var(--ink); }
.adm-brand { display: flex; align-items: baseline; gap: 10px; }
.adm-mode { padding: 4px 8px; font-size: 10px; }
.adm-mode.demo { background: var(--saffron); color: var(--ink); }
.adm-mode.live { background: var(--ikb); color: #fff; }
.adm-nav { margin-left: auto; display: flex; gap: 18px; align-items: center; }
.adm-nav button, .adm-nav a { background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: none; border-bottom: 2px solid transparent; }
.adm-nav .on { border-bottom-color: var(--ikb); }
.adm-body { padding: 28px var(--pad) 80px; max-width: 1500px; margin: 0 auto; }
.adm-grid { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }
.adm-list { position: sticky; top: 84px; }
.adm-list-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.sec-list { list-style: none; margin: 0; padding: 0; }
.sec-list li { display: flex; align-items: stretch; border-bottom: 1px solid var(--rule); background: var(--paper); }
.sec-list li.empty { padding: 14px 0; }
.grip { display: flex; align-items: center; padding: 0 8px; color: var(--dim); cursor: grab; user-select: none; font-size: 13px; letter-spacing: -2px; }
.pick { flex: 1; display: grid; grid-template-columns: 44px 1fr auto auto; align-items: baseline; gap: 10px; padding: 13px 10px 13px 2px; background: none; border: 0; text-align: left; cursor: pointer; }
.pick .t { font-family: var(--serif); font-size: 18px; }
.pick .n, .pick .code { color: var(--dim); }
.pick .vis { color: var(--red); font-size: 9.5px; }
.sec-list li.on { background: var(--ikb); color: #fff; }
.sec-list li.on .grip, .sec-list li.on .n, .sec-list li.on .code { color: rgba(255,255,255,.7); }
.sec-list li.on .vis { color: var(--saffron); }
.hidden-sec .t { opacity: .55; }
.hint { margin-top: 12px; font-size: 10px; line-height: 1.6; }
.demo-tools { margin-top: 28px; padding-top: 14px; border-top: 1px dashed var(--rule); display: flex; flex-wrap: wrap; gap: 8px; }
.demo-tools p { width: 100%; margin: 0 0 4px; }
.adm-edit { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.adm-card { background: var(--cream); border: 1px solid var(--rule); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.form-head { display: flex; justify-content: space-between; }
.saved { color: var(--ikb); }
.adm label { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.adm label .dim { text-transform: none; letter-spacing: 0; }
.adm input:not([type=checkbox]):not([type=file]), .adm textarea, .adm select, .adm-login input { width: 100%; padding: 10px 12px; border: 1px solid rgba(26,26,26,.35); border-radius: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 15px; letter-spacing: 0; text-transform: none; }
.adm textarea { resize: vertical; line-height: 1.5; }
.adm input:focus, .adm textarea:focus, .adm select:focus { outline: 2px solid var(--ikb); outline-offset: -1px; border-color: var(--ikb); }
.adm label.check { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; }
.adm label.check input { width: 16px; height: 16px; accent-color: var(--ikb); }
.prefix { display: flex; align-items: center; gap: 0; }
.prefix .mono { padding: 0 8px; border: 1px solid rgba(26,26,26,.35); border-right: 0; align-self: stretch; display: flex; align-items: center; background: var(--cream); }
.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.row > label { flex: 1 1 200px; }
.row > .narrow { flex: 0 1 170px; }
.row.between { justify-content: space-between; align-items: center; }
.row-acts { display: flex; gap: 8px; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid var(--ink); background: transparent; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.primary { background: var(--ikb); border-color: var(--ikb); color: #fff; }
.btn.primary:hover { background: var(--ink); border-color: var(--ink); }
.btn.small { padding: 6px 10px; font-size: 10px; }
.btn.ghost { border-color: var(--rule); }
.btn.danger { color: var(--red); }
.btn.danger:hover, .armed { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
.linkish { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--ikb); }

.drop { border: 1px dashed var(--ink); padding: 40px 20px; text-align: center; background: var(--paper); transition: background .15s, color .15s; }
.drop p { margin: 4px 0; }
.drop-big { font-family: var(--serif); font-size: 30px; }
.drop.small { padding: 16px; }
.drop.over { background: var(--ikb); color: #fff; border-style: solid; }
.drop.over .linkish, .drop.over .dim { color: #fff; }
.queue { list-style: none; margin: 0; padding: 0; }
.queue li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 10px; }
.queue li.ok .st { color: var(--ikb); }
.queue li.bad .st { color: var(--red); text-transform: none; }
.queue:empty { display: none; }

.m-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.m-card { background: #fff; border: 1px solid var(--rule); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.m-card.is-cover { outline: 2px solid var(--ikb); outline-offset: -2px; }
.m-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); cursor: grab; }
.m-img img { width: 100%; height: 100%; object-fit: cover; }
.m-badge { position: absolute; top: 6px; left: 6px; padding: 3px 6px; background: var(--saffron); color: var(--ink); font-size: 9px; }
.m-row { display: flex; justify-content: space-between; align-items: center; font-size: 10px; }
.m-row .acts { display: flex; gap: 10px; }
.m-row .acts button { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.m-row .acts .danger { color: var(--red); }
.m-row .acts .armed { padding: 0 4px; text-decoration: none; }
.adm .m-card input.m-cap { padding: 6px 8px; font-size: 13px; }
.adm .m-card select { padding: 5px 6px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.dragging { opacity: .35; }

.v-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.v-row { display: grid; grid-template-columns: 24px 168px 1fr auto; gap: 16px; align-items: center; padding: 10px; background: #fff; border: 1px solid var(--rule); }
.v-thumb { aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.v-thumb img { width: 100%; height: 100%; object-fit: cover; }
.v-fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.adm .v-fields input { padding: 6px 8px; font-size: 14px; }

.toast { position: fixed; right: 20px; bottom: 20px; z-index: 70; padding: 10px 14px; background: var(--ink); color: var(--paper); }
.toast.bad { background: var(--red); color: #fff; text-transform: none; letter-spacing: .02em; }

.adm-login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.adm-login .adm-card { width: min(400px, 100%); }
.adm-login h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 44px; }
.adm-login label { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; }
.adm-login .err { color: var(--red); min-height: 1em; margin: 0; text-transform: none; }

/* ── small screens ────────────────────────────────────── */
@media (max-width: 860px) {
  .sec-title, .sec-side { grid-column: 1 / -1; }
  .sec-side { margin-top: 28px; }
  .reel .reel-frame, .reel.alt .reel-frame, .reel .reel-meta, .reel.alt .reel-meta { grid-column: 1 / -1; grid-row: auto; }
  .reel-meta { margin-top: 16px; }
  .about-text, .about-dl { grid-column: 1 / -1; }
  .adm-grid { grid-template-columns: 1fr; }
  .adm-list { position: static; }
  .v-row { grid-template-columns: 20px 110px 1fr; }
  .v-row > .btn { grid-column: 2 / -1; justify-self: start; }
}
@media (max-width: 720px) {
  .g-key, .g-hint { display: none; }
  .g-name { bottom: 50px; }
  .g-name h1 { font-size: 30px; }
  .g-label-t { font-size: 15px; }
  .g-coord { font-size: 9px; }
  .ix-list a { grid-template-columns: 44px auto 1fr auto; }
  .ix-code { display: none; }
  .lightbox { grid-template-columns: 44px 1fr 44px; }
  .sec-foot { grid-template-columns: 1fr 1fr; }
  .thread-svg { display: none; }
  .about-dl { grid-template-columns: 100px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}