@font-face {
  font-family: "Faculty Glyphic";
  src: url("assets/FacultyGlyphic-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "New Amsterdam";
  src: url("assets/NewAmsterdam-Regular.ttf") format("truetype");
  font-display: swap;
}

:root { --black: #000; --paper: #faf9f4; --yellow: #d3b33d; --white: #f7f4ed; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; overflow-x: hidden; background: var(--black); color: var(--white); font-family: "Faculty Glyphic", Arial, Helvetica, sans-serif; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.svg-filters { position: absolute; pointer-events: none; }

.site-header { position: absolute; z-index: 20; top: 0; left: 0; width: 100%; height: 4.5vw; min-height: 3rem; color: var(--white); font-family: "New Amsterdam", Impact, sans-serif; text-transform: uppercase; }
.site-header nav { display: flex; justify-content: center; gap: 2.5vw; padding-top: 2.7vw; font-size: clamp(.9rem, 1.4vw, 1.25rem); transform: translateX(8px); }
.site-header nav a { border-bottom: 1px solid transparent; }
.site-header nav a:hover, .site-header nav a:focus-visible { border-bottom-color: currentColor; }
.header-instagram { position: absolute; top: 2.45vw; right: 2.9vw; display: grid; width: 1.4vw; min-width: 1.1rem; aspect-ratio: 1; place-items: center; }
.header-instagram img { width: 100%; height: 100%; }

.hero { position: relative; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; background: #7e6d24; isolation: isolate; }
.hero-theatre { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.hero-title-art { position: absolute; z-index: 2; top: 50%; left: 50%; width: 33%; height: auto; max-width: none; max-height: 72%; object-fit: contain; transform: translate(-50%, -50%); animation: hero-title-reveal 2.2s linear .55s both; }
.has-motion .hero-title-art { animation: none; opacity: 0; }
.has-motion.hero-reveal-ready .hero-title-art { animation: hero-title-reveal 2.2s linear both; }
.hero-scroll { position: absolute; z-index: 3; bottom: 4.3vw; left: 50%; width: 1.65vw; height: 1.65vw; border-right: .18vw solid var(--white); border-bottom: .18vw solid var(--white); transform: translateX(-50%) rotate(45deg); }

@keyframes hero-title-reveal {
  0% { opacity: 0; scale: .95; translate: 0 1rem; }
  100% { opacity: 1; scale: 1; translate: 0; }
}

.story-section { position: relative; height: 99vw; min-height: 62rem; overflow: hidden; background: var(--black); }
.story-intro { position: absolute; top: 0; left: 3.8vw; width: 92.4vw; height: 24.2vw; }
.story-quote { position: absolute; top: 6.6vw; left: 18%; width: 64%; margin: 0; color: var(--yellow); font-family: "New Amsterdam", Impact, sans-serif; font-size: clamp(1rem, 1.55vw, 1.75rem); line-height: 1.12; text-align: center; text-transform: uppercase; }
.story-quote p { margin: 0; }
.story-quote cite { display: block; margin-top: 2.8vw; font-size: .92em; font-style: normal; }
.story-corner { position: absolute; top: 2.7vw; width: 18vw; height: 16vw; object-fit: contain; }
.story-corner--left { left: 0; transform: scaleX(-1); }
.story-corner--right { right: 0; }
.archive-strip { position: absolute; z-index: 3; top: 24.5vw; left: 3.8vw; display: grid; width: 92.4vw; grid-template-columns: repeat(5, 1fr); gap: .55vw; }
.archive-photo { min-width: 0; overflow: hidden; }
.archive-strip img { width: 100%; aspect-ratio: 1.225 / 1; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.archive-photo--tight img { transform: scale(1.2); }
.map-frame { position: absolute; z-index: 1; top: 37.8vw; left: 45.7vw; width: 50.5vw; }
.africa-map { width: 100%; height: auto; opacity: 1; }
/* Match the marker embedded in the supplied map artwork. */
.lagos-dot { position: absolute; top: 17.6%; left: 40.3%; width: .42vw; min-width: 5px; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #f8a100; }
.story-content { position: absolute; z-index: 2; top: 49.5vw; left: 9.7vw; display: grid; width: 55vw; grid-template-columns: 26vw 24vw; gap: 4.8vw; align-items: start; }
.story-content { scroll-margin-top: 2rem; }
.story-content h1, .crew-section > h2, .loop-section h2, footer h2 { margin: 0; color: var(--yellow); font-family: "New Amsterdam", Impact, sans-serif; font-weight: 400; text-transform: uppercase; }
.story-content h1 { font-size: 10.4vw; line-height: .86; letter-spacing: .018em; }
/* Align visible cap tops using the supplied fonts, not their line-box edges. */
.story-copy { padding-top: calc(10.0464vw - .2245em); font-size: clamp(.85rem, 1.22vw, 1.35rem); line-height: 1.25; letter-spacing: .035em; }
.story-copy p { margin: 0 0 1.65vw; }

.crew-section { position: relative; display:flow-root; min-height:68rem; overflow:hidden; background: var(--black); }
.crew-section > h2 { position: absolute; top: 6.4vw; left: 9.7vw; font-size: 10.4vw; line-height: .86; letter-spacing: .018em; }
.director-profile { position: relative; left: 37.85vw; width: 42vw; margin: 16.4464vw 0 0; }
.director-profile > img { width: 26.9vw; height: 33vw; object-fit: cover; object-position: center top; mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%); }
.director-caption { display: flex; margin-top: .35vw; flex-direction: column; font-size: clamp(.7rem, .9vw, .85rem); line-height: 1.05; text-transform: uppercase; }
.director-caption strong { color: var(--yellow); font-weight: 700; }
.director-caption strong { font-family: "New Amsterdam", Impact, sans-serif; font-size: 2.05vw; }
.director-caption span { color: var(--white); }
.director-copy { width: 47vw; margin-top: 1.6vw; font-size: clamp(.84rem, 1.2vw, 1.32rem); line-height: 1.28; letter-spacing: .035em; }
.director-copy p { margin: 0 0 1.7vw; }
.crew-grid { position: relative; left: 3.8vw; display: grid; width: 92.4vw; grid-template-columns: repeat(8, 1fr); gap: .75vw; margin-top:4.5vw; }
.crew-grid article { min-width: 0; }
.crew-grid img { width: 100%; aspect-ratio: .89 / 1; object-fit: cover; object-position: center; }
.crew-grid h3 { margin: .6vw 0 .16vw; color: var(--yellow); font-family: "New Amsterdam", Impact, sans-serif; font-size: clamp(1rem, 1.9vw, 1.7rem); font-weight: 400; line-height: 1; text-transform: uppercase; }
.crew-grid p { margin: 0; font-size: clamp(.7rem, .85vw, .85rem); line-height: 1.1; text-transform: uppercase; }
.portrait-pending { display:grid; width:100%; aspect-ratio:.89 / 1; place-items:center; border:1px solid rgb(247 244 237 / 35%); color:rgb(247 244 237 / 60%); font-size:.85rem; text-align:center; }
.crew-grid article { grid-column: span 2; }
.crew-grid article:first-child { grid-column: 3 / span 2; grid-row: 1; }
.crew-grid article:nth-child(2) { grid-column: 5 / span 2; grid-row: 1; }
.crew-grid article:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; }
.crew-grid article:nth-child(4) { grid-column: 3 / span 2; grid-row: 2; }
.crew-grid article:nth-child(5) { grid-column: 5 / span 2; grid-row: 2; }
.crew-grid article:nth-child(6) { grid-column: 7 / span 2; grid-row: 2; }
.crew-crowd-crop { position: relative; z-index: 1; left: 3.8vw; width: 92.4vw; height: 26.45vw; margin-top: 12vw; overflow: hidden; }
.crew-crowd-crop img { width: 100%; height: auto; }

.loop-section { position: relative; display: flex; min-height: 55vw; flex-direction: column; align-items: center; justify-content: flex-start; padding: 1.6vw 3.8vw 16vw; background: var(--black); text-align: center; }
.loop-corner { position: absolute; bottom: 1.8vw; width: 18vw; height: 16vw; object-fit: contain; pointer-events: none; }
.loop-corner--left { left: 3.8vw; transform: rotate(180deg); }
.loop-corner--right { right: 3.8vw; transform: scaleY(-1); }
.loop-section h2 { font-size: 6.8vw; line-height: .82; letter-spacing: -.035em; }
.loop-section p { margin: 2.2vw auto 2.8vw; font-size: clamp(.95rem, 1.55vw, 1.72rem); line-height: 1.06; }
.loop-section p.cms-edited { max-width: 50rem; }
.loop-section > a { display: flex; width:13.4vw; min-width:12rem; height:5.4vw; min-height:4.5rem; align-items:center; justify-content:center; gap:.9vw; border:1px solid var(--white); font-size:clamp(.9rem,1.25vw,1.35rem); }
.loop-instagram img { width:3vw; min-width:2.5rem; height:3vw; min-height:2.5rem; }
.signup-form { width:min(58vw, 70rem); margin-top:2.6vw; }
.signup-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6vw 2.3vw; text-align:left; }
.signup-fields label { display:block; min-width:0; }
.signup-fields input { width:100%; height:4vw; min-height:3.3rem; padding:0 1.4vw; border:1px solid #777; border-radius:0; outline-offset:3px; background:#333; color:var(--white); font-size:clamp(.9rem,1.25vw,1.3rem); }
.signup-fields input::placeholder { color:#aaa; opacity:1; }
.signup-form button { width:100%; height:4vw; min-height:3.3rem; margin-top:1.6vw; border:1px solid var(--white); background:transparent; color:var(--white); cursor:pointer; font-size:clamp(.9rem,1.2vw,1.2rem); text-transform:uppercase; }
.signup-status { display:none; margin:.8rem 0 0!important; font-size:.82rem!important; opacity:.75; }
.signup-status.is-visible { display:block; }
.signup-honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.signup-form button:disabled { cursor:wait; opacity:.65; }

footer { position: relative; height: 62vw; min-height: 42rem; overflow: hidden; background: var(--black); color: var(--white); }
.footer-slideshow { position:absolute; z-index:0; left:3.8vw; right:3.8vw; bottom:5vw; height:27vw; overflow:hidden; background:var(--black); }
.footer-slide { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; opacity:0; transition:opacity 1.6s ease-in-out; }
.footer-slide.is-active { opacity:1; }
.footer-slide.footer-slide--group { object-position:50% 20%; }
.footer-panel { position: absolute; z-index: 2; top: 7.5vw; left: 3.9vw; width: 35vw; }
footer h2 { font-size: 4.65vw; line-height: .78; letter-spacing: -.02em; }
.reach-out { margin-top: 0; }
.reach-out > p { max-width:38rem; font-size:clamp(.9rem,1.2vw,1.2rem); line-height:1.35; }
.reach-out > p a { text-decoration:underline; text-underline-offset:.18em; }
.social-links { display: flex; flex-direction:column; gap:1vw; align-items:flex-start; margin-top: 1.3vw; }
.social-links a { display: grid; width: 1.8vw; min-width: 1.3rem; aspect-ratio: 1; place-items: center; }
.social-links a:first-child.support-email { display:grid; width:17.2vw; min-width:13rem; height:3.75vw; min-height:3rem; padding:.25rem .8rem; aspect-ratio:auto; border:1px solid currentColor; font-size:clamp(.7rem,1.1vw,1.1rem); text-decoration:underline; text-underline-offset:.14em; white-space:nowrap; }
.social-links img { width: 100%; max-height: 100%; }
footer > small { position:absolute; z-index:2; left:3.9vw; bottom:2vw; display:block; color:var(--yellow); font-size:clamp(.72rem,1.15vw,1.12rem); line-height:1.08; }
.back-to-top { position: absolute; z-index: 3; top: 4.4vw; right: 4vw; color: var(--yellow); font-size: clamp(.72rem, 1.05vw, 1.15rem); }
.credit { position: absolute; z-index: 3; right: 4vw; bottom: 2vw; margin: 0; color: var(--yellow); font-size: clamp(.72rem, 1.17vw, 1.2rem); line-height: 1.05; text-align: right; }

@media (max-width: 700px) {
  .site-header { height: 4rem; }
  .site-header nav { gap: 1.35rem; padding-top: 1.25rem; transform: none; }
  .header-instagram { top: 1.1rem; right: 1rem; }
  .hero { height: 100vh; height: 100dvh; min-height: 0; }
  .hero-theatre { width: 100%; height: 100%; transform: none; object-fit: cover; }
  .hero-title-art { top: 50%; left: 50%; width: 78%; transform: translate(-50%, -50%); }
  .story-section { height: auto; min-height: 60rem; padding-bottom: 5rem; }
  .story-intro { top: .75rem; left: .75rem; width: calc(100% - 1.5rem); height: 13rem; }
  .story-quote { top: 2rem; left: 17.5%; width: 65%; font-size: 1rem; line-height: 1.1; }
  .story-quote cite { margin-top: .7rem; }
  .quote-break { display: none; }
  .story-corner { top: 1rem; width: 19%; height: 5rem; opacity: .8; }
  .archive-strip { position: relative; top: auto; left: auto; width: calc(100% - 1.5rem); margin: 13.75rem .75rem 0; gap: .2rem; }
  .archive-strip img { aspect-ratio: .92; }
  .map-frame { top: 17.25rem; right: .75rem; left: auto; width: 68%; height: auto; overflow: visible; }
  .map-frame::after { position: absolute; top: 17.5%; left: 35%; width: .45rem; aspect-ratio: 1; border-radius: 50%; background: #f8a100; content: ""; transform: translate(-50%, -50%); }
  .africa-map { filter: brightness(2.4); }
  .lagos-dot { width: .62rem; min-width: 0; box-shadow: 0 0 0 2px rgb(241 91 34 / 22%); }
  .story-content { position: relative; top: auto; left: auto; display: block; width: auto; margin: 5rem 1.5rem 0; }
  .story-content h1 { font-size: 4.3rem; }
  .story-copy { width: 66%; margin: 3.5rem 0 0 28%; padding: 0; font-size: 1rem; line-height: 1.25; }
  .story-copy p { margin-bottom: 1.1rem; }
  .crew-section { min-height: 0; padding: 5rem 1rem 0; }
  .crew-section > h2 { position: static; font-size: 4.3rem; }
  .director-profile { position: static; width: 70%; margin: 4rem 0 0 28%; }
  .director-profile > img { width: 100%; height: auto; aspect-ratio: .87; object-fit: cover; object-position: center top; }
  .director-copy { width: 100%; margin-top: 1rem; font-size: .96rem; }
  .director-caption { margin-top: .45rem; font-size: .64rem; }
  .director-caption strong { font-size: .78rem; }
  .crew-grid { position: static; width: 100%; grid-template-columns: repeat(2, 1fr); gap: 1.5rem .5rem; margin-top: 4rem; }
  .crew-grid article, .crew-grid article:first-child, .crew-grid article:nth-child(2), .crew-grid article:nth-child(3), .crew-grid article:nth-child(4), .crew-grid article:nth-child(5), .crew-grid article:nth-child(6) { grid-column:auto; grid-row:auto; }
  .crew-grid h3 { margin-top: .55rem; font-size: .78rem; }
  .crew-grid p { font-size: .64rem; }
  .crew-crowd-crop { position: relative; left: auto; width: 100%; height: 28.6vw; margin-top: 4rem; }
  .crew-crowd-crop img { width: 100%; max-width: none; margin: 0; }
  .loop-section { height: auto; min-height: 0; padding: 1.5rem 1rem 9rem; }
  .loop-corner { bottom: 1rem; width: 29vw; height: 7rem; }
  .loop-corner--left { left: .75rem; }
  .loop-corner--right { right: .75rem; }
  .loop-section h2 { font-size: 3.2rem; }
  .loop-section p { margin: 1.7rem auto 2rem; font-size: 1rem; }
  .loop-section p.cms-edited { max-width: 100%; }
  .desktop-break { display: none; }
  .loop-section > a { width:12rem; height:4.2rem; min-height:0; }
  .loop-instagram img { width:2.4rem; min-width:0; height:2.4rem; min-height:0; }
  .signup-form { width:100%; margin-top:2.2rem; }
  .signup-fields { grid-template-columns:1fr; gap:1rem; }
  .signup-fields input { height:3.5rem; padding:0 1rem; }
  .signup-form button { height:3.5rem; margin-top:1.5rem; }
  .signup-status { font-size:.78rem!important; }
  footer { height: 55rem; min-height: 55rem; background: var(--black); }
  .footer-slideshow { left:1rem; right:1rem; bottom:6rem; height:21rem; }
  .footer-slide { object-position:55% center; }
  .footer-panel { top: 5rem; left: 1.25rem; width: calc(100% - 2.5rem); }
  footer h2 { font-size: 2.45rem; }
  .reach-out > p { max-width:100%; font-size:.95rem; }
  .social-links { gap: 1rem; margin-top: 1.5rem; }
  .social-links a:first-child.support-email { width:12.5rem; min-width:0; height:3rem; }
  .social-links a { width: 1.55rem; }
  footer > small { left:1.25rem; bottom:2rem; }
  .back-to-top { top: 1.5rem; right: 1rem; }
  .credit { right: 1rem; bottom: 2rem; }
}

@media (min-width: 500px) and (max-width: 700px) {
  .map-frame { top: calc(11.75rem + 21vw); width: 18rem; }
  .story-copy { margin-top: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-title-art, .has-motion .hero-title-art, .has-motion.hero-reveal-ready .hero-title-art { animation: none; opacity: 1; clip-path: none; scale: 1; translate: 0; }
}