@import url("fonts.css");

/* ═══════════════════ TOKENS ═══════════════════ */
:root{
  --cream:#f0eee6; --cream-2:#e7e2d5; --cream-hi:#faf9f2;
  --ink:#191917; --ink-2:#54524c; --ink-3:#8a877e;
  --line:rgba(25,25,23,.14); --line-2:rgba(25,25,23,.22);
  --dark:#14140f; --dark-2:#20201a; --on-dark:#f0eee6; --on-dark-2:#a3a096;
  --clay:#cc6b4f; --clay-2:#b8583d; --green:#3f8f5f; --navy:#1b2230;

  --sans:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --maxw:1200px;
  --pad:40px;
}

/* ═══════════════════ RESET / BASE ═══════════════════ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p{margin:0;}
hr.rule{border:0;border-top:1px solid var(--line);margin:0;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.mono{font-family:var(--mono);font-weight:500;}

/* skip link */
.skip{
  position:absolute;left:-999px;top:0;z-index:100;
  background:var(--ink);color:var(--on-dark);
  padding:10px 16px;border-radius:0 0 8px 0;font-size:14px;
}
.skip:focus{left:0;}

/* focus visibility */
a:focus-visible,.pill:focus-visible,.text-link:focus-visible{
  outline:2px solid var(--clay-2);outline-offset:3px;border-radius:3px;
}

/* clay underline accent */
.ul{
  position:relative;white-space:nowrap;
}
.ul::after{
  content:"";position:absolute;left:0;right:0;bottom:.11em;height:.055em;
  background:var(--clay);border-radius:2px;
}

/* ═══════════════════ NAV ═══════════════════ */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(240,238,230,.86);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;}
.nav-brand img{width:132px;height:auto;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{
  font-size:14.5px;color:var(--ink-2);font-weight:500;
  transition:color .15s ease;
}
.nav-links a:hover{color:var(--ink);}
.nav-cta{
  color:var(--ink)!important;border:1px solid var(--line-2);
  padding:8px 16px;border-radius:999px;
}
.nav-cta:hover{background:var(--ink);color:var(--on-dark)!important;border-color:var(--ink);}

/* ═══════════════════ HERO ═══════════════════ */
.hero{padding-top:72px;}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr);
  column-gap:56px;
  align-items:end;
}
.hero-head{display:flex;flex-direction:column;}

.eyebrow{
  font-family:var(--mono);font-weight:500;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  display:flex;align-items:center;gap:9px;margin-bottom:26px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--clay);display:inline-block;}

.hero-h{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(44px,6.1vw,86px);
  line-height:1.0;letter-spacing:-.038em;color:var(--ink);
}
.hero-lede-wrap{
  margin-top:34px;padding-top:28px;border-top:1px solid var(--line);
  max-width:500px;
}
.hero-lede{
  font-family:var(--serif);font-weight:400;
  font-size:20px;line-height:1.5;color:var(--ink-2);
  margin-bottom:18px;
}
.text-link{
  font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink);
  border-bottom:1px solid var(--line-2);padding-bottom:2px;
  transition:border-color .15s ease,color .15s ease;
}
.text-link:hover{border-color:var(--clay);color:var(--clay-2);}

/* ledger as hero centerpiece */
.hero-fig{margin:0;align-self:end;}
.hero .rule{margin-top:64px;}

/* ═══════════════════ LEDGER / CORRECTNESS NOTE ═══════════════════ */
.ledger-sec{padding:72px 0 4px;}
.ledger-strip{max-width:820px;}
.kicker{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:18px;
}
.ledger-h{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,3.5vw,44px);line-height:1.08;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:22px;
}
.ledger-body{font-size:18px;color:var(--ink-2);max-width:620px;line-height:1.62;}

.ledger-card{
  background:var(--cream-hi);
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px 28px 24px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -28px rgba(25,25,23,.4);
}
.ledger-cardhead{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
.ledger-tag{font-size:11.5px;letter-spacing:.13em;color:var(--ink-2);}
.ledger-period{font-size:11.5px;letter-spacing:.13em;color:var(--ink-3);}

.ledger-table{width:100%;border-collapse:collapse;}
.ledger-table td{padding:11px 0;border-bottom:1px solid var(--line);vertical-align:middle;}
.l-desc{font-size:15px;color:var(--ink);padding-right:12px;}
.l-date{font-size:12.5px;color:var(--ink-3);text-align:right;width:64px;white-space:nowrap;}
.l-amt{font-size:14.5px;color:var(--ink);text-align:right;width:112px;white-space:nowrap;
  font-variant-numeric:tabular-nums;}
.l-amt.pos{color:var(--green);}

.l-held .l-desc{color:var(--clay-2);}
.l-held .l-amt.held{color:var(--clay-2);}
.l-flag{
  display:inline-block;margin-left:10px;
  font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--clay-2);
  border:1px solid rgba(184,88,61,.4);border-radius:999px;padding:2px 9px;
  vertical-align:middle;
}
.l-total td{border-bottom:none;border-top:2px solid var(--line-2);padding-top:15px;}
.l-total .l-desc{font-weight:500;color:var(--ink);font-size:15px;}
.l-amt.rec{color:var(--green);font-weight:600;font-size:16px;}

