/* Nazara. Layout concept: the optician's eye chart. See DESIGN.md. */
:root {
  --cobalt: #2346d9;        /* the blue cloth in Nazara's own acetate photography */
  --cobalt-deep: #1a35ad;
  --lens: #3f63f2;          /* cobalt seen through glass */
  --ink: #0a1030;
  --ink-soft: #454d70;
  --ground: #eef1f8;
  --paper: #ffffff;
  --rule: #cfd6e8;
  --on-cobalt: #ffffff;
  --on-cobalt-soft: #cdd8ff;
  --duo-green: #1f9d5b;     /* optician's duochrome test */
  --duo-red: #d8323f;
  --ok: #14713f;
  --bad: #b3212d;
  --link: #1a35ad;          /* cobalt when it is text on the ground */
  --placeholder: #5b6388;
  --night: #0a1030;         /* header, footer, the glasses: dark in both themes */
  --night-rule: #2b335c;
  --tile: #ffffff;          /* product photos are shot on white, so their tile is white in both themes */
  --tile-soft: #eef1f8;
  --radius: 10px;

  --display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --body: "Hanken Grotesk", "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef1f8;
    --ink-soft: #aab3d6;
    --ground: #070b1f;
    --paper: #121938;
    --rule: #2b335c;
    --ok: #5fd39a;
    --bad: #ff8b93;
    --link: #9db1ff;
    --placeholder: #8f98bd;
    --tile-soft: #ffffff;
    color-scheme: dark;
  }
}
@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--cobalt) var(--ground); scroll-padding-top: 88px; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--ground); color: var(--ink);
  font: 400 1.0625rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased; caret-color: var(--cobalt);
}
main { flex: 1; }
::selection { background: var(--cobalt); color: var(--on-cobalt); }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--duo-green); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2 {
  font-family: var(--display); font-stretch: 112%; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.02; text-wrap: balance;
}
h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); }
dl { margin: 0; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 10px 14px; z-index: 50; }
.skip:focus { left: 8px; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

/* Buttons share one shape: a squared lozenge, like a trial-lens tab */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 1.6em;
  font: 700 .95rem/1 var(--display); font-stretch: 110%; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; border: 2px solid transparent; border-radius: var(--radius); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { background: var(--rule); color: var(--ink-soft); cursor: not-allowed; }
.btn-light { background: var(--on-cobalt); color: var(--cobalt-deep); }
.btn-light:hover { background: var(--night); color: var(--on-cobalt); }
.btn-ghost { border-color: var(--on-cobalt-soft); color: var(--on-cobalt); background: transparent; }
.btn-ghost:hover { background: var(--on-cobalt); color: var(--cobalt-deep); border-color: var(--on-cobalt); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--cobalt); color: var(--on-cobalt); }
.btn-cobalt { background: var(--cobalt); color: var(--on-cobalt); }
.btn-cobalt:hover { background: var(--cobalt-deep); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-wide { width: 100%; }
.arrow { width: 1.1em; height: 1.1em; flex: none; }
.text-link { font-weight: 700; display: inline-flex; align-items: center; gap: .5em; min-height: 44px; }
.text-link:hover { color: var(--link); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--night); color: var(--on-cobalt); border-bottom: 1px solid var(--night-rule); view-transition-name: site-header; }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand img { width: 150px; height: 48px; object-fit: cover; }
.brand span { font: 800 1.5rem/1 var(--display); font-stretch: 118%; letter-spacing: .02em; text-transform: lowercase; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; font-size: .95rem; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 0 1px no-repeat;
  transition: background-size .3s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { background-size: 100% 1px; }
.nav .cart { gap: .5em; padding: 0 1.1em; border: 1px solid #5a6390; border-radius: var(--radius); background-image: none; transition: background-color .2s var(--ease); }
.nav .cart:hover, .nav .cart[aria-current="page"] { background-color: var(--cobalt); border-color: var(--cobalt); }
.cart-count { min-width: 1.5em; padding: 2px 6px; border-radius: var(--radius); background: var(--on-cobalt); color: var(--night); font-size: .8rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.menu-btn {
  display: none; align-items: center; gap: .6em; min-height: 44px; padding: 0 14px;
  background: none; color: inherit; border: 1px solid #5a6390; border-radius: var(--radius);
  font: 600 .95rem/1 var(--body); cursor: pointer;
}
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--night); padding: 4px var(--gutter) 20px; border-top: 1px solid var(--night-rule);
  }
  .nav a { min-height: 52px; border-bottom: 1px solid #2b335c; background-image: none; font-size: 1.05rem; }
  .nav .cart { margin-top: 16px; justify-content: center; border-bottom: 1px solid #5a6390; }
}

/* ---------- Home hero: the wordmark laid over one photograph ---------- */
/* The photos are chosen in the admin area (Home and contact), which sets --hero-photo-d and --hero-photo-m.
   --hero-focus is the point of the photo that stays in view when it is cropped. */
.hero {
  --hero-photo: var(--hero-photo-d, url("hero.webp"));
  --hero-focus: 60% 30%;
  --hero-scrim: 10, 12, 20;      /* the colour the copy stands on; this photo is dark at the bottom, so the copy is white */
  position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr auto;
  min-height: clamp(560px, calc(100svh - 69px), 940px);
  background: rgb(var(--hero-scrim)); color: #fff; overflow: clip;
}
/* The photograph is its own layer so it can move: it arrives slightly large and out of focus and settles
   sharp ("back in focus"), leans a few pixels toward the pointer, and drifts slower than the page on scroll.
   Each of those uses a different property (scale + filter, translate, transform) so they never fight. */
.hero::before {
  content: ""; position: absolute; inset: -8% -3%; z-index: -1;
  background: var(--hero-photo) var(--hero-focus) / cover no-repeat;
  translate: calc(var(--px, 0) * -16px) calc(var(--py, 0) * -10px);
  transition: translate .9s var(--ease);
  animation: hero-settle 2.2s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes hero-settle { from { scale: 1.1; filter: blur(14px); } to { scale: 1; filter: blur(0); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero::before { animation: hero-settle 2.2s cubic-bezier(.16, 1, .3, 1) both, hero-drift linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 90vh; }
    @keyframes hero-drift { to { transform: translateY(5%); } }
  }
}
/* The band is an SVG: a dark rectangle with NAZARA cut out of it by a mask, so the photo shows through the
   letters without any blend mode. That keeps working while the photo layer underneath is moving. */
.hero-band { line-height: 0; }
.hero-band svg { display: block; width: 100%; height: auto; overflow: hidden; }
.band-fill { fill: var(--night); }
.hero-band text {
  font: 900 172px/1 var(--display); font-stretch: 125%; letter-spacing: -.01em;
  /* the letters rise into the band on load, then lean a hair against the photo so the two read as layers */
  translate: calc(var(--px, 0) * 8px) 0; transition: translate .9s var(--ease);
  animation: wordmark-rise 1.5s cubic-bezier(.16, 1, .3, 1) .15s both;
}
@keyframes wordmark-rise { from { transform: translateY(105%); } to { transform: none; } }
.hero-copy {
  grid-row: 3; position: relative; display: grid; justify-items: center; gap: 10px; text-align: center;
  width: 100%; max-width: none;
  padding-block: 130px clamp(24px, 4vw, 44px);
  /* no panel behind the copy: a soft shadow on the letters keeps them readable on the photo */
  text-shadow: 0 1px 14px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .35);
}
/* the headline comes into focus; the sentence and the buttons rise after it */
.hero h1 { animation: focus-in-title 1.4s cubic-bezier(.16, 1, .3, 1) .95s both; }
.hero-copy p { animation: rise .9s var(--ease) 1.25s both; }
.hero-cta { animation: rise .9s var(--ease) 1.4s both; }
@keyframes focus-in-title { from { opacity: 0; filter: blur(12px); letter-spacing: .14em; } to { opacity: 1; filter: blur(0); letter-spacing: .02em; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero h1 { font: 400 clamp(1.25rem, 2.1vw, 1.75rem)/1.1 var(--body); letter-spacing: .02em; text-transform: uppercase; }
.hero-copy p { color: #e4e7f2; font-size: 1rem; }
.hero-cta .btn { text-shadow: none; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; margin-top: 10px; }
.btn-night { background: var(--night); color: #fff; }
.btn-night:hover { background: var(--cobalt); }
.hero .text-link:hover { color: var(--on-cobalt-soft); }
@media (max-width: 720px) {
  .hero { --hero-photo: var(--hero-photo-m, url("hero-phone.webp")); --hero-focus: 50% 35%; min-height: clamp(540px, calc(100svh - 69px), 680px); }
  /* the phone photo is light at the bottom, so it darkens gently under the copy (a fade in the photo, not a panel) */
  .hero::before { background: linear-gradient(to top, rgba(10, 12, 20, .72), rgba(10, 12, 20, .4) 32%, rgba(10, 12, 20, 0) 52%), var(--hero-photo) var(--hero-focus) / cover no-repeat; }
}

/* On the home page the wordmark is the logo, so the header logo waits until it has scrolled away. */
[data-page="home"] .brand { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; }
[data-page="home"] .site-header.is-scrolled .brand { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
[data-page="home"] .site-header:not(.is-scrolled) { border-bottom-color: transparent; }

/* ---------- Sections and product tiles ---------- */
.section { padding-block: clamp(64px, 9vw, 128px) clamp(48px, 7vw, 96px); }
.section-tight { padding-block: clamp(28px, 4vw, 48px) clamp(56px, 7vw, 96px); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(28px, 4vw, 52px); }
.section-head p { max-width: 52ch; color: var(--ink-soft); font-size: 1.15rem; }
.section-head.stack { display: grid; justify-content: start; gap: 14px; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px) clamp(12px, 1.6vw, 24px); }
.frame { display: grid; grid-template-rows: auto auto; gap: 14px; text-decoration: none; min-width: 0; align-content: start; }
.frame.lead { grid-column: span 2; grid-row: span 2; grid-template-rows: 1fr auto; }
.shot { overflow: hidden; background: var(--tile); border-radius: var(--radius); aspect-ratio: 1; }
.frame.lead .shot { aspect-ratio: auto; min-height: 100%; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
/* chains are cut out of their white backdrop, so they hang on ivory like they do in the Chains section */
.is-chain .shot { background-color: #f5efe6; }
.frame:hover .shot img { transform: scale(1.05); }
.meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; }
.meta .name { font: 800 1.1rem/1.2 var(--display); font-stretch: 112%; letter-spacing: 0; text-wrap: balance; }
.frame.lead .meta .name { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.meta .price { font: 600 1.05rem/1.2 var(--body); font-variant-numeric: tabular-nums; }
.meta .kind { grid-column: 1 / -1; color: var(--ink-soft); font-size: .95rem; }
.frame:hover .name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frame.lead .shot { aspect-ratio: 1.25; min-height: 0; }
}

/* ---------- Home: collections ---------- */
/* Seven cells for seven things: six collections and one index of the rest. */
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(clamp(190px, 21vw, 300px), auto); gap: clamp(10px, 1.2vw, 18px); }
.cat {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  padding: clamp(14px, 1.6vw, 24px); border-radius: var(--radius);
  background: var(--tile); color: var(--night); text-decoration: none;
}
.cat img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cat:hover img { transform: scale(1.06); }
.cat h3 { font: 800 clamp(1.2rem, 2vw, 1.9rem)/1 var(--display); font-stretch: 112%; letter-spacing: -.01em; }
.cat-lead h3 { font-size: clamp(2.2rem, 5vw, 4.6rem); font-stretch: 125%; }
.cat-wide h3 { font-size: clamp(1.6rem, 3vw, 2.8rem); }
.cat-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums; }
.cat-meta .arrow { transition: transform .4s var(--ease); }
.cat:hover .cat-meta .arrow { transform: translateX(6px); }
.cat-lead { grid-column: span 2; grid-row: span 2; }
/* a dark cover photo: white lettering, with a soft shade at the top and bottom so it always reads */
.cat-on-dark { color: #fff; background: var(--night); }
.cat-on-dark::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 8, 24, .55), transparent 40%, transparent 65%, rgba(5, 8, 24, .55)); pointer-events: none; }
.cat-on-dark.cat-wide img { -webkit-mask-image: none; mask-image: none; width: 100%; }

.cat-wide { grid-column: span 2; }
/* in a wide cell the photo keeps to the right so the name and count stay clear of it */
/* the photo fades in from the left instead of starting on a hard edge, so close-ups sit softly beside the name */
.cat-wide img { left: auto; right: 0; width: 72%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%); mask-image: linear-gradient(90deg, transparent, #000 42%); }
.cat-wide h3, .cat-wide .cat-meta > span { max-width: 42%; }
.cat-more { grid-column: span 2; justify-content: flex-start; gap: 10px; background: var(--night); color: var(--on-cobalt); }
.cat-more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 22px; }
.cat-more li a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration-color: #5a6390; }
.cat-more li a:hover { text-decoration-color: currentColor; }
.cat-more .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px) {
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(clamp(160px, 44vw, 300px), auto); }
}

/* ---------- Home: a row you scroll sideways ---------- */
.scroller {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 23%, 300px); gap: clamp(12px, 1.6vw, 24px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin;
  padding-bottom: 18px;
}
.scroller .frame { scroll-snap-align: start; }

/* ---------- Home: Balance, the signature line ---------- */
/* A dark showcase: the word set huge, a close-up with numbered pins tied to the points beside it,
   and the frames themselves one tap away. */
.balance { position: relative; overflow: clip; background: var(--night); color: var(--on-cobalt); }
.balance > .wrap { display: grid; gap: clamp(36px, 5vw, 72px); padding-block: clamp(72px, 10vw, 140px); }
.balance-head { display: grid; gap: 14px; justify-items: start; container-type: inline-size; }
.balance-kicker { font-size: .85rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-cobalt-soft); }
.balance h2 {
  font: 900 min(15cqi, 12rem)/.82 var(--display);   /* sized to the width of the column, so the word always fits */ font-stretch: 125%; letter-spacing: -.035em; text-transform: uppercase;
  /* the word fades from solid to outline, like a lens catching light */
  background: linear-gradient(100deg, #fff 35%, rgba(255, 255, 255, .28) 80%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.balance-lede { max-width: 44ch; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: #c5cbe6; }

.balance-anatomy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.balance-photo { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.balance-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.pin {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--night); color: #fff; font: 800 .95rem/1 var(--display); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 8px 18px -6px rgba(10, 16, 48, .6);
}
.pin { transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.pin::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #fff; opacity: 0; }
/* the pin for the point being read (hovered on computers, swiped to on phones) lights up */
.pin.is-active { background: #fff; color: var(--night); box-shadow: 0 0 0 4px var(--night), 0 0 0 7px rgba(255, 255, 255, .9), 0 10px 22px -6px rgba(10, 16, 48, .7); }
.balance-points li { transition: opacity .3s var(--ease); }
.balance-points { list-style: none; margin: 0; padding: 0; counter-reset: point; display: grid; }
.balance-points li { counter-increment: point; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; padding-block: 22px; border-top: 1px solid var(--night-rule); }
.balance-points li:last-child { border-bottom: 1px solid var(--night-rule); }
.balance-points li::before { content: counter(point); grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #5a6390; font: 800 .95rem/1 var(--display); }
.balance-points h3 { font: 800 1.35rem/1.2 var(--display); font-stretch: 112%; }
.balance-points p { color: #c5cbe6; }

/* Balance pages: two photographs of the line, side by side */
.balance-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.balance-gallery img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.shop-gallery { margin-top: clamp(40px, 6vw, 80px); }
/* chain photos are tall portraits: keep the whole chain, from the ear down */
.chain-gallery { max-width: 900px; margin-inline: auto; }
.chain-gallery img { aspect-ratio: 9 / 16; object-position: top; }
.balance-shop { display: grid; gap: 22px; justify-items: start; }
.balance-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--night-rule); border-radius: var(--radius); }
.balance-tabs button {
  min-height: 44px; padding: 0 22px; border: 0; border-radius: var(--radius); background: transparent; color: #c5cbe6;
  font: 700 1rem/1 var(--body); cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease);
}
.balance-tabs button:hover { color: #fff; }
.balance-tabs button[aria-selected="true"] { background: #fff; color: var(--night); }
.balance .scroller { width: 100%; scrollbar-color: #5a6390 transparent; }
.balance .meta .kind { color: #aab3d6; }
.balance .frame:hover .shot { box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .8); }

/* motion: the pins land one after another, then each sends out one ring */
@media (prefers-reduced-motion: no-preference) {
  .balance-anatomy.reveal .pin { scale: 0; }
  .balance-anatomy.reveal.in .pin { scale: 1; transition: scale .6s cubic-bezier(.34, 1.56, .64, 1); }
  .balance-anatomy.reveal.in .pin:nth-of-type(1) { transition-delay: .5s; }
  .balance-anatomy.reveal.in .pin:nth-of-type(2) { transition-delay: .65s; }
  .balance-anatomy.reveal.in .pin:nth-of-type(3) { transition-delay: .8s; }
  .balance-anatomy.in .pin::after { animation: pin-ring 1.6s ease-out 1.2s 2; }
  .balance-photo img { transition: scale 1.4s var(--ease); }
  .balance-anatomy.reveal .balance-photo img { scale: 1.08; }
  .balance-anatomy.reveal.in .balance-photo img { scale: 1; }
}
@keyframes pin-ring { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.9; } }

@media (max-width: 860px) {
  .balance-anatomy { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .balance > .wrap { padding-block: 56px 60px; gap: 32px; }
  .balance-head { gap: 10px; }
  .balance-kicker { font-size: .78rem; }
  .balance-lede { font-size: 1.05rem; }
  .balance-anatomy { gap: 14px; }
  .pin { width: 30px; height: 30px; font-size: .85rem; cursor: pointer; }
  /* the three points as a compact list, one under the other */
  .balance-points li { grid-template-columns: 30px minmax(0, 1fr); gap: 2px 12px; padding-block: 14px; }
  .balance-points li::before { width: 26px; height: 26px; font-size: .78rem; }
  .balance-points h3 { font-size: 1rem; }
  .balance-points p { font-size: .9rem; line-height: 1.45; }
  .balance-shop { gap: 16px; }
  .balance-gallery {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .balance-gallery::-webkit-scrollbar { display: none; }
  .balance-gallery img { flex: 0 0 82%; scroll-snap-align: start; }
  .balance-tabs { width: 100%; }
  .balance-tabs button { flex: 1; padding: 0 10px; }
  .balance .scroller { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); width: auto; justify-self: stretch; }
  .balance-shop .btn { width: 100%; }
}

/* ---------- Home: Chains, the hanging showcase ---------- */
/* Ivory in both themes, like a jewellery display. The photos are shot on white, so they are multiplied onto the
   ivory and the chains look as if they hang straight from the page. One chain is in the spotlight (with a lens that
   follows the pointer); all 36 hang from a rail below and swing when the pointer passes or the rail is scrolled. */
.chains { --ivory: #f5efe6; --gold: #b0844b; --ink-c: #0a1030; background: var(--ivory); color: var(--ink-c); overflow: clip; padding-block: clamp(72px, 9vw, 130px) clamp(40px, 5vw, 64px); }
.chains-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.chains-copy { display: grid; gap: 20px; justify-items: start; align-content: center; }
.chains-kicker { font-size: .85rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.chains h2 { font: 900 clamp(3.2rem, 7.4vw, 7rem)/.86 var(--display); font-stretch: 125%; letter-spacing: -.035em; text-transform: uppercase; color: var(--ink-c); }
.chains h2 span { display: block; color: var(--gold); }
.chains-lede { max-width: 40ch; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: #4a5068; }
.chains-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.chains-filter button {
  min-height: 40px; padding: 0 16px; border: 1px solid rgba(10, 16, 48, .18); border-radius: var(--radius); background: transparent; color: var(--ink-c);
  font: 600 .95rem/1 var(--body); cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.chains-filter button:hover { border-color: var(--ink-c); }
.chains-filter button[aria-pressed="true"] { background: var(--ink-c); border-color: var(--ink-c); color: #fff; }
.chains .btn-ink { background: var(--ink-c); color: #fff; }
.chains .btn-ink:hover { background: var(--gold); }

/* the spotlight */
/* nothing in the stage may form its own layer group, or the photos' white could not melt into the ivory */
.chain-stage { position: relative; margin: 0; display: grid; justify-items: center; align-content: start; min-height: clamp(520px, 52vw, 720px); }
.chain-stage::before { /* the rod it hangs from */
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 3px; border-radius: 3px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--gold) 18%, #e3c48f 50%, var(--gold) 82%, transparent);
}
.stage-word {
  position: absolute; top: 38%; left: 50%; translate: -50% -50%; white-space: nowrap; pointer-events: none;
  font: 900 clamp(4rem, 11vw, 10rem)/1 var(--display); font-stretch: 125%; letter-spacing: -.03em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px rgba(176, 132, 75, .45);
  transition: opacity .35s var(--ease), letter-spacing .9s var(--ease);
}
.stage-word.is-changing { opacity: 0; letter-spacing: .08em; transition-duration: 0s; }
.stage-frame { position: relative; width: min(100%, clamp(240px, 26vw, 360px)); cursor: zoom-in; touch-action: pan-y; }
.stage-hang { position: relative; aspect-ratio: 2 / 3; transform-origin: 50% 0; rotate: var(--swing, 0deg); }
.stage-img { width: 100%; height: 100%; object-fit: cover; }
.stage-hang.is-changing .stage-img { animation: chain-drop .6s cubic-bezier(.22, 1.4, .36, 1) both; }
@keyframes chain-drop { from { opacity: 0; translate: 0 -14%; } 55% { opacity: 1; } to { opacity: 1; translate: 0 0; } }
.loupe {
  position: absolute; z-index: 3; left: 0; top: 0; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; pointer-events: none;
  background: var(--ivory) no-repeat; border: 3px solid #fff; opacity: 0; scale: .6; transition: opacity .2s var(--ease), scale .25s var(--ease);
  box-shadow: 0 0 0 1px rgba(10, 16, 48, .15), 0 18px 40px -10px rgba(10, 16, 48, .45), inset 0 0 22px rgba(10, 16, 48, .12);
}
.stage-frame.is-looking .loupe { opacity: 1; scale: 1; }
.stage-caption { display: grid; justify-items: center; gap: 4px; margin-top: 18px; text-align: center; }
.stage-title { font: 800 clamp(1.4rem, 2.2vw, 1.9rem)/1.1 var(--display); font-stretch: 112%; }
.stage-note { color: #4a5068; max-width: 34ch; }
.stage-link { color: var(--ink-c); }
.stage-link:hover { color: var(--gold); }

/* the rail: every chain hanging in a row */
.chain-rail-wrap { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.chain-rail {
  position: relative; display: flex; gap: clamp(4px, .8vw, 12px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 0 var(--gutter) 8px; scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity;
}
/* soft edges drawn over the rail (a mask would stop the photos melting into the ivory) */
.chain-rail-wrap::before, .chain-rail-wrap::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 64px; width: var(--gutter); pointer-events: none; }
.chain-rail-wrap::before { left: 0; background: linear-gradient(90deg, var(--ivory), transparent); }
.chain-rail-wrap::after { right: 0; background: linear-gradient(-90deg, var(--ivory), transparent); }
.chain-rail::-webkit-scrollbar { display: none; }
.chain-rail::before { /* the rod running the whole length */
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: var(--rail-w, 100%);
  background: linear-gradient(90deg, var(--gold), #e3c48f 50%, var(--gold));
}
.chain {
  flex: 0 0 clamp(96px, 9vw, 132px); display: grid; justify-items: center; align-content: start; gap: 6px; padding: 0 0 6px; border: 0; background: none; color: var(--ink-c);
  font: inherit; cursor: pointer; scroll-snap-align: start; -webkit-tap-highlight-color: transparent;
}
.chain[hidden] { display: none; }
.chain-swing { display: block; width: 100%; aspect-ratio: 2 / 3; transform-origin: 50% 0; rotate: var(--swing, 0deg); }
.chain-swing img { width: 100%; height: 100%; object-fit: cover; transition: translate .4s var(--ease); }
.chain:hover .chain-swing img { translate: 0 3px; }
.chain-name { font-size: .82rem; font-weight: 600; line-height: 1.2; text-align: center; color: #4a5068; transition: color .2s var(--ease); }
.chain:hover .chain-name, .chain[aria-pressed="true"] .chain-name { color: var(--ink-c); }
.chain[aria-pressed="true"] .chain-name { font-weight: 800; }
.chain[aria-pressed="true"] .chain-name::after { content: ""; display: block; width: 5px; height: 5px; margin: 5px auto 0; border-radius: 50%; background: var(--gold); }
.chain.is-new { animation: chain-in .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes chain-in { from { opacity: 0; translate: 0 -10px; } }
.rail-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.rail-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius); border: 1px solid rgba(10, 16, 48, .2); background: transparent; color: var(--ink-c); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.rail-btn:hover { background: var(--ink-c); color: #fff; }
.rail-btn svg { width: 20px; height: 20px; }
.chains :focus-visible { outline-color: var(--ink-c); }
.chains-more { display: none; justify-content: center; margin-top: 18px; }

@media (max-width: 860px) {
  .chains-grid { grid-template-columns: minmax(0, 1fr); }
  .chain-stage { min-height: 0; padding-top: 4px; }
}
@media (max-width: 720px) {
  .chains { padding-block: 60px 32px; }
  .chains-copy { gap: 16px; }
  .chains h2 { font-size: clamp(2.8rem, 15vw, 4rem); }
  .chains-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); width: calc(100% + 2 * var(--gutter)); }
  .chains-filter::-webkit-scrollbar { display: none; }
  .chains-filter button { flex: none; }
  .chains-copy .btn { display: none; }   /* on phones the button sits under the rail */
  .stage-frame { width: 58vw; }
  .stage-word { font-size: 19vw; top: 34%; }
  .loupe { width: 130px; height: 130px; margin: -150px 0 0 -65px; }   /* above the finger, not under it */
  .chain { flex-basis: 92px; }
  .rail-nav { display: none; }
  .chains-more { display: flex; padding-inline: var(--gutter); }
  .chains-more .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-hang, .chain-swing { rotate: none; }
  .stage-hang.is-changing .stage-img, .chain.is-new { animation: none; }
}

/* ---------- Home: clip-on feature ---------- */
.feature { background: var(--paper); }
.feature .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.feature-copy { display: grid; gap: 20px; justify-items: start; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.feature-copy p { font-size: 1.15rem; max-width: 40ch; color: var(--ink-soft); }
@media (max-width: 860px) { .feature .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Home: story band ---------- */
.story { background: var(--night); color: var(--on-cobalt); }
.story .wrap { display: grid; gap: 26px; justify-items: start; padding-block: clamp(72px, 10vw, 150px); }
.story h2 { font-size: clamp(2.2rem, 5.6vw, 5rem); max-width: 16ch; }
.story p { font-size: 1.2rem; max-width: 52ch; color: #c5cbe6; }

/* ---------- Home: FAQ teaser ---------- */
.faq-teaser .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.faq-teaser .lead { display: grid; gap: 16px; justify-items: start; }
.faq-teaser .list { border-top: 2px solid var(--ink); }
@media (max-width: 860px) { .faq-teaser .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Ruled lists: promises, facts ---------- */
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 3vw, 48px); border-top: 2px solid var(--ink); }
.promises div { padding-block: 22px 8px; }
.promises dt { font: 800 clamp(1.15rem, 1.9vw, 1.5rem)/1.15 var(--display); font-stretch: 112%; }
.promises dd { margin: 8px 0 0; color: var(--ink-soft); max-width: 28ch; }
@media (max-width: 900px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } .promises div { border-bottom: 1px solid var(--rule); padding-bottom: 20px; } }
@media (max-width: 480px) { .promises { grid-template-columns: minmax(0, 1fr); } }

.facts { border-top: 2px solid var(--ink); }
.facts div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--rule); }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; color: var(--ink-soft); }
/* product page: each fact is a drop-down, closed until tapped */
.facts-fold summary { min-height: 52px; font-size: 1rem; }
/* a down arrow instead of the FAQ's +; it flips up when open */
.facts-fold summary::after { width: 9px; height: 9px; margin-right: 4px; background: none; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.facts-fold details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.facts-fold details p { margin: 0 0 16px; color: var(--ink-soft); max-width: 52ch; }

/* ---------- Newsletter band ---------- */
.signup { background: var(--night); color: var(--on-cobalt); }
.signup .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; padding-block: clamp(56px, 7vw, 96px); }
.signup p { margin-top: 16px; color: var(--on-cobalt-soft); max-width: 40ch; font-size: 1.1rem; }
.signup form { display: grid; gap: 10px; }
.signup label { font-weight: 600; }
.signup .field { display: flex; gap: 10px; flex-wrap: wrap; }
.signup input { flex: 1 1 240px; border-color: var(--paper); }
.signup .btn { min-height: 56px; }
.signup .form-msg { color: var(--on-cobalt); }
@media (max-width: 820px) { .signup .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Form controls ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select {
  min-width: 0; min-height: 56px; padding: 0 18px;
  font: 500 1.05rem var(--body); color: var(--ink); background: var(--paper);
  border: 2px solid var(--rule); border-radius: var(--radius); caret-color: var(--cobalt);
  transition: border-color .2s var(--ease);
}
textarea { padding-block: 14px; min-height: 150px; resize: vertical; line-height: 1.5; }
select { min-height: 48px; padding-right: 40px; cursor: pointer; }
input:hover, textarea:hover, select:hover { border-color: var(--ink-soft); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 1px; border-color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
[aria-invalid="true"] { border-color: var(--bad) !important; }
.err { color: var(--bad); font-weight: 600; font-size: .95rem; }
.signup .err { color: var(--on-cobalt); }
.signup [aria-invalid="true"] { border-color: #ff8b93 !important; }
.form { display: grid; gap: 20px; }
.form .f { display: grid; gap: 6px; }
.form label { font-weight: 700; }
.form .hint { color: var(--ink-soft); font-size: .95rem; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 600px) { .form-row { grid-template-columns: minmax(0, 1fr); } }
.form-msg { min-height: 1.5em; font-weight: 600; }
.form-msg.ok { color: var(--ok); } .form-msg.bad { color: var(--bad); }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--cobalt); }

/* ---------- Inner pages: head band ---------- */
.page-head { background: var(--night); color: var(--on-cobalt); }
.page-head .wrap { display: grid; gap: 14px; padding-block: clamp(28px, 4vw, 52px) clamp(32px, 4.5vw, 60px); }
.page-head h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); }
.page-head p { color: var(--on-cobalt-soft); font-size: 1.15rem; max-width: 52ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; margin: 0; padding: 0; font-size: .95rem; font-weight: 600; }
.crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .6; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs [aria-current="page"] { opacity: .75; font-weight: 500; }
.crumbs.dark { color: var(--ink-soft); }
.crumbs.dark a:hover { color: var(--link); }

/* ---------- Shop ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: .55em; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper);
  font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.chip small { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: .85rem; }
.chip:hover { border-color: var(--ink); }
.chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip[aria-current="true"] small { color: inherit; opacity: .75; }
.tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; padding-block: 12px; margin-bottom: 28px; border-block: 1px solid var(--rule); }
.tools .right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.tools label.sort { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.tools .count { color: var(--ink-soft); font-weight: 600; }
.more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: clamp(32px, 5vw, 56px); color: var(--ink-soft); }
.empty { display: grid; gap: 16px; justify-items: start; padding-block: 32px; max-width: 46ch; }
.empty h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.empty p { color: var(--ink-soft); }

/* ---------- Product ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.pdp .shot { position: sticky; top: 92px; }
.pdp-info { display: grid; gap: 22px; }
.pdp-info h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.pdp-price { font: 700 1.6rem/1 var(--body); font-variant-numeric: tabular-nums; }
.pdp-price.none { font-size: 1.1rem; color: var(--ink-soft); font-weight: 600; }
.pdp-info > p { max-width: 46ch; font-size: 1.1rem; }
.buy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.buy-msg { grid-column: 1 / -1; }
.stepper { overflow: hidden; display: inline-grid; grid-template-columns: 48px 56px 48px; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper); }
.stepper button { background: none; border: 0; cursor: pointer; color: var(--ink); display: grid; place-items: center; min-height: 48px; transition: background-color .2s var(--ease); }
.stepper button:hover { background: var(--ground); }
.stepper button svg { width: 16px; height: 16px; }
.stepper input { min-height: 48px; padding: 0; border: 0; border-radius: 0; text-align: center; font-weight: 700; background: none; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 860px) { .pdp { grid-template-columns: minmax(0, 1fr); } .pdp .shot { position: static; } }
@media (max-width: 420px) { .buy { grid-template-columns: minmax(0, 1fr); } .stepper { justify-self: start; } }

/* ---------- Cart ---------- */
.cart-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.lines { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.line { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto auto; gap: 12px 20px; align-items: center; padding-block: 18px; border-bottom: 1px solid var(--rule); }
.line .shot { width: 104px; }
.line .name { font: 800 1.15rem/1.2 var(--display); font-stretch: 112%; text-decoration: none; }
.line .name:hover { text-decoration: underline; }
.line .sub { color: var(--ink-soft); font-size: .95rem; }
.line .total { font-weight: 700; min-width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; }
.line .remove { background: none; border: 0; padding: 0; min-height: 44px; color: var(--ink-soft); font: 600 .9rem var(--body); text-decoration: underline; cursor: pointer; }
.line .remove:hover { color: var(--bad); }
.summary { display: grid; gap: 16px; padding: clamp(20px, 2.5vw, 32px); background: var(--paper); border-radius: var(--radius); position: sticky; top: 92px; }
.summary h2 { font-size: 1.5rem; }
.summary dl div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-bottom: 1px solid var(--rule); }
.summary dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.summary .grand { border-bottom: 0; font-size: 1.2rem; font-weight: 700; }
.ship-bar { height: 6px; border-radius: 3px; background: var(--ground); overflow: hidden; }
.ship-bar i { display: block; height: 100%; background: var(--duo-green); transition: width .4s var(--ease); }
.summary small { color: var(--ink-soft); font-size: .92rem; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: minmax(0, 1fr); } .summary { position: static; } }
@media (max-width: 600px) {
  .line { grid-template-columns: 80px minmax(0, 1fr) auto; }
  .line .shot { width: 80px; grid-row: span 2; }
  .line .stepper { grid-column: 2; justify-self: start; }
  .line .total { grid-column: 3; grid-row: 1; }
}

/* ---------- Prose pages: about, FAQ, terms, contact ---------- */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.prose { max-width: 66ch; display: grid; gap: 18px; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 26px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.prose a { font-weight: 600; color: var(--link); }
.prose a:hover { color: var(--ink); }
.aside { display: grid; gap: 20px; position: sticky; top: 92px; }
.aside h2 { font-size: 1.4rem; }
.aside .shot { aspect-ratio: 1; }
.toc { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.toc a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--rule); font-weight: 700; text-decoration: none; }
.toc a:hover { color: var(--link); }
@media (max-width: 900px) { .aside { position: static; } }

.faq-group { display: grid; gap: 0; margin-bottom: 44px; max-width: 70ch; }
.faq-group h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
details { border-bottom: 1px solid var(--rule); }
summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 60px; padding-block: 12px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.1rem;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; flex: none; width: 16px; height: 16px;
  background: linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat;
  transition: transform .3s var(--ease);
}
details[open] summary::after { transform: rotate(45deg); }
summary:hover { color: var(--link); }
details > div { padding: 0 0 20px; color: var(--ink-soft); max-width: 60ch; display: grid; gap: 10px; }
details ul { margin: 0; padding-left: 1.2em; }

.terms { counter-reset: clause; list-style: none; margin: 0; padding: 0; max-width: 70ch; border-top: 2px solid var(--ink); }
.terms li { counter-increment: clause; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 4px 12px; padding-block: 22px; border-bottom: 1px solid var(--rule); }
.terms li::before { content: counter(clause) "."; font: 800 1.2rem/1.3 var(--display); font-variant-numeric: tabular-nums; grid-row: span 2; }
.terms h2 { font-size: 1.2rem; line-height: 1.3; letter-spacing: 0; }
.terms p { color: var(--ink-soft); }

.contact-list { border-top: 2px solid var(--ink); }
.contact-list div { padding-block: 16px; border-bottom: 1px solid var(--rule); }
.contact-list dt { font-weight: 700; }
.contact-list dd { margin: 4px 0 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.contact-list dd small { display: block; color: var(--ink-soft); font-size: .95rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: #c5cbe6; padding-block: clamp(48px, 6vw, 80px) 28px; border-top: 1px solid var(--night-rule); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 36px clamp(20px, 4vw, 64px); }
.foot-brand { font: 800 clamp(2.6rem, 6vw, 5rem)/.95 var(--display); font-stretch: 125%; letter-spacing: .02em; color: var(--on-cobalt); text-transform: lowercase; }
.foot-brand + p { margin-top: 14px; max-width: 32ch; }
.site-footer h2 { font: 700 .95rem/1 var(--body); letter-spacing: 0; color: var(--on-cobalt); margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.site-footer li a:hover { color: var(--on-cobalt); text-decoration: underline; }
.legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid #2b335c; font-size: .9rem; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-grid > :first-child { grid-column: 1 / -1; } }
/* the link columns are <details> so phones can fold them; on wider screens they just look like columns */
.foot-col summary { display: block; list-style: none; cursor: default; }
.foot-col summary::-webkit-details-marker { display: none; }


@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Collections beyond the first six, and the copies that make the phone row loop, are for phones only */
@media (min-width: 721px) { .cats > .cat-extra, .cats > .cat-clone { display: none; } }

/* ---------- Phone version ---------- */
/* words that change on phones: "Shop" reads "Catalog" there */
.on-phone { display: none; }
@media (max-width: 720px) { .on-wide { display: none; } .on-phone { display: inline; } }
/* Not the desktop page squeezed: a tab bar in thumb reach, rows you swipe, and a buy bar that follows you. */
.tabbar, .buybar { display: none; }
@media (max-width: 720px) {
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--night); border-top: 1px solid var(--night-rule); view-transition-name: tabbar;
  }
  .tabbar a {
    position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 60px;
    color: #aab3d6; font-size: .7rem; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: color .2s var(--ease), transform .2s var(--ease);
  }
  .tabbar a:active { transform: scale(.94); }
  .tabbar svg { width: 24px; height: 24px; }
  .tabbar a[aria-current="page"] { color: var(--on-cobalt); }
  .tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 28%; right: 28%; height: 2px; border-radius: 2px; background: var(--on-cobalt); }
  .tabbar .cart-count { display: inline-block; min-width: 1.5em; padding: 1px 5px; margin-left: 2px; font-size: .7rem; }
  .nav .cart { display: none; }
  .site-footer { padding-bottom: 20px; }

  /* edge-to-edge swipe rows */
  .cats, .scroller, .filters {
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .cats::-webkit-scrollbar, .scroller::-webkit-scrollbar, .filters::-webkit-scrollbar { display: none; }

  /* collections become tall cards you flick through, the next one always peeking in */
  .cats { display: flex; gap: 12px; scroll-snap-type: x mandatory; }
  .cat, .cat-lead, .cat-wide, .cat-more { flex: 0 0 76%; aspect-ratio: 3 / 4; scroll-snap-align: start; }
  .cat h3, .cat-lead h3, .cat-wide h3 { font-size: 2rem; font-stretch: 112%; max-width: none; }
  .cat-wide img { left: 0; width: 100%; -webkit-mask-image: none; mask-image: none; }
  .cat-wide .cat-meta > span { max-width: none; }
  .cat-more h3 { font-size: 1.5rem; }
  /* every collection is in the row and it loops, so the "more collections" card isn't needed here */
  .cats > .cat-more { display: none; }

  .scroller { grid-auto-columns: 58%; scroll-snap-type: x mandatory; padding-bottom: 4px; }

  /* best sellers: one lead, then a tight pair of pairs */
  .frame.lead .shot { aspect-ratio: 1; }
  .section { padding-block: 56px 44px; }
  .section-head { margin-bottom: 22px; }
  h2 { font-size: 2rem; }
  .story .wrap { padding-block: 64px; }
  .story h2 { font-size: 2.3rem; }

  /* shop: one swipeable row of collection chips, controls full width */
  .filters { flex-wrap: nowrap; position: relative; scroll-snap-type: x proximity; margin-bottom: 12px; }
  .filters li { scroll-snap-align: start; }
  .tools { flex-direction: column; align-items: stretch; gap: 4px; }
  .tools .right { justify-content: space-between; }
  .tools label.sort { flex: 1; }
  .tools select { flex: 1; }

  /* product: the buy bar */
  .buybar {
    position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); z-index: 39;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px var(--gutter); background: var(--paper); border-top: 1px solid var(--rule);
    box-shadow: 0 -10px 24px -14px rgba(10, 16, 48, .35);
    transform: translateY(120%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s linear .3s;
  }
  .buybar.is-on { transform: none; visibility: visible; transition-delay: 0s; }
  .buybar > div { display: grid; min-width: 0; line-height: 1.25; }
  .buybar strong { font: 800 1rem/1.2 var(--display); font-stretch: 112%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .buybar .btn { min-height: 48px; flex: none; }
  .pdp-info h1 { font-size: 2.2rem; }

  /* cart: the summary reads as a sheet */
  .summary { margin-inline: calc(-1 * var(--gutter)); border-radius: var(--radius) var(--radius) 0 0; padding-inline: var(--gutter); }

  .page-head h1 { font-size: 2.2rem; }
  .btn { min-height: 54px; }
  .hero-cta .btn { width: 100%; }
  .hero-cta { width: 100%; }
}

/* ---------- Depth and motion: quiet on purpose ---------- */
/* Photos lift a few pixels under the pointer; the two feature photos sit on a soft shadow; the header
   gains one once the page has moved; sections rise into place once as they are first scrolled to. */
.frame .shot, .cat { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.frame:hover .shot { transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(10, 16, 48, .5); }
.cat:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(10, 16, 48, .55); }
.cat-more:hover { transform: none; box-shadow: none; }
.feature .shot { box-shadow: 0 34px 60px -42px rgba(10, 16, 48, .5); }
.btn { transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgba(10, 16, 48, .55); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.site-header { transition: box-shadow .3s var(--ease); }
.site-header.is-raised { box-shadow: 0 12px 30px -18px rgba(5, 8, 24, .85); }
.top-mark { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
@media (hover: none) { .frame:hover .shot, .cat:hover, .btn:hover { transform: none; box-shadow: none; } }

/* ---------- Launch details: loading, footer contact, cookie choice, small pages ---------- */
/* Photo frames shimmer until their photo arrives, then stand still behind it */
.shot, .cat { background-image: linear-gradient(100deg, transparent 30%, rgba(10, 16, 48, .06) 50%, transparent 70%); background-size: 250% 100%; background-repeat: no-repeat; animation: shimmer 1.5s linear infinite; }
.shot:has(> img.is-loaded), .cat:has(> img.is-loaded), .cat-more { animation: none; background-image: none; }
@keyframes shimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .shot, .cat { animation: none; } }
.form[aria-busy="true"] button[type="submit"], .signup form[aria-busy="true"] button { cursor: progress; }

.foot-contact { display: grid; gap: 2px; margin-top: 18px; font-style: normal; }
.foot-contact a { color: var(--on-cobalt); text-decoration: none; font-weight: 600; }
.foot-contact a:hover { text-decoration: underline; }
.link-btn { min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.link-btn:hover { color: var(--on-cobalt); text-decoration: underline; }


.buybar span { color: var(--ink-soft); font-size: .85rem; }

/* 404 and thank-you pages: one message, a way on */
.notice { display: grid; gap: 18px; justify-items: start; max-width: 40ch; padding-block: clamp(56px, 10vw, 120px); }
.notice .big { font: 900 clamp(5rem, 16vw, 11rem)/.8 var(--display); font-stretch: 125%; color: var(--cobalt); }
.notice h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.notice p { color: var(--ink-soft); font-size: 1.1rem; }

/* ---------- EXPERIMENT: liquid-glass header while scrolling ---------- */
/* To remove the experiment, delete from the line above to "END EXPERIMENT". Nothing else depends on it.
   At the top of a page the header is the usual solid bar. Once the page has moved it becomes a floating
   glass capsule: the page blurs and shows through it. This is a web approximation of the look, built
   with backdrop-filter; where a browser lacks that, or the visitor asks for less transparency, the
   header simply stays solid. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { transition: background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .3s var(--ease); }
  .site-header::before {
    content: ""; position: absolute; z-index: -1; inset: 7px clamp(8px, 1.6vw, 22px);
    border-radius: var(--radius); opacity: 0; transition: opacity .35s var(--ease);
    /* dark enough that the white menu text stays readable over a white page */
    background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02) 42%, rgba(255, 255, 255, .08)), rgba(10, 16, 48, .66);
    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 18px 40px -22px rgba(5, 8, 24, .75);
  }
  .site-header.is-raised { background-color: transparent; border-bottom-color: transparent; box-shadow: none; }
  .site-header.is-raised::before { opacity: 1; }
  /* the phone menu drops out of the capsule as a matching glass sheet */
  @media (max-width: 860px) {
    .site-header.is-raised .nav {
      left: clamp(8px, 1.6vw, 22px); right: clamp(8px, 1.6vw, 22px); top: calc(100% + 2px);
      border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius);
      background: rgba(10, 16, 48, .82); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    .site-header.is-raised { background-color: var(--night); border-bottom-color: var(--night-rule); }
    .site-header.is-raised::before { opacity: 0; }
  }
}
/* ---------- END EXPERIMENT ---------- */

/* ---------- Phones: lighter home page and a folded footer ---------- */
@media (max-width: 720px) {
  /* best sellers: one swipeable row of equal tiles, the next one peeking in */
  #sellers {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  #sellers::-webkit-scrollbar { display: none; }
  #sellers > .frame { flex: 0 0 62%; scroll-snap-align: start; grid-column: auto; grid-row: auto; grid-template-rows: auto auto; }
  #sellers > .frame.lead .shot { aspect-ratio: 1; min-height: 0; }
  #sellers > .frame.lead .meta .name { font-size: 1.1rem; }

  /* collections: small cards, about two and a half on screen */
  .cats { gap: 10px; }
  .cat, .cat-lead, .cat-wide, .cat-more { flex: 0 0 40%; aspect-ratio: 3 / 4; padding: 12px; gap: 6px; }
  .cat h3, .cat-lead h3, .cat-wide h3 { font-size: 1.1rem; font-stretch: 105%; }
  /* just the name, at the bottom: no frame count */
  .cat:not(.cat-more) { justify-content: flex-end; }
  .cat-meta { display: none; }

  /* footer: brand and contact on top, then Shop / Company / Help as drop-downs */
  .site-footer { padding-top: 36px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .foot-brand { font-size: 2.2rem; }
  .foot-grid > :first-child { padding-bottom: 20px; }
  .foot-col { border-top: 1px solid #2b335c; }
  .foot-col:last-child { border-bottom: 1px solid #2b335c; }
  .foot-col summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .foot-col summary h2 { margin: 0; font-size: 1rem; }
  .foot-col summary::after {
    content: ""; width: 9px; height: 9px; margin-right: 4px; border: solid var(--on-cobalt); border-width: 0 2px 2px 0;
    rotate: 45deg; translate: 0 -3px; transition: rotate .25s var(--ease), translate .25s var(--ease);
  }
  .foot-col[open] summary::after { rotate: -135deg; translate: 0 2px; }
  .foot-col ul { padding-bottom: 10px; }
  .foot-col li a { min-height: 40px; }
  .legal { margin-top: 24px; padding-top: 0; border-top: 0; font-size: .82rem; }
}

/* Phones: the clip-on feature as one compact card, photo on top and the words underneath */
@media (max-width: 720px) {
  #clip-feature { padding-block: 40px; }
  #clip-feature .wrap { gap: 0; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 50px -36px rgba(10, 16, 48, .45); padding: 0; margin-inline: var(--gutter); }
  #clip-feature .shot { aspect-ratio: 4 / 3; border-radius: 0; box-shadow: none; }
  #clip-feature .shot img { transform: scale(1.18); }
  #clip-feature .feature-copy { gap: 12px; padding: 20px 18px 22px; }
  #clip-feature h2 { font-size: 1.9rem; line-height: 1.02; }
  #clip-feature .feature-copy p { font-size: 1rem; line-height: 1.5; }
  #clip-feature .btn { width: 100%; justify-content: center; }
}

/* the small WhatsApp mark inside "Ask about this frame" */
.btn .wa-icon { width: 1.3em; height: 1.3em; flex: none; }

/* ---------- Our story: the founder's story in English and Arabic ---------- */
.founder { --ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
.founder[data-lang="en"] [lang="ar"]:not(.story-lang [lang="ar"]), .founder[data-lang="ar"] [lang="en"] { display: none; }
.founder [lang="ar"] { font-family: var(--ar); }
.founder [lang="ar"] h1, .founder [lang="ar"] h2 { font-family: var(--ar); font-stretch: normal; font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.founder [lang="ar"] p { line-height: 1.9; }

.story-hero { background: var(--night); color: var(--on-cobalt); overflow: clip; }
.story-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 6vw, 96px); align-items: center; padding-block: clamp(40px, 7vw, 110px); }
.story-hero h1 { font-size: clamp(2.4rem, 6vw, 5.2rem); line-height: .98; max-width: 14ch; margin: 10px 0 18px; }
.story-hero [lang="ar"] h1 { font-size: clamp(2.1rem, 5vw, 4.2rem); max-width: 16ch; }
.story-kicker { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; color: var(--on-cobalt-soft); }
.founder [lang="ar"] .story-kicker { letter-spacing: 0; font-size: 1rem; }
.story-lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: #c5cbe6; max-width: 40ch; }
.story-lang { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: clamp(24px, 4vw, 44px); border: 1px solid var(--night-rule); border-radius: var(--radius); }
.story-lang button { min-height: 40px; padding: 0 18px; border: 0; border-radius: calc(var(--radius) - 4px); background: none; color: #c5cbe6; font: 600 .95rem/1 var(--body); cursor: pointer; }
.story-lang button[lang="ar"] { font-family: var(--ar); font-size: 1rem; }
.story-lang button[aria-pressed="true"] { background: var(--on-cobalt); color: var(--night); }
.story-hero-photo { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
/* each photo keeps its own shape */
.story-hero-photo img, .story-photo img { width: 100%; height: auto; display: block; }

.story-chapter { padding-block: clamp(48px, 8vw, 120px); }
.story-chapter + .story-chapter { padding-top: 0; }
.story-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(28px, 7vw, 120px); align-items: center; }
.story-row.is-flipped .story-photo { order: 2; }
.story-photo { margin: 0; border-radius: 16px; overflow: hidden; justify-self: center; width: 100%; max-width: 440px; }
.story-text { max-width: 560px; }
.story-text .story-num { font: 800 .9rem/1 var(--display); letter-spacing: .12em; color: var(--cobalt); margin-bottom: 14px; }
.story-text h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.02; margin-bottom: 18px; }
.story-text p { font-size: clamp(1.08rem, 1.4vw, 1.25rem); color: var(--ink-soft); }
.story-text .story-big { font: 900 clamp(2.8rem, 6.2vw, 6.2rem)/.9 var(--display); font-stretch: 100%; color: var(--cobalt); margin-bottom: 18px; letter-spacing: -.02em; }

.story-world { background: var(--night); color: var(--on-cobalt); padding-block: clamp(56px, 9vw, 140px); }
.story-world .story-text p { color: #c5cbe6; }
.story-world .story-text .story-num { color: var(--on-cobalt-soft); }
.story-world .story-end { margin-top: 18px; font: 800 clamp(1.4rem, 2.4vw, 2rem)/1.15 var(--display); color: var(--on-cobalt); }
.story-world [lang="ar"] .story-end { font-family: var(--ar); font-weight: 700; line-height: 1.5; }
.story-world .btn { margin-top: 28px; }
.story-earth { box-shadow: 0 0 0 1px var(--night-rule), 0 40px 90px -30px rgba(63, 99, 242, .45); }

/* Phones: each chapter reads as one block, number and title first, then its photo, then the words,
   with a rule between chapters so a photo never runs into the next chapter's photo */
@media (max-width: 760px) {
  .story-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 32px 40px; }
  .story-hero-photo { max-width: 260px; justify-self: center; }
  .story-chapter { padding-block: 36px 0; }
  .story-chapter + .story-chapter { padding-top: 36px; }
  .story-chapter .wrap, .story-world .wrap { border-top: 1px solid var(--rule); padding-top: 28px; }
  .story-world { padding-block: 40px 56px; }
  .story-world .wrap { border-top: 0; padding-top: 0; }
  .story-row, .story-row.is-flipped { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  /* lift the title and the words out of their box so they can sit either side of the photo */
  .story-row .story-text, .founder[data-lang="en"] .story-row .story-text > [lang="en"], .founder[data-lang="ar"] .story-row .story-text > [lang="ar"] { display: contents; }
  .story-row .story-text .story-big { order: 1; margin-bottom: 6px; }
  .story-row .story-text .story-num { order: 2; margin-bottom: 8px; }
  .story-row .story-text h2 { order: 3; margin-bottom: 18px; font-size: 1.85rem; }
  .story-row .story-photo, .story-row.is-flipped .story-photo { order: 4; max-width: none; width: 100%; aspect-ratio: 4 / 5; margin-bottom: 20px; }
  .story-row .story-photo img { height: 100%; object-fit: cover; }
  .story-earth img { object-position: 20% 0; }
  .story-row .story-text p:not(.story-num):not(.story-big), .story-row .story-text .btn { order: 5; }
  .story-row .story-text .story-end { margin-top: 12px; }
  .story-row .story-text .btn { align-self: flex-start; margin-top: 24px; }
}