/* ============================================================
   ZAYMAR — components.css
   Documented patterns. Same markup, same classes, every page.
   ============================================================

   PATTERN INDEX
   .site-header      fixed chrome, transparent → solid interpolation
   .nav-overlay      mobile full-screen menu
   .site-footer      footer with edition number + Arabic mark
   .media-slot       placeholder / media frame (crop-mark language)
   .product-card     fragrance card (home, collection, related)
   .cta / .btn       hairline-draw link CTA and solid button
   .sec-label        informational label row (number · category)
   .pyramid          olfactive profile tiers
   .ed-split         editorial split (media + copy, asymmetric)
   .camp-tile        campaign tile with runtime scrub-line
   .journal-row      typeset journal index row
   .newsletter       join-the-house moment
   .cursor-*         sillage bloom + label cursor
   .page-veil        house transition overlay
   .entrance         the loading screen
   ============================================================ */


/* ---- Header ---- */
.site-header {
  /* Sticky rather than fixed, so the header takes its width from the
     page itself. A fixed header is sized by the viewport, which is not
     always the same box as the document — and when they differ, the
     centred mark centres on the wrong one. The negative margin keeps
     the chrome overlaying the hero exactly as before. */
  position: sticky;
  top: 0;
  margin-bottom: calc(-1 * var(--header-h));
  z-index: var(--layer-header);
  transform: translateZ(0); /* own layer — never repaint on scroll */
  height: var(--header-h);
  /* --header-p: 0 transparent … 1 solid; lerped in js/modules/header.js */
  --header-p: 0;
  color: var(--header-fg-start, var(--z-ivory));
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--z-ivory);
  border-bottom: var(--hairline) solid var(--line-on-light);
  opacity: var(--header-p);
}
.site-header.is-solid { color: var(--z-ink); }
.site-header__in {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
}
/* The house mark, set as it is on the bottle: ZAYMAR over DUBAI,
   in the same Lora capitals the hero line wears. */
.site-header__mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.site-header__mark-name {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-h3);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
}
.site-header__mark-city {
  margin-top: 0.42em;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  opacity: 0.72;
}
/* The mark holds the centre of the header at every width — it is
   lifted out of the flow, so it centres on the screen itself and not
   on whatever room is left beside the menu. */
.site-header__in > .site-header__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.site-header__nav { display: flex; gap: var(--sp-l); }
.site-header__nav a,
.site-header__util a {
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.88;
  transition: opacity var(--dur-micro) var(--ease-enter);
}
.site-header__nav a:hover,
.site-header__nav a[aria-current='page'],
.site-header__util a:hover { opacity: 1; }
.site-header__nav a { position: relative; }
.site-header__nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.45em;
  width: var(--tick);
  height: var(--hairline);
  background: var(--z-bronze);
}
.site-header__util { display: flex; gap: var(--sp-m); align-items: center; }

/* The menu: three hairlines at the left of the header, on every
   width. They take the header's own colour, so they are ivory over
   the dark hero and ink once the chrome has gone solid. */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  padding: 0;
  color: inherit;
}
.nav-toggle__line {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-state) var(--ease-enter), width var(--dur-state) var(--ease-enter);
}
.nav-toggle__line:nth-child(2) { width: 16px; }
.nav-toggle:hover .nav-toggle__line:nth-child(2),
.nav-toggle:focus-visible .nav-toggle__line:nth-child(2) { width: 22px; }

@media (max-width: 56em) {
  .site-header__nav { display: none; }
  .site-header__util a { display: none; } /* Account/Bag live in the overlay */
  .site-header__in { justify-content: flex-start; }
  .site-header__util { order: -1; } /* the menu takes the left */
  .site-header__in .site-header__mark-name { font-size: var(--fs-body-lg); }
}

/* ---- Mobile nav overlay ---- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--layer-nav);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--header-h) + var(--sp-xl)) var(--margin) var(--sp-xl);
  background: var(--z-ink);
  color: var(--z-ivory);
  visibility: hidden;
  opacity: 0;
}
.nav-overlay.is-open { visibility: visible; opacity: 1; }
/* the entrance: the field fades, then the items rise in reading order.
   Class-driven and plain transitions, so the resting state is always
   reached — nothing waits on a frame or an event */
html.js-motion .nav-overlay {
  transition: opacity var(--dur-state) var(--ease-enter),
              visibility 0s linear var(--dur-state);
}
html.js-motion .nav-overlay.is-open { transition-delay: 0s; }
html.js-motion .nav-overlay__links > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-enter), transform 700ms var(--ease-enter);
}
html.js-motion .nav-overlay.is-open .nav-overlay__links > * { opacity: 1; transform: none; }
html.js-motion .nav-overlay.is-open .nav-overlay__links > :nth-child(1) { transition-delay: 60ms; }
html.js-motion .nav-overlay.is-open .nav-overlay__links > :nth-child(2) { transition-delay: 130ms; }
html.js-motion .nav-overlay.is-open .nav-overlay__links > :nth-child(3) { transition-delay: 200ms; }
html.js-motion .nav-overlay.is-open .nav-overlay__links > :nth-child(4) { transition-delay: 270ms; }
html.js-motion .nav-overlay.is-open .nav-overlay__links > :nth-child(5) { transition-delay: 340ms; }
html.js-motion .nav-overlay.is-open .nav-overlay__links > :nth-child(6) { transition-delay: 420ms; }
html.js-motion .nav-overlay.is-open .nav-overlay__links > :nth-child(7) { transition-delay: 480ms; }
.nav-overlay__links { display: flex; flex-direction: column; gap: var(--sp-m); }
.nav-overlay__links a {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  display: flex;
  align-items: baseline;
  gap: var(--sp-s);
}
.nav-overlay__links a .num { font-size: var(--fs-label); letter-spacing: 0.1em; }
.nav-overlay__kicker {
  font-family: var(--font-title);
  font-size: var(--fs-micro);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--z-gold);
  margin-bottom: var(--sp-xs);
}
.nav-overlay__links a.nav-overlay__minor {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--z-beige);
}
.nav-overlay__links a:not(.nav-overlay__minor) + .nav-overlay__minor { margin-top: var(--sp-m); }
.nav-overlay__kicker + a { margin-top: var(--sp-xs); }
.nav-overlay__minor + .nav-overlay__minor { margin-top: calc(-1 * var(--sp-xs)); }
.nav-overlay__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--z-beige);
}
.nav-overlay__ar { font-size: var(--fs-h2); color: var(--z-gold); }
.nav-overlay__close {
  position: absolute;
  top: calc((var(--header-h) - 1.5em) / 2);
  right: var(--margin);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
}

/* ---- Footer ----
   A closing band, plainly a footer: a shade lighter than the page,
   set smaller than the page's own type, in three tiers. The house
   mark and its line beside the ways to reach the house elsewhere;
   the chapter's four fragrances and the house's links in two neat
   columns; and the copyright line, with the city and the Arabic
   mark, under a hairline. Phone first. */
.site-footer {
  background: #15120F;
  border-top: var(--hairline) solid rgba(169, 143, 85, 0.22);
  padding: var(--sp-xl) 0 var(--sp-l);
  color: var(--z-ivory);
  --line: rgba(250, 248, 244, 0.1);
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-l);
}
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__brand .site-header__mark { font-size: var(--fs-h3); margin: 0; align-items: flex-start; }
.site-footer__brand .site-header__mark span { text-indent: 0; }
.site-footer__tag {
  margin-top: var(--sp-xs);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-body);
  color: var(--z-beige);
}
.site-footer__social { list-style: none; display: flex; gap: var(--sp-s); }
.site-footer__social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--hairline) solid rgba(169, 143, 85, 0.45);
  border-radius: 50%;
  color: var(--z-gold);
  transition: background-color var(--dur-micro) var(--ease-enter), color var(--dur-micro) var(--ease-enter);
}
.site-footer__social a:hover,
.site-footer__social a:focus-visible { background: var(--z-gold); color: var(--z-ink); }
.site-footer__social svg { display: block; }

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: var(--sp-l);
  padding-top: var(--sp-m);
  border-top: var(--hairline) solid var(--line);
}
.site-footer__col h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--z-gold);
  margin-bottom: var(--sp-s);
}
.site-footer__col ul { list-style: none; }
.site-footer__col li + li { margin-top: 0.4rem; }
.site-footer__col a {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1rem;
  color: var(--z-ivory);
  opacity: 0.82;
  transition: opacity var(--dur-micro) var(--ease-enter);
}
.site-footer__col a:hover,
.site-footer__col a:focus-visible { opacity: 1; }

.site-footer__base {
  margin-top: var(--sp-l);
  padding-top: var(--sp-m);
  border-top: var(--hairline) solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-xs) var(--sp-m);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgba(250, 248, 244, 0.5);
}
.site-footer__place { display: inline-flex; align-items: center; gap: var(--sp-xs); }
.site-footer__ar { font-family: var(--font-ar-text); font-size: var(--fs-body); letter-spacing: 0; color: var(--z-gold); }

