/* ==========================================================================
   Morganite Jewelery — landing page
   Palette from the brand: velvet tray brown, morganite blush, rose-gold lines.
   Every corner is square.
   ========================================================================== */

:root {
  --velvet: #221915;
  --velvet-2: #2d211c;
  --velvet-3: #3b2b24;
  --ivory: #f5ede6;
  --ivory-2: #cfc3ba;
  --morganite: #efd3c5;
  --morganite-2: #e6c2b1;
  --cocoa: #4e3127;
  --cocoa-2: #7a5446;
  --rose-1: #f2d9c4;
  --rose-2: #d3a07f;
  --rose-3: #8b5845;
  --rose: linear-gradient(115deg, var(--rose-1) 0%, var(--rose-2) 48%, var(--rose-3) 100%);
  --line: rgba(211, 160, 127, 0.28);

  /* Federo echoes the logo's wordmark and sets its motto; Tenor Sans is the text */
  --font-display: "Federo", "Segoe UI", system-ui, sans-serif;
  --font-text: "Tenor Sans", "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(20px, 4vw, 64px);
  --header-h: 84px;
  --ease: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --bar: 0px;
  --toolbar: 0px; /* the toolbar's full height: unlike --bar, it doesn't change while scrolling */
}
/* Phones: full-bleed scenes take the tall viewport (toolbar folded away), so no empty band appears
   under them as the toolbar hides; anything pinned to their bottom is lifted by the toolbar height. */
@supports (height: 100lvh) {
  :root { --bar: calc(100lvh - 100dvh); --toolbar: calc(100lvh - 100svh); }
}

*, *::before, *::after { box-sizing: border-box; }
* { border-radius: 0 !important; }

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
/* Desktop scrollbars take up width: their space stays reserved, so nothing shifts when the loader lets go of the page */
html { scrollbar-gutter: stable; scrollbar-color: var(--rose-3) var(--velvet); }
html.is-loading { overflow: hidden; background: var(--velvet); }
html.is-loading body { background: var(--velvet); }
/* Nothing of the site can show during the intro, even if a phone's toolbar leaves a gap under the loader.
   If the script never runs, the site appears when the loader's own fallback ends it. */
html.is-loading main, html.is-loading .site-header, html.is-loading .footer {
  visibility: hidden;
  animation: site-fallback 0s 10s forwards;
}
@keyframes site-fallback { to { visibility: visible; } }

body {
  margin: 0;
  background: var(--velvet);
  color: var(--ivory);
  font: 400 17px/1.65 var(--font-text);
  letter-spacing: 0.01em;
  font-synthesis: none; /* both fonts have one weight: never fake a bold */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, figure, dl, dd, address, ul { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--rose-2); color: var(--velvet); }

:focus-visible {
  outline: 1px solid var(--rose-2);
  outline-offset: 4px;
}

.skip {
  position: fixed; left: var(--gutter); top: 12px; z-index: 200;
  padding: 10px 16px; background: var(--ivory); color: var(--velvet);
  transform: translateY(-160%);
  transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }

/* Masked lines: inner span slides inside an overflow-hidden line */
.line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.line > span { display: inline-block; will-change: transform; }

.h2 {
  font: 400 clamp(46px, 6.4vw, 112px)/0.98 var(--font-display);
  letter-spacing: -0.01em;
}

/* ---------- Buttons: square, a rose-gold fill wipes across on hover ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  font: 500 13.5px/1 var(--font-text);
  letter-spacing: 0.12em;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  transition: color .55s var(--ease), border-color .55s var(--ease);
}
.btn::before {
  content: "";
  position: absolute; inset: -1px;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .65s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }

.btn--line { color: var(--ivory); border-image: var(--rose) 1; }
.btn--line::before { background: var(--rose); }
.btn--line:hover, .btn--line:focus-visible { color: var(--velvet); }

.btn--solid { color: var(--velvet); background: var(--rose); }
.btn--solid::before { background: var(--ivory); }

/* ==========================================================================
   Loader: the official logo in its own colours.
   js/main.js spells the name out, one letter at a time.
   ========================================================================== */
