/* =========================================================
   Fort Dance — stylesheet
   Edit colors, fonts, and spacing in :root below.
   Most other styles cascade from those variables.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,400;0,500;0,700;1,400&family=Raleway:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,300;1,400&display=swap");

@font-face {
  font-family: "TAY Watkins";
  src: url("/assets/fonts/TAYWatkins.woff2") format("woff2"),
       url("/assets/fonts/TAYWatkins.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg:         #FAF6EE;
  --color-surface:    #FAF6EE;
  --color-soft:       #F0E8D8;
  --color-ink:        #181410;
  --color-muted:      #4A3E38;
  --color-accent:     #CC3D1A;
  --color-accent-dk:  #A62E10;
  --color-line:       #E8DDD0;
  --color-overlay:    rgba(24, 20, 16, 0.18);

  --font-display: "TAY Watkins", "Anton", "Bebas Neue", Impact, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Raleway", "Epilogue", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;

  --max-width:      1180px;
  --content-width:  760px;
  --radius:         16px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--color-accent-dk);
  transition: color 120ms ease;
}
a:hover { color: var(--color-muted); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 0.6em;
  color: var(--color-ink);
}
h1 { font-size: clamp(2.5rem, 7vw, 5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.25rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.25rem, 2.4vw, 1.65rem); }

p {
  margin: 0 0 1em;
  color: var(--color-ink);
}
p.lead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--color-ink);
}

ul.unstyled { list-style: none; padding: 0; margin: 0; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.content {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  padding: 1.5rem 0;
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-ink);
  line-height: 0;
}
.brand-mark {
  display: block;
  height: clamp(44px, 5vw, 64px);
  width: auto;
  max-width: 100%;
}

.nav { display: flex; gap: 2rem; align-items: center; }
.nav a {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0;
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 120ms ease;
}
.nav a:hover { color: var(--color-muted); }
.nav a.active {
  border-bottom: 2px solid var(--color-ink);
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: clamp(420px, 80vh, 760px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: clamp(1rem, 2.5vw, 1.75rem) 1.5rem clamp(2rem, 5vw, 3.5rem);
  background-color: #2a2a2a;
  background-image: url("/assets/images/hero-field.webp");
  background-size: cover;
  background-position: center top;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0) 60%);
  pointer-events: none;
}
.hero .content {
  position: relative;
  max-width: 80rem;
  width: 100%;
}
.hero h1, .hero h2 {
  color: #fff;
  margin-bottom: 1rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
.hero h1 {
  font-size: clamp(1rem, 3.6vw, 3rem);
  white-space: nowrap;
}
.hero p {
  color: #fff;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  max-width: 76rem;
  margin: 0 auto 0.4rem;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

/* =========================================================
   Sections
   ========================================================= */
.section {
  padding: clamp(3rem, 7vw, 6rem) 1.5rem;
}
.section--soft { background: var(--color-soft); }
.section--dark { background: var(--color-ink); color: #fff; }
/* Collapse the top padding when two adjacent sections share a background,
   so they read as one continuous stretch instead of leaving a double gap. */
.section:not(.section--soft):not(.section--dark) + .section:not(.section--soft):not(.section--dark) { padding-top: 0; }
.section--soft + .section--soft { padding-top: 0; }
.section--dark + .section--dark { padding-top: 0; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: #fff; }
.section--center { text-align: center; }
.section .content { display: block; }

/* Compact white intro band for top-level pages
   (/faculty, /classes, /about). The h1 is tuned, and section padding
   trimmed, so the cream body section that follows starts high enough
   for the first row of cards / the body content to land above the
   fold on a typical laptop. */
.section--page-header {
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-bottom: clamp(0.75rem, 2vw, 1.5rem);
}
.section--page-header h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin-bottom: 0.4rem;
}
.section--page-header p.lead { margin-bottom: 0; }
.section--page-header + .section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

.section h4 { margin-top: 2.25rem; }
.section h4:first-child { margin-top: 0; }

.section ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0 0 1em;
}
.section ul li { margin-bottom: 0.25rem; }

.feature-image {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: block;
}

/* =========================================================
   Coming-soon banner
   ========================================================= */
