@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');

:root{
  --bg:#0B0C0D;
  --bg-soft:#131417;
  --bg-raised:#17181B;
  --ink:#EDECE6;
  --ink-soft:#9A998F;
  --ink-faint:#5C5B54;
  --line:#232427;
  --line-soft:#1B1C1F;
  --accent:#C9A66B;
  --accent-soft:rgba(201,166,107,0.10);
  --accent-dim:#8A754F;
  --serif:'Fraunces', serif;
  --sans:'Geist', 'Inter', -apple-system, sans-serif;
  --mono:'Geist Mono', 'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-soft); color:var(--ink);}
a{color:inherit;}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

h1,h2,h3{font-family:var(--serif); font-weight:400; line-height:1.15; margin:0; letter-spacing:-0.01em; color:var(--ink);}
p{margin:0;}
.mono{font-family:var(--mono);}

/* SCROLL PROGRESS */
.progress-bar{position:fixed; top:0; left:0; height:2px; background:var(--accent); z-index:100; width:0%; transition:width .1s linear;}

/* NAV */
nav{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 48px;
  background:rgba(11,12,13,0.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-brand{font-family:var(--serif); font-size:1.05rem; color:var(--ink);}
.nav-links{display:flex; gap:32px; font-size:0.86rem;}
.nav-links a{text-decoration:none; color:var(--ink-soft); transition:color .15s;}
.nav-links a:hover, .nav-links a.active{color:var(--accent);}
.nav-links .sep{color:var(--line);}

/* WRAP */
.wrap{max-width:720px; margin:0 auto; padding:0 48px;}
.wrap-wide{max-width:960px; margin:0 auto; padding:0 48px;}

/* HERO */
.hero{padding:130px 0 70px; position:relative;}
.status-line{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.84rem; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:100px;
  padding:6px 14px 6px 10px; margin-bottom:36px;
}
.status-dot{width:7px; height:7px; border-radius:50%; background:#6FA97F; flex-shrink:0; box-shadow:0 0 0 3px rgba(111,169,127,0.15);}
.hero h1{font-size:clamp(2.2rem, 4.6vw, 3.3rem); font-weight:300; max-width:16ch; color:var(--ink);}
.hero .role{font-size:1.06rem; color:var(--ink-soft); margin-top:24px; max-width:58ch;}
.cta-row{display:flex; gap:12px; margin-top:40px; flex-wrap:wrap;}
.btn{
  font-size:0.9rem; padding:11px 22px; border-radius:8px; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; transition:all .18s;
  font-family:var(--sans);
}
.btn-primary{background:var(--accent); color:#151208;}
.btn-primary:hover{background:#D8B87E; transform:translateY(-1px);}
.btn-secondary{border:1px solid var(--line); color:var(--ink);}
.btn-secondary:hover{border-color:var(--accent); color:var(--accent);}

/* SECTION */
.section{padding:68px 0;}
.section-alt{background:var(--bg-soft); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.eyebrow{font-size:0.8rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); margin-bottom:18px;}

/* PRINCIPLE FRAGMENTS */
.principles{display:grid; gap:38px; margin-top:8px;}
.principle{border-top:1px solid var(--line); padding-top:24px;}
.principle p{font-family:var(--serif); font-size:1.4rem; font-weight:300; line-height:1.42; color:var(--ink);}

/* TAGS */
.tag-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;}
.tag{font-size:0.85rem; color:var(--ink-soft); border:1px solid var(--line); border-radius:100px; padding:7px 15px; transition:border-color .15s, color .15s;}
.tag:hover{border-color:var(--accent); color:var(--accent);}

/* CASE STUDY TEASERS */
.cs-list{margin-top:8px;}
.cs-teaser{display:block; text-decoration:none; color:var(--ink); border-top:1px solid var(--line); padding:36px 0; transition:padding-left .2s;}
.cs-teaser:hover{padding-left:8px;}
.cs-teaser:hover h3{color:var(--accent);}
.cs-teaser:last-child{border-bottom:1px solid var(--line);}
.cs-teaser .co{font-size:0.82rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.07em;}
.cs-teaser h3{font-size:1.55rem; font-weight:400; margin-top:11px; transition:color .15s;}
.cs-teaser p{color:var(--ink-soft); margin-top:11px; max-width:60ch; font-size:0.98rem;}
.cs-teaser .arrow{margin-top:16px; font-size:0.85rem; color:var(--accent);}
.cs-teaser.stub{opacity:0.6;}

/* PULL QUOTE */
.quote{font-family:var(--serif); font-weight:300; font-style:italic; font-size:1.55rem; line-height:1.48; color:var(--ink); margin:42px 0; padding-left:26px; border-left:2px solid var(--accent);}
.quote .src{display:block; margin-top:18px; font-family:var(--sans); font-style:normal; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint);}

/* PROCESS STEPPER */
.stepper{margin:40px 0;}
.step{position:relative; padding:0 0 46px 34px; border-left:1px solid var(--line);}
.step:last-child{border-left:1px solid transparent; padding-bottom:0;}
.step::before{content:''; position:absolute; left:-5px; top:2px; width:9px; height:9px; border-radius:50%; background:var(--bg); border:2px solid var(--accent);}
.step .step-label{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.09em; color:var(--accent); margin-bottom:9px;}
.step h4{font-family:var(--sans); font-weight:600; font-size:1.08rem; margin-bottom:10px; color:var(--ink);}
.step p{color:var(--ink-soft); font-size:0.98rem; max-width:66ch;}

/* THREE PERSPECTIVES */
.perspectives{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:28px 0; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.perspective{padding:22px 20px; border-right:1px solid var(--line);}
.perspective:last-child{border-right:none;}
.perspective .p-label{font-size:0.74rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--accent); margin-bottom:10px;}
.perspective p{color:var(--ink-soft); font-size:0.9rem; margin:0;}

/* EDGE CASES */
.edge-cases{margin:26px 0; padding:22px 24px; background:var(--bg-soft); border:1px solid var(--line); border-radius:10px;}
.edge-cases .ec-label{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--accent); margin-bottom:14px;}
.edge-cases ul{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px;}
.edge-cases li{color:var(--ink-soft); font-size:0.9rem; padding-left:16px; position:relative;}
.edge-cases li::before{content:'—'; position:absolute; left:0; color:var(--ink-faint);}

/* STATS */
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:28px; margin:28px 0; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stat-row .stat dt{font-size:0.8rem; color:var(--ink-faint); margin-bottom:7px;}
.stat-row .stat dd{margin:0; font-family:var(--serif); font-size:1.6rem; font-weight:400; color:var(--accent);}

/* DIAGRAM / POSTER */
.diagram-wrap{margin:34px 0; background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:26px; overflow-x:auto;}
.diagram-wrap svg{min-width:600px; display:block; margin:0 auto;}
.diagram-caption{font-size:0.85rem; color:var(--ink-faint); margin-top:12px; text-align:center;}
.poster{margin:38px 0; border-radius:14px; overflow:hidden; border:1px solid var(--line);}
.poster svg{display:block; width:100%; height:auto;}

/* SPEC / DATA TABLE */
.spec-table{margin:28px 0; border:1px solid var(--line); border-radius:10px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;}
.spec-table table{width:100%; border-collapse:collapse; font-size:0.88rem;}
.spec-table th, .spec-table td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line);}
.spec-table th{background:var(--bg-soft); color:var(--ink-soft); font-weight:500; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em;}
.spec-table td{font-family:var(--mono); font-size:0.82rem; color:var(--ink);}
.spec-table tr:last-child td{border-bottom:none;}

/* PROMPT DIFF */
.diff-wrap{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:28px 0;}
.diff-col{border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.diff-col .diff-label{padding:10px 16px; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid var(--line);}
.diff-col.before .diff-label{color:#B8846A; background:rgba(184,132,106,0.08);}
.diff-col.after .diff-label{color:#7FA98E; background:rgba(127,169,142,0.08);}
.diff-col pre{margin:0; padding:16px; font-family:var(--mono); font-size:0.78rem; color:var(--ink-soft); white-space:pre-wrap; line-height:1.6;}

.callout{border-left:2px solid var(--ink-faint); padding:18px 24px; margin:26px 0; background:var(--bg-soft); border-radius:0 10px 10px 0;}
.callout .k{display:block; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--accent); margin-bottom:8px;}
.callout p{color:var(--ink-soft); font-size:0.96rem;}
.callout.future{border-left-color:var(--accent); background:var(--accent-soft);}

/* WORK PAGE */
.job{border-top:1px solid var(--line); padding:34px 0; display:grid; grid-template-columns:220px 1fr; gap:32px;}
.job:last-child{border-bottom:1px solid var(--line);}
.job .meta{font-size:0.85rem; color:var(--ink-faint);}
.job .meta .role{color:var(--ink); font-weight:500; display:block; margin-top:4px; font-family:var(--sans);}
.job ul{margin:0; padding-left:18px; color:var(--ink-soft); font-size:0.95rem;}
.job li{margin-bottom:9px;}
.job .placeholder{color:var(--accent); font-style:italic;}

/* RESUME / PROFILE PAGE */
.profile-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin:32px 0;}
.profile-block{border-top:1px solid var(--line); padding-top:20px;}
.profile-block h4{font-family:var(--sans); font-weight:600; font-size:0.95rem; color:var(--ink); margin-bottom:14px;}
.profile-block ul{margin:0; padding-left:18px; color:var(--ink-soft); font-size:0.94rem;}
.profile-block li{margin-bottom:8px;}
.pub-item{border-top:1px solid var(--line); padding:18px 0;}
.pub-item .pub-meta{font-size:0.8rem; color:var(--ink-faint); margin-bottom:4px;}
.pub-item .placeholder{color:var(--accent); font-style:italic;}

/* FOOTER */
footer{padding:64px 0 90px; border-top:1px solid var(--line); font-size:0.9rem; color:var(--ink-soft);}
.footer-links{display:flex; gap:22px; margin-top:16px; font-size:0.88rem;}
.footer-links a{text-decoration:none; border-bottom:1px solid var(--line);}
.footer-links a:hover{border-color:var(--accent); color:var(--accent);}

.contact-block{border:1px solid var(--line); border-radius:12px; padding:36px 40px; margin:32px 0; background:var(--bg-soft); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.contact-block h3{font-size:1.4rem; font-weight:400;}
.contact-block .contact-links{display:flex; gap:14px; flex-wrap:wrap;}

/* COMPANY BADGE */
.company-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  font-family:var(--mono); font-size:0.7rem; font-weight:500; color:var(--accent);
  background:var(--bg-soft); flex-shrink:0;
}

/* CLEANER ROLE HISTORY (fixes cramped title/date lines) */
.job-header{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.job-header .company-name{font-family:var(--sans); font-weight:600; font-size:1.02rem; color:var(--ink);}
.role-history{display:flex; flex-direction:column; gap:10px; margin-bottom:6px;}
.role-history-item{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-bottom:10px; border-bottom:1px solid var(--line-soft);}
.role-history-item:last-child{border-bottom:none; padding-bottom:0;}
.role-history-item .title{color:var(--ink); font-weight:500; font-size:0.95rem;}
.role-history-item .dates{font-family:var(--mono); font-size:0.76rem; color:var(--ink-faint); white-space:nowrap;}

/* THINK FLOW (replaces orbit — visualizes process, not just companies) */
.think-flow{margin:36px 0 10px;}
.think-flow svg{width:100%; height:auto; display:block;}
.think-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:4px;}
.think-node{text-align:center;}
.think-node .tn-title{font-size:0.86rem; font-weight:500; color:var(--ink); margin-bottom:6px;}
.think-node .tn-caption{font-size:0.78rem; color:var(--ink-faint); line-height:1.5;}

/* INTERACTIVE COMPANY ROW */
.company-row{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:14px 0 6px;}
.company-card{
  border:1px solid var(--line); border-radius:10px; padding:16px 14px; text-align:center;
  transition:border-color .18s, transform .18s; cursor:default;
}
.company-card:hover{border-color:var(--accent); transform:translateY(-3px);}
.company-card .cc-badge{width:38px; height:38px; margin:0 auto 10px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:0.72rem; border:1px solid currentColor;}
.company-card .cc-name{font-size:0.86rem; color:var(--ink); font-weight:500;}
.company-card .cc-detail{font-size:0.74rem; color:var(--ink-faint); margin-top:6px; opacity:0; max-height:0; overflow:hidden; transition:opacity .2s, max-height .2s;}
.company-card:hover .cc-detail, .company-card:focus-within .cc-detail{opacity:1; max-height:60px; margin-top:8px;}

.inline-status{font-size:0.92rem; color:var(--ink-faint); margin-top:18px;}
.inline-status strong{color:var(--accent); font-weight:500;}


/* ROLE SUMMARY CALLOUT (home) */
.role-summary{border:1px solid var(--accent-dim); background:var(--accent-soft); border-radius:12px; padding:26px 30px; margin:32px 0;}
.role-summary .rs-label{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); margin-bottom:10px;}
.role-summary h3{font-size:1.25rem; font-weight:400; margin-bottom:8px;}
.role-summary p{color:var(--ink-soft); font-size:0.95rem;}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}

/* SNAPSHOT BOX */
.meta-tags{display:flex; gap:14px; align-items:center; margin-bottom:20px; flex-wrap:wrap;}
.meta-tag{font-size:0.8rem; color:var(--ink-faint); font-family:var(--mono);}
.meta-tag.accent{color:var(--accent);}
.snapshot-box{border:1px solid var(--line); border-radius:10px; padding:26px 28px; margin:32px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; background:var(--bg-soft);}
.snapshot-box .snap-item dt{font-size:0.76rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); margin-bottom:8px;}
.snapshot-box .snap-item dd{margin:0; font-size:0.9rem; color:var(--ink); line-height:1.5;}

/* TLDR BOX */
.tldr-box{border:1px solid var(--accent-dim); border-radius:10px; padding:28px 30px; margin:32px 0; background:var(--accent-soft);}
.tldr-box .tldr-label{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); margin-bottom:18px;}
.tldr-row{margin-bottom:16px;}
.tldr-row:last-child{margin-bottom:0;}
.tldr-row .tk{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); margin-bottom:5px;}
.tldr-row p{color:var(--ink); font-size:0.96rem;}

/* HEADLINE METRICS LIST */
.headline-metrics{margin:28px 0; padding:0; list-style:none;}
.headline-metrics li{padding:12px 0; border-top:1px solid var(--line); color:var(--ink-soft); font-size:0.96rem;}
.headline-metrics li:last-child{border-bottom:1px solid var(--line);}
.headline-metrics strong{color:var(--accent); font-family:var(--mono); font-weight:500;}

/* CONTACT BLOCK */
.contact-block{border:1px solid var(--line); border-radius:12px; padding:36px; margin:20px 0; background:var(--bg-soft); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.contact-block h3{font-size:1.4rem; font-weight:400;}
.contact-links{display:flex; gap:14px; flex-wrap:wrap;}

@media (max-width:820px){
  .snapshot-box{grid-template-columns:1fr 1fr;}
  .perspectives{grid-template-columns:1fr;}
  .perspective{border-right:none; border-bottom:1px solid var(--line);}
  .perspective:last-child{border-bottom:none;}
  .diff-wrap{grid-template-columns:1fr;}
  .edge-cases ul{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .snapshot-box{grid-template-columns:1fr;}
  .contact-block{flex-direction:column; align-items:flex-start;}
}
@media (max-width:720px){
  nav{padding:16px 20px; flex-wrap:wrap; gap:10px;}
  .nav-links{gap:16px; font-size:0.8rem; flex-wrap:wrap; row-gap:8px;}
  .wrap, .wrap-wide{padding:0 20px;}
  .hero{padding:56px 0 34px;}
  .hero h1{font-size:clamp(1.7rem, 8vw, 2.3rem);}
  .job{grid-template-columns:1fr; gap:10px;}
  .stat-row{grid-template-columns:repeat(2,1fr); gap:18px 20px;}
  .meta-tags{gap:8px;}
  .job-header{flex-wrap:wrap;}
  .role-history-item{flex-direction:column; align-items:flex-start; gap:2px;}
  .cta-row{flex-direction:column; align-items:stretch;}
  .cta-row .btn{justify-content:center;}
  .think-grid{grid-template-columns:repeat(3,1fr); gap:16px 10px;}
  .think-flow svg{display:none;}
  .company-row{grid-template-columns:repeat(2,1fr);}
}