/* Dark Tides Supply — Galveston Pirate Festival landing page
   Typography: Cinzel (display) + Jost (body), self-hosted via css/fonts.css */

:root{
  --ink:#050709;
  --navy:#07121C;
  --ocean:#0B1B27;
  --gold:#C89B3C;
  --gold-lt:#E3BE72;
  --parch:#D7B77A;
  --cream:#E8DEC9;
  --cream-dim:#BCB09B;
  --hair:rgba(200,155,60,.30);
  --hair-soft:rgba(255,255,255,.09);
  --display:'Cinzel',Georgia,'Times New Roman',serif;
  --body:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--body);font-size:16px;line-height:1.6;font-weight:300;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:.012em;line-height:1.08}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;background:var(--gold);color:#0b0b0b;font-weight:500}
.skip:focus{left:8px;top:8px}

:where(a,button,input):focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px;border-radius:2px}

/* Decorative full-bleed layers must never eat a tap. */
.hero__art,.hero__veil,.hero__fade,
.crew__bg,.crew__veil,
.final__bg,.final__veil{pointer-events:none}

/* Anchor targets clear the sticky header. */
[id]{scroll-margin-top:clamp(76px,10vh,104px)}

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  --bh:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:var(--bh);padding:0 clamp(20px,3vw,30px);
  font-family:var(--display);font-size:13.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:1px solid var(--gold);border-radius:2px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease);
}
.btn--gold{
  color:#120d05;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold) 52%,#A97D28);
  box-shadow:0 2px 22px rgba(200,155,60,.20),inset 0 1px 0 rgba(255,240,205,.55);
}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(200,155,60,.40),inset 0 1px 0 rgba(255,240,205,.7)}
.btn--ghost{color:var(--cream);background:rgba(6,10,14,.55);border-color:var(--hair);backdrop-filter:blur(3px)}
.btn--ghost:hover{transform:translateY(-2px);border-color:var(--gold);color:#fff;background:rgba(10,16,22,.75)}
.btn--sm{--bh:44px;font-size:11.5px;padding:0 16px;white-space:nowrap}
.btn--lg{--bh:60px;font-size:15px}
.btn--wide{width:100%}
.btn[disabled]{opacity:.65;pointer-events:none}

/* ── nav ─────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,rgba(5,7,9,.92),rgba(5,7,9,.55) 70%,transparent);
     border-bottom:1px solid transparent;transition:background .3s var(--ease),border-color .3s var(--ease)}
.nav.is-stuck{background:rgba(5,7,9,.94);border-bottom-color:var(--hair);backdrop-filter:blur(10px)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:14px;
         max-width:1680px;margin:0 auto;padding:12px var(--pad)}
.brand{display:grid;text-decoration:none;min-width:0}
.brand__name{font-family:var(--display);font-size:clamp(14px,2.4vw,19px);font-weight:600;
             letter-spacing:.14em;text-transform:uppercase;color:var(--cream);white-space:nowrap}
.brand__tag{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav__links{display:flex;align-items:center;gap:clamp(10px,2vw,24px)}
.nav__link{font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--cream-dim)}
.nav__link:hover{color:var(--gold-lt)}

/* ── hero ────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;min-height:88vh;min-height:88svh;display:flex;align-items:center;
      margin-top:-72px;padding:112px var(--pad) 72px;overflow:hidden}
.hero__art,.hero__art img{position:absolute;inset:0;width:100%;height:100%}
.hero__art img{object-fit:cover;object-position:60% 50%;z-index:-2;will-change:transform}
.hero__veil{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(3,6,9,.93) 0%,rgba(4,8,12,.78) 34%,rgba(4,8,12,.24) 58%,rgba(4,8,12,.05) 78%),
    linear-gradient(180deg,rgba(3,6,9,.78) 0%,transparent 26%);
}
.hero__fade{position:absolute;left:0;right:0;bottom:0;height:140px;z-index:-1;
  background:linear-gradient(180deg,transparent,var(--ink))}
.hero__in{position:relative;width:100%;max-width:660px}
.eyebrow{font-family:var(--display);font-size:clamp(10px,1.5vw,12px);letter-spacing:.34em;
         text-transform:uppercase;color:var(--parch)}
.hero__h{margin:14px 0 0;font-size:clamp(34px,7.2vw,74px);text-transform:uppercase;
         text-shadow:0 4px 34px rgba(0,0,0,.85)}
.hero__h span{color:var(--gold-lt)}
.hero__sub{margin-top:16px;font-family:var(--display);font-size:clamp(17px,2.6vw,27px);
           font-weight:400;color:var(--cream);text-shadow:0 2px 20px rgba(0,0,0,.8)}
.hero__support{margin-top:12px;font-size:clamp(12px,1.7vw,14px);letter-spacing:.18em;
               text-transform:uppercase;color:var(--cream-dim)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__note{margin-top:26px;font-size:12.5px;font-style:italic;color:var(--parch);opacity:.92}
.compass{color:var(--gold);font-style:normal;margin-right:6px}

/* ── generic section furniture ───────────────────────────── */
.sec{position:relative;padding:clamp(64px,9vw,118px) var(--pad)}
.sec__head{max-width:820px;margin:0 auto clamp(34px,5vw,56px);text-align:center}
.h-display{font-size:clamp(27px,5vw,54px);text-transform:uppercase;color:var(--cream)}
.sec--voyage .h-display,.sec--brick .h-display,.final .h-display{
  background:linear-gradient(180deg,#F3E2BC,var(--gold-lt) 55%,#A97D28);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rule{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 0;color:var(--gold);font-size:11px}
.rule::before,.rule::after{content:"";height:1px;width:min(120px,22vw);
  background:linear-gradient(90deg,transparent,var(--hair),transparent)}
.sec__sub{margin-top:12px;font-size:clamp(12px,1.8vw,14.5px);letter-spacing:.24em;
          text-transform:uppercase;color:var(--cream-dim)}

/* ── cards ───────────────────────────────────────────────── */
.card{display:block;border-radius:3px;overflow:hidden;text-decoration:none;
      box-shadow:0 14px 34px rgba(0,0,0,.55);
      transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.card img{width:100%;height:auto;transition:transform .6s var(--ease),filter .45s var(--ease);filter:saturate(.97)}
.card:hover,.card:focus-visible{transform:translateY(-8px);
  box-shadow:0 22px 54px rgba(0,0,0,.7),0 0 0 1px var(--hair),0 0 34px rgba(200,155,60,.24)}
.card:hover img,.card:focus-visible img{transform:scale(1.035);filter:saturate(1.06) brightness(1.04)}

.sec--voyage{background:
  radial-gradient(120% 70% at 50% 0%,rgba(11,27,39,.9),transparent 60%),var(--ink)}
.voyage{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.5vw,20px);
        max-width:1620px;margin:0 auto}

/* ── crew access ─────────────────────────────────────────── */
.sec--crew{isolation:isolate;overflow:hidden;padding-block:clamp(60px,8vw,104px)}
.crew__bg,.crew__bg img{position:absolute;inset:0;width:100%;height:100%}
.crew__bg img{object-fit:cover;object-position:50% 42%;z-index:-2}
.crew__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--ink),rgba(5,9,13,.62) 22%,rgba(5,9,13,.66) 78%,var(--ink))}
.crew__panel{
  display:grid;grid-template-columns:auto minmax(340px,1.3fr) minmax(310px,1fr);
  align-items:center;gap:clamp(20px,2.6vw,40px);
  max-width:1320px;margin:0 auto;padding:clamp(24px,3vw,38px) clamp(22px,3.4vw,52px);
  border:1px solid rgba(120,84,34,.5);border-radius:4px;
  background:#E6D2A8 url("/galveston/images/parchment-1500.webp") center/cover no-repeat;
  box-shadow:0 28px 70px rgba(0,0,0,.7),inset 0 0 90px rgba(120,80,30,.28);
  color:#2A1D0C;
}
.crew__seal img{width:clamp(112px,13vw,182px);height:auto;filter:drop-shadow(0 3px 10px rgba(70,45,10,.4))}
.h-ink{color:#241809;font-size:clamp(24px,3.6vw,42px);text-transform:uppercase}
.crew__sub{margin-top:10px;font-family:var(--display);font-size:clamp(12px,1.6vw,15px);font-weight:600;
           letter-spacing:.14em;text-transform:uppercase;color:#5B3F10}
.crew__copy{margin-top:15px;max-width:52ch;font-size:15px;line-height:1.68;color:#33240E}
.crew__form{display:grid;gap:10px}
.field{display:grid;gap:5px}
.field label{font-size:12.5px;font-weight:500;letter-spacing:.06em;color:#3A2A10}
.opt{font-weight:300;color:#6C5526}
.field input{
  min-height:46px;padding:9px 14px;font:inherit;font-size:15px;color:#241809;
  background:#F6EEDA;border:1px solid rgba(90,62,22,.45);border-radius:2px;
  transition:border-color .2s,box-shadow .2s}
.field input::placeholder{color:#9C8455}
.field input:focus{outline:none;border-color:#8A6323;box-shadow:0 0 0 3px rgba(200,155,60,.3)}
.field.is-bad input{border-color:#9B3520;background:#F8E7DF}
.err{font-size:12px;color:#8E2F1B}
.crew__form .btn--gold{margin-top:4px;border-color:#7A5720}
.btn__spin{display:none;width:15px;height:15px;border:2px solid rgba(18,13,5,.3);
           border-top-color:#120d05;border-radius:50%;animation:spin .7s linear infinite}
.is-busy .btn__spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.form-msg{margin-top:4px;padding:11px 13px;border-radius:2px;font-size:14px;line-height:1.5}
.form-msg.is-ok{background:rgba(63,102,54,.16);border:1px solid rgba(63,102,54,.5);color:#2C4A23}
.form-msg.is-err{background:rgba(155,53,32,.12);border:1px solid rgba(155,53,32,.45);color:#8E2F1B}
.form-fine{font-size:11.5px;color:#6C5526}

/* ── brick world ─────────────────────────────────────────── */
.sec--brick{background:
  radial-gradient(100% 60% at 15% 0%,rgba(11,27,39,.75),transparent 62%),var(--ink)}
.brick__grid{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,2fr);
             align-items:center;gap:clamp(26px,4vw,56px);max-width:1620px;margin:0 auto}
.brick__intro .h-display{font-size:clamp(26px,3.7vw,46px)}
.brick__intro .rule{justify-content:flex-start}
.brick__intro .rule::before{display:none}
.brick__intro .sec__sub{margin-top:10px}
.brick__copy{margin:18px 0 26px;max-width:46ch;font-size:15.5px;line-height:1.7;color:var(--cream-dim)}
.brick__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}

/* ── wide artwork banners ────────────────────────────────── */
.sec--banner{padding-inline:0}
.sec--society{background:linear-gradient(180deg,var(--ink),rgba(7,18,28,.6),var(--ink))}
.banner{position:relative;max-width:1900px;margin:0 auto}
.banner__link{display:block;text-decoration:none}
.banner__scroll img{width:100%;height:auto}
.banner__hint{display:none}
.banner__foot{display:grid;justify-items:center;gap:20px;max-width:760px;
              margin:clamp(26px,3.4vw,42px) auto 0;padding:0 var(--pad);text-align:center}
.banner__copy{font-size:15.5px;line-height:1.7;color:var(--cream-dim)}

/* ── final CTA ───────────────────────────────────────────── */
.final{isolation:isolate;overflow:hidden;display:grid;place-items:center;
       min-height:clamp(340px,46vw,520px);text-align:center}
.final__bg,.final__bg img{position:absolute;inset:0;width:100%;height:100%}
.final__bg img{object-fit:cover;object-position:50% 55%;z-index:-2}
.final__veil{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 100% at 50% 50%,rgba(4,8,12,.52),rgba(4,8,12,.86) 74%,var(--ink))}
.final__in{position:relative;display:grid;justify-items:center;gap:18px;max-width:820px;padding:0 var(--pad)}
.final__copy{font-size:clamp(15px,2vw,18px);color:var(--cream);text-shadow:0 2px 18px rgba(0,0,0,.8)}

/* ── footer ──────────────────────────────────────────────── */
.foot{padding:38px var(--pad) 46px;text-align:center;border-top:1px solid var(--hair-soft);background:var(--ink)}
.foot__url a{font-family:var(--display);font-size:clamp(13px,2.2vw,17px);letter-spacing:.26em;
             text-transform:uppercase;text-decoration:none;color:var(--gold-lt)}
.foot__url a:hover{color:#fff}
.foot__line{margin-top:10px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#6E6A62}

/* ── reveal motion ───────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);
        transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ── responsive ──────────────────────────────────────────── */
@media(max-width:1200px){
  .crew__panel{grid-template-columns:auto minmax(0,1fr);}
  .crew__form{grid-column:1/-1}
}
@media(max-width:1100px){
  .voyage{grid-template-columns:repeat(3,1fr)}
  .brick__grid{grid-template-columns:1fr}
  .brick__intro{text-align:center;justify-items:center;display:grid}
  .brick__intro .rule{justify-content:center}
  .brick__intro .rule::before{display:block}
  .brick__copy{margin-inline:auto;text-align:center}
}
@media(max-width:900px){
  .hero{min-height:78vh;min-height:78svh}
  .hero__art img{object-position:66% 50%}
  .hero__veil{background:
    linear-gradient(180deg,rgba(3,6,9,.88) 0%,rgba(4,8,12,.54) 42%,rgba(4,8,12,.8) 100%)}
  .brick__cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .brand__name{font-size:15px;letter-spacing:.1em}
  .brand__tag{display:none}
  .nav__link{font-size:11px;letter-spacing:.12em}
  .voyage{grid-template-columns:repeat(2,1fr);gap:14px}
  /* wide artwork stays legible: scroll it instead of shrinking the baked-in type */
  .banner__scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
                  scrollbar-width:none;border-block:1px solid var(--hair-soft)}
  .banner__scroll::-webkit-scrollbar{display:none}
  .banner__scroll img{width:auto;max-width:none;height:clamp(280px,52vh,400px)}
  .banner__hint{display:block;margin-top:10px;padding-inline:var(--pad);text-align:center;
                font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
  .crew__panel{grid-template-columns:1fr;justify-items:center;text-align:center;gap:20px}
  .crew__copy{margin-inline:auto}
  .crew__form{text-align:left;width:100%}
  .crew__sub{letter-spacing:.12em}
}
@media(max-width:560px){
  .voyage{grid-template-columns:1fr;max-width:420px}
  .brick__cards{grid-template-columns:1fr;max-width:380px;margin-inline:auto}
  .hero__cta .btn{flex:1 1 100%}
  .brand__name{font-size:13.5px;letter-spacing:.06em}
  .hero__support{letter-spacing:.1em}
  .nav__links{gap:10px}
  .btn--sm{padding:0 11px;font-size:10px;letter-spacing:.08em}
  .brand__tag{display:none}
  .nav__in{padding-inline:16px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .card,.card img,.btn{transition:none}
  .card:hover{transform:none}
  .card:hover img{transform:none}
  .btn__spin{animation:none}
  .hero__art img{transform:none!important}
}

/* ── hero, desktop: John's comp artwork ─────────────────────
   ≥900px the artwork already contains the headline, the parchment scroll, the
   Galveston Pirate Festival banner and both buttons, so the image runs at its
   own 3.32:1 aspect and the HTML copy is moved off-screen rather than deleted —
   the h1 still exists for search engines and screen readers, while the painted
   buttons get real anchors laid over them in percentages, so they stay glued to
   the artwork at every width. */
@media(min-width:901px){
  /* the comp's own nav band is cropped off, so the real nav goes solid and the
     artwork starts cleanly beneath it, the way the comp is drawn */
  .nav{background:rgba(5,7,9,.96);border-bottom:1px solid var(--hair)}

  .hero{display:block;min-height:0;margin-top:0;padding:0;overflow:visible;line-height:0}
  .hero__art,.hero__art img{position:static;inset:auto;width:100%;height:auto}
  .hero__art img{object-fit:fill;z-index:auto;will-change:auto;display:block;transform:none!important}
  .hero__veil{display:none}
  .hero__fade{height:110px}

  /* copy stays in the document for SEO and screen readers, just not on screen */
  .hero__in{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
            overflow:hidden;clip-path:inset(50%);white-space:nowrap;max-width:none}
  /* the hotspots are the real links here — don't announce them twice */
  .hero__cta{display:none}

  .hero__hit{
    position:absolute;display:block;border-radius:3px;line-height:0;
    transition:box-shadow .18s ease,background-color .18s ease}
  /* keeps the clickable area a comfortable size on a 900px laptop without
     making the hover tint bigger than the button it sits on */
  .hero__hit::after{content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:max(100%,44px)}
  .hero__hit:hover{background:rgba(255,228,168,.10);
    box-shadow:0 0 0 1px rgba(227,190,114,.55),0 10px 34px rgba(0,0,0,.45)}
  .hero__hit:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}

  /* measured off the 2169x653 artwork */
  .hero__hit--join   {left:10.83%;top:64.62%;width:17.10%;height:13.32%}
  .hero__hit--explore{left:28.45%;top:65.54%;width:15.03%;height:11.49%}
}
@media(max-width:900px){.hero__hit{display:none}}

/* The crew panel now sends people to the real claim page rather than
   collecting into a form that had no backend. Two columns instead of three. */
.crew__points{margin:14px 0 0;padding:0 0 0 18px;font-size:14.5px;line-height:1.75}
.crew__points li{margin:2px 0}
.crew__claim{display:flex;flex-direction:column;justify-content:center;gap:10px}
.crew__claim .form-fine{margin:0;text-align:center}
.crew__claim .form-fine a{color:#6B4A12;text-decoration:underline}
@media(min-width:901px){.crew__panel{grid-template-columns:auto minmax(320px,1.25fr) minmax(240px,.85fr)}}

/* ── the token, both faces ────────────────────────────────────────────
   Sits immediately above the crew panel: see the thing, then be asked for
   your email. Built from the two transparent coin faces rather than a flat
   composed graphic, so the lettering stays crisp at any size and the labels
   are real text — a baked-in "FRONT / BACK" is unreadable at 390px. */
.sec--token{padding:clamp(40px,7vw,84px) var(--pad) clamp(10px,2vw,24px)}
.token__panel{
  position:relative;max-width:1000px;margin:0 auto;
  padding:clamp(26px,4vw,52px) clamp(20px,4vw,56px) clamp(22px,3.4vw,40px);
  border:1px solid var(--hair);border-radius:3px;text-align:center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 46%,rgba(200,155,60,.13),transparent 70%),
    linear-gradient(180deg,rgba(11,27,39,.92),rgba(5,9,13,.94));
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(227,190,114,.12)}
.token__head h2{margin-top:8px;font-size:clamp(22px,4.4vw,38px);text-transform:uppercase}
.token__sub{margin:6px auto 0;max-width:46ch;font-size:clamp(13.5px,1.9vw,15.5px);color:#CFC7B6}

.token__faces{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(20px,5vw,66px);margin:clamp(24px,4vw,42px) 0 0}
.token__face{margin:0;flex:0 1 clamp(180px,32vw,320px)}
.token__face img{
  width:100%;height:auto;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.8))
         drop-shadow(0 0 30px rgba(200,155,60,.20))}
.token__face figcaption{
  margin-top:14px;font-family:var(--display);font-size:clamp(10px,1.5vw,12px);
  font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--parch)}
/* hairlines either side of the label, the way a plate is engraved */
.token__face figcaption::before,.token__face figcaption::after{
  content:"";display:inline-block;vertical-align:middle;
  width:clamp(14px,3vw,26px);height:1px;margin:0 10px;
  background:linear-gradient(90deg,transparent,rgba(200,155,60,.6))}
.token__face figcaption::after{transform:scaleX(-1)}

.token__foot{
  margin:clamp(22px,3.4vw,34px) 0 0;padding-top:clamp(16px,2.4vw,22px);
  border-top:1px solid var(--hair-soft);
  font-size:clamp(10.5px,1.5vw,12px);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}

/* The crew panel now shows the real coin instead of the old parchment stamp,
   and a coin carries its own rim — so the seal frame that suited the stamp
   would only box it in. */
.crew__seal img{filter:drop-shadow(0 10px 22px rgba(0,0,0,.55))}

@media(max-width:560px){
  /* Stacked, the two faces need less air between them than beside them. */
  .token__faces{gap:26px}
  .token__face{flex:0 1 min(72vw,280px)}
}