/* ==========================================================================
   chrisheaslip.com — static rebuild of the original hosted-theme site (Brine family)
   archived 8 Apr 2025. Values below were measured from the archived page at
   1280 px and 390 px and from the original theme CSS (kept in source/ for reference).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* FONTS
     The original used Google Fonts Montserrat + Rubik (exact matches here) and
     Adobe Fonts proxima-nova + futura-pt (stand-ins here).
     To switch to an Adobe Fonts kit later: add the kit <link> in the page <head>,
     then change ONE line each below, e.g.
       --font-proxima: "proxima-nova", "Montserrat", Arial, sans-serif;
       --font-futura:  "futura-pt", "Jost", Arial, sans-serif;               */
  --font-proxima: "Montserrat", "Helvetica Neue", Arial, sans-serif;   /* stand-in for proxima-nova (site title, nav, card titles) */
  --font-futura: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif; /* stand-in for futura-pt (Media page date lines) */
  --font-montserrat: "Montserrat", Arial, Helvetica, sans-serif;       /* body copy, h2, tagline, footer (exact) */
  --font-rubik: "Rubik", "Helvetica Neue", Arial, sans-serif;          /* outlined buttons (exact) */
  --font-body: var(--font-montserrat);

  --color-text: #000;
  --color-bg: #fff;
  --color-rule: #000;
  --color-muted: rgba(0, 0, 0, .4);
  --color-btn-solid: #080808;   /* image-block button (collage) */
  --color-btn-dark: #272727;    /* generic .sqs-block-button-element */
  --color-field-border: rgba(0, 0, 0, .12);

  /* Page gutters (Index-page-content / Header-inner / Footer-inner) */
  --page-pad: 100px;
  --page-max: 1920px;
  --col-gutter: 34px;           /* original theme grid gutter (2 x 17px) */

  /* Archive setting tweak-site-border-show was OFF; set to 10px to enable a site border. */
  --site-border-width: 0px;

  /* Gallery: the archived gallery block used 6 thumbnails per row. */
  --gallery-columns: 6;
  --gallery-gap: 20px;
}

@media (max-width: 1024px) { :root { --page-pad: 64px; } }
@media (max-width: 960px)  { :root { --page-pad: 48px; } }
@media (max-width: 768px)  { :root { --page-pad: 36px; } }
@media (max-width: 640px)  { :root { --page-pad: 20px; --gallery-columns: 2; } }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 1.8;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

p { margin: 0 0 1em; }

h1, h2, h3 { margin: 0; font-weight: 400; }

ul { margin: 0; padding: 0; list-style: none; }

figure, blockquote { margin: 0; }

hr,
.rule {
  display: block;
  height: 1px;
  margin: 0;
  border: 0;
  background-color: var(--color-rule);
  color: var(--color-rule);
}

:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: .75em 1.25em;
  background: #000;
  color: #fff;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.site { border: var(--site-border-width) solid #fff; }

.container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 1em 2.5em;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: .1em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity .15s ease-out;
}
.btn:hover { opacity: .8; }

/* Solid black: project card button (image block "collage" button) */
.btn--solid {
  background-color: var(--color-btn-solid);
  color: #fff;
  font-family: var(--font-montserrat);
  font-weight: 700;
}

/* Outlined: explore-card READ MORE (image block "card" button) */
.btn--outline {
  border: 2px solid #000;
  background-color: transparent;
  color: #000;
  font-family: var(--font-rubik);
  font-weight: 400;
}

/* Generic dark button (.sqs-block-button-element) for Phase 2 pages */
.btn--dark {
  background-color: var(--color-btn-dark);
  color: #fff;
  font-family: var(--font-rubik);
  font-weight: 400;
  letter-spacing: .15em;
}

/* --------------------------------------------------------------------------
   4. Header (shared shell)
   -------------------------------------------------------------------------- */
.site-header {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  background: #fff;
}

.site-header__top { position: relative; padding: 25px 0 24px; }

/* Social icons, top right of the header (archive: two 30x30 links at x=1114, y=22 at 1280 px).
   Absolutely positioned so the nav row and everything below keep their measured geometry. */
.site-social {
  position: absolute;
  top: 22px;
  right: -3px;          /* right icon ends 3 px past the content edge, as archived (x=1138-1168 at 1280 px) */
  display: flex;
}
.site-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #000;
  transition: opacity .15s ease-out;
}
.site-social__link:hover { opacity: .6; }
.site-social__icon { display: block; width: 18px; height: 18px; fill: currentColor; }

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1.26em;
  font-family: var(--font-proxima);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
}

.site-nav__link {
  display: inline-block;
  margin: 0 1.26em;
  padding: .618em 0;
  color: #000;
  transition: color 170ms ease-in-out;
}
/* "spotlight" hover: the other items fade */
.site-nav__list:hover .site-nav__link { color: var(--color-muted); }
.site-nav__list:hover .site-nav__link:hover,
.site-nav__link:focus-visible { color: #000; }
.site-nav__link[aria-current="page"] { color: #000; }

.site-header__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 50px 0 10px;
}

.site-branding {
  grid-column: 2;
  text-align: center;
}

.site-title {
  margin: 0;
  font-family: var(--font-proxima);
  font-size: 42px;      /* archive: proxima-nova 45px/.05em; Montserrat is wider, so 42px/.03em keeps the same 341px title width */
  font-weight: 400;
  letter-spacing: .03em;
  line-height: .857;    /* 36px line box, as archived */
  text-transform: uppercase;
  white-space: nowrap;
}
.site-title a { color: #000; }

.site-tagline {
  max-width: 40em;
  margin: 20px auto 0;
  font-family: var(--font-montserrat);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. Index sections (homepage)
   -------------------------------------------------------------------------- */
.index-section { padding: 60px 0; }

.section-heading,
.quote__text {
  font-family: var(--font-montserrat);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1.4;
}

/* 5.1 Collage image block (feature + project) ----------------------------- */
/* Archived geometry ("collage" design, not narrow): image = 75% of the block,
   card = 37% of the block overlapping the image by 12%, card offset 15% of the
   block width from the top, card padding 5.5% of the block width.            */
.feature-col { width: calc((100% + var(--col-gutter)) * 11 / 12 - var(--col-gutter)); }

.collage {
  position: relative;
  display: grid;
  align-items: start;
  container-type: inline-size;
}
.collage--image-right { grid-template-columns: 25% 12% 63%; }
/* Image only (homepage hero since 1 Nov 2026): no card, so no grid columns; the image
   fills .feature-col at every width. Beats the phone rule .collage__media { width: 90% }. */
.collage--image-only { display: block; }
.collage--image-only .collage__media { width: 100%; }

.collage__media { grid-row: 1; }
.collage--image-right .collage__media { grid-column: 2 / 4; }
.collage__media img { width: 100%; }

/* Removed 1 Nov 2026 (no page uses them): .collage--image-left, .collage__card, .collage__title, .collage__text, .collage__action. */

/* 5.2 Project section rule ------------------------------------------------ */
.rule--after-project { margin: 41px 0 24px; }

/* 5.3 Quote --------------------------------------------------------------- */
.quote__intro {
  margin: 0 0 25px;
  font-size: 15px;
  line-height: 27px;
}
.quote__text { text-align: center; }
.quote__text p { margin: 0; }

.rule--after-quote { margin: 162px 0 0; }

/* 5.4 Bio ----------------------------------------------------------------- */
.bio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--col-gutter);
  margin-top: 41px;
}
.bio p { margin: 0; }

/* 5.5 Explore cards (image block "card" design, image left) ------------- */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gutter);
  margin-top: 102px;
}
/* One card (since 1 Nov 2026): the column width it had in the two-card grid, centred.
   At 768 px and below the one-column .cards rule in section 8 still applies (it comes later). */
.cards--single {
  grid-template-columns: minmax(0, calc(50% - var(--col-gutter) / 2));
  justify-content: center;
}

.card {
  display: flex;
  align-items: flex-start;
}
.card__media { flex: 0 0 40%; }
.card__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.card__body {
  flex: 0 0 60%;
  align-self: center;
  padding: 7.26%;     /* 12.1% of the 60% text column */
  background: #fff;
}

.card__title {
  font-family: var(--font-proxima);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.card__text {
  margin: 6px 0 0;
  font-family: var(--font-montserrat);
  font-size: 13px;
  letter-spacing: .02em;
  line-height: 1.6;
}

.card__action { margin: 19px 0 0; line-height: 1; }

.index-section--explore { padding-bottom: 77px; }

/* 5.6 Podcasts ------------------------------------------------------------ */
.podcasts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gutter);
  align-items: start;
  margin-top: 34px;
}
.podcasts--stack { grid-template-columns: 1fr; }
.podcast-embed { display: block; border: 0; }

/* 5.8 Gallery ------------------------------------------------------------- */
.gallery { padding: 47px 0 0; }
.rule--before-gallery { margin: 0 0 41px; }

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr));
  gap: var(--gallery-gap);
}
.gallery__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 5.9 Contact (moved from the former Contact page, 1 Nov 2026) ----------- */
/* Last homepage section, under the gallery. Top padding = the footer's top padding (77 px here,
   64 px at 1024 px and 57 px at 640 px, set in section 8), which was the gap below the gallery
   before this section existed, so gallery, Contact and footer keep one rhythm. The text reuses
   .prose (Rubik 300, 16 px / 1.8, as on the inner pages); its links reuse the underline rule in
   section 6. */
.index-section--contact { padding: 77px 0 0; }
.index-section--contact .section-heading { margin: 0 0 .6em; }
.contact__text { max-width: 760px; }   /* the inner pages' reading measure (.page-column), left-aligned */
.contact__text p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   6. Generic page content (Phase 2 pages: About, Media, 404)
   -------------------------------------------------------------------------- */
.page-content { padding: 80px 0; }
.page-content h2,
.page-title {
  font-family: var(--font-montserrat);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1.4;
  margin: 0 0 .6em;
}
.page-content h3 {
  font-family: var(--font-proxima);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.2;
  margin: 1.4em 0 .6em;
}
.page-content p a,
.page-content li a,
.index-section--contact .prose p a {
  padding-bottom: .05em;
  border-bottom: 1px solid rgba(0, 0, 0, .3);
  transition: border-color .15s ease-out, color .15s ease-out;
}
.page-content p a:hover,
.page-content li a:hover,
.index-section--contact .prose p a:hover { color: rgba(0, 0, 0, .6); border-color: rgba(0, 0, 0, .15); }

/* --------------------------------------------------------------------------
   7. Footer (shared shell)
   -------------------------------------------------------------------------- */
.site-footer { padding: 77px 0 80px; }

.footer-nav { text-align: center; }
.footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-montserrat);
  font-size: 12px;
  letter-spacing: .2em;
  line-height: 2;
  text-transform: uppercase;
}
.footer-nav__list li { padding: 0 .5em; }
.footer-nav__link { color: #000; transition: color .15s ease-out; }
.footer-nav__link:hover { color: rgba(0, 0, 0, .5); }

.site-footer__copyright {
  margin: 40px 0 0;
  font-size: 15px;
  line-height: 27px;
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .site-footer { padding-top: 64px; padding-bottom: 64px; }
  .index-section--contact { padding-top: 64px; }
}

@media (max-width: 900px) {
  .site-title { font-size: 38px; }
}

@media (max-width: 768px) {
  .cards { grid-template-columns: 1fr; }
  .podcasts { grid-template-columns: 1fr; gap: 43px; }
  .podcast-embed { max-width: 660px; }
}

@media (max-width: 640px) {
  /* Header: no hamburger; nav wraps centred above the title */
  .site-header__top { padding: 20px 0 0; }
  .site-nav__list { justify-content: center; margin: 0 -.9em; }
  .site-nav__link { margin: 0 .9em; }
  .site-social { position: static; justify-content: center; margin-top: 12px; }

  .site-header__bottom {
    display: block;
    padding: 30px 0 0;
    text-align: center;
  }
  .site-title { font-size: clamp(26px, 8.2vw, 38px); white-space: normal; }
  .site-tagline { margin-top: 16px; font-size: 11px; line-height: 1.6; }

  .index-section { padding: 60px 0; }
  .index-section--feature { padding-top: 50px; }
  /* .index-section--project removed 1 Nov 2026: section 2 is now .index-section--companies (block 10). */
  .index-section--contact { padding: 57px 0 0; }
  .feature-col { width: 100%; }

  /* Collage "narrow" mode: image 90% wide, card 90% wide pulled up over it */
  .collage { display: block; }
  .collage__media { width: 90%; }
  .collage--image-right .collage__media { margin-left: 10%; }
  /* Removed 1 Nov 2026 (no page uses them): phone .collage__card, .collage--image-left .collage__card, .collage__title, .collage__text. */

  .quote__text { font-size: 28px; letter-spacing: 0; }
  .rule--after-quote { margin-top: 100px; }

  .bio { grid-template-columns: 1fr; row-gap: 34px; }
  .cards { margin-top: 68px; }

  /* Card "narrow" mode: image full width, text below */
  .card { display: block; }
  .card__body { padding: 12.1%; }
  .card__title { font-size: 16px; }
  .card__text { font-size: 16px; line-height: 1.6; margin-top: 8px; }
  .card__action { margin-top: 22px; }

  .section-heading { font-size: 28px; letter-spacing: 0; }

  .site-footer { padding: 57px 0 40px; }
  /* Taller touch targets on phones; same horizontal spacing as the li padding it replaces */
  .footer-nav__list li { padding: 0; }
  .footer-nav__link { display: inline-block; padding: .25em .5em; }
  .site-footer__copyright { margin-top: 20px; }
}

/* ==========================================================================
   9. Pages (Phase 2: About, Media, 404)
   Appended section. Everything above is the Phase 1 shell + homepage and is
   unchanged; page-specific rules live only here.
   ========================================================================== */

/* 9.1 Shared page layout -------------------------------------------------- */
/* Keep the hidden attribute winning over any display value set below. */
.page-content [hidden] { display: none !important; }

/* Reading column, centred inside .container (about 760 px, like the bio section's measure) */
.page-column {
  max-width: 760px;
  margin: 0 auto;
}

.page-content .page-title { margin: 0 0 40px; }

/* Long-form text: Rubik 300 body, Montserrat headings */
.prose {
  font-family: var(--font-rubik);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.8;
}
.prose p { margin: 0 0 1.4em; }
.prose strong { font-weight: 700; }

.page-content .prose h2 {
  margin: 2.2em 0 .7em;
  font-family: var(--font-montserrat);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1.4;
}
.page-content .prose h3 {
  margin: 1.8em 0 .6em;
  font-family: var(--font-montserrat);
  font-size: 18px;
  letter-spacing: .04em;
}

.prose ul,
.prose ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.prose ul { list-style: disc; }

.prose figure { margin: 0 0 2.2em; }
.prose blockquote p {
  margin: 0;
  font-family: var(--font-montserrat);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.5;
}
.prose figcaption {
  margin: .9em 0 0;
  font-family: var(--font-montserrat);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .2em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* Small uppercase meta line (Media page date lines): futura-pt stand-in, as archived */
.post-meta {
  font-family: var(--font-futura);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.6;
  text-transform: uppercase;
}
.page-content .post-meta a {
  padding: 0;
  border: 0;
  color: #000;
  transition: color .15s ease-out;
}
.page-content .post-meta a:hover { color: rgba(0, 0, 0, .5); }

/* Row of buttons (404) */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

/* 9.2 About --------------------------------------------------------------- */
.about__portrait {
  width: 320px;
  max-width: 100%;
  margin: 0 0 48px;
}
.about__portrait img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* 9.6 Responsive ---------------------------------------------------------- */
@media (max-width: 640px) {
  .page-content { padding: 48px 0 40px; }
  .page-content .page-title { margin-bottom: 28px; font-size: 26px; letter-spacing: .03em; }

  .about__portrait { width: 100%; margin-bottom: 36px; }

  .prose blockquote p { font-size: 21px; }
}

/* 9.7 Media ---------------------------------------------------------------- */
/* /media/: jump links, three featured players, then lists of appearances.
   Reuses .post-meta (small uppercase futura-pt stand-in) for each item's date line. */
.media__intro { margin: 0 0 32px; }
.media__intro p:last-child { margin-bottom: 0; }

.media-jump { margin: 0 0 8px; }
.media-jump__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1.26em;
  padding: 0;
  list-style: none;
  font-family: var(--font-proxima);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
}
.page-content .media-jump__link {
  display: inline-block;
  margin: 0 1.26em;
  padding: .618em 0 .45em;
  border: 0;
  border-bottom: 1px solid transparent;
  color: #000;
  transition: color 170ms ease-in-out, border-color 170ms ease-in-out;
}
.page-content .media-jump__link:hover { border-bottom-color: #000; }

.media-featured { margin: 40px 0 0; }
.media-featured .podcasts { margin-top: 24px; }

.media-section { margin: 64px 0 0; }
.page-content .media-section__title {
  margin: 0 0 18px;
  font-family: var(--font-montserrat);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1.4;
}
.media-section__lead {
  margin: 0 0 24px;
  font-family: var(--font-rubik);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.8;
}

.media-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-field-border);
}
.media-item {
  padding: 30px 0;
  border-bottom: 1px solid var(--color-field-border);
}
.media-item__meta { margin: 0 0 10px; }
.page-content .media-item__title {
  margin: 0 0 8px;
  font-family: var(--font-montserrat);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.4;
}
.page-content .media-item__title a {
  padding: 0;
  border: 0;
  color: #000;
  transition: color .15s ease-out;
}
.page-content .media-item__title a:hover { color: rgba(0, 0, 0, .6); }
.media-item__detail {
  margin: 0 0 12px;
  font-family: var(--font-rubik);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.7;
}
.media-item__links {
  margin: 0;
  font-family: var(--font-montserrat);
  font-size: 11px;
  letter-spacing: .17em;
  line-height: 2;
  text-transform: uppercase;
}
.page-content .media-item__links a {
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .25);
  color: #000;
  transition: border-color .15s ease-out, color .15s ease-out;
}
.page-content .media-item__links a:hover { border-bottom-color: #000; }

.media__note {
  margin: 56px 0 0;
  font-family: var(--font-rubik);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.8;
}

@media (max-width: 640px) {
  .media-jump__list { margin: 0 -.9em; }
  .page-content .media-jump__link { margin: 0 .9em; }
  .media-section { margin-top: 48px; }
  .media-item { padding: 24px 0; }
  .page-content .media-item__title { font-size: 18px; }
}

/* ==========================================================================
   10. Companies (1 Nov 2026): the header tagline (now the three roles), the
       homepage one-paragraph bio and Companies strip, and the /companies/ page.
       Appended; reuses the tokens and classes above.
   ========================================================================== */

/* 10.0 Header tagline: the new wording is about 630 px on one line, so the 40em (440 px) cap
   from section 4 is lifted and it stays on one line on desktop. Where it has to wrap
   (768 px and below) the lines get the phone line-height and an even break. */
.site-tagline { max-width: none; }
@media (max-width: 768px) {
  .site-tagline { line-height: 1.6; text-wrap: balance; }
}

/* 10.1 Small uppercase label line: a company's role (homepage cards, /companies/) and a
   talk's event (/speaking/). Same type as .media-item__links; Montserrat, not the Jost
   date-line face, which stays on the Media page only. */
.item-label {
  margin: 0;
  font-family: var(--font-montserrat);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .17em;
  line-height: 2;
  text-transform: uppercase;
}

/* 10.2 Homepage bio: one paragraph since 1 Nov 2026 (was two side by side). One centred
   column at the inner pages' reading measure (760 px), not the left half of the grid. */
.bio {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}

/* 10.3 Homepage Companies strip (section 2; replaced the Leadr project collage).
   Three text-only cards on the .cards grid, each under a black rule like the section rules. */
.index-section--companies .section-heading { margin: 0; }
.cards--companies {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 34px;
}
.card--company {
  display: block;
  padding-top: 22px;
  border-top: 1px solid var(--color-rule);
}
.card--company .card__body { padding: 0; background: transparent; }
.card--company .item-label { margin-top: 4px; }
.card--company .card__text { margin-top: 8px; }
.card--company .card__title a {
  padding-bottom: .05em;
  border-bottom: 1px solid rgba(0, 0, 0, .3);
  transition: border-color .15s ease-out, color .15s ease-out;
}
.card--company .card__title a:hover { color: rgba(0, 0, 0, .6); border-color: rgba(0, 0, 0, .15); }
.companies__more { margin: 40px 0 0; line-height: 1; }

/* 10.4 /companies/: the Founded list reuses .media-list / .media-item from 9.7 */
.companies__section { margin-top: 0; }
.media-item .item-label { margin: 0 0 8px; }
.companies .media-item__detail { margin-bottom: 0; }

@media (max-width: 768px) {
  .cards--companies { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .index-section--companies { padding-top: 17px; }   /* as the project section it replaced */
  .cards--companies { margin-top: 28px; row-gap: 28px; }   /* card type sizes: section 8 phone rules */
  .companies__more { margin-top: 32px; }
}

/* ==========================================================================
   11. Speaking (1 Nov 2026): /speaking/. Recent talks reuse .media-list /
       .media-item from 9.7; headshots sit in a 3-up grid (1-up on phones).
   ========================================================================== */
.speaking__intro p:last-child { margin-bottom: 0; }
.speaking__more {
  margin: 24px 0 0;
  font-family: var(--font-rubik);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.8;
}
.page-content .speaking__subhead {
  margin: 36px 0 14px;
  font-family: var(--font-montserrat);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.4;
}
.page-content .media-section__title + .speaking__subhead { margin-top: 0; }
.speaking__bio p:last-child { margin-bottom: 0; }

/* Headshots: natural aspect ratio (no crop, no stretch); the portrait one is simply taller. */
.headshots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gallery-gap);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.headshots__item { min-width: 0; }
.headshots__item img { width: 100%; height: auto; }
.headshots__link { margin-top: 10px; }

@media (max-width: 640px) {
  .headshots { grid-template-columns: 1fr; row-gap: 32px; }
}