/* =========================================================================
   BLACK FLAG BULLETIN — shared design system
   Maritime-luxe: near-black ground, bone type, metallic gold, grain texture
   Display: Fraunces  ·  Body/UI: Hanken Grotesk
   ========================================================================= */

:root{
  --ink:        #0a0a0b;
  --ink-2:      #111113;
  --ink-3:      #17171a;
  --panel:      #131316;
  --bone:       #f1ebdc;
  --bone-dim:   #cfc8b7;
  --muted:      #8c867a;
  --muted-2:    #645f57;
  --gold:       #c8a24a;
  --gold-2:     #e6cd86;
  --gold-deep:  #9a7b34;
  --line:       rgba(200,162,74,.20);
  --line-soft:  rgba(241,235,220,.08);
  --good:       #7fa86a;
  --maxw:       1180px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--ink);
  color:var(--bone);
  font-family:"Hanken Grotesk", system-ui, sans-serif;
  font-size:17px;
  line-height:1.6;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* grain overlay ---------------------------------------------------------- */
body::before{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ambient gold glow at top */
body::after{
  content:""; position:fixed; top:-30vh; left:50%; transform:translateX(-50%);
  width:120vw; height:70vh; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(200,162,74,.10), transparent 60%);
}

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

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* typography ------------------------------------------------------------- */
h1,h2,h3,.display{
  font-family:"Fraunces", Georgia, serif;
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.015em;
  font-optical-sizing:auto;
}
h1{ font-size:clamp(2.6rem,6.4vw,5.1rem); }
h2{ font-size:clamp(2rem,4vw,3.3rem); }
h3{ font-size:clamp(1.3rem,2.2vw,1.7rem); letter-spacing:-.01em; }
em{ font-style:italic; color:var(--gold-2); }
p{ color:var(--bone-dim); }

.eyebrow{
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.72rem; font-weight:700;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); opacity:.6; }

.lede{ font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--bone-dim); max-width:54ch; }

/* layout ----------------------------------------------------------------- */
.wrap{ width:min(var(--maxw),92vw); margin-inline:auto; }
section{ padding:clamp(4.5rem,10vw,8rem) 0; position:relative; }
.rule{ height:1px; background:var(--line-soft); border:0; }

/* floating pill nav ------------------------------------------------------ */
.nav{
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:1000; width:min(var(--maxw),94vw);
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem .6rem .5rem .85rem;
  background:rgba(13,13,15,.72);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border:1px solid var(--line);
  border-radius:100px;
  box-shadow:0 18px 50px -25px rgba(0,0,0,.9), inset 0 1px 0 rgba(241,235,220,.04);
}
.nav__brand{ display:flex; align-items:center; gap:.6rem; }
.nav__brand img{ width:34px; height:34px; }
.nav__brand b{
  font-family:"Fraunces",serif; font-weight:500; font-size:1.02rem;
  letter-spacing:.01em; color:var(--bone);
}
.nav__links{ display:flex; align-items:center; gap:.4rem; }
.nav__links a{
  font-size:.86rem; font-weight:500; color:var(--bone-dim);
  padding:.5rem .85rem; border-radius:100px; transition:color .25s, background .25s;
}
.nav__links a:hover{ color:var(--bone); background:rgba(241,235,220,.05); }
.nav__links a.cta{
  background:var(--gold); color:var(--ink); font-weight:700;
  box-shadow:0 8px 22px -10px rgba(200,162,74,.7);
}
.nav__links a.cta:hover{ background:var(--gold-2); color:var(--ink); }
.nav__burger{ display:none; background:none; border:0; color:var(--bone); padding:.4rem .6rem; cursor:pointer; }
@media(max-width:780px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .nav.open .nav__links{
    display:flex; flex-direction:column; align-items:stretch;
    position:absolute; top:calc(100% + 10px); right:0; left:0;
    background:rgba(13,13,15,.96); border:1px solid var(--line);
    border-radius:22px; padding:.6rem; gap:.2rem;
  }
}

/* buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:"Hanken Grotesk",sans-serif; font-weight:700; font-size:.96rem;
  padding:1rem 1.6rem; border-radius:100px; cursor:pointer;
  border:1px solid transparent; transition:transform .2s var(--ease), background .25s, box-shadow .25s, border-color .25s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--gold{ background:var(--gold); color:var(--ink); box-shadow:0 14px 34px -14px rgba(200,162,74,.65); }
.btn--gold:hover{ background:var(--gold-2); box-shadow:0 18px 40px -14px rgba(200,162,74,.8); }
.btn--ghost{ background:transparent; color:var(--bone); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--gold); background:rgba(200,162,74,.06); }
.btn--lg{ padding:1.15rem 2rem; font-size:1.02rem; }
.btn .arrow{ transition:transform .2s var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }

/* generic pieces --------------------------------------------------------- */
.tag{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); border:1px solid var(--line);
  padding:.35rem .7rem; border-radius:100px;
}
.card{
  background:linear-gradient(180deg, var(--ink-2), var(--ink));
  border:1px solid var(--line-soft); border-radius:18px; padding:1.8rem;
  position:relative; overflow:hidden;
}
.card--gold{ border-color:var(--line); box-shadow:inset 0 1px 0 rgba(230,205,134,.08); }

/* dashed rope divider */
.rope{
  height:2px; border:0; background-image:linear-gradient(90deg,var(--gold) 50%,transparent 0);
  background-size:14px 2px; opacity:.35; margin:0;
}

/* card showcase ---------------------------------------------------------- */
.cardshow__grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.6rem;
  margin-top:2.4rem; perspective:1600px; }
.cardframe{ margin:0; position:relative; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); background:var(--ink-2);
  box-shadow:0 26px 50px -28px rgba(0,0,0,.9);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.cardframe img{ display:block; width:100%; height:auto; }
.cardframe figcaption{ position:absolute; inset:auto 0 0 0; padding:1rem .7rem .55rem;
  font-size:.58rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  background:linear-gradient(0deg, rgba(10,10,11,.94), transparent); }
.cardshow__grid .cardframe{ width:135px; max-width:40vw; }
.cardframe--l{ transform:rotate(-1.6deg); }
.cardframe--r{ transform:rotate(1.6deg); }
.cardframe:hover{ transform:rotate(0) translateY(-6px); box-shadow:0 32px 62px -28px rgba(200,162,74,.34); }
.cardsolo{ width:120px; max-width:55vw; margin:2.2rem auto 0; }
@media(max-width:760px){ .cardframe--l,.cardframe--r{ transform:none; } }

/* footer ----------------------------------------------------------------- */
.foot{ padding:3.5rem 0 2.6rem; border-top:1px solid var(--line-soft); }
.foot__row{ display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:center; }
.foot__brand{ display:flex; align-items:center; gap:.7rem; }
.foot__brand img{ width:40px; height:40px; }
.foot small{ color:var(--muted); font-size:.82rem; }
.foot a{ color:var(--bone-dim); }
.foot a:hover{ color:var(--gold); }

/* reveal-on-load animation ---------------------------------------------- */
.rise{ opacity:0; transform:translateY(22px); animation:rise .9s var(--ease) forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* in-view reveal (scroll) */
.io{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.io.vis{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
  .rise,.io{ animation:none!important; transition:none!important; opacity:1!important; transform:none!important; }
}