/* ------------------------------------------------------------------
   Nagy Fouad — personal site
   ------------------------------------------------------------------ */
:root {
  --f: 14px;                 /* frame thickness */
  --r: 28px;                 /* panel radius */
  --ink: #3f4146;
  --ink-soft: #7d8088;
  --ink-faint: #c4c7ce;
  --line: rgba(20, 22, 28, .12);
  --paper: #eceef2;
  --night: #0b0c0f;
  --white: #f2f4f8;
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --display: "Cormorant Garamond", "Didot", "Bodoni MT", Georgia, serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #000;
  color: var(--white);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
::selection { background: #1f3a5c; color: #fff; }

.serif-caps {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kicker {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------
   Frame + notch
   ------------------------------------------------------------------ */
.frame {
  position: fixed;
  inset: var(--f);
  border-radius: var(--r);
  box-shadow: 0 0 0 80px #000;
  pointer-events: none;
  z-index: 50;
}

.notch {
  --nh: 34px;                /* how far the notch drops below the frame */
  --sw: 86px;                /* shoulder width */
  --w-closed: 60px;          /* both widths are measured and set by main.js */
  --w-open: 640px;
  position: fixed;
  top: 0; left: 50%;
  z-index: 51;
  width: var(--w-closed);
  height: calc(var(--f) + var(--nh));
  transform: translateX(-50%);
  background: #000;
  /* closing: links fade first, then the bar draws back in */
  transition: width .8s cubic-bezier(.6, 0, .2, 1) .14s, transform .9s var(--ease);
}
.notch:hover,
.notch:has(:focus-visible),
.notch.open {
  width: var(--w-open);
  transition: width 1.15s cubic-bezier(.62, .04, .12, 1), transform .9s var(--ease);
}
.is-loading .notch { transform: translate(-50%, -110%); }
.notch::before {             /* forgiving hover area around the closed notch */
  content: "";
  position: absolute;
  inset: 0 -70px -12px;
}
.notch-shoulder {
  position: absolute;
  top: var(--f);
  width: var(--sw);
  height: var(--nh);
  display: block;
  fill: #000;
  pointer-events: none;
}
.notch-shoulder--l { right: calc(100% - 1px); }
.notch-shoulder--r { left: calc(100% - 1px); transform: scaleX(-1); }

/* Links sit still at their final positions; the widening bar uncovers them. */
.notch-clip { position: absolute; inset: 0; overflow: hidden; }
.notch-nav {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: max-content;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.monogram {
  font-family: var(--display);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: -.01em;
  line-height: 1;
  padding: 4px 16px 6px;
  color: var(--white);
}
.notch-group { display: flex; white-space: nowrap; }
.notch-group--l { justify-content: flex-end; }
.notch-group a {
  --i: 0;                    /* steps out from the monogram */
  --dir: 1;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 26px;
  color: rgba(242, 244, 248, .82);
  opacity: 0;
  filter: blur(6px);
  transform: translateX(calc(var(--dir) * -12px));
  transition: opacity .22s ease, filter .22s ease, transform .5s ease, color .25s;
}
.notch-group--l a { --dir: -1; }
.notch-group--l a:nth-child(2), .notch-group--r a:nth-child(2) { --i: 1; }
.notch-group--l a:nth-child(1), .notch-group--r a:nth-child(3) { --i: 2; }
.notch-group a:hover { color: #fff; }
.notch:hover .notch-group a,
.notch:has(:focus-visible) .notch-group a,
.notch.open .notch-group a {
  opacity: 1;
  filter: none;
  transform: none;
  transition:
    opacity .8s ease calc(.2s + var(--i) * .13s),
    filter .8s ease calc(.2s + var(--i) * .13s),
    transform 1.1s var(--ease) calc(.2s + var(--i) * .13s),
    color .25s;
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
.top { position: relative; }

.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  z-index: 1;
  overflow: hidden;
  background: #0a1422;
}
.hero-bg, .reel-bg { position: absolute; inset: -10%; filter: blur(70px); }
.hero-bg { background: #0a1626; }
.hero-gl {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.hero.gl-on .hero-gl { opacity: 1; }
.hero.gl-on .hero-bg { display: none; }
.blob { position: absolute; border-radius: 50%; will-change: transform; }
.hero-bg .b1 { width: 55%; height: 80%; left: 2%;  top: 5%;   background: #173a5a; animation: drift1 19s ease-in-out infinite alternate; }
.hero-bg .b2 { width: 45%; height: 60%; left: 48%; top: 30%;  background: #122e4a; animation: drift2 23s ease-in-out infinite alternate; }
.hero-bg .b3 { width: 34%; height: 90%; left: 76%; top: -10%; background: #070b14; animation: drift3 17s ease-in-out infinite alternate; }
.hero-bg .b4 { width: 30%; height: 50%; left: 22%; top: 55%;  background: #1e4868; opacity: .55; animation: drift2 27s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(18%, 12%) scale(1.15) rotate(20deg); } }
@keyframes drift2 { to { transform: translate(-22%, -16%) scale(.85); } }
@keyframes drift3 { to { transform: translate(-30%, 14%) scale(1.2); } }

.hero::after {            /* vignette */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(3, 5, 10, .7) 100%);
  pointer-events: none;
}
.grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

.hero-shade {
  position: absolute; inset: 0;
  z-index: 3;
  background: #0c0d10;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.hero-inner {
  position: absolute; inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  will-change: transform;
}
.hero-line {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-rule {
  width: clamp(60px, 16vw, 240px);
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.4), rgba(255,255,255,.06));
  transform-origin: center;
}
.hero-role { display: inline-flex; align-items: center; gap: 10px; }
.hero-role .serif-caps { font-size: 13px; }
.hero-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  margin: 0 2px;
}
.hero-foot {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(56px, 9vh, 90px);
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.55;
  text-transform: uppercase;
  padding: 0 28px;
}
.hero-meta { margin-top: 22px; color: rgba(242, 244, 248, .8); font-variant-numeric: tabular-nums; }

/* entrance */
.rise {
  display: inline-block;
  transition: opacity 1.4s ease, transform 1.6s var(--ease), filter 1.4s ease;
  transition-delay: calc(var(--d, 0) * 160ms + 350ms);
}
p.rise { display: block; }
.is-loading .rise { opacity: 0; transform: translateY(14px); filter: blur(8px); }
.is-loading .hero-rule { transform: scaleX(0); opacity: 0; }

/* ------------------------------------------------------------------
   Panels
   ------------------------------------------------------------------ */
.panel {
  position: relative;
  z-index: 2;
  margin: 0 var(--f);
  border-radius: var(--r);
  padding: 1px clamp(22px, 7vw, 116px) clamp(70px, 9vw, 130px);
}
.panel--light {
  color: var(--ink);
  background:
    linear-gradient(118deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 22%, rgba(255,255,255,0) 38%,
      rgba(255,255,255,.5) 62%, rgba(255,255,255,0) 80%),
    linear-gradient(118deg, #dcdee3 0%, #eef0f4 30%, #e3e5ea 55%, #f1f2f6 78%, #d8dade 100%);
  background-attachment: fixed;
}

/* Intro */
.intro {
  max-width: 1020px;
  margin: 0 auto;
  padding: clamp(120px, 19vh, 190px) 0 clamp(110px, 17vh, 180px);
}
.intro-text {
  font-size: clamp(25px, 3.05vw, 42px);
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -.028em;
  color: var(--ink);
}
.intro-text .tag {
  display: inline-block;
  font-family: var(--serif);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  vertical-align: middle;
  margin: 0 clamp(18px, 3.4vw, 50px) 0 clamp(8px, 1.6vw, 22px);
}
.intro-text .w { opacity: .14; transition: opacity .35s ease; }
.intro-text .w.on { opacity: 1; }

/* Big name list */
.roles { padding-bottom: clamp(90px, 16vh, 190px); }
.roles-list { text-align: center; }
.roles-list li { line-height: 1; }
.roles-list a {
  display: inline-block;
  position: relative;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5.3vw, 76px);
  letter-spacing: -.025em;
  line-height: 1.42;
  color: var(--ink-faint);
  transition: color .6s ease, letter-spacing .8s var(--ease);
}
.roles-list sup {
  position: absolute;
  left: 100%;
  top: .95em;
  margin-left: .9em;
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-faint);
  transition: color .6s ease;
}
.roles-list li.near a { color: #9a9da5; }
.roles-list li.active a,
.roles-list a:hover { color: var(--ink); letter-spacing: -.015em; }
.roles-list li.active sup,
.roles-list a:hover sup { color: var(--ink-soft); }

/* Scaling reel card */
.reel {
  margin: 0 calc(clamp(22px, 7vw, 116px) * -1) clamp(90px, 13vw, 170px);
  display: flex;
  justify-content: center;
}
.reel-card {
  position: relative;
  width: 100%;
  height: min(86vh, 56vw);
  min-height: 300px;
  border-radius: var(--r);
  background: #07090d;
  overflow: hidden;
  transform: scale(.64);
  transform-origin: 50% 0;
  will-change: transform;
}
.reel-bg { background: #06080c; opacity: .9; }
.reel-bg .b1 { width: 50%; height: 70%; left: -5%; top: 30%; background: #1b4468; animation: drift1 21s ease-in-out infinite alternate; }
.reel-bg .b2 { width: 40%; height: 60%; left: 60%; top: -10%; background: #6d6a2f; opacity: .55; animation: drift2 25s ease-in-out infinite alternate; }
.reel-bg .b3 { width: 30%; height: 60%; left: 40%; top: 50%; background: #0d223a; animation: drift3 18s ease-in-out infinite alternate; }

.marquee {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: .32em;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(54px, 11vw, 170px);
  letter-spacing: -.03em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--white);
  animation: marquee 34s linear infinite;
  padding-right: .32em;
}
.marquee-track .it {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -.05em;
  font-size: .82em;
}
.marquee-track i { font-style: normal; font-size: .28em; opacity: .5; }
@keyframes marquee { to { transform: translateX(-50%); } }

.reel-caption {
  position: absolute; left: 34px; right: 34px; bottom: 28px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(242,244,248,.7);
}

/* Split sections (heading left / content right) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(30px, 8vw, 120px);
  align-items: start;
  padding-top: clamp(70px, 9vw, 130px);
  scroll-margin-top: 20px;
}
.split-head { position: sticky; top: 96px; max-width: 390px; }
.split-head h2 {
  font-size: clamp(25px, 2.1vw, 30px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 8px 0 16px;
  color: var(--ink);
}
.split-head .body {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Stack "logo" grid */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: clamp(46px, 6vw, 84px);
  column-gap: 20px;
  padding-top: 26px;
}
.logo-grid li {
  text-align: center;
  font-size: clamp(17px, 1.75vw, 23px);
  font-weight: 600;
  letter-spacing: -.03em;
  color: #17181b;
  transition: opacity .5s ease, transform .9s var(--ease), filter .9s ease;
}
.logo-grid:hover li { opacity: .3; }
.logo-grid li:hover { opacity: 1; }
.logo-grid .lg-serif { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -.01em; }
.logo-grid .lg-mono  { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; font-size: clamp(14px, 1.4vw, 18px); letter-spacing: -.04em; }
.logo-grid .lg-ital  { font-style: italic; font-weight: 700; letter-spacing: -.05em; }
.logo-grid .lg-wide  { font-weight: 500; font-size: clamp(12px, 1.15vw, 15px); letter-spacing: .3em; }

/* Tables */
.table { border-top: 1px solid var(--line); }
.table li { border-bottom: 1px solid var(--line); }
.table li, .table li > a {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto;
  align-items: center;
  gap: 16px;
}
.table li:has(> a) { display: block; }
.table li > span, .table li > a > span { padding: 20px 0; }
.table li > a { transition: padding .5s var(--ease), background .4s; }
.table li { transition: opacity .8s ease, transform .9s var(--ease), padding .5s var(--ease), filter .8s ease; }
.table li:hover { padding-left: 10px; padding-right: 10px; }
.table .c1 { font-size: 12px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.table .c2 { font-family: var(--serif); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.table .c3 { font-size: 12px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); min-width: 62px; text-align: right; font-variant-numeric: tabular-nums; }
.table--links .c3 { font-size: 14px; transition: transform .4s var(--ease); }
.table--links li:hover .c3 { transform: translate(3px, -3px); }

/* CTA bar */
.cta {
  margin-top: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px 16px 30px;
  border-radius: 24px;
  background: rgba(255,255,255,.6);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 20px 40px -24px rgba(20, 22, 30, .25);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
  scroll-margin-top: 40vh;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px 13px 20px;
  border-radius: 999px;
  background: #0d0e11;
  color: var(--white);
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: 0 10px 22px -8px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .3s;
}
.btn svg { transition: transform .5s var(--ease); }
.btn:hover { transform: translateY(-2px); background: #1a1d24; box-shadow: 0 16px 28px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1) inset; }
.btn:hover svg { transform: translateX(3px); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); filter: blur(6px); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.split-head.reveal { transition: opacity 1s ease, transform 1.1s var(--ease), filter 1s ease; }
.work-head .reveal { transition: opacity 1s ease, transform 1.1s var(--ease), filter 1s ease; }
.cta.reveal { transition: opacity 1s ease, transform 1.1s var(--ease), filter 1s ease; }

/* ------------------------------------------------------------------
   Work (dark)
   ------------------------------------------------------------------ */
.work {
  position: relative;
  z-index: 1;
  margin: calc(var(--r) * -1) var(--f);
  padding: calc(var(--r) + clamp(90px, 12vw, 160px)) clamp(16px, 6.5vw, 104px) calc(var(--r) + clamp(110px, 14vw, 200px));
  background: radial-gradient(90% 40% at 50% 0%, #15171c 0%, var(--night) 70%);
  scroll-margin-top: -60px;
}
.work-head { text-align: center; margin-bottom: clamp(50px, 7vw, 96px); }
.work-head .kicker { color: rgba(242,244,248,.5); }
.work-head h2 {
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(46px, 7.4vw, 108px);
  letter-spacing: -.03em;
  line-height: 1;
  text-transform: uppercase;
}
.work-head h2 em {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -.055em;
  font-size: .84em;
}

.stack { display: grid; gap: clamp(26px, 4vw, 54px); }
.card {
  position: sticky;
  top: 62px;
  height: min(78vh, 760px);
  min-height: 480px;
  scroll-margin-top: 62px;
}
.card-inner {
  position: relative;
  height: 100%;
  border-radius: var(--r);
  overflow: hidden;
  background: #111;
  transform-origin: 50% 0;
  will-change: transform, filter;
  box-shadow: 0 -30px 60px -30px rgba(0,0,0,.7);
}
.card-art { position: absolute; inset: -8% 0; will-change: transform; }
.card-art::before, .card-art::after { content: ""; position: absolute; }

.card-copy {
  position: absolute;
  z-index: 3;
  max-width: min(520px, 86%);
  color: var(--white);
}
.pos-tr { top: 11%; right: 6%; }
.pos-tl { top: 11%; left: 6%; }
.pos-l  { top: 50%; left: 6%; transform: translateY(-50%); }
.pos-r  { top: 50%; right: 6%; transform: translateY(-50%); }
.pos-br { bottom: 10%; right: 6%; }
.pos-bl { bottom: 10%; left: 6%; }

.eyebrow {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: .9;
}
.eyebrow--gold { color: #d8b468; letter-spacing: .2em; }
.card h3 {
  font-size: clamp(42px, 6vw, 86px);
  line-height: .9;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .16em;
}
.card h3 br { flex-basis: 100%; content: ""; }
.t-serif { font-family: var(--display); font-weight: 300; letter-spacing: -.035em; }
.t-ital  { font-family: var(--sans); font-style: italic; font-weight: 600; letter-spacing: -.06em; font-size: .86em; }
.t-sans  { font-family: var(--sans); font-weight: 500; letter-spacing: -.06em; font-size: .86em; }
.t-serif-i { font-family: var(--display); font-style: italic; font-weight: 300; font-size: .8em; opacity: .75; }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 34px;
  margin: 22px 0 18px;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.meta div { display: flex; gap: 10px; }
.meta dt { font-weight: 600; white-space: nowrap; }
.meta dd { font-family: var(--serif); letter-spacing: .1em; opacity: .75; }
.desc {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
  text-transform: uppercase;
  max-width: 440px;
  opacity: .9;
}

/* --- Card artwork (pure CSS) --- */
/* Parkside: glowing core + rings */
.art-parkside { background: radial-gradient(70% 90% at 24% 62%, #0f5a57 0%, #0a2b3a 42%, #05080f 100%); }
.art-parkside::before {
  left: -8%; top: 12%; width: 64%; aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 34px, rgba(190, 255, 240, .13) 34px 35px);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%);
          mask-image: radial-gradient(circle, #000 20%, transparent 70%);
  animation: breathe 9s ease-in-out infinite alternate;
}
.art-parkside::after {
  left: 17%; top: 42%; width: 14%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #f4fffb 0%, #7ff0d6 26%, #129e8c 60%, #06403f 100%);
  box-shadow: 0 0 90px 30px rgba(70, 230, 200, .35), 0 0 240px 90px rgba(40, 180, 170, .2);
  animation: pulse 5s ease-in-out infinite alternate;
}
@keyframes breathe { to { transform: scale(1.12) rotate(8deg); } }
@keyframes pulse { to { transform: scale(1.08); filter: brightness(1.15); } }

/* West + Park: navy / gold facade */
.art-wp { background: linear-gradient(160deg, #132c55 0%, #0b1d3a 46%, #060f20 100%); }
.art-wp::before {
  right: -4%; bottom: 0; width: 56%; height: 86%;
  background:
    repeating-linear-gradient(90deg, rgba(201,162,75,.0) 0 26px, rgba(201,162,75,.34) 26px 27px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0) 0 52px, rgba(255,255,255,.08) 52px 53px),
    linear-gradient(180deg, rgba(201,162,75,.2), rgba(11,29,58,0) 75%);
  transform: perspective(900px) rotateY(-24deg) skewY(-5deg);
  transform-origin: 100% 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.art-wp::after {
  right: 30%; top: 16%; width: 11%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #f1d48c, #c9a24b 55%, rgba(201,162,75,0) 72%);
  box-shadow: 0 0 160px 60px rgba(201,162,75,.2);
}

/* Operations: blueprint grid + bars */
.art-ops {
  background:
    linear-gradient(rgba(140, 180, 255, .07) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(140, 180, 255, .07) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(80% 90% at 30% 30%, #20304f 0%, #0d1322 55%, #06080d 100%);
}
.art-ops::before {
  left: 7%; top: 16%; width: 44%; height: 46%;
  background:
    linear-gradient(#e9eefb, #e9eefb) 0%   100% / 9% 34% no-repeat,
    linear-gradient(#e9eefb, #e9eefb) 18%  100% / 9% 52% no-repeat,
    linear-gradient(#e9eefb, #e9eefb) 36%  100% / 9% 44% no-repeat,
    linear-gradient(#e9eefb, #e9eefb) 54%  100% / 9% 70% no-repeat,
    linear-gradient(#7fb0ff, #7fb0ff) 72%  100% / 9% 88% no-repeat,
    linear-gradient(#e9eefb, #e9eefb) 90%  100% / 9% 62% no-repeat;
  opacity: .82;
  border-bottom: 1px solid rgba(233, 238, 251, .5);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0,0,0,.35));
          mask-image: linear-gradient(180deg, #000 55%, rgba(0,0,0,.35));
}
.art-ops::after {
  left: 7%; top: 12%; width: 44%; height: 50%;
  background: linear-gradient(162deg, transparent calc(50% - 1px), rgba(127,176,255,.8) 50%, transparent calc(50% + 1px));
}

/* St. Mark's: burgundy + attendance dots */
.art-smm { background: radial-gradient(90% 100% at 75% 30%, #8c2a2f 0%, #4c1220 45%, #14060b 100%); }
.art-smm::before {
  right: 5%; top: 14%; width: 50%; height: 60%;
  background: radial-gradient(circle, rgba(255, 226, 200, .9) 0 4.5px, transparent 5.5px) 0 0 / 38px 38px;
  -webkit-mask-image: linear-gradient(120deg, #000 0%, rgba(0,0,0,.25) 55%, transparent 90%);
          mask-image: linear-gradient(120deg, #000 0%, rgba(0,0,0,.25) 55%, transparent 90%);
}
.art-smm::after {
  right: 5%; top: 14%; width: 50%; height: 60%;
  background: radial-gradient(circle, #ffcf7a 0 4.5px, transparent 5.5px) 0 0 / 114px 76px;
  opacity: .9;
  -webkit-mask-image: linear-gradient(120deg, #000 0%, transparent 70%);
          mask-image: linear-gradient(120deg, #000 0%, transparent 70%);
}

/* Desk: warm glow + clock */
.art-desk { background: radial-gradient(70% 90% at 70% 70%, #6b3d16 0%, #2a1a10 45%, #0c0907 100%); }
.art-desk span {
  position: absolute;
  right: 5%; bottom: 10%;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(120px, 26vw, 400px);
  line-height: .8;
  letter-spacing: -.05em;
  color: #ffe9c9;
  opacity: .92;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 120px rgba(255, 170, 80, .45);
}

/* Liturgy: green / gold arches */
.art-liturgy { background: radial-gradient(90% 100% at 25% 60%, #1f5a45 0%, #0e2c25 48%, #050c0a 100%); }
.art-liturgy::before {
  left: 5%; bottom: 8%; width: 46%; height: 78%;
  background:
    radial-gradient(50% 30% at 50% 30%, transparent 98%, rgba(226, 190, 110, .0) 100%),
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(226,190,110,.5) calc(25% - 1px) 25%);
  border: 1px solid rgba(226,190,110,.5);
  border-radius: 999px 999px 0 0;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 96%);
          mask-image: linear-gradient(180deg, #000 20%, transparent 96%);
}
.art-liturgy::after {
  left: 13%; bottom: 8%; width: 30%; height: 62%;
  border: 1px solid rgba(226,190,110,.35);
  border-radius: 999px 999px 0 0;
  background: radial-gradient(60% 40% at 50% 22%, rgba(240, 205, 120, .4), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 96%);
          mask-image: linear-gradient(180deg, #000 20%, transparent 96%);
}

/* ------------------------------------------------------------------
   Last panel + footer reveal
   ------------------------------------------------------------------ */
.panel--last { padding-top: clamp(20px, 3vw, 50px); box-shadow: 0 40px 80px -20px rgba(0,0,0,.9); }

.footer {
  position: sticky;
  bottom: 0;
  z-index: 0;
  padding: clamp(40px, 5vw, 64px) calc(var(--f) + clamp(18px, 3.4vw, 50px)) calc(var(--f) + 14px);
  background: #000;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  flex-wrap: wrap;
  padding-bottom: clamp(40px, 5vw, 60px);
}
.footer .monogram { padding: 0; display: inline-block; margin-bottom: 26px; }
.footer-about { max-width: 490px; }
.footer-about p { font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: #777a82; }
.socials { display: flex; gap: 14px; margin-top: 30px; color: #6a6d75; }
.socials a { transition: color .3s, transform .5s var(--ease); }
.socials a:hover { color: #fff; transform: translateY(-2px); }
.footer-links { display: grid; gap: 38px; align-content: start; padding-top: 30px; }
.footer-links .kicker { color: #55585f; margin-bottom: 16px; }
.footer-links ul { display: flex; flex-wrap: wrap; gap: 10px clamp(22px, 3.4vw, 50px); }
.footer-links a {
  font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(242,244,248,.85);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--ease);
  padding-bottom: 3px;
}
.footer-links a:hover { background-size: 100% 1px; }
.footer-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 20px 36px;
  border-radius: 18px;
  background: #0a0a0b;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.footer-bar > :last-child { text-align: right; }
.footer-bar .hero-dot { width: 4px; height: 4px; margin: 0 6px; }

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 860px) {
  :root { --f: 8px; --r: 22px; }
  .notch { --nh: 30px; --sw: 28px; }
  .notch-group a { padding: 8px 5px; font-size: 12.5px; }
  .monogram { font-size: 21px; padding: 4px 9px 6px; }

  .hero-line { flex-direction: column; gap: 14px; }
  .hero-rule { width: 1px; height: 46px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.3), rgba(255,255,255,.05)); }
  .hero-foot br { display: none; }

  .split { grid-template-columns: 1fr; }
  .split-head { position: static; max-width: none; }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .roles-list sup { display: none; }
  .reel-card { height: 62vw; }

  .table li, .table li > a { grid-template-columns: 1fr auto; }
  .table .c2 { grid-column: 1; grid-row: 2; padding-top: 0 !important; margin-top: -12px; }
  .table .c3 { grid-row: 1 / span 2; }

  .card { top: 52px; height: 74vh; min-height: 460px; }
  .card-copy { left: 7% !important; right: 7% !important; top: auto !important; bottom: 7% !important; transform: none !important; max-width: none; }
  .card h3 { font-size: clamp(38px, 11vw, 60px); }
  .card-inner::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.72) 100%); }

  .cta { flex-direction: column; align-items: stretch; text-align: center; padding: 22px 18px 18px; }
  .btn { justify-content: center; }
  .footer-bar { grid-template-columns: 1fr; text-align: center; padding: 18px; gap: 8px; }
  .footer-bar > :last-child { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
  .reel-card { transform: none !important; }
  .intro-text .w { opacity: 1; }
}