/* Inter Tight, self-hosted (SIL Open Font License, see fonts/OFL.txt). Variable font, weights 100–900. */
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-tight-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Krystopher Nasir Scott — shared site styles */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Color system: Mineral Modernism. Every color on the site reads from these tokens. */
  --color-ink: #182126;                      /* primary text */
  --color-text-muted: #4A555A;               /* secondary text on light */
  --color-text-subtle: #8B969B;              /* decorative separators */
  --color-background: #F6F5F0;               /* page */
  --color-nav-bg: rgba(246,245,240,0.92);
  --color-surface: #FCFBF8;                  /* cards */
  --color-surface-secondary: #DCE5E5;        /* secondary panels */
  --color-primary: #20556B;                  /* accent, links, buttons */
  --color-primary-hover: #173F50;
  --color-on-primary: #FFFFFF;
  --ink-rgb: 24,33,38;                       /* hairlines on light */
  --line-rgb: 24,33,38;                      /* borders and shadows on light */

  --color-dark: #182126;                     /* About, footer */
  --color-dark-elevated: #182126;            /* featured publication */
  --color-dark-elevated-hover: #203038;
  --color-dark-surface: #212D33;             /* quote card */
  --inverse-rgb: 255,255,255;                /* hairlines on dark */
  --color-text-inverse: #FCFBF8;
  --color-text-inverse-strong: #FCFBF8;
  --color-text-inverse-muted: #D6DCDE;
  --color-text-inverse-subtle: #B5C0C4;
  --color-text-inverse-faint: #A5B1B6;
  --color-text-inverse-fainter: #9AA7AC;
  --color-accent-light: #A9CFDB;             /* labels and focus on dark */
  --color-accent-light-2: #A9CFDB;

  --color-cta-bg: #30708B;                   /* contact banner: lighter Mineral Blue, separates from footer */
  --color-cta-text: #FFFFFF;
  --color-cta-button-bg: #FCFBF8;
  --color-cta-button-text: #182126;
  --color-card-border: rgba(24,33,38,0.08);  /* hairline edge on Soft White cards */
  --color-feature-cta-bg: #A9CFDB;
  --color-feature-cta-text: #182126;
  --color-feature-cta-hover: #C6E0E8;

  /* Typography: one family, hierarchy from size, weight, and spacing. */
  --font-primary: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-display: -0.035em;
  --tracking-heading: -0.025em;
  --tracking-title: -0.01em;
  --tracking-label: 0.10em;

  --text-display: clamp(44px, 5.9vw, 81px);
  --text-subdisplay: clamp(21px, 2.3vw, 29px);
  --text-heading: clamp(28px, 3vw, 40px);
  --text-title: 17px;
  --text-body: 16px;
  --text-secondary: 15px;
  --text-small: 14px;
  --text-label: 12px;

  --leading-display: 1;
  --leading-heading: 1.15;
  --leading-title: 1.3;
  --leading-body: 1.6;
  --leading-secondary: 1.5;
}

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-primary);
  font-size: var(--text-body); line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  text-rendering: optimizeLegibility;
  background: var(--color-background); color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  padding: 10px 16px; border-radius: 8px;
  background: var(--color-ink); color: var(--color-on-primary); text-decoration: none;
  font-size: var(--text-small); font-weight: var(--weight-medium);
}
.skip-link:focus { top: 12px; }
.cta-banner a:focus-visible { outline-color: var(--color-on-primary); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px;
}
.bio a:focus-visible, footer a:focus-visible, .idea-feature:focus-visible {
  outline-color: var(--color-accent-light);
}

