/* ============================================================
   eMagazine — OPPO Find X9 Series · Chế độ Bậc thầy Hasselblad
   Dark editorial · Camera-coded · Max interactive
   Fonts: Space Grotesk (display) · FK Roman Standard (body)
   ============================================================ */

/* ----- 1. SCOPED RESET (CMS-safe — :where() = 0 specificity, never beats components) ----- */
/* Local preview only — CMS strips body class so this never affects CMS pages */
.td-emag__body { margin: 0; padding: 0; background: #0a0a0a; min-height: 100vh; }
.td-emag__wrapper :where(*, *::before, *::after) { box-sizing: border-box; }
.td-emag__wrapper :where(div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, em, strong, b, i, ol, ul, li, figure, figcaption,
  article, aside, footer, header, nav, section, button,
  table, tr, td, th, img, picture, svg, canvas) { margin: 0; padding: 0; }
.td-emag__wrapper :where(img, picture, svg) { display: block; max-width: 100%; height: auto; }
.td-emag__wrapper :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.td-emag__wrapper :where(ol, ul) { list-style: none; }
.td-emag__wrapper :where(a) { color: inherit; text-decoration: none; }
.td-emag__wrapper :where(blockquote) { font-style: normal; }
.td-emag__wrapper { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ----- 2. FONT FACE — Space Grotesk (display) ----- */
/* Latin */
@font-face {
  font-family: 'EmagDisplay';
  src: url('../fonts/SpaceGrotesk-400-latin.woff2') format('woff2');
  font-weight: 400; 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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EmagDisplay';
  src: url('../fonts/SpaceGrotesk-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+0304, U+0308, U+0329, 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: 'EmagDisplay';
  src: url('../fonts/SpaceGrotesk-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+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Latin-ext */
@font-face {
  font-family: 'EmagDisplay';
  src: url('../fonts/SpaceGrotesk-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EmagDisplay';
  src: url('../fonts/SpaceGrotesk-500-latin-ext.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EmagDisplay';
  src: url('../fonts/SpaceGrotesk-700-latin-ext.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Vietnamese */
@font-face {
  font-family: 'EmagDisplay';
  src: url('../fonts/SpaceGrotesk-400-vietnamese.woff2') format('woff2');
  font-weight: 400; 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: 'EmagDisplay';
  src: url('../fonts/SpaceGrotesk-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: 'EmagDisplay';
  src: url('../fonts/SpaceGrotesk-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;
}

/* FK Roman Standard for body */
@font-face {
  font-family: 'EmagBody';
  src: url('../fonts/EmagBody.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EmagBody';
  src: url('../fonts/EmagBodyItalic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'EmagBody';
  src: url('../fonts/EmagBodyBold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EmagBody';
  src: url('../fonts/EmagBodyBoldItalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* JetBrains Mono for EXIF/labels */
@font-face {
  font-family: 'EmagMono';
  src: url('../fonts/EmagMono.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Samsung Sharp Sans for eMag badge */
@font-face {
  font-family: 'EmagBadge';
  src: url('../fonts/EmagBadge.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   3. CMS PARENT WRAPPER OVERRIDES (MANDATORY — VCCorp/Genk/K14)
   The CMS wraps user content inside:
   .k14-sp-wrapper / .genk-sp-wrapper
     > .sp-body-content > .w980 (max-width: 980px) > .sp-detail
       > .sp-detail-maincontent > .sp-detail-content[data-role=content]
         > .detail-emagazine > [user eMag here]
   Need to: reset width, padding, margins, hide auto sapo, set bg
   ============================================================ */
.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: #0a0a0a !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: transparent !important; }
.k14-sp-wrapper,
.k14-sp-wrapper .sp-body-content,
.k14-sp-wrapper .sp-body-content .sp-detail,
.genk-sp-wrapper,
.genk-sp-wrapper .sp-body-content,
.genk-sp-wrapper .sp-body-content .sp-detail { background: #0a0a0a !important; }
/* Force wrapper color/bg with HIGH specificity to beat .k14-sp-wrapper .sp-body-content .sp-detail (0,3,0) */
.k14-sp-wrapper .sp-detail-content .td-emag__wrapper,
.genk-sp-wrapper .sp-detail-content .td-emag__wrapper,
.sp-detail-content .td-emag__wrapper {
  color: #f5f5f7 !important;
  background: #0a0a0a !important;
}

/* ----- 4. CUSTOM PROPERTIES ----- */
.td-emag__wrapper {
  --td-bg-primary: #0a0a0a;
  --td-bg-surface: #141414;
  --td-bg-elevated: #1c1c1e;
  --td-text-primary: #f5f5f7;
  --td-text-secondary: rgba(245, 245, 247, 0.62);
  --td-text-muted: rgba(245, 245, 247, 0.38);
  --td-accent: #FE5000;
  --td-accent-glow: rgba(254, 80, 0, 0.18);
  --td-border: rgba(255, 255, 255, 0.08);
  --td-border-strong: rgba(255, 255, 255, 0.16);
  --td-focus-ring: 2px solid #FE5000;

  /* Vintage paper colors for quote */
  --td-paper-cream: #f4ead5;
  --td-paper-aged: #ebdfb8;
  --td-paper-ink: #2a241c;
  --td-paper-faded: #6b5e48;
  --td-film-amber: #d49a4a;

  --td-w-text: 40rem;
  --td-w-wide: 60rem;
  --td-w-max: 78rem;
  --td-radius-card: 1.75rem;
  --td-radius-tile: 1.125rem;
  --td-radius-pill: 980px;
  --td-radius-small: 0.625rem;
  --td-radius-badge: 0.375rem;

  --td-ease-overshoot: cubic-bezier(0.3, 2, 0.5, 1);
  --td-ease-smooth: cubic-bezier(0.53, -0.01, 0.17, 1);
  --td-ease-soft: cubic-bezier(0, 0, 0.5, 1);
  --td-ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- 5. KEYFRAMES ----- */
@keyframes td-marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes td-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}
@keyframes td-scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes td-doodle-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}

/* ----- 6. WRAPPER & BASE (NO global body styles — CMS-safe) ----- */
.td-emag__wrapper {
  color: var(--td-text-primary);
  font-family: 'EmagBody', Georgia, 'Times New Roman', serif;
  font-size: 1.2rem;
  line-height: 1.75;
  position: relative;
}
.td-article { position: relative; z-index: 1; }

/* Skip-to-content link */
.td-skip-link {
  position: fixed;
  top: -100px; left: 1rem;
  background: var(--td-accent);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--td-radius-pill);
  font-family: 'EmagDisplay', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 9999;
  transition: top 0.2s var(--td-ease-soft);
}
.td-skip-link:focus { top: 1rem; outline: var(--td-focus-ring); outline-offset: 2px; }

.td-emag__wrapper :focus-visible,
.td-toc-modal :focus-visible {
  outline: var(--td-focus-ring);
  outline-offset: 3px;
  border-radius: var(--td-radius-badge);
}

/* ----- 7. eMag BADGE ----- */
.td-emag-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #333;
  border-radius: var(--td-radius-badge);
  padding: 0.35rem 0.6rem 0.35rem 0.45rem;
  font-family: 'EmagBadge', 'EmagDisplay', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: #fff;
  user-select: none;
}
.td-emag-badge__e {
  color: var(--td-accent);
  font-size: 1.05rem;
  line-height: 1;
}
.td-emag-badge__txt { line-height: 1; }
.td-emag-badge--small { font-size: 0.7rem; padding: 0.25rem 0.55rem 0.25rem 0.4rem; }
.td-emag-badge--small .td-emag-badge__e { font-size: 0.95rem; }

/* ============================================================
   8. BACKGROUND DOODLE PATTERN (tiled cute camera icons)
   ============================================================ */
.td-emag__wrapper {
  background-color: var(--td-bg-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'><g fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='0.11'><g transform='translate(40,60)'><rect x='0' y='10' width='80' height='56' rx='4'/><rect x='22' y='2' width='36' height='10' rx='1.5'/><circle cx='40' cy='38' r='18'/><circle cx='40' cy='38' r='12'/><circle cx='40' cy='38' r='5'/><rect x='8' y='16' width='12' height='8' rx='1'/><circle cx='68' cy='22' r='3'/></g><g transform='translate(190,30) rotate(-8)'><rect x='0' y='28' width='44' height='80' rx='6'/><rect x='4' y='34' width='36' height='70' rx='3'/><circle cx='22' cy='52' r='12'/><circle cx='22' cy='52' r='9'/><circle cx='22' cy='52' r='4'/><circle cx='34' cy='42' r='1.5'/><line x1='14' y1='82' x2='30' y2='82'/><line x1='14' y1='90' x2='30' y2='90'/></g><g transform='translate(330,80)'><rect x='0' y='0' width='130' height='28' rx='1'/><line x1='0' y1='6' x2='130' y2='6'/><line x1='0' y1='22' x2='130' y2='22'/><line x1='32' y1='6' x2='32' y2='22'/><line x1='65' y1='6' x2='65' y2='22'/><line x1='98' y1='6' x2='98' y2='22'/><rect x='4' y='10' width='24' height='8'/><rect x='37' y='10' width='24' height='8'/><rect x='70' y='10' width='24' height='8'/><rect x='103' y='10' width='24' height='8'/></g><g transform='translate(80,200)'><circle cx='28' cy='28' r='26'/><circle cx='28' cy='28' r='20'/><path d='M28 8 L46 16 L52 28 L46 40 L28 48 L10 40 L4 28 L10 16 Z'/><circle cx='28' cy='28' r='10'/><circle cx='28' cy='28' r='3'/></g><g transform='translate(210,220) rotate(12)'><rect x='10' y='0' width='38' height='14' rx='2'/><circle cx='29' cy='28' r='6'/><line x1='29' y1='14' x2='29' y2='22'/><line x1='29' y1='34' x2='29' y2='80'/><line x1='29' y1='34' x2='10' y2='90'/><line x1='29' y1='34' x2='48' y2='90'/><line x1='14' y1='70' x2='24' y2='70'/><line x1='34' y1='70' x2='44' y2='70'/></g><g transform='translate(330,200)'><rect x='6' y='6' width='100' height='66' rx='6'/><rect x='10' y='10' width='92' height='58' rx='3'/><circle cx='56' cy='28' r='10'/><circle cx='56' cy='28' r='7'/><circle cx='78' cy='18' r='1.5'/><rect x='42' y='44' width='28' height='16' rx='2'/><line x1='20' y1='66' x2='40' y2='66'/></g><g transform='translate(50,360)'><rect x='0' y='0' width='44' height='34' rx='3'/><line x1='4' y1='8' x2='40' y2='8'/><circle cx='14' cy='20' r='3.5'/><rect x='22' y='14' width='14' height='10' rx='1'/><circle cx='50' cy='14' r='5'/><line x1='50' y1='2' x2='50' y2='7'/><line x1='58' y1='7' x2='55' y2='12'/><line x1='42' y1='7' x2='45' y2='12'/></g><g transform='translate(170,400) rotate(-5)'><circle cx='22' cy='22' r='20'/><circle cx='22' cy='22' r='14'/><circle cx='22' cy='22' r='2.5'/><line x1='22' y1='-2' x2='22' y2='4'/><line x1='42' y1='2' x2='38' y2='6'/><line x1='46' y1='22' x2='42' y2='22'/><line x1='42' y1='42' x2='38' y2='38'/><line x1='22' y1='46' x2='22' y2='42'/><line x1='2' y1='42' x2='6' y2='38'/><line x1='-2' y1='22' x2='2' y2='22'/><line x1='2' y1='2' x2='6' y2='6'/></g><g transform='translate(290,400)'><rect x='0' y='6' width='80' height='52' rx='4'/><rect x='4' y='10' width='72' height='40' rx='2'/><circle cx='40' cy='30' r='14'/><circle cx='40' cy='30' r='9'/><circle cx='40' cy='30' r='3'/><rect x='12' y='14' width='10' height='6' rx='1'/><circle cx='66' cy='18' r='2'/><line x1='14' y1='52' x2='32' y2='52'/><line x1='48' y1='52' x2='66' y2='52'/></g><g transform='translate(420,300)'><circle cx='14' cy='14' r='12'/><circle cx='14' cy='14' r='7'/><line x1='14' y1='-4' x2='14' y2='2'/><line x1='4' y1='4' x2='8' y2='8'/><line x1='-4' y1='14' x2='2' y2='14'/><line x1='4' y1='24' x2='8' y2='20'/><line x1='14' y1='32' x2='14' y2='26'/><line x1='24' y1='24' x2='20' y2='20'/><line x1='32' y1='14' x2='26' y2='14'/><line x1='24' y1='4' x2='20' y2='8'/></g><g transform='translate(440,440)'><rect x='0' y='0' width='28' height='40' rx='2'/><rect x='4' y='4' width='20' height='14' rx='1'/><circle cx='14' cy='28' r='3.5'/><line x1='4' y1='34' x2='24' y2='34'/></g></g></svg>");
  background-size: 520px 520px;
  background-repeat: repeat;
  background-attachment: fixed;
}
/* Subtle grain overlay for film feel */
.td-emag__wrapper::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: screen;
}

/* ============================================================
   9. SECTION COMMON
   ============================================================ */
.td-section {
  position: relative;
  padding: 6rem 1.5rem;
  scroll-margin-top: 2rem;
  z-index: 1;
}
.td-section__head {
  max-width: var(--td-w-wide);
  margin: 0 auto 3rem;
  position: relative;
}
.td-section__num {
  position: absolute;
  top: 4rem; right: 1.5rem;
  font-family: 'EmagDisplay', sans-serif;
  font-weight: 700;
  font-size: clamp(8rem, 18vw, 18rem);
  line-height: 1;
  color: var(--td-bg-surface);
  user-select: none;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.04em;
}
.td-section__kicker {
  font-family: 'EmagMono', 'EmagDisplay', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--td-accent);
  margin-bottom: 1.25rem;
  font-weight: 500;
  text-transform: uppercase;
}
.td-section__title {
  font-family: 'EmagDisplay', sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--td-text-primary);
}

.td-text-col {
  max-width: var(--td-w-text);
  margin: 0 auto;
  padding-bottom: 2rem;
}
.td-heading {
  font-family: 'EmagDisplay', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--td-text-primary);
  margin-bottom: 1.5rem;
}
.td-paragraph {
  font-family: 'EmagBody', Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.75;
  color: var(--td-text-primary);
  margin-bottom: 1.5rem;
}
.td-paragraph em { color: var(--td-accent); font-style: italic; }
.td-paragraph strong { color: var(--td-text-primary); font-weight: 700; }

.td-figure {
  margin: 2rem auto;
  position: relative;
  max-width: var(--td-w-wide);
}
.td-figure__img {
  width: 100%;
  border-radius: var(--td-radius-tile);
  cursor: zoom-in;
}
.td-figcaption {
  font-family: 'EmagBody', serif;
  font-size: 0.95rem;
  color: var(--td-text-secondary);
  line-height: 1.55;
  margin-top: 1rem;
  padding: 0 0.5rem;
  font-style: italic;
}
.td-figcaption em { color: var(--td-accent); font-style: italic; }
.td-figcaption strong { color: var(--td-text-primary); }

.td-figure--wide { max-width: var(--td-w-wide); }
.td-figure--portrait { max-width: var(--td-w-text); }

.td-exif {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
  border: 1px solid var(--td-border-strong);
  padding: 0.4rem 0.75rem;
  border-radius: var(--td-radius-badge);
  font-family: 'EmagMono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--td-text-primary);
  display: flex;
  gap: 0.4rem;
  align-items: center;
  text-transform: uppercase;
}
.td-exif__item--mode { color: var(--td-accent); font-weight: 500; }
.td-exif__sep { opacity: 0.4; }

.td-diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  max-width: var(--td-w-wide);
  margin: 2rem auto;
}
.td-diptych .td-figure { margin: 0; }
.td-diptych .td-figure__img { border-radius: var(--td-radius-small); }

.td-grid-album {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  max-width: var(--td-w-wide);
  margin: 2rem auto;
}
.td-grid-album .td-figure { margin: 0; }
.td-figure--grid .td-figure__img { border-radius: var(--td-radius-small); object-fit: cover; aspect-ratio: 1 / 1.33; }

.td-grid-album-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.5rem;
}
.td-grid-album-2x2 img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--td-radius-small);
  cursor: zoom-in;
}

.td-marquee {
  max-width: 100%;
  margin: 4rem auto;
  overflow: hidden;
  border-top: 1px solid var(--td-border);
  border-bottom: 1px solid var(--td-border);
  padding: 1.25rem 0;
}
.td-marquee__track {
  display: flex;
  white-space: nowrap;
  font-family: 'EmagMono', monospace;
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  color: var(--td-text-secondary);
  text-transform: uppercase;
  width: max-content;
  animation: td-marquee-x 60s linear infinite;
  will-change: transform;
}
.td-marquee__group {
  display: flex;
  gap: 1.5rem;
  padding-right: 1.5rem;
  flex-shrink: 0;
}
.td-marquee__group span:nth-child(odd) { color: var(--td-accent); }

.td-bignum {
  max-width: var(--td-w-wide);
  margin: 4rem auto;
  padding: 3rem 2rem;
  text-align: center;
  position: relative;
}
.td-bignum::before, .td-bignum::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 60px;
  height: 1px;
  background: var(--td-border-strong);
  transform: translateX(-50%);
}
.td-bignum::before { top: 0; }
.td-bignum::after { bottom: 0; }
.td-bignum__num {
  font-family: 'EmagDisplay', sans-serif;
  font-weight: 700;
  font-size: clamp(6rem, 16vw, 14rem);
  line-height: 0.9;
  color: var(--td-accent);
  letter-spacing: -0.05em;
  margin-bottom: 1.5rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.1em;
}
.td-bignum__unit {
  font-size: 0.4em;
  color: var(--td-text-secondary);
  font-weight: 700;
  letter-spacing: 0;
}
.td-bignum__caption {
  max-width: var(--td-w-text);
  margin: 0 auto;
  font-family: 'EmagBody', serif;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--td-text-secondary);
}
.td-bignum__caption strong { color: var(--td-text-primary); font-weight: 700; }

/* ============================================================
   10. HERO
   ============================================================ */
.td-sec-hero {
  min-height: 100vh;
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
}
.td-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top right, var(--td-accent-glow) 0%, transparent 50%);
  pointer-events: none;
  z-index: 3;
}
.td-hero__inner {
  position: relative;
  z-index: 4;
  max-width: 56rem;
  margin: 0 auto;
  padding: 6rem 2rem 4rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.td-hero__kicker {
  font-family: 'EmagMono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--td-accent);
  margin: 1.5rem 0 1.25rem;
  font-weight: 500;
  text-transform: uppercase;
}
.td-hero__title {
  font-family: 'EmagDisplay', sans-serif;
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--td-text-primary);
  margin-bottom: 1.75rem;
}
.td-hero__title-accent {
  display: block;
  color: var(--td-accent);
  font-style: italic;
  font-weight: 700;
}
.td-hero__sapo {
  font-family: 'EmagBody', serif;
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--td-text-secondary);
  max-width: 38rem;
  margin: 0 auto;
}
.td-hero__sapo em { color: var(--td-text-primary); font-style: italic; }
/* Hero figure: full-bleed background image */
.td-hero__figure {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  overflow: hidden;
}
.td-hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center right;
  cursor: zoom-in;
  filter: brightness(0.85);
}
/* Even dark overlay for text readability — full image visible underneath */
.td-hero__figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center,
      rgba(10,10,10,0.55) 0%,
      rgba(10,10,10,0.75) 100%);
  pointer-events: none;
  z-index: 2;
}

.td-heritage-mini {
  display: flex;
  gap: 1.5rem;
  margin: 3rem auto 2rem;
  flex-wrap: wrap;
  position: relative;
  justify-content: center;
  max-width: 52rem;
}
.td-heritage-mini::before {
  content: '';
  position: absolute;
  top: 0.45rem;
  left: 5%;
  right: 5%;
  height: 1px;
  background: var(--td-border);
  z-index: 0;
}
.td-heritage-mini__item {
  flex: 0 1 9rem;
  min-width: 6.5rem;
  position: relative;
  padding-top: 1.5rem;
  z-index: 1;
  text-align: center;
}
.td-heritage-mini__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -0.45rem;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--td-border-strong);
  border-radius: 50%;
  background: var(--td-bg-primary);
}
.td-heritage-mini__item--current::before {
  border-color: var(--td-accent);
  background: var(--td-accent);
  box-shadow: 0 0 0 6px var(--td-accent-glow);
}
.td-heritage-mini__year {
  display: block;
  font-family: 'EmagDisplay', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--td-text-primary);
  line-height: 1;
}
.td-heritage-mini__item--current .td-heritage-mini__year { color: var(--td-accent); }
.td-heritage-mini__label {
  display: block;
  font-family: 'EmagBody', serif;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--td-text-secondary);
  margin-top: 0.4rem;
}

