/* ==============================================================
   Nino's Candle Atelier — 2026
   01  Tokens
   02  Base
   03  Typography utilities
   04  Buttons, links, arrows
   05  Navigation + sheets
   06  Hero
   09  Cinematic
   11  How it works
   11b Privacy + terms
   12  Footer
   13  Toast
   14  Motion system
   15  Responsive
   16  Commerce (catalogue, product detail)
   17  Browse overlay
   19  Contact
   ============================================================== */

/* ------------------------------------------------ 01 Tokens --- */
:root {
  /* palette — read off the logo: espresso script, bronze wreath,
     champagne highlights, cream paper */
  --white:       #FFFFFF;
  --espresso:    #302522;
  --bronze:      #8A5A2B;
  --gold:        #B68858;
  --champagne:   #E7C79B;
  --cream:       #F3E7DA;

  /* Cream ground, burgundy statement, warm neutrals. The candles carry
     all the colour on this site, so the page itself stays out of their
     way — no background competes with a photograph. */
  --ivory:       #F7F1E8;   /* header, hero, the product grid */
  --linen:       #EDE1D4;   /* how ordering works */
  --burgundy:    #6B2634;   /* the closing call to action */
  --burgundy-dk: #551D2A;

  /* surface + colour */
  --bg:          #F7F1E8;
  --bg-2:        #FFFDFB;
  --ink:         #2E1C10;
  --ink-hover:   #8A5A2B;
  --muted:       #655448;
  --hairline:    rgba(46, 28, 16, 0.14);
  --hairline-2:  rgba(46, 28, 16, 0.09);
  --surface:     rgba(255, 253, 251, 0.78);
  --surface-2:   #EFE7DE;
  --sand:        #7A6550;
  --accent:      #8A5A2B;
  --dark:        #241611;
  --on-dark:     #F7EFE6;

  --shadow-1: 0 8px 40px rgba(46, 28, 16, 0.07);
  --shadow-2: 0 22px 60px rgba(46, 28, 16, 0.12);
  --shadow-3: 0 30px 80px rgba(46, 28, 16, 0.18);

  /* type */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --fs-h2:    clamp(2.1rem, 4.6vw, 4.2rem);
  --fs-hero:  clamp(2.5rem, min(10.4vw, 11svh), 5.5rem);
  --fs-lead:  clamp(1.0625rem, 0.5vw + 0.95rem, 1.25rem);
  --fs-body:  clamp(0.9375rem, 0.25vw + 0.9rem, 1.0625rem);
  --fs-micro: 0.75rem;

  /* space + shape */
  --gutter:    clamp(20px, 4vw, 64px);
  --section-y: clamp(76px, 10vw, 168px);
  --maxw:      1440px;

  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-btn: 10px;
  --r-pill: 999px;

  /* the accent doubles as the action colour, template-style */
  --wa:            #0E7C68;
  --wa-dark:       #0A6455;
  --wa-bright:     #25D366;

  --primary:       #8A5A2B;
  --primary-dark:  #6F4A28;
  --primary-soft:  #F3E7DA;
  --nav-h: 72px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 300ms;
  --dur-mid:  700ms;
  --dur-slow: 1200ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* a component `display` would otherwise beat the UA rule and leave an
   invisible full-screen sheet swallowing clicks */
[hidden] { display: none !important; }

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }

::selection { background: rgba(138, 90, 43, 0.18); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  transform: translateY(-200%);
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: var(--r-pill);
  font-size: 0.85rem;
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

body.is-locked { overflow: hidden; }

/* ------------------------------------ 03 Typography helpers --- */
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  letter-spacing: -0.01em;
  line-height: 1.12;
}

.eyebrow, .micro {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  line-height: 1.5;
}
.eyebrow { margin-bottom: clamp(16px, 1.8vw, 24px); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--muted);
  max-width: 40ch;
}

.meta-line {
  margin-top: clamp(20px, 2.4vw, 30px);
  padding-top: 18px;
  border-top: 1px solid var(--hairline-2);
  font-size: 0.875rem;
  color: var(--muted);
}

/* --------------------------- 04 Buttons, links and arrows --- */
.arrow {
  position: relative;
  display: inline-block;
  width: 15px; height: 9px;
  flex: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.arrow::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: currentColor;
  transform: translateY(-50%);
}
.arrow::after {
  content: "";
  position: absolute; right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translate(1px, -50%) rotate(45deg);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std),
              border-color var(--dur-fast) var(--ease-std),
              box-shadow var(--dur-fast) var(--ease-std),
              transform var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(138, 90, 43, 0.28); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--espresso); }
.btn--ghost { border-color: var(--hairline); color: var(--ink); }
.btn--ghost:hover { background: rgba(46, 28, 16, 0.04); border-color: rgba(46, 28, 16, 0.2); }
/* on photography */
.btn--burgundy {
  background: var(--burgundy);
  color: #fff;
  padding-inline: 28px;
  font-size: 0.8125rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.btn--burgundy:hover {
  background: var(--burgundy-dk);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(107, 38, 52, 0.30);
}
.btn--pill {
  border-color: rgba(255, 255, 255, 0.62);
  border-radius: var(--r-pill);
  color: #fff;
  padding: 15px 34px;
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.btn--pill:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  transform: translateY(-1px);
}
.btn--pill .arrow { margin-left: 6px; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); }
.btn--outline { border-color: rgba(255, 255, 255, 0.42); color: #fff; }
.btn--outline:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.7); }
.btn:active { transform: scale(0.985); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--sm { padding: 9px 16px; font-size: 0.85rem; border-radius: var(--r-sm); }
.btn--lg { padding: 16px 28px; font-size: 1rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease-std);
}
.link-arrow:hover { color: var(--ink); }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* ------------------------------- 05 Navigation and sheets --- */
.nav {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(247, 241, 232, 0.94);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid var(--hairline-2);
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.brand {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  transition: opacity var(--dur-fast) var(--ease-std);
}
.brand:hover { opacity: 0.66; }
.brand__mark {
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--r-pill);
  object-fit: cover;
}
.brand__name { white-space: nowrap; }
.brand__name em { font-style: normal; font-weight: 700; }

.nav__links {
  justify-self: center;
  display: flex;
  gap: clamp(14px, 2vw, 30px);
}
.nav__links a {
  position: relative;
  padding: 8px 2px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-std);
}
.nav__links a[aria-current="page"] { color: var(--primary); }
.nav__links a:hover { color: var(--primary); }

.nav__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease-std);
}
.icon-btn:hover { background: rgba(46, 28, 16, 0.05); }
.icon-btn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round;
}
.burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  position: relative;
  transition: background var(--dur-fast) var(--ease-std);
}
.burger:hover { background: rgba(46, 28, 16, 0.05); }
.burger span {
  position: absolute;
  left: 11px; right: 11px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-fast) var(--ease-std);
}
.burger span:first-child { top: 17px; }
.burger span:last-child  { bottom: 17px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* sheets ------------------------------------------------------ */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-std);
}
.sheet.is-open { opacity: 1; }

.menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--nav-h) + clamp(30px, 8vh, 80px)) var(--gutter) clamp(30px, 6vh, 60px);
}
.menu__list a {
  display: block;
  padding: clamp(6px, 1.2vh, 12px) 0;
  font-size: clamp(2.2rem, 10vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-mid) var(--ease-out) calc(var(--i) * 55ms),
              transform var(--dur-mid) var(--ease-out) calc(var(--i) * 55ms);
}
.menu__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-mid) var(--ease-out) calc(var(--i) * 55ms),
              transform var(--dur-mid) var(--ease-out) calc(var(--i) * 55ms);
}
.menu.is-open .menu__list a,
.menu.is-open .menu__foot { opacity: 1; transform: none; }

/* -------------------------------------------------- 06 Hero --- */
/* The photograph sits right and bleeds off the frame. The left is a warm
   ground the words can live on, and a scrim keeps them readable however
   bright the picture behind them gets. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--on-dark);
  background: #C0A88E;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg picture { display: contents; }
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  will-change: transform;
}

/* and hold the words on the darker half */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right,
      rgba(48, 37, 30, 0.48) 0%,
      rgba(48, 37, 30, 0.36) 34%,
      rgba(48, 37, 30, 0.12) 58%,
      rgba(48, 37, 30, 0.00) 76%),
    /* the marks sit low and left, where the slab catches the light */
    linear-gradient(to top,
      rgba(48, 37, 30, 0.26) 0%,
      rgba(48, 37, 30, 0.00) 34%);
}

.hero__inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(44px, 8vh, 96px) var(--gutter) clamp(40px, 7vh, 84px);
  display: flex;
  align-items: center;
  min-height: min(84svh, 780px);
}
.hero__body {
  display: grid;
  justify-items: start;
  text-align: left;
  max-width: 40rem;
}

/* the wordmark, script over letterspaced caps */
.wordmark {
  display: grid;
  justify-items: center;
  margin-bottom: clamp(26px, 5vh, 54px);
}
/* the little branch above the name, drawn rather than set */
.wordmark__sprig {
  width: clamp(76px, 7vw, 108px);
  height: auto;
  margin-bottom: clamp(4px, 0.8vh, 10px);
  fill: none;
  stroke: #fff;
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wordmark__script {
  font-family: "Parisienne", var(--serif);
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
  color: #fff;
}
.wordmark__caps {
  margin-top: 6px;
  font-size: clamp(0.7rem, 1vw, 0.86rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
}
.hero__title span { display: block; }

.hero__lead {
  margin-top: clamp(16px, 2.4vh, 26px);
  max-width: 40ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
.hero__actions {
  margin-top: clamp(26px, 4vh, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* the three marks along the foot */
.hero__marks {
  margin-top: clamp(38px, 8vh, 86px);
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 40px);
}
.mark {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding-right: clamp(18px, 3vw, 40px);
  border-right: 1px solid rgba(255, 255, 255, 0.28);
}
.mark:last-child { padding-right: 0; border-right: 0; }
.mark__icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mark__label {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.7;
  color: #fff;
}

@media (max-width: 900px) {
  /* the photograph goes behind the whole frame, the scrim does the work */
  /* the words land straight on the candle here, so the scrim carries
     more of the load than it has to on a wide screen */
  /* Weighted to the top, where the words are. The foot stays light so
     the candle keeps its colour. */
  .hero::after {
    background: linear-gradient(to bottom,
      rgba(48, 37, 30, 0.80) 0%,
      rgba(48, 37, 30, 0.74) 40%,
      rgba(48, 37, 30, 0.58) 70%,
      rgba(48, 37, 30, 0.74) 100%);
  }
  .hero__inner { min-height: min(88svh, 740px); }
  .wordmark { justify-items: start; }
  .hero__marks { gap: 14px; }
  .mark { padding-right: 14px; }
}

/* ------------------------------------- 06 Sections and heads --- */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}
.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 80px);
  margin-bottom: clamp(38px, 5vw, 76px);
}
.section__sub {
  margin-top: clamp(14px, 1.6vw, 20px);
  max-width: 48ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--muted);
}

/* --------------------------------------------- 09 Cinematic --- */
.cinema {
  position: relative;
  height: clamp(520px, 86svh, 900px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--dark);
  isolation: isolate;
}
.cinema__media { position: absolute; inset: 0; z-index: -2; }
.cinema__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  will-change: transform;
}
/* a soft band of shade through the middle keeps the words legible */
.cinema::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(28, 17, 12, 0.28) 0%,
      rgba(28, 17, 12, 0.10) 16%,
      rgba(28, 17, 12, 0.72) 38%,
      rgba(28, 17, 12, 0.74) 62%,
      rgba(28, 17, 12, 0.12) 84%,
      rgba(28, 17, 12, 0.30) 100%),
    linear-gradient(rgba(28, 17, 12, 0.14), rgba(28, 17, 12, 0.14));
}
.cinema__text {
  padding: 0 var(--gutter);
  text-align: center;
  color: var(--on-dark);
  font-size: clamp(1.9rem, 4.6vw, 4.2rem);
  line-height: 1.14;
  letter-spacing: -0.04em;
  font-weight: 700;
  text-wrap: balance;
  text-shadow: 0 2px 34px rgba(0, 0, 0, 0.45);
}
.cinema__text p + p { color: rgba(247, 239, 230, 0.86); }
.cinema__text p:nth-child(3) { color: rgba(247, 239, 230, 0.74); }
.cinema__sub {
  margin: clamp(20px, 2.6vw, 34px) auto 0;
  max-width: 42ch;
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: rgba(247, 239, 230, 0.8) !important;
}

/* ------------------------------------------ 11 How it works --- */
.how { background: var(--linen); }
.section__head--center { justify-content: center; text-align: center; }
.section__head--center .section__sub { margin-inline: auto; }

.how__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  counter-reset: step;
}
.how__step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.how__step:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
/* the thread that runs between the steps */
.how__step::after {
  content: "";
  position: absolute;
  top: clamp(34px, 3.4vw, 46px);
  right: calc(clamp(16px, 2vw, 26px) * -1);
  width: clamp(16px, 2vw, 26px);
  height: 1px;
  background: var(--hairline);
}
.how__step:last-child::after { display: none; }
.how__no {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1;
  color: var(--gold);
}
.how__title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }
.how__text { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); }
.how__link { margin-top: 2px; font-size: 0.9375rem; }

/* ---------------------------------------- 11b Privacy + terms --- */
.legal { background: var(--bg); padding: clamp(34px, 5vw, 70px) 0 clamp(60px, 8vw, 110px); }
.legal__inner { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.legal__head { padding-bottom: clamp(24px, 3vw, 38px); border-bottom: 1px solid var(--hairline-2); }
.legal__title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -0.04em; margin-top: 10px; }
.legal__lead { margin-top: 14px; font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); }
.legal__date { margin-top: 16px; color: var(--muted); }
.legal__block { padding-top: clamp(28px, 3.4vw, 44px); }
.legal__h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; }
.legal__list { margin-top: 16px; display: grid; gap: 14px; padding-left: 1.4em; list-style: decimal; }
.legal__list li { line-height: 1.6; color: var(--muted); }
.legal__list li b { color: var(--ink); font-weight: 600; }
.legal__list li::marker { color: var(--gold); font-weight: 700; }
.legal__foot {
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--hairline-2);
  color: var(--muted);
}

/* ------------------------------------------------ 12 Footer --- */
.footer {
  background: var(--espresso);
  border-top: 0;
  color: var(--on-dark);
  padding: clamp(44px, 5vw, 72px) var(--gutter) clamp(26px, 3vw, 40px);
}
.footer .micro { color: rgba(247, 239, 230, 0.66); }
.footer > * {
  max-width: var(--maxw);
  margin-inline: auto;
}
.footer__logo {
  width: clamp(64px, 7vw, 88px);
  height: clamp(64px, 7vw, 88px);
  border-radius: var(--r-pill);
  object-fit: cover;
}
.footer__main {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
}
@media (min-width: 1000px) {
  .footer__main {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
  .footer__grid { justify-self: end; }
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 180px));
  gap: clamp(24px, 4vw, 64px);
}
.footer__col { display: grid; align-content: start; gap: 12px; }
.footer__col .micro { margin-bottom: 4px; }
.footer__col a {
  font-size: 0.9375rem;
  color: rgba(247, 239, 230, 0.88);
  justify-self: start;
  transition: color var(--dur-fast) var(--ease-std);
}
.footer__col a:hover { color: var(--champagne); }

.footer__base {
  margin-top: clamp(36px, 4.5vw, 64px);
  padding-top: 22px;
  border-top: 1px solid rgba(247, 239, 230, 0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.footer--compact { border-top: 0; }
.footer__base--only { margin-top: 0; border-top: 0; }
@media (min-width: 701px) { .footer__base { padding-right: 96px; } }
@media (max-width: 700px) { .footer__base { padding-bottom: 56px; } }

/* ------------------------------------------------- 13 Toast --- */
.toast {
  position: fixed;
  left: 50%;
  bottom: clamp(18px, 3vw, 32px);
  z-index: 120;
  transform: translate(-50%, 14px);
  padding: 13px 22px;
  border-radius: var(--r-pill);
  background: rgba(46, 28, 16, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 0.875rem;
  white-space: nowrap;
  box-shadow: var(--shadow-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-std), transform var(--dur-mid) var(--ease-out);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ----------------------------------------- 14 Motion system --- */
.js .reveal,
.js .reveal-up,
.js .reveal-scale {
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out) var(--delay, 0ms),
              transform var(--dur-mid) var(--ease-out) var(--delay, 0ms);
}
.js .reveal-up { transform: translateY(28px); }
.js .reveal-scale { transform: scale(0.965); }
.js .reveal.is-visible,
.js .reveal-up.is-visible,
.js .reveal-scale.is-visible { opacity: 1; transform: none; }

/* image mask reveal */
.js .reveal-mask img {
  transform: scale(1.08);
  transition: transform var(--dur-slow) var(--ease-out) var(--delay, 0ms);
}
.js .reveal-mask.is-visible img { transform: none; }

/* When GSAP is driving, it owns these properties — drop the CSS transitions so
   the two systems never animate the same element twice. */
.gsap-on .reveal,
.gsap-on .reveal-up,
.gsap-on .reveal-scale,
.gsap-on .reveal-mask img,
.gsap-on .hero-anim { transition: none !important; }

/* hero entrance (fires on load, not on scroll) */
.js .hero-anim {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out) var(--delay, 0ms),
              transform var(--dur-slow) var(--ease-out) var(--delay, 0ms);
}
.js .hero-anim.is-visible { opacity: 1; transform: none; }
/* the hero photograph owns its transform (parallax) */
.js .hero__bg img { transition: transform 120ms linear; }

/* -------------------------------------------- 15 Responsive --- */
@media (min-width: 1600px) {
  :root { --gutter: clamp(64px, 6vw, 120px); }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .burger { display: block; }
  .nav__inner { grid-template-columns: auto 1fr; }
  .nav__actions { grid-column: 2; }

  .section__head { flex-direction: column; align-items: flex-start; gap: 20px; }
}

@media (max-width: 700px) {
  :root { --r-lg: 24px; --r-md: 12px; }

  .hero__title { letter-spacing: -0.04em; }
  .hero__actions { gap: 10px; }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__base { flex-direction: column; align-items: flex-start; gap: 12px; }
  .toast { left: var(--gutter); right: var(--gutter); transform: translateY(14px); white-space: normal; text-align: center; }
  .toast.is-visible { transform: none; }
}

@media (max-width: 560px) {
  .brand__name { display: none; }
  .brand__mark { width: 34px; height: 34px; }
}

@media (max-width: 420px) {
  .nav__actions { gap: 2px; }
}

/* coarse pointers: nothing important hides behind hover */
@media (hover: none) {
  .tile__img--alt { display: none; }
  .tile__add { opacity: 1; transform: none; }
}

/* ============================================================
   16 Commerce — catalogue, product detail
   ============================================================ */
/* ------------------------------------------- shop layout --- */
.shop { background: var(--bg); padding: clamp(28px, 4vw, 56px) 0 clamp(60px, 8vw, 110px); }
.shop__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

/* the catalogue keeps to one screen — its two columns scroll inside it,
   then the page carries on below */
.shop { --shop-h: min(100vh, 800px); scroll-margin-top: var(--nav-h); }
.shop__inner > .filters,
.shop__inner > .results {
  max-height: var(--shop-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
}
.shop__inner > .results { padding-bottom: 6px; }
.results__head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  padding-top: 2px;
}

.filters { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 26px; }
.fsec { padding-bottom: 22px; border-bottom: 1px solid var(--hairline-2); }
.fsec:last-of-type { border-bottom: 0; padding-bottom: 0; }
.fsec__title { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
.fsec__opts { display: grid; gap: 2px; }

.flist { display: grid; gap: 2px; }
.flist__link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.9375rem;
  color: var(--muted);
  text-align: left;
  transition: color var(--dur-fast) var(--ease-std);
}
.flist__link span { font-size: 0.8125rem; color: var(--sand); font-variant-numeric: tabular-nums; }
.flist__link:hover { color: var(--ink); }
.flist__link.is-on { color: var(--primary); font-weight: 600; }
.flist__link.is-on span { color: var(--primary); }

.fswatches { display: flex; flex-wrap: wrap; gap: 10px; }
.fswatch {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-out);
}
.fswatch i {
  width: 20px; height: 20px;
  border-radius: var(--r-pill);
  background: var(--dot);
  box-shadow: inset 0 0 0 1px rgba(46, 28, 16, 0.14);
}
.fswatch:hover { transform: scale(1.06); }
.fswatch.is-on { border-color: var(--primary); }
.fclear { margin-top: 4px; }

/* results header */
.results__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.results__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.7vw, 2.4rem);
  letter-spacing: -0.005em;
}
.results__count { margin-top: 8px; font-size: 0.9375rem; color: var(--muted); }
.results__tools { display: flex; align-items: center; gap: 10px; }

.tool {
  display: none;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
  background: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
}
.tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.tool__n {
  display: grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--primary); color: #fff; font-size: 0.6875rem;
}

.select { position: relative; display: flex; align-items: center; }
.select select {
  appearance: none;
  -webkit-appearance: none;
  height: 42px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
  background: #fff;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-std);
}
.select select:hover { border-color: rgba(46, 28, 16, 0.28); }
.select__chev {
  position: absolute; right: 14px;
  width: 11px; height: 8px;
  pointer-events: none;
  fill: none; stroke: var(--muted); stroke-width: 1.6;
}

.activebar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(16px, 2vw, 22px); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: #fff;
  font-size: 0.8125rem;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip i { font-style: normal; font-size: 1rem; line-height: 1; color: var(--muted); }
.chip:hover i { color: var(--primary); }
.chip--clear {
  border-color: transparent;
  background: none;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.chip--clear:hover { color: var(--primary); }

/* filter options (sidebar + mobile sheet) */
.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.9375rem;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-std);
}
.opt:hover { color: var(--ink); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt__box {
  position: relative;
  width: 18px; height: 18px;
  flex: none;
  border: 1.5px solid rgba(46, 28, 16, 0.25);
  border-radius: 5px;
  background: #fff;
  transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.opt__box::after {
  content: "";
  position: absolute;
  left: 5.5px; top: 2px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.5);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-out);
}
.opt input:checked + .opt__box { background: var(--primary); border-color: var(--primary); }
.opt input:checked + .opt__box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.opt input:checked ~ .opt__label { color: var(--ink); font-weight: 500; }
.opt input:focus-visible + .opt__box { outline: 2px solid var(--primary); outline-offset: 3px; }
.opt__label { line-height: 1.4; }

/* --------------------------------------------------- catalog --- */

.catalog__status {
  margin-bottom: clamp(18px, 2.4vw, 30px);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.catalog__empty { padding: clamp(40px, 8vw, 90px) 0; text-align: center; }
.catalog__empty-line { font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.03em; }
.catalog__empty-sub { margin: 12px auto 26px; max-width: 42ch; color: var(--muted); }

.pgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(16px, 1.8vw, 26px);
  row-gap: clamp(28px, 3vw, 44px);
  transition: opacity var(--dur-fast) var(--ease-std);
}
.pgrid.is-swapping { opacity: 0.25; }
.pgrid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ------------------------------------------------ product card --- */
.card { display: flex; flex-direction: column; }
.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  transition: box-shadow var(--dur-mid) var(--ease-out);
}
.card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.card__link { position: absolute; inset: 0; z-index: 1; }
.card:hover .card__media,
.card:focus-within .card__media { box-shadow: 0 12px 30px rgba(46, 28, 16, 0.12); }

