@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/courier-prime-400-normal.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/bodoni-moda-400-italic.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/bodoni-moda-400-normal.woff2) format('woff2')}

:root{
  --abyss:#05070E;--abyss-2:#070C13;--abyss-3:#0B131B;
  --hairline:rgba(120,205,215,.12);--hairline-2:rgba(120,205,215,.20);
  --ink:#DCE9EC;--ink-dim:#93A8AF;--ink-faint:#6E858C;
  --glow:#3FF0D2;--glow-deep:#12B39A;--glow-soft:rgba(63,240,210,.14);--gold:#E7C15E;
  --serif:"Bodoni Moda","Didot","Bodoni 72","Bodoni MT",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  --mono:"Courier Prime","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --shell:min(1180px,90vw);color-scheme:dark
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--abyss);color:var(--ink);font-family:var(--mono);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(150,205,220,.011) 3px 4px),radial-gradient(66% 48% at 60% -8%,rgba(150,178,228,.11),transparent 62%),radial-gradient(120% 80% at 80% -12%,rgba(20,110,130,.22),transparent 55%),radial-gradient(90% 60% at 6% 6%,rgba(34,64,128,.16),transparent 60%),radial-gradient(150% 130% at 50% 128%,rgba(12,58,66,.32),transparent 60%),var(--abyss)}
/* Film grain. Deliberately NOT `mix-blend-mode` — a blended full-viewport fixed layer
   forces the compositor to re-blend the whole page on every scrolled frame, which is a
   large source of scroll jank. Plain alpha over a near-black world looks the same and
   stays on its own cheap layer. */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
#plankton{position:fixed;inset:0;z-index:-1;pointer-events:none}
a{color:inherit}img{display:block;max-width:100%}.shell{width:var(--shell);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:balance;margin:0}
.skip-link{position:fixed;top:10px;left:10px;z-index:100;transform:translateY(-160%);transition:transform .2s ease;padding:.7em 1.2em;border-radius:3px;background:var(--glow);color:#022;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.skip-link:focus{transform:none}a:focus-visible,.btn:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:2px}
.btn{display:inline-flex;align-items:center;gap:.6em;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:.9em 1.5em;border-radius:2px;border:1px solid var(--hairline-2);color:var(--ink);background:transparent;text-decoration:none;transition:border-color .2s,color .2s,background .2s,box-shadow .3s}
.btn:hover{border-color:var(--glow);color:var(--glow);box-shadow:0 0 0 1px var(--glow-soft),0 0 34px -6px var(--glow-soft)}
.btn--primary{background:var(--glow);color:#022;border-color:var(--glow);box-shadow:0 0 46px -10px rgba(63,240,210,.6)}
.btn--primary:hover{background:#5df6da;color:#022;border-color:#5df6da}.btn svg{width:15px;height:15px}

header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);background:linear-gradient(180deg,rgba(4,7,12,.85),rgba(4,7,12,.5));border-bottom:1px solid var(--hairline)}
.nav-in{width:var(--shell);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;height:68px}.brand{display:flex;align-items:center;gap:.5em;font-family:var(--serif);font-size:25px;letter-spacing:.01em;text-decoration:none}.brand .mark{height:1.35em;width:auto;filter:drop-shadow(0 0 5px rgba(63,240,210,.3))}.nav-links{display:flex;align-items:center;gap:34px}.nav-links a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);transition:color .2s;text-decoration:none}.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--glow)}
@media(max-width:900px){.nav-links{display:none}}

