/* msayla theme: the designed pages beyond the home (round 4): project pages, the Work index, About, privacy. Loaded only
   on those pages (functions.php); the parts every page can show (breadcrumbs, Get in touch, the footer mark, the post
   context) stay in site.css. Tokens only; golden split; Fibonacci spacing; square corners. */
/* ===== msayla/project-page: head ===== */
.p-project-head { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); column-gap: var(--space-55); align-items: start; padding-top: var(--space-34); padding-bottom: var(--space-34); }
.p-project-head h1 { grid-column: 1 / -1; margin: 0 0 var(--space-34); max-width: 15ch; font: 800 clamp(47px, 6.4vw, 97px)/.94 var(--font-display); letter-spacing: -.022em; }
.p-project-head .meta { grid-column: 2; grid-row: 2; margin: 0; padding-top: var(--space-13); border-top: 1.5px solid var(--ink); display: grid; gap: var(--space-5); }
.p-project-head .meta .kicker { font: 700 19px/1.3 var(--font-display); }
.p-project-head .meta .role { font: 500 15px/1.45 var(--font-text); color: var(--ink-muted); }

/* ===== msayla/figure and the lead photo ===== */
.p-hero-photo { margin: 0 0 var(--space-55); }
.p-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; max-height: 78vh; object-fit: cover; background: var(--surface-raised); }
.p-hero-photo.tall { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-34); align-items: end; }
.p-hero-photo.tall img { aspect-ratio: auto; width: auto; max-width: 100%; max-height: 82vh; }
.p-hero-photo figcaption, .p-figure figcaption, .p-portrait figcaption { margin-top: var(--space-8); font: 400 14px/1.45 var(--font-text); color: var(--ink-muted); max-width: 64ch; }
.p-hero-photo figcaption b, .p-figure figcaption b, .p-portrait figcaption b { color: var(--ink); font-weight: 600; }
.p-figure { margin: var(--space-34) 0 var(--space-55); }
.p-figure img { display: block; width: 100%; height: auto; background: var(--surface-raised); box-shadow: var(--shadow-paper); }
.p-figure.tall { max-width: 61.8%; }
.p-figure.tall img { width: 100%; }

/* ===== msayla/sections and the body: the story in the major column, the facts beside it ===== */
.p-project-body { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); gap: var(--space-89); align-items: start; padding-bottom: var(--space-34); }
.p-project-body .side { position: sticky; top: var(--space-21); display: grid; gap: var(--space-34); }
.p-section h2 { margin: var(--space-55) 0 var(--space-13); font: 700 29px/1.12 var(--font-display); letter-spacing: -.01em; }
.p-section:first-child h2 { margin-top: 0; }
.p-section p { margin: 0 0 1.05em; max-width: 64ch; font: 400 18px/1.62 var(--font-text); }
.p-section p:last-child { margin-bottom: 0; }
.p-project-body .p-then-now-project { margin: var(--space-55) 0 0 !important; }
.p-project-body .p-then-now-project .p-wipe { max-width: 520px; }

/* ===== msayla/facts: a ledger ===== */
.p-facts dl { margin: 0; border-top: 1.5px solid var(--ink); }
.p-facts dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-13); padding: var(--space-13) 0; border-bottom: 1px solid var(--line); }
.p-facts dt { font: 600 13px/1.6 var(--font-text); color: var(--ink-muted); }
.p-facts dd { margin: 0; font: 500 16px/1.45 var(--font-text); overflow-wrap: anywhere; }

/* ===== msayla/links ===== */
.p-links h2 { margin: 0 0 var(--space-8); font: 600 13px/1.4 var(--font-text); color: var(--ink-muted); }
.p-links ul { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.p-links a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-13); min-height: 44px; padding: var(--space-13) 0; border-bottom: 1px solid var(--line); box-sizing: border-box; font: 700 18px/1.3 var(--font-display); color: var(--ink); text-decoration: none; transition: color var(--dur-quick) var(--ease-out); }
.p-links a:hover { color: var(--indigo); }
.p-links .host { font: 400 13px/1.3 var(--font-text); color: var(--ink-muted); }