.loader {
  --logo: min(82vw, clamp(480px, 78vh, 1100px));
  display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  height: 100vh; height: 100lvh; /* the tall viewport: reaches under a phone's toolbar */
}
.js .loader { display: block; animation: loader-fallback 0s 10s forwards; }
.loader__panel {
  position: absolute; left: 0; right: 0; height: 50.2%;
  background: var(--velvet);
  transition: transform 1.4s var(--ease);
}
.loader__panel--top { top: 0; }
.loader__panel--bottom { bottom: 0; }
.loader__mark {
  position: absolute; top: 0; left: 0; right: 0;
  height: 100%; height: 100dvh; /* centred in the part of the screen that's visible */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--logo) * .074);
  transition: opacity .6s ease, transform 1.2s var(--ease);
  /* The logo drifts slowly towards you all through the intro, and on past you as the curtain opens */
  animation: loader-push 5s cubic-bezier(.3, .2, .4, 1) both;
}
/* The logo's own proportions, but never so small that a letter can't be read in the lines */
.loader__emblem { width: max(calc(var(--logo) * .174), 84px); height: auto; }
.loader__lines { fill: none; stroke: #8b5845; stroke-width: 35; opacity: 0; }
.loader__flash { fill: none; stroke-width: 35; opacity: 0; }
.loader__glyph {
  fill: none; stroke-width: 35;
  /* Flat ends and a low miter limit: no line of a letter can reach past the emblem's outer edge */
  stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 1.5;
  opacity: 0;
}
.loader__glyph path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.loader__glyph.is-halo { stroke: #d3a07f; stroke-width: 62; stroke-opacity: .12; }
.loader__glyph.is-glow { stroke: #e6c0a1; stroke-width: 44; stroke-opacity: .22; }
.loader__glyph.is-spark { stroke: #fff3e8; }
.loader__glyph.is-spark path { stroke-dasharray: .05 2; stroke-dashoffset: .05; }
.loader__logo { width: var(--logo); height: auto; fill: var(--rose-2); fill-rule: evenodd; }
.loader__letter, .loader__bright, .loader__tag { opacity: 0; }
/* The motto under the name, in proportion to the logo. It fades up from nothing, and browsers only repaint a fading
   text's own box, which leaves out the dots on Ë: its own layer with room above the capitals gets them painted.
   Federo, because Tenor Sans loses the dots on a capital Ë on standard screens */
.loader__tag {
  margin: calc(var(--logo) * -0.04 - 0.6em) 0 0;
  padding-top: 0.6em;
  font: 400 max(9px, calc(var(--logo) * 0.0289))/1 var(--font-display);
  letter-spacing: 0.16em;
  white-space: nowrap;
  color: var(--rose-2);
  will-change: opacity, transform;
}
/* How far along the intro is */
.loader__progress {
  position: absolute; left: 50%; bottom: 11%; translate: -50% 0;
  width: min(44vw, 300px); height: 2px;
  overflow: hidden;
  background: rgba(211, 160, 127, 0.18);
}
.loader__progress i { display: block; height: 100%; background: var(--rose); transform: scaleX(0); transform-origin: left; }
.loader.is-done .loader__mark { opacity: 0; transform: scale(1.05); }
.loader.is-done .loader__panel--top { transform: translateY(-100%); transition-delay: .22s; }
.loader.is-done .loader__panel--bottom { transform: translateY(100%); transition-delay: .22s; }

@keyframes loader-fallback { to { visibility: hidden; } }
@keyframes loader-push { from { scale: .96; } to { scale: 1; } }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center; gap: 40px;
  padding: 0 var(--gutter);
  transition: transform .7s var(--ease), background-color .5s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: rgba(34, 25, 21, 0.88);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.site-header.is-hidden { transform: translateY(calc(-100% - 72px)); }

.brand { display: flex; align-items: center; flex: none; }
.brand__logo { width: 256px; height: 53px; }

.nav { display: flex; gap: 36px; margin-left: auto; }
.nav a, .footer__nav a {
  position: relative;
  font-size: 14px; letter-spacing: 0.08em;
  padding: 6px 0;
}
.nav a::after, .footer__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--rose);
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.nav a:hover::after, .footer__nav a:hover::after,
.nav a:focus-visible::after, .footer__nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.header__call { min-height: 44px; padding: 0 20px; font-size: 12.5px; }
/* Shqip / English: hangs under the header and slides with it */
.lang {
  position: absolute; top: calc(100% + 10px); right: var(--gutter);
  display: flex; align-items: center;
  border: 1px solid rgba(245, 237, 230, 0.26);
  background: transparent;
  color: var(--ivory);
  text-shadow: 0 0 6px rgba(34, 25, 21, 0.75), 0 1px 2px rgba(34, 25, 21, 0.85);
  transition: color .4s ease, border-color .4s ease;
}
.lang button {
  position: relative;
  min-width: 32px; height: 26px;
  padding: 0 calc(8px - 0.07em) 0 calc(8px + 0.07em);
  font: 500 10.5px/1 var(--font-text); letter-spacing: 0.14em;
  color: inherit; opacity: 0.55;
  transition: opacity .3s ease;
}
.lang button[aria-pressed="true"] { opacity: 1; }
.lang button[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 5px; height: 1px;
  background: var(--rose-2);
}
.lang__sep { width: 1px; height: 10px; background: currentColor; opacity: 0.3; }
/* Over the light map the switch turns cocoa */
.lang.on-light { color: var(--cocoa); border-color: rgba(78, 49, 39, 0.35); text-shadow: none; }
.lang.on-light button[aria-pressed="true"]::after { background: var(--cocoa); }

.menu-toggle { display: none; margin-left: auto; align-items: center; gap: 12px; height: 44px; font-size: 13px; letter-spacing: 0.12em; }
.menu-toggle__bars { position: relative; width: 26px; height: 10px; }
.menu-toggle__bars i {
  position: absolute; left: 0; right: 0; height: 1px; background: var(--rose-1);
  transition: transform .5s var(--ease), top .5s var(--ease);
}
.menu-toggle__bars i:first-child { top: 0; }
.menu-toggle__bars i:last-child { top: 9px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:first-child { top: 4.5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:last-child { top: 4.5px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + 8vh) var(--gutter) 40px;
  background: var(--velvet);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease);
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu__nav { display: flex; flex-direction: column; gap: 8px; }
.menu__nav a {
  font: 400 clamp(44px, 12vw, 72px)/1.1 var(--font-display);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.menu__foot { color: var(--ivory-2); font-size: 15px; display: grid; gap: 4px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh; height: 100lvh;
  min-height: 520px;
  overflow: hidden;
  background: var(--velvet);
  --wh: min(68svh, 118vw);
  --ww: calc(var(--wh) * 0.62);
}
/* The browser holds the hero on screen while its scene plays; the track's extra height is the scene's scroll distance.
   A little over one screen: the scene plays in the first two thirds, and the finished "Quality guaranteed" holds for
   the rest, so it is seen without keeping visitors at the top for long */
.has-motion .hero { position: sticky; top: 0; }
.has-motion .hero-track::after { content: ""; display: block; height: 120vh; }

/* "Keep scrolling": a tag hanging on the bottom edge of the emblem's window while the scene plays. The arrow nods
   downwards, and the bar along its foot fills with the scene, showing there is a little more to go */
.hero__cue { display: none; }
.has-motion .hero__cue {
  position: absolute; z-index: 3;
  left: 50%; top: calc(50% + var(--wh) / 2);
  translate: -50% -50%;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px 13px;
  background: var(--velvet); color: var(--ivory);
  border: 1px solid var(--line);
  font-size: 13px; letter-spacing: 0.1em; white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
.hero__cue-arrow { width: 16px; height: 16px; flex: none; color: var(--rose-2); animation: cue-bounce 1.6s var(--ease) infinite; }
.hero__cue-bar { position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px; background: rgba(211, 160, 127, 0.2); }
.hero__cue-bar b { position: absolute; inset: 0; background: var(--rose); transform: scaleX(0); transform-origin: left; }
/* Phones: a smaller tag, set at the window's left corner so it stays clear of the seal on the right one */
@media (max-width: 820px), (orientation: landscape) and (max-height: 500px) {
  .has-motion .hero__cue { left: calc(50% - var(--ww) / 2); translate: 0 -50%; gap: 8px; padding: 8px 12px 10px; font-size: 12px; letter-spacing: 0.06em; }
  .hero__cue-arrow { width: 14px; height: 14px; }
}
@media (max-width: 360px) {
  .has-motion .hero__cue { gap: 6px; padding: 7px 10px 9px; font-size: 11px; letter-spacing: 0.03em; }
}
.hero__media { position: absolute; inset: 0; will-change: clip-path; }
.hero__picture { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.hero__video { display: block; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(34,25,21,.62) 0%, rgba(34,25,21,0) 26%),
    linear-gradient(0deg, rgba(34,25,21,.92) 0%, rgba(34,25,21,.55) 34%, rgba(34,25,21,.08) 64%);
}

.hero__copy {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: clamp(32px, 7vh, 72px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  align-items: end;
}
/* Three lines stepping to the right */
.hero__title {
  --step: 0.34em;
  grid-column: 1 / span 8;
  font: 400 clamp(48px, 6.8vw, 124px)/0.94 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ivory);
}
.hero__title .line { padding-bottom: 0.2em; margin-bottom: -0.2em; }
.hero__title .line:nth-child(2) { padding-left: var(--step); }
.hero__title .line:nth-child(3) { padding-left: calc(var(--step) * 2); }
.hero__aside { --cta-w: 400px; grid-column: 9 / span 4; padding-bottom: 1.4vw; }
/* The two buttons and the social cards share one width, so the cards sit centred under the buttons */
.hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(100%, var(--cta-w)); }
.hero__actions .btn { padding: 0 10px; }

/* Stage two: the screen closes into the emblem's window */
.hero__window, .hero__seal, .hero__quality, .hero__note { display: none; }
.has-motion .hero__window, .has-motion .hero__seal, .has-motion .hero__quality, .has-motion .hero__note { display: block; }

.hero__window {
  position: absolute; inset: 0; margin: auto;
  width: var(--ww); height: var(--wh);
  pointer-events: none;
}
.hero__window svg { width: 100%; height: 100%; overflow: visible; }
.hero__window path { stroke-dasharray: 1; stroke-dashoffset: 1; }

.hero__seal {
  position: absolute;
  width: clamp(96px, 9vw, 150px); aspect-ratio: 1;
  left: calc(50% + var(--ww) / 2); top: calc(50% + var(--wh) / 2);
  translate: -50% -50%;
  pointer-events: none;
}
.hero__seal svg { width: 100%; height: 100%; overflow: visible; }
.hero__seal-text { font: 500 15.5px var(--font-text); fill: var(--rose-1); letter-spacing: 0.1em; }

.hero__quality {
  position: absolute;
  left: var(--gutter);
  right: calc(50% + var(--ww) / 2 + 4vw);
  top: calc(50% - var(--wh) / 2);
  text-align: right;
}
.hero__quality-title {
  font: 400 clamp(38px, 4.6vw, 84px)/1 var(--font-display);
  letter-spacing: -0.01em;
}
.hero__note {
  position: absolute;
  left: calc(50% + var(--ww) / 2 + clamp(48px, 4.5vw, 75px) + 2.5vw);
  right: var(--gutter);
  bottom: calc(50% - var(--wh) / 2);
  max-width: 30ch;
  color: var(--ivory-2);
  font-size: 18px;
}

.hero__scroll {
  position: absolute; right: var(--gutter); top: 50%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  translate: 0 -50%;
  font-size: 12px; letter-spacing: 0.24em; color: var(--ivory-2);
}
.hero__scroll span { writing-mode: vertical-rl; }
.hero__scroll i {
  position: relative; width: 1px; height: 72px; overflow: hidden;
  background: rgba(245, 237, 230, 0.2);
}
.hero__scroll i::after {
  content: ""; position: absolute; left: 0; width: 1px; height: 40%; top: -40%;
  background: var(--rose-1);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue { to { top: 100%; } }

/* The logo as a small, square Instagram profile link */
.profile {
  display: inline-flex; align-items: center; gap: 16px;
  margin-top: 36px;
  padding: 10px 24px 10px 10px;
  border: 1px solid var(--line);
  transition: border-color .5s var(--ease), background-color .5s var(--ease);
}
.profile__seal { width: 52px; height: 52px; padding: 8px; flex: none; background: #1d2122; }
.profile__text { display: grid; gap: 1px; }
.profile__handle { font-size: 16px; letter-spacing: 0.02em; color: var(--ivory); }
.profile__note { font-size: 13px; letter-spacing: 0.05em; color: var(--rose-2); }

/* ==========================================================================
   Follow: Instagram, Facebook and TikTok, given real presence
   ========================================================================== */
.follow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.follow__label { font-size: 13px; letter-spacing: 0.1em; color: var(--rose-1); margin-right: 6px; }
.follow__icon {
  position: relative;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--rose-2);
  color: var(--rose-1);
  overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.follow__icon::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--rose);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.follow__icon svg { width: 22px; height: 22px; }
.follow__icon:focus-visible { color: var(--velvet); border-color: transparent; }
.follow__icon:focus-visible::before { transform: none; }
.follow--menu { margin-bottom: 18px; }

/* In the hero: centred under the buttons, larger, and shining in the site's bronze to catch the eye */
.follow--hero { justify-content: center; gap: 12px 18px; margin-top: 24px; width: min(100%, var(--cta-w)); }
.follow--hero .follow__label { flex-basis: 100%; margin: 0; text-align: center; }
.follow--hero .follow__icon {
  width: 54px; height: 54px;
  animation: card-glow 3s ease-in-out infinite;
}
.follow--hero .follow__icon svg { width: 26px; height: 26px; }
/* The sheen: a band of light crossing each card, one after the other */
.follow--hero .follow__icon::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(242, 217, 196, 0) 30%, rgba(242, 217, 196, 0.6) 50%, rgba(242, 217, 196, 0) 70%);
  transform: translateX(-110%);
  animation: card-sheen 3s ease-in-out infinite;
}
.follow--hero .follow__icon:nth-of-type(2), .follow--hero .follow__icon:nth-of-type(2)::after { animation-delay: .22s; }
.follow--hero .follow__icon:nth-of-type(3), .follow--hero .follow__icon:nth-of-type(3)::after { animation-delay: .44s; }
.follow--hero .follow__icon:focus-visible { animation: none; color: var(--velvet); }
.follow--hero .follow__icon:focus-visible::after { animation: none; opacity: 0; }
@keyframes card-glow {
  0%, 100% { border-color: var(--rose-3); box-shadow: 0 0 0 rgba(211, 160, 127, 0); }
  50% { border-color: var(--rose-2); box-shadow: 0 0 20px rgba(211, 160, 127, 0.55); }
}
@keyframes card-sheen {
  0%, 25% { transform: translateX(-110%); }
  75%, 100% { transform: translateX(110%); }
}

/* ==========================================================================
   Gallery — the pieces: the newest posts, close together, nothing moves on scroll
   ========================================================================== */
.pieces {
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--header-h) + 56px) var(--gutter) 40px;
  background: var(--velvet);
}
.pieces__intro { margin-bottom: 28px; }
.pieces__lede { margin-top: 18px; color: var(--ivory-2); max-width: 32ch; font-size: 17px; }
/* Instagram profile on its own row, Facebook and TikTok as labeled buttons beneath */
.pieces__follow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 26px; max-width: 420px; }
.pieces__follow .profile { grid-column: 1 / -1; margin-top: 0; }
.follow__chip {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 14px;
  border: 1px solid var(--rose-2);
  color: var(--rose-1);
  font-size: 14px; letter-spacing: 0.06em;
  overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.follow__chip::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--rose);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.follow__chip svg { width: 20px; height: 20px; flex: none; }
.follow__chip:focus-visible { color: var(--velvet); border-color: transparent; }
.follow__chip:focus-visible::before { transform: none; }

.mosaic {
  --cols: 2; --gap: 6px;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-flow: dense;
  /* stacked layouts: each cell a little taller than wide */
  grid-auto-rows: calc((100vw - 2 * var(--gutter) - (var(--cols) - 1) * var(--gap)) / var(--cols) * var(--ratio, 1.2));
}
/* The showroom photos are all landscape */
.mosaic--store { --ratio: 0.72; }
/* The pieces: three columns of three on every screen, uneven on purpose. Each card spans a different
   number of thirteen short rows, no two neighbours line up, and the middle column starts a step lower. */
.pieces { --bleed: var(--gutter); }
.mosaic--pieces {
  --unit: calc((100vw - 2 * var(--gap)) / 3 * var(--unit-k, 0.29));
  margin-inline: calc(var(--bleed) * -1);
  grid-template-columns: 1.14fr 0.9fr 1fr;
  grid-template-rows: repeat(13, var(--unit));
  grid-auto-rows: auto;
}
.mosaic--pieces .tile:nth-child(1) { grid-area: 1 / 1 / span 6 / span 1; }
.mosaic--pieces .tile:nth-child(2) { grid-area: 7 / 1 / span 3 / span 1; }
.mosaic--pieces .tile:nth-child(3) { grid-area: 10 / 1 / span 3 / span 1; }
.mosaic--pieces .tile:nth-child(4) { grid-area: 2 / 2 / span 3 / span 1; }
.mosaic--pieces .tile:nth-child(5) { grid-area: 5 / 2 / span 4 / span 1; }
.mosaic--pieces .tile:nth-child(6) { grid-area: 9 / 2 / span 5 / span 1; }
.mosaic--pieces .tile:nth-child(7) { grid-area: 1 / 3 / span 5 / span 1; }
.mosaic--pieces .tile:nth-child(8) { grid-area: 6 / 3 / span 4 / span 1; }
.mosaic--pieces .tile:nth-child(9) { grid-area: 10 / 3 / span 3 / span 1; }
/* Each crop is aimed at the jewelry */
.tile__btn img[src*="l01-"] { object-position: 50% 42%; }
.tile__btn img[src*="l02-"] { object-position: 50% 30%; }
.tile__btn img[src*="l03-"] { object-position: 50% 38%; }
.tile__btn img[src*="l04-"] { object-position: 50% 56%; }
.tile__btn img[src*="l05-"] { object-position: 50% 58%; }
.tile__btn img[src*="l06-"] { object-position: 50% 78%; }
.tile__btn img[src*="l07-"] { object-position: 50% 74%; }
.tile__btn img[src*="l08-"] { object-position: 50% 64%; }
/* The diamonds: the same three uneven columns and thirteen rows, with three, two and three cards. The middle
   column still starts a step lower, and its two cards are the tallest, so no two neighbours line up. */
.mosaic--diamonds .tile:nth-child(1) { grid-area: 1 / 1 / span 6 / span 1; }
.mosaic--diamonds .tile:nth-child(2) { grid-area: 7 / 1 / span 3 / span 1; }
.mosaic--diamonds .tile:nth-child(3) { grid-area: 10 / 1 / span 3 / span 1; }
.mosaic--diamonds .tile:nth-child(4) { grid-area: 2 / 2 / span 6 / span 1; }
.mosaic--diamonds .tile:nth-child(5) { grid-area: 8 / 2 / span 6 / span 1; }
.mosaic--diamonds .tile:nth-child(6) { grid-area: 1 / 3 / span 5 / span 1; }
.mosaic--diamonds .tile:nth-child(7) { grid-area: 6 / 3 / span 4 / span 1; }
.mosaic--diamonds .tile:nth-child(8) { grid-area: 10 / 3 / span 3 / span 1; }
.tile__btn img[src*="d01-"] { object-position: 46% 50%; }
.tile__btn img[src*="d02-"] { object-position: 43% 50%; }
.tile__btn img[src*="d03-"] { object-position: 48% 48%; }
.tile__btn img[src*="d04-"] { object-position: 50% 52%; }
.tile__btn img[src*="d05-"] { object-position: 49% 51%; }
.tile__btn img[src*="d06-"] { object-position: 40% 50%; }
.tile__btn img[src*="d07-"] { object-position: 50% 45%; }
.tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--velvet-2); }
.tile--lead { grid-column: span 2; grid-row: span 2; }
.tile__btn { position: relative; display: block; width: 100%; height: 100%; padding: 0; cursor: zoom-in; text-align: left; }
.tile__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.tile__btn:focus-visible { outline-offset: -4px; }
.tile__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: 1px;
  padding: 30px 14px 12px;
  background: linear-gradient(0deg, rgba(34, 25, 21, 0.85), rgba(34, 25, 21, 0));
  pointer-events: none;
}
.tile__cat { font-size: 11.5px; letter-spacing: 0.1em; color: var(--rose-1); }
.tile__name { font: 400 clamp(15px, 1.15vw, 19px)/1.25 var(--font-display); color: var(--ivory); }
.tile--lead .tile__cap { padding: 44px 20px 18px; }
.tile--lead .tile__name { font-size: clamp(19px, 1.6vw, 26px); }
/* The ninth card: a blurred photo that leads on to Instagram */
.tile__more {
  position: relative; isolation: isolate;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  overflow: hidden;
  color: var(--ivory); text-align: center;
}
.tile__more img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(10px);
  transform: scale(1.2);
  transition: transform 1.1s var(--ease-out);
}
.tile__more::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(34, 25, 21, 0.5);
  transition: background .5s var(--ease);
}
.tile__more:focus-visible { outline-offset: -4px; }
.tile__more-text { display: grid; justify-items: center; gap: clamp(2px, 0.6vw, 8px); padding: 8px; }
/* The same shine as the hero's social icons */
.tile__more-icon {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: clamp(44px, 4.6vw, 72px); aspect-ratio: 1;
  border: 1px solid var(--rose-2);
  animation: card-glow 3s ease-in-out infinite;
}
.tile__more-icon svg { width: 58%; height: 58%; }
.tile__more-icon::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(242, 217, 196, 0) 30%, rgba(242, 217, 196, 0.6) 50%, rgba(242, 217, 196, 0) 70%);
  transform: translateX(-110%);
  animation: card-sheen 3s ease-in-out infinite;
}
.tile__more-label { font: 400 clamp(18px, 2vw, 32px)/1.15 var(--font-display); }
.tile__more-handle { font-size: 13px; letter-spacing: 0.02em; color: var(--ivory-2); }
/* The three dots jump one after the other */
.tile__more-dots i { display: inline-block; font-style: normal; animation: dot-jump 1.3s ease-in-out infinite; }
.tile__more-dots i:nth-child(2) { animation-delay: .16s; }
.tile__more-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes dot-jump {
  0%, 50%, 100% { transform: translateY(0); }
  25% { transform: translateY(-0.42em); }
}

/* ==========================================================================
   Between the pieces and the showroom: a quiet divider of gold lines.
   Without motion it simply shows the finished drawing.
   ========================================================================== */
.bridge {
  display: flex; justify-content: center;
  overflow: hidden;
  padding: clamp(12px, 2.4vh, 26px) 0;
  background: var(--velvet);
}
/* On narrow screens the ends of the drawing run off the sides, so the middle stays readable */
.bridge__art { flex: none; width: clamp(560px, 70vw, 1040px); max-width: none; height: auto; overflow: visible; }
.bridge__art path {
  fill: none; stroke: url(#bridge-gold); stroke-width: 1.3; stroke-linecap: butt; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
@media (max-width: 820px) {
  .bridge__art path { stroke-width: 2; }
}

/* ==========================================================================
   Gallery — the showroom: only the store
   ========================================================================== */
.showroom {
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--header-h) + 56px) var(--gutter) 40px;
  background: var(--velvet);
}
.showroom__head { margin-bottom: 26px; }
.showroom__lede { margin-top: 16px; color: var(--ivory-2); max-width: 40ch; }

/* ==========================================================================
   Photo viewer (opens from any tile)
   ========================================================================== */
.viewer {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(22, 16, 13, 0.97);
  color: var(--ivory);
}
.viewer[open] { display: grid; place-items: center; animation: viewer-in .35s var(--ease-out); }
.viewer::backdrop { background: transparent; }
.viewer__figure { display: grid; justify-items: center; gap: 16px; margin: 0; padding: 0 76px; }
.viewer__img {
  max-width: min(100%, 1100px); max-height: calc(100svh - 170px);
  width: auto; height: auto; object-fit: contain;
}
.viewer__cap { display: grid; gap: 4px; text-align: center; font: 400 20px/1.3 var(--font-display); }
.viewer__cap span:first-child { font: 500 12px/1 var(--font-text); letter-spacing: 0.1em; color: var(--rose-2); }
.viewer__btn {
  position: absolute; display: grid; place-items: center;
  width: 50px; height: 50px;
  border: 1px solid var(--line); color: var(--ivory);
  background: rgba(34, 25, 21, 0.6);
  transition: border-color .3s ease;
}
.viewer__btn svg { width: 22px; height: 22px; }
.viewer__close { top: 18px; right: 18px; }
.viewer__prev { left: 18px; top: 50%; translate: 0 -50%; }
.viewer__next { right: 18px; top: 50%; translate: 0 -50%; }
@keyframes viewer-in { from { opacity: 0; } }

/* ==========================================================================
   Footer follow band: the networks as large cards
   ========================================================================== */
.follow-band { margin-top: clamp(20px, 4svh, 56px); }
.follow-band__title { font: 400 clamp(24px, 2.2vw, 36px)/1.1 var(--font-display); margin-bottom: 16px; }
.follow-band__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.follow-card {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center;
  padding: 18px 22px;
  background: var(--rose); color: var(--velvet);
  overflow: hidden; isolation: isolate;
}
.follow-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ivory);
  transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--ease);
}
.follow-card:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.follow-card__icon { grid-row: span 2; width: 34px; height: 34px; }
.follow-card__net { font: 400 clamp(20px, 1.6vw, 26px)/1.1 var(--font-display); }
.follow-card__handle { font-size: 13.5px; letter-spacing: 0.03em; opacity: 0.82; }

/* ==========================================================================
   Visit — a 3D map that flies in to the showroom as you scroll
   ========================================================================== */
.visit {
  position: relative;
  background: var(--morganite);
  color: var(--cocoa);
  overflow: hidden;
}
.visit ::selection { background: var(--cocoa); color: var(--morganite); }

/* The top of the map: the opening hours, fixed in place, above the trail. The header stays away while the map fills the screen */
.visit__top {
  position: absolute; z-index: 2;
  top: clamp(10px, 2svh, 20px); left: var(--gutter); right: var(--gutter);
  pointer-events: none;
}
.visit__hours {
  display: flex; flex-wrap: wrap; column-gap: 0.26em;
  font: 400 clamp(26px, 4vw, 64px)/1.08 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--cocoa);
  text-shadow: 0 0 12px rgba(243, 226, 216, 0.9);
}
.visit__hours span { white-space: nowrap; }

.visit__stage {
  position: relative;
  height: 100vh; height: 100svh; height: 100lvh;
  min-height: 520px;
  overflow: hidden;
  background: #f1dbcf;
}
/* While the map is pinned, any extra height (a phone toolbar folding away) shows the map colour */
.visit .pin-spacer { background: #f1dbcf; }
/* The map's top edge melts into the section colour: over the map's labels, under the pin,
   solid behind the place trail and hours line so labels can't collide with them */
.visit__map .maplibregl-canvas-container::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40vh; height: 40lvh;
  background: linear-gradient(180deg, var(--morganite) 0%, var(--morganite) 42%, rgba(239, 211, 197, 0.82) 62%, rgba(239, 211, 197, 0) 100%);
  pointer-events: none; z-index: 1;
}
.visit__map .maplibregl-marker { z-index: 2; }
/* .maplibregl-map (loaded later) sets position: relative; keep the map filling the stage */
.visit__map, .visit__map.maplibregl-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.visit__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.visit__map .maplibregl-canvas { outline: none; }
/* Scroll cue: only where the map actually flies */
.visit__cue { display: none; }
.has-motion .visit__cue {
  position: absolute; z-index: 2;
  left: 50%; bottom: calc(clamp(26px, 5vh, 48px) + var(--bar));
  translate: -50% 0;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--velvet); color: var(--ivory);
  font-size: 14px; letter-spacing: 0.06em; white-space: nowrap;
  pointer-events: none;
}
.visit__cue svg { width: 18px; height: 18px; flex: none; color: var(--rose-2); animation: cue-bounce 1.6s var(--ease) infinite; }
@keyframes cue-bounce { 50% { transform: translateY(4px); } }

/* The credit the map data licences require, as quiet text in the corner */
.visit__credit {
  position: absolute; z-index: 2;
  right: 6px; bottom: calc(5px + var(--bar));
  margin: 0; padding: 1px 4px;
  font-size: 10px; line-height: 1.3;
  color: var(--cocoa-2);
  background: rgba(241, 219, 207, 0.78);
}
.visit__credit a:hover, .visit__credit a:focus-visible { text-decoration: underline; }

