/* Shared across every page. Kept out of the markup so the two pages cannot
   drift apart — inline styles were fine while the site was one file. */

:root {
  --step: 1.5rem;
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }
/* Anchored sections must clear the floating nav, not slide under it. */
main > section[id] { scroll-margin-top: 6.5rem; }
body {
  background: #12100E;
  color: #F4EFE8;
  -webkit-font-smoothing: antialiased;
}

/* Layered radial atmosphere + film grain. Fixed so it never scrolls with content. */
.atmosphere {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60rem 40rem at 12% -5%,  rgba(200,155,90,0.10), transparent 60%),
    radial-gradient(50rem 40rem at 92% 18%,  rgba(138,103,51,0.08), transparent 62%),
    radial-gradient(70rem 50rem at 50% 108%, rgba(200,155,90,0.06), transparent 60%);
}
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.display-xl {
  font-family: "Instrument Serif", Amiri, Georgia, serif;
  letter-spacing: -0.04em;
  line-height: 0.92;
}
.body-copy { line-height: 1.7; }

/* ---- Arabic script overrides ----
   Arabic is a connected script: negative tracking severs the joins between
   letterforms, so every latin-tuned letter-spacing has to be neutralised.
   Naskh also carries taller ascenders and deeper descenders than latin,
   so the tight display leading would clip it. */
:lang(ar) .display-xl,
[dir="rtl"] .display-xl {
  letter-spacing: normal;
  line-height: 1.4;
}
:lang(ar) .eyebrow,
[dir="rtl"] .eyebrow {
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.8125rem;
}
/* Naskh reads optically smaller than latin at an identical px size. */
:lang(ar) .body-copy,
[dir="rtl"] .body-copy { line-height: 1.9; font-size: 1.05em; }

/* Tailwind's tracking-* utilities are latin-tuned for the same reason. */
[dir="rtl"] [class*="tracking-"] { letter-spacing: normal; }

/* Latin runs inside arabic (brand names, counts, URLs) get reordered by the
   bidi algorithm unless each run is isolated. Wrap them in <bdi>. */
bdi { unicode-bidi: isolate; }

.eyebrow {
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #A79E93;
}

/* Colour-tinted layered elevation — never a flat grey shadow. */
.lift {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.5),
    0 8px 24px rgba(0,0,0,0.45),
    0 24px 60px rgba(18,16,14,0.6),
    0 0 0 1px rgba(200,155,90,0.07);
}

/* Photographs get a colour treatment + gradient scrim so text stays legible. */
.shot { position: relative; overflow: hidden; background: #1B1815; }
.shot img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* Slower than the card hover zoom below, which overrides this for cards. */
  transition: transform 1.1s var(--ease-spring);
}
.shot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(18,16,14,0.62), rgba(18,16,14,0.05) 55%);
}
/* Toned down from 0.14: on a photography site the photograph is the product,
   and every extra darkening step dulls the metal the client is paying for. */
.shot--tint::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: #8A6733; mix-blend-mode: multiply; opacity: 0.08;
}
.shot--plain::after { display: none; }

/* Scroll reveal: transform + opacity only. */
.reveal {
  opacity: 0; transform: translate3d(0, 56px, 0);
  transition: opacity 0.7s var(--ease-spring), transform 0.9s var(--ease-spring);
}
/* Compositor promotion is applied by JS shortly before the element enters and
   dropped once it settles. Declaring will-change on every .reveal up front
   would pin a layer per element — twelve full-size textures in a gallery, which
   on a Retina display costs more memory than the repaint it saves. */
.reveal.arming { will-change: transform, opacity; }
.reveal.settled { will-change: auto; }
/* Variants sharpen the choreography per element kind. They must sit BEFORE
   .reveal.in in this file: same specificity, so source order decides, and the
   entered state has to win. */
.reveal.display-xl { transform: translate3d(0, 96px, 0); transition-duration: 0.8s, 1.15s; }
.reveal.card-hover { transform: translate3d(0, 72px, 0) scale(0.94); }

/* .card-hover declares its own `transition` shorthand further down this file.
   At equal specificity it wins on source order and drops opacity from the
   transition entirely, so cards used to snap in instead of fading. Reclaim the
   entry transition while the card is still animating in, then step aside so
   the shorter hover transition governs afterwards.

   Longhands, not the `transition` shorthand: the shorthand would reset
   transition-delay to 0 and wipe out the stagger this rule is meant to keep. */