@media (min-width: 56.01em) {
  .site-footer { padding: var(--sp-3xl) 0 var(--sp-l); }
  .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Media slot (placeholder / media frame) ----
   Crop-mark language: four corner ticks + centred metadata.
   Ratio comes from data-ratio; swapping in real media via the
   manifest causes zero layout shift. */
.media-slot {
  position: relative;
  overflow: clip;
  border-radius: var(--radius);
  background: var(--slot-bg, var(--z-ink));
  aspect-ratio: 4 / 5;
}
.media-slot[data-ratio='1/1']  { aspect-ratio: 1 / 1; }
.media-slot[data-ratio='4/5']  { aspect-ratio: 4 / 5; }
.media-slot[data-ratio='3/4']  { aspect-ratio: 3 / 4; }
.media-slot[data-ratio='2/3']  { aspect-ratio: 2 / 3; }
.media-slot[data-ratio='9/16'] { aspect-ratio: 9 / 16; }
.media-slot[data-ratio='5/4']  { aspect-ratio: 5 / 4; }
.media-slot[data-ratio='3/2']  { aspect-ratio: 3 / 2; }
.media-slot[data-ratio='16/9'] { aspect-ratio: 16 / 9; }
.media-slot[data-ratio='21/9'] { aspect-ratio: 21 / 9; }

/* Media reads as cinematic black frames on every surface —
   photography is one of the site's black moments. */
.media-slot { --slot-bg: var(--z-ink); }

.media-slot__frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2xs);
  text-align: center;
  padding: var(--sp-m);
  border: var(--hairline) solid var(--line-on-dark);
  border-radius: var(--radius);
}
/* corner crop marks */
/* brass corners — every photography frame is fitted like a case */
.media-slot__frame::before,
.media-slot__frame::after,
.media-slot__ticks::before,
.media-slot__ticks::after {
  content: '';
  position: absolute;
  width: var(--sp-s);
  height: var(--sp-s);
  border-color: var(--z-gold);
  border-style: solid;
  border-width: 0;
  opacity: 0.55;
}
.media-slot__frame::before { top: var(--sp-xs); left: var(--sp-xs); border-top-width: var(--hairline); border-left-width: var(--hairline); }
.media-slot__frame::after  { top: var(--sp-xs); right: var(--sp-xs); border-top-width: var(--hairline); border-right-width: var(--hairline); }
.media-slot__ticks::before { bottom: var(--sp-xs); left: var(--sp-xs); border-bottom-width: var(--hairline); border-left-width: var(--hairline); }
.media-slot__ticks::after  { bottom: var(--sp-xs); right: var(--sp-xs); border-bottom-width: var(--hairline); border-right-width: var(--hairline); }

.media-slot__label {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--z-beige);
}
.media-slot__subject {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h3);
  color: var(--z-ivory);
}
.media-slot__meta {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--z-taupe);
}

/* video placeholder: format marker + duration bar */
.media-slot--video .media-slot__format {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--z-beige);
  border: var(--hairline) solid var(--line-gold);
  border-radius: var(--radius);
  padding: var(--sp-2xs) var(--sp-xs);
  margin-bottom: var(--sp-xs);
}
.media-slot__scrub {
  position: absolute;
  left: var(--sp-m);
  right: var(--sp-m);
  bottom: var(--sp-m);
  height: var(--hairline);
  background: var(--line-on-dark);
}
.media-slot__scrub::before {
  content: '';
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--z-beige);
  transition: transform var(--dur-cine) var(--ease-enter);
}
.media-slot--video:hover .media-slot__scrub::before,
.media-slot--video:focus-within .media-slot__scrub::before { transform: scaleX(1); }
.media-slot__duration {
  position: absolute;
  right: var(--sp-m);
  bottom: calc(var(--sp-m) + var(--sp-xs));
  font-size: var(--fs-micro);
  letter-spacing: var(--track-micro);
  font-weight: 500;
  color: var(--z-taupe);
}

/* real media, swapped in by js/modules/media.js */
.media-slot > img,
.media-slot > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-slot.has-media .media-slot__frame,
.media-slot.has-media .media-slot__ticks,
.media-slot.has-media .media-slot__scrub,
.media-slot.has-media .media-slot__duration { display: none; }

/* ---- Product card ---- */
.product-card {
  display: block;
  position: relative;
}
.product-card__num,
.product-card__name,
.product-card__media,
.product-card__line,
.product-card__facets,
.coll-mood { display: block; }
.product-card__num {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: 0.08em;
  color: var(--accent);
}
.product-card__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  margin-top: var(--sp-2xs);
  transition: transform var(--dur-reveal) var(--ease-enter);
}
.product-card__media { margin-top: var(--sp-m); overflow: clip; border-radius: var(--radius); }
.product-card__media .media-slot {
  transition: transform var(--dur-reveal) var(--ease-enter);
}
.product-card__line {
  margin-top: var(--sp-m);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-body-lg);
  opacity: 0;
  transform: translateY(var(--sp-2xs));
  transition: opacity var(--dur-state) var(--ease-enter),
              transform var(--dur-state) var(--ease-enter);
}
.product-card__facets {
  margin-top: var(--sp-xs);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg2);
}
.product-card__cta {
  display: inline-block;
  margin-top: var(--sp-m);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: var(--sp-2xs);
  position: relative;
}
.product-card__cta::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--hairline);
  background: var(--accent, currentColor);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--dur-reveal) var(--ease-enter);
}
.product-card:hover .product-card__media .media-slot,
.product-card:focus-visible .product-card__media .media-slot { transform: scale(1.03); }
.product-card:hover .product-card__name,
.product-card:focus-visible .product-card__name { transform: translateX(var(--sp-2xs)); }
.product-card:hover .product-card__line,
.product-card:focus-visible .product-card__line { opacity: 1; transform: none; }
.product-card:hover .product-card__cta::after,
.product-card:focus-visible .product-card__cta::after { transform: scaleX(1); }

/* touch: descriptor always visible */
@media (hover: none) {
  .product-card__line { opacity: 1; transform: none; }
  .product-card__cta::after { transform: scaleX(1); opacity: 0.4; }
}

/* ---- CTA link (hairline draw) ---- */
.cta {
  display: inline-block;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: var(--sp-2xs);
  position: relative;
}
.cta::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--hairline);
  background: currentColor;
  opacity: 0.4;
  transition: opacity var(--dur-state) var(--ease-enter),
              background-color var(--dur-state) var(--ease-enter);
}
.cta:hover::after, .cta:focus-visible::after {
  opacity: 1;
  background: var(--accent, currentColor);
}

/* ---- Button (the one primary action per section) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: var(--sp-s) var(--sp-l);
  border: var(--hairline) solid currentColor;
  border-radius: var(--radius);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  transition: background-color var(--dur-state) var(--ease-enter),
              color var(--dur-state) var(--ease-enter);
}
.s-ivory .btn--solid, .s-sand .btn--solid, .s-paper .btn--solid { background: var(--z-ink); color: var(--z-ivory); border-color: var(--z-ink); }
.s-ivory .btn--solid:hover, .s-sand .btn--solid:hover, .s-paper .btn--solid:hover { background: var(--z-umber); border-color: var(--z-umber); }
.s-ink .btn--solid, .s-espresso .btn--solid, .s-brown .btn--solid { background: var(--z-ivory); color: var(--z-ink); border-color: var(--z-ivory); }
.s-ink .btn--solid:hover, .s-espresso .btn--solid:hover, .s-brown .btn--solid:hover { background: var(--z-sand); }
.btn--ghost:hover { background: var(--fg); color: var(--bg); }

/* ---- Section label (informational only) ----
   Two-tone rule: a short bronze segment, then the neutral line —
   the house's hallmark divider. */
.sec-label {
  display: flex;
  align-items: baseline;
  gap: var(--sp-s);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg2);
  margin-bottom: var(--sp-xl);
}
.sec-label .ar-display { text-transform: none; letter-spacing: 0; }
.sec-label::before {
  content: '';
  order: 1;
  width: var(--tick);
  flex: none;
  height: var(--hairline);
  background: var(--accent);
  align-self: center;
}
.sec-label::after {
  content: '';
  order: 2;
  flex: 1;
  height: var(--hairline);
  background: var(--line);
  align-self: center;
}

/* ---- Olfactive pyramid ---- */
.pyramid { display: grid; row-gap: var(--sp-2xl); }
.pyramid__tier {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: baseline;
  transition: opacity var(--dur-state) var(--ease-enter);
}
.pyramid__stage {
  grid-column: 2 / 4;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
}
.pyramid__notes {
  grid-column: 4 / 11;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}
.pyramid__aside {
  grid-column: 4 / 11;
  margin-top: var(--sp-xs);
  color: var(--fg2);
  font-size: var(--fs-body);
}
.pyramid.is-focused .pyramid__tier { opacity: 0.25; }
.pyramid.is-focused .pyramid__tier.is-active { opacity: 1; }

@media (max-width: 56em) {
  .pyramid__stage { grid-column: 1 / -1; margin-bottom: var(--sp-xs); }
  .pyramid__notes, .pyramid__aside { grid-column: 1 / -1; }

}

/* ---- The olfactive pyramid, as a list ----
   Each layer is one clean row: a small pyramid with that layer's band
   filled in the house gold, the layer named, and its notes beneath.
   Read top to bottom, it is the pyramid itself, taken apart. */
.p-pyramid .pyramid {
  display: block;
  max-width: 34rem;
  margin-inline: auto;
  border-top: var(--hairline) solid var(--line);
}
.p-pyramid .pyramid__tier {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  column-gap: var(--sp-s);
  align-items: center;
  padding-block: var(--sp-m);
  border-bottom: var(--hairline) solid var(--line);
}
.p-pyramid .pyramid__tier::before {
  content: '';
  grid-row: 1 / span 2;
  width: 2.6rem;
  aspect-ratio: 36 / 30;
  background: center / contain no-repeat;
}
.p-pyramid .pyramid__tier[data-tier="top"]::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 30'%3E%3Cpolygon points='18,2 23.54,11 12.46,11' fill='%23A98F55'/%3E%3Cpolygon points='18,2 34,28 2,28' fill='none' stroke='%2382663A' stroke-width='1'/%3E%3Cline x1='12.46' y1='11' x2='23.54' y2='11' stroke='%2382663A' stroke-width='1'/%3E%3Cline x1='6.92' y1='20' x2='29.08' y2='20' stroke='%2382663A' stroke-width='1'/%3E%3C/svg%3E"); }
.p-pyramid .pyramid__tier[data-tier="heart"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 30'%3E%3Cpolygon points='12.46,11 23.54,11 29.08,20 6.92,20' fill='%23A98F55'/%3E%3Cpolygon points='18,2 34,28 2,28' fill='none' stroke='%2382663A' stroke-width='1'/%3E%3Cline x1='12.46' y1='11' x2='23.54' y2='11' stroke='%2382663A' stroke-width='1'/%3E%3Cline x1='6.92' y1='20' x2='29.08' y2='20' stroke='%2382663A' stroke-width='1'/%3E%3C/svg%3E"); }
.p-pyramid .pyramid__tier[data-tier="base"]::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 30'%3E%3Cpolygon points='6.92,20 29.08,20 34,28 2,28' fill='%23A98F55'/%3E%3Cpolygon points='18,2 34,28 2,28' fill='none' stroke='%2382663A' stroke-width='1'/%3E%3Cline x1='12.46' y1='11' x2='23.54' y2='11' stroke='%2382663A' stroke-width='1'/%3E%3Cline x1='6.92' y1='20' x2='29.08' y2='20' stroke='%2382663A' stroke-width='1'/%3E%3C/svg%3E"); }
.p-pyramid .pyramid__stage {
  grid-column: 2;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}
.p-pyramid .pyramid__stage::after { content: ' notes'; }
.p-pyramid .pyramid__notes {
  grid-column: 2;
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.0625rem, 4.6vw, 1.25rem);
  line-height: 1.4;
  color: var(--fg2);
}
.p-pyramid .pyramid__aside { display: none; }
/* the first note of each layer, photographed, at the end of its row */
.p-pyramid .pyramid__photo {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 4.25rem;
  height: 4.25rem;
  object-fit: cover;
  border-radius: 2px;
}

/* ---- Editorial split ---- */
.ed-split {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-xl);
  align-items: center;
}
.ed-split__media { grid-column: 2 / 8; }
.ed-split__copy { grid-column: 9 / 12; }
.ed-split--flip .ed-split__media { grid-column: 6 / 12; order: 2; }
.ed-split--flip .ed-split__copy { grid-column: 2 / 5; order: 1; }

@media (max-width: 56em) {
  .ed-split__media, .ed-split__copy,
  .ed-split--flip .ed-split__media, .ed-split--flip .ed-split__copy {
    grid-column: 1 / -1; order: initial;
  }
}

/* ---- Campaign tile ---- */
.camp-tile {
  position: relative;
  display: block;
  transition: transform var(--dur-reveal) var(--ease-enter);
}
.camp-tile:hover { transform: scale(1.015); }
.camp-tile__caption {
  margin-top: var(--sp-s);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-s);
}
.camp-tile__title { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h3); }
.camp-tile__meta {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg2);
}

/* ---- Journal row ---- */
.journal-list { list-style: none; }
.journal-row {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: baseline;
  padding-block: var(--sp-l);
  border-top: var(--hairline) solid var(--line);
  position: relative;
}
.journal-list > li:last-child .journal-row { border-bottom: var(--hairline) solid var(--line); }
.journal-row__num { grid-column: 1 / 2; font-family: var(--font-display); color: var(--accent); }
.journal-row__title {
  grid-column: 2 / 9;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  transition: transform var(--dur-state) var(--ease-enter);
}
.journal-row__cat {
  grid-column: 10 / 12;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg2);
  text-align: right;
}
.journal-row:hover .journal-row__title { transform: translateX(var(--sp-xs)); }

@media (max-width: 56em) {
  .journal-row__num { grid-column: 1 / -1; }
  .journal-row__title { grid-column: 1 / -1; margin-top: var(--sp-2xs); }
  .journal-row__cat { grid-column: 1 / -1; text-align: left; margin-top: var(--sp-xs); }
}

/* floating preview panel (js/modules/journal-preview.js) */
.journal-preview {
  position: fixed;
  z-index: var(--layer-preview);
  width: clamp(14rem, 22vw, 20rem);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.96);
}

/* ---- Newsletter ---- */
.newsletter { text-align: center; }
.newsletter__form {
  margin-top: var(--sp-xl);
  display: flex;
  justify-content: center;
  gap: var(--sp-s);
  flex-wrap: wrap;
}
.newsletter__input {
  background: transparent;
  border: 0;
  border-bottom: var(--hairline) solid var(--fg2);
  padding: var(--sp-s) var(--sp-2xs);
  min-width: min(24rem, 70vw);
  color: var(--fg);
}
.newsletter__input::placeholder { color: var(--fg2); opacity: 1; }
.newsletter__input:focus-visible { outline-offset: var(--focus-offset); }
.newsletter__input:focus { border-bottom-color: var(--accent); }
.newsletter__note { margin-top: var(--sp-l); color: var(--fg2); }
.newsletter__action { margin-top: var(--sp-l); max-width: none; }

/* ---- Sillage cursor ---- */
.cursor-bloom, .cursor-trail {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--layer-cursor);
  width: var(--sillage-size);
  height: var(--sillage-size);
  margin: calc(var(--sillage-size) / -2) 0 0 calc(var(--sillage-size) / -2);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--z-amber), transparent 65%);
  opacity: var(--sillage-opacity);
  mix-blend-mode: screen;
  will-change: transform;
}
.cursor-trail { opacity: calc(var(--sillage-opacity) * 0.5); }
.cursor-label {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--layer-cursor);
  pointer-events: none;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--z-ivory);
  background: var(--z-ink);
  border: var(--hairline) solid var(--line-gold);
  padding: var(--sp-2xs) var(--sp-xs);
  border-radius: var(--radius);
  opacity: 0;
  transform: translate(var(--sp-s), var(--sp-s));
}

/* ---- House transition veil ---- */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: var(--layer-transition);
  background: var(--z-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(101%);
  pointer-events: none;
}
.page-veil__mark { font-size: var(--fs-h1); color: var(--z-gold); opacity: 0; }

/* Arrival — the veil is already covering at first paint (flagged by
   the inline head script) and lifts on its own. CSS-driven, so the
   page can never be left covered if scripts fail to run. */
html[data-arriving] .page-veil {
  transform: translateY(0);
  animation: veil-lift var(--dur-state) var(--ease-enter) 80ms forwards;
}
html[data-arriving] .page-veil__mark {
  opacity: 1;
  animation: veil-mark-out var(--dur-micro) var(--ease-enter) forwards;
}
@keyframes veil-lift { to { transform: translateY(-101%); } }
@keyframes veil-mark-out { to { opacity: 0; } }

/* Motion off / reduced motion: never cover the page at all. */
@media (prefers-reduced-motion: reduce) {
  html[data-arriving] .page-veil { transform: translateY(101%); animation: none; }
}
html[data-motion='off'][data-arriving] .page-veil {
  transform: translateY(101%);
  animation: none;
}

/* ---- The entrance ----
   A near-black screen. ZAYMAR in the house's Lora, its letters arriving
   one after another out of a soft blur; the line beneath in italic; a
   faint pass of warm light across the field; ENTER at the foot. Then
   the whole screen fades and the page is there. Every state is a class
   and the screen leaves on a timer, so nothing can strand it. */
