/* Infinity Sabers. Tokens and scale from plan.md §3. Mobile first: 640 / 768 / 1024 / 1280. */

/* Self-hosted (SIL OFL, licences in vendor/fonts/), latin subset, the same files Google Fonts
   serves. Instrument Sans and JetBrains Mono are variable, so one file covers every weight. */
@font-face {
  font-family: "Michroma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("vendor/fonts/michroma-v21-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("vendor/fonts/instrument-sans-v4-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("vendor/fonts/jetbrains-mono-v24-latin.woff2") format("woff2");
}

:root {
  --void: #06070A;
  --hull: #0E1016;
  --seam: #1E222B;
  --starlight: #E8ECF2;
  --dust: #8A93A3;
  --gold: #C9A063;
  --blade: #48B6FF; /* light, not UI: the 3D blade, seams, photo glow */

  --bracket: #343A47; /* bracket strokes at rest: the seam tone, lifted so it reads over the starfield */
  --gutter: 16px;
  --chamfer: 8px;

  --f-display: "Michroma", "Eurostile", "Arial Black", sans-serif;
  --f-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --fs-display: clamp(30px, min(4.45vw, 7.4svh), 64px); /* short windows shrink it too */
  --fs-h2: clamp(24px, 2.8vw, 40px);
  --fs-body: 16px;
  --fs-price: 16px;

  --ease-out: cubic-bezier(.22, .8, .24, 1);

  /* One corner path (M0 0.5H10V10.5), rotated for each corner of a bracket panel. */
  --br-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M0 .5H10V10.5' fill='none' stroke='%23000'/%3E%3C/svg%3E");
  --br-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M0 .5H10V10.5' fill='none' stroke='%23000' transform='rotate(-90 5.5 5.5)'/%3E%3C/svg%3E");
  --br-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M0 .5H10V10.5' fill='none' stroke='%23000' transform='rotate(90 5.5 5.5)'/%3E%3C/svg%3E");
  --br-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M0 .5H10V10.5' fill='none' stroke='%23000' transform='rotate(180 5.5 5.5)'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --fs-body: 17px; --fs-price: 18px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 40px; }
}

/* Older Android browsers (Chrome before 108, Samsung Internet before 21) don't know svh/lvh: a
   declaration using them is dropped, and inside --fs-display the headline would fall to 16px. */
@supports not (height: 1svh) {
  :root { --fs-display: clamp(30px, min(4.45vw, 7.4vh), 64px); }
  .layer--hero, .hero, .hero__grid, .tiers { min-height: 100vh; }
  .hero__stage { min-height: max(120px, 18vh); }
  .sky__window { height: 100vh; }
  .sheet, .sheet-dialog { max-height: 92vh; }
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* the menu sheet and veil set display; hidden must still win */

html {
  color-scheme: dark; /* with the meta tag: keeps Samsung Internet's and Chrome's auto-dark off our colors */
  background: var(--void);
  color: var(--starlight);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Android draws a grey box over anything tapped; the controls have their own pressed states. */
a, button, label, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
[data-lenis-prevent] { overscroll-behavior: contain; }
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--void);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--gold); color: var(--void); }

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

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

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

.display, .h2, .wordmark, .card__name, .sheet__name, .plate__name, .featured__name, .veil__word, .menu__word, .menu__list a {
  font-family: var(--f-display);
  font-weight: 400;
}
.display {
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.h2 {
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.label {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dust);
}
.label--gold { color: var(--gold); }
.price {
  font-family: var(--f-mono);
  font-size: var(--fs-price);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.price s, .tier-row__price s {
  color: var(--dust);
  font-weight: 400;
  text-decoration-thickness: 1px;
  margin-right: .35em;
}

.rv-word, .rv-unit { display: inline-block; }

.star {
  width: 10px; height: 10px;
  flex: none;
  color: var(--gold);
}

/* ---------------------------------------------------------------- controls */

.btn {
  --fill: var(--gold);
  --flood: var(--starlight);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: 0 24px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--void);
  background: var(--fill);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  transition: color .3s var(--ease-out);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--flood);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s var(--ease-out);
}
.btn--lg { min-height: 56px; padding: 0 32px; font-size: 14px; }

/* Ghost: a 1px chamfered outline (the button is the stroke, ::before is the face), floods gold. */
.btn--ghost {
  --fill: var(--bracket);
  --flood: var(--gold);
  color: var(--starlight);
}
.btn--ghost::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--hull);
  clip-path: polygon(calc(var(--chamfer) - 1px) 0, 100% 0, 100% calc(100% - var(--chamfer) + 1px), calc(100% - var(--chamfer) + 1px) 100%, 0 100%, 0 calc(var(--chamfer) - 1px));
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover::after, .card:hover .card__order::after { transform: scaleX(1); }
  .btn--ghost:hover, .card:hover .card__order { color: var(--void); }
}
.btn:focus-visible { outline: 2px solid var(--starlight); outline-offset: 3px; }
/* Touch screens have no hover flood, so a press dims the button instead. */
@media (hover: none) { .btn:active { filter: brightness(.86); } }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--starlight);
  border-bottom: 1px solid transparent;
  transition: color .25s;
}
@media (hover: hover) { .text-link:hover { color: var(--gold); } }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--starlight);
}
@media (hover: hover) { .icon-btn:hover { color: var(--gold); } }

/* ---------------------------------------------------------------- bracket panels */

.brackets { position: relative; }
.brackets::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--bracket);
  -webkit-mask: var(--br-tl) top left / 11px 11px no-repeat, var(--br-tr) top right / 11px 11px no-repeat,
    var(--br-bl) bottom left / 11px 11px no-repeat, var(--br-br) bottom right / 11px 11px no-repeat;
  mask: var(--br-tl) top left / 11px 11px no-repeat, var(--br-tr) top right / 11px 11px no-repeat,
    var(--br-bl) bottom left / 11px 11px no-repeat, var(--br-br) bottom right / 11px 11px no-repeat;
  transition: background-color .3s;
}
.brackets:hover::before, .brackets:focus-within::before { background: var(--gold); }

.panel { padding: 18px; }

/* ---------------------------------------------------------------- veil */

.veil {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--void);
  transition: opacity .7s var(--ease-out), visibility 0s .7s;
}
.veil.is-lifting { opacity: 0; visibility: hidden; }
.veil__inner { display: grid; gap: 22px; justify-items: center; }
.veil__word { font-size: 15px; letter-spacing: .04em; color: var(--starlight); }

/* The loading bar: a hilt, and a blade that grows with real progress (--p, 0..1, set by
   js/loader.js). The empty track is the blade's outline, so you see how far it has to go. */
.loadbar {
  --p: 0;
  --len: clamp(140px, 44vw, 260px);
  display: flex;
  align-items: center;
}
.loadbar__hilt { flex: none; display: block; width: 96px; height: 24px; position: relative; z-index: 1; }
.loadbar__blade {
  position: relative;
  width: var(--len);
  height: 8px;
  margin-left: -2px; /* the blade starts inside the emitter */
  border-radius: 0 99px 99px 0;
  box-shadow: inset 0 0 0 1px var(--seam);
}
/* The lit blade: a white core with a fringe of the blade color, and a soft glow. */
.loadbar__blade::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  border-radius: inherit;
  background: linear-gradient(to bottom, var(--blade), #fff 32%, #fff 68%, var(--blade));
  box-shadow:
    0 0 6px 1px var(--blade),
    0 0 18px 4px color-mix(in srgb, var(--blade) 55%, transparent),
    0 0 42px 10px color-mix(in srgb, var(--blade) 18%, transparent);
  opacity: clamp(0, calc(var(--p) * 40), 1);
  animation: blade-hum 1.6s ease-in-out infinite alternate;
}
/* Emitter glow where the blade leaves the hilt. */
.loadbar__blade::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blade) 70%, #fff), transparent);
  opacity: clamp(0, calc(var(--p) * 40), .7);
  pointer-events: none;
}
@keyframes blade-hum {
  from { filter: brightness(1); }
  to { filter: brightness(1.18); }
}
.loadbar__pct {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--dust);
  min-width: 4ch;
  text-align: center;
}

/* ---------------------------------------------------------------- the stack */

.stack {
  position: relative;
  background: #000;
}
.layer { position: relative; }
.layer[data-sticky] { position: sticky; top: 0; }
/* svh, not lvh: phone toolbars collapse as you scroll, and a layer sized to the tall viewport
   is taller than the screen until they do, so the hero scrolled a little and then jumped. */
.layer--hero { z-index: 0; min-height: 100svh; }
.layer--tiers { z-index: 10; }
.layer--sabers { z-index: 20; }
.layer__inner {
  position: relative;
  transform-origin: center;
  background: var(--void);
}
.layer__shade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

/* Blade seams: a white core with a blade glow, drawn left to right by --p (0..1). */
.seam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  pointer-events: none;
}
.seam i {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 12px 2px var(--blade), 0 0 40px 6px color-mix(in srgb, var(--blade) 40%, transparent);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}
.seam::after {
  content: "";
  position: absolute;
  top: -2px;
  left: calc(var(--p, 0) * 100% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px var(--blade);
  opacity: calc(var(--p, 0) * 40);
}

/* ---------------------------------------------------------------- sky */

/* Stars and planets behind each section below the hero (js/sky.js). The section isolates so the
   sky can sit at z-index -1: over the section's own background, under everything in it. */
.layer--tiers .layer__inner, .layer--sabers .layer__inner, .ordering { isolation: isolate; }
.sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
}
/* A viewport-sized window that stays put while a tall section scrolls past it. */
.sky__window {
  position: sticky;
  top: 0;
  height: 100lvh;
  max-height: 100%;
  overflow: hidden;
}
.sky__stars {
  position: absolute;
  left: -40px;
  right: -40px;
  top: -40px;
  height: calc(100% + var(--tile) + 80px);
  background-size: var(--tile) var(--tile);
  will-change: transform;
}
.sky__stars--2 { animation: twinkle 5.5s ease-in-out infinite alternate; }
.sky__stars--3 { animation: twinkle 3.8s ease-in-out -1.7s infinite alternate; }
@keyframes twinkle { to { opacity: .5; } }
.sky__meteor {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 150px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .95), transparent);
  box-shadow: 0 0 6px rgba(200, 225, 255, .6);
  opacity: 0;
  rotate: calc(180deg - var(--a));
  transform-origin: left center;
}
.sky__meteor.is-going { animation: meteor 1.2s cubic-bezier(.3, .6, .4, 1) forwards; }
@keyframes meteor {
  0% { opacity: 0; translate: 0 0; }
  12% { opacity: 1; }
  100% { opacity: 0; translate: var(--dx) var(--dy); }
}

