/* JVPNG site — shared design system. Light (cream/green/gold) + Dark (black/silver/gold/green). */
:root{
  --bg:#f4efe1; --bg2:#faf7ee; --panel:#fbf8f0;
  --ink:#15301c; --ink-soft:#42584a;
  --green:#0e3b1f; --green-2:#16572c;
  --gold:#b88a2a; --gold-bri:#d8b24c; --gold-deep:#8a6418;
  --line:rgba(184,138,42,.40);
  --wordmark:linear-gradient(180deg,#1c6234 0%,#0c3a1d 60%,#0a2f18 100%);
  --hero:radial-gradient(1100px 520px at 50% -8%,#fbf8ee 0,#efe7d3 70%);
  --band:#0e3b1f; --band-ink:#f4efe1; --shadow:rgba(20,40,25,.14);
  --stars:#d8b24c; --menu:#fbf8f0;
}
body.dark{
  --bg:#070707; --bg2:#0c130d; --panel:#0e160f;
  --ink:#ece6d4; --ink-soft:#a9a48f;
  --green:#1d6431; --green-2:#268a44;
  --gold:#d4af37; --gold-bri:#ecc960; --gold-deep:#9c7b22;
  --line:rgba(212,175,55,.42);
  --wordmark:linear-gradient(180deg,#ffffff 0%,#cfcfcf 48%,#9a9a9a 52%,#efefef 100%);
  --hero:radial-gradient(1100px 560px at 50% -6%,#10180f 0,#050505 72%);
  --band:#0a1e10; --band-ink:#ece6d4; --shadow:rgba(0,0,0,.55);
  --stars:#d4af37; --menu:#0e160f;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:18px/1.65 'Cormorant Garamond',Georgia,serif;transition:background .35s,color .35s}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
.script{font-family:'Great Vibes',cursive;font-weight:400}
.cinzel{font-family:'Cinzel',serif}
.gold{color:var(--gold)}
.divider{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold);margin:14px 0}
.divider::before,.divider::after{content:"";height:1px;width:90px;background:linear-gradient(90deg,transparent,var(--gold))}
.divider::after{background:linear-gradient(90deg,var(--gold),transparent)}
.diamond{font-size:13px;letter-spacing:.3em}

/* toggle (cyberfix-style segmented) */
.toggle{position:fixed;top:92px;right:24px;z-index:90;display:flex;background:var(--panel);border:1px solid var(--gold);border-radius:999px;padding:3px;box-shadow:0 4px 16px var(--shadow)}
.toggle .seg{font:600 11px/1 'Cinzel',serif;letter-spacing:.14em;text-transform:uppercase;padding:9px 18px;border:none;background:transparent;color:var(--gold);cursor:pointer;border-radius:999px;transition:.2s}
.toggle .seg.on{background:linear-gradient(180deg,var(--gold-bri),var(--gold-deep));color:#1a1205}

/* nav */
header.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;height:78px;gap:26px}
.logo{display:flex;align-items:center;gap:12px}
.oval{width:74px;height:44px;border-radius:50%;border:2.5px solid var(--green);background:var(--bg2);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1.5px var(--gold)}
.oval span{font-family:'Cinzel',serif;font-weight:800;font-size:17px;letter-spacing:.04em;color:var(--green)}
body.dark .oval span{color:var(--gold)}
.nav nav{margin-left:auto;display:flex;gap:26px;align-items:center;font-family:'Cinzel',serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.nav nav a{color:var(--ink-soft);transition:color .2s}
.nav nav a:hover,.nav nav a.on{color:var(--gold)}
/* dropdown */
.dd{position:relative}
.dd>button{font:inherit;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:6px}
.dd>button:hover,.dd.open>button{color:var(--gold)}
.dd .caret{font-size:9px;transition:transform .2s}
.dd.open .caret{transform:rotate(180deg)}
.dd .menu{position:absolute;top:140%;right:0;min-width:230px;background:var(--menu);border:1px solid var(--gold);border-radius:10px;padding:8px;box-shadow:0 12px 34px var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s}
.dd.open .menu{opacity:1;visibility:visible;transform:translateY(0)}
.dd .menu a{display:block;padding:11px 14px;border-radius:7px;color:var(--ink);font-size:13px;letter-spacing:.06em}
.dd .menu a small{display:block;font-family:'Cormorant Garamond',serif;letter-spacing:0;text-transform:none;font-size:14px;color:var(--ink-soft);margin-top:2px}
.dd .menu a:hover{background:var(--bg2);color:var(--gold)}
.btn{font-family:'Cinzel',serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:13px 26px;border-radius:6px;display:inline-block;border:1.5px solid var(--gold);transition:.2s;cursor:pointer;text-align:center}
.btn-solid{background:linear-gradient(180deg,var(--gold-bri),var(--gold-deep));color:#1a1205;border-color:var(--gold-deep);box-shadow:0 4px 14px var(--shadow)}
.btn-solid:hover{filter:brightness(1.08)}
.btn-ghost{color:var(--gold)}
.btn-ghost:hover{background:var(--gold);color:#1a1205}
.nav .btn{padding:11px 20px}

/* emblem */
.emblem{width:150px;height:170px;margin:0 auto 22px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
.emblem .shield{position:absolute;inset:0;background:linear-gradient(160deg,var(--green-2),var(--green));border:3px solid var(--gold);border-radius:14px 14px 50% 50%/14px 14px 30% 30%;box-shadow:0 8px 26px var(--shadow)}
.emblem .xv{position:relative;font-family:'Cinzel',serif;font-weight:900;font-size:52px;color:var(--gold-bri);line-height:.9;text-shadow:0 2px 4px rgba(0,0,0,.4)}
.emblem .yrs{position:relative;font-family:'Cinzel',serif;font-weight:700;font-size:14px;letter-spacing:.22em;color:#fff;margin-top:2px}
.emblem .est{position:relative;font-family:'Cinzel',serif;font-size:10px;letter-spacing:.16em;color:var(--gold-bri);margin-top:4px}
.emblem .st{position:relative;color:var(--stars);font-size:10px;letter-spacing:.18em;margin-top:3px}

/* home hero */
.hero{background:var(--hero);text-align:center;padding:60px 0 74px;border-bottom:1px solid var(--line)}
.kicker{font-family:'Great Vibes',cursive;font-size:34px;color:var(--gold);line-height:1;margin-bottom:6px}
.wordmark{font-family:'Cinzel',serif;font-weight:900;font-size:78px;line-height:.96;letter-spacing:.02em;background:var(--wordmark);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 1px rgba(0,0,0,.25));margin:2px 0 6px}
body.dark .wordmark{filter:drop-shadow(0 1px 0 var(--gold-deep)) drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.subname{font-family:'Cinzel',serif;font-weight:600;font-size:21px;letter-spacing:.34em;color:var(--green);text-transform:uppercase}
body.dark .subname{color:var(--gold)}
.subname-2{font-family:'Cinzel',serif;font-size:12.5px;letter-spacing:.42em;color:var(--ink-soft);text-transform:uppercase;margin-top:6px}
.tagline{font-family:'Great Vibes',cursive;font-size:30px;color:var(--ink);margin:18px 0 4px}
.faith{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.24em;color:var(--gold);text-transform:uppercase}
.hero-cta{margin-top:28px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* page hero (sub-pages) */
.phero{background:var(--hero);text-align:center;padding:54px 0 40px;border-bottom:1px solid var(--line)}
.phero .eyebrow{margin-bottom:4px}
.phero h1{font-family:'Cinzel',serif;font-weight:700;font-size:46px;color:var(--ink)}
body.dark .phero h1{background:var(--wordmark);-webkit-background-clip:text;background-clip:text;color:transparent}
.phero p{max-width:680px;margin:8px auto 0;color:var(--ink-soft);font-size:19px}

/* sections */
section{padding:66px 0}
.eyebrow{font-family:'Cinzel',serif;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);text-align:center}
h2.title{font-family:'Cinzel',serif;font-weight:700;font-size:38px;color:var(--ink);text-align:center;margin:8px 0 6px}
.lead{max-width:780px;margin:0 auto;text-align:center;font-size:20px;color:var(--ink-soft)}
.prose{max-width:780px;margin:0 auto;font-size:19px;color:var(--ink-soft)}
.prose p{margin-bottom:16px}
.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.mc{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;margin-top:40px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:30px 32px;box-shadow:0 6px 22px var(--shadow)}
.card h3{font-family:'Cinzel',serif;font-size:16px;letter-spacing:.06em;color:var(--green);margin-bottom:12px;text-transform:uppercase}
body.dark .card h3{color:var(--gold)}
.card p{color:var(--ink-soft)}
.framebox{border:1px solid var(--gold);border-radius:14px;padding:8px}
.framebox .inner{border:1px solid var(--line);border-radius:9px;background:linear-gradient(160deg,var(--green),var(--green-2));color:#f4efe1;padding:44px 34px;text-align:center}
.framebox .big{font-family:'Cinzel',serif;font-weight:800;font-size:54px;color:var(--gold-bri);line-height:1}
.framebox .small{font-family:'Cinzel',serif;letter-spacing:.18em;font-size:13px;text-transform:uppercase;margin-top:8px;color:#f4efe1}
.framebox em{display:block;font-style:italic;font-size:19px;margin-top:18px;color:#efe6cf}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.pillar{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:12px;padding:34px 28px;text-align:center;box-shadow:0 6px 22px var(--shadow);transition:transform .2s}
.pillar:hover{transform:translateY(-5px)}
.pillar .ico{font-size:30px;color:var(--gold);margin-bottom:10px}
.pillar h3{font-family:'Cinzel',serif;font-size:19px;letter-spacing:.05em;color:var(--ink);margin-bottom:8px}
.pillar p{font-size:16.5px;color:var(--ink-soft)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.gallery figure{position:relative;aspect-ratio:1;overflow:hidden;border-radius:12px;border:1px solid var(--line);cursor:pointer;box-shadow:0 5px 16px var(--shadow)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .4s,filter .3s;filter:saturate(.96)}
.gallery figure:hover img{transform:scale(1.07)}
.gallery figure::after{content:"";position:absolute;inset:0;border:2px solid transparent;border-radius:12px;transition:.25s}
.gallery figure:hover::after{border-color:var(--gold)}
.lightbox{position:fixed;inset:0;background:rgba(5,8,6,.92);z-index:120;display:none;align-items:center;justify-content:center;padding:32px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;border:2px solid var(--gold);box-shadow:0 12px 50px rgba(0,0,0,.6)}
.lightbox .x{position:absolute;top:22px;right:30px;color:var(--gold);font-size:34px;font-family:'Cinzel',serif;cursor:pointer;line-height:1}
.lightbox .nav-a{position:absolute;top:50%;transform:translateY(-50%);color:var(--gold);font-size:40px;cursor:pointer;padding:18px;user-select:none}
.lightbox .prev{left:14px}.lightbox .next{right:14px}

/* contact */
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;margin-top:40px}
.field{margin-bottom:16px}
.field label{display:block;font-family:'Cinzel',serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.field input,.field textarea{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:13px 14px;font:16px 'Cormorant Garamond',serif;color:var(--ink)}
.field textarea{min-height:130px;resize:vertical}
.infoline{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.infoline .ic{color:var(--gold);font-size:20px;margin-top:2px}
.infoline b{font-family:'Cinzel',serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);display:block;margin-bottom:2px}
.infoline span{color:var(--ink-soft)}

/* join band + footer */
.join{background:var(--band);color:var(--band-ink);text-align:center;border-top:2px solid var(--gold)}
.join h2{font-family:'Cinzel',serif;font-weight:700;font-size:38px;color:#fff}
.join .script{font-size:30px;color:var(--gold-bri);margin-bottom:6px;display:block}
.join p{color:#e8e2cf;max-width:620px;margin:10px auto 26px}
footer.site{background:var(--bg2);border-top:1px solid var(--line);padding:46px 0 30px;text-align:center}
.f-marks{font-family:'Cinzel',serif;font-size:18px;letter-spacing:.06em;color:var(--ink);display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}
.f-marks .sep{color:var(--gold)}
.f-nav{margin-top:16px;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;font-family:'Cinzel',serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.f-nav a{color:var(--ink-soft)}.f-nav a:hover{color:var(--gold)}
.f-faith{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.24em;color:var(--gold);text-transform:uppercase;margin-top:16px}
.f-copy{font-size:14px;color:var(--ink-soft);margin-top:12px}

@media(max-width:880px){
  .nav nav{display:none}.wordmark{font-size:52px}.mc,.pillars,.split{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}h2.title,.join h2,.phero h1{font-size:30px}
  .subname{font-size:16px;letter-spacing:.2em}.toggle{top:auto;bottom:16px;right:16px}
}

/* === hero watermark — JVPNG oval ("rugby ball") feathered behind the hero, light theme === */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero::before{
  content:"";position:absolute;inset:0;
  background:url(/assets/jvpng-moon-astronauts.webp) center 38%/cover no-repeat;
  opacity:.32;pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(ellipse 84% 90% at 50% 42%,#000 50%,transparent 100%);
          mask-image:radial-gradient(ellipse 84% 90% at 50% 42%,#000 50%,transparent 100%);
}
body.dark .hero::before{opacity:.42}
@media(max-width:880px){ .hero::before{background-position:center 32%} }

/* real XV crest as the hero emblem + the master-connector mark (replaces the CSS-drawn XV) */
.emblem-img{display:block;width:160px;height:auto;margin:0 auto 20px;filter:drop-shadow(0 8px 22px var(--shadow))}
.fb-crest{display:block;width:132px;height:auto;margin:0 auto 8px;filter:drop-shadow(0 6px 16px var(--shadow))}
@media(max-width:880px){.emblem-img{width:128px}}

/* === check-in form: success state + polish === */
.checkin-ok{display:none;text-align:center;padding:28px 20px}
.checkin-ok.show{display:block;animation:ciIn .5s ease}
@keyframes ciIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.checkin-ok .seal{width:64px;height:64px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--gold-bri),var(--gold-deep));color:#1a1205;font-size:32px;box-shadow:0 6px 18px var(--shadow)}
.checkin-ok h3{font-family:'Cinzel',serif;color:var(--gold);font-size:21px;letter-spacing:.05em;margin-bottom:8px;text-transform:none}
.checkin-ok p{color:var(--ink-soft);max-width:360px;margin:0 auto}
.field .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:14px;color:var(--ink-soft);margin-top:12px;text-align:center}
.btn[disabled]{opacity:.6;cursor:default}