/* ============================================================
   CHANDLER JOLY — STYLESHEET
   Everything visual lives here. Start with the tokens below:
   change --red once and the whole site changes with it.
   ============================================================ */

:root{
  /* --- color ------------------------------------------- */
  --paper:      #F4F3F1;   /* page background, off-white     */
  --paper-deep: #EBE9E5;   /* insets, table stripes          */
  --surface:    #FFFFFF;   /* cards                          */
  --ink:        #14161A;   /* headings, primary text         */
  --ink-soft:   #4A5057;   /* body text                      */
  --muted:      #868C94;   /* labels, captions               */
  --line:       #E5E3DF;   /* hairlines                      */
  --line-deep:  #D3D0CA;   /* stronger borders               */
  --mark:       #BFBCB5;   /* ledger ticks — needs to be seen */
  --red:        #E11D2A;   /* THE accent. Used sparingly.    */
  --red-deep:   #B3121D;   /* red text on light backgrounds  */
  --red-tint:   #FCEAEC;   /* red backgrounds, very light    */

  /* --- type -------------------------------------------- */
  --display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- space (8px base) -------------------------------- */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --max: 1240px;
  --radius: 10px;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-soft);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); font-weight:600; margin:0; letter-spacing:-.022em; line-height:1.12 }
h1{ letter-spacing:-.032em; line-height:1.05 }
p{ margin:0 }
ul{ margin:0; padding:0; list-style:none }
button{ font:inherit; cursor:pointer }

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:3px }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--s3) }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* eyebrow label — used above every section */
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:flex-start; gap:9px; line-height:1.5;
}
.eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--red); flex:none; margin-top:5px;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(244,243,241,.88);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--max); margin:0 auto; padding:0 var(--s3);
  height:60px; display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
}
.nav-name{
  font-family:var(--display); font-weight:600; font-size:17px; color:var(--ink);
  display:flex; align-items:center; gap:9px; letter-spacing:-.01em;
}
.nav-name::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--red) }
.nav-links{ display:flex; align-items:center; gap:var(--s3) }
.nav-links a{
  font-size:13.5px; font-weight:500; color:var(--ink-soft);
  transition:color .15s;
}
.nav-links a:hover{ color:var(--ink) }
.nav-links a.here{ color:var(--ink); font-weight:600 }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; line-height:1;
  padding:13px 20px; border-radius:8px; border:1px solid transparent;
  transition:background .16s, border-color .16s, color .16s, transform .16s;
}
.btn svg{ flex:none }
.btn-red{ background:var(--red); color:#fff }
.btn-red:hover{ background:var(--red-deep) }
.btn-line{ background:var(--surface); color:var(--ink); border-color:var(--line-deep) }
.btn-line:hover{ border-color:var(--ink); }
.btn-ghost{ padding:13px 0; color:var(--ink) }
.btn-ghost:hover{ color:var(--red-deep) }
.btn:active{ transform:translateY(1px) }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:var(--s7) 0 var(--s5) }
.hero h1{
  font-size:clamp(36px, 6vw, 64px);
  max-width:18ch; margin-top:var(--s3);
}
.hero h1 .accent{ color:var(--red) }
.hero-intro{
  max-width:60ch; margin-top:var(--s3); font-size:17px; line-height:1.65;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4) }

/* ---- signature: the launch ledger -------------------------
   Every launch since Mar 2024 drawn as one tick. The shape of
   the bar IS the claim — you don't have to take "15 a month"
   on faith, you can see the cadence.
--------------------------------------------------------- */
.ledger{
  margin-top:var(--s6);
  border-top:1px solid var(--line-deep);
  padding-top:var(--s2);
}
.ledger-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s2);
}
.ledger-title{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.ledger-read{ font-size:13px; color:var(--ink-soft) }
.ledger-read b{ color:var(--ink); font-weight:600 }
.ledger-track{
  display:flex; align-items:flex-end; gap:3px; height:76px;
  padding-bottom:var(--s1); border-bottom:1px solid var(--line-deep);
}
.led-col{
  flex:1 1 0; min-width:0; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; gap:2px;
  position:relative;
}
.led-col .tick{
  height:2px; background:var(--mark); border-radius:1px;
  transform:scaleY(0); transform-origin:bottom;
  animation:tickIn .5s cubic-bezier(.2,.8,.3,1) forwards;
}
.led-col .tick.mine{ background:var(--red) }
.led-col:hover .tick{ background:var(--ink) }
.led-col:hover .tick.mine{ background:var(--red) }
@keyframes tickIn{ to{ transform:scaleY(1) } }
.led-col .cap{
  position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:10px; color:var(--muted);
  white-space:nowrap; opacity:0; transition:opacity .14s; pointer-events:none;
}
.led-col:hover .cap{ opacity:1 }
.ledger-axis{
  display:flex; justify-content:space-between; margin-top:var(--s2);
  font-family:var(--mono); font-size:10.5px; color:var(--muted);
  letter-spacing:.06em; text-transform:uppercase;
}
.ledger-key{
  display:flex; gap:var(--s3); margin-top:var(--s2);
  font-size:12px; color:var(--muted);
}
.ledger-key span{ display:flex; align-items:center; gap:7px }
.ledger-key i{ width:14px; height:3px; border-radius:2px; background:var(--mark); display:block }
.ledger-key i.mine{ background:var(--red) }

/* ============================================================
   STAT BAR — modular, hairline grid
   ============================================================ */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin-top:var(--s6);
}
.stat{ background:var(--surface); padding:var(--s3) var(--s3) calc(var(--s3) - 4px) }
.stat .n{
  font-family:var(--display); font-weight:600; font-size:clamp(30px,3.6vw,42px);
  color:var(--ink); line-height:1; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
.stat:first-child .n{ color:var(--red) }
.stat .l{
  margin-top:10px; font-size:13px; font-weight:600; color:var(--ink);
}
.stat .note{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:3px }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding:var(--s7) 0 }
.section + .section{ padding-top:0 }
.section-head{ margin-bottom:var(--s4) }
.section-head:not(:has(h2)){ margin-bottom:var(--s3) }
.section-head h2{ font-size:clamp(26px,3.2vw,36px); margin-top:var(--s2) }
.section-head .lede{ max-width:58ch; margin-top:var(--s2); font-size:16px }

