/* site */
@font-face {
  font-family: "Fraunces";
  src: url("./fraunces-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./inter-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0e0d0a;
  --bg-alt: #18170f;
  --panel: #1c1b15;
  --panel-2: #211f17;
  --panel-3: #171610;
  --border: #332e23;
  --border-strong: #6b5a42;
  --text: #f0e9d8;
  --text-dim: #b8b09f;
  --text-muted: #948d7d;
  --accent: #d4a373;
  --accent-bright: #e6c197;
  --good: #70cf91;
  --warn: #e8be69;
  --bad: #e8907c;
  --on-accent: #17120d;
  --backdrop: rgba(0, 0, 0, .68);
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent);
  --r-panel: 14px;
  --r-control: 8px;
  --shell: 1120px;
  --reading-scale: 1.75;
  --reading-scale-inverse: .5714286;
}

html[data-reading-scale="1"] { --reading-scale: 1; --reading-scale-inverse: 1; }
html[data-reading-scale="1.25"] { --reading-scale: 1.25; --reading-scale-inverse: .8; }
html[data-reading-scale="1.5"] { --reading-scale: 1.5; --reading-scale-inverse: .6666667; }
html[data-reading-scale="1.75"] { --reading-scale: 1.75; --reading-scale-inverse: .5714286; }
html[data-reading-scale="2"] { --reading-scale: 2; --reading-scale-inverse: .5; }

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 3%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--accent) 3%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, var(--bg), transparent 48%);
}

img { max-width: 100%; }

a { color: inherit; }

button,
input { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  box-shadow: var(--focus);
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 300;
  padding: 9px 13px;
  border-radius: var(--r-control);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
}

.skip-link:focus { top: 14px; }

.shell {
  width: min(calc(100% - 44px), var(--shell));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px);
}

.header-inner {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  text-decoration: none;
}

.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--accent);
  font-family: "Fraunces", serif;
  font-size: 18px;
}

.brand-copy {
  min-width: 0;
  display: grid;
  line-height: 1.15;
}

.brand-name {
  overflow: hidden;
  color: var(--text);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-role {
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.header-links,
.view-links,
.footer-links,
.actions,
.filter-row,
.tag-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.header-links a {
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 13px;
  text-decoration: none;
}

.header-links a:hover,
.header-links a.on { color: var(--accent-bright); }

.view-rail {
  margin-top: 22px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-3);
}

.view-label,
.eyebrow,
.micro,
.card-meta,
.timeline-date,
.status-pill,
.tag,
.fit-label,
.section-index,
.filter-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.view-label { color: var(--text-muted); }

.view-links a {
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
}

.view-links a:hover { color: var(--text); }

.view-links a[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent-bright);
}

.hero {
  min-height: 560px;
  padding-block: 52px 34px;
  display: grid;
  align-items: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(260px, .82fr);
  gap: 44px;
  align-items: center;
}

.hero-copy { max-width: 690px; }

.eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
}

h1,
h2,
.display {
  font-family: "Fraunces", serif;
  font-weight: 500;
  letter-spacing: -.025em;
}

h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(2.45rem, 5vw, 3.25rem);
  line-height: 1.08;
}

h1 span,
.accent-text { color: var(--accent-bright); }

.hero-lead {
  max-width: 690px;
  margin: 20px 0 0;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1.75;
}

.hero-context {
  margin: 13px 0 0;
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .04em;
}

.actions { margin-top: 25px; }

.button {
  min-height: 40px;
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}

.button:hover {
  border-color: var(--accent);
  color: var(--accent-bright);
  transform: translateY(-2px);
}

.button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.button.primary:hover {
  border-color: var(--accent-bright);
  background: var(--accent-bright);
  color: var(--on-accent);
}

.button.subtle { color: var(--text-dim); }

.portrait-card {
  position: relative;
  margin: 0;
  padding: 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-panel);
  background: var(--panel);
}

.portrait-card::before,
.portrait-card::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.portrait-card::before {
  left: -5px;
  top: -5px;
  border-left: 2px solid var(--accent);
  border-top: 2px solid var(--accent);
}

.portrait-card::after {
  right: -5px;
  bottom: -5px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}

.portrait-card img {
  width: 100%;
  height: min(410px, 52vh);
  display: block;
  border-radius: 9px;
  object-fit: cover;
  object-position: 50% 30%;
  filter: saturate(.78) contrast(1.03);
}

.portrait-card figcaption {
  padding: 10px 4px 1px;
  display: grid;
  gap: 2px;
  color: var(--text-muted);
  font-size: 11px;
}

.proof-strip {
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--panel-3);
  overflow: hidden;
}

.proof-item {
  padding: 15px 18px;
  border-left: 1px solid var(--border);
}

.proof-item:first-child { border-left: 0; }

.proof-item dt {
  color: var(--accent-bright);
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.proof-item dd {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.section {
  margin-block: 68px;
  scroll-margin-top: 82px;
}

.section-head {
  margin-bottom: 23px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr);
  gap: 34px;
  align-items: end;
}

.section-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-index { color: var(--text-muted); }

h2 {
  margin: 0;
  font-size: clamp(1.85rem, 3vw, 2.35rem);
  line-height: 1.18;
}

.section-intro {
  max-width: 520px;
  margin: 0;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.75;
}

h3,
h4 { line-height: 1.35; }

h3 {
  margin: 0;
  font-size: 19px;
}

h4 {
  margin: 0;
  font-size: 14px;
}

.feature-card,
.contact-card,
.restricted-band,
.fit-card,
.story-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--panel);
}

.feature-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
  overflow: hidden;
}

.feature-main { padding: 27px; }

.feature-side {
  padding: 25px;
  border-left: 1px solid var(--border);
  background: var(--panel-3);
}

.status-line {
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--good) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--good) 9%, transparent);
  color: var(--good);
}

.status-pill.restricted {
  border-color: color-mix(in srgb, var(--warn) 42%, transparent);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  color: var(--warn);
}

.status-pill.summary {
  border-color: var(--border-strong);
  background: var(--panel-2);
  color: var(--text-dim);
}

.date,
.metric {
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.feature-main h3 { font-size: 25px; }

.subhead {
  margin: 4px 0 15px;
  color: var(--accent-bright);
  font-size: 13px;
}

.feature-main > p:not(.subhead) {
  max-width: 720px;
  color: var(--text-dim);
}

.case-points,
.card-grid,
.capability-grid,
.fit-grid,
.story-steps,
.library-grid,
.split-grid,
.mini-grid {
  display: grid;
  gap: 16px;
}

.case-points {
  margin-top: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-point {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.case-point h4 { color: var(--text); }

.case-point p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.receipt-title {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.receipt { margin: 0; }

.receipt-row {
  padding: 10px 0;
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--border);
}

.receipt-row:first-child { border-top: 0; }

.receipt-row dt {
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.receipt-row dd {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
}

.receipt-note {
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

.card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.project-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--panel);
  color: inherit;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}

a.project-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.project-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  display: block;
  border-bottom: 1px solid var(--border);
  background: var(--panel-3);
  object-fit: cover;
}

.text-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-3);
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.text-thumb strong {
  color: var(--accent-bright);
  font-family: "Fraunces", serif;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -.03em;
  text-transform: none;
}

.project-copy {
  min-height: 0;
  padding: 17px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.card-meta { color: var(--text-muted); }

.project-copy h3 { margin-top: 8px; }

.project-copy p {
  margin: 9px 0 14px;
  color: var(--text-dim);
  font-size: 13px;
}

.project-foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
}

.project-foot .go { color: var(--accent); }

.capability-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.capability,
.fit-card,
.story-step,
.mini-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--panel);
}

.capability-num {
  color: var(--accent);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.capability h3,
.fit-card h3,
.story-step h3,
.mini-card h3 { margin-top: 10px; }

.capability p,
.fit-card p,
.story-step p,
.mini-card p {
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 13px;
}

.split-grid { grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); }

.timeline {
  padding-left: 22px;
  display: grid;
  gap: 22px;
  border-left: 2px solid var(--border);
}

.timeline-item { position: relative; }

.timeline-item::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.timeline-date { color: var(--text-muted); }

.timeline-item h3 { margin-top: 3px; }

.timeline-item p {
  margin: 5px 0 0;
  color: var(--text-dim);
  font-size: 13px;
}

.fact-panel {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--panel-3);
}

.fact-panel h3 { margin-bottom: 13px; }

.fact-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fact-list li {
  padding: 10px 0;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
}

.fact-list li:first-child { border-top: 0; }

.fact-list strong {
  display: block;
  color: var(--text);
  font-weight: 650;
}

.mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mini-card .micro { color: var(--accent); }

.restricted-band {
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  border-left: 3px solid var(--warn);
}

.restricted-band p {
  max-width: 720px;
  margin: 7px 0 0;
  color: var(--text-dim);
  font-size: 13px;
}

.contact-card {
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: 30px;
  align-items: center;
  border-color: var(--border-strong);
}

.contact-card p {
  max-width: 650px;
  margin: 10px 0 0;
  color: var(--text-dim);
}

.contact-side {
  display: grid;
  gap: 8px;
}

.site-footer {
  margin-top: 80px;
  padding-block: 22px 34px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
}

.footer-links a:hover { color: var(--accent-bright); }

/* Recruiter view */
.recruiter-hero { min-height: 490px; }

.fit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.fit-card { background: var(--panel-3); }

.fit-label { color: var(--accent); }

.evidence-list {
  display: grid;
  gap: 12px;
}

.evidence-row {
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panel);
}

.evidence-action {
  color: var(--accent-bright);
  font-weight: 650;
}

.evidence-row p {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
}

.evidence-row a {
  color: var(--accent);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-decoration: none;
  white-space: nowrap;
}

.skill-map {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.skill-map dt,
.skill-map dd {
  margin: 0;
  padding: 13px 16px;
  border-top: 1px solid var(--border);
}

.skill-map dt:nth-of-type(1),
.skill-map dd:nth-of-type(1) { border-top: 0; }

.skill-map dt {
  background: var(--panel-3);
  color: var(--text);
  font-weight: 650;
}

.skill-map dd {
  color: var(--text-dim);
  font-size: 13px;
}

/* General-audience view */
.plain-hero h1 { max-width: 820px; }

.story-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.story-step { position: relative; padding-top: 42px; }

.story-step .step-no {
  position: absolute;
  top: 14px;
  left: 18px;
  color: var(--accent);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.story-panel {
  padding: 24px;
  display: grid;
  grid-template-columns: 115px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.story-mark {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--accent);
  font-family: "Fraunces", serif;
  font-size: 33px;
}

.story-panel p {
  margin: 8px 0 0;
  color: var(--text-dim);
}

.story-panel + .story-panel { margin-top: 14px; }

/* Library */
.library-hero {
  min-height: auto;
  padding-bottom: 24px;
}

.library-tools {
  margin: 0 auto 30px;
  padding: 15px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--panel-3);
}

.search-wrap { position: relative; }

.search-wrap label {
  position: absolute;
  left: 13px;
  top: 50%;
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.search {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 82px;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--panel);
  color: var(--text);
}

.search::placeholder { color: var(--text-muted); }

.filter-button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
}

.filter-button:hover { color: var(--text); }

.filter-button.on {
  border-color: var(--border-strong);
  background: var(--panel);
  color: var(--accent-bright);
}

.library-summary {
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-muted);
  font-size: 12px;
}

.library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.library-grid .project-card[hidden] { display: none; }

.access-note {
  margin: 0;
  padding: 13px 15px;
  border-left: 3px solid var(--warn);
  background: var(--panel-3);
  color: var(--text-dim);
  font-size: 12px;
}

.empty-state {
  padding: 44px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-panel);
  color: var(--text-muted);
  text-align: center;
}

.empty-state .mark {
  display: block;
  margin-bottom: 8px;
  color: var(--border-strong);
  font-family: "JetBrains Mono", monospace;
  font-size: 27px;
}

.tag {
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
}

.tag.open { color: var(--good); }

.tag.locked { color: var(--warn); }

.tag.summary { color: var(--text-dim); }

.reading-scale-control {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 2147483000;
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font: 600 11px/1 "JetBrains Mono", monospace;
}

.reading-scale-label { padding: 0 6px; color: var(--text-muted); }

.reading-scale-btn {
  min-width: 40px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.reading-scale-btn:hover { border-color: var(--accent); }

.reading-scale-btn.on {
  background: var(--accent);
  color: var(--on-accent);
}

@media (min-width: 1200px) and (pointer: fine) {
  body[data-reading-scale-page] { zoom: var(--reading-scale); }
  .reading-scale-control { zoom: var(--reading-scale-inverse); }
}

@media (max-width: 900px) {
  .hero-grid,
  .feature-card,
  .section-head,
  .split-grid,
  .contact-card { grid-template-columns: 1fr; }

  .portrait-card { max-width: 450px; }

  .feature-side {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .card-grid,
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .contact-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px), (pointer: coarse) {
  body { font-size: 15px; }

  .shell { width: min(calc(100% - 30px), var(--shell)); }

  .header-inner { min-height: 56px; }

  .header-links a:not(.mobile-keep) { display: none; }

  .brand-role { display: none; }

  .view-rail {
    align-items: flex-start;
    flex-direction: column;
  }

  .view-links { width: 100%; }

  .view-links a { flex: 1 1 auto; text-align: center; }

  .hero {
    min-height: auto;
    padding-block: 38px 24px;
  }

  .hero-grid { gap: 28px; }

  h1 { font-size: clamp(2.25rem, 11vw, 3rem); }

  .hero-lead { font-size: 16px; }

  .portrait-card img { height: 370px; }

  .proof-strip,
  .card-grid,
  .capability-grid,
  .fit-grid,
  .story-steps,
  .library-grid,
  .case-points,
  .mini-grid { grid-template-columns: 1fr; }

  .proof-item {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .proof-item:first-child { border-top: 0; }

  .section { margin-block: 56px; scroll-margin-top: 68px; }

  .section-head { gap: 13px; }

  .feature-main,
  .feature-side,
  .contact-card { padding: 20px; }

  .feature-main h3 { font-size: 22px; }

  .restricted-band { grid-template-columns: 1fr; }

  .contact-side { grid-template-columns: 1fr; }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .evidence-row { grid-template-columns: 1fr; gap: 5px; }

  .skill-map { grid-template-columns: 1fr; }

  .skill-map dt,
  .skill-map dd { border-top: 1px solid var(--border); }

  .skill-map dt:first-of-type { border-top: 0; }

  .story-panel { grid-template-columns: 72px minmax(0, 1fr); }

  .story-mark { font-size: 24px; }

  .library-tools { grid-template-columns: 1fr; }

  .filter-row { gap: 4px; }

  .filter-button { flex: 1 1 auto; }

  .library-summary { flex-direction: column; gap: 4px; }

  .reading-scale-control { display: none !important; }
}

@media (max-width: 390px) {
  .brand-name { max-width: 185px; }
  .header-links { gap: 0; }
  .header-links a { padding-inline: 6px; }
  .button { width: 100%; }
  .actions { align-items: stretch; flex-direction: column; }
  .story-panel { grid-template-columns: 1fr; }
  .story-mark { width: 66px; }
}

@media print {
  :root { color-scheme: light; }

  body[data-reading-scale-page] {
    zoom: 1 !important;
    background: var(--text);
    color: var(--bg);
  }

  .site-header,
  .view-rail,
  .reading-scale-control,
  .library-tools,
  .no-print { display: none !important; }

  .section { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Complete v3: evidence-aware content and recruiter conversion */
.compact-rail {
  margin-top: 14px;
  padding-block: 7px;
}

.quick-facts {
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--panel-3);
  overflow: hidden;
}

.quick-facts > div {
  padding: 14px 16px;
  border-left: 1px solid var(--border);
}

.quick-facts > div:first-child { border-left: 0; }

.quick-facts dt,
.evidence-label,
.inline-label {
  color: var(--accent);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.quick-facts dd {
  margin: 4px 0 0;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.45;
}

.two-by-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.context-note,
.plain-boundary {
  margin: 15px 0 0;
  padding: 11px 14px;
  border-left: 3px solid var(--accent);
  background: var(--panel-3);
  color: var(--text-dim);
  font-size: 12px;
}

.evidence-split {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.evidence-block {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-3);
}

.evidence-block.verified { border-top: 2px solid var(--good); }
.evidence-block.personal { border-top: 2px solid var(--accent); }

.evidence-block h4 { margin-top: 9px; color: var(--text); }

.evidence-block p {
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 12.5px;
}

.evidence-block .evidence-label { margin-top: 0; }

.boundary {
  color: var(--text-muted) !important;
  font-size: 11.5px !important;
}

.boundary strong { color: var(--warn); }

.text-link {
  margin-top: 12px;
  display: inline-block;
  color: var(--accent-bright);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-decoration: none;
}

.research-case {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--panel);
}

.research-case h3 { margin-top: 12px; font-size: 25px; }

.research-title {
  max-width: 780px;
  margin: 5px 0 0;
  color: var(--text-dim);
  font-size: 14px;
}

.method-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid.four-up { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.action-between {
  justify-content: space-between;
  gap: 18px;
}

.action-between .micro { color: var(--text-muted); }

.about-copy {
  max-width: 690px;
  color: var(--text-dim);
  font-size: 16px;
}

.about-copy p { margin: 0 0 15px; }

.about-copy .drop::first-letter {
  padding-right: 7px;
  float: left;
  color: var(--accent);
  font-family: "Fraunces", serif;
  font-size: 3rem;
  line-height: .9;
}

.evidence-row-rich { grid-template-columns: 135px minmax(0, 1fr) auto; }
.evidence-row-rich h3 { margin-bottom: 7px; }
.evidence-row-rich p + p { margin-top: 8px; }
.inline-label { margin-right: 6px; }

.cv-callout {
  padding: 26px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: 30px;
  align-items: center;
  border: 1px solid var(--accent);
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 3%, var(--panel)));
}

.cv-callout p:not(.eyebrow) {
  max-width: 620px;
  margin: 9px 0 0;
  color: var(--text-dim);
}

/* Complete v3: accessible, compact Project Library */
.mobile-back { display: none; }

.library-page .site-header {
  position: relative;
  top: auto;
}

.library-tools.library-tools--sticky {
  position: sticky;
  top: 8px;
  z-index: 80;
  min-height: 56px;
  margin: 0 auto 26px;
  padding: 7px;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 7px;
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--panel-3) 96%, transparent);
  backdrop-filter: blur(12px);
}

.library-tools .search { height: 40px; }

.filter-trigger,
.filter-clear,
.dialog-close {
  min-height: 40px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--panel);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
}

.filter-trigger:hover,
.filter-clear:hover,
.dialog-close:hover {
  border-color: var(--accent);
  color: var(--accent-bright);
}

.filter-clear { color: var(--accent-bright); }

.filter-dialog {
  width: min(560px, calc(100% - 30px));
  max-width: none;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-panel);
  background: var(--panel);
  color: var(--text);
}

.filter-dialog::backdrop { background: var(--backdrop); }

.filter-dialog-panel { padding: 22px; }

.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.dialog-head h2 { font-size: 26px; }

