/* ============================================================
   web.css — rules for the landing page, the CV one-pager and
   Equity Reports. Loaded AFTER site.css, which supplies the
   colour tokens, typography, nav and footer. Nothing in here
   redefines a token: the two palettes stay in one place.
   ============================================================ */

/* ---------- shared: a contact link on a light background ---------- */
.link-row{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;}
.link-item{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--ink-soft);transition:color .2s ease,gap .2s ease;}
.link-item svg{color:var(--accent);flex-shrink:0;}
a.link-item:hover{color:var(--accent-ink);gap:13px;}

/* ============================================================
   LANDING PAGE
   ============================================================ */
.lp{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;}
.lp-bar{padding-block:26px;border-bottom:1px solid var(--line);}
.lp-bar-inner{max-width:1180px;margin:0 auto;padding-inline:32px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.lp-place{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}

.lp-main{flex:1;display:flex;align-items:center;padding-block:clamp(44px,6vw,86px);}
.lp-grid{max-width:1180px;margin:0 auto;padding-inline:32px;width:100%;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(44px,6vw,80px);align-items:center;}

.lp-byline{display:flex;align-items:center;gap:18px;margin-bottom:30px;}
.lp-byline img{width:80px;height:80px;border-radius:50%;object-fit:cover;object-position:center 18%;border:1.5px solid var(--accent);}
.lp-byline span{font-family:'Archivo',sans-serif;font-size:13.5px;font-weight:600;color:var(--ink-faint);letter-spacing:.12em;text-transform:uppercase;}
.lp-intro h1{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-size:clamp(34px,4.6vw,54px);font-weight:600;letter-spacing:-0.022em;line-height:1.1;margin-bottom:20px;}
.lp-role{font-size:clamp(13px,1.35vw,14.5px);font-weight:600;letter-spacing:.02em;color:var(--accent-ink);margin-bottom:14px;}
.lp-lede{font-size:16.5px;line-height:1.68;color:var(--ink-soft);max-width:48ch;margin-bottom:0;}
/* the stations carry the credibility the doors cannot: names, not numbers */
.lp-stations{display:flex;flex-wrap:wrap;align-items:center;gap:9px 0;border-top:1px solid var(--line);margin-top:28px;padding-top:18px;}
.lp-stations span{font-family:'Archivo',system-ui,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);line-height:1.2;padding-inline:14px;border-left:1px solid var(--line);}
.lp-stations span:first-child{padding-left:0;border-left:none;}
/* a station that has not happened yet is accent-coloured and carries its year,
   so it can never be read as somewhere he has already worked */
.lp-stations .is-upcoming{color:var(--accent-ink);}
.lp-stations .is-upcoming em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-weight:600;letter-spacing:.06em;margin-left:6px;opacity:.85;}
.lp-contact{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);}

/* the three doors */
.lp-doors{display:flex;flex-direction:column;}
.lp-door{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:0 22px;padding-block:26px;border-top:1px solid var(--line);position:relative;transition:padding-left .28s ease;}
.lp-door:last-child{border-bottom:1px solid var(--line);}
.lp-door::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--accent);transition:width .35s cubic-bezier(.2,.7,.3,1);}
.lp-door:hover::before,.lp-door:focus-visible::before{width:100%;}
.lp-door:hover,.lp-door:focus-visible{padding-left:10px;}
.lp-door .n{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--accent);padding-top:7px;}
.lp-door h2{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-size:clamp(21px,2.3vw,27px);font-weight:600;letter-spacing:-0.015em;line-height:1.2;margin-bottom:9px;transition:color .2s ease;}
.lp-door p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);max-width:46ch;margin:0;}
.lp-door .arrow{color:var(--ink-faint);align-self:center;transition:transform .3s cubic-bezier(.2,.7,.3,1),color .2s ease;}
.lp-door:hover .arrow,.lp-door:focus-visible .arrow{transform:translateX(7px);color:var(--accent);}
.lp-door:hover h2,.lp-door:focus-visible h2{color:var(--accent-ink);}

.lp-foot{border-top:1px solid var(--line);padding-block:22px;}
.lp-foot-inner{max-width:1180px;margin:0 auto;padding-inline:32px;display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-faint);}

@media (max-width:980px){
  .lp-grid{grid-template-columns:1fr;gap:42px;}
  .lp-main{align-items:flex-start;}
}
@media (max-width:560px){
  /* the strip always wraps at this width, and a wrapped line must not start with
     a leftover separator — so drop the rules and space the names instead */
  .lp-stations{gap:9px 20px;}
  .lp-stations span{padding-inline:0;border-left:none;}
  .lp-bar-inner,.lp-grid,.lp-foot-inner{padding-inline:20px;}
  .lp-door{grid-template-columns:auto minmax(0,1fr);gap:0 16px;}
  .lp-door .arrow{display:none;}
  .lp-door p{font-size:14px;}
}
@media (prefers-reduced-motion:reduce){
  .lp-door,.lp-door::before,.lp-door .arrow{transition:none;}
}

