/* The two Cartes: covers, courses and their bespoke acts.
   Motion reads the engine's --sc-p (published on each act) and the page's
   own --mx/--my pointer values. Everything that moves has a reduced-motion
   floor at the bottom of this file. */

/* ------------------------------------------------------------ covers --- */
.cover { position: relative; }
/* never set position on an engine stage: it would override position: sticky */
.cover__stage { height: 100svh; min-height: 600px; overflow: clip; }
.cover__stage:not([data-sc-stage]) { position: relative; }
.cover .frame-double { --inset: calc(var(--bar-h) + 8px) 18px 18px; }
.cover__glow { position: absolute; inset: 0; pointer-events: none; }
.cover__copy { position: absolute; z-index: 4; display: grid; gap: 1.1rem; justify-items: start; }
.cover__title { font-size: clamp(3.2rem, 1.4rem + 6.4vw, 8rem); line-height: 0.98; max-width: 9.5ch; }
.cover__meta { font: italic 400 clamp(1.02rem, 0.9rem + 0.4vw, 1.25rem)/1.4 var(--sc-font-display); color: var(--sc-ink-soft); margin: 0; }
.cover__actions { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: center; margin-top: 0.6rem; }
.cover__set { position: absolute; z-index: 2; }
.cover__plate { position: absolute; inset: 0; box-shadow: var(--sc-e3); }
.cover__emblem { position: absolute; z-index: 5; aspect-ratio: 1; }
.cover__emblem img, .cover__emblem svg { display: block; width: 100%; height: auto; }

/* Caviar: pinned; copy leads, plate trails, the medallion is the nearest plane */
.cover--caviar .cover__glow { background: radial-gradient(ellipse 48% 60% at 70% 42%, rgb(197 202 209 / 0.13), transparent 70%); opacity: calc(1 - var(--sc-p, 0) * 0.5); }
.cover--caviar .cover__copy { left: calc(var(--sc-gutter) + 1vw); bottom: 13svh; max-width: min(46rem, 50vw); }
.cover--caviar .cover__set { right: 9vw; top: calc(var(--bar-h) + 6svh); height: min(72svh, 800px); aspect-ratio: 1080 / 1522; }
.cover--caviar .cover__plate {
  transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -8px + var(--sc-p, 0) * -7svh), 0) scale(calc(1.05 - var(--sc-p, 0) * 0.05));
}
.cover--caviar .cover__emblem {
  width: clamp(130px, 13.5vw, 230px); left: -20%; bottom: 7%;
  transform: translate3d(calc(var(--mx, 0) * 20px), calc(var(--my, 0) * 16px + var(--sc-p, 0) * -22svh), 0) rotate(calc(-12deg + var(--sc-p, 0) * 12deg));
}

/* Charcuterie: natural flow; plate leads, copy trails, the disc is nearest */
.cover--charcuterie .cover__stage { --q: clamp(0, calc((var(--sc-p, 0.5) - 0.5) * 2), 1); }
.cover--charcuterie .cover__glow { background: radial-gradient(ellipse 50% 56% at 30% 48%, rgb(255 255 255 / 0.55), transparent 70%); }
.cover--charcuterie .cover__set { left: 8vw; top: calc(var(--bar-h) + 7svh); height: min(70svh, 760px); aspect-ratio: 1100 / 1108; }
.cover--charcuterie .cover__plate { transform: translate3d(calc(var(--mx, 0) * -9px), calc(var(--my, 0) * -7px + var(--q) * 7svh), 0); }
.cover--charcuterie .cover__emblem {
  width: clamp(140px, 15vw, 250px); right: -14%; top: -7%; filter: drop-shadow(0 16px 26px rgb(62 48 20 / 0.28));
  transform: translate3d(calc(var(--mx, 0) * 18px), calc(var(--my, 0) * 14px + var(--q) * -12svh), 0) rotate(calc(6deg - var(--q) * 6deg));
}
.cover--charcuterie .cover__copy { right: calc(var(--sc-gutter) + 1vw); bottom: 14svh; max-width: min(40rem, 40vw); }