/* ---- featured work cards ---- */
.workgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3) }
.workcard{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s3);
  display:flex; flex-direction:column; min-height:260px;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.workcard:hover{
  border-color:var(--line-deep); transform:translateY(-3px);
  box-shadow:0 12px 28px -18px rgba(20,22,26,.35);
}
.workcard .kick{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.workcard h3{ font-size:24px; margin-top:10px }
.workcard .blurb{ font-size:14.5px; margin-top:var(--s2); flex:1 }
.workcard .meta{
  display:flex; align-items:center; gap:var(--s2); margin-top:var(--s3);
  padding-top:var(--s2); border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12px; color:var(--muted);
}
.workcard .meta .val{ color:var(--red-deep); font-weight:500 }
.workcard .go{
  margin-top:var(--s2); font-size:13.5px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; gap:6px;
}
.workcard:hover .go{ color:var(--red-deep) }
.workcard .go svg{ transition:transform .18s }
.workcard:hover .go svg{ transform:translateX(3px) }

/* ---- capabilities ---- */
.caps{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.cap-block{ background:var(--surface); padding:var(--s4) }
.cap-block h3{ font-size:20px }
.cap-block p{ margin-top:12px; font-size:14.5px }
.cap-block ul{ display:flex; flex-wrap:wrap; gap:7px; margin-top:var(--s3) }
.cap-block li{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--line);
  padding:5px 9px; border-radius:5px;
}

/* ---- work teaser (link into the dashboard) ---- */
.teaser{
  background:var(--ink); color:#fff; border-radius:var(--radius);
  padding:var(--s5); display:flex; align-items:center;
  justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
}
.teaser h2{ color:#fff; font-size:clamp(24px,3vw,32px); max-width:20ch }
.teaser p{ color:#B6BAC0; margin-top:12px; max-width:46ch; font-size:15px }
.teaser .btn-red{ white-space:nowrap }

/* ---- experience ---- */
.exp{ display:flex; flex-direction:column; gap:1px; background:var(--line);
      border:1px solid var(--line); border-radius:var(--radius); overflow:hidden }
.exp-row{
  background:var(--surface); padding:var(--s4);
  display:grid; grid-template-columns:260px 1fr; gap:var(--s4);
}
.exp-when .dates{ font-family:var(--mono); font-size:12px; color:var(--muted) }
.exp-when h3{ font-size:20px; margin-top:6px }
.exp-when .co{ font-size:13.5px; color:var(--ink-soft); margin-top:4px }
.exp-when .co b{ color:var(--ink); font-weight:600 }
.exp-what li{
  position:relative; padding-left:19px; font-size:14.5px;
}
.exp-what li + li{ margin-top:11px }
.exp-what li::before{
  content:''; position:absolute; left:0; top:10px;
  width:6px; height:6px; border-radius:50%; background:var(--line-deep);
}
.exp-what li:first-child::before{ background:var(--red) }

/* ---- education ---- */
.edu{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3) }
.edu-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s3);
}
.edu-card .dates{ font-family:var(--mono); font-size:11.5px; color:var(--muted) }
.edu-card h3{ font-size:19px; margin-top:8px }
.edu-card .org{ font-size:14px; margin-top:5px }
.edu-card .detail{ font-size:13px; color:var(--muted); margin-top:3px }

/* ---- contact ---- */
.contact{
  border-top:2px solid var(--ink); padding-top:var(--s5);
  display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap;
}
.contact h2{ font-size:clamp(30px,4vw,46px) }
.contact p{ max-width:42ch; margin-top:var(--s2) }
.contact-links{ display:flex; flex-direction:column; gap:11px; font-size:15px }
.contact-links a{ display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:500 }
.contact-links a:hover{ color:var(--red-deep) }
.contact-links .lbl{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); width:72px; flex:none; font-weight:400;
}

/* ---- footer ---- */
.foot{
  margin-top:var(--s7); border-top:1px solid var(--line);
  padding:var(--s3) 0 var(--s5);
  display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; color:var(--muted);
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1) }
.rv.in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
  .rv{ opacity:1; transform:none }
  .led-col .tick{ transform:scaleY(1) }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .workgrid{ grid-template-columns:1fr 1fr }
  .stats{ grid-template-columns:1fr 1fr }
  .exp-row{ grid-template-columns:1fr; gap:var(--s3) }
}
@media (max-width:720px){
  :root{ --s7:64px }
  .wrap{ padding:0 18px }
  .nav-in{ padding:0 18px }
  .nav-links{ gap:16px }
  .nav-links a.hide-sm{ display:none }
  .workgrid,.caps,.edu{ grid-template-columns:1fr }
  .hero{ padding-top:var(--s5) }
  .ledger-track{ height:60px }
  .teaser{ padding:var(--s4) }
  .cap-block{ padding:var(--s3) }
}
@media (max-width:520px){
  .stats{ grid-template-columns:1fr }
  .ledger-key{ flex-direction:column; gap:6px }
}