:root{
  --bg:#F4F1EB; --bg-2:#ECE8E0; --tile:#E2DDD3; --tile-2:#D6D0C4;
  --ink:#151411; --ink-soft:#45423B; --muted:#7B766C;
  --line:#D8D2C7; --line-strong:#151411;
  --sig:#E0531A; --sig-soft:rgba(224,83,26,.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E0D0B; --bg-2:#151411; --tile:#1D1B18; --tile-2:#25231F;
    --ink:#F2EEE6; --ink-soft:#C5C0B6; --muted:#8F8A80;
    --line:#2A2824; --line-strong:#F2EEE6;
    --sig:#FF6A2B; --sig-soft:rgba(255,106,43,.12);
  }
}
:root[data-theme="dark"]{
  --bg:#0E0D0B; --bg-2:#151411; --tile:#1D1B18; --tile-2:#25231F;
  --ink:#F2EEE6; --ink-soft:#C5C0B6; --muted:#8F8A80;
  --line:#2A2824; --line-strong:#F2EEE6;
  --sig:#FF6A2B; --sig-soft:rgba(255,106,43,.12);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Schibsted Grotesk",system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
body.intro-on{overflow:hidden}
a{color:inherit}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}

/* =========================================================
   INTRO: five seconds of small systems from a day, then the reveal
   ========================================================= */
.intro{
  --i-bg:#0B0B0A; --i-ink:#F2EEE6; --i-muted:#77736B; --i-line:#2B2925; --i-sig:#FF6A2B;
  position:fixed;inset:0;z-index:50;background:var(--i-bg);color:var(--i-ink);overflow:hidden;
  background-image:radial-gradient(circle,rgba(242,238,230,.09) 1px,transparent 1.2px);background-size:28px 28px;
  transition:transform .9s cubic-bezier(.76,0,.24,1),opacity .9s ease;
}
.intro.lift{transform:translateY(-100%)}
.intro.gone{display:none}
.chain{position:absolute;display:flex;align-items:center;gap:0;font:500 clamp(13px,1.15vw,16px)/1 "JetBrains Mono",monospace;letter-spacing:.02em;transition:opacity .6s ease,filter .6s ease,transform .8s cubic-bezier(.6,0,.2,1)}
.chain .n{padding:11px 15px;border:1px solid var(--i-line);background:rgba(11,11,10,.85);white-space:nowrap;opacity:0;transform:translateY(6px);animation:nodeIn .45s ease forwards;animation-delay:calc(var(--d) + var(--k) * .55s)}
.chain .n.end{border-color:var(--i-sig);color:var(--i-sig)}
.chain .w{position:relative;width:clamp(30px,4.2vw,64px);height:1px;background:var(--i-muted);transform:scaleX(0);transform-origin:left;animation:wireIn .3s ease forwards;animation-delay:calc(var(--d) + var(--k) * .55s - .18s)}
.chain .w::after{content:"";position:absolute;top:-2.5px;left:0;width:6px;height:6px;border-radius:50%;background:var(--i-sig);opacity:0;animation:packet 1.1s linear infinite;animation-delay:calc(var(--d) + var(--k) * .55s + .4s)}
@keyframes nodeIn{to{opacity:1;transform:none}}
@keyframes wireIn{to{transform:scaleX(1)}}
@keyframes packet{0%{left:0;opacity:1}90%{opacity:1}100%{left:calc(100% - 6px);opacity:0}}

.c1{left:7%;top:12%;--d:.3s}
.c2{right:7%;top:9%;--d:.9s}
.c6{left:4%;top:35%;--d:1.5s}
.c7{right:5%;top:32%;--d:2.1s}
.c3{left:6%;top:61%;--d:2.7s}
.c4{right:6%;top:67%;--d:3.3s}
.c5{left:50%;top:84%;--d:3.8s;transform:translateX(-50%)}

/* the moment it all connects: lines from every outcome into one point */
.links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.links .base{fill:none;stroke:var(--i-sig);stroke-width:1;opacity:.55;transition:stroke-dashoffset .9s cubic-bezier(.6,0,.2,1)}
.links .flow{fill:none;stroke:var(--i-sig);stroke-width:2;stroke-dasharray:3 14;opacity:0;transition:opacity .4s ease .7s;animation:flow .9s linear infinite}
.intro.link .links .flow{opacity:.95}
@keyframes flow{to{stroke-dashoffset:-17}}
.hub{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:12px;opacity:0;transition:opacity .5s ease .5s}
.hub i{width:16px;height:16px;border-radius:50%;background:var(--i-sig);box-shadow:0 0 0 0 rgba(255,106,43,.5);animation:ring 1.4s ease-out infinite}
.hub span{font:500 12.5px/1 "JetBrains Mono",monospace;color:var(--i-ink);letter-spacing:.04em;white-space:nowrap;background:var(--i-bg);padding:4px 8px}
@keyframes ring{to{box-shadow:0 0 0 22px rgba(255,106,43,0)}}
.intro.link .hub{opacity:1}
.intro.join .links,.intro.join .hub{opacity:0;transition:opacity .5s ease}

