/* ============================================================================
   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; }

/* Category framing for the Management roster (display only — JS still reads all .ar-row in order).
   Groups the list under Artist / Actor / 文化人 headers with hairline dividers; running index (M0x) removed. */
.ar-grp{ margin-bottom:15px; }
.ar-grp:last-child{ margin-bottom:0; }
.ar-grp-h{ font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:500; letter-spacing:.2em;
           text-transform:uppercase; color:var(--ar-accent); padding:7px 0; margin-bottom:3px;
           border-top:1px solid var(--ar-line); }
[data-page="management"] .ar-list .ar-row{ grid-template-columns:1fr; }
[data-page="management"] .ar-list .ar-cat{ display:none; }

/* ---- 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(41vw,600px); aspect-ratio:1 / 1; 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; }

/* ---- Futa (M05) profile: the photo fills the stage box; scrolling WITHIN the box reveals the bio. ---- */
.ar-stage .ar-pf{ position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain;
                  background:#141414; -webkit-overflow-scrolling:touch; }
.ar-stage .ar-pf::-webkit-scrollbar{ width:6px; }
.ar-stage .ar-pf::-webkit-scrollbar-thumb{ background:#2e2e2e; border-radius:3px; }
.ar-pf{ font-family:"Host Grotesk","Helvetica Neue",system-ui,sans-serif; }
.ar-pf-photo{ overflow:hidden; background:#141414; }
.ar-pf-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.ar-stage .ar-pf-photo{ height:100%; }   /* desktop: photo fills the stage box → scroll down for the bio */
.ar-pf-body{ padding:28px 26px 32px; }
.ar-pf-basics{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:5px; align-items:baseline; }
.ar-pf-basics dt{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.08em;
                  text-transform:uppercase; color:var(--ar-mute); }
.ar-pf-basics dd{ font-size:13px; color:var(--ar-fg); }
.ar-pf-sns{ display:flex; align-items:center; gap:14px; margin-top:16px; }
.ar-pf-sns a{ color:var(--ar-mute); display:inline-flex; transition:color .2s; }
.ar-pf-sns a:hover{ color:var(--ar-accent); }
.ar-pf-sns svg{ width:15px; height:15px; display:block; fill:currentColor; }
.ar-pf-sec{ margin-top:22px; }
.ar-pf-sec > h4{ font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:500; letter-spacing:.2em;
                 text-transform:uppercase; color:var(--ar-accent); padding-bottom:7px; margin-bottom:9px;
                 border-bottom:1px solid var(--ar-line); }
.ar-pf-sec ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:6px; }   /* padding:0 = drop the ul default 40px indent so the year column aligns to the category (h4) left edge (desktop + mobile) */
.ar-pf-sec li{ display:grid; grid-template-columns:40px 1fr; column-gap:8px; font-size:12px;
               line-height:1.5; color:var(--ar-fg); }
.ar-pf-sec li .y{ font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ar-mute); white-space:nowrap; }
.ar-pf-sec li em{ font-style:normal; color:var(--ar-mute); }

/* ---- 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; }
  [data-page="management"] .ar-m{ padding:8px 26px 0; }   /* 引き：左右ガター（旧=全幅で画面いっぱい）→カード列を内側に額装。Management限定（produce/ipは全幅のまま） */
  /* category headers on mobile (Management only): JS inserts .ar-m-grp-h before each group's first card,
     mirroring the desktop .ar-grp-h (accent / mono / top hairline). produce/ip have no .ar-grp → no headers. */
  .ar-m-grp-h{ font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500; letter-spacing:.2em;
               text-transform:uppercase; color:var(--ar-accent); padding:16px 0 14px; margin-bottom:6px;
               border-top:1px solid var(--ar-line); }
  .ar-m-grp-h:first-child{ border-top:0; padding-top:4px; }
  .ar-m-card{ padding:0 0 52px; }   /* 人物間の間隔＝従来26pxの2倍（モバイルのみ） */
  .ar-m-img{ position:relative; width:100%; aspect-ratio:4 / 5; background:#141414; overflow:hidden; }
  [data-page="management"] .ar-m-img{ border-radius:3px; }   /* 角丸3px＝PCステージと同じ額装感（Management限定） */
  .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; }
  [data-page="management"] .ar-m-meta{ padding:12px 0 0; }   /* Management: ガターは .ar-m が持つので左右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); }
  /* Futa on mobile: photo + name/cat, then a COLLAPSIBLE bio — default folded, tap to expand,
     collapse button at the top (toggle) and at the bottom of the bio. Labels are CSS-driven so they
     auto-follow JP/EN (html[data-lang]) and the open/closed state. */
  .ar-m-card .ar-pf-body{ display:none; padding:14px 0 0; }
  .ar-m-card.is-open .ar-pf-body{ display:block; }
  /* 経歴項目: ul の字下げ撤去は基底に集約済み（年カラム＝見出し左端）。モバイルは年カラムをデスクトップ40pxより
     詰めて本文の行長を確保。本文は右カラムでぶら下げ折り返し＝折り返し行が「2024」等の年表示領域に入り込まない。 */
  .ar-m-card .ar-pf-sec li{ grid-template-columns:34px 1fr; column-gap:8px; font-size:13px; }
  .ar-pf-toggle{ display:inline-block; margin-top:14px; padding:11px 18px; background:none;
                 border:1px solid var(--ar-line); border-radius:2px; color:var(--ar-fg); font:inherit;
                 font-size:12px; letter-spacing:.06em; cursor:pointer; -webkit-tap-highlight-color:transparent;
                 transition:color .2s, border-color .2s; }
  .ar-pf-toggle:active{ color:var(--ar-accent); border-color:var(--ar-accent); }
  .ar-pf-toggle::after{ content:"経歴を見る ▾"; }
  .ar-m-card.is-open .ar-pf-toggle::after{ content:"経歴を閉じる ▴"; }
  html[data-lang="en"] .ar-pf-toggle::after{ content:"View career ▾"; }
  html[data-lang="en"] .ar-m-card.is-open .ar-pf-toggle::after{ content:"Close ▴"; }
  .ar-pf-collapse{ display:block; width:100%; margin:26px 0 2px; padding:13px; background:none;
                   border:1px solid var(--ar-line); border-radius:2px; color:var(--ar-mute); font:inherit;
                   font-size:12px; letter-spacing:.06em; cursor:pointer; -webkit-tap-highlight-color:transparent;
                   transition:color .2s, border-color .2s; }
  .ar-pf-collapse:active{ color:var(--ar-accent); border-color:var(--ar-accent); }
  .ar-pf-collapse::after{ content:"経歴を閉じる ▴"; }
  html[data-lang="en"] .ar-pf-collapse::after{ content:"Close ▴"; }
  .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; }
}

