@charset "utf-8";
/* ===========================================================================
   Fasig-Tipton December Digital Sale — landing page
   Built from 2026-DecemberDigital_LandingPage-v3.psd (2500 px wide comp).
   Sizes below are the comp's values halved, so 1 comp px = 0.5 css px and the
   design lines up at a ~1250 px viewport.

   Plain CSS on purpose — no build step. Edit this file directly and bump the
   ?v query string in index.php.

   1.  Tokens
   2.  Reset & base
   3.  Shared pieces      (.wrap .btn .rule .band__* layers)
   4.  Hero
   5.  Stat bands         (broodmares / racehorses)
   6.  Proof section      (video, figures, graded stakes winners)
   7.  Benefits
   8.  Testimonial carousel
   9.  Footer
   10. Motion & reveal
   ======================================================================== */


/* == 1. Tokens =========================================================== */

:root {
  /* Palette — sampled from the comp */
  --ink:          #2a333a;   /* charcoal ground, dark sections + body copy   */
  --ink-deep:     #212a30;
  --paper:        #dce1e5;   /* light halftone ground                        */
  --gold:         #cbb56c;
  --blue:         #2575bb;   /* brand blue (matches FasigHead.svg)           */
  --blue-bright:  #2d81c1;   /* headings & links on the light sections       */
  --blue-soft:    #7cb2d4;   /* rules, badge, quote marks, BENEFITS heading  */
  --panel:        #e9eef2;   /* carousel arrow panels                        */
  --white:        #fff;

  /* Type */
  --sans:    "heebo", "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* "magistral" arrives with the Adobe Fonts kit; Saira stands in until then */
  --display: "magistral", "Saira", "Heebo", system-ui, sans-serif;

  /* Rhythm */
  --wrap:     1180px;
  --gutter:   clamp(1.25rem, 5vw, 2.5rem);
  --sec-y:    clamp(3.5rem, 9vw, 6.5rem);

  /* Type scale — min for 360 px, max for the comp's 1250 px */
  --fs-display: clamp(2.25rem, 5.9vw, 4.55rem);   /* $100,000+  85%  BENEFITS */
  --fs-lead:    clamp(1.5rem,  3.6vw, 2.3rem);    /* 142 BROODMARES           */
  --fs-h2:      clamp(1.15rem, 2.6vw, 1.85rem);   /* Sold the Dams of 4 GSWs  */
  --fs-h3:      clamp(1.05rem, 2.1vw, 1.55rem);   /* benefit headings, names  */
  --fs-sub:     clamp(0.95rem, 1.8vw, 1.4rem);    /* SOLD FOR / CLEARANCE     */
  --fs-price:   clamp(1.1rem,  2.4vw, 1.55rem);   /* $750,000                 */
  --fs-date:    clamp(1.1rem,  2.9vw, 2.15rem);   /* DECEMBER 3–8             */
  --fs-body:    clamp(0.94rem, 1.25vw, 1rem);
  --fs-small:   0.85rem;

  --ease:       cubic-bezier(.22, .61, .36, 1);   /* UI: quick out, soft stop */
  --ease-slide: cubic-bezier(.45, .05, .25, 1);   /* carousel: ease in *and* out */
}


/* == 2. Reset & base ===================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 var(--fs-body)/1.6 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
b, strong { font-weight: 700; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--blue-soft);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
}
.skip-link:focus { left: 0; }

.gold { color: var(--gold); }


/* == 3. Shared pieces ==================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Call to action ----------------------------------------------------- */
/* Comp: 860 × 158 comp px, vertical gradient that dips dark at ~37 %.       */

.btn {
  display: block;
  width: min(100%, 26.9rem);
  margin-inline: auto;
  padding: 1.1rem 1.5rem;
  border-radius: 6px;
  background: linear-gradient(180deg, #74a0c2 0%, #4785b6 14%, #0f6caf 37%, #2179b9 70%, #357fc0 100%);
  box-shadow: 0 6px 18px rgb(11 22 32 / .38);
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: .123em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-indent: .123em;          /* balances the trailing letter-space */
  text-transform: uppercase;
  transition: transform .3s var(--ease),
              box-shadow .3s var(--ease),
              filter .3s var(--ease);
}
.btn:hover,
.btn:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 16px 30px rgb(11 22 32 / .5);
  filter: brightness(1.14) saturate(1.05);
}
.btn:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgb(11 22 32 / .45);
  transition-duration: .08s;
}

