/* ==========================================================================
   ZANAR
   Complete replacement stylesheet
   assets/css/zanar.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. DESIGN TOKENS
   -------------------------------------------------------------------------- */

:root {
  --white: #ffffff;
  --white-95: rgba(255, 255, 255, 0.95);
  --white-90: rgba(255, 255, 255, 0.90);
  --white-86: rgba(255, 255, 255, 0.91);
  --white-82: rgba(255, 255, 255, 0.88);
  --white-74: rgba(255, 255, 255, 0.84);
  --white-68: rgba(255, 255, 255, 0.78);
  --white-58: rgba(255, 255, 255, 0.68);
  --white-42: rgba(255, 255, 255, 0.50);
  --white-28: rgba(255, 255, 255, 0.34);
  --white-20: rgba(255, 255, 255, 0.25);
  --white-14: rgba(255, 255, 255, 0.18);
  --white-08: rgba(255, 255, 255, 0.08);

  --burgundy: #4a111b;
  --burgundy-deep: #2d0910;
  --burgundy-dark: #21070c;
  --burgundy-soft: rgba(74, 17, 27, 0.78);
  --burgundy-glass: rgba(55, 11, 18, 0.52);

  --sand: #b39b79;
  --sand-mid: #9e8564;
  --sand-deep: #81694d;
  --sand-light: #d4c3aa;

  /*
    Legacy variable names remain because the uploaded HTML uses them inline.
    They intentionally resolve to white-opacity values.
  */
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.88);
  --rule: rgba(255, 255, 255, 0.32);

  --page-x: clamp(1.35rem, 5vw, 5.75rem);
  --section-y: clamp(6rem, 10vw, 10.5rem);
  --section-y-tight: clamp(4.5rem, 7vw, 7rem);

  --content-max: 1280px;
  --reading-max: 720px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-height: 6.6rem;

  --shadow-soft:
    0 24px 80px rgba(30, 13, 8, 0.12);

  --focus:
    0 0 0 2px rgba(255, 255, 255, 0.95),
    0 0 0 5px rgba(57, 13, 20, 0.55);
}


/* --------------------------------------------------------------------------
   02. RESET
   -------------------------------------------------------------------------- */

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

html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  background: var(--sand-deep);
  color-scheme: dark;
}

body {
  margin: 0;
  padding: 0;
  min-width: 320px;
  overflow-x: hidden;

  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;

  color: var(--white);
  background:
    linear-gradient(
      180deg,
      rgba(77, 57, 39, 0.18),
      rgba(58, 38, 25, 0.12)
    ),
    #a68e6e;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea,
option {
  font-family: "Times New Roman", Times, serif !important;
}

img,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

video {
  background: #1c0d0b;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a,
select {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
blockquote {
  margin-top: 0;
}

::selection {
  color: var(--white);
  background: rgba(74, 17, 27, 0.78);
}


/* --------------------------------------------------------------------------
   03. GLOBAL WHITE TYPOGRAPHY
   -------------------------------------------------------------------------- */

body,
body p,
body span,
body strong,
body em,
body b,
body i,
body small,
body label,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body a {
  color: var(--white);
}

body [style*="color:var(--ink-soft)"],
body [style*="color: var(--ink-soft)"] {
  color: var(--white-82) !important;
}

body [style*="color:var(--burgundy)"],
body [style*="color: var(--burgundy)"] {
  color: var(--white) !important;
}

body [style*="color:var(--sand-light)"],
body [style*="color: var(--sand-light)"] {
  color: var(--white-82) !important;
}

body [style*="color:var(--white)"],
body [style*="color: var(--white)"] {
  color: var(--white) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  color: var(--white);
}

p {
  color: var(--white-84, rgba(255, 255, 255, 0.84));
}

strong,
b {
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   04. CONTINUOUS SANDSTONE + BOTANICAL SHADOW WORLD
   -------------------------------------------------------------------------- */

/*
  All regular content sections inherit the same physical sandstone environment.
  The pseudo-elements create softly blurred foliage/light shadows without
  requiring decorative SVGs or stock assets.
*/

.section {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: 100%;
  padding: var(--section-y) var(--page-x);

  color: var(--white);

  background:
    radial-gradient(
      ellipse at 18% 18%,
      rgba(255, 242, 216, 0.13) 0%,
      rgba(255, 242, 216, 0.05) 24%,
      transparent 48%
    ),
    radial-gradient(
      ellipse at 83% 67%,
      rgba(54, 32, 19, 0.13) 0%,
      transparent 47%
    ),
    linear-gradient(
      130deg,
      rgba(184, 160, 123, 0.98) 0%,
      rgba(166, 140, 104, 0.98) 43%,
      rgba(144, 117, 84, 0.98) 100%
    );
}

.section::before,
.section::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: 0.28;
  /* blur removed 26 Aug 2026 — see section 38.1 */
  transform-origin: center;
}

/* Left-side foliage silhouette */
.section::before {
  width: min(47vw, 650px);
  height: min(72vw, 900px);
  left: -18vw;
  top: -8rem;

  background:
    radial-gradient(ellipse at 73% 13%, rgba(43, 30, 21, 0.30) 0 7%, transparent 8%),
    radial-gradient(ellipse at 64% 25%, rgba(43, 30, 21, 0.28) 0 8%, transparent 9%),
    radial-gradient(ellipse at 80% 34%, rgba(43, 30, 21, 0.24) 0 7%, transparent 8%),
    radial-gradient(ellipse at 58% 44%, rgba(43, 30, 21, 0.25) 0 9%, transparent 10%),
    radial-gradient(ellipse at 75% 57%, rgba(43, 30, 21, 0.24) 0 8%, transparent 9%),
    radial-gradient(ellipse at 51% 68%, rgba(43, 30, 21, 0.21) 0 7%, transparent 8%),
    linear-gradient(
      72deg,
      transparent 44%,
      rgba(43, 30, 21, 0.18) 45% 47%,
      transparent 48%
    );

  transform: rotate(-12deg);
}

/* Right-side quieter shadow field */
.section::after {
  width: min(36vw, 500px);
  height: min(58vw, 700px);
  right: -16vw;
  bottom: -13rem;

  background:
    radial-gradient(ellipse at 26% 18%, rgba(45, 31, 21, 0.19) 0 8%, transparent 9%),
    radial-gradient(ellipse at 42% 32%, rgba(45, 31, 21, 0.18) 0 7%, transparent 8%),
    radial-gradient(ellipse at 24% 49%, rgba(45, 31, 21, 0.16) 0 9%, transparent 10%),
    radial-gradient(ellipse at 46% 65%, rgba(45, 31, 21, 0.15) 0 8%, transparent 9%);

  transform: rotate(18deg);
}

.section--shadow {
  background:
    radial-gradient(
      ellipse at 76% 14%,
      rgba(236, 214, 179, 0.13),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 16% 76%,
      rgba(48, 29, 17, 0.16),
      transparent 43%
    ),
    linear-gradient(
      128deg,
      #ad9674 0%,
      #9b8160 55%,
      #896e50 100%
    );
}

/*
  Existing burgundy sections are intentionally restrained.
  Rather than becoming visually disconnected, the sandstone remains visible
  beneath a translucent port-wine veil.
*/
.section--burgundy {
  background:
    linear-gradient(
      135deg,
      rgba(65, 14, 23, 0.80),
      rgba(41, 8, 14, 0.70)
    ),
    radial-gradient(
      ellipse at 20% 12%,
      rgba(218, 188, 150, 0.12),
      transparent 35%
    ),
    #8e7354;
}

.section--burgundy::before,
.section--burgundy::after {
  opacity: 0.12;
}

.section--tight {
  padding-top: var(--section-y-tight);
  padding-bottom: var(--section-y-tight);
}

.center {
  text-align: center;
}


/* --------------------------------------------------------------------------
   05. CONTAINERS + LAYOUT
   -------------------------------------------------------------------------- */

.section > * {
  position: relative;
  z-index: 2;
}

.two-col {
  width: min(100%, var(--content-max));
  margin-inline: auto;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 7.5rem);
  align-items: center;
}

.two-col > * {
  min-width: 0;
}

.two-col img {
  width: 100%;
  max-height: 78vh;
  object-fit: cover;

  box-shadow: var(--shadow-soft);
}

.copy {
  max-width: 58ch;
  color: var(--white-86);
}

.copy p {
  margin-bottom: 1.25em;
  color: var(--white-86);

  /* Keeps the last line of a paragraph from falling to a single orphan
     word. Ignored by browsers that do not support it; nothing breaks. */
  text-wrap: pretty;
}

.copy p:last-child {
  margin-bottom: 0;
}

.lede {
  max-width: 58ch;
  font-size: clamp(1.15rem, 1.65vw, 1.45rem);
  line-height: 1.8;
}

.center .copy,
.center .lede {
  margin-left: auto;
  margin-right: auto;
}

section > div[style*="max-width"] {
  position: relative;
  z-index: 2;
}


/* Orphan control for the remaining body-copy classes. One declaration,
   no layout consequence, no change to measure or rhythm. */
.lede p,
.method-copy,
.botanical-body,
.faq-item p,
.article-body p,
.italic-line,
.def-row p,
.cart-note {
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   06. TYPOGRAPHIC HIERARCHY
   -------------------------------------------------------------------------- */

.wordmark {
  display: inline-flex;
  align-items: flex-start;

  font-family: "Times New Roman", Times, serif;
  font-size: clamp(1.55rem, 2.3vw, 2.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);

  white-space: nowrap;
}

.wordmark sup {
  position: relative;
  top: -0.10em;
  left: 0;

  /* pulls the mark back through the wordmark's 0.22em tracking so it sits
     close to the final R, while keeping a hairline of optical air */
  margin-left: -0.62em;

  font-size: 0.38em;
  letter-spacing: 0;
}

.eyebrow {
  display: inline-block;

  margin-bottom: 1.15rem;

  font-size: clamp(0.67rem, 0.7vw, 0.77rem);
  font-weight: 400;
  line-height: 1.35;

  letter-spacing: 0.32em;
  text-transform: uppercase;

  color: var(--white-68) !important;
}

.eyebrow--light {
  color: var(--white-68) !important;
}

.display-xl,
.display-lg,
.display-md {
  margin: 0;

  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  color: var(--white);

  text-wrap: balance;
}

.display-xl {
  font-size: clamp(2.15rem, 5.6vw, 5.1rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.display-lg {
  font-size: clamp(1.45rem, 2.9vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.display-md {
  font-size: clamp(1.45rem, 2.9vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.italic-line {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.75vw, 1.4rem);
  line-height: 1.5;
  color: var(--white-82) !important;
}


/* --------------------------------------------------------------------------
   07. HEADER + NAVIGATION
   -------------------------------------------------------------------------- */

.site-header {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;

  min-height: var(--header-height);
  padding: 1.9rem var(--page-x);

  display: grid;
  grid-template-columns: minmax(150px, 0.65fr) auto minmax(150px, 0.65fr);
  align-items: center;
  gap: 2rem;

  color: var(--white);

  background: transparent;
  border: 0;
}

.site-header--solid {
  position: absolute;

  background: transparent;
}

.site-header .wordmark {
  justify-self: start;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.25vw, 2.65rem);
}

.main-nav a {
  position: relative;

  padding: 0.4rem 0;

  font-family: "Times New Roman", Times, serif;
  font-size: clamp(0.68rem, 0.78vw, 0.82rem);
  font-weight: 400;
  line-height: 1;

  letter-spacing: 0.19em;
  text-transform: uppercase;
  white-space: nowrap;

  color: var(--white-82);

  transition:
    color 250ms ease,
    opacity 250ms ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.38rem;

  height: 1px;

  background: var(--white);

  transform: scaleX(0);
  transform-origin: center;
  opacity: 0.9;

  transition: transform 300ms var(--ease);
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--white);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a.active::after {
  transform: scaleX(1);
}

.main-nav a.active {
  color: var(--white);
}

.header-controls {
  justify-self: end;

  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.cart-toggle,
.menu-toggle {
  appearance: none;

  padding: 0.45rem 0;

  border: 0;
  border-radius: 0;
  background: transparent;

  font-family: "Times New Roman", Times, serif;
  font-size: 0.75rem;
  font-weight: 400;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: var(--white-82);

  transition:
    color 220ms ease,
    opacity 220ms ease;
}

.cart-toggle:hover,
.menu-toggle:hover,
.cart-toggle:focus-visible,
.menu-toggle:focus-visible {
  color: var(--white);
}

.cart-count:not(:empty) {
  display: inline-grid;
  place-items: center;

  min-width: 1.25rem;
  min-height: 1.25rem;
  margin-left: 0.35rem;

  border: 1px solid var(--white-42);
  border-radius: 50%;

  font-size: 0.68rem;
  letter-spacing: 0;
}

.menu-toggle {
  display: none;
}


/* --------------------------------------------------------------------------
   08. HERO VIDEO / IMAGE
   -------------------------------------------------------------------------- */

.hero-video-wrap {
  position: relative;
  isolation: isolate;

  width: 100%;
  height: 100vh;
  min-height: 620px;

  overflow: hidden;

  background-color: #21100d;
}

.hero-video-wrap > video,
.hero-video-wrap > img {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
}

.hero-scrim {
  position: absolute;
  z-index: 1;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(16, 7, 5, 0.26) 0%,
      rgba(16, 7, 5, 0.03) 34%,
      rgba(16, 7, 5, 0.04) 67%,
      rgba(16, 7, 5, 0.31) 100%
    );
}

.hero-video-wrap > div:not(.hero-scrim) {
  z-index: 2;
}


/* --------------------------------------------------------------------------
   09. IMAGERY
   -------------------------------------------------------------------------- */

.reveal img {
  color: transparent;
}

.full-bleed {
  position: relative;
  isolation: isolate;

  width: 100%;
  height: clamp(520px, 82vh, 900px);
  overflow: hidden;

  background: var(--sand-deep);
}

.full-bleed::before,
.full-bleed::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  height: 14%;

  pointer-events: none;
}

.full-bleed::before {
  top: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(131, 106, 77, 0.28),
      transparent
    );
}

.full-bleed::after {
  bottom: 0;
  background:
    linear-gradient(
      to top,
      rgba(126, 100, 72, 0.34),
      transparent
    );
}

.full-bleed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   10. LINKS
   -------------------------------------------------------------------------- */

.text-link {
  position: relative;
  display: inline-block;

  padding-bottom: 0.42rem;

  font-size: 0.82rem;
  line-height: 1.2;

  letter-spacing: 0.2em;
  text-transform: uppercase;

  color: var(--white-90);
}

.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  background: var(--white-42);

  transition:
    background 250ms ease,
    transform 300ms var(--ease);
}

.text-link:hover::after,
.text-link:focus-visible::after {
  background: var(--white);
  transform: scaleX(0.72);
  transform-origin: left;
}

/* The invitation over the film — finer tracking, hairline rule */
.text-link--hero {
  font-size: 0.74rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  padding-bottom: 0.62rem;
  color: var(--white);
}

.text-link--hero::after {
  height: 1px;
  background: rgba(255, 255, 255, 0.30);
}

.text-link--hero:hover::after,
.text-link--hero:focus-visible::after {
  background: rgba(255, 255, 255, 0.85);
}


/* --------------------------------------------------------------------------
   11. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 3.35rem;
  padding: 1rem 1.8rem;

  border: 1px solid var(--white-58);
  border-radius: 0;

  background: transparent;

  font-family: "Times New Roman", Times, serif !important;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.1;

  letter-spacing: 0.19em;
  text-transform: uppercase;

  color: var(--white) !important;

  transition:
    background-color 250ms ease,
    border-color 250ms ease,
    color 250ms ease,
    transform 250ms var(--ease);
}

.btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--white);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--ghost {
  color: var(--white) !important;
  background: transparent;
  border-color: var(--white-58);
}

.btn--ghost:hover {
  color: var(--white) !important;
  background: rgba(74, 17, 27, 0.82);
  border-color: rgba(74, 17, 27, 0.88);
}

.btn--light {
  color: var(--white) !important;
  background: transparent;
  border-color: var(--white-58);
}

.btn--light:hover {
  color: var(--white) !important;
  background: rgba(74, 17, 27, 0.58);
  border-color: var(--white-82);
}


/* --------------------------------------------------------------------------
   12. HAIRLINE RULES
   -------------------------------------------------------------------------- */

hr {
  border: 0;
  border-top: 1px solid var(--rule);
}

/* Override inline border rules from uploaded HTML */
[style*="border-top:1px solid var(--rule)"],
[style*="border-top: 1px solid var(--rule)"] {
  border-top-color: var(--rule) !important;
}

[style*="border-bottom:1px solid var(--rule)"],
[style*="border-bottom: 1px solid var(--rule)"] {
  border-bottom-color: var(--rule) !important;
}


/* --------------------------------------------------------------------------
   13. PRODUCT PAGE CONTROLS
   -------------------------------------------------------------------------- */

.form-field {
  margin-bottom: 1.8rem;
}

.form-field label {
  display: block;

  margin-bottom: 0.72rem;

  font-size: 0.7rem;
  line-height: 1.2;
  letter-spacing: 0.26em;
  text-transform: uppercase;

  color: var(--white-68) !important;
}

.form-field input,
.form-field select,
.form-field textarea {
  appearance: none;

  width: 100%;

  border: 1px solid var(--white-28);
  border-radius: 0;

  outline: none;

  background:
    linear-gradient(
      rgba(56, 24, 17, 0.11),
      rgba(56, 24, 17, 0.11)
    ),
    rgba(255, 255, 255, 0.035);

  color: var(--white) !important;

  font-family: "Times New Roman", Times, serif !important;
  font-size: 1rem;

  transition:
    border-color 240ms ease,
    background-color 240ms ease,
    box-shadow 240ms ease;
}

.form-field input,
.form-field select {
  min-height: 3.45rem;
  padding: 0.85rem 1rem;
}

.form-field textarea {
  min-height: 9rem;
  padding: 1rem;
  resize: vertical;
  line-height: 1.65;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: var(--white-42);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--white-82);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 0 0 1px var(--white-20);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--white-58);
  opacity: 1;
}

.form-field select {
  cursor: pointer;

  padding-right: 3rem;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.78) 50%),
    linear-gradient(135deg, rgba(255,255,255,.78) 50%, transparent 50%);
  background-position:
    calc(100% - 1.25rem) 50%,
    calc(100% - 0.98rem) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.form-field select option {
  color: var(--white);
  background: var(--burgundy-deep);
}

.qty-btn {
  appearance: none;

  display: inline-grid;
  place-items: center;

  width: 2.65rem;
  height: 2.65rem;

  padding: 0;

  border: 1px solid var(--white-28);
  border-radius: 0;

  background: rgba(255, 255, 255, 0.025);

  color: var(--white) !important;

  font-family: "Times New Roman", Times, serif !important;
  font-size: 1.1rem;
  line-height: 1;

  transition:
    background-color 220ms ease,
    border-color 220ms ease;
}

.qty-btn:hover,
.qty-btn:focus-visible {
  border-color: var(--white-68);
  background: rgba(74, 17, 27, 0.38);
}

#qty-val {
  color: var(--white) !important;
}

