/* Earshot — tokens, the colour wash, the story chrome, the rolling numbers. */

@font-face {
  font-family: 'Bricolage';
  src: url('../fonts/bricolage.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #F6F1EA;
  --ink: #2A241E;
  --ink-2: #544A40;
  --muted: #72675B;
  --line: rgba(42, 36, 30, .09);

  --glass: rgba(255, 255, 255, .46);
  --glass-hi: rgba(255, 255, 255, .7);
  --glass-edge: rgba(255, 255, 255, .72);
  --blur: 26px;
  --shadow: 0 1px 2px rgba(60, 44, 28, .05), 0 14px 34px rgba(60, 44, 28, .08);
  --shadow-lift: 0 2px 4px rgba(60, 44, 28, .06), 0 22px 48px rgba(60, 44, 28, .12);

  /* the page's own colour, set per story */
  --accent: #C8663A;
  --accent-soft: rgba(200, 102, 58, .16);

  --display: 'Bricolage', ui-rounded, -apple-system, system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.45 var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  overscroll-behavior: none;
}
::selection { background: var(--accent-soft); color: var(--ink); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- the wash: soft colour fields that follow the swipe ---------- */

.wash { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); pointer-events: none; }
.wash i {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .55;
  will-change: transform;
}
.wash i:nth-child(1) { width: 80vmax; height: 80vmax; left: -42vmax; top: -46vmax; background: var(--w1, #FFD9B8); animation: drift1 26s ease-in-out infinite alternate; }
.wash i:nth-child(2) { width: 66vmax; height: 66vmax; right: -44vmax; top: 22vh; background: var(--w2, #F9C9C0); animation: drift2 31s ease-in-out infinite alternate; }
.wash i:nth-child(3) { width: 58vmax; height: 58vmax; left: -14vmax; bottom: -48vmax; background: var(--w3, #FBE6CF); animation: drift3 23s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(8vmax, 6vmax) scale(1.08); } }
@keyframes drift2 { to { transform: translate(-10vmax, -4vmax) scale(.94); } }
@keyframes drift3 { to { transform: translate(6vmax, -8vmax) scale(1.1); } }
/* a whisper of grain so the fields read as material, not as a CSS gradient */
.wash::after {
  content: ''; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .5; mix-blend-mode: multiply;
}

/* ---------- glass ---------- */

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.7);
  backdrop-filter: blur(var(--blur)) saturate(1.7);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .8);
  border-radius: var(--r-lg);
}

/* ---------- story chrome ---------- */

.bar {
  position: fixed; z-index: 20; left: 0; right: 0; top: 0;
  padding: calc(var(--safe-t) + 10px) 16px 0;
  max-width: 560px; margin: 0 auto;
}
.bar::before {
  content: ''; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
  background: rgba(246, 241, 234, .5);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
  opacity: 0; transition: opacity .4s var(--ease);
}
.bar.scrolled::before { opacity: 1; }
@media (min-width: 560px) { .bar::before { left: -100vw; right: -100vw; } }
.segs { display: flex; gap: 5px; }
.seg {
  flex: 1; height: 26px; display: flex; align-items: center; /* tall hit area, thin mark */
}
.seg span {
  display: block; width: 100%; height: 3.5px; border-radius: 3px;
  background: rgba(42, 36, 30, .13); overflow: hidden; position: relative;
}
.seg span::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--ink);
  transform: scaleX(var(--fill, 0)); transform-origin: left;
}
.bar-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; min-height: 44px; }
.brand { font: 700 19px/1 var(--display); letter-spacing: -.02em; }
.status { font-size: 13px; color: var(--muted); margin-right: auto; margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  padding: 6px 11px; border-radius: 99px;
}
.iconbtn {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  transition: transform .35s var(--ease), background-color .3s ease;
}
.iconbtn:active { transform: scale(.9); transition-duration: .1s; }
.iconbtn.spin svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- pager ---------- */

.pager {
  position: fixed; inset: 0; z-index: 1;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.pager::-webkit-scrollbar { display: none; }
.page {
  flex: 0 0 100%; height: 100%;
  scroll-snap-align: center; scroll-snap-stop: always;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  padding: calc(var(--safe-t) + 96px) 20px calc(var(--safe-b) + 40px);
}
.page::-webkit-scrollbar { display: none; }
.inner {
  max-width: 520px; margin: 0 auto; min-height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
/* each story fills the screen: the numeral up top, its evidence anchored to the bottom */
.foot { margin-top: clamp(32px, 6vh, 56px); }
.foot > :first-child { margin-top: 0; }

/* ---------- type ---------- */

.lead { font: 500 21px/1.25 var(--display); letter-spacing: -.01em; color: var(--ink-2); margin: 0; }
.big {
  font: 700 clamp(76px, 24vw, 96px)/.92 var(--display);
  letter-spacing: -.04em; margin: 6px 0 4px; color: var(--ink);
  display: flex; align-items: baseline; flex-wrap: wrap;
}
.big .unit { font-weight: 500; font-size: .42em; letter-spacing: -.02em; margin: 0 .18em 0 .04em; color: var(--accent-ink, var(--ink-2)); }
.big .unit.word { margin-left: .22em; }
.after { font: 500 21px/1.25 var(--display); color: var(--ink-2); margin: 0 0 14px; }
.note { font-size: 15px; color: var(--ink-2); margin: 0; }
.note b { color: var(--ink); font-weight: 650; }
.muted { color: var(--muted); }
.est { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
h2.h { font: 700 30px/1.05 var(--display); letter-spacing: -.03em; margin: 0; }
h3.h { font: 650 17px/1.2 var(--display); letter-spacing: -.01em; margin: 26px 0 10px; }

.delta {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  font-weight: 650; font-size: 13.5px; padding: 5px 10px 5px 8px; border-radius: 99px;
  background: var(--glass-hi); border: 1px solid var(--glass-edge);
}
.delta svg { width: 14px; height: 14px; stroke-width: 2.4; }
.delta.up svg { color: var(--accent); }

/* ---------- rolling numbers ---------- */

.odo { display: inline-flex; }
.odo-col { position: relative; display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.odo-sizer { visibility: hidden; }
.odo-strip { position: absolute; left: -.2em; right: -.2em; top: 0; display: flex; flex-direction: column; transition: transform 1.25s var(--ease-out); }
.odo-strip span { height: 1em; line-height: 1; text-align: center; }
.odo-ch { display: inline-block; line-height: 1; }

/* page content arrives once, orchestrated — not one fade per element */
.page .rise { opacity: 1; transform: none; }
.page.pre .rise { opacity: 0; transform: translateY(18px); filter: blur(6px); }
.page .rise { transition: opacity .8s var(--ease-out), transform .9s var(--ease-out), filter .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }

@media (prefers-reduced-motion: reduce) {
  .wash i { animation: none; }
  .odo-strip, .page .rise { transition: none !important; }
  .page.pre .rise { opacity: 1; transform: none; filter: none; }
}

@media (min-width: 900px) {
  .page { padding-top: calc(var(--safe-t) + 120px); }
}