/* ==========================================================================
   The Munich Fam – "console faceplate" redesign (PREVIEW)

   Brand tokens come from the Brand Style Guide (cream / terracotta / pine / charcoal,
   Cooper-style headlines + Poppins). The structure borrows from the Nintendo.com (2001)
   design analysis: beveled plates, a dark halftone command bar, outlined display
   wordmarks on patterned hero fields, and warm colour used only to say "go here".

   Loaded LAST on every page, so removing the <link> puts the old look straight back.
   ========================================================================== */

/* Fonts are hosted on this site (open-licence Poppins and Caprasimo, Latin letters only): no third-party request, no layout jump */
@font-face { font-family: 'Caprasimo'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/caprasimo-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* the four brand colours */
  --cream:  #F4EBDD;   /* base */
  --terra:  #C1602E;   /* action / accent */
  --pine:   #3A4A32;   /* secondary / bevel lines */
  --char:   #2B2018;   /* text + command layer */
  /* tints of those four, for plates and glow */
  --plate:  #FBF6EC;
  --oat:    #E6D9C3;
  --terra-text: #94461A;   /* terracotta dark enough for small text on cream */
  --terra-btn:  #AE531E;   /* terracotta for button fills that carry light text (passes contrast) */
  --terra-glow: #EE9A68;   /* terracotta lit up on charcoal */
  --pine-soft:  #E3E8DC;
  --dot: rgba(244,235,221,.10);

  --display: 'Caprasimo', 'Cooper Black', Georgia, serif;   /* stand-in for Cooper BT */
  --body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* remap every colour token the existing pages already use */
  --dark: var(--char);  --ww: var(--plate);  --bg: var(--cream);
  --brown: var(--terra-text);  --bd: var(--char);  --bm: var(--terra-text);  --bl: var(--terra-glow);
  --gold: var(--terra);  --bp: var(--oat);
  --border: #CDBB9F;  --mid: #6B5A48;  --light: #6F5C48;
  --serif: var(--body);  --sans: var(--body);

  /* category colours, kept inside the brand family */
  --things-accent: #C1602E; --things-pale: #F6E3D6; --things-dark: #8E4320;
  --eating-accent: #3A4A32; --eating-pale: #E3E8DC; --eating-dark: #2A3724;
  --day-accent:    #6A7B58; --day-pale:    #E8ECDF; --day-dark:    #3A4A32;
  --family-accent: #5A4636; --family-pale: #EADFCF; --family-dark: #2B2018;

  /* course finder tokens */
  --familylife: var(--pine); --familylife-soft: var(--pine-soft); --gold-soft: #F3DFCF; --surface-2: var(--oat);
  --radius: 2px; --shadow: none; --shadow-lift: none;
  --cut: 14px;
}

body { background: var(--cream); color: var(--char); font-family: var(--body); }
::selection { background: var(--terra); color: var(--plate); }

/* ---------- display type: only short punchy hooks (brand rule) ---------- */
.hero h1, .section-head h2, .insta-head h2, .page-hero h1, .info-hero h1 {
  font-family: var(--display); font-weight: 400; letter-spacing: .01em; line-height: 1.05;
}
/* everything else, including long article titles, stays Poppins */
h1, h2, h3, h4 { font-family: var(--body); color: var(--char); }
h3 { font-weight: 600; }

/* outlined box-art wordmark on the hero */
.hero h1 {
  color: var(--plate);
  -webkit-text-stroke: 2px var(--char); paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--terra), 5px 5px 0 var(--char);
  text-transform: none;
}
.hero h1 em.accent, em.accent { color: var(--plate); font-style: normal; text-shadow: 3px 3px 0 var(--terra), 5px 5px 0 var(--char); }

