/* Field Notes. Colour tokens first; components use tokens only. */
:root{
  color-scheme:light;
  --bg:#F3F5F7; --surface:#FFFFFF; --sunk:#E8ECF0; --ink:#111922; --ink-2:#34414D; --muted:#5C6975; --line:#D5DBE1;
  --accent:#1D4ED8; --accent-ink:#FFFFFF; --focus:#1D4ED8;
  --c-ai:#1D4ED8; --c-mechanics:#C62D1F; --c-photography:#111922; --c-notes:#7B3FB8;
  --mesh:rgba(17,25,34,.38); --overlay:rgba(12,17,22,.78);
  --code-bg:#0D1117;
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --gutter:clamp(16px,4vw,48px);
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#0C1116; --surface:#131A21; --sunk:#0F151B; --ink:#E4E9EE; --ink-2:#C3CCD4; --muted:#8E9AA6; --line:#26313B;
    --accent:#7C9CFF; --accent-ink:#0C1116; --focus:#9DB4FF;
    --c-ai:#7C9CFF; --c-mechanics:#FF6A55; --c-photography:#E4E9EE; --c-notes:#C49BFF;
    --mesh:rgba(228,233,238,.34); --overlay:rgba(4,7,10,.86);
    --code-bg:#080C10;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:var(--bg); padding:6px 10px; border-radius:6px; z-index:99}
.skip:focus{left:8px}
.mono{font-family:var(--f-mono); font-size:12.5px; letter-spacing:.02em; font-variant-numeric:tabular-nums}
.wrap{max-width:1180px; margin-inline:auto; padding-inline:var(--gutter)}
.mk-ai{stroke:var(--c-ai)} .mk-mechanics{stroke:var(--c-mechanics)} .mk-photography{stroke:var(--c-photography)} .mk-notes{stroke:var(--c-notes)}

/* nav */
.nav{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:24px; min-height:60px; flex-wrap:wrap; padding-block:8px}
.brand{font-family:var(--f-display); font-weight:750; font-size:20px; letter-spacing:-.02em; text-decoration:none; display:flex; align-items:baseline; gap:8px}
.brand small{font-family:var(--f-mono); font-weight:400; font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
.links{display:flex; gap:4px; flex-wrap:wrap}
.links a{font-family:var(--f-display); font-size:15px; text-decoration:none; padding:6px 10px; border-radius:8px; color:var(--ink-2); display:inline-flex; align-items:center; gap:7px}
.links a:hover{background:var(--sunk)}
.links a[aria-current="page"]{color:var(--ink); background:var(--sunk); font-weight:600}

.btn{font-family:var(--f-display); font-size:14px; font-weight:600; border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:8px 14px; border-radius:9px; cursor:pointer}
.btn:hover{border-color:var(--ink-2)}

/* hero */
.hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(24px,5vw,64px); align-items:center; padding-block:clamp(36px,6vw,72px) clamp(28px,4vw,48px)}
.eyebrow{font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px}
.hero h1{font-family:var(--f-display); font-weight:780; font-size:clamp(44px,7.4vw,92px); line-height:.92; letter-spacing:-.045em; margin:14px 0 18px}
.hero h1 em{font-family:var(--f-body); font-style:italic; font-weight:400; letter-spacing:-.02em}
.hero p{font-size:19px; color:var(--ink-2); max-width:34ch; margin:0}
.legend{display:flex; gap:18px; flex-wrap:wrap; margin-top:22px}
.legend a{display:inline-flex; gap:8px; align-items:center; text-decoration:none; font-family:var(--f-mono); font-size:12.5px; color:var(--ink-2)}
.legend a:hover{color:var(--ink)}
.sim{border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:16px 16px 12px; margin:0}
.sim-head{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--muted)}
.sim canvas{display:block; width:100%; height:220px; margin-block:6px}
.sim-foot{display:grid; grid-template-columns:auto auto; gap:8px 14px; align-items:center; justify-content:space-between}
.cbar{display:flex; align-items:center; gap:8px; color:var(--ink-2); white-space:nowrap}
.cbar i{display:block; width:140px; height:10px; border-radius:2px; background:linear-gradient(90deg,#2B2FB0,#1F74D6,#1FB8C9,#3EBE5C,#E8D43A,#F18A22,#D32A1E)}
.cbar .unit{color:var(--muted)}
.readout{color:var(--ink-2); white-space:pre; text-align:right; min-width:31ch}
.sim-note{color:var(--muted); margin:8px 0 0; font-size:11.5px; line-height:1.5}

/* headings and lists */
.page-head{padding-block:40px 18px}
.page-head h1{font-family:var(--f-display); font-size:clamp(40px,6vw,72px); letter-spacing:-.045em; line-height:.95; margin:10px 0 12px}
.page-head p{color:var(--ink-2); max-width:52ch; margin:0}
.sec-head{display:flex; align-items:end; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--ink); padding-top:14px; margin-top:12px}
.sec-head h2{font-family:var(--f-display); font-size:30px; letter-spacing:-.03em; margin:0; line-height:1.1}
.tools{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.chip{font-family:var(--f-mono); font-size:12px; border:1px solid var(--line); border-radius:999px; padding:5px 11px; display:inline-flex; align-items:center; gap:7px; color:var(--ink-2); text-decoration:none}
.chip:hover{border-color:var(--ink-2)}
.chip[aria-current="page"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.chip[aria-current="page"] .mk{stroke:var(--bg)}
.home-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(24px,4vw,56px); padding-block:8px 64px}
.list-only{padding-block:8px 64px; max-width:900px}
.posts{list-style:none; margin:0; padding:0}
.post-row{display:grid; grid-template-columns:92px minmax(0,1fr) auto; gap:18px; padding-block:20px; border-bottom:1px solid var(--line); text-decoration:none; align-items:start}
.post-row:hover h3{text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px}
.post-row .date{color:var(--muted); padding-top:5px}
.post-row h3{font-family:var(--f-display); font-size:23px; letter-spacing:-.02em; line-height:1.2; margin:4px 0 6px; font-weight:650; text-wrap:balance}
.post-row p{margin:0; color:var(--ink-2); font-size:16px; max-width:62ch}
.post-row .rt{color:var(--muted); padding-top:5px}
.post-row .thumb{width:112px; aspect-ratio:4/3; object-fit:cover; border-radius:6px; background:var(--sunk)}
.cat{display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:12px; color:var(--muted); letter-spacing:.03em}
.badge{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; border:1px dashed var(--muted); color:var(--muted); padding:1px 6px; border-radius:4px; margin-left:6px}
.empty{padding:28px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); margin-top:18px}
.empty strong{color:var(--ink); font-family:var(--f-display)}
.side h4{font-family:var(--f-mono); font-weight:500; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:22px 0 10px}
.side p{font-size:15px; color:var(--ink-2); margin:0}
.strip{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.strip a{display:block; aspect-ratio:1; border-radius:6px; overflow:hidden; background:var(--sunk)}
.strip img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s}
.strip a:hover img{transform:scale(1.04)}
.count{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-family:var(--f-mono); font-size:12.5px; color:var(--ink-2)}
.count span{display:inline-flex; align-items:center; gap:7px}
.count b{font-weight:500; color:var(--ink); text-align:right}

/* article */
.article{max-width:768px; padding-block:40px 80px}
.back{font-family:var(--f-mono); font-size:12.5px; color:var(--muted); text-decoration:none}
.back:hover{color:var(--ink)}
.article h1{font-family:var(--f-display); font-size:clamp(34px,5.4vw,56px); letter-spacing:-.035em; line-height:1.02; margin:18px 0 14px; text-wrap:balance}
.lead{font-size:19px; color:var(--ink-2)}
.lead a{color:var(--accent)}
.meta{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; color:var(--muted)}
.tags{display:flex; gap:6px; flex-wrap:wrap}
.tag{font-family:var(--f-mono); font-size:11.5px; background:var(--sunk); padding:2px 8px; border-radius:5px; color:var(--ink-2)}
.cover{width:100%; border-radius:10px; margin:28px 0 0; display:block}
.prose{font-size:18.5px; line-height:1.72; margin-top:28px}
.prose > *{max-width:66ch}
.prose h2{font-family:var(--f-display); font-size:28px; letter-spacing:-.02em; line-height:1.2; margin:1.8em 0 .5em}
.prose h3{font-family:var(--f-display); font-size:21px; letter-spacing:-.01em; margin:1.6em 0 .4em}
.prose p{margin:0 0 1.05em}
.prose a{color:var(--accent); text-underline-offset:3px}
.prose img{border-radius:8px; display:block; margin:1.4em 0 .4em}
.prose blockquote{margin:1.2em 0; padding:.2em 0 .2em 20px; border-left:3px solid var(--ink); color:var(--ink-2); font-style:italic}
.prose code{font-family:var(--f-mono); font-size:.8em; background:var(--sunk); padding:.12em .35em; border-radius:4px}
.prose .highlight{background:var(--code-bg); border-radius:10px; margin:1.2em 0; max-width:100%}
.prose .highlight pre{margin:0; padding:16px 18px; overflow-x:auto; font-size:14px; line-height:1.55; background:transparent; color:#E6EDF3}
.prose .highlight code{background:none; padding:0; font-size:inherit}
.prose table{border-collapse:collapse; font-size:15px; display:block; overflow-x:auto; margin:1.2em 0}
.prose th,.prose td{border-bottom:1px solid var(--line); padding:6px 14px 6px 0; text-align:left; font-variant-numeric:tabular-nums}
.prose th{font-family:var(--f-mono); font-size:12px; font-weight:500; color:var(--muted)}
.prose hr{border:0; border-top:1px solid var(--line); margin:2em 0}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.25em 0}
.prose div.arithmatex{overflow-x:auto; overflow-y:hidden; margin:1.1em 0}
.prose .footnote{font-size:15px; color:var(--ink-2)}
.pager{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:56px; border-top:1px solid var(--line); padding-top:18px}
.pager a{text-decoration:none; display:flex; flex-direction:column; gap:4px; font-family:var(--f-display); font-size:17px; letter-spacing:-.01em}
.pager a span{font-family:var(--f-mono); font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.pager a:hover{color:var(--accent)}
.pager .next{text-align:right; grid-column:2}

/* gallery */
.masonry{columns:3 300px; column-gap:14px; padding-block:12px 64px}
.frame{break-inside:avoid; margin:0 0 14px; position:relative; border-radius:8px; overflow:hidden; background:var(--sunk); display:block; cursor:zoom-in}
.frame img{display:block; width:100%; height:auto; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.frame:hover img{transform:scale(1.025)}
.fcap{position:absolute; inset:auto 0 0 0; padding:28px 12px 10px; background:linear-gradient(transparent,rgba(0,0,0,.66)); color:#fff; font-size:11.5px; display:flex; justify-content:space-between; gap:10px; opacity:0; transition:opacity .25s}
.frame:hover .fcap,.frame:focus-visible .fcap{opacity:1}
.lb{position:fixed; inset:0; z-index:60; background:var(--overlay); display:grid; grid-template-columns:minmax(0,1fr) 340px}
.lb-stage{display:flex; align-items:center; justify-content:center; padding:24px; position:relative; min-height:0}
.lb-stage img{max-width:100%; max-height:calc(100dvh - 48px); object-fit:contain; border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.45); color:#fff; border:0; width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:22px; line-height:1}
.lb-nav.prev{left:14px} .lb-nav.next{right:14px}
.lb-side{background:var(--surface); padding:24px 22px; overflow-y:auto; display:flex; flex-direction:column; gap:16px}
.lb-side h2{font-family:var(--f-display); font-size:24px; letter-spacing:-.02em; margin:0; line-height:1.2}
.lb-side p{margin:0; color:var(--ink-2); font-size:16px}
.lb-close{align-self:flex-end}
.exif{display:grid; grid-template-columns:auto 1fr; gap:7px 16px; margin:0; font-family:var(--f-mono); font-size:12.5px}
.exif dt{color:var(--muted)} .exif dd{margin:0}
.help{color:var(--muted); font-size:11.5px}

footer.foot{border-top:1px solid var(--line); padding-block:22px 40px; color:var(--muted)}
footer.foot .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.foot-links{display:flex; gap:16px}
.foot-links a{text-decoration:none} .foot-links a:hover{color:var(--ink)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .home-grid{grid-template-columns:1fr}
  .lb{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto}
  .lb-side{max-height:40dvh}
}
@media (max-width:1140px){
  .sim-foot{grid-template-columns:1fr}
  .readout{text-align:left; min-width:0}
}
@media (max-width:620px){ .sim canvas{height:170px} }
@media (max-width:560px){
  body{font-size:16px}
  .nav .wrap{gap:6px 10px}
  .links{flex-basis:100%; margin-inline:-10px}
  .post-row{grid-template-columns:1fr; gap:4px}
  .post-row .rt,.post-row .thumb{display:none}
  .post-row .date{padding-top:0}
  .prose{font-size:17.5px}
}
/* about */
.side .more{display:inline-block; margin-top:10px; color:var(--accent); text-decoration:none}
.side .more:hover{text-decoration:underline}
.about-grid{display:grid; grid-template-columns:240px minmax(0,1fr); gap:clamp(24px,5vw,72px); padding-block:8px 80px; border-top:1px solid var(--ink); padding-top:28px}
.about-side{display:flex; flex-direction:column; gap:20px}
.portrait{width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; background:var(--sunk)}
.facts{display:grid; gap:4px; margin:0; font-size:15px}
.facts dt{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:12px}
.facts dt:first-child{margin-top:0}
.facts dd{margin:0; color:var(--ink-2)}
.facts a{color:var(--accent); text-decoration:none}
.facts a:hover{text-decoration:underline}
.about-main{max-width:720px}
.about-intro{margin-top:0}
.about-intro p:first-child{font-size:21px; line-height:1.55; color:var(--ink)}
.about-sec{margin-top:48px}
.about-sec h2{font-family:var(--f-display); font-size:26px; letter-spacing:-.02em; margin:0 0 14px}
.now{list-style:none; margin:0; padding:0}
.now li{display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; padding-block:14px; border-top:1px solid var(--line)}
.now-label{display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); padding-top:4px}
.now p{margin:0; color:var(--ink-2)}
.timeline{list-style:none; margin:0; padding:0; position:relative}
.timeline li{display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; padding-block:14px; border-top:1px solid var(--line)}
.timeline .when{color:var(--muted); padding-top:4px}
.timeline strong{font-family:var(--f-display); font-weight:650; font-size:18px; letter-spacing:-.01em; display:block}
.timeline .where{display:block; color:var(--ink-2); font-size:16px}
.timeline p{margin:4px 0 0; color:var(--muted); font-size:15.5px}
.skills{display:grid; grid-template-columns:140px minmax(0,1fr); gap:12px 16px; margin:0}
.skills dt{color:var(--muted); padding-top:3px}
.skills dd{margin:0; display:flex; flex-wrap:wrap; gap:6px}
@media (max-width:760px){
  .about-grid{grid-template-columns:1fr}
  .about-side{order:2}
  .portrait{max-width:200px}
}
@media (max-width:480px){
  .now li,.timeline li,.skills{grid-template-columns:1fr; gap:4px}
  .skills dd{margin-bottom:10px}
}

@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }