/* New front page: sits on the gallery's own stylesheet (blue hero, duotone stills, tiles). Only what is new lives here. */
.wh .hero__q { font-size: clamp(1.9rem, 3.5vw, 3.3rem); }
.wh .hero__media .duo { --dl: #D6E7F1; --dc: var(--coral); --duo: url(#duo-blue); }
.wh .hero__media video { object-position: 42% center; }
.wh .hero__a { max-width: 34em; }
.wh-play { background: none; border: 0; color: #fff; font: inherit; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.wh-play[aria-pressed="true"] { text-decoration-color: var(--coral); }
.wh-cap { margin-top: 22px; min-height: 3.2em; max-width: 30em; font-size: 1.15rem; line-height: 1.4; color: #fff; }
.wh-cap:empty { visibility: hidden; }
.wh-h span, .wh-lines span, .wh-three h3 span { display: block; }
.wh-h { text-wrap: balance; }
.wh-beat { padding: clamp(72px, 9vw, 128px) 0; background: var(--night); color: #fff; --ink: #fff; --muted: #B9C6D8; }
.wh-lines { font-size: clamp(2.2rem, 5.6vw, 5.2rem); line-height: 1.02; font-weight: 600; letter-spacing: -.03em; color: #fff; }
.wh-lines .q { margin-top: .35em; color: #9CC0EC; } .wh-lines .a { color: var(--coral); }
.wh-quote { margin: clamp(36px, 5vw, 64px) 0 0; max-width: 34em; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.4; color: #E7F0F8; border-left: 4px solid var(--blue); padding-left: 22px; }
.wh-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: .95rem; color: #B9C6D8; }
.wh-three { margin-top: clamp(56px, 7vw, 96px); }
.wh-three h3 { font-size: clamp(1.7rem, 3.2vw, 2.8rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 600; color: #fff; }
.wh-item { margin-top: 18px; font-size: 1.15rem; color: #B9C6D8; } .wh-item b { color: #9CC0EC; margin-right: 10px; }
.wh-voices { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid rgb(255 255 255 / .28); }
.wh-voices li { position: relative; padding: 0 clamp(14px, 2vw, 28px) 0 0; }
.wv { width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 16px 0 0; display: grid; gap: 10px; }
.wv__n { font-size: clamp(3.4rem, 7vw, 6.4rem); font-weight: 200; line-height: .9; letter-spacing: -.04em; color: rgb(255 255 255 / .38); transition: color .2s; }
.wv__who { font-weight: 600; font-size: 1.05rem; } .wv__who small { display: block; font-weight: 400; color: #B9C6D8; font-size: .92rem; }
.wv__play { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; } .wv__play i { width: 40px; height: 40px; border-radius: 50%; background: var(--coral); display: grid; place-items: center; flex: none; } .wv__play svg { width: 16px; height: 16px; fill: #14202F; }
.wv__play .pa { display: none; } .wv[aria-pressed="true"] .pl { display: none; } .wv[aria-pressed="true"] .pa { display: block; }
.wv__q { font-size: 1.12rem; line-height: 1.42; color: #E7F0F8; min-height: 6.2em; } .wv__q .w { opacity: .45; transition: opacity .15s; } .wv__q .w.said { opacity: 1; } .wv__q.idle .w { opacity: 1; }
.wv__gloss { font-size: .95rem; line-height: 1.4; color: #B9C6D8; }
.wv__meant { font-size: .98rem; color: #9CC0EC; font-weight: 600; }
.wh-voices li.on .wv__n, .wv:hover .wv__n { color: #fff; }
.wh-voices li::before { content: ""; position: absolute; left: 0; top: -2px; height: 6px; width: 0; background: var(--coral); transition: width .2s linear; } .wh-voices li.on::before { width: var(--p, 0%); }
.wh-fine { margin-top: 18px; font-size: .9rem; color: var(--faint, #94A3B8); max-width: 60em; }
.wh-how { list-style: none; margin: clamp(56px, 7vw, 96px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 3vw, 40px); counter-reset: h; }
.wh-how li { border-top: 2px solid var(--blue); padding-top: 14px; font-size: 1.1rem; line-height: 1.35; color: #E7F0F8; } .wh-how b { display: block; font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -.02em; color: #fff; }
.wh-grid3 { grid-template-columns: repeat(3, 1fr); } .wh-grid2 { grid-template-columns: repeat(2, 1fr); } .wh-grid1 { grid-template-columns: 1fr; }
.wh .ctile { min-height: clamp(380px, 40vw, 600px); } .ctile--wide { min-height: clamp(420px, 44vw, 640px) !important; }
.wh .duo[data-duo="blue"] { --dl: #D6E7F1; --dc: #F37163; --duo: url(#duo-blue); } .wh .duo[data-duo="gold"] { --dl: #FBE7B9; --dc: #1F7CC4; --duo: url(#duo-gold); }
.wh .duo[data-duo="teal"] { --dl: #CFEBE3; --dc: #F7B63B; --duo: url(#duo-teal); } .wh .duo[data-duo="plum"] { --dl: #EBD3E3; --dc: #F7B63B; --duo: url(#duo-plum); } .wh .duo[data-duo="maroon"] { --dl: #EFD9D6; --dc: #C9A93C; --duo: url(#duo-maroon); }
.wh-also { margin-top: 26px; font-size: 1.1rem; color: var(--muted); } .wh-also a { color: var(--ink); font-weight: 600; text-underline-offset: 4px; }
.wh-last { padding-bottom: clamp(72px, 9vw, 128px); }
.wh-foot { background: var(--night-2, #0C1A2D); color: #B9C6D8; padding: 56px 0 64px; } .wh-foot a { color: #fff; } .wh-foot p { margin: 0 0 14px; } .wh-sign { font-size: 1.3rem; color: #fff; font-weight: 600; } .wh-sign a { font-weight: 400; font-size: 1rem; }
@media (max-width: 900px) { .wh-grid3, .wh-grid2 { grid-template-columns: 1fr; } .wh-voices { grid-template-columns: 1fr; border-top: 0; } .wh-voices li { border-top: 2px solid rgb(255 255 255 / .28); padding: 0 0 28px; } .wv__q { min-height: 0; } .wh-how { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .wh .hero__media { position: relative; width: 100%; height: 46vw; min-height: 220px; inset: auto; } .wh .hero { flex-direction: column; align-items: stretch; } .wh .hero__copy { width: 100%; padding: 36px var(--gutter) 56px; } }
@media (prefers-reduced-motion: reduce) { .wh-voices li::before { transition: none; } }
/* phone: keep the disc off her face */
@media (max-width: 900px) { .wh .hero .hero__media .duo { --disc-s: 44% !important; --disc-x: -16% !important; --disc-y: -46% !important; } .wh .hero__media video { object-position: 30% 20%; } }

/* ---- round 2 (Josh, 11/13) ---- */
.wh-lock { display: flex !important; align-items: center; gap: 14px; width: auto !important; flex: none; color: var(--muted); font-weight: 300; font-size: 1.2rem; }
.wh-lock img { height: 36px; width: auto; display: block; } .wh-lock .logo { width: 132px; height: auto; }
.wh .hero__media .duo::before { display: none; } /* no disc: the district's emblem sits there instead */
.wh .hero__media video { height: 132%; object-position: 42% top; } /* crops the broadcast lower-third out of frame */
.wh-seal { position: absolute; z-index: 3; right: clamp(18px, 3vw, 44px); bottom: clamp(18px, 3vw, 44px); width: clamp(84px, 9vw, 132px); height: auto; background: #fff; border-radius: 50%; padding: 12px; box-shadow: 0 0 0 6px rgb(255 255 255 / .18); }
.wh-kara { margin-top: 26px; max-width: 30em; font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.45; color: #fff; }
.wh-kara .w { opacity: .38; transition: opacity .12s, color .12s; } .wh-kara .w.said { opacity: 1; } .wh-kara .w.now { color: #FFD27A; }
.wh-kara .key { font-weight: 600; } .wh-kara.idle .w { opacity: 1; }
.wh-lines span:nth-child(3) { color: #9CC0EC; }
.wh-clip { margin: clamp(40px, 6vw, 80px) 0 0; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: center; }
.wh-clip__v { position: relative; display: block; padding: 0; border: 0; background: #0C1A2D; cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; }
.wh-clip__v video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wh-clip__btn { position: absolute; left: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%; background: var(--coral); display: grid; place-items: center; } .wh-clip__btn svg { width: 22px; height: 22px; fill: #14202F; }
.wh-clip__btn .pa { display: none; } .wh-clip__v[aria-pressed="true"] .pl { display: none; } .wh-clip__v[aria-pressed="true"] .pa { display: block; }
.wh-kara--big { margin: 0; max-width: 26em; font-size: clamp(1.3rem, 2.3vw, 2rem); line-height: 1.32; letter-spacing: -.01em; } .wh-kara--big .key { color: #fff; } .wh-kara--big.idle .w { opacity: .62; } .wh-kara--big.idle .key .w { opacity: 1; }
.wh-clip cite { display: block; margin-top: 16px; font-style: normal; font-size: .95rem; color: #B9C6D8; }
.wh-three h3 .q { color: #9CC0EC; } .wh-three h3 .a { color: var(--coral); }
.wv__who small { text-transform: none; }
@media (max-width: 900px) { .wh-clip { grid-template-columns: 1fr; } .wh-lock img { height: 28px; } .wh-lock .logo { width: 104px; } .wh-seal { width: 72px; padding: 8px; right: 14px; bottom: 14px; } .wh .hero .hero__media video { height: 132%; object-position: 30% top; } }
/* embed one section inside the presenter deck: /wellness/?embed=three */
.wh-embed .nav, .wh-embed .hero, .wh-embed .could, .wh-embed .wh-foot, .wh-embed .wh-lines, .wh-embed .wh-clip, .wh-embed .wh-how, .wh-embed .skip { display: none !important; } .wh-embed .wh-beat { padding: 5vh 0; min-height: 100vh; display: grid; align-items: center; } .wh-embed .wh-three { margin-top: 0; }

/* hero disc is back (Josh, 11/13): the coral circle, with the district's emblem set inside it */
.wh .hero__media .duo::before { display: block; }
.wh .hero .hero__media .duo { --disc-s: 62% !important; --disc-x: -14% !important; --disc-y: -22% !important; }
.wh-seal { background: none; padding: 0; border-radius: 0; box-shadow: none; right: 7.5%; bottom: 5%; width: 27%; max-width: 250px; min-width: 96px; filter: drop-shadow(0 2px 10px rgb(10 30 60 / .25)); }
@media (max-width: 900px) { .wh .hero .hero__media .duo { --disc-s: 46% !important; --disc-x: -8% !important; --disc-y: -34% !important; } .wh-seal { width: 22%; min-width: 70px; right: 4%; bottom: 6%; } }

/* disc and emblem share one center at every width (both measured from the media's width), and the disc sits higher */
.wh .hero__media { container-type: inline-size; }
.wh .hero .hero__media .duo::before { width: 62cqw; right: -14cqw; bottom: -12cqw; }
.wh-seal { width: 27cqw; max-width: none; min-width: 0; right: 3.5cqw; bottom: 5.5cqw; }
@media (max-width: 900px) { .wh .hero .hero__media .duo::before { width: 40cqw; right: -6cqw; bottom: -8cqw; } .wh-seal { width: 20cqw; right: 4cqw; bottom: 2cqw; } }
.wh-lock, .wh-lock:hover { text-decoration: none; } .wh-lock span { text-decoration: none; }

/* the board quote reads as a quote: true italic, with quotation marks */
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 100 1000; src: url(/wellness/brand/DMSans-Italic-Variable.ttf) format("truetype"); font-display: swap; }
.wh-kara--big { font-style: italic; font-weight: 400; } .wh-kara--big .key { font-weight: 600; }
.wh-kara--big::before { content: "\201C"; } .wh-kara--big::after { content: "\201D"; margin-left: -.2em; }