.card__info { padding-top: 14px; }
.card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.card__name {
  margin-top: 6px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
}
.card__name a:hover { color: var(--primary); }
.card__price {
  margin-top: 5px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.card__from { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.pdp__from { font-size: 0.9375rem; font-weight: 500; color: var(--muted); vertical-align: middle; }

/* --------------------------------------------- bottom sheets --- */
.bsheet { position: fixed; inset: 0; z-index: 96; }
.bsheet__scrim {
  position: absolute; inset: 0;
  background: rgba(28, 17, 12, 0.28);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-std);
}
.bsheet.is-open .bsheet__scrim { opacity: 1; }
.bsheet__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 86svh;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -20px 60px rgba(46, 28, 16, 0.20);
  transform: translateY(100%);
  transition: transform 480ms var(--ease-out);
}
.bsheet.is-open .bsheet__panel { transform: none; }
.bsheet__grab {
  width: 42px; height: 4px;
  margin: 10px auto 0;
  border-radius: var(--r-pill);
  background: rgba(46, 28, 16, 0.16);
}
.bsheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter) 10px;
}
.bsheet__head h2 { font-size: 1.125rem; letter-spacing: -0.02em; }
.bsheet__body { overflow-y: auto; padding: 4px var(--gutter) 18px; }
.bsheet__foot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 14px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline-2);
  background: var(--bg-2);
}
.fgroup { padding: 14px 0; border-bottom: 1px solid var(--hairline-2); }
.fgroup:last-child { border-bottom: 0; }
.fgroup h3 { font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.fgroup__opts { display: grid; }
.sortopt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 2px;
  border-bottom: 1px solid var(--hairline-2);
  font-size: 1rem;
  text-align: left;
}
.sortopt i {
  width: 16px; height: 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(46, 28, 16, 0.25);
  position: relative;
}
.sortopt.is-on i { border-color: var(--espresso); }
.sortopt.is-on i::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: var(--r-pill);
  background: var(--espresso);
}

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

/* -------------------------------------------- quantity control --- */

/* ==================================== product detail page ==== */
.pdp {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) var(--gutter) clamp(50px, 7vw, 100px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.pdp__media { min-width: 0; }

/* carousel */
.pgal { display: grid; gap: 12px; }
.pgal__stage {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
}
.pgal__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.pgal__track::-webkit-scrollbar { display: none; }
.pgal__track:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.pgal__slide { flex: 0 0 100%; scroll-snap-align: center; }
.pgal__slide img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.pgal__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(46, 28, 16, 0.18);
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-out);
}
.pgal__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pgal__nav--prev { left: 12px; }
.pgal__nav--next { right: 12px; }
.pgal__nav--next svg { transform: rotate(180deg); }
.pgal__stage:hover .pgal__nav,
.pgal__nav:focus-visible { opacity: 1; }
.pgal__nav:hover { background: #fff; }
.pgal__nav[disabled] { opacity: 0 !important; pointer-events: none; }

.pgal__count {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(28, 17, 12, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pgal__thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.pgal__thumb {
  display: block;
  width: 74px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--surface-2);
  transition: border-color var(--dur-fast) var(--ease-std), opacity var(--dur-fast) var(--ease-std);
  opacity: 0.72;
}
.pgal__thumb img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.pgal__thumb:hover { opacity: 1; }
.pgal__thumb.is-on { border-color: var(--primary); opacity: 1; }

.pdp__sticky { position: sticky; top: calc(var(--nav-h) + 24px); }
.pdp__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.3vw, 2.9rem);
  letter-spacing: -0.005em;
  line-height: 1.12;
}
.pdp__no { color: var(--muted); font-weight: 400; }
.pdp__price {
  margin-top: clamp(16px, 2vw, 22px);
  display: flex; align-items: baseline; gap: 4px;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.pdp__desc {
  margin-top: clamp(16px, 2vw, 22px);
  max-width: 46ch;
  color: var(--muted);
  line-height: 1.62;
}

/* The measured piece, under the description. Only the measurements
   that were actually taken appear, so the block is often two rows and
   sometimes none at all. */
.specs {
  margin-top: clamp(20px, 2.6vw, 28px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--hairline-2);
  max-width: 46ch;
}

.specs__head {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.specs__list { display: grid; gap: 6px; }

.spec {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline-2);
}
.spec:last-child { border-bottom: 0; }

.spec__label {
  font-size: 0.875rem;
  color: var(--muted);
  min-width: 6em;
}

.spec__value {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* Quantity deals, shown under the description only when the studio
   has filled any in. The saving is spelled out: it is the reason the
   row exists, and nobody should have to do the sum. */
.deals {
  margin-top: clamp(20px, 2.6vw, 28px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--hairline-2);
  max-width: 46ch;
}

.deals__head {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.deals__list { display: grid; gap: 6px; }

.deal {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm);
  background: var(--bg-2);
}

.deal__qty {
  font-size: 0.875rem;
  color: var(--muted);
  min-width: 4.5em;
}

.deal__price {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.deal__save {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--burgundy);
  background: rgba(107, 38, 52, 0.08);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}

/* breadcrumb strip above the page body */
.crumbs { border-bottom: 1px solid var(--hairline); background: var(--bg); }
.crumbs__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.crumbs__inner a { color: var(--muted); }
.crumbs__inner a:hover { color: var(--ink); }
.crumbs__inner i { font-style: normal; opacity: 0.45; }
.crumbs__inner span { color: var(--ink); }

/* a glyph sitting beside a button label */
.btn > svg { width: 19px; height: 19px; flex: none; fill: currentColor; }

.buyrow { margin-top: clamp(20px, 2.6vw, 28px); display: flex; gap: 10px; align-items: stretch; }
.btn--buy { flex: 1; justify-content: center; padding-inline: 22px; font-size: 1rem; }
.btn--buy.is-added { background: var(--accent); }
.btn--block { width: 100%; justify-content: center; }

/* A quiet note under the buy row: the photographs are of one pour,
   and no two pours land the same. Said once, plainly, before asking. */
.pdp__note {
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 46ch;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
}
.pdp__note svg {
  width: 16px; height: 16px; flex: none;
  margin-top: 2px;
  fill: none; stroke: currentColor; stroke-width: 1.3;
  stroke-linecap: round;
}

.pdp__save {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease-std);
}
.pdp__save svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.pdp__save[aria-pressed="true"] { color: var(--accent); }
.pdp__save[aria-pressed="true"] svg { fill: var(--accent); }
.pdp__save:hover { color: var(--ink); }

/* ------------------------------------------- sticky buy bar --- */
.stickybuy {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--hairline-2);
  transform: translateY(110%);
  transition: transform 420ms var(--ease-out);
}
.stickybuy.is-on { transform: none; }
.stickybuy__info { display: grid; flex: 1; min-width: 0; }
.stickybuy__name { font-size: 0.875rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stickybuy__price { font-size: 0.875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.stickybuy .btn { flex: none; }

.footer--compact { border-top: 0; }
.footer__base--only { margin-top: 0; border-top: 0; }
@media (min-width: 701px) { .footer__base { padding-right: 96px; } }
@media (max-width: 700px) { .footer__base { padding-bottom: 56px; } }

/* ------------------------------------------------ responsive --- */
@media (max-width: 1100px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgrid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 40px); }
  .pdp__sticky { position: static; }
  .how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how__step:nth-child(2)::after { display: none; }
}

