/* Journal concept: components and layout. Tokens live in tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--cream);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--cobalt); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--cobalt-deep); }
h1, h2, h3 { font-family: var(--font-display); font-optical-sizing: auto; line-height: 1.05; margin: 0; letter-spacing: -0.015em; }
p { margin: 0 0 var(--s-4); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--mustard); border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-4); top: -60px; z-index: 100; background: var(--ink); color: var(--cream); padding: var(--s-2) var(--s-4); border-radius: var(--radius); font-weight: 600; }
.skip:focus { top: var(--s-4); color: var(--cream); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Paper surfaces ---------- */
.band { position: relative; padding: var(--s-9) 0; isolation: isolate; }
.band { --edge: url('img/edge-cream.webp'); }
/* Torn section edges are used sparingly: only bands marked band--tear. */
.band--tear::before { content: ''; position: absolute; left: 0; right: 0; top: -34px; height: 56px; z-index: 1; background: var(--edge) repeat-x 0 0 / 1024px 56px; pointer-events: none; }
.theme-sky #main > :first-child::before, .theme-sky #main > article:first-child > :first-child::before, .band--sky + .band--sky::before { display: none; }
.band--paper { --edge: url('img/edge-light.webp'); }
.band--sky { --edge: url('img/edge-sky.webp'); }
.band--cobalt { --edge: url('img/edge-cobalt.webp'); }
.band > .wrap { position: relative; z-index: 2; }

.band--cream { background: var(--cream) var(--paper-cream) 0 0 / 512px; }
.band--paper { background: var(--paper) var(--paper-light) 0 0 / 512px; }
.band--paper::before { opacity: .35; }
.band--sky {
  background-color: var(--sky);
  background-image:
    radial-gradient(60% 50% at 18% 20%, rgba(255, 255, 255, .12), transparent 70%),
    radial-gradient(50% 60% at 85% 75%, rgba(33, 78, 173, .12), transparent 70%),
    var(--paper-sky);
  background-size: auto, auto, 512px;
}
.band--cobalt { background: var(--cobalt) var(--paper-cobalt) 0 0 / 512px; color: var(--paper); }
.band--cobalt a:not(.btn) { color: var(--paper); }
.band--sky + .band--sky { padding-top: 0; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--cream) var(--paper-cream) 0 0 / 512px; border-bottom: 2px solid transparent; transition: border-color var(--t-fast), background-color var(--t-fast); }
/* iPhone Safari colors the status bar from the page behind a see-through header. On sky pages that
   must be the hero's sky, not the cream page, so the top of the screen matches the hero. Only the
   area outside the page (what Safari reads, and the pull-down overscroll) turns sky; the body
   still paints the page cream, so nothing on the page itself changes. */
html:has(body.theme-sky) { background-color: #67B7E5; }
.theme-sky .site-header { background: transparent; margin-bottom: -74px; transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast); }
.theme-sky .site-header.is-scrolled, .theme-sky .site-header:has(.is-open) { background: var(--sky) var(--paper-sky) 0 0 / 512px; }
.theme-sky #main > :first-child, .theme-sky #main > article:first-child > :first-child { border-top: 74px solid transparent; background-origin: border-box; }
.site-header.is-scrolled { border-bottom-color: var(--ink); }
.site-header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: 72px; }
.brand { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; letter-spacing: -0.01em; }
.brand:hover { color: var(--ink); }
.brand__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--vermilion); transform: translateY(-1px); transition: transform var(--t-fast) var(--ease); }
.brand:hover .brand__dot { transform: translateY(-1px) scale(1.35); }
.site-nav ul { display: flex; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-block; padding: var(--s-2) var(--s-3); color: var(--ink); font-weight: 600; font-size: 1rem; text-decoration: none; border-radius: var(--radius); position: relative; }
.site-nav a::after { content: ''; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 4px; height: 3px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast) var(--ease); }
.site-nav a:hover::after, .site-nav a[aria-current='page']::after { transform: scaleX(1); }
.site-nav a[aria-current='page']::after { background: var(--vermilion); height: 4px; }
/* Seven menu items since the AI course (October 2026): keep each label on one line, and tighten the spacing on tablets and small laptops (from 861px, where the menu button gives way to the full menu; November 2026: below 961px the menu ran past the edge). */
.site-nav a { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1100px) { .site-nav ul { gap: 0; } .site-nav a { padding-inline: var(--s-2); } .site-nav a::after { left: var(--s-2); right: var(--s-2); } }
.menu-btn { display: none; }

/* ---------- Editorial headline with torn strips ---------- */
.headline { filter: drop-shadow(0 4px 5px rgba(12, 22, 44, .2)) drop-shadow(0 1px 1px rgba(12, 22, 44, .12)); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.012em; word-spacing: 0.04em; margin: 0 0 var(--s-5); color: var(--ink); }
.headline--display { font-size: var(--fs-display); line-height: 1.04; }
.headline--xl { font-size: var(--fs-xl); line-height: 1.06; }
.headline--lg { font-size: var(--fs-lg); line-height: 1.08; }
.strip { position: relative; display: inline; padding: 0.02em 0.22em 0.06em; isolation: isolate; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.headline .strip { display: table; margin-bottom: 0.1em; }
.headline .strip:nth-child(2) { margin-left: 0.2em; }
.headline .strip:nth-child(3) { margin-left: 0.05em; }
.strip::before, .strip::after { content: ''; position: absolute; z-index: -1; }
.strip::before { inset: -4px -6px; background: var(--fringe); clip-path: var(--torn-fringe); }
.strip::after { inset: 0; background: var(--cream) var(--paper-cream) 0 0 / 512px; clip-path: var(--torn-a); }
.strip--b::after { clip-path: var(--torn-b); }
.strip--c::after { clip-path: var(--torn-c); }
.strip--a { transform: rotate(-0.6deg); }
.strip--b { transform: rotate(0.5deg); }
.strip--c { transform: rotate(-0.3deg); }
.band--cream .strip::after { background: var(--paper) var(--paper-light) 0 0 / 512px; }
.band--cream .strip::before { background: var(--cream-deep); }
.band--paper .strip::after { background: var(--cream) var(--paper-cream) 0 0 / 512px; }
.band--paper .strip::before { background: var(--cream-deep); }

.eyebrow { font-weight: 600; font-size: 1rem; color: var(--ink); margin: 0 0 var(--s-4); display: inline-flex; align-items: center; gap: var(--s-2); }
.eyebrow::before { content: ''; width: 28px; height: 3px; background: var(--vermilion); }
.eyebrow--on-sky::before { background: var(--ink); }
.eyebrow--on-dark { color: var(--paper); }
.eyebrow--on-dark::before { background: var(--mustard); }
.lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 60ch; color: var(--ink-soft); }
.band--sky .lead { color: var(--ink); }

/* ---------- Buttons and links ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0 0; }
.btn { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0.7rem 1.25rem; border: 2px solid var(--ink); border-radius: var(--radius); font-weight: 700; font-size: 1.02rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-print); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); color: var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn--primary { background: var(--vermilion); }
.btn--secondary { background: var(--paper); }
.btn--secondary:hover { background: var(--fringe); }
.btn--light { background: var(--paper); }
.btn svg { flex: none; transition: transform var(--t-fast) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.band--cobalt .btn { border-color: var(--ink); }
.textlink { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 3px solid var(--vermilion); padding-bottom: 2px; }
.textlink:hover { color: var(--ink); }
.textlink svg { transition: transform var(--t-fast) var(--ease); }

/* ---------- Tags, status ---------- */
.tag { display: inline-block; font-size: 0.82rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 3px; line-height: 1.4; }
.tag--illus { background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); }
.tag--evidence { background: var(--ink); color: var(--paper); }
.status { display: inline-block; font-size: 0.86rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper); line-height: 1.35; }
.status--draft { background: var(--mustard); }
.status--proposed { background: var(--paper); border-style: dashed; }
.kind { display: inline-block; font-size: 0.86rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 3px; background: var(--ink); color: var(--paper); }
.kind--on-sky { background: var(--paper); color: var(--ink); }

/* ---------- Illustrations ---------- */
.illus { position: relative; margin: 0; }
.illus { filter: var(--shadow-drop); }
.illus img { width: 100%; clip-path: var(--torn-b); }
.illus figcaption.tag { position: absolute; left: 12px; bottom: 12px; }

/* ---------- Hero ---------- */
.hero { position: relative; background-color: var(--sky); background-image: radial-gradient(55% 60% at 20% 15%, rgba(255, 255, 255, .14), transparent 70%), radial-gradient(40% 50% at 90% 30%, rgba(33, 78, 173, .12), transparent 70%), var(--paper-sky); background-size: auto, auto, 512px; overflow: hidden; isolation: isolate; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: 3; background-image: var(--grain); background-size: 180px; opacity: .25; pointer-events: none; mix-blend-mode: multiply; }
.hero__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr); gap: var(--s-5); padding-top: var(--s-7); }
.hero__copy { padding-bottom: clamp(350px, 30vw, 440px); }
@media (min-width: 861px) { .hero .headline .strip { white-space: nowrap; } }
.hero__sub { font-size: var(--fs-lead); line-height: 1.5; max-width: 34ch; margin: var(--s-5) 0 0; font-weight: 500; }
.hero__portrait { margin: 0; position: absolute; z-index: 2; bottom: 0; right: max(0px, calc((100vw - var(--wrap)) / 2)); width: min(46vw, 640px); }
.hero__portrait img { width: 100%; filter: drop-shadow(0 18px 22px rgba(12, 22, 44, .32)) drop-shadow(0 3px 4px rgba(12, 22, 44, .2)); }
.hero__in { position: static; }
.hero__copy { position: relative; z-index: 2; }
.hero__collage { position: absolute; left: 0; right: 0; bottom: -2px; z-index: 1; pointer-events: none; }
.hero__collage img { width: 100%; min-width: 1100px; max-width: none; height: auto; margin-left: 50%; transform: translateX(-50%); }

/* ---------- Intro (wording locked on the live site; reused verbatim) ---------- */
.intro__in { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-7); align-items: start; max-width: 1040px; }
.intro__face { width: 200px; aspect-ratio: 4 / 5; object-fit: cover; clip-path: var(--torn-fringe); transform: rotate(-2deg); background: #FDFBF4; padding: 9px; }
.intro__facewrap { filter: var(--shadow-drop); }
.intro__label { font-weight: 700; color: var(--vermilion-deep); margin-bottom: var(--s-2); }
.intro__h { font-size: var(--fs-h2); font-weight: 900; margin-bottom: var(--s-3); }
.intro__lead { font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.3; font-weight: 500; max-width: 34ch; }
.rows { margin: var(--s-6) 0 0; border-top: 2px solid var(--ink); }
.rows > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.rows dt { font-weight: 700; }
.rows dd { margin: 0; }

/* ---------- Section heads ---------- */
.section-head { max-width: 860px; margin-bottom: var(--s-7); }
.section-head__lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 60ch; color: var(--ink-soft); }
.more { margin-top: var(--s-7); }

/* ---------- Project previews ---------- */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); }
.pcard { position: relative; display: grid; gap: var(--s-5); align-content: start; }
.pcard__art { transition: transform var(--t-med) var(--ease); }

.pcard:hover .pcard__art { transform: rotate(-0.6deg) translateY(-5px); filter: drop-shadow(0 22px 26px rgba(12, 22, 44, .32)) drop-shadow(0 3px 4px rgba(12, 22, 44, .18)); }
.pcard__meta { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-3); }
.pcard__num { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; color: var(--vermilion-deep); }
.pcard__title { font-size: var(--fs-h3); font-weight: 900; line-height: 1.15; margin-bottom: var(--s-3); }
.pcard__title a { color: var(--ink); text-decoration: none; background-image: linear-gradient(var(--mustard), var(--mustard)); background-size: 0% 40%; background-repeat: no-repeat; background-position: 0 85%; transition: background-size var(--t-med) var(--ease); }
.pcard__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.pcard:hover .pcard__title a { background-size: 100% 40%; }
.pcard:hover .textlink svg { transform: translateX(4px); }
.pcard__short { color: var(--ink-soft); max-width: 52ch; }
.pcard .textlink { position: relative; z-index: 0; }
.pcard--feature { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: var(--s-7); }
.pcard--feature .pcard__title { font-size: var(--fs-h2); }
.facts { margin: 0 0 var(--s-5); }
.facts > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; }
.facts--bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: var(--s-4) 0; margin-bottom: var(--s-6); }
.facts--bar > div { display: block; border: 0; padding: 0; font-size: 1rem; }
.facts--bar dt { font-size: 0.9rem; color: var(--muted); margin-bottom: var(--s-1); }

/* Work index: varied layouts */
.work-list { display: grid; gap: var(--s-9); }
.work-list .pcard { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: var(--s-7); }
.work-list .pcard--split-reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.work-list .pcard--split-reverse .pcard__art { order: 2; }
.work-list .pcard--wide { grid-template-columns: minmax(0, 1fr); }
.work-list .pcard--wide .pcard__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 var(--s-7); align-items: start; }
.work-list .pcard--wide .pcard__body > :is(.pcard__meta, .pcard__title, .pcard__short) { grid-column: 1; }
.work-list .pcard--wide .facts { grid-column: 2; grid-row: 1 / span 3; }
.work-list .pcard--wide .textlink { grid-column: 1; justify-self: start; }
.work-list .pcard__title { font-size: var(--fs-h2); }

/* ---------- Thought previews ---------- */
.thought-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.tcard { position: relative; }
.tcard__link { display: grid; gap: var(--s-4); align-content: start; height: 100%; color: var(--ink); text-decoration: none; background: var(--paper) var(--paper-light) 0 0 / 512px; padding: var(--s-3) var(--s-3) var(--s-5); box-shadow: var(--shadow-paper); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.tcard:nth-child(odd) .tcard__link { transform: rotate(-0.4deg); }
.tcard:nth-child(even) .tcard__link { transform: rotate(0.5deg); }
.tcard__link:hover { color: var(--ink); transform: rotate(0deg) translateY(-6px); box-shadow: var(--shadow-lift); }
.tcard .illus { filter: none; }
.tcard__body { padding: 0 var(--s-2); display: grid; gap: var(--s-3); align-content: start; justify-items: start; }
.tcard__title { font-size: 1.3rem; font-weight: 900; line-height: 1.15; }
.tcard__sum { font-size: 1rem; color: var(--ink-soft); margin: 0; }
.tcard__more { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: 0.98rem; border-bottom: 3px solid var(--vermilion); padding-bottom: 2px; }
.tcard--feature { grid-column: 1 / -1; }
.tcard--feature .tcard__link { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: var(--s-6); padding: var(--s-4); }
.tcard--feature .tcard__title { font-size: var(--fs-h2); }
.tcard--feature .tcard__sum { font-size: var(--fs-lead); }
.thought-grid--related { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.thought-grid--index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tcard[hidden] { display: none; }

.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.filters[hidden] { display: none; }
.chip { font: inherit; font-weight: 600; font-size: 1rem; min-height: 44px; padding: 0.4rem 1rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; transition: background-color var(--t-fast); }
.chip:hover { background: var(--fringe); }
.chip[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.filter-empty { font-weight: 600; }

.earlier { margin-top: var(--s-8); border-top: 2px solid var(--ink); padding-top: var(--s-5); max-width: 760px; }
.earlier__h { font-size: var(--fs-h3); font-weight: 900; margin-bottom: var(--s-4); }
.earlier ul { list-style: none; margin: 0; padding: 0; }
.earlier li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.earlier a { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; color: var(--ink); }
.earlier span { color: var(--muted); font-size: var(--fs-small); }

/* ---------- Approach ---------- */
.approach__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-8); align-items: start; }
.approach__head { position: sticky; top: 110px; }
.approach__head .headline { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.8rem); }
.habits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); filter: var(--shadow-drop); }
.habit { position: relative; background: var(--paper) var(--paper-light) 0 0 / 512px; padding: var(--s-6) var(--s-6) var(--s-5); box-shadow: var(--shadow-paper); clip-path: var(--torn-b); }
.habit--b { transform: rotate(0.6deg); margin-left: var(--s-5); clip-path: var(--torn-c); }
.habit--c { transform: rotate(-0.4deg); }
.habit__n { position: absolute; top: var(--s-4); right: var(--s-5); font-family: var(--font-display); font-weight: 900; font-size: 2.6rem; line-height: 1; color: var(--cobalt); }
.habit h3 { font-size: var(--fs-h3); font-weight: 900; margin-bottom: var(--s-3); padding-right: 3.5rem; }
.habit p { margin: 0; max-width: 52ch; }

/* ---------- Closing and contact ---------- */
.closing__in, .contact__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.closing__body { font-size: var(--fs-lead); line-height: 1.55; max-width: 46ch; }
.closing .btn--primary { color: var(--ink); }
.email-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); font-weight: 600; }
.copy { font: inherit; font-weight: 700; font-size: 0.95rem; min-height: 40px; padding: 0.3rem 0.8rem; border-radius: var(--radius); border: 2px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.copy:hover { background: rgba(255, 255, 255, .12); }
.email-line--ink .copy:hover { background: rgba(255, 255, 255, .4); }
.copy-status { font-size: 0.95rem; }
.contact__body { font-size: var(--fs-lead); line-height: 1.55; max-width: 48ch; }
.small-h { font-size: var(--fs-h3); font-weight: 900; margin-bottom: var(--s-4); }
.placeholders { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-3); max-width: 760px; }
.placeholders li { display: grid; gap: var(--s-1); padding: var(--s-4); border: 2px dashed var(--ink); background: var(--paper); }
.fine { font-size: var(--fs-small); color: var(--muted); }
.band--cobalt .fine { color: var(--paper); }

/* ---------- Page heads ---------- */
.page-head { padding: var(--s-8) 0 var(--s-8); }
.page-head .lead { margin-top: var(--s-4); }
.crumbs { font-weight: 600; font-size: 0.98rem; margin-bottom: var(--s-4); }
.crumbs a { color: var(--ink); }

/* ---------- Project story ---------- */
.project-head { padding: var(--s-7) 0 var(--s-8); }
.project-head__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.project-head__short { font-size: var(--fs-lead); line-height: 1.5; max-width: 44ch; font-weight: 500; }

.story { display: grid; grid-template-columns: minmax(0, 66ch) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.story__main { display: grid; gap: var(--s-7); }
.story__sec h2, .decision h2, .next-step h2 { font-size: var(--fs-h3); font-weight: 900; margin-bottom: var(--s-3); }
.story__sec h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin: var(--s-5) 0 var(--s-2); letter-spacing: 0; }
.story__n { font-family: var(--font-display); font-weight: 900; color: var(--vermilion-deep); font-size: 1.05rem; margin: 0 0 var(--s-1); }
.built { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.built li { position: relative; padding-left: 1.6rem; }
.built li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.7rem; height: 0.7rem; border: 2.5px solid var(--ink); border-radius: 50%; }
.decision { position: relative; background: var(--paper) var(--paper-light) 0 0 / 512px; padding: var(--s-6); border: 2px solid var(--ink); box-shadow: var(--shadow-paper); }
.decision::after { content: ''; position: absolute; inset: -16px -26px; border: 3px solid var(--vermilion); border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; transform: rotate(-1.2deg); pointer-events: none; }
.decision p { font-size: var(--fs-lead); line-height: 1.5; margin: 0; }
.story__main > .next-step { filter: none; }
.next-step { background: var(--mustard); background-image: var(--grain); background-size: 180px; padding: var(--s-6); clip-path: var(--torn-a); }
.next-step p { margin: 0; font-weight: 500; }
.story__margin { display: grid; gap: var(--s-6); position: sticky; top: 110px; }
.note { position: relative; background: var(--paper) var(--paper-light) 0 0 / 512px; padding: var(--s-6) var(--s-5) var(--s-5); box-shadow: var(--shadow-paper); max-width: 340px; }
.note::before { content: ''; position: absolute; top: -9px; left: 50%; width: 84px; height: 20px; margin-left: -42px; background: var(--mustard); opacity: .85; transform: rotate(-3deg); }
.note--b { transform: rotate(1deg); }
.note--b::before { background: var(--pink); }
.note--a { transform: rotate(-1deg); }
.note__label { font-size: 0.86rem; font-weight: 700; color: var(--vermilion-deep); margin-bottom: var(--s-2); }
.note p:last-child { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.35; font-weight: 500; margin: 0; }
.evidence { margin: 0; }
.evidence__frame { border: 3px solid var(--ink); background: #fff; }
.evidence__frame img { width: 100%; }
.evidence figcaption { margin-top: var(--s-3); font-size: var(--fs-small); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.evidence--missing .evidence__frame { border-style: dashed; background: repeating-linear-gradient(-45deg, var(--paper) 0 14px, var(--cream) 14px 28px); aspect-ratio: 16 / 9; display: grid; place-items: center; padding: var(--s-5); text-align: center; }
.evidence--missing p { margin: 0; max-width: 40ch; background: var(--paper); padding: var(--s-4); border: 2px solid var(--ink); }
.evidence--missing strong { display: block; margin-bottom: var(--s-1); }
.next-project { padding: var(--s-7) 0; }
.next-project__link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h3); color: var(--ink); text-decoration: none; }
.next-project__link:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--vermilion); text-decoration-thickness: 3px; }

/* ---------- Articles ---------- */
.article-head { padding: var(--s-7) 0 var(--s-7); }
.article-head__in { max-width: 1000px; margin-bottom: var(--s-7); }
.article-head__sum { font-size: var(--fs-lead); line-height: 1.5; max-width: 52ch; font-weight: 500; }
.article-head__meta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; font-weight: 600; font-size: 0.98rem; }

.prose { max-width: var(--measure); margin: 0 auto; }
.prose p, .prose li { font-size: var(--fs-body); line-height: var(--lh-body); }
.prose h2 { font-size: var(--fs-h3); font-weight: 900; margin: var(--s-7) 0 var(--s-4); }
.prose ul { padding-left: 1.3rem; margin: 0 0 var(--s-5); }
.prose li { margin-bottom: var(--s-2); }
.prose li::marker { color: var(--vermilion-deep); }
.prose blockquote { margin: var(--s-6) 0; padding: var(--s-4) var(--s-5); border-left: 6px solid var(--mustard); font-family: var(--font-display); font-size: 1.4rem; }
.prose--about p:first-child { font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); line-height: 1.35; font-weight: 500; }
.draft-note { background: var(--cream); border: 2px dashed var(--ink); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-6); }
.sources { margin-top: var(--s-8); padding: var(--s-6); background: var(--cream); border-top: 4px solid var(--ink); }
.sources__h { font-size: 1.35rem; font-weight: 900; margin-bottom: var(--s-3); }
.sources p { font-size: 1rem; }
.sources ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.sources li { margin: 0; font-size: 1rem; }
.sources__kind { display: inline-block; font-size: 0.82rem; font-weight: 700; background: var(--ink); color: var(--paper); padding: 0.05rem 0.45rem; border-radius: 3px; margin-right: var(--s-2); }
.related__h { font-size: var(--fs-h3); font-weight: 900; margin-bottom: var(--s-6); }

/* ---------- About ---------- */
.about-head__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--s-7); align-items: end; }
.portrait-frame { margin: 0; position: relative; padding: 14px; background: #FDFBF4 var(--paper-light) 0 0 / 512px; transform: rotate(1.5deg); clip-path: var(--torn-fringe); max-width: 440px; justify-self: end; }
.portrait-wrap { filter: var(--shadow-drop); justify-self: end; }
.about-body { display: grid; }
.strata { margin: var(--s-6) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.strata__row { background: var(--paper) var(--paper-light) 0 0 / 512px; padding: var(--s-5); box-shadow: var(--shadow-paper); border-top: 6px solid var(--ink); }
.strata__row--1 { border-top-color: var(--mustard); }
.strata__row--2 { border-top-color: var(--pink); }
.strata dt { font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; margin-bottom: var(--s-2); }
.strata dd { margin: 0; }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--ink) var(--paper-ink) 0 0 / 512px; color: var(--paper); padding: var(--s-7) 0; }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: -34px; height: 56px; background: url('img/edge-ink.webp') repeat-x 0 0 / 1024px 56px; pointer-events: none; }
.site-footer__in { display: grid; gap: var(--s-4); }
.site-footer__principle { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); line-height: 1.1; margin: 0; }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.site-footer a { color: var(--paper); font-weight: 600; }
.site-footer a:hover { color: var(--mustard); }
.site-footer__small { font-size: var(--fs-small); color: #CFC6B3; margin: 0; }
.site-footer :focus-visible { outline-color: var(--paper); }

/* ---------- Style guide ---------- */
.sg-toc { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding-bottom: var(--s-5); border-bottom: 2px solid var(--ink); margin-bottom: var(--s-6); }
.sg-toc a { font-weight: 600; color: var(--ink); }
.sg-h { font-size: var(--fs-h2); font-weight: 900; margin: var(--s-8) 0 var(--s-4); }
.sg-p { max-width: var(--measure); }
.sg-label { font-size: 0.9rem; font-weight: 700; color: var(--muted); margin-bottom: var(--s-2); }
.sg-body { max-width: var(--measure); }
.type-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); }
.type-spec { display: grid; gap: var(--s-6); margin-bottom: var(--s-5); }
.swatches { list-style: none; padding: 0; margin: var(--s-5) 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-5); }
.swatches li { display: grid; gap: var(--s-1); font-size: var(--fs-small); }
.swatch { height: 90px; border: 2px solid var(--ink); clip-path: var(--torn-b); }
.swatches code { font-size: 0.85rem; color: var(--muted); }
.contrast { border-collapse: collapse; width: 100%; max-width: 760px; margin: var(--s-5) 0; font-size: var(--fs-small); }
.contrast caption { text-align: left; font-weight: 700; margin-bottom: var(--s-2); }
.contrast th, .contrast td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
.bg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); margin: var(--s-5) 0; }
.bg-sample { position: relative; isolation: isolate; padding: var(--s-6) var(--s-4); min-height: 160px; display: grid; align-content: end; gap: var(--s-1); border: 2px solid var(--ink); font-size: var(--fs-small); }
.bg-sample::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); background-size: 180px; opacity: .55; }
.bg-sample strong { font-size: 1.05rem; }
.comp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.comp { background: var(--cream); padding: var(--s-5); border: 1px solid var(--line); min-width: 0; }
.comp--wide { grid-column: 1 / -1; }
.comp .note { margin: var(--s-5) 0; }
.evi-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.evi-pair .illus { transform: rotate(-1deg); }
.portrait-spec { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.portrait-spec img { background: var(--sky); padding: var(--s-4) var(--s-4) 0; }
.rules { max-width: var(--measure); padding-left: 1.2rem; }
.rules li { margin-bottom: var(--s-3); }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.prompt { white-space: pre-wrap; background: var(--ink); color: var(--paper); padding: var(--s-5); font-size: 0.95rem; line-height: 1.6; max-width: 900px; border-radius: var(--radius); overflow-x: auto; }

/* ---------- Motion ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .hero .strip { opacity: 0; transform: translateY(12px) rotate(var(--r, 0deg)); animation: strip-in 700ms var(--ease) forwards; }
.js .hero .strip--a { --r: -0.6deg; animation-delay: 80ms; }
.js .hero .strip--b { --r: 0.5deg; animation-delay: 200ms; }
.js .hero .strip--c { --r: -0.3deg; animation-delay: 320ms; }
@keyframes strip-in { to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal, .js .hero .strip { opacity: 1; transform: none; }
  .js .hero .strip--a { transform: rotate(-0.6deg); }
  .js .hero .strip--b { transform: rotate(0.5deg); }
  .js .hero .strip--c { transform: rotate(-0.3deg); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .thought-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story { grid-template-columns: minmax(0, 1fr); }
  .story__margin { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .approach__in { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .approach__head { position: static; }
}

@media (max-width: 860px) {
  :root { --s-9: 4.5rem; --s-8: 3.25rem; }
  .menu-btn { display: inline-flex; align-items: center; gap: var(--s-2); font: inherit; font-weight: 700; min-height: 44px; padding: 0.4rem 0.9rem; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper); color: var(--ink); cursor: pointer; }
  .menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after { display: block; width: 18px; height: 2.5px; background: var(--ink); position: relative; transition: transform var(--t-fast); }
  .menu-btn__bars::before, .menu-btn__bars::after { content: ''; position: absolute; left: 0; }
  .menu-btn__bars::before { top: -6px; }
  .menu-btn__bars::after { top: 6px; }
  .menu-btn[aria-expanded='true'] .menu-btn__bars { background: transparent; }
  .menu-btn[aria-expanded='true'] .menu-btn__bars::before { transform: translateY(6px) rotate(45deg); }
  .menu-btn[aria-expanded='true'] .menu-btn__bars::after { transform: translateY(-6px) rotate(-45deg); }
  .js .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--cream); border-bottom: 2px solid var(--ink); border-top: 2px solid var(--ink); }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: var(--s-2) var(--gutter) var(--s-4); }
  .site-nav a { display: block; padding: var(--s-3) 0; font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; }
  .site-nav a::after { left: 0; right: auto; width: 3rem; }
  html:not(.js) .site-nav ul { flex-direction: row; flex-wrap: wrap; padding: 0; }
  html:not(.js) .menu-btn { display: none; }

  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: var(--s-5); position: relative; }
  .hero__copy { padding-bottom: var(--s-7); }
  .hero__portrait { margin: 0 auto; width: min(78vw, 400px); position: relative; right: auto; bottom: auto; z-index: 2; }
  .hero__portrait img { max-width: 100%; }
  .hero__collage { bottom: -2px; left: 50%; right: auto; width: min(118vw, 600px); transform: translateX(-50%); height: calc(min(78vw, 400px) * 1.19 + 60px); overflow: hidden; }
  .hero__collage img { min-width: 0; width: 100%; margin: 0; transform: none; }
  .hero { padding-bottom: 0; }

  .intro__in { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .intro__face { width: 140px; }
  .rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }

  .work-grid, .pcard--feature, .work-list .pcard, .work-list .pcard--split-reverse, .work-list .pcard--wide .pcard__body { grid-template-columns: minmax(0, 1fr); }
  .work-list .pcard--split-reverse .pcard__art { order: 0; }
  .work-list .pcard--wide .facts { grid-column: 1; grid-row: auto; }
  .work-list { gap: var(--s-8); }
  .pcard--feature, .work-list .pcard { gap: var(--s-5); }
  .tcard--feature .tcard__link { grid-template-columns: minmax(0, 1fr); padding: var(--s-3) var(--s-3) var(--s-5); }
  .thought-grid, .thought-grid--index { grid-template-columns: minmax(0, 1fr); }
  .closing__in, .contact__in, .project-head__in, .about-head__in { grid-template-columns: minmax(0, 1fr); }
  .portrait-wrap { justify-self: center; }
  .portrait-frame { max-width: 320px; }
  .facts--bar { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .habit--b { margin-left: 0; }
  .habit { padding: var(--s-5) var(--s-5) var(--s-4); }
  .strata { grid-template-columns: minmax(0, 1fr); }
  .comp-grid, .evi-pair, .portrait-spec { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decision::after { inset: -6px -6px; }
  .sources { padding: var(--s-5) var(--s-4); }
}

@media (max-width: 480px) {
  .headline--display { font-size: clamp(1.9rem, 9vw, 2.6rem); letter-spacing: -0.02em; word-spacing: 0; }
  .hero .headline .strip { white-space: nowrap; }
  .headline .strip:nth-child(2), .headline .strip:nth-child(3) { margin-left: 0; }
  .btn { width: 100%; justify-content: center; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
}


/* =====================================================================
   Refinement pass: calmer hierarchy, lighter controls, new components.
   ===================================================================== */

/* Section titles are plain type; paper strips are reserved for page titles. */
.section-title { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 var(--s-4); max-width: 22ch; text-wrap: balance; }
.section-title--sm { font-size: var(--fs-h3); max-width: none; margin-bottom: var(--s-5); }
.band--cobalt .section-title { color: var(--paper); }
.approach__head .section-title { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.8rem); }

/* Lighter buttons: no hard offset shadow, thinner outline. */
.btn { min-height: 46px; padding: 0.65rem 1.2rem; border-width: 1.5px; border-radius: 999px; font-weight: 650; box-shadow: 0 1px 2px rgba(12, 22, 44, .12), 0 4px 10px -4px rgba(12, 22, 44, .25); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(12, 22, 44, .14), 0 10px 18px -8px rgba(12, 22, 44, .35); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(12, 22, 44, .14); }
.btn--primary { border-color: transparent; }
.btn--secondary { background: rgba(255, 253, 247, .7); box-shadow: none; }
.btn--secondary:hover { background: var(--paper); box-shadow: 0 6px 14px -8px rgba(12, 22, 44, .3); }
.band--cobalt .btn--primary { border-color: transparent; }

/* Illustrations: clean frames with a soft shadow, no torn clip. */
.illus { filter: none; }
.illus img { clip-path: none; border-radius: 4px; box-shadow: 0 1px 2px rgba(12, 22, 44, .12), 0 14px 30px -14px rgba(12, 22, 44, .45); }
.pcard:hover .pcard__art { filter: none; }

/* Portraits: crisp, on a plain paper mount. */
.hero__portrait { width: min(44vw, 560px); }
.intro__face { clip-path: none; transform: none; padding: 8px; border-radius: 2px; box-shadow: var(--shadow-paper); }
.portrait-frame { clip-path: none; transform: none; padding: 10px; background: #FDFBF4; border-radius: 2px; box-shadow: var(--shadow-paper); max-width: 420px; justify-self: end; }

/* Habits: calm paper cards. */
.habits { filter: none; }
.habit { clip-path: none; transform: none; margin-left: 0; border-radius: 4px; }

/* Case study: decision and evidence. */
.decision { border: 0; border-left: 5px solid var(--vermilion); border-radius: 0 4px 4px 0; }
.decision::after { display: none; }
.decision__pair { display: grid; gap: var(--s-4); margin: 0; }
.decision__pair dt { font-weight: 700; font-size: 0.95rem; color: var(--muted); margin-bottom: var(--s-1); }
.decision__pair dd { margin: 0; font-size: var(--fs-lead); line-height: 1.5; }
.decision__pair div:last-child dd { font-weight: 600; color: var(--ink); }
.evidence-list { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-4); }
.evidence-list li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.evidence-list p { margin: 0; }
.ev-kind { justify-self: start; font-size: 0.8rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1.5px solid var(--ink); line-height: 1.35; white-space: nowrap; }
.ev-kind--live, .ev-kind--public, .ev-kind--live-prototype { background: var(--cobalt); border-color: var(--cobalt); color: var(--paper); }
.ev-kind--approval, .ev-kind--practice { background: var(--paper); }
.ev-kind--private, .ev-kind--not-yet { background: transparent; border-style: dashed; color: var(--ink-soft); }
.ev-kind--learning { background: var(--mustard); border-color: var(--mustard); }
.next-step { clip-path: none; background: var(--paper); background-image: none; border-top: 4px solid var(--mustard); border-radius: 0 0 4px 4px; box-shadow: var(--shadow-paper); }
.next-step h2 { margin-bottom: var(--s-2); }
.takeaway { margin: 0 0 var(--s-5); padding: var(--s-5); background: var(--paper); border-radius: 4px; box-shadow: var(--shadow-paper); font-family: var(--font-display); font-size: 1.45rem; line-height: 1.3; font-weight: 600; }
.takeaway p { margin: 0; }
.takeaway::before { content: ''; display: block; width: 36px; height: 4px; background: var(--vermilion); margin-bottom: var(--s-3); }

