/* ==========================================================================
   Jeanne Arte — home.css · the home page (index.html) only.
   Tokens and every shared component (card, leader lines, fleuron, buttons,
   forms, contact block, motion classes) live in site.css; the reviews
   component in reviews.css. Page classes are prefixed .home-; .hero__mark and
   .doors__orn keep the concept's names because site.css animates them.
   ========================================================================== */

/* ---------------------------------------------------------------- hero
   The cover of the card: the mark, « Massages · Walhain » as a small tracked
   label (the client preferred the concept's quiet label to a display-size
   headline, 2026-11-03), one line of sub-copy, then the two doors — which are
   the biggest type on the page. */
.home-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(calc(100svh - 72px), 800px);
  padding: var(--s3) 0 var(--s5);
  text-align: center;
}

.home-hero__mark {
  width: 112px;
  margin: 0 auto var(--s3);
}
.hero__mark { width: 100%; height: auto; }

/* the h1: .label from site.css (14 px tracked capitals, accent colour) */
.home-label { margin: 0; }

.home-hero__sub {
  max-width: 30em;
  margin: var(--s2) auto 0;
  text-wrap: balance;
}

@media (min-width: 760px) {
  /* the next fleuron peeks above the fold: there is more below */
  .home-hero { min-height: min(calc(100svh - 80px), 700px); padding: var(--s4) 0 var(--s5); }
  .home-hero__mark { width: 136px; }
}

/* the two doors */
.home-doors {
  display: grid;
  width: min(100% - 2 * var(--gutter), 1180px);
  margin: var(--s5) auto 0;
}
.home-door {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s2);
  border-radius: var(--r);
  color: var(--text-strong);
  text-decoration: none;
  transition: background-color .35s var(--ease);
}
.home-door:focus-visible { outline-offset: 4px; }
.home-door__title {
  font-size: var(--fs-door);                              /* 34 → 52, as the concept */
  line-height: 1.08;
  letter-spacing: -.012em;
}
.home-door .btn { min-width: 220px; }
@media (hover: hover) {
  .home-door:hover { background: var(--surface); }
  .home-door:hover .btn--fill { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
  .home-door:hover .btn:not(.btn--fill) { background: var(--tint); }
}

.doors__orn {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: min(100%, 320px);
  margin: var(--s1) auto;
  color: var(--ornament);
}
.doors__orn .orn__rule { flex: 1; height: 1px; background: var(--line-2); }
.doors__orn .orn__rule:first-child { transform-origin: 100% 50%; }
.doors__orn .orn__rule:last-child { transform-origin: 0 50%; }

@media (min-width: 760px) {
  .home-doors {
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: var(--s3);
    margin-top: var(--s5);
  }
  /* title above, button below: a title that wraps (nl, ru, ua) grows upwards, so
     the two buttons stay on one line */
  .home-door {
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    gap: var(--s3);
    padding: var(--s5) var(--s3);
  }
  .home-door__title { align-self: end; }
  .doors__orn { flex-direction: column; width: auto; margin: 0; }
  .doors__orn .orn__rule { width: 1px; height: auto; flex: 1; }
  .doors__orn .orn__rule:first-child { transform-origin: 50% 100%; }
  .doors__orn .orn__rule:last-child { transform-origin: 50% 0; }
}

/* ---------------------------------------------------------------- section rhythm */
.home-main .orn + .sec__title { margin-top: var(--s5); }

/* ---------------------------------------------------------------- about */
.home-about__text {
  max-width: 34em;
  margin: var(--s3) auto 0;
}
.home-points {
  display: grid;
  margin-top: var(--s5);
}
.home-points li {
  padding: 12px 0;
  text-wrap: balance;
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.35;
  color: var(--text-strong);
}
.home-points li + li::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 auto 24px;
  background: var(--line-2);
}
@media (min-width: 760px) {
  .home-points { grid-template-columns: repeat(3, 1fr); }
  .home-points li { padding: 4px var(--s3); font-size: 1.25rem; }
  .home-points li + li { border-left: 1px solid var(--line-2); }
  .home-points li + li::before { display: none; }
}
@media (min-width: 1000px) {
  /* the triptych may step out of the text column so each point keeps one line */
  .home-points { margin-inline: -90px; }
}

