/* Ellis Island, then and now
   Harbor grays with one accent: verdigris, the patina on the main building's copper domes. */

@property --pos {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}

:root {
  --paper: #f3f5f4;
  --ink: #1d2528;
  --muted: #56636a;
  --rule: #d3dad8;
  --stage: #dde3e1;
  --accent: #3c7a6e;
  --on-accent: #fff;
  --badge: rgb(20 26 28 / 0.72);
  --title-green: #2e8b57;
  --title-amp: #7b867b; /* Figma's #a5b0a5 darkened to 3.5:1 on paper; large-text AA */
  --title-rule: #a5b0a5;

  --measure: 38rem;
  --frame: 58.75rem; /* the photographs' native 940px — never upscale */
  --gutter: 16px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141a1c;
    --ink: #e6ebe9;
    --muted: #9ba8a6;
    --rule: #2c3538;
    --stage: #1f2729;
    --accent: #7fbfb1;
    --on-accent: #10201c;
    --title-amp: #a5b0a5;
    --title-green: #4caf7a; /* #2e8b57 lifted for the dark ground: 6.5:1 */
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Public Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.masthead, .tabs, .comparisons, .colophon {
  width: min(100% - 2 * var(--gutter), var(--frame));
  margin-inline: auto;
}

a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--paper);
  z-index: 10;
}
.skip:focus { top: var(--gutter); }

/* ── Masthead ──────────────────────────────────────────── */

.masthead { padding-block: clamp(24px, 5vw, 56px) clamp(24px, 4vw, 40px); }

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5em;
  margin: 0 0 clamp(32px, 6vw, 64px);
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--muted);
}
.crumbs li + li::before { content: '/'; margin-right: 0.5em; color: var(--rule); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Title lockup, from Figma (contra, node 257:18848). Every measurement is a ratio of
   one fluid size — Figma's 70px — so the lockup scales as a unit: 70px from 1024px up,
   down to 52px, which still fits a 320px screen (the lockup is ~5.3em wide). */
.title {
  display: flex;
  align-items: stretch;
  gap: calc(20em / 70);
  margin: 0 0 28px;
  font-size: clamp(3.25rem, 2.92rem + 2.273vw, 4.375rem);
  font-weight: 400;
}

.title-place {
  font-family: 'League Gothic', 'Arial Narrow', sans-serif;
  line-height: 0.75;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--title-green);
}

.title-rule {
  flex: none;
  width: 2px;
  background: var(--title-rule);
}

.title-when {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: 'Playfair', Georgia, serif;
  font-size: calc(32em / 70);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.title-amp {
  font-style: italic;
  font-weight: 400;
  color: var(--title-amp);
}

.standfirst {
  max-width: var(--measure);
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  color: var(--muted);
  text-wrap: pretty;
}

/* ── Tabs (built by main.js from the sections) ─────────── */

html:not(.js) .tabs { display: none; }

.tabs {
  display: flex;
  min-height: 47px; /* reserved before main.js fills it */
  gap: clamp(16px, 3vw, 32px);
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs [role='tab'] {
  flex: none;
  margin-bottom: -1px;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}
.tabs [role='tab']:hover { color: var(--ink); }
.tabs [role='tab'][aria-selected='true'] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs [role='tab']:focus-visible { outline-offset: -2px; }

/* ── Comparisons ───────────────────────────────────────── */

.comparison + .comparison { margin-top: 56px; }
.comparison[hidden] { display: none; }

/* Until main.js takes over, show only the panel it will select: the #hash one, else the first.
   Scoped to :not(.tabs-ready) because replaceState() doesn't move :target on later tab changes. */
.js:not(.tabs-ready) .comparisons:not(:has(> .comparison:target)) > .comparison:not(:first-child),
.js:not(.tabs-ready) .comparisons:has(> .comparison:target) > .comparison:not(:target) { display: none; }

.comparison h2 {
  margin: 0 0 16px;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* With tabs, the tab is the visible label; the heading stays for outlines and search. */
.js .comparison h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

figure { margin: 0; }

figcaption { max-width: var(--measure); margin-top: 20px; }
figcaption p { margin: 0; text-wrap: pretty; }
figcaption .credit { margin-top: 8px; font-size: 0.8125rem; color: var(--muted); }

/* ── <before-after> ────────────────────────────────────── */

/* Before the element upgrades (or without JS): both photographs, stacked. */
before-after:not(:defined) { display: grid; gap: 8px; }
before-after img { display: block; width: 100%; height: auto; }

before-after { display: block; }
before-after.is-animating { transition: --pos 480ms cubic-bezier(0.2, 0.7, 0.2, 1); }
before-after.is-dragging { transition: none; }

.ba-stage {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: var(--stage);
  cursor: ew-resize;
  touch-action: pan-y; /* vertical swipes still scroll the page */
  user-select: none;
  -webkit-user-select: none;
}

.ba-stage .ba-img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  /* Each photo on its own compositor layer, so the knob's hover and the moving divider
     never force the photos to be redrawn (and possibly re-decoded, which blinks gray). */
  will-change: transform;
}
.ba-now { clip-path: inset(0 0 0 var(--pos)); }

/* The divider layer spans the whole stage and slides with a transform: its own
   compositor layer, so moving it never repaints the photos. translateX(%) is relative
   to the layer's own width, which is the stage's. The line and knob sit at its left edge. */
.ba-divider {
  position: absolute;
  inset: 0;
  transform: translateX(var(--pos));
  will-change: transform;
  pointer-events: none;
}
.ba-divider::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 2px;
  translate: -50% 0;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
}

.ba-knob {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  translate: -50% -50%;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.3);
  transition: scale 160ms ease;
}
.ba-stage:hover .ba-knob { scale: 1.06; }
.is-dragging .ba-knob { scale: 0.94; }
.ba-stage:has(.ba-range:focus-visible) .ba-knob { outline: 3px solid #fff; outline-offset: 3px; }

.ba-badge {
  position: absolute;
  top: 12px;
  padding: 3px 9px;
  border-radius: 2px;
  background: var(--badge);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  transition: opacity 200ms ease;
}
.ba-badge--then { left: 12px; }
.ba-badge--now { right: 12px; }
.shows-now-only .ba-badge--then,
.shows-then-only .ba-badge--now { opacity: 0; }

/* The range is the keyboard and screen-reader control; the pointer uses the photo itself. */
.ba-range {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.ba-controls {
  display: inline-flex;
  margin-top: 12px;
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.ba-controls button {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.ba-controls button + button { border-left: 1px solid var(--rule); }
.ba-controls button:hover { color: var(--ink); }
.ba-controls button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.ba-controls button:focus-visible { outline-offset: -2px; }

/* ── Colophon ──────────────────────────────────────────── */

.colophon {
  margin-top: clamp(56px, 8vw, 96px);
  margin-bottom: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--muted);
}
.colophon p { max-width: var(--measure); margin: 0 0 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}