.coming-soon {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  background: var(--color-soft);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.coming-soon h4 {
  max-width: 36rem;
  margin: 0 auto;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.25;
}

/* =========================================================
   Form
   ========================================================= */
.signup-form {
  max-width: 520px;
  margin: 2rem auto 0;
  text-align: left;
}
.signup-form .field {
  margin-bottom: 1rem;
}
.signup-form label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: var(--color-ink);
}
.signup-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form input[type="tel"],
.signup-form input[type="number"] {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  font: inherit;
  color: var(--color-ink);
  border-radius: var(--radius);
}
.signup-form input:focus {
  outline: 2px solid var(--color-ink);
  outline-offset: 1px;
}
.signup-form input.is-invalid {
  border-color: #8a2a1e;
}
.signup-form input.is-invalid:focus {
  outline-color: #8a2a1e;
}
.signup-form .field-error {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: #8a2a1e;
  line-height: 1.35;
}
.signup-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}
.signup-form legend {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.signup-form .checkbox-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
}
.signup-form .checkbox-list label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  margin: 0;
}
.signup-form .checkbox-list input { margin: 0; }
.signup-form button {
  display: inline-block;
  padding: 0.85rem 2rem;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--color-ink);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 120ms ease;
}
.signup-form button:hover { background: var(--color-muted); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--color-line);
  padding: 2.5rem 0 4rem;
  font-size: 0.9rem;
  color: var(--color-muted);
  text-align: center;
}
.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.social-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1rem;
}
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-ink);
  text-decoration: none;
  border-radius: 999px;
  transition: background 120ms ease;
}
.social-links a:hover { background: var(--color-soft); }

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  font-size: 0.95rem;
}
.footer-contact a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 2px;
}
.footer-contact a:hover {
  color: var(--color-muted);
  border-bottom-color: var(--color-muted);
}

/* =========================================================
   Contact CTA (home page) and contact hero (about page)
   ========================================================= */
.contact-cta {
  margin: 1.25rem auto 0;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.7;
}
.contact-cta a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 2px;
}
.contact-cta a:hover {
  color: var(--color-muted);
  border-bottom-color: var(--color-muted);
}

/* Interest-list CTA used under the founder's note on the home page.
   Period-appropriate: small-caps, tracked out, framed by a single rule
   rather than a rounded pill. */
.interest-cta {
  margin: 2rem 0 0;
  text-align: center;
}
.interest-cta a {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--color-ink);
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.interest-cta a:hover,
.interest-cta a:focus {
  background: var(--color-ink);
  color: var(--color-surface);
}

/* When the CTA wraps a <details> form (interest-list signup on the
   home page), the <summary> takes the role the link played above:
   it's the framed, small-caps, tracked-out button the visitor clicks
   to reveal the form. The form itself styles via .signup-form rules. */
.interest-cta--form {
  display: block;
}
.interest-cta--form > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  padding: 0.7rem 1.6rem;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--color-ink);
  background: var(--color-surface);
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.interest-cta--form > summary::-webkit-details-marker { display: none; }
.interest-cta--form > summary:hover,
.interest-cta--form > summary:focus {
  background: var(--color-ink);
  color: var(--color-surface);
  outline: none;
}
.interest-cta--form[open] > summary {
  background: var(--color-ink);
  color: var(--color-surface);
}

.interest-form {
  margin: 1.5rem auto 0;
  max-width: 520px;
  text-align: left;
}
.interest-form__intro {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  color: var(--color-muted);
  text-align: center;
}
.interest-form__honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.interest-form__submit {
  margin-top: 0.5rem;
  text-align: center;
}
.interest-form__status {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  min-height: 1.5em;
  color: var(--color-muted);
}
.interest-form__status.is-pending { color: var(--color-muted); }
.interest-form__status.is-success { color: var(--color-ink); font-weight: 500; }
.interest-form__status.is-error   { color: #8a2a1e; }

.contact-hero .contact-lines {
  margin: 1.5rem 0 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.contact-hero .contact-lines a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--color-ink);
  padding-bottom: 4px;
}
.contact-hero .contact-lines a:hover {
  color: var(--color-muted);
  border-bottom-color: var(--color-muted);
}
.contact-hero .contact-social {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-muted);
}
.contact-hero .contact-social a {
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 2px;
}
.contact-hero .contact-social a:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

/* =========================================================
   Faculty
   ========================================================= */