/* ============================================================
   CV ONE-PAGER
   ============================================================ */
.cv-page{padding-block:54px 0;}
.cv-head{display:grid;grid-template-columns:1fr auto;gap:28px 40px;align-items:end;padding-bottom:30px;border-bottom:2px solid var(--accent);}
.cv-head h1{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-size:clamp(32px,4.4vw,48px);font-weight:600;letter-spacing:-0.022em;line-height:1.06;margin-bottom:12px;}
.cv-head .cv-role{font-size:15.5px;font-weight:600;color:var(--accent-ink);margin-bottom:22px;}
.cv-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}

.cv-profile p{font-size:16.5px;line-height:1.72;color:var(--ink-soft);max-width:72ch;}
/* the note under the CV rides the same content track as everything above it */
.cv-tail{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:52px;}
.cv-tail > *{grid-column:2;}

/* the two-track rail, reused from the case pages but tuned for a CV */
.cv-body{padding-block:10px 40px;}
.cv-block{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:52px;align-items:start;padding-block:38px;border-bottom:1px solid var(--line);}
.cv-block > h2{grid-column:1;font-family:'Archivo',system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);position:sticky;top:26px;margin:0;}
.cv-block > *:not(h2){grid-column:2;}

.cv-entry + .cv-entry{margin-top:34px;padding-top:34px;border-top:1px solid var(--line);}
.cv-entry-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;flex-wrap:wrap;margin-bottom:4px;}
.cv-org{font-family:'Archivo',system-ui,sans-serif;font-size:17px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);}
.cv-when{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-faint);white-space:nowrap;font-variant-numeric:tabular-nums;}
/* same rule on the CV: an entry that lies in the future says so */
.cv-upcoming{display:inline-block;font-family:'Archivo',system-ui,sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:3px 9px;margin-left:9px;vertical-align:middle;}
@media print{.cv-upcoming{background:none;border:1px solid var(--line);}}
.cv-title{font-size:14.5px;font-weight:600;color:var(--accent-ink);margin-bottom:14px;}
.cv-entry ul li{position:relative;padding-left:19px;font-size:15px;line-height:1.66;color:var(--ink-soft);margin-bottom:9px;}
.cv-entry ul li:last-child{margin-bottom:0;}
.cv-entry ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:1px;background:var(--accent);}
.cv-entry ul li strong{color:var(--ink);font-weight:600;}

.cv-facts{display:grid;grid-template-columns:182px minmax(0,1fr);gap:14px 26px;}
.cv-facts dt{font-family:'Archivo',system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);padding-top:2px;}
.cv-facts dd{margin:0;font-size:15px;line-height:1.62;color:var(--ink-soft);}
.cv-facts dd strong{color:var(--ink);font-weight:600;}

.cv-note{font-size:13.5px;color:var(--ink-faint);line-height:1.6;padding-block:26px 46px;max-width:70ch;}

@media (max-width:860px){
  .cv-head{grid-template-columns:1fr;align-items:start;}
  .cv-block{grid-template-columns:1fr;column-gap:0;}
  .cv-block > h2{position:static;margin-bottom:18px;}
  .cv-block > *:not(h2){grid-column:1;}
  .cv-facts{grid-template-columns:1fr;gap:4px 0;}
  .cv-facts dd{margin-bottom:12px;}
  .cv-tail{grid-template-columns:1fr;column-gap:0;}
  .cv-tail > *{grid-column:1;}
}

