/* sections/welcome.css — Welcome panel (red slide-over) and rotating stats.
   Every value is the live one from recon/homepage-loaded-rules.css (Legacy/homepage.css + global.css), read against the
   inline source in recon/homepage.html for the rem/clamp values and the `ease` keywords serialisation drops.
   Live → clone element map:
     .module--sections-contaner + .section--welcome → .welcome        .module--welcome → .welcome__panel
     .module--welcome-inner → .welcome__inner                          .welcome-inner_content → .welcome__grid
     .welcome-inner_content--title / h2 → .welcome__title-col / .welcome__title
     .welcome-inner_content--description / p → .welcome__text-col / .welcome__text
     #quakerItem / .cards-card-btn → .pill / .pill__btn                .welcome-inner_items → .welcome__numbers
     .welcome-inner--stats → .welcome__stats                           .welcome-inner--stats_container → .welcome__stats-container
     .stats--group / .stats-item / _number / _title → .stats-group / .stats-item / .stats-item__number / .stats-item__title
     .welcome-inner--numbers → .welcome__cta                           button.btn.dark-blue--button → .numbers-btn
   Fonts: EB Garamond 600 (display) and Figtree (stand-in for Brandon Grotesque 500/700) via the :root tokens. */

/* ===== slide-over container ===== */
/* live .section--welcome: cream #f0efe7, height 100% of the hero wrapper — the cream shows beneath the red panel */
.welcome { position: relative; background-color: var(--cream, #f0efe7); color: #fff; }
@media (min-width: 993px) {
  /* live .module--sections-contaner (≥993px): the CSS already parks the panel at 115% so nothing flashes before GSAP sets y:115% */
  .welcome { height: 100%; left: 0; overflow: visible; position: absolute; top: 0; transform: translateY(115%); width: 100%; z-index: 10; }
}
@media (max-width: 992px) {
  .welcome { transform: none !important; }   /* live: ≤992 the panel sits in normal flow after the hero, no pin */
}

/* ===== red panel ===== */
.welcome__panel { background-color: var(--red-deep, #bf1d24); }   /* live .module--welcome; no fixed height: 696px at rest (lh 1.6/2.3), 611.6px at the end of the pin */
.welcome__inner { margin: 0 auto; padding: 6.875rem; }             /* live .module--welcome-inner: 110px all sides */
@media (min-width: 1800px) { .welcome__inner { width: 80%; } }
@media (max-width: 992px) { .welcome__inner { padding: 4.0625rem 1.25rem; } }   /* 65px 20px */

/* ===== title + description row ===== */
.welcome__grid { align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 7.5rem; position: relative; }   /* live .welcome-inner_content: 120px gap to the stats row */
@media (max-width: 992px) { .welcome__grid { margin-bottom: 1.5625rem; min-height: auto; } }   /* 25px */

.welcome__title-col { flex: 0 0 55%; max-width: 55%; }   /* 671px @1440 */
/* live h2: 45.54px @1440, line-height 1.6 (72.86px) and translateY(120px) at rest; GSAP scrubs both to 1 / 0 */
.welcome__title { color: #fff; font-family: var(--font-display); font-size: clamp(1.9375rem, 2.1634615385vw + .8990384615rem, 3.0625rem); font-weight: 600; line-height: 1.6; margin: 0; max-width: 33.4375rem; transform: translateY(7.5rem); }
@media (max-width: 992px) {
  .welcome__title { line-height: 1 !important; transform: none !important; }   /* live: !important beats any leftover inline GSAP style */
  .welcome__title-col { flex: 0 0 100%; margin-bottom: 1.25rem; max-width: 100%; transform: none; }
}

.welcome__text-col { flex: 0 0 45%; max-width: 45%; }   /* 549px @1440 */
/* live p: 19.23px @1440, line-height 2.3 (44.23px) and translateY(120px) at rest; GSAP scrubs to 1.35 / 0 */
.welcome__text { color: #fff; font-family: var(--font-ui); font-size: clamp(1rem, .4807692308vw + .7692307692rem, 1.25rem); font-weight: 500; line-height: 2.3; margin: 0; max-width: 28.125rem; transform: translateY(7.5rem); }
@media (max-width: 992px) {
  .welcome__text { line-height: 1.35 !important; transform: none !important; }
  .welcome__text-col { flex: 0 0 100%; max-width: 100%; }
}

/* ===== "real work" pill (live #quakerItem, measured 139.7×26 @1440) ===== */
.welcome__nowrap { white-space: nowrap; }   /* keeps the comma on the pill's line: Chrome allows a break after an inline-block even before punctuation */
.welcome .pill {
  --pill-disc: clamp(.9375rem, .3605769231vw + .7644230769rem, 1.125rem);    /* white disc 17.42px @1440 */
  --pill-glyph: clamp(.625rem, .3605769231vw + .4519230769rem, .8125rem);    /* info glyph font-size 12.42px @1440 (1em = the glyph's ink height) */
  --pill-glyph-scale: tan(atan2(var(--pill-glyph), 100px));                  /* the same as a unitless number (12.42px / 100px = .1242): tan(atan2(a, b)) = a / b */
  --pill-glyph-right: .75rem;                                                 /* live ::after right: 12px (10px ≤1300) */
  /* live glyph height: the ::after is a text line with line-height 0, so Chrome puts the baseline at top + A + floor(-(A + D) / 2),
     where A / D are the icon font's ascent .9375em / descent .0625em (IcoMoon 960/64 of 1024) each rounded to whole px, and the ink
     spans the full em around it (centre = baseline - .4375em). The mask's ink is centred .005em above `top`, so --pill-glyph-dy is
     the gap between the two: -.37px @1440, -.84px @1100, 0 @1200, -.62px ≥1600, -.33px on phones (measured on the live page). */
  --pill-glyph-a: round(var(--pill-glyph) * .9375, 1px);
  --pill-glyph-d: round(var(--pill-glyph) * .0625, 1px);
  --pill-glyph-dy: calc(var(--pill-glyph-a) + round(down, (var(--pill-glyph-a) + var(--pill-glyph-d)) / -2, 1px) - var(--pill-glyph) * .4325);
  background: var(--red-bright, #eb2d35); border-radius: .875rem; cursor: pointer; display: inline-block; padding: 0 1.75rem 0 .3125rem; position: relative; transition: all .3s ease-in-out;
}
@media (min-width: 992px) { .welcome .pill { line-height: 1.35; } }
@media (max-width: 1300px) { .welcome .pill { --pill-glyph-right: .625rem; padding-right: 1.5rem; } }   /* live: the glyph box moves 2px right of the disc centre below 1300 */
@media (hover: hover) { .welcome .pill:hover { background: #f49f4b; } }   /* live: html.no-touch #quakerItem:hover */
/* live ::before — white disc at right 5px, vertically centred */
.welcome .pill::before { background-color: #fff; border-radius: 50%; content: ""; height: var(--pill-disc); width: var(--pill-disc); position: absolute; right: .3125rem; top: 50%; transform: translateY(-50%); z-index: 0; }
/* live ::after — global-icons U+E918 in #eb2d35 at 12.42px: a bold ITALIC SERIF "i" only (round dot, slanted stem with a hooked
   top serif and a curled foot whose tail tips up at the right) — no circle; the white disc (::before) is the only round shape.
   Live box: right .75rem (.625rem ≤1300), width = the glyph's .442em advance, line-height 0, so the 1em-tall ink hangs from the
   pill's 50% line (a little above it: --pill-glyph-dy) with its left edge .442em inside that right offset (ink centre ≈ 0.5–1px
   left of the disc centre, as live).
   The icon font is proprietary, so the glyph is traced from a 200px render of the live font into an SVG mask: viewBox 44×100 =
   .44em × 1em → ink 5.5×12.4px @1440 (dot ø ~3px, stem ~2.6px wide).
   The box is 44.2×102 CSS px scaled down by transform instead of a 5.5×12.4px box: Chrome snaps a mask box to whole CSS pixels
   and stretches the image into it (measured 6×13px in situ → stem 3px, ink 13px tall), a transform scale keeps the exact size.
   With transform-origin at the top-right, `translateY(-50%)` (of the 102px box) then `scale` leaves the scaled box centred on
   top: 50% with its right edge at `right` — the same place as the translateY(-50%) 1em box. The box is 44.2 units = the glyph's
   .442em advance and the viewBox starts at the ink (x .9, y -2 so the raised dot clears the box), so the ink's left edge sits
   .442em inside `right` exactly as the font puts it. Chrome also rounds a transformed box's layout position to whole CSS px, so
   welcome.js sets `--pill-glyph-snap` (the fraction that puts the box's left edge on a whole pixel) and the leading translateX
   moves the rendered glyph back by that amount — like the live font glyph, it then sits at sub-pixel x (0px without JS).
   Vertically the live font rounds the same whole-px `top`, then drops the baseline by whole px (see --pill-glyph-dy on .pill);
   the translateY(dy) before the scale is in CSS px and is not rounded, so the ink lands on the live ink to the device pixel. */
.welcome .pill::after {
  content: ""; position: absolute; top: 50%; z-index: 1; width: 44.2px; height: 102px; right: calc(var(--pill-glyph-right) - var(--pill-glyph-snap, 0px));
  /* browsers without CSS round() / trig (Chrome < 125, Safari < 15.4, Firefox < 118): the 1440 scale and dy */
  transform-origin: 100% 0; transform: translateX(calc(-1 * var(--pill-glyph-snap, 0px))) translateY(-.373px) scale(.1242) translateY(-50%);
  background-color: #eb2d35;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.9 -2 44.2 102'%3E%3Cellipse fill='%23000' cx='31.6' cy='9.5' rx='12.3' ry='11.5'/%3E%3Cpath fill='%23000' d='M0.9 40.5C5 37.5 11 34 17 32.9C20 32.4 22.5 32.4 24.5 33C30 34.5 34.5 38.5 35.7 43.6C35.5 58 27.5 68 27.5 88C28 88.5 30 89.2 33 89.2L37 88.6C38.5 87.6 41 87.4 41.8 88.2C42.5 89 42.3 90.5 42 91.5C41.5 94.5 38 96.5 33 97.5C28 98.5 23 99.3 19 99C14 98.8 9.5 96 7.3 91.5C6.6 89.5 6.4 88 6.4 86C6.4 72 14.5 62 14.5 43.6L10.3 43.6C8.5 43.6 6 42.3 3.5 43.3C2 43.6 1.2 42.5 0.9 40.5Z'/%3E%3C/svg%3E") left center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.9 -2 44.2 102'%3E%3Cellipse fill='%23000' cx='31.6' cy='9.5' rx='12.3' ry='11.5'/%3E%3Cpath fill='%23000' d='M0.9 40.5C5 37.5 11 34 17 32.9C20 32.4 22.5 32.4 24.5 33C30 34.5 34.5 38.5 35.7 43.6C35.5 58 27.5 68 27.5 88C28 88.5 30 89.2 33 89.2L37 88.6C38.5 87.6 41 87.4 41.8 88.2C42.5 89 42.3 90.5 42 91.5C41.5 94.5 38 96.5 33 97.5C28 98.5 23 99.3 19 99C14 98.8 9.5 96 7.3 91.5C6.6 89.5 6.4 88 6.4 86C6.4 72 14.5 62 14.5 43.6L10.3 43.6C8.5 43.6 6 42.3 3.5 43.3C2 43.6 1.2 42.5 0.9 40.5Z'/%3E%3C/svg%3E") left center / contain no-repeat;
}
/* the per-width scale and dy, behind @supports: they come through var(), so an unsupported round()/tan() would not fall back to the
   declaration above but void the whole transform (invalid at computed-value time) and leave the 44×102px box unscaled */
@supports (width: round(down, 1.5px, 1px)) and (width: calc(1px * tan(atan2(1px, 100px)))) {
  .welcome .pill::after { transform: translateX(calc(-1 * var(--pill-glyph-snap, 0px))) translateY(var(--pill-glyph-dy)) scale(var(--pill-glyph-scale)) translateY(-50%); }
}
/* live .cards-card-btn: transparent full-size hit area over the pill (z 6) that opens the popup */
.welcome .pill__btn { background: transparent; border: 0; border-radius: .875rem; cursor: pointer; font-size: 0; height: 100%; left: 0; margin: 0; padding: 0; pointer-events: all; position: absolute; top: 0; width: 100%; z-index: 6; }
.welcome .pill__btn:focus-visible { outline: 1px dashed #fff; outline-offset: 2px; }
.welcome .pill__label { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }   /* live keeps the link text at font-size 0 */

/* ===== stats + button row (live .welcome-inner_items) ===== */
.welcome__numbers { align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-start; }
.welcome__stats { flex: 0 0 70%; max-width: 70%; }                 /* 854px @1440 */
.welcome__stats.js-hidden-stats { display: none; }                  /* JS adds it when fewer than 3 items */
@media (max-width: 1300px) { .welcome__stats { flex: 0 0 100%; margin-bottom: 2.8125rem; max-width: 100%; } }   /* 45px */
@media (max-width: 767px) { .welcome__stats { margin-bottom: 1.25rem; } }
.welcome__stats-container { align-items: stretch; display: flex; justify-content: flex-start; }   /* 854×135 measured */
@media (max-width: 767px) { .welcome__stats-container { flex-wrap: wrap; } }

/* one column per group (JS builds .stats-group; the `> .stats-item` variant is the live no-grouping fallback for exactly 3 items) */
.welcome .stats-group, .welcome__stats-container > .stats-item { flex: 0 0 33.33%; max-width: 33.33%; overflow: hidden; padding: .3125rem 1.875rem; position: relative; }   /* 284.6px, 5px 30px */
@media (max-width: 767px) {
  .welcome .stats-group, .welcome__stats-container > .stats-item { align-items: center; display: flex; flex: 0 0 100%; justify-content: flex-start; max-width: 100%; padding: 1.125rem 1.25rem; }   /* phone: full-width row, number beside title */
}
/* 2px white rule at 22% on every column's left edge */
.welcome .stats-group::before, .welcome__stats-container > .stats-item::before { background-color: #fff; content: ""; height: 100%; left: 0; opacity: .22; position: absolute; top: 0; width: .125rem; }

/* rotating item: enters from the right, exits to the left — live: transition transform 1.5s ease, opacity 1.3s ease */
.welcome .stats-group .stats-item { opacity: 0; position: relative; transform: translateX(100%); transition: transform 1.5s ease, opacity 1.3s ease; will-change: transform, opacity; }
.welcome .stats-group .stats-item:not(:first-child) { inset: 0; left: 1.875rem; position: absolute; }   /* items 2+ stack on item 1: 30px → right edge (254.6px vs 224.6px) */
@media (max-width: 767px) {
  .welcome .stats-group .stats-item:not(:first-child) { left: 1.25rem; }
  .welcome .stats-group .stats-item { align-items: center; display: flex; }
}
.welcome .stats-group .stats-item.active { opacity: 1; transform: translateX(0); }
.welcome .stats-group .stats-item.exit { opacity: 0; transform: translateX(-100%); }

/* live .stats-item_number: EB Garamond 600, 65.15px @1440, one-line clamp. The letter-spacing clamp has min > max on the live sheet,
   so it resolves to its first value (-0.98px) at every width — copied as is. */
.welcome .stats-item__number { -webkit-line-clamp: 1; -webkit-box-orient: vertical; color: #fff; display: -webkit-box; font-family: var(--font-display); font-size: clamp(3.0625rem, 2.4038461538vw + 1.9086538462rem, 4.3125rem); font-weight: 600; letter-spacing: clamp(-.06125rem, -.0480769231vw + -.0381730769rem, -.08625rem); line-height: 1; margin: 0 0 .3125rem; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 992px) { .welcome .stats-item__number { margin-bottom: 0; margin-right: .9375rem; margin-top: -.5rem; } }
/* deviation: on the live page the number is a shrinkable flex item on phones, so "12,444" is clamped to "12,4…" at 390px; the clone keeps
   the number whole and lets the title wrap instead (invisible for the short numbers the live page mostly shows) */
@media (max-width: 767px) { .welcome .stats-item__number { flex-shrink: 0; } }
/* live .stats-item_title: Brandon 500, 22.85px @1440, lh 1.2, 200px wide */
.welcome .stats-item__title { color: #fff; font-family: var(--font-ui); font-size: clamp(1.125rem, .7211538462vw + .7788461538rem, 1.5rem); font-weight: 500; line-height: 1.2; margin: 0; max-width: 12.5rem; }

/* ===== "Nalanda by the numbers" column (live .welcome-inner--numbers) ===== */
.welcome__cta { flex: 0 0 30%; max-width: 30%; }   /* 366px; the button is shrink-to-fit and left-aligned, vertically centred on the 135px stats row */
@media (max-width: 1300px) { .welcome__cta { display: flex; flex: 0 0 100%; justify-content: center; max-width: 100%; } }

/* live .btn.dark-blue--button (global) + the homepage override: measured 313.5×50.4 @1440 */
.welcome .numbers-btn { align-items: center; background: transparent; border: 0; color: #fff; cursor: pointer; display: flex; font-family: var(--font-ui); font-size: clamp(.8125rem, .3605769231vw + .6394230769rem, 1rem); font-weight: 700; justify-content: center; letter-spacing: clamp(.08125rem, .0480769231vw + .0581730769rem, .10625rem); line-height: 1.45; margin: 0; min-width: 12.1875rem; padding: .9375rem 1.6875rem .8125rem; position: relative; text-transform: uppercase; transition: all .3s ease-in-out; }
/* 15.42px, tracking 1.62px, padding 15px 27px 13px; margin-right 1.5625rem is cancelled by :last-child on the live page */
.welcome .numbers-btn::before { border: .125rem solid #fff; border-radius: .4375rem; content: ""; height: 100%; left: 0; opacity: .22; position: absolute; top: 0; transition: all .3s ease-in-out; width: 100%; }   /* 2px hairline at 22%, 7px radius */
.welcome .numbers-btn:focus { outline: 1px dashed #fff; }
/* live .global-icons.global-plus-icon (U+E900): 13.42px glyph in a 1.123em content box (15.07px, text-align center → the 1em ink sits
   0.06em in from the left), 13.23px gap, white → #ffb56c on hover. The glyph, traced from a 200px render of the live icon font: ink
   1.005 × 0.995em, both bars 0.185em thick (2.48px @1440) with ~0.03em rounded corners. Redrawn as an SVG mask in a 100-unit box
   that is 100×100 CSS px scaled down to 1em by transform (a 13.42px mask box would be snapped to 13 or 14 whole pixels by Chrome and
   the plus stretched with it — measured 14×14 before); `translateX(6.25px)` before the scale = the .0625em the live text-align
   centring leaves on the left of the 1.125em box. */
.welcome .numbers-btn__icon { box-sizing: content-box; color: #fff; display: block; flex: none; font-size: clamp(.6875rem, .514423rem + .360577vw, .875rem); height: 1em; line-height: 1; padding-left: clamp(.625rem, .394231rem + .480769vw, .875rem); transition: all .3s ease-in-out; width: 1.125em; }
.welcome .numbers-btn__icon::before {
  content: ""; display: block; width: 100px; height: 100px; background-color: currentColor;
  transform-origin: 0 0; transform: scale(.1342) translateX(6.25px);   /* fallback for browsers without CSS trig (pre-2023): the 1440 factor */
  transform: scale(tan(atan2(1em, 100px))) translateX(6.25px);        /* 1em / 100px as a unitless number: tan(atan2(a, b)) = a / b */
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect fill='%23000' x='40.75' y='0' width='18.5' height='100' rx='3'/%3E%3Crect fill='%23000' x='0' y='40.5' width='100' height='19' rx='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect fill='%23000' x='40.75' y='0' width='18.5' height='100' rx='3'/%3E%3Crect fill='%23000' x='0' y='40.5' width='100' height='19' rx='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) {   /* live: html.no-touch .dark-blue--button:hover */
  .welcome .numbers-btn:hover { color: #ffb56a; }
  .welcome .numbers-btn:hover::before { transform: scale(1.02); }
  .welcome .numbers-btn:hover .numbers-btn__icon { color: #ffb56c; }
}

/* ===== popups: the pill and the numbers button open the shared right-hand drawer (section.mediaPopup, built by welcome.js; its
   CSS — the 737px cream panel, the rgba(0,0,0,.82) overlay, the .3s slide and the scroll lock — is in sections/media-popup.css) ===== */

/* ===== motion safety, opt-in only (<html class="respect-reduced-motion">, read by welcome.js and hero-header.js too; the live has
   no such rule, so by default the pin, the slide-over and the stats slide always run): layout stays, motion goes ===== */
@media (prefers-reduced-motion: reduce) {
  html.respect-reduced-motion .welcome { height: auto; position: relative; transform: none !important; }   /* in flow after the hero, like ≤992 (hero-header.js creates no pin) */
  html.respect-reduced-motion .welcome__title { line-height: 1 !important; transform: none !important; }
  html.respect-reduced-motion .welcome__text { line-height: 1.35 !important; transform: none !important; }
  html.respect-reduced-motion .welcome .stats-group .stats-item, html.respect-reduced-motion .welcome .pill, html.respect-reduced-motion .welcome .numbers-btn, html.respect-reduced-motion .welcome .numbers-btn::before, html.respect-reduced-motion .welcome .numbers-btn__icon { transition: none; }   /* stats swap in place instead of sliding */
}