/* /frontpage-redesign (per request, 2026-10-11) -- laid out after harvard.edu's front page: a dark hero
   with a large serif headline, dark bands with big numbers, light sections with a serif heading on the
   left and the content on the right. A flat world map sits behind the hero in place of Harvard's globe.
   Everything is scoped to .fp-page so the live front page is untouched. */
.fp-page {
  --fp-ink: #16222b;        /* dark band background */
  --fp-ink-2: #1d2d38;
  --fp-paper: #e9eceb;      /* light section background */
  --fp-text: #1b2a30;
  --fp-teal: #3f8f8a;
  --fp-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  margin: 0 calc(50% - 50vw);
  color: var(--fp-text);
}
/* the page runs edge to edge under the site header: no gutter or bottom gap from the main column */
.main-content:has(.fp-page) { padding-top: 0; padding-bottom: 0; max-width: none; }

.fp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ---------- hero ---------- */
.fp-hero { position: relative; overflow: hidden; background: var(--fp-ink); color: #fff; min-height: min(78vh, 720px); display: flex; align-items: center; }
.fp-hero-map { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
/* the map always fills the hero, cropped at the sides or top and bottom as the shape requires */
.fp-hero-map img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 42%; opacity: .9; }
/* a soft shade over the middle of the map so the words stay readable on top of it */
.fp-hero-has-map::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 58% 62% at 50% 50%, rgba(22, 34, 43, .86) 0%, rgba(22, 34, 43, .62) 55%, rgba(22, 34, 43, .2) 100%); pointer-events: none; }
.fp-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 820px; margin: 0 auto; padding: 96px 32px; text-align: center; }
.fp-eyebrow { margin: 0 0 22px; font-size: .95rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #dfe9e8; }
.fp-eyebrow span { color: #7fc7c1; }
.fp-title { margin: 0; font-family: var(--fp-serif); font-weight: 400; font-size: clamp(44px, 6.4vw, 84px); line-height: 1.04; letter-spacing: -.01em; color: #fff; border: 0; padding: 0; text-wrap: balance; }
.fp-lede { margin: 26px auto 0; max-width: 56ch; font-size: 1.12rem; line-height: 1.6; color: #e3e9ea; }
.fp-hero-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 34px; margin-top: 38px; }

/* the round-arrow link */
.fp-link { display: inline-flex; align-items: center; gap: 14px; color: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; }
.fp-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: #fff; color: var(--fp-ink); transition: transform .15s ease, background .15s ease; }
.fp-link:hover { text-decoration: none; }
.fp-link:hover .fp-arrow { transform: translateX(4px); background: #7fc7c1; }
.fp-link:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; }
.fp-link:focus-visible { outline: 3px solid #7fc7c1; outline-offset: 6px; border-radius: 28px; }

/* ---------- shared headings ---------- */
.fp-h2 { margin: 0; font-family: var(--fp-serif); font-weight: 400; font-size: clamp(34px, 4vw, 54px); line-height: 1.06; letter-spacing: -.01em; border: 0; padding: 0; color: inherit; }
.fp-h3 { margin: 0 0 22px; font-family: var(--fp-serif); font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; color: inherit; }
.fp-text { margin: 0 0 26px; max-width: 60ch; font-size: 1.08rem; line-height: 1.65; }

/* ---------- dark bands ---------- */
.fp-band { background: var(--fp-ink); color: #fff; padding: 84px 0; }
.fp-community-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.fp-community-photo { margin: 30px 0 0; }
.fp-community-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.fp-stats { display: grid; gap: 34px; padding-top: 8px; }
.fp-stat b { display: inline; font-family: var(--fp-serif); font-weight: 400; font-size: clamp(34px, 3.6vw, 48px); line-height: 1; }
.fp-stat span { margin-left: 10px; font-family: var(--fp-serif); font-size: clamp(22px, 2.2vw, 30px); }
.fp-stat p { margin: 10px 0 0; font-size: 1rem; line-height: 1.6; color: #d5dee0; }
.fp-callout { background: var(--fp-ink-2); }
.fp-callout .fp-text { color: #e3e9ea; }

/* ---------- light sections ---------- */
.fp-section { background: var(--fp-paper); padding: 84px 0; }
.fp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 56px; align-items: start; }
.fp-search { background: #fff; padding: 22px 24px; border-radius: 4px; box-shadow: 0 10px 30px -22px rgba(22, 34, 43, .6); }
.fp-featured { margin-top: 64px; }
.fp-news { padding-top: 56px; }

/* ---------- smaller screens ---------- */
@media (max-width: 860px) {
  .fp-wrap { padding: 0 20px; }
  .fp-hero { min-height: 0; }
  .fp-hero-inner { padding: 72px 20px; }
  .fp-band, .fp-section { padding: 56px 0; }
  .fp-community-grid, .fp-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .fp-featured { margin-top: 44px; }
}

/* The map at its own proportions, whole and uncropped (per request, 2026-10-11): the hero takes the
   map's shape (2000 x 1002) instead of a fixed height that cut the map's edges off, and the tagline is
   laid over its centre. */
.fp-hero.fp-hero-has-map { display: block; min-height: 0; }
.fp-hero-has-map .fp-hero-map { position: static; display: block; }
.fp-hero-has-map .fp-hero-map img { display: block; width: 100%; height: auto; object-fit: fill; }
.fp-hero-has-map .fp-hero-inner { position: absolute; inset: 0; max-width: none; padding: 0 20px; display: flex; align-items: center; justify-content: center; }
.fp-hero-has-map .fp-eyebrow { margin: 0; }

/* ---------- tagline at the top of the map, and the chat-bot greeting in the middle (2026-10-11) ---------- */
.fp-hero-has-map .fp-eyebrow-top { position: absolute; z-index: 3; top: clamp(14px, 3.2vw, 40px); left: 0; right: 0; margin: 0; padding: 0 16px; text-align: center; text-shadow: 0 1px 6px rgba(10, 20, 26, .7); }
.fp-bot { display: flex; align-items: flex-start; gap: 16px; max-width: 560px; text-align: left; }
.fp-bot-avatar { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px -8px rgba(10, 20, 26, .7); }
.fp-bot-avatar svg { width: 54px; height: 54px; display: block; }
.fp-bot-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 6px; }
.fp-bot-bubble { margin: 0; padding: 12px 18px; background: #fff; color: #1b2a30; font-size: 1.08rem; font-weight: 600; line-height: 1.35; border-radius: 4px 18px 18px 18px; box-shadow: 0 8px 22px -10px rgba(10, 20, 26, .7); }
.fp-bot-answers { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.fp-bot-pill { display: inline-block; padding: 11px 20px; border-radius: 999px; background: #3f8f8a; color: #fff; font-size: .98rem; font-weight: 700; text-decoration: none; box-shadow: 0 8px 20px -10px rgba(10, 20, 26, .8); transition: transform .12s ease, background .12s ease; }
.fp-bot-pill:hover { background: #357a76; color: #fff; text-decoration: none; transform: translateY(-2px); }
.fp-bot-pill:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* the lines arrive one after another, like the bot typing them */
@keyframes fp-bot-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fp-bot-avatar { animation: fp-bot-in .45s ease both; }
.fp-bot-step-1 { animation: fp-bot-in .45s ease .5s both; }
.fp-bot-step-2 { animation: fp-bot-in .45s ease 1.5s both; }
.fp-bot-step-3 { animation: fp-bot-in .45s ease 2.4s both; }
@media (prefers-reduced-motion: reduce) { .fp-bot-avatar, .fp-bot-step-1, .fp-bot-step-2, .fp-bot-step-3 { animation: none; } }
/* Narrow screens: the whole map would be too short to hold the greeting, so the hero keeps a minimum
   height there and the map fills it (cropped at the sides). */
@media (max-width: 860px) {
  .fp-hero.fp-hero-has-map { min-height: 520px; }
  .fp-hero-has-map .fp-hero-map { position: absolute; inset: 0; }
  .fp-hero-has-map .fp-hero-map img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
  .fp-bot { gap: 12px; }
  .fp-bot-avatar { width: 56px; height: 56px; }
  .fp-bot-avatar svg { width: 42px; height: 42px; }
  .fp-bot-bubble { font-size: 1rem; }
  .fp-bot-answers { flex-direction: column; align-items: flex-start; }
}

/* The tagline at the top of the map, larger (per request, 2026-10-11): it grows with the screen, from
   about 17px on a phone to 30px on a wide monitor (it was a fixed 15px). */
.fp-hero-has-map .fp-eyebrow-top { font-size: clamp(1.05rem, 2.3vw, 1.9rem); letter-spacing: .14em; line-height: 1.35; }

/* The map is white and grey now (per request, 2026-10-11): no dark shade over it, the page behind it
   pale, and the tagline in dark ink with a light halo instead of white. */
.fp-hero.fp-hero-has-map { background: #fff; }
.fp-hero-has-map::after { display: none; }
.fp-hero-has-map .fp-hero-map img { opacity: 1; }
.fp-hero-has-map .fp-eyebrow-top { color: #1b2a30; text-shadow: 0 0 10px rgba(255, 255, 255, .95), 0 0 3px rgba(255, 255, 255, .9); }
.fp-hero-has-map .fp-eyebrow-top span { color: #2f7d78; }

/* The map more see-through so the words over it stand out (per request, 2026-10-11): it sits at 40%
   over the white page (55% at first), which fades the greys and shadows without losing the shapes. */
.fp-hero-has-map .fp-hero-map img { opacity: .4; }

/* The tagline and the sentence under it share one block at the top of the map (2026-10-11); the block
   takes the position the tagline alone used to have. */
.fp-hero-has-map .fp-top { position: absolute; z-index: 3; top: clamp(14px, 3.2vw, 40px); left: 0; right: 0; padding: 0 20px; text-align: center; }
.fp-hero-has-map .fp-top .fp-eyebrow-top { position: static; padding: 0; }
.fp-top-line { margin: clamp(8px, 1.2vw, 16px) auto 0; max-width: 62ch; font-size: clamp(.98rem, 1.35vw, 1.2rem); line-height: 1.5; color: #24353b; text-shadow: 0 0 10px rgba(255, 255, 255, .95), 0 0 3px rgba(255, 255, 255, .9); }
/* the greeting sits a little lower so it clears the taller block above it */
.fp-hero-has-map .fp-hero-inner { padding-top: clamp(70px, 11vw, 150px); }
@media (max-width: 860px) {
  .fp-hero.fp-hero-has-map { min-height: 640px; }
  .fp-hero-has-map .fp-hero-inner { padding-top: 190px; align-items: flex-start; }
}

/* ---------- the turning globe in place of the flat map (2026-10-11) ---------- */
/* The hero is a fixed, roomy height again (the flat map used to give it its shape); the globe sits in
   the middle of it behind the words, see-through like the map was so the text stays in front. */
.fp-hero.fp-hero-has-map.fp-hero-globe { display: flex; align-items: center; justify-content: center; min-height: clamp(600px, 84vh, 820px); background: #fff; }
.fp-hero-globe .fp-hero-map { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.fp-globe { width: min(100%, 860px); height: 100%; max-height: 860px; opacity: 0; transition: opacity .8s ease; }
.fp-globe.is-ready { opacity: .5; }
.fp-hero-globe .fp-hero-inner { position: relative; inset: auto; width: 100%; padding: clamp(150px, 22vh, 210px) 20px 60px; }
@media (max-width: 860px) {
  .fp-hero.fp-hero-has-map.fp-hero-globe { min-height: 660px; align-items: flex-start; }
  .fp-hero-globe .fp-hero-inner { padding: 200px 20px 40px; }
}

/* The globe can be spun by hand (2026-10-11), and is more solid than the flat map was (70%) so its
   turning is easy to see. */
.fp-globe.is-ready { opacity: .7; }
.fp-hero-globe { cursor: grab; touch-action: pan-y; }
.fp-hero-globe.is-dragging { cursor: grabbing; user-select: none; }
.fp-hero-globe a, .fp-hero-globe .fp-bot-bubble, .fp-hero-globe .fp-top { cursor: auto; }
.fp-hero-globe a { cursor: pointer; }

/* A smaller globe (per request, 2026-10-11): about 520px across on a computer, where it was about 700px. */
.fp-globe { width: min(100%, 560px); height: min(100%, 560px); max-height: 560px; }

/* The globe slightly smaller again (about 470px across) and lower, so the sentence under the tagline
   sits on clear white above it rather than over the globe (per request, 2026-10-11). --fp-globe-top is
   where the globe's box starts, measured from the top of the hero; the greeting is placed from the same
   number so it stays over the middle of the globe. */
.fp-hero-globe { --fp-globe-top: clamp(170px, 19vw, 200px); --fp-globe-size: 510px; }
.fp-hero-globe .fp-hero-map { align-items: flex-start; padding-top: var(--fp-globe-top); }
.fp-globe { width: min(100%, var(--fp-globe-size)); height: var(--fp-globe-size); max-height: none; }
.fp-hero.fp-hero-has-map.fp-hero-globe { align-items: flex-start; min-height: calc(var(--fp-globe-top) + var(--fp-globe-size) + 50px); }
.fp-hero-globe .fp-hero-inner { padding: calc(var(--fp-globe-top) + var(--fp-globe-size) / 2 - 95px) 20px 40px; }
@media (max-width: 860px) {
  .fp-hero-globe { --fp-globe-top: 235px; --fp-globe-size: min(92vw, 420px); }
  .fp-hero.fp-hero-has-map.fp-hero-globe { min-height: calc(var(--fp-globe-top) + var(--fp-globe-size) + 110px); }
  .fp-hero-globe .fp-hero-inner { padding: calc(var(--fp-globe-top) + 40px) 20px 40px; }
}

/* The pause / play button under the globe (per request, 2026-10-11), after the one on harvard.edu: a
   solid disc with the two bars, inside a thin ring. Dark on this white page where Harvard's is white
   on navy. */
.fp-globe-pause { position: absolute; z-index: 4; left: 50%; top: calc(var(--fp-globe-top) + var(--fp-globe-size) + 6px); transform: translateX(-50%); width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fp-globe-pause[hidden] { display: none; }
.fp-globe-pause::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #1b2a30; }
.fp-globe-pause::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #1b2a30; transition: background .15s ease, transform .15s ease; }
.fp-globe-pause svg { position: relative; z-index: 1; display: block; }
.fp-globe-pause .fp-icon-play { display: none; margin-left: 2px; }
.fp-globe-pause.is-paused .fp-icon-pause { display: none; }
.fp-globe-pause.is-paused .fp-icon-play { display: block; }
.fp-globe-pause:hover::after { background: #2f7d78; transform: scale(1.05); }
.fp-globe-pause:focus-visible { outline: 3px solid #3f8f8a; outline-offset: 4px; }
/* room under the globe for it */
.fp-hero.fp-hero-has-map.fp-hero-globe { min-height: calc(var(--fp-globe-top) + var(--fp-globe-size) + 84px); }
@media (max-width: 860px) {
  /* on a phone the greeting's pills run below the globe, so the button goes under them, at the foot */
  .fp-hero.fp-hero-has-map.fp-hero-globe { min-height: calc(var(--fp-globe-top) + var(--fp-globe-size) + 180px); }
  .fp-globe-pause { top: auto; bottom: 16px; }
}

/* The pause button right under the globe (per request, 2026-10-11): the globe's lower edge is 94.6% of
   the way down its box, so the button starts 8px below that instead of below the whole box. */
@media (min-width: 861px) {
  .fp-globe-pause { top: calc(var(--fp-globe-top) + var(--fp-globe-size) * 0.946 + 8px); }
  .fp-hero.fp-hero-has-map.fp-hero-globe { min-height: calc(var(--fp-globe-top) + var(--fp-globe-size) * 0.946 + 84px); }
}

/* Phones: the pause button right under the globe too (per request, 2026-10-11). The greeting starts a
   little higher on the globe so its last pill ends above the globe's lower edge and the button has the
   space beneath to itself. */
@media (max-width: 860px) {
  .fp-hero-globe .fp-hero-inner { padding: calc(var(--fp-globe-top) + 6px) 20px 40px; }
  .fp-globe-pause { bottom: auto; top: calc(var(--fp-globe-top) + var(--fp-globe-size) * 0.946 + 8px); }
  .fp-hero.fp-hero-has-map.fp-hero-globe { min-height: calc(var(--fp-globe-top) + var(--fp-globe-size) * 0.946 + 84px); }
}

/* Computers and tablets: the chat-bot greeting sits higher on the globe (per request, 2026-10-11) --
   its middle a little above the globe's middle, where it was about 25px below it. */
@media (min-width: 861px) {
  .fp-hero-globe .fp-hero-inner { padding-top: calc(var(--fp-globe-top) + var(--fp-globe-size) / 2 - 150px); }
}

/* Computers and tablets (per request, 2026-10-11): the tagline sits half as far from the top edge as
   it did (20px at most, was 40px), and the globe comes up 25px with it, keeping about the same space
   under the sentence. */
@media (min-width: 861px) {
  .fp-hero-has-map .fp-top { top: clamp(7px, 1.6vw, 20px); }
  .fp-hero-globe { --fp-globe-top: clamp(145px, 17vw, 175px); }
}

/* ---------- the signed-in greeting (2026-10-11): more lines, and Yes / No as buttons ---------- */
.fp-bot-step-4 { animation: fp-bot-in .45s ease 3.4s both; }
.fp-bot-step-5 { animation: fp-bot-in .45s ease 4.3s both; }
.fp-bot-member .fp-bot-step-3 { animation-delay: 2.5s; }
.fp-bot-bye { animation: fp-bot-in .45s ease both; }
.fp-bot-bye[hidden], .fp-bot-answers[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .fp-bot-step-4, .fp-bot-step-5, .fp-bot-bye { animation: none; } }
button.fp-bot-pill { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
.fp-bot-member .fp-bot-bubble { max-width: 400px; }
.fp-bot-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em; margin: 0 1px; vertical-align: -0.42em; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #c9d2d4; font-size: .92em; }
/* it is a taller block, so it starts higher on the globe to stay centred on it */
@media (min-width: 861px) {
  .fp-hero-member .fp-hero-inner { padding-top: calc(var(--fp-globe-top) + var(--fp-globe-size) / 2 - 215px); }
}
/* Phones: the longer greeting runs past the bottom of the globe, so the section grows with it and the
   pause button goes to the foot of the section, under the last pill. */
@media (max-width: 860px) {
  .fp-hero-member .fp-hero-inner { padding-bottom: 84px; }
  .fp-hero-member .fp-globe-pause { top: auto; bottom: 16px; }
}

/* "Do not show again" under the signed-in bot's pills (per request, 2026-10-11): a small plain text
   button; choosing it takes the bot off the page for good in this browser. */
.fp-bot[hidden] { display: none; }
.fp-bot-never { align-self: flex-start; margin-top: 4px; padding: 4px 2px; border: 0; background: none; color: #4d5b63; font-family: inherit; font-size: .88rem; text-decoration: underline; cursor: pointer; }
.fp-bot-never:hover { color: #1f2d33; }
.fp-bot-never:focus-visible { outline: 2px solid #3f8f8a; outline-offset: 2px; }
.fp-bot-step-6 { animation: fp-bot-in .45s ease 5.1s both; }
.fp-bot-member .fp-bot-never.fp-bot-step-4 { animation-delay: 3.3s; }
@media (prefers-reduced-motion: reduce) { .fp-bot-step-6 { animation: none; } }

/* The links on the globe's equator banner (per request, 2026-10-11). frontpage-globe.js draws the band
   and moves each link along it; until it has, they stay hidden. The words in the middle of the page let
   clicks through to the globe everywhere except on the bot itself. */
.fp-globe-links { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.fp-globe-link { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: auto; padding: 6px 8px; color: #fff; font-size: clamp(.72rem, calc(var(--fp-globe-size) * 0.031), .98rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); will-change: transform; }
.fp-globe-link:hover, .fp-globe-link:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.fp-globe-link:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
.fp-hero-globe .fp-hero-inner { pointer-events: none; }
.fp-hero-globe .fp-hero-inner .fp-bot { pointer-events: auto; }

/* The band under the equator links was taken off (per request, 2026-10-11): the words alone, in green. */
.fp-globe-link, .fp-globe-link:hover, .fp-globe-link:focus-visible { color: #0f6b58; text-shadow: 0 0 6px rgba(255, 255, 255, .9), 0 0 2px #fff; }
.fp-globe-link { font-weight: 800; }
.fp-globe-link:focus-visible { outline-color: #0f6b58; }

/* The equator words are larger and bend with the globe (per request, 2026-10-11): frontpage-globe.js
   splits each into letters and places every letter by itself, so the link has no box of its own -- the
   letters are what is seen, pointed at and clicked. */
.fp-globe-link { position: static; visibility: hidden; padding: 0; font-size: clamp(.95rem, calc(var(--fp-globe-size) * 0.043), 1.5rem); letter-spacing: 0; }
.fp-globe-letter { position: absolute; left: 0; top: 0; visibility: hidden; padding: 6px .04em; white-space: pre; cursor: pointer; will-change: transform; }
.fp-globe-link:hover, .fp-globe-link:focus-visible { color: #0a4a3d; text-decoration: none; outline: 0; }
.fp-globe-link:focus-visible .fp-globe-letter { text-decoration: underline; text-underline-offset: 4px; }