@import url('/assets/fonts/fonts.css');

/* ============================================================
   RUKN AL ABAYA
   The palette is the logo and nothing else: the cream of the badge
   interior and the warm black of its ring. No accent colour is
   introduced, deliberately — the garments are the only chroma on
   the page, and every one of them is a different colour.
   ============================================================ */

:root{
  --paper:    #FFFBF0;   /* sampled from the logo badge */
  --paper-2:  #F6F0E1;   /* recessed bands */
  --white:    #FFFFFF;   /* product plates */
  --ink:      #1D1815;   /* sampled from the logo linework — 17.0:1 on paper */
  /* 2026-08-23 — both greys were measured and darkened. --ink-2 was #6E645B
     and --ink-3 was #A2988D, which is 2.74:1 on the cream and fails WCAG AA
     outright; it was carrying footer text, quote attributions and the struck
     original price. Everything here now clears 4.5:1 on BOTH the paper and
     the tinted band. Do not lighten these to "soften" the page — the cream
     ground already does that, and light grey on cream is what made the type
     unreadable in the first place. */
  --ink-2:    #544B43;   /* 8.24:1 on paper · 7.49:1 on the tint */
  --ink-3:    #7A7067;   /* 4.68:1 on paper — the lightest allowed anywhere */
  --rule:     rgba(29,24,21,.16);
  --rule-2:   rgba(29,24,21,.30);

  /* ── tonal secondaries ────────────────────────────────────────────
     Lifted from the garments themselves, not invented: Warda's dusty
     rose, Sakina's slate, and a muted olive for the third note. The
     2026 category has moved to soft neutrals and tone-on-tone, so these
     stay desaturated and are used as WASHES and CHIPS only. The logo's
     cream and ink remain the brand; these never become a headline
     colour, never a button, never type. Saturating them turns a quiet
     boutique into a generic one. */
  --rose:     #C9A9A4;
  --slate:    #6F7480;
  --olive:    #8B8F7A;

  /* ── radius scale ─────────────────────────────────────────────────
     The logo is a circle. Rounding is on-brand rather than decorative,
     so it runs through every surface including the admin. */
  --r-xs:     6px;
  --r-sm:     10px;
  --r-md:     16px;
  --r-lg:     26px;
  --r-pill:   999px;

  --display:  'Italiana', 'Amiri', Georgia, serif;
  --body:     'Jost', 'Noto Sans Arabic', system-ui, sans-serif;

  --pad:      clamp(20px, 5vw, 64px);
  --maxw:     1240px;
  --spine:    28px;
}

html[dir="rtl"]{
  --display: 'Amiri', 'Italiana', Georgia, serif;
  --body:    'Noto Sans Arabic', 'Jost', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  /* 2026-08-23 — was 300/16px. Jost Light and Noto Sans Arabic Light are both
     very fine-stroked, and on a cream ground they read as grey haze rather
     than text. 400 is the floor for body copy in either script. */
  font-weight:400;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

/* Arabic needs more room than Latin at the same nominal size: no ascender or
   descender heuristics apply, and the diacritics and joins want vertical air. */
html[dir="rtl"] body{ font-size:18px; line-height:1.9 }

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }

:focus-visible{ outline:1.5px solid var(--ink); outline-offset:3px }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }

/* ── type ───────────────────────────────────────────────── */
.display{ font-family:var(--display); font-weight:400; line-height:1.08; letter-spacing:.01em }
html[dir="ltr"] .display{ letter-spacing:.04em }

.kicker{
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-2);
}
html[dir="rtl"] .kicker{ letter-spacing:0; font-size:15px; text-transform:none }

.lede{ color:var(--ink-2); font-size:17.5px; max-width:46ch }
html[dir="rtl"] .lede{ font-size:18.5px }

/* ── header ─────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.top .bar{
  max-width:var(--maxw); margin-inline:auto;
  padding:14px var(--pad);
  display:flex; align-items:center; gap:22px;
}
.seal{ width:44px; height:44px; flex:none }
.seal svg{ width:100%; height:100% }

.wordmark{
  font-family:var(--display); font-size:19px;
  letter-spacing:.22em; text-transform:uppercase; white-space:nowrap;
}
html[dir="rtl"] .wordmark{ letter-spacing:0; text-transform:none; font-size:22px }

.nav{ display:flex; gap:26px; margin-inline-start:auto; align-items:center }
.nav a{
  font-size:13.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  padding-block:4px; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
html[dir="rtl"] .nav a{ letter-spacing:0; text-transform:none; font-size:16.5px }
.nav a:hover{ color:var(--ink); border-bottom-color:var(--ink) }

.langs{ display:flex; gap:10px; align-items:center; font-size:12.5px; font-weight:500; letter-spacing:.12em }
.langs a{ color:var(--ink-3); text-transform:uppercase }
.langs a[aria-current="true"]{ color:var(--ink) }

@media (max-width:860px){
  .nav{ display:none }
  .top .bar{ gap:14px }
}

/* ── the spine ──────────────────────────────────────────────
   The signature device. A hairline runs the length of the page on
   the inline-start edge and a leafy sprig lifted from the logo sits
   at each section junction: the brand's botanical branch turned into
   the page's structure rather than dropped on top as ornament.
   ─────────────────────────────────────────────────────────── */
