/* /this-day/ page: This Day's own brand inside the portfolio frame.
   Tokens from "This Day Brand Sheet Finalized" (Sept 2026). Loaded only on this page. */

.page-thisday {
  --td-ink: #1C1917;
  --td-olive: #5C6B3A;
  --td-sand: #B8933A;
  --td-paper: #F5F3EF;
  --td-glass: #FAFAF9;
  --td-line: #D9D6D0;
  --td-body: #44403C;
  --td-muted: #78716C;
  --td-serif: 'Playfair Display', Georgia, serif;
  --td-sans: 'Inter', system-ui, sans-serif;
  background: var(--td-paper);
}
.page-thisday .nav, .page-thisday .footer { border-color: var(--td-line); }

.td-page { color: var(--td-ink); font-family: var(--td-sans); }
.td-wrap { max-width: 1180px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.td-eyebrow { margin: 0; font: 600 11px/1.2 var(--td-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--td-olive); }
.td-h2 { margin: 12px 0 0; font: 800 clamp(32px, 4.4vw, 56px)/1.06 var(--td-serif); letter-spacing: -0.01em; color: var(--td-ink); text-wrap: balance; }
.td-h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 0 20px; font: 800 24px/1.2 var(--td-serif); color: var(--td-ink); }
.td-h3 span { font: 500 13px/1 var(--td-sans); color: var(--td-muted); }

/* Wordmark: Playfair 800 with the hand kerning set inline on each letter */
.tdw { display: inline-flex; font-family: var(--td-serif); font-weight: 800; line-height: 1; font-kerning: normal; color: inherit; }

/* Hero: icon first */
.td-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; padding: 96px var(--gutter) 104px; border-bottom: 1px solid var(--td-line); }
.td-hero__badge { width: clamp(120px, 14vw, 168px); height: auto; }
.td-hero__title { margin: 0; font-size: clamp(64px, 11vw, 148px); color: var(--td-ink); }
.td-hero__lede { margin: 0; max-width: 560px; font: 400 18px/1.55 var(--td-sans); color: #57534E; text-wrap: pretty; }
.td-hero__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin: 4px 0 0; }
.td-hero__links a, .td-page a { color: var(--td-olive); font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.td-hero__links a:hover { color: var(--td-ink); }

/* Story */
.td-story { padding-top: 96px; }
.td-story__intro { margin: 0; max-width: 860px; font: 800 clamp(24px, 2.6vw, 32px)/1.3 var(--td-serif); color: var(--td-ink); text-wrap: pretty; }
.td-story__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 56px; }
.td-story__cols p { margin: 14px 0 0; font: 400 17px/1.65 var(--td-sans); color: var(--td-body); }

.td-act { padding-top: 120px; }
.td-act__lede { margin: 16px 0 0; max-width: 620px; font: 400 17px/1.65 var(--td-sans); color: var(--td-body); text-wrap: pretty; }

