/* EMADULDIN GROUP | LUXURIA — Brand Identity (v0.1, simple base)
   Source: 02_Brand/Brand_Guidelines.md + Master_Prompts/01_Product_Infographic_Master_Prompt.md
   Hex values below are PROPOSED web equivalents of the named colours — TO CONFIRM with the owner. */

:root {
  --black: #0b0b0b;          /* Deep black / black marble */
  --marble: #151413;
  --gold: #b8955a;           /* Metallic gold — never yellow or neon */
  --champagne: #d8c39a;      /* Champagne gold — headings, frames */
  --ivory: #f3ece0;          /* Warm white / ivory — body text */
  --muted: #a39a8a;
  --line: rgba(184, 149, 90, 0.45);

  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", "Segoe UI", Arial, sans-serif;
  --arabic: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(216, 195, 154, 0.08), transparent 60%),
    radial-gradient(ellipse at 90% 100%, rgba(184, 149, 90, 0.06), transparent 55%),
    var(--black);
  color: var(--ivory);
  font-family: var(--sans);
  line-height: 1.6;
  padding: 32px 16px;
}

.frame {
  max-width: 960px;
  margin: 0 auto;
  border: 1px solid var(--line);
  outline: 1px solid rgba(184, 149, 90, 0.15);
  outline-offset: 6px;
  padding: 48px clamp(20px, 5vw, 56px);
  background: var(--marble);
}

.ar { font-family: var(--arabic); direction: rtl; }

/* Header */
header { text-align: center; padding-bottom: 40px; border-bottom: 1px solid var(--line); }

.logo-slot {
  width: 120px; height: 120px; margin: 0 auto 20px;
  border: 1px dashed var(--line);
  display: grid; place-items: center;
  font-size: 11px; color: var(--muted); letter-spacing: 0.1em;
}
.logo-slot img { max-width: 100%; max-height: 100%; }

.eyebrow { color: var(--gold); letter-spacing: 0.35em; font-size: 12px; text-transform: uppercase; }

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(48px, 10vw, 84px);
  letter-spacing: 0.12em;
  color: var(--champagne);
  margin: 8px 0;
}

.slogan { color: var(--gold); letter-spacing: 0.3em; font-size: 14px; }
.slogan-ar { color: var(--ivory); font-size: 18px; margin-top: 10px; }

/* Sections */
section { padding: 40px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: 0; }

h2 {
  font-family: var(--serif);
  color: var(--champagne);
  font-weight: 500;
  font-size: 26px;
  margin-bottom: 20px;
}
h2 .ar { font-size: 18px; color: var(--muted); margin-inline-start: 8px; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.card { border: 1px solid var(--line); padding: 18px; background: rgba(0, 0, 0, 0.35); }
.card .label { color: var(--gold); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; }
.card .value { margin-top: 6px; }

/* Colour swatches */
.swatch { height: 90px; border: 1px solid var(--line); margin-bottom: 10px; }
.code { color: var(--muted); font-size: 13px; }

/* Typography samples */
.type-serif { font-family: var(--serif); font-size: 32px; color: var(--champagne); }
.type-sans { font-family: var(--sans); font-size: 16px; }
.type-ar { font-family: var(--arabic); font-size: 22px; }

.note { color: var(--muted); font-size: 13px; margin-top: 14px; }
.tbc { color: var(--gold); font-weight: 600; }

footer { text-align: center; padding-top: 32px; color: var(--muted); font-size: 13px; }
footer strong { color: var(--champagne); font-family: var(--serif); letter-spacing: 0.2em; }

nav{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:22px;font-size:14px}
nav a,a{color:var(--gold);text-decoration:none} nav a:hover{color:var(--champagne)}
.lead{color:var(--ivory);font-size:17px;text-align:center;max-width:640px;margin:0 auto}
.lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.line{border:1px solid var(--line);padding:18px;text-align:center}
.line b{display:block;font-family:var(--arabic);color:var(--champagne);font-size:18px}
.line span{color:var(--muted);font-size:13px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.item{border:1px solid var(--line);background:#f3ece0;color:#26201a}
.item img{width:100%;aspect-ratio:4/3;object-fit:contain;display:block;background:#f3ece0}
.item .txt{background:var(--marble);color:var(--ivory);padding:12px 14px;font-family:var(--arabic);direction:rtl}
.item .code{color:var(--gold);font-family:var(--sans);direction:ltr;font-size:12px;letter-spacing:.1em}
.item .name{color:var(--champagne);font-size:15px;margin:4px 0}
.item .mat{color:var(--muted);font-size:12px}
.item .wa{display:inline-block;margin-top:8px;font-size:13px;border:1px solid var(--line);padding:4px 10px}
.cta{display:inline-block;border:1px solid var(--gold);padding:12px 26px;color:var(--champagne);letter-spacing:.15em;margin-top:18px}
.center{text-align:center} .small{color:var(--muted);font-size:12px}
.frame{max-width:1120px}