/* ============================================================
   media-coverage-hybrid.css — page-scoped stylesheet for the
   hybrid Media Coverage page (hero A + intro B + index A).
   Production-quality: uses the existing design tokens, no
   Tailwind rebuild needed.
   ============================================================ */

:root {
  --teal: #00C2B2; --teal-deep: #009b8e; --blue: #1A73E8;
  --dark: #1C2321; --dark-2: #2a3a38; --dark-accent: #313B3A;
  --ink: #2C3E50; --muted: #7F8C8D; --muted-ui: #A1A1AA;
  --ground: #F4F5F6; --surface: #E4E8EC; --flow-blue: #f0f5fa;
  --hairline: #e7eaee;
  --font-display: 'Futura', 'Jost', sans-serif;
  --font-body: 'Noto Sans', sans-serif;
  --font-display-cjk: 'Futura', 'Jost', 'PingFang HK', 'PingFang TC', 'PingFang SC', 'Microsoft JhengHei', 'Microsoft YaHei', 'Noto Sans HK', 'Noto Sans CJK TC', 'Noto Sans CJK SC', sans-serif;
  --font-body-cjk: 'Noto Sans', 'PingFang HK', 'PingFang TC', 'PingFang SC', 'Microsoft JhengHei', 'Microsoft YaHei', 'Noto Sans HK', 'Noto Sans CJK TC', 'Noto Sans CJK SC', sans-serif;
}

/* ---------- hero family ---------- */
.dd-hero { position:relative; min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8rem 1.5rem 10rem; overflow:hidden; text-align:center; }
.dd-hero__media { position:absolute; inset:0; z-index:0; }
.dd-hero__media img { width:100%; height:100%; object-fit:cover; opacity:0.72; }
.dd-hero__media--lower img { object-position: center 68%; }
.dd-hero__scrim { position:absolute; inset:0; background:linear-gradient(to top, rgba(28,35,33,0.95), rgba(28,35,33,0.62) 45%, rgba(28,35,33,0.48)); }
.dd-hero__content { position:relative; z-index:10; max-width:64rem; }
.dd-hero__title { font-family:var(--font-display); font-size:clamp(2.5rem,6vw,5rem); font-weight:600; letter-spacing:-0.02em; line-height:0.95; text-transform:uppercase; color:#fff; margin:0.5rem 0 0; }
.dd-hero__sub { margin:1.25rem auto 0; max-width:42rem; color:rgba(255,255,255,0.82); font-size:1.0625rem; line-height:1.65; }
.dd-mask { display:inline-block; overflow:hidden; vertical-align:bottom; }
.dd-mask > span { display:inline-block; will-change:transform; }

/* curves */
.dd-curve { position:absolute; left:0; right:0; bottom:-1px; width:100%; height:5rem; z-index:20; display:block; }
.dd-curve-top { position:absolute; left:0; right:0; top:-1px; width:100%; height:5rem; z-index:5; display:block; }
@media (min-width:768px) { .dd-curve, .dd-curve-top { height:7rem; } }

/* ---------- layout shell & shared type ---------- */
.dd-shell { max-width:80rem; margin-inline:auto; padding-inline:1.5rem; }
@media (min-width:1024px) { .dd-shell { padding-inline:2rem; } }
.dd-h2 { font-family:var(--font-display); font-size:clamp(2.25rem,4.5vw,4.3rem); font-weight:600; letter-spacing:-0.02em; line-height:1.1; color:var(--ink); text-wrap:balance; margin:0.5rem 0 0; }
.dd-note { margin-top:1rem; max-width:42rem; color:var(--muted); font-size:1rem; line-height:1.625; text-wrap:pretty; }
.section-kicker { color:var(--teal-deep); }
.stage-dark .section-kicker, .dd-hero .section-kicker { color: var(--teal); }

/* ---------- buttons ---------- */
.dd-btn { display:inline-flex; align-items:center; gap:0.5rem; background:var(--teal); color:#fff; font-weight:600; font-size:0.9375rem; padding:0.875rem 1.75rem; border-radius:9999px; text-decoration:none; transition:background-color 0.25s ease, transform 0.25s ease; }
.dd-btn:hover { background:var(--teal-deep); transform:translateY(-2px); }
.dd-btn-ghost { display:inline-flex; align-items:center; gap:0.5rem; background:transparent; color:inherit; font-weight:600; font-size:0.9375rem; padding:0.875rem 1.75rem; border-radius:9999px; border:1.5px solid currentColor; text-decoration:none; opacity:0.85; transition:opacity 0.25s ease, transform 0.25s ease; }
.dd-btn-ghost:hover { opacity:1; transform:translateY(-2px); }

/* ---------- focus, motion, screen-reader ---------- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }
.focus\:not-sr-only:focus { position:static; width:auto; height:auto; padding:0.5rem 1rem; margin:0; overflow:visible; clip:auto; white-space:normal; }
.dd-nohead { color:var(--muted-ui); }
a:focus-visible, button:focus-visible { outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } }

/* ---------- A hero extras ---------- */
.a-hero__kicker { color:var(--teal); }
.a-hero__dateline { display:inline-block; margin-top:1.5rem; background:rgba(28,35,33,0.55); border:1px solid rgba(255,255,255,0.14); border-radius:9999px; padding:0.5rem 1.125rem; backdrop-filter:blur(4px); font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.88); }

/* ---------- B intro + signal ---------- */
.b-intro { background:#ffffff; padding:clamp(4.5rem,8vw,7rem) 0 clamp(3.5rem,6vw,5.5rem); }
.b-intro__statement { margin:0; max-width:62rem; font-family:var(--font-display); font-size:clamp(1.875rem,4.2vw,3.5rem); font-weight:600; letter-spacing:-0.02em; line-height:1.12; text-wrap:balance; color:var(--ink); }
.b-num { color:var(--teal); }
.b-intro__note { margin-top:1.5rem; max-width:42rem; color:var(--muted); font-size:1rem; line-height:1.65; }
.b-signal { margin-top:clamp(2.5rem,5vw,4rem); height:7rem; display:flex; align-items:flex-end; gap:3px; }
@media (min-width:768px) { .b-signal { height:9rem; gap:4px; } }
.b-signal__bar { flex:1 1 0; min-height:3px; border-radius:2px 2px 0 0; background:rgba(28,35,33,0.08); transform-origin:bottom; }
.b-signal__bar--live { background:linear-gradient(to top, rgba(0,194,178,0.35), var(--teal)); }
.b-signal-axis { display:flex; justify-content:space-between; margin-top:0.75rem; font-family:ui-monospace,monospace; font-size:0.6875rem; letter-spacing:0.18em; color:var(--muted); }

/* ---------- A fold ---------- */
.a-fold { background:#ffffff; padding:0 clamp(3rem,6vw,5rem) clamp(3rem,6vw,5rem); border-top:1px solid var(--hairline); }
.a-fold__masthead { display:flex; flex-wrap:wrap; gap:0.5rem 0.875rem; align-items:baseline; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:0.6875rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); border-top:2px solid var(--ink); border-bottom:1px solid var(--hairline); padding:0.625rem 0; }
.a-fold__grid { display:grid; grid-template-columns:1fr; gap:2.5rem; margin-top:2.75rem; }
@media (min-width:1024px) { .a-fold__grid { grid-template-columns:3fr 2fr; gap:3.5rem; } }
.a-lead a { text-decoration:none; color:inherit; display:block; }
.a-lead__media { margin:0; background:#fff; border:1px solid #dfe3e8; padding:0.625rem; }
.a-lead__media img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; filter:saturate(0.92); transition:filter 0.4s ease; }
.a-lead a:hover .a-lead__media img, .a-lead a:focus-visible .a-lead__media img { filter:saturate(1.05); }
.a-meta { margin-top:1.25rem; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:0.6875rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.a-lead__headline { margin-top:0.625rem; font-family:var(--font-display-cjk); font-size:clamp(1.75rem,3vw,2.625rem); font-weight:600; letter-spacing:-0.015em; line-height:1.18; color:var(--ink); text-wrap:balance; transition:color 0.25s ease; }
.a-lead a:hover .a-lead__headline { color:var(--teal-deep); }
.a-read { margin-top:1rem; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:0.75rem; font-weight:600; letter-spacing:0.06em; color:var(--teal-deep); }
.a-read span { display:inline-block; transition:transform 0.25s ease; }
a:hover > .a-read span, a:hover .a-read span { transform:translate(2px,-2px); }
.a-fold__side { display:flex; flex-direction:column; }
.a-side { border-top:1px solid var(--ink); padding:1.5rem 0; }
.a-side + .a-side { border-top-color:var(--hairline); }
.a-side a { text-decoration:none; color:inherit; display:block; }
.a-side .a-meta { margin-top:0; }
.a-side__headline { margin-top:0.5rem; font-family:var(--font-display-cjk); font-size:1.375rem; font-weight:600; letter-spacing:-0.01em; line-height:1.25; color:var(--ink); text-wrap:balance; transition:color 0.25s ease; }
.a-side a:hover .a-side__headline { color:var(--teal-deep); }

/* ---------- A index ---------- */
.a-index { background:#ffffff; padding:clamp(2rem,4vw,3.5rem) 0 clamp(4rem,8vw,7rem); }
.a-index__head { max-width:44rem; }
.a-year { margin-top:clamp(2.5rem,5vw,4rem); }
.a-year__title { display:flex; align-items:baseline; gap:1.25rem; margin:0 0 0.5rem; padding-bottom:0.75rem; border-bottom:2px solid var(--ink); font-family:var(--font-display); font-size:clamp(2.5rem,6vw,4.5rem); font-weight:600; letter-spacing:-0.03em; line-height:1; color:var(--ink); }
.a-year__count { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:0.75rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.a-year__list { list-style:none; margin:0; padding:0; }
.a-row { position:relative; display:grid; grid-template-columns:1fr auto; grid-template-areas:"date tag" "outlet thumb" "headline thumb"; column-gap:1rem; align-items:center; padding:1.125rem 0.25rem; border-top:1px solid var(--hairline); text-decoration:none; color:var(--ink); transition:background-color 0.2s ease; }
.a-row:hover { background:#f8fbfb; }
.a-row__date { grid-area:date; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:0.75rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.a-row__outlet { grid-area:outlet; display:flex; align-items:center; gap:0.5rem; margin-top:0.375rem; font-family:var(--font-body-cjk); font-size:0.8125rem; font-weight:600; color:var(--ink); }
.a-row__logo { height:1rem; width:auto; max-width:3.5rem; object-fit:contain; filter:grayscale(1); opacity:0.7; transition:filter 0.25s ease, opacity 0.25s ease; }
.a-row:hover .a-row__logo { filter:grayscale(0); opacity:1; }
.a-row__headline { grid-area:headline; margin-top:0.375rem; font-family:var(--font-body-cjk); font-size:0.9375rem; font-weight:500; line-height:1.45; color:var(--ink); }
.a-row:hover .a-row__headline { text-decoration:underline; text-decoration-color:var(--teal); text-underline-offset:3px; }
.a-row__tag { grid-area:tag; justify-self:end; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:0.625rem; font-weight:500; letter-spacing:0.14em; color:var(--muted-ui); }
.a-row__arrow { grid-area:arrow; display:none; }
.a-row__thumb { grid-area:thumb; width:4.5rem; border:1px solid var(--hairline); padding:0.25rem; background:#fff; }
.a-row__thumb img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
@media (min-width:1024px) {
  .a-row { grid-template-columns:6.5rem 12rem 1fr 6rem 2rem; grid-template-areas:"date outlet headline tag arrow"; gap:1.5rem; padding:1rem 0.5rem; }
  .a-row__outlet, .a-row__headline, .a-row__arrow { margin-top:0; }
  .a-row__arrow { display:block; font-size:0.875rem; color:var(--muted-ui); transition:color 0.2s ease, transform 0.2s ease; }
  .a-row:hover .a-row__arrow { color:var(--teal-deep); transform:translate(2px,-2px); }
  .a-row__thumb { display:none; }
}

/* press clipping — CSS-only hover/focus card, desktop pointers only */
.a-clip { display:none; }
@media (hover:hover) and (min-width:1024px) {
  .a-clip { display:block; position:absolute; right:8rem; top:50%; width:290px; transform:translateY(-46%) rotate(-2.25deg) scale(0.96); background:#fff; border:1px solid #dfe3e8; padding:0.625rem; box-shadow:0 18px 50px rgba(28,35,33,0.16); opacity:0; pointer-events:none; transition:opacity 0.22s ease, transform 0.28s cubic-bezier(0.2,0.9,0.25,1.1); z-index:30; }
  .a-row:hover .a-clip, .a-row:focus-visible .a-clip { opacity:1; transform:translateY(-50%) rotate(-2.25deg) scale(1); }
  .a-clip__img { display:block; }
  .a-clip__img img { width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
  .a-clip__meta { display:block; margin-top:0.625rem; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:0.625rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
  .a-clip__title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:0.25rem; font-family:var(--font-body-cjk); font-size:0.8125rem; font-weight:600; line-height:1.35; color:var(--ink); }
}

/* ---------- A colophon ---------- */
.a-colophon { position:relative; background:var(--dark); color:#fff; padding:clamp(7rem,12vw,10rem) 0 clamp(5rem,9vw,7.5rem); }
.a-colophon .dd-shell { max-width:56rem; }
.a-colophon__rule { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:0.75rem; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--teal); margin:0; }
.a-colophon__title { margin-top:1rem; font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3.75rem); font-weight:600; letter-spacing:-0.02em; line-height:1.08; text-wrap:balance; }
.a-colophon__body { margin-top:1.5rem; max-width:44rem; color:rgba(255,255,255,0.72); font-size:1.0625rem; line-height:1.7; text-wrap:pretty; }
.a-colophon__actions { margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:1rem; }