@media (max-width: 1000px) {
  .shop__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
  .filters { display: none; }
  .tool { display: inline-flex; }
}

@media (max-width: 700px) {
  .buyrow { position: relative; flex-wrap: wrap; }
  .buyrow .btn--buy { order: 3; width: 100%; flex: none; }
  .page--pdp main { padding-bottom: 84px; }
  .how__steps { grid-template-columns: minmax(0, 1fr); }
  .how__step::after { display: none; }
}

@media (max-width: 520px) {
  .pgrid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sresult { grid-template-columns: 44px 1fr auto; gap: 12px; }
  .sresult img { width: 44px; height: 55px; }
}

@media (hover: none) {
  .pgal__nav { opacity: 1; }
}

.browse { position: fixed; inset: 0; z-index: 98; }
.browse__scrim {
  position: absolute; inset: 0;
  background: rgba(28, 17, 12, 0.32);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-std);
}
.browse.is-open .browse__scrim { opacity: 1; }

.browse__panel {
  position: absolute;
  inset: clamp(12px, 3vh, 40px) clamp(12px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 100px rgba(46, 28, 16, 0.24);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity var(--dur-mid) var(--ease-std), transform 520ms var(--ease-out);
}
.browse.is-open .browse__panel { opacity: 1; transform: none; }

.browse__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 34px) clamp(12px, 1.6vw, 18px);
}
.browse__head h2 { font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -0.03em; }
.browse__sub { margin-top: 6px; font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }


.browse__filters {
  display: grid;
  gap: 12px;
  padding: clamp(14px, 2vw, 20px) clamp(18px, 2.6vw, 34px);
  border-bottom: 1px solid var(--hairline-2);
}

.bsearch {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--bg);
  transition: border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.bsearch:focus-within { border-color: rgba(46, 28, 16, 0.3); box-shadow: var(--shadow-1); }
