/* `fonts.css` is linked from the HTML, not imported here: an @import cannot
   start downloading until this file has arrived and parsed, which serialises
   two render-blocking requests. */

/* ------------------------------------------------------------------
   Roll Kubb : design tokens
   ------------------------------------------------------------------ */
:root {
  /* Brand */
  --red:        #e5322a;
  --red-dark:   #b8231d;
  /* The brand red carrying white text: #e5322a lands at 4.36:1, just under
     AA. Two percent darker clears it at 4.53:1 and is imperceptible. */
  --red-action: #e03129;
  --blue:       #1f7ec4;
  --green:      #2f9e5e;
  --yellow:     #f2b705;
  --purple:     #7a4bbf;

  /* Neutrals: warm, sand-driven */
  --ink:        #17130f;
  --ink-soft:   #4a423a;
  --ink-faint:  #7d746a;
  --sand:       #faf5ed;
  --sand-2:     #f2e9db;
  --sand-3:     #e6d9c5;
  --line:       #e2d6c3;
  --white:      #fff;

  /* Type */
  --display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Layout */
  --wrap:   1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 20px;
  --radius-sm: 12px;

  --shadow-sm: 0 1px 2px rgb(23 19 15 / .05), 0 2px 8px rgb(23 19 15 / .05);
  --shadow-md: 0 4px 12px rgb(23 19 15 / .07), 0 16px 40px rgb(23 19 15 / .09);
  --shadow-lg: 0 8px 24px rgb(23 19 15 / .10), 0 32px 70px rgb(23 19 15 / .14);

  --nav-h: 68px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 8vw, 5.25rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(2rem, 5vw, 3.15rem);   font-weight: 800; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700; letter-spacing: -.015em; }
h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* `height: auto` is load-bearing: the width/height attributes on every <img>
   (there to reserve layout space) act as presentational hints, and without this
   they would win over the `aspect-ratio` rules below. */
img { max-width: 100%; height: auto; display: block; }

strong { color: var(--ink); font-weight: 600; }

