/* =====================================================================
   PROJECT BINORIA X  —  Inner Page Styles
   Shared foundation for every interior page (legal, 404 + future pages).
   Reuses the master design tokens from style.css.
   ===================================================================== */

/* ---------- Page hero band (sub-page header) ---------- */
.page-hero{
  position:relative;
  padding:calc(var(--header-h) + 72px) 0 64px;
  background:
    radial-gradient(120% 140% at 85% -20%, rgba(184,134,11,.18), transparent 55%),
    linear-gradient(135deg, var(--teal-900) 0%, var(--teal-deep) 48%, var(--navy) 100%);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:url('../images/girih-pattern.svg');
  background-size:520px;mix-blend-mode:soft-light;
}
.page-hero__girih{
  position:absolute;top:-70px;right:-60px;width:320px;height:320px;
  color:var(--gold-soft);opacity:.16;z-index:-1;pointer-events:none;
}
.page-hero .eyebrow{color:var(--gold-soft)}
.page-hero h1{
  font-family:var(--font-display);font-weight:700;line-height:1.06;
  font-size:var(--step-4);margin:.35em 0 .3em;letter-spacing:-.01em;
}
.page-hero p{
  max-width:62ch;color:rgba(255,255,255,.82);
  font-size:var(--step-1);line-height:1.6;margin:0;
}
.breadcrumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:var(--step--1);color:rgba(255,255,255,.62);margin-top:26px;
}
.breadcrumb a{color:rgba(255,255,255,.78)}
.breadcrumb a:hover{color:var(--gold-soft)}
.breadcrumb i{width:14px;height:14px;opacity:.6}

/* ---------- Prose / legal content ---------- */
.prose{
  max-width:var(--container-narrow);
  font-size:var(--step-0);color:var(--ink-2);line-height:1.78;
}
.prose > *+*{margin-top:1.1em}
.prose h2{
  font-family:var(--font-display);font-weight:700;color:var(--ink);
  font-size:var(--step-2);line-height:1.2;margin:2em 0 .2em;
  padding-top:.4em;
}
.prose h2:first-child{margin-top:0}
.prose h3{
  font-family:var(--font-display);font-weight:600;color:var(--teal-deep);
  font-size:var(--step-1);margin:1.6em 0 .1em;
}
.prose p{margin:0}
.prose a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--gold-line)}
.prose a:hover{color:var(--gold)}
.prose ul,.prose ol{margin:.4em 0 0;padding-left:1.35em}
.prose li{margin:.45em 0}
.prose li::marker{color:var(--gold)}
.prose strong{color:var(--ink);font-weight:600}
.prose hr{border:0;height:1px;background:var(--line);margin:2.4em 0}
.prose .lead-note{
  border-left:3px solid var(--gold);background:var(--paper);
  padding:18px 22px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--muted);font-size:var(--step-0);
}
.prose .updated{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--step--1);color:var(--muted-2);
  letter-spacing:.04em;text-transform:uppercase;font-weight:600;
}

/* ---------- 404 ---------- */
.err{
  min-height:72vh;display:grid;place-items:center;text-align:center;
  padding:calc(var(--header-h) + 80px) 0 90px;position:relative;overflow:hidden;
}
.err__inner{position:relative;z-index:2;max-width:660px;padding:0 24px}
.err__code{
  font-family:var(--font-display);font-weight:700;line-height:.9;
  font-size:clamp(5.5rem,12vw,9rem);letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--teal) 0%,var(--gold) 120%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.err__arch{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);
  width:min(560px,86vw);height:auto;opacity:.10;z-index:1;color:var(--teal);
}
.err h1{font-family:var(--font-display);font-weight:700;font-size:var(--step-3);color:var(--ink);margin:.2em 0 .35em}
.err p{color:var(--muted);font-size:var(--step-1);max-width:48ch;margin:0 auto 1.8em}
.err__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media (max-width:560px){
  .page-hero{padding-top:calc(var(--header-h) + 52px);padding-bottom:48px}
}

/* ============ REAL PHOTO INTEGRATION (inner pages) ============ */
.about__panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* Large portrait frame for leadership inner page */
.portrait{ position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/4.7; background:linear-gradient(150deg,var(--teal),var(--teal-900));
  box-shadow:var(--shadow-lg); border:1px solid var(--line); }
.portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.portrait--round{ aspect-ratio:1/1; border-radius:50%; max-width:200px; }
/* Photo gallery grid (Phase 3) */
.photo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(min-width:680px){ .photo-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1000px){ .photo-grid{ grid-template-columns:repeat(4,1fr); } }
.photo-grid .g-tile{ aspect-ratio:1/1; }