/* ==========================================================================
   HUMAN APPEAL SHOP — Collection 001
   Premium devotional streetwear · standalone prototype
   Target platform: Shopify (Dawn / OS 2.0). All commerce wiring points are
   marked in the HTML/JS with [SHOPIFY: ...] placeholders.
   ========================================================================== */

/* Amiri kept for Arabic calligraphy; DIN Next (brand font) self-hosted below */
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&display=swap');

/* ---- DIN Next (brand typeface) — self-hosted, woff2 ---- */
@font-face{ font-family:"DIN Next"; font-weight:300; font-style:normal; font-display:swap;
  src:url("../fonts/DINNext-Light.woff2") format("woff2"); }
@font-face{ font-family:"DIN Next"; font-weight:300; font-style:italic; font-display:swap;
  src:url("../fonts/DINNext-LightItalic.woff2") format("woff2"); }
@font-face{ font-family:"DIN Next"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../fonts/DINNext-Regular.woff2") format("woff2"); }
@font-face{ font-family:"DIN Next"; font-weight:400; font-style:italic; font-display:swap;
  src:url("../fonts/DINNext-Italic.woff2") format("woff2"); }
@font-face{ font-family:"DIN Next"; font-weight:500; font-style:normal; font-display:swap;
  src:url("../fonts/DINNext-Medium.woff2") format("woff2"); }
@font-face{ font-family:"DIN Next"; font-weight:500; font-style:italic; font-display:swap;
  src:url("../fonts/DINNext-MediumItalic.woff2") format("woff2"); }
@font-face{ font-family:"DIN Next"; font-weight:700; font-style:normal; font-display:swap;
  src:url("../fonts/DINNext-Bold.woff2") format("woff2"); }
@font-face{ font-family:"DIN Next"; font-weight:700; font-style:italic; font-display:swap;
  src:url("../fonts/DINNext-BoldItalic.woff2") format("woff2"); }

/* ------------------------------------------------------------------ tokens */
:root{
  /* palette — warm sand / cream editorial */
  --bone:      #F6F2E9;
  --bone-2:    #EFE9DB;
  --sand:      #E9E1CE;
  --stone:     #DDD3BD;
  --line:      #D8CDB4;
  --line-soft: #E4DCC9;

  --ink:       #1B1712;
  --ink-2:     #55503F;   /* was #5C5443 — nudged for 4.5:1 on sand */
  --ink-3:     #7A7260;

  --gold:      #8F5B06;   /* accent — deep ochre gold, AA on bone       */
  --gold-soft: #B98A2E;
  --olive:     #4A5334;
  --clay:      #96502F;

  --night:     #16120C;   /* dark editorial sections                     */
  --night-2:   #221C13;
  --cream:     #F0E9D8;
  --cream-2:   #C9BFA6;

  /* country accents */
  --c-pakistan:  #14532D;
  --c-lebanon:   #7F1D1D;
  --c-palestine: #414D25;
  --c-sudan:     #96502F;

  --danger:    #B3261E;
  --success:   #3D6B35;

  /* type */
  /* DIN Next is the brand typeface across all three roles; hierarchy comes
     from weight, size, case and letter-spacing (see headings/labels below) */
  --serif: "DIN Next", -apple-system, "Helvetica Neue", Arial, sans-serif; /* display */
  --sans:  "DIN Next", -apple-system, "Helvetica Neue", Arial, sans-serif; /* body    */
  --coll:  "DIN Next", -apple-system, "Helvetica Neue", Arial, sans-serif; /* labels  */
  --arabic:"Amiri", "Geeza Pro", serif;

  /* rhythm */
  --sp-1: .5rem;  --sp-2: 1rem;  --sp-3: 1.5rem; --sp-4: 2rem;
  --sp-5: 3rem;   --sp-6: 4.5rem; --sp-7: 6.5rem; --sp-8: 9rem;
  --container: 82rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* motion */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 180ms;
  --dur-med:  320ms;
  --dur-slow: 700ms;

  /* layers */
  --z-sticky: 40; --z-header: 100; --z-drawer: 200; --z-chat: 150;
}

/* ------------------------------------------------------------------- base */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:500; line-height:1.08; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--stone); }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--narrow{ max-width:52rem; }
.container--wide{ max-width:96rem; }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:999;
  background:var(--ink); color:var(--bone); padding:.6rem 1.2rem;
  font-family:var(--coll); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem;
  transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top:1rem; }

/* --------------------------------------------------------------- type kit */
.kicker{
  display:inline-flex; align-items:center; gap:.75rem;
  font-family:var(--coll); font-weight:500; font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
.kicker::before{ content:""; width:2.2rem; height:1px; background:var(--gold); }
.kicker--bare::before{ display:none; }
.kicker--ink{ color:var(--ink-2); }
.kicker--ink::before{ background:var(--ink-3); }

.h-display{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(2.75rem, 7vw, 5.5rem);
  letter-spacing:-.02em; line-height:1.03;
}
.h-1{ font-family:var(--serif); font-weight:700; font-size:clamp(2.25rem, 4.5vw, 3.75rem); letter-spacing:-.02em; }
.h-2{ font-family:var(--serif); font-weight:700; font-size:clamp(1.75rem, 3.2vw, 2.6rem); letter-spacing:-.015em; }
.h-3{ font-family:var(--serif); font-weight:700; font-size:clamp(1.3rem, 2.2vw, 1.65rem); }
.h-coll{
  font-family:var(--coll); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; line-height:1.1;
}
.lede{ font-size:clamp(1.05rem, 1.6vw, 1.25rem); color:var(--ink-2); max-width:44rem; }
.arabic{
  font-family:var(--arabic); direction:rtl; unicode-bidi:isolate;
  font-feature-settings:"liga","calt";
}
.arabic--accent{
  color:var(--gold); font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.4;
}
.muted{ color:var(--ink-2); }
.small{ font-size:.875rem; }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  min-height:3rem; padding:.8rem 2.2rem;
  font-family:var(--coll); font-weight:500; font-size:.85rem;
  letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--ink); color:var(--ink);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  cursor:pointer; text-align:center;
}
.btn:hover{ background:var(--ink); color:var(--bone); }
.btn:active{ transform:scale(.985); }
.btn--solid{ background:var(--ink); color:var(--bone); }
.btn--solid:hover{ background:var(--night-2); border-color:var(--night-2); }
.btn--gold{ background:var(--gold); border-color:var(--gold); color:#FFF8EA; }
.btn--gold:hover{ background:#7A4D05; border-color:#7A4D05; color:#FFF8EA; }
.btn--ghost-light{ border-color:var(--cream); color:var(--cream); }
.btn--ghost-light:hover{ background:var(--cream); color:var(--ink); }
.btn--wide{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

.text-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--coll); font-size:.82rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  border-bottom:1px solid currentColor; padding-bottom:.2rem;
  transition:color var(--dur-fast) var(--ease-out); cursor:pointer;
}
.text-link:hover{ color:var(--gold); }

/* ------------------------------------------------------- placeholder media */
/* Gray labeled frames — every one of these swaps for real photography.      */
.ph{
  position:relative; width:100%; overflow:hidden;
  background:
    linear-gradient(135deg, rgba(27,23,18,.035) 0%, rgba(27,23,18,0) 45%),
    #DFD9CB;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.ph::before{
  content:""; position:absolute; inset:.75rem;
  border:1px dashed rgba(27,23,18,.22);
  pointer-events:none;
}
.ph__label{
  position:relative; z-index:1; max-width:80%;
  text-align:center; padding:1rem;
  font-family:var(--coll); font-weight:500; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:#6E6754;
  line-height:1.8;
}
.ph__label strong{ display:block; font-size:.78rem; color:#55503F; }
.ph--dark{ background:linear-gradient(135deg, rgba(240,233,216,.05), rgba(240,233,216,0) 45%), #2A241A; border-color:#3B3323; }
.ph--dark::before{ border-color:rgba(240,233,216,.28); }
.ph--dark .ph__label{ color:#A79C82; }
.ph--dark .ph__label strong{ color:#C9BFA6; }

/* Drop-in photo layer: the <img> sits on top of the labeled placeholder.
   Add a file at the img's src and it appears; if the file is missing the
   img removes itself (onerror) and the placeholder shows through — so you
   can add photos one at a time without broken-image icons anywhere. */
.ph > img{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover; display:block;
}
.ph:has(> img){ border-color:transparent; }
.ph:has(> img)::before{ display:none; }

/* product mockups are garments on white — show the full garment on a clean
   white tile (contain, never crop), the standard premium e-comm treatment */
.ph--product{ background:#fff; border-color:var(--line-soft); }
.ph--product > img{ object-fit:contain; }
.ph--product:has(> img){ border-color:var(--line-soft); }

/* Drop-in video layer (About brand film) — same idea as the photo layer.
   Add images/pages/about-story.mp4 (+ .jpg poster) and it plays; until then
   the play glyph + label show over the dark frame. */
.ph-video{ flex-direction:column; gap:1.25rem; }
.ph-video__el{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover; display:block;
}
.ph-video__play{
  position:relative; z-index:3;
  width:4rem; height:4rem; color:var(--cream); opacity:.9; pointer-events:none;
}
.ph-video.has-video{ border-color:transparent; }
.ph-video.has-video::before,
.ph-video.has-video .ph-video__play,
.ph-video.has-video .ph__label{ display:none; }

/* aspect helpers */
.r-hero{ aspect-ratio:16/8; min-height:32rem; }
.r-portrait{ aspect-ratio:3/4; }
.r-square{ aspect-ratio:1/1; }
.r-landscape{ aspect-ratio:4/3; }
.r-wide{ aspect-ratio:16/9; }
.r-tall{ aspect-ratio:2/3; }

/* ----------------------------------------------------------- announcement */
.announcement{
  position:relative; z-index:calc(var(--z-header) + 1);
  background:var(--night); color:var(--cream);
  text-align:center; overflow:hidden;
}
.announcement__track{ position:relative; height:2.5rem; }
.announcement__item{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  gap:.6rem; padding-inline:3rem;
  font-family:var(--coll); font-size:.72rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  opacity:0; transform:translateY(.5rem);
  transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.announcement__item.is-active{ opacity:1; transform:translateY(0); }
.announcement__item .arabic{ font-size:.95rem; letter-spacing:0; color:var(--gold-soft); }

/* ----------------------------------------------------------------- header */
/* the JS mount wrapper is the sticky element — it holds announcement + header;
   top offset equals the announcement height so the bar scrolls away first */
#site-header{ position:sticky; top:-2.5rem; z-index:var(--z-header); }
.site-header{
  position:relative; z-index:var(--z-header);
  background:rgba(246,242,233,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled{ box-shadow:0 1px 24px rgba(27,23,18,.08); }
.site-header__inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem; min-height:5.75rem;
}
.site-header__nav{ display:flex; gap:2rem; }
.site-header__nav a, .nav-link{
  font-family:var(--coll); font-size:.8rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  padding:.5rem 0; position:relative;
}
.site-header__nav a::after{
  content:""; position:absolute; left:0; bottom:.1rem; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-med) var(--ease-out);
}
.site-header__nav a:hover::after, .site-header__nav a[aria-current="page"]::after{ transform:scaleX(1); }
.site-header__nav a[aria-current="page"]{ color:var(--gold); }
.site-header__nav a.nav--donate{ color:var(--gold); }

.brand{ text-align:center; display:inline-flex; align-items:center; justify-content:center; padding:.35rem .5rem; }
.brand__logo{ height:4.75rem; width:auto; display:block; }
.brand__arabic{
  display:block; font-family:var(--arabic); font-size:.95rem; line-height:1;
  color:var(--gold); margin-bottom:.15rem;
}
.brand__word{
  font-family:var(--coll); font-weight:500; font-size:1.05rem;
  letter-spacing:.34em; text-transform:uppercase; margin-right:-.34em;
  white-space:nowrap;
}
.brand__sub{
  display:block; font-family:var(--serif); font-style:italic; font-size:.8rem;
  color:var(--ink-2); letter-spacing:.08em; white-space:nowrap;
}

.site-header__actions{ display:flex; justify-content:flex-end; align-items:center; gap:.35rem; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; color:var(--ink);
  transition:color var(--dur-fast) var(--ease-out);
  position:relative; cursor:pointer;
}
.icon-btn:hover{ color:var(--gold); }
.icon-btn svg{ width:1.25rem; height:1.25rem; }
.cart-count{
  position:absolute; top:.35rem; right:.3rem;
  min-width:1rem; height:1rem; padding:0 .2rem; border-radius:999px;
  background:var(--gold); color:#FFF8EA;
  font-family:var(--coll); font-size:.6rem; font-weight:500; line-height:1rem;
  text-align:center;
}
.menu-toggle{ display:none; }

/* mobile menu */
@media (max-width: 900px){
  .site-header__inner{ grid-template-columns:auto 1fr auto; }
  .site-header__nav{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .brand__word{ font-size:.92rem; letter-spacing:.28em; margin-right:-.28em; }
}
@media (max-width: 560px){
  .site-header__actions a.icon-btn,
  .site-header__actions button[aria-label^="Search"]{ display:none; } /* search + account fold into menu */
  .brand__word{ font-size:.8rem; letter-spacing:.22em; margin-right:-.22em; }
  .brand__sub{ font-size:.68rem; }
  .brand__arabic{ font-size:.82rem; }
  .site-header__inner{ gap:.25rem; }
  #site-header .brand__logo{ height:3.75rem; }
}
.mobile-menu{
  position:fixed; inset:0; z-index:var(--z-drawer);
  visibility:hidden; pointer-events:none;
}
.mobile-menu.is-open{ visibility:visible; pointer-events:auto; }
.mobile-menu__scrim{
  position:absolute; inset:0; background:rgba(22,18,12,.55);
  opacity:0; transition:opacity var(--dur-med) var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__scrim{ opacity:1; }
.mobile-menu__panel{
  position:absolute; top:0; bottom:0; left:0; width:min(22rem, 88vw);
  background:var(--bone); border-right:1px solid var(--line);
  padding:1.5rem; overflow-y:auto;
  display:flex; flex-direction:column; gap:.25rem;
  transform:translateX(-102%);
  transition:transform var(--dur-med) var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__panel{ transform:translateX(0); }
.mobile-menu__panel .brand{ text-align:left; justify-content:flex-start; padding-left:0; margin-bottom:1.5rem; }
.mobile-menu__panel .brand__logo{ height:4rem; }
.mobile-menu__panel a{
  font-family:var(--coll); font-size:1rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.85rem 0; border-bottom:1px solid var(--line-soft);
}
.mobile-menu__panel a.nav--donate{ color:var(--gold); }
.mobile-menu__foot{ margin-top:auto; padding-top:2rem; color:var(--ink-2); font-size:.85rem; }
.mobile-menu__close{ align-self:flex-end; }

/* ------------------------------------------------------------ cart drawer */
.cart-drawer{ position:fixed; inset:0; z-index:var(--z-drawer); visibility:hidden; pointer-events:none; }
.cart-drawer.is-open{ visibility:visible; pointer-events:auto; }
.cart-drawer__scrim{
  position:absolute; inset:0; background:rgba(22,18,12,.55);
  opacity:0; transition:opacity var(--dur-med) var(--ease-out);
}
.cart-drawer.is-open .cart-drawer__scrim{ opacity:1; }
.cart-drawer__panel{
  position:absolute; top:0; bottom:0; right:0; width:min(26rem, 92vw);
  background:var(--bone); border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform var(--dur-med) var(--ease-out);
}
.cart-drawer.is-open .cart-drawer__panel{ transform:translateX(0); }
.cart-drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 1.5rem; border-bottom:1px solid var(--line-soft);
}
.cart-drawer__body{ flex:1; overflow-y:auto; padding:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.cart-drawer__foot{ padding:1.5rem; border-top:1px solid var(--line-soft); }

/* --------------------------------------------------- shopify placeholders */
.shopify-slot{
  border:1px dashed var(--gold-soft);
  background:rgba(185,138,46,.06);
  padding:1rem 1.25rem;
  font-family:var(--coll); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); line-height:1.9;
}
.shopify-slot strong{ display:block; font-size:.78rem; }

/* ------------------------------------------------------------------- hero */
.hero{ position:relative; overflow:hidden; background:var(--night); color:var(--cream); }
.hero__media{ position:absolute; inset:0; }
.hero__media .ph{ position:absolute; inset:0; height:100%; border:0; }
.hero__media .ph::before{ inset:1.25rem; }
.hero__media .ph__label{
  position:absolute; top:2.5rem; right:2.5rem; max-width:22rem;
  text-align:right; padding:0;
}
@media (max-width:720px){ .hero__media .ph__label{ display:none; } }
.hero__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:68% center;
}
/* darkens the left/lower area where the left-aligned text sits, while
   letting the subject on the right stay clear */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(22,18,12,.86) 0%, rgba(22,18,12,.58) 34%, rgba(22,18,12,.18) 66%, rgba(22,18,12,.04) 100%),
    linear-gradient(to top, rgba(22,18,12,.55) 0%, rgba(22,18,12,.12) 45%, rgba(22,18,12,.22) 100%);
}
@media (max-width:720px){
  .hero__img{ object-position:72% center; }
  .hero__scrim{
    background:linear-gradient(to top, rgba(22,18,12,.8) 0%, rgba(22,18,12,.35) 55%, rgba(22,18,12,.5) 100%);
  }
}
.hero__content{
  position:relative; z-index:2;
  min-height:min(calc(100dvh - 16rem), 50rem);
  display:flex; flex-direction:column; justify-content:center;
  padding-block:var(--sp-6) var(--sp-6);
}
.hero__arabic{
  font-family:var(--arabic); color:var(--gold-soft);
  font-size:clamp(1.5rem, 3vw, 2.4rem); margin-bottom:1rem;
}
.hero__title{ max-width:16ch; color:var(--cream); }
.hero__title em{ font-style:italic; color:var(--gold-soft); }
.hero__sub{ max-width:38rem; margin-top:1.25rem; color:var(--cream-2); font-size:1.05rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.25rem; }
.hero__meta{
  display:flex; gap:2rem; margin-top:3rem; padding-top:1.5rem;
  border-top:1px solid rgba(240,233,216,.18);
  font-family:var(--coll); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cream-2); flex-wrap:wrap;
}

/* ------------------------------------------------------------ trust strip */
.truststrip{ border-block:1px solid var(--line-soft); background:var(--bone-2); }
.truststrip__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line-soft);
}
.truststrip__item{
  background:var(--bone-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem;
  padding:3.25rem 1.5rem; text-align:center;
}
.truststrip__item svg{ width:2.75rem; height:2.75rem; color:var(--gold); flex:none; stroke-width:1.4; }
.truststrip__item span{
  font-family:var(--coll); font-size:.92rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
}
@media (max-width:720px){
  .truststrip__grid{ grid-template-columns:1fr; }
  .truststrip__item{ padding:2.5rem 1.25rem; }
}

/* --------------------------------------------------------------- sections */
.section{ padding-block:var(--sp-7); }
.section--tight{ padding-block:var(--sp-6); }
.section--sand{ background:var(--sand); }
.section--dark{ background:var(--night); color:var(--cream); }
.section--dark .kicker{ color:var(--gold-soft); }
.section--dark .kicker::before{ background:var(--gold-soft); }
.section--dark .lede,.section--dark .muted{ color:var(--cream-2); }
.section-head{ margin-bottom:var(--sp-5); max-width:56rem; }
.section-head .h-1,.section-head .h-2{ margin-top:1rem; }
.section-head--split{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  max-width:none; flex-wrap:wrap;
}

/* --------------------------------------------------------------- country row */
.country-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;
}
@media (max-width:1000px){ .country-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .country-grid{ grid-template-columns:1fr; } }
.country-card{ display:block; position:relative; overflow:hidden; }
.country-card .ph{ transition:transform var(--dur-slow) var(--ease-out); }
.country-card:hover .ph{ transform:scale(1.03); }
.country-card__body{ padding:1.25rem 0 0; }
.country-card__accent{ display:block; width:2.75rem; height:3px; margin-bottom:.9rem; }
.country-card__name{ font-family:var(--serif); font-size:1.5rem; font-weight:700; }
.country-card__arabic{ font-family:var(--arabic); color:var(--ink-2); font-size:1.05rem; margin-top:.1rem; }
.country-card__line{ color:var(--ink-2); font-size:.9rem; margin-top:.5rem; }
.country-card__cta{
  margin-top:.9rem; font-family:var(--coll); font-size:.75rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:.4rem;
}
.country-card__cta::after{ content:"→"; transition:transform var(--dur-fast) var(--ease-out); }
.country-card:hover .country-card__cta::after{ transform:translateX(4px); }

/* ---------------------------------------------------------- product cards */
.product-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem 1.25rem;
}
@media (max-width:1100px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){ .product-grid{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; } }
@media (max-width:420px){ .product-grid{ grid-template-columns:1fr; } }

.product-card{ display:block; position:relative; }
.product-card__media{ position:relative; overflow:hidden; }
.product-card__media .ph{ transition:transform var(--dur-slow) var(--ease-out); }
.product-card:hover .product-card__media .ph{ transform:scale(1.03); }
.product-card__tag{
  position:absolute; top:.75rem; left:.75rem; z-index:2;
  font-family:var(--coll); font-size:.62rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream); padding:.3rem .6rem;
}
.product-card__body{ padding-top:1rem; }
.product-card__country{
  font-family:var(--coll); font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3);
}
.product-card__title{
  font-family:var(--serif); font-size:1.25rem; font-weight:700; margin-top:.25rem;
}
.product-card__type{ font-size:.85rem; color:var(--ink-2); margin-top:.1rem; }
.product-card__meta{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:.55rem; gap:1rem; flex-wrap:wrap;
}
.product-card__price{ font-family:var(--coll); font-weight:500; letter-spacing:.06em; }

