/* ==========================================================================
   The Intersection
   style.css
   Palette and type tokens up top. Everything below derives from them.
   ========================================================================== */

:root {
  /* Palette */
  --pink:   #FE05B5;
  --yellow: #FFCA05;
  --blue:   #1B3BFF;
  --green:  #00E05A;

  /* Darker pink, used wherever white text sits on pink.
     Full-strength pink with white fails contrast at 3.56:1. This is 5.91:1. */
  --pink-dark: #BE0387;

  /* 10% pink over white. Flat field for the hero. Black text 16.4:1. */
  --pink-pale: #FEE6F8;

  /* 20% accent over white. Black text stays above 14:1 on all four. */
  --tint-pink:   #FECDF0;
  --tint-yellow: #FFF4CD;
  --tint-blue:   #D1D7FF;
  --tint-green:  #CCF8DE;
  --cream:  #FDF3D2;
  --black:  #0A0A0A;
  --white:  #FFFFFF;

  /* Hard shadows, no blur anywhere */
  --shadow:    6px 6px 0 var(--black);
  --shadow-sm: 4px 4px 0 var(--black);
  --shadow-lg: 10px 10px 0 var(--black);

  --rule: 4px solid var(--black);

  /* Type */
  --display: 'Outfit', system-ui, sans-serif;
  --body:    'Chivo', system-ui, sans-serif;
  --mono:    'Space Mono', ui-monospace, monospace;

  /* Spacing */
  --gap:  1.5rem;
  --pad:  clamp(1.25rem, 4vw, 3rem);
  --max:  1180px;
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--black);
  background: var(--cream);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--black); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--pink); }

:focus-visible {
  outline: 4px solid var(--blue);
  outline-offset: 3px;
}

.container {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--yellow);
  color: var(--black);
  border: var(--rule);
  padding: 0.75rem 1.25rem;
  font-family: var(--mono);
  font-weight: 700;
  z-index: 999;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(1.9rem, 5.4vw, 3.6rem); line-height: 1.05; }
h2 { font-size: clamp(1.4rem, 3.6vw, 2.3rem); line-height: 1.08; }
h3 { font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.15; }

p + p { margin-top: 1rem; }

.eyebrow {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-block;
  border: 3px solid var(--black);
  background: var(--white);
  padding: 0.35rem 0.7rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}

.lede {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  line-height: 1.5;
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Zebra crossing divider. The signature element.
   "Look both ways" as a structural device rather than a line of copy.
   -------------------------------------------------------------------------- */

.crossing {
  height: 46px;
  border-top: var(--rule);
  border-bottom: var(--rule);
  background-image: repeating-linear-gradient(
    90deg,
    var(--black) 0 34px,
    transparent 34px 68px
  );
  background-color: var(--cream);
}

.crossing--tight { height: 28px; }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: var(--rule);
}

.nav-container {
  max-width: var(--max);
  margin-inline: auto;
  padding: 0.9rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.nav-logo { height: 40px; width: auto; }

.brand-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
}

.nav-menu {
  list-style: none;
  display: flex;
  gap: 0.4rem;
}

.nav-menu a {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 0.8rem;
  border: 3px solid transparent;
}

.nav-menu a:hover {
  border-color: var(--black);
  background: var(--yellow);
  color: var(--black);
}

.nav-menu a[aria-current="page"] {
  border-color: var(--black);
  background: var(--pink-dark);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.mobile-menu-btn {
  display: none;
  font-size: 1.4rem;
  line-height: 1;
  background: var(--yellow);
  border: 3px solid var(--black);
  box-shadow: var(--shadow-sm);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  font-family: var(--body);
}
.mobile-menu-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--black); }

/* --------------------------------------------------------------------------
   Page switching
   -------------------------------------------------------------------------- */

.page { display: none; }
.page.active { display: block; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  border-bottom: var(--rule);
  background: var(--cream);
  position: relative;
  overflow: hidden;
}

.hero-inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 5rem) var(--pad);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero h1 { margin-bottom: 0.5rem; }

