/* CJK fonts load on language selection in language.js, without blocking the
   English homepage on a second stylesheet request. All use font-display: swap. */

/* Personal homepage: open layouts, quiet rules, and readable content. */
@font-face {
  font-family: "Public Sans";
  src: url("../assets/fonts/public-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

.home-page {
  --content-max: 1120px;
  --hero-max: 1360px;
  --signature-accent: #bd7056;
  --section-pad: clamp(44px, 7vw, 80px);
  --shadow: none;
  --shadow-hover: none;
  --radius: 3px;
  --radius-sm: 3px;
  --rule: color-mix(in srgb, var(--ink) 20%, transparent);
  --travel-blue: #0071e3;
  background-image: none;
}
html[data-theme="dark"] .home-page { --travel-blue: #62a2ff; }
.home-page .top-bar {
  position: fixed;
  top: 0;
  z-index: 95;
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) 0;

  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;

}
.home-page .top-bar.is-scrolled {
  background-color: color-mix(in srgb, var(--bg) 84%, transparent);
  border-bottom-color: var(--rule);
  box-shadow: 0 8px 28px rgb(18 16 14 / 7%);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
}
.home-page .top-bar__inner { align-items: center; gap: 24px; }
.site-signature { font: italic 700 2rem var(--font-display); letter-spacing: -0.08em; margin-right: auto; }
.site-signature span { color: var(--signature-accent); }
.site-nav { display: flex; gap: clamp(12px, 2vw, 26px); font-size: 0.875rem; }
.site-nav a { padding-block: 10px; }
.site-nav a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 5px; }
.home-page .controls-trigger, .home-page .lang-picker__trigger, .home-page .pref-btn { box-shadow: none; border-color: var(--rule); background: transparent; }
.home-page .controls-trigger.is-sheet-open { position: fixed; top: max(12px, env(safe-area-inset-top)); right: var(--gutter); z-index: 111; background: var(--accent-text); border-color: var(--line); color: var(--on-accent); }
.home-page .hero { min-height: 0; }
.home-page .hero__inner { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(40px, 8vw, 110px); }
.home-page .hero__eyebrow { display: block; background: none; color: var(--mute); border: 0; padding: 0; box-shadow: none; font-size: 1.15rem; font-weight: 400; text-transform: none; letter-spacing: 0; margin-bottom: 4px; }
.home-page .hero__name { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif; font-size: clamp(4.5rem, 10vw, 7rem); font-weight: 400; letter-spacing: -0.065em; margin-bottom: 24px; }
.hero__period { color: var(--signature-accent); }
.hero__note { font: 1.4rem/1.5 var(--font-display); max-width: 25em; text-wrap: pretty; }
.hero__index { padding-top: 20px; }
.hero__index a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); font: 1.5rem/1.3 var(--font-display); }
.hero__index a:hover { color: var(--accent-text); }
.hero__index a span:last-child { font: 1rem var(--font); }
.hero__notes-label { display: inline-flex; align-items: center; gap: 10px; }
.hero__index .hero__notes-label > span { font: inherit; }
.hero__notes-label svg { width: 16px; height: 16px; opacity: .8; }
.notes-entrance { padding-bottom: var(--section-pad); }
.notes-entrance > .container { padding-top: 24px; border-top: 1px solid var(--rule); }
.notes-entrance__main { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; min-height: 44px; }
.notes-entrance__heading { display: inline-flex; align-items: center; gap: 10px; font: 400 1.6rem/1.3 var(--font-display); letter-spacing: -.025em; }
.notes-entrance__heading svg { color: var(--accent-text); }
.notes-entrance__action { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--accent-text); font-size: .8125rem; }
.notes-entrance__main:hover .notes-entrance__action { text-decoration: underline; text-underline-offset: 5px; }
.notes-entrance__main:active { transform: scale(.995); }
.notes-entrance__main:focus-visible, .notes-spotlight:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 6px; }
.notes-spotlight { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 20px; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--bg-card); color: var(--ink); }
.notes-spotlight[hidden] { display: none; }
.notes-spotlight--photo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.notes-spotlight__image { --note-cover-height: 310px; --note-cover-radius: 20px; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); }
.notes-spotlight__media { position: relative; display: block; width: min(100%, var(--note-cover-width), calc(var(--note-cover-height) * var(--note-cover-ratio))); aspect-ratio: var(--note-cover-ratio); overflow: hidden; border-radius: var(--note-cover-radius); }
.notes-spotlight__media picture { position: absolute; inset: 0; display: block; }
.notes-spotlight__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.notes-spotlight__media:is(.is-img-loading, .is-img-error) { background: var(--bg-card); }
.notes-spotlight__media.is-img-loading img, .notes-spotlight__media.is-img-error img { opacity: 0; }
.notes-carousel__slide[aria-hidden="true"] .notes-spotlight__media .img-loader { animation-play-state: paused; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-lightweight]) .notes-spotlight__media.is-img-ready img { transition: opacity .4s var(--ease-out); }
}
.notes-spotlight__copy { display: flex; flex-direction: column; align-items: start; justify-content: center; gap: 14px; min-width: 0; padding: clamp(24px, 4vw, 44px); }
.notes-spotlight__eyebrow, .notes-spotlight time { color: var(--mute); font-size: .75rem; }
.notes-spotlight__title { font: 400 clamp(1.6rem, 3vw, 2.3rem)/1.2 var(--font-display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.notes-spotlight__summary { color: var(--mute); font-size: .9375rem; line-height: 1.7; overflow-wrap: anywhere; }
.notes-spotlight__action { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 2px; padding: 10px 18px; border-radius: 24px; color: var(--bg); background: var(--ink); font-size: .8125rem; }
.notes-spotlight:hover .notes-spotlight__title { color: var(--accent-text); }
.notes-spotlight:active { transform: scale(.995); }
.notes-carousel { margin-top: 20px; }
.notes-carousel__viewport { overflow: hidden; border-radius: 14px; touch-action: pan-y; }
.notes-carousel__track { display: flex; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; }
.notes-carousel__slide { min-width: 0; flex: 0 0 100%; scroll-snap-align: start; padding: 1px; }
.notes-carousel__slide[hidden] { display: none; }
.notes-carousel .notes-spotlight { height: 100%; margin-top: 0; }
.notes-carousel .note-categories { display: flex; flex-wrap: wrap; gap: 8px; font-size: .75rem; color: var(--mute); }
.notes-carousel .note-categories span + span::before { content: '·'; margin-right: 8px; }
.notes-carousel.is-enhanced .notes-carousel__track { overflow: visible; }
.notes-carousel__controls { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 10px; }
.notes-carousel__controls[hidden] { display: none; }
.notes-carousel__controls button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; border: 0; color: var(--mute); background: transparent; cursor: pointer; }
.notes-carousel__controls button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 6px; }
.notes-carousel__controls button:active { transform: scale(.94); }
.notes-carousel__controls > button { font-size: 1.2rem; }
.notes-carousel__dots { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.notes-carousel__controls .notes-carousel__dot { min-width: 28px; width: 28px; padding: 0 10px; }
.notes-carousel__controls .notes-carousel__dot[aria-current] { width: 56px; }
.notes-carousel__indicator { position: relative; display: block; width: 100%; height: 6px; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--mute) 30%, transparent); }
.notes-carousel__indicator::after { content: ''; position: absolute; inset: 0; background: var(--accent-text); transform: scaleX(var(--note-progress, 0)); transform-origin: left; transition: transform var(--note-progress-time, 0ms) linear; }
.notes-carousel__dot[aria-current] .notes-carousel__indicator { background: color-mix(in srgb, var(--mute) 40%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-lightweight]) .notes-carousel.is-enhanced .notes-carousel__track { transition: transform 540ms cubic-bezier(.22, .68, .2, 1); }
  html:not([data-lightweight]) .notes-carousel__dot { transition: width 240ms ease; }
}
html[data-lightweight] .notes-carousel__controls { gap: 4px; }
@media (max-width: 420px) {
  .notes-carousel__controls:has(.notes-carousel__dot:nth-child(7)) { gap: 4px; }
  .notes-carousel__dots:has(.notes-carousel__dot:nth-child(7)) .notes-carousel__dot { min-width: 24px; width: 24px; padding-inline: 8px; }
  .notes-carousel__dots:has(.notes-carousel__dot:nth-child(7)) .notes-carousel__dot[aria-current] { width: 44px; }
}
@media (max-width: 767px) {
  .notes-spotlight--photo { grid-template-columns: minmax(0, 1fr); }
  .notes-spotlight__image { --note-cover-height: 240px; --note-cover-radius: 16px; padding: 20px; }
  .notes-spotlight__copy { gap: 12px; }
}
html[data-lightweight] .notes-spotlight__image { --note-cover-height: 160px; --note-cover-radius: 8px; padding: 12px; }
html[data-lightweight] .notes-spotlight__copy { padding: 16px; }
html[data-lightweight] .notes-spotlight__media .img-loader { animation: none; text-shadow: none; background: none; color: var(--mute); }
.home-page .section > .container { border-top: 1px solid var(--rule); }
.home-page .section__label { display: none; }
.home-page .section__title { font: 400 clamp(1.75rem, 4vw, 2.4rem)/1.2 var(--font-display); letter-spacing: -0.035em; }
.home-page .about > .container { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.home-page .about__body { max-width: none; }
.home-page .about__text { font-size: 1rem; font-weight: 400; color: var(--ink); }
.home-page .interests__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 48px; }
.home-page .interest-card, .home-page .interest-card.is-settled:hover { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: baseline; align-content: start; gap: 8px 20px; padding: 20px 0; background: none; border: 0; border-top: 1px solid var(--rule); box-shadow: none; transform: none; }
.home-page .interest-card__icon { display: none; }
.home-page .interest-card__title { font: 400 1.25rem/1.35 var(--font-display); margin: 0; }
.home-page .interest-card__desc { font-size: 0.875rem; line-height: 1.65; }
.home-page .interest-card__learn { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid var(--rule); border-radius: 3px; background: var(--bg-card); font-size: 0.85rem; font-weight: 600; text-align: left; text-decoration: none; }
.home-page .interest-card__learn::after { content: "→"; flex: 0 0 auto; }
.home-page .interest-card__learn:hover { color: var(--accent-text); border-color: var(--accent-text); }
.home-page .featured-stack { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
.home-page .featured-card { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 0; border: 0; box-shadow: none; background: transparent; border-radius: 0; min-height: 0; }
.home-page .featured-card__visual { order: -1; aspect-ratio: 16/10; min-height: 0; border: 1px solid var(--rule); border-radius: 2px; box-shadow: none; }
.home-page .featured-card__visual img { min-height: 0; }
.home-page .featured-card__content { padding: 0; }
.home-page .featured-card__badge { display: none; }
.home-page .featured-card__title { font: 400 1.7rem/1.25 var(--font-display); }
.home-page .featured-card--duskline .featured-card__title { font: 700 1.45rem/1.25 "Public Sans", var(--font); letter-spacing: 0.1em; }
.home-page .featured-card--duskline .featured-card__desc,
.home-page #project-usa-gallery .featured-card__desc { font-family: "Public Sans", var(--font); letter-spacing: -0.006em; }
.home-page .featured-card__desc { font-weight: 400; }
.home-page .featured-card--kit .featured-card__title,
.home-page .featured-card--kit .featured-card__desc { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.home-page .featured-card--kit .featured-card__title { font-size: 1.55rem; font-weight: 600; letter-spacing: -0.02em; }
.home-page #project-usa-gallery .featured-card__title { font-family: "Public Sans", var(--font); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.035em; color: var(--travel-blue); }
.home-page [data-project="usa"] .featured-card__title { font-family: "Fraunces", var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.home-page [data-project="usa"] .featured-card__desc { font-family: "Public Sans", var(--font); letter-spacing: -0.006em; }
.home-page .featured-card--japan .featured-card__title { font-weight: 600; }
.home-page .featured-card--japan .featured-card__desc { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.home-page .featured-card__desc { font-size: 0.9rem; max-width: 38em; }
.home-page .featured-card__cta { font-size: 0.8rem; }
.home-page .featured-card__lines { margin-top: 12px; }
.home-page #project-usa-gallery .featured-card__visual { aspect-ratio: 16/10; }
.home-page .featured-card:has(.featured-card__hit:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 8px; }
.home-page .archived-projects-trigger { box-shadow: none; background: var(--bg-card); border: 1px solid var(--rule); padding: 16px 18px; border-radius: 3px; }
.home-page .archived-projects-trigger__title { font: 400 1.7rem/1.25 var(--font-display); letter-spacing: -0.035em; }
.home-page .featured-stack > .archived-projects-divider,
.home-page .featured-stack > .archived-projects-trigger { grid-column: 1 / -1; }
.home-page .archived-projects-trigger__eyebrow { display: none; }
.home-page .archived-projects-trigger__hint { display: none; }
.home-page .link-card, .home-page .duolingo-card { box-shadow: none; border-color: var(--rule); background: transparent; }
.home-page .link-card:hover { transform: none; }
.home-page .footer { border-top: 0; }
.home-page .footer__inner { border-top: 1px solid var(--rule); }
.home-page .footer__verse { border: 0; box-shadow: none; background: transparent; font-family: var(--font-display); }
@media (max-width: 767px) {
  .home-page .top-bar__inner { gap: 16px; }
  .home-page .hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .home-page .hero__index { max-width: 380px; padding-top: 0; }
  .home-page .hero__index a { font-size: 1.25rem; padding-block: 10px; }
  .home-page .about > .container { grid-template-columns: 1fr; gap: 0; }
  .home-page .interests__grid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 480px) {
  .home-page .top-bar__inner { flex-wrap: wrap; column-gap: 10px; }
  .site-nav { font-size: 0.75rem; gap: 12px; }
  .home-page .hero { padding-top: 48px; }
  .home-page .hero__name { font-size: 4.75rem; }
  .home-page .hero__note { font-size: 1.25rem; }
  .home-page .featured-stack { grid-template-columns: 1fr; }
  .home-page .interests__grid { grid-template-columns: 1fr; }
  .home-page .interest-card { grid-template-columns: minmax(90px,0.7fr) minmax(0,1.3fr); gap: 8px 14px; padding-block: 16px; }
}

.home-page .about { padding-top: 0; }

/* ============ Per-language typography ============
   The English design gives each project card its own typographic voice.
   These rules mirror those personalities for CJK scripts, where Latin
   fonts (Public Sans, Fraunces) have no glyphs. Selectors key off the
   data-language attribute set on <html> by the i18n system. */

/* ---- Simplified Chinese ---- */
:is([data-language="zh"], [data-language="zh-Hant"]) .home-page {
  --font-zh-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-zh-serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
}
/* Duskline: airy and open — CJK glyphs are wider, so tracking goes wider too */
:is([data-language="zh"], [data-language="zh-Hant"]) .home-page .featured-card--duskline .featured-card__title {
  font-family: var(--font-zh-sans);
  letter-spacing: 0.16em;
}
/* Kit: crisp and technical */
:is([data-language="zh"], [data-language="zh-Hant"]) .home-page .featured-card--kit .featured-card__title,
:is([data-language="zh"], [data-language="zh-Hant"]) .home-page .featured-card--kit .featured-card__desc {
  font-family: var(--font-zh-sans);
  letter-spacing: 0.02em;
}
/* USA Gallery: confident grotesque */
:is([data-language="zh"], [data-language="zh-Hant"]) .home-page #project-usa-gallery .featured-card__title {
  font-family: var(--font-zh-sans);
  letter-spacing: 0.04em;
}
/* USA project: editorial serif voice, mirrored in a Song-style serif */
:is([data-language="zh"], [data-language="zh-Hant"]) .home-page [data-project="usa"] .featured-card__title {
  font-family: var(--font-zh-serif);
  letter-spacing: 0.02em;
}
/* Japan card: quiet competence */
:is([data-language="zh"], [data-language="zh-Hant"]) .home-page .featured-card--japan .featured-card__title {
  font-family: var(--font-zh-sans);
  font-weight: 500;
  letter-spacing: 0.08em;
}
:is([data-language="zh"], [data-language="zh-Hant"]) .home-page .hero__note {
  font-family: var(--font-zh-sans);
}

[data-language="zh-Hant"] .home-page {
  --font-zh-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-zh-serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
}

/* ---- Japanese ---- */
[data-language="ja"] .home-page {
  --font-ja-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-ja-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
[data-language="ja"] .home-page .featured-card--duskline .featured-card__title {
  font-family: var(--font-ja-sans);
  letter-spacing: 0.14em;
}
[data-language="ja"] .home-page .featured-card--kit .featured-card__title,
[data-language="ja"] .home-page .featured-card--kit .featured-card__desc {
  font-family: var(--font-ja-sans);
  letter-spacing: 0.02em;
}
[data-language="ja"] .home-page #project-usa-gallery .featured-card__title {
  font-family: var(--font-ja-sans);
  letter-spacing: 0.04em;
}
[data-language="ja"] .home-page [data-project="usa"] .featured-card__title {
  font-family: var(--font-ja-serif);
  letter-spacing: 0.02em;
}
[data-language="ja"] .home-page .featured-card--japan .featured-card__title {
  font-family: var(--font-ja-sans);
  font-weight: 500;
  letter-spacing: 0.08em;
}
[data-language="ja"] .home-page .hero__note {
  font-family: var(--font-ja-sans);
}

/* ---- Spanish ---- */
/* Latin script: Public Sans already covers it. Keep the English voices,
   with slightly relaxed tracking — Spanish words run longer. */
[data-language="es"] .home-page .featured-card--duskline .featured-card__title {
  letter-spacing: 0.08em;
}

/* Editorial system: one rhythm, quiet surfaces, and consistent utility type.
   Scope to the homepage, including its dialogs; legal layouts stay independent. */
html .home-page {
  --rule: color-mix(in srgb, var(--ink) 16%, transparent);
  --control-line: color-mix(in srgb, var(--ink) 32%, transparent);
  --section-pad: clamp(56px, 7vw, 88px);
  --radius: 4px;
  --radius-sm: 4px;
  background-image: none;
}
html[data-theme="dark"] .home-page {
  background-image: none;
  --rule: color-mix(in srgb, var(--ink) 15%, transparent);
  --control-line: color-mix(in srgb, var(--ink) 30%, transparent);
}
/* Give adjacent sections a single interval instead of two stacked paddings. */
.home-page .section { padding-block: 0 var(--section-pad); }
.home-page .section > .container { padding-top: 28px; }
.home-page .section__header { margin-bottom: 28px; }
.home-page .about__text { line-height: 1.8; }
.home-page .about__text:last-child { margin-bottom: 0; }
.home-page .interest-card { border-radius: 0; }
.home-page .featured-card__content { display: flex; flex: none; flex-direction: column; align-items: flex-start; }
.home-page .featured-card__cta { margin-top: 12px; padding-top: 0; }

/* Project names retain their own identity; supporting copy shares one voice. */
html .home-page .featured-card .featured-card__desc,
html .home-page #project-usa-gallery .featured-card__desc {
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--mute);
}
html .home-page :is(.featured-card__cta, .duolingo-card__profile, .qr-modal__profile,
  .duolingo-card__expand, .host-option__kicker, .project-host__label, .controls-section__label) {
  font-family: var(--font);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.home-page .featured-card__cta,
.home-page .duolingo-card__profile { font-size: 0.875rem; }
.home-page .project-host__label { color: var(--mute); font-size: 0.75rem; }
.home-page .host-option__name { font-weight: 600; }
.home-page .section__header--projects .host-option__kicker { font-size: 0.6875rem; letter-spacing: 0; line-height: 1.4; }
.home-page .section__header--projects .host-option__name { font-size: 0.8125rem; line-height: 1.4; }

/* Controls remain visibly interactive without the old offset shadows. */
html .home-page :is(.controls-trigger, .lang-picker__trigger, .pref-btn, .host-option,
  .interest-card__learn) {
  border-color: var(--control-line);
  border-width: 1px;
  box-shadow: none;
  background: transparent;
}
html .home-page :is(.controls-trigger, .lang-picker__trigger, .pref-btn, .host-option):hover {
  background: var(--accent-soft);
  box-shadow: none;
  transform: none;
}
html .home-page .host-option.is-selected {
  background: var(--accent-soft);
  color: var(--accent-text);
  box-shadow: none;
}
html .home-page .controls-trigger.is-sheet-open {
  background: var(--accent-text);
  color: var(--on-accent);
}
html .home-page :is(.controls-trigger, .lang-picker__trigger, .pref-btn, .host-option):focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}
/* An inset focus ring cannot be clipped by the segmented control's wrapper. */
.home-page .section__header--projects .host-option:focus-visible { outline-offset: -3px; }

/* Project imagery and social links sit on the same paper/charcoal surface. */
html .home-page :is(.featured-card, .link-card, .duolingo-card) {
  background: transparent;
  box-shadow: none;
}
html .home-page .featured-card__visual { border-color: var(--rule); box-shadow: none; }
html .home-page :is(.link-card, .duolingo-card) {
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 24px 0;
}
html .home-page :is(.link-card__icon, .duolingo-card__icon) {
  border: 0;
  background: var(--accent-soft);
  color: var(--accent-text);

}
.home-page .link-card__label,
.home-page .duolingo-card__label { font-weight: 600; }
.home-page .link-card__sub,
.home-page .duolingo-card__sub { font-family: var(--font); font-size: 0.875rem; }
.home-page .duolingo-card__hint { font-size: 0.875rem; line-height: 1.6; font-weight: 400; }
.home-page .archived-projects-divider { display: none; }
html .home-page .archived-projects-trigger {
  border: 0;
  border-block: 1px solid var(--rule);
  border-radius: 0;
  padding: 20px 0;
  background: transparent;
  box-shadow: none;
}
.home-page .archived-projects-trigger__title { font-size: 1.4rem; }
html .home-page :is(.duolingo-card__frame, .qr-modal__frame) {
  border: 1px solid var(--rule);
  box-shadow: none;
}
/* Dialogs float gently; their internal borders use the same quiet rules. */
html .home-page :is(.qr-modal__panel, .erhu-modal__panel, .archived-projects-modal__panel, .github-popover__card) {
  border: 1px solid var(--rule);
  box-shadow: 0 16px 64px rgb(0 0 0 / 18%);
}
html .home-page :is(.qr-modal__close, .erhu-modal__close, .archived-projects-modal__close) {
  border: 1px solid var(--control-line);
  box-shadow: none;
}
.home-page .footer { padding-top: 0; }
.home-page .footer__inner { padding-top: 32px; }
.home-page .footer__signoff { font: 400 1.5rem/1.4 var(--font-display); }

@media (hover: hover) and (pointer: fine) {
  html .home-page .link-card:hover { background: transparent; box-shadow: none; }
  .home-page .link-card:hover .link-card__label { color: var(--accent-text); }
  .home-page .featured-card:hover .featured-card__cta { text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 767px) {
  .home-page .section > .container { padding-top: 24px; }
  .home-page .section__header { margin-bottom: 24px; }
  .home-page .about > .container { gap: 0; }
}
@media (max-width: 560px) {
  .home-page .featured-stack { grid-template-columns: 1fr; gap: 32px; }
}

/* Carry the warm palette into language selection rather than system blue. */
html .home-page .lang-picker__menu {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
}
html .home-page .lang-picker__option { color: var(--ink); }
html .home-page .lang-picker__option:is(.is-selected, [aria-selected="true"]) {
  background: var(--accent-soft);
  color: var(--accent-text);
}
html .home-page .lang-picker__option:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: -2px;
}
@media (max-width: 767px) {
  html .home-page .lang-picker__menu { box-shadow: none; }
}

/* Quiet, rounded surfaces distinguish social destinations from project previews. */
html .home-page .link-card,
html .home-page .duolingo-card {
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--bg-card);
  padding: 24px;
}
.home-page .link-grid { gap: 24px; }
.home-page .link-grid__divider { display: block; }
html .home-page :is(.link-card__icon, .duolingo-card__icon) {
  border: 1px solid color-mix(in srgb, var(--ink) 55%, transparent);
  border-radius: 3px;
}
html .home-page .link-card__icon--image { background: #fff; }
.home-page .duolingo-card { justify-content: flex-start; }
html .home-page .duolingo-card__frame {
  border: 1px solid color-mix(in srgb, var(--ink) 55%, transparent);
}
/* iOS native-switch haptic overlays (see haptics.js).
   Each interactive control gets an invisible native switch on top; the user's
   physical tap lands on it so iOS plays its Taptic Engine tick. */
.wx-ios-haptic-relative { position: relative; }
.wx-ios-haptic-hit {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: auto;
  z-index: 1;
}

html[data-theme="dark"] .home-page .link-card__icon--image {
  background: transparent;
  border-color: color-mix(in srgb, var(--line) 70%, var(--accent));
}

/* Refined layout: align the header to the content, give photography room,
   and use motion only to acknowledge an actionable surface. */
.home-page .top-bar__inner {

  max-width: calc(var(--content-max) + var(--gutter) + var(--gutter));
}
.home-page .hero__inner { gap: clamp(40px, 7vw, 88px); }
.home-page .hero__index a { min-height: 48px; }
.home-page .hero__index a span:last-child {
  transition: transform 220ms var(--ease-out);
}
.home-page .site-signature span { display: inline-block; transform-origin: 50% 90%; }
.home-page .hero__index a span:first-child { transition: transform 220ms var(--ease-out); }
.home-page .hero__index a:active span:first-child { transform: translateX(3px); }
.home-page .hero__index a:active span:last-child { transform: translateX(6px); }
.home-page .interest-card__learn::after { transition: transform 220ms var(--ease-out); }
.home-page .interest-card__learn:active { transform: scale(0.98); }
.home-page .link-card.is-copied .link-card__icon { animation: hub-confirm 300ms var(--ease-out); }
.home-page :is(.erhu-modal, .archived-projects-modal):not([hidden]) > :is(.erhu-modal__panel, .archived-projects-modal__panel) {
  animation: hub-dialog-enter 240ms var(--ease-out) both;
}
@keyframes hub-signature-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-5px) scale(0.9, 1.12); }
  70% { transform: translateY(0) scale(1.15, 0.85); }
}
@keyframes hub-confirm {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.08); }
}
@keyframes hub-dialog-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.home-page .site-signature:focus-visible span { animation: hub-signature-bounce 420ms ease; }
.home-page .hero__index a:focus-visible span:last-child { transform: translateX(4px); }
.home-page .site-nav a {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: color 180ms ease;
}
.home-page .site-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.home-page .site-nav a[aria-current="location"] { color: var(--accent-text); }
.home-page .site-nav a[aria-current="location"]::after { transform: scaleX(1); }
/* Root scroll padding already accounts for the measured sticky header. */
.home-page :is(#project-usa-gallery, #interest-erhu) { scroll-margin-top: 0; }
.home-page .featured-stack { gap: 40px 28px; }
html .home-page .featured-card__visual { border-radius: 14px; }
.home-page .featured-card__content { padding-inline: 4px; }
.home-page .featured-card__desc { margin-bottom: 0; }
.home-page .img-loader {
  --loader-bar: 1px;
  --loader-ink: var(--mute);
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 500;
}
html[data-project-links="single"] .home-page .featured-card:has(.featured-card__hit:focus-visible) {
  outline: 2px solid var(--accent-text);
  outline-offset: 6px;
  border-radius: 14px;
  box-shadow: none;
}
html[data-project-links="single"] .home-page .featured-card:has(.featured-card__hit:active) {
  transform: scale(0.992);
  box-shadow: none;
}
.home-page :is(.controls-trigger, .lang-picker__trigger, .pref-btn, .interest-card__learn) {
  border-radius: 10px;
}
.home-page .archived-projects-trigger__arrow { transition: transform 220ms var(--ease-out); }
html .home-page .archived-projects-trigger:active { transform: scale(0.995); box-shadow: none; }
.home-page .link-card:active { transform: scale(0.985); }
.home-page :is(.qr-modal__panel, .erhu-modal__panel, .archived-projects-modal__panel) { border-radius: 20px; }
@media (hover: hover) and (pointer: fine) {
  .home-page .site-signature:hover span { animation: hub-signature-bounce 420ms ease; }
  .home-page .hero__index a:hover span:first-child { transform: translateX(2px); }
  .home-page .hero__index a:hover span:last-child { transform: translateX(4px); }
  .home-page .interest-card__learn:hover::after { transform: translateX(3px); }
  html .home-page .link-card:hover { background: var(--bg-card); }
  .home-page .archived-projects-trigger:hover .archived-projects-trigger__arrow { transform: translateX(3px); }
}
@media (max-width: 767px) {
  .home-page .hero { padding-block: 48px 56px; }
  .home-page .hero__index { max-width: none; }
  .home-page .hero__index a { font-size: 1.125rem; }
  .home-page .interest-card { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .home-page .interest-card__learn { grid-column: 1 / -1; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page *, .home-page *::before, .home-page *::after {
    animation: none !important;
    transition: none !important;
  }
  .home-page .hero__index a:is(:hover, :focus-visible, :active) span,
  .home-page .interest-card__learn:is(:hover, :active),
  .home-page .interest-card__learn:hover::after,
  .home-page .featured-card:hover .featured-card__cta svg,
  .home-page .archived-projects-trigger:hover .archived-projects-trigger__arrow,
  .home-page .featured-card:hover .featured-card__visual img,
  html[data-project-links="single"] .home-page .featured-card:has(.featured-card__hit:active),
  .home-page .link-card:active { transform: none; }
}

/* Clear hero chrome, with a small, slow contraction like the travel guide. */
.home-page .top-bar {
  padding-top: max(20px, env(safe-area-inset-top));
  padding-bottom: 0;
  background: transparent;
  transition:
    padding 520ms ease,
    background-color 520ms ease,
    border-color 520ms ease,
    box-shadow 520ms ease,
    -webkit-backdrop-filter 520ms ease,
    backdrop-filter 520ms ease;
}
.home-page .top-bar.is-scrolled {
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: 0;
  background-color: color-mix(in srgb, var(--bg) 88%, transparent);
  background-image: none;
}
.home-page .top-bar__inner {
  width: 100%;
  max-width: calc(var(--hero-max) - var(--gutter) - var(--gutter));
  padding-bottom: 14px;
  border: 0;
  transition: max-width 520ms ease, padding-bottom 520ms ease;
}
.home-page .top-bar.is-scrolled .top-bar__inner {
  width: 100%;
  max-width: calc(var(--hero-max) - var(--gutter) - var(--gutter) - 24px);
  padding-bottom: 10px;
}
.home-page .site-signature,
.home-page .site-nav a { text-shadow: 0 1px 16px color-mix(in srgb, var(--bg) 40%, transparent); }
.home-page .top-bar.is-scrolled :is(.site-signature, .site-nav a) { text-shadow: none; }

@media (min-width: 768px) {
  /* Blur only the rounded controls, never their rectangular container. */
  html .home-page .top-bar :is(.lang-picker__trigger, .pref-btn) {
    color: var(--ink);
    background: color-mix(in srgb, var(--bg-card) 76%, transparent);
    border-color: color-mix(in srgb, var(--ink) 22%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: color 460ms ease, background-color 460ms ease, border-color 460ms ease;
  }
  html .home-page .top-bar :is(.lang-picker__trigger, .pref-btn):hover {
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    border-color: color-mix(in srgb, var(--ink) 40%, transparent);
  }
  .home-page .lang-picker__trigger { min-height: 44px; }
  .home-page .pref-btn { width: 44px; height: 44px; min-height: 44px; }
}

.home-page .hero {
  position: relative;
  isolation: isolate;
  --hero-edge: clamp(72px, 12vh, 120px);
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
}
.home-page .hero__backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--hero-edge)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--hero-edge)), transparent);
  transition: background-color 460ms var(--ease-out);
}
.home-page .hero__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  filter: brightness(.94) saturate(1.02) contrast(1.01);
  transition: filter 460ms var(--ease-out);
}
.home-page .hero__backdrop img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Match main-modern.webp's crop so the bridge and pelican stay in view. */
  object-position: center 82%;
  filter: none;
}
html.hero-photo-pending .home-page .hero__backdrop img:not(.is-hero-enter) {
  transform: scale(1.09);
  opacity: 0;
  filter: blur(20px);
}
.home-page .hero__backdrop img.is-hero-enter {
  animation:
    hub-hero-fade .65s cubic-bezier(.33, 0, .2, 1) forwards,
    hub-hero-blur .85s cubic-bezier(.33, 0, .2, 1) forwards,
    hub-hero-zoom 1.5s cubic-bezier(.16, 1, .3, 1) forwards;
}
.home-page .hero__backdrop::before,
.home-page .hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 460ms var(--ease-out);
}
.home-page .hero__backdrop::before {
  z-index: 1;
  background:
    radial-gradient(ellipse 85% 90% at 0% 100%, rgb(251 249 244 / 94%) 0%, rgb(251 249 244 / 62%) 45%, transparent 85%),
    linear-gradient(to top, rgb(251 249 244 / 24%) 0%, transparent 52%),
    linear-gradient(to bottom, rgb(251 249 244 / 55%) 0%, transparent 28%);
}
html[data-theme="dark"] .home-page .hero__photo {
  filter: brightness(.72) saturate(1.06) contrast(1.02);
}
.home-page .hero__backdrop::after {
  z-index: 2;
  opacity: 0;
  background:
    linear-gradient(to top, rgb(20 23 25 / 82%) 0%, transparent 52%),
    linear-gradient(105deg, rgb(20 23 25 / 58%) 0%, transparent 55%),
    linear-gradient(to bottom, rgb(20 23 25 / 38%) 0%, transparent 28%);
}
html[data-theme="dark"] .home-page .hero__backdrop::before { opacity: 0; }
html[data-theme="dark"] .home-page .hero__backdrop::after { opacity: 1; }
.home-page .hero { transition: background-color 460ms var(--ease-out); }
/* A small frosted edge dissolves the photograph into the following section.
   Keep it below the content so only the scenery softens. */
.home-page .hero__photo::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: var(--hero-edge);
  pointer-events: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 68%);
  mask-image: linear-gradient(to bottom, transparent, #000 68%);
}
.home-page .hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: var(--hero-edge);
  pointer-events: none;
  background-color: var(--bg);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 72%);
  mask-image: linear-gradient(to bottom, transparent, #000 72%);
  transition: background-color 460ms var(--ease-out);
}
.home-page .about > .container { border-top: 0; padding-top: 32px; }
.home-page .about { position: relative; }
.home-page .about::before {
  /* Cover the clip boundary to avoid a one-pixel WebKit compositing seam. */
  content: "";
  position: absolute;
  z-index: 1;
  inset: -2px 0 auto;
  height: 4px;
  background-color: var(--bg);
  pointer-events: none;
  transition: background-color 460ms var(--ease-out);
}
@keyframes hub-hero-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes hub-hero-blur {
  from { filter: blur(20px); }
  to { filter: blur(0); }
}
@keyframes hub-hero-zoom {
  from { transform: scale(1.09); }
  to { transform: scale(1); }
}
.home-page .hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  align-items: end;
  padding-top: max(136px, calc(108px + env(safe-area-inset-top)));
  padding-bottom: max(clamp(52px, 9vh, 112px), calc(36px + env(safe-area-inset-bottom)));
}
.home-page .hero__intro { max-width: 660px; }
.home-page .hero__eyebrow { color: var(--ink); opacity: .85; }
.home-page .hero__name,
.home-page .hero__note { text-shadow: 0 1px 22px color-mix(in srgb, var(--bg) 36%, transparent); }
.home-page .hero__index {
  position: relative;
  align-self: end;
  margin-top: 0;
  padding-top: 0;
  text-shadow: 0 1px 18px color-mix(in srgb, var(--bg) 38%, transparent);
  transition: text-shadow 460ms var(--ease-out);
}
.home-page .hero__index a {
  position: relative;
  color: var(--ink);
  border-bottom: 0;
  transition: color 220ms var(--ease-out);
}
.home-page .hero__index a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(40px, 12%, 64px);
  height: 1px;
  background: linear-gradient(to right, color-mix(in srgb, var(--ink) 34%, transparent), transparent);
  pointer-events: none;
}
.home-page .hero__index a:last-child::after { display: none; }
.home-page .hero__intro :is(.hero__eyebrow, .hero__name, .hero__note),
.home-page .hero__period { transition: color 460ms var(--ease-out), text-shadow 460ms var(--ease-out); }
.home-page .hero__index a::after { transition: background 460ms var(--ease-out); }

