/* CLF 2027 guide: exact palette, font roles and restrained map/paper treatments.
   Sizing remains in clarity.css so the accepted compact phone layout is preserved. */
:root {
  --ceylon-green: #36866c;
  --light-green: #c5dbaf;
  --ceylon-brown: #573627;
  --ceylon-orange: #f2633f;
  --ceylon-blue: #064967;
  --ceylon-purple: #748cc1;
  --ceylon-pink: #db616d;
  --bright-green: #9fe27a;
  --bright-blue: #6dd6f2;
}
h2 em, .feature-kicker { color: var(--teal); }
.hero { background: var(--teal); isolation: isolate; }
.hero:before {
  background: url('assets/map.webp') 50% 45% / cover;
  mix-blend-mode: multiply;
  opacity: .32;
  z-index: -1;
}
.hero .eyebrow, .art-words { color: var(--light-green); }
.hero .asterisk { color: var(--bright-blue); }
.hero-art { background: var(--light-green); }
.hero-art img, .feature-art img, .visit-art img {
  filter: grayscale(1);
  mix-blend-mode: multiply;
}
.hero-art:after {
  content: '';
  position: absolute;
  top: auto;
  right: auto;
  bottom: -24%;
  left: -5%;
  width: 110%;
  height: 40%;
  background: url('assets/newspaper.webp') center top / cover no-repeat;
  transform: rotate(-3deg);
  pointer-events: none;
}
.art-stamp { background: var(--teal); color: var(--cream); border-color: var(--cream); }
.hero-date { background: var(--teal); border-top-color: var(--ceylon-green); }
.feature-art, .visit-art { background: var(--light-green); }
.tec-event-image { background: var(--light-green); }
.tec-event-image img, .tec-event:nth-child(2) .tec-event-image img { filter: grayscale(1); mix-blend-mode: multiply; }
.feature-tabs button[aria-selected=true] { border-top-color: var(--teal); color: var(--teal); }
.literary { background: var(--teal); color: var(--cream); }
.literary .pillar-symbol { color: var(--light-green); }
.art { background: var(--ceylon-brown); color: var(--cream); }
.art .pillar-symbol { color: var(--ceylon-orange); }
.children { background: var(--bright-green); color: var(--teal); }
.children .pillar-symbol span { color: var(--ceylon-green); }
.performing { background: var(--ceylon-blue); color: var(--cream); }
.performing .pillar-symbol { color: var(--ceylon-purple); }
.youth { background: var(--ceylon-blue); }
.youth h2 em { color: var(--cream); }
.youth-copy p, .youth-options p { color: var(--cream); }
.youth-options b { color: var(--cream); }
.youth .button { background: var(--cream); color: var(--ceylon-blue); }
.youth-poster {
  background: var(--ceylon-blue);
  color: var(--cream);
  box-shadow: inset 0 0 0 10px var(--ceylon-pink), 8px 12px 0 #06496740;
}
.poster-word { font-family: Oldforge, Financier, serif; font-weight: 400; letter-spacing: -1.5px; }
.poster-word>span:not(.poster-star) { color: var(--cream); }
.poster-star { color: var(--ceylon-pink); }
.poster-small, .poster-footer { color: var(--cream); font-weight: 500; }
.portrait { background: var(--light-green); }
.speaker-card:nth-child(2) .portrait { background: var(--ceylon-orange); }
.speaker-card:nth-child(3) .portrait { background: var(--ceylon-purple); }
.speaker-card:nth-child(4) .portrait { background: var(--ceylon-pink); }
.speaker-card>p { font-family: Palma, Funnel, sans-serif; }
.ticket-ribbon { background: var(--light-green); }
.visit-stamp { background: var(--cream); color: var(--teal); }
.archive-grid button:nth-child(2) { background: var(--ceylon-brown); }
.archive-grid button:nth-child(2) strong { color: var(--ceylon-orange); }
.archive-grid button:nth-child(3) { background: var(--ceylon-blue); color: var(--cream); }
.archive-grid button:nth-child(3) strong { color: var(--ceylon-purple); }
.newsletter { background: var(--light-green); }
.newsletter h2 em { color: var(--teal); }
.footer-main p { color: var(--cream); }
@media(max-width:800px) {
  .hero-art:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(150deg, transparent 10%, #18424630 35%, #184246d9 78%);
    pointer-events: none;
  }
  .mobile-discover a:first-child { background: var(--light-green); border-color: var(--light-green); }
  .feature-tabs button[aria-selected=true] { color: var(--cream); }
  .mobile-bar a:last-child, .mobile-bar a:last-child[aria-current=location] { color: var(--teal); }
}