@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap');

:root{
  --paper:#FFFFFF;
  --ink:#141414;
  --ink-soft:rgba(20,20,20,0.62);
  --ink-faint:rgba(20,20,20,0.36);
  --line:#E7E4DC;
  --accent:#5B3B7A;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scrollbar-gutter:stable;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:15.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--ink); color:var(--paper);}
a{color:inherit; text-decoration:none;}
a:focus-visible, button:focus-visible{outline:1px solid var(--ink); outline-offset:3px;}
em, i.serif{font-family:'Instrument Serif',serif; font-style:italic; font-weight:400;}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1180px; margin:0 auto; padding:20px 48px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-mark{font-family:'Archivo',sans-serif; font-size:18px; font-weight:500; letter-spacing:-0.01em;}
.nav-mark i.serif{font-size:19px;}
.nav-links{display:flex; gap:34px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:500;}
.nav-links a{color:var(--ink-soft); transition:color .15s; border-bottom:1px solid transparent;}
.nav-links a:hover{color:var(--ink); border-color:var(--ink);}
.nav-links .current{color:var(--ink); border-bottom:1px solid var(--ink);}

.crumb{
  max-width:1180px; margin:0 auto; padding:26px 48px 0;
  font-size:12px; color:var(--ink-faint);
}
.crumb a{border-bottom:1px solid var(--ink-faint);}
.crumb a:hover{color:var(--ink); border-color:var(--ink);}

/* ---------- HERO ---------- */
.hero{padding:64px 48px 0; max-width:1180px; margin:0 auto;}
.eyebrow{
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:18px; font-weight:500;
}
h1.title{
  font-family:'Archivo',sans-serif; font-weight:400; font-size:clamp(56px,9vw,128px);
  line-height:0.92; letter-spacing:-0.02em; margin:0;
}
.subtitle{
  font-size:17px; color:var(--ink-soft); max-width:520px; margin:26px 0 44px; font-weight:400; line-height:1.6;
}

/* hero art */
.hero-art{
  border:1px solid var(--line);
  background:#FAFAF8;
  position:relative;
}
.hero-art svg,
.hero-art img{ width:100%; height:auto; display:block; }

/* ---------- META + INTRO ---------- */
.meta-row{
  display:grid; grid-template-columns:230px 1fr; gap:64px;
  padding:64px 48px 0; max-width:1180px; margin:64px auto 0;
  border-top:1px solid var(--line);
}
.meta-block{padding-top:36px;}
.meta-block dt{
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:22px;
}
.meta-block dt:first-child{margin-top:0;}
.meta-block dd{margin:5px 0 0; font-size:14px; font-weight:500;}
.deliverables{margin-top:5px; font-size:14px; font-weight:500;}
.intro{padding-top:36px;}
.intro p{font-size:20px; line-height:1.55; color:var(--ink); max-width:600px; margin:0; font-weight:400;}
.intro p i.serif{color:var(--ink);}

/* ---------- SECTIONS ---------- */
section.chapter{ padding:96px 48px 0; max-width:1180px; margin:0 auto; }
.chapter-head{display:flex; align-items:baseline; gap:20px; margin-bottom:30px;}
.chapter-num{font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums;}
h2.chapter-title{
  font-family:'Archivo',sans-serif; font-weight:400; font-size:34px; margin:0; letter-spacing:-0.01em;
}
h3{font-family:'Archivo',sans-serif; font-weight:400; font-size:20px; margin:0 0 10px; letter-spacing:-0.01em; line-height:1.2;}
.chapter-body{display:grid; grid-template-columns:1.1fr 0.9fr; gap:72px; align-items:start;}
.chapter-body p{margin:0 0 18px; color:var(--ink); font-size:15.5px;}
.chapter-body p.lead{font-size:18px; line-height:1.5; font-weight:400;}

.takeaways{ border-top:1px solid var(--ink); padding-top:22px; }
.takeaways p.label{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 16px; }
.takeaways ul{margin:0; padding:0; list-style:none;}
.takeaways li{ position:relative; padding-left:18px; margin-bottom:14px; font-size:14.5px; line-height:1.5; color:var(--ink-soft);}
.takeaways li:last-child{margin-bottom:0;}
.takeaways li::before{ content:'—'; position:absolute; left:0; top:0; color:var(--ink-faint); }

/* ---------- FULL WIDTH ARTIFACT BLOCKS ---------- */
.artifact{ margin-top:48px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.artifact-caption{
  padding:16px 0 40px; font-size:13px; color:var(--ink-faint); display:flex; gap:12px; align-items:flex-start; max-width:760px;
}
.artifact-caption .tag{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); flex-shrink:0; padding-top:1px; font-weight:500;}

/* order flow diagram */
.flow{padding:44px 0; overflow-x:auto;}
.flow-row{display:flex; align-items:center; gap:0; min-width:660px;}
.flow-node{ font-size:12px; padding:11px 15px; text-align:center; white-space:nowrap; font-weight:500; border:1px solid var(--ink); }
.flow-node.step{background:var(--paper); color:var(--ink);}
.flow-node.decision{background:var(--ink); color:var(--paper);}
.flow-node.end{background:var(--paper); color:var(--ink); border-style:dashed;}
.flow-arrow{width:26px; height:1px; background:var(--ink-faint); flex-shrink:0; position:relative;}
.flow-arrow::after{ content:''; position:absolute; right:0; top:-3px; border-left:6px solid var(--ink-faint); border-top:3px solid transparent; border-bottom:3px solid transparent; }

/* voice transcript signature component */
.transcript{padding:44px 0; display:flex; flex-direction:column; gap:16px; max-width:600px;}
.bubble{display:flex; gap:14px; align-items:flex-start;}
.bubble .who{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; width:56px; flex-shrink:0; padding-top:11px; color:var(--ink-faint);}
.bubble .say{ padding:11px 16px; font-size:15px; line-height:1.5; max-width:440px; border:1px solid var(--line);}
.bubble.alexa .say{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.wave{display:inline-flex; gap:2px; align-items:center; margin-left:8px; vertical-align:middle;}
.wave i{display:inline-block; width:2px; background:var(--paper); border-radius:1px;}
.wave i:nth-child(1){height:6px;} .wave i:nth-child(2){height:11px;}
.wave i:nth-child(3){height:8px;} .wave i:nth-child(4){height:13px;} .wave i:nth-child(5){height:5px;}

/* affinity map recreation */
.affinity{padding:44px 0; display:flex; gap:0; flex-wrap:wrap;}
.aff-col{flex:1; min-width:150px; border-left:1px solid var(--line); padding:0 24px;}
.aff-col:first-child{border-left:none; padding-left:0;}
.aff-col h4{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 16px; font-weight:500;}
.note{ font-size:13px; line-height:1.4; padding:0 0 14px; margin-bottom:14px; border-bottom:1px solid var(--line); color:var(--ink-soft);}
.note:last-child{border-bottom:none; margin-bottom:0;}

/* ---------- ACTIONS NUMBERED LIST (case-study "Actions" section) ---------- */
.actions-list{ list-style:none; margin:32px 0 0; padding:0; max-width:860px; }
.actions-list li{ display:grid; grid-template-columns:44px 1fr; gap:24px; padding:26px 0; border-top:1px solid var(--line); }
.actions-list li:first-child{ border-top:1px solid var(--ink); }
.a-num{ font-family:'Archivo',sans-serif; font-size:13px; color:var(--ink-faint); font-variant-numeric:tabular-nums; padding-top:3px; }
.actions-list p{ margin:0; font-size:15.5px; line-height:1.6; color:var(--ink-soft); }
.actions-list p strong{ color:var(--ink); font-weight:600; }

/* ---------- REFLECTION THREE-UP (case-study "Reflection" section) ---------- */
.reflection-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:8px; }
.reflection-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.reflection-col{ border-left:1px solid var(--line); padding:0 28px; }
.reflection-col:first-child{ border-left:none; padding-left:0; }
.reflection-col p.label{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 14px; font-weight:500; }
.reflection-col p{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0; }

/* ---------- STRENGTHS TAG ROW (case-study "Strengths" section) ---------- */
.strengths-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.strengths-list > span{ font-size:12px; letter-spacing:0.03em; padding:9px 16px; border:1px solid var(--line); color:var(--ink-soft); font-weight:500; }

/* ---------- OUTCOME ---------- */
.outcome{ margin-top:96px; padding:72px 48px; max-width:1180px; margin-left:auto; margin-right:auto; background:var(--ink); color:var(--paper); }
.outcome-inner{max-width:1084px; margin:0 auto;}
.outcome .chapter-num{color:rgba(255,255,255,0.45);}
.outcome h2.chapter-title{color:var(--paper);}
.outcome-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:40px;}
.outcome-stat{border-top:1px solid rgba(255,255,255,0.25); padding-top:18px;}
.outcome-stat .num{font-family:'Archivo',sans-serif; font-size:42px; font-weight:400; color:var(--paper);}
.outcome-stat .lbl{font-size:13.5px; color:rgba(255,255,255,0.6); margin-top:8px; line-height:1.5;}
.outcome-note{ margin-top:40px; font-size:13px; color:rgba(255,255,255,0.5); border-left:1px solid rgba(255,255,255,0.3); padding-left:16px; max-width:640px; line-height:1.6; font-style:italic;}
.outcome p.body-text{font-size:18px; color:rgba(255,255,255,0.92); max-width:680px; margin-top:24px; line-height:1.55;}
.outcome a.link{border-bottom:1px solid rgba(255,255,255,0.4);}
.outcome a.link:hover{border-color:#fff;}

/* ---------- FOOTER CTA ---------- */
footer.cta{ margin-top:96px; padding:88px 48px 64px; max-width:1180px; margin-left:auto; margin-right:auto; border-top:1px solid var(--line); }
.cta-row{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:32px;}
.cta-next .lbl{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px;}
.cta-next .proj{ font-family:'Instrument Serif',serif; font-style:italic; font-size:36px; font-weight:400; align-items:center; gap:12px; color:var(--ink);}
.cta-next .proj:hover{color:var(--ink-soft);}
.cta-contact{ font-size:13px; display:flex; flex-direction:column; gap:7px; text-align:right;}
.cta-contact a{border-bottom:1px solid var(--ink-faint);}
.cta-contact a:hover{border-color:var(--ink);}
.foot-bottom{ margin-top:72px; padding-top:16px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; font-size:11.5px; color:var(--ink-faint);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:880px){
  .wrap,.nav-inner,.crumb,.hero,.meta-row,section.chapter,.outcome,footer.cta{padding-left:22px; padding-right:22px;}
  .meta-row{grid-template-columns:1fr; gap:28px;}
  .meta-block{padding-top:0;}
  .chapter-body{grid-template-columns:1fr; gap:28px;}
  .outcome-grid{grid-template-columns:1fr; gap:24px;}
  .nav-links{display:none;}
  h1.title{font-size:56px;}
  .cta-contact{text-align:left;}
  .flow{overflow-x:scroll;}
  .aff-col{border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:16px;}
  .aff-col:first-child{border-top:none; padding-top:0;}
  .actions-list li{ grid-template-columns:32px 1fr; gap:14px; }
  .reflection-grid, .reflection-grid.cols-4{ grid-template-columns:1fr; gap:24px; }
  .reflection-col{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:16px; }
  .reflection-col:first-child{ border-top:none; padding-top:0; }
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

/* ---------- MEDIA DEFAULTS ---------- */
img, svg, video, canvas { max-width:100%; height:auto; display:block; }
/* <picture> only picks the source format — it should not become a layout box,
   or the img's height:100% inside .feat-thumb / .work-thumb / .hero-art would
   resolve against the wrapper instead of the sized container. */
picture { display:contents; }

/* Contained figure — aligns to the same column as body text */
.figure{ max-width:1180px; margin:56px auto 0; padding:0 48px; }
.figure img{ width:100%; }
.figure figcaption{
  font-size:13px; color:var(--ink-faint); line-height:1.55; max-width:760px;
  margin-top:14px; display:flex; gap:12px; align-items:flex-start;
}
.figure figcaption .tag{
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-soft); flex-shrink:0; padding-top:1px; font-weight:500;
}

/* Full-bleed figure — edge to edge. Place as a direct child of <body>. */
.figure-bleed{ margin:56px 0 0; }
.figure-bleed img{ width:100%; }
.figure-bleed figcaption{
  max-width:1180px; margin:14px auto 0; padding:0 48px;
  font-size:13px; color:var(--ink-faint); line-height:1.55;
}

/* Images used inside an in-chapter .artifact block */
.artifact img{ width:100%; }

@media (max-width:880px){
  .figure{ padding-left:22px; padding-right:22px; }
  .figure-bleed figcaption{ padding-left:22px; padding-right:22px; }
}