/* ============================================================
   Ben Davies-Romano — portfolio
   Refresh: white ground, single green accent, modern type.
   Display = Instrument Serif · UI/body = Inter · Labels = IBM Plex Mono
   ============================================================ */

:root{
  /* ground */
  --bg:#FFFFFF;
  --bg-soft:#F7F8F5;
  --bg-tint:#EFF4F0;

  /* ink */
  --ink:#0F1512;
  --ink-80:rgba(15,21,18,0.80);
  --ink-62:rgba(15,21,18,0.62);
  --ink-45:rgba(15,21,18,0.45);
  --ink-32:rgba(15,21,18,0.32);

  /* single accent */
  --accent:#0B6E4F;
  --accent-deep:#075039;
  --accent-bright:#12A576;
  --accent-soft:#E6F1EC;
  --highlight:#D7F26B;

  /* lines */
  --line:rgba(15,21,18,0.08);
  --line-mid:rgba(15,21,18,0.14);
  --line-strong:rgba(15,21,18,0.22);
  --line-dark:rgba(255,255,255,0.14);
  --line-dark-strong:rgba(255,255,255,0.28);

  --cream:#FBFCFA;

  /* spacing */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:72px; --s7:112px; --s8:150px;

  --maxw:1140px;
  --maxw-text:670px;
  --radius:10px;

  --f-display:'Newsreader', Georgia, serif;
  --f-sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:17.5px;
  line-height:1.62;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0; color:var(--ink); }
h2,h3,h4{ font-family:var(--f-sans); font-weight:600; letter-spacing:-0.025em; line-height:1.2; }
.display{ font-family:var(--f-display); font-weight:400; letter-spacing:-0.015em; }

a{ color:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:var(--highlight); color:var(--ink); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.mono{ font-family:var(--f-mono); }

.eyebrow{
  font-family:var(--f-mono); font-size:13px; text-transform:uppercase; letter-spacing:0.13em;
  color:var(--accent); display:block; margin-bottom:var(--s3);
}
.eyebrow.on-dark{ color:var(--highlight); }

.hl{
  background-image:linear-gradient(var(--highlight), var(--highlight));
  background-repeat:no-repeat; background-position:0 86%; background-size:100% 0.3em;
}

.note{
  font-family:var(--f-mono); font-size:12.5px; line-height:1.65; color:var(--ink-62);
  padding-left:16px; border-left:1px solid var(--line-strong);
}
.note b{ color:var(--ink); font-weight:500; }

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.82); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; }
.nav-name{ font-family:var(--f-display); font-size:20px; text-decoration:none; white-space:nowrap; letter-spacing:-0.01em; }
.nav-name span{ color:var(--accent); }
.nav-links{
  display:flex; gap:20px; list-style:none; margin:0; padding:0;
  font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.05em;
}
.nav-links a{ text-decoration:none; color:var(--ink-62); transition:color 0.18s ease; white-space:nowrap; }
.nav-links a::after{ content:"."; color:var(--accent); }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{
  font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.1em;
  text-decoration:none; color:#fff; background:var(--ink); padding:9px 16px; border-radius:100px; white-space:nowrap;
  transition:background 0.18s ease;
}
.nav-cta:hover{ background:var(--accent-deep); }
@media (max-width:1080px){
  .nav{ flex-wrap:wrap; gap:12px; padding:14px 0; }
  .nav-links{ order:3; width:100%; gap:18px; overflow-x:auto; padding-bottom:2px; }
  .nav-links::-webkit-scrollbar{ display:none; }
}

/* ---------- BUTTONS ---------- */
.btn{
  font-family:var(--f-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.1em;
  text-decoration:none; padding:13px 22px; border-radius:100px; display:inline-flex; align-items:center; gap:8px;
  transition:background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:var(--accent-deep); }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-ghost.on-dark{ border-color:var(--line-dark-strong); color:var(--cream); }
.btn-ghost.on-dark:hover{ border-color:var(--highlight); color:var(--highlight); }

/* ---------- SECTIONS ---------- */
section{ padding:var(--s7) 0; border-top:1px solid var(--line); }
.section-head{ display:grid; grid-template-columns:1fr 0.8fr; gap:var(--s5); margin-bottom:var(--s6); align-items:end; }
.section-head h2{ font-size:clamp(32px,4vw,48px); }
.section-head p{ color:var(--ink-62); font-size:17.5px; margin:0; }
@media (max-width:800px){ .section-head{ grid-template-columns:1fr; gap:var(--s2); margin-bottom:var(--s5); align-items:start; } }

.band-soft{ background:var(--bg-soft); }
.band-dark{ background:var(--ink); color:var(--cream); border-top:none; }
.band-dark h2,.band-dark h3{ color:var(--cream); }
.band-dark p{ color:rgba(251,252,250,0.72); }
.band-dark .note{ color:rgba(251,252,250,0.72); border-left-color:var(--line-dark-strong); }
.band-dark .note b{ color:var(--highlight); }

footer{
  padding:var(--s5) 0 var(--s6); text-align:center; font-family:var(--f-mono); font-size:13px;
  color:var(--ink-45); border-top:1px solid var(--line);
}
footer a{ text-decoration:none; color:var(--ink-45); }
footer a:hover{ color:var(--accent); }

/* ---------- HERO ---------- */
.hero{ padding:var(--s7) 0 var(--s6); border-top:none; }
.hero-grid{ display:grid; grid-template-columns:1.4fr 0.6fr; gap:var(--s6); align-items:start; }
.hero h1{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(42px,6.2vw,80px); line-height:1.02; letter-spacing:-0.03em;
}
.hero-sub{ margin-top:var(--s3); font-size:19px; max-width:540px; color:var(--ink-62); }
.hero-actions{ display:flex; gap:12px; margin-top:var(--s4); flex-wrap:wrap; }

.ai-callout{ margin-top:var(--s5); max-width:580px; padding-left:20px; border-left:2px solid var(--accent); }
.ai-callout .lbl{ font-family:var(--f-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.13em; color:var(--accent); margin-bottom:10px; display:block; }
.ai-callout p{ margin:0; font-size:16.5px; line-height:1.62; color:var(--ink-62); }

.voice-card{ background:var(--bg-soft); border-radius:var(--radius); padding:22px; position:relative; }
.voice-card h4{ font-size:12.5px; font-family:var(--f-mono); text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-45); margin-bottom:12px; }
.voice-card .voice-words{ font-family:var(--f-display); font-size:22px; line-height:1.22; margin:0 0 18px; letter-spacing:-0.02em; }
.voice-card .spectrum-label{ display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-45); margin-bottom:7px; }
.spectrum-track{ height:3px; border-radius:100px; background:var(--line-mid); position:relative; margin-bottom:18px; }
.spectrum-track .dot{ position:absolute; top:50%; left:64%; width:11px; height:11px; border-radius:50%; background:var(--accent); border:2.5px solid var(--bg-soft); transform:translate(-50%,-50%); }
.voice-card .sounds{ font-size:14px; line-height:1.55; color:var(--ink-62); border-top:1px solid var(--line-mid); padding-top:13px; }
.voice-card .sounds b{ display:block; font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-45); margin-bottom:5px; font-weight:500; }

.hero-visual{ display:flex; flex-direction:column; gap:var(--s3); }
.hero-portrait{ position:relative; }
.hero-portrait .frame{ border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4; background:var(--bg-soft); }
.hero-portrait .frame img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:var(--s5); } .hero-visual{ max-width:330px; } }

/* ---------- wordmarks ---------- */
.wordmarks{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 24px;
  font-family:var(--f-display); font-size:clamp(20px,2.4vw,30px); letter-spacing:-0.02em;
}
.wordmarks span{ color:var(--ink-32); transition:color 0.2s ease; }
.wordmarks span:hover{ color:var(--ink); }
.wordmarks .sep{ color:var(--line-strong); }

/* ---------- POV ---------- */
.pov-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5) var(--s6); }
.pov-item{ border-top:1px solid var(--line-mid); padding-top:var(--s3); }
.pov-item .n{ font-family:var(--f-mono); font-size:13px; color:var(--accent); letter-spacing:0.14em; margin-bottom:14px; }
.pov-item h3{ font-size:24px; margin-bottom:12px; }
.pov-item p{ font-size:16.5px; color:var(--ink-62); margin:0 0 16px; }
.pov-item a.src{ font-family:var(--f-mono); font-size:13px; color:var(--accent); text-decoration:none; letter-spacing:0.02em; }
.pov-item a.src:hover{ color:var(--ink); }
@media (max-width:800px){ .pov-grid{ grid-template-columns:1fr; gap:var(--s5); } }

/* ---------- pillars ---------- */
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5) var(--s4); }
.pillar{ display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--ink); padding-top:var(--s3); }
.pillar .num{ font-family:var(--f-mono); font-size:13px; color:var(--accent); letter-spacing:0.14em; }
.pillar h3{ font-size:21px; }
.pillar p{ font-size:16px; color:var(--ink-62); margin:0; }
.pillar .proof{ margin-top:auto; padding-top:14px; font-family:var(--f-mono); font-size:13.5px; line-height:1.55; color:var(--accent); }
@media (max-width:900px){ .pillars{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pillars{ grid-template-columns:1fr; } }

/* ---------- experience ---------- */
.exp-list{ display:flex; flex-direction:column; }
.exp-row{ display:grid; grid-template-columns:165px 1fr 1.1fr; gap:var(--s4); padding:var(--s3) 0; border-top:1px solid var(--line); align-items:start; }
.exp-row:first-child{ border-top:none; padding-top:0; }
.exp-when{ font-family:var(--f-mono); font-size:13px; color:var(--ink-45); padding-top:5px; }
.exp-role h3{ font-size:20px; }
.exp-role .co{ color:var(--accent); font-family:var(--f-mono); font-size:13px; text-transform:uppercase; letter-spacing:0.12em; margin-top:5px; }
.exp-desc{ font-size:16px; color:var(--ink-62); }
@media (max-width:800px){ .exp-row{ grid-template-columns:1fr; gap:8px; } }

/* ---------- case study LIST ---------- */
.work-list{ display:flex; flex-direction:column; }
.work-row{
  display:grid; grid-template-columns:145px 1fr 190px; gap:var(--s4); align-items:baseline;
  padding:var(--s4) 0; border-top:1px solid var(--line); text-decoration:none; color:inherit;
}
.work-row:last-child{ border-bottom:1px solid var(--line); }
.work-row .co{ font-family:var(--f-mono); font-size:13px; text-transform:uppercase; letter-spacing:0.12em; color:var(--accent); }
.work-row .co em{ display:block; font-style:normal; color:var(--ink-62); letter-spacing:0.08em; margin-top:5px; }
.work-row h3{
  font-family:var(--f-display); font-weight:400; letter-spacing:-0.02em;
  font-size:clamp(22px,2.4vw,30px); line-height:1.14; display:inline;
  background-image:linear-gradient(var(--highlight), var(--highlight));
  background-repeat:no-repeat; background-position:0 92%; background-size:0% 0.28em;
  transition:background-size 0.28s ease;
}
.work-row p{ margin:10px 0 0; font-size:16px; color:var(--ink-62); max-width:54ch; }
.work-row .stat{ font-family:var(--f-mono); font-size:13px; color:var(--ink-62); text-align:right; }
.work-row:hover h3{ background-size:100% 0.28em; }
.work-row:hover .stat{ color:var(--accent); }
@media (max-width:860px){
  .work-row{ grid-template-columns:1fr; gap:6px; padding:var(--s3) 0; }
  .work-row .stat{ text-align:left; margin-top:8px; }
}

/* secondary work tier */
.work-sub{ margin-top:var(--s6); }
.work-sub .sub-head{
  font-family:var(--f-mono); font-size:13px; text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-62);
  margin-bottom:var(--s3); padding-bottom:var(--s2); border-bottom:1px solid var(--line);
}
.work-mini{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--s6); }
.work-mini a{
  display:grid; grid-template-columns:118px 1fr; gap:var(--s3); align-items:baseline;
  padding:16px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit;
}
.work-mini .co{ font-family:var(--f-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.12em; color:var(--accent); }
.work-mini .t{ font-size:18px; font-weight:500; letter-spacing:-0.015em; }
.work-mini .d{ font-size:15px; color:var(--ink-62); margin-top:5px; line-height:1.5; }
.work-mini a:hover .t{ color:var(--accent); }
@media (max-width:800px){ .work-mini{ grid-template-columns:1fr; } }

/* ---------- writing / talks ---------- */
.link-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s6); }
.list-item{
  display:grid; grid-template-columns:1fr auto; gap:var(--s3); align-items:baseline;
  padding:18px 0; border-top:1px solid var(--line); text-decoration:none; color:inherit;
}
.list-item .t{ font-size:17.5px; font-weight:500; line-height:1.35; letter-spacing:-0.015em; }
.list-item .m{ font-family:var(--f-mono); font-size:13px; color:var(--ink-45); white-space:nowrap; letter-spacing:0.06em; }
.list-item:hover .t{ color:var(--accent); }
@media (max-width:800px){ .link-list{ grid-template-columns:1fr; } .list-item{ grid-template-columns:1fr; gap:4px; } .list-item .m{ white-space:normal; } }

/* ---------- about ---------- */
.about-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--s6); align-items:start; }
.about-grid p{ font-size:17.5px; color:var(--ink-62); margin:0 0 18px; }
.about-notes{ display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s4); }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; gap:var(--s4); } }

/* ---------- testimonials ---------- */
.quote-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.quote-card{ border-top:1px solid var(--ink); padding-top:var(--s3); }
.quote-card p{ font-family:var(--f-display); font-size:19px; line-height:1.35; margin:0 0 16px; letter-spacing:-0.015em; }
.quote-card .who{ font-family:var(--f-mono); font-size:12px; color:var(--ink-62); line-height:1.6; letter-spacing:0.04em; }
@media (max-width:860px){ .quote-grid{ grid-template-columns:1fr; gap:var(--s4); } }

/* ---------- contact ---------- */
.contact-inner{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:var(--s6); align-items:center; }
.contact-inner h2{ font-family:var(--f-display); font-weight:400; font-size:clamp(32px,4.6vw,54px); line-height:1.05; letter-spacing:-0.03em; color:var(--cream); }
.contact-inner p{ margin-top:var(--s3); font-size:17px; max-width:450px; }
.contact-links{ display:flex; flex-direction:column; }
.contact-link{
  display:flex; align-items:center; justify-content:space-between; padding:17px 0; border-top:1px solid var(--line-dark);
  text-decoration:none; color:var(--cream); font-family:var(--f-mono); font-size:13px;
  text-transform:uppercase; letter-spacing:0.12em; transition:color 0.18s ease, padding 0.18s ease;
}
.contact-link:last-child{ border-bottom:1px solid var(--line-dark); }
.contact-link:hover{ color:var(--highlight); padding-left:8px; }
@media (max-width:820px){ .contact-inner{ grid-template-columns:1fr; gap:var(--s4); } }

/* ============================================================
   CASE STUDY PAGES
   ============================================================ */
.cs-hero{ padding:var(--s6) 0 var(--s5); border-top:none; }
.cs-back{ font-family:var(--f-mono); font-size:13px; text-transform:uppercase; letter-spacing:0.12em; text-decoration:none; color:var(--ink-45); display:inline-block; margin-bottom:var(--s5); }
.cs-back:hover{ color:var(--accent); }
.cs-hero h1{ font-family:var(--f-display); font-weight:400; font-size:clamp(36px,5.6vw,66px); line-height:1.02; letter-spacing:-0.03em; max-width:900px; }
.cs-dek{ margin-top:var(--s3); font-size:19px; max-width:650px; color:var(--ink-62); }
.cs-meta{ display:flex; gap:var(--s5); flex-wrap:wrap; margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--line); }
.cs-meta div .k{ font-family:var(--f-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-45); margin-bottom:6px; }
.cs-meta div .v{ font-size:16px; font-weight:500; letter-spacing:-0.015em; }

.cs-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.cs-stats .stat{ border-top:1px solid var(--ink); padding-top:var(--s3); }
.cs-stats .stat .n{ font-family:var(--f-display); font-weight:400; font-size:clamp(36px,4.8vw,58px); color:var(--accent); line-height:1; letter-spacing:-0.035em; }
.cs-stats .stat .l{ margin-top:14px; font-family:var(--f-mono); font-size:13.5px; line-height:1.55; color:var(--ink-62); }
@media (max-width:800px){ .cs-stats{ grid-template-columns:1fr; gap:var(--s4); } }

.cs-body{ max-width:var(--maxw-text); }
.cs-body h2{ font-size:clamp(26px,3.2vw,34px); margin-top:var(--s6); margin-bottom:var(--s2); }
.cs-body h2:first-child{ margin-top:0; }
.cs-body h3{ font-size:20px; margin-top:var(--s4); margin-bottom:10px; }
.cs-body p{ font-size:17px; line-height:1.72; color:var(--ink-80); margin:0 0 18px; }
.cs-body strong{ color:var(--ink); font-weight:600; }
.cs-body ul{ padding-left:20px; margin:0 0 18px; }
.cs-body li{ font-size:17px; line-height:1.72; color:var(--ink-80); margin-bottom:10px; }
.cs-aside{
  border-left:2px solid var(--accent); padding:2px 0 2px 18px; margin:var(--s4) 0;
  font-family:var(--f-mono); font-size:14px; color:var(--ink-62); line-height:1.7;
}
.cs-aside b{ color:var(--accent); display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:0.14em; margin-bottom:8px; font-weight:500; }
.cs-pull{
  font-family:var(--f-display); font-weight:400; font-size:clamp(24px,3vw,34px); line-height:1.2;
  color:var(--ink); margin:var(--s5) 0; letter-spacing:-0.03em; max-width:600px;
}

/* results table */
.cs-results{ margin:var(--s4) 0 var(--s5); border-top:1px solid var(--ink); }
.cs-results .row{ display:grid; grid-template-columns:1fr auto; gap:var(--s3); align-items:baseline; padding:15px 0; border-bottom:1px solid var(--line); }
.cs-results .row .m{ font-family:var(--f-mono); font-size:13.5px; color:var(--ink-62); }
.cs-results .row .v{ font-family:var(--f-display); font-size:22px; color:var(--accent); letter-spacing:-0.02em; }
.cs-results .src{ margin-top:12px; font-family:var(--f-mono); font-size:13px; color:var(--ink-45); }

/* prompt excerpt block */
.prompt-block{
  background:var(--bg-soft); border-radius:var(--radius); padding:22px 24px; margin:var(--s3) 0 var(--s4);
  font-family:var(--f-mono); font-size:13.5px; line-height:1.7; color:var(--ink-80);
  white-space:pre-wrap; overflow-x:auto;
}
.prompt-block .plabel{
  display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:0.16em; color:var(--accent);
  margin-bottom:14px; font-family:var(--f-mono);
}
.prompt-block b{ color:var(--ink); font-weight:600; }

/* simulated sample session */
.sample{ border:1px solid var(--line-mid); border-radius:var(--radius); overflow:hidden; margin:var(--s3) 0 var(--s4); }
.sample .shead{
  font-family:var(--f-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.16em; color:var(--ink-62);
  padding:12px 20px; border-bottom:1px solid var(--line-mid); background:var(--bg-soft);
}
.sample .turn{ padding:18px 20px; border-bottom:1px solid var(--line); }
.sample .turn:last-child{ border-bottom:none; }
.sample .who{ font-family:var(--f-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.14em; color:var(--accent); margin-bottom:10px; }
.sample .turn p{ margin:0 0 10px; font-size:16px; line-height:1.6; color:var(--ink-80); }
.sample .turn p:last-child{ margin-bottom:0; }
.sample .turn em{ color:var(--ink-45); }

/* evaluation table */
.eval-table{ width:100%; border-collapse:collapse; margin:var(--s3) 0 var(--s2); font-size:15px; }
.eval-table th{
  text-align:left; font-family:var(--f-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--ink-45); font-weight:500; padding:0 12px 10px 0; border-bottom:1px solid var(--line-mid);
}
.eval-table td{ padding:11px 12px 11px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-80); }
.eval-table td:first-child{ font-weight:500; color:var(--ink); }
.eval-table td.score{ font-family:var(--f-mono); color:var(--accent); white-space:nowrap; }
@media (max-width:600px){ .eval-table{ font-size:13px; } .eval-table td:last-child{ font-size:12.5px; } }

.cs-nextup{ display:flex; justify-content:space-between; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.cs-nextup .lbl{ font-family:var(--f-mono); font-size:13px; text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-45); }
.cs-nextup h3{ font-family:var(--f-display); font-weight:400; font-size:24px; letter-spacing:-0.02em; margin-top:8px; }

/* figures */
.cs-figure{ margin:var(--s4) 0 var(--s5); }
.cs-figure img{ width:100%; border-radius:var(--radius); border:1px solid var(--line-mid); background:var(--bg-soft); }
.cs-figure figcaption{ margin-top:14px; font-family:var(--f-mono); font-size:13.5px; color:var(--ink-62); line-height:1.65; max-width:620px; }
.cs-figure figcaption b{ color:var(--accent); font-weight:500; }
.cs-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin:var(--s4) 0 var(--s5); }
.cs-gallery .cs-figure{ margin:0; }
@media (max-width:700px){ .cs-gallery{ grid-template-columns:1fr; } }
.cs-gallery.phones{ grid-template-columns:repeat(2, minmax(180px,250px)); justify-content:start; }
@media (max-width:560px){ .cs-gallery.phones{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   CV PAGE
   ============================================================ */
.cv-hero{ padding:var(--s6) 0 var(--s5); border-top:none; }
.cv-hero h1{ font-family:var(--f-display); font-weight:400; font-size:clamp(42px,6vw,74px); line-height:1; letter-spacing:-0.035em; }
.cv-hero .role{ font-size:clamp(17px,2vw,21px); color:var(--ink-62); margin-top:14px; letter-spacing:-0.02em; }
.cv-hero .cv-actions{ display:flex; gap:12px; margin-top:var(--s4); flex-wrap:wrap; }

.cv-layout{ display:grid; grid-template-columns:180px 1fr; gap:var(--s6); align-items:start; }
.cv-layout + .cv-layout{ margin-top:var(--s6); }
.cv-label{ font-family:var(--f-mono); font-size:13.5px; text-transform:uppercase; letter-spacing:0.16em; color:var(--ink-62); padding-top:5px; position:sticky; top:96px; }
@media (max-width:820px){ .cv-layout{ grid-template-columns:1fr; gap:var(--s2); } .cv-label{ position:static; } }

.cv-summary{ font-size:18.5px; line-height:1.65; color:var(--ink-62); max-width:var(--maxw-text); margin:0; }
.cv-skills{ display:flex; flex-wrap:wrap; gap:9px; }
.cv-skills span{ font-family:var(--f-mono); font-size:13px; padding:7px 13px; border-radius:100px; border:1px solid var(--line-mid); color:var(--ink-62); letter-spacing:0.02em; }

.cv-job{ padding-bottom:var(--s5); }
.cv-job + .cv-job{ border-top:1px solid var(--line); padding-top:var(--s4); }
.cv-job h3{ font-size:21px; }
.cv-job .where{ font-family:var(--f-mono); font-size:13px; text-transform:uppercase; letter-spacing:0.12em; color:var(--accent); margin-top:7px; }
.cv-job .when{ font-family:var(--f-mono); font-size:13px; color:var(--ink-45); margin-top:5px; }
.cv-job ul{ margin:18px 0 0; padding-left:20px; }
.cv-job li{ font-size:16.5px; line-height:1.68; color:var(--ink-62); margin-bottom:10px; }
.cv-job li strong{ color:var(--ink); font-weight:600; }
.cv-job:last-child{ padding-bottom:0; }

.cv-edu{ display:flex; flex-direction:column; gap:var(--s3); }
.cv-edu .item h3{ font-size:19px; }
.cv-edu .item .meta{ font-family:var(--f-mono); font-size:13px; color:var(--ink-45); margin-top:6px; }
.cv-langs{ font-size:16.5px; color:var(--ink-62); max-width:var(--maxw-text); margin:0; }
.cv-langs b{ color:var(--ink); font-weight:600; }

/* ============================================================
   PRINCIPLES · BEFORE-AFTER · VOICE FLOW · RELATED WRITING
   ============================================================ */

/* numbered principles with worked examples */
.principles{ margin:var(--s4) 0 var(--s5); }
.principle{ border-top:1px solid var(--line-mid); padding:var(--s4) 0; }
.principle:last-child{ border-bottom:1px solid var(--line-mid); }
.principle .pnum{
  font-family:var(--f-mono); font-size:13px; letter-spacing:0.16em; color:var(--accent);
  text-transform:uppercase; margin-bottom:12px;
}
.principle h3{ font-size:22px; margin:0 0 12px; letter-spacing:-0.02em; }
.principle > p{ font-size:17px; line-height:1.68; color:var(--ink-80); margin:0 0 18px; }
.principle > p:last-child{ margin-bottom:0; }

/* before / after copy pair */
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); margin:var(--s2) 0; }
.ba > div{ padding:16px 18px; border-radius:var(--radius); background:var(--bg-soft); }
.ba .lab{
  font-family:var(--f-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.14em;
  margin-bottom:10px; display:flex; align-items:center; gap:6px;
}
.ba .no .lab{ color:#B4441F; }
.ba .yes .lab{ color:var(--accent); }
.ba .yes{ background:var(--accent-soft); }
.ba .txt{ font-size:16px; line-height:1.55; color:var(--ink); }
.ba .why{ margin-top:10px; font-family:var(--f-mono); font-size:13px; line-height:1.55; color:var(--ink-62); }
@media (max-width:640px){ .ba{ grid-template-columns:1fr; } }

/* single example callout */
.ex{
  border-left:2px solid var(--line-strong); padding:4px 0 4px 18px; margin:var(--s2) 0 var(--s3);
  font-size:16.5px; line-height:1.6; color:var(--ink);
}
.ex .lab{ font-family:var(--f-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-45); display:block; margin-bottom:8px; }

/* voice flow script */
.flow{ border:1px solid var(--line-mid); border-radius:var(--radius); overflow:hidden; margin:var(--s3) 0 var(--s4); }
.flow .fhead{
  font-family:var(--f-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.16em; color:var(--ink-62);
  padding:14px 20px; background:var(--bg-soft); border-bottom:1px solid var(--line-mid);
}
.flow .step{ display:grid; grid-template-columns:1fr 300px; gap:var(--s3); padding:18px 20px; border-bottom:1px solid var(--line); }
.flow .step:last-child{ border-bottom:none; }
.flow .line{ }
.flow .spk{
  font-family:var(--f-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.14em;
  margin-bottom:8px; color:var(--accent);
}
.flow .spk.user{ color:var(--ink-45); }
.flow .say{ font-size:16.5px; line-height:1.55; color:var(--ink); }
.flow .say em{ color:var(--ink-45); font-style:normal; }
.flow .why{ font-family:var(--f-mono); font-size:13px; line-height:1.6; color:var(--ink-62); padding-top:20px; }
@media (max-width:760px){
  .flow .step{ grid-template-columns:1fr; gap:10px; }
  .flow .why{ padding-top:0; border-left:2px solid var(--line-mid); padding-left:14px; }
}

/* related writing */
.related{ margin:var(--s5) 0 0; padding-top:var(--s4); border-top:1px solid var(--ink); }
.related .rlab{
  font-family:var(--f-mono); font-size:13px; text-transform:uppercase; letter-spacing:0.16em;
  color:var(--ink-62); margin-bottom:var(--s2);
}
.related a{
  display:grid; grid-template-columns:1fr auto; gap:var(--s3); align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit;
}
.related a .t{ font-size:17px; font-weight:500; letter-spacing:-0.015em; line-height:1.4; }
.related a .m{ font-family:var(--f-mono); font-size:13px; color:var(--ink-45); white-space:nowrap; }
.related a:hover .t{ color:var(--accent); }
@media (max-width:600px){ .related a{ grid-template-columns:1fr; gap:4px; } .related a .m{ white-space:normal; } }

/* homepage intro block */
.intro-grid{ display:grid; grid-template-columns:0.7fr 1.3fr; gap:var(--s6); align-items:start; }
.intro-grid p{ font-size:19.5px; line-height:1.6; color:var(--ink-80); margin:0 0 20px; }
.intro-grid p:last-of-type{ margin-bottom:0; }
.intro-grid p strong{ color:var(--ink); font-weight:600; }
@media (max-width:820px){ .intro-grid{ grid-template-columns:1fr; gap:var(--s3); } }

/* discipline tags in the experience list */
.disciplines{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.disciplines span{
  font-family:var(--f-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.1em;
  padding:4px 9px; border-radius:100px; background:var(--accent-soft); color:var(--accent-deep);
}



/* tone bank table */
.bank{ width:100%; border-collapse:collapse; margin-top:var(--s3); margin-bottom:var(--s4); font-size:15px; }
.bank th{
  text-align:left; font-family:var(--f-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.13em;
  color:var(--ink-45); font-weight:500; padding:0 16px 12px 0; border-bottom:1px solid var(--line-mid);
}
.bank td{ padding:14px 16px 14px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-80); line-height:1.55; }
.bank td:first-child{ white-space:nowrap; color:var(--ink); font-weight:500; }
.bank td.tone{ font-family:var(--f-mono); font-size:13px; color:var(--accent); white-space:nowrap; }
.bank td.msg{ color:var(--ink); }
@media (max-width:700px){
  .bank, .bank tbody, .bank tr, .bank td{ display:block; width:100%; }
  .bank thead{ display:none; }
  .bank tr{ border-bottom:1px solid var(--line-mid); padding:14px 0; }
  .bank td{ border:none; padding:2px 0; }
  .bank td.tone{ margin-bottom:6px; }
}

/* ============================================================
   MESSAGE BANK — rendered product copy examples
   ============================================================ */
.msgbank{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-top:var(--s3); margin-bottom:var(--s4); }
.msgbank .m-item{ border:1px solid var(--line-mid); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.msgbank .m-reason{
  font-family:var(--f-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.13em;
  color:var(--ink-62); padding:12px 20px; background:var(--bg-soft); border-bottom:1px solid var(--line-mid);
}
.msgbank .m-body{ padding:20px; flex:1; }
.msgbank .m-h{ font-size:17.5px; font-weight:600; letter-spacing:-0.02em; line-height:1.3; margin-bottom:10px; color:var(--ink); }
.msgbank .m-p{ font-size:16px; line-height:1.55; color:var(--ink-80); margin:0; }
.msgbank .m-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.msgbank .m-actions span{
  font-size:13px; padding:7px 14px; border-radius:100px; border:1px solid var(--line-strong); color:var(--ink-62);
}
.msgbank .m-actions span:first-child{ background:var(--ink); color:#fff; border-color:var(--ink); }
.msgbank .m-why{
  font-family:var(--f-mono); font-size:13px; line-height:1.6; color:var(--ink-62);
  padding:14px 20px; border-top:1px solid var(--line); background:var(--bg-soft);
}
@media (max-width:760px){ .msgbank{ grid-template-columns:1fr; } }

/* banned-words list */
.banned{ display:flex; flex-wrap:wrap; gap:9px; margin:var(--s2) 0 var(--s3); }
.banned span{
  font-family:var(--f-mono); font-size:13px; padding:7px 14px; border-radius:100px;
  background:var(--bg-soft); color:var(--ink-62); text-decoration:line-through;
  text-decoration-color:#B4441F; text-decoration-thickness:1.5px;
}


/* ============================================================
   BREAKOUT — must stay LAST in this file.
   .cs-body is itself the centred .wrap element capped at 670px, so a child
   that sets margin-left:50% + translateX(-50%) centres on the viewport, and
   min() keeps it scaling down with no horizontal overflow.
   Anything declared after this that uses a `margin` or `width` shorthand on
   these selectors will silently break the centring — keep it here.
   ============================================================ */
.breakout, .breakout-wide,
.cs-figure.wide, .cs-gallery.wide,
.msgbank, .bank, .flow, .sample{
  margin-left:50%;
  transform:translateX(-50%);
  max-width:none;
}
.breakout-wide, .cs-figure.wide, .cs-gallery.wide{ width:min(1084px, calc(100vw - 56px)); }
.breakout, .msgbank, .bank, .flow, .sample{ width:min(920px, calc(100vw - 56px)); }

.cs-figure.wide img{ width:100%; height:auto; }
.cs-figure.wide figcaption{ max-width:820px; }

/* transform doesn't collapse margins, so restate vertical rhythm here */
.msgbank, .bank, .flow, .sample{ margin-top:var(--s3); margin-bottom:var(--s4); }
.cs-figure.wide, .cs-gallery.wide{ margin-top:var(--s4); margin-bottom:var(--s5); }