/* About page — "The Observatory" (FE-006).
   Loaded only on the About page (functions.php::bmhud_assets(), is_page(
   'about-basel-mefleh'), PLAT-007). Never move any of this into global.css
   — that file loads on every page and would leak this page's layout
   everywhere.

   Revised after owner review of the first two-panel build: that layout put
   `.about-owl-panel{ background:var(--ink) }` behind the owl — a second,
   darker-than-page panel — which read as a dark rounded box/card, and the
   full-viewport-height two-column grid felt stretched/sparse on a wide
   monitor. This version drops both: there is no owl-panel background and
   no `.about-main` grid — the owl sits directly on `.bmhud-about`'s own
   `--obsidian` background (one continuous surface, no seam), as a centered
   hero, with the words in a contained column below it. Nothing forces a
   viewport-height minimum; the page's own content sets its height.

   The owl (assets/owl.png) is still PLAT-007's pre-cut TRANSPARENT PNG —
   the black field is already keyed to alpha 0. Rendered as a plain <img>
   with no mix-blend-mode: the transparent field composites cleanly over
   the page background with nothing left to blend away, so there is no
   residual rectangle/box behind it. Glow is a single TIGHT gold
   drop-shadow only — kept deliberately small/subtle so the owl's own
   lines read crisp and luminous without casting a diffuse light patch on
   the background. (A second owner pass removed the radial-gradient halo
   that previously sat behind the owl, and the wide/soft second
   drop-shadow layer that read the same way — "a light behind the owl" —
   erring toward flat over glowy per that feedback.) The slow travelling
   light is a separate overlay masked to the owl PNG's own shape, so the
   transparent field contributes no mask coverage and the sweep only ever
   lights the owl itself (kept, per the owner). */

.bmhud-about{
  --ink:#080B08; --obsidian:#0A0F0B; --surface:#121A13; --elevated:#1A241B;
  --pine:#0C3A0D; --forest:#104911; --emerald:#1E7A2C;
  --gold-deep:#B9842A; --gold:#E2A837; --gold-light:#EFC35C;
  --heading:#F4EFE3; --body:#CFC9BB; --muted:#8E8B7E;
  --border:rgba(244,239,227,0.10); --border-gold:rgba(226,168,55,0.30);
  --nav-bg:rgba(10,15,11,0.72);
  --owl-awake-display:block; --owl-sleeping-display:none;
  --owl-awake-filter:drop-shadow(0 0 10px rgba(226,168,55,0.28));
  --owl-sweep-display:block; --owl-sweep-animation:about-owl-sweep 8s ease-in-out infinite;
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",monospace;
}

/* Light edition — daylight paper, not an inversion. These two About-scoped
   blocks intentionally stay identical: explicit Light and Auto/OS Light
   receive the same palette and the same sleeping-owl state. */
:root[data-theme="light"] .bmhud-about{
  --ink:#DED6C1; --obsidian:#E7E0CE; --surface:#DFD7C3; --elevated:#D7CEB7;
  --gold-deep:#7A5511; --gold:#B9842A; --gold-light:#946815;
  --heading:#2A2820; --body:#3E3A2D; --muted:#544E38;
  --bm-gold-ink:#664914; --bm-gold-ink-hover:#5B4010;
  --bm-hover-from-gold:var(--bm-gold-ink-hover);
  --bm-on-gold:#1A1712; --bm-focus:var(--bm-gold-ink);
  --border:rgba(42,40,32,0.14); --border-gold:rgba(185,132,42,0.36);
  --nav-bg:rgba(231,224,206,0.78);
  --owl-awake-display:none; --owl-sleeping-display:block;
  --owl-awake-filter:none;
  --owl-sweep-display:none; --owl-sweep-animation:none;
}
:root[data-theme="light"] .bmhud-about .about-words .bm-kicker{
  color:var(--bm-gold-ink);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .bmhud-about{
    --ink:#DED6C1; --obsidian:#E7E0CE; --surface:#DFD7C3; --elevated:#D7CEB7;
    --gold-deep:#7A5511; --gold:#B9842A; --gold-light:#946815;
    --heading:#2A2820; --body:#3E3A2D; --muted:#544E38;
    --bm-gold-ink:#664914; --bm-gold-ink-hover:#5B4010;
    --bm-hover-from-gold:var(--bm-gold-ink-hover);
    --bm-on-gold:#1A1712; --bm-focus:var(--bm-gold-ink);
    --border:rgba(42,40,32,0.14); --border-gold:rgba(185,132,42,0.36);
    --nav-bg:rgba(231,224,206,0.78);
    --owl-awake-display:none; --owl-sleeping-display:block;
    --owl-awake-filter:none;
    --owl-sweep-display:none; --owl-sweep-animation:none;
  }
  :root:not([data-theme="dark"]) .bmhud-about .about-words .bm-kicker{
    color:var(--bm-gold-ink);
  }
}
.bmhud-about *{ box-sizing:border-box; }