#price-display {
  color: var(--white) !important;
  font-weight: 400;
  letter-spacing: 0.03em;
}

#variant {
  color: var(--white) !important;
}


/* --------------------------------------------------------------------------
   14. PRODUCT PAGE IMAGE EMPHASIS
   -------------------------------------------------------------------------- */

body:has(#variant) .section:first-of-type {
  padding-top: clamp(9rem, 14vw, 12rem) !important;
}

body:has(#variant) .section:first-of-type .two-col {
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
}

body:has(#variant) .section:first-of-type img {
  max-height: 78vh;
  object-fit: cover;
  box-shadow:
    0 36px 90px rgba(35, 17, 10, 0.14);
}


/* --------------------------------------------------------------------------
   15. JOURNAL
   -------------------------------------------------------------------------- */

article {
  color: var(--white);
}

article a {
  color: var(--white);
}

article p {
  color: var(--white-82) !important;
}

article[style*="border-top"] {
  border-top-color: var(--rule) !important;
}

article[style*="border-bottom"] {
  border-bottom-color: var(--rule) !important;
}

article .display-md a {
  transition: opacity 220ms ease;
}

article .display-md a:hover,
article .display-md a:focus-visible {
  opacity: 0.72;
}


/* --------------------------------------------------------------------------
   16. CONCIERGE
   -------------------------------------------------------------------------- */

#private,
#hotels,
#gifting,
#weddings,
#partnerships {
  border-color: var(--rule) !important;
}

#private h3,
#hotels h3,
#gifting h3,
#weddings h3,
#partnerships h3 {
  color: var(--white-74) !important;
  font-family: "Times New Roman", Times, serif !important;
  font-weight: 400;
}

#private p,
#hotels p,
#gifting p,
#weddings p,
#partnerships p {
  color: var(--white-86) !important;
}

#sent-note {
  color: var(--white-90) !important;
}


/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding: clamp(5.5rem, 8vw, 8rem) var(--page-x) 2.1rem;

  color: var(--white);

  background:
    radial-gradient(
      ellipse at 18% 0%,
      rgba(191, 161, 121, 0.15),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(52, 12, 18, 0.96),
      rgba(33, 7, 12, 0.98)
    );

  border-top: 1px solid var(--white-14);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  opacity: 0.08;

  background:
    radial-gradient(ellipse at 10% 40%, #fff 0 1%, transparent 10%),
    radial-gradient(ellipse at 80% 10%, #fff 0 1%, transparent 12%);
}

.footer-grid {
  width: min(100%, var(--content-max));
  margin: 0 auto clamp(4rem, 7vw, 6rem);

  display: grid;
  grid-template-columns: 1.7fr 1fr 0.8fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
}

.footer-grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-grid p {
  color: var(--white-74);
}

.footer-grid a:not(.wordmark) {
  display: inline-block;

  margin: 0.35rem 0;

  font-size: 0.92rem;
  line-height: 1.45;

  color: var(--white-74);

  transition: color 220ms ease;
}

.footer-grid a:not(.wordmark):hover,
.footer-grid a:not(.wordmark):focus-visible {
  color: var(--white);
}

.footer-label {
  margin-bottom: 1rem;

  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;

  color: var(--white-58) !important;
}

.footer-base {
  width: min(100%, var(--content-max));
  margin: 0 auto;

  padding-top: 1.6rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  border-top: 1px solid var(--white-14);

  font-size: 0.72rem;
  letter-spacing: 0.1em;

  color: var(--white-58);
}

.footer-base span {
  color: var(--white-58) !important;
}


/* --------------------------------------------------------------------------
   18. CART
   -------------------------------------------------------------------------- */

.cart-overlay {
  position: fixed;
  z-index: 190;
  inset: 0;

  visibility: hidden;
  opacity: 0;

  background: rgba(16, 8, 6, 0.58);
  /* backdrop blur removed 26 Aug 2026 — see section 38.1 */

  transition:
    opacity 300ms ease,
    visibility 300ms ease;
}

.cart-overlay.open,
.cart-overlay.active,
.cart-overlay.is-open,
body.cart-open .cart-overlay {
  visibility: visible;
  opacity: 1;
}

.cart-drawer {
  position: fixed;
  z-index: 200;
  top: 0;
  right: 0;

  width: min(430px, 92vw);
  height: 100dvh;

  padding: 2rem;

  display: flex;
  flex-direction: column;

  color: var(--white);

  background:
    linear-gradient(rgba(24, 13, 10, 0.78), rgba(24, 13, 10, 0.78)),
    url("../img/menu-shadow.jpg") center/cover;

  border-left: 1px solid var(--white-14);
  box-shadow: -30px 0 90px rgba(20, 8, 7, 0.24);

  transform: translateX(102%);
  visibility: hidden;

  transition:
    transform 420ms var(--ease),
    visibility 420ms;
}

.cart-drawer.open,
.cart-drawer.active,
.cart-drawer.is-open,
body.cart-open .cart-drawer {
  transform: translateX(0);
  visibility: visible;
}

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;

  padding-bottom: 1.5rem;

  border-bottom: 1px solid var(--white-20);
}

.cart-head h3,
.cart-head .cart-title {
  margin: 0;

  font-size: 1.55rem;
  font-weight: 400;

  color: var(--white);
}

.cart-close {
  appearance: none;

  border: 0;
  background: none;

  padding: 0.45rem 0;

  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: var(--white-68) !important;

  transition: color 200ms ease;
}

.cart-close:hover,
.cart-close:focus-visible {
  color: var(--white) !important;
}

.cart-items {
  flex: 1;
  overflow-y: auto;

  padding: 1.6rem 0;

  scrollbar-width: thin;
  scrollbar-color: var(--white-28) transparent;
}

.cart-items > * {
  color: var(--white);
}

.cart-items button {
  color: var(--white-74);
  background: transparent;
  border-color: var(--white-28);
}

.cart-foot {
  padding-top: 1.5rem;

  border-top: 1px solid var(--white-20);
}

.cart-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;

  margin-bottom: 1.3rem;

  color: var(--white);
}

.cart-total-value {
  font-size: 1.35rem;
  color: var(--white) !important;
}

.cart-foot .btn {
  width: 100%;
}

.cart-note {
  margin: 1rem 0 0;

  text-align: center;
  font-style: italic;
  font-size: 0.76rem;

  color: var(--white-58) !important;
}


/* --------------------------------------------------------------------------
   19. REVEAL MOTION
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 1;
  transform: none;
}

/*
  If the existing JS adds animation-ready classes, these selectors keep
  reveals extremely restrained.
*/
.js .reveal,
.reveal.is-hidden {
  opacity: 0;
  transform: translateY(14px);

  transition:
    opacity 850ms ease,
    transform 850ms var(--ease);
}