@media (max-width: 860px) {
  .cover__stage { min-height: 560px; }
  .cover .frame-double { --inset: calc(var(--bar-h) + 6px) 10px 10px; }
  .cover__title { font-size: clamp(2.7rem, 11.5vw, 3.6rem); }
  .cover__copy { left: var(--sc-gutter) !important; right: var(--sc-gutter) !important; top: calc(var(--bar-h) + 4.5svh); bottom: auto !important; max-width: none !important; gap: 0.7rem; }
  .cover__actions { margin-top: 0.2rem; }
  .cover__set { top: auto !important; bottom: 4svh; height: min(44svh, 420px) !important; }
  .cover--caviar .cover__set { right: var(--sc-gutter); }
  .cover--charcuterie .cover__set { left: auto; right: var(--sc-gutter); }
  .cover--caviar .cover__emblem { width: clamp(92px, 26vw, 128px); left: -30%; bottom: auto; top: -8%; }
  .cover--charcuterie .cover__emblem { width: clamp(96px, 27vw, 132px); right: auto; left: -28%; top: -9%; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .cover__set { height: 36svh !important; }
  .cover__actions .btn--quiet { display: none; }
}

/* --------------------------------------------------------- courses ---- */
.course { position: relative; }
.course__head { display: grid; gap: 1rem; justify-items: start; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 6.5rem); align-items: center; }
.split--flip > :first-child { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--flip > :first-child { order: 0; } }

.experience .photo { aspect-ratio: 1400 / 1143; }
.experience .serif-quote { max-width: 34ch; margin-top: 1.6rem; }
.included .photo { aspect-ratio: 1216 / 799; }
.inclusions { list-style: none; margin: 0; padding: 0; counter-reset: none; border-top: 1px solid var(--rule); }
.inclusions li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.inclusions li::before { content: ""; width: 7px; height: 7px; margin-top: 0.1em; background: var(--sc-accent); transform: translateY(-1px) rotate(45deg); justify-self: center; }
.inclusions li span { font-size: 1.02rem; line-height: 1.5; }

/* the Charcuterie inclusions stand alone, set like a printed menu */
.included--solo { max-width: 46rem; margin-inline: auto; display: grid; justify-items: center; text-align: center; }
.included--solo .inclusions { width: 100%; text-align: left; }

/* ------------------------------------------------ the service tiers --- */
.tiers__stage {
  height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-rows: auto minmax(0, 1fr); column-gap: clamp(2rem, 6vw, 6rem);
  padding: calc(var(--bar-h) + 3svh) var(--sc-gutter) 5svh; max-width: 88rem; margin-inline: auto;
}
.tiers__head { grid-column: 1 / -1; display: grid; justify-items: center; gap: 0.55rem; text-align: center; margin-bottom: 3svh; }
.tiers__head .display { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.8rem); }
.tiers__col { position: relative; align-self: center; }
.tiers__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.tier-line {
  width: 100%; display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; align-items: baseline; gap: 1rem;
  padding: 1.25rem 0.2rem 1.25rem 1.1rem; background: none; border: 0; border-bottom: 1px solid var(--rule);
  color: var(--sc-ink); text-align: left; cursor: pointer; opacity: 0.52; transition: opacity 220ms var(--sc-ease-out);
}
.tier-line[aria-pressed="true"] { opacity: 1; }
.tier-line:hover { opacity: 0.85; }
.tier-line__level { font: 500 0.66rem/1 var(--sc-font-text); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); }
.tier-line__name { font: italic 500 clamp(1.15rem, 0.9rem + 0.8vw, 1.55rem)/1.15 var(--sc-font-display); }
.tier-line__price { font: 500 clamp(1.15rem, 0.9rem + 0.8vw, 1.5rem)/1 var(--sc-font-display); font-variant-numeric: lining-nums; }
.tiers__marker { position: absolute; left: 0; top: 1px; width: 2px; height: calc(100% / var(--tier-count, 4) - 1px); background: var(--sc-accent); transform: translateY(calc(var(--tier, 0) * 100%)); transition: transform 360ms var(--sc-ease-out); }
.tiers__plates { position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem 1rem; }
.tiers__stack { display: grid; width: 100%; justify-items: center; }
.tiers__plates .frame-double { --inset: 0; opacity: 0; transition: opacity 320ms var(--sc-ease-out); }
.tiers__plates.is-prestige .frame-double { opacity: 1; }
.tier-plate {
  grid-area: 1 / 1; display: grid; justify-items: center; text-align: center; gap: 0.55rem; width: min(30rem, 100%);
  padding: 0.5rem 1.5rem 0; opacity: 0; transform: translate3d(0, 10px, 0); visibility: hidden;
  transition: opacity 300ms var(--sc-ease-out), transform 300ms var(--sc-ease-out), visibility 0s linear 300ms;
}
.tier-plate.is-active { opacity: 1; transform: none; visibility: visible; transition: opacity 300ms var(--sc-ease-out) 80ms, transform 300ms var(--sc-ease-out) 80ms; }
.tier-plate__level { font: 500 0.72rem/1 var(--sc-font-text); letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-text); margin: 0.9rem 0 0; }
.tier-plate__price { margin: 0.2rem 0 0; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-ink-soft); }
.tier-plate__price b { display: block; font: 500 clamp(3rem, 2rem + 3vw, 4.6rem)/1 var(--sc-font-display); letter-spacing: -0.01em; text-transform: none; color: var(--sc-ink); margin-bottom: 0.3rem; }
.tier-plate__name { font: italic 500 clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem)/1.05 var(--sc-font-display); margin: 0.6rem 0 0; }
.tier-plate__desc { font: italic 400 1.08rem/1.55 var(--sc-font-display); color: var(--sc-ink-soft); max-width: 34ch; margin: 0; text-wrap: pretty; }
.tier-plate__origin { font: 500 0.66rem/1 var(--sc-font-text); letter-spacing: 0.24em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0.3rem 0 0.9rem; }