/* COMPONENTS */
.sec-label {
  display: flex; align-items: center; gap: 14px;
  justify-content: center;
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-primary); margin-bottom: 32px;
}
.sec-label::before {
  content: ''; width: 28px; height: 2.5px;
  background: var(--color-primary); flex-shrink: 0;
}
.btn-fill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 8px;
  background: var(--color-primary); color: var(--color-on-primary);
  font-size: var(--text-small); font-weight: var(--weight-medium);
  text-decoration: none; border: none; cursor: pointer;
  transition: background 0.2s;
}
.btn-fill:hover { background: var(--color-primary-hover); }
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 8px;
  background: transparent; color: var(--color-ink);
  font-size: var(--text-small); font-weight: var(--weight-medium);
  text-decoration: none; cursor: pointer;
  border: 1.5px solid rgba(var(--line-rgb),0.18);
  transition: border-color 0.2s;
}
.btn-outline:hover { border-color: var(--color-ink); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 48px; }

/* ═══ NAV ═══ */
nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-nav-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(var(--line-rgb),0.06);
}
.nav-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 48px;
  display: flex; justify-content: space-between; align-items: center;
  height: 64px;
}
.nav-left { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-mark {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--color-ink); color: var(--color-background);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px;
}
.nav-name { font-weight: 600; font-size: 16px; }
.nav-logo { display: block; height: 56px; width: auto; object-fit: contain; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
  font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--color-ink);
  text-decoration: none; transition: color 0.15s;
}
.nav-links a:hover { color: var(--color-primary); }
.nav-links-cta { display: none; }
.nav-toggle {
  display: none; align-items: center;
  padding: 9px 16px; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--color-ink);
  border: 1.5px solid rgba(var(--line-rgb),0.18);
  font: inherit; font-size: var(--text-small); font-weight: var(--weight-medium);
}
.nav-toggle[hidden] { display: none !important; }
.nav-sub {
  padding: 10px 20px; border-radius: 8px;
  background: var(--color-primary); color: var(--color-on-primary);
  font-size: var(--text-small); font-weight: var(--weight-medium);
  text-decoration: none; transition: background 0.2s;
}
.nav-sub:hover { background: var(--color-primary-hover); }

/* ═══ HERO ═══ */
.hero {
  padding: 80px 0 100px;
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px; align-items: center;
}
.hero-label {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-primary); margin-bottom: 28px;
}
.hero-label span:nth-child(even) { color: var(--color-text-subtle); }
.hero h1 br { display: none; }
.hero-name {
  display: block;
  font-weight: var(--weight-semibold); font-size: var(--text-display);
  line-height: var(--leading-display); letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}
.hero-tag {
  display: block;
  font-weight: var(--weight-medium); font-size: var(--text-subdisplay);
  line-height: 1.2; letter-spacing: -0.02em; margin-top: 20px;
}
.hero-tag .hl { color: var(--color-primary); }
.hero-sub {
  font-size: var(--text-body); font-weight: var(--weight-regular); line-height: 1.7;
  color: var(--color-ink); margin-top: 28px; max-width: 560px;
}
.hero-thesis {
  margin-top: 24px; padding-top: 24px; max-width: 560px;
  border-top: 1px solid rgba(var(--line-rgb),0.1);
  font-weight: var(--weight-medium);
  font-size: var(--text-title); line-height: 1.45; letter-spacing: var(--tracking-title);
  color: var(--color-ink);
}
.hero-ctas { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; justify-content: flex-start; }
.hero-photo-wrap {
  position: relative; justify-self: center;
}
.hero-photo {
  width: 100%; max-width: 420px;
  border-radius: 16px; overflow: hidden;
  border: 5px solid var(--color-primary);
  box-shadow: 0 24px 60px rgba(var(--line-rgb),0.12);
}
.hero-photo img {
  width: 100%; display: block;
  height: auto; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 20%;
}
.hero-photo-label {
  text-align: center; margin-top: 16px;
  font-size: var(--text-label); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ═══ VENTURES ═══ */
.ventures { padding: 80px 0 88px; }
.ventures-head {
  font-weight: var(--weight-medium);
  font-size: var(--text-heading); line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin-bottom: 12px; text-align: center;
}
.ventures-sub {
  font-size: var(--text-body); line-height: var(--leading-body);
  color: var(--color-text-muted); margin-bottom: 48px; text-align: center;
}
.ventures-sub a { color: var(--color-primary); text-decoration: none; }
.v-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.v-card {
  background: var(--color-surface); border-radius: 14px;
  padding: 32px 28px; text-decoration: none; color: inherit;
  transition: box-shadow 0.2s, transform 0.15s;
  display: flex; flex-direction: column; min-height: 170px;
  box-shadow: inset 0 0 0 1px var(--color-card-border);
}
.v-card:hover {
  box-shadow: inset 0 0 0 1px var(--color-card-border), 0 8px 32px rgba(var(--line-rgb),0.08);
  transform: translateY(-2px);
}
.v-type {
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-primary); margin-bottom: 14px;
}
.v-card h3 {
  font-weight: var(--weight-semibold);
  font-size: var(--text-title); line-height: var(--leading-title);
  letter-spacing: var(--tracking-title); margin-bottom: 8px;
}
.v-card p {
  font-size: var(--text-body); color: var(--color-text-muted);
  line-height: 1.55; flex-grow: 1;
}
.v-card .v-link {
  margin-top: 16px; font-size: var(--text-secondary); font-weight: var(--weight-medium);
  color: var(--color-primary);
}