.bmhud-about{
  background:var(--obsidian); color:var(--body); font-family:var(--sans);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.bmhud-about a{ color:var(--bm-gold-ink,var(--gold)); text-decoration:none; transition:color .18s ease; }
.bmhud-about a:hover{ color:var(--bm-gold-ink-hover,var(--gold-light)); }
.bmhud-about a:focus-visible{ outline:2px solid var(--bm-focus,var(--gold)); outline-offset:2px; border-radius:2px; }

.bmhud-about .about-page{ max-width:1240px; margin:0 auto; padding:0 28px; }

/* ---- Sticky blurred nav (same grammar as single.php's .notebook-nav /
   the listing family's .listing-nav — replicated under about-* classes,
   the theme's established per-template pattern, so this stylesheet stays
   self-contained). ---- */
.bmhud-about .about-nav{
  position:sticky; top:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:18px 28px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  background:var(--nav-bg);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.bmhud-about .about-nav-brand{ color:var(--heading); font-family:var(--serif); font-weight:600; font-size:18px; line-height:1; letter-spacing:0; }
.bmhud-about .about-nav-brand b{ color:var(--bm-gold-ink,var(--gold)); font-weight:inherit; }
.bmhud-about .about-nav-right{ display:flex; align-items:center; gap:18px; }
.bmhud-about .about-nav-back{ color:var(--muted); font-size:12px; letter-spacing:.05em; white-space:nowrap; }
.bmhud-about .about-nav-back:hover{ color:var(--bm-hover-from-gold,var(--gold)); }

/* ---- Composition (revised — single centered column; direction §1/§2's
   intent kept: eye lands on the owl, then moves into the words. No grid,
   no forced viewport-height, no second background behind the owl.) ---- */
.bmhud-about .about-main{ padding:7vh 0 4vh; }

/* -- Owl hero — centered, on the page's own obsidian background. No
   panel/card and no halo behind it: nothing paints here but the owl
   itself (its own drop-shadow is on the <img>, below). -- */
.bmhud-about .about-owl-hero{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:2vh 0 3vh;
}

.bmhud-about .about-owl-wrap{ position:relative; width:min(80%,460px); }

/* Plain <img>, no blend mode — see file header. A single TIGHT drop-shadow
   only, hugging the owl's own (transparent-cutout) silhouette — no wide/
   soft second layer, so there is no diffuse glow patch left on the
   background around the owl. */
.bmhud-about .about-owl{
  display:block; width:100%; height:auto;
}
.bmhud-about .about-owl-awake{
  display:var(--owl-awake-display);
  filter:var(--owl-awake-filter);
}
.bmhud-about .about-owl-sleeping{
  display:var(--owl-sleeping-display);
  filter:none;
}

/* Slow travelling gold light — unchanged: masked to the owl PNG's own
   shape so the transparent field contributes no mask coverage: the sweep
   only ever lights the owl, never a box. Kept slow (8s) and faint. */
.bmhud-about .about-owl-sweep{
  position:absolute; inset:0; display:var(--owl-sweep-display); pointer-events:none;
  background:linear-gradient(115deg,
    transparent 40%, rgba(255,224,140,0.45) 50%, transparent 60%);
  background-size:280% 280%;
  -webkit-mask:url('owl.png') center/contain no-repeat;
          mask:url('owl.png') center/contain no-repeat;
  animation:var(--owl-sweep-animation);
}
@keyframes about-owl-sweep{
  0%{ background-position:120% 120%; }
  50%{ background-position:-20% -20%; }
  100%{ background-position:120% 120%; }
}

/* -- Words — a contained column below the owl, centered on the page but
   left-aligned internally (kicker/lead share the same left edge as the
   body copy — a single deliberate margin, rather than mixing a centered
   heading with left-aligned paragraphs). -- */
.bmhud-about .about-words{ max-width:60ch; margin:0 auto; padding:2vh 0 10vh; }

.bmhud-about .about-words .bm-kicker{ margin:0 0 1.2rem; }

.bmhud-about .about-lead{
  font-family:var(--serif); font-weight:500; color:var(--heading);
  font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.18; letter-spacing:-0.02em;
  margin:0 0 1.8rem;
}

.bmhud-about .about-words p{ font-size:1.05rem; line-height:1.7; color:var(--body); margin:0 0 1.5rem; }
.bmhud-about .about-words p:last-child{ margin-bottom:0; }

.bmhud-about .about-rule{
  width:44px; height:2px; background:var(--gold); opacity:.55;
  border:0; margin:2rem 0;
}

/* ---- Contact sign-off (FE-016) — the page ends like a letter. The email
   is the single prominent channel; the social shelf stays quiet until it
   is touched. ---- */
.bmhud-about .about-contact{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:6px; padding:4vh 0 6vh;
}
.bmhud-about .signoff-lead{
  font-family:var(--serif); font-weight:400; color:var(--body);
  font-size:clamp(1.05rem,2.3vw,1.28rem); line-height:1.5; margin:0;
}
.bmhud-about .signoff-lead em{ color:var(--heading); }
.bmhud-about a.signoff-email{
  font-family:var(--serif); font-style:italic; font-weight:500;
  color:var(--bm-gold-ink,var(--gold)); font-size:clamp(1.7rem,4.6vw,2.5rem);
  line-height:1.15; letter-spacing:-0.01em; margin:.35rem 0 0;
  padding-bottom:3px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .45s cubic-bezier(.2,.7,.2,1), color .18s ease;
}
.bmhud-about a.signoff-email:hover,
.bmhud-about a.signoff-email:focus-visible{
  color:var(--bm-gold-ink-hover,var(--gold-light)); background-size:100% 1.5px;
}
.bmhud-about .signoff-point{
  display:flex; flex-direction:column; align-items:center;
  gap:2px; margin-top:30px;
}
.bmhud-about .signoff-note{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.bmhud-about .signoff-arrow{
  width:34px; height:34px; color:var(--bm-gold-ink,var(--gold)); opacity:.7;
  transition:transform .35s ease;
}
.bmhud-about .signoff-point:hover .signoff-arrow{ transform:translateY(3px); }
.bmhud-about .about-social{
  display:flex; justify-content:center; align-items:center;
  gap:8px; margin-top:4px;
}
.bmhud-about .about-social a.about-social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:9px;
  color:var(--muted); transition:color .18s ease, transform .18s ease;
}
.bmhud-about .about-social a.about-social-link:hover,
.bmhud-about .about-social a.about-social-link:focus-visible{
  color:var(--bm-gold-ink-hover,var(--gold-light)); transform:translateY(-2px);
}
.bmhud-about .about-social a.about-social-link:focus-visible{
  outline:2px solid var(--bm-focus,var(--gold)); outline-offset:2px; border-radius:9px;
}
.bmhud-about .about-social-link svg{ width:20px; height:20px; display:block; }

/* ---- Footer (matches the site-wide grammar) ---- */
.bmhud-about .bm-footer{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  padding:26px 0 46px; margin-top:0; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.bmhud-about .bm-footer b{ color:var(--bm-gold-ink,var(--gold)); }
.bmhud-about .bm-footer-name{ font-family:var(--serif); font-weight:500; font-size:14px; letter-spacing:0; color:var(--heading); }
.bmhud-about .bm-footer-name b{ color:var(--bm-gold-ink,var(--gold)); font-weight:inherit; }

/* ---- Narrow screens — owl a touch smaller, tighter padding. There is no
   more "stack the two panels" case: it's one centered column at every
   width already. ---- */
@media (max-width:640px){
  .bmhud-about .about-page{ padding:0 18px; }
  .bmhud-about .about-nav{ flex-wrap:wrap; padding:16px 18px; }
  .bmhud-about .about-nav-right{ width:100%; justify-content:space-between; }
  .bmhud-about .about-main{ padding:5vh 0 2vh; }
  .bmhud-about .about-owl-wrap{ width:min(68%,300px); }
  .bmhud-about .about-words{ padding:2vh 0 8vh; }
  .bmhud-about .about-contact{ padding:3vh 0 5vh; }
}

/* ---- Motion / accessibility (direction §3, §6) ----
   Sweep switches off cleanly; the owl's static drop-shadow is untouched by
   this rule, so it still looks right with zero motion. ---- */
@media (prefers-reduced-motion:reduce){
  .bmhud-about *{ transition:none !important; }
  .bmhud-about .about-owl-sweep{ animation:none !important; opacity:0; }
}