/* --- Horizontal rule (Divider.svg: 1002 × 22 comp px) -------------------- */

.rule {
  width: min(100%, 31.3rem);
  margin: 0 auto;
}

/* --- Full-bleed layers shared by the dark bands ------------------------- */

.band__photo,
.band__binary,
.band__glow {
  position: absolute;
  pointer-events: none;
}

/* The horse photo. Fixed on pointer devices so it sits still while the
   section scrolls over it; iOS mishandles `fixed` attachment, so touch
   devices get a normal cover image instead. */
.band__photo {
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (hover: hover) and (min-width: 900px) {
  .band__photo { background-attachment: fixed; }
}

/* The binary field, translated on scroll by main.js. Overscan (top/bottom)
   must stay ahead of data-parallax's speed * 1.5 (worst-case p) * height, or
   fast scrolling exposes the pattern's edge. */
.band__binary {
  top: -40%;
  right: 0;
  bottom: -40%;
  left: 0;
  background-image: url("../images/BinaryBG.svg");
  background-image: image-set(url("../images/BinaryBG.webp") type("image/webp"),
                              url("../images/BinaryBG.svg")  type("image/svg+xml"));
  background-position: center top;
  background-repeat: repeat;
  background-size: max(100%, 78.1rem) auto;
  opacity: .4;
  will-change: transform;
}

/* The teal bloom. 2497 comp px wide, pushed off the right edge in the comp,
   which is why it starts at 38.5 % and is allowed to overflow.
   Glow-Teal.* is the re-keyed, actually-transparent version — see
   build_glow() in src/build-assets.py. */
.band__glow {
  left: 38.5%;
  width: 100%;
  height: 62%;
  background-image: url("../images/Glow-Teal.png");
  background-image: image-set(url("../images/Glow-Teal.webp") type("image/webp"),
                              url("../images/Glow-Teal.png")  type("image/png"));
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.band__glow--top    { top: 0; }
.band__glow--bottom { bottom: 0; transform: scaleY(-1); }   /* bloom hugs the lower edge */
.band__glow--wide   { left: 0; }


/* == 4. Hero ============================================================= */

.hero {
  position: relative;
  z-index: 2;                    /* lets the CTA hang over the band below */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(30rem, 88svh, 56rem);
  padding-block: 7.5rem 0;
  background: var(--ink);
}

/* Clips the parallax overscan so the photo can't spill onto the band below —
   the hero itself must stay unclipped, because the CTA hangs out of it. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero__photo {
  position: absolute;
  inset: -12% 0;
  background-image: url("../images/SnowyFasig-Edited.jpg");
  background-image: image-set(url("../images/SnowyFasig-Edited.webp") type("image/webp"),
                              url("../images/SnowyFasig-Edited.jpg")  type("image/jpeg"));
  background-position: center 40%;
  background-size: cover;
  will-change: transform;
}

/* Keeps the ice lettering legible over the brightest part of the sky. */
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(24 33 43 / .34) 0%, rgb(24 33 43 / .06) 34%, rgb(20 28 36 / .52) 100%);
}

.hero__logo {
  position: absolute;
  top: clamp(1.1rem, 3vw, 1.85rem);
  left: var(--gutter);
  z-index: 3;
  width: clamp(11rem, 22vw, 17.7rem);
}
.hero__logo img { width: 100%; height: auto; }

.hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
}

.hero__head { display: block; }

.hero__wic {
  width: min(100%, 53.3rem);
  margin-inline: auto;
}

.hero__sale {
  width: min(100%, 40.8rem);
  margin: clamp(1.4rem, 4.2vw, 2.9rem) auto 0;
}