.entrance {
  --en-obsidian: #0b0a09;
  --en-champagne: #e6d9c3;
  --en-mute: rgba(201, 184, 160, 0.46);
  --en-gold-light: #d6bb7e;
  --en-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --en-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  position: fixed;
  inset: 0;
  z-index: var(--layer-blotter);
  display: grid;
  place-items: center;
  place-content: center;
  gap: 1.25rem;
  background: var(--en-obsidian);
  transition: opacity 1.1s var(--en-ease-in-out), visibility 0s 1.1s;
  overflow: hidden;
}
.entrance.is-leaving { opacity: 0; visibility: hidden; }
/* if the scripts never run, the page is never hidden behind it */
html:not(.js-motion) .entrance { display: none; }
html.is-entrance-locked, html.is-entrance-locked body { overflow: hidden; }
.entrance__light {
  position: absolute;
  top: -20%;
  left: -40%;
  width: 60%;
  height: 140%;
  background: linear-gradient(90deg, transparent, rgba(214, 187, 126, 0.07) 45%, rgba(242, 235, 223, 0.05) 50%, transparent 60%);
  transform: translateX(-30%) skewX(-12deg);
  opacity: 0;
}
.entrance.is-lit .entrance__light {
  animation: entrance-light 2.4s var(--en-ease-in-out) forwards;
}
@keyframes entrance-light {
  0% { transform: translateX(-30%) skewX(-12deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(300%) skewX(-12deg); opacity: 0; }
}
.entrance__mark {
  display: flex;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--en-champagne);
}
.entrance__mark span {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  filter: blur(4px);
  transition: opacity 1.1s var(--en-ease-out), transform 1.1s var(--en-ease-out), filter 1.1s var(--en-ease-out);
}
.entrance.is-on .entrance__mark span { opacity: 1; transform: none; filter: blur(0); }
.entrance__line {
  max-width: none;
  margin: 0;
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--en-mute);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1.2s var(--en-ease-out) 0.9s, transform 1.2s var(--en-ease-out) 0.9s;
}
.entrance.is-on .entrance__line { opacity: 1; transform: none; }
.entrance__skip {
  position: absolute;
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  min-height: 2.75rem;
  padding: 0 1rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--en-mute);
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 900ms var(--en-ease-out) 0.6s, color 240ms;
}
.entrance.is-on .entrance__skip { opacity: 1; }
.entrance__skip:hover { color: var(--en-gold-light); }
.entrance.is-quick,
.entrance.is-quick .entrance__mark span,
.entrance.is-quick .entrance__line { transition-duration: 200ms; }

/* ---- Aligned media grids ----
   Every field on a page shares one column rhythm and edges flush
   with the container margins, so sections stack as one system.
   Ratio discipline lives in the markup: one ratio per section. */
.grid-2, .grid-4 {
  display: grid;
  /* the field gutter is exactly half the outer margin (6vw), so the
     space between columns is proportional to the space around them */
  column-gap: clamp(1.25rem, 3vw, 3.75rem);
  row-gap: var(--space-block);
  align-items: start;
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 56em) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Centred closing band ---- */
.band-center { text-align: center; }
.band-center .cta { margin-top: var(--sp-xl); }

/* ---- The descent ----
   Any main[data-descent] with [data-zone] sections gets the
   scroll-scrubbed surface interpolation (js/modules/temperature.js).
   When live, zones go transparent and <main> carries the colour;
   the static s-* classes remain as the no-JS / reduced-motion state. */
.descent-live {
  color: var(--page-fg);
}
/* the descending surface — one layer, painted directly, so a scrolled
   frame costs a single element's background and not a style recalc of
   the whole document */
.descent-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ---- The footer reveal ----
   The page is a sheet laid over the footer: <main> sits above, clipped to
   its own box (so the fixed colour layer inside it ends where the page
   ends), and the footer is held to the foot of the screen beneath it. As
   the last section scrolls up and away, the footer is uncovered in place. */
main#main { position: relative; z-index: 1; isolation: isolate; clip-path: inset(0); }
.site-footer { position: sticky; bottom: 0; z-index: 0; }
.descent-live [data-zone] {
  background-color: transparent;
  color: var(--page-fg);
  --bg: var(--page-bg);
  --fg: var(--page-fg);
  --fg2: var(--page-fg2);
  --fg3: var(--page-fg2);
  --line: var(--page-line);
}

/* ---- Arabic marks ----
   Two sizes only, as the house rule has it: very large as a ghosted
   monogram behind a statement, or very small beside a kicker. Every
   string is from the approved lexicon; nothing is generated. */
.ar-watermark {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: clamp(9rem, 42vw, 24rem);
  line-height: 1;
  color: var(--accent);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}
.manifesto .ar-watermark { border-radius: var(--radius); opacity: 0.06; }
.p-story { position: relative; }
.p-story > .container { position: relative; z-index: 1; }

.ar-kicker {
  font-family: var(--font-ar-text);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}
.scarcity .ar-kicker { margin-top: var(--sp-xs); }
.p-hero__kicker .ar-kicker { margin-inline-start: var(--sp-s); }

/* ---- Jeweler's tick — a short accent rule above focal type ---- */
.tick-above::before {
  content: '';
  display: block;
  width: var(--tick);
  height: var(--hairline);
  background: var(--accent);
  margin: 0 auto var(--sp-xl);
}

/* ============================================================
   STATEMENT SET — the house's focal typographic block.
   One centred composition: tick · strapline · display · copy.
   Used for every statement moment on the site so the
   proportions read identically page to page.
   ============================================================ */
.stmt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* Rhythm: each gap opens a little wider than the one above it,
     and all three scale with viewport height so the block breathes
     on a tall screen without ever outgrowing it. */
  --stmt-gap-rule: clamp(2.25rem, 5.4vh, 3.5rem);   /* tick → strapline */
  --stmt-gap-lead: clamp(2.75rem, 7vh, 4.5rem);     /* strapline → display */
  --stmt-gap-body: clamp(3.25rem, 8.5vh, 5.5rem);   /* display → description */
}
/* fills exactly one viewport — no scrolling inside the moment */
.stmt--viewport {
  min-height: 100svh;
  padding-block: calc(var(--header-h) + var(--sp-m)) var(--sp-xl);
}

.stmt__kicker {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  /* mobile minimum holds the strapline on a single line */
  font-size: clamp(1.0625rem, 1.5vw, 1.5625rem);
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--accent);
  max-width: 26em;
}
.stmt__kicker.tick-above::before { margin-bottom: var(--stmt-gap-rule); }

.stmt__display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.125rem, 5.5vw, 5.375rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
  max-width: 14em;
  margin-top: var(--stmt-gap-lead);
  text-wrap: balance;
}
.stmt__display.tick-above::before { margin-bottom: var(--stmt-gap-rule); }
.stmt__kicker + .stmt__display { margin-top: var(--stmt-gap-lead); }

/* the description — serif, so the block reads as one voice */
.stmt__para {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
  line-height: 1.85;
  letter-spacing: 0.005em;
  color: var(--fg2);
  max-width: 30em;
  margin-top: var(--stmt-gap-body);
}
.stmt__cta { margin-top: var(--stmt-gap-body); }

@media (max-width: 56em) {
  .stmt--viewport { padding-block: calc(var(--header-h) + var(--sp-s)) var(--sp-l); }
  .stmt__para { line-height: 1.8; }
}

/* ---- Breadcrumb-free page head for interior pages ---- */
.page-head { padding: calc(var(--header-h) + var(--space-block)) 0 var(--space-block); }
.page-head__title { max-width: 14em; }
.page-head__intro { margin-top: var(--sp-l); color: var(--fg2); }

/* ---- Utility prose pages ---- */
.utility-body { max-width: var(--measure); }
.utility-body h2 { margin-top: var(--sp-2xl); margin-bottom: var(--sp-m); }
.utility-body p + p { margin-top: var(--sp-m); }
.utility-body dl div { padding-block: var(--sp-m); border-top: var(--hairline) solid var(--line); }
.utility-body dt { font-weight: 500; margin-bottom: var(--sp-2xs); }
.utility-body dd { color: var(--fg2); }

/* ============================================================
   MANIFESTO — an invitation card laid on the black field.
   Ivory stock, champagne keyline, brass corners; the type inside
   is pinned to light-surface colours so the page descent running
   underneath never touches it. The black around it melts to white
   as the next section arrives, and the card dissolves into the page.
   ============================================================ */
.statement__field {
  display: flex;
  align-items: center;
  justify-content: center;
}

.manifesto {
  position: relative;
  width: 100%;
  max-width: 54rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 7vh, 4.75rem) clamp(1.5rem, 6vw, 4.5rem);
  background: var(--z-ivory);
  border-radius: var(--radius);
  color: var(--z-ink);
  /* pin the light-surface roles: immune to the descent's colour flip */
  --bg: var(--z-ivory);
  --fg: var(--z-ink);
  --fg2: var(--z-brown);
  --fg3: var(--fg3-on-light);
  --line: var(--line-on-light);
  --accent: var(--z-bronze);
  /* rhythm inside the card steps down from the page's statement gaps */
  --stmt-gap-rule: clamp(1.5rem, 3.5vh, 2.25rem);
  --stmt-gap-lead: clamp(1.75rem, 4.5vh, 2.75rem);
  --stmt-gap-body: clamp(1.75rem, 4.5vh, 2.75rem);
}

/* the keyline, inset like a printed border */
.manifesto__frame,
.manifesto__ticks {
  position: absolute;
  inset: var(--sp-xs);
  border-radius: var(--radius);
  pointer-events: none;
}
.manifesto__frame { border: var(--hairline) solid var(--line-gold); }

/* brass corners sit on the keyline's corners */
.manifesto__frame::before, .manifesto__frame::after,
.manifesto__ticks::before, .manifesto__ticks::after {
  content: '';
  position: absolute;
  width: var(--sp-m);
  height: var(--sp-m);
  border: 0 solid var(--z-bronze);
  opacity: 0.85;
}
.manifesto__frame::before { top: -1px; left: -1px;  border-top-width: var(--hairline); border-left-width: var(--hairline); }
.manifesto__frame::after  { top: -1px; right: -1px; border-top-width: var(--hairline); border-right-width: var(--hairline); }
.manifesto__ticks::before { bottom: -1px; left: -1px;  border-bottom-width: var(--hairline); border-left-width: var(--hairline); }
.manifesto__ticks::after  { bottom: -1px; right: -1px; border-bottom-width: var(--hairline); border-right-width: var(--hairline); }

.manifesto__in { position: relative; }

/* engraved subtitle — the brand line as a tracked caption */
.manifesto__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-micro);
  line-height: 1.7;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--z-bronze);
  max-width: 22em;
  text-wrap: balance;
}
.manifesto__label.tick-above::before { margin-bottom: var(--stmt-gap-rule); }

/* the declaration — monumental, roman, sized to the card */
.manifesto__display {
  font-size: clamp(2.125rem, 4.4vw, 4.25rem);
  line-height: 1.1;
  max-width: 12em;
}

/* the note beneath — the house's voice in italic */
.manifesto__para {
  font-style: italic;
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  line-height: 1.8;
  color: var(--z-brown);
  max-width: 28em;
}

/* closing flourish mirrors the tick above */
.manifesto__close {
  display: block;
  width: var(--tick);
  height: var(--hairline);
  background: var(--z-bronze);
  margin: var(--stmt-gap-lead) auto 0;
}

/* ---- the card's entrance ----
   The paper is already there; the type is set onto it. The card itself
   is deliberately not a reveal target — one fade on the article fought
   the parallax for the same transform, and a card that can be left
   invisible is a worse failure than one that arrives plainly.

   The composition assembles in the order it is read: the rule draws
   out from its centre, the brand line lifts, the declaration is set a
   line at a time from below, the note follows, and the keyline closes
   around all of it last.

   All of it is one class and plain transitions on transform, opacity
   and clip — nothing that costs a layout, nothing that waits on an
   event. If a frame is dropped or the tab is backgrounded, the end
   state is simply the resting state, so the card can never be left
   half-arrived. */
html.js-motion .manifesto [data-lit],
html.js-motion .manifesto__line {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1100ms var(--ease-enter),
              transform 1200ms var(--ease-enter);
}
html.js-motion .manifesto.is-lit [data-lit],
html.js-motion .manifesto.is-lit .manifesto__line {
  opacity: 1;
  transform: none;
}

/* the declaration is uncovered from below, the way type comes off a
   press; the resting clip is loose on every side so it can never shave
   a cap, a descender or the tracking */
html.js-motion .manifesto__line {
  display: block;
  clip-path: inset(0 -8% 106% -8%);
  transition: opacity 1000ms var(--ease-enter),
              transform 1000ms var(--ease-enter),
              clip-path 1200ms var(--ease-enter);
}
html.js-motion .manifesto.is-lit .manifesto__line {
  clip-path: inset(-28% -8%);
}

/* both rules draw outward from their own centre */
html.js-motion .manifesto__label.tick-above::before,
html.js-motion .manifesto__close {
  transform: scaleX(0);
  transition: transform 900ms var(--ease-enter);
}
html.js-motion .manifesto.is-lit .manifesto__label.tick-above::before,
html.js-motion .manifesto.is-lit .manifesto__close {
  transform: scaleX(1);
}

/* the keyline closes around the finished composition */
html.js-motion .manifesto__frame,
html.js-motion .manifesto__ticks {
  opacity: 0;
  transition: opacity 1200ms var(--ease-enter);
}
html.js-motion .manifesto.is-lit .manifesto__frame,
html.js-motion .manifesto.is-lit .manifesto__ticks { opacity: 1; }

/* read in order, top to bottom */
html.js-motion .manifesto__label.tick-above::before { transition-delay: 0ms; }
html.js-motion .manifesto__label { transition-delay: 180ms; }
html.js-motion .manifesto__line:nth-child(1) { transition-delay: 360ms; }
html.js-motion .manifesto__line:nth-child(2) { transition-delay: 500ms; }
html.js-motion .manifesto__line:nth-child(3) { transition-delay: 640ms; }
html.js-motion .manifesto__para { transition-delay: 860ms; }
html.js-motion .manifesto__close { transition-delay: 1080ms; }
html.js-motion .manifesto__frame,
html.js-motion .manifesto__ticks { transition-delay: 1180ms; }

.manifesto__line { display: block; }

/* Laptop: the whole card, keyline and all, inside one screen — the
   rhythm scales with the height of the screen it is on, so a 768-tall
   laptop holds it as surely as a 900-tall one. */
@media (min-width: 56.01em) {
  .statement .statement__field {
    padding-block: calc(var(--header-h) + var(--sp-s)) var(--sp-l);
  }
  .manifesto {
    padding: clamp(2rem, 5vh, 3rem) clamp(2rem, 5vw, 4.5rem);
    /* the card takes the screen's height less the field's own room
       above and below it, so it reads as a full page and the keyline
       still clears the edges */
    min-height: calc(100svh - var(--header-h) - var(--sp-s) - var(--sp-l) - var(--sp-m));
    display: grid;
    align-content: center;
  }
  .manifesto .manifesto__in {
    --stmt-gap-rule: clamp(1.25rem, 3vh, 2rem);
    --stmt-gap-lead: clamp(1.5rem, 3.6vh, 2.5rem);
    --stmt-gap-body: clamp(1.5rem, 3.6vh, 2.5rem);
  }
  .manifesto__display { font-size: clamp(2.125rem, 4vw, 3.75rem); }
}

/* light on the paper: the same slow drift the dark surfaces use,
   held to a whisper so the card reads as lit, not tinted */
.manifesto::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  opacity: 0.05;
  background: radial-gradient(ellipse 60% 45% at 30% 20%, var(--z-gold), transparent 70%);
  animation: ambient-drift 40s var(--ease-enter) infinite alternate;
}

@media (max-width: 56em) {
  /* Phone: the whole card sits inside one screen under the header, with
     room to spare — the visible area on a phone is routinely a little
     shorter than the viewport unit suggests, so "exactly one screen" has
     to mean comfortably less than one. */
  .manifesto { padding: clamp(1.25rem, 3vh, 2rem) var(--sp-m); }
  /* The gaps have to be set here, on the .stmt block itself, and not on
     the card: .stmt redefines these three properties on its own element,
     so anything the card sets is overwritten before its children ever
     read it. Scaled to viewport height, so a short phone tightens
     rather than overflowing. */
  .manifesto .manifesto__in {
    --stmt-gap-rule: clamp(0.875rem, 2.4vh, 1.5rem);
    --stmt-gap-lead: clamp(1rem, 3vh, 2rem);
    --stmt-gap-body: clamp(1.125rem, 3.4vh, 2.25rem);
  }
  .manifesto__label { letter-spacing: 0.18em; text-indent: 0.18em; max-width: 16em; }
  /* 30px lets "Shaped by the Gulf." hold one line inside the card */
  .manifesto__display { font-size: clamp(1.875rem, 4.4vw, 4.25rem); line-height: 1.12; }
  .manifesto__para { font-size: var(--fs-body); line-height: 1.6; }
  .statement .statement__field {
    padding-block: calc(var(--header-h) + var(--sp-s)) var(--sp-m);
  }
}

/* ---- The house mark — a small hairline lozenge, in place of a rule ----
   Used above the label on the closing pages (500, the invitation) and
   between the two names of the house in its signature. Drawn, not typed,
   so it renders the same everywhere. */
.mark-above::before,
.newsletter__sign-mark {
  content: '';
  display: block;
  width: 0.4375rem;
  height: 0.4375rem;
  border: var(--hairline) solid var(--accent);
  transform: rotate(45deg);
}
.mark-above::before { margin: 0 auto var(--stmt-gap-rule); }
.s-ink .mark-above::before,
.s-ink .newsletter__sign-mark { border-color: var(--z-gold); }

