/* AIGC Laboratory — Mollie-style system (DESIGN.md), recoloured to a black / white / gray palette. */
:root {
  --paper: #ffffff;
  --ink: #000000;
  --near-black: #111111;
  --graphite: #595959;
  --soft-gray: #919191;
  --oat: #f5f5f4;          /* neutral take on Oat Surface */
  --oat-line: #ebebea;
  --fill: #111111;          /* filled pill (Ledger Brown → near black) */
  --panel: #0d0d0d;         /* Espresso Panel → graphite black */

  /* legacy aliases used by the admin screen */
  --vellum: var(--oat);
  --carbon: var(--near-black);
  --onyx: var(--panel);
  --mercury: var(--soft-gray);
  --line: var(--oat-line);

  --sans: "Inter", "Noto Sans TC", ui-sans-serif, system-ui, -apple-system, "PingFang TC", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans TC", monospace;

  --label: 11px;
  --eyebrow: 13px;
  --body-sm: 14px;
  --body: 16px;
  --sub: 18px;
  --heading: 32px;
  --h2: 56px;
  --display: 82px;

  --gutter: 40px;
  --max: 1360px;
  --gap: 32px;
  --section: 120px;
  --card-pad: 40px;
  --r-small: 8px;
  --r-body: 12px;
  --r-card: 16px;
  --r-media: 24px;
  --r-icon: 28px;
  --r-pill: 9999px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body);
  line-height: 1.6;
  letter-spacing: .01em;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--soft-gray); }
.graphite { color: var(--graphite); }

/* monospace labels */
.eyebrow, .label {
  font-family: var(--mono); font-size: var(--eyebrow); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0; line-height: 1.3; margin: 0;
}
.label { font-size: var(--label); font-weight: 400; letter-spacing: .01em; }
.label-bold { font-weight: 500; }

