/* ═══════════════════════════════════════════════════════════════════
   Glen Susans — About Staging (glen-theme port)
   All rules scoped to body.about-staging-page.
   Does not affect any other page on the site.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────
   Defined on body (not :root) so they can't leak to other pages.     */
.about-staging-page {
  --c-orange:           #ff540f;
  --c-orange-hover:     #ff7a3d;
  --c-hero-navy:        #0f1420;
  --c-glow-bright:      #5445CC;
  --c-white:            #ffffff;
  --c-grey-200:         #e5e5e5;
  --c-grey-400:         #9ca3af;
  --c-grey-700:         #4b5563;
  --c-ink:              #1d2438;
  --ink-on-dark:        #f5f5f4;
  --ink-on-dark-muted:  #aab0c2;
  --rule-on-dark:       rgba(245, 245, 244, 0.16);
  --surface-dark:       #0f1420;
  --surface-light:      #ffffff;
  --fs-body-sm:         0.875rem;
  --fs-h1:              clamp(1.85rem, 1.25rem + 2.3vw, 3.25rem);
  --fs-eyebrow:         0.75rem;
  --space-lg:           2.5rem;
  --space-md:           1.5rem;
  --space-sm:           1rem;
  --container-pad:      clamp(1.5rem, 1rem + 2vw, 3rem);
  --ease:               cubic-bezier(0.22, 1, 0.36, 1);
  --dur-slow:           1100ms;
  --font-sans:          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Body background */
body.about-staging-page {
  background-color: var(--c-hero-navy) !important;
}

/* ── Base resets, scoped ───────────────────────────────────────────── */
.about-staging-page .gs-about-wrap,
.about-staging-page .gs-about-wrap *,
.about-staging-page .gs-about-wrap *::before,
.about-staging-page .gs-about-wrap *::after {
  box-sizing: border-box;
}
.about-staging-page .gs-about-wrap ::selection {
  background: #ff540f;
  color: #fff;
}
.about-staging-page .gs-about-wrap img {
  max-width: 100%;
  display: block;
}
.about-staging-page .gs-about-wrap h1,
.about-staging-page .gs-about-wrap h2,
.about-staging-page .gs-about-wrap p:not(.about-split__eyebrow) {
  margin: 0;
}
.about-staging-page .gs-about-wrap a {
  color: inherit;
  text-decoration: none;
}


/* ══════════════════════════════════════════════════════════════════
   ABOUT SPLIT — full-bleed portrait left, dark bio panel right
   ══════════════════════════════════════════════════════════════════ */

.about-staging-page .about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Fill the full viewport. The glen-theme nav is position:fixed so it
     doesn't push content down — the portrait fills edge-to-edge.      */
  min-height: 100svh;
  background: var(--surface-dark);
  font-family: var(--font-sans);
  font-feature-settings: "ss01" 1;
  -webkit-font-smoothing: antialiased;
}

/* ── Left: full-bleed portrait ─────────────────────────────────────── */
.about-staging-page .about-split__portrait {
  position: relative;
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: #000;
}
.about-staging-page .about-split__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  animation: gs-portrait-fade 1250ms ease-out both;
}
@keyframes gs-portrait-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Right: dark bio panel ─────────────────────────────────────────── */
.about-staging-page .about-split__content {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: rgb(9, 11, 21); /* gradient animates in via ::before */
  color: var(--ink-on-dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Glen-theme fixed nav is 64px tall (--gt-nav-height). Push content
     below it so the eyebrow never clips behind the nav bar.            */
  padding-block-start: calc(var(--gt-nav-height, 64px) + clamp(1.25rem, 0.6rem + 1.5vw, 2rem));
  padding-block-end:   clamp(3rem, 2.5rem + 2.5vw, 5.5rem);
  padding-inline: clamp(2rem, 4vw, 5rem) var(--container-pad);
  width: 100%;
}

/* Gradient animates in from transparent over the full intro sequence */
.about-staging-page .about-split__content::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    150deg,
    rgb( 58,  50, 178)   0%,
    rgb( 47,  39, 164)  10%,
    rgb( 35,  30, 135)  22%,
    rgb( 22,  20,  89)  40%,
    rgb( 14,  14,  44)  58%,
    rgb(  9,  12,  26)  74%,
    rgb(  9,  11,  21) 100%
  );
  opacity: 0;
  animation: gs-gradient-reveal 1.2s ease-in-out both;
}
@keyframes gs-gradient-reveal {
  from { opacity: 0.25; }
  to   { opacity: 1; }
}

/* Dark spot behind eyebrow + heading — widens to cover the orange "About Me"
   label and improves contrast against the indigo gradient. */
.about-staging-page .about-split__content::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 44% at 28% 16%,
    rgba(8, 10, 24, 0.28) 0%,
    transparent 100%
  );
}

/* Subtle ambient accent — the gradient provides primary lighting */
.about-staging-page .about-split__glow {
  position: absolute;
  width: 110%;
  height: 70%;
  border-radius: 50%;
  top: -30%;
  left: -30%;
  z-index: 0;
  background: radial-gradient(
    circle,
    rgba(100, 108, 242, 0.33) 0%,
    rgba( 72,  86, 212, 0.18) 35%,
    rgba( 40,  60, 175, 0.07) 65%,
    transparent 80%
  );
  filter: blur(55px);
  opacity: 0.35;
}

/* Film grain overlay */
.about-staging-page .about-split__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Content z-layer above glow and grain */
.about-staging-page .about-split__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  margin-right: auto;
}

/* ── Typography ─────────────────────────────────────────────────────── */
.about-staging-page .about-split__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin: 0 0 0.75rem;
  line-height: 1.4;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.55);
}

.about-staging-page .about-split__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink-on-dark);
  margin: 0;
  opacity: 0; /* JS types characters in and sets opacity: 1 */
}

/* Short decorative rule under the headline */
.about-staging-page .bio__rule {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--ink-on-dark);
  border: 0;
  margin: var(--space-sm) 0 var(--space-lg);
  clip-path: inset(0 100% 0 0);
  animation: gs-rule-draw 500ms ease-out 150ms both;
}
@keyframes gs-rule-draw {
  to { clip-path: inset(0 0% 0 0); }
}

.about-staging-page .bio__cta {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ink-on-dark-muted);
  margin: 0;
}
.about-staging-page .bio__cta a.bio__cta-link {
  color: var(--c-white);
  font-weight: 500;
  text-decoration: none;
  transition: color 200ms ease;
}
.about-staging-page .bio__cta a.bio__cta-link:hover {
  color: var(--c-orange);
}

.about-staging-page .bio__intro,
.about-staging-page .bio__outro {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ink-on-dark-muted);
  max-width: 46ch;
  text-wrap: pretty;
  margin: 0;
}
.about-staging-page .gs-about-wrap .bio__intro + .bio__intro,
.about-staging-page .gs-about-wrap .bio__outro + .bio__cta {
  margin-top: var(--space-md);
}

.about-staging-page .bio__divider {
  display: block;
  height: 1px;
  background: var(--rule-on-dark);
  border: 0;
  margin: 2.2rem 0;
}

/* ── Three pillars ──────────────────────────────────────────────────── */
.about-staging-page .pillars {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr 1.05fr;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.about-staging-page .pillar {
  position: relative;
  padding-inline: clamp(0.5rem, 0.35rem + 0.5vw, 0.85rem);
}
.about-staging-page .pillar:first-child { padding-left: 0; }
.about-staging-page .pillar:last-child  { padding-right: 0; }
.about-staging-page .pillar + .pillar {
  border-left: none;
}
.about-staging-page .pillar + .pillar::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule-on-dark);
  opacity: 0;
}
@keyframes gs-vdivider-fade {
  to { opacity: 1; }
}
.about-staging-page .pillars.dividers-active .pillar + .pillar::before {
  animation: gs-vdivider-fade 900ms var(--ease) both;
}

/* Desktop-only line breaks that lock pillar bodies to 4 lines */
.about-staging-page .d-br { display: none; }
@media (min-width: 981px) { .about-staging-page .d-br { display: inline; } }

.about-staging-page .pillar__title {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-on-dark);
  margin: 0 0 10px !important;
}
.about-staging-page .pillar__body {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--ink-on-dark-muted);
  margin: 0;
}

/* ── Scroll reveal ──────────────────────────────────────────────────── */
.about-staging-page .reveal {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity   900ms var(--ease),
    translate 900ms var(--ease);
}
.about-staging-page .is-revealed .reveal,
.about-staging-page .reveal.is-revealed {
  opacity: 1;
  translate: 0;
}

/* All reveals — JS-chained from typewriter callback, no CSS delays needed */
.about-staging-page .tw-reveal {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity   900ms var(--ease),
    translate 900ms var(--ease);
}
.about-staging-page .tw-reveal.is-revealed {
  opacity: 1;
  translate: 0;
}