.hero__dates {
  margin-top: clamp(.7rem, 2vw, 1.05rem);
  color: var(--white);
  font-family: var(--display);
  font-size: var(--fs-date);
  font-weight: 400;
  letter-spacing: .223em;
  line-height: 1;
  text-indent: .223em;
  text-transform: uppercase;
}

.hero__rule { margin-top: clamp(1.3rem, 3.4vw, 2.4rem); }

.hero__entries {
  margin-top: clamp(1.3rem, 3.4vw, 2.4rem);
  color: var(--white);
  font-size: clamp(1rem, 2.1vw, 1.55rem);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.2;
  text-transform: uppercase;
}
.hero__entries b { color: var(--gold); font-weight: 800; }

/* Straddles the seam between the hero and the broodmare band, as in the comp */
.hero__btn {
  position: relative;
  margin-top: clamp(1.1rem, 2.6vw, 1.85rem);
  margin-bottom: clamp(-2.6rem, -3.4vw, -1.6rem);
  z-index: 4;
}


/* == 5. Stat bands ======================================================= */

.band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 16.5vw, 13.2rem) clamp(5rem, 14.2vw, 11.4rem);
  background: var(--ink);
  isolation: isolate;
}

.band--broodmare .band__photo {
  background-image: url("../images/BroodmareBG.jpg");
  background-image: image-set(url("../images/BroodmareBG.webp") type("image/webp"),
                              url("../images/BroodmareBG.jpg")  type("image/jpeg"));
  background-position: left center;
}
.band--racehorse .band__photo {
  background-image: url("../images/HoraBG.jpg");
  background-image: image-set(url("../images/HoraBG.webp") type("image/webp"),
                              url("../images/HoraBG.jpg")  type("image/jpeg"));
  background-position: 30% center;
}

/* Vertical hairline down the page centre with one open dot terminal.
   In the comp it runs past the section edge and is clipped by it. It only
   means anything while the band is two columns, so it stays off until then. */
.band__rule {
  display: none;
  position: absolute;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--blue-soft);
  z-index: 1;
}
.band__rule--dot-end   { top: -3.6rem; bottom: 5.8rem; }
.band__rule--dot-start { top: 7.1rem;  bottom: -5rem; }

.band__rule::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border: 1.5px solid var(--blue-soft);
  border-radius: 50%;
}
.band__rule--dot-end::after   { bottom: -5.5px; }
.band__rule--dot-start::after { top: -5.5px; }

.band__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2.75rem, 7vw, 3.5rem);
}

/* --- Left column: the headline statistic -------------------------------- */

.stat { text-align: center; }

.stat__lead {
  color: var(--gold);
  font-family: var(--display);
  font-size: var(--fs-lead);
  font-weight: 700;
  letter-spacing: .123em;
  line-height: 1.1;
  text-indent: .123em;
  text-transform: uppercase;
}

.stat__sub {
  margin-top: .5em;
  color: var(--white);
  font-family: var(--display);
  font-size: var(--fs-sub);
  font-weight: 700;
  letter-spacing: .123em;
  line-height: 1.28;
  text-indent: .123em;
  text-transform: uppercase;
}
/* The comp breaks this line by hand; the <br>s in the markup do the work. */
.stat__sub--wide { letter-spacing: .09em; text-indent: .09em; }

.stat__big {
  margin-top: .18em;
  color: var(--gold);
  font-family: var(--display);
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: .123em;
  line-height: 1.05;
  text-indent: .123em;
}

/* --- Right column: top prices ------------------------------------------ */

/* Stacked: label sits above the two price columns. Two-up: it turns on its
   side and runs down the left of them, as in the comp. */
.prices {
  display: grid;
  gap: clamp(.9rem, 2.6vw, 1.6rem);
  align-items: start;
  justify-items: center;
  justify-content: center;
}

.prices__label {
  color: var(--gold);
  font-family: var(--display);
  font-size: clamp(1.2rem, 3.4vw, 1.55rem);
  font-weight: 500;
  letter-spacing: .223em;
  line-height: 1;
  text-indent: .223em;
  text-transform: uppercase;
  white-space: nowrap;
  justify-self: center;
}

