/* Shared styles for the inner pages (blog, post, lab, project, 404).
   index.html and works.html still carry their own copy of the tokens and nav; keep the two in step. */
@font-face{font-family:"PX Mono";font-weight:400;font-display:block;src:url(assets/px-mono-400.woff2) format("woff2")}
@font-face{font-family:"PX Mono";font-weight:500;font-display:block;src:url(assets/px-mono-500.woff2) format("woff2")}
@font-face{font-family:"PX Sans";font-weight:400;font-display:block;src:url(assets/px-sans-400.woff2) format("woff2")}
@font-face{font-family:"PX Sans";font-weight:700;font-display:block;src:url(assets/px-sans-700.woff2) format("woff2")}
:root{
  --bg:#3a5462;
  --ink:#ffffff;
  --panel:#000000;
  --ring:rgba(255,255,255,.5);
  --line:rgba(255,255,255,.2);
  --vw:100vw; --vh:100vh;
  --u:clamp(.72px, min(calc(var(--vw) / 1280), calc(var(--vh) / 800)), 3px);
  --mono:"PX Mono","Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"PX Sans",Inter,"Helvetica Neue",Arial,system-ui,sans-serif;
  --expo:cubic-bezier(.16,1,.3,1);
  --wipe:cubic-bezier(.77,0,.18,1);
  --soft:cubic-bezier(.25,1,.5,1);
}
@supports (height:100dvh){ :root{ --vh:100dvh; } }
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
body{font:400 calc(18 * var(--u))/1.45 var(--sans)}
a{color:inherit;text-underline-offset:.2em}
a:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:3px}
ul{list-style:none}
img{max-width:100%;display:block}
.bg{position:fixed;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;user-select:none}
.meta{font:400 calc(14 * var(--u))/calc(17.5 * var(--u)) var(--mono);letter-spacing:-0.025em;text-transform:uppercase;color:var(--ring)}

/* fixed NK bar and its dropdown */
.ui{position:fixed;inset:0;z-index:20;pointer-events:none}
.ui>*{pointer-events:auto}
.nav{position:absolute;top:calc(29.5 * var(--u));left:calc(50% - 5 * var(--u));transform:translateX(-50%);
  width:calc(300.5 * var(--u));height:calc(53.7 * var(--u));background:var(--panel);display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(15 * var(--u)) 0 calc(9 * var(--u))}
.logo{display:block;color:var(--ink);text-decoration:none;font:700 calc(39 * var(--u))/1 var(--sans);letter-spacing:-0.01em}
.menu{position:relative;width:calc(17 * var(--u));height:calc(8.3 * var(--u));background:none;border:0;cursor:pointer;transform:translateY(calc(-0.5 * var(--u)))}
.menu::before,.menu::after{content:"";position:absolute;left:0;right:0;height:max(1px,calc(1 * var(--u)));background:var(--ink);transition:top .2s,bottom .2s,rotate .2s}
.menu::before{top:0}.menu::after{bottom:0}
.menu[aria-expanded="true"]::before{top:calc(50% - .5px);rotate:45deg}
.menu[aria-expanded="true"]::after{bottom:calc(50% - .5px);rotate:-45deg}
.nav__menu{position:absolute;top:100%;left:0;right:0;background:var(--panel);visibility:hidden;clip-path:inset(0 0 100% 0);
  transition:clip-path .45s var(--wipe),visibility 0s .45s}
.nav.is-open .nav__menu{visibility:visible;clip-path:inset(0 0 0 0);transition-delay:0s}
.nav__menu a,.nav__menu button{display:block;width:100%;padding:calc(13 * var(--u)) calc(15 * var(--u)) calc(12 * var(--u)) calc(9 * var(--u));border:0;border-top:1px solid var(--line);background:none;color:var(--ink);text-decoration:none;text-align:left;cursor:pointer;
  font:400 calc(14 * var(--u))/1 var(--mono);letter-spacing:-0.025em;text-transform:uppercase;transition:background .2s,color .2s}
.nav__menu a:hover,.nav__menu button:hover,.nav__menu a[aria-current]{background:var(--ink);color:var(--panel)}
.nav__menu a:focus-visible,.nav__menu button:focus-visible{outline-offset:-3px}

