/* Noah Kaye — site styles
   Dark by default; light when <html data-theme="light"> (set by the header toggle).
   Type: Literata for reading and display, Libre Franklin for interface text. */

/* The fonts are served from this site (assets/fonts/), not from Google. These are Google Fonts’ own
   rules for the Latin files, apart from the file locations and Literata's weight: the site only sets
   Literata at 400, so its files were cut down to that one weight (optical sizing kept), less than half
   the download. Using another Literata weight would need the full files from Google Fonts again. */
/* latin-ext */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/librefranklin-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;
}
/* latin */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/librefranklin-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;
}
/* latin-ext */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/librefranklin-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;
}
/* latin */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/librefranklin-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;
}
/* latin-ext */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/librefranklin-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;
}
/* latin */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/librefranklin-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;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/literata-italic-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;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/literata-italic-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;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/literata-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;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/literata-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;
}

/* While Literata is still on its way, text shows in Georgia. Sized to Literata’s width here, so most
   lines break in the same places and text moves far less when Literata arrives. Limited to the characters Literata
   itself supplies, so it is never used once Literata has loaded. */
@font-face {
  font-family: "Literata Fallback";
  font-style: normal;
  font-weight: 300 700;
  src: local("Georgia");
  size-adjust: 107%;
  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;
}
@font-face {
  font-family: "Literata Fallback";
  font-style: italic;
  font-weight: 300 700;
  src: local("Georgia Italic"), local("Georgia-Italic");
  size-adjust: 98%;
  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;
}
/* end fallback */

/* Colors. Every color on the site is set in this block: change a value here and it follows
   everywhere. Hairlines, outlines and washes are mixed from these colors (color-mix), so they follow
   too. Dark is the default; the light theme (the sun/moon button) sets the same names further down. */
:root {
  color-scheme: dark;

  /* The page */
  --c-page: #142A40;          /* background */
  --c-page-alt: #1A3350;      /* the contact band, popup headers */
  --c-header: #08111B;        /* the bar at the top of every page, set apart from the hero below it */
  --c-hero: #0B1622;          /* behind the hero photo; darker than the page so the hero has an edge */
  --c-ink: #E8EEF3;           /* text and the logo */
  --c-ink-soft: #9FB2C2;      /* secondary text, sketches */
  --c-hero-ink: #CAD6E0;      /* the lines under the headline, over the photo */
  --c-accent: #6CCBFF;        /* the blue: small labels, the typing caret, outlines, focus ring */

  /* The "Leadership is deeply human" band */
  --c-band: #0D3556;
  --c-band-ink: #EEF4F8;
  --c-band-ink-soft: #A8C6DC;
  --c-pen: #4FC3FD;           /* the hand-drawn pen strokes */

  /* Footer */
  --c-footer: #070F18;
  --c-footer-ink: #E8EEF3;
  --c-footer-ink-soft: #8DA0B1;

  /* Buttons and form fields */
  --c-button: #03A9FC;
  --c-button-ink: #04121C;
  --c-button-hover: #3BBDFD;
  --c-field: #0E1E2E;

  /* Details */
  --c-trail: #7FA3BE;         /* the trail in the left margin on wide screens */
  --c-shadow: #03080D;        /* shadows, and the dimming behind popups */
}

:root[data-theme="light"] {
  color-scheme: light;

  /* Ivory rather than white */
  --c-page: #F6F2EA;
  --c-page-alt: #ECE5D7;
  --c-header: #ECE4D4;
  --c-hero: #F6F2EA;
  --c-ink: #14222E;
  --c-ink-soft: #4D5C69;
  --c-hero-ink: #243240;
  --c-accent: #0A80C0;

  --c-band: #0B3A5E;
  --c-band-ink: #F4F0E8;
  --c-band-ink-soft: #A9C7DE;
  --c-pen: #03A9FC;

  --c-footer: #0B3A5E;
  --c-footer-ink: #F4F0E8;
  --c-footer-ink-soft: #A9C7DE;

  --c-button: #0B3A5E;
  --c-button-ink: #F4F0E8;
  --c-button-hover: #12507F;
  --c-field: #FCFAF5;

  --c-trail: #8197A8;
  --c-shadow: #0E1A24;

  /* "Mist", a faded-blue alternative to ivory. To try it, move these lines out of the comment.
  --c-page: #EEF3F7;
  --c-page-alt: #DFE8EF;
  --c-ink: #13212D;
  --c-ink-soft: #4A5A68;
  --c-field: #F8FAFC;
  */
}

/* What each color is used for. Built from the colors above; there should be no need to edit these. */
:root {
  --bg: var(--c-page);
  --bg-alt: var(--c-page-alt);
  --text: var(--c-ink);
  --text-2: var(--c-ink-soft);
  --rule: color-mix(in srgb, var(--c-ink) 14%, transparent);
  --underline: color-mix(in srgb, var(--c-ink) 35%, transparent);
  --focus: var(--c-accent);
  --selection: color-mix(in srgb, var(--c-accent) 32%, transparent);
  --logo: var(--c-ink);
  --header-bg: var(--c-header);
  --header-rule: color-mix(in srgb, var(--c-ink) 10%, transparent);

  --band-bg: var(--c-band);
  --band-text: var(--c-band-ink);
  --band-text-2: var(--c-band-ink-soft);
  --band-rule: color-mix(in srgb, var(--c-band-ink) 16%, transparent);

  --footer-bg: var(--c-footer);
  --footer-text: var(--c-footer-ink);
  --footer-text-2: var(--c-footer-ink-soft);
  --footer-rule: color-mix(in srgb, var(--c-footer-ink) 12%, transparent);

  --btn-bg: var(--c-button);
  --btn-text: var(--c-button-ink);
  --btn-bg-hover: var(--c-button-hover);

  --field-bg: var(--c-field);
  --field-border: color-mix(in srgb, var(--c-ink) 24%, transparent);

  /* Homepage background photo, faded into the page so the headline stays readable */
  --hero-opacity: 0.6;
  --hero-filter: grayscale(0.15); /* the photo is toned down a touch on the dark theme */
  --hero-blend: normal;
  --hero-scrim: color-mix(in srgb, var(--c-hero) 55%, transparent);
  --hero-scrim-top: color-mix(in srgb, var(--c-hero) 70%, transparent);
  --hero-lede: var(--c-hero-ink);
  /* The frosted ring around his round photo: a touch lighter than the landscape, with a clear hairline */
  --hero-mat: color-mix(in srgb, var(--c-ink) 14%, transparent);
  --hero-mat-edge: color-mix(in srgb, var(--c-ink) 42%, transparent);
  /* Phones: the color under the hero's text, so the hero reads apart from the Services section below it */
  --hero-under: var(--c-hero);
  --caret: var(--c-accent);
  --pen: var(--c-pen);
  --outline: color-mix(in srgb, var(--c-accent) 30%, transparent);
  --label: var(--c-accent);
  /* The names of the entries in the popups (an option, a package, a talk), set apart from their descriptions.
     For titles in the text color instead, use var(--c-ink). */
  --pop-title: var(--c-accent);
  --trail: var(--c-trail);
  --shadow: color-mix(in srgb, var(--c-shadow) 55%, transparent);
  --backdrop: color-mix(in srgb, var(--c-shadow) 74%, transparent);

  --serif: "Literata", "Literata Fallback", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.875rem;
  --step-0: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --step-1: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  --step-2: clamp(1.4375rem, 1.2rem + 0.9vw, 1.875rem);
  --step-3: clamp(2rem, 1.45rem + 2.1vw, 3.25rem);
  --step-4: clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem);
  --step-5: clamp(3rem, 1.9rem + 5.8vw, 6.75rem);

  --gutter: clamp(20px, 5vw, 64px);
  --max: 1200px;
  --section: clamp(72px, 9vw, 136px);
  --col-gap: clamp(32px, 5vw, 80px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Where the light theme uses the colors a little differently */
:root[data-theme="light"] {
  --focus: var(--c-band);
  --selection: color-mix(in srgb, var(--c-accent) 24%, transparent);
  --outline: color-mix(in srgb, var(--c-band) 20%, transparent);
  --field-border: color-mix(in srgb, var(--c-ink) 36%, transparent);
  --shadow: color-mix(in srgb, var(--c-shadow) 36%, transparent);
  --backdrop: color-mix(in srgb, var(--c-shadow) 56%, transparent);
  /* On ivory the landscape is multiplied onto the page color, so its white haze becomes the ivory itself,
     and it shows at nearly full strength: only a light wash behind the text keeps the headline readable.
     The header bar is solid, so nothing washes the top of the photo. */
  --hero-opacity: 1;
  --hero-filter: saturate(1.05) brightness(1.06);
  --hero-blend: multiply;
  --hero-scrim: color-mix(in srgb, var(--c-hero) 55%, transparent);
  --hero-scrim-top: transparent;
  --hero-mat: color-mix(in srgb, var(--c-hero) 60%, transparent);
  --hero-mat-edge: color-mix(in srgb, var(--c-band) 38%, transparent);
  --hero-under: var(--c-page-alt); /* the light hero is the page color, so phones use the deeper ivory */
  /* the accent alone is too light for text on ivory, so it is deepened toward the band's blue */
  --pop-title: color-mix(in srgb, var(--c-accent) 50%, var(--c-band));
}

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

html { -webkit-text-size-adjust: 100%; }
/* While a popup is open the page behind it doesn't scroll */
html.pop-open, html.pop-open body { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }

h1, h2, h3 { font-weight: 400; text-wrap: balance; }
h2 { font-size: var(--step-3); line-height: 1.08; letter-spacing: -0.018em; }
h3 { font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.01em; }
p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--selection); }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Shared 5/7 split used across the site so headings and text line up page to page */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px var(--col-gap);
}

.meta {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-2);
}

/* Hairline dividers are drawn as pseudo-elements so they can draw in on scroll */
.lined { position: relative; }
.lined::before,
.doors > :last-child::after,
.principles > :last-child::after,
.facts > :last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: 0 50%;
}
.lined::before { top: 0; }
.doors > :last-child::after,
.principles > :last-child::after,
.facts > :last-child::after { bottom: 0; }

/* Buttons and links. Hover states change instantly; nothing animates on hover. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border: 1px solid var(--btn-bg);
  border-radius: 2px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }

.text-link {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration-color: var(--underline);
}
.text-link:hover { text-decoration-color: currentColor; }

/* Header */

/* A bar of its own color with a hairline under it, so the header reads apart from the hero and page */
.site-header {
  padding-block: 22px;
  border-bottom: 1px solid var(--header-rule);
  background: var(--header-bg);
  view-transition-name: site-header;
  -webkit-tap-highlight-color: transparent; /* phones flashed a blue box over a tapped link or button */
}
/* On the homepage the header sits on top of the full-screen photo */
.home .site-header { position: absolute; inset: 0 0 auto; z-index: 2; }
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
}

/* Noah's logo: the circled NK and his name. The image only gives the shape; it is filled with --logo,
   so it is light on the dark theme and dark on the light one. */
.wordmark { display: block; margin-right: auto; border-radius: 2px; }
.logo {
  display: block;
  height: 44px;
  aspect-ratio: 412 / 120;
  background: var(--logo);
  -webkit-mask: url(../img/nk-logo.png) center / contain no-repeat;
  mask: url(../img/nk-logo.png) center / contain no-repeat;
}

.site-nav ul { display: flex; flex-wrap: wrap; gap: 8px 28px; }
/* A tight line box, so the links sit on the same middle line as the logo */
@media (min-width: 861px) { .site-nav a { display: block; line-height: 1.2; } }
.site-nav a {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--text);
  text-decoration: underline;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -8px -10px -8px -6px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--text-2);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--text); }
.theme-toggle svg { display: block; }
.theme-toggle .icon-moon,
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.header-actions { display: flex; align-items: center; gap: 6px; }
html:not(.js) .theme-toggle { display: none; } /* it needs JavaScript to work */

/* Menu button: shown on phones and small tablets only */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  height: 40px;
  margin-right: -6px;
  padding: 0 6px;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}
.menu-icon { position: relative; width: 18px; height: 10px; }
.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: top 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.menu-icon::before { top: 0; }
.menu-icon::after { top: 8.5px; }
.menu-open .menu-icon::before { top: 4.25px; transform: rotate(45deg); }
.menu-open .menu-icon::after { top: 4.25px; transform: rotate(-45deg); }

/* The "Show all" button under the engagements list (phones only) */
.more-toggle {
  margin-top: 16px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--underline);
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.carousel-dots { display: none; }

/* Sections */

.section { padding-block: calc(var(--section) / 2); }
.band { padding-block: var(--section); }
.band--river {
  --text-2: var(--band-text-2);
  --rule: var(--band-rule);
  --focus: var(--band-text);
  background: var(--band-bg);
  color: var(--band-text);
}
.band--mist { background: var(--bg-alt); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 16px var(--col-gap);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section-head p { max-width: 34em; color: var(--text-2); }

.rise-inner, .line, .line-inner { display: block; }

/* Hero: full-screen landscape photo with the headline on top */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  /* More room below than above, so the centered text sits a little closer to the header */
  padding-block: clamp(128px, 16vh, 180px) clamp(96px, 18vh, 220px);
  overflow: hidden;
}

.hero-bg { position: absolute; inset: 0; z-index: -2; background: var(--c-hero); }
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 90%;
  filter: var(--hero-filter);
  opacity: var(--hero-opacity);
  mix-blend-mode: var(--hero-blend);
}

/* Shading for legibility: a wash under the header, one behind the text column,
   and a fade into the page at the bottom */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--hero-scrim-top) 0%, var(--hero-scrim-top) 11%, transparent 30%),
    linear-gradient(90deg, var(--hero-scrim) 0%, var(--hero-scrim) 35%, transparent 80%),
    linear-gradient(180deg, transparent 80%, var(--c-hero) 100%);
}
/* On the light theme the wash behind the text is gone by two thirds of the way across, so the right of
   the landscape shows untouched, and the fade into the page starts a little higher, through the ridges */
