/* Ornament and pattern layer: fine gold line-work drawn from the land and its craft.
   Asir contour lines, growth rings and sidr sprigs as quiet watermarks.
   Everything here is decoration only: aria-hidden or pseudo-elements, never intercepting clicks. */

/* ---------- Numbers: a glass card bridging the hero and the portraits ---------- */
.landing { --bridge: clamp(70px, 9vw, 120px); }
.hero-painted { --bridge: clamp(70px, 9vw, 120px); }
.hero-painted .wrap { padding-bottom: calc(var(--bridge) + clamp(2rem, 6vh, 3.5rem)); }
.hero-painted .hero-seal, .hero-painted .video-toggle { bottom: calc(var(--bridge) + clamp(2rem, 6vh, 3.5rem)); }
.hero-painted .scroll-cue { display: none; }
.numbers { position: relative; z-index: 4; padding: 0; margin-top: calc(-1 * clamp(70px, 9vw, 120px)); }
/* portraits: a framed card inside the page margins, not a full-width band */
.numbers + .portraits { margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; width: min(calc(100% - 2 * var(--gutter)), calc(var(--wrap) - 2 * var(--gutter))); height: min(78svh, 720px);
  border-radius: 28px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.numbers + .portraits::after, html[dir="rtl"] .numbers + .portraits::after, html[data-theme="light"] .numbers + .portraits::after { background: none !important; }
.numbers + .portraits .portrait-info { padding-inline: clamp(2.5rem, 5.5vw, 4.5rem); }
.numbers + .portraits .veil { inset-inline-start: clamp(.75rem, 1.6vw, 1.25rem); top: -28px; bottom: -28px; }
/* one dark seam: the hero sinks into night below, the portraits rise out of it, and a soft halo sits behind the card */
.hero-painted::after { content: none; }
.stats-card { position: relative; overflow: hidden; border-radius: 24px; padding: var(--s5) clamp(1rem, 3vw, 2.5rem) var(--s4);
  background: linear-gradient(180deg, rgba(var(--shade-rgb), .32), rgba(var(--shade-rgb), .85)); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(210, 174, 99, .3); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 240, 200, .08); }
/* the terrain of the Asir highlands, faint inside the card */
.stats-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../assets/patterns/contours.svg") center / cover; opacity: .09; pointer-events: none;
  -webkit-mask: radial-gradient(ellipse at 70% 30%, #000, transparent 75%); mask: radial-gradient(ellipse at 70% 30%, #000, transparent 75%); }
.stats-card { isolation: isolate; }
.stats-card .numbers-head { margin: var(--s2) 0 var(--s3); }
.stats-card .stats { border: 0; }
.stats-card .stat { padding: var(--s4) var(--s5) var(--s3); }
.stats-card .stat + .stat { border-inline-start: 1px solid rgba(210, 174, 99, .16); }
.stat-icon { display: block; width: 34px; height: 34px; color: var(--gold); margin-bottom: var(--s3); opacity: .9; }
.stats-card .stat .num { font-size: clamp(2.4rem, 4.4vw, 3.8rem); }
@media (max-width: 760px) {
  .stats-card .stat:nth-child(3) { border-inline-start: 0; }
  .stats-card .stat:nth-child(n + 3) { border-top: 1px solid rgba(210, 174, 99, .16); }
  .stat-icon { width: 28px; height: 28px; }
}

/* ---------- Section watermarks ---------- */
.deco-heritage, .deco-rings, .deco-scale, .deco-discover, .deco-species { isolation: isolate; }
.deco-heritage::before, .deco-rings::before, .deco-species::before, .deco-discover::before, .deco-scale::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-size: contain; }
/* a sidr twig rising from the lower start corner, beside the introduction */
.deco-heritage::before { inset-inline-start: max(-40px, calc((100vw - var(--wrap)) / 2 - 220px)); bottom: -2%; width: clamp(200px, 22vw, 330px); aspect-ratio: 520 / 700;
  background-image: url("../assets/patterns/sprig.svg"); opacity: .16; }
html[dir="rtl"] .deco-heritage::before { transform: scaleX(-1); }
/* the same twig, turned, hanging into the age section from the top end corner */
.deco-rings::before { inset-inline-end: max(-30px, calc((100vw - var(--wrap)) / 2 - 200px)); top: 4%; width: clamp(170px, 18vw, 270px); aspect-ratio: 520 / 700;
  background-image: url("../assets/patterns/sprig.svg"); opacity: .12; transform: rotate(160deg); }
