/* ============================================================
   main.css · Longevity Fashion v3 · "The Issue, Shot Like a Film"
   Cinematic light/dark swing: dark full-bleed cards (awe) ↔ paper
   reading (read). Didone display (Playfair) + grotesk body + bronze.
   Signature = kinetic line-by-line title reveal.
   ============================================================ */

/* ---- Fonts ---- */
@font-face { font-family: EmagDidone; src: url("../fonts/EmagDidone-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: EmagDidone; src: url("../fonts/EmagDidone-500-vietnamese.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: EmagDidone; src: url("../fonts/EmagDidone-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: EmagDidone; src: url("../fonts/EmagDidone-700-vietnamese.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: EmagDidone; src: url("../fonts/EmagDidone-900-latin.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: EmagDidone; src: url("../fonts/EmagDidone-900-vietnamese.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
/* EmagSerif = Lora (variable 400-700, normal+italic) — editorial reading serif, full Vietnamese 2-dấu. Also used for small uppercase labels (no separate sans). */
@font-face { font-family: EmagSerif; src: url("../fonts/Lora-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: EmagSerif; src: url("../fonts/Lora-vietnamese.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: EmagSerif; src: url("../fonts/Lora-italic-latin.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: EmagSerif; src: url("../fonts/Lora-italic-vietnamese.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }

/* ---- Local preview only ---- */
.td-emag__body { margin: 0; padding: 0; background-color: #0C0C0E; }

/* ============================================================
   CMS PARENT OVERRIDES — wide-open + overflow:visible (sticky-safe)
   ============================================================ */
.sp-body-content, .sp-body-content .w980, .sp-body-content .w980 .sp-detail,
.sp-body-content .sp-detail-maincontent, .sp-body-content .sp-detail-content,
.sp-detail-content[data-role="content"] {
  width: 100% !important; max-width: 100% !important; padding: 0 !important;
  margin-left: auto !important; margin-right: auto !important; overflow: visible !important;
  background-color: #0C0C0E !important;
}
.sp-body-content .sp-detail .sp-sapo, .sp-body-content .sp-detail-title,
.sp-body-content .sp-detail .sp-author, .sp-body-content .sp-detail .sp-time { display: none !important; }
.sp-detail-content .detail-emagazine, .sp-detail-content .detail-content { padding: 0 !important; margin: 0 !important; background-color: transparent !important; }
.k14-sp-wrapper, .k14-sp-wrapper .sp-body-content, .genk-sp-wrapper, .genk-sp-wrapper .sp-body-content { background-color: #0C0C0E !important; }
.k14-sp-wrapper .sp-detail-content .td-emag__wrapper, .genk-sp-wrapper .sp-detail-content .td-emag__wrapper,
.sp-detail-content[data-role="content"] .td-emag__wrapper {
  background-color: var(--td-paper) !important; color: var(--td-text) !important;
  max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
}

/* ---- Tokens ---- */
.td-emag__wrapper {
  --td-paper: #FAF7EF;  --td-paper-2: #F1ECE0;
  --td-ink: #16140F;    --td-text: #23211C;  --td-text-dim: #5F594C;  --td-text-mute: #7D7768;
  --td-dark: #0C0C0E;   --td-dark-2: #17161A;
  --td-on-dark: #FAFAF7; --td-on-dark-dim: #ABA593;
  --td-bronze: #B08D57; --td-bronze-ink: #876734;
  --td-line-light: rgba(22,20,15,0.14);  --td-line-dark: rgba(250,250,247,0.18);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  overflow-x: clip;  /* contain reveal-scale spill; safe (no sticky, fixed flag unaffected) */
  background-color: var(--td-paper);
  background-image: url('../images/doodle-pattern.svg');
  background-size: 620px 620px; background-repeat: repeat;
  color: var(--td-text);
  font-family: EmagSerif, "Times New Roman", serif;
  font-size: 1.2rem; line-height: 1.72; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.td-emag__wrapper :where(*, *::before, *::after) { box-sizing: border-box; }
.td-emag__wrapper :where(div, span, figure, figcaption, a, em, b, strong, section, header, i) { margin: 0; padding: 0; }
.td-emag__wrapper :where(img, picture, svg) { display: block; max-width: 100%; height: auto; }
.td-emag__wrapper :where(em) { font-style: italic; }
.td-emag { width: 100%; max-width: 100%; }

/* ============================================================
   MASTHEAD FLAG
   ============================================================ */
.td-flag {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem clamp(1.1rem, 3vw, 2.4rem);
  background: rgba(12,12,14,0.72); color: var(--td-on-dark);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid rgba(250,250,247,0.08);
  transform: translateY(-100%); transition: transform 0.5s var(--ease-expo);
}
.td-flag.is-shown { transform: translateY(0); }
.td-flag__brand { font-family: EmagSerif; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.22em; }
.td-flag__e { color: var(--td-bronze); }
.td-flag__sep { color: var(--td-on-dark-dim); opacity: 0.5; }
.td-flag__chapter { display: flex; align-items: baseline; gap: 0.5rem; color: var(--td-on-dark-dim); }
.td-flag__num { font-family: EmagDidone; font-weight: 500; font-size: 0.95rem; color: var(--td-bronze); font-variant-numeric: tabular-nums; }
.td-flag__name { font-family: EmagSerif; font-weight: 500; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }
.td-flag__progress { margin-left: auto; width: clamp(3rem, 9vw, 7rem); height: 2px; background: rgba(250,250,247,0.16); overflow: hidden; }
.td-flag__progress i { display: block; height: 100%; background: var(--td-bronze); transform: scaleX(0); transform-origin: left; }

/* ============================================================
   COVER (dark, cinematic)
   ============================================================ */
/* SPLIT: max-width 1600 (two 780px halves), centered — NOT vw. Content on the
   left half (text left-aligned, block centred in its half), image centred in its half.
   1rem inline padding so content never touches the viewport edge when it narrows. */
.td-cover {
  position: relative; min-height: 100svh; background: var(--td-dark); color: var(--td-on-dark); overflow: hidden;
  display: grid;
  /* center gap is its OWN column (col 3) so it is the only gap — outer rails get none.
     Band = 780 + gap + 780 = 1600 max, centred; rails (col 1/5) absorb the rest. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 780px) clamp(1.5rem, 2.5vw, 2.5rem) minmax(0, 780px) minmax(0, 1fr);
  align-items: center;
  padding-block: clamp(5rem, 8vw, 6.5rem);
  padding-inline: 1rem;
}
/* Masthead spans the full band but REPLICATES the hero's column grid so its text
   aligns exactly with the content (which is centred inside the left half). */
.td-cover__masthead {
  position: absolute; top: clamp(1.6rem, 4vw, 2.8rem); left: 50%; transform: translateX(-50%);
  width: min(1600px, 100% - 2rem); z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 780px) clamp(1.5rem, 2.5vw, 2.5rem) minmax(0, 780px);
}
.td-cover__masthead-inner {
  grid-column: 1; justify-self: center; max-width: 38rem; width: 100%;
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem;
  font-family: EmagSerif; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(250,250,247,0.72);
  padding-bottom: 0.9rem; border-bottom: 1px solid rgba(250,250,247,0.16);
}
.td-cover__masthead .td-dot-sep { opacity: 0.45; }
.td-cover__content { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; max-width: 38rem; text-align: left; }
.td-cover__media { grid-column: 4; grid-row: 1; justify-self: center; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 100%; }
.td-cover__media img { width: auto; max-width: 100%; max-height: 76svh; object-fit: contain; border-radius: 4px; }
.td-figcaption--cover { text-align: center; max-width: 30rem; color: rgba(250,250,247,0.55); }
.td-badge { display: inline-flex; align-items: center; font-family: EmagDidone; font-weight: 700; font-style: italic; font-size: 1.08rem; letter-spacing: 0.01em; color: #fff; background: #2A2A2C; padding: 0.26rem 0.85rem 0.36rem; border-radius: 0.3rem; margin-bottom: 1.8rem; }
.td-cover__title {
  font-family: EmagDidone; font-weight: 900; color: var(--td-on-dark);
  font-size: clamp(2.9rem, 8vw, 6.6rem); line-height: 1.06; letter-spacing: -0.015em; margin-bottom: 1.8rem;
}
.td-cover__title em { font-style: italic; font-weight: 500; color: var(--td-bronze); }
.td-cover__dek { font-family: EmagDidone; font-weight: 500; font-style: italic; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.5; color: rgba(250,250,247,0.86); max-width: 40rem; margin-bottom: 2.2rem; }
.td-cover__byline { font-family: EmagSerif; font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--td-on-dark-dim); }
.td-cover__byline b { font-weight: 600; color: var(--td-on-dark); }

/* ============================================================
   DARK CARDS (chapter intros, manifesto, coda) — the "awe" punctuation
   ============================================================ */
.td-card {
  position: relative; background: var(--td-dark); color: var(--td-on-dark);
  width: 100%; min-height: 100svh; overflow: hidden;
  display: grid; align-content: center;
  padding: clamp(4rem, 9vw, 7rem) clamp(1.5rem, 8vw, 8rem);
}
.td-folio { font-family: EmagDidone; font-weight: 500; font-size: clamp(2.2rem, 4vw, 3.4rem); color: var(--td-bronze); line-height: 1; margin-bottom: 1rem; }
.td-card__title { font-family: EmagDidone; font-weight: 900; color: var(--td-on-dark); font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.08; letter-spacing: -0.015em; }
.td-card__title em { font-style: italic; font-weight: 500; color: var(--td-bronze); }
.td-card__title--xl { font-size: clamp(3rem, 8.5vw, 7rem); }
.td-card__dek { font-family: EmagDidone; font-style: italic; font-weight: 500; font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.45; color: var(--td-on-dark-dim); margin-top: 1.5rem; max-width: 30rem; }

/* type-led card — tighter (no full-screen empty black) */
.td-card--type { justify-items: start; min-height: 78svh; }
.td-card--type .td-card__title--xl { max-width: 18ch; }

/* photo card — POSTER: large image shown WHOLE (no crop) + title beside */
.td-card--photo {
  display: grid;
  /* center gap = its own column (col 3); band = 780 + gap + 780 = 1600 max, centred */
  grid-template-columns: minmax(0, 1fr) minmax(0, 780px) clamp(1.5rem, 2.5vw, 2.5rem) minmax(0, 780px) minmax(0, 1fr);
  align-items: center;
  /* fixed-width rail (NOT vw padding) + 1rem inline padding so halves never touch the viewport edge */
  padding: clamp(3rem, 6vw, 5rem) 1rem;
}
/* default: image in left half, text in right half — each centred in its half.
   grid-row:1 forces both halves onto the SAME row — without it, media-right (figure in col4
   before head in col2 in DOM) trips sparse auto-placement and drops the text to a 2nd row. */
.td-card--photo .td-card__media { grid-column: 2; grid-row: 1; margin: 0; justify-self: center; align-self: center; display: flex; flex-direction: column; align-items: center; }
.td-card--photo .td-card__head { grid-column: 4; grid-row: 1; justify-self: center; align-self: center; max-width: 38rem; text-align: left; }
/* media-right: image in right half, text in left half */
.td-card--media-right .td-card__media { grid-column: 4; }
.td-card--media-right .td-card__head { grid-column: 2; }
.td-card--photo .td-card__media img { width: auto; max-width: 100%; max-height: 80svh; object-fit: contain; }  /* full ratio, no crop */
.td-card--duotone .td-card__media img { filter: grayscale(0.55) saturate(0.85) contrast(1.03); }
.td-figcaption--onfig { font-family: EmagSerif; font-size: 0.78rem; line-height: 1.5; color: var(--td-on-dark-dim); margin-top: 0.85rem; max-width: 28rem; }

/* manifesto + coda */
.td-manifesto { justify-items: center; text-align: center; min-height: 84svh; }
.td-manifesto__quote { font-family: EmagDidone; font-weight: 500; font-size: clamp(1.9rem, 4.2vw, 3.4rem); line-height: 1.22; letter-spacing: -0.01em; color: var(--td-on-dark); max-width: 22ch; }
.td-manifesto__quote em { font-style: italic; color: var(--td-bronze); }

/* CODA — centred "end card" / colophon: balanced, symmetric close */
.td-coda { justify-items: center; align-content: center; min-height: 92svh; }
.td-coda__inner { display: grid; justify-items: center; text-align: center; max-width: 46rem; }
.td-coda__mark { display: flex; align-items: center; gap: 0.9rem; font-family: EmagSerif; font-weight: 600; font-size: 0.76rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--td-bronze); margin-bottom: 2.4rem; }
.td-coda__mark::before, .td-coda__mark::after { content: ""; width: 2.2rem; height: 1px; background: var(--td-bronze); opacity: 0.55; }
.td-coda__line { font-family: EmagDidone; font-weight: 700; font-size: clamp(2.1rem, 4.6vw, 3.8rem); line-height: 1.16; letter-spacing: -0.01em; color: var(--td-on-dark); max-width: 22ch; }
.td-coda__line em { font-style: italic; font-weight: 500; color: var(--td-bronze); }
.td-coda__rule { width: 3rem; height: 1px; background: var(--td-line-dark); margin: clamp(2rem, 4vw, 2.8rem) 0; }
.td-coda__sign { font-family: EmagDidone; font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 2.1vw, 1.7rem); line-height: 1.5; color: var(--td-on-dark-dim); max-width: 36rem; }
.td-coda__credits { font-family: EmagSerif; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--td-on-dark-dim); margin-top: clamp(2.6rem, 6vw, 4rem); }
.td-coda__credits b { color: var(--td-on-dark); font-weight: 600; }
.td-coda__dot { margin: 0 0.6rem; color: var(--td-bronze); }
.td-coda__badge { font-family: EmagDidone; font-weight: 700; font-style: italic; font-size: 1rem; letter-spacing: 0.02em; color: var(--td-on-dark-dim); margin-top: 1rem; }

/* ============================================================
   LIGHT READING (paper) — the "read" stretches
   ============================================================ */
.td-read { position: relative; background: transparent; padding: clamp(3.5rem, 8vw, 7rem) clamp(1.5rem, 6vw, 4rem); }
.td-read__inner, .td-read { }
.td-read > * { max-width: 42rem; margin-left: auto; margin-right: auto; }  /* centered editorial column */
.td-read--intro { padding-top: clamp(4rem, 9vw, 8rem); }
/* drop-cap opens each reading section — exactly 2 lines via initial-letter
   (technique from zmag.vn content.css); float fallback for unsupported UAs */
.td-body--drop::first-letter, .td-lead::first-letter {
  font-family: EmagDidone; font-weight: 700; color: var(--td-bronze-ink);
}
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .td-body--drop::first-letter, .td-lead::first-letter {
    -webkit-initial-letter: 2; initial-letter: 2;
    margin-right: 0.6rem; font-size: inherit; line-height: inherit; float: none;
  }
}
@supports not ((initial-letter: 2) or (-webkit-initial-letter: 2)) {
  .td-body--drop::first-letter, .td-lead::first-letter {
    float: left; font-size: calc(1em * 2 * 1.05); line-height: 1; margin-right: 0.6rem;
  }
}
.td-read--titled .td-folio { color: var(--td-bronze-ink); font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 0.6rem; }
.td-read__title { font-family: EmagDidone; font-weight: 700; color: var(--td-ink); font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 1.6rem; }
.td-body { font-family: EmagSerif, "Times New Roman", serif; font-size: 1.2rem; line-height: 1.75; color: var(--td-text); margin-top: clamp(1.3rem, 2.2vw, 1.8rem); }
.td-body b, .td-body strong { font-weight: 600; }
.td-read > .td-body:first-child, .td-lead { margin-top: 0; }

/* pull-quotes on paper */
.td-pull { font-family: EmagDidone; font-weight: 500; color: var(--td-ink); font-size: clamp(1.7rem, 2.9vw, 2.4rem); line-height: 1.26; letter-spacing: -0.005em; margin: clamp(1.8rem,3vw,2.6rem) auto; padding: clamp(1.2rem,2.4vw,2rem) 0; border-top: 1px solid var(--td-line-light); border-bottom: 1px solid var(--td-line-light); }
.td-pull em { font-style: italic; color: var(--td-bronze-ink); }
.td-mark { color: var(--td-ink); }   /* Rough Notation underlines this */

/* inline figure (paper) */
.td-figure--inline { margin: clamp(2rem,4vw,3rem) auto; }
.td-figure--inline img { width: 100%; border-radius: var(--r, 12px); }
/* WIDE landscape figure — breaks out of the reading column, full ratio, no crop */
.td-read > .td-figure--wide { max-width: min(76rem, 92vw); margin-left: auto; margin-right: auto; margin-block: clamp(2.5rem, 5vw, 4.5rem); }
.td-figure--wide img { width: 100%; height: auto; border-radius: var(--r, 12px); }
.td-figcaption { font-family: EmagSerif; font-size: 0.85rem; line-height: 1.5; color: var(--td-text-mute); margin-top: 0.8rem; }

/* duotone (ch04 card image) */
.td-duotone img { filter: grayscale(1); transition: filter 1.1s var(--ease-expo); }
.td-duotone.fx-in img { filter: grayscale(0.25) saturate(0.9) contrast(1.02); }

/* ---- Footer ---- */
.td-foot { background: var(--td-dark); color: var(--td-on-dark-dim); padding: clamp(2.5rem,5vw,4rem) clamp(1.5rem,7vw,8rem); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-family: EmagSerif; font-size: 0.86rem; letter-spacing: 0.04em; }
.td-foot__brand { font-weight: 600; color: var(--td-on-dark); letter-spacing: 0.14em; }

/* ============================================================
   MOTION ENGINE (no-preference only) — transform/opacity/clip/filter
   ============================================================ */
/* line box gets bottom room so overflow:hidden never clips descenders /
   stacked Vietnamese marks (dấu nặng); negative margin keeps leading tight */
.td-line { display: block; overflow: hidden; padding-bottom: 0.18em; margin-bottom: -0.12em; }
.td-line > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  /* signature: line-by-line title reveal */
  [data-fx="title"] .td-line > span { transform: translateY(125%); transition: transform 0.85s var(--ease-expo); will-change: transform; }
  [data-fx="title"].fx-in .td-line > span { transform: none; }
  [data-fx="title"] .td-line:nth-child(2) > span { transition-delay: 0.08s; }
  [data-fx="title"] .td-line:nth-child(3) > span { transition-delay: 0.16s; }
  [data-fx="title"] .td-line:nth-child(4) > span { transition-delay: 0.24s; }
  /* soft rise for deks/pulls/byline */
  [data-fx="rise"] { opacity: 0; transform: translateY(1.2rem); transition: opacity 0.7s var(--ease-expo), transform 0.8s var(--ease-expo); }
  [data-fx="rise"].fx-in { opacity: 1; transform: none; }
  /* image reveal: curtain wipe (top→down) + scale settle — premium editorial */
  [data-fx="img"] { transition: clip-path 1.1s cubic-bezier(0.22, 0.7, 0.3, 1), transform 1.25s cubic-bezier(0.22, 0.7, 0.3, 1), opacity 0.85s ease-out; will-change: clip-path, transform; }
  [data-fx="img"]:not(.fx-in) { clip-path: inset(0 0 100% 0 round var(--r, 12px)); opacity: 0; transform: scale(1.09); }
  [data-fx="img"].fx-in { clip-path: inset(0 0 0 0 round var(--r, 12px)); opacity: 1; transform: none; }
  /* Ken Burns cover: fade in + gentle one-shot zoom */
  [data-fx="kenburns"] { opacity: 0; transform: scale(1.001); transition: transform 7s linear, opacity 1.2s ease; }
  [data-fx="kenburns"].fx-in { opacity: 1; transform: scale(1.07); }
}
[data-fx].fx-in { opacity: 1; }
/* rounded corners on content images (always — incl. reduced-motion/no-JS) */
[data-fx="img"] { --r: 12px; border-radius: var(--r); overflow: hidden; }

/* ============================================================
   TABLET (<= 900px)
   ============================================================ */
@media (max-width: 900px) {
  /* both halves collapse to a single centred column (image on top, text below) */
  .td-card--photo { grid-template-columns: 1fr; align-items: stretch; column-gap: 0; gap: clamp(1.5rem,4vw,2.5rem); align-content: center; padding-inline: clamp(1.5rem, 6vw, 4rem); }
  .td-card--photo .td-card__media, .td-card--photo .td-card__head,
  .td-card--media-right .td-card__media, .td-card--media-right .td-card__head { grid-column: 1; grid-row: auto; justify-self: center; max-width: 40rem; width: 100%; }
  .td-card__media img { max-height: 56svh; }

  .td-cover { grid-template-columns: 1fr; justify-items: center; padding-inline: clamp(1.5rem, 6vw, 4rem); row-gap: clamp(2rem, 5vw, 3rem); }
  .td-cover__content, .td-cover__media { grid-column: 1; grid-row: auto; max-width: 40rem; }
  /* stacked: masthead collapses to one column, inner centred at the same 40rem as the content.
     Width matches the cover's padded content box (2× its clamp(1.5rem,6vw,4rem) padding) so the
     masthead edges track the content even when 40rem no longer fits (681-900px range). */
  .td-cover__masthead { grid-template-columns: 1fr; width: calc(100% - clamp(3rem, 12vw, 8rem)); }
  .td-cover__masthead-inner { grid-column: 1; max-width: 40rem; }
}

/* ============================================================
   MOBILE (<= 680px)
   ============================================================ */
@media (max-width: 680px) {
  .td-cover { min-height: auto; padding: 5rem 1.5rem 3.5rem; align-content: center; }
  .td-cover__content, .td-cover__media { max-width: none; }
  .td-cover__title { font-size: clamp(2.6rem, 12vw, 4rem); }
  /* match the 1.5rem cover padding so the masthead text lines up with the content */
  .td-cover__masthead { width: calc(100% - 3rem); }
  .td-cover__masthead-inner { font-size: 0.62rem; letter-spacing: 0.18em; max-width: none; }
  /* mobile cover: full-width image (edge-to-edge), text above it */
  .td-cover__media { margin: 0 -1.5rem; gap: 0.85rem; overflow: hidden; }
  .td-cover__media img { width: 100%; max-height: 70svh; border-radius: 0; }
  .td-figcaption--cover { padding: 0 1.5rem; }

  .td-card { min-height: auto; padding: 3.5rem 1.5rem; }
  .td-card--type { min-height: 60svh; align-content: center; }
  .td-card__title--xl { font-size: clamp(2.6rem, 13vw, 4.2rem); }
  /* poster card → stack: FULL-WIDTH image (edge-to-edge, whole, no crop) → caption → title */
  .td-card--photo { display: block; min-height: auto; }
  .td-card--photo .td-card__media, .td-card--media-right .td-card__media { display: block; margin: 0 -1.5rem 1.6rem; max-width: none; width: auto; overflow: hidden; }
  .td-card--photo .td-card__head, .td-card--media-right .td-card__head { max-width: none; }
  .td-card--photo .td-card__media img { width: 100%; height: auto; max-height: 88svh; object-fit: contain; }
  /* full-width edge-to-edge images → square (no rounded gap at screen edge) */
  .td-card--photo .td-card__media img, .td-read > .td-figure--wide img { --r: 0; }
  .td-figcaption--onfig { max-width: none; padding: 0 1.5rem; }
  /* single landscape figure → full-width edge-to-edge */
  .td-read > .td-figure--wide { max-width: none; margin-left: -1.5rem; margin-right: -1.5rem; }
  .td-figure--wide .td-figcaption { padding: 0 1.5rem; }
  .td-manifesto { min-height: 70svh; }
  .td-coda { min-height: auto; }

  .td-read { padding: 3rem 1.5rem; }
  .td-read > * { max-width: none; margin-left: 0; margin-right: 0; }
  /* initial-letter:2 auto-sizes to 2 lines on mobile too — no fixed override */

  .td-flag { padding: 0.55rem 1.1rem; gap: 0.5rem; }
  .td-flag__brand { font-size: 0.72rem; letter-spacing: 0.16em; }
  .td-flag__name { display: none; }   /* keep number, drop name on narrow */
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-fx], [data-fx] * { transition: none !important; }
}