@media (min-width: 861px) {
  :root[data-theme="light"] .hero::after {
    background:
      linear-gradient(90deg, var(--hero-scrim) 0%, var(--hero-scrim) 28%, transparent 66%),
      linear-gradient(180deg, transparent 70%, var(--c-hero) 100%);
  }
}

/* The text sits on the left; the landscape keeps the rest of the screen */
.hero-text { max-width: 46rem; }

/* Who this is: a round photo of his face beside his name and titles */
.hero-id {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 22px;
}
/* The photo sits in a frosted ring: the landscape shows through it, softened, so the photo sits in the
   scene rather than on top of it. A hairline edges the ring, as on the outlined boxes further down. */
.hero-photo {
  width: 136px;
  padding: 5px;
  border: 1px solid var(--hero-mat-edge);
  border-radius: 50%;
  background: var(--hero-mat);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 34px -16px var(--shadow);
}
.hero-photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  filter: saturate(0.92); /* eased back a touch, to sit with the muted landscape */
}

.hero h1 {
  margin-top: clamp(28px, 4vw, 52px);
  margin-left: -0.056em; /* at this size the first letter's side bearing shows; the "L" now starts on the line */
  font-size: var(--step-5);
  line-height: 0.98;
  letter-spacing: -0.028em;
}

/* Whose site this is, above the headline: the name in the reading type, then his titles */
.hero-name {
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.hero-role {
  margin-top: 8px;
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: var(--hero-lede);
}

.hero-lede {
  margin-top: clamp(24px, 3vw, 36px);
  max-width: 30em;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--hero-lede);
}

/* Typed headline, with a slim caret */
.typer { white-space: nowrap; }
.caret {
  display: none;
  width: max(2px, 0.036em);
  height: 0.8em;
  margin-left: 0.09em;
  vertical-align: -0.08em;
  border-radius: 1px;
  background: var(--caret);
}
.typer.is-typing .caret { display: inline-block; }
/* It blinks softly while idle and holds steady while keys are pressed (site.js sets .is-steady, and
   .is-paused while the hero is off screen). A CSS animation, so the browser runs it without any script. */
@keyframes caret-blink { to { opacity: 0; } }
.typer.is-typing .caret { animation: caret-blink 0.53s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; }
.typer.is-typing .caret.is-steady { animation: none; }
.typer.is-paused .caret { animation-play-state: paused; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: clamp(28px, 3.5vw, 40px);
}

.portrait, .meet-photo, .story-photo, .gallery-photo { overflow: hidden; }

/* Services */

.door {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 10px var(--col-gap);
  padding-block: clamp(24px, 3vw, 36px);
}
.door p { max-width: 34em; color: var(--text-2); }

/* Opens a box of examples. Outlined, so it reads as "more here" rather than a link away. */
.more-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 11px 14px 11px 16px;
  border: 1px solid var(--outline);
  border-radius: 2px;
  background: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.more-button::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  color: var(--label);
  background:
    linear-gradient(currentColor, currentColor) 50% 50% / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 50% / 1.5px 100% no-repeat;
}
.more-button:hover { border-color: var(--text-2); }
html:not(.js) .more-button, .more-button[hidden] { display: none; } /* it needs JavaScript, and a box to open */
/* On those rows the title and its sketch open the box too */
.door--more h3, .door--more .door-sketch { cursor: pointer; }

.doors-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: clamp(36px, 4.5vw, 56px);
}
.doors-cta p { font-size: var(--step-2); line-height: 1.25; }

/* Popups: a box of examples that opens over the page from a "See ..." button (site.js opens and
   closes it). A header band with the row's sketch, title and description, then the list. */
.pop {
  --pop-pad: clamp(22px, 4vw, 48px);
  width: min(960px, calc(100vw - 2 * var(--gutter)));
  max-width: none;
  max-height: min(880px, calc(100vh - 48px));
  max-height: min(880px, calc(100dvh - 48px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--outline);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 24px 80px var(--shadow);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pop::backdrop { background: var(--backdrop); }

/* The close button stays in the top corner while the box scrolls */
.pop-bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; height: 0; }
.pop-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 12px 12px 0 0;
  padding: 0;
  border: 1px solid var(--outline);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.pop-close:hover { border-color: var(--text-2); }

.pop-head,
.pop-body {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: var(--pop-pad);
  padding-inline: var(--pop-pad);
}
.pop-head { align-items: center; padding-block: 52px 34px; background: var(--bg-alt); }
.pop-art .door-sketch { width: calc(var(--ink, 140) * 1.5px); max-width: 100%; }
/* Without a sketch (feature 4 switched off) the title takes the full width */
.pop-art:empty { display: none; }
.pop-art:empty + div { grid-column: 1 / -1; }
.pop-sub { margin-top: 14px; max-width: 30em; font-style: italic; color: var(--text-2); }

.pop-body { padding-block: 6px 38px; }
.pop-label {
  padding-top: 23px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label);
}
.pop-list li { padding-block: 18px 20px; border-bottom: 1px solid var(--rule); }
.pop-list h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.25; letter-spacing: -0.005em; color: var(--pop-title); }
.pop-list p { margin-top: 4px; max-width: 32em; color: var(--text-2); }
.pop-cta { display: inline-block; margin-top: 24px; }
/* A few words before the list, in the body's own color */
.pop-intro { padding-top: 18px; max-width: 34em; }
.pop-intro + .pop-list { margin-top: 6px; }
/* Within an entry: a tagline under the name, a format line at the foot, and now and then a link */
.pop-list .pop-tag { margin-top: 2px; font-style: italic; color: var(--text); }
.pop-list .pop-tag + p { margin-top: 8px; }
.pop-list .pop-meta { margin-top: 12px; color: var(--label); }
.pop-list .text-link { display: inline-block; margin-top: 10px; }
/* The shape of an engagement, three facts side by side */
.pop-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
.pop-facts div { padding-block: 18px 20px; border-bottom: 1px solid var(--rule); }
.pop-facts dd { margin-top: 6px; line-height: 1.4; }

/* Approach */

