/* Hallmark · genre: editorial · macrostructure: Map / Diagram · nav: N9 edge-aligned · footer: Ft6 letter close
 * theme: custom · vibe: "limestone, olive bark, sage leaves, heirloom" · paper: oklch(95.6% 0.014 88) · accent: oklch(47% 0.11 128)
 * display: Aref Ruqaa · body: IBM Plex Sans Arabic · axes: light / calligraphic-display / chromatic-olive ~126°
 * enrichment: Tier B hand-built SVG, drawn from the family data · studied: no · context: direction picked by user
 */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 106.25%; overflow-x: clip; -webkit-text-size-adjust: 100%; }
html.large-type { font-size: 125%; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.skip {
  position: absolute;
  inset-inline-start: var(--space-md);
  top: -6rem;
  z-index: var(--z-sticky);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-field);
  background: var(--color-ink);
  color: var(--color-paper);
  text-decoration: none;
}
.skip:focus { top: var(--space-md); }

/* ---------- masthead (N9: wordmark at the start, one control at the end) ---------- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: 75rem;
  margin-inline: auto;
  padding: var(--space-md) var(--gutter);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.wordmark__mark { width: 32px; height: 32px; flex: none; }
.mark__stem { fill: none; stroke: var(--color-bark); stroke-width: 1.8; stroke-linecap: round; }
.mark__leaf { fill: var(--color-leaf-lit); stroke: var(--color-leaf-edge); stroke-width: 1; }
.mark__olive { fill: var(--color-fruit); }

.text-toggle {
  min-height: 44px;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule);
  border-radius: var(--radius-field);
  background: none;
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.text-toggle[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }

/* ---------- intro ---------- */
.intro {
  display: grid;
  gap: var(--space-lg);
  max-width: 75rem;
  margin-inline: auto;
  padding: var(--space-md) var(--gutter) var(--space-lg);
}
.crumb {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--color-rule);
  text-underline-offset: 0.4em;
}
h1 {
  min-width: 0;
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.intro__lede { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-md); }

.finder { display: grid; gap: var(--space-2xs); width: 100%; max-width: 24rem; }
.finder__label { color: var(--color-muted); font-size: var(--text-sm); }
.finder__field { position: relative; }
.finder__icon {
  position: absolute;
  inset-inline-start: var(--space-sm);
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--color-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  pointer-events: none;
}
.finder input {
  width: 100%;
  min-height: 48px;
  padding-inline: var(--space-xl) var(--space-sm);
  border: var(--rule);
  border-radius: var(--radius-field);
  background: var(--color-paper-raised);
  color: var(--color-ink);
  font: inherit;
}
.finder input::placeholder { color: var(--color-muted); }
.finder input:focus-visible { border-color: var(--color-focus); outline-offset: 1px; }
.finder__status { min-height: 1.7em; color: var(--color-muted); font-size: var(--text-sm); }
.finder__go {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

@media (min-width: 52rem) {
  .intro { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; }
  .finder { justify-self: end; }
}

/* ---------- the tree ---------- */
.grove { max-width: 90rem; margin-inline: auto; padding: var(--space-sm) var(--gutter) var(--space-lg); }
.grove:focus { outline: none; }
.grove__wrap { position: relative; width: 100%; }
.grove__stage { position: absolute; top: 0; left: 50%; transform-origin: 50% 0; }
.grove__art { position: absolute; inset: 0; overflow: visible; }
.grove__nodes { position: absolute; inset: 0; }

.branch { fill: var(--color-bark); transition: fill var(--dur-short) var(--ease-out); }
.branch--twig, .branch--root { fill: var(--color-bark-light); }
.branch--front { stroke: var(--color-paper); stroke-width: 1.5; }
.branch.is-lit { fill: var(--color-accent); }
.canopy { fill: var(--color-canopy); }
.mound { fill: var(--color-soil); }
.ground-line { fill: none; stroke: var(--color-rule); stroke-width: 1.2; stroke-linecap: round; }
.deco-leaf { fill: var(--color-leaf); stroke: var(--color-leaf-edge); stroke-width: 1; }
.olive__fruit { fill: var(--color-fruit); }
.olive__shine { fill: var(--color-fruit-shine); }

.tablet {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule);
  border-radius: var(--radius-tablet);
  background: var(--color-paper-raised);
  box-shadow: 0 1px 2px var(--color-shadow);
  text-align: center;
  transition: border-color var(--dur-short) var(--ease-out);
}
.tablet.is-lit { border-color: var(--color-accent); }
.person {
  padding: 0 var(--space-2xs);
  border: 0;
  border-radius: 4px;
  background: none;
  white-space: nowrap;
  transition: opacity var(--dur-short) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.tablet__head { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.35; }
.tablet__partner { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
.memorial { color: var(--color-memorial); font-size: var(--text-xs); line-height: 1.5; }

.tablet--founders { flex-direction: row; gap: var(--space-md); padding: var(--space-sm) var(--space-lg); }
.tablet__person { display: flex; flex-direction: column; align-items: center; }
.tablet__name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.3; }
.join { width: 28px; height: 22px; flex: none; }
.join__stem { fill: none; stroke: var(--color-bark-light); stroke-width: 1.4; stroke-linecap: round; }

.tablet--roots { gap: var(--space-3xs); padding: var(--space-xs) var(--space-lg) var(--space-sm); background: var(--color-paper-2); }
.tablet__label { color: var(--color-muted); font-size: var(--text-xs); }
.tablet__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--space-2xs); }
.tablet__root { font-weight: 600; }
.tablet__dot { color: var(--color-muted); }
.tablet__more {
  margin-top: var(--space-2xs);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  font-size: var(--text-xs);
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.grove[data-mode="column"] .tablet--founders { flex-wrap: wrap; justify-content: center; max-width: calc(100% - 16px); padding-inline: var(--space-md); }
.grove[data-mode="column"] .tablet__name { font-size: var(--text-lg); }
.grove[data-mode="column"] .tablet--roots { max-width: calc(100% - 16px); }

.leaf {
  position: absolute;
  display: inline-grid;
  place-items: center;
  width: max-content;
  padding: var(--space-xs) var(--space-lg);
  border-radius: 999px;
  color: var(--color-leaf-ink);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.3;
  transform: rotate(var(--r, 0deg));
  isolation: isolate;
}
.leaf__shape { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; }
.leaf__shape path { fill: var(--color-leaf); stroke: var(--color-leaf-edge); stroke-width: 1; transition: fill var(--dur-short) var(--ease-out); }
.leaf--end .leaf__shape { transform: scaleX(-1); }
.leaf--memorial .leaf__shape path { stroke: var(--color-memorial); }
.leaf.is-lit .leaf__shape path { fill: var(--color-leaf-lit); }
.leaf:focus-visible { outline-offset: 2px; }

@media (hover: hover) {
  .text-toggle:hover, .btn-outline:hover, .card__close:hover { background: var(--color-paper-2); }
  .crumb:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
  .tablet .person:hover, .overview__root:hover { color: var(--color-accent); }
  .leaf:hover .leaf__shape path { fill: var(--color-leaf-lit); }
  .card__link:hover { text-decoration-color: var(--color-accent); }
  .overview__go:hover { background: var(--color-leaf); }
}

/* Name search dims everyone who doesn't match. */
.grove.is-searching .person:not(.is-match),
.grove.is-searching .memorial { opacity: 0.35; }
.grove.is-searching .leaf.is-match .leaf__shape path { fill: var(--color-leaf-lit); stroke: var(--color-accent); stroke-width: 2; }
.grove.is-searching .tablet .person.is-match { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

/* One entrance: the tree settles, then its leaves open from the twig. */
.grove.is-entering .grove__art,
.grove.is-entering .tablet { animation: fade-in var(--dur-long) var(--ease-out) both; }
.grove.is-entering .leaf {
  animation: leaf-in var(--dur-long) var(--ease-out) both;
  animation-delay: calc(min(var(--i, 0), 20) * 20ms + 120ms);
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes leaf-in { from { opacity: 0; transform: rotate(var(--r, 0deg)) scale(0.4); } }

/* ---------- key ---------- */
.key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md) var(--space-xl);
  max-width: 75rem;
  margin-inline: auto;
  padding: 0 var(--gutter) var(--space-2xl);
}
.key__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.key__list li { display: flex; align-items: center; gap: var(--space-xs); }
.key__swatch { flex: none; }
.key__swatch--tablet { width: 22px; height: 14px; border: var(--rule); border-radius: 3px; background: var(--color-paper-raised); }
.key__swatch--leaf { width: 28px; height: 11px; border: 1px solid var(--color-leaf-edge); border-radius: 100% 0; background: var(--color-leaf); }

.btn-outline {
  min-height: 44px;
  padding: var(--space-xs) var(--space-lg);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-field);
  background: none;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn-outline:active, .text-toggle:active, .overview__go:active { transform: translateY(1px); }
.person:active, .card__link:active, .crumb:active, .tablet__more:active, .finder__go:active, .overview__root:active, .wordmark:active { opacity: 0.7; }
.leaf:active .leaf__shape path { fill: var(--color-leaf-lit); }
button:disabled { cursor: default; opacity: 0.5; }

/* ---------- footer (Ft6: closes like a letter) ---------- */
.close {
  max-width: 75rem;
  margin-inline: auto;
  padding: var(--space-xl) var(--gutter) var(--space-3xl);
  border-top: var(--rule);
}
.close__line { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.4; }
.close__ps { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- person card + family overview ---------- */
.card {
  width: min(100% - 2rem, 28rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow: auto;
  border: var(--rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-raised);
  color: var(--color-ink);
  box-shadow: 0 24px 60px -28px var(--color-backdrop);
}
.card--wide { width: min(100% - 2rem, 34rem); }
.card::backdrop { background: var(--color-backdrop); }
.card[open] { animation: card-in var(--dur-long) var(--ease-out); }
.card[open]::backdrop { animation: fade-in var(--dur-long) var(--ease-out); }
@keyframes card-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }

.card__body { display: grid; gap: var(--space-2xs); padding: var(--space-xl) var(--space-lg) var(--space-md); }
.card__name { min-width: 0; overflow-wrap: anywhere; padding-inline-end: var(--space-xl); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.3; }
.card__memorial { font-size: var(--text-sm); }
.card__memorial:empty, .card__note:empty { display: none; }
.card__note { color: var(--color-muted); font-size: var(--text-sm); }
.card__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: var(--space-md) 0 0; border-top: var(--rule); }
.card__facts dt, .card__facts dd { margin: 0; padding: var(--space-sm) 0; border-bottom: var(--rule); }
.card__facts dt { padding-inline-end: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.card__facts dd { font-weight: 500; font-variant-numeric: tabular-nums; }
.card__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: underline;
  white-space: nowrap;
  text-decoration-color: var(--color-leaf-edge);
  text-underline-offset: 0.35em;
}
.card__foot { padding: var(--space-sm) var(--space-lg) var(--space-lg); }
.card__foot .btn-outline { width: 100%; }
.card__close {
  position: absolute;
  top: var(--space-sm);
  inset-inline-end: var(--space-sm);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
}
.card__close svg { width: 18px; height: 18px; fill: none; stroke: var(--color-ink); stroke-width: 1.8; stroke-linecap: round; }

.overview__roots { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); margin: var(--space-md) 0 var(--space-xs); padding: var(--space-md) 0; border-block: var(--rule); }
.overview__person { display: grid; justify-items: start; }
.overview__root { padding: 0; border: 0; background: none; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.4; }
.overview__heading { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.overview__branches { margin: 0 0 var(--space-md); padding: 0; list-style: none; }
.overview__branch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 3.2rem; border-bottom: var(--rule); }
.overview__branch-name { font-weight: 600; }
.overview__branch:not(.is-ready) .overview__branch-name { color: var(--color-muted); font-weight: 500; }
.overview__later { color: var(--color-muted); font-size: var(--text-xs); }
.overview__go {
  min-height: 40px;
  padding: var(--space-2xs) var(--space-md);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-field);
  background: none;
  color: var(--color-accent);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* ---------- without JavaScript ---------- */
.fallback { max-width: 75rem; margin-inline: auto; padding: 0 var(--gutter) var(--space-xl); }
.fallback section { padding: var(--space-md) 0; border-top: var(--rule); }
.fallback h2 { font-family: var(--font-display); font-size: var(--text-lg); }
.fallback ul { margin: var(--space-xs) 0 0; padding-inline-start: var(--space-lg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}

/* ---------- print: the whole tree on one A3 sheet ---------- */
@page { size: A3 landscape; margin: 10mm; }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: none; }
  .masthead, .finder, .key, .close, .skip, .tablet__more, dialog { display: none !important; }
  .intro { display: block; padding: 0 0 4mm; }
  .crumb { text-decoration: none; }
  h1 { font-size: 28pt; }
  .grove { max-width: none; padding: 0; }
  .grove__wrap { break-inside: avoid; }
  .grove__stage.is-print { position: relative; left: auto; margin-inline: auto; }
  .grove.is-searching .person, .grove.is-searching .memorial { opacity: 1; }
}