/* Published writing. */
.essay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.ecard[hidden] { display: none; }
.ecard__link { display: grid; gap: var(--s-4); align-content: start; height: 100%; color: var(--ink); text-decoration: none; background: var(--paper) var(--paper-light) 0 0 / 512px; padding: var(--s-3) var(--s-3) var(--s-5); border-radius: 4px; box-shadow: var(--shadow-paper); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.ecard__link:hover { color: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.ecard .illus img { box-shadow: none; border-radius: 2px; }
.ecard__body { display: grid; gap: var(--s-3); padding: 0 var(--s-3); justify-items: start; }
.ecard__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.ecard__meta span + span::before { content: '\00B7'; margin-right: var(--s-3); }
.ecard__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 900; line-height: 1.12; }
.ecard__sum { margin: 0; color: var(--ink-soft); }
.ecard__more { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; border-bottom: 3px solid var(--vermilion); padding-bottom: 2px; }

/* On my desk: small, quiet, clearly secondary. */
.desk { margin-top: var(--s-8); max-width: 820px; }
.desk__h { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.desk__lead { color: var(--ink-soft); font-size: 1rem; }
.desk__list { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: 1.5px solid var(--ink); }
.desk__list li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.desk__title { margin: 0; font-weight: 700; }
.desk__title a { color: var(--ink); text-decoration-color: var(--vermilion); }
.desk__sum { margin: 0; font-size: 0.98rem; color: var(--ink-soft); }
.desk__status { justify-self: start; font-size: 0.78rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1.5px dashed var(--ink-soft); color: var(--ink-soft); }
.desk__status--draft { background: var(--mustard); border: 1.5px solid var(--mustard); color: var(--ink); }
.desk--compact { background: rgba(251, 246, 234, .9); padding: var(--s-5) var(--s-5) var(--s-4); border-radius: 4px; box-shadow: var(--shadow-paper); }
.band--sky .desk--compact .desk__lead { color: var(--ink-soft); }

/* Essays: figures, stats, chat exchanges, and sources inside the reading column. */
.prose .lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); max-width: none; }
.prose figure { margin: var(--s-6) 0; }
.prose figure img { width: 100%; border-radius: 4px; box-shadow: 0 1px 2px rgba(12, 22, 44, .12), 0 10px 24px -14px rgba(12, 22, 44, .4); }
.prose figcaption { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--muted); }
.prose ol { padding-left: 1.4rem; }
.prose ol li { margin-bottom: var(--s-3); }
.prose .ask { margin-top: var(--s-6); padding: var(--s-4) var(--s-5); background: var(--cream); border-radius: 4px; }
.prose .sources { margin-top: var(--s-7); padding: var(--s-5); background: var(--cream); border-top: 4px solid var(--ink); border-radius: 0 0 4px 4px; }
.prose .sources h2 { margin-top: 0; font-size: 1.35rem; }
.prose .sources li, .prose .sources p { font-size: 0.98rem; }
.draft-note { background: var(--cream); border: 1.5px dashed var(--ink-soft); padding: var(--s-3) var(--s-4); border-radius: 4px; font-size: 1rem; }
.chat { display: grid; gap: var(--s-2); margin: var(--s-5) 0; padding: var(--s-5); background: var(--cream); border-radius: 4px; position: relative; }
.chat__b { margin: 0; max-width: 80%; padding: 0.6rem 0.9rem; border-radius: 14px; font-size: 1rem; line-height: 1.45; }
.chat__b--q { justify-self: end; background: var(--cobalt); color: var(--paper); border-bottom-right-radius: 4px; }
.chat__b--a { justify-self: start; background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat__stamp { margin: var(--s-2) 0 0; justify-self: end; font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; color: var(--vermilion-deep); border: 3px solid var(--vermilion-deep); padding: 0.1rem 0.6rem; transform: rotate(-6deg); border-radius: 4px; }
.stats { list-style: none; padding: 0; margin: var(--s-4) 0 var(--s-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.stats li { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: var(--s-4); display: grid; gap: var(--s-1); }
.stats b { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stats span { font-size: 1rem; }
.stats__hot { border-color: var(--vermilion) !important; }
.stats__hot b { color: var(--vermilion-deep); }
.fixes { list-style: none; padding: 0 !important; display: grid; gap: var(--s-4); counter-reset: fix; }
.fixes li { counter-increment: fix; position: relative; padding: var(--s-4) var(--s-4) var(--s-4) 3.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; margin: 0; }
.fixes li::before { content: counter(fix); position: absolute; left: var(--s-4); top: var(--s-4); font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; line-height: 1; color: var(--cobalt); }
.fixes h3 { font-size: 1.2rem; font-weight: 900; margin: 0 0 var(--s-1); }
.fixes p { margin: 0; }
.fixes__why { font-size: 0.95rem; color: var(--muted); margin-bottom: var(--s-2) !important; }

/* Writing filters announce results to screen readers (see journal.js). */
.filters { margin-bottom: var(--s-6); }

@media (max-width: 860px) {
  .essay-grid, .stats { grid-template-columns: minmax(0, 1fr); }
  .evidence-list li { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .desk__list li { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .hero__portrait { width: min(78vw, 400px); }
  .portrait-frame { justify-self: center; max-width: 320px; }
  .chat__b { max-width: 92%; }
}

/* =====================================================================
   Pass 3: work sooner on phones, compact intro, decision diagrams.
   ===================================================================== */

/* Compact introduction under the hero (no second portrait). */
.intro--compact { padding-block: var(--s-8) var(--s-7); }
.intro--compact .intro__in { display: block; max-width: var(--wrap); }
.intro--compact .intro__text { max-width: 34ch; }
.intro__text { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.25rem); line-height: 1.22; letter-spacing: -0.01em; margin: 0 0 var(--s-4); text-wrap: balance; }
.intro__text .intro__h { font-size: inherit; font-weight: 900; margin: 0; }
.intro__more { font-size: 1rem; }
.rows--glance { margin: 0 0 var(--s-7); max-width: var(--measure); }

/* Status pills: easy to scan next to the project number. */
.kind--in-validation { background: var(--mustard); color: var(--ink); }
.kind--on-sky.kind--in-validation { background: var(--mustard); }

/* Subtler buttons. */
.btn { box-shadow: 0 1px 2px rgba(12, 22, 44, .1), 0 3px 8px -4px rgba(12, 22, 44, .22); }
.btn--secondary { background: transparent; }
.band--sky .btn--secondary, .hero .btn--secondary { background: rgba(255, 253, 247, .55); }

/* Decision diagram: a labeled explanation, never presented as data. */
.diagram { margin: 0; padding: var(--s-5); background: var(--paper); border: 1px solid var(--line); border-radius: 4px; }
.diagram__cap { font-size: var(--fs-small); color: var(--ink-soft); margin-bottom: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline; }
.diagram__cap strong { color: var(--ink); }
.tag--diagram { background: var(--paper); color: var(--cobalt); border: 1.5px solid var(--cobalt); }
.diagram__rejected { margin: 0 0 var(--s-5); font-size: 0.98rem; color: var(--ink-soft); }
.diagram__x { display: inline-block; text-decoration: none; font-size: 0.78rem; font-weight: 700; color: var(--vermilion-deep); border: 1.5px solid var(--vermilion-deep); border-radius: 999px; padding: 0.05rem 0.5rem; margin-right: var(--s-2); }
.diagram__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
.diagram__steps--rows .step:nth-child(3n)::after { display: none; }
.diagram__steps--rows { row-gap: var(--s-6); }
.step { position: relative; display: grid; gap: var(--s-1); align-content: start; padding-top: 2.6rem; }
.step::after { content: ''; position: absolute; top: 0.95rem; left: 2.2rem; right: -0.75rem; height: 2px; background: var(--ink); opacity: .35; }
.step:last-child::after { display: none; }
.step__n { position: absolute; top: 0; left: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 1rem; background: var(--cobalt); color: var(--paper); }
.step__label { font-weight: 700; line-height: 1.25; }
.step__note { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.4; }
.step__badge { justify-self: start; margin-top: var(--s-1); font-size: 0.75rem; font-weight: 700; padding: 0.05rem 0.5rem; border-radius: 999px; }
.step--chosen .step__n { background: var(--vermilion); color: var(--ink); box-shadow: 0 0 0 4px rgba(240, 75, 47, .25); }
.step--chosen .step__badge { background: var(--vermilion); color: var(--ink); }
.step--now .step__n { background: var(--mustard); color: var(--ink); box-shadow: 0 0 0 4px rgba(237, 183, 45, .3); }
.step--now .step__badge { background: var(--mustard); color: var(--ink); }
.step--next .step__n { background: transparent; color: var(--ink-soft); border: 2px dashed var(--ink-soft); }
.step--next .step__label { color: var(--ink-soft); }
.step--next .step__badge { border: 1.5px dashed var(--ink-soft); color: var(--ink-soft); }
.step--next::after { border-top: 2px dashed var(--ink); background: none; }
.ev-kind--feasibility { background: var(--paper); }

@media (max-width: 860px) {
  /* Reach the work sooner: tighter hero art and section spacing on phones and tablets. */
  :root { --s-9: 3.5rem; --s-8: 2.75rem; --s-7: 2.25rem; }
  .hero__copy { padding-bottom: var(--s-5); }
  .hero__portrait { width: min(62vw, 300px); }
  .hero__collage { height: calc(min(62vw, 300px) * 1.17 + 36px); }
  .intro--compact { padding-block: var(--s-7) var(--s-6); }
  .section-head { margin-bottom: var(--s-6); }
  .section-head__lead { font-size: 1.05rem; }
  .diagram { padding: var(--s-4); }
  .diagram__steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .step { padding: 0 0 var(--s-4) 2.8rem; min-height: 2.6rem; }
  .step::after { top: 2.1rem; bottom: 0.2rem; left: 0.9rem; right: auto; width: 2px; height: auto; }
  .step--next::after { border-top: 0; border-left: 2px dashed var(--ink); width: 0; background: none; }
}
@media (max-width: 480px) {
  .hero__sub { font-size: 1.08rem; }
  .actions { margin-top: var(--s-4); }
}

.about-end { padding-block: var(--s-7); }
.about-end__text { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; max-width: 36ch; margin: 0; }

/* =====================================================================
   Pass 4: homepage introduction for recruiters.
   ===================================================================== */
.intro--profile { padding-block: var(--s-8) var(--s-7); }
.intro--profile .eyebrow { margin-bottom: var(--s-4); }
.intro__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-7); align-items: start; }
.intro__heading { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.6rem); line-height: 1.12; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.intro__body p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); max-width: 60ch; }
.intro__body p:last-child { margin-bottom: 0; }
.capabilities { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.capability { padding-top: var(--s-4); border-top: 3px solid var(--ink); }
.capability--a { border-top-color: var(--vermilion); }
.capability--b { border-top-color: var(--cobalt); }
.capability--c { border-top-color: var(--mustard); }
.capability__title { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; line-height: 1.2; margin: 0 0 var(--s-2); }
.capability p { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--ink-soft); }
.intro__actions { margin-top: var(--s-6); }


@media (max-width: 860px) {
  .intro--profile { padding-block: var(--s-7) var(--s-6); }
  .intro__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .intro__body p { font-size: 1.05rem; }
  .capabilities { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--s-5); border-bottom: 1px solid var(--line); }
  .capability { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1); padding: var(--s-3) 0 var(--s-3) var(--s-4); border-top: 1px solid var(--line); border-left: 3px solid var(--ink); }
  .capability--a { border-left-color: var(--vermilion); }
  .capability--b { border-left-color: var(--cobalt); }
  .capability--c { border-left-color: var(--mustard); }
  .capability__title { font-size: 1.12rem; margin: 0; }
  .capability p { font-size: 0.98rem; }
}
@media (max-width: 480px) {
  .intro__actions { flex-wrap: nowrap; gap: var(--s-2); }
  .intro__actions .btn { width: auto; flex: 1 1 auto; justify-content: center; padding-inline: 0.9rem; font-size: 0.98rem; }
  .intro--profile { padding-block: var(--s-6) var(--s-5); }
  .intro--profile + .band { padding-top: var(--s-7); }
}
.intro__actions .btn { white-space: nowrap; }
@media (max-width: 374px) { .intro__actions { flex-wrap: wrap; } .intro__actions .btn { flex: 1 1 100%; } }

/* =====================================================================
   Pass 5: introduction as pinned paper cards with proof links.
   ===================================================================== */
.intro--profile { background-image: var(--paper-cream); }
.pen { position: relative; white-space: nowrap; }
.pen::after { content: ''; position: absolute; left: -2%; right: -3%; bottom: -0.16em; height: 0.34em; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15 C60 6 120 19 180 11 S270 8 297 13' fill='none' stroke='%23F04B2F' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M18 20 C90 13 170 22 288 16' fill='none' stroke='%23F04B2F' stroke-width='3' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.intro__heading { isolation: isolate; }

.capabilities { gap: var(--s-6) var(--s-5); margin-top: var(--s-8); align-items: start; }
.capability { position: relative; border: 0; padding: var(--s-6) var(--s-5) var(--s-5); background: var(--paper) var(--paper-light) 0 0 / 512px; border-radius: 3px; box-shadow: var(--shadow-paper); display: flex; flex-direction: column; gap: var(--s-3); }
.capability::before { content: ''; position: absolute; top: -10px; left: 50%; width: 92px; height: 22px; margin-left: -46px; background: var(--mustard); opacity: .85; transform: rotate(-3deg); }
.capability--a { transform: rotate(-0.7deg); }
.capability--a::before { background: var(--pink); }
.capability--b { transform: rotate(0.5deg) translateY(10px); }
.capability--b::before { background: var(--sky); transform: rotate(2deg); }
.capability--c { transform: rotate(-0.35deg); }
.capability__title { font-size: 1.4rem; padding-bottom: var(--s-2); border-bottom: 3px solid var(--vermilion); align-self: start; }
.capability--b .capability__title { border-bottom-color: var(--cobalt); }
.capability--c .capability__title { border-bottom-color: var(--mustard); }
.capability p { color: var(--ink-soft); }
.capability__proof { margin-top: auto !important; padding-top: var(--s-3); border-top: 1px dashed var(--line); font-size: 0.95rem !important; }
.capability__proof > span { display: block; font-size: 0.8rem; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.capability__proof a { color: var(--ink); font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; border-bottom: 2px solid var(--vermilion); }
.capability__proof a:hover { color: var(--cobalt); }
.capability__proof svg { flex: none; width: 15px; height: 15px; }

@media (max-width: 860px) {
  .capabilities { border-bottom: 0; gap: var(--s-5); margin-top: var(--s-6); }
  .capability, .capability--a, .capability--b, .capability--c { transform: none; border-left: 0; border-top: 0; padding: var(--s-5) var(--s-4) var(--s-4); gap: var(--s-2); }
  .capability__title { font-size: 1.15rem; }
  .capability::before { width: 70px; margin-left: -35px; height: 18px; top: -8px; }
}
.capability__proof a { display: inline; line-height: 1.6; }
.capability__proof svg { display: inline-block; vertical-align: -2px; margin-left: 4px; }
@media (max-width: 860px) {
  .capabilities { gap: var(--s-4); }
  .capability, .capability--a, .capability--b, .capability--c { padding: var(--s-4) var(--s-4) var(--s-3); gap: var(--s-1); }
  .capability__title { padding-bottom: 4px; border-bottom-width: 2px; margin-bottom: 4px; }
  .capability p { font-size: 0.96rem; line-height: 1.5; }
  .capability__proof { border-top: 0; padding-top: var(--s-1); }
  .capability__proof > span { display: inline; margin-right: 4px; }
  .capability::before { width: 56px; margin-left: -28px; height: 14px; top: -6px; }
  .intro--profile .eyebrow { font-size: 0.92rem; }
}
.nowrap { white-space: nowrap; }

/* Pass 6: shorter heading, aligned cards with consistent structure. */
.intro__heading { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem); line-height: 1.06; }
.intro__line { display: block; }
.intro__grid { align-items: center; }
.capabilities { align-items: stretch; }
.capability, .capability--a, .capability--b, .capability--c { transform: none; }
.capability { display: flex; flex-direction: column; }
.capability > p:not(.capability__proof) { flex: 1 1 auto; }
.capability__proof { margin-top: var(--s-4) !important; }
.capability__proof > span { text-transform: uppercase; letter-spacing: .08em; font-size: 0.74rem; }
.capability::before { transform: rotate(-3deg); }
.capability--a::before { transform: rotate(-4deg); }
.capability--b::before { transform: rotate(2.5deg); }
.capability--c::before { transform: rotate(-1.5deg); }
@media (max-width: 860px) {
  .intro__heading { font-size: clamp(1.9rem, 1.3rem + 3vw, 2.4rem); }
  .capability__proof { margin-top: var(--s-2) !important; }
}
@media (min-width: 861px) {
  .capability__proof { min-height: 5.1rem; }
}
@media (min-width: 861px) {
  /* Title, description, and link share rows across all three cards. */
  .capabilities { grid-template-rows: auto auto auto; row-gap: 0; }
  .capability { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--s-3); }
  .capability__title { align-self: end; }
  .capability__proof { min-height: 0; align-self: stretch; }
}

/* Pass 7: pen drawings on the capability cards. */
.capability__art { display: block; width: 100%; max-width: 230px; height: auto; aspect-ratio: 240 / 110; margin: 0 auto var(--s-1); }
@media (min-width: 861px) {
  .capabilities { grid-template-rows: auto auto auto auto; }
  .capability { grid-row: span 4; }
}
@media (max-width: 860px) {
  /* Phones: the drawing sits small beside the title to save height. */
  .capability { display: grid; grid-template-columns: minmax(0, 1fr) 96px; column-gap: var(--s-3); }
  .capability__art { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 96px; margin: 0; }
  .capability__title { grid-column: 1; grid-row: 1; align-self: start; }
  .capability > p { grid-column: 1 / -1; }
  .capability > p:not(.capability__proof) { grid-column: 1; grid-row: 2; }
}
.capability__title { justify-self: start; }
@media (max-width: 860px) {
  .capability { grid-template-columns: minmax(0, 1fr) 84px; align-items: center; }
  .capability__art { grid-row: 1; width: 84px; }
  .capability > p:not(.capability__proof) { grid-column: 1 / -1; grid-row: 2; }
  .capability__proof { grid-column: 1 / -1; grid-row: 3; }
}

/* =====================================================================
   Pass 8: mobile-only introduction and capability cards.
   Content that differs by screen size is duplicated and hidden with
   display: none, which also removes it from the accessibility tree, so
   screen readers never hear both versions.
   ===================================================================== */
.only-narrow { display: none !important; }
.intro__story-link { display: none; }

@media (max-width: 860px) {
  .only-wide { display: none !important; }
  .only-narrow { display: revert !important; }
  .intro__body--mobile.only-narrow { display: block !important; }

  .intro--profile .wrap { padding-inline: 19px; }
  .intro--profile { padding-block: 28px 32px; }
  .intro--profile .eyebrow { margin-bottom: 10px; }
  .intro__line--first { display: none; }
  .intro__heading { font-size: clamp(1.85rem, 1.2rem + 3.4vw, 2.3rem); line-height: 1.08; }
  .intro__grid { gap: 14px; }
  .intro__body--mobile { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); max-width: 60ch; }

  .capabilities { margin-top: 26px; gap: 18px; }
  .capability, .capability--a, .capability--b, .capability--c {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 12px; row-gap: 0;
    padding: 18px 17px 6px; box-shadow: 0 1px 1px rgba(23, 23, 23, .06), 0 6px 14px -8px rgba(12, 22, 44, .3); background-size: 512px;
  }
  .capability::before { width: 44px; height: 12px; margin-left: -22px; top: -6px; opacity: .8; }
  .capability__art { grid-column: 2; grid-row: 1; width: 52px; height: 32px; aspect-ratio: auto; margin: 2px 0 0; opacity: .85; }
  .capability__title { grid-column: 1; grid-row: 1; font-size: 1.375rem; line-height: 1.15; border-bottom: 0; padding-bottom: 0; margin: 0; text-wrap: balance; }
  .capability__title::after { content: ''; display: block; width: 40px; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--vermilion); }
  .capability--b .capability__title::after { background: var(--cobalt); }
  .capability--c .capability__title::after { background: var(--mustard); }
  .capability__desc { grid-column: 1 / -1; grid-row: 2; margin: 10px 0 0 !important; font-size: 1rem !important; line-height: 1.45 !important; color: var(--ink-soft); }
  .capability__proof { grid-column: 1 / -1; grid-row: 3; margin: 12px 0 0 !important; padding-top: 0; border-top: 1px solid var(--line); min-height: 0; }
  .capability__proof a { display: flex; align-items: center; min-height: 48px; border-bottom: 0; font-size: 1rem; text-decoration: underline; text-decoration-color: var(--vermilion); text-decoration-thickness: 2px; text-underline-offset: 5px; }
  .capability__proof a .nowrap svg { vertical-align: -3px; margin-left: 6px; }

  .intro__actions { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 26px; flex-wrap: nowrap; }
  .intro__actions .btn--primary { width: 100%; justify-content: center; min-height: 50px; font-size: 1.05rem; }
  .intro__story-link.only-narrow { display: inline-flex !important; align-self: center; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .intro__story-link svg { width: 16px; height: 16px; }

}
@media (max-width: 374px) {
  .capability__art { display: none; }
  .capability, .capability--a, .capability--b, .capability--c { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: no decorative sketches on the capability cards; headings use the full width.
   Tablets (601 to 860px) and desktop keep them. */
@media (max-width: 600px) {
  .capability__art { display: none; }
  .capability, .capability--a, .capability--b, .capability--c { grid-template-columns: minmax(0, 1fr); }
  .capability__title { grid-column: 1 / -1; }
}

/* =====================================================================
   Pass 9: mobile visual fidelity to the approved mockup (860px and below).
   Desktop is untouched.
   ===================================================================== */
@media (max-width: 860px) {
  /* Eyebrow: red, uppercase, tracked, no dash. */
  .intro--profile .eyebrow { color: var(--vermilion-deep); text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; font-weight: 700; margin-bottom: 12px; }
  .intro--profile .eyebrow::before { display: none; }
  .intro__body--mobile { color: var(--ink); font-size: 1.0625rem; line-height: 1.55; }

  /* Ivory paper cards: subtly irregular edges, gentle visible shadow. */
  .capabilities { gap: 30px; margin-top: 34px; }
  .capability, .capability--a, .capability--b, .capability--c {
    position: relative; isolation: isolate; background: none; box-shadow: none; border-radius: 0;
    padding: 26px 22px 20px;
    filter: drop-shadow(0 8px 12px rgba(70, 52, 20, .16)) drop-shadow(0 1px 1.5px rgba(70, 52, 20, .14));
  }
  .capability::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: #FCF8F0 var(--paper-light) 0 0 / 512px; clip-path: var(--torn-soft);
  }

  /* Tape: wider, centered, half above the card edge, translucent with grain and ragged ends. */
  .capability::before {
    width: 76px; height: 19px; margin-left: -38px; top: -10px; z-index: 2; opacity: .88;
    background-image: var(--grain); background-size: 120px; background-blend-mode: multiply;
    clip-path: polygon(3% 8%, 0 30%, 4% 52%, 1% 74%, 4% 96%, 97% 92%, 100% 70%, 96% 48%, 99% 26%, 96% 4%);
  }
  .capability--a::before { background-color: #F0A5C1; transform: rotate(-2deg); }
  .capability--b::before { background-color: #8FCDEA; transform: rotate(1.5deg); }
  .capability--c::before { background-color: #F2C557; transform: rotate(-1deg); }

  /* Short hand-drawn stroke under each heading. */
  .capability__title { font-size: 1.4rem; line-height: 1.15; }
  .capability__title::after {
    width: 62px; height: 7px; margin-top: 10px; border-radius: 0; background: var(--vermilion);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 7'%3E%3Cpath d='M2 4.2 C14 2.6 30 2.4 44 3.1 S57 3.6 60 3.3' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 7'%3E%3Cpath d='M2 4.2 C14 2.6 30 2.4 44 3.1 S57 3.6 60 3.3' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  }
  .capability--b .capability__title::after { background: var(--sky-deep); }
  .capability--c .capability__title::after { background: #F0B935; }

  /* Description and link: no divider, separated by whitespace. */
  .capability__desc { margin-top: 14px !important; color: var(--ink) !important; line-height: 1.5 !important; }
  .capability__proof { border-top: 0 !important; margin-top: 10px !important; }
  .capability__proof a { min-height: 44px; font-weight: 700; text-decoration-thickness: 2.5px; text-underline-offset: 6px; }

  /* Actions: serif button label, quiet text link. */
  .intro__actions { margin-top: 34px; gap: 8px; }
  .intro__actions .btn--primary { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.005em; min-height: 54px; border: 0; box-shadow: 0 2px 0 rgba(120, 30, 10, .18), 0 8px 16px -10px rgba(120, 30, 10, .45); }
  .intro__story-link.only-narrow { font-size: 1rem; }
}
@media (max-width: 860px) {
  .capability::after { border-radius: 3px; }
  .capability::before { clip-path: polygon(2% 6%, 0 50%, 2% 94%, 98% 96%, 100% 50%, 98% 4%); }
}
@media (max-width: 860px) {
  .capabilities { gap: 24px; margin-top: 30px; }
  .capability, .capability--a, .capability--b, .capability--c { padding: 24px 20px 10px; }
  .capability__desc { margin-top: 12px !important; }
  .capability__proof { margin-top: 2px !important; }
  .capability__proof a .nowrap svg { stroke-width: 2.8; margin-left: 5px; width: 16px; height: 16px; }
  .intro__actions .btn--primary svg { stroke-width: 2.8; }
}

/* =====================================================================
   Pass 10: the mockup details on desktop and tablet too.
   Same eyebrow, ivory cards, tape, short hand-drawn strokes, and serif
   button as on phones. The desktop layout (three aligned cards, sketches,
   "Seen in" links) is unchanged.
   ===================================================================== */
.intro--profile .eyebrow { color: var(--vermilion-deep); text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; font-weight: 700; }
@media (min-width: 861px) { .intro--profile .eyebrow { margin-bottom: 14px; } }
.intro--profile .eyebrow::before { display: none; }

@media (min-width: 861px) {
  .capability, .capability--a, .capability--b, .capability--c {
    position: relative; isolation: isolate; background: none; box-shadow: none; border-radius: 0;
    padding: 30px 26px 22px;
    filter: drop-shadow(0 10px 14px rgba(70, 52, 20, .15)) drop-shadow(0 1px 1.5px rgba(70, 52, 20, .14));
  }
  .capability::after {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 3px;
    background: #FCF8F0 var(--paper-light) 0 0 / 512px; clip-path: var(--torn-soft);
  }
  .capability::before {
    width: 84px; height: 21px; margin-left: -42px; top: -11px; z-index: 2; opacity: .88;
    background-image: var(--grain); background-size: 120px; background-blend-mode: multiply;
    clip-path: polygon(2% 6%, 0 50%, 2% 94%, 98% 96%, 100% 50%, 98% 4%);
  }
  .capability--a::before { background-color: #F0A5C1; transform: rotate(-2deg); }
  .capability--b::before { background-color: #8FCDEA; transform: rotate(1.5deg); }
  .capability--c::before { background-color: #F2C557; transform: rotate(-1deg); }

  .capability__title, .capability--b .capability__title, .capability--c .capability__title { border-bottom: 0; padding-bottom: 0; }
  .capability__title::after {
    content: ''; display: block; width: 70px; height: 8px; margin-top: 10px; background: var(--vermilion);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 7'%3E%3Cpath d='M2 4.2 C14 2.6 30 2.4 44 3.1 S57 3.6 60 3.3' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 7'%3E%3Cpath d='M2 4.2 C14 2.6 30 2.4 44 3.1 S57 3.6 60 3.3' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  }
  .capability--b .capability__title::after { background: var(--sky-deep); }
  .capability--c .capability__title::after { background: #F0B935; }

  .capability__desc { color: var(--ink) !important; }
  .capability__proof { border-top: 0; padding-top: 0; }

  .intro__actions .btn--primary { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.005em; border: 0; box-shadow: 0 2px 0 rgba(120, 30, 10, .18), 0 8px 16px -10px rgba(120, 30, 10, .45); }
  .intro__actions .btn--primary svg { stroke-width: 2.8; }
}


/* Pass 13: on large screens the hero collage grows with the window (its height is
   about 29% of the width), so the copy reserves matching room and never sits on it. */
@media (min-width: 861px) {
  .hero__copy { padding-bottom: max(350px, calc(29vw + 36px)); }
}

/* =====================================================================
   Pass 14: motion only where it explains something.
   1. Decision diagrams walk through the decision once: the set-aside path
      is struck out, then the steps arrive in order and each connector is
      drawn to the next. The decision step's ring pulses once.
   2. "Seen in" links preview the project they lead to (desktop).
   3. Essays show reading progress.
   The struck-out line is part of the final state, so it is there without
   motion too.
   ===================================================================== */
.diagram__struck { position: relative; }
.diagram__struck::after { content: ''; position: absolute; left: -2px; right: -2px; top: 55%; height: 2px; background: var(--vermilion-deep); transform-origin: left center; }

@media (prefers-reduced-motion: no-preference) {
  .js .diagram.reveal:not(.is-in) .diagram__struck::after { transform: scaleX(0); }
  .js .diagram.is-in .diagram__struck::after { animation: draw-x 520ms cubic-bezier(.6, 0, .3, 1) backwards 350ms; }

  .js .diagram.reveal:not(.is-in) .step { opacity: 0; }
  .js .diagram.is-in .step { animation: step-in 460ms var(--ease) backwards; animation-delay: calc(700ms + var(--i, 0) * 170ms); }
  .js .diagram .step::after { transform-origin: left center; }
  .js .diagram.is-in .step::after { animation: draw-x 300ms ease-out backwards; animation-delay: calc(700ms + var(--i, 0) * 170ms + 260ms); }
  .js .diagram.is-in :is(.step--chosen, .step--now) .step__n { animation: ring 900ms ease-out backwards; animation-delay: calc(700ms + var(--i, 0) * 170ms + 200ms); }
  @media (max-width: 860px) {
    .js .diagram .step::after { transform-origin: center top; }
    .js .diagram.is-in .step::after { animation-name: draw-y; }
  }
}
@keyframes draw-x { from { transform: scaleX(0); } }
@keyframes draw-y { from { transform: scaleY(0); } }
@keyframes step-in { from { opacity: 0; translate: 0 8px; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(240, 75, 47, .55); } 70% { box-shadow: 0 0 0 14px rgba(240, 75, 47, 0); } }

/* "Seen in" preview. */
.capability__proof > .peek { display: none; }
@media (hover: hover) and (min-width: 861px) {
  .capability__proof { position: relative; }
  .capability__proof > .peek {
    margin: 0; text-transform: none; letter-spacing: normal; font-size: 1rem; color: inherit;
    display: block; position: absolute; left: -6px; bottom: calc(100% + 6px); width: min(210px, 100%); z-index: 4;
    padding: 6px; background: #FDFBF4; border-radius: 3px; rotate: -1.5deg;
    box-shadow: 0 2px 3px rgba(23, 23, 23, .12), 0 14px 26px -10px rgba(12, 22, 44, .45);
    opacity: 0; translate: 0 8px; pointer-events: none; transition: opacity 180ms var(--ease), translate 220ms var(--ease);
  }
  .peek img { display: block; width: 100%; height: auto; border-radius: 2px; }
  .peek .tag { position: absolute; text-transform: none; letter-spacing: normal; left: 12px; bottom: 12px; font-size: 0.72rem; padding: 0.05rem 0.4rem; }
  .capability__proof:has(a:hover, a:focus-visible) .peek { opacity: 1; translate: 0 0; }
}

/* Reading progress on essays. */
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; background: var(--vermilion); transform-origin: left center; transform: scaleX(0); pointer-events: none; }
@media print { .read-progress, .peek { display: none !important; } }

/* =====================================================================
   Pass 15: UX review fixes.
   ===================================================================== */
/* The set-aside strike-through follows the text across line breaks. */
.diagram__struck::after { content: none; }
.diagram__struck {
  background: linear-gradient(var(--vermilion-deep), var(--vermilion-deep)) no-repeat 0 58% / 100% 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
  .js .diagram.reveal:not(.is-in) .diagram__struck { background-size: 0 2px; }
  .js .diagram.is-in .diagram__struck { animation: strike 600ms cubic-bezier(.6, 0, .3, 1) backwards 350ms; }
}
@keyframes strike { from { background-size: 0 2px; } }

/* Case studies: "On this page" in the right-hand rail, which was empty on two stories. */
.toc { font-size: 0.95rem; }
.toc__h { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 var(--s-2); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.toc a:hover { color: var(--ink); }
.toc a[aria-current] { color: var(--ink); border-left-color: var(--vermilion); }
@media (max-width: 860px) { .toc { display: none; } }

/* Contact: the title keeps its two lines on desktop instead of breaking into four. */
@media (min-width: 861px) {
  .contact .headline .strip { white-space: nowrap; }
  .contact .headline { font-size: clamp(2.3rem, 1rem + 3.4vw, 4rem); }
}

/* Next story: the title wraps as text, so the last word and arrow stay together. */
.next-project__link { display: inline; line-height: 1.25; }
.next-project__link .pcard__num { margin-right: 0.35em; }
.next-project__link svg { display: inline-block; vertical-align: -0.1em; margin-left: 0.2em; }
.next-project .eyebrow { margin-right: var(--s-3); }
@media (max-width: 860px) { .next-project .eyebrow { display: flex; margin: 0 0 var(--s-2); } }

/* =====================================================================
   Pass 16: the full site. Components for Prototypes, How I work, Now,
   the access-code Work pages, and the access page itself.
   ===================================================================== */
.hidden { display: none !important; }

/* Numbered paper cards (steps, threads, areas, topics, problems). */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s-5); }
.card { position: relative; background: var(--paper) var(--paper-light) 0 0 / 512px; padding: var(--s-5) var(--s-5) var(--s-4); box-shadow: var(--shadow-paper); border-top: 4px solid var(--ink); }
.card:nth-child(3n + 2) { border-top-color: var(--cobalt); }
.card:nth-child(3n + 3) { border-top-color: var(--mustard); }
.card__n { position: absolute; top: var(--s-4); right: var(--s-4); font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; line-height: 1; color: var(--vermilion-deep); }
.card__title { font-size: 1.3rem; font-weight: 900; line-height: 1.2; margin: 0 0 var(--s-2); padding-right: 2.6rem; }
.card__tag { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 var(--s-3); }
.card p { margin: 0 0 var(--s-3); }
.card p:last-child { margin-bottom: 0; }
.card__link { margin-top: var(--s-3) !important; }

/* Access-code markers. */
.lock-note, .private-note { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.lock-note { margin-left: var(--s-3); }
.private-note { margin-top: var(--s-4); padding: 4px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: rgba(255, 253, 247, .55); color: var(--ink); }

/* Product pages as decisions (Work). */
.pdp { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.pdp__story { margin: 0; }
.pdp__story > div { padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.pdp__story > div:first-child { border-top: 2px solid var(--ink); }
.pdp__story dt { font-family: var(--font-display); font-weight: 900; font-size: 1.2rem; margin-bottom: var(--s-2); }
.pdp__story dd { margin: 0; max-width: 62ch; }
.pdp__parts { margin: 0; display: grid; gap: var(--s-3); }
.pdp__parts > div { background: var(--paper) var(--paper-light) 0 0 / 512px; padding: var(--s-4); box-shadow: var(--shadow-paper); border-left: 4px solid var(--cobalt); }
.pdp__parts dt { font-weight: 700; }
.pdp__parts dd { margin: 0; color: var(--ink-soft); }

/* Two bets (Work). */
.bets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.bet { background: var(--paper) var(--paper-light) 0 0 / 512px; padding: var(--s-6) var(--s-5) var(--s-5); box-shadow: var(--shadow-paper); }
.bet__stage { display: inline-block; font-size: 0.82rem; font-weight: 700; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--mustard); margin: 0 0 var(--s-3); }
.bet h3 { font-size: var(--fs-h3); font-weight: 900; margin: 0 0 var(--s-4); }
.bet dl { margin: 0; }
.bet dl > div { padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.bet dt { font-weight: 700; margin-bottom: 2px; }
.bet dd { margin: 0; }

/* The work around the flagships (Work). */
.around { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 var(--s-6); border-top: 2px solid var(--ink); }
.around li { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.around__meta { display: flex; gap: var(--s-2); margin: 0 0 var(--s-1); font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.around__meta span + span::before { content: '\00B7'; margin-right: var(--s-2); }
.around h3 { font-size: 1.15rem; font-weight: 900; margin: 0 0 var(--s-1); }
.around h3 a { color: var(--ink); text-decoration-color: var(--vermilion); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.around p { margin: 0; color: var(--ink-soft); }

/* Results (case studies, access code). */
.results { background: var(--paper) var(--paper-light) 0 0 / 512px; padding: var(--s-6); box-shadow: var(--shadow-paper); border-top: 6px solid var(--vermilion); }
.results__intro { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; }
.figures { margin: var(--s-4) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4); }
.figures > div { display: flex; flex-direction: column-reverse; gap: 4px; padding: var(--s-4); background: var(--cream); border-radius: 3px; }
.figures dd { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); line-height: 1; color: var(--cobalt-deep, #183B85); }
.figures dt { font-size: 0.95rem; color: var(--ink-soft); }
.calls { margin: 0; display: grid; gap: var(--s-4); }
.calls > div { padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.calls dt { font-weight: 700; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: baseline; margin-bottom: var(--s-2); }
.calls dt span { font-size: 0.82rem; font-weight: 700; padding: 0.05rem 0.55rem; border-radius: 999px; background: var(--vermilion); color: var(--ink); }
.calls dd { margin: 0; }

/* Writing: LinkedIn pieces. */
.featured-note { background: var(--paper) var(--paper-light) 0 0 / 512px; padding: var(--s-6); box-shadow: var(--shadow-paper); border-left: 6px solid var(--vermilion); max-width: 820px; margin-bottom: var(--s-6); }
.featured-note__k { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--vermilion-deep); margin: 0 0 var(--s-2); }
.featured-note h3 { font-size: var(--fs-h3); font-weight: 900; margin: 0 0 var(--s-3); }
.featured-note p:last-child { margin: 0; }
.elsewhere { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 var(--s-6); border-top: 2px solid var(--ink); }
.elsewhere li { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.elsewhere__topic { font-size: 0.82rem; font-weight: 700; color: var(--muted); margin: 0 0 var(--s-1); }
.elsewhere h3 { font-size: 1.15rem; font-weight: 900; margin: 0 0 var(--s-1); }
.elsewhere p:last-child { margin: 0; color: var(--ink-soft); }

/* Trajectory and direction (About, Now). */
.heading-next { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.drawn__k { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 var(--s-2); }
.drawn { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.drawn li { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.themes { margin: var(--s-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.themes > div { padding: var(--s-3) var(--s-4); background: rgba(255, 253, 247, .7); border-radius: 3px; }
.themes dt { font-weight: 700; }
.themes dd { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }

/* Prototypes. */
.builds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.build { background: var(--paper) var(--paper-light) 0 0 / 512px; padding: var(--s-6) var(--s-5) var(--s-5); box-shadow: var(--shadow-paper); }
.build__meta { display: flex; gap: var(--s-3); align-items: center; margin: 0 0 var(--s-3); }
.build h3 { font-size: var(--fs-h3); font-weight: 900; margin: 0 0 var(--s-3); }
.build__q { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.4; }
.kind--prototype { background: var(--cobalt); color: var(--paper); }
.rows--why > div { grid-template-columns: 14rem minmax(0, 1fr); }

/* How I work. */
.beliefs { display: grid; gap: var(--s-8); max-width: 760px; }
.belief h2 { font-size: var(--fs-h2); font-weight: 900; line-height: 1.1; margin: 0 0 var(--s-4); }
.belief p { font-size: 1.1rem; line-height: 1.65; max-width: 62ch; }

/* The access page. */
.gate { min-height: calc(100vh - 74px); display: flex; align-items: center; }
.gate__in { width: 100%; }
.gate__panel { max-width: 640px; }
.gate-loading { min-height: 40vh; display: grid; place-items: center; }
.gate-loading span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(23, 23, 23, .2); border-top-color: var(--ink); animation: gate-spin .8s linear infinite; }
@keyframes gate-spin { to { transform: rotate(360deg); } }
.gate-form { margin-top: var(--s-6); background: var(--paper) var(--paper-light) 0 0 / 512px; padding: var(--s-5); box-shadow: var(--shadow-paper); }
.gate-form__label { display: block; font-weight: 700; margin-bottom: var(--s-2); }
.gate-form__field { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.gate-form__field input { flex: 1 1 220px; min-height: 50px; padding: 0 16px; font: inherit; font-size: 1.05rem; border: 2px solid var(--ink); border-radius: 6px; background: #fff; color: var(--ink); }
.gate-form__field input:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.gate-form__field .btn { border: 0; cursor: pointer; min-height: 50px; }
.gate-form__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); }
.gate-form__row label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; }
.gate-form__row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--vermilion); }
.gate-form__toggle { background: none; border: 0; padding: 0 4px; min-height: 44px; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gate-form__error { margin: var(--s-3) 0 0; color: var(--vermilion-deep); font-weight: 700; }
.gate-help { margin-top: var(--s-5); }

@media (max-width: 860px) {
  .pdp, .heading-next, .bets, .builds { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .rows--why > div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .lock-note { margin-left: 0; margin-top: var(--s-2); display: flex; }
  .beliefs { gap: var(--s-7); }
  .card__title { font-size: 1.2rem; }
}
.more { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* =====================================================================
   Pass 17: signature paper treatment for the content pages.
   Cards become taped ivory notes with soft torn edges (the same language
   as the homepage capability cards), illustrated page heads, and art on
   the prototype and bet cards.
   ===================================================================== */
.page-head--art { padding-top: calc(var(--s-7) + 74px); }
.page-head--art .project-head__copy .headline { margin-bottom: var(--s-4); }
.page-head--art .themes { margin-top: var(--s-4); }

.card, .build, .bet { background: none; box-shadow: none; border-top: 0; isolation: isolate; filter: drop-shadow(0 10px 14px rgba(70, 52, 20, .14)) drop-shadow(0 1px 1.5px rgba(70, 52, 20, .14)); }
.card::after, .build::after, .bet::after { content: ''; position: absolute; inset: 0; z-index: -1; background: #FCF8F0 var(--paper-light) 0 0 / 512px; clip-path: var(--torn-soft); border-radius: 3px; }
.card { padding-top: calc(var(--s-5) + 6px); }
.card::before, .build::before, .bet::before { content: ''; position: absolute; top: -10px; left: 50%; width: 78px; height: 19px; margin-left: -39px; z-index: 2; opacity: .88; background: #F2C557 var(--grain) 0 0 / 120px; background-blend-mode: multiply; clip-path: polygon(2% 6%, 0 50%, 2% 94%, 98% 96%, 100% 50%, 98% 4%); transform: rotate(-2deg); }
.card:nth-child(3n + 1)::before { background-color: #F0A5C1; }
.card:nth-child(3n + 2)::before { background-color: #8FCDEA; transform: rotate(1.5deg); }
.card:nth-child(3n + 3)::before { transform: rotate(-1deg); }
.card:nth-child(even) { transform: rotate(0.35deg); }
.card:nth-child(odd) { transform: rotate(-0.3deg); }
.card__title::after { content: ''; display: block; width: 52px; height: 7px; margin-top: 8px; background: var(--vermilion);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 7'%3E%3Cpath d='M2 4.2 C14 2.6 30 2.4 44 3.1 S57 3.6 60 3.3' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 7'%3E%3Cpath d='M2 4.2 C14 2.6 30 2.4 44 3.1 S57 3.6 60 3.3' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.card:nth-child(3n + 2) .card__title::after { background: var(--sky-deep); }
.card:nth-child(3n + 3) .card__title::after { background: #F0B935; }

.build { position: relative; padding-top: var(--s-4); }
.build::before { background-color: #8FCDEA; }
.build:nth-child(even)::before { background-color: #F0A5C1; transform: rotate(2deg); }
.build__art, .bet__art { margin: 0 0 var(--s-4); filter: none; }
.build__art img, .bet__art img { border-radius: 2px; }
.bet { position: relative; padding-top: var(--s-4); }

/* The pinned results card on case studies and the "Where it stands" note get the same paper. */
.results { box-shadow: var(--shadow-paper); }

@media (max-width: 860px) {
  .page-head--art { padding-top: calc(var(--s-6) + 64px); }
  .card:nth-child(n) { transform: none; }
}
@media (min-width: 861px) {
  .page-head--art .project-head__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .page-head--art .headline { font-size: clamp(2.1rem, 0.9rem + 2.4vw, 3.3rem); }
  .page-head--art .headline .strip { white-space: nowrap; }
}
.page-head--art .themes > div { padding: 8px 12px; }

/* How I work: each belief as a numbered page with a pen stroke under the title. */
.beliefs { max-width: 980px; gap: var(--s-8); }
.belief { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.belief .belief__n { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(3.6rem, 2rem + 4vw, 6rem); line-height: .9; color: var(--vermilion); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.belief:nth-child(2) .belief__n { color: var(--sky); }
.belief:nth-child(3) .belief__n { color: var(--mustard); }
.belief:nth-child(4) .belief__n { color: var(--pink); }
.belief__tag { margin: 0 0 var(--s-2); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--vermilion-deep); }
.belief h2::after { content: ''; display: block; width: 90px; height: 9px; margin-top: 12px; background: var(--vermilion);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 7'%3E%3Cpath d='M2 4.2 C14 2.6 30 2.4 44 3.1 S57 3.6 60 3.3' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 7'%3E%3Cpath d='M2 4.2 C14 2.6 30 2.4 44 3.1 S57 3.6 60 3.3' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.belief__lead { font-family: var(--font-display); font-size: 1.35rem !important; line-height: 1.45 !important; font-weight: 600; color: var(--ink); }
.cards--three { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
@media (max-width: 860px) {
  .belief { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .belief .belief__n { font-size: 3.4rem; }
}

/* Three published pieces sit in one row on wide screens. */
.essay-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.essay-grid--related { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.illus--cover img { display: block; width: 100%; height: auto; }
.article-head__art.illus--cover { box-shadow: var(--shadow-paper); }
.ecard__art img { aspect-ratio: 12 / 7; object-fit: cover; object-position: center top; }

/* Article hero: the essay's own collage under its title, like the homepage hero.
   The title sits on torn strips over the sky in the top half of the picture. */
.article-hero { position: relative; background: var(--sky) var(--paper-sky) 0 0 / 512px; overflow: hidden; }
.article-hero__art img { display: block; width: 100%; height: auto; }
.article-hero__copy { position: absolute; top: 0; left: 0; right: 0; padding-top: calc(74px + clamp(20px, 3.4vw, 64px)); }
.article-hero__copy .headline { font-size: clamp(2rem, 0.7rem + 3.1vw, 4.2rem); margin-bottom: var(--s-4); }
.article-hero__copy .headline .strip { white-space: nowrap; }
.article-hero__copy .article-head__sum { max-width: 46ch; font-size: var(--fs-lead); line-height: 1.5; font-weight: 500; }
@media (max-width: 860px) {
  .article-hero { display: flex; flex-direction: column-reverse; }
  .article-hero__copy { position: static; padding-top: calc(64px + var(--s-5)); padding-bottom: var(--s-2); }
}
/* The picture runs up behind the transparent header, as on the homepage. */
.theme-sky #main > article.has-hero:first-child, .theme-sky #main > article.has-hero:first-child > .article-hero { border-top: 0; }
@media (max-width: 860px) {
  .article-hero__copy .headline { font-size: clamp(1.45rem, 0.4rem + 5.4vw, 2.2rem); }
  .article-hero__copy .headline .strip { white-space: nowrap; }
}
/* Below 1100px the sky above the collage is too short for the title, so the title sits above the picture. */
@media (max-width: 1100px) {
  .article-hero { display: flex; flex-direction: column-reverse; }
  .article-hero__copy { position: static; padding-top: calc(74px + var(--s-6)); padding-bottom: var(--s-3); }
}
@media (max-width: 1100px) {
  .article-hero__art img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%); }
  .article-hero__art { margin-top: -40px; }
}

/* =====================================================================
   Flip-book: "How I work" moments (homepage).
   Desktop: a deck of photo prints. The stage stays pinned while the steps scroll
   past; the moment in view lies on top, the one before it slides onto the pile
   beneath. Only transform and opacity animate (no 3D, no scroll-linked script),
   so it stays smooth.
   Phones: a swipeable card deck. Each moment is a paper card; the card in focus
   lifts and straightens, the others sit tilted beside it, and dots show where
   you are.
   ===================================================================== */
.story-flip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.story-flip__stage { position: sticky; top: calc(74px + var(--s-5)); height: min(74vh, 740px); display: flex; justify-content: center; }
.story-flip__frames { position: relative; z-index: 1; height: 100%; width: auto; aspect-ratio: 4 / 5; max-width: 100%; margin: 0 auto; filter: drop-shadow(0 22px 26px rgba(12, 22, 44, .28)) drop-shadow(0 2px 3px rgba(23, 23, 23, .14)); }
.story-flip__frame { position: absolute; inset: 0; margin: 0; background: #FCF8F0 var(--paper-light) 0 0 / 512px; clip-path: var(--torn-soft);
  opacity: 0; transform: translate(9%, 5%) rotate(6deg) scale(.95); transition: transform 650ms cubic-bezier(.22, .61, .36, 1), opacity 450ms ease; will-change: transform, opacity; }
.story-flip__frame.is-prev { opacity: 1; z-index: 1; transform: translate(-8%, 3%) rotate(-7deg) scale(.94); }
.story-flip__frame.is-past { opacity: 0; transform: translate(-10%, 4%) rotate(-9deg) scale(.92); }
.story-flip__frame.is-on { opacity: 1; z-index: 2; transform: rotate(-1.5deg); }
.story-flip__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-flip__img--fallback { object-fit: contain; background: var(--sky) var(--paper-sky) 0 0 / 512px; padding: 8%; }
/* Paper scraps behind the deck: still, so nothing moves while you scroll except the cards. */
.story-flip__scrap { position: absolute; z-index: 0; width: 34%; height: 18%; clip-path: var(--torn-a); opacity: .95; }
.story-flip__scrap--a { left: -6%; top: 12%; background: var(--mustard); transform: rotate(-8deg); }
.story-flip__scrap--b { right: -4%; top: 46%; background: var(--pink); transform: rotate(6deg); }
.story-flip__scrap--c { left: 8%; bottom: -3%; background: var(--vermilion); width: 26%; transform: rotate(4deg); }
.story-flip__dots, .story-deck__dots { display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.story-flip__dots { position: absolute; left: 0; right: 0; bottom: -28px; }
.story-flip__dots li, .story-deck__dots li { width: 8px; height: 8px; border-radius: 50%; background: rgba(23, 23, 23, .25); transition: background 300ms, transform 300ms; }
.story-flip__dots li.is-on, .story-deck__dots li.is-on { background: var(--ink); transform: scale(1.3); }
.story-deck__dots { display: none; }
.story-flip__steps { list-style: none; margin: 0; padding: 0; }
.story-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; max-width: 34rem; margin-left: auto; margin-right: auto; }
.story-step__img { display: none; }
.story-step__k { margin: 0 0 var(--s-2); font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; color: var(--vermilion-deep); }
.story-step h3 { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.4rem); font-weight: 900; line-height: 1.1; margin: 0 0 var(--s-3); }
.story-step p:last-child, .story-step__body { font-size: 1.12rem; line-height: 1.6; margin: 0; }
.storybook { overflow-x: clip; }
@media (max-width: 860px) {
  .story-flip { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .story-flip__stage { display: none; }
  .story-flip__steps { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(50% - 50vw); padding: 10px 9vw 22px; scroll-padding: 0 9vw; }
  .story-flip__steps::-webkit-scrollbar { display: none; }
  .story-step { flex: 0 0 min(82vw, 380px); min-height: 0; margin: 0; display: block; scroll-snap-align: center; scroll-snap-stop: always;
    padding: 12px 12px 18px; background: #FCF8F0 var(--paper-light) 0 0 / 512px; border-radius: 3px; box-shadow: var(--shadow-paper);
    transform: rotate(var(--tilt, -2deg)) scale(.94); transition: transform 420ms cubic-bezier(.22, .61, .36, 1); }
  .story-step:nth-child(even) { --tilt: 2deg; }
  .story-step.is-on { transform: none; }
  .story-step__img { display: block; margin: 0 0 var(--s-3); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--sky); }
  .story-step__img img { width: 100%; height: 100%; object-fit: cover; }
  .story-step h3 { font-size: 1.4rem; margin-bottom: var(--s-2); }
  .story-step p:last-child { font-size: 1rem; line-height: 1.55; }
  .story-deck__dots { display: flex; margin-top: var(--s-2); }
}
@media (prefers-reduced-motion: reduce) {
  .story-flip__frame, .story-step { transition: none; }
}

/* Home hero photo (October 2026): Nagesh in the collage replaces the cutout and the drawn
   collage. The title sits on the open sky at the top left; the picture fills the bottom. */
.hero--photo .hero__photo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: auto; }
.hero--photo .hero__photo img { display: block; width: 100%; min-width: 1100px; max-width: none; height: auto; margin-left: 50%; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%); }
@media (min-width: 861px) { .hero--photo .hero__copy { padding-bottom: max(330px, calc(28vw + 24px)); } }
@media (max-width: 860px) {
  .hero--photo .hero__copy { padding-bottom: 0; }
  .hero--photo .hero__photo { position: relative; left: auto; transform: none; width: auto; height: auto; overflow: visible; margin-top: -48px; }
  .hero--photo .hero__photo img { min-width: 0; width: 100%; margin: 0; transform: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%); }
}

/* Essay heroes with Nagesh's photo: the title sits in the open sky above the collage.
   --sky-depth is how far down the left half the sky reaches (a fraction of the picture),
   so the copy leaves room for the collage instead of covering it. */
@media (min-width: 1101px) {
  .article-hero--photo .article-hero__copy { position: relative; z-index: 2; padding-bottom: calc(100vw * var(--ratio) * (1 - var(--sky-depth))); }
  .article-hero--photo .article-hero__art { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }
  /* On very wide screens the photo gets taller than the copy needs; the hero grows with it, so the
     photo never slides up under the menu or the byline. */
  .article-hero--photo { min-height: calc(100vw * var(--ratio) + 110px); }
  .article-hero--photo .article-hero__art img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%); }
}

/* The smallest phones (320 to 374px): keep the name on one line, and let long essay
   title lines wrap instead of running off the edge. */
.brand__name { white-space: nowrap; }
@media (max-width: 374px) {
  .brand { font-size: 1.15rem; }
  .article-hero__copy .headline .strip { white-space: normal; }
  .hero .headline { font-size: 1.7rem; }
}

/* Keep the sky fade above Nagesh's head: in every hero photo the head starts at least
   5% (desktop) or 12% (home, phones) from the top, so the fade stops short of it and
   the sky never tints his hair. */
.hero--photo .hero__photo img, .article-hero--photo .article-hero__art img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%); mask-image: linear-gradient(to bottom, transparent 0, #000 4%); }
@media (max-width: 860px) {
  .hero--photo .hero__photo img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%); mask-image: linear-gradient(to bottom, transparent 0, #000 9%); }
}
@media (max-width: 1100px) {
  .article-hero--photo .article-hero__art img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%); mask-image: linear-gradient(to bottom, transparent 0, #000 6%); }
}

/* Photo heroes: the page sky matches the blue in the photos, so the top edge of the
   picture disappears into it instead of showing a lighter band. */
.hero.hero--photo, .article-hero.article-hero--photo { background: #BEF0FF var(--paper-sky) 0 0 / 512px; background-blend-mode: multiply; }
@media (max-width: 1100px) { .article-hero--photo .article-hero__art { margin-top: 0; } }

/* Page heads with Nagesh's photo. Desktop keeps the framed photo beside the title until a
   hero-format photo (<card>-hero.webp) exists; then build.mjs switches the page to the
   homepage hero layout. On tablets and phones the photo runs edge to edge below the
   title, down to the torn edge, as on the homepage. */
@media (max-width: 1100px) {
  .page-head--photo { padding-bottom: 0; background: #BEF0FF var(--paper-sky) 0 0 / 512px; background-blend-mode: multiply; }
  .page-head--photo .project-head__in { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .page-head--photo .project-head__art.photo { filter: none; margin: 0 0 0 calc(50% - 50vw); width: 100vw; max-width: none; }
  .page-head--photo .project-head__art.photo img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; clip-path: none; }
}
/* Page heads in the hero layout keep the homepage's spacing; their copy can be longer. */
.page-hero .hero__sub { max-width: 40ch; }
.page-hero .crumbs, .page-hero .pcard__meta { margin-bottom: var(--s-3); }
@media (max-width: 480px) { .page-head--art .headline { font-size: 1.75rem; } }
@media (max-width: 860px) { .page-hero.hero--photo .hero__photo { margin-top: var(--s-5); } .page-hero .hero__copy { padding-bottom: 0; } }
@media (max-width: 860px) { .page-hero .headline .strip { white-space: normal; } }

/* "Say hello" with its own cobalt photo (say-hello-<variant>.webp), laid out like the
   homepage hero: copy on the open cobalt at the left, the photo along the bottom and
   right. Phones: the photo sits below the copy. */
.closing--photo { position: relative; overflow: hidden; padding-bottom: 0; isolation: isolate; }
.closing--photo .closing__in { display: block; position: relative; z-index: 2; }
.closing__copy { max-width: 600px; }
.closing__photo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }
.closing__photo img { display: block; width: 100%; min-width: 1100px; max-width: none; height: auto; margin-left: 50%; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%); mask-image: linear-gradient(to bottom, transparent 0, #000 4%); }
@media (min-width: 861px) { .closing__copy { padding-bottom: max(330px, calc(28vw + 24px)); } }
@media (max-width: 860px) {
  .closing__photo { position: relative; margin-top: var(--s-5); }
  .closing__photo img { min-width: 0; margin: 0; transform: none; }
}

/* Page heroes: the title column reserves exactly the part of the photo below its open sky
   (--sky-depth, measured per photo), so the title never sits on the collage. The photo
   is at least 1100px wide, centered, as on the homepage. */
@media (min-width: 861px) {
  .page-hero .hero__copy { padding-bottom: max(260px, calc(max(100vw, 1100px) * var(--ratio) * (1 - var(--sky-depth)) + 24px)); }
}
/* Keep page-hero text in the left half, clear of Nagesh in the photo: long title lines wrap. */
@media (min-width: 861px) {
  .page-hero .hero__copy { max-width: min(52vw, 760px); }
  .page-hero .headline { font-size: clamp(2rem, 0.9rem + 2.5vw, 3.6rem); }
  .page-hero .headline .strip { white-space: normal; }
}

/* Essays on desktop: the reading column keeps its comfortable measure, and the empty
   space beside it holds a quiet side rail (author, date, sections, sharing). */
.essay-rail { display: none; }
@media (min-width: 1101px) {
  .essay-layout { display: grid; grid-template-columns: 210px minmax(0, 46rem); gap: clamp(40px, 5vw, 80px); justify-content: center; align-items: start; }
  .essay-layout .prose { margin: 0; max-width: 46rem; }
  .essay-layout .prose p, .essay-layout .prose li { font-size: 1.19rem; }
  .essay-layout .prose .lead { font-size: 1.4rem; }
  .essay-layout .prose blockquote { font-size: 1.6rem; line-height: 1.3; }
  .essay-rail { display: block; position: sticky; top: calc(74px + var(--s-5)); padding-top: var(--s-2); font-size: 0.92rem; }
  .essay-rail__by { display: flex; gap: 12px; align-items: center; margin-bottom: var(--s-3); }
  .essay-rail__by img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
  .essay-rail__name { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; line-height: 1.2; }
  .essay-rail__role { margin: 2px 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.35; }
  .essay-rail__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px dashed var(--line); color: var(--muted); font-size: 0.85rem; }
  .essay-toc { margin-bottom: var(--s-5); }
  .essay-toc a { font-size: 0.9rem; line-height: 1.35; }
  .essay-rail__share { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .essay-rail__share .textlink { font-size: 0.9rem; }
  .essay-rail__share .copy-status { flex-basis: 100%; font-size: 0.8rem; color: var(--muted); }
}

/* Small refinements (October 2026 review). */
/* Essay cards on phones: kind and date only, so the line never wraps with a leading dot. */
@media (max-width: 480px) { .ecard__meta span:nth-child(2) { display: none; } }
/* Flip-book: a little less scrolling per moment on desktop. */
@media (min-width: 861px) { .story-step { min-height: 60vh; } }

/* Owner docs (/docs/): a document tab bar under the head, readable tables, and calm prose. */
.doc-nav { position: sticky; top: 74px; z-index: 5; background: var(--paper) var(--paper-light) 0 0 / 512px; border-bottom: 1.5px solid var(--ink); }
.doc-nav .wrap { display: flex; gap: 4px 22px; overflow-x: auto; scrollbar-width: none; padding-top: 12px; padding-bottom: 12px; }
.doc-nav a { flex: none; color: var(--ink-soft); font-weight: 700; font-size: 0.95rem; text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.doc-nav a:hover { color: var(--ink); }
.doc-nav a[aria-current] { color: var(--ink); border-bottom-color: var(--vermilion); }
.doc-nav a.doc-nav__out { margin-left: auto; font-weight: 600; }
.prose.doc h2 { margin-top: var(--s-6); }
.prose.doc h3 { font-size: 1.15rem; margin: var(--s-5) 0 var(--s-2); }
.doc-table { overflow-x: auto; margin: var(--s-4) 0 var(--s-5); }
.doc-table table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.doc-table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1.5px solid var(--ink); }
.prose.doc code { font-size: 0.9em; background: var(--cream); padding: 1px 5px; border-radius: 3px; }

/* =====================================================================
   Story reel (About): the homepage hero layout, with the photo changing scene by scene.
   The title stays; each scene crossfades its photo (with a slow push-in) and its short
   caption. A story-style bar and controls sit under the caption.
   Phones: the photo sits below the copy in a 4:3 frame, cropped toward him.
   ===================================================================== */
.reel-hero .reel__caps { display: grid; margin: var(--s-4) 0 var(--s-4); max-width: 40ch; }
.reel__scene { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 450ms ease, transform 450ms ease, visibility 0s 450ms; }
.reel__scene.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 450ms ease 150ms, transform 450ms ease 150ms, visibility 0s; }
.reel__k { display: inline-block; margin: 0 0 10px; padding: 4px 10px; background: var(--ink); color: var(--paper); font-weight: 800; font-size: 0.78rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; }
.reel__line { display: block; font-size: var(--fs-lead); line-height: 1.5; font-weight: 600; color: var(--ink); }

.reel__bars { display: flex; gap: 6px; max-width: 460px; margin-bottom: 12px; }
.reel__bars button { flex: 1; height: 20px; padding: 8px 0; border: 0; background: none; cursor: pointer; }
/* A thumb-sized tap area (44 px) around each bar without changing how the bars look (October 2026). */
.reel__bars button { position: relative; }
.reel__bars button::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
.reel__bars button i { display: block; height: 4px; border-radius: 2px; background: rgba(23, 23, 23, .18); overflow: hidden; position: relative; }
.reel__bars button i::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--ink); }
.reel__bars button:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.reel__bars button.is-done i::after { width: 100%; }
.reel__bars button.is-on i::after { animation: reelBar var(--reel-ms, 4500ms) linear forwards; }
.reel-hero.is-paused .reel__bars button.is-on i::after { animation-play-state: paused; }
@keyframes reelBar { from { width: 0; } to { width: 100%; } }


/* The photos: stacked in one grid cell, crossfading. */
.reel__stage { display: grid; outline-offset: -6px; touch-action: pan-y; }
.reel__stage:focus-visible { outline: 3px solid var(--cobalt); }
.reel__stage .reel__img { grid-area: 1 / 1; opacity: 0; transition: opacity 1100ms ease; transform-origin: 72% 45%; }
.reel__stage .reel__img.is-on { opacity: 1; animation: reelPush calc(var(--reel-ms, 4500ms) + 1100ms) linear forwards; }
.reel-hero.is-paused .reel__img.is-on { animation-play-state: paused; }
@keyframes reelPush { from { scale: 1; } to { scale: 1.04; } }

@media (max-width: 860px) {
  .reel-hero .reel__caps { margin: var(--s-3) 0; }
  .reel-hero.hero--photo .reel__stage { display: block; position: relative; aspect-ratio: 5 / 4; overflow: hidden; }
  .reel-hero.hero--photo .reel__stage .reel__img { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; margin: 0; transform: none; object-fit: cover; object-position: 84% 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .reel__scene, .reel__scene.is-on, .reel__stage .reel__img { transition: none; transform: none; }
  .reel__stage .reel__img.is-on { animation: none; }
  .reel__bars button.is-on i::after { animation: none; width: 100%; }
}

/* =====================================================================
   Homepage variations (owner only, /docs/home-v01.html to v10): pieces the variations add
   to the live homepage. Work as full-width panels; the latest essay as a feature; the
   press quote with its key line highlighted as it comes into view.
   ===================================================================== */
.headline--md { font-size: clamp(1.7rem, 0.9rem + 2vw, 2.9rem); line-height: 1.1; }

/* Selected work: each case study is a full-width hero panel; on larger screens the panels
   stick and the next slides over the last, like prints laid on a table. */
.hp-work__head.band { padding-bottom: var(--s-6); }
.hp-panel { position: relative; overflow: hidden; background: #BEF0FF var(--paper-sky) 0 0 / 512px; background-blend-mode: multiply; isolation: isolate; }
.hp-panel__in { position: relative; z-index: 2; }
.hp-panel__copy { max-width: min(46vw, 640px); padding: calc(74px + var(--s-5)) 0 0; }
.hp-panel__short { font-size: var(--fs-lead); line-height: 1.5; margin: var(--s-3) 0; max-width: 40ch; }
.hp-panel__role { margin: 0 0 var(--s-4); max-width: 46ch; color: var(--ink-soft); }
.hp-panel__go { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; }
.hp-panel__photo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }
.hp-panel__photo img { display: block; width: 100%; min-width: 1100px; max-width: none; height: auto; margin-left: 50%; transform: translateX(-50%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%); mask-image: linear-gradient(to bottom, transparent 0, #000 5%); }
@media (min-width: 861px) {
  .hp-panel { min-height: max(100vh, calc(max(100vw, 1100px) * var(--ratio) + 74px)); }
  .hp-panel__copy { padding-bottom: calc(max(100vw, 1100px) * var(--ratio) * (1 - var(--sky-depth)) + 24px); }
}
@media (min-width: 1000px) and (min-height: 700px) {
  .hp-panel { position: sticky; top: 0; height: 100vh; min-height: 0; box-shadow: 0 -24px 48px -12px rgba(12, 22, 44, .35); border-radius: 14px 14px 0 0; }
  .hp-panel:first-of-type { border-radius: 0; box-shadow: none; }
  .hp-panel__copy { padding: calc(74px + var(--s-4)) 0 0; }
  .hp-panel__photo { bottom: calc(-0.08 * max(100vw, 1100px) * var(--ratio)); }
  .hp-panel .headline--md { font-size: clamp(1.6rem, 0.9rem + 1.6vw, 2.5rem); }
}
@media (max-width: 860px) {
  .hp-panel__copy { max-width: none; padding: var(--s-7) 0 var(--s-4); }
  .hp-panel__photo { position: relative; aspect-ratio: 5 / 4; overflow: hidden; }
  .hp-panel__photo img { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; margin: 0; transform: none; object-fit: cover; object-position: 82% 40%; }
}
.hp-work__more.band { padding-top: var(--s-6); position: relative; z-index: 3; }


/* Writing and press: the latest piece, the press quote, then the rest as short lists. */
.hp-writing .section-head { margin-bottom: var(--s-5); }
.hp-latest__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.hp-latest__art { display: block; transform: rotate(-1.2deg); box-shadow: 0 2px 3px rgba(23, 23, 23, .14), 0 30px 60px -30px rgba(12, 22, 44, .6); transition: transform .4s; }
.hp-latest__art:hover { transform: rotate(0) translateY(-4px); }
.hp-latest__art figure { margin: 0; }
.hp-latest__title { margin: 6px 0 var(--s-3); font-size: clamp(1.9rem, 1rem + 2.4vw, 3.3rem); line-height: 1.05; }
.hp-latest__title a { color: inherit; text-decoration: none; }
.hp-latest__title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--vermilion); }
.hp-latest__sum { font-size: var(--fs-lead); line-height: 1.5; margin: 0 0 var(--s-4); }
.hp-pull { margin: 0 0 var(--s-5); padding-left: 18px; border-left: 4px solid var(--vermilion); }
.hp-pull p { margin: 0; font-family: var(--font-display, Georgia, serif); font-weight: 800; font-size: clamp(1.3rem, 0.9rem + 1vw, 1.8rem); line-height: 1.3; }

.hp-quote { margin: var(--s-8, 96px) auto var(--s-7); max-width: 1000px; text-align: center; }
.hp-quote__k { margin: 0 0 var(--s-4); font-size: 0.8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--vermilion); }
.hp-quote blockquote { margin: 0 0 var(--s-5); }
.hp-quote blockquote p { margin: 0; font-family: var(--font-display, Georgia, serif); font-weight: 800; font-size: clamp(1.6rem, 0.9rem + 2.3vw, 3rem); line-height: 1.22; text-wrap: balance; }
.hp-quote mark { color: inherit; background: linear-gradient(transparent 12%, rgba(246, 196, 69, .85) 12%, rgba(246, 196, 69, .85) 88%, transparent 88%) no-repeat 0 0 / 0% 100%; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1.4s cubic-bezier(.4, 0, .2, 1) .3s; }
.hp-quote.is-lit mark { background-size: 100% 100%; }
.hp-quote figcaption { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-4); color: var(--ink-soft); font-weight: 600; }

.hp-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.hp-library__h { margin: 0 0 var(--s-3); font-size: 0.85rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hp-posts { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.hp-post a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid rgba(23, 23, 23, .2); text-decoration: none; color: inherit; transition: padding .25s, background .25s; }
.hp-post a:hover { padding-left: 10px; background: rgba(240, 75, 47, .05); }
.hp-post__topic { grid-column: 1; font-size: 0.75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.hp-post__title { grid-column: 1; font-family: var(--font-display, Georgia, serif); font-weight: 800; font-size: 1.15rem; line-height: 1.25; }
.hp-post__sum { grid-column: 1; color: var(--ink-soft); line-height: 1.5; }
.hp-post__go { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.9rem; white-space: nowrap; }

@media (max-width: 860px) {
  .hp-latest__in, .hp-more { grid-template-columns: minmax(0, 1fr); }
  .hp-latest__art { transform: none; }
  .hp-quote { margin: var(--s-7) 0 var(--s-6); text-align: left; }
  .hp-quote figcaption { justify-content: flex-start; }
  .hp-post a { grid-template-columns: minmax(0, 1fr); }
  .hp-post__go { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { .hp-quote mark { transition: none; background-size: 100% 100%; } .hp-latest__art { transition: none; } }

/* Variation pieces: the Featured in mark, the facts strip, the 30-second summary, the
   compact How I work row, and the bar that moves between variations. */
.hv-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-4); padding: 7px 14px; border-radius: 999px; background: rgba(252, 248, 240, .9); border: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 0.92rem; box-shadow: 0 2px 0 var(--ink); }
.hv-chip span { color: var(--ink-soft); }
.hv-glance { position: relative; z-index: 3; background: #FCF8F0 var(--paper-light) 0 0 / 512px; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.hv-glance dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hv-glance dl > div { padding: var(--s-4) var(--s-4) var(--s-4) 0; }
.hv-glance dl > div + div { padding-left: var(--s-4); border-left: 1px solid rgba(23, 23, 23, .2); }
.hv-glance dt { font-size: 0.75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--vermilion); }
.hv-glance dd { margin: 4px 0 0; font-family: var(--font-display, Georgia, serif); font-weight: 800; font-size: clamp(1rem, 0.8rem + 0.5vw, 1.25rem); line-height: 1.25; }
.hv-glance dd a { color: inherit; text-decoration-color: var(--vermilion); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hv-press.band { padding-top: var(--s-6); padding-bottom: var(--s-6); }
.hv-press .hp-quote { margin: 0 auto; }
.hv-latest { margin-bottom: var(--s-6); }
.hv-essays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hv-30__card { max-width: 980px; margin: 0 auto; padding: var(--s-5) var(--s-6); background: #FCF8F0 var(--paper-light) 0 0 / 512px; border: 1.5px solid var(--ink); border-radius: 4px; box-shadow: 0 4px 0 var(--ink); }
.hv-30__h { margin: 0 0 var(--s-4); font-size: clamp(1.4rem, 1rem + 1vw, 2rem); }
.hv-30__facts { margin: 0 0 var(--s-4); display: grid; gap: 10px; }
.hv-30__facts > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-3); padding-bottom: 10px; border-bottom: 1px solid rgba(23, 23, 23, .15); }
.hv-30__facts dt { font-weight: 800; }
.hv-30__facts dd { margin: 0; line-height: 1.5; }
.hv-steps__list { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); }
.hv-steps__list li { background: #FCF8F0 var(--paper-light) 0 0 / 512px; padding: 10px 10px var(--s-4); border-radius: 3px; box-shadow: 0 2px 3px rgba(23, 23, 23, .12), 0 18px 32px -22px rgba(12, 22, 44, .5); }
.hv-steps__list li:nth-child(odd) { transform: rotate(-1deg); } .hv-steps__list li:nth-child(even) { transform: rotate(1deg); }
.hv-steps__list img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; margin-bottom: 10px; }
.hv-steps__k { margin: 0 4px 4px; font-size: 0.75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--vermilion); }
.hv-steps__list h3 { margin: 0 4px; font-size: 1.05rem; line-height: 1.25; }
.hv-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 8px 10px 8px 16px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 999px; box-shadow: 0 6px 18px -8px rgba(12, 22, 44, .45); font-size: 0.88rem; }
.hv-bar > a { font-weight: 700; color: var(--ink); white-space: nowrap; }
.hv-bar > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-bar__go { display: flex; gap: 6px; }
.hv-bar__go a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ink); color: var(--ink); }
.hv-bar__go svg { width: 16px; height: 16px; }
.hv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-7); }
.hv-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-6); align-items: start; padding-bottom: var(--s-6); border-bottom: 1.5px solid var(--ink); }
.hv-item__shot { display: block; position: sticky; top: 100px; border: 1.5px solid var(--ink); border-radius: 4px; overflow: hidden; background: var(--sky); aspect-ratio: 16 / 10; box-shadow: 0 18px 36px -24px rgba(12, 22, 44, .6); }
.hv-item__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.hv-item__shot span { display: grid; place-items: center; height: 100%; font-weight: 700; color: var(--ink); }
.hv-item__n { margin: 0; font-size: 0.8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--vermilion); }
.hv-item__h { margin: 4px 0 var(--s-4); font-size: clamp(1.6rem, 1rem + 1.4vw, 2.4rem); line-height: 1.1; }
.hv-item__h a { color: inherit; text-decoration: none; }
.hv-why { margin: 0 0 var(--s-4); display: grid; gap: 10px; }
.hv-why > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s-3); padding-bottom: 10px; border-bottom: 1px solid rgba(23, 23, 23, .15); }
.hv-why dt { font-weight: 800; }
.hv-why dd { margin: 0; line-height: 1.5; }
.hv-why dd p { margin: 0 0 6px; } .hv-why dd ul, .hv-why dd ol { margin: 4px 0 0; padding-left: 1.2em; }
@media (max-width: 860px) {
  .hv-glance dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv-glance dl > div, .hv-glance dl > div + div { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-left: 0; }
  .hv-glance dl > div:nth-child(even) { padding-left: var(--s-3); border-left: 1px solid rgba(23, 23, 23, .2); }
  .hv-glance dl > div:nth-child(n+3) { border-top: 1px solid rgba(23, 23, 23, .2); }
  .hv-essays { grid-template-columns: minmax(0, 1fr); }
  .hv-30__card { padding: var(--s-4); }
  .hv-30__facts > div, .hv-why > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hv-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv-item { grid-template-columns: minmax(0, 1fr); }
  .hv-item__shot { position: static; }
  .hv-bar { bottom: auto; top: 80px; font-size: 0.8rem; }
}

/* The frameworks he works by (How I work, and homepage variation 10): three lenses as
   overlapping paper circles, the design-thinking loop with arcs that send work back to
   earlier steps, and the four habits it shares with agile. */
.method .section-head { margin-bottom: var(--s-6); }
.method__h { margin: 0 0 8px; font-size: clamp(1.4rem, 1rem + 1vw, 2rem); line-height: 1.15; }
.method__lead { margin: 0 0 var(--s-4); max-width: 60ch; line-height: 1.55; color: var(--ink-soft); }
.lenses { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); margin-bottom: var(--s-8, 96px); }
.lenses__copy { order: -1; }
.lenses__copy .method__lead { margin-bottom: 0; }
.lenses__fig { margin: 0; }
.lenses__svg { width: 100%; height: auto; display: block; max-width: 880px; margin: 0 auto; }
.lenses__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.lenses__list-wrap { order: 2; }
.lens { padding: var(--s-3) var(--s-4); background: #FCF8F0 var(--paper-light) 0 0 / 512px; border-left: 6px solid var(--lens, var(--ink)); border-radius: 3px; box-shadow: 0 2px 3px rgba(23, 23, 23, .1); }
.lens--a { --lens: var(--vermilion); } .lens--b { --lens: #67B7E5; } .lens--c { --lens: #F6C445; }
.lens__k { margin: 0; font-family: var(--font-display, Georgia, serif); font-weight: 900; font-size: 1.25rem; }
.lens__start { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--font-body, inherit); font-size: 0.7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }
.lens__q { margin: 2px 0 0; font-weight: 700; }
.lens__body { margin: 6px 0 0; color: var(--ink-soft); line-height: 1.5; }
.loop { margin-bottom: var(--s-8, 96px); }
.loop__track { position: relative; margin-top: var(--s-4); }
.loop__arcs { display: block; width: 100%; height: auto; overflow: visible; }
.loop__arcs path { fill: none; stroke: var(--vermilion); stroke-width: 2.5; stroke-dasharray: 7 7; }
.loop__arcs text { font-size: 15px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #F3EAD6; stroke-width: 12px; stroke-linejoin: round; }
.loop__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); }
.loop__step { text-align: center; }
.loop__icon { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 10px; border-radius: 50%; border: 2.5px solid var(--ink); background: #FCF8F0 var(--paper-light) 0 0 / 512px; color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.loop__icon svg { width: 38px; height: 38px; }
.loop__step:nth-child(1) .loop__icon { color: var(--vermilion); }
.loop__n { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--vermilion); }
.loop__step h4 { margin: 4px 0 6px; font-family: var(--font-display, Georgia, serif); font-size: 1.35rem; }
.loop__step p { margin: 0 auto; max-width: 22ch; font-size: 0.95rem; line-height: 1.45; color: var(--ink-soft); }
.loop__back { display: none; }
.agile { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--s-6); align-items: center; }
.agile__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.agile__list li { text-align: center; }
.agile__icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 8px; border-radius: 50%; border: 2px solid var(--ink); background: #FCF8F0 var(--paper-light) 0 0 / 512px; color: #2a7fb8; }
.agile__icon svg { width: 32px; height: 32px; }
.agile__list h4 { margin: 0 0 4px; font-size: 1.05rem; }
.agile__list p { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--ink-soft); }
.method__credit { margin: var(--s-6) 0 0; font-size: 0.85rem; color: var(--ink-soft); }
.method--compact .lenses { margin-bottom: var(--s-7); }
.method--compact .loop { margin-bottom: var(--s-7); }
@media (max-width: 960px) {
  .lenses, .agile { grid-template-columns: minmax(0, 1fr); }
  .lenses__list { grid-template-columns: minmax(0, 1fr); }
  .loop__arcs { display: none; }
  .loop__steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .loop__step { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--s-3); text-align: left; align-items: start; }
  .loop__icon { grid-row: span 3; width: 60px; height: 60px; margin: 0; box-shadow: 0 3px 0 var(--ink); }
  .loop__icon svg { width: 28px; height: 28px; }
  .loop__step h4 { margin: 2px 0 2px; }
  .loop__step p { margin: 0; max-width: none; }
  .loop__back { display: block; list-style: none; margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border: 1.5px dashed var(--vermilion); border-radius: 4px; }
  .loop__back li { padding: 4px 0; line-height: 1.45; }
  .agile__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The product discovery flip-book (homepage): the first frame is the three lenses on paper;
   each step names how he does it and, where it applies, how the work loops back. */
.story-lenses { display: grid; place-items: center; padding: 3%; background: #FCF8F0 var(--paper-light) 0 0 / 512px; }
.story-lenses .lenses__svg { max-width: 100%; max-height: 100%; }
.lenses__svg--tall { max-width: 420px; }
.story-step__how { display: inline-block; align-self: flex-start; margin: 0 0 var(--s-3); padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.story-step .story-step__body { margin: 0; }
.story-step__loop { margin: var(--s-4) 0 0 !important; padding: 10px 14px; border: 1.5px dashed var(--vermilion); border-radius: 4px; background: rgba(252, 248, 240, .7); font-size: 1rem !important; font-weight: 700; line-height: 1.45 !important; }
.story-step__loop span { color: var(--vermilion); font-size: 1.2em; margin-right: 4px; }
@media (max-width: 860px) {
  .story-step__how { font-size: 0.7rem; }
  .story-step__loop { font-size: 0.92rem !important; }
}

/* The 90-second video on How I work: framed like a print on the sky, with the captions as
   text below for anyone who can't watch. */
.ux-video__fig { margin: var(--s-5) auto 0; max-width: 1040px; }
.ux-video__player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--sky); border: 6px solid #FCF8F0; border-radius: 4px; box-shadow: 0 2px 3px rgba(23, 23, 23, .14), 0 34px 60px -30px rgba(12, 22, 44, .6); }
.ux-video__credit { margin-top: var(--s-3); font-size: 0.88rem; color: var(--ink-soft); }
.ux-video__text { max-width: 1040px; margin: var(--s-4) auto 0; padding: var(--s-3) var(--s-4); background: rgba(252, 248, 240, .85); border-radius: 4px; }
.ux-video__text summary { cursor: pointer; font-weight: 700; }
.ux-video__text ol { margin: var(--s-3) 0 0; padding-left: 1.3em; display: grid; gap: 8px; line-height: 1.55; }

/* Watch my intro: a play button in the hero that opens the intro reel in a dialog. */
.intro-play { display: inline-flex; align-items: center; gap: 12px; margin-top: var(--s-4); padding: 6px 18px 6px 6px; border: 1.5px solid var(--ink); border-radius: 999px; background: rgba(252, 248, 240, .92); color: var(--ink); font: inherit; font-size: 0.98rem; cursor: pointer; box-shadow: 0 2px 0 var(--ink); transition: transform .2s; }
.intro-play:hover { transform: translateY(-1px); }
.intro-play:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.intro-play__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--vermilion); border: 1.5px solid var(--ink); }
.intro-play__icon svg { margin-left: 3px; }
.intro-play__len { color: var(--ink-soft); font-weight: 600; margin-left: 4px; }
.intro-dialog { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; background: transparent; overflow: visible; }
.intro-dialog::backdrop { background: rgba(12, 22, 44, .78); }
.intro-dialog__in { position: relative; padding: 10px; background: #FCF8F0 var(--paper-light) 0 0 / 512px; border-radius: 6px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.intro-dialog__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--sky); border-radius: 3px; }
.intro-dialog__close { position: absolute; top: -16px; right: -16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 2px 0 var(--ink); }
.intro-dialog__text { margin: 10px 4px 2px; }
.intro-dialog__text summary { cursor: pointer; font-weight: 700; }
.intro-dialog__text ol { margin: 8px 0 4px; padding-left: 1.3em; display: grid; gap: 6px; line-height: 1.5; max-height: 30vh; overflow: auto; }
@media (max-width: 860px) { .intro-dialog__close { top: -12px; right: -6px; } }

/* The iceberg video, featured at the end of the homepage How I work flip-book. */
.story-video { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--s-6); align-items: center; margin: var(--s-8, 96px) 0 var(--s-5); }
.story-video__k { margin: 0 0 8px; font-size: 0.8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.story-video h3 { margin: 0 0 var(--s-3); font-size: clamp(1.5rem, 1rem + 1.4vw, 2.3rem); line-height: 1.12; }
.story-video__cap p:last-child { margin: 0; line-height: 1.55; }
@media (max-width: 860px) { .story-video { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-6); } }

/* =====================================================================
   Videos in the page (never a pop-up): a cream-bordered print that plays silently with
   its captions when on screen; a paper note floats up offering the music.
   ===================================================================== */
.vid { margin: 0; }
.vid__frame { position: relative; }
.vid__player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--sky); border: 6px solid #FCF8F0; border-radius: 4px;
  box-shadow: 0 2px 3px rgba(23, 23, 23, .14), 0 34px 60px -30px rgba(12, 22, 44, .6); }
.vid__sound { position: absolute; left: 50%; bottom: 64px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 11px 12px; border: 1.5px solid var(--ink); border-radius: 3px;
  background: #FFFDF7 var(--paper-light) 0 0 / 512px; color: var(--ink); font: 700 0.98rem/1.2 var(--font-body, Inter, sans-serif); cursor: pointer;
  box-shadow: 0 3px 0 var(--ink), 0 18px 30px -16px rgba(12, 22, 44, .6); opacity: 0; transform: translate(-50%, 18px) rotate(-1.5deg); transition: opacity .45s, transform .55s cubic-bezier(.3, 1.4, .5, 1); }
.vid__sound svg { flex: none; color: var(--vermilion); }
.vid__sound::before { content: ""; position: absolute; top: -9px; left: 50%; width: 52px; height: 16px; margin-left: -26px; background: rgba(237, 183, 45, .85); transform: rotate(-3deg); }
.vid.is-hinting .vid__sound { opacity: 1; transform: translate(-50%, 0) rotate(-1.5deg); }
.vid__sound:hover { transform: translate(-50%, -2px) rotate(0); }
.vid__sound:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.vid__cap { margin-top: var(--s-3); font-size: 0.95rem; color: var(--ink-soft); }
.vid__cap strong { color: var(--ink); }
.vid__text { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); background: rgba(252, 248, 240, .85); border-radius: 4px; }
.vid__text summary { cursor: pointer; font-weight: 700; }
.vid__text ol { margin: var(--s-3) 0 0; padding-left: 1.3em; display: grid; gap: 8px; line-height: 1.55; }
.band--sky .vid__cap, .band--sky .vid__cap strong { color: var(--ink); }
a.intro-play { text-decoration: none; }

/* Meet Nagesh: the intro reel as a tilted print beside the cards */
.intro__reel { max-width: 980px; margin: var(--s-6) auto var(--s-6); }
.intro__reel .vid__player { transform: rotate(-.6deg); }
.about-reel .vid { max-width: 1040px; margin: 0 auto; }

/* Homepage How I work: the iceberg video after the loop */
.method-video { margin: var(--s-8, 96px) 0 var(--s-7); }
.method-video .method__lead { max-width: 64ch; margin-bottom: var(--s-5); }
.method-video .vid { max-width: 1040px; }
.ux-video .vid { max-width: 1040px; margin: var(--s-5) auto 0; }

/* Lenses: point at a lens to light its circle */
.lens { cursor: default; transition: transform .25s, box-shadow .25s; }
.lens:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.lenses .lens-c { transition: opacity .3s, stroke-width .3s; }
.lenses[data-on] .lens-c { opacity: .3; }
.lenses[data-on="a"] .lens-c--a, .lenses[data-on="b"] .lens-c--b, .lenses[data-on="c"] .lens-c--c { opacity: 1; stroke-width: 4.5; }
.lenses[data-on="a"] .lens--a, .lenses[data-on="b"] .lens--b, .lenses[data-on="c"] .lens--c { transform: translateY(-3px); box-shadow: 0 3px 0 var(--lens), 0 14px 24px -14px rgba(12, 22, 44, .5); }

/* The loop's "back" arrows sweep in from left to right when the loop arrives */
.loop .loop__arcs { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s cubic-bezier(.6, .05, .3, 1) .2s; }
.loop.is-in .loop__arcs { clip-path: inset(-20px -20px -20px -20px); }
.loop .loop__arcs--down { transition-delay: .7s; }
@media (max-width: 760px) { .vid__sound { left: auto; right: 12px; bottom: auto; top: 12px; gap: 6px; font-size: 0.85rem; padding: 6px 10px 7px 8px; transform: translateY(-10px) rotate(-1.5deg); } .vid.is-hinting .vid__sound { transform: rotate(-1.5deg); } .vid__sound:hover { transform: none; } .intro__reel { margin: var(--s-5) 0; } }
@media (prefers-reduced-motion: reduce) {
  .vid__sound, .lens, .lenses .lens-c { transition: none; }
  .loop .loop__arcs { clip-path: none; transition: none; }
}

/* =====================================================================
   Cards as real paper: each card is a different kind of paper pinned to the page (an index card
   with ruled lines, a sticky note, a notebook page with a red margin, a sky-blue slip, a pink slip),
   held by tape or a push pin, each at its own small angle; they straighten and lift on hover.
   The grid never leaves one card alone on a row: four cards sit two by two, and a short last row is centered.
   ===================================================================== */
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-7, 64px) var(--s-5); padding-top: 12px; }
.cards > .card { flex: 0 1 calc((100% - 2 * var(--s-5)) / 3); min-width: min(100%, 280px); }
.cards:has(> .card:nth-child(4):last-child) > .card { flex-basis: calc((100% - var(--s-5)) / 2); max-width: 520px; }
.cards:has(> .card:nth-child(2):last-child) > .card { flex-basis: calc((100% - var(--s-5)) / 2); max-width: 560px; }
.cards > .card, .build, .bet { transition: transform .35s cubic-bezier(.22, .61, .36, 1), filter .35s; }
:is(.cards > .card, .build, .bet):nth-child(5n + 1) { transform: rotate(-1.2deg); }
:is(.cards > .card, .build, .bet):nth-child(5n + 2) { transform: rotate(.9deg) translateY(6px); }
:is(.cards > .card, .build, .bet):nth-child(5n + 3) { transform: rotate(-.5deg); }
:is(.cards > .card, .build, .bet):nth-child(5n + 4) { transform: rotate(1.3deg) translateY(4px); }
:is(.cards > .card, .build, .bet):nth-child(5n + 5) { transform: rotate(-.9deg); }
:is(.cards > .card, .build, .bet):hover { transform: rotate(0) translateY(-6px); filter: drop-shadow(0 18px 22px rgba(70, 52, 20, .2)) drop-shadow(0 1px 1.5px rgba(70, 52, 20, .14)); }

/* 1: index card with faint blue rules */
:is(.cards > .card, .build, .bet):nth-child(5n + 1)::after { background:
  repeating-linear-gradient(transparent 0 27px, rgba(103, 183, 229, .3) 27px 28px) 0 22px / 100% calc(100% - 22px) no-repeat,
  #FFFDF7 var(--paper-light) 0 0 / 512px; }
/* 2: sticky note, mustard, held by a push pin */
:is(.cards > .card, .build, .bet):nth-child(5n + 2)::after { background: #F7D774 var(--grain) 0 0 / 160px; background-blend-mode: multiply; clip-path: none; border-radius: 2px 2px 14px 2px;
  box-shadow: inset -10px -12px 18px -14px rgba(120, 80, 0, .45); }
:is(.cards > .card, .build, .bet):nth-child(5n + 2)::before { width: 18px; height: 18px; margin-left: -9px; top: -6px; border-radius: 50%; clip-path: none; opacity: 1; transform: none;
  background: radial-gradient(circle at 35% 30%, #FF8A70 0 3px, #E33C1F 4px 8px, #9E2410 9px); box-shadow: 0 3px 4px rgba(0, 0, 0, .35); }
/* 3: notebook page, white with a red margin line and three punched holes */
:is(.cards > .card, .build, .bet):nth-child(5n + 3)::after { background:
  linear-gradient(90deg, transparent 0 30px, rgba(240, 75, 47, .45) 30px 31.5px, transparent 31.5px),
  radial-gradient(circle at 14px 30%, #E9DFC9 0 5px, transparent 6px), radial-gradient(circle at 14px 55%, #E9DFC9 0 5px, transparent 6px), radial-gradient(circle at 14px 80%, #E9DFC9 0 5px, transparent 6px),
  #FFFFFF var(--paper-light) 0 0 / 512px; }
:is(.cards > .card, .build, .bet):nth-child(5n + 3) { padding-left: calc(var(--s-5) + 18px); }
/* 4: sky-blue paper slip */
:is(.cards > .card, .build, .bet):nth-child(5n + 4)::after { background: #DDF0FB var(--paper-light) 0 0 / 512px; background-blend-mode: multiply; }
/* 5: pink paper slip, held by a push pin */
:is(.cards > .card, .build, .bet):nth-child(5n + 5)::after { background: #F9D9E3 var(--grain) 0 0 / 160px; background-blend-mode: multiply; }
:is(.cards > .card, .build, .bet):nth-child(5n + 5)::before { width: 18px; height: 18px; margin-left: -9px; top: -6px; border-radius: 50%; clip-path: none; opacity: 1; transform: none;
  background: radial-gradient(circle at 35% 30%, #8FB4FF 0 3px, #2D5BC4 4px 8px, #183B85 9px); box-shadow: 0 3px 4px rgba(0, 0, 0, .35); }
:is(.cards > .card, .build, .bet):nth-child(5n + 2) .card__tag, :is(.cards > .card, .build, .bet):nth-child(5n + 4) .card__tag, :is(.cards > .card, .build, .bet):nth-child(5n + 5) .card__tag { color: #4a4436; }
@media (max-width: 760px) {
  .cards { gap: var(--s-6) var(--s-4); }
  .cards > .card, .cards:has(> .card:nth-child(4):last-child) > .card { flex-basis: 100%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .cards > .card { transition: none; } }

/* Contact: "Write to me" as a postcard, with a stamp and a postmark */
.postcard { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; max-width: 820px; margin: var(--s-8, 96px) auto 0; padding: var(--s-6); transform: rotate(-.8deg);
  background: #FFFDF7 var(--paper-light) 0 0 / 512px; border-radius: 4px; box-shadow: 0 2px 3px rgba(23, 23, 23, .12), 0 30px 50px -26px rgba(12, 22, 44, .5); }
.postcard::before { content: ""; position: absolute; top: -12px; left: 40px; width: 96px; height: 22px; background: rgba(240, 165, 193, .9) var(--grain) 0 0 / 120px; background-blend-mode: multiply; transform: rotate(-4deg); clip-path: polygon(2% 6%, 0 50%, 2% 94%, 98% 96%, 100% 50%, 98% 4%); }
.postcard__msg { padding-right: var(--s-5); border-right: 2px solid rgba(23, 23, 23, .18); }
.postcard__msg h2 { margin: 0 0 var(--s-3); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); line-height: 1.1; }
.postcard__msg p { margin: 0 0 var(--s-4); color: var(--ink-soft); }
.postcard__to { position: relative; padding-left: var(--s-5); padding-top: 96px; }
.postcard__line { display: block; padding: 6px 0; border-bottom: 1.5px solid rgba(23, 23, 23, .3); font-weight: 600; overflow-wrap: anywhere; }
.postcard__line a { color: var(--ink); }
.postcard__stamp { position: absolute; top: 0; right: 0; width: 74px; height: 88px; display: grid; place-items: center; transform: rotate(4deg);
  background: var(--vermilion); color: var(--paper); font: 900 1.9rem/1 var(--font-display); letter-spacing: -.02em;
  border: 5px dotted #FFFDF7; box-shadow: 0 2px 4px rgba(23, 23, 23, .25); }
.postcard__stamp::after { content: ""; position: absolute; inset: 8px; border: 2px solid rgba(251, 246, 234, .7); }
.postcard__mark { position: absolute; top: 18px; right: 66px; width: 84px; height: 84px; border: 2.5px solid rgba(33, 78, 173, .55); border-radius: 50%; display: grid; place-items: center;
  color: rgba(33, 78, 173, .7); font: 800 0.68rem/1.25 var(--font-body); letter-spacing: .1em; text-transform: uppercase; text-align: center; transform: rotate(-12deg); }
.postcard .actions { margin-top: 0; }
@media (max-width: 760px) {
  .postcard { grid-template-columns: 1fr; padding: var(--s-5); transform: none; }
  .postcard__msg { padding-right: 0; border-right: 0; border-bottom: 2px solid rgba(23, 23, 23, .18); padding-bottom: var(--s-4); }
  .postcard__to { padding-left: 0; padding-top: 104px; margin-top: var(--s-4); }
}

/* The sky above each hero photo is the photo's own sky: a panel directly above the picture whose
   bottom edge continues the picture's top edge, so there is no fade and no visible join (desktop). */
.hero__sky { display: none; }
@media (min-width: 861px) {
  .hero--photo .hero__sky { display: block; position: absolute; left: 50%; bottom: calc(100% - 1px); width: 100%; min-width: 1100px; aspect-ratio: 16 / 9; transform: translateX(-50%);
    background-position: center bottom; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
  .hero--photo .hero__photo:has(.hero__sky) img { -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 1101px) {
  .article-hero--photo .hero__sky { display: block; position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; height: calc(100vw * var(--ratio));
    background-position: center bottom; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
  .article-hero--photo .article-hero__art:has(.hero__sky) img { -webkit-mask-image: none; mask-image: none; }
  .reel__stage .reel__img { position: relative; }
}
@media (max-width: 860px) {
  .reel-hero.hero--photo .reel__stage div.reel__img img { width: 100%; height: 100%; min-width: 0; margin: 0; transform: none; object-fit: cover; object-position: 84% 40%; }
}
/* Photo heroes under the see-through menu: the 74px menu space is padding (not a border), so the
   hero's own sky panel reaches the very top of the page with no band behind the menu. */
.theme-sky #main > .hero--photo:first-child { border-top: 0; padding-top: 74px; }

/* "Read as text" under a video: a quiet link, not a box; the words appear on paper only when opened */
.vid__text { margin-top: 6px; padding: 0; background: none; border-radius: 0; }
.vid__text summary { display: inline-block; list-style: none; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(23, 23, 23, .35); }
.vid__text summary::-webkit-details-marker { display: none; }
.vid__text summary:hover { color: var(--ink); text-decoration-color: currentColor; }
.vid__text[open] ol { margin-top: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 1.2em); background: rgba(252, 248, 240, .9); border-radius: 4px; font-size: 0.98rem; }
.vid__cap + .vid__text { margin-top: 2px; }

/* =====================================================================
   The flip-book under the loop diagram (homepage How I work): his photo for each step, taped like a
   print, with his own words; pages turn while in view and the matching step above lights up.
   ===================================================================== */
.loop[data-loopnav] .loop__step { cursor: pointer; }
.loop[data-loopnav] .loop__icon { transition: background .35s, color .35s, transform .35s; }
.loop[data-loopnav] .loop__step.is-on .loop__icon { background: var(--vermilion); color: var(--paper); transform: scale(1.06); }
.loop[data-loopnav] .loop__step.is-on h4 { color: var(--vermilion-deep); }
/* Phones (with the stack): everything for a step fits on one screen while it is pinned. The print sits
   beside the step's title; the words, the sticky note, and the mini loop follow underneath. */

/* Essays read like a book: Literata (made for long reading on screens) for the text, section
   headings, and pull quotes. The torn-paper title strips keep Fraunces, the site's signature. */
article.has-hero { --font-read: "Literata", Georgia, "Times New Roman", serif; }
article.has-hero .prose p, article.has-hero .prose li { font-family: var(--font-read); font-size: 1.16rem; line-height: 1.72; letter-spacing: -0.003em; }
article.has-hero .prose h2 { font-family: var(--font-read); font-weight: 700; letter-spacing: -0.01em; }
article.has-hero .prose h3 { font-family: var(--font-read); font-weight: 700; }
article.has-hero .prose blockquote { font-family: var(--font-read); font-style: italic; font-weight: 400; }
article.has-hero .prose .lead { font-family: var(--font-read); font-size: 1.32rem; line-height: 1.6; }
article.has-hero .article-head__sum, article.has-hero .article-hero__copy .article-head__sum { font-family: var(--font-read); font-style: italic; font-weight: 400; }
article.has-hero .prose figcaption, article.has-hero .prose .sources, article.has-hero .prose .sources li { font-family: var(--font-body); }
article.has-hero .prose .sources li { font-size: 0.95rem; line-height: 1.55; }

/* The three lenses as paper notes ("What I bring" keeps its own cream taped cards) */
.lenses__list .lens { position: relative; border-left: 0; padding-top: calc(var(--s-3) + 8px); transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s; }
.lenses__list .lens::before { content: ""; position: absolute; top: -8px; left: 50%; width: 70px; height: 18px; margin-left: -35px; background: rgba(255, 255, 255, .7) var(--grain) 0 0 / 120px; background-blend-mode: multiply; transform: rotate(-3deg);
  clip-path: polygon(2% 6%, 0 50%, 2% 94%, 98% 96%, 100% 50%, 98% 4%); }
.lenses__list .lens--a { background: #F9D9E3 var(--grain) 0 0 / 160px; background-blend-mode: multiply; transform: rotate(-.8deg); }
.lenses__list .lens--b { background: #DDF0FB var(--paper-light) 0 0 / 512px; background-blend-mode: multiply; transform: rotate(.6deg); }
.lenses__list .lens--c { background: #F7D774 var(--grain) 0 0 / 160px; background-blend-mode: multiply; transform: rotate(-.4deg); border-radius: 2px 2px 14px 2px; }
.lenses__list .lens .lens__body { color: #3d3a33; }

/* Eyebrows: a small all-caps title in the color the dash used to be (red on paper, black on sky,
   yellow on dark bands); no dash. */
.eyebrow { font-size: 0.8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--vermilion-deep); gap: 0; }
.eyebrow::before { display: none; }
.eyebrow--on-sky { color: var(--ink); }
.eyebrow--on-dark { color: #F6CF5C; }
/* Contact: the postcard sits on the cobalt band beside Nagesh's photo */
.closing .postcard { margin: 0; max-width: 640px; grid-template-columns: 1fr; color: var(--ink); }
.closing .postcard__msg { padding-right: 0; border-right: 0; border-bottom: 2px solid rgba(23, 23, 23, .18); padding-bottom: var(--s-4); }
.closing .postcard__to { padding-left: 0; padding-top: 30px; margin-top: var(--s-4); padding-right: 170px; min-height: 120px; }
.closing .postcard__stamp { top: 22px; }
.closing .postcard__mark { top: 36px; right: 64px; }
.closing .postcard__line a { color: var(--ink); }
@media (max-width: 760px) { .closing .postcard__to { padding-right: 0; padding-top: 112px; } .closing .postcard__stamp { top: 12px; } .closing .postcard__mark { top: 20px; right: 70px; } }

/* Homepage How I work, tightened: the flip-book and the team habits share one cobalt panel
   ("how I do it, with the team"), the loop's arcs are flatter, and the iceberg video runs full width. */
.method .loop { margin-bottom: var(--s-6); }
.practice { position: relative; margin: var(--s-6) 0 var(--s-8, 96px); padding: var(--s-7, 64px) var(--s-7, 64px) var(--s-6); border-radius: 6px; color: var(--paper);
  background: var(--cobalt) var(--paper-cobalt) 0 0 / 512px; box-shadow: 0 2px 3px rgba(23, 23, 23, .16), 0 34px 60px -32px rgba(12, 22, 44, .7); }
.practice .agile { margin: var(--s-7, 64px) 0 0; padding-top: var(--s-6); border-top: 1.5px dashed rgba(251, 246, 234, .35); }
.practice .agile .method__h { color: var(--paper); }
.practice .agile .method__lead, .practice .agile__list p { color: rgba(251, 246, 234, .82); }
.practice .agile__list h4 { color: var(--paper); }
.practice .agile__icon { background: var(--paper); color: var(--cobalt); border-color: var(--ink); }
.method-video .vid { max-width: none; margin: 0; }
.method-video .method__lead { max-width: 64ch; }
@media (max-width: 760px) {
  .practice { padding: var(--s-6) var(--s-4) var(--s-5); margin-left: calc(-1 * var(--s-2)); margin-right: calc(-1 * var(--s-2)); }
}

/* Phones and tablets (homepage): the same loop diagram as on desktop, drawn at desktop size and
   scaled down to fit (journal.js sets the zoom), so it stays one diagram everywhere. */
@media (max-width: 960px) {
  .loop[data-loopnav] .loop__track { width: 1000px; margin: 0 70px 0 40px; }
  .loop[data-loopnav] .loop__arcs { display: block; }
  .loop[data-loopnav] .loop__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  .loop[data-loopnav] .loop__step { display: block; text-align: center; }
  .loop[data-loopnav] .loop__icon { width: 92px; height: 92px; margin: 0 auto 10px; box-shadow: 0 4px 0 var(--ink); }
  .loop[data-loopnav] .loop__icon svg { width: 38px; height: 38px; }
  .loop[data-loopnav] .loop__step h4 { margin: 4px 0 6px; font-size: 1.6rem; }
  .loop[data-loopnav] .loop__n { font-size: 0.9rem; }
  .loop[data-loopnav] .loop__step p { margin: 0 auto; max-width: 22ch; font-size: 1.1rem; }
  .loop[data-loopnav] .loop__back { display: none; }
}

/* =====================================================================
   Published writing as a writer's desk (proposal): the latest piece as a large pinned feature
   with its pull quote, the other pieces as pinned notes, On my desk as sticky notes.
   ===================================================================== */
.wdesk__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; margin-top: var(--s-5); }
.wdesk__link { display: block; color: inherit; text-decoration: none; }
.wdesk__feature, .wdesk__note { position: relative; background: #FFFDF7 var(--paper-light) 0 0 / 512px; border-radius: 3px; box-shadow: 0 2px 3px rgba(23, 23, 23, .14), 0 30px 50px -28px rgba(12, 22, 44, .55); transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
.wdesk__feature { padding: 12px 12px 28px; transform: rotate(-.6deg); }
.wdesk__feature::before, .wdesk__note::before { content: ""; position: absolute; z-index: 2; top: -11px; left: 50%; width: 96px; height: 22px; margin-left: -48px; background: rgba(240, 165, 193, .9) var(--grain) 0 0 / 120px; background-blend-mode: multiply; transform: rotate(-3deg); clip-path: polygon(2% 6%, 0 50%, 2% 94%, 98% 96%, 100% 50%, 98% 4%); }
.wdesk__feature:hover, .wdesk__note:hover { transform: rotate(0) translateY(-4px); }
.wdesk__art img, .wdesk__thumb img { display: block; width: 100%; height: auto; border-radius: 2px; }
.wdesk__body { padding: var(--s-5) var(--s-4) 0; }
.wdesk__meta { margin: 0 0 var(--s-2); font-size: 0.78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--vermilion-deep); }
/* Each part of the meta line stays whole, so a line never starts with a dot or splits "8 min read" */
.wdesk__m { white-space: nowrap; }
@media (max-width: 520px) { .wdesk__topic { display: none; } }
.wdesk__new { display: inline-block; margin-right: 10px; padding: 3px 8px; background: var(--ink); color: var(--paper); border-radius: 2px; letter-spacing: .1em; }
.wdesk__title { margin: 0 0 var(--s-3); font: 700 clamp(1.8rem, 1.2rem + 1.6vw, 2.7rem)/1.1 "Literata", Georgia, serif; letter-spacing: -0.015em; }
.wdesk__sum { margin: 0 0 var(--s-4); font: 400 1.15rem/1.6 "Literata", Georgia, serif; color: var(--ink-soft); max-width: 52ch; }
.wdesk__pull { margin: 0 0 var(--s-4); padding: 6px 0 6px var(--s-4); border-left: 4px solid var(--vermilion); font: italic 400 1.3rem/1.45 "Literata", Georgia, serif; color: var(--ink); }
.wdesk__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; border-bottom: 2.5px solid var(--vermilion); padding-bottom: 2px; }
.wdesk__side { display: grid; gap: var(--s-6); padding-top: var(--s-3); }
.wdesk__note { padding: 10px; }
.wdesk__note .wdesk__link { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-4); align-items: center; }
.wdesk__note:nth-child(odd) { transform: rotate(.8deg); }
.wdesk__note:nth-child(even) { transform: rotate(-.7deg); }
.wdesk__note:nth-child(2)::before { background-color: rgba(143, 205, 234, .9); }
.wdesk__ntitle { margin: 0 0 var(--s-2); font: 700 1.2rem/1.2 "Literata", Georgia, serif; }
.wdesk__note .wdesk__meta { font-size: 0.72rem; }
.wdesk__desk { margin-top: var(--s-8, 96px); }
.wdesk__dh { margin: 0 0 var(--s-5); font: 900 1.6rem/1.2 var(--font-display); }
.wdesk__dh span { display: block; margin-top: 4px; font: 400 1rem var(--font-body); color: var(--ink-soft); }
.wdesk__stickies { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.wdesk__stickies li { position: relative; padding: var(--s-4) var(--s-4) var(--s-5); min-height: 180px; border-radius: 2px 2px 14px 2px; box-shadow: 0 2px 3px rgba(23, 23, 23, .14), 0 18px 26px -18px rgba(12, 22, 44, .5), inset -10px -12px 18px -14px rgba(90, 60, 0, .3); background-blend-mode: multiply; }
.wdesk__stickies li:nth-child(4n + 1) { background: #F7D774 var(--grain) 0 0 / 160px; transform: rotate(-1.4deg); }
.wdesk__stickies li:nth-child(4n + 2) { background: #F9D9E3 var(--grain) 0 0 / 160px; transform: rotate(1deg) translateY(6px); }
.wdesk__stickies li:nth-child(4n + 3) { background: #FFFDF7 var(--grain) 0 0 / 160px; transform: rotate(-.6deg); }
.wdesk__stickies li:nth-child(4n + 4) { background: #DDF0FB var(--grain) 0 0 / 160px; transform: rotate(1.3deg) translateY(4px); }
.wdesk__stickies li::before { content: ""; position: absolute; top: -6px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FF8A70 0 3px, #E33C1F 4px 7px, #9E2410 8px); box-shadow: 0 3px 4px rgba(0, 0, 0, .35); }
.wdesk__tag { font: 600 1.1rem/1 var(--hand, "Caveat", cursive); color: var(--vermilion-deep); }
.wdesk__st { margin: 8px 0 6px; font: 700 1.08rem/1.25 "Literata", Georgia, serif; color: var(--ink); }
.wdesk__ss { margin: 0; font-size: 0.92rem; line-height: 1.45; color: #3d3a33; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/caveat-latin.woff2') format('woff2'); }
@media (max-width: 960px) {
  .wdesk__grid { grid-template-columns: 1fr; }
  .wdesk__stickies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wdesk__note .wdesk__link { grid-template-columns: 1fr; }
  .wdesk__stickies { grid-template-columns: 1fr; }
  .wdesk__stickies li { min-height: 0; }
}
/* the press clipping: newsprint with a torn bottom edge */
.wdesk__press { position: relative; padding: var(--s-5) var(--s-5) calc(var(--s-5) + 10px); background: #F4F0E6 var(--grain) 0 0 / 160px; background-blend-mode: multiply; transform: rotate(-1deg);
  box-shadow: 0 2px 3px rgba(23, 23, 23, .14), 0 24px 40px -26px rgba(12, 22, 44, .55);
  clip-path: polygon(0 0, 100% 0, 100% 96%, 94% 99%, 86% 96%, 77% 100%, 68% 96%, 59% 99%, 50% 96%, 41% 100%, 32% 96%, 23% 99%, 14% 96%, 6% 100%, 0 96%); }
.wdesk__press::after { content: ""; position: absolute; top: 0; left: var(--s-5); right: var(--s-5); height: 3px; background: var(--ink); }
.wdesk__ptitle { margin: 0 0 var(--s-3); font: 900 1.3rem/1.2 var(--font-display); }
.wdesk__pquote { margin: 0 0 var(--s-4); font: italic 400 1.05rem/1.5 "Literata", Georgia, serif; color: var(--ink-soft); }
/* Say hello: the cobalt above the photo is the photo's own cobalt (its sky panel), so the join can't be seen */
@media (min-width: 861px) {
  .closing--photo .hero__sky { display: block; position: absolute; left: 50%; bottom: calc(100% - 1px); width: 100%; min-width: 1100px; aspect-ratio: 16 / 9; transform: translateX(-50%);
    background-position: center bottom; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
  .closing__photo:has(.hero__sky) img { -webkit-mask-image: none; mask-image: none; }
}

/* =====================================================================
   "What I bring": three crafted objects, each matching what it says.
   Product leadership: a notebook page where decisions get worked out.
   Engineering depth: a blueprint. AI product development: a yellow legal pad, like an eval scorecard.
   Each "see it" link is a small paper tag tied to the bottom of the card.
   ===================================================================== */
body .capabilities { gap: var(--s-7, 64px) var(--s-6); padding-top: 14px; }
body .capabilities .capability { position: relative; overflow: visible; border-radius: 3px; padding-bottom: calc(var(--s-6) + 18px); transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s;
}
body .capabilities .capability:hover { transform: rotate(0) translateY(-6px); }
/* notebook page: ruled lines, red margin, three punched holes */
body .capabilities .capability--a { transform: rotate(-1.2deg); padding-left: calc(var(--s-5) + 22px); }
body .capabilities .capability--a::after { background:
    radial-gradient(circle at 16px 18%, #E9DFC9 0 6px, transparent 7px), radial-gradient(circle at 16px 50%, #E9DFC9 0 6px, transparent 7px), radial-gradient(circle at 16px 82%, #E9DFC9 0 6px, transparent 7px),
    linear-gradient(90deg, transparent 0 36px, rgba(240, 75, 47, .5) 36px 37.5px, transparent 37.5px),
    repeating-linear-gradient(transparent 0 29px, rgba(103, 183, 229, .32) 29px 30px) 0 18px / 100% 100% no-repeat,
    #FFFFFF var(--paper-light) 0 0 / 512px; }
/* blueprint: cobalt with a fine grid, drawn in white */
body .capabilities .capability--b { --ink: #FBF6EA; --ink-soft: rgba(251, 246, 234, .86); --cobalt: #9FD3F2; color: var(--ink); transform: rotate(.8deg) translateY(10px); }
body .capabilities .capability--b::after { background:
    linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 6px 6px, linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 6px 6px,
    #1F4FB0 var(--paper-cobalt) 0 0 / 512px; }
body .capabilities .capability--b .capability__title, body .capabilities .capability--b .capability__desc, body .capabilities .capability--b p { color: var(--ink); }
body .capabilities .capability--b .capability__title::after { background: #F6CF5C !important; }
body .capabilities .capability--b .capability__title::before { content: "SHEET 02 · SYSTEMS"; position: absolute; right: 14px; bottom: 12px; font: 700 0.62rem/1 var(--font-body); letter-spacing: .18em; color: rgba(251, 246, 234, .55); border: 1px solid rgba(251, 246, 234, .4); padding: 4px 6px; }
/* yellow legal pad: double red margin, blue rules */
body .capabilities .capability--c { transform: rotate(-.6deg); padding-left: calc(var(--s-5) + 14px); }
body .capabilities .capability--c::after { background:
    linear-gradient(90deg, transparent 0 28px, rgba(214, 60, 40, .55) 28px 29.5px, transparent 29.5px 33px, rgba(214, 60, 40, .55) 33px 34.5px, transparent 34.5px),
    repeating-linear-gradient(transparent 0 29px, rgba(70, 120, 190, .3) 29px 30px) 0 18px / 100% 100% no-repeat,
    #FCEB9C var(--grain) 0 0 / 160px; background-blend-mode: normal, normal, multiply; }
body .capabilities .capability--c .capability__desc, body .capabilities .capability--c p { color: #3d3a33; }
/* the "see it" link as a paper tag tied to the card */
body .capabilities .capability__proof { position: relative; margin-top: var(--s-5); padding: 10px 14px 12px 22px; background: #FFFDF7 var(--paper-light) 0 0 / 512px; color: var(--ink, #171717);
  box-shadow: 0 1px 2px rgba(23, 23, 23, .18), 0 8px 14px -8px rgba(12, 22, 44, .45); transform: rotate(-1.4deg); border-radius: 2px 10px 10px 2px;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); }
body .capabilities .capability__proof::before { content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #E9DFC9; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3); }
body .capabilities .capability--b .capability__proof { --ink: #171717; color: #171717; transform: rotate(1.2deg); }
body .capabilities .capability--b .capability__proof a, body .capabilities .capability--b .capability__proof .capability__seen { color: #171717; }
body .capabilities .capability__seen { display: block; margin-bottom: 2px; }
@media (max-width: 860px) {
  body .capabilities .capability--a, body .capabilities .capability--b, body .capabilities .capability--c { transform: none; }
}
@media (prefers-reduced-motion: reduce) { body .capabilities .capability { transition: none; } }
/* Say hello (desktop): a wider copy column so the title and the text each sit on two lines */
@media (min-width: 1100px) {
  .closing--photo .closing__copy { max-width: 780px; }
  .closing--photo .closing__copy .headline { max-width: none; }
  .closing--photo .closing__copy .headline .line, .closing--photo .closing__copy .headline > span { white-space: nowrap; }
  .closing--photo .closing__body { max-width: min(62ch, calc(46vw + 120px)); }
}
/* Natural line breaks: titles and short paragraphs balance their lines, longer text avoids a lone last word */
.closing__body, .section-head__lead, .hero__sub, .method__lead { text-wrap: pretty; }
.closing--photo .closing__body { text-wrap: balance; }
.closing #hello-h, .section-head .headline, .method__h, .wdesk__title, .ls-title { text-wrap: balance; }

/* Natural line breaks everywhere: paragraphs and list items avoid ending on a lone short word,
   headings and short labels balance their lines. */
p, li, dd, figcaption, .card__tag { text-wrap: pretty; }
h1, h2, h3, h4, .card__title, .ecard__title, .loop__step h4 { text-wrap: balance; }

/* Selected work (homepage): the lead reads as two lines, and the feature story gives its title room
   (two lines instead of three) with the image filling the row instead of floating in space */
#selected-work .section-head__lead { max-width: 72ch; }
@media (min-width: 861px) {
  .pcard--feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-6); align-items: stretch; }
  .pcard--feature .pcard__art { align-self: stretch; height: 100%; }
  .pcard--feature .pcard__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
  .pcard--feature .pcard__body { align-self: center; }
  .pcard--feature .pcard__title { font-size: clamp(2rem, 1.2rem + 1.8vw, 3.1rem); line-height: 1.05; }
}
/* Scroll-driven flip-book: the box is as tall as the scroll it takes to turn every page; its contents pin */
/* Homepage How I work: the end of the section is compact; the credit and the How I work link share one row */
.method-video { margin-bottom: var(--s-4); }
.method-video .vid__text { margin-top: 4px; }
.method__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1.5px dashed rgba(23, 23, 23, .2); }
.method__foot .method__credit { margin: 0; }
.method:has(.method__foot) { padding-bottom: var(--s-7, 64px); }

/* Eyebrows on the sky: deep vermilion text (per Nagesh), the same red as on paper; no strip */
.eyebrow.eyebrow--on-sky { color: #6E1B0D; } /* deep red: 5.2:1 on sky (panel review, October 2026) */
.hero .eyebrow.eyebrow--on-sky { color: var(--vermilion-deep); } /* heroes stay exactly as live (Nagesh, October 2026) */

/* =====================================================================
   Published writing as an open notebook (homepage and Writing page)
   ===================================================================== */
.nbook { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--s-5); background: #FFFDF7 var(--paper-light) 0 0 / 512px; border-radius: 6px;
  box-shadow: 0 2px 3px rgba(23, 23, 23, .14), 0 44px 70px -40px rgba(12, 22, 44, .7); }
.nbook::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 44px; margin-left: -22px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(23, 23, 23, .1) 42%, rgba(23, 23, 23, .2) 50%, rgba(23, 23, 23, .1) 58%, transparent); }
.nbook__l { padding: var(--s-6) var(--s-6) var(--s-6); }
.nbook__r { position: relative; padding: var(--s-6) var(--s-6) calc(var(--s-6) + 30px) calc(var(--s-6) + 10px);
  background: repeating-linear-gradient(transparent 0 33px, rgba(103, 183, 229, .3) 33px 34px) 0 76px / 100% 100% no-repeat; }
.nbook__k { margin: 0 0 var(--s-3); font: 800 0.78rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); }
.nbook__feat { display: block; color: inherit; text-decoration: none; }
.nbook__art img { display: block; width: 100%; height: auto; border-radius: 3px; transform: rotate(-1.2deg); box-shadow: 0 12px 22px -14px rgba(12, 22, 44, .55); transition: transform .4s; }
.nbook__feat:hover .nbook__art img { transform: rotate(0) translateY(-3px); }
.nbook__title { margin: var(--s-5) 0 var(--s-2); font: 700 clamp(1.7rem, 1.2rem + 1.2vw, 2.3rem)/1.1 "Literata", Georgia, serif; letter-spacing: -0.015em; text-wrap: balance; }
.nbook__sum { margin: 0 0 var(--s-3); font: 400 1.1rem/1.6 "Literata", Georgia, serif; color: var(--ink-soft); }
.nbook__pull { margin: 0 0 var(--s-4); padding-left: 14px; border-left: 4px solid var(--vermilion); font: italic 400 1.2rem/1.45 "Literata", Georgia, serif; }
.nbook__more { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; border-bottom: 2.5px solid var(--vermilion); padding-bottom: 2px; }
.nbook__toc { list-style: none; margin: 0; padding: 0; }
.nbook__toc a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1.5px dashed rgba(23, 23, 23, .2); color: var(--ink); text-decoration: none; }
.nbook__toc a:hover .nbook__t { text-decoration: underline; text-decoration-color: var(--vermilion); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.nbook__n { font: 900 1.45rem/1 var(--font-display); color: var(--vermilion-deep); }
.nbook__t { font: 700 1.18rem/1.28 "Literata", Georgia, serif; text-wrap: balance; }
.nbook__m { font-size: 0.85rem; color: var(--ink-soft); white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.nbook__press .nbook__t { font-style: italic; }
/* Each essay in the list gets its cover as a small taped photo, so the other pieces get as much
   pull as the featured one. Title and meta stack beside it. */
.nbook__essay a { grid-template-columns: 40px minmax(0, 1fr) 150px; grid-template-areas: "n t th" "n m th"; row-gap: 6px; align-items: start; }
.nbook__essay .nbook__n { grid-area: n; } .nbook__essay .nbook__t { grid-area: t; } .nbook__essay .nbook__m { grid-area: m; }
.nbook__th { grid-area: th; align-self: center; }
.nbook__th img { display: block; width: 100%; height: auto; border: 4px solid #fff; border-radius: 2px; box-shadow: 0 8px 16px -10px rgba(12, 22, 44, .55); transform: rotate(1.6deg); transition: transform .3s; }
.nbook__essay:nth-child(2n) .nbook__th img { transform: rotate(-1.4deg); }
.nbook__essay a:hover .nbook__th img { transform: rotate(0) translateY(-2px); }
.nbook__desk .nbook__n { color: var(--cobalt); }
.nbook__desk .nbook__t { color: var(--ink-soft); }
.nbook__margin { position: absolute; right: var(--s-6); bottom: var(--s-4); transform: rotate(-4deg); font: 600 1.45rem/1 "Caveat", cursive; color: var(--cobalt); }
.wdesk .wdesk__desk { margin-top: var(--s-7, 64px); }
@media (max-width: 860px) {
  .nbook { grid-template-columns: 1fr; }
  .nbook::after { display: none; }
  .nbook__l, .nbook__r { padding: var(--s-5) var(--s-4); }
  .nbook__r { border-top: 1.5px dashed rgba(23, 23, 23, .25); padding-bottom: calc(var(--s-5) + 30px); background-position: 0 60px; }
  .nbook__toc a { grid-template-columns: 34px minmax(0, 1fr); }
  .nbook__essay a { grid-template-columns: 34px minmax(0, 1fr) 104px; }
  .nbook__m { grid-column: 2; white-space: normal; }
  .nbook__margin { right: var(--s-4); }
}

/* =====================================================================
   About proposal: story beside an index card, strata as paper strips, Drawn to as tags
   ===================================================================== */
.ab-story { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: var(--s-7, 64px); align-items: start; }
.ab-card { position: sticky; top: 110px; padding: var(--s-5) var(--s-5) var(--s-4); transform: rotate(-1deg);
  background: repeating-linear-gradient(transparent 0 29px, rgba(103, 183, 229, .3) 29px 30px) 0 46px / 100% 100% no-repeat, #FFFDF7 var(--paper-light) 0 0 / 512px;
  box-shadow: 0 2px 3px rgba(23, 23, 23, .14), 0 26px 40px -26px rgba(12, 22, 44, .55); }
.ab-card::before { content: ""; position: absolute; top: -10px; left: 50%; width: 86px; height: 20px; margin-left: -43px; background: rgba(240, 165, 193, .9) var(--grain) 0 0 / 120px; background-blend-mode: multiply; transform: rotate(-3deg); clip-path: polygon(2% 6%, 0 50%, 2% 94%, 98% 96%, 100% 50%, 98% 4%); }
.ab-card__k { margin: 0 0 var(--s-3); font: 600 1.5rem/1 "Caveat", cursive; color: var(--vermilion-deep); }
.ab-card dl { margin: 0; } .ab-card dl > div { padding: 10px 0; border-top: 1.5px dashed rgba(23, 23, 23, .2); }
.ab-card dt { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.ab-card dd { margin: 4px 0 0; font-weight: 600; line-height: 1.45; }
.ab-text .headline { margin-bottom: var(--s-4); }
.ab-text p { margin: 0 0 var(--s-4); font: 400 1.2rem/1.7 "Literata", Georgia, serif; color: var(--ink); max-width: 58ch; text-wrap: pretty; }
.ab-text p:first-of-type::first-letter { float: left; font: 900 3.6rem/.9 var(--font-display); margin: 4px 10px 0 0; color: var(--vermilion-deep); }
.ab-strata { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-6); align-items: stretch; }
.ab-strata .illus, .ab-strata figure { margin: 0; }
.ab-strips { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-content: center; }
.ab-strip { position: relative; padding: 18px 22px 18px; box-shadow: 0 2px 3px rgba(23, 23, 23, .2), 0 16px 26px -18px rgba(12, 22, 44, .6);
  clip-path: polygon(0 4%, 6% 0, 18% 5%, 32% 1%, 47% 5%, 62% 0, 77% 4%, 92% 0, 100% 5%, 99% 96%, 88% 100%, 72% 95%, 56% 100%, 40% 96%, 24% 100%, 9% 95%, 0 98%); }
.ab-strip--ai { background: #F2A7C3 var(--grain) 0 0 / 160px; background-blend-mode: multiply; transform: rotate(-1deg); }
.ab-strip--product { background: #F2C557 var(--grain) 0 0 / 160px; background-blend-mode: multiply; transform: rotate(.8deg); margin-left: 16px; }
.ab-strip--eng { background: #1E1E1E var(--grain) 0 0 / 160px; color: var(--paper); transform: rotate(-.6deg); }
.ab-strip__n { font: 800 .7rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.ab-strip h3 { margin: 4px 0 6px; font: 900 1.35rem/1.15 var(--font-display); }
.ab-strip p { margin: 0; font-size: .98rem; line-height: 1.5; }
.ab-strip--eng p { color: rgba(251, 246, 234, .85); }
.ab-drawn { align-self: center; }
.ab-drawn__k { margin: 0 0 var(--s-3); font: 600 1.6rem/1 "Caveat", cursive; color: var(--cobalt); transform: rotate(-2deg); }
.ab-drawn ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 12px; }
.ab-drawn li { position: relative; padding: 10px 16px 11px 26px; background: #FFFDF7 var(--paper-light) 0 0 / 512px; font-weight: 700; border-radius: 2px 10px 10px 2px;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); box-shadow: 0 1px 2px rgba(23, 23, 23, .2); transform: rotate(-1.2deg); }
.ab-drawn li:nth-child(even) { transform: rotate(1.2deg); background-color: #F7D774; }
.ab-drawn li::before { content: ""; position: absolute; left: 13px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #E9DFC9; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3); }
@media (max-width: 860px) {
  .ab-story, .ab-strata { grid-template-columns: 1fr; gap: var(--s-5); }
  .ab-card { position: relative; top: 0; transform: none; }
  .ab-strip--product { margin-left: 0; }
}
.ab-strata > :first-child { align-self: center; }
.ab-drawn ul { flex-direction: row; }
.ab-drawn li { background: #FFFDF7 var(--grain) 0 0 / 160px; background-blend-mode: multiply; box-shadow: 0 2px 3px rgba(23, 23, 23, .22), 0 10px 16px -10px rgba(12, 22, 44, .45); }
.ab-drawn li:nth-child(4n + 2) { background: #F7D774 var(--grain) 0 0 / 160px; background-blend-mode: multiply; }
.ab-drawn li:nth-child(4n + 3) { background: #DDF0FB var(--grain) 0 0 / 160px; background-blend-mode: multiply; }
.ab-drawn li:nth-child(4n + 4) { background: #F9D9E3 var(--grain) 0 0 / 160px; background-blend-mode: multiply; }
.ab-text p.eyebrow { font: 800 0.8rem/1.2 var(--font-body); letter-spacing: .16em; color: var(--vermilion-deep); margin: 0 0 var(--s-3); }
.ab-text p.eyebrow::first-letter { float: none; font: inherit; margin: 0; color: inherit; }
.ab-text p:first-of-type::first-letter { float: none; font: inherit; margin: 0; color: inherit; }

/* =====================================================================
   Flip-book (homepage How I work panel), October 2026, per Nagesh (option A):
   a stack of prints dealt one by one with the scroll; a red marker circles what each step is about,
   with a handwritten label; a yellow sticky note says what the step means at work; a mini loop of
   the five steps replaces the bars, with the red line running from step to step.
   ===================================================================== */

/* When a print is on top, its marks draw in order: circle, arrow, label, highlight, then the note settles */

/* The stack (with the script): every print stays on the table; only the top one has its words and tape */
/* A print being dealt away never leaves the panel */

/* The mini loop: the five steps, the red line running between them, and the way back round */
/* Tablets: the mini loop spans the panel under both columns, so the five labels have room */
/* Short phones (iPhone SE and similar): a little tighter, so the whole step still fits while pinned */
/* How I work section top (desktop, per Nagesh, October 2026): no empty half. The headline sits on the
   left with the intro beside it, and the three lenses heading and lead sit beside the diagram.
   Narrower screens keep the stacked layout, so the diagram and its labels stay full size. */
@media (min-width: 1180px) {
  .method .section-head:has(.section-head__lead) { max-width: none; display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); column-gap: var(--s-7, 64px); align-items: end; margin-bottom: var(--s-6); }
  .method .section-head:has(.section-head__lead) > .eyebrow { grid-column: 1; grid-row: 1; }
  .method .section-head:has(.section-head__lead) > .headline { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .method .section-head:has(.section-head__lead) > .section-head__lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; max-width: none; margin: 0; padding-bottom: 6px; }
  .lenses { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: var(--s-6); align-items: center; }
  .lenses__copy { grid-column: 1; grid-row: 1; order: 0; }
  .lenses__fig { grid-column: 2; grid-row: 1; }
  .lenses__list-wrap { grid-column: 1 / -1; grid-row: 2; }
}

/* Polish pass (October 2026, overnight audit) */
/* Essay meta reads as separate facts, like the Keep reading cards */
.article-head__meta span + span::before { content: "\00B7"; margin-right: var(--s-3); color: var(--ink-soft); font-weight: 700; }
/* Video transcripts: a comfortable line length when opened */
.vid__text[open] ol { max-width: 72ch; }
/* Say hello heading: on phones let the two lines rebalance instead of leaving one word alone */
@media (max-width: 560px) { #hello-h br { display: none; } #hello-h { text-wrap: balance; } }
/* Phones: small links get a comfortable tap area without changing how they look */
@media (max-width: 760px) {
  .site-footer a, .crumbs a, .prose .source a, .article-sources a { display: inline-block; padding-block: 10px; margin-block: -10px; }
}
/* Loop diagram (wide screens): each step's practice label stays on one line, so the five columns line up */
@media (min-width: 1280px) { .loop__n { white-space: nowrap; letter-spacing: .04em; } }
/* Preview variants for the flip-book (?flip=scrub, ?flip=strip) */
/* How I work (homepage): while the flip-book holds still, its paper holds still too. The blue panel's
   texture and the cream section's paper are fixed to the screen, so only the cards move as you scroll
   (per Nagesh). Phones that ignore fixed backgrounds simply keep the normal paper. */
/* Preview: cinema (?flip=cinema). Every move is driven by the scroll (script sets --z, --ring, --note, --t, --u). */

/* =====================================================================
   How I do each step: the field notebook (homepage, in the cobalt practice panel; Nagesh's pick, October 2026).
   An open notebook with one spread per step; colored index tabs down the right edge (across the top on phones).
   ===================================================================== */
.fnote { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 152px; align-items: start; }
.fnote__book { grid-column: 1; grid-row: 1; position: relative; min-height: 540px; background: #FBF6EA var(--paper-light) 0 0 / 512px; border-radius: 4px 2px 2px 4px; color: var(--ink);
  box-shadow: 0 2px 0 #E6DCC4, 0 4px 0 #D9CEB3, 0 6px 0 #CFC3A6, 0 50px 80px -30px rgba(8, 16, 40, .85); }
.fnote__spine { position: absolute; top: 0; bottom: 0; left: 50%; width: 40px; margin-left: -20px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, .18) 50%, rgba(0, 0, 0, .1) 55%, transparent); }
.fnote__sp.is-on { display: grid; grid-template-columns: 1fr 1fr; animation: fnoteIn .5s cubic-bezier(.22, .61, .36, 1) both; }
.fnote__l { position: relative; padding: 44px 48px 44px 52px; background-image: repeating-linear-gradient(transparent 0 33px, rgba(36, 74, 170, .14) 33px 34px); background-position: 0 30px; }
.fnote__l::before { content: ""; position: absolute; top: 0; bottom: 0; left: 38px; border-left: 1.5px solid rgba(232, 85, 58, .35); }
.fnote__n { margin: 0; font: 900 4.6rem/.85 var(--font-display); color: transparent; -webkit-text-stroke: 2px var(--cobalt); }
.fnote__k { margin: 12px 0 8px; font-size: .74rem; line-height: 1.45; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--vermilion-deep); }
.fnote__t { margin: 0 0 12px; font: 900 clamp(2rem, 1.3rem + 1.8vw, 3rem)/1.04 var(--font-display); color: var(--ink); text-wrap: balance; }
.fnote__b { margin: 0; max-width: 40ch; font-size: 1.08rem; line-height: 1.6; color: #3B3A36; text-wrap: pretty; }
.fnote__note { position: relative; max-width: 330px; margin: 26px 0 0; padding: 16px 18px 18px; background: #F6CF5C var(--grain) 0 0 / 120px; background-blend-mode: multiply; font-weight: 600; line-height: 1.45; transform: rotate(-1.5deg); box-shadow: 0 14px 24px -16px rgba(8, 16, 40, .55); }
.fnote__note::before { content: ""; position: absolute; top: -10px; left: 50%; width: 80px; height: 20px; margin-left: -40px; background: rgba(240, 165, 193, .9) var(--grain) 0 0 / 120px; background-blend-mode: multiply; transform: rotate(-2deg); }
.fnote__note span { display: block; margin-bottom: 6px; font: 700 1.45rem/1 "Caveat", cursive; color: var(--vermilion-deep); }
.fnote__r { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 44px 40px; }
.fnote__fig { position: relative; margin: 0; }
.fnote__fig img { display: block; width: min(320px, 100%); height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; padding: 10px 10px 38px; background: #FFF; transform: rotate(2.5deg); box-shadow: 0 2px 3px rgba(0, 0, 0, .14), 0 26px 40px -24px rgba(8, 16, 40, .6); }
.fnote__fig::before, .fnote__fig::after { content: ""; position: absolute; z-index: 1; width: 90px; height: 24px; background: rgba(246, 207, 92, .75); }
.fnote__fig::before { top: -8px; left: -22px; transform: rotate(-30deg); }
.fnote__fig::after { top: -6px; right: -26px; transform: rotate(32deg); }
.fnote__fig figcaption { position: absolute; z-index: 2; left: -26px; bottom: 56px; padding: 3px 10px 4px; background: #FBF6EA var(--paper-light) 0 0 / 512px; box-shadow: 0 4px 10px rgba(12, 22, 44, .22); font: 700 1.35rem/1.1 "Caveat", cursive; color: var(--vermilion-deep); white-space: nowrap; transform: rotate(-5deg); }
.fnote__next { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: 700 1.45rem/1 "Caveat", cursive; color: var(--cobalt); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.fnote__next svg { width: 16px; height: 16px; transition: transform .25s; }
.fnote__next:hover svg { transform: translateX(3px); }
.fnote__tabs { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 8px; margin-top: 34px; }
.fnote__tab { display: flex; align-items: center; gap: 10px; width: 100%; margin-left: -6px; padding: 12px 14px 12px 18px; border: 0; border-radius: 0 8px 8px 0; background: var(--c); color: var(--ink); font: 800 .74rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; text-align: left; cursor: pointer;
  box-shadow: inset 6px 0 8px -6px rgba(0, 0, 0, .35), 2px 3px 0 rgba(8, 16, 40, .35); filter: saturate(.7) brightness(.92); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), filter .3s; }
.fnote__ic { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #FFFDF7; border: 1.5px solid var(--ink); }
.fnote__ic svg { width: 14px; height: 14px; }
.fnote__tab:hover { transform: translateX(6px); }
.fnote__tab.is-on { transform: translateX(14px); filter: none; box-shadow: 2px 3px 0 var(--ink); }
.fnote__tab:focus-visible { outline: 3px solid #F6CF5C; outline-offset: 3px; }
.fnote__again { margin: 10px 0 0; padding-left: 12px; font: 700 1.35rem/1.1 "Caveat", cursive; color: #F6CF5C; }
@keyframes fnoteIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
/* Tablets: the pages get a little tighter */
@media (min-width: 761px) and (max-width: 1060px) {
  .fnote { grid-template-columns: minmax(0, 1fr) 128px; }
  .fnote__l { padding: 36px 30px 36px 46px; } .fnote__r { padding: 36px 26px; }
  .fnote__tab { padding: 10px 10px 10px 14px; font-size: .64rem; letter-spacing: .08em; }
  .fnote__fig figcaption { font-size: 1.15rem; left: -16px; }
}
/* Phones: the tabs run across the top; only the chosen one shows its name */
@media (max-width: 760px) {
  .fnote { display: block; }
  .fnote__tabs { flex-direction: row; gap: 6px; margin: 0 0 -4px; padding: 0 2px; }
  .fnote__tab { flex: 1; min-width: 0; flex-direction: column; justify-content: center; gap: 6px; margin: 0; padding: 9px 2px 13px; border-radius: 8px 8px 0 0; box-shadow: none; font-size: .62rem; letter-spacing: .04em; }
  .fnote__tab.is-on { flex: 2.6; transform: translateY(-6px); }
  .fnote__tab:not(.is-on) .fnote__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fnote__tab.is-on .fnote__lbl { font-size: .72rem; }
  .fnote__tab:hover { transform: none; } .fnote__tab.is-on:hover { transform: translateY(-6px); }
  .fnote__again { display: none; }
  .fnote__book { min-height: 0; }
  .fnote__sp.is-on { display: block; }
  .fnote__spine { display: none; }
  .fnote__l { padding: 28px 22px 24px 40px; } .fnote__l::before { left: 26px; }
  .fnote__n { font-size: 3.2rem; }
  .fnote__t { font-size: 1.9rem; }
  .fnote__b { font-size: 1rem; }
  .fnote__r { padding: 6px 22px 30px; }
  .fnote__fig img { width: 220px; }
  .fnote__fig figcaption { font-size: 1.15rem; left: -18px; bottom: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .fnote__sp.is-on { animation: none; }
  .fnote__tab, .fnote__next svg { transition: none; }
}

/* =====================================================================
   Video player in the site's paper style (October 2026, per Nagesh): no browser controls. The video sits
   in a cream print; one big button when paused or finished; a slim ink bar on hover, tap, or pause; a small
   taped note offers music while it plays silently.
   ===================================================================== */
.vid__frame { position: relative; padding: 8px; background: #FFFDF7 var(--paper-light) 0 0 / 512px; border-radius: 3px; box-shadow: 0 2px 3px rgba(23, 23, 23, .14), 0 34px 60px -30px rgba(12, 22, 44, .6); }
.vid__frame .vid__player { border: 0; border-radius: 1px; box-shadow: none; background: #EFE3C8; object-fit: cover; cursor: pointer; }
.intro__reel .vid__player { transform: none; }
.intro__reel .vid__frame { transform: rotate(-.6deg); }
/* the big button: what happens next */
.vid__big { position: absolute; left: 50%; top: 50%; z-index: 2; display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; border: 2px solid var(--ink); border-radius: 999px;
  background: #FFFDF7; color: var(--ink); font: 700 1.05rem/1 var(--font-body); cursor: pointer; box-shadow: 0 4px 0 var(--ink), 0 22px 40px -16px rgba(12, 22, 44, .55);
  transform: translate(-50%, -50%); transition: opacity .3s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.vid__big-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--vermilion); color: #FFFDF7; }
.vid__big-ic svg { width: 20px; height: 20px; margin-left: 3px; }
.vid__big:hover { transform: translate(-50%, calc(-50% - 2px)); }
.vid__big:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; }
.vid.is-playing .vid__big { opacity: 0; pointer-events: none; transform: translate(-50%, -40%) scale(.96); }
/* the note while it plays silently: top left, out of the way */
.vid__frame .vid__sound { left: auto; right: 22px; top: 22px; bottom: auto; transform: translateY(-10px) rotate(1.5deg); }
.vid.is-hinting .vid__frame .vid__sound { transform: rotate(1.5deg); }
.vid__frame .vid__sound:hover { transform: translateY(-2px) rotate(0); }
/* the slim bar */
.vid__bar { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgba(23, 23, 23, .78); color: #FFFDF7; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s ease, transform .3s ease; }
.vid.show-bar.is-started .vid__bar, .vid.is-started:not(.is-playing) .vid__bar, .vid:focus-within.is-started .vid__bar { opacity: 1; transform: none; pointer-events: auto; }
.vid.is-ended .vid__bar { opacity: 0 !important; pointer-events: none !important; }
.vid__btn { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.vid__btn:hover { background: rgba(255, 253, 247, .14); }
.vid__btn:focus-visible { outline: 2px solid #F6CF5C; outline-offset: 1px; }
.vid__pp .i-play { display: none; } .vid:not(.is-playing) .vid__pp .i-play { display: block; } .vid:not(.is-playing) .vid__pp .i-pause { display: none; }
.vid__mute .i-off { display: none; } .vid.is-muted .vid__mute .i-off { display: inline; } .vid.is-muted .vid__mute .i-on { display: none; }
.vid__seek { flex: 1; min-width: 0; height: 18px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 0%; }
.vid__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(var(--vermilion), var(--vermilion)) 0 0 / var(--p) 100% no-repeat, rgba(255, 253, 247, .3); }
.vid__seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 253, 247, .3); }
.vid__seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--vermilion); }
.vid__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #FFFDF7; border: 2px solid var(--vermilion); }
.vid__seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #FFFDF7; border: 2px solid var(--vermilion); }
.vid__seek:focus-visible { outline: 2px solid #F6CF5C; outline-offset: 2px; border-radius: 4px; }
.vid__time { flex: none; font: 600 .82rem/1 var(--font-body); font-variant-numeric: tabular-nums; color: rgba(255, 253, 247, .85); }
.vid__frame:fullscreen { padding: 0; background: #000; display: grid; place-items: center; }
.vid__frame:fullscreen .vid__player { width: 100%; height: 100%; object-fit: contain; background: #000; }
@media (max-width: 760px) {
  .vid__frame { padding: 5px; }
  .vid__big { padding: 6px 14px 6px 6px; gap: 8px; font-size: .9rem; }
  .vid__big-ic { width: 34px; height: 34px; } .vid__big-ic svg { width: 16px; height: 16px; }
  .vid__bar { left: 10px; right: 10px; bottom: 10px; gap: 6px; padding: 3px 8px 3px 3px; }
  .vid__btn { width: 34px; height: 34px; } .vid__time { font-size: .72rem; }
  .vid__frame .vid__sound { left: auto; right: 12px; top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .vid__big, .vid__bar { transition: none; } }
/* Under every video: what it is, in plain words, and the transcript on the right */
.vid { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-5); align-items: start; }
.vid > .vid__frame { grid-column: 1 / -1; }
.vid .vid__cap { grid-column: 1; margin-top: var(--s-4); display: flex; flex-direction: column; gap: 3px; font-size: 1rem; color: var(--ink-soft); }
.vid__meta { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); }
.vid__title { font: 700 1.2rem/1.3 var(--font-display); color: var(--ink); text-wrap: balance; }
.vid__note { font-size: .9rem; line-height: 1.5; color: var(--ink-soft); max-width: 70ch; }
.vid .vid__text, .vid .vid__cap + .vid__text { grid-column: 2; margin-top: var(--s-4); }
.vid .vid__text summary { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1.5px solid rgba(23, 23, 23, .25); border-radius: 999px; text-decoration: none; color: var(--ink); background: rgba(255, 253, 247, .6); }
.vid .vid__text summary:hover { border-color: var(--ink); background: #FFFDF7; }
.vid .vid__text[open] { grid-column: 1 / -1; margin-top: var(--s-3); }
.vid .vid__text[open] summary { background: var(--ink); color: #FFFDF7; border-color: var(--ink); }
@media (max-width: 560px) {
  .vid { grid-template-columns: minmax(0, 1fr); }
  .vid .vid__text, .vid .vid__cap + .vid__text { grid-column: 1; margin-top: var(--s-3); }
  .vid__title { font-size: 1.08rem; }
}
/* Closing line on How I work and About (wide screens): the sentence on the left, the buttons on the right */
@media (min-width: 961px) {
  .about-end .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-7, 64px); }
  .about-end .actions { margin: 0; flex: 0 1 auto; justify-content: flex-end; }
  .about-end__text { max-width: 40ch; flex: 1 1 30ch; min-width: 28ch; }
}
/* About: "At a glance" sits beside the story on wide screens, so neither leaves an empty half */
@media (min-width: 1100px) {
  .about-body { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: var(--s-8, 72px); align-items: start; }
  .about-body .rows--glance { position: sticky; top: 100px; margin: 0; max-width: none; }
  .about-body .rows--glance > div { grid-template-columns: 1fr; gap: 2px; }
  .about-body .prose--about { margin: 0; }
}
/* Player bar: skip, speed, and a volume slider that slides out beside the sound button */
.vid__skip svg { width: 20px; height: 20px; }
.vid__cc { width: auto; min-width: 40px; padding: 0 8px; border-radius: 6px; font: 800 .74rem/1 var(--font-body); letter-spacing: .04em; }
.vid.no-cc .vid__cc { opacity: .55; text-decoration: line-through; }
.vid video::cue { background: rgba(28, 46, 90, .92); color: #FFFDF7; font-family: var(--font-body); font-weight: 600; line-height: 1.35; }
.vid__speed { width: auto; min-width: 40px; padding: 0 8px; border-radius: 999px; font: 700 .82rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.vid__vol { display: flex; align-items: center; }
.vid__volume { width: 0; opacity: 0; margin: 0; height: 18px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; transition: width .25s ease, opacity .2s ease, margin .25s ease; --p: 100%; }
.vid__vol:hover .vid__volume, .vid__vol:focus-within .vid__volume { width: 76px; opacity: 1; margin: 0 6px 0 2px; }
.vid__volume::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(#FFFDF7, #FFFDF7) 0 0 / var(--p) 100% no-repeat, rgba(255, 253, 247, .3); }
.vid__volume::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 253, 247, .3); }
.vid__volume::-moz-range-progress { height: 4px; border-radius: 2px; background: #FFFDF7; }
.vid__volume::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #FFFDF7; }
.vid__volume::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #FFFDF7; }
.vid__player:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
@media (max-width: 760px) {
  .vid__bar { gap: 2px; }
  .vid__skip { width: 30px; height: 30px; } .vid__skip svg { width: 18px; height: 18px; }
  .vid__speed { min-width: 34px; padding: 0 4px; font-size: .74rem; }
  .vid__volume { display: none; }
  .vid__time { display: none; }
}
@media (hover: none) { .vid__volume { display: none; } }
/* Double-tap to skip (phones): a soft bubble on the side that was tapped */
.vid__ripple { position: absolute; top: 50%; z-index: 3; padding: 10px 16px; border-radius: 999px; background: rgba(23, 23, 23, .7); color: #FFFDF7; font: 700 .95rem/1 var(--font-body); pointer-events: none; animation: vidRipple .65s ease both; }
.vid__ripple.is-left { left: 14%; } .vid__ripple.is-right { right: 14%; }
@keyframes vidRipple { 0% { opacity: 0; transform: translateY(-50%) scale(.8); } 25% { opacity: 1; transform: translateY(-50%) scale(1); } 100% { opacity: 0; transform: translateY(-50%) scale(1.05); } }
@media (max-width: 760px) {
  .vid__bar { padding: 2px 6px 2px 2px; }
  .vid__btn, .vid__skip { width: 40px; height: 40px; }
  .vid__speed { min-width: 40px; }
}
/* The smallest phones: slightly smaller buttons so the seek line keeps room beside full screen */
@media (max-width: 374px) {
  .vid__btn, .vid__skip { width: 34px; height: 34px; }
  .vid__speed { min-width: 34px; }
}

/* Essay: a live prototype inside the page (the frame grows to fit the prototype, no inner
   scrolling), a prompt card for the build-along, and the operating model as paper cards. */
article .prose .demo { margin: var(--s-6) 0; background: #fff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(12, 22, 44, .12), 0 16px 34px -18px rgba(12, 22, 44, .5); }
@media (min-width: 1101px) { article .prose .demo { margin-right: -16%; } }
.demo__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #ECE7DC; border-bottom: 1px solid rgba(23, 23, 23, .12); font: 600 .85rem/1.3 var(--font-body); }
.demo__dots { display: inline-flex; gap: 6px; } .demo__dots i { width: 10px; height: 10px; border-radius: 50%; background: #E0634B; } .demo__dots i + i { background: #EDB72D; } .demo__dots i + i + i { background: #5DB06B; }
.demo__label { font-weight: 700; flex: 1; }
.demo__open { color: var(--ink); text-decoration: underline; text-decoration-color: var(--vermilion); text-underline-offset: 3px; }
.demo__frame { display: block; width: 100%; height: 1400px; border: 0; background: #fff; }
article .prose .demo figcaption { margin: 0; padding: 12px 16px; font: 400 .9rem/1.5 var(--font-body); color: var(--muted); background: #FBF8F1; border-top: 1px solid rgba(23, 23, 23, .08); }

article .prose .pbuild { margin: var(--s-3) 0 var(--s-5); border-radius: 6px; overflow: hidden; background: #FFFDF7; border: 1.5px solid rgba(23, 23, 23, .14); }
article .prose .pbuild p { margin: 0; }
article .prose .pbuild p.pbuild__k { padding: 8px 16px; font: 800 .74rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--cobalt); }
article .prose .pbuild p.pbuild__b { padding: 12px 16px 0; font: 500 .92rem/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0; color: var(--ink); }
article .prose .pbuild p.pbuild__b:last-of-type { padding-bottom: 14px; }
article .prose .pbuild p.pbuild__r { padding: 12px 16px 14px; background: #FBE7A1; font-size: 1.02rem; line-height: 1.6; color: var(--ink); border-top: 1.5px dashed rgba(23, 23, 23, .2); }

article .prose .opm { margin: var(--s-6) 0; padding: var(--s-5); background: #E6EFFA; border-radius: 6px; }
article .prose .opm p { margin: 0; }
article .prose .opm p.opm__k { margin-bottom: 6px; font: 800 .74rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); }
article .prose .opm p.opm__k--sub { margin-top: var(--s-5); }
article .prose .opm p.opm__h { margin-bottom: var(--s-4); font: 700 1.15rem/1.35 var(--font-display); }
article .prose .opm ol, article .prose .opm ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
article .prose .opm li { position: relative; margin: 0; padding: 12px 14px; background: #fff; border-radius: 4px; box-shadow: 0 6px 14px -10px rgba(12, 22, 44, .45); font: 400 .95rem/1.5 var(--font-body); }
article .prose .opm li::marker { content: none; }
.opm__phases li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.opm b { font: 800 1.02rem/1.2 var(--font-display); }
.opm li span { color: var(--ink-soft); }
article .prose .opm__phases li.is-here { background: var(--cobalt); color: #fff; transform: rotate(-.6deg); }
.opm__phases .is-here span { color: #E7EEFF; }
.opm__phases em { grid-column: 2; justify-self: start; padding: 2px 10px; background: #F7D774; color: var(--ink); border-radius: 3px; font: 600 1.15rem/1.2 "Caveat", cursive; transform: rotate(-2deg); }
.opm__teams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opm__teams b, .opm__teams i { display: block; }
.opm__teams i { margin: 2px 0 6px; font: 600 1.15rem/1 "Caveat", cursive; color: var(--vermilion-deep); }
article .prose .opm figcaption { margin-top: var(--s-4); font: 400 .85rem/1.4 var(--font-body); color: var(--muted); }
@media (max-width: 860px) {
  .opm__teams { grid-template-columns: 1fr; }
  .opm__phases li { grid-template-columns: 1fr; gap: 4px; } .opm__phases em { grid-column: 1; }
  article .prose .demo { margin-left: calc(-1 * var(--s-3)); margin-right: calc(-1 * var(--s-3)); border-radius: 0; }
}

/* About: intro. Short verified story beside the optional intro video. */
.about-intro__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-7); align-items: center; }
.about-intro__text p { margin: 0 0 var(--s-3); max-width: 60ch; line-height: 1.6; }
.about-intro__lead { font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); line-height: 1.35 !important; font-weight: 500; }
.about-intro__k { margin: 0 0 10px; font: 800 .74rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); }
@media (max-width: 900px) { .about-intro__in { grid-template-columns: 1fr; gap: var(--s-5); } }

/* About: One example. A paper card on sky with the cover illustration and three beats. */
.ex__card { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); background: #FFFDF7 var(--paper-light) 0 0 / 512px; box-shadow: var(--shadow-paper); border-radius: 4px; overflow: hidden; }
.ex__art { margin: 0; display: grid; align-content: center; gap: 12px; padding: var(--s-6) var(--s-5); background: var(--cobalt) var(--paper-cobalt) 0 0 / 512px; }
.ex__art figcaption { color: #F6CF5C; font: 800 .72rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.ex__order { padding: var(--s-5) var(--s-4); background: #FFFDF7 var(--paper-light) 0 0 / 512px; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transform: rotate(-1.2deg); display: grid; gap: 10px; }
.ex__ot { margin: 0 0 4px; font: 800 1.2rem/1.2 var(--font-display); }
.ex__col { padding: 8px 0 4px; border-top: 1.5px dashed rgba(23, 23, 23, .25); } .ex__col--0 { border-top: 0; padding-top: 0; }
.ex__ck { margin: 0 0 6px; font: 800 .7rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.ex__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ex__col li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; margin: 0; padding: 7px 10px; border-radius: 4px; background: #F6E6C4; font-weight: 600; }
.ex__col--0 li { background: #F9D9E3; }
.ex__col li.is-off { background: transparent; border: 1.5px dashed rgba(23, 23, 23, .3); color: var(--ink-soft); }
.ex__box { width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 3px; background: #FFFDF7; display: grid; place-items: center; }
.ex__col li.is-on .ex__box { background: var(--ink); } .ex__col li.is-on .ex__box::after { content: ""; width: 5px; height: 9px; border: solid #FFFDF7; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.ex__p { font: 700 .9rem/1 var(--font-body); }
.ex__tot { display: flex; justify-content: space-between; margin: 4px 0 0; padding-top: 8px; border-top: 2px solid var(--ink); font-weight: 600; } .ex__tot b { font: 800 1.1rem/1 var(--font-display); }
.ex__cta { margin: 4px 0 0; padding: 10px 14px; border-radius: 999px; background: var(--vermilion); color: #fff; text-align: center; font: 800 .9rem/1.2 var(--font-body); }
.ex__body { padding: var(--s-6) var(--s-6) var(--s-5); }
.ex__meta { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; } .ex__meta .eyebrow { margin: 0; }
.ex__dek { margin: 0 0 var(--s-4); font: 600 1.15rem/1.4 var(--font-display); color: var(--cobalt); }
.ex__h { margin: 0 0 8px; font: 800 clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem)/1.12 var(--font-display); }
.ex__beats { list-style: none; margin: 0; padding: 0; counter-reset: ex; }
.ex__beats li { position: relative; margin: 0; padding: 12px 0 12px 46px; border-top: 1.5px dashed rgba(23, 23, 23, .2); line-height: 1.55; counter-increment: ex; }
.ex__beats li:first-child { border-top: 0; }
.ex__beats li::before { content: counter(ex); position: absolute; left: 0; top: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font: 800 .9rem/1 var(--font-body); }
.ex__beats li:nth-child(2)::before { background: var(--vermilion); }
.ex__beats b { display: block; font: 800 .74rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); }
.ex__beats p { margin: 4px 0 0; color: var(--ink-soft); }
.ex__q { display: inline-block; margin: 10px 0 6px !important; padding: 6px 14px 8px; background: #F2C557; color: var(--ink) !important; font: 600 1.7rem/1.1 "Caveat", cursive; transform: rotate(-1.5deg); box-shadow: 3px 3px 0 var(--ink); }
.ex__status { margin: var(--s-3) 0 0; font-weight: 600; } .ex__status .nw__state { margin-right: 6px; vertical-align: 1px; }
.ex__take { margin: var(--s-3) 0 var(--s-4); padding-left: 14px; border-left: 4px solid var(--cobalt); font: 700 1.12rem/1.45 var(--font-display); color: var(--cobalt); }
.ex__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; } .ex__alt { margin-left: auto; }
@media (max-width: 900px) { .ex__card { grid-template-columns: 1fr; } .ex__body { padding: var(--s-5) var(--s-4); } .ex__alt { margin-left: 0; } }

/* About: How I work. Three paper cards on a dashed trail. */
.ch__head { margin-bottom: var(--s-6); } .ch__head .lead { max-width: 56ch; }
.ch__trail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; position: relative; }
.ch__trail::before { content: ""; position: absolute; left: 4%; right: 4%; top: 50%; border-top: 3px dashed var(--vermilion); z-index: 0; }
.ch__s { position: relative; z-index: 1; margin: 0; padding: var(--s-5) var(--s-4) var(--s-4); background: #FFFDF7 var(--paper-light) 0 0 / 512px; box-shadow: var(--shadow-paper); border-top: 5px solid var(--ink); }
.ch__trail--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.ch__more { margin: 64px 0 0; }
.ch__s--0 { transform: rotate(-1.2deg); } .ch__s--1 { transform: translateY(28px) rotate(.8deg); border-top-color: var(--cobalt); }
.ch__s--2 { transform: rotate(-.6deg); border-top-color: var(--mustard); } .ch__s--3 { transform: translateY(28px) rotate(1deg); border-top-color: var(--vermilion); }
.ch__n { position: absolute; top: 10px; right: 14px; font: 900 2.2rem/1 var(--font-display); color: transparent; -webkit-text-stroke: 1.3px var(--ink); opacity: .35; }
.ch__ic { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 50%; background: var(--ink); color: #FFFDF7; }
.ch__ic svg { width: 22px; height: 22px; }
.ch__s h3 { margin: 0 0 8px; font: 800 1.2rem/1.2 var(--font-display); }
.ch__s p { margin: 0 0 12px; color: var(--ink-soft); line-height: 1.5; font-size: .97rem; }

@media (max-width: 1000px) {
  .ch__trail { grid-template-columns: 1fr 1fr; } .ch__trail::before { display: none; } .ch__s { transform: none !important; }
}
@media (max-width: 760px) {
}
@media (max-width: 640px) { .ch__trail { grid-template-columns: 1fr; } }

/* About: Now. Production, prototypes, and exploration as three labeled paper cards on mustard. */
.nw { background: #F2C557 var(--grain) 0 0 / 160px; background-blend-mode: multiply; }
.nw .eyebrow, .nw__head .lead { color: var(--ink); } .nw__head { margin-bottom: var(--s-6); } .nw__head .lead { max-width: 62ch; }
.nw__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.nw__card { margin: 0; padding: var(--s-5) var(--s-4); background: #FFFDF7 var(--paper-light) 0 0 / 512px; box-shadow: var(--shadow-paper); display: flex; flex-direction: column; align-items: flex-start; }
.nw__card h3 { margin: 12px 0 8px; font: 800 1.2rem/1.25 var(--font-display); }
.nw__card p { margin: 0 0 14px; color: var(--ink-soft); line-height: 1.55; } .nw__card .textlink { margin-top: auto; }
.nw__state { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 800 .68rem/1.6 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.nw__state--in-production { background: var(--ink); color: #FFFDF7; } .nw__state--prototypes { background: var(--cobalt); color: #fff; } .nw__state--live-iterating { background: var(--vermilion); color: #fff; } .nw__state--exploring { border: 1.5px dashed var(--vermilion-deep); color: var(--vermilion-deep); }
.nw__foot { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; margin-top: var(--s-6); padding: var(--s-5); background: var(--ink); color: #FFFDF7; border-radius: 6px; }
.nw__tools h3 { margin: 0 0 10px; font: 800 1.15rem/1.2 var(--font-display); } .nw__tools .st__tr span { color: #F6CF5C; }
.nw__next { margin: 0; font: 600 1.15rem/1.45 var(--font-display); } .nw__learn { margin: var(--s-4) 0 0; color: rgba(255, 253, 247, .9); line-height: 1.5; } .nw__learn b { display: block; margin-bottom: 4px; font: 800 .74rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #F6CF5C; } .nw__learn .textlink { color: #FFFDF7; }
.nw__next b { display: block; margin-bottom: 6px; font: 800 .74rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #F6CF5C; }
@media (max-width: 1000px) { .nw__cards, .nw__foot, .ch__trail--3 { grid-template-columns: 1fr; } }

/* About: Experience, on the cobalt band. Four warm paper steps rising on one baseline,
   how I work a step ahead of my team, then most days, then quiet text. */
.kit__head { margin-bottom: var(--s-6); }
.kit__head--art { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.kit__art { margin: 0; } .kit__art img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .7); }
@media (max-width: 900px) { .kit__head--art { grid-template-columns: 1fr; } } .kit__head .lead { max-width: 52ch; color: rgba(255, 253, 247, .9); }
.kit .eyebrow, .kit .st__k, .kit .st__tr span { color: #F6CF5C; }
.kit__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kit__tags li { margin: 0; padding: 4px 10px; border: 1.5px solid #171717; border-radius: 999px; background: rgba(255, 255, 255, .55); color: #171717; font: 600 .82rem/1.2 var(--font-body); }
.st { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; position: relative; }
.st::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 4px; background: var(--vermilion); border-radius: 2px; }
.st__s { position: relative; margin: 0; padding: var(--s-5) var(--s-4); color: #171717; box-shadow: 0 14px 26px -18px rgba(0, 0, 0, .6); background-blend-mode: multiply; transition: transform .35s ease, box-shadow .35s ease;
  clip-path: polygon(0 6px, 6% 0, 14% 5px, 26% 1px, 38% 6px, 52% 0, 66% 5px, 78% 1px, 90% 6px, 100% 2px, 100% 100%, 0 100%); }
.st__s--0 { background: #FFFDF7 var(--paper-light) 0 0 / 512px; min-height: 300px; }
.st__s--1 { background: #F6E6C4 var(--grain) 0 0 / 160px; background-blend-mode: multiply; min-height: 345px; }
.st__s--2 { background: #F2C557 var(--grain) 0 0 / 160px; background-blend-mode: multiply; min-height: 390px; }
.st__s--3 { background: #F04B2F var(--grain) 0 0 / 160px; background-blend-mode: multiply; min-height: 435px; color: #fff; clip-path: none; border-radius: 4px 4px 0 0; }
@media (hover: hover) { .st__s:hover { transform: translateY(-6px); box-shadow: 0 26px 40px -24px rgba(0, 0, 0, .7); } }
.st__ic { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 50%; background: #171717; color: #FFFDF7; }
.st__ic svg { width: 22px; height: 22px; }
.st__s--3 .st__ic { background: #fff; color: var(--vermilion); }
.st__yr { margin: 0 0 6px; font: 800 .74rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.st__s h3 { margin: 0 0 8px; font: 800 1.22rem/1.2 var(--font-display); }
.st__p { margin: 0 0 12px; line-height: 1.5; font-size: .97rem; color: #3A3A3A; }
.st__s--3 .st__p { color: #FFF1EC; }
.st__s--3 .kit__tags li { border-color: #fff; color: #fff; background: transparent; }
.st__here { position: absolute; z-index: 2; top: -14px; right: 14px; padding: 3px 10px; background: #FFFDF7; color: #171717; border: 1.5px solid #171717; border-radius: 3px; font: 600 1.15rem/1 "Caveat", cursive; transform: rotate(3deg); }
.st__h { margin: 0 0 14px; font: 800 1.3rem/1.2 var(--font-display); }
.st__k { margin: 0 0 4px; font: 800 .72rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.st__dl { margin: 0 0 10px; }
.st__plain { margin: 0 0 12px; line-height: 1.55; }
.st__tr { margin: 0 0 10px; line-height: 1.55; }
.st__tr span { display: block; font: 800 .72rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }


.st__foot { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1.5px solid rgba(255, 253, 247, .25); }
.st__foot .st__plain { margin: 0 0 6px; }
.st__titles { margin: 14px 0 0; color: rgba(255, 253, 247, .85); } .kit .st__titles .textlink { color: #FFFDF7; margin-left: 6px; } .st__foot .st__k { display: inline; margin-right: 8px; }

@media (max-width: 1000px) {
  .st { grid-template-columns: 1fr 1fr; } .st__s { min-height: 0 !important; } .st::after { display: none; }
}
@media (max-width: 640px) { .st { grid-template-columns: 1fr; gap: 22px; } }

/* Homepage: selected work. The About customer example as the feature, then two live case-study
   summaries readable without a code, then a quiet line to the full case studies (access code). */
.hw .section-head { margin-bottom: var(--s-6); }
.hw__feature { margin-bottom: var(--s-6); }
.hw__feature .ex__h { font-size: clamp(1.5rem, 1.15rem + 1vw, 2.1rem); }
.hw__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.hw__card { display: grid; grid-template-rows: auto 1fr; background: #FFFDF7 var(--paper-light) 0 0 / 512px; box-shadow: var(--shadow-paper); border-radius: 4px; overflow: hidden; }
.hw__art { margin: 0; aspect-ratio: 16 / 7; overflow: hidden; } .hw__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hw__body { padding: var(--s-5); display: flex; flex-direction: column; }
.hw__h { margin: 0 0 var(--s-3); font: 800 clamp(1.3rem, 1.1rem + .6vw, 1.6rem)/1.15 var(--font-display); }
.hw__beats { margin: 0 0 var(--s-4); }
.hw__beats > div { padding: 10px 0; border-top: 1.5px dashed rgba(23, 23, 23, .2); } .hw__beats > div:first-child { border-top: 0; padding-top: 0; }
.hw__beats dt { font: 800 .72rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); }
.hw__beats dd { margin: 2px 0 0; color: var(--ink-soft); line-height: 1.55; }
.hw__link { margin: auto 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.hw__foot { margin: var(--s-6) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.hw__ask { color: var(--ink-soft); }
@media (max-width: 900px) { .hw__cards { grid-template-columns: 1fr; } }

/* Homepage: short introduction (reuses the About intro layout). */
.hm-about .about-intro__text .section-title { margin: 6px 0 var(--s-3); }
.hm-about__links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: var(--s-4) !important; }

/* How I work flip-book: the "At work, this means" note carried over from the homepage. */
.story-step__work { margin: 10px 12px 0 0; padding: 10px 14px; background: #F6CF5C var(--grain) 0 0 / 120px; background-blend-mode: multiply; color: var(--ink); line-height: 1.45; transform: rotate(-1deg); box-shadow: 0 8px 16px -12px rgba(0, 0, 0, .5); }
.story-step__work span { display: block; font: 700 1.25rem/1 "Caveat", cursive; color: var(--vermilion-deep); margin-bottom: 4px; }
/* Homepage writing: a curated three. The two side pieces stack image over text so the column
   matches the feature's height instead of leaving empty sky below. */
@media (min-width: 861px) {
  .wdesk--curated .wdesk__grid { align-items: stretch; }
  .wdesk--curated .wdesk__side { grid-template-rows: 1fr 1fr; padding-top: 0; }
  .wdesk--curated .wdesk__note .wdesk__link { grid-template-columns: 1fr; align-items: start; gap: var(--s-3); }
  .wdesk--curated .wdesk__note .wdesk__thumb img { aspect-ratio: 16 / 9; object-fit: cover; }
  .wdesk--curated .wdesk__ntitle { font-size: 1.3rem; }
}
.hw__protos { margin-left: auto; }
@media (max-width: 640px) { .hw__protos { margin-left: 0; } }


/* Homepage Selected work: three "fork in the road" scenes. Each scene is layered paper (a second sheet
   peeking behind), a visual of the product problem with two pinned notes (the easy path, struck; my call,
   circled), and the story beside it. Sides alternate. No black: navy text, cobalt and vermilion accents. */
.scs { --navy: #1C2E5A; --navy-soft: #3D4A6B; }
.scs .section-head { margin-bottom: var(--s-8, 72px); }
.sc { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; margin: 0 0 var(--s-9, 96px); padding: var(--s-7) var(--s-6); border-radius: 14px; isolation: isolate; color: var(--navy); }
.sc::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--sc-bg); box-shadow: 0 30px 50px -36px rgba(20, 47, 107, .55); }
.sc::after { content: ""; position: absolute; inset: 14px -12px -14px 12px; z-index: -2; border-radius: inherit; background: var(--sc-back); transform: rotate(1.2deg); }
.sc--0 { --sc-bg: var(--cobalt) var(--paper-cobalt) 0 0 / 512px; --sc-back: #F2C557 var(--grain) 0 0 / 160px; color: #FFFDF7; }
.sc--1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
.sc--1::after { inset: 14px 12px -14px -12px; transform: rotate(-1.2deg); }
.sc--1 .sc__stage { order: 2; }
.sc__num { position: absolute; top: -46px; left: 18px; font: 900 clamp(4rem, 3rem + 3vw, 6.2rem)/1 var(--font-display); color: transparent; -webkit-text-stroke: 2px var(--vermilion); }
.sc--1 .sc__num { left: auto; right: 18px; }

/* The stage: the visual, with the two notes pinned over its lower edge */
.sc__stage { position: relative; padding-bottom: 64px; }
.sc__art { margin: 0; position: relative; }
.sc__art .illus { margin: 0; } .sc__art .illus img { display: block; width: 100%; height: auto; border-radius: 4px; border: 10px solid #FFFDF7; box-shadow: 0 22px 34px -22px rgba(20, 47, 107, .7); transform: rotate(-1.4deg); }
.sc--2 .sc__art .illus img { transform: rotate(1.2deg); }
.sc__art--order { display: grid; justify-items: center; }
.sc__art--order .ex__order { width: min(100%, 360px); color: var(--navy); border-color: #FFFDF7; box-shadow: 0 22px 34px -20px rgba(9, 25, 66, .75); transform: rotate(-2deg); }
.sc__art--order .ex__tot { border-top-color: var(--navy); } .sc__art--order .ex__box { border-color: var(--navy); } .sc__art--order .ex__col li.is-on .ex__box { background: var(--cobalt); }
.sc__art--order figcaption { margin-top: 12px; font: 800 .7rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #F6CF5C; }

.fk { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; pointer-events: none; }
.fk__n { position: relative; margin: 0; padding: 12px 16px 14px; width: 48%; max-width: 250px; box-shadow: 0 14px 22px -14px rgba(20, 47, 107, .7); }
.fk__n::before { content: ""; position: absolute; top: -10px; left: 50%; width: 64px; height: 18px; margin-left: -32px; background: rgba(255, 253, 247, .75); transform: rotate(-4deg); }
.fk__n--easy { background: #E4E2DC var(--grain) 0 0 / 120px; color: var(--navy-soft); transform: rotate(-3deg) translateY(-6px); }
.fk__n--call { background: #F6CF5C var(--grain) 0 0 / 120px; background-blend-mode: multiply; color: var(--navy); transform: rotate(2.5deg); }
.sc--1 .fk__n--easy { order: 2; transform: rotate(3deg) translateY(-6px); } .sc--1 .fk__n--call { transform: rotate(-2.5deg); }
.fk__k { display: block; margin-bottom: 4px; font: 700 1.25rem/1 "Caveat", cursive; color: var(--vermilion-deep); }
.fk__t { display: block; font: 700 1.02rem/1.3 var(--font-display); }
.fk__ring { position: absolute; fill: none; stroke: var(--vermilion); stroke-linecap: round; }
.fk__ring { left: -12px; top: -12px; width: calc(100% + 24px); height: calc(100% + 24px); stroke-width: 3.4; }

/* The story */
.sc__body { max-width: 520px; }
.sc__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.sc__live { padding: 2px 10px; border-radius: 999px; background: #FFFDF7; color: var(--cobalt); font: 800 .68rem/1.6 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.sc--1 .sc__live, .sc--2 .sc__live { background: var(--cobalt); color: #fff; }
.sc__kind { font: 800 .72rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); }
.sc--0 .sc__kind { color: #F6CF5C; }
.sc--1 .sc__kind, .sc--2 .sc__kind { color: #6E1B0D; } /* 7:1 on mustard and sky */
.sc__h { margin: 0 0 14px; font: 800 clamp(1.7rem, 1.25rem + 1.5vw, 2.6rem)/1.08 var(--font-display); color: inherit; }
.sc__q { display: inline-block; margin: 0 0 14px; padding: 6px 14px 8px; background: #F2C557; color: var(--navy); font: 600 1.45rem/1.1 "Caveat", cursive; transform: rotate(-2deg); box-shadow: 3px 3px 0 #142F6B; }
.sc__dec { margin: 0 0 10px; font: 600 clamp(1.12rem, 1rem + .4vw, 1.32rem)/1.4 var(--font-display); }
.sc--0 .sc__dec { color: #F6CF5C; } .sc--1 .sc__dec, .sc--2 .sc__dec { color: var(--cobalt); }
.sc__con { margin: 0 0 10px; line-height: 1.55; }
.sc--1 .sc__con, .sc--2 .sc__con { color: var(--navy); } /* panel 3: full navy, so the line doesn't fade on textured paper */
.sc__ev { margin: 0 0 16px; padding-left: 12px; border-left: 3px solid var(--vermilion); font-weight: 600; line-height: 1.45; }
.sc--0 .sc__ev { border-left-color: #F6CF5C; }
.sc__act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.sc .textlink { color: inherit; }
.sc--0 .lock-note { color: rgba(255, 253, 247, .85); }
.sc__more { border-top: 1.5px dashed currentColor; padding-top: 10px; }
.sc__more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font: 700 .95rem/1.4 var(--font-body); }
.sc__more summary::-webkit-details-marker { display: none; }
.sc__more summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid currentColor; border-radius: 50%; font-weight: 800; line-height: 1; }
.sc__more[open] summary::before { content: "\2212"; }
.sc__more summary:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 3px; border-radius: 4px; }
.sc__more dl { margin: 10px 0 0; } .sc__more dl > div { padding: 6px 0; } .sc__more dt { font: 800 .7rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; opacity: .8; } .sc__more dd { margin: 2px 0 0; line-height: 1.55; }

@media (max-width: 900px) {
  .sc, .sc--1 { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-6) var(--s-4) var(--s-5); margin-bottom: var(--s-8, 72px); }
  .sc--1 .sc__stage { order: 0; }
  .sc::after, .sc--1::after { inset: 10px -6px -10px 6px; }
  .sc__num { top: -34px; font-size: 3.6rem; }
  .sc__stage { padding-bottom: 0; }
  .fk { position: static; margin-top: 18px; padding: 0 4px; }
  .sc--1 .fk__n--easy { order: 0; }
}
@media (max-width: 420px) { .fk__t { font-size: .92rem; } .fk__n { padding: 10px 12px 12px; } }

/* Fork notes, refined: bigger, the easy path struck with one clean red line, the label above the sketch */
.fk__n { width: 47%; max-width: 280px; padding: 14px 18px 16px; }
.fk__t { font-size: 1.12rem; line-height: 1.3; }
.fk__n--easy .fk__t, s.fk__t { text-decoration: line-through; text-decoration-color: var(--vermilion); text-decoration-thickness: 3px; }
.sc__stage { padding-bottom: 78px; }
.sc__art--order figcaption { order: -1; margin: 0 0 12px; }
@media (max-width: 900px) { .sc__stage { padding-bottom: 0; } }
@media (max-width: 420px) { .fk__t { font-size: .98rem; } }
.scs { overflow-x: clip; }
.sc__art .illus figcaption.tag--illus { top: 18px; bottom: auto; left: 18px; z-index: 2; }
@media (max-width: 600px) {
  .fk { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 22px; }
  .fk__n { width: auto; max-width: none; margin: 0 14px; }
  .fk__n--easy, .sc--1 .fk__n--easy { order: 0; transform: rotate(-1.5deg); margin-right: 40px; }
  .fk__n--call, .sc--1 .fk__n--call { transform: rotate(1.5deg); margin-left: 40px; }
  .fk__t { font-size: 1.02rem; }
}
/* Colors chosen by Nagesh (October 2026): cobalt, then mustard, then sky; no pink, no black. */
.sc--1 { --sc-bg: #F2C557 var(--grain) 0 0 / 160px; --sc-back: var(--cobalt) var(--paper-cobalt) 0 0 / 512px; }
.sc--2 { --sc-bg: #A9D8EF var(--paper-sky) 0 0 / 512px; --sc-back: #F2C557 var(--grain) 0 0 / 160px; }

/* Scene 04 (guided selling): cobalt like 01, with the visual on the right like 02. */
.sc--3 { --sc-bg: var(--cobalt) var(--paper-cobalt) 0 0 / 512px; --sc-back: #8FCDEA var(--paper-sky) 0 0 / 512px; color: #FFFDF7; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
.sc--3::after { inset: 14px 12px -14px -12px; transform: rotate(-1.2deg); }
.sc--3 .sc__stage { order: 2; } .sc--3 .sc__num { left: auto; right: 18px; }
.sc--3 .fk__n--easy { order: 2; transform: rotate(3deg) translateY(-6px); } .sc--3 .fk__n--call { transform: rotate(-2.5deg); }
.sc--3 .sc__kind, .sc--3 .sc__dec { color: #F6CF5C; } .sc--3 .sc__ev { border-left-color: #F6CF5C; } .sc--3 .lock-note { color: rgba(255, 253, 247, .85); }
.sc__live--soon { background: #F6CF5C !important; color: var(--navy) !important; }
@media (max-width: 900px) { .sc--3 { grid-template-columns: 1fr; } .sc--3 .sc__stage { order: 0; } .sc--3 .fk__n--easy { order: 0; } .sc--3::after { inset: 10px -6px -10px 6px; } }
@media (max-width: 600px) { .sc--3 .fk__n--easy { transform: rotate(-1.5deg); } .sc--3 .fk__n--call { transform: rotate(1.5deg); } }
.scs, .scs .section-title, .scs .hw__foot, .scs .hw__foot .textlink { color: var(--navy); } .scs .hw__ask, .scs .hw__foot .lock-note { color: var(--navy-soft); }
/* The "Play with music" prompt is a small taped note pinned to the video's top-right corner,
   hanging half off the frame (per Nagesh, October 2026), so it never covers a face or the collage. */
.vid { position: relative; }
.vid .vid__sound--tab, .vid.is-hinting .vid__sound--tab { position: absolute; z-index: 4; top: -14px; right: -10px; left: auto; bottom: auto; margin: 0;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 7px 10px; border: 1.5px solid var(--cobalt); border-radius: 3px; background: #FFFDF7; color: var(--cobalt);
  font: 700 .85rem/1.2 var(--font-body); box-shadow: 0 8px 14px -8px rgba(20, 47, 107, .55); cursor: pointer; opacity: 0; transform: translateY(-6px) rotate(3deg); transition: opacity .3s ease, transform .3s ease; }
.vid.is-hinting .vid__sound--tab { opacity: 1; transform: rotate(3deg); }
.vid .vid__sound--tab[hidden] { display: none; }
.vid .vid__sound--tab::before { content: ""; position: absolute; top: -8px; left: 50%; width: 44px; height: 14px; margin-left: -22px; background: rgba(237, 183, 45, .85); transform: rotate(-4deg); }
.vid .vid__sound--tab:hover { background: var(--cobalt); color: #FFFDF7; transform: rotate(0); }
.vid .vid__sound--tab:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 3px; }
.vid .vid__sound--tab svg { width: 16px; height: 16px; color: var(--vermilion); }
.vid .vid__sound--tab:hover svg { color: #F6CF5C; }
@media (max-width: 760px) { .vid .vid__sound--tab, .vid.is-hinting .vid__sound--tab { top: -18px; right: -4px; padding: 4px 9px 5px 7px; font-size: .78rem; } }
@media (prefers-reduced-motion: reduce) { .vid .vid__sound--tab { transition: none; } }
@media (max-width: 760px) { .about-intro__k { margin-bottom: 26px; } }

/* Product basics (owner preview, October 2026). Landing: three parts, each a row of paper lesson
   cards with a big outlined number. Lesson page: sky header with the title on a torn strip, the
   video, then the idea, a real example card, and two pinned notes (the mistake, struck; try this
   week, taped yellow). Navy text, no black. */
.pb, .pb-lesson, .pb-head { --navy: #1C2E5A; --navy-soft: #3D4A6B; color: var(--navy); }
.pb .section-title { color: var(--navy); }
.pb-part { margin-top: var(--s-7); }
.pb-part__k { margin: 0; font: 800 .74rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); }
.pb-part__lead { margin: -6px 0 var(--s-4); max-width: 62ch; color: var(--navy-soft); }
.pb-part__h { margin: 4px 0 var(--s-4); font: 800 clamp(1.4rem, 1.15rem + .8vw, 1.9rem)/1.15 var(--font-display); }
.pb-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.pb-card { margin: 0; }
.pb-card__link { position: relative; display: flex; flex-direction: column; height: 100%; padding: var(--s-6) var(--s-5) var(--s-5); border-radius: 10px; color: var(--navy); text-decoration: none; background: #FFFDF7 var(--paper-light) 0 0 / 512px; box-shadow: 0 18px 30px -24px rgba(20, 47, 107, .6); border-top: 6px solid var(--cobalt); transition: transform .3s ease, box-shadow .3s ease; }
.pb-card--1 .pb-card__link { border-top-color: #EDB72D; } .pb-card--2 .pb-card__link { border-top-color: var(--sky); }
a.pb-card__link:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 26px 38px -24px rgba(20, 47, 107, .7); }
a.pb-card__link:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 4px; }
.pb-card__n { position: absolute; top: 10px; right: 16px; font: 900 3.2rem/1 var(--font-display); color: transparent; -webkit-text-stroke: 1.6px var(--vermilion); opacity: .55; }
.pb-card__k { margin: 0 0 6px; font: 800 .7rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); }
.pb-card__t { margin: 0 0 8px; padding-right: 54px; font: 800 1.25rem/1.2 var(--font-display); }
.pb-card__s { margin: 0 0 16px; color: var(--navy-soft); line-height: 1.5; }
.pb-card__go { margin-top: auto; display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--cobalt); }
.pb-card__soon { margin-top: auto; align-self: flex-start; padding: 2px 10px; border: 1.5px dashed var(--navy-soft); border-radius: 999px; font: 700 .75rem/1.6 var(--font-body); color: var(--navy-soft); }
.pb-card.is-soon .pb-card__link { background: #F7F1E3 var(--paper-light) 0 0 / 512px; box-shadow: none; }
@media (max-width: 1000px) { .pb-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pb-cards { grid-template-columns: 1fr; } }

.pb-head__in { max-width: 860px; }
.pb-crumb { margin: 0 0 var(--s-4); font-weight: 600; color: var(--navy); } .pb-crumb a { color: var(--navy); }
.pb-head__k { margin: 0 0 10px; font: 800 .74rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); }
.pb-head .headline { color: var(--navy); }
.pb-head__s { margin: var(--s-4) 0 0; font: 600 clamp(1.1rem, 1rem + .4vw, 1.35rem)/1.45 var(--font-display); color: var(--navy); max-width: 46ch; }
.pb-lesson__in { max-width: 860px; }
.pb-video { margin: 0 0 var(--s-7); }
.pb-video--soon { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 8px; background: var(--cobalt) var(--paper-cobalt) 0 0 / 512px; color: #F6CF5C; font: 800 .8rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.pb-body { font-size: 1.12rem; line-height: 1.65; }
.pb-body > p { margin: 0 0 var(--s-4); }
.pb-h { margin: 0 0 var(--s-3); font: 800 1.6rem/1.2 var(--font-display); }
.pb-ex { position: relative; margin: var(--s-6) 0; padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6); background: var(--cobalt) var(--paper-cobalt) 0 0 / 512px; color: #FFFDF7; border-radius: 8px; box-shadow: 0 22px 34px -24px rgba(20, 47, 107, .7); }
.pb-ex__k { margin: 0 0 6px; font: 700 1.4rem/1 "Caveat", cursive; color: #F6CF5C; }
.pb-ex p:last-child { margin: 0; }
.pb-ai { margin: 0 0 var(--s-6); padding-left: 14px; border-left: 4px solid var(--vermilion); color: var(--navy-soft); } .pb-ai b { color: var(--navy); }
.pb-notes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin: var(--s-5) 0 var(--s-6); }
.pb-note { position: relative; padding: 18px 20px 20px; box-shadow: 0 16px 24px -16px rgba(20, 47, 107, .6); font-size: 1.02rem; line-height: 1.55; }
.pb-note::before { content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; margin-left: -35px; background: rgba(255, 253, 247, .8); transform: rotate(-4deg); }
.pb-note p { margin: 0; } .pb-note .pb-note__k { margin: 0 0 6px; font: 700 1.35rem/1 "Caveat", cursive; color: var(--vermilion-deep); }
.pb-note--mistake { background: #E4E2DC var(--grain) 0 0 / 120px; transform: rotate(-1.2deg); }
.pb-note--try { background: #F6CF5C var(--grain) 0 0 / 120px; background-blend-mode: multiply; transform: rotate(1deg); }
.pb-ask { margin: 0 0 var(--s-5); }
.pb-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: var(--s-6) 0 var(--s-3); padding-top: var(--s-4); border-top: 1.5px dashed rgba(28, 46, 90, .3); }
.pb-next span { font: 800 .74rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); }
.pb-next em { font-style: normal; font-size: .85rem; color: var(--navy-soft); }
.pb-lesson .textlink { color: var(--navy); }
@media (max-width: 700px) { .pb-notes { grid-template-columns: 1fr; } .pb-ex { padding: var(--s-5) var(--s-4); } }
.pb-head__by { margin: var(--s-4) 0 0; font-size: .95rem; font-weight: 600; color: var(--navy-soft); }
.pb-why { max-width: 62ch; margin: var(--s-7) 0 0; padding-left: 14px; border-left: 4px solid var(--vermilion); color: var(--navy-soft); font-size: 1.05rem; line-height: 1.6; }
/* The short answer: one plain sentence up top, for readers in a hurry (and for search and AI answers). */
.pb-answer { margin: 0 0 var(--s-6); padding: var(--s-4) var(--s-5); background: #FFFDF7 var(--paper-light) 0 0 / 512px; border: 2px solid var(--cobalt); border-radius: 8px; box-shadow: 6px 6px 0 #F6CF5C; }
.pb-answer p { margin: 0; font: 600 1.15rem/1.5 var(--font-display); }
.pb-answer .pb-answer__k { margin: 0 0 6px; font: 800 .72rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); }
.pb-ex .pb-ex__more { margin: var(--s-3) 0 0; } .pb-ex .pb-ex__more a { color: #F6CF5C; font-weight: 700; }
.pb-faq { margin: var(--s-7) 0 var(--s-6); }
.pb-faq__item { padding: var(--s-4) 0; border-top: 1.5px dashed rgba(28, 46, 90, .3); }
.pb-faq__item h3 { margin: 0 0 6px; font: 800 1.15rem/1.3 var(--font-display); }
.pb-faq__item p { margin: 0; color: var(--navy-soft); }
.pb-src { margin: 0 0 var(--s-6); padding: var(--s-4) var(--s-5); background: rgba(190, 240, 255, .45); border-radius: 8px; }
.pb-src__h { margin: 0 0 8px; font: 800 .74rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.pb-src ul { margin: 0; padding-left: 1.1em; font-size: .95rem; line-height: 1.55; } .pb-src li + li { margin-top: 6px; } .pb-src a { color: var(--cobalt); overflow-wrap: anywhere; }
.pb-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin: var(--s-6) 0 var(--s-4); }
.pb-pager__a { display: flex; flex-direction: column; gap: 4px; padding: var(--s-4) var(--s-5); border-radius: 8px; background: #FFFDF7 var(--paper-light) 0 0 / 512px; box-shadow: 0 14px 24px -20px rgba(20, 47, 107, .6); color: var(--navy); text-decoration: none; font: 800 1.08rem/1.3 var(--font-display); transition: transform .25s ease; }
.pb-pager__a span { font: 800 .7rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); }
.pb-pager__next { text-align: right; border-top: 5px solid var(--cobalt); } .pb-pager__prev { border-top: 5px solid #EDB72D; }
.pb-pager__a:hover { transform: translateY(-3px); } .pb-pager__a:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 3px; }
@media (max-width: 700px) { .pb-pager { grid-template-columns: 1fr; } .pb-pager > span:empty { display: none; } .pb-answer { box-shadow: 4px 4px 0 #F6CF5C; } }

/* Lesson how-to (lessons rebuilt to teach the method, October 2026): outcomes, numbered steps,
   a sorted-evidence table, ask/avoid question lists, a fill-in template, and a copyable worksheet. */
.pb-learn { margin: 0 0 var(--s-6); padding: var(--s-4) var(--s-5); border-left: 5px solid #EDB72D; background: rgba(246, 207, 92, .16); border-radius: 0 8px 8px 0; }
.pb-learn .pb-learn__k, .pb-tpl .pb-tpl__k, .pb-qs__k, .pb-kit__k { margin: 0 0 8px; font: 800 .72rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); }
.pb-learn ul, .pb-step ul, .pb-note ul, .pb-note ol { margin: 0; padding-left: 1.2em; line-height: 1.55; } .pb-learn li + li, .pb-step li + li, .pb-note li + li { margin-top: 6px; }
.pb-note ul, .pb-note ol { margin-top: 8px; }
.pb-steps { list-style: none; margin: 0 0 var(--s-6); padding: 0; counter-reset: none; }
.pb-step { padding: var(--s-5) 0; border-top: 1.5px dashed rgba(28, 46, 90, .3); }
.pb-step > p, .pb-step > ul { margin: 0 0 var(--s-3); }
.pb-step__h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 var(--s-3); font: 800 1.35rem/1.25 var(--font-display); }
.pb-step__n { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cobalt); color: #FFFDF7; font: 800 1.05rem/1 var(--font-body); transform: translateY(4px); }
.pb-table { margin: var(--s-4) 0; overflow-x: auto; }
.pb-table table { width: 100%; border-collapse: collapse; background: #FFFDF7 var(--paper-light) 0 0 / 512px; border-radius: 8px; box-shadow: 0 14px 24px -20px rgba(20, 47, 107, .6); font-size: .98rem; }
.pb-table th, .pb-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(28, 46, 90, .14); }
.pb-table thead th { font: 800 .72rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--cobalt); }
.pb-table tbody th { font-weight: 700; min-width: 9.5em; } .pb-table td { color: var(--navy-soft); }
.pb-table__note { margin: 8px 0 0; font-size: .88rem; color: var(--navy-soft); font-style: italic; }
.pb-qs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin: var(--s-4) 0; }
.pb-qs__col { padding: var(--s-4); border-radius: 8px; background: #FFFDF7 var(--paper-light) 0 0 / 512px; box-shadow: 0 14px 24px -20px rgba(20, 47, 107, .6); }
.pb-qs__col--good { border-top: 5px solid var(--cobalt); } .pb-qs__col--bad { border-top: 5px solid var(--vermilion); }
.pb-qs__col--good .pb-qs__k { color: var(--cobalt); }
.pb-tpl { margin: var(--s-4) 0; padding: var(--s-4) var(--s-5); border: 2px dashed var(--cobalt); border-radius: 8px; background: rgba(190, 240, 255, .3); }
.pb-tpl p { margin: 0 0 var(--s-3); } .pb-tpl p:last-child { margin: 0; }
.pb-tpl .pb-tpl__t { font: 700 1.1rem/1.5 var(--font-display); }
.pb-kit { margin: var(--s-6) 0; border-radius: 8px; background: #FFFDF7 var(--paper-light) 0 0 / 512px; box-shadow: 0 18px 30px -22px rgba(20, 47, 107, .7); border-top: 5px solid #EDB72D; }
.pb-kit__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--s-3) var(--s-5) 0; }
.pb-kit__k { margin: 0; }
.pb-kit__copy { padding: 6px 14px; border: 2px solid var(--navy); border-radius: 999px; background: #FFFDF7; color: var(--navy); font: 700 .9rem/1 var(--font-body); cursor: pointer; }
.pb-kit__copy:hover { background: #F6CF5C; } .pb-kit__copy:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 2px; }
.pb-kit__pre { margin: 0; padding: var(--s-3) var(--s-5) var(--s-5); white-space: pre-wrap; font: 500 .92rem/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--navy); }
@media (max-width: 700px) { .pb-qs { grid-template-columns: 1fr; } .pb-step__h { font-size: 1.2rem; } .pb-kit__top, .pb-kit__pre, .pb-tpl, .pb-learn { padding-left: var(--s-4); padding-right: var(--s-4); } }

.pb-hook { margin: 0 0 var(--s-6); padding: var(--s-4) var(--s-5); background: var(--cobalt) var(--paper-cobalt) 0 0 / 512px; color: #FFFDF7; border-radius: 8px; }
.pb-hook p { margin: 0; line-height: 1.6; } .pb-hook .pb-hook__k { margin: 0 0 6px; font: 700 1.4rem/1 "Caveat", cursive; color: #F6CF5C; }
.pb-recap { margin-top: var(--s-6); }
.pb-terms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-5); margin: 0 0 var(--s-6); }
.pb-terms div { padding: var(--s-3) 0; border-top: 1.5px dashed rgba(28, 46, 90, .3); }
.pb-terms dt { font: 800 1.05rem/1.3 var(--font-display); color: var(--cobalt); } .pb-terms dd { margin: 4px 0 0; color: var(--navy-soft); line-height: 1.5; }
.pb-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); list-style: none; margin: var(--s-4) 0; padding: 0; }
.pb-trio li { margin: 0; transform: none; padding: var(--s-4); border-radius: 8px; background: #FFFDF7 var(--paper-light) 0 0 / 512px; box-shadow: 0 14px 24px -20px rgba(20, 47, 107, .6); border-top: 5px solid var(--cobalt); line-height: 1.5; }
.pb-trio li:nth-child(2) { border-top-color: #EDB72D; } .pb-trio li:nth-child(3) { border-top-color: var(--vermilion); }
.pb-trio b { display: block; margin-bottom: 4px; font: 800 1.1rem/1.2 var(--font-display); }
.pb-persona { margin: var(--s-4) 0; padding: var(--s-4) var(--s-5); border-radius: 8px; background: #FFFDF7 var(--paper-light) 0 0 / 512px; box-shadow: 0 14px 24px -20px rgba(20, 47, 107, .6); border-left: 5px solid #EDB72D; }
.pb-persona__n { margin: 0 0 8px; font: 800 1.2rem/1.2 var(--font-display); } .pb-persona dl { margin: 0; } .pb-persona dt { font-weight: 800; margin-top: 8px; } .pb-persona dd { margin: 2px 0 0; }
.pb-check, .pb-practice { margin: var(--s-7) 0 var(--s-5); }
.pb-practice ol { margin: 0 0 var(--s-4); padding-left: 1.3em; line-height: 1.55; } .pb-practice li + li { margin-top: 6px; }
.pb-check__q { margin: 0 0 var(--s-3); border-radius: 8px; background: #FFFDF7 var(--paper-light) 0 0 / 512px; box-shadow: 0 12px 22px -20px rgba(20, 47, 107, .6); border-left: 5px solid var(--cobalt); }
.pb-check__q summary { display: flex; gap: 12px; align-items: baseline; padding: var(--s-3) var(--s-4); cursor: pointer; font: 700 1.05rem/1.4 var(--font-display); list-style: none; }
.pb-check__q summary::-webkit-details-marker { display: none; }
.pb-check__q summary::after { content: "Show answer"; margin-left: auto; flex: none; font: 700 .8rem/1.4 var(--font-body); color: var(--vermilion-deep); }
.pb-check__q[open] summary::after { content: "Hide"; }
.pb-check__q summary:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 2px; }
.pb-check__q > p { margin: 0; padding: 0 var(--s-4) var(--s-4) calc(var(--s-4) + 40px); color: var(--navy-soft); line-height: 1.55; }
.pb-check__n { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(33, 78, 173, .12); color: var(--cobalt); font: 800 .9rem/1 var(--font-body); }
.pb-model { border-left-color: #EDB72D; } .pb-model summary::after { content: ""; } .pb-model > p { padding-left: var(--s-4); }
.pb-draft { margin: 0; padding: 10px 16px; background: #F6CF5C; text-align: center; font: 800 .85rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 700px) { .pb-terms, .pb-trio { grid-template-columns: 1fr; } .pb-check__q summary::after { display: none; } .pb-check__q > p { padding-left: var(--s-4); } }
.pb-trio li + li { margin-top: 0; }

/* "My take": Nagesh's own view inside a lesson, set apart from the sourced teaching. */
.pb-mine { position: relative; margin: var(--s-4) 0 0; padding: var(--s-4) var(--s-5) var(--s-4) var(--s-5); background: #FFFDF7 var(--paper-light) 0 0 / 512px; border-left: 5px solid var(--vermilion); border-radius: 0 8px 8px 0; box-shadow: 0 12px 22px -20px rgba(20, 47, 107, .6); font-size: 1.05rem; line-height: 1.6; }
.pb-mine__k { display: block; margin-bottom: 4px; font: 700 1.4rem/1 "Caveat", cursive; color: var(--vermilion-deep); }
/* Teaching diagrams in lessons (src/lesson-diagrams.mjs): inline SVG, cut-paper look, captioned. */
.pb-fig { margin: var(--s-5) 0; padding: var(--s-4) var(--s-4) var(--s-3); background: #FFFDF7 var(--paper-light) 0 0 / 512px; border-radius: 8px; box-shadow: 0 18px 30px -24px rgba(20, 47, 107, .65); }
.pb-fig .pbd { display: block; width: 100%; max-width: 660px; height: auto; margin: 0 auto; overflow: visible; }
.pb-fig figcaption { margin: var(--s-3) 0 0; font-size: .9rem; line-height: 1.5; color: var(--navy-soft); text-align: center; }
.pbd-t { font: 800 22px/1 var(--font-display); fill: #1C2E5A; }
.pbd-s { font: 500 17px/1 var(--font-body); fill: #3D4A6B; }
.pbd-h { font: 700 24px/1 "Caveat", cursive; fill: #C23A1F; }
.pbd-tag { font: 700 14px/1 var(--font-body); letter-spacing: .02em; }
@media (max-width: 700px) { .pb-fig { padding: var(--s-3) 6px var(--s-3); margin-left: -4px; margin-right: -4px; } }

/* Lesson header options (mock-ups, October 2026): the title on open sky at left, and on the right either the
   lesson's key idea drawn large (art) or a pinned paper "What's inside" card (toc); quick facts as chips. */
.pb-head__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.pb-head--art .pb-head__grid, .pb-head--toc .pb-head__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.pb-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.pb-chips li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 253, 247, .85); color: var(--navy); font: 700 .85rem/1.2 var(--font-body); box-shadow: 0 6px 12px -10px rgba(20, 47, 107, .7); }
.pb-chips li:first-child { background: #F6CF5C; }
.pb-head__art .pbd { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; overflow: visible; transform: rotate(-1.5deg); }
.pb-head__toc { position: relative; padding: var(--s-5) var(--s-5) var(--s-4); background: #FFFDF7 var(--paper-light) 0 0 / 512px; border-radius: 4px; box-shadow: 0 24px 34px -22px rgba(20, 47, 107, .75); transform: rotate(1.5deg); }
.pb-head__toc::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 24px; margin-left: -45px; background: rgba(246, 207, 92, .85); transform: rotate(-4deg); }
.pb-head__tock { margin: 0 0 var(--s-3); font: 700 1.6rem/1 "Caveat", cursive; color: var(--vermilion-deep); }
.pb-head__toc ol { margin: 0; padding-left: 1.4em; } .pb-head__toc li { padding: 5px 0; border-bottom: 1.5px dashed rgba(28, 46, 90, .2); font: 700 1rem/1.35 var(--font-display); }
.pb-head__toc li:last-child { border-bottom: 0; } .pb-head__toc li::marker { color: var(--vermilion-deep); font-family: var(--font-body); }
.pb-head__toc a { color: var(--navy); text-decoration: none; } .pb-head__toc a:hover { text-decoration: underline; text-decoration-color: var(--vermilion); }
.pb-head__toc a:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 2px; }
@media (max-width: 900px) { .pb-head--art .pb-head__grid, .pb-head--toc .pb-head__grid { grid-template-columns: minmax(0, 1fr); } .pb-head__art .pbd { max-width: 380px; } .pb-head__toc { transform: none; } }
.pb-head__art { position: relative; padding: var(--s-4); background: #FFFDF7 var(--paper-light) 0 0 / 512px; border-radius: 4px; box-shadow: 0 24px 34px -22px rgba(20, 47, 107, .75); transform: rotate(-1.5deg); }
.pb-head__art::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 24px; margin-left: -45px; background: rgba(246, 207, 92, .85); transform: rotate(3deg); z-index: 1; }
.pb-head__art .pbd { transform: none; }
@media (max-width: 900px) { .pb-head__art { transform: none; } }

/* Lesson warm-up row: the "Before you start" question with a box for the learner's sentence, beside the goals.
   The short answer moves into the recap, so it doesn't spoil the warm-up. */
.pb-start { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-4); align-items: stretch; margin: 0 0 var(--s-6); }
.pb-start .pb-hook, .pb-start .pb-learn { margin: 0; }
.pb-start .pb-learn { border-radius: 0 8px 8px 0; } .pb-start .pb-learn li { font-size: .97rem; }
.pb-guess__l { display: block; margin: var(--s-3) 0 6px; font: 800 .72rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #F6CF5C; }
.pb-guess { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 4px; background: #FFFDF7 repeating-linear-gradient(transparent 0 27px, rgba(33, 78, 173, .18) 27px 28px); color: #1C2E5A; font: 600 1.05rem/28px var(--font-body); resize: vertical; box-shadow: inset 0 2px 6px rgba(20, 47, 107, .2); }
.pb-guess:focus-visible { outline: 3px solid #F6CF5C; outline-offset: 2px; }
.pb-guess::placeholder { color: #7A86A3; }
.pb-guess__note { margin: 6px 0 0 !important; font-size: .82rem; opacity: .85; }
.pb-recap__you { margin: var(--s-3) 0; padding: var(--s-3) var(--s-4); border-radius: 4px; background: rgba(255, 253, 247, .14); border-left: 4px solid #F6CF5C; }
.pb-recap__k { margin: 0 0 4px !important; font: 800 .72rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #F6CF5C; }
.pb-recap__said { font-style: italic; }
.pb-answer--in { margin: var(--s-3) 0; color: #1C2E5A; box-shadow: 4px 4px 0 #F6CF5C; }
@media (max-width: 800px) { .pb-start { grid-template-columns: 1fr; } }
.closing__more { margin: var(--s-4) 0 0; color: #FFFDF7; font-size: .98rem; } .closing__more a { color: #F6CF5C; font-weight: 700; }
/* The prototypes photo reaches further left (the raised phone), so its words get a narrower column. */
@media (min-width: 861px) { .closing--say-hello-prototypes .closing__copy, .closing--say-hello-writing .closing__copy { max-width: 480px; } }
.hm-basics__all { margin: var(--s-5) 0 0; font-weight: 700; }
@media (max-width: 1000px) { .hm-basics .pb-cards { grid-template-columns: minmax(0, 1fr); } }

/* AI for product managers: course landing (Nagesh, October 2026). How-it-works strip, Start here card with the course map, worksheet card. */
.aic-how { list-style: none; margin: 0 0 var(--s-7); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.aic-how li { position: relative; padding: 18px 20px 20px 66px; background: var(--paper, #FFFDF7); border-radius: 6px; box-shadow: 0 6px 18px rgba(20, 47, 107, .08); }
.aic-how__n { position: absolute; left: 18px; top: 18px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--cobalt); color: #fff; font: 800 1rem/1 var(--font-body); }
.aic-how h3 { margin: 4px 0 6px; font: 700 1.15rem/1.25 var(--font-display); color: var(--navy); }
.aic-how p { margin: 0; color: var(--navy-soft); line-height: 1.55; }
.aic-start { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-6); align-items: center; margin: 0 0 var(--s-8); padding: var(--s-6); background: var(--paper, #FFFDF7); border-top: 6px solid var(--cobalt); border-radius: 6px; box-shadow: 0 10px 28px rgba(20, 47, 107, .1); }
.aic-start__copy { display: block; color: inherit; text-decoration: none; }
.aic-start__t { margin: 6px 0 10px; font: 800 clamp(1.8rem, 3.2vw, 2.6rem)/1.08 var(--font-display); color: var(--navy); }
.aic-start__t span { display: block; margin-bottom: 6px; font: 800 .8rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); }
.aic-start__s { margin: 0 0 12px; font-size: 1.12rem; line-height: 1.5; color: var(--navy); }
.aic-start__b { margin: 0 0 var(--s-5); color: var(--navy-soft); line-height: 1.6; }
.aic-start__copy:hover .aic-start__t, .aic-start__copy:focus-visible .aic-start__t { color: var(--cobalt); }
.aic-start__map { margin: 0; }
.aic-start__map figcaption { margin-top: 10px; font-size: .92rem; color: var(--navy-soft); text-align: center; }
.pb-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aic-kits { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6); align-items: start; margin-top: var(--s-8); padding: var(--s-6); background: var(--sky-soft, #E6F3FB); border-radius: 6px; border-top: 6px solid var(--mustard, #F6CF5C); }
.aic-kits__head .pb-part__lead { margin: 0; }
.aic-kits__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px var(--s-4); }
.aic-kits__list a { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; background: var(--paper, #FFFDF7); border-radius: 4px; color: var(--navy); font-weight: 600; line-height: 1.3; text-decoration: none; box-shadow: 0 3px 10px rgba(20, 47, 107, .07); }
.aic-kits__list a:hover, .aic-kits__list a:focus-visible { color: var(--cobalt); box-shadow: 0 5px 14px rgba(20, 47, 107, .14); }
.aic-kits__list span { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--cobalt); color: #fff; font: 800 .78rem/1 var(--font-body); }
@media (max-width: 1000px) { .aic-how { grid-template-columns: 1fr; } .aic-start { grid-template-columns: 1fr; } .aic-kits { grid-template-columns: 1fr; } .aic-kits__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pb-cards--2, .aic-kits__list { grid-template-columns: 1fr; } }

/* Course map: clickable on desktop; on phones a readable numbered list replaces it, and lesson 1 comes before the how-it-works strip. */
.aic-start__map .pbd-link { cursor: pointer; }
.aic-start__map .pbd-link:hover, .aic-start__map .pbd-link:focus-visible { filter: brightness(1.06); outline: none; }
.aic-start__map .pbd-link:focus-visible rect, .aic-start__map .pbd-link:focus-visible ellipse { stroke: var(--cobalt); stroke-width: 3; }
.aic-maplist { display: none; }
@media (max-width: 640px) {
  .aic > .wrap { display: flex; flex-direction: column; }
  .aic-start { order: -1; margin-bottom: var(--s-6); padding: var(--s-5); }
  .aic-how { margin-bottom: var(--s-6); }
  .aic-start__map .pbd { display: none; }
  .aic-maplist { display: grid; gap: 8px; list-style: none; margin: 0; padding: 4px 0 0; }
  .aic-maplist a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: var(--paper, #FFFDF7); border-radius: 4px; color: var(--navy); font: 700 1.02rem/1.3 var(--font-display); text-decoration: none; box-shadow: 0 3px 10px rgba(20, 47, 107, .08); }
  .aic-maplist li:first-child a { background: var(--vermilion); color: #fff; }
  .aic-maplist span { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cobalt); color: #fff; font: 800 .85rem/1 var(--font-body); }
  .aic-maplist li:first-child span { background: #fff; color: var(--vermilion-deep); }
}

/* Lesson endings without a photo (Nagesh, October 2026): words on the cobalt at the left, the next lesson's drawing on a pinned sheet at the right. */
.closing--art .closing__in { align-items: center; padding-block: var(--s-4) var(--s-6); }
.closing--art .closing__copy { max-width: 560px; padding-bottom: 0; }
.closing__fig { margin: 0; max-width: 560px; justify-self: end; width: 100%; }
.closing__fig figcaption { margin-top: 10px; font: 700 .95rem/1.3 var(--font-body); color: var(--navy); text-align: center; }
@media (max-width: 860px) { .closing__fig { justify-self: stretch; margin-top: var(--s-5); } }

/* Footer options (owner-only mock-ups, October 2026). Shared: the principle in cream Fraunces with "what matters." circled in red ink. */
.ft { padding: var(--s-8) 0 var(--s-5); }
.ft__principle { margin: 0; font: 900 clamp(1.8rem, 1.2rem + 2.2vw, 3rem)/1.08 var(--font-display); color: var(--paper); text-wrap: balance; }
.ft-mark { position: relative; display: inline-block; white-space: nowrap; padding: 0 .06em; margin-left: .1em; }
.ft-circle { max-width: none; position: absolute; left: -.24em; right: -.3em; top: -.22em; bottom: -.3em; width: calc(100% + .54em); height: calc(100% + .52em); pointer-events: none; overflow: visible; }
.ft__h { margin: 0 0 10px; font: 800 .74rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mustard, #F6CF5C); }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ft a { color: var(--paper); font-weight: 600; text-decoration-color: rgba(255, 253, 247, .35); text-underline-offset: 4px; }
.ft a:hover, .ft a:focus-visible { color: var(--mustard, #F6CF5C); }
.ft__base { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; justify-content: space-between; margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid rgba(255, 253, 247, .18); font-size: var(--fs-small); color: #CFC6B3; }
.ft__base p { margin: 0; }
.ft-top { font-weight: 700; text-decoration: none !important; }
.ft .copy { margin-left: 6px; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(255, 253, 247, .5); background: none; color: var(--paper); font: 700 .8rem/1.6 var(--font-body); cursor: pointer; }
/* A: principle and a short note on the left, three link columns on the right. */
.ft--a .ft__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-7); align-items: start; }
.ft--a .ft__note { margin: var(--s-4) 0 0; max-width: 44ch; color: #E8E0CE; font-size: 1.05rem; line-height: 1.55; }
.ft--a .ft__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); padding-top: 8px; }
/* B: principle and link columns on the left, a cream "write to me" card on the right. */
.ft--b .ft__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-7); align-items: center; }
.ft--b .ft__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); max-width: 560px; }
.ft__card { position: relative; padding: 26px 26px 22px; background: #FFFDF7 var(--paper-light) 0 0 / 512px; color: #1C2E5A; border-radius: 4px; transform: rotate(1.5deg); box-shadow: 0 24px 34px -22px rgba(0, 0, 0, .8); }
.ft__card::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 24px; margin-left: -45px; background: rgba(246, 207, 92, .85); transform: rotate(-3deg); }
.ft__card p { margin: 0; }
.ft__card-k { font: 400 1.5rem/1 'Caveat', var(--font-display); color: var(--vermilion-deep, #C23A1F); }
.ft__card-t { margin-top: 8px !important; font: 800 1.35rem/1.2 var(--font-display); padding-right: 54px; }
.ft__card-p { margin-top: 6px !important; color: #3D4C72; }
.ft__card a { color: #214EAD; }
.ft__card-mail { margin-top: 14px !important; font-size: 1.05rem; }
.ft__card-li { margin-top: 6px !important; }
.ft__stamp { position: absolute; top: 20px; right: 20px; width: 46px; height: 54px; display: grid; place-items: center; border: 2px dashed var(--vermilion); color: var(--vermilion); font: 900 1rem/1 var(--font-display); transform: rotate(4deg); }
/* C: compact, two rows: brand, principle, back to top; then the links and copyright. */
.ft--c { padding: var(--s-7) 0 var(--s-5); }
.ft--c .ft__row { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center; justify-content: space-between; }
.ft--c .ft__principle { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); flex: 1 1 420px; }
.ft--c .ft__brand { color: var(--paper); text-decoration: none; font: 900 1.25rem/1 var(--font-display); }
.ft--c .ft__row--links { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid rgba(255, 253, 247, .18); }
.ft__inline { display: flex !important; flex-wrap: wrap; gap: 8px var(--s-5) !important; }
.ft__small { margin: 0; font-size: var(--fs-small); color: #CFC6B3; }
@media (max-width: 860px) {
  .ft--a .ft__in, .ft--b .ft__in { grid-template-columns: 1fr; gap: var(--s-6); }
  .ft--a .ft__cols, .ft--b .ft__cols { grid-template-columns: 1fr 1fr; }
  .ft__card { transform: none; }
}
/* The options page: a strip of cobalt above each footer, as on a lesson page. */
.ft-demo__k { margin: 0; padding: var(--s-6) 0 var(--s-3); font: 800 .8rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); }
.ft-demo__band { height: 140px; background: #214EAD; }
.ft-demo__band + .site-footer { margin-top: 0; }

/* Footer colors (mock-ups): sky like the header, cream paper, or mustard, each with navy text and its own torn edge. */
.ft--sky { background: var(--sky) var(--paper-sky) 0 0 / 512px; }
.ft--sky::before { background-image: url('img/edge-sky.webp'); }
.ft--cream { background: var(--paper) var(--paper-light) 0 0 / 512px; }
.ft--cream::before { background-image: url('img/edge-cream.webp'); }
.ft--mustard { background: #F6CF5C var(--paper-light) 0 0 / 512px; background-blend-mode: multiply; }
.ft--mustard::before { background-image: url('img/edge-mustard.webp'); }
.ft--sky, .ft--cream, .ft--mustard { color: #1C2E5A; }
.ft--sky .ft__principle, .ft--cream .ft__principle, .ft--mustard .ft__principle { color: #1C2E5A; }
.ft--sky .ft__note, .ft--cream .ft__note, .ft--mustard .ft__note { color: #2D3D66; }
.ft--sky a, .ft--cream a, .ft--mustard a { color: #1C2E5A; text-decoration-color: rgba(28, 46, 90, .35); }
.ft--sky a:hover, .ft--cream a:hover, .ft--mustard a:hover { color: #C23A1F; }
.ft--sky .ft__h, .ft--cream .ft__h, .ft--mustard .ft__h { color: #6E1B0D; }
.ft--sky .ft__base, .ft--cream .ft__base, .ft--mustard .ft__base { color: #3D4C72; border-top-color: rgba(28, 46, 90, .2); }
.ft--sky .copy, .ft--cream .copy, .ft--mustard .copy { color: #1C2E5A; border-color: rgba(28, 46, 90, .45); }
.ft--sky :focus-visible, .ft--cream :focus-visible, .ft--mustard :focus-visible { outline-color: #1C2E5A; }

/* New footer colors (mock-ups): peach from the lesson drawings, vermilion, and a new deep teal. */
.ft--peach { background: #F7B99A var(--paper-light) 0 0 / 512px; background-blend-mode: multiply; color: #1C2E5A; }
.ft--peach::before { background-image: url('img/edge-peach.webp'); }
.ft--peach .ft__principle, .ft--peach a { color: #1C2E5A; } .ft--peach .ft__note { color: #2D3D66; } .ft--peach a { text-decoration-color: rgba(28, 46, 90, .35); }
.ft--peach .ft__h { color: #A8301A; } .ft--peach .ft__base { color: #3D4C72; border-top-color: rgba(28, 46, 90, .2); } .ft--peach .copy { color: #1C2E5A; border-color: rgba(28, 46, 90, .45); }
.ft--vermilion { background: #F04B2F var(--paper-light) 0 0 / 512px; background-blend-mode: multiply; color: #FFFDF7; }
.ft--vermilion::before { background-image: url('img/edge-vermilion.webp'); }
.ft--vermilion .ft-circle path { stroke: #F6CF5C; }
.ft--vermilion .ft__note, .ft--vermilion .ft__base { color: #FFE9DF; } .ft--vermilion .ft__h { color: #F6CF5C; }
.ft--vermilion .ft__base { border-top-color: rgba(255, 253, 247, .3); } .ft--vermilion a:hover { color: #1C2E5A; }
.ft--teal { background: #12575C var(--paper-light) 0 0 / 512px; background-blend-mode: multiply; color: #FFFDF7; }
.ft--teal::before { background-image: url('img/edge-teal.webp'); }
.ft--teal .ft__note, .ft--teal .ft__base { color: #D6E9E6; } .ft--teal .ft__h { color: #F6CF5C; }
.ft--teal .ft-circle path { stroke: #F7B99A; }


/* Course pages (Nagesh, October 2026): the lesson-style header with the course drawing, no photo. On phones the
   AI course map is replaced by the readable lesson list in the Start here card, so the header shows the words only. */
.pb-head--course { padding-block: calc(74px + var(--s-6)) var(--s-8); }
@media (max-width: 640px) { .pb-head--course .pb-head__art:has(#aic-hero-map-title) { display: none; } }

/* Panel review (October 2026): on phones, a scene opens with its tag and question, then the picture and notes. */
@media (max-width: 900px) {
  .sc, .sc--1, .sc--3 { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .sc__stage { margin-bottom: 12px; }
  .sc__body { display: contents; }
  .sc__tags { order: -2; margin: 0; } .sc__h { order: -1; margin-top: 0; }
  .sc__stage, .sc--1 .sc__stage, .sc--3 .sc__stage { order: 0; }
  .sc__q, .sc__dec, .sc__con, .sc__cost, .sc__ev, .sc__more { order: 1; max-width: 520px; }
  .sc__out { order: 2; max-width: 520px; } .sc__act { order: 3; }
}

/* Homepage film (Nagesh, October 2026): the band names the film, so the caption is only the music credit the license asks for. */
.vid__cap--credit .vid__note { font-size: .8rem; opacity: .85; }
/* Tighter join between Selected work and the film band (Nagesh, October 2026): less empty paper and sky between them. */
#selected-work.band { padding-bottom: var(--s-7); }
.home-film.band { padding-top: var(--s-7); padding-bottom: var(--s-8); }
.home-film .section-head { margin-bottom: var(--s-5); }
.home-film .section-head { max-width: none; } .home-film .section-head__lead { max-width: none; } .home-film .section-head .h { max-width: 860px; } /* one line on laptops, like a tagline; wraps naturally on phones */

/* Homepage How I decide: a link to the UX video on How I work, instead of a third video on the homepage (panel review, Nagesh, October 2026). */
.method-vlink { margin: var(--s-6) 0 0; font-size: 1.05rem; }

/* =====================================================================
   Product basics: the trail (Nagesh's pick, October 2026). A signpost per part and numbered stops along a
   dashed trail, each with the lesson's key drawing, title, one line, and minutes.
   ===================================================================== */
.ptrail { --c: var(--cobalt); }
.ptrail__part { position: relative; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; padding: 34px 0; border-top: 2px dashed rgba(27, 42, 85, .18); }
.ptrail__part--1 { --c: #E9B949; } .ptrail__part--2 { --c: #6FB7E0; }
.ptrail__sign { position: sticky; top: 100px; align-self: start; padding: 18px 18px 20px; background: var(--c); border-radius: 4px; box-shadow: 3px 4px 0 var(--ink); transform: rotate(-1.5deg); color: var(--navy, #1B2A55); }
.ptrail__part--0 .ptrail__sign { color: var(--paper); }
.ptrail__k { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6E1B0D; }
.ptrail__part--0 .ptrail__k { color: #F6CF5C; }
.ptrail__h { margin: 4px 0 8px; font: 900 1.7rem/1.05 var(--font-display); color: inherit; }
.ptrail__lead { margin: 0; font-size: .92rem; line-height: 1.45; }
.ptrail__row { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 22px; margin: 0; padding: 0; list-style: none; }
.ptrail__row::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; border-top: 3px dashed var(--c); opacity: .6; }
.ptrail__stop a { position: relative; display: flex; flex-direction: column; height: 100%; color: var(--navy, #1B2A55); text-decoration: none; }
.ptrail__disc { position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 50%; background: #FFFDF7; border: 2px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); font: 900 1.1rem/1 var(--font-display); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), background .3s, color .3s; }
.ptrail__art { display: block; padding: 8px; background: #FFFDF7; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 18px 28px -20px rgba(12, 22, 44, .6); transform: rotate(-1deg); transition: transform .35s; }
.ptrail__stop:nth-child(even) .ptrail__art { transform: rotate(1.2deg); }
.ptrail__art svg { display: block; width: 100%; height: auto; }
.ptrail__t { margin: 14px 0 4px; font: 800 1.18rem/1.2 var(--font-display); color: inherit; }
.ptrail__one { flex: 1; margin: 0 0 8px; font-size: .95rem; line-height: 1.45; color: var(--ink-soft); }
.ptrail__min { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.ptrail__min::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50%; box-sizing: border-box; background: linear-gradient(currentColor, currentColor) 50% 15% / 2px 40% no-repeat; }
.ptrail__stop a:hover .ptrail__art, .ptrail__stop a:focus-visible .ptrail__art { transform: rotate(0) translateY(-4px); }
.ptrail__stop a:hover .ptrail__disc, .ptrail__stop a:focus-visible .ptrail__disc { background: var(--vermilion); color: var(--paper); transform: scale(1.1); }
.ptrail__stop a:hover .ptrail__t, .ptrail__stop a:focus-visible .ptrail__t { text-decoration: underline; text-decoration-color: var(--vermilion); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 1100px) { .ptrail__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ptrail__part { grid-template-columns: 1fr; gap: 20px; }
  .ptrail__sign { position: static; }
  .ptrail__row { grid-template-columns: 1fr; gap: 18px; padding-left: 22px; }
  .ptrail__row::before { left: 20px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 3px dashed var(--c); }
  .ptrail__stop a { display: grid; grid-template-columns: 42px 112px minmax(0, 1fr); grid-template-areas: "d art t" "d art one" "d art min"; column-gap: 12px; margin-left: -21px; }
  .ptrail__disc { grid-area: d; margin: 0; } .ptrail__art { grid-area: art; align-self: start; }
  .ptrail__t { grid-area: t; margin: 0 0 4px; font-size: 1.05rem; } .ptrail__one { grid-area: one; font-size: .88rem; } .ptrail__min { grid-area: min; }
}
@media (prefers-reduced-motion: reduce) { .ptrail__disc, .ptrail__art { transition: none; } }

/* =====================================================================
   AI for product managers: nine questions (Nagesh's pick, October 2026). One card per lesson, led by its warm-up
   moment and question, grouped by part under a colored rule.
   ===================================================================== */
.aiq { margin-top: var(--s-6, 40px); }
.aiq__part { margin-top: 44px; }
.aiq__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 4px solid var(--c); }
.aiq__pk { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); }
.aiq__ph { margin: 0; font: 900 1.7rem/1.1 var(--font-display); color: var(--navy, #1B2A55); }
.aiq__pl { flex-basis: 100%; margin: 0; color: var(--ink-soft); }
.aiq__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.aiq__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aiq__grid--1 { grid-template-columns: minmax(0, 1fr); }
.aiq__c a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 22px 22px 20px; background: #FFFDF7; border-radius: 6px; border-left: 8px solid var(--c); color: var(--navy, #1B2A55); text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 24px 36px -28px rgba(12, 22, 44, .6); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.aiq__c a::before { content: "\201C"; position: absolute; top: 2px; right: 16px; font: 900 4.4rem/1 var(--font-display); color: var(--c); opacity: .75; }
.aiq__k { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--vermilion-deep); }
.aiq__sc { margin: 12px 0 10px; padding-right: 30px; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); }
.aiq__q { flex: 1; font: 800 1.18rem/1.3 var(--font-display); text-wrap: balance; }
.aiq__learn { display: block; margin-top: 16px; padding-top: 12px; border-top: 1.5px dashed rgba(27, 42, 85, .25); font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }
.aiq__learn b { display: block; margin-bottom: 2px; font: 800 1rem/1.25 var(--font-display); color: var(--navy, #1B2A55); }
.aiq__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 800; color: var(--cobalt); }
.aiq__c a:hover { transform: translateY(-4px); }
.aiq__c a:hover .aiq__go { text-decoration: underline; text-underline-offset: 3px; }
.aiq__grid--1 .aiq__c a { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "k learn" "sc learn" "q go"; column-gap: 44px; padding: 26px 28px; }
.aiq__grid--1 .aiq__k { grid-area: k; } .aiq__grid--1 .aiq__sc { grid-area: sc; } .aiq__grid--1 .aiq__q { grid-area: q; font-size: 1.35rem; }
.aiq__grid--1 .aiq__learn { grid-area: learn; align-self: center; margin: 0; padding: 0 0 0 28px; border-top: 0; border-left: 1.5px dashed rgba(27, 42, 85, .25); font-size: 1rem; }
.aiq__grid--1 .aiq__learn b { font-size: 1.3rem; }
.aiq__grid--1 .aiq__go { grid-area: go; align-self: end; padding-left: 28px; }
@media (max-width: 1000px) { .aiq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .aiq__grid, .aiq__grid--2 { grid-template-columns: 1fr; }
  .aiq__grid--1 .aiq__c a { display: flex; padding: 22px; }
  .aiq__grid--1 .aiq__learn { margin-top: 16px; padding: 12px 0 0; border-left: 0; border-top: 1.5px dashed rgba(27, 42, 85, .25); }
  .aiq__grid--1 .aiq__go { align-self: flex-start; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .aiq__c a { transition: none; } }

/* =====================================================================
   Calmer homepage (proposal, October 2026): About as words only (title left, words right), one line for the
   three lenses in How I decide, and the writing side notes as text cards.
   ===================================================================== */
.hm-about .about-intro__in:not(:has(.about-intro__vid)) { grid-template-columns: 1fr; }
.hm-about .about-intro__in:not(:has(.about-intro__vid)) .about-intro__text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: var(--s-7, 64px); align-items: start; }
.hm-about .about-intro__in:not(:has(.about-intro__vid)) .about-intro__text > .eyebrow { grid-column: 1; }
.hm-about .about-intro__in:not(:has(.about-intro__vid)) .about-intro__text > .section-title { grid-column: 1; grid-row: 2 / span 2; }
.hm-about .about-intro__in:not(:has(.about-intro__vid)) .about-intro__text > p:not(.eyebrow):not(.hm-about__links) { grid-column: 2; grid-row: 2; margin-top: 8px; font-size: 1.15rem; line-height: 1.65; }
.hm-about .about-intro__in:not(:has(.about-intro__vid)) .about-intro__text > .hm-about__links { grid-column: 2; grid-row: 3; }
@media (max-width: 900px) { .hm-about .about-intro__in:not(:has(.about-intro__vid)) .about-intro__text { display: block; } }
.method-lensline { margin: var(--s-6, 40px) 0 var(--s-7, 56px); padding: 18px 22px; border-left: 4px solid var(--vermilion); background: rgba(255, 253, 247, .7); font: 800 1.2rem/1.4 var(--font-display); color: var(--navy, #1B2A55); }
.method-lensline .textlink { margin-left: 8px; font: 700 1rem/1 var(--font-body); }
.wdesk--textside .wdesk__note .wdesk__link { padding: 22px 24px; }
.wdesk--textside .wdesk__side { justify-content: flex-start; align-self: start; }
.wdesk--textside .wdesk__note { flex: 0 0 auto; }
.wdesk__nsum { margin: 8px 0 12px; font-size: .98rem; line-height: 1.5; color: var(--ink-soft); }
/* Tighter decision cards (proposal, October 2026): the picture steps back, the words get the width. */
@media (min-width: 861px) {
  .scs--tight .section-head { margin-bottom: var(--s-7, 64px); }
  .scs--tight .sc { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: var(--s-6, 40px); margin-bottom: var(--s-8, 72px); padding: var(--s-6, 40px) var(--s-6, 40px) var(--s-5, 32px); }
  .scs--tight .sc--1, .scs--tight .sc--3 { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
  .scs--tight .sc__stage { padding-bottom: 54px; }
  .scs--tight .sc__art--order .ex__order { width: min(100%, 300px); }
  .scs--tight .sc__body { max-width: 640px; }
  .scs--tight .sc__num { top: -36px; font-size: clamp(3.2rem, 2.4rem + 2.4vw, 4.8rem); }
  .scs--tight .sc__h { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); margin-bottom: 10px; }
  .scs--tight .fk__n { transform-origin: center; scale: .9; }
}
/* Evidence-first homepage (proposal): outcome placeholders, the teaching strip */
.sc__out { margin: 0 0 14px; }
.sc__out-k { display: block; margin-bottom: 4px; font: 800 .7rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.method-lensline--after { margin: var(--s-6, 40px) 0 0; }
.hm-teach { padding-block: var(--s-8, 72px); }
.hm-teach__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7, 56px); align-items: center; }
.hm-teach__h { margin: 6px 0 10px; font: 900 clamp(2rem, 1.3rem + 2vw, 3rem)/1.05 var(--font-display); color: var(--navy, #1B2A55); }
.hm-teach__p { margin: 0; max-width: 46ch; font-size: 1.1rem; line-height: 1.6; color: var(--ink-soft); }
.hm-teach__links { display: grid; gap: 14px; }
.hm-teach__c { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 20px; background: #FFFDF7; border-radius: 6px; border-left: 8px solid var(--c, var(--cobalt)); color: var(--navy, #1B2A55); text-decoration: none; box-shadow: 0 20px 30px -24px rgba(12, 22, 44, .6); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.hm-teach__c--ai { --c: #F04B2F; }
.hm-teach__c--pay { --c: #B07A00; } /* the payments guide (November 2026): deep mustard, readable as an outlined number */
.hm-teach__all { margin: 16px 0 0; }
.hm-teach__c:hover { transform: translateX(6px); }
.hm-teach__n { font: 900 2.6rem/1 var(--font-display); color: transparent; -webkit-text-stroke: 1.6px var(--c, var(--cobalt)); }
.hm-teach__c b { display: block; font: 800 1.15rem/1.2 var(--font-display); }
.hm-teach__c span:not(.hm-teach__n) { font-size: .92rem; color: var(--ink-soft); }
@media (max-width: 860px) { .hm-teach__in { grid-template-columns: 1fr; gap: var(--s-5, 28px); } }
.sc__out--done { border: 0; border-left: 3px solid #F6CF5C; border-radius: 0; padding: 2px 0 2px 12px; font-weight: 700; line-height: 1.45; }
.sc--1 .sc__out--done, .sc--2 .sc__out--done { border-left-color: var(--vermilion); }

/* Panel review fixes (October 2026) */
.ft--mustard a:hover, .ft--mustard a:focus-visible { color: #1C2E5A; text-decoration-thickness: 3px; }
.vid__cap--credit .vid__note { opacity: 1; }
.sc__act .lock-note { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; opacity: .9; }
@media (min-width: 861px) { .scs--tight .sc--0 .sc__stage { padding-bottom: 104px; } }

/* Panel 2 review (October 2026). Selected work keeps no pink and no black: the order mockup's first row is sky,
   not pink. The "Illustrative concept" label sits on the mockup's top edge like a tab, not in a row of its own.
   Card 2's notes read the same way as the others: the easy path first, then my call. */
.sc__art--order { position: relative; }
.sc__art--order .ex__col--0 li { background: #D6E9F8; }
.sc__art--order figcaption { position: absolute; z-index: 2; top: -11px; left: 50%; order: 0; margin: 0; padding: 3px 10px; background: var(--navy); color: #F6CF5C; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; }
.sc--1 .fk__n--easy { order: 0; transform: rotate(-3deg) translateY(-6px); } .sc--1 .fk__n--call { transform: rotate(2.5deg); }
/* On phones the decision line sits right under the customer's question; the picture and notes follow. */
@media (max-width: 900px) {
  .sc__dec { order: -1; max-width: 520px; }
  .sc__art--order { margin-top: 14px; }
}

/* Homepage About and "I teach what I practice." as one open journal spread (Nagesh, October 2026). */
.spread__book { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: #FFFDF7; border-radius: 6px; box-shadow: 0 30px 50px -30px rgba(20, 47, 107, .6); background-image: repeating-linear-gradient(transparent 0 31px, rgba(28, 46, 90, .07) 31px 32px); }
.spread__page { padding: 56px 52px 48px; }
.spread__page--l { border-right: 1px solid rgba(28, 46, 90, .12); }
.spread__page .section-title { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); }
.spread__page p { line-height: 1.65; }
.spread__spine { position: absolute; top: 0; bottom: 0; left: 50%; width: 40px; margin-left: -20px; background: linear-gradient(90deg, transparent, rgba(28, 46, 90, .10) 45%, rgba(28, 46, 90, .16) 50%, rgba(28, 46, 90, .10) 55%, transparent); pointer-events: none; }
.spread__h { margin: 0 0 14px; font: 900 clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem)/1.08 var(--font-display); color: var(--ink); }
.spread__links { margin-top: 22px; }
@media (max-width: 900px) {
  .spread__book { grid-template-columns: 1fr; }
  .spread__page { padding: 36px 24px; } .spread__page--l { border-right: 0; border-bottom: 1px solid rgba(28, 46, 90, .12); }
  .spread__spine { display: none; }
}

/* ---------- Micro animations (Nagesh, October 2026) ----------
   Each plays once, when the reader reaches it ([data-draw] gains .is-drawn in journal.js), and only draws the eye to
   what matters most: in Selected work the easy path is struck out, then my call is circled, then the proof line is
   drawn. Notes settle, the lessons slide onto their page, his pull quote is highlighted, the footer circle is drawn.
   Only opacity, translate, rotate, background-size and stroke-dashoffset move. Without JavaScript, or with reduced
   motion, everything shows in its final state. */
.sc__out--done { --bar: #F6CF5C; } .sc--1 .sc__out--done, .sc--2 .sc__out--done { --bar: var(--vermilion); }
@media (prefers-reduced-motion: no-preference) {
  /* Selected work, in reading order: number, easy path (struck out), my call (circled), how we knew. */
  .js .sc .sc__num { transition: opacity .6s var(--ease) .2s, translate .7s var(--ease) .2s; }
  .js .sc.reveal:not(.is-in) .sc__num { opacity: 0; translate: 0 -12px; }
  .js .fk[data-draw] .fk__n { transition: opacity .45s var(--ease), translate .6s var(--ease); }
  .js .fk[data-draw]:not(.is-drawn) .fk__n--easy { opacity: 0; translate: 0 -16px; }
  .js .fk[data-draw] .fk__n--call { transition: opacity .4s var(--ease) .8s, translate .55s cubic-bezier(.34, 1.56, .64, 1) .8s; }
  .js .fk[data-draw]:not(.is-drawn) .fk__n--call { opacity: 0; translate: 0 14px; }
  .js .fk[data-draw] s.fk__t { display: inline; text-decoration: none; background: linear-gradient(var(--vermilion), var(--vermilion)) no-repeat 0 56% / 0% 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .55s cubic-bezier(.65, 0, .35, 1) .4s; }
  .js .fk[data-draw].is-drawn s.fk__t { background-size: 100% 3px; }
  .js .fk[data-draw] .fk__ring path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .75s cubic-bezier(.65, 0, .35, 1) 1.15s; }
  .js .fk[data-draw].is-drawn .fk__ring path { stroke-dashoffset: 0; }
  .js .sc__out[data-draw] { border-left-color: transparent; background: linear-gradient(var(--bar), var(--bar)) no-repeat 0 0 / 3px 0%; transition: opacity .5s var(--ease), translate .6s var(--ease), background-size .6s cubic-bezier(.65, 0, .35, 1) .25s; }
  .js .sc__out[data-draw]:not(.is-drawn) { opacity: 0; translate: 0 8px; }
  .js .sc__out[data-draw].is-drawn { background-size: 3px 100%; }

  /* How I decide: the tabs slide in one by one, the photo settles, the "At work" note drops onto the page. */
  .js .fnote[data-draw] .fnote__tab { transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), filter .3s, opacity .45s var(--ease) var(--d, 0s), translate .6s var(--ease) var(--d, 0s); }
  .js .fnote[data-draw] .fnote__tab:nth-child(1) { --d: .35s; } .js .fnote[data-draw] .fnote__tab:nth-child(2) { --d: .43s; } .js .fnote[data-draw] .fnote__tab:nth-child(3) { --d: .51s; }
  .js .fnote[data-draw] .fnote__tab:nth-child(4) { --d: .59s; } .js .fnote[data-draw] .fnote__tab:nth-child(5) { --d: .67s; }
  .js .fnote[data-draw]:not(.is-drawn) .fnote__tab { opacity: 0; translate: 20px 0; }
  .js .fnote[data-draw] .fnote__fig { transition: opacity .6s var(--ease) .4s, rotate .9s cubic-bezier(.34, 1.4, .64, 1) .4s; }
  .js .fnote[data-draw]:not(.is-drawn) .fnote__fig { opacity: 0; rotate: -5deg; }
  .js .fnote[data-draw] .fnote__note { transition: opacity .45s var(--ease) .9s, translate .6s cubic-bezier(.34, 1.4, .64, 1) .9s; }
  .js .fnote[data-draw]:not(.is-drawn) .fnote__note { opacity: 0; translate: 0 -18px; }
  .js .method-lensline[data-draw] { border-left-color: transparent; background-image: linear-gradient(var(--vermilion), var(--vermilion)); background-repeat: no-repeat; background-position: 0 0; background-size: 4px 0%; transition: opacity .7s var(--ease), transform .7s var(--ease), background-size .6s cubic-bezier(.65, 0, .35, 1) .3s; }
  .js .method-lensline[data-draw].is-drawn { background-size: 4px 100%; }

  /* About and teaching spread: the two pages open out from the spine, then the lessons slide onto the page. */
  .js .spread__book[data-draw] .spread__page { transition: opacity .7s var(--ease) .3s, translate .8s var(--ease) .3s; }
  .js .spread__book[data-draw]:not(.is-drawn) .spread__page--l { opacity: 0; translate: 18px 0; }
  .js .spread__book[data-draw]:not(.is-drawn) .spread__page--r { opacity: 0; translate: -18px 0; }
  .js .spread__book[data-draw] .hm-teach__c { transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), opacity .5s var(--ease) var(--d, .85s), translate .7s cubic-bezier(.34, 1.3, .64, 1) var(--d, .85s); }
  .js .spread__book[data-draw] .hm-teach__c--ai { --d: 1s; }
  .js .spread__book[data-draw] .hm-teach__c--pay { --d: 1.15s; }
  .js .spread__book[data-draw]:not(.is-drawn) .hm-teach__c { opacity: 0; translate: -22px 0; }

  /* Writing: his pull quote gets a highlighter stroke; the two notes land one after the other. */
  .js .wdesk__pull[data-draw] .wdesk__mark { background: linear-gradient(rgba(246, 207, 92, .65), rgba(246, 207, 92, .65)) no-repeat 0 88% / 0% 42%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .9s cubic-bezier(.65, 0, .35, 1) .6s; }
  .js .wdesk__pull[data-draw].is-drawn .wdesk__mark { background-size: 100% 42%; }
  .js .wdesk__side[data-draw] .wdesk__note { transition: transform .35s cubic-bezier(.22, .61, .36, 1), opacity .6s var(--ease) var(--d, .1s), translate .7s var(--ease) var(--d, .1s); }
  .js .wdesk__side[data-draw] .wdesk__note:nth-child(2) { --d: .28s; }
  .js .wdesk__side[data-draw]:not(.is-drawn) .wdesk__note { opacity: 0; translate: 0 22px; }

  /* Footer, every page: the circle around "what matters." is drawn. */
  .js .ft-mark[data-draw] .ft-circle path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.65, 0, .35, 1) .2s; }
  .js .ft-mark[data-draw].is-drawn .ft-circle path { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
  .js .fnote[data-draw]:not(.is-drawn) .fnote__tab { translate: 0 14px; }
  .js .spread__book[data-draw]:not(.is-drawn) .spread__page--l, .js .spread__book[data-draw]:not(.is-drawn) .spread__page--r { translate: 0 16px; }
}

/* Scroll-driven notebook (homepage, Nagesh, October 2026). journal.js wraps the cobalt panel in .fnote-track,
   gives the track the scroll length of five steps, and keeps the panel sticky in the middle of the screen while
   the pages turn. --pf is the scroll position within the current step (-0.5 to 0.5); --pp is the whole run (0 to 1). */
.fnote-track.is-on .practice { position: sticky; z-index: 1; }
.fnote-track.is-tight .practice { padding-block: 16px; }
.fnote.is-measuring .fnote__sp.is-on { animation: none; }
.fnote[data-dir="back"] .fnote__sp.is-on { animation-name: fnoteBack; }
@keyframes fnoteBack { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.fnote__hint { display: none; }
.fnote-track.is-on .fnote__tabs { position: relative; }
.fnote-track.is-on .fnote__tabs::before { content: ""; position: absolute; top: 0; bottom: 0; right: -26px; width: 4px; border-radius: 2px; background: rgba(255, 253, 247, .22); }
.fnote-track.is-on .fnote__tabs::after { content: ""; position: absolute; top: 0; right: -26px; width: 4px; height: calc(var(--pp, 0) * 100%); border-radius: 2px; background: #F6CF5C; }
.fnote-track.is-on .fnote__hint { display: block; margin: 6px 0 0; padding-left: 12px; font: 700 1.2rem/1.1 "Caveat", cursive; color: rgba(255, 253, 247, .85); transition: opacity .4s; }
.fnote-track.is-on .fnote__hint::after { content: " \2193"; }
.fnote-track.is-on .fnote.is-moving .fnote__hint { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fnote-track.is-on .fnote__n, .fnote-track.is-on .fnote__fig, .fnote-track.is-on .fnote__note { position: relative; }
  .fnote-track.is-on .fnote__n { top: calc(var(--pf, 0) * -48px); }
  .fnote-track.is-on .fnote__fig { top: calc(var(--pf, 0) * -36px); }
  .fnote-track.is-on .fnote__note { top: calc(var(--pf, 0) * 24px); }
}

/* ---------- Senior pass on Selected work (owner preview, November 2026) ----------
   One signal across the site: the red dot marks the call. The journey map shows where each call sits
   (scope, not a feature list); each card names what its call cost (owning the tradeoff). */
.call-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--vermilion); vertical-align: .08em; }
.jmap { position: relative; margin: 0 0 var(--s-7, 56px); padding: 18px 0 4px; }
.jmap__k { margin: 0 0 18px; font: 800 .72rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.jmap__row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
/* The line runs from the first call to the last, through the middle of each red dot. */
.jmap__track { position: relative; }
.jmap__line { position: absolute; left: calc(100% / 6); top: 7px; width: calc(100% * 2 / 3); height: 20px; overflow: visible; }
.jmap__line path { fill: none; stroke: var(--navy, #1D2A48); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .55; }
.jmap__st { display: flex; justify-content: center; }
.jmap__pin { display: grid; justify-items: center; gap: 6px; min-width: 44px; padding: 6px 10px; color: var(--ink); text-decoration: none; border-radius: 12px; }
.jmap__pin .call-dot { width: 22px; height: 22px; margin: 0; box-shadow: 0 0 0 5px var(--paper, #FBF6EA), 0 3px 8px rgba(12, 22, 44, .22); transition: transform var(--t-fast, .2s) var(--ease); }
.jmap__q { max-width: 22ch; font-size: .88rem; line-height: 1.35; text-align: center; color: var(--ink-soft); }
.sc__h { scroll-margin-top: 110px; }
.jmap__s { font: 700 clamp(1rem, .9rem + .3vw, 1.15rem)/1.2 var(--font-display); }
.jmap__pin:hover .call-dot, .jmap__pin:focus-visible .call-dot { transform: scale(1.18); }
.jmap__pin:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.sc__cost { margin: 0 0 14px; padding-left: 14px; border-left: 3px dashed currentColor; max-width: 520px; }
.sc__cost .sc__out-k { opacity: .8; }
/* Placeholder for his own words: quiet, never published (the senior pass ships only when all three are real). */
.ph { font-style: italic; opacity: .85; }
@media (max-width: 600px) {
  .jmap__pin { padding: 6px 4px; }
  .jmap__s { font-size: .95rem; text-align: center; }
  .jmap__q { font-size: .78rem; }
}
@media (prefers-reduced-motion: no-preference) {
  /* The map draws left to right like a pen line, then each call drops onto it in journey order. */
  .js .jmap[data-draw] .jmap__line path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.65, 0, .35, 1) .1s; }
  .js .jmap[data-draw].is-drawn .jmap__line path { stroke-dashoffset: 0; }
  .js .jmap[data-draw] .jmap__pin { transition: opacity .45s var(--ease) calc(.35s + var(--j) * .25s), translate .55s cubic-bezier(.34, 1.56, .64, 1) calc(.35s + var(--j) * .25s); }
  .js .jmap[data-draw]:not(.is-drawn) .jmap__pin { opacity: 0; translate: 0 -10px; }
}

/* Essays: numbered source notes. */
.sources ol { margin: 0 0 var(--s-4, 20px); padding-left: 1.3rem; }
.sources ol li { margin-bottom: 8px; }

/* ---------- Essay figures (Before you commit to more because of AI, November 2026) ----------
   Few, useful figures on paper cards: a comparison table, a queue model with labeled assumptions, and the
   evidence taxonomy. Keyboard friendly, nothing hover-only, final state shown with reduced motion. */
.fict-k { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px; background: #F2C94C; font: 800 .7rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--navy, #1D2A48); }
.ev { margin: var(--s-6, 40px) 0; padding: 22px 24px 18px; background: #FBF6EA; border-radius: 6px; box-shadow: 0 10px 24px rgba(12, 22, 44, .1), 0 1px 0 rgba(12, 22, 44, .06); }
.ev figcaption { margin-top: 12px; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }
.ev__k { margin: 0 0 14px; font: 800 .72rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); }
/* where AI shortens the work */
.wk { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.4; }
.wk th, .wk td { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; border-top: 1px solid rgba(29, 42, 72, .14); }
.wk thead th { padding-top: 0; border-top: 0; font: 800 .7rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #4A5672; }
.wk tbody th { font-family: var(--font-display); font-weight: 800; color: var(--navy, #1D2A48); width: 22%; }
.wk tbody tr:nth-child(2) th { color: var(--vermilion-deep); }
/* steps */
.prose ol.steps { margin: 0 0 var(--s-5, 28px); padding: 0; list-style: none; counter-reset: st; display: grid; gap: 12px; }
.prose ol.steps li { counter-increment: st; position: relative; margin: 0; padding: 4px 0 4px 46px; line-height: 1.55; }
.prose ol.steps li::before { content: counter(st); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--vermilion); color: #fff; font: 800 .95rem var(--font-body); }
/* forecast cards */
.prose .fc { margin: 0 0 18px; padding: 18px 22px 8px; background: #FBF6EA; border-left: 5px solid var(--cobalt, #214EAD); border-radius: 4px; box-shadow: 0 6px 16px rgba(12, 22, 44, .08); }
.prose .fc h3 { margin: 0 0 10px; font-size: 1.25rem; }
.prose .fc p { margin: 0 0 10px; }
.prose .fc p b { font-family: var(--font-body); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); margin-right: 4px; }
/* the queue model */
.fl__ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-bottom: 18px; }
.fl__ctl label { display: grid; gap: 6px; font-weight: 700; font-size: .95rem; }
.fl__ctl output { font: 900 1.4rem/1 var(--font-display); color: var(--vermilion-deep); }
.fl__ctl input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--vermilion); }
.fl__wip { grid-column: 1 / -1; display: flex !important; align-items: center; gap: 10px; }
.fl__wip input { width: 22px; height: 22px; accent-color: var(--navy, #1D2A48); }
.fl__lanes { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px; }
.fl__lane { min-height: 140px; padding: 10px; border-radius: 6px; background: #EFE6D2; }
.fl__lane p { margin: 0 0 8px; font: 800 .7rem/1.25 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #4A5672; }
.fl__lane--rev { background: #F8E3A3; transition: box-shadow .3s; }
.ev--flow.is-jam .fl__lane--rev { box-shadow: inset 0 0 0 3px var(--vermilion); }
.fl__cards { display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; }
.fl__cards .c { width: 22px; height: 15px; border-radius: 3px; background: #FBF6EA; box-shadow: 0 2px 4px rgba(12, 22, 44, .2); }
.fl__cards .c--back { background: transparent; outline: 1.5px dashed #4A5672; box-shadow: none; }
.fl__cards .c--wait { outline: 1.5px solid var(--vermilion); }
.fl__cards .c--done { background: var(--navy, #1D2A48); }
.fl__cards b { font: 800 .85rem/15px var(--font-body); color: var(--vermilion-deep); }
.fl__sum { margin: 14px 0 0; }
/* observations, hypotheses, proposed solutions */
.so__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.so__h { margin: 0 0 10px; padding-bottom: 6px; border-bottom: 3px solid; font: 800 .78rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--navy, #1D2A48); }
.so__h--obs { border-color: #8EC9EC; } .so__h--hyp { border-color: #F2C94C; } .so__h--sol { border-color: var(--vermilion); }
.prose .so__n { margin: 0 0 10px; padding: 12px 14px; border-radius: 4px; font-size: .95rem; line-height: 1.4; box-shadow: 0 4px 10px rgba(12, 22, 44, .1); }
.so__n--obs { background: #CFE8F7; } .so__n--hyp { background: #F8E3A3; } .so__n--sol { background: #FBF6EA; outline: 2px solid rgba(240, 75, 47, .55); outline-offset: -2px; }
.so__src { display: block; margin-top: 8px; font: 700 1.05rem/1.1 "Caveat", cursive; color: var(--vermilion-deep); }
/* practices as three cards */
.prose ul.fw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0; list-style: none; }
.prose ul.fw li { margin: 0; padding: 14px 16px; background: #FBF6EA; border-top: 4px solid #F2C94C; border-radius: 4px; box-shadow: 0 6px 14px rgba(12, 22, 44, .08); line-height: 1.5; font-size: .97rem; }
.prose ul.fw li strong { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 1.15rem; }
@media (max-width: 760px) {
  .ev { padding: 18px 16px 14px; margin-inline: -4px; }
  .so__cols, .prose ul.fw, .fl__ctl, .fl__lanes { grid-template-columns: 1fr; }
  .fl__lane { min-height: 0; }
  .wk thead { display: none; } .wk, .wk tbody, .wk tr, .wk th, .wk td { display: block; width: auto; }
  .wk tr { padding: 12px 0; border-top: 1px solid rgba(29, 42, 72, .14); } .wk th, .wk td { border: 0; padding: 2px 0; } .wk tbody th { width: auto; margin-bottom: 6px; font-size: 1.05rem; }
  .wk td::before { content: attr(data-k); display: block; font: 800 .66rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #4A5672; }
}

/* Agile in 2027 (November 2026): footnote markers, the illustrated-constraint pair, the CX steps. */
.prose sup.fn { font-size: .68em; line-height: 0; margin-left: 1px; }
.prose sup.fn a { padding: 0 2px; font-weight: 700; color: var(--vermilion-deep); text-decoration: none; }
.prose sup.fn a:hover, .prose sup.fn a:focus-visible { text-decoration: underline; }
.sources .fn-back { margin-left: 4px; text-decoration: none; font-weight: 700; color: var(--vermilion-deep); }
.sources li:target { background: rgba(242, 201, 76, .35); border-radius: 4px; }
.prose [id^="ref-"], .sources [id^="src-"] { scroll-margin-top: 110px; }
.prose .watch { margin: var(--s-4, 20px) 0 var(--s-6, 40px); padding: 6px 0 6px 16px; border-left: 3px solid #F2C94C; }
.ev-pair { margin: var(--s-6, 40px) 0; padding: 20px 22px 6px; border-radius: 8px; background: rgba(239, 230, 210, .6); outline: 1.5px dashed rgba(29, 42, 72, .25); outline-offset: -1.5px; }
.ev-pair__k { margin: 0 0 4px; font: 800 .72rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--vermilion-deep); }
.prose .ev-pair__intro { margin: 0 0 16px; font-size: .95rem; color: var(--ink-soft); }
.ev-pair .essay-film { margin: 0 0 6px; }
.ev-pair .ev { margin: 18px 0 16px; }
.prose ol.steps--cx li { padding-top: 6px; }
@media (max-width: 760px) { .ev-pair { padding: 16px 12px 4px; margin-inline: -6px; } }

/* Essay header without a photo (November 2026): the illustration sits beside the title as a pinned
   sheet on wide screens, so the article starts about as high as on the photo-hero essays. */
.article-head--side { padding-bottom: var(--s-6, 40px); }
.article-head--side .article-head__in { margin-bottom: 0; }
@media (min-width: 1000px) {
  .article-head__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: center; }
  .article-head--side .article-head__art { transform: rotate(1.5deg); margin: 0; }
  .article-head--side .headline--lg { font-size: clamp(2.4rem, 1.4rem + 2.2vw, 3.6rem); }
}
@media (max-width: 999px) { .article-head--side .article-head__art { margin-top: var(--s-6, 40px); } }

/* Agile in 2027 (November 2026): the three timelines as paper slips (colors match the header art: cobalt
   execution, mustard coordination, sky customer learning), the 2027 signs, the dated note, and anchor
   aliases that keep older links to renamed sections working. */
.prose ul.tri { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: 12px; }
.prose ul.tri li { margin: 0; padding: 14px 18px 14px 20px; background: #FBF6EA; border-left: 8px solid var(--cobalt); border-radius: 4px; box-shadow: 0 6px 14px rgba(12, 22, 44, .08); }
.prose ul.tri li.tri__i--coord { border-left-color: var(--mustard); }
.prose ul.tri li.tri__i--learn { border-left-color: var(--sky-deep); }
.prose ul.signs li { margin-bottom: var(--s-3); }
.prose .essay-dated { margin-top: var(--s-6); font-size: 1rem; font-style: italic; color: var(--ink-soft); }
.prose h2[id], .anchor-alias { scroll-margin-top: 110px; }
.anchor-alias { display: block; height: 0; overflow: hidden; }

/* Writing shelf (homepage, November 2026, approved by Nagesh): the featured essay large, every other piece beside it as a
   compact taped row with its cover, then the press interview as a clipping. Phones stack: feature, rows
   (cover at left), clipping. */
.wshelf__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s-6); align-items: stretch; margin-top: var(--s-5); }
.wshelf__side { display: flex; flex-direction: column; }
.wshelf__k { margin: 0 0 14px; font: 700 1.5rem/1 "Caveat", cursive; color: var(--ink); }
.wshelf__k span { margin-left: 8px; font: 800 .72rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--vermilion-deep); vertical-align: middle; }
.wshelf__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; flex: 1; }
.wshelf__row { flex: 1 1 auto; display: flex; }
.wshelf__row { position: relative; background: #FFFDF7 var(--paper-light) 0 0 / 512px; border-radius: 3px; box-shadow: 0 2px 3px rgba(23, 23, 23, .14), 0 22px 36px -24px rgba(12, 22, 44, .5); transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
.wshelf__row:nth-child(odd) { transform: rotate(.5deg); }
.wshelf__row:nth-child(even) { transform: rotate(-.5deg); }
.wshelf__row::before { content: ""; position: absolute; z-index: 2; top: -8px; left: 22px; width: 58px; height: 16px; background: rgba(143, 205, 234, .9) var(--grain) 0 0 / 120px; transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.wshelf__row:nth-child(even)::before { background-color: rgba(246, 207, 92, .9); left: auto; right: 22px; transform: rotate(3deg); }
.wshelf__row:hover, .wshelf__row:focus-within { transform: rotate(0) translateY(-3px); }
.wshelf__link { flex: 1; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: stretch; padding: 10px 18px 10px 10px; color: inherit; text-decoration: none; }
.wshelf__thumb { margin: 0; }
.wshelf__thumb { display: flex; }
.wshelf__thumb img { display: block; width: 150px; height: 100%; min-height: 108px; object-fit: cover; object-position: right center; border-radius: 2px; }
.wshelf__txt { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; padding: 4px 0; }
.wshelf__meta { font: 800 .7rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--vermilion-deep); }
.wshelf__t { font: 700 1.1rem/1.25 "Literata", Georgia, serif; color: var(--ink); text-wrap: pretty; }
.wshelf__sum { font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }
.wshelf__link:focus-visible, .wshelf__plink:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 3px; }
.wshelf__link:hover .wshelf__t, .wshelf__link:focus-visible .wshelf__t { text-decoration: underline; text-decoration-color: var(--vermilion); text-underline-offset: 3px; }
.wshelf__press { position: relative; margin-top: var(--s-6); background: #F4F0E6 var(--grain) 0 0 / 160px; background-blend-mode: multiply; border-radius: 2px; box-shadow: 0 2px 3px rgba(23, 23, 23, .12), 0 22px 36px -26px rgba(12, 22, 44, .5); transform: rotate(-.4deg); }
.wshelf__press::after { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 3px; background: var(--ink); }
.wshelf__plink { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; gap: 8px 28px; align-items: center; padding: 26px 28px 22px; color: inherit; text-decoration: none; }
.wshelf__pk { grid-column: 1 / -1; font: 800 .72rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--vermilion-deep); }
.wshelf__pt { font: 900 1.3rem/1.2 var(--font-display); }
.wshelf__pq { font: italic 400 1.02rem/1.5 "Literata", Georgia, serif; color: var(--ink-soft); }
.wshelf__all { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: var(--s-6) 0 0; }
@media (max-width: 960px) {
  .wshelf__grid { grid-template-columns: 1fr; }
  .wshelf__row { flex: 0 0 auto; }
  .wshelf__plink { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .wshelf__link { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .wshelf__thumb img { width: 96px; min-height: 0; height: 84px; }
}
@media (prefers-reduced-motion: reduce) { .wshelf__row, .wshelf__row:hover, .wshelf__row:focus-within { transition: none; } }
.ev--art { padding: 12px 12px 14px; }
.ev--art img { display: block; width: 100%; height: auto; border-radius: 4px; }
.ev--art figcaption { margin: 10px 6px 0; }

/* Learn (November 2026): one page for every course and field guide. Course-style header with a pinned
   "What's here" sheet, then one taped paper card per course or guide with its own drawing. */
.learn-toc__n { display: block; margin-top: 2px; font: 600 .82rem/1.35 var(--font-body); color: var(--ink-soft); }
.learn__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); align-items: stretch; }
.learn-card { position: relative; display: flex; flex-direction: column; background: #FFFDF7 var(--paper-light) 0 0 / 512px; border-radius: 4px; box-shadow: 0 2px 3px rgba(23, 23, 23, .12), 0 26px 40px -26px rgba(12, 22, 44, .55); scroll-margin-top: 110px; }
.learn-card:nth-child(1) { transform: rotate(-.5deg); } .learn-card:nth-child(2) { transform: rotate(.4deg); } .learn-card:nth-child(3) { transform: rotate(-.3deg); }
.learn-card::before { content: ""; position: absolute; z-index: 2; top: -11px; left: 50%; width: 90px; height: 22px; margin-left: -45px; background: rgba(240, 165, 193, .9) var(--grain) 0 0 / 120px; transform: rotate(-3deg); }
.learn-card:nth-child(2)::before { background-color: rgba(143, 205, 234, .9); transform: rotate(2deg); }
.learn-card:nth-child(3)::before { background-color: rgba(246, 207, 92, .9); }
.learn-card__art { padding: 18px 18px 0; min-height: 0; }
.learn-card__art svg { display: block; width: 100%; height: auto; }
.learn-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 24px; flex: 1; }
.learn-card__k { margin: 0; font: 800 .74rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--vermilion-deep); }
.learn-card__t { margin: 0; font: 900 1.6rem/1.1 var(--font-display); }
.learn-card__s { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.learn-card__go { margin: auto 0 0; padding-top: 10px; }
.learn-receipt { margin: 6px 4px 0; padding: 16px 18px 12px; background: #F4F0E6 var(--grain) 0 0 / 160px; border-top: 2px dashed rgba(28, 46, 90, .3); border-bottom: 2px dashed rgba(28, 46, 90, .3); }
.learn-receipt__k { margin: 0 0 8px; font: 700 1.4rem/1 "Caveat", cursive; color: var(--vermilion-deep); }
.learn-receipt__r { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 0; border-bottom: 1.5px dashed rgba(28, 46, 90, .2); font: 600 .95rem/1.2 var(--font-body); }
.learn-receipt__r:last-child { border-bottom: 0; }
.learn-receipt__r b { font: 900 1.05rem/1.2 var(--font-display); color: var(--navy); }
@media (max-width: 1000px) { .learn__grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; } }

/* Field guides (November 2026): the guide's own styles are scoped under .cg in content/guides/; this places
   it in the site's page. The "In this guide" sheet holds fourteen entries, so it runs in two columns. */
.guide-toc ol { columns: 2; column-gap: 28px; }
.guide-toc li { break-inside: avoid; font-size: .95rem; }
@media (max-width: 560px) { .guide-toc ol { columns: 1; } }
.guide-band { padding-top: var(--s-6); }

/* Teaching section options (owner preview, November 2026). A: course covers, B: syllabus. */
.tcov { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tcov__i { position: relative; background: #FFFDF7 var(--paper-light) 0 0 / 512px; border-radius: 4px; box-shadow: 0 2px 3px rgba(23, 23, 23, .12), 0 22px 30px -22px rgba(12, 22, 44, .55); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.tcov__i:nth-child(1) { transform: rotate(-1.2deg); } .tcov__i:nth-child(2) { transform: rotate(.9deg) translateY(6px); } .tcov__i:nth-child(3) { transform: rotate(-.6deg); }
.tcov__i::before { content: ""; position: absolute; z-index: 2; top: -9px; left: 50%; width: 64px; height: 18px; margin-left: -32px; background: rgba(240, 165, 193, .9) var(--grain) 0 0 / 120px; transform: rotate(-3deg); }
.tcov__i--ai::before { background-color: rgba(143, 205, 234, .9); } .tcov__i--pay::before { background-color: rgba(246, 207, 92, .9); }
.tcov__i:hover, .tcov__i:focus-within { transform: rotate(0) translateY(-4px); }
.tcov__a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.tcov__a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.tcov__art { display: block; padding: 12px 12px 0; } .tcov__art svg { display: block; width: 100%; height: auto; }
.tcov__art .learn-receipt { margin: 4px 0 0; padding: 10px 12px 6px; } .tcov__art .learn-receipt__k { font-size: 1.1rem; margin-bottom: 4px; }
.tcov__art .learn-receipt__r { padding: 5px 0; font-size: .78rem; } .tcov__art .learn-receipt__r b { font-size: .85rem; }
.tcov__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 16px; margin-top: auto; }
.tcov__k { font: 800 .68rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--vermilion-deep); }
.tcov__t { font: 900 1.12rem/1.15 var(--font-display); color: var(--ink); }
.tsyl { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 4px; }
.tsyl__i { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 14px 0 16px; border-bottom: 1.5px dashed rgba(28, 46, 90, .18); }
.tsyl__i:last-child { border-bottom: 0; }
.tsyl__n { font: 900 2.6rem/1 var(--font-display); color: transparent; -webkit-text-stroke: 1.6px var(--c, var(--cobalt)); padding-top: 4px; }
.tsyl__i--ai { --c: #F04B2F; } .tsyl__i--pay { --c: #B07A00; }
.tsyl__k { margin: 0; font: 800 .7rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--vermilion-deep); }
.tsyl__t { margin: 4px 0 2px; font: 900 1.3rem/1.15 var(--font-display); } .tsyl__t a { color: var(--ink); text-decoration: none; } .tsyl__t a:hover { text-decoration: underline; text-decoration-color: var(--vermilion); }
.tsyl__s { margin: 0; font-size: .95rem; color: var(--ink-soft); line-height: 1.5; }
.tsyl__go { margin: 8px 0 0; }
.tsyl__start { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border: 2px solid var(--ink); border-radius: 6px; background: var(--c, var(--cobalt)); color: #fff; font: 700 .88rem/1.2 var(--font-body); text-decoration: none; box-shadow: 3px 3px 0 var(--ink); }
.tsyl__i--pay .tsyl__start { color: #fff; } .tsyl__start:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.tsyl__start svg { width: 14px; height: 14px; }
@media (max-width: 1100px) and (min-width: 861px) { .tcov { grid-template-columns: minmax(0, 1fr); } .tcov__a { flex-direction: row; align-items: center; } .tcov__art { width: 42%; padding: 10px; } }
@media (max-width: 560px) { .tcov { grid-template-columns: minmax(0, 1fr); } .tcov__a { flex-direction: row; align-items: center; } .tcov__art { width: 46%; flex: none; padding: 10px; } .tcov__body { margin-top: 0; } .tsyl__i { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; } .tsyl__n { font-size: 2rem; } }
.tsyl__i--ai .tsyl__start, .tsyl__i--pay .tsyl__start { color: var(--ink); } .tsyl__i--pay .tsyl__start { background: #F6CF5C; }
/* A, tuned: every cover gets the same drawing area, and the receipt stacks so it fits a narrow cover. */
.tcov { align-items: start; }
.tcov__art { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 12px; overflow: hidden; }
.tcov__art svg { max-height: 100%; }
.tcov__art .learn-receipt { width: 100%; margin: 0; }
.tcov__art .learn-receipt__r { display: grid; gap: 0; } .tcov__art .learn-receipt__r b { font-size: .82rem; }
.tcov__body { margin-top: 0; }
@media (max-width: 1100px) and (min-width: 861px), (max-width: 560px) { .tcov__art { aspect-ratio: auto; } }
.tcov__art .learn-receipt { padding: 8px 10px 4px; }
.tcov__art .learn-receipt__k { font-size: 1rem; margin-bottom: 2px; }
.tcov__art .learn-receipt__r { padding: 3px 0; font-size: .66rem; line-height: 1.15; letter-spacing: .02em; }
.tcov__art .learn-receipt__r b { font-size: .8rem; line-height: 1.15; }
.tcov__words { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 100%; height: 100%; padding: 12px 16px; background: #F4F0E6 var(--grain) 0 0 / 160px; border-top: 2px dashed rgba(28, 46, 90, .3); border-bottom: 2px dashed rgba(28, 46, 90, .3); }
.tcov__words i { font: 700 1.25rem/1 "Caveat", cursive; color: var(--vermilion-deep); font-style: normal; }
.tcov__words b { font: 900 1.05rem/1.2 var(--font-display); color: var(--navy, #1B2A55); }
.tcov__i--pay .tcov__art { padding: 12px; }
.tcov__words { gap: 2px; padding: 10px 14px; }
.tcov__words i { font-size: 1.05rem; margin-bottom: 2px; }
.spread__page .tcov__words b, .tcov__words b { display: block; font-size: .92rem; line-height: 1.3; white-space: nowrap; }
@media (max-width: 560px) { .tcov__words { height: auto; } }
/* Judge panel fixes (November 2026): a visible focus ring on the Start buttons, and the arrow stays with the text. */
.tsyl__start:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 3px 3px 0 var(--ink), 0 0 0 7px var(--mustard); }
.tsyl__start { display: inline-block; max-width: 100%; }
.tsyl__start svg { display: inline-block; vertical-align: -2px; margin-left: 4px; }

/* Guide lessons (November 2026): the guide home lists every lesson as a card; each lesson page has previous and next. */
.guide-start { margin: var(--s-5) 0 0; }
.guide-toc li.is-here a { color: var(--vermilion-deep); }
.guide-toc li.is-here a::after { content: "  \2190  you are here"; font: 700 1.05rem/1 "Caveat", cursive; color: var(--vermilion-deep); white-space: nowrap; }
.gl-pager { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-4); align-items: stretch; margin: var(--s-8) auto 0; max-width: 1100px; padding-top: var(--s-5); border-top: 1.5px dashed rgba(28, 46, 90, .3); }
.gl-pager__a { display: grid; gap: 4px; padding: var(--s-4); background: #FFFDF7; border: 1.5px solid var(--ink); border-radius: 6px; box-shadow: 4px 4px 0 var(--ink); color: var(--navy); text-decoration: none; }
.gl-pager__a span { font: 700 .75rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--vermilion-deep); }
.gl-pager__a b { font: 800 1.15rem/1.25 var(--font-display); }
.gl-pager__a--prev span::before { content: "\2190  "; } .gl-pager__a--next { text-align: right; } .gl-pager__a--next span::after { content: "  \2192"; }
.gl-pager__a:hover { color: var(--navy); background: var(--mustard); }
.gl-pager__a:focus-visible, .gl-pager__all:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 3px; }
.gl-pager__all { align-self: center; padding: 10px 16px; font: 700 .95rem/1.2 var(--font-body); color: var(--cobalt); white-space: nowrap; }
@media (max-width: 700px) {
  .gl-pager { grid-template-columns: minmax(0, 1fr); }
  .gl-pager__a--next { text-align: left; order: -1; }
  .gl-pager__all { justify-self: center; order: 2; }
}
.guide-jump { display: none; }
@media (max-width: 900px) {
  .guide-head--lesson .guide-toc { display: none; }
  .guide-jump { display: block; margin-top: var(--s-2); background: #FFFDF7 var(--paper-light) 0 0 / 512px; border-radius: 6px; box-shadow: 0 18px 26px -20px rgba(20, 47, 107, .75); }
  .guide-jump summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; font: 700 1rem/1.2 var(--font-body); color: var(--navy); list-style: none; }
  .guide-jump summary::-webkit-details-marker { display: none; }
  .guide-jump summary::after { content: "+"; font: 800 1.4rem/1 var(--font-display); color: var(--vermilion-deep); }
  .guide-jump[open] summary::after { content: "\2212"; }
  .guide-jump summary:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 2px; }
  .guide-jump ol { margin: 0; padding: 0 16px 12px 2.4em; }
  .guide-jump li { padding: 8px 0; border-top: 1.5px dashed rgba(28, 46, 90, .2); font: 700 1rem/1.3 var(--font-display); }
  .guide-jump li::marker { color: var(--vermilion-deep); font-family: var(--font-body); }
  .guide-jump a { color: var(--navy); text-decoration: none; } .guide-jump li.is-here a { color: var(--vermilion-deep); }
}
.gl-src { margin-top: var(--s-7); border-top: 1.5px dashed rgba(28, 46, 90, .3); padding-top: var(--s-4); }
.gl-src summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 700 1rem/1.2 var(--font-body); color: var(--cobalt); }
.gl-src summary:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 2px; }
.gl-src .gfoot { margin-top: var(--s-3); border: 0; padding: 0; }

/* Guide home as a learning-platform course overview (November 2026). */
.gl-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: var(--s-4) 0 0; padding: 0; font: 500 .95rem/1.3 var(--font-body); color: var(--navy); }
.gl-meta li { display: inline; }
.gl-meta li + li::before { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; margin: 0 12px 2px 0; border-radius: 50%; background: var(--vermilion-deep); }
.gl-meta b { font-weight: 800; }
.gl-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin: var(--s-5) 0 var(--s-3); }
.gl-prog { flex: 1 1 200px; max-width: 300px; }
.gl-prog__bar { height: 10px; border-radius: 99px; background: rgba(255, 253, 247, .75); box-shadow: inset 0 0 0 1.5px var(--ink); overflow: hidden; }
.gl-prog__bar i { display: block; width: 0; height: 100%; background: var(--vermilion); transition: width .5s ease; }
.gl-prog__t { margin: 6px 0 0; font: 700 .85rem/1.2 var(--font-body); color: var(--navy); }
.gl-about { padding-block: var(--s-8) var(--s-6); }
.gl-about__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.gl-h2 { margin: 0 0 var(--s-4); font: 900 var(--fs-h3)/1.15 var(--font-display); color: var(--navy); }
.gl-checks { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.gl-checks li { position: relative; padding: 14px 16px 14px 54px; background: #FFFDF7 var(--paper-light) 0 0 / 512px; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 14px 22px -18px rgba(12, 22, 44, .55); font-size: 1.02rem; line-height: 1.45; }
.gl-checks li::before { content: ""; position: absolute; left: 16px; top: 15px; width: 24px; height: 24px; border-radius: 50%; background: var(--cobalt); }
.gl-checks li::after { content: ""; position: absolute; left: 24px; top: 20px; width: 6px; height: 11px; border: solid var(--paper); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.gl-for { display: grid; gap: var(--s-4); position: sticky; top: 100px; }
.gl-note { padding: var(--s-4) var(--s-5); background: var(--mustard, #F6CF5C); border-radius: 4px; box-shadow: 3px 4px 0 var(--ink); transform: rotate(-1deg); color: var(--navy); }
.gl-note--how { background: #FFFDF7 var(--paper-light) 0 0 / 512px; transform: rotate(.8deg); }
.gl-note__k { margin: 0 0 6px; font: 700 1.5rem/1 "Caveat", cursive; color: var(--vermilion-deep); }
.gl-note p:last-child { margin: 0; line-height: 1.5; }
.gl-note ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; line-height: 1.45; font-size: .95rem; }
.gl-path { padding-top: var(--s-6); }
.ptrail__part--3 { --c: #F7B99A; } .ptrail__part--ref { --c: #FFFDF7; }
.ptrail__part--ref .ptrail__sign { box-shadow: 3px 4px 0 var(--ink), inset 0 0 0 1.5px var(--ink); }
.ptrail__part--ref .ptrail__row::before { border-color: var(--ink); opacity: .25; }
.gl-trail .ptrail__k { color: #6E1B0D; }
.gl-trail .ptrail__stop.is-done .ptrail__disc { background: var(--cobalt); color: var(--paper); font-size: 0; }
.gl-trail .ptrail__stop.is-done .ptrail__disc::after { content: ""; width: 8px; height: 15px; margin-top: -4px; border: solid var(--paper); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.gl-done { color: var(--cobalt); }
.gl-prime { padding-top: var(--s-6); border-top: 2px dashed rgba(27, 42, 85, .18); }
.gl-prime .cg .lesson { margin-top: var(--s-7); }
.gl-sources { padding-block: 0 var(--s-8); }
.gl-sources .gl-src { margin-top: 0; }
@media (max-width: 900px) { .gl-about__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } .gl-for { position: static; } }
/* Lesson pages: lessons as steps under the title, and mark complete. */
.gl-steps { display: flex; gap: 5px; max-width: 420px; margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.gl-steps li { flex: 1; }
.gl-steps i { display: block; height: 10px; border-radius: 99px; background: rgba(255, 253, 247, .7); box-shadow: inset 0 0 0 1.5px rgba(28, 46, 90, .45); }
.gl-steps li.is-done i { background: var(--cobalt); box-shadow: none; }
.gl-steps li.is-here i { background: var(--vermilion); box-shadow: 0 0 0 2px var(--ink); }
.gl-markrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2) var(--s-4); margin: var(--s-7) auto 0; text-align: center; }
.gl-mark { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 20px; border: 2px solid var(--ink); border-radius: 999px; background: #FFFDF7; box-shadow: 3px 3px 0 var(--ink); font: 700 1rem/1.2 var(--font-body); color: var(--navy); cursor: pointer; }
.gl-mark::before { content: ""; width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 50%; box-sizing: border-box; background: #FFFDF7; }
.gl-mark[aria-pressed="true"] { background: var(--cobalt); color: var(--paper); }
.gl-mark[aria-pressed="true"]::before { border-color: var(--paper); background: linear-gradient(45deg, transparent 45%, var(--paper) 45% 60%, transparent 60%) 50% 50% / 100% 100%; }
.gl-mark:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); } .gl-mark:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 3px; }
.gl-markrow__t { margin: 0; font-size: .85rem; color: var(--ink-soft); }