/* ---------- command bar: charcoal with halftone dots, warm words glow ---------- */
.site-header, .site-header.scrolled, header.site-header {
  background-color: var(--char);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.3px);
  background-size: 5px 5px;
  backdrop-filter: none;
  border-bottom: 3px solid var(--terra);
  box-shadow: 0 2px 0 var(--char);
  height: 60px;
}
.site-header .brand, .site-header.scrolled .brand, .site-header .logo { color: var(--plate); font-family: var(--body); font-weight: 700; font-size: 1.05rem; letter-spacing: 0; }
.brand img { border: 2px solid var(--plate); background: var(--plate); }
.main-nav a, .site-header.scrolled .main-nav a, .site-header .crumb {
  font-family: var(--body); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--terra-glow); opacity: 1; text-shadow: 0 0 8px rgba(238,154,104,.55);
}
.main-nav a:hover, .site-header .crumb:hover { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.5); }
.nav-cta {
  background: var(--terra); color: var(--plate) !important; border-radius: 2px; text-shadow: none !important;
  padding: 8px 14px !important; border: 2px solid var(--plate); box-shadow: 0 3px 0 #7d3a17;
}
.hamburger, .site-header.scrolled .hamburger { color: var(--terra-glow); }
.mobile-overlay { background-color: var(--char); background-image: radial-gradient(var(--dot) 1px, transparent 1.3px); background-size: 5px 5px; }
.mobile-overlay a { font-family: var(--display); color: var(--plate); }

/* ---------- hero field: pine with a fine grid, like a circuit / city map ---------- */
.hero {
  background-color: var(--pine);
  background-image:
    linear-gradient(rgba(244,235,221,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,235,221,.09) 1px, transparent 1px),
    radial-gradient(circle at 85% 20%, rgba(193,96,46,.35), transparent 45%);
  background-size: 28px 28px, 28px 28px, auto;
  color: var(--cream);
  margin-top: 0; padding: 56px 0 64px;
  border-bottom: 4px solid var(--char);
}
.hero .eyebrow { color: var(--terra-glow); font-weight: 700; letter-spacing: .12em; }
.hero p.sub { color: var(--char); }
/* the tagline becomes the mascot's speech bubble, with the pretzel logo beside it */
.hero-inner { position: relative; }
.hero-inner > p.sub {
  position: relative; display: inline-block; background: var(--plate); border: 2px solid var(--char); border-radius: 10px;
  padding: 10px 14px; margin: 6px 0 26px 56px; font-size: .95rem; font-weight: 500; max-width: 34ch; box-shadow: 3px 3px 0 var(--char);
}
.hero-inner > p.sub::before {
  content: ""; position: absolute; left: -58px; top: 50%; width: 44px; height: 44px; transform: translateY(-50%);
  background: var(--plate) url('/images/logo.png') center/contain no-repeat; border: 2px solid var(--char); border-radius: 50%;
}
.hero-inner > p.sub::after {
  content: ""; position: absolute; left: -9px; top: 50%; margin-top: -7px; width: 14px; height: 14px; background: var(--plate);
  border-left: 2px solid var(--char); border-bottom: 2px solid var(--char); transform: rotate(45deg);
}
.hero-stat .num { color: var(--terra-glow); font-family: var(--display); }