/* the pearls: 3 uniform dots per tier; a cluster of 6 / 8 / 10 / 12 in rows of four */
.dots { display: flex; gap: 6px; justify-content: center; margin: 0.35rem 0 0; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--sc-accent); }
.pearls { display: grid; grid-template-columns: repeat(4, var(--pearl, 14px)); gap: calc(var(--pearl, 14px) * 0.42); justify-content: center; }
.pearls i {
  width: var(--pearl, 14px); height: var(--pearl, 14px); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff 0 8%, #dfe2e6 26%, #9aa1aa 62%, #4a4f57 100%);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.45);
}
.tiers .pearls--shared { --pearl: clamp(16px, 1.6vw, 22px); min-height: calc(var(--pearl) * 3 + var(--pearl) * 0.84); align-content: start; }
.pearls--shared i { transform: scale(1); opacity: 1; transition: transform 380ms var(--sc-ease-out), opacity 380ms var(--sc-ease-out); transition-delay: calc(var(--n) * 45ms); }
/* the cluster holds as many pearls as the largest tier; acts.js sets the rest off */
.pearls--shared i.is-off { transform: scale(0.35); opacity: 0; transition-delay: 0ms; }
.tier-plate .pearls { display: none; }
.tiers__cta { justify-self: center; }

/* without the engine the four plates read as a plain list */
html:not(.js) .tiers__stage { height: auto; display: block; }
html:not(.js) .tiers__stack { display: block; }
html:not(.js) .tier-plate { opacity: 1; visibility: visible; transform: none; margin: 0 auto 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); }
html:not(.js) .tier-plate .pearls { display: grid; }
html:not(.js) .pearls--shared, html:not(.js) .tiers__list, html:not(.js) .tiers__plates .frame-double { display: none; }