/* ===== msayla/quote: a pine field, edge to edge. Paper above and below it, so indigo never touches. ===== */
.p-quote { margin: var(--space-55) 0 0; padding: var(--space-89) var(--space-21); background: var(--pine-field); color: var(--cotton); }
.p-quote blockquote { max-width: var(--page-max); margin: 0 auto; padding: 0; border: 0; box-sizing: border-box; }
.p-quote blockquote p { margin: 0; max-width: 26ch; font: 500 italic clamp(29px, 3.4vw, 47px)/1.2 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.p-quote blockquote p::before { content: "\201C"; }
.p-quote blockquote p::after { content: "\201D"; }
.p-quote figcaption { max-width: var(--page-max); margin: var(--space-21) auto 0; font: 600 15px/1.4 var(--font-text); color: var(--marigold-light); }
.p-quote figcaption a { color: var(--marigold-light); text-decoration-color: var(--cotton); }
.p-quote :focus-visible { outline-color: var(--marigold-light); }

/* ===== msayla/chapter-nav ===== */
.p-chapter-nav { margin-top: var(--space-55); padding-top: var(--space-13); border-top: 1.5px solid var(--ink); }
.p-chapter-nav .ch { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-8) var(--space-21); margin: 0 0 var(--space-13); font: 700 19px/1.3 var(--font-display); }
.p-chapter-nav .ch a { font: 700 19px/1.3 var(--font-display); }
.p-chapter-nav .cells { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-21); }
.p-chapter-nav .cells > a { display: grid; grid-template-columns: 89px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--space-13); align-items: start; padding: var(--space-13); background: var(--surface-raised); color: var(--ink); text-decoration: none; transition: box-shadow var(--dur-settle) var(--ease-out), transform var(--dur-settle) var(--ease-out); }
.p-chapter-nav .cells > a:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.p-chapter-nav .ph { grid-row: 1 / span 2; }
.p-chapter-nav .ph img { display: block; width: 89px; height: 89px; object-fit: cover; }
.p-chapter-nav .dir { display: block; font: 600 13px/1.4 var(--font-text); color: var(--ink-muted); }
.p-chapter-nav .t { display: block; font: 700 20px/1.2 var(--font-display); margin-top: var(--space-3); }
.p-chapter-nav a:hover .t { color: var(--indigo); }
.p-chapter-nav .cells > .next { grid-template-columns: minmax(0, 1fr) 89px; text-align: right; }
.p-chapter-nav .next .ph { grid-column: 2; grid-row: 1 / span 2; }
.p-chapter-nav .next .dir { grid-column: 1; grid-row: 1; }
.p-chapter-nav .next .t { grid-column: 1; grid-row: 2; }

