/* ============================================
   Yego Kevins — Case Study Site
   Palette: deep teal / sand / amber signal
   ============================================ */

:root{
  --ink:#1A2422;
  --teal:#0B3D3A;
  --teal-deep:#082B29;
  --sand:#F3EEE3;
  --sand-2:#EAE2D2;
  --amber:#B5742A;
  --line:#C9BFA8;
  --white:#FFFDF8;
  --text-soft:#3C463F;
  --maxw:980px;
}

@font-face{
  font-family:'system-serif';
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--teal-deep);
  margin:0;
}

.eyebrow{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--teal);
  display:flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:'';
  width:6px;height:6px;
  border-radius:50%;
  background:var(--amber);
  display:inline-block;
}

a{color:var(--teal-deep);text-decoration:none;}
a:focus-visible, button:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---------- Nav ---------- */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(243,238,227,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.nav-mark{
  font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:var(--teal-deep);
}
.nav-mark span{color:var(--amber);}
.nav-links{display:flex;gap:28px;font-size:14px;font-weight:500;}
.nav-links a{color:var(--text-soft);font-weight:600;transition:color .15s;}
.nav-links a:hover{color:var(--teal-deep);}

/* ---------- Hero ---------- */
.hero{padding:88px 0 64px;border-bottom:1px solid var(--line);overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1fr 280px;align-items:center;gap:32px;position:relative;}
.hero-copy{position:relative;z-index:2;}
.hero-portrait{
  position:relative;z-index:1;
  width:100%;aspect-ratio:3/4;
  justify-self:end;
}
.hero-portrait img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:grayscale(1) contrast(0.92) brightness(1.08);
  opacity:0.16;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 96%),
                      linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 22%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 96%),
              linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 22%);
  mask-composite:intersect;
}
@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-portrait{display:none;}
}
.hero .eyebrow{margin-bottom:18px;}
.hero h1{font-size:clamp(36px,6vw,58px);line-height:1.05;max-width:780px;}
.hero .role{
  margin-top:18px;font-size:18px;color:var(--text-soft);max-width:620px;
}
.hero-meta{
  margin-top:36px;display:flex;flex-wrap:wrap;gap:28px;
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--teal);
}
.hero-meta a{border-bottom:1px solid var(--teal);}

/* ---------- Ledger line (signature element) ---------- */
.ledger{
  display:flex;align-items:center;gap:0;margin:56px 0 0;
}
.ledger .stop{
  width:11px;height:11px;border-radius:50%;
  border:2px solid var(--teal-deep);background:var(--sand);
  flex-shrink:0;
}
.ledger .stop.filled{background:var(--amber);border-color:var(--amber);}
.ledger .seg{flex:1;height:1px;background:var(--line);}

/* ---------- Section ---------- */
.section{padding:64px 0;border-bottom:1px solid var(--line);}
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:36px;gap:16px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(26px,3.4vw,34px);}

/* ---------- Case study cards (index) ---------- */
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.case-card{
  background:var(--white);padding:32px;display:flex;flex-direction:column;gap:16px;
  transition:background .15s;
}
.case-card:hover{background:var(--sand-2);}
.case-thumb{
  aspect-ratio:16/10;border-radius:6px;
  background:repeating-linear-gradient(135deg,var(--sand-2) 0 12px, var(--white) 12px 24px);
  border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:16px;
}
.case-thumb span{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--teal);
  color:var(--teal-deep);font-weight:500;line-height:1.5;
}
.case-thumb.img,.hero-image.img,.figure .img-box.img{
  border:1px solid var(--line);background:var(--white);
}
.case-thumb.img img,.hero-image.img img,.figure .img-box.img img{
  width:100%;height:100%;object-fit:cover;border-radius:6px;
}
.case-card .ctag{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--amber);letter-spacing:.06em;}
.case-card h3{font-size:22px;}
.case-card p{margin:0;font-size:14.5px;color:var(--text-soft);}
.case-card .stats{display:flex;gap:18px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--teal);margin-top:4px;}
.case-card .go{font-size:13px;font-weight:600;color:var(--teal-deep);margin-top:auto;}
.case-card .go::after{content:' →';}

@media (max-width:720px){.case-grid{grid-template-columns:1fr;}}

/* ---------- Timeline (other roles) ---------- */
.timeline-item{
  display:grid;grid-template-columns:140px 1fr;gap:24px;padding:18px 0;
  border-top:1px solid var(--line);
}
.timeline-item:first-child{border-top:none;}
.timeline-item .when{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--teal);padding-top:4px;}
.timeline-item h4{font-size:17px;font-family:'Fraunces',serif;color:var(--teal-deep);margin:0 0 4px;}
.timeline-item p{margin:0;font-size:14px;color:var(--text-soft);}

/* ---------- Footer ---------- */
footer{padding:48px 0 64px;}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
footer .eyebrow{margin:0;}
.foot-links{display:flex;gap:20px;font-size:14px;}

/* ============================================
   Case study page
   ============================================ */
.case-hero{padding:56px 0 40px;border-bottom:1px solid var(--line);}
.back-link{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--teal);
  display:inline-flex;align-items:center;gap:6px;margin-bottom:28px;
}
.back-link::before{content:'←';}