.intro .hud{position:absolute;left:32px;right:32px;bottom:26px;display:flex;align-items:center;gap:16px;font:500 12px/1 "JetBrains Mono",monospace;color:var(--i-muted)}
.intro .hud .bar{flex:1;height:1px;background:var(--i-line);position:relative;overflow:hidden}
.intro .hud .bar i{position:absolute;inset:0;background:var(--i-sig);transform:scaleX(0);transform-origin:left;animation:load 10s cubic-bezier(.4,0,.2,1) forwards}
@keyframes load{to{transform:scaleX(1)}}
.intro .tag{position:absolute;left:32px;top:26px;font:500 12px/1 "JetBrains Mono",monospace;color:var(--i-muted);display:flex;gap:10px;align-items:center}
.intro .tag b{width:8px;height:8px;background:var(--i-sig);display:inline-block;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.skip{position:absolute;right:32px;top:18px;background:none;border:1px solid var(--i-line);color:var(--i-ink);font:500 12px/1 "JetBrains Mono",monospace;padding:10px 14px;cursor:pointer}
.skip:hover{border-color:var(--i-sig);color:var(--i-sig)}

.intro .core{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}
.intro .core > div{opacity:0;transform:scale(.96);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.intro .core h2{margin:0;font:800 clamp(46px,8.5vw,120px)/.92 "Schibsted Grotesk",sans-serif;letter-spacing:-.045em}
.intro .core p{margin:18px 0 0;font:500 clamp(14px,1.5vw,17px)/1.4 "JetBrains Mono",monospace;color:var(--i-muted)}
.intro .core p span{color:var(--i-sig)}
.intro.join .chain{opacity:0;filter:blur(6px);transform:scale(.92)}
.intro.join .c5{transform:translateX(-50%) scale(.92)}
.intro.join .core > div{opacity:1;transform:none}

/* =========================================================
   SITE
   ========================================================= */
header.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:22px;height:64px}
.mark{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.mark b{font-weight:800;font-size:19px;letter-spacing:-.03em}
.mark span{font:500 11.5px "JetBrains Mono",monospace;color:var(--muted)}
header.top nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-weight:600;font-size:14.5px}
header.top nav a{text-decoration:none}
header.top nav a:not(.btn):hover{color:var(--sig)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:700;font-size:14.5px;border:0}
.btn:hover{background:var(--sig);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--sig);color:var(--sig);background:transparent}

/* hero: the identity + today's vlog */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;padding:64px 0 56px}
.hero .pre{font:500 12.5px "JetBrains Mono",monospace;color:var(--muted);display:flex;align-items:center;gap:10px}
.hero .pre i{width:7px;height:7px;border-radius:50%;background:var(--sig);display:inline-block}
.hero h1{margin:18px 0 0;font-weight:800;font-size:clamp(42px,5.6vw,80px);line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--sig)}
.hero .lede{margin:22px 0 0;font-size:19px;line-height:1.5;color:var(--ink-soft);max-width:44ch}
.hero .motto{margin:18px 0 0;font:italic 400 20px/1.4 "Newsreader",serif;color:var(--muted)}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