.prices__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 0 clamp(1.1rem, 3.4vw, 3.1rem);
}

.prices__list li {
  color: var(--white);
  font-size: var(--fs-price);
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1.62;
  white-space: nowrap;
}
.prices__etc {
  color: #93a9ba;
  font-family: var(--display);
  font-size: clamp(.8rem, 1.7vw, 1.1rem);
  font-weight: 400;
  letter-spacing: .123em;
  line-height: 2.2;
  text-transform: uppercase;
}

/* --- SINCE 2024 badge --------------------------------------------------- */

.badge {
  position: absolute;
  top: clamp(1.5rem, 3.9vw, 2.6rem);
  left: 50%;
  z-index: 3;
  translate: -50% 0;
  padding: .72em 1.7em;
  background: var(--blue-soft);
  box-shadow: 0 5px 14px rgb(12 22 30 / .3);
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(.8rem, 1.6vw, .9rem);
  font-weight: 700;
  letter-spacing: .123em;
  line-height: 1;
  text-indent: .123em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 860px) {
  .band__rule { display: block; }
  .prices__label {
    font-size: clamp(1.35rem, 2.4vw, 1.65rem);
    writing-mode: vertical-rl;
    rotate: 180deg;
    text-indent: 0;
  }
  .prices { grid-template-columns: auto 1fr; }
  .band__grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(3rem, 6vw, 5rem);
  }
  .prices {
    justify-content: start;
    padding-left: clamp(0rem, 5vw, 4.5rem);
  }
}


/* == 6. Proof section (light) ============================================ */

.proof {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 7.6vw, 5.9rem) clamp(3.25rem, 8vw, 5.6rem);
  background-color: var(--paper);
  background-image: url("../images/HalftoneBG-Light.jpg");
  background-image: image-set(url("../images/HalftoneBG-Light.webp") type("image/webp"),
                              url("../images/HalftoneBG-Light.jpg")  type("image/jpeg"));
  background-position: center top;
  background-repeat: repeat-y;
  background-size: max(100%, 78.1rem) auto;
  color: var(--ink);
  isolation: isolate;
}
/* Fixed on pointer devices so the halftone sits still while the section
   scrolls over it, same treatment as .band__photo; iOS mishandles `fixed`. */
@media (hover: hover) and (min-width: 900px) {
  .proof { background-attachment: fixed; }
}

.proof__glow {
  position: absolute;
  top: 0;
  left: 38.2%;
  width: 100%;
  height: 27%;
  background-image: url("../images/Glow-Teal.png");
  background-image: image-set(url("../images/Glow-Teal.webp") type("image/webp"),
                              url("../images/Glow-Teal.png")  type("image/png"));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: .55;
  pointer-events: none;
  z-index: -1;
}

.proof .rule { margin-block: clamp(2.25rem, 6vw, 3.85rem); }

/* --- Video facade ------------------------------------------------------- */

/* 1227 comp px wide → 613.5 css px, and 20 % over that once there's room */
.video {
  width: min(100%, 38.35rem);
  margin-inline: auto;
}
@media (min-width: 1100px) {
  .video { width: min(100%, 46rem); }
}

.video__btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}

.video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: opacity .3s var(--ease), transform .5s var(--ease);
}
.video__btn:hover .video__poster,
.video__btn:focus-visible .video__poster { opacity: .95; transform: scale(1.02); }

/* The comp's plain white play triangle */
.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -35% -50%;
  width: 0;
  height: 0;
  border-top:    clamp(1.6rem, 4vw, 3.2rem) solid transparent;
  border-bottom: clamp(1.6rem, 4vw, 3.2rem) solid transparent;
  border-left:   clamp(2.75rem, 7vw, 5.5rem) solid var(--white);
  filter: drop-shadow(0 3px 12px rgb(0 0 0 / .45));
  transition: scale .3s var(--ease);
}
.video__btn:hover .video__play,
.video__btn:focus-visible .video__play { scale: 1.08; }

