/* ============================================================
   PERSIAN FOLIO — Design System
   A private archive of original historical documents, royal
   manuscripts, autograph letters and rare photographs.
   Brand: Persian Folio · by Royal Art Heritage
   ============================================================ */

:root {
  /* ---------- Type scale (fluid clamp) ---------- */
  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --text-sm:   clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  --text-base: clamp(1.05rem, 1rem + 0.2vw, 1.15rem);
  --text-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --text-xl:   clamp(1.55rem, 1.3rem + 1.1vw, 2.2rem);
  --text-2xl:  clamp(2.1rem, 1.5rem + 2.4vw, 3.6rem);
  --text-3xl:  clamp(2.6rem, 1.4rem + 3.6vw, 5rem);
  --text-hero: clamp(3rem, 1rem + 6vw, 7rem);

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  /* ---------- Radius / shadow / motion ---------- */
  --radius-sm: 0.25rem; --radius-md: 0.4rem; --radius-lg: 0.6rem; --radius-full: 9999px;
  --transition-interactive: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-gold: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Content widths ---------- */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1240px;
  --content-full: 100%;

  /* ---------- Fonts ---------- */
  --font-display: 'Noto Naskh Arabic', 'Amiri', 'Times New Roman', serif;
  --font-body: 'Vazirmatn', Tahoma, sans-serif;
  --font-brand: 'Cormorant Garamond', Georgia, serif; /* Latin wordmark only */
}

