:root {
  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: #8a8a8a;
  --rule: #e6e6e6;
  --accent: #c14a2c;
  --max: 1280px;
  --pad-x: clamp(44px, 17vw, 320px);
  --serif: "Noto Serif TC", "Source Han Serif TC", serif;
  --sans: "Helvetica Neue", "Inter", "Noto Sans TC", -apple-system, sans-serif;
  --sans-tc: "Noto Sans TC", "Helvetica Neue", "Inter", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "palt" 1;
}

body { font-size: 14px; line-height: 1.7; letter-spacing: 0.01em; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Deter casual image saving (drag-to-save, mobile long-press save, selection).
   Pairs with the contextmenu/dragstart guard in app.jsx. Not real DRM. */
img, video {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

::selection { background: var(--fg); color: var(--bg); }

/* sans heading refinements — lighter weight + tighter tracking on big sizes */
body.sans-head .hero-title h1,
body.sans-head .index-head h2,
body.sans-head .footer .big,
body.sans-head .proj-head .left .yr {
  font-weight: 300;
  letter-spacing: -0.02em;
}
body.sans-head .proj-head .right h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
body.sans-head .proj-row .ttl-block .name,
body.sans-head .proj-text-block h3,
body.sans-head .resume-side h3,
body.sans-head .resume-main h3,
body.sans-head .nav-name {
  font-weight: 500;
  letter-spacing: 0.005em;
}
body.sans-head .proj-next .next-name { font-weight: 400; letter-spacing: 0; }
/* hero name (English) stays bold even in sans-head mode */
body.sans-head .hero-title h1 { font-weight: 700; }
/* WORKS heading stays bold even in sans-head mode */
body.sans-head .index-head h2 { font-weight: 700; }

/* ============ VIEW TRANSITION ============ */
/* Each page (home / project / about / autobio) mounts inside .view-fade (see
   app.jsx), so switching views reads as a quiet fade + small rise instead of a
   hard cut. The transform only lives for the animation (no fill), so fixed
   overlays (lightbox, toast) opened later are unaffected. */
.view-fade { animation: view-fade-in 380ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes view-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ============ TOP NAV ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 22px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  z-index: 50;
  color: var(--fg);
  background-color: rgba(var(--bg-rgb, 255, 255, 255), 0);
  border-bottom: 1px solid rgba(var(--rule-rgb, 230, 230, 230), 0);
  pointer-events: none;
  transition: background-color .35s ease, backdrop-filter .35s ease, border-bottom-color .35s ease, color .35s ease;
}
/* Over the full-bleed hero carousel the nav floats in white; the carousel's top
   scrim keeps it legible over light frames. Reverts to dark once .scrolled. */
.nav.over-hero { color: #fff; }
.nav.scrolled {
  background-color: rgba(var(--bg-rgb, 255, 255, 255), 0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--rule);
}
.nav > * { pointer-events: auto; }
.nav-name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.nav-name .en { font-family: var(--sans); opacity: 1; font-size: 12px; letter-spacing: 0.18em; }
.nav-right { font-family: var(--sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; display: flex; align-items: baseline; gap: 28px; }
.nav-right a { cursor: pointer; opacity: 0.85; transition: opacity .2s; }
.nav-right a:hover { opacity: 1; }

/* Language toggle — 中 / EN. Inherits the nav's current colour, like the rest
   of .nav-right. A thin rule before it sets it apart from the Works / About
   links. */
.nav-lang {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding-left: 28px;
  margin-left: 0;
  border-left: 1px solid currentColor;
  /* the divider should read lighter than the text */
  border-left-color: rgba(128, 128, 128, 0.4);
}
.nav-lang-opt {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity .2s;
}
.nav-lang-opt:hover { opacity: 0.85; }
.nav-lang-opt.is-active { opacity: 1; font-weight: 600; }
.nav-lang-sep { opacity: 0.4; }
/* The single switch key is mobile-only; the full 中 / EN group leads on desktop. */
.nav-lang-full { display: inline-flex; align-items: baseline; gap: 7px; }
.nav-lang-single { display: none; opacity: 1; }

/* ============ HERO ============ */
.hero {
  min-height: 100vh;
  padding: 140px var(--pad-x) 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  position: relative;
}
.hero-portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 460px;
}
.hero-portrait image-slot {
  width: 100%; height: 100%;
  --is-bg: #ece8df;
  --is-fg: #8a8780;
  --is-border: transparent;
}
.hero-meta {
  position: absolute;
  left: 0; bottom: -28px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  gap: 24px;
}
.hero-meta b { color: var(--fg); font-weight: 500; }

.hero-title {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-self: end;
}
.hero-title .index {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--muted);
  text-transform: uppercase;
}
.hero-title .index .status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 16px;
  color: var(--fg);
}
.hero-title .index .status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.hero-title h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.hero-title h1 .en {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.22em;
  margin-top: 22px;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-tag {
  font-family: var(--sans-tc);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  max-width: 50ch;
  margin: 0;
  color: var(--fg);
  text-wrap: pretty;
  line-break: strict;
}
.hero-tag .hero-tag-en {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.hero-skills {
  margin: 18px 0 0;
  font-family: var(--sans-tc);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ============ HERO CAROUSEL (full-bleed, height-capped) ============ */
.hero-carousel {
  position: relative;
  width: 100%;
  /* Full-bleed but height-capped so the intro band below still lands inside
     the first screen. Desktop slides are dedicated 21:9 hero cuts (2560×1090);
     on very wide/short viewports the 72vh cap makes the stage a touch wider
     than 21:9, so they crop slightly top/bottom (object-fit: cover, centred) —
     the accepted trade for keeping both the full-bleed opening and the
     "who am I" read in the first fold. The 42.58vw term (= the uncropped 21:9
     height, 1090/2560) keeps a narrow window from making the stage taller than
     the hero cut, which would crop the sides. */
  height: min(72vh, 42.58vw);
  background: #fff;
}
.hc-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  /* Let the carousel own horizontal drags (finger-follow swipe) while the page
     keeps its vertical scroll — see the touch handlers in home.jsx. */
  touch-action: pan-y;
}
.hc-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.hc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.hc-slide.is-active { opacity: 1; }
.hc-slide .r2-img {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  background: #fff;
}
/* Scrim: a top-only gradient that keeps the floating white nav legible over
   light frames. Nothing else is overlaid on the stage, so below the nav the
   cover shows clean. */
.hc-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.30) 0%,
    rgba(0, 0, 0, 0) 16%);
}
.hc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;          /* don't intercept clicks while hidden */
  transition: opacity .3s ease, background .2s ease;
}
/* Invisible hit halo: the stage behind the arrow opens the project, so a click
   landing just outside the circle navigates away instead of flipping the slide.
   The halo widens the click target to ~100px without growing the visual. */
