:root{
  --ground:#EEF1EE;
  --paper:#F8FAF8;
  --ink:#16231F;
  --muted:#51615B;
  --pine:#0E5A49;
  --pine-deep:#0A3F34;
  --line:#CBD4CF;
  --signal:#E9B826;
  --display:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:1.125rem;line-height:1.6}
a{color:var(--pine);text-underline-offset:.2em}
a:hover{color:var(--pine-deep)}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:2px}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.5rem}
.top{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0;font-family:var(--display);font-size:1rem}
.top .mark{font-weight:700;text-decoration:none;color:var(--ink);letter-spacing:-.01em}
.top .where{color:var(--muted)}
.hero{padding:clamp(3rem,10vw,7rem) 0 clamp(2rem,6vw,4rem)}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(3rem,11vw,8rem);line-height:.92;letter-spacing:-.045em;margin:0 0 1.5rem;max-width:12ch}
.hero p{max-width:34rem;margin:0;font-size:1.25rem;color:var(--muted)}
.section{padding:2.5rem 0 1rem}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 2rem;border-bottom:2px solid var(--ink);padding-bottom:.75rem}
.section-head h2{font-family:var(--display);font-size:1.75rem;line-height:1.1;letter-spacing:-.02em;margin:0}
.section-head p{margin:0;color:var(--muted);font-size:1rem}
.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:.5rem 1fr auto;gap:0 1.25rem;align-items:center;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.row .bar{align-self:stretch;background:var(--pine);border-radius:1px}
.row[data-status="building"] .bar{background:var(--signal)}
.row[data-status="planned"] .bar{background:var(--line)}
.row h3{font-family:var(--display);font-size:1.375rem;line-height:1.2;letter-spacing:-.015em;margin:0 0 .15rem}
.row h3 a{color:var(--ink);text-decoration:none}
.row h3 a:hover{text-decoration:underline;text-decoration-color:var(--pine);text-decoration-thickness:2px}
.row p{margin:0;color:var(--muted);font-size:1.0625rem;max-width:40rem}
.status{font-family:var(--display);font-size:.9375rem;color:var(--ink);white-space:nowrap}
.empty{padding:1.5rem 0;color:var(--muted)}
.private-box{margin:2.5rem 0 4rem;background:var(--pine);color:#fff;padding:clamp(1.5rem,4vw,2.5rem);display:flex;flex-wrap:wrap;gap:1.25rem 2rem;align-items:center;justify-content:space-between;border-radius:4px}
.private-box h2{font-family:var(--display);font-size:1.5rem;line-height:1.15;margin:0 0 .35rem;letter-spacing:-.02em}
.private-box p{margin:0;max-width:32rem;color:#D6E6E0}
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:600;font-size:1.0625rem;background:#fff;color:var(--pine-deep);text-decoration:none;padding:.8rem 1.25rem;border-radius:3px;border:0;cursor:pointer}
.btn:hover{background:var(--signal);color:var(--ink)}
.btn svg{width:1.1rem;height:1.1rem}
.foot{border-top:1px solid var(--line);padding:1.5rem 0 3rem;font-family:var(--display);font-size:.9375rem;color:var(--muted);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem}
.who{font-family:var(--display);font-size:.9375rem;color:var(--muted)}
.who a{margin-left:.75rem}
@media (max-width:34rem){
  .row{grid-template-columns:.5rem 1fr}
  .row .status{grid-column:2;margin-top:.5rem}
}
@media (prefers-reduced-motion:no-preference){
  .hero h1{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}