/* =========================================================
   An Evening with Fr. Dan Reehil (A Woman's Haven)
   ========================================================= */

:root{
  /* Brand */
  --crimson:#97012E;
  --crimson-lt:#c4123f;

  /* Ground */
  --ink:#080B13;
  --ink-2:#0C1120;
  --ink-3:#111829;
  --line:rgba(201,169,97,.20);
  --line-soft:rgba(255,255,255,.09);

  /* Gold */
  --gold:#C9A961;
  --gold-lt:#E8D9A8;
  --gold-dp:#9A7C3A;
  --gold-grad:linear-gradient(135deg,#9A7C3A 0%,#C9A961 26%,#F2E4BC 50%,#C9A961 74%,#8E7133 100%);

  /* Type */
  --fg:#F3F1EC;
  --fg-mid:rgba(243,241,236,.72);
  --fg-dim:rgba(243,241,236,.50);

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --wrap:1180px;
  --r:4px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* NOTE: overflow-x:hidden was removed here deliberately. On iOS it makes the
     body a scroll container, which detaches position:fixed elements from the
     viewport and lets page content paint over them. Nothing on this page
     overflows horizontally (measured), so the guard was not needed. */
  /* Cormorant defaults to oldstyle figures, so "1" reads as "I". Force lining. */
  font-variant-numeric:lining-nums;
  -moz-font-feature-settings:"lnum" 1;
  -webkit-font-feature-settings:"lnum" 1;
  font-feature-settings:"lnum" 1;
}

/* Film-grain overlay.
   z-index MUST stay below the nav (900). At 9999 this near-transparent,
   SVG-filtered fixed layer sat above everything including the status-bar
   strip, and iOS painted page content there instead of the top bar.
   Verified on-device: the bar's geometry was correct the whole time, this
   layer was simply on top of it. It only needs to be above page content. */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%;display:block;height:auto}
sup{font-size:.55em;vertical-align:super;line-height:0}

::selection{background:var(--gold);color:var(--ink)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.wrap{
  width:100%;max-width:var(--wrap);margin:0 auto;
  /* max() keeps the normal gutter on ordinary screens and only grows it
     when a rounded corner or camera cutout intrudes (landscape phones). */
  padding-left:max(28px, env(safe-area-inset-left, 0px));
  padding-right:max(28px, env(safe-area-inset-right, 0px));
}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal--delay{transition-delay:.13s}
.js .reveal--delay2{transition-delay:.26s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* =========================================================
   NAV
   ========================================================= */
/* iOS Safari sometimes pins a fixed bar BELOW the status bar while the page
   keeps scrolling underneath that strip, so page content shows through above
   the bar. Rather than fight where the browser puts top:0, the bar is pulled
   up by --nav-overscan and given matching extra padding. Its own background
   then covers that strip, and its contents land exactly where they did before.
   A child element cannot do this job: backdrop-filter creates a backdrop root
   that clips it. */
:root{--nav-overscan:140px}


.nav{
  position:fixed;left:0;right:0;z-index:900;
  top:calc(-1 * var(--nav-overscan));
  transition:background .45s var(--ease),backdrop-filter .45s var(--ease),
             border-color .45s var(--ease),padding .45s var(--ease);
  border-bottom:1px solid transparent;
  padding:14px 0;
  padding-top:calc(var(--nav-overscan) + 14px + env(safe-area-inset-top, 0px));
}
.nav.stuck{
  /* Frosted glass. This was briefly suspected of the iOS status-strip bug and
     removed; the real cause was the film-grain overlay's z-index (see above),
     so the blur is back. If that strip ever misbehaves again, this is still
     worth testing first: translucent fixed bars with backdrop-filter are the
     usual suspects on iOS. */
  background:rgba(8,11,19,.86);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
  padding:8px 0;
  padding-top:calc(var(--nav-overscan) + 8px + env(safe-area-inset-top, 0px));
}
.nav__inner{
  width:100%;max-width:var(--wrap);margin:0 auto;
  padding-left:max(28px, env(safe-area-inset-left, 0px));
  padding-right:max(28px, env(safe-area-inset-right, 0px));
  display:flex;align-items:center;gap:26px;
}
.nav__brand{
  flex:0 0 auto;display:flex;align-items:center;gap:15px;
  text-decoration:none;min-width:0;
}
.nav__brand picture{display:block;flex:0 0 auto}
/* Tall portrait mark, sized by height. Width follows the aspect ratio. */
.nav__logo{height:64px;width:auto;transition:height .45s var(--ease)}
.nav.stuck .nav__logo{height:52px}

/* Wordmark set as live text so it stays crisp at any size, which the
   baked-in lettering of the full lockup could not do at nav scale. */
.nav__brand-name{
  font-family:var(--serif);font-weight:600;
  font-size:21px;line-height:1.05;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-lt);white-space:nowrap;
  transition:font-size .45s var(--ease),color .3s var(--ease);
}
.nav__brand:hover .nav__brand-name{color:#F6EED6}
.nav.stuck .nav__brand-name{font-size:18px}

.nav__links{margin-left:auto;display:flex;gap:32px}
.nav__links a{
  color:var(--fg-mid);text-decoration:none;font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;position:relative;padding:6px 0;
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--gold);transition:width .4s var(--ease);
}
.nav__links a:hover{color:var(--gold-lt)}
.nav__links a:hover::after{width:100%}
.nav__cta{flex:0 0 auto}

@media (max-width:860px){
  .nav__links{display:none}
  .nav__cta{margin-left:auto}
  .nav__logo{height:54px}
  .nav.stuck .nav__logo{height:44px}
  .nav__brand-name{font-size:17px;letter-spacing:.12em}
  .nav.stuck .nav__brand-name{font-size:15px}
}

/* Narrow phones: the bar has to fit mark + wordmark + button. Let the wordmark
   shrink and wrap to two lines so the Register button is never pushed off. */
@media (max-width:620px){
  .nav__inner{
    gap:12px;
    padding-left:max(18px, env(safe-area-inset-left, 0px));
    padding-right:max(18px, env(safe-area-inset-right, 0px));
  }
  .nav__brand{flex:0 1 auto;gap:11px;min-width:0}
  .nav__brand-name{
    font-size:13px;letter-spacing:.09em;line-height:1.22;
    white-space:normal;
  }
  .nav.stuck .nav__brand-name{font-size:12.5px}
  /* .btn--sm is declared later in this file, so match its specificity to win. */
  .nav__cta.btn--sm{flex:0 0 auto;--pad:10px 16px;font-size:10px}
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  --pad:16px 34px;
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:var(--pad);border:1px solid transparent;border-radius:var(--r);
  font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),
             color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.995)}

.btn--sm{--pad:11px 22px;font-size:11px}
.btn--lg{--pad:20px 46px;font-size:13px}
.btn--block{width:100%;--pad:22px 34px}

/* Gold */
.btn--gold{background:var(--gold-grad);color:#1A1206;background-size:200% 200%;background-position:0% 50%;
  box-shadow:0 6px 26px -10px rgba(201,169,97,.6);}
.btn--gold:hover{background-position:100% 50%;transform:translateY(-2px);
  box-shadow:0 14px 40px -12px rgba(201,169,97,.75)}
/* sheen */
.btn--gold::before{
  content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent);
  transform:skewX(-20deg);transition:left .75s var(--ease);
}
.btn--gold:hover::before{left:160%}

/* Ghost */
.btn--ghost{background:transparent;color:var(--fg);border-color:rgba(201,169,97,.45)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-lt);
  background:rgba(201,169,97,.07);transform:translateY(-2px)}

.btn__arrow{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease);flex:0 0 auto}
.btn:hover .btn__arrow{transform:translateX(5px)}

/* Loading */
.btn__spinner{display:none;width:17px;height:17px;border:2px solid rgba(26,18,6,.25);
  border-top-color:#1A1206;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.is-loading{pointer-events:none;opacity:.85}
.btn.is-loading .btn__spinner{display:block}

/* =========================================================
   SHARED TYPE
   ========================================================= */
.eyebrow{
  display:flex;align-items:center;gap:16px;margin:0 0 22px;
  font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);
}
.eyebrow--center{justify-content:center;text-align:center}
.eyebrow__line{display:block;width:46px;height:1px;flex:0 0 auto;
  background:linear-gradient(90deg,transparent,var(--gold))}
.eyebrow--center .eyebrow__line:last-child{background:linear-gradient(90deg,var(--gold),transparent)}

.sec-head{text-align:center;margin-bottom:64px}
.sec-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.06;letter-spacing:-.012em;
  margin:0;color:var(--fg);
}
.sec-title--left{text-align:left;margin-bottom:26px}

.section{position:relative;padding:clamp(84px,11vw,140px) 0}
.section--dark{background:var(--ink-2)}
.section--dark::before,.section--dark::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.section--dark::before{top:0}
.section--dark::after{bottom:0}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:132px 0 0;overflow:hidden;
  /* the nav grew by the safe-area inset, so the hero has to clear it too */
  padding-top:calc(132px + env(safe-area-inset-top, 0px));
  background:var(--ink);
}

