:root{--paper:#F4F6F8;--ink:#14233A;--text:#2B3442;--muted:#5F6B7A;--rule:#D8DEE6;--white:#fff;
--sans:'Schibsted Grotesk',system-ui,sans-serif;--serif:'Literata',Georgia,serif;--wrap:1160px;--measure:66ch}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--paper);color:var(--text);font:400 19px/1.65 var(--serif);font-optical-sizing:auto}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-ink)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px}
h1,h2,h3,.sans{font-family:var(--sans);color:var(--ink);line-height:1.12;letter-spacing:-.015em}
h1{font-weight:800;font-size:clamp(40px,5.4vw,64px);margin:0 0 .35em;text-wrap:balance}
h2{font-weight:750;font-size:clamp(28px,3vw,38px);margin:1.6em 0 .5em}
h3{font-weight:700;font-size:24px;margin:1.4em 0 .4em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:8px;background:var(--white);padding:8px 12px;z-index:9}

/* for-sale strip */
.strip{background:var(--ink);color:#DCE3EC;font:500 15px/1.4 var(--sans);padding:9px 0}
.strip p{margin:0}.strip a{color:var(--white);font-weight:700}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0}
.mark{font:800 24px/1 var(--sans);color:var(--ink);text-decoration:none;letter-spacing:-.03em}
.mark span{color:var(--muted);font-weight:500}
.nav{display:flex;gap:24px;font:500 16px/1 var(--sans)}
.nav a{color:var(--ink);text-decoration:none}.nav a:hover{color:var(--accent-ink)}
.nav .go{color:var(--accent-ink);font-weight:700}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;padding:40px 0 72px}
.lede{font-size:22px;line-height:1.55;max-width:34ch;margin:0 0 28px;color:var(--text)}
.motif{margin:0}.motif svg{width:100%;height:auto;overflow:visible}
.motif figcaption{font:italic 400 15px/1.5 var(--serif);color:var(--muted);margin-top:14px;max-width:46ch}
.bead circle,.bead rect{fill:var(--white);stroke:var(--ink);stroke-width:1.5}
.bead text{font:700 15px var(--sans);fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.bead.hit circle,.bead.hit rect{fill:var(--accent);stroke:var(--accent)}.bead.hit text{fill:var(--white)}
.chain{fill:none;stroke:var(--rule);stroke-width:3}
.giant{font:800 clamp(46px,6.2vw,92px)/1 var(--sans);color:var(--ink);overflow-wrap:anywhere;letter-spacing:-.03em;margin:0}
.giant sub{font-size:.5em;vertical-align:baseline;position:relative;top:.25em;color:var(--accent-ink)}
.giant .hit{color:var(--accent)}
@media (prefers-reduced-motion:no-preference){
 .bead.hit circle,.bead.hit rect{animation:fill .5s both;animation-delay:calc(var(--i)*35ms + 300ms)}
 @keyframes fill{from{fill:var(--white);stroke:var(--ink)}}
 .bead.hit text{animation:ink .5s both;animation-delay:calc(var(--i)*35ms + 300ms)}
 @keyframes ink{from{fill:var(--ink)}}}

/* forms */
.optin{max-width:520px}
.optin .row{display:flex;gap:8px}
.optin input[type=email]{flex:1;min-width:0;font:400 17px/1.2 var(--sans);padding:15px 16px;border:2px solid var(--ink);border-radius:6px;background:var(--white);color:var(--ink)}
.btn{font:700 17px/1.2 var(--sans);padding:15px 22px;border:0;border-radius:6px;background:var(--accent-ink);color:var(--white);cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block}
.btn:hover{background:var(--ink)}
.optin .fine{font:400 14px/1.45 var(--sans);color:var(--muted);margin:10px 0 0}
.optin .err{color:#A11D1D;font:600 15px var(--sans);margin:8px 0 0}
.optin.done .row,.optin.done .fine{display:none}
.optin .ok{font:500 17px/1.5 var(--sans);color:var(--ink);margin:0}
.optin .ok a{font-weight:700}

/* bands */
.band{background:var(--wash);padding:56px 0}
.band h2{margin-top:0}
.listen{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.play{width:88px;height:88px;border-radius:50%;border:0;background:var(--accent-ink);color:var(--white);cursor:pointer;display:grid;place-items:center}
.play:hover{background:var(--ink)}.play svg{width:34px;height:34px;fill:currentColor}
.play .i-pause,.playing .play .i-play{display:none}.playing .play .i-pause{display:block}
.ep-title{font:750 26px/1.2 var(--sans);color:var(--ink);margin:0 0 4px}
.ep-sub{margin:0 0 12px;color:var(--muted);font-size:16px}
.scrub{display:flex;align-items:center;gap:12px;font:500 15px var(--sans);color:var(--ink)}
.scrub input{flex:1;accent-color:var(--accent-ink);height:28px}
.ctl{display:flex;gap:8px;margin-top:10px}
.ctl button{font:600 15px var(--sans);background:transparent;border:1.5px solid var(--ink);color:var(--ink);border-radius:999px;padding:6px 14px;cursor:pointer}
.ctl button:hover{background:var(--white)}
details.tx{margin-top:24px}details.tx summary{font:600 16px var(--sans);cursor:pointer;color:var(--accent-ink)}
details.tx div{max-width:var(--measure);font-size:17px}

/* reading list */
.read{padding:72px 0}
.start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:0 0 56px}
.start a{text-decoration:none;color:inherit;display:block}
.start img{aspect-ratio:3/2;object-fit:cover;border-radius:4px;margin-bottom:16px;background:var(--wash)}
.start h3{font-size:26px;margin:0 0 8px}.start a:hover h3{color:var(--accent-ink)}
.start p,.rows p{margin:0;font-size:17px;line-height:1.5;color:var(--text)}
.rows{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 56px;list-style:none;padding:0;margin:0}
.rows a{font:700 20px/1.25 var(--sans);color:var(--ink);text-decoration:none}.rows a:hover{color:var(--accent-ink);text-decoration:underline}
.rows p{margin-top:6px}

/* magnet */
.magnet{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;align-items:start}
.peek{background:var(--white);border:1.5px solid var(--ink);border-radius:6px;padding:20px 22px;font:400 15px/1.45 var(--sans)}
.peek table{width:100%;border-collapse:collapse}.peek th{text-align:left;font-weight:700;color:var(--ink);padding:6px 10px 6px 0;border-bottom:2px solid var(--ink)}
.peek td{padding:8px 10px 8px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.peek .more{color:var(--muted);margin:12px 0 0;font-style:italic}

/* article */
.art{padding-top:24px;padding-bottom:72px}
.art header{max-width:820px}
.dek{font-size:22px;line-height:1.5;color:var(--text);margin:0 0 18px;max-width:40ch}
.byline{font:500 15px/1.5 var(--sans);color:var(--muted);margin:0 0 28px}
.art .cover{max-width:980px;margin:0 0 40px}.art .cover img{border-radius:4px;aspect-ratio:3/2;object-fit:cover}
.prose{max-width:var(--measure)}
.prose p,.prose li{font-size:19px}
.prose table{width:100%;border-collapse:collapse;margin:1.2em 0 2em;font:400 15px/1.45 var(--sans);background:var(--white)}
.prose th{text-align:left;font-weight:700;color:var(--ink);padding:10px 12px;border-bottom:2px solid var(--ink);vertical-align:bottom}
.prose td{padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.prose td:first-child{font-weight:600;color:var(--ink)}
.tool .prose{max-width:none}.tool .prose>:not(table){max-width:var(--measure)}
.prose blockquote{margin:1.4em 0;padding-left:20px;border-left:4px solid var(--accent);font-style:italic}
.inset{background:var(--wash);border-radius:6px;padding:26px 28px;margin:2.2em 0;max-width:var(--measure)}
.inset h3,.inset h2{margin-top:0;font-size:24px}.inset p{font-size:17px}
.sources{font-size:15px;line-height:1.5;color:var(--muted);max-width:var(--measure)}
.sources li{margin-bottom:6px;word-break:break-word}
.note{font:400 15px/1.5 var(--sans);color:var(--muted);max-width:var(--measure);border-top:1px solid var(--rule);padding-top:16px;margin-top:40px}
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;padding:0}
.next a{font:700 19px/1.3 var(--sans);color:var(--ink);text-decoration:none}.next a:hover{color:var(--accent-ink)}

/* footer */
.foot{border-top:1px solid var(--rule);padding:40px 0 56px;font:400 15px/1.55 var(--sans);color:var(--muted)}
.foot .cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
.foot a{color:var(--ink)}.foot h2{font-size:17px;margin:0 0 8px}
.consent{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;background:var(--white);border:2px solid var(--ink);border-radius:6px;padding:16px 18px;font:400 15px/1.45 var(--sans);z-index:5}
.consent p{margin:0 0 10px}.consent button{margin-right:8px}
.consent .no{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}

@media (max-width:900px){
 html,body{overscroll-behavior-y:none}
 html{height:100%;overflow:hidden;scroll-padding-top:0}
 body{position:relative;height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;scroll-padding-top:16px}
 table{display:block;overflow-x:auto}
 .prose th,.prose td{min-width:13em}.prose th:first-child,.prose td:first-child{min-width:8em}
 :is(input,textarea,select){font-size:16px!important}
 .hero,.magnet{grid-template-columns:minmax(0,1fr);gap:36px}
 .hero{padding:16px 0 48px}.motif{order:2}
 .start,.rows,.next,.foot .cols{grid-template-columns:minmax(0,1fr)}.start{gap:32px}
 .nav{gap:16px;font-size:15px}.nav .hide-s{display:none}.mark{font-size:20px}
 .lede,.dek{font-size:19px}
 .optin .row{flex-direction:column}
 .listen{grid-template-columns:minmax(0,1fr)}.play{width:72px;height:72px}
 body{font-size:18px}.prose p,.prose li{font-size:18px}
}
@media (max-width:440px){.nav a:not(.go){display:none}}
