/* sections/people.css — the live .section--school-staff ("Frie nds" + mascot gap + four floating 265px circle cards).
   Every value is transcribed from recon/homepage-loaded-rules.css lines 455–555 (root 16px, body 20px); px in comments
   are the resolved values at 1440x900. Structure:
     section.people > .people__module > .people__inner
       > .people__intro > .people__word-wrap > h2.people__word + .people__mascot ; p.people__sub
       > .people__cards (desktop layer, JS scroll/cursor parallax) > .cards-card x4
       > .people__swiper (≤992px, filled by sections/people.js with a Swiper)
     body > section#people-media-popup (built by people.js when a card button is clicked; live mpCardsPopup → mediaPopup;
       styled by the shared sections/media-popup.css)
   Tokens: --cream = rgb(240,239,231), --red = rgb(214,38,45), --charcoal = rgb(84,84,84), --sand = rgb(206,193,182),
   --stone = rgb(162,150,138), --peach = rgb(239,152,66); the card shadow rgba(149,137,125) is --stone-text. */

/* ---------- section: live .section--school-staff ---------- */
.people { background-color: var(--cream, #f0efe7); position: relative; top: -0.125rem; /* live -2px */
  display: block; min-height: 0; padding: 0; overflow: visible; text-align: left; /* resets in case the old .people rule survives */
  /* live icon-font glyph U+E90E (global-right-arrow-icon): a 524:340 long arrow (26.19 x 17 at 17px) — a shaft 17% of the
     glyph height sitting just below centre, and a head of two curved arms that sweep from the top/bottom edges into a
     blunt tip. Outline fitted to the live glyph rendered at 340px (pixel overlap 99%); the clone draws it once as a masked
     SVG in the glyph's own box and reuses it for the desktop overlay arrow and the phone prev/next controls. */
  --long-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 524 340'><path d='M0 144H460V202H0ZM308 0H359C390.5 78.9 442.3 117.6 524 141V199C442.3 222.4 390.5 261.1 359 340H308C328.1 272.9 355.2 240.8 409 196V144C355.2 99.2 328.1 67.1 308 0Z'/></svg>"); }
@media (max-width: 1900px) { .people { top: -7.5rem; } }   /* live -120px: the section is pulled up over the welcome panel */
@media (max-width: 992px) { .people { top: 0; } }

/* ---------- module: live .module_school-staff (order of the queries matters, kept as on the live sheet) ---------- */
.people__module { margin-top: -12.5rem; padding: 0 8.125rem 1.875rem; position: relative; }   /* live -200px; 0 130px 30px */
@media (min-width: 1800px) { .people__module { margin-left: auto; margin-right: auto; width: 90%; } }
@media (max-width: 1200px) { .people__module { padding: 0 1.25rem 1.875rem; } }                  /* live 0 20px 30px */
@media (max-width: 991px) { .people__module { margin-top: 0; padding: 4.0625rem 0 1.875rem; } }  /* live 65px 0 30px */
@media (min-width: 992px) and (max-height: 900px) { .people__module { margin-top: 0; } }         /* wins at 1440x900 */
@media (max-width: 1800px) and (min-height: 1200px) { .people__module { margin-top: -28.125rem; } } /* live -450px */

/* ---------- inner: live .module_school-staff--inner (1180 x 1080 at 1440) ---------- */
.people__inner { align-items: center; display: flex; justify-content: center; min-height: 67.5rem; position: relative; } /* live 1080px */
@media (max-width: 992px) { .people__inner { flex-direction: column; margin-top: 0; min-height: auto; } }

/* ---------- title block: live .friends--inner / .friends--inner_image ---------- */
.people__intro { text-align: center; }
@media (max-width: 992px) { .people__intro { display: flex; flex-direction: column-reverse; margin-bottom: 1.5625rem; } } /* description above the word, 25px */
.people__word-wrap { position: relative; }

/* live h2.item--title: 292.85px @1440 (99px min, 339px max), line-height 301.63px, letter-spacing -2.97px.
   The letter-spacing clamp's min (-0.185625rem) is larger than its max, so per spec it resolves to the min at every width. */
.people__word { margin: 0; display: block; color: var(--red, #d6262d); font-family: var(--font-display, "EB Garamond", serif);
  font-size: clamp(6.1875rem, -7.65865rem + 28.8462vw, 21.1875rem); font-weight: 700;
  letter-spacing: clamp(-0.185625rem, 0.22976rem - 0.865385vw, -0.635625rem); line-height: 1.03;
  white-space: nowrap; }   /* clone: "Nala ndans" is 1339px @1440, wider than the 1180px inner box ("Frie nds" is 965px); the
                              intro is a centred flex item, so the word overflows the box symmetrically instead of wrapping */
@media (max-width: 992px) { .people__word { line-height: 1.25; } }
/* Only below 440px: "Nala ndans" is 433px wide at the live 99px minimum (the live "Frie nds" is 310px), so the clone caps
   the size there to keep the word on one line inside the phone viewport. Above 440px the live clamp applies untouched. */
@media (max-width: 439px) { .people__word { font-size: min(6.1875rem, 21.5vw); } }

/* live .item--image: the mascot slot, absolutely centred on the h2 (left 50%); 279.6 x 277px @1440 (110–320 x 109–317).
   The gap of "Frie nds" is at the box centre; the gap of "Nala ndans" is at 44.32% of the h2 width at every viewport
   (measured 993–2200px), so the clone centres the slot there instead. */
.people__mascot { height: clamp(6.8125rem, -5.1875rem + 25vw, 19.8125rem); left: 44.32%; position: absolute; top: 50%;
  transform: translate(-50%, -50%); width: clamp(6.875rem, -5.24038rem + 25.2404vw, 20rem); }
/* live: ::before = owl.png (641x634), ::after = owl-state.png; both inset 0, 100% of the slot, background-size contain,
   background-position 50% 50%, so the owl renders ~280 x 277 and overlaps the tops and bottoms of the neighbouring letters.
   The clone's stand-in is the college logo's emblem (assets/ndc-emblem.png: the left 50x54 of ndc-logo.png re-rendered as a
   crisp 600x648 flat-colour PNG, so it stays sharp at the slot size and on 2x screens) with the same geometry
   (~256 x 277 @1440); the hover "second pose" is the emblem mirrored. */
.people__mascot::before, .people__mascot::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background-image: url("../assets/ndc-emblem.png"); background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; }
.people__mascot::before { opacity: 1; }
.people__mascot::after { opacity: 0; transform: scaleX(-1); }
html.no-touch .people__mascot:hover::before { opacity: 0; }   /* live: instant swap, no transition */
html.no-touch .people__mascot:hover::after { opacity: 1; }

/* live .item--description: 16.42px / letter-spacing 1.64px @1440, 2-line clamp, max-width 380px */
.people__sub { -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--charcoal, #545454); display: -webkit-box;
  font-family: var(--font-ui, "Figtree", "brandon-grotesque", sans-serif); font-size: clamp(0.875rem, 0.701923rem + 0.360577vw, 1.0625rem);
  font-weight: 700; letter-spacing: clamp(0.0875rem, 0.0701923rem + 0.0360577vw, 0.10625rem); line-height: 1.7; margin: 0 auto;
  max-width: 23.75rem; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
@media (max-width: 992px) { .people__sub { line-height: 1.57; max-width: 18.75rem; } }   /* live 300px */
.people__sub span { color: var(--red, #d6262d); font-style: normal; }

/* ---------- desktop card layer: live .module--items-staff (1180 x 1080 @1440, top 50%, JS sets the transform) ---------- */
.people__cards { height: 100%; pointer-events: none; position: absolute; top: 50%; width: 100%;
  transform: translateY(calc(-50% - 50px)); }   /* rest value of the live scroll parallax (a = 0); people.js overwrites it every scroll */
@media (max-width: 992px) { .people__cards { display: none; } }

.people__cards .cards-card { pointer-events: none; position: absolute; }
.people__cards .cards-card:first-child { left: 5.625rem; top: 9.375rem; }      /* live 90px / 150px */
.people__cards .cards-card:nth-child(2) { right: 7.1875rem; top: 0; }          /* live 115px */
.people__cards .cards-card:nth-child(3) { bottom: 8.4375rem; left: 5.9375rem; } /* live 135px / 95px */
.people__cards .cards-card:nth-child(4) { bottom: 0; right: 8.875rem; }        /* live 142px */

/* live .cards-card-btn: the SQUARE 265x265 hit area (z 6, pointer-events all) — the only thing that receives hover/click */
.people__cards .cards-card-btn { background: transparent; border: 0; cursor: pointer; height: 100%; left: 0; padding: 0;
  pointer-events: all; position: absolute; top: 0; width: 100%; z-index: 6; }
.people__cards .cards-card-inner { pointer-events: none; position: relative; }

/* live .cards-card-image: 265px circle, placeholder rgb(206,193,182), shadow rgba(149,137,125,.5) 5px 5px 40px */
.people__cards .cards-card-image { background-color: var(--sand, #cec1b6); border-radius: 50%; box-shadow: rgba(149, 137, 125, 0.5) 5px 5px 40px;
  cursor: pointer; height: 16.5625rem; overflow: hidden; pointer-events: all; position: relative; width: 16.5625rem; }
.people__cards .cards-card[data-openslide="false"] .cards-card-image,
.people__cards .cards-card[data-openslide="false"] .cards-card-content { pointer-events: none; }   /* live: cards that open nothing (all four clone cards are data-openslide="true") */
.people__cards .cards-card-image::before { background: rgb(96, 124, 157); inset: 0; clip-path: circle(0px); content: ""; opacity: 0.6;
  position: absolute; transition: 0.5s ease-in-out; z-index: 4; }   /* live blue wash */
.people__cards .cards-card-image .img { background-position: 50% center; background-repeat: no-repeat; background-size: cover;
  height: 100%; transition: 0.4s ease-in-out; width: 100%; }
.people__cards .cards-card-image .global-icons { display: none; }

/* live .cards-card-content: the overlay, opacity 0 → 1 on hover, padding 25px, z 5 */
.people__cards .cards-card-content { align-items: center; cursor: pointer; display: flex; height: 100%; justify-content: center; left: 0;
  opacity: 0; padding: 1.5625rem; pointer-events: none; position: absolute; text-align: center; top: 0; transition: 0.5s ease-in-out;
  width: 100%; z-index: 5; }
.people__cards .ccc-name { color: #fff; font-family: var(--font-display, "EB Garamond", serif); font-size: 2.0625rem; font-weight: 700; line-height: 0.87; } /* live 33px */
.people__cards .ccc-name span { color: #fff; display: block; font-family: var(--font-ui, "Figtree", "brandon-grotesque", sans-serif);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.8; text-transform: uppercase; }   /* eyebrow "NALANDANS ARE..." 16px / 1.6px */
.people__cards .ccc-name span span { display: inline; }   /* the "..." */
/* live .global-right-arrow-icon: white icon-font glyph U+E90E at 17px → 26.19 x 17px box, bottom 30px, centred (translateX(-13.09px)) */
.people__cards .global-right-arrow-icon { bottom: 1.875rem; color: #fff; display: block; font-size: 1.0625rem; left: 50%; position: absolute;
  transform: translateX(-50%); width: 1.637rem; height: 1.0625rem; background-color: currentColor;
  -webkit-mask: var(--long-arrow) center / contain no-repeat; mask: var(--long-arrow) center / contain no-repeat; }

/* hover — live gates it on Modernizr's html.no-touch (people.js adds the class); :focus-within gives keyboard users the same overlay */
html.no-touch .people__cards .cards-card:hover .cards-card-image::before,
html.no-touch .people__cards .cards-card:focus-within .cards-card-image::before { clip-path: circle(100%); }
html.no-touch .people__cards .cards-card:hover .cards-card-image .img,
html.no-touch .people__cards .cards-card:focus-within .cards-card-image .img { transform: scale(1.05); }
html.no-touch .people__cards .cards-card:hover .cards-card-content,
html.no-touch .people__cards .cards-card:focus-within .cards-card-content { opacity: 1; }

/* ---------- mobile Swiper (≤992px): live .module--items-staff_mobile ---------- */
.people__swiper { box-sizing: border-box; min-width: 0; overflow: hidden; padding: 0 0.75rem; position: relative; width: 100%; }   /* live 0 12px */
/* live hides this at (min-width: 992px) AND the desktop layer at (max-width: 992px), so at exactly 992px nothing shows;
   the clone hides the swiper from 993px so the JS breakpoint (innerWidth > 992) and the CSS agree at 992. */
@media (min-width: 993px) { .people__swiper { display: none; } }
.people__swiper .swiper-wrapper { display: flex; align-items: stretch; padding-bottom: 2.1875rem; }   /* live 35px */
.people__swiper .swiper-slide { flex-shrink: 0; height: auto; width: 55%; }
@media (max-width: 500px) { .people__swiper .swiper-slide { max-width: 12.9375rem; width: 100%; } }   /* live 207px */
.people__swiper .swiper-slide .cards-card { background: rgb(250, 250, 247); border-radius: 0.9375rem; box-shadow: rgba(149, 137, 125, 0.25) 3px 3px 11px;
  height: 100%; padding: 0.9375rem 1.25rem 1.375rem; position: relative; width: 100%; }   /* live radius 15px; padding 15px 20px 22px */
.people__swiper .cards-card-btn { background: transparent; border: 0; cursor: pointer; height: 100%; left: 0; padding: 0; pointer-events: all;
  position: absolute; top: 0; width: 100%; z-index: 6; }
.people__swiper .cards-card-image { margin-bottom: 0.625rem; text-align: center; }   /* live 10px */
.people__swiper .cards-card-image .img { background-position: 50% center; background-repeat: no-repeat; background-size: cover; border-radius: 50%;
  height: 10rem; margin: 0 auto; width: 10rem; }   /* live 160px circle */
.people__swiper .cards-card-image .global-icons { display: none; }
.people__swiper .ccc-name { color: var(--charcoal, #545454); font-family: var(--font-display, "EB Garamond", serif); font-size: 1.25rem; font-weight: 700;
  line-height: 0.95; margin: 0 auto; max-width: 12.5rem; text-align: center; }   /* live 20px, max 200px */
@media (max-width: 500px) { .people__swiper .ccc-name { max-width: 9.375rem; } }   /* live 150px */
.people__swiper .ccc-name span { color: var(--charcoal, #545454); display: block; font-family: var(--font-ui, "Figtree", "brandon-grotesque", sans-serif);
  font-size: 0.625rem; font-weight: 700; line-height: 1.9; text-transform: uppercase; }   /* live 10px */
.people__swiper .ccc-name span span { display: inline; }
/* live: orange 20px badge, bottom 12px right 10px, white 10px plus glyph (U+E900 global-plus-icon) */
.people__swiper .ccc-inner .global-icons { align-items: center; background-color: var(--peach, #ef9842); border-radius: 50%; bottom: 0.75rem; display: flex;
  height: 1.25rem; justify-content: center; position: absolute; right: 0.625rem; width: 1.25rem; }
.people__swiper .ccc-inner .global-icons::before { content: ""; display: block; width: 0.625rem; height: 0.625rem; background-color: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 1v8M1 5h8' stroke='black' stroke-width='2'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 1v8M1 5h8' stroke='black' stroke-width='2'/></svg>") center / contain no-repeat; }
/* live .swiper--btn-arrow: prev/next long arrows (the same U+E90E glyph at 20px / line-height 23px → 30.81 x 23px) in a flex row
   under the slides, rgb(162,150,138), prev rotated 180deg */
.people__swiper .swiper--btn-arrow { align-items: center; display: flex; justify-content: space-between; padding: 0 1.875rem; }   /* live 0 30px */
.people__swiper .swiper-button-next, .people__swiper .swiper-button-prev { height: auto; margin-top: 0; position: static; width: auto; color: var(--stone, #a2968a); }
.people__swiper .swiper-button-next svg, .people__swiper .swiper-button-prev svg { display: none; }
.people__swiper .swiper-button-next::after, .people__swiper .swiper-button-prev::after { display: none; }   /* the cdnjs Swiper bundle draws its own icon-font glyph here */
.people__swiper .swiper-button-next::before, .people__swiper .swiper-button-prev::before { content: ""; display: block; width: 1.926rem; height: 1.4375rem;
  background-color: currentColor; -webkit-mask: var(--long-arrow) center / contain no-repeat; mask: var(--long-arrow) center / contain no-repeat; }
.people__swiper .swiper-button-prev::before { transform: rotate(180deg); }

/* ---------- card popup: people.js appends body > section#people-media-popup (live section#mediaPopup.halfLayout.isMpStaff.isCard)
   on a card click; the drawer and its scroll lock are styled by the shared sections/media-popup.css. ---------- */

/* ---------- reduced motion, opt-in only (<html class="respect-reduced-motion">; the live has no such rule, so by default the
   motion always runs): same layout, no tweens (people.js reads the same class to skip both parallaxes and set Swiper speed 0) ---------- */
@media (prefers-reduced-motion: reduce) {
  html.respect-reduced-motion .people__cards .cards-card-image::before,
  html.respect-reduced-motion .people__cards .cards-card-image .img,
  html.respect-reduced-motion .people__cards .cards-card-content { transition: none; }
}