/* page column */
.wrap{position:relative;z-index:1;padding:calc(170 * var(--u)) calc(35 * var(--u)) calc(96 * var(--u))}
.kicker{display:flex;justify-content:space-between;flex-wrap:wrap;gap:calc(14 * var(--u));color:var(--ink)}
.kicker .meta,.kicker a{color:var(--ink)}
.title{font:400 calc(112 * var(--u))/.86 var(--sans);letter-spacing:-0.045em;text-transform:uppercase;margin:calc(40 * var(--u)) 0 calc(56 * var(--u))}
.title>span{display:block;overflow:hidden;padding-bottom:.06em}
.title>span:first-child{padding-left:.55em}
.title--sm{font-size:calc(72 * var(--u));line-height:.92}
.title--sm>span:first-child{padding-left:0}
.lead{font:400 calc(30 * var(--u))/1.15 var(--sans);letter-spacing:-0.01em;max-width:28ch}
.panel{background:var(--panel);padding:calc(28 * var(--u))}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(300 * var(--u)),1fr));gap:calc(9 * var(--u))}
.card{display:flex;flex-direction:column;gap:calc(12 * var(--u));background:var(--panel);padding:calc(24 * var(--u));min-height:calc(260 * var(--u));text-decoration:none;transition:background .2s,color .2s}
.card h2,.card h3{font:400 calc(28 * var(--u))/1.08 var(--sans);letter-spacing:-0.01em;margin-top:auto}
.card p{font-size:calc(16 * var(--u));line-height:1.4}
a.card:hover{background:var(--ink);color:var(--panel)}
a.card:hover .meta{color:rgba(0,0,0,.55)}
.card--off{opacity:.6}
.rows li{display:grid;grid-template-columns:calc(220 * var(--u)) 1fr;gap:calc(24 * var(--u));padding:calc(18 * var(--u)) 0;border-top:1px solid var(--ring)}
.rows li>.meta{color:var(--ink)}
.rows p{font-size:calc(17 * var(--u));line-height:1.4;max-width:60ch}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:calc(48 * var(--u));align-items:start}
.sec-h{margin:calc(72 * var(--u)) 0 calc(20 * var(--u));color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(14 * var(--u));min-width:calc(142.4 * var(--u));height:calc(45 * var(--u));padding:calc(1 * var(--u)) calc(20 * var(--u)) 0;background:var(--panel);color:var(--ink);text-decoration:none;
  font:400 calc(14 * var(--u))/1 var(--mono);letter-spacing:-0.025em;text-transform:uppercase;white-space:nowrap;transition:background .2s,color .2s}
.btn:hover{background:var(--ink);color:var(--panel)}
.btn--inv{background:var(--ink);color:var(--panel)}
.btn--inv:hover{background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:calc(9 * var(--u));margin-top:calc(32 * var(--u))}
.shot-lg{width:100%;border:calc(9 * var(--u)) solid var(--panel);background:var(--panel)}
.chips{display:flex;flex-wrap:wrap;gap:calc(6 * var(--u))}
.chips li{border:1px solid var(--ring);padding:calc(6 * var(--u)) calc(10 * var(--u));font:400 calc(12 * var(--u))/1 var(--mono);letter-spacing:-0.025em;text-transform:uppercase}

/* article text */
.prose{max-width:66ch}
.prose p{margin:calc(18 * var(--u)) 0}
.prose h2{font:400 calc(34 * var(--u))/1.1 var(--sans);letter-spacing:-0.02em;margin:calc(48 * var(--u)) 0 calc(8 * var(--u))}
.prose pre{overflow-x:auto;margin:calc(24 * var(--u)) 0;padding:calc(20 * var(--u));border:1px solid var(--line);font:400 calc(14 * var(--u))/1.55 var(--mono);tab-size:2}
.prose .note{margin:calc(24 * var(--u)) 0;padding:calc(18 * var(--u)) calc(20 * var(--u));background:var(--ink);color:var(--panel)}
.prose .note .meta{color:rgba(0,0,0,.55);display:block;margin-bottom:calc(6 * var(--u))}

.foot{position:relative;z-index:1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:calc(14 * var(--u));padding:calc(24 * var(--u)) calc(35 * var(--u));background:var(--panel)}

/* entrance, in the hero's vocabulary: bar wipes open, title lines rise, blocks fade up in order */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .nav{animation:nav-in .8s var(--wipe) .25s both}
  .logo,.menu{animation:fade-up .6s var(--soft) .6s both}
  .title>span>span{display:inline-block;animation:rise 1s var(--expo) calc(.2s + var(--i,0) * 90ms) both}
  [data-in]{animation:fade-up .7s var(--soft) calc(.55s + var(--i,0) * 70ms) both}
  /* the negative bottom inset keeps the clip open below the bar, so the dropdown is never cut off */
  @keyframes nav-in{from{clip-path:inset(0 50% -100vh 50%)}to{clip-path:inset(0 0 -100vh 0)}}
  @keyframes rise{from{translate:0 105%}}
  @keyframes fade-up{from{opacity:0;translate:0 .6em}}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media (orientation:portrait) and (min-width:561px){ :root{ --u:clamp(.72px, calc(var(--vw) / 860), 1.6px); } }
@media (max-width:760px){
  .two{grid-template-columns:1fr}
  .rows li{grid-template-columns:1fr;gap:calc(8 * var(--u))}
  .title{font-size:calc(64 * var(--u))}
  .title--sm{font-size:calc(46 * var(--u))}
}
@media (max-width:560px){
  :root{ --u:clamp(.72px, calc(var(--vw) / 470), 1px); }
  .nav{left:calc(20 * var(--u));right:calc(20 * var(--u));width:auto;transform:none;top:calc(20 * var(--u))}
  .wrap{padding:calc(120 * var(--u)) calc(20 * var(--u)) calc(64 * var(--u))}
  .foot{padding:calc(24 * var(--u)) calc(20 * var(--u))}
  .lead{font-size:calc(24 * var(--u))}
}