/* ---------- buttons: pills with text-roll hover ---------- */
.btn, .pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--r-pill);
  padding: 16px 24px; font-size: var(--body); font-weight: 500; line-height: 1.2; letter-spacing: -.0125em;
  cursor: pointer; white-space: nowrap; overflow: hidden; isolation: isolate;
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.btn { background: var(--fill); color: var(--paper); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.btn:hover { background: #2b2b2b; }
.btn.light, .pill { background: var(--oat); color: var(--ink); }
.btn.light:hover, .pill:hover { background: #e9e9e7; }
.pill.is-active, .pill.solid { background: var(--fill); color: var(--paper); }
.btn.on-dark { background: var(--paper); color: var(--ink); }
.btn.on-dark:hover { background: #e6e6e6; }
.btn:active, .pill:active { transform: scale(.97); }
.pill.sm, .btn.sm { padding: 10px 16px; font-size: var(--body-sm); }

/* label roll: the text slides up and a copy slides in from below */
.roll { display: inline-block; overflow: hidden; height: 1.2em; line-height: 1.2; vertical-align: top; }
.roll > span { display: block; transition: transform .45s var(--ease); }
.roll > span::after { content: attr(data-text); display: block; }
.btn:hover .roll > span, .pill:hover .roll > span, .link:hover .roll > span { transform: translateY(-50%); }

/* inline text link with growing underline + arrow nudge */
.link, .ghost {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--body-sm); font-weight: 500;
  padding: 4px 0; border-radius: 4px; background: none; border: 0; cursor: pointer;
  background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .45s var(--ease);
}
.link:hover, .ghost:hover { background-size: 100% 1px; }
.arr { display: inline-block; transition: transform .45s var(--ease); }
a:hover .arr, button:hover .arr { transform: translateX(4px); }

/* round icon control */
.icon-btn {
  width: 44px; height: 44px; border-radius: var(--r-icon); border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  background: var(--oat); color: var(--ink); transition: background-color .3s var(--ease), transform .3s var(--ease), opacity .3s;
}
.icon-btn:hover { background: var(--fill); color: var(--paper); }
.icon-btn:active { transform: scale(.94); }
.icon-btn:disabled { opacity: .35; pointer-events: none; }

/* ---------- nav: 54px paper bar ---------- */
.nav {
  position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  transition: transform .45s var(--ease), box-shadow .3s;
}
.nav.is-scrolled { box-shadow: 0 1px 0 var(--oat-line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); height: 54px; display: flex; align-items: center; gap: 40px; }
.nav-brand { font-size: 17px; font-weight: 700; letter-spacing: -.04em; }
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-links a {
  font-size: var(--body-sm); font-weight: 500; letter-spacing: -.023em; padding: 8px 12px; border-radius: var(--r-pill);
  color: var(--graphite); transition: background-color .25s, color .25s;
}
.nav-links a:hover { background: var(--oat); color: var(--ink); }
.nav-links a.is-active { color: var(--ink); }
.nav-cta { display: flex; gap: 8px; align-items: center; }
.nav-cta .btn { padding: 10px 16px; font-size: var(--body-sm); }
.nav-toggle { display: none; }
.nav-links .en { display: none; }

/* ---------- hero: full-bleed video + oversized wordmark ---------- */
.nav.is-fixed { position: fixed; left: 0; right: 0; }
.nav.over-hero { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--paper); }
.nav.over-hero .nav-links a { color: rgba(255,255,255,.75); }
.nav.over-hero .nav-links a:hover { background: rgba(255,255,255,.12); color: var(--paper); }
.nav.over-hero .nav-links a.is-active { color: var(--paper); }
.nav.over-hero .nav-cta .btn { background: var(--paper); color: var(--ink); }
.nav.over-hero .icon-btn { background: rgba(255,255,255,.14); color: var(--paper); }
.hero-frame {
  position: relative; height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden; background: var(--panel); color: var(--paper);
}
.hero-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-copy { position: absolute; left: clamp(16px, 2.6vw, 48px); right: clamp(16px, 2.6vw, 48px); bottom: clamp(20px, 3vw, 44px); z-index: 2; }
.hero-display {
  margin: 0 0 0 -.04em; font-weight: 700; font-size: clamp(48px, 11.2vw, 240px); line-height: .9; letter-spacing: -.045em; white-space: nowrap;
}
.scroll-cue {
  position: absolute; z-index: 2; right: clamp(16px, 2.6vw, 48px); bottom: clamp(24px, 3.4vw, 52px);
  display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.8); transition: opacity .3s, color .3s;
}
.scroll-cue:hover { color: var(--paper); }
.scroll-cue .arr { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 15px; }
.scroll-cue .arr { animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.nav.is-scrolled ~ main .scroll-cue { opacity: 0; }

/* ---------- intro (Mollie hero text composition) ---------- */
.lead-row { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px 80px; align-items: end; }
.display {
  margin: 20px 0 0; font-weight: 400; font-size: clamp(44px, 5.7vw, var(--display)); line-height: 1; letter-spacing: -.029em;
}
.rotator { display: inline-grid; vertical-align: bottom; overflow: hidden; height: 1.1em; margin-bottom: -.1em; }
.rotator > span { grid-area: 1 / 1; padding-bottom: .1em; white-space: nowrap; transition: transform .7s var(--ease), opacity .7s var(--ease); transform: translateY(100%); opacity: 0; }
.rotator > span.is-on { transform: none; opacity: 1; }
.rotator > span.is-out { transform: translateY(-100%); opacity: 0; }
/* headline column sizes to its widest rotating phrase; copy + buttons stay on the right */
.lead-row.stacked { grid-template-columns: max-content minmax(280px, 1fr); gap: 40px 64px; }
.lead-row.stacked .lead-side { justify-self: end; max-width: 440px; }
#intro .display { font-size: clamp(40px, 5vw, 72px); }
.lead-side p { margin: 0 0 24px; color: var(--graphite); font-size: var(--body); line-height: 1.3; max-width: 440px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- sections ---------- */
.section { padding: var(--section) 0 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.section-title { font-weight: 400; font-size: clamp(32px, 3.9vw, var(--h2)); line-height: 1.1; letter-spacing: -.02em; margin: 16px 0 0; max-width: 820px; }
.section-title.one-line { max-width: none; white-space: nowrap; }
.small-title { font-size: var(--sub); font-weight: 600; letter-spacing: -.022em; margin: 0; }
.center-strip { text-align: center; color: var(--soft-gray); margin-bottom: 32px; }

/* tool grid: 2 × 5 cells in a rounded frame */
.cell-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--oat-line);
  border: 1px solid var(--oat-line); border-radius: var(--r-card); overflow: hidden;
}
.cell {
  background: var(--paper); padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: var(--body-sm); font-weight: 500; transition: background-color .3s;
}
.cell:hover { background: var(--oat); }
.cell .n { font-family: var(--mono); font-size: var(--label); color: var(--soft-gray); }

/* feature cards (oat) */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.feature {
  background: var(--oat); border-radius: var(--r-card); padding: var(--card-pad) var(--card-pad) 0;
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
}
.feature h3 { font-weight: 400; font-size: var(--heading); line-height: 1.1; letter-spacing: -.02em; margin: 16px 0 12px; }
.feature p { color: var(--graphite); margin: 0 0 16px; max-width: 520px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feature .media { margin-top: 32px; border-radius: var(--r-body) var(--r-body) 0 0; aspect-ratio: 16 / 9; }

/* thumbnails / media */
.thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-card); background: var(--oat); }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
/* Hairline frame over project images so white artwork doesn't melt into the page. */
.thumb::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .1);
}
a:hover .thumb img, a:hover .media img { transform: scale(1.04); }
.thumb-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.thumb-empty span { font-family: var(--mono); font-size: var(--label); text-transform: uppercase; color: var(--soft-gray); }
.feature .thumb { background: #e9e9e7; }

/* work cards */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 10px; }
.work-card { display: flex; flex-direction: column; min-width: 0; }
.work-card .meta { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 6px; color: var(--soft-gray); }
.work-card h3 { font-weight: 500; font-size: var(--sub); line-height: 1.3; letter-spacing: -.022em; margin: 0; }
.work-card .more { margin-top: 4px; color: var(--graphite); font-size: var(--body-sm); }