/* Full-bleed photograph */
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg picture{display:block;width:100%;height:100%}
.hero__bg-img{
  width:100%;height:100%;object-fit:cover;
  /* bias right so the podium and spotlight survive the crop */
  object-position:68% 42%;
}
/* Horizontal scrim carries the text side; vertical scrim seats the nav
   and blends the base into the countdown bar. */
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(8,11,19,.96) 0%,
      rgba(8,11,19,.90) 26%,
      rgba(8,11,19,.66) 46%,
      rgba(8,11,19,.28) 68%,
      rgba(8,11,19,.42) 100%),
    linear-gradient(180deg,
      rgba(8,11,19,.80) 0%,
      rgba(8,11,19,.22) 26%,
      rgba(8,11,19,.24) 58%,
      rgba(8,11,19,.94) 100%);
}

.hero__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px;
  display:flex;align-items:center;flex:1;
}
/* Text sits on a photograph, so carry a soft shadow for legibility wherever
   the crop lands on a lit area (the podium, mainly). */
.hero__copy{max-width:660px;text-shadow:0 1px 14px rgba(8,11,19,.78)}
/* The name is gradient-clipped, so a shadow would halo around the glyphs. */
.hero__name{text-shadow:none}

.hero__title{margin:0 0 26px}
.hero__an{
  display:block;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.4rem,2.9vw,2.15rem);color:var(--fg-mid);
  letter-spacing:.01em;margin-bottom:2px;
}
.hero__name{
  display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(3.5rem,9.2vw,7.1rem);line-height:.93;letter-spacing:-.028em;
  background:var(--gold-grad);background-size:180% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
  animation:shimmer 9s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:150% 50%}}
@media (prefers-reduced-motion:reduce){.hero__name{animation:none}}

.hero__creds{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin:0 0 30px;padding:0;
  font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-mid);
}
.hero__creds li{display:flex;align-items:center;gap:14px}
.hero__creds li:not(:last-child)::after{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.75;
}

.hero__when{
  border-left:2px solid;border-image:linear-gradient(180deg,var(--gold),transparent) 1;
  padding-left:22px;margin:0 0 36px;
}
.hero__date{
  font-family:var(--serif);font-size:clamp(1.5rem,3.1vw,2.15rem);font-weight:500;
  margin:0 0 4px;line-height:1.15;color:var(--fg);
}
.hero__venue{margin:0;color:var(--fg-mid);font-size:14.5px;letter-spacing:.03em}

.hero__actions{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:24px}
.hero__note{margin:0;font-size:13.5px;color:var(--fg-dim);max-width:430px;line-height:1.6}

/* Countdown */
.countdown{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,3.6vw,44px);
  padding:26px 28px 34px;margin-top:auto;
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.34));
}
.countdown__unit{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:58px}
.countdown__num{
  font-family:var(--serif);font-size:clamp(1.75rem,4vw,2.7rem);font-weight:500;
  line-height:1;color:var(--gold-lt);font-variant-numeric:tabular-nums;
}
.countdown__label{
  font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--fg-dim);font-weight:500;
}
.countdown__sep{width:1px;height:30px;background:linear-gradient(180deg,transparent,var(--line),transparent)}

@media (max-width:900px){
  .hero{
    min-height:92svh;padding:132px 0 0;text-align:left;
    padding-top:calc(132px + env(safe-area-inset-top, 0px));
  }
  .hero__copy{max-width:none;padding-bottom:40px}
  /* Fallback for short-but-narrow screens still served the WIDE photo:
     track close to the podium, which sits at ~84% across in that source. */
  .hero__bg-img{object-position:84% 40%}
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(8,11,19,.78) 0%,
      rgba(8,11,19,.44) 22%,
      rgba(8,11,19,.86) 48%,
      rgba(8,11,19,.96) 72%,
      rgba(8,11,19,.99) 100%);
  }
  .btn--lg{--pad:17px 30px;font-size:12px}
  .hero__actions .btn{flex:1 1 auto}
}
/* Tall screens are served the portrait crop instead (see the <picture> in
   index.html), which needs its own framing. Must sit AFTER the width-based
   rule above so it wins. The subject already sits right of centre in that
   file, so centring the crop lands him clear of the headline. Cover shows
   the full height here, so only the horizontal value matters. */
@media (max-aspect-ratio: 3/4){
  .hero__bg-img{object-position:50% center}
}

@media (max-width:600px){
  /* stack the credentials so a separator dot never dangles at a line break */
  .hero__creds{flex-direction:column;align-items:flex-start;gap:9px}
  .hero__creds li:not(:last-child)::after{display:none}
  .hero__creds li::before{
    content:"";flex:0 0 auto;width:4px;height:4px;border-radius:50%;
    background:var(--gold);opacity:.75;
  }
}
@media (max-width:420px){
  .countdown{gap:10px;padding:20px 14px 26px}
  .countdown__unit{min-width:46px}
}

/* =========================================================
   SCHEDULE
   ========================================================= */
