/* Inner pages (everything except the homepage). Loaded after main.css and v3.css. */
:root { --ivory: #fcfbf8; --navy: #0a2a57; --gold-deep: #c8901f; }

/* ---------- Hero band ---------- */
.inner { background: var(--ivory); }
.phero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--navy);
  padding: clamp(44px, 6vw, 84px) 0 clamp(78px, 9vw, 120px); }
.phero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: saturate(.9); }
.phero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(7, 32, 70, .96) 0%, rgba(10, 42, 87, .82) 46%, rgba(10, 42, 87, .45) 100%),
              radial-gradient(520px 300px at 88% 0%, rgba(224, 170, 62, .26), transparent 70%); }
.phero__inner { position: relative; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0 0 22px; padding: 0; font-size: .78rem; color: #b9c9e6; }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: #6f86b3; }
.crumbs a { color: #dbe6fa; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] { color: #fff; }
.phero .eyebrow { margin-bottom: 12px; }
.phero__title { margin: 0; max-width: 20ch; font: 700 clamp(2.1rem, 5.2vw, 3.9rem) / 1.06 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.phero__title::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 20px; border-radius: 2px; background: var(--gold-bright); }
.phero__lede { max-width: 60ch; margin: 18px 0 0; color: #d5e0f5; font-size: 1.02rem; }
.phero__edge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(36px, 5vw, 70px); fill: var(--ivory); }

/* ---------- Body: section menu + article ---------- */
.pbody { display: block; padding: clamp(8px, 2vw, 24px) 0 clamp(56px, 7vw, 96px); }
.snav--d { display: none; }
.snav--m { margin: 0 0 28px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.snav--m summary { padding: 14px 18px; cursor: pointer; font-weight: 600; color: var(--navy); }
.snav--m[open] { padding-bottom: 12px; }
.snav--m .snav__head, .snav--m .snav__list { margin-inline: 18px; }
.snav__head { margin: 18px 0 6px; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.snav__list { list-style: none; margin: 0; padding: 0; }
.snav__list a { display: block; padding: 7px 12px; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; color: #34415c; font-size: .9rem; line-height: 1.4; text-decoration: none; }
.snav__list a:hover { background: var(--tint); color: var(--navy); }
.snav__list a[aria-current] { border-left-color: var(--gold-bright); background: var(--gold-soft); color: var(--navy); font-weight: 600; }
@media (min-width: 1000px) {
  .pbody--side { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
  .snav--m { display: none; }
  .snav--d { display: block; position: sticky; top: calc(var(--hdr, 90px) + 20px); max-height: calc(100vh - var(--hdr, 90px) - 40px); overflow: auto;
    padding: 20px 14px 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 14px 34px rgba(9, 38, 77, .07); }
  .snav__title { display: block; margin: 0 0 2px 12px; font: 700 1.3rem / 1.2 var(--serif); color: var(--navy); text-decoration: none; }
}

/* ---------- Prose ---------- */
.prose { min-width: 0; color: #28324a; font-size: 1rem; line-height: 1.8; }
.prose > *:first-child { margin-top: 0; }
.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { color: var(--navy); font-family: var(--serif); line-height: 1.22; letter-spacing: -.005em; margin: 1.6em 0 .55em; scroll-margin-top: calc(var(--hdr, 90px) + 20px); }
.prose h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.prose h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.prose h4 { font-size: 1.3rem; }
.prose h5 { font-size: 1.12rem; }
.prose h6 { font-size: 1rem; }
.prose h2 { padding-bottom: .35em; border-bottom: 1px solid var(--line); }
.prose p { margin: 0 0 1.05em; }
.prose a { color: #0a4aa0; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--gold-deep); }
.prose b, .prose strong { color: #14213d; font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose li { margin: .3em 0; padding-left: .2em; }
.prose li::marker { color: var(--gold-deep); }
.prose ul ul, .prose ol ul, .prose ul ol { margin: .4em 0 .6em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.prose blockquote { margin: 1.4em 0; padding: .6em 1.2em; border-left: 4px solid var(--gold-bright); background: var(--gold-soft); border-radius: 0 10px 10px 0; }
.prose img { max-width: 100%; height: auto; border-radius: 10px; }
.prose a img { transition: transform .4s var(--ease), box-shadow .4s; }
.prose .fit { width: 100%; max-height: 80vh; object-fit: contain; }
.prose .f-right { float: right; margin: 0 0 14px 20px; max-width: 42%; }
.prose .f-left { float: left; margin: 0 20px 14px 0; max-width: 42%; }
.prose .t-center { text-align: center; }
.prose .t-right { text-align: right; }
.prose [data-event], .prose [id^="latest-"] { scroll-margin-top: calc(var(--hdr, 90px) + 20px); }
.prose .is-target { animation: target-glow 2.4s ease-out 1; }
@keyframes target-glow { 0% { box-shadow: 0 0 0 0 rgba(224, 170, 62, .0); background: rgba(224, 170, 62, .22); } 100% { background: transparent; } }
.prose .back { display: inline-block; margin-bottom: 18px; font-weight: 600; text-decoration: none; }

/* Bootstrap-style 12 column layout the original pages use (the markup keeps g-row / g-<bp>-<n>) */
.g-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 24px; margin: 0 0 18px; }
.g-row > * { grid-column: 1 / -1; min-width: 0; }
.g { grid-column: span 12; min-width: 0; }
.g-xs-1 { grid-column: span 1; } .g-xs-2 { grid-column: span 2; } .g-xs-3 { grid-column: span 3; } .g-xs-4 { grid-column: span 4; }
.g-xs-5 { grid-column: span 5; } .g-xs-6 { grid-column: span 6; } .g-xs-7 { grid-column: span 7; } .g-xs-8 { grid-column: span 8; }
.g-xs-9 { grid-column: span 9; } .g-xs-10 { grid-column: span 10; } .g-xs-11 { grid-column: span 11; } .g-xs-12 { grid-column: span 12; }
@media (min-width: 768px) {
  .g-sm-1 { grid-column: span 1; } .g-sm-2 { grid-column: span 2; } .g-sm-3 { grid-column: span 3; } .g-sm-4 { grid-column: span 4; }
  .g-sm-5 { grid-column: span 5; } .g-sm-6 { grid-column: span 6; } .g-sm-7 { grid-column: span 7; } .g-sm-8 { grid-column: span 8; }
  .g-sm-9 { grid-column: span 9; } .g-sm-10 { grid-column: span 10; } .g-sm-11 { grid-column: span 11; } .g-sm-12 { grid-column: span 12; }
}
@media (min-width: 992px) {
  .g-md-1 { grid-column: span 1; } .g-md-2 { grid-column: span 2; } .g-md-3 { grid-column: span 3; } .g-md-4 { grid-column: span 4; }
  .g-md-5 { grid-column: span 5; } .g-md-6 { grid-column: span 6; } .g-md-7 { grid-column: span 7; } .g-md-8 { grid-column: span 8; }
  .g-md-9 { grid-column: span 9; } .g-md-10 { grid-column: span 10; } .g-md-11 { grid-column: span 11; } .g-md-12 { grid-column: span 12; }
}
@media (min-width: 1200px) {
  .g-lg-1 { grid-column: span 1; } .g-lg-2 { grid-column: span 2; } .g-lg-3 { grid-column: span 3; } .g-lg-4 { grid-column: span 4; }
  .g-lg-5 { grid-column: span 5; } .g-lg-6 { grid-column: span 6; } .g-lg-7 { grid-column: span 7; } .g-lg-8 { grid-column: span 8; }
  .g-lg-9 { grid-column: span 9; } .g-lg-10 { grid-column: span 10; } .g-lg-11 { grid-column: span 11; } .g-lg-12 { grid-column: span 12; }
}
/* a column that is itself a nested row of columns */
.g > .g { grid-column: auto; }

/* Photo runs: several images side by side become a tidy gallery */
.prose .g:has(> img + img), .prose .g-row:has(> img + img), .prose p:has(> img + img) {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; align-items: start; }
.prose .g:has(> img + img) > img, .prose .g-row:has(> img + img) > img, .prose p:has(> img + img) > img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; box-shadow: 0 10px 24px rgba(9, 38, 77, .14); transition: transform .35s var(--ease); }
.prose .g:has(> img + img) > img:hover { transform: translateY(-3px); }
.prose img:not(a img):not(.fit):hover { cursor: zoom-in; }

/* Embeds */
.embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 1.2em; border-radius: 14px; overflow: hidden; background: #0a1f45; box-shadow: 0 16px 34px rgba(9, 38, 77, .18); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Tables */
.tbl-wrap { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.5; }
.prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--navy); color: #fff; font-weight: 600; white-space: nowrap; }
.prose tbody tr:nth-child(even) td { background: #f6f9fd; }
.prose td img { border-radius: 6px; }

/* Gallery (albums and photos) */
.albums, .photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }
.albums li { margin: 0; padding: 0; }
.albums a { position: relative; display: block; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3; background: var(--navy); box-shadow: 0 16px 34px rgba(9, 38, 77, .16); text-decoration: none; }
.albums img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .6s var(--ease); }
.albums a:hover img { transform: scale(1.06); }
.albums span { position: absolute; left: 0; right: 0; bottom: 0; padding: 38px 18px 16px; color: #fff; font: 600 1.15rem / 1.2 var(--serif); background: linear-gradient(0deg, rgba(4, 23, 47, .86), transparent); }
.photos li { margin: 0; padding: 0; }
.photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; box-shadow: 0 10px 24px rgba(9, 38, 77, .14); transition: transform .35s var(--ease); }
.photos img:hover { transform: translateY(-3px); }

/* Golden Jubilee videocast page */
@media (min-width: 992px) {
  .jubilee-top > .left-jubilee { grid-column: span 4; position: sticky; top: calc(var(--hdr, 90px) + 20px); align-self: start; }
  .jubilee-top > .podcast-list { grid-column: span 8; margin-top: 0; }
}
.jubilee-card { padding: clamp(22px, 3vw, 34px); border-radius: 18px; color: #fff; background: linear-gradient(150deg, #0a2a57, #0a3e7c); box-shadow: 0 22px 44px rgba(9, 38, 77, .24); }
.jubilee-card h2 { margin: 0 0 14px; padding: 0; border: 0; color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.jubilee-logo { margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; background: #fff; }
.jubilee-logo img { width: 100%; max-height: 230px; object-fit: contain; border-radius: 0; }
.jubilee-sub { color: #d7e3f7; font-size: .95rem; }
.prose a.jubilee-cta { display: inline-block; margin-top: 6px; padding: 12px 22px; border-radius: 999px; background: var(--gold-bright); color: var(--brand-ink); font-weight: 600; text-decoration: none; }
.prose a.jubilee-cta:hover { background: #f0bd55; color: var(--brand-ink); }
.podcast-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 20px; margin-top: 8px; }
.podcast-card2 { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 12px 12px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 12px 28px rgba(9, 38, 77, .08); }
.podcast-card2 img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: 10px; }
.podcast-card2 h3 { margin: 4px 6px 0; font-size: 1.15rem; line-height: 1.25; }
.prose a.yt-btn { margin: 0 6px; justify-self: start; padding: 8px 16px; border-radius: 999px; background: var(--navy); color: #fff; font-size: .82rem; font-weight: 600; text-decoration: none; }
.prose a.yt-btn:hover { background: var(--gold-deep); color: #fff; }

/* ---------- Image viewer ---------- */
.lb { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(3, 14, 32, .94); color: #fff; }
.lb::backdrop { background: rgba(3, 14, 32, .94); }
.lb[open] { display: grid; grid-template-rows: 1fr auto; place-items: center; }
.lb__img { max-width: min(94vw, 1500px); max-height: calc(100vh - 110px); width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lb__bar { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 14px 20px 20px; font-size: .86rem; color: #c9d7ef; }
.lb__btn { display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.lb__btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--brand-ink); }
.lb__close { position: absolute; right: 18px; top: 16px; }
.lb__btn[hidden] { display: none; }

/* ---------- Closing call-to-action ---------- */
.pcta { background: linear-gradient(120deg, #0a2a57, #0a3e7c); color: #fff; }
.pcta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-block: clamp(30px, 4vw, 48px); }
.pcta .eyebrow { margin-bottom: 4px; color: var(--gold-bright); }
.pcta__h { margin: 0; font: 700 clamp(1.4rem, 2.6vw, 2rem) / 1.2 var(--serif); }
.pcta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.pcta .btn--primary { background: var(--gold-bright); color: var(--brand-ink); box-shadow: none; }
.pcta .btn--primary:hover { background: #f0bd55; }
.pcta .btn--ghost { border-color: rgba(255, 255, 255, .6); color: #fff; }
.pcta .btn--ghost:hover { background: #fff; color: var(--navy); }

@media (max-width: 640px) {
  .prose .f-right, .prose .f-left { float: none; max-width: 100%; margin: 0 0 14px; }
  .prose th, .prose td { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { .prose a img, .albums img, .photos img, .prose .g:has(> img + img) > img, .prose .is-target { transition: none; animation: none; } }

/* Contact page */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; margin: 0 0 28px; }
.contact__card { padding: 24px 24px 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 14px 30px rgba(9, 38, 77, .07); }
.contact__card h2 { margin: 0 0 10px; padding: 0; border: 0; font-size: 1.25rem; }
.contact__card p { margin: 0; line-height: 1.7; }
.contact__card a { word-break: break-word; }
.contact__map { overflow: hidden; border-radius: 16px; box-shadow: 0 16px 34px rgba(9, 38, 77, .14); aspect-ratio: 16 / 7; min-height: 260px; background: var(--tint); }
.contact__map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ================= Consistent imagery + bento grids ================= */
/* any picture left inside running text: one size cap everywhere */
.prose img { max-height: 380px; width: auto; max-width: 100%; object-fit: contain; }
.prose .fit { width: auto; max-height: 380px; }
.g > img, .g > a > img { box-shadow: 0 10px 24px rgba(9, 38, 77, .12); }

.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 15vw, 178px); grid-auto-flow: dense; gap: 12px; margin: 0 0 1.6em; }
.bento > img, .bento > a { display: block; width: 100%; height: 100%; min-height: 0; overflow: hidden; border-radius: 16px; background: var(--tint); box-shadow: 0 12px 26px rgba(9, 38, 77, .13); }
.bento > a > img { width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; }
.prose .bento > img { width: 100%; height: 100%; max-height: none; max-width: none; object-fit: cover; cursor: zoom-in; transition: transform .5s var(--ease), box-shadow .3s; }
.prose .bento > img:hover { transform: scale(1.025); box-shadow: 0 18px 34px rgba(9, 38, 77, .22); position: relative; z-index: 1; }
/* rhythm: every 5 photos = one big tile and four small ones, no gaps */
.bento > :nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
/* short runs get their own shapes */
.bento--1 { grid-template-columns: minmax(0, 520px); grid-auto-rows: clamp(200px, 28vw, 330px); }
.bento--1 > :nth-child(n) { grid-column: auto; grid-row: auto; }
.bento--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 22vw, 260px); }
.bento--2 > :nth-child(n) { grid-column: auto; grid-row: auto; }
.bento--3 { grid-template-columns: 2fr 1fr; grid-auto-rows: clamp(100px, 12vw, 140px); }
.bento--3 > :nth-child(1) { grid-column: 1; grid-row: span 2; }
.bento--3 > :nth-child(n+2) { grid-column: 2; grid-row: auto; }
.bento--4 > :nth-child(n) { grid-column: auto; grid-row: auto; }
.bento--4 > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
.bento--4 > :nth-child(4) { grid-column: span 2; }
.bento--5 > :nth-child(n) { grid-column: auto; grid-row: auto; }
.bento--5 > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 700px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 120px; gap: 8px; }
  .bento--1 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; }
  .bento--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento--3 > :nth-child(1) { grid-column: 1 / -1; grid-row: span 2; }
  .bento--3 > :nth-child(n+2) { grid-column: auto; }
}

/* gallery albums as a bento too */
.albums { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 17vw, 210px); grid-auto-flow: dense; gap: 14px; }
.albums li { min-height: 0; }
.albums a { height: 100%; aspect-ratio: auto; }
.albums li:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
.photos { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 15vw, 178px); grid-auto-flow: dense; gap: 12px; }
.photos li { min-height: 0; }
.photos img { height: 100%; aspect-ratio: auto; border-radius: 16px; max-height: none; }
.photos li:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 700px) {
  .albums, .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 130px; }
}

/* ================= About page ================= */
.ab { display: grid; gap: clamp(34px, 5vw, 60px); }
.ab h2 { margin: 0 0 22px; padding: 0; border: 0; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.ab h2 small { display: block; margin-top: 4px; font: 600 .72rem / 1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.ab-intro { display: grid; gap: 22px 40px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.ab-lede { font: 400 clamp(1.15rem, 1.9vw, 1.4rem) / 1.6 var(--serif); color: var(--navy); }
.ab-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.ab-facts li { margin: 0; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(9, 38, 77, .07); }
.ab-facts li:first-child { grid-column: 1 / -1; background: linear-gradient(135deg, #0a2a57, #0a3e7c); border: 0; color: #cfdcf3; }
.ab-facts b { display: block; font: 700 clamp(1.9rem, 3.4vw, 2.7rem) / 1 var(--serif); color: var(--navy); }
.ab-facts li:first-child b { color: var(--gold-bright); font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
.ab-facts span { display: block; margin-top: 6px; font-size: .82rem; line-height: 1.4; color: var(--muted); }
.ab-facts li:first-child span { color: #cfdcf3; }
.ab-founder { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px 36px; align-items: center; padding: clamp(20px, 3vw, 34px); border-radius: 22px; background: linear-gradient(160deg, #fff, var(--gold-soft)); border: 1px solid #ecdcb4; }
.ab-founder figure { margin: 0; }
.ab-founder img { width: 100%; height: 300px; max-height: none; object-fit: cover; object-position: top; border-radius: 16px; border: 3px solid #fff; box-shadow: 0 18px 36px rgba(9, 38, 77, .2); }
.ab-founder figcaption { margin-top: 10px; font-size: .84rem; line-height: 1.4; color: var(--muted); text-align: center; }
.ab-founder p:last-child { margin: 0; }
.ab-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ab-person { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(9, 38, 77, .08); }
.ab-person img { width: 100%; height: 250px; max-height: none; object-fit: cover; object-position: top; border-radius: 0; background: var(--tint); }
.ab-person__body { padding: 18px 20px 22px; }
.ab-person h3 { margin: 0 0 8px; font-size: 1.2rem; line-height: 1.25; }
.ab-years { display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; background: var(--gold-soft); color: #7a5410; font-size: .78rem; font-weight: 600; }
.ab-person ul { margin: 0; padding-left: 1.1em; font-size: .9rem; line-height: 1.6; }
.ab-person li { margin: .3em 0; }
/* the current post-holder (last card in a list that ends a row) gets the wide navy card */
.ab-person:last-child:nth-child(3n+1) { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: 260px minmax(0, 1fr); background: linear-gradient(135deg, #0a2a57, #0a3e7c); border: 0; color: #dbe6fa; }
.ab-person:last-child:nth-child(3n+1) h3 { color: #fff; }
.ab-person:last-child:nth-child(3n+1) .ab-years { background: var(--gold-bright); color: var(--brand-ink); }
.ab-person:last-child:nth-child(3n+1) li::marker { color: var(--gold-bright); }
.ab-person:last-child:nth-child(3n+1) a { color: #ffd98a; }
.ab-person:last-child:nth-child(3n+1) img { height: 100%; min-height: 240px; }
@media (max-width: 980px) {
  .ab-intro { grid-template-columns: 1fr; }
  .ab-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-person:last-child:nth-child(3n+1) { grid-column: auto; grid-template-columns: none; grid-template-rows: auto 1fr; }
  .ab-person:last-child:nth-child(3n+1) img { height: 250px; }
  .ab-person:last-child:nth-child(2n+1) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ab-founder { grid-template-columns: 1fr; }
  .ab-founder figure { max-width: 240px; }
  .ab-people { grid-template-columns: 1fr; }
}

.prose .photos img, .prose .albums img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.prose .photos li:nth-child(n), .prose .albums li:nth-child(n) { min-height: 0; }
@media (max-width: 700px) { .albums li:nth-child(5n+1), .photos li:nth-child(5n+1) { grid-column: 1 / -1; grid-row: span 2; } }

.prose .photos, .prose .albums { padding: 0; margin: 0; }
.prose .photos li, .prose .albums li { padding: 0; margin: 0; }

/* ================= Shared page layout (the one grid every inner page uses) ================= */
/* 12-column content area; blocks are: .pg-lede, .card, .pg-cards, .pg-split (main + side), .bento, .timeline */
.pg { display: grid; gap: clamp(20px, 3vw, 34px); min-width: 0; }
.pg-lede { margin: 0; font: 400 clamp(1.2rem, 2vw, 1.5rem) / 1.6 var(--serif); color: var(--navy); max-width: 62ch; }
.pg-kicker { margin: 0 0 1em; padding: 6px 14px; border-left: 4px solid var(--gold-bright); background: var(--gold-soft); border-radius: 0 10px 10px 0; font-size: .9rem; color: #5f4510; }
.pg-sign { margin: 1.4em 0 0; font: 700 1.15rem / 1.3 var(--serif); color: var(--navy); text-align: right; }

.card { padding: clamp(20px, 2.6vw, 32px); border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 14px 32px rgba(9, 38, 77, .07); min-width: 0; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card h2, .card h3 { margin: 0 0 .6em; padding: 0; border: 0; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.25; }
.card h4 { margin: 1.2em 0 .4em; font: 600 .74rem / 1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.card ul { margin: 0 0 1em; }
.card--prose p { margin-bottom: 1.1em; }
.card--lede { background: linear-gradient(160deg, #fff, var(--gold-soft)); border-color: #ecdcb4; font-size: 1.04rem; }
.card--notice { background: linear-gradient(135deg, #0a2a57, #0a3e7c); border: 0; color: #fff; }
.card--notice h2 { margin: 0; color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.card--notice .eyebrow { color: var(--gold-bright); }
.card__no { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 50%; background: var(--navy); color: var(--gold-bright); font: 700 1rem / 1 var(--serif); }
.pg-cards { display: grid; gap: clamp(14px, 2vw, 22px); }
.pg-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-cards .card--wide { grid-column: 1 / -1; }
.card--wide ul { columns: 2 340px; column-gap: 36px; }
.card--wide li { break-inside: avoid; }
@media (max-width: 900px) { .pg-cards--2, .pg-cards--3 { grid-template-columns: 1fr; } }

/* main text + a side card (portrait) */
.pg-split { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.pg-side { position: sticky; top: calc(var(--hdr, 90px) + 20px); }
.pcard { margin: 0; overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 38px rgba(9, 38, 77, .12); }
.pcard img { width: 100%; height: 340px; max-height: none; object-fit: cover; object-position: top; border-radius: 0; }
.pcard--photo img { height: 300px; object-position: center; }
.pcard figcaption { display: grid; gap: 2px; padding: 16px 20px 20px; background: linear-gradient(135deg, #0a2a57, #0a3e7c); color: #cfdcf3; font-size: .86rem; line-height: 1.4; }
.pcard figcaption b { color: #fff; font: 700 1.15rem / 1.25 var(--serif); }
@media (max-width: 900px) { .pg-split { grid-template-columns: 1fr; } .pg-side { position: static; max-width: 320px; order: -1; } }
.card--prose .lede { font: 400 1.2rem / 1.65 var(--serif); color: var(--navy); }

.pg-video .embed { max-width: 960px; }

/* timeline */
.prose .timeline { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 116px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--gold-bright), var(--line)); }
.prose .timeline__item { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 40px; margin: 0; padding: 0; align-items: start; }
.timeline__item::before { content: ""; position: absolute; left: 109px; top: 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 5px var(--ivory); }
.timeline__item--note::before { background: var(--line); }
.timeline__year { padding: 8px 0 0; font: 700 1.1rem / 1.3 var(--serif); color: var(--navy); text-align: right; }
.timeline__item > div { padding: 14px 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 20px rgba(9, 38, 77, .05); }
.prose .timeline__media { margin: 6px 0 10px 136px; padding: 0; }
.timeline__media .bento { margin: 0; }
@media (max-width: 640px) {
  .timeline::before { left: 8px; }
  .prose .timeline__item { grid-template-columns: 1fr; padding-left: 28px; gap: 6px; }
  .timeline__item::before { left: 1px; }
  .timeline__year { text-align: left; padding: 0; }
  .prose .timeline__media { margin-left: 28px; }
}

/* captioned photos inside a bento */
.bento > figure { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: var(--tint); box-shadow: 0 12px 26px rgba(9, 38, 77, .13); min-height: 0; }
.prose .bento > figure > img { width: 100%; height: 100%; max-height: none; max-width: none; object-fit: cover; border-radius: 0; cursor: zoom-in; transition: transform .5s var(--ease); }
.bento > figure:hover > img { transform: scale(1.04); }
.bento > figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 11px; color: #fff; font-size: .8rem; line-height: 1.35; background: linear-gradient(0deg, rgba(4, 23, 47, .85), transparent); pointer-events: none; }

.pg-main { display: grid; gap: clamp(16px, 2vw, 24px); min-width: 0; }
.bento > :nth-last-child(-n+3):nth-child(5n+1) { grid-column: auto; grid-row: auto; }

/* ================= Photo tiles: equal tiles, no gaps, never stretched past their size ================= */
.prose .bento { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); grid-auto-rows: auto; grid-auto-flow: row; gap: 12px; margin: 0 0 1.6em; }
.prose .bento > :nth-child(n) { grid-column: auto; grid-row: auto; }
.prose .bento > img, .prose .bento > figure, .prose .bento > a { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.prose .bento > figure > img, .prose .bento > a > img { width: 100%; height: 100%; object-fit: cover; }
.prose .bento > img { object-fit: cover; object-position: center 30%; }
.prose .bento--1 { grid-template-columns: minmax(0, 340px); }
.prose .bento--2 { grid-template-columns: repeat(2, minmax(0, 260px)); }
.prose .bento--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; }
@media (max-width: 600px) { .prose .bento, .prose .bento--2, .prose .bento--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prose .bento--1 { grid-template-columns: minmax(0, 1fr); } }

/* album covers and album photos use the same equal tiles */
.prose .albums, .prose .photos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); grid-auto-rows: auto; gap: 14px; }
.prose .albums li:nth-child(n), .prose .photos li:nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
.prose .photos li img { height: 100%; }

/* about: portraits come from small originals, so keep them modest and crisp */
.ab-person img { background: #fff; height: 230px; object-position: center 22%; }
.ab-founder img { background: #fff; }
.timeline__media .bento { max-width: 720px; }

.prose .bento { grid-auto-rows: min-content; align-items: start; }
.prose .albums, .prose .photos { grid-auto-rows: min-content; align-items: start; }

/* flex version of the tile grid: height always follows width, so rows can never grow taller than the tiles */
.prose .bento { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; max-width: none; }
.prose .bento > img, .prose .bento > figure, .prose .bento > a { flex: 0 0 auto; width: calc((100% - 36px) / 4); height: auto; aspect-ratio: 4 / 3; }
.prose .bento--1 > * { width: min(100%, 340px); }
.prose .bento--2 > * { width: calc((100% - 12px) / 2); max-width: 300px; }
.prose .bento--3 > * { width: calc((100% - 24px) / 3); max-width: 260px; }
.prose .bento--5 > *, .prose .bento--6 > * { width: calc((100% - 36px) / 4); }
.prose .bento--6 > *, .prose .bento--7 > * { width: calc((100% - 36px) / 4); }
@media (max-width: 700px) { .prose .bento > *, .prose .bento--2 > *, .prose .bento--3 > *, .prose .bento--5 > *, .prose .bento--6 > *, .prose .bento--7 > * { width: calc((100% - 12px) / 2); max-width: none; } .prose .bento--1 > * { width: 100%; } }
.prose .albums, .prose .photos { display: flex; flex-wrap: wrap; gap: 14px; }
.prose .albums li, .prose .photos li { flex: 0 0 auto; width: calc((100% - 42px) / 4); aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .prose .albums li, .prose .photos li { width: calc((100% - 14px) / 2); } }

/* ================= Sections on the shared layout ================= */
.sec { scroll-margin-top: calc(var(--hdr, 90px) + 20px); }
.sec > h3 { margin: 0 0 .7em; padding-bottom: .55em; border-bottom: 1px solid var(--line); }
.sec > h3::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 12px; border-radius: 50%; background: var(--gold-bright); vertical-align: middle; }
.sec p, .sec ul:not(.docs) { max-width: 78ch; }
.sec .bento { margin-top: 1.1em; margin-bottom: 0; }
.sec .tbl-wrap, .sec .embed { max-width: none; }
.sec--split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 clamp(20px, 3vw, 40px); align-items: start; }
.sec--split > h3 { grid-column: 1 / -1; }
.sec--split .bento { margin-top: 0; }
.prose .sec--split .bento > img, .prose .sec--split .bento > figure, .prose .sec--split .bento > a { width: calc((100% - 12px) / 2); max-width: none; }
.prose .sec--split .bento--1 > * { width: 100%; }
@media (max-width: 1100px) { .sec--split { grid-template-columns: 1fr; } .sec--split .bento { margin-top: 1.1em; } }
.sec.is-target, .prose .sec.is-target { box-shadow: 0 0 0 3px rgba(224, 170, 62, .55), 0 14px 32px rgba(9, 38, 77, .07); }
.card--col h3, .card--col h4:first-child { margin-top: 0; }
.card--col p { margin: 0 0 .5em; }
.card--col p a { display: inline-block; padding: 2px 0; }
.pg-cards--1 { grid-template-columns: 1fr; }
.pg > .pg-cards { margin: 0; }

/* rows of document links */
.docs { display: grid; gap: 10px; margin: 0 0 1em; padding: 0; list-style: none; }
.docs li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfe; }
.docs li:hover { border-color: #c9d7ef; background: #fff; }
.docs span { flex: 1 1 280px; color: #28324a; }
.docs a, .prose .docs a { flex: 0 0 auto; display: inline-block; padding: 8px 18px; border-radius: 999px; background: var(--navy); color: #fff; font-size: .86rem; font-weight: 600; text-decoration: none; }
.docs li > a:only-child { flex: 1 1 auto; background: none; color: #0a4aa0; padding: 0; border-radius: 0; font-size: 1rem; text-decoration: underline; text-underline-offset: 3px; }
.docs a:hover { background: var(--gold-deep); color: #fff; }
.docs li > a:only-child:hover { background: none; color: var(--gold-deep); }

.prose .sec--split .bento.bento--1 > *, .prose .sec--split .bento.bento--1 > img { width: 100%; max-width: none; }

.sec > .eyebrow { margin: 0 0 6px; }

.prose .podcast-card2 img { width: 100%; height: auto; max-height: none; aspect-ratio: 1; object-fit: cover; object-position: center 18%; }

/* ================= Even photo rows (rows differ by at most one photo) ================= */
.prose .bento.bento--rows { display: flex; flex-direction: column; gap: 12px; max-width: none; margin: 1.2em 0 1.6em; align-items: stretch; }
.sec > .bento.bento--rows:last-child, .sec__media .bento.bento--rows { margin-bottom: 0; }
.prose .bento__row { display: flex; gap: 12px; align-items: flex-start; }
.prose .bento__row > * { flex: 1 1 0; min-width: 0; width: auto; max-width: 380px; height: auto; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: var(--tint); box-shadow: 0 12px 26px rgba(9, 38, 77, .13); position: relative; margin: 0; }
.prose .bento__row > img { object-fit: cover; object-position: center 30%; cursor: zoom-in; transition: transform .5s var(--ease); }
.prose .bento__row > img:hover { transform: scale(1.02); }
.prose .bento__row > figure > img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 0; cursor: zoom-in; }
.prose .bento__row > figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 11px; color: #fff; font-size: .8rem; line-height: 1.35; background: linear-gradient(0deg, rgba(4, 23, 47, .85), transparent); pointer-events: none; text-align: left; }
@media (max-width: 700px) {
  .prose .bento.bento--rows { flex-direction: row; flex-wrap: wrap; }
  .prose .bento__row { display: contents; }
  .prose .bento__row > * { flex: 0 0 calc(50% - 6px); max-width: none; }
}

/* a few photos beside plenty of text: photos at the right, text wraps round them; long text runs in two columns */
.sec--float { display: flow-root; }
.sec--float > h3 { clear: both; }
.sec__media { float: right; width: min(38%, 380px); margin: 4px 0 14px 28px; }
.sec__media .bento.bento--rows { margin: 0; }
.prose .sec__media .bento__row > * { max-width: none; }
@media (max-width: 900px) { .sec__media { float: none; width: 100%; max-width: 420px; margin: 0 0 16px; } }
.sec--cols .sec__text { column-count: 2; column-gap: 44px; }
.sec--cols .sec__text > * { break-inside: avoid-column; max-width: none; }
.sec--cols .sec__text p, .sec--cols .sec__text ul { max-width: none; }
@media (max-width: 900px) { .sec--cols .sec__text { column-count: 1; } }
.sec p, .sec ul:not(.docs) { max-width: none; }
.sec--float p { max-width: none; }

/* justified text inside every card */
.prose .card p, .prose .card li, .prose .sec__text p { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.prose .card .pg-sign, .prose .card .eyebrow, .prose .card--col h4, .prose .card .t-center, .prose .card .t-right, .prose .card td p, .prose .card th, .prose .card td, .prose .docs span { text-align: left; hyphens: none; }
.prose .card .pg-sign { text-align: right; }
.prose .card--col > p strong, .prose .card--col > p b { text-align: left; }

/* committee-style pages: portrait cards on top, the table full width underneath */
.pg-cards .card--col:has(.tbl-wrap) { grid-column: 1 / -1; }
.pg-cards .card--col > figure { margin: 0 0 14px; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 4.4; background: #fff; }
.pg-cards .card--col > figure img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center 18%; border-radius: 0; }
.pg-cards .card--col > figure + h4 { margin: 0; padding: 14px 4px 2px; text-align: center; font: 700 1.1rem / 1.35 var(--serif); color: var(--navy); letter-spacing: 0; text-transform: none; }
.card--col .tbl-wrap { margin: 12px 0 0; }
.card--col .tbl-wrap table { font-size: 1rem; }
.card--col .tbl-wrap td, .card--col .tbl-wrap th { padding: 12px 18px; }
.card--col .tbl-wrap th:first-child, .card--col .tbl-wrap td:first-child { width: 72px; text-align: center; }
.card--col .tbl-wrap th:last-child, .card--col .tbl-wrap td:last-child { width: 32%; }

.prose .bento__row { min-width: 0; width: 100%; }
@media (max-width: 700px) { .prose .bento__row { width: auto; } }

/* side-by-side: text and a narrow photo column */
.sec--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 0 clamp(20px, 3vw, 36px); align-items: start; }
.sec--split > h3, .sec--split > .eyebrow { grid-column: 1 / -1; }
.sec--split .sec__media { float: none; width: auto; margin: 0; }
@media (max-width: 900px) { .sec--split { grid-template-columns: 1fr; } .sec--split .sec__media { margin-top: 14px; max-width: 420px; } }

.prose .docs a *, .docs a b, .docs a strong, .docs a u { color: inherit; }

.prose .bento__row--1 > *, .prose .bento__row--2 > * { max-width: 480px; }
.prose .sec__media .bento__row > * { max-width: none; }
.sec--split { align-items: center; }

.prose .sec__media .bento__row > img { aspect-ratio: auto; height: auto; max-height: 520px; object-fit: contain; background: transparent; }

/* a lone photo that is not beside text keeps its own shape */
.prose .bento--n1 .bento__row { width: auto; }
.prose .bento--n1 .bento__row > img { flex: 0 1 auto; width: auto; max-width: 100%; max-height: 440px; aspect-ratio: auto; object-fit: contain; background: transparent; }
.prose .bento--n1 .bento__row > figure { flex: 0 1 auto; width: auto; max-width: 480px; aspect-ratio: auto; }
.prose .bento--n1 .bento__row > figure > img { height: auto; max-height: 440px; object-fit: contain; }

.prose .bento--n1 .bento__row { justify-content: center; }
.prose .bento--n1 .bento__row > img { width: min(100%, 720px); max-height: 560px; border-radius: 16px; box-shadow: 0 12px 26px rgba(9, 38, 77, .13); }

.prose .bento--n1 .bento__row > img { width: auto; height: auto; max-width: 100%; max-height: 560px; }

/* ================= Gap fixes ================= */
/* one photo beside a short text: landscape tile, text centred against it */
.sec--one { align-items: center; }
.sec--one .sec__text { align-self: center; }
.sec--one > .sec__media { width: 100%; }
.prose .sec--one .bento--n1 .bento__row { justify-content: flex-start; }
.prose .sec--one .bento--n1 .bento__row > img { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: none; object-fit: cover; object-position: center 22%; }
.prose .sec--one .bento--n1 .bento__row > figure { width: 100%; max-width: none; aspect-ratio: 4 / 3; }
.prose .sec--one .bento--n1 .bento__row > figure > img { height: 100%; object-fit: cover; object-position: center 22%; }
/* a lone photo with no text at all */
.prose .sec > .bento--n1 .bento__row > img { width: min(100%, 560px); aspect-ratio: 4 / 3; max-height: none; object-fit: cover; object-position: center 22%; }
/* card grids hug their content instead of stretching to the tallest card */
.pg-cards { align-items: start; }
.pg-cards--2 { display: block; column-count: 2; column-gap: 22px; }
.pg-cards--2 > .card { display: inline-block; width: 100%; margin: 0 0 22px; break-inside: avoid; }
.pg-cards--2 > .card--wide { column-span: all; display: block; }
@media (max-width: 900px) { .pg-cards--2 { column-count: 1; } }