/* Planets: left/top place the center, --s is the canvas box (the disc plus its glow or rings). */
.planet {
  position: absolute;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  will-change: transform;
  transition: filter .6s var(--ease-out);
}
.planet.is-hot { filter: brightness(1.2) saturate(1.1); }
.planet--dune { --s: 330px; left: calc(100% - 20px); top: -40px; }
.planet--moon { display: none; }
.planet--giant { --s: 170px; left: calc(100% - 64px); top: 50px; }
.planet--ice { --s: 210px; left: calc(100% - 10px); top: 30px; }
@media (min-width: 768px) {
  .planet--dune { --s: 520px; left: calc(100% - 40px); top: 30px; }
  .planet--moon { display: block; --s: 80px; left: 62%; top: 62px; }
  .planet--giant { --s: 220px; left: calc(100% - 120px); top: 64px; }
  .planet--ice { --s: 360px; left: calc(100% - 40px); top: 70px; }
}
@media (min-width: 1024px) {
  .planet--dune { --s: min(56vw, 760px); left: calc(100% - 4vw); top: 60px; }
  .planet--moon { left: 72%; top: 44px; }
  .planet--giant { --s: 260px; left: 42%; top: 66px; }
  .planet--ice { --s: 560px; left: calc(100% - 5vw); top: 92%; }
}

/* ---------------------------------------------------------------- hero */

/* The hero fills the large viewport; on a short phone it grows rather than crush the saber's band. */
.hero {
  min-height: 100svh;
  overflow: clip;
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero__fallback { display: none; }
.no-scene .hero__canvas { display: none; }
/* No WebGL: the featured saber's photo takes the saber's place (main.js sets top/bottom to the band). */
.no-scene .hero__fallback {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-scene .hero__fallback img {
  width: auto;
  max-width: min(100%, 560px);
  max-height: 100%;
  border: 1px solid var(--seam);
}
.no-scene .featured__img { display: none; } /* the hero already shows it */
@media (min-width: 1024px) {
  .no-scene .hero__fallback {
    left: auto;
    right: var(--gutter);
    top: 112px !important;
    bottom: auto !important;
    width: 320px;
  }
}

.hero__grid {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) max(20px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.hero__grid > * { pointer-events: auto; }

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: 24px;
}
.wordmark {
  font-size: 16px;
  letter-spacing: .02em;
  text-transform: lowercase;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.masthead__nav a, .masthead__cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color .25s;
}
.masthead__nav, .masthead .masthead__cta { display: none; }
@media (hover: hover) {
  .masthead__nav a:hover, .masthead__cta:hover { color: var(--gold); }
}
.burger { margin-right: -10px; }
.masthead__end { display: flex; align-items: center; gap: 4px 28px; }

.hero__copy {
  margin-top: 20px;
  max-width: 640px;
  /* A void halo, not a shadow: keeps the type legible where the blade's light passes behind it. */
  text-shadow: 0 0 18px var(--void), 0 0 2px var(--void);
}
.hero__copy .display { margin-top: 14px; }
.hero__meta {
  display: grid;
  gap: 4px;
  margin-top: 20px;
  font-size: 15px;
  color: var(--dust);
}
.hero__meta li { display: flex; align-items: center; gap: 12px; }

/* Below 1024 the saber sits in this empty band; main.js hands its edges to the scene. */
.hero__stage {
  flex: 1 1 auto;
  min-height: max(120px, 18svh); /* it grows to fill; the floor only matters on short screens */
}
/* Short phones (an iPhone in Safari with its toolbars showing is about 664px tall): tighten the
   copy so the whole hero fits one screen and the tiers slide straight over it. */
@media (max-width: 1023px) and (max-height: 720px) {
  .hero__copy { margin-top: 12px; }
  .hero__meta { margin-top: 14px; }
}
@media (max-width: 1023px) and (max-height: 660px) {
  .masthead { min-height: 56px; }
  .hero__copy .display { font-size: 27px; margin-top: 10px; }
}

.hero__rail {
  display: grid;
  gap: 12px;
}
.panel.featured { display: none; }

.blade-panel {
  background: color-mix(in srgb, var(--void) 78%, transparent);
  padding: 14px 16px 16px;
}
.blades {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.blade {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}
.blade::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, var(--c) 60%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
  transition: box-shadow .3s, transform .3s var(--ease-out);
}
.blade::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: border-color .3s;
}
.blade[aria-pressed="true"]::before { box-shadow: 0 0 14px 2px var(--c); }
.blade[aria-pressed="true"]::after { border-color: var(--gold); }
@media (hover: hover) { .blade:hover::before { transform: scale(1.1); } }
.blade-panel__note {
  display: none; /* phones: the tiers section prints the whole promise */
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dust);
  max-width: 44ch;
}

.hero__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 12px;
}
.hero__foot .btn { flex: 1 1 auto; }
.hero__foot .text-link { display: none; }
/* Leave a slot at the right for the floating WhatsApp button (56px + a gap), so it never
   sits over the handle or the buttons. */
.hero__foot { padding-right: 72px; }
.hero__ig {
  display: none;
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--dust);
  min-height: 44px;
  align-items: center;
  transition: color .25s;
}
@media (hover: hover) { .hero__ig:hover { color: var(--gold); } }

@media (min-width: 640px) {
  .hero__rail { grid-template-columns: 1fr 1fr; align-items: end; }
  .panel.featured {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 14px;
    align-items: center;
    background: color-mix(in srgb, var(--void) 78%, transparent);
    padding: 14px;
  }
  .hero__foot .btn { flex: 0 0 auto; }
  .hero__foot .text-link, .hero__ig { display: inline-flex; }
  .blade-panel__note { display: block; }
}
.featured__img { width: 100%; aspect-ratio: 4 / 2.1; object-fit: cover; }
.featured__body { display: grid; gap: 2px; justify-items: start; }
.featured__name { font-size: 15px; letter-spacing: .02em; text-transform: uppercase; margin-top: 4px; }
.featured__tiers { font-size: 13px; color: var(--dust); }
.featured__open { min-height: 40px; color: var(--gold); }

@media (min-width: 1024px) {
  .hero__grid {
    display: grid;
    min-height: 100svh; /* a short window grows the hero instead of clipping the copy */
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto 1fr auto;
    column-gap: 40px;
    padding-bottom: 32px;
  }
  .hero__stage { display: none; }
  .masthead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    min-height: 88px;
  }
  .masthead__nav { display: flex; gap: 36px; justify-self: center; }
  .masthead .masthead__cta { display: inline-flex; gap: .45em; }
  .masthead__end { justify-self: end; }
  .burger { display: none; }
  .wordmark { font-size: 18px; }

  .hero__copy { align-self: center; margin-top: 0; max-width: 600px; }
  .hero__copy .display { margin-top: 18px; }
  .hero__meta { margin-top: 32px; font-size: 16px; gap: 6px; }

  .hero__rail {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    grid-template-columns: 1fr;
    margin-top: 0;
    gap: 16px;
  }
  .panel.featured { grid-template-columns: 1fr; padding: 16px; gap: 12px; }

  .hero__foot { grid-column: 1 / -1; margin-top: 28px; }
}
@media (min-width: 1280px) {
  .hero__copy { max-width: 690px; } /* "Dueling and" holds one line at 64px */
}
/* Short laptop windows: a compact rail so the whole hero, buttons included, fits on screen. */
@media (min-width: 1024px) and (max-height: 780px) {
  .masthead { min-height: 72px; }
  .panel.featured { grid-template-columns: 120px 1fr; align-items: center; padding: 12px; }
  .blade-panel__note { display: none; }
  .hero__meta { margin-top: 20px; }
  .hero__foot { margin-top: 16px; }
  .hero__grid { padding-bottom: 20px; }
}

/* ---------------------------------------------------------------- tiers */

.tiers {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 88px 0 72px;
}
.plates {
  display: grid;
  gap: 12px;
  margin-top: 36px;
}
.plate {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 24px;
  background: var(--hull);
}
.plate__name { font-size: 15px; letter-spacing: .02em; text-transform: uppercase; }
.plate__line { margin-top: 10px; color: var(--starlight); font-size: 15px; line-height: 1.5; }
.plate__points {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--dust);
}
.plate__points li { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: baseline; }
.plate__points .star { transform: translateY(1px); }
.tiers__rule {
  height: 1px;
  background: var(--seam);
  margin: 32px 0 20px;
  border: 0;
}
.tiers__promise { max-width: 60ch; color: var(--dust); }

@media (min-width: 768px) {
  .plates { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (min-width: 1024px) {
  .plates {
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
    margin-top: 48px;
  }
  /* Stepped: the bare hilt lowest, then each lit tier a step higher. */
  .plate { min-height: calc(250px + var(--step, 0) * 44px); }
}

/* ---------------------------------------------------------------- the sabers */

.sabers { padding: 96px 0 112px; }
.sabers__head {
  display: grid;
  gap: 14px;
}
.sabers__pricing { color: var(--dust); max-width: 60ch; }
@media (min-width: 1024px) {
  .sabers__head { grid-template-columns: auto 1fr; align-items: end; gap: 48px; }
  .sabers__pricing { justify-self: end; text-align: right; }
}

.catalog-bar { margin: 32px 0 28px; }
.chips {
  display: flex;
  gap: 8px;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--seam);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dust);
  transition: color .25s, border-color .25s;
}
.chip__n { font-family: var(--f-mono); font-weight: 400; font-size: 12px; letter-spacing: 0; }
.chip[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
@media (hover: hover) { .chip:hover { color: var(--starlight); } .chip[aria-pressed="true"]:hover { color: var(--gold); } }

/* Sort: a native select (the phone's own picker) dressed as a chip. The select fills the box,
   so the "Sort" label and the chevron are drawn over it and pass clicks through. */
.sort {
  position: relative;
  display: inline-flex;
  margin-top: 12px;
  border: 1px solid var(--seam);
  transition: border-color .25s;
}
.sort[hidden] { display: none; }
.sort__label,
.sort::after {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;
}
.sort__label {
  left: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dust);
}
.sort::after {
  content: "";
  right: 17px;
  width: 7px;
  height: 7px;
  margin-top: -2px;
  border: solid var(--dust);
  border-width: 0 1.5px 1.5px 0;
  rotate: 45deg;
  transition: border-color .25s;
}
.sort__select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 0 44px 0 70px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--starlight);
  background: transparent;
  border: 0;
  border-radius: 0;
  color-scheme: dark;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sort__select option { color: var(--starlight); background: var(--hull); text-transform: none; }