.js .reveal.visible,
.js .reveal.is-visible,
.reveal.is-hidden.visible,
.reveal.is-hidden.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* --------------------------------------------------------------------------
   20. ACCESSIBILITY
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.main-nav a:focus-visible,
.wordmark:focus-visible,
.text-link:focus-visible,
.cart-toggle:focus-visible,
.menu-toggle:focus-visible,
.cart-close:focus-visible {
  box-shadow: none;
  outline: 1px solid var(--white-68);
  outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .js .reveal,
  .reveal.is-hidden {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* --------------------------------------------------------------------------
   21. LARGE DESKTOP
   -------------------------------------------------------------------------- */

@media (min-width: 1500px) {
  :root {
    --content-max: 1380px;
  }

  .main-nav {
    gap: 2.8rem;
  }

  .copy {
    font-size: 1.06rem;
  }
}


/* --------------------------------------------------------------------------
   22. LAPTOP / SMALL DESKTOP
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  :root {
    --page-x: clamp(1.5rem, 4vw, 3.25rem);
  }

  .site-header {
    grid-template-columns: auto 1fr auto;
    gap: 1.6rem;
  }

  .main-nav {
    gap: clamp(0.75rem, 1.5vw, 1.4rem);
  }

  .main-nav a {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
  }

  .two-col {
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}


/* --------------------------------------------------------------------------
   23. TABLET + MOBILE NAVIGATION
   -------------------------------------------------------------------------- */

@media (max-width: 920px) {
  :root {
    --header-height: 5.25rem;
    --section-y: clamp(5rem, 11vw, 7rem);
  }

  .site-header {
    position: absolute;

    min-height: var(--header-height);
    padding: 1.35rem var(--page-x);

    grid-template-columns: 1fr auto;
    gap: 1rem;
  }

  .site-header .wordmark {
    z-index: 102;
  }

  .header-controls {
    z-index: 102;
  }

  .menu-toggle {
    display: inline-block;
  }

  .main-nav {
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;

    min-height: 100dvh;
    padding:
      calc(var(--header-height) + 3.5rem)
      var(--page-x)
      3.5rem;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.8rem;

    overflow-y: auto;

    background:
      radial-gradient(
        ellipse at 15% 12%,
        rgba(190, 153, 111, 0.13),
        transparent 38%
      ),
      rgba(44, 10, 15, 0.985);

    /* backdrop blur removed 26 Aug 2026 — see section 38.1 */

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);

    transition:
      opacity 300ms ease,
      transform 350ms var(--ease),
      visibility 300ms;
  }

  .main-nav.open,
  .main-nav.active,
  .main-nav.is-open,
  body.menu-open .main-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .main-nav a {
    width: 100%;

    padding: 0 0 1.15rem;

    border-bottom: 1px solid var(--white-14);

    font-size: clamp(1rem, 4.5vw, 1.3rem);
    line-height: 1.25;
    letter-spacing: 0.13em;
  }

  .main-nav a::after {
    display: none;
  }

  .two-col {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .two-col img {
    max-height: none;
  }

  body:has(#variant) .section:first-of-type .two-col {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1.3fr 1fr;
    row-gap: 3.5rem;
  }

  #private,
  #hotels,
  #gifting,
  #weddings,
  #partnerships {
    grid-template-columns: 1fr !important;
    gap: 0.7rem !important;
  }
}


/* --------------------------------------------------------------------------
   24. MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root {
    --page-x: 1.35rem;
    --section-y: 5.25rem;
    --section-y-tight: 4rem;
  }

  body {
    font-size: 16px;
    line-height: 1.68;
  }

  .site-header {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .site-header .wordmark {
    font-size: 1.55rem;
    letter-spacing: 0.18em;
  }

  .cart-toggle,
  .menu-toggle {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
  }

  .header-controls {
    gap: 0.9rem;
  }

  .hero-video-wrap {
    height: 100svh !important;
    min-height: 540px;
  }

  .hero-video-wrap > video,
  .hero-video-wrap > img {
    object-position: center center;
  }

  .section::before {
    left: -47vw;
    opacity: 0.22;
  }

  .section::after {
    right: -42vw;
    opacity: 0.18;
  }

  .display-xl {
    font-size: clamp(2.1rem, 11.5vw, 3.6rem);
  }

  .display-lg {
    font-size: clamp(1.45rem, 7.2vw, 2.2rem);
  }

  .display-md {
    font-size: clamp(1.45rem, 7.2vw, 2.2rem);
  }

  .eyebrow {
    font-size: 0.64rem;
    letter-spacing: 0.22em;
  }

  .copy,
  .lede {
    max-width: 100%;
  }

  .lede {
    font-size: 1.08rem;
  }

  .two-col {
    gap: 2.5rem;
  }

  .two-col img {
    width: 100%;
    min-height: 300px;
    max-height: 68vh;
    object-fit: cover;
  }

  .full-bleed {
    height: 68svh;
    min-height: 450px;
  }

  /*
    Inline two-column purchase button grid in the supplied HTML
    becomes single-column on narrow screens.
  */
  body:has(#variant)
    div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  body:has(#variant)
    div[style*="display:flex"][style*="align-items:center"] {
    gap: 1rem !important;
    flex-wrap: wrap;
  }

  #price-display {
    width: 100%;
    margin-left: 0 !important;
    margin-top: 0.4rem;
  }

  .btn {
    min-height: 3.55rem;
    width: 100%;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .text-link {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.8rem;
  }

  .footer-base {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .cart-drawer {
    width: min(100%, 430px);
    padding: 1.4rem;
  }

  /*
    Preserve intentional image framing while reducing the risk of critical
    product/subject cropping on phones.
  */
  body:has(#variant) .section:first-of-type img {
    min-height: 390px;
    object-position: center;
  }

  #private,
  #hotels,
  #gifting,
  #weddings,
  #partnerships {
    padding-top: 1.9rem !important;
    padding-bottom: 1.9rem !important;
  }
}


/* --------------------------------------------------------------------------
   25. VERY SMALL MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 390px) {
  :root {
    --page-x: 1.1rem;
  }

  .site-header {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .site-header .wordmark {
    font-size: 1.38rem;
  }

  .cart-toggle {
    letter-spacing: 0.08em;
  }

  .menu-toggle {
    letter-spacing: 0.08em;
  }

  .display-xl {
    font-size: 2.35rem;
  }

  .display-lg {
    font-size: 1.7rem;
  }

  .display-md {
    font-size: 1.7rem;
  }
}


/* --------------------------------------------------------------------------
   26. HIGH-CONTRAST / FORCED COLORS SUPPORT
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .btn,
  .qty-btn,
  .form-field input,
  .form-field select,
  .form-field textarea {
    border: 1px solid ButtonText;
  }

  .main-nav a.active {
    text-decoration: underline;
  }
}


/* --------------------------------------------------------------------------
   27. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .cart-overlay,
  .cart-drawer,
  .header-controls {
    display: none !important;
  }

  body,
  .section,
  .section--shadow,
  .section--burgundy,
  .site-footer {
    background: #ffffff !important;
    color: #000000 !important;
  }

  body *,
  body [style] {
    color: #000000 !important;
  }

  .section::before,
  .section::after {
    display: none;
  }
}


/* ==========================================================================
   28. ZANAR ASSET RESTORATION — appended by the house
   The supplied botanical-shadow photographs remain the true backgrounds
   behind all writing (per the master build rules: real references over
   synthetic substitutes). These override the painted gradients above.
   ========================================================================== */

.bg-1 { background: linear-gradient(rgba(43,24,31,.30),rgba(43,24,31,.30)), url("../img/menu-shadow.jpg") center/cover !important; }
.bg-2 { background: linear-gradient(rgba(43,24,31,.30),rgba(43,24,31,.30)), url("../img/menu-shadow.jpg") center/cover !important; }
.bg-3 { background: linear-gradient(rgba(43,24,31,.30),rgba(43,24,31,.30)), url("../img/menu-shadow.jpg") center/cover !important; }
.bg-4 { background: linear-gradient(rgba(43,24,31,.30),rgba(43,24,31,.30)), url("../img/menu-shadow.jpg") center/cover !important; }
.bg-5 { background: linear-gradient(rgba(43,24,31,.30),rgba(43,24,31,.30)), url("../img/menu-shadow.jpg") center/cover !important; }
.bg-6 { background: linear-gradient(rgba(43,24,31,.30),rgba(43,24,31,.30)), url("../img/menu-shadow.jpg") center/cover !important; }
.bg-menu { background: linear-gradient(rgba(24,13,10,.42),rgba(24,13,10,.42)), url("../img/menu-shadow.jpg") center/cover !important; }

/* Real photographs carry the shadows; the synthetic foliage blobs stand down */
.section[class*="bg-"]::before,
.section[class*="bg-"]::after {
  display: none;
}

/* Reveal compatibility: the site JS toggles .in */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 850ms ease, transform 850ms var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Menu toggle label alignment with JS behaviour (adds .open) */
.main-nav.open { opacity: 1; visibility: visible; transform: translateY(0); }

/* ==========================================================================
   29. CORRECTION BRIEF ADDITIONS
   ========================================================================== */


/* Variant selector — two elegant rows in place of a dropdown */
.variant-rows {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.4rem;
}
.variant-row {
  appearance: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--white-28);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.03);
  color: var(--white) !important;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  text-align: left;
  transition: border-color 240ms ease, background-color 240ms ease;
}
.variant-row:hover { border-color: var(--white-58); }
.variant-row.selected {
  border-color: var(--white-82);
  background: rgba(74, 17, 27, 0.34);
}
.variant-row .variant-price { white-space: nowrap; color: var(--white-90); }

/* Quantity — quiet controls, no bulky boxes */
.qty-btn--quiet {
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  background: transparent;
  border-bottom: 1px solid var(--white-28);
  font-size: 1.25rem;
}
.qty-btn--quiet:hover,
.qty-btn--quiet:focus-visible {
  background: transparent;
  border-bottom-color: var(--white-82);
}


/* ==========================================================================
   30. STRICT ALTERNATION — shadow backgrounds for writing, pure visuals
   between; no painted colour blocks anywhere
   ========================================================================== */

body { background: #83705a; }

.section {
  background: linear-gradient(rgba(43,24,31,.30),rgba(43,24,31,.30)),
              url("../img/menu-shadow.jpg") center/cover;
}
.section::before,
.section::after { display: none !important; }
.section--burgundy[class*="bg-"]::before { display: none !important; }

/* Footer speckle overlay — the two white radial dots read as hard-edged
   blobs since the blur was removed (26 Aug 2026). Hidden to match the
   .section::before/::after treatment above. */
.site-footer::before { display: none !important; }

.full-bleed::before,
.full-bleed::after { display: none; }

.site-footer {
  background: linear-gradient(rgba(43,24,31,.52),rgba(43,24,31,.52)),
              url("../img/menu-shadow.jpg") center/cover;
}

/* ==========================================================================
   31. FULL LOGO IN HEADER — white transparent mark replaces the text wordmark
   ========================================================================== */

.wordmark--logo { line-height: 0; }
.logo-img {
  height: clamp(3.4rem, 5.5vw, 5.2rem);
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 14px rgba(20, 8, 6, 0.5));
}
@media (max-width: 920px) { .logo-img { height: 3.1rem; } }
@media (max-width: 640px) { .logo-img { height: 2.7rem; } }

/* Footer keeps the typographic wordmark — untouched */

/* ==========================================================================
   32. CENTRED MARK + FULL-SCREEN OVERLAY MENU
   (three-column header: Menu · logo · Cart; menu opens over the whole page)
   ========================================================================== */

.site-header {
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.header-left { justify-self: start; }
.site-header .wordmark--logo { justify-self: center; }
.header-controls { justify-self: end; }

/* Logo — centred, larger still */
.logo-img {
  height: clamp(6.4rem, 10.5vw, 10.5rem);
  width: auto;
}
@media (max-width: 920px) { .logo-img { height: 6.2rem; } }
@media (max-width: 640px) { .logo-img { height: 6rem; } }

/* Menu / Cart triggers — quiet utility words on every breakpoint */
.menu-toggle,
.cart-toggle {
  display: inline-block !important;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white-82);
}
.menu-toggle:hover, .cart-toggle:hover { color: var(--white); }

/* Full-screen overlay menu — all breakpoints */
.main-nav {
  position: fixed !important;
  inset: 0 !important;
  z-index: 150;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
  align-items: flex-start;

  min-height: 100dvh;
  padding: 8rem var(--page-x) 4rem;

  background: linear-gradient(rgba(28, 15, 12, .55), rgba(28, 15, 12, .55)),
              url("../img/menu-shadow.jpg") center/cover;

  opacity: 0;
  visibility: hidden;
  transform: none;
  transition: opacity 620ms var(--ease), visibility 620ms;
  overflow-y: auto;
}
.main-nav.open {
  opacity: 1;
  visibility: visible;
}

.menu-inner {
  width: min(100%, var(--content-max));
  margin: 0 auto;
}
.menu-eyebrow { color: var(--white-58) !important; margin-bottom: 2.5rem; }

.menu-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--white-14);
}

.main-nav a {
  width: 100%;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--white-14);

  font-size: clamp(1.7rem, 4.4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--white-82);

  transition: color 400ms ease, padding-left 500ms var(--ease);
}
.main-nav a::after { display: none; }
.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--white);
  padding-left: 1.2rem;
}
.main-nav a.active { color: var(--white); font-style: italic; }

.menu-foot {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 3.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white-58);
}

@media (max-width: 640px) {
  .main-nav { padding-top: 7rem; }
  .main-nav a { padding: 1.2rem 0; font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .menu-foot { gap: 1rem; flex-direction: column; }
}


/* ==========================================================================
   33. MOBILE HERO + ROLLS-ROYCE PHONE HEADER
   ========================================================================== */

/* Hero video: true full-screen on phones, with dynamic viewport units so the
   browser chrome appearing/disappearing never leaves a gap or a jump. */
@media (max-width: 920px) {
  .hero-video-wrap {
    height: 100svh;
    min-height: 100svh;
    max-height: 100dvh;
  }
  .hero-video-wrap > video,
  .hero-video-wrap > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Landscape footage on a portrait screen: hold the vapour and bowl
       in frame rather than centring on empty architecture. */
    object-position: 58% 68% !important;
  }
}

@media (max-width: 640px) {
  .hero-video-wrap > video,
  .hero-video-wrap > img { object-position: 60% 70% !important; }
}

/* Phone header — Rolls-Royce arrangement:
   centred mark on its own line, MENU and CART beneath as quiet utility. */
@media (max-width: 640px) {
  .site-header {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "logo"
      "controls";
    justify-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.2rem;
  }

  .site-header .wordmark--logo {
    grid-area: logo;
    justify-self: center;
  }
  .logo-img { height: 6rem; }

  /* MENU and CART share one centred row below the mark */
  .header-left {
    grid-area: controls;
    justify-self: center;
    display: flex;
    justify-content: center;
  }
  .header-controls {
    grid-area: controls;
    justify-self: center;
    display: flex;
    justify-content: center;
  }
  .header-left { transform: translateX(-4.6rem); }
  .header-controls { transform: translateX(4.6rem); }

  .menu-toggle, .cart-toggle {
    font-size: 0.66rem;
    letter-spacing: 0.26em;
  }
}

@media (max-width: 390px) {
  .logo-img { height: 5.6rem; }
}


/* Utility words carry their own shadow now that the header band is gone */
.menu-toggle, .cart-toggle {
  text-shadow: 0 1px 10px rgba(20, 8, 6, 0.55);
}


/* ==========================================================================
   34. MOBILE RHYTHM — no long empty stretches between content
   ========================================================================== */

@media (max-width: 640px) {
  :root {
    --section-y: 3.6rem;
    --section-y-tight: 2.8rem;
  }
  .section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
  .full-bleed { height: 58svh; min-height: 360px; }
  .two-col { gap: 2rem; }
  .two-col img { min-height: 260px; max-height: 52vh; }
  .display-lg { font-size: clamp(1.35rem, 6.2vw, 1.95rem); }
  .display-md { font-size: clamp(1.35rem, 6.2vw, 1.95rem); }
  .lede { font-size: 1.02rem; line-height: 1.7; }
}


/* ==========================================================================
   35. TEXTURE WEIGHTING — the richer shadow walls carry the tall text
   sections so long passages never read as a flat colour block
   ========================================================================== */

.bg-3, .bg-5 {
  background: linear-gradient(rgba(43,24,31,.34), rgba(43,24,31,.34)),
              url("../img/menu-shadow.jpg") center/cover !important;
}
.bg-4 {
  background: linear-gradient(rgba(43,24,31,.30), rgba(43,24,31,.30)),
              url("../img/menu-shadow.jpg") center/cover !important;
}


/* ==========================================================================
   33. CART AS BAG ICON — thin-stroke line bag, count sits at its shoulder
   ========================================================================== */

.cart-toggle {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  padding: 0.3rem 0.1rem;
  line-height: 0;
}
.bag-icon {
  width: 1.45rem;
  height: 1.45rem;
  display: block;
  color: var(--white-82);
  transition: color 220ms ease;
  filter: drop-shadow(0 1px 8px rgba(20, 8, 6, 0.45));
}
.cart-toggle:hover .bag-icon,
.cart-toggle:focus-visible .bag-icon { color: var(--white); }

.cart-count:not(:empty) {
  position: absolute;
  top: -0.4rem;
  right: -0.65rem;
  min-width: 1.05rem;
  min-height: 1.05rem;
  margin-left: 0;
  border: 1px solid var(--white-42);
  border-radius: 50%;
  font-size: 0.6rem;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  background: rgba(43, 24, 31, 0.55);
}

