/* ==========================================================================
   ردايم — Design tokens
   ========================================================================== */
:root{
  --ink-indigo: #1E2A47;
  --ink-indigo-deep: #131C31;
  --parchment: #F2E8D5;
  --parchment-soft: #FAF3E6;
  --rust: #B94A2C;
  --saffron: #D8A23E;
  --teal: #2E6B66;
  --ink-text: #241F19;
  --ink-text-soft: #55503F;
  --cream-white: #FBF7EE;
  --line: rgba(36,31,25,0.12);
  --line-light: rgba(251,247,238,0.22);

  --font-display: 'Amiri', 'Traditional Arabic', serif;
  --font-body: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-label: 'Reem Kufi', var(--font-body);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 7rem;

  --radius: 4px;
  --shadow-card: 0 10px 30px -14px rgba(19,28,49,0.28);
  --ease: cubic-bezier(.22,.68,0,1);
}

/* lattice tile mask — reusable signature motif */
:root{
  --lattice-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 2 L25 15 L38 20 L25 25 L20 38 L15 25 L2 20 L15 15 Z'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink-text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.25;
  margin:0 0 var(--space-2);
  color:var(--ink-indigo);
}
p{ margin:0 0 var(--space-2); color:var(--ink-text-soft); }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 var(--space-3); }

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.skip-link{
  position:absolute; right:var(--space-2); top:-60px;
  background:var(--ink-indigo); color:var(--cream-white);
  padding:.6em 1em; border-radius:var(--radius); z-index:200;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:var(--space-2); }

:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }

.eyebrow{
  font-family:var(--font-label);
  font-size:.85rem;
  letter-spacing:.06em;
  color:var(--rust);
  margin:0 0 .6em;
}

/* ==========================================================================
   Buttons & chips
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.85em 1.6em;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn-primary{ background:var(--rust); color:var(--cream-white); }
.btn-primary:hover{ background:var(--ink-indigo); transform:translateY(-2px); }
.btn-ghost{ border:1.5px solid var(--line); color:var(--ink-indigo); }
.btn-ghost:hover{ border-color:var(--rust); color:var(--rust); }
.btn-small{ padding:.6em 1.2em; font-size:.85rem; background:var(--ink-indigo); color:var(--cream-white); }
.btn-small:hover{ background:var(--rust); }

.chip{
  display:inline-block;
  font-family:var(--font-label);
  font-size:.78rem;
  letter-spacing:.03em;
  color:var(--teal);
  background:rgba(46,107,102,0.1);
  padding:.3em .9em;
  border-radius:999px;
  margin-bottom:.9em;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--ink-indigo);
  box-shadow:0 1px 0 rgba(0,0,0,0.15);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:var(--space-2);
}
.logo{ display:flex; align-items:center; gap:.6em; color:var(--cream-white); }
.logo-mark{ width:28px; height:28px; color:var(--saffron); flex:none; }
.logo-text{
  font-family:var(--font-display);
  font-size:1.3rem;
  display:flex; flex-direction:column; line-height:1.1;
}
.logo-text em{
  font-style:normal; font-family:var(--font-label);
  font-size:.6rem; letter-spacing:.08em; color:var(--saffron); margin-top:.15em;
}

.primary-nav{ display:flex; align-items:center; gap:var(--space-3); }
.primary-nav a{
  color:var(--cream-white);
  font-size:.92rem;
  position:relative;
  padding-block:.3em;
  opacity:.85;
}
.primary-nav a::after{
  content:''; position:absolute; right:0; bottom:-2px; width:0; height:2px;
  background:var(--saffron); transition:width .25s var(--ease);
}
.primary-nav a:hover,
.primary-nav a.is-active{ opacity:1; }
.primary-nav a:hover::after,
.primary-nav a.is-active::after{ width:100%; }
.nav-cta{
  background:var(--rust); padding:.5em 1.1em; border-radius:var(--radius);
  opacity:1 !important;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background:var(--saffron); color:var(--ink-indigo); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; padding:.4em; cursor:pointer;
}
.nav-toggle span{ width:22px; height:2px; background:var(--cream-white); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  background:linear-gradient(180deg,var(--ink-indigo) 0%, var(--ink-indigo-deep) 100%);
  color:var(--cream-white);
  position:relative;
  overflow:hidden;
}
.hero-row{
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:var(--space-4);
  padding-block:var(--space-6) var(--space-5);
}
.hero-copy h1{
  color:var(--cream-white);
  font-size:clamp(1.9rem, 3.2vw + 1rem, 3rem);
  max-width:16ch;
}
.hero-lede{ color:rgba(251,247,238,0.75); max-width:48ch; font-size:1.02rem; }
.hero-actions{ display:flex; gap:var(--space-2); margin-top:var(--space-3); }
.hero .eyebrow{ color:var(--saffron); }

.hero-art{ display:flex; justify-content:center; }
.rosette{
  width:min(70%, 260px);
  animation:rosetteIn 1.1s var(--ease) both;
}
.rosette-a{ fill:none; stroke:var(--saffron); stroke-width:3; }
.rosette-b{ fill:none; stroke:var(--rust); stroke-width:3; }
.rosette-c{ fill:none; stroke:rgba(251,247,238,0.55); stroke-width:1.5; }
.rosette-d{ fill:var(--saffron); }

@keyframes rosetteIn{
  from{ opacity:0; transform:rotate(-14deg) scale(.85); }
  to{ opacity:1; transform:rotate(0) scale(1); }
}

.lattice-strip{
  height:14px;
  background-color:var(--saffron);
  -webkit-mask-image:var(--lattice-tile);
  mask-image:var(--lattice-tile);
  -webkit-mask-repeat:repeat-x;
  mask-repeat:repeat-x;
  -webkit-mask-size:auto 14px;
  mask-size:auto 14px;
  opacity:.9;
}
.lattice-strip.light{ background-color:var(--ink-indigo); opacity:.15; }

/* ==========================================================================
   Category sections
   ========================================================================== */
