/* HUNA — ART DIRECTION LAYER ("Desert Cinema Editorial") [docs/css-notes.md n001] */

:root{
  /* ---- canvas ---- */
  --ha-cream:      #F6EEE2;
  --ha-cream-deep: #EDE3D3;
  --ha-sand-line:  rgba(27,22,19,0.12);
  --ha-ink:        #1B1613;
  --ha-ink-soft:   #6A6058;
  --ha-cinema:     #121110;
  --ha-cinema-2:   #1A1815;
  --ha-cinema-ink: #EFE6DA;
  --ha-cinema-soft:rgba(239,230,218,0.62);
  --ha-cinema-line:rgba(239,230,218,0.16);

  /* ---- signal ---- */
  --ha-yellow:     #FFCE57;
  --ha-yellow-ink: #1B1613;
  --ha-ember:      #C17A3A;

  --ha-gold-text: #7A5609;
  /* ---- live (flipped per-section by [data-canvas]) ---- */
  --ha-bg:    var(--ha-cream);
  --ha-fg:    var(--ha-ink);
  --ha-fg-2:  var(--ha-ink-soft);
  --ha-line:  var(--ha-sand-line);

  /* ---- type ---- */
  /* Apple's approach: one neutral sans doing everything, carrying its weight [docs/css-notes.md n002] */
  --ha-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ha-ui:      'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ha-mono:    'JetBrains Mono', ui-monospace, monospace;
  --ha-ar-display: 'IBM Plex Sans Arabic', 'Almarai', sans-serif;
  --ha-ar-ui:      'IBM Plex Sans Arabic', 'Tajawal', sans-serif;

  --ha-display-vf: normal;
  --ha-display-w: 600;

  /* ---- motion ---- */
  --ha-ease:      cubic-bezier(.16,.84,.24,1);
  --ha-ease-out:  cubic-bezier(.22,1,.36,1);
  --ha-slow:      1.1s;
  --ha-med:       .62s;
  --ha-fast:      .32s;

  /* ---- measure ---- */
  --ha-gutter: clamp(20px, 5vw, 76px);
  --ha-max:    1560px;
}

[data-canvas="cinema"]{
  --ha-gold-text: var(--ha-yellow);      /* 12.8:1 on cinema */
  --ha-bg:   var(--ha-cinema);
  --ha-fg:   var(--ha-cinema-ink);
  --ha-fg-2: var(--ha-cinema-soft);
  --ha-line: var(--ha-cinema-line);
  background: var(--ha-bg);
  color: var(--ha-fg);
}
[data-canvas="cream"]{
  --ha-gold-text: #7A5609;               /* 5.8:1 on cream, 4.7:1 on the sand panels */
  --ha-bg:   var(--ha-cream);
  --ha-fg:   var(--ha-ink);
  --ha-fg-2: var(--ha-ink-soft);
  --ha-line: var(--ha-sand-line);
  background: var(--ha-bg);
  color: var(--ha-fg);
}
[data-canvas="deep"]{
  --ha-gold-text: #7A5609;               /* 5.8:1 on cream, 4.7:1 on the sand panels */
  --ha-bg: var(--ha-cream-deep);
  --ha-fg: var(--ha-ink);
  --ha-fg-2: var(--ha-ink-soft);
  --ha-line: var(--ha-sand-line);
  background: var(--ha-bg);
  color: var(--ha-fg);
}

/* 1. BASE TYPE — replaces the old Inter/Sora voice [docs/css-notes.md n003] */

body{
  font-family: var(--ha-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .ha-display, .ha-statement{
  font-family: var(--ha-display);
  font-variation-settings: var(--ha-display-vf);
  font-weight: var(--ha-display-w);
  font-optical-sizing: auto;
  letter-spacing: -0.032em;
  line-height: 0.98;
}

/* Arabic gets its own art direction — not a mirrored copy of the Latin one. [docs/css-notes.md n004] */
.ar, h1.ar-body, h2.ar-body, h3.ar-body, .ha-display.ar-body, .ha-statement.ar-body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .ha-display, html[dir="rtl"] .ha-statement, html[dir="rtl"] .ha-title{
  font-family: var(--ha-ar-display);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.32;
  font-variation-settings: normal;
}
.ar-body{ font-family: var(--ha-ar-ui); }
html[dir="rtl"] body,
html[dir="rtl"] p,
html[dir="rtl"] .ha-lede{ font-family: var(--ha-ar-ui); }
p.ar-body, .ha-lede.ar-body,
html[dir="rtl"] p, html[dir="rtl"] .ha-lede{ line-height: 1.95; letter-spacing: 0; }

/* ---- the display scale: monumental, optical, tight ---- */
.ha-display{
  font-size: var(--fs-giga);
  line-height: 0.92;
  letter-spacing: -0.042em;
  font-weight: 650;
  font-optical-sizing: auto;
}
.ha-display.ar-body,
html[dir="rtl"] .ha-display{ font-size: var(--fs-mega); line-height: 1.2; }

.ha-statement{
  font-size: var(--fs-d2);
  line-height: 1.06;
  letter-spacing: -0.036em;
}
.ha-statement.ar-body,
html[dir="rtl"] .ha-statement{ font-size: var(--fs-d3); line-height: 1.4; }

.ha-title{
  font-family: var(--ha-display);
  font-variation-settings: var(--ha-display-vf);
  font-weight: var(--ha-display-w);
  font-optical-sizing: auto;
  font-size: var(--fs-d6);
  line-height: 1.12;
  letter-spacing: -0.026em;
}
.ha-title.ar-body{ font-family: var(--ha-ar-display); font-weight:600; letter-spacing:0; line-height:1.4; }

.ha-lede{
  font-family: var(--ha-ui);
  font-size: var(--fs-d8);
  line-height: 1.62;
  font-weight: 350;
  color: var(--ha-fg-2);
  max-width: 62ch;
}

/* ---- metadata voice: mono, caps, wide ---- */
.ha-meta{
  font-family: var(--ha-mono);
  font-size: clamp(10px, 0.78vw, 11.5px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ha-fg-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ha-meta.ar-body{
  font-family: var(--ha-ar-ui);
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
}
.ha-meta--signal{ color: var(--ha-yellow); }
.ha-meta--ink{ color: var(--ha-fg); }

/* a short yellow rule that reads as a tick mark before a label */
.ha-meta .ha-tick,
.ha-tick{
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--ha-yellow);
  flex: none;
}

/* ---- the index numeral: type as graphic ---- */
.ha-index{
  font-family: var(--ha-mono);
  font-size: clamp(11px, 0.85vw, 12.5px);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ha-gold-text);
  font-variant-numeric: tabular-nums;
}
.ha-numeral{
  font-family: var(--ha-display);
  font-variation-settings: var(--ha-display-vf);
  font-weight: var(--ha-display-w);
  font-optical-sizing: auto;
  font-size: var(--fs-d1);
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums;
}

/* 2. LAYOUT PRIMITIVES [docs/css-notes.md n005] */

.ha-section{
  position: relative;
  padding-block: clamp(72px, 11vw, 168px);
  padding-inline: var(--ha-gutter);
  background: var(--ha-bg);
  color: var(--ha-fg);
}
.ha-section--tight{ padding-block: clamp(52px, 7vw, 104px); }
.ha-section--flush{ padding-inline: 0; }

.ha-wrap{
  max-width: var(--ha-max);
  margin-inline: auto;
  width: 100%;
}
.ha-wrap--narrow{ max-width: 1080px; }

/* section head: mono label + big statement, with a hairline above */
.ha-head{
  display: grid;
  gap: clamp(20px, 2.4vw, 34px);
  padding-top: clamp(22px, 2.6vw, 38px);
  border-top: 1px solid var(--ha-line);
  margin-bottom: clamp(38px, 5vw, 78px);
}
.ha-head__row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* asymmetric editorial split — deliberately not 50/50 */
.ha-split{
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 92px);
  align-items: center;
}
.ha-split--text-first{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr); }
.ha-split--wide-media{ grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
.ha-split--top{ align-items: start; }

/* offset the text block off the grid line — breaks the boxiness */
.ha-offset-down{ transform: translateY(clamp(18px, 4vw, 76px)); }

/* full-bleed cinematic stage */
.ha-stage{
  position: relative;
  min-height: min(100svh, 940px);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.ha-stage--short{ min-height: min(72svh, 680px); }
.ha-stage__inner{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ha-max);
  margin-inline: auto;
  padding: clamp(28px, 5vw, 92px) var(--ha-gutter) clamp(34px, 6vw, 96px);
}

/* 3. GRADED MEDIA — the single biggest visual correction. [docs/css-notes.md n006] */

.ha-media{
  position: relative;
  overflow: hidden;
  background: var(--ha-cinema-2);
  isolation: isolate;
}
.ha-media > img,
.ha-media > video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.86) contrast(1.07) brightness(0.96);
  transform: scale(1.001);
  transition: transform 1.4s var(--ha-ease-out), filter var(--ha-slow) var(--ha-ease);
  will-change: transform;
}
/* warm scrim: darker at top and bottom so overlaid type always holds */
.ha-media::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14,12,11,0.50) 0%, rgba(14,12,11,0.10) 32%, rgba(14,12,11,0.16) 55%, rgba(14,12,11,0.78) 100%),
    radial-gradient(118% 76% at 50% 4%, rgba(0,0,0,0) 42%, rgba(12,10,9,0.55) 100%);
}
.ha-media--soft::after{
  background: linear-gradient(180deg, rgba(14,12,11,0.26) 0%, rgba(14,12,11,0.04) 40%, rgba(14,12,11,0.44) 100%);
}
.ha-media--flat::after{ background: linear-gradient(180deg, rgba(14,12,11,0.12), rgba(14,12,11,0.30)); }
.ha-media--none::after{ display: none; }

/* 35mm grain — barely there, but it is what makes it read as "shot" not "stock" */
.ha-grain::before{
  content: '';
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: haGrain 7s steps(6) infinite;
}
@keyframes haGrain{
  0%,100%{ transform: translate(0,0) }
  20%{ transform: translate(-3%,2%) }
  40%{ transform: translate(2%,-3%) }
  60%{ transform: translate(-2%,-2%) }
  80%{ transform: translate(3%,1%) }
}

.ha-media--fill{ position: absolute; inset: 0; z-index: 0; }

/* aspect helpers */
.ha-ar-portrait{ aspect-ratio: 3 / 4; }
.ha-ar-square  { aspect-ratio: 1 / 1; }
.ha-ar-land    { aspect-ratio: 4 / 3; }
.ha-ar-wide    { aspect-ratio: 16 / 9; }
.ha-ar-cine    { aspect-ratio: 2.39 / 1; }
.ha-ar-tall    { aspect-ratio: 4 / 5; }

/* metadata chip anchored over media, portfolio-style */
.ha-chip{
  position: absolute;
  z-index: 3;
  font-family: var(--ha-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F7F1E8;
  background: rgba(16,14,13,0.52);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(247,241,232,0.16);
  border-radius: 999px;
  padding: 6px 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ha-chip.ar-body{ font-family: var(--ha-ar-ui); letter-spacing:0; text-transform:none; font-size:12px; }
.ha-chip--tl{ inset-block-start: 16px; inset-inline-start: 16px; }
.ha-chip--tr{ inset-block-start: 16px; inset-inline-end: 16px; }
.ha-chip--bl{ inset-block-end: 16px; inset-inline-start: 16px; }
.ha-chip--signal{ background: var(--ha-yellow); color: var(--ha-yellow-ink); border-color: transparent; }

/* 4. ACTIONS — outlined editorial pills with a travelling arrow. [docs/css-notes.md n007] */

.ha-pill{
  --pill-fg: var(--ha-fg);
  --pill-line: var(--ha-fg);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  border: 1px solid color-mix(in srgb, var(--pill-line) 34%, transparent);
  border-radius: 999px;
  color: var(--pill-fg);
  background: transparent;
  font-family: var(--ha-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--ha-fast) var(--ha-ease), border-color var(--ha-fast) var(--ha-ease);
}
.ha-pill.ar-body{ font-family: var(--ha-ar-ui); letter-spacing:0; text-transform:none; font-size:13px; font-weight:500; }
/* the fill sweeps in from the leading edge */
.ha-pill::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ha-yellow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ha-med) var(--ha-ease-out);
}
html[dir="rtl"] .ha-pill::before{ transform-origin: right center; }
@media (hover: hover) and (pointer: fine){ .ha-pill:hover{ color: var(--ha-yellow-ink); border-color: var(--ha-yellow); } }
@media (hover: hover) and (pointer: fine){ .ha-pill:hover::before{ transform: scaleX(1); } }
.ha-pill:focus-visible{ outline: 2px solid var(--ha-yellow); outline-offset: 3px; }

.ha-pill__arrow{
  flex: none;
  width: 13px; height: 13px;
  transition: transform var(--ha-med) var(--ha-ease-out);
}
@media (hover: hover) and (pointer: fine){ .ha-pill:hover .ha-pill__arrow{ transform: translate(3px, -3px); } }
html[dir="rtl"] .ha-pill__arrow{ transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine){ html[dir="rtl"] .ha-pill:hover .ha-pill__arrow{ transform: scaleX(-1) translate(3px, -3px); } }

/* the one primary action per view */
.ha-pill--primary{
  background: var(--ha-yellow);
  border-color: var(--ha-yellow);
  color: var(--ha-yellow-ink);
}
.ha-pill--primary::before{ background: var(--ha-ink); }
@media (hover: hover) and (pointer: fine){ .ha-pill--primary:hover{ color: var(--ha-cream); border-color: var(--ha-ink); } }

/* on photography */
.ha-pill--onmedia{
  --pill-fg: #F7F1E8;
  --pill-line: #F7F1E8;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(16,14,13,0.22);
}

/* quiet text link with a rule that grows */
.ha-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ha-fg);
  text-decoration: none;
  font-family: var(--ha-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding-bottom: 6px;
  background-image: linear-gradient(var(--ha-yellow), var(--ha-yellow));
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 0% 1px;
  transition: background-size var(--ha-med) var(--ha-ease-out), color var(--ha-fast) var(--ha-ease);
}
html[dir="rtl"] .ha-link{ background-position: right 100%; }
@media (hover: hover) and (pointer: fine){ .ha-link:hover{ background-size: 100% 1px; } }
.ha-link.ar-body{ font-family: var(--ha-ar-ui); letter-spacing:0; text-transform:none; font-size:13px; }

/* 5. INDEXED EDITORIAL ROWS — for spaces, packages, locations. [docs/css-notes.md n008] */

.ha-rows{ display: grid; gap: clamp(10px, 1.1vw, 18px); }

.ha-row{
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
  min-height: clamp(168px, 20vw, 268px);
  padding: clamp(22px, 2.6vw, 40px) clamp(22px, 3vw, 52px);
  border-radius: clamp(14px, 1.4vw, 22px);
  overflow: hidden;
  isolation: isolate;
  color: #F4EDE3;
  text-decoration: none;
  background: var(--ha-cinema-2);
  transition: transform var(--ha-med) var(--ha-ease-out);
}
.ha-row__media{
  position: absolute;
  inset: 0;
  z-index: -1;
}
.ha-row__media img{
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.8) contrast(1.05) brightness(0.82);
  transform: scale(1.04);
  transition: transform 1.5s var(--ha-ease-out), filter var(--ha-med) var(--ha-ease);
}
.ha-row__media::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(12,11,10,0.88) 0%, rgba(12,11,10,0.62) 46%, rgba(12,11,10,0.34) 100%);
}
html[dir="rtl"] .ha-row__media::after{
  background: linear-gradient(270deg, rgba(12,11,10,0.88) 0%, rgba(12,11,10,0.62) 46%, rgba(12,11,10,0.34) 100%);
}
.ha-row:hover .ha-row__media img{ transform: scale(1.09); filter: saturate(0.94) contrast(1.06) brightness(0.9); }
.ha-row:hover{ transform: translateY(-2px); }

.ha-row__body{ display: grid; gap: 10px; min-width: 0; }
.ha-row__title{
  font-family: var(--ha-display);
  font-variation-settings: var(--ha-display-vf);
  font-weight: var(--ha-display-w);
  font-optical-sizing: auto;
  font-size: var(--fs-d4);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #FBF6EF;
}
.ha-row__title.ar-body{ font-family: var(--ha-ar-display); font-weight:600; letter-spacing:0; line-height:1.3; font-size: var(--fs-d5); }
.ha-row__sub{
  font-family: var(--ha-ui);
  font-size: clamp(0.88rem, 1vw, 1.02rem);
  /* ROUND 31 — was 0.7, which measured 4.18:1 against the brighter parts of [docs/css-notes.md n009] */
  color: rgba(244,237,227,0.84);
  font-weight: 350;
  max-width: 54ch;
}
.ha-row__sub.ar-body{ font-family: var(--ha-ar-ui); }
.ha-row__facts{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 4px;
  font-family: var(--ha-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(244,237,227,0.58);
}
.ha-row__facts.ar-body{ font-family: var(--ha-ar-ui); letter-spacing:0; text-transform:none; font-size:12px; }
.ha-row__facts b{ color: var(--ha-yellow); font-weight: 500; }

/* the circular arrow that fills yellow on hover */
.ha-row__go{
  flex: none;
  width: clamp(44px, 4vw, 58px);
  height: clamp(44px, 4vw, 58px);
  border-radius: 50%;
  border: 1px solid rgba(244,237,227,0.3);
  display: grid;
  place-items: center;
  color: #F4EDE3;
  transition: background var(--ha-med) var(--ha-ease), color var(--ha-med) var(--ha-ease), border-color var(--ha-med) var(--ha-ease), transform var(--ha-med) var(--ha-ease-out);
}
.ha-row:hover .ha-row__go{
  background: var(--ha-yellow);
  border-color: var(--ha-yellow);
  color: var(--ha-yellow-ink);
  transform: rotate(45deg);
}
.ha-row__go svg{ width: 16px; height: 16px; }
html[dir="rtl"] .ha-row__go svg{ transform: scaleX(-1); }

/* the row's index sits vertically in the margin */
.ha-row__idx{
  font-family: var(--ha-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ha-yellow);
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 6px;
}

/* 6. STAGGERED EDITORIAL GRID — events, eat & drink, creative house. [docs/css-notes.md n010] */

.ha-egrid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2.2vw, 40px) clamp(16px, 2vw, 34px);
}
.ha-egrid > *{ grid-column: span 4; }
.ha-egrid > .ha-e--lg{ grid-column: span 7; }
.ha-egrid > .ha-e--md{ grid-column: span 5; }
.ha-egrid > .ha-e--sm{ grid-column: span 4; }
.ha-egrid > .ha-e--half{ grid-column: span 6; }
.ha-egrid > .ha-e--full{ grid-column: span 12; }
.ha-egrid > .ha-e--drop{ margin-top: clamp(24px, 5vw, 92px); }

/* 7. SCROLL STORYTELLING [docs/css-notes.md n011] */

/* sticky media, text scrolls past it */
.ha-stack{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: start;
}
.ha-stack__sticky{
  position: sticky;
  top: clamp(72px, 12vh, 132px);
  height: min(74vh, 720px);
  border-radius: clamp(12px, 1.2vw, 20px);
  overflow: hidden;
}
.ha-stack__steps{ display: grid; gap: clamp(46px, 11vh, 132px); padding-block: clamp(24px, 8vh, 96px); }
.ha-stack__step{
  opacity: 0.32;
  transition: opacity var(--ha-med) var(--ha-ease);
}
.ha-stack__step.is-active{ opacity: 1; }

/* reveal on enter — the core motion primitive */
[data-reveal]{
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--ha-slow) var(--ha-ease-out),
    transform var(--ha-slow) var(--ha-ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in{ opacity: 1; transform: none; }

[data-reveal="fade"]{ transform: none; }
[data-reveal="rise"]{ transform: translateY(46px); }
[data-reveal="clip"]{
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.25s var(--ha-ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal="clip"].is-in{ clip-path: inset(0 0 0 0); }
/* media that settles: starts slightly scaled, eases to rest */
[data-reveal="settle"]{ opacity: 0; }
[data-reveal="settle"] img{ transform: scale(1.10); }
[data-reveal="settle"].is-in{ opacity: 1; }
[data-reveal="settle"].is-in img{ transform: scale(1); transition: transform 1.7s var(--ha-ease-out); }

/* line that draws itself across */
[data-reveal="rule"]{
  opacity: 1;
  transform: none;
  transform-origin: left center;
  scale: 0 1;
  transition: scale 1s var(--ha-ease-out);
}
html[dir="rtl"] [data-reveal="rule"]{ transform-origin: right center; }
[data-reveal="rule"].is-in{ scale: 1 1; }

/* word-by-word display reveal */
.ha-words{ display: block; }
.ha-words .ha-w{
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.ha-words .ha-w > span{
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ha-ease-out);
  transition-delay: calc(var(--i, 0) * 78ms);
}
.ha-words.is-in .ha-w > span{ transform: translateY(0); }

/* parallax drift, driven by JS */
[data-parallax]{ will-change: transform; }

@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal="clip"], [data-reveal="rule"]{
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    scale: none !important;
    transition: none !important;
  }
  .ha-words .ha-w > span{ transform: none !important; transition: none !important; }
  .ha-grain::before{ animation: none; }
  [data-parallax]{ transform: none !important; }
  .ha-media > img{ transition: none; }
}

/* 8. RULES & SMALL PARTS [docs/css-notes.md n012] */

.ha-rule{ height: 1px; background: var(--ha-line); width: 100%; border: 0; }
.ha-rule--signal{ background: var(--ha-yellow); }

.ha-facts{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(18px, 2.4vw, 44px);
}
.ha-fact{ display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--ha-line); }
.ha-fact__k{
  font-family: var(--ha-mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ha-fg-2);
}
.ha-fact__k.ar-body{ font-family: var(--ha-ar-ui); letter-spacing:0; text-transform:none; font-size:12px; }
.ha-fact__v{
  font-family: var(--ha-display);
  font-variation-settings: var(--ha-display-vf);
  font-size: var(--fs-d7);
  line-height: 1.1;
  color: var(--ha-fg);
}
.ha-fact__v.ar-body{ font-family: var(--ha-ar-display); font-weight:600; }

/* price, set as a composed lockup rather than a plain string */
.ha-price{ display: inline-flex; align-items: baseline; gap: 8px; }
.ha-price__n{
  font-family: var(--ha-display);
  font-variation-settings: var(--ha-display-vf);
  font-size: var(--fs-d4);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
}
.ha-price__u{
  font-family: var(--ha-mono);
  font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ha-fg-2);
}
.ha-price__u.ar-body{ font-family: var(--ha-ar-ui); letter-spacing:0; text-transform:none; font-size:13px; }

/* 9. RESPONSIVE — mobile is re-composed, not stacked [docs/css-notes.md n013] */

@media (max-width: 1080px){
  .ha-egrid > .ha-e--lg{ grid-column: span 12; }
  .ha-egrid > .ha-e--md,
  .ha-egrid > .ha-e--sm,
  .ha-egrid > .ha-e--half{ grid-column: span 6; }
  .ha-stack{ grid-template-columns: 1fr; }
  .ha-stack__sticky{ position: relative; top: 0; height: min(56vh, 460px); }
  .ha-stack__step{ opacity: 1; }
  .ha-stack__steps{ gap: clamp(32px, 6vh, 64px); }
}

@media (max-width: 760px){
  .ha-split,
  .ha-split--text-first,
  .ha-split--wide-media{ grid-template-columns: 1fr; gap: clamp(22px, 6vw, 38px); }
  .ha-offset-down{ transform: none; }
  .ha-egrid{ grid-template-columns: repeat(6, 1fr); }
  .ha-egrid > *,
  .ha-egrid > .ha-e--lg,
  .ha-egrid > .ha-e--md,
  .ha-egrid > .ha-e--sm,
  .ha-egrid > .ha-e--half{ grid-column: span 6; }
  .ha-egrid > .ha-e--drop{ margin-top: 0; }

  /* rows become a stacked composition: image band on top, content beneath */
  .ha-row{
    grid-template-columns: 1fr auto;
    grid-template-areas: "idx go" "body body";
    align-items: start;
    min-height: 0;
    padding: 20px;
    gap: 14px;
  }
  .ha-row__idx{ grid-area: idx; padding-top: 0; }
  .ha-row__go{ grid-area: go; width: 40px; height: 40px; }
  .ha-row__body{ grid-area: body; }
  .ha-row__media::after{
    background: linear-gradient(180deg, rgba(12,11,10,0.52) 0%, rgba(12,11,10,0.82) 100%);
  }
  .ha-row__title{ font-size: var(--fs-d5); }

  .ha-head{ margin-bottom: 30px; }
  .ha-head__row{ gap: 14px; }
}

/* 10. NAVIGATION — stripped to almost nothing so the hero can breathe. [docs/css-notes.md n014] */

header{ padding: clamp(18px, 2.4vw, 30px) 0; }
header.scrolled, header.solid, header.is-solid{
  /* Nearly opaque by default: where backdrop-filter is unavailable or the [docs/css-notes.md n015] */
  background: rgba(246,238,226,0.975);
  box-shadow: 0 1px 0 var(--ha-sand-line);
  padding: 12px 0;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  header.scrolled, header.solid, header.is-solid{
    background: rgba(246,238,226,0.90);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
  }
}
header.scrolled .logo-mark .on-light,
header.solid .logo-mark .on-light,
header.is-solid .logo-mark .on-light{ opacity: 1; }
header.scrolled .logo-mark .on-dark,
header.solid .logo-mark .on-dark,
header.is-solid .logo-mark .on-dark{ opacity: 0; }

/* the dark capsule goes away — links sit directly on the image */
.navlinks{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  gap: clamp(14px, 1.8vw, 30px) !important;
}
.navlinks a{
  min-width: 0 !important;
  height: auto !important;
  padding: 4px 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: rgba(251,246,239,0.82);
  font-family: var(--ha-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
}
.navlinks a::after{
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--ha-yellow);
  transform: scaleX(0);
  transform-origin: inherit;
  transition: transform var(--ha-med) var(--ha-ease-out);
}
html[dir="ltr"] .navlinks a::after{ transform-origin: left center; }
html[dir="rtl"] .navlinks a::after{ transform-origin: right center; }
.navlinks a:hover,
.navlinks a.current{ color: #FFF; background: none !important; }
.navlinks a:hover::after,
.navlinks a.current::after{ transform: scaleX(1); }

header.scrolled .navlinks a,
header.solid .navlinks a,
header.is-solid .navlinks a{ color: var(--ha-ink-soft); background: none !important; }
header.scrolled .navlinks a:hover,
header.scrolled .navlinks a.current,
header.solid .navlinks a:hover,
header.solid .navlinks a.current,
header.is-solid .navlinks a:hover,
header.is-solid .navlinks a.current{ color: var(--ha-ink); background: none !important; }

/* secondary destinations live in the overlay menu, not the bar */
@media (min-width: 981px){
  .navlinks li.nav-secondary{ display: none; }
}

/* right cluster: language, membership as a quiet link, one yellow action */
.nav-ctas{ display: flex; align-items: center; gap: clamp(10px, 1.3vw, 20px); }

.lang-toggle-btn{
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px 2px !important;
  color: rgba(251,246,239,0.8);
  font-family: var(--ha-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--ha-fast) var(--ha-ease);
}
@media (hover: hover) and (pointer: fine){ .lang-toggle-btn:hover{ color: var(--ha-yellow); } }
header.scrolled .lang-toggle-btn,
header.solid .lang-toggle-btn,
header.is-solid .lang-toggle-btn{ color: var(--ha-ink-soft); }
@media (hover: hover) and (pointer: fine){ header.scrolled .lang-toggle-btn:hover, header.solid .lang-toggle-btn:hover, header.is-solid .lang-toggle-btn:hover{ color: var(--ha-ink); } }

/* membership: text, not a filled button */
.nav-cta-secondary{
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px 2px !important;
  color: rgba(251,246,239,0.8) !important;
  font-family: var(--ha-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ha-fast) var(--ha-ease);
}
@media (hover: hover) and (pointer: fine){ .nav-cta-secondary:hover{ color: var(--ha-yellow) !important; } }
header.scrolled .nav-cta-secondary,
header.solid .nav-cta-secondary,
header.is-solid .nav-cta-secondary{ color: var(--ha-ink-soft) !important; }
.nav-cta-secondary span.ar-body,
.lang-toggle-btn span.ar-body{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 13px; }

/* the single yellow action in the bar */
.nav-ctas > .cta-btn{
  background: var(--ha-yellow);
  color: var(--ha-yellow-ink);
  border: 1px solid var(--ha-yellow);
  border-radius: 999px;
  padding: 11px 20px;
  font-family: var(--ha-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ha-fast) var(--ha-ease), color var(--ha-fast) var(--ha-ease);
}
@media (hover: hover) and (pointer: fine){ .nav-ctas > .cta-btn:hover{ background: var(--ha-ink); border-color: var(--ha-ink); color: var(--ha-cream); } }
.nav-ctas > .cta-btn span.ar-body{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 13px; }

/* the menu button is available at every width — it holds the full index */
.mobile-menu-btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: none !important;
  border: 1px solid rgba(251,246,239,0.28) !important;
  box-shadow: none !important;
  color: #FBF6EF;
  cursor: pointer;
  transition: border-color var(--ha-fast) var(--ha-ease), color var(--ha-fast) var(--ha-ease);
}
.mobile-menu-btn:hover{ border-color: var(--ha-yellow) !important; color: var(--ha-yellow); }
header.scrolled .mobile-menu-btn,
header.solid .mobile-menu-btn,
header.is-solid .mobile-menu-btn{
  border-color: rgba(27,22,19,0.22) !important;
  color: var(--ha-ink);
}

@media (max-width: 980px){
  .navlinks{ gap: 0 !important; }
  .nav-cta-secondary{ display: none !important; }
}
@media (max-width: 560px){
  .nav-ctas > .cta-btn{ padding: 10px 14px; font-size: 10px; letter-spacing: 0.1em; }
}

/* 11. SPACE EXPLORER — the booking front door [docs/css-notes.md n016] */

.xp{
  position: relative;
  padding: clamp(118px, 15vh, 180px) var(--ha-gutter) clamp(72px, 10vw, 140px);
  background: var(--ha-cinema);
  color: var(--ha-cinema-ink);
  overflow: hidden;
}
.xp-head{
  max-width: var(--ha-max);
  margin: 0 auto clamp(38px, 5vw, 76px);
  display: grid;
  gap: clamp(16px, 2vw, 26px);
}
.xp-title{
  margin: 0;
  color: #FBF6EF;
  font-size: var(--fs-mega);
  line-height: 0.9;
  max-width: 14ch;
}
html[dir="rtl"] .xp-title{ font-size: var(--fs-d1); line-height: 1.24; max-width: 18ch; }
.xp-lede{ color: rgba(239,230,218,0.66); max-width: 52ch; }

.xp-rows{ max-width: var(--ha-max); margin-inline: auto; }