.player{position:relative;aspect-ratio:16/9;background:var(--tile);overflow:hidden;display:block;text-decoration:none}
.player .play{position:absolute;left:50%;top:50%;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;background:var(--sig);display:grid;place-items:center;transition:transform .2s}
.player:hover .play{transform:scale(1.06)}
.player .play::after{content:"";border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.player .ph{position:absolute;left:14px;top:12px;font:500 11px "JetBrains Mono",monospace;color:var(--muted)}
.player .dur{position:absolute;right:12px;bottom:12px;font:600 12px "JetBrains Mono",monospace;background:rgba(0,0,0,.72);color:#fff;padding:5px 8px}
.ep{display:flex;justify-content:space-between;gap:16px;margin-top:14px;align-items:baseline}
.ep b{font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.ep span{font:500 12px "JetBrains Mono",monospace;color:var(--muted);white-space:nowrap}

/* currently building: a moving ticker */
.ticker{border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);overflow:hidden;display:flex;align-items:stretch}
.ticker .lbl{flex:none;display:flex;align-items:center;gap:9px;padding:0 18px 0 0;font:600 12px "JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.08em;background:var(--bg);position:relative;z-index:1}
.ticker .lbl i{width:7px;height:7px;background:var(--sig);display:inline-block}
.ticker .track{display:flex;width:max-content;animation:tick 38s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker .item{display:flex;align-items:baseline;gap:10px;padding:15px 34px 15px 0;white-space:nowrap}
.ticker .item b{font-weight:700}
.ticker .item span{color:var(--muted);font-size:15px}
.ticker .item em{font:500 11px "JetBrains Mono",monospace;font-style:normal;color:var(--sig)}
@keyframes tick{to{transform:translateX(-50%)}}

/* Day to Day: one free-flowing stream, no categories */
.sh{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:56px 0 22px}
.sh h2{margin:0;font-weight:800;font-size:clamp(28px,3vw,40px);letter-spacing:-.035em;line-height:1.05}
.sh p{margin:6px 0 0;color:var(--muted);font-size:16px}
.sh a{font-weight:700;font-size:14.5px;text-decoration:none;border-bottom:2px solid var(--sig);padding-bottom:2px;white-space:nowrap}

.feed{columns:3 330px;column-gap:28px}
.post{break-inside:avoid;margin:0 0 28px;display:block;text-decoration:none}
.when{display:flex;gap:10px;align-items:center;font:500 11.5px "JetBrains Mono",monospace;color:var(--muted);margin-bottom:10px}
.when .dot{width:4px;height:4px;border-radius:50%;background:var(--muted)}
.when .ship{color:var(--sig);font-weight:600}
.media{position:relative;background:var(--tile);overflow:hidden}
.media.t{aspect-ratio:4/5}.media.w{aspect-ratio:16/10}.media.s{aspect-ratio:1/1}
.media.alt{background:var(--tile-2)}
.media .ph{position:absolute;left:12px;top:10px;font:500 10.5px "JetBrains Mono",monospace;color:var(--muted)}
.media .dur{position:absolute;right:10px;bottom:10px;font:600 11px "JetBrains Mono",monospace;background:rgba(0,0,0,.72);color:#fff;padding:4px 7px}
.media .mini{position:absolute;left:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:var(--sig);display:grid;place-items:center}
.media .mini::after{content:"";border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.post h3{margin:12px 0 0;font-weight:700;font-size:21px;line-height:1.22;letter-spacing:-.02em}
.post p{margin:7px 0 0;color:var(--ink-soft);font-size:16px;line-height:1.5}
.post:hover h3{color:var(--sig)}
.post.note{padding:22px 0;border-top:1.5px solid var(--line-strong);border-bottom:1px solid var(--line)}
.post.note blockquote{margin:0;font:italic 400 25px/1.35 "Newsreader",serif;letter-spacing:-.005em}
.post.ship{padding:18px 18px 20px;background:var(--sig-soft)}
.post.ship h3{margin-top:4px}
.post.ship .bar{height:3px;background:var(--line);margin-top:14px;position:relative}
.post.ship .bar i{position:absolute;inset:0;right:auto;background:var(--sig)}
.post.ship .bar + span{display:block;margin-top:6px;font:500 11px "JetBrains Mono",monospace;color:var(--muted)}

/* close: from the day-to-day to doing business */
.close{margin-top:40px;border-top:1px solid var(--line-strong);padding:60px 0 64px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:end}
.close h2{margin:0;font-weight:800;font-size:clamp(34px,4.4vw,60px);line-height:1;letter-spacing:-.045em}
.close h2 em{font-style:normal;color:var(--sig)}
.close p{margin:16px 0 0;color:var(--ink-soft);font-size:18.5px;max-width:46ch}
.close .acts{display:grid;gap:10px}
.close .acts .btn{justify-content:space-between;padding:17px 20px;font-size:15.5px}
.follow{display:flex;gap:18px;flex-wrap:wrap;font:500 12.5px "JetBrains Mono",monospace;color:var(--muted);margin-top:6px}
.follow a{text-decoration:none;color:var(--ink)}
.follow a:hover{color:var(--sig)}

footer{border-top:1px solid var(--line);padding:22px 0 48px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font:500 12px "JetBrains Mono",monospace;color:var(--muted)}
footer button{background:none;border:0;padding:0;font:inherit;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* site entrance after the intro lifts */
.rise{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
body.ready .rise{opacity:1;transform:none}
body.ready .rise.d2{transition-delay:.12s} body.ready .rise.d3{transition-delay:.24s}

/* ---------- narrow widths (kept after the base rules) ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:minmax(0,1fr);gap:36px;padding:44px 0 44px}
  .close{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  header.top .wrap{height:58px;gap:14px}
  header.top nav{gap:14px}
  header.top nav .hide-s{display:none}
  .mark span{display:none}
  .btn{padding:10px 13px}
  .hero{padding:32px 0 36px}
  .hero .lede{font-size:17.5px}
  .sh{flex-direction:column;padding:44px 0 18px}
  .feed{columns:1}
  .post.note blockquote{font-size:22px}
  .close{padding:44px 0 48px}
  footer{flex-direction:column}

  .chain{font-size:11px}
  .chain .n{padding:7px 8px}
  .chain .w{width:18px}
  .c1{left:16px;top:10%}
  .c2{left:auto;right:16px;top:19%}
  .c6{left:16px;top:28%}
  .c7{left:auto;right:16px;top:62%}
  .c3{left:16px;top:71%}
  .c4{right:16px;top:80%}
  .c5{display:none}
  .hub{top:46%}
  .intro .hud{left:16px;right:16px;bottom:20px}
  .intro .tag{left:16px;top:22px}
  .skip{right:16px;top:14px}
}
@media (max-width:380px){
  .chain{font-size:10px}
  .chain .w{width:12px}
  .chain .n{padding:6px 6px}
}
@media (prefers-reduced-motion:reduce){
  .ticker .track{animation:none}
  .rise{transition:none}
}


/* ---------- real-site additions ---------- */
/* no JavaScript: no intro, content visible. Returning visitors: no flash of the intro. */
html:not(.js) .intro,.intro-skip .intro{display:none}
html:not(.js) .rise{opacity:1;transform:none}
.media img,.player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
a.post.note{text-decoration:none}
.empty{border:1.5px dashed var(--line);padding:28px;color:var(--muted);font-size:16px}

/* post page */
.article{max-width:760px;margin:0 auto;padding:56px 0 24px}
.article .when{margin-bottom:16px}
.article h1{margin:0;font-weight:800;font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.article .summary{margin:18px 0 0;font:italic 400 22px/1.45 "Newsreader",serif;color:var(--ink-soft)}
.article .lead-media{margin:32px 0 0}
.article .lead-media .media{aspect-ratio:16/9}
.article .lead-media figcaption{margin-top:8px;font:500 12px "JetBrains Mono",monospace;color:var(--muted)}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;background:var(--tile);border:0;padding:0;cursor:pointer;overflow:hidden}
.yt .play{position:absolute;left:50%;top:50%;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;background:var(--sig);display:grid;place-items:center}
.yt .play::after{content:"";border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.article iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.prose{margin-top:34px;font-size:19px;line-height:1.7;color:var(--ink)}
.prose p,.prose ul,.prose ol,.prose blockquote{margin:0 0 1.1em}
.prose h2{margin:1.6em 0 .5em;font-weight:800;font-size:28px;letter-spacing:-.03em}
.prose h3{margin:1.4em 0 .4em;font-weight:700;font-size:22px}
.prose a{color:var(--sig);text-underline-offset:3px}
.prose blockquote{border-left:3px solid var(--sig);padding-left:18px;font:italic 400 22px/1.45 "Newsreader",serif;color:var(--ink-soft)}
.prose img{max-width:100%;height:auto;display:block}
.prose code{font-family:"JetBrains Mono",monospace;font-size:.88em;background:var(--tile);padding:2px 5px}
.pager{max-width:760px;margin:40px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--line);padding-top:20px}
.pager a{text-decoration:none;display:block}
.pager span{display:block;font:500 11.5px "JetBrains Mono",monospace;color:var(--muted);margin-bottom:6px}
.pager b{font-weight:700;font-size:17px;letter-spacing:-.01em}
.pager a:hover b{color:var(--sig)}
.pager .next{text-align:right}
.back{display:inline-block;margin-bottom:22px;font:500 12.5px "JetBrains Mono",monospace;color:var(--muted);text-decoration:none}
.back:hover{color:var(--sig)}
.nf{padding:120px 0 80px;max-width:640px}
.nf h1{font-weight:800;font-size:clamp(40px,6vw,72px);letter-spacing:-.04em;line-height:1;margin:0}
.nf p{color:var(--ink-soft);font-size:19px;margin:18px 0 26px}
@media (max-width:760px){
  .article{padding:32px 0 16px}
  .article .summary{font-size:19px}
  .prose{font-size:17.5px}
  .pager{grid-template-columns:1fr}
  .pager .next{text-align:left}
}

/* tap targets: at least 44px (Web Developer rule) */
.btn{min-height:44px}
header.top nav a:not(.btn),.mark{min-height:44px;display:inline-flex;align-items:center}
footer a,footer button{min-height:44px;display:inline-flex;align-items:center}
header.top nav a,.mark{white-space:nowrap}
@media (max-width:760px){ header.top nav a.hide-s{display:none} }