html[dir="rtl"] .deco-rings::before { transform: rotate(160deg) scaleX(-1); }
/* contour lines behind the scale chart: the trees stand on the land they grow in */
.deco-scale::before { inset: 8% 0 4%; background: url("../assets/patterns/contours.svg") center / cover; opacity: .07;
  -webkit-mask: radial-gradient(ellipse 70% 60% at 50% 60%, #000 30%, transparent 75%); mask: radial-gradient(ellipse 70% 60% at 50% 60%, #000 30%, transparent 75%); }
/* a cut trunk's rings, large and faint, behind the ways to experience the trees */
.deco-discover::before { inset-inline-start: calc(-1 * clamp(160px, 16vw, 260px)); top: 0; width: clamp(420px, 42vw, 640px); aspect-ratio: 1;
  background-image: url("../assets/patterns/rings.svg"); opacity: .06; }
/* a twig along the end side of the species list */
.deco-species::before { inset-inline-end: max(-40px, calc((100vw - var(--wrap)) / 2 - 230px)); bottom: 6%; width: clamp(190px, 20vw, 300px); aspect-ratio: 520 / 700;
  background-image: url("../assets/patterns/sprig.svg"); opacity: .13; transform: scaleX(-1) rotate(-8deg); }
html[dir="rtl"] .deco-species::before { transform: rotate(-8deg); }
@media (max-width: 760px) { .deco-heritage::before, .deco-rings::before, .deco-species::before { opacity: .07; } }

/* ---------- Closing card: contours inside ---------- */
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../assets/patterns/contours.svg") center / cover; opacity: .06; pointer-events: none;
  -webkit-mask: radial-gradient(ellipse at 20% 80%, #000, transparent 70%); mask: radial-gradient(ellipse at 20% 80%, #000, transparent 70%); }
.cta { isolation: isolate; }

/* ---------- Section labels: the rule ends in a small woven diamond ---------- */
/* the rule ends in a small woven diamond, as tall as the label beside it */
.eyebrow::before { width: 4em; height: 1em; opacity: .9; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 12'%3E%3Cpath d='M0 6h33' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M34.5 6l6-5.2 6 5.2-6 5.2z' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='40.5' cy='6' r='1.7'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 12'%3E%3Cpath d='M0 6h33' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M34.5 6l6-5.2 6 5.2-6 5.2z' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='40.5' cy='6' r='1.7'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
html[dir="rtl"] .eyebrow::before { transform: scaleX(-1); }

/* ---------- Footer: the name in a soft gold sheen instead of an outline ---------- */
.site-footer .big { -webkit-text-stroke: 0; color: transparent;
  background: linear-gradient(100deg, rgba(210, 174, 99, .1) 0%, rgba(210, 174, 99, .1) 38%, rgba(242, 222, 170, .42) 50%, rgba(210, 174, 99, .1) 62%, rgba(210, 174, 99, .1) 100%) 0 0 / 250% 100%,
    linear-gradient(180deg, rgba(231, 207, 150, .16), rgba(157, 122, 53, .05));
  -webkit-background-clip: text; background-clip: text; animation: sheen 9s ease-in-out infinite; padding-bottom: .08em; }
@keyframes sheen { 0% { background-position: 100% 0, 0 0; } 60%, 100% { background-position: 0% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .site-footer .big { animation: none; } }

/* ---------- Page atmosphere ---------- */
/* Layered light makes the dark theme feel moonlit and the light theme feel printed on warm paper. */
body {
  background:
    radial-gradient(ellipse 80% 48% at 8% 2%, var(--ambient-green), transparent 70%),
    radial-gradient(ellipse 58% 38% at 96% 24%, var(--ambient-gold), transparent 72%),
    linear-gradient(145deg, transparent 0 52%, var(--ambient-ink) 100%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom)) fixed;
}

html[data-theme="light"] body {
  background:
    radial-gradient(ellipse 70% 42% at 4% 2%, var(--paper-glow), transparent 72%),
    radial-gradient(ellipse 56% 34% at 96% 18%, var(--ambient-green), transparent 72%),
    radial-gradient(ellipse 52% 30% at 12% 72%, var(--ambient-gold), transparent 76%),
    linear-gradient(160deg, transparent 0 55%, var(--ambient-ink) 100%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom)) fixed;
}

body, .page-top, .panel, .measure > div, .cta, .stats-card {
  transition: background-color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), color .3s ease;
}

/* Internal page mastheads use the same visual language as the cinematic home hero. */
.page-top {
  background:
    radial-gradient(ellipse 44% 90% at 84% 5%, var(--ambient-green), transparent 72%),
    radial-gradient(ellipse 34% 70% at 12% 88%, var(--ambient-gold), transparent 78%),
    linear-gradient(180deg, rgba(var(--glass-hi-rgb), .18), transparent 75%);
  border-bottom: 1px solid var(--section-edge);
  isolation: isolate;
}
.page-top::after {
  content: ""; position: absolute; z-index: -1; inset-inline: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 18%, var(--gold-soft) 50%, var(--gold-deep) 82%, transparent);
  opacity: .48; box-shadow: 0 0 24px var(--ornament);
}
html[data-theme="light"] .page-top {
  background:
    radial-gradient(ellipse 46% 100% at 86% 0%, rgba(77, 119, 74, .1), transparent 70%),
    radial-gradient(ellipse 38% 75% at 8% 100%, rgba(184, 105, 61, .08), transparent 76%),
    linear-gradient(180deg, rgba(255, 253, 247, .72), rgba(244, 239, 227, .18));
}

/* Alternating pools of light give the long homepage a composed editorial rhythm. */
.landing :is(.deco-heritage, .deco-rings, .deco-scale, .deco-discover, .deco-species) {
  position: relative;
}
.landing .deco-heritage {
  background: radial-gradient(ellipse 48% 60% at 8% 64%, var(--ambient-green), transparent 76%);
}
.landing .deco-rings {
  background:
    radial-gradient(ellipse 42% 58% at 88% 20%, var(--ambient-gold), transparent 76%),
    linear-gradient(180deg, transparent, rgba(var(--glass-hi-rgb), .1), transparent);
}
.landing .deco-scale {
  background: radial-gradient(ellipse 62% 56% at 50% 62%, var(--ambient-green), transparent 76%);
}
.landing .deco-discover {
  background:
    linear-gradient(90deg, rgba(var(--glass-hi-rgb), .08), transparent 38% 64%, rgba(var(--glass-hi-rgb), .07)),
    radial-gradient(ellipse 40% 64% at 14% 50%, var(--ambient-gold), transparent 78%);
  border-block: 1px solid rgba(210, 174, 99, .08);
}
.landing .deco-species {
  background: radial-gradient(ellipse 42% 58% at 90% 72%, var(--ambient-green), transparent 76%);
}
html[data-theme="light"] .landing .deco-discover { border-block-color: rgba(125, 94, 25, .09); }

/* Raised paper / carved wood surfaces: restrained depth, with a fine illuminated edge. */
:is(.panel, .measure, .cta, .stats-card) {
  box-shadow:
    0 28px 64px -42px var(--surface-shadow),
    inset 0 1px 0 var(--surface-highlight);
}
.panel {
  background:
    linear-gradient(145deg, rgba(var(--glass-hi-rgb), .16), transparent 42%),
    var(--forest);
  border-color: var(--section-edge);
}
.measure { border-color: var(--section-edge); }
.measure > div {
  background:
    linear-gradient(145deg, rgba(var(--glass-hi-rgb), .13), transparent 52%),
    var(--forest);
}
.measure > div:first-child { box-shadow: inset 3px 0 0 rgba(210, 174, 99, .42); }
html[dir="rtl"] .measure > div:first-child { box-shadow: inset -3px 0 0 rgba(210, 174, 99, .42); }

html[data-theme="light"] .panel {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .58), transparent 48%),
    rgba(235, 228, 211, .72);
}

