/* =====================================================================
   Base: reset, typography, layout utilities, motion system, flower + logo helpers
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
html:focus-within { scroll-behavior: smooth; }
html.is-locked { overflow: hidden; padding-right: var(--sb, 0px); }
body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
a { color: var(--gold-800); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--gold-900); }
p, li, dd { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-head);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}
p { text-wrap: pretty; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
hr { border: 0; border-top: 2px dashed var(--line-2); margin: 2rem 0; }
::selection { background: var(--gold-200); color: var(--gold-950); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
[dir="rtl"], [lang="ar"] { font-family: var(--f-arabic); }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--gold-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--gold-200); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--gold-300); }

/* ------------------------------------------------------------------ a11y helpers */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 999;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font-weight: 700; text-decoration: none;
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ------------------------------------------------------------------ layout */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.stack > * + * { margin-top: var(--stack, 1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, 12px); align-items: center; }
.center { text-align: center; }
.grow { flex: 1 1 auto; }
.nowrap { white-space: nowrap; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.tnum { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ type helpers */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 0.8125rem/1 var(--f-head); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-800);
}
.eyebrow .i { width: 18px; height: 18px; }
.display { font-family: var(--f-display); font-weight: 400; letter-spacing: 0.02em; line-height: 1; }
.hand { font-family: var(--f-hand); font-weight: 600; }
.arabic { font-family: var(--f-arabic); font-weight: 400; line-height: 1.9; direction: rtl; }
.h-hero { font-size: var(--fs-4xl); line-height: 1.02; letter-spacing: -0.02em; }
.h1 { font-size: var(--fs-3xl); }
.h2 { font-size: var(--fs-2xl); }
.h3 { font-size: var(--fs-xl); }
.h4 { font-size: var(--fs-lg); }
.lead { font-size: var(--fs-md); color: var(--ink-2); line-height: 1.65; }
.hl-gold { color: var(--gold-700); }
.hl-rose { color: var(--rose); }
.hl-leaf { color: var(--leaf); }

/* Hand-drawn underline that draws in when revealed */
.scribble { position: relative; display: inline-block; white-space: nowrap; }
.scribble > svg {
  position: absolute; left: -2%; right: -2%; bottom: -0.16em; width: 104%; height: 0.42em;
  overflow: visible; pointer-events: none;
}
.scribble path { fill: none; stroke: var(--gold-400); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .scribble path, .scribble.is-in path { transition: stroke-dashoffset 1.1s var(--ease-out) 0.55s; stroke-dashoffset: 0; }

.section-head { max-width: 760px; margin-inline: auto; text-align: center; }
.section-head > * + * { margin-top: 14px; }
.section-head .lead { max-width: 620px; margin-inline: auto; }

/* ------------------------------------------------------------------ decorative backgrounds */
.bg-pattern { position: relative; isolation: isolate; }
.bg-pattern::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--pattern-star); background-size: 64px 64px; opacity: 0.18;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}
.bg-dots { background-image: var(--pattern-dots); background-size: 22px 22px; }
/* Soft colour blobs: a radial mask instead of filter: blur() — same look, no per-frame blur cost. */
.glow { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0.6; z-index: -1; -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.55) 48%, transparent 100%); mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.55) 48%, transparent 100%); }

/* Flower border strip (echoes the gold flower borders of the book pages) */
.flower-rule {
  height: 26px; width: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='26' viewBox='-20 -13 40 26'%3E%3Cg fill='%23D6A64A'%3E%3Cg id='p'%3E%3Cellipse cx='0' cy='-5.6' rx='2.3' ry='4.2'/%3E%3C/g%3E%3Cuse href='%23p' transform='rotate(45)'/%3E%3Cuse href='%23p' transform='rotate(90)'/%3E%3Cuse href='%23p' transform='rotate(135)'/%3E%3Cuse href='%23p' transform='rotate(180)'/%3E%3Cuse href='%23p' transform='rotate(225)'/%3E%3Cuse href='%23p' transform='rotate(270)'/%3E%3Cuse href='%23p' transform='rotate(315)'/%3E%3C/g%3E%3Ccircle r='2.6' fill='%23fff'/%3E%3Ccircle r='1.5' fill='%23B8862A'/%3E%3C/svg%3E") repeat-x center / 40px 26px;
  opacity: 0.9;
}

/* ------------------------------------------------------------------ icons */
.i { width: 1.25em; height: 1.25em; flex: none; }
i[data-icon] { display: inline-block; width: 1.25em; height: 1.25em; }

