/* ==========================================================================
   Contessa — home page
   ========================================================================== */

/* ---------- Hero: the Contessa cover ---------- */
.hero { position: relative; }
.hero__stage {
  --mast: var(--fs-mast);
  --slot-bottom: calc(3.6vh + 0.4 * var(--mast));
  --slot-reserve: calc(var(--nav-h) + 3vh);
  --slot-h: min(calc(clamp(210px, 22vw, 370px) * 1.6), calc(100svh - var(--slot-reserve) - var(--slot-bottom)));
  --slot-w: calc(var(--slot-h) / 1.6);
  position: relative; height: 100svh; min-height: 560px; overflow: hidden;
  background: var(--ink); color: var(--porcelain);
}
.hero__slot, .hero__aperture:not(.is-live) {
  position: absolute; left: 50%; bottom: var(--slot-bottom);
  width: var(--slot-w); height: var(--slot-h); transform: translateX(-50%);
}
.hero__slot { visibility: hidden; pointer-events: none; }
.hero__aperture { z-index: 2; overflow: hidden; background: var(--ink-2); }
.hero__aperture.is-live { position: absolute; inset: 0; width: auto; height: auto; transform: none; -webkit-clip-path: none; clip-path: none; }
/* Each layer is sized by JS to the nail box (and grows with it), so the whole portrait photo sits in the nail. */
.hero__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease-out); }
.hero__layer.is-on { opacity: 1; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 13, 15, 0) 40%, rgba(17, 13, 15, 0.55) 100%); opacity: 0; }

.hero__mast {
  position: absolute; left: 0; right: 0; bottom: 3.2vh; z-index: 1;
  text-align: center; line-height: 0.86; pointer-events: none;
}
.hero__mast-word {
  display: inline-block; font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: var(--mast); letter-spacing: -0.045em; white-space: nowrap;
  font-variation-settings: 'opsz' 96;
  color: var(--porcelain);
}
.hero__mast-word .ch { display: inline-block; }

/* Cover lines: kept deliberately sparse — masthead and nail carry the hero. */
.hero__intro { position: absolute; z-index: 3; left: var(--gutter); top: calc(var(--nav-h) + 8vh); max-width: 16rem; display: grid; gap: 0.6rem; }
.hero__intro .label { color: var(--muted-dark); }
.hero__role { font-family: var(--f-display); font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem); line-height: 1.25; }
.hero__links { font-size: 0.9rem; margin-top: 0.2rem; }
.hero__shape {
  position: absolute; z-index: 3; left: calc(50% + var(--slot-w) / 2 + 1.1rem);
  bottom: calc(var(--slot-bottom) + var(--slot-h) * 0.62);
  display: flex; align-items: baseline; gap: 0.5rem; color: var(--muted-dark); white-space: nowrap;
}
.hero__shape em { font-family: var(--f-display); font-size: 1.25rem; color: var(--porcelain); }
.hero__shape em.is-swap { animation: shapeSwap 700ms var(--ease-out); }
@keyframes shapeSwap { 0% { opacity: 0; transform: translateY(40%); } 100% { opacity: 1; transform: none; } }
.hero__motto {
  position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: 12vh;
  font-family: var(--f-display); font-size: clamp(2.8rem, 1rem + 7vw, 8.5rem); line-height: 0.95; letter-spacing: -0.03em;
  color: var(--bone); opacity: 0; pointer-events: none; text-shadow: 0 2px 40px rgba(17, 13, 15, 0.35);
}
.no-js-hero .hero__motto { display: none; }

@media (max-width: 760px) {
  .hero__stage { --slot-reserve: calc(var(--nav-h) + 9.5rem); --slot-h: min(calc(72vw * 1.6), calc(100svh - var(--slot-reserve) - var(--slot-bottom))); }
  .hero__intro { top: calc(var(--nav-h) + 1.2rem); max-width: 80%; }
  .hero__shape { display: none; }
  .hero__motto { bottom: 16vh; }
}