.filter-dialog fieldset {
  margin: 22px 0 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.filter-dialog legend {
  padding: 0 7px;
  color: var(--accent);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.radio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.radio-grid label {
  min-height: 44px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
}

.radio-grid label:hover { border-color: var(--border-strong); color: var(--text); }
.radio-grid input { accent-color: var(--accent); }

.dialog-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.library-section { scroll-margin-top: 76px; }
.library-summary p { margin: 0; }

.library-more-wrap {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.library-more { min-width: 220px; }

@media (max-width: 1050px) {
  .card-grid.four-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .quick-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-facts > div:nth-child(odd) { border-left: 0; }
  .quick-facts > div:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .evidence-split,
  .cv-callout { grid-template-columns: 1fr; }
  .evidence-row-rich { grid-template-columns: 125px minmax(0, 1fr); }
  .evidence-row-rich > :last-child { grid-column: 2; }
}

@media (max-width: 680px), (pointer: coarse) {
  .two-by-two,
  .method-steps,
  .card-grid.four-up,
  .quick-facts,
  .evidence-split { grid-template-columns: 1fr; }

  .quick-facts > div {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .quick-facts > div:first-child { border-top: 0; }
  .research-case { padding: 20px; }
  .evidence-row-rich { grid-template-columns: 1fr; }
  .evidence-row-rich > :last-child { grid-column: auto; }
  .cv-callout { padding: 21px; }

  .library-page .header-links { display: none; }

  .mobile-back {
    min-height: 44px;
    padding: 9px 7px;
    display: inline-flex;
    align-items: center;
    color: var(--accent-bright);
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap;
  }

  .library-page .view-rail {
    padding: 6px;
    display: block;
    overflow: hidden;
  }

  .library-page .view-label { display: none; }

  .library-page .view-links {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .library-page .view-links::-webkit-scrollbar { display: none; }

  .library-page .view-links a {
    min-height: 44px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    white-space: nowrap;
  }

  .library-tools.library-tools--sticky {
    min-height: 44px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 5px;
  }

  .library-tools .search,
  .filter-trigger,
  .filter-clear { min-height: 44px; height: 44px; }

  .filter-trigger {
    width: 58px;
    max-width: 58px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    white-space: nowrap;
  }

  .filter-trigger::after {
    content: "Filter";
    color: var(--text-dim);
    font-size: 10px;
  }

  .library-page .library-grid .project-card[hidden] {
    display: none;
  }

  .filter-clear { padding-inline: 9px; }
  .filter-dialog-panel { padding: 18px; }
  .radio-grid { grid-template-columns: 1fr; }

  .library-page .library-grid .project-card {
    min-height: 150px;
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
  }

  .library-page .project-card > img,
  .library-page .project-card > .text-thumb {
    width: 94px;
    height: 100%;
    min-height: 150px;
    aspect-ratio: auto;
    border-right: 1px solid var(--border);
    border-bottom: 0;
    object-fit: cover;
  }

  .library-page .text-thumb {
    padding: 10px;
    align-items: flex-start;
    flex-direction: column;
  }

  .library-page .text-thumb strong { font-size: 22px; }
  .library-page .project-copy { padding: 12px; }
  .library-page .project-copy h3 { margin-top: 5px; font-size: 17px; }
  .library-page .project-copy p { margin: 6px 0 9px; font-size: 12px; line-height: 1.55; }
  .library-page .project-foot { padding-top: 8px; }
}

@media (max-width: 390px) {
  .library-page .brand-name { max-width: 128px; }
  .library-page .brand-mark { display: none; }
  .library-page .mobile-back { padding-inline: 4px; }
}

@media print {
  .filter-dialog,
  .library-more-wrap { display: none !important; }
}

/* reading-scale */
/* reading-scale-contract:v1 */
:root {
  --reading-scale: 1.75;
  --reading-scale-inverse: .5714286;
}

html[data-reading-scale="1"] { --reading-scale: 1; --reading-scale-inverse: 1; }
html[data-reading-scale="1.25"] { --reading-scale: 1.25; --reading-scale-inverse: .8; }
html[data-reading-scale="1.5"] { --reading-scale: 1.5; --reading-scale-inverse: .6666667; }
html[data-reading-scale="1.75"] { --reading-scale: 1.75; --reading-scale-inverse: .5714286; }
html[data-reading-scale="2"] { --reading-scale: 2; --reading-scale-inverse: .5; }

@media (min-width: 1200px) and (pointer: fine) {
  body[data-reading-scale-page] { zoom: var(--reading-scale); }
  .reading-scale-control { zoom: var(--reading-scale-inverse); }
}

@media (max-width: 1199px), (pointer: coarse) {
  .reading-scale-control { display: none !important; }
}

@media print {
  body[data-reading-scale-page] { zoom: 1 !important; }
  .reading-scale-control { display: none !important; }
}

/* v4 */
/* Portfolio complete v4 — warm editorial, multi-page information architecture */

body::before { display: none; }

.site-header {
  position: relative;
  top: auto;
  background: var(--bg);
  backdrop-filter: none;
}

.header-inner {
  min-height: 68px;
  padding-block: 10px;
  flex-wrap: wrap;
}

.header-links {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}

.header-links a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.header-links a[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent-bright);
}

.audience-strip {
  margin-top: 20px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-3);
}

.audience-strip > span,
.audience-links a {
  font-size: 11px;
}

.audience-strip > span {
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.audience-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.audience-links a {
  min-height: 34px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  color: var(--text-muted);
  text-decoration: none;
}

.audience-links a:hover,
.audience-links a[aria-current="page"] { color: var(--accent-bright); }

.audience-links a[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.home-hero {
  min-height: auto;
  padding-block: 54px 36px;
}

.home-hero .hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(250px, .66fr);
  gap: 58px;
  align-items: start;
}

.home-hero h1 { max-width: 700px; }

.identity-line {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
}

.identity-line span {
  margin-left: 8px;
  color: var(--accent-bright);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.current-chapter {
  margin: 20px 0 0;
  padding: 13px 15px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 15px;
  border-left: 2px solid var(--accent);
  background: var(--panel-3);
}

.current-chapter .current-label {
  grid-row: span 2;
  color: var(--accent);
  font: 600 10px/1.4 "JetBrains Mono", monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.current-chapter strong { font-size: 15px; }
.current-chapter span:last-child { color: var(--text-muted); font-size: 12px; }

.portrait-card {
  inline-size: min(100%, 22rem);
  justify-self: end;
  overflow: visible;
}

.portrait-card img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 933 / 1400;
  object-fit: contain;
  object-position: center;
  background: var(--panel-3);
}

.portrait-card figcaption { padding-top: 12px; }

.home-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.home-proof .proof-item:nth-child(1) { border-left: 0; }

.route-section { margin-top: 46px; }

.route-intro {
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
}

.route-intro p:last-child {
  max-width: 520px;
  margin: 0;
  color: var(--text-dim);
  font-size: 14px;
}

.route-grid {
  display: grid;
  grid-template-columns: 1.16fr 1fr 1fr;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border);
}

.route-card {
  min-height: 190px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-left: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}

.route-card:first-child { border-left: 0; }
.route-card.current { background: var(--panel-3); }
.route-card:hover { background: var(--panel); }
.route-card .route-no { color: var(--accent); font: 600 10px/1.3 "JetBrains Mono", monospace; letter-spacing: .12em; }
.route-card h3 { margin: 15px 0 7px; font-size: 20px; }
.route-card p { margin: 0; color: var(--text-dim); font-size: 13px; }
.route-card .go { margin-top: auto; padding-top: 16px; color: var(--accent-bright); font-size: 12px; font-weight: 650; }

.editorial-section {
  margin-block: 76px;
  padding-top: 25px;
  border-top: 1px solid var(--border);
}

.editorial-kicker {
  margin: 0 0 9px;
  color: var(--accent);
  font: 600 10px/1.4 "JetBrains Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.editorial-head {
  margin-bottom: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .62fr);
  gap: 34px;
  align-items: end;
}

.editorial-head p:last-child {
  margin: 0;
  color: var(--text-dim);
  font-size: 14px;
}

.editorial-head .text-link { justify-self: end; }

.evidence-mosaic {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  grid-template-rows: auto auto;
  gap: 12px;
}

.evidence-lead {
  grid-row: 1 / 3;
  padding: 28px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  background: var(--panel);
}

.evidence-lead h3 { margin: 14px 0 10px; font: 500 clamp(1.8rem, 3.2vw, 2.5rem)/1.12 "Fraunces", serif; }
.evidence-lead p { max-width: 680px; color: var(--text-dim); }
.evidence-lead .actions { margin-top: auto; padding-top: 26px; }

.evidence-tile {
  padding: 20px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: var(--panel-3);
}

.evidence-tile h3 { margin: 10px 0 6px; }
.evidence-tile p { margin: 0; color: var(--text-muted); font-size: 12px; }
.evidence-tile .text-link { margin-top: auto; padding-top: 16px; }

.path-preview {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 36px;
  align-items: stretch;
}

.path-copy {
  padding: 28px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  background: var(--panel);
}

.path-copy h2 { margin-bottom: 13px; }
.path-copy > p { color: var(--text-dim); }
.path-copy .actions { margin-top: auto; }

.path-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border);
}

.path-node {
  padding: 22px 16px;
  border-left: 1px solid var(--border);
}

.path-node:first-child { border-left: 0; }
.path-node.current { background: color-mix(in srgb, var(--accent) 8%, var(--panel-3)); }
.path-node time { color: var(--accent); font: 600 10px/1.4 "JetBrains Mono", monospace; letter-spacing: .08em; }
.path-node h3 { margin: 11px 0 7px; font-size: 16px; }
.path-node p { margin: 0; color: var(--text-muted); font-size: 11px; line-height: 1.55; }

.talk-preview-grid {
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 14px;
}

.talk-preview-feature,
.talk-preview-list { border: 1px solid var(--border); background: var(--panel-3); }

.talk-preview-feature {
  margin: 0;
  display: grid;
  grid-template-columns: 1.16fr .84fr;
}

.talk-preview-feature img {
  width: 100%;
  height: auto;
  align-self: center;
  display: block;
}

.talk-preview-feature figcaption { padding: 24px; display: flex; flex-direction: column; }
.talk-preview-feature h3 { margin: 13px 0 8px; font: 500 25px/1.2 "Fraunces", serif; }
.talk-preview-feature p { color: var(--text-dim); font-size: 13px; }
.talk-preview-feature .text-link { margin-top: auto; }

.talk-preview-list { display: grid; }

.talk-preview-item {
  padding: 20px;
  border-top: 1px solid var(--border);
}

.talk-preview-item:first-child { border-top: 0; }
.talk-preview-item h3 { margin: 8px 0 5px; font-size: 16px; }
.talk-preview-item p { margin: 0; color: var(--text-muted); font-size: 12px; }

.contact-sheet {
  display: grid;
  grid-template-columns: 1.18fr .82fr .82fr;
  gap: 12px;
}

.contact-sheet .project-card:first-child { grid-row: span 2; }
.contact-sheet .project-card:first-child img { aspect-ratio: auto; height: auto; object-fit: contain; }

.scene-coda {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 0;
  border: 1px solid var(--border-strong);
  background: var(--panel-3);
}

.scene-coda figure { margin: 0; }
.scene-coda img { width: 100%; height: auto; display: block; }
.scene-coda figcaption { padding: 8px 12px; color: var(--text-muted); font-size: 10px; }
.scene-copy { padding: 30px; display: flex; flex-direction: column; justify-content: center; }
.scene-copy h2 { margin: 0; font: 500 clamp(1.45rem, 2.6vw, 2.1rem)/1.3 "Fraunces", serif; }
.scene-copy p { color: var(--text-dim); }

.page-hero {
  padding-block: 54px 26px;
}

.page-hero .hero-lead { max-width: 760px; }

.page-deck {
  margin-top: 30px;
  padding-block: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font: 500 10px/1.5 "JetBrains Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.work-hero-grid,
.talks-hero-grid,
.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, .65fr);
  gap: 50px;
  align-items: center;
}

.type-poster {
  min-height: 330px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--border-strong);
  background: var(--panel);
}

.type-poster span { color: var(--accent); font: 600 10px/1.4 "JetBrains Mono", monospace; letter-spacing: .12em; }
.type-poster strong { font: 500 44px/1 "Fraunces", serif; color: var(--accent-bright); }
.type-poster p { margin: 0; color: var(--text-muted); font-size: 12px; }

.case-visual {
  margin: 0 0 20px;
  padding: 14px;
  border: 1px solid var(--border);
  background: var(--panel-3);
}

.case-visual img { width: 100%; height: auto; display: block; object-fit: contain; }
.case-visual figcaption { padding: 10px 2px 0; color: var(--text-muted); font-size: 10px; }

.work-sample-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.work-sample {
  display: grid;
  grid-template-columns: 180px 1fr;
  min-height: 210px;
  border: 1px solid var(--border);
  background: var(--panel-3);
  color: inherit;
  text-decoration: none;
}

.work-sample img { width: 100%; height: 100%; object-fit: contain; background: #12110e; }
.work-sample > span { padding: 22px; }
.work-sample h3 { margin: 10px 0 7px; }
.work-sample p { color: var(--text-muted); font-size: 12px; }

.talks-portrait {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border-strong);
  background: var(--panel);
}

.talks-portrait img { width: 100%; height: auto; display: block; object-fit: contain; }
.talks-portrait figcaption { padding: 11px 2px 0; color: var(--text-muted); font-size: 10px; }

.talk-feature-full {
  display: grid;
  grid-template-columns: 1.28fr .72fr;
  border: 1px solid var(--border-strong);
  background: var(--panel);
}

.talk-feature-full figure { margin: 0; border-right: 1px solid var(--border); }
.talk-feature-full img { width: 100%; height: auto; display: block; }
.talk-feature-full figcaption { padding: 9px 12px; color: var(--text-muted); font-size: 10px; }
.talk-feature-copy { padding: 30px; display: flex; flex-direction: column; }
.talk-feature-copy h2 { margin: 12px 0; }
.talk-feature-copy p { color: var(--text-dim); }
.talk-feature-copy .actions { margin-top: auto; }

.record-list {
  border-top: 1px solid var(--border-strong);
}

.record-row {
  padding: 22px 0;
  display: grid;
  grid-template-columns: 120px minmax(180px, .75fr) 1.4fr;
  gap: 22px;
  border-bottom: 1px solid var(--border);
}

.record-row time { color: var(--accent); font: 600 10px/1.5 "JetBrains Mono", monospace; }
.record-row h3 { margin: 0; font-size: 17px; }
.record-row p { margin: 0; color: var(--text-dim); font-size: 13px; }

.teaching-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border);
}

.teaching-principle { padding: 22px; border-left: 1px solid var(--border); }
.teaching-principle:first-child { border-left: 0; }
.teaching-principle h3 { margin: 10px 0 7px; }
.teaching-principle p { margin: 0; color: var(--text-muted); font-size: 12px; }

.gallery-strip {
  display: grid;
  grid-template-columns: 1.12fr .88fr .72fr;
  gap: 10px;
  align-items: start;
}

.gallery-strip figure { margin: 0; border: 1px solid var(--border); background: var(--panel-3); }
.gallery-strip img { width: 100%; height: auto; display: block; object-fit: contain; }
.gallery-strip figcaption { padding: 8px 10px; color: var(--text-muted); font-size: 10px; }

.about-hero-grid { grid-template-columns: minmax(0, .86fr) minmax(340px, 1.14fr); }
.about-hero-grid figure { margin: 0; border: 1px solid var(--border-strong); background: var(--panel-3); }
.about-hero-grid img { width: 100%; height: auto; display: block; }
.about-hero-grid figcaption { padding: 9px 12px; color: var(--text-muted); font-size: 10px; }

.journey-list { border-top: 1px solid var(--border-strong); }

.journey-stop {
  padding: 23px 0;
  display: grid;
  grid-template-columns: 120px minmax(210px, .8fr) 1.25fr;
  gap: 24px;
  border-bottom: 1px solid var(--border);
}

.journey-stop.current {
  margin-inline: -18px;
  padding-inline: 18px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.journey-stop time { color: var(--accent); font: 600 10px/1.5 "JetBrains Mono", monospace; letter-spacing: .06em; }
.journey-stop h3 { margin: 0; font-size: 18px; }
.journey-stop p { margin: 0; color: var(--text-dim); font-size: 13px; }

.focus-tracks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border);
}

.focus-track { padding: 19px 15px; border-left: 1px solid var(--border); }
.focus-track:first-child { border-left: 0; }
.focus-track strong { display: block; color: var(--accent-bright); font-size: 13px; }
.focus-track span { display: block; margin-top: 6px; color: var(--text-muted); font-size: 10px; line-height: 1.5; }

.beyond-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr .85fr;
  gap: 12px;
}

.beyond-feature,
.beyond-item-v4 { border: 1px solid var(--border); background: var(--panel-3); }
.beyond-feature { grid-row: span 2; }
.beyond-feature figure { margin: 0; }
.beyond-feature img { width: 100%; height: auto; display: block; }
.beyond-feature figcaption,
.beyond-item-v4 { padding: 20px; }
.beyond-feature h3,
.beyond-item-v4 h3 { margin: 9px 0 7px; }
.beyond-feature p,
.beyond-item-v4 p { margin: 0; color: var(--text-muted); font-size: 12px; }

.credential-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border);
}

.credential-ledger article { padding: 19px 16px; border-left: 1px solid var(--border); }
.credential-ledger article:first-child { border-left: 0; }
.credential-ledger strong { display: block; font-size: 13px; }
.credential-ledger span { display: block; margin-top: 5px; color: var(--text-muted); font-size: 10px; }

.site-footer { margin-top: 74px; }

.footer-inner-v4 {
  padding-block: 24px 80px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 24px;
}

.footer-statement strong { display: block; font-family: "Fraunces", serif; font-size: 20px; }
.footer-statement span { color: var(--text-muted); font-size: 10px; }
.footer-nav-groups { display: grid; gap: 9px; justify-items: end; }
.footer-nav-groups nav { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: flex-end; }
.footer-nav-groups a { color: var(--text-muted); font-size: 11px; text-decoration: none; }
.footer-nav-groups a:hover { color: var(--accent-bright); }
.footer-nav-groups .footer-audience::before { content: "Audience ·"; color: var(--accent); font: 600 9px/1.5 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }

.recruiter-page .hero,
.general-page .hero,
.library-page .library-hero { padding-top: 46px; }

.recruiter-page .view-rail,
.general-page .view-rail,
.library-page .view-rail { display: none; }

.library-page .site-header { position: relative; top: auto; }

@media (max-width: 1050px) {
  .home-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-proof .proof-item:nth-child(3) { border-top: 1px solid var(--border); border-left: 0; }
  .home-proof .proof-item:nth-child(4) { border-top: 1px solid var(--border); }
  .focus-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .focus-track:nth-child(odd) { border-left: 0; }
  .focus-track:nth-child(n+3) { border-top: 1px solid var(--border); }
  .focus-track:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .home-hero .hero-grid,
  .work-hero-grid,
  .talks-hero-grid,
  .about-hero-grid,
  .editorial-head,
  .path-preview,
  .talk-feature-full { grid-template-columns: 1fr; }

  .portrait-card { inline-size: min(100%, 28rem); justify-self: start; }
  .route-grid { grid-template-columns: 1fr; }
  .route-card { min-height: auto; border-top: 1px solid var(--border); border-left: 0; }
  .route-card:first-child { border-top: 0; }
  .evidence-mosaic { grid-template-columns: 1fr; grid-template-rows: auto; }
  .evidence-lead { grid-row: auto; }
  .path-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path-node:nth-child(odd) { border-left: 0; }
  .path-node:nth-child(n+3) { border-top: 1px solid var(--border); }
  .talk-preview-grid,
  .talk-preview-feature,
  .scene-coda { grid-template-columns: 1fr; }
  .talk-preview-feature img { border-bottom: 1px solid var(--border); }
  .contact-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-sheet .project-card:first-child { grid-row: auto; grid-column: 1 / -1; }
  .talk-feature-full figure { border-right: 0; border-bottom: 1px solid var(--border); }
  .work-sample-grid { grid-template-columns: 1fr; }
  .beyond-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beyond-feature { grid-row: auto; grid-column: 1 / -1; }
  .credential-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credential-ledger article:nth-child(odd) { border-left: 0; }
  .credential-ledger article:nth-child(n+3) { border-top: 1px solid var(--border); }
}

@media (max-width: 680px), (pointer: coarse) {
  .header-inner { align-items: flex-start; }
  .header-links {
    width: 100%;
    padding-bottom: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    overflow-x: visible;
  }
  .library-page .header-links { display: flex; }
  .header-links a,
  .header-links a:not(.mobile-keep) {
    min-height: 44px;
    display: inline-flex;
    justify-content: center;
    padding-inline: 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
  }
  .header-links a:last-child { grid-column: 1 / -1; }
  .library-page .header-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .audience-strip { align-items: flex-start; flex-direction: column; }
  .audience-links { width: 100%; }
  .audience-links a { min-height: 44px; flex: 1 1 auto; justify-content: center; }
  .home-hero { padding-top: 40px; }
  .home-hero .hero-grid { gap: 30px; }
  .portrait-card img { height: auto; }
  .home-proof { grid-template-columns: 1fr; }
  .home-proof .proof-item { border-top: 1px solid var(--border); border-left: 0; }
  .home-proof .proof-item:first-child { border-top: 0; }
  .route-intro { align-items: flex-start; flex-direction: column; }
  .editorial-section { margin-block: 58px; }
  .editorial-head { gap: 12px; }
  .editorial-head .text-link { justify-self: start; }
  .evidence-lead,
  .path-copy,
  .talk-feature-copy,
  .scene-copy { padding: 21px; }
  .path-rail { grid-template-columns: 1fr; }
  .path-node { border-top: 1px solid var(--border); border-left: 0; }
  .path-node:first-child { border-top: 0; }
  .talk-preview-feature { display: block; }
  .contact-sheet,
  .work-sample-grid,
  .beyond-grid,
  .credential-ledger,
  .focus-tracks { grid-template-columns: 1fr; }
  .contact-sheet .project-card:first-child,
  .beyond-feature,
  .focus-track:last-child { grid-column: auto; }
  .work-sample { grid-template-columns: 1fr; }
  .work-sample img { height: auto; }
  .record-row,
  .journey-stop { grid-template-columns: 1fr; gap: 7px; }
  .journey-stop.current { margin-inline: -10px; padding-inline: 10px; }
  .teaching-principles { grid-template-columns: 1fr; }
  .teaching-principle { border-top: 1px solid var(--border); border-left: 0; }
  .teaching-principle:first-child { border-top: 0; }
  .gallery-strip { grid-template-columns: 1fr; }
  .focus-track,
  .credential-ledger article { border-top: 1px solid var(--border); border-left: 0; }
  .focus-track:first-child,
  .credential-ledger article:first-child { border-top: 0; }
  .footer-inner-v4 { grid-template-columns: 1fr; }
  .footer-nav-groups { justify-items: start; }
  .footer-nav-groups nav { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}

@media print {
  .site-header,
  .audience-strip,
  .reading-scale-control { display: none !important; }
}

/* final */
/* Portfolio final — one front door, one recruiter route, four reading modes. */

:root {
  --final-paper: #171510;
  --final-paper-soft: #1d1a14;
  --final-rule: color-mix(in srgb, var(--accent) 24%, var(--border));
}

html[data-i18n-mode="zh-TW"] body,
html[data-i18n-mode="ms"] body {
  text-wrap: pretty;
}

.site-header {
  border-bottom-color: var(--final-rule);
}

.header-inner {
  row-gap: 8px;
}

.header-links a.recruiter-link {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent-bright);
}

.language-bar {
  min-height: 48px;
  padding-block: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
}

.language-block {
  display: flex;
  align-items: center;
  gap: 9px;
}

.language-label,
.language-note {
  color: var(--text-muted);
  font: 600 9px/1.4 "JetBrains Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.language-chip {
  min-width: 38px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font: 650 10px/1 "JetBrains Mono", monospace;
  cursor: pointer;
}

.language-chip:hover,
.language-chip:focus-visible {
  border-color: var(--accent);
  color: var(--accent-bright);
}

.language-chip[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent-bright);
}

.language-note {
  max-width: 500px;
  letter-spacing: .04em;
  text-align: right;
  text-transform: none;
}

.portrait-card {
  inline-size: min(100%, 25rem);
  padding: clamp(16px, 2.4vw, 28px) clamp(16px, 3vw, 34px) 14px;
  display: grid;
  place-items: center;
  overflow: visible;
  border-radius: 2px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 42%),
    var(--final-paper-soft);
}

.portrait-card img {
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: min(70svh, 34rem);
  margin-inline: auto;
  aspect-ratio: auto;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  filter: saturate(.88) contrast(1.015);
}

.portrait-card figcaption {
  width: 100%;
  margin-top: 12px;
  padding: 12px 2px 0;
  border-top: 1px solid var(--border);
}

.front-door-note {
  margin-top: 38px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%);
}

.front-door-note p { margin: 0; }
.front-door-note strong { display: block; margin-bottom: 4px; color: var(--text); }
.front-door-note span { color: var(--text-dim); font-size: 12px; }

.compat-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.compat-card {
  width: min(calc(100% - 36px), 720px);
  padding: clamp(28px, 6vw, 58px);
  border: 1px solid var(--border-strong);
  background: var(--panel);
}

.compat-card h1 { margin: 10px 0 12px; }
.compat-card p { color: var(--text-dim); }

.footer-nav-groups .footer-audience::before {
  content: "Shortcut ·";
}

html[data-i18n-mode="zh-TW"] .footer-nav-groups .footer-audience::before { content: "快速入口 ·"; }
html[data-i18n-mode="ms"] .footer-nav-groups .footer-audience::before { content: "Pintasan ·"; }

@media (max-width: 900px) {
  .language-bar { align-items: flex-start; }
  .language-note { max-width: 330px; }
  .portrait-card { justify-self: center; }
}

@media (max-width: 680px), (pointer: coarse) {
  .language-bar {
    padding-block: 10px;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .language-block { justify-content: space-between; }
  .language-chip { min-width: 44px; min-height: 44px; }
  .language-note { max-width: none; text-align: left; }

  .portrait-card {
    inline-size: min(88vw, 23rem);
    justify-self: center;
  }

  .portrait-card img { max-block-size: 68svh; }

  .front-door-note {
    grid-template-columns: 1fr;
    align-items: start;
  }

  html[data-i18n-mode="zh-TW"] .filter-trigger::after { content: "篩選"; }
  html[data-i18n-mode="ms"] .filter-trigger::after { content: "Penapis"; }

  .header-links a:last-child { grid-column: auto; }
  .header-links a.recruiter-link { grid-column: 1 / -1; }
}

@media (max-width: 390px) {
  .library-page .brand-mark { display: grid; }
  .library-page .brand-name {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }
}

@media print {
  .language-bar { display: none !important; }
}

/* redesign */
/* Warm-editorial redesign. Template-derived palette, local fonts, native controls. */
:root {
  --r-panel: 4px; --r-control: 4px;
  --rule: color-mix(in srgb, var(--accent) 28%, var(--border));
  --surface-quiet: color-mix(in srgb, var(--panel) 60%, var(--bg));
}
body.redesigned { font-family: "Inter", "PingFang TC", "Microsoft JhengHei", sans-serif; }
.redesigned .shell { width: calc(100% - 64px); max-width: 1120px; }
.redesigned h1, .redesigned h2 { font-family: "Fraunces", "Songti TC", Georgia, serif; font-weight: 500; }
.redesigned h1 { letter-spacing: -.04em; }
.redesigned h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.2; letter-spacing: -.025em; }
.redesigned h3 { font-size: 19px; line-height: 1.35; font-weight: 600; }
.redesigned p { text-wrap: pretty; }
.redesigned .eyebrow, .redesigned .micro { font-family: "JetBrains Mono", monospace; font-size: 10px; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; }
.redesigned .eyebrow { color: var(--accent); }
.redesigned .micro { color: var(--text-muted); }
.redesigned .button { min-height: 42px; padding: 10px 16px; border-radius: 4px; font-size: 12px; line-height: 1.5; }
.redesigned .actions { align-items: center; gap: 18px; margin-top: 24px; }
.redesigned .text-link { font-size: 12px; line-height: 1.6; font-weight: 600; text-decoration: none; text-underline-offset: 5px; }
.redesigned .text-link:hover { color: var(--accent-bright); text-decoration: underline; }
.redesigned .button:hover { transform: translateY(-2px); }

