/* Joseph Joseph 001 Everything clicks — scenes 1–2.
   Composition lives here. script.js moves each card from a scattered pose to
   its .slot in the organised row and sets the progress variables. */

/* ---------- Font (self-hosted, OFL-1.1, see references/sources.md) ---------- */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2-variations"),
       url("assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
  --cream: #f5eee2;          /* warm cream worktop */
  --cream-deep: #eadfcc;     /* shade */
  --cream-light: #fbf7ef;    /* window light */
  --ink: #211c17;            /* warm ink */
  --ink-soft: #4a4037;
  --muted: #5c5045;

  /* Lid-tab accents, sampled by eye from the official photographs. */
  --yellow: #f2c230;
  --orange: #f2782e;
  --raspberry: #d6304f;
  --plum: #7c3d8e;
  --teal: #1597c4;

  --font: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: max(1.5rem, env(safe-area-inset-left, 0px));

  /* Progress variables, driven by script.js. Defaults = organised (static fallback). */
  --hero: 1;
  --detail: 1;
  --rule: 1;
  --cue: 0;

  /* ----- Composition: phone portrait ----- */
  --headline-size: clamp(3rem, 16vw, 5.5rem);
  --slot: min(calc((100vw - 2 * var(--gutter) - 4 * 0.85rem) / 5), 5.5rem);
  --slot-gap: 0.85rem;
  /* Keep important content above the host's badge zone on phones. */
  --badge-clear: 88px;
}

@media (orientation: landscape), (min-width: 821px) {
  :root {
    --gutter: max(6vw, 1.5rem);
    --headline-size: clamp(3.4rem, min(7.2vw, 13.5vh), 8.5rem);
    --slot: min(10vh, 6.6vw);
    --slot-gap: min(2.2vh, 1.4vw);
    --badge-clear: 0px;
  }
}

/* ---------- Base ---------- */

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

html {
  background: var(--cream);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  font-family: var(--font);
  overflow-x: clip;
}

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

/* ---------- Story section and sticky stage ---------- */

.story { position: relative; }
.js .story { height: calc((var(--story-screens, 2.15) + 1) * 100svh); }

.stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  background: var(--cream);
}

.js .stage { position: sticky; top: 0; }

/* ---------- Natural kitchen light ---------- */

.light,
.light > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.light { z-index: 0; }

/* Window light falling diagonally across the worktop, with warm shade beyond it. */
.light__window {
  background:
    linear-gradient(118deg, rgba(251, 247, 239, 0) 8%, rgba(255, 252, 245, 0.95) 24%, rgba(255, 252, 245, 0.85) 40%, rgba(251, 247, 239, 0) 58%),
    radial-gradient(120% 90% at 0% 0%, rgba(255, 251, 242, 0.9), rgba(255, 251, 242, 0) 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(226, 211, 188, 0.75), rgba(226, 211, 188, 0) 70%);
}

/* Soft mullion shadows from the window frame. */
.light__shadow {
  background:
    repeating-linear-gradient(118deg, rgba(120, 95, 60, 0) 0 22vmax, rgba(120, 95, 60, 0.06) 22vmax 23.2vmax, rgba(120, 95, 60, 0) 23.2vmax 46vmax);
  filter: blur(6px);
}

/* A whisper of worktop grain. */
.light__grain {
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Complete set (official photo 01) ---------- */

.hero {
  position: absolute;
  z-index: 1;
  margin: 0;
  left: 50%;
  top: 25svh;
  width: min(94vw, 34rem, calc(36svh * 1.233));
  translate: -50% calc((1 - var(--hero)) * 5vh);
  scale: calc(0.94 + 0.06 * var(--hero));
  opacity: var(--hero);
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 72%, transparent 100%);
}

/* The studio photo's white background melts into the cream (multiply on the
   figure, so it blends with the stage), and a soft mask feathers its edges.
   The photo itself is not edited. */
.hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Organised row (targets) ---------- */