::selection { background: var(--red); color: #fff; }

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

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

section { position: relative; }

.section {
  padding-block: clamp(4.5rem, 10vw, 8rem);
}

.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head--tight { margin-bottom: 2.5rem; }

/* Title on the left, award card on the right. */
.section-head--aside {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem 2.5rem;
}
.section-head__main { max-width: 46rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Small uppercase red on sand is text, not decoration: --red only reaches
     4.01:1 here (3.62:1 on sand-2), so the label takes the deeper red. */
  color: var(--red-dark);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 3px;
  background: currentColor;
  border-radius: 2px;
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 40rem;
}

.award-badge {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .4rem 1.15rem .4rem .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  margin: 1.5rem 0 0;
}
.award-badge img { width: 52px; height: 52px; }

.section-head--aside .award-badge {
  flex: none;
  max-width: 21rem;
  margin: 0;
}

/* Stacked, the award card belongs between the heading and the lede. Dissolving
   the wrapper for one breakpoint turns its children into siblings of the card,
   which is what lets the card slot into the middle of them. */
@media (max-width: 860px) {
  .section-head--aside {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .section-head__main { display: contents; }
  .section-head--aside .award-badge { order: 3; margin-bottom: 1.5rem; }
  .section-head--aside .lede { order: 4; }
}

.bg-sand-2 { background: var(--sand-2); }

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .9rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, background-color .18s ease;
  box-shadow: 0 2px 0 rgb(0 0 0 / .12);
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(23 19 15 / .22); }
.btn:active { transform: translateY(0); }

.btn--red   { --btn-bg: var(--red-action); }
.btn--red:hover { background: var(--red-dark); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--ink); color: #fff; }

.btn--sm { padding: .6rem 1.1rem; font-size: .9rem; }

/* An inline SVG with only a viewBox has no intrinsic size: without this it
   would stretch to fill the flex line. */
.btn svg { flex: none; width: 18px; height: 18px; }

/* ------------------------------------------------------------------
   Skip link
   ------------------------------------------------------------------ */
/* A fixed 68px bar with nine targets stands between the keyboard and the
   content on every entry. Hidden until focused, then it drops into view. */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 120;
  transform: translate(-50%, -130%);
  padding: .7rem 1.25rem;
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: transform .18s cubic-bezier(.2,.8,.3,1);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------ */
/* Landmark wrapper around the link list; keeps it a flex item of the bar. */
.nav__nav { display: flex; align-items: center; }

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgb(250 245 237 / .78);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  background: rgb(250 245 237 / .92);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.nav__logo { margin-right: auto; display: flex; align-items: center; }
.nav__logo img { height: 21px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.6vw, 1.4rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__links a {
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: .35rem .1rem;
  border-bottom: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.nav__links a:hover,
.nav__links a.is-active { color: var(--ink); border-bottom-color: var(--red); }

/* Last item of the links list, so it rides along into the burger panel. */
.nav__social {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin: 0;
  padding: 0 0 0 1rem;
  border-left: 1px solid var(--line);
}
/* Square icon buttons, not text links: undo what `.nav__links a` sets. */
.nav__social a {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border-bottom: 0;
  border-radius: 10px;
  color: var(--ink-soft);
  transition: color .16s ease, background-color .16s ease;
}
.nav__social a:hover { color: var(--red); background: rgb(23 19 15 / .06); }
.nav__social svg { width: 19px; height: 19px; }

.nav__toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--ink);
  border-radius: 10px;
}
.nav__toggle:hover { background: rgb(23 19 15 / .06); }
.nav__toggle svg { width: 24px; height: 24px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 880px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--sand);
    border-bottom: 1px solid var(--line);
    padding: .5rem var(--gutter) 1.25rem;
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links a {
    display: block;
    font-size: 1.15rem;
    font-weight: 600;
    padding: .75rem 0;
    border-bottom: 1px solid var(--line);
  }
  .nav__links li:last-child a { border-bottom: 0; }
  .nav__links a:hover, .nav__links a.is-active { border-bottom-color: var(--line); color: var(--red); }

  /* In the panel the icons sit in a centred row, under the last link and its
     rule. Bigger targets here: this is a thumb, not a mouse pointer. */
  .nav__social {
    justify-content: center;
    gap: .35rem;
    padding: 1rem 0 .25rem;
    border-left: 0;
  }
  .nav__social a {
    display: grid;
    width: 46px; height: 46px;
    padding: 0;
  }
  .nav__social svg { width: 22px; height: 22px; }
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
  background:
    radial-gradient(90rem 50rem at 78% -8%, #fff 0%, rgb(255 255 255 / 0) 60%),
    linear-gradient(178deg, var(--sand) 0%, var(--sand-2) 100%);
}

/* soft blurred blobs */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .3;
  pointer-events: none;
}
.hero::before { width: 32rem; height: 32rem; top: -14rem; right: -12rem; background: var(--yellow); opacity: .22; }
.hero::after  { width: 26rem; height: 26rem; bottom: -14rem; left: -10rem; background: var(--blue); opacity: .14; }

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Comic Neue runs smaller than Outfit and stops at 700, hence the bumped
   size; its rounded shapes also need the display letter-spacing back to 0. */
