@font-face { font-family: "Mokoto"; src: url("../fonts/mokoto.ttf") format("truetype"); font-weight: 400; font-display: swap; }
/* Quantum Explorer styles */

/* Base */
html{height:100%}body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* Layout: one night-sky stage. Emblem top-left, wordmark and pill nav centred, glass product capsules floating on the nebula. */
:root {
  color-scheme: dark;
  --void: #07060f;        /* deep space ground */
  --indigo: #1a1c4a;      /* cool nebula */
  --violet: #7a3fb4;      /* warm nebula, active glow */
  --lilac: #e4c6ff;       /* product names */
  --gold: #e3c466;        /* laurel, from the original emblem lettering */
  --star: #f3efff;        /* text and star white */
  --mist: rgba(243, 239, 255, .72);
  --glass: rgba(255, 255, 255, .15);
  --glass-edge: rgba(255, 255, 255, .22);
  --pill-ink: #1b1030;
  --display: "Syncopate", "Eurostile", "Arial Black", sans-serif;
  --logo: "Mokoto", "Syncopate", "Eurostile", sans-serif;
  --classic: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  /* Home spacing scale: 1 at full page width (1136px content), smaller in proportion on narrower screens.
     A value tuned as 115px is written max(46px, calc(115 * var(--qx-u))): it never shrinks below 40%. */
  --qx-u: calc(min(1136px, var(--vw) - 2 * clamp(16px, var(--vw) * .04, 40px)) / 1136);
  /* Viewport width as the page sees it. Above 1000px the page is drawn smaller (zoom: --page-zoom, set in index.html),
     and inside it every vw value uses this "virtual" width, real width / zoom, exactly as browser zoom would. */
  --vw: calc(100vw / var(--page-zoom, 1));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: var(--star);
  font: 300 1.0625rem/1.6 var(--body);
  min-height: 100%;
}
#sky {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 46% at 28% 42%, rgba(132, 66, 190, .72), transparent 70%),
    radial-gradient(52% 40% at 78% 58%, rgba(70, 66, 185, .6), transparent 72%),
    radial-gradient(42% 30% at 52% 92%, rgba(176, 70, 150, .38), transparent 70%),
    radial-gradient(30% 24% at 88% 12%, rgba(90, 120, 220, .22), transparent 70%),
    var(--void);
}
.page { position: relative; z-index: 1; max-width: 76rem; margin-inline: auto; padding-inline: clamp(16px, var(--vw) * .04, 40px); padding-block: 1.25rem 2.5rem; display: flex; flex-direction: column; --page-gap: clamp(2rem, var(--vw) * .05, 3.5rem); gap: var(--page-gap); zoom: var(--page-zoom, 1); }
.page > main { margin-top: calc(max(10.4px, calc(26 * var(--qx-u))) - var(--page-gap)); }   /* header to the first title: 26px at full width */
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Header */
.masthead { display: grid; grid-template-columns: 10rem 1fr 10rem; align-items: center; gap: 1rem; }
.masthead .mark { width: 10rem; height: auto; filter: drop-shadow(0 0 14px rgba(227, 196, 102, .25)); }
.brandlink { display: block; line-height: 0; border-radius: 50%; }
.masthead-centre { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; min-width: 0; }
.wordmark {
  margin: 0; display: flex; flex-wrap: wrap; justify-content: center; column-gap: .9em; row-gap: .1em;
  font: 400 clamp(1.15rem, var(--vw) * .033, 2.35rem)/1.2 var(--logo); letter-spacing: .28em; text-transform: uppercase;
  text-shadow: 0 0 18px rgba(228, 198, 255, .75), 0 0 2px #fff;
}
.wordmark span { margin-right: -.28em; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.5rem; }
nav a {
  display: block; min-width: 7.6rem; padding: .28rem 1rem; text-align: center; text-decoration: none;
  background: var(--star); color: var(--pill-ink); border-radius: .7rem;
  font: 700 .95rem/1.5 var(--classic); letter-spacing: .12em;
  transition: box-shadow .2s, transform .2s;
}
nav a:hover { transform: translateY(-1px); box-shadow: 0 0 20px 2px rgba(228, 198, 255, 0.9); }
nav a[aria-current="page"] { box-shadow: 0 0 0 3px var(--violet), 0 0 20px 4px rgba(160, 90, 230, .85); }