.td-scroll-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
  font-family: 'EmagMono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--td-text-muted);
  text-transform: uppercase;
}
.td-scroll-prompt__line {
  width: 1px;
  height: 2.5rem;
  background: var(--td-text-muted);
  animation: td-scroll-line 2.2s var(--td-ease-soft) infinite;
}

/* ============================================================
   11. SECTION 1 — HERITAGE
   ============================================================ */
.td-sec-heritage { padding-top: 8rem; }

/* ============================================================
   12. SECTION 2 — AUTO VS MASTER
   ============================================================ */
.td-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  max-width: var(--td-w-wide);
  margin: 3rem auto;
  align-items: stretch;
}
.td-compare__card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius-card);
  padding: 2rem 1.75rem;
  -webkit-backdrop-filter: blur(1.5rem) saturate(1.6);
  backdrop-filter: blur(1.5rem) saturate(1.6);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.td-compare__card--master {
  border-color: var(--td-accent);
  box-shadow: 0 0 0 1px var(--td-accent), 0 20px 60px var(--td-accent-glow);
}
.td-compare__label {
  font-family: 'EmagMono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--td-text-muted);
  text-transform: uppercase;
}
.td-compare__card--master .td-compare__label { color: var(--td-accent); }
.td-compare__icon { width: 3rem; height: 3rem; color: var(--td-text-secondary); }
.td-compare__card--master .td-compare__icon { color: var(--td-accent); }
.td-compare__body {
  font-family: 'EmagBody', serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--td-text-primary);
  flex-grow: 1;
}
.td-compare__verdict {
  font-family: 'EmagDisplay', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--td-text-secondary);
  padding-top: 1rem;
  border-top: 1px solid var(--td-border);
  font-style: italic;
}
.td-compare__card--master .td-compare__verdict { color: var(--td-text-primary); }
.td-compare__sep {
  align-self: center;
  font-family: 'EmagMono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--td-text-muted);
  padding: 0 1rem;
}