.sort__select:focus-visible { outline: 2px solid var(--starlight); outline-offset: 2px; }
.sort.is-set { border-color: var(--gold); }
.sort.is-set .sort__select { color: var(--gold); }
.sort.is-set::after { border-color: var(--gold); }
@media (hover: hover) { .sort:hover { border-color: var(--dust); } .sort.is-set:hover { border-color: var(--gold); } }
/* Wide enough for the chips and the sort on one row: chips left, sort right. */
@media (min-width: 1024px) {
  .catalog-bar { display: flex; align-items: center; gap: 24px; }
  .catalog-bar .chips { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; scroll-padding: 0; }
  .sort { flex: none; margin-top: 0; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  transition: opacity .14s linear;
}
.grid.is-swapping { opacity: 0; }
@media (min-width: 640px) { .grid { gap: 16px; } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1280px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hull);
  border: 1px solid var(--seam);
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: border-color .3s;
}
/* The chamfer's own edge, so the border doesn't stop at the cut. */
.card::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 15px;
  height: 1px;
  background: var(--seam);
  transform: rotate(-45deg);
  transform-origin: right center;
  translate: -10px -1px;
  transition: background-color .3s;
}
.card__media {
  position: relative;
  overflow: hidden;
  background: #2a2b2e;
}
.card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.card__media::after {
  content: "";
  position: absolute;
  inset: -10% -10% -40%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blade) 55%, transparent), transparent);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateY(18%);
  transition: opacity .25s, transform .25s var(--ease-out);
  pointer-events: none;
}
.card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 18px;
}
.card__name { font-size: 14px; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; }
.card__hit { text-align: left; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.card__hit:focus-visible { outline: none; }
.card:has(.card__hit:focus-visible) { outline: 2px solid var(--starlight); outline-offset: 2px; }
.card__specs { margin-top: 4px; font-family: var(--f-mono); font-size: 12px; color: var(--dust); }
.card__prices {
  display: grid;
  gap: 2px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--seam);
}
.card__prices li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card__tier { font-size: 14px; color: var(--dust); }
.card__prices .price { font-size: 15px; }
.price__from { font-family: var(--f-body); font-size: .8em; color: var(--dust); }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.swatches li {
  width: 12px;
  height: 12px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.card__order {
  margin-top: auto;
  align-self: flex-start;
  min-height: 44px;
  padding: 0 22px;
}
/* Keep the Order button on the card's bottom edge, at least 18px under what precedes it. */
.card__body > :nth-last-child(2) { margin-bottom: 18px; }

/* Phones: two cards across, so the card's type and spacing step down. */
@media (max-width: 639px) {
  .card__body { padding: 12px 12px 14px; }
  .card__name { font-size: 12px; }
  .card__specs { font-size: 11px; }
  .card__prices { margin-top: 10px; padding-top: 8px; }
  .card__tier { font-size: 12px; }
  .card__prices .price { font-size: 13px; }
  .card__prices li { gap: 6px; }
  .swatches { gap: 5px; margin-top: 10px; }
  .swatches li { width: 10px; height: 10px; }
  .card__order { align-self: stretch; justify-content: center; padding: 0 10px; }
  .card__body > :nth-last-child(2) { margin-bottom: 14px; }
}
@media (min-width: 640px) { .card__name { font-size: 15px; } }

/* The pager under the grid (phones only: main.js pages the grid below 640px). */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 24px;
}
.pager[hidden] { display: none; }
.pager__btn {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 6px;
  border: 1px solid var(--seam);
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--dust);
  transition: color .25s, border-color .25s;
  -webkit-tap-highlight-color: transparent;
}
.pager__btn[aria-current="page"] { color: var(--gold); border-color: var(--gold); }
.pager__btn:disabled { opacity: .35; cursor: default; }
.pager__btn:focus-visible { outline: 2px solid var(--starlight); outline-offset: 2px; }
.pager__step { color: var(--starlight); }
.pager__gap { min-width: 20px; text-align: center; font-family: var(--f-mono); color: var(--dust); }
@media (hover: hover) { .pager__btn:not(:disabled):not([aria-current]):hover { color: var(--starlight); border-color: var(--dust); } }
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: #2C313C; }
  .card:hover .card__media::after { opacity: 1; transform: none; }
}

.noscript-catalog { margin-top: 24px; color: var(--dust); }
.noscript-catalog ul { margin-top: 12px; display: grid; gap: 4px; font-family: var(--f-mono); font-size: 14px; }

/* ---------------------------------------------------------------- order sheet */

