/* Cross-document view transition: the language toggle navigates between the
   prerendered / and /en/ pages, so let the browser cross-fade instead of blink.
   Ignored where unsupported. */
@view-transition{navigation:auto}

:root {
  --sage: #779179;
  --cream: #F3EFE3;
  --cream-bright: #FFFDF5;
}

html {
  scroll-behavior: smooth;
  /* Pre-reveal sections sit at translateX(±60px); without this on the root,
     mobile browsers widen the layout viewport to fit them and the fixed
     topbar overflows the screen. `clip` avoids creating a scroll container;
     the extra `hidden` line is the fallback for engines without clip. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--sage);
  color: var(--cream);
  font-family: 'Karla', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  min-height: 100vh;
}

a {
  color: var(--cream);
}

a:hover {
  color: var(--cream-bright);
}

::selection {
  background: rgba(243, 239, 227, 0.25);
}

input::placeholder,
textarea::placeholder {
  color: rgba(243, 239, 227, 0.45);
}

h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.25;
  margin: 0 0 26px;
}

.kicker {
  font-size: 12px;
  letter-spacing: 0.35em;
  opacity: 0.6;
  margin-bottom: 22px;
}

/* reveal animations */
[data-reveal] {
  opacity: 0;
  transition: opacity 1.1s ease, transform 1.1s ease;
}

[data-reveal="left"] {
  transform: translateX(-60px);
}

[data-reveal="right"] {
  transform: translateX(60px);
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateX(0);
}

/* top bar */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 36px;
  pointer-events: none;
  transition: background-color 0.4s ease;
}

/* past the hero the bar floats over body text, so give it a backdrop */
.topbar.scrolled {
  background-color: rgba(119, 145, 121, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.topbar-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  letter-spacing: 0.35em;
  pointer-events: auto;
}

.lang-toggle {
  pointer-events: auto;
  /* It is an <a> rather than a <button> now, so the two things anchors bring by
     default have to be undone: the underline, and inline layout inside .topbar. */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  background: none;
  border: 1px solid rgba(243, 239, 227, 0.4);
  border-radius: 999px;
  color: var(--cream);
  font-family: 'Karla', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.2em;
  padding: 8px 18px;
  cursor: pointer;
}

.lang-toggle:hover {
  border-color: var(--cream);
}

/* the sign-up pill is the primary action, so its outline is a step stronger */
.pill-solid {
  background: rgba(243, 239, 227, 0.08);
  border-color: var(--cream);
}

.pill-solid:hover {
  background: rgba(243, 239, 227, 0.16);
  border-color: var(--cream-bright);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none; /* the links re-enable it, like .lang-toggle */
}

/* hero */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}

.hero-title {
  margin: 0;
  line-height: 0;
}

.hero-logo {
  width: min(76vw, 345px);
  height: auto;
}

.hero-line {
  width: 1px;
  height: 70px;
  background: rgba(243, 239, 227, 0.4);
  margin-top: 70px;
}

.hero-scroll {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--cream-bright);
  opacity: 0.95;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.hero-arrow {
  margin-top: 14px;
  color: var(--cream);
  opacity: 0.6;
  animation: bob 2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-arrow {
    animation: none;
  }
}

/* sections */
.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px 130px;
}

.section p {
  font-size: 17px;
  line-height: 1.9;
  margin: 0;
  opacity: 0.92;
  text-wrap: pretty;
}

.section p + p {
  margin-top: 1em;
}

.about {
  padding-top: 130px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.about > div {
  min-width: 0;
}

.about-media {
  overflow: hidden;
  height: 460px;
}

.about-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* classes */
.classes-header {
  text-align: center;
  margin-bottom: 64px;
}

.classes-header h2 {
  margin-bottom: 0;
}

/* .section p sets size at higher specificity, so scope under the header */
.classes-header .classes-intro {
  max-width: 460px;
  margin: 18px auto 0;
  font-size: 15px;
  opacity: 0.85;
}

.class-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

/* The grid is two columns, so an odd number of classes would leave the last card
   stranded in the left half with an empty cell beside it. Let it span instead. */
.class-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.class-card {
  border: 1px solid rgba(243, 239, 227, 0.3);
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.class-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 32px;
  margin: 0;
}

.class-card p {
  font-size: 16px;
  line-height: 1.8;
}

.class-meta {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(243, 239, 227, 0.2);
  font-size: 13px;
  letter-spacing: 0.15em;
  line-height: 2;
}

.classes-cta {
  text-align: center;
  margin-top: 48px;
}

.pricing {
  text-align: center;
  margin-top: 56px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  letter-spacing: 0.06em;
}

/* teacher */
.teacher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.teacher-media {
  display: flex;
  justify-content: center;
}

.teacher-placeholder,
.teacher-photo {
  width: 340px;
  height: 340px;
  border-radius: 50%;
}

.teacher-placeholder {
  border: 1px solid rgba(243, 239, 227, 0.25);
  background: rgba(243, 239, 227, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
}

.teacher-placeholder span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 64px;
  letter-spacing: 0.2em;
  margin-left: 0.2em;
  opacity: 0.5;
}

.teacher-photo {
  object-fit: cover;
}

/* location */
.location {
  text-align: center;
}

.location h2 {
  margin-bottom: 18px;
}

.location-city {
  font-size: 16px;
  letter-spacing: 0.2em;
  opacity: 0.85;
}

.location-link {
  display: inline-block;
  margin-top: 34px;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 239, 227, 0.5);
  padding-bottom: 4px;
}

/* contact */
.contact {
  max-width: 640px;
  padding-bottom: 110px;
}

.contact-header {
  text-align: center;
}

.contact-header h2 {
  margin-bottom: 22px;
}

.signup-cta {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-decoration: none;
  background: rgba(243, 239, 227, 0.08);
  border: 1px solid var(--cream);
  padding: 14px 32px;
}

.signup-cta:hover {
  background: rgba(243, 239, 227, 0.16);
  border-color: var(--cream-bright);
}

/* .section p sets size at higher specificity, so scope under .contact */
.contact .contact-alt {
  margin-top: 30px;
  font-size: 14px;
  opacity: 0.85;
}

.contact .contact-alt a {
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 239, 227, 0.5);
  padding-bottom: 2px;
}

.contact .contact-alt a:hover {
  border-bottom-color: var(--cream-bright);
}

/* footer */
footer {
  border-top: 1px solid rgba(243, 239, 227, 0.2);
  padding: 44px 36px;
  /* equal outer columns keep the address on the true center line */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

footer > a {
  justify-self: end;
}

.footer-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  letter-spacing: 0.3em;
}

.footer-address {
  font-size: 12px;
  letter-spacing: 0.15em;
  opacity: 0.7;
}

footer a {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-decoration: none;
  opacity: 0.85;
}

.footer-credit {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  opacity: 0.8;
}

.footer-credit a {
  font-size: 11px;
  border-bottom: 1px solid rgba(243, 239, 227, 0.5);
  padding-bottom: 2px;
}

.footer-credit a:hover {
  border-bottom-color: var(--cream-bright);
}

footer a:hover {
  opacity: 1;
}

/* mobile */
@media (max-width: 820px) {
  .about,
  .teacher,
  .class-grid {
    grid-template-columns: 1fr;
  }

  .about,
  .teacher {
    gap: 48px;
  }

  .section {
    padding-bottom: 90px;
  }

  .about {
    padding-top: 110px;
  }

  .about-media {
    height: 340px;
  }

  .teacher-media {
    order: -1;
  }

  .teacher-placeholder,
  .teacher-photo {
    width: 260px;
    height: 260px;
  }

  .class-card {
    padding: 40px 32px;
  }

  footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .footer-credit {
    margin-top: 8px;
  }
}

@media (max-width: 480px) {
  .topbar {
    padding: 16px 16px;
  }

  .topbar-logo {
    font-size: 17px;
    letter-spacing: 0.26em;
  }

  .lang-toggle {
    font-size: 11px;
    letter-spacing: 0.16em;
    padding: 7px 12px;
  }
}

/* ---------- arriving via the language toggle ----------
   A switch is a navigation, so without this every [data-reveal] element replays
   its 1.1s fade as the restored scroll position brings it back into view. Only
   the transition is suppressed, never the .revealed class that supplies
   opacity:1 — killing the visibility instead of the animation would leave the
   page blank. `no-intro` is set by an inline <head> script before first paint. */
html.no-intro [data-reveal] {
  transition: none;
}