.home-page .erhu-wiki__video-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-block: 10px;
  color: var(--mute);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}
.home-page .erhu-wiki__video-status[hidden],
.home-page .erhu-wiki__video-status progress[hidden] { display: none; }
.home-page .erhu-wiki__video-status progress { width: 120px; height: 4px; accent-color: var(--accent-text); }

@media (min-width: 1024px) {
  .home-page .hero { --hero-edge: clamp(40px, 6vh, 64px); }
  /* One introduction and three paths, held together on the open left side. */
  .home-page .hero__inner {
    max-width: var(--hero-max);
    grid-template-columns: minmax(0, min(56vw, 620px));
    gap: 24px;
    padding-bottom: max(clamp(56px, 8vh, 96px), env(safe-area-inset-bottom));
  }
  .home-page .hero__name { font-size: clamp(5.5rem, 8.5vw, 7.25rem); margin-bottom: 20px; }
  .home-page .hero__note { font-size: 1.3rem; max-width: 27em; }
  .home-page .hero__index {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    width: 100%;
    max-width: 560px;
  }
  .home-page .hero__index a { padding-block: 12px; font-size: 1.15rem; }
  .home-page .hero__index a::after { width: 100%; }
  .home-page .hero__index a:last-child::after { display: block; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .home-page .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home-page .hero__index {
    position: static;
    align-self: start;
    width: min(100%, 420px);
    margin: 0;
  }
  .home-page .hero__index a { font-size: 1.2rem; padding-block: 10px; }
  .home-page .hero__index a::after { width: min(58%, 300px); }
}

@media (max-width: 767px) {
  /* Reserve the trigger's slot while its close control is hoisted to body. */
  .home-page .control-cluster { min-width: 44px; min-height: 44px; }
  .home-page .top-bar.is-scrolled .top-bar__inner { max-width: 100%; }
  .home-page .hero { min-height: 100svh; }
  .home-page .hero__inner {
    align-content: end;
    gap: 28px;
    padding-top: max(132px, calc(104px + env(safe-area-inset-top)));
    padding-bottom: max(48px, calc(32px + env(safe-area-inset-bottom)));
  }
  .home-page .hero__index {
    position: static;
    align-self: start;
    width: 100%;
    max-width: min(70%, 280px);
    margin-top: 0;
  }
  .home-page .hero__index a { font-size: 1.2rem; }
  .home-page .hero__index a::after { width: min(58%, 300px); }
  .home-page .hero__backdrop img { object-position: center 82%; }
}
@media (max-width: 480px) {
  .home-page .top-bar { padding-inline: max(16px, var(--gutter)); }
  .home-page .top-bar__inner { flex-wrap: nowrap; gap: 12px; padding-bottom: 10px; }
  .home-page .site-nav { gap: clamp(8px, 2.5vw, 12px); font-size: .8125rem; white-space: nowrap; }
  .home-page .site-nav a { min-height: 44px; }
  .home-page .hero__inner { gap: 24px; }
  .home-page .hero__name { font-size: clamp(4.25rem, 19vw, 5rem); }
  .home-page .hero__note { font-size: clamp(1.15rem, 5.2vw, 1.35rem); }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .hero__backdrop img.is-hero-enter { animation: none; }
  html.hero-photo-pending .home-page .hero__backdrop img:not(.is-hero-enter) {
    transform: none;
    opacity: 1;
    filter: none;
  }
}

/* Project actions follow the length of their own description. */
.home-page .featured-card__cta { min-height: 32px; align-items: center; }
.home-page #project-usa-gallery .featured-card__visual img { object-position: center; }
.home-page .hub-preview { position: relative; overflow: hidden; }
.home-page .hub-card__hit { padding: 0; border: 0; background: transparent; cursor: pointer; }
.home-page .hub-preview img { width: 100%; height: 100%; object-fit: cover; object-position: center 82%; }
.home-page .hub-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgb(14 25 32 / 62%), transparent 90%), linear-gradient(to top, rgb(14 25 32 / 46%), transparent 70%);
  pointer-events: none;
}
.hub-preview__type { position: absolute; z-index: 1; inset: 22px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; color: #fff; }
.hub-preview__signature { position: absolute; top: 0; font: italic 700 1.4rem/1 var(--font-display); letter-spacing: -.08em; }
.hub-preview__name { font: 400 clamp(3rem, 5vw, 4.5rem)/1.15 var(--font-display); letter-spacing: -.055em; }
.hub-preview__type :is(.hub-preview__signature, .hub-preview__name) > span { color: #e09a7c; }
.hub-preview__caption { margin-top: 8px; font-size: .8125rem; }
.hub-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin-top: auto; padding-top: 12px; }
.hub-card__current { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; color: var(--mute); }
.hub-card__current::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--signature-accent); }
.hub-card__learn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 3px; border: 0; background: none; color: var(--accent-text); font: 500 .8125rem/1.4 var(--font); cursor: pointer; text-align: right; }
.featured-card--hub:hover .hub-card__learn { text-decoration: underline; text-underline-offset: 4px; }
.hub-card__learn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 4px; }
.home-page .site-history-panel { width: min(100%, 680px); --history-pad: clamp(18px, 3vw, 32px); padding: var(--history-pad); }

