/* AOPA Fly-In at Buckeye Air Fair 2027 — landing page */

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/libre-franklin-latin.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: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/libre-franklin-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url(../fonts/big-shoulders-display-latin.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: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url(../fonts/big-shoulders-display-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Postcard handwriting (latin subsets) */
@font-face { font-family: 'Kalam'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/kalam-latin.woff2) format('woff2'); }
@font-face { font-family: 'Yellowtail'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/yellowtail-latin.woff2) format('woff2'); }
@font-face { font-family: 'Rye'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/rye-latin.woff2) format('woff2'); }

:root {
  --ink: #5d192e;
  --ink-rgb: 93 25 46;
  --page: #fdfcf7;
  --cream: #faf5e8;
  --sky: #42a7d6;
  --sky-deep: #23759f;      /* AA-safe sky for white text */
  --canyon: #ec4617;        /* accent: rules, swatches, hover */
  --canyon-ui: #d43a0f;     /* AA-safe canyon for white text (buttons, airshow blocks) */
  --canyon-deep: #c83122;   /* eyebrows, links */
  --yellow: #fcba43;
  --red-ui: #e01b22;        /* solid red for buttons and the quick-nav: #ed1f25 nudged to AA (4.8:1) for white text */
  --red-deep: #b8141a;      /* hover */
  --plum: #4e1b36;
  --light-blue: #8ecfe9;
  --chalet-tint: #feedc9;
  --chalet-label: #8e5400;
  --sem-white: #fffdf9;
  --sponsor-bg: #f1eee7;
  --ph-a: #e9d4bc;
  --ph-b: #f2e2d0;
  --ph-light-a: #f0e0cc;
  --ph-light-b: #f6ece0;

  --line-12: rgb(var(--ink-rgb) / .12);
  --line-15: rgb(var(--ink-rgb) / .15);
  --line-20: rgb(var(--ink-rgb) / .2);
  --line-25: rgb(var(--ink-rgb) / .25);
  --line-30: rgb(var(--ink-rgb) / .3);

  --sans: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;

  --px: 40px;
  --sec: 112px;
  --card-pad: 44px 48px;
  --h1: 44px;
  --h2: 48px;
  --h3: 40px;
  --nav-h: 56px;
}

@media (max-width: 759px) {
  :root {
    --px: 18px;
    --sec: 64px;
    --card-pad: 24px 20px;
    --h1: 32px;
    --h2: 32px;
    --h3: 28px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

p, figure, blockquote, h1, h2, h3, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; }
a { color: var(--ink); }
a:hover { color: var(--canyon-deep); }

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

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 12px 16px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Layout helpers ---------- */
.wrap-x { padding-left: var(--px); padding-right: var(--px); }
.container { max-width: 1120px; margin: 0 auto; }
.section { padding-top: var(--sec); padding-bottom: var(--sec); }
.section--cream { background: var(--cream); }
.section--plum { background: var(--plum); color: var(--cream); }
.section--skytint { background: oklch(0.86 0.06 230); }
.section--plum :focus-visible { outline-color: var(--yellow); }
/* Sectional chart: the image is attached by js/main.js when the section nears the viewport.
   The .87 cream wash is the knob for chart strength. */
.section--chart { background-color: var(--cream); }
.section--chart.is-near {
  background-image:
    linear-gradient(rgb(250 245 232 / .87), rgb(250 245 232 / .87)),
    url(../assets/sectional-phoenix.webp);
  background-size: cover;
  background-position: 46% 52%;
}
.anchor { scroll-margin-top: var(--nav-h); }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.gap-wide { gap: 24px 72px; }
.gap-row-28 { row-gap: 28px; }
.align-start { align-items: start; }
@media (max-width: 759px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

.stack-12, .stack-14, .stack-16, .stack-20 { display: flex; flex-direction: column; }
.stack-12 { gap: 12px; }
.stack-14 { gap: 14px; }
.stack-16 { gap: 16px; }
.stack-20 { gap: 20px; }

.balance { text-wrap: balance; }
.nowrap { white-space: nowrap; }
.pretty, .pretty p { text-wrap: pretty; }
.strong { font-weight: 600; }
.small { font-size: 15px; }
.smaller { font-size: 14px; }
.lead { font-size: 20px; line-height: 1.5; }

/* ---------- Type ---------- */
h1, .h2, .h3 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -.02em;
}
h1 { font-size: var(--h1); line-height: 1.08; text-wrap: balance; }
.h2 { font-size: var(--h2); line-height: 1.1; }
.h3 { font-size: var(--h3); line-height: 1.1; }
.h3-small { font: 600 24px/1.25 var(--sans); }

.eyebrow {
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--canyon-deep);
}
.eyebrow--chalet { color: var(--chalet-label); }
.eyebrow--ink { color: var(--ink); }

.status { font: 500 12px/1.4 var(--sans); color: var(--canyon-deep); }