/* ================= ENGLISH TYPOGRAPHY OVERRIDE ================= */
html[lang="en"] {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { font-weight: 700; letter-spacing: -0.01em; }

/* ================= LIGHT THEME — "Archive Day" ================= */
:root, [data-theme='light'] {
  --color-bg: #F1E8D4;
  --color-surface: #FBF6E8;
  --color-surface-2: #EDE3CC;
  --color-surface-offset: #E7DBBE;
  --color-divider: color-mix(in oklab, #1A1816 12%, transparent);
  --color-border: color-mix(in oklab, #1A1816 16%, transparent);

  --color-text: #1A1816;
  --color-text-muted: #4A4339;
  --color-text-faint: color-mix(in oklab, #1A1816 45%, transparent);
  --color-text-inverse: #F6EEDC;

  --color-primary: #8E6A2C;
  --color-primary-hover: #7A5921;
  --color-primary-active: #5C4218;
  --color-primary-highlight: color-mix(in oklab, #B08B43 20%, #F1E8D4);

  --color-lapis: #1E3A5F;
  --color-lapis-highlight: color-mix(in oklab, #1E3A5F 16%, #F1E8D4);
  --color-crimson: #7A2030;
  --color-crimson-highlight: color-mix(in oklab, #7A2030 14%, #F1E8D4);

  --shadow-sm: 0 1px 2px rgba(26,24,22,0.08);
  --shadow-md: 0 8px 24px rgba(26,24,22,0.10);
  --shadow-lg: 0 20px 48px rgba(26,24,22,0.16);

  --hero-grad: radial-gradient(circle at 50% 0%, #FBF6E8 0%, #F1E8D4 62%, #EDE3CC 100%);
}

/* ================= DARK THEME — "Archive Night" ================= */
[data-theme='dark'] {
  --color-bg: #14120F;
  --color-surface: #1A1816;
  --color-surface-2: #211E19;
  --color-surface-offset: #262220;
  --color-divider: color-mix(in oklab, #C9A35A 16%, transparent);
  --color-border: color-mix(in oklab, #C9A35A 24%, transparent);

  --color-text: #EFE6D2;
  --color-text-muted: #C9BFA8;
  --color-text-faint: color-mix(in oklab, #EFE6D2 45%, transparent);
  --color-text-inverse: #1A1816;

  --color-primary: #C9A35A;
  --color-primary-hover: #DDBB77;
  --color-primary-active: #E6C878;
  --color-primary-highlight: color-mix(in oklab, #C9A35A 20%, #14120F);

  --color-lapis: #5C87B4;
  --color-lapis-highlight: color-mix(in oklab, #5C87B4 20%, #14120F);
  --color-crimson: #C15A6C;
  --color-crimson-highlight: color-mix(in oklab, #C15A6C 18%, #14120F);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 56px rgba(0,0,0,0.6);

  --hero-grad: radial-gradient(circle at 50% 0%, #1D1A16 0%, #14120F 65%, #100E0C 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #14120F; --color-surface: #1A1816; --color-surface-2: #211E19;
    --color-surface-offset: #262220;
    --color-divider: color-mix(in oklab, #C9A35A 16%, transparent);
    --color-border: color-mix(in oklab, #C9A35A 24%, transparent);
    --color-text: #EFE6D2; --color-text-muted: #C9BFA8; --color-text-faint: color-mix(in oklab, #EFE6D2 45%, transparent);
    --color-text-inverse: #1A1816;
    --color-primary: #C9A35A; --color-primary-hover: #DDBB77; --color-primary-active: #E6C878;
    --color-primary-highlight: color-mix(in oklab, #C9A35A 20%, #14120F);
    --color-lapis: #5C87B4; --color-crimson: #C15A6C;
    --hero-grad: radial-gradient(circle at 50% 0%, #1D1A16 0%, #14120F 65%, #100E0C 100%);
  }
}

/* ============================== LAYOUT ============================== */
.container { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-6); }
.container-narrow { width: 100%; max-width: var(--content-narrow); margin-inline: auto; padding-inline: var(--space-6); }
.container-default { width: 100%; max-width: var(--content-default); margin-inline: auto; padding-inline: var(--space-6); }

section { padding-block: clamp(var(--space-16), 8vw, var(--space-32)); }
.section-tight { padding-block: clamp(var(--space-10), 5vw, var(--space-16)); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.14em; color: var(--color-primary); text-transform: none;
}
.eyebrow::before { content: ''; display: inline-block; width: 22px; height: 1px; background: var(--color-primary); }

h1, h2, h3, .font-display { font-family: var(--font-display); font-weight: 600; color: var(--color-text); }
.font-body-heading { font-family: var(--font-body); font-weight: 700; }

.section-title { font-size: var(--text-2xl); margin-block-end: var(--space-4); }
.section-title.small { font-size: var(--text-xl); }
.section-lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 60ch; font-weight: 400; }
.section-head { margin-block-end: var(--space-12); }
.section-head.center { text-align: center; margin-inline: auto; }
.section-head.center .section-lede { margin-inline: auto; }

.rule { border: none; height: 1px; background: var(--color-divider); }
.rule.gold { background: linear-gradient(90deg, transparent, var(--color-primary), transparent); height: 1px; }

/* ============================== BUTTONS ============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  letter-spacing: 0.02em; white-space: nowrap;
}
.btn-primary { background: var(--color-text); color: var(--color-text-inverse); border-color: var(--color-text); }
[data-theme='dark'] .btn-primary { background: var(--color-primary); color: #14120F; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary); border-color: var(--color-primary); color: #14120F; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { border-color: var(--color-border); color: var(--color-text); background: transparent; }
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn-block { width: 100%; }

/* ============================== HEADER ============================== */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--color-divider);
  transition: transform 0.3s var(--ease-gold), box-shadow 0.3s var(--ease-gold);
}
.site-header.header--hidden { transform: translateY(-100%); }
.site-header.header--scrolled { box-shadow: var(--shadow-sm); }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-4); }

.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-text); }
.brand-mark { flex-shrink: 0; color: var(--color-primary); }
.brand-mark--img img { display: block; width: 42px; height: 42px; border-radius: var(--radius-md); object-fit: cover; box-shadow: var(--shadow-sm); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; direction: ltr; text-align: start; }
.brand-name { font-family: var(--font-brand); font-size: 1.45rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-text); white-space: nowrap; }
.brand-sub { font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-faint); }

.site-nav { display: flex; align-items: center; gap: var(--space-8); }
.site-nav a { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); text-decoration: none; position: relative; padding-block: var(--space-1); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-text); }
.site-nav a[aria-current="page"]::after { content: ''; position: absolute; inset-inline: 0; block-size: 1px; inset-block-end: -6px; background: var(--color-primary); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); color: var(--color-text-muted);
}
[data-theme='light'] .theme-toggle { border-color: var(--color-primary); color: var(--color-primary); }
[data-theme='dark'] .theme-toggle { border-color: rgba(239,230,210,0.18); color: rgba(239,230,210,0.62); }
.theme-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); }

.lang-switch {
  font-family: var(--font-brand); direction: ltr; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.03em; padding: 0.4rem 0.85rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-full); color: var(--color-text-muted); text-decoration: none;
  white-space: nowrap; line-height: 1;
}
.lang-switch:hover { color: var(--color-primary); border-color: var(--color-primary); }
html[lang="en"] .lang-switch { font-family: var(--font-display); }
.mobile-nav .lang-switch { align-self: flex-start; margin-block: var(--space-2) var(--space-6); }

.nav-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); align-items: center; justify-content: center; color: var(--color-text); }