.approach-statement {
  max-width: 13em;
  margin-left: -0.053em; /* the "L" starts on the line, like the text below it */
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

/* A hand-drawn line under "human", traced by anime.js when the statement comes into view */
.underlined { position: relative; white-space: nowrap; }
.pen-line {
  position: absolute;
  left: -0.02em;
  bottom: 0;
  width: calc(100% + 0.08em);
  height: 0.3em;
  overflow: visible;
  fill: none;
  stroke: var(--pen);
  stroke-width: 0.045em;
  stroke-linecap: round;
  pointer-events: none;
}
.pen-line path { vector-effect: non-scaling-stroke; }

.principles { margin-top: clamp(48px, 6vw, 88px); }
.principle {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 6px var(--col-gap);
  padding-block: 22px 24px;
}
.principle h3 { font-size: var(--step-1); line-height: 1.35; letter-spacing: 0; }
.principle p { max-width: 34em; color: var(--text-2); text-wrap: balance; }
/* The closing thought of each belief gets its own line in the full text color, so it lands */
.principle .punch { display: block; color: var(--band-text); }

/* My coaching practices */

/* The three organizations and real estate sit together in one slim outlined box, two by two. Each cell
   is one link: the name is the link and it stretches over the whole cell. */
.practices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--outline);
  border-radius: 3px;
}
.practice { position: relative; padding: 28px 28px 30px; }
/* Hairlines between the cells: down the middle, and across between the two rows */
.practice:nth-child(even) { border-left: 1px solid var(--outline); }
.practice:nth-child(n + 3) { border-top: 1px solid var(--outline); }
.practice h3 { padding-right: 30px; font-size: var(--step-2); line-height: 1.2; }
.practice h3 a { text-decoration: none; }
.practice h3 a::after { content: ""; position: absolute; inset: 0; }
.practice:hover h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.practice-role {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.45;
  color: var(--label);
}
.practice-about { margin-top: 16px; line-height: 1.55; color: var(--text-2); }
/* A drawn icon, not the ↗ character: iPhones show that character as an emoji */
.practice-arrow { position: absolute; top: 32px; right: 24px; color: var(--label); pointer-events: none; }
/* Side by side, the two cells of each row share their rows, so roles and descriptions line up even when
   a name runs onto two lines (browsers without subgrid simply skip this) */
@media (min-width: 701px) {
  @supports (grid-template-rows: subgrid) {
    .practices { grid-template-rows: repeat(2, auto auto 1fr); }
    .practice { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  }
}

/* Under the box: the range of fields on the left, recent engagements on the right */
.practices-range { margin-top: clamp(44px, 5.5vw, 72px); }
.range-fields {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label);
}
@media (min-width: 861px) {
  .range { position: sticky; top: 48px; align-self: start; }
}
.range-point {
  margin-top: 16px;
  max-width: 15em;
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.3;
  text-wrap: balance;
}

.engagements h3 { font-size: var(--step-1); line-height: 1.3; letter-spacing: 0; }
.engagements .meta { margin-top: 4px; }

/* Each engagement: a small role label over its description, separated by hairlines */
.engagement-list { margin-top: 20px; border-top: 1px solid var(--rule); }
.engagement-list li {
  display: grid;
  grid-template-columns: minmax(0, 11em) minmax(0, 1fr);
  gap: 6px 24px;
  padding-block: 16px 18px;
  border-bottom: 1px solid var(--rule);
}
.engagement-list .who {
  padding-top: 0.35em;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label);
}
.engagement-list .what { line-height: 1.5; }

/* My story (homepage) */

.meet-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
}
.meet-text { align-self: center; }
.meet-facts { margin-top: 18px; line-height: 1.8; }
.meet-story { margin-top: 28px; }

.meet-quote {
  max-width: 22em;
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.35;
}
.meet-quote + p { margin-top: 18px; max-width: 34em; color: var(--text-2); }
.meet .text-link { display: inline-block; margin-top: 24px; }

/* Contact */

.contact-intro p { margin-top: 20px; max-width: 24em; }
.contact-intro .button { margin-top: 20px; }
.contact-intro .contact-write { margin-top: 32px; }
.contact-intro .contact-aside {
  margin-top: 28px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--text-2);
}

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}
.field { display: grid; gap: 8px; align-content: start; }
.field--full, .form-actions { grid-column: 1 / -1; }

.field label {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
}
.optional { font-weight: 400; color: var(--text-2); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: 2px;
  background-color: var(--field-bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
}
.field select {
  appearance: none;
  padding-right: 40px;
  /* A small chevron, drawn as two strokes so it takes the text color */
  background-image:
    linear-gradient(45deg, transparent calc(50% - 0.8px), var(--text-2) calc(50% - 0.8px), var(--text-2) calc(50% + 0.8px), transparent calc(50% + 0.8px)),
    linear-gradient(-45deg, transparent calc(50% - 0.8px), var(--text-2) calc(50% - 0.8px), var(--text-2) calc(50% + 0.8px), transparent calc(50% + 0.8px));
  background-repeat: no-repeat;
  background-size: 6px 6px;
  background-position: right 20px center, right 14px center;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--focus); outline-offset: 0; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 4px; }
.form-status { font-family: var(--sans); font-size: var(--step--1); color: var(--text-2); }

/* About page */

.page-intro { padding-block: clamp(24px, 4vw, 64px) calc(var(--section) / 2); }
.page-intro .wrap {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px var(--col-gap);
}
/* The name starts level with the top of the photo and the introduction ends level with its foot */
.page-intro .wrap > div { display: flex; flex-direction: column; justify-content: space-between; }
.page-intro h1 {
  margin-left: -0.056em; /* the "I" starts on the line, like the text below it */
  font-size: var(--step-5);
  line-height: 0.98;
  letter-spacing: -0.028em;
}
.page-intro .lede {
  margin-top: clamp(24px, 3vw, 36px);
  max-width: 30em;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-2);
}

.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 60% 30%;
}
/* Another photo in the same spot: his real estate team, shown whole (real estate page) */
.portrait--team img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
/* The real estate page: its photo is wide, so on wider screens the title runs across the top, over the
   photo's column too, and the introduction and the photo sit side by side under it, the buttons' foot
   level with the photo's foot */
@media (min-width: 861px) {
  .page-intro--across .wrap > div { display: contents; }
  .page-intro--across h1 { grid-column: 1 / -1; }
  .page-intro--across h1 .line { display: inline-block; }
  .page-intro--across .wrap > div > div,
  .page-intro--across .portrait { align-self: end; }
  .page-intro--across .lede { margin-top: 0; }
}

/* Buttons under an introduction (the real estate page) */
.intro-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: clamp(24px, 3vw, 32px);
}

/* "How I got here": a photo of the work itself under the heading */
.story-photo { margin-top: 32px; }
/* The story is long, so the heading and photo stay in view beside it */
@media (min-width: 861px) {
  .story-side { position: sticky; top: 48px; align-self: start; }
}
.story-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 55% 55%;
}

.prose { max-width: 34em; }
.prose p + p { margin-top: 1.1em; }

/* At a glance: a fact sheet across the full width, three facts to a row */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.facts div { padding-block: 18px 24px; }
.facts > :last-child::after { display: none; }
.facts dt,
.project-label,
.pop-meta,
.pop-facts dt {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label);
}
.facts dd { margin-top: 8px; max-width: 22em; }
.dd-list { display: grid; gap: 10px; }
.dd-list .meta { display: block; }

/* Other work & projects: slim outlined cards, two side by side and a wide one beneath them */
.projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.project {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 30px;
  border: 1px solid var(--outline);
  border-radius: 3px;
  scroll-margin-top: 24px;
}
.project h3 { margin-top: 10px; }
.project h3 + p { margin-top: 12px; max-width: 32em; }
/* Links sit at the foot of each card, so the two rows line up whatever the text lengths */
.project .link-list { align-content: flex-start; margin-top: auto; padding-top: 20px; }
@media (min-width: 861px) {
  @supports (grid-template-rows: subgrid) {
    .projects { row-gap: 0; }
    .projects > .project:not(.project--wide) { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
    .projects > .project:not(.project--wide) .link-list { margin-top: 0; }
    /* Buttons sit at the foot of their card, level with the bottom of the card beside it */
    .projects > .project:not(.project--wide) > .listen { align-self: end; }
    /* where one title runs to two lines, the shorter one sits on the same last line, right above its text */
    .projects > .project:not(.project--wide) h3 { align-self: end; }
    .project--wide { margin-top: 20px; }
  }
}

/* The wide card: what it is on the left; the download and the podcast on the right, in a column
   that lines up with the card above it */
.project--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 78px; /* the gap between the cards plus their two paddings and borders */
  align-items: center;
}
/* The files and buttons of a card, stacked. In the wide card they are its right column; in a narrow card
   they sit under its text, as its last row */
.project-actions { display: grid; gap: 12px; }
.project:not(.project--wide) > .project-actions { margin-top: 22px; }
.project-actions .ebook { max-width: none; margin-top: 0; }
.project-actions .listen { max-width: none; }

.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 20px;
}
.link-list a { font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; }

/* A file (the ebook, a one-pager, talk notes): one slim outlined row. A small pen drawing (a book or a
   sheet), what it is, and a mark: down for a download, out for a file that opens in a new tab. The whole
   row is the link. */
.ebook {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 18px;
  max-width: 32em; /* the same measure as the text above, so the edges line up */
  margin-top: 22px;
  padding: 14px 20px 15px 16px;
  border: 1px solid var(--outline);
  border-radius: 3px;
  text-decoration: none;
}
.ebook:hover { border-color: var(--text-2); }
.ebook:hover .ebook-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.ebook-art {
  width: 46px;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ebook-title { display: block; font-size: var(--step-1); line-height: 1.3; }
.ebook-meta {
  display: block;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-2);
}
.ebook-get { color: var(--label); }

/* The podcast episode: two outlined buttons, each with a small play mark. Together they are as wide
   as the ebook row and the text above; where two won't fit side by side they stack at full width. */
.listen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 12px;
  max-width: 32em;
  margin-top: 12px;
}
.listen a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 11px 14px;
  border: 1px solid var(--outline);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.listen a::before {
  content: "";
  flex: none;
  border-block: 5px solid transparent;
  border-left: 8px solid var(--label);
}
.listen a:hover { border-color: var(--text-2); }

/* Resources */

/* The featured episode, on the same 5/7 columns as the rest of the site: what it is on the left, under
   the heading, and the video on the right, under the line beside the heading */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px var(--col-gap);
  align-items: center;
}
.feature .video { grid-column: 2; grid-row: 1; }
.feature h3 { margin-top: 10px; }
.feature h3 + p { margin-top: 12px; max-width: 30em; color: var(--text-2); }
.feature .listen { margin-top: 24px; }

/* Audio episodes: outlined cards under the video, two side by side. The cover beside the label and title,
   then a line about it, and its buttons at the foot, level across the two cards. "Play episode" is filled,
   as the primary action; once pressed, the browser's own audio player takes its place (site.js). */
.episodes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(40px, 5vw, 64px);
}
.episode {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 26px;
  border: 1px solid var(--outline);
  border-radius: 3px;
}
.episode-head {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}
.episode-art { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.episode h3 { margin-top: 8px; font-size: var(--step-1); line-height: 1.3; letter-spacing: 0; }
.episode-head + p { margin-top: 18px; max-width: 32em; color: var(--text-2); }
.episode .listen { max-width: none; margin-top: auto; padding-top: 22px; }
.episode-player { margin-top: auto; padding-top: 22px; }
.episode-player audio { display: block; width: 100%; }
.episode-player + .listen { margin-top: 0; padding-top: 12px; }
.listen .listen-play { border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-text); }
.listen .listen-play::before { border-left-color: currentColor; }
.listen .listen-play:hover { border-color: var(--btn-bg-hover); background: var(--btn-bg-hover); }

/* The video shows its thumbnail (served from this site) until it is clicked; only then does site.js
   bring in YouTube's player. Without JavaScript it is simply a link to the video. */
.video {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 3px;
  background: var(--bg-alt);
}
.video img { width: 100%; height: 100%; object-fit: cover; }
/* The play button sits in the thumbnail's top corner, clear of its title */
.video-play {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px 11px 14px;
  border-radius: 2px;
  background: var(--btn-bg);
  color: var(--btn-text);
  box-shadow: 0 8px 24px -8px var(--shadow);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
}
.video-play::before { content: ""; border-block: 6px solid transparent; border-left: 10px solid currentColor; }
.video:hover .video-play { background: var(--btn-bg-hover); }
.video.is-playing .video-play { display: none; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* In the room: three photos of the work, each with a short caption */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.gallery-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-photo--stage img { object-position: 50% 41%; }
.gallery figcaption { margin-top: 12px; }
/* Each photo opens more about that kind of work: its caption is the link, stretched over the photo too */
.gallery figure { position: relative; }
.gallery figcaption a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gallery figure:hover figcaption a { text-decoration-color: currentColor; }

.cta p { max-width: 28em; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 24px; }

/* Footer */

.site-footer {
  --text-2: var(--footer-text-2);
  --rule: var(--footer-rule);
  --focus: var(--footer-text);
  --underline: color-mix(in srgb, var(--footer-text) 35%, transparent);
  padding-block: clamp(56px, 7vw, 88px) 32px;
  background: var(--footer-bg);
  color: var(--footer-text);
}

/* Who this is on the left, the links on the right, as wide as they need to be; the rest of the row is
   for his name and titles */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px var(--col-gap);
}
/* The links: two columns of four */
.footer-cols { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 24px var(--col-gap); }
/* His round photo beside his name and titles, the same as at the top of the homepage (the sizes match
   .hero-id): the name and titles keep within the photo's height, one line each on wide screens */
.footer-id {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 22px;
}
.footer-photo {
  width: 136px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--footer-text) 30%, transparent);
  border-radius: 50%;
}
.footer-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; filter: saturate(0.92); }
.footer-name { font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.01em; }
.footer-role {
  margin-top: 8px;
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: var(--text-2);
}

.footer-links { display: grid; gap: 8px; align-content: start; font-family: var(--sans); font-size: 0.9375rem; }
.footer-links a,
.footer-bottom a { text-decoration-color: var(--underline); }
.footer-links a:hover,
.footer-bottom a:hover { text-decoration-color: currentColor; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--text-2);
}

/* Motion. Everything here is skipped when the visitor asks for reduced motion. */

/* The light/dark switch crossfades (site.js). Pages don't use the browser's transition between pages
   (@view-transition): in iPhone Safari it glitched the new page's opening animations. See .is-leaving. */
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation-duration: 0.32s; }

