/* ============================================================
   GTWC 2026 — front page
   Design tokens, fonts and imagery carried over from the
   replicate build; layout rewritten as a fluid, content-led
   page rather than a fixed-comp reconstruction.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family:'Corra Montserra'; src:url('../assets/gtwc/fonts/corra-montserra/woff2/corra-montserra-light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Corra Montserra'; src:url('../assets/gtwc/fonts/corra-montserra/woff2/corra-montserra-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Corra Montserra'; src:url('../assets/gtwc/fonts/corra-montserra/woff2/corra-montserra-medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Corra Montserra'; src:url('../assets/gtwc/fonts/corra-montserra/woff2/corra-montserra-semibold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Corra Montserra'; src:url('../assets/gtwc/fonts/corra-montserra/woff2/corra-montserra-bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Corra Montserra'; src:url('../assets/gtwc/fonts/corra-montserra/woff2/corra-montserra-extrabold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Corra Montserra'; src:url('../assets/gtwc/fonts/corra-montserra/woff2/corra-montserra-black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'The Foriene Serif'; src:url('../assets/gtwc/fonts/foriene-serif/foriene-serif-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'The Foriene Serif'; src:url('../assets/gtwc/fonts/foriene-serif/foriene-serif-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  --font-display:'Corra Montserra','Arial Narrow',sans-serif;
  --font-serif:'The Foriene Serif',Georgia,serif;

  --cream:#F5EFE1;
  --cream-2:#EAE1CB;
  --ink:#241208;
  --ink-soft:#3B2415;
  --maroon-900:#2A0A03;
  --maroon-800:#3E1107;
  --maroon-700:#55190A;
  --orange-600:#C94A0F;
  --orange-500:#E06A1B;
  --orange-400:#EF8B34;
  --orange-300:#eeb47c;
  --teal-900:#16332D;
  --teal-800:#1F433B;
  --teal-700:#35594E;
  --sage-200:#E6E7D6;
  --sage-ink:#1F3A33;

  --r-lg:28px;
  --r-md:18px;
  --r-pill:999px;

  --pad:clamp(20px,5vw,64px);
  --maxw:1220px;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-display);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; }

.wrap { max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); position:relative; z-index:2; }
.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
section { position:relative; }

.eyebrow {
  display:block;
  font-size:0.68rem; font-weight:800; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--orange-600); margin-bottom:0.7rem;
}
.eyebrow.center, .center { text-align:center; }

.section-h2 {
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.02;
  letter-spacing:-0.03em; margin:0 0 1rem; color:var(--maroon-900);
}
.section-h2 em { font-style:italic; color:var(--orange-600); }
.section-lead {
  max-width:44rem; margin:0 auto 2.4rem;
  font-size:clamp(0.95rem,1.35vw,1.08rem); line-height:1.7; color:var(--ink-soft);
}

/* ---------- Nav ---------- */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background-color .3s ease, box-shadow .3s ease;
}
.nav.is-stuck { background:rgba(42,10,3,.93); backdrop-filter:blur(10px); box-shadow:0 2px 24px rgba(0,0,0,.25); }
.nav-inner {
  max-width:var(--maxw); margin:0 auto;
  padding:18px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav-brand { text-decoration:none; color:var(--cream); display:block; }
.nav-brand-main {
  display:block; font-family:var(--font-serif); font-style:italic;
  font-size:1.22rem; line-height:1; color:var(--orange-300);
}
.nav-brand-sub {
  display:block; font-size:0.55rem; font-weight:700;
  letter-spacing:0.28em; text-transform:uppercase; color:rgba(245,239,225,.72); margin-top:4px;
}
.nav-links { display:flex; gap:1.9rem; list-style:none; margin:0; padding:0; }
.nav-links a {
  text-decoration:none; color:var(--cream);
  font-size:0.72rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  opacity:.85; transition:opacity .2s ease, color .2s ease;
}
.nav-links a:hover { opacity:1; color:var(--orange-300); }
.nav-toggle { display:none; background:none; border:0; padding:8px; cursor:pointer; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--cream); margin:5px 0; transition:transform .25s ease, opacity .25s ease; }
.nav-drawer { display:none; }

/* ---------- Hero ---------- */
.hero {
  /* position:relative matters: .hero-slides and .hero-veil are absolutely
     positioned, and without it they resolved against the viewport instead
     of the hero — so on phones the slides were sized to the full screen
     height and then clipped. */
  position:relative;
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  background:var(--maroon-900); text-align:center; overflow:hidden;
}
.hero-veil {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(42,10,3,.72) 0%, rgba(42,10,3,.34) 38%, rgba(42,10,3,.88) 100%);
}
.hero-inner {
  position:relative; z-index:2; width:100%;
  padding:120px var(--pad) 56px;
  display:flex; flex-direction:column; align-items:center; gap:2rem;
}
.hero-logo { max-width:min(560px,82vw); }
.hero-meta {
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0.9rem;
  margin:0; color:var(--cream);
  font-size:clamp(0.68rem,1.2vw,0.82rem); font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase;
}
.hero-meta i { width:34px; height:1px; background:var(--orange-400); display:inline-block; }

.hero-count { display:flex; gap:clamp(0.6rem,2vw,1.6rem); }
.cd {
  min-width:clamp(58px,9vw,86px);
  padding:0.7rem 0.5rem 0.6rem;
  border:1px solid rgba(238,180,124,.42); border-radius:var(--r-md);
  background:rgba(42,10,3,.32); backdrop-filter:blur(4px);
}
.cd b {
  display:block; font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1; color:var(--orange-300);
}
.cd span {
  display:block; margin-top:0.35rem;
  font-size:0.5rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(245,239,225,.72);
}

.scroll-cue {
  margin-top:0.6rem; text-decoration:none; color:var(--cream);
  display:inline-flex; flex-direction:column; align-items:center; gap:0.4rem;
  font-size:0.58rem; font-weight:700; letter-spacing:0.24em; text-transform:uppercase;
  opacity:.72; animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* ---------- Intro ---------- */
.intro { background:var(--maroon-900); padding:clamp(64px,8vw,110px) 0; text-align:center; overflow:hidden; }
.intro .bg { opacity:.5; }
.intro-logo { width:min(300px,58vw); margin:0 auto 1.6rem; }
.intro-lead {
  max-width:40rem; margin:0 auto clamp(32px,4vw,52px);
  color:rgba(245,239,225,.9); font-size:clamp(0.95rem,1.5vw,1.12rem); line-height:1.75;
}
.film {
  position:relative; margin:0 auto; max-width:860px;
  border-radius:var(--r-lg); overflow:visible;
}
.film picture img { border-radius:var(--r-lg); width:100%; }
.play {
  position:absolute; inset:0; margin:auto;
  width:84px; height:84px; border-radius:50%;
  border:1.5px solid rgba(245,239,225,.66);
  background:rgba(42,10,3,.42); backdrop-filter:blur(6px);
  color:var(--cream); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease, background-color .25s ease;
}
.play:hover { transform:scale(1.08); background:var(--orange-600); border-color:var(--orange-600); }
.stamp { position:absolute; top:-26px; right:-18px; width:clamp(72px,9vw,110px); }
.intro-verse {
  max-width:38rem; margin:clamp(34px,4vw,54px) auto 0;
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(1.05rem,2vw,1.5rem); line-height:1.5; color:var(--orange-300);
}
.intro-verse em { display:block; margin-top:0.8rem; font-size:0.66em; color:rgba(245,239,225,.6); font-style:normal; }

/* ---------- Last year carousel ---------- */
/* Background kept from the original recap band: cream texture over cream-2. */
.recap { background:var(--cream-2); padding:clamp(52px,7vw,92px) 0; overflow:hidden; }
.recap .bg { opacity:.55; }
.recap-head { margin-bottom:clamp(26px,3.5vw,42px); }
.recap-head .section-h2 { color:var(--maroon-900); }
.recap-head .section-lead { margin-bottom:0; }

.carousel {
  position:relative; z-index:2;
  padding:0 clamp(12px,4vw,58px);
  max-width:calc(var(--maxw) + 6rem); margin:0 auto;
}
.carousel-track {
  display:flex; gap:clamp(10px,1.4vw,18px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none;
  padding:4px 2px 10px;
}
.carousel-track::-webkit-scrollbar { display:none; }

.carousel-item {
  flex:0 0 clamp(200px,23vw,290px);
  margin:0; scroll-snap-align:start;
}
.carousel-item img {
  width:100%; height:clamp(210px,25vw,330px); object-fit:cover;
  border-radius:var(--r-md);
  box-shadow:0 10px 30px rgba(42,10,3,.18);
}
.carousel-item figcaption {
  margin-top:0.55rem;
  font-family:var(--font-display); font-size:0.72rem; line-height:1.45;
  color:var(--ink-soft); text-align:center;
}

/* Arrows sit over the edges of the track */
.carousel-nav {
  position:absolute; top:clamp(105px,12.5vw,165px); z-index:4;
  width:2.9rem; height:2.9rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.9rem; line-height:1; padding-bottom:0.22rem;
  background:rgba(255,255,255,.92); color:var(--maroon-800);
  border:1px solid rgba(42,10,3,.14);
  box-shadow:0 4px 16px rgba(42,10,3,.16);
  cursor:pointer; transition:background-color .2s ease, transform .2s ease, opacity .2s ease;
}
.carousel-nav:hover { background:#fff; transform:scale(1.06); }
.carousel-nav:focus-visible { outline:2px solid var(--orange-500); outline-offset:2px; }
.carousel-nav[disabled] { opacity:.3; cursor:default; transform:none; }
.carousel-prev { left:clamp(-4px,0.5vw,10px); }
.carousel-next { right:clamp(-4px,0.5vw,10px); }

@media (max-width:640px) {
  .carousel { padding:0 var(--pad); }
  .carousel-item { flex:0 0 74%; }
  .carousel-item img { height:clamp(200px,52vw,260px); }
  /* Arrows crowd a narrow screen — swiping is the natural gesture there. */
  .carousel-nav { display:none; }
}

/* ---------- About (classic two-column layout, dark theme) ---------- */
.about {
  background:var(--maroon-900); color:var(--cream);
  padding:clamp(60px,8vw,116px) 0; overflow:hidden;
}
.about .bg { opacity:.42; }

/* Faint figure echoing the classic layout's decorative silhouette */
.about-silhouette {
  position:absolute; right:-2%; bottom:0; z-index:1;
  height:min(78%,520px); width:auto; opacity:.055;
  pointer-events:none; user-select:none;
}

.about-grid {
  display:grid; grid-template-columns:0.92fr 1.08fr;
  gap:clamp(28px,5vw,72px); align-items:center;
}
.about-image img {
  width:100%; display:block;
  /* The bundled photo is a 3:1 panorama; the classic layout used a taller
     portrait frame, so crop to it rather than showing a thin strip. */
  aspect-ratio:4 / 5; object-fit:cover; object-position:center;
  border-radius:var(--r-lg);
  box-shadow:0 18px 48px rgba(0,0,0,.4);
}

.about-content .eyebrow { color:var(--orange-400); }
.about-content h2 {
  margin:0 0 1.4rem;
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(2rem,4.3vw,3.35rem); line-height:1.06;
  letter-spacing:-0.03em; color:var(--cream);
}

/* Pull-quote with the gold rule, as on the classic page.
   Scoped to .about-content so it outranks the generic paragraph rule below. */
.about-content .about-lead {
  margin:0 0 1.5rem; padding-left:1.15rem;
  border-left:2px solid var(--orange-500);
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.6;
  color:var(--orange-300);
}

.about-content p {
  margin:0 0 1.1rem;
  font-family:var(--font-display);
  font-size:clamp(0.92rem,1.32vw,1.02rem); line-height:1.8;
  color:rgba(245,239,225,.84);
}

.about-stats {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,2rem);
  margin:clamp(26px,3.4vw,42px) 0 0;
  padding-top:clamp(22px,3vw,32px);
  border-top:1px solid rgba(238,180,124,.26);
}
.stat-num {
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1;
  color:var(--orange-300);
}
.stat-label {
  margin-top:0.45rem;
  font-family:var(--font-display); font-size:0.58rem; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(245,239,225,.62); line-height:1.5;
}

.about-more { margin:clamp(26px,3vw,40px) 0 0; }
.about-more .arrow { margin-left:0.3rem; }

/* ---------- Speaker ---------- */
.speaker { background:var(--teal-900); color:var(--cream); padding:clamp(56px,7vw,104px) 0; }
.speaker-grid { display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(28px,5vw,72px); align-items:center; }
.speaker-photo { position:relative; }
.speaker-photo img { width:100%; border-radius:var(--r-lg); }
.speaker-badge {
  position:absolute; left:14px; bottom:14px;
  background:var(--orange-600); color:#fff;
  padding:0.4rem 0.8rem; border-radius:var(--r-pill);
  font-size:0.56rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;
}
.speaker-copy .eyebrow { color:var(--orange-400); }
.speaker-copy h2 {
  margin:0 0 1.1rem;
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.9rem,4vw,3.1rem); line-height:1.04; letter-spacing:-0.03em;
}
.speaker-copy h2 em { font-style:italic; color:var(--orange-300); }
.speaker-copy p { margin:0 0 1.8rem; font-size:clamp(0.92rem,1.35vw,1.04rem); line-height:1.8; color:rgba(245,239,225,.84); }
.speaker-facts { display:flex; gap:clamp(1.2rem,3vw,2.6rem); list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.speaker-facts li { display:flex; flex-direction:column; }
.speaker-facts b {
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1; color:var(--orange-300);
}
.speaker-facts span { margin-top:0.35rem; font-size:0.56rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:rgba(245,239,225,.62); }

/* ---------- Venue ---------- */
.venue {
  background:var(--cream);
  padding:clamp(56px,7vw,104px) 0;
  position:relative; overflow:hidden;
}
/* Patterned enhancement over the same cream: a fine dot grid crossed by soft
   diagonal banding, both in the theme's gold/orange at very low alpha, plus a
   warm radial glow so the flat cream has some depth. */
.venue::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(184,134,11,.16) 1px, transparent 1.4px),
    repeating-linear-gradient(135deg,
      rgba(201,74,15,.035) 0px, rgba(201,74,15,.035) 2px,
      transparent 2px, transparent 22px),
    radial-gradient(ellipse at 50% 0%, rgba(224,106,27,.09), transparent 62%);
  background-size:22px 22px, auto, auto;
  background-position:0 0, 0 0, 0 0;
}
.venue > .wrap { position:relative; z-index:1; }