.ledger-cap{
  font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.02em;
  color:var(--ink-3);margin-top:16px;line-height:1.5;
}

/* ═══════════════════ DARK FEATURE BAND ═══════════════════ */
.band{background:var(--dark);color:var(--on-dark);margin-top:78px;}
.band-in{
  padding:96px 0 100px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.band-mark{width:120px;height:auto;opacity:.9;margin-bottom:34px;}
.band-h{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(30px,4.4vw,54px);line-height:1.12;letter-spacing:-.012em;
  color:var(--on-dark);max-width:900px;
}
.band-h em{font-style:italic;font-weight:300;color:#e5c9bd;}
.band-sub{
  margin-top:26px;font-size:16px;color:var(--on-dark-2);
  letter-spacing:.01em;max-width:560px;
}

/* ═══════════════════ FOUNDER'S LETTER ═══════════════════ */
.letter{padding:92px 0;}
.letter-grid{display:grid;grid-template-columns:230px 1fr;gap:56px;align-items:start;}
.letter-aside{position:sticky;top:96px;}
.letter-aside .kicker{margin-bottom:12px;}
.letter-meta{font-size:12px;letter-spacing:.05em;color:var(--ink-3);}
.letter-monogram{
  margin-top:34px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:7px;
}
.letter-monogram-mark{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:34px;line-height:1;letter-spacing:-.01em;color:var(--ink);
  margin-bottom:6px;
}
.letter-monogram-line{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
}
.letter-monogram-line.dim{color:var(--ink-3);}
.letter-body{max-width:640px;}
.letter-h{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3vw,36px);line-height:1.14;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:26px;
}
.letter-body p{
  font-family:var(--serif);font-weight:400;
  font-size:19.5px;line-height:1.66;color:var(--ink);
  margin-bottom:20px;
}
.letter-body p em{font-style:italic;color:var(--clay-2);}
.letter-sign{
  font-family:var(--serif)!important;font-style:italic;
  font-size:19px!important;color:var(--ink-2)!important;margin-top:30px!important;
}

/* ═══════════════════ PULL-QUOTE ═══════════════════ */
.pull{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.pull .wrap{padding:70px var(--pad);}
.pull-q{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(30px,4.2vw,52px);line-height:1.12;letter-spacing:-.015em;
  color:var(--ink);max-width:960px;
}

/* ═══════════════════ SECTION HEADS ═══════════════════ */
.sec-head{margin-bottom:44px;max-width:640px;}
.sec-h{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(28px,3.4vw,42px);line-height:1.04;letter-spacing:-.028em;
  color:var(--ink);margin-bottom:14px;
}
.sec-sub{font-size:17.5px;color:var(--ink-2);line-height:1.55;}

/* ═══════════════════ BELIEFS CARDS ═══════════════════ */
.beliefs{padding:92px 0;}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.card{
  background:var(--cream-hi);
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px 26px 22px;
  display:flex;flex-direction:column;
  min-height:308px;
  transition:border-color .18s ease, transform .18s ease;
}
.card:hover{border-color:var(--line-2);transform:translateY(-2px);}
.card-num{
  font-size:13px;letter-spacing:.08em;color:var(--clay-2);margin-bottom:22px;
}
.card-t{
  font-family:var(--sans);font-weight:600;font-size:20px;
  line-height:1.18;letter-spacing:-.018em;color:var(--ink);margin-bottom:12px;
}
.card-b{font-size:15.5px;color:var(--ink-2);line-height:1.58;flex:1;}
.meta{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);}
.meta-row{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;}
.meta-row dt{font-size:11px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase;}
.meta-row dd{margin:0;font-size:11.5px;letter-spacing:.02em;color:var(--ink-2);}
.meta-row dd.rec{color:var(--green);}

/* ═══════════════════ WHAT WE RUN ═══════════════════ */
.run{padding:0 0 92px;}
.run-list{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.run-item{
  background:var(--cream-hi);
  border:1px solid var(--line);
  border-radius:16px;
  padding:30px 30px 28px;
  display:flex;flex-direction:column;
}
.run-top{display:flex;align-items:center;gap:16px;margin-bottom:14px;}
.run-t{
  font-family:var(--sans);font-weight:600;font-size:23px;
  letter-spacing:-.02em;color:var(--ink);
}
.status{
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 11px;border-radius:999px;
  display:inline-flex;align-items:center;gap:7px;
}
.status.live{color:var(--green);border:1px solid rgba(63,143,95,.4);}
.status.live .dot{background:var(--green);}
.status.coming{color:var(--ink-3);border:1px solid var(--line-2);}
.run-b{font-size:16px;color:var(--ink-2);line-height:1.58;flex:1;margin-bottom:22px;max-width:440px;}

.pill{
  align-self:flex-start;
  font-family:var(--sans);font-weight:500;font-size:14.5px;
  color:var(--ink);border:1px solid var(--line-2);
  padding:11px 20px;border-radius:999px;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.pill:hover{background:var(--ink);color:var(--on-dark);border-color:var(--ink);}

/* ═══════════════════ CLOSE ═══════════════════ */
.close{border-top:1px solid var(--line);}
.close-in{padding:100px 0;text-align:center;display:flex;flex-direction:column;align-items:center;}
.close-h{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,4.4vw,56px);line-height:1.06;letter-spacing:-.015em;
  color:var(--ink);margin-bottom:20px;
}
.close-sub{font-size:18px;color:var(--ink-2);max-width:520px;line-height:1.55;margin-bottom:34px;}
.close-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.pill-dark{background:var(--ink);color:var(--on-dark);border-color:var(--ink);padding:13px 26px;font-size:15.5px;}
.pill-dark:hover{background:var(--dark-2);border-color:var(--dark-2);}
.pill-ghost{padding:13px 26px;font-size:15.5px;}

/* ═══════════════════ FOOTER ═══════════════════ */
.foot{padding-bottom:56px;}
.foot .rule{margin-bottom:48px;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;margin-bottom:52px;}
.foot-brand img{width:150px;height:auto;margin-bottom:16px;}
.foot-tag{font-family:var(--serif);font-size:16px;color:var(--ink-2);max-width:270px;line-height:1.45;}
.foot-col{display:flex;flex-direction:column;gap:11px;}
.foot-h{font-size:11px;letter-spacing:.14em;color:var(--ink-3);margin-bottom:5px;}
.foot-col a{font-size:14.5px;color:var(--ink-2);transition:color .15s ease;}
.foot-col a:hover{color:var(--clay-2);}
.foot-fine{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:26px;border-top:1px solid var(--line);gap:16px;flex-wrap:wrap;
}
.foot-fine p{font-size:11.5px;letter-spacing:.03em;color:var(--ink-3);}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width:1040px){
  .hero-grid{grid-template-columns:1fr;row-gap:44px;align-items:start;}
  .hero-fig{align-self:start;max-width:560px;}
  .hero-lede-wrap{max-width:600px;}
}
@media (max-width:980px){
  .letter-grid{grid-template-columns:1fr;gap:24px;}
  .letter-aside{position:static;}
  .letter-monogram{margin-top:22px;padding-top:20px;}
  .cards{grid-template-columns:1fr;gap:18px;}
  .card{min-height:0;}
  .run-list{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px 24px;}
}
@media (max-width:860px){
  :root{--pad:24px;}
  body{font-size:16px;}
  .hero{padding-top:48px;}
  .hero-grid{row-gap:36px;}
  .hero-lede-wrap{margin-top:28px;padding-top:24px;}
  .hero .rule{margin-top:48px;}
  .nav-links{gap:16px;}
  .nav-links a:not(.nav-cta){display:none;}
  .band-in{padding:72px 0;}
  .letter-body p{font-size:18px;}
  .close-in,.pull .wrap{padding:64px var(--pad);}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .l-flag{display:none;}
  .ledger-card{padding:22px 18px 20px;}
  .ledger-table td{padding:12px 0;}
  .l-desc{font-size:13.5px;padding-right:8px;line-height:1.35;}
  .l-date{font-size:11px;width:52px;}
  .l-amt{font-size:13px;width:92px;}
  .l-amt.rec{font-size:15px;}
  .foot-grid{grid-template-columns:1fr;}
  .foot-fine{flex-direction:column;align-items:flex-start;gap:8px;}
}