.home-motto {
  margin: var(--s6) auto 0;
  max-width: 16em;
  font-size: var(--fs-quote);
  line-height: 1.3;
  font-style: italic;
  color: var(--text-strong);
}
.home-motto blockquote { margin: 0; }
.home-motto p { text-wrap: balance; }
.home-motto__tr {
  margin-top: var(--s2);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- the menu excerpt card */
.home-menu { margin-top: var(--s4); }
.home-item__link {
  display: block;
  margin-inline: -12px;
  padding: 12px;
  border-radius: var(--r);
  color: inherit;
  text-decoration: none;
  transition: background-color .2s;
}
.home-item__link:focus-visible { outline-offset: 0; }
@media (hover: hover) {
  .home-item__link:hover { --mask: var(--tint); background: var(--tint); }
}
.home-item__name {
  font-size: var(--fs-h3);
  line-height: 1.35;
}
.home-item__meta {
  margin-top: 2px;
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--text-muted);
}
.home-item__var {
  font-size: var(--fs-h3);
  line-height: 1.4;
}
.home-item__var .line__l > span { font-size: 1.0625rem; font-style: italic; color: var(--text-muted); }
.home-item__name + .home-item__var { margin-top: 2px; }

/* the home-visit supplement closes the list, below a hairline: a supplement,
   not a treatment — no duration, no link */
.home-item--supp {
  margin-top: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

.home-card__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: var(--s5);
}
@media (min-width: 560px) {
  .home-card__actions { flex-direction: row; justify-content: center; }
}

/* ---------------------------------------------------------------- où ? */
.home-where address { margin-top: var(--s3); font-style: normal; }
.home-where__addr {
  font-size: clamp(1.625rem, 1.35rem + 1vw, 2.125rem);
  line-height: 1.25;
  color: var(--text-strong);
}
.home-where__postal { margin-top: 4px; }
.home-where__home { max-width: 26em; margin: var(--s3) auto 0; }
.home-where__go { margin-top: var(--s4); }

/* ---------------------------------------------------------------- contact form */
/* scroll-margin: js/home.js scrolls this line into view after a send; keep air under it */
.home-form .form__status { font-style: italic; color: var(--accent); text-align: center; text-wrap: balance; scroll-margin-bottom: var(--s3); }
.home-form .form__status:empty { display: none; }
.home-form .form__status.is-error { font-style: normal; color: var(--error); }

/* ---------------------------------------------------------------- motion
   The hero settles once (site.css .settle, the mark scales in). As the page
   scrolls, the big mark fades up into the small one in the masthead; the menu
   card rises into place with the scroll. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .home-hero__mark {
      animation: home-mark-out linear both;
      animation-timeline: scroll(root);
      animation-range: 0 280px;
    }
    /* the card rises into place as it comes up the screen. Position only: a fade tied
       to the scroll would leave it ghosted wherever the visitor stops (its title and
       lines ink in on their own timer). A fixed 240 px range (not a share of the card's
       own height) so that even on a short landscape phone it has settled before its
       first line is read. */
    .home-card {
      animation: home-rise linear both;
      animation-timeline: view();
      animation-range: entry 0px entry 240px;
    }
  }
}
@keyframes home-mark-out { to { opacity: 0; transform: translateY(-28px) scale(.84); } }
@keyframes home-rise { from { transform: translateY(40px) scale(.985); } }

@media print {
  .home-hero { min-height: 0; }
  .home-hero__mark, .home-card { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; }
  .home-form, .home-doors .btn, .rv__cta { display: none !important; }
}