/* Feature cards lift off the pattern */
.venue-features li { backdrop-filter:blur(2px); }
.venue-features {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:0.7rem;
}
.venue-features li {
  display:flex; align-items:center; gap:0.7rem;
  padding:0.9rem 1.1rem;
  background:#fff; border:1px solid rgba(42,10,3,.1); border-radius:var(--r-md);
  font-size:0.88rem; font-weight:500; color:var(--ink-soft);
}
.venue-features li::before {
  content:''; flex-shrink:0; width:8px; height:8px; border-radius:50%;
  background:var(--orange-500);
}

/* ---------- Past conferences ---------- */
/* Same maroon as before; the world map now sits behind the whole section as a
   large, low-contrast backdrop rather than as an inline image. */
.legacy {
  background:var(--maroon-900); color:var(--cream);
  padding:clamp(56px,7vw,104px) 0; overflow:hidden;
}
.legacy-map-bg {
  object-fit:contain;
  object-position:center 42%;
  opacity:.20;
}
.legacy .section-h2 { color:var(--cream); }
.legacy .section-h2 em { color:var(--orange-300); }
.legacy .section-lead { color:rgba(245,239,225,.8); }
.legacy .eyebrow { color:var(--orange-400); }

.past-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  gap:clamp(12px,1.4vw,20px);
}
.past-card {
  display:block; text-decoration:none; color:inherit;
  min-height:clamp(150px,15vw,200px);
  padding:clamp(18px,2vw,26px);
  background:rgba(245,239,225,.035);
  border:1px solid rgba(238,180,124,.24);
  border-radius:var(--r-md);
  backdrop-filter:blur(3px);
  transition:border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.past-card-link:hover {
  border-color:var(--orange-400);
  background:rgba(245,239,225,.07);
  transform:translateY(-3px);
}
.past-year {
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.75rem); line-height:1;
  color:var(--orange-300); margin-bottom:0.6rem;
}
.past-card h4 {
  margin:0 0 0.5rem;
  font-family:var(--font-serif); font-weight:400; font-style:italic;
  font-size:clamp(1.05rem,1.7vw,1.28rem); line-height:1.25;
  color:var(--cream);
}
.past-loc {
  font-family:var(--font-display); font-size:0.62rem; font-weight:600;
  letter-spacing:0.15em; text-transform:uppercase;
  color:rgba(245,239,225,.6);
}
.past-watch {
  display:inline-block; margin-top:0.9rem;
  font-family:var(--font-display); font-size:0.6rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--orange-400);
  opacity:0; transform:translateY(4px);
  transition:opacity .25s ease, transform .25s ease;
}
.past-card-link:hover .past-watch { opacity:1; transform:translateY(0); }

.past-cta { margin:clamp(30px,3.5vw,48px) 0 0; text-align:center; }
.past-cta .arrow { margin-left:0.3rem; }

@media (max-width:640px) {
  .past-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .past-card { min-height:0; padding:14px 13px; }
  .past-year { font-size:1.15rem; margin-bottom:0.35rem; }
  .past-card h4 { font-size:0.92rem; }
  .past-loc { font-size:0.55rem; letter-spacing:0.1em; }
  /* Hover cue is meaningless on touch */
  .past-watch { display:none; }
  .legacy-map-bg { opacity:.14; }
}

@media (max-width:330px) {
  .past-grid { grid-template-columns:1fr; }
}

/* ---------- FAQ ---------- */
.faq { background:var(--cream-2); padding:clamp(56px,7vw,104px) 0; }
.faq .bg { opacity:.16; }
.faq-list { max-width:52rem; margin:0 auto clamp(34px,4vw,54px); }
.faq-list details {
  border-bottom:1px solid rgba(42,10,3,.16);
  padding:0.2rem 0;
}
.faq-list summary {
  cursor:pointer; list-style:none; padding:1.1rem 2rem 1.1rem 0; position:relative;
  font-size:clamp(0.95rem,1.4vw,1.08rem); font-weight:600; color:var(--maroon-900);
}
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after {
  content:'+'; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:1.5rem; font-weight:300; color:var(--orange-600); transition:transform .2s ease;
}
.faq-list details[open] summary::after { content:'–'; }
.faq-list p { margin:0 0 1.2rem; font-size:0.92rem; line-height:1.75; color:var(--ink-soft); max-width:46rem; }

/* ---------- Closing ---------- */
.closing {
  background:var(--maroon-900); color:var(--cream);
  padding:clamp(52px,7vw,96px) 0; text-align:center; overflow:hidden;
}
.closing .bg { opacity:.42; }
.closing-h2 {
  margin:0 0 1.2rem;
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(2.1rem,5.4vw,4.2rem); line-height:1; letter-spacing:-0.03em;
}
.closing-h2 em { font-style:italic; color:var(--orange-300); }
.closing-p {
  margin:0 auto; max-width:34rem;
  font-size:clamp(0.72rem,1.3vw,0.86rem); font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; line-height:2; color:rgba(245,239,225,.78);
}
.closing-p b { color:var(--orange-300); }
.closing .hero-cta { margin-top:clamp(20px,2.6vw,32px); }
.closing-note {
  margin:clamp(16px,2vw,24px) auto 0; max-width:34rem;
  font-family:var(--font-display); font-size:0.76rem; line-height:1.6;
  color:rgba(245,239,225,.66);
}