/* Navigation belongs to the page flow; mobile menu is a deliberate disclosure. */
.masthead { border-bottom: 1px solid var(--rule); }
.masthead-inner { min-height: 64px; display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.wordmark { font-size: 16px; font-weight: 600; letter-spacing: -.04em; text-decoration: none; white-space: nowrap; }
.wordmark span { margin-left: 8px; color: var(--accent); font: 500 9px "JetBrains Mono", monospace; letter-spacing: 0; }
.main-navigation { display: flex; align-items: center; gap: 22px; }
.main-navigation a { padding: 8px 0; font-size: 11px; text-decoration: none; color: var(--text-dim); }
.main-navigation a:hover, .main-navigation a[aria-current="page"] { color: var(--accent-bright); }
.main-navigation .nav-recruiter { border-left: 1px solid var(--rule); padding-left: 20px; color: var(--accent); }
.menu-toggle { display: none; background: transparent; border: 1px solid var(--rule); border-radius: 4px; color: var(--text); min-height: 44px; padding: 8px 14px; cursor: pointer; }
.utility-bar { display: flex; justify-content: space-between; align-items: center; padding-block: 8px; gap: 16px; }
.utility-contact { font-size: 10px; color: var(--text-dim); text-decoration: none; }
.utility-contact:hover { color: var(--accent); }
.utility-bar .language-label { font-size: 9px; }
.utility-bar .language-chip { min-height: 28px; min-width: 32px; padding: 4px 6px; border-radius: 2px; font-size: 9px; }

/* One person, one proposition, then the work. Portrait has no crop or clipping box. */
.arrival { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(190px,.75fr); align-items: center; gap: 56px; padding-block: 36px 48px; }
.arrival-copy .eyebrow { margin: 0 0 16px; }
.arrival h1 { margin: 0; font-size: clamp(56px, 6.5vw, 84px); line-height: .98; letter-spacing: -.055em; }
.name-period { color: var(--accent); }
.name-detail { font-size: 18px; margin: 16px 0 24px; }
.name-detail span { font: 11px "JetBrains Mono", monospace; color: var(--accent); border-left: 1px solid var(--rule); margin-left: 12px; padding-left: 12px; }
.arrival-statement { max-width: 31ch; margin: 0 0 12px; font-size: 19px; line-height: 1.45; color: var(--text); }
.arrival-context { max-width: 48ch; font-size: 12px; line-height: 1.8; color: var(--text-dim); margin: 0; }
.arrival-portrait { margin: 0; align-self: center; width: 100%; }
.arrival-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 933/1400; object-fit: contain; object-position: center; border: 0; border-radius: 2px; filter: none; }
.arrival-portrait figcaption { border-bottom: 1px solid var(--rule); padding-block: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 10px; color: var(--text-dim); }
.arrival-portrait figcaption span:last-child { color: var(--text-muted); font-size: 9px; }

/* Editorial rhythm: rules, real imagery, and typography instead of nested cards. */
.selected, .people-section { padding-top: 36px; padding-bottom: 40px; border-top: 1px solid var(--rule); }
.chapter-head { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; margin-bottom: 24px; }
.chapter-head .eyebrow, .chapter-head h2 { margin: 0; }
.chapter-head h2 { font-size: 26px; }
.hospital-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 36px; background: var(--surface-quiet); border-top: 1px solid var(--rule); }
.hospital-title h2 { margin: 16px 0; font-size: clamp(28px, 3vw, 42px); }
.hospital-place { font-size: 11px; color: var(--text-dim); margin-bottom: 0; }
.hospital-copy > p:first-child { font-size: 20px; line-height: 1.4; color: var(--text); margin: 0 0 12px; }
.hospital-copy > p { font-size: 13px; color: var(--text-dim); }
.hospital-copy .text-link { display: inline-block; margin-top: 12px; }
.feature-note { display: block; margin-top: 20px; font-size: 10px; line-height: 1.6; color: var(--text-muted); }
.featured-projects { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 32px; }
.project-image-link { display: block; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.project-image-link img { display: block; width: 100%; height: auto; aspect-ratio: 8/5; object-fit: contain; background: var(--panel); }
.featured-caption { padding-top: 16px; }
.featured-caption h3 { margin: 8px 0; }
.featured-caption h3 a { text-decoration: none; }
.featured-caption h3 a:hover { color: var(--accent); }
.featured-caption p:not(.micro) { font-size: 13px; line-height: 1.7; color: var(--text-dim); max-width: 45ch; }
.research-line { display: grid; grid-template-columns: 1fr 1fr auto; gap: 28px; align-items: center; border-top: 1px solid var(--rule); margin-top: 32px; padding-top: 24px; }
.research-line .micro { margin: 0 0 8px; }
.research-line h3 { margin: 0; }
.research-line > p { font-size: 12px; line-height: 1.7; color: var(--text-dim); }
.people-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.people-card img { display: block; aspect-ratio: 3/2; object-fit: contain; width: 100%; height: auto; background: var(--surface-quiet); }
.people-card .micro { margin: 20px 0 8px; }
.people-card h3 { margin: 0 0 8px; max-width: 30ch; }
.people-card > p:not(.micro) { color: var(--text-dim); font-size: 13px; line-height: 1.7; }
.library-invitation { display: flex; align-items: center; justify-content: space-between; gap: 32px; border-block: 1px solid var(--rule); padding-block: 32px; }
.library-invitation h2 { margin: 8px 0 12px; font-size: 28px; }
.library-invitation p:not(.eyebrow) { margin: 0; max-width: 56ch; color: var(--text-dim); font-size: 12px; }
.library-invitation .button { flex-shrink: 0; }
.closing { padding-block: 48px 56px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; }
.closing h2 { margin: 12px 0; }
.closing p:not(.eyebrow) { font-size: 13px; max-width: 50ch; color: var(--text-dim); }
.closing-links { display: flex; align-items: flex-start; flex-direction: column; gap: 16px; justify-self: end; }
.new-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding-block: 28px 56px; }
.new-footer p { margin: 0; font-size: 13px; }
.new-footer p span { display: block; color: var(--text-muted); margin-top: 4px; font-size: 10px; }
.new-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: end; align-content: start; }
.new-footer nav a { font-size: 10px; text-decoration: none; color: var(--text-dim); }
.new-footer nav a:hover { color: var(--accent); }

/* Consistent inner pages, with clickable page contents and quieter reference detail. */
.redesigned .page-hero { padding-block: 32px 20px; }
.redesigned .page-hero h1 { font-size: clamp(36px, 4.5vw, 54px); line-height: 1.12; }
.redesigned .page-hero .hero-lead { font-size: 15px; line-height: 1.7; max-width: 55ch; }
.redesigned .page-deck { border-radius: 0; background: none; border-inline: 0; gap: 8px 20px; padding-inline: 0; }
.redesigned .page-deck a { color: var(--text-dim); font-size: 11px; text-decoration: none; padding-block: 8px; }
.redesigned .page-deck a:hover { color: var(--accent); text-decoration: underline; }
.redesigned .section { margin-block: 44px; padding-block: 0; }
.redesigned .section-head { gap: 24px; margin-bottom: 24px; }
.redesigned .section-title-wrap h2 { font-size: 28px; }
.redesigned .section-intro { font-size: 12px; max-width: 50ch; }
.redesigned .feature-card, .redesigned .contact-card, .redesigned .research-case, .redesigned .project-card, .redesigned .capability, .redesigned .restricted-band { border-radius: 4px; }
.redesigned .source-details { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--rule); }
.source-details summary { color: var(--accent-bright); font-size: 12px; cursor: pointer; padding-block: 8px; }
.source-details .evidence-split { margin-top: 16px; }
.redesigned .type-poster { border-radius: 2px; }
.redesigned .record-row p { font-size: 13px; }
.redesigned .record-row > p:last-child:not(:nth-child(3)) { grid-column: 3; }
.redesigned .credential-ledger article { gap: 8px; }
.redesigned .gallery-strip img { object-fit: contain; background: var(--surface-quiet); }
.redesigned .section-index { font-size: 11px; }
.redesigned .library-section { padding-top: 24px; }
.redesigned .library-tools { background: var(--bg); backdrop-filter: none; }
.redesigned .library-grid { gap: 20px; }
.redesigned .library-grid .project-card { border: 0; background: transparent; border-bottom: 1px solid var(--rule); }
.redesigned .library-grid .project-card:hover { border-color: var(--accent); }
.redesigned .library-grid .project-copy { padding: 16px 0 20px; }
.redesigned .library-grid .project-card img { object-fit: contain; background: var(--panel); border: 1px solid var(--rule); border-radius: 2px; }