.site-history-intro { font-size: .9375rem; line-height: 1.8; color: var(--mute); }
.site-history-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-block: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--rule); font-size: .8125rem; }
.site-history-facts dt { color: var(--mute); margin-bottom: 4px; }
.site-history-facts dd { margin: 0; font-weight: 500; }
.site-history-heading { margin-bottom: 24px; font: 400 1.55rem/1.3 var(--font-display); letter-spacing: -.025em; }
.site-timeline { list-style: none; margin: 0; padding: 0; }
.site-timeline__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding-block: 0 26px; }
.site-timeline__version { align-self: start; justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--mute); font-size: .8125rem; font-variant-numeric: tabular-nums; }
a.site-timeline__version:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; }
.site-timeline__content { position: relative; padding-left: 20px; border-left: 1px solid var(--rule); }
.site-timeline__content::before { content: ""; position: absolute; top: 7px; left: -3px; width: 5px; height: 5px; border-radius: 50%; background: var(--mute); }
.site-timeline__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 7px; color: var(--mute); font-size: .75rem; }
.site-timeline__current { padding: 2px 7px; border-radius: 5px; color: var(--accent-text); background: var(--accent-soft); }
.site-timeline__content h4 { margin: 0 0 6px; font-size: .9375rem; font-weight: 600; line-height: 1.5; }
.site-timeline__content p { margin: 0; font-size: .875rem; line-height: 1.7; color: var(--mute); }
.site-history-source { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-text); font-size: .875rem; }
.site-history-source:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 480px) {
  .site-history-facts { gap: 16px; }
  .site-timeline__item { gap: 10px; }
  .site-timeline__content { padding-left: 16px; }
  .hub-preview__type { inset: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .featured-card--hub:hover .hub-card__learn > span:last-child { transform: none; }
}

/* Psalm 23 reads like a quiet book page, with editions credited below. */
.about__psalm { display: inline; padding: 0; border: 0; border-radius: 0; background: none; color: var(--accent-text); font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.about__psalm:hover { text-decoration-thickness: 2px; }
.about__psalm:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 2px; }
.home-page .psalm-panel { width: min(100%, 660px); --history-pad: clamp(20px, 4vw, 40px); padding: var(--history-pad); }
.home-page .psalm-panel .erhu-modal__title { font-weight: 400; }
.psalm-version { margin-top: 8px; color: var(--mute); font: 400 .75rem/1.6 var(--font); }
.psalm-byline { margin: 24px 0; color: var(--mute); font: italic 400 1rem/1.7 var(--font-display); }
.psalm-verses { font: 400 clamp(1.05rem, 2vw, 1.2rem)/1.9 var(--font-display); color: var(--ink); }
.psalm-verse { position: relative; padding-left: 1.6rem; margin: 0 0 1.5em; }
.psalm-verse__number { position: absolute; left: 0; top: .45em; color: var(--faint); font: 400 .6875rem/1.7 var(--font); }
.psalm-verse__text { display: block; white-space: pre-line; }
.psalm-citation { font: 400 .75rem/1.6 var(--font); color: var(--mute); margin: 8px 0 24px; }
.psalm-read { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 18px; border: 1px solid var(--control-line); border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); font: 500 .875rem/1.5 var(--font); }
.psalm-read:hover { border-color: var(--accent-text); }
.psalm-credits { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--faint); font: 400 .6875rem/1.75 var(--font); }
.psalm-credits h3 { margin: 0 0 8px; font: 500 .75rem/1.6 var(--font); color: var(--mute); }
.psalm-credits p { margin: 0 0 8px; }
.psalm-credits__links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.psalm-credits a { text-decoration: underline; text-underline-offset: 3px; min-height: 32px; display: inline-flex; align-items: center; }
:is([data-language="zh"], [data-language="zh-Hant"]) .psalm-panel :is(.psalm-verses, .erhu-modal__title, .psalm-byline) { font-family: var(--font-zh-serif); }
[data-language="ja"] .psalm-panel :is(.psalm-verses, .erhu-modal__title, .psalm-byline) { font-family: var(--font-ja-serif); }
@media (max-width: 480px) {
  .psalm-verse { padding-left: 1.25rem; }
  .psalm-verses { font-size: 1.025rem; }
}

