/* IW30 timeline — styles */

/* 1. Tokens & root */

:root {
  --iw-bg:        #ffffff;
  --iw-bg-2:      #f2f2f2;
  --iw-ink:       #000000;
  --iw-ink-dim:   #5c5c5c;
  --iw-ink-faint: #8c8c8c;
  --iw-line:      rgba(0, 0, 0, 0.14);
  --iw-purple:    #6633ff;
  --iw-accent:    var(--iw-purple);

  --iw-serif: 'new-spirit', 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --iw-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --iw-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --iw-mono:  'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --iw-gutter: clamp(20px, 5vw, 80px);
  --iw-card-ratio: 1 / 1;
  /* Fallback ratio for an image with no known dimensions. */
  --iw-ar: 1.5;

  --iw-fact-bg:     #050028;   /* = --iw-intro-bg */
  --iw-fact-ink:    #ffffff;
  --iw-fact-radius: 10px;

  --iw-lb-w: min(88vw, 760px);
  --iw-lb-h: min(62svh, 620px);

  /* The intro card */
  --iw-intro-bg:        #050028;
  --iw-intro-ink:       #d1bbff;
  --iw-intro-ink-dim:   #c3aef5;
  --iw-intro-ink-faint: rgba(209, 187, 255, 0.62);

  --iw-radius: 4px;

  --iw-card-lift: 2.4;

  --iw-rail-w: 168px;

  scrollbar-gutter: stable;

  /* Scrub flag */
  --scrub: 0;
}

/* The on/off switch for the whole scroll-driven interaction */
@media (prefers-reduced-motion: no-preference) and (min-width: 360px) {
  :root { --scrub: 1; }
}

