@font-face {
  font-family: "Inter Local";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Liqi Calendar Serif";
  src: url("/assets/fonts/LiqiCalendarSerif-Semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
.home-intro {
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 68px max(28px, calc((100vw - 1085px) / 2)) 72px;
  background: #f8f9f7;
}
.home-intro-inner {
  max-width: 1085px;
  margin-inline: auto;
  padding-left: 30px;
  border-left: 4px solid var(--palette-decoration);
}
.home-intro-statement {
  max-width: 900px;
  margin: 0;
  color: #173d36;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0;
}
.home-intro-detail {
  max-width: 800px;
  margin: 18px 0 0;
  color: #455b55;
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: 0;
}
.home-intro-note {
  max-width: 800px;
  margin: 16px 0 0;
  color: #526760;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0;
}

/* Shared recruitment component; public styles own module padding and headings. */
.camp-plans { --plan-gap: 16px; color: var(--palette-white); }
.camp-plans-header { text-align: center; }
.camp-plan-season { position: relative; padding-top: 24px; }
.camp-plan-season + .camp-plan-season { margin-top: 64px; }
.camp-plan-season > .camp-plan-season-sticker {
  position: absolute;
  top: 0;
  left: -12px;
  z-index: 3;
  width: max-content;
  margin: 0;
  padding: 8px 14px;
  border-radius: 4px;
  background: var(--palette-brand-yellow);
  color: var(--palette-forest);
  box-shadow: 0 3px 8px var(--palette-shadow);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.camp-plan-season[data-plan-season="winter"] > .camp-plan-season-sticker { left: calc(12.5% + var(--plan-gap) / 8 - 12px); }
.camp-plan-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: var(--plan-gap); }
/* Center three tracks within the same four-column rhythm. */
.camp-plan-row[data-count="3"] { width: calc(75% - var(--plan-gap) / 4); margin-inline: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.camp-plan-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 8px;
  background: var(--palette-forest);
  box-shadow: 0 12px 26px var(--palette-shadow);
  transition: transform .2s ease;
}
.camp-plan-card.is-open { outline: 2px solid var(--palette-focus); outline-offset: -2px; }
.camp-plan-poster {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0;
  background: var(--palette-forest); color: var(--palette-white); cursor: pointer; text-align: left;
}
.camp-plan-poster:focus-visible { outline: 3px solid var(--palette-focus); outline-offset: -3px; }
.camp-plan-poster picture, .camp-plan-poster img, .camp-plan-poster-empty { display: block; width: 100%; height: 100%; }
.camp-plan-poster img { object-fit: cover; }
.camp-plan-poster::after {
  position: absolute; inset: 56% 0 0; content: "";
  background: linear-gradient(transparent, color-mix(in srgb, var(--palette-forest) 88%, transparent));
  pointer-events: none;
}
.camp-plan-age {
  position: absolute; top: 24px; left: 20px; z-index: 2; padding: 6px 11px;
  border: 1px solid color-mix(in srgb, var(--palette-white) 50%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--palette-forest) 80%, transparent); color: var(--palette-white);
  font-size: 14px; line-height: 1.2; white-space: nowrap;
}
.camp-plan-name { position: absolute; z-index: 1; right: 20px; bottom: 24px; left: 20px; font-size: 26px; font-weight: 800; line-height: 1.25; }
.camp-plan-name > span { display: block; }
.camp-plan-english { display: block; margin-top: 8px; color: color-mix(in srgb, var(--palette-white) 85%, transparent); font: 14px/1.4 "Inter Local", sans-serif; letter-spacing: 0; }
.camp-plan-detail { display: none; }
.camp-plan-mobile-detail:empty { display: none; }
.camp-plan-mobile-detail:not(:empty) { margin-top: 24px; border: 1px solid color-mix(in srgb, var(--palette-white) 25%, transparent); border-radius: 8px; background: var(--palette-forest); color: var(--palette-white); }
.camp-plan-detail-inner { max-width: 720px; margin-inline: auto; padding: 28px; text-align: left; }
.camp-plan-detail-season { margin: 0 0 8px; }
.camp-plan-mobile-detail h3 { margin: 0; font-size: 26px; line-height: 1.25; }
.camp-plan-detail-description, .camp-plan-pending { margin: 16px 0 0; }
.camp-plan-facts { margin: 20px 0; padding-block: 16px; border-block: 1px solid var(--palette-divider); }
.camp-plan-facts > div { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); gap: 8px; }
.camp-plan-facts dd { margin: 0; }
.camp-plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.camp-plan-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 1px solid var(--palette-action); border-radius: 999px; background: var(--palette-action); color: var(--palette-action-ink); font-weight: 600; text-decoration: none; }
.camp-plan-detail-link { color: var(--palette-white); text-decoration: underline; text-underline-offset: 4px; }
.camp-plan-detail-link:hover { text-decoration-thickness: 2px; }
.camp-plan-notification { display: grid; justify-items: center; gap: 24px; margin-top: 56px; text-align: center; }
.camp-plan-notification > .camp-plan-notification-copy { margin: 0; color: var(--palette-white); font-size: 20px; font-weight: 400; line-height: 1.75; }
.camp-plan-notification > .button { min-height: 44px; padding: 10px 18px; font: 600 14px/1.8 var(--ds-font); }

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .camp-plan-card:hover { transform: translateY(-6px); } }
@media (min-width: 1024px) and (max-width: 1199px) { .camp-plan-name { left: 10px; right: 10px; } }
@media (max-width: 1023px) {
  .camp-plan-season { padding-top: 0; }
  .camp-plan-season > .camp-plan-season-sticker { position: static; margin-bottom: 16px; }
  .camp-plan-row, .camp-plan-row[data-count="3"] {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(72vw, 320px);
    justify-content: start; width: 100%; margin-inline: 0; padding-bottom: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  }
  .camp-plan-card { scroll-snap-align: start; }
  .camp-plan-name { font-size: 24px; left: 16px; right: 16px; bottom: 20px; }
}
@media (max-width: 767px) {
  .home-intro { padding: 44px 20px 50px; }
  .home-intro-inner { padding-left: 18px; border-left-width: 3px; }
  .home-intro-statement { font-size: 21px; line-height: 1.6; }
  .home-intro-detail { margin-top: 16px; font-size: 16px; line-height: 1.7; }
  .camp-plan-age { top: 18px; left: 16px; font-size: 13px; }
  .camp-plan-english { font-size: 13px; }
  .camp-plan-mobile-detail h3 { font-size: 21px; }
  .camp-plan-detail-inner { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .camp-plan-card { transition: none; } .camp-plan-card:hover { transform: none; } }