.video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* --- 80 % / 12,500+ ----------------------------------------------------- */

.figures {
  display: grid;
  gap: clamp(2rem, 6vw, 3rem);
  margin-top: clamp(2.5rem, 6.4vw, 4rem);
  text-align: center;
}
@media (min-width: 620px) {
  .figures {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    max-width: 54rem;
    margin-inline: auto;
  }
}

.figure__num {
  color: var(--blue);
  font-family: var(--display);
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}
.figure__cap {
  margin-top: .5em;
  font-family: var(--display);
  font-size: clamp(.85rem, 1.65vw, 1.33rem);
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.35;
  text-indent: .1em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* --- Graded stakes winners --------------------------------------------- */

.proof__head,
.proof__foot {
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
  text-align: center;
}
.proof__head em,
.proof__foot em { color: var(--blue-bright); font-style: normal; }

.gsw {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.6vw, 1.45rem);
  margin-top: clamp(1.75rem, 4.6vw, 2.95rem);
  text-align: center;
}
@media (min-width: 780px) { .gsw { grid-template-columns: repeat(4, 1fr); } }

/* The comp runs this row at 90 % of the page width — far wider than the 1180 px
   text column it sits inside. Break it out of .wrap once the viewport is wide
   enough to hold it, so the photos keep growing on large desktops instead of
   staying letterbox-small next to the headings.
   The reveal animation uses `translate`, not `transform`, so the two compose
   rather than clobbering each other. */
@media (min-width: 1300px) {
  .gsw {
    position: relative;
    left: 50%;
    width: min(92vw, 1740px);
    transform: translateX(-50%);
    gap: clamp(1.45rem, 1.5vw, 2rem);
    margin-top: clamp(2.95rem, 3.4vw, 4rem);
  }
}

.gsw__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  box-shadow: 0 4px 14px rgb(42 51 58 / .16);
}

.gsw__name {
  margin-top: .85em;
  color: var(--blue);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.15;
  text-transform: uppercase;
}
.gsw__race {
  margin-top: .45em;
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.proof__foot { margin-bottom: 0; }


/* == 7. Benefits ========================================================= */

.benefits {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 7.3rem) clamp(4.5rem, 11vw, 7.7rem);
  background: var(--ink);
  isolation: isolate;
}

/* Stacked, this section gets tall enough for the tiled binary field to start
   over halfway down, which reads as a seam. One pass only: digits dense at the
   top, fading out as they fall — the artwork already has that gradient built
   in. The tile comes back once the three columns do. */
.benefits .band__binary { background-repeat: no-repeat; }
@media (min-width: 800px) {
  .benefits .band__binary { background-repeat: repeat; }
}

.benefits__head {
  color: var(--blue-soft);
  font-family: var(--display);
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.benefit-list {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2.75rem, 7vw, 3.5rem);
  margin-top: clamp(2.25rem, 5.6vw, 3.4rem);
}
@media (min-width: 800px) {
  .benefit-list {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 5vw, 4.4rem);
    align-items: start;
  }
}

.benefit { text-align: center; }

.benefit__icon {
  width: auto;
  height: clamp(6.5rem, 13vw, 8.3rem);
  margin: 0 auto clamp(1.1rem, 2.6vw, 1.75rem);
}

.benefit__head {
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: .123em;
  line-height: 1.22;
  text-indent: .123em;
  text-transform: uppercase;
  color: var(--white);
}

.benefit__body {
  margin-top: clamp(1.1rem, 2.6vw, 1.7rem);
  color: var(--paper);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.benefit__body b { color: var(--gold); font-weight: 700; }


/* == 8. Testimonial carousel ============================================= */

.voices {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.5rem, 6.6vw, 5.3rem);
  background-color: var(--paper);
  background-image: url("../images/HalftoneBG-Light.jpg");
  background-image: image-set(url("../images/HalftoneBG-Light.webp") type("image/webp"),
                              url("../images/HalftoneBG-Light.jpg")  type("image/jpeg"));
  background-position: center top;
  background-repeat: repeat-y;
  background-size: max(100%, 78.1rem) auto;
  color: var(--ink);
}
@media (hover: hover) and (min-width: 900px) {
  .voices { background-attachment: fixed; }
}

