/* variant-a "Reel" — full-bleed vertical marquee photo site.
 *
 * Motion DNA borrowed from ephergent-front/variant-d/index.html: 100vh
 * scroll-snap slides, object-fit:cover imagery, fixed brand + HUD counter +
 * bobbing ( SCROLL ) hint, easing cubic-bezier(.16,1,.3,1).
 * Brand deliberately NOT borrowed: no Ephergent pink, no duotone wash —
 * photos are the content and render true color (.reel img: filter:none,
 * no blend, no tint). Dark scrim lives only under the text blocks.
 *
 * Palette: near-black warm ground #0b0a09, warm paper #f2ece0, single amber
 * #e0a94e accent for the HUD digit/focus rings. Type: B612 Mono (display +
 * tracked meta) + Montserrat (prose), self-hosted woff2 in fonts/.
 */

@font-face { font-family:"B612 Mono"; src:url("fonts/B612Mono-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"B612 Mono"; src:url("fonts/B612Mono-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("fonts/Montserrat-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("fonts/Montserrat-Black.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }

:root {
  --ground:#0b0a09;      /* near-black, warm */
  --ground-2:#14120f;
  --paper:#f2ece0;       /* warm paper */
  --paper-dim:#c9c0ae;
  --amber:#e0a94e;       /* accent — HUD digit, drawer date, focus rings, blockquote rule */
  --display:"B612 Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans:"Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

* { box-sizing:border-box; margin:0; }
[hidden] { display:none !important; }   /* beats .index-item's display:grid */

html { scroll-snap-type:y mandatory; scroll-behavior:smooth; }
body { background:var(--ground); color:var(--paper); font-family:var(--sans); overflow-x:hidden; }
img { max-width:100%; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }
.fatal { padding:48px 24px; text-align:center; font-family:var(--display); font-size:13px;
         letter-spacing:.18em; text-transform:uppercase; color:var(--paper-dim); }

/* ---------- slides: entry card + one .reel per photo ------------------- */

.entry, .reel { position:relative; height:100vh; height:100svh;
                scroll-snap-align:start; overflow:hidden; }

.entry { display:grid; place-items:center; text-align:center; padding:24px;
         background:radial-gradient(130% 100% at 50% 38%, var(--ground-2) 0%, var(--ground) 68%); }
.entry h1 { font-family:var(--display); font-weight:700;
            font-size:clamp(44px,11vw,148px); line-height:.94; letter-spacing:-.01em;
            text-transform:uppercase; }
.entry .rule { display:block; width:min(420px,72%); height:1px;
               background:rgba(242,236,224,.35); margin:clamp(22px,4vh,34px) auto clamp(16px,3vh,24px); }
.entry .tease { font-family:var(--display); font-size:clamp(11px,1.3vw,14px);
                letter-spacing:.3em; text-transform:uppercase; color:var(--paper-dim); }

.reel { display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
        padding:clamp(20px,4vw,64px); padding-bottom:clamp(52px,7vh,92px); cursor:pointer; }
.reel img { position:absolute; inset:0; z-index:0; width:100%; height:100%;
            object-fit:cover; object-position:center;
            /* hard rule: photos are true color — never filtered or tinted */
            filter:none; }
/* legibility scrim: dark under the text block, clear everywhere else */
.reel::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
               background:
                 linear-gradient(to top, rgba(6,5,4,.86) 0%, rgba(6,5,4,.5) 24%, rgba(6,5,4,0) 56%),
                 linear-gradient(to bottom, rgba(6,5,4,.38) 0%, rgba(6,5,4,0) 14%); }
.reel .slide { position:relative; z-index:2; max-width:min(1100px,100%); }
.reel .meta { font-family:var(--display); font-weight:400;
              font-size:clamp(10px,1.1vw,13px); letter-spacing:.3em; text-transform:uppercase;
              color:var(--paper); opacity:.92; margin-bottom:clamp(12px,2vh,22px); }
.reel h2 { font-family:var(--display); font-weight:700;
           font-size:clamp(44px,9vw,140px); line-height:.95; letter-spacing:-.01em;
           text-transform:uppercase; text-wrap:balance;
           text-shadow:0 2px 44px rgba(0,0,0,.6); }
.reel .open-cue { margin-top:clamp(18px,3vh,30px);
                  font-family:var(--display); font-size:11px; letter-spacing:.28em;
                  text-transform:uppercase; color:var(--paper);
                  border:1px solid rgba(242,236,224,.45); padding:11px 18px;
                  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.reel .open-cue:hover, .reel .open-cue:focus-visible { background:var(--paper); color:var(--ground);
                                                       border-color:var(--paper); }

/* ---------- fixed chrome: brand, HUD counter, scroll hint, index ------ */

.brand { position:fixed; top:16px; left:22px; z-index:9;
         font-family:var(--display); font-size:12px; letter-spacing:.3em;
         text-transform:uppercase; color:var(--paper); text-decoration:none;
         mix-blend-mode:difference; }
.hud { position:fixed; top:18px; right:24px; z-index:9;
       font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.26em;
       color:var(--paper); font-variant-numeric:tabular-nums; mix-blend-mode:difference; }
.hint { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:9;
        font-family:var(--display); font-size:11px; letter-spacing:.3em;
        text-transform:uppercase; color:var(--paper); white-space:nowrap;
        mix-blend-mode:difference;
        animation:bob 2.4s ease-in-out infinite;
        transition:opacity .45s var(--ease); }
.hint.is-hidden { opacity:0; animation:none; }   /* past the entry card the per-slide OPEN cue carries it */
@keyframes bob { 50% { transform:translate(-50%,8px); } }
.index-toggle { position:fixed; left:22px; bottom:16px; z-index:9;
                font-family:var(--display); font-size:11px; letter-spacing:.26em;
                text-transform:uppercase; color:var(--paper);
                background:rgba(11,10,9,.55); border:1px solid rgba(242,236,224,.4);
                padding:10px 15px;
                transition:background .3s var(--ease), color .3s var(--ease); }
.index-toggle:hover, .index-toggle:focus-visible { background:var(--paper); color:var(--ground); }

/* ---------- drawer (harness contract) --------------------------------- */

.drawer { position:fixed; top:0; right:0; bottom:0; z-index:20;
          width:min(480px,92vw);
          transform:translateX(100%); visibility:hidden;
          background:var(--ground-2); overflow-y:auto; overscroll-behavior:contain;
          box-shadow:-30px 0 70px rgba(0,0,0,.55);
          transition:transform .5s var(--ease), visibility 0s linear .5s; }
.drawer.open { transform:translateX(0); visibility:visible;
               transition:transform .5s var(--ease), visibility 0s linear 0s; }
.drawer-scrim { position:fixed; inset:0; z-index:15; background:rgba(0,0,0,.5);
                opacity:0; visibility:hidden; pointer-events:none;
                transition:opacity .5s var(--ease), visibility 0s linear .5s; }
.drawer-scrim.open { opacity:1; visibility:visible; pointer-events:auto;
                     transition:opacity .5s var(--ease), visibility 0s linear 0s; }

.drawer-bar { position:sticky; top:0; z-index:2;
              display:flex; align-items:center; justify-content:space-between;
              padding:14px 18px; background:var(--ground-2);
              border-bottom:1px solid rgba(242,236,224,.1); }
.drawer-pos { font-family:var(--display); font-size:11px; letter-spacing:.26em;
              color:var(--paper-dim); font-variant-numeric:tabular-nums; }
.drawer-close { font-family:var(--display); font-size:15px; line-height:1;
                width:40px; height:40px; border:1px solid rgba(242,236,224,.35);
                transition:background .3s var(--ease), color .3s var(--ease); }
.drawer-close:hover { background:var(--paper); color:var(--ground); }

.drawer-figure img { display:block; width:100%; height:auto; }   /* true color: no filter here either */
.drawer-copy { padding:26px 24px 4px; }
.drawer-title { font-family:var(--display); font-weight:700;
                font-size:clamp(26px,4.6vw,38px); line-height:1.02; letter-spacing:-.01em;
                text-transform:uppercase; text-wrap:balance; }
.drawer-date { margin-top:12px; font-family:var(--display); font-size:11px;
               letter-spacing:.26em; text-transform:uppercase; color:var(--amber); }
.drawer-excerpt { margin-top:16px; font-size:15px; line-height:1.6; color:var(--paper-dim); }
.drawer-prose { margin-top:18px; font-size:14.5px; line-height:1.7; color:var(--paper); }
.drawer-prose p + p { margin-top:12px; }
.drawer-prose hr { border:0; border-top:1px solid rgba(242,236,224,.16); margin:20px 0; }
.drawer-prose em { color:var(--paper-dim); }
.drawer-prose table { width:100%; border-collapse:collapse; font-size:13px; }
.drawer-prose td { padding:9px 10px; border-bottom:1px solid rgba(242,236,224,.1);
                   vertical-align:top; }
.drawer-prose td:first-child { width:44%; font-family:var(--display); font-size:11px;
                               letter-spacing:.14em; text-transform:uppercase;
                               color:var(--paper-dim); }
.drawer-prose blockquote { margin:18px 0; padding:14px 16px;
                           background:rgba(242,236,224,.05); border-left:2px solid var(--amber);
                           font-size:14px; line-height:1.6; color:var(--paper-dim); }
.drawer-prose blockquote p + p { margin-top:10px; }
.drawer-prose figure { margin:18px 0; }
.drawer-tags { display:flex; flex-wrap:wrap; gap:8px; padding:18px 24px 44px; }
.drawer-tags span { font-family:var(--display); font-size:10px; letter-spacing:.18em;
                    text-transform:uppercase; color:var(--paper-dim);
                    border:1px solid rgba(242,236,224,.28); padding:6px 10px; }

/* ---------- index overlay (searchable jump list — see app.js comment) -- */

.index-panel { position:fixed; inset:0; z-index:30; display:flex; flex-direction:column;
               background:rgba(11,10,9,.97); padding:clamp(18px,4vw,44px);
               opacity:0; visibility:hidden;
               transition:opacity .4s var(--ease), visibility 0s linear .4s; }
.index-panel.open { opacity:1; visibility:visible;
                    transition:opacity .4s var(--ease), visibility 0s linear 0s; }
.index-head { display:flex; gap:18px; align-items:center;
              border-bottom:1px solid rgba(242,236,224,.25); padding-bottom:14px; }
.index-search { flex:1; min-width:0; background:none; border:0; color:var(--paper);
                font-family:var(--display); font-weight:700;
                font-size:clamp(18px,3vw,30px); letter-spacing:.04em;
                text-transform:uppercase; padding:6px 0; }
.index-search::placeholder { color:rgba(201,192,174,.5); font-weight:400;
                             font-size:.45em; letter-spacing:.24em; }
.index-search:focus { outline:none; }
.index-head:focus-within { border-bottom-color:var(--amber); }
.index-close { font-family:var(--display); font-size:15px; line-height:1;
               width:40px; height:40px; flex:none;
               border:1px solid rgba(242,236,224,.35);
               transition:background .3s var(--ease), color .3s var(--ease); }
.index-close:hover { background:var(--paper); color:var(--ground); }
.index-count { font-family:var(--display); font-size:11px; letter-spacing:.26em;
               text-transform:uppercase; color:var(--paper-dim); padding:14px 2px 8px; }
.index-list { flex:1; overflow-y:auto; overscroll-behavior:contain; }
.index-item { display:grid; grid-template-columns:44px 92px 1fr; gap:14px;
              width:100%; text-align:left; align-items:baseline;
              padding:11px 10px; border-bottom:1px solid rgba(242,236,224,.07);
              transition:background .2s var(--ease); }
.index-item .n, .index-item .d { font-family:var(--display); font-size:11px;
                                 color:var(--paper-dim); letter-spacing:.08em; }
.index-item .t { font-family:var(--sans); font-size:15px; color:var(--paper);
                 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.index-item:hover, .index-item.is-active { background:rgba(242,236,224,.08); }
.index-item.is-active { box-shadow:inset 3px 0 0 var(--amber); }
.index-empty { padding:26px 10px; font-family:var(--display); font-size:12px;
               letter-spacing:.2em; text-transform:uppercase; color:var(--paper-dim); }

@media (max-width:640px) {
  .brand { font-size:10px; letter-spacing:.2em; left:16px; }
  .hud { right:16px; font-size:11px; }
  .index-toggle { left:16px; }
  .index-item { grid-template-columns:36px 1fr; }
  .index-item .d { display:none; }        /* date stays searchable, just not shown */
  .reel { padding-bottom:64px; }
}

/* ---------- reduced motion: no snap, no animated cue, no transitions --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type:none; scroll-behavior:auto; }
  .entry, .reel { scroll-snap-align:none; }
  .hint { animation:none; }
  .drawer, .drawer-scrim, .index-panel { transition:none; }
  .reel .open-cue, .index-toggle, .drawer-close, .index-close, .index-item { transition:none; }
}