/* ============================================================
   ZILL — shade-craft. Direction: sunlit plaster vs warm shadow,
   brass used once per screen. Type: Marcellus (EN display),
   Reem Kufi (AR display), Zain (body, both scripts).
   ============================================================ */

:root {
  --plaster: #F1ECE3;
  --shadow-ink: #211D18;
  --brass: #A67C44;        /* decorative lines, borders, large shapes only */
  --brass-deep: #7A5527;   /* brass as small text on plaster — AA 4.5:1+ */
  --brass-bright: #C9995B; /* brass as small text on shadow — AA 4.5:1+ */
  --sand: #C9BBA4;
  --palm: #3E5C4B;

  --font-display-en: 'Marcellus', 'Times New Roman', serif;
  --font-display-ar: 'Reem Kufi', sans-serif;
  --font-body: 'Zain', 'Segoe UI', system-ui, sans-serif;

  --measure: 34rem;
  --pad: clamp(1.25rem, 4vw, 4rem);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--plaster);
  color: var(--shadow-ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  font-size: 1.0625rem;
  overflow-x: hidden;
}

/* Display faces swap with language */
html[lang="en"] .thesis,
html[lang="en"] .section-title,
html[lang="en"] .contact-line,
html[lang="en"] .project h3 { font-family: var(--font-display-en); font-weight: 400; }

html[lang="ar"] .thesis,
html[lang="ar"] .section-title,
html[lang="ar"] .contact-line,
html[lang="ar"] .project h3 { font-family: var(--font-display-ar); font-weight: 500; }

html[lang="ar"] body { font-size: 1.125rem; }
html[lang="ar"] .thesis { line-height: 1.18; }

/* ------------------------------------------------------------
   Mashrabiya shadow layer — a lattice shadow cast over the page,
   drifting with scroll like the sun moving. Pure CSS gradients.
   ------------------------------------------------------------ */
.mashrabiya {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.045;
  background-image:
    repeating-linear-gradient(45deg, var(--shadow-ink) 0 3px, transparent 3px 110px),
    repeating-linear-gradient(-45deg, var(--shadow-ink) 0 3px, transparent 3px 110px);
  /* shadow softens with distance from its lattice, like the real thing */
  filter: blur(1.5px);
  transform: translateX(var(--sun, 0px)) rotate(0.001deg);
  transition: transform 0.2s linear;
  will-change: transform;
}

/* ------------------------------------------------------------ header */
.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--pad);
  background: color-mix(in srgb, var(--plaster) 85%, transparent);
  backdrop-filter: blur(8px);
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--shadow-ink);
}
.wordmark-en { font-family: var(--font-display-en); font-size: 1.4rem; letter-spacing: 0.18em; }
.wordmark-ar { font-family: var(--font-display-ar); font-size: 1.25rem; color: var(--brass-deep); }

.site-nav { display: flex; gap: 1.75rem; }
.site-nav a {
  color: var(--shadow-ink);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.site-nav a:hover, .site-nav a:focus-visible { border-bottom-color: var(--brass); }

.lang-toggle {
  font-family: var(--font-display-ar);
  font-size: 1rem;
  background: none;
  border: 1px solid var(--shadow-ink);
  color: var(--shadow-ink);
  padding: 0.35rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
html[lang="ar"] .lang-toggle { font-family: var(--font-display-en); letter-spacing: 0.08em; }
.lang-toggle:hover, .lang-toggle:focus-visible { background: var(--shadow-ink); color: var(--plaster); }

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

/* ------------------------------------------------------------ hero */
main { position: relative; z-index: 2; }

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--pad) 4rem;
}

.eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 1.5rem;
}
html[lang="ar"] .eyebrow { letter-spacing: 0.05em; }

.thesis {
  font-size: clamp(3rem, 11vw, 8.5rem);
  line-height: 1.02;
  max-width: 12ch;
}

.hero-line {
  max-width: var(--measure);
  margin-top: 2rem;
  font-size: 1.15rem;
  color: color-mix(in srgb, var(--shadow-ink) 82%, var(--plaster));
}

.hero-cta {
  display: inline-block;
  width: fit-content;
  margin-top: 2.5rem;
  color: var(--shadow-ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--brass);
  padding-bottom: 0.2rem;
  transition: color 0.25s ease;
}
.hero-cta:hover, .hero-cta:focus-visible { color: var(--brass); }

/* ------------------------------------------------------------ work (shadowed) */
.work {
  background: var(--shadow-ink);
  color: var(--plaster);
  padding: 6rem var(--pad);
}

.section-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  max-width: 20ch;
  margin-bottom: 4rem;
}
.work .section-title { color: var(--sand); }

.project {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: 3.5rem 0;
  border-top: 1px solid color-mix(in srgb, var(--sand) 25%, transparent);
}
.project:last-of-type { border-bottom: 1px solid color-mix(in srgb, var(--sand) 25%, transparent); }