.hc-arrow::after {
  content: "";
  position: absolute;
  inset: -22px;
}
/* Reveal only while the pointer is moving (JS toggles .controls-visible), not on
   a stationary hover — keeps the hero clean until the visitor reaches for it. */
.hero-carousel.controls-visible .hc-arrow { opacity: 0.85; pointer-events: auto; }
.hc-arrow:hover { opacity: 1; background: rgba(0, 0, 0, 0.42); }
.hc-arrow:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }
.hc-prev { left: 24px; }
.hc-next { right: 24px; }

@media (prefers-reduced-motion: reduce) {
  .hc-slide { transition: opacity .25s ease; }
}

/* ============ HERO INTRO — introduction band below the carousel ============ */
/* The greeting leads big and bold (name + role — the five-second read), the
   slogan follows as a smaller second voice, and a one-line bilingual intro
   states what I actually do. The height-capped carousel above leaves room for
   the greeting inside the first fold. */
.hero-intro {
  padding: clamp(40px, 4.5vw, 64px) var(--pad-x) clamp(36px, 4.5vw, 64px);
}
.hero-intro-greeting {
  margin: 0;
  font-family: var(--sans-tc);
  font-weight: 700;
  font-size: clamp(30px, 3.7vw, 56px);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--fg);
  text-wrap: balance;
}
/* Clause chunks (clauseWrap): zh (.nbc) and en (.lc) clauses each stay whole on
   a line, so the headline folds at 「，」/ "," — never mid-phrase. The en
   inter-clause gap is a real space in the markup (see clauseWrap), which
   collapses at a wrap — no phantom indent when a clause folds to line two. */
.hero-intro-greeting .nbc,
.hero-intro-greeting .lc { display: inline-block; white-space: nowrap; }
/* The slogan is always the English line (shown even on the zh site), so the
   type is styled here directly rather than gated on html[lang]. */
.hero-intro-slogan {
  margin: clamp(14px, 1.5vw, 22px) 0 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(17px, 1.7vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.hero-intro-slogan .nbc,
.hero-intro-slogan .lc { display: inline-block; white-space: nowrap; }
.hero-intro-desc {
  margin: clamp(18px, 1.9vw, 28px) 0 0;
  max-width: 62ch;
  font-family: var(--sans-tc);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 400;
  line-height: 1.75;
  color: var(--muted);
}

/* ============ RESUME GRID ============ */
.resume {
  padding: 120px var(--pad-x);
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 96px;
  border-top: 1px solid var(--rule);
}
.resume-side > section { margin-bottom: 56px; }
.resume-side h3, .resume-main h3 {
  margin: 0 0 24px 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.02em;
}
.resume-side h3::after, .resume-main h3::after {
  content: "";
  display: block;
  width: 18px;
  height: 1px;
  background: var(--fg);
  margin-top: 14px;
}

.kv { font-family: var(--sans-tc); font-size: 13px; line-height: 1.9; color: var(--fg); }
.kv .row { display: flex; gap: 10px; margin-bottom: 6px; }
.kv .row .k { color: var(--muted); width: 56px; flex-shrink: 0; font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding-top: 3px; }
.kv .row .v { flex: 1; }

.skill-list, .award-list { list-style: none; padding: 0; margin: 0; font-family: var(--sans-tc); font-size: 13px; }
.skill-list li { padding: 8px 0; border-bottom: 1px dotted var(--rule); display: flex; justify-content: space-between; align-items: center; }
.skill-list li:last-child { border-bottom: none; }
.skill-list .lv { font-family: var(--sans); color: var(--muted); font-size: 12px; letter-spacing: 0.18em; }
.ai-skill-list li { flex-direction: column; align-items: flex-start; gap: 4px; }
.ai-skill-list .n { font-weight: 500; }
.ai-skill-list .use { font-family: var(--sans-tc); color: var(--muted); font-size: 11.5px; letter-spacing: 0.02em; line-height: 1.55; }

.edu-item, .award-item { margin-bottom: 22px; }
.edu-item .yr, .award-item .yr {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 4px;
}
.edu-item .name { font-family: var(--sans-tc); font-size: 13px; font-weight: 500; }
.edu-item .en { font-family: var(--sans); font-size: 12px; color: var(--muted); letter-spacing: 0.08em; margin-top: 2px; }

/* Award titles wrap within the 260px sidebar instead of overflowing into the
   work column; the em (Gold / Bronze / First Place / 金獎…) stays on one piece so
   the result word never orphans. Most zh titles still fit on a single line. */
.award-item .ttl { font-family: var(--sans-tc); font-size: 13px; line-height: 1.7; white-space: normal; text-wrap: pretty; padding-left: 1em; text-indent: -1em; }
.award-item .ttl em { font-style: normal; color: var(--accent); font-weight: 500; white-space: nowrap; }

.autobio-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin-top: 4px;
  background: none;
  border: 0;
  font-family: var(--sans-tc);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity .2s ease;
}
.autobio-btn:hover { opacity: 1; }
.autobio-btn span:first-child {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.autobio-btn .arr {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  transition: transform .25s ease;
}
.autobio-btn:hover .arr { transform: translate(4px, -4px); }

/* ============ CV DOWNLOAD LINK ============ */
/* Shared "Download CV" link — About hero, home footer, and their mobile twins.
   Underlined label + arrow, matching the autobio / mh-link affordances. */
.cv-dl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans-tc);
  font-size: 13px;
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity .2s ease;
}
.cv-dl:hover { opacity: 1; }
.cv-dl span:first-child { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.cv-dl .arr { font-family: var(--sans); font-size: 13px; transition: transform .25s ease; }
.cv-dl:hover .arr { transform: translateY(3px); }

/* About hero: pair the CV link beside the autobio button on one row. */
.about-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 8px; }
.about-hero-actions .autobio-btn { margin-top: 0; }

/* Home footer (desktop): sits under the "open to / fields" block. */
.footer-cv { margin-top: 30px; }

/* Main resume column */
.resume-main .intro-text {
  font-family: var(--sans-tc);
  font-size: 15px;
  line-height: 2.1;
  max-width: none;
  margin: 0 0 80px;
  font-weight: 300;
  text-wrap: pretty;
  line-break: strict;
}
.resume-main .intro-text strong { font-weight: 500; }
.resume-main .intro-text-tight { margin-bottom: 28px; }
.resume-main .work-h3 { margin-top: 80px; }

