/* ==========================================================================
   藝光 Artlight — Design System v2 (refinement layer)
   載入次序：styles.css → design-system.css
   目的：在保留繽紛創作感嘅前提下，重建字體階梯、間距尺、色彩紀律同版面節奏。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Ink & paper --- */
  --ink: #17161a;
  --ink-80: #3d3a42;
  --ink-60: #5f5b66;
  --ink-40: #8b8693;
  --paper: #fdf7ec;
  --paper-2: #f7eede;
  --white: #fffefb;

  /* --- Accents (vivid, used as accents — not as full-bleed washes) --- */
  --red: #ec3d2b;
  --coral: #ff6b4a;
  --blue: #1f6feb;
  --sky: #45c4f0;
  --gold: #f5b719;
  --acid: #cdeb45;
  --green: #17855f;
  --violet: #6b4fc4;
  --pink: #e24d8e;

  /* --- Semantic --- */
  --line: rgba(23, 22, 26, 0.12);
  --line-strong: rgba(23, 22, 26, 0.22);
  --surface: #fffefb;
  --surface-sunk: #f7eede;

  /* --- Type scale (fluid, CJK-tuned) --- */
  --font-display: "Noto Serif HK", "Noto Serif CJK HK", "Source Han Serif HC", "Songti TC", serif;
  --font-body: "IBM Plex Sans HK", "Noto Sans HK", "PingFang HK", "Noto Sans CJK HK", "Microsoft JhengHei", sans-serif;
  --font-latin: Outfit, "IBM Plex Sans HK", "Noto Sans CJK HK", sans-serif;

  --t-display: clamp(2.375rem, 1.45rem + 3.1vw, 4.25rem); /* 38 → 68 */
  --t-h1: clamp(2.125rem, 1.4rem + 2.4vw, 3.5rem); /* 34 → 56 */
  --t-h2: clamp(1.75rem, 1.28rem + 1.6vw, 2.625rem); /* 28 → 42 */
  --t-h3: clamp(1.25rem, 1.08rem + 0.55vw, 1.5rem); /* 20 → 24 */
  --t-lead: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem); /* 17 → 19 */
  --t-body: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem); /* 16 → 17 */
  --t-small: 0.9375rem; /* 15 */
  --t-micro: 0.75rem; /* 12 */

  /* --- Spacing scale (8pt) --- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --section-y: clamp(4rem, 7vw, 7.5rem);
  --measure: 34em;

  /* --- Radius & elevation --- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(23, 22, 26, 0.06), 0 4px 12px rgba(23, 22, 26, 0.06);
  --shadow-2: 0 2px 4px rgba(23, 22, 26, 0.06), 0 12px 28px rgba(23, 22, 26, 0.09);
  --shadow-3: 0 4px 8px rgba(23, 22, 26, 0.07), 0 28px 56px rgba(23, 22, 26, 0.13);
  --shadow-soft: var(--shadow-2);
}

/* --------------------------------------------------------------------------
   2. Base typography — 真實字重、CJK 行距、斷行紀律
   -------------------------------------------------------------------------- */
body {
  background:
    radial-gradient(70rem 40rem at 8% -6%, rgba(205, 235, 69, 0.28), transparent 62%),
    radial-gradient(60rem 36rem at 96% 2%, rgba(69, 196, 240, 0.22), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, #fdf9f1 46%, var(--paper-2) 100%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.005em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::after {
  opacity: 0.055;
  background-size: 72px 72px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.005em;
  text-wrap: balance;
  line-break: strict;
  overflow-wrap: normal;
}

h1 {
  font-size: var(--t-h1);
  font-weight: 900;
}

h2 {
  font-size: var(--t-h2);
}

h3 {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.4;
}

p {
  margin-block: 0 var(--s-4);
  max-width: var(--measure);
  font-weight: 400;
  line-height: 1.85;
  color: var(--ink-80);
  line-break: strict;
}

p:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: 600;
}

small {
  font-size: var(--t-small);
  line-height: 1.6;
}

/* 拉丁數字／英文標籤統一用 Outfit，避免 CJK 字體渲染數字時字寬不一 */
.eyebrow,
.winner-summary strong,
.winner-group-label span,
.flow-list span,
.trust-grid article > span,
.quick-facts dd,
.site-footer nav a {
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   3. 通用元件：eyebrow / button / header / footer
   -------------------------------------------------------------------------- */
.eyebrow {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ink-60);
  font-family: var(--font-latin);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  margin-right: 0.75rem;
  background: var(--red);
}