.schedule{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:56px}
.card{
  position:relative;padding:42px 32px 38px;border:1px solid var(--line-soft);border-radius:var(--r);
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  overflow:hidden;transition:border-color .45s var(--ease),transform .45s var(--ease),background .45s var(--ease);
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0;transition:opacity .45s var(--ease);
}
.card:hover{border-color:rgba(201,169,97,.4);transform:translateY(-5px);
  background:linear-gradient(165deg,rgba(201,169,97,.075),rgba(255,255,255,.012))}
.card:hover::before{opacity:1}
.card__time{
  font-family:var(--serif);font-size:2.5rem;font-weight:500;line-height:1;
  margin:0 0 14px;color:var(--gold);
}
.card__time span{font-size:.95rem;letter-spacing:.1em;margin-left:3px;color:var(--fg-mid)}
.card__title{
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  margin:0 0 12px;color:var(--fg);
}
.card__text{margin:0;color:var(--fg-mid);font-size:14.5px;line-height:1.6}

.notes{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.note{
  display:flex;align-items:baseline;gap:12px;
  padding:15px 26px;border:1px solid var(--line-soft);border-radius:var(--r);
  background:rgba(255,255,255,.022);
}
.note__k{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.note__v{font-size:14.5px;color:var(--fg-mid)}

@media (max-width:820px){
  .schedule{grid-template-columns:1fr;gap:16px}
  .card{padding:30px 26px}
  .card__time{font-size:2.1rem}
  .note{width:100%;justify-content:space-between}
}

/* =========================================================
   SPEAKER
   ========================================================= */
.speaker{background:
  radial-gradient(760px 560px at 22% 40%,rgba(151,1,46,.15),transparent 66%),
  var(--ink);}
.speaker__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(38px,6vw,84px);align-items:center}
.speaker__frame{
  position:relative;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(170deg,rgba(201,169,97,.13),rgba(151,1,46,.10));
  padding:16px;
}
.speaker__frame::after{
  content:"";position:absolute;inset:9px;border:1px solid rgba(201,169,97,.24);
  border-radius:2px;pointer-events:none;
}
.speaker__img{width:100%;border-radius:2px;background:var(--ink-3)}
.speaker__frame.is-missing{display:none}
.speaker__lede{
  font-family:var(--serif);font-size:clamp(1.2rem,2.15vw,1.55rem);line-height:1.55;
  font-weight:300;color:var(--fg-mid);margin:0 0 30px;
}
.taglist{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0 0 36px}
.taglist li{
  padding:9px 18px;border:1px solid rgba(201,169,97,.34);border-radius:100px;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt);
}
@media (max-width:900px){
  .speaker__grid{grid-template-columns:1fr;gap:40px}
  .speaker__media{max-width:400px;margin:0 auto}
}

/* =========================================================
   VENUE
   ========================================================= */
.venue__body{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.venue__addr{
  font-style:normal;font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.8rem);
  line-height:1.5;color:var(--fg-mid);
}

/* =========================================================
   REGISTRATION PANEL (native <dialog>)
   Registration is no longer a page section. Every Register
   button opens this near-fullscreen panel instead.
   ========================================================= */
.modal{
  padding:0;border:0;background:transparent;color:var(--fg);
  width:min(94vw,900px);max-width:94vw;
  height:min(92svh,1000px);max-height:92svh;
  overflow:visible;
}
.modal::backdrop{
  background:rgba(4,6,12,.86);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.modal__shell{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  border:1px solid var(--line);border-radius:6px;
  background:
    radial-gradient(900px 520px at 50% 0%,rgba(201,169,97,.12),transparent 64%),
    linear-gradient(180deg,var(--ink-2),var(--ink));
  box-shadow:0 40px 110px -30px rgba(0,0,0,.9);
}

/* Header stays put while the body scrolls */
.modal__head{
  flex:0 0 auto;display:flex;align-items:flex-start;gap:20px;
  padding:26px clamp(22px,4vw,44px) 20px;
  border-bottom:1px solid var(--line-soft);
  background:rgba(8,11,19,.55);
}
.modal__heading{flex:1 1 auto;min-width:0}
.modal__eyebrow{
  margin:0 0 6px;font-size:10.5px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);
}
.modal__title{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.65rem,4vw,2.4rem);line-height:1.05;color:var(--fg);
}
.modal__close{
  flex:0 0 auto;display:grid;place-items:center;
  width:42px;height:42px;padding:0;cursor:pointer;
  background:rgba(255,255,255,.05);color:var(--fg-mid);
  border:1px solid var(--line-soft);border-radius:50%;
  transition:color .25s var(--ease),border-color .25s var(--ease),
             background .25s var(--ease),transform .25s var(--ease);
}
.modal__close svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round}
.modal__close:hover{color:var(--gold-lt);border-color:var(--gold);
  background:rgba(201,169,97,.12);transform:rotate(90deg)}

.modal__body{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:30px clamp(22px,4vw,44px) 40px;
}
.modal__sub{margin:0 0 34px;color:var(--fg-mid);font-size:16px;max-width:56ch}

/* Full-bleed on phones */
@media (max-width:640px){
  .modal{
    width:100vw;max-width:100vw;height:100svh;max-height:100svh;
    margin:0;border-radius:0;
  }
  .modal__shell{border:0;border-radius:0}
  /* The panel covers the whole screen here, so it owns the safe areas:
     the header clears the Dynamic Island, the body clears the home bar. */
  .modal__head{
    padding:20px 18px 16px;
    padding-top:calc(20px + env(safe-area-inset-top, 0px));
    padding-left:max(18px, env(safe-area-inset-left, 0px));
    padding-right:max(18px, env(safe-area-inset-right, 0px));
  }
  .modal__close{width:38px;height:38px}
  .modal__body{
    padding:24px 18px 36px;
    padding-bottom:calc(36px + env(safe-area-inset-bottom, 0px));
    padding-left:max(18px, env(safe-area-inset-left, 0px));
    padding-right:max(18px, env(safe-area-inset-right, 0px));
  }
  .modal__sub{margin-bottom:26px;font-size:15.5px}
}

/* Open / close motion */
@media (prefers-reduced-motion:no-preference){
  .modal[open]{animation:modalIn .34s var(--ease)}
  .modal[open]::backdrop{animation:fadeIn .34s var(--ease)}
  .modal.is-closing{animation:modalOut .22s ease-in forwards}
  .modal.is-closing::backdrop{animation:fadeOut .22s ease-in forwards}
}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes modalOut{to{opacity:0;transform:translateY(10px) scale(.99)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{to{opacity:0}}

/* Page must not scroll behind an open panel */
body.modal-open{overflow:hidden}

.form{margin-top:8px}
.fs{border:0;padding:0;margin:0 0 52px;min-width:0}
.fs__legend{
  display:flex;align-items:center;gap:14px;width:100%;
  font-family:var(--serif);font-size:clamp(1.45rem,3vw,1.95rem);font-weight:500;
  color:var(--fg);margin-bottom:26px;padding:0 0 16px;
  border-bottom:1px solid var(--line-soft);
}
.fs__num{
  flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;
  border:1px solid var(--gold);border-radius:50%;
  font-family:var(--sans);font-size:12px;font-weight:600;color:var(--gold);
}
.fs--guest2{animation:slideIn .55s var(--ease)}
@keyframes slideIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fs--guest2{animation:none}}

/* Steps 2 onward are gated behind the ticket choice */
.form__rest{animation:slideIn .5s var(--ease)}
@media (prefers-reduced-motion:reduce){.form__rest{animation:none}}

/* ---- Ticket cards ---- */
.tickets{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ticket{position:relative;cursor:pointer;display:block}
.ticket input{position:absolute;opacity:0;width:1px;height:1px}
.ticket__box{
  position:relative;display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:38px 20px 32px;text-align:center;
  border:1px solid var(--line-soft);border-radius:var(--r);
  background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  transition:border-color .35s var(--ease),background .35s var(--ease),
             transform .35s var(--ease),box-shadow .35s var(--ease);
}
.ticket:hover .ticket__box{border-color:rgba(201,169,97,.45);transform:translateY(-3px)}
.ticket input:focus-visible + .ticket__box{outline:2px solid var(--gold);outline-offset:3px}
.ticket input:checked + .ticket__box{
  border-color:var(--gold);
  background:linear-gradient(165deg,rgba(201,169,97,.16),rgba(201,169,97,.04));
  box-shadow:0 12px 40px -18px rgba(201,169,97,.75);
}
.ticket__num{
  font-family:var(--serif);font-size:3.6rem;font-weight:600;line-height:1;
  color:var(--gold);transition:color .35s var(--ease);
}
.ticket__label{
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fg);margin-top:6px;
}
.ticket__desc{font-size:13.5px;color:var(--fg-dim);margin-top:6px}
.ticket__price{
  margin-top:14px;padding:5px 15px;border:1px solid rgba(201,169,97,.36);border-radius:100px;
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt);
}
.ticket__check{
  position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:var(--gold);
  opacity:0;transform:scale(.5);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.ticket__check svg{width:14px;height:14px;fill:none;stroke:#1A1206;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.ticket input:checked + .ticket__box .ticket__check{opacity:1;transform:scale(1)}

@media (max-width:560px){
  .tickets{grid-template-columns:1fr;gap:14px}
  .ticket__box{flex-direction:row;justify-content:flex-start;gap:18px;padding:22px 22px;text-align:left}
  .ticket__num{font-size:2.5rem}
  .ticket__label{margin-top:0}
  .ticket__desc{display:none}
  .ticket__price{margin-top:0;margin-left:auto}
  .ticket__check{top:50%;right:16px;transform:translateY(-50%) scale(.5)}
  .ticket input:checked + .ticket__box .ticket__check{transform:translateY(-50%) scale(1)}
  .ticket__price{margin-right:34px}
}

/* ---- Fields ---- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;min-width:0}
.field--full{grid-column:1/-1}
.field--split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field--split > div{display:flex;flex-direction:column;min-width:0}

.field label,.field--split label{
  font-size:10.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--fg-dim);margin-bottom:9px;
}
.field input,.field select,.field--split input,.field--split select{
  width:100%;padding:15px 16px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line-soft);border-radius:var(--r);
  color:var(--fg);font-family:var(--sans);font-size:15.5px;font-weight:300;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.field select,.field--split select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A961' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px;
  padding-right:40px;cursor:pointer;
}
.field select option{background:var(--ink-3);color:var(--fg)}
.field input::placeholder{color:rgba(243,241,236,.25)}
.field input:hover,.field select:hover{border-color:rgba(201,169,97,.3)}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--gold);background:rgba(201,169,97,.07);
  box-shadow:0 0 0 3px rgba(201,169,97,.13);
}
.field input.invalid,.field select.invalid{border-color:var(--crimson-lt);background:rgba(196,18,63,.08)}

.err{margin:7px 0 0;font-size:12.5px;color:#F08098;min-height:0;line-height:1.4}
.err:empty{display:none}

/* ---- Question text ---- */
.q{
  font-family:var(--serif);font-size:clamp(1.12rem,2.1vw,1.35rem);font-weight:400;
  color:var(--fg);margin:0 0 18px;line-height:1.45;
}
.q--spaced{margin-top:36px}

/* ---- Checkbox line ---- */
.checkline{display:inline-flex;align-items:center;gap:12px;cursor:pointer;margin-bottom:22px;
  font-size:14.5px;color:var(--fg-mid)}
.checkline input{position:absolute;opacity:0;width:1px;height:1px}
.checkline__box{
  flex:0 0 auto;display:grid;place-items:center;width:21px;height:21px;
  border:1px solid rgba(201,169,97,.45);border-radius:3px;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.checkline__box svg{width:13px;height:13px;fill:none;stroke:#1A1206;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s var(--ease)}
.checkline input:checked + .checkline__box{background:var(--gold);border-color:var(--gold)}
.checkline input:checked + .checkline__box svg{opacity:1}
.checkline input:focus-visible + .checkline__box{outline:2px solid var(--gold);outline-offset:3px}
.checkline:hover .checkline__box{border-color:var(--gold)}

/* ---- Yes / No choices ---- */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.choice{cursor:pointer;display:block}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice__box{
  display:flex;align-items:center;gap:14px;padding:19px 22px;
  border:1px solid var(--line-soft);border-radius:var(--r);
  background:rgba(255,255,255,.028);color:var(--fg-mid);font-size:15px;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.choice:hover .choice__box{border-color:rgba(201,169,97,.42);color:var(--fg)}
.choice__dot{
  flex:0 0 auto;width:19px;height:19px;border-radius:50%;
  border:1px solid rgba(201,169,97,.5);position:relative;
  transition:border-color .25s var(--ease);
}
.choice__dot::after{
  content:"";position:absolute;inset:4px;border-radius:50%;background:var(--gold);
  opacity:0;transform:scale(.4);transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.choice input:checked + .choice__box{
  border-color:var(--gold);background:rgba(201,169,97,.12);color:var(--fg);
}
.choice input:checked + .choice__box .choice__dot{border-color:var(--gold)}
.choice input:checked + .choice__box .choice__dot::after{opacity:1;transform:scale(1)}
.choice input:focus-visible + .choice__box{outline:2px solid var(--gold);outline-offset:3px}

@media (max-width:560px){
  .grid{grid-template-columns:1fr;gap:16px}
  .choices{grid-template-columns:1fr;gap:12px}
}

/* ---- Honeypot ---- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Submit ---- */
.form__foot{margin-top:44px}
.form__status{
  margin:0 0 16px;padding:0;font-size:14.5px;color:#F08098;text-align:center;line-height:1.55;
}
.form__status:empty{display:none}
.form__status.ok{color:var(--gold-lt)}
.form__fine{margin:18px 0 0;text-align:center;font-size:12.5px;color:var(--fg-dim);line-height:1.6}

/* =========================================================
   SUCCESS
   ========================================================= */
.success{
  text-align:center;padding:clamp(44px,7vw,72px) clamp(24px,5vw,54px);
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(170deg,rgba(201,169,97,.11),rgba(255,255,255,.015));
  animation:slideIn .6s var(--ease);
}
.success__mark{width:78px;height:78px;margin:0 auto 26px}
.success__mark svg{width:100%;height:100%;fill:none;stroke:var(--gold);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.success__mark circle{stroke-dasharray:151;stroke-dashoffset:151;animation:draw .9s var(--ease) forwards}
.success__mark path{stroke-dasharray:36;stroke-dashoffset:36;animation:draw .5s var(--ease) .55s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .success,.success__mark circle,.success__mark path{animation:none;stroke-dashoffset:0}
}
.success__title{
  font-family:var(--serif);font-size:clamp(2rem,4.6vw,3.1rem);font-weight:400;
  margin:0 0 14px;color:var(--gold-lt);line-height:1.1;
}
.success__text{margin:0 auto 34px;max-width:520px;color:var(--fg-mid);font-size:16px}
.success__details{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;text-align:left;
  margin:0 0 36px;padding:30px 0;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.success__details dt{
  font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px;
}
.success__details dd{margin:0;color:var(--fg-mid);font-size:14.5px;line-height:1.55}
/* Clickable map thumbnail, opens Google Maps in a new tab */
.success__map{
  position:relative;display:block;width:100%;max-width:430px;
  margin:0 auto 30px;border-radius:5px;overflow:hidden;
  border:1px solid var(--line);background:var(--ink-3);
  transition:border-color .35s var(--ease),transform .35s var(--ease),
             box-shadow .35s var(--ease);
}
.success__map img{width:100%;height:auto;display:block}
.success__map:hover{
  border-color:var(--gold);transform:translateY(-3px);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.85);
}
.success__map-cta{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 16px;
  background:linear-gradient(180deg,rgba(8,11,19,0),rgba(8,11,19,.92) 42%);
  color:var(--gold-lt);
  font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
}
.success__map-cta svg{
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s var(--ease);
}
.success__map:hover .success__map-cta svg{transform:translateX(4px)}

.success__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
@media (max-width:560px){
  .success__details{grid-template-columns:1fr;gap:18px}
  .success__actions .btn{width:100%}
}

/* ---------- Site map + parking ---------- */
.venue__map{
  display:grid;grid-template-columns:1.35fr 1fr;
  gap:clamp(26px,4vw,50px);align-items:center;
  margin-top:clamp(46px,6vw,72px);
}

.mapfig{margin:0;min-width:0}
.mapfig__link{
  display:block;position:relative;border-radius:5px;overflow:hidden;
  border:1px solid var(--line);background:#fff;
  transition:border-color .35s var(--ease),transform .35s var(--ease),
             box-shadow .35s var(--ease);
}
.mapfig__link:hover{
  border-color:var(--gold);transform:translateY(-3px);
  box-shadow:0 20px 50px -22px rgba(0,0,0,.85);
}
.mapfig picture{display:block}
.mapfig__link img{width:100%;height:auto;display:block}
/* Top-right: the bottom-right of the map carries the route arrows and scale bar. */
.mapfig__zoom{
  position:absolute;right:12px;top:12px;
  padding:7px 14px;border-radius:100px;
  background:rgba(8,11,19,.86);color:var(--gold-lt);
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  pointer-events:none;
}
.mapfig__link:hover .mapfig__zoom,
.mapfig__link:focus-visible .mapfig__zoom{opacity:1;transform:none}
.mapfig__cap{
  margin:14px 0 0;text-align:left;
  font-size:14px;color:var(--fg-dim);line-height:1.6;
}
.mapfig__cap strong{color:var(--gold-lt);font-weight:600}

.parking{text-align:left;min-width:0}
.parking__title{
  margin:0 0 16px;font-size:11px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);
}
.parking__rate{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:11px;
  margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid var(--line-soft);
}
.parking__price{
  font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.1rem);font-weight:600;
  line-height:1;color:var(--gold-lt);
}
.parking__note{font-size:14px;color:var(--fg-dim);letter-spacing:.02em}
.parking__note s{opacity:.75}
.parking p{margin:0 0 12px;color:var(--fg-mid);font-size:15.5px;line-height:1.7}
.parking p:last-child{margin-bottom:0}

@media (max-width:900px){
  .venue__map{grid-template-columns:1fr;gap:30px}
  .mapfig__cap{text-align:center}
  .parking{text-align:center}
  .parking__rate{justify-content:center}
  /* touch devices never hover, so keep the hint visible */
  .mapfig__zoom{opacity:1;transform:none}
}

/* =========================================================
   SITE NOTICE  (registrations full / event ended)
   ---------------------------------------------------------
   Driven by data-site-mode on <html>, which site-mode.php sets from a
   blocking script in <head>. Because that runs before first paint, the
   registration buttons are never briefly visible when the site is closed.
   ========================================================= */
.notice{display:none}

[data-site-mode="full"] .notice,
[data-site-mode="ended"] .notice{
  display:flex;align-items:center;justify-content:center;
  position:fixed;inset:0;z-index:9000;
  padding:clamp(24px,6vw,60px);
  padding-top:calc(clamp(24px,6vw,60px) + env(safe-area-inset-top, 0px));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:
    radial-gradient(900px 620px at 50% 0%,rgba(201,169,97,.10),transparent 62%),
    var(--ink);
}

/* Only the panel matching the current mode is shown. */
[data-site-mode="full"]  .notice__body--ended,
[data-site-mode="ended"] .notice__body--full{display:none}

/* Belt and braces: hide every registration trigger too, so a failure to
   paint the overlay still cannot leave a working button behind it. */
[data-site-mode="full"] [data-open-register],
[data-site-mode="ended"] [data-open-register]{display:none !important}

.notice__panel{width:100%;max-width:620px;margin:auto;text-align:center}
.notice__mark{height:74px;width:auto;margin:0 auto 30px}
.notice__eyebrow{
  display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 18px;
  font-size:10.5px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);
}
.notice__eyebrow::before,.notice__eyebrow::after{
  content:"";width:34px;height:1px;background:var(--gold);opacity:.55;
}
.notice__title{
  margin:0 0 20px;font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,6vw,3.4rem);line-height:1.08;
  background:var(--gold-grad);background-size:180% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
}
.notice__text{margin:0 auto 30px;max-width:46ch;color:var(--fg-mid);
  font-size:16.5px;line-height:1.75}
.notice__details{
  margin:0 0 30px;padding:22px 0;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  color:var(--fg-dim);font-size:14.5px;line-height:1.8;
}
.notice__details strong{color:var(--fg);font-weight:600}

@media (max-width:560px){
  .notice__mark{height:60px;margin-bottom:24px}
  .notice__text{font-size:15.5px}
}

/* =========================================================
   LOCK SCREEN  (pre-launch "password protected" mode)
   ---------------------------------------------------------
   Deliberately bare: no wording, no branding cues, nothing that hints at
   what the site is. Just a field. Password is checked by unlock.php on
   the server, so it never appears in the page or in any script.
   ========================================================= */
.lockscreen{display:none}

[data-site-mode="locked"] .lockscreen{
  display:flex;align-items:center;justify-content:center;
  position:fixed;inset:0;z-index:9500;
  padding:24px;background:var(--ink);
}

/* When locked, nothing else on the page may show, including the
   full/ended notice and every registration trigger. */
[data-site-mode="locked"] .notice,
[data-site-mode="locked"] .nav,
[data-site-mode="locked"] main,
[data-site-mode="locked"] .footer,
[data-site-mode="locked"] [data-open-register]{display:none !important}

.lockscreen__form{width:100%;max-width:320px;text-align:center}
.lockscreen__input{
  width:100%;padding:16px 18px;text-align:center;
  background:rgba(255,255,255,.04);color:var(--fg);
  border:1px solid var(--line-soft);border-radius:var(--r);
  font-family:var(--sans);font-size:16px;font-weight:300;
  letter-spacing:.08em;
  transition:border-color .3s var(--ease),background .3s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.lockscreen__input::placeholder{color:rgba(243,241,236,.28);letter-spacing:.14em}
.lockscreen__input:hover{border-color:rgba(201,169,97,.32)}
.lockscreen__input:focus{
  outline:none;border-color:var(--gold);background:rgba(201,169,97,.07);
  box-shadow:0 0 0 3px rgba(201,169,97,.13);
}
.lockscreen__error{
  margin:14px 0 0;min-height:1em;
  font-size:13px;color:#F08098;letter-spacing:.02em;
}
.lockscreen__error:empty{visibility:hidden}

/* <picture> defaults to display:inline, which gives it no width. Any img
   inside set to width:100% then resolves against zero and the whole thing
   collapses, which also stops loading="lazy" from ever firing because the
   element never enters the viewport. Every picture wrapper on the site is
   made a block here so that cannot happen again. (picture collapse) */
.notice__panel picture,
.hero__bg picture,
.speaker__frame picture,
.success__map picture{display:block}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  padding:70px 0 54px;
  /* clear the iPhone home indicator */
  padding-bottom:calc(54px + env(safe-area-inset-bottom, 0px));
  background:var(--ink-2);
  border-top:1px solid var(--line);text-align:center;
}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:16px}
.footer__logo-link{display:inline-block;line-height:0;border-radius:4px;
  transition:opacity .3s var(--ease)}
.footer__logo-link:hover{opacity:.78}
.footer__logo{height:74px;width:auto;opacity:.95}
.footer__meta{margin:10px 0 0;font-size:13.5px;color:var(--fg-mid);line-height:1.8}
.footer__copy{margin:14px 0 0;font-size:11.5px;color:var(--fg-dim);letter-spacing:.08em}
@media (max-width:560px){.footer__logo{height:56px}}