/* No hairline anywhere beneath the floating header */
.site-header,
.site-header::before,
.site-header::after { border: 0 !important; box-shadow: none !important; }

@media (max-width: 640px) {
  .bag-icon { width: 1.3rem; height: 1.3rem; }
}

/* ==========================================================================
   34. PHONE HEADER — MENU pinned hard left, bag pinned hard right;
   the mark stays centred on its own line above.
   ========================================================================== */

@media (max-width: 640px) {
  .site-header .header-left,
  .site-header .header-controls {
    grid-area: controls;
    transform: none !important;
  }
  .site-header .header-left {
    justify-self: start !important;
    justify-content: flex-start;
  }
  .site-header .header-controls {
    justify-self: end !important;
    justify-content: flex-end;
  }
}




/* ==========================================================================
   36. GLOBAL TYPE — Times New Roman everywhere, no exceptions
   ========================================================================== */

body, button, input, select, textarea,
.cart-drawer, .cart-drawer * {
  font-family: "Times New Roman", Times, serif !important;
}

/* ============================================================
   BOX ZOOM — closer looking, in frame and full screen
   ============================================================ */

.zoom-frame {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  display: block;
}

.zoom-frame img {
  display: block;
  width: 100%;
  transition: transform 520ms var(--ease);
  will-change: transform;
}

.zoom-frame.is-zooming img {
  transition: transform 90ms linear;
  transform: scale(2.35);
}

.zoom-hint {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 1rem;

  padding: 0.5rem 0.9rem;

  font-family: "Times New Roman", Times, serif;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--white);

  background: rgba(24, 13, 10, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.22);
  /* backdrop blur removed 26 Aug 2026 — see section 38.1 */

  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease);
}

.zoom-frame:hover .zoom-hint { opacity: 1; }
.zoom-frame.is-zooming .zoom-hint { opacity: 0; }

.zoom-lightbox {
  position: fixed;
  z-index: 400;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(18, 9, 7, 0.94);

  opacity: 0;
  visibility: hidden;
  transition: opacity 380ms var(--ease), visibility 380ms;
}

.zoom-lightbox.open { opacity: 1; visibility: visible; }

.zoom-stage {
  overflow: hidden;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.zoom-stage.dragging { cursor: grabbing; }

.zoom-stage img {
  position: absolute;
  top: 50%;
  left: 50%;

  max-width: min(1100px, 92vw);
  max-height: 88vh;

  transform: translate(-50%, -50%);
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

.zoom-controls {
  position: absolute;
  z-index: 2;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.zoom-controls button {
  width: 46px;
  height: 46px;

  font-family: "Times New Roman", Times, serif;
  font-size: 1.2rem;
  color: var(--white);

  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;

  transition: background 300ms var(--ease), border-color 300ms var(--ease);
}

.zoom-controls button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
}

.zoom-close {
  position: absolute;
  z-index: 2;
  top: 1.8rem;
  right: 2rem;

  padding: 0.6rem 0.2rem;

  font-family: "Times New Roman", Times, serif;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white);

  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
}

/* ============================================================
   BOTANICALS — benefit, chakra and dosha
   ============================================================ */

.botanical-list {
  max-width: 860px;
  margin: 0 auto;
}

.botanical-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.botanical-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.4rem;
  margin-top: 1.2rem;
}

.botanical-meta span {
  font-family: "Times New Roman", Times, serif;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--white);
}

.botanical-meta em {
  display: block;

  margin-bottom: 0.35rem;

  font-family: "Times New Roman", Times, serif;
  font-size: 0.6rem;
  font-style: normal;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============================================================
   HERO LEDE — invitation over the film
   ============================================================ */

.hero-lede {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: clamp(3.5rem, 8vh, 7rem);
  left: 0;

  padding: 0 1.5rem;

  text-align: center;
}

.hero-lede p {
  max-width: 34ch;
  margin: 0 auto 2rem;

  font-family: "Times New Roman", Times, serif;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  line-height: 1.65;
  color: var(--white);
  text-shadow: 0 2px 30px rgba(20, 8, 7, 0.55);
}

@media (max-width: 640px) {
  .botanical-meta { gap: 0.6rem 1.6rem; }
  .zoom-hint { display: none; }
  .hero-lede { bottom: 3rem; }
}

/* ==========================================================================
   36. HOUSE CORRECTIONS — August
   Typography scale, wayfinding tags, menu weight, press states
   ========================================================================== */

/* --- 36.1 Times New Roman, absolutely everywhere ------------------------- */

*,
*::before,
*::after {
  font-family: "Times New Roman", Times, serif !important;
}

/* --- 36.2 Reduced display scale ----------------------------------------- */

.display-xl {
  font-size: clamp(1.65rem, 3.9vw, 3.35rem);
  line-height: 1.0;
  letter-spacing: -0.028em;
}

.display-lg {
  font-size: clamp(1.2rem, 2.1vw, 1.85rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
}

.display-md {
  font-size: clamp(1.2rem, 2.1vw, 1.85rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
}

.italic-line {
  font-size: clamp(1rem, 1.35vw, 1.16rem);
}

/* Inline font-size overrides inside the pages are stepped down with it. */
.display-md[style*="font-size"],
.display-lg[style*="font-size"] {
  font-size: clamp(1.15rem, 2vw, 1.6rem) !important;
}

@media (max-width: 900px) {
  .display-xl { font-size: clamp(1.6rem, 6.4vw, 2.5rem); }
  .display-lg { font-size: clamp(1.15rem, 4.4vw, 1.6rem); }
  .display-md { font-size: clamp(1.15rem, 4.4vw, 1.6rem); }
}

@media (max-width: 640px) {
  .display-xl { font-size: clamp(1.5rem, 7vw, 2.15rem); }
  .display-lg { font-size: clamp(1.12rem, 4.9vw, 1.5rem); }
  .display-md { font-size: clamp(1.12rem, 4.9vw, 1.5rem); }
  .display-md[style*="font-size"],
  .display-lg[style*="font-size"] { font-size: clamp(1.1rem, 4.6vw, 1.42rem) !important; }
}

/* --- 36.3 The quiet page tag -------------------------------------------- */
/* Used where a page still needs to name itself. Sits at the weight of
   "A ritual for rest" on the box — a mark, never a headline.            */

.page-tag {
  display: inline-block;

  font-size: clamp(0.62rem, 0.72vw, 0.72rem);
  font-weight: 400;
  line-height: 1.4;

  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;

  color: var(--white-58) !important;
}

/* --- 36.4 Menu — smaller entries, smaller sub-labels --------------------- */

.main-nav a {
  padding: 1.05rem 0;
  font-size: clamp(1.05rem, 1.85vw, 1.5rem);
  letter-spacing: 0.03em;
}

.menu-eyebrow {
  font-size: 0.6rem !important;
  letter-spacing: 0.36em;
  margin-bottom: 1.7rem;
}

.menu-foot {
  margin-top: 2.4rem;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
}

@media (max-width: 640px) {
  .main-nav a { font-size: 1.12rem; padding: 0.95rem 0; }
  .menu-eyebrow { font-size: 0.56rem !important; margin-bottom: 1.3rem; }
}

/* --- 36.5 Press states — no burgundy flash anywhere ---------------------- */

.btn,
.btn--ghost,
.btn--light,
.text-link,
.qty-btn,
.menu-toggle,
.cart-toggle,
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

/* Neutralise every burgundy hover fill inherited from the old rules. */
.btn:hover,
.btn:focus,
.btn:active,
.btn--ghost:hover,
.btn--ghost:focus,
.btn--ghost:active,
.btn--light:hover,
.btn--light:focus,
.btn--light:active {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--white);
  color: var(--white) !important;
}

/* Hover effects only where a real pointer exists — on touch, a tap no
   longer leaves the hover fill stuck on the button.                     */
@media (hover: none), (pointer: coarse) {
  .btn:hover,
  .btn--ghost:hover,
  .btn--light:hover {
    background: transparent;
    border-color: var(--white-58);
    transform: none;
  }
}

.btn:active {
  background: rgba(255, 255, 255, 0.11);
  transform: translateY(0);
}

.btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.95),
    0 0 0 4px rgba(255, 255, 255, 0.18);
}

.btn::selection,
.btn *::selection {
  background: rgba(255, 255, 255, 0.22);
}

/* --- 36.6 Product hero — the box shown whole, as photographed ------------ */

.zoom-frame img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  box-shadow: none;
}

/* --- 36.7 Hero button — centred in the film, beneath the mark ----------- */

.hero-lede {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 1.5rem;
  pointer-events: none;
}

.hero-lede .btn {
  pointer-events: auto;
}

@media (max-width: 640px) {
  .hero-lede {
    top: 0;
    bottom: 0;
    align-items: center;
  }
}

/* ==========================================================================
   37. ALIGNMENT CORRECTIONS
   ========================================================================== */

/* --- 37.1 Centred copy blocks actually sit centred ----------------------- */
/*
  .copy carries a max-width. Inside a centred section it had no auto side
  margins, so the block hugged the left edge of its parent while its text
  centred inside itself — reading as though the paragraph had slipped
  leftward beneath the heading.
*/

.center .copy,
.center .lede,
.center .italic-line,
.center p,
[style*="text-align:center"] .copy,
[style*="text-align: center"] .copy {
  margin-left: auto;
  margin-right: auto;
}

.center .copy,
.center .lede {
  max-width: 62ch;
}

/* --- 37.2 Full-bleed photography shown as composed ----------------------- */
/*
  A fixed 82vh band cropped hard into 3:2 photography — box lids and horizons
  were being cut. The band now follows the frame of the picture.
*/

.full-bleed {
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 86vh;
  min-height: 320px;
}

.full-bleed img {
  object-position: center center;
}

@media (max-width: 900px) {
  .full-bleed { aspect-ratio: 4 / 3; min-height: 300px; }
}

@media (max-width: 640px) {
  .full-bleed { aspect-ratio: 5 / 4; height: auto; min-height: 260px; }
}

/* --- 37.3 Botanicals — intro and list share one measure ------------------ */

.botanical-list {
  max-width: 900px;
}

.botanical-intro {
  max-width: 900px;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.botanical-intro .copy {
  max-width: 60ch;
  margin-inline: auto;
}

/* --- 37.4 Concierge / definition rows align on one column --------------- */

.def-row {
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) 2.4fr;
  gap: 2rem;
  align-items: baseline;
  padding: 2.2rem 0;
  border-top: 1px solid var(--rule);
}

.def-row h3 {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white-68) !important;
}

.def-row p {
  margin: 0;
}

@media (max-width: 700px) {
  .def-row { grid-template-columns: 1fr; gap: 0.7rem; }
}

/* --- 37.5 FAQ + library ------------------------------------------------- */

.faq-list {
  max-width: 860px;
  margin: 0 auto;
}

.faq-item {
  padding: 2.1rem 0;
  border-top: 1px solid var(--rule);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--rule);
}

.faq-item h3 {
  margin: 0 0 0.85rem;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.faq-item p {
  margin: 0 0 0.9rem;
  max-width: 68ch;
  color: var(--white-86);
}

.faq-item p:last-child { margin-bottom: 0; }

.faq-item ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  max-width: 68ch;
  color: var(--white-86);
}

.faq-item li { margin-bottom: 0.45rem; }

.faq-group-label {
  display: block;
  /* Now an <h2>, so the document outline runs h1 -> h2 -> h3 on the FAQ
     and every policy page. Weight and rhythm are reset to what the span
     rendered, so nothing moves on screen. */
  font-weight: 400;
  line-height: 1.4;
  margin: 4.5rem 0 0.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--white-58) !important;
}

.faq-group-label:first-of-type { margin-top: 0; }

.notice {
  max-width: 860px;
  margin: 3.5rem auto 0;
  padding: 1.9rem 2rem;
  border: 1px solid var(--white-20);
}

.notice p {
  margin: 0 0 0.8rem;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--white-74);
}

.notice p:last-child { margin-bottom: 0; }

/* --- 37.6 Footer contact block ------------------------------------------ */

.footer-contact {
  margin-top: 1.4rem;
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--white-74);
}

.footer-contact a { color: var(--white-86); }
.footer-contact a:hover { color: var(--white); }

.footer-legal {
  margin-top: 1.1rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--white-58);
}

/* ==========================================================================
   38. SECOND TYPE PASS — elegance over scale
   Everything steps down again and the letterforms are given more air.
   ========================================================================== */

body {
  font-size: 16px;
  line-height: 1.75;
}

/* --- 38.1 Display sizes ------------------------------------------------- */

.display-xl {
  font-size: clamp(1.5rem, 3.1vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
}

.display-lg {
  font-size: clamp(1.1rem, 1.75vw, 1.5rem);
  line-height: 1.22;
  letter-spacing: -0.008em;
}

.display-md {
  font-size: clamp(1.1rem, 1.75vw, 1.5rem);
  line-height: 1.22;
  letter-spacing: -0.008em;
}

.display-md[style*="font-size"],
.display-lg[style*="font-size"] {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem) !important;
}

@media (max-width: 900px) {
  .display-xl { font-size: clamp(1.4rem, 5vw, 2.05rem); }
  .display-lg { font-size: clamp(1.06rem, 3.6vw, 1.36rem); }
  .display-md { font-size: clamp(1.06rem, 3.6vw, 1.36rem); }
}

@media (max-width: 640px) {
  .display-xl { font-size: 1.62rem; }
  .display-lg { font-size: 1.18rem; }
  .display-md { font-size: 1.18rem; }
  .display-md[style*="font-size"],
  .display-lg[style*="font-size"] { font-size: 1.14rem !important; }
}

/* --- 38.2 Reading sizes ------------------------------------------------- */

.lede {
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.85;
}

.copy,
.copy p {
  font-size: clamp(0.94rem, 1.02vw, 1rem);
  line-height: 1.85;
}

.italic-line {
  font-size: clamp(0.95rem, 1.1vw, 1.06rem);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .lede { font-size: 0.98rem; line-height: 1.8; }
  .copy, .copy p { font-size: 0.94rem; line-height: 1.8; }
  .italic-line { font-size: 0.95rem; }
}

/* --- 38.3 Sub-headings — the places that still read heavy --------------- */
/*
  These carried inline sizes set page by page. Held down here so the whole
  site keeps one voice.
*/