.xp-sub{ max-width: var(--ha-max); margin: clamp(64px, 9vw, 132px) auto 0; }
.xp-sub .ha-head{ border-top-color: var(--ha-cinema-line); }
.xp-sub .ha-statement{ color: #FBF6EF; margin: 0; }
.xp-sub .ha-link{ color: rgba(239,230,218,0.78); }
.xp-sub .ha-link:hover{ color: #FBF6EF; }

.xp-pkg-strip{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(18px, 2.2vw, 34px);
}

.xp-card{ display: grid; gap: 18px; align-content: start; }
.xp-card__media{
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: clamp(10px, 1vw, 16px);
  overflow: hidden;
  background: var(--ha-cinema-2);
}
.xp-card__media img{
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.86) contrast(1.05) brightness(0.9);
  transition: transform 1.2s var(--ha-ease-out);
}
.xp-card:hover .xp-card__media img{ transform: scale(1.05); }
.xp-card__media::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,11,10,0.34) 0%, rgba(12,11,10,0.02) 42%, rgba(12,11,10,0.46) 100%);
}
.xp-card__body{ display: grid; gap: 12px; }
.xp-card__body .ha-title{ color: #FBF6EF; margin: 0; }
.xp-card__sub{
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(239,230,218,0.62);
  font-weight: 350;
}
.xp-card__facts{
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-family: var(--ha-mono);
  font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(239,230,218,0.5);
}
.xp-card__facts.ar-body{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 12px; }
.xp-card__price .ha-price__n{ color: var(--ha-yellow); }
.xp-card__price .ha-price__u{ color: rgba(239,230,218,0.55); }
.xp-card__actions{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 4px;
}
.xp-card__actions .ha-pill{ --pill-fg: #FBF6EF; --pill-line: #FBF6EF; padding: 13px 20px; }
.xp-card__actions .ha-link{ color: rgba(239,230,218,0.72); }

/* 11b. THE FLOW — split screen. The room stays on screen while the form [docs/css-notes.md n017] */

.bk{
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  min-height: 100svh;
  background: var(--ha-cinema);
}

.bk-visual{
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--ha-cinema-2);
  /* The caption and the thumbnail row stack at the bottom instead of both [docs/css-notes.md n018] */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.bk-visual > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.84) contrast(1.06) brightness(0.72);
  transform: scale(1.03);
  opacity: 0;
  transition: opacity .7s var(--ha-ease), transform 2.2s var(--ha-ease-out), filter var(--ha-slow) var(--ha-ease);
}
.bk-visual > img.is-loaded{ opacity: 1; transform: scale(1); }
.bk-visual::after{
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12,11,10,0.52) 0%, rgba(12,11,10,0.10) 34%, rgba(12,11,10,0.86) 100%);
}
.bk-visual__meta{
  position: relative;
  z-index: 2;
  padding-inline: clamp(24px, 3vw, 52px);
  display: grid;
  gap: 10px;
  color: #FBF6EF;
}
.bk-visual__title{
  font-family: var(--ha-display);
  font-variation-settings: var(--ha-display-vf);
  font-weight: var(--ha-display-w);
  font-optical-sizing: auto;
  font-size: var(--fs-d4);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
html[dir="rtl"] .bk-visual__title{ font-family: var(--ha-ar-display); font-weight: 600; letter-spacing: 0; line-height: 1.34; }
.bk-visual__sub{
  font-family: var(--ha-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(251,246,239,0.62);
}
html[dir="rtl"] .bk-visual__sub{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 13px; }

/* the panel side */
.bk-panel{
  background: var(--ha-cream);
  color: var(--ha-ink);
  min-width: 0;
  padding-inline: clamp(24px, 4vw, 76px);
  padding-block: clamp(96px, 12vh, 150px) clamp(56px, 8vh, 110px);
}
.bk-panel .wrap{ max-width: 720px; margin-inline: 0; padding-inline: 0; }
#booking-flow .wizard-head{ padding: 0 0 clamp(26px, 3.4vh, 44px); }
#booking-flow .wizard-body{ padding: 0; }

/* Inside the flow the room is already named on the visual and each step asks [docs/css-notes.md n019] */
#booking-flow .wizard-head h1{ display: none; }
/* carries an inline display, so it needs the override */
#booking-flow #pc-book-membership-link{ display: none !important; }

#booking-flow .wiz-step > h2{
  font-size: var(--fs-d4);
  line-height: 1.04;
  margin: 0 0 10px;
}
html[dir="rtl"] #booking-flow .wiz-step > h2{ line-height: 1.34; }
#booking-flow .step-sub{
  font-family: var(--ha-ui);
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  line-height: 1.6;
  color: var(--ha-ink-soft);
  max-width: 48ch;
  margin-bottom: clamp(22px, 3vh, 34px);
}
html[dir="rtl"] #booking-flow .step-sub{ font-family: var(--ha-ar-ui); line-height: 1.9; }

/* stepper: a measured rule with a numeral, not a row of dots */
#booking-flow .progress{
  display: flex;
  gap: 6px;
  margin-top: clamp(22px, 3vh, 36px);
  background: none;
  height: auto;
}
#booking-flow .progress-step{
  flex: 1;
  height: 2px;
  border-radius: 0;
  background: rgba(27,22,19,0.14);
  transition: background var(--ha-med) var(--ha-ease);
}
#booking-flow .progress-step.done,
#booking-flow .progress-step.active{ background: var(--ha-yellow); }
/* one label per rule, so each sits under the segment it names */
#booking-flow .progress-labels{
  display: grid;
  /* The number of steps is no longer fixed at five — a location with one [docs/css-notes.md n020] */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--ha-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ha-ink-soft);
}
#booking-flow .progress-labels > span{
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[dir="rtl"] #booking-flow .progress-labels{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 12px; }

@media (max-width: 1080px){
  .bk{ grid-template-columns: 1fr; min-height: 0; }
  .bk-visual{
    position: relative;
    height: clamp(230px, 34svh, 360px);
    top: auto;
  }
  .bk-panel{ padding-block: clamp(34px, 5vh, 56px) clamp(52px, 8vh, 90px); }
  #booking-flow .wizard-head h1{ max-width: none; }
}
@media (max-width: 760px){
  .bk-visual{ height: clamp(180px, 26svh, 260px); }
  .bk-visual__title{ font-size: var(--fs-d6); }
  #booking-flow .progress-labels{ font-size: 10px; letter-spacing: 0.08em; }
}

@media (max-width: 760px){
  .xp{ padding-top: clamp(96px, 13vh, 130px); }
  .xp-card__actions{ gap: 12px; }
}

/* 12. PACKAGES — the one place on the site that looks like this. [docs/css-notes.md n021] */

.pk-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(40px, 4.5vw, 76px) clamp(22px, 2.6vw, 44px);
}
.pk-grid--three{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.pk{
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;   /* lets the actions settle on a shared baseline */
  gap: 0;
  color: var(--ha-fg);
}

/* index sits above the plate, in the margin */
.pk__idx{
  font-family: var(--ha-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ha-gold-text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}

.pk__media{
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: visible;      /* the price plate breaks out of this box */
  border-radius: 2px;
  isolation: isolate;
}
.pk__media-inner{
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ha-cinema-2);
}
.pk__media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.88) contrast(1.05) brightness(0.94);
  transition: transform 1.3s var(--ha-ease-out), filter var(--ha-med) var(--ha-ease);
}
.pk:hover .pk__media img{ transform: scale(1.045); filter: saturate(0.96) contrast(1.05) brightness(1); }
.pk__media-inner::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,11,10,0.20) 0%, rgba(12,11,10,0) 38%, rgba(12,11,10,0.34) 100%);
}

/* the signature: price cut out of the canvas, overlapping the photograph */
.pk__price{
  position: absolute;
  z-index: 3;
  inset-inline-start: clamp(14px, 1.6vw, 22px);
  bottom: 0;
  transform: translateY(42%);
  background: var(--ha-bg);
  padding: clamp(11px, 1.1vw, 15px) clamp(14px, 1.4vw, 20px);
  display: grid;
  gap: 3px;
  min-width: clamp(104px, 11vw, 132px);
  box-shadow: 0 10px 34px -16px rgba(18,14,11,0.5);
}
.pk__price-n{
  font-family: var(--ha-display);
  font-weight: 680;
  font-size: var(--fs-d6);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--ha-fg);
  font-variant-numeric: tabular-nums lining-nums;
}
html[dir="rtl"] .pk__price-n{ font-family: var(--ha-ar-display); letter-spacing: 0; }
.pk__price-u{
  font-family: var(--ha-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ha-fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[dir="rtl"] .pk__price-u{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 11px; }
/* a package with no price shouldn't leave a hole in the composition */
.pk__price--none{ display: none; }

.pk__body{
  margin-top: clamp(40px, 4vw, 60px);   /* clears the overlapping plate */
  display: flex;
  flex-direction: column;
  gap: 9px;
}
/* however long an inclusions list runs, every plate's actions line up */
.pk__actions{ margin-top: auto; }
.pk__service{
  font-family: var(--ha-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ha-fg-2);
}
html[dir="rtl"] .pk__service{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 12px; }
.pk__name{
  font-family: var(--ha-display);
  font-weight: 620;
  font-size: var(--fs-d7);
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: var(--ha-fg);
  margin: 0;
}
html[dir="rtl"] .pk__name{ font-family: var(--ha-ar-display); letter-spacing: -0.005em; line-height: 1.4; }
.pk__sub{
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.58;
  font-weight: 350;
  color: var(--ha-fg-2);
}

/* the wall label */
.pk__specs{
  margin-top: 6px;
  border-top: 1px solid var(--ha-line);
  display: grid;
}
.pk__spec{
  display: grid;
  grid-template-columns: minmax(78px, 0.6fr) 1fr;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ha-line);
  align-items: baseline;
}
.pk__spec-k{
  font-family: var(--ha-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ha-fg-2);
}
html[dir="rtl"] .pk__spec-k{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 12px; }
.pk__spec-v{
  font-size: 0.9rem;
  color: var(--ha-fg);
  font-weight: 450;
}

/* inclusions read as a quiet run of text, not a checklist of pills */
.pk__incl{
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ha-fg-2);
  font-weight: 350;
}
.pk__incl b{
  font-family: var(--ha-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ha-fg);
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}
html[dir="rtl"] .pk__incl b{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 12px; }

.pk__actions{
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.pk__actions .ha-pill{ padding: 13px 20px; }

/* a featured package takes the full row and turns on its side */
.pk--feature{
  grid-column: 1 / -1;
  /* the price plate hangs below the photograph; this keeps it clear of [docs/css-notes.md n022] */
  padding-bottom: clamp(34px, 4vw, 58px);
}
@media (min-width: 900px){
  .pk--feature{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: clamp(34px, 4vw, 72px);
    align-items: start;
  }
  .pk--feature .pk__idx{ grid-column: 1; }
  /* align-self:start stops the grid stretching the media and overriding its [docs/css-notes.md n023] */
  .pk--feature .pk__media{ grid-column: 1; grid-row: 2; aspect-ratio: 5 / 4; align-self: start; }
  .pk--feature .pk__body{ grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: start; }
  .pk--feature .pk__name{ font-size: var(--fs-d5); }
  .pk--feature .pk__price{ inset-inline-start: auto; inset-inline-end: clamp(14px, 1.6vw, 22px); }
  .pk--feature .pk__actions{ margin-top: clamp(14px, 1.6vw, 24px); }
}

@media (max-width: 560px){
  .pk-grid{ gap: 44px 18px; }
  .pk__body{ margin-top: 44px; }
  .pk__spec{ grid-template-columns: minmax(70px, 0.7fr) 1fr; gap: 10px; }
}

/* 13. LEGACY SECTION FURNITURE, brought into the system. [docs/css-notes.md n024] */

/* every inner page's hero */
.page-header{
  padding: clamp(118px, 15vh, 190px) var(--ha-gutter) clamp(38px, 5vw, 76px);
  background: var(--ha-cream);
  position: relative;
}
.page-header .wrap{ max-width: var(--ha-max); padding-inline: 0; }
.page-header h1{
  font-size: var(--fs-d2);
  line-height: 1;
  letter-spacing: -0.042em;
  margin: clamp(16px, 2vw, 26px) 0 0;
  max-width: 17ch;
}
html[dir="rtl"] .page-header h1{ line-height: 1.22; letter-spacing: -0.012em; max-width: 20ch; }
.page-header > .wrap > p,
.page-header p{
  margin-top: clamp(16px, 1.8vw, 24px);
  max-width: 58ch;
  font-size: clamp(0.98rem, 1.15vw, 1.16rem);
  line-height: 1.62;
  font-weight: 350;
  color: var(--ha-ink-soft);
}
html[dir="rtl"] .page-header p{ line-height: 1.95; }

/* the mono label, with the tick that marks every section opening */
.eyebrow{
  font-family: var(--ha-mono);
  font-size: clamp(10px, 0.78vw, 11px);
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ha-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before{
  content: '';
  width: 26px;
  height: 1px;
  background: var(--ha-yellow);
  flex: none;
}
.eyebrow.ar-body,
html[dir="rtl"] .eyebrow{
  font-family: var(--ha-ar-ui);
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
}
/* on dark sections the label lightens with its surroundings */
[data-canvas="cinema"] .eyebrow,
.cinema .eyebrow,
.ev-hero .eyebrow{ color: var(--ha-cinema-soft); }

/* section heads: label and link on one line, statement beneath, hairline above */
.loc-head,
.ev-head,
.ch-head,
.ch-archive-head,
.works-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 46px);
  flex-wrap: wrap;
  padding-top: clamp(22px, 2.6vw, 38px);
  border-top: 1px solid var(--ha-line);
  margin-bottom: clamp(32px, 4.5vw, 66px);
}
.loc-head h2,
.ev-head h2,
.ch-head h2,
.ch-archive-head h2,
.works-head h2{
  font-size: var(--fs-d3);
  line-height: 1.04;
  letter-spacing: -0.036em;
  margin: 14px 0 0;
  max-width: 18ch;
}
html[dir="rtl"] .loc-head h2,
html[dir="rtl"] .ev-head h2,
html[dir="rtl"] .ch-head h2,
html[dir="rtl"] .works-head h2{ line-height: 1.34; letter-spacing: -0.008em; }

/* the quiet "view all" link that sits opposite a section head */
.about-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ha-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ha-ink);
  padding-bottom: 6px;
  background-image: linear-gradient(var(--ha-yellow), var(--ha-yellow));
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 0% 1px;
  transition: background-size var(--ha-med) var(--ha-ease-out);
}
html[dir="rtl"] .about-link{ background-position: right 100%; }
.about-link:hover{ background-size: 100% 1px; }
.about-link.ar-body,
html[dir="rtl"] .about-link{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 13px; }
html[dir="rtl"] .about-link svg{ transform: scaleX(-1); }

@media (max-width: 760px){
  .page-header{ padding-top: clamp(100px, 13vh, 130px); }
  .loc-head, .ev-head, .ch-head, .ch-archive-head, .works-head{
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
}

/* 14. EVENT & RESTAURANT CARDS — out of their boxes. [docs/css-notes.md n025] */

/* REVERSED, on instruction, in §63. The de-boxing above was a deliberate [docs/css-notes.md n026] */
.ev-card,
.fnb-card{
  display: grid;
  align-content: start;
  gap: 0;
}

/* the photograph */
.ev-card .ev-thumb,
.fnb-card .fnb-thumb{
  overflow: hidden;
  background: var(--ha-cinema-2);
}
.ev-card img,
.fnb-card img{
  width: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.05) brightness(0.95);
  transition: transform 1.2s var(--ha-ease-out), filter var(--ha-med) var(--ha-ease);
}
.ev-card:hover img,
.fnb-card:hover img{ transform: scale(1.04); filter: saturate(0.97) contrast(1.05) brightness(1); }

/* the text block, held by a hairline instead of a border. [docs/css-notes.md n027] */
.ev-card .ev-date,
.fnb-card .fnb-body{
  padding: 16px 0 0 !important;
  margin-top: 14px;
  border-top: 1px solid var(--ha-line);
  background: transparent;
}
.ev-card .ev-loc{ margin-top: 6px; }
.ev-card .ev-title,
.fnb-card .fnb-name,
.ev-card h3,
.fnb-card h3{
  font-family: var(--ha-display);
  font-weight: 620;
  font-size: var(--fs-d8);
  line-height: 1.16;
  letter-spacing: -0.026em;
  color: var(--ha-fg);
  margin: 4px 0 6px;
}
html[dir="rtl"] .ev-card .ev-title,
html[dir="rtl"] .fnb-card .fnb-name,
html[dir="rtl"] .ev-card h3,
html[dir="rtl"] .fnb-card h3{ font-family: var(--ha-ar-display); letter-spacing: -0.005em; line-height: 1.42; }

/* date / category / city lines become the mono metadata voice */
.ev-card .ev-date,
.ev-card .ev-loc,
.fnb-card .fnb-type,
.fnb-card .fnb-loc-tag{
  font-family: var(--ha-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ha-fg-2);
}
html[dir="rtl"] .ev-card .ev-date,
html[dir="rtl"] .ev-card .ev-loc,
html[dir="rtl"] .fnb-card .fnb-type,
html[dir="rtl"] .fnb-card .fnb-loc-tag{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 12px;
}
.ev-card .ev-date{ color: var(--ha-ember); }

/* the category tag sits on the photograph, as a chip, not a floating pill */
.ev-card .ev-cat{
  font-family: var(--ha-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(16,14,13,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(247,241,232,0.18);
  color: #F7F1E8;
  border-radius: 999px;
  padding: 6px 12px;
}
html[dir="rtl"] .ev-card .ev-cat{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 11px; }

.fnb-card .fnb-blurb{
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ha-fg-2);
  font-weight: 350;
  margin-top: 6px;
}
.fnb-card .fnb-loc-tag{ margin-top: 10px; display: block; }

/* 15. CREATIVE HOUSE — brought onto the same axis as everything else. [docs/css-notes.md n028] */

.ch-head,
.ch-archive-head{
  text-align: start !important;
  max-width: none !important;
  margin-inline: 0 !important;
}
.ch-head .about-link{
  justify-content: flex-start !important;
  margin-top: 0 !important;
  color: var(--ha-cinema-ink) !important;
}
.ch-head .about-link:hover{ color: #FFF !important; }

/* the two titles are a single lockup: small English line, Arabic at scale */
.ch-title-en{
  font-family: var(--ha-display);
  font-weight: 620;
  font-size: var(--fs-d4);
  line-height: 1.06;
  letter-spacing: -0.034em;
  color: var(--ha-cinema-ink);
  max-width: 20ch;
}
.ch-title-ar{
  font-family: var(--ha-ar-display);
  font-weight: 600;
  font-size: var(--fs-d3);
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--ha-cinema-ink);
  margin-bottom: 0;
}
.ch-sub{
  margin-top: clamp(14px, 1.6vw, 22px);
  font-size: clamp(0.96rem, 1.1vw, 1.12rem);
  line-height: 1.62;
  color: var(--ha-cinema-soft);
  font-weight: 350;
  max-width: 56ch;
}
html[dir="rtl"] .ch-sub{ line-height: 1.95; }

/* posters: out of their rounded boxes, graded like every other image */
.doc-poster{
  border-radius: 2px !important;
  background: var(--ha-cinema-2);
}
.doc-poster img{
  filter: saturate(0.88) contrast(1.05) brightness(0.92);
  transition: transform 1.2s var(--ha-ease-out), filter var(--ha-med) var(--ha-ease);
}
.doc-card:hover{ transform: none !important; }
.doc-card:hover .doc-poster{ box-shadow: none !important; }
.doc-card:hover .doc-poster img{ transform: scale(1.04); filter: saturate(0.97) contrast(1.05) brightness(1); }
.doc-card .doc-title{
  font-family: var(--ha-display);
  font-weight: 620;
  font-size: var(--fs-d8);
  line-height: 1.18;
  letter-spacing: -0.026em;
  color: var(--ha-cinema-ink);
}
html[dir="rtl"] .doc-card .doc-title{ font-family: var(--ha-ar-display); letter-spacing: -0.005em; line-height: 1.44; }
.doc-card .doc-meta{
  font-family: var(--ha-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ha-cinema-soft);
  margin-top: 6px;
}
html[dir="rtl"] .doc-card .doc-meta{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 12px; }

/* the About page's guiding principles, set as a pinned sequence */
.about-guides{ margin-top: clamp(26px, 3vw, 44px); }
.about-guides .ha-stack__step h3{
  font-size: var(--fs-d5);
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin: 10px 0 12px;
}
html[dir="rtl"] .about-guides .ha-stack__step h3{ line-height: 1.38; }
.about-guides .ha-stack__step p{
  font-size: clamp(0.98rem, 1.15vw, 1.14rem);
  line-height: 1.64;
  color: var(--ha-ink-soft);
  font-weight: 350;
  max-width: 48ch;
  margin: 0;
}
html[dir="rtl"] .about-guides .ha-stack__step p{ line-height: 1.95; }

/* 16. UTILITIES [docs/css-notes.md n029] */

.ha-stackline{ display: grid; gap: clamp(14px, 1.6vw, 26px); }
.ha-inline{ display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px); flex-wrap: wrap; }
.ha-actions{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: clamp(22px, 2.6vw, 38px); }
.ha-hide{ display: none !important; }
.ha-vis-sr{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* 17. IMMERSIVE GALLERY (.hg) [docs/css-notes.md n030] */

.hg{
  position: fixed; inset: 0; z-index: 9000;
  display: grid;
  opacity: 0;
  transition: opacity .24s var(--ha-ease);
}
/* `display:grid` above out-specifies the UA's `[hidden]{display:none}`, which [docs/css-notes.md n031] */
.hg[hidden]{ display: none; }
.hg.is-open{ opacity: 1; }
.hg__scrim{
  position: absolute; inset: 0;
  background: rgba(10,9,8,0.94);
  backdrop-filter: blur(8px);
}
.hg__shell{
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding: clamp(14px, 2vw, 26px);
  gap: clamp(10px, 1.4vw, 18px);
  background: transparent;
}
.hg__bar{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; color: var(--ha-cinema-ink);
}
.hg__title{
  margin: 0;
  font-family: var(--ha-display);
  font-weight: var(--ha-display-w);
  font-size: var(--fs-d8);
  letter-spacing: -0.015em;
}
html[dir="rtl"] .hg__title{ font-family: var(--ha-ar-display); letter-spacing: 0; }
.hg__sub{
  margin: 4px 0 0;
  font-family: var(--ha-mono);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ha-cinema-soft);
}
html[dir="rtl"] .hg__sub{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .78rem; }
.hg__tools{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hg__count{
  font-family: var(--ha-mono); font-size: .72rem;
  color: var(--ha-cinema-soft); letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.hg__btn{
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--ha-cinema-line);
  background: transparent; color: var(--ha-cinema-ink);
  cursor: pointer; border-radius: 50%;
  transition: background .2s var(--ha-ease), border-color .2s var(--ha-ease);
}
.hg__btn:hover{ background: rgba(239,230,218,0.1); border-color: rgba(239,230,218,0.4); }

.hg__stage{
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: clamp(8px, 1.4vw, 20px);
  min-height: 0;
}
.hg__frame{
  margin: 0; height: 100%; min-height: 0;
  display: grid; place-items: center;
}
.hg__frame img{
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  opacity: 1;
  transition: opacity .22s var(--ha-ease);
  box-shadow: 0 40px 120px -50px rgba(0,0,0,0.9);
}
.hg__nav{
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--ha-cinema-line);
  background: rgba(18,17,16,0.5);
  color: var(--ha-cinema-ink);
  cursor: pointer; border-radius: 50%;
  transition: background .2s var(--ha-ease), transform .2s var(--ha-ease);
}
@media (hover: hover) and (pointer: fine){ .hg__nav:hover{ background: var(--ha-yellow); color: var(--ha-yellow-ink); } }
html[dir="rtl"] .hg__nav svg{ transform: scaleX(-1); }

.hg__strip{
  display: flex; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(239,230,218,0.3) transparent;
}
.hg__strip::-webkit-scrollbar{ height: 4px; }
.hg__strip::-webkit-scrollbar-thumb{ background: rgba(239,230,218,0.3); }
.hg__thumb{
  flex: 0 0 auto;
  width: clamp(64px, 8vw, 96px);
  aspect-ratio: 3 / 2;
  padding: 0; border: 0; cursor: pointer;
  background: #1A1815;
  opacity: .42;
  outline: 1px solid transparent;
  outline-offset: -1px;
  transition: opacity .2s var(--ha-ease), outline-color .2s var(--ha-ease);
}
.hg__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(1.15); }
.hg__thumb:hover{ opacity: .78; }
.hg__thumb.is-active{ opacity: 1; outline-color: var(--ha-yellow); }

@media (max-width: 720px){
  .hg__stage{ grid-template-columns: 1fr; }
  .hg__nav{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
  .hg__nav--prev{ inset-inline-start: 2px; }
  .hg__nav--next{ inset-inline-end: 2px; }
}
@media (prefers-reduced-motion: reduce){
  .hg, .hg__frame img, .hg__nav, .hg__btn, .hg__thumb{ transition: none !important; }
}

/* 18. LOCATION CARDS (.lc) [docs/css-notes.md n032] */

.lc-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(16px, 2vw, 30px);
}
.lc{
  position: relative;
  display: flex; flex-direction: column;
  background: var(--ha-bg);
  border: 1px solid var(--ha-line);
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition: border-color .32s var(--ha-ease), transform .42s var(--ha-ease);
}
.lc:hover{ border-color: rgba(27,22,19,0.3); }
[data-canvas="cinema"] .lc:hover, [data-canvas="deep"] .lc:hover{ border-color: rgba(239,230,218,0.36); }

.lc__media{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ha-cream-deep);
}
.lc__media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s var(--ha-ease);
}
.lc:hover .lc__media img{ transform: scale(1.02); }
.lc__media::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,12,11,0.34) 0%, rgba(14,12,11,0) 38%,
              rgba(14,12,11,0.06) 62%, rgba(14,12,11,0.62) 100%);
}
.lc__city{
  position: absolute; z-index: 2;
  top: clamp(12px, 1.4vw, 18px); inset-inline-start: clamp(12px, 1.4vw, 18px);
  font-family: var(--ha-mono); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: #F6EEE2;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
html[dir="rtl"] .lc__city{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .8rem; }

.lc__body{
  display: grid; gap: 10px;
  padding: clamp(18px, 1.9vw, 26px);
  flex: 1;
  align-content: start;
}
.lc__name{
  margin: 0;
  /* Pages set h1,h2,h3{color:var(--ink)}, which beat the canvas and left these [docs/css-notes.md n033] */
  color: var(--ha-fg);
  font-family: var(--ha-display);
  font-weight: var(--ha-display-w);
  font-size: var(--fs-d7);
  letter-spacing: -0.02em; line-height: 1.12;
}
html[dir="rtl"] .lc__name{ font-family: var(--ha-ar-display); letter-spacing: 0; line-height: 1.5; }
.lc__blurb{
  margin: 0;
  font-size: clamp(.88rem, 1vw, .96rem);
  line-height: 1.6; color: var(--ha-fg-2);
  font-weight: 350;
}
html[dir="rtl"] .lc__blurb{ line-height: 1.95; }
.lc__spaces{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.lc__tag{
  font-family: var(--ha-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid var(--ha-line);
  color: var(--ha-fg-2);
  white-space: nowrap;
}
html[dir="rtl"] .lc__tag{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .76rem; }
.lc__foot{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0 clamp(18px, 1.9vw, 26px) clamp(18px, 1.9vw, 26px);
  margin-top: auto;
}
.lc--soon .lc__media img{ filter: saturate(.5) contrast(.95); }
.lc__soon{
  font-family: var(--ha-mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ha-fg-2);
}
html[dir="rtl"] .lc__soon{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .78rem; }

/* Selected state, used inside the booking flow */
.lc.is-picked{ border-color: var(--ha-yellow); }
.lc.is-picked::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--ha-yellow);
}

/* 19. SPACE CARDS (.sc) [docs/css-notes.md n034] */

.sc-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.sc{
  position: relative;
  display: flex; flex-direction: column;
  background: var(--ha-bg);
  border: 1px solid var(--ha-line);
  overflow: hidden;
  transition: border-color .32s var(--ha-ease);
}
.sc:hover{ border-color: rgba(27,22,19,0.3); }
[data-canvas="cinema"] .sc:hover, [data-canvas="deep"] .sc:hover{ border-color: rgba(239,230,218,0.36); }
.sc.is-picked{ border-color: var(--ha-yellow); }
.sc.is-picked::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--ha-yellow);
}

.sc__media{
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden; cursor: zoom-in;
  background: var(--ha-cream-deep);
}
.sc__media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s var(--ha-ease);
}
.sc__media:hover img{ transform: scale(1.04); }
.sc__shots{
  position: absolute; z-index: 2;
  bottom: 10px; inset-inline-end: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: rgba(18,17,16,0.72);
  color: #F6EEE2;
  font-family: var(--ha-mono); font-size: .64rem; letter-spacing: .08em;
  backdrop-filter: blur(6px);
  font-variant-numeric: tabular-nums;
}
html[dir="rtl"] .sc__shots{ font-family: var(--ha-ar-ui); letter-spacing: 0; font-size: .74rem; }

.sc__body{
  display: grid; gap: 9px;
  padding: clamp(16px, 1.7vw, 24px);
  align-content: start; flex: 1;
}
.sc__type{
  font-family: var(--ha-mono); font-size: .62rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ha-fg-2);
}
html[dir="rtl"] .sc__type{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .76rem; }
.sc__name{
  margin: 0;
  color: var(--ha-fg);
  font-family: var(--ha-display);
  font-weight: var(--ha-display-w);
  font-size: var(--fs-d8);
  letter-spacing: -0.02em; line-height: 1.14;
}
html[dir="rtl"] .sc__name{ font-family: var(--ha-ar-display); letter-spacing: 0; line-height: 1.5; }
.sc__blurb{
  margin: 0; font-size: .89rem; line-height: 1.6;
  color: var(--ha-fg-2); font-weight: 350;
}
html[dir="rtl"] .sc__blurb{ line-height: 1.95; }

/* The scannable facts — §19's information order, never buried in prose. */
.sc__facts{
  display: flex; flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 2px;
  font-family: var(--ha-mono); font-size: .69rem;
  letter-spacing: .06em; color: var(--ha-fg-2);
  font-variant-numeric: tabular-nums;
}
html[dir="rtl"] .sc__facts{ font-family: var(--ha-ar-ui); letter-spacing: 0; font-size: .8rem; }
.sc__fact{ display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sc__fact::before{
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ha-yellow); flex: 0 0 auto;
}
.sc__feats{
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.sc__feat{
  font-size: .72rem; padding: 4px 8px;
  border: 1px solid var(--ha-line); color: var(--ha-fg-2);
  white-space: nowrap;
}
.sc__price{
  color: var(--ha-fg);
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 6px;
  font-family: var(--ha-display);
  font-size: var(--fs-d8);
  font-weight: var(--ha-display-w);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.sc__price span{
  font-family: var(--ha-mono); font-size: .68rem;
  letter-spacing: .06em; color: var(--ha-fg-2); font-weight: 400;
}
html[dir="rtl"] .sc__price span{ font-family: var(--ha-ar-ui); letter-spacing: 0; font-size: .8rem; }
.sc__foot{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 clamp(16px, 1.7vw, 24px) clamp(16px, 1.7vw, 24px);
  margin-top: auto;
}

/* 20. MISSING-CONTENT NOTE [docs/css-notes.md n035] */

.ha-empty{
  border: 1px dashed var(--ha-line);
  padding: clamp(24px, 3vw, 44px);
  display: grid; gap: 12px; justify-items: start;
  background: rgba(27,22,19,0.02);
}
[data-canvas="cinema"] .ha-empty, [data-canvas="deep"] .ha-empty{ background: rgba(239,230,218,0.03); }
.ha-empty h4{
  margin: 0;
  color: var(--ha-fg);
  font-family: var(--ha-display); font-weight: var(--ha-display-w);
  font-size: var(--fs-d8); letter-spacing: -0.015em;
}
html[dir="rtl"] .ha-empty h4{ font-family: var(--ha-ar-display); letter-spacing: 0; }
.ha-empty p{
  margin: 0; max-width: 54ch; font-size: .92rem;
  line-height: 1.64; color: var(--ha-fg-2); font-weight: 350;
}
html[dir="rtl"] .ha-empty p{ line-height: 1.95; }

/* 21. LOCATION-FIRST BOOKING (.bk-*) [docs/css-notes.md n036] */

/* --- the location switcher, pinned above every step --------------------- */
.bk-switcher{
  display: grid; gap: 12px;
  padding-bottom: clamp(16px, 1.8vw, 24px);
  margin-bottom: clamp(20px, 2.2vw, 30px);
  border-bottom: 1px solid var(--ha-line);
}
.bk-sw__now{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bk-sw__label{
  font-family: var(--ha-mono); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ha-fg-2);
}
html[dir="rtl"] .bk-sw__label{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .78rem; }
.bk-sw__name{
  color: var(--ha-fg);
  font-family: var(--ha-display); font-weight: var(--ha-display-w);
  font-size: var(--fs-d8); letter-spacing: -0.015em;
}
html[dir="rtl"] .bk-sw__name{ font-family: var(--ha-ar-display); letter-spacing: 0; }
.bk-sw__city{ font-size: .84rem; color: var(--ha-fg-2); }
.bk-sw__opts{ display: flex; flex-wrap: wrap; gap: 6px; }
.bk-sw__opt{
  padding: 6px 13px;
  border: 1px solid var(--ha-line);
  background: transparent; color: var(--ha-fg-2);
  font-size: .8rem; cursor: pointer;
  transition: border-color .2s var(--ha-ease), color .2s var(--ha-ease), background .2s var(--ha-ease);
}
@media (hover: hover) and (pointer: fine){ .bk-sw__opt:hover:not(:disabled){ border-color: var(--ha-fg); color: var(--ha-fg); } }
.bk-sw__opt.is-on{ background: var(--ha-fg); color: var(--ha-bg); border-color: var(--ha-fg); }
.bk-sw__opt:disabled{ opacity: .38; cursor: not-allowed; }
/* A location with no published spaces is still reachable — marked, not [docs/css-notes.md n037] */
.bk-sw__opt.is-empty{ opacity: .55; }
.bk-sw__opt.is-empty::after{
  content: '•'; margin-inline-start: 6px; color: var(--ha-ember);
}

/* --- progress labels --------------------------------------------------- */
.progress-labels{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--ha-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ha-fg-2);
}
.progress-labels span{
  text-align: center; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[dir="rtl"] .progress-labels{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .72rem; }

/* --- space-type chooser ------------------------------------------------ */
.bk-types{ display: grid; gap: 10px; }
.bk-type{
  display: grid; grid-template-columns: 96px 1fr; align-items: stretch;
  gap: 0; padding: 0; cursor: pointer; text-align: start;
  border: 1px solid var(--ha-line); background: transparent; color: inherit;
  overflow: hidden;
  transition: border-color .24s var(--ha-ease);
}
@media (hover: hover) and (pointer: fine){ .bk-type:hover{ border-color: rgba(27,22,19,0.34); } }
.bk-type.is-on{ border-color: var(--ha-yellow); box-shadow: inset 0 0 0 1px var(--ha-yellow); }
.bk-type__media{ display: block; overflow: hidden; background: var(--ha-cream-deep); }
.bk-type__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-type__body{ display: grid; gap: 4px; align-content: center; padding: 14px 18px; }
.bk-type__name{
  font-family: var(--ha-display); font-weight: var(--ha-display-w);
  font-size: 1.02rem; letter-spacing: -0.015em;
}
html[dir="rtl"] .bk-type__name{ font-family: var(--ha-ar-display); letter-spacing: 0; }
.bk-type__sub{ font-size: .84rem; color: var(--ha-fg-2); line-height: 1.5; }

/* --- package cards inside the flow ------------------------------------- */
.bk-pkgs{ display: grid; gap: 12px; }
.bk-pkg{
  border: 1px solid var(--ha-line);
  padding: clamp(16px, 1.8vw, 22px);
  display: grid; gap: 10px;
  transition: border-color .24s var(--ha-ease);
}
.bk-pkg:hover{ border-color: rgba(27,22,19,0.34); }
.bk-pkg.is-on{ border-color: var(--ha-yellow); box-shadow: inset 0 0 0 1px var(--ha-yellow); }
.bk-pkg__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.bk-pkg__name{
  margin: 0;
  color: var(--ha-fg); font-family: var(--ha-display); font-weight: var(--ha-display-w);
  font-size: clamp(1rem, 1.3vw, 1.16rem); letter-spacing: -0.015em;
}
html[dir="rtl"] .bk-pkg__name{ font-family: var(--ha-ar-display); letter-spacing: 0; }
.bk-pkg__price{
  color: var(--ha-fg);
  font-family: var(--ha-display); font-weight: var(--ha-display-w);
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bk-pkg__price span{
  font-family: var(--ha-mono); font-size: .66rem; font-weight: 400;
  color: var(--ha-fg-2); letter-spacing: .05em; margin-inline-start: 4px;
}
html[dir="rtl"] .bk-pkg__price span{ font-family: var(--ha-ar-ui); letter-spacing: 0; font-size: .78rem; }
.bk-pkg__sub{ margin: 0; font-size: .88rem; color: var(--ha-fg-2); line-height: 1.55; }
.bk-pkg__inc{
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 4px;
  font-size: .85rem; color: var(--ha-fg-2);
}
.bk-pkg__inc li{ position: relative; padding-inline-start: 16px; line-height: 1.5; }
.bk-pkg__inc li::before{
  content: ''; position: absolute; inset-inline-start: 0; top: .6em;
  width: 5px; height: 5px; background: var(--ha-yellow);
}
.bk-pkg__pick{ justify-self: start; margin-top: 4px; }

/* --- review ------------------------------------------------------------ */
.bk-review{
  display: grid; gap: 0;
  border-top: 1px solid var(--ha-line);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.bk-review__row{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; padding: 13px 0;
  border-bottom: 1px solid var(--ha-line);
}
.bk-review__row span{
  font-family: var(--ha-mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ha-fg-2);
  flex: 0 0 auto;
}
html[dir="rtl"] .bk-review__row span{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .8rem; }
.bk-review__row strong{
  color: var(--ha-fg);
  font-weight: 500; font-size: .95rem; text-align: end;
}

.bk-error{
  border: 1px solid #B23B3B; color: #B23B3B;
  padding: 12px 16px; font-size: .88rem;
  margin-bottom: 16px;
}

/* --- step navigation --------------------------------------------------- */
.bk-nav{
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: clamp(26px, 3vw, 40px);
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--ha-line);
}
.bk-nav .cta-btn{ margin-inline-start: auto; }
html[dir="rtl"] .bk-nav .wiz-back svg, .bk-nav .wiz-back svg{ transform: none; }

/* --- the sticky visual's thumbnail row --------------------------------- */
.bk-visual-strip{
  position: relative; z-index: 3;
  display: flex; gap: 6px; flex-wrap: wrap;
  padding-inline: clamp(24px, 3vw, 52px);
  padding-block: clamp(16px, 2vh, 24px) clamp(30px, 4.5vh, 64px);
}
.bk-visual-strip[hidden]{ display: none; }
/* No thumbnails means the caption still needs its floor. */
.bk-visual__meta:last-child{ padding-bottom: clamp(30px, 4.5vh, 64px); }
.bk-thumb{
  width: clamp(42px, 4vw, 58px); aspect-ratio: 1;
  padding: 0; border: 1px solid rgba(239,230,218,0.3);
  background: #1A1815; cursor: pointer; opacity: .8;
  transition: opacity .2s var(--ha-ease), border-color .2s var(--ha-ease);
}
.bk-thumb img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Two of the real photographs are deliberately dim interiors. At full size [docs/css-notes.md n038] */
  filter: brightness(1.22) contrast(1.03);
}
.bk-thumb:hover{ opacity: 1; border-color: var(--ha-yellow); }

@media (max-width: 900px){
  .bk-visual-strip{ display: none; }
  .bk-type{ grid-template-columns: 76px 1fr; }
  .bk-nav .cta-btn{ margin-inline-start: 0; width: 100%; }
}

/* --- explorer head ----------------------------------------------------- */
.xp-step-label{
  font-family: var(--ha-mono); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ha-cinema-soft);
  margin-bottom: clamp(16px, 2vw, 26px);
  display: block;
}
html[dir="rtl"] .xp-step-label{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .84rem; }

/* 22. LOCATION PAGE [docs/css-notes.md n039] */

.loc-hero-actions{ margin-top: clamp(20px, 2.6vw, 32px); display: flex; gap: 12px; flex-wrap: wrap; }

/* Move between locations without returning to the index. */
.loc-switch{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(14px, 2vw, 36px);
  padding: clamp(18px, 2.2vw, 28px) clamp(20px, 5vw, 64px);
  border-bottom: 1px solid var(--ha-sand-line);
  background: var(--ha-cream);
}
.loc-switch[hidden]{ display: none; }
.loc-switch__side{
  display: grid; gap: 3px; text-decoration: none; color: inherit;
  min-width: 0;
}
.loc-switch__side--next{ text-align: end; justify-items: end; }
.loc-switch__dir{
  font-family: var(--ha-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ha-ink-soft);
}
html[dir="rtl"] .loc-switch__dir{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .78rem; }
/* ROUND 31 — the arrow used to be a character inside the label ("← Previous"), [docs/css-notes.md n040] */
.loc-switch__dir[data-arrow]::before{ display: inline-block; margin-inline-end: 7px; }
.loc-switch__dir[data-arrow="prev"]::before{ content: "\2190"; }          /* ← */
html[dir="rtl"] .loc-switch__dir[data-arrow="prev"]::before{ content: "\2192"; }   /* → */
.loc-switch__dir[data-arrow="next"]::after{ display: inline-block; margin-inline-start: 7px; content: "\2192"; }
html[dir="rtl"] .loc-switch__dir[data-arrow="next"]::after{ content: "\2190"; }
.loc-switch__name{
  font-family: var(--ha-display); font-weight: var(--ha-display-w);
  font-size: clamp(.94rem, 1.3vw, 1.12rem); letter-spacing: -0.015em;
  color: var(--ha-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[dir="rtl"] .loc-switch__name{ font-family: var(--ha-ar-display); letter-spacing: 0; }
.loc-switch__side:hover .loc-switch__name{ color: var(--ha-ember); }
.loc-switch__all{
  font-family: var(--ha-mono); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ha-ink-soft); text-decoration: none;
  padding: 8px 14px; border: 1px solid var(--ha-sand-line);
  white-space: nowrap;
}
html[dir="rtl"] .loc-switch__all{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .8rem; }
.loc-switch__all:hover{ border-color: var(--ha-ink); color: var(--ha-ink); }

@media (max-width: 680px){
  .loc-switch{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .loc-switch__all{ grid-column: 1 / -1; justify-self: center; }
}

/* Location gallery: a scannable mosaic that opens the lightbox. */
.loc-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 8px;
  margin-bottom: clamp(38px, 5vw, 64px);
}
.loc-gallery__shot{
  position: relative; padding: 0; border: 0; cursor: zoom-in;
  aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--ha-cream-deep);
}
.loc-gallery__shot img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1s var(--ha-ease), filter .4s var(--ha-ease);
}
.loc-gallery__shot:hover img{ transform: scale(1.05); }
.loc-gallery__shot:first-child{ grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 620px){
  .loc-gallery__shot:first-child{ grid-column: span 1; grid-row: span 1; aspect-ratio: 4 / 3; }
}

.loc-amenities{
  list-style: none; margin: 0 0 clamp(38px, 5vw, 64px); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 8px 22px;
}
.loc-amenities li{
  position: relative; padding-inline-start: 17px;
  font-size: .92rem; line-height: 1.6; color: var(--ha-ink-soft);
}
.loc-amenities li::before{
  content: ''; position: absolute; inset-inline-start: 0; top: .62em;
  width: 5px; height: 5px; background: var(--ha-yellow);
}

/* dl. is not decoration. Two different components are called .loc-info: the [docs/css-notes.md n041] */
dl.loc-info{
  margin: 0 0 clamp(38px, 5vw, 64px);
  display: grid; grid-template-columns: max-content 1fr;
  gap: 10px clamp(18px, 2.4vw, 34px);
  align-items: baseline;
}
.loc-info dt{
  font-family: var(--ha-mono); font-size: .64rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ha-ink-soft);
}
html[dir="rtl"] .loc-info dt{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .8rem; }
.loc-info dd{ margin: 0; font-size: .95rem; line-height: 1.6; }
@media (max-width: 560px){
  dl.loc-info{ grid-template-columns: 1fr; gap: 3px 0; }
  .loc-info dd{ margin-bottom: 12px; }
}

/* Homepage location cards name the space types that location actually has. */
.loc-card-tags, .loc-featured .loc-card-tags{
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px;
}
.loc-card-tags span{
  font-family: var(--ha-mono); font-size: .58rem;
  letter-spacing: .1em; text-transform: uppercase;
  /* ROUND 31 — 4px of vertical padding put the cap-height within 5px of the [docs/css-notes.md n042] */
  padding: 7px 11px;
  border: 1px solid rgba(246,238,226,0.34);
  border-radius: 3px;
  color: rgba(246,238,226,0.86);
  white-space: nowrap;
  line-height: 1.2;
}
html[dir="rtl"] .loc-card-tags span{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .72rem;
  /* Arabic sits lower in its box and carries descenders Latin caps do not */
  padding: 6px 11px 8px;
  line-height: 1.5;
}

/* The second filter row on Packages: which location. */
.pkgs-filters--loc{ margin-top: 10px; }
.pkgs-filters--loc[hidden]{ display: none; }
.pk__where{
  margin: 6px 0 0; font-size: .82rem; line-height: 1.55; color: var(--ha-fg-2);
}
.pk__where b{
  display: block;
  font-family: var(--ha-mono); font-size: .6rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ha-fg-2); margin-bottom: 3px; font-weight: 500;
}
html[dir="rtl"] .pk__where b{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .74rem; }

/* 23. TOUCH TARGETS [docs/css-notes.md n043] */

@media (max-width: 760px){
  footer .footer-grid ul li a,
  footer .footer-grid ul li{
    display: block;
    min-height: 40px;
    line-height: 40px;
  }
  footer .footer-social-link,
  footer .footer-grid ul li a.footer-social-link{
    /* the rule above (li a → block, 40px line) out-ranks a bare class, and
       turned these into blocks: icon glued to the word, riding above it */
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1.3;
  }
  /* the row is the link's height, not a 40px text line wrapped round it —
     that doubled the space between Instagram, LinkedIn and the email */
  footer .footer-grid ul li:has(> .footer-social-link){
    line-height: normal;
    min-height: 0;
  }
  footer .footer-grid ul li a.footer-social-link{ min-height: 48px; }
  /* every link is already a 48px row; the 13px desktop margin on top of
     that left the phone footer with 63px between lines */
  footer .footer-grid ul li{ margin-bottom: 0; }

  /* inline text links that act as primary navigation */
  .ha-link,
  .about-link,
  .loc-ex-link,
  .pk__actions a,
  .lc__foot a,
  .xp-strip__head a{
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  .lang-toggle-btn{
    min-width: 44px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* filter chips and the location switcher */
  .pkgs-filter-btn,
  .bk-sw__opt,
  .ev-filter-btn,
  .ev-view-btn,
  .view-toggle button,
  .cal-toggle button,
  .huna-time-slot{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* the prev/next location switcher and the wizard's back button */
  .loc-switch__side,
  .loc-switch__all,
  .wiz-back,
  .wiz-skip-package,
  .bk-nav button{
    min-height: 44px;
  }
  .loc-switch__side{ justify-content: center; }
  .wiz-back, .wiz-skip-package{
    display: inline-flex;
    align-items: center;
  }

  /* contact details are links too */
  .contact-line a,
  .social-pill,
  a[href^="tel:"],
  a[href^="mailto:"]{
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* 24. EDGES & ELEVATION [docs/css-notes.md n044] */

:root{
  /* Four rungs, assigned by a card's rank rather than by eye. The old scale [docs/css-notes.md n045] */
  /* The fixed header's height, so anything sticky can park below it [docs/css-notes.md n046] */
  --ha-header-h: 90px;

  --r-main:  30px;   /* hero, location, package, feature cards */
  --r-card:  22px;   /* secondary cards inside a grid */
  --r-panel: 18px;   /* the information panel floating over an image */
  --r-field: 16px;   /* inputs */
  --r-btn:   14px;   /* buttons */
  --r-chip:  10px;   /* tags and slots */
  --r-pill:  999px;  /* actions */

  /* three steps, no more: at rest, on hover, and lifted off the page */
  --e-1: 0 1px 2px -1px rgba(27,22,19,0.06),
         0 2px 8px -3px rgba(27,22,19,0.08);
  --e-2: 0 2px 4px -2px rgba(27,22,19,0.08),
         0 12px 28px -12px rgba(27,22,19,0.16);
  --e-3: 0 4px 8px -4px rgba(27,22,19,0.10),
         0 28px 56px -24px rgba(27,22,19,0.24);
}

/* ---- snap the outliers ------------------------------------------------- */
.loc-ex-card,
.loc-featured,
.hw-row-media,
.pkg-card{ border-radius: var(--r-card); }

/* ---- elevation on the card families ----------------------------------- */
/* Flat hairline cards gain a whisper of depth so they lift off the cream [docs/css-notes.md n047] */
.lc, .sc, .bk-pkg, .pk, .rel-card, .fnb-card, .ev-card, .cl-tile{
  box-shadow: var(--e-1);
  transition: box-shadow .38s var(--ha-ease),
              transform .38s var(--ha-ease),
              border-color .32s var(--ha-ease);
}
@media (hover: hover) and (pointer: fine){
  .lc:hover, .sc:hover, .bk-pkg:hover, .pk:hover,
  .rel-card:hover, .fnb-card:hover, .ev-card:hover, .cl-tile:hover{
    box-shadow: var(--e-2);
    transform: translateY(-3px);
  }
  .lc.is-picked:hover, .sc.is-picked:hover, .bk-pkg.is-on:hover{ transform: none; }
}

/* On a dark canvas a brown shadow is invisible, so depth comes from the [docs/css-notes.md n048] */
[data-canvas="cinema"] .lc, [data-canvas="deep"] .lc,
[data-canvas="cinema"] .sc, [data-canvas="deep"] .sc,
[data-canvas="cinema"] .pk, [data-canvas="deep"] .pk{
  box-shadow: none;
  border-color: rgba(239,230,218,0.14);
}
@media (hover: hover) and (pointer: fine){
  [data-canvas="cinema"] .lc:hover, [data-canvas="deep"] .lc:hover,
  [data-canvas="cinema"] .sc:hover, [data-canvas="deep"] .sc:hover,
  [data-canvas="cinema"] .pk:hover, [data-canvas="deep"] .pk:hover{
    box-shadow: 0 24px 60px -30px rgba(0,0,0,0.75);
    border-color: rgba(239,230,218,0.34);
  }
}

/* ---- the modal and the lightbox sit above everything ------------------ */
.modal-box{ border-radius: var(--r-card); box-shadow: var(--e-3); }

/* ---- form fields share one radius ------------------------------------- */
.package-form input:not([type=hidden]),
.package-form select,
.package-form textarea,
.huna-date-trigger{ border-radius: var(--r-field); }

.huna-time-slot,
.sc__feat,
.lc__tag,
.bk-sw__opt{ border-radius: var(--r-chip); }

/* Media inside a rounded card must be clipped to the same curve, or the [docs/css-notes.md n049] */
.loc-ex-card, .loc-featured, .hw-row-media, .pkg-card,
.rel-card, .fnb-card, .ev-card, .cl-tile{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){
  .lc, .sc, .bk-pkg, .pk, .rel-card, .fnb-card, .ev-card, .cl-tile{ transition: none; }
  .lc:hover, .sc:hover, .bk-pkg:hover, .pk:hover,
  .rel-card:hover, .fnb-card:hover, .ev-card:hover, .cl-tile:hover{ transform: none; }
}

/* 25. NAV LEGIBILITY OVER PHOTOGRAPHY [docs/css-notes.md n050] */

/* ROUND 31 — `.solid` was missing from this guard and from the disable rule [docs/css-notes.md n051] */
header:not(.is-solid):not(.solid):not(.scrolled)::before{
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 190%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(14,12,11,0.58) 0%,
    rgba(14,12,11,0.34) 42%,
    rgba(14,12,11,0) 100%);
}
/* The bar is already positioned (fixed) by each page, so it establishes the [docs/css-notes.md n052] */
header.is-solid::before, header.solid::before, header.scrolled::before{ display: none; }

/* The small location label sits on the brightest part of a card photograph, [docs/css-notes.md n053] */
.lc__media::before{
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 38%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,12,11,0.58) 0%, rgba(14,12,11,0) 100%);
}

/* 26. FILTER ROWS ON A PHONE [docs/css-notes.md n054] */

@media (max-width: 760px){
  .pkgs-filters,
  .pkgs-filters--loc,
  .art-filters,
  .bk-sw__opts{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bleed to the screen edge so the row reads as scrollable */
    margin-inline: calc(-1 * var(--ha-gutter, 20px));
    padding-inline: var(--ha-gutter, 20px);
    padding-bottom: 2px;
  }
  .pkgs-filters::-webkit-scrollbar,
  .art-filters::-webkit-scrollbar,
  .pkgs-filters--loc::-webkit-scrollbar,
  .bk-sw__opts::-webkit-scrollbar{ display: none; }

  .pkgs-filters > *,
  .pkgs-filters--loc > *,
  .bk-sw__opts > *{
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* 27. SECTION HEADS (.xp-strip__head and friends) [docs/css-notes.md n055] */
.xp-strip{ margin-block: clamp(48px, 6vw, 88px); }

.xp-strip__head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px clamp(16px, 3vw, 32px);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

/* The heading already owns the block rhythm above; a second margin here [docs/css-notes.md n056] */
.xp-strip__head > :is(h1,h2,h3,h4,p){
  margin: 0;
  flex: 1 1 min(100%, 22ch);
}

.xp-strip__head a{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* The strips sit in a cinema section on the booking page, where the page's [docs/css-notes.md n057] */
[data-canvas="cinema"] .xp-strip__head > :is(h1,h2,h3,h4),
[data-canvas="deep"]   .xp-strip__head > :is(h1,h2,h3,h4){
  color: var(--ha-fg);
}

@media (max-width: 560px){
  /* On a narrow screen the link reads better under the statement than
     squeezed beside it. */
  .xp-strip__head{ gap: 8px; }
  .xp-strip__head > :is(h1,h2,h3,h4){ flex-basis: 100%; }
}

/* 28. DISPLAY TYPE SCALE [docs/css-notes.md n058] */
:root{
  --fs-giga: clamp(72px, 14vw, 190px);
  --fs-mega: clamp(56px, 12vw, 140px);
  --fs-d1:   clamp(46px, 9vw, 100px);
  --fs-d2:   clamp(38px, 6.5vw, 78px);
  --fs-d3:   clamp(34px, 5.5vw, 60px);
  --fs-d4:   clamp(30px, 4.6vw, 50px);
  --fs-d5:   clamp(26px, 3.8vw, 40px);
  --fs-d6:   clamp(23px, 3.2vw, 33px);
  --fs-d7:   clamp(20px, 2.6vw, 27px);
  --fs-d8:   clamp(17px, 2.1vw, 22px);
}

/* Arabic sets at a larger optical size than Latin at the same px, so the [docs/css-notes.md n059] */
html[lang="ar"]{
  --fs-giga: clamp(64px, 12.5vw, 170px);
  --fs-mega: clamp(50px, 10.5vw, 126px);
  --fs-d1:   clamp(42px, 8vw, 90px);
  --fs-d2:   clamp(34px, 5.8vw, 70px);
  --fs-d3:   clamp(31px, 5vw, 54px);
  --fs-d4:   clamp(27px, 4.2vw, 45px);
  --fs-d5:   clamp(24px, 3.4vw, 36px);
  --fs-d6:   clamp(21px, 2.9vw, 30px);
  --fs-d7:   clamp(19px, 2.4vw, 25px);
  --fs-d8:   clamp(16px, 1.9vw, 20px);
}

/* 29. DARK BANDS THAT PRE-DATE THE CANVAS SYSTEM [docs/css-notes.md n060] */
.hw-packages-strip,
.creative-house,
.ch-archive,
.ch-hero,
.works{
  --ha-gold-text: var(--ha-yellow);
  --ha-bg:   var(--ha-cinema);
  --ha-fg:   var(--ha-cinema-ink);
  --ha-fg-2: var(--ha-cinema-soft);
  --ha-line: var(--ha-cinema-line);
}

/* 30. THE ELEVATED CARD SYSTEM [docs/css-notes.md n061] */

/* ---- rank 1: the cards a page is actually about ----------------------- */
.lc,
.sc,
.pk,
.loc-card,
.loc-featured,
.loc-ex-card,
.mb-tier-card,
.ev-card--feature,
.bk-visual,
.reg-card{
  border-radius: var(--r-main);
}

/* ---- rank 2: cards inside a grid -------------------------------------- */
.bk-pkg,
.rel-card,
.fnb-card,
.ev-card,
.cl-tile,
.pkg-card,
.hw-row-media,
.loc-side-card,
.work-card,
.stat-card{
  border-radius: var(--r-card);
}

/* ---- buttons and fields ----------------------------------------------- */
.cta-btn,
.cta-outline,
.pkgs-filter-btn,
.ev-filter-btn,
.view-toggle,
button.bk-next,
button.bk-back{
  border-radius: var(--r-btn);
}

.package-form input:not([type=hidden]),
.package-form select,
.package-form textarea,
.contact-form input:not([type=hidden]),
.contact-form select,
.contact-form textarea,
.huna-date-trigger{
  border-radius: var(--r-field);
}

/* A photograph's square corner pokes through a rounded card unless the [docs/css-notes.md n062] */
.lc, .sc, .pk, .loc-card, .loc-featured, .loc-ex-card,
.bk-visual, .rel-card, .fnb-card, .ev-card, .cl-tile,
.pkg-card, .hw-row-media{ overflow: hidden; }

/* 31. THE FLOATING INFORMATION PANEL (§18) [docs/css-notes.md n063] */
.card-float{
  position: relative;
  margin-top: clamp(-56px, -4vw, -28px);
  margin-inline: clamp(14px, 1.6vw, 22px);
  padding: clamp(18px, 2vw, 26px);
  border-radius: var(--r-panel);
  background: var(--ha-bg, var(--ha-cream));
  border: 1px solid var(--ha-line, rgba(27,22,19,0.10));
  box-shadow: var(--e-2);
  z-index: 2;
  transition: box-shadow .38s var(--ha-ease), transform .38s var(--ha-ease);
}

/* On a dark canvas a brown shadow is invisible, so the panel separates [docs/css-notes.md n064] */
[data-canvas="cinema"] .card-float,
[data-canvas="deep"] .card-float{
  background: #191715;
  border-color: rgba(239,230,218,0.16);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.78);
}

/* 32. HOVER: LIFT, ZOOM, ARROW [docs/css-notes.md n065] */
@media (hover: hover) and (pointer: fine){
  .lc:hover  .card-float,
  .sc:hover  .card-float,
  .pk:hover  .card-float,
  .ev-card:hover .card-float{
    box-shadow: var(--e-3);
    transform: translateY(-2px);
  }

  .lc:hover img,
  .sc:hover img,
  .pk:hover img,
  .loc-ex-card:hover img,
  .rel-card:hover img,
  .fnb-card:hover img,
  .ev-card:hover img,
  .pkg-card:hover img{
    transform: scale(1.02);
  }

  .lc:hover .ha-arrow,      .sc:hover .ha-arrow,
  .pk:hover .ha-arrow,      .ev-card:hover .ha-arrow,
  .loc-ex-card:hover .ha-arrow,
  .lc:hover .ha-link::after, .pk:hover .ha-link::after{
    transform: translateX(4px);
  }
  html[dir="rtl"] .lc:hover .ha-arrow,
  html[dir="rtl"] .sc:hover .ha-arrow,
  html[dir="rtl"] .pk:hover .ha-arrow,
  html[dir="rtl"] .ev-card:hover .ha-arrow,
  html[dir="rtl"] .loc-ex-card:hover .ha-arrow{
    transform: translateX(-4px);
  }
}

.lc img, .sc img, .pk img, .loc-ex-card img, .rel-card img,
.fnb-card img, .ev-card img, .pkg-card img{
  transition: transform .8s var(--ha-ease);
}
.ha-arrow{ transition: transform .38s var(--ha-ease); display: inline-block; }

@media (prefers-reduced-motion: reduce){
  .card-float,
  .lc img, .sc img, .pk img, .loc-ex-card img, .rel-card img,
  .fnb-card img, .ev-card img, .pkg-card img,
  .ha-arrow{ transition: none !important; }
  .lc:hover img, .sc:hover img, .pk:hover img, .loc-ex-card:hover img,
  .rel-card:hover img, .fnb-card:hover img, .ev-card:hover img,
  .pkg-card:hover img{ transform: none !important; }
  .lc:hover .card-float, .sc:hover .card-float,
  .pk:hover .card-float, .ev-card:hover .card-float{ transform: none !important; }
}

/* ---- the location card as image + floating plate ---------------------- */
/* .lc__body and .lc__foot are two elements but one object: same inline [docs/css-notes.md n066] */
.lc__body{
  position: relative; z-index: 2;
  margin-top: clamp(-52px, -3.4vw, -26px);
  margin-inline: clamp(12px, 1.4vw, 18px);
  background: var(--ha-bg);
  border: 1px solid var(--ha-line);
  border-bottom: 0;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  box-shadow: 0 -2px 10px -6px rgba(27,22,19,0.18);
}
.lc__foot{
  position: relative; z-index: 2;
  margin-inline: clamp(12px, 1.4vw, 18px);
  margin-bottom: clamp(12px, 1.4vw, 18px);
  background: var(--ha-bg);
  border: 1px solid var(--ha-line);
  border-top: 0;
  border-radius: 0 0 var(--r-panel) var(--r-panel);
  box-shadow: var(--e-2);
}
[data-canvas="cinema"] .lc__body, [data-canvas="deep"] .lc__body,
[data-canvas="cinema"] .lc__foot, [data-canvas="deep"] .lc__foot{
  background: #191715;
  border-color: rgba(239,230,218,0.16);
}
[data-canvas="cinema"] .lc__foot, [data-canvas="deep"] .lc__foot{
  box-shadow: 0 22px 54px -28px rgba(0,0,0,0.8);
}
/* The city label sits on the photograph; with the plate raised it would [docs/css-notes.md n067] */
.lc__media{ aspect-ratio: 4 / 3.2; }

/* ---- the plate hugs its content; the photograph takes the slack -------- */
/* .lc__body used to flex:1 and .lc__foot to margin-top:auto, which stretched [docs/css-notes.md n068] */
.lc__media{ flex: 1 1 auto; min-height: clamp(180px, 20vw, 260px); }
.lc__body{ flex: 0 0 auto; }
.lc__foot{ margin-top: 0; }

/* Four locations in a three-up grid leaves one orphan on its own row. [docs/css-notes.md n069] */
@media (min-width: 900px){
  .lc-grid{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
}

/* 33. NO ACCIDENTAL EMPTY BANDS (§38) [docs/css-notes.md n070] */
.fnb-grid:empty,
.full-fnb-grid:empty,
.ev-grid:empty,
.sc-grid:empty,
.lc-grid:empty,
.pk-grid:empty,
.related-strip:empty,
.loc-gallery:empty,
.loc-amenities:empty,
.loc-info:empty,
.cal-grid:empty,
.gallery-strip:empty,
.loc-list-grid:empty,
.mb-grid:empty,
.works-grid:empty,
.logo-wall:empty,
.doc-grid:empty{
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---- the empty state itself, given the card system's edges ------------ */
.ha-empty{
  border-radius: var(--r-card);
  border-style: dashed;
}
.ha-empty .cta-btn{ border-radius: var(--r-btn); }

/* 34. READING MEASURE (§22) [docs/css-notes.md n071] */
.ha-lead,
.ha-body p,
.intro p,
.lead,
.mb-intro p,
.ch-intro p,
.about-body p,
.loc-story p,
.section-intro p,
.hw-intro p,
.pkgs-intro p,
.cl-intro p,
.ev-intro p,
.ch-mission-text p,
.ch-pitch-text p{
  max-width: 68ch;
}

html[dir="rtl"] .ha-lead,
html[dir="rtl"] .ha-body p,
html[dir="rtl"] .intro p,
html[dir="rtl"] .lead,
html[dir="rtl"] .mb-intro p,
html[dir="rtl"] .ch-intro p,
html[dir="rtl"] .about-body p,
html[dir="rtl"] .loc-story p,
html[dir="rtl"] .section-intro p,
html[dir="rtl"] .hw-intro p,
html[dir="rtl"] .pkgs-intro p,
html[dir="rtl"] .cl-intro p,
html[dir="rtl"] .ev-intro p,
html[dir="rtl"] .ch-mission-text p,
html[dir="rtl"] .ch-pitch-text p{
  max-width: 62ch;
}

/* The catch-all: any paragraph directly inside a full-width wrap. These are [docs/css-notes.md n072] */
.wrap > p,
.wrap > .eyebrow + p,
section > .wrap > p{
  max-width: 68ch;
}
html[dir="rtl"] .wrap > p,
html[dir="rtl"] .wrap > .eyebrow + p,
html[dir="rtl"] section > .wrap > p{
  max-width: 62ch;
}

/* 35. THE ARABIC BRAND LOCKUP INSIDE LATIN COPY (§28) [docs/css-notes.md n073] */
.ar-lockup,
[lang="ar"]:not(html):not([dir="rtl"] *){
  font-family: var(--ha-ar-display);
  font-weight: 500;
  font-size: 1.04em;      /* Arabic sets small against Inter at equal px */
  line-height: 1;
  letter-spacing: 0;
  unicode-bidi: isolate;  /* keeps the surrounding Latin punctuation in place */
}

/* 36. WHATSAPP [docs/css-notes.md n074] */
.wa{
  position: fixed;
  z-index: 70;                       /* over content, under the lightbox */
  inset-block-end: max(20px, env(safe-area-inset-bottom, 0px));
  inset-inline-end: max(20px, env(safe-area-inset-right, 0px));
  display: grid;
  justify-items: end;
  gap: 12px;
  font-family: var(--ha-ui);
}
html[dir="rtl"] .wa{ justify-items: start; font-family: var(--ha-ar-ui); }

/* Where a page pins a booking bar to the bottom, the button rides above it. */
body.has-sticky-cta .wa{ inset-block-end: max(92px, calc(env(safe-area-inset-bottom, 0px) + 84px)); }

.wa__btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  min-height: 48px;                  /* a real touch target */
  border: 1px solid var(--ha-ink);
  border-radius: var(--r-pill);
  background: var(--ha-yellow);
  color: var(--ha-ink);
  cursor: pointer;
  box-shadow: var(--e-2);
  transition: transform .34s var(--ha-ease), box-shadow .34s var(--ha-ease);
}
@media (hover: hover) and (pointer: fine){
  .wa__btn:hover{ transform: translateY(-2px); box-shadow: var(--e-3); }
}
.wa__btn:focus-visible{ outline: 2px solid var(--ha-ink); outline-offset: 3px; }

.wa__icon{ display: inline-flex; }
.wa__text{ display: grid; text-align: start; line-height: 1.15; }
.wa__nudge{
  font-family: var(--ha-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; opacity: .72;
}
html[dir="rtl"] .wa__nudge{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 12px; }
.wa__label{ font-size: 13px; font-weight: 500; }

/* On a phone the label would crowd the thumb zone; the icon carries it. */
@media (max-width: 560px){
  .wa__btn{ padding: 12px; gap: 0; }
  .wa__text{ display: none; }
}

.wa__panel{
  width: min(320px, calc(100vw - 40px));
  padding: 22px;
  border: 1px solid var(--ha-sand-line);
  border-radius: var(--r-panel);
  background: var(--ha-cream);
  color: var(--ha-ink);
  box-shadow: var(--e-3);
  position: relative;
  transform-origin: bottom right;
  /* Opens out of the button and closes back into it along the same path. [docs/css-notes.md n075] */
  transition: opacity .2s var(--ha-ease), transform .26s var(--ha-ease);
}
.wa__panel:not(.is-shown){ opacity: 0; transform: translateY(8px) scale(.97); }
html[dir="rtl"] .wa__panel{ transform-origin: bottom left; }
.wa__panel[hidden]{ display: none; }

.wa__close{
  position: absolute; top: 8px; inset-inline-end: 10px;
  width: 32px; height: 32px;
  border: 0; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ha-ink-soft);
  border-radius: var(--r-chip);
}
@media (hover: hover) and (pointer: fine){ .wa__close:hover{ color: var(--ha-ink); } }
.wa__close:focus-visible{ outline: 2px solid var(--ha-ink); outline-offset: 2px; }

.wa__title{
  margin: 0 0 8px;
  font-family: var(--ha-display); font-weight: var(--ha-display-w);
  font-size: var(--fs-d8); letter-spacing: -0.015em; color: var(--ha-ink);
  padding-inline-end: 26px;
}
html[dir="rtl"] .wa__title{ font-family: var(--ha-ar-display); letter-spacing: 0; }
.wa__body{ margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--ha-ink-soft); font-weight: 350; }
html[dir="rtl"] .wa__body{ line-height: 1.95; }
.wa__hours{
  margin: 0 0 16px;
  font-family: var(--ha-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ha-ink-soft);
}
html[dir="rtl"] .wa__hours{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 12px; }

.wa__go{
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--ha-ink); color: var(--ha-cream);
  text-decoration: none; font-size: 13px; font-weight: 500;
}
@media (hover: hover) and (pointer: fine){ .wa__go:hover{ background: #000; } }
.wa__go:focus-visible{ outline: 2px solid var(--ha-ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  .wa__btn, .wa__panel{ transition: none !important; animation: none !important; }
  @media (hover: hover) and (pointer: fine){ .wa__btn:hover{ transform: none !important; } }
}

/* 37. THE PACKAGE CARD, AFTER THE DIET (§2–§4) [docs/css-notes.md n076] */
/* Scoped away from .pk--feature, whose editorial two-column grid this would [docs/css-notes.md n077] */
.pk:not(.pk--feature){
  display: flex;
  flex-direction: column;
  height: 100%;              /* equal heights across a row, always */
}
/* .pk__media is NOT given a flex basis here: the anchor has no intrinsic [docs/css-notes.md n078] */
.pk:not(.pk--feature) .pk__body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: clamp(18px, 1.9vw, 26px);
}
/* The blurb takes the slack so the facts and the action line up across the [docs/css-notes.md n079] */
.pk__sub{ flex: 1 0 auto; }
.pk__specs{ flex: 0 0 auto; }
.pk__actions{
  flex: 0 0 auto;
  margin-top: 6px;
  display: flex;
  align-items: center;
}

/* One action, so it can be the confident one. */
.pk__actions .ha-pill{ width: 100%; justify-content: space-between; }

@media (min-width: 700px){
  .pk__actions .ha-pill{ width: auto; justify-content: flex-start; }
}

/* 38. THE MAJLIS [docs/css-notes.md n080] */
.mj-section{ margin-block: clamp(56px, 7vw, 120px); }

.mj-hero__facts{
  display: flex; flex-wrap: wrap;
  gap: clamp(20px, 3vw, 48px);
  margin: clamp(22px, 2.6vw, 34px) 0 clamp(26px, 3vw, 38px);
}
.mj-fact{ display: grid; gap: 4px; }
.mj-fact__k{
  font-family: var(--ha-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(251,246,239,0.72);
}
html[dir="rtl"] .mj-fact__k{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 12px; }
.mj-fact__v{ font-size: var(--fs-d8); color: var(--ha-cinema-ink); font-weight: 400; }

.mj-hero__cta{ display: flex; flex-wrap: wrap; gap: 12px; }

.mj-about{
  max-width: 68ch; font-size: 16px; line-height: 1.75;
  color: var(--ha-ink-soft); font-weight: 350;
}
html[dir="rtl"] .mj-about{ max-width: 62ch; line-height: 2.05; }

.mj-note{
  margin: -8px 0 clamp(18px, 2vw, 26px);
  font-size: 13px; color: var(--ha-ink-soft);
}

/* ---- what's included -------------------------------------------------- */
.mj-included{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 12px clamp(20px, 2.4vw, 34px);
}
.mj-inc{
  display: flex; align-items: baseline; gap: 10px;
  font-size: 15px; line-height: 1.55; color: var(--ha-fg);
}
.mj-inc__dot{
  flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ha-yellow); transform: translateY(-2px);
}

/* ---- the collection --------------------------------------------------- */
/* An exhibition wall, not a product grid: the work is large, the caption [docs/css-notes.md n081] */
.mj-art-section{ padding-block: clamp(56px, 7vw, 110px); }
.mj-art{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(26px, 3.4vw, 56px);
}
.aw{ margin: 0; display: grid; gap: 16px; }
.aw__media{
  border-radius: var(--r-card);
  overflow: hidden;
  background: rgba(239,230,218,0.06);
}
.aw__media img{ width: 100%; height: auto; display: block; }
.aw__title{
  margin: 0;
  font-family: var(--ha-display); font-weight: var(--ha-display-w);
  font-size: var(--fs-d7); letter-spacing: -0.015em;
  color: var(--ha-fg);
}
html[dir="rtl"] .aw__title{ font-family: var(--ha-ar-display); letter-spacing: 0; line-height: 1.5; }
.aw__artist{ margin: 6px 0 0; font-size: 14px; color: var(--ha-fg-2); }
.aw__meta{
  margin: 8px 0 0;
  font-family: var(--ha-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ha-fg-2);
}
html[dir="rtl"] .aw__meta{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 12px; }

/* ---- the film --------------------------------------------------------- */
.mj-film__card{
  display: grid; grid-template-columns: minmax(0, 300px) 1fr;
  gap: clamp(18px, 2.4vw, 34px);
  align-items: center;
  text-decoration: none; color: inherit;
  border: 1px solid var(--ha-line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ha-bg);
  box-shadow: var(--e-1);
}
@media (max-width: 680px){ .mj-film__card{ grid-template-columns: 1fr; } }
.mj-film__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.mj-film__body{ padding: clamp(18px, 2vw, 28px); }
.mj-film__body h3{ margin: 0 0 8px; font-size: var(--fs-d7); color: var(--ha-fg); }
.mj-film__body p{ margin: 0; font-size: 14px; line-height: 1.65; color: var(--ha-fg-2); }

/* ---- optional services ------------------------------------------------ */
.mj-services{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.svc{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: clamp(16px, 1.8vw, 24px);
  border: 1px solid var(--ha-line);
  border-radius: var(--r-card);
  background: var(--ha-bg);
}
.svc__name{ margin: 0; font-size: 16px; font-weight: 500; color: var(--ha-fg); }
.svc__desc{ margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--ha-fg-2); }
.svc__price{
  flex: 0 0 auto;
  font-family: var(--ha-mono); font-size: 12px;
  letter-spacing: .08em; color: var(--ha-fg);
  white-space: nowrap;
}
html[dir="rtl"] .svc__price{ font-family: var(--ha-ar-ui); letter-spacing: 0; font-size: 13px; }

/* The hero sits on a photograph, so the secondary action has to be drawn for [docs/css-notes.md n082] */
.mj-hero .cta-outline{
  border-color: rgba(251,246,239,0.55);
  color: var(--ha-cinema-ink);
  background: transparent;
}
@media (hover: hover) and (pointer: fine){ .mj-hero .cta-outline:hover{
  border-color: var(--ha-cinema-ink);
  background: rgba(251,246,239,0.08);
} }

/* 39. THE PACKAGE CARD AS AN ACTUAL CARD [docs/css-notes.md n083] */
.pk{
  background: var(--ha-bg);
  border: 1px solid var(--ha-line);
  border-radius: var(--r-main);
  overflow: hidden;                /* the card clips its own corners */
  box-shadow: var(--e-1);
  transition: box-shadow .38s var(--ha-ease), transform .38s var(--ha-ease);
}
@media (hover: hover) and (pointer: fine){
  .pk:hover{ box-shadow: var(--e-2); transform: translateY(-3px); }
}

/* The photograph fills the top of the card; the card's own radius shapes [docs/css-notes.md n084] */
.pk__media,
.pk__media-inner{ border-radius: 0; }
.pk__media{ overflow: hidden; aspect-ratio: 4 / 3.2; }

/* The numeral belongs on the photograph, where nothing can scroll over it. */
.pk__idx{
  position: absolute;
  z-index: 3;
  top: clamp(12px, 1.4vw, 18px);
  inset-inline-start: clamp(12px, 1.4vw, 18px);
  margin: 0;
  padding: 5px 9px;
  border-radius: var(--r-chip);
  background: rgba(12,11,10,0.55);
  color: var(--ha-cinema-ink);
  backdrop-filter: blur(6px);
}

/* The price sits on the photograph's lower edge rather than hanging off [docs/css-notes.md n085] */
.pk__price{
  inset-inline-start: clamp(12px, 1.4vw, 18px);
  bottom: clamp(12px, 1.4vw, 18px);
  transform: none;
  border-radius: var(--r-panel);
  box-shadow: var(--e-2);
}

/* With the plate no longer overlapping, the body needs its own padding [docs/css-notes.md n086] */
.pk__body{
  margin-top: 0;
  padding: clamp(18px, 1.9vw, 26px);
}

/* ---- the sticky filter bar stops eating the cards ---------------------- */
/* It was pinned to top:0, i.e. underneath the fixed header, so it slid [docs/css-notes.md n087] */
.pkgs-filters-wrap{
  top: var(--ha-header-now, var(--ha-header-h, 74px)) !important;
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.pk{ scroll-margin-top: calc(var(--ha-header-h, 74px) + 84px); }

/* The bar condenses with the header. */
/* The measured height covers both states, so the hand-written fallbacks [docs/css-notes.md n088] */
header.scrolled ~ main .pkgs-filters-wrap,
header.solid ~ main .pkgs-filters-wrap,
header.is-solid ~ main .pkgs-filters-wrap{
  top: var(--ha-header-now, 62px) !important;
}
@media (max-width: 700px){
  .pkgs-filters-wrap,
  header.scrolled ~ main .pkgs-filters-wrap,
  header.solid ~ main .pkgs-filters-wrap{
    top: var(--ha-header-now, 62px) !important;
  }
}

/* 40. ART AT HUNA [docs/css-notes.md n089] */
.art-hero{
  padding-block: clamp(120px, 14vw, 200px) clamp(56px, 7vw, 96px);
  background: var(--ha-cinema);
  color: var(--ha-cinema-ink);
}
.art-hero h1{
  margin: 14px 0 0;
  font-size: var(--fs-d2);
  letter-spacing: -0.03em; line-height: 1.02;
  color: var(--ha-cinema-ink);
  max-width: 16ch;
}
html[dir="rtl"] .art-hero h1{ letter-spacing: 0; line-height: 1.3; max-width: 18ch; }
.art-hero .ha-lead{ margin-top: 20px; color: rgba(251,246,239,0.76); }

.art-stats{
  display: flex; flex-wrap: wrap;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(34px, 4vw, 56px);
}
.art-stat{ display: grid; gap: 4px; }
.art-stat__n{
  font-family: var(--ha-display); font-weight: var(--ha-display-w);
  font-size: var(--fs-d4); line-height: 1;
  color: var(--ha-yellow);
  font-variant-numeric: tabular-nums lining-nums;
}
.art-stat__k{
  font-family: var(--ha-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(251,246,239,0.66);
}
html[dir="rtl"] .art-stat__k{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 12px; }

.art-section{ margin-block: clamp(48px, 6vw, 96px); }

/* where the piece actually hangs — the reason the section exists */
.aw__where{
  margin: 8px 0 0;
  font-size: 13px; color: var(--ha-fg-2);
}

/* ---- the artists ------------------------------------------------------- */
.artist-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(22px, 2.8vw, 40px);
}
.artist{
  display: grid; gap: 14px;
  border-radius: var(--r-card);
  overflow: hidden;
}
.artist__media{
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ha-cream-deep);
}
.artist__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.artist__name{
  margin: 0;
  font-family: var(--ha-display); font-weight: var(--ha-display-w);
  font-size: var(--fs-d7); letter-spacing: -0.02em; color: var(--ha-fg);
}
html[dir="rtl"] .artist__name{ font-family: var(--ha-ar-display); letter-spacing: 0; line-height: 1.45; }
.artist__disc{
  margin: 6px 0 0;
  font-family: var(--ha-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ha-gold-text);
}
html[dir="rtl"] .artist__disc{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 12px; }
.artist__bio{ margin: 10px 0 0; font-size: 14px; line-height: 1.65; color: var(--ha-fg-2); max-width: 46ch; }
.artist__count{
  margin: 10px 0 0;
  font-family: var(--ha-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ha-fg-2);
}
html[dir="rtl"] .artist__count{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 12px; }

/* 41. THE PAGE RAIL [docs/css-notes.md n090] */
:root{
  --ha-wrap-max: 1400px;
  --ha-rail: calc(max(0px, (100vw - var(--ha-wrap-max)) / 2) + 48px);
}
@media (max-width: 768px){
  :root{ --ha-rail: 22px; }
}

.loc-city-info{
  padding-inline: var(--ha-rail);
  padding-block: clamp(32px, 4vw, 52px);
}
/* The right-hand panel of a split starts a new column, so its text keeps [docs/css-notes.md n091] */
@media (min-width: 761px){
  .loc-cities-split > .loc-city-panel + .loc-city-panel .loc-city-info{
    padding-inline-start: clamp(32px, 3.4vw, 52px);
  }
}

/* The caption lists branch names; 360px broke them mid-word. */
.loc-city-sub{ max-width: 46ch; }
html[dir="rtl"] .loc-city-sub{ max-width: 42ch; }

/* A branch name should not break at its own hyphen: "Huna Dakhna Al-" on one [docs/css-notes.md n092] */
.loc-city-sub{ max-width: none; padding-inline-end: clamp(24px, 4vw, 80px); }
.loc-city-sub .nb{ white-space: nowrap; }

/* 42. THE BAR ON SCROLL [docs/css-notes.md n093] */
header.scrolled, header.solid, header.is-solid{
  background: var(--ha-cream);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    0 1px 0 var(--ha-sand-line),
    0 18px 34px -30px rgba(20, 16, 13, 0.55);
}
/* The @supports block above re-declared the translucent value for every [docs/css-notes.md n094] */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  header.scrolled, header.solid, header.is-solid{
    background: var(--ha-cream);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
header.scrolled .navlinks a,
header.solid .navlinks a,
header.is-solid .navlinks a{ color: #4F4842; }
header.scrolled .navlinks a.current,
header.solid .navlinks a.current,
header.is-solid .navlinks a.current{ color: var(--ha-ink); background: transparent; }

/* The cream bar arrives as the hero leaves; without this the swap reads [docs/css-notes.md n095] */
header{ transition: background-color .28s var(--ha-ease, cubic-bezier(.22,.61,.36,1)),
                    padding .28s var(--ha-ease, cubic-bezier(.22,.61,.36,1)),
                    box-shadow .28s linear; }
@media (prefers-reduced-motion: reduce){ header{ transition: none; } }

/* 43. THE FULL-SCREEN MENU CAN NOW SCROLL TO ITS TOP [docs/css-notes.md n096] */
@media (max-width: 1000px){
  /* Auto margins do what `center` was meant to do and what `safe center` [docs/css-notes.md n097] */
  .navlinks{ justify-content: flex-start !important; }
  .navlinks > li:first-child{ margin-block-start: auto; }
  .navlinks > li:last-child{ margin-block-end: auto; }
}

/* 44. THE SEAM [docs/css-notes.md n098] */

/* (a) A section with no class of its own still keeps the rhythm. Every [docs/css-notes.md n099] */
main > section:not([class]){
  padding-block: clamp(36px, 4vw, 64px) clamp(56px, 6.5vw, 104px);
}

/* (b) The site footer's last line was 34px from the bottom of the page [docs/css-notes.md n100] */
footer{ padding-bottom: clamp(40px, 4vw, 60px); }

/* (c) The membership zones read as short at desktop width, where 70px of [docs/css-notes.md n101] */
@media (min-width: 1100px){
  .mb-zone{ padding-block-end: 92px; }
}

/* 45. THE ART PAGE'S OWN FILTER CHIPS [docs/css-notes.md n102] */
.art-filters{
  display: flex; flex-wrap: wrap;
  gap: clamp(8px, 1vw, 12px);
}
.art-filter-btn{
  font-family: var(--ha-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ha-fg-2);
  background: #FFFFFF;
  border: 1px solid var(--ha-line);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
@media (hover: hover) and (pointer: fine){ .art-filter-btn:hover{ background: var(--ha-cream-deep); color: var(--ha-ink); } }
.art-filter-btn.active{
  background: var(--ha-ink); color: var(--ha-cream);
  border-color: var(--ha-ink);
}
.art-filter-btn:focus-visible{
  outline: 2px solid var(--ha-ink); outline-offset: 2px;
}
html[lang="ar"] .art-filter-btn{
  font-family: var(--ha-ar-ui);
  text-transform: none; letter-spacing: normal; font-size: 13px;
}

/* 46. ONE CARD IS STILL A CARD [docs/css-notes.md n103] */
.xp-pkg-strip,
.pk-grid,
.sc-grid,
.mj-art,
.mj-services,
.artist-grid{
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.pk-grid--three{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.mj-services{   grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.artist-grid{   grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.lc-grid{       grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
@media (min-width: 900px){
  .lc-grid{     grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
}

/* (Round 56: the rules that centred space and package grids, and pulled a [docs/css-notes.md n104] */

/* A hard ceiling as well, so no future grid can produce a card taller [docs/css-notes.md n105] */
.artist{ max-width: 420px; }
.artist__media{ max-height: 520px; }

/* 47. ART AT HUNA — PEOPLE FIRST [docs/css-notes.md n106] */

/* ---- the shortcut: one piece, large ----------------------------------- */
.art-featured-band{
  background: var(--ha-cream-deep);
  padding-block: clamp(48px, 6vw, 96px);
  border-block: 1px solid var(--ha-sand-line);
}
.art-featured{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: center;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-main);
}
@media (max-width: 860px){
  .art-featured{ grid-template-columns: 1fr; gap: clamp(20px, 4vw, 30px); }
}
.art-featured__media{
  border-radius: var(--r-main);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ha-cream);
  box-shadow: var(--e-2, 0 24px 48px -32px rgba(20,16,13,0.45));
}
.art-featured__media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s var(--ha-ease-out, cubic-bezier(.22,.61,.36,1));
}
@media (hover: hover) and (pointer: fine){
  .art-featured:hover .art-featured__media img{ transform: scale(1.03); }
}
.art-featured__title{
  margin: 10px 0 0;
  font-size: var(--fs-d4);
  line-height: 1.06; letter-spacing: -0.02em;
}
html[dir="rtl"] .art-featured__title{ letter-spacing: 0; line-height: 1.3; }
.art-featured__artist{ margin: 10px 0 0; font-size: 1rem; color: var(--ha-fg-2); }
.art-featured__meta,
.art-featured__where{
  margin: 6px 0 0;
  font-family: var(--ha-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ha-fg-2);
}
html[lang="ar"] .art-featured__meta,
html[lang="ar"] .art-featured__where{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 13px;
}
.art-featured__go{
  display: inline-block; margin-top: clamp(16px, 2vw, 24px);
  font-family: var(--ha-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
html[lang="ar"] .art-featured__go{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 14px;
}

/* ---- the artist card is the link -------------------------------------- */
a.artist{ text-decoration: none; color: inherit; display: grid; }
a.artist .artist__media img{
  transition: transform .9s var(--ha-ease-out, cubic-bezier(.22,.61,.36,1));
}
@media (hover: hover) and (pointer: fine){
  a.artist:hover .artist__media img{ transform: scale(1.04); }
  a.artist:hover .artist__go{ opacity: 1; transform: translateX(0); }
}
a.artist:focus-visible{ outline: 2px solid var(--ha-ink); outline-offset: 4px; }
.artist__go{
  display: inline-block; margin-top: 12px;
  font-family: var(--ha-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ha-gold-text);
  opacity: .72; transform: translateX(-2px);
  transition: opacity .25s, transform .25s;
}
html[dir="rtl"] .artist__go{ transform: translateX(2px); }
html[lang="ar"] .artist__go{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 12px;
}
.art-artists__note{ margin: 10px 0 0; max-width: 52ch; }

/* ---- an artwork's price, or a way to ask ------------------------------ */
.aw__price{
  margin: 10px 0 0;
  font-family: var(--ha-mono); font-size: 14px; font-weight: 700;
  color: var(--ha-fg);
  font-variant-numeric: tabular-nums lining-nums;
}
html[lang="ar"] .aw__price{ font-family: var(--ha-ar-ui); font-size: 15px; }
.aw__ask{
  display: inline-block; margin-top: 10px;
  font-family: var(--ha-mono); font-size: 10px;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--ha-gold-text);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
html[lang="ar"] .aw__ask{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 13px;
}
.aw__artist a{ color: inherit; text-decoration: none; border-bottom: 1px solid var(--ha-line); }
.aw__artist a:hover{ border-bottom-color: currentColor; }

/* 48. THE ARTIST'S OWN PAGE [docs/css-notes.md n107] */
.artist-hero{
  background: var(--ha-cinema);
  color: var(--ha-cinema-ink);
  padding-block: clamp(110px, 13vw, 190px) clamp(48px, 6vw, 88px);
}
.artist-hero__inner{
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(26px, 3.6vw, 64px);
  align-items: center;
}
@media (max-width: 760px){
  .artist-hero__inner{ grid-template-columns: 1fr; }
}
.artist-hero__media{
  aspect-ratio: 4 / 5;
  max-width: 380px;
  border-radius: var(--r-main);
  overflow: hidden;
  background: var(--ha-cinema-2);
}
.artist-hero__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.artist-hero__back{ display: inline-block; margin-bottom: 14px; color: var(--ha-yellow); }
.artist-hero h1{
  margin: 0;
  font-size: var(--fs-d3);
  line-height: 1.04; letter-spacing: -0.03em;
  color: var(--ha-cinema-ink);
}
html[dir="rtl"] .artist-hero h1{ letter-spacing: 0; line-height: 1.3; }
.artist-hero__disc{
  margin: 12px 0 0;
  font-family: var(--ha-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ha-yellow);
}
html[lang="ar"] .artist-hero__disc{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 14px;
}
.artist-hero .ha-lead{ margin-top: 18px; color: rgba(239,230,218,0.78); }
.artist-hero__facts{
  display: flex; flex-wrap: wrap;
  gap: clamp(18px, 2.6vw, 44px);
  margin-top: clamp(22px, 3vw, 36px);
}
.artist-about{
  max-width: 68ch;
  font-size: 1.02rem; line-height: 1.75; color: var(--ha-fg-2);
}
html[dir="rtl"] .artist-about{ max-width: 60ch; }

/* ---- the film --------------------------------------------------------- */
.art-film-band{
  background: var(--ha-cinema);
  color: var(--ha-cinema-ink);
  padding-block: clamp(52px, 6.5vw, 104px);
}
.art-film-band .ha-statement{ color: var(--ha-cinema-ink); }
.ar-film__card{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  text-decoration: none; color: inherit;
}
@media (max-width: 760px){
  .ar-film__card{ grid-template-columns: 1fr; }
}
.ar-film__media{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ha-cinema-2);
}
.ar-film__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-film__play{
  position: absolute; inset: 0; margin: auto;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,206,87,0.94);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6);
}
.ar-film__play::after{
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-inline-start: 18px solid #1B1613;
  border-block: 11px solid transparent;
  transform: translateX(3px);
}
html[dir="rtl"] .ar-film__play::after{ transform: translateX(-3px) scaleX(-1); }
.ar-film__title{ margin: 0; font-size: var(--fs-d5); line-height: 1.12; color: var(--ha-cinema-ink); }
.ar-film__meta{
  margin: 10px 0 0;
  font-family: var(--ha-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ha-cinema-soft);
}
html[lang="ar"] .ar-film__meta{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 13px;
}
.ar-film__go{
  display: inline-block; margin-top: 18px;
  font-family: var(--ha-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ha-yellow);
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
html[lang="ar"] .ar-film__go{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 14px;
}

/* 49. THE PHONE'S HEADER, AND THE MENU YOU COULD SEE THROUGH [docs/css-notes.md n108] */
@media (max-width: 1000px){

  /* (a) the drawer gets its surface back */
  .navlinks{
    background: var(--ha-cinema) !important;
    box-shadow: none !important;
  }

  /* (b) the bar is legible whatever is behind it */
  header{
    background: var(--ha-cream);
    box-shadow: 0 1px 0 var(--ha-sand-line);
  }
  header::before{ display: none !important; }   /* the scrim was for a glass bar */
  header .logo-mark .on-light{ opacity: 1; }
  header .logo-mark .on-dark{ opacity: 0; }
  .mobile-menu-btn{
    border-color: rgba(27,22,19,0.22) !important;
    color: var(--ha-ink);
  }
  .lang-toggle-btn{ background: var(--ha-cream-deep); color: var(--ha-ink); }

  /* (c) open the menu and the bar joins it */
  header:has(.navlinks.open){
    background: var(--ha-cinema);
    box-shadow: none;
  }
  header:has(.navlinks.open) .logo-mark .on-light{ opacity: 0; }
  header:has(.navlinks.open) .logo-mark .on-dark{ opacity: 1; }
  header:has(.navlinks.open) .mobile-menu-btn{
    border-color: rgba(251,246,239,0.3) !important;
    color: var(--ha-cinema-ink);
  }
  header:has(.navlinks.open) .lang-toggle-btn{
    background: rgba(251,246,239,0.12); color: var(--ha-cinema-ink);
  }

  /* (d) the entries themselves, once they have something to sit on */
  .navlinks a{ color: rgba(239,230,218,0.92) !important; }
  .navlinks a.current{ color: var(--ha-yellow) !important; }
}

/* 50. NO MENU BUTTON ON A DESKTOP [docs/css-notes.md n109] */
@media (min-width: 1001px){
  .mobile-menu-btn{ display: none !important; }
}

/* 51. THE BRANCH SWITCHER SAYS WHAT EACH BRANCH HAS [docs/css-notes.md n110] */
.bk-sw__opt{ position: relative; }
.bk-sw__opt.is-lacking{ opacity: .74; }
.bk-sw__lack{
  display: block;
  margin-top: 2px;
  font-family: var(--ha-mono);
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ha-gold-text);
  opacity: .9;
}
html[lang="ar"] .bk-sw__lack{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 11px;
}

.bk-switch-note{
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px clamp(10px, 1.4vw, 18px);
  margin-top: clamp(12px, 1.6vw, 18px);
  padding: clamp(12px, 1.5vw, 16px) clamp(14px, 1.8vw, 20px);
  border: 1px solid var(--ha-line);
  border-inline-start: 3px solid var(--ha-yellow);
  border-radius: var(--r-panel);
  background: var(--ha-cream-deep);
  font-size: .95rem; line-height: 1.55;
  color: var(--ha-fg-2);
}
.bk-switch-note .ha-link{ white-space: nowrap; }

/* 52. EVERY BRAND CARD THE SAME HEIGHT [docs/css-notes.md n111] */
/* Not height:100%. A percentage height on a grid item resolves against a row [docs/css-notes.md n112] */
.full-fnb-card{ display: flex; flex-direction: column; align-self: stretch; }
.full-fnb-body{ display: flex; flex-direction: column; flex: 1; }
.full-fnb-blurb{
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.full-fnb-where{
  margin: 10px 0 0;
  font-family: var(--ha-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ha-fg-2);
}
html[lang="ar"] .full-fnb-where{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 12px;
}
/* The button sits on the card's floor, so the floors line up. */
.full-fnb-body .menu-btn{ margin-top: auto; padding-top: 16px; }

/* The featured card is wide, so it can carry more — but not unlimited. */
.full-fnb-grid > .full-fnb-card:first-child .full-fnb-blurb{
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

/* 53. TWO BLOCKS ON THE SAME BACKGROUND STILL NEED AIR [docs/css-notes.md n113] */
.art-filters{ margin-bottom: clamp(26px, 3vw, 44px); }

/* A related strip is a new subject, not a continuation of the one above. */
.loc-detail-body > .loc-detail-grid + .wrap{
  margin-top: clamp(56px, 6vw, 96px);
  padding-top: clamp(32px, 3.4vw, 48px);
  border-top: 1px solid var(--ha-line);
}

/* 54. "AN ECOSYSTEM" — WITH THE ECOSYSTEM IN IT [docs/css-notes.md n114] */
@media (min-width: 1000px){
  .hm-promise .ha-wrap{
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: clamp(40px, 5vw, 96px);
    grid-template-areas:
      "kicker kicker"
      "title  title"
      "offer  body"
      "stats  stats";
    align-items: start;
  }
  .hm-promise__kicker{ grid-area: kicker; }
  .hm-promise__title{ grid-area: title; }
  .hm-offer{ grid-area: offer; margin-top: clamp(34px, 5vw, 78px); }
  .hm-promise__body{ grid-area: body; margin-inline-start: 0; }
  .hm-stats{ grid-area: stats; }
}

.hm-offer{ margin-top: clamp(34px, 4vw, 56px); }
.hm-offer__head{
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  font-family: var(--ha-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ha-yellow);
}
html[lang="ar"] .hm-offer__head{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 13px;
}
.hm-offer__list{ list-style: none; margin: 0; padding: 0; }
.hm-offer__row + .hm-offer__row{ border-top: 1px solid rgba(239,230,218,0.12); }
.hm-offer__row a{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  padding: clamp(11px, 1.3vw, 15px) 0;
  text-decoration: none;
  color: rgba(239,230,218,0.86);
  transition: color .25s var(--ha-ease, ease);
}
.hm-offer__row a:hover{ color: #FBF6EF; }
.hm-offer__mark{
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(239,230,218,0.2);
  border-radius: var(--r-chip);
  color: var(--ha-yellow);
  flex: 0 0 auto;
  transition: border-color .25s var(--ha-ease, ease);
}
.hm-offer__mark svg{ width: 18px; height: 18px; }
.hm-offer__row a:hover .hm-offer__mark{ border-color: var(--ha-yellow); }
.hm-offer__label{ font-size: .98rem; line-height: 1.4; }
.hm-offer__n{
  font-family: var(--ha-mono); font-size: 12px;
  color: var(--ha-cinema-soft);
  font-variant-numeric: tabular-nums lining-nums;
}
html[lang="ar"] .hm-offer__n{ font-family: var(--ha-mono); }
@media (prefers-reduced-motion: reduce){
  .hm-offer__row a, .hm-offer__mark{ transition: none; }
}

/* 55. ATTACH YOUR WORK [docs/css-notes.md n115] */
.file-drop{
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px clamp(12px, 1.4vw, 18px);
  padding: clamp(14px, 1.7vw, 20px) clamp(16px, 1.9vw, 22px);
  border: 1px dashed var(--ha-line);
  border-radius: var(--r-field);
  background: var(--ha-bg);
  transition: border-color .25s var(--ha-ease, ease), background .25s var(--ha-ease, ease);
}
.file-drop:hover,
.file-drop:focus-within{ border-color: var(--ha-yellow); }
.file-drop.has-file{ border-style: solid; border-color: var(--ha-yellow); }
.file-drop input[type="file"]{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.file-drop__cta{
  font-family: var(--ha-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ha-ink);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
html[lang="ar"] .file-drop__cta{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: 14px;
}
.file-drop__hint{ font-size: 12px; color: var(--ha-fg-2); }
.file-drop__chosen{
  flex-basis: 100%;
  font-family: var(--ha-mono); font-size: 12px;
  color: var(--ha-gold-text);
  overflow-wrap: anywhere;
}
html[lang="ar"] .file-drop__chosen{ font-family: var(--ha-ar-ui); font-size: 13px; }
@media (prefers-reduced-motion: reduce){ .file-drop{ transition: none; } }

/* §56 — THE TWO DIRECTIONS [docs/css-notes.md n116] */

html[dir="rtl"] .ha-numeral,
html[dir="rtl"] .hm-stat__n,
html[dir="rtl"] .art-stat__n,
html[dir="rtl"] .ha-price__n,
html[dir="rtl"] .pk__price-n,
html[dir="rtl"] .ha-row__idx,
html[dir="rtl"] .ha-step__n,
html[dir="rtl"] .client-group-count,
/* A price is not a bare numeral: "4,500 ر.س" is an amount followed by its
   currency, and in Arabic that reads right to left — the figure on the right,
   the currency to its left. Forcing the run left-to-right, as the numeral
   islands below do, put the currency on the wrong side of the money. The
   digits inside keep their own order without help, so the price simply
   follows the page. */
html[dir="rtl"] time,
html[dir="rtl"] code,
html[dir="rtl"] kbd,
html[dir="rtl"] samp,
html[dir="rtl"] .ltr,
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
/* an external link that IS its address reads LTR; labelled buttons do not [docs/css-notes.md n322] */
html[dir="rtl"] a[href^="http"]:not(:has(*)):not(.cta-outline):not(.cta-btn):not(.ha-link):not(.cta-btn-secondary){
  direction: ltr;
  unicode-bidi: isolate;
}
/* the footer's email carries an icon: the icon stays on the reading side,
   only the address itself reads left to right */
html[dir="rtl"] a.footer-social-link[href^="mailto:"]{ direction: rtl; }
html[dir="rtl"] a.footer-social-link[href^="mailto:"] > span{ direction: ltr; unicode-bidi: isolate; }

/* The language toggle names the language you would switch TO, in that [docs/css-notes.md n117] */
.lang-toggle-btn{ unicode-bidi: isolate; }

/* A form field holding something that is not prose keeps its own order even [docs/css-notes.md n118] */
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="time"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="datetime-local"]{
  direction: ltr;
  text-align: right;
}

/* An arrow means "onward", and onward is the other way in Arabic. Anything [docs/css-notes.md n119] */
html[dir="rtl"] .ha-pill__arrow,
html[dir="rtl"] .ha-link svg,
html[dir="rtl"] .ha-row__go svg,
html[dir="rtl"] .hm-offer__row svg,
html[dir="rtl"] .aw__go svg,
html[dir="rtl"] .art-more svg,
html[dir="rtl"] .ha-head__link svg,
html[dir="rtl"] .bk-back svg,
html[dir="rtl"] .bk-next svg{
  transform: scaleX(-1);
}

/* Latin body copy that has no Arabic translation yet — a partner's name, a [docs/css-notes.md n120] */
html[dir="rtl"] [data-latin]{
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* §57 — TYPE OVER PHOTOGRAPHY, AND THE TWO INKS THAT WERE A SHADE TOO LIGHT [docs/css-notes.md n121] */

:root{
  /* was #6A6058: 5.0:1 on cream but 3.99:1 on the sand panels this site puts [docs/css-notes.md n122] */
  --ha-ink-soft: #5E554D;
}

/* ---- the guarantee: a plate under type that sits on an image ------------ [docs/css-notes.md n123] */
.loc-ex-info::before,
.loc-city-info::before,
.ev-hero-content::before{
  content: "";
  position: absolute;
  /* Tall, and starting from nothing. A plate that begins at full strength [docs/css-notes.md n124] */
  inset: -150px -24px -20px; z-index: -1;
  background: linear-gradient(180deg,
    rgba(14,12,11,0) 0%,
    rgba(14,12,11,0.34) 34%,
    rgba(14,12,11,0.70) 62%,
    rgba(14,12,11,0.90) 100%);
  pointer-events: none;
}
/* The hero band is full-bleed, so its plate reaches the edges. */
.ev-hero-content::before{ inset: -170px -40px -28px; }

/* the corner index sat at 60% white on bare photograph */
.loc-ex-index{ color: rgba(255,255,255,0.92); text-shadow: 0 1px 6px rgba(14,12,11,0.75); }
.loc-ex-desc{ color: rgba(255,255,255,0.92); }
.loc-city-sub{ color: rgba(255,255,255,0.90); }

/* ---- bronze is not a colour you can read on a photograph ---------------- */
.loc-ex-link{ color: var(--ha-yellow); }
.ev-hero-cat{
  color: var(--ha-yellow);
  background: rgba(14,12,11,0.62);
}

/* ---- the numeral on a package plate ------------------------------------- */
.pk__idx{ color: var(--ha-cinema-ink); text-shadow: 0 1px 8px rgba(14,12,11,0.8); }

/* ---- the bar's own scrim, while it is still transparent ------------------ [docs/css-notes.md n125] */
header:not(.is-solid):not(.solid):not(.scrolled)::before{
  background: linear-gradient(180deg,
    rgba(14,12,11,0.74) 0%,
    rgba(14,12,11,0.48) 42%,
    rgba(14,12,11,0) 100%) !important;
}

/* The About hero is the same idea as .ev-hero-content under a different name, [docs/css-notes.md n126] */
.about-hero-content::before{
  content: "";
  position: absolute; inset: -170px -40px -28px; z-index: -1;
  background: linear-gradient(180deg,
    rgba(14,12,11,0) 0%,
    rgba(14,12,11,0.32) 34%,
    rgba(14,12,11,0.68) 62%,
    rgba(14,12,11,0.88) 100%);
  pointer-events: none;
}
.about-hero-content .eyebrow{ color: var(--ha-yellow); }
.about-hero-content .eyebrow::before{ background: var(--ha-yellow); }

/* §58 — THE ROOM A LINE OF TYPE NEEDS [docs/css-notes.md n127] */

/* ---- underlines drawn with a border ------------------------------------ */
.aw__ask,
.art-featured__go,
.ha-link--rule,
.file-drop__cta{
  padding-bottom: 5px;
}
html[lang="ar"] .aw__ask,
html[lang="ar"] .art-featured__go,
html[lang="ar"] .ha-link--rule,
html[lang="ar"] .file-drop__cta{
  padding-bottom: 7px;
}

/* ---- boxes that enclose their own words --------------------------------- */
.loc-switch__all{ padding: 10px 16px; }
html[dir="rtl"] .loc-switch__all{ padding: 9px 16px 11px; }

.loc-card-tags span{ padding: 9px 12px; }
html[dir="rtl"] .loc-card-tags span{ padding: 8px 12px 10px; }

/* ---- §57 continued: the last few places type meets a photograph ---------- */

/* The card index sits in the top corner, where a bottom-anchored plate never [docs/css-notes.md n128] */
.loc-ex-index{
  background: rgba(14,12,11,0.58);
  padding: 5px 9px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* The city label is the first line on the plate, so the plate has to be [docs/css-notes.md n129] */
/* The city label is the first line on the plate, so the ramp has to have done [docs/css-notes.md n130] */
.loc-ex-info::before{
  background: linear-gradient(180deg,
    rgba(14,12,11,0) 0%,
    rgba(14,12,11,0.42) 40%,
    rgba(14,12,11,0.78) 64%,
    rgba(14,12,11,0.92) 100%);
}

/* The package index is set on the photograph itself; a shadow is not a floor. */
.pk__idx{
  background: rgba(14,12,11,0.70);
  padding: 4px 8px;
  border-radius: 4px;
}

/* ---- the bar over a bright hero ---------------------------------------- [docs/css-notes.md n131] */
header:not(.is-solid):not(.solid):not(.scrolled)::before{
  background: linear-gradient(180deg,
    rgba(14,12,11,0.82) 0%,
    rgba(14,12,11,0.56) 44%,
    rgba(14,12,11,0) 100%) !important;
}
/* Desktop only. On a phone the bar carries its own cream surface (§49) and [docs/css-notes.md n132] */
@media (min-width: 1001px){
  header:not(.is-solid):not(.solid):not(.scrolled) .navlinks a,
  header:not(.is-solid):not(.solid):not(.scrolled) .lang-toggle-btn,
  header:not(.is-solid):not(.solid):not(.scrolled) .nav-cta-secondary{
    color: #FBF6EF;
  }
}

/* §59 — HIDDEN MEANS HIDDEN [docs/css-notes.md n133] */
[hidden]{ display: none !important; }


/* §60 A WEIGHT THAT WAS NEVER DOWNLOADED [docs/css-notes.md n134] */

/* leden and quiet secondary copy: 350 → 400, not the 300 matching would pick */
html[dir="rtl"] .ha-lede,
html[dir="rtl"] .ha-row__sub,
html[dir="rtl"] .xp-card__sub,
html[dir="rtl"] .pk__sub,
html[dir="rtl"] .pk__incl,
html[dir="rtl"] .page-header p,
html[dir="rtl"] .fnb-card .fnb-blurb,
html[dir="rtl"] .ch-sub,
html[dir="rtl"] .about-guides .ha-stack__step p,
html[dir="rtl"] .lc__blurb,
html[dir="rtl"] .sc__blurb,
html[dir="rtl"] .ha-empty p,
html[dir="rtl"] .wa__body,
html[dir="rtl"] .mj-about,
html[dir="rtl"] .hero-sub,
html[dir="rtl"] .loc-hero-blurb{ font-weight: 400; }

/* the display scale: 620/650/680 → 600, the weight the family ships. [docs/css-notes.md n135] */
html[dir="rtl"] .ha-display,
html[dir="rtl"] .ha-statement,
html[dir="rtl"] .pk__name,
html[dir="rtl"] .pk__price-n,
html[dir="rtl"] .ev-card .ev-title,
html[dir="rtl"] .ev-card h3,
html[dir="rtl"] .fnb-card .fnb-name,
html[dir="rtl"] .fnb-card h3,
html[dir="rtl"] .doc-card .doc-title,
html[dir="rtl"] .ev-hero-meta,
html[dir="rtl"] .hero-h1{ font-weight: 600; }

/* 450 on a spec value is Inter-only tuning; Arabic takes the loaded 500 */
html[dir="rtl"] .pk__spec-v{ font-weight: 500; }




/* §61 CARDS THAT SIT ON THE PAGE INSTEAD OF BEING PRINTED ON IT [docs/css-notes.md n136] */

:root{
  /* the main card corner: 28px on a phone, up to 34px on a wide desktop — [docs/css-notes.md n137] */
  --r-lift:        clamp(28px, 1.1vw + 24px, 34px);
  /* a panel inside a lifted card takes a smaller corner, or the two curves [docs/css-notes.md n138] */
  --r-lift-panel:  clamp(20px, 0.9vw + 17px, 26px);
  --lift-inset:    clamp(10px, 1vw, 16px);   /* panel inset from the sides */
  --lift-overlap:  clamp(18px, 1.8vw, 30px); /* how far it rides up the photo */
  --lift-rise:     -6px;
  --lift-zoom:     1.015;                    /* 1.5% — inside the 1–2% brief */
  /* clearance a badge needs to sit outside the corner's curve */
  --lift-corner:   clamp(16px, 1.4vw, 20px);

  --sh-card:
    0 1px 2px rgba(31, 24, 18, 0.035),
    0 10px 22px -12px rgba(31, 24, 18, 0.14),
    0 30px 60px -32px rgba(31, 24, 18, 0.20);
  --sh-card-hover:
    0 2px 4px rgba(31, 24, 18, 0.05),
    0 18px 34px -14px rgba(31, 24, 18, 0.18),
    0 48px 90px -40px rgba(31, 24, 18, 0.26);
  /* on a dark canvas a brown shadow is invisible; depth there comes from a rim [docs/css-notes.md n139] */
  --sh-card-dark:
    inset 0 1px 0 rgba(255, 250, 244, 0.07),
    0 24px 54px -28px rgba(0, 0, 0, 0.6);
  --sh-card-dark-hover:
    inset 0 1px 0 rgba(255, 250, 244, 0.11),
    0 38px 78px -34px rgba(0, 0, 0, 0.7);
}

/* --- §61.1  one corner, everywhere it is still a card ------------------- */
.lc, .loc-card, .loc-ex-card, .loc-featured, .ev-featured,
.full-fnb-card, .work-card, .pkg-card, .mb-tier-card,
.choice-card, .loc-choice-card, .xp-card, .pk, .sc,
.mj-film__card, .epkg-spotlight-media, .loc-story-media, .hw-row-media,
.about-gallery-main, .related-thumb, .loc-list-thumb, .video-frame,
.menu-photo-frame, .ch-mission-img, .mb-hero-photo, .event-map{
  border-radius: var(--r-lift);
}

/* --- §61.2  frames that hold nothing but a photograph stay clipped ------ */
.epkg-spotlight-media, .loc-story-media, .hw-row-media, .about-gallery-main,
.related-thumb, .loc-list-thumb, .mj-film__card, .video-frame,
.menu-photo-frame, .ch-mission-img, .mb-hero-photo, .event-map{
  overflow: hidden;
}

/* --- §61.3 cards with type laid over a full-bleed photograph ---------- [docs/css-notes.md n140] */
.loc-card, .loc-ex-card, .loc-featured, .ev-featured{
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: box-shadow .42s var(--ha-ease), transform .42s var(--ha-ease);
}

/* --- §61.4  cards built as photograph-then-information ------------------ */
.lc, .full-fnb-card, .work-card, .pkg-card,
.xp-card, .pk, .sc{
  /* THE important line. See the structure note at the top of this section. [docs/css-notes.md n141] */
  overflow: visible;
  box-shadow: var(--sh-card);
  transition: box-shadow .42s var(--ha-ease), transform .42s var(--ha-ease);
}
[data-canvas="cinema"] .sc, [data-canvas="cinema"] .pk,
[data-canvas="deep"]   .sc, [data-canvas="deep"]   .pk{
  box-shadow: var(--sh-card-dark);
}

/* --- §61.5  the image container, clipped to the card's own corner ------- */
.lc > .lc__media,
.artist > .artist__media,
.pk > .pk__media,
.aw > .aw__media,
.sc > .sc__media,
.xp-card > .xp-card__media,
.full-fnb-card > .full-fnb-thumb,
.work-card > .work-thumb,
.pkg-card > .pkg-card-media{
  overflow: hidden;
  /* inherit, not a literal: a photograph showing two of its corners still gets [docs/css-notes.md n142] */
  border-radius: inherit;
}
.lc > .lc__media img,
.artist > .artist__media img,
.pk > .pk__media img,
.aw > .aw__media img,
.sc > .sc__media img,
.full-fnb-card > .full-fnb-thumb img{
  transition: transform 1.1s var(--ha-ease);
}

/* --- §61.6 the floating info panel ------------------------------------ [docs/css-notes.md n143] */
.lc{
  background: transparent;
  border: 0;
  box-shadow: none;
}
.lc > .lc__media{
  border-radius: var(--r-lift);
  box-shadow: var(--sh-card);
  transition: box-shadow .42s var(--ha-ease);
}
[data-canvas="cinema"] .lc > .lc__media,
[data-canvas="deep"]   .lc > .lc__media{ box-shadow: var(--sh-card-dark); }
/* the gradient at the foot of the photograph was there to hold type that is [docs/css-notes.md n144] */
.lc > .lc__media::after{
  background: linear-gradient(180deg, rgba(14,12,11,0.34) 0%, rgba(14,12,11,0) 42%);
}
.lc__panel{
  position: relative;
  z-index: 2;
  margin-top: calc(var(--lift-overlap) * -1);
  margin-inline: var(--lift-inset);
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--ha-bg);
  border-radius: var(--r-lift-panel);
  box-shadow:
    0 1px 2px rgba(31, 24, 18, 0.04),
    0 14px 30px -16px rgba(31, 24, 18, 0.20);
  transition: box-shadow .42s var(--ha-ease);
}
[data-canvas="cinema"] .lc__panel,
[data-canvas="deep"]   .lc__panel{
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 244, 0.06),
    0 18px 40px -20px rgba(0, 0, 0, 0.55);
}
.lc__body{ padding-bottom: clamp(14px, 1.4vw, 20px); }
.lc__foot{ padding-top: 0; }

/* --- §61.7 a badge has to clear the corner ---------------------------- [docs/css-notes.md n145] */
.lc__city,
.pk__idx,
.ev-cat{
  top: var(--lift-corner);
  inset-inline-start: var(--lift-corner);
  /* The page's own inline sheet still says `left: 14px`. In Arabic that is [docs/css-notes.md n146] */
  inset-inline-end: auto;
}
.sc__shots{
  bottom: var(--lift-corner);
  inset-inline-end: var(--lift-corner);
}
.full-fnb-logo{
  bottom: var(--lift-corner);
  left: var(--lift-corner);
}

/* --- §61.8 the rise --------------------------------------------------- [docs/css-notes.md n147] */
@media (hover: hover) and (pointer: fine){
  .loc-card:hover, .loc-ex-card:hover, .loc-featured:hover, .ev-featured:hover,
  .full-fnb-card:hover, .work-card:hover, .pkg-card:hover, .mb-tier-card:hover,
  .xp-card:hover, .pk:hover, .sc:hover{
    transform: translateY(var(--lift-rise));
    box-shadow: var(--sh-card-hover);
  }
  [data-canvas="cinema"] .sc:hover, [data-canvas="cinema"] .pk:hover,
  [data-canvas="deep"]   .sc:hover, [data-canvas="deep"]   .pk:hover{
    box-shadow: var(--sh-card-dark-hover);
  }
  /* the location card wears its shadow on the photograph, not on itself */
  .lc:hover{ transform: translateY(var(--lift-rise)); box-shadow: none; }
  .lc:hover > .lc__media{ box-shadow: var(--sh-card-hover); }
  [data-canvas="cinema"] .lc:hover > .lc__media,
  [data-canvas="deep"]   .lc:hover > .lc__media{ box-shadow: var(--sh-card-dark-hover); }

  /* 1.5% — enough to feel alive, not enough to soften a face or crop a sign */
  .lc:hover > .lc__media img,
  .loc-card:hover img,
  .loc-ex-card:hover img,
  .loc-featured:hover img,
  .artist:hover > .artist__media img,
  .pk:hover > .pk__media img,
  .aw:hover > .aw__media img,
  .sc:hover > .sc__media img,
  .full-fnb-card:hover > .full-fnb-thumb img{
    transform: scale(var(--lift-zoom));
  }
}

/* --- §61.9 reduced motion -------------------------------------------- [docs/css-notes.md n148] */
@media (prefers-reduced-motion: reduce){
  .lc:hover, .loc-card:hover, .loc-ex-card:hover, .loc-featured:hover,
  .ev-featured:hover, .full-fnb-card:hover, .work-card:hover, .pkg-card:hover,
  .mb-tier-card:hover, .xp-card:hover, .pk:hover, .sc:hover{ transform: none; }

  .lc:hover > .lc__media img, .loc-card:hover img, .loc-ex-card:hover img,
  .loc-featured:hover img,
  .artist:hover > .artist__media img, .aw:hover > .aw__media img,
  .pk:hover > .pk__media img, .sc:hover > .sc__media img,
  .full-fnb-card:hover > .full-fnb-thumb img{ transform: none; }
}

/* --- §61.10 a grid that is not a lattice ----------------------------- [docs/css-notes.md n149] */
@media (min-width: 900px){
  .lc-grid:has(> .lc:nth-child(4)){
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  }
}
/* The rest of §61.10 is gone, and the reasoning above it is left standing as [docs/css-notes.md n150] */

/* --- §61.11 the stacks that were never boxes -------------------------- [docs/css-notes.md n151] */
.aw, .artist{
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  border-radius: 0;
}
.aw > .aw__media,
.artist > .artist__media{
  border-radius: var(--r-lift);
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine){
  .aw:hover, .artist:hover{ transform: none; box-shadow: none; }
}

/* --- §61.12 room inside the boxes that ARE boxes ---------------------- [docs/css-notes.md n152] */
.full-fnb-body{
  padding: clamp(18px, 1.8vw, 24px);
  padding-top: clamp(16px, 1.5vw, 20px);
}
.full-fnb-card > .full-fnb-thumb{ margin: 0; }
.sc__foot{ padding-inline-end: clamp(18px, 1.8vw, 24px); }


/* §62 THE CARD THAT WAS NEVER DRAWN, AND THE RHYTHM AROUND IT [docs/css-notes.md n153] */

:root{
  --space-2xs: 4px;  --space-xs: 8px;   --space-sm: 12px;
  --space-md: 16px;  --space-lg: 24px;  --space-xl: 32px;
  --space-2xl: 48px; --space-3xl: 72px; --space-4xl: 112px;

  --radius-sm:   12px;   /* chips, inputs, small buttons */
  --radius-md:   22px;   /* small cards, thumbnails */
  --radius-lg:   34px;   /* main cards, featured blocks */
  --radius-pill: 999px;

  --section-gap: clamp(var(--space-3xl), 8vw, var(--space-4xl));
  --card-pad:    clamp(var(--space-md), 2vw, var(--space-lg));
}

/* --- §62.1  the component ---------------------------------------------- */
.rel-card{
  display: flex;
  flex-direction: column;
  background: var(--ha-bg);
  border: 1px solid var(--ha-line);
  border-radius: var(--radius-lg);
  /* the container clips the photograph, so the curve is identical on the [docs/css-notes.md n154] */
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sh-card);
  transition: box-shadow .42s var(--ha-ease), transform .42s var(--ha-ease);
}
[data-canvas="cinema"] .rel-card,
[data-canvas="deep"] .rel-card{ box-shadow: var(--sh-card-dark); }

.rel-card-img{
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--ha-cream-deep);
  overflow: hidden;
}
.rel-card-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--ha-ease);
}

.rel-card-body{
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--card-pad);
  flex: 1;
}
.rel-card-cat{
  font-family: var(--ha-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ha-fg-2);
}
html[dir="rtl"] .rel-card-cat{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .78rem;
}
.rel-card-title{
  font-family: var(--ha-display);
  font-weight: var(--ha-display-w);
  font-size: var(--fs-d7);
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--ha-fg);
  /* two lines, then stop — a long package name must not push the price row [docs/css-notes.md n155] */
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
html[dir="rtl"] .rel-card-title{
  font-family: var(--ha-ar-display); letter-spacing: 0; line-height: 1.5;
}
.rel-card-sum{
  margin: 0;
  font-size: clamp(.86rem, .95vw, .94rem);
  line-height: 1.55;
  color: var(--ha-fg-2);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
html[dir="rtl"] .rel-card-sum{ line-height: 1.9; }
.rel-card-where{
  display: flex; align-items: center; gap: var(--space-2xs);
  font-size: .8rem; color: var(--ha-fg-2);
}
.rel-card-where svg{ flex: 0 0 auto; opacity: .7; }
/* the price is the last thing read and the thing that has to line up across a [docs/css-notes.md n156] */
.rel-card-meta{
  margin-top: auto;
  padding-top: var(--space-sm);
  font-family: var(--ha-display);
  font-weight: 600;
  font-size: .96rem;
  color: var(--ha-fg);
  font-variant-numeric: tabular-nums;
}
html[dir="rtl"] .rel-card-meta{ font-family: var(--ha-ar-display); }

@media (hover: hover) and (pointer: fine){
  .rel-card:hover{ transform: translateY(var(--lift-rise)); box-shadow: var(--sh-card-hover); }
  .rel-card:hover .rel-card-img img{ transform: scale(var(--lift-zoom)); }
}
@media (prefers-reduced-motion: reduce){
  .rel-card:hover{ transform: none; }
  .rel-card:hover .rel-card-img img{ transform: none; }
}

/* --- §62.2 the strip -------------------------------------------------- [docs/css-notes.md n157] */
.related-strip{
  display: grid;
  /* Three fixed columns inside the page's narrow main column gave each card [docs/css-notes.md n158] */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  align-items: stretch;
  gap: var(--space-lg);
  margin-top: var(--space-xl);      /* was 90px */
}
@media (max-width: 900px){
  .related-strip{
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* the row bleeds to the viewport edge and re-inserts the gutter as its own [docs/css-notes.md n159] */
    margin-inline: calc(var(--ha-gutter, 24px) * -1);
    padding-inline: var(--ha-gutter, 24px);
    padding-block-end: var(--space-xs);
  }
  .related-strip::-webkit-scrollbar{ display: none; }
  .related-strip > .rel-card{
    flex: 0 0 min(82%, 320px);
    scroll-snap-align: start;
  }
}

/* --- §62.3 the rhythm ------------------------------------------------- [docs/css-notes.md n160] */
.loc-detail-main > div{ padding-block: 0; }
.loc-detail-main > div + div{ margin-top: var(--section-gap); }
.loc-detail-main > div > h2{
  margin: 0 0 var(--space-xl);
}
.loc-detail-main > div > h2 + p{ margin-top: calc(var(--space-xl) * -1 + var(--space-md)); }
/* the strip already carries its own top margin; the heading must not add a [docs/css-notes.md n161] */
.loc-detail-main > div > h2 + .related-strip{ margin-top: 0; }
.loc-detail-main > div > .cta-outline{ margin-top: var(--space-xl) !important; }

/* A hidden block still occupies a row in the flow and still contributes its [docs/css-notes.md n162] */
.loc-detail-main > div[hidden]{ display: none !important; margin: 0 !important; }


/* §63 EVENT AND EAT & DRINK CARDS REJOIN THE SYSTEM [docs/css-notes.md n163] */

.ev-card,
.fnb-card,
.ev-thumb,
.fnb-thumb{ border-radius: var(--radius-lg); }

.ev-card,
.fnb-card{
  background: var(--ha-bg);
  border: 1px solid var(--ha-line);
  overflow: hidden;              /* the container clips; the image has no radius */
  box-shadow: var(--sh-card);
  transition: box-shadow .42s var(--ha-ease), transform .42s var(--ha-ease);
}
[data-canvas="cinema"] .ev-card, [data-canvas="cinema"] .fnb-card,
[data-canvas="deep"]   .ev-card, [data-canvas="deep"]   .fnb-card{
  box-shadow: var(--sh-card-dark);
}
.ev-card .ev-thumb,
.fnb-card .fnb-thumb{
  border-radius: 0;              /* clipped by the card, so no curve of its own */
  aspect-ratio: 16 / 10;
  height: auto;
}
.ev-card .ev-thumb img,
.fnb-card .fnb-thumb img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* the caption was written to sit on the page, so it had no padding of its own [docs/css-notes.md n164] */
.ev-card .ev-date,
.fnb-card .fnb-body{
  padding: var(--card-pad) var(--card-pad) var(--space-xs) !important;
  border-top: 0 !important;
}
.ev-card .ev-title,
.ev-card .ev-loc,
.ev-card .ev-reg-btn{
  padding-inline: var(--card-pad);
}
.ev-card .ev-reg-btn{ padding-bottom: var(--card-pad); display: inline-block; }
.ev-card .ev-loc{ padding-bottom: var(--space-xs); }

@media (hover: hover) and (pointer: fine){
  .ev-card:hover, .fnb-card:hover{
    transform: translateY(var(--lift-rise));
    box-shadow: var(--sh-card-hover);
  }
  [data-canvas="cinema"] .ev-card:hover, [data-canvas="cinema"] .fnb-card:hover,
  [data-canvas="deep"]   .ev-card:hover, [data-canvas="deep"]   .fnb-card:hover{
    box-shadow: var(--sh-card-dark-hover);
  }
}
@media (prefers-reduced-motion: reduce){
  .ev-card:hover, .fnb-card:hover{ transform: none; }
}

/* --- §63.1  the map, and the two things a reader does with one ---------- */
.loc-map{
  margin-top: var(--space-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--ha-line);
  background: var(--ha-cream-deep);
  aspect-ratio: 16 / 9;
  box-shadow: var(--sh-card);
}
@media (max-width: 700px){ .loc-map{ aspect-ratio: 4 / 3; } }
.loc-map iframe{ width: 100%; height: 100%; border: 0; display: block; }
.loc-map-actions{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
/* a button is a target before it is a shape */
.loc-map-actions .cta-outline{
  min-height: 48px;
  display: inline-flex; align-items: center;
  border-radius: var(--radius-pill);
}


/* --- §63.2 an action should not be dressed as a label ------------------ [docs/css-notes.md n165] */
.loc-map-actions .ha-link{
  font-family: var(--ha-ui);
  font-size: .94rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  color: var(--ha-fg);
  min-height: 48px;
  display: inline-flex; align-items: center;
}
html[dir="rtl"] .loc-map-actions .ha-link{ font-family: var(--ha-ar-ui); }

/* --- §63.3 what an event costs ---------------------------------------- [docs/css-notes.md n166] */
.ev-price-box{
  margin-top: var(--space-md);
  padding: var(--card-pad);
  border: 1px solid var(--ha-line);
  border-radius: var(--radius-md);
  background: var(--ha-bg);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.ev-price-figure{
  font-family: var(--ha-display);
  font-weight: 600;
  font-size: var(--fs-d7);
  color: var(--ha-fg);
  font-variant-numeric: tabular-nums;
}
html[dir="rtl"] .ev-price-figure{ font-family: var(--ha-ar-display); }
.ev-price-methods{ display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.ev-price-methods:empty{ display: none; }
.ev-pay-chip{
  font-family: var(--ha-mono); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--ha-line);
  border-radius: var(--radius-pill);
  color: var(--ha-fg-2);
}
html[dir="rtl"] .ev-pay-chip{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .8rem;
}
.ev-price-note{ margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ha-fg-2); }
.ev-address{ margin: 0 0 var(--space-md); color: var(--ha-fg-2); font-size: .94rem; }

/* --- §63.4  an icon sits on the line, not above it ---------------------- */
.ev-hero-meta > span,
.ev-hero-meta > a{ display: inline-flex; align-items: center; gap: 7px; }
.ev-hero-meta svg{ flex: 0 0 auto; opacity: .85; }

/* --- §63.5  the two new lines on an event card -------------------------- */
.ev-card .ev-sum{
  margin: 0;
  padding-inline: var(--card-pad);
  padding-block: var(--space-2xs) var(--space-xs);
  font-size: .9rem; line-height: 1.55; color: var(--ha-fg-2);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
html[dir="rtl"] .ev-card .ev-sum{ line-height: 1.9; }
.ev-card .ev-price{
  padding-inline: var(--card-pad);
  padding-block: var(--space-xs) 0;
  font-family: var(--ha-display); font-weight: 600; font-size: .94rem;
  color: var(--ha-fg); font-variant-numeric: tabular-nums;
}
html[dir="rtl"] .ev-card .ev-price{ font-family: var(--ha-ar-display); }

/* the second row of chips sits under the first, not beside it */
#branch-filters{ margin-top: var(--space-xs); border-bottom: 0; }
#branch-filters[hidden]{ display: none !important; }

/* --- §63.6 two colours that worked on the page and fail on the card ---- [docs/css-notes.md n167] */

/* The date is metadata, and metadata on this site is --ha-fg-2. Ember was [docs/css-notes.md n168] */
.ev-card .ev-date{ color: var(--ha-fg-2); }

/* The chip stops depending on what happens to be behind it. A photograph is [docs/css-notes.md n169] */
.ev-card .ev-cat{
  background: rgba(16, 14, 13, 0.82);
  border-color: rgba(247, 241, 232, 0.24);
  color: #FBF7F1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}


/* §64 THE BRANCH LEADS WITH WHERE IT IS [docs/css-notes.md n170] */

/* --- §64.1  the pair --------------------------------------------------- */
.loc-lead-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}
/* Two columns only when there is actually a map to put in one. A branch [docs/css-notes.md n171] */
@media (min-width: 900px){
  .loc-lead-grid:has(.loc-map:not([hidden])){
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: clamp(var(--space-lg), 3vw, var(--space-2xl));
  }
}

/* --- §64.2 the map, as the lead rather than an afterthought ------------ [docs/css-notes.md n172] */
.loc-lead-grid .loc-map{ margin-top: 0; aspect-ratio: 4 / 3; }
/* Square on a phone, where the column is the full width and a tall map is [docs/css-notes.md n173] */
@media (min-width: 900px){
  .loc-lead-grid .loc-map{ aspect-ratio: 16 / 10; }
}
.loc-lead-grid .loc-map-actions{ margin-top: var(--space-md); gap: var(--space-md); }

/* --- §64.3 the address, stacked --------------------------------------- [docs/css-notes.md n174] */
.loc-lead-grid dl.loc-info{
  grid-template-columns: 1fr;
  gap: 2px 0;
  margin: 0;
}
.loc-lead-grid .loc-info dd{ margin-bottom: var(--space-md); }
.loc-lead-grid .loc-info dd:last-child{ margin-bottom: 0; }
.loc-lead-grid .loc-info dt:empty{ display: none; }

/* --- §64.4  it is the first block, so it carries no gap above it -------- */
.loc-detail-main > #info-block{ margin-top: 0; }


/* §65 WHO IS PRESENTING [docs/css-notes.md n175] */

.ev-host{
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding: var(--card-pad);
  border: 1px solid var(--ha-line);
  border-radius: var(--radius-md);
  background: var(--ha-bg);
  box-shadow: var(--sh-card);
}
.ev-host-photo{
  flex: 0 0 auto;
  width: clamp(64px, 8vw, 84px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ha-cream-deep);
  border: 1px solid var(--ha-line);
}
.ev-host-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-host-body{ min-width: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.ev-host-name{
  font-family: var(--ha-display);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ha-fg);
}
html[dir="rtl"] .ev-host-name{ font-family: var(--ha-ar-display); font-weight: 600; }
.ev-host-title{
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ha-fg-2);
}

/* The handle is a link, so it is shaped like one — a target with a border, [docs/css-notes.md n176] */
.ev-host-ig{
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--space-xs);
  margin-top: var(--space-2xs);
  min-height: 40px;
  padding: 0 var(--space-md);
  border: 1px solid var(--ha-line);
  border-radius: var(--radius-pill);
  font-family: var(--ha-ui);
  font-size: .9rem; font-weight: 500;
  letter-spacing: 0; text-transform: none; text-decoration: none;
  color: var(--ha-fg);
  transition: background .25s ease, border-color .25s ease;
}
html[dir="rtl"] .ev-host-ig{ font-family: var(--ha-ar-ui); }
/* A handle is a Latin string in both languages — §37's bidi isolation, applied [docs/css-notes.md n177] */
.ev-host-ig span{ direction: ltr; unicode-bidi: isolate; }
@media (hover: hover) and (pointer: fine){
  .ev-host-ig:hover{ background: var(--ha-cream-deep); border-color: var(--ha-fg-2); }
}
.ev-host-ig svg{ flex: 0 0 auto; }

@media (max-width: 480px){
  .ev-host{ gap: var(--space-md); }
}


/* §66 THE EVENT PAGE GETS THE SAME RHYTHM AS THE LOCATION PAGE [docs/css-notes.md n178] */
.ev-detail-main > div + div{ margin-top: var(--section-gap); }
.ev-detail-main > div > h2{ margin: 0 0 var(--space-md); }
/* A block that is down still owns its margin unless it is taken out of flow, [docs/css-notes.md n179] */
.ev-detail-main > div[hidden]{ display: none !important; margin: 0 !important; }


/* --- §65.1 "Presented by" on a card ------------------------------------ [docs/css-notes.md n180] */
.ev-by, .rel-card-by{
  font-family: var(--ha-ui);
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ha-fg-2);
  margin-top: var(--space-2xs);
}
html[dir="rtl"] .ev-by, html[dir="rtl"] .rel-card-by{ font-family: var(--ha-ar-ui); }


/* §67 THE EVENTS PAGE AS A PROGRAMME, NOT A DIRECTORY [docs/css-notes.md n181] */

/* --- §67.1  the hero --------------------------------------------------- */
.evh{
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(460px, 74vh, 760px);
  padding: clamp(var(--space-2xl), 7vw, var(--space-4xl)) 0 clamp(var(--space-xl), 4vw, var(--space-3xl));
  background: var(--ha-cinema);
  color: var(--ha-cinema-ink);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
}
.evh[hidden]{ display: none; }
.evh__media{ position: absolute; inset: 0; z-index: -2; }
.evh__media img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(0.9) contrast(1.06) brightness(0.82);
  transition: transform 1.6s var(--ha-ease-out), filter var(--ha-med) var(--ha-ease);
}
/* Bottom-weighted, so the type sits on the darkest part of the frame and the [docs/css-notes.md n182] */
.evh__scrim{
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(10,9,8,.92) 0%, rgba(10,9,8,.72) 28%, rgba(10,9,8,.18) 62%, rgba(10,9,8,.05) 100%);
}
.evh__inner{ position: relative; width: 100%; }

.evh__eyebrow{
  font-family: var(--ha-mono);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ha-yellow);
  margin-bottom: var(--space-lg);
}
html[dir="rtl"] .evh__eyebrow{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .84rem; }

/* 02 / OCT — the date as the poster's mark. Latin numerals in both [docs/css-notes.md n183] */
.evh__stamp{
  display: inline-flex; align-items: baseline; gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.evh__stamp > span:first-child{
  font-family: var(--ha-display);
  font-size: clamp(3.2rem, 7vw, 6rem);
  font-weight: 700; line-height: .85;
  letter-spacing: -.03em;
  color: var(--ha-yellow);
  direction: ltr; unicode-bidi: isolate;
}
.evh__stamp > span:last-child{
  font-family: var(--ha-mono);
  font-size: clamp(.8rem, 1.2vw, 1rem);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ha-cinema-ink);
}
html[dir="rtl"] .evh__stamp > span:last-child{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; }

.evh__meta{
  font-family: var(--ha-mono);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ha-cinema-ink);
  margin-bottom: var(--space-sm);
}
html[dir="rtl"] .evh__meta{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .9rem; }
.evh__meta:empty{ display: none; }

.evh__title{
  font-family: var(--ha-display);
  font-size: clamp(2.1rem, 5.4vw, 4.4rem);
  font-weight: 620;
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 var(--space-md);
  max-width: 16ch;
  color: #FFFDF9;
  text-wrap: balance;
}
html[dir="rtl"] .evh__title{
  font-family: var(--ha-ar-display); font-weight: 600;
  line-height: 1.25; letter-spacing: 0; max-width: 18ch;
}
.evh__desc{
  font-size: clamp(.98rem, 1.1vw, 1.12rem);
  line-height: 1.65;
  color: rgba(255,253,249,.82);
  max-width: 52ch;
  margin: 0 0 var(--space-lg);
}
.evh__desc[hidden]{ display: none; }

.evh__cta{
  display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 var(--space-lg);
  border-radius: var(--radius-pill);
  background: var(--ha-yellow);
  color: #1F1812;
  font-family: var(--ha-ui);
  font-size: .92rem; font-weight: 600; letter-spacing: 0;
  transition: transform var(--ha-med) var(--ha-ease), box-shadow var(--ha-med) var(--ha-ease);
}
html[dir="rtl"] .evh__cta{ font-family: var(--ha-ar-ui); }

@media (hover: hover) and (pointer: fine){
  .evh:hover .evh__media img{ transform: scale(1.035); filter: saturate(1) contrast(1.06) brightness(.88); }
  .evh:hover .evh__cta{ transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,0,0,.7); }
}
@media (prefers-reduced-motion: reduce){
  .evh__media img, .evh__cta{ transition: none; }
  .evh:hover .evh__media img, .evh:hover .evh__cta{ transform: none; }
}

/* --- §67.2 the hero with no photograph -------------------------------- [docs/css-notes.md n184] */
.evh--type{
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(247,201,72,.12) 0%, transparent 58%),
    repeating-linear-gradient(45deg,  rgba(239,230,218,.05) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(239,230,218,.05) 0 1px, transparent 1px 22px),
    var(--ha-cinema);
  min-height: clamp(400px, 58vh, 600px);
}
.evh--type .evh__scrim{
  background: linear-gradient(to top, rgba(10,9,8,.8) 0%, rgba(10,9,8,.3) 45%, transparent 100%);
}
.evh--type .evh__stamp > span:first-child{ font-size: clamp(4rem, 11vw, 9rem); }

/* --- §67.3  the standfirst, beside the size of the programme ------------ */
.ev-lede{ padding: clamp(var(--space-2xl), 6vw, var(--space-3xl)) 0 0; }
.ev-lede__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: start;
}
@media (min-width: 900px){
  .ev-lede__grid{ grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.ev-lede h1{
  font-family: var(--ha-display);
  font-size: var(--fs-d4);
  font-weight: 620;
  line-height: 1.1;
  margin: 0 0 var(--space-md);
  max-width: 18ch;
  text-wrap: balance;
}
html[dir="rtl"] .ev-lede h1{ font-family: var(--ha-ar-display); font-weight: 600; line-height: 1.32; }
.ev-lede p{
  font-size: 1.02rem; line-height: 1.75;
  color: var(--ha-fg-2);
  max-width: 56ch; margin: 0;
}

/* Counted, never claimed: every figure is computed from the events table at [docs/css-notes.md n185] */
.ev-lede__facts{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-xl);
  padding: var(--card-pad);
  border: 1px solid var(--ha-line);
  border-radius: var(--radius-lg);
  background: var(--ha-cream-deep);
}
.ev-fact{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-fact__n{
  font-family: var(--ha-display);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 700; line-height: 1;
  letter-spacing: -.02em;
  color: var(--ha-fg);
  direction: ltr; unicode-bidi: isolate;
}
html[dir="rtl"] .ev-fact__n{ align-self: flex-start; }
.ev-fact__l{
  font-family: var(--ha-mono);
  font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ha-fg-2);
}
html[dir="rtl"] .ev-fact__l{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .82rem; }

/* --- §67.4 the upcoming run, in four shapes --------------------------- [docs/css-notes.md n186] */
@media (min-width: 900px){
  .ev-grid--editorial{
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
  }
  .ev-grid--editorial > .ev-card{ grid-column: span 2; }

  /* The lead is two rows tall, so the two small cards stack beside it and the [docs/css-notes.md n187] */
  .ev-grid--editorial > .ev-card--lead{ grid-column: span 4; grid-row: span 2; }
  .ev-grid--editorial > .ev-card--small{ grid-column: span 2; }
  .ev-grid--editorial > .ev-card--wide{ grid-column: 1 / -1; }

  /* Its picture takes whatever height the pair beside it turns out to need, [docs/css-notes.md n188] */
  .ev-grid--editorial > .ev-card--lead{
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
  }
  /* ORDER MATTERS HERE. These three selectors all weigh (0,3,0), so the last [docs/css-notes.md n189] */
  .ev-grid--editorial > .ev-card .ev-thumb{ height: auto; aspect-ratio: 4 / 3; }
  .ev-grid--editorial > .ev-card--small .ev-thumb{ height: auto; aspect-ratio: 16 / 10; }
  .ev-grid--editorial > .ev-card--lead .ev-thumb{ height: 100%; min-height: 320px; aspect-ratio: auto; }
  /* The frame stretching is not enough on its own: .ev-card img has no height [docs/css-notes.md n190] */
  .ev-grid--editorial > .ev-card--lead .ev-thumb img,
  .ev-grid--editorial > .ev-card--wide .ev-thumb img{ height: 100%; object-fit: cover; }

  .ev-grid--editorial > .ev-card--lead .ev-title{ font-size: var(--fs-d6); }

  /* the wide one lies down: picture beside the words */
  .ev-grid--editorial > .ev-card--wide{
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-content: stretch;
  }
  .ev-grid--editorial > .ev-card--wide .ev-thumb{
    height: 100%; aspect-ratio: auto; min-height: 240px;
  }
  .ev-grid--editorial > .ev-card--wide .ev-body{
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--card-pad) !important;
  }
  /* the hairline belongs above the first line of text, and inside the wide [docs/css-notes.md n191] */
  .ev-grid--editorial > .ev-card--wide .ev-date{
    border-top: 0; margin-top: 0; padding-top: 0 !important;
  }
  .ev-grid--editorial > .ev-card--wide .ev-title{ font-size: var(--fs-d7); }
}

/* --- §67.5 the card, image first, arrow last -------------------------- [docs/css-notes.md n192] */
.ev-go{
  display: inline-flex; align-items: center; gap: var(--space-xs);
  margin-top: var(--space-md);
  font-family: var(--ha-ui);
  font-size: .86rem; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--ha-fg);
}
html[dir="rtl"] .ev-go{ font-family: var(--ha-ar-ui); }
.ev-go__arrow{
  flex: 0 0 auto;
  transition: transform var(--ha-med) var(--ha-ease);
}
html[dir="rtl"] .ev-go__arrow{ transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine){
  .ev-card:hover .ev-go__arrow{ transform: translateX(4px); }
  html[dir="rtl"] .ev-card:hover .ev-go__arrow{ transform: scaleX(-1) translateX(4px); }
}
@media (prefers-reduced-motion: reduce){
  .ev-go__arrow{ transition: none; }
  .ev-card:hover .ev-go__arrow{ transform: none; }
  html[dir="rtl"] .ev-card:hover .ev-go__arrow{ transform: scaleX(-1); }
}

/* On a phone every card is the same shape again — asymmetry needs width to [docs/css-notes.md n193] */
@media (max-width: 899px){
  .ev-grid--editorial > .ev-card .ev-thumb{ height: auto; aspect-ratio: 4 / 3; }
}

/* --- §67.6  an empty pill is not a category ---------------------------- */
.ev-hero-cat:empty{ display: none; }


/* --- §67.7 a metadata row is several languages on one line ------------- [docs/css-notes.md n194] */
.evh__meta > span,
.ev-card .ev-date > span,
.rel-card-cat > span{ unicode-bidi: isolate; }


/* §68 THREE SECTIONS THE HOMEPAGE WAS MISSING [docs/css-notes.md n195] */

.hm-packages,
.hm-art,
.hm-member{ padding: var(--section-gap) 0; }

/* The art band runs on the cinema canvas, so the strip's cards have to be [docs/css-notes.md n196] */
.hm-art .rel-card{
  background: var(--ha-cinema-2);
  border-color: var(--ha-cinema-line);
  box-shadow: var(--sh-card-dark);
}
.hm-art .rel-card-title{ color: var(--ha-cinema-ink); }
.hm-art .rel-card-meta{ color: var(--ha-cinema-soft); }

/* The band declares data-canvas="cinema", but .loc-head's heading and [docs/css-notes.md n197] */
.hm-art .loc-head h2,
.hm-art h2{ color: var(--ha-cinema-ink); }
.hm-art .loc-head p,
.hm-art > .wrap > .loc-head p{ color: var(--ha-cinema-soft); }
.hm-art .eyebrow{ color: var(--ha-yellow); }
.hm-art .about-link,
.hm-art .about-link span{ color: var(--ha-yellow); }
.hm-art .about-link svg{ color: var(--ha-yellow); }

/* --- §68.1  membership: the claim, and the room it is about ------------ */
.hm-member__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: center;
}
@media (min-width: 900px){
  .hm-member__grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
.hm-member__body h2{
  font-family: var(--ha-display);
  font-size: var(--fs-d4);
  font-weight: 620;
  line-height: 1.12;
  margin: 0 0 var(--space-md);
  max-width: 16ch;
  text-wrap: balance;
}
html[dir="rtl"] .hm-member__body h2{ font-family: var(--ha-ar-display); font-weight: 600; line-height: 1.32; }
.hm-member__body p{
  font-size: 1rem; line-height: 1.75;
  color: var(--ha-fg-2);
  max-width: 52ch;
  margin: 0 0 var(--space-lg);
}
.hm-member__body .cta-btn{ display: inline-flex; align-items: center; min-height: 48px; }

/* The photograph is captioned with the branch it actually is. An [docs/css-notes.md n198] */
.hm-member__media{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--ha-line);
  box-shadow: var(--sh-card);
  aspect-ratio: 4 / 3;
  background: var(--ha-cream-deep);
}
@media (min-width: 900px){ .hm-member__media{ aspect-ratio: 16 / 11; } }
.hm-member__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-member__cap{
  position: absolute;
  inset-inline-start: var(--space-md);
  bottom: var(--space-md);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(16, 14, 13, .82);
  color: #FBF7F1;
  font-family: var(--ha-mono);
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
}
html[dir="rtl"] .hm-member__cap{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .78rem; }

