/* ═══ NEW CASPIAN ═══════════════════════════════════════════
   One idea: Melbourne transit wayfinding. Paper, bluestone ink,
   Flinders Street ochre, tram green. Signage type. One accent.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Surfaces — warm paper, not black */
  --paper:    #f2efe8;
  --paper-2:  #e9e5db;
  --card:     #fbfaf7;

  /* Ink — Melbourne bluestone */
  --ink:      #171c24;
  --ink-2:    #4a545f;
  --ink-3:    #8b929b;
  --rule:     #d4cec2;
  --rule-2:   #e2ddd2;

  /* The single accent: Flinders Street ochre */
  --ochre:    #c05621;
  --ochre-lt: #e88b4f;
  --ochre-wash:#f6e3d5;

  /* Support only — never competes */
  --tram:     #0e6b4f;
  --gold:     #b8892b;

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* One source of truth: the skyline's height and the space the hero
     reserves for it are the same number. */
  --city-h: min(60vh, 480px);

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6.5rem;
  --page: 72rem;
  --ease: cubic-bezier(.22,1,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-variation-settings:"wdth" 100;
  font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--ochre); color:#fff }
a{ color:inherit; text-decoration:none }
:where(a,button):focus-visible{ outline:2.5px solid var(--ochre); outline-offset:3px; border-radius:4px }

/* ── Melbourne skyline ─────────────────────────────────── */
/* Anchored to the document, not the viewport — fixed would pin it to the screen
   and it'd never move. Sits where the hero's reserved space begins; JS then lags
   it behind the scroll so it slides away slower than the text. */