@media (orientation: landscape) and (max-height: 500px) {
  :root { --scrub: 0; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  /* Stops Android pull-to-refresh firing at the top of an era. */
  overscroll-behavior-y: none;
}

html.is-locked { overflow: hidden; }
html.is-locked body { padding-right: var(--iw-sbw, 0px); }

body {
  margin: 0;
  background: var(--iw-bg);
  color: var(--iw-ink);
  font-family: var(--iw-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* 2. Base typography / utilities */

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.iw-tl__sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--iw-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.iw-noscript {
  max-width: 46ch; margin: 32px auto 0; padding: 14px 18px;
  border: 1px solid var(--iw-line); border-radius: 10px;
  color: var(--iw-ink-dim); font-size: 14px; text-align: center;
}

/* 3. Intro & outro panels */

.iw-intro,
.iw-outro {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 80px var(--iw-gutter);
  text-align: center;
}
@supports (min-height: 100svh) {
  .iw-intro, .iw-outro { min-height: 100svh; }
}

.iw-outro { background: var(--iw-bg); }

/* The outro card */
.iw-outro.is-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--iw-intro-bg);
  color: var(--iw-intro-ink);
}

.iw-outro__confetti-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.iw-outro.is-dark .iw-outro__inner {
  position: relative;
  z-index: 1;
}

.iw-outro__logo {
  display: block;
  width: clamp(140px, 13vw, 196px);
  height: auto;
  margin: 0 auto clamp(12px, 2vh, 20px);
}

/* The closing type inverts for the dark ground. */
.iw-outro.is-dark .iw-outro__eyebrow { color: var(--iw-intro-ink-dim); }
.iw-outro.is-dark .iw-outro__title   { color: var(--iw-intro-ink); }
.iw-outro.is-dark .iw-outro__lede    { color: var(--iw-intro-ink-dim); }
.iw-outro.is-dark .iw-outro__ready   { color: var(--iw-intro-ink); }

.iw-outro.is-dark .iw-outro__cta {
  background: var(--iw-purple);
  color: #fff;
}
.iw-outro.is-dark .iw-outro__cta:hover { background: #7a4fff; }

/* The 1996 Mode button: beside Back to Start, styled like the IW30AMP
   player's purple skin. Shown the moment you reach the bottom. */
.iw-outro__actions { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.iw-xg-egg {
  display: inline-flex; flex-direction: column; align-items: stretch;
  min-width: 150px;
  background: #3d0c96;
  border: 2px solid; border-color: #f040e7 #14002f #14002f #f040e7;
  box-shadow: 0 0 0 1px #000, 0 10px 24px rgba(10, 0, 40, 0.5);
  text-decoration: none; text-align: left;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.iw-xg-egg.is-on { opacity: 1; visibility: visible; transition: opacity 0.6s ease, visibility 0s; }
.iw-xg-egg__bar {
  padding: 2px 8px;
  background: linear-gradient(90deg, #f040e7, #00ccff); color: #14002f;
  font: 700 9px/1.4 Tahoma, Verdana, sans-serif; letter-spacing: 0.22em;
}
.iw-xg-egg__lcd {
  margin: 5px; padding: 6px 10px;
  background: #14002f; color: #00f0ff;
  border: 2px solid; border-color: #14002f #f040e7 #f040e7 #14002f;
  font: 700 13px/1.2 'Lucida Console', Consolas, 'Courier New', monospace; letter-spacing: 0.08em;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.7);
}
.iw-xg-egg:hover .iw-xg-egg__lcd, .iw-xg-egg:focus-visible .iw-xg-egg__lcd { color: #fff; }

.iw-tl {
  position: relative;
  z-index: 1;
  margin-top: 100vh;
  background: var(--iw-bg);
}

/* Navy strips on the timeline's top and bottom edges, in the cards' own
   colour, so sub-pixel rounding (browser zoom, a fractional page height, a
   scroll resting a hair off 0) can never show a white seam against the
   intro or outro. White only appears once you have actually scrolled. */
.iw-tl::before,
.iw-tl::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 6px;
  z-index: 2;
  background: var(--iw-intro-bg);
  pointer-events: none;
}
.iw-tl::before { top: 0; }
.iw-tl::after  { bottom: 0; }
@supports (height: 100svh) {
  .iw-tl { margin-top: 100svh; }
}

/* The intro card */
/* The pin */
.iw-intro-pin {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  pointer-events: none;
}
@supports (height: 100svh) {
  .iw-intro-pin { height: 100svh; }
}

.iw-intro {
  position: fixed;
  inset: 0;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  background: var(--iw-intro-bg);
  color: var(--iw-intro-ink);
}


.iw-intro__confetti-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.iw-confetti {
  position: absolute;
  display: block;
  top: 0;
  will-change: transform;
  animation-name: iw-confetti-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes iw-confetti-fall {
  from {
    transform: translate3d(0, -12vh, 0) rotate(0deg);
  }
  to {
    transform: translate3d(var(--sway, 20px), 112vh, 0) rotate(var(--spin, 360deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .iw-intro__confetti-field { display: none; }
}

/* The lockup */
.iw-intro__inner {
  position: relative;
  z-index: 1;
  max-width: min(72vw, 940px);
  width: 100%;
}

.iw-outro__inner { max-width: min(92vw, 920px); }

.iw-intro__logo {
  display: block;
  width: clamp(150px, 15vw, 218px);
  height: auto;
  margin: 0 auto clamp(36px, 6vh, 74px);
}

.iw-intro__title {
  margin: 0 0 clamp(26px, 4.5vh, 52px);
  font-size: 0;          /* kills the inline-image baseline gap */
  line-height: 0;
}
.iw-intro__title img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.iw-intro__lede {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--iw-intro-ink-dim);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.55;
}

.iw-intro__scroll {
  margin: clamp(38px, 7vh, 72px) 0 0;
  font-family: var(--iw-mono);
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--iw-intro-ink-faint);
}

/* Narrow */
@media (max-width: 900px) {
  .iw-intro { padding: 72px var(--iw-gutter); }
  .iw-intro__inner { max-width: 94vw; }
  .iw-intro__confetti { height: 100%; max-width: 30vw; opacity: 0.55; }
}

@media (max-width: 560px) {
  .iw-intro__confetti { max-width: 24vw; opacity: 0.38; }
  .iw-intro__logo { width: clamp(126px, 34vw, 160px); }
  .iw-intro__lede { font-size: 0.98rem; max-width: 34ch; }
}

/* Outro type */
.iw-outro__eyebrow {
  margin: 0 0 clamp(28px, 4.5vh, 48px);
  font-size: clamp(1.1rem, 1.75vw, 1.4rem);
  color: var(--iw-ink-faint);
}

.iw-outro__ready {
  margin: clamp(24px, 4vh, 40px) 0 10px;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
}

.iw-outro__title {
  margin: 0;
  font-family: var(--iw-serif);
  font-weight: 500;
  font-size: clamp(2.3rem, 5.6vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.iw-outro__lede {
  margin: 0 auto;
  max-width: 50ch;
  line-height: 1.6;
  color: var(--iw-ink-dim);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  /* Even line lengths, so the last line is never a stray word or two. */
  text-wrap: balance;
}

@media (prefers-reduced-motion: no-preference) {
  .iw-intro__scroll { animation: iw-bob 2.4s ease-in-out infinite; }
}
@keyframes iw-bob {
  0%, 100% { transform: translateY(0);   opacity: 0.55; }
  50%      { transform: translateY(6px); opacity: 1; }
}

.iw-outro__cta {
  display: inline-block; margin-top: clamp(40px, 6vh, 60px); padding: 16px 28px;
  border-radius: 10px; background: var(--iw-ink); color: #fff;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none;
  transition: transform 0.15s ease, background 0.2s ease;
}
.iw-outro__cta:hover { background: #2e2e2e; transform: translateY(-2px); }

/* 4. Era layout — flat (default) */

.iw-tl__era {
  display: block;
  position: relative;
  padding: clamp(64px, 10vh, 120px) var(--iw-gutter);
  border-top: 1px solid var(--iw-line);
  background: var(--iw-bg);
}

.iw-tl__stage { position: relative; }

.iw-tl__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  max-width: 1500px;
  margin-inline: auto;
  width: 100%;
}

.iw-tl__copy { max-width: 46ch; }

.iw-tl__eyebrow {
  margin: 0 0 16px;
  font-family: var(--iw-mono);
  font-size: clamp(15px, 1.52vw, 18px);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--iw-accent);
}

.iw-tl__title {
  margin: 0 0 16px;
  font-family: var(--iw-serif); font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 3.35rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.iw-tl__subtitle {
  margin: 0 0 18px;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--iw-ink);
}

.iw-tl__desc {
  margin: 0;
  font-size: 0.95rem; line-height: 1.7;
  color: var(--iw-ink-dim);
}

.iw-tl__deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

.iw-tl__expand {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.iw-tl__expand:focus-visible {
  width: auto; height: auto;
  margin: 0;
  padding: 10px 16px;
  overflow: visible;
  clip-path: none;
  left: 50%; bottom: clamp(70px, 10vh, 110px);
  translate: -50% 0;
  z-index: 600;
  border-radius: 8px;
  background: var(--iw-ink); color: #fff;
  font-family: var(--iw-sans); font-size: 14px; font-weight: 500;
  outline: 2px solid #6633ff;
  outline-offset: 3px;
}

/* The approach bar */
.iw-meter {
  position: fixed;
  left: 50%;
  bottom: calc(clamp(18px, 3.4vh, 36px) + env(safe-area-inset-bottom, 0px));
  translate: -50% 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  pointer-events: none;
}
html.has-scrub .iw-meter { display: flex; }
.iw-meter.is-visible { opacity: 1; visibility: visible; }
.iw-meter.is-over-intro,
html.is-locked .iw-meter { opacity: 0; visibility: hidden; }

.iw-meter__count {
  margin: 0;
  font-family: var(--iw-mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--iw-ink-faint);
  font-variant-numeric: tabular-nums;
}

.iw-tl__approach {
  display: block;
  width: 46px;
  height: 2px;
  background: var(--iw-rule, #e6e6e6);
  overflow: hidden;
  border-radius: 1px;
}
.iw-tl__approach-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--iw-accent, var(--iw-ink));
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  /* The bar is a motion cue; without motion it is just clutter. */
  .iw-tl__approach { display: none; }
}

@media (min-width: 900px) {
  .iw-tl__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); align-items: start; }
  .iw-tl__deck { grid-column: 1 / -1; }
}

@media (min-width: 1101px) {
  html:not(.has-scrub) .iw-tl__era { padding-left: calc(var(--iw-rail-w) + var(--iw-gutter)); }
}

/* 5. Era layout — scrub (additive) */

html.has-scrub .iw-tl__era {
  padding: 0;
  border-top: 0;
  height: calc((var(--travel, 6) + 1) * 100vh);
}

html.has-scrub .iw-tl__stage {
  position: sticky;
  top: 0;
  height: 100vh;
}

html.has-scrub .iw-tl__shift {
  height: 100%;
  display: grid;
  align-content: center;
  padding: clamp(16px, 2vh, 40px) var(--iw-gutter) clamp(40px, 9vh, 110px);
  padding-left: calc(var(--iw-rail-w) + var(--iw-gutter));
}

@supports (height: 100svh) {
  html.has-scrub .iw-tl__era  { height: calc((var(--travel, 6) + 1) * 100svh); }
  html.has-scrub .iw-tl__stage { height: 100svh; }
}

html.has-scrub .iw-tl__grid {
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 2fr);
  align-items: center;
  gap: clamp(16px, 1.6vw, 28px);
  max-width: 1400px;
}

html.has-scrub .iw-tl__deck { grid-column: auto; }

html.has-scrub .iw-tl__deck {
  display: block;
  position: relative;
  width: 100%;
  max-width: 980px;
  max-height: min(76svh, 900px);
  margin-inline: 0 auto;
  aspect-ratio: 1 / 1;
  grid-template-columns: none;
  gap: 0;
}

html.has-scrub .iw-tl__card.is-flat-only { display: none; }

html.has-scrub .iw-tl__card {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  inset-inline-end: auto;
  inset-block-end: auto;
  width: var(--cw, 60%);
  height: auto;
  aspect-ratio: var(--ar, var(--iw-ar));
}


@media (max-width: 1100px) {
  html.has-scrub .iw-tl__shift { padding-left: var(--iw-gutter); padding-bottom: 72px; }
  html.has-scrub .iw-tl__grid  { grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 3vh, 32px); }
  html.has-scrub .iw-tl__deck  { max-width: min(100%, 460px); max-height: min(46svh, 460px); }
}

/* 6. Cards */

.iw-tl__card-frame { cursor: zoom-in; }

.iw-tl__card {
  z-index: var(--ci, 0);
}

.iw-tl__card-depth { height: 100%; }

.iw-tl__card-frame {
  position: relative;
  height: auto;
  aspect-ratio: var(--iw-card-ratio);
  margin: 0;
  border-radius: var(--iw-radius);
  overflow: hidden;
  background: var(--iw-bg-2);

  box-shadow:
    0 1px 2px rgba(0, 0, 0, calc(0.05 * var(--iw-card-lift, 1))),
    0 4px 12px rgba(0, 0, 0, calc(0.04 * var(--iw-card-lift, 1))),
    0 14px 38px rgba(0, 0, 0, calc(0.035 * var(--iw-card-lift, 1)));
}

.iw-tl__card-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: var(--iw-card-ratio);
}

.iw-tl__card-frame::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10);
  pointer-events: none;
}