/* ============================== HERO ============================== */
.hero { position: relative; overflow: hidden; padding-block: clamp(var(--space-20), 14vw, 9rem) clamp(var(--space-16), 10vw, var(--space-24)); background: var(--hero-grad); }
.hero::before {
  content: ''; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in oklab, var(--color-primary) 40%, transparent) 0.6px, transparent 0.6px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.hero-inner { position: relative; z-index: 1; display: grid; gap: var(--space-10); text-align: center; justify-items: center; }
.hero-seal { width: clamp(72px, 9vw, 108px); color: var(--color-primary); margin-block-end: var(--space-2); }
.hero-eyebrow { font-family: var(--font-brand); direction: ltr; font-size: var(--text-sm); letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-text-faint); }
.hero h1 { font-size: var(--text-hero); line-height: 1.18; max-width: 16ch; }
.hero-sub { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 46ch; font-weight: 400; }
.hero-ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; margin-block-start: var(--space-4); }
.hero-metarule { display: flex; align-items: center; gap: var(--space-4); margin-block-start: var(--space-8); color: var(--color-text-faint); font-size: var(--text-xs); letter-spacing: 0.08em; }
.hero-metarule span { display: flex; align-items: center; gap: var(--space-2); }
.hero-metarule .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary); }

/* ============================== TRUST STRIP ============================== */
.trust-strip { border-block: 1px solid var(--color-divider); background: var(--color-surface); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); padding-block: var(--space-8); }
.trust-item { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; text-align: center; }
.trust-item svg { color: var(--color-primary); width: 26px; height: 26px; }
.trust-item strong { font-size: var(--text-sm); font-weight: 600; }
.trust-item span { font-size: var(--text-xs); color: var(--color-text-faint); }

/* ============================== COLLECTION CARDS ============================== */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.cat-card {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); text-decoration: none; color: var(--color-text);
  position: relative; overflow: hidden;
}
.cat-card::after { content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 3px; block-size: 100%; background: var(--color-primary); transform: scaleY(0); transform-origin: top; transition: transform 0.4s var(--ease-gold); }
.cat-card:hover::after { transform: scaleY(1); }
.cat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cat-card .cat-icon { width: 46px; height: 46px; color: var(--color-primary); }
.cat-card h3 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 700; }
.cat-card p { font-size: var(--text-sm); color: var(--color-text-muted); }
.cat-card .cat-era { margin-block-start: auto; font-size: var(--text-xs); direction: ltr; text-align: end; letter-spacing: 0.06em; color: var(--color-text-faint); border-block-start: 1px solid var(--color-divider); padding-block-start: var(--space-3); }
.cat-card .cat-link { font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); display: inline-flex; align-items: center; gap: var(--space-1); }