.kicker span,
.date-strip span,
.competition-tags span {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.button {
  min-height: 50px;
  padding: 0.8125rem 1.5rem;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button-primary {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 2px 0 rgba(23, 22, 26, 0.9), 0 14px 28px rgba(236, 61, 43, 0.28);
}

.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 rgba(23, 22, 26, 0.9), 0 18px 34px rgba(236, 61, 43, 0.3);
}

.button-quiet {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

.button-quiet:hover {
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.site-header {
  top: 46px;
  width: min(1200px, calc(100% - 2rem));
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 254, 251, 0.86);
  box-shadow: var(--shadow-1);
}

.site-header.is-scrolled {
  background: rgba(255, 254, 251, 0.96);
  box-shadow: var(--shadow-2);
}

.brand .brand-full-logo {
  width: 104px;
  max-height: 46px;
  filter: none;
}

.site-nav {
  gap: 0.125rem;
  padding: 0.1875rem;
  background: rgba(23, 22, 26, 0.045);
}

.site-nav a,
.nav-cta {
  min-height: 36px;
  padding: 0.5rem 0.875rem;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.site-nav a.is-active {
  background: var(--white);
  box-shadow: var(--shadow-1);
  font-weight: 700;
}

.nav-cta {
  background: var(--ink);
  color: var(--white);
  box-shadow: none;
  font-weight: 600;
}

.nav-cta:hover {
  transform: none;
  background: var(--red);
}

/* Marquee — 收細、降噪，由裝飾變成節奏線 */
.top-marquee {
  font-size: var(--t-micro);
}

.top-marquee span {
  padding: 0.375rem 1.125rem;
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.photo-marquee figure {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

.photo-marquee figcaption {
  font-family: var(--font-latin);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.play-ribbon span,
.marquee span {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.site-footer strong {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
}

.site-footer span {
  color: var(--ink-60);
  font-size: var(--t-small);
  font-weight: 400;
}

.site-footer nav a,
.footer-contact a {
  font-size: var(--t-small);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   4. 首頁版面
   -------------------------------------------------------------------------- */
.home-hero {
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(9rem, 12vw, 12rem) var(--gutter) var(--section-y);
}

.home-hero h1,
.page-hero h1 {
  max-width: 15em;
  margin-block: var(--s-5) var(--s-5);
  font-size: var(--t-display);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.home-hero-copy > p {
  max-width: 26em;
  font-size: var(--t-lead);
  line-height: 1.85;
}

.hero-actions {
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.quick-facts {
  gap: 0;
  margin-top: var(--s-7);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.quick-facts div {
  padding: var(--s-4) var(--s-5) var(--s-4) 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.quick-facts div:last-child {
  border-right: 0;
}

.quick-facts dt {
  margin-bottom: var(--s-1);
  color: var(--ink-60);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.quick-facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  font-weight: 700;
  line-height: 1.3;
}

.date-strip {
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.date-strip span {
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  box-shadow: none;
  color: var(--ink-60);
  font-size: var(--t-micro);
  font-weight: 500;
}

.poster-feature {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
}

.poster-feature img {
  border-radius: var(--r-lg);
}

/* Section headings — 統一節奏 */
.section-heading,
.lineup-heading,
.play-lab-copy,
.award-preview-copy,
.exhibition-heading {
  display: grid;
  gap: var(--s-4);
  max-width: 30em;
}

.section-heading h2,
.lineup-heading h2,
.play-lab-copy h2,
.award-preview-copy h2,
.flow-section h2 {
  margin: 0;
  max-width: 15em;
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.26;
}

.section-heading p,
.lineup-heading p,
.play-lab-copy p,
.award-preview-copy p {
  margin: 0;
  max-width: 28em;
  font-size: var(--t-lead);
}

.trust-section,
.play-lab-section,
.competition-lineup,
.award-preview-section,
.flow-section,
.home-cta {
  padding-block: var(--section-y);
  padding-inline: var(--gutter);
}

/* 04 卡片格 */
.trust-grid {
  gap: 1px;
  margin-top: var(--s-7);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--line-strong);
}

.trust-grid article {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.trust-grid article > span {
  font-family: var(--font-latin);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--red);
}

.trust-grid article:nth-child(2) > span { color: var(--blue); }
.trust-grid article:nth-child(3) > span { color: var(--green); }
.trust-grid article:nth-child(4) > span { color: var(--violet); }

.trust-grid h3 {
  margin: 0;
  font-size: var(--t-h3);
}

.trust-grid p {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.75;
}

/* 首屆結果 — 原本單卡放喺三欄 grid，右邊空一大片 */
.competition-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--s-7);
}

.competition-card.is-featured {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.competition-card.is-featured > div {
  display: grid;
  gap: var(--s-3);
  align-content: center;
}

.competition-card.is-featured > div > span {
  font-family: var(--font-latin);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.competition-card.is-featured h3 {
  margin: 0;
  font-size: var(--t-h2);
}

.competition-card.is-featured p {
  margin: 0;
  max-width: 26em;
  font-size: var(--t-body);
}

.competition-card.is-featured > div > a {
  justify-self: start;
  margin-top: var(--s-2);
  padding: 0.75rem 1.375rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  transition: background 160ms ease;
}

.competition-card.is-featured > div > a:hover {
  background: var(--red);
}

.competition-card .mini-poster.image-poster {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}

.competition-card .mini-poster.image-poster img {
  width: 100%;
  height: auto;
}

/* 四步流程 */
.flow-list {
  gap: 1px;
  margin-top: var(--s-7);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--line-strong);
}

.flow-list li {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.flow-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-latin);
  font-size: var(--t-small);
  font-weight: 700;
}

.flow-list strong {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
}

.flow-list p {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.75;
}

/* 證書預覽 */
.award-preview-card {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.award-preview-card figcaption {
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  color: var(--ink-60);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.home-cta {
  display: grid;
  gap: var(--s-6);
  align-items: end;
  padding-block: var(--section-y);
}

.home-cta h2 {
  margin: var(--s-3) 0 var(--s-3);
  max-width: 14em;
  font-size: var(--t-h1);
}

/* --------------------------------------------------------------------------
   5. 作品展（gallery.html）
   -------------------------------------------------------------------------- */
.winner-hero {
  min-height: 0;
  padding: clamp(9rem, 12vw, 12rem) var(--gutter) clamp(4rem, 7vw, 6.5rem);
  background:
    radial-gradient(60rem 36rem at 4% 0%, rgba(236, 61, 43, 0.22), transparent 58%),
    radial-gradient(56rem 34rem at 98% 6%, rgba(31, 111, 235, 0.24), transparent 56%),
    #16151a;
}

.winner-hero::after {
  inset: 1.25rem;
  border-color: rgba(255, 255, 255, 0.14);
}

.winner-hero .eyebrow {
  color: var(--gold);
}

.winner-hero .eyebrow::before {
  background: var(--gold);
}

.winner-hero h1 {
  max-width: 10em;
  margin: var(--s-5) 0 var(--s-5);
  font-size: var(--t-display);
  font-weight: 900;
  line-height: 1.2;
}

.winner-hero p {
  max-width: 25em;
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.85;
}

.winner-hero-actions {
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.winner-hero-cover {
  width: min(100%, 420px);
  transform: rotate(1.5deg);
}

.winner-hero-cover::before {
  inset: 0.875rem -0.875rem -0.875rem 0.875rem;
  border-width: 1px;
  border-color: rgba(245, 183, 25, 0.7);
}

.winner-hero-cover img {
  border-width: 6px;
  border-radius: 2px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* 摘要數據條 */
.winner-summary {
  align-items: center;
  border-top: 0;
  border-bottom: 1px solid var(--line-strong);
  background: var(--gold);
}

.winner-summary div,
.winner-summary p {
  padding: clamp(1.25rem, 2.4vw, 2rem) clamp(1rem, 2.4vw, 2rem);
  border-right: 1px solid rgba(23, 22, 26, 0.18);
}

.winner-summary div {
  align-items: baseline;
  gap: var(--s-2);
}

.winner-summary strong {
  font-family: var(--font-latin);
  font-size: clamp(2.5rem, 1.8rem + 2.2vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
}

.winner-summary span {
  color: rgba(23, 22, 26, 0.82);
  font-size: var(--t-small);
  font-weight: 600;
}

.winner-summary p {
  max-width: none;
  color: rgba(23, 22, 26, 0.82);
  font-size: var(--t-small);
  font-weight: 400;
  line-height: 1.7;
}

.winner-exhibition {
  padding: var(--section-y) var(--gutter);
}

.exhibition-heading {
  max-width: 32em;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.exhibition-heading h2,
.winner-closing h2 {
  margin: var(--s-4) 0 var(--s-3);
  max-width: 14em;
  font-size: var(--t-h1);
  font-weight: 900;
  line-height: 1.24;
}

.exhibition-heading p,
.winner-closing p {
  max-width: 30em;
  font-size: var(--t-lead);
}

/* 組別 */
.winner-group {
  grid-template-columns: minmax(150px, 0.2fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  margin-bottom: clamp(4rem, 7vw, 6.5rem);
}

.winner-group-label {
  top: 120px;
  gap: var(--s-1);
  padding-top: var(--s-3);
  border-top-width: 4px;
}

.winner-group-label span {
  font-family: var(--font-latin);
  font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
}

.winner-group-label strong {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
}

.winner-group-label small {
  color: var(--ink-60);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.winner-grid {
  gap: clamp(1.25rem, 2.4vw, 2rem);
}

/* 作品卡 — 統一比例、統一襯底，唔再由相片原始比例決定高度 */
.winner-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.winner-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

.winner-card figure {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: clamp(0.75rem, 1.6vw, 1.25rem);
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, #f3ece0 0%, #ece3d4 100%);
  overflow: hidden;
}

.winner-card figure::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(23, 22, 26, 0.05);
  pointer-events: none;
}

.winner-card figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 6px 14px rgba(23, 22, 26, 0.18));
}

.winner-card-copy {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
}

.winner-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.winner-card-meta span {
  padding: 0.3125rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--ink);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.winner-card-meta small {
  color: var(--ink-40);
  font-size: var(--t-micro);
  font-weight: 500;
}

.winner-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
  font-weight: 700;
  line-height: 1.35;
}

.winner-card-name {
  margin: 0;
  font-family: var(--font-latin);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-60);
}

.winner-card-name.privacy-name {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.winner-card-copy > p:not(.winner-card-name) {
  margin: 0;
  max-width: none;
  font-size: var(--t-small);
  line-height: 1.8;
  color: var(--ink-80);
}

.winner-card blockquote {
  margin: var(--s-1) 0 0;
  padding: var(--s-4);
  border: 0;
  border-left: 3px solid var(--accent-color, var(--red));
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-sunk);
  color: var(--ink-60);
  font-size: 0.875rem;
  line-height: 1.75;
}

.winner-card.accent-red { --accent-color: var(--red); }
.winner-card.accent-blue { --accent-color: var(--blue); }
.winner-card.accent-violet { --accent-color: var(--violet); }
.winner-card.accent-green { --accent-color: var(--green); }
.winner-card.accent-pink { --accent-color: var(--pink); }
.winner-card.accent-sky { --accent-color: var(--sky); }

/* 7–9 組只有一位得主：原本淨係一張窄卡加一大片空白 → 改成橫向 feature */
.winner-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.winner-grid-single .winner-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  max-width: none;
}

.winner-grid-single .winner-card figure {
  aspect-ratio: auto;
  height: 100%;
  min-height: 320px;
}

.winner-grid-single .winner-card figure img {
  object-fit: contain;
}

.winner-grid-single .winner-card-copy {
  align-content: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.winner-card-wide figure {
  aspect-ratio: 16 / 9;
}

.empty-group-note {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--ink-60);
}

.empty-group-note strong {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--ink);
}

.empty-group-note span {
  font-size: var(--t-small);
}

.winner-closing {
  padding: var(--section-y) var(--gutter);
}

/* --------------------------------------------------------------------------
   6. 其他頁（competition / certificate / schools / legal）
   -------------------------------------------------------------------------- */
.page-hero {
  padding-inline: var(--gutter);
}

.detail-card,
.theme-grid article,
.faq-grid article,
.criteria-grid article,
.age-band-grid div,
.timeline-grid div,
.partner-grid article,
.rules-grid article {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

.legal-content h2 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
}

.legal-content p,
.legal-content li {
  font-size: var(--t-small);
  line-height: 1.85;
}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .competition-card.is-featured {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .winner-grid-single .winner-card figure {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
}

@media (max-width: 980px) {
  .winner-group {
    grid-template-columns: minmax(0, 1fr);
  }

  .winner-group-label {
    position: static;
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
  }

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

  .winner-summary p {
    grid-column: 1 / -1;
    border-right: 0;
    border-top: 1px solid rgba(23, 22, 26, 0.18);
  }

  .home-hero {
    padding-top: clamp(7.5rem, 16vw, 9rem);
  }
}

@media (max-width: 720px) {
  :root {
    --section-y: clamp(3rem, 9vw, 4.5rem);
  }

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

  .quick-facts div {
    padding: var(--s-4) var(--s-3) var(--s-4) 0;
  }

  .trust-grid,
  .flow-list {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .winner-summary div {
    display: grid;
    gap: 0;
  }

  .winner-card-copy {
    padding: var(--s-4);
  }
}

@media (max-width: 560px) {
  .home-hero h1,
  .winner-hero h1 {
    max-width: none;
  }

  .quick-facts dd {
    font-size: 1.125rem;
  }
}

/* --------------------------------------------------------------------------
   8. 覆寫舊有 display font（"Kaiti TC" / "Yeseva One" 只靠本機字體，
      喺大部分裝置會 fallback 成假粗體，所以統一換成 Noto Serif HK）
   -------------------------------------------------------------------------- */
.winner-hero h1,
.exhibition-heading h2,
.winner-closing h2,
.winner-card h3,
.certificate-soft h3,
.home-hero h1,
.page-hero h1,
.hero h1,
.play-lab-copy h2,
.section-heading h2,
.lineup-heading h2,
.manifesto-copy h2,
.rules-heading h2,
.archive-heading h2,
.final-cta h2,
.competition-copy h3,
.award-preview-copy h2,
.flow-section h2,
.home-cta h2,
.legal-hero h1 {
  font-family: var(--font-display);
}

/* --------------------------------------------------------------------------
   9. 覆寫舊版殘留（舊 CSS 仲有深色卡、固定高度、假粗體字重）
   -------------------------------------------------------------------------- */

/* 首屆結果 feature card：舊版係黑底白字，新版轉白底 → 要同時改返文字色 */
.competition-card.is-featured {
  min-height: 0;
  color: var(--ink);
}

.competition-card.is-featured > div > span {
  color: var(--ink-60);
}

.competition-card.is-featured p {
  color: var(--ink-80);
  font-weight: 400;
}

.competition-card.is-featured h3 {
  color: var(--ink);
  line-height: 1.26;
}

.competition-card .mini-poster.image-poster {
  display: block;
  min-height: 0;
  box-shadow: var(--shadow-2);
}

.competition-card .mini-poster.image-poster img {
  height: auto;
  object-fit: contain;
}

/* kicker pills：同 eyebrow 統一成低調標籤 */
.kicker {
  gap: var(--s-2);
}

.kicker span {
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  box-shadow: none;
  color: var(--ink-80);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.kicker span:first-child {
  border-color: transparent;
  background: var(--ink);
  color: var(--white);
}

.kicker span:nth-child(2),
.kicker span:nth-child(3) {
  background: transparent;
  color: var(--ink-80);
}

/* 舊 CSS 用咗 620/650/680/720/850 等非標準字重，會觸發假粗體 */
.winner-hero p,
.exhibition-heading p,
.winner-closing p,
.winner-summary span,
.winner-summary p,
.home-hero-copy > p,
.section-heading p,
.lineup-heading p,
.play-lab-copy p,
.award-preview-copy p,
.trust-grid p,
.flow-list p,
.legal-content p,
.legal-content li,
.competition-strip p,
.faq-grid p,
.theme-grid p,
.criteria-grid p,
.rules-grid p,
.partner-grid p,
.timeline-note {
  font-weight: 400;
}

.winner-summary span,
.winner-group-label strong,
.flow-list strong,
.detail-card strong,
.age-band-grid strong,
.timeline-grid strong {
  font-weight: 600;
}

/* Hero 節奏：舊版用 min-height 100vh，內容置中之後上下留白過大 */
.winner-hero {
  align-content: center;
}

.home-hero::before {
  opacity: 0.55;
}

/* feature card 比例：海報唔應該撐高成張卡 */
.competition-card.is-featured {
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
  align-items: center;
}

.competition-card .mini-poster.image-poster {
  max-width: 360px;
}

/* --------------------------------------------------------------------------
   10. 深色節奏段（How It Works）
   -------------------------------------------------------------------------- */
.flow-section {
  align-items: center;
  background: #1a1815;
}

.flow-section h2 {
  color: var(--white);
}

.flow-section .eyebrow {
  background: none;
  color: rgba(255, 255, 255, 0.62);
}

.flow-section .eyebrow::before {
  background: var(--acid);
}

.flow-list {
  border: 0;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.16);
}

.flow-list li {
  background: #1a1815;
}

.flow-list span {
  background: var(--acid);
  color: var(--ink);
}

.flow-list strong {
  color: var(--white);
}

.flow-list p {
  color: rgba(255, 255, 255, 0.66);
}

/* --------------------------------------------------------------------------
   11. 證書預覽：由疊加絕對定位改成穩陣嘅兩欄構圖（舊版會衝出畫面右邊）
   -------------------------------------------------------------------------- */
.award-preview-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  min-height: 0;
}

.award-preview-card {
  position: relative;
  width: auto;
  aspect-ratio: 3 / 4;
  border: 8px solid var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}

.certificate-photo-card {
  left: auto;
  top: auto;
  transform: rotate(-1.5deg);
}

.trophy-photo-card {
  right: auto;
  bottom: auto;
  margin-top: clamp(1.5rem, 3vw, 2.75rem);
  transform: rotate(1.5deg);
}

.award-preview-card figcaption {
  position: absolute;
  left: 0.625rem;
  bottom: 0.625rem;
  border-radius: var(--r-pill);
  background: rgba(255, 254, 251, 0.92);
  color: var(--ink-60);
  text-transform: none;
}

.award-preview-copy .button {
  justify-self: start;
  margin-top: var(--s-2);
}

/* --------------------------------------------------------------------------
   12. 頁尾 CTA
   -------------------------------------------------------------------------- */
.home-cta {
  gap: clamp(1.5rem, 4vw, 3rem);
}

.home-cta .button {
  justify-self: start;
}

/* --------------------------------------------------------------------------
   13. 手機導覽：舊版喺 980px 以下直接 display:none，變咗冇導覽。
       改成可橫向捲動嘅第二行，唔需要加 JS。
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand cta"
      "nav nav";
    row-gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 22px;
  }

  .brand {
    grid-area: brand;
    padding-left: 0.25rem;
  }

  .nav-cta {
    grid-area: cta;
  }

  .site-nav {
    grid-area: nav;
    display: flex;
    justify-self: stretch;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-nav a {
    flex: 0 0 auto;
  }

  section[id] {
    scroll-margin-top: 150px;
  }
}

@media (max-width: 720px) {
  /* 重要日期標籤：舊版喺手機變咗逐個一行 */
  .date-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .date-strip span {
    width: auto;
    text-align: left;
  }

  /* 數據列：三欄喺 390px 會迫到斷行，改成上下排 */
  .quick-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .quick-facts div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding: 0.8125rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .quick-facts div:last-child {
    border-bottom: 0;
  }

  .quick-facts dt {
    margin-bottom: 0;
  }

  .quick-facts dd {
    font-size: 1.125rem;
  }

  /* 次要 CTA 唔需要同主 CTA 一樣搶眼 */
  .hero-actions,
  .winner-hero-actions {
    display: grid;
    gap: var(--s-3);
  }
}

/* --------------------------------------------------------------------------
   14. 活動頁（competition.html）
   -------------------------------------------------------------------------- */
.age-band-grid strong {
  white-space: nowrap;
}

.credibility-block {
  align-items: start;
}

.credibility-block h2,
.credibility-block .eyebrow {
  color: var(--white);
}

.credibility-block .eyebrow {
  background: none;
}

.credibility-block .eyebrow::before {
  background: var(--acid);
}

.credibility-block > div > p {
  color: rgba(255, 255, 255, 0.7);
}

.check-list li {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 400;
}

/* 「不接受」卡：舊版係淺底淺字，喺深色段落睇唔到 */
.reject-card {
  border: 1px solid rgba(236, 61, 43, 0.5);
  background: rgba(236, 61, 43, 0.1);
  box-shadow: none;
}

.reject-card strong {
  background: var(--red);
  color: var(--white);
  font-weight: 600;
}

.reject-card p {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 400;
}

/* 作品卡內文字重（舊版用 680，會觸發假粗體） */
.winner-card-copy > p:not(.winner-card-name),
.winner-card blockquote,
.empty-group-note span {
  font-weight: 400;
}