.text-link {
  align-self: flex-start;
  color: var(--canyon-deep);
  font: 600 16px/1.4 var(--sans);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-link:hover { color: var(--ink); }
.text-link:not([href]) { color: rgb(var(--ink-rgb) / .8); font-size: 14px; font-weight: 500; text-decoration: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font: 600 16px/1.2 var(--sans);
  padding: 15px 20px;
  text-decoration: none;
  border: 0;
  background: var(--red-ui);
  color: #fff;
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--red-deep); color: #fff; }
.btn--sm { font-size: 15px; line-height: 1.2; padding: 13px 18px; }
.self-start { align-self: flex-start; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn-row--center { justify-content: center; }

/* ---------- Wordmark (footer) ---------- */
.wordmark {
  font: 900 22px/1 var(--display);
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--ink);
  padding: 4px 0;
}
.wordmark--sm { font-size: 20px; }

/* ---------- Hero: layered animation ----------
   Every size is a fraction of the hero height (--H), as in the design spec.
   isolation keeps the layers below the overlapping hero card. */
.hero {
  --H: clamp(460px, 42vw, 780px);
  --bc-top: .06; --bc-h: .44;   /* back cloud band */
  --mt-bottom: .12; --mt-h: .36; /* mountains band */
  --gr-h: .24;                   /* ground band */
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  height: var(--H);
  background: oklch(0.72 0.14 230) url(../assets/hero/sky.webp) center / cover no-repeat;
}
.hero > * { position: absolute; }
.hero img { display: block; height: auto; pointer-events: none; user-select: none; }

.hero__backcloud,
.hero__mountains,
.hero__ground {
  left: 0; right: 0;
  background-repeat: repeat-x;
  background-position: center bottom;
}
/* The cloud band is one tile wider than the hero and slides left by exactly one tile
   per loop. Animating transform (not background-position) keeps it off the main thread. */
.hero__backcloud {
  --tw: calc(var(--H) * var(--bc-h) * 2321 / 681); /* rendered tile width */
  right: auto;
  width: calc(100% + var(--tw));
  top: calc(var(--H) * var(--bc-top));
  height: calc(var(--H) * var(--bc-h));
  background-image: url(../assets/hero/backcloud.webp);
  background-size: var(--tw) 100%;
  background-position: left bottom;
  opacity: .9;
  will-change: transform;
  animation: heroDrift 240s linear infinite;
}
.hero__frontcloud { top: -2%; left: -6%; width: 62%; animation: heroSway 18s ease-in-out infinite alternate; }
.hero__redplane { left: 0; top: 13%; z-index: 1; animation: heroCross 30s linear 3s infinite both; }
.hero__redplane img { width: auto; height: calc(var(--H) * .075); }
.hero__fill {
  /* Stops the sky showing through the semi-transparent bottom of the mountain art */
  left: 0; right: 0; bottom: 0;
  height: calc(var(--H) * (var(--mt-bottom) + var(--mt-h) * .4));
  background: oklch(0.66 0.2 42);
}
.hero__mountains {
  bottom: calc(var(--H) * var(--mt-bottom));
  height: calc(var(--H) * var(--mt-h));
  background-image: url(../assets/hero/mountains-tile.webp);
  background-size: auto 100%;
}
.hero__ground {
  bottom: 0;
  height: calc(var(--H) * var(--gr-h));
  background-image: url(../assets/hero/ground2-tile.webp);
  background-size: auto 100%;
}
.hero__foreground { left: 0; bottom: 0; width: 100%; }
.hero__firework { z-index: 2; opacity: 0; animation: heroFirework 5.5s ease-out infinite; }
.hero__firework--1 { right: 40%; top: 2%; width: 14%; animation-delay: 2.6s; }
.hero__firework--2 { right: 1%; top: 30%; width: 11%; animation-delay: 4.3s; }
.hero__plane {
  z-index: 3;
  left: -1%; top: 5%;
  width: min(51%, calc(var(--H) * 1.25));
  animation: heroPlaneIn 1.9s cubic-bezier(.18, .9, .25, 1.08) .2s both;
}
.hero__plane img { width: 100%; animation: heroBob 3.4s ease-in-out 2.1s infinite alternate; }
.hero__logo {
  z-index: 4;
  right: 4.5%; top: 6%;
  width: min(41%, calc(var(--H) * .7 * 1.456));
  filter: drop-shadow(0 4px 12px oklch(0.4 0.1 240 / .35));
  animation: heroPop 1.1s cubic-bezier(.3, 1.5, .5, 1) 1.1s both;
}
.hero .hero__toggle { z-index: 5; top: 12px; left: auto; right: 12px; }

@media (max-width: 759px) {
  .hero { --H: 620px; --bc-top: .30; --bc-h: .26; --mt-bottom: .08; --mt-h: .24; --gr-h: .17; }
  /* Phone-sized tiles (same artwork, scaled for a 620px-tall hero at 2x) */
  .hero__backcloud { background-image: url(../assets/hero/backcloud-m.webp); }
  .hero__mountains { background-image: url(../assets/hero/mountains-tile-m.webp); }
  .hero__ground { background-image: url(../assets/hero/ground2-tile-m.webp); }
  .hero__frontcloud { top: 28%; left: -20%; width: 140%; }
  .hero__redplane { top: 30%; }
  .hero__redplane img { height: 26px; }
  .hero__firework--1 { right: auto; left: 4%; top: 2%; width: 30%; }
  .hero__firework--2 { right: 2%; top: 14%; width: 24%; }
  .hero__plane { left: -8%; top: 40%; width: 94%; }
  .hero__logo { left: 6%; right: 6%; top: 3%; width: 88%; }
  .hero .hero__toggle { top: auto; bottom: 36px; }
}

@keyframes heroDrift { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--tw))); } }
@keyframes heroSway { from { transform: translateX(0); } to { transform: translateX(4%); } }
@keyframes heroCross { from { transform: translateX(-20vw); } to { transform: translateX(120vw); } }
@keyframes heroPlaneIn {
  0% { transform: translate(-110%, 35%) rotate(-6deg); opacity: 0; }
  15% { opacity: 1; }
  75% { transform: translate(3%, -3%) rotate(1deg); }
  100% { transform: none; }
}
@keyframes heroBob { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes heroPop {
  0% { opacity: 0; transform: scale(.4) rotate(-6deg); }
  60% { opacity: 1; transform: scale(1.12) rotate(2deg); }
  80% { transform: scale(.96); }
  100% { transform: none; }
}
@keyframes heroFirework {
  0% { opacity: 0; transform: scale(.2); }
  12% { opacity: 1; }
  45% { opacity: .85; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.12); }
}

