/*
 * State landing page. Brand tokens only (no hex). Full-bleed bands alternate
 * white, Royal Blue, Cool Gray and Black; content sits inside .state-shell.
 */
/* ---------- hero: Royal Blue band, continues from the header ---------- */
.landing .hero {
  background: var(--pbs-royal-blue);
  color: var(--pbs-pure-white);
  padding: 56px 0 64px;
  border-top: 1px solid rgb(255 255 255 / 0.2);
}
/* a chapter photo marked for the home page sits behind the motto, grayscale and toned Royal Blue by blending */
.landing .hero { position: relative; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); mix-blend-mode: luminosity; opacity: 0.32; pointer-events: none; }
.landing .hero > .state-shell { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
}
.hero-badge { display: block; width: clamp(96px, 10vw, 128px); height: auto; margin-bottom: 24px; border-radius: 50%; }
.motto {
  font: bold clamp(2.5rem, 5.2vw, 4.25rem)/1.02 var(--font);
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  max-width: 13ch;
}
.hero-lead {
  font-size: 1.1875rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 0 32px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.landing .btn-light {
  background: var(--pbs-pure-white);
  color: var(--pbs-royal-blue);
  border: 1px solid var(--pbs-pure-white);
}
.landing .btn-outline-light {
  background: transparent;
  color: var(--pbs-pure-white);
  border: 1px solid var(--pbs-pure-white);
}
.landing .btn-light:hover { background: transparent; color: var(--pbs-pure-white); }
.landing .btn-outline-light:hover { background: var(--pbs-pure-white); color: var(--pbs-royal-blue); }
.landing .hero :focus-visible { outline-color: var(--pbs-pure-white); box-shadow: none; }

/* ---------- the map ---------- */
.state-map { margin: 0; }
.state-map svg { display: block; width: 100%; max-height: 640px; overflow: visible; }
/* The outline is a slab: core/geo.py sweeps each visible edge along a depth
   vector and shades it by its angle to a light in the upper left. Every
   color here is a mix of brand tokens; no new color is introduced. */
/* Beneath the slab: a cast shadow, then a white halo and a bright rim so the
   state glows against the Royal Blue. Each is a blurred copy of the outline. */
.map-shadow { fill: var(--pbs-black); opacity: 0.5; filter: blur(14px); }
.map-glow { fill: var(--pbs-pure-white); opacity: 0.6; filter: blur(24px); }
.map-glow-rim { fill: none; stroke: var(--pbs-pure-white); stroke-width: 8; opacity: 0.7; filter: blur(5px); }

/* The glow pulses slowly; the slab itself stays still. Off under prefers-reduced-motion. */
@keyframes map-breathe { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.95; } }
@keyframes map-rim { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.map-glow { animation: map-breathe 3s ease-in-out infinite; }
.map-glow-rim { animation: map-rim 3s ease-in-out infinite; }
.map-side {
  --side: color-mix(in srgb, var(--pbs-black) var(--shade, 50%), var(--pbs-royal-blue));
  fill: var(--side);
  stroke: var(--side);          /* hides the anti-aliasing seam between faces */
  stroke-width: 0.6;
  stroke-linejoin: round;
}
.map-top { fill: color-mix(in srgb, var(--pbs-pure-white) 36%, var(--pbs-royal-blue)); }
.map-light { fill: url(#map-light); }
.map-light-near { stop-color: var(--pbs-pure-white); stop-opacity: 0.3; }
.map-light-far { stop-color: var(--pbs-pure-white); stop-opacity: 0; }
.map-edge {
  fill: none;
  stroke: var(--pbs-pure-white);
  stroke-width: 1.5;
  stroke-opacity: 0.9;
  stroke-linejoin: round;
}
@supports not (color: color-mix(in srgb, white, black)) {
  .map-side { fill: var(--pbs-black); stroke: var(--pbs-black); fill-opacity: 0.5; stroke-opacity: 0.5; }
  .map-top { fill: var(--pbs-royal-blue); }
}
.map-dot circle {
  fill: var(--pbs-pure-white);
  stroke: var(--pbs-royal-blue);
  stroke-width: 1.5;
  filter: drop-shadow(0 1px 1.5px rgb(31 30 30 / 0.45));
  transition: r 120ms ease;
  animation: dot-in 420ms ease-out both;
  animation-delay: calc(var(--i, 0) * 45ms + 200ms);
}
.map-dot.is-collegiate circle {
  fill: var(--pbs-royal-blue);
  stroke: var(--pbs-pure-white);
  stroke-width: 2;
}
.map-dot:hover circle,
.map-dot:focus-visible circle { r: 9; }
.map-dot:focus-visible { outline: none; }
.map-dot:focus-visible circle { stroke: var(--pbs-pure-white); stroke-width: 3; }

@keyframes dot-in {
  from { opacity: 0; transform: scale(0.2); }
  to { opacity: 1; transform: scale(1); }
}
.map-dot circle { transform-box: fill-box; transform-origin: center; }

.state-map figcaption {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 16px;
  font-size: var(--fs-small);
}
.key { display: inline-flex; align-items: center; gap: 8px; }
.key-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--pbs-pure-white);
  border: 2px solid var(--pbs-pure-white);
}
.key-dot.is-collegiate { background: var(--pbs-royal-blue); }
.key-note { flex-basis: 100%; opacity: 0.85; }
/* chapter-type toggles (links to the directory without JavaScript) and the hover/focus card */
.state-map { position: relative; }
.map-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.map-filter-btn { padding: 6px 14px; border: 1px solid var(--pbs-pure-white); border-radius: 999px; color: var(--pbs-pure-white); text-decoration: none; font-size: var(--fs-small); font-weight: bold; }
.map-filter-btn[aria-current="true"] { background: var(--pbs-pure-white); color: var(--pbs-royal-blue); }
.map-dot { transition: opacity 0.2s ease; }
.state-map[data-filter="ALUMNI"] .map-dot.is-collegiate, .state-map[data-filter="COLLEGIATE"] .map-dot:not(.is-collegiate) { opacity: 0.15; }
.map-tip { position: absolute; z-index: 2; max-width: 240px; padding: 10px 12px; border-radius: var(--radius); background: var(--pbs-pure-white); color: var(--pbs-black); box-shadow: 0 6px 18px rgb(31 30 30 / 0.3); font-size: var(--fs-small); line-height: 1.4; pointer-events: none; }
.map-tip strong { display: block; color: var(--pbs-royal-blue); }


/* ---------- big numbers: a deeper Royal Blue band right under the hero ---------- */
.stats-band { position: relative; overflow: hidden; background: var(--band-deep-blue); color: var(--pbs-pure-white); padding: clamp(32px, 4vw, 56px) 0; }
.stats-band > .state-shell { position: relative; }
.stats-band .band-outline { top: -8%; height: 150%; right: 4%; opacity: 0.09; }

/* ---------- chapter story: a featured, approved PIA that rotates daily ---------- */
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.story-media { display: block; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; }
.story-panel { display: flex; align-items: center; justify-content: center; background: var(--pbs-royal-blue); color: var(--pbs-pure-white); }
.story-map { height: 82%; width: auto; }
.story-map path { stroke-opacity: 0.45; }
.story-meta { margin: 0 0 12px; color: var(--text-muted); }
.story-meta a { font-weight: bold; }
.story-summary { font-size: 1.125rem; line-height: 1.6; max-width: 60ch; margin: 0 0 24px; }
.stats-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px 40px; }
.stat-tile { display: flex; flex-direction: column; gap: 6px; padding-left: 20px; border-left: 3px solid rgb(255 255 255 / 0.5); }
.stat-num { font: bold clamp(2.25rem, 1.5rem + 3vw, 4rem)/1 var(--font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-label { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; color: rgb(255 255 255 / 0.85); }
.stats-note { margin: 24px 0 0; font-size: var(--fs-small); color: rgb(255 255 255 / 0.85); }
.stats-note a { color: var(--pbs-pure-white); }

/* ---------- section rhythm and type scale ---------- */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section-title { font: bold clamp(1.9rem, 1.1rem + 2.6vw, 3rem)/1.1 var(--font); letter-spacing: -0.015em; margin: 0 0 20px; }
.landing .eyebrow { margin-bottom: 12px; }
.eyebrow-light { color: rgb(255 255 255 / 0.8); }
.band-blue { background: var(--pbs-royal-blue); color: var(--pbs-pure-white); }
.band-gray { background: var(--band-gray-bg); color: var(--band-gray-fg); }
.band-black { background: var(--band-black-bg); color: var(--pbs-pure-white); }
.band-blue .section-title, .band-black .section-title, .band-blue .principles-line { color: var(--pbs-pure-white); }
.band-gray .section-title { color: var(--band-gray-fg); }
.band-blue a, .band-black a { color: var(--pbs-pure-white); }
.band-blue :focus-visible, .band-black :focus-visible { outline-color: var(--pbs-pure-white); box-shadow: none; }
.band-black { border-top: 4px solid var(--pbs-royal-blue); }

/* ---------- featured event ---------- */
.spotlight-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.spotlight-grid.no-image { grid-template-columns: minmax(0, 1fr); max-width: 760px; border-left: 6px solid var(--pbs-royal-blue); padding-left: clamp(16px, 3vw, 32px); }
.spotlight-img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.spotlight h2 { font: bold var(--fs-display)/var(--lh-display) var(--font); margin: 0 0 16px; }
.spotlight-facts { display: grid; gap: 8px; margin: 0 0 16px; }
.spotlight-facts > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; }
.spotlight-facts dt { font-weight: bold; }
.spotlight-facts dd { margin: 0; }
.spotlight-desc { color: var(--text-muted); max-width: 60ch; }
.spotlight-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.countdown { display: inline-block; margin: 0 0 16px; padding: 6px 14px; border-radius: 999px; background: var(--pbs-royal-blue); color: var(--pbs-pure-white); font-weight: bold; font-size: var(--fs-small); }

/* ---------- principles: numbered, on Royal Blue ---------- */
.principles-line {
  font: bold clamp(2.25rem, 1.2rem + 4vw, 4rem)/1.05 var(--font);
  letter-spacing: -0.02em;
  margin: 0 0 clamp(32px, 5vw, 56px);
}
.principles-body { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); }
.principles-body li { max-width: 36ch; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 0.35); }
.principle-num { display: block; font: bold clamp(2.5rem, 2rem + 2vw, 4rem)/1 var(--font); letter-spacing: -0.03em; color: rgb(255 255 255 / 0.55); margin-bottom: 12px; }
.principles-body strong { display: block; font-size: var(--fs-h2); line-height: 1.3; margin-bottom: 8px; }
.principles-body p { margin: 0; color: rgb(255 255 255 / 0.88); }