.case-title-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:18px;}
.case-title-row h1{font-size:clamp(32px,5vw,48px);max-width:640px;}
.case-meta-box{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--teal);
  text-align:right;line-height:1.8;
}

.hero-image{
  margin-top:40px;aspect-ratio:16/7;border-radius:8px;
  background:repeating-linear-gradient(135deg,var(--sand-2) 0 14px, var(--white) 14px 28px);
  border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;
}
.hero-image span{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--teal-deep);font-weight:500;text-align:center;}

.case-body{display:grid;grid-template-columns:220px 1fr;gap:48px;padding:56px 0;}
.case-sidebar{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--teal);}
.case-sidebar dt{text-transform:uppercase;letter-spacing:.08em;color:var(--teal);font-weight:600;margin-top:20px;}
.case-sidebar dt:first-child{margin-top:0;}
.case-sidebar dd{margin:6px 0 0;color:var(--ink);font-size:13.5px;}

.case-content h2{font-size:22px;margin-top:40px;margin-bottom:14px;}
.case-content h2:first-child{margin-top:0;}
.case-content p{margin:0 0 16px;font-size:16px;}
.case-content ul{margin:0 0 16px;padding-left:20px;}
.case-content li{margin-bottom:8px;}

.figure{margin:28px 0;}
.figure .img-box{
  aspect-ratio:16/9;border-radius:8px;
  background:repeating-linear-gradient(135deg,var(--sand-2) 0 14px, var(--white) 14px 28px);
  border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;
}
.figure .img-box span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--teal-deep);font-weight:500;text-align:center;padding:0 20px;}
.figure figcaption{font-size:13px;color:var(--text-soft);margin-top:8px;font-family:'JetBrains Mono',monospace;}

.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:32px 0;}
.metric{background:var(--white);padding:22px;text-align:center;}
.metric .num{font-family:'Fraunces',serif;font-size:30px;color:var(--teal-deep);font-weight:600;}
.metric .lbl{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--teal);margin-top:4px;text-transform:uppercase;letter-spacing:.06em;}

.case-nav{display:flex;justify-content:space-between;padding:40px 0;border-top:1px solid var(--line);}
.case-nav a{font-family:'JetBrains Mono',monospace;font-size:13px;}

@media (max-width:760px){
  .case-body{grid-template-columns:1fr;}
  .metric-row{grid-template-columns:1fr;}
}

/* ============================================
   NEW ADDITIONS: Resume btn, Research, Coaching
   ============================================ */

/* --- Nav resume link --- */
.nav-resume {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--amber) !important;
  border: 1px solid var(--amber);
  padding: 5px 12px;
  border-radius: 3px;
  transition: background .15s, color .15s;
}
.nav-resume:hover {
  background: var(--amber);
  color: var(--white) !important;
}

/* --- Hero action buttons --- */
.hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.btn-resume {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal-deep);
  color: var(--white) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 3px;
  transition: background .15s;
  text-decoration: none;
}
.btn-resume:hover { background: var(--teal); }
.btn-resume span { color: var(--amber); }

.btn-chat {
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--teal-deep) !important;
  border-bottom: 1px solid var(--teal-deep);
  padding: 10px 0;
  transition: color .15s;
}
.btn-chat:hover { color: var(--amber) !important; border-color: var(--amber); }

/* --- Research cards --- */
.research-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.research-card {
  background: var(--white);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .15s;
}
.research-card:hover { background: var(--sand-2); }
.rctag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--amber);
}
.research-card h3 {
  font-size: 20px;
  color: var(--teal-deep);
  margin: 0;
  font-family: 'Fraunces', serif;
  font-weight: 600;
}
.research-card p {
  margin: 0;
  font-size: 14.5px;
  color: var(--text-soft);
}
.research-card .go {
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-deep);
  margin-top: auto;
}
.research-card .go::after { content: ' →'; }

@media (max-width: 720px) { .research-grid { grid-template-columns: 1fr; } }

/* --- Coaching / Mantra section --- */
.section--teal {
  background: var(--teal-deep);
  border-color: rgba(255,255,255,0.08);
}
.section--teal .section-head h2 {
  color: var(--sand);
}
.section--teal .eyebrow {
  color: var(--amber);
}
.section--teal .eyebrow::before {
  background: var(--amber);
}

.mantra-intro {
  max-width: 620px;
  margin-bottom: 40px;
}
.mantra-intro p {
  font-size: 16px;
  color: rgba(243,238,227,0.7);
  margin: 0;
  line-height: 1.7;
}

.mantra-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
}
.mantra-card {
  background: rgba(8,43,41,0.6);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background .15s;
}
.mantra-card:hover { background: rgba(11,61,58,0.8); }
.mantra-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--amber);
}
.mantra-card h4 {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--sand);
  margin: 0;
  line-height: 1.2;
}
.mantra-card p {
  margin: 0;
  font-size: 14px;
  color: rgba(243,238,227,0.65);
  line-height: 1.65;
}

.coaching-cta {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.coaching-cta .eyebrow {
  margin: 0;
}

@media (max-width: 760px) {
  .mantra-grid { grid-template-columns: 1fr; }
  .nav-resume { display: none; }
}
@media (max-width: 520px) {
  .mantra-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
}