:root{
  --gold:#C08A2D;
  --gold-dark:#9A6C1B;
  --gold-light:#E8C069;
  --gold-lighter:#F0C36A;
  --fog:#F2ECDD;
  --ink:#16303A;
  --ocean:#20708C;
  --sand:#CBB98F;
  --haze:#9DB2A6;
  --line:#DCD2BC;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  background:
    radial-gradient(circle 300px at 86% 210px, rgba(244,200,112,.55) 0%, rgba(244,200,112,.22) 38%, transparent 72%) no-repeat,
    radial-gradient(circle 46px at 86% 210px, rgba(252,222,150,.9) 0%, rgba(252,222,150,0) 100%) no-repeat,
    linear-gradient(180deg,
      #7FA8BC 0px,
      #A7C4CC 190px,
      #E2E5DA 390px,
      #F2ECDD 540px,
      #E3EBE7 33%,
      #B4CBCD 50%,
      #7BA7B1 64%,
      #4A8597 76%,
      #2A637C 86%,
      #154462 95%,
      #0A2E46 100%);
  min-height:100vh;
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:17.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:#fff}
.mono{font-family:'IBM Plex Mono',monospace}
a{color:var(--ocean);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
a:hover,a:focus-visible{border-bottom-color:var(--ocean)}
a:focus-visible{outline:2px solid var(--ocean);outline-offset:3px}

.wrap{max-width:860px;margin:0 auto;padding:0 24px}

nav{
  display:flex;flex-wrap:wrap;gap:18px;
  padding:28px 0 0;
  font-family:'IBM Plex Mono',monospace;font-size:13px;
}
nav a{color:var(--ink);opacity:.78}
nav a:hover{opacity:1;border-bottom-color:var(--ink)}
nav .prompt{color:#8A5F14}

header{padding:88px 0 0}
h1{
  text-shadow:0 1px 0 rgba(255,255,255,.25);
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:clamp(40px,7vw,64px);
  letter-spacing:-0.02em;line-height:1.02;
}
.role{
  font-family:'Space Grotesk',sans-serif;font-weight:500;
  font-size:clamp(18px,3vw,22px);color:var(--ocean);
  margin-top:14px;
}
.intro{margin-top:26px;max-width:58ch;font-size:18.5px}

.buoy{
  color:#C3D6DA;
  border-top:1px solid rgba(234,241,242,.22);
  border-bottom:1px solid var(--ink);
  padding:10px 0;
  font-family:'IBM Plex Mono',monospace;
  font-size:13.5px;letter-spacing:0;
  display:flex;flex-wrap:wrap;gap:8px 20px;
  color:var(--ink);
  margin-top:0;flex:1;
  cursor:pointer;user-select:none;
  min-height:44px;align-items:center;
}
.buoy span b{font-weight:500;color:var(--ink)}
.buoy:hover span b{text-decoration:underline}
.buoy.stale span b{opacity:.75}

section{padding:56px 0 0}
section::before{
  content:"";display:block;height:8px;margin-bottom:44px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8'%3E%3Cpath d='M0 4 Q7 0 14 4 T28 4' fill='none' stroke='%2320708C' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x left center;
  opacity:.45;
}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;color:var(--haze);
  margin-bottom:22px;
}
.eyebrow::before{content:"~";color:var(--gold);margin-right:2px}
h2{
  font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:30px;letter-spacing:-0.01em;margin-bottom:18px;
}
p + p{margin-top:14px}
.body-copy{max-width:60ch}

.rows{margin-top:22px}
.row{
  display:grid;grid-template-columns:1fr auto;gap:6px 24px;
  padding:16px 0;border-bottom:1px solid var(--line);
  align-items:baseline;
  transition:background .12s;
}
.row:first-of-type{border-top:1px solid var(--line)}
.row:hover{background:rgba(32,112,140,.05)}
.row .name{font-weight:500}
.row .desc{grid-column:1;color:#3E5560;font-size:15px}
.row .meta{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--haze);white-space:nowrap}
.row .meta-gold{color:var(--gold-dark)}

.books{display:flex;flex-direction:column;gap:13px}
.book{border-left:2px solid var(--sand);padding:2px 0 2px 14px}
.book .t{font-weight:500}
.book .a{font-size:14px;color:#3E5560}
.book .s{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--haze);margin-top:2px}
.book .s-gold{color:var(--gold)}

.tags{display:flex;flex-wrap:wrap;gap:10px}
.tag{
  font-family:'IBM Plex Mono',monospace;font-size:13px;
  border:1px solid var(--ink);border-radius:999px;
  padding:6px 14px;
}

.pitch{
  margin-top:26px;background:var(--ink);color:var(--fog);
  padding:26px 28px;border-radius:4px;
}
.pitch p{max-width:none}
.pitch a{color:var(--sand)}
.pitch a:hover{border-bottom-color:var(--sand)}
.pitch .mono{font-size:13px;color:var(--haze);margin-bottom:8px}
.pitch .pitch-cta{margin-top:14px}

footer{
  margin-top:96px;padding:28px 0 48px;
  color:#C3D6DA;
  border-top:1px solid rgba(234,241,242,.22);
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--haze);
}
footer a{color:#F2F6F6}

.buoy-float{
  display:flex;align-items:flex-end;gap:14px;margin-top:48px;
}
.buoy-float svg{flex-shrink:0}
#buoy-svg{
  animation:bob 3.4s ease-in-out infinite;
  transform-origin:50% 90%;
}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(-2.5deg)}
  50%{transform:translateY(-4px) rotate(2.5deg)}
}