/* Recruiter brief: concrete contribution before skill labels. */
.brief-arrival { padding-block: 36px 40px; display: grid; grid-template-columns: minmax(0,1.6fr) minmax(210px,.8fr); gap: 44px; align-items: start; }
.brief-arrival h1 { margin: 12px 0 20px; font-size: clamp(34px,4vw,50px); line-height: 1.15; }
.degree { color: var(--accent); display: block; margin-top: 12px; font: 14px "JetBrains Mono", monospace; letter-spacing: 0; }
.brief-position { font-size: 21px; line-height: 1.4; margin-bottom: 16px; }
.brief-arrival .hero-lead { font-size: 13px; line-height: 1.8; }
.brief-facts { background: var(--surface-quiet); border-top: 2px solid var(--accent); padding: 24px; }
.brief-facts dl { margin: 20px 0; }
.brief-facts dt { font: 9px "JetBrains Mono", monospace; color: var(--text-muted); margin-top: 16px; text-transform: uppercase; }
.brief-facts dd { font-size: 12px; line-height: 1.6; margin: 4px 0 0; }
.brief-section { border-top: 1px solid var(--rule); padding-block: 32px 36px; }
.brief-cases { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.brief-cases article { border-top: 1px solid var(--rule); padding-top: 20px; }
.brief-cases h3 { margin: 12px 0; }
.brief-cases p { font-size: 12px; line-height: 1.8; color: var(--text-dim); }
.brief-cases .brief-status { font-size: 10px; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 12px; }
.brief-source-note { font-size: 10px; color: var(--text-muted); max-width: 90ch; margin-top: 24px; }
.brief-fit { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.brief-fit h3 { font-size: 16px; margin: 0 0 12px; }
.brief-fit p { margin: 0; font-size: 12px; color: var(--text-dim); }
.brief-background { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; }
.brief-background h2 { margin-top: 0; font-size: 28px; }
.brief-background p { font-size: 12px; color: var(--text-dim); }
.brief-timeline { margin: 0; padding: 0; list-style: none; }
.brief-timeline li { display: grid; grid-template-columns: 100px 1fr; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--border); font-size: 12px; }
.brief-timeline span { color: var(--text-muted); font-size: 10px; }
.brief-timeline strong { font-weight: 500; }

@media (min-width:1200px) and (pointer:fine) {
  .arrival { gap: 36px; }
  .arrival h1 { font-size: 62px; }
  .masthead-inner { min-height: 56px; }
}
@media (max-width:1000px) {
  .main-navigation { gap: 16px; }
  .arrival { gap: 36px; }
  .redesigned .page-hero .work-hero-grid { gap: 32px; }
}
@media (max-width:680px), (pointer:coarse) and (max-width:900px) {
  .redesigned .shell { width: calc(100% - 40px); }
  .masthead-inner { flex-wrap: wrap; gap: 0; min-height: 68px; padding-block: 12px; }
  .wordmark { font-size: 19px; letter-spacing: -.03em; }
  .wordmark span { font-size: 11px; }
  .js .menu-toggle { display: block; font-size: 14px; }
  .main-navigation { flex-basis: 100%; flex-wrap: wrap; gap: 0; padding-top: 12px; }
  .main-navigation a { flex: 1 1 50%; font-size: 15px; padding: 12px 0; }
  .main-navigation .nav-recruiter { border: 0; padding-left: 0; }
  .js .main-navigation:not(.is-open) { display: none; }
  .utility-bar { padding-block: 8px; gap: 8px; }
  .utility-contact { display: none; }
  .utility-bar .language-block { width: 100%; }
  .utility-bar .language-chip { min-width: 44px; min-height: 44px; font-size: 12px; }
  .utility-bar .language-label { font-size: 10px; }
  .redesigned .eyebrow, .redesigned .micro { font-size: 11px; }
  .arrival { grid-template-columns: minmax(0,1fr) 42%; gap: 20px; padding-block: 24px 40px; }
  .arrival-copy { display: contents; }
  .arrival-identity { grid-column: 1; grid-row: 1; align-self: center; }
  .arrival-copy .eyebrow { font-size: 10px; margin-bottom: 12px; }
  .arrival h1 { font-size: clamp(34px,11vw,50px); }
  .name-detail { margin-block: 16px 0; font-size: 16px; }
  .name-detail span { margin-left: 8px; padding-left: 8px; }
  .arrival-statement { grid-column: 1/-1; grid-row: 2; margin: 8px 0 0; font-size: 22px; max-width: 28ch; }
  .arrival-context { grid-column: 1/-1; grid-row: 3; font-size: 15px; }
  .arrival-copy > .actions { grid-column: 1/-1; grid-row: 4; margin-top: 0; }
  .redesigned .button { min-height: 48px; font-size: 14px; padding: 12px 16px; }
  .redesigned .text-link { font-size: 14px; }
  .arrival-portrait { grid-column: 2; grid-row: 1; width: 100%; justify-self: center; }
  .arrival-portrait figcaption { font-size: 10px; padding-block: 8px; }
  .arrival-portrait figcaption span:last-child { display: none; }
  .chapter-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .chapter-head h2 { font-size: 28px; }
  .hospital-feature, .featured-projects, .people-grid, .research-line, .closing, .new-footer, .brief-arrival, .brief-cases, .brief-fit, .brief-background { grid-template-columns: 1fr; gap: 24px; }
  .hospital-feature { padding: 24px; }
  .hospital-title h2 { font-size: 34px; }
  .hospital-copy > p { font-size: 16px; }
  .hospital-place { font-size: 13px; }
  .feature-note { font-size: 12px; }
  .featured-projects, .people-grid { gap: 36px; }
  .featured-caption h3, .people-card h3 { font-size: 23px; }
  .featured-caption p:not(.micro), .people-card > p:not(.micro), .research-line > p, .closing p:not(.eyebrow) { font-size: 16px; }
  .research-line { gap: 8px; }
  .library-invitation { align-items: flex-start; flex-direction: column; gap: 20px; }
  .library-invitation p:not(.eyebrow) { font-size: 16px; }
  .closing { padding-block: 40px; }
  .closing-links { justify-self: start; }
  .new-footer nav { justify-content: start; gap: 4px 20px; }
  .new-footer nav a { font-size: 13px; min-height: 44px; padding-block: 10px; }
  .redesigned .page-hero h1 { font-size: 40px; }
  .redesigned .page-hero .hero-lead { font-size: 16px; }
  .redesigned .page-deck a { min-height: 44px; font-size: 13px; }
  .redesigned .section-intro { font-size: 15px; }
  .redesigned .record-row p { font-size: 16px; }
  .redesigned .record-row > p:last-child:not(:nth-child(3)) { grid-column: auto; }
  .source-details summary { font-size: 15px; min-height: 44px; }
  .brief-arrival h1 { font-size: 40px; }
  .brief-arrival .hero-lead, .brief-cases p, .brief-fit p, .brief-background p { font-size: 16px; }
  .brief-facts dt { font-size: 11px; }
  .brief-facts dd { font-size: 16px; }
  .brief-cases h3 { font-size: 24px; }
  .brief-cases .brief-status, .brief-source-note { font-size: 12px; }
  .brief-fit h3 { font-size: 21px; }
  .brief-timeline li { grid-template-columns: 1fr; gap: 6px; font-size: 16px; }
  .brief-timeline span { font-size: 12px; }
}
html[data-i18n-mode="zh-TW"] .redesigned h1, html[data-i18n-mode="zh-TW"] .redesigned h2 { letter-spacing: 0; line-height: 1.3; }
html[data-i18n-mode="zh-TW"] .arrival h1 { font-family: "Fraunces", Georgia, serif; line-height: .98; letter-spacing: -.055em; }
@media (prefers-reduced-motion:reduce) { .redesigned *, .redesigned *::before, .redesigned *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media print {
  .masthead, .utility-bar, .reading-scale-control, .menu-toggle { display: none !important; }
  body.redesigned { zoom: 1 !important; }
  .redesigned .shell { width: 100%; }
  .arrival { padding-top: 0; }
  .source-details .evidence-split { display: grid !important; }
}

/* pages */
/* Project Ark-inspired information architecture, Andrew's own warm-editorial identity.
   Source template tokens remain in site.css; each page has a content-specific layout. */
.multipage .masthead { container-type: inline-size; position: relative; background: var(--bg); }
.multipage .masthead-inner { min-height: 64px; gap: 20px; }
.multipage .main-navigation { gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.multipage .main-navigation a { padding: 10px 12px; border-radius: var(--r-control); font-size: 11px; line-height: 1.4; white-space: nowrap; }
.multipage .main-navigation .nav-recruiter { padding-left: 12px; border: 1px solid var(--rule); }
.multipage .main-navigation a:hover { color: var(--text); background: var(--panel); }
.multipage .main-navigation a[aria-current="page"] { background: var(--accent); color: var(--bg); }
.multipage a:focus-visible, .multipage button:focus-visible, .multipage summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.multipage img { max-width: 100%; }
.multipage .utility-bar { padding-block: 8px 12px; }
.multipage .site-footer { margin-top: 32px; }
.multipage main > :last-child { margin-bottom: 32px; }
.multipage .section { scroll-margin-top: 16px; }
.multipage .page-deck { position: static; }

/* HOME: asymmetric reception board + six independent entrances. */
.portal { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.8fr) minmax(0,.85fr); gap: 16px; padding-block: 16px 48px; align-items: stretch; }
.portal-identity { background: var(--accent); color: var(--bg); padding: 28px; display: flex; flex-direction: column; align-items: flex-start; }
.portal-identity .eyebrow, .portal-identity .text-link, .portal-identity .name-period { color: var(--bg); }
.portal-identity .eyebrow { margin: 0 0 28px; font-size: 9px; }
.portal-identity h1 { font-size: clamp(44px, 5vw, 64px); line-height: .96; margin: 0; }
.portal-name { font-size: 18px; margin: 16px 0 24px; }
.portal-name span { font: 11px "JetBrains Mono", monospace; margin-left: 12px; }
.portal-statement { font-size: 21px; line-height: 1.3; margin: 0 0 12px; }
.portal-identity p:not([class]) { font-size: 12px; line-height: 1.7; margin: 0 0 24px; }
.portal-identity .text-link { margin-top: auto; border-bottom: 1px solid currentColor; }
.portal-portrait { margin: 0; display: flex; flex-direction: column; align-self: start; }
.portal-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 933/1400; object-fit: contain; object-position: center; border: none; border-radius: 0; }
.portal-portrait figcaption { font: 10px/1.6 "JetBrains Mono", monospace; padding-top: 12px; color: var(--text-dim); }
.portal-sidebar { display: grid; grid-template-rows: 1fr auto; gap: 16px; }
.portal-now, .portal-brief { background: var(--surface-quiet); border: 1px solid var(--rule); padding: 24px; }
.portal-now { display: flex; flex-direction: column; align-items: flex-start; }
.portal-now .eyebrow { margin: 0 0 16px; }
.portal-now h2 { margin: 0 0 12px; font-size: 30px; line-height: 1.05; }
.portal-now p:not([class]), .portal-brief p { font-size: 12px; color: var(--text-dim); line-height: 1.7; }
.portal-now .micro { margin-top: 8px; }
.portal-now .text-link { margin-top: auto; padding-top: 24px; }
.portal-brief { display: block; text-decoration: none; border-top: 3px solid var(--accent); }
.portal-brief h2 { font-size: 24px; margin: 12px 0; }
.portal-brief:hover { border-color: var(--accent); }
.site-doorways { padding-block: 0 48px; }
.doorway-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.doorway { padding: 24px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; text-decoration: none; }
.doorway h3 { font-size: 21px; margin: 16px 0 8px; }
.doorway p { font-size: 12px; color: var(--text-dim); line-height: 1.7; max-width: 35ch; margin: 0 0 20px; }
.doorway-arrow { color: var(--accent); font-size: 23px; align-self: flex-end; margin-top: auto; }
.doorway:hover { background: var(--surface-quiet); }
.portal-samples { border-top: 1px solid var(--rule); padding-block: 32px 40px; }
.sample-triptych { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.sample-tile { display: block; text-decoration: none; }
.sample-tile img { width: 100%; height: auto; aspect-ratio: 8/5; object-fit: contain; background: var(--panel); border: 1px solid var(--rule); margin-bottom: 16px; }
.sample-tile h3 { font-size: 19px; margin-block: 8px; }
.sample-tile p { color: var(--text-dim); font-size: 12px; line-height: 1.7; }
.sample-tile:hover h3 { color: var(--accent); }

/* ABOUT: the profile stays a quiet rail; the full biography reads as an article. */
.biography-heading { padding-block: 28px 36px; border-bottom: 1px solid var(--rule); }
.biography-heading h1 { max-width: 21ch; font-size: 52px; line-height: 1.1; margin: 12px 0 0; }
.biography-layout { display: grid; grid-template-columns: 216px minmax(0,1fr); gap: 48px; padding-top: 32px; }
.profile-rail figure { margin: 0 0 20px; }
.profile-rail img { width: 100%; height: auto; aspect-ratio: 933/1400; object-fit: contain; border: none; border-radius: 0; }
.profile-rail figcaption { font-size: 12px; padding-top: 12px; }
.profile-rail nav { display: grid; padding-top: 16px; border-top: 1px solid var(--rule); }
.profile-rail nav a { font-size: 12px; color: var(--text-dim); text-decoration: none; padding: 8px 0; }
.profile-rail nav a:hover { color: var(--accent); }
.biography-intro .hero-lead { font-size: 20px; margin-top: 0; line-height: 1.6; }
.biography-body { min-width: 0; }
.biography-body .section-head { display: block; }
.biography-body .section-intro { max-width: 65ch; margin-top: 16px; }
.biography-body .journey-stop { grid-template-columns: 80px minmax(0,1fr); gap: 8px 20px; }
.biography-body .journey-stop p { grid-column: 2; }
.biography-body .capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.biography-body .beyond-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.biography-body .beyond-feature { grid-column: 1/-1; }
.biography-body .credential-ledger { grid-template-columns: 1fr; }
.biography-body .contact-card { grid-template-columns: 1fr; }
.biography-body .focus-tracks { grid-template-columns: 1fr; }
.biography-body .focus-track { display: grid; grid-template-columns: minmax(140px,.8fr) 1fr; gap: 16px; }

/* CLINICAL AI: a reading rail, case evidence, and a vertical working-method spine. */
.clinical-title { max-width: 720px; padding-block: 8px 24px; }
.case-desk { display: grid; grid-template-columns: 152px minmax(0,1fr); gap: 40px; border-top: 1px solid var(--rule); }
.case-rail { padding-top: 32px; align-self: start; display: grid; gap: 12px; }
.case-rail a { color: var(--text-dim); font-size: 11px; text-decoration: none; padding-block: 8px; border-bottom: 1px solid var(--border); }
.case-rail a:hover { color: var(--accent); }
.case-body { min-width: 0; }
.case-body .section-head { display: block; }
.case-body .section-intro { margin-top: 12px; max-width: 62ch; }
.case-body .feature-card { grid-template-columns: 1fr; border-inline: 0; background: none; }
.case-body .feature-main { padding: 24px 0; }
.case-body .feature-side { border: 1px solid var(--rule); padding: 24px; }
.case-body .receipt { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.case-body .evidence-split { grid-template-columns: 1fr; }
.case-body .method-steps { display: block; border-left: 1px solid var(--accent); }
.case-body .story-step { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 8px 16px; background: none; border: none; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 24px; }
.case-body .story-step h3 { margin: 0; font-size: 18px; }
.case-body .story-step p { grid-column: 2; margin: 0; }
.case-body .capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.case-body .contact-card { grid-template-columns: 1fr; }
.research-bridge { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px !important; border-block: 1px solid var(--rule); }
.research-bridge h2 { font-size: 24px; margin: 12px 0; }
.research-bridge p { font-size: 12px; color: var(--text-dim); }

/* RESEARCH: journal-like publication with a metadata margin, not a project gallery. */
.research-heading { padding-block: 32px 40px; }
.research-heading h1 { font-size: 52px; line-height: 1.1; max-width: 22ch; margin-block: 20px; }
.research-heading .hero-lead { max-width: 48ch; font-size: 17px; line-height: 1.7; }
.publication-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 48px; border-block: 1px solid var(--rule); padding-block: 36px; }
.publication-meta dl { margin-block: 24px; }
.publication-meta dt { font: 10px "JetBrains Mono", monospace; color: var(--text-muted); margin-top: 20px; }
.publication-meta dd { margin: 8px 0 0; font-size: 13px; }
.publication-meta > p { font-size: 11px; line-height: 1.8; color: var(--text-dim); margin-top: 24px; }
.publication-body h2 { margin: 16px 0; font-size: 44px; }
.publication-body .research-title { font-family: "Fraunces", "Songti TC", Georgia, serif; font-size: 26px; line-height: 1.4; font-weight: 500; color: var(--text); }
.publication-body .evidence-split { grid-template-columns: 1fr; gap: 24px; }
.publication-body .evidence-block { padding: 20px 0; background: none; border: none; border-top: 1px solid var(--rule); border-radius: 0; }
.publication-body .evidence-block p { font-size: 14px; line-height: 1.8; }
.publication-body .evidence-block .evidence-label { font-size: 10px; }
.research-directions .focus-tracks { display: block; }
.research-directions .focus-track { display: grid; grid-template-columns: 1fr 1.7fr; gap: 32px; background: none; padding: 20px 0; border: none; border-bottom: 1px solid var(--rule); border-radius: 0; }
.research-contact { padding-block: 32px 48px; border-top: 1px solid var(--rule); }
.research-contact h2 { margin: 16px 0 24px; }

/* SPEAKING: a photo-led feature and date-led records. */
.speaking-heading { display: grid; grid-template-columns: 1fr 180px; gap: 48px; align-items: center; }
.speaking-index { border-left: 1px solid var(--rule); padding-left: 24px; display: grid; gap: 12px; }
.speaking-index strong { font: 500 64px/.95 "Fraunces", Georgia, serif; color: var(--accent); }
.speaking-index span { font-size: 12px; color: var(--text-dim); }
.multipage .speaking-cover { display: block; border: none; background: none; }
.speaking-cover > figure { margin: 0; }
.speaking-cover > figure img { width: 100%; height: auto; max-height: none; aspect-ratio: auto; object-fit: contain; border-radius: 0; }
.speaking-cover > figure figcaption { padding: 12px 0; color: var(--text-dim); font-size: 11px; }
.speaking-cover .talk-feature-copy { padding: 28px 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px 40px; }
.speaking-cover .talk-feature-copy .status-pill { grid-column: 1; justify-self: start; align-self: start; }
.speaking-cover .talk-feature-copy h2 { grid-column: 1; grid-row: 2/4; font-size: 34px; margin: 0; }
.speaking-cover .talk-feature-copy p { grid-column: 2; margin: 0; font-size: 13px; }
.speaking-cover .talk-feature-copy .actions { grid-column: 2; }
.view-talks #record { border-top: 1px solid var(--rule); padding-top: 32px; }
.view-talks .record-row { grid-template-columns: 112px minmax(180px,.9fr) minmax(0,1.5fr); }
.view-talks .record-row time { color: var(--accent); font-size: 12px; }
.view-talks .gallery-strip { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.view-talks .gallery-strip img { width: 100%; height: auto; aspect-ratio: auto; max-height: none; object-fit: contain; }
.view-talks .gallery-strip figure { align-self: start; }

/* PROJECTS: concise collection masthead; tools stay nearest the results. */
.multipage .collection-heading { display: grid; grid-template-columns: 1fr 180px; gap: 48px; padding-block: 24px 28px; }
.multipage .collection-heading h1 { font-size: 42px; line-height: 1.15; margin-block: 16px; max-width: none; }
.multipage .collection-heading .hero-lead { font-size: 14px; line-height: 1.7; max-width: 55ch; }
.library-count { border-left: 1px solid var(--rule); padding-left: 28px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.library-count strong { font: 500 88px/1 "Fraunces", Georgia, serif; color: var(--accent); }
.library-count span { font-size: 11px; color: var(--text-dim); }
.multipage .library-hero .access-note { font-size: 11px; line-height: 1.7; }
.multipage .library-tools { border-block: 1px solid var(--rule); border-inline: 0; border-radius: 0; }

/* Collapse based on real container width, including the page's 175% reading scale. */
@container (max-width: 740px) {
  .multipage .masthead-inner { flex-wrap: wrap; padding-block: 12px; }
  .js .multipage .menu-toggle { display: block; }
  .multipage .main-navigation { flex-basis: 100%; justify-content: start; padding-top: 12px; }
  .multipage .main-navigation a { flex: 1 1 40%; font-size: 14px; min-height: 44px; white-space: normal; }
  .js .multipage .main-navigation:not(.is-open) { display: none; }
}
@media (max-width: 1000px) {
  .portal { gap: 12px; }
  .portal-identity, .portal-now, .portal-brief { padding: 20px; }
  .portal-identity h1 { font-size: 48px; }
  .biography-layout { gap: 32px; grid-template-columns: 180px minmax(0,1fr); }
  .case-desk { gap: 28px; grid-template-columns: 124px minmax(0,1fr); }
}
@media (max-width: 680px), (pointer: coarse) and (max-width: 900px) {
  .multipage .main-navigation { justify-content: start; }
  .multipage .main-navigation a { flex: 1 1 40%; min-height: 44px; padding: 12px; font-size: 14px; white-space: normal; }
  .multipage .main-navigation .nav-recruiter { flex-basis: 100%; margin-top: 4px; }
  .portal { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 12px; padding-bottom: 36px; }
  .portal-identity { padding: 20px; }
  .portal-identity h1 { font-size: clamp(30px,9vw,48px); }
  .portal-identity .eyebrow { font-size: 8px; margin-bottom: 20px; }
  .portal-name { margin: 12px 0 20px; font-size: 16px; }
  .portal-name span { margin-left: 4px; }
  .portal-statement { font-size: 17px; }
  .portal-identity p:not([class]) { font-size: 13px; }
  .portal-identity .text-link { font-size: 12px; }
  .portal-sidebar { grid-column: 1/-1; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 12px; }
  .portal-now, .portal-brief { padding: 20px; }
  .portal-now h2 { font-size: 27px; }
  .portal-brief h2 { font-size: 25px; }
  .portal-now p:not([class]), .portal-brief p { font-size: 14px; }
  .doorway-grid { grid-template-columns: 1fr 1fr; }
  .doorway { padding: 20px; }
  .doorway h3 { font-size: 20px; }
  .doorway p { font-size: 14px; }
  .doorway .micro { font-size: 9px; }
  .sample-triptych { grid-template-columns: 1fr; gap: 28px; }
  .sample-tile h3 { font-size: 24px; }
  .sample-tile p { font-size: 16px; }
  .biography-heading h1, .research-heading h1 { font-size: 38px; }
  .biography-layout, .case-desk, .publication-layout { grid-template-columns: 1fr; gap: 28px; }
  .profile-rail { display: grid; grid-template-columns: 40% 1fr; gap: 16px 24px; }
  .profile-rail figure { grid-row: 1/3; margin: 0; }
  .profile-rail nav { grid-column: 2; padding: 0; border: none; }
  .profile-rail nav a { min-height: 44px; font-size: 14px; }
  .profile-rail .micro { margin: 0; align-self: end; }
  .biography-body .journey-stop { grid-template-columns: 1fr; }
  .biography-body .journey-stop p { grid-column: 1; }
  .biography-body .focus-track, .biography-body .capability-grid, .biography-body .beyond-grid { grid-template-columns: 1fr; }
  .case-rail { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 16px; }
  .case-rail .micro { flex-basis: 100%; }
  .case-rail a { font-size: 13px; min-height: 44px; }
  .case-body .section { margin-top: 20px; }
  .case-body .receipt { grid-template-columns: 1fr; }
  .case-body .story-step { grid-template-columns: 1fr; padding: 24px 20px; }
  .case-body .story-step p { grid-column: 1; }
  .case-body .capability-grid { grid-template-columns: 1fr; }
  .research-bridge { flex-direction: column; align-items: flex-start; }
  .publication-meta { border-bottom: 1px solid var(--rule); padding-bottom: 24px; }
  .publication-meta dl { display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
  .publication-meta dt, .publication-meta dd { margin: 0; font-size: 13px; }
  .publication-meta > p { font-size: 13px; }
  .publication-body h2 { font-size: 36px; }
  .publication-body .research-title { font-size: 25px; }
  .publication-body .evidence-block p { font-size: 16px; }
  .research-directions .focus-track { grid-template-columns: 1fr; gap: 8px; }
  .speaking-heading { grid-template-columns: 1fr; gap: 24px; }
  .speaking-index { display: grid; grid-template-columns: auto 1fr; align-items: center; }
  .speaking-index strong { grid-row: 1/3; font-size: 52px; }
  .speaking-index span { font-size: 14px; }
  .speaking-cover .talk-feature-copy { display: block; padding-block: 24px; }
  .speaking-cover .talk-feature-copy h2 { margin-block: 20px; font-size: 30px; }
  .speaking-cover .talk-feature-copy p { font-size: 16px; margin-block: 16px; }
  .view-talks .record-row { grid-template-columns: 1fr; }
  .view-talks .record-row time { font-size: 14px; }
  .view-talks .gallery-strip { grid-template-columns: 1fr; }
  .multipage .collection-heading { grid-template-columns: 1fr; gap: 20px; }
  .multipage .collection-heading h1 { font-size: 38px; }
  .multipage .collection-heading .hero-lead { font-size: 16px; }
  .multipage .collection-heading .access-note { font-size: 13px; }
  .library-count { border: none; border-top: 1px solid var(--rule); flex-direction: row; align-items: baseline; justify-content: start; padding: 16px 0 0; }
  .library-count strong { font-size: 44px; }
  .library-count span { font-size: 13px; }
}
@media print {
  .multipage .masthead, .case-rail, .profile-rail nav { display: none; }
  .portal, .biography-layout, .case-desk, .publication-layout { display: block; }
  .portal-portrait, .profile-rail figure { max-width: 180px; }
  .portal-identity { color: var(--text); background: none; }
  .portal-identity .eyebrow, .portal-identity .text-link, .portal-identity .name-period { color: var(--text); }
}

/* art-direction */
/* Warm-editorial. Original photography, true italic type, asymmetric spreads.
   A cover, profile, contents page and catalogue each have their own composition. */
@font-face { font-family:"Fraunces"; src:url("./fraunces-italic-300.ttf") format("truetype"); font-style:italic; font-weight:300; font-display:swap; }
.art-directed main { container:portfolio-content / inline-size; }
.art-directed .masthead { background:var(--bg); }
.art-directed .masthead-inner { min-height:76px; }
.art-directed .wordmark { font-weight:400; letter-spacing:-.04em; }
.art-directed .main-navigation a { border-radius:0; }
.art-directed .main-navigation a:hover { background:none; color:var(--accent); }
.art-directed .main-navigation a[aria-current="page"] { color:var(--text); background:none; border-bottom:1px solid var(--text); }
.art-directed .main-navigation .nav-recruiter { border:none; border-left:1px solid var(--rule); border-radius:0; }
.art-directed .utility-bar { padding-block:8px 12px; }
.art-directed .eyebrow { font-size:10px; letter-spacing:.16em; }
.art-directed :is(.text-link,.story-all-link) { text-decoration-thickness:1px; text-underline-offset:6px; }
.art-directed .chapter-head { gap:16px 32px; align-items:baseline; margin-bottom:36px; }
.art-directed .chapter-head h2 { font-weight:300; font-size:clamp(28px,4cqw,48px); line-height:1.15; letter-spacing:-.035em; }

/* COVER. Full bleed without a 100vw breakout. Source 1600×1068:
   2:1 reveals y=67…867. Text starts at source x=1024, right of face/hands. */
.home-opening { width:100%; padding:0; }
.home-banner { position:relative; isolation:isolate; display:block; margin:0; }
.home-banner > img { display:block; width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; object-position:50% 25%; border:0; border-radius:0; filter:none; }
.home-banner figcaption { position:absolute; left:64%; top:21%; width:31%; margin:0; padding:0; color:var(--text); }
.home-banner .eyebrow { display:block; color:var(--accent-bright); font-size:clamp(8px,.9cqw,11px); line-height:1.6; margin:0 0 20px; }
.home-banner blockquote { margin:0; padding:0; border:0; max-width:none; font:italic 300 clamp(24px,4.4cqw,66px)/1.13 "Fraunces",Georgia,serif; letter-spacing:-.025em; color:var(--text); text-wrap:balance; }
html[data-i18n-mode="zh-TW"] .home-banner blockquote { font-family:"Songti TC","Noto Serif TC",serif; font-style:normal; line-height:1.5; letter-spacing:0; font-size:clamp(23px,3.6cqw,52px); }
.edition-line { display:flex; justify-content:space-between; align-items:center; gap:12px 24px; padding-block:20px; border-bottom:1px solid var(--rule); font:10px/1.7 "JetBrains Mono",monospace; color:var(--text-dim); }
.edition-line p { margin:0; }
.edition-line .text-link { font:inherit; white-space:normal; }

/* PORTRAIT. Full image, no avatar crop. */
.home-introduction { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr); column-gap:12%; row-gap:32px; align-items:start; padding-block:88px 64px; scroll-margin-top:24px; }
.home-name { grid-column:1; grid-row:1; }
.home-name .eyebrow { margin-top:0; }
.home-name h1 { font-weight:300; font-size:clamp(52px,8cqw,100px); line-height:.98; letter-spacing:-.055em; margin:24px 0; }
.home-name .portal-name { margin:24px 0 12px; }
.home-biography { grid-column:1; grid-row:2; max-width:46ch; }
.home-biography h2 { font:300 clamp(26px,3cqw,36px)/1.3 "Fraunces","Songti TC",Georgia,serif; letter-spacing:-.02em; margin:0 0 20px; }
.home-biography > p { font-size:14px; line-height:1.9; color:var(--text-dim); }
.home-biography .actions { gap:16px 32px; margin-top:28px; }
.home-biography .home-brief-note { font:10px/1.7 "JetBrains Mono",monospace; color:var(--text-muted); margin:28px 0 4px; }
.home-biography .home-brief-detail { font-size:12px; margin:0; }
.home-portrait { grid-column:2; grid-row:1/3; margin:32px 0 0; }
.home-portrait img { display:block; width:100%; height:auto; aspect-ratio:933/1400; object-fit:contain; border:none; border-radius:0; }
.home-portrait figcaption { color:var(--text-muted); font:10px/1.8 "JetBrains Mono",monospace; padding-top:16px; max-width:28ch; }
.home-current { display:grid; grid-template-columns:.8fr minmax(0,1.5fr) auto; gap:16px 32px; align-items:baseline; border-block:1px solid var(--rule); padding-block:28px; margin-bottom:88px; }
.home-current strong { font:300 30px/1.2 "Fraunces","Songti TC",Georgia,serif; }
.home-current p { font-size:12px; color:var(--text-dim); margin:12px 0 0; }
.home-current .eyebrow { margin:0; }
.home-current > .micro { grid-column:1; grid-row:2; }
.home-current > .text-link { grid-column:3; grid-row:1/3; align-self:center; }

/* SELECTED WORK. A large opening image and two companion stories. */
.art-directed .portal-samples { padding-block:0 80px; border-top:none; }
.art-directed .portal-samples .chapter-head { border-top:1px solid var(--rule); padding-top:28px; }
.art-directed .sample-triptych { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:32px 48px; align-items:start; }
.art-directed .sample-tile { min-width:0; border-bottom:1px solid var(--rule); padding-bottom:24px; }
.art-directed .sample-tile:first-child { grid-column:1; grid-row:1/3; }
.art-directed .sample-tile:first-child h3 { font-size:34px; }
.art-directed .sample-tile:nth-child(n+2) { grid-column:2; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:0 20px; }
.art-directed .sample-tile:nth-child(n+2) > img { grid-column:1; grid-row:1/4; margin:0; }
.art-directed .sample-tile:nth-child(n+2) > :not(img) { grid-column:2; }
.art-directed .sample-tile img { border:none; margin-bottom:24px; }
.art-directed .sample-tile h3 { font:300 24px/1.2 "Fraunces","Songti TC",Georgia,serif; margin-block:12px; }
.art-directed .sample-tile p { margin-block:8px 0; font-size:13px; line-height:1.85; }
.art-directed .sample-tile .micro { font-size:9px; line-height:1.8; }

/* PHOTO ESSAY. An owned photograph leads into the speaking archive. */
.home-story { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:56px; align-items:center; padding-block:56px 80px; border-top:1px solid var(--rule); }
.home-story-photo { display:block; }
.home-story-photo img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; border:none; border-radius:0; }
.home-story-copy h2 { font:300 clamp(30px,4cqw,48px)/1.15 "Fraunces","Songti TC",Georgia,serif; letter-spacing:-.035em; margin:28px 0 24px; }
.home-story-copy > p:not([class]) { max-width:36ch; font-size:14px; line-height:1.9; color:var(--text-dim); }
.story-date { display:flex; flex-wrap:wrap; gap:8px 20px; font:10px/1.7 "JetBrains Mono",monospace; color:var(--text-muted); margin-top:24px; }
.home-story-copy .text-link { display:inline-block; margin-top:20px; }
.story-all-link { display:block; width:fit-content; color:var(--text-dim); font-size:12px; margin-top:24px; }
.story-all-link:hover { color:var(--accent); }

/* CONTENTS. Six readable entrances instead of six identical cards. */
.art-directed .site-doorways { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:64px; padding-block:48px 80px; border-top:1px solid var(--rule); }
.art-directed .site-doorways .chapter-head { display:block; }
.art-directed .site-doorways .chapter-head h2 { font-size:clamp(32px,4cqw,48px); margin-top:32px; max-width:10ch; }
.art-directed .doorway-grid { display:block; border:none; }
.art-directed .doorway { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 24px; padding:24px 0; border:none; border-bottom:1px solid var(--rule); }
.art-directed .doorway:first-child { padding-top:0; }
.art-directed .doorway .micro { grid-column:1; font-size:9px; }
.art-directed .doorway h3 { grid-column:1; font:300 32px/1.2 "Fraunces","Songti TC",Georgia,serif; margin:4px 0; }
.art-directed .doorway p { grid-column:1; font-size:13px; max-width:48ch; margin:0; }
.art-directed .doorway-arrow { grid-column:2; grid-row:1/4; align-self:center; margin:0; font-size:24px; }
.art-directed .doorway:hover { background:none; border-color:var(--accent); }
.art-directed .doorway:hover h3 { color:var(--accent); }
.art-directed .closing { border-top:1px solid var(--rule); padding-block:48px 56px; }
.art-directed .closing h2 { font-weight:300; font-size:clamp(32px,4cqw,48px); }

/* CATALOGUE. Visible chapters; an opening spread, then supporting pieces. */
.art-directed .collection-heading { grid-template-columns:minmax(0,1fr) 128px; gap:48px; padding-block:48px; align-items:end; }
.art-directed .collection-heading h1 { font-weight:300; font-size:clamp(44px,6cqw,76px); line-height:1.05; max-width:17ch; margin-block:24px; letter-spacing:-.045em; }
.art-directed .collection-heading .hero-lead { font-size:15px; line-height:1.85; max-width:52ch; }
.art-directed .library-count { border-left:0; border-bottom:1px solid var(--rule); padding:0 0 24px; align-self:end; }
.art-directed .library-count strong { font-size:96px; font-weight:300; }
.collection-directory { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; padding-block:16px 32px; }
.collection-door { display:grid; grid-template-columns:1fr auto; align-content:start; gap:16px 8px; padding-block:20px; border-top:1px solid var(--rule); color:var(--text); text-decoration:none; }
.collection-door strong { grid-column:1/-1; font:300 22px/1.3 "Fraunces","Songti TC",Georgia,serif; }
.collection-door .micro { grid-column:1/-1; color:var(--accent); font-size:9px; }
.collection-door-count { font:10px/1.6 "JetBrains Mono",monospace; color:var(--text-muted); }
.collection-door:hover, .collection-door[aria-current="true"] { color:var(--accent); border-color:var(--accent); }
.collection-tools { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto; gap:16px; align-items:end; padding-block:24px; border-block:1px solid var(--rule); }
.collection-tools .search-wrap, .collection-select { display:grid; gap:8px; min-width:0; }
.collection-tools label { position:static; transform:none; color:var(--text-dim); font-size:11px; letter-spacing:0; text-transform:none; }
.collection-tools input, .collection-tools select { min-width:0; width:100%; min-height:44px; border:1px solid var(--rule); border-radius:var(--r-control); background:var(--surface-quiet); color:var(--text); padding:10px 12px; font:12px/1.5 "Inter","PingFang TC",sans-serif; }
.collection-tools input:hover, .collection-tools select:hover { border-color:var(--accent); }
.collection-tools input:focus-visible, .collection-tools select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.collection-tools .filter-clear { min-height:44px; }
.art-directed .library-section { padding-top:20px; }
.art-directed .library-summary { padding-bottom:8px; }
.project-collections { display:block; }
.project-collection { padding-block:48px 64px; scroll-margin-top:20px; }
.project-collection + .project-collection { border-top:1px solid var(--rule); }
.collection-section-head { display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:32px; align-items:baseline; margin-bottom:40px; }
.collection-number { font:300 56px/1 "Fraunces",Georgia,serif; color:var(--accent); }
.collection-section-head h2 { font-weight:300; font-size:42px; line-height:1.2; margin:0 0 16px; }
.collection-section-head p { font-size:13px; line-height:1.8; max-width:60ch; color:var(--text-dim); margin:0; }
.collection-result-count { font:11px/1.6 "JetBrains Mono",monospace; color:var(--text-muted); }
.collection-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
.view-projects .project-card { min-width:0; border:none; border-bottom:1px solid var(--rule); border-radius:0; background:none; box-shadow:none; overflow:visible; transform:none; }
.view-projects .project-card:hover { border-color:var(--accent); background:none; box-shadow:none; transform:none; }
.view-projects .project-card:hover h3 { color:var(--accent); }
.view-projects .project-card > img { width:100%; height:auto; aspect-ratio:8/5; object-fit:contain; border:0; border-radius:0; background:var(--surface-quiet); }
.view-projects .project-card .project-copy { padding:24px 0 28px; }
.view-projects .project-card h3 { font:300 28px/1.2 "Fraunces","Songti TC",Georgia,serif; margin:16px 0; }
.view-projects .project-card .project-copy > p { font-size:14px; line-height:1.85; max-width:48ch; }
.view-projects .project-card .text-thumb { width:100%; height:auto; min-height:0; aspect-ratio:8/5; background:var(--surface-quiet); border:0; padding:32px; display:flex; flex-direction:column; justify-content:space-between; align-items:start; }
.view-projects .text-thumb strong { font:300 clamp(64px,12cqw,140px)/1 "Fraunces",Georgia,serif; letter-spacing:-.045em; color:var(--text); }
.view-projects .text-thumb > span { color:var(--text-dim); font:10px/1.6 "JetBrains Mono",monospace; }
.view-projects .project-foot { border-top:none; padding-top:20px; }
.view-projects .project-foot .go { text-decoration:underline; text-underline-offset:5px; }
.project-collection:not([data-collection="restricted"]):not([data-collection="tools"]) .project-card:first-child { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:48px; align-items:center; padding-bottom:36px; }
.project-collection:not([data-collection="restricted"]):not([data-collection="tools"]) .project-card:first-child .project-copy { padding:0; }
.project-collection:not([data-collection="restricted"]):not([data-collection="tools"]) .project-card:first-child h3 { font-size:40px; }
.project-collection[data-collection="clinical"] .collection-cards { grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 28px; }
.project-collection[data-collection="clinical"] .project-card:not(:first-child) h3 { font-size:26px; }
.project-collection[data-collection="restricted"] { margin-top:16px; padding:40px 32px; border:1px solid var(--rule); background:var(--surface-quiet); }
.project-collection[data-collection="restricted"] .project-card > img { aspect-ratio:8/3; object-fit:contain; background:var(--bg); }
.project-collection[hidden], .project-card[hidden], .collection-tools[hidden] { display:none !important; }

/* Shared type, content-specific page structures. */
.art-directed :is(.biography-heading,.research-heading,.speaking-heading,.clinical-title) { padding-block:44px 48px; }
.art-directed :is(.biography-heading,.research-heading,.speaking-heading,.clinical-title) h1 { font-weight:300; font-size:clamp(40px,5.8cqw,68px); line-height:1.1; letter-spacing:-.04em; }
.art-directed .biography-layout { grid-template-columns:minmax(220px,.75fr) minmax(0,1.65fr); gap:64px; padding-top:48px; }
.art-directed .biography-intro .hero-lead { font:300 26px/1.6 "Fraunces","Songti TC",Georgia,serif; }
.art-directed .publication-body h2 { font-weight:300; font-size:52px; }
.art-directed .publication-body .research-title { font-weight:300; font-size:30px; }
.art-directed .invited-intro { gap:56px; padding-block:28px 36px; }
.art-directed .invited-intro h3 { font-weight:300; font-size:42px; }
.art-directed .invited-photo img { border:none; }
.art-directed .medway-chapter { border-left-width:1px; background:none; }
.art-directed .medway-copy h3 { font-weight:300; font-size:34px; }
.art-directed .new-footer { border-top:1px solid var(--rule); padding-top:32px; }

/* Container breakpoints account for the actual 175–200% page-scale width. */
@container portfolio-content (min-width:701px) {
  /* A filtered singleton is a readable spread, not a lone thumbnail in three columns. */
  .view-projects .collection-cards:not(:has(> .project-card:not([hidden]) ~ .project-card:not([hidden]))) { grid-template-columns:1fr; }
  .view-projects .project-collection:not([data-collection="restricted"]) .collection-cards:not(:has(> .project-card:not([hidden]) ~ .project-card:not([hidden]))) > .project-card:not([hidden]) { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:48px; align-items:center; padding-bottom:36px; }
}
@container portfolio-content (max-width:900px) {
  .edition-line { flex-wrap:wrap; }
  .edition-line p { display:none; }
  .home-introduction { column-gap:8%; }
  .art-directed .sample-triptych { gap:32px; }
  .art-directed .sample-tile:nth-child(n+2) { display:block; }
  .art-directed .sample-tile:nth-child(n+2) > img { margin-bottom:20px; }
  .home-story { gap:32px; }
  .collection-directory { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .art-directed .biography-layout { grid-template-columns:200px minmax(0,1fr); gap:36px; }
}
@container portfolio-content (max-width:700px) {
  .home-banner > img { aspect-ratio:16/9; }
  .home-banner figcaption { top:16%; }
  .home-banner .eyebrow { margin-bottom:12px; font-size:8px; letter-spacing:.1em; }
  .home-banner blockquote { font-size:clamp(21px,4.8cqw,34px); }
  html[data-i18n-mode="zh-TW"] .home-banner blockquote { font-size:clamp(21px,4.5cqw,32px); }
  .edition-line { font-size:9px; padding-block:16px; }
  .edition-line .text-link { max-width:40%; text-align:right; }
  .home-introduction { column-gap:24px; row-gap:28px; padding-block:48px; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); }
  .home-name h1 { font-size:clamp(40px,8cqw,56px); }
  .home-name .eyebrow { font-size:9px; max-width:22ch; line-height:1.8; }
  .home-portrait { grid-row:1; margin-top:0; align-self:center; }
  .home-portrait figcaption { font-size:9px; }
  .home-biography { grid-column:1/-1; grid-row:2; max-width:52ch; }
  .home-biography > p { font-size:16px; }
  .home-biography .home-brief-note { font-size:11px; }
  .home-biography .home-brief-detail { font-size:13px; }
  .home-current { grid-template-columns:1fr 1fr; gap:20px; margin-bottom:48px; padding-block:24px; }
  .home-current > div { grid-column:1/-1; grid-row:2; }
  .home-current > .micro { grid-column:2; grid-row:1; text-align:right; }
  .home-current > .text-link { grid-column:1/-1; grid-row:3; }
  .home-current p { font-size:14px; }
  .art-directed .chapter-head { flex-wrap:wrap; }
  .art-directed .sample-triptych { grid-template-columns:1fr; gap:32px; }
  .art-directed .sample-tile:first-child, .art-directed .sample-tile:nth-child(n+2) { grid-column:1; grid-row:auto; display:block; }
  .art-directed .sample-tile p { font-size:15px; }
  .art-directed .sample-tile h3, .art-directed .sample-tile:first-child h3 { font-size:30px; }
  .art-directed .portal-samples { padding-bottom:48px; }
  .home-story { grid-template-columns:1fr; gap:28px; padding-block:40px 48px; }
  .home-story-copy h2 { font-size:38px; }
  .home-story-copy > p:not([class]) { font-size:16px; max-width:44ch; }
  .art-directed .site-doorways { grid-template-columns:1fr; gap:16px; padding-block:36px 48px; }
  .art-directed .site-doorways .chapter-head h2 { margin-top:20px; max-width:16ch; }
  .art-directed .doorway p { font-size:15px; }
  .art-directed .collection-heading { grid-template-columns:minmax(0,1fr) 60px; gap:20px; padding-block:28px; }
  .art-directed .collection-heading h1 { font-size:42px; }
  .art-directed .collection-heading .hero-lead { font-size:16px; }
  .art-directed .library-count strong { font-size:48px; }
  .collection-directory, .collection-tools { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 24px; }
  .collection-tools .search-wrap { grid-column:1/-1; }
  .collection-tools input, .collection-tools select { font-size:16px; }
  .collection-tools label { font-size:13px; }
  .collection-section-head { grid-template-columns:36px minmax(0,1fr) auto; gap:12px; }
  .collection-section-head h2 { font-size:32px; }
  .collection-section-head p { font-size:15px; }
  .collection-number { font-size:32px; }
  .collection-cards, .project-collection[data-collection="clinical"] .collection-cards { grid-template-columns:1fr; gap:32px; }
  .project-collection:not([data-collection="restricted"]):not([data-collection="tools"]) .project-card:first-child { display:block; padding-bottom:0; }
  .project-collection:not([data-collection="restricted"]):not([data-collection="tools"]) .project-card:first-child .project-copy { padding-block:24px 28px; }
  .project-collection:not([data-collection="restricted"]):not([data-collection="tools"]) .project-card:first-child h3 { font-size:32px; }
  .view-projects .project-card .project-copy > p { font-size:16px; }
  .project-collection[data-collection="restricted"] { padding:28px 16px; }
  .art-directed .biography-layout { grid-template-columns:1fr; gap:32px; }
  .art-directed .profile-rail figure { max-width:260px; }
  .art-directed .biography-intro .hero-lead { font-size:24px; }
  .art-directed :is(.invited-intro,.medway-feature) { grid-template-columns:1fr; gap:24px; }
  .art-directed .invited-intro h3 { font-size:32px; }
  .art-directed .publication-body h2 { font-size:40px; }
}
@container portfolio-content (max-width:420px) {
  .home-introduction { grid-template-columns:1fr; }
  .home-name h1 { font-size:60px; }
  .home-portrait { grid-column:1; grid-row:2; width:84%; max-width:300px; justify-self:end; }
  .home-biography { grid-row:3; }
  .home-portrait figcaption { max-width:none; font-size:10px; }
  .edition-line { gap:12px; }
}
html[data-i18n-mode="zh-TW"] .art-directed :is(h1,h2,h3) { letter-spacing:0; }
@media (prefers-reduced-motion:reduce) { .art-directed *, .art-directed *::before, .art-directed *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }
@media print {
  .home-banner figcaption { position:static; width:auto; padding-block:16px; }
  .home-banner blockquote { color:var(--text); font-size:32px; }
  .collection-tools { display:none !important; }
  .home-introduction, .home-story, .art-directed .site-doorways { display:block; padding-block:24px; }
  .home-portrait { max-width:200px; margin:24px 0; }
  .collection-cards { grid-template-columns:1fr 1fr; }
  .project-card, .home-banner { break-inside:avoid; }
}

/* speaking-update */
/* Speaking additions: use the existing editorial system, never crop the archive. */
.recent-speaking { padding-block: 8px 48px; }
.recent-heading { border-top: 1px solid var(--rule); padding-block: 24px; }
.recent-heading h2 { font-size: 32px; margin: 12px 0 0; line-height: 1.2; }
.invited-feature { scroll-margin-top: 24px; min-width: 0; }
.invited-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; padding-block: 16px 28px; align-items: start; }
.invited-intro h3 { font-size: 34px; line-height: 1.3; margin: 20px 0 12px; }
.invited-subtitle { color: var(--text-dim); font-size: 15px; line-height: 1.7; margin: 0; }
.invited-context p { font-size: 13px; line-height: 1.8; color: var(--text-dim); }
.invited-context .event-date { color: var(--accent); font: 12px/1.6 "JetBrains Mono", monospace; margin-top: 0; }
.invited-photo { margin: 0; }
.invited-photo img, .kian-kok-gallery img { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: auto; object-fit: contain; border-radius: 0; border: 1px solid var(--rule); }
.invited-photo figcaption, .kian-kok-gallery figcaption { font-size: 11px; line-height: 1.7; color: var(--text-dim); padding-top: 12px; }
.event-source-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 11px; line-height: 1.7; color: var(--text-muted); margin-block: 12px 24px; }
.speaking-disclosure { border: 1px solid var(--rule); background: var(--surface-quiet); border-radius: var(--r-control); margin-block: 12px; }
.speaking-disclosure > summary { cursor: pointer; padding: 20px 24px; font-size: 14px; line-height: 1.6; font-weight: 600; }
.speaking-disclosure > summary::marker { color: var(--accent); }
.speaking-disclosure-body { padding: 0 24px 24px; font-size: 13px; line-height: 1.85; color: var(--text-dim); }
.recap-byline { color: var(--accent); margin-top: 0; }
.recap-language-note { font-size: 11px; color: var(--text-muted); border-bottom: 1px solid var(--rule); padding-bottom: 20px; }
.recap-prose { max-width: 64ch; margin: 24px auto 32px; font-size: 15px; line-height: 1.95; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.kian-kok-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-block: 24px; }
.kian-kok-gallery figure { margin: 0; min-width: 0; }
.medway-feature { display: grid; grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr); gap: 40px; padding-top: 48px; margin-top: 48px; border-top: 1px solid var(--rule); }
.medway-chapter { border-left: 3px solid var(--accent); background: var(--surface-quiet); padding: 24px; }
.chapter-marker { font: 500 96px/1 "Fraunces", Georgia, serif; color: var(--accent); margin: 24px 0 12px; }
.chapter-label { color: var(--text-dim); font-size: 12px; }
.chapter-duration { font: 16px/1.6 "JetBrains Mono", monospace; color: var(--text); margin: 20px 0; }
.medway-copy h3 { font-size: 28px; line-height: 1.4; margin: 12px 0 24px; }
.medway-copy p { font-size: 13px; line-height: 1.85; color: var(--text-dim); }
.medway-copy .eyebrow { color: var(--accent); }
.medway-copy .media-note { font-size: 11px; margin-top: 24px; color: var(--text-muted); }
.view-talks .record-date { color: var(--accent); font-size: 12px; }
.record-supplement { border-left: 2px solid var(--rule); padding-left: 16px; }
.record-supplement a { display: inline-block; margin-right: 12px; }
@media (max-width: 680px), (pointer: coarse) and (max-width: 900px) {
  .invited-intro, .medway-feature { grid-template-columns: 1fr; gap: 24px; }
  .invited-intro h3 { font-size: 30px; }
  .invited-context p, .speaking-disclosure-body, .recap-prose, .medway-copy p { font-size: 16px; }
  .invited-context .event-date, .view-talks .record-date { font-size: 14px; }
  .speaking-disclosure > summary { font-size: 16px; padding: 16px; }
  .speaking-disclosure-body { padding: 0 16px 20px; }
  .kian-kok-gallery { grid-template-columns: 1fr; }
  .event-source-line, .invited-photo figcaption, .kian-kok-gallery figcaption, .recap-language-note, .medway-copy .media-note { font-size: 13px; }
  .medway-copy h3 { font-size: 26px; }
  .medway-feature { margin-top: 32px; padding-top: 32px; }
  .medway-chapter { padding: 24px; }
}
@media print {
  .invited-intro, .medway-feature { display: block; }
  .speaking-disclosure { break-inside: auto; }
  .invited-photo, .kian-kok-gallery figure { break-inside: avoid; }
}