/* Small interest doodles keep the open rows, with one brief response to curiosity. */
.home-page .interest-card { position: relative; }
html .home-page .interest-card__icon {
  display: block;
  position: absolute;
  top: 21px;
  left: 0;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--mute);
  pointer-events: none;
}
.home-page .interest-card__icon svg { display: block; width: 100%; height: 100%; }
.home-page .interest-card__title { padding-left: 36px; }
.home-page .interest-card__icon :is(svg, circle, path, ellipse) { transform-box: fill-box; transform-origin: center; }
@keyframes interest-rally { 40% { transform: translate(-3px, 5px); } 75% { transform: translate(2px, -3px); } }
@keyframes interest-bow { 50% { transform: translate(2px, 1.4px); } }
@keyframes interest-world { 50% { transform: scaleX(.7); } }
@keyframes interest-shutter { 50% { transform: scale(.8); } }
@keyframes interest-right { 50% { transform: translateX(2px); } }
@keyframes interest-left { 50% { transform: translateX(-2px); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home-page [data-interest="bilingual"]:hover .interest-arrow--right,
  .home-page [data-interest="tech"]:hover .interest-code--right { animation: interest-right 480ms ease both; }
  .home-page [data-interest="bilingual"]:hover .interest-arrow--left,
  .home-page [data-interest="tech"]:hover .interest-code--left { animation: interest-left 480ms ease both; }
  .home-page [data-interest="tt"]:hover .interest-ball { animation: interest-rally 550ms ease both; }
  .home-page [data-interest="erhu"]:hover .interest-bow { animation: interest-bow 600ms ease both; }
  .home-page [data-interest="travel"]:hover .interest-meridian { animation: interest-world 600ms ease both; }
  .home-page [data-interest="photo"]:hover .interest-aperture { animation: interest-shutter 480ms ease both; }
  .home-page .site-nav a:hover::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .home-page [data-interest="tt"]:focus-within .interest-ball { animation: interest-rally 550ms ease both; }
  .home-page [data-interest="erhu"]:focus-within .interest-bow { animation: interest-bow 600ms ease both; }
}
.home-page .site-nav a:focus-visible::after { transform: scaleX(1); }
.home-page .featured-card:focus-within .featured-card__cta { text-decoration: underline; text-underline-offset: 4px; }
.home-page .featured-card--hub:focus-within .hub-card__learn { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) {
  .home-page .interest-card__icon { top: 17px; width: 22px; height: 22px; }
  .home-page .interest-card__title { padding-left: 30px; }
}

/* A quiet practice table: no automatic play, and controls remain usable by touch. */
.home-page .rally-panel { width: min(100%, 660px); padding: clamp(18px, 4vw, 28px); }
.rally-panel .erhu-modal__top { align-items: center; margin-bottom: 20px; }
.rally-panel .erhu-modal__title { font-weight: 400; }
.rally-scoreboard { display: flex; justify-content: space-between; margin-bottom: 12px; color: var(--mute); font-size: .8125rem; }
.rally-scoreboard strong { margin-left: 8px; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.rally-court { display: block; width: 100%; height: auto; aspect-ratio: 600/320; border: 1px solid var(--rule); border-radius: 12px; touch-action: none; }
.rally-status { min-height: 1.5em; margin: 16px 0; text-align: center; color: var(--mute); font-size: .875rem; line-height: 1.5; }
.rally-actions { display: flex; justify-content: center; align-items: center; gap: 12px; }
.rally-actions button { min-height: 44px; border: 1px solid var(--control-line); border-radius: 10px; color: var(--accent-text); background: var(--bg-card); font: 500 .875rem/1.4 var(--font); cursor: pointer; transition: background-color 180ms ease, transform 180ms ease; }
.rally-move { width: 48px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.rally-serve { min-width: 128px; padding: 10px 20px; background: var(--accent-soft) !important; }
.rally-actions button:hover { border-color: var(--accent-text); }
.rally-actions button:active { transform: scale(.97); }
.rally-instructions { margin: 16px auto 0; max-width: 36em; text-align: center; color: var(--mute); font-size: .75rem; line-height: 1.7; }
.rally-court:focus-visible, .rally-actions button:focus-visible, .footer__copy-email:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .rally-actions button:active { transform: none; } }

.home-page .footer__contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; }
.footer__copy-email { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; min-width: 115px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 10px; background: transparent; color: var(--accent-text); font: 500 .75rem/1.4 var(--font); cursor: pointer; }
.footer__copy-email[hidden] { display: none; }
.footer__copy-email:hover, .footer__copy-email.is-copied { background: var(--accent-soft); border-color: var(--accent-text); }
.copy-email__mark { display: inline-block; min-width: 1em; font-size: 1rem; }
@media (prefers-reduced-motion: no-preference) { .footer__copy-email.is-copied .copy-email__mark { animation: hub-confirm 300ms ease; } }

@media (max-width: 380px) {
  .home-page .interest-card { grid-template-columns: minmax(0, 1fr); }
  .home-page .interest-card__desc { padding-left: 30px; }
  .home-page .interest-card__learn { margin-left: 30px; }
}

[data-language="ko"] .home-page .hero__note { font-family: var(--font); line-height: 1.7; font-size: clamp(1.1rem, 2.1vw, 1.35rem); }
[data-language="ko"] .home-page :is(.section__title, .interest-card__title, .erhu-modal__title) { letter-spacing: -.025em; line-height: 1.45; }
[data-language="ko"] .home-page .featured-card__desc { line-height: 1.8; }
[data-language="ko"] .psalm-panel :is(.psalm-verses, .erhu-modal__title, .psalm-byline) { font-family: var(--font-display); }
.rally-scoreboard { gap: 12px; flex-wrap: wrap; }

#rally-open[hidden] { display: none; }

.home-page .interest-bow { transform-box: fill-box; transform-origin: center; }

html .home-page .interest-card.is-settled:hover .interest-card__icon { transform: none; }

.rally-level { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 18px; }
.rally-level[hidden] { display: none; }
.rally-level .controls-section__label { display: block !important; margin: 0; }
.rally-level-picker { width: 176px; flex-shrink: 0; }
#rally-level-trigger { display: flex !important; width: 100%; font-size: .8125rem; }
#rally-level-menu { min-width: 0; position: absolute; inset: 100% 0 auto; margin-top: 6px; display: block !important; box-shadow: 0 8px 24px rgb(0 0 0 / 12%); }
#rally-level-menu[hidden] { display: none !important; }
#rally-level-menu .lang-picker__option { min-height: 44px; font-size: .8125rem; }
.rally-table { position: relative; }
.rally-celebration { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 12px; z-index: 1; }
.rally-paper { position: absolute; left: var(--paper-x); top: -12px; width: var(--paper-width); height: var(--paper-height); background: var(--paper-color); border-radius: 1px; opacity: 0; animation: rally-paper-fall var(--paper-duration) cubic-bezier(.25,.35,.6,1) var(--paper-delay) forwards; }
@keyframes rally-paper-fall {
  0% { opacity: 0; }
  8%, 72% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--paper-drift), var(--paper-fall)) rotate(var(--paper-turn)); }
}

