/* Ossirand Articles. Shares the homepage's tokens, bar and footer so the articles
   reads as part of the same site. Navy bar and footer, bone reading surface. */

:root{
  --navy-900:#050d1a;--navy-850:#081327;--navy-800:#0b1c34;--navy-line:#1c3454;
  --bone:#eeebe3;--bone-2:#e5e1d7;--bone-3:#f6f4ef;--bone-line:#d3cec1;--bone-line-2:#bfb9a9;
  --ink:#0c1622;--ink-2:#4c5663;--ink-3:#7d8794;--ink-l:#f1f4f8;--ink-l2:#9fb0c6;--ink-l3:#65788f;
  --signal:#1D6FD1;--signal-lt:#4EA8FF;--signal-dk:#12508F;
  --max:1440px;--bar:62px;--measure:720px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:calc(var(--bar) + 18px)}
body{background:var(--bone);color:var(--ink);font-family:'Marlin Sans','Figtree',-apple-system,BlinkMacSystemFont,sans-serif;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:'Marlin Sans','Figtree',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:700;letter-spacing:-.014em}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.wrap.narrow{max-width:calc(var(--measure) + 64px)}
@media (max-width:560px){.wrap{padding:0 16px}.wrap.narrow{max-width:none}}

.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:10px;color:var(--signal-dk)}
.eyebrow::before{content:'';width:16px;height:1px;background:currentColor;flex:none}

/* bar, matching the homepage once scrolled */
#bar{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--bar)}
#bar.solid{background:rgba(5,13,26,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--navy-line);box-shadow:0 10px 28px rgba(0,0,0,.35)}
#bar .inner{max-width:var(--max);margin:0 auto;padding:0 32px;height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:24px}
#bar .bar-left{display:flex;align-items:center;gap:48px;min-width:0}
#bar .brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none}
#bar .brand-mark{height:34px;width:auto}
#bar .brand-word{height:19px;width:auto}
#bar nav{display:flex;gap:26px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72)}
#bar nav a{text-decoration:none;transition:color .15s}
#bar nav a[aria-current="page"]{color:#fff}
#bar nav a:hover{color:var(--signal-lt)}
#bar .utc{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:rgba(255,255,255,.5);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:940px){#bar nav{display:none}}
@media (max-width:560px){#bar .inner{padding:0 16px}#bar .brand{gap:10px}#bar .brand-mark{height:26px}#bar .brand-word{height:15px}}

.btn{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;padding:14px 24px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:all .18s;border:1px solid transparent}
.btn-primary{background:var(--signal);color:#fff;font-weight:500}
.btn-primary:hover{background:var(--signal-dk)}
.inline-link{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--signal-dk);text-decoration:none;border-bottom:1px solid rgba(18,80,143,.35);padding-bottom:3px}
.inline-link:hover{border-color:var(--signal-dk)}

/* index */
.index-head{background:var(--navy-900);color:var(--ink-l);padding:calc(var(--bar) + 72px) 0 56px}
.index-head .eyebrow,.post-head .eyebrow{color:var(--signal-lt)}
.index-head h1{font-size:clamp(38px,5vw,60px);line-height:1.05;margin-top:18px;color:#fff}
.index-head .dek{margin-top:16px;font-size:18px;color:rgba(232,240,250,.82);max-width:52ch}
.index-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px}
.index-head .inline-link{color:var(--signal-lt);border-color:rgba(78,168,255,.4)}
.index-list{padding:40px 0 96px}
.post-list{list-style:none}
.post-list li{border-bottom:1px solid var(--bone-line)}
.post-list a{display:block;padding:30px 0;text-decoration:none}
.post-list .meta{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.post-list h2{font-size:clamp(22px,2.4vw,28px);line-height:1.2;margin-top:10px;transition:color .15s}
.post-list p{margin-top:10px;color:var(--ink-2);max-width:60ch}
.post-list a:hover h2{color:var(--signal-dk)}
.empty{padding:40px 0;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.06em;color:var(--ink-3)}

/* article */
.post-head{background:var(--navy-900);color:var(--ink-l);padding:calc(var(--bar) + 56px) 0 52px}
.back{display:inline-block;margin-bottom:28px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-l2);text-decoration:none}
.back:hover{color:#fff}
.post-head h1{font-size:clamp(32px,4.4vw,52px);line-height:1.08;margin-top:18px;color:#fff;letter-spacing:-.02em}
.post-head .dek{margin-top:18px;font-size:19px;line-height:1.55;color:rgba(232,240,250,.84)}
.byline{margin-top:24px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-l3)}
.post-body{padding:52px 0 24px}
.prose{font-size:18px;line-height:1.72;color:var(--ink)}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:26px;line-height:1.25;margin-top:1.9em}
.prose h3{font-size:20px;line-height:1.3;margin-top:1.6em}
.prose a{color:var(--signal-dk);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--signal)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--ink-3)}
.prose blockquote{border-left:2px solid var(--signal);padding:2px 0 2px 22px;color:var(--ink-2)}
.prose blockquote > * + *{margin-top:.8em}
.prose code{font-family:'IBM Plex Mono',monospace;font-size:.86em;background:var(--bone-2);padding:1px 5px}
.prose pre{background:var(--navy-850);color:var(--ink-l);padding:18px 20px;overflow-x:auto;font-size:14px;line-height:1.6}
.prose pre code{background:none;padding:0;font-size:inherit}
.prose hr{border:0;border-top:1px solid var(--bone-line-2);margin:2.2em 0}
.prose strong{font-weight:700}
.post-end{padding:12px 0 96px}
.post-end .end-inner{border-top:1px solid var(--bone-line);padding-top:28px}
.post-end p{color:var(--ink-2);font-size:16px}
.post-end p a{color:var(--signal-dk)}
.post-end .btn{margin-top:20px}
@media (max-width:560px){.prose{font-size:17px}.post-head .dek{font-size:17px}}

