/* ──────────────────────────────────────────────────────────
   poster.css — ronbronson.design, Poster wall front page and Talks,
   in the Gallery wall colours: white ground, near-black ink, electric
   blue bands. Stands alone: these pages do not load faces.css,
   core.css or home.css and do not run the palette engine.
   One family, Archivo (self-hosted variable, width 62–125).
   ────────────────────────────────────────────────────────── */
@font-face { font-family: "Archivo"; src: url("fonts/gallery/archivo-variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
/* Body text: Switzer (Fontshare, Free Font License), self hosted */
@font-face { font-family: "Azeret Mono"; src: url("fonts/azeret-mono-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer/switzer-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer/switzer-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer/switzer-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer/switzer-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer/switzer-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
:root {
  --paper: #ffffff;
  --ink: #0b0b14;
  --blue: #1e4fff;
  --on-blue: #ededed;
  --blue-tint: #c9d3ff;
  --blue-rule: #7f9bff;
  --muted: #333333;
  --gut: clamp(16px, 3.9vw, 56px);
  --a: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --t: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --m: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--t); font-size: 19px; line-height: 1.55; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.p-wrap { max-width: 1440px; margin: 0 auto; }
.x { font-stretch: 118%; font-variation-settings: "wdth" 118; font-weight: 900; letter-spacing: -.02em; }

/* Top */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 32px var(--gut); }
.top__name { margin: 0; font-size: 26px; line-height: 1.2; }
.top__name a { text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; gap: 8px 40px; font-weight: 700; font-size: 19px; }
.top nav a { text-decoration: none; }
.top nav a:hover, .top nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }

/* Hero */
.hero { padding: 24px var(--gut) 72px; }
.hero h1 { margin: 0; font-size: clamp(48px, 7.8vw, 112px); line-height: 1; }
.hero__row { display: flex; gap: 80px; align-items: flex-start; margin-top: 44px; }
.hero__deck { flex: 0 0 auto; width: min(700px, 100%); margin: 0; font-size: 26px; font-weight: 500; line-height: 1.46; }
.hero__np { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.26; }
.strip { display: block; width: 100%; height: clamp(260px, 44vw, 640px); object-fit: cover; object-position: 50% 30%; }

/* Bands */
.band { padding: 104px var(--gut); }
.band--blue { background: var(--blue); color: #fff; }
.band__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 56px; }
.band__h { margin: 0; font-size: clamp(48px, 6.4vw, 92px); line-height: .95; max-width: 920px; }
.band__note { margin: 0; flex: 0 0 auto; width: min(420px, 100%); font-size: 22px; font-weight: 500; line-height: 1.45; color: var(--on-blue); }
.band:not(.band--blue) .band__note { color: var(--ink); font-weight: 600; width: min(360px, 100%); }

/* Ways I can contribute */
.offer { display: flex; gap: 32px; align-items: flex-start; padding: 36px 0; border-top: 2px solid var(--blue-rule); }
.offer h3 { flex: 0 0 470px; margin: 0; font-size: 46px; line-height: 1.02; }
.offer div { flex: 1 1 0; display: grid; gap: 20px; }
.offer p { margin: 0; font-size: 21px; line-height: 1.48; color: var(--on-blue); }
.offer a { font-size: 20px; font-weight: 800; color: var(--blue-tint); }
.offer a:hover { color: #fff; }

/* How I get into an organization */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.step { border-top: 8px solid var(--ink); padding-top: 20px; display: grid; gap: 16px; align-content: start; }
.step b { font-size: 40px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.step p { margin: 0; font-size: 20px; line-height: 1.45; }

/* Watch and listen */
.wl { display: flex; gap: 64px; align-items: flex-start; padding: 96px var(--gut); }
.wl__watch { flex: 0 0 auto; width: min(840px, 100%); display: grid; gap: 20px; }
.vid { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; text-decoration: none; }
.vid img { width: 100%; height: 100%; object-fit: cover; }
.vid .play { position: absolute; left: 0; bottom: 0; width: 104px; height: 104px; background: var(--blue); display: grid; place-items: center; }
.vid .play::after { content: ""; border-left: 36px solid var(--ink); border-top: 20px solid transparent; border-bottom: 20px solid transparent; margin-left: 10px; }
.vid:hover .play { background: var(--ink); }
.vid:hover .play::after { border-left-color: #fff; }
.vt { margin: 12px 0 0; font-size: 40px; line-height: 1.02; }
.vt a { text-decoration: none; }
.vm { font-size: 19px; font-weight: 600; color: var(--muted); }
.wl__listen { flex: 1 1 0; display: grid; gap: 22px; }
.wl__listen h2 { margin: 0; font-size: 64px; line-height: .95; }
.ep { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; background: var(--ink); }
.pod { display: grid; gap: 4px; padding-top: 14px; border-top: 2px solid var(--ink); }
.pod b { font-size: 22px; font-weight: 800; line-height: 1.27; }
.pod span { font-size: 17px; font-weight: 500; color: var(--muted); }

/* Featured */
.feat { padding: 88px var(--gut); }
.feat h2 { margin: 0 0 40px; font-size: 64px; line-height: .95; }
.feat__row { display: flex; gap: 40px; align-items: baseline; padding: 24px 0; border-top: 2px solid var(--blue-rule); }
.feat__k { flex: 0 0 380px; font-size: 17px; font-weight: 500; color: var(--blue-tint); }
.feat__t { font-size: 34px; font-weight: 800; line-height: 1.1; text-decoration: none; }
.feat__t:hover { text-decoration: underline; }
.feat__more { display: flex; gap: 32px; margin-top: 32px; font-size: 22px; font-weight: 800; }

/* Cards and footer */
.cards { display: flex; gap: 24px; padding: 72px var(--gut) 0; }
.card { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 40px; }
.card--ink { flex: 1.4 1 0; background: var(--ink); color: #fff; }
.card--line { flex: 1 1 0; border: 2px solid var(--ink); }
.card h3 { margin: 0; font-stretch: 112%; font-variation-settings: "wdth" 112; font-weight: 900; letter-spacing: -.025em; line-height: 1.04; }
.card--ink h3 { font-size: 46px; }
.card--line h3 { font-size: 40px; }
.card p { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.45; }
.card--ink .card__k { color: var(--blue-tint); }
.card .go { font-size: 21px; font-weight: 800; }
.reading { padding: 56px var(--gut) 0; }
.reading h2 { margin: 0 0 16px; font-size: 22px; font-stretch: 112%; font-variation-settings: "wdth" 112; font-weight: 900; }
.shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; max-width: 760px; }
.shelf__book { position: relative; display: block; aspect-ratio: 2 / 3; background: #e6e6ec; overflow: hidden; }
.shelf__book img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shelf__fb { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 28px; color: #77778a; }
.foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; padding: 56px var(--gut) 40px; }
.colophon { display: grid; gap: 4px; max-width: 760px; }
.colophon h2 { margin: 0; font-size: 22px; line-height: 1.27; font-stretch: 112%; font-variation-settings: "wdth" 112; font-weight: 900; letter-spacing: -.025em; }
.colophon p { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.3; }
.colophon .colophon__digression { font-size: 17px; font-weight: 700; }
.foot__right { display: grid; gap: 16px; justify-items: end; }
.hx-icons { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.hx-i { display: inline-flex; width: 22px; height: 22px; color: var(--ink); }
.hx-i svg { width: 100%; height: 100%; }
.hx-i:hover { color: var(--blue); }
.foot__mail { font-size: 19px; font-weight: 700; }

/* Talks page */
.pg-title { padding: 24px var(--gut) 56px; }
.pg-title h1 { margin: 0; font-size: clamp(80px, 13vw, 190px); line-height: .85; color: var(--blue); }
.fv { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 24px; padding: 0 var(--gut) 88px; align-items: start; }
.fv .vt { font-size: 24px; line-height: 1.12; margin-top: 8px; }
.fv .vm { font-size: 15px; margin-top: 4px; }
.fv .vid .play { width: 72px; height: 72px; }
.fv .vid .play::after { border-left-width: 24px; border-top-width: 14px; border-bottom-width: 14px; margin-left: 6px; }
.fv > :first-child .vt { font-size: 32px; }
.fv > :first-child .vid .play { width: 104px; height: 104px; }
.yr { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; padding: 40px var(--gut); border-top: 8px solid var(--ink); margin: 0 var(--gut); padding-left: 0; padding-right: 0; }
.yr__h { margin: 0; font-size: 80px; line-height: .85; color: var(--blue); }
.talks-list { list-style: none; margin: 0; padding: 0; }
.talk { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid #d6d6de; }
.talk:first-child { border-top: 0; padding-top: 4px; }
.talk__date { font-size: 15px; font-weight: 700; color: var(--blue); padding-top: 6px; }
.talk__line { margin: 0; font-size: 18px; line-height: 1.35; }
.talk__event { font-weight: 800; }
.talk__name { font-stretch: 112%; font-variation-settings: "wdth" 112; font-weight: 900; letter-spacing: -.02em; font-size: 26px; line-height: 1.1; display: block; margin-top: 2px; }
.talk__desc { margin: 8px 0 0; font-size: 17px; line-height: 1.5; max-width: 760px; color: var(--muted); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 2px solid var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.badge:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.badge .icon { width: 14px; height: 14px; fill: currentColor; }
.cta { background: var(--blue); color: #fff; padding: 56px var(--gut); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: 56px; }
.cta h2 { margin: 0; font-size: 40px; line-height: 1; }
.cta p { margin: 8px 0 0; max-width: 620px; font-size: 20px; color: var(--on-blue); }
.cta a { font-size: 22px; font-weight: 800; color: #fff; }

@media (max-width: 1000px) {
  .hero__row, .band__head, .wl, .cards { flex-direction: column; gap: 28px; }
  .offer { flex-direction: column; gap: 16px; }
  .offer h3 { flex: none; font-size: 36px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .feat__row { flex-direction: column; gap: 6px; }
  .feat__k { flex: none; }
  .feat__t { font-size: 26px; }
  .fv { grid-template-columns: 1fr; }
  .yr { grid-template-columns: 1fr; }
  .yr__h { font-size: 64px; }
}
@media (max-width: 600px) {
  .hero__deck { font-size: 21px; }
  .band { padding: 64px var(--gut); }
  .steps { grid-template-columns: 1fr; }
  .step b { font-size: 32px; }
  .vt { font-size: 30px; }
  .wl__listen h2, .feat h2 { font-size: 48px; }
  .card { padding: 28px; }
  .card--ink h3 { font-size: 34px; }
  .card--line h3 { font-size: 30px; }
  .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__right { justify-items: start; }
  .talk { grid-template-columns: 1fr; gap: 4px; }
  .talk__name { font-size: 22px; }
}

/* ──────────────────────────────────────────────────────────
   Work-first front page (October 28, 2026). Organised around the
   work: layered headline, Ron's point of view, the disciplines,
   selected work by kind of problem, craft / judgment / leverage,
   a short experience list. Same type and colours as above.
   ────────────────────────────────────────────────────────── */
.lh { padding: 40px var(--gut) 56px; }
.lh__h { margin: 0; font-size: clamp(52px, 8vw, 116px); line-height: .92; }
.lh__h span { display: block; white-space: nowrap; }
.lh__h span:nth-child(2) { padding-left: 12%; }
.lh__h span:nth-child(3) { padding-left: 4.5%; }
.lh__h span:nth-child(4) { padding-left: 32%; color: var(--blue); }
.lh__deck { max-width: 640px; margin: 48px 0 0 auto; margin-right: 4%; font-size: 23px; font-weight: 500; line-height: 1.48; }
.lh__deck p { margin: 0 0 14px; }
.lh__np { max-width: 640px; margin: 18px 0 0 auto; margin-right: 4%; font-size: 17px; font-weight: 600; }

/* Point of view: Ron's own writing. Shows bars until written. */
.pov { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; padding: 72px var(--gut) 96px; }
.pov__h { margin: 0; font-size: clamp(40px, 4.4vw, 64px); line-height: .98; color: var(--blue); }
.pov__date { margin: 18px 0 0; font-size: 15px; font-weight: 600; }
.pov__body { font-size: 22px; line-height: 1.55; }
.pov__body p { margin: 0 0 18px; }
.pov__body blockquote { margin: 8px 0 26px; padding: 4px 0 4px 26px; border-left: 6px solid var(--blue); font-stretch: 112%; font-variation-settings: "wdth" 112; font-weight: 900; font-size: 30px; line-height: 1.15; letter-spacing: -.02em; }
.draft .pov__h, .draft .pov__body { display: none; }
.pov:not(.draft) .bars { display: none; }
.bars { display: grid; gap: 13px; align-content: start; }
.bars i { display: block; height: 13px; background: #e2e2ea; }
.bars--h i { height: 60px; background: var(--blue); }
.bars--h i:nth-child(1) { width: 96%; } .bars--h i:nth-child(2) { width: 82%; } .bars--h i:nth-child(3) { width: 54%; }
.bars i.gap { height: 10px; background: none; }

/* Disciplines */
.disc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--blue); color: #fff; padding: 0 var(--gut); }
.disc span { padding: 28px 20px 30px 0; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.02; }
.disc span + span { padding-left: 24px; border-left: 2px solid var(--blue-rule); }
.strip--action { object-position: 50% 45%; }

/* Selected work */
.work { padding: 104px var(--gut) 40px; }
.work > h2 { margin: 0 0 48px; font-size: clamp(52px, 7vw, 104px); line-height: .92; }
.case { display: grid; gap: 24px; padding: 32px 0 72px; border-top: 8px solid var(--ink); }
.case__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.case__t { margin: 0; max-width: 900px; font-size: clamp(32px, 3.4vw, 50px); line-height: 1; }
.case__tags { font-size: 17px; font-weight: 700; color: var(--blue); }
.case__row { display: grid; grid-template-columns: 8fr 5fr; gap: 32px; align-items: end; }
.case:nth-of-type(even) .case__row { grid-template-columns: 5fr 8fr; }
.case:nth-of-type(even) .case__art { order: 2; }
.case__art { aspect-ratio: 16 / 10; border: 2px dashed var(--blue); display: flex; align-items: flex-end; padding: 20px; font-size: 16px; font-weight: 700; color: var(--blue); }
.case__art img { width: 100%; height: 100%; object-fit: cover; }
.case__tx { display: grid; gap: 18px; }
.case__tx > p { margin: 0; font-size: 21px; line-height: 1.48; }
.case__why { display: grid; gap: 10px; padding-top: 14px; border-top: 2px solid var(--ink); }
.case__why b { font-size: 15px; font-weight: 800; color: var(--blue); }
.case__why .bars i { height: 11px; }

/* Craft, judgment, leverage */
.cjl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; background: var(--blue); color: #fff; padding: 96px var(--gut) 104px; }
.cjl div { display: grid; gap: 14px; align-content: start; }
.cjl div:nth-child(2) { padding-top: 64px; }
.cjl div:nth-child(3) { padding-top: 128px; }
.cjl b { font-stretch: 62%; font-variation-settings: "wdth" 62; font-weight: 900; font-size: clamp(64px, 7.4vw, 110px); line-height: .82; text-transform: uppercase; letter-spacing: -.01em; }
.cjl p { margin: 0; max-width: 380px; font-size: 20px; line-height: 1.45; color: var(--on-blue); }

/* Experience */
.exp { display: grid; grid-template-columns: 4fr 8fr; gap: 32px; padding: 104px var(--gut) 24px; }
.exp h2 { margin: 0; font-size: clamp(40px, 4vw, 56px); line-height: 1; }
.exp ul { list-style: none; margin: 0; padding: 0; border-bottom: 2px solid var(--ink); }
.exp li { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 16px 0; border-top: 2px solid var(--ink); align-items: baseline; }
.exp li b { font-size: 21px; font-weight: 800; line-height: 1.25; }
.exp li span { font-size: 17px; font-weight: 600; color: var(--blue); }

/* Featured, as a plain list on white */
.feat--plain { color: var(--ink); }
.feat--plain .feat__row { border-top-color: var(--ink); }
.feat--plain .feat__k { color: var(--blue); }
.feat--plain .feat__t { font-size: 28px; }

@media (max-width: 1000px) {
  .lh__h span { white-space: normal; padding-left: 0 !important; }
  .lh__deck, .lh__np { margin-left: 0; margin-right: 0; }
  .pov, .exp { grid-template-columns: 1fr; gap: 28px; }
  .disc { grid-template-columns: 1fr 1fr; }
  .disc span:nth-child(3) { padding-left: 0; border-left: 0; }
  .disc span:nth-child(n+3) { border-top: 2px solid var(--blue-rule); }
  .case__row, .case:nth-of-type(even) .case__row { grid-template-columns: 1fr; }
  .case:nth-of-type(even) .case__art { order: 0; }
  .cjl { grid-template-columns: 1fr; gap: 40px; }
  .cjl div:nth-child(n) { padding-top: 0; }
  .exp li { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 600px) {
  .lh__deck { font-size: 20px; }
  .disc { grid-template-columns: 1fr; }
  .disc span, .disc span + span { padding: 18px 0; border-left: 0; }
  .disc span + span { border-top: 2px solid var(--blue-rule); }
  .bars--h i { height: 40px; }
}

/* Examples of practice: the work, the change, the method, the judgment.
   Lenses (Language, Experience, Product, Systems) are tags on each
   example, and the band under the intro is their key. */
.lenses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--blue); color: #fff; padding: 0 var(--gut); }
.lenses div { padding: 26px 20px 30px 0; display: grid; gap: 8px; align-content: start; }
.lenses div + div { padding-left: 24px; border-left: 2px solid var(--blue-rule); }
.lenses b { font-stretch: 118%; font-variation-settings: "wdth" 118; font-weight: 900; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; letter-spacing: -.02em; }
.lenses span { font-size: 17px; line-height: 1.4; color: var(--on-blue); }
.ex { display: grid; gap: 28px; padding: 32px 0 80px; border-top: 8px solid var(--ink); }
.ex__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.ex__t { margin: 0; max-width: 900px; font-size: clamp(32px, 3.4vw, 50px); line-height: 1; flex: 1 1 520px; }
.ex__head .bars--h { flex: 1 1 520px; }
.ex__head .bars--h i { height: 44px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 6px 12px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 800; }
.ex__grid { display: grid; grid-template-columns: 8fr 4fr; gap: 24px; }
.ex__lab { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 800; color: var(--blue); }
.slot { border: 2px dashed var(--blue); display: flex; align-items: flex-end; padding: 16px; font-size: 15px; font-weight: 700; color: var(--blue); background: #f6f7ff; }
.slot--work { aspect-ratio: 16 / 10; }
.ex__change { display: grid; grid-template-rows: auto 1fr 1fr; gap: 12px; }
.ex__change .slot { min-height: 120px; }
.ex__text { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ex__text > div { padding-top: 14px; border-top: 2px solid var(--ink); }
.ex__text p { margin: 0; font-size: 20px; line-height: 1.5; }
.ex__text .bars i { height: 11px; }
@media (max-width: 1000px) {
  .lenses { grid-template-columns: 1fr 1fr; }
  .lenses div:nth-child(3) { padding-left: 0; border-left: 0; }
  .lenses div:nth-child(n+3) { border-top: 2px solid var(--blue-rule); }
  .ex__grid, .ex__text { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lenses { grid-template-columns: 1fr; }
  .lenses div, .lenses div + div { padding: 18px 0; border-left: 0; }
  .lenses div + div { border-top: 2px solid var(--blue-rule); }
}

/* About page */
.ab__photo { margin: 0 0 72px; }
.ab__photo img { display: block; width: 100%; height: clamp(320px, 52vw, 760px); object-fit: cover; }
.ab { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; padding: 0 var(--gut) 96px; border-bottom: 8px solid var(--ink); margin: 0 var(--gut); padding-left: 0; padding-right: 0; }
.ab__lede { margin: 0; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.15; font-weight: 800; font-stretch: 108%; font-variation-settings: "wdth" 108; letter-spacing: -.02em; color: var(--blue); }
.ab__text { display: grid; gap: 22px; max-width: 680px; }
.ab__text p { margin: 0; font-size: 20px; line-height: 1.55; font-weight: 500; }
.ab a { color: inherit; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ab a:hover { color: var(--blue); }
@media (max-width: 760px) {
  .ab { grid-template-columns: 1fr; gap: 32px; padding-bottom: 64px; }
  .ab__photo { margin-bottom: 40px; }
  .ab__text p { font-size: 18px; }
}

/* Footer: social icons sit on their own row above the colophon */
.foot > .hx-icons { flex-basis: 100%; }
.foot__right { margin-left: auto; }
@media (max-width: 760px) { .foot__right { margin-left: 0; justify-items: start; } }

/* Envelope contact button in the nav */
.nav-mail { display: inline-flex; align-items: center; color: inherit; }
.nav-mail svg { display: block; width: 22px; height: 22px; }
.nav-mail:hover { color: var(--blue); }

/* Mighty Ducks colorway for every .design page: near black, eggplant, jade, silver */
/* Light scheme (default): Michigan maize and blue */
body.pg-ducks { --paper: #ffcb05; --ink: #00274c; --blue: #00274c; --egg: #00274c; --on-blue: #fff0b3; --blue-tint: #ffcb05; --blue-rule: rgba(0, 39, 76, .3); --muted: #1d3557; --soft: rgba(0, 39, 76, .07); --rule-soft: rgba(0, 39, 76, .22); --shelf: #e6b700; --band-fg: #ffcb05; --np-bg: #ffcb05; --np-fg: #00274c; --np-accent: #00274c; }
/* Dark scheme: New Jersey Devils red, black and white, with the Colorado Rockies gold and blue they started as */
html[data-theme="dark"] body.pg-ducks { --paper: #0b0b0b; --ink: #ffffff; --blue: #fdbd06; --egg: #e3002a; --on-blue: #ffe3e6; --blue-tint: #fdbd06; --blue-rule: rgba(255, 255, 255, .3); --muted: #c9c9c9; --soft: rgba(255, 255, 255, .05); --rule-soft: rgba(255, 255, 255, .2); --shelf: #1c1c1c; --band-fg: #ffffff; --np-bg: #0b0b0b; --np-fg: #ffffff; --np-accent: #fdbd06; --alt: #0c1f7a; --navy: #0c1f7a; }
body.pg-ducks .lenses, body.pg-ducks .band--blue, body.pg-ducks .disc, body.pg-ducks .cjl, body.pg-ducks .cta { background: var(--egg); }
body.pg-ducks .chips span { background: var(--egg); color: var(--band-fg); }
body.pg-ducks .bars i { background: var(--rule-soft); }
body.pg-ducks .bars--h i { background: var(--blue); }
body.pg-ducks .slot { background: var(--soft); }
body.pg-ducks .talk { border-top-color: var(--rule-soft); }
body.pg-ducks .yr, body.pg-ducks .ab { border-color: var(--muted); }
body.pg-ducks .badge:hover { color: var(--paper); }
body.pg-ducks .pg-title h1 { text-transform: uppercase; font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 900; letter-spacing: -.02em; }
body.pg-ducks .ab a { text-decoration-color: var(--blue); }
body.pg-ducks .shelf__book { background: var(--shelf); }
body.pg-ducks .foot { background: var(--egg); color: var(--band-fg); margin-top: 88px; padding-top: 48px; }
body.pg-ducks .foot .hx-i { color: var(--band-fg); }
body.pg-ducks .foot a:hover, body.pg-ducks .foot .hx-i:hover { color: var(--blue-tint); }


/* Selected work, filled: a figure for the work sample and a Before /
   After pair in place of the dashed slots (October 28, 2026) */
.ex__head .ex__t { flex: 1 1 520px; }
.ex__shot { margin: 0; display: grid; gap: 10px; }
.ex__shot a { display: block; }
.ex__shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 40%; background: #241b33; }
.ex__shot--top img { object-position: 50% 0; }
.ex__shot figcaption { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--muted); }
.ex__shot figcaption a { display: inline; }
.ba { padding: 16px 18px 18px; border-top: 4px solid var(--blue); background: rgba(127, 127, 160, .08); display: grid; gap: 6px; align-content: start; }
.ba b { font-size: 15px; font-weight: 800; color: var(--blue); }
.ba p { margin: 0; font-size: 17px; line-height: 1.45; }
.ba--after { background: var(--egg, var(--blue)); border-top-color: var(--blue); color: #fff; }
.ba--after b { color: var(--blue-tint); }
body.pg-ducks .ba { background: var(--soft); }
body.pg-ducks .ba--after { background: var(--egg); }
@media (max-width: 600px) { .ba p { font-size: 17px; } .ex__text p { font-size: 18px; } }
.ex__change { grid-template-rows: auto auto 1fr; }

/* Cases: each led by the question it answered, then the same rows every time */
.cs { padding: 40px 0 96px; border-top: 8px solid var(--ink); }
.cs__head { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 16px 40px; align-items: start; margin-bottom: 40px; }
.cs__t { grid-column: 1; margin: 0; font-size: clamp(36px, 4vw, 60px); line-height: .98; }
.cs__q { grid-column: 1; margin: 0; max-width: 820px; font-size: clamp(22px, 2vw, 28px); font-weight: 500; line-height: 1.3; color: var(--blue); }
.cs__head .chips { grid-column: 2; grid-row: 1; justify-content: flex-end; }
.cs__rows { display: grid; }
.cs__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px; padding: 20px 0 24px; border-top: 2px solid var(--blue-rule, var(--hair)); }
.cs__row h4 { margin: 0; padding-top: 4px; font-size: 17px; font-weight: 900; font-stretch: 112%; font-variation-settings: "wdth" 112; color: var(--blue); }
.cs__row p { margin: 0; max-width: 760px; font-size: 20px; line-height: 1.55; }
.cs__shot { margin: 0; }
.cs__shot a, .cs__shot img { display: block; }
.cs__shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 0; background: var(--shelf, #241b33); }
.cs__row--change { background: var(--egg, var(--blue)); color: var(--band-fg, #fff); border-top: 0; margin-top: 8px; padding: 28px 28px 32px; }
.cs__row--change h4 { color: var(--blue-tint); }
.cs__row--change p { font-size: 22px; font-weight: 600; line-height: 1.45; }
@media (max-width: 760px) {
  .cs__head { grid-template-columns: 1fr; }
  .cs__head .chips { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .cs__row { grid-template-columns: 1fr; gap: 8px; }
  .cs__row p { font-size: 18px; }
  .cs__row--change { padding: 22px 18px 24px; }
  .cs__row--change p { font-size: 19px; }
}

/* Light scheme touches: black bands carry yellow labels, the last hero line is set on a black block */
body.pg-ducks .lenses b { color: var(--blue-tint); }
html:not([data-theme="dark"]) body.pg-ducks .lh__h span:last-child { display: inline-block; width: fit-content; background: #00274c; color: #ffcb05; padding: 0 .12em .04em; }
html:not([data-theme="dark"]) body.pg-ducks .ex__shot img, html:not([data-theme="dark"]) body.pg-ducks .cs__shot img { outline: 2px solid #00274c; }

/* Colour scheme swatches in the nav, two small squares */
.top nav { align-items: center; }
.schemes { display: inline-flex; gap: 10px; align-items: center; }
.scheme { display: flex; width: 22px; height: 22px; padding: 0; overflow: hidden; border: 2px solid var(--ink); border-radius: 0; background: none; cursor: pointer; }
.scheme span { flex: 1; }
.scheme[data-theme-choice="light"] span:nth-child(1) { background: #ffcb05; }
.scheme[data-theme-choice="light"] span:nth-child(2) { background: #00274c; }
.scheme[data-theme-choice="dark"] span:nth-child(1) { background: #e3002a; }
.scheme[data-theme-choice="dark"] span:nth-child(2) { background: #0c1f7a; }
.scheme[data-theme-choice="dark"] span:nth-child(3) { background: #ffffff; }
.scheme[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.scheme:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Now listening bar, full width at the top of the footer */
.foot .np { flex: 0 0 100%; order: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 14px 18px; background: var(--np-bg); color: var(--np-fg); font-size: 17px; font-weight: 600; }
.foot .hx-icons { order: -1; }
.np a { color: var(--np-fg); text-decoration: none; }
.np a:hover { text-decoration: underline; }
.np__eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; }
.np__eq i { display: block; width: 5px; background: var(--np-accent); transform-origin: bottom; animation: np-eq 1.1s ease-in-out infinite alternate; }
.np__eq i:nth-child(1) { height: 60%; } .np__eq i:nth-child(2) { height: 100%; animation-delay: -.4s; } .np__eq i:nth-child(3) { height: 40%; animation-delay: -.8s; }
@keyframes np-eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .np__eq i { animation: none; } }
.np__label { font-weight: 900; font-stretch: 112%; font-variation-settings: "wdth" 112; text-transform: uppercase; letter-spacing: .02em; color: var(--np-accent); }
.np__track b { font-weight: 800; }
.np__more { margin-left: auto; font-size: 15px; text-decoration: underline !important; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .top nav { gap: 8px 24px; }
  .np__more { margin-left: 0; }
}

/* Archivo stays on headlines, display type and the bold labels */
h1, h2, h3, .x, .top__name, .lenses b, .chips span, .np__label, .cs__row h4, .ba b, .feat__t, .talk__name, .vt, .yr__h, .pg-title h1, .foot__mail, .ex__lab { font-family: var(--a); }

/* Larger body text */
body { font-size: 21px; }
.lh__deck { font-size: 26px; }
.pov__body { font-size: 24px; }
.cs__row p { font-size: 22px; }
.cs__row--change p { font-size: 24px; }
.cs__q { font-size: clamp(24px, 2.2vw, 30px); }
.ab__text p { font-size: 22px; }
.talk__desc { font-size: 19px; }
.talk__line { font-size: 20px; }
.lenses span { font-size: 18px; }
.exp li span { font-size: 19px; }
.feat__k { font-size: 18px; }
.np { font-size: 19px; }
@media (max-width: 760px) {
  body { font-size: 19px; }
  .lh__deck { font-size: 22px; }
  .pov__body { font-size: 20px; }
  .cs__row p, .ab__text p { font-size: 19px; }
  .cs__row--change p { font-size: 20px; }
  .talk__desc { font-size: 18px; }
}

/* Subhead under the hero, its own h2 */
h2.lh__deck { max-width: 880px; margin: 56px 0 0 auto; margin-right: 4%; font-family: var(--t); font-size: clamp(30px, 2.8vw, 42px); font-weight: 600; line-height: 1.22; letter-spacing: -.01em; }
@media (max-width: 760px) { h2.lh__deck { margin: 36px 0 0; font-size: 26px; } }

/* Dark scheme: Rockies blue for the change rows, gold labels on every band */
html[data-theme="dark"] body.pg-ducks .cs__row--change { background: var(--alt); }
html[data-theme="dark"] body.pg-ducks .cs__row--change h4, html[data-theme="dark"] body.pg-ducks .lenses b { color: #fdbd06; }
html[data-theme="dark"] body.pg-ducks .ab__lede { color: #fdbd06; }
.scheme[data-theme-choice="dark"] span:nth-child(3) { background: #fdbd06; }

/* Dark scheme: the sleeve stripes from the Devils' Rockies tribute jersey,
   navy, red, gold, red, navy, across the top of the lenses band and the footer */
html[data-theme="dark"] body.pg-ducks .lenses, html[data-theme="dark"] body.pg-ducks .foot { border-top: 0; background-image: linear-gradient(#0c1f7a 0 6px, #e3002a 6px 12px, #fdbd06 12px 24px, #e3002a 24px 30px, #0c1f7a 30px 36px, transparent 36px); background-repeat: no-repeat; padding-top: 36px; }
html[data-theme="dark"] body.pg-ducks .foot { padding-top: 84px; }

/* Dark scheme: lenses band on white with red names, for contrast
   (gold on red failed WCAG at 2.9:1) */
html[data-theme="dark"] body.pg-ducks .lenses { background-color: #ffffff; color: #0b0b0b; }
html[data-theme="dark"] body.pg-ducks .lenses b { color: #c8001f; }
html[data-theme="dark"] body.pg-ducks .lenses span { color: #1a1a1a; }
html[data-theme="dark"] body.pg-ducks .lenses div + div { border-left-color: rgba(11, 11, 11, .18); }
html[data-theme="dark"] body.pg-ducks .foot a:hover, html[data-theme="dark"] body.pg-ducks .foot .hx-i:hover { color: #ffffff; opacity: .75; }
@media (max-width: 760px) { html[data-theme="dark"] body.pg-ducks .lenses div + div { border-top-color: rgba(11, 11, 11, .18); } }

/* No hard dividers. Sections separate through space and type scale. */
.yr, .ex, .cs, .case, .ab, .step, .pod, .case__why, .ex__text > div, .offer, .feat__row, .cs__row, .talk, .exp ul, .exp li { border-top: 0; border-bottom: 0; }
.yr { padding-top: 64px; }
.cs { padding-top: 24px; padding-bottom: 120px; }
.cs__row { padding: 14px 0 18px; }
.cs__row--change { margin-top: 18px; }
.talk { padding: 14px 0; }
.feat__row { padding: 16px 0; }
.exp li { padding: 10px 0; }
.lenses div + div, .disc span + span { border-left: 0; }
.lenses div:nth-child(n+3), .lenses div + div, .disc span:nth-child(n+3), .disc span + span { border-top: 0; }
html[data-theme="dark"] body.pg-ducks .lenses, html[data-theme="dark"] body.pg-ducks .foot { background-image: none; padding-top: 0; }
html[data-theme="dark"] body.pg-ducks .foot { padding-top: 48px; }

/* ──────────────────────────────────────────────────────────
   Editorial type scale (October 28, 2026)
   One deliberate ladder so the pages scan. Display and heading
   levels are Archivo, wide and heavy; reading text is Switzer at
   distinct sizes per job; small meta is Archivo narrow with tracking.

   H1  display / page title   Archivo 900, wdth 118–125 (rules above)
   H2  section head           Archivo 900, wdth 118, 44–72px
   H2  lede (.lh__deck, .ab__lede)  Switzer 600, 28–40px
   H3  case / item title      Archivo 900, wdth 112, 30–48px (talks 26px)
   H4  row label              Archivo 800, wdth 100, 15px caps, tracked
   P   standfirst (.cs__q)    Switzer 500, 24–29px
   P   body                   Switzer 400, 21px (19px small screens)
   P   note / event line      Switzer 500, 17px
   meta (dates, kickers)      Archivo 700, wdth 82, 13–14px caps, tracked
   ────────────────────────────────────────────────────────── */
body.pg-ducks {
  --h2-size: clamp(44px, 5vw, 72px);
  --h3-size: clamp(30px, 3.2vw, 48px);
  --lede-size: clamp(28px, 2.7vw, 40px);
  --stand-size: clamp(24px, 2.1vw, 29px);
  --body-size: 21px;
  --note-size: 17px;
  --meta-size: 14px;
}

/* H2 section heads: Three problems, Experience, Listen, Talks and
   writing, Reading, and the Talks page call to action share one style */
.work > h2, .exp h2, .wl__listen h2, .feat h2, .reading h2, .cta h2 {
  margin: 0; font-family: var(--a); font-size: var(--h2-size); line-height: .94;
  font-weight: 900; font-stretch: 118%; font-variation-settings: "wdth" 118; letter-spacing: -.025em;
}
.work > h2 { margin-bottom: 56px; }
.feat h2 { margin-bottom: 32px; }
.reading h2 { margin-bottom: 24px; }
.reading { padding-top: 104px; }
.pov__h { font-size: var(--h2-size); line-height: .96; letter-spacing: -.025em; }

/* Ledes: the hero subhead and the About intro, Switzer semibold */
h2.lh__deck, h2.ab__lede {
  font-family: var(--t); font-size: var(--lede-size); font-weight: 600; line-height: 1.22;
  font-stretch: 100%; font-variation-settings: normal; letter-spacing: -.012em;
}
h2.ab__lede { margin: 0; max-width: 620px; }

/* H3 case titles, then the case question as a standfirst */
.cs__t { font-size: var(--h3-size); line-height: 1; font-stretch: 112%; font-variation-settings: "wdth" 112; letter-spacing: -.022em; }
.cs__q { margin-top: 6px; font-family: var(--t); font-size: var(--stand-size); font-weight: 500; line-height: 1.3; letter-spacing: -.005em; }

/* H4 row labels: small, caps, tracked, so they read as labels and not text */
.cs__row h4 {
  font-size: 15px; font-weight: 800; font-stretch: 100%; font-variation-settings: "wdth" 100;
  text-transform: uppercase; letter-spacing: .07em; line-height: 1.3; padding-top: 7px;
}
/* Body text: regular weight, generous leading */
.cs__row p, .ab__text p { font-size: var(--body-size); font-weight: 400; line-height: 1.6; }
.cs__row--change p { font-size: 23px; font-weight: 600; line-height: 1.42; }
.pov__body { font-size: 23px; line-height: 1.58; }
.ab__text { gap: 24px; }

/* Item titles in lists: Archivo, a step below H3 */
.vt { font-family: var(--a); font-weight: 900; font-stretch: 112%; font-variation-settings: "wdth" 112; letter-spacing: -.02em; }
.feat__t { font-family: var(--a); font-weight: 800; font-stretch: 108%; font-variation-settings: "wdth" 108; letter-spacing: -.015em; line-height: 1.1; }
.feat--plain .feat__t { font-size: 28px; }
.pod b { font-family: var(--a); font-size: 21px; font-weight: 800; font-stretch: 108%; font-variation-settings: "wdth" 108; letter-spacing: -.01em; line-height: 1.2; }
.exp li b { font-size: 21px; font-weight: 700; line-height: 1.28; }

/* Notes: Switzer, smaller, medium weight */
.exp li span, .pod span, .lenses span { font-size: var(--note-size); font-weight: 500; line-height: 1.45; }

/* Meta: dates and kickers, Archivo narrow, caps, tracked */
.pov__date, .vm, .feat__k, .talk__date {
  font-family: var(--a); font-size: var(--meta-size); font-weight: 700; font-stretch: 82%; font-variation-settings: "wdth" 82;
  text-transform: uppercase; letter-spacing: .1em; line-height: 1.35;
}
.pov__date { margin-top: 20px; color: var(--blue); }
.feat__k { font-size: 13px; }
.vm { color: var(--muted); }

/* Talks: year (H2), talk title (H3), event line, description */
.yr__h { font-size: clamp(64px, 6vw, 88px); }
.talk { padding: 18px 0 20px; }
.talk__date { padding-top: 9px; color: var(--blue); }
.talk__name {
  margin: 0; font-family: var(--a); font-size: 27px; line-height: 1.08; font-weight: 900;
  font-stretch: 112%; font-variation-settings: "wdth" 112; letter-spacing: -.02em;
}
.talk__line { margin: 6px 0 0; font-size: var(--note-size); font-weight: 500; line-height: 1.4; color: var(--muted); }
.talk__name + .talk__line { margin-top: 8px; }
.talk__line:first-child { margin-top: 4px; }
.talk__event { font-weight: 700; color: var(--ink); }
.talk__desc { margin-top: 12px; font-size: 19px; font-weight: 400; line-height: 1.58; color: var(--ink); max-width: 720px; }
.fv .vt { letter-spacing: -.015em; }

@media (max-width: 760px) {
  body.pg-ducks { --body-size: 19px; --note-size: 16px; --meta-size: 13px; }
  h2.lh__deck, h2.ab__lede { font-size: 25px; line-height: 1.25; }
  .cs__q { font-size: 22px; }
  .cs__row h4 { font-size: 14px; padding-top: 0; }
  .cs__row--change p { font-size: 20px; }
  .pov__body { font-size: 20px; }
  .work > h2 { margin-bottom: 36px; }
  .reading { padding-top: 72px; }
  .feat--plain .feat__t { font-size: 24px; }
  .talk__name { font-size: 22px; }
  .talk__desc { font-size: 17px; }
}
/* Appearances without a talk title: the event line leads, one step up */
.talk__body > .talk__line:first-child { font-size: 19px; color: var(--ink); }
@media (max-width: 760px) { .talk__body > .talk__line:first-child { font-size: 17px; } }

/* Now listening: listening site plus streaming service icons */
.np__links { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; }
.np__links .np__more { margin-left: 0; }
.np__ic { display: inline-flex; width: 20px; height: 20px; color: inherit; }
.np__ic svg { width: 100%; height: 100%; }
.np__ic:hover { opacity: .7; }
@media (max-width: 760px) { .np__links { margin-left: 0; } }

/* 404 */
.e404 { padding: 0 var(--gut) 120px; }
.e404__lede { max-width: 900px; margin: 0; font-family: var(--t); font-weight: 600; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.25; }
.e404__links { margin: 28px 0 0; font-size: 22px; font-weight: 600; }

/* Mentions: quote block type */
.qt { padding: 104px var(--gut) 24px; }
.qt h2 { margin: 0 0 40px; font-size: clamp(40px, 4vw, 56px); line-height: 1; }
.qt__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 72px; max-width: 1200px; }
.qt__i { margin: 0; display: grid; gap: 22px; align-content: start; }
.qt__i blockquote { margin: 0; position: relative; padding-top: 52px; }
.qt__i blockquote::before { content: "\201C"; position: absolute; left: -4px; top: -18px; font-family: var(--a); font-weight: 900; font-size: 120px; line-height: 1; color: var(--egg); }
.qt__i blockquote p { margin: 0; font-stretch: 108%; font-variation-settings: "wdth" 108; font-weight: 800; font-size: clamp(24px, 2.2vw, 31px); line-height: 1.18; letter-spacing: -.015em; }
.qt__i figcaption { display: grid; gap: 4px; font-size: 17px; line-height: 1.4; }
.qt__i figcaption b { font-weight: 800; }
.qt__i figcaption span { color: var(--muted); }
html[data-theme="dark"] body.pg-ducks .qt__i blockquote::before { color: #fdbd06; }
.talks-else { margin: -48px var(--gut) 72px; font-size: 20px; font-weight: 600; }
.fv--two { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 900px) {
  .qt__list { grid-template-columns: 1fr; gap: 56px; }
  .fv--two { grid-template-columns: 1fr; }
  .talks-else { margin-top: -32px; }
}

/* ──────────────────────────────────────────────────────────
   Work-first front page (Oct 28, 2026), from the Paper board
   ".design, work-first", in the current colorways.
   ────────────────────────────────────────────────────────── */
/* Hero photo, full width under the nav, Night shift style */
.hero-ph { display: block; width: 100%; height: clamp(300px, 46vw, 680px); object-fit: cover; object-position: 36% 32%; }
.lh { padding-top: 64px; }

/* Say: bold subhead over a large reading paragraph */
.say { display: grid; grid-template-columns: 7fr 5fr; gap: 32px 64px; padding: 32px var(--gut) 104px; align-items: start; }
.say__h { margin: 0; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.08; letter-spacing: -.015em; color: var(--blue); }
.say__body { padding-top: 6px; }
.say__body p { margin: 0 0 20px; font-family: var(--t); font-weight: 500; font-size: clamp(22px, 1.75vw, 27px); line-height: 1.5; }
.say__body p + p { font-weight: 400; font-size: clamp(19px, 1.4vw, 22px); }

/* Disciplines band: labels only */
.lenses--labels div { padding-top: 30px; padding-bottom: 34px; }
.lenses--labels b { font-size: clamp(22px, 2.1vw, 32px); line-height: 1.02; }

/* Listen: two embeds */
.listen { padding: 104px var(--gut) 24px; }
.listen h2 { margin: 0 0 32px; font-size: clamp(48px, 5vw, 72px); line-height: .95; }
.listen__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.listen__i { display: grid; gap: 8px; align-content: start; }
.listen__i iframe { width: 100%; height: 175px; border: 0; border-radius: 0; background: var(--soft); }
.listen__t { margin: 10px 0 0; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.1; }
.listen__t a { text-decoration: none; }
.listen__t a:hover { text-decoration: underline; }
.listen__m { margin: 0; font-size: 17px; font-weight: 600; }

/* Craft, judgment, leverage */
.cjl { margin-top: 104px; }
.cjl__h { margin: 0; font-stretch: 62%; font-variation-settings: "wdth" 62; font-weight: 900; font-size: clamp(64px, 7.4vw, 110px); line-height: .82; text-transform: uppercase; letter-spacing: -.01em; color: var(--blue-tint); }

/* Watch: the talk, mid page */
.watch { display: grid; grid-template-columns: 8fr 4fr; gap: 40px; align-items: end; padding: 104px var(--gut) 0; }
.watch__tx { display: grid; gap: 14px; padding-bottom: 8px; }
.watch__h { margin: 0; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.04; }
.watch__m { margin: 0; font-size: 17px; font-weight: 600; }
.watch__go { font-size: 21px; font-weight: 800; }

/* Current bookshelf, fixed list */
.reading { padding-top: 88px; padding-bottom: 32px; }
.reading h2 { font-size: clamp(32px, 3vw, 44px); margin-bottom: 24px; }
.shelf--static { list-style: none; margin: 0; padding: 0; max-width: 1100px; gap: 24px; }
.shelf--static li { display: grid; gap: 4px; align-content: start; }
.shelf--static .shelf__book { margin-bottom: 8px; }
.shelf__t { font-size: 16px; font-weight: 800; line-height: 1.2; }
.shelf__a { font-size: 14px; font-weight: 500; line-height: 1.3; }

@media (max-width: 900px) {
  .say, .watch, .listen__grid { grid-template-columns: 1fr; }
  .say { padding-bottom: 72px; }
  .shelf--static { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lenses--labels { grid-template-columns: 1fr 1fr; }
}
.lh .lh__h { font-size: clamp(40px, 5.7vw, 84px); }
@media (max-width: 760px) { .lh .lh__h span { white-space: normal; padding-left: 0 !important; } }

/* Talks page: speaking intro and invite */
.spk { display: grid; grid-template-columns: 6fr 6fr; gap: 24px 64px; padding: 8px var(--gut) 72px; align-items: start; }
.spk__h { margin: 0; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.02; color: var(--blue); }
.spk__b p { margin: 0 0 24px; font-weight: 500; font-size: clamp(21px, 1.7vw, 26px); line-height: 1.48; }
.spk__btn { display: inline-block; padding: 16px 26px; background: var(--egg); color: var(--band-fg, #fff); font-weight: 800; font-size: 21px; text-decoration: none; }
.spk__btn:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 900px) { .spk { grid-template-columns: 1fr; } }

/* Colophon: always small and monospaced, on every page. */
.colophon, .colophon h2, .colophon p, .colophon .colophon__digression { font-family: var(--m); font-stretch: normal; font-variation-settings: normal; letter-spacing: 0; }
.colophon { gap: 6px; }
.colophon h2 { margin: 0 0 4px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; }
.colophon p, .colophon .colophon__digression { font-size: 13px; font-weight: 400; line-height: 1.55; }