/* editorial */
/* Complete edition: one visual language, distinct reading rhythms. */
html { scroll-behavior:smooth; }
.language-switch a.language-chip { display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:32px; text-decoration:none; }
.language-switch a[aria-current="page"] { background:var(--text); color:var(--bg); }
.entry-paths { display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:32px; align-items:start; padding-block:40px 52px; border-bottom:1px solid var(--rule); }
.entry-paths h2 { font:300 28px/1.3 "Fraunces","Songti TC",serif; margin:0; }
.entry-paths a { text-decoration:none; padding-left:20px; border-left:1px solid var(--rule); }
.entry-paths strong { display:block; font-size:14px; font-weight:500; margin-bottom:12px; }
.entry-paths span { display:block; font-size:12px; line-height:1.9; color:var(--text-dim); }
.entry-paths a:hover strong { color:var(--accent); }
.art-directed .home-introduction { padding-top:64px; }
.story-summary { display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center; border-bottom:1px solid var(--rule); padding-block:36px 48px; }
.story-summary img { width:100%; height:auto; object-fit:contain; border-radius:0; }
.story-summary h3 { font:300 clamp(28px,4cqw,44px)/1.2 "Fraunces","Songti TC",serif; margin:20px 0; }
.story-summary p { font-size:14px; line-height:1.9; max-width:44ch; color:var(--text-dim); }
.story-summary .text-link { display:inline-block; margin-top:16px; }
.story-summary.medway-summary { grid-template-columns:.65fr 1.35fr; }
.series-identity { border-block:1px solid var(--rule); padding-block:32px; min-width:0; }
.series-identity .series-name { display:block; font:300 clamp(32px,4cqw,52px)/1.2 "Fraunces",serif; color:var(--accent); overflow-wrap:anywhere; }
.series-identity .series-title { display:block; margin-top:12px; font:400 20px/1.6 "Songti TC","Noto Serif TC",serif; color:var(--text-dim); }
/* Photo-first workshop: compact cover, factual role, optional contact sheet. */
.workshop-section { scroll-margin-top:24px; }
.workshop-feature { display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:40px; align-items:start; }
.workshop-section figure { margin:0; min-width:0; }
.workshop-section figure a { display:block; }
.workshop-section img { display:block; width:100%; height:auto; object-fit:contain; border-radius:0; }
.workshop-section figcaption { margin-top:12px; font-size:12px; line-height:1.7; color:var(--text-dim); }
.workshop-copy { min-width:0; }
.workshop-copy > .eyebrow { margin-top:0; }
.workshop-copy h2 { font:300 clamp(28px,4cqw,40px)/1.3 "Fraunces","Songti TC",serif; margin:16px 0 20px; }
.workshop-date { margin:12px 0; color:var(--text-dim); font-size:14px; }
.workshop-contribution { margin:16px 0; font-size:16px; line-height:1.8; color:var(--text); }
.workshop-photo-note { font-size:13px; line-height:1.7; color:var(--text-dim); }
.workshop-album { margin-top:28px; border-block:1px solid var(--rule); }
.workshop-album > summary { cursor:pointer; padding:20px 0; min-height:56px; font-size:16px; line-height:1.5; color:var(--accent); }
.workshop-album > summary:hover { color:var(--accent-bright); }
.workshop-album > summary::marker { color:var(--accent); }
.workshop-photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 24px; padding-block:8px 28px; align-items:start; }
@container portfolio-content (max-width:800px) {
  .workshop-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container portfolio-content (max-width:640px) {
  .workshop-feature { grid-template-columns:minmax(0,1fr); gap:24px; }
  .workshop-feature > figure { width:100%; max-width:360px; }
}
@container portfolio-content (max-width:440px) {
  .workshop-photo-grid { grid-template-columns:minmax(0,1fr); }
}
/* A compact source poster supports the story rather than filling the page. */
.multipage .speaking-cover.ntnu-feature { display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); align-items:start; gap:40px; }
#featured-talk .ntnu-feature > figure { width:100%; max-width:320px; border:0; }
#featured-talk .poster-link { display:block; text-decoration:none; }
#featured-talk .poster-link img { width:100%; height:auto; object-fit:contain; }
#featured-talk .poster-open { display:block; padding-top:12px; font-size:13px; line-height:1.7; color:var(--accent); }
#featured-talk .poster-link:hover .poster-open { text-decoration:underline; text-underline-offset:4px; }
#featured-talk .ntnu-feature figcaption { padding:8px 0 0; }
#featured-talk .talk-feature-copy { display:block; padding:0; min-width:0; }
#featured-talk .talk-feature-copy h2 { margin:16px 0 20px; }
#featured-talk .talk-feature-copy p { margin:0 0 16px; font-size:14px; line-height:1.9; max-width:60ch; }
#featured-talk .talk-feature-copy .actions { margin-top:24px; }
@container portfolio-content (max-width:640px) {
  .multipage .speaking-cover.ntnu-feature { grid-template-columns:minmax(0,1fr); gap:24px; }
  #featured-talk .talk-feature-copy p { font-size:16px; }
}
.detail-heading { padding-block:44px 56px; display:grid; grid-template-columns:1fr auto; gap:20px 40px; border-bottom:1px solid var(--rule); }
.detail-heading > * { grid-column:1; }
.detail-heading .back-link { grid-column:2; grid-row:1; font-size:12px; color:var(--text-dim); }
.detail-heading h1 { font:300 clamp(40px,6cqw,80px)/1.08 "Fraunces","Songti TC",serif; letter-spacing:-.045em; margin:0; max-width:17ch; }
.detail-heading .hero-lead { max-width:54ch; margin:12px 0 0; font-size:16px; line-height:1.9; }
.detail-heading .eyebrow { margin:16px 0 0; }
.case-image { margin-block:48px 0; }
.case-image img { width:100%; height:auto; max-height:640px; object-fit:contain; background:#090909; }
.case-image figcaption { display:flex; justify-content:space-between; gap:16px; padding-block:16px; font:10px/1.8 "JetBrains Mono",monospace; color:var(--text-dim); border-bottom:1px solid var(--rule); }
.case-essay { display:grid; grid-template-columns:.6fr 1.4fr; gap:48px 80px; padding-block:56px 80px; }
.case-essay > aside { align-self:start; }
.case-essay h2 { font:300 28px/1.3 "Fraunces","Songti TC",serif; margin:0 0 20px; }
.case-essay section { margin-bottom:40px; }
.case-essay p { font-size:16px; line-height:1.95; color:var(--text-dim); max-width:60ch; }
.case-essay .scope-note { border-left:2px solid var(--accent); padding-left:24px; }
.detail-bottom { padding-block:36px 60px; border-top:1px solid var(--rule); display:flex; gap:24px; flex-wrap:wrap; justify-content:space-between; }
.story-page .story-article { padding-block:40px 72px; }
.story-page .invited-feature { border-top:0; }
.story-page .invited-photo img { height:auto; object-fit:contain; }
.story-page .recap-prose { font-family:"Fraunces","Songti TC","Noto Serif TC",Georgia,serif; font-size:18px; line-height:2; max-width:42em; }
.story-page #same-stage { background:#e9e2d5; color:#26241f; border:0; padding:clamp(24px,5cqw,64px); margin-block:48px; }
.story-page #same-stage summary { color:#26241f; font-family:"Fraunces","Songti TC",serif; font-size:26px; }
.story-page #same-stage :is(p,.recap-prose) { color:#39362f; }
.story-page .speaking-disclosure-body { padding:28px 0 0; }
.story-page .invited-intro h2,.story-page .medway-copy h2 { font:300 32px/1.4 "Fraunces","Songti TC",serif; }
.story-page .story-context { max-width:60ch; margin:48px auto; }
.story-context h2 { font:300 30px/1.3 "Fraunces","Songti TC",serif; }
.story-context p { font-size:16px; line-height:1.95; color:var(--text-dim); }
.privacy-content { max-width:800px; padding-block:48px 80px; }
.privacy-content section { margin-bottom:40px; }
.privacy-content h2 { font:300 30px/1.3 "Fraunces","Songti TC",serif; }
.privacy-content p { color:var(--text-dim); font-size:15px; line-height:1.95; }
.privacy-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.privacy-actions button { font:inherit; cursor:pointer; }
.consent-panel { position:fixed; z-index:100; right:20px; bottom:20px; width:min(420px,calc(100% - 40px)); padding:24px; border:1px solid var(--accent); background:var(--bg); box-shadow:0 8px 28px #0005; }
.consent-panel h2 { font:300 25px/1.3 "Fraunces","Songti TC",serif; margin-top:0; }
.consent-panel p { font-size:13px; line-height:1.8; color:var(--text-dim); }
.consent-panel .privacy-actions { display:grid; grid-template-columns:1fr 1fr; }
.consent-panel .button { padding:10px; font-size:12px; }
.consent-panel > a { font-size:12px; }
[hidden] { display:none !important; }
.new-footer a { overflow-wrap:anywhere; }
.art-directed .home-portrait img, .art-directed .biography-photo img { height:auto; object-fit:contain; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.missing-page { padding-block:80px 120px; }
.missing-page h1 { font:300 clamp(36px,6vw,72px)/1.15 "Fraunces","Songti TC",serif; max-width:15ch; }
/* Primary actions should read as actions, not 12px editorial annotations.
   Scope excludes site navigation, language/scale controls and the print-first CV. */
body.art-directed main .button {
  min-height:56px;
  padding:16px 24px;
  font-size:16px;
  line-height:1.5;
  font-weight:650;
  text-align:center;
  white-space:normal;
  max-width:100%;
  gap:16px;
}
body.art-directed main .button:active { transform:translateY(0); }
.case-page .detail-heading { grid-template-columns:minmax(0,1fr); padding-bottom:36px; }
.case-page .detail-heading .back-link { grid-column:1; grid-row:auto; justify-self:start; min-height:44px; display:inline-flex; align-items:center; }
.case-page .detail-heading .eyebrow { margin:0; }
.case-page .detail-heading h1 { font-size:clamp(36px,5cqw,64px); max-width:24ch; overflow-wrap:normal; }
.case-page .detail-heading .hero-lead { margin:0; }
.case-launch { margin-top:8px; min-width:0; }
.case-launch-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; }
body.art-directed main .project-launch-button {
  min-height:68px;
  padding:20px 28px;
  font-size:18px;
  font-weight:650;
  line-height:1.45;
  min-width:min(340px,100%);
  justify-content:space-between;
  gap:24px;
  text-align:left;
}
.project-launch-button > span:first-child { min-width:0; }
.project-launch-button .launch-arrow { flex:0 0 auto; font-size:24px; line-height:1; }
.case-launch .case-background-link { min-height:48px; display:inline-flex; align-items:center; padding-block:12px; font-size:15px; }
.case-page .launch-note { margin:12px 0 0; font-size:13px; line-height:1.7; color:var(--text-dim); }
.case-page .case-image { margin-top:36px; }
.case-page .case-essay { grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); gap:48px; }
.case-page .case-launch-repeat { border-top:2px solid var(--accent); padding-top:24px; }
.case-launch-repeat > .eyebrow { margin:0 0 20px; }
.case-launch-repeat .project-launch-button { width:100%; }
.case-page .launch-reading-note { font-size:14px; line-height:1.8; margin:20px 0 0; }
#project-background { scroll-margin-top:28px; }
@container portfolio-content (max-width:800px) {
  .entry-paths { grid-template-columns:1fr 1fr; gap:28px; }
  .entry-paths h2 { align-self:center; }
  .detail-heading { grid-template-columns:1fr; padding-block:28px 36px; }
  .detail-heading .back-link { grid-column:1; grid-row:1; }
  .story-summary { gap:28px; }
  .case-essay { gap:36px; grid-template-columns:1fr; }
  .case-essay aside { display:flex; flex-wrap:wrap; gap:24px; align-items:center; }
  .case-essay aside p { margin:0; }
  .case-page .case-essay { grid-template-columns:minmax(0,1fr); gap:36px; }
  .case-page .case-launch-repeat { display:block; }
  .case-launch-repeat .project-launch-button { width:auto; }
  .case-page .case-launch-repeat > .eyebrow { margin:0 0 20px; }
  .case-page .case-launch-repeat .launch-note { margin:12px 0 0; }
  .case-page .case-launch-repeat .launch-reading-note { margin:20px 0 0; }
}
@container portfolio-content (max-width:560px) {
  .entry-paths { display:block; padding-block:28px; }
  .entry-paths h2 { margin-bottom:20px; }
  .entry-paths a { display:block; border-left:0; border-top:1px solid var(--rule); padding:20px 0; }
  .entry-paths span { font-size:14px; }
  .story-summary,.story-summary.medway-summary { grid-template-columns:1fr; }
  .story-summary p { font-size:16px; }
  .detail-heading h1 { font-size:42px; overflow-wrap:anywhere; }
  .case-image { margin-top:28px; }
  .case-image figcaption { flex-wrap:wrap; }
  .story-page .recap-prose { font-size:17px; line-height:1.95; }
  body.art-directed main .button { width:100%; }
  .case-launch-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
  body.art-directed main .project-launch-button { min-width:0; width:100%; padding:20px 24px; font-size:18px; }
  .case-launch .case-background-link { justify-self:start; }
  .case-page .detail-heading h1 { font-size:38px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }
@media print { .consent-panel,.privacy-actions { display:none !important; } .story-page #same-stage { background:white; color:black; } }

/* Visitor-path refinement: preserve the cover; make inside pages useful sooner.
   All image limits are display-only. Original files and proportions are retained. */
.art-directed:not(.view-index) :is(.page-hero,.research-heading,.biography-heading,.collection-heading,.detail-heading) { padding-block:24px 28px; }
.art-directed:not(.view-index) :is(.page-hero,.research-heading,.biography-heading,.collection-heading,.detail-heading) h1 { font-size:clamp(34px,4.4cqw,48px); line-height:1.15; margin-block:12px 16px; max-width:26ch; }
.art-directed:not(.view-index) .section { margin-block:36px; }
.art-directed:not(.view-index) .editorial-section { margin-block:36px; }
.art-directed:not(.view-index) .hero-lead { line-height:1.7; }
.art-directed main .text-link { display:inline-flex; align-items:center; min-height:44px; font-size:14px; line-height:1.6; padding-block:8px; }
.art-directed main .page-deck a { min-height:44px; display:inline-flex; align-items:center; font-size:13px; }
.art-directed .actionable-work { min-width:0; }
.art-directed .work-title-link { color:inherit; text-decoration:none; }
.art-directed .work-title-link:hover { color:var(--accent); text-decoration:underline; text-underline-offset:5px; }
.art-directed .work-actions { display:flex; flex-wrap:wrap; align-items:center; gap:4px 20px; margin-top:16px; }
.art-directed .work-actions .work-open { color:var(--accent-bright); font-size:15px; text-decoration:underline; text-underline-offset:5px; }
.art-directed .work-actions .work-background { font-weight:400; color:var(--text-dim); }
.art-directed .connection-note { font-size:12px; color:var(--text-dim); line-height:1.7; margin-block:4px 20px; }
.art-directed.view-about .biography-layout { display:block; padding-top:24px; }
.biography-opening { display:grid; grid-template-columns:160px minmax(0,1fr); gap:36px; align-items:start; }
.art-directed.view-about .profile-rail { display:block; }
.art-directed.view-about .profile-rail figure { margin-bottom:12px; }
.art-directed.view-about .biography-intro .hero-lead { font-size:22px; line-height:1.65; }
.profile-contents { display:flex; flex-wrap:wrap; gap:4px 24px; border-block:1px solid var(--rule); padding-block:12px; margin-block:24px; }
.profile-contents a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; text-decoration:none; color:var(--text-dim); }
.profile-contents a:hover { color:var(--accent); }

/* Catalogue: a compact directory followed by readable two-column entries.
   The opening card no longer expands into a full-width promotional spread. */
.art-directed.view-projects .collection-heading { grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; }
.art-directed.view-projects .library-count { padding:0; border:0; gap:4px; }
.art-directed.view-projects .library-count strong { font-size:40px; }
.art-directed.view-projects .collection-directory { display:flex; flex-wrap:wrap; gap:8px 24px; padding-block:12px 20px; }
.art-directed.view-projects .collection-door { display:flex; align-items:baseline; gap:12px; padding-block:8px; border:0; min-height:44px; }
.art-directed.view-projects .collection-door .micro { display:none; }
.art-directed.view-projects .collection-door strong { font-size:18px; }
.art-directed.view-projects .collection-tools { padding-block:16px; }
.art-directed.view-projects .project-collection { padding-block:28px 36px; }
.art-directed.view-projects .collection-section-head { grid-template-columns:32px minmax(0,1fr) auto; gap:16px; margin-bottom:24px; }
.art-directed.view-projects .collection-number { font-size:28px; }
.art-directed.view-projects .collection-section-head h2 { font-size:28px; margin-bottom:8px; }
.art-directed.view-projects .collection-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 32px; }
.art-directed.view-projects .project-collection .collection-cards > .project-card,
.art-directed.view-projects .project-collection .collection-cards > .project-card:first-child,
.art-directed.view-projects .project-collection .collection-cards > .project-card:not([hidden]) {
  grid-column:auto; display:grid; grid-template-columns:112px minmax(0,1fr); gap:20px;
  align-items:start; padding-block:0 24px; cursor:auto;
}
.art-directed.view-projects .project-card > img { width:112px; max-height:140px; height:auto; aspect-ratio:auto; object-fit:contain; margin:4px 0 0; }
.art-directed.view-projects .project-card .text-thumb { width:112px; height:80px; aspect-ratio:auto; padding:12px; margin-top:4px; }
.art-directed.view-projects .text-thumb strong { font-size:36px; }
.art-directed.view-projects .text-thumb > span { display:none; }
.art-directed.view-projects .project-collection .project-card .project-copy { padding:0; min-width:0; }
.art-directed.view-projects .project-collection .project-card h3 { font-size:24px; margin:8px 0 12px; }
.art-directed.view-projects .project-card .project-copy > p { font-size:14px; line-height:1.75; margin-block:12px; }
.art-directed.view-projects .project-foot { padding-top:8px; margin-top:8px; }
.art-directed.view-projects .project-foot:empty { display:none; }
.art-directed.view-projects .project-collection[data-collection="restricted"] { padding:24px; }

/* Cases: the main action precedes a small side preview, never a wall of imagery. */
.case-page .case-opening { display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,280px); gap:24px 36px; align-items:start; }
.case-opening .case-opening-copy { grid-column:1; min-width:0; }
.case-page .case-opening h1 { font-size:clamp(34px,4.4cqw,48px); }
.case-page .case-opening .hero-lead { font-size:15px; line-height:1.75; max-width:56ch; }
.case-opening .case-opening-copy > .eyebrow { margin-top:12px; }
.case-page .case-opening .case-image { grid-column:2; grid-row:1; margin:52px 0 0; width:100%; }
.case-page .case-opening .case-image img { display:block; width:100%; max-height:220px; height:auto; object-fit:contain; background:var(--surface-quiet); }
.case-page .case-image figcaption { font-size:11px; padding-block:12px; border:0; }
.case-opening .case-launch { margin-top:20px; }
.case-opening .case-launch-actions { gap:4px 20px; }
.case-page .case-opening .case-scope { grid-column:1/-1; border-left:2px solid var(--accent); padding:4px 0 4px 20px; }
.case-scope h2 { font:600 13px/1.6 "Inter","PingFang TC",sans-serif; margin:0 0 4px; }
.case-scope p { font-size:13px; line-height:1.75; color:var(--text-dim); margin:0; max-width:90ch; }
.case-page .case-essay { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; padding-block:32px 36px; }
.case-page .case-essay h2 { font-size:26px; margin-bottom:12px; }
.case-page .case-essay section { margin:0; }
.case-page .case-essay p { font-size:15px; line-height:1.8; margin:0; }
.detail-bottom { padding-block:20px 32px; }