/* ===== msayla/work-card and the grids ===== */
.p-related { padding-top: var(--space-55); }
.p-related h2 { margin: 0 0 var(--space-21); font: 700 29px/1.12 var(--font-display); }
.p-work-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-55) var(--space-21); }
.p-work-card { position: relative; min-width: 0; }
.p-work-card .ph { position: relative; aspect-ratio: 3 / 2; overflow: hidden; margin: 0 0 var(--space-13); background: var(--surface-raised); box-shadow: var(--shadow-paper); transition: box-shadow var(--dur-settle) var(--ease-out), transform var(--dur-settle) var(--ease-out); }
.p-work-card .ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-reveal) var(--ease-out); }
.p-work-card .ph-mark { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.p-work-card .ph-mark .mk { width: 30%; color: var(--indigo); }
.p-work-card:hover .ph { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.p-work-card:hover .ph img { transform: scale(1.03); }
.p-work-card .t { margin: 0 0 var(--space-5); font: 700 23px/1.2 var(--font-display); letter-spacing: -.01em; }
.p-work-card .t a { color: var(--ink); text-decoration: none; }
.p-work-card .t a::after { content: ""; position: absolute; inset: 0; }
.p-work-card:hover .t a { color: var(--indigo); text-decoration: underline; text-decoration-thickness: 2px; }
.p-work-card .t a:focus-visible { outline: none; }
.p-work-card:has(.t a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 6px; }
.p-work-card .role { margin: 0; font: 600 15px/1.4 var(--font-text); }
.p-work-card .line { margin: var(--space-5) 0 0; font: 400 15px/1.5 var(--font-text); color: var(--ink-muted); max-width: 52ch; }
.p-work-card .kicker { margin: var(--space-8) 0 0; font: 400 13px/1.4 var(--font-text); color: var(--ink-muted); }
.p-work-card.lead { grid-column: span 2; grid-row: span 2; }
.p-work-card.lead .t { font-size: 29px; }
.p-work-card.lead .ph { aspect-ratio: 4 / 3; }

/* ===== msayla/work-index ===== */
.p-work-head { padding-top: var(--space-89); padding-bottom: var(--space-34); }
.p-work-head h1 { margin: 0; font: 800 clamp(47px, 7vw, 97px)/.94 var(--font-display); letter-spacing: -.022em; }
.p-work-head .lede { margin: var(--space-13) 0 var(--space-55); font: 700 clamp(23px, 2.4vw, 29px)/1.25 var(--font-display); color: var(--marigold-ink); }
.p-work-jump ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); column-gap: var(--space-21); border-top: 1.5px solid var(--ink); }
.p-work-jump a { display: block; min-height: 44px; padding: var(--space-13) 0; border-bottom: 1px solid var(--line); font: 700 17px/1.3 var(--font-display); color: var(--ink); text-decoration: none; transition: color var(--dur-quick) var(--ease-out); }
.p-work-jump a:hover { color: var(--indigo); }
.p-work-jump .ms-fig { display: block; margin-bottom: var(--space-3); font: 400 12.5px/1.4 var(--font-figures); color: var(--ink-muted); }
.p-work-chapter { padding: var(--space-34) 0 var(--space-55); scroll-margin-top: var(--space-21); }
.p-work-chapter .ch-head { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: var(--space-21); margin: 0 0 var(--space-34); padding-top: var(--space-21); border-top: 1.5px solid var(--ink); }
.p-work-chapter .yrs { grid-row: 1 / span 2; margin: 0; font: 400 14px/2.6 var(--font-figures); font-variation-settings: "wdth" 87; }
.p-work-chapter h2 { margin: 0; font: 700 47px/1.02 var(--font-display); letter-spacing: -.015em; }
.p-work-chapter .sub { margin: var(--space-5) 0 0; font: 400 17px/1.5 var(--font-text); color: var(--ink-muted); }
.p-work-chapter .p-work-grid { margin-left: calc(120px + var(--space-21)); }

/* ===== msayla/about-page ===== */
.p-about-head { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); gap: var(--space-55); align-items: end; padding-top: var(--space-34); padding-bottom: var(--space-55); }
.p-about-head h1 { margin: 0 0 var(--space-34); font: 800 clamp(47px, 7vw, 97px)/.94 var(--font-display); letter-spacing: -.022em; }
.p-about-head .lede { margin: 0; max-width: 38ch; font: 400 23px/1.45 var(--font-text); }
.p-portrait { margin: 0; }
.p-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--surface-raised); box-shadow: var(--shadow-paper); }
.p-pattern { height: 55px; margin: 0 0 var(--space-55); }
.p-about-body .p-section + .p-section h2 { margin-top: var(--space-55); }

/* ===== msayla/privacy-page ===== */
.p-privacy { max-width: calc(var(--measure) + 2 * var(--space-21)); padding-bottom: var(--space-89); }
.p-privacy header { padding: var(--space-34) 0 var(--space-34); }
.p-privacy h1 { margin: 0 0 var(--space-21); font: 800 clamp(44px, 5.4vw, 64px)/.98 var(--font-display); letter-spacing: -.02em; }
.p-privacy .lede { margin: 0; font: 400 21px/1.5 var(--font-text); }
.p-privacy .updated { margin: var(--space-13) 0 0; font: 400 14px/1.4 var(--font-text); color: var(--ink-muted); }
.p-privacy section { padding-top: var(--space-21); border-top: 1px solid var(--line); margin-top: var(--space-34); }
.p-privacy h2 { margin: 0 0 var(--space-13); font: 700 23px/1.2 var(--font-display); }
.p-privacy p { margin: 0 0 1.05em; font: 400 18px/1.62 var(--font-text); }