/* ---------- Footer ---------- */
.foot { background:#1B0703; color:rgba(245,239,225,.76); padding:clamp(44px,5vw,72px) 0 0; }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:clamp(24px,4vw,56px); }
.foot-logo { width:120px; margin-bottom:1rem; }
.foot-brand p { margin:0; font-size:0.86rem; line-height:1.7; max-width:22rem; }
.foot h4 {
  margin:0 0 0.9rem; font-size:0.6rem; font-weight:800;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--orange-400);
}
.foot ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.55rem; }
.foot li, .foot a { font-size:0.86rem; line-height:1.6; text-decoration:none; }
.foot a:hover { color:var(--orange-300); }
.foot-base {
  max-width:var(--maxw); margin:clamp(34px,4vw,54px) auto 0;
  padding:1.3rem var(--pad); border-top:1px solid rgba(245,239,225,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem;
  font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(245,239,225,.5);
}

/* ============ Tablet ============ */
@media (max-width:900px) {
  .about-grid { grid-template-columns:1fr; }
  .about-image img { aspect-ratio:16 / 10; }
  .about-silhouette { display:none; }
  .speaker-grid { grid-template-columns:1fr; }
  .foot-grid { grid-template-columns:1fr 1fr; }
  .foot-brand { grid-column:1 / -1; }
}

/* ============ Phone ============ */
@media (max-width:760px) {
  .nav-links { display:none; }
  .nav-toggle { display:block; }
  .nav-drawer {
    display:block; list-style:none; margin:0;
    padding:0 var(--pad); max-height:0; overflow:hidden;
    background:rgba(42,10,3,.97); transition:max-height .3s ease, padding .3s ease;
  }
  .nav.is-open .nav-drawer { max-height:340px; padding:0.6rem var(--pad) 1.2rem; }
  .nav.is-open { background:rgba(42,10,3,.97); }
  .nav-drawer a {
    display:block; padding:0.75rem 0; text-decoration:none; color:var(--cream);
    font-size:0.78rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
    border-bottom:1px solid rgba(245,239,225,.1);
  }
  .nav.is-open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav.is-open .nav-toggle span:nth-child(2) { opacity:0; }
  .nav.is-open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  .hero-inner { padding-top:108px; gap:1.5rem; }
  .hero-meta { gap:0.5rem; font-size:0.6rem; letter-spacing:0.14em; }
  .hero-meta i { display:none; }
  .hero-count { gap:0.45rem; }
  .cd { min-width:0; flex:1; padding:0.55rem 0.3rem 0.5rem; }

  .stamp { top:-16px; right:-6px; }
  .play { width:62px; height:62px; }

  .about-stats { grid-template-columns:1fr; gap:1.1rem; text-align:left; }
  .about-stats > div { display:flex; align-items:baseline; gap:0.7rem; }
  .stat-label { margin-top:0; }
  .venue-features li { font-size:0.82rem; padding:0.75rem 0.9rem; }
  .foot-grid { grid-template-columns:1fr; }
  .foot-base { justify-content:center; text-align:center; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .scroll-cue { animation:none; }
  * { transition:none !important; }
}

/* ============================================================
   CMS integration
   The front page reuses the shared footer and language picker
   from the rest of the site, so they need styling that matches
   this page's palette rather than the classic theme's.
   ============================================================ */

/* ---- Buttons ---- */
.btn {
  display:inline-block; text-decoration:none; text-align:center; cursor:pointer;
  font-family:var(--font-display); font-weight:800;
  font-size:0.76rem; letter-spacing:0.13em; text-transform:uppercase;
  padding:0.85rem 1.7rem; border-radius:var(--r-pill);
  border:1.5px solid transparent;
  transition:transform .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
}
.btn-solid { background:var(--orange-600); color:#fff; border-color:var(--orange-600); }
.btn-solid:hover { background:var(--orange-500); border-color:var(--orange-500); transform:translateY(-2px); }
.btn-line { background:transparent; color:inherit; border-color:currentColor; }
.btn-line:hover { background:currentColor; transform:translateY(-2px); }
.hero .btn-line:hover, .closing .btn-line:hover { color:var(--maroon-900); }
.venue .btn-line:hover, .about .btn-line:hover, .speaker .btn-line:hover { color:var(--cream); }

.hero-cta { display:flex; gap:0.7rem; flex-wrap:wrap; justify-content:center; }
.about-more, .venue-cta { margin:clamp(24px,3vw,36px) 0 0; display:flex; gap:0.7rem; flex-wrap:wrap; justify-content:center; }
.speaker-copy .btn { margin-top:1.8rem; }

/* ---- Nav: primary item + language picker ---- */
.nav-right { display:flex; align-items:center; gap:0.9rem; }
.nav-links a.nav-cta {
  padding:0.55rem 1.15rem; border-radius:var(--r-pill);
  background:var(--orange-600); color:#fff; opacity:1;
}
.nav-links a.nav-cta:hover { background:var(--orange-500); color:#fff; }
.nav-links a.active { color:var(--orange-300); opacity:1; }

/* The shared picker markup is themed for the cream site; recolour it here. */
.nav .lang-picker, .nav .lang-select, .nav select {
  background:rgba(245,239,225,.1); color:var(--cream);
  border:1px solid rgba(238,180,124,.4); border-radius:var(--r-pill);
  font-family:var(--font-display); font-size:0.7rem; font-weight:600;
  padding:0.4rem 0.7rem;
}
.nav .lang-picker option, .nav select option { color:#241208; }

/* ---- Shared footer ----
   includes/footer.php is styled by the site-wide style.css, which this page
   deliberately does not load. Without these rules the footer has no grid, no
   container width, and — most visibly — unconstrained SVGs that render as
   enormous social icons. Everything the footer needs is defined here. */
body > footer {
  background:#1B0703;
  color:rgba(245,239,225,.72);
  font-family:var(--font-display);
  padding:clamp(44px,5.5vw,72px) 0 0;
}
body > footer .container {
  max-width:var(--maxw); margin:0 auto;
  padding-left:var(--pad); padding-right:var(--pad);
}
body > footer a { color:rgba(245,239,225,.72); text-decoration:none; transition:color .2s ease; }
body > footer a:hover { color:var(--orange-300); }

.footer-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:clamp(24px,3.4vw,52px);
  padding-bottom:clamp(30px,4vw,48px);
}

.footer-brand h3 {
  margin:0 0 0.6rem;
  font-family:var(--font-serif); font-weight:400; font-style:italic;
  font-size:1.4rem; line-height:1.1; color:var(--orange-300);
}
.footer-brand p {
  margin:0 0 1.1rem; max-width:22rem;
  font-size:0.84rem; line-height:1.7;
}

/* Social icons — small circular buttons */
.footer-social { display:flex; gap:0.5rem; }
.footer-social a {
  width:2rem; height:2rem; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(245,239,225,.07);
  border:1px solid rgba(238,180,124,.28);
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-social a:hover {
  background:var(--orange-600); border-color:var(--orange-600); transform:translateY(-2px);
}
.footer-social svg {
  width:0.95rem; height:0.95rem;      /* the fix: SVGs were unconstrained */
  fill:currentColor; display:block;
}
.footer-social a:hover svg { fill:#fff; }

.footer-col h5 {
  margin:0 0 0.9rem;
  font-size:0.6rem; font-weight:800;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--orange-400);
}
.footer-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.55rem; }
.footer-col li { font-size:0.84rem; line-height:1.6; }

/* WhatsApp row (icon + number) */
.footer-whatsapp a { display:inline-flex; align-items:center; gap:0.45rem; }
.footer-whatsapp svg { width:0.95rem; height:0.95rem; fill:#25d366; flex-shrink:0; }
.footer-whatsapp a:hover svg { transform:scale(1.1); }
.footer-whatsapp span { line-height:1.4; }

.footer-bottom {
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding:1.3rem 0;
  border-top:1px solid rgba(245,239,225,.12);
  font-size:0.7rem; letter-spacing:0.08em;
  color:rgba(245,239,225,.5);
}
.footer-langs { display:flex; gap:0.75rem; flex-wrap:wrap; }
.footer-langs .lang-soon { opacity:.45; cursor:default; }

@media (max-width:900px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
}
@media (max-width:560px) {
  .footer-grid { grid-template-columns:1fr; gap:26px; }
  .footer-bottom { justify-content:center; text-align:center; }
  .footer-brand p { max-width:none; }
}

/* The sticky mobile action bar sits above the footer on small screens. */
@media (max-width:880px) { body { padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px)); } }

@media (max-width:760px) {
  .hero-cta .btn { flex:1 1 auto; min-width:11rem; }
  .nav-right { gap:0.5rem; }
}

/* ============================================================
   Hero slideshow + registration notice
   ============================================================ */
.hero-slides { position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-slide {
  position:absolute; inset:0;
  opacity:0; transition:opacity 1.1s ease;
  pointer-events:none;
}
.hero-slide.is-active { opacity:1; }
.hero-slide img, .hero-slide video {
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Dots sit above the veil, bottom-centre */
.hero-dots {
  position:absolute; left:0; right:0; bottom:clamp(16px,3vh,32px);
  z-index:3; display:flex; gap:0.5rem; justify-content:center;
}
.hero-dot {
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  background:rgba(245,239,225,.38);
  border:1px solid rgba(245,239,225,.5);
  transition:background-color .25s ease, transform .25s ease, width .25s ease;
}
.hero-dot:hover { background:rgba(245,239,225,.7); }
.hero-dot.is-active { background:var(--orange-400); border-color:var(--orange-400); width:26px; border-radius:99px; }
.hero-dot:focus-visible { outline:2px solid var(--orange-300); outline-offset:3px; }

/* Walk-in registration notice */
.hero-notice {
  max-width:36rem; margin:0.4rem auto 0;
  padding:0.75rem 1.1rem;
  border:1px solid rgba(238,180,124,.4); border-radius:var(--r-md);
  background:rgba(42,10,3,.42); backdrop-filter:blur(4px);
  color:rgba(245,239,225,.92);
  font-size:clamp(0.74rem,1.15vw,0.84rem); line-height:1.6; text-align:center;
}

/* ============================================================
   Language picker
   The shared picker relies on style.css, which this page does
   not load — without these rules the dropdown renders open as a
   bare bulleted list. Restyled here for the dark nav.
   ============================================================ */
.lang-picker { position:relative; }
.lang-current {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.4rem 0.7rem; cursor:pointer;
  background:rgba(245,239,225,.1); color:var(--cream);
  border:1px solid rgba(238,180,124,.4); border-radius:var(--r-pill);
  font-family:var(--font-display); font-size:0.7rem; font-weight:600;
}
.lang-current:hover { background:rgba(245,239,225,.18); }
.lang-caret { font-size:0.6rem; opacity:.7; }

.lang-menu {
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  margin:0; padding:0.35rem; list-style:none;
  min-width:11rem; max-height:min(60vh,22rem); overflow-y:auto;
  background:#2A0A03; border:1px solid rgba(238,180,124,.34);
  border-radius:var(--r-md); box-shadow:0 12px 34px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.lang-picker.is-open .lang-menu { opacity:1; visibility:visible; transform:translateY(0); }
.lang-menu li { margin:0; }
.lang-option {
  display:flex; align-items:center; gap:0.5rem; width:100%;
  padding:0.5rem 0.65rem; cursor:pointer; text-align:left;
  background:transparent; border:0; border-radius:6px;
  color:var(--cream); font-family:var(--font-display); font-size:0.78rem;
}
.lang-option:hover { background:rgba(238,180,124,.16); }
.lang-flag { font-size:0.95rem; line-height:1; }

@media (max-width:760px) {
  .lang-menu { right:auto; left:50%; transform:translate(-50%,-6px); }
  .lang-picker.is-open .lang-menu { transform:translate(-50%,0); }
  .lang-current .lang-name { display:none; }
  .hero-notice { font-size:0.72rem; padding:0.65rem 0.85rem; }
}

/* ---------- Through the years (conference photo galleries) ---------- */
.tty { background:var(--cream); padding:clamp(56px,7vw,104px) 0; }
.tty-grid {
  display:grid;
  /* 12rem gives five across at full width, matching the original layout,
     then steps down naturally on narrower screens. */
  grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr));
  gap:clamp(10px,1.3vw,18px);
}
.tty-card {
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4 / 3;
  border-radius:var(--r-md);
  text-decoration:none; color:var(--cream);
  background:var(--maroon-800);
  box-shadow:0 8px 24px rgba(42,10,3,.14);
  transition:transform .28s ease, box-shadow .28s ease;
}
.tty-card:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(42,10,3,.24); }
.tty-card:focus-visible { outline:2px solid var(--orange-500); outline-offset:3px; }
.tty-card img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.tty-card:hover img { transform:scale(1.06); }
.tty-noimg {
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--maroon-800), var(--maroon-900));
}

/* Gradient scrim so the caption stays readable over any photo */
.tty-card-overlay {
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(12px,1.4vw,18px);
  background:linear-gradient(to top,
    rgba(20,6,2,.88) 0%, rgba(20,6,2,.55) 42%, rgba(20,6,2,.06) 78%, transparent 100%);
}
.tty-year {
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1;
  color:var(--orange-300); margin-bottom:0.2rem;
}
.tty-theme {
  font-family:var(--font-serif); font-weight:400; font-style:italic;
  font-size:clamp(0.98rem,1.4vw,1.15rem); line-height:1.2;
  color:var(--cream); margin-bottom:0.35rem;
}
.tty-count {
  font-family:var(--font-display); font-size:0.58rem; font-weight:600;
  letter-spacing:0.11em; text-transform:uppercase;
  color:rgba(245,239,225,.72); line-height:1.45;
}

@media (max-width:640px) {
  .tty-grid { grid-template-columns:1fr 1fr; gap:9px; }
  .tty-card-overlay { padding:10px; }
  .tty-year { font-size:0.95rem; }
  .tty-theme { font-size:0.86rem; }
  .tty-count { font-size:0.52rem; letter-spacing:0.08em; }
}
@media (max-width:330px) {
  .tty-grid { grid-template-columns:1fr; }
}

/* ---------- Featured videos ---------- */
/* Deep teal from the palette — the same tone as the speaker section. Sits
   between two cream sections so the page keeps its light/dark rhythm, and
   video thumbnails read better against a dark ground. */
.videos { background:var(--teal-900); color:var(--cream); padding:clamp(56px,7vw,104px) 0; }
.videos .section-h2 { color:var(--cream); }
.videos .section-h2 em { color:var(--orange-300); }
.videos .section-lead { color:rgba(245,239,225,.8); }
.videos .eyebrow { color:var(--orange-400); }

.videos-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr));
  gap:clamp(16px,2vw,28px);
}
.video-card { display:block; text-decoration:none; color:inherit; }

.video-thumb {
  position:relative; display:block; overflow:hidden;
  aspect-ratio:16 / 9;
  border-radius:var(--r-md);
  background:var(--teal-800);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.video-thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.video-card:hover .video-thumb img { transform:scale(1.05); }

.video-play {
  position:absolute; inset:0; margin:auto;
  width:3.4rem; height:3.4rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(245,239,225,.9); color:var(--maroon-900);
  transition:background-color .25s ease, transform .25s ease;
}
.video-play svg { width:1.5rem; height:1.5rem; margin-left:2px; }
.video-card:hover .video-play { background:var(--orange-600); color:#fff; transform:scale(1.1); }
.video-card:focus-visible .video-thumb { outline:2px solid var(--orange-400); outline-offset:3px; }

/* "Visit Channel" tile — replaces the inline styles the classic page used */
.video-thumb-channel {
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--maroon-700), var(--maroon-900));
  border:1px solid rgba(238,180,124,.24);
}
.video-channel-inner { text-align:center; padding:1rem; }
.video-channel-label {
  display:block;
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.1;
  color:var(--orange-300);
}
.video-channel-handle {
  display:block; margin-top:0.55rem;
  font-family:var(--font-display); font-size:0.68rem;
  letter-spacing:0.22em; color:rgba(245,239,225,.72);
  word-break:break-word;
}
.video-card:hover .video-thumb-channel { border-color:var(--orange-400); }

