/* ─── MAWADDA · Base ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul[class] { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: .01em;
  margin: 0 0 .5em;
}

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

/* skip link */
.skip-link {
  position: absolute; inset-inline-start: 1rem; top: -4rem;
  background: var(--espresso); color: var(--cream); padding: .7em 1.3em;
  z-index: var(--z-loader); border-radius: var(--r-sm);
  transition: top var(--t-fast);
}
.skip-link:focus { top: 1rem; }

/* layout */
.container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
.container-wide { width: min(var(--container-wide), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: var(--section-pad); position: relative; }

/* editorial headings */
.display {
  font-size: var(--fs-display);
  font-weight: 500;
  letter-spacing: .015em;
  line-height: .98;
  text-transform: uppercase;
}
.display2 { font-size: var(--fs-display2); font-weight: 500; line-height: 1; text-transform: uppercase; }
.serif-accent {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: .02em;
}

/* eyebrow label */
.eyebrow {
  display: flex; align-items: center; gap: .9rem;
  font-size: var(--fs-label);
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bronze);
} 
.eyebrow::before { content: ""; width: 2.6rem; height: 1px; background: var(--bronze); flex: none; }
[dir="rtl"] .eyebrow { gap: .9rem; }

.lead { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.8; max-width: 46ch; }
.muted { color: var(--ink-soft); }

/* ─── scroll reveal primitives ─── */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: translateY(20px) scale(.97); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* image reveal: mask wipe */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal img { transition: transform 1.4s var(--ease-lux); }
.img-reveal::after {
  content: ""; position: absolute; inset: 0;
  background: var(--espresso);
  transform: scaleY(1); transform-origin: top;
  transition: transform 1s var(--ease-lux) .1s;
}
.img-reveal.is-in::after { transform: scaleY(0); }
.img-reveal.is-in img { transform: scale(1); }
.img-reveal.is-in img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .img-reveal::after { display: none; }
}

/* line-by-line headline reveal */
.headline-reveal .line { display: block; overflow: hidden; }
.headline-reveal .line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-lux);
}
.headline-reveal.is-in .line > span { transform: none; }
.headline-reveal.is-in .line:nth-child(2) > span { transition-delay: .12s; }
.headline-reveal.is-in .line:nth-child(3) > span { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .headline-reveal .line > span { transform: none; }
}

/* parallax helper */
[data-parallax] img, [data-parallax] > .plx { will-change: transform; }

/* SVG icons */
.icon { width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; stroke-width: 1.4; flex: none; }

/* grain overlay */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* decorative leaf watermark */
.leaf-mark { position: absolute; pointer-events: none; z-index: 0; opacity: .1; }
.leaf-mark svg { display: block; width: 100%; height: auto; }

/* placeholder demo badge */
.demo-tag {
  display: inline-block; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--line); padding: .2em .55em; border-radius: var(--r-sm);
}

/* brand duotone photo treatment: warm tobacco monochrome */
img.duo { filter: sepia(.72) saturate(.95) contrast(1.05) brightness(.9); }
.theme-dark img.duo { filter: sepia(.62) saturate(1.05) contrast(1.06); }

/* selection */
::selection { background: var(--bronze); color: var(--espresso); }

/* scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--espresso); }
::-webkit-scrollbar-thumb { background: var(--brown2); border-radius: 6px; }