/* Concept: an heirloom flag at dusk. Full-bleed worn flag behind a dark wash, tracked Roman capitals with one italic word, a small garnet button; quiet parchment and navy sections below with gold hairlines. */
:root{
  --navy:#0F1A2E; --navy2:#16233B; --ink:#1F2433;
  --parchment:#EFE7D6; --parchment2:#E6DCC6;
  --gold:#B38A45; --gold2:#D2B477; --garnet:#8E2B2B; --garnet2:#A33634;
  --cream:#F3ECDD; --muted:#5B5A57;
  --rule:rgba(179,138,69,.5);
  --bg:var(--parchment); --fg:var(--ink);
  --maxw:1120px; --prose:62ch;
  --caps:"Cinzel","Trajan Pro",Georgia,serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Lato","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --parchment:#18202F; --parchment2:#1D2637; --ink:#E9E2D2; --muted:#B4AD9F;
  --bg:#18202F; --fg:#E9E2D2; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --parchment:#18202F; --parchment2:#1D2637; --ink:#E9E2D2; --muted:#B4AD9F;
  --bg:#18202F; --fg:#E9E2D2; color-scheme:dark;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:1rem; line-height:1.7; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-weight:400; line-height:1.15; text-wrap:balance; margin:0;}
p{margin:0;}
a{color:inherit;}
em.script{font-family:var(--serif); font-style:italic; font-weight:500; text-transform:none; letter-spacing:.01em;}
.gutter{padding-left:max(20px,env(safe-area-inset-left,0px)); padding-right:max(20px,env(safe-area-inset-right,0px));}
.wrap{max-width:var(--maxw); margin:0 auto; width:100%;}

/* Flag backdrop shared by the hero, the page header and the closing band */
.flag{position:relative; color:var(--cream); background:var(--navy) url("hero-flag.jpg") center/cover no-repeat; isolation:isolate;}
.flag::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(10,16,30,.18) 0%, rgba(10,16,30,.55) 70%, rgba(8,12,22,.8) 100%),
    linear-gradient(180deg, rgba(8,12,22,.7) 0%, rgba(8,12,22,.1) 24%, rgba(8,12,22,.15) 70%, rgba(8,12,22,.8) 100%);}

/* Header over the flag */
.masthead{text-align:center; padding-top:22px;}
.brand{display:inline-flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:var(--cream);}
.brand-seal{width:64px; height:64px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));}
.brand-name{font-family:var(--caps); font-size:.82rem; letter-spacing:.32em; padding-left:.32em;}
.nav{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 34px; margin-top:16px; padding-block:12px; border-top:1px solid rgba(210,180,119,.28); border-bottom:1px solid rgba(210,180,119,.28); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;}
.nav a{text-decoration:none; color:rgba(243,236,221,.82); transition:color .2s;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--gold2);}

.hero{min-height:min(100svh,900px); display:flex; flex-direction:column;}
.hero-inner{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-block:56px 40px; max-width:820px; margin:0 auto;}
.seal{width:clamp(150px,22vw,210px); height:auto; aspect-ratio:1; display:block; margin:0 auto 20px; filter:drop-shadow(0 6px 24px rgba(0,0,0,.6));}
.eyebrow{font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold2);}
.title{font-family:var(--caps); font-size:clamp(2.1rem,6.4vw,4.4rem); letter-spacing:.12em; line-height:1.08; margin-top:14px; text-shadow:0 2px 24px rgba(0,0,0,.55);}
.title em.script{font-size:1.12em; letter-spacing:0; color:var(--cream);}
.lede{max-width:52ch; margin:22px auto 0; color:rgba(243,236,221,.86); font-size:1.02rem; line-height:1.75; text-shadow:0 1px 12px rgba(0,0,0,.6);}
.btn{display:inline-block; margin-top:30px; font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:#fff; text-decoration:none; background:var(--garnet); border:0; padding:13px 30px; cursor:pointer; transition:background .2s;}
.btn:hover{background:var(--garnet2);}
.scroll{display:grid; place-items:center; width:42px; height:42px; margin:0 auto 26px; border:1px solid rgba(210,180,119,.6); border-radius:50%; color:var(--gold2); text-decoration:none;}
.scroll svg{width:14px; height:14px;}
.scroll:hover{background:rgba(210,180,119,.15);}

/* Ornament between headings and copy */
.ornament{display:flex; align-items:center; justify-content:center; gap:12px; color:var(--gold); margin:18px auto 0; max-width:220px;}
.ornament::before,.ornament::after{content:""; height:1px; background:var(--rule); flex:1;}
.ornament svg{width:12px; height:12px; flex:none;}

/* Parchment sections */
.band{padding-block:88px;}
.parchment{background:var(--parchment);}
.parchment.alt{background:var(--parchment2);}
.kicker{font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; color:var(--garnet); text-align:center;}
:root[data-theme="dark"] .kicker{color:var(--gold2);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kicker{color:var(--gold2);}}
.heading{font-family:var(--caps); font-size:clamp(1.6rem,3.6vw,2.4rem); letter-spacing:.08em; text-align:center; margin-top:12px;}
.heading em.script{font-size:1.1em; letter-spacing:0;}
.center-copy{max-width:var(--prose); margin:28px auto 0; text-align:center; font-family:var(--serif); font-size:1.32rem; line-height:1.65;}

/* Navy record section, labels in gold like an archival register */
.register{background:var(--navy); color:var(--cream);}
.register .kicker{color:var(--gold2);}
.register .heading{color:var(--cream);}
.values{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:52px; border-top:1px solid var(--rule);}
.value{padding:26px 26px 6px; border-left:1px solid rgba(179,138,69,.25);}
.value:first-child{border-left:0; padding-left:0;}
.value h3{font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold2);}
.value p{margin-top:12px; color:rgba(243,236,221,.82); font-size:.98rem;}

/* Membership */
.join{max-width:var(--prose); margin:36px auto 0;}
.charter{font-family:var(--serif); font-size:1.28rem; line-height:1.7;}
.dropcap::first-letter{font-family:var(--caps); font-size:3.4em; line-height:.8; float:left; margin:.06em .12em 0 0; color:var(--garnet);}
.terms{margin-top:22px; font-size:.95rem; color:var(--muted);}
.join .btn{margin-top:30px;}

/* Closing over the flag */
.closing{text-align:center; padding-block:96px;}
.motto{font-family:var(--caps); font-size:clamp(1.6rem,4.2vw,2.6rem); letter-spacing:.1em; text-shadow:0 2px 20px rgba(0,0,0,.6);}
.motto em.script{font-size:1.1em; letter-spacing:0;}
.closing .sub{margin:16px auto 0; color:rgba(243,236,221,.82); max-width:44ch;}

footer{background:#0A1222; color:rgba(243,236,221,.7); padding-block:26px; font-size:.78rem; letter-spacing:.08em;}
.foot-inner{display:flex; gap:10px 26px; justify-content:space-between; align-items:center; flex-wrap:wrap;}
.foot-brand{display:inline-flex; align-items:center; gap:12px; font-family:var(--caps); color:var(--cream); font-size:.86rem; letter-spacing:.24em;}
.foot-brand img{width:34px; height:34px;}

/* Inquire page */
.page-head .hero-inner{padding-block:56px 70px;}
.inquiry{max-width:620px; margin:0 auto;}
.field{margin-top:28px;}
.field label{display:block; font-size:.7rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; margin-bottom:8px;}
.field .hint{display:block; font-size:.92rem; color:var(--muted); margin:-2px 0 8px;}
.field input,.field textarea{width:100%; font:inherit; font-size:1.02rem; color:var(--fg); background:rgba(255,255,255,.45); border:1px solid rgba(179,138,69,.45); padding:11px 12px; border-radius:0;}
:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field textarea{background:rgba(255,255,255,.04);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .field input,:root:not([data-theme="light"]) .field textarea{background:rgba(255,255,255,.04);}}
.field textarea{min-height:160px; resize:vertical; line-height:1.6;}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(179,138,69,.2);}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.notice{padding:16px 18px; border-left:3px solid var(--gold); background:rgba(179,138,69,.12); font-family:var(--serif); font-size:1.2rem;}
.notice.err{border-left-color:var(--garnet); background:rgba(142,43,43,.08);}
.notice[hidden]{display:none;}

@media (max-width:820px){
  .values{grid-template-columns:1fr 1fr;}
  .value:nth-child(3){border-left:0; padding-left:0;}
  .value{padding-bottom:22px;}
}
@media (max-width:560px){
  .nav{gap:6px 20px; font-size:.66rem; letter-spacing:.18em;}
  .values{grid-template-columns:1fr;}
  .value{border-left:0; padding-left:0; padding-right:0; border-bottom:1px solid rgba(179,138,69,.25);}
  .band{padding-block:64px;}
  .title{letter-spacing:.08em;}
  .center-copy,.charter{font-size:1.18rem;}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *{transition:none!important;}}