/* Where you are on the way in */
.visit__trail {
  display: flex; flex-wrap: wrap; align-items: center;
  margin: 10px 0 0; padding: 0; list-style: none;
  font-size: 13.5px; letter-spacing: 0.08em;
}
.visit__trail li { color: rgba(78, 49, 39, 0.42); transition: color .5s ease; }
.visit__trail li + li::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 22px; height: 1px; margin: 0 12px;
  background: rgba(78, 49, 39, 0.3);
}
.visit__trail li.is-active { color: var(--cocoa); }

/* The details sit on a velvet card above the map */
.visit__card {
  position: absolute; z-index: 2;
  left: var(--gutter); bottom: calc(var(--gutter) + var(--bar));
  width: min(440px, calc(100% - 2 * var(--gutter)));
  padding: 36px 36px 32px;
  background: var(--velvet);
  color: var(--ivory);
  border-top: 1px solid transparent;
  border-image: var(--rose) 1;
}
.visit__card ::selection { background: var(--rose-2); color: var(--velvet); }
.visit__title { font: 400 clamp(40px, 3.8vw, 62px)/1 var(--font-display); letter-spacing: -0.01em; }
.visit__address { margin-top: 14px; font: 400 20px/1.35 var(--font-display); }
.visit__facts { margin-top: 24px; }
.fact {
  position: relative;
  display: grid; grid-template-columns: 6.6em 1fr; gap: 12px;
  padding: 12px 0;
}
.fact::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--line);
  transform: scaleX(var(--draw, 1));
  transform-origin: left;
}
.fact dt { font-size: 13px; letter-spacing: 0.08em; color: var(--rose-2); padding-top: 2px; }
.fact dd { font-size: 16.5px; }
.fact dd a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.fact dd a:hover, .fact dd a:focus-visible { background-size: 100% 1px; }
.visit__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.visit__actions .btn { padding: 0 12px; }

/* Map pin: the emblem and wordmark on a velvet tag, a stem, a diamond on the spot */
.pin { pointer-events: none; }
.pin__inner {
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease-out), transform .9s var(--ease-out);
}
.pin.is-on .pin__inner { opacity: 1; transform: none; }
.pin__tag {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 10px;
  background: var(--velvet);
  border-bottom: 1px solid transparent;
  border-image: var(--rose) 1;
}
.pin__emblem { width: 17px; height: 27px; }
.pin__word { width: 113px; height: 16px; }
.pin__stem { width: 1px; height: 42px; background: var(--velvet); }
.pin__dot { width: 10px; height: 10px; margin-top: -5px; background: var(--velvet); transform: rotate(45deg); }
/* The neighbours: the same sign, smaller than the showroom's */
.pin--small .pin__tag { gap: 5px; padding: 5px 8px 5px 6px; }
.pin__icon { width: 15px; height: 15px; flex: none; }
.pin__name {
  font: 400 12px/1 var(--font-display);
  white-space: nowrap;
  background: var(--rose); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pin--small .pin__stem { height: 18px; }
.pin--small .pin__dot { width: 7px; height: 7px; margin-top: -3.5px; }
/* The two places are close together: the signs lean apart, so neither hides the other's pointer */
.pin--bk .pin__tag { transform: translateX(-34px); }
.pin--kfc .pin__tag { transform: translateX(24px); }
/* Phones and tablets: the map is zoomed out further, so shorter stems keep them clear of the showroom's sign */
@media (max-width: 820px) {
  .pin--bk .pin__stem { height: 12px; }
  .pin--kfc .pin__stem { height: 6px; }
}
/* Phones held sideways: the card is on the left, so Burger King leans away from it */
@media (orientation: landscape) and (max-height: 500px) {
  .pin--bk .pin__tag { transform: translateX(12px); }
  .pin--kfc .pin__tag { transform: translateX(28px); }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--velvet);
  padding: calc(var(--header-h) + 2svh) var(--gutter) 24px;
  overflow: hidden;
}
.footer__emblem {
  width: clamp(48px, min(6vw, 9svh), 92px); height: auto;
  margin: auto auto 0;
}
.footer__emblem path { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* The wordmark's height is set in em by each screen size below; its width follows the logo's proportions */
.footer__mark {
  flex: none;
  font-size: clamp(54px, min(13vw, 24svh), 260px);
  width: min(100%, 7.04em); height: auto;
  margin: clamp(16px, 4svh, 56px) auto auto;
  fill-rule: evenodd;
}

.footer__row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  align-items: center;
  margin-top: clamp(20px, 4svh, 64px);
  padding: clamp(20px, 3.5svh, 36px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.footer__tag { grid-column: 1 / span 4; font: 400 clamp(20px, 1.7vw, 26px)/1.3 var(--font-display); }
.social { grid-column: 5 / span 4; display: grid; grid-template-columns: repeat(6, minmax(0, 56px)); gap: 10px; justify-content: center; }
.footer__nav { grid-column: 9 / span 4; display: flex; gap: 32px; justify-content: flex-end; }

.social__link {
  position: relative;
  width: 100%; aspect-ratio: 1;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--rose-1);
  overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.social__link::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--rose);
  transform: translateY(101%);
  transition: transform .6s var(--ease);
}
.social__link svg { width: 24px; height: 24px; transition: transform .6s var(--ease); }
.social__link:hover, .social__link:focus-visible { color: var(--velvet); border-color: transparent; }
.social__link:hover::before, .social__link:focus-visible::before { transform: translateY(0); }
.social__link:hover svg, .social__link:focus-visible svg { transform: scale(1.08); }
.social__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.footer__legal {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 24px;
  font-size: 13.5px; color: var(--ivory-2); letter-spacing: 0.03em;
}
.footer__legal a:hover { color: var(--rose-1); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .hero__title { grid-column: 1 / -1; }
  .hero__aside { grid-column: 1 / span 9; padding-bottom: 0; margin-top: 28px; }
  
  
  .footer__tag { grid-column: 1 / -1; margin-bottom: 28px; }
  .social { grid-column: 1 / span 6; justify-content: flex-start; }
  .footer__nav { grid-column: 7 / span 6; }
}

/* Phones and small tablets */
@media (max-width: 820px) {
  :root { --header-h: 68px; --gutter: 20px; }
  body { font-size: 16px; }

  .nav, .header__call { display: none; }
  .menu-toggle { display: inline-flex; padding: 0 2px 0 8px; }
  .brand__logo { width: 182px; height: 38px; }
  .menu__foot a { padding: 6px 0; }

  /* Hero */
  .hero { --wh: min(54svh, 128vw); }
  /* Low on the screen: just above the browser's toolbar when it shows. The toolbar already covers the home-indicator
     strip, so that inset only counts where there is no toolbar (the site saved to the home screen) */
  .hero__copy { bottom: max(calc(10px + var(--toolbar)), calc(env(safe-area-inset-bottom, 0px) + 8px)); column-gap: 0; }
  .hero__title { --step: 0.16em; font-size: clamp(38px, 11.8vw, 84px); line-height: 0.96; }
  .hero__aside { grid-column: 1 / -1; margin-top: 18px; }
  .follow--hero { margin-top: 18px; }
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero__actions .btn { padding: 0 10px; letter-spacing: 0.07em; }
  .hero__scroll { display: none; }

  .hero__quality {
    left: var(--gutter); right: var(--gutter);
    top: auto; bottom: calc(50% + var(--wh) / 2 + 18px);
    text-align: center;
  }
  .hero__quality-title { font-size: clamp(32px, 9vw, 48px); }
  .hero__quality-title .line { display: inline-block; }
  .hero__quality-title .line + .line { margin-left: 0.25em; }
  .hero__note {
    left: var(--gutter); right: var(--gutter);
    bottom: auto; top: calc(50% + var(--wh) / 2 + 58px);
    margin: 0 auto; text-align: center; font-size: 15.5px;
  }
  .hero__seal { width: 84px; }

  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  

  /* Visit: the card becomes a bottom sheet over the map */
  /* Phones: two lines stretched across the width, the hours set a little larger so both lines run the same length */
  .visit__hours { flex-direction: column; font-size: min(13vw, 64px); line-height: 1.02; }
  .visit__hours span + span { font-size: 1.13em; }
  .visit__trail { font-size: 12.5px; letter-spacing: 0.06em; }
  .visit__trail li + li::before { width: 12px; margin: 0 8px; }
  .visit__card {
    left: 10px; right: 10px; width: auto;
    bottom: calc(26px + env(safe-area-inset-bottom) + var(--bar));
    padding: 22px 20px 20px;
  }
  .visit__title { font-size: 38px; }
  .visit__address { font-size: 17px; margin-top: 10px; }
  .visit__facts { margin-top: 14px; }
  .fact { padding: 9px 0; grid-template-columns: 5.4em 1fr; }
  .fact dd { font-size: 15.5px; }
  .fact--dm { display: none; }
  .visit__actions { margin-top: 16px; }

  /* Footer */
  .footer { padding-top: calc(var(--header-h) + 3svh); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .footer__row { padding: 28px 0; }
  .footer__tag { font-size: 21px; margin-bottom: 24px; }
  .social { grid-column: 1 / -1; gap: 8px; justify-content: start; }
  .footer__nav { grid-column: 1 / -1; justify-content: flex-start; gap: 28px; margin-top: 22px; }
  .footer__nav a { padding: 10px 0; font-size: 15px; }
  .footer__legal { flex-direction: column; gap: 10px; }
}

/* Tablets in portrait (iPad mini / Air): the phone structure, with room to breathe */
@media (min-width: 600px) and (max-width: 820px) {
  :root { --gutter: 32px; }
  .brand__logo { width: 208px; height: 43px; }
  .hero__aside { --cta-w: 520px; }
  
  
  
  /* the card keeps a readable width at the bottom left, the map stays visible beside it */
  .visit__card {
    left: var(--gutter); right: auto; width: min(460px, calc(100% - 2 * var(--gutter)));
    bottom: calc(var(--gutter) + var(--bar));
    padding: 28px 28px 26px;
  }
  .visit__title { font-size: 44px; }
  .fact--dm { display: grid; }
  .footer__mark { font-size: min(15.2vw, 30svh); }
}

/* Phones held sideways: a short, wide screen. Every scene still fits exactly one screen. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --header-h: 56px; }
  
  .lang { top: calc(100% + 8px); }
  .hero__scroll { display: none; }

  /* Hero: title and text side by side */
  .hero { --wh: 62svh; }
  .hero__copy { bottom: calc(16px + var(--toolbar)); column-gap: 24px; }
  .hero__title { --step: 0.26em; grid-column: 1 / span 7; font-size: min(5.4vw, 11.5vh); }
  .hero__aside { grid-column: 8 / span 5; margin-top: 0; padding-bottom: 4px; }
  .hero__actions { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: none; }
  .hero__actions .btn { min-height: 38px; }
  .hero__quality {
    left: var(--gutter); right: calc(50% + var(--ww) / 2 + 4vw);
    top: calc(50% - var(--wh) / 2); bottom: auto; text-align: right;
  }
  .hero__quality-title { font-size: min(5vw, 11vh); }
  .hero__quality-title .line { display: block; }
  .hero__quality-title .line + .line { margin-left: 0; }
  .hero__note {
    left: calc(50% + var(--ww) / 2 + 52px); right: var(--gutter);
    top: auto; bottom: calc(50% - var(--wh) / 2);
    margin: 0; text-align: left; font-size: 13px;
  }
  .hero__seal { width: 62px; }

  
  
  
  
  
  .profile { margin-top: 12px; padding: 6px 16px 6px 6px; }
  .profile__seal { width: 40px; height: 40px; }
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  

  /* Visit: compact card on the left, map to the right */
  .visit__top { top: 6px; }
  .visit__hours { flex-direction: row; font-size: min(4.2vw, 9vh); line-height: 1.08; }
  .visit__hours span + span { font-size: 1em; }
  .visit__trail { margin-top: 4px; font-size: 12px; }
  .visit__card {
    left: var(--gutter); right: auto; width: min(400px, 48vw);
    bottom: calc(12px + var(--bar)); padding: 14px 18px 16px;
  }
  .visit__title { font-size: 26px; }
  .visit__address { font-size: 13.5px; margin-top: 6px; }
  .visit__facts { margin-top: 8px; }
  .fact { padding: 5px 0; grid-template-columns: 5.2em 1fr; }
  .fact dt { font-size: 11.5px; }
  .fact dd { font-size: 13.5px; }
  .fact--dm { display: none; }
  .visit__actions { margin-top: 10px; grid-template-columns: 1fr 1fr; }
  .visit__actions .btn { min-height: 38px; }

  /* Footer: one row under the wordmark */
  .footer { padding-top: calc(var(--header-h) + 6px); padding-bottom: 12px; }
  .footer__emblem { width: min(7vh, 30px); }
  .footer__mark { font-size: min(15.2vw, 24vh); margin-top: 6px; }
  .footer__row { margin-top: 10px; padding: 10px 0; }
  .footer__tag { grid-column: 1 / span 3; margin-bottom: 0; font-size: 15px; }
  .social { grid-column: 4 / span 5; justify-content: center; grid-template-columns: repeat(6, minmax(0, 40px)); gap: 6px; }
  .footer__nav { grid-column: 9 / span 4; justify-content: flex-end; gap: 14px; margin-top: 0; }
  .footer__nav a { font-size: 13px; padding: 6px 0; white-space: nowrap; }
  .footer__legal { flex-direction: row; padding-top: 8px; font-size: 12px; }
}
/* Narrow phones held sideways: one photo per screen, photo and caption side by side */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 820px) {
  
  
  
  
  
  .menu { padding-top: calc(var(--header-h) + 44px); flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 32px; }
  .menu__nav { flex: 1; }
  .menu__nav { gap: 4px; }
  .menu__nav a { font-size: min(9vw, 10.4vh); padding-bottom: 6px; }
  .menu__foot { align-self: flex-end; }
}