@keyframes rise-in { from { transform: translateY(140%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes uncover { to { transform: translateY(-100%); } }
@keyframes settle { from { transform: scale(1.08); } }
@keyframes hero-bg-in { from { opacity: 0; } }
@keyframes show-late { to { visibility: visible; } }
@keyframes photo-in { from { opacity: 0; transform: translateY(22px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(28px) scale(0.985); } }
@keyframes pop-out { to { opacity: 0; transform: translateY(12px); } }
@keyframes shade-in { from { opacity: 0; } }
@keyframes shade-out { to { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* Links within the page scroll smoothly through site.js. Not set here with scroll-behavior: that also
     animates the jump when a page opens at a section, so the page would glide down from the top. */

  /* Going to another page: site.js adds .is-leaving, this cover in the page color fades in under the
     header, and then the next page loads and plays its opening animations as on a refresh. The cover
     reaches past the screen's edges so Safari's toolbars can't uncover a strip while they move. */
  body::after {
    content: "";
    position: fixed;
    inset: -20vh 0;
    z-index: 20;
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
  }
  .is-leaving body::after { opacity: 1; visibility: visible; transition: opacity 0.2s ease-out; }

  /* Page load: headline lines rise out of their own baseline, then the rest follows */
  .hero h1 .line { clip-path: inset(-0.5em -0.5em -0.3em -0.5em); }
  /* On About the same mask is an overflow clip: the padding moves its top and bottom edges out as far as
     the clip-path's, and the negative margins keep the layout as it was. Safari applies an overflow clip
     on the graphics hardware, so the rise stays smooth while the page is still loading. Only up and down:
     moved out sideways too, the box reached past the screen's edge and the page scrolled sideways. */
  .page-intro h1 .line { overflow: hidden; padding-block: 0.5em 0.3em; margin-block: -0.5em -0.3em; }
  .hero h1 .line-inner,
  .page-intro h1 .line-inner { animation: rise-in 1.1s var(--ease-out) both; }
  /* The typed line stands in for all three phrases, so the still lines are left out */
  .js .hero h1 .line-inner.typer { animation: none; }
  .js .hero h1 .line--still { display: none; }
  /* Until the typer takes over, keep its text hidden so it isn't shown and then retyped.
     If the script never runs, the text appears anyway after a moment. */
  .js .typer:not(.is-typing) .typer-text { visibility: hidden; animation: show-late 0s linear 2.5s forwards; }
  .hero-name { animation: fade-up 0.9s var(--ease-out) 0.1s both; }
  .hero-role { animation: fade-up 0.9s var(--ease-out) 0.2s both; }
  .hero-lede,
  .page-intro .lede { animation: fade-up 0.9s var(--ease-out) 0.5s both; }
  .hero-actions { animation: fade-up 0.9s var(--ease-out) 0.6s both; }
  /* The background photo stays still; it only fades in once loaded, so it never pops in */
  .hero-bg img { animation: hero-bg-in 0.8s ease backwards; }
  /* The round photo arrives with the name beside it, once it has loaded */
  .hero-photo { animation: photo-in 1.2s var(--ease-out) 0.1s both; }
  .js .hero-photo:not(.is-loaded) { animation-play-state: paused; }
  /* Load animations wait for their image, so a photo never pops in halfway through its own fade */
  .js .hero-bg img:not(.is-loaded),
  .js .portrait:not(.is-loaded)::after,
  .js .portrait:not(.is-loaded) img { animation-play-state: paused; }
  /* The portrait is uncovered from the bottom up: a panel in the page color slides up out of its frame.
     This used to animate a clip-path, which Safari redraws on the main thread for every frame (about
     30fps while the page loads); a sliding panel runs on the graphics hardware, like the photo's settle. */
  .portrait { position: relative; }
  .portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg);
    animation: uncover 1.3s var(--ease-out) 0.15s both;
  }
  .portrait img { animation: settle 1.8s var(--ease-out) 0.15s both; }

  /* Popups rise into place over a dimming page, then their entries follow one after another.
     Closing is quicker: site.js adds .is-closing and waits for it to finish. */
  .pop[open] { animation: pop-in 0.55s var(--ease-out) both; }
  .pop[open]::backdrop { animation: shade-in 0.35s ease both; }
  .pop[open] .pop-list li,
  .pop[open] .pop-cta { animation: fade-up 0.7s var(--ease-out) 0.5s both; }
  .pop[open] .pop-intro,
  .pop[open] .pop-facts > div { animation: fade-up 0.7s var(--ease-out) 0.14s both; }
  .pop[open] .pop-list li:nth-child(1) { animation-delay: 0.14s; }
  .pop[open] .pop-list li:nth-child(2) { animation-delay: 0.2s; }
  .pop[open] .pop-list li:nth-child(3) { animation-delay: 0.26s; }
  .pop[open] .pop-list li:nth-child(4) { animation-delay: 0.32s; }
  .pop[open] .pop-list li:nth-child(5) { animation-delay: 0.38s; }
  .pop[open] .pop-list li:nth-child(6) { animation-delay: 0.44s; }
  .pop[open] .pop-list li:nth-child(7) { animation-delay: 0.5s; }
  .pop.is-closing { animation: pop-out 0.22s ease both; }
  .pop.is-closing::backdrop { animation: shade-out 0.22s ease both; }

  /* Scroll reveals. site.js adds .reveal-ready to <html>, then .is-in as each block comes into view. */
  .reveal-ready [data-reveal="rise"] { clip-path: inset(-0.5em -0.5em -0.3em -0.5em); }
  .reveal-ready [data-reveal="rise"]:not(.is-in) .rise-inner { transform: translateY(140%); }
  .reveal-ready [data-reveal="rise"].is-in .rise-inner {
    transition: transform 1.1s var(--ease-out) var(--delay, 0s);
  }

  .reveal-ready [data-reveal="fade"]:not(.is-in) { opacity: 0; transform: translateY(16px); }
  .reveal-ready [data-reveal="fade"].is-in {
    transition: opacity 0.9s ease var(--delay, 0s), transform 0.9s var(--ease-out) var(--delay, 0s);
  }

  .reveal-ready [data-reveal="line"]:not(.is-in)::before,
  .reveal-ready [data-reveal="line"]:not(.is-in)::after { transform: scaleX(0); }
  .reveal-ready [data-reveal="line"]:not(.is-in) > * { opacity: 0; transform: translateY(12px); }
  .reveal-ready [data-reveal="line"].is-in::before,
  .reveal-ready [data-reveal="line"].is-in::after {
    transition: transform 1.2s var(--ease-out) var(--delay, 0s);
  }
  .reveal-ready [data-reveal="line"].is-in > * {
    transition: opacity 0.8s ease calc(var(--delay, 0s) + 0.15s), transform 0.8s var(--ease-out) calc(var(--delay, 0s) + 0.15s);
  }

  /* Photos are uncovered from the bottom up, like the About portrait: a panel in the page color slides
     up out of the frame (the frames clip it with overflow: hidden). Not a clip-path transition: Safari
     redraws that on the main thread for every frame, about 30fps; a sliding panel runs on the graphics
     hardware. The panel is the page color, so a photo revealed on a band would need the band's. */
  .reveal-ready [data-reveal="image"] { position: relative; }
  .reveal-ready [data-reveal="image"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg);
  }
  .reveal-ready [data-reveal="image"]:not(.is-in) img { transform: scale(1.08); }
  .reveal-ready [data-reveal="image"].is-in::after { transform: translateY(-100%); transition: transform 1.3s var(--ease-out) var(--delay, 0s); }
  .reveal-ready [data-reveal="image"].is-in img { transition: transform 1.8s var(--ease-out) var(--delay, 0s); }
}

/* The header is the same on both pages, so it stays above the cover rather than fading out and back in
   (on phones it is already above it) */
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
  .is-leaving .site-header { z-index: 21; }
  .is-leaving body:not(.home) .site-header { position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

@media print {
  [data-reveal], [data-reveal] * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-reveal]::before, [data-reveal]::after { transform: none !important; }
  /* the panels that uncover photos would cover them again */
  [data-reveal="image"]::after,
  .portrait::after { content: none !important; }
}

/* Footer: below this width the links move under his name, so the name and titles still get a line each */

@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Mid-size screens: stack each engagement's role above its description */

@media (max-width: 1100px) {
  .engagement-list li { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Narrow screens: the four stack inside their box instead of sitting two by two */

@media (max-width: 700px) {
  .practices { grid-template-columns: minmax(0, 1fr); }
  .practice:nth-child(even) { border-left: 0; }
  .practice + .practice { border-top: 1px solid var(--outline); }
}

/* Side by side with the portrait, the type itself meets the photo's edges: the capitals' tops at its
   top and the last line's baseline at its foot (text boxes carry a little air above and below) */
@media (min-width: 861px) {
  .page-intro h1 { margin-top: -0.185em; }
  .page-intro .lede { margin-bottom: -0.33em; }
}

/* Phones and small tablets */

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  html { scroll-padding-top: calc(var(--header-h) + 12px); }

  /* One-row header that stays in place (moving it while scrolling made the page jump on iPhones) */
  .site-header,
  .home .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    padding-block: 12px;
    border-bottom: 0;
    background: none;
    view-transition-name: none;
  }
  body:not(.home) { padding-top: var(--header-h); }
  /* The bar behind the header row, in the header color on every page (over the photo too), and its
     hairline. site.js sets --header-fill from 0 at the top of the page to 1 once it has scrolled 64px,
     easing quick changes so the hairline never pops in (FADE_MS there sets how soft that is). */
  .site-header::before,
  .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    pointer-events: none;
  }
  .site-header::before { top: 0; bottom: 0; background: var(--header-bg); }
  .site-header::after { top: 100%; height: 1px; background: var(--header-rule); }
  .js .site-header::after { opacity: var(--header-fill, 0); }
  /* The menu needs JavaScript; without it the links simply wrap below the name */
  .js .site-header .wrap { flex-wrap: nowrap; gap: 12px; }
  .wordmark, .header-actions { position: relative; z-index: 1; }
  .logo { height: 34px; }
  .js .menu-toggle { display: inline-flex; }

  /* The menu opens full screen with large, easy-to-tap links. It closes as one piece: the whole panel
     fades and nothing inside it moves under the finger that tapped it. The panel and its links keep
     layers of their own (will-change), so their text is never redrawn in the middle of a tap. */
  .js .site-nav {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow-y: auto;
    background: var(--bg);
    visibility: hidden;
    opacity: 0;
    will-change: opacity;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }
  .menu-open .site-nav { visibility: visible; opacity: 1; transition: opacity 0.25s ease; }
  /* A menu link to another page: the menu closes into the next page. Its panel stays while its links
     fade where they are (site.js, .is-leaving-menu), so the page behind it doesn't show again in between. */
  html.is-leaving-menu .site-nav { visibility: visible; opacity: 1; transition: none; }
  html.is-leaving-menu .site-nav li { opacity: 0; transform: none; transition: opacity 0.2s ease; }
  .js .site-nav ul {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    padding: calc(var(--header-h) + 32px) var(--gutter) 48px;
  }
  /* The links rise into place one after another as the menu opens. Only once the panel has faded out
     do they drop back, unseen, ready for the next time. */
  .js .site-nav li {
    opacity: 0;
    transform: translateY(12px);
    will-change: opacity, transform;
    transition: opacity 0s linear 0.25s, transform 0s linear 0.25s;
  }
  .menu-open .site-nav li { opacity: 1; transform: none; transition: opacity 0.3s ease, transform 0.45s var(--ease-out); }
  .menu-open .site-nav li:nth-child(2) { transition-delay: 40ms; }
  .menu-open .site-nav li:nth-child(3) { transition-delay: 80ms; }
  .menu-open .site-nav li:nth-child(4) { transition-delay: 120ms; }
  .menu-open .site-nav li:nth-child(5) { transition-delay: 160ms; }
  .menu-open .site-nav li:nth-child(6) { transition-delay: 200ms; }
  .js .site-nav a,
  .js .site-nav a:hover {
    display: block;
    padding-block: 10px;
    color: var(--text);
    font-family: var(--serif);
    font-size: 2.125rem;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-decoration: none;
  }
  .js .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  html.menu-open,
  html.menu-open body { overflow: hidden; }

  .split,
  .section-head,
  .page-intro .wrap,
  .door,
  .principle { grid-template-columns: minmax(0, 1fr); }

  /* Text on narrow screens runs the full width of the column, with a natural (ragged) right edge.
     Headings fill their lines rather than being balanced into shorter ones. */
  .section-head p,
  .hero-lede,
  .door p,
  .pop-sub,
  .pop-list p,
  .pop-intro,
  .principle p,
  .practice-about,
  .range-point,
  .meet-quote,
  .meet-quote + p,
  .contact-intro p,
  .page-intro .lede,
  .prose,
  .facts dd,
  .project h3 + p,
  .feature h3 + p,
  .episode-head + p,
  .cta p { max-width: none; }
  main h1,
  main h2,
  main h3,
  .principle p,
  .range-point { text-wrap: pretty; }

  /* Hero: a cover photo. The landscape fills a band across the top of the screen, behind the header,
     and dissolves into the hero's own color (--hero-under), which ends where Services begins. His round
     photo overlaps the band's lower edge with his name beside it, and the headline, introduction and
     buttons follow directly. The hero is only as tall as its content, so the next section begins on the
     first screen too. --cover sets the band's height. */
  .hero {
    --cover: clamp(250px, 40svh, 400px);
    min-height: 0;
    align-items: start;
    padding-block: var(--cover) 40px;
    background: var(--hero-under);
  }
  /* No text crosses the band except the header, so on the dark theme the landscape can be stronger */
  :root:not([data-theme="light"]) .hero { --hero-opacity: 0.8; }
  .hero-bg { bottom: auto; height: calc(var(--cover) + 24px); overflow: hidden; }
  /* Framed on the ridges: the photo is enlarged from its foot, so less sky and more mountains show */
  .hero-bg img { transform: scale(1.4); transform-origin: 50% 100%; }
  /* A wash under the header, and the band's dissolve into the hero's color. The dissolve reaches a little past
     the photo's edge, so no sliver of the photo's last row of pixels can show as a line. */
  .hero::after {
    bottom: auto;
    height: calc(var(--cover) + 40px);
    background:
      linear-gradient(180deg, var(--hero-scrim-top) 0%, transparent 36%),
      linear-gradient(180deg, transparent 50%, var(--hero-under) calc(100% - 16px));
  }
  /* The photo of his face, in a ring of the hero's color, overlaps the band's edge, with his name and
     titles beside it */
  .hero .wrap { margin-top: -50px; }
  .hero-id { gap: 0 16px; }
  .hero-name { font-size: 1.3125rem; }
  .hero-role { margin-top: 6px; font-size: 0.9375rem; }
  .hero-photo {
    width: 100px;
    padding: 4px;
    border: 0;
    border-radius: 50%;
    background: var(--hero-under);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 10px 26px -12px var(--shadow);
  }
  .hero h1 { margin-top: 26px; }
  .hero-lede { margin-top: 18px; font-size: 1.0625rem; line-height: 1.55; }
  .hero-actions { margin-top: 26px; gap: 12px 24px; }

  /* Services */
  .door { gap: 8px; padding-block: 22px 24px; }

  /* Approach: the principles become a row you swipe through */
  .principles {
    display: flex;
    gap: 12px;
    margin: 40px calc(-1 * var(--gutter)) 0;
    padding: 0 var(--gutter) 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .principles::-webkit-scrollbar { display: none; }
  .principle {
    flex: 0 0 min(78%, 320px);
    display: block;
    padding: 22px 20px 24px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    scroll-snap-align: start;
  }
  .principle::before,
  .principles > :last-child::after { display: none; }
  .principle p { margin-top: 10px; }
  .carousel-dots { display: flex; gap: 2px; margin-top: 14px; margin-left: -6px; /* the first bar starts on the page edge */ }
  .carousel-dots button { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
  .carousel-dots button::before {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 13px;
    height: 2px;
    border-radius: 1px;
    background: var(--rule);
  }
  .carousel-dots button[aria-current="true"]::before { background: var(--band-text); }

  .more-button { margin-top: 16px; }
  .doors-cta { margin-top: 32px; }

  /* My coaching practices */
  .practice { padding: 22px 20px 24px; }
  .practice-arrow { top: 25px; right: 16px; }
  .practice-about { margin-top: 12px; }
  .practices-range { margin-top: 40px; }
  .range-point { font-size: 1.3125rem; }
  .engagement-list.is-collapsed li:nth-child(n + 4) { display: none; }
  .engagement-list .who { padding-top: 0; }
  .engagement-list .what { font-size: 1rem; }

  /* My story (homepage) */
  .meet-quote { font-size: 1.3125rem; }

  /* Footer: his photo, name and titles as at the top of the homepage on phones; the two short link
     lists side by side under them */
  .footer-grid { gap: 28px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .footer-id { gap: 0 16px; }
  .footer-photo { width: 100px; padding: 4px; }
  .footer-name { font-size: 1.3125rem; }
  .footer-role { margin-top: 6px; font-size: 0.9375rem; }
  .footer-links { gap: 0; }
  .footer-links a { display: inline-block; padding-block: 7px; }
  /* Small text links get taller tap areas */
  .footer-bottom a { display: inline-block; padding-block: 7px; }
  /* Link lists: one link per line, all starting on the same edge */
  .link-list { flex-direction: column; align-items: flex-start; gap: 0; }
  .link-list a { display: inline-block; padding-block: 7px; }

  /* About: name first, then the photo, then the introduction */
  .page-intro .wrap { gap: 24px; }
  .page-intro .wrap > div { display: contents; }
  .page-intro h1 { order: 1; }
  .portrait { order: 2; }
  .page-intro .lede { order: 3; margin-top: 0; }
  .page-intro .wrap > div > div { order: 3; } /* an introduction with buttons under it (real estate) */
  /* Cropped wide, the river photo keeps the top of his head in view; the team photo stays whole */
  .portrait img { aspect-ratio: 4 / 3; object-position: 55% 3%; }
  .portrait--team img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
  .meet-photo img { aspect-ratio: 1 / 1; object-position: 50% 24%; }
  /* "How I got here": heading, then the story, then the photo */
  .story-side { display: contents; }
  .story h2 { order: 1; }
  .story .prose { order: 2; }
  .story-photo { order: 3; margin-top: 0; }
  .projects { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature .video { grid-column: auto; grid-row: auto; } /* on phones the video comes first */
  .video-play { top: 10px; left: 10px; gap: 8px; padding: 8px 12px 8px 10px; font-size: 0.8125rem; }
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .episodes { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 36px; }
  .episode { padding: 20px 20px 22px; }
  .episode-head { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
  .project { padding: 22px 20px 24px; }
  .project .link-list { padding-top: 12px; }
  .project--wide { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  /* The ebook row: a little tighter, so its title stays on one line */
  .ebook { column-gap: 14px; padding: 13px 16px 14px 14px; }
  .ebook-art { width: 40px; }
}

/* The smallest phones: his titles a touch smaller, so beside his photo they still take two lines, top
   and bottom of the page alike */
@media (max-width: 380px) {
  .hero-role,
  .footer-role { font-size: 0.875rem; }
}

/* Popups on small screens: one column, nearly the full screen */
@media (max-width: 700px) {
  .pop {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
  .pop-head,
  .pop-body { grid-template-columns: minmax(0, 1fr); }
  .pop-head { row-gap: 18px; padding-block: 28px 28px; }
  .pop-art .door-sketch { width: calc(var(--ink, 140) * 0.95px); }
  .pop-head h2 { padding-right: 36px; }
  .pop-art + div h2 { padding-right: 0; }
  .pop-body { padding-block: 0 32px; }
  .pop-label { padding-top: 24px; }
  .pop-list li { padding-block: 16px 18px; }
  .pop-list li:first-child { padding-top: 14px; }
  .pop-facts { grid-template-columns: minmax(0, 1fr); }
  .pop-facts div { padding-block: 14px 16px; }
}

@media (max-width: 560px) {
  /* Buttons span the column, so their edges are the text's edges. Where a button has a partner link
     (hero, About's closing band), the two share the width in equal halves, the link drawn as an
     outlined button like the podcast buttons. */
  main .button,
  .more-button { display: flex; width: 100%; justify-content: center; text-align: center; }
  .more-button { justify-content: space-between; }
  .hero-actions,
  .cta-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 12px; }
  .hero-actions .text-link,
  .cta-actions .text-link,
  .intro-actions .text-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid var(--outline);
    border-radius: 2px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
  }
  .hero-actions .text-link:hover,
  .cta-actions .text-link:hover,
  .intro-actions .text-link:hover { border-color: var(--text-2); }
  /* Its labels are long, so the introduction's two buttons stack, each the full width */
  .intro-actions { display: grid; gap: 12px; }
  .intro-actions .text-link { padding-block: 16px; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .engagement-list li { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts div { padding-block: 14px 18px; }
  .facts > :last-child::after { display: block; }
}