/* ===== the end line of a designed page ===== */
.p-end { display: flex; gap: var(--space-13); align-items: center; margin: var(--space-89) 0 var(--space-34); font: 700 29px/1.2 var(--font-display); }
.p-end .ms-mark { width: 29px; height: 29px; }
.p-end a { color: var(--indigo); }

/* ===== the designed pages: tablets ===== */
@media (max-width: 960px) {
  .p-project-head, .p-project-body, .p-about-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-34); }
  .p-project-head .meta { grid-column: 1; grid-row: auto; }
  .p-project-head .meta { margin-top: var(--space-21); }
  .p-project-body .side { position: static; order: -1; }
  .p-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-work-chapter .p-work-grid { margin-left: 0; }
  .p-about-head .p-portrait { max-width: 420px; }
}
/* ===== the designed pages: phones ===== */
@media (max-width: 760px) {
  .p-project-head h1, .p-about-head h1, .p-work-head h1 { font-size: 44px; }
  .p-about-head .lede { font-size: 19px; }
  .p-hero-photo img { max-height: none; }
  .p-figure.tall { max-width: none; }
  .p-work-grid { grid-template-columns: minmax(0, 1fr); }
  .p-work-card.lead { grid-column: auto; grid-row: auto; }
  .p-work-card.lead .t { font-size: 23px; }
  .p-work-card.lead .ph { aspect-ratio: 3 / 2; }
  .p-work-chapter .ch-head { grid-template-columns: minmax(0, 1fr); }
  .p-work-chapter .yrs { grid-row: auto; line-height: 1.4; margin-bottom: var(--space-5); }
  .p-work-chapter h2 { font-size: 34px; }
  .p-chapter-nav .cells { grid-template-columns: minmax(0, 1fr); }
  .p-chapter-nav .cells > a, .p-chapter-nav .cells > .next { grid-template-columns: 72px minmax(0, 1fr); text-align: left; }
  .p-chapter-nav .ph img { width: 72px; height: 72px; }
  .p-chapter-nav .next .ph { grid-column: 1; }
  .p-chapter-nav .next .dir, .p-chapter-nav .next .t { grid-column: 2; }
  .p-chapter-nav .none { display: none; }
  .p-quote { padding: var(--space-55) 16px; }
  .p-end { font-size: 23px; margin-top: var(--space-55); }
  .p-facts dl > div { grid-template-columns: 96px minmax(0, 1fr); }
  .p-privacy { padding-left: 16px; padding-right: 16px; }
}