/* ---------- state director note ---------- */
.director-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; max-width: 960px; }
.director-photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 3px solid var(--pbs-royal-blue); }
.director-excerpt { font-size: 1.125rem; line-height: 1.6; max-width: 62ch; margin: 0 0 12px; }
.director-sign { font-weight: bold; margin: 0 0 16px; }
@media (max-width: 640px) { .director-grid { grid-template-columns: 1fr; } }

/* ---------- happening ---------- */
/* event cards: a grid on wide screens, a sideways scroll-snap row on phones */
.event-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.event-card a { display: flex; flex-direction: column; height: 100%; border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); color: var(--text); text-decoration: none; }
.event-card-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.event-card-block { display: flex; align-items: center; justify-content: center; background: var(--pbs-royal-blue); }
.event-card-block img { width: auto; height: 40px; }
.event-card-body { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 16px; }
.event-card-date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 64px; border: 2px solid var(--link); border-radius: var(--radius); color: var(--link); }
.event-card-title { display: block; font: bold var(--fs-h3)/1.3 var(--font); color: var(--link); margin-bottom: 4px; }
.event-card-text .event-meta { display: block; font-size: var(--fs-small); }
.event-card a:hover .event-card-title { text-decoration: underline; }
.section-actions { margin: 24px 0 44px; }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.news-grid .news-teaser { grid-template-columns: 1fr; padding: 0 0 12px; border: 0; border-radius: var(--radius); }
.news-grid .news-teaser img { aspect-ratio: 3 / 2; margin-bottom: 10px; }
.happening-sub { font: bold var(--fs-h3)/1.3 var(--font); margin: 0 0 16px; color: var(--text-muted); }