/* Portfolio themes: a key above the grid, not new sections */
.v-themes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin: -16px 0 40px; padding: 24px 0;
  border-top: 1px solid rgba(var(--ink-rgb),0.08); border-bottom: 1px solid rgba(var(--ink-rgb),0.08);
}
.v-theme dt {
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-ink); margin-bottom: 8px;
}
.v-theme dd {
  font-size: var(--text-secondary); line-height: var(--leading-secondary); color: var(--color-text-muted);
}
.v-theme .v-theme-ventures { margin-top: 8px; color: var(--color-primary); font-weight: var(--weight-medium); }

/* ═══ EDITORIAL PHOTOGRAPHY ═══ */
/* Original photographs, no filters or overlays. Crops are CSS-only;
   the image files keep their native proportions. */
.photo { margin: 0; }
.photo img {
  display: block; width: 100%; height: auto;
  object-fit: cover; border-radius: 14px;
  background: var(--color-surface-secondary);
}
.photo--portfolio { margin-bottom: 40px; }
.photo--portfolio img { aspect-ratio: 2.8 / 1; object-position: 50% 25%; }
.photo--speaking img { aspect-ratio: 16 / 10; object-position: 50% 12%; }
.photo--about img { aspect-ratio: 1 / 1; object-position: 50% 50%; }
.photo--speaking-hero img { aspect-ratio: 1440 / 1548; }
.photo--formats { margin: 0 0 40px 288px; }
.photo--formats img { aspect-ratio: 2.2 / 1; object-position: 50% 20%; }
.photo--inquire img { aspect-ratio: 1610 / 2048; }
.speaking-aside { display: flex; flex-direction: column; gap: 16px; }
.photo figcaption {
  margin-top: 10px; font-size: var(--text-small);
  line-height: var(--leading-secondary); color: var(--color-text-muted);
}
.photo--speaking-hero img { aspect-ratio: 4 / 3; }
.photo--engagements { margin: 0 0 24px 288px; max-width: 600px; }
.photo--engagements img { aspect-ratio: 16 / 9; object-position: 50% 45%; }

/* Press: the text-only lead entry spans the grid; photographs sit beneath each entry's description */
.press-card.press-card--lead {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 48px; align-items: start;
}
.press-card--lead > :not(blockquote) { grid-column: 1; }
.press-card--lead blockquote { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin-top: 0; }
.photo--press { margin-top: 20px; }
.photo--press img { border-radius: 8px; }
.photo--press img { aspect-ratio: 4 / 3; }
.photo--gateway-gala img { object-position: 50% 62%; }
.photo--forty-under-forty img { object-position: 50% 14%; }
.photo--havana-square img { object-position: 55% 50%; }
.photo--morning-headlines img { object-position: 50% 45%; }