/* Pause control (WCAG 2.2.2) */
.hero.is-paused, .hero.is-paused * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .hero, .hero * { animation: none !important; }
  .hero__redplane { left: 22%; }
}

.media-toggle {
  position: absolute;
  top: 12px; left: 12px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  background: rgb(var(--ink-rgb) / .85);
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.media-toggle:hover { background: var(--ink); }
.media-toggle:focus-visible { outline-color: #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); }
.media-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.media-toggle .icon-play { display: none; }
.media-toggle[aria-pressed="true"] .icon-play { display: block; }
.media-toggle[aria-pressed="true"] .icon-pause { display: none; }

.hero-card {
  max-width: 1120px;
  margin: -88px auto 0;
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--line-15);
  box-shadow: 0 20px 40px -24px rgb(var(--ink-rgb) / .35);
  padding: var(--card-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px 56px;
}
.hero-card__event { display: flex; flex-direction: column; gap: 14px; }
.hero-card__copy { display: flex; flex-direction: column; gap: 16px; }
.hero-card__copy > p { text-wrap: pretty; }
.hero-date {
  font: 900 76px/.85 var(--display);
  text-transform: uppercase;
}
.hero-venue { font-size: 15px; }

.countdown__units { display: flex; gap: 18px; margin-top: 6px; }
.countdown__unit { display: flex; flex-direction: column; min-width: 2.2em; }
.countdown__num { font: 700 28px/1 var(--display); font-variant-numeric: tabular-nums; }
.countdown__lbl {
  font: 500 10px/1.6 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / .75);
}

@media (max-width: 759px) {
  .hero-card { margin-top: -24px; grid-template-columns: minmax(0, 1fr); }
  .hero-date { font-size: 52px; }
}

/* ---------- Quick-link nav ---------- */
.quicknav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--red-ui);
  margin-top: 40px;
}
.quicknav__list {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0 24px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.quicknav__list::-webkit-scrollbar { display: none; }
.quicknav a {
  display: block;
  color: #fff;
  text-decoration: none;
  font: 700 16px/24px var(--sans);
  padding: 17px 0 12px; /* 56px tall: matches --nav-h, which the schedule's sticky header sits under */
  border-bottom: 3px solid transparent;
}
.quicknav a:hover, .quicknav a[aria-current="true"] { border-bottom-color: #fff; color: #fff; }
.quicknav a:focus-visible { outline-color: #fff; outline-offset: -3px; }
@media (max-width: 759px) {
  .quicknav__list { justify-content: flex-start; gap: 0 20px; }
  .quicknav li:last-child { padding-right: var(--px); }
}

/* ---------- Video band (full-bleed, decorative) ---------- */
.video-band {
  position: relative;
  overflow: hidden;
  height: clamp(420px, 42vw, 640px);
  background: var(--sky-deep) center / cover no-repeat;
}
.video-band.is-near { background-image: url(../assets/quote-still.webp); }
.video-band__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.video-band .media-toggle { left: auto; top: 16px; right: 16px; z-index: 1; }
@media (max-width: 759px) {
  .video-band { height: 360px; }
  .video-band .media-toggle { top: auto; bottom: 16px; } /* clear of the postcard's corner */
}

/* ---------- Intro + postcard from the Mayor ---------- */
.section--sand { background: oklch(0.955 0.025 75); }
.intro { overflow-x: clip; }
.intro__lead { display: flex; flex-direction: column; gap: 56px; }

.postcard {
  /* Bleeds left past the column, never further than the real gutter */
  --bleed: min(110px, max(40px, (100vw - 1120px) / 2) - 16px);
  --ink-pc: oklch(0.22 0.015 260);
  position: relative;
  z-index: 1;
  width: calc(100% + var(--bleed));
  margin-left: calc(-1 * var(--bleed));
  transform: rotate(-2deg);
  padding: 18px 24px 26px;
  container-type: inline-size; /* its contents scale with the card's own width */
  aspect-ratio: 5 / 3; /* postcard shape; grows taller only if text is zoomed */
  display: flex;
  flex-direction: column;
  color: var(--ink-pc);
  background:
    radial-gradient(ellipse at 10% 88%, oklch(0.86 0.07 72 / .35), transparent 38%),
    radial-gradient(ellipse at 92% 8%, oklch(0.90 0.05 80 / .30), transparent 42%),
    oklch(0.955 0.035 88);
  border: 1px solid rgb(var(--ink-rgb) / .1);
  box-shadow: 0 2px 0 rgb(var(--ink-rgb) / .04), 0 34px 60px -30px rgb(var(--ink-rgb) / .5);
}
/* Everything inside the card scales with the card's own width (cqi), so a narrower card is a
   smaller copy of the same postcard rather than a different layout. rem floors and ceilings keep
   text readable on phones and let it grow with browser text zoom (the card then just gets taller). */
.postcard__stamps { position: absolute; top: 12px; right: 12px; width: 23cqi; height: 17cqi; }
.postcard__stamps > * { position: absolute; height: auto; }
.postcard__stamp { right: 0; top: 0; width: 66.7%; transform: rotate(4deg); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12)); }
.postcard__waves { right: -2.7%; top: 30.9%; width: 86.7%; color: oklch(0.28 0.04 260 / .58); transform: rotate(-6deg); mix-blend-mode: multiply; }
.postcard__postmark { left: 0; top: 25.5%; width: 54.7%; color: oklch(0.28 0.04 260 / .7); transform: rotate(-14deg); mix-blend-mode: multiply; }
.postcard__title {
  font: 400 clamp(1rem, 4.4cqi, 1.8125rem)/1 'Rye', serif;
  letter-spacing: .14em;
  white-space: nowrap;
  text-align: center;
  opacity: .84;
  margin: 1cqi 0 2.8cqi;
}
.postcard__cols { flex: 1; display: grid; grid-template-columns: 1fr 1fr; }
.postcard__label { font: 600 clamp(.5rem, 1.55cqi, .625rem)/1.4 var(--sans); letter-spacing: .16em; opacity: .84; }
.postcard__msg { margin: 0; padding-right: 3cqi; display: flex; flex-direction: column; gap: 1.8cqi; }
.postcard__quote { margin: 0; }
.postcard__quote p { font: 400 clamp(.75rem, 2.77cqi, 1.125rem)/1.3 'Kalam', cursive; text-wrap: pretty; }
.postcard__sig { display: flex; flex-direction: column; gap: 1.8cqi; margin-bottom: auto; }
/* Labels stay at the top; the handwriting is centred vertically in each half */
.postcard__msg > .postcard__label { margin-bottom: auto; }
.postcard__name { font: 400 clamp(1.25rem, 4.6cqi, 1.875rem)/1 'Yellowtail', cursive; margin-top: .3cqi; }
.postcard__role { font: 400 clamp(.75rem, 2.3cqi, .9375rem)/1.3 'Kalam', cursive; margin-top: -1.2cqi; }
.postcard__addr { display: flex; flex-direction: column; border-left: 1px solid oklch(0.22 0.015 260 / .55); padding-left: 3cqi; }
.postcard__lines { margin: auto 0; display: flex; flex-direction: column; font: 400 clamp(.75rem, 2.77cqi, 1.125rem)/1.2 'Kalam', cursive; }
.postcard__lines > span { padding: 1.5cqi 0 .5cqi; border-bottom: 1px solid oklch(0.22 0.015 260 / .28); }

/* Below 1400px the left column gets too tight, so the card drops below the whole Intro,
   centred under the "Notify me" button, with its lower edge tipping into the video band.
   display: contents lets the H2 and the card join the Intro grid directly. */
@media (max-width: 1399px) {
  .intro__lead { display: contents; }
  .postcard {
    --bleed: 0px;
    grid-column: 1 / -1;
    order: 1;
    justify-self: center;
    width: min(100%, 720px);
    margin: 40px 0 calc(-1 * var(--sec) - 32px);
  }
}
@media (max-width: 759px) {
  .postcard { padding: 12px 12px 14px; margin-top: 16px; margin-bottom: calc(-1 * var(--sec) - 20px); }
}

/* ---------- Photo placeholders ---------- */
.photo-ph {
  background: repeating-linear-gradient(135deg, var(--ph-a) 0 12px, var(--ph-b) 12px 24px);
  padding: 16px;
  font: 500 11px/1.4 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.photo-ph--light { background: repeating-linear-gradient(135deg, var(--ph-light-a) 0 12px, var(--ph-light-b) 12px 24px); margin-top: 8px; padding: 14px; }
.photo-ph--short { min-height: 260px; padding: 14px; }
.exp-photo { margin-top: 8px; }
.exp-photo__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.exp-photo .photo-ph { margin-top: 0; aspect-ratio: 3 / 2; min-height: 0; }
.exp-photo [hidden] { display: none; }
.photo-ph--tall { min-height: 420px; }
@media (max-width: 759px) {
  .photo-ph--short { min-height: 200px; }
  .photo-ph--tall { min-height: 240px; }
}

/* ---------- Accordions ---------- */
.accordion { border-top: 1px solid var(--line-25); }
.accordion__heading { margin: 0; font: inherit; }
.accordion__btn {
  cursor: pointer;
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-25);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
  color: var(--ink);
}
.accordion__btn:hover .accordion__title { color: var(--canyon-deep); }
.accordion__btn:focus-visible { outline-offset: -3px; }
.accordion__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 21px/1.2 var(--sans);
}
.accordion__text { display: flex; flex-direction: column; gap: 2px; }
.accordion__sub { font: 500 12px/1.4 var(--sans); color: rgb(var(--ink-rgb) / .75); }
.accordion__icon { font-size: 22px; line-height: 1; min-width: 14px; text-align: center; }
.accordion__icon::before { content: '+'; }
.accordion__btn[aria-expanded="true"] .accordion__icon::before { content: '–'; }
.accordion__panel {
  padding: 14px 0 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-bottom: 1px solid var(--line-25);
}
.accordion__panel[hidden] { display: none; }
.accordion__panel--indent { padding-left: 22px; }
.accordion__panel--tight { gap: 10px; }
.accordion__panel--gap12 { gap: 12px; }