/* Alternate plan/text sides — layout carries rhythm, not decoration */
.project:nth-of-type(even) .plan-frame { order: 2; }
html[dir="rtl"] .project:nth-of-type(even) .plan-frame { order: 0; }

.plan-frame {
  background: color-mix(in srgb, var(--shadow-ink) 60%, var(--plaster) 8%);
  border: 1px solid color-mix(in srgb, var(--sand) 30%, transparent);
  padding: clamp(1rem, 3vw, 2rem);
}

.plan { display: block; width: 100%; height: auto; }
.p-wall { fill: none; stroke: var(--sand); stroke-width: 3; }
.p-hair, .p-gap { fill: none; stroke: var(--sand); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.6; }
.p-court { fill: none; stroke: var(--brass); stroke-width: 1.5; }
.p-door { fill: none; stroke: var(--sand); stroke-width: 1; }
.p-seat { fill: color-mix(in srgb, var(--sand) 35%, transparent); stroke: none; }
.p-lattice line { stroke: var(--brass); stroke-width: 1.5; }
.p-ray { fill: none; stroke: var(--brass); stroke-width: 1; opacity: 0.45; stroke-dasharray: 2 5; }
.p-frond path { fill: none; stroke: var(--palm); stroke-width: 1.5; opacity: 0.9; }
.p-label {
  fill: var(--sand);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
}

.project h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--plaster); }

.project-place {
  color: var(--brass-bright);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0.5rem 0 1.25rem;
}
html[lang="ar"] .project-place { letter-spacing: 0.03em; }

.project-story { max-width: var(--measure); color: color-mix(in srgb, var(--plaster) 85%, var(--shadow-ink)); }

.materials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin-top: 1.5rem;
}
.materials li {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  border: 1px solid color-mix(in srgb, var(--sand) 45%, transparent);
  color: var(--sand);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
}

/* ------------------------------------------------------------ craft (sunlit) */
.craft { padding: 6rem var(--pad); }
.craft .section-title { color: var(--shadow-ink); }

.craft-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.craft-note {
  border-top: 2px solid var(--brass);
  padding-top: 1.25rem;
  color: color-mix(in srgb, var(--shadow-ink) 85%, var(--plaster));
}
.craft-note:nth-child(2) { border-top-color: var(--palm); }

/* ------------------------------------------------------------ contact (shadowed) */
.contact {
  background: var(--shadow-ink);
  color: var(--plaster);
  padding: 7rem var(--pad);
  text-align: center;
}

.contact-line { font-size: clamp(2.2rem, 6vw, 4.5rem); color: var(--sand); }

.contact-sub {
  margin: 1.25rem auto 2.5rem;
  max-width: var(--measure);
  color: color-mix(in srgb, var(--plaster) 80%, var(--shadow-ink));
}

.contact-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary, .btn-ghost {
  display: inline-block;
  padding: 0.9rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  transition: transform 0.2s ease, background 0.25s ease, color 0.25s ease;
}
.btn-primary { background: var(--brass); color: var(--shadow-ink); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--sand); transform: translateY(-2px); }
.btn-ghost { border: 1px solid color-mix(in srgb, var(--sand) 50%, transparent); color: var(--sand); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--sand); color: var(--plaster); }

/* ------------------------------------------------------------ footer */
.site-foot {
  padding: 2rem var(--pad);
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--shadow-ink) 72%, var(--plaster));
  text-align: center;
  position: relative;
  z-index: 2;
}

/* ------------------------------------------------------------ reveals */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* Language flip choreography — the signature moment */
.lang-flip main, .lang-flip .site-head { animation: langfade 0.6s ease; }
@keyframes langfade {
  0% { opacity: 1; }
  40% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ mobile: designed, not shrunk */
@media (max-width: 720px) {
  .site-nav { display: none; } /* single-page; toggle + wordmark carry it */

  .hero { min-height: 92svh; }
  .thesis { font-size: clamp(3rem, 16vw, 4.5rem); }

  /* On phone the plan becomes the header image of a card, text below */
  .project { grid-template-columns: 1fr; gap: 1.25rem; padding: 2.5rem 0; }
  .project:nth-of-type(even) .plan-frame { order: 0; }

  .craft-cols { grid-template-columns: 1fr; }
  .craft-note { max-width: var(--measure); }

  /* Thumb-reach: contact buttons full width, stacked */
  .contact-actions { flex-direction: column; align-items: stretch; }
  .btn-primary, .btn-ghost { text-align: center; padding: 1.1rem 2rem; }

  .mashrabiya { opacity: 0.07; } /* lighter lattice on small screens */
}

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .mashrabiya { transition: none; }
  .lang-flip main, .lang-flip .site-head { animation: none; }
}