/* ==========================================================================
   bhairavkothari.com

   Ink on paper. One accent (teal). Gold is NEVER text - hairlines and
   marks only. Two type voices: Fraunces for display, Newsreader for
   reading, system sans for interface, mono for labels.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Light */
  --paper:        #F7F5F0;
  --paper-2:      #FFFDF9;
  --paper-3:      #EFEBE2;
  --ink:          #14171B;
  --ink-2:        #3B4149;
  --ink-3:        #646D79;   /* 4.81:1 on --paper. Was #6B7480 = 4.35:1, below AA. */
  --line:         #DED8CC;
  --line-strong:  #C4BCAB;

  --accent:       #0E4F45;
  --accent-soft:  #E4EDE9;
  --accent-ink:   #0A3B34;
  --gold:         #A8791F;   /* ornament only - rules, markers, dots. Never text. */
  --gold-text:    #8F6619;   /* the same gold, dark enough to set type in: 4.72:1 */

  --shadow-sm: 0 1px 2px rgba(20, 23, 27, .05), 0 2px 8px rgba(20, 23, 27, .04);
  --shadow-md: 0 2px 6px rgba(20, 23, 27, .06), 0 14px 34px rgba(20, 23, 27, .08);

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-read:    'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4rem, 8vw, 7rem);
  --radius: 12px;
  --radius-lg: 20px;

  --wrap: 1140px;
  --wrap-narrow: 740px;
}

:root[data-theme="dark"] {
  --paper:        #121110;
  --paper-2:      #1A1815;
  --paper-3:      #221F1A;
  --ink:          #EDEAE3;
  --ink-2:        #B6B0A5;
  --ink-3:        #8A8478;
  --line:         #2C2823;
  --line-strong:  #3C362E;

  --accent:       #3FA98E;
  --accent-soft:  #1E2B26;
  --accent-ink:   #8FE0CB;
  --gold:         #D4A94E;
  --gold-text:    #D4A94E;   /* 8.61:1 on --paper - safe as text here */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #121110;
    --paper-2:      #1A1815;
    --paper-3:      #221F1A;
    --ink:          #EDEAE3;
    --ink-2:        #B6B0A5;
    --ink-3:        #8A8478;
    --line:         #2C2823;
    --line-strong:  #3C362E;
    --accent:       #3FA98E;
    --accent-soft:  #1E2B26;
    --accent-ink:   #8FE0CB;
    --gold:         #D4A94E;
  --gold-text:    #D4A94E;   /* 8.61:1 on --paper - safe as text here */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .45);
  }
}

/* ---------- 2. Reset ----------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.021em;
  margin: 0;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 60;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--accent); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.25rem; z-index: 999;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Layout ---------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
.section--tint { background: var(--paper-2); border-block: 1px solid var(--line); }

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.muted { color: var(--ink-3); }

/* ---------- 4. Type scale ------------------------------------------------ */

.display {
  font-size: clamp(2.25rem, 5.6vw, 4rem);
  line-height: 1.03;
  letter-spacing: -0.032em;
  max-width: 17ch;
}
.h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
.h3 { font-size: clamp(1.25rem, 2.1vw, 1.5rem); letter-spacing: -0.015em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .71rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: "";
  width: 1.5rem; height: 1px;
  background: var(--gold);
  flex: none;
}

.lede {
  font-family: var(--font-read);
  font-size: clamp(1.16rem, 2vw, 1.38rem);
  line-height: 1.56;
  color: var(--ink-2);
  /* A reading measure, not the full 1140px wrap. Long lines are hard to read:
     the eye loses its place coming back to the start of the next line. 62ch is
     the top of the comfortable range for text at this size. */
  max-width: 62ch;
}
.lede strong { color: var(--ink); font-weight: 600; }

.section-head { margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); max-width: 60ch; }
.section-head p { color: var(--ink-2); margin-top: .9rem; font-family: var(--font-read); font-size: 1.1rem; }

.head-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.head-row .section-head { margin-bottom: 0; }

/* ---------- 5. Header ---------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 66px;
}

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.04rem; font-weight: 600;
  letter-spacing: -0.02em; white-space: nowrap;
}
.brand__mark {
  width: 29px; height: 29px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display);
  font-size: .78rem; flex: none;
}

.nav__links {
  display: flex; align-items: center;
  gap: clamp(.5rem, 1.8vw, 1.5rem);
  list-style: none; margin: 0; padding: 0;
}
.nav__links a {
  text-decoration: none;
  font-size: .92rem;
  color: var(--ink-3);
  padding: .4rem .1rem;
  position: relative;
  transition: color .18s ease;
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: .05rem;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--ink); }

.nav__right { display: flex; align-items: center; gap: .45rem; }

.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 9px;
  cursor: pointer;
  color: var(--ink-3);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.icon-btn:hover { background: var(--paper-3); color: var(--ink); border-color: var(--line-strong); }
.icon-btn svg { width: 16px; height: 16px; }

.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

.nav-toggle { display: none; }

@media (max-width: 820px) {
  .nav-toggle { display: grid; }
  .nav__links {
    position: fixed;
    inset: 66px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    padding: .25rem var(--gut) 1.25rem;
    box-shadow: var(--shadow-md);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { padding: .9rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); color: var(--ink); }
  .nav__links a::after { display: none; }
}

/* ---------- 6. Buttons and links ----------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .78rem 1.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: .93rem; font-weight: 500;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover { transform: translateY(-1.5px); }
.btn--primary { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-sm); }
.btn--primary:hover { box-shadow: var(--shadow-md); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { background: var(--paper-3); border-color: var(--ink-3); }

.btn-row { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none; font-weight: 500; font-size: .92rem;
  color: var(--accent);
  transition: gap .18s ease;
}
.link-arrow:hover { gap: .68rem; }
.link-arrow svg { width: 15px; height: 15px; }

/* ---------- 7. Hero ------------------------------------------------------ */

.hero {
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .82fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__status {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono);
  font-size: .71rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .38rem .85rem .38rem .62rem;
  margin-bottom: 1.5rem;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

.hero h1 { margin-bottom: 1.3rem; }
.hero h1 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 144;
  color: var(--accent);
}

.hero__lede { margin-bottom: 1.9rem; }

/* Portrait: a flat tint plate with a gold keyline. No glow. */
.hero__portrait {
  position: relative;
  justify-self: center;
  width: min(100%, 340px);
  /* A real photograph, not a cut-out: the frame arches at the top and squares
     off at the base, so the portrait reads as placed rather than pasted. The
     gold outline is the only ornament and carries in both themes. */
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
  outline: 1px solid var(--gold);
  outline-offset: 10px;
  overflow: hidden;
}
.hero__portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 46% 30%;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__portrait { order: -1; width: min(100%, 240px); justify-self: start; }
}

/* ---------- 8. Ledger line (the stats) ----------------------------------- */
/* Closed like a set of accounts: single rule above, double rule below. */

.ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.4rem clamp(1rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line-strong);
  border-bottom: 4px double var(--line-strong);
  padding-block: 1.4rem;
}
.ledger__item { min-width: 0; }
.ledger__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  margin-bottom: .3rem;
}
.ledger__label {
  font-size: .84rem;
  color: var(--ink-3);
  line-height: 1.4;
  display: block;
}

/* ---------- 9. Pillars (prose columns, no cards) ------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
}
.pillar { border-top: 1px solid var(--line); padding-top: 1.3rem; }
.pillar__no {
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .14em;
  color: var(--gold-text);
  display: block; margin-bottom: .9rem;
}
.pillar h3 { margin-bottom: .6rem; }
.pillar p { color: var(--ink-2); font-size: .96rem; }
.pillar ul { margin: .9rem 0 0; padding: 0; list-style: none; font-size: .87rem; color: var(--ink-3); }
.pillar ul li { padding: .28rem 0 .28rem 1rem; position: relative; }
.pillar ul li::before {
  content: ""; position: absolute; left: 0; top: .92em;
  width: 5px; height: 1px; background: var(--gold);
}

/* ---------- 10. Career in three acts ------------------------------------- */

.acts { display: grid; gap: 0; }
.act {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.act:last-child { border-bottom: 1px solid var(--line); }
.act__years {
  font-family: var(--font-mono);
  font-size: .76rem; letter-spacing: .08em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  padding-top: .45rem;
}
.act__years .now-flag {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--accent);
}
.act h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: .25rem; }
.act__org { font-size: .9rem; color: var(--accent); font-weight: 500; margin-bottom: .8rem; }
.act p { color: var(--ink-2); font-family: var(--font-read); font-size: 1.06rem; max-width: 62ch; }
.act__facts {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.act__facts li {
  font-family: var(--font-mono);
  font-size: .69rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px; padding: .3rem .7rem;
}
@media (max-width: 700px) {
  .act { grid-template-columns: 1fr; gap: .5rem; }
  .act__years { padding-top: 0; }
}

/* ---------- 11. Split (photo + text) ------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 32%;
}
.figure-caption {
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  margin-top: .85rem;
}

/* ---------- 12. Writing lists -------------------------------------------- */

.post-list { list-style: none; margin: 0; padding: 0; }
.post-item { border-top: 1px solid var(--line); }
.post-item:last-child { border-bottom: 1px solid var(--line); }

.post-item a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.4rem .2rem;
  text-decoration: none;
  transition: padding-inline .25s cubic-bezier(.2,.8,.3,1);
}
.post-item a:hover { padding-inline: .7rem .2rem; }

.post-item__title {
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 2vw, 1.45rem);
  letter-spacing: -0.02em;
  line-height: 1.22;
  display: block;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: .18em;
  transition: text-decoration-color .2s ease;
}
.post-item a:hover .post-item__title { text-decoration-color: var(--accent); }

.post-item__date {
  font-family: var(--font-mono);
  font-size: .73rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.post-item__excerpt {
  display: block;
  font-size: .93rem; color: var(--ink-3);
  margin-top: .35rem; max-width: 62ch;
}
.post-item__tag {
  font-family: var(--font-mono);
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* Index: rows carry excerpt + tag; home: title + date only. */
.post-list--compact .post-item__tag { display: none; }

/* "What I work on" - one subject, text left, facts right */
.focus {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.focus__body p { color: var(--ink-2); max-width: 62ch; }
.focus__body p + p { margin-top: 1rem; }
@media (max-width: 820px) { .focus { grid-template-columns: 1fr; } }

/* A row of evenly cropped photographs, not a stack of odd shapes. */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.1rem;
  margin: 0 0 2.8rem;
}
.photo-strip figure { margin: 0; }
.photo-strip .figure-caption { margin-top: .6rem; }
@media (max-width: 640px) {
  .photo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Portrait figures inside prose: centred, so they do not leave a ragged edge. */
.prose figure.portrait { margin-inline: auto; }

/* Beliefs grid (home page) */
.creed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 3.2rem) clamp(2rem, 5vw, 4rem);
}
@media (max-width: 720px) { .creed { grid-template-columns: 1fr; } }
.creed__item { border-top: 1px solid var(--line); padding-top: 1.3rem; }
.creed__no {
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .14em;
  color: var(--gold-text);
  display: block; margin-bottom: .9rem;
}
.creed__item h3 { margin-bottom: .6rem; }
.creed__item p { color: var(--ink-2); }

.year-group { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); }
.year-group + .year-group { margin-top: 3rem; }
.year-group__label {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  color: var(--ink-3);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  position: sticky; top: 6rem; align-self: start;
}
.year-group .post-item a { grid-template-columns: 5.6rem minmax(0, 1fr) auto; }
@media (max-width: 760px) {
  .year-group { grid-template-columns: 1fr; gap: .6rem; }
  .year-group__label { position: static; }
  .year-group .post-item a,
  .post-item a { grid-template-columns: 1fr; gap: .45rem; }
  .post-item__tag { justify-self: start; }
}

/* ---------- 13. Article -------------------------------------------------- */

.article-head { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.2rem, 2.5vw, 2rem); }
.article-meta {
  display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center;
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 1.5rem;
}
.article-meta > * + *::before {
  content: ""; display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold); vertical-align: middle;
  margin-right: 1.1rem;
}

.prose {
  font-family: var(--font-read);
  font-size: 1.17rem;
  line-height: 1.7;
  color: var(--ink);
  max-width: 66ch;
  margin-inline: auto;
}
.prose > * + * { margin-top: 1.3em; }

.prose > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-weight: 600;
  float: left;
  font-size: 3.4em;
  line-height: .82;
  padding-right: .07em;
  padding-top: .06em;
  color: var(--ink);
}
@supports (initial-letter: 3) {
  .prose > p:first-of-type::first-letter {
    float: none; font-size: inherit; line-height: inherit;
    initial-letter: 3; padding-right: .09em; padding-top: 0;
  }
}

/* Editorial end-mark. The one job gold has in body copy. */
.prose > *:last-child::after {
  content: "";
  display: inline-block;
  width: .48em; height: .48em;
  background: var(--gold);
  margin-left: .4em;
  vertical-align: baseline;
}

.prose h2 { font-size: 1.68rem; margin-top: 2.2em; margin-bottom: -.15em; letter-spacing: -0.022em; }
.prose h3 { font-size: 1.3rem; margin-top: 1.9em; margin-bottom: -.25em; }

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: .055em;
  text-underline-offset: .16em;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-decoration-skip-ink: auto;
  transition: text-decoration-color .18s ease;
}
.prose a:hover { text-decoration-color: currentColor; }

.prose blockquote {
  margin: 1.9em 0;
  padding-left: 1.3rem;
  border-left: 2px solid var(--gold);
  font-style: italic;
  color: var(--ink-2);
}
.prose .pull {
  font-family: var(--font-display);
  font-size: 1.42rem; line-height: 1.32; letter-spacing: -0.022em;
  color: var(--ink);
  border-left: 0;
  padding: 1.3rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 4px double var(--line-strong);
  margin: 2em 0;
  font-style: normal;
}
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--gold); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose code { font-family: var(--font-mono); font-size: .84em; background: var(--paper-3); padding: .12em .38em; border-radius: 4px; }
.prose strong { font-weight: 650; }
.prose figure { margin: 2em 0; }
.prose figcaption { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-top: .7rem; }

/* ---------- 14. Now page ------------------------------------------------- */