.voices__head {
  color: var(--blue-bright);
  font-family: var(--display);
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.04;
  text-align: center;
  text-transform: uppercase;
}

.carousel {
  position: relative;
  margin-top: clamp(1.25rem, 3.2vw, 2.1rem);
}

.carousel__viewport { overflow: hidden; }

.carousel__track {
  display: flex;
  transition: transform .68s var(--ease-slide);
}
.carousel__track.is-dragging { transition: none; }

/* All six slides share the tallest one's height (flex stretch), so the inner
   grid has to fill it — otherwise short slides leave a gap under the portrait
   instead of letting it reach the foot of the section. */
.slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: opacity .55s var(--ease-slide);
}
/* Dim the off-screen slides so the incoming one visibly lifts into place as it
   arrives. Scoped to .is-ready so a page without JS shows slide one at full
   strength instead of a permanently greyed-out block. */
.carousel.is-ready .slide { opacity: .35; }
.carousel.is-ready .slide.is-active { opacity: 1; }

.slide__inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.25rem);
  align-items: end;
  padding-top: clamp(1rem, 3vw, 2rem);
}

.slide__portrait {
  width: auto;
  max-width: min(100%, 21rem);
  max-height: 17rem;
  margin-inline: auto;
  object-fit: contain;
  object-position: bottom center;
}

.slide__body { text-align: center; }

.slide__marks {
  display: block;
  margin-bottom: -.15em;  /* the glyph itself sits well above the bottom of its
                             line box at this font-size, so the box-model gap
                             alone reads bigger than the quote marks look */
  color: var(--blue-soft);
  font-size: clamp(3.4rem, 8.4vw, 6.6rem);
  font-weight: 900;
  letter-spacing: .123em;
  line-height: .38;
  text-indent: .123em;
  user-select: none;
}

.slide__quote {
  max-width: 34rem;
  margin: 0 auto 0;
  font-size: var(--fs-body);
  line-height: 1.5;
}

.slide__rule { margin-top: clamp(.9rem, 2.4vw, 1.5rem); }

.slide__name {
  margin-top: clamp(.8rem, 2vw, 1.25rem);
  color: var(--blue-bright);
  font-size: clamp(.95rem, 1.9vw, 1.4rem);
  font-weight: 900;
  letter-spacing: .123em;
  line-height: 1.2;
  text-indent: .123em;
  text-transform: uppercase;
}

.slide__sold {
  margin-top: .85em;
  font-family: var(--display);
  font-size: clamp(.78rem, 1.35vw, .95rem);
  font-weight: 400;
  letter-spacing: .075em;
  line-height: 1.5;
}
.slide__sold b { font-weight: 700; }

/* Arrows sit against the viewport edges, as in the comp */
.carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(2.4rem, 5vw, 3.9rem);
  height: clamp(4rem, 9vw, 7rem);
  translate: 0 -50%;
  padding: 0;
  border: 0;
  background: var(--panel);
  box-shadow: 0 6px 16px rgb(42 51 58 / .2);
  cursor: pointer;
  transition: background .25s var(--ease);
}
.carousel__arrow:hover { background: var(--white); }
.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }

.carousel__arrow span {
  width: clamp(.85rem, 1.9vw, 1.35rem);
  height: clamp(.85rem, 1.9vw, 1.35rem);
  border-top: 5px solid var(--gold);
  border-right: 5px solid var(--gold);
  transition: translate .25s var(--ease);
}
.carousel__arrow--prev span { rotate: -135deg; translate: 15% 0; }
.carousel__arrow--next span { rotate: 45deg;   translate: -15% 0; }
.carousel__arrow--prev:hover span { translate: 0 0; }
.carousel__arrow--next:hover span { translate: 0 0; }