.video-info { display:block; padding:0.85rem 0.15rem 0; }
.video-title {
  display:block;
  font-family:var(--font-serif); font-weight:400; font-style:italic;
  font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.25;
  color:var(--cream); margin-bottom:0.3rem;
  transition:color .2s ease;
}
.video-card:hover .video-title { color:var(--orange-300); }
.video-label {
  display:block;
  font-family:var(--font-display); font-size:0.6rem; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(245,239,225,.58);
}

@media (max-width:640px) {
  .videos-grid { grid-template-columns:1fr; gap:20px; }
  .video-play { width:2.9rem; height:2.9rem; }
  .video-play svg { width:1.25rem; height:1.25rem; }
  .video-title { font-size:1rem; }
}

/* ---------- Ministry materials ---------- */
/* Deep maroon with a warm centre glow, matching the original band. Cards stay
   light so the product screenshots read clearly, but pick up the theme's
   radii, serif titles and gold "Open" affordance. */
.materials {
  position:relative; overflow:hidden;
  background:var(--maroon-900); color:var(--cream);
  padding:clamp(56px,7vw,104px) 0;
}
.materials::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(224,106,27,.16), transparent 62%),
    linear-gradient(180deg, rgba(85,25,10,.34), transparent 42%);
}
.materials > .wrap { position:relative; z-index:1; }
.materials .section-h2 { color:var(--cream); }
.materials .section-h2 em { color:var(--orange-300); }
.materials .section-lead { color:rgba(245,239,225,.82); }
.materials .eyebrow { color:var(--orange-400); }

.materials-grid {
  display:grid;
  /* 11.5rem fits all five in one row at full width, as in the original,
     then steps down naturally on narrower screens. */
  grid-template-columns:repeat(auto-fit, minmax(11.5rem, 1fr));
  gap:clamp(12px,1.5vw,20px);
  align-items:stretch;
}

.material-card {
  display:flex; flex-direction:column;
  text-decoration:none; color:var(--ink);
  background:#fdfaf4;
  border:1px solid rgba(238,180,124,.2);
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.26);
  transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.material-card:hover {
  transform:translateY(-4px);
  border-color:var(--orange-400);
  box-shadow:0 18px 40px rgba(0,0,0,.36);
}
.material-card:focus-visible { outline:2px solid var(--orange-400); outline-offset:3px; }

.material-thumb {
  position:relative; display:block;
  aspect-ratio:16 / 10; overflow:hidden;
  background:var(--cream-2);
}
.material-thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.material-card:hover .material-thumb img { transform:scale(1.05); }
.material-thumb-fallback {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; color:var(--gold, #b8860b); opacity:.5;
}
.material-badge {
  position:absolute; top:0.6rem; left:0.6rem;
  padding:0.26rem 0.6rem; border-radius:var(--r-pill);
  background:rgba(253,250,244,.94);
  font-family:var(--font-display); font-size:0.55rem; font-weight:800;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--maroon-800);
}

.material-body {
  display:flex; flex-direction:column; flex:1;
  padding:clamp(13px,1.2vw,17px);
}
.material-title {
  display:block; margin-bottom:0.45rem;
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1rem,1.35vw,1.16rem); line-height:1.22;
  color:var(--maroon-900);
}
.material-sub {
  display:block; flex:1;
  font-family:var(--font-display); font-size:0.79rem; line-height:1.6;
  color:var(--ink-soft);
}
.material-cta {
  display:inline-block; margin-top:0.9rem;
  font-family:var(--font-display); font-size:0.6rem; font-weight:800;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--orange-600);
}
.material-cta .arrow { display:inline-block; transition:transform .2s ease; }
.material-card:hover .material-cta .arrow { transform:translate(2px,-2px); }

@media (max-width:640px) {
  .materials-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .material-body { padding:11px; }
  .material-title { font-size:0.92rem; }
  .material-sub { font-size:0.72rem; line-height:1.5; }
  .material-badge { font-size:0.5rem; padding:0.2rem 0.45rem; }
  .material-cta { font-size:0.55rem; margin-top:0.7rem; }
}
@media (max-width:340px) {
  .materials-grid { grid-template-columns:1fr; }
}

/* ============================================================
   MOBILE OPTIMISATION
   The page ran to ~13 screens on a phone. These rules cut the
   vertical run, convert the two stacked card grids into swipeable
   rows, and reserve space for images so nothing jumps as it loads.
   ============================================================ */

/* Accessible-but-invisible text (used by the hero H1) */
.sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.hero-h1 { margin:0; line-height:0; }
.hero-h1 .hero-logo { display:block; margin:0 auto; }

/* Reserve space so images don't shift the layout while loading.
   NOTE: any <img> carrying width/height attributes also needs height:auto,
   or the browser uses the attribute height as the rendered height. */
img[width][height] { height:auto; }
.hero-logo { aspect-ratio:1701 / 486; height:auto; }
.intro-logo { aspect-ratio:1076 / 851; }
.legacy-map-bg { aspect-ratio:691 / 991; }