.faculty-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.faculty-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.faculty-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.faculty-card__media {
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--color-soft);
  overflow: hidden;
}
.faculty-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.faculty-card__media--placeholder {
  aspect-ratio: auto;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--color-muted);
  text-align: center;
  padding: 2rem 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.faculty-card__body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.faculty-card__name {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin: 0;
}
.faculty-card__name a {
  text-decoration: none;
  color: var(--color-ink);
}
.faculty-card__name a:hover { color: var(--color-muted); }
.faculty-card__role {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.faculty-card__tagline {
  margin: 0;
  color: var(--color-ink);
  font-size: 0.95rem;
}
.faculty-card__cta {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.faculty-card__cta a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 2px;
}
.faculty-card__cta a:hover {
  color: var(--color-muted);
  border-bottom-color: var(--color-muted);
}

.faculty-detail__split {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) 1.5rem 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.faculty-detail__hero {
  margin: 0;
  width: 100%;
  position: sticky;
  top: 6rem;
}
.faculty-detail__hero img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}
.faculty-detail__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faculty-detail__body h1 {
  margin: 0;
}
.faculty-detail__eyebrow {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.faculty-detail__eyebrow a {
  color: var(--color-muted);
  text-decoration: none;
}
.faculty-detail__eyebrow a:hover { color: var(--color-ink); }
.faculty-detail__role {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.faculty-detail__bio {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.faculty-detail__bio p {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.7;
}

@media (max-width: 720px) {
  .faculty-detail__split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .faculty-detail__hero { position: static; }
}

/* =========================================================
   Home page: image-left + copy-right split block
   Used for the "Why Fort Dance" section so the studio photo
   sits beside the section copy on desktop, stacks on mobile.
   ========================================================= */
.home-split {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.home-split__image {
  width: 100%;
  height: auto;
  display: block;
  position: sticky;
  top: 6rem;
}
.home-split__content { width: 100%; }

@media (max-width: 720px) {
  .home-split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .home-split__content { order: 1; }
  .home-split__image { position: static; order: 2; }
}

/* =========================================================
   Home page: Offerings link list
   ========================================================= */
.offerings a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 1px;
  transition: border-color 120ms ease, color 120ms ease;
}
.offerings a:hover {
  color: var(--color-muted);
  border-bottom-color: var(--color-ink);
}
h4 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--color-line);
  padding-bottom: 2px;
}
h4 a:hover { border-bottom-color: var(--color-ink); }

/* =========================================================
   Classes
   ========================================================= */
.class-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.class-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.class-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.class-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--color-soft);
  overflow: hidden;
}
.class-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.class-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--color-muted);
  text-align: center;
  padding: 2rem 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.class-card__body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.class-card__name {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin: 0;
}
.class-card__name a {
  text-decoration: none;
  color: var(--color-ink);
}
.class-card__name a:hover { color: var(--color-muted); }
.class-card__age {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.class-card__tagline {
  margin: 0;
  color: var(--color-ink);
  font-size: 0.95rem;
}
.class-card__cta {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.class-card__cta a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 2px;
}
.class-card__cta a:hover {
  color: var(--color-muted);
  border-bottom-color: var(--color-muted);
}

/* Pricing table (e.g. summer tuition on /classes). Plain
   black-and-white grid that matches the rest of the page chrome. */
.pricing-table {
  width: 100%;
  max-width: 32rem;
  margin: 1.5rem 0 0;
  border-collapse: collapse;
  font-size: 1rem;
}
.pricing-table caption {
  text-align: left;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}
.pricing-table thead th {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--color-ink);
  color: var(--color-ink);
}
.pricing-table tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--color-ink);
}
.pricing-table tbody th,
.pricing-table tbody td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-line);
}
.pricing-table tbody tr:last-child th,
.pricing-table tbody tr:last-child td {
  border-bottom: none;
}
.pricing-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

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

/* Summer camp listing: thumbnails crop to the top of each flyer
   (above the divider line) so the title art shows in the card and
   the dense detail text on the flyer stays out of frame. The full
   descriptive copy lives in HTML below the thumbnail. */
.summer-list .class-card__media {
  aspect-ratio: 3 / 2;
}
.summer-list .class-card__media img {
  object-position: top center;
}

.class-detail__header {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem 1rem;
}
.class-detail__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.class-detail__eyebrow a {
  color: var(--color-muted);
  text-decoration: none;
}
.class-detail__eyebrow a:hover { color: var(--color-ink); }
.class-detail__age {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.class-detail__tagline {
  margin: 0 auto;
  max-width: 36rem;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--color-ink);
}
.class-detail__hero {
  width: 100%;
  max-width: 720px;
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
}
.class-detail__hero img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}
.class-detail .section .content p {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.7;
}

.class-detail__sections {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}
.class-detail__section {
  display: block;
}
.class-detail__section h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
}
.class-detail__section p {
  margin: 0 0 1rem;
}
.class-detail__levels-label {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.class-detail__levels {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--color-line);
}
.class-detail__levels li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-line);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
}

/* =========================================================
   Company page: full-bleed hero photo + request-packet form
   ========================================================= */
.company-hero {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.company-hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  aspect-ratio: 1024 / 632;
  object-fit: cover;
}

.packet-form {
  max-width: 640px;
}
.packet-form .packet-form__submit {
  margin-top: 0.5rem;
  text-align: center;
}
.packet-form__honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.packet-form__status {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  min-height: 1.5em;
  color: var(--color-muted);
}
.packet-form__status.is-pending { color: var(--color-muted); }
.packet-form__status.is-success { color: var(--color-ink); font-weight: 500; }
.packet-form__status.is-error   { color: #8a2a1e; }

/* =========================================================
   About page: alternating copy + visual rows, info grid
   ========================================================= */
.about-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
/* When two .about-row blocks share a single section, give the
   second one breathing room from the first. */
.about-row + .about-row { margin-top: clamp(3rem, 6vw, 5rem); }
/* Flip the column order on desktop so visuals alternate sides
   between rows. The HTML keeps reading order for source-order
   accessibility; only the rendered columns swap. */
.about-row--reverse > :first-child { order: 2; }
.about-row--reverse > :last-child { order: 1; }

.about-copy h1 { margin-bottom: 1rem; }
.about-copy h3 { margin-top: 2.25rem; }
.about-copy > :first-child { margin-top: 0; }

.about-figure {
  position: sticky;
  top: 7rem;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-line);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
  background: var(--color-soft);
}
.about-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.map-embed {
  position: sticky;
  top: 7rem;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-line);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================
   FAQ: click-to-reveal questions (native <details>/<summary>)
   ========================================================= */
.faq {
  border-top: 1px solid var(--color-line);
}
.faq-item {
  border-bottom: 1px solid var(--color-line);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-ink);
  transition: color 120ms ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-muted); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 4px;
}
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-ink);
  transition: transform 200ms ease;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-answer {
  padding: 0 0 1.25rem;
  color: var(--color-muted);
}
.faq-answer > :first-child { margin-top: 0; }
.faq-answer > :last-child { margin-bottom: 0; }
.faq-answer ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0 0 1em;
}
.faq-answer ul li { margin-bottom: 0.25rem; }

.section-title {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}
.info-grid h4 {
  margin: 0 0 0.5rem;
}
.info-grid p {
  margin: 0 0 0.5rem;
}

/* =========================================================
   Schedule grid — summer class schedule, five-column layout
   ========================================================= */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 2px solid var(--color-ink);
  border-left: 2px solid var(--color-ink);
  margin: 2rem 0 0;
}

.schedule-day {
  border-right: 2px solid var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
}

.schedule-day__name {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.65rem 1rem;
  background: var(--color-ink);
  color: #fff;
  margin: 0;
}

.schedule-day__classes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.schedule-class {
  display: grid;
  grid-template-rows: auto auto auto;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--color-line);
  gap: 0.1rem;
}

.schedule-class:last-child {
  border-bottom: none;
}

.schedule-class__time {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  text-transform: uppercase;
}

.schedule-class__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.3;
}

.schedule-class__age {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--color-muted);
  display: block;
}

.schedule-class__instructor {
  font-size: 0.8rem;
  color: var(--color-accent-dk);
  font-weight: 500;
}

.schedule-class--popup .schedule-class__name {
  color: var(--color-accent-dk);
}

@media (max-width: 900px) {
  .schedule-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .schedule-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Mobile tab bar — fixed to the bottom of the viewport on
   small screens, hidden on desktop. Replaces the desktop top
   nav on phones; both share the same icon set.
   ========================================================= */
.mobile-tabbar { display: none; }

@media (max-width: 720px) {
  .nav { display: none; }

  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    justify-content: space-around;
    align-items: stretch;
    padding: 0.4rem 0.25rem;
    padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0));
    background: var(--color-surface);
    border-top: 1px solid var(--color-line);
  }
  .mobile-tabbar a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.15rem;
    color: var(--color-ink);
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
  }
  .mobile-tabbar a.active {
    border-top: 2px solid var(--color-ink);
    padding-top: calc(0.6rem - 2px);
  }

  /* Reserve space at the bottom of the page so the fixed tabbar
     doesn't cover the footer on the last scroll. */
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0));
  }

  .signup-form .field-row { grid-template-columns: 1fr; }

  .about-row { grid-template-columns: 1fr; gap: 2rem; }
  /* On mobile, force natural source order so the heading appears first
     even on rows where desktop swaps the columns. */
  .about-row--reverse > :first-child,
  .about-row--reverse > :last-child { order: initial; }
  .about-figure { position: relative; top: auto; max-width: 28rem; margin: 0 auto; }
  .map-embed { aspect-ratio: 4 / 3; max-height: 420px; position: relative; top: auto; }
}

/* Extra-narrow phones (iPhone SE, 13 mini, etc.): step the tab bar
   labels down one more notch so "REGISTER" doesn't crowd "ABOUT". */
@media (max-width: 380px) {
  .mobile-tabbar a {
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    padding: 0.6rem 0.1rem;
  }
}