/* Hallmark · macrostructure: Split Studio · tone: modern-minimal / swiss-precise · anchor hue: ink-blue
 · pre-emit critique: P5 H5 E4 S5 R5 V5
 · nav: precise masthead · footer: Ft4 dense colophon · enrichment: none (typography only)
 · contrast: pass (46-50) · slop: pass (51-55) · honest: pass (56) · tokens: pass (58)
 · responsive: pass (59) · mobile: pass (36, 61-67)
 · type: Schibsted Grotesk + Geist Mono (code = outlier role) · 2 families
*/
:root{
  /* colour */
  --paper:      oklch(98.5% 0.003 250);
  --paper-2:    oklch(96% 0.004 250);
  --ink:        oklch(22% 0.012 260);
  --ink-soft:   oklch(40% 0.012 260);
  --ink-mute:   oklch(50% 0.010 262);
  --accent:     oklch(47% 0.155 252);
  --accent-ink: oklch(98% 0.010 250);
  --rule:       oklch(88% 0.006 260);
  --rule-ink:   oklch(22% 0.012 260);
  /* type */
  --font-body:  "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-label: 0.6875rem;
  --text-sm:    0.8125rem;
  --text-meta:  0.875rem;
  --text-body:  1.0625rem;
  --text-md:    1.1875rem;
  --text-lg:    1.5rem;
  --text-xl:    2rem;
  --text-display: clamp(2.6rem, 4.5vw + 1rem, 4.1rem);
  /* space — 4pt scale */
  --space-2xs:  0.5rem;
  --space-xs:   0.75rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;
  /* motion */
  --ease-out:   cubic-bezier(.2,.7,.2,1);
  --dur:        .2s;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{overflow-x:clip;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
::selection{background:var(--accent);color:var(--accent-ink);}
a{color:inherit;text-decoration:none;}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.frame{max-width:68rem;margin:0 auto;padding:0 var(--space-md);}

/* label utility */
.label{
  font-size:var(--text-label);text-transform:uppercase;letter-spacing:.15em;
  font-weight:600;color:var(--ink-mute);
}

/* masthead */
.topbar .frame{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  padding:var(--space-md) var(--space-md);
  border-bottom:1px solid var(--rule-ink);
}
.wordmark{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;}
.topnav{display:flex;gap:var(--space-md);flex-wrap:wrap;}
.topnav a{
  font-size:var(--text-meta);font-weight:500;color:var(--ink-soft);
  white-space:nowrap;transition:color var(--dur) var(--ease-out);
}
.topnav a:hover{color:var(--accent);}
.topnav a:active{color:var(--ink);}

/* hero diptych */
.hero{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:var(--space-xl);
  padding:var(--space-xl) 0 var(--space-2xl);
  border-bottom:1px solid var(--rule-ink);
}
.hero-statement h1{
  font-size:var(--text-display);font-weight:760;line-height:1.04;
  letter-spacing:-.035em;overflow-wrap:anywhere;min-width:0;
}
.hero-sub{
  margin-top:var(--space-md);font-size:var(--text-md);color:var(--ink-soft);
  max-width:30rem;line-height:1.45;
}
.meta-panel{
  border-top:2px solid var(--rule-ink);
  padding-left:var(--space-md);border-left:1px solid var(--rule);
}
.mrow{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-sm);
  padding:var(--space-xs) 0;border-bottom:1px solid var(--rule);
}
.mrow dt{font-size:var(--text-label);text-transform:uppercase;letter-spacing:.13em;font-weight:600;color:var(--ink-mute);}
.mrow dd{font-size:var(--text-meta);font-weight:500;text-align:right;}

/* section block */
.block{padding:var(--space-xl) 0;border-bottom:1px solid var(--rule);}
.block:last-of-type{border-bottom:none;}
.block-head{margin-bottom:var(--space-lg);}
.block-head h2{font-size:var(--text-xl);font-weight:780;letter-spacing:-.025em;line-height:1.1;overflow-wrap:anywhere;min-width:0;}
.block-note{margin-top:.25rem;font-size:var(--text-meta);color:var(--ink-mute);}

/* writing table */
.whead,.wrow{
  display:grid;grid-template-columns:3.2rem minmax(0,1fr) 11rem 6.5rem;
  gap:var(--space-sm) var(--space-md);align-items:baseline;
}
.whead{
  padding:0 var(--space-xs) var(--space-xs);
  border-bottom:2px solid var(--rule-ink);
}
.whead span{font-size:var(--text-label);text-transform:uppercase;letter-spacing:.13em;font-weight:600;color:var(--ink-mute);}
.wrow{
  padding:var(--space-sm) var(--space-xs);
  border-bottom:1px solid var(--rule);
  transition:background var(--dur) var(--ease-out);
}
.wrow:hover{background:var(--paper-2);}
.w-num{font-size:var(--text-meta);font-weight:600;color:var(--ink-mute);transition:color var(--dur) var(--ease-out);}
.w-title{
  font-size:var(--text-md);font-weight:600;letter-spacing:-.012em;line-height:1.22;
  overflow-wrap:anywhere;min-width:0;transition:color var(--dur) var(--ease-out);
}
.w-topic{font-size:var(--text-sm);color:var(--ink-soft);}
.w-date{font-size:var(--text-sm);color:var(--ink-mute);}
.wrow:hover .w-num{color:var(--accent);}
.wrow:hover .w-title{color:var(--accent);}
.wrow:active .w-title{color:var(--ink);}
.wrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}