/* ============================================================
   13. QUOTE VARIANTS (VINTAGE FILM REDESIGN)
   ============================================================ */
.td-quote {
  max-width: var(--td-w-text);
  margin: 4rem auto;
  position: relative;
}

/* ---------- V1: VINTAGE POLAROID ---------- */
.td-quote--polaroid .td-quote__polaroid {
  position: relative;
  background: var(--td-paper-cream);
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(212, 154, 74, 0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 80%, rgba(107, 94, 72, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 60% 35%, rgba(212, 154, 74, 0.08) 0%, transparent 60%);
  padding: 1.5rem 1.5rem 2.5rem;
  border-radius: 3px;
  transform: rotate(-1.2deg);
  box-shadow:
    0 1px 1px rgba(0,0,0,0.5),
    0 4px 8px rgba(0,0,0,0.3),
    0 20px 50px rgba(0,0,0,0.55),
    inset 0 0 60px rgba(212, 154, 74, 0.1);
  transition: transform 0.5s var(--td-ease-overshoot);
  max-width: 32rem;
  margin: 0 auto;
}
/* Grain texture overlay */
.td-quote--polaroid .td-quote__polaroid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.13 0 0 0 0 0.1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.4;
  pointer-events: none;
  border-radius: inherit;
}
.td-quote--polaroid .td-quote__polaroid:hover { transform: rotate(0deg) scale(1.015); }
.td-quote__polaroid-frame {
  display: block;
  position: relative;
  z-index: 1;
}
.td-quote__avatar {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #FE5000, #c84000);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'EmagDisplay', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.td-quote__avatar--qa { background: linear-gradient(135deg, #4a90e2, #2c5c8f); }
.td-quote__avatar--st { background: linear-gradient(135deg, #8b7355, #4a3826); }
.td-quote--polaroid .td-quote__body {
  font-family: 'EmagBody', Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--td-paper-ink);
  font-weight: 400;
  position: relative;
  font-style: italic;
  padding-bottom: 0.5rem;
}
.td-quote--polaroid .td-quote__body strong {
  color: #b8420a;
  font-weight: 700;
  font-style: normal;
}
.td-quote__mark {
  font-family: 'EmagDisplay', serif;
  font-size: 1.8rem;
  color: var(--td-film-amber);
  line-height: 0;
  font-weight: 700;
  margin-right: 0.15rem;
  vertical-align: -0.3em;
}
.td-quote__mark--end { margin-left: 0.1rem; margin-right: 0; }
.td-quote__cite {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(42, 36, 28, 0.25);
}
.td-quote--polaroid .td-quote__cite {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.td-quote__cite-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  line-height: 1.2;
}
.td-quote--polaroid .td-quote__signature {
  font-family: 'EmagDisplay', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--td-paper-ink);
  letter-spacing: -0.01em;
  font-style: italic;
  transform: rotate(-1.5deg);
  display: inline-block;
  transform-origin: left center;
}
.td-quote--polaroid .td-quote__role {
  display: block;
  font-family: 'EmagMono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--td-paper-faded);
  text-transform: uppercase;
}
/* Masking tape pieces */
.td-quote__tape {
  position: absolute;
  width: 4.5rem;
  height: 1.4rem;
  background: rgba(212, 154, 74, 0.42);
  background-image: linear-gradient(180deg,
    rgba(255,255,255,0.15) 0%,
    transparent 30%,
    rgba(0,0,0,0.1) 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.td-quote__tape--tl {
  top: -0.5rem; left: -1.2rem;
  transform: rotate(-25deg);
}
.td-quote__tape--br {
  bottom: -0.4rem; right: -1rem;
  transform: rotate(20deg);
  width: 4rem;
}

/* ---------- V2: CAMERA LCD ---------- */
.td-quote--lcd .td-quote__lcd {
  background: linear-gradient(180deg, #0d0d0f 0%, #16161a 100%);
  border: 1px solid var(--td-border-strong);
  border-radius: 0.625rem;
  padding: 1.5rem 1.75rem;
  position: relative;
  font-family: 'EmagMono', monospace;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.td-quote__lcd-top {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--td-text-muted);
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--td-border);
  margin-bottom: 1.25rem;
}
.td-quote__lcd-rec { color: #ef4444; font-weight: 500; animation: td-blink 1.6s ease infinite; }
.td-quote__lcd-time { color: var(--td-text-secondary); }
.td-quote__lcd-bat { margin-left: auto; color: var(--td-accent); }
.td-quote--lcd .td-quote__body {
  font-family: 'EmagBody', serif;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--td-text-primary);
  margin-bottom: 1.5rem;
}
.td-quote--lcd .td-quote__body strong { color: var(--td-accent); font-weight: 700; }
.td-quote__lcd-exif {
  display: flex;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--td-accent);
  padding: 0.6rem 0.75rem;
  background: rgba(254, 80, 0, 0.08);
  border-radius: 4px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.td-quote--lcd .td-quote__cite {
  border-top: 1px dashed var(--td-border);
  padding-top: 0.75rem;
  margin-top: 0.5rem;
}
.td-quote--lcd .td-quote__name {
  display: block;
  font-family: 'EmagDisplay', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--td-text-primary);
}
.td-quote--lcd .td-quote__role {
  display: block;
  font-family: 'EmagMono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--td-text-muted);
  margin-top: 0.15rem;
  text-transform: uppercase;
}

/* ---------- V3: VINTAGE FILM NEGATIVE STRIP ---------- */
.td-quote--film .td-quote__film {
  background:
    linear-gradient(180deg, #1a1410 0%, #0d0a08 100%);
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(212, 154, 74, 0.08) 0%, transparent 50%);
  border: 1px solid rgba(212, 154, 74, 0.25);
  position: relative;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), inset 0 0 60px rgba(212, 154, 74, 0.03);
}
.td-quote--film .td-quote__film::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.83 0 0 0 0 0.6 0 0 0 0 0.29 0 0 0 0.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.4;
  pointer-events: none;
}
.td-quote__film-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1.25rem;
  background: rgba(0,0,0,0.4);
  border-bottom: 1px solid rgba(212, 154, 74, 0.15);
  font-family: 'EmagMono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.td-quote__film-frame { color: var(--td-film-amber); font-weight: 500; }