/* ------------------------------------------------------------------ flowers (FOQ.flora) */
.fl, .plant { overflow: visible; }
.fl-petal, .fl-center, .fl-halo, .pl-stem, .pl-bud > path, .pl-leaf > path, .pl-seed { transform-box: fill-box; }
.fl-petal { transform-origin: 50% 100%; }
.fl-center, .fl-halo, .pl-seed { transform-origin: 50% 50%; }
.pl-stem { transform-origin: 50% 100%; }
.pl-leaf > path:first-child { transform-origin: 0% 50%; }
.pl-bud > path:first-child { transform-origin: 50% 100%; }
.is-closed .fl-petal, .is-closed .fl-center, .is-closed .fl-halo { opacity: 0; transform: scale(0.05); }
.is-silhouette .fl-petals path { fill: #EFE3C7 !important; stroke: #E4D3AE !important; stroke-opacity: 1 !important; }
.is-silhouette .fl-petals path + path { display: none; }
.is-silhouette .fl-center * { fill: #E4D3AE !important; stroke: #E4D3AE !important; }
.is-silhouette .fl-halo { display: none; }
.is-special .fl-halo { animation: halo-pulse 3.2s ease-in-out infinite; }
.sway { transform-origin: 50% 100%; animation: sway var(--sway-dur, 5s) ease-in-out infinite; animation-delay: var(--sway-delay, 0s); }
.spin-slow { animation: spin 26s linear infinite; }

/* ------------------------------------------------------------------ logo (FOQ.brand) */
.brand-logo, .brand-mark { overflow: visible; }
.brand-logo .bl-square, .brand-mark .bl-square, .bl-callig path, .bl-o, .bl-book path { fill: var(--logo-gold); }
.bl-o { stroke: var(--logo-gold); stroke-linejoin: round; }
.bl-circle, .bl-b { fill: #fff; }
.bl-b, .bl-book path { fill-rule: evenodd; }
.bl-callig path { stroke: var(--logo-gold); stroke-width: 0; stroke-linecap: round; stroke-linejoin: round; }
.bl-marks path { fill: var(--logo-ink); }
.bl-square, .bl-circle, .bl-letter, .bl-book, .bl-callig path, .bl-marks path { transform-box: fill-box; transform-origin: 50% 50%; }
.bl-book { transform-origin: 50% 100%; }

/* ------------------------------------------------------------------ plain header + footer for crawlers (tools/seo.py)
   Inside the header/footer placeholders: site.js replaces them for visitors, and they are hidden as soon as scripts run. */
.js .seo-static { display: none !important; }
.seo-static { font: 600 .95rem/1.6 var(--font-body, system-ui, sans-serif); padding: 14px 20px; }
.seo-static--nav { display: flex; flex-wrap: wrap; gap: 6px 18px; border-bottom: 1px solid rgba(166, 123, 36, .25); }
.seo-static--footer { border-top: 1px solid rgba(166, 123, 36, .25); max-width: 72rem; margin: 0 auto; }
.seo-static--footer ul { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; padding: 0; margin: 10px 0; }
.seo-static a { color: #745B0E; }

/* ------------------------------------------------------------------ reveal system (JS adds .js to <html>) */
.js [data-reveal]:not(.is-in) { opacity: 0; }
.js [data-reveal] {
  transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out), filter 0.9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal="up"]:not(.is-in), .js [data-reveal=""]:not(.is-in) { transform: translate3d(0, 34px, 0); }
.js [data-reveal="down"]:not(.is-in) { transform: translate3d(0, -26px, 0); }
.js [data-reveal="left"]:not(.is-in) { transform: translate3d(-44px, 0, 0); }
.js [data-reveal="right"]:not(.is-in) { transform: translate3d(44px, 0, 0); }
/* On phones everything slides up — a sideways start would poke past the screen edge. */
@media (max-width: 720px) { .js [data-reveal="left"]:not(.is-in), .js [data-reveal="right"]:not(.is-in) { transform: translate3d(0, 30px, 0); } }
.js [data-reveal="zoom"]:not(.is-in) { transform: scale(0.9); }
.js [data-reveal="pop"]:not(.is-in) { transform: scale(0.55) rotate(-6deg); }
.js [data-reveal="pop"] { transition-timing-function: var(--ease-out), var(--ease-spring); }
.js [data-reveal="blur"]:not(.is-in) { filter: blur(12px); transform: scale(1.04); }
.js [data-reveal="tilt"]:not(.is-in) { transform: perspective(800px) rotateX(18deg) translateY(40px); }

/* Split headlines: words rise from a mask */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.sw__i { display: inline-block; will-change: transform; }
.js [data-split]:not(.is-in) .sw__i { transform: translate3d(0, 110%, 0) rotate(6deg); opacity: 0; }
.js [data-split] .sw__i {
  transition: transform 0.9s var(--ease-out), opacity 0.6s var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 55ms + var(--d, 0ms));
}

/* SPA view enter (fallback when View Transitions are unavailable) */
.view-enter { animation: view-in 0.5s var(--ease-out) both; }

/* ------------------------------------------------------------------ keyframes */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sway { 0%, 100% { transform: rotate(-2.6deg); } 50% { transform: rotate(2.6deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes float-sm { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-2deg); } }
@keyframes pulse-ring { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes halo-pulse { 0%, 100% { transform: scale(0.94); opacity: 0.85; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes pop-in { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes view-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bounce-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes sparkle { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }
@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(204, 153, 51, 0.45); } 70% { box-shadow: 0 0 0 16px rgba(204, 153, 51, 0); } }

/* ------------------------------------------------------------------ page transitions (cross-document) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.28s var(--ease-soft) both vt-out; }
::view-transition-new(root) { animation: 0.5s var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
html[data-nav="fade"]::view-transition-old(root) { animation: 0.22s ease both vt-out; }
html[data-nav="fade"]::view-transition-new(root) { animation: 0.42s var(--ease-out) both vt-in; }

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }

/* Decorative bleed (tilted marquee, floating cards) must never create sideways scrolling. */
main { overflow-x: clip; }

/* Performance: sections that are off screen pause their looping animations (toggled by FOQ.motion.autopause). */
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }