/* Project Legacy — Premium design layer (Direction B: Executive Product Architecture)
   Loads after site.css and refines the visual system. */

:root {
  --pl-navy: #0b1526;
  --pl-navy-2: #101f36;
  --pl-ink: #1c2733;
  --pl-paper: #faf7f2;
  --pl-teal: #2dd4bf;
  --pl-teal-deep: #0f766e;
  --pl-gold: #d9a441;
  --pl-line: rgba(28, 39, 51, 0.14);
  --pl-radius: 14px;
}

/* Fluid editorial type scale */
html { font-size: clamp(15.5px, 1vw + 10px, 18px); }
body { color: var(--pl-ink); background: var(--pl-paper); line-height: 1.65; }
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.12; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.2; letter-spacing: -0.015em; }
h3 { font-size: 1.18rem; line-height: 1.35; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; }

/* Cinematic hero */
.executive-hero {
  background:
    radial-gradient(1100px 500px at 78% -10%, rgba(45, 212, 191, 0.14), transparent 60%),
    radial-gradient(700px 420px at 12% 110%, rgba(217, 164, 65, 0.10), transparent 55%),
    linear-gradient(160deg, var(--pl-navy) 0%, var(--pl-navy-2) 100%);
  position: relative;
  overflow: hidden;
}
.executive-hero::before {
  /* architecture grid motif */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(900px 480px at 70% 20%, #000 30%, transparent 75%);
  pointer-events: none;
}
.executive-hero .hero-copy { position: relative; z-index: 1; }
.executive-hero h1 { color: #f6f3ec; }
.executive-hero .eyebrow { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.78rem; }
.executive-hero .hero-text { color: #c6d2dd; max-width: 38rem; }

/* Buttons */
.button { border-radius: 10px; padding: 0.72rem 1.35rem; font-weight: 600; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.button.primary { background: var(--pl-teal-deep); border: 1px solid transparent; box-shadow: 0 6px 22px rgba(15, 118, 110, 0.35); }
.button.primary:hover { background: #0d5f59; transform: translateY(-1px); }
.button:focus-visible { outline: 3px solid var(--pl-teal); outline-offset: 2px; }

/* Cards */
.metric-card {
  border-radius: var(--pl-radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 2px rgba(11, 21, 38, 0.25), 0 14px 40px -18px rgba(11, 21, 38, 0.55);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.metric-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(11,21,38,0.25), 0 22px 52px -18px rgba(11,21,38,0.6); }

/* Proof strip */
.pillar-strip { border-block: 1px solid var(--pl-line); }
.pillar-strip article span { font-size: 1.5rem; letter-spacing: -0.01em; color: #7fd4c9; font-weight: 700; }

/* Header polish */
.site-header { backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--pl-line); }
.nav a { border-radius: 8px; padding: 0.35rem 0.6rem; transition: background 140ms ease; }
.nav a:hover { background: rgba(28, 39, 51, 0.06); }
.nav a[aria-current="page"] { font-weight: 700; }

/* Section rhythm */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section.narrow { max-width: 46rem; }

/* Diagrams */
figure svg { border-radius: var(--pl-radius); background: #0e1c30; padding: 14px; }

/* Scroll reveal (JS adds .pl-visible; no-JS and reduced-motion safe) */
.pl-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .pl-reveal { opacity: 0; transform: translateY(14px); transition: opacity 500ms ease, transform 500ms ease; }
  .js .pl-reveal.pl-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Footer */
.site-footer { border-top: 1px solid var(--pl-line); padding-block: 2rem; }

/* Beyond the Work — personal layer (Direction B compliant) */
.beyond-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.beyond-grid .card { background: #fffdf9; border: 1px solid rgba(13,27,42,0.12); border-radius: 14px; padding: 1.15rem 1.25rem; transition: transform .18s ease, box-shadow .18s ease; }
.beyond-grid .card h3 { margin: 0 0 .4rem; font-size: 1.02rem; letter-spacing: .01em; color: #0d1b2a; }
.beyond-grid .card p { margin: 0; font-size: .95rem; line-height: 1.55; }
@media (prefers-reduced-motion: no-preference) {
  .beyond-grid .card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(13,27,42,0.10); }
}
.beyond-quote { margin: 1.25rem 0 1.5rem; padding-left: 1.1rem; border-left: 3px solid #0f766e; }
.beyond-quote p { font-size: 1.15rem; font-style: italic; color: #0d1b2a; margin: 0; }