/* footer, matching the homepage */
footer{background:var(--navy-900);border-top:1px solid var(--navy-line);padding:54px 0 44px;color:var(--ink-l2)}
.foot{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:26px}
.foot-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.foot-brand .foot-mark{height:28px;width:auto;display:block}
.foot-brand .foot-word{height:16px;width:auto;display:block}
.foot p{color:var(--ink-l3);font-size:13px;margin-top:12px;max-width:46ch;line-height:1.66}
.foot p a{color:var(--ink-l2);text-decoration:underline;text-underline-offset:3px}
.foot .links{display:flex;gap:22px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase}
.foot .links a{text-decoration:none}
.foot .links a:hover{color:#fff}

/* ══════════ SITE MENU (hamburger, left) ══════════
   Shown where the top nav collapses (940px and below). The panel and scrim
   sit outside #bar on purpose: #bar.solid has a backdrop-filter, which would
   trap position:fixed children inside the 62px bar. */
.menu-btn{display:none;align-items:center;justify-content:center;width:42px;height:42px;margin-left:-10px;padding:0;background:none;border:0;color:#fff;cursor:pointer;flex:none}
.menu-btn svg{width:24px;height:24px;display:block}
.menu-btn line{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transition:transform .25s ease,opacity .2s ease;transform-origin:12px 12px}
body.menu-open .menu-btn .l1{transform:translateY(5px) rotate(45deg)}
body.menu-open .menu-btn .l2{opacity:0}
body.menu-open .menu-btn .l3{transform:translateY(-5px) rotate(-45deg)}
#site-menu{position:fixed;top:var(--bar);left:0;bottom:0;width:min(320px,86vw);z-index:59;background:var(--navy-900);border-right:1px solid var(--navy-line);padding:18px 0 32px;overflow-y:auto;transform:translateX(-102%);visibility:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),visibility 0s linear .3s}
#site-menu a{display:block;padding:17px 28px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.78);text-decoration:none;border-bottom:1px solid var(--navy-line);position:relative}
#site-menu a[hidden]{display:none}
#site-menu a:hover,#site-menu a:focus-visible{color:#fff;background:rgba(78,168,255,.06)}
#site-menu a[aria-current="page"]{color:#fff}
#site-menu a[aria-current="page"]::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:2px;background:var(--signal-lt)}
#site-menu .menu-foot{padding:22px 28px 0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--ink-l3);line-height:1.7}
#site-menu .menu-foot a{display:inline;padding:0;border:0;font-size:inherit;letter-spacing:inherit;text-transform:none;color:var(--ink-l2)}
#menu-scrim{position:fixed;top:var(--bar);left:0;right:0;bottom:0;z-index:58;background:rgba(2,6,14,.55);opacity:0;pointer-events:none;transition:opacity .25s ease}
body.menu-open{overflow:hidden}
body.menu-open #site-menu{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.16,1,.3,1),visibility 0s}
body.menu-open #menu-scrim{opacity:1;pointer-events:auto}
body.menu-open #bar{background:rgba(5,13,26,.98);border-bottom:1px solid var(--navy-line)}
#bar nav a[hidden],.foot .links a[hidden]{display:none}
@media (max-width:940px){.menu-btn{display:inline-flex}#bar .bar-left{gap:8px}}
@media (min-width:941px){#site-menu,#menu-scrim{display:none}}
@media (prefers-reduced-motion:reduce){#site-menu,#menu-scrim,.menu-btn line{transition:none}}
@media (max-width:400px){#bar .utc{display:none}}