.community__more { padding: 2rem clamp(24px, 6vw, 96px) 5rem; margin: 0; }
.community__intro { max-width: 34ch; margin: 0; padding: 0 clamp(24px,6vw,96px); font-size: clamp(1.05rem,1.4vw,1.3rem); }
.community__controls[hidden] { display: none; }

/* Shared subpage language: same type, colour and interaction tokens as the approved home. */
html.subpage { scroll-padding-top: 92px; }
.subpage .nav { justify-content: space-between; color: var(--text); background: var(--paper); }
.subpage .nav::before { display: none; }
.subpage .nav__links { text-shadow: none; }
.subpage .nav__links .nav__engage { background: var(--text); color: var(--paper); border-color: var(--text); }
.subpage .nav__links .nav__engage:hover,
.subpage .nav__links .nav__engage:focus-visible { background: var(--yellow); color: var(--text); transform: translateY(-2px); }
.subpage .nav__toggle { background: transparent; }
.subpage-brand { position: relative; z-index: 1; display: block; width: 148px; flex: none; }
.subpage-brand img { display: block; width: 100%; height: auto; }
.subpage .nav__links a[aria-current="page"] { border-bottom-color: currentColor; }
.subpage main { padding-top: 88px; }

.sub-hero { padding: clamp(64px, 9vw, 150px) clamp(24px, 6vw, 96px) clamp(80px, 9vw, 145px); min-height: min(720px, 83vh); display: grid; grid-template-columns: minmax(170px,.35fr) minmax(0,1fr); gap: clamp(28px,7vw,110px); align-items: start; background: var(--paper); }
.sub-hero .eyebrow { margin-top: .5em; }
.sub-hero .eyebrow .text-link { margin-top: 0; margin-bottom: 24px; }
.sub-hero__copy { max-width: 1050px; }
.sub-hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(4.1rem, 8.7vw, 10.8rem); font-weight: 300; line-height: .88; letter-spacing: -.058em; }
.sub-hero__intro { max-width: 610px; margin: clamp(32px,4vw,65px) 0 0 auto; font-size: clamp(1.15rem, 1.6vw, 1.55rem); line-height: 1.45; }
.sub-hero__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; margin-top: 34px; }
.sub-hero--purple { background: var(--burgundy); color: var(--paper); }
.sub-hero--purple .eyebrow { color: var(--paper); }
.sub-hero--purple .pill-link--outline { border-color: var(--paper); color: var(--paper); }
.sub-hero--purple .pill-link--outline:hover { background: var(--paper); color: var(--burgundy); }
/* Events hero (page-id-162): same as the People hero below, the buttons share the intro's column line. Scoped to Events because .sub-hero--purple is also the About hero. */
body.page-id-162 .sub-hero--purple .sub-hero__links { max-width: 610px; margin-left: auto; justify-content: flex-start; }
/* Living here hero (page-id-159): same principle. */
body.page-id-159 .sub-hero .sub-hero__links { max-width: 610px; margin-left: auto; justify-content: flex-start; }
/* Campus hero (page-id-161): same principle. */
body.page-id-161 .sub-hero .sub-hero__links { max-width: 610px; margin-left: auto; justify-content: flex-start; }
.sub-hero--blue { background: var(--blue); color: var(--text); }
/* People hero: the buttons share the intro's column line (same max-width and auto left margin as .sub-hero__intro), left aligned inside it. */
.sub-hero--blue .sub-hero__links { max-width: 610px; margin-left: auto; justify-content: flex-start; }

.sub-band { padding: clamp(90px,10vw,170px) clamp(24px,6vw,96px); }
.sub-band--blue { background: var(--blue); }
.sub-band--paper { background: var(--paper); }
.sub-band--yellow { background: var(--yellow); }
.sub-band--green { background: var(--green); }
.sub-band__head { display: grid; grid-template-columns: minmax(170px,.35fr) minmax(0,1fr); gap: clamp(28px,7vw,110px); margin-bottom: clamp(50px,7vw,110px); }
.sub-band__head h2 { margin: 0; max-width: 12ch; font-family: var(--serif); font-size: clamp(3.2rem,6vw,7.6rem); font-weight: 300; line-height: .98; letter-spacing: -.048em; }
.sub-band__head p:last-child { max-width: 580px; margin: 24px 0 0; }
.sub-band__body { margin-left: calc(25% + 15px); }
.sub-band__body > p { max-width: 720px; }

.sub-photo-story { display: grid; grid-template-columns: 1.15fr .7fr; gap: clamp(20px,5vw,80px); align-items: end; }
.sub-photo-story figure, .sub-image-row figure { margin: 0; }
.sub-photo-story img, .sub-image-row img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: clamp(22px, 3vw, 38px); }
.sub-photo-story figure:first-child img { aspect-ratio: 4 / 3; }
.sub-photo-story figure:last-child img { aspect-ratio: 4 / 5; }
.sub-photo-story figcaption, .sub-image-row figcaption, .campus-montage figcaption { margin-top: 13px; font-size: .82rem; letter-spacing: .04em; }
.sub-image-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2.5vw,40px); }
.sub-image-row img { aspect-ratio: 4 / 3; }
.sub-image-row figure:nth-child(2) { margin-top: 48px; }
.everyday-story { display: grid; grid-template-columns: minmax(180px,.42fr) minmax(0,1fr); gap: clamp(34px,7vw,115px); align-items: start; }
.everyday-story > p { max-width: 12ch; margin: 0; font: 300 clamp(2rem,3.2vw,4.2rem)/1.1 var(--serif); letter-spacing: -.03em; }
.everyday-story__photos { display: grid; grid-template-columns: 1.15fr .7fr; gap: clamp(16px,2vw,30px); align-items: end; }
.everyday-story__photos figure { margin: 0; }
.everyday-story__photos figure:last-child { transform: translateY(46px); }
.everyday-story__photos img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: clamp(22px, 3vw, 38px); }
.everyday-story__photos figure:last-child img { aspect-ratio: 3 / 4; }
.everyday-story__photos figcaption { margin-top: 13px; font-size: .82rem; letter-spacing: .04em; }

.community-types { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(26px,4vw,70px); }
.community-types h3 { margin: 0 0 14px; font: 300 clamp(2rem,2.7vw,3.5rem)/1 var(--serif); }
.community-types p { max-width: 26ch; margin: 0; }
.note { max-width: 680px; font-size: .85rem; opacity: .7; }

.room-preview { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(26px,5vw,90px); align-items: center; }
.room-preview__image { min-height: 420px; display: grid; place-content: center; padding: 3rem; border: 1px dashed #92918a; border-radius: clamp(22px, 3vw, 38px); background: #e8e4dd; text-align: center; }
.room-preview__image span { display: block; font: 300 clamp(2rem,4vw,5rem)/1 var(--serif); }
.room-preview__image small { display: block; margin-top: 1.5rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.room-preview__copy h3 { margin: 0 0 24px; font: 300 clamp(2.6rem,4.5vw,5.8rem)/.98 var(--serif); }

.people-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,6vw,100px); align-items: end; }
.people-intro img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: clamp(22px, 3vw, 38px); }
.people-intro p { max-width: 570px; margin: 0; font: 300 clamp(2rem,3.5vw,4.5rem)/1.1 var(--serif); }
.people-intro small { display: block; margin-top: 24px; font: 400 .85rem/1.5 var(--sans); }
.portrait-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px,2vw,32px); }
.portrait-card { margin: 0; }
.portrait-placeholder { display: grid; place-items: center; aspect-ratio: 3 / 4; padding: 20px; border-radius: clamp(22px, 3vw, 38px); background: linear-gradient(145deg,#b6b3ad,#77746f); filter: grayscale(1); color: var(--paper); text-align: center; font: 300 clamp(1.5rem,2vw,2.5rem)/1.1 var(--serif); }
.portrait-card:nth-child(2) .portrait-placeholder { background: linear-gradient(160deg,#aaa69f,#55534e); }
.portrait-card:nth-child(3) .portrait-placeholder { background: linear-gradient(35deg,#c6c1b8,#6c6a65); }
.portrait-card:nth-child(4) .portrait-placeholder { background: linear-gradient(135deg,#8f8d88,#3f403e); }
.portrait-card figcaption { padding-top: 16px; font-size: .85rem; }
.portrait-card figcaption strong { display: block; font-weight: 500; }
.portrait-card figcaption span { opacity: .65; }
.resident-entry { margin: clamp(38px,5vw,76px) 0 18px; }
.resident-directory { padding: clamp(80px,9vw,150px) clamp(24px,6vw,96px); background: var(--paper); }
.resident-directory__head { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 42px; }
.resident-directory__head p { max-width: 38ch; margin: 0; }
.resident-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(30px,4vw,60px) clamp(16px,2vw,32px); }
.resident-grid .portrait-placeholder { font-size: clamp(2.3rem,4vw,5rem); }
.resident-grid .portrait-card[hidden] { display: none; }
.resident-more { display: block; min-width: 200px; margin: 60px auto 0; padding: 15px 28px; border: 1px solid var(--text); border-radius: 999px; background: transparent; color: var(--text); font: 500 1rem var(--sans); cursor: pointer; transition: background 180ms var(--ease), transform 180ms var(--ease); }
.resident-more:hover, .resident-more:focus-visible { background: var(--yellow); transform: translateY(-2px); }
.resident-more[hidden] { display: none; }
.people-jump { display: flex; flex-wrap: wrap; gap: 14px 36px; padding: 28px clamp(24px,6vw,96px); background: var(--paper); border-top: 1px solid #b8b6b0; border-bottom: 1px solid #b8b6b0; }
.people-jump a { color: var(--text); text-decoration: none; border-bottom: 1px solid #999791; padding-bottom: 4px; font-weight: 500; }
.people-jump a:hover, .people-jump a:focus-visible { border-bottom-color: var(--text); color: var(--text); }
.people-directory { padding: clamp(90px,10vw,160px) clamp(24px,6vw,96px); background: var(--paper); }
.people-directory--blue { background: var(--blue); }
.people-directory--yellow { background: var(--yellow); }
.people-directory__head { display: grid; grid-template-columns: 1fr; max-width: 900px; row-gap: 0; align-items: end; margin-bottom: clamp(40px,6vw,90px); }
.people-directory__head h2 { margin: 0; font: 300 clamp(3.7rem,7vw,9rem)/.92 var(--serif); letter-spacing: -.055em; }
.people-directory__head > p { max-width: 34ch; margin: 28px 0 0; font-size: clamp(1.05rem,1.3vw,1.25rem); }
.profile-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(34px,4.5vw,74px) clamp(14px,2vw,34px); }
.profile-card { min-width: 0; position: relative; }
.profile-card__portrait { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; border-radius: clamp(22px,3vw,38px); background: linear-gradient(140deg,#a9aaa9,#5f6262); color: var(--paper); font: 300 clamp(2.5rem,4vw,5rem)/1 var(--serif); filter: grayscale(1); }
.profile-card__portrait img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-card:nth-child(4n+2) .profile-card__portrait { background: linear-gradient(160deg,#c2c0bb,#777977); }
.profile-card:nth-child(4n+3) .profile-card__portrait { background: linear-gradient(35deg,#a4a5a1,#4e5150); }
.profile-card:nth-child(4n+4) .profile-card__portrait { background: linear-gradient(135deg,#b9b9b5,#686a69); }
.profile-card h3 { margin: 17px 0 2px; font: 400 clamp(1.35rem,1.75vw,2rem)/1.1 var(--serif); }
.profile-card p { margin: 0; overflow-wrap: anywhere; }
.profile-card__country { font-size: .8rem; opacity: .64; }
.profile-card__role { max-width: 28ch; padding-top: 8px; font-size: .88rem; line-height: 1.4; }

/* Whole card links to LinkedIn, when set: a stretched invisible link over the
   full card (portrait + text), with a small badge in the portrait's corner as
   the visual cue. Cards with no address get neither and are not clickable. */
.profile-card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* No visible text: the accessible name comes from aria-label. */
}
.profile-card__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}
.profile-card__portrait .profile-card__linkedin-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.profile-card:hover .profile-card__linkedin-badge,
.profile-card:focus-within .profile-card__linkedin-badge {
  opacity: 1;
  transform: translateY(0);
}
/* No hover capability (touch): the badge is the only cue a link exists, so it
   stays visible instead of waiting for a hover that will never come. */
@media (hover: none) {
  .profile-card__portrait .profile-card__linkedin-badge { opacity: 1; transform: none; }
}
.people-nojs { margin: 0; padding: 30px clamp(24px,6vw,96px); background: var(--paper); }
.sub-cta { padding: clamp(90px,10vw,170px) clamp(24px,6vw,96px); background: var(--burgundy); color: var(--paper); display: grid; grid-template-columns: minmax(170px,.35fr) 1fr; gap: clamp(28px,7vw,110px); }
.sub-cta h2 { margin: 0 0 30px; max-width: 12ch; font: 300 clamp(3.2rem,6vw,7.5rem)/.96 var(--serif); letter-spacing: -.045em; }
.sub-cta p { max-width: 550px; }
.sub-cta .pill-link { margin-top: 20px; background: var(--paper); color: var(--burgundy); }
.sub-cta .pill-link:hover { background: var(--yellow); color: var(--text); }
.page-jump { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; padding: 24px clamp(24px,6vw,96px); border-block: 1px solid #c8c5bd; background: var(--paper); }
.page-jump span { margin-right: auto; font-size: .76rem; letter-spacing: .11em; text-transform: uppercase; opacity: .65; }
.page-jump a { color: var(--text); text-decoration: none; border-bottom: 1px solid #999791; padding-bottom: 3px; font-weight: 500; }
.page-jump a:hover, .page-jump a:focus-visible { color: var(--text); border-color: var(--text); }
.room-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(26px,3vw,52px); }
.room-card { min-width: 0; overflow: hidden; border: 1px solid #c8c5bd; border-radius: clamp(22px,3vw,38px); background: #fffdf9; }
.room-card > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #dedbd2; }
.room-card__body { padding: clamp(26px,3vw,48px); }
.room-card__body > span { display: block; margin-bottom: 22px; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; }
.room-card h3 { margin: 0 0 20px; font: 300 clamp(2.1rem,3.4vw,4.3rem)/1 var(--serif); letter-spacing: -.04em; }
.room-card p { max-width: 55ch; min-height: 5.8em; }
.room-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 30px 0 13px; border-top: 1px solid #b6b3ad; padding-top: 20px; }
.room-card dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; opacity: .65; }
.room-card dd { margin: 8px 0 0; font-weight: 500; }
.room-card small { font-size: .75rem; opacity: .68; }
.room-source { max-width: 80ch; margin: 32px 0 0; font-size: .83rem; opacity: .76; }
.room-source a { color: inherit; text-underline-offset: 4px; }
.fit-points { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(26px,4vw,65px); }
.fit-points > div { border-top: 1px solid #aaa79f; padding-top: 25px; }
.fit-points strong { font: 300 clamp(2rem,2.7vw,3.4rem)/1 var(--serif); }
.fit-points p { max-width: 40ch; }
.campus-note { max-width: 580px; margin-top: 22px; }
.campus-note p { margin: 0; font: inherit; }
.campus-note a { display: inline-flex; margin-top: 28px; }
#visit h2 { max-width: none; font-size: clamp(3rem,5.3vw,6.5rem); white-space: nowrap; }
.sub-cta__aside { margin-top: 28px; font-size: .85rem; }
.sub-cta__aside a { color: inherit; text-underline-offset: 4px; }

@media (max-width: 900px) {
  .sub-hero, .sub-band__head, .sub-cta { grid-template-columns: 1fr; gap: 28px; }
  .sub-hero { min-height: auto; }
  .sub-hero__intro { margin-left: 0; }
  .sub-hero--blue .sub-hero__links { margin-left: 0; }
  body.page-id-162 .sub-hero--purple .sub-hero__links { margin-left: 0; }
  body.page-id-159 .sub-hero .sub-hero__links { margin-left: 0; }
  body.page-id-161 .sub-hero .sub-hero__links { margin-left: 0; }
  .sub-hero__links { justify-content: flex-start; }
  .sub-band__body { margin-left: 0; }
  .portrait-grid { grid-template-columns: repeat(2,1fr); }
  .resident-grid { grid-template-columns: repeat(3,1fr); }
  .profile-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .people-directory__head > p { margin-top: 24px; }
}
@media (max-width: 720px) {
  .page-jump { gap: 12px 20px; }
  .page-jump span { width: 100%; }
  .room-grid, .fit-points { grid-template-columns: 1fr; }
  #visit h2 { white-space: normal; }
  .room-card p { min-height: 0; }
  .subpage .nav { padding: 16px 20px; }
  .subpage-brand { width: 122px; }
  .subpage main { padding-top: 75px; }
  .sub-hero h1 { font-size: clamp(4rem,16vw,7rem); }
  .sub-photo-story, .sub-image-row, .room-preview, .people-intro { grid-template-columns: 1fr; }
  .everyday-story { grid-template-columns: 1fr; }
  .everyday-story > p { max-width: 18ch; }
  .everyday-story__photos figure:last-child { transform: translateY(24px); }
  .sub-photo-story figure:last-child { width: 72%; justify-self: end; }
  .sub-image-row figure:nth-child(2) { margin-top: 0; }
  .sub-image-row img { aspect-ratio: 4 / 3; }
  .community-types { grid-template-columns: 1fr; gap: 42px; }
  .room-preview__image { min-height: 320px; }
  .portrait-grid { gap: 24px 12px; }
  .resident-grid { grid-template-columns: repeat(2,1fr); gap: 32px 12px; }
  .profile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px 12px; }
  .people-directory__head h2 { font-size: clamp(3.5rem,13vw,6rem); }
  .people-jump { gap: 12px 22px; }
  .profile-card h3 { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .subpage *, .subpage *::before, .subpage *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* ============================================================
   WordPress adapter for the subpages
   The prototype stylesheet above is kept intact. Rules below map it onto
   the block markup and add the Events page components.
   ============================================================ */

.lakefront-page--sub figure { margin: 0; }

/* Buttons: pill style on the link. New buttons without a style get the outline pill. */
.sub-hero__links, .sub-cta__buttons, .event-card__actions { margin-bottom: 0; }
.sub-hero__links .wp-block-button:not(.pill-link) > a,
.event-card__actions .wp-block-button:not(.pill-link) > a {
  display: inline-flex; align-items: center; justify-content: center; padding: 14px 24px;
  border: 1px solid currentColor; border-radius: 999px; color: inherit; text-decoration: none; font-weight: 500;
}
.sub-cta__buttons { display: flex; margin-top: 20px; }
.pill-link--light > a, .sub-cta .wp-block-button:not(.pill-link) > a { background: var(--paper); color: var(--burgundy); border-color: var(--paper); }
.pill-link--light > a:hover, .pill-link--light > a:focus-visible { background: var(--yellow); color: var(--text); border-color: var(--yellow); }
.sub-hero--purple .pill-link--filled > a { background: var(--paper); color: var(--burgundy); border-color: var(--paper); }
.sub-hero--purple .pill-link--outline > a { border-color: var(--paper); color: var(--paper); }
.sub-hero--purple .pill-link--filled > a:hover,
.sub-hero--purple .pill-link--outline > a:hover { background: var(--yellow); color: var(--text); border-color: var(--yellow); }
.sub-hero--purple .eyebrow { color: var(--paper); }

/* On this page */
.page-jump p, .people-jump p { margin: 0; }
.page-jump__label { margin-right: auto; font-size: .76rem; letter-spacing: .11em; text-transform: uppercase; opacity: .65; }
.page-jump__links, .people-jump__links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.people-jump__links { gap: 14px 36px; }

/* Band head text */
.sub-band__text p.text-link { margin-top: 0; }

/* Room cards: the prototype's <span>, <dl> and <small> are paragraphs and groups here */
.room-card { display: flex; flex-direction: column; }
.room-card p { min-height: 0; max-width: none; }
.room-card__image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #dedbd2; }
.room-card__kicker { margin: 0 0 22px; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; }
.room-card p.room-card__text { max-width: 55ch; min-height: 5.8em; }
.room-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 30px 0 13px; border-top: 1px solid #b6b3ad; padding-top: 20px; }
.room-card__facts p { margin: 0; }
.room-card__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; opacity: .65; }
.room-card p.room-card__value { margin-top: 8px; font-weight: 500; }
.room-card__note { margin: 0; font-size: .75rem; line-height: 2.3; opacity: .68; } /* Matches the prototype's inline <small> on a body-height line. */

/* Points (Who is it for, Formats) */
.fit-point__title { margin: 0; font: 300 clamp(2rem,2.7vw,3.4rem)/1 var(--serif); }

/* People page */
.people-intro__text p { margin: 0; }
.people-intro p.people-intro__note { display: block; margin-top: 24px; font: 400 .85rem/1.5 var(--sans); }
.profile-card[hidden] { display: none; }
.profile-card__portrait span { position: relative; }
.people-empty { margin: 0; }

/* Portraits: black and white, colour on hover (rules in lakefront.css). The prototype's
   grayscale on the portrait frame is lifted so the hover can show colour. */
.profile-card__portrait { filter: none; }

/* Campus note */
.sub-band__text p.campus-note { max-width: 580px; margin: 22px 0 0; }

/* Events: demo notice */
.demo-note { display: grid; grid-template-columns: minmax(170px,.35fr) minmax(0,1fr); gap: clamp(20px,7vw,110px); align-items: start; padding: clamp(28px,3.5vw,46px) clamp(24px,6vw,96px); background: var(--yellow); color: var(--text); }
.demo-note p { margin: 0; }
.demo-note__label { justify-self: start; padding: 7px 14px; border: 1px solid currentColor; border-radius: 999px; font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.demo-note__text { max-width: 68ch; font-size: clamp(1rem,1.2vw,1.15rem); line-height: 1.5; }

/* Events: example cards */
.event-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(18px,2.4vw,40px); }
.event-card { display: flex; flex-direction: column; min-height: 460px; padding: clamp(24px,2.6vw,40px); border-radius: clamp(22px,3vw,38px); }
.event-card p { margin: 0; }
.event-card--yellow { background: var(--yellow); color: var(--text); }
.event-card--blue { background: var(--blue); color: var(--text); }
.event-card--burgundy { background: var(--burgundy); color: var(--paper); }
.event-card__badge { align-self: flex-start; margin-bottom: 26px !important; padding: 5px 11px; border: 1px dashed currentColor; border-radius: 999px; font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.event-card__meta { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid currentColor; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.event-card__format { margin-top: 16px !important; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.event-card h3 { margin: 22px 0 16px; font: 300 clamp(2.3rem,3.2vw,3.6rem)/.95 var(--serif); letter-spacing: -.04em; }
.event-card__text { max-width: 32ch; }
.event-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 28px; }
.event-card__actions .pill-link > a { padding: 12px 20px; font-size: .92rem; }
.event-card--burgundy .pill-link--filled > a { background: var(--paper); color: var(--burgundy); border-color: var(--paper); }
.event-card--burgundy .pill-link--outline > a { color: var(--paper); border-color: var(--paper); }
.event-card .pill-link--filled > a:hover, .event-card .pill-link--outline > a:hover { background: var(--paper); color: var(--text); border-color: var(--paper); }
.event-card--burgundy .pill-link > a:hover { background: var(--yellow); color: var(--text); border-color: var(--yellow); }

@media (max-width: 1100px) { .event-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px) {
  .page-jump__label { width: 100%; }
  .page-jump__links { gap: 12px 20px; }
  .people-jump__links { gap: 12px 22px; }
  .room-card p.room-card__text { min-height: 0; }
  .demo-note { grid-template-columns: 1fr; gap: 16px; }
  .event-grid { grid-template-columns: 1fr; }
  .event-card { min-height: 0; }
  .event-card__actions .wp-block-button, .event-card__actions .pill-link > a,
  .sub-hero__links .wp-block-button, .sub-hero__links .wp-block-button > a { width: 100%; min-height: 54px; }
  .sub-hero__links { flex-direction: column; align-items: stretch; }
}

/* Portraits: black and white with colour on hover (see lakefront.css). The
   prototype's grayscale on the frame is lifted so the hover can show colour;
   the initials placeholder keeps its grey gradient. */
.profile-card__portrait { filter: none; }

/* Image pair: the right image is square, so the two images have clearly
   different heights (client decision, 24 September 2026). */
.sub-photo-story figure:last-child img { aspect-ratio: 1 / 1; }

/* Events page: long Luma titles (over 40 characters) get a smaller title size. */
.event-card.is-long-title h3 { font-size: clamp(1.8rem, 2.2vw, 2.4rem); line-height: 1; }

/* "Stay in the loop" is part of the shared footer on every other page; this
   is the one place it's dropped, per Thomas's request (30 Sept 2026). The
   shared footer itself, and every other page that uses it, are untouched. */
.error404 .foot__newsletter { display: none; }

/* Accommodation notice: a calm, clearly readable line between the section
   intro and the room cards, in the site's own colour and radius language
   (same family as the room photos' corners), not a warning style. */
.accommodation-notice {
  display: inline-block;
  margin: 0 0 clamp(28px, 4vw, 40px);
  padding: 14px 22px;
  border-radius: 14px;
  background: var(--blue);
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
@media (max-width: 720px) {
  .accommodation-notice { display: block; font-size: .95rem; }
}

/* 404 page: implements Thomas's approved prototype (lakefront-404-html-v6)
   at its own exact measurements, inside the theme's shared header/footer.
   The boat overlaps the top of the real footer, which is the water surface;
   no separate blue pill or waterline. Ripples use the footer's own burgundy,
   not the prototype's green colour study. */
.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;
}
.error-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(1020px, 67vw, 1160px);
  padding: 45px clamp(24px, 5vw, 86px) 190px;
  background: var(--paper);
}
.error-hero__content {
  width: min(63.5%, 780px);
  margin-left: 36.5%;
}
.error-hero__code {
  display: block;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(190px, 22.5vw, 390px);
  font-weight: 300;
  line-height: .75;
  letter-spacing: -.065em;
  white-space: nowrap;
}
.error-hero__content h1 {
  margin: 30px 0 0;
  max-width: 760px;
  font-family: var(--serif);
  font-size: clamp(76px, 7.3vw, 126px);
  font-weight: 300;
  line-height: .86;
  letter-spacing: -.055em;
}
.error-hero__explanation {
  max-width: 570px;
  margin: 53px 0 0;
  font-size: clamp(17px, 1.1vw, 20px);
  line-height: 1.42;
}
.error-hero__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 68px;
}
.error-hero__links .pill-link { min-height: 57px; padding: 11px 25px; font-size: 18px; }

.error-hero__boat {
  position: absolute;
  z-index: 3;
  width: clamp(300px, 28vw, 480px);
  aspect-ratio: 477 / 242;
  left: 60%;
  /* The source image has transparent space below the hull (room for the
     loose mooring line), about 28% of its own height, so the visible boat
     sits well above the container's own bottom edge. Raised ~45px from the
     first pass per Thomas's review (30 Sept 2026): the hull should meet the
     footer, not sink into it. */
  bottom: -25px;
  translate: -50% 0;
  pointer-events: none;
}
.error-hero__boat img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 54% 67%;
}
.error-hero__ripple {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 63%;
  width: 85%;
  height: 18%;
  border: 1px solid var(--foot-bg, var(--burgundy));
  border-radius: 50%;
  opacity: .35;
  transform: translate(-50%, -50%);
}
.error-hero__ripple--outer { width: 108%; height: 25%; animation-delay: -2750ms; }
@media (prefers-reduced-motion: no-preference) {
  .error-hero__boat img { animation: errorBoatBob 5500ms ease-in-out infinite; }
  .error-hero__ripple { animation: errorBoatRipple 5500ms ease-out infinite; }
}
@keyframes errorBoatBob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(5px) rotate(1deg); }
}
@keyframes errorBoatRipple {
  0%   { opacity: .42; transform: translate(-50%, -50%) scale(.9); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .error-hero__ripple { opacity: .3; }
}

@media (max-width: 1100px) {
  .error-hero__content { width: min(72%, 780px); margin-left: 28%; }
  .error-hero__code { font-size: clamp(170px, 24vw, 280px); }
  .error-hero__content h1 { font-size: clamp(72px, 8vw, 100px); }
  .error-hero__boat { left: 61%; }
}
@media (max-width: 700px) {
  .error-hero { min-height: 780px; padding: 35px 24px 180px; }
  .error-hero__content { width: 100%; margin-left: 0; }
  .error-hero__code { margin: 0; font-size: clamp(140px, 34vw, 250px); letter-spacing: -.07em; }
  .error-hero__content h1 { margin-top: 31px; max-width: 550px; font-size: clamp(42px, 12vw, 88px); }
  .error-hero__explanation { margin-top: 37px; font-size: 17px; line-height: 1.5; }
  .error-hero__links { flex-direction: column; margin-top: 35px; gap: 12px; }
  .error-hero__links .pill-link { width: 100%; min-height: 54px; font-size: 16px; }
  .error-hero__boat { width: clamp(210px, 62vw, 310px); left: 50%; right: auto; bottom: 10px; }
}
@media (max-width: 390px) {
  .error-hero { min-height: 825px; }
  .error-hero__code { font-size: 34vw; }
  .error-hero__content h1 { font-size: 12.5vw; }
}

/* ---------- Privacy Policy (long-form text page) ----------
   From the approved Lakefront Privacy Policy template: a large hero, an
   "On this page" box, and one two-column section per topic (heading left,
   text right). Template values are kept: Gambetta Regular for the headings,
   Satoshi 18px / 1.55 for the text, the soft blue-green box (#D6E9E8) and the
   fine rule between sections. The edge margin (5vw) and the 1440px maximum width are the
   template's, so headings break onto the same lines as in the template. */
.policy-hero {
  max-width: 1440px;
  margin-inline: auto;
  padding: clamp(120px, 13vw, 210px) max(24px, 5vw) 90px;
  background: var(--paper);
}
.policy-hero .eyebrow { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: 1; }
.policy-hero h1 {
  margin: 26px 0 40px;
  font-family: var(--serif);
  font-size: clamp(76px, 12vw, 170px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .98;
}
.policy-hero__intro { max-width: 850px; margin: 0; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.3; }
.policy-meta { display: flex; flex-wrap: wrap; gap: 30px; margin: 50px 0 0; font-size: 14px; color: #4b4b49; }
.policy-meta span { display: inline; }

.policy-jump {
  width: calc(100% - 2 * max(24px, 5vw));
  max-width: calc(1440px - 2 * max(24px, 5vw));
  margin: 0 auto 110px;
  padding: clamp(26px, 4vw, 55px);
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: 30px;
  background: #d6e9e8;
  border-radius: 28px;
}
.policy-jump__label { margin: 0; font-family: var(--serif); font-size: clamp(35px, 4vw, 60px); font-weight: 400; line-height: 1; }
.policy-jump ul { columns: 2; margin: 0; padding: 0; list-style: none; }
.policy-jump li { margin: 0 0 12px; break-inside: avoid; }
.policy-jump a,
.policy-section__copy a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.policy-jump a:hover,
.policy-jump a:focus-visible,
.policy-section__copy a:hover,
.policy-section__copy a:focus-visible { text-decoration-thickness: 2px; }
.policy-jump a:focus-visible,
.policy-section__copy a:focus-visible { outline: 2px solid var(--text); outline-offset: 5px; }

.policy { max-width: 1440px; margin-inline: auto; padding: 0 max(24px, 5vw) 140px; }
.policy-section {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: 30px;
  padding: 50px 0 75px;
  border-top: 1px solid #b9b6af;
}
.policy-section__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .98;
}
.policy-section__copy { max-width: 780px; font-size: 18px; line-height: 1.55; }
.policy-section__copy p { margin: 0 0 20px; }
.policy-section__copy ul { margin: 0 0 20px; padding-left: 1.2em; }
.policy-section__copy li { margin: 0 0 6px; }
.policy-section__copy h3 { margin: 28px 0 12px; font-family: var(--serif); font-size: clamp(26px, 2.6vw, 36px); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }

/* Working notes: rendered only for people who can edit pages (see inc/privacy.php). */
.lf-draft-note {
  margin: 0 0 20px;
  padding: 18px 22px;
  border-left: 4px solid var(--coral, #dc4c64);
  background: #fff;
  color: #353535;
  font-size: 16px;
  line-height: 1.5;
}
.lf-draft-note strong { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 760px) {
  .policy-hero { padding: 110px clamp(24px, 6vw, 96px) 75px; }
  .policy-jump, .policy-section { grid-template-columns: 1fr; }
  .policy-jump ul { columns: 1; }
  .policy-section { gap: 22px; padding: 38px 0 55px; }
  .policy { padding-bottom: 70px; }
}

/* ---------- About page ----------
   From the approved "Lakefront About" proposal. Only what is particular to
   this page is here; everything else (hero, page-jump bar, blue band, the
   Take part cards) is the theme's own. Rules are the proposal's, scoped so no
   other page changes; the few changes are because the page is built from
   editable blocks: the mint line is a bold run, the invitation is a quote of
   three paragraphs, the video is a video block. */
/* --mint is defined once, in :root (lakefront.css). */
/* Images follow the theme's rule: black and white, in colour with the image style "Colour". Every About image is made with that style, so it is in colour as in the proposal, and the style button in the editor toggles it to B&W and back. Nothing else on this page forces or removes colour. */

.about-hero { grid-template-columns: minmax(170px, 250px) minmax(0, 900px); justify-content: center; }
.about-hero .sub-hero__copy { width: 100%; max-width: 900px; }
.about-hero h1 strong { color: var(--mint); font-weight: inherit; }
.about-hero .sub-hero__intro { width: min(100%, 610px); margin-left: min(12vw, 145px); margin-right: 0; }
/* The proposal's rule above pushes the text past the right edge of the screen between 901px and about 1147px (horizontal scroll). In that range only, the width is what is left of the screen after the left margin and the page's side padding; outside it the proposal's rule is unchanged. */
@media (min-width: 901px) and (max-width: 1147px) {
  .about-hero .sub-hero__intro { width: calc(69vw - 250px); }
}
.about-hero__link { margin: 32px 0 0 min(12vw, 145px); max-width: 610px; font-weight: 500; }
/* Plain text links on About: the home page's .text-link a expression (1px underline, 7px below, 48% strength;
   full strength and 10px below on hover and keyboard focus, same 180ms transition). Colour is never changed, and the
   underline follows currentColor, so it works on the dark hero and on light or blue sections alike. The rgba line is the
   fallback for a browser without color-mix(). Scoped to the two About links only. */
.lakefront-page--about .about-hero__link a,
.lakefront-page--about .about-editorial__link a {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  text-decoration-color: rgba(245, 241, 234, .48);
  text-decoration-color: color-mix(in srgb, currentColor 48%, transparent);
  transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease), text-underline-offset 180ms var(--ease);
}
/* About, Take part: the link may use the full column (the shared 26ch limit made long labels wrap early) */
.lakefront-page--about .gi-link { max-width: none; }
.lakefront-page--about .about-editorial__link a { text-decoration-color: rgba(0, 0, 0, .48); text-decoration-color: color-mix(in srgb, currentColor 48%, transparent); }
.lakefront-page--about .about-hero__link a:hover,
.lakefront-page--about .about-hero__link a:focus-visible,
.lakefront-page--about .about-editorial__link a:hover,
.lakefront-page--about .about-editorial__link a:focus-visible {
  text-decoration-color: currentColor;
  text-underline-offset: 10px;
}

.about-lead-video { padding: 0 clamp(24px, 6vw, 96px) clamp(90px, 10vw, 160px); background: var(--blue); }
.about-lead-video figure { margin: 0; }
/* The media block (inc/about-media.php): the standard map, an image or a film in one container.
   The container takes the media's own proportions (--about-media-ratio, set per file), so nothing is cropped
   and the page does not jump while the file loads. */
.about-media { width: 100%; aspect-ratio: var(--about-media-ratio, 16 / 9); overflow: hidden; border-radius: clamp(22px, 3vw, 38px); }
.about-media img,
.about-media video { display: block; width: 100%; height: 100%; object-fit: contain; }
.about-media video { background: #1d1d1d; }
/* The theme shows images in black and white by default; the map and the About media keep their colour. */
.lakefront-page .about-media img { filter: none; }

.about-editorial { padding: clamp(95px, 10vw, 165px) clamp(24px, 6vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(38px, 7vw, 110px); align-items: center; background: var(--paper); }
.about-editorial--blue { background: var(--blue); }
.about-editorial--yellow { background: var(--yellow); }
.about-editorial--reverse .about-editorial__copy { order: 2; }
.about-editorial--reverse figure { order: 1; }
.about-editorial__copy { max-width: 680px; }
.about-editorial h2 { margin: 27px 0 28px; max-width: 10ch; font: 300 clamp(3.2rem, 5.5vw, 7rem) / .96 var(--serif); letter-spacing: -.047em; }
.about-editorial p:not(.eyebrow):not(.about-editorial__link) { max-width: 55ch; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; }
.about-editorial figure { margin: 0; }
.about-editorial img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: clamp(22px, 3vw, 38px); }
.about-editorial__link { margin: 0; }
.about-editorial__link a { display: inline-block; margin-top: 25px; font-weight: 500; }

.about-invitation { padding: clamp(85px, 9vw, 145px) clamp(24px, 6vw, 96px); background: var(--yellow); }
.about-invitation__inner { max-width: 1500px; margin: auto; }
.about-invitation .eyebrow { margin: 0 0 clamp(42px, 6vw, 90px); }
.about-invitation blockquote { margin: 0; padding: 0; border: 0; max-width: none; font: 300 clamp(4.2rem, 7vw, 9rem) / .9 var(--serif); font-style: normal; letter-spacing: -.055em; }
.about-invitation blockquote p { display: block; margin: 0; font: inherit; letter-spacing: inherit; }
.about-invitation blockquote p:nth-child(2) { padding-left: clamp(20px, 12vw, 210px); }
.about-invitation blockquote p:nth-child(3) { padding-left: clamp(48px, 10vw, 160px); }

.about-commitment { padding: clamp(100px, 10vw, 160px) clamp(24px, 6vw, 96px); background: var(--burgundy); color: var(--paper); }
.about-commitment .sub-band__head { margin-bottom: clamp(42px, 5vw, 75px); }
.about-commitment .sub-band__head h2 { max-width: 14ch; }
.about-commitment .sub-band__head p:last-child { max-width: 680px; }
.about-commitment .sub-band__text p { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; }
.about-commitment__images { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .9fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.about-commitment__images figure { margin: 0; }
.about-commitment__images figure:nth-child(2) { margin-top: clamp(70px, 9vw, 145px); }
.about-commitment__images img { display: block; width: 100%; height: auto; border-radius: clamp(22px, 3vw, 38px); }

.about-panorama { margin: 0; padding: 0 clamp(24px, 6vw, 96px) clamp(105px, 10vw, 170px); background: var(--paper); }
.about-panorama img { display: block; width: 100%; height: auto; border-radius: clamp(22px, 3vw, 38px); }

@media (max-width: 900px) {
  .about-hero { grid-template-columns: 1fr; }
  .about-hero .sub-hero__intro, .about-hero__link { margin-left: 0; }
  .about-editorial { grid-template-columns: 1fr; }
  .about-editorial--reverse .about-editorial__copy, .about-editorial--reverse figure { order: initial; }
  .about-editorial h2 { max-width: 14ch; }
  .about-commitment__images { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .about-editorial img { aspect-ratio: 4 / 3; }
  .about-commitment__images { grid-template-columns: 1fr; gap: 30px; }
  .about-commitment__images figure:nth-child(2) { width: 72%; margin: 0 0 0 auto; }
  .about-invitation blockquote { font-size: clamp(3.7rem, 13.5vw, 5.5rem); }
  .about-invitation blockquote p:nth-child(2) { padding-left: 8vw; }
  .about-invitation blockquote p:nth-child(3) { padding-left: 17vw; }
}
@media (max-width: 340px) {
  /* 17vw of indentation leaves the word "contribute." 1.6px past the screen edge at 320px */
  .about-invitation blockquote p:nth-child(3) { padding-left: 8vw; }
}

/* ==========================================================================
   Typography system for subpages (approved after the visual comparison, v2.22.9; refined in 2.22.10)
   (2.24.1: People directory H2s Residents / Alumni / Collaborators now share the H2 rule below.)
   Levels: H1 and statement Light 300 (unchanged) / section heading H2 Regular 400
   6vw / card title H3 Regular 400 3.4vw / lead (--lf-lead-size) / body (unchanged).
   Scoped to .lakefront-sub so the start page keeps its own heading sizes.
   Eyebrows and other small uppercase labels are intentionally unchanged.
   ========================================================================== */
.lakefront-sub {
  --lf-statement-size: clamp(4.2rem, 7vw, 9rem);
  --lf-h2-size: clamp(3.2rem, 6vw, 7.6rem);
  --lf-h3-size: clamp(2rem, 3.4vw, 4.3rem);
}
.lakefront-sub .sub-band__head h2,
.lakefront-sub .people-directory__head h2,
.lakefront-sub .about-editorial h2,
.lakefront-sub .sub-cta h2,
.lakefront-sub #visit h2,
.lakefront-sub .get-involved__head h2 { font-weight: 400; font-size: var(--lf-h2-size); line-height: .96; letter-spacing: -.045em; }
.lakefront-sub .room-card h3,
.lakefront-sub .event-card h3,
.lakefront-sub .get-involved__grid .gi-title,
.lakefront-sub .fit-point__title { font-weight: 400; font-size: var(--lf-h3-size); line-height: 1; letter-spacing: -.03em; }

/* Lead level on subpages: the hero intro only. Section texts keep their own sizes
   (body 18px / 27.9px, editorial 20.8px / 31.2px in About, People directory intro). */
.sub-hero__intro { font-size: var(--lf-lead-size); line-height: var(--lf-lead-lh); }

/* Notes and measure */
.room-card__note { font-size: .8125rem; line-height: 1.5; }
.sub-band__text p,
.sub-band__text p:last-child,
.sub-band__text p.campus-note { max-width: 62ch; }

/* Short descriptions under people's names: 16px / 24px (name typography unchanged) */
.profile-card__role { font-size: 1rem; line-height: 1.5; }

/* Campus, Outside: both paragraphs and the link share one text column (about 68
   characters), left aligned from the same start. Font size and line height unchanged. */
#nature .sub-band__text p { max-width: 68ch; }

/* About, What is Lakefront: same editorial level as the other About texts
   (20.8px / 31.2px at full size, same fluid rule as .about-editorial p). */
#idea p:not(.eyebrow) { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; max-width: 50ch; width: 100%; }

/* About, Our approach and How we do it: same text measure as What is Lakefront? (45ch of the paragraph's own
   font, about 55 to 70 characters per line). The link paragraph is not a text paragraph and keeps its own rule. */
#approach .about-editorial__text p:not(.about-editorial__link),
#life .about-editorial__text p:not(.about-editorial__link) { max-width: 45ch; width: 100%; }

/* Events, Programme and Formats: the intro under each H2 uses the About body text style (same clamp and line height as
   .about-editorial p) and the same measure (45ch of its own font). The 18px card and format-list texts are not touched. */
#programme .sub-band__text > p,
#formats .sub-band__text > p { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; max-width: 45ch; width: 100%; }

/* Events, The place in use: same intro style. The section has no id and the page content is stored in the database, so it is
   found as the one yellow band that sits directly before #host (Host an event). */
.sub-band--yellow:has(+ #host) .sub-band__text > p { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; max-width: 45ch; width: 100%; text-wrap: balance; }

/* Living here, Accommodation / Shared spaces / The people / Who is it for?: same intro style as About and Events. The people has
   no id (page content is stored in the database), so it is found as the band directly before #fit. Link paragraphs keep their own
   style; The people is a short intro and is balanced. */
#rooms .sub-band__text > p:not(.text-link),
#spaces .sub-band__text > p:not(.text-link),
#fit .sub-band__text > p:not(.text-link),
.sub-band:has(+ #fit) .sub-band__text > p:not(.text-link) { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; max-width: 45ch; width: 100%; }
.sub-band:has(+ #fit) .sub-band__text > p:not(.text-link) { text-wrap: balance; }

/* Living here, Everyday life: same intro style. About also has an element with id life (and is not a .sub-band), so the rule is
   limited to subpage wrappers that are not the About page (.lakefront-page--about). */
.lakefront-page:not(.lakefront-page--about) #life .sub-band__text > p:not(.text-link) { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; max-width: 45ch; width: 100%; text-wrap: balance; }

/* People, Life together: the body text under the H2 uses the same editorial intro style as About, Events, Living here and Campus.
   Found through .people-scene (the section's own class, People page only); eyebrow, H2 and the quote block are not touched.
   No text-wrap and no manual line breaks: natural line breaks. */
.sub-band.people-scene .sub-band__text > p { font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 400; line-height: 1.5; max-width: 45ch; width: 100%; }

/* Campus, The grounds / The main building / Outside: body text uses the same style as the section intros elsewhere. Link paragraphs keep
   their own style. Natural line breaks (no balancing) for these longer texts. */
#grounds .sub-band__text > p:not(.text-link),
#building .sub-band__text > p:not(.text-link),
#nature .sub-band__text > p:not(.text-link) { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; max-width: 45ch; width: 100%; }

/* Campus, Visit: the contact line was 13.6px. #visit is unique to Campus among the elements that use .sub-cta__aside. */
#visit .sub-cta__aside { font-size: 1.125rem; line-height: 1.55; font-weight: 500; }

/* Events, Host an event, and Living here, How to apply: the same contact line style as Campus, Visit. Scoped to the page body classes and section ids. */
body.page-id-162 #host .sub-cta__aside,
body.page-id-159 #apply .sub-cta__aside { font-size: 1.125rem; line-height: 1.55; font-weight: 500; }

/* ==========================================================================
   Campus, image montage "Around Lakefront" (2.24.15)
   From the approved prototype (campus-image-section-prototype). Heading part = the theme's own
   .sub-band__head (eyebrow + H2); padding = .sub-band. Background .sub-band--green = var(--green);
   the Customizer replaces it (Lakefront colours > Campus) like every other coloured section.
   Row: 1fr 1.35fr 1fr, all 4:3; figure 01 is moved 20px down and 03 20px up, on the whole <figure>
   so the caption follows. The 4:3 frame is the image itself (a core Image block cannot carry a holder
   div): width 100 %, aspect-ratio 4:3, object-fit: cover, so the file's own size never changes the
   composition. Focus point per image: .is-focus-* sets object-position (toolbar button Focus).
   Colour / B&W per image through the theme's rule; .is-monochrome is prepared and used on none.
   Captions: the existing Campus rule (.sub-photo-story figcaption, above).
   ========================================================================== */
.campus-montage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(16px, 2.5vw, 40px);
  width: 100%;
}
.campus-montage__figure { min-width: 0; margin: 0; }
.campus-montage__figure--small-a { grid-column: 1; transform: translateY(20px); }
.campus-montage__figure--feature { grid-column: 2; }
.campus-montage__figure--small-b { grid-column: 3; transform: translateY(-20px); }
.campus-montage__figure img {
  display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: 50% 50%;
  border-radius: clamp(22px, 3vw, 38px);
}
.campus-montage__figure.is-focus-top img { object-position: 50% 0; }
.campus-montage__figure.is-focus-bottom img { object-position: 50% 100%; }
.campus-montage__figure.is-focus-left img { object-position: 0 50%; }
.campus-montage__figure.is-focus-right img { object-position: 100% 50%; }
.campus-montage__figure.is-focus-top-left img { object-position: 0 0; }
.campus-montage__figure.is-focus-top-right img { object-position: 100% 0; }
.campus-montage__figure.is-focus-bottom-left img { object-position: 0 100%; }
.campus-montage__figure.is-focus-bottom-right img { object-position: 100% 100%; }
/* Prepared, not used: black and white for one image. Beats the Colour style. */
.lakefront-page .campus-montage__figure.wp-block-image.is-monochrome img,
.lakefront-page .campus-montage__figure.wp-block-image.is-monochrome:hover img { filter: grayscale(1); }

@media (max-width: 900px) {
  .campus-montage__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .campus-montage__grid { display: flex; flex-direction: column; gap: 56px; }
  .campus-montage__figure--small-a { width: 72%; transform: none; }
  .campus-montage__figure--feature { width: 100%; }
  /* .campus-montage__grid in front: the margin has to outrank .lakefront-page--sub figure { margin: 0 } */
  .campus-montage__grid .campus-montage__figure--small-b { width: 72%; margin-left: auto; transform: none; }
}