/* project rows */
.prow{
  display:grid;grid-template-columns:3.2rem minmax(0,11rem) minmax(0,1fr);
  gap:var(--space-sm) var(--space-md);align-items:baseline;
  padding:var(--space-sm) var(--space-xs);border-bottom:1px solid var(--rule);
}
.prow:first-of-type{border-top:2px solid var(--rule-ink);}
.p-num{font-size:var(--text-meta);font-weight:600;color:var(--ink-mute);}
.p-name{font-size:var(--text-md);font-weight:600;color:var(--ink-mute);letter-spacing:-.012em;}
.p-desc{font-size:var(--text-meta);color:var(--ink-mute);}
.placeholder-note{margin-top:var(--space-md);font-size:var(--text-meta);color:var(--ink-mute);font-style:italic;}

/* work rows */
.jrow{
  display:grid;grid-template-columns:9rem minmax(0,1fr);
  gap:var(--space-sm) var(--space-md);align-items:baseline;
  padding:var(--space-sm) var(--space-xs);border-bottom:1px solid var(--rule);
}
.jrow:first-of-type{border-top:2px solid var(--rule-ink);}
.j-year{font-size:var(--text-meta);font-weight:600;color:var(--accent);}
.j-role{font-size:var(--text-md);font-weight:600;letter-spacing:-.012em;}
.j-co{font-size:var(--text-meta);color:var(--ink-soft);margin-top:.1rem;}
.yc{
  font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  background:var(--accent);color:var(--accent-ink);padding:.28em .5em;
  border-radius:2px;margin-left:.4rem;white-space:nowrap;vertical-align:.1em;
}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--space-xl);}
.about-prose{max-width:38rem;}
.about-prose p{font-size:var(--text-body);}
.about-prose p + p{margin-top:var(--space-sm);}
.about-prose a{color:var(--accent);font-weight:500;border-bottom:1px solid var(--rule);}
.about-prose a:hover{border-bottom-color:var(--accent);}
.about-facts{border-top:2px solid var(--rule-ink);padding-left:var(--space-md);border-left:1px solid var(--rule);}

/* footer */
.foot{border-top:2px solid var(--rule-ink);margin-top:var(--space-lg);}
.foot .frame{padding:var(--space-lg) var(--space-md);}
.foot-main{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-md);align-items:flex-start;}
.foot-brand .wordmark{font-size:1.05rem;}
.foot-tag{font-size:var(--text-meta);color:var(--ink-mute);margin-top:.3rem;}
.foot-links{display:flex;gap:var(--space-md);flex-wrap:wrap;}
.foot-links a{
  font-size:var(--text-meta);font-weight:500;color:var(--ink-soft);
  white-space:nowrap;transition:color var(--dur) var(--ease-out);
}
.foot-links a:hover{color:var(--accent);}
.foot-base{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2xs);
  margin-top:var(--space-md);padding-top:var(--space-sm);border-top:1px solid var(--rule);
  font-size:var(--text-label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);
}

/* article column — wider so figures can breathe; text constrained inside */
.post{max-width:52rem;margin:0 auto;padding:0 var(--space-md) var(--space-xl);}
.post > .backlink,
.post > .post-head,
.post > .post-end{max-width:42rem;margin-left:auto;margin-right:auto;}
.article > p,
.article > h2,
.article > h3,
.article > ul,
.article > ol,
.article > blockquote,
.article > aside,
.article > pre,
.article > .highlight,
.article > .code-card,
.article > .code-pair,
.article > table{max-width:42rem;margin-left:auto;margin-right:auto;}
.article > .figure,
.article > .anim-trace{max-width:none;}
.backlink{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:var(--space-lg);font-size:var(--text-meta);font-weight:600;color:var(--ink-mute);
  transition:color var(--dur) var(--ease-out);
}
.backlink:hover{color:var(--accent);}
.backlink:active{color:var(--ink);}

