/* WID v4 test frontend. The existing reader and content lifecycle remain shared. */
:root {
  color-scheme: light;
  --u: min(0.0651041667vw, 0.09765625dvh);
  --page: #faf9f6;
  --ink: #062c3b;
  --muted: #71716e;
  --line: #c7c4bd;
  --accent: #e8462d;
  --panel: #faf9f6;
  --surface: #f0eeea;
  --shadow: 0 12px 24px #19150e29;
  color: var(--ink);
  background: var(--page);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
:root[data-theme="night"] {
  color-scheme: dark;
  --page: #010e28;
  --ink: #f5f3ee;
  --muted: #c6cad2;
  --line: #727b8b;
  --accent: #ff4828;
  --panel: #0b192d;
  --surface: #122139;
  --shadow: 0 14px 30px #0004;
}
:root[data-theme="festival"] {
  color-scheme: dark;
  --page: #960b12;
  --ink: #fff1d5;
  --muted: #ecd2aa;
  --line: #dba97c;
  --accent: #98cd71;
  --panel: #790c14;
  --surface: #a92126;
  --shadow: 0 14px 30px #46050933;
}
body { background: var(--page); color: var(--ink); }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 5px; }
button:disabled { cursor: default; }
.stage { height: 100vh; height: 100dvh; min-height: 0; background: var(--page); }
.stage::before {
  inset: 0; z-index: -1; opacity: .14; mask-image: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.4' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 220px; pointer-events: none; mix-blend-mode: multiply;
}
[data-theme="night"] .stage::before { opacity: 0; }
[data-theme="festival"] .stage::before { opacity: .2; mix-blend-mode: soft-light; }
.svg-defs { position: absolute; overflow: hidden; pointer-events: none; }
.version-badge, .readout { display: none; }
.is-settings-enabled .version-badge { display: block; color: var(--muted); }
.is-settings-enabled .readout { display: flex; }
.site-controls { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); width: max-content; }
.site-header { position: absolute; top: 3.5dvh; right: 2.5vw; z-index: 5; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border-radius: 10px; gap: 6px; white-space: nowrap; color: var(--ink); text-decoration: none; font-size: clamp(16px, 1.2vw, 20px); font-weight: 750; letter-spacing: -.035em; }
.wordmark svg { width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.language-toggle, .language-toggle:hover, .language-toggle:focus-visible, .site-controls .language-toggle {
  position: static; width: auto; min-width: 44px; height: 44px; padding: 0 8px;
  background: transparent; border: 0; border-radius: 10px; backdrop-filter: none;
  color: var(--ink); font-family: inherit; font-weight: 500; font-size: clamp(14px, 1.05vw, 17px); line-height: 1; letter-spacing: .02em; white-space: nowrap; cursor: pointer;
}
.language-toggle span { opacity: .65; }
.language-toggle .is-current { opacity: 1; font-weight: 750; }
.site-controls .theme-switch { display: flex; align-items: center; gap: 4px; width: 68px; min-width: 68px; height: 44px; padding: 0 4px; margin: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; }
.theme-option { display: grid; place-items: center; width: 28px; height: 30px; border-radius: 50%; opacity: .5; }
.theme-option.is-current { background: var(--surface); opacity: 1; }
.theme-switch:disabled { opacity: .4; }
.site-controls > a:hover, .site-controls > button:not(:disabled):hover { background: var(--surface); }
.site-controls > a, .site-controls > button { touch-action: manipulation; }
.language-toggle span, .theme-option, .wordmark svg { pointer-events: none; }
.theme-switch svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.drag-surface { top: 0; height: 100%; transform: translate3d(0, 0, 0); touch-action: none; }
.drag-surface::before { display: none; }
.hero, .hero.is-zh {
  position: absolute; left: 6.25vw; top: 0; width: calc(100vw - 6.25vw); height: 100%; min-height: 0;
  display: block; padding: 0; margin: 0;
  transform: translate3d(var(--hero-x), var(--hero-user-y, 0px), 0); pointer-events: none;
}
.brand { position: absolute; left: calc(var(--u) * 24); top: 8.4dvh; width: calc(var(--u) * 264); height: calc(var(--u) * 320); margin: 0; transition: none; }
.brand-art { display: block; width: 100%; height: 100%; overflow: visible; }
.brand-night-art { display: none; }
[data-theme="night"] .brand-art { display: none; }
/* Source pixels retain the approved tube cores, orange/gold falloff and local glow.
   At 1536 × 1024 the image maps to its original coordinates, at 1 CSS px per source px.
   Feather only the empty outer margins to join the flat page background. */
[data-theme="night"] .brand-night-art {
  display: block; position: absolute; left: 0; top: 0;
  width: 159.090909%; height: auto;
  transform: translate(-28.57142857%, -18.53448276%);
  overflow: hidden; pointer-events: none;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 92%, transparent),
    linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
  mask-composite: intersect;
}
.hero-copy { opacity: 1; transform: none; transition: none; will-change: auto; }
.weekly-note { position: absolute; left: calc(var(--u) * 314); top: 31.8dvh; width: calc(var(--u) * 180); height: calc(var(--u) * 142); color: var(--accent); }
.weekly-note-zh { width: 100%; height: 100%; }
.weekly-note-en { display: none; font: italic calc(var(--u) * 25)/1.2 'Bradley Hand', 'Marker Felt', cursive; transform: rotate(-7deg); padding-top: calc(var(--u) * 16); white-space: nowrap; }
.weekly-note-en svg { display: block; margin: calc(var(--u) * 10) 0 0 calc(var(--u) * 8); width: calc(var(--u) * 75); height: calc(var(--u) * 60); fill: none; stroke: currentColor; stroke-width: 2; }
html[lang="en"] .weekly-note-zh { display: none; }
html[lang="en"] .weekly-note-en { display: block; }
.hero-text { position: absolute; top: 45.7dvh; left: 0; width: calc(var(--u) * 960); }
.hero h1, .hero.is-zh h1 { position: static; width: max-content; max-width: 100%; font-size: calc(var(--u) * 70); font-weight: 900; letter-spacing: -.045em; line-height: 1.14; text-wrap: initial; }
.hero h1 > span { display: block; white-space: nowrap; }
html[lang="en"] .hero-text { top: 47dvh; }
html[lang="en"] .hero h1 { font-size: calc(var(--u) * 57); letter-spacing: -.055em; line-height: 1.12; }
.hero .subtitle, .hero.is-zh .subtitle { position: static; margin: clamp(20px, 2dvh, 28px) 0 0; width: 100%; max-width: none; font-size: calc(var(--u) * 27); font-weight: 650; line-height: 1.55; letter-spacing: 0; color: var(--muted); text-transform: none; text-wrap: initial; }
.hero.is-zh .subtitle-clause { display: inline-block; white-space: nowrap; }
html[lang="en"] .hero .subtitle { font-size: calc(var(--u) * 23); max-width: calc(var(--u) * 890); }
.byline { display: flex; align-items: center; gap: calc(var(--u) * 12); margin: clamp(20px, 3dvh, 30px) 0 0; color: var(--muted); }
.byline > span { font-size: calc(var(--u) * 27); font-style: italic; font-weight: 600; }
.byline svg { width: calc(var(--u) * 111); height: calc(var(--u) * 57); }
.swipe-hint { display: none; }
.case-card, .tile.case-card, .drift-card.case-card {
  aspect-ratio: auto; padding: calc(var(--u) * 18); border: 1px solid #ffffffb0; border-radius: calc(var(--u) * 17);
  box-shadow: var(--shadow); opacity: 1; color: #052638;
  background: var(--card-image, none) var(--cover-x, 50%) var(--cover-y, 50%) / cover no-repeat, #f4f2ed;
}
.case-card::before { display: none; }
.case-card .card-title { gap: calc(var(--u) * 5); width: 100%; max-width: none; }
.case-card .card-title strong { color: #052638; font-size: max(13px, calc(var(--u) * 21)); font-weight: 850; line-height: 1.25; letter-spacing: -.02em; text-wrap: pretty; }
.case-card .card-title small { color: #052638; font-size: max(11px, calc(var(--u) * 16)); line-height: 1.3; font-weight: 650; letter-spacing: -.02em; }
.drift-card.case-card .card-title strong { font-size: max(12px, calc(var(--u) * 17)); }
.drift-card.case-card .card-title small { font-size: max(10px, calc(var(--u) * 13)); }
.case-card:hover { box-shadow: 0 16px 32px #0003; border-color: var(--accent); }
.catalog-trigger, .stage.is-settings-enabled .catalog-trigger {
  position: absolute; top: 39%; right: auto; bottom: auto; height: 72px; z-index: 1;
  display: grid; place-items: center; padding: 20px 24px; text-align: center;
  color: var(--panel); border: 1px solid transparent; border-radius: 999px; backdrop-filter: none;
  background: var(--ink);
  box-shadow: 0 8px 20px #00000014, inset 0 1px 0 #ffffff1a;
  font: 650 clamp(18px, 1.35vw, 20px)/1.4 -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
  letter-spacing: .015em; white-space: nowrap; touch-action: manipulation;
  transition: background-color .18s, box-shadow .18s, transform .18s;
}
.catalog-trigger:hover { background: color-mix(in srgb, var(--ink) 92%, var(--accent)); box-shadow: 0 12px 26px #00000024, inset 0 1px 0 #ffffff1a; transform: translateY(-3px); }
.catalog-trigger:active { transform: translateY(1px); box-shadow: 0 3px 8px #0000001a; }
.podcast-bar { position: absolute; z-index: 3; left: 3.5vw; right: 3.5vw; top: 80.7dvh; border-top: 1px solid var(--line); padding: 4.2dvh 2.8vw 0; }
.podcast-entry { display: flex; align-items: center; gap: calc(var(--u) * 34); padding: 0; background: none; border: 0; color: var(--muted); cursor: pointer; text-align: left; }
.podcast-entry strong { color: var(--ink); font-size: calc(var(--u) * 39); font-weight: 850; white-space: nowrap; letter-spacing: -.04em; }
.podcast-cadence { font-size: calc(var(--u) * 27); font-weight: 650; white-space: nowrap; }
.podcast-slash { font-size: calc(var(--u) * 30); font-weight: 400; }
.partner-mark { display: flex; align-items: center; gap: 3.5%; width: calc(var(--u) * 373); height: calc(var(--u) * 68); color: var(--muted); flex-shrink: 0; }
/* Align the letters, whose centre is y=244, rather than the tall sail's full bounds
   (viewBox centre y=190). 54 / 216 = 25%, preserved at every rendered size. */
.partner-logo { width: 58%; aspect-ratio: 796 / 216; flex-shrink: 0; background: currentColor; mask: url('assets/wid/partner-logo.svg') center / contain no-repeat; transform: translateY(-25%); }
.partner-times { width: 5%; height: 100%; flex-shrink: 0; }
.partner-signature { width: 30%; height: 100%; flex-shrink: 0; }
[data-theme="night"] .partner-mark { color: #fdfdfd; }
.podcast-arrow { width: calc(var(--u) * 40); height: calc(var(--u) * 40); fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; transition: transform .2s; }
.podcast-entry:hover .podcast-arrow { transform: translate(4px, -4px); }
html[lang="en"] .podcast-entry { gap: calc(var(--u) * 22); }
html[lang="en"] .podcast-entry strong { font-size: calc(var(--u) * 29); }
html[lang="en"] .podcast-cadence { font-size: calc(var(--u) * 23); }
.podcast-dialog { --qr-size: min(292px, calc(100dvh - 180px)); color: var(--ink); background: var(--panel); width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: clamp(20px, 4vw, 40px); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 100px #0005; text-align: center; overflow: hidden; user-select: text; }
.podcast-dialog::backdrop { background: #02091699; backdrop-filter: blur(10px); }
.podcast-close { position: absolute; right: 16px; top: 12px; background: none; border: 0; font: 300 32px/1 sans-serif; cursor: pointer; }
.podcast-dialog h2 { font-size: clamp(20px, 3vw, 24px); line-height: 1.25; margin: 0; padding-right: 32px; letter-spacing: -.04em; text-align: left; }
/* Initial dialog focus announces the title without painting a control focus ring. */
.podcast-dialog h2:focus { outline: none !important; }
.podcast-channels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 22px; }
.podcast-channels h3 { margin: 10px 0 0; font-size: 16px; line-height: 1.25; }
.channel-qr { width: min(100%, var(--qr-size)); margin-inline: auto; aspect-ratio: 1; display: grid; place-items: center; padding: 10px; border: 1px solid #e6e6e6; border-radius: 10px; background: #fff; }
.channel-qr img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.catalog, .article-drawer { background: var(--panel); color: var(--ink); }
.catalog-header, .article-topbar, .article-sources { border-color: var(--line); }
.catalog-brand, .catalog-heading p:last-child, .catalog-card span, .catalog-card time, .article-meta { color: var(--muted); }
.catalog-heading h2, .article-header h2, .article-body, .article-body h3, .article-body strong, .article-body .article-emphasis { color: var(--ink); }
.article-drawer { height: 100dvh; grid-template-rows: 76px minmax(0, 1fr); }
.article-topbar { position: relative; justify-content: flex-start; padding: 16px 2.5vw; background: var(--panel); }
.article-utilities { display: flex; align-items: center; gap: 8px; }
.article-topbar .nav-icon, .catalog-header .nav-icon { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; }
.nav-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon:hover { color: var(--accent); }
.article-actions { position: absolute; right: 2.5vw; top: 16px; }
.catalog-card, .catalog-more { background: var(--surface); border-color: var(--line); color: var(--ink); }
.catalog { --catalog-gutter: clamp(1.2rem, 4vw, 4rem); }
.catalog-header { position: relative; z-index: 1; display: block; height: 84px; padding: 0; border: 0; background: var(--panel); }
.catalog-intro { padding: 0 var(--catalog-gutter) 24px; border-bottom: 1px solid var(--line); }
.catalog-heading { --catalog-title-size: clamp(24px, 3vw, 44px); --catalog-caption-height: 30px; display: flex; align-items: center; gap: 18px; min-width: 0; width: max-content; max-width: 100%; }
.catalog-logo { height: calc(var(--catalog-title-size) * 1.15 + var(--catalog-caption-height)); width: auto; flex-shrink: 0; }
.catalog-heading h2 { margin: 0; font-size: var(--catalog-title-size); line-height: 1.15; }
.catalog-heading #catalogCount { font-size: 13px; line-height: 20px; margin: 10px 0 0; }
.catalog-scroll { overflow-anchor: none; padding: 0 0 3rem; }
.catalog-grid { margin: 24px var(--catalog-gutter) 0; }
.catalog-status { text-align: center; margin: 32px 0 0; padding: 16px 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.catalog-status[data-complete="true"]::before { content: ''; display: block; width: 28px; height: 1px; margin: 0 auto 14px; background: var(--line); }
.catalog-actions { position: absolute; right: 2.5vw; top: 24px; flex-direction: row; }
.catalog-back { position: absolute; left: 2.5vw; top: 24px; }
.catalog:focus, .catalog-heading h2:focus { outline: none !important; }
.catalog-card img { background: var(--surface); }
.article-body a, .article-sources a, #articleWebsite { color: var(--accent); text-decoration-color: currentColor; }
.article-shell { scrollbar-color: var(--muted) var(--panel); }
.article-shell::-webkit-scrollbar-track { background: var(--panel); }
.article-shell::-webkit-scrollbar-thumb { border-color: var(--panel); background: var(--muted); }
.article-header h2 { line-height: 1.25; }
.route-notice { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
@media (max-width: 1000px) and (min-width: 901px) {
  .site-controls { gap: 22px; }
  .site-header { top: 20px; }
  .hero h1, .hero.is-zh h1 { font-size: calc(var(--u) * 61); }
}
@media (max-width: 900px) {
  :root { --u: min(0.25641026vw, 1.25px); }
  /* Reduce the visible controls while retaining their 44px tap height. */
  .site-controls { gap: 11.2px; }
  .site-header { top: max(18px, env(safe-area-inset-top)); right: 20px; left: auto; }
  .wordmark { margin-right: 0; padding-inline: 5.4px; gap: 5.4px; border-radius: 9px; font-size: 14.4px; }
  .site-controls .language-toggle { padding-inline: 7.2px; border-radius: 9px; font-size: 12.6px; }
  .site-controls .theme-switch { width: 61.2px; min-width: 61.2px; padding-inline: 3.6px; gap: 3.6px; border-radius: 9px; }
  .theme-option { width: 25.2px; height: 27px; }
  .catalog-actions, .article-actions { right: 20px; top: 16px; }
  .catalog-back { left: 10px; top: 16px; }
  .article-topbar { padding-inline: 10px; }
  .theme-switch svg { width: 17.1px; }
  .hero, .hero.is-zh { left: 24px; width: calc(100vw - 48px); }
  .brand { left: 8px; top: 12dvh; width: min(43vw, 19.5dvh); height: min(55vw, 26dvh); }
  .weekly-note { left: 50%; top: 27dvh; width: 126px; height: 100px; }
  .weekly-note-en { font-size: 18px; }
  .weekly-note-en svg { width: 58px; height: 42px; }
  .hero-text, html[lang="en"] .hero-text { top: 45dvh; width: 100%; }
  .hero h1, .hero.is-zh h1 { font-size: clamp(24px, min(7.5vw, 6dvh), 46px); line-height: 1.2; letter-spacing: -.06em; }
  html[lang="en"] .hero h1 { font-size: clamp(23px, min(6.7vw, 5.6dvh), 42px); line-height: 1.2; letter-spacing: -.05em; }
  .hero .subtitle, .hero.is-zh .subtitle { margin-top: clamp(20px, 2.6dvh, 24px); font-size: clamp(12px, min(3.55vw, 2.3dvh), 17px); line-height: 1.8; font-weight: 550; }
  .hero.is-zh .subtitle-clause { display: block; }
  html[lang="en"] .hero .subtitle { font-size: 13px; max-width: 100%; line-height: 1.7; }
  .byline { margin-top: clamp(20px, 2.6dvh, 24px); gap: 8px; }
  .byline > span { font-size: 16px; }
  .byline svg { width: 75px; height: 38px; }
  .case-card, .tile.case-card, .drift-card.case-card { border-radius: 12px; padding: 15px; }
  .case-card .card-title strong { font-size: 18px; }
  .case-card .card-title small { font-size: 14px; }
  .drift-card.case-card .card-title strong { font-size: 15px; }
  .drift-card.case-card .card-title small { font-size: 12px; }
  .podcast-bar { top: auto; bottom: max(21px, env(safe-area-inset-bottom)); left: 24px; right: 24px; padding: 18px 0 0; }
  .podcast-entry { width: 100%; display: grid; grid-template-columns: 1fr auto 24px; gap: 10px; }
  .podcast-entry strong, html[lang="en"] .podcast-entry strong { font-size: 18px; letter-spacing: -.04em; }
  .podcast-cadence, .podcast-slash { display: none; }
  .partner-mark { width: 150px; height: 30px; }
  .podcast-arrow { width: 23px; height: 23px; }
  html[lang="en"] .podcast-entry { gap: 8px; }
  html[lang="en"] .podcast-entry strong { font-size: 14px; }
  html[lang="en"] .partner-mark { width: 125px; }
  .catalog-trigger, .stage.is-settings-enabled .catalog-trigger { top: 39%; bottom: auto; right: auto; height: 64px; padding: 16px 20px; }
  .podcast-dialog { padding: 24px 20px 20px; }
  .podcast-channels { gap: 16px; }
}
@media (max-width: 760px) { .catalog-header { height: 88px; } }
@media (max-width: 520px) {
  .podcast-dialog { --qr-size: min(260px, calc((100dvh - 200px) / 2), calc(100vw - 74px)); padding: 20px; }
  .podcast-channels { grid-template-columns: minmax(0, 1fr); width: var(--qr-size); margin-inline: auto; margin-top: 18px; gap: 18px; }
  .podcast-channels h3 { margin-top: 8px; }
}
@media (max-width: 360px) {
  .site-controls { gap: 9.8px; }
  .site-header, .catalog-actions, .article-actions { right: 14px; }
  .article-topbar { padding-inline: 14px; }
  .article-utilities { gap: 4px; }
  .wordmark { font-size: 13.5px; }
  .hero, .hero.is-zh { left: 20px; width: calc(100vw - 40px); }
  .podcast-entry strong { font-size: 16px; }
  .partner-mark { width: 125px; }
  .podcast-bar { left: 20px; right: 20px; }
  .weekly-note { width: 112px; height: 88px; top: 28dvh; }
}
@media (max-width: 349px) {
  .article-drawer { grid-template-rows: 124px minmax(0, 1fr); }
  .article-utilities { position: absolute; left: 12px; bottom: 8px; }
  .catalog-back { left: 12px; top: 72px; }
  .catalog-header { height: 136px; }
}
@media (max-width: 900px) and (orientation: portrait) {
  :root { --portrait-peek: clamp(56px, 18vw, 120px); }
  .catalog-heading { --catalog-title-size: clamp(32px, 9vw, 40px); --catalog-caption-height: 34px; gap: clamp(14px, 4vw, 18px); }
  .catalog-heading #catalogCount { font-size: 15px; line-height: 22px; margin-top: 12px; }
  .hero-text, html[lang="en"] .hero-text { width: calc(100vw - 24px - var(--portrait-peek) - 16px); }
  html[lang="en"] .hero h1 { font-size: clamp(19px, min(6.3vw, 5.6dvh), 42px); }
  .swipe-hint { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; color: var(--muted); font-size: 12px; font-weight: 550; line-height: 20px; letter-spacing: .02em; }
  .swipe-hint svg { width: 22px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
}
@media (max-width: 559px) and (max-height: 520px) { .swipe-hint { margin-top: 10px; } }
@media (max-height: 500px) { .catalog-trigger, .stage.is-settings-enabled .catalog-trigger { top: 35%; height: 60px; padding: 14px 18px; } }
/* Keep the text in document flow; shorten the artwork area when height is limited. */
@media (max-width: 900px) and (max-height: 740px) {
  .hero-text, html[lang="en"] .hero-text { top: 41dvh; }
  .weekly-note { top: calc(41dvh - 112px); }
}
@media (max-width: 559px) and (max-height: 520px) {
  .brand { top: 13dvh; width: 16.5dvh; height: 20dvh; }
  .weekly-note { top: calc(36dvh - 90px); width: 100px; height: 79px; }
  .weekly-note-en { font-size: 15px; padding-top: 0; }
  .weekly-note-en svg { width: 45px; height: 34px; margin-top: 8px; }
  .hero-text, html[lang="en"] .hero-text { top: 36dvh; }
  .byline { margin-top: 20px; }
  .byline svg { width: 64px; height: 32px; }
}
@media (min-width: 560px) and (max-width: 900px) and (max-height: 500px) {
  .brand { top: 72px; width: 24.75dvh; height: 30dvh; }
  .weekly-note { left: 8px; top: calc(72px + 30dvh + 12px); width: min(100px, 22dvh); height: min(79px, 17.38dvh); }
  .weekly-note-en { font-size: 14px; padding-top: 0; }
  .weekly-note-en svg { width: 48px; height: 30px; margin-top: 4px; }
  .hero-text, html[lang="en"] .hero-text { top: clamp(72px, 20dvh, 80px); left: 34%; width: 66%; display: grid; grid-template-columns: max-content 1fr; column-gap: 20px; }
  .hero h1, .hero.is-zh h1, html[lang="en"] .hero h1 { grid-column: 1 / -1; font-size: clamp(20px, 3.4vw, 28px); }
  .hero .subtitle, .hero.is-zh .subtitle, html[lang="en"] .hero .subtitle { grid-column: 1 / -1; margin-top: 16px; font-size: 12px; line-height: 1.7; }
  .byline { margin-top: 18px; }
  .byline svg { width: 64px; height: 32px; }
}
@media (max-height: 560px) and (min-width: 901px) { .site-header { top: 10px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Let the title backing follow bilingual copy height, including longer English titles. */
.case-card .card-title { isolation: isolate; }
.case-card .card-title::before {
  content: ''; position: absolute; z-index: -1;
  inset: calc(var(--u) * -18) calc(var(--u) * -18) -48px;
  background: linear-gradient(#fffffff2 0%, #ffffffe8 calc(100% - 48px), #ffffff00 100%);
  pointer-events: none;
}
@media (max-width: 900px) { .case-card .card-title::before { inset: -15px -15px -40px; } }
@media (max-width: 360px) {
  html[lang="en"] .podcast-entry strong { font-size: 12px; }
  html[lang="en"] .podcast-entry { gap: 6px; }
  html[lang="en"] .partner-mark { width: 98px; }
}