@media (max-width: 360px) {
  .site-header { gap: 12px; }
  .brand__logo { width: 150px; height: 31px; }
  .hero__actions { grid-template-columns: 1fr; }
  .visit__actions { grid-template-columns: 1fr; }
}

/* Touch screens: no hover fills that stay stuck after a tap; a quick fill while pressed instead */
@media (hover: none) {
  .btn:not(:focus-visible):hover::before { transform: scaleX(0); transform-origin: right center; }
  .btn--line:not(:focus-visible):hover { color: var(--ivory); }
  .btn:active::before { transform: scaleX(1) !important; transition-duration: .2s; }
  .btn--line:active { color: var(--velvet) !important; }
  
  
  .social__link:not(:focus-visible):hover { color: var(--rose-1); border-color: var(--line); }
  .social__link:not(:focus-visible):hover::before { transform: translateY(101%); }
  .social__link:not(:focus-visible):hover svg { transform: none; }
  .social__link:active::before { transform: translateY(0) !important; transition-duration: .2s; }
  .social__link:active { color: var(--velvet) !important; }
}
@media (hover: hover) {
  .profile:hover { border-color: var(--rose-2); background: rgba(211, 160, 127, 0.08); }
  .lang button:hover { opacity: 1; }
}

/* ==========================================================================
   Galleries, follow band, viewer across screens
   ========================================================================== */
/* Desktops and landscape tablets: each gallery is one screen */
@media (min-width: 821px) and (min-aspect-ratio: 5/4) and (min-height: 501px) {
  .pieces {
    --col-gap: clamp(28px, 3vw, 56px);
    --grid-w: min(62vw, 118svh, calc(100vw - 2 * var(--gutter) - var(--col-gap) - 260px));
    display: grid; grid-template-columns: minmax(260px, 1fr) var(--grid-w); column-gap: var(--col-gap);
    align-items: start;
    padding-top: calc(var(--header-h) + 24px);
    padding-bottom: clamp(24px, 4vh, 44px);
  }
  /* The words stay on screen while the photos, taller than one screen, pass beside them */
  .pieces__intro { position: sticky; top: calc(var(--header-h) + 40px); margin-bottom: 0; }
  .mosaic--pieces {
    --unit: calc(var(--grid-w) * 0.082);
    margin-inline: 0;
  }
  .showroom {
    height: 100vh; height: 100svh;
    display: flex; flex-direction: column;
    padding-bottom: clamp(24px, 4vh, 44px);
  }
  .showroom__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .showroom__head .h2 { grid-column: 1 / span 7; }
  .showroom__lede { grid-column: 8 / span 5; justify-self: end; margin-top: 0; }
  .mosaic--store {
    flex: 1; min-height: 0;
    grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto;
  }
  .mosaic--store .tile--lead { grid-column: 1; grid-row: 1 / span 2; }
}

/* Tablets in portrait: three columns */
@media (min-width: 600px) and (max-aspect-ratio: 5/4), (min-width: 600px) and (max-width: 820px) {
  .mosaic { --cols: 3; --gap: 8px; }
  .mosaic--store { --cols: 2; }
  .pieces__lede { font-size: 18px; }
}

/* Footer band on phones: a list of cards */
@media (max-width: 820px) {
  .follow-band__list { grid-template-columns: 1fr; gap: 8px; }
  .follow-card { padding: 14px 18px; }
  .follow-card__icon { width: 28px; height: 28px; }
  .follow-card__net { font-size: 20px; }

  .viewer__figure { padding: 0 12px; }
  .viewer__img { max-height: calc(100svh - 210px); }
  .viewer__prev, .viewer__next { top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); translate: none; }
  .viewer__prev { left: calc(50% - 60px); }
  .viewer__next { right: calc(50% - 60px); }
}
/* Short laptop screens: the emblem and the name shrink a little, so the footer still fits one screen */
@media (max-height: 800px) and (min-width: 821px) {
  .footer__emblem { width: min(5vw, 6.5svh); }
  .footer__mark { font-size: min(13vw, 17svh); margin-top: clamp(10px, 2.4svh, 24px); }
}
@media (max-height: 760px) and (min-width: 821px) {
  .follow-card { padding: 14px 20px; }
}
/* Short laptop screens: the store card nearly fills the height, so the hours and trail sit beside it (440px card + a gap) */
@media (min-height: 501px) and (max-height: 760px) and (min-width: 821px) {
  .visit__top { left: calc(var(--gutter) + 468px); }
}
/* Phones: the footer clears the language switch and still fits one screen */
@media (max-width: 820px) {
  .footer { padding-top: calc(var(--header-h) + 52px); }
  .follow-band { margin-top: 16px; }
  .follow-band__title { font-size: 22px; margin-bottom: 12px; }
  .follow-card { padding: 10px 16px; }
  .footer__row { margin-top: 16px; padding: 20px 0; }
  .footer__tag { margin-bottom: 16px; }
  .footer__nav { margin-top: 14px; }
  .footer__tag { font-size: 19px; }
  .footer__legal { flex-direction: row; justify-content: space-between; gap: 12px; padding-top: 18px; font-size: 12.5px; }
}

/* Phones held sideways: four columns, compact band */
@media (orientation: landscape) and (max-height: 500px) {
  .pieces, .showroom { padding-top: calc(var(--header-h) + 44px); padding-bottom: 20px; }
  .mosaic--pieces { --unit-k: 0.2; }
  .mosaic--store { --cols: 4; --ratio: 0.5; }
  .tile__name { font-size: 14px; }
  .follow__icon { width: 38px; height: 38px; }
  .follow-band { margin-top: 10px; }
  .follow-band__title { font-size: 18px; margin-bottom: 8px; }
  .follow-band__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .follow-card { padding: 8px 12px; column-gap: 10px; }
  .follow-card__icon { width: 22px; height: 22px; }
  .follow-card__net { font-size: 16px; }
  .follow-card__handle { font-size: 11px; }
  .viewer__img { max-height: calc(100svh - 110px); }
  .viewer__figure { padding: 0 70px; }
  .viewer__prev, .viewer__next { top: 50%; bottom: auto; translate: 0 -50%; }
  .viewer__prev { left: 12px; }
  .viewer__next { right: 12px; }
}

@media (hover: hover) {
  .follow__icon:hover, .follow__chip:hover { color: var(--velvet); border-color: transparent; }
  .follow__icon:hover::before, .follow__chip:hover::before { transform: none; }
  .follow--hero .follow__icon:hover { animation: none; color: var(--velvet); }
  .follow--hero .follow__icon:hover::after { animation: none; opacity: 0; }
  .follow-card:hover::before { transform: scaleX(1); transform-origin: left; }
  .tile__btn:hover img { transform: scale(1.04); }
  .tile__more:hover img { transform: scale(1.28); }
  .tile__more:hover::after { background: rgba(34, 25, 21, 0.36); }
  .viewer__btn:hover { border-color: var(--rose-2); }
}

/* Phones held sideways, last so they win over the phone rules above */
@media (orientation: landscape) and (max-height: 500px) {
  .has-motion .visit__cue { bottom: calc(14px + var(--bar)); padding: 7px 12px; font-size: 12px; }
  .hero, .visit__stage { min-height: 0; }
  .footer { padding-top: calc(var(--header-h) + 40px); padding-bottom: 10px; }
  .footer__mark { margin-top: 6px; font-size: min(10vw, 17vh); }
  .follow-band__title { display: none; }
  .follow-card { padding: 7px 12px; }
  .social__link { width: 36px; }
  .social { grid-template-columns: repeat(3, 36px); }
  .footer__row { margin-top: 10px; padding: 10px 0; }
  .footer__tag { grid-column: 1 / span 3; margin-bottom: 0; font-size: 15px; }
  .social { grid-column: 4 / span 5; justify-content: center; }
  .footer__nav { grid-column: 9 / span 4; justify-content: flex-end; margin-top: 0; }
  .footer__legal { padding-top: 8px; font-size: 12px; }
}