.post-head{padding:var(--space-lg) 0 0;}
.post-h1{
  font-size:clamp(2.4rem,5vw + 1rem,3.3rem);font-weight:820;letter-spacing:-.04em;
  line-height:1.04;overflow-wrap:anywhere;min-width:0;
}
.post-meta{
  display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-md);
  margin-top:var(--space-md);padding-top:var(--space-sm);
  border-top:1px solid var(--rule-ink);
  font-size:var(--text-sm);color:var(--ink-mute);
}
.post-meta .topic{color:var(--accent);font-weight:600;}

/* prose */
.article{padding:var(--space-lg) 0 var(--space-xl);line-height:1.72;}
.article > p{margin-top:var(--space-md);}
.article h2{
  margin-top:var(--space-xl);padding-top:var(--space-md);
  border-top:1px solid var(--rule);
  font-size:var(--text-lg);font-weight:800;letter-spacing:-.025em;line-height:1.15;
  overflow-wrap:anywhere;min-width:0;
}
.article h3{
  margin-top:var(--space-lg);
  font-size:var(--text-md);font-weight:700;letter-spacing:-.015em;
}
.article a{
  color:var(--accent);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px;
  transition:text-decoration-thickness var(--dur) var(--ease-out);
}
.article a:hover{text-decoration-thickness:2px;}
.article a:active{color:var(--ink);}
.article em{font-style:italic;}
.article strong{font-weight:700;}
.article code{
  font-family:var(--font-mono);font-size:.82em;
  background:var(--paper-2);padding:.14em .38em;border-radius:2px;
}
.codeblock{
  margin-top:var(--space-md);background:var(--paper-2);
  border:1px solid var(--rule);padding:var(--space-sm) var(--space-md);
  overflow-x:auto;
}
.codeblock code{
  background:none;padding:0;font-size:.84rem;line-height:1.5;
  color:var(--ink);white-space:pre;
}
.article blockquote{
  margin-top:var(--space-md);padding-left:var(--space-md);
  border-left:2px solid var(--accent);
  color:var(--ink-soft);font-size:1.08rem;line-height:1.6;
}
.figure{margin:var(--space-lg) 0;}
.figure img{
  display:block;max-width:100%;height:auto;margin:0 auto;
  border:1px solid var(--rule);background:var(--paper);
}
.figure figcaption{
  margin-top:var(--space-sm);text-align:center;
  font-size:var(--text-sm);color:var(--ink-mute);
}
.callout{
  margin-top:var(--space-md);background:var(--paper-2);
  border:1px solid var(--rule);padding:var(--space-md);
}
.callout p{margin:0;}

/* article tables */
.article table{
  width:100%;margin-top:var(--space-md);margin-bottom:var(--space-md);
  border-collapse:collapse;
  border:1px solid var(--rule);background:var(--paper-2);
  font-size:var(--text-sm);
}
.article table thead th{
  text-align:left;padding:.6rem .85rem;
  font-family:var(--font-mono);font-size:var(--text-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.13em;color:var(--ink-mute);
  background:var(--paper);border-bottom:1px solid var(--rule);vertical-align:bottom;
}
.article table tbody td{
  padding:.6rem .85rem;border-bottom:1px solid var(--rule);
  vertical-align:top;color:var(--ink-soft);line-height:1.5;
}
.article table tbody tr:last-child td{border-bottom:none;}
.article table tbody tr:hover td{background:var(--paper);}
.article table code{background:transparent;padding:0;font-size:.86em;color:var(--ink);}
.article table strong{color:var(--ink);font-weight:700;}

/* ── code blocks: light editorial card ─────────────────────────── */
:root{
  --code-bg:    var(--paper-2);
  --code-bg-2:  #FFFFFF;
  --code-fg:    var(--ink);
  --code-muted: var(--ink-mute);
  --code-kw:    var(--accent);
  --code-str:   #2E7F5D;
  --code-num:   #B45A1F;
}
.article pre,
.article .highlight,
.article .highlight pre{
  margin-top:var(--space-md);margin-bottom:var(--space-md);background:var(--code-bg);
  border:1px solid var(--rule);border-radius:3px;
  padding:1rem 1.15rem;overflow-x:auto;
  font-family:var(--font-mono);font-size:.78rem;line-height:1.65;color:var(--code-fg);
}
.article .highlight{padding:0;}
.article .highlight pre{margin:0;border:none;}
.article pre code,
.article .highlight code{
  background:none;padding:0;font-size:inherit;color:inherit;white-space:pre;
}
.article .code-card{
  position:relative;margin-top:var(--space-md);margin-bottom:var(--space-md);
  background:var(--code-bg);border:1px solid var(--rule);border-radius:3px;
  padding-top:1.7rem;overflow:hidden;
}
.article .code-card > pre,
.article .code-card > .highlight,
.article .code-card > .highlight > pre,
.article .code-card .highlight,
.article .code-card .highlight pre{
  margin:0;border:none;border-radius:0;background:transparent;
}
.article .code-card::before{
  content:attr(data-label);
  position:absolute;top:0;left:0;right:0;z-index:1;
  display:flex;align-items:center;
  padding:.45rem 1.15rem .4rem;
  border-bottom:1px solid var(--rule);
  font-family:var(--font-mono);font-size:.6rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--code-muted);
  background:var(--code-bg-2);
}
.article .code-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);
  margin-top:var(--space-md);margin-bottom:var(--space-md);align-items:stretch;
}
.article .code-pair .code-card{margin:0;display:flex;flex-direction:column;}
.article .code-pair .code-card > .highlight{flex:1;}