/* A section that took itself off the page must not leave its padding behind. */
.hm-packages[hidden], .hm-art[hidden], .hm-member[hidden]{ display: none !important; }


/* §69 EAT & DRINK LEADS WITH A CONCEPT (§35) [docs/css-notes.md n199] */
.fnb-feature{ padding: 0 0 var(--section-gap); }
.fnb-feature[hidden]{ display: none !important; }
.fnb-feature__card{
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ha-bg);
  border: 1px solid var(--ha-line);
  box-shadow: var(--sh-card);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--ha-med) var(--ha-ease), transform var(--ha-med) var(--ha-ease);
}
@media (min-width: 900px){
  .fnb-feature__card{ grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.fnb-feature__media{ overflow: hidden; background: var(--ha-cinema-2); aspect-ratio: 4 / 3; }
@media (min-width: 900px){ .fnb-feature__media{ aspect-ratio: auto; min-height: 420px; } }
.fnb-feature__media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.9) contrast(1.05);
  transition: transform 1.2s var(--ha-ease-out);
}
.fnb-feature__body{
  padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-xs);
}
.fnb-feature__kicker{
  font-family: var(--ha-mono);
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ha-gold-text);
}
html[dir="rtl"] .fnb-feature__kicker{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .82rem; }
.fnb-feature__kicker:empty{ display: none; }
.fnb-feature__name{
  font-family: var(--ha-display);
  font-size: var(--fs-d5);
  font-weight: 620; line-height: 1.12;
  margin: 0; text-wrap: balance;
}
html[dir="rtl"] .fnb-feature__name{ font-family: var(--ha-ar-display); font-weight: 600; line-height: 1.3; }
.fnb-feature__where{
  font-family: var(--ha-ui);
  font-size: .92rem; color: var(--ha-fg-2);
  margin-bottom: var(--space-xs);
}
html[dir="rtl"] .fnb-feature__where{ font-family: var(--ha-ar-ui); }
.fnb-feature__where:empty{ display: none; }
.fnb-feature__blurb{
  font-size: 1rem; line-height: 1.75; color: var(--ha-fg-2);
  max-width: 48ch; margin: 0 0 var(--space-md);
}
.fnb-feature__blurb[hidden]{ display: none; }
.fnb-feature__cta{
  align-self: flex-start;
  display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 var(--space-lg);
  border: 1px solid var(--ha-fg);
  border-radius: var(--radius-pill);
  font-family: var(--ha-ui); font-size: .92rem; font-weight: 600;
  color: var(--ha-fg);
  transition: background var(--ha-med) var(--ha-ease), color var(--ha-med) var(--ha-ease);
}
html[dir="rtl"] .fnb-feature__cta{ font-family: var(--ha-ar-ui); }
@media (hover: hover) and (pointer: fine){
  .fnb-feature__card:hover{ box-shadow: var(--sh-card-hover); transform: translateY(-3px); }
  .fnb-feature__card:hover .fnb-feature__media img{ transform: scale(1.03); }
  .fnb-feature__card:hover .fnb-feature__cta{ background: var(--ha-fg); color: var(--ha-bg); }
}
@media (prefers-reduced-motion: reduce){
  .fnb-feature__card, .fnb-feature__media img, .fnb-feature__cta{ transition: none; }
  .fnb-feature__card:hover{ transform: none; }
  .fnb-feature__card:hover .fnb-feature__media img{ transform: none; }
}

