/* ==========================================================================
   Shop By Jordan

   Direction: monochrome + one saturated pop. The brand already owns near-black
   and an electric orange, and the catalogue is black tubs shot on white, so the
   page stays a light stage with deep anchors and lets #ff5900 do all the
   pointing. No beige, no brass, no warm-craft palette.

   Type: Sora carries display and body (brand face, kept). JetBrains Mono
   carries prices, doses, specs and labels, which is how performance-nutrition
   brands read as clinical rather than decorative. No display serif.

   Light only, on purpose. The catalogue photography is black tubs on white,
   and one predictable look beats following the visitor's system setting here.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- raw palette ------------------------------------------------------ */
  --ink-950: #0d0d10;
  --ink-900: #16161a;
  --ink-800: #1e1e24;
  --paper: #ffffff;
  --paper-50: #faf9f8;
  --paper-100: #f2f1ef;
  --paper-200: #e7e5e2;
  --accent: #ff5900;        /* fills, graphics, large type */
  --accent-press: #e04e00;
  --accent-text: #c43e00;   /* small type: #ff5900 only reaches 3.0:1 on paper */

  /* --- semantic tokens (light) ------------------------------------------ */
  --bg: var(--paper-50);
  --bg-raised: var(--paper);
  --bg-sunken: var(--paper-100);
  --bg-inverse: var(--ink-950);
  --stage: var(--paper);          /* product photography sits on white */
  --fg: var(--ink-950);
  --fg-muted: #5b5b63;
  --fg-subtle: #6b6b74;
  --fg-inverse: #f4f4f2;
  --fg-inverse-muted: rgba(244, 244, 242, 0.66);
  --line: rgba(13, 13, 16, 0.10);
  --line-strong: rgba(13, 13, 16, 0.22);
  --line-inverse: rgba(255, 255, 255, 0.14);
  --shadow-tint: 13, 13, 16;

  /* --- type ------------------------------------------------------------- */
  --sans: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.83rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem);
  --step-1: clamp(1.12rem, 1.05rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.45rem, 1.28rem + 0.85vw, 2.1rem);
  --step-3: clamp(1.9rem, 1.5rem + 2vw, 3.2rem);
  --step-4: clamp(2.6rem, 1.7rem + 4.4vw, 5.4rem);

  /* --- space ------------------------------------------------------------ */
  --wrap: 1220px;
  --wrap-tight: 940px;
  --gutter: clamp(18px, 4vw, 48px);
  --bay: clamp(72px, 9vw, 148px);   /* VISUAL_DENSITY 3: sections breathe */

  /* --- shape: one radius system, soft ----------------------------------- */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 350;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.032em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--accent); color: var(--ink-950); }

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

/* ---------------------------------------------------------------- layout */

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

.bay { padding-block: var(--bay); }
.bay--half { padding-block: calc(var(--bay) * 0.55); }

.ink { background: var(--ink-950); color: #f4f4f2; }
.ink h1, .ink h2, .ink h3 { color: #f4f4f2; }
.sunken { background: var(--bg-sunken); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- type bits */

.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 18px;
}

.ink .eyebrow { color: var(--accent); }

.lede {
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 46ch;
}

.ink .lede { color: var(--fg-inverse-muted); }

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.section-head h2 {
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* A section inside a page that already has a title of its own, rather than a
   top-level band. Product pages use it for the related-products strip, which
   must not out-shout the product name. */
.section-head--sub h2 { font-size: var(--step-2); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: clamp(36px, 5vw, 68px);
}

.section-head p { margin: 0; }

/* ---------------------------------------------------------------- button */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 30px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--fg);
  color: var(--bg-raised);
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease),
              color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform 0.35s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn--accent { background: var(--accent); color: var(--ink-950); }
.btn--accent:hover { background: var(--accent-press); color: #fff; }

.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--fg); }