.botanical-head h3,
.faq-item h3 {
  font-size: clamp(0.98rem, 1.15vw, 1.08rem) !important;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.movement h3 {
  font-size: 0.82rem !important;
  letter-spacing: 0.24em;
}

.movement span[style*="font-style:italic"] {
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
}

.movement p,
.def-row p,
.botanical-row p:not(.italic-line) {
  font-size: 0.94rem;
  line-height: 1.8;
}

.def-row h3 {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
}

.botanical-meta span { font-size: 0.8rem; }
.botanical-meta em   { font-size: 0.56rem; letter-spacing: 0.28em; }

.cart-head h3,
.cart-head .cart-title,
.cart-drawer h3,
.cart-drawer .cart-title {
  font-size: 1rem;
  letter-spacing: 0.06em;
}

.eyebrow {
  font-size: clamp(0.6rem, 0.62vw, 0.67rem);
  letter-spacing: 0.34em;
}

.btn {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  min-height: 3.1rem;
}

.text-link {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
}

.site-footer,
.site-footer a,
.footer-label {
  font-size: 0.78rem;
}

.footer-label {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
}

/* ==========================================================================
   39. FOOTER — company record
   ========================================================================== */

.footer-grid { grid-template-columns: 2fr 1fr 0.9fr 1fr; }

.footer-contact {
  display: block;
  margin-top: 1.5rem;

  font-size: 0.78rem;
  font-style: normal;
  line-height: 1.85;
  letter-spacing: 0.012em;
  color: var(--white-74);
}

.footer-lines {
  display: block;
  margin-top: 0.9rem;
}

.footer-grid .footer-lines a {
  display: block;
  margin: 0 0 0.12rem !important;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--white-74) !important;
}

.footer-grid .footer-mail {
  display: inline-block;
  margin: 0.75rem 0 0 !important;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--white-86) !important;
}

.footer-grid .footer-lines a:hover,
.footer-grid .footer-mail:hover { color: var(--white) !important; }

.footer-legal {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--white-14);

  font-size: 0.66rem;
  line-height: 1.9;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--white-58);
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-contact { font-size: 0.8rem; }
}

/* --- 39.1 Footer web address ------------------------------------------- */

.footer-web {
  display: block;
  margin-top: 0.75rem;
}

.footer-grid .footer-web .footer-mail {
  display: block;
  margin: 0 0 0.12rem !important;
}

/* --- 40. Square-format photography in the full-bleed band --------------- */
/*
  A 1:1 source loses too much of its frame in a 16:9 band. This variant
  keeps a taller band so the composition survives.
*/

.full-bleed--square {
  aspect-ratio: 3 / 2;
  max-height: 88vh;
}

@media (max-width: 900px) {
  .full-bleed--square { aspect-ratio: 1 / 1; max-height: 72vh; }
}

/* --- 40.1 Botanical library groups -------------------------------------- */

.botanical-list .faq-group-label {
  margin: 4rem 0 1.4rem;
}

.botanical-list .faq-group-label:first-child {
  margin-top: 0;
}

.botanical-meta {
  flex-wrap: wrap;
  gap: 1.6rem 2.4rem;
}


/* --------------------------------------------------------------------------
   LEGAL PAGES — placeholder marks and footer policy row
   -------------------------------------------------------------------------- */

.ph {
  font-style: italic;
  color: var(--white-90);
  border-bottom: 1px dotted var(--white-42);
  padding-bottom: 1px;
}

.footer-policies {
  width: min(100%, var(--content-max));
  margin: 0 auto;
  padding-bottom: 1.5rem;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 2rem;
}

.footer-policies a {
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--white-58);
  text-decoration: none;
  transition: color 0.35s var(--ease);
}

.footer-policies a:hover,
.footer-policies a:focus-visible {
  color: var(--white);
}

@media (max-width: 640px) {
  .footer-policies { gap: 0.6rem 1.2rem; }
}

/* --------------------------------------------------------------------------
   41. PHOTOGRAPHIC PLATES — pictures shown whole
   --------------------------------------------------------------------------
   A full-bleed band must crop its picture to the band's ratio. For any
   photograph containing a person — and for any portrait or square frame —
   that crop cut heads, feet and shoulders at the edge. Those pictures now sit
   on a shadow field at their own proportions, uncropped. Still-life and
   architectural landscapes continue to use .full-bleed.
   -------------------------------------------------------------------------- */

.photo-plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: 100%;
  padding: clamp(3.2rem, 7vw, 7.5rem) var(--page-x);

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(rgba(26, 14, 11, 0.52), rgba(26, 14, 11, 0.52)),
    url("../img/menu-shadow.jpg") center / cover no-repeat;
}

.photo-plate img {
  display: block;

  width: auto;
  height: auto;

  max-width: min(100%, 880px);
  max-height: 82vh;

  object-fit: contain;

  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.55);
}

.photo-plate--wide img { max-width: min(100%, 1180px); }
.photo-plate--tall img { max-width: min(100%, 660px); }

@media (max-width: 900px) {
  .photo-plate img { max-height: 78vh; }
}

@media (max-width: 640px) {
  .photo-plate { padding: clamp(2.2rem, 8vw, 3.4rem) var(--page-x); }
  .photo-plate img { max-height: 72vh; }
}

/* --------------------------------------------------------------------------
   42. HERO FILM WITH A FIGURE IN FRAME
   --------------------------------------------------------------------------
   A 16:9 film held in a tall portrait viewport is cropped to a narrow centre
   column. On the Ritual film the seated figure sits right of centre, so a
   centred crop cut her shoulder at the frame edge on a phone. The crop is
   anchored to her instead, and the band is eased on the narrowest screens so
   the whole figure and the bowl stay inside the frame.
   -------------------------------------------------------------------------- */

.hero-video-wrap--figure > video,
.hero-video-wrap--figure > img {
  object-position: 65% center !important;
}

@media (max-width: 760px) {
  .hero-video-wrap--figure {
    height: auto !important;
    aspect-ratio: 3 / 4;
    min-height: 480px;
    max-height: 84svh;
  }
}

/* --------------------------------------------------------------------------
   43. JOURNAL — ARTICLE PAGES
   -------------------------------------------------------------------------- */

.article-head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;

  margin-top: 2rem;

  font-size: clamp(0.58rem, 0.66vw, 0.66rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--white-58) !important;
}

.article-meta span { color: var(--white-58) !important; }

.article-rule {
  width: 72px;
  margin: 3rem auto 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.article-body {
  max-width: 660px;
  margin: 0 auto;
}

.article-body p {
  margin: 0 0 1.5em;
  font-size: clamp(1.02rem, 1.12vw, 1.12rem);
  line-height: 1.95;
  color: var(--white-86);
}

.article-body p:last-child { margin-bottom: 0; }

.article-body h2 {
  margin: 3.4rem 0 1.4rem;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  letter-spacing: 0.03em;
  line-height: 1.35;
}

.article-body .drop {
  font-style: italic;
  font-size: clamp(1.12rem, 1.4vw, 1.3rem);
  line-height: 1.8;
  color: var(--white-90);
}

.article-body blockquote {
  margin: 3rem 0;
  padding-left: 1.6rem;
  border-left: 1px solid rgba(255, 255, 255, 0.3);

  font-style: italic;
  font-size: clamp(1.1rem, 1.35vw, 1.26rem);
  line-height: 1.8;
  color: var(--white-90);
}

.article-foot {
  max-width: 660px;
  margin: 4.5rem auto 0;
  padding-top: 2.4rem;
  border-top: 1px solid var(--rule);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.journal-more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.6rem;

  max-width: 880px;
  margin: 0 auto;
}

.journal-more a {
  display: block;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  text-decoration: none;
}

.journal-more .eyebrow { display: block; margin-bottom: 0.9rem; }

.journal-more h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
}

@media (max-width: 720px) {
  .journal-more { grid-template-columns: 1fr; gap: 2rem; }
  .article-foot { flex-direction: column; align-items: flex-start; }
}

/* Journal index — published entries read as links without losing the setting */
.journal-entry a { text-decoration: none; }
.journal-entry a:hover h2 { opacity: 0.82; }


/* --------------------------------------------------------------------------
   MASTHEAD LEGIBILITY
   The wordmark sits over the first image on image-led pages. This keeps it
   readable whatever the photograph does at its top edge.
   -------------------------------------------------------------------------- */

.hero-video-wrap::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: 34%;

  background: linear-gradient(
    to bottom,
    rgba(18, 12, 10, 0.62) 0%,
    rgba(18, 12, 10, 0.34) 45%,
    rgba(18, 12, 10, 0) 100%
  );

  pointer-events: none;
}


/* ==========================================================================
   36. THE WALL — one background, everywhere
   --------------------------------------------------------------------------
   The site used to draw its section backgrounds from shadow-1..6.jpg. Those
   photographs are pale beige and badly out of focus — at full-bleed size the
   soft foliage reads as a smear rather than a shadow, and the flat sand tone
   drains the warmth out of every long passage of text.

   menu-shadow.jpg is the photograph the house actually wants: a dark, warm
   plaster wall with crisp palm shadows and visible texture in both the wall
   and the floor. It was already carrying the menu, the checkout and The
   Offering. Now it carries everything.

   It has been re-rendered at 2560px wide for this. At its old 1536px it was
   being upscaled by the browser on any wide monitor, which is the other half
   of why backgrounds looked soft.

   Variety now comes from WHERE the wall is cropped rather than from six
   different photographs. Each class below sits at a different point across
   the plaster, so consecutive sections still feel distinct — but none of them
   is pale and none of them is blurry.

   The floor occupies the lower third of the frame and is much lighter than
   the wall, so every position below stays in the upper half deliberately.
   ========================================================================== */

.bg-1,
.bg-2,
.bg-3,
.bg-4,
.bg-5,
.bg-6,
.bg-menu,
.section--burgundy {
  background-image:
    linear-gradient(rgba(24, 13, 10, .42), rgba(24, 13, 10, .42)),
    url("../img/menu-shadow.jpg") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

.bg-1     { background-position: 50% 30% !important; }
.bg-2     { background-position: 18% 34% !important; }
.bg-3     { background-position: 50% 24% !important; }
.bg-4     { background-position: 82% 38% !important; }
.bg-5     { background-position: 32% 20% !important; }
.bg-6     { background-position: 68% 30% !important; }
.bg-menu  { background-position: 50% 36% !important; }

/* A little more depth on the two darkest, tallest text walls, so a long
   read never flattens out. */
.bg-3,
.bg-6 {
  background-image:
    linear-gradient(rgba(24, 13, 10, .50), rgba(24, 13, 10, .50)),
    url("../img/menu-shadow.jpg") !important;
}

/* Sections with no bg-N class of their own inherited shadow-1.jpg. */
.section {
  background-image:
    linear-gradient(rgba(24, 13, 10, .44), rgba(24, 13, 10, .44)),
    url("../img/menu-shadow.jpg");
  background-size: cover;
  background-position: 50% 30%;
  background-repeat: no-repeat;
}

/* The page behind everything was a pale sand (#83705a) that showed through
   at the edges of the scroll and on overscroll. */
body {
  background: #241710;
}

/* The footer was the palest, blurriest panel on the site. */
.site-footer {
  background:
    linear-gradient(rgba(24, 13, 10, .62), rgba(24, 13, 10, .62)),
    url("../img/menu-shadow.jpg") 50% 28%/cover no-repeat !important;
}

/* --------------------------------------------------------------------------
   Photo blocks used to sit on a pale sand placeholder (--sand-deep, #81694d)
   and were topped and tailed with sand-coloured gradient washes. On a slow
   connection every full-bleed photograph flashed that pale block before the
   image arrived, and the washes lightened the edge of each picture where it
   meets the wall. Both now sit in the same dark as everything else, so a
   photograph fades in out of the dark rather than off a beige card.
   -------------------------------------------------------------------------- */

.full-bleed,
.photo-plate,
.photo-plate--wide,
.photo-plate--tall {
  background-color: #241710 !important;
}

.full-bleed::before {
  background: linear-gradient(to bottom, rgba(24, 13, 10, .38), transparent) !important;
}

.full-bleed::after {
  background: linear-gradient(to top, rgba(24, 13, 10, .46), transparent) !important;
}

/* html itself also carried the pale sand — visible on overscroll. */
html {
  background: #241710;
}


/* ==========================================================================
   37. SANDSTONE — the daylight half of the rhythm
   --------------------------------------------------------------------------
   Section 36 put one dark plaster wall behind every section. That fixed the
   pale, blurry backgrounds and broke something else: with nothing light left,
   the site ran 99% dark, and the FAQ went nine screens without a single
   change of light. Darkness stops being atmospheric when it is continuous.

   These classes reintroduce daylight SELECTIVELY, on text-led sections only,
   so a page moves dark -> sandstone -> dark, the way a house moves from a
   shaded room into a courtyard and back.

   WHY NEW CLASSES AND NOT EDITS TO bg-1..6.
   Those are shared with sections that must stay cinematic — and with
   Arrival, which is not to be touched at all. Editing them would reach
   places this work has no business reaching. Nothing below alters an
   existing class; each is applied deliberately, one section at a time.

   TYPOGRAPHY IS UNCHANGED. The site's ivory type stays ivory everywhere,
   on sandstone exactly as on the dark wall — so every existing colour
   token, heading, rule and inline style is left alone.

   That decision sets the brief for these backgrounds: each has to be light
   and warm enough to break the darkness, and dark enough that white type
   still clears 4.5:1. The overlays below are tuned per image to land every
   sandstone section between luminance 100 and 112 — comfortably readable,
   and 20 to 50 points lighter than the plaster wall it sits between, which
   is where the rhythm comes from. The overlay tone is a warm brown rather
   than grey or black, so the sandstone stays sandstone.
   ========================================================================== */

.bg-sand {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: scroll !important;
  position: relative;
}

.bg-sand > * { position: relative; z-index: 2; }

/* --- the two architectural assets ------------------------------------
   These carry the daylight. Both re-rendered at 2560px; at their native
   1536 a wide monitor stretches them and the softness returns.
   Position keeps type off the busiest shadow mass. */

/* Court is the brightest source (luminance 145), so it takes the heaviest
   overlay — .30 brings it to about 111. */

/* Ledge starts darker (109) and has the strongest directional light of
   the four, so it needs almost nothing — .10 lands it near 101. */

/* --- the two flat assets ----------------------------------------------
   Almost no tonal structure in these (standard deviation 11.5, against 26
   and 34 for the two above), so they are used only where a section is wide
   and short enough that `cover` barely crops them — near their native 16:9.
   On a tall section they become a flat panel, which is the thing this work
   exists to avoid. */

/* The two wall crops. Same photographs, same light, floor removed — so a
   tall section can use them without the type landing on hot stone. These
   carry most of the daylight now; the flat frond assets are used once. */

.bg-sand--wall {
  background-image:
    linear-gradient(rgba(46, 28, 18, .02), rgba(46, 28, 18, .02)),
    url("../img/sandstone-wall.jpg") !important;
  background-position: 50% 46% !important;
}

.bg-sand--wall-2 {
  background-image:
    linear-gradient(rgba(46, 28, 18, .02), rgba(46, 28, 18, .02)),
    url("../img/sandstone-wall-2.jpg") !important;
  background-position: 46% 50% !important;
}

.bg-sand--frond-left {
  background-image:
    linear-gradient(rgba(46, 28, 18, .10), rgba(46, 28, 18, .10)),
    url("../img/sandstone-frond-left.jpg") !important;
  background-position: 50% 50% !important;
}

.bg-sand--frond-right {
  background-image:
    linear-gradient(rgba(46, 28, 18, .10), rgba(46, 28, 18, .10)),
    url("../img/sandstone-frond-right.jpg") !important;
  background-position: 50% 50% !important;
}




/* --- mobile ------------------------------------------------------------
   `cover` on a narrow, tall viewport crops to a vertical slice, and the
   slice these images happen to give is the busiest part of the frond —
   the worst place to put type. Each asset is re-positioned by hand so the
   text still lands on open plaster, and the two brightest take a little
   more overlay because a mobile crop loses the darker corners that were
   holding the average down. */

@media (max-width: 780px) {
  .bg-sand--wall         { background-position: 56% 46% !important; }
  .bg-sand--wall-2       { background-position: 40% 50% !important; }
  .bg-sand--frond-left   { background-position: 78% 50% !important; }
  .bg-sand--frond-right  { background-position: 22% 50% !important; }
}


/* A quieter button than the page CTAs — used for the ritual guide link,
   where the point is an elegant aside, not a call to action. */
.btn--sm {
  padding: 0.72rem 1.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
}

/* --------------------------------------------------------------------------
   The ritual figure video.

   It was inheriting the full-bleed hero treatment — 88vh, object-fit cover,
   frame pushed to 65% — which cropped exactly where the box sits.

   The fix is not to letterbox it (that left a brown margin above the
   footage) but to give the block the footage's OWN proportion. The file is
   1440x960, a clean 3:2, so at 3:2 `cover` and `contain` do the same thing:
   the video fills the block edge to edge, nothing is cropped, and no
   background shows anywhere. The frame is tall enough that the peacock mark
   in the header sits on the dark colonnade well above the box.

   Only the --figure variant is touched; Arrival keeps its full-height crop.
   -------------------------------------------------------------------------- */

.hero-video-wrap--figure {
  height: auto !important;          /* beats the inline height:88vh */
  min-height: 0 !important;
  aspect-ratio: 3 / 2;              /* exactly the video's own ratio */
}

.hero-video-wrap--figure > video,
.hero-video-wrap--figure > img {
  object-fit: cover !important;
  object-position: center center !important;   /* was 65%, which pushed the box off */
}

.hero-video-wrap--figure > .hero-scrim { opacity: .28; }

@media (max-width: 780px) {
  /* At 390px a true 3:2 block is only 260px tall and the header mark lands
     on the box. Taller and cropped — still no margin, since cover fills —
     keeps the mark clear while holding the box in frame. */
  .hero-video-wrap--figure { aspect-ratio: 3 / 4; }
  .hero-video-wrap--figure > video,
  .hero-video-wrap--figure > img { object-position: 50% 62% !important; }
}


/* --------------------------------------------------------------------------
   Instagram: the glyph alone, no ring around it.
   -------------------------------------------------------------------------- */

.footer-social a {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  padding: 0 !important;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  background: none !important;
  border: 0 !important;
  color: #fff !important;
}


/* ==========================================================================
   38. HOUSE CORRECTIONS — 26 August 2026
   Sharpness, type scale, and the new copy blocks
   --------------------------------------------------------------------------
   Three faults were reported and are answered here in order:

   1. BLURRED BACKGROUNDS. Two separate causes. The first was deliberate:
      .section::before/::after drew a pair of foliage silhouettes and softened
      them with filter: blur(15px), which sat over the plaster on EVERY
      section of the site. The second was the backdrop-filter on the cart
      scrim, the mobile menu and the zoom hint, which blurs whatever is behind
      it — the page itself. Both are removed. Nothing on the site is blurred
      now, on any breakpoint; where a panel needs to separate from the page it
      does so with opacity, not with a filter.

   2. THE MARK. The peacock leaf is a true vector (paths, no raster), so it
      could never blur from resolution — what softened it was its own
      drop-shadow at 14px of spread, which haloed every edge. It is now a
      tight 2px shadow: still lifted off a photograph, no bloom.

   3. TYPE. The August pass cut the display scale to a maximum of 1.85rem,
      which left headings smaller than the lede beneath them on a wide screen.
      The scale below is rebuilt to hold its proportions from 320px to 2560px:
      display sizes rise, body copy is given an explicit size rather than
      inheriting 17px, and every step is re-checked at the two mobile
      breakpoints instead of being scaled down blindly.
   ========================================================================== */

/* --- 38.1 Nothing is blurred --------------------------------------------- */

.section::before,
.section::after {
  display: none !important;
  content: none !important;
}

.cart-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(16, 8, 6, 0.74) !important;
}

.main-nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The overlay menu carries the same plaster photograph at every width —
   it is set unconditionally further up this file and must not be
   overridden here. Removing the blur was the whole job; replacing the
   background with a flat colour on a phone was not, and it stripped the
   menu of its ground. Only the blur is gone now. */

.zoom-hint {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(24, 13, 10, 0.72) !important;
}

/* --- 38.2 The mark stays crisp ------------------------------------------- */

.logo-img {
  filter: drop-shadow(0 1px 2px rgba(20, 8, 6, 0.55)) !important;
  shape-rendering: geometricPrecision;
  backface-visibility: hidden;
}

/* --- 38.3 Every full-bleed background is a 2560px asset -------------------
   The two frond photographs are 1920 wide. On any monitor past that they were
   being stretched, which is the softness that survived the August pass. The
   sandstone wall crops are 2560 and carry the same daylight, so the light /
   dark rhythm of each page is unchanged — only the file behind it is larger
   than the screen it has to fill. Positions are chosen so consecutive
   sandstone sections still crop to different parts of the wall.
   ------------------------------------------------------------------------- */

.bg-sand--frond-left {
  background-image:
    linear-gradient(rgba(46, 28, 18, .06), rgba(46, 28, 18, .06)),
    url("../img/sandstone-wall.jpg") !important;
  background-position: 24% 40% !important;
}

.bg-sand--frond-right {
  background-image:
    linear-gradient(rgba(46, 28, 18, .06), rgba(46, 28, 18, .06)),
    url("../img/sandstone-wall-2.jpg") !important;
  background-position: 72% 56% !important;
}

@media (max-width: 780px) {
  .bg-sand--frond-left  { background-position: 34% 44% !important; }
  .bg-sand--frond-right { background-position: 62% 52% !important; }
}

/* --- 38.4 The display scale ---------------------------------------------- */

.display-xl {
  font-size: clamp(1.85rem, 3.5vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -0.024em;
}

.display-lg {
  font-size: clamp(1.45rem, 2.3vw, 2.05rem);
  line-height: 1.18;
  letter-spacing: -0.016em;
}

.display-md {
  font-size: clamp(1.32rem, 2vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: -0.014em;
}

.display-xl,
.display-lg,
.display-md {
  overflow-wrap: break-word;
}

/* Headings that carry their own inline size (journal cards, the two-column
   blocks on Arrival) step with the scale instead of against it. */
.display-md[style*="font-size"],
.display-lg[style*="font-size"] {
  font-size: clamp(1.2rem, 1.7vw, 1.55rem) !important;
}

/* --- 38.5 Body, lede and the small caps ---------------------------------- */

.copy,
.copy p {
  font-size: clamp(1rem, 1.02vw, 1.1rem);
  line-height: 1.78;
}

.lede {
  font-size: clamp(1.05rem, 1.18vw, 1.18rem);
  line-height: 1.75;
}

.lede p { font-size: inherit; line-height: inherit; }

.italic-line {
  font-size: clamp(1.05rem, 1.28vw, 1.2rem);
  line-height: 1.5;
}

.eyebrow {
  font-size: clamp(0.68rem, 0.74vw, 0.78rem);
  letter-spacing: 0.34em;
}

.page-tag {
  font-size: clamp(0.66rem, 0.76vw, 0.78rem) !important;
  letter-spacing: 0.34em;
}

/* --- 38.6 The same scale, checked on a phone ----------------------------- */

@media (max-width: 900px) {
  .display-xl { font-size: clamp(1.75rem, 5.8vw, 2.3rem); }
  .display-lg { font-size: clamp(1.38rem, 4.4vw, 1.72rem); }
  .display-md { font-size: clamp(1.28rem, 4vw, 1.55rem); }
  .display-md[style*="font-size"],
  .display-lg[style*="font-size"] { font-size: clamp(1.18rem, 3.6vw, 1.4rem) !important; }
  .lede { font-size: 1.1rem; }
  .copy, .copy p { font-size: 1.02rem; }
}

@media (max-width: 640px) {
  .display-xl { font-size: clamp(1.65rem, 6.6vw, 2.05rem); }
  .display-lg { font-size: clamp(1.32rem, 5.2vw, 1.58rem); }
  .display-md { font-size: clamp(1.24rem, 4.8vw, 1.46rem); }
  .display-md[style*="font-size"],
  .display-lg[style*="font-size"] { font-size: clamp(1.15rem, 4.4vw, 1.34rem) !important; }
  .italic-line { font-size: 1.04rem; }
  .eyebrow { font-size: 0.68rem; letter-spacing: 0.3em; }
}

/* --- 38.7 How to Prepare the Ritual --------------------------------------
   Was set in wide-tracked uppercase at 1.05rem, which read as a specification
   sheet. It is now the same title-case serif as every other heading on the
   site, one step below display-md so it sits under the section rather than
   competing with it.
   ------------------------------------------------------------------------- */

.method-title {
  margin: 0;
  font-size: clamp(1.12rem, 1.5vw, 1.34rem);
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0.004em;
  text-transform: none;
  color: var(--white);
}

.method-copy {
  margin: 0.85rem 0 0;
  max-width: 52ch;
  font-size: clamp(1rem, 1.02vw, 1.08rem);
  line-height: 1.72;
  color: var(--ink-soft);
}

.method-note {
  margin: 1.8rem 0 0;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* --- 38.8 The seven botanicals, in brief ---------------------------------
   The product page names the composition; the Botanical Library tells its
   story. Two columns of short entries, one column on a phone.
   ------------------------------------------------------------------------- */

.botanical-briefs {
  width: min(100%, var(--content-max));
  margin: 3rem auto 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
}

.botanical-brief {
  padding: 1.7rem 2rem 1.7rem 0;
  border-bottom: 1px solid var(--rule);
}

.botanical-brief h3 {
  margin: 0;
  font-size: 1.16rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--white);
}

.botanical-latin {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-style: italic;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.botanical-brief p {
  margin: 0.7rem 0 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--white-86);
}

.botanical-dosha {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 780px) {
  .botanical-briefs { grid-template-columns: minmax(0, 1fr); }
  .botanical-brief { padding-right: 0; }
}

/* --- 38.9 Library entries and the purchase inclusions --------------------- */

.botanical-label {
  margin: 1.5rem 0 0;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white-58);
}

.botanical-body {
  margin: 0.55rem 0 0;
  max-width: 62ch;
  font-size: clamp(0.98rem, 1vw, 1.06rem);
  line-height: 1.75;
  color: var(--ink-soft);
}

.purchase-inclusions {
  margin: 1rem 0 0;
  font-size: 0.86rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--white-86);
}

/* --- 38.10 Daylight, but never at the cost of the words -------------------
   The sandstone sections carried a 2% overlay, which left ivory type sitting
   on stone bright enough to fight it — the copy read washed out on a large
   screen and worse on a phone in daylight. Each overlay below is deepened so
   every sandstone section holds white text well clear of 4.5:1, while staying
   20 to 40 points lighter than the plaster wall either side of it. The
   rhythm of the page is unchanged; only the contrast within it is.
   ------------------------------------------------------------------------- */

.bg-sand--wall {
  background-image:
    linear-gradient(rgba(38, 23, 15, .17), rgba(38, 23, 15, .17)),
    url("../img/sandstone-wall.jpg") !important;
}

.bg-sand--wall-2 {
  background-image:
    linear-gradient(rgba(38, 23, 15, .17), rgba(38, 23, 15, .17)),
    url("../img/sandstone-wall-2.jpg") !important;
}

.bg-sand--frond-left {
  background-image:
    linear-gradient(rgba(38, 23, 15, .21), rgba(38, 23, 15, .21)),
    url("../img/sandstone-wall.jpg") !important;
}

.bg-sand--frond-right {
  background-image:
    linear-gradient(rgba(38, 23, 15, .21), rgba(38, 23, 15, .21)),
    url("../img/sandstone-wall-2.jpg") !important;
}


/* ==========================================================================
   39. HOUSE CORRECTIONS — 26 August 2026, second pass
   The mark, and the Arrival hero
   ========================================================================== */

/* --- 39.1 THE PEACOCK MARK, PROPERLY CRISP -------------------------------
   7.x cut the mark's drop-shadow from 14px to 2px, which removed the halo
   but not the softness — because the shadow itself was the cause. A CSS
   `filter` forces the element into a rasterised layer, and Safari on macOS
   rasterises an <img> carrying an SVG at its CSS size rather than at the
   screen's pixel density. On a Retina display that means a 2204x2785 vector
   was being drawn once at about 168 CSS pixels and then scaled up 2x — the
   one way to make a vector blurry.

   No filter at all now. The SVG renders as vector, at whatever density the
   screen has, and stays sharp at any size. The mark sits over photographs,
   so its legibility comes from the masthead gradient already painted across
   the top of every hero (section 36) rather than from a shadow of its own.

   It is also about a tenth larger, as asked.
   ------------------------------------------------------------------------- */

.logo-img {
  filter: none !important;
  height: clamp(7rem, 11.6vw, 11.6rem);
  width: auto;
  display: block;
  shape-rendering: geometricPrecision;
  image-rendering: auto;
}

@media (max-width: 920px) { .logo-img { height: 6.9rem; } }
@media (max-width: 780px) { .logo-img { height: 6.6rem; } }
@media (max-width: 640px) { .logo-img { height: 6.2rem; } }