/* print: the page IS the PDF, so make it behave like one */
@media print{
  @page{margin:14mm 14mm 16mm;}
  :root{--bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#FFFFFF;--ink:#000000;--ink-soft:#1E2622;--ink-faint:#4A534D;--line:#C9CFC9;--accent:#1F7A53;--accent-ink:#14563A;}
  html,body{background:#FFFFFF !important;color:#000 !important;}
  .no-print,.cv-actions,.lp-foot,.site-footer{display:none !important;}
  .cv-page{padding-block:0 !important;}
  .cv-block{page-break-inside:avoid;padding-block:20px;}
  .cv-entry{page-break-inside:avoid;}
  .cv-block > h2{position:static !important;}
  .cv-head{padding-bottom:18px;}
  .cv-head h1{font-size:30px;}
  .cv-profile{padding-block:18px;}
  .cv-profile p,.cv-entry ul li,.cv-facts dd{font-size:11pt;line-height:1.45;}
  .cv-org{font-size:12.5pt;}
  .reveal-io,.reveal-io.pending{opacity:1 !important;transform:none !important;}
  a{text-decoration:none;color:inherit;}
}

/* ============================================================
   EQUITY REPORTS
   ============================================================ */
.eq-hero{padding-block:54px 40px;border-bottom:1px solid var(--line);}
.eq-hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:26px 56px;align-items:end;}
.eq-hero h1{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-size:clamp(30px,4.4vw,46px);font-weight:600;letter-spacing:-0.02em;line-height:1.1;margin-block:12px 0;max-width:20ch;}
.eq-hero .eq-lead{font-size:17px;line-height:1.66;color:var(--ink-soft);border-top:2px solid var(--accent);padding-top:18px;}
@media (max-width:860px){.eq-hero-grid{grid-template-columns:1fr;gap:22px;}}

.eq-method{padding-block:44px;border-bottom:1px solid var(--line);}
.eq-method-grid{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:52px;align-items:start;}
.eq-method-grid > h2{font-family:'Archivo',system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0;}
.eq-method-intro{font-size:16px;line-height:1.72;color:var(--ink-soft);margin-bottom:26px;max-width:66ch;}
@media (max-width:860px){.eq-method-grid{grid-template-columns:1fr;}.eq-method-grid > h2{margin-bottom:18px;}}

.eq-list{padding-block:44px 20px;}
.eq-list-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;flex-wrap:wrap;margin-bottom:8px;}
.eq-list-head h2{font-family:'Archivo',system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.eq-count{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums;}

.eq-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 22px;align-items:baseline;padding-block:26px;border-top:1px solid var(--line);position:relative;transition:padding-left .28s ease;}
.eq-item:last-of-type{border-bottom:1px solid var(--line);}
.eq-item::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--accent);transition:width .35s cubic-bezier(.2,.7,.3,1);}
.eq-item:hover::before,.eq-item:focus-visible::before{width:100%;}
.eq-item:hover,.eq-item:focus-visible{padding-left:10px;}
.eq-item .n{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--accent);padding-top:6px;}
.eq-item h3{font-family:'Archivo',system-ui,sans-serif;font-size:18px;font-weight:700;letter-spacing:-0.01em;margin-bottom:6px;transition:color .2s ease;}
.eq-item:hover h3,.eq-item:focus-visible h3{color:var(--accent-ink);}
.eq-item .eq-sub{font-size:14.5px;line-height:1.6;color:var(--ink-soft);max-width:56ch;margin:0;}
.eq-item .eq-tags{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:12px;}
.eq-tag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--line);border-radius:999px;padding:3px 10px;}
.eq-item .arrow{color:var(--ink-faint);align-self:center;transition:transform .3s cubic-bezier(.2,.7,.3,1),color .2s ease;}
.eq-item:hover .arrow,.eq-item:focus-visible .arrow{transform:translateX(7px);color:var(--accent);}

.eq-empty{border:1px dashed var(--line);border-radius:14px;padding:34px 30px;text-align:center;}
.eq-empty p{font-size:15px;line-height:1.66;color:var(--ink-soft);max-width:52ch;margin:0 auto;}

.eq-disclaimer{margin-top:52px;padding-block:28px 46px;border-top:1px solid var(--line);}
.eq-disclaimer h3{font-family:'Archivo',system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px;}
.eq-disclaimer p{font-size:13.5px;line-height:1.66;color:var(--ink-faint);max-width:78ch;margin-bottom:10px;}
.eq-disclaimer p:last-child{margin-bottom:0;}

@media (max-width:560px){
  .eq-item{grid-template-columns:auto minmax(0,1fr);gap:0 16px;}
  .eq-item .arrow{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .eq-item,.eq-item::before,.eq-item .arrow{transition:none;}
}

/* a report subpage reuses .case-* from site.css; these are the additions */
.report-tags{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:16px;}
.placeholder{background:var(--accent-soft);border-radius:3px;padding:0 4px;font-family:'IBM Plex Mono',monospace;font-size:.92em;color:var(--accent-ink);}

/* ============================================================
   CV — career spine
   The scroll-progressive timeline from the portfolio, moved here
   when Experience left that page. Progressive enhancement: without
   JS the grey spine and outlined dots are simply all visible.
   ============================================================ */
.cv-timeline{position:relative;padding-left:32px;}
.cv-timeline::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:var(--line);}
.cv-timeline .cv-rail{position:absolute;left:0;top:10px;width:2px;height:0;background:var(--accent);will-change:height;}
.cv-timeline .cv-entry{position:relative;}
.cv-timeline .dot{
  position:absolute;left:-37px;top:7px;width:12px;height:12px;border-radius:50%;
  background:var(--bg);border:2.5px solid var(--accent);
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,transform .35s ease;
}
.cv-timeline.rail-on .dot{border-color:var(--line);}
.cv-timeline.rail-on .dot.lit{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft);transform:scale(1.08);}
@media (prefers-reduced-motion:reduce){
  .cv-timeline .dot{transition:none;}
}
@media (max-width:700px){
  .cv-timeline{padding-left:0;}
  .cv-timeline::before,.cv-timeline .cv-rail,.cv-timeline .dot{display:none;}
}
@media print{
  .cv-timeline{padding-left:0 !important;}
  .cv-timeline::before,.cv-timeline .cv-rail,.cv-timeline .dot{display:none !important;}
  .njm,.brandbar{display:none !important;}
}