.sheet-dialog {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 92svh;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--seam);
  background: var(--hull);
  color: var(--starlight);
  overflow: hidden;
}
.sheet-dialog[open] { display: flex; flex-direction: column; }
.sheet-dialog::backdrop { background: rgba(0, 0, 0, .66); }
@media (min-width: 768px) {
  .sheet-dialog {
    inset: 0 0 0 auto;
    width: 520px;
    height: 100%;
    max-height: 100%;
    border-top: 0;
    border-left: 1px solid var(--seam);
  }
}

.sheet {
  max-height: 92svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) { .sheet { max-height: 100%; height: 100%; } }

.sheet__head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 12px 14px 20px;
  background: var(--hull);
  border-bottom: 1px solid var(--seam);
}
.sheet__cat { color: var(--gold); }
.sheet__name { font-size: 22px; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; margin-top: 6px; }
@media (min-width: 768px) {
  .sheet__head { padding: 24px 20px 18px 28px; }
  .sheet__name { font-size: 26px; }
}

.sheet__body {
  display: grid;
  gap: 24px;
  padding: 20px 20px max(28px, env(safe-area-inset-bottom));
}
@media (min-width: 768px) { .sheet__body { padding: 24px 28px 40px; } }

.gal { display: grid; gap: 8px; }
.gal__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #2a2b2e;
}
.gal__bg {
  position: absolute;
  inset: -24px;
  background-size: cover;
  background-position: center;
  filter: blur(18px) brightness(.55);
}
.gal__img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gal__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gal__thumb {
  display: block;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--seam);
  transition: border-color .25s;
}
.gal__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (hover: hover) { .gal__thumb:hover { border-color: var(--gold); } }

.specs {
  display: grid;
  gap: 0;
  font-family: var(--f-mono);
  font-size: 13px;
}
.specs > div {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--seam);
}
.specs > div:first-child { border-top: 1px solid var(--seam); }
.specs dt { color: var(--dust); }

.sheet__block { display: grid; gap: 12px; }
.finish-list { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; }
.finish-list li { display: inline-flex; align-items: center; gap: 8px; }
.finish-list__sw { width: 12px; height: 12px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.sheet__note { font-size: 14px; color: var(--dust); }

.tier-rows { display: grid; gap: 10px; }
.tier-row {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: var(--void);
  border: 1px solid var(--seam);
}
.tier-row__label { font-family: var(--f-display); font-size: 14px; letter-spacing: .02em; text-transform: uppercase; }
.tier-row__line { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--dust); }
.tier-row__buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tier-row__price {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.tier-row__price--ask { font-family: var(--f-body); font-size: 14px; font-weight: 600; }
.tier-row__order { min-height: 48px; min-width: 120px; }

.sheet__fine { display: grid; gap: 2px; font-size: 13px; color: var(--dust); }

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

.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .25s;
}
.cart-btn__label { display: none; }
@media (min-width: 1024px) { .cart-btn__label { display: inline; } }
@media (hover: hover) { .cart-btn:hover { color: var(--gold); } }
.cart-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--void);
  background: var(--gold);
  border-radius: 9px;
}
.cart-btn .cart-count { position: absolute; top: 4px; right: 0; }
@media (min-width: 1024px) { .cart-btn .cart-count { position: static; } }

.cart-fab {
  position: fixed;
  right: var(--gutter);
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 90;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
/* Floating WhatsApp button. WhatsApp's own green, so it reads at a glance; it lifts above
   the cart button whenever that one is showing. */
.wa-float {
  --wa-bottom: max(16px, env(safe-area-inset-bottom));
  position: fixed;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: var(--wa-bottom);
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
  transition: bottom .35s var(--ease-out);
}
.cart-fab:not([hidden]) ~ .wa-float { bottom: calc(var(--wa-bottom) + 60px); }
.wa-float > * { pointer-events: auto; }
.wa-float__btn {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--ease-out);
  animation: wa-float 4s ease-in-out infinite;
}
.wa-float__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: 0;
  animation: wa-ring 4s var(--ease-out) infinite;
  pointer-events: none;
}
.wa-float__btn:active { transform: scale(.94); }
.wa-float__btn:focus-visible { outline: 2px solid var(--starlight); outline-offset: 3px; }
@media (hover: hover) { .wa-float__btn:hover { transform: scale(1.06); } }
@keyframes wa-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}
@keyframes wa-ring {
  0% { transform: scale(1); opacity: .7; }
  40%, 100% { transform: scale(1.6); opacity: 0; }
}

.wa-float__bubble {
  position: relative;
  max-width: min(250px, calc(100vw - 2 * var(--gutter)));
  color: #111418;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.wa-float__bubble.is-shown { opacity: 1; transform: none; }
/* The tail, pointing down at the button. */
.wa-float__bubble::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 0 0 3px 0;
  transform: rotate(45deg);
}
.wa-float__msg {
  display: grid;
  gap: 4px;
  padding: 12px 40px 13px 14px;
}
.wa-float__from { font-size: 14px; font-weight: 600; line-height: 1.3; color: #111418; }
.wa-float__text { font-size: 14px; line-height: 1.35; color: #4a5260; }
.wa-float__close {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #8a919c;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .wa-float__close:hover { color: #111418; } }

.cart-fab__n {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--gold);
  background: var(--void);
  border-radius: 10px;
}
.is-bumped { animation: cart-bump .5s var(--ease-out); }
.cart-btn.is-bumped .cart-count { animation: cart-bump .5s var(--ease-out); }
.cart-btn.is-bumped { animation: none; }
@keyframes cart-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* The finish picker in the order sheet */
.finish-pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.finish-pick__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.finish-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px 0 12px;
  font-size: 14px;
  border: 1px solid var(--seam);
  cursor: pointer;
  transition: border-color .25s;
}
.finish-opt input { position: absolute; opacity: 0; pointer-events: none; }
.finish-opt:has(input:checked) { border-color: var(--gold); }
.finish-opt:has(input:focus-visible) { outline: 2px solid var(--starlight); outline-offset: 2px; }
@media (hover: hover) { .finish-opt:hover { border-color: var(--dust); } }

/* Version switch: one tile per version, its name and its lowest price. Same chamfer-free tile
   language as the finish picker, gold when chosen. */
.version-pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.version-pick__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.version-opt {
  position: relative;
  display: grid;
  gap: 2px;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid var(--seam);
  cursor: pointer;
  transition: border-color .25s;
}
.version-opt input { position: absolute; opacity: 0; pointer-events: none; }
.version-opt__name { font-family: var(--f-display); font-size: 15px; letter-spacing: .04em; color: var(--starlight); }
.version-opt__price { font-family: var(--f-mono); font-size: 13px; color: var(--dust); }
.version-opt:has(input:checked) { border-color: var(--gold); }
.version-opt:has(input:checked) .version-opt__price { color: var(--gold); }
.version-opt:has(input:focus-visible) { outline: 2px solid var(--starlight); outline-offset: 2px; }
@media (hover: hover) { .version-opt:hover { border-color: var(--dust); } }

.tier-row__order { min-width: 150px; }
.tier-row__added { display: none; }
.tier-row__order.is-added .tier-row__add { display: none; }
.tier-row__order.is-added .tier-row__added { display: inline; }
.tier-row__order.is-added::after { transform: scaleX(1); }

.sheet__cartbar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px max(12px, env(safe-area-inset-bottom));
  background: var(--hull);
  border-top: 1px solid var(--seam);
}
.sheet__cartbar[hidden] { display: none; }
.cart-send {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 0 -20px calc(-1 * max(28px, env(safe-area-inset-bottom)));
  padding: 14px 20px max(14px, env(safe-area-inset-bottom));
  background: var(--hull);
  border-top: 1px solid var(--seam);
}
@media (min-width: 768px) { .cart-send { margin: 0 -28px -40px; padding: 16px 28px 22px; } }
.sheet__cartbar-text { font-size: 14px; color: var(--dust); }
.sheet__cartbar .btn { min-height: 44px; }
@media (min-width: 768px) { .sheet__cartbar { padding: 14px 28px; } }

/* The cart sheet */
.cart-items { display: grid; gap: 10px; }
.cart-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px 14px;
  padding: 12px;
  background: var(--void);
  border: 1px solid var(--seam);
}
.cart-item__img { width: 88px; aspect-ratio: 1; object-fit: cover; background: #2a2b2e; }
.cart-item__text { display: grid; align-content: start; gap: 4px; min-width: 0; }
.cart-item__name { font-family: var(--f-display); font-size: 14px; letter-spacing: .02em; text-transform: uppercase; }
.cart-item__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dust); }
.cart-item__price { font-size: 16px; }
.cart-item__ask { font-family: var(--f-body); font-size: 13px; font-weight: 600; }
.cart-item__controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.qty { display: inline-flex; align-items: center; border: 1px solid var(--seam); }
.qty__btn {
  width: 44px;
  height: 40px;
  font-size: 18px;
  line-height: 1;
  transition: color .25s;
}
.qty__btn:disabled { color: var(--seam); cursor: default; }
@media (hover: hover) { .qty__btn:not(:disabled):hover { color: var(--gold); } }
.qty__n { min-width: 28px; text-align: center; font-family: var(--f-mono); font-size: 14px; }
.cart-item__remove, .cart-clear {
  min-height: 40px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dust);
  transition: color .25s;
}
@media (hover: hover) { .cart-item__remove:hover, .cart-clear:hover { color: var(--starlight); } }
.cart-clear { justify-self: start; }
.cart-list { display: grid; gap: 14px; }
.cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--seam);
}
.cart-total__n { font-size: 20px; }
.cart-total__note { font-size: 13px; line-height: 1.5; color: var(--dust); }
.cart-empty { display: grid; gap: 16px; justify-items: start; color: var(--dust); }

.cart-form { display: grid; gap: 12px; border: 0; }
.cart-form[hidden], .cart-send[hidden] { display: none; }
.cart-form__opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.field { display: grid; gap: 6px; font-size: 13px; color: var(--dust); }
.field input, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  color: var(--starlight);
  background: var(--void);
  border: 1px solid var(--seam);
  border-radius: 0;
  resize: vertical;
  transition: border-color .25s;
}
.field input::placeholder { color: #5d6573; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.cart-send { display: grid; gap: 8px; }
.cart-send .btn { width: 100%; }
.cart-send__note { font-size: 13px; color: var(--dust); }

/* ---------------------------------------------------------------- ordering */

.ordering {
  position: relative;
  padding: 104px 0 112px;
  background: var(--void);
}
.ordering__wrap { display: grid; gap: 40px; }

.steps {
  --dash: color-mix(in srgb, var(--gold) 55%, transparent);
  display: grid;
  gap: 0;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 16px;
  padding-bottom: 32px;
}
.step:last-child { padding-bottom: 0; }
.step__n {
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--gold);
  line-height: 1.6;
}
.step__text { font-size: 18px; line-height: 1.45; max-width: 30ch; }
/* Dashed connector crawling toward the next step (vertical on phones). */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 34px;
  bottom: 6px;
  width: 1px;
  background-image: linear-gradient(to bottom, var(--dash) 50%, transparent 50%);
  background-size: 1px 8px;
  animation: crawl-y 5.2s linear infinite;
  animation-play-state: paused;
}
.steps.is-running .step::after { animation-play-state: running; }
@keyframes crawl-y { to { background-position: 0 104px; } }
@keyframes crawl-x { to { background-position: 104px 0; } }

.facts { display: grid; gap: 12px; }
.fact { display: grid; gap: 10px; padding: 22px 20px; background: var(--hull); }
.fact p:last-child { color: var(--starlight); max-width: 46ch; }

.ordering__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
/* Phones: the order button runs the full width, easy to hit with a thumb. */
@media (max-width: 639px) { .ordering__cta .btn { width: 100%; } }

@media (min-width: 768px) {
  .facts { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (min-width: 1024px) {
  .ordering__wrap {
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
    row-gap: 56px;
  }
  .ordering__wrap > .h2 { grid-column: 1 / -1; }
  .steps {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .step { grid-template-columns: 1fr; padding-bottom: 0; row-gap: 14px; }
  .step__n { grid-row: auto; }
  .step:not(:last-child)::after {
    left: 44px;
    right: 0;
    top: 12px;
    bottom: auto;
    width: auto;
    height: 1px;
    background-image: linear-gradient(to right, var(--dash) 50%, transparent 50%);
    background-size: 8px 1px;
    animation-name: crawl-x;
  }
  .facts { grid-column: 1; align-self: start; }
  .ordering__cta { grid-column: 2; align-self: center; justify-self: start; }
}

/* ---------------------------------------------------------------- footer */

.footer {
  padding: 16px;
  background: var(--gold);
}
.footer__panel {
  /* Bottom room for the floating WhatsApp button (16px off the edge, 56px tall, and the
     cart button under it when that shows), so at the page's end it rests below the fine
     print instead of on it. */
  --float-clear: 76px;
  display: grid;
  gap: 36px;
  padding: 40px 24px calc(28px + var(--float-clear));
  background: var(--hull);
}
:root:has(#cart-fab:not([hidden])) .footer__panel { --float-clear: 136px; }
.footer__brand { display: flex; align-items: center; gap: 20px; }
.footer__emblem { width: 96px; height: 96px; mix-blend-mode: screen; }
.footer__word { font-size: 16px; }
.footer__nav ul { display: grid; gap: 0; }
.footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-display);
  font-size: 20px;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: color .25s;
}
@media (hover: hover) { .footer__nav a:hover { color: var(--gold); } }
.footer__contact { display: grid; justify-items: start; }
.footer__contact .label:not(:first-child) { margin-top: 14px; }
.footer__contact a {
  font-family: var(--f-mono);
  font-size: 15px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color .25s;
}
@media (hover: hover) { .footer__contact a:hover { color: var(--gold); } }
.footer__fine { display: grid; gap: 2px; font-size: 13px; color: var(--dust); }

@media (min-width: 768px) {
  .footer__panel {
    grid-template-columns: 1fr auto auto;
    gap: 40px 64px;
    padding: 48px 40px calc(32px + var(--float-clear));
  }
  .footer__emblem { width: 120px; height: 120px; }
  .footer__fine { grid-column: 1 / -1; grid-template-columns: 1fr auto; padding-top: 24px; border-top: 1px solid var(--seam); }
}

/* ---------------------------------------------------------------- mobile menu */

.menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) max(24px, env(safe-area-inset-bottom));
  background: var(--void);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.menu.is-open { opacity: 1; }
.menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  margin-right: -10px;
}
.menu__word { font-size: 16px; letter-spacing: .02em; }
.menu__list { margin-top: 40px; display: grid; gap: 4px; }
.menu__list li, .menu__cta {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s var(--ease-out) var(--d, 0ms), transform .45s var(--ease-out) var(--d, 0ms);
}
.menu.is-open .menu__list li, .menu.is-open .menu__cta { opacity: 1; transform: none; }
.menu__list a {
  display: flex;
  align-items: center;
  min-height: 60px;
  font-size: 26px;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--seam);
}
.menu__cta { margin-top: auto; }

/* ---------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }
  .seam { --p: 1 !important; }
  .wa-float__btn, .wa-float__btn::before { animation: none !important; }
  .steps .step::after { animation: none !important; }
  /* No growing blade: the bar shows lit and the percentage counts. */
  .loadbar__blade::before { width: 100%; opacity: 1; animation: none; }
  .loadbar__blade::after { opacity: .7; }
}