/* Supermill public site. Full-width bands alternate neutral ground, pale wash and signal green;
   each band holds one idea. Single look by choice: colours stay the same in any theme. */

@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/schibsted-grotesk-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2")}

:root{
  --signal:#004639; --signal-deep:#00352B; --go:#24D57D; --wash:#F1FBDF;
  --bg:#F5F5F5; --card:#FFFFFF; --ink:#131414; --ink2:#3B403E; --muted:#5F6562;
  --rule:rgba(19,20,20,.13); --mist:#D5E3DF; --white:#FFFFFF;
  --display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","SF Mono",Menlo,"Courier New",monospace;
  --h2:clamp(30px,4.2vw,52px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:clamp(17px,1.25vw,20px);line-height:1.5}
h1,h2,h3,p{margin:0}
a{color:inherit;text-underline-offset:.18em}
a:focus-visible,.tablebox:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
.top a:focus-visible,.dark a:focus-visible,footer a:focus-visible{outline-color:var(--go)}
html{scroll-padding-top:76px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--signal)}
.skip{position:absolute;left:-999px;top:0;background:var(--card);color:var(--ink);padding:8px 12px;z-index:20}
.skip:focus{left:16px;top:16px}
.skip:focus-visible{outline-color:var(--go)}
.in-w{max-width:1280px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.stack{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)}
.read{max-width:44rem}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--signal);color:var(--white)}
.top .in-w{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;min-height:60px;padding-block:8px}
.lockup{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--white)}
.mark{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--signal-deep);border:2px solid var(--go);border-radius:5px;font:800 21px/1 var(--display);color:var(--white)}
.mark sup{color:var(--go);font-size:.6em;vertical-align:.55em;margin-left:1px}
.wordmark{font:700 21px/1 var(--display);letter-spacing:-.4px}
.top nav{display:flex;gap:4px;flex-wrap:wrap}
.top nav a{font:600 15px var(--body);text-decoration:none;color:var(--mist);padding:8px 10px;border-radius:4px}
.top nav a:hover,.top nav a[aria-current="page"]{color:var(--white);background:rgba(255,255,255,.08)}
@media (max-width:640px){.top{position:static}html{scroll-padding-top:0}.top nav{width:100%;margin-left:-10px}.top nav a{font-size:14px}}

/* bands */
.band{padding-block:clamp(56px,8vw,104px)}
.band.dark{background:var(--signal);color:var(--white)}
.band.washed{background:var(--wash)}
.eyebrow{margin:0;font:500 14px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
.dark .eyebrow{color:var(--go)}
.h2{font:700 var(--h2)/1.1 var(--display);letter-spacing:-.025em;text-wrap:balance;max-width:20ch}
.h3{font:700 clamp(20px,1.7vw,24px)/1.2 var(--display);letter-spacing:-.01em}
.sub{color:var(--ink2)}
.card{background:var(--card);border:1px solid var(--rule);border-radius:12px}
.go{color:var(--go)}
.num{font-variant-numeric:tabular-nums}
.body-copy{display:flex;flex-direction:column;gap:16px;max-width:44rem;color:var(--ink2)}
.body-copy a,.card a,.doc a{color:var(--signal);font-weight:600}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(72px,10vw,136px)}
.hero .stack{position:relative;z-index:1}
.hero h1{font:700 clamp(40px,7.2vw,100px)/1.03 var(--display);letter-spacing:-.03em}
.hero h1 .l{display:block}
.hero .lead{font-size:clamp(19px,1.8vw,25px);color:var(--mist);max-width:36ch}
.hero .lead strong{color:var(--white);font-weight:600}
.route{position:absolute;right:max(16px,4vw);bottom:clamp(24px,5vw,72px);width:min(42vw,580px);height:auto;pointer-events:none}
.route .ghost{fill:none;stroke:rgba(255,255,255,.14);stroke-width:2;stroke-dasharray:6 10}
.route .path{fill:none;stroke:var(--go);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;animation:draw 2.6s cubic-bezier(.4,0,.2,1) .3s both}
.route .stop{fill:var(--signal);stroke:var(--go);stroke-width:4}
.route .end{fill:var(--go)}
.route .endtxt{font:800 44px var(--display);fill:var(--signal)}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (max-width:1100px){.route{position:relative;right:auto;bottom:auto;display:block;width:min(100%,560px);margin:32px 0 0}}

/* what it covers */
.covers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:16px}
.covers li{padding:20px 22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.covers .sub{font-size:.95em}

/* emails: what a weekly summary looks like in an inbox */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:clamp(24px,4vw,56px);align-items:start}
.envelope{overflow:hidden}
.envelope dl{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 18px;padding:20px 22px}
.envelope dt{font:500 13px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.envelope dd{margin:0;min-width:0;overflow-wrap:anywhere}
.envelope code{font:500 .9em var(--mono);color:var(--signal)}
.envelope .cap{border-top:1px solid var(--rule);padding:14px 22px;font-size:.92em;color:var(--ink2)}
.rules{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:8px}

/* who runs it */
.facts{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px 24px;padding:22px 24px}
.facts dt{font:500 13px/1.7 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.entity{font:600 clamp(19px,1.6vw,23px)/1.4 var(--display);max-width:40rem;text-wrap:balance}

/* privacy page */
.pagehead{padding-block:clamp(48px,7vw,88px)}
.pagehead h1{font:700 clamp(36px,5.5vw,68px)/1.05 var(--display);letter-spacing:-.025em}
.pagehead .lead{color:var(--mist);max-width:44rem}
.pagehead .lead a{color:var(--white)}
.doc{padding-block:clamp(40px,6vw,72px)}
.doc .read{display:flex;flex-direction:column;gap:40px}
.doc section{display:flex;flex-direction:column;gap:14px}
.doc h2{font:700 clamp(22px,2vw,28px)/1.2 var(--display);letter-spacing:-.01em}
.doc p,.doc li{color:var(--ink2)}
.doc ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.tablebox{overflow-x:auto}
.tablebox table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.95em}
.tablebox th,.tablebox td{text-align:left;vertical-align:top;padding:12px 16px;border-top:1px solid var(--rule)}
.tablebox th{border-top:0;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tablebox td:first-child{font-weight:600;color:var(--ink)}

/* footer */
footer{background:var(--signal);color:var(--mist)}
footer .in-w{padding-block:28px calc(28px + env(safe-area-inset-bottom,0px));font:400 13px/1.6 var(--mono);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
footer a{color:var(--white)}
footer p{display:flex;flex-wrap:wrap;gap:4px 20px}
footer p.legal{display:block;max-width:44rem}

@media (max-width:30rem){
  .facts,.envelope dl{grid-template-columns:1fr;gap:2px}
  .facts dd,.envelope dd{margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){.route .path{animation:none}}