@media (min-width: 860px) {
  .slide { justify-content: flex-end; }
  .slide__inner {
    grid-template-columns: 42% 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: end;
    align-content: end;
    height: 100%;
    padding-top: 0;
  }
  .slide__portrait {
    max-width: 100%;
    max-height: 20.5rem;
    margin: 0;
    justify-self: end;
    object-position: bottom right;
  }
  .slide__body { padding-bottom: clamp(2rem, 5vw, 3.6rem); }
}


/* == 9. Footer =========================================================== */

.foot {
  position: relative;
  padding-block: clamp(3.5rem, 10.6vw, 8.5rem) clamp(3rem, 6.6vw, 5.25rem);
  border-top: 12px solid var(--blue-soft);
  background-color: var(--ink);
  background-image: url("../images/HalftoneBG-Dark.jpg");
  background-image: image-set(url("../images/HalftoneBG-Dark.webp") type("image/webp"),
                              url("../images/HalftoneBG-Dark.jpg")  type("image/jpeg"));
  background-position: center top;
  background-repeat: repeat-y;
  background-size: max(100%, 78.1rem) auto;
  text-align: center;
}
@media (hover: hover) and (min-width: 900px) {
  .foot { background-attachment: fixed; }
}

.foot__logo {
  width: min(100%, 31.2rem);
  margin-inline: auto;
}

.foot__tag {
  margin-top: clamp(1.75rem, 4.1vw, 3.3rem);
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(.95rem, 2vw, 1.7rem);
  font-weight: 500;
  letter-spacing: .123em;
  line-height: 1.3;
  text-indent: .123em;
}
.foot__tag em { color: var(--white); font-weight: 700; font-style: italic; }

.foot .rule { margin-block: clamp(2.5rem, 6.3vw, 5rem); }

.foot__sale {
  width: min(100%, 40.8rem);
  margin: 0 auto;
}

.foot__dates {
  margin-top: clamp(.9rem, 2.3vw, 1.8rem);
  color: #c6d6e3;
  font-family: var(--display);
  font-size: var(--fs-date);
  font-weight: 400;
  letter-spacing: .223em;
  line-height: 1;
  text-indent: .223em;
  text-transform: uppercase;
}

.foot__btn { margin-top: clamp(1.75rem, 4.3vw, 3.45rem); }

.foot__entries {
  margin-top: clamp(1.25rem, 2.6vw, 2.1rem);
  color: var(--white);
  font-size: clamp(.9rem, 1.8vw, 1.25rem);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.foot__entries b { color: var(--gold); font-weight: 800; }

.foot__url {
  margin-top: clamp(1.75rem, 5.9vw, 4.75rem);
  font-size: clamp(.8rem, 1.5vw, .98rem);
  letter-spacing: .123em;
}
.foot__url a {
  color: #9fb4c2;
  text-decoration: none;
  transition: color .2s var(--ease);
}
.foot__url a:hover { color: var(--white); }


/* == 10. Motion & reveal ================================================= */

/* Reveal only ever hides things once we know scripting is on, so a failed
   or blocked main.js can't leave the page blank. */
.js [data-reveal] {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .7s var(--ease), translate .7s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* Reduced motion strips the *travel* — parallax, the reveal slide-up, the
   carousel's 1280 px glide — and leaves the fades. A blanket
   `transition-duration: .01ms` on everything was the wrong tool: it also killed
   the button's hover feedback and turned the carousel into a hard cut, which
   is not what the preference asks for. Opacity and colour changes carry no
   vestibular risk, so they stay. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* No travel */
  .band__binary,
  .hero__photo { transform: none !important; }

  .js [data-reveal] {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }

  /* Carousel cross-fades in place instead of sliding across */
  .carousel__track { transition: none; }
  .carousel.is-ready .slide { transition: opacity .35s linear; }

  /* CTA keeps its response, minus the lift */
  .btn:hover,
  .btn:focus-visible { transform: none; }
  .btn:active { transform: none; }

  .video__poster { transition: opacity .3s linear; }
  .video__btn:hover .video__poster,
  .video__btn:focus-visible .video__poster { transform: none; }
  .video__btn:hover .video__play,
  .video__btn:focus-visible .video__play { scale: 1; }
}