/* Research: one reading column with role and evidence close to the paper. */
.art-directed .publication-layout { display:block; padding-block:24px 32px; }
.art-directed .publication-body { max-width:900px; }
.art-directed .publication-body h2 { font-size:36px; margin-block:12px; }
.art-directed .publication-body .research-title { font-size:24px; line-height:1.45; max-width:48ch; margin:12px 0 20px; }
.art-directed .publication-meta { padding:0; border:0; margin-block:24px; }
.art-directed .publication-meta dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-flow:column; grid-template-rows:auto auto; gap:8px 24px; margin-block:20px 12px; }
.art-directed .publication-meta dt { margin:0; font-size:11px; }
.art-directed .publication-meta dd { margin:0; font-size:14px; }
.art-directed .publication-meta > p { font-size:13px; max-width:80ch; margin-top:12px; }
.art-directed .publication-body .evidence-split { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.art-directed .publication-body .evidence-block { padding:20px 0 0; }
.art-directed .publication-body .evidence-label { font-size:11px; }
.art-directed .research-directions .focus-track { gap:24px; padding-block:16px; }
.art-directed .source-details > summary { min-height:44px; font-size:14px; padding-block:12px; }

/* Clinical work and recruiter pages: retain evidence, shorten vertical detours. */
.art-directed.view-work .case-desk { grid-template-columns:minmax(0,1fr); }
.art-directed.view-work .case-rail { display:flex; flex-wrap:wrap; gap:8px 24px; padding-top:16px; }
.art-directed.view-work .case-rail .micro { display:none; }
.art-directed.view-work .case-rail a { min-height:44px; font-size:13px; }
.art-directed.view-work .feature-side { padding:20px; }
.art-directed.view-work .work-sample-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.art-directed.view-work .work-sample { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:start; gap:20px; }
.art-directed.view-work .work-sample > img { width:112px; height:auto; max-height:140px; object-fit:contain; }
.art-directed.view-work .work-sample h3 { font-size:24px; font-weight:300; font-family:"Fraunces","Songti TC",serif; margin-block:8px 12px; }
.art-directed.view-work .work-sample p { font-size:14px; line-height:1.8; }
.brief-cases article > .text-link { margin-right:16px; }
.art-directed .brief-section { padding-block:24px 28px; }
.art-directed .brief-cases p { font-size:14px; line-height:1.75; }

/* Speaking: the complete record is first; photographs support deeper reading. */
.art-directed.view-talks .recent-speaking { padding-block:0 24px; }
.art-directed.view-talks .recent-heading { padding-block:20px; }
.art-directed.view-talks .story-summary { grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:32px; padding-block:24px 32px; align-items:start; }
.art-directed.view-talks .story-summary img { max-height:220px; object-fit:contain; }
.art-directed.view-talks .story-summary h3 { font-size:30px; margin-block:12px; }
.art-directed.view-talks .story-summary p { max-width:62ch; }
.art-directed.view-talks .series-identity { padding-block:20px; }
.art-directed.view-talks .series-identity .series-name { font-size:36px; }
.art-directed.view-talks .record-row { grid-template-columns:100px minmax(160px,.8fr) minmax(0,1.6fr); padding-block:20px; gap:12px 24px; }
.record-role { display:block; margin-top:8px; font:400 12px/1.6 "Inter","PingFang TC",sans-serif; color:var(--text-dim); }
.art-directed.view-talks .gallery-strip { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:16px; }
.art-directed.view-talks .gallery-strip img { height:auto; max-height:220px; width:100%; object-fit:contain; }
.supporting-gallery > summary,.conversation-background > summary { cursor:pointer; min-height:48px; padding-block:12px; font-size:15px; color:var(--accent); }
.supporting-gallery { border-block:1px solid var(--rule); }
.story-page .story-article { padding-block:24px 32px; }
.story-page .story-opening { display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,280px); gap:32px; align-items:start; }
.story-page .story-opening .invited-intro { display:block; padding:0; }
.story-page .story-opening .invited-photo { margin:0; }
.story-page .story-opening img { max-height:240px; width:100%; object-fit:contain; }
.story-page .invited-intro h2 { font-size:28px; margin-block:12px; }
.story-page .kian-kok-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
.story-page .kian-kok-gallery img { max-height:260px; object-fit:contain; }
.story-page #same-stage { margin-block:24px; padding:28px; }
.story-page .medway-feature { display:block; margin-top:0; padding-top:0; }
.story-page .medway-chapter { display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; padding:12px 0; border:0; border-bottom:1px solid var(--rule); }
.story-page .medway-chapter > p { margin:0; font-size:13px; }
.story-page .medway-copy { max-width:76ch; }
.story-page .medway-copy .actions { margin-block:20px; }
.story-page .medway-copy .chapter-question { font:300 23px/1.6 "Fraunces","Songti TC",serif; color:var(--text); margin-top:24px; }
.story-page .medway-copy > p { font-size:15px; line-height:1.8; }
.story-page .medway-copy .media-note { font-size:12px; }
.story-page .conversation-background { margin-block:0 28px; border-top:1px solid var(--rule); }
.story-page .conversation-background .story-context { margin:16px 0 24px; max-width:72ch; }
.original-talk-title { font-size:13px; color:var(--text-dim); margin:0; }
html[data-i18n-mode="orig"] .original-talk-title,html[data-i18n-mode="zh-TW"] .original-talk-title { display:none; }

/* Real content-width breakpoints also cover desktop at 175–200% reading size. */
@container portfolio-content (max-width:900px) {
  .art-directed.view-projects .collection-cards { grid-template-columns:minmax(0,1fr); }
  .art-directed.view-projects .project-collection .collection-cards > .project-card,
  .art-directed.view-projects .project-collection .collection-cards > .project-card:first-child,
  .art-directed.view-projects .project-collection .collection-cards > .project-card:not([hidden]) { grid-template-columns:136px minmax(0,1fr); }
  .art-directed.view-projects .project-card > img { width:136px; }
  .art-directed.view-work .work-sample-grid { grid-template-columns:minmax(0,1fr); }
  .art-directed .brief-cases,.art-directed .brief-fit { grid-template-columns:minmax(0,1fr); gap:20px; }
}
@container portfolio-content (max-width:700px) {
  .case-page .case-opening,.story-page .story-opening { grid-template-columns:minmax(0,1fr); gap:24px; }
  .case-page .case-opening .case-image { grid-column:1; grid-row:auto; max-width:260px; margin:0; }
  .case-page .case-opening .case-scope { grid-column:1; }
  .case-page .case-essay,.art-directed .publication-body .evidence-split { grid-template-columns:minmax(0,1fr); gap:24px; }
  .art-directed.view-talks .story-summary { grid-template-columns:160px minmax(0,1fr); gap:24px; }
  .art-directed.view-talks .record-row { grid-template-columns:minmax(0,1fr); gap:8px; }
  .art-directed.view-talks .record-row > p:last-child:not(:nth-child(3)) { grid-column:1; }
  .art-directed.view-talks .gallery-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .story-page .story-opening .invited-photo { max-width:280px; }
  .art-directed .brief-arrival,.art-directed .brief-background { grid-template-columns:minmax(0,1fr); gap:24px; }
  .art-directed .publication-meta dl { gap:8px 16px; }
}
@container portfolio-content (max-width:460px) {
  .biography-opening { grid-template-columns:minmax(0,1fr); gap:24px; }
  .art-directed.view-about .profile-rail { max-width:160px; }
  .art-directed:not(.view-index) :is(.page-hero,.research-heading,.biography-heading,.collection-heading,.detail-heading) h1 { font-size:34px; }
  .art-directed.view-projects .collection-heading { grid-template-columns:minmax(0,1fr); }
  .art-directed.view-projects .library-count { flex-direction:row; justify-content:start; align-items:baseline; gap:12px; }
  .art-directed.view-projects .project-collection .collection-cards > .project-card,
  .art-directed.view-projects .project-collection .collection-cards > .project-card:first-child,
  .art-directed.view-projects .project-collection .collection-cards > .project-card:not([hidden]) { grid-template-columns:72px minmax(0,1fr); gap:16px; }
  .art-directed.view-projects .project-card > img { width:72px; }
  .art-directed.view-projects .project-card .text-thumb { width:72px; height:60px; padding:8px; }
  .art-directed.view-projects .text-thumb strong { font-size:28px; }
  .art-directed.view-projects .project-collection .project-card h3 { font-size:23px; overflow-wrap:anywhere; }
  .art-directed.view-talks .story-summary { grid-template-columns:minmax(0,1fr); }
  .art-directed.view-talks .story-summary > a { max-width:260px; }
  .art-directed.view-talks .series-identity { display:none; }
  .art-directed.view-work .work-sample { grid-template-columns:72px minmax(0,1fr); gap:16px; }
  .art-directed.view-work .work-sample > img { width:72px; }
  .art-directed .publication-meta dl { grid-template-columns:80px minmax(0,1fr); grid-template-rows:none; grid-auto-flow:row; }
  .art-directed .publication-body .research-title { font-size:22px; }
  .story-page #same-stage { padding:20px; }
  .story-page .kian-kok-gallery { grid-template-columns:minmax(0,1fr); }
}
@media print {
  .case-page .case-opening,.story-page .story-opening { display:block; }
  .case-page .case-opening .case-image { max-width:240px; margin-block:20px; }
  .work-actions { break-inside:avoid; }
}

/* mobile */
/* Phone edition: an independent reading rhythm, not a scaled desktop spread.
   Screen-only: desktop and A4 print rules remain unchanged. No image is replaced. */