/* ═══ IDEAS ═══ */
.ideas { padding: 72px 0 88px; }
.ideas-head {
  font-weight: var(--weight-medium);
  font-size: var(--text-heading); line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin-bottom: 12px; text-align: center;
}
.ideas-sub { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text-muted); margin-bottom: 48px; text-align: center; }
.ideas-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.idea-card {
  background: var(--color-surface); border-radius: 14px;
  padding: 32px 28px; text-decoration: none; color: inherit;
  transition: box-shadow 0.2s;
  box-shadow: inset 0 0 0 1px var(--color-card-border);
}
.idea-card:hover { box-shadow: inset 0 0 0 1px var(--color-card-border), 0 8px 32px rgba(var(--line-rgb),0.08); }
.idea-icon {
  font-size: 20px; margin-bottom: 16px;
  color: var(--color-primary);
}
.idea-card h3 {
  font-weight: var(--weight-semibold);
  font-size: var(--text-title); line-height: var(--leading-title);
  letter-spacing: var(--tracking-title); margin-bottom: 6px;
}
.idea-card .idea-sub {
  font-size: var(--text-secondary); font-weight: var(--weight-medium);
  color: var(--color-primary); margin-bottom: 12px;
}
.idea-card p { font-size: var(--text-secondary); color: var(--color-text-muted); line-height: var(--leading-secondary); }
.idea-card .idea-link {
  display: inline-block; margin-top: 16px;
  font-size: var(--text-secondary); font-weight: var(--weight-medium); color: var(--color-primary);
}

/* Featured publication: leads the Ideas section */
.idea-feature {
  background: var(--color-dark-elevated); color: var(--color-text-inverse);
  border-radius: 14px; padding: 48px 48px 44px; margin-bottom: 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 48px; align-items: end;
}
.idea-feature-label {
  grid-column: 1 / -1; margin-bottom: 20px;
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-accent-light);
}
.idea-feature h3 {
  font-weight: var(--weight-medium); font-size: var(--text-heading);
  line-height: var(--leading-heading); letter-spacing: var(--tracking-heading);
  color: var(--color-text-inverse-strong);
}
.idea-feature-tag {
  margin-top: 12px; font-size: var(--text-body); font-weight: var(--weight-medium);
  color: var(--color-accent-light-2);
}
.idea-feature-desc {
  grid-column: 2; grid-row: 2 / span 2; align-self: end;
  font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text-inverse-muted);
}
.idea-feature-link {
  grid-column: 2; margin-top: 24px; justify-self: start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 8px;
  background: var(--color-feature-cta-bg); color: var(--color-feature-cta-text); text-decoration: none;
  font-size: var(--text-secondary); font-weight: var(--weight-medium);
  transition: background 0.2s;
}
.idea-feature-link:hover { background: var(--color-feature-cta-hover); }
a.idea-feature { text-decoration: none; transition: background 0.2s; }
a.idea-feature:hover { background: var(--color-dark-elevated-hover); }
a.idea-feature:hover .idea-feature-link { background: var(--color-feature-cta-hover); }

/* ═══ PRESS ═══ */
.press { padding: 72px 0 88px; }
.press-head {
  font-weight: var(--weight-medium);
  font-size: var(--text-heading); line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin-bottom: 12px; text-align: center;
}
.press-sub { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text-muted); margin-bottom: 48px; text-align: center; }
.press-sub a { color: var(--color-primary); text-decoration: none; font-weight: var(--weight-medium); }
.press-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.press-card {
  background: var(--color-surface); border-radius: 14px;
  padding: 32px 28px; text-decoration: none; color: inherit;
  transition: box-shadow 0.2s;
  display: flex; flex-direction: column;
  box-shadow: inset 0 0 0 1px var(--color-card-border);
}
.press-card:hover { box-shadow: inset 0 0 0 1px var(--color-card-border), 0 8px 32px rgba(var(--ink-rgb),0.06); }
a.press-card { text-decoration: none; color: inherit; }
a.press-card:hover { transform: translateY(-2px); }
.talk-item a:hover h3 { color: var(--color-primary); }
.press-year {
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-primary); margin-bottom: 12px;
}
.press-card h3 {
  font-weight: var(--weight-semibold);
  font-size: var(--text-title); line-height: var(--leading-title);
  letter-spacing: var(--tracking-title); margin-bottom: 6px;
}
.press-outlet {
  font-size: var(--text-secondary); font-weight: var(--weight-medium);
  color: var(--color-text-muted); margin-bottom: 10px;
}
.press-card p { font-size: var(--text-secondary); color: var(--color-text-muted); line-height: var(--leading-secondary); flex-grow: 1; }
.press-card blockquote {
  margin-top: 14px; padding-left: 16px;
  border-left: 2px solid var(--color-primary);
  font-size: var(--text-secondary); font-style: italic;
  color: var(--color-ink); line-height: var(--leading-secondary);
}

/* ═══ SPEAKING ═══ */
.speaking { padding: 72px 0 60px; }
.speaking-head {
  font-weight: var(--weight-medium);
  font-size: var(--text-heading); line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin-bottom: 12px; text-align: center;
}
.speaking-sub { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text-muted); margin-bottom: 12px; text-align: center; }
.speaking-avail {
  font-size: var(--text-secondary); line-height: var(--leading-secondary); color: var(--color-ink);
  text-align: center; max-width: 560px; margin: 0 auto 48px;
}
.speaking-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.talks-list { list-style: none; }
.talk-item {
  padding: 20px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb),0.07);
}
.talk-item:first-child { border-top: 1px solid rgba(var(--ink-rgb),0.07); }
.talk-item h3 {
  font-weight: var(--weight-semibold); font-size: var(--text-body);
  line-height: var(--leading-title); letter-spacing: var(--tracking-title); margin-bottom: 4px;
}
.talk-meta {
  font-size: var(--text-secondary); color: var(--color-text-muted); line-height: var(--leading-secondary);
}
.topics-card {
  background: var(--color-surface); border-radius: 14px;
  padding: 32px 28px;
  box-shadow: inset 0 0 0 1px var(--color-card-border);
}
.topics-card h3 {
  font-weight: var(--weight-semibold); font-size: 20px;
  line-height: var(--leading-title); letter-spacing: -0.015em; margin-bottom: 24px;
}
.topic-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb),0.1);
}
.topic-item:first-of-type { border-top: 1px solid rgba(var(--ink-rgb),0.1); }
.topic-item h4 { font-weight: var(--weight-semibold); font-size: var(--text-secondary); line-height: var(--leading-title); margin-bottom: 2px; }
.topic-item p { font-size: var(--text-secondary); line-height: var(--leading-secondary); color: var(--color-text-muted); }
.topics-link {
  display: inline-block; margin-top: 24px;
  font-size: var(--text-secondary); font-weight: var(--weight-medium);
  color: var(--color-primary); text-decoration: none;
}

/* ═══ PRODUCTIONS ═══ */
.productions { padding: 40px 0 80px; }
.productions .sec-label { margin-bottom: 32px; }
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.prod-card {
  background: var(--color-surface); border-radius: 14px;
  padding: 32px 28px;
  box-shadow: inset 0 0 0 1px var(--color-card-border);
}
.prod-card h3 {
  font-weight: var(--weight-semibold);
  font-size: var(--text-title); line-height: var(--leading-title);
  letter-spacing: var(--tracking-title); margin-bottom: 6px;
}
.prod-card p { font-size: var(--text-secondary); color: var(--color-text-muted); line-height: var(--leading-secondary); }
.prod-credit {
  margin-top: 10px; font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-primary);
}

/* ═══ BIO (dark) ═══ */
.bio {
  background: var(--color-dark); color: var(--color-text-inverse);
  padding: 88px 0;
}
.bio-grid {
  display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  grid-template-areas: "body quote" "creds quote";
  column-gap: 64px; align-items: start; justify-content: center;
}
.bio-body { grid-area: body; }
.bio .sec-label { color: var(--color-accent-light); }
.bio .sec-label::before { background: var(--color-accent-light); }
.bio-head {
  font-weight: var(--weight-medium);
  font-size: var(--text-heading); line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin-bottom: 12px; text-align: center; color: var(--color-text-inverse);
}
.bio-sub {
  font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text-inverse-subtle);
  margin-bottom: 48px; text-align: center;
}
.bio-text {
  font-size: 17px; font-weight: var(--weight-regular);
  line-height: 1.65; color: var(--color-text-inverse-muted);
}
.bio-text + .bio-text { margin-top: 1em; }
.bio-sig {
  margin-top: 28px; padding-left: 16px;
  border-left: 2.5px solid var(--color-accent-light);
  font-size: 17px; font-weight: var(--weight-medium); line-height: 1.5;
  letter-spacing: var(--tracking-title); color: var(--color-text-inverse);
}
.bio-creds {
  grid-area: creds;
  margin-top: 36px; padding-top: 24px;
  border-top: 1px solid rgba(var(--inverse-rgb),0.08);
  display: flex; flex-direction: column; gap: 8px;
}
.bio-creds span {
  font-size: var(--text-secondary); color: var(--color-text-inverse-subtle);
  line-height: var(--leading-secondary);
}
.bio-creds strong { color: var(--color-text-inverse); font-weight: var(--weight-medium); }
.bio-creds .bio-more {
  margin-top: 12px; font-size: var(--text-secondary); font-weight: var(--weight-medium);
  color: var(--color-accent-light); text-decoration: none;
}
.bio-creds .bio-more:hover { color: var(--color-text-inverse); }
.bio-aside {
  grid-area: quote; align-self: start;
  display: flex; flex-direction: column; gap: 24px;
}
.bio-quote {
  padding: 32px;
  background: var(--color-dark-surface);
  border-radius: 14px;
}
.bio-quote blockquote {
  font-weight: var(--weight-medium); font-size: clamp(20px, 2vw, 26px);
  line-height: 1.3; letter-spacing: -0.02em; color: var(--color-text-inverse);
}
.bio-quote cite {
  display: block; margin-top: 16px;
  font-size: var(--text-label); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  font-style: normal;
  color: var(--color-text-inverse-faint);
}

/* ═══ CTA BANNER ═══ */
.cta-banner {
  background: var(--color-cta-bg);
  padding: 80px 0; text-align: center;
}
.cta-banner h2 {
  font-weight: var(--weight-medium);
  font-size: clamp(32px, 4vw, 48px); line-height: var(--leading-heading);
  letter-spacing: -0.03em;
  color: var(--color-on-primary); margin-bottom: 12px;
}
.cta-banner p {
  font-size: var(--text-body); color: var(--color-cta-text);
  margin-bottom: 32px;
}
.cta-banner .btn-white {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 34px; border-radius: 8px;
  background: var(--color-cta-button-bg); color: var(--color-cta-button-text);
  font-size: var(--text-secondary); font-weight: var(--weight-semibold);
  text-decoration: none; transition: transform 0.15s, background 0.15s;
}
.cta-banner .btn-white:hover { transform: translateY(-1px); background: var(--color-on-primary); }

/* ═══ FOOTER ═══ */
footer {
  background: var(--color-dark); padding: 56px 0 40px;
  color: var(--color-text-inverse-subtle);
}
.footer-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.footer-brand .nav-mark { width: 28px; height: 28px; font-size: 12px; border-radius: 6px; }
.footer-brand span { font-weight: 600; font-size: 15px; color: var(--color-text-inverse); }
.footer-logo { display: block; height: 48px; width: auto; object-fit: contain; }
.footer-desc { font-size: var(--text-secondary); line-height: var(--leading-secondary); color: var(--color-text-inverse-subtle); }
.footer-col h2 {
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-inverse-subtle); margin-bottom: 16px;
}
.footer-col a {
  display: block; font-size: var(--text-secondary); color: var(--color-accent-light);
  text-decoration: none; margin-bottom: 10px;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--color-text-inverse); }
.footer-bottom {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(var(--inverse-rgb),0.06);
  display: flex; justify-content: space-between;
  font-size: var(--text-small); color: var(--color-text-inverse-fainter);
}

/* ═══ INNER PAGES (speaking, archive) ═══ */
.page-hero { padding: 88px 0 56px; border-bottom: 1px solid rgba(var(--ink-rgb),0.08); }
.page-hero .hero-label { margin-bottom: 24px; }
.page-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  column-gap: 64px; align-items: center;
}
.page-body.inquire-grid {
  max-width: none; display: grid;
  grid-template-columns: minmax(0, 1fr) 260px; column-gap: 48px; align-items: start;
}
.page-title {
  font-weight: var(--weight-semibold); font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02; letter-spacing: var(--tracking-display); max-width: 900px;
}
.page-sub {
  margin-top: 20px; max-width: 640px;
  font-size: var(--text-subdisplay); font-weight: var(--weight-medium);
  line-height: 1.25; letter-spacing: -0.02em; color: var(--color-ink);
}
.page-intro {
  margin-top: 28px; max-width: 640px;
  font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text-muted);
}
.page-section { padding: 72px 0; border-bottom: 1px solid rgba(var(--ink-rgb),0.08); }
.page-section:last-of-type { border-bottom: none; }
.page-section-head {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 48px;
  margin-bottom: 40px;
}
.page-section-head .sec-label { justify-content: flex-start; margin-bottom: 0; padding-top: 10px; }
.page-section-head h2 {
  font-weight: var(--weight-medium); font-size: var(--text-heading);
  line-height: var(--leading-heading); letter-spacing: var(--tracking-heading);
}
.page-body { margin-left: 288px; max-width: 720px; }

.topic-list { list-style: none; counter-reset: topic; margin-left: 288px; }
.topic-row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px;
  padding: 28px 0; border-top: 1px solid rgba(var(--ink-rgb),0.1);
}
.topic-row:last-child { border-bottom: 1px solid rgba(var(--ink-rgb),0.1); }
.topic-row::before {
  counter-increment: topic; content: counter(topic, decimal-leading-zero);
  font-size: var(--text-small); font-weight: var(--weight-medium);
  color: var(--color-primary); padding-top: 4px;
}
.topic-row h3 {
  font-weight: var(--weight-semibold); font-size: 22px;
  line-height: var(--leading-title); letter-spacing: -0.015em; margin-bottom: 10px;
}
.topic-row .topic-lead { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-ink); }
.topic-row .topic-detail { margin-top: 8px; font-size: var(--text-secondary); line-height: var(--leading-secondary); color: var(--color-text-muted); max-width: 640px; }

.list-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; margin-left: 288px; }
.list-cols h3 {
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-primary); margin-bottom: 16px;
}
.plain-list { list-style: none; }
.plain-list li {
  padding: 12px 0; border-top: 1px solid rgba(var(--ink-rgb),0.08);
  font-size: var(--text-body); line-height: var(--leading-title);
}
.plain-list li:last-child { border-bottom: 1px solid rgba(var(--ink-rgb),0.08); }

.page-body p { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text-muted); }
.page-body p + p { margin-top: 1em; }
.page-body .btn-fill, .page-body .btn-outline { margin-top: 24px; }
.page-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.inquiry-fields { list-style: none; margin-top: 20px; columns: 2; column-gap: 32px; }
.inquiry-fields li { font-size: var(--text-secondary); color: var(--color-ink); padding: 4px 0; break-inside: avoid; }
.inquiry-fields li::before { content: "— "; color: var(--color-primary); }
.page-note { margin-top: 20px; font-size: var(--text-secondary); color: var(--color-text-muted); }
.page-body a:not([class]) { color: var(--color-primary); font-weight: var(--weight-medium); text-decoration: none; }
.about-thesis { margin-top: 24px; font-weight: var(--weight-medium); color: var(--color-ink); font-size: var(--text-title); }
.page-body .plain-list li strong { font-weight: var(--weight-semibold); }
/* Draft-only markers (place-capital/ is noindex until approved) */
.draft-banner { background: var(--color-surface-secondary); color: var(--color-ink); padding: 12px 24px; text-align: center; font-size: var(--text-small); font-weight: var(--weight-medium); }
.draft-placeholder { font-style: italic; color: var(--color-text-muted); }

.archive-grid { margin-left: 288px; }
.archive-grid .press-grid { grid-template-columns: 1fr; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
  .nav-inner { padding: 0 24px; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-inner { position: relative; gap: 12px; }
  .nav-left { margin-right: auto; }
  .nav-links.is-open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 8px 24px 20px;
    background: var(--color-background); border-bottom: 1px solid rgba(var(--line-rgb),0.1);
    box-shadow: 0 16px 32px rgba(var(--ink-rgb),0.08);
  }
  .nav-links.is-open a {
    display: block; padding: 14px 0; font-size: var(--text-body);
    color: var(--color-ink); border-bottom: 1px solid rgba(var(--line-rgb),0.06);
  }
  .nav-logo { height: 48px; }
  .hero { padding: 48px 0 64px; }
  :root { --text-display: clamp(48px, 8.8vw, 70px); }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero-photo-wrap { order: -1; justify-self: center; }
  .hero-photo { max-width: 280px; }
  .hero-label { justify-content: center; }
  .hero-sub, .hero-thesis { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .v-grid { grid-template-columns: 1fr 1fr; }
  .ideas-grid { grid-template-columns: 1fr; }
  .v-themes { grid-template-columns: 1fr; gap: 20px; margin-top: -8px; }
  .idea-feature { grid-template-columns: minmax(0, 1fr); padding: 36px 28px; }
  .idea-feature-desc, .idea-feature-link { grid-column: 1; grid-row: auto; margin-top: 20px; }
  .page-hero { padding: 56px 0 40px; }
  .page-section { padding: 56px 0; }
  .page-section-head { grid-template-columns: minmax(0, 1fr); row-gap: 12px; margin-bottom: 28px; }
  .page-body, .topic-list, .list-cols, .archive-grid { margin-left: 0; }
  .photo--portfolio img, .photo--formats img { aspect-ratio: 2 / 1; }
  .photo--speaking, .photo--about { width: 100%; max-width: 560px; margin-inline: auto; }
  .photo--formats, .photo--engagements { margin-left: 0; }
  .page-hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .photo--speaking-hero { max-width: 520px; }
  .page-body.inquire-grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .photo--inquire { max-width: 320px; }
  .bio-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "body" "quote" "creds";
    max-width: 640px; margin: 0 auto;
  }
  .bio-aside { margin-top: 36px; }
  .bio-quote { padding: 28px; }
  .photo--about { order: -1; }
  .photo--about img { aspect-ratio: 4 / 3; }
  .bio-sub { margin-bottom: 36px; }

  .speaking-split { grid-template-columns: 1fr; }
  .prod-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .nav-logo { height: 44px; }
  .nav-sub { display: none; }
  .nav-links-cta { display: block; }
  .nav-links.is-open .nav-links-cta a { color: var(--color-primary); border-bottom: none; }
  .bio { padding: 72px 0; }
  .bio-text { font-size: var(--text-body); line-height: var(--leading-body); }
  .bio-sig { font-size: 16px; }
  .v-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .cta-banner { padding: 56px 0; }
  .list-cols { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  /* Press: one column on phones; the lead card stacks its quote */
  .press-grid { grid-template-columns: 1fr; }
  .press-card.press-card--lead { display: flex; }
  .press-card--lead blockquote { margin-top: 14px; }
  .photo--portfolio img, .photo--formats img { aspect-ratio: 3 / 2; }
  .inquiry-fields { columns: 1; }
  .topic-row { grid-template-columns: 36px minmax(0, 1fr); }
  .topic-row h3 { font-size: 19px; }
}
