:root{
  --bg:#16140f; --fg:#ece7df; --muted:#b3aa9c; --line:#2c2820;
  --rule:#473f30;            /* dotted rules — higher contrast */
  --ember:#e8913c; --ember-dim:#a8703a;
  --font:"Schibsted Grotesk",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--fg);font-family:var(--font);
  line-height:1.5;-webkit-font-smoothing:antialiased;
  padding:clamp(28px,6vw,90px) clamp(22px,7vw,120px) 60px;
  position:relative;max-width:1180px;margin:0 auto;
}
body::before{content:"";position:fixed;inset:0;z-index:-1;
  background-image:radial-gradient(rgba(232,145,60,.05) 1px,transparent 1px);
  background-size:15px 15px;}
a{color:inherit;text-decoration:none}
a:focus-visible,.now:focus-within{outline:2px solid var(--ember);outline-offset:3px;border-radius:3px}

/* ---- hero ---- */
header{max-width:760px;margin-bottom:clamp(40px,7vw,68px)}
.handle{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ember);margin-bottom:20px}
h1{font-size:clamp(46px,9vw,86px);font-weight:800;letter-spacing:-.03em;line-height:.98;text-wrap:balance}
.lead{font-size:clamp(18px,2.4vw,23px);color:var(--fg);margin-top:26px;max-width:33ch;font-weight:400}
.lead .dim{color:var(--muted)}
.links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;font-family:var(--mono);font-size:13px}
.links a{color:var(--muted);border-bottom:1px dotted var(--ember-dim);padding-bottom:2px;transition:color .15s}
.links a:hover{color:var(--ember)}

/* ---- now (highlighted panel) ---- */
.now{font-family:var(--mono);font-size:13.5px;color:var(--fg);
  display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;
  max-width:760px;margin-bottom:clamp(48px,8vw,80px);
  padding:16px 20px;border-radius:11px;
  background:linear-gradient(180deg,rgba(232,145,60,.10),rgba(232,145,60,.04));
  border:1px solid rgba(232,145,60,.28);
  box-shadow:0 0 0 1px rgba(232,145,60,.04), 0 8px 30px -16px rgba(232,145,60,.45);}
.now b{color:var(--ember);font-weight:600;letter-spacing:.12em;font-size:11px;white-space:nowrap;display:flex;align-items:center;gap:7px}
.now span.txt{color:var(--muted)}
.now .blink{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 0 0 rgba(232,145,60,.55);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,145,60,.5)}70%{box-shadow:0 0 0 7px rgba(232,145,60,0)}100%{box-shadow:0 0 0 0 rgba(232,145,60,0)}}
@media(prefers-reduced-motion:reduce){.now .blink{animation:none}html{scroll-behavior:auto}}

/* ---- project groups ---- */
.group{margin-bottom:clamp(44px,7vw,72px)}
.group > .gl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ember);
  text-transform:uppercase;display:flex;align-items:center;gap:14px;margin-bottom:26px}
.group > .gl::after{content:"";flex:1;height:0;border-top:1px dotted var(--rule)}

.proj{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 18px;
  padding:18px 0;border-top:1px dotted var(--rule);align-items:baseline}
.proj:last-child{border-bottom:1px dotted var(--rule)}
.proj .name{font-size:20px;font-weight:700;letter-spacing:-.01em}
.proj .name .tag{font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:400;margin-left:10px;letter-spacing:.02em}
.proj .desc{grid-column:1;color:var(--muted);font-size:15px;max-width:62ch;margin-top:3px}
.proj .go{grid-column:2;grid-row:1;font-family:var(--mono);font-size:12px;color:var(--ember-dim);
  align-self:start;white-space:nowrap;transition:color .15s}
.proj .go.static{color:var(--muted);opacity:.7}
a.proj{color:inherit}
a.proj:hover .go{color:var(--ember)}
a.proj:hover .name{color:#fff}
.kids{grid-column:1;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.kids span{color:var(--ember-dim)}

/* ---- writing teaser (home) ---- */
.writing{margin-bottom:clamp(44px,7vw,72px);max-width:760px}
.writing .gl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ember);text-transform:uppercase;display:flex;align-items:center;gap:14px;margin-bottom:18px}
.writing .gl::after{content:"";flex:1;height:0;border-top:1px dotted var(--rule)}
.writing p{color:var(--muted);font-size:16px;max-width:54ch}
.writing a.more{font-family:var(--mono);font-size:13px;color:var(--ember);border-bottom:1px dotted var(--ember-dim);padding-bottom:2px}

/* ---- writing page (empty state) ---- */
.writing-page{max-width:640px;margin-top:clamp(20px,6vw,60px)}
.writing-page .back{font-family:var(--mono);font-size:12px;color:var(--muted);border-bottom:1px dotted var(--ember-dim);padding-bottom:2px}
.writing-page .back:hover{color:var(--ember)}
.writing-page h1{font-size:clamp(36px,7vw,60px);margin-top:30px}
.writing-page .empty{font-family:var(--mono);font-size:13px;color:var(--ember);margin-top:28px;letter-spacing:.04em;display:flex;align-items:center;gap:9px}
.writing-page .empty .blink{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 0 rgba(232,145,60,.55);animation:pulse 2.4s ease-out infinite}
.writing-page p{color:var(--muted);font-size:16px;margin-top:18px;max-width:52ch}

/* ---- footer ---- */
footer{border-top:1px dotted var(--rule);padding-top:24px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:12px;color:var(--muted)}
footer .fl{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--muted)}
footer a:hover{color:var(--ember)}

@media(max-width:620px){
  .proj{grid-template-columns:1fr}
  .proj .go{grid-column:1;grid-row:auto;margin-top:6px}
}