.bsearch__icon { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.5; }
.bsearch__input { flex: 1; min-width: 0; border: 0; background: none; font-size: 0.9375rem; }
.bsearch__input:focus { outline: none; }
.bsearch__input::-webkit-search-cancel-button { display: none; }
.bsearch__clear {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  border-radius: var(--r-pill);
  background: rgba(46, 28, 16, 0.07);
}
.bsearch__clear svg { width: 11px; height: 11px; fill: none; stroke: var(--ink); stroke-width: 1.6; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chiprow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.chip-b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  font-size: 0.875rem;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.chip-b:hover { background: rgba(46, 28, 16, 0.05); }
.chip-b__n { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip-b.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-b.is-on .chip-b__n { color: rgba(255, 255, 255, 0.68); }
.chip-b--soft { height: 30px; padding: 0 12px; border-color: transparent; color: var(--muted); font-size: 0.8125rem; }
.chip-b--soft:hover { color: var(--ink); }
.chip-b--soft.is-on { background: rgba(138, 90, 43, 0.12); border-color: transparent; color: var(--accent); }

.swatches { display: flex; align-items: center; gap: 8px; }
.swatches__label { font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.swatch {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-out);
}
.swatch i {
  width: 16px; height: 16px;
  border-radius: var(--r-pill);
  background: var(--dot, var(--cream));
  box-shadow: inset 0 0 0 1px rgba(46, 28, 16, 0.12);
}
.swatch__all {
  background: conic-gradient(#B0413A, #E2BFCF, #7A6AA6, #EDE6DA, #4E7A5E, #B0413A);
}
.swatch:hover { transform: scale(1.08); }
.swatch.is-on { border-color: var(--ink); }

.browse__results {
  flex: 1;
  overflow-y: auto;
  padding: clamp(16px, 2.2vw, 26px) clamp(18px, 2.6vw, 34px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  align-content: start;
}
.browse__empty {
  grid-column: 1 / -1;
  padding: clamp(30px, 6vw, 70px) 0;
  text-align: center;
  color: var(--muted);
}

.bcard { display: flex; flex-direction: column; animation: bcardIn 420ms var(--ease-out) both; animation-delay: calc(var(--i) * 22ms); }
@keyframes bcardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bcard__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
}
.bcard__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bcard__link { position: absolute; inset: 0; z-index: 1; }
.bcard__info { padding-top: 10px; display: grid; gap: 3px; }
.bcard__name {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 0.875rem; font-weight: 500; letter-spacing: -0.015em;
}
.bcard__name span { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.bcard__meta { font-size: 0.75rem; color: var(--muted); }

.browse__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(12px, 1.6vw, 18px) clamp(18px, 2.6vw, 34px) calc(clamp(12px, 1.6vw, 18px) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline-2);
  background: var(--bg-2);
}
.browse__hint { font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 900px) {
  .browse__panel { inset: 0; border-radius: 0; }
  .browse__results { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .chiprow { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 560px) {
  .browse__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================
   19 Contact — header number, WhatsApp button, contact page
   ============================================================ */
.nav__phone {
  display: none;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  margin-right: 4px;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.nav__phone svg { width: 16px; height: 16px; fill: none; stroke: var(--primary); stroke-width: 1.7; stroke-linejoin: round; }
.nav__phone:hover { background: var(--primary-soft); color: var(--primary); }
@media (min-width: 1180px) { .nav__phone { display: inline-flex; } }

/* floating WhatsApp button */
.wafab {
  position: fixed;
  right: clamp(16px, 2vw, 26px);
  bottom: clamp(16px, 2vw, 26px);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 54px;
  padding: 0 15px;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: #fff;
  box-shadow: 0 10px 30px rgba(14, 124, 104, 0.34);
  transition: gap var(--dur-mid) var(--ease-out), padding var(--dur-mid) var(--ease-out), background var(--dur-fast) var(--ease-std);
}
.wafab svg { width: 26px; height: 26px; flex: none; fill: currentColor; }
.wafab span {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 600;
  opacity: 0;
  transition: max-width var(--dur-mid) var(--ease-out), opacity var(--dur-fast) var(--ease-std);
}
.wafab:hover, .wafab:focus-visible { background: var(--wa-dark); gap: 10px; padding-right: 20px; }
.wafab:hover span, .wafab:focus-visible span { max-width: 140px; opacity: 1; }
/* clear of the sticky buy bar on phones */
@media (max-width: 700px) {
  .page--pdp .wafab { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .wafab {
    height: 50px;
    padding: 0 13px;
    opacity: 0;
    transform: translateY(12px) scale(0.9);
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-std);
  }
  .wafab.is-up { opacity: 1; transform: none; pointer-events: auto; }
}

.menu__wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--r-btn);
  background: var(--wa);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  justify-self: start;
  width: fit-content;
}
.menu__wa svg { width: 20px; height: 20px; fill: currentColor; }

.walink { color: var(--primary); font-weight: 600; }
.walink:hover { color: var(--primary-dark); }

/* contact page */
/* The closing call to action. Deep burgundy, with the cards and the
   form left light so they lift off it rather than fight it. */
.contact {
  /* A quiet grey, barely warm so it does not turn dirty against the
     cream above it. Light here also means the form is the easiest
     thing on the page to read, which is the point of the section. */
  background: #F1F0EE;
  color: var(--ink);
  padding: clamp(34px, 5vw, 70px) 0 clamp(64px, 8vw, 118px);
}
.contact__head .eyebrow { color: var(--muted); }
.contact__title { color: var(--ink); }
.contact__lead { color: var(--muted); }
/* White panels lifting off the grey. The other way round — grey panels
   on white — left the cards and the section reading as one flat sheet
   with nothing to separate them. */
.contact .ccard,
.contact .enquiry {
  color: var(--ink);
  background: #FFFFFF;
  border-color: rgba(48, 37, 34, 0.10);
  box-shadow: 0 1px 2px rgba(48, 37, 34, 0.04);
}
.contact .ccard--wa { border-color: rgba(14, 124, 104, 0.30); }
.contact .ccard--ig { border-color: rgba(193, 53, 132, 0.26); }
.contact .ccard:not(.ccard--static):hover {
  border-color: var(--burgundy);
  box-shadow: 0 10px 28px rgba(48, 37, 34, 0.10);
}
.contact .ccard .arrow,
.contact .ccard__note { color: var(--muted); }
/* The icon tiles carry WhatsApp's green and Instagram's gradient, which
   is all the recognition these need. Repeating those colours in the
   labels put a teal and a magenta into a page that has neither. */
.contact .ccard--wa .ccard__label,
.contact .ccard--ig .ccard__label { color: var(--muted); }

/* The fields are white like the panel, so the border has to do the
   work of showing where to type. */
.contact .field input,
.contact .field select,
.contact .field textarea {
  background: #FFFFFF;
  border-color: rgba(48, 37, 34, 0.22);
}
.contact .field input:focus,
.contact .field select:focus,
.contact .field textarea:focus {
  border-color: var(--burgundy);
  box-shadow: 0 0 0 3px rgba(107, 38, 52, 0.14);
}
.contact__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.contact__head { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 48px); }
.contact__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  letter-spacing: -0.005em;
  line-height: 1.12;
}
.contact__lead { margin-top: 16px; font-size: var(--fs-lead); line-height: 1.6; }

.ccards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.ccard {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(16px, 2vw, 22px);
  background: #fff;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-out);
}
.ccard:not(.ccard--static):hover { border-color: var(--primary); box-shadow: var(--shadow-1); transform: translateY(-2px); }
.ccard__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; flex: none;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
}
.ccard__icon svg { width: 23px; height: 23px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.ccard--wa { border-color: var(--wa); background: #E9F6F1; }
.ccard--wa .ccard__icon { background: var(--wa); }
.ccard--wa .ccard__icon svg { fill: #fff; stroke: none; }
.ccard__body { display: grid; gap: 3px; min-width: 0; }
.ccard__label { font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ccard--wa .ccard__label { color: var(--wa-dark); }

/* Instagram's own gradient, mark in white on top of it */
.ccard--ig { border-color: #C13584; background: #FCF0F6; }
.ccard--ig .ccard__icon {
  background: linear-gradient(135deg, #F58529 0%, #FEDA77 18%, #DD2A7B 52%, #8134AF 78%, #515BD4 100%);
}
.ccard--ig .ccard__icon svg { stroke: #fff; }
.ccard--ig .ccard__label { color: #A32568; }
.ccard__value { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }
.ccard__note { font-size: 0.8125rem; color: var(--muted); line-height: 1.45; }
.ccard .arrow { margin-left: auto; flex: none; color: var(--muted); }
.ccard:hover .arrow { transform: translateX(4px); color: var(--primary); }

.enquiry {
  margin-top: clamp(34px, 5vw, 64px);
  padding: clamp(22px, 3vw, 40px);
  background: #fff;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-lg);
}
.enquiry__intro { max-width: 54ch; margin-bottom: clamp(20px, 2.6vw, 30px); }
.enquiry__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
  background: #fff;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
}
.field textarea { resize: vertical; min-height: 96px; }

/* the free-text box that appears under a select when its last option
   is the one that cannot be listed */
.field__extra { margin-top: 8px; }
.field__extra[hidden] { display: none; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.enquiry__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; }
.enquiry__actions .btn { max-width: 100%; white-space: normal; text-align: left; }
.btn__wa { width: 19px; height: 19px; fill: currentColor; }

/* a button that opens WhatsApp wears WhatsApp's green */
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-dark); }
.btn--wa:focus-visible { outline-color: var(--wa-dark); }
.enquiry__msg { font-size: 0.875rem; color: var(--primary); }

@media (max-width: 780px) {
  .ccards { grid-template-columns: minmax(0, 1fr); }
  .enquiry__form { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   LATEST NEWS
   A rail of photo cards above the shop. It slides on its own and
   can be pushed by hand; on a phone it is simply a thumb-scroller
   with the arrows out of the way.
   ============================================================ */
.news {
  background: var(--bg);
  padding: clamp(48px, 7vw, 96px) 0 clamp(8px, 2vw, 24px);
}

.news__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(20px, 2.6vw, 34px);
}

.news__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 6px 0 0;
}

.news__nav { display: flex; gap: 8px; flex: 0 0 auto; }

.news__arrow {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--bg-2);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-std),
              border-color var(--dur-fast) var(--ease-std),
              opacity var(--dur-fast) var(--ease-std);
}
.news__arrow svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.news__arrow--next svg { transform: rotate(180deg); }
.news__arrow:hover { background: var(--surface-2); border-color: var(--hairline); }
.news__arrow[disabled] { opacity: 0.3; pointer-events: none; }

/* ------------------------------------------------- the rail --- */
.news__rail {
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding: 2px 0 14px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.news__rail::-webkit-scrollbar { display: none; }
.news__rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-md); }

.news__slide {
  flex: 0 0 auto;
  width: clamp(230px, 24vw, 320px);
  scroll-snap-align: start;
}

/* ------------------------------------------------ the cards --- */
.newscard {
  display: block;
  height: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--hairline-2);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-std);
}

.newscard__shot {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-2);
}
.newscard__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-mid) var(--ease-out);
}