.rating{ display:inline-flex; align-items:center; gap:.4rem; }
.rating__stars{ display:inline-flex; gap:1px; color:var(--gold); }
.rating__stars svg{ width:.8rem; height:.8rem; }
.rating__count{ font-size:.75rem; color:var(--ink-3); }

/* ------------------------------------------------------------ shop filters */
.filterbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  padding-block:1.25rem; margin-bottom:var(--sp-5);
  border-block:1px solid var(--line-soft);
}
.filterbar__group{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{
  font-family:var(--coll); font-size:.75rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.55rem 1.1rem; min-height:2.75rem;
  border:1px solid var(--line); color:var(--ink-2);
  display:inline-flex; align-items:center; gap:.5rem;
  transition:all var(--dur-fast) var(--ease-out); cursor:pointer;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--bone); }
.filterbar__count{ font-size:.85rem; color:var(--ink-3); }

/* ------------------------------------------------------------------- PDP */
.pdp{ padding-block:var(--sp-5) var(--sp-7); }
.pdp__layout{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem, 5vw, 5rem); align-items:start;
}
@media (max-width:900px){ .pdp__layout{ grid-template-columns:1fr; } }

.pdp__gallery{ display:grid; gap:1rem; position:sticky; top:6rem; }
@media (max-width:900px){ .pdp__gallery{ position:static; } }
.pdp__gallery-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

.pdp__breadcrumb{
  font-family:var(--coll); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3);
  display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.5rem;
}
.pdp__breadcrumb a:hover{ color:var(--gold); }
.pdp__country{ font-family:var(--coll); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; }
.pdp__title{ font-family:var(--serif); font-weight:700; font-size:clamp(2rem,3.5vw,2.9rem); margin-top:.5rem; }
.pdp__arabic{ font-family:var(--arabic); color:var(--gold); font-size:1.35rem; margin-top:.4rem; }
.pdp__rating{ margin-top:.9rem; }
.pdp__price{
  font-family:var(--coll); font-size:1.35rem; font-weight:500; letter-spacing:.05em;
  margin-top:1.1rem; display:flex; align-items:baseline; gap:.75rem;
}
.pdp__price .compare{ font-size:.95rem; color:var(--ink-3); text-decoration:line-through; }
.pdp__story{ margin-top:1.4rem; color:var(--ink-2); font-size:.98rem; }
.pdp__story em{ font-family:var(--serif); font-style:italic; font-size:1.05em; }

.opt-label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--coll); font-size:.75rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2);
  margin:1.6rem 0 .6rem;
}
.opt-label a{ color:var(--gold); border-bottom:1px solid currentColor; text-transform:none; letter-spacing:.05em; }
.size-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.size-btn{
  min-width:3rem; min-height:3rem; padding:.4rem .9rem;
  border:1px solid var(--line); font-family:var(--coll); font-size:.85rem;
  letter-spacing:.08em; color:var(--ink-2);
  transition:all var(--dur-fast) var(--ease-out); cursor:pointer;
}
.size-btn:hover{ border-color:var(--ink); color:var(--ink); }
.size-btn[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--bone); }