@media (max-width:640px) {
  /* ---- Tighter vertical rhythm across every band ---- */
  .about, .speaker, .venue, .legacy, .tty, .videos, .faq, .materials, .recap {
    padding-top:clamp(34px,7vw,46px);
    padding-bottom:clamp(34px,7vw,46px);
  }
  .closing { padding-top:clamp(30px,6vw,42px); padding-bottom:clamp(30px,6vw,42px); }
  .section-lead { margin-bottom:1.4rem; font-size:0.82rem; line-height:1.6; }
  .section-h2 { font-size:1.55rem; margin-bottom:0.5rem; }
  .eyebrow { font-size:0.6rem; margin-bottom:0.45rem; }

  /* ---- Hero: everything (logo, countdown, CTA, notice) fits one screen,
          so the first thing a visitor does is read, not scroll. ---- */
  .hero-inner { padding-top:84px; padding-bottom:24px; gap:0.85rem; }
  .hero-logo { max-width:72vw; }
  .hero-meta { gap:0.3rem; font-size:0.56rem; }
  .hero-count { gap:0.3rem; }
  .cd { padding:0.4rem 0.2rem 0.35rem; }
  .cd b { font-size:1.25rem; }
  .cd span { font-size:0.45rem; margin-top:0.2rem; }
  .hero-cta .btn { font-size:0.62rem; padding:0.7rem 1rem; min-height:44px; }
  .hero-notice {
    margin-top:0; padding:0.55rem 0.8rem;
    font-size:0.68rem; line-height:1.45;
  }
  /* The notice already tells the visitor to keep going; the animated cue
     is redundant here and costs ~50px of a small screen. */
  .scroll-cue { display:none; }

  /* ---- About: shorter photo, tighter type ---- */
  .about-grid { gap:20px; }
  .about-image img { aspect-ratio:16 / 11; }
  .about-content h2 { font-size:1.5rem; margin-bottom:0.9rem; }
  .about-content .about-lead { font-size:0.92rem; margin-bottom:1rem; padding-left:0.85rem; }
  .about-content p { font-size:0.86rem; line-height:1.65; margin-bottom:0.8rem; }
  .about-stats { margin-top:18px; padding-top:16px; }
  .about-more { margin-top:20px; }

  /* ---- Speaker: shorter portrait ---- */
  .speaker-grid { gap:20px; }
  .speaker-photo img { aspect-ratio:4 / 3; object-fit:cover; object-position:center 22%; }
  .speaker-copy h2 { font-size:1.5rem; margin-bottom:0.7rem; }
  .speaker-copy p { font-size:0.86rem; line-height:1.65; margin-bottom:1.1rem; }
  .speaker-facts { gap:1.2rem; }
  .speaker-copy .btn { margin-top:1.1rem; }

  /* ---- Venue: two-up feature chips instead of six stacked rows ---- */
  .venue-features { grid-template-columns:1fr 1fr; gap:0.45rem; }
  .venue-features li { font-size:0.72rem; padding:0.6rem 0.65rem; gap:0.45rem; line-height:1.35; }
  .venue-features li::before { width:6px; height:6px; }
  .venue-cta { margin-top:20px; }

  /* ---- Carousels: shorter frames ---- */
  .carousel-item { flex:0 0 78%; }
  .carousel-item img { height:clamp(170px,44vw,220px); }
  .carousel-item figcaption { font-size:0.68rem; margin-top:0.4rem; }

  /* ---- Past conferences: compact cards ---- */
  .past-card { padding:12px 11px; }
  .past-cta { margin-top:20px; }

  /* ---- Through the years ---- */
  .tty-grid { gap:8px; }

  /* ---- Videos: was six full-width cards stacked (~1,870px).
          Now a swipeable row, same as the other galleries. ---- */
  .videos-grid {
    display:flex; gap:12px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; padding-bottom:6px;
    margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1);
    padding-left:var(--pad); padding-right:var(--pad);
  }
  .videos-grid::-webkit-scrollbar { display:none; }
  .video-card { flex:0 0 78%; scroll-snap-align:start; }
  .video-info { padding-top:0.6rem; }
  .video-title { font-size:0.95rem; }

  /* ---- Ministry materials: same treatment ---- */
  .materials-grid {
    display:flex; gap:10px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; padding-bottom:6px;
    margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1);
    padding-left:var(--pad); padding-right:var(--pad);
  }
  .materials-grid::-webkit-scrollbar { display:none; }
  .material-card { flex:0 0 62%; scroll-snap-align:start; }

  /* ---- FAQ: tighter rows ---- */
  .faq-list summary { padding:0.85rem 1.8rem 0.85rem 0; font-size:0.9rem; }
  .faq-list p { font-size:0.85rem; margin-bottom:0.9rem; }

  /* ---- Footer ---- */
  body > footer { padding-top:34px; }
  .footer-grid { padding-bottom:22px; gap:20px; }
  .footer-brand p { font-size:0.8rem; margin-bottom:0.8rem; }
  .footer-col li { font-size:0.8rem; }
}

/* A hint that a row scrolls sideways, shown only on touch devices */
@media (hover:none) and (pointer:coarse) and (max-width:640px) {
  .videos-grid::after, .materials-grid::after {
    content:''; flex:0 0 1px;
  }
}

/* Short phone screens (e.g. 360x740): the hero has to lose a little more so
   the registration button and notice still land above the fold. */
@media (max-width:640px) and (max-height:800px) {
  .hero-inner { padding-top:76px; padding-bottom:18px; gap:0.65rem; }
  .hero-logo { max-width:66vw; }
  .cd { padding:0.32rem 0.18rem 0.3rem; }
  .cd b { font-size:1.1rem; }
  .cd span { font-size:0.42rem; }
  .hero-meta { font-size:0.52rem; letter-spacing:0.1em; }
  .hero-notice { font-size:0.64rem; padding:0.45rem 0.7rem; }
  .hero-cta .btn { font-size:0.58rem; padding:0.6rem 0.85rem; }
}

/* Touch targets — WCAG 2.5.5 asks for ~44px. The nav brand and the language
   picker were under that on phones. */
@media (hover:none) and (pointer:coarse) {
  .nav-brand { display:flex; flex-direction:column; justify-content:center; min-height:44px; }
  .lang-current { min-height:40px; padding:0.5rem 0.8rem; }
  .lang-option { min-height:44px; }
  .carousel-nav, .nav-toggle { min-width:44px; min-height:44px; }

  /* The slideshow dots stay visually small but get a full-size invisible
     hit area, so they're tappable without changing the design. */
  .hero-dot {
    padding:16px; background-clip:content-box;
    border:0; box-sizing:content-box;
    width:9px; height:9px;
  }
  .hero-dot.is-active { width:26px; }
  .hero-dots { gap:0; bottom:clamp(6px,1.5vh,18px); }

  /* Footer and drawer links: comfortable rows rather than bare text */
  .footer-col li a, .footer-col li { min-height:36px; display:flex; align-items:center; }
  .footer-col ul { gap:0.15rem; }
  .footer-whatsapp a { min-height:36px; }
  .nav-drawer a { padding:0.85rem 0; }
  .footer-social a { width:2.4rem; height:2.4rem; }
  .footer-langs a, .footer-langs span { padding:0.35rem 0; display:inline-block; }
}

/* ============================================================
   Compact phone hero
   The hero filled the whole screen on phones, which pushed every
   other section below the fold. Halved to ~50svh so the first
   content section is visible without scrolling. min-height (not
   height) so it still grows if the copy is edited to be longer.
   ============================================================ */
@media (max-width:640px) {
  .hero { min-height:50svh; }

  .hero-inner {
    padding-top:70px;          /* clears the fixed nav */
    padding-bottom:16px;
    gap:0.6rem;
  }

  .hero-logo { max-width:58vw; }

  .hero-meta { font-size:0.5rem; letter-spacing:0.09em; gap:0.25rem; }

  .hero-count { gap:0.28rem; }
  .cd { padding:0.3rem 0.15rem 0.28rem; border-radius:10px; }
  .cd b { font-size:1.05rem; }
  .cd span { font-size:0.4rem; margin-top:0.15rem; letter-spacing:0.12em; }

  .hero-cta { gap:0.4rem; }
  .hero-cta .btn { font-size:0.56rem; padding:0.55rem 0.8rem; min-height:42px; letter-spacing:0.09em; }

  .hero-notice { padding:0.45rem 0.7rem; font-size:0.62rem; line-height:1.4; }

  /* Dots sit tight to the bottom edge of the shorter frame */
  .hero-dots { bottom:6px; }
}

/* Very short screens get a little more compression again */
@media (max-width:640px) and (max-height:700px) {
  .hero-inner { padding-top:64px; gap:0.5rem; }
  .hero-logo { max-width:52vw; }
  .hero-notice { font-size:0.58rem; }
}

/* ============================================================
   Hero slides: show the whole image
   Slides were cropped to fill (object-fit:cover). They now scale
   to fit inside the frame so nothing is cut off, whatever the
   image's shape or the device's. The gaps that leaves are filled
   with a blurred, over-scaled copy of the same image — one extra
   paint of an already-cached file, no second download.
   ============================================================ */
.hero-slide { background:var(--maroon-900); }

.hero-slide::before {
  content:'';
  position:absolute; inset:-8%;          /* over-scaled so the blur has no edge */
  z-index:0;
  background-image:var(--slide-img);
  background-size:cover;
  background-position:center;
  filter:blur(26px) saturate(1.15) brightness(.62);
  transform:scale(1.12);
}
.hero-slide[data-video]::before { display:none; }   /* nothing to sample from a video */

.hero-slide img,
.hero-slide video {
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:contain;                    /* the change: whole image, never cropped */
  object-position:center;
}

/* Portrait phones: give the frame a little more room so a landscape photo
   isn't reduced to a thin strip, and pull the blurred fill in tighter. */
@media (max-width:640px) {
  .hero { min-height:56svh; }
  .hero-slide::before { filter:blur(18px) saturate(1.15) brightness(.58); }
}

@media (prefers-reduced-motion:reduce) {
  .hero-slide::before { transform:none; }
}

/* Hero buttons sit side by side on phones. Stacking them cost ~50px of a
   hero that's now only ~56svh tall, and both labels are short enough to fit. */
@media (max-width:640px) {
  .hero .hero-cta { flex-wrap:nowrap; gap:0.4rem; width:100%; }
  .hero .hero-cta .btn {
    flex:1 1 0; min-width:0;
    padding:0.55rem 0.4rem;
    font-size:0.55rem; letter-spacing:0.06em;
    white-space:nowrap;
  }
}
@media (max-width:340px) {
  .hero .hero-cta .btn { font-size:0.5rem; letter-spacing:0.04em; }
}

/* Hero "Accommodation" button: pure white outline and label, so it reads
   clearly against the photo alongside the solid orange Register button.
   (The default .btn-line inherits the hero's cream, which is slightly warm.) */
.hero .hero-cta .btn-line {
  border-color:#fff;
  color:#fff;
  background:transparent;
}
.hero .hero-cta .btn-line:hover,
.hero .hero-cta .btn-line:focus-visible {
  background:#fff;
  border-color:#fff;
  color:var(--maroon-900);
}

/* ============================================================
   Wordmark panel
   A solid black plate behind the "Give Thyself Wholly Conference
   2026" wordmark, so it stays legible whichever slide is showing
   — the slideshow can put a bright photo behind it at any moment.
   ============================================================ */
.hero-h1 {
  display:inline-block;
  background:#000;
  padding:clamp(14px,2.2vw,26px) clamp(20px,3.4vw,44px);
  border-radius:2px;
}
.hero-h1 .hero-logo { max-width:min(520px,74vw); }

@media (max-width:640px) {
  .hero-h1 { padding:11px 16px; }
  .hero-h1 .hero-logo { max-width:60vw; }
}
@media (max-width:640px) and (max-height:700px) {
  .hero-h1 { padding:9px 13px; }
  .hero-h1 .hero-logo { max-width:54vw; }
}

/* ============================================================
   Wordmark panel at 50%, shorter slideshow
   ============================================================ */
.hero-h1 { background:rgba(0,0,0,0.5); }

/* Slideshow height cut to 60% of what it was (100svh -> 60svh). */
.hero { min-height:60svh; }

@media (max-width:640px) {
  /* Phone: 56svh -> 34svh. The hero is min-height, so the logo, countdown,
     buttons and notice still set a floor — everything below is trimmed as
     far as it can go without crowding or shrinking tap targets. */
  .hero { min-height:34svh; }

  .hero-inner { padding-top:62px; padding-bottom:12px; gap:0.45rem; }
  .hero-h1 { padding:8px 13px; }
  .hero-h1 .hero-logo { max-width:52vw; }
  .hero-meta { font-size:0.46rem; }
  .cd { padding:0.26rem 0.14rem 0.24rem; }
  .cd b { font-size:0.95rem; }
  .cd span { font-size:0.37rem; margin-top:0.1rem; }
  .hero-cta .btn { padding:0.5rem 0.35rem; }
  .hero-notice { padding:0.4rem 0.6rem; font-size:0.58rem; line-height:1.35; }
}

/* The 60% target above was being held up by the hero's own content, not the
   min-height. These trim the content itself so the frame can actually reach it. */
.hero-inner { padding-top:88px; padding-bottom:26px; gap:1.05rem; }
.hero-h1 { padding:clamp(10px,1.5vw,18px) clamp(16px,2.6vw,32px); }
.hero-h1 .hero-logo { max-width:min(420px,64vw); }
.hero-meta { font-size:clamp(0.62rem,1vw,0.72rem); }
.cd { min-width:clamp(52px,7.5vw,72px); padding:0.5rem 0.4rem 0.45rem; }
.cd b { font-size:clamp(1.3rem,2.6vw,1.8rem); }
.hero-notice { padding:0.6rem 0.95rem; font-size:clamp(0.72rem,1vw,0.8rem); }

@media (max-width:640px) {
  .hero-inner { padding-top:56px; padding-bottom:10px; gap:0.35rem; }
  .hero-h1 { padding:7px 11px; }
  .hero-h1 .hero-logo { max-width:46vw; }
  .cd { min-width:0; padding:0.22rem 0.12rem 0.2rem; }
  .cd b { font-size:0.88rem; }
  .hero-cta .btn { padding:0.46rem 0.3rem; min-height:40px; }
  .hero-notice { padding:0.35rem 0.55rem; font-size:0.55rem; }
}

/* Registration-closed notice: now the hero's main message rather than a
   footnote under a button, so it carries more weight. */
.hero-notice-closed {
  max-width:32rem;
  border-color:rgba(238,180,124,.55);
  background:rgba(42,10,3,.62);
  color:#fff;
  font-weight:500;
  padding:0.85rem 1.2rem;
  font-size:clamp(0.78rem,1.15vw,0.9rem);
  line-height:1.55;
}
@media (max-width:640px) {
  .hero-notice-closed { padding:0.6rem 0.8rem; font-size:0.68rem; line-height:1.45; }
}

/* ---------- Live stream player ---------- */
.live-player {
  position:relative;
  width:100%;
  max-width:56rem;
  margin:clamp(20px,3vw,32px) auto 0;
  aspect-ratio:16 / 9;
  border-radius:var(--r-md);
  overflow:hidden;
  background:#000;
  border:1px solid rgba(238,180,124,.28);
  box-shadow:0 16px 44px rgba(0,0,0,.42);
}
.live-player iframe {
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; display:block;
}
.closing .live-player + .hero-cta { margin-top:clamp(16px,2vw,24px); }

@media (max-width:640px) {
  .live-player {
    margin-top:16px;
    /* Full-bleed on phones so the picture is as large as the screen allows */
    width:calc(100% + (var(--pad) * 2));
    max-width:none;
    margin-left:calc(var(--pad) * -1);
    margin-right:calc(var(--pad) * -1);
    border-radius:0;
    border-left:0; border-right:0;
  }
}