/* The bag icon carried the same kind of shadow. Same treatment. */
.bag-icon {
  filter: none !important;
}

/* --- 39.2 THE ARRIVAL HERO, LESS VEILED ----------------------------------
   Two dark gradients sat over the film: a scrim across the whole frame and
   a masthead wash covering the top third at 62% black. Between them the
   hero read murky rather than dark. Both are lightened — enough that the
   wordmark still clears the footage, not so much that the film is behind a
   curtain.
   ------------------------------------------------------------------------- */

.hero-scrim {
  background:
    linear-gradient(
      180deg,
      rgba(16, 7, 5, 0.14) 0%,
      rgba(16, 7, 5, 0.00) 34%,
      rgba(16, 7, 5, 0.00) 67%,
      rgba(16, 7, 5, 0.20) 100%
    ) !important;
}

.hero-video-wrap::after {
  height: 30% !important;
  background: linear-gradient(
    to bottom,
    rgba(18, 12, 10, 0.42) 0%,
    rgba(18, 12, 10, 0.18) 45%,
    rgba(18, 12, 10, 0) 100%
  ) !important;
}


/* ==========================================================================
   40. BACKGROUNDS — REVERTED TO THE 10.0 PHOTOGRAPHS, 26 August 2026
   --------------------------------------------------------------------------
   10.1 replaced the section backgrounds with two seamless tiles, because
   `background-size: cover` sizes a photograph to the SECTION rather than the
   screen — so a 6,395px page was blowing a 2,560px image up 7.5x. The tiles
   fixed the sharpness and cost the photographs their depth.

   Reverted at request: the photographic plates of 10.0 are back exactly as
   they were, and on the longest pages the stretch comes back with them.
   Nothing else from 10.1 is undone — the journal card sizing below stays.

   The two tile files are still in assets/img and are simply no longer
   referenced. Restoring this block from CHANGES-2026-08-26-b.txt, section
   WBZ 10.1, brings them back.
   ========================================================================== */

/* --- 40.0b THE BEIGE SECTIONS — BACK TO THE PHOTOGRAPHS ------------------
   The tile is dropped. The light sections use the daylight plates again, as
   they did before 6.4 — including the two frond photographs, restored from
   the original build and re-rendered at 2560px.

   Which plate a section gets is decided by how tall it is, because that is
   what decides whether `cover` stretches it:

     short sections (under ~900px)   the frond plates, 2560x1440
     taller sections (900-2000px)    the wall crops, 2560x2400

   At those pairings nothing exceeds about 1.25x on a 2x screen. Any beige
   section taller than that has been moved to the dark plaster instead —
   there is no light plate tall enough to fill it without smearing, and that
   was the whole fault.
   ------------------------------------------------------------------------- */

.bg-sand--frond-left {
  background-image:
    linear-gradient(rgba(38, 23, 15, .18), rgba(38, 23, 15, .18)),
    url("../img/sandstone-frond-left.jpg") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-attachment: scroll !important;
}

.bg-sand--frond-right {
  background-image:
    linear-gradient(rgba(38, 23, 15, .18), rgba(38, 23, 15, .18)),
    url("../img/sandstone-frond-right.jpg") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-attachment: scroll !important;
}

.bg-sand--wall {
  background-image:
    linear-gradient(rgba(38, 23, 15, .17), rgba(38, 23, 15, .17)),
    url("../img/sandstone-wall.jpg") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: 50% 46% !important;
  background-attachment: scroll !important;
}

.bg-sand--wall-2 {
  background-image:
    linear-gradient(rgba(38, 23, 15, .17), rgba(38, 23, 15, .17)),
    url("../img/sandstone-wall-2.jpg") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: 46% 50% !important;
  background-attachment: scroll !important;
}

@media (max-width: 780px) {
  .bg-sand--frond-left  { background-position: 78% 50% !important; }
  .bg-sand--frond-right { background-position: 22% 50% !important; }
  .bg-sand--wall        { background-position: 56% 46% !important; }
  .bg-sand--wall-2      { background-position: 40% 50% !important; }
}


/* --- 40.1 The journal cards, one size -------------------------------------
   The first entry was set in display-lg and the two below it in display-md
   with an inline size, so the page opened large and then shrank for no
   reason a reader could see. All three are one size now.
   ------------------------------------------------------------------------- */

.journal-entry h2,
.journal-entry .display-lg,
.journal-entry .display-md {
  font-size: clamp(1.32rem, 2vw, 1.8rem) !important;
  line-height: 1.2;
  letter-spacing: -0.014em;
}

@media (max-width: 640px) {
  .journal-entry h2,
  .journal-entry .display-lg,
  .journal-entry .display-md {
    font-size: clamp(1.24rem, 4.8vw, 1.46rem) !important;
  }
}


/* ==========================================================================
   42. THE TWO LONG PAGES — SPLIT INTO SLABS, ON ONE CONTINUOUS WALL
   --------------------------------------------------------------------------
   Enquiries & Care ran 3,653px of questions in one section and the Botanical
   Library 4,436px in another. `cover` sizes a photograph to its section, so
   both were smearing it — 3.4x and 3.7x.

   Each is now cut into five sections, at the seams the content already had:
   the FAQ at its question groups, the Library at its botanical entries. No
   page got longer and nothing moved; the wall behind them is simply no
   longer one enormous box.

   SEAMLESS IS THE POINT. Each slab carries the SAME daylight photograph, so
   what runs down the page is one wall rather than five different crops:

     · on a pointer screen the background is FIXED to the viewport, so the
       five slabs show one continuous, unbroken image while the text scrolls
       over it — there is no join to see, and the wall is drawn at viewport
       size, never at section size, so it cannot stretch;

     · on a phone, where iOS ignores a fixed background, each slab falls back
       to `cover` — and because a slab is now 700-1,100px rather than 4,000,
       cover no longer stretches anything. The positions step down the wall
       slab by slab so it still reads as one continuous surface.

   Measured after: both pages sit at about 1.17x, the same as every other
   page on the site.
   ========================================================================== */

.bg-slab {
  position: relative;

  /* The light plate — the one asked for by name. It is the brightest of the
     four and the least busy, which is what a page of small text needs. */
  background-image:
    linear-gradient(rgba(38, 23, 15, .13), rgba(38, 23, 15, .13)),
    url("../img/sandstone-frond-left.jpg") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: 50% 50% !important;

  /* One wall behind all five. */
  background-attachment: fixed !important;
}

/* Slabs sit flush against each other — the wall must not be interrupted by
   the usual section padding rhythm. */
.bg-slab + .bg-slab {
  padding-top: 0 !important;
}

.bg-slab:has(+ .bg-slab) {
  padding-bottom: clamp(2.4rem, 4vw, 3.6rem) !important;
}

/* --- phones: no fixed attachment, so each slab takes its own crop --------
   Stepping the position down the wall keeps the surface continuous from one
   slab to the next. */
@media (max-width: 780px) {
  .bg-slab {
    background-attachment: scroll !important;
  }
  .bg-slab--1 { background-position: 50% 8%  !important; }
  .bg-slab--2 { background-position: 50% 32% !important; }
  .bg-slab--3 { background-position: 50% 56% !important; }
  .bg-slab--4 { background-position: 50% 80% !important; }
}

/* Safari on iOS also ignores `fixed`; the same fallback applies wherever a
   pointer is coarse, which is the honest test for it. */
@media (hover: none) and (pointer: coarse) {
  .bg-slab { background-attachment: scroll !important; }
}


/* --------------------------------------------------------------------------
   24. PURCHASE BLOCK — refinement pass
   The buying decision has to be answerable without scrolling away from it:
   what it is, what is in the box, how it is used, the price, the tax, the
   delivery, the quantity. Understated, but never vague.
   -------------------------------------------------------------------------- */

.purchase {
  border-top: 1px solid var(--rule);
  padding-top: 2rem;
}

.purchase-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;

  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}

.purchase-name {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--white);
}

.purchase-price {
  font-size: 1.05rem;
  color: var(--white);
  white-space: nowrap;
}

.purchase-sub {
  margin: 0.95rem 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--white-86);
  text-wrap: pretty;
}


.purchase-qty {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin: 2rem 0 1.9rem;
}

.purchase-qty-label {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white-74);
}

.purchase-qty-val {
  min-width: 1.8ch;
  text-align: center;
  font-size: 1.1rem;
  color: var(--white);
}

.purchase-total {
  margin-left: auto;
  font-size: 1.4rem;
  color: var(--white);
  white-space: nowrap;
}

.purchase-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.purchase-confirm {
  margin: 1.15rem 0 0;
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--sand-light);
}

.purchase-care {
  margin: 1.5rem 0 0;
  font-size: 0.8rem;
}

/* The quantity controls carry a real border on a dark ground rather than
   a suggestion of one, and read as unavailable when they are. */
.qty-btn--quiet {
  border-color: var(--white-42);
}

.qty-btn[disabled],
.qty-btn[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
}

@media (max-width: 560px) {
  .purchase-actions {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  /* Comfortably tappable, without inflating the desktop control. */
  .purchase-actions .btn {
    min-height: 3.25rem;
  }

  .purchase-qty {
    gap: 1.1rem;
  }

  .purchase-qty .qty-btn {
    min-width: 2.85rem;
    min-height: 2.85rem;
  }
}


/* --------------------------------------------------------------------------
   25. RITUAL CARE — safety, present but quiet
   Visible where it is needed, in the House's register, and deliberately
   set below the four movements so it never opens the page.
   -------------------------------------------------------------------------- */

.ritual-care {
  max-width: 46rem;
  margin: 3.2rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--white-14);
}

.ritual-care p {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--white-74);
  text-wrap: pretty;
}

.ritual-care p:last-child {
  margin-bottom: 0;
}

.ritual-care em {
  font-style: italic;
  color: var(--white-86);
}

.ritual-care-more {
  margin-top: 1.4rem !important;
}


/* --------------------------------------------------------------------------
   26. CONCIERGE — contact, labels and error states
   -------------------------------------------------------------------------- */

.concierge-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 2.4rem;
  margin-top: 1.3rem;
}

.field-note {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.76rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--white-68);
}

.field-error {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--sand-light);
}

.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--sand-light);
}


@media (max-width: 560px) {
  .concierge-contacts {
    flex-direction: column;
    gap: 0.75rem;
  }
}


/* --------------------------------------------------------------------------
   27. FOOTER — spacing, and numbers you can actually tap
   The address, the landmark and the three telephone lines used to run
   together as one block set 0.12rem apart, which read as a paragraph
   rather than as three separate things, and gave each number a target
   about eighteen pixels tall on a phone.
   -------------------------------------------------------------------------- */

.footer-lines {
  margin-top: 1.15rem;
}

.footer-grid .footer-lines a {
  margin: 0 !important;
  padding: 0.3rem 0;
  line-height: 1.5;
}

.footer-grid .footer-mail {
  margin: 1rem 0 0 !important;
  padding: 0.3rem 0;
}

.footer-social {
  display: inline-block;
  margin-top: 1.15rem;
}

.footer-legal {
  margin-top: 1.5rem;
  line-height: 1.85;
}

.footer-policies a {
  padding: 0.35rem 0;
}

@media (max-width: 720px) {
  /* Every contact line becomes a full-width, comfortably tappable row,
     and the columns get enough air to be scanned rather than read. */
  .footer-grid .footer-lines a,
  .footer-grid .footer-mail {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.15rem 0;
    font-size: 0.86rem;
  }

  .footer-contact {
    font-size: 0.84rem;
    line-height: 1.9;
  }

  .footer-label {
    margin-bottom: 0.75rem;
  }

  .footer-grid a:not(.wordmark) {
    margin: 0 !important;
    padding: 0.42rem 0;
  }

  .footer-policies {
    row-gap: 0.2rem;
  }

  .footer-base {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    text-align: left;
  }
}


/* --------------------------------------------------------------------------
   28. CONTRAST — the small labels
   Measured against the real rendered ground (worst-case bright pixel behind
   each block, sampled from a screenshot at 1440 and 390), the uppercase
   micro-labels were the only text on the site falling below WCAG AA:
   .eyebrow reached 2.89:1 over the lighter sandstone plates, .faq-group-label
   and .botanical-label 3.36:1. They are 10-15px, tracked out to 0.3em, and
   set over photographs — the hardest thing here to read and the easiest to
   lift without touching the mood.

   Each is raised just enough to clear AA. Every one stays below the body
   copy it sits above, so the quiet hierarchy is unchanged: label softer
   than heading, heading brighter than body. Nothing else moves.
   -------------------------------------------------------------------------- */

.eyebrow,
.eyebrow--light {
  color: rgba(255, 255, 255, 0.88) !important;
}

.faq-group-label {
  color: rgba(255, 255, 255, 0.88) !important;
}

.botanical-label {
  color: rgba(255, 255, 255, 0.9) !important;
}

.italic-line {
  color: rgba(255, 255, 255, 0.9) !important;
}

.botanical-body,
.method-copy,
.notice p {
  color: rgba(255, 255, 255, 0.9);
}

.botanical-latin,
.article-meta span {
  color: rgba(255, 255, 255, 0.78) !important;
}