.spined{ position:relative }
.spined::before{
  content:''; position:absolute; inset-block:0; inset-inline-start:var(--spine);
  width:1px; background:var(--rule);
}
@media (max-width:860px){ :root{ --spine:14px } }
@media (max-width:560px){ .spined::before{ display:none } .sprig{ display:none } }

.sprig{
  position:absolute; inset-inline-start:calc(var(--spine) - 21px);
  width:42px; height:84px; color:var(--ink-3);
}
html[dir="rtl"] .sprig{ transform:scaleX(-1) }
.sprig path{
  fill:none; stroke:currentColor; stroke-width:1.1;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:200; stroke-dashoffset:200;
  animation:draw 1.5s .2s ease-out forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0 } }

/* ── sections ───────────────────────────────────────────── */
.sec{ padding-block:clamp(56px, 9vw, 108px) }
.sec--tint{ background:var(--paper-2) }
.sec-head{ margin-bottom:clamp(28px,4vw,52px) }
.sec-head h2{ margin:8px 0 0; font-size:clamp(28px,4.4vw,46px) }
.sec-head p{ margin:10px 0 0; color:var(--ink-2); font-size:16.5px }

/* ── hero ───────────────────────────────────────────────── */
.hero{ padding-block:clamp(64px,12vw,150px) }
.hero h1{ margin:14px 0 0; font-size:clamp(40px, 9vw, 96px) }
.hero .lede{ margin-top:22px }
.hero .cta{ margin-top:34px }

/* ── buttons ────────────────────────────────────────────── */
.btn{
  display:inline-block; font-family:var(--body); font-size:13.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  padding:15px 34px; border:1px solid var(--ink); background:transparent; color:var(--ink);
  border-radius:var(--r-pill);
  cursor:pointer; transition:background .25s, color .25s, box-shadow .25s;
}
html[dir="rtl"] .btn{ letter-spacing:0; text-transform:none; font-size:16.5px }
.btn:hover{ background:var(--ink); color:var(--paper); box-shadow:0 10px 26px -14px rgba(29,24,21,.55) }
.btn--solid{ background:var(--ink); color:var(--paper) }
.btn--solid:hover{ background:transparent; color:var(--ink) }
.btn[disabled]{ opacity:.4; cursor:not-allowed }

/* ── product grid ───────────────────────────────────────── */
.grid{
  display:grid; gap:clamp(16px,2.4vw,34px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.card{ position:relative; display:block }
.card .plate{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  background:var(--white); border:1px solid var(--rule);
  border-radius:var(--r-md);
  transition:box-shadow .45s ease, transform .45s ease;
}
.card:hover .plate{ box-shadow:0 18px 44px -22px rgba(29,24,21,.34); transform:translateY(-3px) }
.card .plate img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.6,.2,1);
}
.card:hover .plate img{ transform:scale(1.035) }

/* An unphotographed product still has to look intentional. */
.plate--empty{
  display:flex; align-items:center; justify-content:center; border-radius:var(--r-md);
  background:
    repeating-linear-gradient(-45deg, transparent 0 9px, rgba(29,24,21,.028) 9px 18px),
    var(--white);
  color:var(--ink-3);
}
.plate--empty svg{ width:44%; opacity:.5 }

.card .meta{ padding-top:14px; display:flex; justify-content:space-between; gap:14px; align-items:baseline }
.card .nm{ font-family:var(--display); font-size:22px; line-height:1.3 }
.card .pr{ font-size:15.5px; font-weight:500; color:var(--ink-2); white-space:nowrap }
.card .pr s{ color:var(--ink-3); margin-inline-end:7px }

/* The featured marker is a seal, not a rectangle — the brand's own device. */
/* 2026-08-23 — the seal was ink linework sitting straight on a white
   product plate and effectively vanished. It now presses onto a cream disc
   with a soft shadow, which is what a wax seal on cloth actually looks like
   and, more to the point, is legible. Do not remove the backing and "let the
   photo show through" — that is the version that did not read. */
.mark{
  position:absolute; inset-block-start:11px; inset-inline-end:11px;
  width:54px; height:54px; padding:4px; color:var(--ink);
  background:var(--paper); border-radius:50%;
  box-shadow:0 8px 20px -8px rgba(29,24,21,.5);
}
.mark svg{ width:100%; height:100% }

.flag{
  position:absolute; inset-block-start:12px; inset-inline-start:12px;
  background:var(--ink); color:var(--paper);
  font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; padding:6px 13px;
  border-radius:var(--r-pill);
}
html[dir="rtl"] .flag{ letter-spacing:0; text-transform:none; font-size:12px }
.flag--quiet{ background:var(--paper); color:var(--ink); border:1px solid var(--ink) }