.category{ padding-block:var(--space-5); }
.category.alt{ background:var(--parchment-soft); }
.category-head{ max-width:60ch; margin-bottom:var(--space-4); }
.category-head h2{ font-size:clamp(1.5rem, 1.6vw + 1rem, 2.1rem); }
.category-desc{ font-size:1rem; }

[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

.card-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-3);
}
.card{
  background:var(--cream-white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -16px rgba(19,28,49,0.35); }
.card-featured{ grid-column:span 3; flex-direction:row; }
.card-featured .card-media{ flex:0 0 42%; aspect-ratio:auto; }
.card-featured .card-body{ flex:1; }

.card-media{
  aspect-ratio:4/3;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--ink-indigo), var(--ink-indigo-deep));
}
.card-media[data-tone="rust"]{ background:linear-gradient(135deg, var(--rust), #7c3018); }
.card-media[data-tone="gold"]{ background:linear-gradient(135deg, var(--saffron), #a6741f); }
.card-media[data-tone="teal"]{ background:linear-gradient(135deg, var(--teal), #1c433f); }
.card-media[data-tone="indigo"]{ background:linear-gradient(135deg, var(--ink-indigo), var(--ink-indigo-deep)); }
.card-media-icon{
  width:52px; height:52px;
  background-color:rgba(251,247,238,0.85);
  -webkit-mask-image:var(--lattice-tile);
  mask-image:var(--lattice-tile);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
}
.card-media::after{
  content:'';
  position:absolute; inset-inline-start:0; top:0; width:26px; height:26px;
  background-color:var(--cream-white);
  -webkit-mask-image:var(--lattice-tile); mask-image:var(--lattice-tile);
  -webkit-mask-size:contain; mask-size:contain;
  opacity:.55;
}

.card-body{ padding:var(--space-3); display:flex; flex-direction:column; flex:1; }
.card-body h3{ font-size:1.25rem; }
.card-body p{ font-size:.95rem; flex:1; }
.card-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-2); padding-top:var(--space-2);
  border-top:1px solid var(--line);
  font-size:.85rem;
}
.card-foot .source{ color:var(--ink-text-soft); }
.card-foot a{ color:var(--rust); font-weight:600; white-space:nowrap; }
.card-foot a:hover{ color:var(--ink-indigo); }

/* empty state */
.empty-state{
  border:1.5px dashed var(--line);
  border-radius:var(--radius);
  padding:var(--space-4);
  text-align:center;
  max-width:520px;
  margin-inline:auto;
}
.empty-mark{
  display:block; width:34px; height:34px; margin:0 auto var(--space-2);
  background-color:var(--rust);
  -webkit-mask-image:var(--lattice-tile); mask-image:var(--lattice-tile);
  -webkit-mask-size:contain; mask-size:contain;
}
.empty-title{
  font-family:var(--font-label); color:var(--ink-indigo); font-size:1.05rem; margin-bottom:.3em;
}
.empty-text{ font-size:.92rem; margin-bottom:var(--space-2); }

/* ==========================================================================
   Write-for-us band
   ========================================================================== */
.write-band{
  position:relative;
  background:linear-gradient(180deg, var(--ink-indigo-deep), var(--ink-indigo));
  color:var(--cream-white);
  padding-block:var(--space-5);
}
.write-row{ max-width:760px; text-align:center; margin-inline:auto; }
.write-band h2{ color:var(--cream-white); font-size:clamp(1.4rem,1.6vw + 1rem,1.9rem); }
.write-band .eyebrow{ color:var(--saffron); }
.pillar-list{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6em;
  margin-block:var(--space-3);
}
.pillar-list li{
  font-family:var(--font-label); font-size:.85rem;
  border:1px solid var(--line-light); border-radius:999px;
  padding:.45em 1.1em; color:rgba(251,247,238,0.85);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--ink-indigo-deep); color:rgba(251,247,238,0.8); }
.footer-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--space-3); padding-block:var(--space-4);
  border-bottom:1px solid var(--line-light);
}
.footer-logo{ color:var(--cream-white); }
.footer-nav{ display:flex; flex-wrap:wrap; gap:var(--space-3); font-size:.9rem; }
.footer-nav a:hover{ color:var(--saffron); }
.footer-social{ display:flex; gap:var(--space-2); }
.footer-social svg{ width:18px; height:18px; fill:rgba(251,247,238,0.8); }
.footer-social a:hover svg{ fill:var(--saffron); }
.footer-bottom{ padding-block:var(--space-2); font-size:.8rem; text-align:center; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .hero-row{ grid-template-columns:1fr; text-align:center; }
  .hero-copy h1, .hero-lede{ max-width:none; margin-inline:auto; }
  .hero-actions{ justify-content:center; }
  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .card-featured{ grid-column:span 2; }
}

@media (max-width:680px){
  .nav-toggle{ display:flex; }
  .primary-nav{
    position:absolute; inset-inline:0; top:100%;
    background:var(--ink-indigo);
    flex-direction:column; align-items:flex-start;
    padding:var(--space-2) var(--space-3) var(--space-3);
    gap:var(--space-2);
    max-height:0; overflow:hidden;
    transition:max-height .3s var(--ease);
  }
  .primary-nav.is-open{ max-height:400px; }
  .nav-cta{ align-self:flex-start; }

  .card-grid{ grid-template-columns:1fr; }
  .card-featured{ grid-column:span 1; flex-direction:column; }
  .card-featured .card-media{ flex:none; aspect-ratio:4/3; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rosette{ animation:none; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}