/* Hover: this is clickable */
.iw-tl__card-frame::before {
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  z-index: 1;
  width: 40px; height: 40px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9V4h5M20 15v5h-5M15 4h5v5M9 20H4v-5'/></svg>")
    center / 18px 18px no-repeat,
    var(--iw-intro-bg);
  box-shadow: 0 2px 8px rgba(5, 0, 40, 0.3);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .iw-tl__card-frame {
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.28s ease;
  }
  html.has-scrub .iw-tl__deck:has(.iw-tl__card:hover) .iw-tl__card.is-front .iw-tl__card-frame,
  html:not(.has-scrub) .iw-tl__card:hover .iw-tl__card-frame {
    transform: translateY(-4px) scale(1.015);
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.08),
      0 10px 24px rgba(0, 0, 0, 0.10),
      0 24px 56px rgba(0, 0, 0, 0.12);
  }
  html.has-scrub .iw-tl__deck:has(.iw-tl__card:hover) .iw-tl__card.is-front .iw-tl__card-frame::before,
  html:not(.has-scrub) .iw-tl__card:hover .iw-tl__card-frame::before {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* No lift; the chip alone says it is clickable. */
  .iw-tl__card-frame { transition: none; }
  html.has-scrub .iw-tl__deck:has(.iw-tl__card:hover) .iw-tl__card.is-front .iw-tl__card-frame,
  html:not(.has-scrub) .iw-tl__card:hover .iw-tl__card-frame { transform: none; }
}

html.has-scrub .iw-tl__card-frame { height: 100%; width: 100%; aspect-ratio: auto; }
html.has-scrub .iw-tl__card-frame img { aspect-ratio: auto; object-fit: cover; }

/* 6b. Fact card */

.iw-tl__fact {
  z-index: 500;
  margin: 0;
}

.iw-tl__fact-inner {
  position: relative;
  height: 100%;
  border-radius: var(--iw-fact-radius);
  overflow: hidden;
  color: var(--iw-fact-ink);
  padding: clamp(18px, 2.2vw, 26px);
  backface-visibility: hidden;

  background-color: var(--iw-fact-bg);
}

.iw-tl__fact-body,
.iw-tl__fact-list { position: relative; z-index: 1; }

.iw-tl__fact-body,
.iw-tl__fact-list {
  margin: 0;
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
}

.iw-tl__fact-list {
  margin-top: 0.35em;
  padding-left: 1.15em;
  list-style: disc;
}

.iw-tl__fact-label {
  display: block;
  font-weight: 600;
}

html.has-scrub .iw-tl__fact {
  position: absolute;
  width: clamp(190px, calc(19.44vw - 75px), 259px);
  height: auto;
}
html.has-scrub .iw-tl__fact.is-tl { top: 2%;    left: 1%;  }
html.has-scrub .iw-tl__fact.is-tr { top: 2%;    right: 1%; }
html.has-scrub .iw-tl__fact.is-bl { bottom: 2%; left: 1%;  }
html.has-scrub .iw-tl__fact.is-br { bottom: 2%; right: 1%; }