.cta {
  background:
    radial-gradient(ellipse 58% 100% at 100% 0%, var(--ambient-green), transparent 76%),
    radial-gradient(ellipse 42% 70% at 0% 100%, var(--ambient-gold), transparent 78%),
    linear-gradient(135deg, var(--forest), var(--canopy));
  border-color: var(--section-edge);
}
html[data-theme="light"] .cta {
  background:
    radial-gradient(ellipse 58% 100% at 100% 0%, rgba(77, 119, 74, .14), transparent 76%),
    radial-gradient(ellipse 42% 70% at 0% 100%, rgba(184, 105, 61, .11), transparent 78%),
    linear-gradient(135deg, rgba(255, 253, 247, .82), rgba(226, 217, 196, .84));
}

/* A controlled colour grade ties the two hero photographs to their theme. */
@media (min-width: 761px) {
  .hero-painted::before, html[dir="rtl"] .hero-painted::before {
    background:
      radial-gradient(ellipse 44% 76% at 74% 36%, rgba(210, 174, 99, .09), transparent 72%),
      linear-gradient(90deg, rgba(5, 17, 12, .2), transparent 42% 76%, rgba(5, 12, 8, .14));
  }
  html[data-theme="light"] .hero-painted::before,
  html[data-theme="light"][dir="rtl"] .hero-painted::before {
    background:
      radial-gradient(ellipse 48% 78% at 18% 42%, rgba(255, 238, 191, .2), transparent 70%),
      linear-gradient(90deg, rgba(255, 248, 229, .09), transparent 48% 82%, rgba(111, 70, 30, .08));
  }
}