/* Horizontal dividers: fade only, no rise */
.about-staging-page .bio__divider.tw-reveal,
.about-staging-page .bio__divider.tw-reveal.is-revealed {
  translate: none;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .about-staging-page .about-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .about-staging-page .about-split__portrait { min-height: 0; }
  .about-staging-page .about-split__portrait img {
    aspect-ratio: 3 / 2;
    height: auto;
    object-position: center 8%;
  }
  .about-staging-page .about-split__content {
    padding-inline: var(--container-pad);
  }
  .about-staging-page .about-split__inner {
    max-width: 640px;
    margin-inline: auto;
  }
}

@media (max-width: 700px) {
  .about-staging-page .pillars {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .about-staging-page .pillar { padding-inline: 0; }
  .about-staging-page .pillar + .pillar {
    border-left: 0;
    border-top: 1px solid var(--rule-on-dark);
    padding-top: var(--space-lg);
  }
  .about-staging-page .pillar + .pillar::before {
    display: none;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .about-staging-page .about-split__portrait img    { animation: none; }
  .about-staging-page .about-split__content::before { animation: none; opacity: 1; }
  .about-staging-page .about-split__title           { opacity: 1; }
  .about-staging-page .bio__rule                    { animation: none; clip-path: none; }
  .about-staging-page .pillar + .pillar::before,
  .about-staging-page .pillars.dividers-active .pillar + .pillar::before {
    animation: none;
    opacity: 1;
  }
  .about-staging-page .reveal,
  .about-staging-page .tw-reveal {
    opacity: 1;
    translate: none;
    transition: none;
    transition-delay: 0s;
  }
}

/* ── Desktop: ~14 % size reduction to match 86 % of base ───────────────
   Overrides tokens and non-token values proportionally at the two-column
   breakpoint (≥ 981 px). No zoom or transform: scale — values are
   genuinely smaller so content fits one viewport without scrolling.
   Does not affect tablet or mobile layout (≤ 980 px).                   */
@media (min-width: 981px) {

  /* Scale CSS custom properties to 86 % of base values */
  .about-staging-page {
    --fs-h1:         clamp(1.591rem, 1.075rem + 1.978vw, 2.795rem);
    --fs-eyebrow:    0.645rem;
    --fs-body-sm:    0.752rem;
    --space-lg:      2.15rem;
    --space-md:      1.29rem;
    --space-sm:      0.86rem;
    --container-pad: clamp(1.29rem, 0.86rem + 1.72vw, 2.58rem);
  }

  /* Right panel padding (non-token clamp values scaled to 86 %) */
  .about-staging-page .about-split__content {
    padding-block-start: calc(var(--gt-nav-height, 64px) + clamp(1.075rem, 0.516rem + 1.29vw, 1.72rem));
    padding-block-end:   clamp(2.58rem, 2.15rem + 2.15vw, 4.73rem);
    padding-inline:      clamp(1.72rem, 3.44vw, 4.3rem) var(--container-pad);
  }

  /* Inner column max-width */
  .about-staging-page .about-split__inner {
    max-width: 482px;
  }

  /* Body copy, outro and cta (explicit clamp, not a token) */
  .about-staging-page .bio__intro,
  .about-staging-page .bio__outro,
  .about-staging-page .bio__cta {
    font-size: clamp(0.86rem, 0.817rem + 0.215vw, 0.914rem);
  }

  /* Divider margins */
  .about-staging-page .bio__divider {
    margin: 1.892rem 0;
  }

  /* Eyebrow bottom margin */
  .about-staging-page .about-split__eyebrow {
    margin-bottom: 0.645rem;
  }

  /* Pillar title bottom margin */
  .about-staging-page .pillar__title {
    margin-bottom: 9.6px !important;
  }

  /* Portrait: scale up 8 % — background absorbs crop, person stays in frame */
  .about-staging-page .about-split__portrait img {
    transform: scale(1.06);
    transform-origin: center 44%;
  }

  /* Pillar column padding */
  .about-staging-page .pillar {
    padding-inline: clamp(0.43rem, 0.301rem + 0.43vw, 0.731rem);
  }

  /* Footer: removed on desktop — the split section fills the full viewport */
  body.about-staging-page #gt-footer {
    display: none;
  }

  /* Constrain the grid to exactly one viewport height.
     min-height alone is a floor, not a cap — if either column's content
     is fractionally taller than 100svh the grid expands and the page
     scrolls. Adding height: 100svh gives the grid a definite block size,
     which constrains the implicit auto row to fit within 100svh rather
     than expanding to content. Both columns already have overflow: hidden
     so any sub-pixel clipping is invisible.                              */
  .about-staging-page .about-split {
    height: 100svh;
  }
}