.swatch { width: 10px; height: 10px; flex: none; }
.swatch--ink { background: var(--ink); }
.swatch--sky { background: var(--sky); }
.swatch--yellow { background: var(--yellow); }
.swatch--canyon { background: var(--canyon); }
.swatch--plum { background: var(--plum); }

.times-list { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }

/* ---------- Schedule section head ---------- */
.schedule-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px 40px;
}
.schedule-head p { max-width: 48ch; }

/* ---------- Chalet ---------- */
/* Full-bleed band, two columns edge to edge */
.chalet { background: var(--chalet-tint); }
/* Fills its half; anchored right of centre to keep the plane and the man filming in a square crop */
.chalet__media { position: relative; }
.chalet__photo { display: block; width: 100%; height: 100%; min-height: 620px; object-fit: cover; object-position: 40% 50%; }
.chalet__new { font-weight: 700; font-size: 19px; color: var(--canyon-deep); }
.chalet__body { padding: 64px; max-width: 640px; justify-content: center; }
@media (max-width: 759px) {
  .chalet__photo { min-height: 260px; }
  .chalet__body { padding: 32px 20px; }
}
.price-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.price-tile { background: #fff; padding: 14px 16px; display: flex; flex-direction: column; }
.price-tile__label { font-size: 13px; line-height: 1.4; }
.price-tile__price { font: 800 36px/1.1 var(--display); }
.note { font-size: 13px; }

/* Flightline Chalet benefits (native disclosure) */
.benefits { border-top: 1px solid var(--line-25); border-bottom: 1px solid var(--line-25); }
.benefits__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  font: 600 18px/1.3 var(--sans);
}
.benefits__summary::-webkit-details-marker { display: none; }
.benefits__summary::after { content: '+'; font-size: 22px; line-height: 1; }
.benefits[open] .benefits__summary::after { content: '–'; }
.benefits__summary:hover { color: var(--canyon-deep); }
.benefits__summary:focus-visible { outline-offset: -3px; }
.benefits__list { padding: 0 0 16px 20px; list-style: disc; display: flex; flex-direction: column; gap: 4px; }
.chalet .btn-row { gap: 10px 16px; }