/* --- §68.2 the bleed belongs to the page that measured it ------------- [docs/css-notes.md n200] */
@media (max-width: 899px){
  .hm-packages .related-strip,
  .hm-art .related-strip{
    margin-inline: 0;
    padding-inline: 0;
  }
}


/* §70 THE EVENT CARD, REBUILT AROUND WHAT A READER DECIDES ON [docs/css-notes.md n201] */

/* --- §70.1  the date, as a mark rather than a sentence ------------------ */
.ev-card .ev-date{
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) 0 0 !important;
  margin-top: var(--space-md);
  border-top: 1px solid var(--ha-line);
}
.ev-mark{
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 46px; padding: 5px 8px 6px;
  border-radius: var(--radius-sm);
  background: var(--ha-yellow);
  color: #1F1812;
  line-height: 1;
}
.ev-mark__d{
  font-family: var(--ha-display);
  font-size: 1.18rem; font-weight: 700; letter-spacing: -.02em;
  direction: ltr; unicode-bidi: isolate;
}
.ev-mark__m{
  font-family: var(--ha-mono);
  font-size: .56rem; letter-spacing: .1em; text-transform: uppercase;
  margin-top: 3px;
}
html[dir="rtl"] .ev-mark__m{ font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .68rem; }

.ev-when{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev-when__day{
  font-family: var(--ha-ui);
  font-size: .86rem; font-weight: 600;
  color: var(--ha-fg);
  letter-spacing: 0; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[dir="rtl"] .ev-when__day{ font-family: var(--ha-ar-ui); }
.ev-when__time{
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ha-ui);
  font-size: .78rem; color: var(--ha-fg-2);
  letter-spacing: 0; text-transform: none;
}
html[dir="rtl"] .ev-when__time{ font-family: var(--ha-ar-ui); }
.ev-when__time span{ direction: ltr; unicode-bidi: isolate; }
.ev-when__time svg{ flex: 0 0 auto; opacity: .75; }

/* --- §70.2  the substance ----------------------------------------------- */
.ev-card .ev-title{ margin-top: var(--space-sm); }
.ev-card .ev-sum{
  font-size: .92rem;
  /* the line-height is declared and then reused by the max-height below, so [docs/css-notes.md n202] */
  --sum-lh: 1.6;
  line-height: var(--sum-lh);
  color: var(--ha-fg-2);
  margin: var(--space-xs) 0 0;
  /* two lines is a brief; five is a description that belongs on the page */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  /* the clamp alone leaves a hairline of the next line, because the box [docs/css-notes.md n203] */
  max-height: calc(var(--sum-lh) * 2em);
}
/* Arabic sets looser, so the same two lines are taller */
html[dir="rtl"] .ev-card .ev-sum{ --sum-lh: 1.85; }
.ev-card .ev-by{
  margin-top: var(--space-xs);
  font-size: .84rem;
  color: var(--ha-fg-2);
}
.ev-card .ev-by strong{ color: var(--ha-fg); font-weight: 600; }

/* --- §70.3 where, and how much ---------------------------------------- [docs/css-notes.md n204] */
.ev-foot{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm); flex-wrap: wrap;
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--ha-line);
}
.ev-foot:empty{ display: none; }
.ev-where{
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0;
  font-family: var(--ha-ui); font-size: .82rem;
  color: var(--ha-fg-2);
  letter-spacing: 0; text-transform: none;
}
html[dir="rtl"] .ev-where{ font-family: var(--ha-ar-ui); }
.ev-where svg{ flex: 0 0 auto; opacity: .7; }
.ev-where span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-card .ev-price{
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--ha-cream-deep);
  border: 1px solid var(--ha-line);
  font-family: var(--ha-ui);
  font-size: .8rem; font-weight: 600;
  color: var(--ha-fg);
  letter-spacing: 0; text-transform: none;
  white-space: nowrap;
}
html[dir="rtl"] .ev-card .ev-price{ font-family: var(--ha-ar-ui); }
[data-canvas="cinema"] .ev-card .ev-price,
[data-canvas="deep"]   .ev-card .ev-price{
  background: rgba(255,250,244,.06);
  border-color: var(--ha-cinema-line);
  color: var(--ha-cinema-ink);
}

/* --- §70.4  the lead card gets room to breathe -------------------------- */
@media (min-width: 900px){
  .ev-grid--editorial > .ev-card--lead .ev-mark{ min-width: 54px; padding: 7px 10px 8px; }
  .ev-grid--editorial > .ev-card--lead .ev-mark__d{ font-size: 1.5rem; }
  .ev-grid--editorial > .ev-card--lead .ev-sum{ -webkit-line-clamp: 3; font-size: 1rem; max-height: calc(var(--sum-lh) * 3em); }
}