.hero__title {
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  font-size: clamp(3rem, 9vw, 5.75rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0;
  margin-bottom: .1em;
}
/* The R and the K carry colour, not emphasis, so they are spans. The italic is
   already inherited from the title. */
.hero__title span { color: var(--red); }

.hero__tagline {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: .8rem;
}

.hero__sub {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  max-width: 32rem;
  margin-bottom: 2rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* hero art */
.hero__art {
  position: relative;
  padding-left: 2.25rem;   /* room for the product card to hang off the left */
  padding-bottom: 1.5rem;
}

.hero__photo {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: rotate(1.5deg);
  background: var(--sand-3);
}
/* No forced ratio. The subject fills the frame top to bottom — raised hands at
   the very top, the front row of Kubbs at the very bottom — so any crop that
   keeps the Kubbs cuts the fingertips off. The width/height attributes reserve
   the space instead. */
.hero__photo img { width: 100%; }

.hero__card {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(52%, 14rem);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  padding: .45rem;
  box-shadow: var(--shadow-md);
  transform: rotate(-3.5deg);
}
.hero__card img { border-radius: 14px; aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.hero__card figcaption {
  font-family: var(--display);
  font-weight: 700;
  font-size: .8rem;
  color: var(--ink);
  padding: .45rem .3rem .15rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
}
.hero__card .price { color: var(--red-dark); }

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { max-width: 24rem; margin-inline: auto; margin-top: 1.5rem; }
}

/* ------------------------------------------------------------------
   Game sections (Roll Kubb / Roll Square)
   ------------------------------------------------------------------ */
/* Price + buttons, hung under a whole section. */
.section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.price-tag {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.03em;
  margin-right: .3rem;
}

/* Narrow enough and the row wraps mid-pair, stranding the last button on its
   own line and making it look like the only one that matters. Give the price
   the whole first line instead: the two actions then stay side by side. */
@media (max-width: 560px) {
  .section-actions .price-tag { flex-basis: 100%; margin-right: 0; }
}

/* ------------------------------------------------------------------
   Rules (page bits + modal content)
   ------------------------------------------------------------------ */
.steps {
  counter-reset: step;
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 1.5rem;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.35rem; height: 2.35rem;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: 0 3px 0 rgb(0 0 0 / .18);
}
.steps li:nth-child(3n+1)::before { background: var(--red); }
.steps li:nth-child(3n+2)::before { background: var(--blue); }
.steps li:nth-child(3n+3)::before { background: var(--green); }
.steps h4 { margin-bottom: .2rem; }
.steps p { font-size: .95rem; }

.callout {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 1.35rem 1.5rem;
  margin-top: 2rem;
  font-size: .95rem;
  box-shadow: var(--shadow-sm);
}
.callout h4 { margin-bottom: .4rem; }
.callout--blue { border-left-color: var(--blue); }

.formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  background: var(--sand-2);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  margin: 1rem 0;
  font-size: clamp(.95rem, 2vw, 1.1rem);
}
.formula b {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .25rem .6rem;
  font-weight: 800;
}
.formula i { font-style: normal; color: var(--red-dark); font-size: 1.15em; }
.formula b.formula__result { background: var(--red); border-color: var(--red); color: #fff; }
/* Names where the multiplier in the line above came from. */
.formula__note { font-size: .82rem; color: var(--ink-faint); }

.signoff {
  margin-top: 2rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ink);
}

/* `.face` is shared with the 404 page code. */
.face {
  width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center;
  border-radius: 10px;
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  box-shadow: 0 3px 0 rgb(0 0 0 / .2);
}
.face:nth-child(1) { background: var(--red); }
.face:nth-child(2) { background: var(--blue); }
.face:nth-child(3) { background: var(--green); }
.face:nth-child(4) { background: var(--yellow); color: var(--ink); }
.face:nth-child(5) { background: var(--purple); }
.face:nth-child(6) { background: var(--ink); }

/* One size up, for when the faces carry the message rather than illustrate it
   — the 404 code. Lives here so the page has no styling of its own to drift. */
.face--lg { width: 3.4rem; height: 3.4rem; font-size: 1.6rem; }

/* ------------------------------------------------------------------
   Split rows (text + media)
   ------------------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split + .split { margin-top: clamp(3.5rem, 8vw, 6rem); }
.split--flip .split__media { order: -1; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  /* `.split--flip` keeps `order: -1` here too: stacked, the photo reads better
     between the lede and the rules sheets than after them. */
}

.split__media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--sand-2);
}
/* No forced ratio here: these photos vary from wide to portrait, and the row
   is centre-aligned, so letting each keep its own shape avoids bad crops. */
.split__media img { width: 100%; }

/* Photo sitting in the text column, under the rules link. */
.split__media--inline { margin-top: 1.75rem; }

.sheets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.sheets a {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sheets a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* The fiches are shown whole: cropping them would hide part of the rules. */
.sheets img { display: block; width: 100%; }

/* One per row on a phone. Side by side, a 1127px-wide page of rules lands at
   about 150px: the text is there, but nobody can read it. */
@media (max-width: 560px) {
  .sheets { grid-template-columns: 1fr; }
}

/* Both games open their rules layer with the same ghost button. This one used
   to be a bare underlined link, which ranked the rules below the price. */
.sheets + .btn { margin-top: 1.25rem; }

/* ------------------------------------------------------------------
   Gallery carousel
   ------------------------------------------------------------------ */
.carousel {
  position: relative;
}

/* Without JS this stays a plain swipeable scroller: the arrows and dots
   are the enhancement, the snapping viewport is the baseline. */
.carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius);
  background: var(--sand-3);
  box-shadow: var(--shadow-md);
  scrollbar-width: none;
}
.carousel__viewport::-webkit-scrollbar { display: none; }

.carousel__track {
  --per: 1;          /* slides in view, see the breakpoints below */
  --gap: 1rem;
  display: flex;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px)  { .carousel__track { --per: 2; } }