.rally-countdown { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2; }
.rally-countdown[hidden] { display: none; }
.rally-countdown span { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--rule); border-radius: 14px; background: color-mix(in srgb, var(--bg-card) 95%, transparent); color: var(--ink); font: 400 2rem/1 var(--font-display); font-variant-numeric: tabular-nums; box-shadow: 0 4px 16px rgb(0 0 0 / 6%); }

/* Erhu: a clear invitation to listen, with a quieter path to the instrument. */
.erhu-actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; }
.home-page .erhu-actions__watch { gap: 8px; background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent-text) 40%, transparent); }
.home-page .erhu-actions__watch::after { display: none; }
.erhu-actions__watch svg { flex: none; }
.erhu-actions__about { min-height: 44px; color: var(--mute); font-size: .8125rem; text-align: left; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule); }
.erhu-actions__about:hover { color: var(--accent-text); text-decoration-color: currentColor; }
.interest-card__action { grid-column: 2; margin: 4px 0 0; }
.interest-card__photos { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; color: var(--accent-text); font-size: .85rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule); }
.interest-card__photos:hover { text-decoration-color: currentColor; }
.interest-card__photos:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 3px; }
@media (min-width: 768px) {
  .erhu-actions, .interest-card__action { grid-column: 1 / -1; margin-top: 8px; }
}


