/* Shepherdman Academy — MVP stylesheet
   No build step, no framework. One webfont family (EB Garamond) with a serif fallback,
   so the page still reads correctly with no network.
   Palette: sumi (ink) / kinari (unbleached cloth) / shu (vermilion, used sparingly). */

:root {
  --sumi:   #1c1b19;   /* ink */
  --sumi-2: #3a3733;
  --sub:    #6e6a62;
  --paper:  #fbfaf6;
  --kinari: #f2eee4;   /* unbleached */
  --line:   #ddd7c8;
  --shu:    #8a3a2e;   /* vermilion, accents only */
  --err:    #8a3a2e;
  --ok:     #3f5c46;
  --serif: "EB Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
section[id] { scroll-margin-top: 24px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--sumi);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.85;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 680px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 560px; }
.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;
}

/* ---------- Hero ---------- */
.hero {
  background: var(--kinari);
  border-bottom: 1px solid var(--line);
  padding: clamp(72px, 18vw, 160px) 0 clamp(64px, 14vw, 128px);
  text-align: center;
}
.eyebrow {
  font-family: var(--sans);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sub); margin: 0 0 28px;
}
.brand {
  font-weight: 400;
  font-size: clamp(38px, 11vw, 68px);
  line-height: 1.12;
  letter-spacing: .01em;
  margin: 0;
}
.brand-2 { font-style: italic; color: var(--sumi-2); }
.tagline {
  font-size: clamp(19px, 4.6vw, 25px);
  color: var(--sumi-2);
  margin: 28px auto 0;
  max-width: 22ch;
  line-height: 1.5;
}
.tagline::before {
  content: ""; display: block; width: 40px; height: 1px;
  background: var(--shu); margin: 0 auto 28px;
}
.hero-note {
  font-family: var(--sans); font-size: 14px; letter-spacing: .04em;
  color: var(--sub); margin: 32px 0 0;
}
.hero-cta { margin: 40px 0 0; }
.btn-line {
  font-family: var(--sans); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sumi); text-decoration: none;
  border-bottom: 1px solid var(--sumi); padding-bottom: 5px;
  transition: color .18s ease, border-color .18s ease;
}
.btn-line:hover { color: var(--shu); border-color: var(--shu); }

/* ---------- Bands ---------- */
.band { padding: clamp(64px, 13vw, 112px) 0; border-bottom: 1px solid var(--line); }
.band-tint { background: var(--kinari); }
.band-ink { background: var(--sumi); color: var(--paper); border-bottom: none; }

.sec-num {
  font-family: var(--sans); font-size: 11px; letter-spacing: .3em;
  color: var(--sub); margin: 0 0 14px;
}
.band-ink .sec-num { color: #9d968a; }

h2 {
  font-weight: 400;
  font-size: clamp(27px, 6.4vw, 38px);
  line-height: 1.3;
  letter-spacing: .005em;
  margin: 0 0 10px;
}
h3 {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .06em;
  margin: 0 0 8px;
}
/* In-section subheading, used standalone (not inside a .card). New with
   /ja/brush-praxis/school/ — no existing page nests an h3 directly in .wrap,
   so this is additive and does not touch any other page. */
.wrap > h3 { margin-top: 34px; }
.sub {
  font-family: var(--sans); font-size: 13.5px; letter-spacing: .05em;
  color: var(--sub); margin: 0 0 8px; font-style: normal;
}

.prose p { margin: 22px 0 0; }
.prose .lead {
  font-size: clamp(21px, 4.8vw, 26px);
  line-height: 1.55; color: var(--sumi);
  margin-top: 30px;
}
.pull {
  border-left: 2px solid var(--shu);
  padding-left: 20px;
  font-size: clamp(20px, 4.6vw, 24px);
  line-height: 1.55;
  margin-top: 34px !important;
}
/* Quoted speech (attribution sits outside the blockquote). */
.prose .quote {
  margin: 30px 0 0;
  border-left: 2px solid var(--shu);
  padding-left: 20px;
}
.prose .quote .lead { margin-top: 0; }
.prose .quote-cite {
  font-family: var(--sans); font-size: 14px; letter-spacing: .04em;
  color: var(--sub); margin: 10px 0 0; padding-left: 22px;
}
.aside {
  font-family: var(--sans); font-size: 14px; line-height: 1.8;
  color: var(--sub); margin: 34px 0 0;
}
/* Inline links in body copy — understated, no default blue. */
.prose a, .aside a, .card p a {
  color: var(--shu); text-decoration: none;
  border-bottom: 1px solid rgba(138, 58, 46, .35);
}
.prose a:hover, .aside a:hover, .card p a:hover { border-bottom-color: var(--shu); }
.origin-note {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.75;
  color: var(--sub); margin: 40px 0 0;
  padding-top: 16px; border-top: 1px solid var(--line);
}

/* ---------- Two-up ---------- */
.two { display: grid; grid-template-columns: 1fr; gap: 28px; margin: 40px 0 0; }
.card p { margin: 0; font-size: 18px; line-height: 1.8; }
.card h3::before {
  content: ""; display: block; width: 22px; height: 1px;
  background: var(--shu); margin-bottom: 14px;
}
.card-bordered { border: 1px solid var(--line); padding: 26px 24px; background: #fff; }

/* ---------- Definitions ---------- */
.defs { margin: 34px 0 0; }
.defs dt {
  font-family: var(--sans); font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sumi); margin-top: 24px;
}
.defs dt:first-child { margin-top: 0; }
.defs dd { margin: 6px 0 0; padding: 0 0 0 0; font-size: 19px; color: var(--sumi-2); }
.rom { text-transform: none; letter-spacing: .04em; color: var(--sub); }

/* ---------- Form ---------- */
.form { margin: 36px 0 0; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
.form input[type="email"] {
  font-family: var(--sans); font-size: 16px; /* 16px+ prevents iOS zoom on focus */
  padding: 15px 16px; width: 100%;
  color: var(--sumi); background: var(--paper);
  border: 1px solid #56524b; border-radius: 0; outline: none;
}
.form input[type="email"]:focus { border-color: var(--paper); box-shadow: 0 0 0 2px rgba(251,250,246,.35); }
.form button {
  font-family: var(--sans); font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  padding: 15px 22px; cursor: pointer;
  color: var(--sumi); background: var(--paper);
  border: 1px solid var(--paper); border-radius: 0;
  transition: opacity .18s ease;
}
.form button:hover { opacity: .82; }
.form button[disabled] { opacity: .5; cursor: default; }
.form-status {
  font-family: var(--sans); font-size: 14px; line-height: 1.7;
  min-height: 1.7em; margin: 16px 0 0; color: #cfc9bd;
}
.form-status.is-error { color: #e8b3a8; }
.form-status.is-ok { color: #bcd3c1; }
/* Which language the letter is sent in. Sits on the ink band, above the email row. */
.lang-pick { border: 0; margin: 0 0 16px; padding: 0; }
.lang-pick legend {
  font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: #cfc9bd; padding: 0; margin: 0 0 9px;
}
.lang-pick label {
  font-family: var(--sans); font-size: 15px; color: var(--paper);
  display: inline-flex; align-items: center; gap: 8px; margin: 0 22px 6px 0; cursor: pointer;
}
.lang-pick input { accent-color: var(--shu); margin: 0; flex: none; }

/* ---------- Footer ---------- */
.footer { padding: 56px 0 72px; text-align: center; background: var(--sumi); color: #9d968a; }
.foot-brand { font-size: 20px; color: var(--paper); margin: 0 0 8px; letter-spacing: .04em; }
.foot-line { font-family: var(--sans); font-size: 13px; letter-spacing: .06em; margin: 0; }

/* ---------- >= 700px ---------- */
@media (min-width: 700px) {
  .two { grid-template-columns: 1fr 1fr; gap: 36px; }
  .field-row { grid-template-columns: 1fr auto; }
  .defs { display: grid; grid-template-columns: 200px 1fr; column-gap: 24px; row-gap: 18px; }
  .defs dt { margin-top: 0; padding-top: 3px; }
  .defs dd { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Language bar (EN default / JA second version) ---------- */
.langbar {
  background: var(--kinari);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .16em;
  padding: 12px 0;
}
.langbar .wrap { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.lang-current { color: var(--sumi); }
.lang-sep { color: var(--line); }
.lang-alt { color: var(--sub); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.lang-alt:hover { color: var(--shu); border-bottom-color: var(--shu); }
.langbar + .hero { border-top: none; }

/* ---------- Site navigation (added with the 4-page structure) ---------- */
.sitenav {
  background: var(--kinari);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .1em;
  padding: 14px 0;
}
.sitenav .wrap {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 10px 22px;
}
.sitenav a { color: var(--sub); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 3px; }
.sitenav a:hover { color: var(--shu); border-bottom-color: var(--shu); }
.sitenav a[aria-current="page"] { color: var(--sumi); border-bottom-color: var(--sumi); }
.sitenav + .hero, .sitenav + .page-hero { border-top: none; }

/* ---------- Sub-page hero (shorter than the front page hero) ---------- */
.page-hero {
  background: var(--kinari);
  border-bottom: 1px solid var(--line);
  padding: clamp(52px, 11vw, 96px) 0 clamp(44px, 9vw, 76px);
  text-align: center;
}
.page-hero h1 {
  font-weight: 400;
  font-size: clamp(30px, 7.4vw, 48px);
  line-height: 1.2;
  margin: 0;
}
.page-hero .sub { margin: 16px 0 0; }
.page-hero .lede {
  font-size: clamp(18px, 4.2vw, 22px);
  color: var(--sumi-2);
  max-width: 30ch; margin: 26px auto 0; line-height: 1.6;
}

/* ---------- Top-of-page callout (school outreach link) ----------
   Used once, on /ja/brush-praxis/ only, between .page-hero and <main>, so
   the reader sees the school page link without scrolling to the bottom.
   Reuses .card-link/.go from the "front page navigation" block below —
   no new link styling, just a spacing wrapper. New class name, so this is
   additive and does not touch any other page. */
.school-notice { padding: 36px 0 0; }

/* ---------- Programme cards (front page navigation) ---------- */
.cards3 { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 40px 0 0; }
.card-link {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); background: #fff;
  padding: 26px 24px;
  transition: border-color .2s ease, transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
}
/* Hover uses transform; the scroll reveal uses the separate translate property, so
   the two compose instead of overriding one another. */
.card-link:hover { border-color: var(--shu); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(28, 27, 25, .07); }
.card-link h3 { margin: 0 0 8px; }
.card-link h3::before {
  content: ""; display: block; width: 22px; height: 1px;
  background: var(--shu); margin-bottom: 14px;
}
.card-link p { margin: 0; font-size: 17px; line-height: 1.75; color: var(--sumi-2); }
.card-link .go {
  display: inline-block; margin-top: 16px;
  font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--shu);
}

/* ---------- Fact list (dates, fees, place) ---------- */
.facts { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--line); }
.facts li {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.facts-k {
  font-family: var(--sans); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sub); padding-top: 4px;
}
.facts-v { font-size: 18px; line-height: 1.7; }
.facts-note { display: block; font-family: var(--sans); font-size: 13.5px; color: var(--sub); margin-top: 4px; }

/* ---------- Simple lists ---------- */
.checks, .cycle { margin: 30px 0 0; padding: 0; list-style: none; }
.checks li, .cycle li {
  position: relative; padding-left: 26px; margin: 12px 0; font-size: 18px; line-height: 1.7;
}
.checks li::before, .cycle li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: 12px; height: 1px; background: var(--shu);
}
.flow { margin: 30px 0 0; padding: 0; list-style: none; counter-reset: flow; }
.flow li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.flow-n { font-family: var(--sans); font-size: 12px; letter-spacing: .2em; color: var(--shu); }
.flow-t { font-size: 18px; }

/* ---------- Contact form (light band) ---------- */
.form-light { margin: 32px 0 0; }
.field { margin: 0 0 22px; }
.field > label, .fieldset > legend {
  display: block; font-family: var(--sans); font-size: 13px; letter-spacing: .1em;
  color: var(--sumi); margin: 0 0 8px; padding: 0;
}
.req { color: var(--shu); font-size: 12px; letter-spacing: .08em; margin-left: 6px; }
.form-light input[type="text"],
.form-light input[type="email"],
.form-light input[type="tel"],
.form-light select,
.form-light textarea {
  font-family: var(--sans); font-size: 16px; /* 16px+ prevents iOS zoom on focus */
  line-height: 1.6;
  padding: 13px 14px; width: 100%;
  color: var(--sumi); background: #fff;
  border: 1px solid var(--line); border-radius: 0; outline: none;
  -webkit-appearance: none; appearance: none;
}
.form-light select {
  background-image: linear-gradient(45deg, transparent 50%, var(--sub) 50%), linear-gradient(135deg, var(--sub) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.form-light textarea { min-height: 170px; resize: vertical; }
.form-light input:focus, .form-light select:focus, .form-light textarea:focus { border-color: var(--shu); }
.fieldset { border: 0; margin: 0 0 22px; padding: 0; }
.choices { display: grid; gap: 10px; }
.choice {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--line); background: #fff; padding: 14px 16px; cursor: pointer;
}
.choice input { margin: 5px 0 0; accent-color: var(--shu); flex: none; }
.choice-t { font-size: 17px; line-height: 1.6; }
.choice-note { display: block; font-family: var(--sans); font-size: 13px; color: var(--sub); margin-top: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-light button {
  font-family: var(--sans); font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  padding: 15px 30px; cursor: pointer;
  color: var(--paper); background: var(--sumi);
  border: 1px solid var(--sumi); border-radius: 0;
  transition: opacity .18s ease;
}
.form-light button:hover { opacity: .84; }
.form-light button[disabled] { opacity: .5; cursor: default; }
.form-light .form-status { color: var(--sub); }
.form-light .form-status.is-error { color: var(--err); }
.form-light .form-status.is-ok { color: var(--ok); }
.privacy { font-family: var(--sans); font-size: 12.5px; line-height: 1.75; color: var(--sub); margin: 18px 0 0; }

/* ---------- Teacher hero (front page) ----------
   Photograph-led and quiet: one portrait, the name, and a few lines. The reference
   the client gave is jackkornfield.com — generous air, no boxed-in cards up top. */
.hero-person {
  background: var(--kinari);
  border-bottom: 1px solid var(--line);
  padding: clamp(56px, 12vw, 104px) 0 clamp(52px, 11vw, 92px);
  text-align: center;
}
.portrait {
  width: clamp(190px, 46vw, 260px);
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #eae5d8;
  border: 1px solid var(--line);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-name {
  font-weight: 400;
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1.2;
  margin: 34px 0 0;
  letter-spacing: .01em;
}
.person-role {
  font-family: var(--sans); font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sub); margin: 14px 0 0;
}
.person-bio {
  max-width: 46ch; margin: 26px auto 0;
  font-size: 18px; line-height: 1.85; color: var(--sumi-2);
}
.person-bio p { margin: 14px 0 0; }
.person-bio p:first-child { margin-top: 0; }

/* ---------- Tagline band ---------- */
.band-tagline { padding: clamp(56px, 12vw, 100px) 0; text-align: center; }
.tagline-big {
  font-size: clamp(26px, 6.4vw, 40px);
  line-height: 1.4;
  color: var(--sumi);
  margin: 0 auto;
  max-width: 20ch;
}
.tagline-big::before {
  content: ""; display: block; width: 40px; height: 1px;
  background: var(--shu); margin: 0 auto 32px;
}

/* ---------- Upcoming ---------- */
.upcoming { list-style: none; margin: 36px 0 0; padding: 0; }
.upcoming li { padding: 22px 0; border-top: 1px solid var(--line); }
.upcoming li:last-child { border-bottom: 1px solid var(--line); }
.up-when {
  font-family: var(--sans); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--shu); margin: 0 0 6px;
}
.up-what { font-size: 20px; margin: 0; }
.up-note { font-family: var(--sans); font-size: 13.5px; line-height: 1.75; color: var(--sub); margin: 6px 0 0; }

/* ---------- Two-up call to action ---------- */
.cta-two { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 36px 0 0; }
.cta-box { border: 1px solid rgba(251,250,246,.28); padding: 26px 24px; }
.band-ink .cta-box h3 { color: var(--paper); }
.cta-box p { margin: 0; font-size: 17px; line-height: 1.75; color: #cfc9bd; }
.cta-box .form { margin: 22px 0 0; }
.cta-box a { color: var(--paper); border-bottom: 1px solid rgba(251,250,246,.4); text-decoration: none; }
.cta-box a:hover { border-bottom-color: var(--paper); }

/* ---------- Footer links ---------- */
.foot-nav { font-family: var(--sans); font-size: 13px; letter-spacing: .06em; margin: 18px 0 0; }
.foot-nav a { color: #cfc9bd; text-decoration: none; border-bottom: 1px solid transparent; }
.foot-nav a:hover { color: var(--paper); border-bottom-color: #9d968a; }
.foot-nav .sep { color: #6a655c; padding: 0 8px; }

@media (min-width: 700px) {
  .cards3 { grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
  /* Two or four doors read better side by side than squeezed into three columns. */
  .cards3.two-up { grid-template-columns: 1fr 1fr; }
  .facts li { grid-template-columns: 150px 1fr; gap: 20px; }
  .cta-two { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ---------- Japanese version ---------- */
:lang(ja) {
  font-family: "EB Garamond", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  line-height: 2;
}
html[lang="ja"] .eyebrow,
html[lang="ja"] .sec-num,
html[lang="ja"] .hero-note,
html[lang="ja"] .sub,
html[lang="ja"] .aside,
html[lang="ja"] .origin-note,
html[lang="ja"] .quote-cite,
html[lang="ja"] .foot-line,
html[lang="ja"] .defs dt {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, var(--sans);
  letter-spacing: .06em;
}
html[lang="ja"] .defs dt { text-transform: none; font-size: 14px; }
html[lang="ja"] .tagline { max-width: 16em; }
html[lang="ja"] .brand { letter-spacing: .02em; }
/* Japanese wraps at any character; keep short lines from breaking awkwardly. */
html[lang="ja"] .prose p, html[lang="ja"] .card p { line-break: strict; overflow-wrap: break-word; }
html[lang="ja"] .facts-k,
html[lang="ja"] .facts-note,
html[lang="ja"] .flow-n,
html[lang="ja"] .choice-note,
html[lang="ja"] .privacy,
html[lang="ja"] .card-link .go,
html[lang="ja"] .sitenav {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, var(--sans);
  letter-spacing: .06em;
}
html[lang="ja"] .person-role,
html[lang="ja"] .up-when,
html[lang="ja"] .up-note {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, var(--sans);
  letter-spacing: .08em;
  text-transform: none;
}
html[lang="ja"] .person-role { font-size: 13.5px; }
html[lang="ja"] .up-when { font-size: 13px; }
html[lang="ja"] .person-bio { max-width: 32em; }
html[lang="ja"] .tagline-big { max-width: 18em; }
html[lang="ja"] .facts-k { text-transform: none; font-size: 13px; }
html[lang="ja"] .card-link .go { text-transform: none; font-size: 13px; }
html[lang="ja"] .page-hero .lede { max-width: 22em; }
html[lang="ja"] .form-light button { text-transform: none; letter-spacing: .1em; }
html[lang="ja"] .lang-pick legend { text-transform: none; letter-spacing: .08em; font-size: 13px; }
html[lang="ja"] .lang-pick label {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, var(--sans);
  letter-spacing: .06em;
}

/* ---------- Photograph slots ----------
   Drop-in for the real photographs (hands at the brush, finished sheets, the room).
   Same left/right edge as the prose, so a picture can be pasted into any band without
   touching the layout. width/height on the <img> keep the space reserved: no shift.
   Swap procedure: README.md, "Photographs". */
.shot { margin: 40px 0 0; }
.shot img {
  display: block; width: 100%; height: auto;
  background: #eae5d8; border: 1px solid var(--line);
}
.shot figcaption {
  font-family: var(--sans); font-size: 13px; line-height: 1.75;
  color: var(--sub); margin-top: 10px;
}
html[lang="ja"] .shot figcaption {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, var(--sans);
  letter-spacing: .06em;
}
.shot-duo { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 40px 0 0; }
.shot-duo .shot { margin: 0; }
@media (min-width: 700px) { .shot-duo { grid-template-columns: 1fr 1fr; } }

/* Three-up gallery: stacked on phones, side by side from tablet width. Each shot
   keeps its own natural proportions (no forced crop). */
.shot-trio { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 40px 0 0; }
.shot-trio .shot { margin: 0; }
@media (min-width: 700px) { .shot-trio { grid-template-columns: 1fr 1fr 1fr; } }

/* Cover variant: for a pair of tall photographs with different aspect ratios that
   need to read as the same height side by side. */
.shot-duo-cover .shot img { aspect-ratio: 3 / 4; object-fit: cover; }

/* ---------- Motion ----------
   Quiet by design: a short fade with a 14px rise, ease-out, no bounce, no parallax.
   Everything here is gated on .js-motion, which assets/motion.js adds to <html> only
   when the reader has not asked for reduced motion. With JS off nothing below applies
   and the page renders exactly as it did before.
   Only opacity / translate / transform are animated — none of them reflow, so the
   layout does not shift. */
.js-motion .reveal {
  opacity: 0;
  translate: 0 14px;
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), translate .7s cubic-bezier(.22, .61, .36, 1);
}
.js-motion .reveal.visible { opacity: 1; translate: none; }

/* Hero: comes in on load, name first, the supporting lines just behind it. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.js-motion .hero-person .eyebrow,
.js-motion .hero-person .portrait,
.js-motion .hero-person .person-name,
.js-motion .hero-person .person-role,
.js-motion .hero-person .person-bio,
.js-motion .page-hero h1,
.js-motion .page-hero .sub,
.js-motion .page-hero .lede {
  animation: rise-in .8s cubic-bezier(.22, .61, .36, 1) both;
}
.js-motion .hero-person .eyebrow     { animation-delay: .06s; }
.js-motion .hero-person .portrait    { animation-delay: .12s; }
.js-motion .hero-person .person-name { animation-delay: .18s; }
.js-motion .hero-person .person-role { animation-delay: .30s; }
.js-motion .hero-person .person-bio  { animation-delay: .38s; }
.js-motion .page-hero h1             { animation-delay: .05s; }
.js-motion .page-hero .sub           { animation-delay: .18s; }
.js-motion .page-hero .lede          { animation-delay: .28s; }

/* The vermilion rule above the tagline draws itself in when the band is reached.
   It is a 1px block on its own line, so widening it moves nothing else. */
.js-motion .band-tagline .tagline-big::before {
  width: 0;
  transition: width .9s cubic-bezier(.22, .61, .36, 1) .15s;
}
.js-motion .band-tagline .tagline-big.visible::before { width: 40px; }

/* The same rule over a card heading extends a little on hover. */
.card-link h3::before { transition: width .28s cubic-bezier(.22, .61, .36, 1); }
.card-link:hover h3::before { width: 34px; }

/* Links: the same understated hover everywhere. */
.sitenav a, .lang-alt, .foot-nav a, .cta-box a,
.prose a, .aside a, .card p a, .card-link .go, .upcoming a {
  transition: color .2s ease, border-color .2s ease;
}

/* Second, independent stop for reduced motion: even if .js-motion has somehow been
   left on the element, nothing moves and nothing stays hidden. */
@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal,
  .js-motion .reveal.visible {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
    animation: none !important;
    transition-delay: 0s !important;
  }
  .js-motion .hero-person .eyebrow,
  .js-motion .hero-person .portrait,
  .js-motion .hero-person .person-name,
  .js-motion .hero-person .person-role,
  .js-motion .hero-person .person-bio,
  .js-motion .page-hero h1,
  .js-motion .page-hero .sub,
  .js-motion .page-hero .lede { animation: none !important; opacity: 1 !important; transform: none !important; }
  .card-link:hover { transform: none !important; box-shadow: none !important; }
  .card-link:hover h3::before { width: 22px !important; }
  /* the rule must be drawn, not animated in */
  .js-motion .band-tagline .tagline-big::before { width: 40px !important; }
}