.hero .tagline {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: var(--black);
  color: var(--yellow);
  display: inline-block;
  padding: 0.4rem 0.9rem;
  margin-bottom: 1.5rem;
}

.hero-description { max-width: 40ch; font-size: 1.15rem; }

.hero-image {
  border: var(--rule);
  box-shadow: var(--shadow-lg);
  background: var(--white);
}

.hero-cta {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Memphis confetti, decorative only */
.confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.confetti span { position: absolute; display: block; }
.c-dot   { width: 18px; height: 18px; border-radius: 50%; background: var(--blue); }
.c-tri   { width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 26px solid var(--green); }
.c-sq    { width: 22px; height: 22px; background: var(--yellow); transform: rotate(18deg); }
.c-arc   { width: 46px; height: 23px; border-radius: 46px 46px 0 0; background: var(--pink); }
.c-zig   { width: 40px; height: 12px; background:
             repeating-linear-gradient(135deg, var(--pink) 0 6px, transparent 6px 12px); }

.confetti span:nth-child(1) { top: 8%;  left: 4%; }
.confetti span:nth-child(2) { top: 20%; right: 6%; }
.confetti span:nth-child(3) { bottom: 14%; left: 8%; }
.confetti span:nth-child(4) { bottom: 26%; right: 3%; }
.confetti span:nth-child(5) { top: 52%; left: 46%; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.4rem;
  min-height: 44px;
  border: 3px solid var(--black);
  background: var(--pink-dark);
  color: var(--white);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); color: var(--white); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--black); }

.btn--yellow { background: var(--yellow); color: var(--black); }
.btn--yellow:hover { color: var(--black); }
.btn--blue { background: var(--blue); color: var(--white); }
.btn--white { background: var(--white); color: var(--black); }
.btn--white:hover { color: var(--black); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--pink   { background: var(--pink); color: var(--white); }
.section--blue   { background: var(--blue); color: var(--white); }
.section--yellow { background: var(--yellow); }
.section--green  { background: var(--green); }
.section--white  { background: var(--white); }

.section--pink .eyebrow,
.section--blue .eyebrow { background: var(--white); color: var(--black); }

.section--pink a:hover,
.section--blue a:hover { color: var(--yellow); }

.section-title { margin-bottom: 1.5rem; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--white);
  border: var(--rule);
  box-shadow: var(--shadow);
  transition: transform 0.12s, box-shadow 0.12s;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lg); }

.card-body { padding: 1.25rem 1.4rem 1.5rem; }
.card-body h3 { margin-bottom: 0.5rem; }
.card-body p { font-size: 0.98rem; }

/* --------------------------------------------------------------------------
   Featured video
   -------------------------------------------------------------------------- */

.featured-video {
  border: var(--rule);
  box-shadow: var(--shadow-lg);
  background: var(--black);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured-video iframe { width: 100%; height: 100%; border: 0; display: block; }

.video-placeholder {
  color: var(--cream);
  font-family: var(--mono);
  font-size: 0.85rem;
  text-align: center;
  padding: 1.5rem;
}
.video-placeholder .tip { font-size: 0.72rem; opacity: 0.7; margin-top: 0.6rem; }

.video-description {
  margin-top: 1.25rem;
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Episode grid
   -------------------------------------------------------------------------- */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap);
}

.video-thumbnail {
  aspect-ratio: 16 / 9;
  background: var(--black);
  color: var(--cream);
  border-bottom: var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.8rem;
  text-align: center;
  padding: 1rem;
}

.video-info { padding: 1.25rem 1.4rem 1.5rem; }
.video-info h3 { margin-bottom: 0.4rem; }
.video-info p { font-size: 0.95rem; }

.episode-meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  display: inline-block;
  border-bottom: 3px solid var(--pink);
  padding-bottom: 2px;
}

.watch-btn {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 3px solid var(--black);
}
.watch-btn:hover { border-color: var(--pink); }

/* --------------------------------------------------------------------------
   Social strip
   -------------------------------------------------------------------------- */