.now-block { border-top: 1px solid var(--line); padding-block: 1.8rem; }
.now-block h3 { margin-bottom: .7rem; }
.now-block p, .now-block li { color: var(--ink-2); font-family: var(--font-read); font-size: 1.08rem; }
.now-block ul { padding-left: 1.15rem; margin: 0; }
.now-block li { margin-bottom: .45rem; }
.now-block li::marker { color: var(--gold); }
.now-stamp {
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- 15. Contact -------------------------------------------------- */

.form-grid { display: grid; gap: 1rem; max-width: 620px; }
.field label {
  display: block; font-size: .82rem; font-weight: 500;
  margin-bottom: .4rem; color: var(--ink-2);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: .78rem .95rem;
  font: inherit; font-size: .96rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.field-hint { font-size: .8rem; color: var(--ink-3); margin-top: .35rem; }
.hp { position: absolute; left: -9999px; }

.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; }
.contact-card {
  border-top: 1px solid var(--line);
  padding: 1.2rem 1.2rem 1.2rem 0;
  text-decoration: none; display: block;
}
.contact-card strong { display: block; margin-bottom: .15rem; font-weight: 600; font-size: .97rem; }
.contact-card span { font-size: .88rem; color: var(--ink-3); }
.contact-card:hover strong { color: var(--accent); }

/* ---------- 16. CTA band ------------------------------------------------- */

.cta {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(2.75rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  outline: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  outline-offset: -12px;
}
:root[data-theme="dark"] .cta { background: var(--paper-3); color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta { background: var(--paper-3); color: var(--ink); }
}
.cta h2 { margin-bottom: .9rem; }
.cta p {
  color: color-mix(in srgb, currentColor 70%, transparent);
  font-family: var(--font-read); font-size: 1.12rem;
  max-width: 52ch; margin-inline: auto; margin-bottom: 1.8rem;
}
.cta .btn--primary { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .cta .btn--primary { background: var(--ink); color: var(--paper); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta .btn--primary { background: var(--ink); color: var(--paper); }
}
.cta .btn--ghost { border-color: color-mix(in srgb, currentColor 32%, transparent); color: inherit; }
.cta .btn--ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.cta .btn-row { justify-content: center; }

/* ---------- 17. Footer --------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.75rem;
  margin-top: var(--section);
  background: var(--paper-2);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 2rem;
  margin-bottom: 2.25rem;
}
.footer-grid h4 {
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .9rem; font-weight: 400;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .55rem; }
.footer-grid a { text-decoration: none; font-size: .92rem; color: var(--ink-2); transition: color .18s ease; }
.footer-grid a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  font-size: .84rem; color: var(--ink-3);
}
.social-row { display: flex; gap: .45rem; }
.social-row a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink-3);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.social-row a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.social-row svg { width: 15px; height: 15px; }

/* ---------- 18. Motion --------------------------------------------------- */
/* Deliberately sparing: hero and section heads only. */

/* Gated on the .js class the inline head script adds, so that a failed or
   blocked script can never leave the page blank. */
:root.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .65s cubic-bezier(.2,.8,.3,1), transform .65s cubic-bezier(.2,.8,.3,1);
}
:root.js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .07s; }
.reveal[data-delay="2"] { transition-delay: .14s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 19. Odds and ends -------------------------------------------- */

.tag-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }
.tag {
  font-family: var(--font-mono);
  font-size: .69rem; letter-spacing: .09em; text-transform: uppercase;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: .32rem .75rem; color: var(--ink-3);
}

.award-list { list-style: none; margin: 0; padding: 0; }
.award-list li {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1rem; padding: .85rem 0;
  border-top: 1px solid var(--line);
  font-size: .95rem;
}
.award-list li:last-child { border-bottom: 1px solid var(--line); }
.award-list .yr {
  font-family: var(--font-mono); font-size: .74rem;
  color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: .18rem;
}
.award-list .what { color: var(--ink-2); }
.award-list .what strong { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) {
  .award-list li { grid-template-columns: 1fr; gap: .2rem; }
}

/* ---------- 20. Press ---------------------------------------------------- */

.press { list-style: none; margin: 0; padding: 0; }
.press li { border-top: 1px solid var(--line); }
.press li:last-child { border-bottom: 1px solid var(--line); }
.press a {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: baseline;
  padding: 1.15rem .2rem;
  text-decoration: none;
  transition: padding-inline .25s cubic-bezier(.2,.8,.3,1);
}
.press a:hover { padding-inline: .7rem .2rem; }
.press__outlet {
  font-family: var(--font-mono);
  font-size: .71rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.press__title {
  font-family: var(--font-read);
  font-size: 1.06rem; line-height: 1.35;
  display: block;
}
.press a:hover .press__title { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.press__meta {
  font-family: var(--font-mono);
  font-size: .71rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .45rem;
}
.press__meta svg { width: 11px; height: 11px; }
@media (max-width: 720px) {
  .press a { grid-template-columns: 1fr; gap: .35rem; }
  .press__meta { justify-self: start; }
}

/* ---------- 21. Subscribe ------------------------------------------------ */

.subscribe { max-width: 480px; }
.subscribe__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.subscribe__row input {
  flex: 1 1 15rem;
  padding: .78rem .95rem;
  font: inherit; font-size: .95rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.subscribe__row input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.subscribe p { font-size: .82rem; color: var(--ink-3); margin: .7rem 0 0; }
.cta .subscribe { margin-inline: auto; }
.cta .subscribe__row input {
  background: color-mix(in srgb, currentColor 8%, transparent);
  border-color: color-mix(in srgb, currentColor 28%, transparent);
  color: inherit;
}
.cta .subscribe__row input::placeholder { color: color-mix(in srgb, currentColor 55%, transparent); }
.cta .subscribe p { color: color-mix(in srgb, currentColor 60%, transparent); }

/* ---------- 22. LinkedIn follow ------------------------------------------ */

.btn--linkedin {
  background: #0A66C2;
  color: #FFFFFF;
  border-color: #0A66C2;
}
.btn--linkedin:hover { background: #084E96; border-color: #084E96; color: #FFFFFF; }
.btn--linkedin svg { width: 16px; height: 16px; }

/* ---------- 23. Speaking ------------------------------------------------- */

.talk-list { list-style: none; margin: 0; padding: 0; }
.talk-list li {
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
}

/* Formats: a label column on the left. The engagement list has no such column. */
.talk-list--labelled li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1.2rem;
}
.talk-list--labelled .when {
  font-family: var(--font-mono);
  font-size: .73rem; color: var(--ink-3);
  padding-top: .2rem;
}
@media (max-width: 600px) {
  .talk-list--labelled li { grid-template-columns: 1fr; gap: .25rem; }
}
.talk-list li:last-child { border-bottom: 1px solid var(--line); }
.talk-list strong { display: block; font-weight: 600; margin-bottom: .15rem; }
.talk-list span.where { font-size: .9rem; color: var(--ink-3); }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem 2rem; }
.topic { border-top: 1px solid var(--line); padding-top: 1rem; }
.topic h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.topic p { font-size: .93rem; color: var(--ink-2); }

.kit { list-style: none; margin: 0; padding: 0; }
.kit li { border-top: 1px solid var(--line); }
.kit li:last-child { border-bottom: 1px solid var(--line); }
.kit a {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem .2rem; text-decoration: none;
  transition: padding-inline .22s ease;
}
.kit a:hover { padding-inline: .6rem .2rem; }
.kit a:hover strong { color: var(--accent); }
.kit svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.kit strong { display: block; font-weight: 600; font-size: .97rem; }
.kit span { font-size: .85rem; color: var(--ink-3); }

/* ---------- 24. Poster --------------------------------------------------- */

.poster {
  width: min(100%, 300px);
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  outline: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  outline-offset: 8px;
}
.media-pair { display: grid; gap: 1.5rem; justify-items: start; }

/* ============================ VENTURES ============================
   SuperCFO and FinPera, side by side. Both logos sit on a white plate
   so the lockups stay legible in either theme without needing two
   files per brand. */
.ventures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem;
}
.venture {
  display: flex;
  flex-direction: column;
  padding: 1.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.venture__plate {
  display: flex;
  align-items: center;
  height: 62px;
  padding: 0 1.1rem;
  margin-bottom: 1.4rem;
  background: #fff;
  border: 1px solid var(--line);   /* so the plate still reads on light paper */
  border-radius: var(--radius);
  align-self: flex-start;
}
/* Sized by eye, not by number: the SuperCFO lockup carries a tagline and
   needs more height than the FinPera wordmark to look the same weight. */
.venture__plate img { display: block; width: auto; }
.venture__plate img[data-logo="supercfo"] { max-height: 34px; }
.venture__plate img[data-logo="finpera"]  { max-height: 25px; }
.venture__role {
  font-family: var(--font-mono, inherit);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .6rem;
}
.venture p { margin-bottom: 1.1rem; }
.venture__facts {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.venture__facts li {
  font-size: .78rem;
  letter-spacing: .04em;
  padding: .28rem .65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
}
.venture .link-arrow { margin-top: auto; }

/* ---------- 24. Touch and image-format fixes ----------------------------- */

/* Every photograph is now served as <picture><source .webp><img .jpg>.
   `display: contents` removes the wrapper's own box, so the <img> stays the
   direct layout child of .hero__portrait, .split__media and friends, and
   every existing rule applies exactly as it did before the wrapper existed.
   Never change this to block or inline without re-checking those layouts. */
picture { display: contents; }

/* iOS Safari zooms the whole page in whenever a focused input has a font
   smaller than 16px. Nothing in the design depends on the field text being
   0.95rem, so on touch devices it goes to 16px and the zoom never fires. */
@media (pointer: coarse) {
  .field input,
  .field textarea,
  .field select,
  .subscribe__row input {
    font-size: 16px;
  }
}

/* Touch targets. The 36px icon buttons and 34px social squares read well on a
   desktop and are below the 44px minimum on a phone. Rather than enlarge the
   visible control and coarsen the design, the tap area is extended past the
   border with a transparent ::after. The button looks identical; the finger
   target is 44px. Applied only on coarse pointers, so the mouse design is
   untouched. */
@media (pointer: coarse) {
  .icon-btn,
  .social-row a {
    position: relative;
  }
  .icon-btn::after,
  .social-row a::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Footer links sit in a tight 0.55rem-spaced list. Padding here lifts each
     row to a comfortable target without visibly changing the spacing. */
  .footer-grid li { margin-bottom: .2rem; }
  .footer-grid a {
    display: inline-block;
    padding-block: .55rem;
  }
}