/* Revealed footer fills the whole screen: brand at the top (clear of the
   header), links in the middle, copyright held to the foot. */
.site-footer {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-h) + var(--sp-l));
}
.site-footer > .container { flex: 1; display: flex; flex-direction: column; width: 100%; }
.site-footer__grid { margin-block: auto; }
.site-footer__base { margin-top: auto; }

/* ---- Footer, centred ----
   One axis down the middle: a large wordmark, the line in italic, a small
   gold diamond, the icons, then the two link columns side by side and the
   copyright held to the foot. Soft warm glow at the top for depth. */
.site-footer {
  text-align: center;
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(169, 143, 85, 0.10), rgba(169, 143, 85, 0) 70%),
    #15120F;
}
.site-footer__top { flex-direction: column; justify-content: center; gap: var(--sp-l); }
.site-footer__brand { align-items: center; }
.site-footer__brand .site-header__mark {
  align-items: center;
  font-size: clamp(2.4rem, 11vw, 4rem);
  letter-spacing: 0.32em;
}
.site-footer__brand .site-header__mark span { text-indent: 0.32em; }
.site-footer__tag { margin-top: var(--sp-s); font-size: 1.0625rem; }
.site-footer__tag::after {
  content: "";
  display: block;
  width: 7px; height: 7px;
  margin: var(--sp-m) auto 0;
  border: var(--hairline) solid var(--z-gold);
  transform: rotate(45deg);
}
.site-footer__social { justify-content: center; }
.site-footer__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  padding-top: var(--sp-l);
}
.site-footer__col li + li { margin-top: 0.6rem; }
.site-footer__col a { font-size: 1.0625rem; }
.site-footer__base {
  flex-direction: column-reverse;
  justify-content: center;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-footer__place { flex-direction: column; gap: 0.2rem; }
.site-footer__ar { font-size: 1.25rem; }
@media (min-width: 56.01em) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.site-footer__brand .site-header__mark-name { font-size: clamp(2.25rem, 10.5vw, 3.75rem); letter-spacing: 0.3em; text-indent: 0.3em; }
.site-footer__brand .site-header__mark-city { font-size: 0.8125rem; letter-spacing: 0.5em; text-indent: 0.5em; margin-top: 0.35rem; }
/* Footer scaled down a step */
.site-footer__brand .site-header__mark-name { font-size: clamp(1.75rem, 8vw, 2.75rem); }
.site-footer__brand .site-header__mark-city { font-size: 0.6875rem; }
.site-footer__tag { font-size: 0.9375rem; }
.site-footer__social a { width: 2.4rem; height: 2.4rem; }
.site-footer__social svg { width: 16px; height: 16px; }
.site-footer__col h2 { font-size: 0.625rem; }
.site-footer__col a { font-size: 0.9375rem; }
.site-footer__col li + li { margin-top: 0.45rem; }
.site-footer__base { font-size: 0.625rem; }
.site-footer__ar { font-size: 1.0625rem; }

/* ---- Menu, simplified ----
   No numbers, no outline on open: four names in a calm column, a hairline,
   three quiet links, the Arabic mark alone at the foot. */
.nav-overlay { justify-content: center; text-align: center; }
.nav-overlay__links { align-items: center; gap: 1.1rem; }
.nav-overlay__links a { font-size: clamp(1.75rem, 8vw, 2.5rem); justify-content: center; }
.nav-overlay__links a .num { display: none; }
.nav-overlay__kicker { margin-bottom: var(--sp-s); }
.nav-overlay__links a:not(.nav-overlay__minor) + .nav-overlay__minor {
  margin-top: var(--sp-l);
  padding-top: var(--sp-l);
  border-top: var(--hairline) solid rgba(250, 248, 244, 0.12);
  width: 8rem;
}
.nav-overlay__links a.nav-overlay__minor { font-size: 0.6875rem; color: rgba(250, 248, 244, 0.62); }
.nav-overlay__minor + .nav-overlay__minor { margin-top: -0.35rem; }
.nav-overlay__foot { position: absolute; left: 0; right: 0; bottom: var(--sp-xl); justify-content: center; }
.nav-overlay__foot .micro { display: none; }
.nav-overlay__ar { font-size: 1.375rem; }
.nav-overlay__close:focus:not(:focus-visible) { outline: none; }

/* ---- Menu, one size ----
   Left-aligned. Home, Enquire, Join the house first; then Chapter I and
   the four fragrances below, every link the same size. */
.nav-overlay { text-align: left; }
.nav-overlay__links { align-items: flex-start; gap: 0.9rem; }
.nav-overlay__links a,
.nav-overlay__links a.nav-overlay__minor {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 7vw, 2.25rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--z-ivory);
  justify-content: flex-start;
}
.nav-overlay__links a:not(.nav-overlay__minor) + .nav-overlay__minor { margin-top: 0; padding-top: 0; border-top: 0; width: auto; }
.nav-overlay__minor + .nav-overlay__minor { margin-top: 0; }
.nav-overlay__minor + .nav-overlay__kicker {
  margin-top: var(--sp-l);
  padding-top: var(--sp-l);
  border-top: var(--hairline) solid rgba(250, 248, 244, 0.12);
  width: 100%;
}
.nav-overlay__kicker { text-indent: 0; margin-bottom: 0; }
.nav-overlay__kicker + a { margin-top: 0; }
.nav-overlay__foot { justify-content: flex-start; left: var(--margin); }
/* foot back in the flow, so on short phones it sits below the list
   instead of over it; the menu scrolls if a screen is shorter still */
.nav-overlay { justify-content: flex-start; overflow-y: auto; }
.nav-overlay__links { margin-block: auto; }
.nav-overlay__foot { position: static; margin-top: var(--sp-l); }

/* ---- Menu as a drawer ----
   A black panel slides in from the left over a dimmed page. Close is an
   X at its top left; then Home, Enquire and the four fragrances in small
   wide-tracked capitals, one size; the Arabic mark at the foot. */
.nav-overlay {
  inset: 0 auto 0 0;
  width: min(86vw, 26rem);
  padding: calc(var(--header-h) + var(--sp-m)) 2.5rem var(--sp-xl);
  justify-content: flex-start;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
  transform: translateX(-100%);
}
.nav-overlay.is-open { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55); }
html.js-motion .nav-overlay {
  opacity: 1;
  transition: transform 520ms var(--ease-enter), box-shadow 520ms var(--ease-enter),
              visibility 0s linear 520ms;
}
html.js-motion .nav-overlay.is-open { transition-delay: 0s; }
.nav-overlay__close {
  left: 2.5rem; right: auto;
  top: calc((var(--header-h) - 24px) / 2 + 0.5rem);
  width: 44px; height: 44px; margin: -10px;
  display: grid; place-items: center;
  color: var(--z-ivory);
}
.nav-overlay__links { margin-block: 0; gap: 0; }
.nav-overlay__links a,
.nav-overlay__links a.nav-overlay__minor {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--z-ivory);
  padding-block: 0.95rem;
  line-height: 1.2;
}
.nav-overlay__kicker { display: none; }
.nav-overlay__minor + .nav-overlay__kicker { display: none; }
.nav-overlay__minor + a:not(.nav-overlay__minor),
.nav-overlay__kicker + a { margin-top: 0; }
.nav-overlay__foot { margin-top: auto; padding-top: var(--sp-l); }
/* Chapter I set apart: a hairline, a gold label, then the four names */
.nav-overlay__links .nav-overlay__kicker,
.nav-overlay__minor + .nav-overlay__kicker {
  display: block;
  width: 100%;
  margin: var(--sp-m) 0 0.35rem;
  padding-top: var(--sp-l);
  border-top: var(--hairline) solid rgba(250, 248, 244, 0.12);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-indent: 0;
  color: var(--z-gold);
}
html.no-entrance .entrance { display: none !important; }

/* Over the hero photograph the mark must hold its own: pure ivory, a
   touch heavier, DUBAI at full strength, and a soft dark halo so it
   never sinks into the image. Once the header turns solid, as before. */
.site-header:not(.is-solid) .site-header__mark {
  color: #FFFDF8;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.35);
}
.site-header:not(.is-solid) .site-header__mark-name { font-weight: 500; }
.site-header:not(.is-solid) .site-header__mark-city { opacity: 0.95; }
/* only where the page starts dark (the home hero); light pages keep ink */
.site-header[data-header-start="light"]:not(.is-solid) .site-header__mark { color: inherit; text-shadow: none; }
.site-header[data-header-start="light"]:not(.is-solid) .site-header__mark-name { font-weight: 400; }
.site-header[data-header-start="light"]:not(.is-solid) .site-header__mark-city { opacity: 0.72; }
.site-footer { padding-top: calc(var(--header-h) + var(--sp-l) + 2rem); }

/* ---- The olfactive profile, without photographs ----
   Each layer a quiet row: the gold pyramid mark, the layer named in
   small gold capitals, the notes set larger in the house serif. The
   rules between rows warm to gold. */