/* ---------- Blown leaves: in front of the page, under the header, never taking clicks ---------- */
.leaf-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; }

/* ---------- Light theme touches ---------- */
/* the gold roots and the discover paintings sit on paper instead of night */
html[data-theme="light"] .roots-art img { filter: brightness(.72) saturate(1.35) contrast(1.1); }
html[data-theme="light"] .experience img.plate-art { background: radial-gradient(circle at 50% 45%, #f7f2e6, #e6ddc8); }
/* the footer name in a deeper gold sheen, so it reads on light paper */
html[data-theme="light"] .site-footer .big {
  background: linear-gradient(100deg, rgba(148, 112, 31, .22) 0%, rgba(148, 112, 31, .22) 38%, rgba(125, 94, 25, .55) 50%, rgba(148, 112, 31, .22) 62%, rgba(148, 112, 31, .22) 100%) 0 0 / 250% 100%,
    linear-gradient(180deg, rgba(148, 112, 31, .2), rgba(110, 82, 22, .08));
  -webkit-background-clip: text; background-clip: text; }
/* Veil: a frosted-glass card behind the words. It starts on the page's content line (like the numbers card),
   the words sit inset inside it, and the glass fades out toward the tree. Mostly blur, only a faint tint. */
.hero-painted .wrap { position: relative; isolation: isolate; }
.portrait-info { isolation: isolate; }
.veil { position: absolute; z-index: -1; pointer-events: none; border-radius: 24px;
  inset-inline-start: var(--gutter); width: min(880px, 76%);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  background: linear-gradient(90deg, rgba(var(--shade-rgb), .32), rgba(var(--shade-rgb), .12));
  border: 1px solid rgba(255, 255, 255, .08); border-inline-end: 0;
  -webkit-mask: linear-gradient(90deg, #000 55%, transparent 100%); mask: linear-gradient(90deg, #000 55%, transparent 100%); }
html[dir="rtl"] .veil { background: linear-gradient(270deg, rgba(var(--shade-rgb), .32), rgba(var(--shade-rgb), .12));
  -webkit-mask: linear-gradient(270deg, #000 55%, transparent 100%); mask: linear-gradient(270deg, #000 55%, transparent 100%); }
.hero-painted .veil { top: 80px; bottom: calc(var(--bridge) + clamp(2rem, 6vh, 3.5rem) - 40px); }
.portrait-info .veil { top: -36px; bottom: -36px; }
/* the words inset inside the glass by the same padding as the numbers card */
@media (min-width: 761px) {
  .hero-painted .wrap, .portrait-info { padding-inline-start: calc(var(--gutter) + clamp(1rem, 3vw, 2.5rem)); }
}
@media (max-width: 760px) { .hero-painted .veil { display: none; } .portrait-info .veil { width: auto; inset-inline: 0; } }

/* cards over photographs: frosted glass behind the words instead of a dark overlay */
.tree-card::before, .feature::before, .tour-card::before { inset: 45% 0 0; top: auto; height: 58%;
  background: linear-gradient(180deg, rgba(var(--shade-rgb), 0) 20%, rgba(var(--shade-rgb), .38));
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  -webkit-mask: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 70%); mask: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 70%); }
.tree-card::before { border-radius: 0 0 var(--card-radius) var(--card-radius); }
.tree-card :is(h3, .sci, .meta, small, b), .feature .body, .tour-card .body { text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }

@media (max-width: 760px) { .hero-painted .veil { display: none; } .portrait-info .veil { width: auto; inset-inline-end: 0; } }
.portraits::after, html[dir="rtl"] .portraits::after { background: linear-gradient(180deg, var(--night) 0%, transparent 16%, transparent 100%) !important; }
/* by day the portraits rise out of the paper and settle back into it */
/* by day the portraits start cleanly under the numbers card, with no fade */
html[data-theme="light"] .portraits::after { background: none !important; }
html[data-theme="light"] .hero-painted h1 { text-shadow: 0 1px 24px rgba(255, 250, 238, .8); }
html[data-theme="light"] .hero-painted .hero-quote { text-shadow: 0 1px 14px rgba(255, 250, 238, .9); }
html[data-theme="light"] .hero-painted .eyebrow { text-shadow: 0 0 10px rgba(255, 250, 238, .95), 0 0 3px rgba(255, 250, 238, .9); color: #6e5216; }
/* paintings on paper cast a light shadow */
html[data-theme="light"] .species-plate { filter: drop-shadow(0 12px 18px rgba(80, 64, 30, .14)); }


/* the hero's lower edge: a fine gold line from edge to edge, passing behind the numbers card, with a soft glow */
.hero-line { position: absolute; z-index: -1; left: 0; right: 0; top: clamp(70px, 9vw, 120px); height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold) 4%, var(--gold-soft) 50%, var(--gold) 96%, transparent);
  box-shadow: 0 0 14px 1px rgba(210, 174, 99, .55), 0 0 40px 2px rgba(210, 174, 99, .22); }
.hero-line::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 36px;
  background: linear-gradient(180deg, rgba(210, 174, 99, .12), transparent); }
.numbers .wrap { position: relative; }
/* by day the numbers card casts only a soft shadow */
html[data-theme="light"] .stats-card { box-shadow: 0 18px 40px -26px rgba(80, 64, 30, .35), inset 0 1px 0 rgba(255, 255, 255, .5); }

/* tree card age: a ring seal of frosted glass, with room around the figure and a fine inner ring */
.tree-card .age { width: 86px; height: 86px; padding: 12px; box-sizing: border-box; text-align: center; line-height: 1;
  background: rgba(var(--shade-rgb), .8); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(210, 174, 99, .55); box-shadow: inset 0 0 0 4px rgba(var(--shade-rgb), .3), inset 0 0 0 5px rgba(210, 174, 99, .25), 0 8px 20px -8px rgba(0, 0, 0, .5); }
.tree-card .age b { font-size: 1.35rem; font-weight: 500; letter-spacing: -.01em; margin-bottom: 4px; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.tree-card .age small { font-size: .55rem; letter-spacing: .18em; color: var(--parchment); opacity: .8; }

/* quick facts: the figure inside each sentence is the headline, so it is said once */
.fact-text { font-size: .9rem; }
.fact-text { line-height: 1.55; }
.fact-text b { font: 500 1.45em/1 var(--display); color: var(--gold-soft); }

/* scrollbars: slim, with a gold thumb on a track in the page colour */
html { scrollbar-width: thin; scrollbar-color: rgba(210, 174, 99, .55) var(--night); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--night); }
::-webkit-scrollbar-thumb { background: rgba(210, 174, 99, .45); border-radius: 99px; border: 3px solid var(--night); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
html[data-theme="light"] { scrollbar-color: rgba(148, 112, 31, .5) var(--night); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(148, 112, 31, .45); }
/* the header stays dark by day too; over the bright page its glass is fuller, so it reads as a dark bar, not grey */
html[data-theme="light"] .site-header { background: linear-gradient(180deg, rgba(var(--shade-rgb), .72), rgba(var(--glass-rgb), .6)); }
html[data-theme="light"] .site-header.solid { background: rgba(var(--glass-rgb), .94); }

/* decoration by day: the gold line art is drawn for a dark page, so on paper it is deepened and given more presence */
html[data-theme="light"] :is(.deco-heritage, .deco-rings, .deco-species)::before { opacity: .32; filter: brightness(.55) saturate(1.5); }
html[data-theme="light"] .deco-discover::before { opacity: .14; filter: brightness(.55) saturate(1.5); }
html[data-theme="light"] .deco-scale::before { opacity: .16; filter: brightness(.55) saturate(1.5); }
html[data-theme="light"] :is(.stats-card::before, .cta::after) { opacity: .16; filter: brightness(.55) saturate(1.5); }
html[data-theme="light"] .rings-bg { opacity: .2; }
html[data-theme="light"] .cta .rings-bg { opacity: .24; }

/* ---------- Expressive composition ---------- */
/* The first pass was deliberately quiet. These broader colour fields make each theme unmistakable. */
.landing .deco-heritage {
  background:
    linear-gradient(112deg, rgba(48, 91, 65, .42) 0%, rgba(36, 67, 51, .2) 32%, transparent 68%),
    radial-gradient(ellipse 54% 66% at 8% 58%, var(--ambient-green), transparent 74%);
}
.landing .deco-rings {
  background:
    linear-gradient(248deg, rgba(132, 74, 42, .24) 0%, rgba(78, 51, 34, .12) 31%, transparent 66%),
    radial-gradient(ellipse 50% 62% at 88% 24%, var(--ambient-gold), transparent 74%);
}
.landing .deco-scale {
  background:
    linear-gradient(180deg, rgba(9, 25, 18, .2), rgba(48, 91, 65, .26) 50%, rgba(9, 25, 18, .12)),
    radial-gradient(ellipse 68% 60% at 50% 62%, var(--ambient-green), transparent 74%);
}
.landing .deco-discover {
  background:
    linear-gradient(105deg, rgba(117, 67, 39, .28), rgba(44, 70, 52, .2) 48%, rgba(22, 48, 34, .28)),
    radial-gradient(ellipse 44% 68% at 12% 48%, var(--ambient-gold), transparent 76%);
  border-block-color: rgba(210, 174, 99, .2);
}
.landing .deco-species {
  background:
    linear-gradient(250deg, rgba(48, 91, 65, .36) 0%, rgba(36, 67, 51, .14) 36%, transparent 70%),
    radial-gradient(ellipse 46% 62% at 92% 72%, var(--ambient-green), transparent 74%);
}

html[data-theme="light"] .landing .deco-heritage {
  background:
    linear-gradient(112deg, rgba(160, 183, 145, .48), rgba(217, 225, 199, .36) 36%, transparent 70%),
    radial-gradient(ellipse 54% 66% at 8% 58%, rgba(77, 119, 74, .13), transparent 74%);
}
html[data-theme="light"] .landing .deco-rings {
  background:
    linear-gradient(248deg, rgba(202, 143, 101, .32), rgba(236, 211, 181, .28) 34%, transparent 68%),
    radial-gradient(ellipse 50% 62% at 88% 24%, rgba(184, 105, 61, .12), transparent 74%);
}
html[data-theme="light"] .landing .deco-scale {
  background:
    linear-gradient(180deg, rgba(255, 253, 247, .2), rgba(189, 207, 179, .34) 52%, rgba(255, 253, 247, .18)),
    radial-gradient(ellipse 68% 60% at 50% 62%, rgba(77, 119, 74, .12), transparent 74%);
}
html[data-theme="light"] .landing .deco-discover {
  background:
    linear-gradient(105deg, rgba(216, 163, 121, .34), rgba(224, 224, 196, .42) 48%, rgba(183, 204, 174, .38)),
    radial-gradient(ellipse 44% 68% at 12% 48%, rgba(184, 105, 61, .1), transparent 76%);
  border-block-color: rgba(125, 94, 25, .2);
}
html[data-theme="light"] .landing .deco-species {
  background:
    linear-gradient(250deg, rgba(157, 183, 143, .42), rgba(218, 226, 201, .3) 38%, transparent 72%),
    radial-gradient(ellipse 46% 62% at 92% 72%, rgba(77, 119, 74, .12), transparent 74%);
}

/* Headings end in a crafted gold stroke, echoing the archive's woven diamond mark. */
.section-head h2, .deco-heritage h2, .species-block h2 {
  position: relative; width: fit-content;
}
.section-head h2::after, .deco-heritage h2::after, .species-block h2::after {
  content: ""; display: block; width: clamp(54px, 7vw, 96px); height: 3px; margin-top: .42em;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft) 70%, transparent);
  border-radius: 999px; box-shadow: 0 0 18px var(--ornament);
}
html[dir="rtl"] :is(.section-head h2, .deco-heritage h2, .species-block h2)::after {
  background: linear-gradient(270deg, var(--gold-deep), var(--gold-soft) 70%, transparent);
}

/* Quick facts become a recognisable archive insert instead of loose text. */
.facts-card {
  padding: clamp(1rem, 2.5vw, 1.5rem); border: 1px solid var(--section-edge); border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(var(--glass-hi-rgb), .2), transparent 55%),
    rgba(var(--glass-rgb), .34);
  box-shadow: 0 24px 50px -38px var(--surface-shadow), inset 0 1px 0 var(--surface-highlight);
}
html[data-theme="light"] .facts-card { background: rgba(255, 252, 243, .62); }

/* Search and sorting read as one crafted control desk. */
body[data-page="trees"] .toolbar {
  padding: clamp(.75rem, 1.5vw, 1rem); margin-top: -2rem; position: relative; z-index: 2;
  border: 1px solid var(--section-edge); border-radius: 22px;
  background: rgba(var(--glass-rgb), .72); backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: 0 22px 58px -38px var(--surface-shadow), inset 0 1px 0 var(--surface-highlight);
}

/* Species are presented as individual botanical folios. */
.species-body { counter-reset: botanical-folio; }
.species-block {
  counter-increment: botanical-folio; position: relative; margin-block: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2rem, 4vw, 3.25rem); border: 1px solid var(--section-edge); border-radius: 30px;
  background:
    radial-gradient(ellipse 46% 70% at 100% 0%, var(--ambient-green), transparent 76%),
    linear-gradient(145deg, rgba(var(--glass-hi-rgb), .16), rgba(var(--glass-rgb), .18));
  box-shadow: 0 34px 76px -54px var(--surface-shadow), inset 0 1px 0 var(--surface-highlight);
  overflow: hidden;
}
.species-block::after {
  content: counter(botanical-folio, decimal-leading-zero); position: absolute; inset-inline-end: clamp(1rem, 3vw, 2rem); top: .55rem;
  font: 300 clamp(3.4rem, 7vw, 6.5rem)/1 var(--display); letter-spacing: -.06em; color: var(--gold); opacity: .09;
  pointer-events: none;
}
.species-block:nth-child(even) {
  background:
    radial-gradient(ellipse 46% 70% at 0% 100%, var(--ambient-gold), transparent 76%),
    linear-gradient(215deg, rgba(var(--glass-hi-rgb), .14), rgba(var(--glass-rgb), .18));
}
html[data-theme="light"] .species-block {
  background:
    radial-gradient(ellipse 48% 72% at 100% 0%, rgba(77, 119, 74, .13), transparent 76%),
    linear-gradient(145deg, rgba(255, 253, 247, .88), rgba(232, 226, 207, .68));
}
html[data-theme="light"] .species-block:nth-child(even) {
  background:
    radial-gradient(ellipse 48% 72% at 0% 100%, rgba(184, 105, 61, .1), transparent 76%),
    linear-gradient(215deg, rgba(255, 253, 247, .88), rgba(235, 225, 204, .7));
}

/* A bold asymmetric field behind internal titles makes the new direction visible immediately. */
.page-top::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(51, 90, 66, .48) 0 28%, transparent 62%);
  clip-path: polygon(0 0, 58% 0, 42% 100%, 0 100%);
}
html[dir="rtl"] .page-top::before {
  background: linear-gradient(245deg, rgba(51, 90, 66, .48) 0 28%, transparent 62%);
  clip-path: polygon(42% 0, 100% 0, 100% 100%, 58% 100%);
}
html[data-theme="light"] .page-top::before {
  background: linear-gradient(115deg, rgba(166, 187, 149, .42) 0 28%, rgba(220, 227, 202, .18) 46%, transparent 68%);
}
html[data-theme="light"][dir="rtl"] .page-top::before {
  background: linear-gradient(245deg, rgba(166, 187, 149, .42) 0 28%, rgba(220, 227, 202, .18) 46%, transparent 68%);
}

@media (max-width: 760px) {
  .landing :is(.deco-heritage, .deco-rings, .deco-scale, .deco-discover, .deco-species) { background-size: 170% 100%; }
  body[data-page="trees"] .toolbar { margin-top: -1rem; padding: .45rem; background: rgba(var(--glass-rgb), .5); }
  .species-block { border-radius: 22px; padding: 1.25rem; }
  .page-top::before { opacity: .72; }
}

/* ---------- Living glass material ---------- */
/* Keep the colour composition visible through every information surface in both themes. */
:is(.panel, .facts-card, .cta, .species-block, .era-legend, .era-diagram-card, body[data-page="trees"] .toolbar) {
  backdrop-filter: blur(18px) saturate(1.18); -webkit-backdrop-filter: blur(18px) saturate(1.18);
  box-shadow: 0 26px 58px -40px var(--surface-shadow), inset 0 1px 0 var(--surface-highlight);
}
html[data-theme="light"] .panel {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .5), transparent 48%),
    rgba(235, 228, 211, .5);
}
html[data-theme="light"] .facts-card { background: rgba(255, 252, 243, .48); }
html[data-theme="light"] body[data-page="trees"] .toolbar { background: rgba(250, 246, 236, .56); }
html[data-theme="light"] .cta {
  background:
    radial-gradient(ellipse 58% 100% at 100% 0%, rgba(77, 119, 74, .13), transparent 76%),
    radial-gradient(ellipse 42% 70% at 0% 100%, rgba(184, 105, 61, .1), transparent 78%),
    linear-gradient(135deg, rgba(255, 253, 247, .64), rgba(226, 217, 196, .54));
}
html[data-theme="light"] .species-block {
  background:
    radial-gradient(ellipse 48% 72% at 100% 0%, rgba(77, 119, 74, .12), transparent 76%),
    linear-gradient(145deg, rgba(255, 253, 247, .68), rgba(232, 226, 207, .48));
}
html[data-theme="light"] .species-block:nth-child(even) {
  background:
    radial-gradient(ellipse 48% 72% at 0% 100%, rgba(184, 105, 61, .1), transparent 76%),
    linear-gradient(215deg, rgba(255, 253, 247, .68), rgba(235, 225, 204, .5));
}
html[data-theme="light"] :is(.era-legend, .era-diagram-card) {
  background:
    radial-gradient(ellipse 80% 140% at 100% 0%, rgba(134, 163, 121, .17), transparent 68%),
    linear-gradient(135deg, rgba(255, 253, 247, .66), rgba(234, 226, 207, .54));
  border-color: rgba(125, 94, 25, .38);
  box-shadow: 0 20px 42px -30px rgba(72, 56, 28, .42), inset 0 1px 0 rgba(255, 255, 255, .88);
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  /* field-note reports: the side table drops under the text instead of squeezing into a sliver */
  .report .cols:has(> div:nth-child(2) table) { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  /* report tabs wrap onto rows instead of running off the edge */
  .dossier-tabs { flex-wrap: wrap; overflow: visible; }
  .dossier-tabs button { font-size: .8rem; padding: .45rem .8rem; }
  /* the hero's pause button moves to the top corner, clear of the buttons */
  .hero-painted .video-toggle { bottom: auto; top: 92px; inset-inline-end: auto; inset-inline-start: var(--gutter); }
}
@media (max-width: 640px) {
  /* "what this tree has witnessed" becomes a vertical list: years read top to bottom, nothing overlaps */
  .witness { padding-block: var(--s3); }
  .witness .track { height: auto; margin: 0; background: none; display: grid; gap: var(--s4); padding-inline-start: 30px; position: relative; }
  .witness .track::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 6px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--copper), var(--gold-deep), var(--gold-soft)); }
  .witness .life { display: none; }
  .witness .ev, html[dir="rtl"] .witness .ev { position: relative; left: auto !important; right: auto !important; top: auto; transform: none; width: auto; height: auto; border: 0; background: none; border-radius: 0; }
  .witness .ev.root, .witness .ev.now { background: none; border: 0; width: auto; height: auto; }
  .witness .ev::before { content: ""; position: absolute; inset-inline-start: -30px; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: var(--night); border: 2px solid var(--gold); }
  .witness .ev.root::before { background: var(--copper); border-color: var(--copper); }
  .witness .ev.now::before { background: var(--sage); border-color: var(--sage); }
  .witness .ev span, .witness .ev span.up, .witness .ev span.down { position: static; transform: none; max-width: none; width: auto; text-align: start; font-size: .85rem; display: flex; align-items: baseline; gap: .6rem; }
  .witness .ev span::before { display: none; }
  .witness .ev span b { min-width: 3.6rem; font-size: 1.05rem; }
}
/* the heights chart is a drawing laid out left to right; Arabic labels inside it still read correctly */
.heights svg { direction: ltr; }