/* ============================================
   CGDC — Chicago Graphic Design Club
   One size. One weight. Everything else is
   space, case, and position.
   ============================================ */

@font-face {
  font-family: 'Euchre';
  src: url('../fonts/EuchreVariable-Roman-1v0.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Euchre';
  src: url('../fonts/EuchreVariable-Italic-1v0.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Note: circled-character display is handled by writing the actual
   Unicode circled glyphs (U+24B6 etc.) directly into the markup —
   Euchre's `ss07` is contextual and doesn't fire on bare prose, and
   forcing it on every <b>/<strong> mangled body text. See
   cgdc_to_circled() in functions.php for the runtime conversion. */

/* Harriet Display — used for accent moments (e.g. homepage hero scramble word) */
@font-face {
  font-family: 'Harriet';
  src: url('../fonts/HarrietDisplay-Light-2v1.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Harriet';
  src: url('../fonts/HarrietDisplay-Regular-2v1.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Harriet';
  src: url('../fonts/HarrietDisplay-RegularItalic-2v1.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Harriet';
  src: url('../fonts/HarrietDisplay-Bold-2v1.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────── */
:root {
  --black:  #0d0d0d;
  --white:  #ffffff;
  --rule:   #d8d8d4;
  --dim:    #0d0d0d;

  --f:      'Euchre', 'Helvetica Neue', Arial, sans-serif;
  --sz:     16px;
  --sz-lg:  calc(var(--sz) * 1.25);
  --sz-xl:  calc(var(--sz) * 4);
  --lh:     1.5;
  --lh-d:   1.1;
  --ls:     0.08em;
  --wt:     400;
  --wt-ui:  500;

  --nav-h:    48px;
  --page-top: calc(var(--nav-h) + 64px);
  --col:      1400px;
  --pad:      32px;
  --gap:      20px;

  --ease:   0.15s ease;
}

@media (max-width: 640px) {
  :root { --pad: 20px; }
}

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-size: var(--sz); scroll-behavior: smooth; scrollbar-gutter: stable; scrollbar-color: #0055ff var(--white); scrollbar-width: auto; }
::-webkit-scrollbar { width: 20px; }
::-webkit-scrollbar-track { background: var(--white); border-radius: 0 !important; -webkit-border-radius: 0 !important; }
::-webkit-scrollbar-thumb { background: #0055ff; border-radius: 0 !important; -webkit-border-radius: 0 !important; outline: none; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-corner { background: var(--white); }

::selection { background: #ccff33; color: var(--black); }
body  {
  font-family: var(--f);
  font-size:   var(--sz);
  font-weight: var(--wt);
  font-style:  normal;
  line-height: 22px;
  color:       var(--black);
  background:  var(--white);
  -webkit-font-smoothing: antialiased;
  cursor: crosshair;
}

/* Custom cursor dot — grows over clickables. Hides native cursor when active. */
.has-custom-cursor,
.has-custom-cursor body,
.has-custom-cursor a,
.has-custom-cursor button,
.has-custom-cursor [role="button"],
.has-custom-cursor label[for],
.has-custom-cursor select,
.has-custom-cursor input,
.has-custom-cursor textarea { cursor: none; }

.cgdc-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--black);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transition: width 220ms cubic-bezier(.2,.7,.2,1), height 220ms cubic-bezier(.2,.7,.2,1), margin 220ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.cgdc-cursor.is-hover {
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
}
@media (hover: none) { .cgdc-cursor { display: none; } }
img    { max-width: 100%; height: auto; display: block; }
a      { color: inherit; text-decoration: none; }
a, button, [role="button"], label[for], select, input[type="submit"], input[type="button"] {
  cursor: pointer;
}
ul     { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }

/* ── Typography ──────────────────────────────────────
   One size. Hierarchy through weight, case, tracking,
   leading, space, and ruled lines. No italic. No ornament.
   ──────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-size:   var(--sz);
  font-weight: 700;
  font-style:  normal;
  line-height: var(--lh-d);
}

.page-title,
.section-title,
.label {
  font-style:  normal;
  line-height: var(--lh);
}

figcaption {
  text-align:center;
  color:#989897
}

em, i, blockquote, figcaption,
.meta, .byline, .role { font-style: normal; }

strong, b { font-style: normal; }

/* ── Global main spacing ─────────────────────────────── */
main.page {
    padding-top: 5em;
}

/* ── Layout ─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--col);
  margin:  0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}

.container > * { grid-column: 4 / -1; }
.col-hang      { grid-column: 1 / -1; }
.col-1  { grid-column: 1  / -1; }
.col-2  { grid-column: 2  / -1; }
.col-3  { grid-column: 3  / -1; }
.col-4  { grid-column: 4  / -1; }
.col-5  { grid-column: 5  / -1; }
.col-6  { grid-column: 6  / -1; }
.col-7  { grid-column: 7  / -1; }
.col-8  { grid-column: 8  / -1; }
.col-9  { grid-column: 9  / -1; }
.col-10 { grid-column: 10 / -1; }
.col-11 { grid-column: 11 / -1; }
.col-12 { grid-column: 12 / -1; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}

/* ── Navigation ─────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  background: var(--white);
}
.admin-bar .site-header { top: 32px; }

.site-header .container,
.container.prog-controls-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 32px;
}

.site-header-left {
  display: flex;
  align-items: center;
  gap: 0.25em;
}

.site-logo {
  display: flex;
  align-items: center;
  width: 30px;
  height: 30px;
  color: #0d0d0d;
}

.site-logo img,
.site-logo svg,
.nav-overlay-logo svg {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* All inline SVG fills track the time-based text color */
.site-logo svg .st0,
.nav-overlay-logo svg .st0,
svg path[fill="black"],
svg rect[fill="black"],
svg circle[fill="black"],
svg polygon[fill="black"],
svg path[fill="#3F3F3F"],
svg rect[fill="#3F3F3F"] {
  fill: currentColor;
}

/* Header logo SVG always black — does not follow the random per-load color */
.site-header .site-logo svg .st0,
.site-header .site-logo svg path[fill="black"],
.site-header .site-logo svg rect[fill="black"],
.site-header .site-logo svg circle[fill="black"],
.site-header .site-logo svg polygon[fill="black"],
.site-header .site-logo svg path[fill="#3F3F3F"],
.site-header .site-logo svg rect[fill="#3F3F3F"] {
  fill: #0d0d0d;
}

.nav-page-title {
  color: var(--dim);
  flex: 1;
  word-spacing: 0.3em;
}

.nav-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #0d0d0d;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ease);
  flex-shrink: 0;
}
.nav-circle:hover { background: #0d0d0d; }
.nav-circle:hover .nav-circle-dot { background: var(--white); }

.nav-circle-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0d0d0d;
  transition: background var(--ease);
}

@keyframes twinkle {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.4); }
}
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #ff69b4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pad);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.admin-bar .nav-overlay { top: 32px; }

.nav-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.nav-overlay-close {
  position: fixed;
  top: calc((var(--nav-h) - 30px) / 2);
  right: max(var(--pad), calc(50vw - var(--col) / 2 + var(--pad)));
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--ease);
}
.admin-bar .nav-overlay-close { top: calc(32px + (var(--nav-h) - 30px) / 2); }
.nav-overlay-close:hover { border-color: var(--white); }
.nav-overlay-close::before,
.nav-overlay-close::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 1px;
  background: var(--white);
}
.nav-overlay-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.nav-overlay-close::after  { transform: translate(-50%,-50%) rotate(-45deg); }

.nav-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  width: 100%;
}

.nav-overlay-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  width: 100%;
}
.nav-overlay-links a { color: #ffffff; }
.nav-overlay-links a:hover { color: rgba(255,255,255,0.55); }

.nav-overlay-logo {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 64px;
  filter: brightness(0) invert(1);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-overlay.is-open .nav-overlay-logo {
  opacity: 1;
  transform: none;
  transition-delay: 0.05s;
}

.nav-overlay-heart {
  font-family: var(--f);
  line-height: 1;
  color: var(--white);
  margin-top: 64px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-overlay.is-open .nav-overlay-heart {
  opacity: 1;
  transform: none;
  transition-delay: 0.60s;
}

.nav-overlay-links a {
  font-size: var(--sz);
  line-height: 1;
  color: var(--white);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              color var(--ease);
}
.nav-overlay-links a:hover { color: rgba(255,255,255,0.4); }

.nav-overlay.is-open .nav-overlay-links a {
  opacity: 1;
  transform: none;
}
.nav-overlay.is-open .nav-overlay-links a:nth-child(1)  { transition-delay: 0.10s; }
.nav-overlay.is-open .nav-overlay-links a:nth-child(2)  { transition-delay: 0.20s; }
.nav-overlay.is-open .nav-overlay-links a:nth-child(3)  { transition-delay: 0.30s; }
.nav-overlay.is-open .nav-overlay-links a:nth-child(4)  { transition-delay: 0.40s; }
.nav-overlay.is-open .nav-overlay-links a:nth-child(5)  { transition-delay: 0.50s; }
.nav-overlay.is-open .nav-overlay-links a:nth-child(6)  { transition-delay: 0.60s; }
.nav-overlay.is-open .nav-overlay-links a:nth-child(7)  { transition-delay: 0.70s; }
.nav-overlay.is-open .nav-overlay-links a:nth-child(8)  { transition-delay: 0.80s; }
.nav-overlay.is-open .nav-overlay-links a:nth-child(9)  { transition-delay: 0.90s; }
.nav-overlay.is-open .nav-overlay-links a:nth-child(10) { transition-delay: 1.00s; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.site-nav a {
  color: var(--dim);
  transition: color var(--ease);
}
.site-nav a:hover,
.site-nav a.active { color: var(--black); }
.nav-toggle { display: none; }

/* ── Page header (shared) ───────────────────────────── */
.page-header {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule);
}

.prog-count {
  margin-top: 12px;
  color: var(--dim);
  opacity: 0.3;
}

/* ── Hero ───────────────────────────────────────────── */
.site-hero {
  position: relative;
  min-height: 100vh;
  padding-bottom: var(--page-top);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  z-index: 1;
}

.hero-photo {
  position: relative;
  width: 300px;
  height: 300px;
  margin-bottom: 4px;
  overflow: hidden;
  /* Adjust shadow values here */
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}

.hero-tagline {
  max-width: 360px;
  background: linear-gradient(to right, #00AAFF 0%, #FFA100 25%, #FF0000 50%, #FFA100 75%, #00AAFF 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: sheen 4s linear infinite;
}

@keyframes sheen {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes sheen-diagonal {
  0%   { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Hero 3 — homepage centered scramble on white with particle backdrop.
   On home, the hero extends to top: 0 (under the transparent header). */
.site-hero.hero-3 {
  position: relative;
  min-height: 100vh;
  padding: 0 0 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #0d0d0d;
  overflow: hidden;
  perspective: 1400px;
  transform-style: preserve-3d;
  /* Override the per-page random --black so hero pills always read in
     plain black, never the rotating accent color. */
  --black: #0d0d0d;
  --dim:   #0d0d0d;
}
/* The hero itself is pure black — body and footer keep their normal
   white background so the rest of the homepage isn't dark. */
.hero-3-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  z-index: 0;
}
/* Glowing cursor-trail canvas — sits above the particles, below the
   centered text. The JS paints soft glows where the cursor moves and
   slowly fades them. */
.hero-3-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: block;
}
.hero-3-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(180px, 18vw, 360px);
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  animation: hero-3-explode 40s linear infinite;
  animation-fill-mode: backwards;
  will-change: transform;
  transform-origin: center;
  cursor: pointer;
  pointer-events: auto;
}
.hero-3-particle,
.hero-3-particle img {
  border-radius: 0 !important;
}
.hero-3-particle img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 600ms ease;
}
/* Credit caption — small black pill centered ON the image so the
   photo behind stays fully visible. White type on solid black.
   Selector compounded with .site-hero.hero-3 to outrank the blanket
   `.site-hero.hero-3 * { color: #0d0d0d !important }` rule. */
.site-hero.hero-3 .hero-3-particle-credit {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Translate centers it; scale counter-acts the parent figure's growth
     (var(--scale) * 1.4 keyframe end * 1.06 hover) so the caption never
     renders larger than body type, even on big-scale particles. */
  transform: translate(-50%, -50%) scale(calc(1 / (var(--scale, 1) * 1.484)));
  margin: 0;
  padding: 8px 14px;
  max-width: 80%;
  background: #0d0d0d !important;
  color: #fff !important;
  font-family: 'Euchre', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--sz);
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}
/* Hover behavior: when any particle is hovered, pause the entire vortex
   and dim the un-hovered ones. The hovered image drifts very gently in
   a soft loop while the credit fades in beneath. */
.hero-3-particles:has(.hero-3-particle:hover) .hero-3-particle {
  animation-play-state: paused;
}
/* Scale lives on the figure (the frame), not the inner img — using the
   individual scale property so it composes cleanly with the paused
   vortex transform. */
.hero-3-particle {
  scale: 1;
  transition: filter 1400ms ease, scale 1200ms ease;
}
.hero-3-particles:has(.hero-3-particle:hover) .hero-3-particle:not(:hover) {
  filter: opacity(0.35);
}
.hero-3-particle:hover {
  scale: 1.06;
  z-index: 100;
  opacity: 1 !important;
  /* Push hovered particle forward in the 3D vortex so it paints above all
     others. The vortex uses preserve-3d, so z-index alone is ignored —
     translating Z is what actually wins the paint order. */
  translate: 0 0 200px;
}
.hero-3-particle:hover img {
  animation: hero-3-particle-drift 9s ease-in-out infinite;
  opacity: 1 !important;
}
.hero-3-particle:hover .hero-3-particle-credit {
  opacity: 1;
}
@keyframes hero-3-particle-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(4px, -2px); }
  50%  { transform: translate(0, 2px); }
  75%  { transform: translate(-4px, -2px); }
  100% { transform: translate(0, 0); }
}
@keyframes hero-3-explode {
  0%    { transform: translate(-50%, -50%) translate(0, 0) translateZ(-1200px) scale(calc(var(--scale, 1) * 0.6)); opacity: 0; }
  10%   { opacity: 1; }
  85%   { opacity: 1; }
  100%  { transform: translate(-50%, -50%) translate(calc(var(--dx, 0) * 1vw), calc(var(--dy, 0) * 1vh)) translateZ(0) scale(calc(var(--scale, 1) * 1.4)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-3-particle { animation: none; opacity: 0.25; transform: translate(-50%, -50%); }
}
.hero-3-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding: 0 var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
}
/* Eyebrow + typed-text pills — identical styling. Specificity raised
   above .hero-2-text so the typed pill matches the eyebrow exactly.
   White type on a solid black pill. */
.site-hero.hero-3 .hero-3-eyebrow,
.site-hero.hero-3 .hero-3-text {
  margin: 0;
  font-family: 'Euchre', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(13px, 1.6vw, 12px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: clamp(1.5px, 0.4vw, 3px);
  text-transform: uppercase;
  color: #fff !important;
  background-color: #0d0d0d;
  padding: 5px 12px 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  display: inline-block;
}
.hero-3-headline {
  margin: 0;
  font-family: 'Harriet', 'Euchre', serif;
  font-size: clamp(24px, 6.4vw, 36px);
  font-weight: 300; /* Harriet Display Light */
  line-height: 1.05;
  letter-spacing: clamp(2px, 0.5vw, 5px);
  text-transform: uppercase;
  color: var(--black);
  max-width: none;
}
/* White-pill highlight wrapping the headline text — black text on white,
   same treatment as the About hero label. Uses box-decoration-break so
   wrapped lines each get the pill, not one big block. */
.hero-3-headline .hero-3-headline-hl {
  background-color: #0d0d0d;
  color: #fff !important;
  padding: 5px 12px 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Typed inner spans inherit everything from the .hero-3-text pill so
   they don't carry over the .hero-2-text styling (different letter-
   spacing / color). */
.site-hero.hero-3 .hero-2-typed-wrap,
.site-hero.hero-3 .hero-2-typed {
  font: inherit;
  letter-spacing: inherit;
  color: #fff !important;
  background: transparent;
  padding: 0;
}
/* Force every text node in the home hero to render plain black,
   regardless of animation states or hover overrides. */
.site-hero.hero-3,
.site-hero.hero-3 * { color: #0d0d0d !important; }
.hero-3-prefix,
.hero-3-rest { display: inline; }
.hero-3 .hero-2-typed { color: inherit; }
/* Mobile: drop the depth-perspective animation (renders particles tiny
   / off-screen on small viewports) and replace with a flat 2D scale +
   fade so the vortex is actually visible. */
@media (max-width: 900px) {
  .site-hero.hero-3 { perspective: none; transform-style: flat; }
  .hero-3-particle {
    width: clamp(140px, 38vw, 280px);
    animation: hero-3-explode-flat 28s ease-in-out infinite;
  }
  @keyframes hero-3-explode-flat {
    0%   { transform: translate(-50%, -50%) translate(0, 0) scale(calc(var(--scale, 1) * 0.55)); opacity: 0; }
    15%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) translate(calc(var(--dx, 0) * 1vw), calc(var(--dy, 0) * 1vh)) scale(calc(var(--scale, 1) * 0.9)); opacity: 0; }
  }
  /* Hard-center every line of hero text on mobile. The flex stack
     plus text-align center on each child guarantees nothing drifts
     even if a child becomes block-level via cascade. */
  .site-hero.hero-3 .hero-3-inner {
    align-items: center;
    text-align: center;
    padding: 0 16px;
    width: 100%;
  }
  .site-hero.hero-3 .hero-3-eyebrow,
  .site-hero.hero-3 .hero-3-headline,
  .site-hero.hero-3 .hero-2-variant,
  .site-hero.hero-3 .hero-3-text {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 100%;
  }
  .site-hero.hero-3 .hero-2-variant { display: block; width: 100%; }
}

/* ── Hero 2 — typewriter statement ──────────────────────── */
.site-hero.hero-2 {
  min-height: 100vh;
  padding: var(--page-top) 0 80px;
  display: grid;
  align-items: center;
  justify-content: stretch;
  justify-items: stretch;
}
.site-hero.hero-2 > .container {
  position: relative;
  z-index: 1;
}
.hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero-2-inner {
  grid-column: 1 / -1;
  text-align: left;
}
.hero-2-text,
.hero-2-text .hero-2-prefix,
.hero-2-text .hero-2-rest,
.hero-2-text .hero-2-typed {
  margin: 0;
  font-family: 'Euchre', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(13px, 1.6vw, 12px);
  font-weight: 400;
  line-height: 1;
  color: var(--black);
  background-color: #fff;
  letter-spacing: 2px;
  padding: 5px 12px 4px;
  text-transform: uppercase;
  color: var(--white);
}
/* Force line break after "is" — prefix and rest always stack */
.hero-2-prefix,
.hero-2-rest { display: block; }
.hero-2-typed-wrap {
  display: inline-block;
  vertical-align: bottom;
  line-height: 1.4;
  position: relative;
}
.hero-2-typed {
  display: inline-block;
  text-decoration: none;
  will-change: transform, opacity, filter, clip-path;
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* ── 10 heading variants ─────────────────────────────── */
.hero-2-variant {
  margin-bottom: 0px;
}
.hero-2-vlabel {
  display: block;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 10px;
}

/* Slide-up animations need overflow clipping */
[data-anim="slide-up"]   .hero-2-typed-wrap,
[data-anim="slide-down"] .hero-2-typed-wrap,
[data-anim="letter-slide"] .hero-2-typed-wrap { overflow: hidden; }

/* 01 — slide up */
[data-anim="slide-up"] .hero-2-typed.is-out  { transition: transform 360ms cubic-bezier(0.7,0,0.3,1), opacity 360ms; transform: translateY(-100%); opacity: 0; }
[data-anim="slide-up"] .hero-2-typed.is-prep { transition: none; transform: translateY(100%); opacity: 0; }
[data-anim="slide-up"] .hero-2-typed.is-in   { transition: transform 360ms cubic-bezier(0.7,0,0.3,1), opacity 360ms; transform: translateY(0); opacity: 1; }

/* 02 — slide down */
[data-anim="slide-down"] .hero-2-typed.is-out  { transition: transform 360ms cubic-bezier(0.7,0,0.3,1), opacity 360ms; transform: translateY(100%); opacity: 0; }
[data-anim="slide-down"] .hero-2-typed.is-prep { transition: none; transform: translateY(-100%); opacity: 0; }
[data-anim="slide-down"] .hero-2-typed.is-in   { transition: transform 360ms cubic-bezier(0.7,0,0.3,1), opacity 360ms; transform: translateY(0); opacity: 1; }

/* 03 — fade */
[data-anim="fade"] .hero-2-typed.is-out  { transition: opacity 280ms; opacity: 0; }
[data-anim="fade"] .hero-2-typed.is-prep { transition: none; opacity: 0; }
[data-anim="fade"] .hero-2-typed.is-in   { transition: opacity 280ms; opacity: 1; }

/* 04 — crossfade (handled with ghost in JS) */
[data-anim="crossfade"] .hero-2-typed.cf-out { transition: opacity 500ms; opacity: 0; position: absolute; left: 0; top: 0; }

/* 05 — typewriter (text manipulated in JS, no CSS transitions needed) */

/* 06 — scramble (text manipulated in JS) */

/* 07 — blur */
[data-anim="blur"] .hero-2-typed.is-out  { transition: filter 320ms, opacity 320ms; filter: blur(14px); opacity: 0; }
[data-anim="blur"] .hero-2-typed.is-prep { transition: none; filter: blur(14px); opacity: 0; }
[data-anim="blur"] .hero-2-typed.is-in   { transition: filter 320ms, opacity 320ms; filter: blur(0); opacity: 1; }

/* 08 — zoom */
[data-anim="zoom"] .hero-2-typed.is-out  { transition: transform 320ms cubic-bezier(0.4,0,0.2,1), opacity 320ms; transform: scale(1.4); opacity: 0; }
[data-anim="zoom"] .hero-2-typed.is-prep { transition: none; transform: scale(0.6); opacity: 0; }
[data-anim="zoom"] .hero-2-typed.is-in   { transition: transform 320ms cubic-bezier(0.4,0,0.2,1), opacity 320ms; transform: scale(1); opacity: 1; }

/* 09 — letter slide */
@keyframes ls-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
@keyframes ls-in  { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
[data-anim="letter-slide"] .ls-letter { display: inline-block; }

/* 10 — clip wipe */
[data-anim="clip-wipe"] .hero-2-typed.is-out  { transition: clip-path 380ms cubic-bezier(0.7,0,0.3,1); clip-path: inset(0 0 0 100%); }
[data-anim="clip-wipe"] .hero-2-typed.is-prep { transition: none; clip-path: inset(0 100% 0 0); }
[data-anim="clip-wipe"] .hero-2-typed.is-in   { transition: clip-path 380ms cubic-bezier(0.7,0,0.3,1); clip-path: inset(0 0 0 0); }

/* Wraps that need clipping */
[data-anim="slide-left"]  .hero-2-typed-wrap,
[data-anim="slide-right"] .hero-2-typed-wrap,
[data-anim="drop"]        .hero-2-typed-wrap,
[data-anim="rise"]        .hero-2-typed-wrap,
[data-anim="wave"]        .hero-2-typed-wrap,
[data-anim="bounce"]      .hero-2-typed-wrap { overflow: hidden; }

/* 3D perspective for flips */
[data-anim="flip-x"] .hero-2-typed-wrap,
[data-anim="flip-y"] .hero-2-typed-wrap { perspective: 600px; }

/* 11 — slide left */
[data-anim="slide-left"] .hero-2-typed.is-out  { transition: transform 380ms cubic-bezier(0.7,0,0.3,1), opacity 380ms; transform: translateX(-100%); opacity: 0; }
[data-anim="slide-left"] .hero-2-typed.is-prep { transition: none; transform: translateX(100%); opacity: 0; }
[data-anim="slide-left"] .hero-2-typed.is-in   { transition: transform 380ms cubic-bezier(0.7,0,0.3,1), opacity 380ms; transform: translateX(0); opacity: 1; }

/* 12 — slide right */
[data-anim="slide-right"] .hero-2-typed.is-out  { transition: transform 380ms cubic-bezier(0.7,0,0.3,1), opacity 380ms; transform: translateX(100%); opacity: 0; }
[data-anim="slide-right"] .hero-2-typed.is-prep { transition: none; transform: translateX(-100%); opacity: 0; }
[data-anim="slide-right"] .hero-2-typed.is-in   { transition: transform 380ms cubic-bezier(0.7,0,0.3,1), opacity 380ms; transform: translateX(0); opacity: 1; }

/* 13 — flip x (rotate around horizontal axis) */
[data-anim="flip-x"] .hero-2-typed.is-out  { transition: transform 360ms, opacity 360ms; transform: rotateX(90deg); opacity: 0; }
[data-anim="flip-x"] .hero-2-typed.is-prep { transition: none; transform: rotateX(-90deg); opacity: 0; }
[data-anim="flip-x"] .hero-2-typed.is-in   { transition: transform 360ms, opacity 360ms; transform: rotateX(0); opacity: 1; }

/* 14 — flip y (rotate around vertical axis) */
[data-anim="flip-y"] .hero-2-typed.is-out  { transition: transform 360ms, opacity 360ms; transform: rotateY(90deg); opacity: 0; }
[data-anim="flip-y"] .hero-2-typed.is-prep { transition: none; transform: rotateY(-90deg); opacity: 0; }
[data-anim="flip-y"] .hero-2-typed.is-in   { transition: transform 360ms, opacity 360ms; transform: rotateY(0); opacity: 1; }

/* 15 — spin */
[data-anim="spin"] .hero-2-typed.is-out  { transition: transform 400ms cubic-bezier(0.4,0,0.2,1), opacity 400ms; transform: rotate(180deg) scale(0.5); opacity: 0; transform-origin: center; }
[data-anim="spin"] .hero-2-typed.is-prep { transition: none; transform: rotate(-180deg) scale(0.5); opacity: 0; transform-origin: center; }
[data-anim="spin"] .hero-2-typed.is-in   { transition: transform 400ms cubic-bezier(0.4,0,0.2,1), opacity 400ms; transform: rotate(0) scale(1); opacity: 1; transform-origin: center; }

/* 16 — glitch */
@keyframes glitch-out {
  0%   { transform: translateX(0);   text-shadow: none; opacity: 1; }
  20%  { transform: translateX(-3px); text-shadow: 2px 0 #f0f, -2px 0 #0ff; }
  40%  { transform: translateX(3px);  text-shadow: -2px 0 #f0f, 2px 0 #0ff; }
  60%  { transform: translateX(-2px); text-shadow: 3px 0 #f0f, -3px 0 #0ff; }
  80%  { transform: translateX(2px);  text-shadow: -1px 0 #f0f, 1px 0 #0ff; opacity: 0.4; }
  100% { transform: translateX(0);   text-shadow: none; opacity: 0; }
}
@keyframes glitch-in {
  0%   { transform: translateX(3px); text-shadow: -2px 0 #f0f, 2px 0 #0ff; opacity: 0; }
  30%  { transform: translateX(-3px); text-shadow: 2px 0 #f0f, -2px 0 #0ff; opacity: 0.6; }
  60%  { transform: translateX(1px); text-shadow: 1px 0 #f0f, -1px 0 #0ff; opacity: 1; }
  100% { transform: translateX(0);   text-shadow: none; opacity: 1; }
}
[data-anim="glitch"] .hero-2-typed.is-out { animation: glitch-out 360ms steps(8, end) forwards; }
[data-anim="glitch"] .hero-2-typed.is-in  { animation: glitch-in  360ms steps(8, end) forwards; }

/* 17 — dissolve (handled in JS) */

/* 18 — stretch (horizontal scale extreme) */
[data-anim="stretch"] .hero-2-typed.is-out  { transition: transform 380ms cubic-bezier(0.7,0,0.3,1), opacity 380ms; transform: scaleX(3); opacity: 0; }
[data-anim="stretch"] .hero-2-typed.is-prep { transition: none; transform: scaleX(0); opacity: 0; }
[data-anim="stretch"] .hero-2-typed.is-in   { transition: transform 380ms cubic-bezier(0.7,0,0.3,1), opacity 380ms; transform: scaleX(1); opacity: 1; }

/* 19 — drop (per-letter from above, JS-driven) */
@keyframes ls-drop-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(120%); opacity: 0; } }
@keyframes ls-drop-in  { from { transform: translateY(-120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
[data-anim="drop"] .ls-letter { display: inline-block; }

/* 20 — rise (per-letter from below, JS-driven) */
@keyframes ls-rise-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-120%); opacity: 0; } }
@keyframes ls-rise-in  { from { transform: translateY(120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
[data-anim="rise"] .ls-letter { display: inline-block; }

/* 21 — shake */
@keyframes shake-fx {
  0%, 100% { transform: translateX(0); opacity: 1; }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80%      { transform: translateX(5px); }
  100% { opacity: 0; }
}
[data-anim="shake"] .hero-2-typed.is-out  { animation: shake-fx 380ms forwards; }
[data-anim="shake"] .hero-2-typed.is-prep { transition: none; opacity: 0; }
[data-anim="shake"] .hero-2-typed.is-in   { transition: opacity 220ms; opacity: 1; }

/* 22 — bounce (per-letter, springy entry, JS-driven) */
@keyframes ls-bounce-out { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(120%); opacity: 0; } }
@keyframes ls-bounce-in  {
  0%   { transform: translateY(120%); opacity: 0; }
  60%  { transform: translateY(-15%); opacity: 1; }
  80%  { transform: translateY(8%);   opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}
[data-anim="bounce"] .ls-letter { display: inline-block; }

/* 23 — wave (per-letter sine, JS-driven) */
@keyframes ls-wave-out {
  0%   { transform: translateY(0);     opacity: 1; }
  50%  { transform: translateY(-30%);  opacity: 0.3; }
  100% { transform: translateY(-100%); opacity: 0; }
}
@keyframes ls-wave-in {
  0%   { transform: translateY(100%);  opacity: 0; }
  50%  { transform: translateY(-20%);  opacity: 0.7; }
  100% { transform: translateY(0);     opacity: 1; }
}
[data-anim="wave"] .ls-letter { display: inline-block; }

/* 24 — shutter (top + bottom collapse to center, then open) */
[data-anim="shutter"] .hero-2-typed.is-out  { transition: clip-path 380ms cubic-bezier(0.7,0,0.3,1); clip-path: inset(50% 0 50% 0); }
[data-anim="shutter"] .hero-2-typed.is-prep { transition: none; clip-path: inset(50% 0 50% 0); }
[data-anim="shutter"] .hero-2-typed.is-in   { transition: clip-path 380ms cubic-bezier(0.7,0,0.3,1); clip-path: inset(0 0 0 0); }

/* 25 — radial wipe */
[data-anim="radial-wipe"] .hero-2-typed.is-out  { transition: clip-path 400ms cubic-bezier(0.7,0,0.3,1); clip-path: circle(0% at 50% 50%); }
[data-anim="radial-wipe"] .hero-2-typed.is-prep { transition: none; clip-path: circle(0% at 50% 50%); }
[data-anim="radial-wipe"] .hero-2-typed.is-in   { transition: clip-path 400ms cubic-bezier(0.7,0,0.3,1); clip-path: circle(100% at 50% 50%); }

/* 26 — mirror (horizontal flip) */
[data-anim="mirror"] .hero-2-typed.is-out  { transition: transform 380ms cubic-bezier(0.7,0,0.3,1), opacity 380ms; transform: scaleX(-1); opacity: 0; }
[data-anim="mirror"] .hero-2-typed.is-prep { transition: none; transform: scaleX(-1); opacity: 0; }
[data-anim="mirror"] .hero-2-typed.is-in   { transition: transform 380ms cubic-bezier(0.7,0,0.3,1), opacity 380ms; transform: scaleX(1); opacity: 1; }

/* 27 — tracking (letter-spacing pulse) */
[data-anim="tracking"] .hero-2-typed.is-out  { transition: letter-spacing 380ms cubic-bezier(0.7,0,0.3,1), opacity 380ms; letter-spacing: 0.6em; opacity: 0; }
[data-anim="tracking"] .hero-2-typed.is-prep { transition: none; letter-spacing: -0.05em; opacity: 0; }
[data-anim="tracking"] .hero-2-typed.is-in   { transition: letter-spacing 380ms cubic-bezier(0.7,0,0.3,1), opacity 380ms; letter-spacing: normal; opacity: 1; }

/* 28 — squash (vertical scale collapse) */
[data-anim="squash"] .hero-2-typed { transform-origin: bottom; }
[data-anim="squash"] .hero-2-typed.is-out  { transition: transform 380ms cubic-bezier(0.7,0,0.3,1), opacity 380ms; transform: scaleY(0); opacity: 0; }
[data-anim="squash"] .hero-2-typed.is-prep { transition: none; transform: scaleY(0); opacity: 0; }
[data-anim="squash"] .hero-2-typed.is-in   { transition: transform 380ms cubic-bezier(0.7,0,0.3,1), opacity 380ms; transform: scaleY(1); opacity: 1; }

/* 29 — morph (variable font weight) */
[data-anim="morph"] .hero-2-typed.is-out  { transition: font-weight 380ms, opacity 380ms; font-weight: 900; opacity: 0; }
[data-anim="morph"] .hero-2-typed.is-prep { transition: none; font-weight: 100; opacity: 0; }
[data-anim="morph"] .hero-2-typed.is-in   { transition: font-weight 380ms, opacity 380ms; font-weight: 300; opacity: 1; }

/* 30 — neon (text-shadow glow + brightness) */
[data-anim="neon"] .hero-2-typed.is-out  { transition: text-shadow 380ms, opacity 380ms, filter 380ms; text-shadow: 0 0 24px currentColor; filter: brightness(1.6); opacity: 0; }
[data-anim="neon"] .hero-2-typed.is-prep { transition: none; text-shadow: 0 0 24px currentColor; filter: brightness(1.6); opacity: 0; }
[data-anim="neon"] .hero-2-typed.is-in   { transition: text-shadow 380ms, opacity 380ms, filter 380ms; text-shadow: 0 0 0 currentColor; filter: brightness(1); opacity: 1; }
.hero-2-photo {
  grid-column: 1 / span 3;
  grid-row: 2;
  aspect-ratio: 1 / 1;
  position: relative;
  margin: 10px 0 0;
  overflow: hidden;
}
.hero-2-photo .hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-2-text-col {
  grid-column: 4 / span 6;
  grid-row: 2;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.4em;
}
.hero-2-blurb {
  margin: 0;
  line-height: 1.6;
  color: var(--dim);
}
.hero-2-hl {
  background-color: #39ff14;
  padding: 0 0.2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.btn-pill {
  display: inline-block;
  padding: 8px 24px;
  border: 1px solid var(--black);
  border-radius: 0;
  background: transparent;
  color: var(--black);
  transition: all var(--ease);
}
.btn-pill:hover {
  background: var(--black);
  color: var(--white);
}

.hero-headline { line-height: var(--lh); }

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 7px 16px;
  font-style: normal;
  border: 1px solid var(--black);
  transition: all var(--ease);
  white-space: nowrap;
}
.btn-primary       { background: var(--black); color: var(--white); }
.btn-primary:hover { background: transparent; color: var(--black); }
.btn-outline       { background: transparent; color: var(--black); }
.btn-outline:hover { background: var(--black); color: var(--white); }
.btn-outline-white       { border-color: var(--rule); color: var(--white); background: transparent; }
.btn-outline-white:hover { background: var(--white); color: var(--black); }
.btn-dark          { background: var(--black); color: var(--white); border-color: var(--black); }
.btn-dark:hover    { background: transparent; color: var(--black); }
.btn-eventbrite       { background: #f05537; color: var(--white); border-color: #f05537; }
.btn-eventbrite:hover { background: #d94025; border-color: #d94025; }

/* ── Home events ─────────────────────────────────────── */
.home-events {
  padding: 56px 0;
  background: #f5f5f3;
}

.home-section-label {
  margin-bottom: 0;
  grid-column: 1 / 4;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  align-self: start;
}

.home-rows {
  display: flex;
  flex-direction: column;
}

.home-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
  padding: 14px 0;
  transition: opacity var(--ease);
  color: inherit;
}
.home-row:hover { opacity: 0.3; }

.home-row-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-row-type  { color: var(--dim); }
.home-row-name  { color: inherit; font-weight: 700; }
.home-row-venue { color: var(--dim); }
.home-row-date  { flex-shrink: 0; color: var(--dim); white-space: nowrap; }

.site-hero { background: var(--white); }
.home-events { background: #f5f5f3; }

/* ── Writing (dark section) ──────────────────────────── */
.home-writing {
  min-height: 100vh;
  padding: 72px 0;
  background: #000;
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-writing .home-row-type,
.home-writing .home-row-venue,
.home-writing .home-row-date       { color: rgba(255,255,255,0.45); }
.home-writing .home-section-label  { opacity: 1; transform: none; transition: none; }

/* ── Home trio: Discord + Faculty + Underscore (3 cols, 100vh)
   Background is a random color picked per-page from the AAA-contrast
   subset (≥7:1 on white). Force every descendant text node to solid
   white at full opacity so contrast stays bulletproof. */
.home-trio {
  min-height: 100vh;
  background: var(--trio-bg, #f5f5f3);
  color: #fff;
  display: grid;
  align-content: center;
  padding: 56px 0;
}
.home-trio,
.home-trio * { color: #fff !important; opacity: 1 !important; }
/* CTA buttons inside the trio match the typography color exactly —
   white text + white border + transparent bg, in every state. Hover
   uses a subtle bg tint instead of inverting colors so contrast stays
   AAA and the button never reads as a different color from the type. */
.home-trio .home-discord-cta,
.home-trio .home-faculty-cta,
.home-trio .home-underscore-cta {
  color: #fff !important;
  border-color: #fff !important;
  background: transparent !important;
}
.home-trio .home-discord-cta:hover,
.home-trio .home-faculty-cta:hover,
.home-trio .home-underscore-cta:hover {
  color: #fff !important;
  border-color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}
.home-trio-grid {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto auto auto;  /* logo / copy / meta / cta */
  column-gap: var(--gap);
  row-gap: 20px;
}
.home-trio-grid > section {
  position: relative;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  grid-column: span 4;
  display: grid !important;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: inherit;
  text-align: left;
  background: transparent !important;
  color: var(--black) !important;
}
.home-trio-grid > section::before,
.home-trio-grid > section::after { content: none !important; }
.home-trio .home-discord-inner,
.home-trio .home-faculty-inner,
.home-trio .home-underscore-inner {
  display: contents;
}
.home-trio .home-discord-logo,
.home-trio .home-faculty-logo,
.home-trio .home-underscore-logo {
  grid-row: 1;
  grid-column: 1 / -1;
  justify-content: flex-start;
  align-self: end;
  margin: 0;
}
.home-trio .home-discord-desc,
.home-trio .home-faculty-tagline,
.home-trio .home-underscore-title {
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: start;
  max-width: none;
  text-align: left;
}
.home-trio .home-discord-meta {
  grid-row: 3;
  grid-column: 1 / -1;
  align-self: start;
  justify-content: flex-start;
}
.home-trio .home-discord-cta,
.home-trio .home-faculty-cta,
.home-trio .home-underscore-cta {
  grid-row: 4;
  grid-column: 1 / -1;
  justify-self: start;
  align-self: start;
  margin-top: 0;
  min-width: 200px;
  text-align: center;
}
@media (max-width: 900px) {
  .home-trio-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: none;
  }
  .home-trio-grid > section {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-rows: none;
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    padding: 32px 0 !important;
    border-top: 1px solid var(--rule);
  }
  .home-trio-grid > section:first-child { border-top: 0; }
  .home-trio .home-discord-inner,
  .home-trio .home-faculty-inner,
  .home-trio .home-underscore-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
  }
  .home-trio .home-discord-logo,
  .home-trio .home-faculty-logo,
  .home-trio .home-underscore-logo,
  .home-trio .home-discord-desc,
  .home-trio .home-faculty-tagline,
  .home-trio .home-underscore-title,
  .home-trio .home-discord-meta,
  .home-trio .home-discord-cta,
  .home-trio .home-faculty-cta,
  .home-trio .home-underscore-cta {
    grid-row: auto;
    grid-column: auto;
    align-self: auto;
    justify-self: auto;
  }
}
/* Force text/CTA colors on the trio's solid color background */
.home-trio .home-discord-logo svg,
.home-trio .home-faculty-logo svg,
.home-trio .home-underscore-logo svg { color: #fff !important; }
.home-trio .home-discord-cta,
.home-trio .home-faculty-cta,
.home-trio .home-underscore-cta {
  border-color: #fff !important;
  color: #fff !important;
  background: transparent !important;
}
.home-trio .home-discord-cta:hover,
.home-trio .home-faculty-cta:hover,
.home-trio .home-underscore-cta:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* ── Discord CTA section ─────────────────────────────── */
.home-discord {
  padding: 120px var(--pad);
  background: var(--black);
  color: var(--white);
}
.home-discord-logo {
  display: flex;
  justify-content: center;
  margin: 4px 0 4px;
}
.home-discord-logo svg {
  width: clamp(48px, 6vw, 72px);
  height: auto;
  color: var(--white);
}
.home-discord-inner {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.home-discord-title {
  font-size: var(--sz-lg);
  line-height: var(--lh);
  margin: 0;
}
.home-discord-desc {
  margin: 0;
  max-width: 520px;
  line-height: var(--lh);
  opacity: 0.9;
}
.home-discord-meta {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0.85;
}
.home-discord-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.home-discord-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: cgdc-pulse 2s infinite;
}
@keyframes cgdc-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(74, 222, 128, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0   rgba(74, 222, 128, 0); }
}
.home-discord-cta {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 28px;
  border: 1px solid var(--white);
  color: var(--white);
  transition: background-color var(--ease), color var(--ease);
}
.home-discord-cta:hover { background: var(--white); color: var(--black); }

/* Discord widget */
.home-discord-widget {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}
.home-discord-widget-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.home-discord-widget-label {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.6;
  min-width: 70px;
  text-align: right;
}
.home-discord-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.home-discord-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  cursor: default;
  overflow: visible;
}
.home-discord-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.home-discord-status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--black);
  box-sizing: content-box;
}
.home-discord-status--online { background: #4ade80; }
.home-discord-status--idle   { background: #f5b942; }
.home-discord-status--dnd    { background: #f04747; }
.home-discord-avatar-more {
  font-size: 13px;
  opacity: 0.7;
  margin-left: 4px;
}
.home-discord-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-discord-channel {
  font-size: 13px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  opacity: 0.85;
}
.home-discord-channel.is-voice {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.4);
  opacity: 1;
}

/* ── Home faculty ────────────────────────────────────── */
.home-faculty {
  --section-bg: #b91c1c;
  --section-fg: #ffffff;
  min-height: 100vh;
  padding: 80px var(--pad);
  background-color: var(--section-bg);
  color: var(--section-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.home-faculty::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/faculty-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0.3;
  pointer-events: none;
}
.home-faculty-inner { position: relative; z-index: 1; }
.home-faculty-inner {
  width: 100%;
  max-width: 720px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.home-faculty-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.home-faculty-logo svg {
  width: clamp(120px, 14vw, 180px);
  height: auto;
}
.home-faculty-tagline {
  margin: 0;
  max-width: 560px;
  font-size: var(--sz);
  line-height: var(--lh);
  opacity: 0.9;
}
.home-faculty-cta {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 28px;
  border: 1px solid var(--section-fg);
  color: var(--section-fg);
  transition: background-color var(--ease), color var(--ease);
}
.home-faculty-cta:hover { background: var(--section-fg); color: var(--section-bg); }

/* ── Home underscore ─────────────────────────────────── */
.home-underscore {
  --section-bg: #f5e642;
  --section-fg: #0d0d0d;
  min-height: 100vh;
  padding: 80px var(--pad);
  background-color: var(--section-bg);
  color: var(--section-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.home-underscore::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/underscore-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0.3;
  pointer-events: none;
}
.home-underscore-inner { position: relative; z-index: 1; }
.home-underscore-inner {
  width: 100%;
  max-width: 720px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.home-underscore-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.home-underscore-logo svg {
  width: clamp(150px, 18vw, 220px);
  height: auto;
  color: var(--section-fg);
}
.home-underscore-title {
  margin: 0;
  font-size: var(--sz);
  line-height: var(--lh);
  max-width: 520px;
}
.home-underscore-embed {
  width: 100%;
  max-width: 640px;
  height: 152px;
  border: 0;
  margin-top: 16px;
  border-radius: 12px;
}
.home-underscore-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 28px;
  border: 1px solid var(--section-fg);
  color: var(--section-fg);
  transition: background-color var(--ease), color var(--ease);
}
.home-underscore-cta:hover { background: var(--section-fg); color: var(--section-bg); }

/* ── Programs section ────────────────────────────────── */
.home-programs {
  padding: 56px 0;
  background: #f5f5f3;
}
.home-programs-list {
  display: flex;
  flex-direction: column;
  grid-column: 4 / -1;
}
.prog-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 0;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--ease);
}
.prog-item:hover { opacity: 0.3; }
.prog-item-svg {
  display: flex;
  align-items: center;
}
.prog-item-svg svg {
  max-height: 40px;
  width: auto;
  max-width: 280px;
}
.prog-item-label {
  color: var(--dim);
}
@media (max-width: 640px) {
  .home-programs-inner { grid-template-columns: 1fr; }
}
/* ── Legacy event / article classes ─────────────────── */
.events-list, .events-grid { display: flex; flex-direction: column; }

.event-card, .event-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: var(--gap);
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  transition: opacity var(--ease);
}
.event-card:last-child,
.event-row:last-child  { border-bottom: 1px solid var(--rule); }
.event-card:hover,
.event-row:hover       { opacity: 0.3; }

.event-card-date,
.event-row-date     { color: var(--dim); }
.event-card-title a,
.event-row-title    { color: var(--black); }
.event-card-meta,
.event-row-location { color: var(--dim); }
.event-card-desc,
.event-card-footer  { display: none; }

/* ── Home articles (legacy) ──────────────────────────── */
.home-articles  { padding: 56px 0; }
.articles-list  { display: flex; flex-direction: column; }

.article-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gap);
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  transition: opacity var(--ease);
}
.article-row:last-child { border-bottom: 1px solid var(--rule); }
.article-row:hover      { opacity: 0.3; }

.article-row-left  { display: flex; flex-direction: column; gap: 3px; }
.article-category  { color: var(--dim); }
.article-title     { color: var(--black); }
.article-byline    { color: var(--dim); }
.article-row-right { color: var(--dim); white-space: nowrap; }

/* ── Programs section ────────────────────────────────── */
.programs-section { padding: 56px 0; border-top: 1px solid var(--rule); }

.programs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 32px;
}

.program-card {
  padding: 32px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.program-card p { color: var(--dim); flex: 1; }

/* ── Archive controls ────────────────────────────────── */

.prog-controls {
  border-bottom: 1px solid var(--rule);
  background: var(--white);
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
}
.admin-bar .prog-controls { top: calc(var(--nav-h) + 32px); }

.prog-controls-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  flex-wrap: wrap;
}

.prog-filters { display: flex; gap: 4px; flex-wrap: wrap; }

.prog-filter {
  padding: 4px 12px;
  border: 1px solid var(--rule);
  color: var(--dim);
  cursor: pointer;
  transition: all var(--ease);
  font-family: var(--f);
}
.prog-filter:hover  { border-color: var(--black); color: var(--black); }
.prog-filter.active { background: var(--black); border-color: var(--black); color: var(--white); }

.view-toggle { display: flex; gap: 2px; flex-shrink: 0; }

.view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  color: var(--dim);
  border: 1px solid transparent;
  transition: all var(--ease);
  cursor: pointer;
}
.view-btn:hover  { color: var(--black); }
.view-btn.active { color: var(--black); border-color: var(--rule); }
.view-btn svg    { flex-shrink: 0; }

.prog-body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: start;
}
.prog-sidebar {
  grid-column: 1 / 4;
  padding-bottom: 96px;
  color: var(--dim);
  position: sticky;
  top: var(--page-top);
  align-self: start;
}
.prog-view { grid-column: 4 / -1; padding-bottom: 96px; }

/* ── Calendar ────────────────────────────────────────── */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.cal-nav-group {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cal-nav .view-toggle { margin-left: auto; }
.cal-nav-label {
  min-width: 180px;
  text-align: center;
}
.cal-nav-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule);
  color: var(--dim);
  cursor: pointer;
  transition: all var(--ease);
}
.cal-nav-btn:hover { color: var(--black); border-color: var(--black); }

.cal-grid { width: 100%; }

.cal-head-row {
  display: grid;
  grid-template-columns: repeat(7,1fr);
}
.cal-dow {
  padding: 8px 10px;
  color: var(--dim);
}

.cal-body {
  display: grid;
  grid-template-columns: repeat(7,1fr);
}
.cal-cell {
  min-height: 96px;
  padding: 8px 10px;
}
.cal-cell--empty        { background: transparent; }
.cal-cell--past .cal-day-num      { color: var(--dim); }
.cal-cell--today .cal-day-num { color: var(--black); }
.cal-day-num {
  display: block;
  color: var(--dim);
  margin-bottom: 6px;
}
.cal-today-label {
  display: block;
  line-height: 1.3;
  margin-top: 4px;
  background: linear-gradient(to right, #00AAFF 0%, #FFA100 25%, #FF0000 50%, #FFA100 75%, #00AAFF 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: sheen 4s linear infinite;
}
.cal-day-events { display: flex; flex-direction: column; gap: 2px; }

/* ── Empty-day modal ─────────────────────────────────── */
@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(20deg); }
  40%       { transform: rotate(-10deg); }
  60%       { transform: rotate(16deg); }
  80%       { transform: rotate(-6deg); }
}
.cal-empty-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(180,140,0,0.55);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.cal-empty-modal.is-open { display: flex; }
.cal-empty-modal-inner {
  background: #daeeff;
  border: none;
  padding: 40px 48px;
  text-align: center;
  width: 320px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.cal-empty-wave {
  display: block;
  width: 64px;
  margin: 0 auto 16px;
  transform-origin: 70% 80%;
  animation: wave 1.8s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
.cal-empty-modal-inner p {
  color: var(--dim);
  margin-bottom: 24px;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}
.cal-empty-modal-close {
  font-family: var(--f);
  color: var(--dim);
  border: 1px solid rgba(0,0,0,0.15);
  padding: 4px 16px;
  cursor: pointer;
  transition: all var(--ease);
  position: relative;
  z-index: 1;
}
.cal-empty-modal-close:hover { border-color: var(--black); color: var(--black); }
.cal-modal-star {
  position: absolute;
  border-radius: 50%;
  background: rgba(0,80,180,0.4);
  animation: twinkle linear infinite;
  pointer-events: none;
}
.cal-event-chip {
  display: flex; align-items: baseline; gap: 5px;
  padding: 1px 3px;
  transition: opacity var(--ease);
}
.cal-event-chip:hover { opacity: 0.3; }
.cal-chip-dot {
  flex-shrink: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--chip-color, var(--dim));
}
.cal-chip-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
          line-clamp: 1;
  color: var(--dim);
}

.cal-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 14px 0 0;
}
.cal-legend-item {
  display: flex; align-items: center; gap: 6px;
  color: var(--dim);
}
.cal-legend-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ── List view ───────────────────────────────────────── */
.list-month-group { margin-bottom: 0; }
.list-month-label {
  color: var(--dim);
  padding-bottom: 10px;
  padding-top: 10px;
  border-bottom: 1px solid var(--rule);
}

.list-event-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: baseline;
  gap: 16px 20px;
  padding: 5px 0;
  border-bottom: 1px solid var(--rule);
  transition: opacity var(--ease);
}
.list-event-row:hover         { opacity: 0.3; }
.list-event-row.is-past       { opacity: 0.55; }
.list-event-row.is-past:hover { opacity: 0.35; }

.list-event-date     { color: var(--dim); white-space: nowrap; }
.list-event-title    { color: var(--black); }
.list-event-location { color: var(--dim); white-space: nowrap; text-align: right; }

.list-section-label {
  color: var(--dim);
  padding: 32px 0 12px;
  border-bottom: 2px solid var(--black);
  margin-bottom: 0;
}
.list-section-label--past {
  margin-top: 48px;
  border-bottom-color: var(--rule);
}

.list-side-label   { grid-column: 1 / 4; color: var(--dim); padding-top: 32px; }
.list-events-right { grid-column: 4 / -1; }

.list-now-bar {
  grid-column: 1 / -1;
  margin-left: calc(-1 * var(--pad));
  margin-right: calc(-1 * var(--pad));
  padding: 10px var(--pad);
  background: linear-gradient(to right, #00AAFF 0%, #FFA100 25%, #FF0000 50%, #FFA100 75%, #00AAFF 100%);
  color: var(--white);
  margin-top: 32px;
  margin-bottom: 0;
}

/* ── Event type badge ─────────────────────────────────── */
.event-type-badge {
  display: inline-block;
  color: var(--dim);
  white-space: nowrap;
}

/* ── Reading progress bar ────────────────────────────── */
#reading-progress {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #00AAFF 0%, #FFA100 49%, #FF0000 100%);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 150;
  transition: transform 0.1s linear;
}
.admin-bar #reading-progress { top: calc(32px + var(--nav-h)); }

/* ── Single article ──────────────────────────────────── */
/* Featured image rendered as a normal block element at the top of the
   article body. Full body-column width, bordered, with a caption slot. */
.article-featured-image {
  margin: 0 0 32px;
  border: 1px solid var(--rule);
  background: var(--rule);
  overflow: hidden;
}
.article-featured-image img {
  display: block;
  width: 100%;
  height: auto;
}
.single-article {
  padding-bottom: 96px;
}

/* ── Faculty filmstrip page ───────────────────────────── */
.faculty-page {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.faculty-filmstrip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.faculty-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 800ms ease;
  pointer-events: none;
}
.faculty-frame.is-active { opacity: 1; }
.faculty-frame img {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}



/* Center UI — difference blend so logo inverts over images */
.faculty-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  z-index: 5;
  text-align: center;
  mix-blend-mode: difference;
  color: white;
}
.faculty-logo-svg svg {
  width: clamp(120px, 20vw, 240px);
  height: auto;
}
.faculty-tagline {
  letter-spacing: var(--ls);
  text-transform: uppercase;
  font-size: 0.75rem;
  color: white;
}
.faculty-info-btn {
  pointer-events: auto;
  margin-top: 8px;
  padding: 8px 20px;
  border: 1px solid white;
  background: transparent;
  font: inherit;
  color: white;
  font-size: 0.75rem;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  cursor: none;
}

/* Info overlay */
.faculty-overlay {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  overflow-y: auto;
}
.faculty-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.faculty-overlay-close {
  position: fixed;
  top: calc((var(--nav-h) - 30px) / 2);
  right: max(var(--pad), calc(50vw - var(--col) / 2 + var(--pad)));
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--white);
  background: transparent;
  color: transparent;
  cursor: pointer;
  z-index: 10;
  transition: background var(--ease);
}
.admin-bar .faculty-overlay-close { top: calc(32px + (var(--nav-h) - 30px) / 2); }
.faculty-overlay-close::before,
.faculty-overlay-close::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 12px;
  height: 1px;
  background: var(--white);
  transform-origin: center;
}
.faculty-overlay-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.faculty-overlay-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.faculty-overlay-close:hover { background: var(--white); }
.faculty-overlay-close:hover::before,
.faculty-overlay-close:hover::after { background: #0d0d0d; }
/* Hide the menu nav-circle while the info overlay is open so the X sits alone */
body:has(.faculty-overlay.is-open) .site-header .nav-circle { visibility: hidden; }
.faculty-overlay-body {
  max-width: 560px;
  padding: 80px var(--pad);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.faculty-overlay-desc { line-height: var(--lh); }
.faculty-overlay-credits {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faculty-credit-row {
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
}
.faculty-credit-role { color: var(--dim); }
.faculty-issue {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faculty-issue-label {
  font-weight: var(--wt-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--dim);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.faculty-overlay-printer {
  color: var(--dim);
  line-height: var(--lh);
  margin-top: 8px;
}
.faculty-overlay-contributors {
  color: var(--dim);
  line-height: var(--lh);
}

/* ── Chicago Poster Series ───────────────────────────── */
.poster-series-page .home-section-label {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  align-self: start;
}
.poster-series-desc {
  margin-top: 16px;
  color: var(--dim);
  line-height: var(--lh);
}
.poster-grid {
  grid-column: 4 / -1;
  columns: 3;
  column-gap: var(--gap);
}
.poster-item {
  break-inside: avoid;
  margin-bottom: var(--gap);
  position: relative;
}
.poster-item img {
  width: 100%;
  display: block;
}
.poster-author {
  display: block;
  margin-top: 6px;
  color: var(--dim);
  font-size: 0.875rem;
}
@media (max-width: 900px) {
  .poster-grid { columns: 2; }
}

/* ── Mu Radio page ───────────────────────────────────── */
.mu-mixes {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.mu-mix { display: flex; flex-direction: column; gap: 8px; }
.mu-mix-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap);
}
.mu-mix-performer { font-weight: var(--wt-ui); }
.mu-mix-date      { color: var(--dim); white-space: nowrap; }
.mu-mix-embed     { display: block; border: none; width: 100%; height: 120px; }

.mu-submit {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.mu-submit-title { font-size: var(--sz-lg); margin: 0 0 8px; font-weight: var(--wt); }
.mu-submit-intro { color: var(--dim); margin: 0 0 32px; }

.sidebar-btn { margin-top: 16px; }
.sidebar-link { margin-top: 16px; }
.sidebar-link a {
  text-decoration: underline wavy;
  text-decoration-color: #39ff14;
  text-underline-offset: -0.3em;
  text-decoration-skip-ink: none;
  mix-blend-mode: multiply;
  text-decoration-thickness: 4px;
}

.mu-mix-facade {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 60px;
  padding: 0 16px;
  border: 1px solid var(--black);
  border-radius: 4px;
  background: transparent;
  color: var(--black);
  text-align: left;
  font: inherit;
  transition: background var(--ease), color var(--ease);
}
.mu-mix-facade:hover { background: var(--black); color: var(--white); }
.mu-mix-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}
.mu-mix-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.mu-mix-title {
  font-weight: var(--wt-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mu-mix-sub { color: var(--dim); font-size: calc(var(--sz) * 0.85); }
.mu-mix-facade:hover .mu-mix-sub { color: rgba(255,255,255,0.7); }

.article-layout {
  display: grid;
  grid-template-columns: 4fr 7fr 1fr;
  gap: var(--gap);
  align-items: start;
}

/* No-bold rule for all single-post types — strong/b/headings always render at normal weight.
   Body size handled by per-area selectors below; sidebar/meta keeps default --sz. */
.single-article strong, .single-article b,
.single-article h1, .single-article h2, .single-article h3, .single-article h4,
.single-event strong, .single-event b,
.single-event h1, .single-event h2, .single-event h3, .single-event h4,
.single-underscore_episode strong, .single-underscore_episode b,
.single-underscore_episode h1, .single-underscore_episode h2,
.single-underscore_episode h3, .single-underscore_episode h4 { font-weight: var(--wt); }

/* Force uniform large size on the actual body containers — overrides
   Gutenberg has-*-font-size classes and any inline font-size styles. */
.article-body,        .article-body p,        .article-body li,        .article-body span,
.article-body h1,     .article-body h2,       .article-body h3,        .article-body h4,
.article-body .has-small-font-size,
.article-body .has-medium-font-size,
.article-body .has-large-font-size,
.article-body .has-x-large-font-size,
.article-body [style*="font-size"],
.event-description,   .event-description p,   .event-description li,   .event-description span,
.event-description h1, .event-description h2, .event-description h3,   .event-description h4,
.event-description [style*="font-size"],
.event-description .has-small-font-size,
.event-description .has-medium-font-size,
.event-description .has-large-font-size,
.event-speakers,      .event-speakers p,      .event-speakers li,      .event-speakers span,
.episode-description, .episode-description p, .episode-description li, .episode-description span,
.episode-summary,     .episode-summary p,     .episode-summary li,     .episode-summary span,
.episode-transcript,  .episode-transcript p,  .episode-transcript li,  .episode-transcript span,
.transcript-block p:not(.transcript-speaker) { font-size: var(--sz) !important; line-height: var(--lh) !important; }

/* Preserve bold in article body — <strong>/<b> from the editor render
   visibly bold regardless of any global cgdc rule that might otherwise
   flatten font-weight. */
.article-body strong, .article-body b,
.event-description strong, .event-description b,
.episode-description strong, .episode-description b { font-weight: 700; }

/* Tables in body copy (article / event / episode / Block Editor table block).
   Clean grid with bold header row, full-width within the body column.
   Wavy underline is dropped on links inside cells so columns read as
   tabular data, not a sea of green decoration. */
.article-body table,
.article-body .wp-block-table table,
.event-description table,
.episode-description table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: var(--sz);
  line-height: var(--lh);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.article-body table th,
.article-body .wp-block-table th,
.event-description table th,
.episode-description table th {
  text-align: left;
  font-weight: 700;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.article-body table td,
.article-body .wp-block-table td,
.event-description table td,
.episode-description table td {
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.article-body table tr:last-child td,
.article-body .wp-block-table tr:last-child td { border-bottom: 0; }
.article-body table a,
.article-body .wp-block-table a {
  background: transparent !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.article-body table a:hover,
.article-body .wp-block-table a:hover { color: var(--black); }
.article-body .wp-block-table figcaption {
  margin-top: 8px;
  font-size: 0.85em;
  color: var(--dim);
}

.article-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Tag is rendered as <h2> for SEO; keep its visual treatment from before */
.article-meta-category {
  font-size: var(--sz);
  font-weight: var(--wt);
  line-height: var(--lh);
  letter-spacing: 0;
  margin: 0;
  color: var(--dim);
  transition: color var(--ease);
}
.article-meta-category a { color: inherit; }
.article-meta-category:hover { color: var(--black); }

/* "Bold Marks" series — render the label in Euchre Bold so the filled
   circled glyphs (U+1F150-U+1F169 = Acircleblack…Zcircleblack in Euchre)
   read at proper weight, like the okaytype.com Euchre Bold specimen. */
.article-meta-category.is-bold-marks,
.theme-tag.is-bold-marks,
.article-category.is-bold-marks {
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* "Bold Marks" filter button — same flex behavior as the other tags
   (inherited from .theme-tag), just centered horizontally. */
.theme-tag.is-bold-marks {
  justify-content: center;
}

/* Title is rendered as <h1> for SEO; bold + same size as the body meta.
   Specificity bumped so it wins over the global `.single-article h1` rule.
   Title is highlighted by default (fluorescent green) and prefixed with "_". */
.single-article .article-meta-title,
.article-meta-title {
  font-size: var(--sz);
  font-weight: 700;
  line-height: var(--lh);
  letter-spacing: 0;
  margin: 4px 0;
  display: inline;
  background-color: #39ff14;
  padding: 0 0.25em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


/* Decorative rule line above every post title (articles, events, episodes).
   Sits in the meta column above the highlighted title block. */
.post-title-rule {
  display: block;
  letter-spacing: 0.2em;
  font-weight: 900;
  letter-spacing: -1px;
  font-size: var(--sz);
  color: var(--dim);
}

/* ── Image format options (Block Editor styles) ───────────────
   Authors pick these from the block inspector "Styles" panel; the
   class names below match the slugs registered in functions.php
   (register_block_style on core/image and core/figure). */
.is-style-cgdc-img-default img,
.is-style-cgdc-img-default {
  width: 100%;
  height: auto;
  display: block;
  margin: 24px 0;
}
.is-style-cgdc-img-full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
}
.is-style-cgdc-img-full-bleed img {
  width: 100%; height: auto; display: block;
}
.is-style-cgdc-img-breakout {
  width: calc(100% + 12vw);
  margin-left: -6vw;
  margin-right: -6vw;
  max-width: none;
}
.is-style-cgdc-img-breakout img {
  width: 100%; height: auto; display: block;
}
.is-style-cgdc-img-narrow {
  width: 60%;
  margin: 24px auto;
  display: block;
}
.is-style-cgdc-img-narrow img { width: 100%; height: auto; }
.is-style-cgdc-img-side-left {
  float: left;
  width: 45%;
  margin: 8px 24px 16px 0;
  shape-outside: margin-box;
}
.is-style-cgdc-img-side-right {
  float: right;
  width: 45%;
  margin: 8px 0 16px 24px;
  shape-outside: margin-box;
}
@media (max-width: 700px) {
  .is-style-cgdc-img-side-left,
  .is-style-cgdc-img-side-right,
  .is-style-cgdc-img-narrow {
    float: none; width: 100%; margin: 16px 0;
  }
}

/* Pull quote rendered from the article editor. Sits in the body
   column, sets itself off with a thick top + bottom rule, italic
   display-weight type, with optional <cite> attribution below. */
.article-body .cgdc-pullquote {
  margin: 40px 0;
  padding: 32px 0;
  border-top: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  font-family: 'Harriet', 'Euchre', serif;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--black);
}
.article-body .cgdc-pullquote p { margin: 0 0 12px; }
.article-body .cgdc-pullquote p:last-of-type { margin-bottom: 0; }
.article-body .cgdc-pullquote cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-family: 'Euchre', sans-serif;
  font-size: var(--sz);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
}

/* YouTube/Vimeo auto-embed wrapper from the_content filter */
.cgdc-embed {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 24px 0;
  aspect-ratio: 16 / 9;
}
.cgdc-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.article-meta-top    { margin: 0; }
.article-meta-byline { display: flex; flex-direction: column; margin: 0; }
.article-meta-date,
.article-meta-author { color: var(--dim); }

.article-body { grid-column: 2; font-size: var(--sz); line-height: var(--lh); }
.article-body p               { margin-bottom: 1.5em; }
/* Legacy article content uses <div> for paragraphs (and empty <div> as
   separators). Give them paragraph spacing and drop the empty placeholders
   so Q→A and paragraph breaks read correctly. */
.article-body > div            { margin-bottom: 1.5em; }
.article-body > div:empty,
.article-body > p:empty        { display: none; }
/* Top-level <strong> blocks (legacy Q&A markup) read as their own paragraph */
.article-body > strong         { display: block; margin-top: 1.5em; }
.article-body h2,
.article-body h3              { margin: 2.5em 0 0.8em; }
.article-body blockquote      {
  padding-left: 24px;
  margin: 2em 0;
  color: var(--dim);
}
.article-body hr { display: none; }
.article-body a,
.event-description a,
.event-speakers a,
.episode-description a,
.episode-summary a,
.episode-transcript a {
  text-decoration: underline wavy;
  text-decoration-color: #39ff14;
  text-underline-offset: -0.3em;
  text-decoration-skip-ink: none;
  mix-blend-mode: multiply;
  text-decoration-thickness: 4px;
}
.article-body a:hover,
.event-description a:hover,
.event-speakers a:hover,
.episode-description a:hover,
.episode-summary a:hover,
.episode-transcript a:hover { opacity: 0.3; }
.single-article               { overflow-x: clip; }
.article-body img             { display: block; margin: 1em auto; max-width: 100% !important; width: 100%; height: auto; }
.article-body figure,
.article-body .wp-caption {
  max-width: 100% !important;
  width: 100% !important;
  margin: 2em 0;
  border: 1px solid var(--rule);
  background: var(--white);
}
.article-body figure img,
.article-body .wp-caption img { width: 100%; display: block; margin: 0; }
.article-body figure > .cgdc-img-frame,
.article-body .wp-caption > .cgdc-img-frame {
  display: block;
  width: 100%;
  border-radius: 0;
}
.article-body figure > .cgdc-img-frame img,
.article-body .wp-caption > .cgdc-img-frame img {
  width: 100%;
  border-radius: 0;
}
.article-body figcaption,
.article-body .wp-caption-text {
  text-align: left;
  margin: 0;
  padding: 14px 18px;
  border-top: 1px solid var(--rule);
  color: var(--dim);
  font-size: 0.85em;
}
.article-body ul,
.article-body ol              { padding-left: 1.5em; margin-bottom: 1.5em; }
.article-body li              { margin-bottom: 0.4em; }

.article-body iframe:not(.mu-mix-embed),
.event-description iframe:not(.mu-mix-embed) {
  display: block;
  width: min(100%, calc(7/12 * 100vw - 7/12 * var(--gap) * 11));
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 2em auto;
}
.article-body p > iframe,
.event-description p > iframe { display: block; }

.article-author {
  max-width: 640px;
  margin-top: 56px;
  padding: 32px;
  border: 1px solid var(--rule);
}
.article-author-name { margin: 0 0 8px; font-size: var(--sz) !important; line-height: var(--lh) !important; }
.article-author-label { color: var(--dim); font-size: var(--sz) !important; }
.article-author-bio,
.article-author-bio p { font-size: var(--sz) !important; line-height: var(--lh) !important; color: var(--dim); }

/* ── Pullquote (Gutenberg pullquote/quote with CGDC style) ─────────
   Center-aligned text framed by oversized Harriet curly quotes — a
   left-double quote stacked on top, right-double quote on the bottom. */
.article-body .wp-block-pullquote.is-style-cgdc-pull,
.article-body .wp-block-quote.is-style-cgdc-pull,
.article-body blockquote.is-style-cgdc-pull {
  border: none;
  padding: 0;
  margin: 2em auto;
  max-width: 720px;
  text-align: center;
}
.article-body .wp-block-pullquote.is-style-cgdc-pull::before,
.article-body .wp-block-quote.is-style-cgdc-pull::before,
.article-body blockquote.is-style-cgdc-pull::before {
  content: "\201C";
  display: block;
  font-family: 'Harriet', 'Euchre', serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(96px, 12vw, 180px);
  line-height: 0.85;
  color: var(--black);
}
.article-body .wp-block-pullquote.is-style-cgdc-pull::after,
.article-body .wp-block-quote.is-style-cgdc-pull::after,
.article-body blockquote.is-style-cgdc-pull::after {
  content: "\201D";
  display: block;
  font-family: 'Harriet', 'Euchre', serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(96px, 12vw, 180px);
  line-height: 0.4;
  color: var(--black);
}
.article-body .wp-block-pullquote.is-style-cgdc-pull p,
.article-body .wp-block-pullquote.is-style-cgdc-pull blockquote p,
.article-body .wp-block-quote.is-style-cgdc-pull p,
.article-body blockquote.is-style-cgdc-pull p {
  font-size: clamp(28px, 3.4vw, 44px) !important;
  line-height: 1.15 !important;
  font-weight: var(--wt);
  letter-spacing: -0.01em;
  margin: 0 0 0.4em;
  color: var(--black);
  text-align: center;
}
.article-body .wp-block-pullquote.is-style-cgdc-pull cite,
.article-body .wp-block-quote.is-style-cgdc-pull cite,
.article-body blockquote.is-style-cgdc-pull cite {
  display: block;
  font-size: var(--sz) !important;
  font-style: normal;
  color: var(--dim);
  line-height: var(--lh);
  text-align: center;
  margin-top: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: 'Euchre', sans-serif;
}

/* Standard quote (no CGDC pullquote style applied) — left rule, italic. */
.article-body .wp-block-quote:not(.is-style-cgdc-pull),
.article-body blockquote:not(.is-style-cgdc-pull):not(.cgdc-pullquote) {
  border-left: 3px solid var(--black);
  padding: 4px 0 4px 20px;
  margin: 24px 0;
  font-style: italic;
  color: var(--dim);
}
.article-body .wp-block-quote:not(.is-style-cgdc-pull) p,
.article-body blockquote:not(.is-style-cgdc-pull):not(.cgdc-pullquote) p {
  margin: 0 0 0.4em;
}
.article-body .wp-block-quote:not(.is-style-cgdc-pull) cite,
.article-body blockquote:not(.is-style-cgdc-pull):not(.cgdc-pullquote) cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-family: 'Euchre', sans-serif;
  font-size: var(--sz);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
}
.article-author-bio p { margin: 0 0 0.6em; }
.article-author-bio p:last-child { margin-bottom: 0; }
.article-author-link {
  color: inherit;
  text-decoration: underline wavy;
  text-decoration-color: #39ff14;
  text-underline-offset: -0.3em;
  text-decoration-skip-ink: none;
  mix-blend-mode: multiply;
  text-decoration-thickness: 4px;
  transition: opacity var(--ease);
}
.article-author-link:hover { opacity: 0.5; }


/* ── About page ──────────────────────────────────────── */
main.page.page-about { padding-top: 0; }

.about-section-wrap {
  padding-bottom: 64px;
}
.about-section-wrap + .about-section-wrap {
  padding-top: 64px;
}

.about-section-dark {
  background: var(--black);
  color: var(--white);
  border-top-color: transparent;
  border-bottom: none;
}

.about-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: start;
}
.about-row .about-label,
.about-row .sidebar { grid-column: 1 / 4; }
.about-row .about-body  {
  grid-column: 4 / -1;
  display: grid;
  grid-template-columns: subgrid;
  column-gap: var(--gap);
}
.about-row .about-body > *:not(.about-grid-2) { grid-column: 1 / -1; }

.about-label,
.sidebar {
  color: var(--dim);
  position: sticky;
  top: var(--page-top);
  align-self: start;
}
.about-section-dark .about-label,
.about-section-dark .sidebar     { color: rgba(255,255,255,0.45); }

.about-body                { margin-top: 0em; }
.about-body p              { margin-bottom: 1.4em; }
.about-body p:last-child   { margin-bottom: 0; }

.page-about .about-section-wrap:first-child .about-body { grid-column: 4 / 11; }

.page-about .about-section-wrap:first-child .about-body p {
  font-size: var(--sz-lg);
  line-height: 1.5;
}

/* About hero — solid random color background applied via inline
   `--hero-bg` CSS variable on the section. Canvas particle dispersion
   sits over it; text columns sit on the left. Text color (`--hero-fg`)
   is computed in PHP per-bg for WCAG AA contrast. */
.about-section-hero {
  background: var(--hero-bg, #f5e642);
  color: var(--hero-fg, #0d0d0d);
  position: relative;
  overflow: hidden;
}
.about-section-hero,
.about-section-hero .about-hero-text,
.about-section-hero .about-hero-text * {
  color: var(--hero-fg, #0d0d0d);
}
/* Keep the green highlight readable on any bg — it's its own micro-row
   with black text on fluo green, always passes contrast. */
.about-section-hero .hero-2-hl {
  color: #0d0d0d;
}
/* Logo-particle dispersion canvas — JS-driven C silhouette that bleeds
   to the right of the text. Sits above the bg color, below the text. */
.about-hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto; /* allow hover dispersal */
  z-index: 1;
  display: block;
}
/* Constrain hero text to the left half of the body column. The grid
   is anchored to the actual page column 1 (the left padding edge of
   the container), not centered, so "span 6" puts text on the literal
   left half of the screen. */
.about-section-hero .container { position: relative; z-index: 2; }
.about-hero-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: start;
  width: 100%;
}
.about-hero-text {
  grid-column: 1 / span 6;     /* anchored to column 1, spans 6 cols */
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 2;
}
/* "We are Chicago Design" — exactly matches .hero-3-headline on the
   homepage: Harriet Display Light, same font-size clamp, same letter-
   spacing, same white-pill padding via box-decoration-break. */
.about-hero-label,
.about-section-hero .about-hero-label {
  position: static;
  margin: 0 0 12px;
  font-family: 'Harriet', 'Euchre', serif;
  font-size: clamp(24px, 6.4vw, 36px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: clamp(2px, 0.5vw, 5px);
  text-transform: uppercase;
  max-width: none;
}
.about-section-hero .about-hero-label .about-hl {
  background-color: transparent;
  color: inherit;
  padding: 0;
  font-weight: 300;
  text-decoration: underline;
  text-decoration-color: #fff;
  text-decoration-thickness: 40px;
  text-underline-offset: -.5em;
  text-decoration-skip-ink: none;
}
.about-hero-p {
  margin: 0;
  font-size: var(--sz);     /* standard body size for 2nd / 3rd paragraphs */
  line-height: var(--lh);
}
/* First paragraph keeps the bigger 18px size as the intro lede. */
.about-hero-text .about-hero-p:first-of-type {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
}
@media (max-width: 900px) { .about-hero-text { grid-column: 1 / -1; } }

/* About hero — full-vh, padded, with the per-page random bg color from
   the inline `--hero-bg` variable. Text is grid-anchored to col 1. */
.about-section-hero {
  min-height: 100vh;
  padding-top: var(--page-top);
  padding-bottom: 64px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  perspective: 1200px;
  overflow: hidden;
  display: block;
}

/* Floating image particles — drift toward the viewer like Floema */
.about-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  z-index: 0;
}
.about-particle {
  position: absolute;
  width: clamp(50px, 6vw, 100px);
  height: auto;
  opacity: 0;
  filter: grayscale(0.55);
  animation: about-drift 18s linear infinite;
  will-change: transform, opacity;
  transform-origin: center;
}
@keyframes about-drift {
  0%   { transform: translate(-50%, -50%) translateZ(-1600px) scale(0.35); opacity: 0; }
  15%  { opacity: 0.85; }
  85%  { opacity: 0.85; }
  100% { transform: translate(-50%, -50%) translateZ(0) scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .about-particle { animation: none; opacity: 0.25; transform: translate(-50%, -50%); }
}
/* Mobile: skip the depth-perspective animation (which renders particles
   tiny / off-screen on small viewports) and replace with a flat 2D drift
   so the floating images are actually visible. */
@media (max-width: 900px) {
  .about-section-hero { perspective: none; }
  .about-particle {
    width: clamp(80px, 22vw, 160px);
    animation: about-drift-flat 20s ease-in-out infinite;
    opacity: 0.85;
  }
  @keyframes about-drift-flat {
    0%   { transform: translate(-50%, -50%) scale(0.85); opacity: 0; }
    15%  { opacity: 0.85; }
    50%  { transform: translate(-50%, -50%) scale(1) rotate(-1deg); }
    85%  { opacity: 0.85; }
    100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; }
  }
}
.about-section-hero > .container { width: 100%; max-width: var(--col); margin: 0 auto; padding: 0 var(--pad); display: block; }
.about-section-hero .about-label { position: static; }
/* About highlight — plain by default; the hero LABEL opts back into a
   white offset underline below. Body paragraphs intentionally stay flat. */
.about-hl {
  background-color: transparent;
  color: inherit;
  padding: 0;
  margin: 0;
  text-decoration: none;
}
/* Hero page-title styling (about-label) — matches home-hero "chicago design is" feel */
.about-section-hero .about-label,
.connect-hero .about-label {
  font-size: calc(var(--sz-xl));
  font-weight: var(--wt);
  letter-spacing: 0;
  color: var(--black);
  font-weight: 200;
  text-transform: unset;

}
/* Hero text spans the leftmost 6 columns (out of 12) */
.page-about .about-section-wrap.about-section-hero .about-body { grid-column: 1 / span 6; }
.about-section-hero .about-row .about-label { grid-column: 1 / span 6; }

/* "Our commitment" body — narrow to 6 cols, anchored after the label */
.about-section-commitment .about-body { grid-column: 4 / span 6; }

/* Pull-quote section between Commitment and Team — a single 100vh stage
   that toggles between any number of quotes via the nav-box row below.
   All quotes are stacked in the same grid cell; only the .is-active one
   is visible. The author tracks body-size type. Black background, white
   type. */
.about-section-quote {
  position: relative;
  min-height: 100vh;
  padding: 64px 0;
  display: flex;
  align-items: center;
  background: #0d0d0d;
  color: #fff;
  overflow: hidden;
}
/* Big watermark curly quote behind the content. Centered, ~50vh tall.
   Color comes from --black (the per-page random palette color set in
   main.js), so the watermark tint changes on every refresh. Low opacity
   keeps it as decorative texture against the black background. */
.about-section-quote::before {
  content: "\201C";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Harriet', 'Euchre', serif;
  font-weight: 300;
  font-style: normal;
  font-size: 50vh;
  line-height: 0.85;
  color: var(--black);
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.about-section-quote .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  width: 100%;
}
.about-quotes {
  grid-column: 3 / span 8;
  display: grid;
  grid-template-columns: 1fr;
}
.about-quotes > .about-quote { grid-area: 1 / 1; }
.about-quote {
  margin: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}
.about-quote.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease;
}
.about-quote-text {
  font-family: 'Harriet', 'Euchre', serif;
  font-size: clamp(18px, 1.9vw, 26px);
  font-weight: 300;
  line-height: 1.35;
  margin: 0 0 20px;
  color: #fff;
  text-align: center;
}
.about-quote-author {
  display: block;
  font-family: 'Euchre', 'Helvetica Neue', Arial, sans-serif;
  font-style: normal;
  font-size: var(--sz);
  font-weight: var(--wt);
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  text-align: center;
}

/* Quote navigation — row of small boxes under the author. The box for
   the active quote is filled; click any other to swap which quote is
   visible (JS toggles .is-active). Sits in the same 8 cols as the stack. */
.about-quote-nav {
  grid-column: 3 / span 8;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.about-quote-nav-box {
  appearance: none;
  padding: 0;
  cursor: pointer;
}
.about-quote-nav-box {
  display: block;
  width: 14px;
  height: 14px;
  border: 1.5px solid #fff;
  background: transparent;
  transition: background-color var(--ease), transform var(--ease);
}
.about-quote-nav-box:hover { background: rgba(255,255,255,0.45); transform: scale(1.15); }
.about-quote-nav-box.is-active { background: #fff; }
@media (max-width: 900px) {
  .about-section-quote { padding: 48px 0; }
  .about-section-quote .container { grid-template-columns: repeat(4, 1fr); }
  .about-quotes,
  .about-quote-nav { grid-column: 1 / -1; }
}

.about-grid-2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 40px;
  column-gap: var(--gap);
}
.about-grid-2 > *:nth-child(odd)  { grid-column: 1 / 5; }
.about-grid-2 > *:nth-child(even) { grid-column: 6 / 10; }

.about-grid-title { margin-bottom: 4px; }
.about-grid-role  { color: var(--dim); margin-bottom: 6px; }
.about-section-dark .about-grid-role { color: rgba(255,255,255,0.45); }

.about-grid-item p,
.about-team-member p                      { color: var(--dim); margin-top: 6px; }
.about-section-dark .about-team-member p  { color: rgba(255,255,255,0.6); }

/* Barry's bio is matrix-rain glitched but sized at body type and laid
   out in the same nth-child grid cell as everyone else (no grid-column
   override — the .about-grid-2 nth-child rules win). */
.about-team-member.is-matrix p[data-matrix] {
  font-size: var(--sz);
  line-height: var(--lh);
  height: auto;
  overflow: visible;
  font-family: 'Euchre', monospace;
}

.about-ep-link {
  display: inline-block;
  margin-top: 8px;
  color: rgba(255,255,255,0.45);
  text-decoration: underline wavy;
  text-decoration-color: #39ff14;
  text-underline-offset: -0.3em;
  text-decoration-skip-ink: none;
  mix-blend-mode: multiply;
  text-decoration-thickness: 4px;
  transition: color var(--ease);
}
.about-ep-link:hover { color: var(--white); }

.about-join-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 32px 24px;
  min-height: 100%;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
  text-align: center;
  transition: color var(--ease), border-color var(--ease), background-color var(--ease);
}
.about-join-cta-plus {
  font-size: 40px;
  line-height: 1;
  font-weight: 200;
}
.about-join-cta-text {
  font-size: var(--sz);
  line-height: var(--lh);
}
.about-join-cta:hover {
  color: var(--white);
  border-color: var(--white);
  background: rgba(255,255,255,0.04);
}

/* ── Join overlay (lime green, black text) ──────────── */
.cgdc-join-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #c8ff00;
  color: #0d0d0d;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}
.cgdc-join-overlay[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  transition: opacity 280ms ease;
}
.cgdc-join-overlay-close {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid #0d0d0d;
  border-radius: 50%;
  color: #0d0d0d;
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--ease), color var(--ease);
}
.cgdc-join-overlay-close:hover { background: #0d0d0d; color: #c8ff00; }
.cgdc-join-overlay-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 96px 32px 96px;
}
.cgdc-join-overlay-title {
  font-size: var(--sz-lg);
  font-weight: var(--wt);
  line-height: var(--lh);
  margin: 0 0 16px;
}
.cgdc-join-overlay-intro {
  margin: 0 0 48px;
  line-height: var(--lh);
}

/* Form — fields, labels, options all at the regular body size (--sz) */
.cgdc-form { display: flex; flex-direction: column; gap: 32px; font-size: var(--sz); }
.cgdc-form-field { display: flex; flex-direction: column; gap: 8px; }
.cgdc-form-field > label { font-size: var(--sz); opacity: 0.75; }
.cgdc-form-req { opacity: 1; }
.cgdc-form input[type="text"],
.cgdc-form input[type="email"],
.cgdc-form input[type="url"],
.cgdc-form input[type="tel"],
.cgdc-form textarea,
.cgdc-form select {
  font-family: inherit;
  font-size: var(--sz);
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  padding: 12px 14px;
  width: 100%;
  border-radius: 0;
  appearance: none;
}
.cgdc-form input:focus,
.cgdc-form textarea:focus,
.cgdc-form select:focus {
  outline: none;
  border-width: 2px;
  padding: 11px 13px;
}
.cgdc-form textarea { resize: vertical; min-height: 120px; }

.cgdc-form-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 4px;
}
.cgdc-form-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid currentColor;
  cursor: pointer;
  font-size: var(--sz);
  user-select: none;
  transition: background-color var(--ease), color var(--ease);
}
/* Visually hide the actual input but keep it focusable / clickable via the
   surrounding label. (sr-only pattern.) The earlier `pointer-events: none`
   approach broke label-click toggling in some browsers. */
.cgdc-form-option input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.cgdc-form-option:has(input:checked) { background: #0d0d0d; color: #c8ff00; }
/* Fallback for browsers without :has() — JS toggle adds .is-checked */
.cgdc-form-option.is-checked { background: #0d0d0d; color: #c8ff00; }

.cgdc-form-submit {
  align-self: flex-start;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  padding: 12px 32px;
  cursor: pointer;
  margin-top: 16px;
  transition: background-color var(--ease), color var(--ease);
}
.cgdc-form-submit:hover { background: #0d0d0d; color: #c8ff00; }
.cgdc-form-success {
  padding: 16px 20px;
  border: 1px solid currentColor;
}
.cgdc-form-error {
  padding: 16px 20px;
  border: 1px solid #c00;
  color: #c00;
}
.cgdc-form-help {
  margin: -2px 0 0;
  font-size: 13px;
  opacity: 0.6;
  line-height: 1.4;
}

/* ── Form overlay (lime green, black text — matches Join overlay) ── */
.cgdc-form-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #c8ff00;
  color: #0d0d0d;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}
.cgdc-form-overlay.is-open,
.cgdc-form-overlay[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  transition: opacity 280ms ease;
}
.cgdc-form-overlay-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 96px 32px 96px;
  background: transparent;
  border: 0;
  color: inherit;
}
.cgdc-form-overlay-title {
  font-size: var(--sz-lg);
  font-weight: var(--wt);
  line-height: var(--lh);
  margin: 0 0 16px;
}
.cgdc-form-overlay-intro {
  margin: 0 0 48px;
  color: inherit;
  line-height: var(--lh);
  opacity: 0.85;
}
/* Form-overlay close — same position as the nav-overlay close for visual symmetry */
.cgdc-form-overlay-close {
  position: fixed;
  top: calc((var(--nav-h) - 30px) / 2);
  right: max(var(--pad), calc(50vw - var(--col) / 2 + var(--pad)));
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid #0d0d0d;
  border-radius: 50%;
  color: #0d0d0d;
  font-size: 12px;
  cursor: pointer;
  z-index: 2;
  transition: background-color var(--ease), color var(--ease);
}
.cgdc-form-overlay-close:hover { background: #0d0d0d; color: #c8ff00; }
.admin-bar .cgdc-form-overlay-close { top: calc(32px + (var(--nav-h) - 30px) / 2); }
.cgdc-form-overlay-close::before,
.cgdc-form-overlay-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1px;
  background: currentColor;
}
.cgdc-form-overlay-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.cgdc-form-overlay-close::after  { transform: translate(-50%,-50%) rotate(-45deg); }
@media (max-width: 720px) {
  .cgdc-form-overlay-inner { padding: 80px 20px 80px; }
}

/* ── Underscore page ─────────────────────────────────── */
.underscore-archive {
  background: var(--bg);
  min-height: 100vh;
  padding-bottom: 96px;
}

.underscore-archive .container {
  align-items: start;
}

/* ── Articles archive — mirrors underscore layout ───────── */
.articles-archive { min-height: 100vh; }
.articles-archive .container { align-items: start; }


.articles-intro h1   { margin-bottom: 2px; }
.articles-type       { color: var(--dim); margin-bottom: 16px; }
.articles-filters    { margin-top: 32px; }
.articles-filters-label { color: var(--dim); margin-bottom: 10px; font-weight: 700; }
.articles-filter-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.articles-content { grid-column: 4 / -1; padding-bottom: 96px; }

.underscore-intro h1 { margin-bottom: 2px; }
.underscore-type     { color: var(--dim); margin-bottom: 16px; }
.underscore-desc     { margin-bottom: 16px; }

.underscore-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.underscore-links a {
  color: var(--black);
  text-decoration: underline wavy;
  text-decoration-color: #39ff14;
  text-underline-offset: -0.3em;
  text-decoration-skip-ink: none;
  mix-blend-mode: multiply;
  text-decoration-thickness: 4px;
}

.podcast-platforms {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
  color: var(--black);
}
.podcast-platform {
  display: inline-flex;
  align-items: center;
  height: 30px;
  line-height: 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s;
}
.podcast-platform:hover { opacity: 0.6; }
.podcast-platform svg { height: 30px; width: auto; display: block; fill: currentColor; }
.podcast-platform svg path,
.podcast-platform svg rect,
.podcast-platform svg circle,
.podcast-platform svg polygon { fill: currentColor; }

.underscore-search { margin-top: 32px; }
#ep-search {
  width: 100%;
  border: 1px solid currentColor;
  background: transparent;
  padding: 12px 14px;
  font: inherit;
  color: var(--black);
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
#ep-search:focus {
  border-width: 2px;
  padding: 11px 13px;
}
#ep-search::placeholder { color: var(--dim); }
#ep-search::-webkit-search-cancel-button { cursor: pointer; }

.ep-no-results {
  display: none;
  grid-column: 1 / -1;
  color: var(--dim);
  padding: 16px 0;
}
.ep-no-results.is-visible { display: block; }

.underscore-themes,
.prog-filters            { margin-top: 32px; }
.underscore-themes-label,
.prog-filters-label      { color: var(--dim); margin-bottom: 10px; }
.prog-filter-tags        { display: flex; flex-wrap: wrap; gap: 6px; }

.underscore-theme-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.theme-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--black);
  background: transparent;
  color: var(--black);
  padding: 4px 10px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.theme-tag:hover,
.theme-tag.is-active {
  background: var(--black);
  color: var(--white);
}
.theme-tag-count {
  font-size: 0.75em;
  opacity: 0.3;
  margin: 0;
}

.ep-hidden { display: none !important; }

.underscore-results {
  grid-column: 4 / -1;
}
.underscore-results-bar {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  margin-bottom: 24px;
}
.underscore-results-label {
  font-size: var(--sz);
  font-weight: var(--wt);
  color: var(--black);
}
.underscore-results-meta {
  font-size: var(--sz);
  color: var(--dim);
}
.underscore-grid {
  grid-column: 4 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

.ep-card       { display: block; color: var(--black); transition: opacity var(--ease); position: relative; }
.ep-card:hover { opacity: 0.7; }

.ep-card img,
.ep-thumb-placeholder {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: rgba(0,0,0,0.08);
}
.ep-transcript-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ep-card-tags {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ep-card-tag {
  background: var(--white);
  color: var(--black);
  font-size: 0.65em;
  padding: 2px 6px;
  line-height: 1.4;
}

/* ── Connect page ────────────────────────────────────── */
main.page.page-connect { padding-top: 0; }
.page-connect { padding-bottom: 96px; }
.page-connect .page-header { padding-top: 0; }
.page-connect .connect-label,
.page-connect .connect-section p { line-height: 2.1; }

/* Connect hero — mirrors about-section-hero (full-vh, centered, label/body row) */
.connect-hero {
  display: flex;
  align-items: center;
  padding-top: var(--page-top);
  padding-bottom: 48px;
}
.connect-hero > .container { width: 100%; }
.connect-hero .about-label,
.connect-hero .about-body p { line-height: 2.1; }
/* Match About hero: label + body both anchored left, spanning 6 of 12 */
.connect-hero .about-row .about-label { grid-column: 1 / span 6; }
.connect-hero .about-body             { grid-column: 1 / span 6; }
.connect-hero .about-body p { font-size: var(--sz-lg); }
.connect-hero .about-label  { position: static; }

.connect-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  margin-top: 40px;
}

.connect-section {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  height: 280px;
  color: var(--black);
  transition: transform 0.3s ease;
  text-decoration: none;
  cursor: pointer;
}
.connect-section:hover { transform: rotate(0) scale(1.02) !important; z-index: 1; text-decoration: none; }

/* CTA arrow pinned to the bottom-right of each card */
.connect-section::after {
  content: '→';
  display: block;
  margin-top: auto;
  align-self: flex-end;
  font-size: var(--sz-lg);
  font-weight: var(--wt);
  color: inherit;
  transition: transform var(--ease);
}
.connect-section:hover::after { transform: translateX(4px); }
/* Social card has chip buttons, not a single CTA — skip the arrow */
.connect-section--social::after { content: none; }
/* Each box gets a slight unique rotation */
.connect-section:nth-child(7n+1) { transform: rotate(-1.4deg); }
.connect-section:nth-child(7n+2) { transform: rotate(0.8deg); }
.connect-section:nth-child(7n+3) { transform: rotate(-0.6deg); }
.connect-section:nth-child(7n+4) { transform: rotate(1.6deg); }
.connect-section:nth-child(7n+5) { transform: rotate(-0.9deg); }
.connect-section:nth-child(7n+6) { transform: rotate(0.4deg); }
.connect-section:nth-child(7n)   { transform: rotate(-1.1deg); }

/* Social card — outlined, no fill (overrides palette nth-child) */
.connect-section.connect-section--social,
body.page-connect .connect-section.connect-section--social {
  background: transparent !important;
  border: 1px solid currentColor;
  color: var(--black);
}
body.page-connect .connect-section.connect-section--social { color: #ffffff; }
.connect-section--social .connect-links { gap: 12px; }
.connect-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: var(--sz);
  text-decoration: none;
  color: #0d0d0d;
  transition: opacity var(--ease);
}
.connect-chip:hover { opacity: 0.75; }
/* Each chip gets a different palette color */
.connect-chip:nth-child(6n+1) { background: #f5e642; color: #0d0d0d; }
.connect-chip:nth-child(6n+2) { background: #b91c1c; color: #ffffff; }
.connect-chip:nth-child(6n+3) { background: #c8ff00; color: #0d0d0d; }
.connect-chip:nth-child(6n+4) { background: #6ee7ff; color: #0d0d0d; }
.connect-chip:nth-child(6n+5) { background: #ff66cc; color: #0d0d0d; }
.connect-chip:nth-child(6n)   { background: #1d4ed8; color: #ffffff; }
.connect-section--social .connect-links li:nth-child(6n+1) .connect-chip { background: #f5e642; color: #0d0d0d; }
.connect-section--social .connect-links li:nth-child(6n+2) .connect-chip { background: #b91c1c; color: #ffffff; }
.connect-section--social .connect-links li:nth-child(6n+3) .connect-chip { background: #c8ff00; color: #0d0d0d; }
.connect-section--social .connect-links li:nth-child(6n+4) .connect-chip { background: #6ee7ff; color: #0d0d0d; }
.connect-section--social .connect-links li:nth-child(6n+5) .connect-chip { background: #ff66cc; color: #0d0d0d; }
.connect-section--social .connect-links li:nth-child(6n)   .connect-chip { background: #1d4ed8; color: #ffffff; }
/* Rotating CGDC palette per box */
.connect-section:nth-child(8n+1) { background: #f5e642; color: #0d0d0d; }
.connect-section:nth-child(8n+2) { background: #b91c1c; color: #ffffff; }
.connect-section:nth-child(8n+3) { background: #c8ff00; color: #0d0d0d; }
.connect-section:nth-child(8n+4) { background: #6ee7ff; color: #0d0d0d; }
.connect-section:nth-child(8n+5) { background: #ff66cc; color: #0d0d0d; }
.connect-section:nth-child(8n+6) { background: #0d0d0d; color: #ffffff; }
.connect-section:nth-child(8n+7) { background: #f5f5f3; color: #0d0d0d; }
.connect-section:nth-child(8n)   { background: #1d4ed8; color: #ffffff; }

/* Title at top, copy in middle, link at bottom */
.connect-section .connect-label {
  font-size: var(--sz);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
  padding: 0 0 10px;
  margin: 0;
  position: relative;
}
/* Wavy rule below the heading — drawn via SVG mask so it inherits currentColor */
.connect-section .connect-label::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 4' preserveAspectRatio='none'><path d='M0 2 Q 3 0 6 2 T 12 2' fill='none' stroke='black' stroke-width='1.5'/></svg>") repeat-x;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 4' preserveAspectRatio='none'><path d='M0 2 Q 3 0 6 2 T 12 2' fill='none' stroke='black' stroke-width='1.5'/></svg>") repeat-x;
  -webkit-mask-size: 14px 4px;
          mask-size: 14px 4px;
}
.connect-section .connect-label .about-hl,
.connect-section p .about-hl { background: transparent; color: inherit; padding: 0; margin: 0; }
.connect-section p { margin: 0; flex: 1; line-height: var(--lh); color: inherit; font-size: var(--sz); }
.connect-section a { color: inherit; }
.connect-section p a {
  display: inline-block;
  margin-top: 4px;
  font-weight: var(--wt);
  text-decoration: underline wavy;
  text-decoration-color: currentColor;
  text-decoration-thickness: 4px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: auto;
  transition: opacity var(--ease);
}
.connect-section p a:hover { opacity: 0.6; }

/* Social links — inline row inside the card */
.connect-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.connect-links li { display: inline; }
.connect-links a       { color: inherit; transition: opacity var(--ease); }
.connect-links a:hover { opacity: 0.6; }

@media (max-width: 900px) {
  .connect-grid    { grid-template-columns: repeat(2, 1fr); }
  .connect-section { grid-column: span 1; min-height: 0; padding: 20px; }
}
@media (max-width: 540px) {
  .connect-grid    { grid-template-columns: 1fr; }
}

/* ── /AI page — tools built with AI ───────────────────── */
.page-ai .ai-hero { min-height: 60vh; }
.page-ai .ai-hero .about-body p { font-size: var(--sz-lg); line-height: var(--lh); max-width: 540px; }

.ai-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 32px;
  column-gap: var(--gap);
}
.ai-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  gap: var(--gap);
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  color: var(--black);
  text-decoration: none;
  transition: opacity var(--ease);
}
.ai-card:hover { opacity: 0.7; }
.ai-card-mark {
  grid-column: 1 / 4;
  aspect-ratio: 1 / 1;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.ai-card-mark-text {
  font-family: ui-monospace, "SF Mono", Menlo, "Courier New", monospace;
  font-size: clamp(20px, 3.2vw, 36px);
  letter-spacing: 0.04em;
}
.ai-card-body {
  grid-column: 4 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.ai-card-status {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--rule);
  padding: 3px 8px;
  border-radius: 999px;
}
.ai-card-title {
  margin: 0;
  font-size: var(--sz-lg);
  font-weight: var(--wt);
  line-height: var(--lh);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.ai-card-tagline {
  margin: 0;
  color: var(--dim);
  font-size: var(--sz);
}
.ai-card-desc {
  margin: 6px 0 0;
  max-width: 520px;
  line-height: var(--lh);
}
.ai-card-cta-btn {
  align-self: flex-start;
  margin-top: 16px;
  font: inherit;
  font-size: var(--sz);
  background: var(--black);
  color: var(--white);
  border: 0;
  padding: 12px 24px;
  cursor: pointer;
  border-radius: 999px;
  transition: opacity var(--ease);
}
.ai-card-cta-btn:hover { opacity: 0.8; }

/* Fullscreen tool iframe overlay */
.ai-tool-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0f1115;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.ai-tool-overlay[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  transition: opacity 220ms ease;
}
.ai-tool-overlay-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #1a1d24;
  border-bottom: 1px solid #2a2f3a;
  color: #e6e8ee;
}
.ai-tool-overlay-name {
  font: 13px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.04em;
  color: #8a93a6;
}
.ai-tool-overlay-close {
  font: 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: transparent;
  border: 1px solid #2a2f3a;
  color: #e6e8ee;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ai-tool-overlay-close:hover { background: #2a2f3a; border-color: #3a3f4a; }
.ai-tool-overlay-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #0f1115;
  display: block;
}

/* Standalone tool page (e.g. /ai/cgdc_01/) — fills the viewport below the nav */
.page-tool { padding: 0 !important; }
.page-tool .tool-frame {
  display: block;
  width: 100%;
  height: calc(100vh - var(--nav-h));
  border: 0;
  background: #0f1115;
}

/* Mobile: stack mark above body */
@media (max-width: 900px) {
  .ai-card { grid-template-columns: 1fr; }
  .ai-card-mark { grid-column: 1 / -1; max-width: 120px; }
  .ai-card-body { grid-column: 1 / -1; }
}

/* ── Connect page — fully inverted color scheme ──────────────── */
html:has(body.page-connect),
body.page-connect {
  background-color: #0d0d0d;
  color: #ffffff;
  --black: #ffffff;
  --white: #0d0d0d;
  --dim:   rgba(255,255,255,0.55);
  --rule:  rgba(255,255,255,0.18);
  --bg:    #0d0d0d;
}
body.page-connect .site-header,
body.page-connect .site-footer { background-color: #0d0d0d; color: #ffffff; }
body.page-connect .site-header a,
body.page-connect .site-footer a,
body.page-connect main a { color: inherit; }
body.page-connect .site-header svg,
body.page-connect .site-footer svg { color: #ffffff; }
/* Inputs / form fields */
body.page-connect input[type="text"],
body.page-connect input[type="email"],
body.page-connect input[type="url"],
body.page-connect textarea,
body.page-connect select {
  background: #0d0d0d;
  color: #ffffff;
  border-color: rgba(255,255,255,0.18);
}
body.page-connect input::placeholder,
body.page-connect textarea::placeholder { color: rgba(255,255,255,0.4); }
/* Buttons / pill CTAs flip black-on-white → white-on-black inverse */
body.page-connect .btn-pill,
body.page-connect button[type="submit"],
body.page-connect .ai-card-cta-btn {
  background: #ffffff; color: #0d0d0d; border-color: #ffffff;
}

/* ── Archive filters (articles) ──────────────────────── */
.archive-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.filter-btn {
  padding: 4px 12px;
  border: 1px solid var(--rule);
  color: var(--dim);
  cursor: pointer;
  transition: all var(--ease);
  font-family: var(--f);
}
.filter-btn:hover,
.filter-btn.active { background: var(--black); border-color: var(--black); color: var(--white); }

/* ── Generic page ────────────────────────────────────── */
.generic-page { padding-bottom: 96px; }
.page-content { max-width: 720px; }
.page-content p                    { margin-bottom: 1.4em; }
.page-content h2, .page-content h3 { margin: 2em 0 0.8em; }

/* ── Single event ────────────────────────────────────── */
.single-event { padding-bottom: 96px; }

.event-sidebar {
  grid-column: 1 / 4;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: fixed;
  top: var(--page-top);
  left: max(var(--pad), calc(50vw - var(--col) / 2 + var(--pad)));
  width: calc(3 * (min(100vw, var(--col)) - 2 * var(--pad) - 11 * var(--gap)) / 12 + 2 * var(--gap));
  max-height: calc(100vh - var(--page-top) - 32px);
  overflow-y: auto;
}

/* Back-arrow buttons: Euchre's outlined circled-left-arrow glyph
   (`arrowleft.circle`), reached by ss06 substitution on the literal
   "(←)" sequence (the parens are the chaining trigger; the font
   collapses them to invisible paren.nil glyphs after substitution).
   `line-height: 1.4` keeps the circle from clipping at the top —
   circled glyphs in Euchre extend slightly above cap height. */
.event-back,
.episode-back,
.article-back a {
  display: inline-block;
  font-size: 32px;
  line-height: 1.4;
  font-weight: 500;
  font-stretch: 85%;
  font-feature-settings: "ss06" 1;
  -webkit-font-feature-settings: "ss06" 1;
  margin-bottom: 16px;
  text-decoration: none;
  transition: opacity var(--ease);
}
.event-back:hover,
.episode-back:hover,
.article-back a:hover { opacity: 0.6; }
/* Event sidebar — two tight, br-separated clusters: top (status/tag/title)
   and info (date/time/location). All children use box-sizing border-box
   with zero margin/padding so lines stack tight. */
.event-meta-top,
.event-meta-info {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: var(--lh);
}
.event-meta-top      { margin-bottom: 24px; }
.event-meta-info     { margin: 0 0 24px; }
.event-meta-top *,
.event-meta-info * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.event-status-label,
.event-category      { display: inline; }
/* Title is an H1 for SEO but sized like body copy; highlight wraps the
   text only, not the full sidebar row. */
.event-title         {
  display: inline;
  font-size: var(--sz);
  font-weight: 700;
  line-height: var(--lh);
}
/* When event-title carries the .article-meta-title green highlight, scope
   the background to inline text so it doesn't fill the column width. */
.event-title.article-meta-title {
  background-color: #39ff14;
  padding: 0 0.25em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-weight: 700;
}
.event-meta-val      { display: block; }
.event-register-link { display: inline-block; margin-top: 16px; }

.event-hero-image {
  grid-column: 4 / -1;
  grid-row: 1;
  overflow: hidden;
}
.event-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-description {
  grid-column: 4 / -1;
  max-width: 640px;
  margin-top: 48px;
  font-size: var(--sz);
  line-height: var(--lh);
}
.event-description p   { margin-bottom: 1.4em; }
.event-description img { display: block; margin: 2em auto; max-width: 100%; width: 100%; }

.event-speakers {
  grid-column: 4 / -1;
  max-width: 640px;
  margin-top: 56px;
  padding: 32px;
  border: 1px solid var(--rule);
}
.event-speakers-label { color: var(--dim); margin-bottom: 24px; }
.event-speaker        { margin-bottom: 28px; }
.event-speaker:last-child { margin-bottom: 0; }
.event-speaker-name   { margin-bottom: 6px; }
.event-speaker-name a { border-bottom: 0; }
.event-speaker-bio    { color: var(--dim); margin: 0; }
.event-speaker-name a {
  text-decoration: underline wavy;
  text-decoration-color: #39ff14;
  text-underline-offset: -0.3em;
  text-decoration-skip-ink: none;
  mix-blend-mode: multiply;
  text-decoration-thickness: 4px;
}
.event-speaker-bio    { line-height: var(--lh); }

.event-credits {
  grid-column: 4 / -1;
  max-width: 640px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  color: var(--dim);
  font-size: 0.85em;
  line-height: var(--lh);
  white-space: pre-line;
}
.event-credits a {
  text-decoration: underline wavy;
  text-decoration-color: #39ff14;
  text-underline-offset: -0.3em;
  text-decoration-skip-ink: none;
  mix-blend-mode: multiply;
  text-decoration-thickness: 4px;
}

/* ── Sidebar (unified left rail) ─────────────────────── */
.sidebar {
  position: fixed;
  top: var(--page-top);
  left: max(var(--pad), calc(50vw - var(--col) / 2 + var(--pad)));
  width: calc(3 * (min(100vw, var(--col)) - 2 * var(--pad) - 11 * var(--gap)) / 12 + 2 * var(--gap));
  max-height: calc(100vh - var(--page-top) - 32px);
  overflow-y: auto;
}
.admin-bar .sidebar { top: calc(var(--page-top) + 32px); }
.sidebar-title { margin: 0 0 8px; line-height: 1.2; font-weight: 700; }
.sidebar-desc  { color: var(--dim); line-height: 1.6; margin: 0 0 20px; }

/* ── Single episode ──────────────────────────────────── */
.single-episode { padding-bottom: 96px; }

.episode-layout {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--gap);
  align-items: start;
}

.episode-sidebar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

/* episode-back styles consolidated above with .event-back / .article-back a */
.episode-label      { display: block; margin-bottom: 4px; color: var(--dim); }
.episode-label-mark { display: block; margin: 0 0 8px; color: var(--black); }
.episode-label-mark svg { display: block; width: clamp(100px, 14vw, 160px); height: auto; }
.sidebar-mark       { display: block; margin: 0 0 16px; color: var(--black); }
.sidebar-mark svg   { display: block; width: 100%; max-width: 220px; height: auto; }

/* Global lazy / blur-up loading effect. JS adds .is-loaded once the
   image's load event fires (see main.js). Until then, the image is
   semi-transparent and blurred — when it's loaded, blur lifts and
   opacity rises so the sharp image fades in cleanly.
   Particles + hero-slides + any [data-no-fade] are excluded so their
   own animations aren't overridden. */
img:not(.about-particle):not(.hero-slide):not([data-no-fade]) {
  opacity: 0;
  filter: blur(14px);
  transform: scale(1.02);   /* hides blur edge bleed */
  transition: opacity 500ms ease, filter 600ms ease, transform 600ms ease;
}
img:not(.about-particle):not(.hero-slide):not([data-no-fade]).is-loaded {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.episode-title      { line-height: 1.15; margin-bottom: 16px; }
.episode-meta-val   { display: block; color: var(--dim); }
.episode-listen-btn { display: inline-block; margin-top: 16px; }
.episode-sidebar-art { width: 100%; margin-top: 32px; display: block; opacity: 0.35; filter: grayscale(30%); }

.episode-main {
  grid-column: 5 / -1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.episode-portrait img {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.episode-description { max-width: 640px; margin-top: 48px; line-height: 1.7; font-size: calc(var(--sz) * 1.25); }
.episode-description p { margin: 0 0 12px; }
.episode-description a {
  color: inherit;
  text-decoration: underline wavy;
  text-decoration-color: #39ff14;
  text-underline-offset: -0.3em;
  text-decoration-skip-ink: none;
  mix-blend-mode: multiply;
  text-decoration-thickness: 4px;
}
.episode-summary { max-width: 640px; margin-top: 24px; line-height: 1.7; color: var(--dim); }
.episode-spotify-embed { display: block; max-width: 640px; border-radius: 12px; border: none; margin: 24px 0; }
.episode-transcript { max-width: 640px; margin-top: 0; font-size: calc(var(--sz) * 1.25); }
.episode-transcript-rule { border: none; border-top: 1px solid var(--rule); margin: 10px 0 20px 0; }
.episode-transcript-soon {
  max-width: 640px;
  margin: 24px 0 0;
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: transparent;
  text-align: center;
  color: var(--dim);
  font-size: var(--sz);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.episode-transcript-soon p { margin: 0; }
.transcript-block { margin-bottom: 24px; }
.transcript-speaker { color: var(--black); margin-bottom: 4px; font-size: var(--sz) !important; font-weight: 700; }
.transcript-time { opacity: 0.45; font-size: 0.85em; }
.transcript-block p:not(.transcript-speaker) { line-height: 1.7; margin-bottom: 0.5em; }
.transcript-block p:not(.transcript-speaker):last-child { margin-bottom: 0; }

/* ── Footer ──────────────────────────────────────────── */
.site-footer {
  background: transparent;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--black);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.footer-inner p { margin: 0; }

.footer-social         { display: flex; gap: 24px; margin-top: 10px; }
.footer-social a       { color: inherit; transition: opacity var(--ease); }
.footer-social a:hover { opacity: 0.4; }

.footer-time {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-clock {
  width: 75px;
  height: 75px;
  opacity: 0.7;
}

/* ── Image frames ────────────────────────────────────── */
.cgdc-img-frame {
  display: inline-block;
  position: relative;
  line-height: 0;
  border-radius: 0px;
  overflow: hidden;
}
.cgdc-img-frame img {
  display: block;
  border-radius: 0px;
}

/* ── Dark mode ───────────────────────────────────────── */

/* ── Underscore episode — yellow background ──────────── */
.single-underscore { background: #f5e642; }
.single-underscore .article-meta-category,
.single-underscore .article-meta-date,
.single-underscore .article-meta-author,
.single-underscore .article-back a { color: rgba(0,0,0,0.5); }
.single-underscore .article-body a  { border-bottom-color: var(--black); }
.single-underscore .article-tags    { border-top-color: rgba(0,0,0,0.15); }
.single-underscore .article-tag     { border-color: rgba(0,0,0,0.2); color: var(--black); }
.single-underscore .article-back    { border-top-color: rgba(0,0,0,0.15); }

/* ── Grid overlay ────────────────────────────────────── */
#grid-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 36px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--black);
  border-radius: 999px;
  background: var(--white);
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease);
}
.grid-toggle-knob {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--black);
  transform: translateY(-50%);
  transition: left var(--ease), background-color var(--ease);
}
#grid-toggle.is-active { background: var(--black); border-color: var(--black); }
#grid-toggle.is-active .grid-toggle-knob { left: calc(100% - 16px); background: var(--white); }

#grid-overlay-shout {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
  font-size: clamp(80px, 18vw, 280px);
  font-weight: var(--wt);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--black);
  mix-blend-mode: multiply;
}
#grid-overlay-shout.is-visible {
  opacity: 0.08;
  visibility: visible;
  transition: opacity 280ms ease;
}

#grid-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  left: 0; right: 0;
  padding: 0 var(--pad);
  box-sizing: border-box;
}
#grid-overlay.is-visible {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
#grid-overlay .grid-col {
  height: 100vh;
  background: rgba(0, 100, 255, 0.06);
  border-left: 1px solid rgba(0, 100, 255, 0.15);
  border-right: 1px solid rgba(0, 100, 255, 0.15);
}

/* ── Scroll fade-in ──────────────────────────────────── */
.home-section-label,
.home-row .home-row-left,
.home-row .home-row-date {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.home-section-label.is-visible,
.home-row.is-visible .home-row-left,
.home-row.is-visible .home-row-date {
  opacity: 1;
  transform: none;
}

/* ── Utility ─────────────────────────────────────────── */
.no-events { padding: 48px 0; color: var(--dim); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  /* Collapse the "large" body size to regular on mobile — every rule using
     var(--sz-lg) automatically scales down. */
  :root { --sz-lg: var(--sz); }

  /* 12-col on desktop → 4-col on mobile. Existing rules using `grid-column: 1 / -1`
     still mean "span the full row" — that works under any column count. */
  .container,
  .grid                 { grid-template-columns: repeat(4, 1fr); }
  .container > *        { grid-column: 1 / -1; }

  /* Un-stick every sticky sidebar/label on mobile so they don't float over content */
  .sidebar,
  .event-sidebar,
  .article-meta,
  .prog-sidebar,
  .home-section-label,
  .about-label,
  .poster-series-page .home-section-label {
    position: static;
    top: auto;
  }

  /* Grid overlay: match the real 4-col mobile grid */
  #grid-overlay.is-visible             { grid-template-columns: repeat(4, 1fr); }
  #grid-overlay .grid-col:nth-child(n+5) { display: none; }
  .programs-grid        { grid-template-columns: 1fr; }
  .about-programs       { grid-template-columns: 1fr; }
  .about-row            { grid-template-columns: 1fr; gap: 16px; }
  .about-row .about-label,
  .about-row .sidebar   { grid-column: 1 / -1; position: static; }
  .about-row .about-body { grid-column: 1 / -1; }
  /* Hero body — desktop forces it to cols 4/11 with higher specificity; override here */
  .page-about .about-section-wrap:first-child .about-body { grid-column: 1 / -1; }
  /* All body/label text spans full mobile width — never narrow text columns on mobile */
  .page-about .about-section-wrap.about-section-hero .about-body,
  .about-section-hero .about-row .about-label,
  .connect-hero .about-row .about-label,
  .connect-hero .about-body,
  .about-section-commitment .about-body { grid-column: 1 / -1; }
  .about-grid-2         { grid-template-columns: 1fr; }
  /* Stack 2-col items (team profiles, what-we-do) full width on mobile */
  .about-grid-2 > *:nth-child(odd),
  .about-grid-2 > *:nth-child(even) { grid-column: 1 / -1; }
  /* Exception: Acknowledgements stays 2-up on mobile (names side by side) */
  .about-section-acknowledgements .about-grid-2 {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap);
  }
  .about-section-acknowledgements .about-grid-2 > *:nth-child(odd),
  .about-section-acknowledgements .about-grid-2 > *:nth-child(even) { grid-column: auto; }
  .connect-label        { padding-top: 0; }
  .event-card,
  .event-row,
  .list-event-row       { grid-template-columns: 1fr; gap: 4px; }
  .event-card-meta,
  .event-row-location,
  .list-event-location  { display: none; }
  .article-layout       { grid-template-columns: 1fr; }
  .article-meta         { position: static; width: auto; max-height: none; border-bottom: 1px solid var(--rule); padding-bottom: 24px; margin-bottom: 8px; }
  .article-body         { grid-column: auto; }

  /* Hero 2 — stack inner / photo / text-col on small screens */
  .hero-2-photo,
  .hero-2-text-col      { grid-row: auto; grid-column: 1 / -1; }
  .hero-2-photo         { max-width: none; margin: 24px 0 0; }
  .hero-2-text-col      { margin: 24px 0 0; }
  .hero-2-text          { font-size: 22px; letter-spacing: 0.12em; }
  .hero-2-prefix,
  .hero-2-rest          { display: block; }
  .site-hero.hero-2     { padding: var(--page-top) 0 48px; }
}

@media (max-width: 768px) {
  .sidebar,
  .event-sidebar { position: static; width: auto; max-height: none; grid-column: 1 / -1; grid-row: auto; }
  .event-hero-image { grid-column: 1 / -1; grid-row: auto; }
  .event-description,
  .event-speakers,
  .event-credits    { grid-column: 1 / -1; }
  .episode-main     { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .site-nav      { display: none; }
  .site-nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    background: var(--white);
    padding: 20px var(--pad);
    border-bottom: 1px solid var(--rule);
    gap: 16px;
  }
  .nav-toggle        { display: flex; }
  .article-row       { grid-template-columns: 1fr; }
  .article-row-right { display: none; }
  .underscore-grid   { grid-template-columns: 1fr 1fr; }
  .cal-cell          { min-height: 52px; padding: 4px; }
  .cal-chip-title    { display: none; }
  .team-member       { grid-template-columns: 1fr; }
  .team-member-photo { display: none; }
}

/* ── Call For Values ─────────────────────────────────── */
.call-for-values-page .sidebar p { margin: 0 0 10px; line-height: 1.45; }

/* Sidebar lockup — AHA logo (already includes CGDC) in a black box, white */
.cfv-header {
  display: inline-flex;
  align-items: center;
  margin-bottom: 24px;
  padding: 18px 22px;
  background: #0d0d0d;
}
.cfv-header svg { display: block; height: 30px; width: auto; }
.cfv-header svg path { fill: #fff !important; }
.vp-series-desc { color: var(--dim); font-size: 13px; margin-top: 16px; line-height: 1.6; }
.value-posters-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.value-poster-card { display: flex; flex-direction: column; }
.vp-card-img { position: relative; overflow: hidden; }
.vp-card-img img { width: 100%; display: block; }
.vp-expand {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.85);
  border: none;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms;
  padding: 6px;
}
.vp-card-img:hover .vp-expand { opacity: 1; }
.vp-expand svg { width: 100%; height: 100%; }
.vp-card-info { padding: 8px 0 4px; display: flex; flex-direction: column; gap: 2px; }
.vp-value  { font-size: 12px; line-height: 1.4; }
.vp-author { font-size: 11px; color: var(--dim); }

/* Lightbox */
#vp-lightbox {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms;
}
#vp-lightbox.is-open { opacity: 1; pointer-events: all; }
#vp-lb-inner {
  display: flex;
  gap: 48px;
  max-width: 1100px;
  width: 90%;
  align-items: flex-start;
  max-height: 90vh;
}
#vp-lb-img {
  max-height: 85vh;
  max-width: 55%;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
#vp-lb-text {
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
  overflow-y: auto;
  max-height: 85vh;
}
#vp-lb-value       { font-size: 20px; line-height: 1.3; margin: 0; }
#vp-lb-author      { color: rgba(255,255,255,0.5); margin: 0; }
#vp-lb-description { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.75); margin: 8px 0 0; }
#vp-lb-close {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 8px;
  opacity: 0.7;
  transition: opacity 150ms;
}
#vp-lb-close:hover { opacity: 1; }
#vp-lb-close svg { width: 100%; height: 100%; }

/* ── 404 ─────────────────────────────────────────────── */
main.page.page-404 {
  padding: 0;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.page-404::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.page-404-inner {
  position: relative;
  width: 100%;
  max-width: none;
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.page-404-title {
  font-size: clamp(28px, 8vw, 120px);
  line-height: 1;
  font-weight: var(--wt);
  letter-spacing: -0.02em;
  color: var(--white);
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
.page-404-cta {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--white);
  color: var(--white);
  background: transparent;
  white-space: nowrap;
  transition: all var(--ease);
}
.page-404-cta:hover { background: var(--white); color: var(--black); }

/* ── Form success state (replaces the form inside the overlay after a
   successful submit; the cgdc_sent query arg flips the overlay into
   .is-success). Standalone /thank-you/ page also reuses the same look. */
.thank-you-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thank-you-page .container {
  display: block;
  text-align: center;
}
.thank-you-inner,
.cgdc-form-success {
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 0;
  text-align: center;
}
.thank-you-headline,
.cgdc-form-success-headline {
  font-family: 'Harriet', 'Euchre', serif;
  font-size: clamp(28px, 4.5vw, 56px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: clamp(0.5px, 0.2vw, 1.5px);
  margin: 0 0 40px;
  color: var(--black);
}
.thank-you-sig,
.cgdc-form-success-sig {
  font-family: 'Harriet', 'Euchre', serif;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--dim);
  margin: 0;
}

/* ── WordPress core ──────────────────────────────────── */
.admin-bar .site-header { top: 32px; }
.wp-caption             { max-width: 100%; }
.wp-caption-text        { color: #989897; margin-top: 8px; text-align: center; }
.aligncenter            { display: block; margin: 0 auto; }
.alignleft              { float: left; margin-right: 24px; }
.alignright             { float: right; margin-left: 24px; }

/* ── Homepage-only overrides: transparent header so the hero (already
   pulled to top:0 via padding-top:0 above) shows through, and the
   "Chicago Graphic Design Club" headline renders as plain white type
   instead of the black pill. */
body.home .site-header { background: transparent; }
body.home .hero-3-headline .hero-3-headline-hl {
  background: #0d0d0d;
  color: #fff !important;
  padding: 5px 12px 4px;
}
/* Logo + menu circle invert against whatever the vortex puts behind them. */
body.home .site-logo,
body.home .nav-circle {
  mix-blend-mode: difference;
}