.work-item { display: grid; grid-template-columns: 110px 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid var(--rule); }
.work-item:last-child { border-bottom: 1px solid var(--rule); }
.work-item .yr-block { font-family: var(--sans); }
.work-item .yr-block .yr { font-size: 24px; font-weight: 300; letter-spacing: -0.01em; }
.work-item .yr-block .period { font-size: 12px; letter-spacing: 0.16em; color: var(--muted); margin-top: 8px; }
.work-item .body .role-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 14px; }
.work-item .body .role { font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; }
.work-item .body .co { font-family: var(--sans-tc); font-size: 13px; color: var(--muted); }
.work-item .body .desc { font-family: var(--sans-tc); font-size: 15px; line-height: 1.95; color: var(--fg); font-weight: 300; max-width: 60ch; text-wrap: pretty; line-break: strict; }
.work-item .body ul { margin: 12px 0 0; padding-left: 14px; font-family: var(--sans-tc); font-size: 14.5px; line-height: 1.9; color: var(--muted); text-wrap: pretty; }
.work-item .body ul li { margin-bottom: 4px; }

/* ============ INDEX / PROJECTS LIST ============ */
.index-section {
  padding: 140px var(--pad-x) 80px;
  border-top: 1px solid var(--rule);
}
.index-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 80px; }
.index-head .lbl { font-family: var(--sans); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
.index-head h2 { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.01em; }
.index-head .ct { font-family: var(--sans); font-size: 12px; color: var(--muted); letter-spacing: 0.18em; }

.proj-list { display: flex; flex-direction: column; }
.proj-row {
  display: grid;
  grid-template-columns: 80px 1fr clamp(360px, 30vw, 500px);
  gap: 48px;
  padding: 36px 0;
  border-top: 1px solid var(--rule);
  cursor: pointer;
  align-items: start;
  transition: padding .35s ease;
}
.proj-row:last-child { border-bottom: 1px solid var(--rule); }
.proj-row:hover { padding-left: 16px; }
.proj-row:hover .proj-cover { transform: scale(1.02); }
.proj-row:hover .ttl-block .name { color: var(--accent); }
.proj-row .yr { font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: 0.05em; padding-top: 6px; }
.proj-row .ttl-block .num { font-family: var(--sans); font-size: 12px; letter-spacing: 0.22em; color: var(--muted); margin-bottom: 10px; display: flex; gap: 14px; align-items: baseline; text-transform: uppercase; }
.proj-row .ttl-block .num .sep { letter-spacing: 0; opacity: 0.6; }
.proj-row .ttl-block .num .company { font-family: var(--sans-tc); letter-spacing: 0.04em; text-transform: none; font-size: 12px; }
.proj-row .ttl-block .name { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.25; letter-spacing: 0.01em; transition: color .25s ease; }
.proj-row .ttl-block .desc { font-family: var(--sans-tc); font-size: 15px; line-height: 1.95; font-weight: 300; color: var(--fg); max-width: 46ch; margin-top: 16px; text-wrap: pretty; line-break: strict; }
.proj-row .cover-wrap { aspect-ratio: 16 / 9; overflow: hidden; }
.proj-row .proj-cover {
  width: 100%; height: 100%;
  transition: transform .6s ease;
  --is-bg: #ece8df;
  --is-fg: #8a8780;
  --is-border: transparent;
}
.proj-row .arr { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; color: var(--muted); align-self: end; padding-bottom: 6px; }

/* ============ PERSONAL STUDIES (secondary) ============ */
/* Visually de-emphasized vs. the main WORKS index: smaller cards, muted tone,
   tighter top padding. */
.studies-section {
  padding: 64px var(--pad-x) 80px;
  border-top: 1px solid var(--rule);
}
.studies-section .index-head { margin-bottom: 20px; }
.studies-section .index-head h2 { font-size: clamp(26px, 3vw, 38px); color: var(--muted); display: flex; align-items: baseline; gap: 16px; }
.studies-section .index-head h2 .zh { font-family: var(--sans-tc); font-size: 14px; font-weight: 300; letter-spacing: 0.08em; color: var(--muted); }
.studies-section .studies-intro { max-width: 56ch; margin: 0 0 48px; font-family: var(--sans-tc); font-size: 14px; line-height: 1.8; color: var(--muted); }

.studies-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 28px;
}
.study-card { cursor: pointer; }
.study-cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 16px;
}
.study-cover .r2-img { aspect-ratio: 16 / 9; transition: transform .6s ease; }
.study-card:hover .study-cover .r2-img img,
.study-card:hover .study-cover .r2-img video { transform: scale(1.02); }
.study-meta .num { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
.study-meta .name { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.35; letter-spacing: 0.01em; color: var(--fg); }
.study-card:hover .study-meta .name { color: var(--accent); }
body.sans-head .studies-section .index-head h2,
body.sans-head .study-meta .name { font-weight: 400; letter-spacing: 0; }

/* ============ FOOTER ============ */
.footer {
  padding: 120px var(--pad-x) 64px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  border-top: 1px solid var(--rule);
  align-items: end;
}
.footer .big {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
  /* zh is a short fixed phrase that stays on one line; EN is a full sentence and
     must be allowed to wrap — a blanket nowrap overflowed at ~1280–1440px wide. */
  white-space: normal;
  text-wrap: balance;
}
.footer .big .en { display: block; white-space: normal; font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0.22em; color: var(--muted); margin-top: 22px; text-transform: uppercase; }
html[lang="zh"] .footer .big { white-space: nowrap; }
.footer .meta { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; color: var(--muted); text-align: right; text-transform: uppercase; line-height: 2; }
.footer .meta a:hover { color: var(--fg); }
.footer-open { margin-top: 40px; font-family: var(--sans-tc); font-size: 13px; line-height: 2.1; color: var(--fg); }
.footer-open > div { display: flex; align-items: baseline; gap: 14px; }
.footer-open .k { flex: none; min-width: 3.4em; white-space: nowrap; font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }

/* ============ PROJECT PAGE ============ */
.proj-page { min-height: 100vh; padding: 140px var(--pad-x) 120px; }

.proj-back { font-family: var(--sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 80px; }
.proj-back:hover { color: var(--fg); }
.proj-back .arr { transition: transform .25s; }
.proj-back:hover .arr { transform: translateX(-4px); }

.proj-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--rule);
}
.proj-head .left .num { font-family: var(--sans); font-size: 12px; letter-spacing: 0.26em; color: var(--muted); margin-bottom: 18px; }
.proj-head .left .yr { font-family: var(--serif); font-size: 64px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; margin-bottom: 24px; }
.proj-head .left .meta-rows { font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; line-height: 2.2; }
.proj-head .left .meta-rows b { color: var(--fg); font-weight: 500; letter-spacing: 0.06em; font-family: var(--sans-tc); text-transform: none; font-size: 13px; margin-left: 12px; }