/* Rouge syntax tokens — colour via --code-* vars defined above */
.article .highlight .c, .article .highlight .c1, .article .highlight .cm,
.article .highlight .cs, .article .highlight .cp{color:var(--code-muted);font-style:italic;}
.article .highlight .k, .article .highlight .kc, .article .highlight .kd,
.article .highlight .kn, .article .highlight .kp, .article .highlight .kr,
.article .highlight .kt{color:var(--code-kw);}
.article .highlight .s, .article .highlight .s1, .article .highlight .s2,
.article .highlight .sb, .article .highlight .sc, .article .highlight .sd,
.article .highlight .se, .article .highlight .sh, .article .highlight .si,
.article .highlight .sr, .article .highlight .ss, .article .highlight .sx{color:var(--code-str);}
.article .highlight .m, .article .highlight .mb, .article .highlight .mf,
.article .highlight .mh, .article .highlight .mi, .article .highlight .mo,
.article .highlight .il{color:var(--code-num);}
.article .highlight .nb, .article .highlight .nf, .article .highlight .nc,
.article .highlight .nn{color:var(--code-fg);}
.article .highlight .o, .article .highlight .ow{color:var(--code-fg);}
.article .highlight .p{color:var(--code-muted);}
.article .highlight .err{color:#C9302B;background:transparent;}

.post-end{
  margin-top:var(--space-xl);padding-top:var(--space-md);
  border-top:2px solid var(--rule-ink);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-sm);
  font-size:var(--text-sm);color:var(--ink-mute);
}
.post-end .topic{color:var(--accent);font-weight:600;}
.post-end a{color:var(--accent);font-weight:600;white-space:nowrap;}
.post-end a:hover{text-decoration:underline;text-underline-offset:2px;}

/* reveal */
.reveal{opacity:0;animation:rise .65s var(--ease-out) both;animation-delay:var(--d,0s);}
@keyframes rise{from{opacity:0;transform:translateY(13px);}to{opacity:1;transform:translateY(0);}}

@media(max-width:54rem){
  .hero{grid-template-columns:1fr;gap:var(--space-lg);padding-bottom:var(--space-xl);}
  .meta-panel{border-left:none;padding-left:0;}
  .about-grid{grid-template-columns:1fr;gap:var(--space-lg);}
  .about-facts{border-left:none;padding-left:0;}
}
@media(max-width:44rem){
  .whead{display:none;}
  .wrow{grid-template-columns:2.6rem minmax(0,1fr);gap:.15rem var(--space-sm);padding:var(--space-sm) var(--space-2xs);}
  .w-num{grid-column:1;grid-row:1;}
  .w-title{grid-column:2;grid-row:1;}
  .w-topic{grid-column:2;grid-row:2;}
  .w-date{grid-column:2;grid-row:3;}
  .prow{grid-template-columns:2.6rem minmax(0,1fr);gap:.15rem var(--space-sm);}
  .p-num{grid-row:1;}
  .p-name{grid-column:2;grid-row:1;}
  .p-desc{grid-column:2;grid-row:2;}
  .jrow{grid-template-columns:1fr;gap:.2rem;}
  .post-h1{font-size:clamp(2rem,9vw,2.6rem);}
  .article h2{margin-top:var(--space-lg);}
  .article table{font-size:.78rem;}
  .article table thead th,
  .article table tbody td{padding:.45rem .55rem;}
  .article pre,
  .article .highlight pre{font-size:.74rem;padding:var(--space-sm) var(--space-2xs);}
  .article .code-pair{grid-template-columns:1fr;gap:var(--space-md);}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;animation:none;}
  *{transition-duration:.01ms!important;}
}