/* ---------- Statement ---------- */
.statement { padding: var(--space-2xl) 0 var(--space-xl); }
.statement__label { margin-bottom: var(--space-m); color: var(--muted); }
.statement__text {
  font-family: var(--f-display); font-size: clamp(2rem, 1rem + 4.2vw, 5.4rem); line-height: 1.08; letter-spacing: -0.025em;
  max-width: 19ch;
}
.inline-nail { display: inline-block; width: 0.62em; height: 0.92em; vertical-align: -0.12em; margin-inline: 0.06em; }
.inline-nail img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Section heads ---------- */
.sec-head { display: grid; gap: 0.9rem; margin-bottom: var(--space-l); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .sec-head { grid-template-columns: 1fr minmax(16rem, 22rem); align-items: end; }
  .sec-head .label { grid-column: 1 / -1; }
  .sec-head__aside { justify-self: end; }
}
.sec-head__aside { color: var(--muted); font-size: 0.95rem; max-width: 30ch; }
.svc-preview__foot { display: flex; align-items: center; gap: 1.75rem; margin-top: var(--space-m); flex-wrap: wrap; }

/* ---------- Academy rail ---------- */
.rail { position: relative; padding-block: var(--space-xl) var(--space-l); overflow: hidden; }
.rail__pin { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
.rail__head { padding-inline: var(--gutter); display: grid; gap: 1rem; max-width: 60rem; }
.rail__lead { color: var(--muted); max-width: 46ch; }
.rail__head .link-u { justify-self: start; }
.rail__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--gutter); }
.rail__viewport::-webkit-scrollbar { display: none; }
.rail__track { display: flex; gap: clamp(1.25rem, 2.5vw, 2.75rem); width: max-content; padding-right: var(--gutter); }
.rail__track .course-card { width: clamp(260px, 26vw, 380px); scroll-snap-align: start; }
.rail__track .course-card:nth-child(even) { margin-top: clamp(2rem, 6vw, 6rem); }
.rail__bar { margin-inline: var(--gutter); height: 1px; background: var(--line); position: relative; }
.rail__bar span { position: absolute; inset: 0; background: var(--nude); transform-origin: left; transform: scaleX(0.15); }
/* Pinned (desktop): heading holds the left column, cards slide in from the right and vanish under it */
.rail.is-pinned { padding-block: 0; }
.rail.is-pinned .rail__pin {
  min-height: 100svh; grid-template-columns: minmax(260px, 0.4fr) minmax(0, 1fr); align-items: center; align-content: center;
  column-gap: clamp(1.5rem, 3vw, 3.5rem); row-gap: 2.5rem; padding-block: calc(var(--nav-h) + 1rem) 2.5rem;
}
.rail.is-pinned .rail__head { padding-right: 0; }
.rail.is-pinned .rail__viewport { overflow: hidden; scroll-snap-type: none; padding-left: 0; }
.rail.is-pinned .rail__track .course-card { width: clamp(240px, 21vw, 320px); }
.rail.is-pinned .rail__track .course-card:nth-child(even) { margin-top: 3rem; }
.rail.is-pinned .course-card__media { aspect-ratio: 3 / 3.7; }
.rail.is-pinned .rail__bar { grid-column: 1 / -1; }

/* ---------- Quote ---------- */
.quote { padding-block: var(--space-2xl); }
.quote__inner { display: grid; gap: var(--space-m); align-items: center; }
.quote__media { width: min(100%, 420px); aspect-ratio: 4 / 5.6; justify-self: center; }
.quote__text p { font-family: var(--f-display); font-size: clamp(2.1rem, 1rem + 4vw, 5rem); line-height: 1.04; letter-spacing: -0.025em; }
.quote__cap { color: var(--muted); }
@media (min-width: 900px) {
  .quote__inner { grid-template-columns: minmax(280px, 0.8fr) 1.2fr; column-gap: var(--space-l); }
  .quote__media { grid-row: span 2; }
  .quote__cap { align-self: start; }
}

/* ---------- Gallery strip ---------- */
.strip { padding-bottom: var(--space-xl); overflow: hidden; }
.strip__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: var(--space-l); }
.strip__aside { color: var(--muted); }
.strip .mq + .mq { margin-top: clamp(0.8rem, 1.5vw, 1.4rem); }
.strip .mq--rev .mq__item { aspect-ratio: 3 / 3.8; }

/* ---------- Gift promo ---------- */
.gift-promo__grid { display: grid; gap: var(--space-l); align-items: center; }
.gift-promo__media { overflow: hidden; border-radius: 2px; aspect-ratio: 1; }
.gift-promo__media img { width: 100%; height: 100%; object-fit: cover; }
.gift-promo__body { display: grid; gap: 1.2rem; justify-items: start; }
@media (min-width: 900px) { .gift-promo__grid { grid-template-columns: 1.05fr 0.95fr; } }