/* carousel */
.carousel { position: relative; }
.track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 20px) / 3); gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; padding-bottom: 4px;
}
.track::-webkit-scrollbar { display: none; }
.track > * { scroll-snap-align: start; }
.carousel-ctrl { display: flex; gap: 8px; }

/* dark contained panel */
.panel-dark { background: var(--panel); color: var(--paper); border-radius: var(--r-media); padding: clamp(28px, 5vw, 72px); }
.panel-dark .section-title { color: var(--paper); }
.panel-dark .eyebrow { color: rgba(255,255,255,.6); }
.panel-dark .post-list { border-top-color: rgba(255,255,255,.14); }
.panel-dark .post-row { border-bottom-color: rgba(255,255,255,.14); }
.panel-dark .post-row:hover { background: rgba(255,255,255,.06); }
.panel-dark .post-row .muted { color: rgba(255,255,255,.5); }
.panel-dark .post-row .go { background: rgba(255,255,255,.1); color: var(--paper); }
.panel-dark .post-row:hover .go { background: var(--paper); color: var(--ink); }

/* post list */
.post-list { border-top: 1px solid var(--oat-line); }
.post-row {
  display: grid; grid-template-columns: 110px 130px 1fr 110px 44px; gap: 20px; align-items: center;
  padding: 22px 16px; margin: 0 -16px; border-bottom: 1px solid var(--oat-line); border-radius: var(--r-body);
  transition: background-color .3s var(--ease);
}
.post-row:hover { background: var(--oat); }
.post-row h3 { font-weight: 500; font-size: var(--sub); line-height: 1.3; letter-spacing: -.022em; margin: 0; }
.post-row .go {
  width: 44px; height: 44px; border-radius: var(--r-icon); background: var(--oat); display: flex; align-items: center; justify-content: center;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.post-row:hover .go { background: var(--fill); color: var(--paper); }
.post-row:hover .go .arr { transform: translateX(3px); }

/* statement + stats */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat { background: var(--oat); border-radius: var(--r-card); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; min-height: 200px; }
.stat .v { font-size: clamp(48px, 5.6vw, var(--display)); font-weight: 400; line-height: 1; letter-spacing: -.035em; }
.stat .l { color: var(--graphite); }
.stat .v { display: flex; }
.roll-digit { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.roll-col { display: flex; flex-direction: column; transition: transform 1.8s cubic-bezier(.16, 1, .3, 1); }
.roll-col > span { display: block; height: 1em; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- inner page header ---------- */
.page-head { padding: 72px 0 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 56px 0 40px; }

/* ---------- work detail ---------- */
.detail { padding: 48px 0 0; }
.crumbs { display: flex; gap: 12px; align-items: center; margin-bottom: 32px; color: var(--graphite); }
.detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px 64px; align-items: start; }
.detail-grid .thumb { border-radius: var(--r-media); }
/* Project pages show the full image at its own proportions. */
.detail-grid .thumb:has(img) { aspect-ratio: auto; background: none; }
.detail-grid .thumb img { height: auto; }
.detail-grid .thumb:hover img { transform: scale(1.04); }
.detail-title { font-weight: 700; font-size: 22px; line-height: 1.45; letter-spacing: 0; margin: 14px 0 18px; }
.detail-title.cjk { line-height: 1.45 !important; letter-spacing: .01em !important; }
.detail-text { color: var(--graphite); margin: 0 0 40px; white-space: pre-line; line-height: 1.5; }
.spec { border-top: 1px solid var(--oat-line); }
.spec-row { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--oat-line); font-size: var(--body-sm); align-items: center; }
.tool-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-list span { background: var(--oat); border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px; font-weight: 500; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--section); }
.pager a { background: var(--oat); border-radius: var(--r-card); padding: 28px; display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: background-color .35s var(--ease), color .35s var(--ease); }
.pager a:hover { background: var(--fill); color: var(--paper); }
.pager a + a { text-align: right; align-items: flex-end; }
.pager .t { font-size: var(--sub); font-weight: 500; line-height: 1.3; }