.qty{ display:inline-flex; border:1px solid var(--line); align-items:stretch; }
.qty button{
  width:3rem; min-height:3rem; display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-2); transition:color var(--dur-fast); cursor:pointer;
}
.qty button:hover{ color:var(--ink); }
.qty input{
  width:3.25rem; text-align:center; border:0; background:transparent;
  font-family:var(--coll); font-size:.95rem; -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.buy-row{ display:flex; gap:.75rem; margin-top:1.25rem; align-items:stretch; }
.buy-row .btn{ flex:1; }

.stock-note{
  display:flex; align-items:center; gap:.6rem;
  margin-top:1rem; font-size:.85rem; color:var(--ink-2);
}
.stock-note .dot{
  width:.5rem; height:.5rem; border-radius:50%; background:var(--success); flex:none;
  box-shadow:0 0 0 3px rgba(61,107,53,.15);
}
.delivery-note{ display:flex; gap:.6rem; margin-top:.5rem; font-size:.85rem; color:var(--ink-2); align-items:center; }
.delivery-note svg{ width:1rem; height:1rem; color:var(--ink-3); flex:none; }

.trust-badges{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); margin-top:1.75rem;
}
.trust-badges div{
  background:var(--bone); padding:.9rem 1rem;
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--coll); font-size:.7rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
}
.trust-badges svg{ width:1.1rem; height:1.1rem; color:var(--gold); flex:none; }

.pdp-accordion{ margin-top:1.75rem; border-top:1px solid var(--line-soft); }
.pdp-accordion details{ border-bottom:1px solid var(--line-soft); }
.pdp-accordion summary{
  list-style:none; cursor:pointer; padding:1.1rem 0;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--coll); font-size:.8rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
}
.pdp-accordion summary::-webkit-details-marker{ display:none; }
.pdp-accordion summary::after{ content:"+"; font-size:1.1rem; color:var(--ink-3); transition:transform var(--dur-fast); }
.pdp-accordion details[open] summary::after{ transform:rotate(45deg); }
.pdp-accordion .acc-body{ padding:0 0 1.25rem; color:var(--ink-2); font-size:.92rem; }

/* sticky add-to-cart */
.sticky-atc{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-sticky);
  background:rgba(246,242,233,.97); backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  transform:translateY(105%); transition:transform var(--dur-med) var(--ease-out);
  padding:.75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
}
.sticky-atc.is-visible{ transform:translateY(0); }
.sticky-atc__inner{
  max-width:var(--container); margin-inline:auto;
  display:flex; align-items:center; gap:1rem;
}
.sticky-atc__info{ min-width:0; }
.sticky-atc__title{
  font-family:var(--serif); font-weight:700; font-size:1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sticky-atc__price{ font-family:var(--coll); font-size:.8rem; color:var(--ink-2); letter-spacing:.06em; }
.sticky-atc select{
  min-height:3rem; border:1px solid var(--line); background:var(--bone);
  padding:.4rem 2rem .4rem .9rem; font-family:var(--coll); font-size:.85rem; cursor:pointer;
}
.sticky-atc .btn{ white-space:nowrap; }
.sticky-atc__spacer{ flex:1; }
@media (max-width:640px){
  .sticky-atc__spacer{ display:none; }
  .sticky-atc__inner{ flex-wrap:nowrap; }
  .sticky-atc__info{ flex:1; }
}

/* impact block on PDP */
.impact{
  border:1px solid var(--line); background:var(--bone-2);
  padding:clamp(1.5rem,3vw,2.5rem); margin-top:2rem;
}
.impact__head{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.impact__head svg{ width:1.5rem; height:1.5rem; color:var(--gold); }
.impact__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
  margin:1.5rem 0; padding-block:1.25rem; border-block:1px solid var(--line-soft);
}
@media (max-width:560px){ .impact__stats{ grid-template-columns:1fr; } }
.impact__stat strong{
  display:block; font-family:var(--serif); font-size:1.75rem; font-weight:700; color:var(--gold);
}
.impact__stat span{ font-size:.8rem; color:var(--ink-2); }
.impact__stat--hero strong{ font-size:clamp(2.4rem,5vw,3.25rem); letter-spacing:-.01em; line-height:1; }
.impact__stat--hero span{ font-size:.9rem; margin-top:.35rem; display:block; }

/* ----------------------------------------------------------- carousels */
.carousel{ position:relative; }
.carousel__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(16rem, 22rem);
  gap:1.25rem; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  padding-bottom:2rem; scrollbar-width:thin;
}
.carousel__track > *{ scroll-snap-align:start; }
.carousel__nav{ display:flex; gap:.5rem; }
.carousel__btn{
  width:3rem; height:3rem; border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  transition:all var(--dur-fast) var(--ease-out); cursor:pointer;
}
.carousel__btn:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.carousel__btn svg{ width:1rem; height:1rem; }

/* ---------------------------------------------------------------- reviews */
.review-card{
  border:1px solid var(--line-soft); background:var(--bone);
  padding:1.75rem; display:flex; flex-direction:column; gap:.9rem;
}
.review-card__text{ font-family:var(--serif); font-size:1.1rem; line-height:1.55; }
.review-card__meta{ font-size:.8rem; color:var(--ink-3); margin-top:auto; }
.review-card__meta strong{ color:var(--ink-2); font-weight:500; }

