/* ============================================================
   CASE DETAIL PAGES — layout (uses site.css tokens & components)
   ============================================================ */

/* Ch32: inherit global body (bg + radial halftone dot field) — do NOT override */

/* ---------- top bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background 200ms cubic-bezier(.22,1,.36,1),border-color 200ms,transform 280ms cubic-bezier(.22,1,.36,1); /* Ch55: +transform */
}
.topbar.scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
/* Ch55: direction-aware chrome hide (JS drives body.chrome-hidden) */
body.chrome-hidden .topbar{transform:translateY(-100%)}
body.chrome-hidden .case-foot{transform:translateY(100%)}
.topbar .bar{display:flex;justify-content:space-between;align-items:center;height:72px;gap:14px}
.top-right{display:flex;align-items:center;gap:14px}
.back{
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--ink);padding:8px 16px;background:transparent;
  transition:background 200ms cubic-bezier(.22,1,.36,1),color 200ms,border-color 200ms;
  white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
}
.back:hover{background:var(--accent);border-color:var(--accent);color:#fff}
@media (max-width:640px){.back span.t{display:none}}

/* ---------- case hero ---------- */
.case-hero{padding:172px 0 72px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.case-hero .ch-idx{font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--accent);text-transform:uppercase;margin-bottom:22px}
.case-hero h1{
  font-size:clamp(2.4rem,6.4vw,5.2rem);font-weight:200;line-height:.98;
  letter-spacing:.1em;text-transform:uppercase;max-width:20ch;
}
.case-hero h1 .zh-sub{
  display:block;font-size:.32em;font-weight:300;letter-spacing:.3em;color:var(--ink50);margin-top:18px;text-transform:none;
}
.case-hero .ch-one{margin-top:28px;max-width:640px;font-size:16px;line-height:1.7;color:var(--ink70)}
.case-hero .ch-rule{
  position:absolute;right:-60px;top:-60px;width:340px;height:340px;pointer-events:none;
  border:1px solid var(--line);transform:rotate(18deg);
}
.case-hero .ch-rule i{position:absolute;left:0;bottom:64px;width:100%;height:2px;background:var(--accent);opacity:.85}

/* ---------- case body grid ---------- */
.case-grid{display:grid;grid-template-columns:300px 1fr;gap:72px;padding:72px 0 88px}
@media (max-width:960px){.case-grid{grid-template-columns:1fr;gap:48px}}

/* ---------- aside meta ---------- */
.case-aside{position:sticky;top:112px;align-self:start;border-top:1px solid var(--ink)}
.am-row{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:13px}
.am-row .k{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink50);padding-top:3px}
.am-row .v{color:var(--ink);line-height:1.6}
.am-row .v.accent{color:var(--accent);font-weight:500}
@media (max-width:960px){.case-aside{position:static}}

/* ---------- article ---------- */
.case-art h2{
  font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);margin:0 0 18px;display:flex;align-items:center;gap:12px;
}
.case-art h2::before{content:attr(data-n);color:var(--accent);font-weight:600;letter-spacing:.06em}
.case-art h2::after{content:'';flex:1;height:1px;background:var(--line)}
.case-art section{margin-bottom:56px}
.case-art p{max-width:68ch;color:var(--ink70);font-size:14.5px;line-height:1.8}
.case-art p + p{margin-top:14px}
.case-art p b{color:var(--ink);font-weight:500}
.case-art ul{max-width:68ch;color:var(--ink70);font-size:14.5px;line-height:1.8;padding-left:1.2em;margin-top:6px}
.case-art li + li{margin-top:8px}
.case-art li::marker{color:var(--accent)}

/* ---------- figures ---------- */
.case-art figure{
  margin:26px 0 8px;border:1px solid var(--line);background:rgba(255,255,255,.9);padding:8px;
  box-shadow:0 10px 30px rgba(8,6,22,.04);
  transition:box-shadow 200ms cubic-bezier(.22,1,.36,1),border-color 200ms;
}
.case-art figure:hover{box-shadow:0 14px 38px rgba(8,6,22,.08);border-color:rgba(47,47,228,.3)}
.case-art figure img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1);transition:filter 200ms cubic-bezier(.22,1,.36,1)}
.case-art figure:hover img{filter:grayscale(0)}
.case-art figcaption{
  display:flex;justify-content:space-between;gap:10px;padding-top:8px;
  font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink50);
}
.fig-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:720px){.fig-grid{grid-template-columns:1fr}}

/* ---------- link groups ---------- */
.link-box{border:1px solid var(--ink);background:#fff;padding:24px 26px;display:flex;flex-direction:column;gap:14px;max-width:680px}
.link-box .lb-k{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink50)}
.link-row{display:flex;gap:10px;flex-wrap:wrap}
.link-note{font-size:12px;color:var(--ink50);letter-spacing:.04em}
[data-langs]{display:none}
html[data-case-lang="en"] [data-langs~="en"],
html[data-case-lang="tw"] [data-langs~="tw"],
html[data-case-lang="zh"] [data-langs~="zh"]{display:flex}
html[data-case-lang="en"] [data-langs~="en"].block,
html[data-case-lang="tw"] [data-langs~="tw"].block,
html[data-case-lang="zh"] [data-langs~="zh"].block{display:block}