.proj-head .right h1 { margin: 0 0 40px; font-family: var(--serif); font-weight: 600; font-size: clamp(40px, 5vw, 64px); line-height: 1.1; letter-spacing: -0.005em; }
.proj-head .right .desc { font-family: var(--sans-tc); font-size: 15px; line-height: 2.1; font-weight: 300; max-width: 78ch; text-wrap: pretty; line-break: strict; }
.proj-head .right .desc + .desc { margin-top: 16px; }

.proj-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  align-self: flex-start;
}
.proj-link-btn span:first-child { border-bottom: 1px solid var(--fg); padding-bottom: 2px; }
.proj-link-btn .arr { font-family: var(--serif); font-size: 14px; letter-spacing: 0; transition: transform .25s ease; }
.proj-link-btn:hover .arr { transform: translate(3px, -3px); }

/* NDA notice under a project title (set `nda: {zh,en}` on the project) —
   frames blurred media as deliberate and worth seeing live, not broken. */
.proj-nda {
  display: flex;
  /* center the badge against the whole note — on phones the note wraps to
     two lines and a first-line-aligned badge looks top-heavy (the note is a
     fixed short sentence, so it never grows past two lines) */
  align-items: center;
  gap: 12px;
  margin: -16px 0 36px;
  font-family: var(--sans-tc);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.proj-nda .tag {
  flex: none;
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 3px 7px;
}

/* Inline cross-link inside a content header block (e.g. → another project) */
.proj-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.proj-inline-link span:first-child { border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.proj-inline-link .arr { font-family: var(--serif); font-size: 14px; letter-spacing: 0; transition: transform .25s ease; }
.proj-inline-link:hover .arr { transform: translate(3px, 0); }

.proj-body { padding-top: 80px; display: flex; flex-direction: column; gap: 80px; }

.proj-figure { display: flex; flex-direction: column; gap: 18px; }
.proj-figure.full image-slot,
.proj-figure.tall image-slot,
.proj-figure.square image-slot { aspect-ratio: 16 / 9; }
.proj-figure image-slot {
  width: 100%;
  --is-bg: #ece8df;
  --is-fg: #8a8780;
  --is-border: transparent;
}
.proj-figure .cap {
  padding-top: 4px;
}
.proj-figure .cap .body { font-family: var(--sans-tc); font-size: 14.5px; letter-spacing: 0.02em; color: var(--fg); line-height: 1.85; max-width: 60ch; font-weight: 300; text-wrap: pretty; line-break: strict; }
.proj-figure .cap .body p { margin: 0; }
.proj-figure .cap .body p + p { margin-top: 12px; }

.proj-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.proj-grid-2 image-slot { aspect-ratio: 16 / 9; width: 100%; --is-bg: #ece8df; --is-fg: #8a8780; --is-border: transparent; }

.proj-figure.pair .pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.proj-figure.pair .pair-grid .r2-img { aspect-ratio: 1 / 1; }

.proj-figure.preview-grid .preview-grid-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.proj-figure.preview-grid .preview-grid-inner .r2-img { aspect-ratio: 16 / 9; }
@media (max-width: 720px) {
  .proj-figure.preview-grid .preview-grid-inner { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
/* On phones, skip the opening contact-sheet grid (used only by KeyShot Motion);
   每張圖下方仍會逐張完整呈現，合集在小螢幕上反而擁擠。 */
@media (max-width: 640px) {
  .proj-figure.preview-grid { display: none; }
}

/* Extra-long image inside a fixed 16:5 window — auto / drag / wheel scroll,
   with the scrollbar UI hidden. */
.proj-figure.scroll .proj-scroll-view {
  width: 100%;
  aspect-ratio: 16 / 5;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  cursor: grab;
  touch-action: pan-y;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge / IE */
}
.proj-figure.scroll .proj-scroll-view::-webkit-scrollbar { width: 0; height: 0; display: none; }
.proj-figure.scroll .proj-scroll-view:active { cursor: grabbing; }
.proj-figure.scroll .proj-scroll-view img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.proj-figure.youtube .yt-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.proj-figure.youtube .yt-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Inline system diagram — research workflow (recreated from Claude Design
   handoff 研究流程圖.dc.html). Warm-gray monochrome, exact spec values. */
.proj-figure.diagram .wf-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  font-family: var(--sans-tc);
}
.proj-figure.diagram .wf-stage {
  border-radius: 6px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.proj-figure.diagram .wf-stage--research {
  flex: 1.15;
  border: 1.5px dashed #c9c4ba;
  padding: 36px 28px 40px;
  background: transparent;
  align-items: flex-start;
}
.proj-figure.diagram .wf-stage--kb,
.proj-figure.diagram .wf-stage--proposal {
  flex: 1;
  border: 1.5px solid #2b2926;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.proj-figure.diagram .wf-stage--kb { background: #fff; }
.proj-figure.diagram .wf-stage--proposal { background: #2b2926; }

.proj-figure.diagram .wf-stage__title {
  font-size: 21px;
  font-weight: 700;
  color: #2b2926;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.proj-figure.diagram .wf-stage--proposal .wf-stage__title { font-size: 22px; color: #f7f5f0; }
.proj-figure.diagram .wf-stage__sub {
  font-size: 13px;
  font-weight: 400;
  color: #a39d92;
  margin-top: 8px;
  letter-spacing: 0.03em;
}
.proj-figure.diagram .wf-stage--kb .wf-stage__sub,
.proj-figure.diagram .wf-stage--proposal .wf-stage__sub { margin-top: 10px; }
.proj-figure.diagram .wf-stage--proposal .wf-stage__sub { color: #b0aba1; }

.proj-figure.diagram .wf-divider {
  align-self: stretch;
  height: 1px;
  background: #e4e0d8;
  margin: 24px 0 22px;
}
.proj-figure.diagram .wf-list { display: flex; flex-direction: column; gap: 13px; }
.proj-figure.diagram .wf-list__item {
  font-size: 16px;
  font-weight: 400;
  color: #4a463f;
  letter-spacing: 0.04em;
}

.proj-figure.diagram .wf-connector {
  flex: 0.55;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.proj-figure.diagram .wf-connector__label {
  font-size: 12px;
  font-weight: 400;
  color: #a39d92;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  white-space: nowrap;
}
.proj-figure.diagram .wf-connector__line { display: flex; align-items: center; width: 100%; }
.proj-figure.diagram .wf-connector__rule { flex: 1; height: 1px; background: #c9c4ba; }
.proj-figure.diagram .wf-connector__arrow {
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #c9c4ba;
}

@media (max-width: 760px) {
  .proj-figure.diagram .wf-flow { flex-direction: column; align-items: stretch; max-width: 380px; }
  .proj-figure.diagram .wf-stage { flex: none; width: 100%; }
  /* On the vertical (mobile) flow, lay the 長期研究 items out two-by-two so the
     dashed box doesn't grow into a tall single column. */
  .proj-figure.diagram .wf-stage--research .wf-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    width: 100%;
  }
  .proj-figure.diagram .wf-connector { flex: none; width: 100%; padding: 14px 0; }
  .proj-figure.diagram .wf-connector__line { flex-direction: column; height: 30px; width: auto; }
  .proj-figure.diagram .wf-connector__rule { flex: 1; width: 1px; height: auto; }
  .proj-figure.diagram .wf-connector__arrow {
    border-top: 7px solid #c9c4ba;
    border-bottom: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }
}

.proj-text-block {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  padding: 24px 0;
}
.proj-text-block .lbl { font-family: var(--sans); font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); padding-top: 6px; }
.proj-text-block h3 { margin: 0 0 18px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.3; text-wrap: balance; }
.proj-text-block p { margin: 0; font-family: var(--sans-tc); font-size: 15px; line-height: 2.05; font-weight: 300; max-width: 56ch; text-wrap: pretty; line-break: strict; }
.proj-text-block p + p { margin-top: 12px; }

.proj-next {
  margin-top: 120px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.proj-next .next-name { font-family: var(--serif); font-size: 22px; text-transform: none; letter-spacing: 0; color: var(--fg); font-weight: 400; }
.proj-next:hover .next-name { color: var(--accent); }

/* ============ R2Image ============ */
.r2-img {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: #fff;
  display: block;
}
.r2-img img,
.r2-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.r2-img-natural {
  aspect-ratio: auto;
  background: transparent;
  overflow: visible;
}
.r2-img-natural img,
.r2-img-natural video {
  height: auto;
  object-fit: initial;
}
.r2-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 12px;
  text-align: center;
}
.proj-row .cover-wrap .r2-img { aspect-ratio: 16 / 9; transition: transform .6s ease; }
.proj-row:hover .cover-wrap .r2-img img,
.proj-row:hover .cover-wrap .r2-img video { transform: scale(1.02); }
.hero-portrait .r2-img { aspect-ratio: auto; width: 100%; height: 100%; }

/* ============ Loading indicator ============ */
.r2-img { position: relative; }
.r2-img img,
.r2-img video { opacity: 1; transition: opacity .45s ease; }
.r2-img-loading img,
.r2-img-loading video { opacity: 0; }
.r2-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
  background: #fff;
}
.r2-loader-bar {
  position: relative;
  display: block;
  width: 92px;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.r2-loader-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: var(--fg);
  animation: r2-loader-slide 1.5s cubic-bezier(.65, .05, .36, 1) infinite;
}
.r2-loader-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.36em;
  color: var(--muted);
  text-transform: uppercase;
  padding-left: 0.36em;
}
@keyframes r2-loader-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(333.33%); }
}
@media (prefers-reduced-motion: reduce) {
  .r2-loader-bar::after { animation: none; opacity: 0.4; width: 100%; }
}

/* ============ NDA locked media (blurred file + interview reveal) ============ */
/* NDA lock overlay — a faint scrim over the whole tile with a soft gray note;
   purely visual (the reveal trigger is hidden in the header wordmark). */
.r2-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  pointer-events: none;
  background: rgba(248, 248, 248, 0.68);
}
/* Legibility comes from the near-opaque white scrim over the whole tile,
   so the note needs no box or halo — just a dark-enough gray. */
.r2-lock-txt {
  font-family: var(--sans-tc);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #3d3d3d;
}
.reveal-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  z-index: 4000;
  max-width: min(90vw, 460px);
  padding: 12px 18px;
  text-align: center;
  border-radius: 8px;
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
  font-family: var(--sans-tc);
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.reveal-toast.show { opacity: 1; transform: translate(-50%, 0); }

.proj-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 0;
}
.proj-loading.proj-loading-more { padding: 32px 0 8px; }

/* ============ utility ============ */
.dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--fg); vertical-align: middle; margin: 0 8px; }
.rule { height: 1px; background: var(--rule); width: 100%; }

/* ============ AUTOBIOGRAPHY PAGE ============ */
.autobio-page {
  min-height: 100vh;
  padding: 140px var(--pad-x) 120px;
}
.autobio-head {
  padding-bottom: 64px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 80px;
}
.autobio-head .lbl {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.autobio-head h1 {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.autobio-head h1 .en {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.26em;
  color: var(--muted);
  margin-top: 18px;
}
.autobio-lead {
  font-family: var(--sans-tc);
  font-size: 16px;
  line-height: 2;
  font-weight: 300;
  max-width: 72ch;
  margin: 0;
  color: var(--fg);
  text-wrap: pretty;
}

.autobio-body { display: flex; flex-direction: column; gap: 80px; }

.autobio-block {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  padding: 24px 0;
}
.autobio-block-side .num {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.26em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.autobio-block-side h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.autobio-block-main p {
  margin: 0 0 18px;
  font-family: var(--sans-tc);
  font-size: 15px;
  line-height: 2.05;
  font-weight: 300;
  max-width: 78ch;
  text-wrap: pretty;
  line-break: strict;
}
.autobio-block-main p.subtitle {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--fg);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 28px;
}
.autobio-block-main p.closing {
  font-weight: 400;
}
.autobio-block-main p:last-child { margin-bottom: 0; }
.autobio-quotes {
  list-style: none;
  padding: 0;
  margin: 8px 0 24px;
  border-left: 1px solid var(--rule);
}
.autobio-quotes li {
  font-family: var(--sans-tc);
  font-size: 15px;
  line-height: 1.95;
  font-weight: 300;
  color: var(--muted);
  padding: 6px 0 6px 20px;
  max-width: 72ch;
}

.autobio-foot {
  margin-top: 120px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}
.autobio-foot .proj-back { margin-bottom: 0; }

/* About page foot: back link on the left, résumé download on the right. */
.about-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* ===== Autobiography album (horizontal carousel) ===== */
.autobio-album {
  position: relative;
  margin: 8px 0;
}
.autobio-album-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
}
.autobio-album-track.dragging { cursor: grabbing; scroll-behavior: auto; }
.autobio-album-track::-webkit-scrollbar { display: none; }

.autobio-album-loading {
  position: relative;
  height: clamp(320px, 60vh, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #fff;
}
.autobio-album-slide {
  flex: 0 0 auto;
  height: clamp(320px, 60vh, 560px);
  scroll-snap-align: center;
}
.autobio-album-slide .r2-img {
  width: auto;
  height: 100%;
  pointer-events: none;
}
.autobio-album-slide .r2-img img,
.autobio-album-slide .r2-img video {
  width: auto;
  height: 100%;
  object-fit: contain;
}
.autobio-album-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 2;
}
.autobio-album-nav:hover { opacity: 1; }
.autobio-album-nav.prev { left: 8px; }
.autobio-album-nav.next { right: 8px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 60px; padding-top: 120px; }
  .resume { grid-template-columns: 1fr; gap: 56px; }
  .proj-row { grid-template-columns: 60px 1fr; gap: 24px; }
  .proj-row .cover-wrap, .proj-row .arr { grid-column: 2; }
  .studies-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .proj-head { grid-template-columns: 1fr; gap: 32px; }
  .footer { grid-template-columns: 1fr; }
  .footer .big { white-space: normal; }
  .footer .meta { text-align: left; }
  .proj-text-block { grid-template-columns: 1fr; gap: 16px; }
  .autobio-block { grid-template-columns: 1fr; gap: 24px; }
}

/* ============ MOBILE (<= 640px) ============ */
@media (max-width: 640px) {
  /* Global */
  /* --read-x: tight reading inset for body text on the project / autobio pages,
     matching the résumé column padding; images bleed past it to the screen edge. */
  :root { --pad-x: clamp(20px, 6vw, 44px); --read-x: 20px; }

  /* Hero intro (introduction band below the carousel) — align to the mobile
     home gutter (--mh-x) and tighten the type for the phone measure. The en
     greeting clause is longer than the phone measure, so let it wrap freely
     here instead of holding the nowrap clause chunks. */
  .hero-intro { padding: 34px var(--mh-x, 24px) 4px; }
  .hero-intro-greeting { font-size: 29px; line-height: 1.3; }
  .hero-intro-greeting .lc { display: inline; white-space: normal; }
  .hero-intro-slogan { font-size: 16px; line-height: 1.45; margin-top: 12px; }
  .hero-intro-desc { font-size: 14.5px; line-height: 1.7; margin-top: 14px; }

  /* Nav */
  .nav { padding: 14px 24px; }
  .nav-name .en { opacity: 1; font-size: 12px; letter-spacing: 0.16em; }
  .nav-right { gap: 14px; font-size: 10px; letter-spacing: 0.12em; }
  /* Collapse 中 / EN to a single switch key showing the target language. */
  .nav-lang { gap: 5px; padding-left: 14px; }
  .nav-lang-full { display: none; }
  .nav-lang-single { display: inline; }

  /* Hero */
  .hero { padding: 100px var(--pad-x) 56px; gap: 32px; }
  .hero-portrait { aspect-ratio: auto; max-width: 320px; margin: 0; }
  .hero-portrait .r2-img { aspect-ratio: 3 / 4; height: auto; }
  .hero-meta {
    position: static;
    margin-top: 16px;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 11px;
  }
  .hero-title { gap: 18px; }
  .hero-title h1 { font-size: 34px; }
  .hero-title h1 .en {
    margin-top: 14px;
    letter-spacing: 0.18em;
    white-space: normal;
  }

  /* Resume */
  .resume { padding: 80px var(--pad-x); gap: 40px; }
  .resume-side > section { margin-bottom: 36px; }
  .kv .row .k { width: 44px; }
  .skill-list li { padding: 6px 0; }
  .work-item { grid-template-columns: 1fr; gap: 12px; padding: 20px 0; }
  .work-item .yr-block .period { font-size: 11px; letter-spacing: 0.14em; }
  .work-item .body .role-row { flex-wrap: wrap; gap: 8px; }
  .work-item .body .desc { font-size: 14.5px; }
  .work-item .body ul { font-size: 14px; }
  .resume-main .intro-text { font-size: 14.5px; line-height: 1.95; margin-bottom: 56px; }
  .resume-main .work-h3 { margin-top: 56px; }

  /* Project Index */
  .index-section { padding: 80px var(--pad-x) 40px; }
  .index-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 40px;
  }
  .proj-list { gap: 8px; }
  .proj-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 0 28px;
  }
  .proj-row:hover { padding-left: 0; }
  .proj-row .cover-wrap { order: -1; aspect-ratio: 16 / 9; width: 100%; }
  .proj-row .yr {
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--muted);
    padding-top: 0;
  }
  .proj-row .ttl-block .name { font-size: 22px; }
  .proj-row .desc { max-width: none; }
  .proj-row .arr { display: none; }

  /* Footer */
  .footer { padding: 64px var(--pad-x) 40px; gap: 32px; }
  .footer .meta { line-height: 1.85; }

  /* Project Page — text keeps the tight reading inset; media bleeds full-width */
  .proj-page { padding: 100px var(--read-x) 72px; }
  .proj-back { margin-bottom: 40px; }
  .proj-head { padding-bottom: 48px; gap: 24px; }
  .proj-head .left .yr { font-size: 44px; }
  .proj-head .right h1 { font-size: 34px; margin-bottom: 28px; }
  .proj-head .right .desc { font-size: 14.5px; line-height: 1.95; }
  .proj-body { gap: 48px; padding-top: 48px; }
  /* Images break out to the screen edges; headers/captions stay inset. */
  .proj-figure > .r2-img,
  .proj-figure.scroll .proj-scroll-view,
  .proj-figure.pair .pair-grid,
  .proj-figure.youtube .yt-embed {
    width: calc(100% + var(--read-x) * 2);
    margin-left: calc(var(--read-x) * -1);
    margin-right: calc(var(--read-x) * -1);
  }
  .proj-figure.pair .pair-grid { grid-template-columns: 1fr; gap: 14px; }
  .proj-grid-2 { grid-template-columns: 1fr; gap: 14px; }
  .proj-text-block { gap: 12px; }
  .proj-text-block h3 { font-size: 22px; }
  .proj-next {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 80px;
  }
  .proj-next .next-name { font-size: 19px; }

  /* Autobiography — text keeps the tight reading inset; album bleeds full-width */
  .autobio-page { padding: 100px var(--read-x) 72px; }
  .autobio-head { padding-bottom: 40px; margin-bottom: 48px; }
  .autobio-head h1 { font-size: 34px; }
  .autobio-lead { font-size: 15.5px; }
  .autobio-body { gap: 48px; }
  .autobio-album {
    width: calc(100% + var(--read-x) * 2);
    margin-left: calc(var(--read-x) * -1);
    margin-right: calc(var(--read-x) * -1);
  }
  .autobio-block { gap: 16px; padding: 16px 0; }
  .autobio-block-side h2 { font-size: 22px; }
  .autobio-block-main p { font-size: 14.5px; line-height: 1.9; }
  .autobio-quotes li { padding-left: 16px; font-size: 14px; }
  .autobio-album-slide { height: clamp(220px, 42vh, 360px); }
  .autobio-album-loading { height: clamp(220px, 42vh, 360px); }
  .autobio-album-nav { width: 34px; height: 34px; font-size: 14px; }

  /* Tweaks Panel — boost specificity to win over JS-injected styles */
  body .twk-panel { width: calc(100vw - 32px); max-width: 320px; }
}

/* ============ MOBILE HOME (.mh — phone-first layout) ============ */
/* Rendered by <MobileHome> only at <= 640px, so these rules never collide with
   the desktop home markup. Recreated from the 手機首頁排版規劃 handoff. */
.mh { --mh-x: 24px; width: 100%; overflow: hidden; }
.mh section { position: relative; }
.mh-eyebrow {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.3em;
  color: var(--muted);
  text-transform: uppercase;
}

/* — Hero — */
.mh-hero { padding: 78px var(--mh-x) 0; }
.mh-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.3em;
  color: var(--muted);
  text-transform: uppercase;
}
.mh-portrait {
  width: calc(100% + var(--mh-x) * 2);
  margin: 0 calc(var(--mh-x) * -1);
}
.mh-portrait .r2-img { aspect-ratio: 4 / 5; width: 100%; }
.mh-portrait-meta {
  display: flex;
  gap: 18px;
  padding-top: 10px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--muted);
  text-transform: uppercase;
}
.mh-portrait-meta .on { color: var(--fg); }
.mh-hero-body { padding-top: 36px; }
.mh-name {
  margin: 0;
  font-family: var(--sans-tc);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.mh-status {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: var(--fg);
  text-transform: uppercase;
}
.mh-status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  margin: 0;
}
.mh-tag {
  margin: 26px 0 0;
  font-family: var(--sans-tc);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: 0.01em;
  color: var(--fg);
  text-wrap: pretty;
}

/* — Mobile carousel sizing + gutters — */
@media (max-width: 640px) {
  /* Back at the very top under the floating white nav. Uncropped on the phone:
     the full 16:9 stage is only ~210px tall there, so the intro right below
     sits inside the first screen anyway. */
  .hero-carousel { width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0; }
  .hc-arrow { display: none; }
}

/* — About — */
.mh-about { padding: 52px var(--mh-x) 0; }
.mh-about .mh-eyebrow { margin-bottom: 20px; }
.mh-about-text {
  margin: 0;
  font-family: var(--sans-tc);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 2.05;
  letter-spacing: 0.01em;
  color: var(--fg);
  text-wrap: pretty;
  /* Collapsed: show a teaser of the full intro (一點點), reveal the rest on 繼續閱讀 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.mh-about-text.is-open {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.mh-about-actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.mh-about-actions .mh-link { margin-left: auto; }
.mh-link {
  padding: 0;
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans-tc);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg);
  cursor: pointer;
}
.mh-link span:first-child { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.mh-link .arr { font-family: var(--sans); }

/* Inline "read more" toggle — used by About + each work item */
.mh-more {
  padding: 0;
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans-tc);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mh-more:hover { color: var(--fg); }
.mh-more .ic { font-family: var(--sans); font-size: 11px; }

/* — Résumé accordion — */
.mh-resume { padding: 52px 0 0; }
.mh-resume-label { padding: 0 var(--mh-x); margin-bottom: 18px; }
.mh-panel { border-top: 1px solid var(--rule); }
.mh-panel:last-child { border-bottom: 1px solid var(--rule); }
.mh-panel-head {
  width: 100%;
  padding: 20px var(--mh-x);
  background: none;
  border: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
}
.mh-panel-titles { display: flex; align-items: baseline; gap: 12px; }
.mh-panel-titles .zh {
  font-family: var(--sans-tc);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.mh-panel-titles .en {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.mh-panel-sign {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 300;
  color: var(--muted);
  width: 16px;
  text-align: center;
  flex: none;
}
.mh-panel-body { padding: 0 var(--mh-x) 12px; }

.mh-work-item { padding: 18px 0; border-top: 1px solid var(--rule); }
.mh-work-item:first-child { border-top: 0; }
.mh-work-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.mh-work-row .role { font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; }
.mh-work-row .period { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); white-space: nowrap; }
.mh-work-co { font-family: var(--sans-tc); font-size: 12px; letter-spacing: 0.02em; color: var(--muted); margin-bottom: 8px; }
.mh-work-note { font-family: var(--sans-tc); font-weight: 300; font-size: 13px; line-height: 1.85; color: #2a2a2a; text-wrap: pretty; }
.mh-work-bullets { margin: 10px 0 0; padding-left: 16px; font-family: var(--sans-tc); font-weight: 300; font-size: 12.5px; line-height: 1.8; color: var(--muted); text-wrap: pretty; }
.mh-work-bullets li { margin-bottom: 4px; }
.mh-work-item .mh-more { margin-top: 12px; }

.mh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 24px; }
.mh-chip { font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; color: var(--fg); border: 1px solid var(--rule); padding: 7px 14px; }
.mh-group-label { font-family: var(--sans); font-size: 10px; letter-spacing: 0.28em; color: var(--muted); margin-bottom: 14px; }
.mh-ai-row { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--rule); }
.mh-ai-row .n { font-family: var(--sans); font-size: 12.5px; font-weight: 500; width: 74px; flex: none; }
.mh-ai-row .use { font-family: var(--sans-tc); font-weight: 300; font-size: 12px; line-height: 1.6; color: var(--muted); }

.mh-edu-item { padding: 14px 0; border-top: 1px solid var(--rule); }
.mh-edu-item:first-child { border-top: 0; }
.mh-edu-item .yr { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 6px; }
.mh-edu-item .zh { font-family: var(--sans-tc); font-size: 13.5px; font-weight: 500; margin-bottom: 3px; }
.mh-edu-item .en { font-family: var(--sans); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }

.mh-award-row { padding: 14px 0; border-top: 1px solid var(--rule); display: flex; gap: 16px; }
.mh-award-row:first-child { border-top: 0; }
.mh-award-row .yr { font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); width: 38px; flex: none; padding-top: 2px; }
.mh-award-row .items { flex: 1; }
.mh-award-row .item { font-family: var(--sans-tc); font-size: 13px; line-height: 1.75; color: var(--fg); text-wrap: pretty; }
.mh-award-row .item em { font-style: normal; color: var(--accent); font-weight: 500; margin-left: 2px; }