/* On a phone the footer stacks rather than squeezing a branch name and a [docs/css-notes.md n205] */
@media (max-width: 420px){
  .ev-foot{ flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
}

/* §71 — ONE CARD. [docs/css-notes.md n206] */

:root{ --card-ar: 16 / 10; }

/* Every listing card's picture box — the frame, not the photograph. */
.ev-card .ev-thumb,
.ev-grid--editorial > .ev-card .ev-thumb,
.lc .lc__media,
.pk .pk__media,
.aw .aw__media,
.fnb-card .fnb-thumb,
.doc-card .doc-poster,
.rel-card .rel-card-img,
.sc .sc__media,
.fnb-card .fnb-img,
.loc-ex-card .loc-ex-media{
  aspect-ratio: var(--card-ar) !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}

/* …and the photograph inside it fills that frame exactly, rather than [docs/css-notes.md n207] */
.ev-card .ev-thumb > img,
.lc .lc__media > img,
.pk .pk__media > img,
.aw .aw__media > img,
.fnb-card .fnb-thumb > img,
.doc-card .doc-poster > img,
.rel-card .rel-card-img > img,
.sc .sc__media > img,
.fnb-card .fnb-img > img,
.loc-ex-card .loc-ex-media > img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* An event with no photograph gets the same box at the same size, drawn in [docs/css-notes.md n208] */
.ev-card .ev-thumb--none,
.ev-card .ev-thumb.is-empty{
  aspect-ratio: var(--card-ar) !important;
}

/* The editorial sizes are gone. Keeping the selectors and neutralising them [docs/css-notes.md n209] */
@media (min-width: 900px){
  .ev-grid--editorial{
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  .ev-grid--editorial > .ev-card,
  .ev-grid--editorial > .ev-card--lead,
  .ev-grid--editorial > .ev-card--small,
  .ev-grid--editorial > .ev-card--wide{
    grid-column: auto;
    grid-row: auto;
    display: flex;
    flex-direction: column;
  }
  .ev-grid--editorial > .ev-card--lead .ev-thumb,
  .ev-grid--editorial > .ev-card--small .ev-thumb,
  .ev-grid--editorial > .ev-card--wide .ev-thumb{
    aspect-ratio: var(--card-ar) !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .ev-grid--editorial > .ev-card--lead .ev-title,
  .ev-grid--editorial > .ev-card--wide .ev-title{ font-size: var(--fs-d7); }
  .ev-grid--editorial > .ev-card--wide .ev-body{
    padding: var(--card-pad) !important;
  }
  .ev-grid--editorial > .ev-card--wide .ev-date{
    border-top: 1px solid var(--ha-sand-line);
  }
  .ev-grid--editorial > .ev-card--lead .ev-mark{ min-width: 46px; padding: 6px 9px 7px; }
  .ev-grid--editorial > .ev-card--lead .ev-mark__d{ font-size: 1.25rem; }
  .ev-grid--editorial > .ev-card--lead .ev-sum{ -webkit-line-clamp: 2; font-size: .95rem; }
}

/* The body under the picture has to be one rhythm too, or cards of equal [docs/css-notes.md n210] */
.ev-card .ev-body,
.lc .lc__body,
.pk .pk__body,
.fnb-card .fnb-body,
.rel-card .rel-card-body{
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs, 8px);
  flex: 1 1 auto;
}

/* Equal-height cards in every grid, so the bottoms line up whatever each one
   has to say. */
.ev-grid > .ev-card,
.lc-grid > .lc,
.pk-grid > .pk,
.rel-strip > .rel-card{
  height: 100%;
}

/* The location explorer was a mosaic: the first card 560px tall, the last [docs/css-notes.md n211] */
.loc-explorer > .loc-ex-card,
.loc-explorer > .loc-ex-card:first-child,
.loc-explorer > .loc-ex-card:last-child{
  height: auto !important;
  aspect-ratio: var(--card-ar) !important;
  grid-column: auto !important;
}
.loc-explorer > .loc-ex-card:first-child .loc-ex-name{ font-size: var(--fs-d6); }
@media (max-width: 860px){
  .loc-explorer > .loc-ex-card,
  .loc-explorer > .loc-ex-card:first-child,
  .loc-explorer > .loc-ex-card:last-child{ height: auto !important; }
}

/* §72 — A LABEL ON A PHOTOGRAPH NEEDS SOMETHING TO SIT ON. [docs/css-notes.md n212] */

.loc-ex-tag,
.lc--soon .lc__city,
.evh--photo .evh__eyebrow,
.evh__media ~ * .evh__eyebrow{
  background: rgba(17, 17, 16, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #F6EEE2 !important;
  padding: 5px 12px;
  border-radius: 999px;
  display: inline-block;
  text-shadow: none;
}

/* The country tag was ink on gold, which reads well on paper and not at all [docs/css-notes.md n213] */
.loc-ex-card .loc-ex-tag{
  background: rgba(17, 17, 16, 0.72) !important;
  color: var(--ha-yellow) !important;
}

/* The events eyebrow sits over the hero photograph. Yellow on a photograph is [docs/css-notes.md n214] */
.evh__eyebrow{
  background: rgba(17, 17, 16, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 6px 14px;
  border-radius: 999px;
  display: inline-block;
}
/* On the typographic hero there is no photograph, so the pill is unnecessary [docs/css-notes.md n215] */
.evh--type .evh__eyebrow{
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;
}

/* §73 — THE OVERLAY CARD, EVERYWHERE. [docs/css-notes.md n216] */

:root{ --card-ar: 4 / 5; }

.ev-card, .lc, .pk, .aw, .fnb-card, .doc-card, .rel-card, .sc, .loc-ex-card{
  position: relative;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background: var(--ha-cinema);
  height: auto !important;
}

/* the picture becomes the whole card */
.ev-card .ev-thumb, .lc .lc__media, .pk .pk__media, .aw .aw__media,
.fnb-card .fnb-thumb, .fnb-card .fnb-img, .doc-card .doc-poster,
.rel-card .rel-card-img, .sc .sc__media{
  aspect-ratio: auto !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.ev-card .ev-thumb > img, .lc .lc__media > img, .pk .pk__media > img,
.aw .aw__media > img, .fnb-card .fnb-thumb > img, .fnb-card .fnb-img > img,
.doc-card .doc-poster > img, .rel-card .rel-card-img > img,
.sc .sc__media > img, .loc-ex-card > img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* the gradient the words stand on */
.ev-card::after, .lc::after, .pk::after, .aw::after,
.fnb-card::after, .doc-card::after, .rel-card::after, .sc::after,
.loc-ex-card::after{
  content: "";
  background: linear-gradient(180deg,
                rgba(17,17,16,0) 55%,
                rgba(17,17,16,.22) 78%,
                rgba(17,17,16,.42) 100%);
  z-index: 1;
  pointer-events: none;
}

/* the words */
.ev-card .ev-body, .lc .lc__body, .pk .pk__body, .aw .aw__body,
.fnb-card .fnb-body, .doc-card .doc-body, .rel-card .rel-card-body,
.sc .sc-body, .sc .sc__body, .loc-ex-card .loc-ex-info{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(16px, 2vw, 26px);
  padding-top: clamp(40px, 5vw, 64px) !important;
  border: 0 !important;
  color: #F6EEE2;
}

/* the line above the name — the city on a location, the date on an event — [docs/css-notes.md n217] */
.ev-card .ev-date, .ev-card .ev-when,
.lc .lc__city, .pk .pk__eyebrow, .aw .aw__meta,
.fnb-card .fnb-kind, .doc-card .doc-meta,
.rel-card .rel-card-kind, .loc-ex-card .loc-ex-city{
  font-family: var(--ha-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  background: none !important;
}
html[dir="rtl"] .ev-card .ev-date, html[dir="rtl"] .lc .lc__city,
html[dir="rtl"] .loc-ex-card .loc-ex-city{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .8rem;
}

.ev-card .ev-title, .lc .lc__name, .pk .pk__name, .aw .aw__title,
.fnb-card .fnb-name, .doc-card .doc-title, .rel-card .rel-card-name,
.sc .sc-name, .sc .sc__name, .loc-ex-card .loc-ex-name{
  font-family: var(--ha-display);
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 !important;
}
html[dir="rtl"] .ev-card .ev-title, html[dir="rtl"] .lc .lc__name,
html[dir="rtl"] .loc-ex-card .loc-ex-name{
  font-family: var(--ha-ar-display); line-height: 1.45;
}

.ev-card .ev-sum, .lc .lc__blurb, .pk .pk__text, .aw .aw__artist,
.fnb-card .fnb-desc, .doc-card .doc-sub, .rel-card .rel-card-sub,
.loc-ex-card .loc-ex-desc{
  font-size: .9rem;
  line-height: 1.55;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* the small outlined chips under the name on a location card, now available [docs/css-notes.md n218] */
.lc .lc__types span, .loc-ex-card .loc-ex-types span,
.ev-card .ev-foot > *, .pk .pk__facts > *{
  border: 1px solid rgba(246,238,226,.32);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--ha-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: none !important;
}
.ev-card .ev-foot{
  display: flex; flex-wrap: wrap; gap: 8px;
  border: 0 !important; margin: 4px 0 0 !important; padding: 0 !important;
}

/* the category badge keeps its corner. [docs/css-notes.md n219] */
.ev-card .ev-cat, .loc-ex-card .loc-ex-tag{
  position: absolute;
  top: 14px; inset-inline-start: 14px; inset-inline-end: auto;
  z-index: 3;
  background: rgba(17,17,16,.62) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #F6EEE2 !important;
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--ha-mono);
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
}

/* The yellow date block was built for a card with a white body under a [docs/css-notes.md n220] */
.ev-card .ev-mark{ display: none !important; }
.ev-card .ev-date{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ev-card .ev-when{ display: inline-flex; align-items: baseline; gap: 8px; }
.ev-card .ev-when__time svg{ width: 11px; height: 11px; opacity: .8; }
.ev-card .ev-by{ font-size: .82rem; margin: 0 !important; }
.ev-card .ev-by strong, .ev-card .ev-by b{ font-weight: 600; }
.ev-card .ev-go{
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 600;
}

/* §74 — A FULL-BLEED ROW THAT CANNOT BLEED TOO FAR. [docs/css-notes.md n221] */
@media (max-width: 899px){
  .related-strip,
  .hm-packages .related-strip,
  .hm-art .related-strip{
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    max-width: 100vw;
  }
}

/* §75 — THE CARD'S PROPORTION IS A FLOOR, NOT A CEILING. [docs/css-notes.md n222] */
.ev-card, .lc, .pk, .aw, .fnb-card, .doc-card, .rel-card, .sc, .loc-ex-card{
  aspect-ratio: auto !important;
  display: grid !important;
  grid-template: "card" auto / 1fr;
  height: 100% !important;
}
.ev-card::before, .lc::before, .pk::before, .aw::before,
.fnb-card::before, .doc-card::before, .rel-card::before, .sc::before,
.loc-ex-card::before{
  content: "";
  grid-area: card;
  padding-top: 125%;          /* 4 : 5, as a floor */
  pointer-events: none;
}
/* `.sc-img` was in this list for two rounds and does not exist anywhere in [docs/css-notes.md n223] */
.ev-card .ev-thumb, .lc .lc__media, .pk .pk__media, .aw .aw__media,
.fnb-card .fnb-thumb, .fnb-card .fnb-img, .doc-card .doc-poster,
.rel-card .rel-card-img, .sc .sc__media{
  grid-area: card;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
.ev-card::after, .lc::after, .pk::after, .aw::after,
.fnb-card::after, .doc-card::after, .rel-card::after, .sc::after,
.loc-ex-card::after{
  grid-area: card;
  position: relative !important;
  inset: auto !important;
}
.ev-card .ev-body, .lc .lc__body, .pk .pk__body, .aw .aw__body,
.fnb-card .fnb-body, .doc-card .doc-body, .rel-card .rel-card-body,
.sc .sc-body, .sc .sc__body, .loc-ex-card .loc-ex-info{
  grid-area: card;
  position: relative !important;
  inset: auto !important;
  align-self: end;
  z-index: 2;
}

/* A standalone link or button has to be big enough to hit. 24×24 is the [docs/css-notes.md n224] */
a.aw__ask, a.ha-link,
.ev-detail-main a:not(.cta-btn):not(.cta-outline):not([class*="card"]),
.mj-ask a, .art-ask a{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 4px;
}
button.loc-shot, .loc-gallery__shot{ min-height: 44px; }

/* The homepage events row kept its own "featured" treatment in the page's [docs/css-notes.md n225] */
.ev-grid > .ev-card:first-child{ grid-column: span 1 !important; }
.ev-grid > .ev-card:first-child .ev-thumb{ height: 100% !important; }
.ev-grid > .ev-card:first-child .ev-title{ font-size: clamp(1.15rem, 1.5vw, 1.5rem) !important; }
.ev-grid > .ev-card:first-child .ev-date{ font-size: .68rem !important; }

/* The locations explorer's columns were written around a mosaic of fixed [docs/css-notes.md n226] */
.loc-explorer{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  align-items: start;
}
@media (max-width: 620px){ .loc-explorer{ grid-template-columns: 1fr; } }
.loc-explorer > .loc-ex-card,
.loc-explorer > .loc-ex-card:first-child,
.loc-explorer > .loc-ex-card:last-child{
  height: 100% !important;
  grid-column: auto !important;
}
.loc-explorer > .loc-ex-card:first-child .loc-ex-name{ font-size: var(--fs-d6); }

.pk-grid{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.pk-grid > .pk{ min-width: 0; }

/* §76 — EVERY WORD INSIDE AN OVERLAY CARD, NOT JUST THE ONES I NAMED. [docs/css-notes.md n227] */

.ev-card *, .lc *, .pk *, .aw *, .fnb-card *, .doc-card *,
.rel-card *, .sc *, .loc-ex-card *{ text-shadow: none; }

/* `.cta-btn` is excluded and the rule is `!important`. Both corrections came [docs/css-notes.md n228] */
.ev-card :not(.ev-cat):not(.cta-btn):not(svg):not(path),
.lc :not(.lc__tag):not(.cta-btn):not(svg):not(path),
.pk :not(.cta-btn):not(svg):not(path),
.aw :not(.cta-btn):not(svg):not(path),
.fnb-card :not(.cta-btn):not(svg):not(path),
.doc-card :not(.cta-btn):not(svg):not(path),
.rel-card :not(.cta-btn):not(svg):not(path),
.sc :not(.cta-btn):not(svg):not(path),
.loc-ex-card :not(.loc-ex-tag):not(.cta-btn):not(svg):not(path){
  color: rgba(246, 238, 226, .94) !important;
}
/* the lines that are meant to be yellow stay yellow */
.ev-card .ev-date, .ev-card .ev-date *, .ev-card .ev-when, .ev-card .ev-when *,
.ev-card .ev-go, .ev-card .ev-go *,
.lc .lc__city, .pk .pk__eyebrow, .pk .pk__price, .aw .aw__meta,
.fnb-card .fnb-kind, .doc-card .doc-meta, .rel-card .rel-card-kind,
.sc .sc__price, .loc-ex-card .loc-ex-city, .loc-ex-card .loc-ex-link,
.lc .ha-arrow, .rel-card .ha-arrow{
  color: var(--ha-yellow) !important;
}
/* and the title stays white, which is what makes it the title */
.ev-card .ev-title, .lc .lc__name, .pk .pk__name, .aw .aw__title,
.fnb-card .fnb-name, .doc-card .doc-title, .rel-card .rel-card-name,
.sc .sc__name, .sc .sc-name, .loc-ex-card .loc-ex-name{
  color: #FFFFFF !important;
}

/* Where the gradient belongs. [docs/css-notes.md n229] */
.ev-card .ev-body, .lc .lc__body, .pk .pk__body, .aw .aw__body,
.fnb-card .fnb-body, .doc-card .doc-body, .rel-card .rel-card-body,
.sc .sc-body, .sc .sc__body, .loc-ex-card .loc-ex-info{
  background: linear-gradient(180deg,
                rgba(17,17,16,0) 0%,
                rgba(17,17,16,.80) 22%,
                rgba(17,17,16,.97) 48%,
                rgb(17,17,16) 70%) !important;
}

/* §77 — WHAT THE AUDIT FOUND, AND WHERE IT WAS WRONG ABOUT ME. [docs/css-notes.md n230] */

/* 1. THE CITY WAS INVISIBLE ON EVERY LOCATION CARD. [docs/css-notes.md n231] */
.lc .lc__city{
  position: absolute !important;
  z-index: 3;
  top: var(--lift-corner, clamp(12px, 1.4vw, 18px)) !important;
  inset-inline-start: var(--lift-corner, clamp(12px, 1.4vw, 18px)) !important;
  inset-inline-end: auto !important;
  bottom: auto !important;
  background: rgba(17, 17, 16, 0.72) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ha-yellow) !important;
  padding: 5px 12px !important;
  border-radius: 999px;
  display: inline-block;
  text-shadow: none;
}

/* 2. THE NAV BUTTON CLIPPED ITS ARABIC LABEL UNDER THE READER'S SPACING. [docs/css-notes.md n232] */
.nav-ctas .cta-btn,
.nav-ctas .cta-btn-secondary,
.nav-ctas > .cta-btn{
  height: auto !important;
  min-height: 38px;
}

/* 3. TARGETS UNDER 24 × 24 (WCAG 2.2 SC 2.5.8, AA). [docs/css-notes.md n233] */
/* The footer carries no class of its own — it is a bare <footer> — so the [docs/css-notes.md n234] */
footer ul li a,
.footer-social-link,
.footer-legal a{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 4px;
}
footer ul{ display: grid; gap: 2px; }

/* The main navigation's links are 19px tall: §68 took away the dark capsule [docs/css-notes.md n235] */
.navlinks a{
  padding-block: 6px !important;
  min-height: 24px;
  /* "F&B" is 22px wide, and 2.5.8 asks for 24 in both directions. §68 set [docs/css-notes.md n236] */
  min-width: 24px !important;
}

#lang-toggle-btn,
.lang-toggle,
.lang-btn{
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* A section's "see everything" link is a standalone control beside a [docs/css-notes.md n237] */
a.about-link,
a.ha-link,
.lc__foot .ha-link,
.aw__artist a,
#hero-loc a,
#pc-contact-email,
#pc-contact-phone,
.contact-info-item a,
.ev-card .ev-more,
.doc-card .doc-more{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 3px;
}

/* 4. §76 WAS TOO WEAK IN ONE DIRECTION AND TOO STRONG IN THE OTHER. [docs/css-notes.md n238] */

/* 5. THE MONTH ON THE EVENTS HERO, AT 4.48:1. [docs/css-notes.md n239] */
#evh-mon, #evh-day, #evh-dow{ color: #F6EEE2 !important; }

/* 6. THE CARD THAT STILL HAD A CREAM BOX ON IT. [docs/css-notes.md n240] */
.lc .lc__panel{
  margin-top: 0 !important;
  margin-inline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* The stops are in pixels, not percentages. As a percentage of the panel [docs/css-notes.md n241] */
  background: linear-gradient(180deg,
                rgba(17,17,16,0) 0,
                rgba(17,17,16,.72) 24px,
                rgba(17,17,16,.94) 44px,
                rgb(17,17,16) 76px) !important;
  padding: clamp(44px, 5vw, 64px) clamp(16px, 2vw, 26px) clamp(16px, 2vw, 26px);
}
/* the gradient belongs to the wrapper now, so the body stops repeating it */
.lc .lc__panel .lc__body{
  background: none !important;
  padding: 0 !important;
}
.lc .lc__foot{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 0 0 !important;
  background: none !important;
  border: 0 !important;
}
/* "coming soon" is a statement, not a control: it keeps the card's colour [docs/css-notes.md n242] */
.lc .lc__soon{ opacity: .82; }

/* 7. THE WORDS LAYER, WHEN THE WORDS ARE INSIDE A WRAPPER. [docs/css-notes.md n243] */
.lc > .lc__panel{
  grid-area: card;
  position: relative !important;
  inset: auto !important;
  align-self: end;
  z-index: 2;
  flex: 0 0 auto !important;
}

/* the room chips, on the ground the card actually has */
.lc .lc__spaces{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lc .lc__tag{
  position: static !important;
  border: 1px solid rgba(246, 238, 226, .34) !important;
  background: none !important;
  color: rgba(246, 238, 226, .92) !important;
  border-radius: 999px;
  padding: 4px 10px !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 8. THE ONE PARAGRAPH ON THE SITE BELOW ANY RECOMMENDED READING SIZE. [docs/css-notes.md n244] */
footer .footer-grid > div > p{
  font-size: 15px;
  max-width: 34ch;
}

/* §78 — HOLD THE SPACE, THEN FILL IT. [docs/css-notes.md n245] */

[data-hold]:not([data-ready]){
  visibility: hidden;
}
[data-hold]:not([data-ready]) *{
  /* a half-built headline must not be readable through the hold */
  visibility: hidden;
}
[data-hold][data-ready]{
  visibility: visible;
  animation: ha-hold-in var(--ha-med, .42s) var(--ha-ease-out, cubic-bezier(.22,1,.36,1)) both;
}
[data-hold][data-ready] *{ visibility: visible; }
@keyframes ha-hold-in{ from{ opacity: 0 } to{ opacity: 1 } }
@media (prefers-reduced-motion: reduce){
  [data-hold][data-ready]{ animation: none; }
}

/* §78.2 — WHAT I THOUGHT WAS WRONG WITH THE CARD GRIDS, AND WAS NOT. [docs/css-notes.md n246] */


/* §79 — THE PICTURE IS THE CARD, AND THE CARD SITS ON THE PAGE. [docs/css-notes.md n247] */

/* 1. NOTHING BETWEEN THE PICTURE AND THE CARD'S EDGE. [docs/css-notes.md n248] */
.ev-card, .lc, .pk, .aw, .fnb-card, .doc-card, .rel-card, .sc, .loc-ex-card{
  padding: 0 !important;
}

/* The four kinds §73 never reached. Their words are not wrapped in a body [docs/css-notes.md n249] */
.ev-card:not(:has(.ev-body)),
.doc-card:not(:has(.doc-body)),
.fnb-card:not(:has(.fnb-body)),
.pk--feature:not(:has(.pk__body)){
  /* A column that packs to the bottom. The first attempt used `block`, and [docs/css-notes.md n250] */
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  min-height: 0;
}
/* §75's spacer is a grid item holding 125% of the card's width in a cell the [docs/css-notes.md n251] */
.ev-card:not(:has(.ev-body))::before,
.doc-card:not(:has(.doc-body))::before,
.fnb-card:not(:has(.fnb-body))::before,
.pk--feature:not(:has(.pk__body))::before{
  content: none !important;
}
.ev-card:not(:has(.ev-body)) > .ev-thumb,
.doc-card:not(:has(.doc-body)) > .doc-poster,
.fnb-card:not(:has(.fnb-body)) > .fnb-thumb,
.fnb-card:not(:has(.fnb-body)) > .fnb-img,
.pk--feature:not(:has(.pk__body)) > .pk__media{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
}
.ev-card:not(:has(.ev-body)) > :not(.ev-thumb),
.doc-card:not(:has(.doc-body)) > :not(.doc-poster),
.fnb-card:not(:has(.fnb-body)) > :not(.fnb-thumb),
.pk--feature:not(:has(.pk__body)) > :not(.pk__media){
  position: relative;
  z-index: 2;
  /* the words used to be inside a body element that carried the inset; with [docs/css-notes.md n252] */
  padding-inline: clamp(16px, 2vw, 26px) !important;
}
/* The ground the loose words stand on is the card's own scrim, not a [docs/css-notes.md n253] */
.ev-card:not(:has(.ev-body))::after,
.doc-card:not(:has(.doc-body))::after,
.fnb-card:not(:has(.fnb-body))::after,
.pk--feature:not(:has(.pk__body))::after{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  background: linear-gradient(180deg,
                rgba(17,17,16,0) 38%,
                rgba(17,17,16,.42) 58%,
                rgba(17,17,16,.86) 76%,
                rgba(17,17,16,.95) 100%) !important;
}
.ev-card:not(:has(.ev-body)) > :not(.ev-thumb):first-of-type,
.doc-card:not(:has(.doc-body)) > :not(.doc-poster):first-of-type,
.fnb-card:not(:has(.fnb-body)) > :not(.fnb-thumb):first-of-type{
  padding-top: clamp(10px, 1.2vw, 16px) !important;
}
.ev-card:not(:has(.ev-body)) > :last-child,
.doc-card:not(:has(.doc-body)) > :last-child,
.fnb-card:not(:has(.fnb-body)) > :last-child{
  padding-bottom: clamp(16px, 2vw, 24px) !important;
}

/* 2. A SCRIM, NOT A WALL. [docs/css-notes.md n254] */
.ev-card .ev-body, .lc .lc__body, .pk .pk__body, .aw .aw__body,
.fnb-card .fnb-body, .doc-card .doc-body, .rel-card .rel-card-body,
.sc .sc-body, .sc .sc__body, .loc-ex-card .loc-ex-info,
.lc .lc__panel{
  /* Balancing this is the whole job, and the first attempt got it wrong in [docs/css-notes.md n255] */
  background: linear-gradient(180deg,
                rgba(17,17,16,0) 0%,
                rgba(17,17,16,.72) 18px,
                rgba(17,17,16,.93) 38px,
                rgba(17,17,16,.96) 100%) !important;
  /* The padding is what keeps the first line of type OFF the transparent [docs/css-notes.md n256] */
  padding-top: clamp(44px, 5vw, 64px) !important;
}
.ev-card::after, .lc::after, .pk::after, .aw::after,
.fnb-card::after, .doc-card::after, .rel-card::after, .sc::after,
.loc-ex-card::after{
  background: linear-gradient(180deg,
                rgba(17,17,16,0) 46%,
                rgba(17,17,16,.16) 72%,
                rgba(17,17,16,.34) 100%);
}

/* 3. THE CARD SITS ON THE PAGE — «بروز». [docs/css-notes.md n257] */
.ev-card, .lc, .pk, .aw, .fnb-card, .doc-card, .rel-card, .sc, .loc-ex-card{
  box-shadow: var(--sh-card);
  transition: box-shadow .38s var(--ha-ease-out, cubic-bezier(.22,1,.36,1)),
              transform  .38s var(--ha-ease-out, cubic-bezier(.22,1,.36,1));
}
[data-canvas="cinema"] .ev-card, [data-canvas="cinema"] .lc,
[data-canvas="cinema"] .pk, [data-canvas="cinema"] .aw,
[data-canvas="cinema"] .fnb-card, [data-canvas="cinema"] .doc-card,
[data-canvas="cinema"] .rel-card, [data-canvas="cinema"] .sc,
[data-canvas="cinema"] .loc-ex-card,
[data-canvas="deep"] .ev-card, [data-canvas="deep"] .lc,
[data-canvas="deep"] .pk, [data-canvas="deep"] .aw,
[data-canvas="deep"] .fnb-card, [data-canvas="deep"] .doc-card,
[data-canvas="deep"] .rel-card, [data-canvas="deep"] .sc,
[data-canvas="deep"] .loc-ex-card{
  box-shadow: var(--sh-card-dark);
}

@media (hover: hover) and (pointer: fine){
  .ev-card:hover, .lc:hover, .pk:hover, .aw:hover, .fnb-card:hover,
  .doc-card:hover, .rel-card:hover, .sc:hover, .loc-ex-card:hover{
    transform: translateY(var(--lift-rise));
    box-shadow: var(--sh-card-hover);
  }
  [data-canvas="cinema"] .ev-card:hover, [data-canvas="cinema"] .lc:hover,
  [data-canvas="cinema"] .pk:hover, [data-canvas="cinema"] .aw:hover,
  [data-canvas="cinema"] .fnb-card:hover, [data-canvas="cinema"] .doc-card:hover,
  [data-canvas="cinema"] .rel-card:hover, [data-canvas="cinema"] .sc:hover,
  [data-canvas="cinema"] .loc-ex-card:hover,
  [data-canvas="deep"] .ev-card:hover, [data-canvas="deep"] .lc:hover,
  [data-canvas="deep"] .pk:hover, [data-canvas="deep"] .aw:hover,
  [data-canvas="deep"] .fnb-card:hover, [data-canvas="deep"] .doc-card:hover,
  [data-canvas="deep"] .rel-card:hover, [data-canvas="deep"] .sc:hover,
  [data-canvas="deep"] .loc-ex-card:hover{
    box-shadow: var(--sh-card-dark-hover);
  }
}
@media (prefers-reduced-motion: reduce){
  .ev-card, .lc, .pk, .aw, .fnb-card, .doc-card, .rel-card, .sc, .loc-ex-card{
    transition: none;
  }
  .ev-card:hover, .lc:hover, .pk:hover, .aw:hover, .fnb-card:hover,
  .doc-card:hover, .rel-card:hover, .sc:hover, .loc-ex-card:hover{
    transform: none;
  }
}

/* 4. THE RESTAURANT CARD, WHICH HAS MORE IN IT THAN THE OTHERS. [docs/css-notes.md n258] */
.fnb-card{
  display: block !important;
  position: relative;
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  overflow: hidden;
}
.fnb-card::before{ content: none !important; }
.fnb-card > .fnb-thumb,
.fnb-card > .fnb-img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  z-index: 0;
}
.fnb-card > .fnb-body{
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 2;
}

/* AND THE REAL REASON IT WAS 681 PIXELS TALL. [docs/css-notes.md n259] */
.fnb-card .fnb-blurb{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* the initial mark was landing on the words it sits beside */
.fnb-card .fnb-logo{
  position: absolute;
  top: var(--lift-corner, 16px);
  inset-inline-end: var(--lift-corner, 16px);
  inset-inline-start: auto;
  bottom: auto;
  z-index: 3;
}

/* §80 — THE ROOM CARD HAS THREE LAYERS, NOT TWO. [docs/css-notes.md n260] */
.sc{
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  min-height: 0;
}
.sc::before{ content: none !important; }
.sc > .sc__media{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
  aspect-ratio: auto !important;
}
.sc > .sc__body,
.sc > .sc__foot{
  position: relative;
  z-index: 2;
  /* `justify-content: flex-end` cannot push down a child that is still [docs/css-notes.md n261] */
  flex: 0 0 auto !important;
}
.sc::after{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  background: linear-gradient(180deg,
                rgba(17,17,16,0) 34%,
                rgba(17,17,16,.46) 56%,
                rgba(17,17,16,.88) 74%,
                rgba(17,17,16,.96) 100%) !important;
}
.sc > .sc__body{
  padding: clamp(40px, 5vw, 60px) clamp(16px, 2vw, 26px) 0 !important;
}
/* The body keeps the ground §79 gives every card's words — transparent at [docs/css-notes.md n262] */
.sc > .sc__foot{
  padding: clamp(12px, 1.4vw, 18px) clamp(16px, 2vw, 26px) clamp(16px, 2vw, 24px) !important;
  border: 0 !important;
  background: rgba(17,17,16,.95) !important;
  /* The foot carried `margin-top: auto` from the stacked card it used to be, [docs/css-notes.md n263] */
  margin-top: 0 !important;
}


/* the picture count sits on the picture, not in the flow under it */
.sc .sc__shots{
  position: absolute;
  bottom: auto; top: var(--lift-corner, 16px);
  inset-inline-end: var(--lift-corner, 16px);
  z-index: 3;
}

/* §81 — THE PACKAGE CARD, MADE SCANNABLE. [docs/css-notes.md n264] */

.pk .pk__cost{
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  margin-top: 4px;
  font-family: var(--ha-display);
  font-size: clamp(1.35rem, 1.1vw + 1.05rem, 1.75rem);
  font-weight: 700; line-height: 1;
  color: var(--ha-yellow, #FFCE57) !important;
  font-variant-numeric: tabular-nums;
}
.pk .pk__cost-u{
  font-family: var(--ha-mono);
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500;
  color: rgba(246,238,226,.72) !important;
}
html[dir="rtl"] .pk .pk__cost-u{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .78rem;
}

.pk .pk__meta{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 10px; margin-top: 8px;
  font-family: var(--ha-mono); font-size: .64rem; letter-spacing: .08em;
  color: rgba(246,238,226,.82) !important;
}
html[dir="rtl"] .pk .pk__meta{
  font-family: var(--ha-ar-ui); letter-spacing: 0; font-size: .8rem;
}
.pk .pk__meta-i + .pk__meta-i::before{
  content: "·"; margin-inline-end: 10px; opacity: .45;
}

/* Section 12 of the brief: a package has to say where it can actually be [docs/css-notes.md n265] */
.pk .pk__at{
  margin-top: 10px;
  font-family: var(--ha-mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(246,238,226,.55) !important;
}
.pk .pk__at strong{ color: rgba(246,238,226,.85) !important; font-weight: 600; }
html[dir="rtl"] .pk .pk__at{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .74rem;
}

/* the old three-row table and the buried price are gone */
.pk .pk__specs, .pk .pk__price{ display: none !important; }

/* §82 — HOLD THE PLACE OPEN FOR CARDS THAT HAVE NOT ARRIVED YET [docs/css-notes.md n266] */
html.ha-booting .fnb-grid:empty,
html.ha-booting .full-fnb-grid:empty,
html.ha-booting .ev-grid:empty,
html.ha-booting .sc-grid:empty,
html.ha-booting .lc-grid:empty,
html.ha-booting .pk-grid:empty,
html.ha-booting .related-strip:empty,
html.ha-booting .loc-gallery:empty,
html.ha-booting .gallery-strip:empty,
html.ha-booting .loc-list-grid:empty,
html.ha-booting .works-grid:empty,
html.ha-booting .doc-grid:empty,
html.ha-booting .ch-doc-grid:empty,
html.ha-booting .art-grid:empty,
html.ha-booting .aw-grid:empty{
  display: block !important;
  min-height: 50vh;
}
@media (min-width: 760px){
  html.ha-booting .fnb-grid:empty,
  html.ha-booting .full-fnb-grid:empty,
  html.ha-booting .ev-grid:empty,
  html.ha-booting .sc-grid:empty,
  html.ha-booting .lc-grid:empty,
  html.ha-booting .pk-grid:empty,
  html.ha-booting .related-strip:empty,
  html.ha-booting .loc-gallery:empty,
  html.ha-booting .gallery-strip:empty,
  html.ha-booting .loc-list-grid:empty,
  html.ha-booting .works-grid:empty,
  html.ha-booting .doc-grid:empty,
  html.ha-booting .ch-doc-grid:empty,
  html.ha-booting .art-grid:empty,
  html.ha-booting .aw-grid:empty{
    min-height: 40vh;
  }
}
/* A printed page has no viewport to reserve against, and nothing on paper
   arrives late. */
@media print{
  html.ha-booting .fnb-grid:empty,
  html.ha-booting .full-fnb-grid:empty,
  html.ha-booting .ev-grid:empty,
  html.ha-booting .sc-grid:empty,
  html.ha-booting .lc-grid:empty,
  html.ha-booting .pk-grid:empty,
  html.ha-booting .related-strip:empty,
  html.ha-booting .loc-gallery:empty,
  html.ha-booting .gallery-strip:empty{ display: none !important; min-height: 0; }
}

/* §83 — INCLUDED, AND EXTRA [docs/css-notes.md n267] */
.xtr{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  margin: clamp(18px, 2.4vw, 30px) 0 clamp(26px, 3vw, 38px);
}
@media (min-width: 880px){
  /* The add-ons column is the one that is acted on, so it gets the room. */
  .xtr{ grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
.xtr__h{
  margin: 0 0 12px;
  font-family: var(--ha-mono); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ha-fg); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
html[dir="rtl"] .xtr__h{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .85rem;
}
.xtr__hint{
  font-family: var(--ha-ui); font-size: .72rem; letter-spacing: 0;
  text-transform: none; font-weight: 400; color: var(--ha-fg-2);
}
html[dir="rtl"] .xtr__hint{ font-family: var(--ha-ar-ui); }
.xtr__note{ margin: 0; font-size: 13px; line-height: 1.6; color: var(--ha-fg-2); }

.xtr__inc{
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.xtr__inc > li{
  position: relative;
  padding-inline-start: 22px;
  font-size: 14px; line-height: 1.55; color: var(--ha-fg);
}
/* A tick, not a bullet: the mark has to say "you already have this". */
.xtr__inc > li::before{
  content: "✓";
  position: absolute; inset-inline-start: 0; top: 0;
  font-size: 12px; line-height: 1.8; color: var(--ha-gold-text);
}

.xtr__svcs{ display: flex; flex-direction: column; gap: 12px; }
.svc--pick{ transition: border-color .2s ease, background .2s ease; }
.svc--pick.is-on{
  border-color: var(--ha-yellow);
  background: color-mix(in srgb, var(--ha-yellow) 8%, var(--ha-bg));
}
.svc__side{
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; gap: 10px;
}
html[dir="rtl"] .svc__side{ align-items: flex-start; }
.svc__add{
  appearance: none; cursor: pointer;
  /* 24×24 is the WCAG 2.2 SC 2.5.8 floor the whole site was brought to in [docs/css-notes.md n268] */
  min-height: 34px; padding: 7px 16px;
  border: 1px solid var(--ha-line); border-radius: 999px;
  background: transparent; color: var(--ha-fg);
  font-family: var(--ha-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
html[dir="rtl"] .svc__add{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .8rem;
}
@media (hover: hover) and (pointer: fine){ .svc__add:hover{ border-color: var(--ha-yellow); color: var(--ha-gold-text); } }
.svc--pick.is-on .svc__add{
  background: var(--ha-yellow); border-color: var(--ha-yellow); color: var(--ha-yellow-ink);
}
@media (prefers-reduced-motion: reduce){
  .svc--pick, .svc__add{ transition: none; }
}

/* §84 — THE PHOTOGRAPH HAS TO SURVIVE THE CARD [docs/css-notes.md n269] */
.pk .pk__sub{ display: none !important; }

/* §84.2 — FEWER CARDS ACROSS, SO THE PICTURE HAS SOMEWHERE TO BE [docs/css-notes.md n270] */
.pk-grid{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }

/* §84.3 — THE EVENT PACKAGE CARD, HELD TO THE SAME RULE [docs/css-notes.md n271] */
.pk .pk__incl{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The second action on the card goes; the detail page carries it. Keeping the [docs/css-notes.md n272] */
.pk .pk__actions > :nth-child(n + 2){ display: none !important; }

/* §85 — AN EVENT'S FACTS, BEFORE ITS PROSE [docs/css-notes.md n273] */
.ev-facts{
  background: var(--ha-bg);
  border-bottom: 1px solid var(--ha-line);
  padding: clamp(22px, 3vw, 38px) 0;
}
.ev-facts__list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  margin: 0;
}
.ev-fact{
  display: flex; flex-direction: column; gap: 6px;
  /* A rule between the columns, not around each one: a box per fact would [docs/css-notes.md n274] */
  padding-inline-start: clamp(14px, 1.6vw, 22px);
  border-inline-start: 1px solid var(--ha-line);
}
.ev-fact:first-child{ padding-inline-start: 0; border-inline-start: 0; }
@media (max-width: 560px){
  /* Two up on a phone, and the rule only where it still reads as a column. */
  .ev-facts__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .ev-fact{ padding-inline-start: 0; border-inline-start: 0; }
}
.ev-fact dt{
  margin: 0;
  font-family: var(--ha-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ha-fg-2);
}
html[dir="rtl"] .ev-fact dt{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .78rem;
}
.ev-fact dd{
  margin: 0;
  font-family: var(--ha-display); font-weight: 500;
  font-size: clamp(.95rem, 1.5vw, 1.12rem);
  line-height: 1.3; color: var(--ha-fg);
  /* A venue name and a date are both "one value" and must not be hyphenated [docs/css-notes.md n275] */
  overflow-wrap: break-word;
}
html[dir="rtl"] .ev-fact dd{ font-family: var(--ha-ar-display); }

/* §86 — A PRODUCT IS NOT A PLACE: THE PACKAGE CARD STOPS BEING AN OVERLAY [docs/css-notes.md n276] */
.pk-grid > .pk--product,
.pk--product{
  /* §73 made every .pk a single-cell grid so the media, the scrim and the [docs/css-notes.md n277] */
  display: grid !important;
  grid-template: "media" auto "body" 1fr / 1fr;
  aspect-ratio: auto !important;
  height: 100% !important;
  background: #FFFFFF;
  border: 1px solid var(--ha-line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: transform .3s var(--ha-ease), box-shadow .3s var(--ha-ease);
}
/* The 4:5 proportion floor and the scrim both belong to the overlay card. */
.pk--product::before,
.pk--product::after{ content: none !important; }

.pk--product > .pk__media{
  grid-area: media;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  /* Wider than it is tall, like a product shot — and the one proportion the [docs/css-notes.md n278] */
  aspect-ratio: 4 / 3 !important;
  border-radius: 0;
  /* The band a photograph has not loaded into yet is the page's own sand, [docs/css-notes.md n279] */
  background: var(--ha-cream);
}
.pk--product > .pk__media img{
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block;
}
/* Nothing is laid over a product. */
.pk--product > .pk__media::after{ content: none !important; }

.pk--product > .pk__body{
  grid-area: body;
  position: relative !important;
  inset: auto !important;
  align-self: stretch;
  display: flex; flex-direction: column;
  gap: 4px;
  background: none !important;
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px) clamp(16px, 1.8vw, 22px) !important;
}

/* §76 turned every word in a card cream, for type sitting on a photograph. [docs/css-notes.md n280] */
.pk--product :not(.cta-btn):not(svg):not(path){
  color: var(--ha-ink) !important;
}
.pk--product .pk__service:not(svg):not(path){ color: var(--ha-gold-text) !important; }
.pk--product .pk__cost-u:not(svg):not(path),
.pk--product .pk__meta:not(svg):not(path),
.pk--product .pk__meta-i:not(svg):not(path),
.pk--product .pk__at:not(svg):not(path),
.pk--product .pk__sub:not(svg):not(path){ color: var(--ha-ink-soft) !important; }
.pk--product .pk__at strong:not(svg):not(path){ color: var(--ha-ink) !important; }
/* The numeral is the one thing still on the photograph, so it stays cream. */
.pk--product > .pk__idx:not(svg):not(path){ color: var(--ha-cinema-ink) !important; }

/* The index sat over the photograph as a corner marker on the overlay card. [docs/css-notes.md n281] */
.pk--product > .pk__idx{
  position: absolute !important;
  top: clamp(12px, 1.4vw, 18px) !important;
  bottom: auto;
  inset-inline-start: clamp(12px, 1.4vw, 18px) !important;
  inset-inline-end: auto;
  margin: 0;
  /* It sits on the photograph, where it always did — but §3604 gave it a [docs/css-notes.md n282] */
  z-index: 3;
  font-family: var(--ha-mono); font-size: .62rem; letter-spacing: .12em;
}

/* The price is the thing a product card exists to compare, so it is the [docs/css-notes.md n283] */
.pk--product .pk__cost{
  display: flex; align-items: baseline; gap: 7px;
  margin-top: 10px;
}
.pk--product .pk__cost-n{ font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.1; }

.pk--product .pk__actions{
  margin-top: auto;
  padding-top: clamp(14px, 1.6vw, 18px);
}
.pk--product .pk__actions .ha-pill{
  color: var(--ha-ink) !important;
  border-color: var(--ha-line) !important;
}
@media (hover: hover) and (pointer: fine){ .pk--product .pk__actions .ha-pill:hover{
  border-color: var(--ha-yellow) !important; color: var(--ha-gold-text) !important;
} }

/* The lift Baraa asked for in round 46, on a card that can now carry it — [docs/css-notes.md n284] */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .pk--product:hover{
    transform: translateY(-6px);
    box-shadow: var(--sh-card-hover);
  }
  .pk--product > .pk__media img{ transition: transform .5s var(--ha-ease); }
  .pk--product:hover > .pk__media img{ transform: scale(1.03); }
}

/* §87 — THE BOOKING STEPS, CALMER AND IN ITHRA'S ORDER [docs/css-notes.md n285] */
.bk-types{ gap: 14px; }
.bk-type{
  /* A third of the row, not a stamp in the corner of it. */
  grid-template-columns: minmax(150px, 34%) 1fr;
  border-radius: var(--r-card);
}
.bk-type__media{
  /* The proportion is a floor, not a fixed height: a row whose text wraps to [docs/css-notes.md n286] */
  aspect-ratio: 3 / 2;
  height: 100%;
}
.bk-type__body{ padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px); gap: 6px; }
.bk-type__name{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.bk-type__sub{ font-size: .88rem; }
@media (max-width: 560px){
  /* On a phone the image goes full width above the words — a 150px column [docs/css-notes.md n287] */
  .bk-type{ grid-template-columns: 1fr; }
  .bk-type__media{ aspect-ratio: 16 / 9; }
}

/* What every option on the step has in common, said once above them. It is [docs/css-notes.md n288] */
.bk-shared{
  margin: clamp(14px, 1.8vw, 22px) 0 clamp(18px, 2.2vw, 26px);
  padding-inline-start: clamp(14px, 1.6vw, 20px);
  border-inline-start: 2px solid var(--ha-yellow);
}
.bk-shared__h{
  margin: 0 0 8px;
  font-family: var(--ha-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ha-fg-2); font-weight: 400;
}
html[dir="rtl"] .bk-shared__h{
  font-family: var(--ha-ar-ui); letter-spacing: 0; text-transform: none; font-size: .8rem;
}
.bk-shared__list{
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: .88rem; color: var(--ha-fg);
}
.bk-shared__list > li{ position: relative; padding-inline-start: 16px; }
.bk-shared__list > li::before{
  content: "✓"; position: absolute; inset-inline-start: 0; top: 0;
  font-size: 11px; line-height: 1.7; color: var(--ha-gold-text);
}

/* Five filled yellow buttons down a column are five things shouting at [docs/css-notes.md n289] */
.bk-pkg .bk-pkg__pick{
  background: transparent !important;
  color: var(--ha-fg) !important;
  border: 1px solid var(--ha-line) !important;
  box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine){ .bk-pkg .bk-pkg__pick:hover{
  border-color: var(--ha-yellow) !important;
  color: var(--ha-gold-text) !important;
} }
.bk-pkg.is-on .bk-pkg__pick{
  background: var(--ha-yellow) !important;
  color: var(--ha-yellow-ink) !important;
  border-color: var(--ha-yellow) !important;
}

/* §88 — THE TEXT STARTS AT THE SAME HEIGHT IN EVERY CARD [docs/css-notes.md n290] */

/* The card is a single-cell grid: the photograph and the panel are both in [docs/css-notes.md n291] */
.lc > .lc__panel{
  min-height: 50% !important;
  justify-content: flex-start !important;
}
.ev-card > .ev-body{
  min-height: 54% !important;
  justify-content: flex-start !important;
}

/* The text is laid from the top of the panel... */
.lc > .lc__panel > .lc__body{ flex: 0 0 auto !important; }

/* ...and the foot drops to the bottom of it, so the buttons across a row [docs/css-notes.md n292] */
.lc > .lc__panel > .lc__foot,
.ev-card > .ev-body > .ev-foot{
  margin-top: auto !important;
}
/* The arrow is the last thing in an event card and sits under the foot; it [docs/css-notes.md n293] */
.ev-card > .ev-body > .ev-go{ margin-top: var(--space-xs, 10px) !important; }

/* Two lines reserved for the one line that still varies, so the rows between [docs/css-notes.md n294] */
.lc .lc__blurb,
.ev-card .ev-title{
  min-height: 2.9em;
  min-height: 2lh;
}

/* The lead card's panel was still 302 tall against its siblings' 223, so its [docs/css-notes.md n295] */
.ev-grid > .ev-card .ev-mark,
.ev-grid--editorial > .ev-card .ev-mark{ display: none !important; }

.ev-card > .ev-body > .ev-foot{
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: var(--space-xs, 10px) !important;
}
.ev-card > .ev-body > .ev-foot > .ev-price{ flex: 0 0 auto !important; }

/* An event without a presenter needs no reserved row: the foot is pinned to [docs/css-notes.md n296] */
/* The last two differences, both of them a line breaking that should not: [docs/css-notes.md n297] */
.ev-card .ev-when{
  flex-direction: row !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
}
.ev-card > .ev-body > .ev-foot{ flex-wrap: nowrap !important; }
.ev-card > .ev-body > .ev-foot > .ev-where{ min-width: 0 !important; }
.ev-card > .ev-body > .ev-foot > .ev-where > span{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* §75 named `.lc__body` as the words layer of the card's single grid cell and [docs/css-notes.md n298] */
.lc > .lc__panel > .lc__body,
.lc > .lc__panel > .lc__foot{
  align-self: stretch !important;
}

/* §76.6's chip rule — `border-radius: 999px; padding: 5px 12px` — was written [docs/css-notes.md n299] */
.ev-card > .ev-body > .ev-foot > .ev-where,
.ev-card > .ev-body > .ev-foot > .ev-price{
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: none !important;
}

/* §28's `.ev-card .ev-title{ padding-inline: var(--card-pad) }` dates from when [docs/css-notes.md n300] */
.ev-card > .ev-body > .ev-title,
.ev-card > .ev-body > .ev-loc,
.ev-card > .ev-body > .ev-reg-btn{
  padding-inline: 0 !important;
}

/* `.sc__fact` carries chip padding without a chip's border or background, so [docs/css-notes.md n301] */
.sc .sc__facts > .sc__fact,
.bk-pkg .sc__fact{
  padding-inline: 0 !important;
}

/* Both panel floors raised to clear their tallest card: an event with a named [docs/css-notes.md n302] */
.lc > .lc__panel{ min-height: 54% !important; }
.ev-card > .ev-body{ min-height: 68% !important; }

/* A dot-separated facts row that wraps leaves its separator dangling at the [docs/css-notes.md n303] */
@media (max-width: 560px){
  .pk .pk__meta{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .pk .pk__meta > .pk__meta-i::before{ content: none !important; margin: 0 !important; }
}
.loc-explorer .loc-ex-card::after{
  background: linear-gradient(180deg,
    rgba(17,17,16,0) 48%,
    rgba(17,17,16,.08) 64%,
    rgba(17,17,16,.50) 100%) !important;
}

/* FINAL OVERRIDES — visual corrections requested for the current review. */
/* Final visual pass: let the photography read, keep text on a compact ground, [docs/css-notes.md n304] */
.ev-card .ev-body, .lc .lc__body, .pk .pk__body, .aw .aw__body,
.fnb-card .fnb-body, .doc-card .doc-body, .rel-card .rel-card-body,
.loc-ex-card .loc-ex-info{
  background: linear-gradient(180deg,
    rgba(17,17,16,0) 0%,
    rgba(17,17,16,.64) 24px,
    rgba(17,17,16,.82) 100%) !important;
}
.sc::after{
  background: linear-gradient(180deg,
    rgba(17,17,16,0) 38%,
    rgba(17,17,16,.22) 57%,
    rgba(17,17,16,.78) 100%) !important;
}
.sc > .sc__body{ background: transparent !important; }
.sc > .sc__foot{ background: transparent !important; }
.loc-explorer .loc-ex-card::after{
  background: linear-gradient(180deg,
    rgba(17,17,16,0) 58%,
    rgba(17,17,16,.12) 75%,
    rgba(17,17,16,.76) 100%) !important;
}
.ev-card, .lc, .pk, .aw, .fnb-card, .doc-card, .rel-card, .sc, .loc-ex-card{
  box-shadow: 0 10px 24px -18px rgba(27,22,19,.22) !important;
}
@media(hover:hover) and (pointer:fine){
  .ev-card:hover, .lc:hover, .pk:hover, .aw:hover, .fnb-card:hover,
  .doc-card:hover, .rel-card:hover, .sc:hover, .loc-ex-card:hover{
    box-shadow: 0 12px 28px -18px rgba(27,22,19,.26) !important;
    transform: translateY(-2px);
  }
}

/* Booking details: labels stay visibly separate from controls on desktop and [docs/css-notes.md n305] */
#bk-details-form{ display:grid; gap:20px; }
#bk-details-form .field{ display:grid; gap:14px !important; }
#bk-details-form .field label{ line-height:1.5; }

/* White and cream cards sit directly on the site's warm canvas. Remove the [docs/css-notes.md n306] */
.ev-card, .lc, .pk, .aw, .fnb-card, .doc-card, .rel-card, .sc,
.loc-ex-card, .full-fnb-card, .work-card, .pkg-card, .mb-tier-card,
.choice-card, .loc-choice-card, .xp-card, .reg-card,
.fnb-feature__card, .home-loc-card, .restaurant-card{
  box-shadow: none !important;
}
/* Product packages use a separate white information panel below the photo. [docs/css-notes.md n307] */
.pk.pk--product > .pk__body{
  background: #fff !important;
  background-image: none !important;
}
@media(hover:hover) and (pointer:fine){
  .ev-card:hover, .lc:hover, .pk:hover, .aw:hover, .fnb-card:hover,
  .doc-card:hover, .rel-card:hover, .sc:hover, .loc-ex-card:hover,
  .full-fnb-card:hover, .work-card:hover, .pkg-card:hover, .mb-tier-card:hover,
  .choice-card:hover, .loc-choice-card:hover, .xp-card:hover, .reg-card:hover,
  .fnb-feature__card:hover, .home-loc-card:hover, .restaurant-card:hover{
    box-shadow: none !important;
  }
}

/* Location listings: fit every card into the desktop grid, with no hidden [docs/css-notes.md n308] */
.loc-explorer{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  overflow:visible!important;
  padding:10px 0 18px!important;
}
.loc-explorer>.loc-ex-card,
.loc-explorer>.loc-ex-card:first-child,
.loc-explorer>.loc-ex-card:last-child{
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio: .92 / 1!important;
  grid-column:auto!important;
  box-shadow:none!important;
  transform:none!important;
}
.loc-explorer .loc-ex-card::after{background:linear-gradient(180deg,rgba(17,17,16,0) 42%,rgba(17,17,16,.12) 60%,rgba(17,17,16,.74) 100%)!important}
.loc-explorer .loc-ex-card .loc-ex-info{position:absolute!important;inset-inline:0!important;top:auto!important;bottom:0!important;z-index:2!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-items:flex-start!important;min-height:0!important;padding:18px 18px 30px!important;gap:7px!important;background:linear-gradient(180deg,transparent 0%,rgba(17,17,16,.38) 24px,rgba(17,17,16,.88) 100%)!important;transform:none!important}
.loc-explorer .loc-ex-name{font-size:clamp(18px,1.5vw,23px)!important;line-height:1.2!important}
.loc-explorer .loc-ex-desc{line-height:1.45!important}
@media(max-width:1000px){.loc-explorer{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:620px){.loc-explorer{grid-template-columns:1fr!important;gap:16px!important}.loc-explorer>.loc-ex-card,.loc-explorer>.loc-ex-card:first-child,.loc-explorer>.loc-ex-card:last-child{aspect-ratio: 1.18 / 1!important}.loc-explorer .loc-ex-card .loc-ex-info{padding:20px!important}}

/* Other locations on a location-detail page use .lc cards (a different [docs/css-notes.md n309] */
#related-strip.lc-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:20px!important;
  margin-top:26px!important;
}
#related-strip.lc-grid>.lc{
  display:grid!important;
  grid-template-areas:"card"!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr)!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1.28 / 1!important;
  overflow:hidden!important;
  box-shadow:none!important;
}
#related-strip.lc-grid>.lc>.lc__media,
#related-strip.lc-grid>.lc>.lc__panel{grid-area:card!important;min-width:0!important}
#related-strip.lc-grid>.lc>.lc__media{height:auto!important;min-height:0!important;aspect-ratio:auto!important;align-self:stretch!important}
#related-strip.lc-grid>.lc>.lc__panel{
  align-self:end!important;
  min-height:0!important;
  padding:58px 22px 20px!important;
  background:linear-gradient(180deg,transparent 0,rgba(17,17,16,.70) 28px,rgba(17,17,16,.94) 100%)!important;
}
#related-strip.lc-grid>.lc>.lc__panel>.lc__body{padding:0!important;gap:7px!important}
#related-strip.lc-grid .lc__name{font-size:clamp(18px,1.7vw,24px)!important;line-height:1.25!important}
#related-strip.lc-grid .lc__blurb{font-size:14px!important;line-height:1.5!important;min-height:0!important}
@media(max-width:900px){#related-strip.lc-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:620px){#related-strip.lc-grid{grid-template-columns:1fr!important;gap:16px!important}#related-strip.lc-grid>.lc{aspect-ratio:1.15 / 1!important}}

/* §93 — A PHOTOGRAPH YOU ARE INVITED TO OPEN HAS TO BE REACHABLE [docs/css-notes.md n310] */
.sc:has(> .sc__media[data-gallery]) > .sc__body{ pointer-events: none; }
.sc:has(> .sc__media[data-gallery]) > .sc__body a,
.sc:has(> .sc__media[data-gallery]) > .sc__body button,
.sc:has(> .sc__media[data-gallery]) > .sc__foot,
.sc:has(> .sc__media[data-gallery]) > .sc__foot *{ pointer-events: auto; }

/* §94 — THE HOMEPAGE LOCATION NAMES, ON ONE LINE ACROSS THE ROW [docs/css-notes.md n311] */
#home-loc-scroll .loc-card .loc-info{
  top: auto;
  min-height: 42%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
#home-loc-scroll .loc-card .loc-desc{
  min-height: 2.5em;
  min-height: 2lh;
}
#home-loc-scroll .loc-card .loc-card-tags{ margin-top: auto; }

/* §95 — HOW A BUTTON FEELS WHEN YOU USE IT [docs/css-notes.md n312] */
:root{
  --btn-ease: var(--ha-ease);
  --btn-colour: 180ms;
  --btn-lift: 200ms;
  --btn-press: 220ms;      /* the release: the button settles back */
  --btn-press-in: 90ms;    /* the press itself: as near instant as reads */
  --btn-sweep: 260ms;
}

:is(.cta-btn, .cta-btn-secondary, .nav-cta-secondary, .cta-outline, .form-submit,
    .ha-pill, .lang-toggle-btn, .wa__btn, .wa__close, .wa__go, .modal-close,
    .pkgs-filter-btn, .art-filter-btn, .filter-tab, .chip, .social-pill,
    .doc-carousel-btn, .hg__nav, .hero-story-btn, .hero-sound-btn,
    .wiz-back, .wiz-continue, .wiz-skip-package, .bk-sw__opt, .bk-type, .bk-pkg__pick,
    .plan-toggle button, .cal-nav button, .ev-reg-btn, .ev-more, .ev-clear, .svc__add,
    .huna-time-slot, .huna-cal-day, .huna-date-trigger),
.nav-ctas > .cta-btn{
  transition-property: background-color, color, border-color, box-shadow, transform, scale;
  transition-duration: var(--btn-colour), var(--btn-colour), var(--btn-colour), var(--btn-colour), var(--btn-lift), var(--btn-press);
  transition-timing-function: var(--btn-ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (prefers-reduced-motion: no-preference){
  :is(.cta-btn, .cta-btn-secondary, .nav-cta-secondary, .cta-outline, .form-submit,
      .ha-pill, .lang-toggle-btn, .wa__btn, .wa__close, .wa__go, .modal-close,
      .pkgs-filter-btn, .art-filter-btn, .filter-tab, .chip, .social-pill,
      .doc-carousel-btn, .hg__nav, .hero-story-btn, .hero-sound-btn,
      .wiz-back, .wiz-continue, .wiz-skip-package, .bk-sw__opt, .bk-type, .bk-pkg__pick,
      .plan-toggle button, .cal-nav button, .ev-reg-btn, .ev-more, .ev-clear, .svc__add,
      .huna-time-slot, .huna-cal-day, .huna-date-trigger):active:not(:disabled, [aria-disabled="true"]){
    scale: .97;
    transition-duration: var(--btn-colour), var(--btn-colour), var(--btn-colour), var(--btn-colour), var(--btn-press-in), var(--btn-press-in);
  }
  /* A button that lifted on hover comes back down when pressed — it does not [docs/css-notes.md n313] */
  :is(.cta-btn, .cta-btn-secondary, .form-submit, .wa__btn, .doc-carousel-btn):active:not(:disabled, [aria-disabled="true"]){
    transform: none;
  }
}
/* Less motion is not no answer: for anyone who asked for it, a press dims [docs/css-notes.md n314] */
@media (prefers-reduced-motion: reduce){
  :is(.cta-btn, .cta-btn-secondary, .nav-cta-secondary, .cta-outline, .form-submit,
      .ha-pill, .lang-toggle-btn, .wa__btn, .wa__close, .wa__go, .modal-close,
      .pkgs-filter-btn, .art-filter-btn, .filter-tab, .chip, .social-pill,
      .doc-carousel-btn, .hg__nav, .hero-story-btn, .hero-sound-btn,
      .wiz-back, .wiz-continue, .wiz-skip-package, .bk-sw__opt, .bk-type, .bk-pkg__pick,
      .plan-toggle button, .cal-nav button, .ev-reg-btn, .ev-more, .ev-clear, .svc__add,
      .huna-time-slot, .huna-cal-day, .huna-date-trigger):active:not(:disabled, [aria-disabled="true"]){
    opacity: .78;
  }
}

.ha-pill::before,
.cta-outline::before{ transition-duration: var(--btn-sweep); }
.ha-pill__arrow{ transition-duration: var(--btn-sweep); }
.ha-link{ transition-duration: 280ms, var(--btn-colour); }

:is(.cta-btn, .cta-btn-secondary, .nav-cta-secondary, .cta-outline, .form-submit,
    .ha-pill, .lang-toggle-btn, .wa__btn, .wa__close, .wa__go, .modal-close,
    .pkgs-filter-btn, .art-filter-btn, .filter-tab, .chip, .social-pill,
    .doc-carousel-btn, .hg__nav, .hero-story-btn, .hero-sound-btn,
    .wiz-back, .wiz-continue, .wiz-skip-package, .bk-sw__opt, .bk-type, .bk-pkg__pick,
    .plan-toggle button, .cal-nav button, .ev-reg-btn, .ev-more, .ev-clear, .svc__add,
    .huna-time-slot, .huna-cal-day, .huna-date-trigger):focus-visible{
  /* Two rings, dark over light, so one of them shows whatever the button [docs/css-notes.md n315] */
  outline: 2px solid var(--ha-ink);
  outline-offset: 2px;
  /* !important only here: the header buttons and the package-card button [docs/css-notes.md n316] */
  box-shadow: 0 0 0 4px var(--ha-cream) !important;
  transition-duration: var(--btn-colour), var(--btn-colour), var(--btn-colour), 0s, var(--btn-lift), var(--btn-press);
}

:is(.cta-btn, .cta-btn-secondary, .cta-outline, .form-submit, .wiz-back,
    .ev-reg-btn, .bk-pkg__pick, .svc__add):is(:disabled, [aria-disabled="true"]){
  opacity: .55;
  cursor: not-allowed;
}
:is(.cta-btn, .form-submit)[aria-busy="true"]{ cursor: progress; }

/* §97 — THE FOOTER WAITS BELOW THE FOLD UNTIL THE PAGE HAS ITS CONTENT [docs/css-notes.md n317] */
html.ha-booting main{
  min-height: 100vh;
  min-height: 100svh;
}

/* The detail pages also write their hero's words and everything under the [docs/css-notes.md n318] */
html.ha-booting :is(.ev-hero-content, .loc-switch, .loc-detail-body, .ev-detail-body){
  visibility: hidden;
}

/* §98 — ONE LINE BETWEEN TWO SECTIONS, NOT TWO [docs/css-notes.md n319] */
.loc-detail-main > :is(ul, ol, dl, div):is(:has(+ h2), :has(+ [hidden] + h2), :has(+ [style*="display: none"] + h2)) > :last-child{
  border-bottom: 0;
}

/* §99 — A PACKAGE CARD'S FACTS, WRAPPED, AND ITS "AVAILABLE AT" LINE [docs/css-notes.md n320] */
@media (min-width: 561px){
  .pk .pk__meta{
    column-gap: 0;
    margin-inline-start: -1.4em;
    clip-path: inset(-6px -6px -6px 1.4em);
  }
  html[dir="rtl"] .pk .pk__meta{ clip-path: inset(-6px 1.4em -6px -6px); }
  .pk .pk__meta > .pk__meta-i::before,
  .pk .pk__meta-i + .pk__meta-i::before{
    content: "·";
    display: inline-block;
    width: 1.4em;
    margin: 0;
    text-align: center;
    opacity: .45;
  }
}
.pk--product > .pk__body > .pk__at{ margin-top: auto; padding-top: 10px; }
.pk--product > .pk__body > .pk__at ~ .pk__actions{ margin-top: 16px; }   /* the free space goes above the pair, not between them */

/* §101 — THE PLACE IN PICTURES: the location gallery as a slider after the hero [docs/css-notes.md n323] */
.loc-show{
  --sw: min(1080px, 76vw);
  --sgap: 20px;
  background: var(--ha-cinema); color: var(--ha-cinema-ink);
  padding: clamp(40px, 5vw, 72px) 0 clamp(36px, 4.5vw, 64px);
}
.loc-show[hidden]{ display: none; }
.loc-show__head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.loc-show__titles{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.loc-show__eyebrow{ font-family: var(--ha-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ha-yellow); }
html[dir="rtl"] .loc-show__eyebrow{ font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 13px; }
.loc-show h2{ margin: 0; color: var(--ha-cinema-ink); font-size: clamp(1.6rem, 2.8vw, 2.5rem); line-height: 1.15; letter-spacing: -0.028em; }
html[dir="rtl"] .loc-show h2{ letter-spacing: 0; line-height: 1.4; }
.loc-show__ctrl{ display: flex; align-items: center; gap: 10px; }
.loc-show__count{ font-family: var(--ha-mono); font-size: 13px; letter-spacing: .1em; color: var(--ha-cinema-soft); min-width: 72px; text-align: center; direction: ltr; }
.loc-show__nav{
  width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center;
  border: 1px solid var(--ha-cinema-line); background: transparent; color: var(--ha-cinema-ink); cursor: pointer;
}
html[dir="rtl"] .loc-show__nav svg{ transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine){ .loc-show__nav:not([aria-disabled="true"]):hover{ background: var(--ha-yellow); border-color: var(--ha-yellow); color: var(--ha-ink); } }
.loc-show__nav[aria-disabled="true"]{ opacity: .35; cursor: default; }
.loc-show__nav:focus-visible{ outline: 2px solid var(--ha-yellow); outline-offset: 3px; }

.loc-show__chips{ display: flex; gap: 8px; margin-top: 22px; overflow-x: auto; scrollbar-width: none; padding-block: 4px; }
.loc-show__chips::-webkit-scrollbar{ display: none; }
.loc-show__chips[hidden]{ display: none; }
.loc-show__chip{
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--ha-cinema-line); background: transparent; color: var(--ha-cinema-ink);
  font: 500 14px/1 inherit; font-family: inherit; cursor: pointer; white-space: nowrap;
}
.loc-show__chip span{ color: var(--ha-cinema-soft); margin-inline-start: 4px; }
.loc-show__chip[aria-pressed="true"]{ background: var(--ha-cinema-ink); color: var(--ha-cinema); border-color: var(--ha-cinema-ink); }
.loc-show__chip[aria-pressed="true"] span{ color: rgba(18,17,16,.62); }
@media (hover: hover) and (pointer: fine){ .loc-show__chip[aria-pressed="false"]:hover{ border-color: var(--ha-cinema-ink); } }
.loc-show__chip:focus-visible{ outline: 2px solid var(--ha-yellow); outline-offset: 2px; }

.loc-show__viewport{
  margin-top: 26px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; outline: none;
}
.loc-show__viewport::-webkit-scrollbar{ display: none; }
.loc-show__viewport:focus-visible{ box-shadow: inset 0 0 0 2px var(--ha-yellow); }
.loc-show__viewport.is-dragging{ scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }
.loc-show__track{ display: flex; gap: var(--sgap); margin: 0; padding: 0 0 4px; list-style: none; }
.loc-show__track::before,
.loc-show__track::after{ content: ""; flex: 0 0 calc((100% - var(--sw)) / 2 - var(--sgap)); }
.loc-show__slide{
  flex: 0 0 var(--sw); scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; flex-direction: column; gap: 14px;
  opacity: .42; transition: opacity .35s var(--ha-ease);
}
.loc-show__slide.is-active{ opacity: 1; }
.loc-show__shot{
  display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0;
  border-radius: 18px; overflow: hidden; background: #000; cursor: pointer;
}
.loc-show__slide.is-active .loc-show__shot{ cursor: zoom-in; }
.loc-show__shot img{ display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.loc-show__shot:focus-visible{ outline: 2px solid var(--ha-yellow); outline-offset: 3px; }
.loc-show__cap{ display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; min-height: 44px; }
.loc-show__room{ font-size: 17px; font-weight: 600; color: var(--ha-cinema-ink); }
.loc-show__kind{ font-size: 13px; color: var(--ha-cinema-soft); }
.loc-show__book{
  margin-inline-start: auto; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ha-yellow); font-size: 14px; font-weight: 600; text-decoration: none;
  visibility: hidden;
}
.loc-show__slide.is-active .loc-show__book{ visibility: visible; }
@media (hover: hover) and (pointer: fine){ .loc-show__book:hover{ text-decoration: underline; text-underline-offset: 4px; } }
.loc-show__book:focus-visible{ outline: 2px solid var(--ha-yellow); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 820px){
  .loc-show{ --sw: 86vw; --sgap: 12px; }
  .loc-show__shot{ aspect-ratio: 4 / 3; border-radius: 14px; }
  .loc-show__nav{ width: 44px; height: 44px; }
  .loc-show__head{ align-items: flex-start; flex-direction: column; }
  .loc-show__room{ font-size: 16px; }
}
@media (prefers-reduced-motion: reduce){
  .loc-show__slide{ transition: none; }
}

/* §102 An open popover lifts its section above the next one (calendar under the footer on phones) [docs/css-notes.md n100] */
:is(.hero, section, main):focus-within,
:is(.hero, section, main):has(.open, [aria-expanded="true"]){
  z-index: 5;
}