/* ============================================================
   Aclassicaltone landing page styles
   Hero, piano-key divider, programme, feature rows, closing.
   Requires css/base.css first.
   ============================================================ */

/* ============================================================
   Hero: typographic poster
   ============================================================ */
.hero {
  padding: 96px 0 88px;
  text-align: center;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4rem, 15vw, 11rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.hero h1 .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.hero h1 .word > span { display: inline-block; }
.hero h1 em { font-style: italic; }

.hero-sub {
  max-width: 46ch;
  margin: 34px auto 0;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: #4C463D;
}
.hero-sub strong { font-weight: 600; color: var(--ink); }

.hero-ctas {
  margin-top: 42px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-note {
  margin-top: 24px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--grey);
}

/* ============================================================
   Piano-key divider (keys built by js/landing.js)
   ============================================================ */
.keys {
  position: relative;
  height: 64px;
  display: flex;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.keys .white {
  flex: 1;
  border-right: 1px solid var(--rule);
  background: var(--paper);
}
.keys .white:last-child { border-right: none; }
.keys .black {
  position: absolute;
  top: 0;
  width: 3.6%;
  height: 58%;
  background: var(--ink);
  transform: translateX(-50%);
}

/* ============================================================
   Programme: the three movements
   Static stacked by default (mobile + reduced motion + no-JS).
   Desktop with motion gets .is-pinned added by JS.
   ============================================================ */
.programme { padding: 104px 0; }

.programme-head {
  margin-bottom: 72px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.programme-head .smallcaps { color: var(--gold-deep); }
.programme-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  line-height: 1.12;
  max-width: 20ch;
}

.movements { position: relative; }

.movement {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  padding: 44px 0;
  border-top: 1px solid var(--rule);
}

.movement .numeral {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
}

.movement h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  margin-bottom: 12px;
}

.movement p {
  max-width: 52ch;
  color: #4C463D;
}

/* Pinned desktop layout, applied by JS only */
.is-pinned .movements {
  height: 62vh;
  min-height: 420px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: center;
}
.is-pinned .rail {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.is-pinned .rail::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 100%;
  background: var(--rule);
}
.is-pinned .rail .fill {
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 100%;
  background: var(--gold);
  transform-origin: top;
  transform: scaleY(0);
}
.is-pinned .rail .numeral-live {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 8vw, 6rem);
  color: var(--gold);
  padding-left: 36px;
}
.is-pinned .stage { position: relative; height: 100%; }
.is-pinned .movement {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: none;
  padding: 0;
  opacity: 0;
}
.is-pinned .movement:first-of-type { opacity: 1; }
.is-pinned .movement .numeral { display: none; }

.rail { display: none; }
.is-pinned .rail { display: flex; }

/* ============================================================
   Inside: feature rows with icons
   ============================================================ */
.inside {
  padding: 96px 0 110px;
}
.inside .smallcaps { color: var(--gold-deep); margin-bottom: 48px; }

.row {
  display: grid;
  grid-template-columns: 48px minmax(180px, 1fr) 2fr;
  gap: 28px;
  padding: 34px 0;
  border-top: 1px solid var(--rule);
  transition: padding-left 0.3s ease;
}

.row-icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
}
.row-icon svg { width: 20px; height: 20px; }

.row:last-of-type { border-bottom: 1px solid var(--rule); }
.row:hover { padding-left: 10px; }

.row h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.25;
}
.row p { color: #4C463D; max-width: 56ch; }

.soon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border: 1px solid var(--gold);
  border-radius: 100px;
  padding: 3px 10px;
  transform: translateY(-2px);
}

.inside-footnote {
  margin-top: 36px;
  font-size: 0.84rem;
  color: var(--grey);
}

/* ============================================================
   Closing: ink
   ============================================================ */
.closing {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: 130px 0;
}
.closing h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.5vw, 4.4rem);
  line-height: 1.06;
  max-width: 16ch;
  margin: 0 auto 20px;
}
.closing h2 em { font-style: italic; color: var(--gold); }
.closing p {
  color: rgba(252, 251, 248, 0.66);
  max-width: 42ch;
  margin: 0 auto 42px;
}
.closing .btn-gold { background: var(--paper); color: var(--ink); }
.closing .btn-gold:hover { background: #E9E5DC; }

/* ============================================================
   Mobile: designed at 380px first
   ============================================================ */
@media (max-width: 860px) {
  .hero { padding: 72px 0 68px; }
  .programme { padding: 76px 0; }
  .programme-head { margin-bottom: 48px; }
  .movement { grid-template-columns: 1fr; gap: 10px; padding: 34px 0; }
  .movement .numeral { font-size: 2.2rem; }
  .inside { padding: 72px 0 84px; }
  .row {
    grid-template-columns: 44px 1fr;
    gap: 14px 16px;
    padding: 28px 0;
    align-items: center;
  }
  .row p { grid-column: 1 / -1; }
  .row:hover { padding-left: 0; }
  .closing { padding: 92px 0; }
  .keys .black { width: 4.6%; }
}

@media (max-width: 480px) {
  .hero-ctas .btn { width: 100%; text-align: center; }
  .keys { height: 52px; }
}