.social-scroll {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
}
.social-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
  background: var(--white);
  border: var(--rule);
  box-shadow: var(--shadow-sm);
}
.social-placeholder {
  aspect-ratio: 1;
  background: var(--cream);
  border-bottom: var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-align: center;
  padding: 1rem;
}
.social-card p { padding: 0.9rem 1rem; font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   Content pages
   -------------------------------------------------------------------------- */

.content-page { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.content-page h1 { margin-bottom: 1.5rem; }

.content { max-width: 62ch; }
.content h2 { margin-top: 2.5rem; margin-bottom: 0.75rem; }
.content p { margin-bottom: 1rem; }

.values-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem;
  margin-top: 1.5rem;
}
.values-list li {
  background: var(--tint-pink);
  border: 3px solid var(--black);
  box-shadow: var(--shadow-sm);
  padding: 0.9rem 1rem;
}
.values-list strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.15rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--gap);
  margin-top: 1.5rem;
}

.info-box {
  background: var(--yellow);
  border: var(--rule);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.info-box h2 { margin-top: 0; }

.supporters {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}
.supporters li {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  border: 3px solid var(--black);
  background: var(--white);
  padding: 0.45rem 0.8rem;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.contact-form { max-width: 560px; }

.form-group { margin-bottom: 1.25rem; }

label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

input, textarea {
  width: 100%;
  padding: 0.8rem;
  border: 3px solid var(--black);
  background: var(--white);
  font-size: 1rem;
  font-family: var(--body);
  color: var(--black);
}

input:focus, textarea:focus {
  outline: 4px solid var(--blue);
  outline-offset: 2px;
}

.form-note {
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  max-width: 46ch;
}

.submit-btn {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.95rem 1.6rem;
  min-height: 44px;
  border: 3px solid var(--black);
  background: var(--pink-dark);
  color: var(--white);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.submit-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.submit-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--black); }
.submit-btn:disabled { background: #9A9A9A; cursor: not-allowed; transform: none; box-shadow: var(--shadow-sm); }

.form-status {
  margin-top: 1.5rem;
  background: var(--yellow);
  border: var(--rule);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}
.form-status[hidden] { display: none; }
.form-status h3 { margin-bottom: 0.4rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer {
  background: var(--black);
  color: var(--cream);
  padding-block: clamp(2rem, 5vw, 3rem);
}
footer a { color: var(--cream); }
footer a:hover { color: var(--yellow); }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap);
  margin-bottom: 2rem;
}

.footer-grid h3 {
  font-size: 0.85rem;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.7rem;
}

.footer-links { list-style: none; }
.footer-links li { margin-bottom: 0.35rem; font-size: 0.95rem; }

.footer-bottom {
  border-top: 3px solid var(--cream);
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.85rem;
}

.footer-tagline {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--yellow);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-image { order: -1; }

  .mobile-menu-btn { display: block; }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--cream);
    border-bottom: var(--rule);
    padding: 0.5rem var(--pad) 1rem;
  }
  .nav-menu.active { display: flex; }
  .nav-menu a { padding: 0.75rem 0.5rem; border-width: 3px; }

  .navbar { position: relative; }
}

@media (max-width: 480px) {
  .crossing { height: 32px; background-image: repeating-linear-gradient(90deg, var(--black) 0 22px, transparent 22px 44px); }
  .confetti { display: none; }
  :root { --shadow: 5px 5px 0 var(--black); --shadow-lg: 7px 7px 0 var(--black); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .navbar, .confetti, footer { display: none; }
  .page { display: block !important; }
}


/* ==========================================================================
   Additions
   Tinted values, touch targets, small-screen fixes, contrast and focus.
   ========================================================================== */

/* Values cycle through the four accent tints. Nine values, four colours. */
.values-list li:nth-child(4n+1) { background: var(--tint-pink); }
.values-list li:nth-child(4n+2) { background: var(--tint-yellow); }
.values-list li:nth-child(4n+3) { background: var(--tint-blue); }
.values-list li:nth-child(4n+4) { background: var(--tint-green); }

/* --------------------------------------------------------------------------
   Touch targets. 44px minimum on anything tappable.
   -------------------------------------------------------------------------- */

/* Touch targets apply on touch devices only. On a mouse-driven desktop,
   forcing display on these elements overrides the layout rules that hide
   them, and stretches footer links into tall gappy blocks. */
@media (pointer: coarse) {
  .nav-menu a,
  .footer-links a,
  .skip-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav-menu a { justify-content: flex-start; }
}

/* Sizing only. Never touches display, so the base rule that hides this
   button on desktop still wins. */
.mobile-menu-btn { min-width: 44px; min-height: 44px; }

/* Inline links in body copy are exempt, they'd break the text flow. */
.content a,
.card-body a,
.lede a,
.form-note a {
  min-height: 0;
  display: inline;
}

input, textarea, .submit-btn { min-height: 44px; }

/* --------------------------------------------------------------------------
   Focus. Visible on everything, and never clipped by a parent.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 4px solid var(--blue);
  outline-offset: 3px;
  position: relative;
  z-index: 5;
}

/* On blue backgrounds the blue outline disappears. Switch to yellow. */
.section--blue a:focus-visible,
.section--blue button:focus-visible,
footer a:focus-visible {
  outline-color: var(--yellow);
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  /* Single column for every grid. Two-up cards get cramped below this. */
  .values-list,
  .team-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* Long words in headings, "Intersectional feminism" being the worst,
     shouldn't overflow the box. */
  h1, h2, h3 {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Hard shadows eat horizontal space on narrow screens. */
  :root {
    --shadow:    4px 4px 0 var(--black);
    --shadow-lg: 6px 6px 0 var(--black);
  }

  /* Buttons go full width so they're easy to hit. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; text-align: center; }
  .submit-btn { width: 100%; }

  /* Supporter pills wrap rather than squeeze. */
  .supporters li { font-size: 0.72rem; }
}

@media (max-width: 380px) {
  /* Smallest phones. Ease the padding so content isn't a narrow column. */
  :root { --pad: 1rem; }
}

/* --------------------------------------------------------------------------
   User preferences
   -------------------------------------------------------------------------- */

@media (prefers-contrast: more) {
  /* Drop the tints, go back to white, keep the structure. */
  .values-list li { background: var(--white); }
  :root { --rule: 4px solid #000; }
  a { text-decoration-thickness: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  /* The existing rule covers scroll behaviour. This covers the hover lifts. */
  .card, .card:hover,
  .btn, .btn:hover, .btn:active,
  .submit-btn, .submit-btn:hover, .submit-btn:active,
  .mobile-menu-btn:active {
    transition: none;
    transform: none;
  }
}

/* .hero-content was used in the markup but never defined. It's the text
   column of the hero grid. Sits above the confetti layer. */
.hero-content { position: relative; z-index: 2; }


/* --------------------------------------------------------------------------
   Reading measure
   .content was 62ch and .lede 46ch, while headings and grids ran the full
   container width. The mismatch read as the text being stranded left.
   -------------------------------------------------------------------------- */

.content { max-width: 74ch; }
.lede { max-width: 74ch; }

/* --------------------------------------------------------------------------
   Support acknowledgement
   Small plain line in the footer, above the bottom bar. Replaces the
   bordered pill list that used to sit on the About page.
   -------------------------------------------------------------------------- */

.acknowledgement {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.7;
  max-width: 70ch;
  margin-bottom: 1.5rem;
  opacity: 0.85;
}

/* ==========================================================================
   Variant: image hero and highlighted headings
   Used by index-bg.html. Nothing here affects the plain version.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero on a flat pale pink field
   -------------------------------------------------------------------------- */

.hero--image {
  background-color: var(--pink-pale);
  position: relative;
}

/* Flat pale pink field, no pattern. The pattern layer fought the photo and
   the panel for attention. To bring it back, restore a .hero--image::before
   with the background image and a low opacity. */

/* Content sits above the field. */
.hero--image .hero-inner {
  position: relative;
  z-index: 2;
}

/* Hero text panel. White against the pale pink field, with the same border
   and shadow as every other box on the site. Black on white is 19.8:1. */
.hero--image .hero-panel {
  background: var(--white);
  border: var(--rule);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Studio photo. Two-column hero on desktop: panel left, photo right. */
.hero--image .hero-image {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Highlighted headings
   An inline block behind the text, matching the eyebrow and tagline
   treatment already in use. Inline, so it hugs the words and wraps with
   them rather than filling the column.
   -------------------------------------------------------------------------- */

.hl {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.1em 0.35em;
  border: 3px solid var(--black);
  box-shadow: var(--shadow-sm);
  background: var(--yellow);
}

/* One treatment, not four. Mixing full-strength blue and green with a pink
   pastel read as three unrelated decisions rather than a system. */
.hl--yellow,
.hl--pink,
.hl--green,
.hl--blue { background: var(--yellow); color: var(--black); }

/* Highlighted headings need breathing room, since the block sits tight
   against the line above. */
.content h2 .hl { line-height: 1.5; }
.content-page h1 .hl { line-height: 1.4; }

@media (prefers-contrast: more) {
  /* Tints go flat white, keeping the border as the structure. */
  .hl--pink { background: var(--white); }
}



/* --------------------------------------------------------------------------
   Footer social grid
   Four platforms as a 2x2 block of bordered chips. Replaces the stacked
   link list and the email address, which the contact form now covers.
   -------------------------------------------------------------------------- */

.social-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  max-width: 320px;
}

.social-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 0.5rem 0.4rem;
  border: 3px solid var(--cream);
  color: var(--cream);
  transition: background 0.12s, color 0.12s;
}

.social-grid a:hover,
.social-grid a:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--black);
}

@media (prefers-reduced-motion: reduce) {
  .social-grid a { transition: none; }
}

/* --------------------------------------------------------------------------
   Team cards
   Name, then a portrait headshot below it. All three cards keep the same
   proportions whether or not there's a photo, so the set reads as
   deliberate rather than as one card missing something.
   -------------------------------------------------------------------------- */

.card--person {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card--person h3 {
  font-size: 1.05rem;
  margin: 0;
}

.card--person img,
.person-noimage {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border: 3px solid var(--black);
}

/* The third card has no photo yet. A flat tint block holds the same space,
   so the row stays even. Swapping in an <img> later needs no other change. */
.person-noimage {
  background: var(--tint-blue);
}

/* One card links out to a personal portfolio page. The whole card is the
   target, so the link wraps the contents rather than sitting inside them. */
.person-link {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.person-more {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.person-link:hover .person-more,
.person-link:focus-visible .person-more {
  background: var(--yellow);
}


/* --------------------------------------------------------------------------
   Vision, mission, values
   Three vertical panels inside one container. Tints only, no full-strength
   fills, so the three read as one set.
   -------------------------------------------------------------------------- */

.vmv {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  border: var(--rule);
  box-shadow: var(--shadow);
  background: var(--white);
  padding: 1rem;
  margin: 2.5rem 0;
}

@media (min-width: 700px) {
  /* Vision and mission share the top row. Values spans the full width
     underneath, which suits nine items far better than a narrow column. */
  .vmv { grid-template-columns: 1fr 1fr; }
  .vmv-panel--yellow { grid-column: 1 / -1; }
}

.vmv-panel {
  border: 3px solid var(--black);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.vmv-panel h2 {
  font-size: 1.15rem;
  margin: 0;
}

.vmv-panel p { margin: 0; }

.vmv-panel--pink   { background: var(--tint-pink); }
.vmv-panel--blue   { background: var(--tint-blue); }
.vmv-panel--yellow { background: var(--tint-yellow); }

/* Values run across the full-width panel in columns. Plain rows with a rule
   above each, not boxes, since boxes inside a box inside a box was too much. */
.vmv .values-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .vmv .values-list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .vmv .values-list { grid-template-columns: repeat(3, 1fr); }
}

.vmv .values-list li {
  background: none;
  border: 0;
  border-top: 2px solid var(--black);
  box-shadow: none;
  padding: 0.55rem 0;
  font-size: 0.92rem;
}

.vmv .values-list strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
}

@media (prefers-contrast: more) {
  .vmv-panel--pink,
  .vmv-panel--blue,
  .vmv-panel--yellow { background: var(--white); }
}