.td-quote__film-iso { color: var(--td-text-muted); }
.td-quote__film-sprocket {
  height: 1.5rem;
  background-image:
    radial-gradient(ellipse 0.45rem 0.4rem at 1rem center, #0a0a0a 99%, transparent 100%);
  background-size: 1.6rem 100%;
  background-repeat: repeat-x;
  background-position: 0.5rem center;
  background-color: rgba(212, 154, 74, 0.08);
}
.td-quote__film-sprocket--top { border-bottom: 1px solid rgba(212, 154, 74, 0.12); }
.td-quote__film-sprocket--bot { border-top: 1px solid rgba(212, 154, 74, 0.12); }
.td-quote__film-content {
  padding: 2.25rem 2.5rem;
  position: relative;
}
.td-quote--film .td-quote__body {
  font-family: 'EmagDisplay', serif;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--td-paper-cream);
  letter-spacing: -0.01em;
  font-weight: 500;
  margin-bottom: 1.5rem;
  font-style: italic;
}
.td-quote--film .td-quote__body strong {
  color: var(--td-film-amber);
  font-style: normal;
  font-weight: 700;
}
.td-quote--film .td-quote__name {
  display: block;
  font-family: 'EmagMono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--td-text-secondary);
}
.td-quote--film .td-quote__role {
  display: block;
  font-family: 'EmagMono', monospace;
  font-size: 0.65rem;
  color: var(--td-text-muted);
  letter-spacing: 0.12em;
  margin-top: 0.3rem;
  text-transform: uppercase;
}
.td-quote__film-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1.25rem;
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(212, 154, 74, 0.15);
  font-family: 'EmagMono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--td-text-muted);
}
.td-quote__film-stamp {
  color: #ef4444;
  border: 1.5px solid #ef4444;
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  transform: rotate(-2deg);
  letter-spacing: 0.18em;
  font-weight: 500;
}