/* ===== round 4B ===== */
/* A lead photo smaller than the column (an old phone or Instagram export) shows at its own size, never stretched. */
.p-hero-photo.small img { width: auto; max-width: 100%; aspect-ratio: auto; max-height: none; }
/* About, its own page: the portrait leads in the major column, his name and lede beside it in the minor. */
.p-about-head { grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); align-items: end; }
.p-about-head .p-portrait img { aspect-ratio: 4 / 3; }
.p-about-head .words h1 { font-size: clamp(47px, 6vw, 89px); }
.p-about-head .lede { font-size: 21px; }
/* What drives me: out of the column, on the raised paper, bigger type, the bougainvillea heading; his photo beside it. */
.p-drives-band { background: var(--surface-raised); padding: var(--space-89) 0; margin: var(--space-34) 0 var(--space-55); }
.p-drives-grid { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); gap: var(--space-89); align-items: center; }
.p-drives h2 { margin: 0 0 var(--space-21); font: 700 clamp(34px, 3.6vw, 47px)/1.05 var(--font-display); color: var(--spark); letter-spacing: -.015em; }
.p-drives p { margin: 0 0 1em; max-width: 52ch; font: 400 21px/1.55 var(--font-text); }
.p-drives p:first-of-type { font: 500 italic 26px/1.4 var(--font-display); }
.p-drives-photo { margin: 0; }
.p-drives-photo img { display: block; width: 100%; height: auto; box-shadow: var(--shadow-paper); }
.p-drives-photo figcaption { margin-top: var(--space-8); font: 400 14px/1.45 var(--font-text); color: var(--ink-muted); }
.p-drives-photo figcaption b { color: var(--ink); font-weight: 600; }
.p-about-after { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); padding-bottom: var(--space-34); }
.p-about-after .p-section + .p-section h2 { margin-top: var(--space-55); }
.p-help-cta { margin: var(--space-21) 0 0 !important; }
.p-help-cta .ms-btn, .p-help-cta .ms-btn:visited { color: var(--seed-paper); text-decoration: none; min-height: 44px; box-sizing: border-box; }
.p-help-cta .ms-btn:hover { color: var(--seed-paper); }
@media (max-width: 960px) {
  .p-about-head, .p-drives-grid, .p-about-after { grid-template-columns: minmax(0, 1fr); gap: var(--space-34); }
  .p-about-head .p-portrait { max-width: none; }
  .p-drives-band { padding: var(--space-55) 0; }
}
@media (max-width: 760px) {
  .p-drives p { font-size: 18px; }
  .p-drives p:first-of-type { font-size: 21px; }
}

/* ===== round 5: the project page for a reader sizing him up. The 30-second read (title, one line, at a glance, the
   photo, the results) is above the fold; the 5-minute read (story, what I did, deliverables, skills, photos, press, the
   lesson) follows. Every part renders only when projects.json has it. ===== */