/* ============================== PROVENANCE (DARK FEATURE) ============================== */
.provenance-feature { background: #14120F; color: #EFE6D2; position: relative; overflow: hidden; }
.provenance-feature .container { position: relative; z-index: 1; }
.provenance-feature .eyebrow { color: #C9A35A; }
.provenance-feature .eyebrow::before { background: #C9A35A; }
.provenance-feature h2 { color: #F6EEDC; }
.provenance-feature .section-lede { color: #C9BFA8; }
.provenance-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-block-start: var(--space-12); }
.provenance-step { padding: var(--space-6); border: 1px solid rgba(201,163,90,0.24); border-radius: var(--radius-md); background: rgba(255,255,255,0.02); }
.provenance-step .step-num { font-family: var(--font-brand); direction: ltr; font-size: var(--text-xl); color: #C9A35A; display: block; margin-block-end: var(--space-2); }
.provenance-step h4 { font-family: var(--font-body); font-weight: 700; margin-block-end: var(--space-2); color: #F6EEDC; font-size: var(--text-base); }
.provenance-step p { font-size: var(--text-sm); color: #B8AD93; }
.provenance-bg-star { position: absolute; inset-inline-end: -10%; inset-block-start: 50%; transform: translateY(-50%); width: 640px; opacity: 0.06; }

/* ============================== WHY / VALUES ============================== */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
.value-item h3 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 700; margin-block-end: var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.value-item h3 .num { font-family: var(--font-brand); direction: ltr; color: var(--color-primary); font-size: var(--text-lg); }
.value-item p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ============================== PULL QUOTE ============================== */
.pull-quote { text-align: center; max-width: 46ch; margin-inline: auto; }
.pull-quote p { font-family: var(--font-display); font-style: normal; font-size: var(--text-xl); line-height: 1.5; color: var(--color-text); }
.pull-quote cite { display: block; margin-block-start: var(--space-4); font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--color-text-faint); font-style: normal; }

/* ============================== CTA / INQUIRY BAND ============================== */
.cta-band { background: var(--color-surface-2); border-block: 1px solid var(--color-divider); text-align: center; }
.cta-band .container { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }

/* ============================== FORMS ============================== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--color-text-muted); }
.field input, .field select, .field textarea {
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text); font-size: var(--text-sm);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-primary); }
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: var(--text-xs); color: var(--color-text-faint); }
.form-success { display: none; text-align: center; padding: var(--space-10); border: 1px dashed var(--color-primary); border-radius: var(--radius-md); }
.form-success.visible { display: block; }
.form-success svg { width: 40px; height: 40px; color: var(--color-primary); margin-inline: auto; margin-block-end: var(--space-4); }

/* ============================== FOOTER ============================== */
.site-footer { background: #14120F; color: #B8AD93; padding-block: var(--space-16) var(--space-8); }
.site-footer a { color: #D8C9A0; text-decoration: none; }
.site-footer a:hover { color: #F6EEDC; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-8); padding-block-end: var(--space-12); }
.footer-brand p { font-size: var(--text-sm); color: #9B9074; max-width: 34ch; margin-block-start: var(--space-4); }
.footer-col h5 { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: #C9A35A; margin-block-end: var(--space-4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col ul li { font-size: var(--text-sm); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); padding-block-start: var(--space-8); border-block-start: 1px solid rgba(201,163,90,0.16); font-size: var(--text-xs); color: #7C7259; }
.footer-bottom-brand { direction: ltr; }

/* ============================== PAGE HERO (interior pages) ============================== */
.page-hero { background: var(--color-surface-2); border-block-end: 1px solid var(--color-divider); padding-block: clamp(var(--space-16), 8vw, var(--space-24)) var(--space-12); text-align: center; }
.page-hero .eyebrow { justify-content: center; }
.page-hero h1 { font-size: var(--text-2xl); margin-block: var(--space-4); }
.page-hero p { color: var(--color-text-muted); max-width: 56ch; margin-inline: auto; font-size: var(--text-lg); }
.breadcrumb { font-size: var(--text-xs); color: var(--color-text-faint); display: flex; justify-content: center; gap: var(--space-2); margin-block-end: var(--space-4); }
.breadcrumb a { color: var(--color-text-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); }

/* ============================== COLLECTION PAGE ============================== */
.chapter-nav { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; padding-block: var(--space-8); border-block-end: 1px solid var(--color-divider); position: sticky; inset-block-start: 73px; z-index: 40; background: color-mix(in oklab, var(--color-bg) 92%, transparent); backdrop-filter: blur(10px); }
.chapter-nav a { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-muted); text-decoration: none; }
.chapter-nav a:hover, .chapter-nav a.active { color: var(--color-text-inverse); background: var(--color-primary); border-color: var(--color-primary); }

.chapter { border-block-end: 1px solid var(--color-divider); }
.chapter-head { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-12); align-items: end; margin-block-end: var(--space-12); }
.chapter-num { font-family: var(--font-brand); direction: ltr; font-size: var(--text-3xl); color: var(--color-primary-highlight); -webkit-text-stroke: 1px var(--color-primary); color: transparent; line-height: 1; }
.chapter-tag { display: inline-block; font-size: var(--text-xs); letter-spacing: 0.06em; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); margin-inline-end: var(--space-2); }
.chapter-tag.available { background: var(--color-lapis-highlight); color: var(--color-lapis); }
.chapter-tag.request { background: var(--color-crimson-highlight); color: var(--color-crimson); }

.item-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.item-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); display: flex; flex-direction: column; }
.item-figure { aspect-ratio: 4/5; background: var(--color-surface-2); display: flex; align-items: center; justify-content: center; padding: var(--space-8); position: relative; border-block-end: 1px solid var(--color-divider); }
.item-figure svg { width: 100%; height: 100%; }
.item-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.item-meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-xs); color: var(--color-text-faint); direction: ltr; }
.item-body h4 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 700; }
.item-body p { font-size: var(--text-sm); color: var(--color-text-muted); }
.item-status { margin-block-start: auto; padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-divider); display: flex; justify-content: space-between; align-items: center; }
.status-pill { font-size: var(--text-xs); font-weight: 600; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); }
.status-pill.available { background: var(--color-lapis-highlight); color: var(--color-lapis); }
.status-pill.request { background: var(--color-crimson-highlight); color: var(--color-crimson); }

/* ============================== PROCESS (about/provenance page) ============================== */
.process-list { display: flex; flex-direction: column; gap: 0; }
.process-row { display: grid; grid-template-columns: 90px 1fr; gap: var(--space-8); padding-block: var(--space-8); border-block-end: 1px solid var(--color-divider); }
.process-row:first-child { border-block-start: 1px solid var(--color-divider); }
.process-row .p-num { font-family: var(--font-brand); direction: ltr; font-size: var(--text-xl); color: var(--color-primary); }
.process-row h3 { font-size: var(--text-lg); margin-block-end: var(--space-2); font-family: var(--font-body); font-weight: 700; }
.process-row p { color: var(--color-text-muted); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); text-align: center; }
.stat-row strong { display: block; font-family: var(--font-brand); direction: ltr; font-size: var(--text-2xl); color: var(--color-primary); }
.stat-row span { font-size: var(--text-xs); color: var(--color-text-faint); letter-spacing: 0.04em; }

/* ============================== CONTACT PAGE ============================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-16); }
.contact-info-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-8); }
.contact-info-card h3 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 700; margin-block-end: var(--space-4); }
.contact-row { display: flex; gap: var(--space-3); align-items: flex-start; margin-block-end: var(--space-4); }
.contact-row svg { width: 20px; height: 20px; color: var(--color-primary); flex-shrink: 0; margin-block-start: 2px; }
.contact-row div p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.contact-row div strong { font-size: var(--text-sm); }

/* ============================== ANIMATION / REVEAL ============================== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease-gold), transform 0.7s var(--ease-gold); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 1080px) {
  .cat-grid, .item-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid, .values-grid { grid-template-columns: repeat(2, 1fr); }
  .provenance-steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .chapter-head { grid-template-columns: 1fr; gap: var(--space-4); }
  .two-col { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .header-actions .btn-ghost.btn-sm { display: none; }
  .brand-name { font-size: 1.1rem; }
  .brand-sub { font-size: 0.56rem; letter-spacing: 0.12em; }
  .header-actions { gap: var(--space-2); }
}

@media (max-width: 720px) {
  .cat-grid, .item-grid, .trust-grid, .values-grid, .provenance-steps { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hero h1 { font-size: clamp(2.4rem, 10vw, 3.6rem); }
  .process-row { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 200; background: var(--color-bg);
  display: flex; flex-direction: column; padding: var(--space-6);
  transform: translateX(100%); transition: transform 0.35s var(--ease-gold);
}
[dir="rtl"] .mobile-nav { transform: translateX(-100%); }
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-head { display: flex; justify-content: space-between; align-items: center; margin-block-end: var(--space-12); }
.mobile-nav a:not(.btn) { font-family: var(--font-display); font-size: var(--text-xl); padding-block: var(--space-4); border-block-end: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; }
.mobile-nav .btn { margin-block-start: var(--space-8); }