/* Quote stack */
.td-quote-stack {
  max-width: var(--td-w-wide);
  margin: 3rem auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  position: relative;
}
.td-quote-stack .td-quote { margin: 0; max-width: none; }
.td-quote--stack-1 .td-quote__polaroid { transform: rotate(-2deg); }
.td-quote--stack-2 .td-quote__polaroid { transform: rotate(1.5deg); margin-top: 2rem; }

/* ============================================================
   14. FILM ROLL (horizontal pin scroll)
   ============================================================ */
.td-filmroll {
  position: relative;
  margin: 4rem 0;
  background: linear-gradient(180deg, #0a0a0a 0%, #0d0d0d 100%);
}
.td-filmroll__head {
  max-width: var(--td-w-max);
  margin: 0 auto 1.5rem;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'EmagMono', monospace;
}
.td-filmroll__label { font-size: 0.75rem; letter-spacing: 0.18em; color: var(--td-accent); }
.td-filmroll__hint { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--td-text-muted); }
.td-filmroll__viewport { overflow: hidden; position: relative; }
.td-filmroll__track {
  display: flex;
  gap: 1rem;
  padding: 2.5rem 1.5rem;
  width: max-content;
  position: relative;
}
.td-filmroll__sprocket {
  position: absolute;
  left: 0; right: 0;
  height: 1.5rem;
  background-image: radial-gradient(circle 0.4rem at 1rem center, var(--td-bg-primary) 99%, transparent 100%);
  background-size: 2rem 100%;
  background-repeat: repeat-x;
  z-index: 2;
  pointer-events: none;
}
.td-filmroll__sprocket--top { top: 0; }
.td-filmroll__sprocket--bot { bottom: 0; }
.td-filmroll__frame {
  width: 22rem;
  background: var(--td-bg-surface);
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius-tile);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
}
.td-filmroll__frame img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--td-radius-small);
  cursor: zoom-in;
  margin-top: auto;
}
.td-filmroll__frame-num {
  font-family: 'EmagMono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--td-accent);
}
.td-filmroll__frame-name {
  font-family: 'EmagDisplay', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--td-text-primary);
  line-height: 1.05;
}
.td-filmroll__frame-desc {
  font-family: 'EmagBody', serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--td-text-secondary);
}

/* ============================================================
   15. CASE SECTION
   ============================================================ */
.td-case {
  max-width: var(--td-w-max);
  margin: 4rem auto;
  padding-top: 3rem;
  position: relative;
}
.td-case + .td-case { border-top: 1px solid var(--td-border); }
.td-case__head {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding: 0 1.5rem;
}
.td-case__num {
  font-family: 'EmagDisplay', sans-serif;
  font-weight: 700;
  font-size: 3.5rem;
  color: var(--td-accent);
  line-height: 1;
  letter-spacing: -0.04em;
}
.td-case__title {
  font-family: 'EmagMono', monospace;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: var(--td-text-primary);
  font-weight: 500;
}

/* ============================================================
   16. LENS ROLL
   ============================================================ */
.td-lensroll { position: relative; margin: 4rem 0; }
.td-lensroll__head {
  max-width: var(--td-w-max);
  margin: 0 auto 1.5rem;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  font-family: 'EmagMono', monospace;
}
.td-lensroll__label { font-size: 0.75rem; letter-spacing: 0.18em; color: var(--td-accent); }
.td-lensroll__hint { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--td-text-muted); }
.td-lensroll__viewport { overflow: hidden; }
.td-lensroll__track {
  display: flex;
  gap: 2rem;
  padding: 2rem 1.5rem;
  width: max-content;
}
.td-lens-card {
  width: 36rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius-card);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.td-lens-card--tele {
  border-color: var(--td-accent);
  box-shadow: 0 0 0 1px var(--td-accent), 0 20px 60px var(--td-accent-glow);
}
.td-lens-card__chip {
  display: inline-flex;
  align-self: flex-start;
  font-family: 'EmagMono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--td-text-secondary);
  background: rgba(255,255,255,0.06);
  padding: 0.35rem 0.7rem;
  border-radius: var(--td-radius-pill);
  border: 1px solid var(--td-border);
}
.td-lens-card__chip--ultra { background: var(--td-accent); color: #fff; border-color: var(--td-accent); }
.td-lens-card__focal {
  font-family: 'EmagDisplay', sans-serif;
  font-weight: 700;
  font-size: clamp(5rem, 10vw, 8rem);
  line-height: 1;
  color: var(--td-text-primary);
  letter-spacing: -0.05em;
  margin: 0.5rem 0;
}
.td-lens-card--tele .td-lens-card__focal { color: var(--td-accent); }
.td-lens-card__focal small {
  font-size: 0.3em;
  color: var(--td-text-secondary);
  font-weight: 700;
  letter-spacing: 0;
  margin-left: 0.2rem;
}
.td-lens-card__spec {
  font-family: 'EmagMono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--td-text-secondary);
}
.td-lens-card__role {
  font-family: 'EmagDisplay', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--td-text-primary);
  letter-spacing: -0.01em;
}
.td-lens-card__desc {
  font-family: 'EmagBody', serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--td-text-secondary);
}
.td-lens-card__diagram {
  width: 100%;
  margin-top: auto;
  padding: 1.5rem 0;
  color: var(--td-text-muted);
  opacity: 0.5;
}
.td-lens-card--tele .td-lens-card__diagram { color: var(--td-accent); opacity: 0.7; }
.td-lens-card__hint {
  font-family: 'EmagMono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--td-text-muted);
  text-align: center;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--td-border);
  text-transform: uppercase;
}
.td-lens-card--tele .td-lens-card__hint { color: var(--td-accent); border-top-color: rgba(254,80,0,0.3); }

/* ============================================================
   17. CLOSING
   ============================================================ */