/* Wide screens: the portrait video whole and sharp on the right, the words on the dark panel beside it */
@media (min-aspect-ratio: 5/4) {
  .hero { --img-w: min(calc(100lvh * 0.73), 58vw); }
  .hero__picture { inset: 0 0 0 auto; width: var(--img-w); }
  .hero__veil { background: linear-gradient(180deg, rgba(34, 25, 21, 0.5) 0%, rgba(34, 25, 21, 0) 16%); }
  .hero__copy {
    top: var(--header-h);
    display: flex; flex-direction: column-reverse; justify-content: flex-start; align-items: flex-start;
    gap: clamp(14px, 3svh, 34px);
  }
  .hero__title { --step: 0.2em; width: 100%; font-size: min(5.8vw, 11.5svh); }
  .hero__aside { width: var(--cta-w); margin: 0; padding: 0; max-width: calc(100vw - var(--img-w) - var(--gutter) - 32px); }
  .hero__scroll { right: calc(var(--img-w) + 14px); }
}
@media (max-aspect-ratio: 5/4) {
  .hero__scroll { display: none; }
  /* bright skin behind the words: a deep fade under them, the video clear above */
  .hero__veil {
    background:
      linear-gradient(180deg, rgba(34, 25, 21, 0.92) 0%, rgba(34, 25, 21, 0.78) 8%, rgba(34, 25, 21, 0) 20%),
      linear-gradient(0deg, rgba(34, 25, 21, 0.96) 0%, rgba(34, 25, 21, 0.86) 26%, rgba(34, 25, 21, 0.5) 42%, rgba(34, 25, 21, 0) 58%);
  }
}
/* Sideways phones: the same split, packed tighter */
@media (orientation: landscape) and (max-height: 500px) {
  .hero__copy { gap: 8px; }
  .hero__title { font-size: min(4.8vw, 10svh); }
  .brand__logo { width: 164px; height: 34px; }
  .hero__actions { grid-template-columns: 1fr 1fr; }
  .hero__actions .btn { padding: 0 6px; font-size: 12px; letter-spacing: 0.04em; }
  .follow--hero { margin-top: 8px; gap: 12px; }
  .follow--hero .follow__label { display: none; }
  .follow--hero .follow__icon { width: 44px; height: 44px; }
  .follow--hero .follow__icon svg { width: 22px; height: 22px; }
}

/* Phones: small photos, no words on top. The caption shows when a photo is opened */
@media (max-width: 599px) {
  .mosaic--pieces .tile__cap { display: none; }
  .tile__more-handle { display: none; }
}

/* Small showroom photos: a short caption, so it doesn't cover the picture */
@media (max-width: 599px), (orientation: landscape) and (max-height: 500px) {
  .mosaic--store .tile:not(.tile--lead) .tile__cat { display: none; }
  .mosaic--store .tile:not(.tile--lead) .tile__cap { padding: 18px 10px 7px; }
  .mosaic--store .tile:not(.tile--lead) .tile__name { font-size: 13px; line-height: 1.2; }
}
/* Phones held sideways: the showroom's heading and text side by side, so the photos fit the screen */
@media (orientation: landscape) and (max-height: 500px) {
  .showroom__head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: end; margin-bottom: 10px; }
  .showroom__lede { margin-top: 0; max-width: none; font-size: 13px; line-height: 1.4; }
}

/* The smallest phones: tighten the hero so the title clears the header */
@media (max-width: 400px) and (max-height: 620px) {
  .hero__title { font-size: 11.4vw; }
  .hero__aside { margin-top: 14px; }
  .follow--hero { margin-top: 14px; }
  .follow--hero .follow__label { display: none; }
}

/* The showroom follows straight on from the divider. A link to it still stops clear of the header */
.showroom { padding-top: clamp(12px, 2.4vh, 24px); scroll-margin-top: calc(var(--header-h) + 16px); }

/* Phones with little height, such as iPhones with Safari's bar showing: the card drops what's already said elsewhere
   (the hours are large above it, and the call button is in it), so the map keeps room for its signs */
@media (max-width: 820px) and (max-height: 760px) and (orientation: portrait) {
  .visit__card .fact { display: none; }
  .visit__actions { margin-top: 16px; }
}
/* The shortest phones: the hours and the card ease off too */
@media (max-width: 820px) and (max-height: 600px) and (orientation: portrait) {
  .visit__hours { font-size: min(9.5vw, 40px); }
  .visit__card { padding-top: 16px; padding-bottom: 16px; }
  .visit__title { font-size: 30px; }
  .visit__actions { margin-top: 10px; }
}
/* Narrow phones: Burger King's sign leans less, so it stays on screen */
@media (max-width: 400px) {
  .pin--bk .pin__tag { transform: translateX(-20px); }
}

/* ==========================================================================
   Our story — the years since 1993, over a living backdrop
   ========================================================================== */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.story {
  position: relative;
  isolation: isolate;
  padding: calc(var(--header-h) + clamp(36px, 6vh, 80px)) var(--gutter) clamp(64px, 10vh, 120px);
  background: var(--velvet);
}

/* Backdrop: the sky inside it sticks to the screen for as long as the section lasts. Sticky keeps it within the
   section on its own, so nothing around it needs clipping; containment keeps its repaints to itself. */
.story__backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.story__sky {
  position: sticky; top: 0;
  height: 100vh; height: 100lvh;
  overflow: hidden;
  contain: layout paint;
}
/* Soft top and bottom edges: the backdrop melts into the hero above and the gallery below */
.story__sky::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--velvet) 0%, rgba(34, 25, 21, 0) 16%, rgba(34, 25, 21, 0) 80%, var(--velvet) 100%);
}

/* Glows: large, slow pools of warm light */
.story__drift { position: absolute; width: 78vmax; aspect-ratio: 1; }
.story__drift--a { left: -30vmax; top: -24vmax; }
.story__drift--b { right: -34vmax; top: 12%; }
.story__drift--c { left: 18%; bottom: -46vmax; }
.story__glow { position: absolute; inset: 0; }
.story__drift--a .story__glow {
  background: radial-gradient(closest-side, rgba(211, 160, 127, 0.24), rgba(211, 160, 127, 0.08) 48%, rgba(211, 160, 127, 0) 100%);
  animation: glow-a 26s ease-in-out infinite alternate;
}
.story__drift--b .story__glow {
  background: radial-gradient(closest-side, rgba(239, 211, 197, 0.15), rgba(239, 211, 197, 0.05) 50%, rgba(239, 211, 197, 0) 100%);
  animation: glow-b 31s ease-in-out infinite alternate;
}
.story__drift--c .story__glow {
  background: radial-gradient(closest-side, rgba(160, 106, 82, 0.34), rgba(139, 88, 69, 0.1) 52%, rgba(139, 88, 69, 0) 100%);
  animation: glow-c 23s ease-in-out infinite alternate;
}
@keyframes glow-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(14vw, 8vh, 0) scale(1.14); } 100% { transform: translate3d(4vw, 22vh, 0) scale(0.92); } }
@keyframes glow-b { 0% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-16vw, 14vh, 0) scale(0.9); } 100% { transform: translate3d(-6vw, -10vh, 0) scale(1.12); } }
@keyframes glow-c { 0% { transform: translate3d(0, 0, 0) scale(0.95); } 50% { transform: translate3d(-18vw, -10vh, 0) scale(1.1); } 100% { transform: translate3d(12vw, -4vh, 0) scale(1); } }

/* Facets: the emblem's lines tiled into a lattice. A pool of light wanders over it and lights the lines it passes. */
.story__facets { position: absolute; left: 0; top: -10vh; width: 100vw; height: 120vh; --lx: 28vw; --ly: 24vh; }
.story__lattice {
  position: absolute; left: 0; top: 0;
  width: 100vw; height: 120vh;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 100'%3E%3Cpath d='M0 0H62V100H0ZM31 0V100M0 50H62M0 0L31 50L62 0M18.2 29.3L0 50M43.8 29.3L62 50M0 50L31 100L62 50M31 50L0 100M31 50L62 100' fill='none' stroke='%23d3a07f' stroke-width='.4'/%3E%3C/svg%3E") 50% 0 / 124px 200px;
  opacity: 0.075;
}
.story__lens {
  position: absolute; left: 0; top: 0;
  width: 64vmax; height: 64vmax;
  overflow: hidden;
  background: radial-gradient(closest-side, rgba(242, 217, 196, 0.09), rgba(242, 217, 196, 0) 100%);
  -webkit-mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.6) 38%, rgba(0, 0, 0, 0) 100%);
          mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.6) 38%, rgba(0, 0, 0, 0) 100%);
  transform: translate3d(var(--lx), var(--ly), 0);
  will-change: transform;
}
.story__lens .story__lattice {
  opacity: 0.62;
  transform: translate3d(calc(var(--lx) * -1), calc(var(--ly) * -1), 0);
  will-change: transform;
}
/* Until a pointer takes over, the light roams on its own; the lattice inside the lens moves the opposite way so the lines stay put */
.story:not(.is-tracking) .story__lens { animation: lens-roam 34s ease-in-out infinite; }
.story:not(.is-tracking) .story__lens .story__lattice { animation: lens-roam-inv 34s ease-in-out infinite; }
@keyframes lens-roam {
  0%, 100% { transform: translate3d(-8vw, 4vh, 0); }
  25% { transform: translate3d(46vw, 14vh, 0); }
  50% { transform: translate3d(64vw, 56vh, 0); }
  75% { transform: translate3d(6vw, 62vh, 0); }
}
@keyframes lens-roam-inv {
  0%, 100% { transform: translate3d(8vw, -4vh, 0); }
  25% { transform: translate3d(-46vw, -14vh, 0); }
  50% { transform: translate3d(-64vw, -56vh, 0); }
  75% { transform: translate3d(-6vw, -62vh, 0); }
}

/* Glints: four-point stars that catch the light and fade */
.story__sparks i {
  position: absolute; left: var(--x); top: var(--y);
  width: calc(20px * var(--s)); aspect-ratio: 1;
  opacity: 0;
  animation: glint var(--t) ease-in-out var(--d) infinite;
}
/* Phones: half the glints, so the backdrop stays light */
@media (max-width: 820px) {
  .story__sparks i:nth-child(even) { display: none; }
}
.story__sparks i::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, #fff7f0, var(--rose-1) 40%, var(--rose-2));
  clip-path: polygon(50% 0, 56.5% 43.5%, 100% 50%, 56.5% 56.5%, 50% 100%, 43.5% 56.5%, 0 50%, 43.5% 43.5%);
}
.story__sparks i::after {
  content: ""; position: absolute; inset: -110%;
  background: radial-gradient(closest-side, rgba(242, 217, 196, 0.3), rgba(242, 217, 196, 0));
}
@keyframes glint {
  0%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  38% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  52% { opacity: 1; transform: scale(1) rotate(45deg); }
  64% { opacity: 0.7; transform: scale(0.75) rotate(70deg); }
  80% { opacity: 0; transform: scale(0.2) rotate(90deg); }
}
/* Nothing in the backdrop runs while the story is off screen */
.story__sky *, .story__sky *::before, .story__sky *::after { animation-play-state: paused; }
.story.is-awake .story__sky *, .story.is-awake .story__sky *::before, .story.is-awake .story__sky *::after { animation-play-state: running; }
/* Without scripts (no wake-up call), let it run */
html:not(.js) .story__sky * { animation-play-state: running; }

