/* Sample BI2-lens (round 05), from a copy of round-04 BI "From the Building to the Ideas"; the ending is a lens
   that keeps the clusters inside it lit, dims the rest and lists their phrases in a short column beside it.
   Two layouts share this file:
   the plain layout (no JavaScript, reduced motion, very tall windows): header, photo, the settled map, the lab;
   html.pin: the first screen is a pinned stage where the photo becomes points and the points become the map. */
:root {
  --red: #A32638;      /* Stevens Red */
  --ink: #363D45;      /* Dark Gray: text on white, and the ground of the stage */
  --rule: #E4E5E6;     /* Light Gray: hairlines; secondary text on the stage (8.72:1) */
  --white: #FFFFFF;
  --gray: #7F7F7F;     /* Stevens Gray: identifier only */

  --disp: 'Saira Condensed', 'Arial Narrow', Arial, sans-serif;
  --body: 'IBM Plex Sans', Arial, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --gut: 24px;
  --wrap: 1200px;
  --u: calc(100cqw / 1440);  /* one map unit inside .map */
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font: 400 17px/1.65 var(--body); font-synthesis: none; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.scene :focus-visible { outline-color: var(--white); }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding-inline: var(--gut); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--white); color: var(--ink); padding: 10px 14px; border: 2px solid var(--red); }
.skip:focus { top: 16px; }

/* ---------- header (white; on the stage it slides away as the scene starts) ---------- */
.site-head { position: relative; z-index: 6; background: var(--white); height: 120px; }
.head-row { display: flex; align-items: center; height: 120px; }
.mark { flex: none; display: block; }
.mark img { display: block; height: 50px; width: auto; }
.lab { margin-left: 34px; font: 600 24px/1 var(--disp); color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav-wide { margin-left: auto; }
.nav-wide ul, .menu ul { list-style: none; margin: 0; padding: 0; }
.nav-wide ul { display: flex; gap: 26px; }
.nav-wide a { font: 500 15px/1 var(--body); color: var(--ink); text-decoration: none; white-space: nowrap; }
.menu { margin-left: auto; position: relative; }
.menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 44px;
  font: 600 15px/1 var(--body); color: var(--ink); padding: 0 16px;
  border: 1px solid var(--ink); border-radius: 3px; background: var(--white);
}
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: calc(100% + 8px); min-width: 260px; z-index: 10; background: var(--white); border: 1px solid var(--ink); padding: 8px 0; }
.menu nav a { display: block; padding: 11px 18px; font: 500 16px/1.3 var(--body); color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .nav-wide a:hover, .menu nav a:hover { color: var(--red); text-decoration: underline; } }
@media (min-width: 1180px) { .menu { display: none; } }
@media (max-width: 1179px) { .nav-wide { display: none; } }
@media (max-width: 560px) { .lab { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px;
  background: var(--red); color: var(--white); border: 1px solid var(--red); border-radius: 3px;
  font: 600 16px/1.2 var(--body); text-decoration: none;
}
.btn-line { background: var(--white); color: var(--red); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--white); } }

/* ---------- the scene: plain layout ---------- */
.scene { position: relative; background: var(--ink); color: var(--white); }
.hero { padding: 40px 0 56px; overflow: hidden; }
.plate { position: relative; margin: 0 auto; max-width: 1180px; width: calc(100% - 2 * var(--gut)); }
.photo { display: block; width: 100%; height: auto; }
.scan, .gl, .still-cloud, .still-map, .hero-note { display: none; }
.copy { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 32px auto 0; padding-inline: var(--gut); }
.copy .lab-m { display: none; margin: 0 0 6px; font: 700 30px/1.05 var(--disp); color: var(--white); }
.kicker { margin: 0 0 12px; font: 600 12px/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--rule); }
.copy h1 { margin: 0 0 24px; max-width: 20em; font: 700 clamp(2rem, 3.4vw, 2.75rem)/1.08 var(--disp); color: var(--white); }
@media (max-width: 560px) { .copy .lab-m { display: block; } }
@media (max-width: 760px) {
  .kicker { display: none; }
  .copy h1 { font-size: 26px; line-height: 1.12; margin-bottom: 18px; }
  .copy .btn { display: flex; width: 100%; justify-content: center; }
}

/* the map, settled (plain layout); the pinned stage reuses all of it */
.mapsec { padding: 24px 0 48px; }
.map-h { margin: 0 auto 8px; max-width: calc(var(--wrap) + 2 * var(--gut)); padding-inline: var(--gut);
  font: 600 clamp(1.6rem, 2.6vw, 2.1rem)/1.12 var(--disp); color: var(--white); }
