/* ---------- typefaces (self-hosted, SIL OFL) ----------
   Fraunces      — Undercase Type. Old-style soft serif after Windsor/Souvenir.
                   Warm and slightly irregular, which echoes the pin's gold lettering.
   Host Grotesk  — Element Type. Uniwidth grotesk; weight changes never shift
                   column widths, which matters in the sortable matrix.
   Licences in assets/fonts/OFL-*.txt
   ------------------------------------------------------ */
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latin.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latinext.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Host Grotesk';src:url('fonts/hostgrotesk-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Host Grotesk';src:url('fonts/hostgrotesk-latinext.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ============================================================
   Norway 2026 Pin Line, one report
   Direction: midnight gallery. Single committed dark world,
   gold as the only accent, the pin lit like an exhibit.
   ============================================================ */

:root{
  --void:      #070b0a;   /* page ground            */
  --ground:    #0a100e;   /* section ground         */
  --raise:     #101714;   /* card                   */
  --raise-2:   #16201c;   /* card hover / tr hover  */
  --hair:      #222b27;   /* hairline               */
  --hair-2:    #2d3833;   /* stronger rule          */

  --ink:       #e8e4d9;   /* primary text           */
  --ink-2:     #a8a394;   /* secondary              */
  --ink-3:     #6f6c62;   /* tertiary / captions    */

  --gold:      #c9a227;
  --gold-hi:   #e3c46a;
  --gold-dim:  #6d5a1c;
  --gold-wash: #1a1608;

  --aurora-g:  #3fb984;
  --aurora-t:  #4fc8b0;
  --aurora-i:  #6f7fd8;
  --aurora-v:  #a56fc4;

  --good:      #6aab7d;
  --good-bg:   #131e17;
  --warn:      #c9a227;
  --warn-bg:   #1c1708;
  --off:       #6b7280;
  --off-bg:    #15181e;

  --t-xs:.72rem; --t-sm:.845rem; --t-b:1rem; --t-md:1.12rem;
  --t-lg:1.4rem; --t-xl:1.9rem; --t-2xl:2.6rem; --t-3xl:3.6rem; --t-4xl:5rem;

  --s1:.35rem; --s2:.65rem; --s3:1rem; --s4:1.6rem;
  --s5:2.5rem; --s6:4rem; --s7:6rem; --s8:9rem;

  --serif:"Fraunces","Iowan Old Style",Palatino,Georgia,serif;
  --sans:"Host Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:4.5rem;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}

body{
  margin:0; background:var(--void); color:var(--ink);
  font:var(--t-b)/1.68 var(--sans); letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
}

/* ---------- breakout grid: prose narrow, data wide, art full ---------- */
.page{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--s3),1fr)
    [wide-start] minmax(0,315px)
    [main-start] min(54ch,100%) [main-end]
    minmax(0,315px) [wide-end]
    minmax(var(--s3),1fr) [full-end];
}
.page > *{grid-column:main;}
.page > .wide{grid-column:wide;}
.page > .full{grid-column:full;}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.15; text-wrap:balance; margin:0;
  font-optical-sizing:auto; font-variation-settings:'SOFT' 12,'WONK' 1;}
h2{font-size:var(--t-2xl); margin:var(--s7) 0 var(--s3); letter-spacing:-.01em;}
h3{font-size:var(--t-lg); margin:var(--s5) 0 var(--s2); color:var(--ink);}
h4{font-size:var(--t-md); margin:var(--s4) 0 var(--s1);}
p{margin:0 0 var(--s3); color:var(--ink-2);}
p.tight{margin-bottom:var(--s2);}
strong{color:var(--ink); font-weight:600;}
a{color:var(--gold-hi); text-underline-offset:3px;}
a:focus-visible, button:focus-visible{outline:2px solid var(--gold-hi); outline-offset:3px;}

.kicker{
  font-family:var(--sans); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  margin:0 0 var(--s2);
}
.lede{font-size:var(--t-md); color:var(--ink); line-height:1.65;}
.note{font-size:var(--t-sm); color:var(--ink-3);}
.note a{color:var(--gold);}

/* section rule */
h2::before{
  content:""; display:block; width:44px; height:1px;
  background:var(--gold); margin-bottom:var(--s3);
}

/* ---------- masthead ---------- */
.hero{
  grid-column:full; position:relative;
  padding:var(--s8) var(--s3) var(--s7); text-align:center;
  border-bottom:1px solid var(--hair);
  overflow:hidden;
  background:
    radial-gradient(72% 58% at 50% 34%, #14332a 0%, #0d2420 42%, #081512 72%, var(--void) 100%);
}
.hero::before{                       /* aurora haze over the green ground */
  content:""; position:absolute; inset:-30% -20% 10% -20%; pointer-events:none;
  background:
    radial-gradient(50% 40% at 28% 46%, color-mix(in oklab,var(--aurora-g) 52%,transparent), transparent 70%),
    radial-gradient(46% 36% at 60% 34%, color-mix(in oklab,var(--aurora-t) 40%,transparent), transparent 72%),
    radial-gradient(42% 34% at 84% 56%, color-mix(in oklab,var(--aurora-v) 26%,transparent), transparent 72%);
  filter:blur(64px); opacity:.55;
}
.hero > *{position:relative;}
.hero h1{
  font-size:var(--t-4xl); letter-spacing:-.022em; margin:0 auto var(--s3);
  max-width:14ch; font-weight:600;
  font-variation-settings:'opsz' 144,'SOFT' 18,'WONK' 1;
}
.hero .sub{
  color:var(--ink-2); font-size:var(--t-md); max-width:56ch;
  margin:0 auto var(--s5);
}
.pin-hero{
  width:min(370px,66vw); height:auto; display:block; margin:0 auto var(--s4);
  filter:drop-shadow(0 26px 58px rgba(0,0,0,.85))
         drop-shadow(0 0 68px color-mix(in oklab,var(--aurora-t) 34%,transparent));
}
.hero .meta{
  font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- sticky nav ---------- */
.nav{
  grid-column:full; position:sticky; top:0; z-index:40;
  background:color-mix(in oklab,var(--void) 88%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
.nav ul{
  list-style:none; margin:0 auto; padding:0 var(--s3); max-width:1240px;
  display:flex; gap:var(--s1); overflow-x:auto; scrollbar-width:none;
}
.nav ul::-webkit-scrollbar{display:none;}
.nav a{
  display:block; padding:.85rem var(--s3); white-space:nowrap; text-decoration:none;
  color:var(--ink-3); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--ink);}
.nav a.on{color:var(--gold-hi); border-bottom-color:var(--gold);}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; margin:var(--s3) 0 var(--s4);
  border:1px solid var(--hair); border-radius:6px; background:var(--ground);}
table{border-collapse:collapse; width:100%; font-size:var(--t-sm); min-width:520px;}
thead th{
  background:var(--raise); text-align:left; white-space:nowrap;
  font-size:var(--t-xs); font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); padding:.75rem var(--s3); border-bottom:1px solid var(--hair-2);
}
td{padding:.7rem var(--s3); border-bottom:1px solid var(--hair); vertical-align:top; color:var(--ink-2);}
tbody tr:last-child td{border-bottom:0;}
tbody tr:hover td{background:var(--raise-2); color:var(--ink);}
td strong{color:var(--ink);}
.num{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;}
th.num{text-align:right;}
th.sortable{cursor:pointer; user-select:none;}
th.sortable:hover{color:var(--ink);}
th.sortable::after{content:" ⇅"; opacity:.3;}
th.sortable[aria-sort="ascending"]::after{content:" ↑"; opacity:.9; color:var(--gold);}
th.sortable[aria-sort="descending"]::after{content:" ↓"; opacity:.9; color:var(--gold);}
.score{color:var(--gold-hi); font-weight:700;}

/* ---------- pills ---------- */
.pill{
  font-family:var(--sans);
  display:inline-block; font-size:var(--t-xs); font-weight:700; white-space:nowrap;
  padding:.1rem .55rem; border-radius:3px; letter-spacing:.04em;
}
.pill.yes{background:var(--good-bg); color:var(--good); box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--good) 30%,transparent);}
.pill.hold{background:var(--warn-bg); color:var(--warn); box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--warn) 26%,transparent);}
.pill.no{background:var(--off-bg); color:var(--off); box-shadow:inset 0 0 0 1px var(--hair-2);}

/* ---------- cards + grids ---------- */
.grid{display:grid; gap:var(--s3); margin:var(--s4) 0;}
.g2{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.g3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.card{
  background:var(--raise); border:1px solid var(--hair);
  border-radius:6px; padding:var(--s4);
}
.card h4{margin-top:0; color:var(--ink);}
.card p{font-size:var(--t-sm); margin-bottom:0;}
.card p + p{margin-top:var(--s2);}

/* variations block inside a pin card */
.vars{margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--hair);}
.vars .vh{font-size:var(--t-xs); letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin-bottom:var(--s2);}
.vars ol{list-style:none; padding:0; margin:0; display:grid; gap:var(--s2);}
.vars li{display:grid; gap:.1rem;}
.vars .v{font-size:var(--t-sm); letter-spacing:.09em; color:var(--gold-hi); font-weight:700;}
.vars .f{font-size:var(--t-xs); color:var(--ink-3); line-height:1.45;}

/* head row: rank left, score right */
.pin .head{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2);}
.pin .head .s{font-family:var(--serif); font-size:var(--t-md); color:var(--gold-hi);
  font-variant-numeric:tabular-nums;}
.pin .head .s small{font-size:var(--t-xs); color:var(--ink-3); letter-spacing:.1em;}

/* the six: gallery cards */
.pins{display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); margin:var(--s4) 0;}
.pin{
  background:var(--raise); border:1px solid var(--hair); border-radius:6px;
  padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2);
  position:relative;
}
.pin.anchor{border-color:var(--gold-dim); background:linear-gradient(180deg,var(--gold-wash),var(--raise) 60%);}
.pin .rank{
  font-family:var(--serif); font-size:var(--t-sm); color:var(--gold);
  letter-spacing:.06em;
}
.pin .phrase{font-family:var(--serif); font-size:var(--t-lg); color:var(--ink); line-height:1.2;}
.pin .src{font-size:var(--t-xs); color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase; font-weight:600;}
.pin .why{font-size:var(--t-sm); color:var(--ink-2); margin:0;}
.pin .q{
  font-size:var(--t-sm); color:var(--ink-3); font-style:italic;
  border-left:1px solid var(--gold-dim); padding-left:var(--s3); margin:0;
}
.pin .foot{
  margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--hair);
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2);
}
.pin .foot .s{font-family:var(--serif); font-size:var(--t-lg); color:var(--gold-hi); font-variant-numeric:tabular-nums;}
.pin .foot .l{font-size:var(--t-xs); color:var(--ink-3); text-transform:uppercase; letter-spacing:.12em;}

/* engraved copy chip */
.copy{
  font-family:var(--sans);
  background:var(--void); border:1px solid var(--hair-2); border-radius:4px;
  padding:var(--s2) var(--s3); font-size:var(--t-sm); font-weight:700;
  letter-spacing:.16em; color:var(--gold-hi); text-align:center;
}
.copy small{
  display:block; font-size:var(--t-xs); letter-spacing:.16em; font-weight:600;
  color:var(--ink-3); margin-bottom:var(--s1); text-transform:uppercase;
}

/* reserve chips, so not everything is a table */
.chips{display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s3) 0 var(--s4);}
.chip{
  display:inline-flex; align-items:baseline; gap:var(--s2);
  background:var(--raise); border:1px solid var(--hair); border-radius:99px;
  padding:.35rem .85rem; font-size:var(--t-sm); color:var(--ink-2);
}
.chip b{color:var(--gold); font-variant-numeric:tabular-nums; font-size:var(--t-xs);}

/* ---------- stat tiles ---------- */
.tiles{display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(146px,1fr));
  background:var(--hair); border:1px solid var(--hair); border-radius:6px; overflow:hidden; margin:var(--s4) 0;}
.tile{background:var(--ground); padding:var(--s3) var(--s4);}
.tile .k{font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:700;}
.tile .v{font-family:var(--serif); font-size:var(--t-xl); color:var(--ink); font-variant-numeric:tabular-nums; margin-top:var(--s1); line-height:1;}
.tile .s{font-size:var(--t-xs); color:var(--ink-3); margin-top:var(--s1);}

/* ---------- callouts ---------- */
.quote{
  border-left:1px solid var(--gold); padding:var(--s1) 0 var(--s1) var(--s4);
  margin:var(--s4) 0; font-family:var(--serif); font-size:var(--t-md);
  font-style:italic; color:var(--ink);
}
.quote cite{
  display:block; font-family:var(--sans); font-style:normal; font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:var(--s2);
}
.callout{
  background:var(--raise); border:1px solid var(--hair); border-left:2px solid var(--gold);
  border-radius:0 6px 6px 0; padding:var(--s4); margin:var(--s4) 0; font-size:var(--t-sm);
}
.callout.alert{border-left-color:var(--aurora-v); background:var(--raise);}
.callout h4{margin-top:0;}
.callout p:last-child{margin-bottom:0;}

/* ---------- numbered steps ---------- */
.steps{list-style:none; counter-reset:s; padding:0; margin:var(--s4) 0;}
.steps li{
  counter-increment:s; position:relative; padding:0 0 var(--s4) var(--s6);
  border-left:1px solid var(--hair); margin-left:.7rem;
}
.steps li:last-child{border-left-color:transparent; padding-bottom:0;}
.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:-.75rem; top:-.2rem;
  width:1.5rem; height:1.5rem; border-radius:50%;
  background:var(--void); border:1px solid var(--gold-dim); color:var(--gold);
  font-size:.62rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums;
}
.steps li strong{display:block; color:var(--ink); margin-bottom:.15rem;}
.steps li span{font-size:var(--t-sm); color:var(--ink-2);}

/* ---------- swatches ---------- */
.sw{display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s3) 0 var(--s4);}
.sw div{border:1px solid var(--hair); border-radius:4px; overflow:hidden; min-width:104px; flex:1;}
.sw i{display:block; height:44px;}
.sw b{display:block; font-size:var(--t-xs); font-weight:600; color:var(--ink-3);
  padding:.35rem var(--s2); background:var(--raise); letter-spacing:.03em;}

/* ---------- gallery plate ---------- */
.plate{
  grid-column:wide; margin:var(--s5) 0; text-align:center;
  background:radial-gradient(60% 60% at 50% 45%, var(--ground), var(--void) 78%);
  border:1px solid var(--hair); border-radius:8px; padding:var(--s6) var(--s4);
}
.plate img{
  width:min(320px,72%); height:auto; display:block; margin:0 auto var(--s4);
  filter:drop-shadow(0 20px 48px rgba(0,0,0,.8));
}
.plate figcaption{font-size:var(--t-sm); color:var(--ink-3); max-width:52ch; margin:0 auto;}
.plate figcaption b{color:var(--gold); display:block; font-size:var(--t-xs);
  letter-spacing:.18em; text-transform:uppercase; margin-bottom:var(--s1);}

ul.list{padding-left:1.1rem; color:var(--ink-2);}
ul.list li{margin:var(--s2) 0;}
ul.list li::marker{color:var(--gold-dim);}

/* ---------- footer ---------- */
footer{
  grid-column:full; border-top:1px solid var(--hair); margin-top:var(--s8);
  padding:var(--s5) var(--s3) var(--s7);
}
footer .in{max-width:70ch; margin:0 auto; font-size:var(--t-sm); color:var(--ink-3);}

@media (max-width:760px){
  :root{--t-4xl:2.9rem; --t-3xl:2.4rem; --t-2xl:1.85rem; --s8:5rem; --s7:3.5rem;}
  .hero{padding:var(--s6) var(--s3) var(--s5);}
  .steps li{padding-left:var(--s5);}
}