.ink .btn { background: #f4f4f2; color: var(--ink-950); }
.ink .btn--ghost { background: transparent; color: #f4f4f2; border-color: var(--line-inverse); }
.ink .btn--ghost:hover { border-color: #f4f4f2; }
.ink .btn--accent { background: var(--accent); color: var(--ink-950); }

.btn--wide { width: 100%; }

.btn[aria-disabled="true"] {
  background: var(--bg-sunken);
  color: var(--fg-subtle);
  border-color: var(--line);
  pointer-events: none;
  transform: none;
}

/* Text link that reads as a link without a full button. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--step-0);
  font-weight: 500;
  text-decoration: none;
  color: var(--fg);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.link svg { width: 1em; height: 1em; transition: transform 0.3s var(--ease); }
.link:hover { color: var(--accent-text); border-color: var(--accent-text); }
.link:hover svg { transform: translate(3px, -3px); }

/* ---------------------------------------------------------------- header */

.announce {
  background: var(--ink-950);
  color: rgba(244, 244, 242, 0.9);
  text-align: center;
  padding: 11px var(--gutter);
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.05em;
}

.announce strong { color: var(--accent); font-weight: 500; }  /* on ink: 6.0:1 */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}

@supports not (backdrop-filter: blur(1px)) { .masthead { background: var(--bg); } }

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 72px;
}

.logo {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
}

.logo em { font-style: normal; color: var(--accent); }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }

.nav a {
  position: relative;
  font-size: var(--step-0);
  font-weight: 400;
  color: var(--fg-muted);
  text-decoration: none;
  padding-block: 6px;
  transition: color 0.3s var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}

.nav a:hover { color: var(--fg); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--fg); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.masthead__tools { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  color: var(--fg);
  text-decoration: none;
  transition: background 0.3s var(--ease);
}

.icon-btn:hover { background: var(--bg-sunken); }
.icon-btn svg { width: 20px; height: 20px; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}

.nav-toggle svg { width: 18px; height: 18px; margin-inline: auto; }

/* ------------------------------------------------------------------ hero */
/* Cinematic full-bleed: real macro photography edge to edge, a gradient scrim
   for legibility, offer copy set into the bottom-left. The catalogue strip
   sits immediately under it so goods are still visible without scrolling. */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(460px, 74vh, 720px);
  background: var(--ink-950);
  overflow: hidden;
  isolation: isolate;
}

.hero__bg { position: absolute; inset: 0; z-index: -2; }

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The source is a 2:3 portrait and the hero is a wide band, so only about a
     third of its height is ever visible. 26% is the slice where the wall fills
     the left of the frame and the hands enter from the right, which is what
     keeps the headline off the skin. */
  object-position: 50% 26%;
}

/* Two scrims: a light wash at the top so the sticky masthead edge stays calm,
   and a heavier one at the bottom that the copy actually sits on. The frame
   is already a near-black wall on the left, so the side scrim is gentle;
   at the old weight it crushed the brick to a flat panel. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(13,13,16,0.52) 0%, rgba(13,13,16,0.10) 30%,
                    rgba(13,13,16,0.58) 74%, rgba(13,13,16,0.88) 100%),
    linear-gradient(90deg, rgba(13,13,16,0.66) 0%, rgba(13,13,16,0.34) 40%,
                    rgba(13,13,16,0) 76%);
}

.hero__inner {
  position: relative;
  width: 100%;
  padding-block: clamp(40px, 6vw, 84px);
  color: #fff;
}

.hero .eyebrow { color: var(--accent); }

.hero h1 {
  max-width: 14ch;
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(2.4rem, 1.5rem + 3.9vw, 4.6rem);
  letter-spacing: -0.036em;
}

.hero__lede {
  max-width: 42ch;
  margin: 0 0 26px;
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.hero__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 30px;
}

.hero__price b {
  font-family: var(--mono);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #fff;
}

.hero__price span { font-size: var(--step-0); color: rgba(255, 255, 255, 0.7); }

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__cta .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.42); }
.hero__cta .btn--ghost:hover { background: #fff; color: var(--ink-950); border-color: #fff; }

/* The club mark rides in the top corner as a credential, not as the subject. */
.hero__mark {
  position: absolute;
  top: clamp(20px, 3vw, 36px);
  right: var(--gutter);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  background: rgba(13, 13, 16, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero__mark img {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
}

.hero__mark span {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}

/* ------------------------------------------------- shoppable strip in hero */

.showcase { padding-block: clamp(22px, 3vw, 34px); border-bottom: 1px solid var(--line); }

.showcase__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.showcase__head p {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin: 0;
}

.showcase__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* Compact horizontal product tile: thumbnail, name, price. */
.tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.tile:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.tile__thumb {
  flex: none;
  width: 56px; height: 56px;
  border-radius: var(--r-sm);
  background: var(--stage);
  overflow: hidden;
}

.tile__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }

.tile b {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tile span {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--fg-subtle);
}

.tile a { text-decoration: none; }
.tile a::after { content: ""; position: absolute; inset: 0; }

/* ---------------------------------------------------------------- ticker */

.ticker {
  background: var(--ink-950);
  color: #f4f4f2;
  padding-block: 22px;
  overflow: hidden;
  border-block: 1px solid var(--line-inverse);
}

.ticker__track { display: flex; width: max-content; animation: ticker 42s linear infinite; }
.ticker__group { display: flex; flex: none; align-items: center; gap: 56px; padding-right: 56px; }

.ticker__group span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(244, 244, 242, 0.82);
}

.ticker__group svg { width: 14px; height: 14px; color: var(--accent); flex: none; }

@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ------------------------------------------------------------ flagship */
/* Full-bleed editorial band: one product, oversized, with mono spec pills. */

.flagship__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}

.flagship__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--stage);
}

.flagship h2 { margin-bottom: 22px; }
.flagship .lede { margin-bottom: 32px; }

.spec-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }

.spec-pills li {
  list-style: none;
  padding: 8px 15px;
  border: 1px solid var(--line-inverse);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--fg-inverse-muted);
}

.spec-pills b { color: #f4f4f2; font-weight: 500; }

/* -------------------------------------------------------------- product rail */
/* Horizontal scroll-snap. Distinct family from the uniform catalogue grid. */

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 290px;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px var(--gutter) 24px;
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
}

.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* ------------------------------------------------------------------ card */

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease),
              box-shadow 0.45s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 26px 46px -32px rgba(var(--shadow-tint), 0.5);
}

.card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--stage);
  overflow: hidden;
}

.card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 9%;
  transition: transform 0.7s var(--ease);
}

.card:hover .card__media img { transform: scale(1.045); }

.card__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 22px;
  flex: 1;
  border-top: 1px solid var(--line);
}

.card__title {
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}

.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }

.card__price {
  font-family: var(--mono);
  font-size: var(--step-0);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  margin: 0;
}

.card__cta {
  position: relative;
  z-index: 1;
  flex: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  color: var(--fg);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}

.card__cta svg { width: 17px; height: 17px; }
.card:hover .card__cta { background: var(--accent); color: #fff; }

.card__flag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink-950) 88%, transparent);
  color: #f4f4f2;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Card needs relative positioning for the stretched title link. */
.card__body > div { position: static; }
.card { position: relative; }

/* ----------------------------------------------------------------- bento */
/* Exactly five cells, three of them carrying real visual weight. */

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.bento > * {
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 200px;
}

.bento__a { grid-column: 1 / 3; grid-row: 1 / 3; }
.bento__b { grid-column: 3; grid-row: 1; }
.bento__c { grid-column: 3; grid-row: 2; }
.bento__d { grid-column: 1 / 3; grid-row: 3; }
.bento__e { grid-column: 3; grid-row: 3; }

.bento__photo { background: var(--stage); position: relative; }
.bento__photo img { width: 100%; height: 100%; object-fit: cover; }

.bento__stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 26px;
  background: var(--accent);
  color: var(--ink-950);
}

.bento__stat b {
  font-family: var(--mono);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.bento__stat span { font-size: var(--step--1); line-height: 1.45; opacity: 0.78; }

.bento__note {
  padding: 26px;
  background: var(--ink-900);
  color: #f4f4f2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}

.bento__note h3 { font-size: var(--step-1); }
.bento__note p { color: var(--fg-inverse-muted); font-size: var(--step--1); margin: 0; }
.bento__note svg { width: 22px; height: 22px; color: var(--accent); }

.bento__list {
  padding: 26px 28px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
}

.bento__list h3 { font-size: var(--step-1); margin-bottom: 18px; }

.bento__list ul {
  columns: 2;
  column-gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bento__list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  break-inside: avoid;
  padding-block: 5px;
  font-size: var(--step--1);
  color: var(--fg-muted);
}

.bento__list svg { width: 13px; height: 13px; flex: none; margin-top: 5px; color: var(--accent); }

/* ------------------------------------------------------------ catalogue */

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --------------------------------------------------------------- assurances */
/* Inline row separated by hairlines, not four boxed cards. */

.assurances {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  border-top: 1px solid var(--line);
  padding-top: clamp(28px, 3.5vw, 44px);
}

.assurance svg { width: 22px; height: 22px; color: var(--accent); margin-bottom: 14px; }
.assurance__h { font-size: var(--step-0); font-weight: 500; letter-spacing: -0.015em; margin-bottom: 6px; }
.assurance p { font-size: var(--step--1); color: var(--fg-muted); margin: 0; line-height: 1.55; }

/* -------------------------------------------------------------- page head */

.page-head { border-bottom: 1px solid var(--line); }
.page-head__inner { padding-block: clamp(48px, 7vw, 96px) clamp(32px, 4vw, 56px); }
.page-head h1 { font-size: var(--step-3); max-width: 16ch; }
.page-head .lede { margin-top: 22px; max-width: 52ch; }

.crumbs {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--fg-subtle);
  margin: 0 0 22px;
  letter-spacing: 0.03em;
}

.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent-text); }
.crumbs span { padding-inline: 8px; }

/* -------------------------------------------------------------------- shop */

.shop { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }

.shop__side { position: sticky; top: 96px; }

.shop__side h2 {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 16px;
}

.facets { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

.facets button {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--sans);
  font-size: var(--step-0);
  color: var(--fg-muted);
  text-align: left;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.facets button small { font-family: var(--mono); font-size: 0.76em; color: var(--fg-subtle); }
.facets button:hover { background: var(--bg-sunken); color: var(--fg); }
.facets button[aria-pressed="true"] { background: var(--fg); color: var(--bg-raised); }
.facets button[aria-pressed="true"] small { color: inherit; opacity: 0.65; }

.shop__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.shop__count { font-family: var(--mono); font-size: var(--step--1); color: var(--fg-subtle); margin: 0; letter-spacing: 0.03em; }

.select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.select select {
  appearance: none;
  padding: 10px 40px 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--step--1);
  cursor: pointer;
}

.select svg { position: absolute; right: 15px; width: 13px; height: 13px; pointer-events: none; color: var(--fg-subtle); }

/* --------------------------------------------------------------- product */

.pdp { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(30px, 4.5vw, 76px); align-items: start; }

.gallery__main {
  background: var(--stage);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: 7%; }

.gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.gallery__thumbs button {
  width: 76px; height: 76px;
  padding: 6px;
  background: var(--stage);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color 0.3s var(--ease);
}

.gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--accent); }

.pdp__panel { position: sticky; top: 96px; }

/* Between step-2 and step-3 on purpose. It has to outrank the description
   headings and the related-products head below it, but several titles run to
   58 characters and step-3 turns those into four lines beside the photo. */
.pdp__panel h1 {
  font-size: clamp(1.7rem, 1.42rem + 1.3vw, 2.5rem);
  margin-bottom: 18px;
}

.pdp__price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--mono);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
}

.pdp__stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}

.pdp__stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #21a35a; }
.pdp__stock--out::before { background: var(--fg-subtle); }

.pdp__excerpt { color: var(--fg-muted); margin-bottom: 30px; max-width: 46ch; }

.pdp__pay { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.pdp__pay img { max-width: 200px; }
.pdp__pay span { font-family: var(--mono); font-size: 0.72rem; color: var(--fg-subtle); letter-spacing: 0.06em; text-transform: uppercase; }

/* Spec cards, not a hairline-per-row table. */
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }

.spec {
  padding: 16px 18px;
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
}

.spec dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 6px;
}

.spec dd { margin: 0; font-size: var(--step--1); line-height: 1.5; }

.disclosure { margin-top: 30px; border-top: 1px solid var(--line); }
.disclosure details { border-bottom: 1px solid var(--line); }

.disclosure summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  font-size: var(--step-0);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary > svg:first-child { width: 18px; height: 18px; color: var(--accent); flex: none; }
.disclosure summary .chev { margin-left: auto; width: 15px; height: 15px; color: var(--fg-subtle); transition: transform 0.35s var(--ease); }
.disclosure details[open] summary .chev { transform: rotate(180deg); }
.disclosure__body { padding-bottom: 22px; color: var(--fg-muted); font-size: var(--step--1); }

.pdp__long { margin-top: clamp(56px, 7vw, 104px); }

/* ---------------------------------------------------------------- prose */

.prose { max-width: 68ch; font-size: var(--step-0); line-height: 1.75; color: var(--fg-muted); }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: var(--step-2); color: var(--fg); margin: 1.9em 0 0.55em; }
.prose h3, .prose h4, .prose h5 { font-size: var(--step-1); font-weight: 500; color: var(--fg); margin: 1.7em 0 0.5em; }
.prose ul, .prose ol { padding-left: 1.15em; margin: 0 0 1.3em; }
.prose li { margin-bottom: 0.5em; }
.prose li::marker { color: var(--accent); }
.prose strong, .prose b { font-weight: 600; color: var(--fg); }
.prose a { color: var(--fg); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-text); }
.prose img { border-radius: var(--r-md); margin-block: 1.6em; }

/* ------------------------------------------------------------------ FAQ */

.faq-list { display: grid; gap: 10px; }

.faq-list details {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px 26px;
  transition: border-color 0.3s var(--ease);
}

.faq-list details[open] { border-color: var(--line-strong); }

.faq-list summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .chev { margin-left: auto; flex: none; width: 16px; height: 16px; color: var(--fg-subtle); transition: transform 0.35s var(--ease); }
.faq-list details[open] summary .chev { transform: rotate(180deg); }
.faq-list .faq__body { padding: 0 0 24px; color: var(--fg-muted); max-width: 74ch; }

/* -------------------------------------------------------------- contact */

.contact { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }

.contact__block + .contact__block { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--line); }

.contact__block dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 10px;
}

.contact__block dd { margin: 0; font-size: var(--step-1); line-height: 1.6; }
.contact__block dd a { text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.contact__block dd a:hover { color: var(--accent-text); border-color: var(--accent-text); }
.contact__block dd.small { font-size: var(--step-0); color: var(--fg-muted); }

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: clamp(24px, 3.5vw, 40px);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }

.field label { font-size: var(--step--1); font-weight: 500; color: var(--fg); }

.field input,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--step-0);
  transition: border-color 0.25s var(--ease);
}

.field textarea { min-height: 148px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--fg-subtle); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }

.form button { grid-column: 1 / -1; justify-self: start; }

/* ----------------------------------------------------------------- foot */

.site-footer { background: var(--ink-950); color: #f4f4f2; }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr));
  gap: clamp(32px, 5vw, 72px);
  padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px);
}

.footer__brand .logo { font-size: 1.3rem; color: #f4f4f2; display: inline-block; margin-bottom: 20px; }
.footer__brand p { color: var(--fg-inverse-muted); font-size: var(--step--1); max-width: 34ch; }

.footer__h {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, 0.5);
  margin-bottom: 20px;
}

.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }

.footer__col a {
  font-size: var(--step--1);
  color: var(--fg-inverse-muted);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.footer__col a:hover { color: #f4f4f2; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: 26px;
  border-top: 1px solid var(--line-inverse);
}

.footer__bottom p { font-family: var(--mono); font-size: 0.72rem; color: rgba(244, 244, 242, 0.5); margin: 0; letter-spacing: 0.04em; }
.footer__bottom img { max-width: 210px; }

/* ======================================================== cart + checkout */

.icon-btn--cart { position: relative; }

.badge {
  position: absolute;
  top: 2px; right: 0;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--ink-950);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}

/* confirmation after adding, so the click is never silent */
.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  z-index: 60;
  transform: translate(-50%, 14px);
  max-width: min(92vw, 420px);
  padding: 14px 22px;
  border-radius: var(--r-pill);
  background: var(--ink-950);
  color: #f4f4f2;
  font-size: var(--step--1);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease);
}

.toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------- cart page */

.cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

.cart__lines { display: grid; gap: 12px; }

.line {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-raised);
}

.line__thumb {
  width: 76px; height: 76px;
  border-radius: var(--r-sm);
  background: var(--stage);
  overflow: hidden;
}

.line__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.line__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.line__title { font-size: var(--step-0); font-weight: 500; text-decoration: none; line-height: 1.4; }
.line__title:hover { color: var(--accent-text); }
.line__unit { font-size: var(--step--1); color: var(--fg-subtle); }
.line__total { font-size: var(--step-0); font-weight: 500; min-width: 5.5ch; text-align: right; }

.line__remove {
  width: 34px; height: 34px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg-subtle);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.line__remove:hover { background: var(--bg-sunken); color: var(--fg); }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.qty button {
  width: 36px; height: 38px;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}

.qty button:hover { background: var(--bg-sunken); }

.qty input {
  width: 42px;
  height: 38px;
  border: 0;
  border-inline: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--step--1);
  text-align: center;
  -moz-appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ------------------------------------------------------------- summaries */

.cart__summary,
.checkout__summary {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
}

.checkout__summary h2 {
  font-size: var(--step-1);
  margin-bottom: 18px;
}

.sum__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 9px;
  font-size: var(--step--1);
  color: var(--fg-muted);
}

.sum__row--lead {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--fg);
}

.sum__note {
  margin: 12px 0 20px;
  font-size: var(--step--1);
  color: var(--accent-text);
}

.sum__fine {
  margin: 18px 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--fg-subtle);
}

.cart__summary .link { align-self: flex-start; }

/* --------------------------------------------------------- checkout page */

.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

.checkout__form h2 {
  font-size: var(--step-1);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 16px;
}

.checkout__form h2:not(:first-child) { margin-top: 38px; }
.checkout__form .form { padding: 0; border: 0; background: none; }
.checkout__form > .btn { margin-top: 32px; }

.radios { display: grid; gap: 10px; }

.radio {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  cursor: pointer;
  transition: border-color 0.25s var(--ease);
}

.radio:hover { border-color: var(--line-strong); }
.radio:has(input:checked) { border-color: var(--fg); }
.radio input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.radio span { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex: 1; }
.radio b { font-size: var(--step--1); font-weight: 500; }
.radio em { font-style: normal; font-size: var(--step--1); color: var(--fg-subtle); white-space: nowrap; }

.thanks-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* =========================================================== responsive
   Four breakpoints, nothing in between. Everything that changes with width
   lives here so the ladder can be read in one place:

     1080  laptop   four-up product grids drop to three
      900  tablet   every two-column layout goes single column, nav collapses
      700  phone    grids drop to two-up, spacing tightens
      480  small    everything is one column
   ====================================================================== */

@media (max-width: 1080px) {
  .grid, .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --bay: 64px; }

  /* nav collapses behind the toggle */
  .nav-toggle { display: grid; place-items: center; }
  .nav {
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px var(--gutter) 22px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--step-1); }
  .nav a::after { display: none; }

  /* two-column layouts go single column */
  .hero { min-height: clamp(420px, 66vh, 560px); }
  .hero__mark { padding: 7px 13px 7px 7px; }
  .hero__mark img { width: 28px; height: 28px; }
  .section-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .flagship__grid,
  .shop,
  .pdp,
  .contact { grid-template-columns: minmax(0, 1fr); }
  .shop__side, .pdp__panel { position: static; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }

  /* category filters become a wrapping pill row above the results */
  .facets { flex-direction: row; flex-wrap: wrap; }
  .facets button { width: auto; border-radius: var(--r-pill); border: 1px solid var(--line); }

  .showcase__row,
  .assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart, .checkout { grid-template-columns: minmax(0, 1fr); }
  .cart__summary, .checkout__summary { position: static; }

  /* the running total belongs above the form once they stack, otherwise it
     sits below every field and you fill the form blind */
  .checkout__summary { order: -1; margin-bottom: 26px; }

  /* a full-width square gallery ate the entire tablet screen before the price
     was reachable; cap it so the buy panel starts inside the first viewport */
  .gallery__main { aspect-ratio: 4 / 3; max-height: 46vh; }
  .gallery__thumbs { justify-content: flex-start; }
  .assurances { gap: 26px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__a { grid-column: 1 / -1; grid-row: auto; min-height: 260px; }
  .bento__b, .bento__c, .bento__e { grid-column: auto; grid-row: auto; }
  .bento__d { grid-column: 1 / -1; grid-row: auto; }
  .bento__list ul { columns: 1; }
}

@media (max-width: 700px) {
  :root { --bay: 52px; }

  .grid, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .announce { font-size: 0.72rem; letter-spacing: 0.02em; }
  .faq-list details { padding-inline: 18px; }
  .faq-list summary { font-size: var(--step-0); gap: 14px; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .pdp__long { margin-top: 44px; }
  .card__body { padding: 14px 14px 16px; }
  /* the cart line reflows to two rows so the controls stay reachable */
  .line {
    grid-template-columns: 60px minmax(0, 1fr) auto;
    grid-template-areas: "thumb body remove" "qty qty total";
    gap: 12px 14px;
  }
  .line__thumb { grid-area: thumb; width: 60px; height: 60px; }
  .line__body { grid-area: body; }
  .line__remove { grid-area: remove; }
  .qty { grid-area: qty; justify-self: start; }
  .line__total { grid-area: total; align-self: center; }
  .line__remove { width: 40px; height: 40px; }
  .qty button, .qty input { height: 44px; }
  .qty button { width: 42px; }
  .gallery__thumbs button { width: 62px; height: 62px; }

  /* comfortable touch targets */
  .btn { padding: 15px 24px; }
  .icon-btn, .nav-toggle { width: 44px; height: 44px; }
  .facets button { padding: 12px 16px; }   /* clears the 44px tap target */
  .card__cta { width: 44px; height: 44px; }
  /* the sort control was the one input still under the target size: its
     step--1 label left it 38px tall */
  .select select { padding-block: 13px; }
  /* a primary action on a phone gets the full column rather than sitting
     two thirds across it */
  .checkout__form .btn, .cart__summary .btn { width: 100%; }
}

@media (max-width: 480px) {
  :root { --bay: 44px; }

  .grid, .grid--3,
  .showcase__row,
  .assurances,
  .specs,
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .rail { grid-auto-columns: 78vw; }
  .hero { min-height: 400px; }
  .hero__mark span { display: none; }
  .hero__mark { padding: 6px; }
  /* At 320 the header ran 5px past the viewport and dragged the whole page
     with it. The 28px flex gap is the cause: with justify-content
     space-between the gap is a hard minimum, not the visible spacing, so
     shrinking it here costs nothing at 390-480 where there is room to spare,
     and stops the logo and the three 44px tools from adding up to more than
     the screen. The tools stay 44px: that is the tap target floor. */
  .masthead__inner { height: 62px; gap: 12px; }
  .masthead__tools { gap: 6px; }
  .showcase__head { gap: 12px; }
  .pdp__buy, .product__buy { width: 100%; }
}

/* ---------------------------------------------------------------- motion */
/* MOTION_INTENSITY 6, built so content is NEVER hidden waiting on script.
   Hero uses a plain load cascade; the rest uses CSS scroll-driven animation,
   which simply does not run on browsers that lack it (content stays visible).
   No scroll listeners anywhere. */

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise 0.85s var(--ease) both;
    animation-delay: var(--d, 0ms);
  }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
}