.map { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; aspect-ratio: 1440 / 900;
  container-type: inline-size; container-name: map; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* two frames share the labels: the 1440 x 900 frame and the narrow 800-unit frame (html.lay-n, set by bi.js) */
html.lay-n .svg-w { display: none; }
html.lay-n .map { --u: calc(100cqw / 800); }
html.lay-n .lb .ph { font-size: max(14px, calc(13 * var(--u))); }   /* the narrow frame's type */
html.lay-n .lb .nm { font-size: max(12.5px, calc(11.5 * var(--u))); }
.anchors circle { fill: var(--rule); }
.labels { margin: 0; padding: 0; list-style: none; }
.lb a { display: block; color: var(--white); text-decoration: none; }
/* fix 2: the column's type is read by managers at arm's length: phrases 14 px or more, names 12.5 px or more */
.lb .ph { display: block; font: 400 max(14px, calc(13.5 * var(--u)))/1.4 var(--body); }
.lb .nm { display: block; margin-top: calc(3 * var(--u)); font: 600 max(12.5px, calc(12 * var(--u)))/1.35 var(--body); color: var(--rule); }
.lb a:hover .ph, .lb a:focus-visible .ph { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
@container map (max-width: 1319px) { html:not(.lay-n) .labels { display: none; } }
/* the cluster a reader picked on the clusters-only map (phones, narrow windows) */
.ring { position: absolute; z-index: 4; border: 1.5px solid var(--white); border-radius: 50%; pointer-events: none; display: none; }
.ring.on { display: block; }
.cap { display: none; }
.mapsec { container-type: inline-size; container-name: mapsec; }
.map-more { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 10px auto 0; padding-inline: var(--gut); font: 400 16px/1.45 var(--body); color: var(--white); }
.map-more a { color: var(--white); }
html.pin .map-more { display: none !important; }
.method { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 14px auto 0; padding-inline: var(--gut);
  font: 400 13px/1.45 var(--body); color: var(--rule); }

/* ---------- round 05: the lens ----------
   bi.js stacks the labels of the clusters inside the lens in the column (ul.labels): it sets the column's place
   and height, each row's offset, and the ring around each lit cluster with the hairline from it to its row
   (svg.lead-svg). The lens itself is not drawn: the points dim outside it (WebGL or the still map). Every other label
   is transparent and takes no pointer, but stays in the Tab order (focus moves the lens to its cluster). The
   column's ground is the stage's own Dark Gray, so it hides the dots it passes over and the text never sits on them. */
html.js .labels { position: absolute; left: 0; top: 0; height: 0; z-index: 3; pointer-events: none; --cpad: 10px; }
html.js .labels.rows { background: var(--ink); outline: 1px solid var(--gray); }   /* a card over the map with a 1 px Stevens Gray edge */
html.js .lb { position: absolute; left: var(--cpad); right: var(--cpad); top: 0; opacity: 0; pointer-events: none;
  transition: opacity 160ms var(--ease); }
html.js .lb.in { opacity: 1; pointer-events: auto; }
html.js .labels.side-l .lb { text-align: right; }
html.js .lb a:focus-visible { outline-offset: 1px; }   /* the focus ring stays inside the gap between rows */
.lb.lit .ph { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.lb.lit .nm { color: var(--white); }
/* before the points have landed no label shows, a focused one included (the scroll brings the map to rest first) */
html.pin:not(.settled) .lb { opacity: 0 !important; }
.lead-svg { display: none; }
html.js.lens-on .lead-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.lead-svg line, .lead-svg circle { fill: none; stroke: var(--rule); stroke-width: 1; opacity: 0.75; }
.lead-svg .hot { stroke: var(--white); opacity: 1; }
html.compact .lead-svg, html.has-cap .lead-svg { display: none !important; }
/* the one sentence on the settled map (pinned: under the heading; still: above the map) */
.lens-hint { display: none; }
html.js .lens-hint { display: block; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto 8px; padding-inline: var(--gut);
  font: 400 15px/1.45 var(--body); color: var(--rule); visibility: hidden; }
html.js .lens-hint.on { visibility: visible; }
html.compact .lens-hint, html.has-cap .lens-hint { display: none !important; }
/* the methods note names the lens only once the points have landed (the clause keeps its room until then) */
html.pin:not(.settled) .m-lens { visibility: hidden; }
/* JavaScript off: no lens, so the map shows its dots and points to People */
html:not(.js) .labels { display: none; }

/* ---------- the lab (white sections) ---------- */
.sec { padding-block: 82px; scroll-margin-top: 16px; }
.sec h2 { margin: 0 0 28px; font: 600 clamp(1.8rem, 3.4vw, 2.5rem)/1.15 var(--disp); color: var(--ink); }
.sec + .sec { border-top: 1px solid var(--rule); }
.mission { max-width: 62ch; margin: 0 0 40px; font-size: 1.2rem; line-height: 1.55; }
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.offer { border-top: 3px solid var(--red); padding-top: 18px; display: flex; flex-direction: column; }
.offer h3 { margin: 0 0 10px; font: 600 1.6rem/1.15 var(--disp); }
.aud { margin: 0; font: 600 .78rem/1.4 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.ex { margin: 10px 0 16px; max-width: 60ch; }
.mail { margin-top: auto; font-weight: 600; text-underline-offset: 3px; }

.ev-list { list-style: none; margin: 0; padding: 0; }
.ev-list li { display: grid; grid-template-columns: 150px 180px 1fr; gap: 6px 24px; padding: 14px 0; border-top: 1px solid var(--rule); }
.ev-d { font: 600 1.05rem/1.5 var(--disp); font-variant-numeric: tabular-nums; }
.ev-k { font: 400 15px/1.6 var(--body); }
.ev-t { font: 500 17px/1.5 var(--body); color: var(--ink); }
a.ev-t { color: var(--red); }
.res-h { margin: 44px 0 12px; font: 600 1.4rem/1.15 var(--disp); }

.people-intro { max-width: 62ch; margin: -12px 0 24px; }
.plist { list-style: none; margin: 0; padding: 0; }
.person { display: grid; grid-template-columns: 64px minmax(200px, 300px) 1fr; gap: 8px 24px; padding: 22px 0; border-top: 1px solid var(--rule); scroll-margin-top: 16px; }
.person img { width: 64px; height: 64px; object-fit: cover; display: block; }
.pname { font: 600 1.24rem/1.2 var(--body); color: var(--ink); text-decoration: none; }
.pname:hover { color: var(--red); text-decoration: underline; }
.role { margin: 4px 0 0; font-size: 16px; line-height: 1.5; }
.words ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.words li { font-size: 16px; line-height: 1.5; }
.words li.hot { color: var(--red); }
.src { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }

.contact-text { max-width: 65ch; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.card { border: 1px solid var(--rule); border-radius: 6px; padding: 24px; }
.card img { display: block; width: 120px; height: 120px; object-fit: cover; margin-bottom: 14px; }
.card h3 { margin: 0; font: 600 1.24rem/1.2 var(--body); }
.card p { margin: 4px 0 16px; }
.card .label { margin: 0 0 8px; font: 600 .72rem/1.4 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.card address { font-style: normal; }

.site-foot { border-top: 1px solid var(--rule); padding-block: 40px; }
.foot-row { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.foot-row img { height: 50px; width: auto; }
.foot-row p { margin: 0; font-size: 15px; line-height: 1.5; }
.motion-switch { margin-left: auto; min-height: 44px; padding: 0 16px; font: 600 15px/1 var(--body); color: var(--ink); background: var(--white); border: 1px solid var(--ink); border-radius: 3px; cursor: pointer; }

@media (max-width: 900px) {
  .offers, .cards { grid-template-columns: 1fr; }
  .ev-list li { grid-template-columns: 1fr; gap: 0; }
  .person { grid-template-columns: 64px 1fr; }
  .person .words { grid-column: 1 / -1; }
  .sec { padding-block: 56px; }
}

/* ---------- JavaScript on, plain layout: computed stills replace the white dots ---------- */
html.has-still .still-map { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
html.has-still .anchors { display: none; }
html.has-still .still-cloud { display: block; position: absolute; inset: -6% -4%; width: 108%; height: 112%; }
/* the computed still on the first screen carries its own one-line note (the full note sits under the map) */
html.has-still .hero-note { display: block; position: relative; max-width: 1180px; width: calc(100% - 2 * var(--gut));
  margin: calc(min(100vw - 2 * var(--gut), 1180px) * 0.025 + 10px) auto 0; font: 400 13px/1.45 var(--body); color: var(--rule); }
html.has-still .hero .copy { margin-top: 22px; }
@media (min-width: 1280px) {   /* wide windows: the note sits right of the headline, level with the button, so the first screen keeps the button */
  html.has-still .hero { position: relative; }
  html.has-still .hero-note { position: absolute; margin: 0; width: 340px; right: max(var(--gut), calc((100% - 1180px) / 2)); bottom: 60px; }
  html.has-still .hero .copy { margin-top: 32px; }
}
html.has-cap .cap { display: block; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 10px auto 0; padding-inline: var(--gut);
  font: 400 16px/1.45 var(--body); color: var(--white); min-height: 3em; }
.cap .c-ph { display: block; }
.cap .c-nm { display: block; margin-top: 2px; font-weight: 600; font-size: 14px; color: var(--rule); }
.cap a { color: var(--white); }

/* ---------- html.pin: the pinned stage ---------- */
html.pin .scene { height: var(--scene-h, 300vh); }
html.pin .stage { position: sticky; top: 0; height: var(--stage-h, 100vh); overflow: hidden; }
html.pin .site-head { position: absolute; top: 0; left: 0; right: 0; z-index: 0; transform: translateY(var(--head-y, 0px)); }
html.pin .hero { position: absolute; inset: 0; padding: 0; z-index: 2; pointer-events: none; overflow: visible; }
html.pin .hero a, html.pin .hero button { pointer-events: auto; }
html.pin .plate { position: absolute; margin: 0; max-width: none; left: var(--px); top: var(--py); width: var(--pw); height: var(--ph); }
html.pin .photo { width: 100%; height: 100%; clip-path: inset(0 0 0 var(--wipe, 0%)); }
html.pin.scanning .scan { display: block; position: absolute; top: -10px; bottom: -10px; left: var(--wipe, 0%); width: 2px; margin-left: -1px; background: var(--white); }
html.pin .copy { position: absolute; margin: 0; padding: 0; left: var(--cx); top: var(--ct); width: var(--cw);
  transform: translateY(var(--copy-y, 0px)); clip-path: inset(0 0 var(--copy-clip, 0%) 0); }
html.pin .gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
html.pin .mapsec { position: absolute; inset: 0; padding: 0; z-index: 3; pointer-events: none; }
html.pin .map { position: absolute; margin: 0; max-width: none; left: var(--mx); top: var(--my); width: var(--mw); height: var(--mh); aspect-ratio: auto; }
/* a map taller than the window is panned by the scroll once it has settled (bi.js sets --pan) */
html.pin .map, html.pin .map-h { translate: 0 calc(-1 * var(--pan, 0px)); }
html.pin.settled .map, html.pin.settled .stage-hit { pointer-events: auto; }
html.pin .anchors { display: none; }
html.pin .map-h { position: absolute; margin: 0; padding: 0; max-width: none; left: var(--hx); top: var(--hy); width: var(--hw);
  font-size: var(--hf); clip-path: inset(0 100% 0 0); transition: clip-path 700ms var(--ease); }
html.pin .map-h.on { clip-path: inset(0 0 0 0); }
html.pin .method { position: absolute; z-index: 1; margin: 0; max-width: none; left: var(--nx); top: var(--ny); width: var(--nw); font-size: var(--nf, 13px);
  padding: var(--npt, 0px) var(--npr, 0px) var(--npb, 0px) var(--npl, 0px);
  background: var(--ink); }   /* stays put while the map pans under it; its ground hides what passes under it (bi.js placeNote) */
html.pin .lens-hint { position: absolute; margin: 0; padding: 0; max-width: none; left: var(--tx); top: var(--ty); width: var(--tw);
  font-size: var(--tf, 15px); translate: 0 calc(-1 * var(--pan, 0px)); visibility: visible;
  clip-path: inset(0 100% 0 0); transition: clip-path 600ms var(--ease); }
html.pin .lens-hint.on { clip-path: inset(0 0 0 0); }
html.pin.compact .labels { display: none; }
html.pin.has-cap .cap { position: absolute; margin: 0; padding: 0; max-width: none; left: var(--kx); top: var(--ky); width: var(--kw);
  clip-path: inset(0 0 100% 0); transition: clip-path 500ms var(--ease); }
html.pin.has-cap.settled .cap { clip-path: inset(0 0 0 0); pointer-events: auto; }

/* motion off or reduced: nothing animates (the pinned layout is never used then; this is the backstop) */
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) *, html:not(.force-motion) *::before, html:not(.force-motion) *::after {
    transition: none !important; animation: none !important; scroll-behavior: auto !important;
  }
}
html[data-motion="still"] * { transition: none !important; }