.slots,
html:not(.js) .cards {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  bottom: calc(var(--safe-bottom) + max(4.5svh, var(--badge-clear)));
  display: flex;
  gap: var(--slot-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.slot {
  width: var(--slot);
  aspect-ratio: 1;
  visibility: hidden;
}

/* ---------- Photo cards ---------- */

.cards { margin: 0; padding: 0; list-style: none; }

.card {
  --open: 0;
  position: relative;
  width: var(--slot);
  aspect-ratio: 1;
  border-radius: 12%;
  background: #fffdf8;
  box-shadow:
    0 0.15em 0.35em rgba(80, 55, 25, 0.12),
    0 0.9em 1.8em -0.6em rgba(80, 55, 25, 0.28);
}

.js .card {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
  /* width and transform are set by script.js */
}

.card img {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  object-fit: cover;
  border-radius: 9%;
  display: block;
}

.card--1 img { object-position: 30% 42%; }
.card--2 img { object-position: 56% 46%; }
.card--3 img { object-position: 64% 52%; }
.card--4 img { object-position: 50% 50%; }
.card--5 img { object-position: 50% 62%; }

/* Clip tabs (graphic motif): sprung open while scattered, snapped shut when organised. */
.tab {
  position: absolute;
  top: 31%;
  width: 11%;
  height: 38%;
  border-radius: 0.35em;
  background: var(--tab);
  box-shadow: 0 0.1em 0.25em rgba(60, 40, 20, 0.25), inset 0 0.08em 0 rgba(255, 255, 255, 0.35);
}

.tab--l {
  left: -6.5%;
  transform-origin: 100% 15%;
  transform: translateX(calc((1 - var(--open)) * 45%)) rotate(calc(var(--open) * 62deg));
}

.tab--r {
  right: -6.5%;
  transform-origin: 0% 15%;
  transform: translateX(calc((1 - var(--open)) * -45%)) rotate(calc(var(--open) * -62deg));
}

/* ---------- Copy ---------- */

.copy-head {
  position: absolute;
  z-index: 20;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(var(--safe-top) + 6svh);
}

.eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.headline {
  margin: 0;
  font-weight: 760;
  font-variation-settings: "opsz" 96;
  font-size: var(--headline-size);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.headline:focus { outline: none; }
.headline__line { display: block; }

/* Five colour segments that close their gaps as everything comes together. */
.rule {
  display: flex;
  gap: calc((1 - var(--rule)) * 0.9rem + 0.18rem);
  margin-top: clamp(0.8rem, 2svh, 1.3rem);
}

.rule__seg {
  display: block;
  width: clamp(1.6rem, 7vw, 2.6rem);
  height: 0.5rem;
  border-radius: 999px;
  background: var(--c);
  transform: translateY(calc((1 - var(--rule)) * var(--dy))) rotate(calc((1 - var(--rule)) * var(--r)));
}

.rule__seg:nth-child(1) { --c: var(--yellow);    --dy: -0.5rem; --r: -14deg; }
.rule__seg:nth-child(2) { --c: var(--orange);    --dy: 0.4rem;  --r: 10deg; }
.rule__seg:nth-child(3) { --c: var(--raspberry); --dy: -0.3rem; --r: -8deg; }
.rule__seg:nth-child(4) { --c: var(--plum);      --dy: 0.5rem;  --r: 16deg; }
.rule__seg:nth-child(5) { --c: var(--teal);      --dy: -0.4rem; --r: -12deg; }

.copy-detail {
  position: absolute;
  z-index: 20;
  left: var(--gutter);
  right: var(--gutter);
  top: auto;
  bottom: calc(var(--safe-bottom) + max(4.5svh, var(--badge-clear)) + var(--slot) + 1.1rem);
  opacity: var(--detail);
  translate: 0 calc((1 - var(--detail)) * 1rem);
}

.product-name {
  margin: 0;
  font-weight: 700;
  font-variation-settings: "opsz" 32;
  font-size: clamp(1.25rem, 5.4vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.product-line {
  margin: 0.35rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.source-note {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ---------- Scroll cue ---------- */

.cue {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  bottom: calc(var(--safe-bottom) + 1.25rem);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: var(--cue);
  pointer-events: none;
}

.cue__dots { display: inline-flex; gap: 0.3rem; }

.cue__dots i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--yellow);
  animation: cue-hop 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.cue__dots i:nth-child(2) { background: var(--raspberry); animation-delay: 0.15s; }
.cue__dots i:nth-child(3) { background: var(--teal); animation-delay: 0.3s; }

@keyframes cue-hop {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(0.35rem); }
}

/* ---------- Composition: desktop and landscape ---------- */

@media (orientation: landscape), (min-width: 821px) {
  .copy-head {
    right: auto;
    top: calc(var(--safe-top) + 15vh);
    max-width: 44vw;
  }

  .eyebrow { font-size: 0.9375rem; }

  .hero {
    left: auto;
    right: 3vw;
    top: 50%;
    width: min(47vw, 100vh);
    translate: 0 calc(-50% + (1 - var(--hero)) * 5vh);
  }

  .copy-detail {
    right: auto;
    top: auto;
    bottom: calc(var(--slot) + 4.5svh + 2.25rem);
    max-width: 38vw;
  }

  .product-name { font-size: clamp(1.3rem, min(2vw, 3.6vh), 2rem); }

  .slots,
  html:not(.js) .cards { bottom: 5.5vh; }

  .cue { right: auto; left: var(--gutter); bottom: 1.4rem; }
}

/* ---------- Short landscape screens (e.g. phones on their side) ---------- */

@media (orientation: landscape) and (max-height: 540px) {
  :root { --headline-size: clamp(2.1rem, min(6vw, 11vh), 4rem); }
  .copy-head { top: calc(var(--safe-top) + 7vh); max-width: 46vw; }
  .eyebrow { margin-bottom: 0.35rem; font-size: 0.8125rem; }
  .rule { margin-top: 0.6rem; }
  .copy-detail { max-width: 46vw; bottom: calc(var(--slot) + 4.5svh + 1.25rem); }
  .product-name { font-size: 1.125rem; }
  .product-line { font-size: 0.9375rem; margin-top: 0.2rem; }
  .source-note { font-size: 0.75rem; margin-top: 0.3rem; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .cue__dots i { animation: none; }
  .js .card,
  .js .hero,
  .js .copy-detail,
  .js .rule__seg,
  .js .tab { transition: opacity 0.2s linear; }
}

/* Phone portrait: the source line lives in the footer, keeping the story clear of the badge zone. */
.story .source-note { display: none; }
@media (orientation: landscape), (min-width: 821px) {
  .story .source-note { display: block; }
}

/* ============================================================
   Sections 3–6 (normal document flow; readable without JavaScript)
   ============================================================ */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Scroll-linked entrance (reversible). --in is set by script.js; 1 without it. */
[data-reveal] {
  opacity: var(--in, 1);
  translate: 0 calc((1 - var(--in, 1)) * 2.5rem);
}

.sect {
  position: relative;
  padding: clamp(4.5rem, 13vh, 8.5rem) var(--gutter);
  overflow: hidden;
  overflow: clip;
}

.sect--space,
.sect--details {
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(255, 251, 242, 0.95), rgba(255, 251, 242, 0) 60%),
    var(--cream);
}

.sect--fit {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(255, 250, 240, 0.8), rgba(255, 250, 240, 0) 65%),
    #efe5d4;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--ink-soft);
}

.kicker__num {
  display: inline-grid;
  place-items: center;
  min-width: 2.2rem;
  height: 1.6rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.sect__title {
  margin: 0;
  font-weight: 760;
  font-variation-settings: "opsz" 72;
  font-size: clamp(2.4rem, 10.5vw, 5.25rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.sect__lede {
  margin: 1rem 0 0;
  max-width: 30rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- Space-saving design ---------- */

.space {
  display: grid;
  gap: clamp(2rem, 6vw, 4.5rem);
  max-width: 76rem;
  margin: 0 auto;
}

.quote {
  margin: 1.4rem 0 0;
  padding-left: 1.1rem;
  border-left: 0.35rem solid var(--teal);
  max-width: 30rem;
}

.quote p {
  margin: 0;
  font-size: clamp(1.125rem, 4.4vw, 1.375rem);
  line-height: 1.45;
}

.quote footer {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.clip { position: relative; margin: 0; }

.clip__frame {
  position: relative;
  border: 0.6rem solid #fffaf2;
  border-radius: 1.6rem;
  background: #2a231c;
  box-shadow: 0 0.3rem 0.8rem rgba(80, 55, 25, 0.12), 0 1.6rem 3rem -1.2rem rgba(80, 55, 25, 0.35);
  overflow: hidden;
}

/* Clip-tab motif on the frame. */
.clip::before,
.clip::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 34%;
  width: 0.8rem;
  height: 30%;
  border-radius: 0.4rem;
  box-shadow: 0 0.1rem 0.3rem rgba(60, 40, 20, 0.25);
}
.clip::before { left: -0.35rem; background: var(--raspberry); }
.clip::after { right: -0.35rem; background: var(--teal); }

.clip__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #2a231c;
}

.clip__toggle {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem 0.5rem 0.8rem;
  border: 0;
  border-radius: 999px;
  background: rgba(251, 247, 239, 0.94);
  color: var(--ink);
  font: 650 0.9375rem/1 var(--font);
  cursor: pointer;
  box-shadow: 0 0.2rem 0.6rem rgba(30, 20, 10, 0.25);
}

.clip__toggle:hover { background: #fff; }

.clip__icon {
  position: relative;
  width: 0.85rem;
  height: 0.85rem;
}

/* Play triangle */
.clip__toggle[aria-pressed="false"] .clip__icon {
  width: 0;
  height: 0;
  margin-left: 0.15rem;
  border-style: solid;
  border-width: 0.45rem 0 0.45rem 0.72rem;
  border-color: transparent transparent transparent var(--ink);
}

/* Pause bars */
.clip__toggle[aria-pressed="true"] .clip__icon {
  background: linear-gradient(to right, var(--ink) 0 35%, transparent 35% 65%, var(--ink) 65% 100%);
}

.clip__caption {
  margin-top: 0.8rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- Find your fit ---------- */

.fit {
  display: grid;
  gap: 1.75rem;
  max-width: 76rem;
  margin: 0 auto;
}

.sizes {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.sizes__legend {
  padding: 0;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--ink-soft);
}

.sizes__options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}

.size { position: relative; display: block; cursor: pointer; }

.size input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.size span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.5rem 0.25rem;
  border: 2px solid rgba(33, 28, 23, 0.18);
  border-radius: 0.9rem;
  background: rgba(255, 252, 245, 0.85);
  font-weight: 700;
  font-size: clamp(0.9375rem, 3.9vw, 1.125rem);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.size input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  transform: translateY(-2px);
}

.size input:focus-visible + span {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

.fit-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fit-item__cap {
  margin: 0;
  font-weight: 780;
  font-variation-settings: "opsz" 96;
  font-size: clamp(3.6rem, 17vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.fit-item__rank {
  margin: 0.4rem 0 0;
  font-size: 1.125rem;
  color: var(--ink-soft);
}

/* With JavaScript, only the chosen size is shown. Without it, all five are listed. */
.js .fit-item { display: none; }
.js .fit-item.is-active { display: block; }

html:not(.js) .sizes { display: none; }
html:not(.js) .fit-item { display: flex; align-items: baseline; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(33, 28, 23, 0.12); }
html:not(.js) .fit-item__cap { font-size: 2rem; min-width: 6.5rem; }
html:not(.js) .fit-item__rank { margin: 0; font-size: 1rem; }

.scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 0.5rem;
  height: 5.5rem;
  margin-top: 1.4rem;
}

.scale__bar {
  display: block;
  height: max(0.35rem, calc(var(--v) * 100%));
  border-radius: 0.4rem 0.4rem 0.15rem 0.15rem;
  background: rgba(33, 28, 23, 0.16);
  transition: background-color 0.25s ease;
}

.scale__bar.is-active { background: var(--ink); }

.scale__note {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.fit__photo { margin: 0; mix-blend-mode: multiply; }

.fit__photo img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 72%, transparent 100%);
}

.fit__photo figcaption {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 34rem;
}

/* ---------- The practical details ---------- */

.details {
  max-width: 76rem;
  margin: 0 auto;
}

.benefits {
  display: grid;
  gap: 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.benefit {
  position: relative;
  padding: 0.6rem 0.6rem 1.25rem;
  border-radius: 1.25rem;
  background: #fffdf8;
  box-shadow: 0 0.15rem 0.4rem rgba(80, 55, 25, 0.1), 0 1rem 2rem -1rem rgba(80, 55, 25, 0.3);
}

.benefit::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: -0.3rem;
  width: 0.6rem;
  height: 2.6rem;
  border-radius: 0.3rem;
  background: var(--accent);
}

.benefit:nth-child(1) { --accent: var(--yellow); }
.benefit:nth-child(2) { --accent: var(--raspberry); }
.benefit:nth-child(3) { --accent: var(--teal); }

.benefit img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: 0.85rem;
}

.benefit:nth-child(1) img { object-position: 30% 45%; }
.benefit:nth-child(2) img { object-position: 55% 45%; }
.benefit:nth-child(3) img { object-position: 62% 52%; }

.benefit h3 {
  margin: 1rem 0.6rem 0.3rem;
  font-size: 1.375rem;
  font-weight: 720;
}

.benefit p {
  margin: 0 0.6rem;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.care {
  max-width: 48rem;
  margin: 2rem 0 0;
  border: 2px solid rgba(33, 28, 23, 0.14);
  border-radius: 1rem;
  background: rgba(255, 252, 245, 0.8);
}

.care summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.1rem;
  font-weight: 700;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
  border-radius: 1rem;
}

.care summary::-webkit-details-marker { display: none; }

.care summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-size: 1.2rem;
  line-height: 1;
}

.care[open] summary::after { content: "−"; }

.care__body { padding: 0 1.1rem 1.25rem; }

.care h3 {
  margin: 1rem 0 0.4rem;
  font-size: 1rem;
  font-weight: 700;
}

.care ul {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.55;
}

.care li + li { margin-top: 0.35rem; }

.care__source {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

.care a,
.site-footer a { color: var(--ink); text-underline-offset: 0.15em; }

/* ---------- Closing ---------- */

.sect--closing {
  padding-bottom: calc(var(--safe-bottom) + max(2.5rem, var(--badge-clear)));
  background:
    radial-gradient(70% 50% at 50% 0%, #fffcf6 0%, rgba(255, 252, 246, 0) 70%),
    linear-gradient(to bottom, var(--cream) 0%, #f8f2e8 60%, var(--cream) 100%);
}

.closing {
  display: grid;
  justify-items: center;
  text-align: center;
  max-width: 60rem;
  margin: 0 auto;
}

.closing__set {
  margin: 0;
  width: min(100%, 40rem, calc(50svh * 1.233));
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 72%, transparent 100%);
}

.closing__set img { display: block; width: 100%; height: auto; }

.closing__title {
  margin: -0.5rem 0 0;
  font-weight: 780;
  font-variation-settings: "opsz" 96;
  font-size: clamp(3rem, 15vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.rule--closing {
  --rule: var(--in, 1);
  justify-content: center;
  margin-top: 1.2rem;
}

.closing__actions {
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-size: clamp(1.0625rem, 4.4vw, 1.25rem);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0.3rem 0.8rem rgba(33, 28, 23, 0.25);
  text-align: center;
  text-wrap: balance;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
}

.cta::after {
  content: "→";
  font-weight: 700;
}

.cta:hover { background: #3a3129; transform: translateY(-2px); }

.replay {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.replay::before { content: "↺"; font-size: 1.05em; text-decoration: none; }

.site-footer {
  max-width: 44rem;
  margin: 3.5rem auto 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
}

.site-footer p { margin: 0.25rem 0; }

/* ---------- Desktop compositions for sections 3–6 ---------- */

@media (min-width: 900px) {
  .sect { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; }

  /* Video left, text right. */
  .space { grid-template-columns: 7fr 5fr; align-items: center; }
  .space__text { order: 2; }
  .clip { order: 1; }
  .sect__title { font-size: clamp(3rem, 5.2vw, 5.5rem); }

  /* Selector and readout left, photo right. */
  .fit {
    grid-template-columns: 5fr 6fr;
    grid-template-areas:
      "intro photo"
      "sizes photo"
      "result photo";
    column-gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
  }
  .fit__intro { grid-area: intro; }
  .sizes { grid-area: sizes; }
  .fit__result { grid-area: result; }
  .fit__photo { grid-area: photo; align-self: center; }

  /* Three benefits in a row; care below. */
  .benefits { grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2.25rem); }
  .benefits .benefit:nth-child(2) { margin-top: 1.5rem; }
  .benefits { align-items: start; }

  .closing__set { width: min(100%, 44rem, calc(48svh * 1.233)); }
}

/* ---------- Reduced motion for sections 3–6 ---------- */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { translate: none; }
  .size span, .cta, .scale__bar { transition: none; }
}