.td-sec-closing { padding-top: 8rem; padding-bottom: 6rem; }
.td-closing__quote {
  max-width: var(--td-w-wide);
  margin: 4rem auto;
  text-align: center;
  position: relative;
  padding: 4rem 1rem;
}
.td-closing__quote::before, .td-closing__quote::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 1px;
  background: var(--td-accent);
}
.td-closing__quote::before { top: 0; }
.td-closing__quote::after { bottom: 0; }
.td-closing__kicker {
  font-family: 'EmagMono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--td-accent);
  margin-bottom: 2rem;
  font-weight: 500;
}
.td-closing__body {
  font-family: 'EmagBody', serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.4;
  color: var(--td-text-primary);
  letter-spacing: -0.01em;
  font-style: italic;
  margin-bottom: 2rem;
  position: relative;
}
.td-closing__body strong { color: var(--td-accent); font-style: normal; font-weight: 700; }
.td-closing__mark {
  font-size: 1.4em;
  color: var(--td-accent);
  font-style: normal;
  font-weight: 700;
  margin-right: 0.15rem;
  vertical-align: -0.15em;
  font-family: 'EmagDisplay', serif;
}
.td-closing__mark--end { margin-left: 0.1rem; margin-right: 0; }
.td-closing__cite {
  font-family: 'EmagMono', monospace;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--td-text-secondary);
  text-transform: uppercase;
}

.td-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: var(--td-w-wide);
  margin: 4rem auto;
}
.td-cta__card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius-card);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.4s var(--td-ease-overshoot), border-color 0.3s var(--td-ease-soft);
}
.td-cta__card:hover { transform: translateY(-4px); border-color: var(--td-accent); }
.td-cta__card--ultra { border-color: rgba(254, 80, 0, 0.4); box-shadow: 0 20px 60px var(--td-accent-glow); }
.td-cta__chip {
  font-family: 'EmagMono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--td-accent);
  align-self: flex-start;
  text-transform: uppercase;
}
.td-cta__name {
  font-family: 'EmagDisplay', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--td-text-primary);
  letter-spacing: -0.02em;
}
.td-cta__feat { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0; }
.td-cta__feat li {
  font-family: 'EmagBody', serif;
  font-size: 0.95rem;
  color: var(--td-text-secondary);
  padding-left: 1.25rem;
  position: relative;
}
.td-cta__feat li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65rem;
  width: 0.45rem; height: 0.45rem;
  background: var(--td-accent);
  border-radius: 50%;
}
.td-cta__hint {
  font-family: 'EmagBody', serif;
  font-size: 0.875rem;
  color: var(--td-text-muted);
  font-style: italic;
  padding-top: 1rem;
  border-top: 1px dashed var(--td-border);
  margin-top: auto;
}

.td-footer {
  max-width: var(--td-w-max);
  margin: 4rem auto 0;
  padding: 3rem 1.5rem 1rem;
  border-top: 1px solid var(--td-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.td-footer__credit {
  font-family: 'EmagBody', serif;
  font-size: 0.85rem;
  color: var(--td-text-muted);
  font-style: italic;
  flex: 1;
  min-width: 14rem;
  text-align: right;
}
.td-footer__credit strong { color: var(--td-text-secondary); font-weight: 700; }

/* ============================================================
   18. FIXED UI — Progress · HUD · Byline
   ============================================================ */
.td-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 1000;
  pointer-events: none;
  transition: opacity 0.3s var(--td-ease-soft);
}
.td-progress--hidden { opacity: 0; }
.td-progress__track {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
  overflow: hidden;
}
.td-progress__fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--td-accent) 0%, #ff8040 100%);
  box-shadow: 0 0 8px var(--td-accent-glow);
  transition: width 0.1s linear;
}
.td-progress__perf {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(circle 1px at 0.5rem center, rgba(245,245,247,0.4) 100%, transparent 100%);
  background-size: 1rem 100%;
  background-repeat: repeat-x;
  pointer-events: none;
}

.td-hud {
  position: fixed;
  top: 1.25rem; left: 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: 'EmagMono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--td-text-primary);
  background: rgba(10,10,10,0.7);
  -webkit-backdrop-filter: blur(0.75rem);
  backdrop-filter: blur(0.75rem);
  border: 1px solid var(--td-border-strong);
  padding: 0.5rem 0.85rem;
  border-radius: var(--td-radius-badge);
  z-index: 998;
  transition: opacity 0.3s var(--td-ease-soft), transform 0.3s var(--td-ease-soft);
}
.td-hud--hidden { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.td-hud__label { color: var(--td-text-muted); }
.td-hud__num { color: var(--td-accent); font-weight: 500; font-size: 0.9rem; }
.td-hud__sep, .td-hud__total { color: var(--td-text-muted); }
.td-hud__divider { color: var(--td-text-muted); margin: 0 0.2rem; }
.td-hud__mode { color: var(--td-accent); font-weight: 500; }

.td-byline {
  position: fixed;
  bottom: 1.5rem; left: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(10,10,10,0.85);
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
  border: 1px solid var(--td-border-strong);
  padding: 0.6rem 0.85rem 0.6rem 0.6rem;
  border-radius: var(--td-radius-pill);
  z-index: 997;
  font-size: 0.8rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s var(--td-ease-overshoot), transform 0.4s var(--td-ease-overshoot);
  max-width: 18rem;
}
.td-byline--visible { opacity: 1; transform: translateY(0); }
.td-byline[hidden] { display: none; }
.td-byline__avatar {
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--td-accent), #c84000);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'EmagDisplay', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}
.td-byline__avatar--qa { background: linear-gradient(135deg, #4a90e2, #2c5c8f); }
.td-byline__avatar--st { background: linear-gradient(135deg, #8b7355, #4a3826); }
.td-byline__meta { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.2; }
.td-byline__name {
  font-family: 'EmagDisplay', sans-serif;
  font-weight: 700;
  color: var(--td-text-primary);
  font-size: 0.85rem;
}
.td-byline__role {
  font-family: 'EmagMono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--td-text-muted);
  text-transform: uppercase;
}

/* ============================================================
   19. APERTURE WHEEL TOC — Hasselblad shutter dial aesthetic
   ============================================================ */
/* Vertical list TOC — elegant editorial style */
.td-toc {
  position: fixed;
  top: 50%; right: 2rem;
  transform: translateY(-50%);
  z-index: 999;
  width: auto;
  height: auto;
}
.td-toc--desktop { display: block; padding: 0.5rem 0; }
.td-toc__svg, .td-toc__center { display: none; }
.td-toc__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
  position: relative;
  align-items: flex-end;
}
.td-toc__list li {
  position: relative;
  display: block;
}
.td-toc__blade {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  padding: 0.2rem 0;
  position: relative;
  cursor: pointer;
  font-family: 'EmagMono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--td-text-muted);
  transition: color 0.25s var(--td-ease-soft);
}
/* Label hidden by default — only the dot shows on the right */
.td-toc__blade span {
  display: inline-block;
  opacity: 0;
  transform: translateX(0.5rem);
  transition: opacity 0.35s var(--td-ease-soft), transform 0.35s var(--td-ease-overshoot);
  pointer-events: none;
}
/* Dot indicator (right-aligned, fixed position) */
.td-toc__blade::after {
  content: '';
  display: inline-block;
  width: 1.5rem; height: 1px;
  background: rgba(255,255,255,0.3);
  flex-shrink: 0;
  transition:
    width 0.3s var(--td-ease-overshoot),
    height 0.3s var(--td-ease-overshoot),
    background 0.25s var(--td-ease-soft),
    box-shadow 0.25s var(--td-ease-soft);
}
/* Current item: short bar grows + orange glow, ALWAYS visible */
.td-toc__list li.td-toc__item--current .td-toc__blade,
.td-toc__list li:has(.td-toc__blade[aria-current="location"]) .td-toc__blade {
  color: var(--td-accent);
}
.td-toc__list li.td-toc__item--current .td-toc__blade::after,
.td-toc__list li:has(.td-toc__blade[aria-current="location"]) .td-toc__blade::after {
  width: 2.5rem; height: 2px;
  background: var(--td-accent);
  box-shadow: 0 0 8px rgba(254,80,0,0.5);
}
/* Hover blade (individual): subtle */
.td-toc__blade:hover, .td-toc__blade:focus-visible { color: var(--td-text-primary); }
.td-toc__blade:hover::after,
.td-toc__blade:focus-visible::after {
  background: var(--td-accent);
  width: 2rem;
}
/* On hover entire TOC wrapper: reveal ALL labels */
.td-toc:hover .td-toc__blade span,
.td-toc:focus-within .td-toc__blade span {
  opacity: 1;
  transform: translateX(0);
}
/* On hover wrapper: current label stays highlight orange */
.td-toc:hover .td-toc__list li.td-toc__item--current .td-toc__blade span,
.td-toc:hover .td-toc__list li:has(.td-toc__blade[aria-current="location"]) .td-toc__blade span {
  color: var(--td-accent);
  font-weight: 500;
}

.td-toc__trigger {
  display: none;
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  width: 3.25rem; height: 3.25rem;
  background: var(--td-accent);
  color: #fff;
  border-radius: 50%;
  z-index: 998;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1);
  align-items: center;
  justify-content: center;
}
.td-toc__trigger svg { width: 1.5rem; height: 1.5rem; }

.td-toc-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.td-toc-modal[aria-hidden="false"], .td-toc-modal--open { display: block; }
.td-toc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(1.25rem);
  backdrop-filter: blur(1.25rem);
}
.td-toc-modal__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.5rem;
  color: var(--td-text-primary);
  background: linear-gradient(180deg, rgba(20,20,22,0.95) 0%, rgba(10,10,10,0.95) 100%);
}
.td-toc-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}
.td-toc-modal__title {
  font-family: 'EmagMono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--td-accent);
  text-transform: uppercase;
}
.td-toc-modal__close {
  font-size: 2rem;
  color: var(--td-text-primary);
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--td-border);
}
.td-toc-modal__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-family: 'EmagDisplay', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
}
.td-toc-modal__list a {
  color: var(--td-text-primary);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--td-border);
  display: block;
  transition: color 0.2s var(--td-ease-soft), padding-left 0.2s var(--td-ease-soft);
}
.td-toc-modal__list a:hover, .td-toc-modal__list a:focus-visible { color: var(--td-accent); padding-left: 0.5rem; }