/* ---------- Head ---------- */
.story__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  align-items: end;
  margin-bottom: clamp(36px, 6vh, 72px);
}
.story__eyebrow {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: clamp(14px, 2.4vh, 26px);
  font-size: 13px; letter-spacing: 0.16em; color: var(--rose-1);
}
.story__eyebrow::before { content: ""; width: 56px; height: 1px; background: var(--rose); flex: none; }
.story__title { grid-column: 1 / span 7; font-size: clamp(44px, 5.6vw, 96px); }
.story__sub {
  grid-column: 8 / span 5;
  padding-bottom: 0.5em;
  font: 400 clamp(18px, 1.45vw, 24px)/1.35 var(--font-display);
  color: var(--ivory);
  text-wrap: balance;
}
/* Gradient text sits on the inner element only: the scroll animations move its parent, which keeps Safari from
   flickering gradient text that is itself being animated */
.story__brand, .chapter__year > span, .odo__strip > span, .pillar__index {
  background: var(--rose);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- Chapters, with the year dial ---------- */
.story__chapters { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.story__dial {
  grid-column: 1 / span 5;
  position: sticky; top: max(calc(var(--header-h) + 40px), 26vh);
  align-self: start;
}
.odo {
  display: flex;
  font: 400 clamp(80px, 9vw, 156px)/1 var(--font-display);
  letter-spacing: 0;
  margin-left: -0.04em;
}
/* Each slot keeps one width, the widest digit it ever shows (set by the script), so only the digits roll and nothing
   beside them moves */
.odo__slot { display: block; width: 0.66em; height: 1em; overflow: hidden; }
.odo__strip {
  display: flex; flex-direction: column; align-items: center;
  transform: translateY(calc(var(--d, 0) * -10%));
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.odo__strip > span { display: block; flex: none; width: max-content; height: 1em; }
.story__rail {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 2.5em; /* about the dial's width */
  font-size: clamp(80px, 9vw, 156px);
  margin: 26px 0 0; padding: 0; list-style: none;
}
.story__rail li {
  position: relative;
  padding-top: 14px;
  font: 400 13px/1 var(--font-text); letter-spacing: 0.14em;
  color: rgba(245, 237, 230, 0.38);
  transition: color .6s ease;
}
.story__rail li::before {
  content: ""; position: absolute; left: 0; right: 6px; top: 0; height: 1px;
  background: rgba(245, 237, 230, 0.16);
}
.story__rail li::after {
  content: ""; position: absolute; left: 0; right: 6px; top: 0; height: 1px;
  background: var(--rose);
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease);
}
.story__rail li.is-active { color: var(--rose-1); }
.story__rail li.is-active::after { transform: scaleX(1); }

.chapters {
  grid-column: 7 / span 6;
  position: relative;
  margin: 0; padding: 0; list-style: none;
  --progress: 1;
}
/* The thread the chapters hang on, filling as you read */
.chapters::before, .chapters::after {
  content: ""; position: absolute; left: 0; top: 0.55em; bottom: 0; width: 1px;
}
.chapters::before { background: var(--line); }
.chapters::after {
  background: linear-gradient(180deg, var(--rose-1), var(--rose-2) 60%, var(--rose-3));
  transform: scaleY(var(--progress)); transform-origin: top;
}
.chapter {
  position: relative;
  padding: 0 0 clamp(44px, 9vh, 100px) clamp(32px, 3vw, 52px);
}
.chapter:last-child { padding-bottom: 0; }
.chapter::before {
  content: ""; position: absolute; z-index: 1;
  left: -6px; top: 3px;
  width: 11px; height: 11px;
  background: var(--velvet);
  border: 1px solid var(--rose-2);
  transform: rotate(45deg);
  transition: background-color .6s ease, box-shadow .6s ease;
}
.chapter.is-active::before { background: var(--rose-1); box-shadow: 0 0 0 5px rgba(211, 160, 127, 0.14), 0 0 22px rgba(242, 217, 196, 0.55); }
.chapter__year { display: inline-block; font: 400 14px/1.2 var(--font-text); letter-spacing: 0.22em; }
.chapter__title {
  margin: 10px 0 16px;
  font: 400 clamp(24px, 2.1vw, 34px)/1.1 var(--font-display);
  letter-spacing: -0.005em;
}
.chapter__body p { max-width: 46ch; color: var(--ivory-2); font-size: 16.5px; line-height: 1.7; }
.chapter__body p + p { margin-top: 1em; }

/* ---------- Vision ---------- */
.story__vision {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  align-items: start;
  margin-top: clamp(52px, 8vh, 100px);
  padding-top: clamp(28px, 4vh, 44px);
  border-top: 1px solid var(--line);
}
.story__h3 { grid-column: 1 / span 6; font: 400 clamp(32px, 3.4vw, 58px)/1.04 var(--font-display); letter-spacing: -0.01em; }
.story__lead { grid-column: 7 / span 6; padding-top: 0.4em; font-size: clamp(16.5px, 1.2vw, 20px); line-height: 1.65; color: var(--ivory); max-width: 44ch; }
.pillars {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin: clamp(28px, 4.5vh, 52px) 0 0;
}
.pillar {
  position: relative;
  display: grid; align-content: space-between; gap: 22px;
  min-height: clamp(130px, 16vh, 180px);
  padding: 22px 22px 20px;
  background: rgba(45, 33, 28, 0.62);
  border: 1px solid var(--line);
  overflow: hidden; isolation: isolate;
  transition: border-color .6s var(--ease), background-color .6s var(--ease);
}
/* A sheen passes over the card when you point at it */
.pillar::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; z-index: -1;
  background: linear-gradient(100deg, rgba(242, 217, 196, 0) 0%, rgba(242, 217, 196, 0.1) 50%, rgba(242, 217, 196, 0) 100%);
  transform: translateX(-110%) skewX(-16deg);
  transition: transform 1.1s var(--ease);
}
.pillar__index { position: absolute; top: 20px; right: 20px; font-size: 13px; letter-spacing: 0.16em; }
.pillar__icon { width: 46px; height: 46px; overflow: visible; }
.pillar__icon [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pillar__name { font: 400 clamp(18px, 1.4vw, 24px)/1.2 var(--font-display); max-width: 14ch; }

/* ---------- Today ---------- */
.story__today {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px;
  align-items: end;
  margin-top: clamp(52px, 8vh, 96px);
}
.story__statement {
  grid-column: 1 / span 8;
  font: 400 clamp(22px, 2.2vw, 38px)/1.2 var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.story__belief {
  grid-column: 9 / span 4;
  position: relative;
  padding-left: 22px;
  color: var(--ivory-2); font-size: 16px;
}
.story__belief::before { content: ""; position: absolute; left: 0; top: 0.35em; bottom: 0.35em; width: 1px; background: var(--rose); }

/* ---------- Motto ---------- */
.motto {
  margin: clamp(60px, 10vh, 120px) auto 0;
  max-width: 1120px;
  display: grid; justify-items: center;
  text-align: center;
}
/* The whole logo closes the story: emblem, wordmark and the line beneath, in the official layout, always shown whole.
   The emblem and wordmark carry the site's bronze gradients; the line is the lighter rose of the header's tagline */
.story__sign {
  display: flex; justify-content: center;
  margin-top: clamp(56px, 9vh, 110px);
  padding-top: clamp(40px, 6vh, 72px);
  border-top: 1px solid var(--line);
}
.story__logo { width: clamp(240px, 26vw, 420px); height: auto; overflow: visible; }
.story__logo-tag { font-family: var(--font-display); font-size: 82px; fill: var(--rose-2); }

.motto__text {
  font: 400 clamp(26px, 3.2vw, 54px)/1.14 var(--font-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* Rose gold fills the words line after line, over a faint ivory */
/* Paragraphs written in as you scroll: faint ivory beneath, the lit colour runs through the lines in reading order
   (an inline element's background runs on from line to line) with a soft leading edge. Without motion it is fully lit. */
.fill {
  --fill: 100%;
  --on: var(--ivory);
  --off: rgba(245, 237, 230, 0.17);
  background:
    linear-gradient(90deg, var(--on) calc(100% - 3em), rgba(245, 237, 230, 0) 100%) 0 0 / calc(var(--fill) + 3em) 100% no-repeat,
    linear-gradient(var(--off), var(--off));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.chapter__body .fill, .story__belief .fill { --on: var(--ivory-2); }
.motto__fill {
  --fill: 100%;
  background:
    linear-gradient(90deg, var(--rose-1), var(--rose-2)) 0 0 / var(--fill) 100% no-repeat,
    linear-gradient(rgba(245, 237, 230, 0.2), rgba(245, 237, 230, 0.2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- Story on tablets and phones ---------- */
@media (max-width: 1080px) {
  .story__dial { grid-column: 1 / span 5; }
  .chapters { grid-column: 6 / span 7; }
  .story__title { grid-column: 1 / -1; }
  .story__sub { grid-column: 1 / span 9; margin-top: 22px; padding-bottom: 0; }
}
@media (max-width: 820px) {
  .story { padding-top: calc(var(--header-h) + 56px); padding-bottom: 48px; }
  .story__head { margin-bottom: 36px; }
  .story__title { font-size: clamp(40px, 11.5vw, 60px); }
  .story__sub { grid-column: 1 / -1; font-size: clamp(17px, 4.6vw, 21px); }

  .story__dial { display: none; }
  .chapters { grid-column: 1 / -1; }
  .chapters::before, .chapters::after { top: 0.6em; }
  .chapter { padding: 0 0 40px 28px; }
  .chapter::before { top: 14px; }
  .chapter__year { font: 400 clamp(34px, 9.6vw, 50px)/1 var(--font-display); letter-spacing: 0; }
  .chapter__title { margin: 6px 0 12px; font-size: clamp(21px, 5.6vw, 27px); }
  .chapter__body p { font-size: 15.5px; line-height: 1.65; }

  .story__vision { margin-top: 52px; padding-top: 28px; row-gap: 14px; }
  .story__h3, .story__lead { grid-column: 1 / -1; }
  .story__h3 { font-size: clamp(30px, 8.4vw, 42px); }
  .story__lead { padding-top: 0; font-size: 16px; }
  .pillars { grid-template-columns: 1fr; gap: 8px; margin: 18px 0 12px; }
  .pillar { grid-template-columns: auto 1fr; align-items: center; gap: 14px; min-height: 0; padding: 14px 16px; }
  .pillar__icon { width: 36px; height: 36px; }
  .pillar__index { top: 50%; right: 18px; translate: 0 -50%; }
  .pillar__name { font-size: 17px; padding-right: 32px; max-width: none; }

  .story__today { margin-top: 52px; row-gap: 16px; }
  .story__statement, .story__belief { grid-column: 1 / -1; }
  .story__statement { font-size: clamp(21px, 5.8vw, 28px); }
  .story__belief { font-size: 15.5px; }

  .motto { margin-top: 64px; }
  .motto__text { font-size: clamp(23px, 6.4vw, 32px); }
  .story__sign { margin-top: 48px; padding-top: 40px; }
  .story__logo { width: min(74vw, 290px); }
}
/* Portrait tablets: the three lines of the range side by side again */
@media (min-width: 600px) and (max-width: 820px) {
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pillar { grid-template-columns: 1fr; align-items: start; gap: 28px; padding: 22px 20px; }
  .pillar__index { top: 22px; right: 20px; translate: none; }
  .pillar__name { padding-right: 0; font-size: 18px; }
}
/* Phones held sideways */
@media (orientation: landscape) and (max-height: 500px) {
  .story { padding-top: calc(var(--header-h) + 56px); }
  .story__dial { top: calc(var(--header-h) + 24px); }
  .odo, .story__rail { font-size: min(9vw, 28vh); }
  .chapter { padding-bottom: 90px; }
  .pillar { min-height: 0; gap: 22px; padding: 20px; }
}

/* ==========================================================================
   Our story: the card after the showroom, and the dialog it opens
   ========================================================================== */
.story-entry {
  padding: clamp(36px, 7vh, 88px) var(--gutter) clamp(48px, 9vh, 110px);
  background: var(--velvet);
}
.story-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto;
  gap: 22px 40px;
  width: 100%; min-height: clamp(250px, 36vh, 400px);
  padding: clamp(24px, 3.4vw, 56px);
  text-align: left; color: var(--ivory);
  background: var(--velvet-2);
  border: 1px solid transparent; border-image: var(--rose) 1;
}
.story-card:focus-visible { outline-offset: 4px; }
/* The story's own backdrop in miniature: warm light over the emblem's lattice */
.story-card__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 95% at 88% 100%, rgba(211, 160, 127, 0.24), rgba(211, 160, 127, 0) 70%),
    radial-gradient(ellipse 45% 80% at 8% 0%, rgba(239, 211, 197, 0.09), rgba(239, 211, 197, 0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 100'%3E%3Cpath d='M0 0H62V100H0ZM31 0V100M0 50H62M0 0L31 50L62 0M18.2 29.3L0 50M43.8 29.3L62 50M0 50L31 100L62 50M31 50L0 100M31 50L62 100' fill='none' stroke='%23d3a07f' stroke-opacity='.16' stroke-width='.4'/%3E%3C/svg%3E") 50% 50% / 124px 200px;
  transition: transform 1.4s var(--ease-out);
}
.story-card__text { grid-column: 1; grid-row: 1; align-self: start; }
.story-card__eyebrow { display: flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: 0.16em; color: var(--rose-1); }
.story-card__eyebrow::before { content: ""; width: 44px; height: 1px; background: var(--rose); flex: none; }
.story-card__title { display: block; margin-top: clamp(10px, 1.6vh, 18px); font: 400 clamp(38px, 4.6vw, 76px)/1 var(--font-display); letter-spacing: -0.01em; }
.story-card__sub { display: block; margin-top: 14px; max-width: 36ch; font: 400 clamp(16px, 1.25vw, 20px)/1.4 var(--font-display); color: var(--ivory-2); }
.story-card__years { grid-column: 1; grid-row: 2; display: flex; max-width: 380px; }
.story-card__years span {
  flex: 1; padding-top: 10px;
  border-top: 1px solid rgba(245, 237, 230, 0.16);
  font-size: 12.5px; letter-spacing: 0.16em; color: rgba(245, 237, 230, 0.55);
}
.story-card__years span:first-child { border-top-color: var(--rose-2); color: var(--rose-1); }
.story-card__open { grid-column: 2; grid-row: 1 / span 2; align-self: end; display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* The "+": a square that pulses a ring of light and turns now and then, catching the eye like a stone */
.story-card__plus {
  position: relative; display: block;
  width: clamp(64px, 6vw, 92px); aspect-ratio: 1;
  border: 1px solid var(--rose-2);
  background: rgba(34, 25, 21, 0.45);
  animation: plus-ring 2.6s ease-out infinite, plus-turn 5.2s var(--ease) infinite;
  transition: transform 0.9s var(--ease), background-color 0.5s ease, border-color 0.5s ease;
}
.story-card__plus i {
  position: absolute; left: 50%; top: 50%;
  width: 38%; height: 1.5px;
  background: var(--rose-1);
  translate: -50% -50%;
  transition: background-color 0.5s ease;
}
.story-card__plus i:last-child { rotate: 90deg; }
.story-card__cta { font-size: 12.5px; letter-spacing: 0.16em; color: var(--rose-1); white-space: nowrap; }
@keyframes plus-ring {
  0% { box-shadow: 0 0 0 0 rgba(211, 160, 127, 0.5); }
  70%, 100% { box-shadow: 0 0 0 18px rgba(211, 160, 127, 0); }
}
/* A quarter turn: the square passes through a diamond and lands as it began */
@keyframes plus-turn { 0%, 62% { rotate: 0deg; } 82%, 100% { rotate: 90deg; } }
/* Pressed: the + turns into a ×, the same × that closes the story */
.story-card.is-opening .story-card__plus { animation: none; transform: rotate(45deg) scale(1.08); background: var(--rose-2); }
.story-card.is-opening .story-card__plus i { background: var(--velvet); }
@media (hover: hover) {
  .story-card:hover .story-card__bg { transform: scale(1.05); }
  .story-card:hover .story-card__plus { background: var(--rose-2); border-color: var(--rose-1); }
  .story-card:hover .story-card__plus i { background: var(--velvet); }
}

/* The dialog: full screen, growing out of the card's rectangle (set by the script) to fill it */
.story-dialog {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--velvet); color: var(--ivory);
  overflow: hidden;
  clip-path: var(--from, inset(50% 50% 50% 50%));
  /* It fades in over the card as it starts to grow, so the card seems to open rather than vanish */
  opacity: 0;
  transition: clip-path 1.25s var(--ease), opacity 0.35s ease;
}
.story-dialog[open] { display: block; }
.story-dialog.is-open { clip-path: inset(0px 0px 0px 0px); opacity: 1; }
/* Closing answers at once (a quick start, a soft landing) and is shorter than opening; in its last moments it fades,
   so it settles into the card itself instead of landing as a dark box and switching over */
.story-dialog.is-closing {
  transition: clip-path 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease 0.45s;
}
.story-dialog.is-closing .story-dialog__scroller { transition: opacity 0.2s ease, transform 0.3s ease; }
.story-dialog.is-closing .story-dialog__close { transition: opacity 0.15s ease, transform 0.3s ease; }
.story-dialog.is-placing { transition: none; }
.story-dialog::backdrop { background: rgba(22, 16, 13, 0); transition: background-color 1s ease; }
.story-dialog.is-open::backdrop { background: rgba(22, 16, 13, 0.55); }
.story-dialog.is-closing::backdrop { transition-duration: 0.7s; }
/* The story scrolls in here, and only fades up once the dialog has nearly filled the screen */
.story-dialog__scroller {
  position: absolute; inset: 0;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--rose-3) var(--velvet);
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.35s ease, transform 0.45s ease;
}
.story-dialog.is-open .story-dialog__scroller {
  opacity: 1; transform: none;
  transition: opacity 1s ease 0.6s, transform 1.3s var(--ease-out) 0.55s;
}
.story-dialog .story { padding-top: clamp(84px, 13vh, 140px); }
.story-dialog__close {
  position: absolute; z-index: 3;
  top: clamp(14px, 2.4vh, 26px); right: var(--gutter);
  width: 52px; height: 52px;
  border: 1px solid var(--rose-2);
  background: var(--velvet);
  opacity: 0; transform: rotate(-90deg) scale(0.6);
  transition: opacity 0.3s ease, transform 0.5s var(--ease), background-color 0.4s ease;
}
.story-dialog.is-open .story-dialog__close {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease 0.9s, transform 1s var(--ease) 0.8s, background-color 0.4s ease;
}
.story-dialog__close i { position: absolute; left: 50%; top: 50%; width: 22px; height: 1.5px; background: var(--rose-1); translate: -50% -50%; rotate: 45deg; }
.story-dialog__close i:last-child { rotate: -45deg; }
@media (hover: hover) {
  .story-dialog__close:hover { background: var(--rose-2); }
  .story-dialog__close:hover i { background: var(--velvet); }
}
/* Without smooth scrolling (reduced motion) the page behind still mustn't move */
html.story-open { overflow: hidden; }

@media (max-width: 820px) {
  .story-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: 0; gap: 20px; padding: 24px 20px 20px; }
  .story-card__title { font-size: clamp(34px, 9.6vw, 48px); }
  .story-card__sub { font-size: 16px; }
  .story-card__years { grid-row: auto; max-width: none; }
  .story-card__open { grid-column: 1; grid-row: auto; align-self: stretch; flex-direction: row-reverse; justify-content: space-between; }
  .story-card__plus { width: 58px; }
  .story-dialog .story { padding-top: 84px; }
  .story-dialog__close { width: 46px; height: 46px; }
}

/* "Our story" makes four links: narrow desktops and phones held sideways keep them on one line beside the logo */
.nav a { white-space: nowrap; }
@media (min-width: 821px) and (max-width: 1100px) {
  .site-header { gap: 24px; }
  .nav { gap: 22px; }
  .nav a { font-size: 13px; letter-spacing: 0.05em; }
  .header__call { padding: 0 14px; letter-spacing: 0.08em; }
}
@media (min-width: 821px) and (max-width: 900px) {
  .brand__logo { width: 210px; height: 43px; }
}

@media (hover: hover) {
  .pillar:hover { border-color: rgba(211, 160, 127, 0.6); background-color: rgba(59, 43, 36, 0.7); }
  .pillar:hover::after { transform: translateX(230%) skewX(-16deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* The story's backdrop holds still: the light rests in one place, a few glints stay lit */
  .story__sky *, .story__sky *::before, .story__sky *::after { animation: none !important; }
  .story__sparks i { opacity: 0.45; transform: scale(0.6) rotate(45deg); }
  .story__sparks i:nth-child(3n) { opacity: 0; }
}

/* ==========================================================================
   Reduced motion: everything is laid out flat, nothing scrubs
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .loader { display: none; }
  html.is-loading { overflow: auto; }
  html.is-loading main, html.is-loading .site-header, html.is-loading .footer { visibility: visible; animation: none; }
  .hero__scroll i::after { animation: none; }
  .follow--hero .follow__icon { animation: none; border-color: var(--rose-2); box-shadow: 0 0 14px rgba(211, 160, 127, 0.4); }
  .follow--hero .follow__icon::after { animation: none; }
  .tile__more-icon, .tile__more-icon::after, .tile__more-dots i { animation: none; }
  .story-card__plus { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}