/* ---------- Exhibitors ---------- */
.status-list { border-top: 1px solid var(--line-25); }
.status-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-25);
  font-weight: 600;
}

/* Exhibit Hall loop: fills the column beside the text, cropped to fit */
.exh-video { position: relative; min-height: 420px; background: var(--ph-a); }
.exh-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.exh-video .media-toggle { left: auto; right: 12px; top: 12px; }
@media (max-width: 759px) {
  .exh-video { min-height: 0; aspect-ratio: 984 / 776; }
}

/* ---------- Travel ---------- */
.hotel-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hotel-tile {
  height: 100%;
  background: var(--canyon-ui);
  color: #fff;
  padding: 14px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background-color .15s ease;
}
.hotel-tile:hover { background: var(--canyon-deep); color: #fff; }
.hotel-tile__name { font-weight: 600; }
.hotel-tile__cta { font-size: 13px; }

/* Non-interactive "coming soon" notice in the orange box */
.status-box {
  align-self: flex-start;
  background: var(--canyon-ui);
  color: #fff;
  font: 600 15px/1.2 var(--sans);
  padding: 13px 18px;
}

/* ---------- Membership ---------- */
.membership { gap: 20px 64px; }
.membership__sub { font-size: 19px; line-height: 1.5; color: var(--yellow); }

/* ---------- Volunteer ---------- */
.signup {
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.signup__text { display: flex; flex-direction: column; gap: 4px; }
.signup__kicker { font-size: 13px; line-height: 1.4; }
.signup__title { font: 600 24px/1.2 var(--sans); }
.signup__arrow { font-size: 24px; line-height: 1; }
.signup--sky { background: var(--sky-deep); color: #fff; }
.signup--sky:hover { background: #1b6189; color: #fff; }
.signup--outline { background: #fff; border: 1px solid var(--line-30); color: var(--ink); }
.signup--outline:hover { border-color: var(--canyon); color: var(--ink); }
/* Sign-up link not live yet: reads as a notice, not a link */
.signup:not([href]) .signup__arrow { display: none; }
.signup--sky:not([href]):hover { background: var(--sky-deep); }

/* Volunteer testimonial video (sound on, plays on request) */
.vol-video { display: flex; flex-direction: column; gap: 10px; }
.vol-video__frame { position: relative; background: var(--ink); }
.vol-video video { display: block; width: 100%; height: auto; aspect-ratio: 992 / 464; background: #000; }
.vol-video__play {
  position: absolute;
  inset: 0;
  /* Whole frame is clickable; the visible control sits bottom-left, clear of faces */
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 10px;
  border: 0;
  padding: 16px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, rgb(52 22 30 / 0) 55%, rgb(52 22 30 / .4));
}
.vol-video__play[hidden] { display: none; }
.vol-video__icon {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  background: var(--canyon-ui);
  border: 2px solid #fff;
  transition: background-color .15s ease, transform .15s ease;
}
.vol-video__icon svg { width: 26px; height: 26px; fill: currentColor; margin-left: 4px; }
.vol-video__label {
  margin-bottom: 14px; /* centres it on the 56px icon */
  background: rgb(52 22 30 / .85);
  padding: 5px 10px;
  font: 600 14px/1.3 var(--sans);
  letter-spacing: .02em;
}
.vol-video__play:hover .vol-video__icon { background: var(--canyon-deep); transform: scale(1.05); }
.vol-video__play:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.vol-video__play:focus-visible .vol-video__icon { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Final CTA ---------- */
/* Sky band with the hero's canyon, ground and cacti along the bottom.
   Text stays INK: white on this sky is 2.1–2.7:1 and fails even for large text. */
.section--final {
  --mt-bottom: 52px; --mt-h: 160px; --gr-h: 105px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, oklch(0.76 0.09 228), var(--sky));
  padding-bottom: calc(var(--mt-bottom) + var(--mt-h) + 48px);
}
.final__scene { position: absolute; inset: auto 0 0 0; height: calc(var(--mt-bottom) + var(--mt-h)); }
.final__scene > * { position: absolute; left: 0; right: 0; }
.final__fill { bottom: 0; height: calc(var(--mt-bottom) + var(--mt-h) * .4); background: oklch(0.66 0.2 42); }
.final__mountains,
.final__ground { background-repeat: repeat-x; background-position: center bottom; background-size: auto 100%; }
.final__mountains { bottom: var(--mt-bottom); height: var(--mt-h); background-image: url(../assets/hero/mountains-tile.webp); }
.final__ground { bottom: 0; height: var(--gr-h); background-image: url(../assets/hero/ground2-tile.webp); }
.final__cacti { bottom: 0; width: 100%; height: auto; display: block; }
@media (max-width: 759px) {
  .section--final { --mt-bottom: 40px; --mt-h: 110px; --gr-h: 75px; }
  .final__mountains { background-image: url(../assets/hero/mountains-tile-m.webp); }
  .final__ground { background-image: url(../assets/hero/ground2-tile-m.webp); }
}
.final {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.final__p { max-width: 56ch; }
.final__date { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
.final__date-big { font: 900 44px/1 var(--display); text-transform: uppercase; }
.final__venue { font-size: 14px; }
.final__tagline { margin-top: 10px; }

/* ---------- Sponsors & footer ---------- */
.sponsors { padding-top: 56px; padding-bottom: 56px; }
.sponsors__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.sponsors__title { font: 600 var(--h3)/1.15 var(--sans); letter-spacing: -.02em; text-align: center; text-wrap: balance; }

/* Proposed extra sponsor spots (under the experience photo; on the Chalet photo) */
.sponsors[hidden], .sponsor-spot[hidden] { display: none; }
.sponsor-spot { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.sponsor-spot__label { font: 600 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.sponsor-spot--badge { position: absolute; left: 16px; bottom: 16px; margin: 0; background: #fff; padding: 8px 8px 8px 14px; box-shadow: 0 8px 20px -10px rgb(0 0 0 / .5); }
.sponsor-spot--badge .sponsor-tile { width: 120px; height: 56px; }

/* ---------- "Notify me" form pop-up ---------- */
.notify-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  background: var(--cream);
  color: var(--ink);
}
.notify-dialog::backdrop { background: rgb(var(--ink-rgb) / .55); }
.notify-dialog__inner { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.notify-dialog__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.notify-dialog__title { font: 800 28px/1 var(--display); text-transform: uppercase; }
.notify-dialog__close {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 6px 0 6px 8px;
  font: 600 12px var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.notify-dialog__close:hover { color: var(--canyon-deep); }
/* Sized to the 3-field form plus room for error messages; the form's theme uses the same cream */
.notify-dialog__frame { width: 100%; height: min(330px, calc(100dvh - 140px)); border: 0; background: var(--cream); }
.sponsor-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sponsor-tile {
  width: 150px; height: 70px;
  background: var(--sponsor-bg);
  display: grid;
  place-items: center;
  text-align: center;
  font: 500 10px/1.3 var(--sans);
  text-transform: uppercase;
}

.site-footer {
  border-top: 1px solid var(--line-15);
  padding-top: 22px;
  padding-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

/* =====================================================================
   Schedule component
   ===================================================================== */
.sched { position: relative; color: var(--ink); }
.sched-loading { padding: 24px 0; }

.sched-tabs { display: flex; }
.sched-tab {
  flex: 1;
  cursor: pointer;
  border: 1px solid var(--line-30);
  margin-left: -1px;
  background: #fff;
  color: var(--ink);
  padding: 12px 8px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  font: 600 16px/1.2 var(--sans);
  letter-spacing: .03em;
}
.sched-tab:first-child { margin-left: 0; }
.sched-tab:hover { background: var(--cream); }
.sched-tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.sched-tab__sub { opacity: .8; }
.sched-tab:focus-visible { position: relative; z-index: 1; }

/* Order: time-zone note, day tabs, 2px INK line, panel */
.sched-tz {
  text-align: right;
  padding-bottom: 10px;
  font: 500 12px/1.5 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sched-tab { border-bottom: 0; }
/* Day tabs, key and lane names pin under the quick-nav while the day scrolls by */
.sched-sticky { position: sticky; top: var(--nav-h); z-index: 6; }
.sched-sticky__key {
  background: #fff;
  border: 1px solid rgb(var(--ink-rgb) / .18);
  border-top: 2px solid var(--ink);
  border-bottom: 0;
  padding: 18px 24px 0;
}
.sched-panel {
  background: #fff;
  border: 1px solid rgb(var(--ink-rgb) / .18);
  border-top: 0;
  padding: 0 24px 22px;
  position: relative;
}
.sched-panel:focus-visible { outline-offset: 2px; }

.sched-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.sched-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 11px/1.4 var(--sans);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.sched-legend__sw { width: 14px; height: 14px; border: 2px solid var(--ink); flex: none; }

/* category colours */
.cat-show   { --c-bg: var(--canyon-ui); --c-fg: #fff; --c-bd: var(--ink); }
.cat-priv   { --c-bg: var(--plum); --c-fg: var(--yellow); --c-bd: var(--yellow); }
.cat-sem    { --c-bg: var(--sem-white); --c-fg: var(--ink); --c-bd: var(--ink); }
.cat-feat   { --c-bg: var(--ink); --c-fg: #fff; --c-bd: var(--ink); }
.cat-music  { --c-bg: var(--light-blue); --c-fg: var(--ink); --c-bd: var(--ink); }
.cat-member { --c-bg: var(--yellow); --c-fg: var(--ink); --c-bd: var(--ink); }
.cat-open   { --c-bg: var(--yellow); --c-fg: var(--ink); --c-bd: var(--ink); }
.cat-ghost  { --c-bg: transparent; --c-fg: var(--ink); --c-bd: rgb(var(--ink-rgb) / .4); }
.sched-legend__sw { background: var(--c-bg); border-color: var(--c-bd); }
.cat-ghost.sched-legend__sw { border-style: dashed; }

/* desktop grid */
.sched-cols { display: grid; grid-template-columns: 64px 32px 34px repeat(4, minmax(0, 1fr)); }
.sched-lanehead {
  display: grid;
  border-bottom: 3px solid var(--ink);
}
.sched-lanehead__cell {
  padding: 0 10px 10px;
  border-left: 1px solid rgb(var(--ink-rgb) / .22);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sched-lanehead__name { font: 800 24px/.95 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.sched-lanehead__sub { font: 400 11px/1.4 var(--sans); letter-spacing: .04em; }

.sched-grid { position: relative; }
.sched-dusk { grid-column: 1 / -1; background: var(--plum); border-top: 4px solid var(--canyon); }
.sched-sunset {
  grid-column: 4 / -1;
  justify-self: end;
  align-self: start;
  padding: 8px 10px;
  font: 500 11px/1.4 var(--sans);
  letter-spacing: .08em;
  color: var(--yellow);
  z-index: 2;
}
.sched-lanerule { grid-row: 1 / -1; border-left: 1px solid rgb(115 45 60 / .25); }
.sched-hourrule { grid-column: 1 / -1; border-top: 1px solid var(--line-12); pointer-events: none; }
.sched-hourrule--dusk { border-top-color: rgb(250 245 232 / .14); }
.sched-hour { grid-column: 1; display: flex; align-items: baseline; gap: 3px; padding-top: 4px; }
.sched-hour--dusk { color: var(--cream); }
.sched-hour__num { font: 800 24px/1 var(--display); }
.sched-hour__ap { font: 500 10px var(--sans); letter-spacing: .06em; }

.sched-open {
  grid-column: 2;
  margin: 3px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 0;
  overflow: hidden;
}
.sched-vlabel {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.sched-open .sched-vlabel { font: 700 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.sched-closed {
  grid-column: 3;
  margin: 3px;
  background: repeating-linear-gradient(-45deg, var(--canyon) 0 5px, var(--cream) 5px 10px);
  border: 2px solid var(--canyon);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
  overflow: hidden;
}
.sched-closed .sched-vlabel {
  font: 800 9px var(--sans);
  letter-spacing: .06em;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 4px 2px;
}

.sched-ghost {
  margin: 3px 7px;
  border: 2px dashed rgb(var(--ink-rgb) / .4);
  background: repeating-linear-gradient(-45deg, rgb(var(--ink-rgb) / .05) 0 6px, transparent 6px 12px);
  padding: 10px;
  font: 600 11px/1.4 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / .85);
}

.sched-block {
  margin: 3px 7px;
  cursor: pointer;
  text-align: left;
  background: var(--c-bg);
  color: var(--c-fg);
  border: 2px solid var(--c-bd);
  border-radius: 0;
  padding: 6px 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  position: relative;
  z-index: 2;
  transition: transform .12s ease, box-shadow .12s ease;
}
.sched-block--short { padding: 4px 7px; }
.sched-block:hover, .sched-block:focus-visible { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.sched-block:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sched-block[aria-expanded="true"] { outline: 3px solid var(--yellow); outline-offset: 1px; z-index: 3; }
.sched-block[aria-expanded="true"]:focus-visible { box-shadow: 4px 4px 0 var(--ink), 0 0 0 6px var(--ink); }
.sched-block__time { font: 500 10.5px/1.3 var(--sans); flex: none; }
.sched-block__title {
  font: 600 13px/1.2 var(--sans);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
.cat-show .sched-block__title, .cat-priv .sched-block__title { font: 800 21px/.95 var(--display); text-transform: uppercase; }
.cat-feat .sched-block__title { font: 800 15px/1.04 var(--display); text-transform: uppercase; }

/* Airshow band: the show spans every other lane in a lighter orange, with a towed banner */
.sched-airband {
  grid-column: 5 / -1;
  margin: 3px 7px 3px -9px; /* tucks under the Airfield block's edge so the two read as one */
  position: relative;
  z-index: 1;
  cursor: pointer;
  background: rgb(236 70 23 / .16);
  border: 2px solid rgb(236 70 23 / .4);
  border-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sched-airband.cat-priv { background: rgb(252 186 67 / .2); border-color: rgb(252 186 67 / .55); }
.sched-airband:hover { background: rgb(236 70 23 / .24); }
.sched-airband.cat-priv:hover { background: rgb(252 186 67 / .3); }
/* White outlines keep the plane and tow line visible over the dark dusk band too */
.sched-tow { display: flex; align-items: center; color: var(--ink); }
.sched-tow__plane { width: 40px; height: 17px; fill: currentColor; stroke: #fff; stroke-width: 1.6px; paint-order: stroke; flex: none; overflow: visible; }
.sched-tow__rope { width: 26px; border-top: 1.5px solid currentColor; box-shadow: 0 -1px 0 #fff, 0 1px 0 #fff; flex: none; }
.sched-tow__banner {
  background: #fff;
  border: 2px solid var(--canyon-ui);
  padding: 4px 18px 4px 12px;
  font: 800 17px/1 var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--canyon-ui);
  /* notched tail, like a towed banner */
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%);
}
.cat-priv .sched-tow__banner { border-color: var(--plum); color: var(--plum); }

/* popover */
.sched-pop {
  position: absolute;
  z-index: 5;
  width: 340px;
  max-width: calc(100% - 12px);
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sched-pop:focus { outline: none; }
.sched-pop:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sched-pop__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sched-tag {
  font: 600 11px/1.4 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--c-bg);
  color: var(--c-fg);
  border: 2px solid var(--ink);
  padding: 3px 8px;
}
.cat-sem.sched-tag { background: #fff; }
.sched-close {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 6px 0 6px 8px;
  font: 600 12px var(--sans);
  letter-spacing: .08em;
  color: var(--ink);
}
.sched-close:hover { color: var(--canyon-deep); }
.sched-pop__title { font: 800 30px/.95 var(--display); text-transform: uppercase; text-wrap: pretty; }
.sched-pop__desc { font-size: 14px; line-height: 1.45; }
.sched-pop__dl {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 4px 10px;
  font: 400 12px/1.5 var(--sans);
  border-top: 2px solid var(--ink);
  padding-top: 12px;
  margin: 0;
}
.sched-pop__dl dd { margin: 0; }
.sched-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sched-btn {
  cursor: pointer;
  background: var(--ink);
  color: var(--cream);
  border: 2px solid var(--ink);
  padding: 9px 14px;
  font: 800 16px/1 var(--display);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
}
.sched-btn:hover { background: var(--plum); color: var(--cream); }
.sched-btn--yellow { background: var(--yellow); color: var(--ink); }
.sched-btn--yellow:hover { background: #fdcb70; color: var(--ink); }
.sched-btn--light { background: var(--cream); color: var(--ink); padding: 8px 12px; font-size: 15px; }
.sched-btn--light:hover { background: #fff; color: var(--ink); }

.sched-foot { font: 400 12px/1.5 var(--sans); margin-top: 14px; letter-spacing: .03em; }

/* mobile list */
.sched--mobile .sched-panel { padding: 16px 14px; }
.sched--mobile .sched-panel { padding-top: 14px; }
.sched--mobile .sched-sticky__key { padding: 12px 14px; }
.sched-lanes { display: grid; grid-template-columns: 1fr 1fr; }
.sched-lane {
  cursor: pointer;
  border: 2px solid var(--ink);
  margin: -1px;
  background: transparent;
  color: var(--ink);
  padding: 10px 8px;
  font: 700 17px/1 var(--display);
  text-transform: uppercase;
  letter-spacing: .04em;
  min-height: 44px;
}
.sched-lane[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.sched-lane:focus-visible { position: relative; z-index: 1; outline-offset: 2px; }

.sched-list { display: flex; flex-direction: column; gap: 10px; }
.sched-list__sun {
  background: var(--plum);
  border-top: 4px solid var(--canyon);
  color: var(--yellow);
  font: 500 11px/1.4 var(--sans);
  letter-spacing: .08em;
  padding: 8px 10px;
}
.sched-list__ops { display: flex; gap: 12px; font: 400 12px/1.4 var(--sans); padding: 2px 0; }
.sched-list__ops b { width: 76px; flex: none; font-weight: 600; }
.sched-list__air {
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  background: rgb(236 70 23 / .14);
  border: 2px solid rgb(236 70 23 / .4);
  font: 600 13px/1.4 var(--sans);
}
.sched-list__air.cat-priv { background: rgb(252 186 67 / .2); border-color: rgb(252 186 67 / .55); }
.sched-list__air b { width: 92px; flex: none; font-weight: 500; }
.sched-list__ghost {
  border: 2px dashed rgb(var(--ink-rgb) / .45);
  background: repeating-linear-gradient(-45deg, rgb(var(--ink-rgb) / .06) 0 6px, transparent 6px 12px);
  padding: 16px 14px;
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sched-card {
  border: 2px solid var(--c-bd);
  box-shadow: 3px 3px 0 var(--ink);
  background: var(--c-bg);
  color: var(--c-fg);
  margin-right: 3px;
}
.sched-card__btn {
  cursor: pointer;
  text-align: left;
  border: 0;
  background: none;
  color: inherit;
  width: 100%;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sched-card__btn:focus-visible { outline-offset: -5px; outline-color: currentColor; }
.sched-card__meta { display: flex; justify-content: space-between; font: 500 11px/1.4 var(--sans); }
.sched-card__title { font: 600 15px/1.3 var(--sans); }
.cat-show .sched-card__title, .cat-priv .sched-card__title { font: 800 24px/1 var(--display); text-transform: uppercase; }
.sched-card__chev::before { content: '+'; }
.sched-card__btn[aria-expanded="true"] .sched-card__chev::before { content: '–'; }
.sched-card__body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.45; }
.sched-card__body[hidden] { display: none; }
.sched-card__venue { font: 400 12px/1.4 var(--sans); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .sched-block:hover, .sched-block:focus-visible { transform: none; }
}

@media (forced-colors: active) {
  .sched-block, .sched-card, .sched-tab, .sched-lane { border-color: CanvasText; }
  .sched-tab[aria-selected="true"], .sched-lane[aria-pressed="true"] { outline: 3px solid Highlight; }
}