.p-pyramid .pyramid { border-top-color: rgba(169, 143, 85, 0.35); }
.p-pyramid .pyramid__tier {
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: var(--sp-m);
  border-bottom-color: rgba(169, 143, 85, 0.35);
}
.p-pyramid .pyramid__stage { color: var(--z-bronze); letter-spacing: 0.24em; font-size: 0.6875rem; }
.p-pyramid .pyramid__notes { margin-top: 0.4rem; color: var(--z-ink); font-size: clamp(1.25rem, 5.4vw, 1.5rem); line-height: 1.35; }
@media (min-width: 56.01em) {
  .p-pyramid .pyramid { max-width: 46rem; }
  .p-pyramid .pyramid__tier { grid-template-columns: 4rem minmax(0, 1fr); column-gap: var(--sp-l); }
  .p-pyramid .pyramid__stage { font-size: 0.75rem; }
  .p-pyramid .pyramid__notes { font-size: clamp(1.625rem, 2.2vw, 2.125rem); }
}

/* ---- Footer on the laptop: a compact band, not a full screen ----
   The house mark, its line and the icons on the left; the two link
   columns on the right; the place and copyright in a slim row beneath. */
@media (min-width: 56.01em) {
  .site-footer {
    min-height: 0;
    padding: 3.5rem 0 1.75rem;
    text-align: left;
  }
  .site-footer > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
  }
  .site-footer__top { grid-column: 1; align-items: flex-start; gap: var(--sp-m); }
  .site-footer__brand { align-items: flex-start; }
  .site-footer__brand .site-header__mark { align-items: flex-start; }
  .site-footer__brand .site-header__mark-name { font-size: clamp(1.75rem, 2.2vw, 2.25rem); text-indent: 0; }
  .site-footer__brand .site-header__mark-city { text-indent: 0; }
  .site-footer__tag { margin-top: var(--sp-xs); }
  .site-footer__tag::after { display: none; }
  .site-footer__social { justify-content: flex-start; }
  .site-footer__grid {
    grid-column: 2;
    margin: 0;
    padding-top: 0;
    border-top: 0;
    max-width: none;
    justify-self: end;
    width: min(100%, 26rem);
    text-align: left;
  }
  .site-footer__base {
    grid-column: 1 / -1;
    margin-top: 2.5rem;
    padding-top: var(--sp-m);
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .site-footer__place { flex-direction: row; gap: var(--sp-s); }
}
@media (min-width: 56.01em) { .site-footer { padding: 2.5rem 0 1.25rem; } .site-footer__base { margin-top: 1.75rem; } .site-footer__col li + li { margin-top: 0.3rem; } }

/* the manifesto's second label and its two paragraphs */
.manifesto__label.manifesto__sub { margin-top: 0.5rem; opacity: 0.8; font-size: 0.875em; }
.manifesto .manifesto__para--close { margin-top: var(--sp-s); }
.manifesto__para strong { font-weight: 400; font-style: normal; color: var(--z-ink); }
html.js-motion .manifesto__para--close { transition-delay: 980ms; }
@media (max-width: 56em) {
  .manifesto .manifesto__para { font-size: clamp(0.875rem, 3.9vw, 0.9375rem); line-height: 1.55; }
}
.manifesto__label.manifesto__sub { max-width: none; white-space: nowrap; letter-spacing: 0.16em; text-indent: 0.16em; }
@media (max-width: 56em) {
  .manifesto__label.manifesto__sub { font-size: 0.6875rem; margin-top: 0.35rem; }
  .manifesto .manifesto__in { --stmt-gap-lead: clamp(0.75rem, 2.2vh, 1.25rem); --stmt-gap-body: clamp(0.875rem, 2.4vh, 1.5rem); }
  .manifesto .manifesto__para { line-height: 1.5; }
  .manifesto .manifesto__para--close { margin-top: 0.6rem; }
}
@media (max-width: 30em) and (min-aspect-ratio: 390/740), (min-width: 30.01em) and (max-width: 56em) and (max-height: 740px) { .manifesto .manifesto__display { font-size: 1.5rem; } .manifesto .manifesto__para { font-size: 0.8125rem; line-height: 1.45; } .manifesto .manifesto__label { font-size: 0.625rem; } }
/* under the title, its line: the house serif in italic, ink, not gold */
.manifesto__kicker {
  margin-top: var(--sp-s);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--z-ink);
}
html.js-motion .manifesto__kicker { transition-delay: 700ms; }
.manifesto .manifesto__kicker + .manifesto__para { margin-top: var(--sp-m); }
@media (max-width: 56em) { .manifesto__kicker { font-size: 1rem; margin-top: 0.5rem; } }
/* laptop footer: about half a screen when revealed, the content centred
   in it with more air; ZAYMAR and DUBAI share one left edge */
@media (min-width: 56.01em) {
  .site-footer { min-height: 52svh; display: flex; flex-direction: column; justify-content: center; padding: 4.5rem 0 2rem; }
  .site-footer > .container { flex: none; }
  .site-footer__base { margin-top: 3.5rem; }
  .site-footer__col li + li { margin-top: 0.5rem; }
  .site-footer .site-footer__brand .site-header__mark-name,
  .site-footer .site-footer__brand .site-header__mark-city { text-indent: 0; }
}
/* the Chapter I card sized to the screen's height, so it sits whole in
   view with room around it on any laptop or phone */
@media (min-width: 56.01em) {
  .manifesto { min-height: 0; padding-block: clamp(1.5rem, 4vh, 2.75rem); }
  .manifesto .manifesto__in { --stmt-gap-rule: clamp(0.75rem, 2vh, 1.5rem); --stmt-gap-lead: clamp(0.875rem, 2.4vh, 1.75rem); --stmt-gap-body: clamp(1rem, 2.6vh, 2rem); }
  .manifesto .manifesto__display { font-size: clamp(2rem, min(3.6vw, 6vh), 3.5rem); }
  .manifesto .manifesto__para { font-size: clamp(0.9375rem, 2vh, 1.125rem); line-height: 1.65; max-width: 40em; }
  .manifesto__kicker { font-size: clamp(0.9375rem, 2.1vh, 1.1875rem); }
}
@media (max-width: 56em) {
  .manifesto .manifesto__display { font-size: clamp(1.5rem, min(7.4vw, 4.2svh), 2rem); }
  .manifesto .manifesto__para { font-size: clamp(0.8125rem, min(3.8vw, 1.95svh), 0.9375rem); }
}
/* laptop: the Chapter I card fills the screen again, its type sized to
   the height so the whole of it still shows */
@media (min-width: 56.01em) {
  .manifesto {
    min-height: calc(100svh - var(--header-h) - 3rem);
    max-width: 62rem;
    padding: clamp(2rem, 5vh, 3.5rem) clamp(2.5rem, 6vw, 5rem);
    display: grid;
    align-content: center;
  }
  .manifesto .manifesto__display { font-size: clamp(2.5rem, min(4.4vw, 7.4vh), 4.5rem); }
  .manifesto__kicker { font-size: clamp(1rem, 2.5vh, 1.375rem); }
  .manifesto .manifesto__para { font-size: clamp(1rem, 2.35vh, 1.3125rem); line-height: 1.7; max-width: 38em; }
  .manifesto .manifesto__in { --stmt-gap-lead: clamp(1rem, 3vh, 2.25rem); --stmt-gap-body: clamp(1.25rem, 3.4vh, 2.5rem); }
  .statement .statement__field { padding-block: calc(var(--header-h) + 1.5rem) 1.5rem; }
}
@media (min-width: 56.01em) { .statement .statement__field { padding-block: calc(var(--header-h) + 3rem) 3rem; } .manifesto { min-height: calc(100svh - var(--header-h) - 6rem); } }

/* ---- The Chapter I card's frame, more of a presence ----
   A double keyline (the outer rule firmer, an inner hairline set just
   inside it) and longer, heavier brass corners that sit over both. */
.manifesto__frame {
  border: 1px solid rgba(169, 143, 85, 0.7);
  box-shadow: inset 0 0 0 5px var(--z-ivory), inset 0 0 0 6px rgba(169, 143, 85, 0.35);
}
.manifesto__frame::before, .manifesto__frame::after,
.manifesto__ticks::before, .manifesto__ticks::after {
  width: 2.5rem; height: 2.5rem;
  border-color: #8A6A35;
  opacity: 1;
}
.manifesto__frame::before { top: -2px; left: -2px;  border-top-width: 2px; border-left-width: 2px; }
.manifesto__frame::after  { top: -2px; right: -2px; border-top-width: 2px; border-right-width: 2px; }
.manifesto__ticks::before { bottom: -2px; left: -2px;  border-bottom-width: 2px; border-left-width: 2px; }
.manifesto__ticks::after  { bottom: -2px; right: -2px; border-bottom-width: 2px; border-right-width: 2px; }
/* the Chapter I card's frame arrives with its title, not after it */
html.js-motion .manifesto__frame,
html.js-motion .manifesto__ticks { transition-delay: 180ms; }

/* ==== Footer, quietly ====
   No glow, no gold diamond, no round icon buttons: a plain ink band, the
   house mark and its line on the left, three short columns of text links
   on the right, a single hairline, and the small print beneath. Column
   heads in soft ivory capitals; gold kept for the Arabic alone. */
.site-footer { background: #100D0A; text-align: left; border-top: 0; }
.site-footer__tag::after { display: none; }
.site-footer__top { align-items: flex-start; }
.site-footer__brand { align-items: flex-start; }
.site-footer__brand .site-header__mark { align-items: flex-start; }
.site-footer__brand .site-header__mark-name { font-size: clamp(1.75rem, 8vw, 2.25rem); letter-spacing: 0.3em; text-indent: 0; }
.site-footer__brand .site-header__mark-city { text-indent: 0; letter-spacing: 0.46em; }
.site-footer__tag { margin-top: var(--sp-s); font-size: 1rem; color: rgba(250, 248, 244, 0.6); }
.site-footer__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--sp-m);
  width: 100%;
  max-width: none;
  margin: var(--sp-xl) 0 0;
  padding-top: var(--sp-l);
  border-top: 1px solid rgba(250, 248, 244, 0.1);
  text-align: left;
}
.site-footer__col h2 {
  margin-bottom: var(--sp-s);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  color: rgba(250, 248, 244, 0.45);
}
.site-footer__col li + li { margin-top: 0.55rem; }
.site-footer__col a {
  font-size: 0.9375rem;
  color: rgba(250, 248, 244, 0.86);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur-state) var(--ease-enter), color var(--dur-state) var(--ease-enter);
}
.site-footer__col a:hover, .site-footer__col a:focus-visible { background-size: 100% 1px; color: var(--z-ivory); opacity: 1; }
.site-footer__base {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-xl);
  padding-top: var(--sp-m);
  border-top: 1px solid rgba(250, 248, 244, 0.1);
  text-align: left;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: rgba(250, 248, 244, 0.4);
}
.site-footer__place { flex-direction: row; gap: var(--sp-s); }
.site-footer__ar { font-size: 1rem; color: var(--z-gold); }

@media (max-width: 56em) {
  .site-footer { padding-top: calc(var(--header-h) + 2.5rem); }
  .site-footer > .container { justify-content: center; }
  .site-footer__grid { margin-block: var(--sp-xl) 0; }
  .site-footer__base { margin-top: auto; padding-top: var(--sp-m); }
  .site-footer__col a { font-size: 0.875rem; }
}
/* (the two-column footer for very small phones is retired: the phone
   type scale follows the width, so three columns fit as on any phone) */
@media (min-width: 56.01em) {
  .site-footer > .container { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); }
  .site-footer__grid { grid-column: 2; margin: 0; padding-top: 0; border-top: 0; justify-self: stretch; width: 100%; max-width: 34rem; margin-left: auto; }
  .site-footer__base { grid-column: 1 / -1; margin-top: clamp(3rem, 7vh, 4.5rem); }
  .site-footer__brand .site-header__mark-name { font-size: clamp(2rem, 2.4vw, 2.75rem); }
}
.site-footer .site-footer__brand .site-header__mark-name,
.site-footer .site-footer__brand .site-header__mark-city { text-indent: 0; }
@media (max-width: 56em) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-l); }
  .site-footer__col a { white-space: nowrap; }
}
/* the Z of ZAYMAR on the D of DUBAI: the large capital carries a wider
   side bearing, so it is drawn back by that much */
.site-footer .site-footer__brand .site-header__mark-name { margin-left: -0.05em; }
.site-footer .site-footer__brand .site-header__mark-name { margin-left: -0.025em; }

/* ---- Page changes: a quick ink fade, nothing that sweeps ----
   Leaving, the page dims to ink in under a fifth of a second; arriving,
   the ink lifts in a third. Opacity only, so there is no edge crossing
   the screen and nothing to tear on a slower device. */
.page-veil { transform: none; opacity: 0; visibility: hidden; }
.page-veil__mark { display: none; }
html[data-arriving] .page-veil {
  transform: none;
  visibility: visible;
  opacity: 1;
  animation: veil-fade-out 320ms cubic-bezier(0.33, 0, 0.2, 1) 40ms forwards;
}
@keyframes veil-fade-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  html[data-arriving] .page-veil { opacity: 0; visibility: hidden; animation: none; }
}
html[data-motion='off'][data-arriving] .page-veil { opacity: 0; visibility: hidden; animation: none; }

/* ---- Chapter I card on a phone: always one screen (2026-10-11) ----
   The card is drawn in its own unit (1em = 16px on the reference
   390 x 844 phone, where it stands 343 x 630). It takes the size the
   screen's width allows, unless the screen is short, in which case it
   takes the size its height allows: the whole card scales together, so
   it always fits one screen and every line breaks in the same place. */
@media (max-width: 30em) {
  .statement .manifesto {
    font-size: min(calc(88vw / 21.4375), calc((100svh - var(--header-h) - 2.75rem) / 39.4));
    width: 21.4375em;
    max-width: none;
    margin-inline: auto;
    padding: 1.5825em 1.5em;
  }
  .statement .manifesto .manifesto__frame,
  .statement .manifesto .manifesto__ticks { inset: 0.625em; }
  .statement .manifesto .manifesto__frame::before, .statement .manifesto .manifesto__frame::after,
  .statement .manifesto .manifesto__ticks::before, .statement .manifesto .manifesto__ticks::after { width: 2.5em; height: 2.5em; }
  .statement .manifesto .ar-watermark { font-size: 10.2375em; line-height: 1; }
  .statement .manifesto .manifesto__in { font-size: 1em; }
  .statement .manifesto .manifesto__label { font-size: 0.6875em; line-height: 1.7; max-width: 16em; letter-spacing: 0.18em; text-indent: 0.18em; }
  .statement .manifesto .manifesto__label.tick-above::before { width: 2.545em; margin-bottom: 1.8415em; }
  .statement .manifesto .manifesto__display { font-size: 1.80375em; line-height: 1.12; margin-top: 0.6434em; letter-spacing: -0.018em; max-width: none; }
  .statement .manifesto .manifesto__kicker { font-size: 1em; line-height: 1.65; margin-top: 0.5em; max-width: none; }
  .statement .manifesto .manifesto__para { font-size: 0.92625em; line-height: 1.5; margin-top: 1.6194em; letter-spacing: 0.005em; max-width: none; }
  .statement .manifesto .manifesto__close { margin-top: 1.1605em; width: 1.75em; }
}

/* ---- The footer on a phone: always whole on one screen (2026-10-11) ----
   It is revealed pinned to the foot of the screen, so if it is taller than
   the screen its top (the ZAYMAR mark) is pushed up behind the header and
   can never be reached. It is drawn here in its own unit (1em = 16px on the
   reference 390 x 844 phone, where it needs 44.875em below the header,
   counting a least gap above the small print) and
   takes that size unless the screen is shorter, in which case the whole
   footer scales down together and still fits. */
@media (max-width: 30em) {
  html body .site-footer {
    font-size: min(1rem, calc((100svh - var(--header-h)) / 44.875));
    padding: calc(var(--header-h) + 2.5em) 0 2.5em;
    min-height: 100svh;
  }
  html body .site-footer .site-footer__top { gap: 2.5em; }
  html body .site-footer .site-footer__brand .site-header__mark { font-size: 1em; line-height: 1; }
  html body .site-footer .site-footer__brand .site-header__mark-name { font-size: 1.95em; line-height: 1; letter-spacing: 0.3em; }
  html body .site-footer .site-footer__brand .site-header__mark-city { font-size: 0.6875em; line-height: 1; letter-spacing: 0.46em; margin-top: 0.509em; }
  html body .site-footer .site-footer__tag { font-size: 1em; line-height: 1.65; margin-top: 1em; }
  html body .site-footer .site-footer__grid { margin-top: 4em; margin-bottom: 2em; padding-top: 2.5em; gap: 2.5em 1.5em; }
  html body .site-footer .site-footer__col h2 { font-size: 0.625em; line-height: 1.65; letter-spacing: 0.24em; margin: 0 0 1.6em; }
  html body .site-footer .site-footer__col li { line-height: 1.65; }
  html body .site-footer .site-footer__col li + li { margin-top: 0.55em; }
  html body .site-footer .site-footer__col a { font-size: 0.875em; line-height: 1.65; }
  html body .site-footer .site-footer__base { font-size: 0.625em; line-height: 1.65; letter-spacing: 0.18em; padding-top: 2.4em; gap: 1em 2.4em; }
  html body .site-footer .site-footer__place { gap: 1.6em; }
  html body .site-footer .site-footer__ar { font-size: 1.6em; line-height: 1.65; }
}