#books, #offline{color:#EAF1F2}
#books h2, #offline h2{color:#F5F1E6}
#books .eyebrow, #offline .eyebrow{color:#B9CFD4}
#investing .eyebrow, #building .eyebrow{color:var(--ink)}
#investing .eyebrow::before, #building .eyebrow::before{color:var(--gold-dark)}
#investing .eyebrow .depth, #building .eyebrow .depth{color:var(--gold-dark)}
#investing .row .meta, #building .row .meta{color:var(--ink)}
#writing .eyebrow, #research .eyebrow{color:var(--ink)}
#writing .eyebrow::before, #research .eyebrow::before{color:var(--ink)}
#writing .eyebrow .depth, #research .eyebrow .depth{color:var(--ink)}
#writing .row .meta{color:var(--ink)}
#writing .row .desc{color:var(--ink)}
#writing a{color:var(--ink)}
#writing a:hover, #writing a:focus-visible{border-bottom-color:var(--ink)}
#books .row, #offline .row{border-color:rgba(230,239,240,.2)}
#research .tag{border-color:var(--ink);color:var(--ink)}
#books .book{border-left-color:rgba(203,185,143,.45)}
#books .book .t{color:#F5F1E6}
#books .book .a{color:#BCCDD2}
#books .s-gold{color:var(--gold-lighter)}
#books .eyebrow .depth, #offline .eyebrow .depth{color:var(--gold-light)}
#offline .body-copy{color:#E6EFF0}
#offline .offline-list{font-size:13.5px;line-height:2;color:#E6EFF0}
#research::before, #books::before, #offline::before{opacity:.3}

.eyebrow .depth{
  float:right;color:var(--gold);font-weight:500;letter-spacing:.04em;
}
.eyebrow .depth::before{content:"\25BE ";font-size:10px}

@media (prefers-reduced-motion: reduce){
  #buoy-svg{animation:none}
}

#boot{
  position:fixed;inset:0;background:var(--fog);z-index:10;
  font-family:'IBM Plex Mono',monospace;font-size:13.5px;line-height:1.9;
  padding:48px 24px;color:var(--ink);
}
#boot .ok{color:var(--ocean)}
#boot.done{display:none}
.cursor::after{
  content:"\258A";color:var(--ocean);margin-left:6px;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  #boot{display:none}
  .cursor::after{animation:none}
}

@media(max-width:600px){
  header{padding-top:64px}
  section{padding-top:56px}
  body{font-size:16px}
  .intro{font-size:16.5px}
  h2{font-size:24px}
  .buoy{font-size:12px}
  .wrap{padding:0 20px}
}

@media(min-width:700px){
  .books{
    display:block;
    columns:2;
    column-gap:40px;
  }
  .book{
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    page-break-inside:avoid;
    margin-bottom:13px;
  }
}