.reveal.card-hover:not(.settled) {
  transition-property: opacity, transform;
  transition-duration: 0.7s, 0.95s;
  transition-timing-function: var(--ease-spring);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }
.reveal[data-delay="4"] { transition-delay: 360ms; }
/* Applied once the entry transition finishes. Without it the entry delay keeps
   postponing every later transition — a card would ignore hover for its full
   stagger offset. Must follow the data-delay rules to win on source order. */
.reveal.settled { transition-delay: 0s; }

/* Photographs settle: the frame fades in while the image inside eases from a
   slight over-zoom to rest. Scoped to :not(.in) so the rule releases the img
   after entry — otherwise it would override the card-hover zoom. */
.reveal:not(.in) .shot img { transform: scale(1.12); }

.link-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s var(--ease-spring), color 0.3s var(--ease-spring);
}
.link-underline:hover, .link-underline:focus-visible { background-size: 100% 1px; }

:focus-visible {
  outline: 2px solid #E0B36B; outline-offset: 3px; border-radius: 2px;
}

.card-hover { transition: transform 0.5s var(--ease-spring); }
.card-hover:hover, .card-hover:focus-within { transform: translate3d(0, -6px, 0); }
.card-hover img { transition: transform 0.7s var(--ease-spring); }
.card-hover:hover img, .card-hover:focus-within img { transform: scale(1.04); }

.btn-primary {
  transition: transform 0.3s var(--ease-spring), background-color 0.3s var(--ease-spring),
              color 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-spring);
}
.btn-primary:hover, .btn-primary:focus-visible {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 10px 30px rgba(200,155,90,0.28);
}
.btn-primary:active { transform: translate3d(0, 0, 0); }

.rule { height: 1px; background: linear-gradient(90deg, rgba(200,155,90,0.35), transparent); }

/* The brand logo ships as pure black artwork, which is invisible on this
   background. Inverting it is a stopgap until a proper light-version file
   exists — it works only because the source is black on transparency. */
.logo-invert { filter: invert(1); }

/* FAQ accordion on the money landings. Native details/summary: no JS to fail,
   keyboard and screen-reader behaviour for free. */
.faq details { border-bottom: 1px solid rgba(244,239,232,0.1); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0; color: #F4EFE8;
  transition: color 0.3s var(--ease-spring);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; color: #C89B5A; font-size: 1.375rem; line-height: 1; flex-shrink: 0;
  transition: transform 0.3s var(--ease-spring);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover, .faq summary:focus-visible { color: #E0B36B; }

/* Lightbox: gallery photos open full-screen with prev/next. Markup is built
   by site.js on demand; anything here must work without Tailwind utilities. */
.lightbox {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(18, 16, 14, 0.96);
  animation: lb-fade 0.25s var(--ease-spring);
}
@keyframes lb-fade { from { opacity: 0; } }
.lightbox img {
  max-width: min(92vw, 1400px); max-height: 86vh;
  object-fit: contain; border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.lightbox button {
  position: absolute; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 9999px;
  border: 1px solid rgba(244, 239, 232, 0.2);
  background: rgba(18, 16, 14, 0.6);
  color: #F4EFE8; font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: color 0.3s var(--ease-spring), border-color 0.3s var(--ease-spring);
}
.lightbox button:hover, .lightbox button:focus-visible {
  color: #E0B36B; border-color: rgba(200, 155, 90, 0.5);
}
.lightbox .lb-close { top: 1.25rem; right: 1.25rem; }
.lightbox .lb-prev  { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next  { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox .lb-count {
  position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  font-size: 0.8125rem; color: #A79E93; letter-spacing: 0.08em;
}
@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
}

/* "Reduce" is not "remove". What triggers vestibular discomfort is travel,
   scale and parallax — a plain cross-fade is not on that list. Killing every
   transition made the site look dead in browsers that honour the OS setting
   (Edge does, Chrome currently does not), so motion is stripped to a short
   fade rather than switched off. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal,
  .reveal.display-xl,
  .reveal.card-hover,
  .reveal.card-hover:not(.settled) {
    transform: none !important;
    transition-property: opacity;
    transition-duration: 0.45s;
    transition-timing-function: ease;
    transition-delay: 0s !important;
  }
  .reveal { opacity: 0; }
  .reveal.in { opacity: 1; }

  .reveal:not(.in) .shot img { transform: none; }
  .card-hover, .card-hover img, .btn-primary, .link-underline { transition: none; }
  .card-hover:hover { transform: none; }
  .card-hover:hover img { transform: none; }
}