/* ════════════════════════════════════════════════════
   The Urban Office — 2026 Strategic Review
   Shared design system. Light, on-brand, editorial.
   Palette verified from theurbanoffice.com/styles.css
   ════════════════════════════════════════════════════ */

:root {
  --paper:   #fbfaf6;   /* warm off-white canvas */
  --white:   #ffffff;
  --ink:     #363636;   /* headings */
  --body:    #565656;   /* WCAG-readable body text */
  --yellow:  #ffc80c;   /* accent */
  --yellow-deep: #e1ae00;
  --navy:    #0a263c;   /* rare dramatic */
  --line:    rgba(54,54,54,0.10);
  --line-soft: rgba(54,54,54,0.06);
  --display: 'Cormorant Garamond', Georgia, serif;
  --sans:    'Inter', -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
p { font-weight: 300 !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  cursor: none;
  overflow: hidden;
}

/* ── Custom cursor ── */
#cursor {
  width: 7px; height: 7px;
  background: var(--yellow); border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .25s, height .25s, background .25s;
  mix-blend-mode: multiply;
}
#cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(225,174,0,0.5); border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width .3s, height .3s, border-color .3s;
}
#cursor.hover { width: 12px; height: 12px; }
#cursor-ring.hover { width: 50px; height: 50px; border-color: var(--yellow); }

/* ── Scroll-snap pager ── */
#pager {
  height: 100vh; width: 100vw;
  overflow-y: scroll; overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
#pager::-webkit-scrollbar { width: 0; display: none; }

section {
  position: relative;
  height: 100vh; width: 100vw;
  scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(104px, 12vh, 132px) clamp(56px, 7vw, 132px) clamp(58px, 7vh, 82px);
}

/* canvas tones */
section.paper { background: var(--paper); }
section.white { background: var(--white); }
section.navy  { background: var(--navy); }
section.navy .eyebrow,
section.navy .kicker { color: var(--yellow); }
section.navy h1, section.navy h2, section.navy .big { color: var(--white); }
section.navy .lede, section.navy .caption { color: rgba(255,255,255,0.84) !important; }

/* ── Shared type scale ── */
.eyebrow {
  font-size: clamp(12px, .8vw, 15px); font-weight: 650; letter-spacing: .28em;
  text-transform: uppercase; color: var(--yellow-deep);
  display: flex; align-items: center; gap: 14px;
}
.eyebrow::before {
  content: ''; width: 26px; height: 1px; background: var(--yellow);
}

h1.display, h2.display, .display {
  font-family: var(--display); font-weight: 300;
  color: var(--ink); line-height: 1.0; letter-spacing: -0.01em;
}
.display em { font-style: italic; color: var(--yellow-deep); }

.size-xl { font-size: clamp(68px, 7.8vw, 142px); }
.size-lg { font-size: clamp(58px, 6vw, 108px); }
.size-md { font-size: clamp(46px, 4.2vw, 76px); }

.lede {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(19px, 1.45vw, 25px); line-height: 1.55;
  color: var(--body); max-width: 44ch;
}
.caption {
  font-size: clamp(17px, 1.2vw, 21px); font-weight: 300;
  line-height: 1.6; color: var(--body); max-width: 44ch;
}
.caption strong, .lede strong { color: var(--ink); font-weight: 500; }

.rule { width: 40px; height: 1px; background: var(--yellow); }

/* giant stat number */
.stat-num {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(110px, 17vw, 280px); line-height: .82;
  color: var(--ink); letter-spacing: -0.02em;
}
.stat-num.accent { color: var(--yellow-deep); }

/* ── Fixed chrome ── */
.frame-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 76px;
  padding: 14px clamp(56px, 7vw, 132px);
  pointer-events: none; background: rgba(255,255,255,.97);
  border-bottom: 1px solid rgba(54,54,54,.12);
  box-shadow: 0 2px 14px rgba(10,38,60,.05);
}
.brandmark {
  display: flex; align-items: center;
  pointer-events: auto; text-decoration: none;
}
.brandmark img { display:block; width:clamp(148px, 11vw, 185px); height:auto; }
.frame-meta {
  font-size: 11px; font-weight: 650; letter-spacing: .22em;
  text-transform: uppercase; color: #525252; opacity: 1;
}
section.navy ~ .frame-top { }

/* progress dots */
.dots {
  position: fixed; right: clamp(22px, 2.4vw, 40px); top: 50%;
  transform: translateY(-50%); z-index: 100;
  display: flex; flex-direction: column; gap: 13px;
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(54,54,54,0.18); cursor: none;
  transition: background .3s, transform .3s; border: none; padding: 0;
}
.dot.active { background: var(--yellow-deep); transform: scale(1.4); }

/* chapter index label bottom-left */
.chap {
  position: absolute; bottom: clamp(34px, 5vh, 56px);
  left: clamp(48px, 7vw, 132px);
  font-size: 11px; font-weight: 650; letter-spacing: .22em;
  text-transform: uppercase; color: var(--body); opacity: .82;
}
section[data-source]::after {
  content: attr(data-source); position:absolute;
  right:clamp(56px,7vw,132px); bottom:clamp(34px,5vh,56px);
  max-width:46%; text-align:right; font-size:10px; font-weight:300;
  line-height:1.4; letter-spacing:.04em; color:#666;
}
section.navy[data-source]::after { color:rgba(255,255,255,.72); }

/* scroll hint on first screen */
.scroll-hint {
  position: absolute; bottom: clamp(34px, 5vh, 56px);
  right: clamp(48px, 7vw, 132px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-hint span {
  font-size: 9px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--body); writing-mode: vertical-lr;
}
.scroll-hint .line {
  width: 1px; height: 40px;
  background: linear-gradient(var(--yellow), transparent);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:.35; transform: scaleY(1);} 50% { opacity:1; transform: scaleY(1.15);} }

/* ── reveal animation ── */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .22s; }
.reveal.d3 { transition-delay: .34s; }
.reveal.d4 { transition-delay: .46s; }
.reveal.d5 { transition-delay: .58s; }

/* svg shared — set default on <svg> (inherited) so per-element
   font-family presentation attributes can still win (e.g. Cormorant labels) */
svg { font-family: var(--sans); }
.ax-line { stroke: var(--line); stroke-width: 1; }
.ax-grid { stroke: var(--line-soft); stroke-width: 1; }
.ax-tick { fill: #555; font-size: 14px; font-weight: 500; opacity: 1; }
.ax-title { fill: #4c4c4c; font-size: 13px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }

@media (max-height: 760px) {
  section { padding-top: 90px; padding-bottom: 46px; }
  .size-xl { font-size: clamp(58px, 7vw, 112px); }
  .size-lg { font-size: clamp(48px, 5.4vw, 88px); }
  .size-md { font-size: clamp(40px, 3.7vw, 64px); }
  .lede { font-size: clamp(17px, 1.25vw, 21px); }
  .caption { font-size: clamp(15px, 1.05vw, 18px); }
}