.skyline{
  position:absolute; top:calc(100vh - var(--city-h)); left:0; right:0;
  height:var(--city-h);
  z-index:0; pointer-events:none;
  will-change:transform;
}
.sky{
  position:absolute; inset:-40vh 0 0 0;
  background:linear-gradient(to bottom,
    rgba(242,239,232,0) 40%,
    rgba(246,227,213,.55) 74%,
    rgba(248,220,200,.8) 100%);
}
.city{ position:absolute; inset:0; width:100%; height:100% }
/* JS drives .layer transforms per frame — a CSS transition would fight the lerp */
.far  { fill:#cfc9bd; opacity:.42 }
.mid  { fill:#a4a096; opacity:.58 }
.near { fill:#2a323d }
.city .gold{ fill:var(--gold) }
.city .hair{ fill:none; stroke:#a4a096; stroke-width:2 }

/* shoreline */
.trees{ fill:#2f4a3f; opacity:.9 }
.trees .pavilion{ fill:#243a32 }
.promenade .path{ fill:var(--paper-2) }
.promenade .rail{ stroke:var(--rule); stroke-width:1.5 }
.tram rect{ fill:var(--tram) }
.tram .win{ fill:var(--paper); opacity:.92 }
.tram circle{ fill:var(--ink) }

/* the lake */
.water .lake{ fill:#d6d7d1; opacity:.55 }
.reflect rect{ fill:#2a323d; opacity:.34 }
.reflect .gold{ fill:var(--gold); opacity:.4 }
.reflect .soft{ fill:#a4a096; opacity:.3 }
.ripples line{ stroke:var(--paper); stroke-width:2; opacity:.42; stroke-linecap:round }

/* The hero reserves --city-h, so the type already clears the scene — this is
   just a soft blend at the skyline's top edge, not a curtain over it. */
/* Just enough to kill the element's top edge. Any deeper and it washes a
   gradient down the towers — the hero already reserves --city-h for the scene. */
.haze{
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    var(--paper) 0%,
    rgba(242,239,232,0) 5%);
}

/* ── Chrome ─────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  max-width:var(--page); margin:0 auto; padding:var(--s3);
  /* content scrolls under this — it needs to be opaque enough to survive that */
  background:rgba(242,239,232,.82);
  backdrop-filter:blur(10px);
  box-shadow:0 0 0 100vmax rgba(242,239,232,.82); clip-path:inset(0 -100vmax);
}
.wordmark{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.95rem; font-weight:700; letter-spacing:-.01em;
  font-variation-settings:"wdth" 92;
}
.wordmark .suffix{ color:var(--ink-3); font-weight:500 }
.mark{
  width:.85rem; height:.85rem; border-radius:50%;
  border:3px solid var(--ochre);
  transition:transform .4s var(--spring);
}
.wordmark:hover .mark{ transform:scale(1.25) }
.status{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2);
  border:1.5px solid var(--rule); border-radius:999px; padding:.28rem .7rem;
  background:rgba(251,250,247,.7); backdrop-filter:blur(6px);
}
.status .dot{ width:6px; height:6px; border-radius:50%; background:var(--tram) }

/* ── Layout ─────────────────────────────────────────────── */
main{ position:relative; z-index:2; max-width:var(--page); margin:0 auto; padding:0 var(--s3) }
section{ padding-block:var(--s6) }

.label{
  display:flex; align-items:center; gap:.75rem;
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:var(--s3);
}
.label .num{
  font-variant-numeric:tabular-nums; color:var(--ochre);
  border:1.5px solid var(--ochre-lt); border-radius:999px;
  padding:.1rem .45rem; font-size:.65rem; letter-spacing:.06em;
}

/* Everything below the hero rides up over the city as you scroll.
   Full-bleed paper via the ring-shadow trick — main is max-width. */
.sheet{
  position:relative;
  background:var(--paper);
  box-shadow:0 0 0 100vmax var(--paper), 0 -24px 50px -28px rgba(23,28,36,.18);
  clip-path:inset(0 -100vmax);
}

/* ── Hero ───────────────────────────────────────────────── */
.hero{
  padding-top:var(--s3);
  /* clear the skyline so type never fights the buildings */
  padding-bottom:calc(var(--city-h) + var(--s3));
}
.kicker{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:var(--s3);
}
.kicker .node{
  width:9px; height:9px; border-radius:50%;
  background:var(--paper); border:2.5px solid var(--ink);
}
h1{
  font-size:clamp(2.6rem, 7.4vw, 5.1rem);
  font-weight:800; font-variation-settings:"wdth" 88;
  line-height:.98; letter-spacing:-.035em;
  margin-bottom:var(--s3); max-width:16ch;
}
h1 .l{ display:block; overflow:hidden; padding-bottom:.04em }
h1 .w{ display:inline-block; will-change:transform }
h1 .hl{ position:relative; color:var(--ochre); white-space:nowrap }
h1 .hl .rule{
  position:absolute; left:0; right:0; bottom:.06em; height:.075em;
  background:var(--ochre); transform:scaleX(0); transform-origin:left;
  border-radius:2px;
}
.lede{ max-width:44ch; color:var(--ink-2); font-size:1.08rem; margin-bottom:var(--s4) }
.cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) }

/* ── Buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--ink); color:var(--paper);
  font-family:inherit; font-size:.92rem; font-weight:600; letter-spacing:-.005em;
  padding:.8rem 1.3rem; border:0; border-radius:999px; cursor:pointer;
  transition:transform .18s var(--ease), background-color .2s var(--ease);
}
.btn svg{ width:15px; height:15px; transition:transform .3s var(--spring) }
.btn:hover{ background:var(--ochre); transform:translateY(-2px) }
.btn:hover svg{ transform:translateX(4px) }
.btn:active{ transform:translateY(0) scale(.97); transition-duration:.07s }
.btn-wide{ justify-content:center; width:100% }

.btn-ghost{
  position:relative; font-size:.92rem; font-weight:600; color:var(--ink-2);
  padding-bottom:.2rem;
  transition:color .2s var(--ease);
}
.btn-ghost::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--ochre); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.btn-ghost:hover{ color:var(--ochre) }
.btn-ghost:hover::after{ transform:scaleX(1); transform-origin:left }

/* ── The gap ────────────────────────────────────────────── */
.head{ display:grid; grid-template-columns:1fr 1.6fr; gap:var(--s4); align-items:start }
.body{ color:var(--ink-2); font-size:1.02rem; max-width:52ch }

/* Interactive positioning chart — the signature detail */
.chart-wrap{
  display:grid; grid-template-columns:1.7fr 1fr; gap:var(--s4); align-items:center;
  margin:var(--s5) 0;
  border:1.5px solid var(--rule); border-radius:20px;
  background:var(--card); padding:var(--s4);
}
.chart{ position:relative; padding:0 0 2.2rem 2.6rem }
.axis{
  position:absolute; font-size:.68rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  white-space:nowrap;
}
.axis.x{ bottom:0; left:2.6rem }
.axis.y{ left:0; bottom:2.2rem; transform-origin:left bottom; transform:rotate(-90deg) }

.plot{
  position:relative; aspect-ratio:4/3;
  border-left:2px solid var(--ink); border-bottom:2px solid var(--ink);
}
.gridline{ position:absolute; background:var(--rule-2) }
.gridline.h{ left:0; right:0; height:1px }
.gridline.v{ top:0; bottom:0; width:1px }

/* the literal gap in the market, drawn */
.void{
  position:absolute; left:16%; bottom:22%; width:66%; height:62%;
  border:2px dashed var(--rule); border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:repeating-linear-gradient(45deg, transparent 0 6px, rgba(192,86,33,.05) 6px 12px);
  display:grid; place-items:center;
}
.void-label{
  font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); transform:translateY(1.4rem);
}

.pt{
  position:absolute; transform:translate(-50%, 50%);
  background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit;
}
.pt .dot{
  display:block; width:15px; height:15px; border-radius:50%;
  background:var(--paper); border:3px solid var(--ink);
  transition:transform .35s var(--spring), background-color .25s var(--ease), border-color .25s var(--ease);
}
.pt .ring{
  position:absolute; top:50%; left:50%; width:15px; height:15px;
  margin:-7.5px 0 0 -7.5px; border-radius:50%;
  border:2px solid var(--ochre); opacity:0;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.pt .tag{
  position:absolute; left:50%; top:calc(100% + .5rem); transform:translateX(-50%);
  font-size:.72rem; font-weight:700; letter-spacing:-.01em; color:var(--ink-2);
  white-space:nowrap; text-align:center;
  transition:color .25s var(--ease);
}
/* the trade-off each option makes, legible without hovering */
.pt .sub{
  display:block; margin-top:.1rem;
  font-size:.64rem; font-weight:500; letter-spacing:.01em; color:var(--ink-3);
}
.pt:hover .dot, .pt:focus-visible .dot{ transform:scale(1.3) }
.pt.is-us .dot{ background:var(--ochre); border-color:var(--ochre) }
.pt.is-us .tag{ color:var(--ochre) }
.pt.is-us .sub{ color:var(--ochre-lt) }
.pt.is-us .ring{ opacity:1; transform:scale(2.6) }
.chart.dim .pt:not(.is-us) .dot{ opacity:.45 }
.chart.dim .pt:not(.is-us) .tag{ opacity:.45 }

.readout{ border-left:3px solid var(--ochre); padding-left:var(--s3) }
.r-title{ font-size:1.35rem; font-weight:800; font-variation-settings:"wdth" 90; letter-spacing:-.02em }
.r-body{ color:var(--ink-2); font-size:.95rem; margin-top:.4rem }

/* Aims — a stop list */
.aims-lead{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:var(--s2);
}
.aims{ list-style:none; border-top:1.5px solid var(--rule) }
.aims li{
  position:relative; display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) 0 var(--s3) 0; border-bottom:1.5px solid var(--rule);
  font-size:1.05rem; font-weight:600;
  transition:padding-left .35s var(--ease);
}
.aims li::before{
  content:""; position:absolute; left:0; top:50%; width:0; height:2px;
  background:var(--ochre); transform:translateY(-50%);
  transition:width .35s var(--ease);
}
.aims li:hover{ padding-left:2.2rem }
.aims li:hover::before{ width:1.5rem }
.aims .i{
  font-size:.72rem; font-weight:700; color:var(--ochre);
  font-variant-numeric:tabular-nums; min-width:1.6rem;
}

/* ── IP ─────────────────────────────────────────────────── */
.ip-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2) }
.ip-card{
  padding:var(--s3); border:1.5px solid var(--rule); border-radius:16px;
  background:var(--card);
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.ip-card:hover{ transform:translateY(-3px); border-color:var(--ink-3) }
.ip-card p{ color:var(--ink-2); font-size:.95rem; margin-top:.7rem }
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.28rem .6rem; border-radius:999px;
}
.ip-card.done .chip{ background:var(--tram); color:#fff }
.ip-card.wait .chip{ background:var(--paper-2); color:var(--ink-2); border:1.5px solid var(--rule) }
.pulse{ width:6px; height:6px; border-radius:50%; background:var(--ochre) }

/* ── Contact ────────────────────────────────────────────── */
.card{
  border:1.5px solid var(--rule); border-radius:20px; padding:var(--s4);
  background:var(--card); max-width:34rem;
}
.who h2{ font-size:2.1rem; font-weight:800; font-variation-settings:"wdth" 88; letter-spacing:-.03em }
.role{ color:var(--ink-3); font-size:.85rem; font-weight:600; margin-top:.1rem }
.lines{ margin:var(--s3) 0 }
.row{
  display:flex; justify-content:space-between; gap:var(--s2);
  padding:.8rem 0; border-top:1.5px solid var(--rule-2);
  font-size:.9rem; font-weight:600; color:var(--ink-3);
}
.row .val{ color:var(--ink); text-align:right; word-break:break-all; transition:color .2s var(--ease) }
.row:hover .val{ color:var(--ochre) }

/* ── Footer ─────────────────────────────────────────────── */
footer{
  position:relative; z-index:2; max-width:var(--page); margin:0 auto;
  background:var(--paper);
  box-shadow:0 0 0 100vmax var(--paper); clip-path:inset(0 -100vmax);
  display:flex; justify-content:space-between; gap:var(--s2);
  padding:var(--s4) var(--s3) var(--s6);
  border-top:1.5px solid var(--rule);
  font-size:.75rem; font-weight:600; color:var(--ink-3);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:860px){
  .head{ grid-template-columns:1fr; gap:var(--s2) }
  .chart-wrap{ grid-template-columns:1fr; gap:var(--s3); padding:var(--s3) }
  .readout{ border-left:0; border-top:3px solid var(--ochre); padding:var(--s2) 0 0; }
  /* the plot gets short here — the lowest node's label would sit on the axis */
  .pt[data-node="transport"] .tag{ top:auto; bottom:calc(100% + .55rem) }
}
@media (max-width:640px){
  :root{ --city-h: min(38vh, 280px) }
  section{ padding-block:var(--s5) }
  .wordmark .suffix{ display:none }
  .ip-row{ grid-template-columns:1fr }
  footer{ flex-direction:column; gap:.3rem }
  .void-label{ display:none }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important }
  html{ scroll-behavior:auto }
  h1 .w{ transform:none !important }
  h1 .hl .rule{ transform:scaleX(1) !important }
}