/* Anatomy: the issue scrolls inside a sticky frame (public/this-day.js) */
.td-anat { position: relative; height: 300vh; margin-top: 40px; }
.td-anat__stage { position: sticky; top: 40px; height: calc(100vh - 80px); max-height: 760px; display: flex; gap: 24px 48px; align-items: stretch; }
.td-anat__frame { flex: 1 1 300px; min-height: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--td-line); background: #fff; box-shadow: 0 10px 30px rgba(28, 25, 23, .08); }
.td-anat__frame img { display: block; width: 100%; height: auto; will-change: transform; }
.td-anat__list { flex: 1 1 280px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; }
.td-anat__list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 20px 0; border-top: 1px solid var(--td-line); opacity: .35; transition: opacity .35s; }
.td-anat__list li:last-child { border-bottom: 1px solid var(--td-line); }
.td-anat__list li.is-active { opacity: 1; }
.td-anat__num { font: 800 22px/1 var(--td-serif); color: var(--td-sand); }
.td-anat__list h3 { margin: 0; font: 800 21px/1.2 var(--td-serif); }
.td-anat__list p { margin: 6px 0 0; font: 400 15px/1.55 var(--td-sans); color: #57534E; }

.td-inbox { margin: 64px auto 0; max-width: 900px; }
.td-inbox img { width: 100%; height: auto; border-radius: 6px; background: var(--td-olive); }
.td-inbox figcaption { margin-top: 10px; font: 500 13px/1.4 var(--td-sans); color: var(--td-muted); }

/* Brand */
.td-panel { background: var(--td-glass); border: 1px solid var(--td-line); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.td-panel--white { background: #fff; border-color: transparent; }
.td-panel--olive { background: var(--td-olive); border-color: transparent; }
.td-panel--tall { min-height: clamp(300px, 34vw, 480px); }

.td-kern { flex-direction: column; gap: 28px; margin-top: 48px; padding: clamp(40px, 7vw, 96px) 24px; }
.td-kern__row { align-items: center; font-size: clamp(56px, 11vw, 148px); color: var(--td-ink); }
.td-kern__guide { width: 1px; flex: 0 0 1px; height: 1.3em; background: var(--td-sand); opacity: 0; }
.td-kern__caption { margin: 0; min-height: 42px; max-width: 460px; text-align: center; font: 500 13px/1.5 var(--td-sans); color: var(--td-muted); }

.td-sheet { display: flex; flex-direction: column; gap: 48px; margin-top: 64px; }
.td-spec { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.td-spec__label { margin: 0; font: 500 12px/1 var(--td-sans); letter-spacing: .14em; text-transform: uppercase; color: #6B675E; }
.td-spec__note { margin: 0; font: 400 13px/1.6 var(--td-sans); color: #4A473F; }
.td-spec-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.td-panel--wm { min-height: clamp(220px, 26vw, 360px); overflow: hidden; }
.td-wm-xl { font-size: clamp(64px, 12vw, 176px); color: var(--td-ink); }
.td-lockup-h { display: flex; align-items: center; gap: 0.25em; font-size: clamp(44px, 8.5vw, 128px); color: var(--td-ink); padding: clamp(40px, 6vw, 80px) 16px; }
.td-lockup-h__badge { height: 1.13em; width: auto; transform: translateY(0.03em); }
.td-lockup-v { display: flex; flex-direction: column; align-items: center; gap: 0.22em; font-size: clamp(48px, 7vw, 104px); color: var(--td-ink); }
.td-lockup-v .tdw { padding-left: 0.02em; }
.td-lockup-v__icon { height: 0.66em; width: auto; }
.td-lockup-v--paper { color: var(--td-glass); }

.td-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.td-badges figure { margin: 0; flex-direction: column; gap: 22px; padding: 40px 24px; text-align: center; }
.td-badge-lg { width: min(220px, 70%); height: auto; overflow: visible; }
.td-badges figcaption { font: 400 13px/1.5 var(--td-sans); color: #4A473F; max-width: 260px; }
.td-badges strong { display: block; margin-bottom: 2px; font: 800 17px/1.2 var(--td-serif); color: var(--td-ink); }

.td-colors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.td-colors li { display: flex; flex-direction: column; gap: 10px; font: 400 13px/1.3 var(--td-sans); color: var(--td-body); }
.td-colors strong { color: var(--td-ink); font-weight: 600; margin-right: 4px; }
.td-colors__chip { height: 96px; border-radius: 6px; border: 1px solid var(--td-line); }

/* Credits + reel */
.td-credits dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 20px 48px; margin: 0; padding-top: 32px; border-top: 1px solid var(--td-line); }
.td-credits dt { font: 500 12px/1.4 var(--td-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--td-muted); }
.td-credits dd { margin: 4px 0 0; font: 800 18px/1.3 var(--td-serif); }
.td-reel .yt { border-radius: 6px; }
.td-reel__frame { aspect-ratio: 16/9; background: var(--td-paper); border: 1px solid var(--td-line); }
.td-reel__poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.22em; font-size: clamp(40px, 7vw, 96px); color: var(--td-ink); background: radial-gradient(ellipse at center, var(--td-glass) 0%, var(--td-paper) 70%); }
.td-reel__icon { height: 0.5em; width: auto; }
.td-reel__line { margin-top: 0.3em; font: 500 clamp(12px, 1.3vw, 15px)/1 var(--td-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--td-olive); }
.td-reel .yt__play { background: var(--td-glass); color: var(--td-ink); font-family: var(--td-sans); }
.td-reel .yt__play svg { fill: var(--td-ink); }

@media (max-width: 760px) {
  .td-hero { padding-top: 64px; padding-bottom: 72px; }
  .td-story__cols, .td-spec-pair { grid-template-columns: 1fr; gap: 32px; }
  .td-act { padding-top: 88px; }
  /* Anatomy on phones: numbers in a row above the scrolling issue */
  .td-anat { height: 260vh; }
  .td-anat__stage { flex-direction: column-reverse; gap: 12px; top: 16px; height: calc(100vh - 32px); }
  .td-anat__list { flex: 0 0 auto; flex-direction: row; gap: 6px; }
  .td-anat__list li { flex: 1 1 0; grid-template-columns: 1fr; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--td-line); }
  .td-anat__list h3 { font-size: 13px; }
  .td-anat__list p { display: none; }
  .td-anat__num { font-size: 15px; }
  .td-badges { grid-template-columns: 1fr; }
  .td-colors { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .td-colors li { font-size: 11px; }
  .td-colors__chip { height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .td-anat { height: auto; }
  .td-anat__stage { position: static; height: 620px; }
  .td-anat__frame { overflow-y: auto; }
  .td-anat__list li { opacity: 1; }
}