/* ---------- buttons: rectangular, beveled, orange = go ---------- */
.btn {
  border-radius: 2px; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; font-weight: 700;
  padding: 13px 20px; border: 2px solid var(--char);
}
.btn-primary { background: var(--terra); color: var(--plate); box-shadow: 0 4px 0 var(--char); }
.btn-primary:hover { background: #D06D3A; transform: translateY(-1px); box-shadow: 0 5px 0 var(--char); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--char); }
.btn-ghost { background: var(--char); color: var(--plate); border-color: var(--char); box-shadow: 0 4px 0 #000; }
.btn-ghost:hover { border-color: var(--char); transform: translateY(-1px); }

/* ---------- sub-nav strip (the category tiles) ---------- */
.tiles-bar { background: var(--oat); border-bottom: 3px solid var(--pine); padding: 10px 0; top: 60px; }
.tile {
  border-radius: 0; border: 2px solid var(--pine); background: var(--plate); color: var(--char);
  font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 9px 14px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.tile:hover { border-color: var(--terra); }
.tile.active { background: var(--pine); color: var(--plate); border-color: var(--pine); }
.tile .count { color: var(--terra-glow); opacity: 1; }
.pill { border-radius: 2px; font-weight: 600; letter-spacing: .02em; background: var(--plate); border: 2px solid var(--pine); color: var(--pine); }
.pill.active { background: var(--terra); border-color: var(--terra); color: var(--plate); }

/* ---------- section label bars ---------- */
.section-head { align-items: center; margin-bottom: 22px; }
.section-head h2 {
  background: var(--pine); color: var(--plate); font-size: 1.35rem; padding: 6px 16px 5px; border-bottom: 3px solid var(--terra);
  -webkit-text-stroke: 0; text-shadow: none;
}
.section-head .count { color: var(--mid); font-weight: 600; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- beveled, chamfered plates ---------- */
.card, .featured-card {
  --c: 12px; position: relative; isolation: isolate; border: 0; border-radius: 0; box-shadow: none; padding: 2px 2px 22px;
  background: var(--pine);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background-color .15s ease, transform .15s ease;
}
.card::before, .featured-card::before {
  content: ""; position: absolute; inset: 2px; z-index: -1; background: var(--plate);
  clip-path: polygon(calc(var(--c) - 2px) 0, 100% 0, 100% calc(100% - var(--c) + 2px), calc(100% - var(--c) + 2px) 100%, 0 100%, 0 calc(var(--c) - 2px));
}
.featured-card { --c: 20px; padding: 2px; }
.card:hover, .featured-card:hover { background: var(--terra); transform: translateY(-2px); box-shadow: none; border: 0; }
.card-img { border-bottom: 2px solid var(--pine); }
.card-img img { border-radius: 0; }
.card h3 { font-size: 1.02rem; line-height: 1.35; color: var(--char); }
.card p, .featured-body p { color: var(--mid); }
.featured-body h3 { font-size: clamp(1.3rem, 2.3vw, 1.8rem); }
.badge {
  border-radius: 2px; font-size: .68rem; letter-spacing: .08em; font-weight: 700; padding: 4px 9px;
  background: var(--pale, var(--oat)); color: var(--pale-dark, var(--char)); border: 1.5px solid var(--pale-dark, var(--pine));
}
.meta, .featured-meta { color: var(--mid); font-size: .75rem; letter-spacing: .04em; }

/* ---------- dark sections + footer: same halftone slab as the nav ---------- */
.insta-section, .site-footer, footer:has(> img) {
  background-color: var(--char);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.3px); background-size: 5px 5px;
  color: var(--oat);
}
.site-footer { border-top: 4px solid var(--terra); }
.footer-grid h4 { font-family: var(--display); font-weight: 400; color: var(--plate); letter-spacing: .02em; }
.footer-grid a, .footer-bottom { color: var(--oat); }
.footer-grid a:hover { color: var(--terra-glow); }
.insta-head h2 { color: var(--plate); }

/* forms */
input, select, textarea { font-family: var(--body); }
.empty-state .big { font-family: var(--display); font-weight: 400; color: var(--char); }

/* ---------- pages built with the older template (articles, old category pages) ---------- */
header:has(> .hi) {
  background-color: var(--char); background-image: radial-gradient(var(--dot) 1px, transparent 1.3px); background-size: 5px 5px;
  border-bottom: 3px solid var(--terra);
}
header:has(> .hi) .hi { height: 60px; }
header:has(> .hi) .lt { color: var(--plate); font-family: var(--body); font-size: 1rem; }
header:has(> .hi) .li { background: var(--plate); border: 2px solid var(--plate); }
.sw input { background: var(--plate); border: 2px solid var(--pine); border-radius: 2px; color: var(--char); }
.il { background: var(--terra); color: var(--plate); border: 2px solid var(--plate); border-radius: 2px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; }
.il:hover { color: var(--plate); border-color: var(--plate); background: #D06D3A; }
nav.cn { background: var(--oat); border-bottom: 3px solid var(--pine); }
.cp {
  border-radius: 0; border: 2px solid var(--pine); background: var(--plate); color: var(--char);
  font-weight: 700; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.cp:hover { color: var(--terra-text); border-color: var(--terra); }
.cp.active { background: var(--pine); border-color: var(--pine); color: var(--plate); }
footer:has(> img) img { background: var(--plate); }

.pw { max-width: 780px; background: var(--plate); border: 2px solid var(--pine); margin: 28px auto 40px; padding: 36px 28px 48px; }
@media (min-width: 820px) { .pw { padding: 48px 56px 56px; } }
.pb-crumb a { color: var(--terra-text); font-weight: 600; }
.pb-cat { color: var(--terra-text); font-weight: 700; letter-spacing: .1em; }
.pb-title { font-family: var(--body); font-weight: 700; letter-spacing: -.01em; color: var(--char); font-size: clamp(1.5rem, 4.2vw, 2.1rem); line-height: 1.2; }
.pb-meta { border-bottom: 2px dotted var(--pine); color: var(--mid); font-weight: 500; }
.pb h2 { font-family: var(--body); font-weight: 700; font-size: 1.2rem; border-bottom: 2px dotted var(--pine); color: var(--char); }
.pb h3 { color: var(--pine); font-weight: 700; }
.pb a { color: var(--terra-text); text-decoration-thickness: 2px; }
.pb img { border-radius: 2px; border: 2px solid var(--pine); }
.pb blockquote { border-left: 4px solid var(--terra); background: var(--oat); padding: 10px 16px; font-style: normal; color: var(--char); }
.pb table th { background: var(--pine); color: var(--plate); text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; }
.rel-title { font-family: var(--display); font-weight: 400; border-top: 2px dotted var(--pine); color: var(--char); }
.page-hero { background-color: var(--pine); background-image: linear-gradient(rgba(244,235,221,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(244,235,221,.09) 1px, transparent 1px); background-size: 28px 28px; border-bottom: 4px solid var(--char); }
.page-hero h1 { color: var(--plate); -webkit-text-stroke: 2px var(--char); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--terra); }
.page-hero p { color: var(--oat); }
.sh .st, .st { font-family: var(--display); font-weight: 400; }

/* ---------- course finder + weekend guide ---------- */
.panel {
  --c: 16px; position: relative; isolation: isolate; border: 0; border-radius: 0; box-shadow: none; padding: 20px 18px 16px;
  background: var(--pine); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.panel::before {
  content: ""; position: absolute; inset: 2px; z-index: -1; background: var(--plate);
  clip-path: polygon(calc(var(--c) - 2px) 0, 100% 0, 100% calc(100% - var(--c) + 2px), calc(100% - var(--c) + 2px) 100%, 0 100%, 0 calc(var(--c) - 2px));
}
.panel-lead { color: var(--char); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.stage-btn {
  border-radius: 0; border: 2px solid var(--pine); background: var(--plate); color: var(--char); font-weight: 700; font-size: .85rem;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.stage-btn.active { background: var(--pine); color: var(--plate); border-color: var(--pine); }
.stage-btn .count { color: var(--terra); opacity: 1; }
.stage-btn.active .count { color: var(--terra-glow); }
.chip { border-radius: 2px; border: 2px solid var(--pine); background: var(--plate); color: var(--char); font-weight: 600; }
.chip.active { background: var(--terra); border-color: var(--terra); color: var(--plate); }
.chip.more { color: var(--pine); border-style: dashed; background: transparent; }
.qf-label { color: var(--pine); text-transform: uppercase; letter-spacing: .07em; font-size: .7rem; font-weight: 700; }
.select-box, .search-box { background: #fff; border: 2px solid var(--pine); border-radius: 2px; }
.search-box input, .select-box select { color: var(--char); }
.more-opts summary { color: var(--terra-text); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
.clear-filters-btn { color: var(--terra-text); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; }
.card-actions a { border: 2px solid var(--pine); border-radius: 2px; background: var(--plate); color: var(--char); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; }
.card-actions a.primary { background: var(--terra); border-color: var(--char); color: var(--plate); box-shadow: 0 3px 0 var(--char); }
.why { background: var(--oat); border-radius: 0; border-left: 4px solid var(--terra); }
.why-title { text-transform: uppercase; letter-spacing: .07em; font-size: .68rem; color: var(--pine); }
.why li::before { color: var(--terra); }
.badge.english { background: var(--pine-soft); color: var(--pine); border-color: var(--pine); }
.badge.unverified { background: transparent; border-color: var(--terra); color: var(--terra-text); }
.badge.district, .badge.age { background: var(--oat); color: var(--char); border-color: var(--border); }
.age-note { color: var(--terra-text); }
.advertise-box { border: 2px solid var(--pine); border-radius: 0; }
.advertise-toggle { background: var(--oat); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; color: var(--char); }
.advertise-btn { background: var(--terra); border-radius: 2px; border: 2px solid var(--char); text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; }
.info-toggle-btn { background: var(--oat); color: var(--char); border-radius: 2px; border: 2px solid var(--pine); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; }
.info-panel { background: var(--plate); border: 2px solid var(--pine); border-radius: 0; }
header.hero .eyebrow { color: var(--terra-text); }
header.hero h1 { font-family: var(--display); font-weight: 400; color: var(--char); -webkit-text-stroke: 0; text-shadow: none; }
.wrap header.hero { background: none; border: 0; padding: 0; margin-bottom: 18px; }
.wrap header.hero p.sub { color: var(--mid); background: none; border: 0; box-shadow: none; margin: 2px 0 0; padding: 0; max-width: 62ch; display: block; font-size: .95rem; }
.wrap header.hero p.sub::before, .wrap header.hero p.sub::after { display: none; }
.results-meta { color: var(--mid); font-weight: 600; }
.results-meta strong { color: var(--terra-text); }

@media (max-width: 640px) {
  .hero h1 { -webkit-text-stroke: 1.5px var(--char); text-shadow: 2px 2px 0 var(--terra), 3px 3px 0 var(--char); }
  .hero-inner > p.sub { margin-left: 52px; }
}

/* bigger, easier-to-hit menu button */
.hamburger, .site-header.scrolled .hamburger {
  width: 44px; height: 40px; font-size: 1.6rem; line-height: 1; color: var(--terra-glow);
  border: 2px solid var(--terra-glow) !important; border-radius: 2px; background: transparent;
}

/* course finder cards keep their own inner padding and use the brand body font */
.wrap .card { padding: 20px 18px 16px; gap: 10px; }
.wrap .card h3 { font-family: var(--body); font-weight: 700; font-size: 1.02rem; }
.wrap .card::before { inset: 2px; }


/* ---------- readability fixes (checked with a contrast audit on every page type) ---------- */
/* buttons that carry light text use the slightly deeper terracotta */
.btn-primary, .nav-cta, .il, .advertise-btn, .card-actions a.primary, .pill.active, .chip.active { background-color: var(--terra-btn); }
.btn-primary:hover, .il:hover { background-color: #BE5C25; }
.card-actions a.primary { border-color: var(--char); }
.pill.active, .chip.active { border-color: var(--terra-btn); }
/* small terracotta labels on light surfaces use the text shade */
.eyebrow, .cc, .tile .count, .stage-btn .count, .card .eyebrow { color: var(--terra-text); }
.tile.active .count, .stage-btn.active .count { color: var(--plate); }
.hero .eyebrow, .insta-section .eyebrow { color: #F7B792; }
/* dark slabs (Instagram strip, footer): light text only */
.insta-section, .insta-section p, .insta-section span, .insta-section .label, .insta-head p, .insta-pending { color: var(--oat); }
.insta-section .eyebrow, .insta-head .eyebrow { color: var(--terra-glow); }
.insta-section .stat-tile .num, .insta-section .num { color: var(--terra-glow); }
.insta-section .stat-tile .label { color: var(--oat); }
.site-footer, .site-footer p, .footer-brand p, .footer-bottom { color: var(--oat); }
/* finder footer note sits on the cream page */
footer.note, footer.note a { color: var(--mid); }
footer.note a { color: var(--terra-text); font-weight: 600; }

/* inline styles written for the old palette: light text on dark panels */
[style*="background:var(--dark)"] p, [style*="background: var(--dark)"] p { color: var(--oat) !important; }
.hero .eyebrow a, .page-hero .eyebrow a { color: #F7B792 !important; }

/* ==========================================================================
   v2: warmer tone + accessibility (keyboard focus, tap targets, reduced motion)
   ========================================================================== */

/* ---- warmer: a light command bar with a faint dot texture, instead of a dark slab ---- */
.site-header, .site-header.scrolled, header.site-header, header:has(> .hi) {
  background-color: var(--plate);
  background-image: radial-gradient(rgba(58,74,50,.10) 1px, transparent 1.3px);
  background-size: 6px 6px;
  border-bottom: 3px solid var(--pine);
  box-shadow: none;
}
.site-header .brand, .site-header.scrolled .brand, .site-header .logo, header:has(> .hi) .lt { color: var(--char); }
.brand img, header:has(> .hi) .li { border-color: var(--pine); }
.main-nav a, .site-header.scrolled .main-nav a, .site-header .crumb {
  color: var(--terra-text); text-shadow: none; font-size: .82rem;
}
.main-nav a:hover, .site-header .crumb:hover {
  color: var(--char); text-shadow: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.nav-cta { border: 2px solid #7D3A17; box-shadow: 0 3px 0 #7D3A17; color: var(--plate) !important; }
.hamburger, .site-header.scrolled .hamburger { color: var(--char); border-color: var(--pine) !important; }
.mobile-overlay { background-color: var(--pine); background-image: none; }
.mobile-overlay a { color: var(--plate); }
.mobile-close { color: var(--plate); }

/* headline: cream with one terracotta offset, no black outline */
.hero h1, .page-hero h1, .hero h1 em.accent, em.accent { -webkit-text-stroke: 0; text-shadow: 3px 3px 0 var(--terra); }
@media (max-width: 640px) { .hero h1, .page-hero h1, .hero h1 em.accent { -webkit-text-stroke: 0; text-shadow: 2px 2px 0 var(--terra); } }
.hero { border-bottom-color: var(--pine); }
.hero-inner > p.sub { border-color: var(--pine); box-shadow: 3px 3px 0 rgba(0,0,0,.22); }
.hero-inner > p.sub::before { border-color: var(--pine); }
.hero-inner > p.sub::after { border-left-color: var(--pine); border-bottom-color: var(--pine); }

/* softer buttons: deep terracotta edges, a light button for the second action */
.btn-primary { border-color: #7D3A17; box-shadow: 0 3px 0 #7D3A17; }
.btn-primary:hover { box-shadow: 0 4px 0 #7D3A17; }
.btn-primary:active { box-shadow: 0 1px 0 #7D3A17; }
.btn-ghost { background: var(--plate); color: var(--char); border: 2px solid var(--char); box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.card-actions a.primary { border-color: #7D3A17; box-shadow: 0 3px 0 #7D3A17; }

/* ---- keyboard focus: always visible, and not hidden by the cut corners ---- */
:focus-visible { outline: 3px solid var(--terra-text); outline-offset: 3px; }
.hero :focus-visible, .site-footer :focus-visible, .insta-section :focus-visible, footer:has(> img) :focus-visible, .mobile-overlay :focus-visible { outline-color: #F7B792; }
.tile:focus-visible, .cp:focus-visible, .stage-btn:focus-visible { outline-offset: -5px; }
a.card:focus-visible, .featured-card:focus-visible { background: var(--terra); outline: none; }
a.card:focus-visible h3, .featured-card:focus-visible h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; }
.select-box:focus-within, .search-box:focus-within { outline: 3px solid var(--terra-text); outline-offset: 2px; }
.select-box select:focus-visible, .search-box input:focus-visible { outline: none; }

/* ---- tap targets: at least 44px tall ---- */
.tile, .cp, .pill, .chip, .stage-btn, .btn, .info-toggle-btn, .card-actions a, .nav-cta, .il, .clear-filters-btn, .advertise-btn {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.advertise-toggle { min-height: 44px; }
.more-opts summary { min-height: 44px; display: inline-flex; align-items: center; }
nav.cn .cni { height: auto; min-height: 56px; padding-block: 6px; }
.footer-grid a { padding-block: 6px; margin-bottom: 4px; }

/* ---- slightly larger small print ---- */
.badge { font-size: .72rem; }
.qf-label { font-size: .75rem; }
.why-title { font-size: .72rem; }
.tile { font-size: .8rem; }
.cp { font-size: .74rem; }

/* ---- respect "reduce motion" ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .fade-up { opacity: 1 !important; transform: none !important; }
}

/* ---- tap targets, round two ---- */
.hamburger, .site-header.scrolled .hamburger, .mobile-close { width: 48px; height: 48px; }
.brand { min-height: 44px; }
.footer-grid a { min-height: 44px; display: flex; align-items: center; margin-bottom: 0; }
.select-box, .search-box { padding-block: 0; min-height: 44px; }
.select-box select, .search-box input { min-height: 42px; }
.toggle-line { min-height: 44px; }
.toggle-line input { width: 22px; height: 22px; }
.main-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.site-header .crumb { min-height: 44px; display: inline-flex; align-items: center; }

/* inputs fill their 44px box; Instagram badge gradient deepened so its white text is readable */
.select-box select, .search-box input { min-height: 44px; }
a[style*="f09433"] { background: linear-gradient(45deg,#c2570f,#c8402a,#c02244,#b01a63,#9c1a7d) !important; text-shadow: 0 1px 1px rgba(0,0,0,.25); }

/* the closed mobile menu must not take keyboard focus while it is invisible */
.mobile-overlay { visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.mobile-overlay.open { visibility: visible; transition: opacity .3s ease, visibility 0s; }

/* advertise bar on the course finder: easy to spot, still collapsed until tapped */
.advertise-box { border: 2px solid var(--terra-text); background: var(--plate); }
.advertise-toggle { background: #F3DFCF; color: var(--char); font-size: .8rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.advertise-toggle::after { content: "+"; font-size: 1.3rem; line-height: 1; font-weight: 700; color: var(--terra-text); }
.advertise-box.open .advertise-toggle::after { content: "\2013"; }


/* ==========================================================================
   Course finder on phones: horizontal swipe rows, compact cards, sticky summary
   (mobile filter practice: priority options as swipeable chips, active filters always visible,
   44px targets, progressive disclosure)
   ========================================================================== */
.top-actions { display: grid; grid-template-columns: max-content 1fr; gap: 10px; align-items: start; margin-bottom: 16px; }
.top-actions .info-toggle-btn { margin: 0; }
.top-actions .advertise-box { margin: 0; }
.top-actions .advertise-box.open, .top-actions .info-panel { grid-column: 1 / -1; }
.top-actions .info-panel { margin-top: 0; }
.to-filters { display: none; }

@media (max-width: 640px) {
  .wrap { padding: 14px 14px 48px; }
  header.hero { margin-bottom: 10px; gap: 2px; }
  header.hero h1 { font-size: 1.75rem; }
  header.hero .eyebrow { font-size: .7rem; }
  header.hero p.sub { font-size: .88rem; line-height: 1.4; }
  header.hero p.sub .sub-2 { display: none; }
  .top-actions { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .top-actions .info-toggle-btn, .top-actions .advertise-toggle { width: 100%; font-size: .66rem; padding: 6px 8px; justify-content: center; text-align: center; letter-spacing: .03em; line-height: 1.2; min-height: 44px; }
  .advertise-toggle::after { display: none; }
  .top-actions .advertise-toggle { gap: 4px; }

  .panel { padding: 12px 12px 8px; margin-bottom: 12px; }
  .panel-lead { margin: 0 0 8px; }
  .stage-row { margin-bottom: 8px; gap: 6px; }
  .stage-btn { white-space: nowrap; }
  .stage-btn { padding: 6px 12px; font-size: .8rem; }
  .stage-btn .count { display: none; }
  .quick-grid { gap: 8px; margin-bottom: 8px; }
  .qf-label.block { margin: 0 0 6px; }
  .more-opts { margin-top: 6px; }
  .more-opts summary { min-height: 40px; }
  .clear-row { margin-top: 0; }

  /* results: the summary stays visible while you scroll, cards are tighter */
  .results-meta { position: sticky; top: 0; z-index: 25; background: var(--cream); margin: 0 -14px 8px; padding: 8px 14px; border-bottom: 2px solid var(--pine); font-size: .8rem; }
  .wrap .grid { gap: 10px; }
  .wrap .card { padding: 14px 14px 12px; gap: 8px; }
  .wrap .card h3 { font-size: .98rem; }
  .offer-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .84rem; cursor: pointer; }
  .card.open .offer-text { display: block; -webkit-line-clamp: unset; }
  .why { padding: 7px 10px; }
  .why li { font-size: .82rem; line-height: 1.4; }
  .address-line { font-size: .8rem; }
  .address-line span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card-actions { padding-top: 0; }
  .card-actions a { min-height: 44px; font-size: .7rem; }

  .to-filters {
    display: block; position: fixed; right: 14px; bottom: 16px; z-index: 40; min-height: 44px; padding: 0 16px;
    background: var(--pine); color: var(--plate); border: 2px solid var(--char); font: 700 .75rem/1 var(--body);
    letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 3px 0 var(--char);
  }
  .to-filters[hidden] { display: none; }
}

.type-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.type-head .qf-label { margin: 2px 0 8px; }
.type-head .clear-filters-btn { margin: 0 0 6px; min-height: 36px; }

@media (max-width: 640px) {
  /* "why this matches" as one wrapped line of ticks instead of a titled list */
  .why-title { display: none; }
  .why ul { display: flex; flex-wrap: wrap; gap: 2px 12px; }
  .why li { margin: 0; }
  .why { border-left-width: 3px; }
}

/* clear button sits at the top of the panel; the activity dropdown is for phones only */
.lead-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lead-row .panel-lead { margin: 0 0 12px; }
.lead-row .clear-filters-btn { margin: 0 0 8px; min-height: 36px; }
.qf-activity { display: none !important; }
@media (max-width: 640px) {
  .qf-activity { display: flex !important; grid-column: 1 / -1; }
  .chips-block { display: none; }
  .lead-row .panel-lead { margin-bottom: 8px; }
  .stage-row { flex-wrap: wrap; gap: 6px; }
}

@media (max-width: 640px) {
  /* five stage buttons as a 3 + 2 grid: all visible at once, two short rows */
  .stage-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .stage-btn { white-space: normal; text-align: center; padding: 6px 4px; font-size: .74rem; line-height: 1.2; justify-content: center; }
}
@media (max-width: 640px) { .more-opts { margin-top: 0; } .subfilters { gap: 4px; } }

/* header: six links plus the button need a menu button on tablets as well as phones */
.brand span { white-space: nowrap; }
@media (min-width: 769px) and (max-width: 1000px) {
  .main-nav { display: none; }
  .hamburger { display: flex; align-items: center; justify-content: center; margin-left: auto; }
}