/* ---------- embed ---------- */
.embed-shell{margin-top:6px;border:1px solid var(--line);background:var(--bg2);position:relative;aspect-ratio:16/10;max-width:880px}
.embed-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed-load{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;background:var(--ink);color:#fff;cursor:pointer;
  font-size:11px;font-weight:600;letter-spacing:.16em;padding:12px 20px;text-transform:uppercase;
  border:0;transition:background 200ms cubic-bezier(.22,1,.36,1);
}
.embed-load:hover{background:var(--accent)}

/* ---------- next project ---------- */
.next-proj{border-top:1px solid var(--ink);padding:56px 0 88px;display:block;position:relative;overflow:hidden}
.next-proj .np-k{font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink50)}
.next-proj .np-t{
  margin-top:14px;font-size:clamp(1.8rem,4.6vw,3.6rem);font-weight:200;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.05;display:inline-block;
  transition:color 200ms cubic-bezier(.22,1,.36,1),transform 200ms cubic-bezier(.22,1,.36,1);
}
.next-proj .np-t i{font-style:normal;color:var(--accent);display:inline-block;transition:transform 200ms cubic-bezier(.22,1,.36,1)}
.next-proj:hover .np-t{color:var(--accent);transform:translateX(6px)}
.next-proj:hover .np-t i{transform:translateX(8px)}

/* ---------- mini footer — Ch45: sticky, translucent, site-wide ---------- */
.case-foot{
  position:sticky;bottom:0;z-index:60;
  border-top:1px solid var(--line);padding:16px 0 18px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:rgba(250,250,250,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform 280ms cubic-bezier(.22,1,.36,1); /* Ch55 */
}
.case-foot, .case-foot a{font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink50)}
.case-foot a{color:var(--ink);border-bottom:1px solid var(--line);transition:color 200ms,border-color 200ms}
.case-foot a:hover{color:var(--accent);border-color:var(--accent)}
/* Ch61: mobile — stack vertically like the homepage .foot */
@media (max-width:767px){
  .case-foot{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ---------- Ch58: case cross-links inside aside (built by detail.js) ---------- */
.case-list{margin-top:34px;border-top:1px solid var(--ink)}
.case-list .cl-k{
  padding:14px 0 4px;font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink50);
}
.cl-row{
  display:flex;align-items:baseline;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink);
  transition:color 200ms,padding-left 200ms;
}
.cl-row .n{
  flex:none;font-size:9.5px;font-weight:600;letter-spacing:.12em;
  color:var(--ink50);font-variant-numeric:tabular-nums;transition:color 200ms;
}
.cl-row .t{flex:1;min-width:0;line-height:1.5}
a.cl-row:hover{color:var(--accent);padding-left:6px}
a.cl-row:hover .n{color:var(--accent)}
.cl-row.cur{color:var(--accent);font-weight:500}
.cl-row.cur::after{
  content:'';flex:none;align-self:center;width:6px;height:6px;
  background:var(--accent);transform:rotate(45deg);
}
.cl-all{
  display:inline-block;margin-top:16px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);border-bottom:1.5px solid var(--accent);padding-bottom:3px;
  transition:color 200ms,border-color 200ms;
}
.cl-all:hover{color:var(--accent)}

/* ============================================================
   Ch12-E — interaction enhancements
   ============================================================ */
/* A — fade + scale reveal for media blocks */
.rv-s{opacity:0;transform:translateY(18px) scale(.97);transition:opacity 520ms var(--ease),transform 520ms var(--ease)}
.rv-s.in{opacity:1;transform:none}

/* video shell (Fading Neon — player first) */
.video-shell{position:relative;aspect-ratio:16/9;background:#0E0E1A;border:1px solid var(--ink);max-width:880px}
.video-shell video{position:absolute;inset:0;width:100%;height:100%;display:block}

/* hero-position embed (deck pages — Canva first, all languages) */
.embed-hero{margin-top:6px;border:1px solid var(--ink);background:var(--bg2);position:relative;aspect-ratio:16/10;max-width:100%}
.embed-hero iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* brand gallery (Youth Spectrum — mixed orientation grid) */
.brand-gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.brand-gallery figure{margin:0}
.brand-gallery figure:nth-child(1){grid-column:span 3}
.brand-gallery figure:nth-child(2){grid-column:span 3}
.brand-gallery figure:nth-child(3){grid-column:span 2}
.brand-gallery figure:nth-child(4){grid-column:span 2}
.brand-gallery figure:nth-child(5){grid-column:span 2}
.brand-gallery figure img{aspect-ratio:auto;object-fit:cover;width:100%;height:100%}
@media (max-width:720px){
  .brand-gallery figure{grid-column:span 6!important}
}

/* D — lightbox */
#lbx{
  position:fixed;inset:0;z-index:1200;background:rgba(250,250,250,.94);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);
  opacity:0;visibility:hidden;transition:opacity 220ms var(--ease),visibility 220ms;cursor:zoom-out;
}
#lbx.on{opacity:1;visibility:visible}
#lbx img{max-width:100%;max-height:100%;border:1px solid var(--line);box-shadow:0 30px 80px rgba(26,26,46,.18);transform:scale(.96);transition:transform 220ms var(--ease)}
#lbx.on img{transform:scale(1)}
#lbx .lbx-x{position:absolute;top:18px;right:22px;font-size:32px;font-weight:200;color:var(--ink);line-height:1}

/* C — parallax base */
.case-hero h1,.case-art h2{will-change:transform}