@media (min-width: 1024px) { .carousel__track { --per: 3; } }

.carousel__slide {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  scroll-snap-align: start;
  height: clamp(240px, 42vh, 420px);
  /* `svh` ignores the mobile URL bar. With `vh`, collapsing it mid-scroll
     re-lays out every slide under the reader's thumb. */
  height: clamp(240px, 42svh, 420px);
}
.carousel__slide a {
  display: block;
  height: 100%;
  cursor: zoom-in;
}
.carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  /* Portrait posters next to wide beach shots: contain keeps every photo
     whole, the sand backdrop fills what is left. */
  object-fit: contain;
}

.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.carousel__btn:hover { background: var(--ink); color: #fff; }
.carousel__btn svg { width: 22px; height: 22px; }
.carousel__btn--prev { left: .75rem; }
.carousel__btn--next { right: .75rem; }

/* One slide at a time on a phone: the arrows would sit on top of the photo
   and eat about a third of it. Swiping is the native gesture, and the dots
   still say where you are. */
@media (max-width: 639px) {
  .carousel__btn { display: none; }
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin-top: 1.25rem;
}
.carousel__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
}
/* Sand-3 on sand is 1.28:1 — the pagination was invisible. The outline gives
   the control a 4.23:1 boundary while the fill stays quiet. */
.carousel__dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 1px solid var(--ink-faint);
  border-radius: 999px;
  background: var(--sand-3);
  cursor: pointer;
  transition: width .2s ease, background .2s ease, border-color .2s ease;
}
.carousel__dot:hover { background: var(--ink-faint); }
.carousel__dot.is-active { width: 26px; background: var(--red); border-color: var(--red); }

.carousel__play {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.carousel__play:hover { background: var(--sand-3); color: var(--ink); }
.carousel__play[hidden] { display: none; }
.carousel__play svg { display: none; width: 15px; height: 15px; }
.carousel__play.is-playing .carousel__icon--pause,
.carousel__play:not(.is-playing) .carousel__icon--play { display: block; }

/* ------------------------------------------------------------------
   Reserve / order
   ------------------------------------------------------------------ */
.order__grid {
  display: grid;
  grid-template-columns: minmax(0, 20rem) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 860px) { .order__grid { grid-template-columns: 1fr; } }

.pricebox {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.pricebox h3 { font-size: 1.15rem; margin-bottom: 1.25rem; }
.pricebox dl { margin: 0; display: grid; gap: .9rem; }
.pricebox .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px dashed var(--line);
}
.pricebox .row:last-child { border-bottom: 0; padding-bottom: 0; }
.pricebox dt { font-weight: 600; color: var(--ink); }
.pricebox dt small { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-faint); }
.pricebox dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--red);
  white-space: nowrap;
}
.pricebox__note {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--ink-faint);
  display: flex;
  gap: .85rem;
  align-items: center;
}
.pricebox__note img { width: 46px; flex: none; }

/* Form */
.form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm);
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: .4rem; margin-bottom: 1rem; }
.field label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .01em;
}
.field label .opt { font-weight: 400; color: var(--ink-faint); }
.field input,
.field select,
.field textarea {
  font-family: inherit;
  /* Full 16px, not a hair under: iOS Safari zooms the page in on any field it
     focuses below that, and the visitor is left scrolled sideways. */
  font-size: 1rem;
  color: var(--ink);
  padding: .7rem .85rem;
  /* A control's boundary needs 3:1 against what surrounds it. `--line` on the
     white card is 1.43:1 — the field was a barely-there rectangle outdoors.
     Faint Ink clears it at 4.59:1 on white, 4.23:1 against the sand fill. */
  border: 1px solid var(--ink-faint);
  border-radius: 10px;
  background: var(--sand);
  transition: border-color .15s ease, background-color .15s ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 6.5rem; }
/* The fill and border say "active"; the Beach Blue ring from `:focus-visible`
   says "the keyboard is here". Suppressing the outline used to out-specify that
   ring and leave the fields as the one control without it. */
.field input:focus,
.field select:focus,
.field textarea:focus {
  /* `background-color`, not the shorthand: `background` would reset the select's
     chevron to none and the arrow would vanish exactly while you are using it. */
  background-color: #fff;
  border-color: var(--ink);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2317130f' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 12px;
  padding-right: 2.4rem;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.form__hint { font-size: .82rem; color: var(--ink-faint); flex: 1 1 14rem; }

/* Honeypot. Kept out of the layout and out of the accessibility tree; only a
   bot filling every field it finds will tick it. */
.form__hp { display: none; }

/* Announced by `role="status"`. A fetch submit changes nothing on screen
   otherwise, so the visitor cannot tell whether the demande left. */
.form__status {
  margin: 1.25rem 0 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--sand);
}
.form__status[hidden] { display: none; }
.form__status p { margin-bottom: .75rem; }
.form__copy {
  width: 100%;
  font: inherit;
  color: var(--ink);
  padding: .7rem .85rem;
  /* Same contrast floor as the fields above it: this one is read from and
     copied out of, so its edge has to be findable too. */
  border: 1px solid var(--ink-faint);
  border-radius: 10px;
  background: #fff;
  resize: vertical;
}
.form__hint a { color: var(--ink); text-decoration-color: var(--line); }

/* ------------------------------------------------------------------
   Contact + footer
   ------------------------------------------------------------------ */
.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}
.contact-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.contact-card:hover { transform: translateY(-3px); border-color: var(--red); box-shadow: var(--shadow-md); }
.contact-card__icon {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--sand-2);
  color: var(--red);
}
.contact-card__icon svg { width: 21px; height: 21px; }
.contact-card__text { min-width: 0; }
.contact-card__label {
  display: block;
  font-size: .72rem;
  color: var(--ink-faint);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .15rem;
}
.contact-card strong {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.footer {
  background: var(--ink);
  color: #8d8478;
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 2.5rem;
  border-top: 1px solid #2b241d;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.footer__logo img { height: 20px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.footer__links a { font-size: .9rem; color: #a49a8d; text-decoration: none; }
.footer__links a:hover { color: #fff; }
.footer__legal { font-size: .82rem; }

/* ------------------------------------------------------------------
   Rules modal
   ------------------------------------------------------------------ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 3vw, 2.5rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; visibility: visible; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(12 9 7 / .68);
  backdrop-filter: blur(4px);
  border: 0;
  cursor: pointer;
}

.modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 48rem);
  max-height: min(90vh, 56rem);
  background: var(--sand);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(14px) scale(.985);
  transition: transform .26s cubic-bezier(.2,.8,.3,1);
}
.modal.is-open .modal__panel { transform: none; }

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.15rem, 4vw, 2.25rem);
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.modal__head .eyebrow { margin-bottom: .4rem; }
.modal__head h2 { font-size: clamp(1.4rem, 4vw, 2.05rem); margin: 0; }

.modal__close {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--sand);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.modal__close:hover { background: var(--red); border-color: var(--red); color: #fff; }
.modal__close svg { width: 20px; height: 20px; }

.modal__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.35rem, 4vw, 2.25rem);
}
.modal__body .steps { margin-top: 1.75rem; }

.lede--modal { font-size: 1.05rem; }

@media (max-width: 560px) {
  .modal { padding: 0; }
  /* `dvh` tracks the visible viewport: with `vh` alone, iOS Safari counts the
     URL bar as available height and the panel's chrome is clipped off-screen. */
  .modal__panel { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
  .modal__panel { max-height: 100dvh; }
}

/* ------------------------------------------------------------------
   Lightbox
   ------------------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(12 9 7 / .92);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgb(0 0 0 / .6);
}
.lightbox__close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .12);
  color: #fff;
  cursor: pointer;
}
.lightbox__close:hover { background: rgb(255 255 255 / .22); }
.lightbox__close svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------------
   Scroll reveal
   ------------------------------------------------------------------ */
/* Scoped to `.js`: the observer that adds `is-in` never runs without
   JavaScript, and unscoped this rule leaves five of the seven sections
   permanently invisible. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.2,.8,.3,1), transform .6s cubic-bezier(.2,.8,.3,1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Reduced motion means less movement, not no feedback. Animations and travel
   are cut; colour, opacity and shadow still confirm hover, focus and
   open/close, so a button pressed still looks pressed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, background-color, border-color, color, box-shadow !important;
    transition-duration: .15s !important;
  }

  /* Nothing travels: the lifts, the slide-in panel and the reveal all land
     in their resting position instead of moving into it. */
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .contact-card:hover, .sheets a:hover { transform: none; }
  .modal__panel, .modal.is-open .modal__panel { transform: none; }
  .nav__links { transform: none; }

  html, .carousel__viewport { scroll-behavior: auto; }
}