/* ============================================================
   20. CURSOR EFFECTS (desktop)
   ============================================================ */
.td-cursor-trail { position: fixed; inset: 0; pointer-events: none; z-index: 996; }
.td-af-cursor {
  position: fixed;
  width: 2rem; height: 2rem;
  pointer-events: none;
  z-index: 997;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s var(--td-ease-soft);
}
.td-af-cursor--visible { opacity: 0.7; }
.td-af-cursor span {
  position: absolute;
  width: 0.5rem; height: 0.5rem;
  border: 1.5px solid var(--td-accent);
}
.td-af-cursor__tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.td-af-cursor__tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.td-af-cursor__bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.td-af-cursor__br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ============================================================
   21. LIGHTBOX (built-in)
   ============================================================ */
.td-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.94);
  -webkit-backdrop-filter: blur(1.25rem);
  backdrop-filter: blur(1.25rem);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.td-lightbox[hidden] { display: none; }
.td-lightbox__backdrop { position: absolute; inset: 0; }
.td-lightbox__figure { max-width: 92vw; max-height: 88vh; z-index: 1; position: relative; }
.td-lightbox__img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; display: block; border-radius: 0.5rem; }
.td-lightbox__close, .td-lightbox__prev, .td-lightbox__next {
  position: absolute;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--td-border-strong);
  color: #fff;
  cursor: pointer;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'EmagDisplay', sans-serif;
  transition: background 0.2s var(--td-ease-soft);
}
.td-lightbox__close:hover, .td-lightbox__prev:hover, .td-lightbox__next:hover { background: var(--td-accent); }
.td-lightbox__close { top: 1.5rem; right: 1.5rem; font-size: 1.75rem; }
.td-lightbox__prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.td-lightbox__next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.td-lightbox__counter {
  position: absolute;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  color: var(--td-accent);
  font-family: 'EmagMono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  z-index: 2;
}

/* ============================================================
   22. REVEAL ANIMATION CLASSES
   ============================================================ */