@media screen and (max-width:760px) {
  body.art-directed { zoom:1; }
  .art-directed .shell { width:calc(100% - 40px); min-width:0; }
  .art-directed main :is(section,article,aside,nav,div,figure) { min-width:0; }
  .art-directed :is(p,h1,h2,h3,h4,dd,a,summary) { overflow-wrap:anywhere; }
  .art-directed :is(.eyebrow,.micro,.card-meta,.status-pill,.tag) { white-space:normal; }
  .art-directed .masthead { position:relative; }
  .art-directed .masthead-inner { min-height:64px; padding-block:8px; flex-wrap:wrap; gap:0 12px; }
  .art-directed .wordmark { font-size:20px; min-height:48px; display:inline-flex; align-items:center; }
  .art-directed .menu-toggle { min-width:72px; min-height:48px; font-size:14px; }
  .js .art-directed .menu-toggle { display:block; }
  .art-directed .menu-toggle[aria-expanded="true"] { color:var(--bg); background:var(--accent); border-color:var(--accent); }
  .art-directed .main-navigation { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); flex-basis:100%; gap:0 16px; padding-block:8px; }
  .js .art-directed .main-navigation:not(.is-open) { display:none; }
  .art-directed .main-navigation a { min-width:0; min-height:48px; display:flex; align-items:center; padding:12px 0; white-space:normal; font-size:15px; border-bottom:1px solid var(--rule); }
  .art-directed .main-navigation .nav-recruiter { grid-column:1/-1; border-left:0; margin-top:0; padding-left:0; }
  .art-directed .utility-bar { padding-block:4px 8px; }
  .art-directed .utility-contact { display:none; }
  .art-directed .language-block { justify-content:space-between; width:100%; gap:12px; }
  .art-directed .language-switch { gap:4px; flex-wrap:wrap; }
  .art-directed .language-label { font-size:11px; }
  .art-directed .language-chip { min-width:44px; min-height:44px; padding:8px; font-size:13px; }
  .art-directed .reading-scale-control { display:none !important; }
  .art-directed .page-deck,.art-directed .profile-contents,.art-directed .case-rail { position:static; display:flex; flex-wrap:wrap; gap:4px 16px; padding-block:12px; margin-block:12px 24px; }
  .art-directed main :is(.text-link,.back-link,.story-all-link) { min-height:48px; font-size:15px; padding-block:12px; }
  .art-directed main :is(.page-deck,.profile-contents,.case-rail) a { min-height:44px; font-size:14px; }
  body.art-directed main .button { min-height:56px; padding:16px 20px; width:100%; font-size:16px; }
  .art-directed .actions { display:flex; flex-direction:column; align-items:stretch; gap:8px; margin-top:20px; }
  .art-directed .actions .text-link { align-self:flex-start; }

  /* Keep the complete horizontal photograph and overprinted serif quote. */
  .art-directed .home-banner > img { aspect-ratio:1600/1068; height:auto; object-fit:contain; }
  .art-directed .home-banner figcaption { left:63%; top:18%; width:33%; }
  .art-directed .home-banner .eyebrow { font-size:8px; letter-spacing:.04em; margin-bottom:8px; }
  .art-directed .home-banner blockquote { font-size:clamp(20px,5.6vw,34px); line-height:1.15; }
  html[data-i18n-mode="zh-TW"] .art-directed .home-banner blockquote { font-size:clamp(20px,5.2vw,30px); line-height:1.4; }
  .art-directed .edition-line { display:block; padding-block:12px; font-size:11px; }
  .art-directed .edition-line .text-link { max-width:none; text-align:left; padding-block:8px; min-height:44px; }
  .art-directed .entry-paths { display:grid; grid-template-columns:minmax(0,1fr); gap:0; padding-block:24px; }
  .art-directed .entry-paths h2 { font-size:25px; margin-bottom:12px; }
  .art-directed .entry-paths a { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:start; gap:16px; padding:12px 0; border-left:0; border-top:1px solid var(--rule); }
  .art-directed .entry-paths strong { font-size:15px; line-height:1.6; margin:0; }
  .art-directed .entry-paths span { font-size:13px; line-height:1.65; }
  .art-directed .home-introduction { display:grid; grid-template-columns:minmax(0,1fr) 112px; gap:24px 20px; padding-block:32px; }
  .art-directed .home-name { grid-column:1; grid-row:1; }
  .art-directed .home-name h1 { font-size:clamp(34px,9vw,50px); margin-block:16px; line-height:1.05; }
  .art-directed .home-name .eyebrow { font-size:10px; }
  .art-directed .home-name .portal-name { margin-block:16px 8px; font-size:17px; }
  .art-directed .home-portrait { grid-column:2; grid-row:1; width:100%; max-width:none; margin:0; align-self:start; justify-self:stretch; }
  .art-directed .home-portrait img { height:auto; object-fit:contain; }
  .art-directed .home-portrait figcaption { font-size:11px; padding-top:8px; }
  .art-directed .home-biography { grid-column:1/-1; grid-row:2; max-width:none; }
  .art-directed .home-biography h2 { font-size:26px; margin-bottom:16px; }
  .art-directed .home-biography > p { font-size:16px; line-height:1.75; }
  .art-directed .home-current { display:block; margin-bottom:32px; padding-block:20px; }
  .art-directed .home-current > div { margin-top:12px; }
  .art-directed .home-current .micro { display:block; text-align:left; margin-top:12px; font-size:12px; }
  .art-directed .home-current strong { font-size:28px; }
  .art-directed .chapter-head { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
  .art-directed .chapter-head h2 { font-size:30px; }
  .art-directed .portal-samples { padding-bottom:32px; }
  .art-directed .sample-triptych { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
  .art-directed .sample-triptych .sample-tile,
  .art-directed .sample-triptych .sample-tile:nth-child(n) { grid-column:1; grid-row:auto; display:grid; grid-template-columns:88px minmax(0,1fr); gap:8px 16px; padding-bottom:24px; }
  .art-directed .sample-triptych .sample-tile > img { grid-column:1; grid-row:1/3; width:88px; height:auto; aspect-ratio:auto; max-height:104px; object-fit:contain; margin:4px 0 0; }
  .art-directed .sample-triptych .sample-tile > .micro { grid-column:2; grid-row:1; font-size:10px; }
  .art-directed .sample-triptych .sample-tile > h3 { grid-column:2; grid-row:2; font-size:25px; margin:0; }
  .art-directed .sample-triptych .sample-tile > :is(p,.work-actions) { grid-column:1/-1; grid-row:auto; margin-top:8px; }
  .art-directed .sample-triptych .sample-tile p { font-size:16px; line-height:1.75; }
  .art-directed .home-story { gap:24px; padding-block:32px; }
  .art-directed .home-story-photo img { max-height:220px; object-fit:contain; }
  .art-directed .home-story-copy h2 { font-size:32px; margin-block:16px; }
  .art-directed .site-doorways { gap:8px; padding-block:28px; }
  .art-directed .site-doorways .chapter-head h2 { font-size:30px; max-width:none; margin-top:8px; }
  .art-directed .doorway h3 { font-size:26px; }

  /* Catalogue cards: small cover + title, then full-width readable copy/actions. */
  .art-directed.view-projects .collection-directory { gap:4px 20px; padding-block:8px 16px; }
  .art-directed.view-projects .collection-door { gap:8px; }
  .art-directed.view-projects .collection-door strong { font-size:18px; }
  .art-directed.view-projects .collection-tools { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding-block:16px; }
  .art-directed.view-projects .collection-tools .search-wrap { grid-column:1/-1; }
  .art-directed.view-projects .collection-tools :is(input,select) { min-height:48px; font-size:16px; }
  .art-directed.view-projects .collection-tools label { font-size:13px; }
  .art-directed.view-projects .collection-section-head { grid-template-columns:24px minmax(0,1fr) auto; gap:12px; margin-bottom:20px; }
  .art-directed.view-projects .collection-section-head h2 { font-size:27px; }
  .art-directed.view-projects .collection-section-head p { font-size:15px; }
  .art-directed.view-projects .collection-number { font-size:24px; }
  .art-directed.view-projects .project-collection { padding-block:24px; }
  .art-directed.view-projects .project-collection[data-collection="restricted"] { padding:20px 16px; }
  .art-directed.view-projects .collection-cards { grid-template-columns:minmax(0,1fr); gap:24px; }
  .art-directed.view-projects .project-collection .collection-cards > .project-card,
  .art-directed.view-projects .project-collection .collection-cards > .project-card:not([hidden]) { display:grid; grid-template-columns:80px minmax(0,1fr); gap:8px 16px; align-items:start; }
  .art-directed.view-projects .project-card > img,
  .art-directed.view-projects .project-card > .text-thumb { grid-column:1; grid-row:1/3; width:80px; height:auto; max-height:96px; aspect-ratio:auto; margin:4px 0 0; object-fit:contain; }
  .art-directed.view-projects .project-card > .text-thumb { min-height:64px; padding:8px; }
  .art-directed.view-projects .text-thumb strong { font-size:30px; }
  .art-directed.view-projects .project-collection .project-card .project-copy { display:contents; }
  .art-directed.view-projects .project-copy > .card-meta { grid-column:2; grid-row:1; font-size:11px; line-height:1.65; }
  .art-directed.view-projects .project-collection .project-card .project-copy > h3 { grid-column:2; grid-row:2; font-size:25px; margin:0 0 8px; }
  .art-directed.view-projects .project-card .project-copy > :is(p,.tag-row,.project-foot,.work-actions) { grid-column:1/-1; grid-row:auto; margin:8px 0 0; }
  .art-directed.view-projects .project-card .project-copy > p { font-size:16px; line-height:1.75; max-width:none; }
  .art-directed .work-actions { display:flex; flex-direction:column; align-items:stretch; gap:4px; }
  .art-directed .work-actions .work-open { display:flex; justify-content:space-between; min-height:52px; padding:12px 16px; border:1px solid var(--accent); background:var(--surface-quiet); color:var(--accent-bright); text-decoration:none; font-size:16px; }
  .art-directed .work-actions .work-background { align-self:flex-start; font-size:15px; }

  /* Case notes/research retain evidence and limits, with phone-sized previews. */
  .art-directed:not(.view-index) :is(.page-hero,.research-heading,.biography-heading,.collection-heading,.speaking-heading,.detail-heading) { padding-block:20px 24px; }
  .art-directed:not(.view-index) :is(.page-hero,.research-heading,.biography-heading,.collection-heading,.speaking-heading,.detail-heading) h1 { font-size:34px; line-height:1.2; margin-block:12px 16px; }
  .art-directed :is(.hero-lead,.section-intro,.feature-main > p,.receipt-note,.brief-cases p,.brief-fit p,.privacy-content p) { font-size:16px; line-height:1.75; }
  .art-directed .clinical-title { padding:0; }
  .art-directed .section-head { display:block; margin-bottom:20px; }
  .art-directed .section-title-wrap { gap:12px; }
  .art-directed .section-title-wrap h2 { font-size:28px; }
  .art-directed .feature-card { display:block; }
  .art-directed .feature-main { padding:20px 0; }
  .art-directed .feature-side { margin-top:20px; padding:20px; }
  .art-directed .evidence-split { grid-template-columns:minmax(0,1fr); }
  .art-directed .evidence-block p { font-size:16px; line-height:1.8; }
  .art-directed .publication-body .research-title { font-size:24px; line-height:1.45; }
  .art-directed .publication-meta dl { grid-template-columns:72px minmax(0,1fr); grid-template-rows:none; grid-auto-flow:row; gap:12px; }
  .art-directed .publication-meta dd { font-size:15px; }
  .art-directed .case-opening { gap:20px; }
  .case-page .case-opening .case-image { max-width:220px; margin:0; }
  .case-page .case-opening .case-image img { max-height:150px; }
  .case-page .case-opening .hero-lead,.case-page .case-essay p { font-size:16px; line-height:1.8; }
  .case-page .case-scope { padding-left:16px; }
  .case-page .case-scope p { font-size:14px; line-height:1.8; }
  body.art-directed main .project-launch-button { min-height:68px; font-size:18px; padding:20px; }
  .art-directed.view-work .work-sample { display:block; }
  .art-directed.view-work .work-sample > img { width:100%; height:auto; max-height:150px; object-fit:contain; margin-bottom:16px; }
  .art-directed.view-work .work-sample p { font-size:16px; }
  .art-directed .restricted-band { display:block; padding:20px; }
  .art-directed .restricted-band .button { margin-top:16px; }

  /* Documentary imagery supports the story; no forced edge-to-edge portraits. */
  .art-directed.view-about .biography-opening { display:block; }
  .art-directed.view-about .profile-rail { max-width:none; margin-bottom:24px; }
  .art-directed.view-about .profile-rail figure { display:flex; align-items:center; gap:20px; max-width:none; }
  .art-directed.view-about .profile-rail img { width:88px; height:auto; object-fit:contain; }
  .art-directed.view-about .profile-rail figcaption { font-size:14px; }
  .art-directed.view-about .biography-intro .hero-lead { font-size:21px; line-height:1.7; }
  .art-directed .journey-stop { padding-block:20px; }
  .art-directed .journey-stop p { font-size:16px; }
  .art-directed.view-talks .record-row { padding-block:20px; }
  .art-directed.view-talks .record-row h3 { font-size:23px; line-height:1.4; }
  .art-directed.view-talks .record-row p { font-size:16px; line-height:1.75; }
  .art-directed.view-talks .story-summary h3 { font-size:28px; }
  .art-directed.view-talks .story-summary img { max-height:180px; }
  .art-directed .workshop-feature { gap:20px; }
  .art-directed .workshop-feature > figure { max-width:280px; }
  .art-directed .workshop-feature > figure img { max-height:200px; object-fit:contain; }
  .art-directed .workshop-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .art-directed .workshop-photo-grid img { max-height:160px; object-fit:contain; }
  .art-directed #featured-talk .ntnu-feature > figure { max-width:280px; }
  .art-directed .story-opening .invited-photo { max-width:260px; }
  .art-directed .story-opening img { max-height:180px; }
  .art-directed .recap-prose { font-size:18px; line-height:1.9; }
  .art-directed .medway-copy .chapter-question { font-size:24px; }
  .art-directed .medway-copy > p { font-size:16px; }
  .art-directed .detail-bottom { display:block; padding-block:16px 24px; }
  .art-directed .detail-bottom a { display:flex; }
  .art-directed .new-footer { padding-block:24px; }
  .art-directed .new-footer nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
  .art-directed .new-footer a { display:flex; align-items:center; min-height:48px; font-size:14px; }
}
@media screen and (max-width:360px) {
  .art-directed .shell { width:calc(100% - 32px); }
  .art-directed .home-introduction { grid-template-columns:minmax(0,1fr) 88px; gap:20px 16px; }
  .art-directed .home-name h1 { font-size:34px; }
  .art-directed .entry-paths a { grid-template-columns:minmax(0,1fr); gap:4px; }
  .art-directed.view-projects .collection-tools { grid-template-columns:minmax(0,1fr); }
  .art-directed .workshop-photo-grid { grid-template-columns:minmax(0,1fr); }
}

/* typography */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(./atkinson-hyperlegible-next-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(./atkinson-hyperlegible-next-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Piazzolla';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(./piazzolla-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Piazzolla';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(./piazzolla-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Typography-only trial, from Andrew's supplied v2 screenshot.
   No layout, imagery, palette, font sizes or print rules are replaced. */
:root {
  --portfolio-display: "Piazzolla", "Songti TC", "Noto Serif TC", Georgia, serif;
  --portfolio-body: "Atkinson Hyperlegible Next", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
@media screen {
  body.redesigned.art-directed {
    font-family:var(--portfolio-body);
    font-weight:420;
    font-optical-sizing:auto;
  }
  body.redesigned.art-directed main :is(h1,h2,h3),
  .art-directed .publication-body .research-title,
  .art-directed.view-work .work-sample h3 {
    font-family:var(--portfolio-display);
    font-weight:600;
    font-optical-sizing:auto;
    letter-spacing:-.012em;
  }
  body.redesigned.art-directed main h1 {
    font-weight:700;
    letter-spacing:-.02em;
  }
  body.redesigned.art-directed .wordmark,
  body.redesigned.art-directed :is(.home-current strong,.collection-door strong,.series-name) {
    font-family:var(--portfolio-display);
    font-weight:600;
    font-optical-sizing:auto;
    letter-spacing:-.012em;
  }
  body.redesigned.art-directed :is(.main-navigation a,.text-link,.story-all-link,.menu-toggle,.language-chip),
  body.redesigned.art-directed main :is(.button,input,select),
  body.redesigned.art-directed :is(.micro,.card-meta,.record-role,.status-pill) {
    font-family:var(--portfolio-body);
  }
  body.redesigned.art-directed :is(.main-navigation a,.text-link,.story-all-link,.menu-toggle,.language-chip) {
    font-weight:600;
  }
  body.redesigned.art-directed .work-actions .work-open,
  body.redesigned.art-directed main .button {
    font-weight:700;
  }
  body.redesigned.art-directed .work-actions .work-background { font-weight:600; }
  body.redesigned.art-directed :is(.micro,.card-meta) { font-weight:600; letter-spacing:.01em; }
  body.redesigned.art-directed .sample-tile > .micro { text-transform:none; }
  /* Keep compact safety labels functional, not decorative display titles. */
  body.redesigned.art-directed .case-scope h2 { font-family:var(--portfolio-body); letter-spacing:0; }
  /* CJK continues to use the established local serif/sans fallbacks. */
  html[data-i18n-mode="zh-TW"] body.redesigned.art-directed main :is(h1,h2,h3),
  body.redesigned.art-directed main :is(h1,h2,h3)[lang="zh-Hant"] { letter-spacing:0; }
}
/* Deliberately no selector for .home-banner blockquote: its Fraunces italic stays. */


/* readability */
/* Readability refinement: keep the selected faces, large titles and print edition.
   Sizes are CSS pixels before the existing, user-controlled desktop reading scale. */
@media screen {
  /* Metadata must remain readable, even when it is visually secondary. */
  body.redesigned.art-directed :is(
    .eyebrow,.micro,.card-meta,.status-pill,.tag,figcaption,
    .home-portrait figcaption,.sample-triptych .sample-tile > .micro,
    .project-copy > .card-meta,.wordmark span,.portal-name span,
    .language-label,.edition-line,.home-brief-note,
    .story-date,.event-source-line,.record-date,.record-role,.record-row time,
    .chapter-label,.original-talk-title,.media-note,.recap-language-note,
    .workshop-photo-note,.launch-note,.connection-note,.feature-note,
    .collection-door-count,.collection-result-count,.library-count span,
    .collection-tools label,.filter-count,.library-summary,.access-note,
    .publication-meta dt,.publication-body .evidence-label,
    .brief-facts dt,.brief-status,.brief-source-note,.brief-timeline span,
    .new-footer p,.new-footer p span,.section-index,.capability-num,
    .current-label,.journey-stop time,.credential-ledger span,
    .status-line .date,.receipt-title,.receipt-row dt,.step-no,
    .evidence-block .evidence-label,.project-foot span,.speaking-index span
  ) {
    font-size:14px;
    line-height:1.65;
    overflow-wrap:anywhere;
    white-space:normal;
  }
  body.redesigned.art-directed :is(.eyebrow,.micro) { letter-spacing:.045em; }
  html[data-i18n-mode="zh-TW"] body.redesigned.art-directed :is(.eyebrow,.micro) { letter-spacing:0; }
  body.redesigned.art-directed .home-banner .eyebrow { font-size:14px; line-height:1.5; }

  /* Navigation and secondary actions are reading choices, not fine print. */
  body.redesigned.art-directed :is(
    .main-navigation a,.language-chip,.menu-toggle,.utility-contact,
    main .text-link,main .back-link,.story-all-link,
    main .page-deck a,main .profile-contents a,main .case-rail a,
    .new-footer nav a,.source-details > summary,#featured-talk .poster-open,
    .project-foot .go
  ) { font-size:16px; line-height:1.6; }
  body.redesigned.art-directed .language-chip { min-width:44px; min-height:44px; padding:8px; }
  body.redesigned.art-directed .main-navigation { min-width:0; }
  body.redesigned.art-directed .main-navigation a { white-space:normal; }
  body.redesigned.art-directed .language-block { flex-wrap:wrap; }
  body.redesigned.art-directed .utility-contact { overflow-wrap:anywhere; }

  /* Raise compact explanatory copy, without flattening the large heading scale. */
  body.redesigned.art-directed :is(
    .entry-paths strong,.entry-paths span,.home-brief-detail,.home-current p,
    .doorway p,.sample-tile p,.project-card .project-copy > p,
    .section-intro,.research-bridge p,.publication-meta dd,.publication-meta > p,
    .brief-facts dd,.brief-cases p,.brief-background p,.brief-fit p,.brief-timeline li,
    .work-sample p,.case-scope p,.case-essay p,.privacy-content p,
    .collection-section-head p,.collection-tools input,.collection-tools select,
    .invited-context p,.speaking-disclosure-body,.medway-copy > p:not(.chapter-question),
    .consent-panel p,.closing p:not(.eyebrow),
    .current-chapter span:not(.current-label),.focus-track strong,.focus-track span,
    .capability p,.beyond-grid p,.credential-ledger strong,.journey-stop p,
    .evidence-block p,.feature-main .subhead,.receipt-row dd,.receipt-note,
    .story-step p,.restricted-band p,.teaching-principle p,.record-row p,
    .brief-arrival .hero-lead
  ) { font-size:16px; line-height:1.75; }
  body.redesigned.art-directed .case-scope h2 { font-size:16px; }
  /* Override the legacy 11.5px !important safety note, on screens only. */
  body.redesigned.art-directed .boundary { font-size:16px !important; }
  body.redesigned.art-directed main .button:not(.project-launch-button) { font-size:16px; }
  body.redesigned.art-directed .consent-panel :is(.button,a) { font-size:16px; min-height:44px; }
  body.redesigned.art-directed .reading-scale-control,
  body.redesigned.art-directed .reading-scale-control :is(span,button) { font-size:14px; }
}

@media screen and (max-width:760px) {
  /* One readable thought per row, rather than two narrow text columns. */
  body.redesigned.art-directed .entry-paths a { grid-template-columns:minmax(0,1fr); gap:4px; padding-block:16px; }
  body.redesigned.art-directed.view-projects .collection-tools { grid-template-columns:minmax(0,1fr); }
  body.redesigned.art-directed .home-banner .eyebrow { margin-bottom:8px; }
  body.redesigned.art-directed .case-image figcaption { flex-wrap:wrap; gap:4px 12px; }
  body.redesigned.art-directed .status-pill { max-width:100%; height:auto; }
}

/* professional */
/* A clearer professional hierarchy inside the approved editorial identity. */
.art-directed { --ink:var(--text); --dim:var(--text-dim); --line:var(--rule); }
body.redesigned.art-directed .home-name h1 {
  font-size:clamp(34px,3.7vw,54px); line-height:1.12; max-width:15ch;
}
.home-name h1 > span { display:block; }
body.redesigned.art-directed .home-name .name-degree { font-size:.56em; white-space:nowrap; }
body.redesigned.art-directed .portal-name,
body.redesigned.art-directed .portal-name > span,
body.redesigned.art-directed .identity-chinese {
  font-size:28px; line-height:1.5; font-weight:600; letter-spacing:.08em; color:var(--ink);
}
body.redesigned.art-directed .biography-heading h1,
body.redesigned.art-directed .brief-arrival h1 { font-size:clamp(34px,4.5vw,62px); line-height:1.15; max-width:22ch; }
.biography-subtitle { margin-top:12px; color:var(--dim); font-size:22px; line-height:1.5; }
.identity-chinese { margin:12px 0 0; }
.profile-credentials { display:grid; gap:7px; padding:0 0 20px; margin:0 0 20px; border-bottom:1px solid var(--line); }
.profile-credentials strong { font-size:18px; line-height:1.55; color:var(--ink); }
.brief-arrival .profile-credentials { margin-top:24px; }
.piano-performance-image { display:block; }
.beyond-feature .text-link { display:inline-flex; min-height:44px; align-items:center; margin-top:12px; }

/* Real destinations with roomy hit areas; no extra intermediary pages. */
.work-routes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-block:28px; }
.work-route { position:relative; display:grid; gap:7px; min-width:0; padding:24px 52px 24px 24px; border:1px solid var(--line); border-top:3px solid var(--accent); color:var(--ink); text-decoration:none; transition:background-color .15s ease; }
.work-route strong { font-family:var(--portfolio-display); font-size:30px; font-weight:600; line-height:1.2; }
.work-route > span:not(.route-arrow) { font-size:16px; line-height:1.6; color:var(--dim); }
.work-route .route-arrow { position:absolute; top:24px; right:22px; font-size:24px; line-height:1; }
.work-route:hover,.work-route[aria-current="page"] { background:rgba(211,164,114,.075); }
.work-route[aria-current="page"] { border-bottom-color:var(--accent); }
.work-route:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.clinical-title .work-routes { margin-bottom:0; }
.collection-heading .work-routes,.research-heading .work-routes { max-width:960px; }
.collection-heading > .work-routes { grid-column:1/-1; width:100%; margin-top:0; }
.research-category-nav { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.research-category-nav a { display:inline-flex; align-items:center; min-height:48px; padding:10px 18px; border-bottom:2px solid var(--accent); font-size:18px; font-weight:600; text-decoration:none; }
.research-group-heading { padding-block:28px 20px; scroll-margin-top:120px; }
.research-group-heading h2 { font-size:32px; line-height:1.3; margin:0; }
.research-pending { margin-top:32px; border-top:1px solid var(--line); }
.research-pending p { font-size:16px; line-height:1.75; color:var(--dim); max-width:65ch; margin-bottom:0; }
.restricted-research-heading { font-size:26px; line-height:1.3; margin:0 0 20px; }

/* Color supplements the existing five named categories; it never replaces labels. */
:root { --category-clinical:#9fcabf; --category-learning:#dfbf84; --category-tools:#aebee8; --category-origins:#dba8bb; --category-restricted:#bec0b8; }
[data-collection="clinical"],[data-collection-jump="clinical"] { --category-color:var(--category-clinical); }
[data-collection="learning"],[data-collection-jump="learning"] { --category-color:var(--category-learning); }
[data-collection="tools"],[data-collection-jump="tools"] { --category-color:var(--category-tools); }
[data-collection="origins"],[data-collection-jump="origins"] { --category-color:var(--category-origins); }
[data-collection="restricted"],[data-collection-jump="restricted"] { --category-color:var(--category-restricted); }
body.redesigned.art-directed .collection-door { border-top:3px solid var(--category-color,var(--line)); }
body.redesigned.art-directed .collection-door strong,
body.redesigned.art-directed .collection-section-head h2 { color:var(--category-color,var(--ink)); }
.project-collection .collection-section-head { border-top:3px solid var(--category-color); padding-top:22px; }
.project-collection .project-card { border-left:2px solid var(--category-color); padding-left:20px; }
.project-collection .project-copy > .card-meta { color:var(--category-color); }

@media screen and (max-width:1000px) {
  .work-route { padding:20px 44px 20px 18px; }
  .work-route strong { font-size:26px; }
}
@media screen and (max-width:760px) {
  body.redesigned.art-directed .home-name h1 { font-size:32px; max-width:15ch; }
  body.redesigned.art-directed .portal-name,
  body.redesigned.art-directed .portal-name > span,
  body.redesigned.art-directed .identity-chinese { font-size:26px; }
  body.redesigned.art-directed .biography-heading h1,
  body.redesigned.art-directed .brief-arrival h1 { font-size:34px; }
  .work-routes { grid-template-columns:minmax(0,1fr); gap:12px; margin-block:24px; }
  .work-route { min-height:100px; }
  .profile-credentials strong { font-size:17px; }
  .biography-subtitle { font-size:19px; }
  .research-group-heading { scroll-margin-top:96px; }
  .research-group-heading h2 { font-size:28px; }
  .project-collection .project-card { padding-left:14px; }
}
@media (prefers-reduced-motion:reduce) { .work-route { transition:none; } }
@container portfolio-content (max-width:560px) {
  .work-routes { grid-template-columns:minmax(0,1fr); }
}

/* content-direction */
/* Content is the visual subject. No canvas, pointer tracking or new decoration. */
body[data-page-id="index"] :is(#intersections,#samples-title) { scroll-margin-top:100px; }
body[data-page-id="index"] .home-banner figcaption {
  animation:cover-type-arrival .45s ease-out both;
}
@keyframes cover-type-arrival {
  from { opacity:.55; translate:0 6px; }
  to { opacity:1; translate:0 0; }
}

/* Three legible editorial rows replace the old unequal thumbnail collage. */
body.redesigned.art-directed .editorial-selections { display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
body.redesigned.art-directed .editorial-selections .sample-tile:nth-child(n) {
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-column:auto; grid-row:auto;
  align-items:center; gap:32px; padding:28px 0; border-bottom:1px solid var(--rule);
}
body.redesigned.art-directed .editorial-selections .sample-tile > .editorial-preview {
  display:block; grid-column:1; grid-row:1; min-width:0; margin:0; padding:12px;
  background:var(--bg-alt); border:1px solid var(--rule); text-decoration:none;
  transition:border-color .18s ease;
}
body.redesigned.art-directed .editorial-selections .sample-tile > .editorial-copy { grid-column:2; grid-row:1; min-width:0; }
body.redesigned.art-directed .editorial-selections .sample-tile:nth-child(2) > .editorial-preview { grid-column:2; }
body.redesigned.art-directed .editorial-selections .sample-tile:nth-child(2) > .editorial-copy { grid-column:1; }
body.redesigned.art-directed .editorial-selections .editorial-preview img {
  display:block; width:100%; height:auto; max-height:248px; object-fit:contain; margin:0; border:0;
}
body.redesigned.art-directed .editorial-selections .editorial-copy > .micro { font-size:14px; line-height:1.6; text-transform:none; }
body.redesigned.art-directed .editorial-selections .sample-tile h3 { font-family:var(--portfolio-display); font-size:30px; line-height:1.2; font-weight:650; margin:12px 0; }
body.redesigned.art-directed .editorial-selections .sample-tile p { font-size:17px; line-height:1.7; margin:12px 0 0; }
body.redesigned.art-directed .editorial-selections .sample-tile .work-actions { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:16px; }
body.redesigned.art-directed .editorial-selections .editorial-preview:hover { border-color:var(--accent); }
body.redesigned.art-directed .editorial-selections .editorial-preview:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
body[data-page-id="index"] .editorial-projects .text-link { text-decoration-thickness:1px; text-underline-offset:6px; transition:color .18s ease,text-underline-offset .18s ease; }
body[data-page-id="index"] .editorial-projects .text-link:hover,
body[data-page-id="index"] .editorial-projects .text-link:focus-visible { color:var(--accent-bright); text-underline-offset:9px; }

/* At narrow reading widths the image is a compact companion, not a large barrier. */
@container portfolio-content (max-width:580px) {
  body.redesigned.art-directed .editorial-selections .sample-tile:nth-child(n) { grid-template-columns:96px minmax(0,1fr); gap:8px 16px; align-items:start; padding:24px 0; }
  body.redesigned.art-directed .editorial-selections .sample-tile:nth-child(n) > .editorial-preview { grid-column:1; grid-row:1/3; padding:4px; margin-top:4px; }
  body.redesigned.art-directed .editorial-selections .sample-tile:nth-child(n) > .editorial-copy { display:contents; }
  body.redesigned.art-directed .editorial-selections .editorial-copy > .micro { grid-column:2; grid-row:1; }
  body.redesigned.art-directed .editorial-selections .editorial-copy > h3 { grid-column:2; grid-row:2; font-size:25px; margin:0; }
  body.redesigned.art-directed .editorial-selections .editorial-copy > :is(p,.work-actions) { grid-column:1/-1; grid-row:auto; margin-top:8px; }
  body.redesigned.art-directed .editorial-selections .sample-tile p { font-size:16px; }
}
@media screen and (max-width:760px) {
  body.redesigned.art-directed .editorial-selections .sample-tile:nth-child(n) { grid-template-columns:96px minmax(0,1fr); gap:8px 16px; align-items:start; padding:24px 0; }
  body.redesigned.art-directed .editorial-selections .sample-tile:nth-child(n) > .editorial-preview { grid-column:1; grid-row:1/3; padding:4px; margin-top:4px; }
  body.redesigned.art-directed .editorial-selections .sample-tile:nth-child(n) > .editorial-copy { display:contents; }
  body.redesigned.art-directed .editorial-selections .editorial-copy > .micro { grid-column:2; grid-row:1; }
  body.redesigned.art-directed .editorial-selections .editorial-copy > h3 { grid-column:2; grid-row:2; font-size:25px; margin:0; }
  body.redesigned.art-directed .editorial-selections .editorial-copy > :is(p,.work-actions) { grid-column:1/-1; grid-row:auto; margin-top:8px; }
  body.redesigned.art-directed .editorial-selections .sample-tile p { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) {
  body[data-page-id="index"] .home-banner figcaption { animation:none; }
  body[data-page-id="index"] .editorial-preview,
  body[data-page-id="index"] .editorial-projects .text-link { transition:none; }
}
@media print {
  body[data-page-id="index"] .home-banner figcaption { animation:none; opacity:1; translate:none; }
  body.redesigned.art-directed .editorial-selections .sample-tile:nth-child(n) { break-inside:avoid; grid-template-columns:140px minmax(0,1fr); }
  body.redesigned.art-directed .editorial-selections .sample-tile:nth-child(n) > .editorial-preview { grid-column:1; }
  body.redesigned.art-directed .editorial-selections .sample-tile:nth-child(n) > .editorial-copy { display:block; grid-column:2; }
}

/* desktop-readability */
/* Desktop supporting type must be legible at 100%, including narrow app panels.
   Final cascade layer: never resize the banner quote, display headings or mobile.
   761–1199px deliberately gets the same base type as a wide desktop; the existing
   optional page-scale control remains independent. Print is excluded. */
@media screen and (min-width:761px) {
  html body.redesigned.art-directed { font-size:18px; }

  html body.redesigned.art-directed :is(
    .home-biography > p,.home-brief-detail,.home-current p,
    .entry-paths strong,.entry-paths span,.doorway p,
    .editorial-selections .sample-tile p,.project-card .project-copy > p,
    .home-story-copy > p:not([class]),.story-summary p,.workshop-contribution,
    .page-hero .hero-lead,.invited-subtitle,.current-chapter strong,
    .collection-heading .hero-lead,.collection-section-head p,
    .section-intro,.research-bridge p,.publication-meta dd,.publication-meta > p,
    .evidence-block p,.feature-main > p,.feature-main .subhead,.receipt-row dd,
    .receipt-note,.brief-facts dd,.brief-cases p,.brief-background p,.brief-fit p,
    .brief-timeline li,.brief-arrival .hero-lead,.work-sample p,
    .case-opening .hero-lead,.case-scope p,.case-essay p,.launch-reading-note,
    .privacy-content p,.invited-context p,.speaking-disclosure-body,
    .medway-copy > p:not(.chapter-question),.consent-panel p,
    .closing p:not(.eyebrow),.current-chapter span:not(.current-label),
    .focus-track strong,.focus-track span,.capability p,.beyond-grid p,
    .credential-ledger strong,.journey-stop p,.story-step p,
    .restricted-band p,.teaching-principle p,.record-row p
  ) { font-size:18px; line-height:1.75; }
  /* This section has a legacy ID-specific rule, so name the actual component. */
  html body.redesigned.art-directed #featured-talk .talk-feature-copy p { font-size:18px; }

  html body.redesigned.art-directed :is(
    .main-navigation a,.language-chip,.menu-toggle,.utility-contact,
    main .text-link,main .back-link,.story-all-link,
    main .page-deck a,main .profile-contents a,main .case-rail a,
    .profile-rail nav a,.new-footer nav a,.source-details > summary,
    .project-foot .go,.work-actions .work-open,.work-actions .work-background,
    .collection-tools input,.collection-tools select,#featured-talk .poster-open,
    .supporting-gallery > summary,.conversation-background > summary,
    .speaking-disclosure:not(#same-stage) > summary,.workshop-album > summary
  ) { font-size:18px; line-height:1.6; }
  html body.redesigned.art-directed main .button:not(.project-launch-button),
  html body.redesigned.art-directed #featured-talk .poster-open { font-size:18px; }
  html body.redesigned.art-directed .boundary { font-size:18px !important; }

  /* Metadata stays secondary through weight/color, not tiny text. */
  html body.redesigned.art-directed :is(
    .eyebrow,.micro,.card-meta,.status-pill,.tag,figcaption,
    .home-portrait figcaption,.sample-triptych .sample-tile > .micro,
    .editorial-selections .editorial-copy > .micro,
    .project-copy > .card-meta,.wordmark span,
    .language-label,.edition-line,.home-brief-note,
    .story-date,.event-source-line,.record-date,.record-role,.record-row time,.workshop-date,
    .chapter-label,.original-talk-title,.media-note,.recap-language-note,
    .workshop-photo-note,.launch-note,.connection-note,.feature-note,
    .collection-door-count,.collection-result-count,.library-count span,
    .collection-tools label,.filter-count,.library-summary,.access-note,
    .publication-meta dt,.publication-body .evidence-label,
    .brief-facts dt,.brief-status,.brief-source-note,.brief-timeline span,
    .new-footer p,.new-footer p span,.section-index,.capability-num,
    .current-label,.journey-stop time,.credential-ledger span,
    .status-line .date,.receipt-title,.receipt-row dt,.step-no,
    .evidence-block .evidence-label,.project-foot span,.speaking-index span
  ) { font-size:16px; line-height:1.65; }
  html body.redesigned.art-directed .home-banner .eyebrow { font-size:16px; }
  /* The old metadata :is() group also matched the Chinese name; restore its
     established professional identity size with an explicit identity selector. */
  html body.redesigned.art-directed.view-index .home-name .portal-name > span { font-size:28px; }
  html body.redesigned.art-directed .evidence-block h4 { font-size:18px; line-height:1.5; }
  html body.redesigned.art-directed .reading-scale-control,
  html body.redesigned.art-directed .reading-scale-control :is(span,button) { font-size:16px; }

  /* Flexible wrapping keeps enlarged labels out of fixed-height boxes. */
  html body.redesigned.art-directed .status-pill { height:auto; max-width:100%; white-space:normal; }
  html body.redesigned.art-directed .case-image figcaption { flex-wrap:wrap; gap:4px 16px; }
}

/* profile-layout */
/* Homepage profile only: repair the supplied screenshot's proportions.
   Keep readable supporting type and the complete portrait; do not alter page zoom. */
@media screen {
  html body.redesigned.art-directed .home-introduction {
    grid-template-columns:minmax(0,1fr) minmax(0,.58fr);
    column-gap:6%; row-gap:24px; align-items:start; align-content:start;
    padding-block:48px;
  }
  html body.redesigned.art-directed .home-introduction .home-name {
    min-width:0;
  }
  html body.redesigned.art-directed .home-introduction .home-name h1 {
    max-width:none; margin:16px 0 0;
    font-family:var(--portfolio-display); font-size:42px; font-weight:600;
    line-height:1.16; letter-spacing:-.012em; color:var(--text);
  }
  html body.redesigned.art-directed .home-introduction .home-name h1 span {
    color:inherit;
  }
  html body.redesigned.art-directed .home-introduction .home-name .name-credential {
    display:inline-block; white-space:nowrap;
  }
  html body.redesigned.art-directed .home-introduction .home-name .name-degree {
    display:inline; font-size:.57em; font-weight:500; line-height:1;
    letter-spacing:0; color:var(--accent-bright); vertical-align:baseline;
  }
  html body.redesigned.art-directed .home-introduction .home-name .eyebrow {
    margin:0; font-size:16px; line-height:1.6; letter-spacing:.035em;
  }
  html body.redesigned.art-directed .home-introduction .profile-identity {
    display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
    margin:16px 0 0;
  }
  html body.redesigned.art-directed .home-introduction .profile-identity .portal-name {
    margin:0; font-size:26px; line-height:1.4;
  }
  html body.redesigned.art-directed.view-index .home-introduction .profile-identity .portal-name > span {
    margin:0; font-family:var(--portfolio-body); font-size:26px; line-height:1.4;
    font-weight:500; letter-spacing:0; color:var(--text);
  }
  html body.redesigned.art-directed .home-introduction .profile-identity > .micro {
    font-family:var(--portfolio-body); font-size:16px; line-height:1.5;
    color:var(--text-dim); font-weight:420; letter-spacing:0; text-transform:none;
  }
  html body.redesigned.art-directed .home-introduction .home-biography {
    min-width:0; max-width:60ch; margin:0;
  }
  html body.redesigned.art-directed .home-introduction .home-biography h2 {
    font-family:var(--portfolio-body); font-size:22px; font-weight:600;
    line-height:1.45; letter-spacing:0; margin:0 0 12px; color:var(--text);
  }
  html body.redesigned.art-directed .home-introduction .home-biography > p {
    margin:0 0 12px; font-size:18px; line-height:1.65; color:var(--text-dim);
  }
  html body.redesigned.art-directed .home-introduction .home-biography > .home-brief-note {
    font-family:var(--portfolio-body); font-size:16px; font-weight:600;
    line-height:1.5; letter-spacing:0; color:var(--text-dim); margin:20px 0 8px;
  }
  html body.redesigned.art-directed .home-introduction .home-biography .actions {
    margin-top:16px; gap:8px 24px;
  }
  html body.redesigned.art-directed .home-introduction .home-portrait {
    width:100%; max-width:340px; margin:0;
    grid-column:2; grid-row:1/3; justify-self:end; align-self:start;
  }
  html body.redesigned.art-directed .home-introduction .home-portrait img {
    display:block; width:100%; height:auto; aspect-ratio:933/1400; object-fit:contain;
  }
  html body.redesigned.art-directed .home-introduction .home-education {
    display:grid; gap:12px; margin:24px 0 0; padding:0;
    font-family:var(--portfolio-body); font-size:18px; line-height:1.5;
  }
  html body.redesigned.art-directed .home-introduction .home-education dt {
    font-weight:650; color:var(--text); margin:0;
  }
  html body.redesigned.art-directed .home-introduction .home-education dd {
    margin:2px 0 0; color:var(--text-dim); font-size:17px;
  }
  html body.redesigned.art-directed .home-introduction .portrait-card-link {
    display:block; text-decoration:none; color:var(--text);
    perspective:1100px; outline-offset:6px;
  }
  html body.redesigned.art-directed .home-introduction .portrait-card-surface {
    display:block; position:relative; overflow:hidden; isolation:isolate;
    border:1px solid var(--line); background:var(--bg);
    transition:transform .35s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .portrait-viewfinder {
    position:absolute; z-index:1; inset:12px; pointer-events:none;
    background:linear-gradient(var(--accent),var(--accent)) left top/20px 1px,
      linear-gradient(var(--accent),var(--accent)) left top/1px 20px,
      linear-gradient(var(--accent),var(--accent)) right top/20px 1px,
      linear-gradient(var(--accent),var(--accent)) right top/1px 20px,
      linear-gradient(var(--accent),var(--accent)) left bottom/20px 1px,
      linear-gradient(var(--accent),var(--accent)) left bottom/1px 20px,
      linear-gradient(var(--accent),var(--accent)) right bottom/20px 1px,
      linear-gradient(var(--accent),var(--accent)) right bottom/1px 20px;
    background-repeat:no-repeat; opacity:.65; transition:opacity .25s ease;
  }
  .portrait-shimmer {
    position:absolute; inset:0; pointer-events:none; opacity:0;
    background:linear-gradient(110deg,transparent 25%,rgba(255,235,200,.12) 45%,transparent 65%);
    transform:translateX(-100%);
  }
  html body.redesigned.art-directed .home-introduction .portrait-card-badge {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    min-height:48px; padding:12px 14px; border:1px solid var(--line); border-top:0;
    font-family:var(--portfolio-body); font-size:17px; line-height:1.4;
    font-weight:600; color:var(--accent-bright); background:rgba(212,163,115,.06);
    transition:background .25s ease,color .25s ease;
  }
  .portrait-card-link:focus-visible { outline:2px solid var(--accent-bright); }
  .portrait-card-link:focus-visible .portrait-viewfinder { opacity:1; }
  html body.redesigned.art-directed .home-introduction .portrait-card-link:focus-visible .portrait-card-badge {
    background:rgba(212,163,115,.16); color:var(--text);
  }
}
@media screen and (hover:hover) and (pointer:fine) {
  html body.redesigned.art-directed .home-introduction .portrait-card-link:hover .portrait-card-surface {
    border-color:var(--accent); box-shadow:0 14px 30px -20px rgba(212,163,115,.4);
  }
  .portrait-card-link:hover .portrait-viewfinder { opacity:1; }
  html body.redesigned.art-directed .home-introduction .portrait-card-link:hover .portrait-card-badge {
    background:rgba(212,163,115,.16); color:var(--text);
  }
}
@media screen and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .portrait-card-link:hover .portrait-shimmer { animation:portrait-card-light 1s ease both; }
}
@keyframes portrait-card-light {
  0% { opacity:0; transform:translateX(-100%); }
  30%,70% { opacity:1; }
  100% { opacity:0; transform:translateX(100%); }
}
@media (prefers-reduced-motion:reduce) {
  .portrait-card-link *, .portrait-card-link *::before, .portrait-card-link *::after {
    animation:none !important; transition:none !important; transform:none !important;
  }
}
@media screen and (max-width:760px) {
  html body.redesigned.art-directed .home-introduction {
    grid-template-columns:minmax(0,1fr); gap:28px; padding-block:32px;
  }
  html body.redesigned.art-directed .home-introduction .home-name h1 {
    font-size:30px; margin-top:12px;
  }
  html body.redesigned.art-directed .home-introduction .home-name .eyebrow {
    font-size:14px; max-width:none;
  }
  html body.redesigned.art-directed .home-introduction .profile-identity {
    margin-top:12px; gap:8px 12px;
  }
  html body.redesigned.art-directed.view-index .home-introduction .profile-identity .portal-name > span {
    font-size:24px;
  }
  html body.redesigned.art-directed .home-introduction .home-portrait {
    grid-column:1; grid-row:2; max-width:240px; justify-self:center;
  }
  html body.redesigned.art-directed .home-introduction .home-education {
    margin-top:20px; font-size:18px;
  }
  html body.redesigned.art-directed .home-introduction .home-biography {
    grid-column:1; grid-row:3; max-width:none;
  }
  html body.redesigned.art-directed .home-introduction .home-biography h2 {
    font-size:20px;
  }
  html body.redesigned.art-directed .home-introduction .home-biography > p {
    font-size:16px; line-height:1.75;
  }
}

/* publication-news */
/* A compact editorial announcement, not another hero or visitor-routing row. */
html body.redesigned.art-directed .research-milestone {
  display:flex; flex-wrap:wrap; align-items:center; gap:24px 40px;
  padding-block:32px; border-bottom:1px solid var(--border);
}
html body.redesigned.art-directed .milestone-copy {
  flex:1 1 30rem; min-width:0;
}
html body.redesigned.art-directed .milestone-kicker {
  margin:0 0 8px; color:var(--accent-bright);
  font:500 16px/1.5 var(--portfolio-body); letter-spacing:0;
}
html body.redesigned.art-directed .research-milestone h2 {
  margin:0 0 12px; max-width:none;
  font:600 32px/1.2 var(--portfolio-display); letter-spacing:0;
  color:var(--text); text-wrap:balance;
}
html body.redesigned.art-directed .milestone-description {
  max-width:65ch; margin:0; color:var(--text-dim);
  font:420 18px/1.6 var(--portfolio-body);
}
html body.redesigned.art-directed .milestone-action {
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  min-width:0; flex:0 1 auto;
}
html body.redesigned.art-directed .milestone-track {
  padding:4px 12px; border:1px solid var(--accent); border-radius:0;
  color:var(--accent-bright); font:500 16px/1.5 var(--portfolio-body);
}
html body.redesigned.art-directed .milestone-link {
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--text); font:600 18px/1.5 var(--portfolio-body);
  text-decoration:underline; text-decoration-color:var(--accent);
  text-underline-offset:6px; transition:color .15s ease;
}
html body.redesigned.art-directed .milestone-link:hover { color:var(--accent-bright); }
html body.redesigned.art-directed .milestone-link:focus-visible {
  outline:2px solid var(--accent-bright); outline-offset:6px;
}
html body.redesigned.art-directed .publication-celebration {
  margin:20px 0; padding:4px 0 4px 20px;
  border-left:2px solid var(--accent);
}
html body.redesigned.art-directed .publication-celebration h3 {
  margin:0 0 8px; color:var(--accent-bright);
  font:600 22px/1.4 var(--portfolio-display); letter-spacing:0;
}
html body.redesigned.art-directed .publication-celebration p {
  margin:0; max-width:68ch; color:var(--text-dim);
  font:420 18px/1.6 var(--portfolio-body);
}
html body.redesigned.art-directed .publication-accepted .publication-body .status-pill {
  max-width:100%; white-space:normal;
  font:500 16px/1.5 var(--portfolio-body); letter-spacing:0;
}
html body.redesigned.art-directed .publication-meta .contribution-role {
  display:block; font-weight:600; color:var(--text);
}
html body.redesigned.art-directed .publication-meta .author-order {
  display:block; margin-top:4px; color:var(--text-dim);
}
html body.redesigned.art-directed .publication-accepted .evidence-split {
  grid-template-columns:minmax(0,1fr); max-width:68ch;
}
@media screen and (max-width:760px) {
  html body.redesigned.art-directed .research-milestone { gap:16px; padding-block:24px; }
  html body.redesigned.art-directed .research-milestone h2 { font-size:28px; }
  html body.redesigned.art-directed .milestone-description,
  html body.redesigned.art-directed .publication-celebration p { font-size:16px; }
  html body.redesigned.art-directed .milestone-action { flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 20px; }
  html body.redesigned.art-directed .publication-celebration { padding-left:16px; }
  html body.redesigned.art-directed .publication-celebration h3 { font-size:20px; }
}
@media (prefers-reduced-motion:reduce) {
  html body.redesigned.art-directed .milestone-link { transition:none; }
}
@media print {
  html body.redesigned.art-directed .research-milestone,
  html body.redesigned.art-directed .publication-celebration { break-inside:avoid; }
}

/* Transparent looping overlay: no reserved height, panel or pointer capture. */
:root {
  --firework-gold:#edc57b;
  --firework-copper:#c88d56;
  --firework-ivory:#f1dfb3;
}
html body.redesigned.art-directed [data-celebration] { position:relative; isolation:isolate; }
html body.redesigned.art-directed .celebration-content { position:relative; z-index:1; min-width:0; width:100%; }
html body.redesigned.art-directed .celebration-overlay[hidden] { display:none !important; }
html body.redesigned.art-directed [data-celebration] .milestone-action {
  flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-top:16px;
}
html body.redesigned.art-directed .celebration-overlay {
  position:absolute; z-index:0; inset:0; overflow:hidden;
  pointer-events:none; user-select:none; opacity:.65;
}
html body.redesigned.art-directed [data-fireworks-canvas][hidden],
html body.redesigned.art-directed [data-fireworks-image][hidden] { display:none !important; }
html body.redesigned.art-directed [data-fireworks-canvas],
html body.redesigned.art-directed img[data-fireworks-image] {
  display:block; position:absolute; inset:0; width:100%; height:100%;
  max-width:none; margin:0; border:0; object-fit:cover; object-position:center top;
  pointer-events:none; user-select:none;
}
@media screen and (max-width:760px) {
  html body.redesigned.art-directed .celebration-overlay { opacity:.5; }
}
@media print {
  html body.redesigned.art-directed .celebration-overlay { display:none !important; }
}