/* Views */
.view { display: flex; flex-direction: column; gap: clamp(2rem, var(--vw) * .05, 3.25rem); }
#view-home { gap: max(39.6px, calc(99 * var(--qx-u))); }                    /* ring to the hero block */
h2 { margin: 0; font: 500 clamp(1.2rem, var(--vw) * .024, 1.6rem)/1.25 var(--classic); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); text-wrap: balance; }
.section { display: flex; flex-direction: column; gap: 1.5rem; }
#view-home > .section { gap: max(6.4px, calc(16 * var(--qx-u))); }         /* "Latest Drop & Must Cop" to the ring */
#view-home > .section > h2 { font-size: calc(clamp(1.2rem, var(--vw) * .024, 1.6rem) * 0.94); letter-spacing: 0.34em; }   /* home title only */
#view-clothing { margin-top: max(27.2px, calc(68 * var(--qx-u))); gap: max(41.2px, calc(103 * var(--qx-u))); }   /* space above the page; between T-shirts / Sweaters / Crop sweaters */
#view-clothing > .section { gap: max(23.6px, calc(59 * var(--qx-u))); }     /* section title to its cards */
#view-clothing > .section > h2 { font-size: calc(1.22 * clamp(1.2rem, var(--vw) * .024, 1.6rem)); letter-spacing: 0.3em; }
.section > h2 { text-align: center; }
p { margin: 0; max-width: 62ch; }

.hero { display: flex; justify-content: center; }
.hero-copy { display: flex; flex-direction: column; gap: max(14.4px, calc(36 * var(--qx-u))); align-items: center; text-align: center; min-width: 0; }
.hero h1 { margin: 0; font: 700 calc(clamp(1.5rem, var(--vw) * .046, 3.1rem) * 0.85)/1.15 var(--display); letter-spacing: 0.19em; text-transform: uppercase; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--gold); }
.lede { font-size: 1.308rem; max-width: 60ch; color: var(--mist); }
.cta {
  display: inline-block; padding: .7rem 1.6rem; border-radius: 999px; text-decoration: none;
  font: 700 .9rem/1.4 var(--classic); letter-spacing: .16em; text-transform: uppercase;
  color: var(--void); background: var(--gold); transition: box-shadow .2s, transform .2s;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(227, 196, 102, .6); }

/* "See the clothing": hover effect from the "voltage button" on Uiverse.io (by Pradeepsaranbishnoi), original values.
   Only the electric lines and flying dots; the link keeps its own look. */
.cta.volt { position: relative; font-size: calc(.9rem * 1.05); padding: .85rem 2.25rem; }   /* "See the clothing" only; the contact form's button keeps the .cta size */

.cta.volt .volt-svg {
  display: block;
  position: absolute;
  top: -0.75em;
  left: -0.25em;
  width: calc(100% + 0.5em);
  height: calc(100% + 1.5em);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  transition-delay: 0.1s;
}
.cta.volt .volt-line { stroke-dasharray: 100; filter: url("#volt-glow"); }
.cta.volt .volt-line-1 { stroke: #f6de8d; stroke-dashoffset: 0;   animation: volt-spark-1 3s linear infinite; }
.cta.volt .volt-line-2 { stroke: #6bfeff; stroke-dashoffset: 500; animation: volt-spark-2 3s linear infinite; }

.cta.volt .volt-dots { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s; transition-delay: 0.4s; }
.cta.volt .volt-dot { position: absolute; width: 1rem; height: 1rem; background: white; border-radius: 100%; opacity: 0; }
.cta.volt .volt-dot-1 { top: 0;    left: 20%; animation: volt-fly-up 3s linear infinite; }
.cta.volt .volt-dot-2 { top: 0;    left: 55%; animation: volt-fly-up 3s linear infinite; animation-delay: 0.5s; }
.cta.volt .volt-dot-3 { top: 0;    left: 80%; animation: volt-fly-up 3s linear infinite; animation-delay: 1s; }
.cta.volt .volt-dot-4 { bottom: 0; left: 30%; animation: volt-fly-down 3s linear infinite; animation-delay: 2.5s; }
.cta.volt .volt-dot-5 { bottom: 0; left: 65%; animation: volt-fly-down 3s linear infinite; animation-delay: 1.5s; }

/* show on mouse hover, and on keyboard focus so keyboard users get it too */
.cta.volt:hover .volt-svg, .cta.volt:focus-visible .volt-svg,
.cta.volt:hover .volt-dots, .cta.volt:focus-visible .volt-dots { opacity: 1; }

@keyframes volt-spark-1 { to { stroke-dashoffset: -1000; } }
@keyframes volt-spark-2 { to { stroke-dashoffset: -500; } }
@keyframes volt-fly-up {
  0%       { opacity: 0; transform: translateY(0) scale(0.2); }
  5%       { opacity: 1; transform: translateY(-1.5rem) scale(0.4); }
  10%, 100% { opacity: 0; transform: translateY(-3rem) scale(0.2); }
}
@keyframes volt-fly-down {
  0%       { opacity: 0; transform: translateY(0) scale(0.2); }
  5%       { opacity: 1; transform: translateY(1.5rem) scale(0.4); }
  10%, 100% { opacity: 0; transform: translateY(3rem) scale(0.2); }
}

/* people who asked their system for less motion: no effect */
@media (prefers-reduced-motion: reduce) {
  .cta.volt .volt-svg, .cta.volt .volt-dots { display: none; }
}

/* Product capsules */
.rack { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: clamp(1rem, var(--vw) * .035, 3.75rem); }
#view-clothing .rack { gap: max(28px, calc(70 * var(--qx-u))); }
@media (min-width: 1001px) { #view-clothing .rack { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* desktop: exactly 3 cards per row */
.capsule {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: .9rem;
  padding: 2rem 1rem 1.6rem; border: 1px solid var(--glass-edge); border-radius: 3rem; cursor: pointer;
  background: var(--glass); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  color: inherit; font: inherit; text-align: center;
  transition: transform .25s, background .25s, box-shadow .25s;
}
.capsule:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .2); box-shadow: 0 18px 50px -18px rgba(160, 90, 230, .9); }
.capsule img { width: 100%; height: auto; aspect-ratio: 1 / 1.08; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .55)); }
/* A shadow for every garment: one that follows its outline, and a soft one on the "floor" under it */
.garment { position: relative; display: block; width: 100%; }
.garment::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -9%; height: 13%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .8), rgba(0, 0, 0, .38) 55%, transparent); transition: transform .25s, opacity .25s; }
.garment img { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.08; object-fit: contain; filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .6)); transition: transform .25s; }
.capsule:hover .garment img { transform: translateY(-5px); }                  /* the garment lifts a little ... */
.capsule:hover .garment::after { transform: scale(.84); opacity: .7; }        /* ... and its floor shadow shrinks */
.capsule .name { font: 700 .74rem/1.55 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--lilac); text-shadow: 0 0 10px rgba(160, 90, 230, 1), 0 0 2px rgba(160, 90, 230, 1); text-wrap: balance; }
.nowrap { white-space: nowrap; } /* keeps "T-shirt" on one line in product names */
.capsule .price { margin-top: auto; font: 700 1.3rem/1 var(--display); letter-spacing: .14em; text-shadow: 0 0 12px rgba(228, 198, 255, .8); font-variant-numeric: tabular-nums; }
.capsule .price.soon { font-size: .72rem; font-weight: 400; color: var(--mist); text-shadow: none; }
/* Clothing page cards */
#view-clothing .capsule { border-radius: 3.65rem; padding: 2.65rem .3rem 2rem; gap: 2.3rem; }
#view-clothing .capsule .name { font-size: calc(1.16 * .74rem); letter-spacing: .21em; }
#view-clothing .capsule .price { margin-top: 0; font-size: calc(0.99 * 1.3rem); }   /* right under the name */

/* Home clothing ring: the cards stand in a circle that turns slowly, like a carousel seen slightly from above.
   Based on the Uiverse.io element by ilkhoeri (swift-panda-38), in this site's own colours. */
.ring-wrap { position: relative; overflow: hidden; --w: calc(clamp(7.75rem, var(--vw) * .08 + 4.5rem, 11.5rem) * 1.41); --h: calc(var(--w) * 1.78);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); }
.ring-stage { position: relative; height: calc(var(--h) * 1.9); perspective: 1400px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ring-stage.is-dragging { cursor: grabbing; }
.ring-stage.is-dragging .capsule { pointer-events: none; }
.rack.ring { display: block; position: absolute; left: calc(50% - var(--w) / 2); top: 0; width: var(--w); height: var(--h); margin: 0; padding: 0;
  transform-style: preserve-3d; transform: translateZ(calc(var(--radius, 900px) * -1)) rotateX(var(--tilt, -11deg)) rotateY(var(--angle, 0deg)); }
.ring > li { position: absolute; inset: 0; font-size: calc(var(--w) / 11.5); backface-visibility: visible;
  transform: rotateY(calc(360deg / var(--quantity) * var(--index))) translateZ(var(--radius, 900px)); }
.ring .capsule { gap: 1.3em .55em; padding: 1.75em .7em 1em; border: 2px solid rgba(228, 198, 255, .55); border-radius: 1.5em; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: radial-gradient(circle, rgba(122, 63, 180, .2) 0%, rgba(122, 63, 180, .5) 80%, rgba(160, 90, 230, .72) 100%), rgba(18, 13, 36, .55); }
.ring .capsule:hover { background: radial-gradient(circle, rgba(160, 90, 230, .3) 0%, rgba(160, 90, 230, .6) 80%, rgba(228, 198, 255, .7) 100%), rgba(18, 13, 36, .55); border-color: var(--gold); }
.ring .capsule .name { font-size: .62em; letter-spacing: .12em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ring .capsule .price { font-size: 1.05em; margin-top: 0.3em; }
.ring .garment img { -webkit-user-drag: none; }
.ring > li.is-back { pointer-events: none; }
.ring > li.is-back .capsule { transform: scaleX(-1); }      /* seen from behind: turn the card round so its print is not mirrored */
/* Hover zoom (Home ring and Clothing page): an enlarged copy of the card the mouse rests on. It lets clicks through to
   the real card, sits above the page but below the product window, and shows the garment lifted as on the hovered card. */
.card-zoom { position: fixed; z-index: 40; pointer-events: none; transform-origin: 50% 50%; }
.card-zoom .garment img { transform: translateY(-5px); }
.card-zoom .garment::after { transform: scale(.84); opacity: .7; }
.ring-btn { position: absolute; top: 62%; transform: translateY(-50%); z-index: 2; width: 3rem; height: 4.5rem; padding: 0; display: grid; place-items: center; border: 0; background: none; color: var(--star); opacity: .45; cursor: pointer; transition: opacity .2s, transform .2s; filter: drop-shadow(0 0 6px rgba(7, 6, 15, .9)); }
.ring-btn svg { width: 2.25rem; height: 2.25rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ring-btn:hover, .ring-btn:focus-visible { opacity: 1; }
.ring-btn.prev { left: clamp(.25rem, var(--vw) * .03, 3rem); }
.ring-btn.next { right: clamp(.25rem, var(--vw) * .03, 3rem); }
.ring-btn.prev:hover { transform: translateY(-50%) translateX(-3px); }
.ring-btn.next:hover { transform: translateY(-50%) translateX(3px); }
/* Phones and tablets are swiped with a finger, so the arrows are hidden there. */
@media (hover: none) and (pointer: coarse) { .ring-btn { display: none; } .ring-stage { cursor: auto; } }

/* About */
.about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, var(--vw) * .04, 3.5rem); align-items: center; }
.about-copy { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.about-copy h2 { text-align: left; }
figure { margin: 0; display: flex; flex-direction: column; gap: .6rem; }
figure img { width: 100%; height: auto; display: block; border-radius: 1.25rem; }
figcaption { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.graphics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 1.5rem; }
.graphics img { aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }

/* Contact */
.contact { align-self: center; width: min(100%, 34rem); display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.25rem, var(--vw) * .04, 2.25rem); border: 1px solid var(--glass-edge); border-radius: 2rem; background: var(--glass); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.field { display: flex; flex-direction: column; gap: .35rem; }
label { font: 500 .8rem/1.4 var(--classic); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
input, textarea { width: 100%; padding: .65rem .85rem; border: 1px solid var(--glass-edge); border-radius: .7rem; background: rgba(7, 6, 15, .55); color: var(--star); font: 400 1rem/1.5 var(--body); }
textarea { min-height: 8rem; resize: vertical; }
button.cta { border: 0; cursor: pointer; align-self: flex-start; }
.status { min-height: 1.5em; color: var(--lilac); font-size: .95rem; }

/* Product window with a zoomable picture */
dialog { width: min(94vw, 62rem); padding: 0; border: 1px solid var(--glass-edge); border-radius: 2rem; background: #120d24; color: var(--star); }
dialog::backdrop { background: rgba(7, 6, 15, .78); }
.quick { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); padding: clamp(1rem, 3vw, 2rem); align-items: center; }
.zoom-wrap { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.zoom { position: relative; aspect-ratio: 1 / 1.05; overflow: hidden; border-radius: 1.25rem; background: radial-gradient(80% 70% at 50% 45%, rgba(122, 63, 180, .28), rgba(7, 6, 15, .55)); cursor: zoom-in; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.zoom.is-zoomed { cursor: zoom-out; touch-action: none; }
.zoom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 0 0; will-change: transform; -webkit-user-drag: none; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .65)); }
.zoom.is-easing img { transition: transform .28s ease; }
.zoom-bar { display: flex; align-items: center; gap: .5rem; }
.zoom-bar button { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--glass-edge); border-radius: 50%; background: transparent; color: var(--star); font: 500 1.25rem/1 var(--body); cursor: pointer; }
.zoom-bar button:hover { background: rgba(255, 255, 255, .12); }
.zoom-bar button[disabled] { opacity: .35; cursor: default; }
.zoom-hint { margin: 0 0 0 .4rem; font-size: .85rem; color: var(--mist); }

/* Small cross in the corner of the window, so it can always be closed (handy on phones) */
.quick-x { position: absolute; top: .7rem; right: .7rem; z-index: 2; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(18, 13, 36, .7); color: var(--star); font: 400 1.6rem/1 var(--body); opacity: .75; cursor: pointer; }
.quick-x:hover { opacity: 1; }
.quick-copy { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.quick h3 { margin: 0; font: 700 1rem/1.5 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--lilac); }
.sizes { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: 0; }
.sizes legend { padding: 0; margin-bottom: .5rem; font: 500 .8rem/1.4 var(--classic); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.sizes label { position: relative; display: grid; place-items: center; min-width: 2.9rem; padding: .4rem .6rem; border: 1px solid var(--glass-edge); border-radius: .7rem; cursor: pointer; color: var(--star); font: 500 .9rem/1.4 var(--body); letter-spacing: .06em; }
.sizes input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sizes label:has(input:checked) { background: var(--star); color: var(--pill-ink); }
.sizes label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.note { font-size: .95rem; color: var(--mist); }
.close { align-self: flex-start; padding: .45rem 1.1rem; border: 1px solid var(--glass-edge); border-radius: 999px; background: transparent; color: var(--star); cursor: pointer; font: 500 .8rem/1.4 var(--classic); letter-spacing: .14em; text-transform: uppercase; }

footer { text-align: center; font: 400 .78rem/1.6 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--mist); }
footer strong { font-weight: 700; color: var(--star); }

@media (max-width: 720px) {
  .about, .quick { grid-template-columns: 1fr; }
  .rack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capsule, #view-clothing .capsule { padding: 1.25rem .6rem 1.1rem; border-radius: 1.75rem; }
  .capsule .name { font-size: .58rem; letter-spacing: .1em; }
  .capsule .price { font-size: 1rem; }
  #view-clothing .capsule .name { font-size: calc(0.58rem * 1.16); letter-spacing: .1em; }
  #view-clothing .capsule .price { font-size: .99rem; }
  .capsule .price.soon { line-height: 1.3; }
  dialog { max-height: calc(100dvh - 1.5rem); }
  .zoom { aspect-ratio: auto; height: min(44dvh, 92vw); }          /* on a phone the picture is shorter so the name, price and Close fit under it */
  .quick-copy { gap: .65rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Quick view price */
.capsule-price{margin:0;font:700 1.3rem/1 var(--display);letter-spacing:.14em}
.capsule-price.soon { line-height: 1.2; } /* "Price coming soon" wraps to two lines */

/* ===== Header: fluid spacing =====
   Everything scales with the header's own width (cqw units).
   Reference size: header 1136px wide = title 37.6px, menu 15.05px. */
.masthead {
  container-type: inline-size;
  grid-template-columns: 14.085% 1fr 14.085%;
  column-gap: 1.408%;
}
.masthead .mark { width: 100%; }

/* Logo: 200px left, 47px down, 17% bigger at reference size.
   The leftward shift shrinks on narrower screens so the logo is never cut off. */
.masthead .brandlink {
  translate: calc(-1 * clamp(0px, (var(--vw) - 100cqw) / 2 - 32px, 17.606cqw)) 4.137cqw;
  scale: 1.17;
}

/* Title, and the gap between title and menu */
.masthead-centre {
  --title-size: 3.31cqw;
  gap: calc(var(--title-size) * 0.47);
}
.masthead .wordmark {
  font-size: var(--title-size);
  letter-spacing: 0.67em;
  column-gap: 2.35em;
}
.masthead .wordmark span { margin-right: -0.67em; }

/* Menu buttons: all metrics in em so they scale with the menu font size */
.masthead nav ul {
  font-size: calc(1.338cqw * 0.99);
  gap: 0.79em 3.75em;
}
.masthead nav a {
  font-size: 1em;
  letter-spacing: 0.21em;
  padding: 0.295em 1.8em;
  min-width: 8em;
  border-radius: 0.737em;
}

/* Tablet portrait and below: logo on top, centred */
@media (max-width: 1000px) {
  .masthead {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 1rem;
  }
  .masthead-spacer { display: none; }
  .masthead .mark { width: clamp(8.16rem, 23.6cqw, 11.7rem); }
  .masthead .brandlink { translate: none; scale: none; }
  .masthead-centre { --title-size: clamp(1.15rem, 4.8cqw, 2.35rem); }
  .masthead nav ul { font-size: calc(clamp(0.8rem, 2.05cqw, 0.95rem) * 0.99); }
}

/* Phones: menu becomes a 2x2 grid */
@container (max-width: 640px) {
  .masthead nav ul {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    font-size: calc(clamp(0.75rem, 4.1cqw, 0.95rem) * 0.99);
    column-gap: min(3.75em, 10cqw);
  }
  .masthead nav a {
    min-width: 0;
    padding-inline: min(1.8em, 5cqw);
  }
}

/* Small phones: title on two lines, larger */
@container (max-width: 400px) {
  .masthead-centre { --title-size: clamp(1.15rem, 9cqw, 2rem); }
}