@media (max-width: 860px) {
  .tiers__stage { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); padding: calc(var(--bar-h) + 1.4svh) var(--sc-gutter) calc(62px + 1.2svh); }
  .tiers__head { margin-bottom: 1.2svh; gap: 0.3rem; }
  .tiers__head .label { display: none; }
  .tiers__head .display { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .tiers__col { align-self: start; }
  .tiers__list { display: grid; grid-template-columns: repeat(var(--tier-count, 4), minmax(0, 1fr)); border-top: 0; border-bottom: 1px solid var(--rule); }
  .tiers__plates { padding: 0.8rem 0 0; justify-content: flex-start; }
  .tier-line { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0.35rem; padding: 0.55rem 0.2rem 0.7rem; border-bottom: 0; }
  .tier-line__name { display: none; }
  .tier-line__level { font-size: 0.56rem; letter-spacing: 0.16em; }
  .tier-line__price { font-size: 1.05rem; }
  .tiers__marker { top: auto; bottom: -1px; width: calc(100% / var(--tier-count, 4)); height: 2px; transform: translateX(calc(var(--tier, 0) * 100%)); }
  .tier-plate { padding: 1rem 0.4rem 0.6rem; gap: 0.35rem; }
  .tier-plate__price b { font-size: clamp(2.3rem, 11vw, 3rem); }
  .tier-plate__name { font-size: clamp(1.4rem, 6.4vw, 1.8rem); margin-top: 0.2rem; }
  .tier-plate__desc { font-size: 0.95rem; line-height: 1.45; }
  .tier-plate__level { margin-top: 0.4rem; }
  .tier-plate__origin { margin: 0.1rem 0 0.5rem; }
  .tiers .pearls--shared { --pearl: 12px; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .tiers__head { display: none; }
  .tier-plate__desc { font-size: 0.86rem; }
  .tier-plate .btn { min-height: 42px; padding: 0.7rem 1.2rem; }
}

/* ---------------------------------------------------- the field rail --- */
.field__stage { height: 100svh; display: flex; align-items: center; overflow: clip; }
.field__rail { display: flex; align-items: flex-end; gap: clamp(1.4rem, 3vw, 3rem); padding: calc(var(--bar-h) + 2svh) var(--sc-gutter) 0; }
.field__lead { flex: 0 0 min(26rem, 78vw); align-self: center; display: grid; gap: 1rem; }
.field__item { flex: 0 0 auto; margin: 0; height: 62svh; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.field__item .photo { height: 100%; aspect-ratio: var(--ar); }
.field__note { flex: 0 0 min(20rem, 70vw); align-self: center; display: grid; gap: 1rem; justify-items: start; }
@media (max-width: 860px) { .field__item { height: 50svh; } .field__rail { padding-bottom: 6svh; } }

/* ---------------------------------------------------- the cart (deal) --- */
.cart__stage { height: 100svh; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(1.5rem, 4vw, 4.5rem); padding: calc(var(--bar-h) + 5svh) var(--sc-gutter) 6svh; max-width: 90rem; margin-inline: auto; align-items: center; }
.cart__text { display: grid; gap: 1.3rem; align-content: center; }
.cart__text .serif-quote { font-size: clamp(1.02rem, 0.84rem + 0.55vw, 1.3rem); max-width: 40ch; }
.cart__table { position: relative; height: min(76svh, 760px); }
.print {
  position: absolute; margin: 0; padding: clamp(6px, 0.7vw, 11px) clamp(6px, 0.7vw, 11px) 0; background: #fdfbf5;
  box-shadow: 0 2px 3px rgb(60 44 20 / 0.12), 0 22px 44px -18px rgb(60 44 20 / 0.42);
  --k: clamp(0, calc((var(--sc-p, 1) - var(--s)) / 0.24), 1);
  transform: translate3d(calc((1 - var(--k)) * 42vw), calc((1 - var(--k)) * 16svh), 0) rotate(calc(var(--rot) + (1 - var(--k)) * 10deg));
  opacity: clamp(0, calc(var(--k) * 2.4), 1);
}
.print .photo { aspect-ratio: var(--ar); }
.print figcaption { padding: 0.55rem 0.2rem 0.7rem; font: italic 500 clamp(0.88rem, 0.8rem + 0.25vw, 1.05rem)/1.25 var(--sc-font-display); color: var(--navy); }
/* dealt in order a, c, b: the last print lands on top and covers no caption */
.print--a { --s: 0.02; --rot: -4deg; width: 42%; left: 0; top: 0; z-index: 1; }
.print--c { --s: 0.28; --rot: -1.5deg; width: 44%; left: 12%; bottom: 0; z-index: 2; }
.print--b { --s: 0.54; --rot: 3deg; width: 50%; right: 0; top: 14%; z-index: 3; }
@media (max-width: 860px) {
  .cart__stage { height: auto; grid-template-columns: 1fr; padding: clamp(3.5rem, 12vw, 5rem) var(--sc-gutter); }
  .cart__table { height: auto; display: grid; gap: 1.6rem; }
  .print { position: relative; inset: auto; width: 88%; transform: rotate(var(--rot)); opacity: 1; }
  .print--b { justify-self: end; }
}

/* ------------------------------------------------- pricing & booking --- */
.card-plain { position: relative; padding: clamp(2rem, 5vw, 4rem); background: var(--sc-surface); box-shadow: var(--sc-e2); display: grid; gap: 1rem; justify-items: center; text-align: center; }
.card-plain .frame-double { --inset: 10px; }
.price-xl { font: 500 clamp(3.6rem, 2.2rem + 5vw, 6.5rem)/0.95 var(--sc-font-display); margin: 1.4rem 0 0; letter-spacing: -0.02em; }
.price-xl small { display: block; margin-top: 0.8rem; font: 500 0.72rem/1.2 var(--sc-font-text); letter-spacing: 0.24em; text-transform: uppercase; color: var(--sc-ink-soft); }
.booking { padding-block: clamp(4rem, 9vw, 8rem) clamp(4rem, 8vw, 7rem); }
.booking .card-plain { max-width: 48rem; margin-inline: auto; gap: 1.2rem; }
.booking .serif-quote { max-width: 40ch; }
.booking__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; justify-content: center; align-items: center; margin-top: 0.6rem; }

/* ------------------------------------------------ charcuterie field --- */
.spread { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.2rem); align-items: start; }
.spread figure { margin: 0; }
.spread .photo { aspect-ratio: var(--ar); }
.spread__a { grid-column: 1 / span 5; }
.spread__b { grid-column: 6 / span 4; margin-top: 18%; }
.spread__c { grid-column: 10 / span 3; margin-top: 44%; }
@media (max-width: 860px) { .spread__a, .spread__b, .spread__c { grid-column: 1 / -1; margin-top: 0; } .spread__b { width: 82%; justify-self: end; } }

/* ---------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .cover__plate, .cover__emblem, .cover__glow { transform: none !important; }
  .print { transform: rotate(var(--rot)) !important; opacity: 1 !important; }
  .tier-plate, .tier-plate.is-active { transform: none; transition: opacity 180ms linear; }
  .pearls--shared i { transition: opacity 180ms linear; transform: none !important; }
  .tiers__marker { transition: none; }
}