.social-copy-status:not(.visually-hidden) { margin-top: 8px; color: var(--mute); font-size: .8125rem; }
@media (max-width: 767px) { .erhu-actions { grid-column: 1 / -1; } }

/* Header and content occupy separate regions, including at fractional zoom. */
html .home-page .dialog-panel {
  display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden;
  background: color-mix(in srgb, var(--bg-card) 96%, transparent);
}
.dialog-panel > :is(.erhu-modal__top, .archived-projects-modal__top, .qr-modal__top) {
  position: relative; flex: none; top: auto; z-index: 3; align-items: center;
  margin: 0; padding: 20px clamp(20px, 3vw, 32px); border: 0; border-bottom: 1px solid var(--rule);
  background: var(--bg-card);
}
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .dialog-panel > :is(.erhu-modal__top, .archived-projects-modal__top, .qr-modal__top) {
    background: color-mix(in srgb, var(--bg-card) 86%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
}
.dialog-scroll {
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: clamp(20px, 3vw, 32px);
  scroll-padding-block: 20px;
}
.dialog-scroll:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -3px; box-shadow: none; border-radius: 0; }
.qr-dialog-scroll { display: flex; flex-direction: column; gap: 16px; }
.qr-dialog-scroll > * { flex: none; }
.dialog-panel .erhu-modal__title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.25; font-weight: 500; }
.archived-projects-modal__grid.dialog-scroll { align-content: start; align-items: start; grid-auto-rows: max-content; margin: 0; }
.home-page .archived-projects-modal__grid .featured-card__visual { flex: none; }
.erhu-instrument-panel { width: min(100%, 960px); }
.erhu-instrument-layout { display: grid; grid-template-columns: minmax(190px, .65fr) minmax(0, 1.35fr); gap: clamp(24px, 4vw, 44px); align-items: start; }
.erhu-instrument-layout .erhu-wiki__intro { grid-row: auto; position: sticky; top: 0; min-width: 0; }
.erhu-instrument-layout .erhu-wiki__photo { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: #e1e1df; }
.erhu-instrument-layout .erhu-wiki__photo img { max-height: 420px; object-position: center; background: #e1e1df; }
.erhu-instrument-copy .erhu-wiki__section { margin: 0 0 28px; }
.erhu-instrument-copy .erhu-wiki__section:last-child { margin-bottom: 0; }
.home-page .erhu-wiki__heading { font-size: 1.15rem; font-weight: 500; line-height: 1.4; margin-bottom: 12px; }
.home-page .erhu-wiki__paragraph { font-family: var(--font); font-size: .9375rem; line-height: 1.8; margin-bottom: 14px; }
.erhu-performance-panel { width: min(100%, 900px); }
.erhu-performance__intro { color: var(--mute); font-size: .9375rem; line-height: 1.65; margin-bottom: 18px; max-width: 60em; }
.erhu-performance-panel .dialog-scroll { padding: 24px; }
.erhu-performance-panel .erhu-dialog-actions { margin-top: 20px; padding-top: 14px; }
.erhu-performance-panel .erhu-wiki__video { width: 100%; aspect-ratio: 16 / 9; max-height: none; object-fit: contain; border: 1px solid var(--rule); border-radius: 10px; }
@media (min-width: 681px) and (min-height: 600px) {
  .erhu-performance-panel { width: min(100%, 900px, calc(81.78svh + 50px)); }
}
.erhu-performance-panel .erhu-wiki__media-note { margin-top: 14px; font-size: .6875rem; line-height: 1.6; }
.erhu-recording-details { margin-top: 16px; color: var(--mute); font-size: .75rem; }
.erhu-recording-details summary { width: fit-content; min-height: 40px; align-content: center; cursor: pointer; text-underline-offset: 4px; }
.erhu-recording-details summary:hover { color: var(--ink); }
.erhu-recording-details summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 3px; }
.erhu-performance-panel .erhu-recording-details .erhu-wiki__media-note { margin-top: 4px; max-width: 70em; font-size: .75rem; }
.erhu-dialog-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); }
.erhu-dialog-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--accent-text); font-size: .875rem; line-height: 1.5; }
.erhu-dialog-action[data-erhu-close] { border: 1px solid var(--control-line); border-radius: 10px; padding: 10px 20px; }
.erhu-dialog-action:hover { background: var(--accent-soft); }
@media (max-width: 680px) {
  .dialog-panel > :is(.erhu-modal__top, .archived-projects-modal__top, .qr-modal__top) { padding: 16px 20px; }
  .dialog-scroll { padding: 20px; }
  .erhu-instrument-layout { grid-template-columns: 1fr; gap: 24px; }
  .erhu-instrument-layout .erhu-wiki__intro { position: static; width: min(100%, 280px); justify-self: center; }
  .erhu-instrument-layout .erhu-wiki__photo img { max-height: 320px; }
  .erhu-dialog-actions { margin-top: 22px; }
}
.home-page :is(.erhu-modal, .archived-projects-modal).is-closing { animation: hub-dialog-fade 160ms ease-in both; pointer-events: none; }
.home-page :is(.erhu-modal, .archived-projects-modal).is-closing > :is(.erhu-modal__panel, .archived-projects-modal__panel) { animation: hub-dialog-exit 160ms ease-in both; }
@keyframes hub-dialog-fade { to { opacity: 0; } }
@keyframes hub-dialog-exit { to { transform: translateY(6px) scale(.99); } }