.news-teasers { list-style: none; margin: 0 0 24px; padding: 0; }
.news-teaser { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.news-teasers li:first-child .news-teaser { padding-top: 0; }
.news-teaser.no-image { grid-template-columns: 1fr; }
.news-teaser img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.news-teaser-title { display: block; font-weight: bold; color: var(--link); margin-bottom: 4px; }
.news-teaser:hover .news-teaser-title { text-decoration: underline; }
.event-list { list-style: none; margin: 0 0 24px; padding: 0; }
.event { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.event:first-child { padding-top: 0; }
.event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 64px; border: 2px solid var(--link); border-radius: var(--radius); color: var(--link); }
.event-month { font-size: var(--fs-small); font-weight: bold; }
.event-day { font: bold 1.5rem/1 var(--font); }
.event-title { display: inline-block; font: bold var(--fs-h3)/1.3 var(--font); margin: 4px 0; }
.event-meta { margin: 0; color: var(--text-muted); }
.empty { color: var(--text-muted); max-width: 48ch; margin: 0 0 24px; }
.photo-strip { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.photo-strip figure { margin: 0; }
.photo-strip img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.strip-photo { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.news-teaser-img { aspect-ratio: 3 / 2; border-radius: var(--radius); margin-bottom: 10px; }
.photo-strip figcaption { font-size: var(--fs-small); color: var(--text-muted); margin-top: 6px; }
.strip-more { margin: 20px 0 0; }

/* ---------- programs: cards on Cool Gray ---------- */
.section-intro { max-width: 56ch; margin: 0 0 32px; color: var(--text-muted); }
.band-gray .section-intro { color: var(--band-gray-fg); opacity: 0.85; }
.band-black .section-intro { color: rgb(255 255 255 / 0.85); }
.program-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.program-card a {
  display: flex; flex-direction: column; height: 100%;
  border-top: 6px solid var(--pbs-royal-blue); border-radius: var(--radius); overflow: hidden;
  background: var(--surface); color: var(--text); text-decoration: none;
  box-shadow: 0 2px 10px rgb(31 30 30 / 0.08);
}
.program-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.program-block { display: flex; align-items: flex-end; padding: 20px; background: var(--pbs-royal-blue); color: var(--pbs-pure-white); font: bold var(--fs-h2)/1.2 var(--font); }
.program-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 28px 28px; }
.program-name { font: bold var(--fs-h2)/1.25 var(--font); color: var(--link); }
.program-summary { max-width: 48ch; }
.program-more { margin-top: auto; font-weight: bold; color: var(--link); }
.program-card a:hover .program-name, .program-card a:hover .program-more { text-decoration: underline; }

/* ---------- joining: Black band, white type, white-bordered buttons ---------- */
.join-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; }
.join-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.join-path { padding: 28px; border: 1px solid rgb(255 255 255 / 0.3); border-radius: var(--radius); }
.join-path h3 { font: bold var(--fs-h2)/1.3 var(--font); margin: 0 0 8px; color: var(--pbs-pure-white); }
.join-path p { margin: 0 0 20px; color: rgb(255 255 255 / 0.88); }
.join .btn-primary { background: var(--pbs-royal-blue); color: var(--pbs-pure-white); border: 1px solid var(--pbs-pure-white); }
.join .btn-primary:hover { background: var(--pbs-pure-white); color: var(--pbs-royal-blue); }
.join-contact { grid-column: 1 / -1; margin: 0; }
.hazing {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 0.3);
  max-width: 80ch;
  font-size: var(--fs-small);
  color: rgb(255 255 255 / 0.85);
}

/* ---------- light motion: reveal on scroll, lift on hover (js adds html.js; off under reduced motion) ---------- */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
html.js .reveal.is-visible { opacity: 1; transform: none; }
.lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.lift:hover, .lift:focus-within { transform: translateY(-4px); box-shadow: 0 10px 24px rgb(31 30 30 / 0.18); }

/* the landing page manages its own spacing */
.landing { padding: 0; }
.landing + .state-footer { margin-top: 0; }

/* ---------- responsive & motion ---------- */
@media (max-width: 900px) {
  .hero-grid, .join-grid, .spotlight-grid, .story-grid { grid-template-columns: 1fr; }
  .state-map { max-width: 360px; justify-self: center; width: 100%; }
  .principles-body, .program-list, .join-paths, .news-grid { grid-template-columns: 1fr; gap: 28px; }
  .event-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 4px 4px 12px; scrollbar-width: thin; }
  .event-card { flex: 0 0 min(85%, 320px); scroll-snap-align: start; }
  .photo-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .map-dot circle { animation: none; transition: none; }
  .map-glow, .map-glow-rim { animation: none; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .lift, .lift:hover, .lift:focus-within { transition: none; transform: none; }
}