[data-td-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--td-ease-reveal), transform 0.7s var(--td-ease-reveal);
}
[data-td-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.td-section__title.splitting .char,
.td-hero__title.splitting .word,
.td-closing__body.splitting .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.3em);
  transition: opacity 0.6s var(--td-ease-reveal), transform 0.6s var(--td-ease-reveal);
  transition-delay: calc(var(--char-index, var(--word-index, 0)) * 30ms);
}
.td-section__title.splitting.is-visible .char,
.td-hero__title.splitting.is-visible .word,
.td-closing__body.splitting.is-visible .word {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   23. RESPONSIVE — Mobile
   ============================================================ */
/* ===== TABLET + MOBILE (≤1024px) — pin disabled, enable native swipe ===== */
@media (max-width: 1024px) {
  .td-toc--desktop { display: none; }
  .td-toc__trigger { display: flex; }
  .td-hud { display: none; }
  .td-cursor-trail, .td-af-cursor { display: none; }
  /* Horizontal swipe instead of pinned scroll */
  .td-filmroll__viewport,
  .td-lensroll__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .td-filmroll__viewport::-webkit-scrollbar,
  .td-lensroll__viewport::-webkit-scrollbar { display: none; }
  .td-filmroll__frame, .td-lens-card { scroll-snap-align: center; }
}

/* ===== MOBILE (≤640px) — main responsive breakpoint ===== */
@media (max-width: 640px) {
  .td-emag__wrapper {
    font-size: 1.2rem;
    background-size: 320px 320px;
  }
  .td-section { padding: 3.5rem 1.1rem; }
  .td-section__head { margin-bottom: 1.75rem; }
  .td-section__num { font-size: 5rem; top: 1.5rem; right: 0.75rem; }
  .td-section__kicker { font-size: 0.65rem; letter-spacing: 0.14em; }
  .td-section__title { font-size: clamp(1.5rem, 6vw, 1.9rem); }

  /* Hero — full bleed image with centered text overlay */
  .td-sec-hero {
    padding: 0;
    min-height: 92vh;
  }
  .td-hero__inner {
    padding: 5rem 1.25rem 3rem;
    max-width: 100%;
    min-height: 92vh;
  }
  .td-hero__title { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .td-hero__title-accent { font-size: 0.95em; }
  .td-hero__sapo { font-size: 0.95rem; line-height: 1.6; }
  .td-hero__kicker { font-size: 0.6rem; }
  .td-hero__img { object-position: center center; }
  .td-hero__figure::after {
    background: radial-gradient(ellipse at center,
      rgba(10,10,10,0.65) 0%,
      rgba(10,10,10,0.88) 100%);
  }

  /* Heritage timeline — horizontal scrollable on mobile (compact) */
  .td-heritage-mini {
    flex-direction: column;
    gap: 1rem;
    max-width: 100%;
    text-align: left;
  }
  .td-heritage-mini::before { display: none; }
  .td-heritage-mini__item {
    padding-top: 0; padding-left: 1.75rem;
    min-width: 0;
    text-align: left;
    flex: 0 0 auto;
  }
  .td-heritage-mini__item::before {
    top: 0.15rem; left: 0;
    margin-left: 0;
  }
  .td-heritage-mini__year { font-size: 1.25rem; }
  .td-heritage-mini__label { font-size: 0.7rem; }
  .td-scroll-prompt { display: none; }

  /* Body text — slightly tighter */
  .td-paragraph { font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.25rem; }
  .td-heading { font-size: 1.25rem; line-height: 1.35; }
  .td-text-col { padding-bottom: 1.5rem; }

  /* Compare cards — stack vertical */
  .td-compare { grid-template-columns: 1fr; gap: 0.85rem; }
  .td-compare__sep { display: none; }
  .td-compare__card { padding: 1.5rem 1.25rem; }

  /* Diptych + grid */
  .td-diptych, .td-grid-album-2x2 { grid-template-columns: 1fr; gap: 0.4rem; }
  .td-grid-album { grid-template-columns: 1fr 1fr; gap: 0.35rem; }

  /* Marquee — slightly smaller */
  .td-marquee { margin: 2.5rem auto; padding: 1rem 0; }
  .td-marquee__track { font-size: 0.75rem; }
  .td-marquee__group { gap: 1rem; padding-right: 1rem; }

  /* Big number */
  .td-bignum { padding: 2rem 1rem; margin: 2.5rem auto; }
  .td-bignum__num { font-size: clamp(4.5rem, 22vw, 7rem); }
  .td-bignum__caption { font-size: 1rem; }

  /* Horizontal pin sections → native horizontal swipe with snap */
  .td-filmroll__viewport,
  .td-lensroll__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .td-filmroll__viewport::-webkit-scrollbar,
  .td-lensroll__viewport::-webkit-scrollbar { display: none; }
  .td-filmroll__track, .td-lensroll__track {
    padding: 1.5rem 1.25rem;
    gap: 0.85rem;
  }
  .td-filmroll__frame {
    width: calc(100vw - 4rem); max-width: 18rem;
    padding: 1.25rem; scroll-snap-align: center;
  }
  .td-lens-card {
    width: calc(100vw - 3rem); max-width: 22rem;
    padding: 1.5rem; scroll-snap-align: center;
  }
  .td-lens-card__focal { font-size: 4rem; }
  .td-filmroll__head, .td-lensroll__head { padding: 0 1.25rem; }
  .td-filmroll__label, .td-lensroll__label { font-size: 0.65rem; letter-spacing: 0.14em; }

  /* Case section */
  .td-case { margin: 2.5rem auto; padding-top: 2rem; }
  .td-case__head { padding: 0 0; gap: 1rem; margin-bottom: 1.5rem; }
  .td-case__num { font-size: 2.5rem; }
  .td-case__title { font-size: 0.75rem; letter-spacing: 0.14em; }

  /* EXIF strip — bottom inline */
  .td-exif {
    position: static;
    margin: 0.5rem 0 0;
    display: inline-flex;
    flex-wrap: wrap;
    font-size: 0.65rem;
  }

  /* Quote responsive */
  .td-quote { margin: 2.5rem auto; }
  .td-quote-stack { grid-template-columns: 1fr; gap: 1.25rem; }
  .td-quote--polaroid .td-quote__polaroid,
  .td-quote--stack-1 .td-quote__polaroid,
  .td-quote--stack-2 .td-quote__polaroid {
    transform: rotate(0deg); margin-top: 0;
    padding: 1.25rem 1.25rem 2rem;
  }
  .td-quote--polaroid .td-quote__body { font-size: 1rem; line-height: 1.55; }
  .td-quote--lcd .td-quote__lcd { padding: 1.25rem 1.25rem; }
  .td-quote--lcd .td-quote__body { font-size: 0.95rem; }
  .td-quote__lcd-exif { font-size: 0.65rem; }
  .td-quote--film .td-quote__film-content { padding: 1.5rem 1.25rem; }
  .td-quote--film .td-quote__body { font-size: 1.1rem; line-height: 1.45; }
  .td-quote__tape--tl { width: 3.5rem; top: -0.4rem; left: -0.7rem; }
  .td-quote__tape--br { width: 3rem; bottom: -0.3rem; right: -0.5rem; }

  /* Closing */
  .td-closing__quote { padding: 2.5rem 0.5rem; }
  .td-closing__body { font-size: clamp(1.15rem, 5vw, 1.5rem); }
  .td-cta { grid-template-columns: 1fr; gap: 1rem; }
  .td-cta__card { padding: 1.75rem 1.5rem; }
  .td-cta__name { font-size: 1.4rem; }

  /* Footer */
  .td-footer { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 2rem 1.25rem 1rem; }
  .td-footer__credit { text-align: left; }

  /* Fixed UI */
  .td-toc--desktop { display: none; }
  .td-toc__trigger { display: flex; }
  .td-hud { display: none; }
  .td-byline { left: 50%; right: auto; bottom: 1rem; transform: translateX(-50%) translateY(20px); max-width: 16rem; }
  .td-byline--visible { transform: translateX(-50%) translateY(0); }
  .td-progress { height: 2px; }

  /* Effects off */
  .td-cursor-trail, .td-af-cursor { display: none; }

  /* Section number giant — make it less intrusive */
  .td-section__num { opacity: 0.5; }

  /* TOC modal: full-screen list */
  .td-toc-modal__list { font-size: 1.25rem; gap: 1.25rem; }
}

/* Extra small phones (≤375px) */
@media (max-width: 375px) {
  .td-section { padding: 3rem 1rem; }
  .td-hero__title { font-size: 1.7rem; }
  .td-section__title { font-size: 1.45rem; }
  .td-lens-card__focal { font-size: 3.5rem; }
  .td-bignum__num { font-size: 4.5rem; }
}

/* ============================================================
   24. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .td-marquee__track { animation: none; }
  .td-quote--polaroid .td-quote__polaroid:hover { transform: rotate(-1.2deg); }
  .td-cta__card:hover { transform: none; }
  .td-section__title.splitting .char,
  .td-hero__title.splitting .word,
  .td-closing__body.splitting .word { opacity: 1; transform: none; transition: none; }
  [data-td-reveal] { opacity: 1; transform: none; }
  .td-cursor-trail, .td-af-cursor { display: none; }
  .td-toc__blade { transition: none; }
  .td-scroll-prompt__line { animation: none; opacity: 0.5; }
  .td-quote__lcd-rec { animation: none; }
}

@media (prefers-contrast: more) {
  .td-emag__wrapper {
    --td-border: rgba(255,255,255,0.4);
    --td-border-strong: rgba(255,255,255,0.6);
    --td-text-secondary: rgba(245,245,247,0.9);
  }
  .td-quote--lcd .td-quote__lcd,
  .td-compare__card,
  .td-cta__card,
  .td-lens-card { border-width: 2px; }
}
@media (prefers-reduced-transparency: reduce) {
  .td-progress__track, .td-hud, .td-byline,
  .td-toc__center, .td-toc-modal__backdrop, .td-exif {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(0,0,0,0.95);
  }
}