/* ============================================================================
   IP page — static statement layout (2026-07-29)
   ip.html used to be an archive page whose four rows were ALL Coming Soon, so the page read
   "準備中の会社". The archive machinery (stage / filmstrip / counter) is gone; what stays is the
   archive's own type scale, 52px index column and hairline dividers — nothing new is invented.
   archive.js early-returns on this page (no .ar-row) but still wires the JP/EN toggle.
   Restore the archive version from: deuce-site/_restore-ip-archive-page.html
   ============================================================================ */
/* 2026-07-30 — was left-aligned at left:32px, which left the right ~55% of the desktop viewport empty.
   Now centred and scaled up. ONE knob: --svc-k multiplies every dimension AND the type at the same
   rate, so the composition — including where each line breaks — is identical to the ×1 version; it is
   literally the same block, larger. 1.68 = 1040 / 620, i.e. the 620px block widened to the same
   content column the home page uses (.news-list / .sec-rule::before = 1040px). Hairlines stay 1px
   like every other rule in this file. Mobile resets the knob to 1 (see the max-width:860px block). */
.ar-svc{ --svc-k:1.68; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
         width:min(calc(620px * var(--svc-k)), 86vw); }
.ar-svc-item{ display:grid; grid-template-columns:calc(52px * var(--svc-k)) 1fr;
              column-gap:calc(8px * var(--svc-k)); align-items:baseline;
              padding:calc(15px * var(--svc-k)) 0; border-top:1px solid var(--ar-line); }
.ar-svc-item:last-child{ border-bottom:1px solid var(--ar-line); }
.ar-svc-idx{ font-family:"JetBrains Mono",monospace; font-size:calc(11px * var(--svc-k));
             letter-spacing:.08em; color:var(--ar-mute); }
.ar-svc-name{ display:block; font-size:calc(14px * var(--svc-k)); font-weight:500; text-transform:uppercase;
              letter-spacing:.01em; color:var(--ar-fg); }
.ar-svc-desc{ margin-top:calc(6px * var(--svc-k)); font-size:calc(13px * var(--svc-k));
              line-height:1.6; color:var(--ar-mute); }

@media (max-width: 860px){
  /* The statement normally sits top-right and is hidden on mobile (.ar-tr, line ~126). On this page it IS
     the content, so flow it instead of hiding it — one source of truth, no duplicated copy. */
  [data-page="ip"] .ar-tr{ display:block; position:static; width:auto; text-align:left;
                           padding:4px 18px 0; font-size:13px; line-height:1.7; }
  /* --svc-k:1 = mobile keeps exactly the sizes it had before the desktop block was scaled up. */
  .ar-svc{ --svc-k:1; position:static; left:auto; transform:none; width:auto; padding:26px 18px 12px; }
  .ar-svc-item{ grid-template-columns:44px 1fr; padding:16px 0; }
  .ar-svc-name{ font-size:17px; }
}