.footer-label {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* A hairline of shadow under text that sits directly on a photograph. Not a
   scrim and not a gradient — it darkens only the pixels immediately behind
   the letterforms, which is what keeps small type legible over the lighter
   patches of sandstone without lightening the page. */
.eyebrow,
.eyebrow--light,
.italic-line,
.faq-group-label,
.botanical-label,
.botanical-latin,
.botanical-body,
.method-copy,
.notice p,
.copy p,
.lede p {
  text-shadow: 0 1px 3px rgba(10, 6, 5, 0.5);
}

/* The menu sits on its own near-black ground and needs none of it. */
.main-nav .eyebrow,
.cart-drawer .cart-note,
.site-footer .copy p {
  text-shadow: none;
}


/* --------------------------------------------------------------------------
   29. WEB ADDRESSES ARE NOT SHOUTED
   The menu foot, the concierge contact pair and the ritual-guide link all
   sit inside rules that set text-transform: uppercase, so the House's own
   email rendered as CONCIERGE@ZANAR.IN and the guide as GUIDE.ZANAR.IN.
   An address is a literal string; capitalising it is a typographic choice
   made about something that has no case to give. Everything else in those
   rules stays uppercase, as drawn.
   -------------------------------------------------------------------------- */

.is-address {
  text-transform: none !important;
  letter-spacing: 0.06em;
}


/* --------------------------------------------------------------------------
   30. THE ARRIVAL CTA
   "Discover the Ritual" sits on moving film with no plate behind it, at
   90% white with a 42% rule under it. Raised to full white with a firmer
   rule and a hairline of shadow so it holds against the brightest frames.
   Scoped to the hero: every other text link on the site is unchanged.
   -------------------------------------------------------------------------- */

.hero-video-wrap .text-link {
  color: var(--white);
  text-shadow: 0 1px 12px rgba(8, 4, 4, 0.6);
}

.hero-video-wrap .text-link::after {
  background: var(--white-74);
}

.hero-video-wrap .text-link:hover::after,
.hero-video-wrap .text-link:focus-visible::after {
  background: var(--white);
}


/* ==========================================================================
   31. THE PURCHASE BLOCK, SHARPENED
   The block was reading soft. It sits on the lighter, blotchier part of
   the sandstone plate, where a 0.18-white hairline and a 0.62rem label
   tracked to 0.28em both lose their edges, and where two identical
   figures — the price at the head and the running total below it — had
   nothing to tell them apart.

   The photograph is untouched. What is added is a ground that deepens
   the plate behind this one block, faded at the top and masked at both
   sides so it has no visible boundary and never becomes a card. The
   same background, read against a darker part of itself.
   ========================================================================== */

.purchase {
  position: relative;

  border-top: 1px solid var(--white-42);
  padding: 2.1rem 0 0;
  margin: 0;
}

/* ---- the head: one name, one price, and what the price is for ---- */

.purchase-head {
  align-items: start;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--white-42);
}

.purchase-name {
  font-size: 1.02rem;
  letter-spacing: 0.055em;
  line-height: 1.4;
  color: var(--white);
}

.purchase-price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.18rem;
}

.purchase-price {
  font-size: 1.24rem;
  letter-spacing: 0.01em;
  color: var(--white);
}

.purchase-price-note {
  font-size: 0.62rem;
  font-style: italic;
  letter-spacing: 0.12em;
  color: var(--white-68);
  white-space: nowrap;
}

/* The name column carries a second, quieter line: what is in the box. It
   sits under the name rather than at the foot of the block, where it read
   as an afterthought and repeated the "seven" already in the name. */

.purchase-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.purchase-name-note {
  font-size: 0.72rem;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: var(--white-68);
  max-width: 44ch;
  text-wrap: pretty;
}

.purchase-sub {
  margin-top: 1rem;
  font-size: 0.86rem;
  color: var(--white-90);
}

/* ---- what the price includes: three quiet lines, not a table ---- */

.purchase-sub + .purchase-inclusions {
  margin-top: 0.65rem;
  font-size: 0.8rem;
  line-height: 1.65;
  letter-spacing: 0.03em;
  color: var(--white-74);
}

.purchase-inclusions + .purchase-sub {
  margin-top: 0.65rem;
}

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

.purchase-qty {
  gap: 1.2rem;
  margin: 1.7rem 0 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--white-28);
}

.purchase-qty-label {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: var(--white-74);
}

.purchase-qty-val {
  min-width: 2.2ch;
  font-size: 1.15rem;
}

/* Labelled, so the figure at the head and the figure here can never be
   read as the same number printed twice. */
.purchase-total-wrap {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.purchase-total-label {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white-74);
}

.purchase-total {
  margin-left: 0;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}

/* Two actions of different weight. Buy Now carries the brighter rule and
   a breath of ground behind it; Add to Cart stays the quieter of the
   two. Neither becomes a filled button — that is a different shop. */
.purchase-actions {
  gap: 1.1rem;
}

.purchase-actions .btn {
  min-height: 3.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
}

.purchase-actions #add-to-cart {
  border-color: var(--white-42);
  color: var(--white-86);
}

.purchase-actions #add-to-cart:hover {
  border-color: var(--white-74);
  color: var(--white);
}

.purchase-actions #buy-now {
  border-color: var(--white-90);
  background: rgba(255, 255, 255, 0.07);
  color: var(--white);
}

.purchase-actions #buy-now:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: var(--white);
}

.purchase-care {
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--white-20);
  font-size: 0.74rem;
}

.purchase-care .text-link {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
}

@media (max-width: 560px) {
  .purchase {
    padding: 1.8rem 0 0;
    margin: 0;
  }

  .purchase-head {
    grid-template-columns: 1fr auto;
  }

  .purchase-name {
    font-size: 0.95rem;
    line-height: 1.35;
  }

  .purchase-qty {
    flex-wrap: wrap;
    gap: 0.9rem 1rem;
    margin: 1.8rem 0 1.5rem;
  }

  /* Its own line, with the sum against the right edge where a total
     belongs, rather than sitting against its own label. */
  .purchase-total-wrap {
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid var(--white-20);
  }

  /* Stated rather than inherited: without it the figure grows to fill
     the row and its text sits against the label, which reads as a
     caption instead of a sum. */
  .purchase-total-label {
    flex: 0 0 auto;
  }

  /* An ID selector left over from the previous purchase layout sets
     #price-display to width:100% below 560px. It was written for a
     stacked row and, in the labelled total, stretched the figure across
     the line so it sat against its own label and overflowed the block
     by 54px. Undone here at matching specificity. */
  #price-display.purchase-total {
    width: auto;
    flex: 0 0 auto;
    margin-top: 0;
    margin-left: 0;
    text-align: right;
  }

  /* Keeps the arrow on the same line as the last word. */
  .purchase-care .text-link {
    font-size: 0.64rem;
    letter-spacing: 0.16em;
  }
}


/* ==========================================================================
   39. HERO FILM — 26 August 2026
   No still frame before the reel, and the whole frame in view.

   Both heroes carried a poster JPEG (hero-poster.jpg, ritual-poster.jpg).
   A poster is a photograph the browser paints and holds until the film has
   enough data to draw — so the House opened on a photograph that then
   jumped to a film. The posters are gone from the markup; the wrap's own
   House brown is what the film now fades up out of.

   The crop: both films are landscape, and both wraps were taller, relative
   to their width, than the film they hold. object-fit: cover then scales the
   film until it fills — which on Arrival meant cutting the sides off a
   100vh box, and on The Ritual meant a 3/2 frame holding a 16/9 film, about
   fifteen per cent of the width lost, the model with it.

   --hero-ar is written by zanar.js from the file's real videoWidth /
   videoHeight, so the box takes the film's own ratio whatever it is
   re-encoded to. 1.7778 (16:9) is the fallback if scripting is off.
   -------------------------------------------------------------------------- */

.hero-video-wrap[data-hero-fit] {
  height: min(100svh, calc(100vw / var(--hero-ar, 1.7778)));
  min-height: 460px;
  background-color: #21100d;
}

.hero-video-wrap--figure[data-hero-fit] {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: var(--hero-ar, 1.7778);
  max-height: 92svh;
}

.hero-video-wrap--figure[data-hero-fit] > video,
.hero-video-wrap--figure[data-hero-fit] > img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* 33.3 removed the posters because the House opened on a photograph that
   then jumped to a film, and replaced them with a blind 1.15s fade up out of
   House brown. That fade ran on page load whether or not the film ever
   arrived — so on any failure (a slow connection, a placeholder file, a
   browser that declines the codec) the hero was an empty dark rectangle with
   nothing in it. That is what a visitor was seeing.

   40.0 puts a still back, and removes the reason the old one jumped: the
   poster is now FRAME ONE OF THE FILM ITSELF, cut from the same encode
   (hero-poster.jpg / ritual-poster.jpg). The browser paints the still, the
   film starts on the identical frame, and there is no cut to see — but if
   the film never plays, the still is what stays on screen. The same image is
   also set as the wrap's background, so the hero holds a picture even if the
   video element is never painted at all.

   No opacity animation. Nothing here can leave the hero empty. */
.hero-film {
  opacity: 1;
  animation: none;
}

.hero-video-wrap,
.hero-video-wrap[data-hero-fit] {
  background-color: #21100d;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

@media (max-width: 780px) {
  .hero-video-wrap,
  .hero-video-wrap[data-hero-fit] { background-position: 50% 56%; }
}

/* Phones. A landscape film in a portrait box crops whatever we do; the point
   here is to stop the box being 100svh tall, which was the worst of it, and
   to hold the figure square rather than 3/4. */
@media (max-width: 780px) {
  .hero-video-wrap[data-hero-fit] {
    height: min(74svh, max(430px, calc(100vw / var(--hero-ar, 1.7778)))) !important;
    min-height: 0 !important;
  }

  .hero-video-wrap--figure[data-hero-fit] {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
    max-height: 74svh;
  }

  .hero-video-wrap--figure[data-hero-fit] > video,
  .hero-video-wrap--figure[data-hero-fit] > img {
    object-position: 50% 56% !important;
  }
}


/* ==========================================================================
   40. CONCIERGE — the sequence, and the sign-off
   -------------------------------------------------------------------------- */

.concierge-steps {
  list-style: none;
  margin: 2.8rem auto 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.8rem;

  text-align: left;
}

.concierge-steps > li {
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.concierge-steps .step-mark {
  display: block;
  margin-bottom: 1.1rem;

  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--white-68);
}

.concierge-steps h3 {
  margin: 0 0 0.75rem;

  font-size: 1.06rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: none;
}

.concierge-steps p {
  margin: 0;

  font-size: 0.95rem;
  line-height: 1.78;
  color: var(--white-68);
}

.concierge-intro {
  margin-bottom: 2.9rem;
}

@media (max-width: 820px) {
  .concierge-steps {
    grid-template-columns: 1fr;
    gap: 2.1rem;
  }
}


/* ==========================================================================
   41. WEBSITE 333.3 — THE ARRIVAL CTA, THE OFFERING PLATE, THE CONCIERGE CARD
   ========================================================================== */

/* --- 41.1 THE ARRIVAL CTA, ON A PHONE -------------------------------------
   The link over the hero film sat in a box positioned `left:50%`, which makes
   the containing block half the hero wide. Shrink-to-fit could therefore
   never exceed 195px on a 390px phone, so "Discover the Ritual" broke onto
   two lines inside an inline-block whose ::after rule is 100% wide. The
   result on every phone was two ragged lines of caps with a rule running
   past the end of the second one.

   The band is now full width with the link centred inside it, and the link
   itself does not wrap. The rule is exactly as wide as the words above it.
   ------------------------------------------------------------------------- */

.hero-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  z-index: 2;

  display: flex;
  justify-content: center;

  padding: 0 1.4rem;
  pointer-events: none;
}

.hero-cta > * { pointer-events: auto; }

.hero-cta .text-link {
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 780px) {
  .hero-cta {
    bottom: 7%;
  }

  .hero-cta .text-link {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
  }
}

@media (max-width: 360px) {
  .hero-cta .text-link {
    font-size: 0.66rem;
    letter-spacing: 0.16em;
  }
}

/* The Arrival hero was 430px on a phone, which reads as a banner rather than
   an opening. It is given a little more height without returning to the full
   viewport box that 33.3 removed. The film's own ratio still governs. */

@media (max-width: 780px) {
  .hero-video-wrap[data-hero-fit] {
    height: min(70svh, max(500px, calc(100vw / var(--hero-ar, 1.7778)))) !important;
  }
}

/* --- 41.2 THE OFFERING, ON DAYLIGHT ---------------------------------------
   One plate on the Arrival is now the light sandstone with the frond shadows
   across it, so the page has a single bright moment in the middle of it and
   the Offering is the sharpest thing on the page. The plate is deepened
   slightly under this section only, so white type and the outlined button
   keep their contrast against the brightest stone.
   ------------------------------------------------------------------------- */

.section--offering {
  position: relative;
  isolation: isolate;
}

.section--offering::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    radial-gradient(120% 90% at 50% 50%,
      rgba(38, 23, 15, 0.30) 0%,
      rgba(38, 23, 15, 0.22) 55%,
      rgba(38, 23, 15, 0.10) 100%);

  pointer-events: none;
}

.section--offering > * {
  position: relative;
  z-index: 2;
}

.section--offering .eyebrow,
.section--offering .display-md,
.section--offering .italic-line,
.section--offering .copy p {
  text-shadow: 0 1px 14px rgba(24, 13, 8, 0.42);
}

.section--offering .btn--light {
  border-color: var(--white-82);
  background: rgba(24, 13, 8, 0.14);
  backdrop-filter: blur(1px);
}

.section--offering .btn--light:hover,
.section--offering .btn--light:focus {
  background: rgba(24, 13, 8, 0.30);
  border-color: var(--white);
}

/* --- 41.3 THE CONCIERGE CARD ----------------------------------------------
   Two text-links side by side, each carrying its own full-width rule, read as
   two broken fragments rather than one address — worse still on a phone,
   where they stacked into two long lines ruled across the whole page.

   One column now. A label, the address set large in the serif with a rule
   the width of the address itself, one line of guidance, and a button that
   takes the visitor to the enquiry form further down the page. The telephone
   number is gone from this block; it remains in the footer and the menu.
   ------------------------------------------------------------------------- */

.concierge-card {
  max-width: 30rem;
  margin: 2.6rem auto 2.4rem;
  padding: 2.3rem 2rem 2.2rem;

  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);

  text-align: center;
}

.concierge-card__label {
  display: block;

  font-size: 0.64rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;

  color: var(--white-58);
}

.concierge-card__note {
  margin: 1.35rem auto 0;
  max-width: 26rem;

  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--white-68);
}

.concierge-card__cta {
  margin-top: 1.9rem;
  min-width: 15rem;
}

@media (max-width: 520px) {
  .concierge-card {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 2rem 0 1.9rem;
  }

  .concierge-card__cta {
    width: 100%;
    min-width: 0;
  }
}

/* --- 41.4 THE REFERENCE SHELF ---------------------------------------------
   A three-line academic citation set in tracked uppercase is close to
   unreadable. The references keep the serif, at reading size, with the rule
   under the link only.
   ------------------------------------------------------------------------- */

.ref-cite {
  margin: 0.9rem 0 0;
}

.ref-cite a {
  font-family: "Times New Roman", Times, serif;
  font-size: 0.86rem;
  line-height: 1.7;

  letter-spacing: 0.01em;
  text-transform: none;

  color: var(--white-82);

  border-bottom: 1px solid var(--white-42);
  padding-bottom: 0.1rem;

  transition: color 220ms ease, border-color 220ms ease;
}

.ref-cite a:hover,
.ref-cite a:focus-visible {
  color: var(--white);
  border-bottom-color: var(--white);
}

.ref-cite em { font-style: italic; }