.blog-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--hairline);min-height:520px;display:flex;align-items:center;padding:clamp(64px,9vw,128px) 0}
.blog-hero::after{content:"";position:absolute;inset:0 0 0 45%;background:url(../assets/submarine-hero.webp) center/cover no-repeat;opacity:.52;-webkit-mask-image:linear-gradient(90deg,transparent,#000 32%);mask-image:linear-gradient(90deg,transparent,#000 32%)}
.blog-hero .shell{position:relative;z-index:1}.eyebrow{display:block;color:var(--glow);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.3rem}.blog-hero h1{max-width:12ch;font-size:clamp(3.1rem,7vw,6rem);line-height:.96;text-transform:uppercase}.blog-hero p{max-width:48ch;color:var(--ink-dim);font-size:clamp(.96rem,1.2vw,1.08rem);margin:1.7em 0 0}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin:clamp(64px,9vw,112px) 0;border-radius:8px;overflow:hidden}.post-card{display:flex;flex-direction:column;background:rgba(7,12,19,.94);text-decoration:none;min-height:510px;transition:background .25s,transform .25s}.post-card:hover{background:var(--abyss-3)}.post-card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;filter:saturate(.8) contrast(1.05);opacity:.8}.post-card__body{padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;flex:1}.post-card time,.post-meta{color:var(--ink-faint);font-size:11px;letter-spacing:.14em;text-transform:uppercase}.post-card h2{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.08;margin:.65em 0}.post-card p{color:var(--ink-dim);font-size:.91rem;margin:0}.post-card .read{color:var(--glow);font-size:12px;letter-spacing:.13em;text-transform:uppercase;margin-top:auto;padding-top:2em}
@media(max-width:900px){.post-grid{grid-template-columns:1fr}.post-card{min-height:0}.post-card img{aspect-ratio:2/1}}

.article-hero{border-bottom:1px solid var(--hairline);padding:clamp(52px,8vw,104px) 0}.article-hero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:clamp(38px,7vw,92px);align-items:center}.article-hero h1{font-size:clamp(2.8rem,6.5vw,5.5rem);line-height:.98;text-transform:uppercase;max-width:13ch}.article-hero .dek{color:var(--ink-dim);font-size:clamp(.98rem,1.15vw,1.08rem);max-width:54ch;margin:1.6em 0}.post-meta{display:flex;flex-wrap:wrap;gap:12px 24px}.article-hero figure{margin:0;position:relative}.article-hero figure::before{content:"";position:absolute;inset:-1px;border:1px solid var(--hairline-2);border-radius:50% 50% 4px 4px;box-shadow:0 0 70px -26px rgba(63,240,210,.55)}.article-hero img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:50% 50% 4px 4px;opacity:.82}
@media(max-width:760px){.article-hero__grid{grid-template-columns:1fr}.article-hero figure{max-width:340px}.article-hero img{aspect-ratio:5/4}}