.newscard__text {
  display: block;
  padding: 14px 16px 18px;
}

.newscard__when {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

/* Two lines, then it stops. A title long enough to need a third is
   too long for something read while it slides past. */
.newscard__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Three lines, then it stops — the same bargain the title makes, one
   line further. A card is read while it slides past or not at all. */
.newscard__body {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 7px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

.newscard--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-1);
}
.newscard--link:hover .newscard__shot img { transform: scale(1.04); }
.newscard--link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ============================================================
   NEWS PAGE
   One notice in full on news.html — the photograph across the top,
   the title under it, then however much was written — and the grid
   of all of them when no notice is asked for.
   ============================================================ */
.page--news { background: var(--bg); }

.newspage {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 34px) var(--gutter) clamp(72px, 9vw, 130px);
}

.newspage--list { max-width: var(--maxw); }

.newspage__figure {
  margin: 0 0 clamp(22px, 3.2vw, 38px);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
}

/* Across the top and centred. Capped by height as well as width so a
   tall shot does not push the title off the first screen. */
.newspage__shot {
  display: block;
  width: 100%;
  max-height: 62vh;
  object-fit: cover;
  object-position: center;
}

.newspage__head { margin-bottom: clamp(16px, 2.2vw, 24px); }

.newspage__when {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.newspage__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
}

.newspage__lead {
  margin: 14px 0 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
  max-width: 54ch;
}

/* However much was typed, with its blank lines kept as paragraphs. */
.newspage__prose {
  font-size: var(--fs-lead);
  line-height: 1.72;
  color: var(--ink);
  max-width: 62ch;
}
.newspage__prose p { margin: 0 0 1.05em; }
.newspage__prose p:last-child { margin-bottom: 0; }

.newspage__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--hairline-2);
}

.newspage--empty { text-align: center; padding-top: clamp(50px, 8vw, 110px); }
.newspage--empty .newspage__lead { margin-inline: auto; }
.newspage--empty .btn { margin-top: 26px; }

/* ------------------------------------------- all of them at once --- */
.newsgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 26px);
  margin: clamp(26px, 3.4vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}

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

@media (max-width: 700px) {
  /* The arrows are redundant next to a thumb, and the rail runs to
     the edge of the screen so the next card is visibly cut off. */
  .news__nav { display: none; }
  .news__inner { padding-right: 0; }
  .news__head { padding-right: var(--gutter); }
  .news__rail { padding-right: var(--gutter); }
  .news__slide { width: min(78vw, 300px); }
}

/* ------------------------------------------ reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal,
  .js .reveal-up,
  .js .reveal-scale,
  .js .hero-anim { opacity: 1; transform: none; }
  .js .reveal-mask img { transform: none; }
  .cinema__media img { transform: none; }
}

/* The way out of the rail, next to the arrows. On a phone the arrows
   go and this takes their place. */
.news__all {
  align-self: center;
  margin-right: 4px;
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-std),
              border-color var(--dur-fast) var(--ease-std);
}
.news__all:hover { color: var(--ink); border-color: var(--ink); }

@media (max-width: 700px) {
  .news__head .news__nav { display: flex; }
  .news__head .news__arrow { display: none; }
}