.p-project-head.has-glance { display: block; }
.p-project-head.has-glance h1 { max-width: 18ch; margin-bottom: var(--space-21); }
.p-line { margin: 0 0 var(--space-34); max-width: 46ch; font: 400 23px/1.45 var(--font-text); text-wrap: pretty; }
.p-glance dl { margin: 0; display: grid; grid-template-columns: 1.1fr .9fr 1.2fr 1fr 1.2fr; border-top: 1.5px solid var(--ink); }
.p-glance dl > div { padding: var(--space-13) var(--space-21) var(--space-13) 0; min-width: 0; }
.p-glance dl > div + div { padding-left: var(--space-21); border-left: 1px solid var(--line); }
.p-glance dt { font: 600 13px/1.6 var(--font-text); color: var(--ink-muted); }
.p-glance dd { margin: var(--space-3) 0 0; font: 500 16px/1.4 var(--font-text); overflow-wrap: anywhere; }
.p-results { margin: calc(-1 * var(--space-21)) 0 var(--space-55); }
.p-results ul { list-style: none; margin: 0; padding: var(--space-21) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-21) var(--space-34); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); }
.p-results li { display: grid; align-content: start; gap: var(--space-5); }
.p-results .v { font: 800 clamp(30px, 3vw, 44px)/1.04 var(--font-display); overflow-wrap: break-word; hyphens: manual; text-wrap: balance; letter-spacing: -.02em; color: var(--marigold-ink); }
.p-results .l { max-width: 26ch; font: 500 15px/1.45 var(--font-text); }
.p-story > .lede { margin: 0 0 var(--space-55); max-width: 40ch; font: 400 23px/1.5 var(--font-text); text-wrap: pretty; }
.p-proof { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-55); padding-top: var(--space-34); padding-bottom: var(--space-34); }
.p-proof h2, .p-learned h2, .p-links h2 { margin: 0 0 var(--space-13); font: 600 13px/1.4 var(--font-text); color: var(--ink-muted); letter-spacing: .02em; }
.p-proof ul { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.p-did li, .p-deliverables li { padding: var(--space-13) 0; border-bottom: 1px solid var(--line); font: 400 17px/1.5 var(--font-text); }
.p-did li { position: relative; padding-left: var(--space-21); }
.p-did li::before { content: ""; position: absolute; left: 0; top: calc(var(--space-13) + .55em); width: 7px; height: 7px; background: var(--marigold); }
.p-deliverables li { font-weight: 600; }
.p-skills ul { display: flex; flex-wrap: wrap; gap: var(--space-8); padding-top: var(--space-13); }
.p-skills li { padding: var(--space-5) var(--space-13); border: 1px solid var(--line-strong); font: 500 15px/1.4 var(--font-text); }
.p-gallery { padding: var(--space-34) 0; }
.p-gallery .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-21); align-items: start; }
.p-gallery .p-figure { margin: 0; max-width: none; }
.p-gallery .p-figure img { aspect-ratio: 4 / 5; object-fit: cover; }
.p-links-wrap { padding-top: var(--space-21); }
.p-links-wrap .p-links { max-width: 742px; }
.p-learned { padding: var(--space-89) 0; background: var(--surface-raised); }
.p-learned p { margin: 0; max-width: 34ch; font: 500 italic clamp(23px, 2.6vw, 34px)/1.3 var(--font-display); text-wrap: pretty; }
.p-quote + .p-learned { margin-top: 0; }
.p-project-cta { margin-top: var(--space-89); }
.p-project-cta .ms-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-13) var(--space-21); padding-top: var(--space-34); padding-bottom: var(--space-34); border-top: 1.5px solid var(--ink); }
.p-project-cta .ms-mark { width: 29px; height: 29px; color: var(--marigold); }
.p-project-cta h2 { margin: 0; flex: 1 1 auto; font: 700 29px/1.2 var(--font-display); }
.p-project-cta .ms-btn, .p-project-cta .ms-btn:visited { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; color: var(--seed-paper); text-decoration: none; }
@media (max-width: 960px) {
  .p-glance dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-glance dl > div + div { padding-left: 0; border-left: 0; }
  .p-glance dl > div { border-bottom: 1px solid var(--line); }
  .p-proof { grid-template-columns: minmax(0, 1fr); gap: var(--space-34); }
}
@media (max-width: 760px) {
  .p-line { font-size: 19px; margin-bottom: var(--space-21); }
  .p-glance dl { grid-template-columns: minmax(0, 1fr); }
  .p-glance dl > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-13); padding: var(--space-8) 0; }
  .p-glance dd { margin: 0; font-size: 15px; }
  .p-results { margin-top: 0; }
  .p-results ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-21) var(--space-13); }
  .p-results .v { font-size: 26px; overflow-wrap: normal; }
  .p-results .l { font-size: 14px; }
  .p-story > .lede { font-size: 19px; margin-bottom: var(--space-34); }
  .p-gallery .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-13); }
  .p-learned { padding: var(--space-55) 0; }
  .p-project-cta h2 { font-size: 23px; }
}
/* Print (or save as PDF): a clean portfolio page. The site's chrome, the way onward and the form drop out; the facts,
   results, story, proof and photos stay; nothing sticks, nothing splits a photo across pages. */
@media print {
  .ms-site-header .ms-nav, .ms-site-footer, .ms-crumbs, .p-chapter-nav, .p-related, .p-project-cta, .ms-consent, .skip-link { display: none !important; }
  .p-project-body .side { position: static; }
  .p-project-head { padding-top: 0; }
  .p-project-head h1 { font-size: 40pt; }
  .p-hero-photo img { max-height: 55vh; box-shadow: none; }
  .p-figure img, .p-gallery img { box-shadow: none; }
  .p-figure, .p-hero-photo, .p-gallery figure, .p-results li, .p-glance, .p-quote, .p-learned { break-inside: avoid; }
  .p-section h2, .p-proof h2 { break-after: avoid; }
  .p-quote { background: none !important; color: var(--ink) !important; padding: var(--space-21) 0; border-top: 1.5px solid var(--ink); }
  .p-quote figcaption, .p-quote figcaption a { color: var(--ink-muted); }
  .p-learned { background: none !important; padding: var(--space-34) 0; }
  .p-links a { min-height: 0; }
}
@media (max-width: 760px) { .p-hero-photo.tall { display: block; } .p-hero-photo.tall img { width: 100%; max-height: none; } }