/* ============================================================================
   archive.css — DEUCE transition-page "archive" layout.
   Functional layout reproduced from the nicolaromei archive (positions/sizes/grid/
   type scale, measured), driven by our own archive.js. Used by management/produce/ip.
   ============================================================================ */
:root{ --ar-bg:#0a0a0a; --ar-fg:#ededed; --ar-mute:#7e7e7e; --ar-line:#242424; --ar-accent:#ffdb1f; }
.ar-page *{ box-sizing:border-box; margin:0; }
html, body.ar-page{ height:100%; }
body.ar-page{ background:var(--ar-bg); color:var(--ar-fg); overflow:hidden;
              font-family:"Host Grotesk","Helvetica Neue",system-ui,sans-serif; }
.ar{ position:fixed; inset:0; }

/* ---- corners (top meta) ---- */
.ar-c{ position:absolute; font-size:12px; font-weight:500; text-transform:uppercase;
       letter-spacing:.02em; line-height:1.5; color:var(--ar-mute); }
.ar-tl{ top:24px; left:32px; font-size:14px; }            /* enlarged (boss spec) */
.ar-tl a{ color:var(--ar-fg); text-decoration:none; font-size:15px; }
/* JP / EN language switch — lives in the top-left chrome cluster (visible on desktop and mobile; the .ar-tr
   tagline hides on mobile, so the switch belongs here). Active = white (current state), hover = accent (next). */
.ar-tl .lang-toggle{ display:flex; align-items:center; gap:.45em; margin-top:6px; font-size:13px; letter-spacing:.04em; }   /* own line, left-aligned, below "DEUCE / ○○" */
.lang-toggle button{ background:none; border:0; padding:0; margin:0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--ar-mute); cursor:pointer; transition:color .2s, opacity .2s; }
.lang-toggle button.is-active{ color:var(--ar-fg); font-weight:600; }
.lang-toggle button:hover{ color:var(--ar-accent); }
.lang-toggle .lang-sep{ color:var(--ar-mute); opacity:.55; }
.ar-tc{ top:24px; left:31%; }
.ar-tr{ top:24px; right:32px; width:300px; text-align:right; color:#b4b4b4; }

/* ---- left index list ---- */
.ar-list{ position:absolute; left:32px; top:50%; transform:translateY(-50%); width:320px; max-height:62vh; overflow:hidden; }
.ar-list__head, .ar-row{ display:grid; grid-template-columns:52px 1fr 74px; column-gap:8px; align-items:baseline; }
.ar-list__head{ font-size:11px; font-weight:500; text-transform:uppercase; color:var(--ar-mute);
                letter-spacing:.04em; padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid var(--ar-line); }
.ar-row{ padding:5.5px 0; text-decoration:none; color:var(--ar-fg); cursor:pointer;
         font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.01em;
         opacity:.4; transition:opacity .35s ease, color .35s ease; }
.ar-row:hover{ opacity:.78; }
.ar-row.is-active{ opacity:1; }
.ar-row.is-active .ar-idx{ color:var(--ar-accent); }
.ar-row.is-active .ar-name{ color:#fff; }
.ar-idx{ color:var(--ar-mute); transition:color .35s ease; }
.ar-name{ color:var(--ar-fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ar-cat{ color:var(--ar-mute); text-align:right; font-size:10px; white-space:nowrap; }

/* ---- centre stage: images accumulate (aligned, same position); each new one clips open from the centre ---- */
.ar-stage{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
           width:min(37vw,532px); aspect-ratio:532 / 585; background:#141414; border-radius:3px; overflow:hidden; }
.ar-stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ar-stage .ar-cs{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
                  font-family:"JetBrains Mono",monospace; font-size:13px; letter-spacing:.32em; text-transform:uppercase;
                  color:#6a6a6a; background:#141414; }

/* ---- active title + description (lower-left) ---- */
.ar-bigtitle{ position:fixed; left:32px; bottom:120px; max-width:46vw;
              font-weight:500; text-transform:uppercase; font-size:clamp(34px,4.8vw,69px);
              line-height:.95; letter-spacing:-.04em; color:var(--ar-fg); opacity:0; transition:opacity .3s; pointer-events:none; }
.ar-bigtitle.is-on{ opacity:1; }
.ar-desc{ position:fixed; left:32px; bottom:88px; max-width:30vw; font-size:13px; line-height:1.5;
          color:var(--ar-mute); opacity:0; transition:opacity .3s; pointer-events:none; }
.ar-desc.is-on{ opacity:1; }

/* ---- right preview filmstrip ---- */
.ar-thumbs{ position:fixed; right:9.3vw; top:50%; transform:translateY(-50%); width:60px; height:340px; overflow:hidden; }
.ar-thumbs__track{ display:flex; flex-direction:column; gap:10px; }
.ar-thumbs img, .ar-thumbs .ar-cs-thumb{ width:60px; height:60px; object-fit:cover; display:block;
                opacity:.3; filter:grayscale(.35); outline:1px solid transparent; outline-offset:2px;
                transition:opacity .4s ease, filter .4s ease, outline-color .4s ease; }
.ar-thumbs .ar-cs-thumb{ background:#1c1c1c; }
.ar-thumbs img.is-active, .ar-thumbs .ar-cs-thumb.is-active{ opacity:1; filter:none; outline-color:var(--ar-accent); }

/* ---- bottom-centre ---- */
.ar-count{ position:fixed; bottom:40px; left:50%; transform:translateX(-50%);
           font-family:"JetBrains Mono",monospace; font-size:14px; letter-spacing:.14em; color:var(--ar-mute); }   /* enlarged then eased down a touch (boss spec) */
.ar-tabs{ position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
          display:flex; gap:28px; font-size:11px; font-weight:500; text-transform:uppercase;
          letter-spacing:.08em; color:var(--ar-mute); }
.ar-tabs .is-on{ color:var(--ar-fg); }
.ar-hint{ position:absolute; bottom:28px; right:32px; font-size:10px; letter-spacing:.1em;
          text-transform:uppercase; color:#5a5a5a; font-family:"JetBrains Mono",monospace; }
.ar-logo{ position:absolute; top:20px; right:32px; }   /* reserved if needed */

/* ============ MOBILE: a plain scrollable card list (JS-built .ar-m), native scroll ============ */
.ar-m{ display:none; }
.ar-foot-m{ display:none; }
@media (max-width: 860px){
  html, body.ar-page{ height:auto; overflow:auto; }
  .ar{ position:static; }
  /* hide the desktop archive UI — the JS renders the card list below instead */
  .ar-list, .ar-stage, .ar-bigtitle, .ar-desc, .ar-thumbs, .ar-count, .ar-tabs, .ar-hint, .ar-tc, .ar-tr{ display:none; }
  .ar-c.ar-tl{ position:static; padding:20px 18px 8px; }
  .ar-c.ar-tl .lang-toggle{ margin-top:16px; }   /* mobile: more breathing room below "DEUCE / ○○" */
  .ar-m{ display:block; }
  .ar-m-card{ padding:0 0 26px; }
  .ar-m-img{ position:relative; width:100%; aspect-ratio:4 / 5; background:#141414; overflow:hidden; }
  .ar-m-img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .ar-m-card .ar-cs{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
                     font-family:"JetBrains Mono",monospace; font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:#6a6a6a; }
  .ar-m-meta{ padding:12px 18px 0; }
  .ar-m-h{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
  .ar-m-name{ font-size:22px; font-weight:600; text-transform:uppercase; letter-spacing:-.01em; color:var(--ar-fg); }
  .ar-m-cat{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ar-mute); white-space:nowrap; }
  .ar-m-desc{ margin-top:6px; font-size:13px; line-height:1.6; color:var(--ar-mute); }
  .ar-foot-m{ display:flex; gap:18px; align-items:center; padding:8px 18px 44px; color:var(--ar-mute);
              font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
}