/* Cobble Stones WSMBA — site styles
   Palette: navy #1e3e62 · deep navy #132A45 · gold #DBA928 · light gold #F3D06E · cream #F2EBDD */

/* ---------- Fonts (self-hosted, latin subsets only) ---------- */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/cinzel-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/cinzel-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Raleway';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/raleway-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Raleway';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/raleway-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:#1e3e62;color:#F2EBDD;font-family:'Raleway',system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;}
.serif{font-family:'Cinzel',Georgia,serif;}
[hidden]{display:none !important;}
section,footer{scroll-margin-top:80px;}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(22,48,77,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(219,169,40,.22);padding:0 48px;display:flex;align-items:center;justify-content:space-between;height:70px;}
.brand{text-decoration:none;font-family:'Cinzel',Georgia,serif;color:#DBA928;font-size:16px;font-weight:700;line-height:1.2;letter-spacing:.5px;}
.brand span{display:block;color:#CBBE9E;font-size:10px;font-family:'Raleway',sans-serif;font-weight:400;letter-spacing:2.6px;text-transform:uppercase;margin-top:2px;}
.menubtn{display:none;width:46px;height:46px;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:transparent;border:1px solid rgba(219,169,40,.34);border-radius:3px;cursor:pointer;flex:none;}
.menubtn span{display:block;width:20px;height:2px;background:#DBA928;transition:transform .25s,opacity .2s;}
.menubtn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menubtn[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menubtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.navlist{display:flex;gap:20px;list-style:none;align-items:center;}
.navlink{position:relative;display:inline-block;color:#E4DAC4;text-decoration:none;font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:500;transition:color .2s,transform .25s cubic-bezier(.2,.7,.3,1);white-space:nowrap;}
.navlink::after{content:'';position:absolute;left:0;bottom:-7px;height:2px;width:0;background:#DBA928;transition:width .3s cubic-bezier(.2,.7,.3,1);}
.navlink:hover{color:#DBA928;transform:translateY(-2px);}
.navlink:hover::after{width:100%;}
.navlink.current,.navlink.contactlink{color:#DBA928;}
.navlink.contactlink{font-weight:700;}
.navlink.contactlink:hover{color:#F3D06E;}
.mobonly{display:none;}
.navcta{border:1px solid #DBA928;color:#DBA928;padding:10px 22px;border-radius:2px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;text-decoration:none;transition:background .2s,color .2s,box-shadow .2s;white-space:nowrap;}
.navcta:hover{background:#2b5279;color:#F3D06E;box-shadow:0 6px 18px rgba(219,169,40,.25);}

/* ---------- Buttons ---------- */
.cta{display:inline-block;padding:16px 34px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;border-radius:2px;text-decoration:none;transition:transform .2s,box-shadow .25s,filter .2s,background .25s,border-color .2s,color .2s;text-align:center;}
.cta-gold{background:linear-gradient(180deg,#F3D06E,#DBA928);color:#132A45;border:1px solid #DBA928;box-shadow:0 10px 28px -10px rgba(219,169,40,.55);}
.cta-gold:hover{transform:translateY(-3px);filter:brightness(1.06);box-shadow:0 16px 38px -12px rgba(219,169,40,.75);}
.cta-dark{background:#132A45;border:1.5px solid rgba(219,169,40,.72);color:#F3D06E;padding:15px 34px;box-shadow:0 8px 22px rgba(0,0,0,.35);}
.cta-dark:hover{transform:translateY(-3px);background:#1B3A5E;border-color:#DBA928;color:#F9E3A0;box-shadow:0 14px 32px rgba(0,0,0,.5);}
.ctarow{display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- Shared section bits ---------- */
.bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.bg img{width:100%;height:100%;object-fit:cover;opacity:.94;}
.bg .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,41,66,.72) 0%,rgba(19,41,66,.5) 45%,rgba(19,41,66,.8) 100%);}
.inner{position:relative;z-index:1;}
.eyebrow{font-size:12px;letter-spacing:5px;text-transform:uppercase;color:#DBA928;font-weight:500;}
.rule{height:2px;width:80px;background:#DBA928;}
.sectionhead{display:flex;align-items:baseline;gap:18px;margin-bottom:48px;}
.sectionhead h2{font-family:'Cinzel',Georgia,serif;font-size:32px;color:#FBF7EE;font-weight:800;}
.sectionhead .line{flex:1;height:2px;background:#DBA928;}
.reveal{transform:translateY(22px);transition:transform .8s cubic-bezier(.2,.7,.3,1);}
.reveal.in{transform:none;}

/* ---------- Hero ---------- */
.hero{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:80px 48px 90px;max-width:1240px;margin:0 auto;}
.hero .bg{left:50%;width:100vw;margin-left:-50vw;height:100%;}
.hero .bg img{object-position:center 28%;}
.hero .bg .shade{background:linear-gradient(90deg,#1e3e62 0%,rgba(30,62,98,.34) 30%,rgba(30,62,98,.3) 70%,#1e3e62 100%),linear-gradient(180deg,rgba(19,41,66,.6) 0%,rgba(19,41,66,.42) 45%,rgba(19,41,66,.74) 100%);}
.tiltwrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:440px;perspective:900px;}
.ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;z-index:1;}
.ring-solid{width:300px;height:300px;border:2px solid rgba(219,169,40,.72);box-shadow:0 0 26px rgba(219,169,40,.22),inset 0 0 26px rgba(219,169,40,.12);}
.ring-dashed{width:404px;height:404px;border:1.5px dashed rgba(219,169,40,.58);}
.tilt{border-radius:50%;background:#1d3c5d;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .15s ease-out;will-change:transform;}
.tilt img{width:100%;height:100%;object-fit:contain;}
.crest-main{position:relative;width:230px;height:230px;border:3px solid #DBA928;box-shadow:0 24px 60px rgba(0,0,0,.6);z-index:3;}
.crest-small{position:absolute;left:50%;top:50%;border:2px solid rgba(219,169,40,.65);box-shadow:0 14px 34px rgba(0,0,0,.6);z-index:4;}
.crest-clicker{margin-left:-212px;margin-top:100px;width:112px;height:112px;}
.crest-chapter{margin-left:79px;margin-top:-197px;width:118px;height:118px;}
.herotext{position:relative;z-index:1;}
.herotext .eyebrow{margin-bottom:18px;}
.herotext h1{font-family:'Cinzel',Georgia,serif;font-size:62px;font-weight:800;color:#FBF7EE;line-height:1;margin-bottom:14px;letter-spacing:-1px;}
.herotext .sub{font-family:'Cinzel',Georgia,serif;font-size:18px;color:#F3D06E;margin-bottom:22px;font-weight:400;}
.herotext .rule{margin-bottom:24px;}
.herotext .lede{font-size:16px;color:#E4DAC4;max-width:440px;margin-bottom:34px;line-height:1.85;}

/* ---------- About ---------- */
#about{position:relative;padding:88px 48px;border-top:1px solid rgba(219,169,40,.16);background:#1a3858;overflow:hidden;}
#about .bg img{object-position:center 30%;}
#about .inner{max-width:1100px;margin:0 auto;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;background:rgba(14,44,77,.5);border:1px solid rgba(14,44,77,.5);border-radius:8px;overflow:hidden;box-shadow:0 26px 64px rgba(0,0,0,.5);}
.hovercard{background:rgba(29,90,160,.7);padding:30px 28px;position:relative;transition:background .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease;}
.hovercard:hover{background:rgba(37,105,179,.7);transform:translateY(-8px);z-index:2;box-shadow:0 22px 46px rgba(0,0,0,.55);}
.hovercard-bar{position:absolute;top:0;left:0;height:3px;width:0;background:#DBA928;transition:width .45s cubic-bezier(.2,.8,.2,1);}
.hovercard:hover .hovercard-bar{width:100%;}
.hovercard-title{font-family:'Cinzel',Georgia,serif;font-size:15px;color:#DBA928;margin-bottom:12px;font-weight:700;transition:transform .45s cubic-bezier(.2,.8,.2,1);}
.hovercard:hover .hovercard-title{transform:translateX(6px);}
.hovercard p{font-size:14px;color:#E4DAC4;line-height:1.85;}
.valuerow{display:flex;justify-content:space-between;gap:24px;margin-top:54px;flex-wrap:wrap;}
.value{position:relative;overflow:hidden;flex:1;min-width:150px;text-align:center;padding:24px 12px;border-top:3px solid #DBA928;background:#16191d;border-radius:0 0 6px 6px;box-shadow:0 14px 34px rgba(0,0,0,.45);}
.value .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78;pointer-events:none;}
.value .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,29,45,.34),rgba(19,29,45,.62));pointer-events:none;}
.value .icon{position:relative;display:flex;justify-content:center;margin-bottom:8px;}
.value .icon img{width:52px;height:52px;object-fit:contain;}
.value .label{position:relative;font-size:12px;color:#F2EBDD;text-transform:uppercase;letter-spacing:2px;font-weight:500;}

/* ---------- Events ---------- */
#events{position:relative;padding:88px 48px;border-top:1px solid rgba(219,169,40,.16);overflow:hidden;}
#events .bg img{object-position:center 40%;opacity:.8;}
#events .inner{max-width:780px;margin:0 auto;}
#events .sectionhead{margin-bottom:52px;}
.evtimeline{position:relative;padding-left:42px;}
.evline{position:absolute;left:13px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,#DBA928,#9E7118);}
.evlist{display:flex;flex-direction:column;gap:26px;}
.ev{position:relative;}
.evdot{position:absolute;left:-36px;top:20px;width:14px;height:14px;border-radius:50%;background:#DBA928;border:3px solid #1e3e62;box-shadow:0 0 0 3px rgba(219,169,40,.18);}
.evcard{background:rgba(29,90,160,.7);border:1px solid rgba(14,44,77,.7);border-left:4px solid #DBA928;border-radius:6px;padding:20px 24px;box-shadow:0 14px 34px rgba(0,0,0,.45);display:flex;align-items:center;gap:20px;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;}
.evcard:hover{transform:translateX(8px) scale(1.01);box-shadow:0 16px 38px rgba(0,0,0,.5);border-color:#9E7118;}
.evdate{text-align:center;min-width:50px;flex-shrink:0;}
.evday{font-family:'Cinzel',Georgia,serif;font-size:26px;font-weight:700;color:#DBA928;line-height:1;}
.evmonth{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#CBBE9E;font-weight:600;margin-top:2px;}
.evsep{width:1px;align-self:stretch;background:rgba(219,169,40,.3);}
.evtext{flex:1;min-width:0;}
.evtitle{font-size:15px;font-weight:600;color:#DBA928;margin-bottom:4px;}
.evmeta{font-size:13px;color:#CBBE9E;}
.evtag{font-size:11px;border-radius:999px;padding:6px 15px;min-width:96px;text-align:center;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;flex-shrink:0;background:transparent;border:1.5px solid rgba(228,218,196,.5);color:#E4DAC4;}
.evtag-social{color:#CBBE9E;border-color:rgba(203,190,158,.5);}
.evtag-charity{color:#DBA928;border-color:#DBA928;}

/* ---------- Join ---------- */
#join{position:relative;padding:96px 48px;border-top:1px solid rgba(219,169,40,.16);background:#1a3858;text-align:center;overflow:hidden;}
#join .bg img{object-position:center 35%;}
#join .bg .shade{background:linear-gradient(180deg,rgba(19,41,66,.76) 0%,rgba(19,41,66,.64) 45%,rgba(19,41,66,.84) 100%);}
#join .eyebrow{font-weight:600;margin-bottom:14px;}
#join h2{font-family:'Cinzel',Georgia,serif;font-size:38px;color:#FBF7EE;margin-bottom:14px;font-weight:800;}
#join .rule{margin:0 auto 26px;}
#join .lede{font-size:16px;color:#E4DAC4;max-width:540px;margin:0 auto 46px;line-height:1.85;}
.reqs{display:flex;justify-content:center;gap:18px;margin:0 auto 48px;flex-wrap:wrap;max-width:760px;}
.reqcard{flex:1;min-width:200px;border:2px solid #DBA928;border-radius:6px;padding:28px 22px;background:transparent;transition:transform .2s,border-color .3s,box-shadow .25s;}
.reqcard:hover{transform:translateY(-3px);border-color:#F3D06E;box-shadow:0 14px 30px rgba(219,169,40,.35);}
.reqicon{height:38px;margin-bottom:14px;color:#DBA928;display:flex;align-items:center;justify-content:center;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.reqcard:hover .reqicon{transform:scale(1.18) rotate(-4deg);}
.reqlabel{font-size:12px;color:#E4DAC4;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;}
#join .ctarow{justify-content:center;}
#join .cta{padding-left:36px;padding-right:36px;}

/* ---------- Footer ---------- */
.footer{background:#16304d;padding:32px 48px;border-top:2px solid #DBA928;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;}
.footbrand{font-family:'Cinzel',Georgia,serif;font-size:13px;color:#DBA928;}
.footbrand span{display:block;color:#CBBE9E;font-size:12px;font-family:'Raleway',sans-serif;font-weight:400;margin-top:3px;letter-spacing:1.5px;}
.footlinks{display:flex;gap:6px;list-style:none;flex-wrap:wrap;justify-content:center;}
.footlinks a{display:inline-block;padding:10px 8px;font-size:12px;color:#CBBE9E;text-decoration:none;text-transform:uppercase;letter-spacing:1px;transition:color .2s;}
.footlinks a:hover{color:#DBA928;}
.copyright{font-size:12px;color:#a08d68;}

/* ---------- Contact modal ---------- */
.modal{position:fixed;inset:0;z-index:200;background:rgba(10,24,40,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;}
.contactbox{position:relative;width:100%;max-width:420px;background:#16304d;border:1px solid rgba(219,169,40,.34);border-radius:3px;padding:40px 36px 34px;box-shadow:0 30px 80px rgba(0,0,0,.6);text-align:center;}
.modalclose{position:absolute;top:6px;right:6px;width:44px;height:44px;background:transparent;border:none;color:#CBBE9E;font-size:26px;line-height:1;cursor:pointer;transition:color .2s;}
.modalclose:hover{color:#F3D06E;}
.contactbox .rule{width:48px;margin:0 auto 18px;}
.contactbox h3{font-family:'Cinzel',Georgia,serif;font-size:24px;font-weight:700;color:#FBF7EE;letter-spacing:1.5px;margin-bottom:6px;}
.contactbox .hint{color:#CBBE9E;font-size:13px;margin-bottom:26px;}
.contactrows{display:flex;flex-direction:column;gap:14px;}
.contactrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid rgba(219,169,40,.22);border-radius:2px;background:rgba(19,42,69,.6);}
.contactrow .field{text-align:left;min-width:0;}
.contactrow .fieldlabel{color:#a08d68;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;margin-bottom:3px;}
.contactrow .fieldvalue{color:#F2EBDD;font-size:16px;font-weight:600;text-decoration:none;letter-spacing:.5px;word-break:break-all;transition:color .2s;}
.contactrow .fieldvalue:hover{color:#F3D06E;}
.copybtn{flex:none;background:transparent;border:1px solid #DBA928;color:#DBA928;padding:10px 14px;border-radius:2px;font-family:'Raleway',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;cursor:pointer;min-width:78px;transition:background .2s,color .2s;}
.copybtn:hover{background:#2b5279;color:#F3D06E;}

/* ---------- Simple sub-pages ---------- */
.page{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:calc(100vh - 70px);padding:48px;text-align:center;}
.page .rule{width:56px;}
.page h1{font-family:'Cinzel',Georgia,serif;font-size:42px;font-weight:700;color:#FBF7EE;letter-spacing:2px;}
.page p{color:#E4DAC4;font-size:15px;max-width:420px;}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .nav{height:64px;padding:0 18px;}
  section,footer{scroll-margin-top:64px;}
  .menubtn{display:flex;}
  .navcta{display:none;}
  .mobonly{display:block;}
  .navlist{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(22,48,77,.985);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(219,169,40,.22);box-shadow:0 18px 40px rgba(0,0,0,.45);padding:6px 0 12px;max-height:calc(100vh - 64px);overflow-y:auto;}
  .navlist.open{display:flex;}
  .navlist li{width:100%;border-top:1px solid rgba(219,169,40,.16);}
  .navlist li:first-child{border-top:none;}
  .navlist a{display:block;padding:16px 22px;font-size:14px;letter-spacing:1.4px;white-space:normal;}
  .navlink::after{display:none;}
  .navlink:hover{transform:none;}
  .page{min-height:calc(100vh - 64px);}
}
@media (max-width:1024px){
  .hero{grid-template-columns:1fr;padding:36px 24px 64px;gap:24px;}
  .herotext h1{font-size:46px;}
  .tiltwrap{order:2;transform:scale(.8);min-height:360px;}
  .herotext{order:1;}
}
@media (max-width:900px){
  #about,#events,#join{padding:64px 24px;}
  .sectionhead h2{font-size:26px;}
  #join h2{font-size:30px;}
  .footer{padding:28px 24px;justify-content:center;text-align:center;flex-direction:column;gap:14px;}
}
@media (max-width:700px){
  .evcard{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"date text" "date tag";column-gap:16px;row-gap:10px;padding:18px;align-items:start;}
  .evdate{grid-area:date;padding-top:2px;}
  .evsep{display:none;}
  .evtext{grid-area:text;}
  .evtag{grid-area:tag;justify-self:start;min-width:0;padding:5px 14px;}
  .evcard:hover{transform:none;}
  .valuerow{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
}
@media (max-width:560px){
  .hero{padding:20px 18px 56px;}
  .herotext h1{font-size:40px;}
  .herotext .lede{max-width:none;}
  .tiltwrap{transform:scale(.62);min-height:250px;}
  #about,#events,#join{padding:56px 18px;}
  #join h2{font-size:26px;}
  .cta{width:100%;padding:16px 20px;}
  .ctarow{width:100%;}
  .evtimeline{padding-left:30px;}
  .evdot{left:-24px;}
  .contactbox{padding:34px 20px 26px;}
  .contactrow{flex-wrap:wrap;}
  .contactrow .copybtn{width:100%;padding:11px 14px;}
  .page{padding:40px 22px;}
  .page h1{font-size:32px;}
}
@media (hover:none){
  .hovercard:hover,.evcard:hover,.reqcard:hover,.cta:hover{transform:none;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{transform:none;transition:none;}
  *{transition-duration:.01ms !important;}
}