/* Fact toast (gallery) */
.iw-tl__lb-facts {
  position: absolute;
  right: clamp(16px, 2.4vw, 34px);
  bottom: clamp(16px, 2.4vh, 28px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(34vw, 330px);
  /* Grows upward as tall as the fact needs. It used to be capped to the
     band below the photo, which clipped a fact with a bullet list; a tall
     one now overlaps the photo's corner instead, as the deck cards do. */
  max-height: calc(100vh - 140px);
  overflow: hidden;
  pointer-events: none;
}


.iw-tl__lb-fact {
  border-radius: var(--iw-fact-radius);
  overflow: hidden;
  color: var(--iw-fact-ink);
  padding: clamp(14px, 1.5vw, 20px);
  background-color: var(--iw-fact-bg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  animation: iw-lb-fact-in 0.42s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

@keyframes iw-lb-fact-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .iw-tl__lb-fact { animation: none; }
}

@media (max-width: 760px) {
  .iw-tl__lb-facts {
    right: clamp(12px, 3vw, 20px);
    left: clamp(12px, 3vw, 20px);
    /* Clear of the prev/next row: the sheet's bottom padding (which on an
       iPhone includes the ~34px home-bar inset), the 42px buttons, a gap. */
    bottom: calc(clamp(14px, 2.5vh, 26px) + env(safe-area-inset-bottom, 0px) + 42px + 14px);
    width: auto;
  }
  .iw-tl__lb-fact { padding: 12px 14px; font-size: 0.92rem; }
}

.iw-tl__fact.is-tl .iw-tl__fact-inner { transform-origin: top left; }
.iw-tl__fact.is-tr .iw-tl__fact-inner { transform-origin: top right; }
.iw-tl__fact.is-bl .iw-tl__fact-inner { transform-origin: bottom left; }
.iw-tl__fact.is-br .iw-tl__fact-inner { transform-origin: bottom right; }

/* Flat mode: an ordinary tile at the head of the photo grid. */
html:not(.has-scrub) .iw-tl__fact { display: grid; }
html:not(.has-scrub) .iw-tl__fact-inner {
  display: grid;
  align-content: center;
  min-height: 100%;
}

@media (max-width: 1100px) {
  html.has-scrub .iw-tl__fact { width: clamp(150px, 46%, 230px); }
  .iw-tl__fact-body,
  .iw-tl__fact-list { font-size: 0.9rem; }
}

html:not(.has-scrub) .iw-tl__fact { grid-column: span 1; }

/* 7. Progress rail */

/* Corner logo */
.iw-mark {
  position: fixed;
  top: clamp(16px, 2.2vw, 30px);
  left: clamp(14px, 2.4vw, 34px);
  z-index: 45;
  display: block;
  width: clamp(46px, 4.4vw, 68px);
  aspect-ratio: 700 / 400;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.3s ease;
}
.iw-mark:hover { transform: translateY(-2px); }
.iw-mark:focus-visible {
  outline: 2px solid var(--iw-purple);
  outline-offset: 6px;
  border-radius: 2px;
}

.iw-mark__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity 0.45s ease;
}

/* Default: light page, dark mark. */
.iw-mark__img--dark  { opacity: 1; }
.iw-mark__img--light { opacity: 0; }

.iw-mark.is-dark-bg .iw-mark__img--dark  { opacity: 0; }
.iw-mark.is-dark-bg .iw-mark__img--light { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .iw-mark, .iw-mark__img { transition: none; }
  .iw-mark:hover { transform: none; }
}

html.is-locked .iw-mark { opacity: 0; pointer-events: none; }

/* The rail over the intro */
.iw-tl__rail.is-over-intro {
  opacity: 0 !important;
  pointer-events: none;
}

/* Rail-jump veil */
.iw-tl__veil {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: var(--iw-bg);
  opacity: 0;
  pointer-events: none;
}

.iw-tl__rail {
  position: fixed;
  left: clamp(14px, 2.4vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex; flex-direction: column; gap: 1px;
  width: calc(var(--iw-rail-w) - 34px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.iw-tl__rail.is-visible { opacity: 1; visibility: visible; }

/* Play / pause */
.iw-play {
  order: 1;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  /* Pill button: light grey fill, thin border, purple icon. */
  padding: 7px 18px 7px 14px;
  border: 1px solid #d6d6d6;
  border-radius: 999px;
  background: #f1f1f1;
  color: #444;
  font-family: var(--iw-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.iw-play:hover  { background: #e8e8e8; border-color: #c4c4c4; color: var(--iw-ink); }
.iw-play__icons { color: #6633ff; }
.iw-play:active .iw-play__icons { transform: scale(0.9); }
.iw-play:focus-visible {
  outline: 2px solid #6633ff;
  outline-offset: 3px;
}

.iw-play__icons {
  display: grid;
  transition: transform 0.16s ease;
}
.iw-play__icon {
  grid-area: 1 / 1;
  width: 12px; height: 14px;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.iw-play__icon--pause { opacity: 0; transform: scale(0.8); }
.iw-play[aria-pressed="true"] .iw-play__icon--play  { opacity: 0; transform: scale(0.8); }
.iw-play[aria-pressed="true"] .iw-play__icon--pause { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .iw-play, .iw-play__icons, .iw-play__icon { transition: none; }
}

/* Anniversary badge */
.iw-badge {
  position: relative;
  width: clamp(64px, 6.8vw, 98px);
  aspect-ratio: 1;
  margin: 0 0 40px;
  flex: none;
  display: block;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1), filter 0.22s ease;
}
.iw-badge:hover { transform: translateY(-2px); }
.iw-badge:active { transform: translateY(0); }

.iw-badge:focus-visible {
  outline: 2px solid #6633ff;
  outline-offset: 4px;
  border-radius: 50%;
}

.iw-badge__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.iw-badge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.iw-badge__ring {
  transform: rotate(calc(var(--iw-badge-turn, 0) * 1turn));
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .iw-badge__ring { transform: none; }
}

@media (max-width: 1100px) {
  .iw-badge { display: none; }
}

.iw-tl__rail-btn {
  display: grid;
  grid-template-columns: 2px 1fr;
  gap: 12px;
  align-items: stretch;
  padding: 5px 0;
  border: 0; background: none;
  color: var(--iw-ink-faint);
  font-family: var(--iw-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-align: left; text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s ease;
}
.iw-tl__rail-btn:hover { color: var(--iw-ink-dim); }
.iw-tl__rail-btn.is-active { color: var(--iw-ink); }

.iw-tl__rail-track {
  position: relative;
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.iw-tl__rail-fill {
  position: absolute; inset: 0;
  background: var(--iw-accent);
  transform-origin: top;
  transform: scaleY(var(--iw-fill, 0));
}
.iw-tl__rail-btn.is-done { --iw-fill: 1; }

.iw-tl__rail-label { line-height: 1.3; padding-block: 1px; }

.iw-tl__rail-name { display: block; }

.iw-tl__rail-ticks {
  display: flex; gap: 2px;
  width: 100%;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease;
}
.iw-tl__rail-btn.is-active .iw-tl__rail-ticks { max-height: 14px; opacity: 1; margin-top: 7px; }
.iw-tl__rail-tick {
  flex: 1 1 0;
  min-width: 1px;
  max-width: 10px;
  height: 2px;
  background: rgba(0, 0, 0, 0.16);
  transition: background 0.25s ease;
}
.iw-tl__rail-tick.is-on { background: var(--iw-accent); }

html:not(.has-scrub) .iw-tl__rail-ticks { display: none; }

@media (max-width: 1100px) {
  .iw-tl__rail {
    left: 0; right: 0; top: auto;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    transform: none;
    width: auto;
    flex-direction: row; gap: 5px;
    padding-inline: clamp(14px, 4vw, 28px);
  }
  .iw-tl__rail-btn { grid-template-columns: 1fr; gap: 0; flex: 1; padding: 10px 0 0; }
  .iw-tl__rail-track { height: 3px; }
  .iw-tl__rail-fill { transform-origin: left; transform: scaleX(var(--iw-fill, 0)); }
  .iw-tl__rail-label, .iw-tl__rail-ticks { display: none; }
}

/* 8. Expand gallery */

.iw-tl__lightbox {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  padding: 0; margin: 0; border: 0;
  background: var(--iw-bg);
  color: var(--iw-ink);
  overflow: hidden;
}
.iw-tl__lightbox::backdrop {
  background: #fff;
}
/* Fade out on close (see closeGallery). */
.iw-tl__lightbox { transition: opacity 0.26s ease; }
.iw-tl__lightbox.is-closing { opacity: 0; }
.iw-tl__lightbox.is-closing::backdrop { background: transparent; }
@media (prefers-reduced-motion: reduce) { .iw-tl__lightbox { transition: none; } }

.iw-tl__lb-sheet {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  position: relative;
  padding: clamp(14px, 2.5vh, 26px) 0 calc(clamp(14px, 2.5vh, 26px) + env(safe-area-inset-bottom, 0px));
}

.iw-tl__lb-bar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding-inline: var(--iw-gutter);
}
.iw-tl__lb-eyebrow {
  margin: 0 0 4px;
  font-family: var(--iw-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--iw-accent);
}
.iw-tl__lb-title {
  margin: 0;
  /* Same section title, so the same face. */
  font-family: var(--iw-serif); font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.1;
  letter-spacing: -0.03em;
}

.iw-tl__lb-close,
.iw-tl__lb-nav {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px;
  border: 1px solid var(--iw-line); border-radius: 50%;
  background: transparent; color: var(--iw-ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.iw-tl__lb-close:hover,
.iw-tl__lb-nav:hover { border-color: var(--iw-ink); background: var(--iw-ink); color: #fff; }
.iw-tl__lb-close svg, .iw-tl__lb-nav svg { width: 20px; height: 20px; }
/* Focus ring sits on the round button's own edge; the default 3px offset
   left a white gap between the button and the purple ring. */
.iw-tl__lb-close:focus-visible,
.iw-tl__lb-nav:focus-visible { outline-offset: 0; border-color: transparent; }
.iw-tl__lb-nav[aria-disabled='true'] { opacity: 0.3; cursor: default; }
.iw-tl__lb-nav[aria-disabled='true']:hover { border-color: var(--iw-line); background: transparent; }

.iw-tl__strip {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 44px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  touch-action: pan-x pinch-zoom;
  padding-inline: 50%;
  scrollbar-width: none;
}
.iw-tl__strip::-webkit-scrollbar { display: none; }
.iw-tl__strip.is-dragging { scroll-snap-type: none; cursor: grabbing; }

.iw-tl__slide {
  flex: 0 0 auto;
  width: min(var(--iw-lb-w), calc(var(--iw-lb-h) * var(--ar, var(--iw-ar))));
  margin: 0;
  scroll-snap-align: center;
  /* Without this one flick can skip four slides. */
  scroll-snap-stop: always;
  display: grid;
  align-content: center;
  gap: 14px;
  opacity: 0.28;
  transition: opacity 0.35s ease;
}
.iw-tl__slide.is-current { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .iw-tl__slide { transition: none; }
}
.iw-tl__slide img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, var(--iw-ar));
  object-fit: contain;
  max-height: var(--iw-lb-h);
  max-width: 100%;
  border-radius: var(--iw-radius);
  background: transparent;
  -webkit-user-drag: none;
  user-select: none;
}
.iw-tl__slide figcaption {
  margin: 0; text-align: center;
  font-size: 13px; color: var(--iw-ink-dim);
}

.iw-tl__lb-foot {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding-inline: var(--iw-gutter);
}
.iw-tl__lb-count {
  margin: 0; min-width: 5ch; text-align: center;
  font-family: var(--iw-mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--iw-ink-dim);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  :root { --iw-lb-w: 84vw; --iw-lb-h: min(56svh, 520px); }
  .iw-tl__lb-title { font-size: 1.15rem; }
}

/* 9. Debug overlay (?debug=1) */

.iw-tl__debug {
  position: fixed; right: 10px; bottom: 10px; z-index: 90;
  max-width: 300px; padding: 10px 12px;
  border: 1px solid var(--iw-line); border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  font-family: var(--iw-mono); font-size: 10.5px; line-height: 1.5;
  color: var(--iw-ink-dim);
  white-space: pre;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.iw-tl__debug b { color: var(--iw-ink); font-weight: 500; }

/* 10. Tablet & mobile */

/* No autoplay on touch devices: swiping is the walkthrough. */
@media (max-width: 1100px), (pointer: coarse) {
  .iw-play { display: none; }
}

/* Keep fixed UI clear of the notch, Dynamic Island and home bar
   (the page draws edge to edge: viewport-fit=cover). */
.iw-mark {
  top: calc(clamp(16px, 2.2vw, 30px) + env(safe-area-inset-top, 0px));
  left: calc(clamp(14px, 2.4vw, 34px) + env(safe-area-inset-left, 0px));
}

@media (max-width: 1100px) {
  :root { --iw-top-bar: calc(58px + env(safe-area-inset-top, 0px)); }

  .iw-mark {
    top: calc(16px + env(safe-area-inset-top, 0px));
    left: calc(var(--iw-gutter) + env(safe-area-inset-left, 0px));
    width: 46px;
  }

  /* Image meter: top right, bar then count, level with the logo. */
  .iw-meter {
    top: calc(22px + env(safe-area-inset-top, 0px));
    bottom: auto;
    left: auto;
    right: calc(var(--iw-gutter) + env(safe-area-inset-right, 0px));
    translate: none;
    flex-direction: row;
    gap: 10px;
  }
  .iw-meter .iw-tl__approach { order: -1; width: 40px; }
  .iw-meter__count { font-size: 11px; }

  .iw-tl__rail {
    padding-left: calc(clamp(14px, 4vw, 28px) + env(safe-area-inset-left, 0px));
    padding-right: calc(clamp(14px, 4vw, 28px) + env(safe-area-inset-right, 0px));
  }

  /* Copy on top, the deck fills whatever height is left, so a long
     description shrinks the pile instead of pushing it off screen. */
  html.has-scrub .iw-tl__shift {
    padding:
      var(--iw-top-bar)
      calc(var(--iw-gutter) + env(safe-area-inset-right, 0px))
      calc(54px + env(safe-area-inset-bottom, 0px))
      calc(var(--iw-gutter) + env(safe-area-inset-left, 0px));
    align-content: stretch;
  }
  html.has-scrub .iw-tl__grid {
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(14px, 2.5vh, 28px);
    max-width: 760px;
  }
  html.has-scrub .iw-tl__copy { max-width: 62ch; }
  html.has-scrub .iw-tl__deck {
    width: 100%;
    height: 100%;
    min-height: 200px;
    max-width: 640px;
    max-height: none;
    aspect-ratio: auto;
    margin-inline: auto;
  }
  html.has-scrub .iw-tl__fact { width: clamp(170px, 42%, 260px); }
}

/* Phones */
@media (max-width: 760px) {
  /* Neat stack: straight, centred cards at their own shapes. */
  :root { --iw-deck-neat: 1; }


  /* A square field, centred in the space left under the copy, so landscape
     and portrait photos both get room; it only goes non-square if that
     space is shorter than it is wide. */
  html.has-scrub .iw-tl__deck {
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    max-width: 100%;
    min-height: 0;
    justify-self: center;
    align-self: center;
  }

  .iw-tl__eyebrow { margin-bottom: 8px; font-size: 13px; }
  .iw-tl__title { margin-bottom: 10px; font-size: clamp(1.75rem, 8vw, 2.2rem); }
  .iw-tl__subtitle { margin-bottom: 10px; font-size: 0.98rem; line-height: 1.4; }
  .iw-tl__desc { font-size: 0.86rem; line-height: 1.55; }

  /* Fact cards: one wide, short strip along the bottom of the pile, so
     they cover a band of the photo rather than a whole corner. */
  html.has-scrub .iw-tl__fact,
  html.has-scrub .iw-tl__fact.is-tl,
  html.has-scrub .iw-tl__fact.is-tr,
  html.has-scrub .iw-tl__fact.is-bl,
  html.has-scrub .iw-tl__fact.is-br {
    /* Hangs below the pile into the space above the menu bar, so it covers
       as little of the photo as possible. */
    top: auto; bottom: -26px;
    /* As wide as the content column, not the pile: when a short screen
       shrinks the pile, the strip stays short instead of becoming a tall
       box over most of the photo. */
    left: 50%; right: auto;
    width: calc(100vw - 2 * var(--iw-gutter) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    max-width: 520px;
    translate: -50% 0;
  }
  html.has-scrub .iw-tl__fact-inner { padding: 12px 14px; }
  html.has-scrub .iw-tl__fact-body,
  html.has-scrub .iw-tl__fact-list { font-size: 0.86rem; line-height: 1.4; }
  html.has-scrub .iw-tl__fact-label { display: inline; }
}

/* Short phones (iPhone SE and similar): a step smaller so the photos
   keep a usable share of the screen. */
@media (max-width: 760px) and (max-height: 740px) {
  .iw-tl__eyebrow { margin-bottom: 6px; font-size: 12px; }
  .iw-tl__title { margin-bottom: 8px; font-size: 1.6rem; }
  .iw-tl__subtitle { margin-bottom: 8px; font-size: 0.9rem; line-height: 1.38; }
  .iw-tl__desc { font-size: 0.8rem; line-height: 1.45; }
  html.has-scrub .iw-tl__fact-inner { padding: 10px 12px; }
  html.has-scrub .iw-tl__fact-body,
  html.has-scrub .iw-tl__fact-list { font-size: 0.8rem; }
}

/* Section menu (tablets and phones) */
.iw-menu-btn,
.iw-menu { display: none; }

@media (max-width: 1100px) {
  .iw-menu-btn {
    position: fixed;
    /* Optically centred on the image counter and its line (set by eye). */
    top: calc(6.5px + env(safe-area-inset-top, 0px));
    right: calc(var(--iw-gutter) - 8px + env(safe-area-inset-right, 0px));
    z-index: 46;
    display: grid; place-items: center;
    width: 44px; height: 44px;
    padding: 0; border: 0; background: none;
    color: var(--iw-ink);
    cursor: pointer;
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .iw-menu-btn svg { width: 24px; height: 24px; }
  .iw-menu-btn.is-visible { opacity: 1; visibility: visible; }
  .iw-menu-btn.is-over-intro,
  html.is-locked .iw-menu-btn { opacity: 0; visibility: hidden; }

  /* The counter moves left to make room for the button. */
  .iw-meter { right: calc(var(--iw-gutter) + 44px + env(safe-area-inset-right, 0px)); }

  .iw-menu {
    position: fixed; inset: 0; z-index: 60;
    display: block;
  }
  .iw-menu[hidden] { display: none; }
  .iw-menu__backdrop {
    position: absolute; inset: 0;
    touch-action: none;
    background: rgba(5, 0, 40, 0.45);
    animation: iw-menu-fade 0.2s ease both;
  }
  .iw-menu__sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 85%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 0 calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px 16px 0 0;
    background: var(--iw-bg);
    box-shadow: 0 -10px 40px rgba(5, 0, 40, 0.25);
    animation: iw-menu-up 0.26s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  }
  .iw-menu__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 8px 6px var(--iw-gutter);
  }
  .iw-menu__title {
    margin: 0;
    font-family: var(--iw-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--iw-ink-dim);
  }
  .iw-menu__close {
    display: grid; place-items: center;
    width: 44px; height: 44px; padding: 0; border: 0; background: none;
    color: var(--iw-ink); cursor: pointer;
  }
  .iw-menu__close svg { width: 22px; height: 22px; }
  .iw-menu__list { list-style: none; margin: 0; padding: 0; }
  .iw-menu__item {
    display: flex; align-items: baseline; gap: 14px;
    width: 100%;
    min-height: 48px;
    padding: 12px var(--iw-gutter);
    border: 0; border-left: 3px solid transparent;
    background: none;
    text-align: left;
    color: var(--iw-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .iw-menu__item:active { background: rgba(0, 0, 0, 0.04); }
  .iw-menu__num {
    font-family: var(--iw-mono); font-size: 12px; letter-spacing: 0.1em;
    color: var(--iw-accent);
  }
  .iw-menu__name { font-family: var(--iw-serif); font-weight: 500; font-size: 1.3rem; }
  .iw-menu__item.is-current { border-left-color: var(--iw-accent); background: rgba(0, 0, 0, 0.03); }
}

@keyframes iw-menu-fade { from { opacity: 0; } }
@keyframes iw-menu-up { from { transform: translateY(100%); } }
@keyframes iw-menu-fade-out { to { opacity: 0; } }
@keyframes iw-menu-down { to { transform: translateY(100%); } }
.iw-menu.is-closing { pointer-events: none; }
.iw-menu.is-closing .iw-menu__backdrop { animation: iw-menu-fade-out 0.22s ease both; }
.iw-menu.is-closing .iw-menu__sheet { animation: iw-menu-down 0.24s cubic-bezier(0.4, 0, 0.8, 0.4) both; }
@media (prefers-reduced-motion: reduce) {
  .iw-menu__backdrop, .iw-menu__sheet { animation: none; }
}

/* Pause off-screen confetti (class set by js/confetti.js). */
.is-paused .iw-confetti { animation-play-state: paused; }

/* Phones: white header band, fading to transparent, so photos passing
   under the logo, counter and menu never make them hard to read. */
.iw-topfade { display: none; }
@media (max-width: 760px) {
  .iw-topfade {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 39;
    display: block;
    height: calc(66px + env(safe-area-inset-top, 0px));
    background: linear-gradient(to bottom,
      var(--iw-bg) 0,
      var(--iw-bg) calc(46px + env(safe-area-inset-top, 0px)),
      rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .iw-meter.is-visible:not(.is-over-intro) + .iw-topfade { opacity: 1; }
  html.is-locked .iw-topfade { opacity: 0; }
}

/* Fact popups: a gradient border from the section's colour to a purple no
   section uses, over a translucent navy that blurs what is behind it. */
:root { --iw-fact-purple: #a21ce8; --iw-fact-ring: 3px; }

.iw-tl__fact-inner,
.iw-tl__lb-fact {
  position: relative;
  border-radius: 16px;
  /* Navy with a little purple, opaque enough to stay rich over white. */
  background-color: rgba(26, 14, 78, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
          backdrop-filter: blur(14px) saturate(130%);
}
.iw-tl__fact-inner::after,
.iw-tl__lb-fact::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: var(--iw-fact-ring);
  background: linear-gradient(110deg, var(--iw-accent, #6633ff), var(--iw-fact-purple));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
/* Flat (reduced-motion) tiles sit in a grid, not over photos: keep them
   solid so the text reads on white. */
html:not(.has-scrub) .iw-tl__fact-inner { background-color: var(--iw-fact-bg); }
/* The gallery toast's container clipped its drop shadow to a square. */
.iw-tl__lb-facts { overflow: visible; }

/* Phones: each section opens with its text on a screen of its own, then
   the photo stage pins with just the section number and title above it. */
.iw-tl__lead { display: none; }
@media (max-width: 760px) {
  /* Wrapper = one screen + the hold; the inner screen sticks during the
     hold. Sized to the LARGEST viewport (Safari toolbars collapsed) so the
     photo stage can never show underneath while the text is up. */
  :root { --iw-lead-hold: 55svh; }
  html.has-scrub.iw-m-screen .iw-tl__lead {
    display: block;
    height: calc(100vh + var(--iw-lead-hold));
    height: calc(100lvh + var(--iw-lead-hold));
  }
  html.has-scrub.iw-m-screen .iw-tl__lead-inner {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    height: 100lvh;
    /* Centre within the SMALL viewport (toolbars showing): the extra
       lvh - svh at the bottom stays clear. */
    padding:
      var(--iw-top-bar)
      calc(var(--iw-gutter) + env(safe-area-inset-right, 0px))
      calc(100lvh - 100svh + 72px + env(safe-area-inset-bottom, 0px))
      calc(var(--iw-gutter) + env(safe-area-inset-left, 0px));
  }
  /* Hold indicator: a small ring in the section colour, bottom centre. */
  html.has-scrub.iw-m-screen .iw-tl__lead-ring {
    position: absolute;
    left: 50%;
    bottom: calc(100lvh - 100svh + 28px + env(safe-area-inset-bottom, 0px));
    width: 30px; height: 30px;
    margin-left: -15px;
    transform: rotate(-90deg);
  }
  .iw-m-screen .iw-tl__lead-ring circle { fill: none; stroke-width: 3; }
  .iw-m-screen .iw-tl__lead-ring-track { stroke: rgba(0, 0, 0, 0.1); }
  .iw-m-screen .iw-tl__lead-ring-fill {
    stroke: var(--iw-accent, #6633ff);
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--iw-lead-p, 0) * 100);
  }
  .iw-m-screen .iw-tl__lead.is-done .iw-tl__lead-ring { opacity: 0.35; transition: opacity 0.3s ease; }
  html.has-scrub.iw-m-screen .iw-tl__lead .iw-tl__title { margin: 0 0 14px; font-size: clamp(2.2rem, 10vw, 2.8rem); }
  html.has-scrub.iw-m-screen .iw-tl__lead .iw-tl__subtitle { font-size: 1.08rem; line-height: 1.45; margin-bottom: 14px; }
  html.has-scrub.iw-m-screen .iw-tl__lead .iw-tl__desc { font-size: 0.95rem; line-height: 1.6; }
  html.has-scrub.iw-m-screen .iw-tl__era {
    height: calc((var(--travel, 6) + 1) * 100svh + 100vh + var(--iw-lead-hold));
    height: calc((var(--travel, 6) + 1) * 100svh + 100lvh + var(--iw-lead-hold));
  }

  /* The pinned stage is photos only: the text screen just before it
     already shows the section number and title. */
  html.has-scrub.iw-m-screen .iw-tl__stage .iw-tl__copy { display: none; }
  html.has-scrub .iw-tl__grid { grid-template-rows: minmax(0, 1fr); }

  /* 'pinned' mode (CONFIG.mobileText): the text sits over the top of the
     photo stage, which pins for --iw-pin-hold, then over --iw-pin-fade the
     text fades up and out (--iw-pin-u 0 -> 1, set by syncPinned) while the
     photos glide from just under it to centre. */
  :root { --iw-pin-hold: 55svh; --iw-pin-fade: 45svh; }
  html.has-scrub.iw-m-pinned .iw-tl__era {
    height: calc((var(--travel, 6) + 1) * 100svh + var(--iw-pin-hold) + var(--iw-pin-fade));
  }
  html.has-scrub.iw-m-pinned .iw-tl__shift { position: relative; }
  html.has-scrub.iw-m-pinned .iw-tl__stage .iw-tl__copy {
    position: absolute;
    z-index: 2;
    top: var(--iw-top-bar);
    left: calc(var(--iw-gutter) + env(safe-area-inset-left, 0px));
    right: calc(var(--iw-gutter) + env(safe-area-inset-right, 0px));
    max-width: none;
    opacity: calc(1 - var(--iw-pin-u, 0) * 1.4);
    transform: translateY(calc(var(--iw-pin-u, 0) * -18px));
    pointer-events: none;
  }
}

/* Share: icon-only button on the front photo. Widens to "Link copied!"
   (anchored right, so it grows leftward over the photo), then shrinks back. */
.iw-share {
  position: absolute;
  top: 12px; right: 60px;               /* beside the hover expand icon */
  z-index: 3;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 0;
  height: 40px;
  max-width: 40px;
  padding: 0 11px;
  border: 0; border-radius: 20px;
  overflow: hidden;
  white-space: nowrap;
  background: var(--iw-intro-bg);
  color: #fff;
  box-shadow: 0 2px 8px rgba(5, 0, 40, 0.3);
  font-family: var(--iw-sans); font-size: 14px; font-weight: 500;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, max-width 0.32s cubic-bezier(0.2, 0.8, 0.3, 1), gap 0.32s ease;
  -webkit-tap-highlight-color: transparent;
}
.iw-share__icon { flex: none; width: 18px; height: 18px; order: 2; }
.iw-share__done {
  order: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.iw-share.is-copied { max-width: 170px; gap: 8px; }
.iw-share.is-copied .iw-share__done { opacity: 1; transition-delay: 0.1s; }
.iw-share:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid #6633ff; outline-offset: 2px; }

/* Shown with the expand icon on hover (mouse/trackpad). */
@media (hover: hover) and (pointer: fine) {
  html.has-scrub .iw-tl__deck:has(.iw-tl__card:hover) .iw-tl__card.is-front .iw-share,
  html:not(.has-scrub) .iw-tl__card:hover .iw-share,
  .iw-share.is-copied { opacity: 1; pointer-events: auto; }
}

/* Touch screens: always visible, bottom right of the front photo. */
@media (hover: none), (pointer: coarse) {
  .iw-share { top: auto; right: 10px; bottom: 10px; }
  html.has-scrub .iw-tl__card.is-front .iw-share,
  html:not(.has-scrub) .iw-share { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .iw-share, .iw-share__done { transition: none; }
}

/* Card wrappers all sit stacked at the centre of the deck; only the photo
   (the depth layer the scroll loop moves) should take clicks, or a later
   card's empty wrapper sits over the front photo and its share button. */
html.has-scrub .iw-tl__card { pointer-events: none; }
html.has-scrub .iw-tl__card-depth { pointer-events: auto; }

/* Phones in landscape: a full-screen prompt to rotate. Touch screens only,
   so a short desktop window never sees it; the gallery stays usable. */
.iw-rotate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px calc(24px + env(safe-area-inset-right, 0px)) 24px calc(24px + env(safe-area-inset-left, 0px));
  /* White, so it blends straight into the white hold when rotating back. */
  background: #fff;
  color: #6633ff;
  text-align: center;
  touch-action: none;
}
.iw-rotate__logo { width: 52px; height: auto; }
.iw-rotate__icon {
  width: 46px; height: 46px;
  transform-origin: 50% 50%;
  animation: iw-rotate-hint 2.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.iw-rotate__text {
  margin: 0;
  max-width: 30ch;
  font-family: var(--iw-serif); font-weight: 500;
  font-size: 1.35rem; line-height: 1.25;
  color: var(--iw-ink);
  text-wrap: balance;
}
/* Sideways phone: from the very first landscape frame (pure CSS, no
   script delay) the page is invisible on white and the white card is up.
   Its logo, icon and message fade in once landscape has held (iw-sideways,
   set by js/timeline.js), so a landscape blip mid-rotation shows nothing. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  html, body { background: #fff; }
  body > *:not(.iw-rotate):not(dialog) { opacity: 0 !important; transition: none !important; }
  .iw-rotate { display: flex; }
  .iw-rotate > * { opacity: 0; transition: opacity 0.3s ease; }
  html.iw-sideways .iw-rotate > * { opacity: 1; }
  html.is-locked .iw-rotate { display: none; }
}

/* Phone outline turning between landscape (as held) and portrait. */
@keyframes iw-rotate-hint {
  0%, 20%   { transform: rotate(-90deg); }
  45%, 70%  { transform: rotate(0deg); }
  95%, 100% { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) { .iw-rotate__icon { animation: none; } }

/* Back in portrait: iw-hide-page (set while sideways, removed by script
   once the page has relaid out at the reader's place) keeps the page
   invisible on white, so Safari's first portrait frame is white, not a
   flash of the page mid-relayout. Removing it fades the page in. */
body > * { transition: opacity 0.5s ease; }
html.iw-hide-page, html.iw-hide-page body { background: #fff; }
html.iw-hide-page body > *:not(.iw-rotate):not(dialog) { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { body > * { transition: none; } }


/* Desktop proportional scale. 1440p (2560x1440 CSS px) is the reference:
   --u is 1px there and follows the screen (by the tighter of width and
   height), floored at 0.75px (1080p) and capped at 2px (5K at 100%).
   - The photo area's caps follow --u both ways, so 1080p shows the same
     share of the screen as 1440p, and 4K at 100% scales up to match.
   - Text and fixed UI only ever grow (max of today's size and the scaled
     one), so smaller desktops keep their readable sizes.
   Desktop only (>1100px); phones and tablets never see this block.
   Remove this block to return to fixed sizes. */
@media (min-width: 1101px) {
  :root {
    /* Floor: 1px (today's sizes) up to 1728px wide, so laptops are
       untouched; easing to 0.75px at 1920 (1080p monitors). */
    --u-floor: clamp(0.75px, calc(1px - (100vw - 1728px) / 768), 1px);
    --u: clamp(var(--u-floor), min(100vw / 2560, 100vh / 1440), 2px);
    /* Growth only (no floor): text and UI use this inside max(), so they
       change only above 1440p and smaller screens keep today's sizes. */
    --ug: min(100vw / 2560, 100vh / 1440, 2px);
    --iw-rail-w: max(168px, calc(168 * var(--ug)));
    --iw-gutter: max(clamp(20px, 5vw, 80px), calc(80 * var(--ug)));
  }
  html.has-scrub .iw-tl__deck {
    max-width: calc(980 * var(--u));
    max-height: min(76svh, calc(900 * var(--u)));
  }
  html.has-scrub .iw-tl__grid {
    /* Grows with the screen but never narrows: at 1080p only the photos
       shrink, the text column keeps its width. */
    max-width: max(1400px, calc(1400 * var(--u)));
    gap: max(clamp(16px, 1.6vw, 18px), calc(18 * var(--ug)));
  }
  .iw-tl__eyebrow  { font-size: max(clamp(15px, 1.52vw, 18px), calc(18 * var(--ug))); }
  .iw-tl__title    { font-size: max(clamp(2rem, 3.4vw, 3.35rem), calc(53.6 * var(--ug))); }
  .iw-tl__subtitle { font-size: max(clamp(1rem, 1.3vw, 1.12rem), calc(17.92 * var(--ug))); }
  .iw-tl__desc     { font-size: max(0.95rem, calc(15.2 * var(--ug))); }
  .iw-tl__fact-body,
  .iw-tl__fact-list { font-size: max(clamp(0.95rem, 1.15vw, 1.1rem), calc(17.6 * var(--ug))); }
  html.has-scrub .iw-tl__fact { width: max(clamp(190px, calc(19.44vw - 75px), 259px), calc(259 * var(--ug))); }
  .iw-tl__fact-inner { padding: max(clamp(18px, 2.2vw, 26px), calc(26 * var(--ug))); }
  .iw-meter__count { font-size: max(12px, calc(12 * var(--ug))); }
  .iw-meter .iw-tl__approach { width: max(46px, calc(46 * var(--ug))); }
  .iw-tl__rail-btn { font-size: max(10.5px, calc(10.5 * var(--ug))); }
  .iw-play { font-size: max(11px, calc(11 * var(--ug))); }
  .iw-play__icon { width: max(12px, calc(12 * var(--ug))); height: max(14px, calc(14 * var(--ug))); }
  .iw-badge { width: max(clamp(64px, 6.8vw, 98px), calc(98 * var(--ug))); }
  .iw-mark { width: max(clamp(46px, 4.4vw, 68px), calc(68 * var(--ug))); }
}