.article-layout{display:grid;grid-template-columns:180px minmax(0,720px);gap:clamp(32px,6vw,76px);justify-content:center;align-items:start;padding:clamp(56px,8vw,104px) 0}.article-toc{position:sticky;top:96px}.article-toc span{display:block;color:var(--ink-faint);font-size:10px;letter-spacing:.17em;text-transform:uppercase;margin-bottom:1em}.article-toc a{display:block;color:var(--ink-dim);font-size:12px;line-height:1.45;text-decoration:none;border-left:1px solid var(--hairline-2);padding:.5em 0 .5em 1em}.article-toc a:hover{color:var(--glow);border-color:var(--glow)}
.article-body{min-width:0}.article-body .standfirst{font-family:var(--serif);font-size:clamp(1.45rem,3vw,2rem);line-height:1.35;color:var(--ink);margin:0 0 2.2em}.article-body section{scroll-margin-top:96px}.article-body section+section{border-top:1px solid var(--hairline);margin-top:clamp(44px,6vw,64px);padding-top:clamp(40px,5vw,56px)}.article-body h2{font-size:clamp(1.75rem,4vw,2.65rem);line-height:1.08}.article-body h3{font-size:1.22rem;margin:2em 0 .2em}.article-body p,.article-body li{color:var(--ink-dim);font-size:.96rem;line-height:1.78}.article-body p{margin:1em 0}.article-body strong{color:var(--ink);font-weight:400}.article-body ul{padding-left:1.3em}.article-body li{margin:.55em 0}.article-body li::marker{color:var(--glow-deep)}.article-body a{color:var(--glow);text-underline-offset:3px}.article-body a:hover{color:#5df6da}.callout{border:1px solid var(--hairline-2);border-left:2px solid var(--glow);background:linear-gradient(110deg,var(--glow-soft),transparent 55%);padding:1.2em 1.4em;margin:1.8em 0}.callout p{margin:0;color:var(--ink)}
.next-post{display:block;margin-top:clamp(56px,8vw,88px);padding:28px 32px;border:1px solid var(--hairline-2);text-decoration:none;background:var(--abyss-2);transition:border-color .2s,box-shadow .2s}.next-post:hover{border-color:var(--glow);box-shadow:0 0 36px -14px var(--glow-soft)}.next-post span{color:var(--ink-faint);font-size:11px;letter-spacing:.15em;text-transform:uppercase}.next-post strong{display:block;color:var(--ink);font-family:var(--serif);font-size:1.45rem;font-weight:400;margin-top:.25em}
.series-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:1px;margin-top:clamp(56px,8vw,88px);border:1px solid var(--hairline-2);background:var(--hairline-2)}
.series-nav a{display:flex;flex-direction:column;justify-content:center;gap:.4em;min-height:96px;padding:22px 26px;text-decoration:none;background:var(--abyss-2);transition:border-color .2s,box-shadow .2s,background .2s}
.series-nav a:hover{background:var(--abyss)}
.series-nav .s-label{color:var(--ink-faint);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.series-nav .s-title{color:var(--ink);font-family:var(--serif);font-size:1.12rem;font-weight:400;line-height:1.25}
.series-nav a:hover .s-title{color:var(--glow)}
.series-nav .s-prev{text-align:left}
.series-nav .s-index{text-align:center;align-items:center;justify-content:center}
.series-nav .s-next{text-align:right;align-items:flex-end}
.series-nav .s-empty{pointer-events:none;background:transparent}
@media(max-width:640px){.series-nav{grid-template-columns:1fr}.series-nav .s-next,.series-nav .s-prev{text-align:left;align-items:flex-start}.series-nav .s-index{text-align:left;align-items:flex-start}}
@media(max-width:820px){.article-layout{grid-template-columns:1fr}.article-toc{display:none}}

.doc-cta{position:relative;overflow:hidden;border-top:1px solid var(--hairline);padding:clamp(64px,9vw,112px) 0;text-align:center;background:linear-gradient(rgba(5,7,14,.72),rgba(5,7,14,.94))}
/* The wave plate is the last thing on every blog page and sits under a 72%–94% black
   scrim, so it is never worth blocking the initial load for. A CSS background is not
   subject to loading="lazy", so blog.js adds .bg-ready when the section approaches the
   viewport and only then is the image requested. With JS off the scrim alone renders,
   which is nearly the same picture. */
.doc-cta.bg-ready{background-image:linear-gradient(rgba(5,7,14,.72),rgba(5,7,14,.94)),url(../assets/crashing_waves-cta.webp);background-position:center;background-size:cover}.doc-cta h2{font-size:clamp(2rem,4vw,3.2rem);text-transform:uppercase}.doc-cta p{color:var(--ink-dim);max-width:48ch;margin:1.2em auto 2em}
footer{border-top:1px solid var(--hairline);padding:44px 0 64px}.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}.foot-in .brand{font-size:20px}.foot-links{display:flex;flex-wrap:wrap;gap:28px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}.foot-links a{color:var(--ink-faint);text-decoration:none}.foot-links a:hover{color:var(--glow)}.foot-links .social-link{display:inline-flex;align-items:center;gap:6px}.social-link svg{width:16px;height:16px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.foot-meta{margin-top:28px;font-size:11px;letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase}