/* =========================================================
   iliasgoranitis.com
   Editorial system: warm paper, one deep accent, serif voice.
   Typography carries the authority. No stock sector imagery.
   ========================================================= */

:root{
  /* Paper & ink */
  --paper:      #FFFFFF;
  --paper-2:    #F3F0E6;
  --paper-3:    #E9E4D4;
  --ink:        #141E2C;
  --ink-2:      #4A5464;
  --ink-3:      #5A6472;
  --ink-4:      #7A8494;

  /* One accent: brass */
  --accent:     #C9A53F;   /* fills, rules, and text on dark grounds */
  --accent-2:   #A3801F;   /* hover on dark grounds */
  --accent-ink: #7D6111;   /* accent TEXT on light grounds (AA contrast) */
  --accent-wash:#FAF6E9;

  /* Dark bands */
  --dark:       #0E1C30;
  --dark-2:     #182838;
  --dark-3:     #080E16;
  --dark-ink:   #FFFFFF;
  --dark-ink-2: #A8A8A8;

  --rule:       #E1DDD0;
  --rule-soft:  rgba(20,30,44,.09);

  --serif: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --sans:  "Poppins", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 1220px;
  --measure: 34rem;

  --sect-y: clamp(4.5rem, 9vw, 8.5rem);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.72;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* ---------- Layout primitives ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ width:100%; max-width:44rem; margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sect-y); position:relative; }
.section--tight{ padding-block:clamp(3rem,6vw,5rem); }
.band-2{ background:var(--paper-2); }
.band-3{ background:var(--paper-3); }
.band-dark{ background:var(--dark); color:var(--dark-ink); }
.band-dark h2,.band-dark h3{ color:var(--dark-ink); }

.rule{ height:1px; background:var(--rule); border:0; margin:0; }

/* ---------- Type scale ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.16;
  margin:0;
  color:var(--ink);
  text-wrap:balance;
}
.display{ font-size:clamp(2.3rem, 4.6vw, 3.5rem); line-height:1.16; letter-spacing:-.018em; }
h1{ font-size:clamp(2.2rem, 4.4vw, 3.2rem); line-height:1.18; letter-spacing:-.016em; }
h2{ font-size:clamp(1.6rem, 2.8vw, 2.1rem); letter-spacing:-.014em; }
h3{ font-size:clamp(1.15rem, 1.6vw, 1.35rem); letter-spacing:-.008em; font-weight:700; }
h4{ font-size:1.05rem; letter-spacing:-.004em; font-weight:700; }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
.lede{
  font-family:var(--serif);
  font-size:clamp(1.12rem,1.7vw,1.32rem);
  line-height:1.6;
  color:var(--ink-2);
  font-weight:300;
  letter-spacing:-.004em;
}
.body-lg{ font-size:1.075rem; line-height:1.68; color:var(--ink-2); }
.muted{ color:var(--ink-3); }
.measure{ max-width:var(--measure); }
.measure-wide{ max-width:44rem; }
em,i{ font-style:italic; }

/* Eyebrow / section label */
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--accent-ink);
  display:flex; align-items:center; gap:.85rem;
  margin:0 0 1.6rem;
}

.band-dark .eyebrow{ color:var(--accent); }

/* ---------- Links ---------- */
.link{
  color:var(--accent-ink);
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  padding-bottom:1px;
  transition:background-size .3s var(--ease), color .2s;
}
.link:hover{ background-size:0% 1px; color:var(--accent-ink); }

.arrow-link{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-ink); text-decoration:none;
  padding-bottom:.35rem;
  border-bottom:1px solid rgba(201,165,63,.28);
  transition:border-color .25s, gap .25s var(--ease), color .2s;
}
.arrow-link svg{ width:.85em; height:.85em; transition:transform .25s var(--ease); }
.arrow-link:hover{ border-color:var(--accent); gap:.85rem; }
.arrow-link:hover svg{ transform:translateX(3px); }
.band-dark .arrow-link{ color:var(--accent); border-bottom-color:rgba(201,165,63,.35); }
.band-dark .arrow-link:hover{ border-bottom-color:var(--accent); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  letter-spacing:.04em;
  padding:.95rem 1.65rem;
  text-decoration:none;
  border:2px solid var(--accent);
  background:var(--accent); color:var(--ink);
  transition:background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.btn:hover{ background:var(--accent-2); border-color:var(--accent-2); color:var(--ink); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--accent-ink); }
.btn--ghost:hover{ background:var(--accent); color:var(--ink); }
.btn--dark{ background:transparent; color:var(--accent); border-color:var(--accent); }
.btn--dark:hover{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.4rem; }

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--rule);
  transition:border-color .3s, background .3s;
}
.site-header.is-stuck{ border-bottom-color:var(--rule); }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; min-height:5.25rem;
}
.wordmark{
  display:block; text-decoration:none; line-height:.93;
  font-family:var(--sans); font-weight:800;
  font-size:1.05rem; letter-spacing:.01em; text-transform:uppercase;
  flex:none;
}
.wordmark span{ display:block; }
.wordmark .wm-1{ color:var(--ink); }
.wordmark .wm-2{ color:var(--accent); }

.nav-links{
  display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.1rem);
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none;
  font-size:.87rem; font-weight:600; letter-spacing:.005em;
  color:var(--ink-3);
  padding:.4rem 0;
  position:relative;
  white-space:nowrap;
  transition:color .2s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--accent); transition:right .3s var(--ease);
}
.nav-links a:hover{ color:var(--accent-ink); }
.nav-links a:hover::after{ right:0; }
.nav-links a.is-current{ color:var(--accent-ink); font-weight:700; }
.nav-links a.is-current::after{ right:0; }
.nav-links .nav-cta a{
  border:2px solid var(--accent); color:var(--accent-ink);
  padding:.58rem 1.05rem; font-weight:600; font-size:.8rem;
  letter-spacing:.02em;
  transition:background .25s,color .25s;
}
.nav-links .nav-cta a::after{ display:none; }
.nav-links .nav-cta a:hover{ background:var(--accent); color:var(--ink); }

.nav-toggle{
  display:none; background:none; border:0; cursor:pointer;
  padding:.6rem; margin-right:-.6rem; color:var(--ink);
}
.nav-toggle svg{ width:26px; height:26px; }
.nav-toggle .icon-close{ display:none; }
body.nav-open .nav-toggle .icon-close{ display:block; }
body.nav-open .nav-toggle .icon-open{ display:none; }

@media (max-width: 940px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed; inset:5.25rem 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper);
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
    padding:1rem var(--gutter) 2.4rem;
    max-height:calc(100dvh - 5.25rem); overflow-y:auto;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s, transform .25s var(--ease);
  }
  body.nav-open .nav-links{ opacity:1; transform:none; pointer-events:auto; }
  .nav-links li{ width:100%; border-bottom:1px solid var(--rule-soft); }
  .nav-links a{ display:block; padding:1.05rem 0; font-size:1.05rem; }
  .nav-links .nav-cta{ border:0; margin-top:1.6rem; }
  .nav-links .nav-cta a{ display:inline-block; }
}

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(3.5rem,7vw,7rem) clamp(4rem,8vw,7.5rem); position:relative; overflow:hidden; }
.hero::after{
  content:""; position:absolute; right:-14vw; top:-18vw;
  width:44vw; height:44vw; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(201,165,63,.05), transparent 68%);
  pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns:1.22fr .78fr;
  gap:clamp(2.5rem,5vw,5rem); align-items:center;
  position:relative; z-index:1;
}
.hero-name{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 1.9rem;
}
.hero-title{ margin-bottom:1.6rem; }
.hero-title .line{ display:block; }
.hero-title .accent{ color:var(--accent); }
.hero-sub{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(1.02rem,1.4vw,1.15rem); line-height:1.65;
  color:var(--ink-2); max-width:32rem;
}
.hero-meta{
  margin-top:2.4rem; padding-top:1.7rem; border-top:1px solid var(--rule);
  display:grid; gap:.45rem;
  font-size:.9rem; color:var(--ink-3); max-width:30rem;
}
.hero-meta strong{ color:var(--ink); font-weight:600; }

/* Portrait */
.portrait{ position:relative; }
.portrait::before{
  content:""; position:absolute; inset:auto -1.1rem -1.1rem auto;
  width:62%; height:58%; border:1px solid var(--accent); opacity:.4; z-index:0;
}
.portrait img{
  position:relative; z-index:1; width:100%;
  aspect-ratio:4/5; object-fit:cover; object-position:center 18%;
  filter:saturate(.94) contrast(1.02);
}
.portrait figcaption{
  margin-top:1rem; font-size:.76rem; letter-spacing:.05em;
  color:var(--ink-4); position:relative; z-index:1;
}
/* Graceful fallback when a photo file is not present yet */
.portrait.no-image img{ display:none; }
.portrait.no-image::after{
  content:attr(data-fallback);
  position:relative; z-index:1;
  display:flex; align-items:flex-end; padding:1.6rem;
  aspect-ratio:4/5;
  background:
    linear-gradient(150deg, var(--paper-3), var(--paper-2) 55%, var(--accent-wash));
  border:1px solid var(--rule);
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4);
}
.portrait--wide img{ aspect-ratio:16/9; object-position:center 30%; }
.portrait--wide.no-image::after{ aspect-ratio:16/9; }
.portrait--square img{ aspect-ratio:1/1; }
.portrait--square.no-image::after{ aspect-ratio:1/1; }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .portrait{ max-width:26rem; }
}

/* ---------- Stat strip ---------- */
/* Figure centred on top, a rule beneath it, then the caption. Same shape as
   the keynote cards. Column dividers sit centred in the gap, not hard against
   the next column's text. */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule); }
.stat{
  padding:2.4rem clamp(1rem,2vw,1.8rem);
  border-right:1px solid var(--rule-soft);
  text-align:center;
}
.stat:first-child{ padding-left:0; }
.stat:last-child{ padding-right:0; border-right:0; }
.stat-n{
  font-family:var(--serif); font-weight:800; font-size:clamp(1.9rem,2.9vw,2.35rem);
  line-height:1.1; color:var(--ink); letter-spacing:-.02em;
  display:block; padding-bottom:.85rem; margin-bottom:.9rem;
  border-bottom:1px solid var(--rule);
}
.stat-l{
  margin:0; font-size:.83rem; line-height:1.5; color:var(--ink-3);
  max-width:15rem; margin-inline:auto;
}
.stat-n .plus{ color:var(--accent-ink); }

/* Five-up variant: the landing row carries four figures plus one distinction.
   The number is shorter than the label here, so the tiles stay readable at
   five across; below the breakpoint the odd fifth spans the full row. */
.stats--5{ grid-template-columns:repeat(5,1fr); }
.stats--5 .stat{ padding-inline:clamp(.7rem,1.5vw,1.3rem); }
.stats--5 .stat-l{ max-width:13rem; }
.band-dark .stat-n{ color:var(--dark-ink); border-bottom-color:rgba(255,255,255,.28); }
.band-dark .stat-n .plus{ color:var(--accent); }
.band-dark .stat-l{ color:var(--dark-ink-2); }
.band-dark .stats{ border-top-color:rgba(255,255,255,.16); }
.band-dark .stat{ border-right-color:rgba(255,255,255,.12); }
@media (max-width:820px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat{ border-right:0; border-bottom:1px solid var(--rule-soft); padding-inline:clamp(1rem,3vw,1.6rem); }
  .stat:nth-child(odd){ border-right:1px solid var(--rule-soft); }
  .stat:first-child, .stat:last-child{ padding-inline:clamp(1rem,3vw,1.6rem); }
  .stats--5{ grid-template-columns:repeat(2,1fr); }
  .stats--5 .stat:last-child{ grid-column:1 / -1; border-right:0; border-bottom:0; }
  /* spanning the full row would stretch the rule above the label, so hold the
     divider to the width the other tiles use. */
  .stats--5 .stat:last-child .stat-n{ max-width:20rem; margin-inline:auto; }
}
@media (max-width:460px){
  .stats{ grid-template-columns:1fr; }
  .stat:nth-child(odd){ border-right:0; }
  .stat:last-child{ border-bottom:0; }
}

/* ---------- Section head ---------- */
.sect-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:end;
  margin-bottom:clamp(2.8rem,5vw,4.2rem);
}
.sect-head--single{ grid-template-columns:1fr; }
.sect-head--single > *{ max-width:46rem; }
.sect-head:last-child{ margin-bottom:0; }
@media (max-width:860px){ .sect-head{ grid-template-columns:1fr; align-items:start; } }

/* ---------- Territory / numbered cards ---------- */
.terr-list{ display:grid; gap:0; border-top:1px solid var(--rule); }
.terr{
  display:grid; grid-template-columns:4rem minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(1.2rem,3vw,3rem);
  padding-block:clamp(2rem,3.6vw,3rem);
  border-bottom:1px solid var(--rule);
  align-items:start;
  position:relative;
  transition:background .3s;
}
.terr:hover{ background:rgba(201,165,63,.028); }
.terr-n{
  font-family:var(--serif); font-size:1rem; color:var(--accent-ink);
  letter-spacing:.04em; padding-top:.35rem;
}
.terr-q{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.05rem,1.5vw,1.22rem); line-height:1.45;
  color:var(--ink-2); margin-top:.9rem;
}
.terr-body p{ font-size:.98rem; color:var(--ink-2); }
.terr-tags{
  list-style:none; margin:1.3rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.terr-tags li{
  font-size:.72rem; letter-spacing:.05em; color:var(--ink-3);
  border:1px solid var(--rule); padding:.34rem .7rem;
}
@media (max-width:860px){
  .terr{ grid-template-columns:2.6rem minmax(0,1fr); }
  .terr-body{ grid-column:2; }
}

/* ---------- Generic card grid ---------- */
.grid{ display:grid; gap:clamp(1.6rem,3vw,2.4rem); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:980px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  border-top:2px solid var(--ink);
  padding-top:1.5rem;
  display:flex; flex-direction:column;
}
.card--accent{ border-top-color:var(--accent); }
.card h3{ margin-bottom:.75rem; }
.card p{ font-size:.96rem; color:var(--ink-2); }
.card .arrow-link{ margin-top:auto; padding-top:1.5rem; align-self:flex-start; }
.band-dark .card{ border-top-color:var(--accent); }
.band-dark .card h3{ color:var(--accent); }
.band-dark .card p{ color:var(--dark-ink-2); }

/* ---------- Pull quote ---------- */
.pullquote{
  border-left:2px solid var(--accent);
  padding-left:clamp(1.4rem,3vw,2.4rem);
}
.pullquote blockquote{
  margin:0;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.5;
  letter-spacing:-.008em; color:var(--ink);
}
.pullquote cite{
  display:block; margin-top:1.4rem; font-style:normal;
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink);
}
.band-dark .pullquote blockquote{ color:var(--dark-ink); }
.band-dark .pullquote{ border-left-color:var(--accent); }
.band-dark .pullquote cite{ color:var(--accent); }

/* ---------- Impact ledger ---------- */
.ledger{ border-top:1px solid var(--rule); }
.ledger-row{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);
  gap:clamp(1.5rem,4vw,4rem);
  padding-block:clamp(2rem,3.4vw,2.9rem);
  border-bottom:1px solid var(--rule);
}
.ledger-row h3{ position:sticky; top:7rem; }
.ledger-list{ list-style:none; margin:0; padding:0; display:grid; gap:1.5rem; }
.ledger-list li{ position:relative; padding-left:1.5rem; }
.ledger-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.45rem; height:1px; background:var(--accent);
}
.ledger-list strong{ font-weight:600; color:var(--ink); }
.ledger-list p{ font-size:.97rem; color:var(--ink-2); margin:0; }
.ledger-list .note{ display:block; margin-top:.4rem; font-size:.85rem; color:var(--ink-3); }
@media (max-width:860px){
  .ledger-row{ grid-template-columns:1fr; }
  .ledger-row h3{ position:static; }
}

/* ---------- Publication list ---------- */
.pubs{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.pubs li{
  display:grid; grid-template-columns:7.5rem minmax(0,1fr);
  gap:clamp(1rem,3vw,2.5rem);
  padding-block:1.7rem;
  border-bottom:1px solid var(--rule-soft);
}
.pub-venue{
  font-family:var(--sans); font-size:.74rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent-ink);
  padding-top:.28rem; line-height:1.5;
}
.pub-title{
  font-family:var(--serif); font-size:1.12rem; line-height:1.38;
  letter-spacing:-.012em; color:var(--ink); margin:0 0 .5rem;
}
.pub-why{ font-size:.9rem; color:var(--ink-3); margin:0; }
@media (max-width:640px){ .pubs li{ grid-template-columns:1fr; gap:.5rem; } }

/* ---------- Simple listing (talks, awards) ---------- */
.listing{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.listing li{
  display:grid; grid-template-columns:5.5rem minmax(0,1fr);
  gap:clamp(1rem,3vw,2.5rem);
  padding-block:1.35rem; border-bottom:1px solid var(--rule-soft);
  align-items:baseline;
}
.listing .yr{
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.08em; color:var(--accent-ink);
}
.listing .what{ font-size:.99rem; color:var(--ink); }
.listing .where{ display:block; margin-top:.25rem; font-size:.86rem; color:var(--ink-3); }
@media (max-width:560px){ .listing li{ grid-template-columns:1fr; gap:.3rem; } }

/* ---------- Exploring ---------- */
.exploring{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.6rem,3vw,2.6rem);
}
.exploring-item{ border-top:1px solid rgba(255,255,255,.3); padding-top:1.4rem; }
.exploring-item h4{ color:var(--dark-ink); margin-bottom:.6rem; font-size:1.18rem; }
.exploring-item p{ font-size:.94rem; color:var(--dark-ink-2); margin:0; }
@media (max-width:760px){ .exploring{ grid-template-columns:1fr; } }

/* ---------- Article ---------- */
.article-head{ padding-block:clamp(3rem,6vw,5.5rem) clamp(2rem,4vw,3rem); }
.article-head .lede{ max-width:36rem; }
.article-meta{
  display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center;
  font-size:.78rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; margin-bottom:1.8rem;
}
.article-meta .tag{ color:var(--accent-ink); font-weight:600; }
.prose{ max-width:36rem; font-size:1.09rem; line-height:1.75; color:var(--ink-2); }
.prose h2{ font-size:clamp(1.5rem,2.4vw,1.95rem); margin:2.8rem 0 1rem; color:var(--ink); }
.prose p{ margin:0 0 1.4em; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose blockquote{
  margin:2.2rem 0; padding-left:1.6rem; border-left:2px solid var(--accent);
  font-family:var(--serif); font-weight:500;
  font-size:1.18rem; line-height:1.55; color:var(--ink);
}
.prose hr{ border:0; height:1px; background:var(--rule); margin:2.8rem 0; }
.prose ul{ margin:0 0 1.4em; padding-left:1.2rem; }
.prose li{ margin-bottom:.55em; }

.idea-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.idea-list li{ border-bottom:1px solid var(--rule); }
.idea-list a{
  display:grid; grid-template-columns:8rem minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2.5rem); align-items:start;
  padding-block:clamp(1.8rem,3vw,2.6rem);
  text-decoration:none; transition:background .3s;
}
.idea-list a:hover{ background:rgba(201,165,63,.028); }
.idea-date{
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-ink); padding-top:.4rem;
}
.idea-title{
  font-family:var(--serif); font-size:clamp(1.4rem,2.3vw,1.85rem);
  line-height:1.24; letter-spacing:-.02em; color:var(--ink); margin:0 0 .7rem;
}
.idea-list a:hover .idea-title{ color:var(--accent); }
.idea-ex{ font-size:.97rem; color:var(--ink-3); margin:0; max-width:38rem; }
.idea-arrow{ color:var(--accent); padding-top:.6rem; transition:transform .25s var(--ease); }
.idea-list a:hover .idea-arrow{ transform:translateX(4px); }
@media (max-width:760px){
  .idea-list a{ grid-template-columns:1fr; }
  .idea-arrow{ display:none; }
}

/* ---------- Pathways (Work With Me) ---------- */
.pathway{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);
  gap:clamp(1.5rem,4vw,4rem);
  padding-block:clamp(2.2rem,4vw,3.4rem);
  border-bottom:1px solid var(--rule);
}
.pathway:first-of-type{ border-top:1px solid var(--rule); }
.pathway-n{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink);
  margin-bottom:.9rem;
}
.pathway h3{ margin-bottom:.2rem; }
.pathway ul{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.7rem; }
.pathway ul li{ position:relative; padding-left:1.4rem; font-size:.96rem; color:var(--ink-2); }
.pathway ul li::before{
  content:""; position:absolute; left:0; top:.62em; width:.45rem; height:1px; background:var(--accent);
}
@media (max-width:820px){ .pathway{ grid-template-columns:1fr; } }

/* ---------- Venture ---------- */
.venture{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
  padding-block:clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--rule);
}
.venture:first-of-type{ border-top:1px solid var(--rule); }
.venture--flip .venture-media{ order:-1; }
.venture h3{ margin-bottom:1.1rem; }
.venture-media{
  aspect-ratio:5/4;
  background:linear-gradient(145deg,var(--paper-3),var(--accent-wash));
  border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center;
  padding:2rem;
}
.venture-media span{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.2rem,2.2vw,1.7rem); line-height:1.35;
  color:var(--accent); text-align:center; letter-spacing:-.015em;
}
/* One venture shows the built thing rather than a pull-quote. The panel keeps
   its tint and 5:4 frame so the three ventures stay in rhythm, and the
   screenshot sits on it as a framed inset. */
.venture-media--shot{ padding:clamp(1.2rem,2.4vw,2rem); }
.venture-media--shot a{
  display:block; width:100%; border:1px solid var(--rule);
  box-shadow:0 10px 30px rgba(14,28,48,.14);
  transition:transform .25s ease, box-shadow .25s ease;
}
.venture-media--shot img{ width:100%; height:auto; display:block; }
.venture-media--shot a:hover{
  transform:translateY(-3px); box-shadow:0 16px 40px rgba(14,28,48,.2);
}
@media (prefers-reduced-motion:reduce){
  .venture-media--shot a{ transition:none; }
  .venture-media--shot a:hover{ transform:none; }
}

.venture-status{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:1rem;
}
.venture-status::before{
  content:""; width:.4rem; height:.4rem; border-radius:50%; background:var(--accent);
}
@media (max-width:820px){
  .venture{ grid-template-columns:1fr; }
  .venture--flip .venture-media{ order:0; }
}

/* ---------- CTA band ---------- */
.cta-band{ background:var(--dark); color:var(--dark-ink); padding-block:clamp(4rem,8vw,7rem); }
.cta-grid{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.cta-grid h2{ color:var(--dark-ink); }
.cta-grid p{ color:var(--dark-ink-2); }
@media (max-width:820px){ .cta-grid{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
.site-footer{ background:var(--dark-3); color:var(--dark-ink-2); padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.footer-top{
  display:grid; grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,3rem);
  padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-brand .wordmark .wm-1{ color:var(--dark-ink); }
.footer-brand .wordmark .wm-2{ color:var(--accent); }
.footer-brand p{
  margin-top:1.3rem; font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:1.05rem; line-height:1.45; color:var(--dark-ink-2); max-width:19rem;
}
.footer-col h5{
  margin:0 0 1.1rem; font-family:var(--sans);
  font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent);
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.62rem; }
.footer-col a{
  text-decoration:none; font-size:.9rem; color:var(--dark-ink-2); transition:color .2s;
}
.footer-col a:hover{ color:var(--dark-ink); }
.footer-bot{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  padding-top:1.8rem; font-size:.78rem; color:#8A93A0;
}
@media (max-width:860px){ .footer-top{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }

/* ---------- Page hero (interior) ---------- */
.page-hero{ padding-block:clamp(3rem,6vw,5.5rem) clamp(2.5rem,5vw,4rem); }
.page-hero .lede{ margin-top:1.6rem; max-width:40rem; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Utilities ---------- */
.skip{
  position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff;
  padding:.8rem 1.2rem; z-index:200; text-decoration:none; font-size:.85rem;
}
.skip:focus{ left:.5rem; top:.5rem; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.mt-lg{ margin-top:clamp(2.5rem,5vw,4rem); }
.mt-md{ margin-top:2rem; }
.center{ text-align:center; }
.note-box{
  border:1px solid var(--rule); background:var(--paper-2);
  padding:1.6rem 1.8rem; font-size:.92rem; color:var(--ink-2);
}
.note-box h5{
  margin:0 0 .6rem; font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--accent-ink);
}

/* =========================================================
   CONVERSION LAYER
   Added after the credibility layer: proof, audience routing,
   named offers, enquiry, speaker kit, capability statement.
   ========================================================= */

/* ---------- Typographic institutional proof row ---------- */
.proof{ padding-block:clamp(2.2rem,4vw,3.2rem); border-block:1px solid var(--rule); }
.proof-label{
  font-size:.68rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-4); margin:0 0 1.4rem;
}
.proof-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.7rem clamp(1.6rem,3.2vw,3rem);
}
.proof-list li{
  font-family:var(--serif); font-size:clamp(1rem,1.55vw,1.28rem);
  letter-spacing:-.012em; color:var(--ink-2); white-space:nowrap;
  display:flex; align-items:baseline;
}
.band-dark .proof{ border-color:rgba(255,255,255,.16); }
.band-dark .proof-list li{ color:var(--dark-ink); }
.band-dark .proof-label{ color:#8A93A0; }

/* ---------- Audience routing ---------- */
.aud-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid var(--rule); }
/* Align the label / heading / question rule / points / link rows across all
   three columns, whatever their content length. */
@supports (grid-template-rows: subgrid){
  @media (min-width:901px){
    .aud-grid{ grid-template-rows:auto auto auto 1fr auto; }
    .aud-grid .aud-col{ display:grid; grid-row:span 5; grid-template-rows:subgrid; }
    .aud-grid .aud-col .arrow-link{ margin-top:0; align-self:end; }
  }
}
.aud-col{
  padding:2.2rem clamp(1.2rem,2.4vw,2.2rem) 2.2rem 0;
  border-right:1px solid var(--rule-soft);
  display:flex; flex-direction:column;
}
.aud-col:last-child{ border-right:0; }
.aud-col + .aud-col{ padding-left:clamp(1.2rem,2.4vw,2.2rem); }
.aud-who{
  font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 .9rem;
}
.aud-col h3{ font-size:clamp(1.2rem,1.7vw,1.45rem); margin-bottom:1.2rem; }
.aud-q{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:1.02rem; line-height:1.45; color:var(--ink-3);
  margin:0 0 1.4rem;
}
/* Rule sits on the points block, not the question, so it lines up across
   columns whatever the question length. */
.aud-points{
  list-style:none; margin:0 0 1.8rem; padding:1.4rem 0 0; display:grid; gap:.95rem;
  border-top:1px solid var(--rule-soft);
}
.aud-points li{ position:relative; padding-left:1.35rem; font-size:.93rem; color:var(--ink-2); line-height:1.55; }
.aud-points li::before{
  content:""; position:absolute; left:0; top:.62em; width:.42rem; height:1px; background:var(--accent);
}
.aud-col .arrow-link{ margin-top:auto; align-self:flex-start; }
@media (max-width:900px){
  .aud-grid{ grid-template-columns:1fr; }
  .aud-col{ border-right:0; border-bottom:1px solid var(--rule); padding-right:0; }
  .aud-col + .aud-col{ padding-left:0; }
  .aud-col:last-child{ border-bottom:0; }
}

/* ---------- Named offers ---------- */
.offer{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);
  gap:clamp(1.5rem,4vw,4rem);
  padding-block:clamp(2.2rem,4vw,3.2rem);
  border-bottom:1px solid var(--rule);
}
.offer:first-of-type{ border-top:1px solid var(--rule); }
.offer-n{
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 .9rem;
}
.offer h3{ margin-bottom:.9rem; }
.offer-for{ font-size:.93rem; color:var(--ink-3); margin:0; }
.offer-spec{
  list-style:none; margin:1.6rem 0 0; padding:1.4rem 0 0;
  border-top:1px solid var(--rule-soft);
  display:grid; gap:.9rem;
}
.offer-spec li{ display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:1rem; align-items:baseline; }
.offer-spec dt, .offer-spec .k{
  font-size:.68rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-4);
}
.offer-spec .v{ font-size:.95rem; color:var(--ink); }
.offer-body p{ font-size:1rem; color:var(--ink-2); }
@media (max-width:820px){
  .offer{ grid-template-columns:1fr; }
  .offer-spec li{ grid-template-columns:1fr; gap:.15rem; }
}

/* ---------- Testimonials ---------- */
.quote-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.6rem,3vw,2.6rem); }
.testimonial{ border-top:2px solid var(--accent); padding-top:1.5rem; }
.testimonial blockquote{
  margin:0 0 1.3rem; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.02rem,1.3vw,1.14rem); line-height:1.55; letter-spacing:-.004em; color:var(--ink);
}
.testimonial .who{ font-size:.85rem; font-weight:600; color:var(--ink); display:block; }
.testimonial .role{ font-size:.82rem; color:var(--ink-3); display:block; margin-top:.2rem; }
.testimonial--empty{ border-top-color:var(--rule); }
.testimonial--empty blockquote{ color:var(--ink-4); font-style:normal; font-size:.95rem; line-height:1.6; }
.band-dark .testimonial blockquote{ color:var(--dark-ink); }
.band-dark .testimonial .who{ color:var(--dark-ink); }
.band-dark .testimonial .role{ color:var(--dark-ink-2); }
@media (max-width:880px){ .quote-grid{ grid-template-columns:1fr; } }

/* ---------- Photo strip ---------- */
.photo-strip{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.8rem,1.6vw,1.4rem); }
.shot{ position:relative; margin:0; }
.shot img{ width:100%; aspect-ratio:3/2; object-fit:cover; filter:saturate(.94) contrast(1.02); }
.shot figcaption{ margin-top:.8rem; font-size:.76rem; color:var(--ink-3); line-height:1.45; }
.shot.no-image img{ display:none; }
.shot.no-image::after{
  content:attr(data-fallback);
  display:flex; align-items:flex-end; padding:1.1rem; aspect-ratio:3/2;
  background:linear-gradient(150deg,var(--paper-3),var(--accent-wash));
  border:1px solid var(--rule);
  font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4);
}
.band-dark .shot figcaption{ color:var(--dark-ink-2); }
.band-dark .shot.no-image::after{
  background:linear-gradient(150deg,var(--dark-2),#1F3145); border-color:rgba(255,255,255,.18); color:#8A93A0;
}
@media (max-width:760px){ .photo-strip{ grid-template-columns:1fr; } }

/* Video slot */
.video-slot{
  aspect-ratio:16/9; width:100%;
  background:linear-gradient(150deg,var(--paper-3),var(--accent-wash));
  border:1px solid var(--rule);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  text-align:center; padding:2rem;
}
.video-slot .play{
  width:3.4rem; height:3.4rem; border-radius:50%; border:1px solid var(--accent);
  display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.video-slot p{ margin:0; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); font-weight:600; }

/* ---------- Speaker kit ---------- */
.kit-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.6rem,3vw,2.6rem); }
@media (max-width:760px){ .kit-grid{ grid-template-columns:1fr; } }
.kit-block{ border-top:1px solid var(--rule); padding-top:1.4rem; }
.kit-block h4{ margin-bottom:.8rem; }
.kit-block p{ font-size:.95rem; color:var(--ink-2); }
.bio-len{
  font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink); display:block; margin-bottom:.6rem;
}
.talk-list{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; }
.talk-list li{ position:relative; padding-left:1.4rem; }
.talk-list li::before{ content:""; position:absolute; left:0; top:.62em; width:.45rem; height:1px; background:var(--accent); }
.talk-list .t{ font-family:var(--serif); font-size:1.08rem; line-height:1.35; color:var(--ink); display:block; }
.talk-list .d{ font-size:.86rem; color:var(--ink-3); display:block; margin-top:.3rem; }

/* ---------- Capability statement (print one-pager) ---------- */
.cap{ max-width:52rem; margin-inline:auto; padding:clamp(2rem,5vw,3.5rem) var(--gutter) 4rem; }
.cap-head{ border-bottom:2px solid var(--ink); padding-bottom:1.6rem; margin-bottom:2rem; }
.cap-head h1{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:.5rem; }
.cap-head .tag{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:1.15rem; color:var(--accent-ink); }
.cap-head .roles{ margin-top:1rem; font-size:.9rem; color:var(--ink-3); line-height:1.6; }
.cap-sect{ margin-bottom:2.2rem; }
.cap-sect h2{
  font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:1rem;
}
.cap-sect ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.cap-sect li{ position:relative; padding-left:1.3rem; font-size:.94rem; line-height:1.55; color:var(--ink-2); }
.cap-sect li::before{ content:""; position:absolute; left:0; top:.62em; width:.42rem; height:1px; background:var(--accent); }
.cap-sect li strong{ color:var(--ink); font-weight:600; }
.cap-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; }
@media (max-width:640px){ .cap-cols{ grid-template-columns:1fr; } }
.cap-foot{ border-top:1px solid var(--rule); padding-top:1.4rem; font-size:.86rem; color:var(--ink-3); }
.print-bar{
  background:var(--paper-2); border-bottom:1px solid var(--rule);
  padding:1rem var(--gutter); display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:center; font-size:.85rem; color:var(--ink-3);
}
@media print{
  .site-header,.site-footer,.print-bar,.skip{ display:none !important; }
  body{ background:#fff; font-size:9pt; line-height:1.4; }
  .cap{ padding:0; max-width:none; }
  .cap-head{ padding-bottom:8pt; margin-bottom:12pt; }
  .cap-head h1{ font-size:20pt; margin-bottom:2pt; }
  .cap-head .tag{ font-size:10pt; }
  .cap-head .roles{ margin-top:6pt; font-size:8.2pt; line-height:1.45; }
  .cap-sect{ break-inside:avoid; margin-bottom:11pt; }
  .cap-sect h2{ font-size:7.2pt; margin-bottom:5pt; letter-spacing:.14em; }
  .cap-sect ul{ gap:4pt; }
  .cap-sect li{ font-size:8.6pt; line-height:1.42; padding-left:9pt; }
  .cap-sect .body-lg{ font-size:9pt !important; line-height:1.45; }
  .cap-cols{ gap:14pt; }
  .cap-foot{ padding-top:8pt; font-size:7.8pt; line-height:1.45; }
  .reveal{ opacity:1 !important; transform:none !important; }
  a{ text-decoration:none; color:inherit; }
}

/* =========================================================
   HOMEPAGE COMPONENTS
   The alternating light/dark band rhythm is the structural
   signature. Flat, hairline-ruled, no radii, no shadows.
   ========================================================= */

/* ---------- Full-bleed hero ---------- */
.hero--split{ background:var(--dark); padding:0; overflow:hidden; }
.hero--split::after{ display:none; }
.hero-split{
  max-width:1440px; margin-inline:auto; padding:0;
  display:grid; grid-template-columns:1fr 1fr; min-height:640px;
}
.hero-figure{ position:relative; margin:0; min-height:340px; }
.hero-figure img{
  width:100%; height:100%; min-height:640px; object-fit:cover; object-position:center 18%;
}
.hero-figure::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to left, var(--dark) 0%, rgba(14,28,48,0) 26%);
}
.hero-copy{
  display:flex; flex-direction:column; justify-content:center; gap:1.5rem;
  padding:clamp(3rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem);
  position:relative; z-index:2;
}
.hero-mark{ font-size:2.6rem; line-height:0; height:1rem; color:var(--accent); font-weight:800; }
/* sized so the three lines break where they are written, rather than
   wrapping mid-phrase inside the panel */
.hero-copy h1{
  color:var(--dark-ink); max-width:36rem; margin:0;
  font-size:clamp(2rem,3.4vw,3.15rem); line-height:1.08;
}
.hero-copy h1 .accent{ color:var(--accent); }
.hero-byline{
  font-size:1rem; font-weight:700; color:var(--accent); margin:0; letter-spacing:.01em;
}
.hero-copy .hero-sub{ color:#C7C7C7; margin:0; }
/* the list runs to the panel's full inner width and sits a little tighter than
   the body copy, so each appointment holds one line instead of wrapping */
.hero-roles{ display:grid; gap:.45rem; margin:0; padding:0; list-style:none; max-width:38rem; }
.hero-roles li{ font-size:.87rem; line-height:1.55; color:var(--dark-ink-2); font-weight:300; }
.hero-copy .btn-row{ margin-top:.6rem; }
@media (max-width:900px){
  .hero-split{ grid-template-columns:1fr; min-height:0; }
  .hero-figure{ order:-1; }
  .hero-figure img{ min-height:0; aspect-ratio:4/3; }
  .hero-figure::after{ background:linear-gradient(to top, var(--dark) 0%, rgba(14,28,48,0) 40%); }
}

/* ---------- Three roles ---------- */
.roles-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(2rem,4vw,3rem); }
.role-block h3{ color:var(--accent-ink); font-size:clamp(1.3rem,2vw,1.6rem); font-weight:800; margin-bottom:.7rem; }
.role-block p{ font-size:.95rem; line-height:1.7; color:var(--ink-2); margin:0; }
@media (max-width:820px){ .roles-grid{ grid-template-columns:1fr; gap:2rem; } }

/* ---------- Work cards (image + rule + title) ---------- */
.grid-5{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(1.2rem,2vw,1.5rem); }
@media (max-width:1080px){ .grid-5{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .grid-5{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .grid-5{ grid-template-columns:1fr; } }

.wcard{ display:flex; flex-direction:column; gap:.75rem; margin:0; }
.wcard-yr{
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--dark-ink);
}
.wcard img{ width:100%; height:150px; object-fit:cover; }
.wcard h3{
  color:var(--accent); font-size:.98rem; font-weight:700; align-self:flex-start;
  border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:.5rem; margin:0;
}
.wcard p{ font-size:.85rem; line-height:1.6; color:var(--dark-ink-2); margin:0; font-weight:300; }
.wcard a{
  font-size:.78rem; font-weight:600; color:var(--accent); text-decoration:none;
  margin-top:auto; padding-top:.4rem;
}
.wcard a:hover{ color:var(--accent-2); text-decoration:underline; }
/* a card with more than one link groups them at the foot of the card */
.wcard-links{ margin-top:auto; padding-top:.4rem; display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; }
.wcard-links a{ margin-top:0; padding-top:0; }
.logo-tile{
  height:150px; background:var(--dark-2); border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:800; letter-spacing:.04em; color:var(--accent);
}

/* ---------- Centred impact callout ---------- */
.callout{ max-width:60rem; margin-inline:auto; text-align:center; }
.callout .mark{ font-size:3.6rem; line-height:0; height:1.6rem; color:var(--accent-ink); font-weight:800; display:block; }
.callout p{
  font-size:clamp(1.15rem,1.9vw,1.45rem); line-height:1.55; font-weight:500;
  color:var(--ink); margin:1.9rem 0 0;
}

/* ---------- Featured research (left brass rule on cream) ---------- */
.feature-list{ display:grid; gap:1.5rem; }
.feature{
  display:grid; grid-template-columns:17rem minmax(0,1fr);
  gap:clamp(1.6rem,3vw,2.8rem);
  align-items:start;
  padding:clamp(1.8rem,3vw,2.6rem) 0;
  border-bottom:1px solid var(--rule);
}
.feature:first-child{ border-top:1px solid var(--rule); }
/* the alternating tint marks each entry as a discrete record */
.feature:nth-child(odd){ background:var(--paper-2); }
.feature:nth-child(odd) .feature-thumb img{ background:var(--paper); }
.feature{ padding-inline:clamp(1.2rem,2.4vw,2rem); }
.feature:not(:has(.feature-thumb)){ grid-template-columns:minmax(0,1fr); }

.feature-thumb{ margin:0; }
/* all three sources are wide: a podcast banner (1.82:1), a video still (16:9)
   and a journal figure. 16:9 fits them without cropping anything meaningful. */
.feature-thumb img{
  width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center;
  display:block; background:var(--paper-2); border:1px solid var(--rule);
}
/* a journal figure is data, not a cover: show all of it rather than cropping */
.feature-thumb--fit img{ object-fit:contain; padding:.5rem; }
.feature-thumb.no-image img{ display:none; }
.feature-thumb.no-image::after{
  content:attr(data-fallback);
  display:flex; align-items:flex-end; padding:.9rem; aspect-ratio:16/9;
  background:var(--paper-2); border:1px solid var(--rule);
  font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  line-height:1.4; color:var(--ink-4);
}

.feature-body{ display:flex; flex-direction:column; align-items:flex-start; }
.feature h3{
  font-size:clamp(1.15rem,1.75vw,1.45rem); font-weight:700; line-height:1.25;
  margin:0 0 .75rem; letter-spacing:-.01em;
}
.feature h3 a{ color:var(--accent-ink); text-decoration:none; }
.feature h3 a:hover{ text-decoration:underline; }
/* the bar under the title, as on the reference layout */
.feature h3::after{
  content:""; display:block; width:min(22rem,60%); height:4px;
  background:var(--accent); margin-top:.75rem;
}
.feature-cite{
  font-size:.93rem; line-height:1.6; color:var(--ink-2); margin:0 0 1rem; max-width:52rem;
}
.feature-more{ margin:0 0 1.3rem; }
.feature-more summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:baseline; gap:.55rem;
  font-size:.95rem; font-weight:600; color:var(--ink);
}
.feature-more summary::-webkit-details-marker{ display:none; }
.feature-more summary::before{
  content:"+"; color:var(--accent-ink); font-weight:700; font-size:1.15em; line-height:1;
}
.feature-more[open] summary::before{ content:"\2212"; }
.feature-more summary:hover{ color:var(--accent-ink); }
.feature-more summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.feature-more p{
  margin:.9rem 0 0; font-size:.92rem; line-height:1.7; color:var(--ink-2); max-width:52rem;
}
.feature-btn{
  display:inline-flex; align-items:stretch; text-decoration:none;
  background:var(--accent); color:var(--ink);
  font-size:.88rem; font-weight:600;
  transition:background .2s;
}
.feature-btn span{ padding:.8rem 1.1rem; display:flex; align-items:center; }
.feature-btn .feature-btn-i{ border-left:1px solid rgba(20,30,44,.28); padding-inline:.85rem; }
.feature-btn:hover{ background:var(--accent-2); }
.feature-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

@media (max-width:720px){
  .feature{ grid-template-columns:1fr; }
  .feature-thumb img{ aspect-ratio:16/9; object-position:center; }
  .feature-thumb--fit img{ aspect-ratio:16/9; }
}

/* ---------- Currently exploring ---------- */
.exploring-band{ max-width:52rem; margin-inline:auto; text-align:center; }
.exploring-band .eyebrow{ justify-content:center; margin-bottom:1.1rem; }
.exploring-band p{
  font-size:clamp(1.2rem,2vw,1.55rem); line-height:1.5; font-weight:600; color:var(--ink); margin:0;
}
.exploring-band p.eyebrow{ font-size:.72rem; font-weight:700; }

/* ---------- Two-column offer band on dark ---------- */
.offer-pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,4vw,3rem); }
.offer-pair > div{
  border-top:2px solid var(--accent); padding-top:1.5rem;
  display:flex; flex-direction:column; gap:1rem; align-items:flex-start;
}
.offer-pair h3{
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  font-weight:700; color:var(--dark-ink); margin:0;
}
.offer-pair p{ font-size:.95rem; line-height:1.7; color:var(--dark-ink-2); margin:0; font-weight:300; }
@media (max-width:820px){ .offer-pair{ grid-template-columns:1fr; } }
.band-dark-2{ background:var(--dark-2); color:var(--dark-ink); }
.band-dark-2 h2,.band-dark-2 h3{ color:var(--dark-ink); }
.band-dark-2 .eyebrow{ color:var(--accent); }
.band-dark-2 p{ color:var(--dark-ink-2); }

/* Arrow glyphs inside buttons must not size themselves off the flex line */
.btn svg{ width:.95em; height:.95em; flex:none; }
.btn{ white-space:nowrap; }
@media (max-width:520px){ .btn{ white-space:normal; } }

/* =========================================================
   PUBLICATION LISTING (Work page)
   Typographic tiles, not journal covers: covers and first-page
   renders are publisher copyright, and 100+ mismatched images
   would fight the system. Same call as the institutional row.
   ========================================================= */

.pub-filter{
  display:flex; flex-wrap:wrap; gap:.6rem;
  padding-bottom:1.8rem; margin-bottom:.4rem;
  border-bottom:1px solid var(--rule);
}
.pub-chip{
  font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.005em;
  color:var(--ink-3); background:transparent; cursor:pointer;
  border:1px solid var(--rule); padding:.6rem 1rem; border-radius:0;
  display:inline-flex; align-items:baseline; gap:.5rem;
  transition:border-color .2s, color .2s, background .2s;
}
.pub-chip .n{ font-size:.72rem; font-weight:700; color:var(--ink-4); }
.pub-chip:hover{ border-color:var(--accent); color:var(--ink); }
.pub-chip.is-on{ border-color:var(--accent); background:var(--accent); color:var(--ink); }
.pub-chip.is-on .n{ color:var(--ink); opacity:.7; }
.pub-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.pub-list{ list-style:none; margin:0; padding:0; }
.pub-row{
  display:grid; grid-template-columns:4.4rem minmax(0,1fr);
  gap:clamp(1rem,2.2vw,1.6rem);
  padding-block:.9rem;
  border-bottom:1px solid var(--rule-soft);
  align-items:start;
}
.pub-row.is-hidden{ display:none; }

/* the tile: journal set in the site's own type, no borrowed artwork */
.pub-tile{
  aspect-ratio:1/1; background:var(--paper-2);
  border:1px solid var(--rule); border-top:2px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  padding:.3rem; text-align:center; overflow:hidden;
}
.pub-tile span{
  font-size:.66rem; font-weight:700; line-height:1.2; letter-spacing:-.005em;
  color:var(--ink-2); word-break:normal; overflow-wrap:normal; hyphens:none;
}
.pub-tile--sm span{ font-size:.5rem; line-height:1.2; letter-spacing:-.01em; }

.pub-meta{
  display:flex; flex-wrap:wrap; gap:.5rem .8rem; align-items:baseline;
  margin:0 0 .3rem;
}
.pub-yr{
  font-size:.72rem; font-weight:700; letter-spacing:.09em; color:var(--accent-ink);
}
.pub-jr{ font-size:.78rem; color:var(--ink-4); }
.pub-name{ margin:0; font-size:.99rem; line-height:1.5; color:var(--ink); }
.pub-name a{ color:var(--ink); text-decoration:none; transition:color .2s; }
.pub-name a:hover{ color:var(--accent-ink); text-decoration:underline; }
.pub-name .ext{ color:var(--accent-ink); font-size:.85em; white-space:nowrap; }

.pub-empty{
  margin:2.2rem 0 0; padding:1.5rem 1.7rem;
  background:var(--paper-2); border-left:4px solid var(--accent);
  font-size:.95rem; line-height:1.6; color:var(--ink-2);
}

.pub-more{
  margin-top:1.8rem;
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  color:var(--accent-ink); background:transparent; cursor:pointer;
  border:2px solid var(--accent); padding:.8rem 1.5rem;
  transition:background .2s, color .2s;
}
.pub-more:hover{ background:var(--accent); color:var(--ink); }
.pub-more:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.pub-more[hidden]{ display:none; }

.pub-note{
  margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--rule);
  font-size:.87rem; line-height:1.6; color:var(--ink-3);
}

@media (max-width:640px){
  .pub-row{ grid-template-columns:3.2rem minmax(0,1fr); gap:.9rem; }
  .pub-tile span{ font-size:.5rem; }
  .pub-tile--sm span{ font-size:.4rem; letter-spacing:-.02em; }
  .pub-chip{ font-size:.76rem; padding:.5rem .8rem; }
}

/* ---------- Profile bio (Work page opener) ---------- */
.bio-grid{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.bio-grid h1{ margin-top:.2rem; }
/* same treatment as the impact ledger: the heading tracks the prose it labels */
@media (min-width:901px){
  .bio-grid > div:first-child{ position:sticky; top:8rem; }
}
.bio-body{ max-width:40rem; }
.bio-body p{ font-size:.99rem; line-height:1.75; color:var(--ink-2); margin:0 0 1.15em; }
.bio-body .lede{
  font-size:clamp(1.05rem,1.5vw,1.18rem); line-height:1.62;
  color:var(--ink); font-weight:400; margin-bottom:1.4em;
}
.bio-body em{ font-style:italic; }
@media (max-width:900px){
  .bio-grid{ grid-template-columns:1fr; gap:1.6rem; }
  .bio-body{ max-width:none; }
  .bio-grid h1{ margin-top:0; }
}

/* ---------- Leadership: institution blocks ---------- */
.org{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.org-role{
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 .9rem;
}
.org-side h2{ margin-bottom:1.6rem; }
.org-facts{ list-style:none; margin:0; padding:1.3rem 0 0; border-top:1px solid var(--rule); display:grid; gap:.75rem; }
.org-facts li{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.org-facts .k{ font-size:.8rem; color:var(--ink-3); }
.org-facts .v{ font-size:1.3rem; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.org-lede{
  font-size:clamp(1.05rem,1.5vw,1.18rem); line-height:1.6;
  color:var(--ink); font-weight:400; margin:0 0 1.3em;
}
.org-body p{ font-size:.99rem; line-height:1.75; color:var(--ink-2); }
.org-aims{ list-style:none; margin:0 0 1.4em; padding:1.3rem 0 0; border-top:1px solid var(--rule-soft); display:grid; gap:1rem; }
.org-aims li{ position:relative; padding-left:1.4rem; font-size:.96rem; line-height:1.65; color:var(--ink-2); }
.org-aims li::before{ content:""; position:absolute; left:0; top:.68em; width:.45rem; height:1px; background:var(--accent); }
.org-aims strong{ color:var(--ink); font-weight:600; }
@media (min-width:901px){ .org-side{ position:sticky; top:8rem; } }
@media (max-width:900px){ .org{ grid-template-columns:1fr; gap:1.8rem; } }

/* ---------- Bio portrait (Work page) ---------- */
.bio-portrait{ margin:2.2rem 0 0; max-width:22rem; }
/* the offset accent frame reads as a stray rectangle at this size, and the
   system is otherwise flat and hairline-ruled. Keep the photo clean. */
.bio-portrait::before{ display:none; }
/* the portrait's own proportions, so nothing of it is cropped away */
/* landscape source in a portrait frame: hold the crop on him, not the slide */
.bio-portrait img{ aspect-ratio:4/5; object-fit:cover; object-position:66% 28%; }
@media (max-width:900px){ .bio-portrait{ max-width:15rem; margin-top:1.6rem; } }

/* ---------- Wide photo (Leadership) ---------- */
.shot--wide{ max-width:44rem; }
.shot--wide img{ aspect-ratio:1050/660; object-position:center; }
.shot--wide.no-image::after{ aspect-ratio:1050/660; }



/* ---------- Video thumbnail in a keynote card ---------- */
.wcard-media{ position:relative; display:block; margin-bottom:.9rem; }
.wcard-media img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.play-badge{
  position:absolute; inset:auto auto .6rem .6rem;
  width:2rem; height:2rem; display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--ink); font-size:.7rem; padding-left:.15em;
  transition:transform .25s var(--ease);
}
.wcard-media:hover .play-badge{ transform:scale(1.08); }

/* ---------- Statement (home) ---------- */
/* Portrait beside a quoted, italic statement. Set in the darker brass, since
   the bright accent fails contrast against paper at reading size. */
.statement{
  display:grid; grid-template-columns:minmax(0,21rem) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,3.6rem); align-items:center;
  max-width:68rem; margin-inline:auto;
}
.statement-portrait{ margin:0; position:relative; }
.statement-portrait img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 10%;
  display:block;
}
.statement-portrait::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:5px; background:var(--accent);
}
.statement-quote{ margin:0; }
.statement-quote p{
  font-style:italic; font-weight:300;
  font-size:clamp(1.02rem,1.25vw,1.14rem);
  line-height:1.7;
  color:var(--accent-ink);
  margin:0 0 1em;
  text-wrap:pretty;
}
.statement-quote p:last-child{ margin-bottom:0; }
/* Poppins collapses an italic colon into what reads as a full stop, so set it
   upright wherever one falls inside italic text. */
.cl{ font-style:normal; font-weight:600; }

/* upright and brass, so they read as quotation marks, not leaning letters */
.statement-quote .qm{
  font-style:normal; font-weight:700; color:var(--accent);
  font-size:1.3em; line-height:0; vertical-align:-.1em;
}
@media (max-width:820px){
  .statement{ grid-template-columns:1fr; gap:1.8rem; }
  .statement-portrait{ max-width:16rem; }
}

/* A page whose hero is only its label: no headline to make room for. */
.page-hero--label{ padding-block:clamp(2.4rem,4.5vw,3.4rem) 0; }
.page-hero--label .eyebrow{ margin-bottom:0; }

/* The institutional profile link, sitting under the hero buttons. */
.hero-profile{ margin:.2rem 0 0; }
.hero-profile a{
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid rgba(201,165,63,.4); padding-bottom:2px;
  transition:border-color .2s, color .2s;
}
.hero-profile a:hover{ color:var(--dark-ink); border-bottom-color:var(--dark-ink); }

/* ---------- Feature hero: title set over a full-bleed portrait ---------- */
.hero--feature{ background:var(--dark); padding:0; overflow:hidden; }
.hero--feature::after{ display:none; }
.hero-feature{
  max-width:1440px; margin-inline:auto;
  display:grid; grid-template-columns:.62fr 1.38fr;
  /* an explicit height, not a minimum: otherwise each hero resolves to its own
     photo's aspect ratio and the three pages open at different depths */
  height:clamp(300px,34vw,490px);
}
.hero-feature-copy{
  display:flex; align-items:center;
  padding:clamp(2.4rem,5vw,4rem) clamp(1.2rem,2.4vw,2rem)
          clamp(2.4rem,5vw,4rem) clamp(2.4rem,6vw,5.5rem);
  position:relative; z-index:2;
}
.hero-feature-copy h1{
  color:#fff; margin:0; max-width:14ch;
  font-size:clamp(2.1rem,4.4vw,3.6rem); line-height:1.04;
}
.hero-feature-figure{ position:relative; margin:0; min-height:240px; }
.hero-feature-figure img{
  width:100%; height:100%; object-fit:cover; object-position:88% 20%; display:block;
}
/* blends the photo into the dark panel so the title sits on a clean ground */
.hero-feature-figure::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right, var(--dark) 0%, rgba(14,28,48,.45) 14%, rgba(14,28,48,0) 34%);
}
/* flipped: the portrait leads, the title follows */
.hero-feature--flip{ grid-template-columns:1.2fr .8fr; }
.hero-feature--flip .hero-feature-figure{ order:-1; }
.hero-feature--flip .hero-feature-figure img{ object-position:22% 18%; }
.hero-feature--flip .hero-feature-figure::after{
  background:linear-gradient(to left, var(--dark) 0%, rgba(14,28,48,.4) 16%, rgba(14,28,48,0) 38%);
}
.hero-feature--flip .hero-feature-copy{
  padding:clamp(2.4rem,5vw,4rem) clamp(2.4rem,6vw,5.5rem)
          clamp(2.4rem,5vw,4rem) clamp(1.2rem,2.4vw,2rem);
}
/* the photo carries no veil: the panel ends and the image begins, with only a
   narrow feather at the seam */
.hero-feature-figure--light::after{
  background:linear-gradient(to left, var(--dark) 0%, rgba(14,28,48,.35) 3%, rgba(14,28,48,0) 9%);
}
@media (max-width:820px){
  .hero-feature{ grid-template-columns:1fr; height:auto; }
  .hero-feature-figure, .hero-feature--flip .hero-feature-figure{ order:-1; min-height:0; }
  .hero-feature--flip .hero-feature-copy{ padding-inline:clamp(1.5rem,4vw,3rem); }
  .hero-feature-figure img{ aspect-ratio:16/10; }
  .hero-feature-figure::after,
  .hero-feature-figure--light::after{
    background:linear-gradient(to top, var(--dark) 0%, rgba(14,28,48,0) 48%);
  }
  .hero-feature-copy{ padding-top:1.6rem; }
}

/* =========================================================
   THE VALUE OF GENOMICS
   ========================================================= */

/* the map: determining value on the left, realising it on the right,
   bridged by the GUV scale. Real text, so it works on any screen. */
.vmap{
  display:grid; grid-template-columns:1.55fr 1fr;
  gap:0; border:1px solid var(--rule); background:var(--paper);
}
.vmap-panel{ padding:clamp(1.4rem,2.6vw,2.2rem); }
.vmap-panel + .vmap-panel{ border-left:1px solid var(--rule); }
.vmap-panel--realise{ background:var(--paper-2); }
.vmap-head{
  font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 1.4rem; padding-bottom:.7rem;
  border-bottom:2px solid var(--accent);
}
/* the three stages, chevron-linked */
.vmap-flow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.vmap-stage{ position:relative; }
.vmap-stage + .vmap-stage::before{
  content:""; position:absolute; left:-1rem; top:.55rem;
  width:.5rem; height:.5rem; border-top:2px solid var(--accent); border-right:2px solid var(--accent);
  transform:rotate(45deg);
}
.vmap-stage h3{
  font-size:.94rem; font-weight:700; margin:0 0 .6rem; line-height:1.25; color:var(--ink);
}
.vmap-stage ul{ list-style:none; margin:0; padding:0; display:grid; gap:.32rem; }
.vmap-stage li{
  font-size:.78rem; line-height:1.45; color:var(--ink-3);
  padding-left:.75rem; position:relative;
}
.vmap-stage li::before{
  content:""; position:absolute; left:0; top:.6em; width:.3rem; height:1px; background:var(--accent);
}
/* the fourth stage is a consequence of the third, so it is braced not chevroned */
.vmap-stage--brace{ padding-left:.9rem; border-left:2px solid var(--accent); }
.vmap-stage--brace::before{ display:none; }
/* the bridge */
.vmap-bridge{
  margin:1.6rem 0 0; padding-top:1.2rem; border-top:1px solid var(--rule);
  display:flex; align-items:center; gap:.7rem; position:relative;
}
.vmap-bridge span{
  background:var(--dark); color:#fff; font-size:.76rem; font-weight:700;
  letter-spacing:.08em; padding:.5rem .9rem;
}
.vmap-bridge{ margin-right:calc(clamp(1.4rem,2.6vw,2.2rem) * -1); }
.vmap-bridge::after{
  content:""; flex:1; height:2px; background:var(--accent);
}
.vmap-bridge::before{
  content:""; position:absolute; right:0; top:calc(50% + .6rem); transform:translateY(-50%);
  width:0; height:0;
  border-left:10px solid var(--accent);
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
}
/* the realising column */
.vmap-list{ list-style:none; margin:0; padding:0; counter-reset:v; display:grid; gap:.85rem; }
.vmap-list li{
  counter-increment:v; position:relative; padding-left:1.9rem;
  font-size:.88rem; line-height:1.45; color:var(--ink);
}
.vmap-list li::before{
  content:counter(v,decimal-leading-zero);
  position:absolute; left:0; top:.05em;
  font-size:.7rem; font-weight:700; color:var(--accent-ink); letter-spacing:.05em;
}
@media (max-width:900px){
  .vmap{ grid-template-columns:1fr; }
  .vmap-panel + .vmap-panel{ border-left:0; border-top:1px solid var(--rule); }
  .vmap-flow{ grid-template-columns:1fr; gap:1.2rem; }
  .vmap-stage + .vmap-stage::before{
    left:0; top:-.85rem; transform:rotate(135deg);
  }
  .vmap-stage + .vmap-stage{ padding-top:.6rem; }
  .vmap-stage--brace{ border-left:2px solid var(--accent); padding-left:.9rem; padding-top:.2rem; }
  .vmap-bridge{ margin-right:0; }
  .vmap-bridge::before{ display:none; }
}

/* section one: the numbered stack */
.vstack{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.vstep{
  display:grid; grid-template-columns:4.5rem minmax(0,1fr);
  gap:clamp(1rem,3vw,2.4rem);
  padding-block:clamp(1.8rem,3.4vw,2.8rem);
  border-bottom:1px solid var(--rule);
  align-items:start;
}
.vstep-n{
  font-size:.9rem; font-weight:700; letter-spacing:.08em;
  color:var(--accent-ink); margin:.35rem 0 0;
}
.vstep h3{ font-size:clamp(1.2rem,1.8vw,1.5rem); margin:0 0 .7rem; }
.vstep p{ font-size:1rem; line-height:1.7; color:var(--ink-2); margin:0; max-width:46rem; }
.vtags{
  list-style:none; margin:1.2rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.vtags li{
  font-size:.8rem; letter-spacing:.01em; color:var(--ink-2);
  border:1px solid var(--rule); padding:.38rem .8rem; background:var(--paper);
}
.vgrid{
  list-style:none; margin:1.4rem 0 0; padding:1.3rem 0 0;
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 2rem;
}
.vgrid li{ font-size:.95rem; line-height:1.6; color:var(--ink-2); }
.vgrid strong{ color:var(--ink); font-weight:600; }
@media (max-width:760px){
  .vstep{ grid-template-columns:2.6rem minmax(0,1fr); }
  .vgrid{ grid-template-columns:1fr; }
}

/* section two: the cards */
.vcard{ border-top:2px solid var(--accent); padding-top:1.3rem; }
.vcard h3{ font-size:1.1rem; margin:0 0 .6rem; }
.vcard p{ font-size:.95rem; line-height:1.65; color:var(--ink-2); margin:0; }

/* A single wide portrait used as a break between sections. */
.wideshot{ margin:0; }
.wideshot img{ width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center 28%; display:block; }
.wideshot--tall{ max-width:26rem; }
.wideshot--tall img{ aspect-ratio:4/5; object-position:center 18%; }
@media (max-width:700px){
  .wideshot img{ aspect-ratio:4/3; }
  .wideshot--tall{ max-width:18rem; }
}

/* ---------- Keynote cards: align the rows across the row of cards ----------
   The cards carry different numbers of parts (one has a video link, titles run
   to one or two lines), so without this the images, titles and body text sit at
   different heights. Subgrid pins every card to the same five rows. */
.wcard > .wcard-media{ margin-bottom:0; padding-top:0; display:grid; }
.wcard-media img{ display:block; height:150px; aspect-ratio:auto; }
@supports (grid-template-rows: subgrid){
  @media (min-width:681px){
    .grid-4{ grid-template-rows:auto auto auto 1fr auto; }
    .grid-4 > .wcard{
      display:grid; grid-row:span 5; grid-template-rows:subgrid; gap:.75rem;
    }
    /* the trailing link is placed by its row, not pushed by auto margin */
    .grid-4 > .wcard > a:not(.wcard-media){ margin-top:0; padding-top:0; align-self:start; }
  }
}

/* the contact address: a button until clicked, then the address itself */
.contact-email{ margin:1.8rem 0 0; }
.email-shown{
  display:inline-block;
  font-family:var(--serif); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(1.3rem,3vw,2rem); color:var(--accent-ink);
  text-decoration:none; border-bottom:2px solid var(--accent);
  padding-bottom:.15rem; word-break:break-word;
}
.email-shown:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.band-dark .email-shown, .cta-band .email-shown{ color:var(--accent); }
.band-dark .email-shown:hover, .cta-band .email-shown:hover{ color:#fff; border-bottom-color:#fff; }
/* the reveal control is a <button>, so it needs the font the .btn rule assumes */
button.email-reveal{ font-family:inherit; cursor:pointer; }
/* inline variant, for running text rather than a standalone call to action */
button.btn-link.email-reveal{
  font:inherit; background:none; border:0; padding:0; cursor:pointer;
  color:var(--accent-ink); text-decoration:underline; text-underline-offset:.15em;
}
button.btn-link.email-reveal:hover{ color:var(--ink); }
.cap-foot .email-shown{ font:inherit; font-size:inherit; border-bottom-width:1px; }
.contact-email noscript{ display:block; margin-top:.9rem; font-size:.9rem; color:var(--ink-3); }