/* ── reviews ────────────────────────────────────────────── */
.quotes{ display:grid; gap:clamp(20px,3vw,40px); grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)) }
.quote{ border-top:1px solid var(--rule-2); padding-top:22px }
.quote p{ font-family:var(--display); font-size:clamp(19px,2.2vw,25px); line-height:1.45; margin:0 }
.quote cite{
  display:block; margin-top:16px; font-style:normal; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); font-weight:500;
}
html[dir="rtl"] .quote cite{ letter-spacing:0; text-transform:none; font-size:15.5px }

/* ── story ──────────────────────────────────────────────── */
.story{ max-width:60ch }
.story h2{ font-size:clamp(28px,4.4vw,46px); margin:8px 0 18px }
.story p{ color:var(--ink-2) }

/* ── footer ─────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--rule); padding-block:48px; font-size:15px; color:var(--ink-2) }
.foot .cols{ display:flex; flex-wrap:wrap; gap:36px; justify-content:space-between; align-items:flex-start }
.foot a:hover{ color:var(--ink) }
.foot .fine{ margin-top:34px; font-size:13.5px; color:var(--ink-2) }

/* ── empty state ────────────────────────────────────────── */
.empty{ text-align:center; padding-block:70px; color:var(--ink-2) }
.empty .display{ font-size:clamp(24px,3.4vw,34px); margin-bottom:12px; color:var(--ink); display:block }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
  .sprig path{ stroke-dashoffset:0 }
}

/* ============================================================
   ATMOSPHERE
   Two layers, both deliberately faint.

   1. AMBIENT — three blurred washes in the tonal secondaries, fixed
      behind everything. They are the three garments' own colours
      (rose, slate, olive) at very low opacity, so the page has depth
      and warmth without introducing a brand colour that competes with
      the cream and ink.

   2. AURA — a soft warm light that follows the pointer, like a lamp
      moving over fabric in an atelier. Pointer-only, motion-safe, and
      capped low: this is a boutique, not a dashboard. The Culmen
      panels can carry a bright cyan aura because they are tools being
      stared at; here the garments must stay the brightest thing on
      screen.
   ============================================================ */

.ambient{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
}
.ambient i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(90px); opacity:.30;
}
.ambient i:nth-child(1){ width:46vw; height:46vw; inset-block-start:-12vw;
  inset-inline-end:-10vw; background:var(--rose) }
.ambient i:nth-child(2){ width:38vw; height:38vw; inset-block-start:52vh;
  inset-inline-start:-14vw; background:var(--olive); opacity:.22 }
.ambient i:nth-child(3){ width:34vw; height:34vw; inset-block-end:-12vw;
  inset-inline-end:6vw; background:var(--slate); opacity:.18 }

@media (max-width:700px){ .ambient i{ filter:blur(60px); opacity:.22 } }

.aura{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0;
  transition:opacity .6s ease;
  background:radial-gradient(
    340px circle at var(--ax,50%) var(--ay,50%),
    rgba(255,246,224,.85) 0%,
    rgba(255,246,224,.34) 38%,
    transparent 70%);
}
body.has-aura .aura{ opacity:1 }

/* A card lifts slightly into the light as the pointer nears it. */
.card .plate{ will-change:transform }

@media (hover:none), (prefers-reduced-motion:reduce){
  .aura{ display:none }
}

/* ============================================================
   HERO WITH A GARMENT
   Fashion retail sells on the photograph; type alone was the honest
   answer while there were no photographs, not the right one. The
   image is the first featured piece that has one, so this section
   populates itself from the shop rather than from a hardcoded asset.
   ============================================================ */

.herogrid{ display:grid; gap:clamp(30px,5vw,68px); align-items:center }
@media (min-width:920px){
  .herogrid--img{ grid-template-columns:1.05fr .95fr }
}

.herocopy{ min-width:0 }

.herofig{
  position:relative; display:block; border-radius:var(--r-lg); overflow:hidden;
  background:var(--white); border:1px solid var(--rule);
  aspect-ratio:4/5;
  box-shadow:0 40px 90px -46px rgba(29,24,21,.55);
  transition:transform .6s cubic-bezier(.2,.6,.2,1), box-shadow .6s ease;
}
.herofig img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.6,.2,1);
}
.herofig:hover{ transform:translateY(-4px); box-shadow:0 48px 100px -44px rgba(29,24,21,.6) }
.herofig:hover img{ transform:scale(1.04) }

/* The tag sits ON the photograph rather than under it — a swing ticket on
   the garment. Cream on the image, so it reads over any colour of fabric. */
.herotag{
  position:absolute; inset-block-end:16px; inset-inline-start:16px;
  display:flex; flex-direction:column; gap:2px;
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter:blur(8px);
  border-radius:var(--r-md); padding:12px 18px;
  box-shadow:0 10px 30px -14px rgba(29,24,21,.5);
}
.herotag .n{ font-family:var(--display); font-size:19px; line-height:1.2 }
.herotag .p{ font-size:14.5px; font-weight:500; color:var(--ink-2) }

@media (max-width:919px){
  .herofig{ aspect-ratio:3/4; max-width:420px; margin-inline:auto }
  .hero{ padding-block:clamp(44px,9vw,90px) }
}