/* ------------------------------------------------------------ blog cards */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem 1.5rem; }
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .blog-grid{ grid-template-columns:1fr; } }
.blog-card{ display:block; }
.blog-card .ph{ transition:transform var(--dur-slow) var(--ease-out); }
.blog-card:hover .ph{ transform:scale(1.02); }
.blog-card__body{ padding-top:1.1rem; }
.blog-card__cat{
  font-family:var(--coll); font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
.blog-card__title{ font-family:var(--serif); font-size:1.4rem; font-weight:700; margin-top:.4rem; line-height:1.25; }
.blog-card__excerpt{ color:var(--ink-2); font-size:.92rem; margin-top:.5rem; }
.blog-card__date{ font-size:.78rem; color:var(--ink-3); margin-top:.7rem; }

/* feature split (blog highlight, about rows) */
.feature-split{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center;
}
@media (max-width:860px){ .feature-split{ grid-template-columns:1fr; } }
.feature-split--rev > :first-child{ order:2; }
@media (max-width:860px){ .feature-split--rev > :first-child{ order:0; } }

/* --------------------------------------------------------------- gallery */
/* masonry via CSS columns — items pack tightly down each column,
   keeping their natural aspect ratios (no gaps between mixed heights) */
.lifestyle-grid{
  column-count:3;
  column-gap:1rem;
}
.lifestyle-grid > *{
  width:100%;
  margin-bottom:1rem;
  break-inside:avoid;
  -webkit-column-break-inside:avoid; /* older Safari */
}
@media (max-width:820px){
  .lifestyle-grid{ column-count:2; }
}
@media (max-width:520px){
  .lifestyle-grid{ column-count:1; }
}

/* -------------------------------------------------------------- newsletter */
.newsletter{
  text-align:center; max-width:38rem; margin-inline:auto;
}
.newsletter__form{
  display:flex; gap:.6rem; margin-top:1.75rem;
}
@media (max-width:520px){ .newsletter__form{ flex-direction:column; } }
.newsletter__form input[type="email"]{
  flex:1; min-height:3.25rem; padding:.6rem 1.1rem;
  border:1px solid var(--line); background:var(--bone);
  font-size:1rem;
}
.newsletter__form input[type="email"]::placeholder{ color:var(--ink-3); }
.newsletter__fine{ font-size:.78rem; color:var(--ink-3); margin-top:.9rem; }
.newsletter__success{
  display:none; margin-top:1.5rem; padding:1rem 1.25rem;
  border:1px solid var(--success); color:var(--success);
  font-size:.9rem;
}
.newsletter.is-done .newsletter__form{ display:none; }
.newsletter.is-done .newsletter__success{ display:block; }
.section--dark .newsletter__form input[type="email"]{
  background:transparent; border-color:rgba(240,233,216,.3); color:var(--cream);
}
.section--dark .newsletter__fine{ color:var(--cream-2); }

/* ------------------------------------------------------------ closing CTA */
.closing{
  text-align:center; padding-block:var(--sp-8);
  background:var(--night);
  color:var(--cream); position:relative; overflow:hidden;
}
.closing .arabic--accent{ font-size:clamp(1.8rem,4vw,3rem); color:var(--gold-soft); }
.closing__title{ margin-top:1.25rem; color:var(--cream); }
.closing__title em{ font-style:italic; color:var(--gold-soft); }
.closing p{ color:var(--cream-2); max-width:36rem; margin:1.25rem auto 0; }
.closing .btn{ margin-top:2.25rem; }

/* ----------------------------------------------------------------- forms */
.form-grid{ display:grid; gap:1.25rem; }
.form-field label{
  display:block; font-family:var(--coll); font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2);
  margin-bottom:.45rem;
}
.form-field .req{ color:var(--gold); }
.form-field input,.form-field textarea,.form-field select{
  width:100%; min-height:3.25rem; padding:.7rem 1rem;
  border:1px solid var(--line); background:var(--bone); font-size:1rem;
  transition:border-color var(--dur-fast);
}
.form-field textarea{ min-height:9rem; resize:vertical; }
.form-field input:focus,.form-field textarea:focus{ border-color:var(--ink); outline:none; }
.form-field .helper{ font-size:.78rem; color:var(--ink-3); margin-top:.4rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }

/* ----------------------------------------------------------------- footer */
.site-footer{ background:var(--night); color:var(--cream-2); }
.site-footer__top{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem 2rem;
  padding-block:var(--sp-6);
}
@media (max-width:960px){ .site-footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .site-footer__top{ grid-template-columns:1fr; } }
.site-footer .brand{ text-align:left; justify-content:flex-start; padding-left:0; }
.site-footer .brand__logo{ height:7rem; filter:brightness(0) invert(1); opacity:.92; }
.site-footer .brand__sub{ color:var(--cream-2); }
.site-footer__blurb{ font-size:.9rem; max-width:24rem; margin-top:1.25rem; }
.site-footer__arabic{ font-family:var(--arabic); color:var(--gold-soft); font-size:1.2rem; margin-top:1.25rem; }
.site-footer h4{
  font-family:var(--coll); font-size:.75rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--cream);
  margin-bottom:1.25rem;
}
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.site-footer ul a{ font-size:.9rem; transition:color var(--dur-fast); }
.site-footer ul a:hover{ color:var(--gold-soft); }
.site-footer__news input[type="email"]{
  width:100%; min-height:3rem; padding:.6rem 1rem; margin-bottom:.6rem;
  background:transparent; border:1px solid rgba(240,233,216,.3); color:var(--cream);
}
.site-footer__news input::placeholder{ color:rgba(240,233,216,.45); }
.site-footer__bottom{
  border-top:1px solid rgba(240,233,216,.14);
  padding-block:1.5rem;
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap;
  font-size:.78rem;
}
.site-footer__legal{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.site-footer__legal a:hover{ color:var(--gold-soft); }
.site-footer__social{ display:flex; gap:.4rem; }
.site-footer__social a{
  width:2.75rem; height:2.75rem; display:inline-flex; align-items:center; justify-content:center;
  color:var(--cream-2); transition:color var(--dur-fast);
}
.site-footer__social a:hover{ color:var(--gold-soft); }
.site-footer__social svg{ width:1.15rem; height:1.15rem; }

/* ------------------------------------------------------------- chat widget */
.chat-fab{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:var(--z-chat);
  width:3.5rem; height:3.5rem; border-radius:50%;
  background:var(--ink); color:var(--bone);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 30px rgba(27,23,18,.28);
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
  cursor:pointer;
}
.chat-fab:hover{ transform:translateY(-2px); background:var(--night-2); }
.chat-fab svg{ width:1.4rem; height:1.4rem; }
.chat-pop{
  position:fixed; right:1.25rem; bottom:5.5rem; z-index:var(--z-chat);
  width:min(20rem, calc(100vw - 2.5rem));
  background:var(--bone); border:1px solid var(--line);
  box-shadow:0 16px 48px rgba(27,23,18,.2);
  padding:1.25rem; display:none;
}
.chat-pop.is-open{ display:block; }
body.has-sticky-atc .chat-fab, body.has-sticky-atc .chat-pop{ bottom:6.5rem; }

/* ------------------------------------------------------------ page heroes */
.page-hero{ padding-block:var(--sp-6) var(--sp-5); }
.page-hero--rule{ border-bottom:1px solid var(--line-soft); }
.page-hero .h-display,.page-hero .h-1{ margin-top:1rem; }
.page-hero .lede{ margin-top:1.25rem; }

/* editorial chapter (collection page) */
.chapter{ padding-block:var(--sp-6); border-top:1px solid var(--line-soft); }
.chapter__index{
  font-family:var(--coll); font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3);
}
.chapter__grid{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2rem,4vw,4rem); margin-top:2rem; align-items:start;
}
@media (max-width:860px){ .chapter__grid{ grid-template-columns:1fr; } }
.chapter__palette{ display:flex; gap:.4rem; margin-top:1.25rem; }
.chapter__palette span{ width:2rem; height:2rem; border:1px solid rgba(27,23,18,.12); }
.chapter__products{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media (max-width:480px){ .chapter__products{ grid-template-columns:1fr; } }

/* stats row (about / donate) */
.stat-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
@media (max-width:820px){ .stat-row{ grid-template-columns:1fr 1fr; } }
.stat-row > div{ background:var(--bone); padding:2rem 1.5rem; }
.stat-row strong{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.9rem,3vw,2.6rem); color:var(--gold);
}
.stat-row span{ font-size:.85rem; color:var(--ink-2); }
.section--dark .stat-row{ background:rgba(240,233,216,.14); border-color:rgba(240,233,216,.14); }
.section--dark .stat-row > div{ background:var(--night); }
.section--dark .stat-row span{ color:var(--cream-2); }

/* donate campaign cards */
.campaign-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width:820px){ .campaign-grid{ grid-template-columns:1fr; } }
.campaign-card{ border:1px solid var(--line); background:var(--bone); display:flex; flex-direction:column; }
.campaign-card__body{ padding:1.75rem; display:flex; flex-direction:column; gap:.9rem; flex:1; }
.campaign-card__accent{ height:3px; }
.campaign-card .btn{ align-self:flex-start; margin-top:auto; }

/* article */
.article{ max-width:44rem; margin-inline:auto; }
.article > p{ font-size:1.05rem; color:#3E392C; }
.article h2{ font-family:var(--serif); font-size:1.9rem; margin:2.5rem 0 1rem; }
.article blockquote{
  margin:2.5rem 0; padding:0 0 0 1.75rem; border-left:2px solid var(--gold);
  font-family:var(--serif); font-style:italic; font-size:1.35rem; line-height:1.5; color:var(--ink);
}
.article .article-arabic{
  text-align:center; font-family:var(--arabic); font-size:1.6rem; color:var(--gold);
  margin:2.5rem 0;
}
.article figure{ margin:2.5rem 0; }
.article figcaption{ font-size:.78rem; color:var(--ink-3); margin-top:.6rem; text-transform:uppercase; letter-spacing:.12em; font-family:var(--coll); }

/* legal pages */
.legal h2{ font-family:var(--serif); font-size:1.5rem; margin:2.25rem 0 .75rem; }
.legal p, .legal li{ color:var(--ink-2); font-size:.95rem; }

/* ------------------------------------------------------------- animations */
[data-reveal]{
  opacity:0; transform:translateY(1.75rem);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}
[data-reveal].is-revealed{ opacity:1; transform:none; }

.hero [data-reveal]:not(.is-revealed){ transform:translateY(2.5rem); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
}