/* The routing picker shares the language menu, above the project card layer. */
.home-page .section__header--projects { position: relative; z-index: 1; }
.home-page .featured-stack { position: relative; z-index: 0; }
.home-page .project-host--section { position: relative; flex: none; }
.home-page .project-host--section > .lang-picker__trigger { width: auto; font-size: .8125rem; }
html .home-page .project-host--section > .host-switcher {
  display: flex; flex-direction: column; gap: 2px; width: 232px;
}
html .home-page .project-host--section .host-option {
  flex-direction: row; align-items: center; gap: 8px; min-height: 48px;
  padding: 8px 10px; border: 0; border-radius: 6px; box-shadow: none;
}
.project-host__text { display: flex; flex-direction: column; gap: 1px; }
.home-page .project-host--section .host-option__kicker { color: inherit; opacity: .75; }
.home-page .project-host--section .host-option:focus-visible { outline-offset: -3px; }

.rally-summary { margin: -4px 0 16px; color: var(--ink); text-align: center; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.rally-summary[hidden] { display: none; }
/* A short viewport gets the court beside its controls, all visible together. */
@media (max-height: 560px) and (min-width: 600px) {
  .home-page .rally-panel { display: grid; grid-template-columns: minmax(0, 1fr) 210px; grid-template-rows: repeat(6, auto); align-items: center; gap: 8px 20px; width: min(100%, 960px); max-height: calc(100svh - 24px); padding: 16px; }
  .rally-table { grid-column: 1; grid-row: 1 / 7; width: min(100%, calc((100svh - 64px) * 1.875)); justify-self: center; }
  .rally-panel > :not(.rally-table) { grid-column: 2; margin: 0; }
  .rally-panel .erhu-modal__top { grid-row: 1; margin: 0; }
  .rally-panel .erhu-modal__title { font-size: 1.5rem; }
  .rally-panel .rally-level { grid-row: 2; }
  .rally-level .controls-section__label { display: none !important; }
  .rally-level-picker { width: 100%; }
  .rally-panel .rally-scoreboard { grid-row: 3; gap: 4px 10px; font-size: .7rem; }
  .rally-scoreboard strong { margin-left: 3px; }
  .rally-panel .rally-status { grid-row: 4; font-size: .75rem; }
  .rally-panel .rally-summary { grid-row: 5; font-size: .7rem; }
  .rally-panel .rally-actions { grid-row: 6; gap: 8px; }
  .rally-serve { min-width: 104px; padding-inline: 10px; }
  .rally-move { width: 44px; }
  .rally-panel .rally-instructions { display: none; }
}

.qr-modal.is-closing, .qr-modal.is-closing .qr-modal__panel { transition-duration: 160ms; }

@media (max-height: 560px) and (min-width: 600px) {
  .erhu-performance__intro { display: none; }
  .erhu-performance-panel .erhu-wiki__video { width: min(100%, calc((86svh - 160px) * 1.7778)); margin-inline: auto; }
}

/* A single photographic window into the travel gallery. */
.home-page .gallery-preview { isolation: isolate; z-index: 3; background: #1a1a1e; }
.gallery-preview__layer { position: absolute; inset: 0; background: #1a1a1e center / cover no-repeat; opacity: 0; transform: scale(1.06); transition: opacity 1.05s cubic-bezier(.22, 1, .36, 1), transform 6.5s cubic-bezier(.22, 1, .36, 1); }
.gallery-preview__layer.is-active { opacity: 1; transform: scale(1); z-index: 1; }
.gallery-preview__layer.is-exit { opacity: 0; transform: scale(1.03); }
.gallery-preview__location { position: absolute; bottom: 14px; left: 14px; z-index: 2; max-width: calc(100% - 28px); padding: 8px 12px; border-radius: 5px; font: 400 .8125rem/1.4 "Public Sans", var(--font); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgb(0 0 0 / 65%); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1; transform: translateY(0) scale(1); transform-origin: left bottom; filter: blur(0); transition: opacity .32s cubic-bezier(.16,1,.3,1), transform .34s cubic-bezier(.16,1,.3,1), filter .3s cubic-bezier(.16,1,.3,1); }
/* The interval lives inside the existing label, without adding a new surface. */
.gallery-preview__location::before, .gallery-preview__location::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; pointer-events: none; opacity: 0; }
.gallery-preview__location::before { background: rgb(255 255 255 / 14%); }
.gallery-preview__location::after { background: rgb(255 255 255 / 72%); transform: scaleX(0); transform-origin: left; }
.is-gallery-timing .gallery-preview__location::before, .is-gallery-timing .gallery-preview__location::after { opacity: 1; }
.is-gallery-timing .gallery-preview__location::after { animation: gallery-interval var(--gallery-interval) linear forwards paused; }
.is-gallery-running .gallery-preview__location::after { animation-play-state: running; }
@keyframes gallery-interval { to { transform: scaleX(1); } }
.gallery-preview__location.is-swapping { opacity: 0; transform: translateY(7px) scale(.95); filter: blur(4px); transition-duration: .15s; transition-timing-function: cubic-bezier(.4,0,1,1); }
.gallery-preview .gallery-preview__toggle { pointer-events: auto; position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(255 255 255 / 25%); border-radius: 50%; background: rgb(0 0 0 / 55%); color: #fff; cursor: pointer; }
.gallery-preview .gallery-preview__toggle[hidden] { display: none; }
.gallery-preview__toggle:hover { background: rgb(0 0 0 / 80%); }
.gallery-preview__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.gallery-preview__play, .is-paused .gallery-preview__pause { display: none; }
.is-paused .gallery-preview__play { display: block; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home-page .gallery-preview { transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; }
  .home-page #project-usa-gallery:has(.featured-card__hit:active) .gallery-preview { transform: translateY(-1px) scale(.995); }
}
@media (max-width: 767px) { .home-page .interest-card__action { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .gallery-preview__layer, .gallery-preview__location { transition: none; transform: none; filter: none; } }
@media (min-width: 321px) and (max-width: 359px) {
  .home-page .top-bar__inner { gap: 8px; }
  .home-page .site-nav { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) { .gallery-preview__location::before, .gallery-preview__location::after { display: none; animation: none; } }

/* One project grid, followed by the quieter current-site row. */
.home-page #project-signal-lab .featured-card__visual { aspect-ratio: 16 / 10; background: #151a17; }
.home-page #project-signal-lab .featured-card__visual img { object-fit: contain; }
.home-page #project-signal-lab .featured-card__title { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 650; letter-spacing: -.035em; }
.home-page .featured-card__content--with-story { z-index: 3; }
.featured-card__story { position: relative; z-index: 3; pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; width: fit-content; min-height: 40px; color: var(--accent-text); font-size: .8125rem; }
.featured-card__story:hover { text-decoration: underline; text-underline-offset: 4px; }
.featured-card__story:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 3px; }
.featured-card__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; }
.home-page .featured-card__actions .featured-card__cta { margin-top: 0; }
.home-page .featured-stack > .hub-row { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; border-top: 1px solid var(--rule); }
.home-page .hub-row .featured-card__title { font-size: 1.3rem; }
.home-page .hub-row .featured-card__desc { font-size: .8125rem; max-width: 48em; }
.home-page .hub-row .hub-card__learn { flex: 0 0 auto; font-size: .8125rem; }

@media (max-width: 767px) {
  .home-page .featured-stack > .hub-row { align-items: start; flex-direction: column; gap: 8px; }
}

/* Four interests: the activities first, then the language connection. */
.home-page .interest-card { padding-block: 24px; }
.rally-instructions__touch { display: none; }
@media (hover: none) and (pointer: coarse) { .rally-instructions__pointer { display: none; }.rally-instructions__touch { display: inline; } }
@media (max-width: 767px) { .home-page .interest-card { padding-block: 20px; } }

.notes-spotlight__date { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.notes-spotlight__date .note-availability { margin: 0; }

@media (min-width: 768px) { .home-page [data-interest="tt"] > .interest-card__learn { grid-column: 1 / -1; margin-top: 8px; } }

/* Opt-in photo framing; text-based covers retain their full composition. */
.notes-spotlight__image--crop, html[data-lightweight] .notes-spotlight__image--crop { padding: 0; height: var(--note-cover-height); }
.notes-spotlight__image--crop .notes-spotlight__media { width: 100%; height: 100%; border-radius: 0; }
.notes-spotlight__image--crop img { object-fit: cover; }

.feature-load-status { color: var(--mute); font-size: .8125rem; margin-top: 6px; }
.feature-load-status:empty { margin: 0; }
#rally-open[aria-busy], #site-history-open[aria-busy] { cursor: progress; }