/* ---------- article ---------- */
.article { max-width: 760px; margin: 0 auto; }
.article-title { font-weight: 400; font-size: clamp(34px, 4.4vw, var(--h2)); line-height: 1.1; letter-spacing: -.025em; margin: 20px 0 32px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 16px 0; border-top: 1px solid var(--oat-line); border-bottom: 1px solid var(--oat-line); margin-bottom: 40px; color: var(--graphite); }
.article-body { font-size: 18px; line-height: 1.75; letter-spacing: -.01em; color: var(--near-black); }
.article-body p { margin: 0 0 1.4em; }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1.55fr; gap: 40px 80px; }
.about-card { background: var(--oat); border-radius: var(--r-card); padding: 32px; align-self: start; }
.about-photo {
  width: 176px; height: 176px; border-radius: 50%; overflow: hidden; margin-bottom: 28px; background: var(--oat-line); isolation: isolate;
  animation: photo-float 6s ease-in-out infinite; will-change: transform;
}
@keyframes photo-float {
  0%, 100% { transform: translateY(0); box-shadow: 0 14px 28px -18px rgba(0,0,0,.28); }
  50% { transform: translateY(-6px); box-shadow: 0 22px 34px -20px rgba(0,0,0,.22); }
}
@media (prefers-reduced-motion: reduce) { .about-photo { animation: none; } }
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.about-photo:hover img { transform: scale(1.06); }
.about-top { padding-top: 72px; }
.about-grid { align-items: stretch; }
.about-main { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-width: 0; }
.about-main .display { margin-top: 20px; }
.about-main .about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.about-main .about-intro p, .about-main .about-intro p:first-child { margin: 0; font-size: 16px; line-height: 1.85; letter-spacing: .02em; color: var(--graphite); }
.about-name { font-size: var(--heading); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; margin: 16px 0 4px; }
.about-intro p { margin: 0 0 1.2em; color: var(--graphite); line-height: 1.5; }
.about-intro p:first-child { color: var(--ink); font-size: clamp(22px, 2.3vw, var(--heading)); line-height: 1.2; letter-spacing: -.02em; }
.list-lines { list-style: none; margin: 12px 0 0; padding: 0; }
.list-lines li { padding: 10px 0; border-bottom: 1px solid var(--oat-line); font-size: var(--body-sm); }
.list-lines li:last-child { border-bottom: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tags span { background: var(--paper); border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px; font-weight: 500; }

/* accordion résumé */
.acc { border-top: 1px solid var(--oat-line); }
.acc-item { border-bottom: 1px solid var(--oat-line); }
.acc-head {
  width: 100%; display: grid; grid-template-columns: 56px 1fr auto 44px; gap: 20px; align-items: center;
  padding: 22px 0; background: none; border: 0; cursor: pointer; text-align: left;
}
.acc-head .t { font-size: 22px; font-weight: 400; letter-spacing: -.02em; }
.acc-icon {
  width: 44px; height: 44px; border-radius: var(--r-icon); background: var(--oat);
  display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .45s var(--ease);
}
.acc-head:hover .acc-icon { background: #e9e9e7; }
.acc-item.open .acc-icon { background: var(--fill); color: var(--paper); transform: rotate(180deg); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.cv-rows { margin: 0 0 24px 76px; padding: 0; list-style: none; }
.cv-rows li { display: grid; grid-template-columns: 80px 1fr; gap: 20px; padding: 10px 0; font-size: var(--body-sm); border-top: 1px solid var(--oat-line); }
.cv-rows li .muted { font-family: var(--mono); font-size: 12px; }

/* ---------- footer: brand + contact, then three link columns ---------- */
.footer { margin-top: var(--section); padding: 0 12px 12px; }
.footer-inner { background: var(--oat); border-radius: var(--r-media); padding: 56px 0 22px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, max-content); gap: 32px 104px; align-items: start; padding-bottom: 48px; }
.footer-brand { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; color: var(--ink); }
.footer-slogan { margin: 14px 0 0; font-size: clamp(17px, 1.5vw, 20px); color: var(--graphite); letter-spacing: -.01em; line-height: 1.45; }
.footer-title { margin: 2px 0 14px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .04em; color: var(--soft-gray); line-height: 1.3; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer-col a { display: inline-block; padding: 5px 0; border-radius: 4px; font-size: 14px; line-height: 1.45; color: var(--near-black); }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-col a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.footer-bottom { padding-top: 18px; border-top: 1px solid #e3e3e1; color: var(--soft-gray); font-size: 12px; line-height: 1.5; letter-spacing: .01em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.qr-dialog { border: 0; border-radius: var(--r-card); padding: 28px; text-align: center; background: var(--paper); color: var(--ink); }
.qr-dialog::backdrop { background: rgba(0,0,0,.45); }
.qr-dialog img { display: block; width: 240px; height: 240px; margin: 16px auto 20px; }
.contact-links button { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; border-radius: var(--r-card); background: rgba(255,255,255,.08); font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease); }
.contact-links button:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: repeat(3, max-content); gap: 32px 72px; }
  .footer-id { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; }
}

/* ---------- coverflow carousel (Swiper) ---------- */
.reel { position: relative; flex: 1 1 auto; display: flex; align-items: center; min-height: 360px; margin: 8px 0; overflow: hidden; }
.cf-swiper { width: 100%; padding: 24px 0 48px !important; }
.cf-swiper .swiper-wrapper { align-items: center; }
.cf-swiper .swiper-slide { width: 300px; background: var(--oat); }
.cf-swiper .swiper-slide img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.cf-swiper .swiper-pagination { bottom: 8px !important; }
.cf-swiper .swiper-pagination-bullets-dynamic { left: 50% !important; }
.cf-swiper .swiper-slide img[loading] { min-height: 120px; }
.cf-swiper .swiper-pagination-bullet { width: 6px; height: 6px; margin: 0 3px !important; background: var(--ink) !important; opacity: .2; transition: opacity .3s, width .3s; }
.cf-swiper .swiper-pagination-bullet-active { opacity: 1; width: 18px; border-radius: 3px; }

/* ---------- "to top" button ---------- */
.to-top {
  position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 35;
  display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top-circle {
  position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); box-shadow: 0 6px 20px -8px rgba(0,0,0,.25), inset 0 0 0 1px var(--oat-line);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.to-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top-ring circle { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .15s linear; }
.to-top-arrow { font-size: 18px; line-height: 1; transition: transform .35s var(--ease); }
.to-top-label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.to-top:hover .to-top-circle { background: var(--fill); color: var(--paper); transform: translateY(-2px); }
.to-top:hover .to-top-ring circle { stroke: var(--paper); }
.to-top:hover .to-top-arrow { transform: translateY(-3px); }
.to-top:focus-visible { outline: none; }
.to-top:focus-visible .to-top-circle { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 760px) {
  .to-top-circle { width: 44px; height: 44px; }
  .to-top-label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .to-top, .to-top-circle, .to-top-arrow { transition: none; } }

/* ---------- states ---------- */
.empty { padding: 56px 0; border-top: 1px solid var(--oat-line); color: var(--soft-gray); font-size: var(--body-sm); }
.loading { padding: 200px var(--gutter); max-width: var(--max); margin: 0 auto; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .rotator > span, .roll > span, .acc-body { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  :root { --gutter: 24px; --card-pad: 28px; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .track { grid-auto-columns: calc((100% - 10px) / 2); }
  .cell-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .post-row { grid-template-columns: 100px 1fr 44px; }
  .post-row .c-cat, .post-row .c-name { display: none; }
}
@media (max-width: 900px) {
  .lead-row.stacked { grid-template-columns: 1fr; }
  .lead-row.stacked .lead-side { justify-self: start; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; --section: 88px; --card-pad: 22px; }
  .nav-inner { gap: 12px; }
  .nav-links {
    display: none; position: absolute; top: 54px; left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--paper); padding: 8px 16px 20px; border-bottom: 1px solid var(--oat-line);
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 22px; font-weight: 400; color: var(--ink); padding: 14px 0; border-radius: 0; border-bottom: 1px solid var(--oat-line); }
  .nav-links .en { display: inline; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft-gray); }
  .nav-links a.is-active .en { color: var(--ink); }
  .nav-links a:hover { background: none; }
  .nav-cta { margin-left: auto; }
  .nav-cta .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero-display { font-size: 15.6vw; white-space: normal; line-height: .88; }
  .hero-display .w { display: block; white-space: nowrap; }
  .scroll-cue { display: none; }
  .nav.over-hero.open, .nav.open { background: var(--paper); color: var(--ink); }
  .lead-row, .lead-row.stacked, .detail-grid, .about-grid, .feature-grid { grid-template-columns: 1fr; }
  .section-title.one-line { white-space: normal; }
  .reel { flex: none; min-height: 0; margin: 0 -16px; }
  .cf-swiper .swiper-slide { width: 220px; }
  .about-top { padding-top: 40px; }
  .about-main { order: -1; gap: 28px; }
  .about-main .about-intro { grid-template-columns: 1fr; gap: 16px; }
  .about-photo { width: 144px; height: 144px; }
  #intro .display { font-size: clamp(30px, 9.4vw, 44px); }
  .rotator { display: grid; height: auto; margin-bottom: 0; }
  .rotator > span { white-space: normal; }
  .work-grid { grid-template-columns: 1fr; }
  .track { grid-auto-columns: 82%; }
  .feature h3 { font-size: 26px; }
  .stat { min-height: 150px; padding: 20px; }
  .post-row { grid-template-columns: 1fr 44px; gap: 6px 16px; padding: 18px 12px; margin: 0 -12px; }
  .post-row .c-date { grid-column: 1 / -1; }
  .post-row h3 { font-size: 17px; }
  .page-head { padding-top: 48px; }
  .spec-row { grid-template-columns: 90px 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager a + a { text-align: left; align-items: flex-start; }
  .acc-head { grid-template-columns: 1fr auto 44px; gap: 12px; }
  .acc-head .n { display: none; }
  .acc-head .t { font-size: 19px; }
  .cv-rows { margin-left: 0; }
  .cv-rows li { grid-template-columns: 56px 1fr; gap: 12px; }
  .footer { padding: 0 8px 8px; }
  .footer-inner { padding-top: 40px; border-radius: 20px; }
  .footer-top { gap: 28px 20px; padding-bottom: 32px; }
  .footer-col a { padding: 8px 0; }
  .footer-title { margin-bottom: 6px; }
}

/* ---------- CJK reading rhythm: looser leading and neutral tracking for Chinese text ---------- */
p, li { line-height: 1.75; }
.lead-side p, .feature p, .detail-text, .about-intro p, .page-lead { line-height: 1.8; letter-spacing: .02em; }
.lead-side p { font-size: 16px; }
.article-body { line-height: 1.95; letter-spacing: .03em; }
.article-body p { margin-bottom: 1.6em; }
.cjk { line-height: 1.22 !important; letter-spacing: .01em !important; }
.display.cjk, .section-title.cjk { line-height: 1.18 !important; }
.post-row h3.cjk, .work-card h3.cjk, .pager .t.cjk { line-height: 1.5 !important; }
.eyebrow, .label, .btn, .pill, .nav-links a { line-height: 1.3; }
.roll { height: 1.3em; line-height: 1.3; }
.list-lines li, .cv-rows li { line-height: 1.6; }

/* ---------- about: full résumé, no accordion ---------- */
.stat-grid { grid-template-columns: repeat(3, 1fr); }
.cv-block { display: grid; grid-template-columns: 1fr 2fr; gap: 32px 80px; align-items: start; padding-top: 48px; border-top: 1px solid var(--oat-line); }
.cv-section { padding-top: 96px; }
.cv-head { position: sticky; top: 80px; }
.cv-head .section-title { font-size: clamp(28px, 3vw, 40px); }
.cv-rows { margin: 0; padding: 0; list-style: none; }
.cv-rows li { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 14px 0; font-size: 15px; border-top: 1px solid var(--oat-line); break-inside: avoid; }
.cv-rows li:first-child { border-top: 0; padding-top: 0; }
.cv-rows .yr { font-family: var(--mono); font-size: 12px; color: var(--soft-gray); padding-top: 3px; }
.cv-rows li[hidden] { display: none; }
.year-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; max-width: 360px; }
.year-filter .pill { padding: 8px 12px; font-size: 13px; font-family: var(--mono); }
.contact-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.contact-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.contact-links a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; border-radius: var(--r-card);
  background: rgba(255,255,255,.08); font-size: 15px; font-weight: 500; transition: background-color .3s var(--ease), color .3s var(--ease);
}
.contact-links a:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 1080px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .cv-block, .contact-panel, .contact-links { grid-template-columns: 1fr; }
  .cv-head { position: static; }
  .cv-section { padding-top: 64px; }
  .cv-rows li { grid-template-columns: 48px 1fr; gap: 12px; font-size: 14px; }
}