.mh-contact-row { display: flex; gap: 16px; padding: 11px 0; border-top: 1px solid var(--rule); }
.mh-contact-row:first-child { border-top: 0; }
.mh-contact-row .k { font-family: var(--sans); font-size: 10px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; width: 52px; flex: none; padding-top: 3px; }
.mh-contact-row .v { font-family: var(--sans-tc); font-size: 13.5px; color: var(--fg); }

/* — Works — */
.mh-works { padding: 56px var(--mh-x) 0; }
.mh-works-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; }
.mh-works-eyebrow { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.3em; color: var(--muted); margin-bottom: 12px; }
.mh-works-title { margin: 0; font-family: var(--sans-tc); font-weight: 700; font-size: 32px; letter-spacing: 0.06em; line-height: 1; }
.mh-works-count { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.16em; color: var(--muted); }

.mh-proj-list { display: flex; flex-direction: column; }
.mh-proj { padding: 24px 0; border-top: 1px solid var(--rule); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mh-proj-cover { margin-bottom: 16px; }
.mh-proj-cover .r2-img { aspect-ratio: 16 / 10; }
.mh-proj-meta { display: flex; gap: 12px; align-items: baseline; font-family: var(--sans); font-size: 10px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; margin-bottom: 10px; }
.mh-proj-meta .no { color: var(--fg); }
.mh-proj-meta .org { letter-spacing: 0.04em; text-transform: none; font-family: var(--sans-tc); }
.mh-proj-zh { font-family: var(--sans-tc); font-size: 21px; font-weight: 400; line-height: 1.35; letter-spacing: 0.01em; text-wrap: balance; }

.mh-studies { margin-top: 8px; }
.mh-studies-head {
  padding: 22px 0 4px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.mh-studies-head .zh { font-family: var(--sans-tc); font-size: 13px; color: var(--fg); }
.mh-studies-head .ct { font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; color: var(--muted); }
.mh-studies-intro { margin: 12px 0 0; font-family: var(--sans-tc); font-size: 12px; line-height: 1.7; color: var(--muted); }
.mh-studies-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; padding-top: 18px; }
.mh-study { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mh-study-cover { margin-bottom: 12px; }
.mh-study-cover .r2-img { aspect-ratio: 16 / 10; }
.mh-study-zh { font-family: var(--sans-tc); font-size: 14px; font-weight: 400; line-height: 1.4; }

/* — Footer — */
.mh-footer { padding: 64px var(--mh-x) 48px; margin-top: 56px; border-top: 1px solid var(--rule); }
.mh-foot-lead { margin: 0 0 28px; font-family: var(--sans-tc); font-weight: 400; font-size: 28px; line-height: 1.35; letter-spacing: 0.01em; }
.mh-foot-open { margin-bottom: 40px; font-family: var(--sans-tc); font-size: 14px; line-height: 1.7; color: var(--fg); }
.mh-foot-open > div { margin-bottom: 16px; }
.mh-foot-open > div:last-child { margin-bottom: 0; }
.mh-foot-open .k { display: block; margin-bottom: 4px; font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.mh-foot-meta { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.06em; color: var(--muted); line-height: 2.2; }
.mh-foot-meta .hi { color: var(--fg); }
.mh-foot-meta .cpy { margin-top: 10px; }
.mh-foot-cv { margin-bottom: 40px; font-size: 14px; }

/* ============ ABOUT PAGE (dedicated résumé) ============ */
/* Reuses the .resume two-column layout, but the page wrapper owns the padding. */
.about-page {
  min-height: 100vh;
  padding: 140px var(--pad-x) 120px;
}
.about-page .resume {
  padding: 0;
  border-top: none;
}

/* Hero row — portrait on the left, oversized name + intro on the right. The row
   owns the divider/spacing that the standalone .autobio-head normally carries. */
.about-hero {
  display: flex;
  align-items: flex-start;
  gap: 72px;
  padding-bottom: 72px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 80px;
}
.about-hero-portrait {
  flex: none;
  width: 340px;
}
.about-hero-main {
  flex: 1;
  min-width: 0;
  padding-top: 6px;
}
.about-hero-main .lbl {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 22px;
}
.about-hero-name {
  margin: 0 0 32px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(54px, 7vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.02em;
}
.about-hero-name .sub {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 22px;
}
.about-hero-bio {
  font-family: var(--sans-tc);
  font-size: 15.5px;
  line-height: 2.05;
  font-weight: 300;
  color: var(--fg);
  max-width: 62ch;
  margin: 0 0 28px;
  text-wrap: pretty;
  line-break: strict;
}
@media (max-width: 860px) {
  .about-hero { flex-direction: column; gap: 36px; }
  .about-hero-portrait { width: 100%; max-width: 320px; }
  .about-hero-main { padding-top: 0; }
  .about-hero-name { font-size: clamp(48px, 11vw, 80px); }
}

/* Portrait at the top of the résumé sidebar — reserved slot; the R2Image inside
   shows its placeholder until /profile/about.{ext} is uploaded. */
.about-portrait .r2-img { aspect-ratio: 4 / 5; }
.about-portrait-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 10px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
}
.about-portrait-meta .on { color: var(--fg); }

/* Mobile About page — wraps the original .mh résumé accordions (.about-mh). */
.about-mh { padding-bottom: 64px; }
.about-mh-top { padding: 100px var(--mh-x) 0; }
.about-mh-top .proj-back { margin-bottom: 28px; }
.about-mh-top .mh-eyebrow { margin-bottom: 14px; }
.about-mh-h1 {
  margin: 0;
  font-family: var(--sans-tc);
  font-weight: 300;
  font-size: 46px;
  line-height: 1;
  letter-spacing: 0.06em;
}
.about-mh-portrait { padding: 28px var(--mh-x) 0; }
.about-mh-portrait .about-portrait { max-width: none; }
.about-mh-foot { padding: 36px var(--mh-x) 0; display: flex; flex-direction: column; gap: 24px; }
.about-mh-foot .proj-back { margin-bottom: 0; }
.about-mh-foot-cv { align-self: flex-start; }

@media (max-width: 900px) {
  /* Sidebar stacks full-width when the grid collapses; cap the portrait size. */
  .about-portrait { max-width: 320px; }
}

@media (max-width: 640px) {
  .about-page { padding: 100px var(--pad-x) 72px; }
}

/* ============ FULLSCREEN LIGHTBOX (phones) ============ */
/* Opened only from mobile taps (see media.jsx / project.jsx). `margin:auto` on
   the media centres it when it fits and lets a tall image overflow-scroll from
   the top without the flex clipping you'd get from align-items:center. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 8, 8, 0.95);
  overflow: hidden;   /* clip the horizontal slide track; vertical scroll lives on each cell */
  animation: lb-fade 0.18s ease;
}
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
/* One full-viewport cell per item. The cells form a horizontal track that slides
   via transform (see cellStyle in media.jsx); a tall image scrolls vertically
   within its own cell. touch-action pan-y keeps that vertical scroll native while
   horizontal drags are handled in JS for the finger-follow swipe. */
.lightbox-cell {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.lightbox-media {
  margin: auto;
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}
.lightbox-close {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 1001;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.lightbox-counter {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}