/* ==========================================================================
   Krewe of Bulbancha — site styles
   Brand: navy #002147 / gold #DA9E35, sampled from the official logo files.
   ========================================================================== */

:root {
  --navy:        #002147;
  --navy-deep:   #001631;
  --navy-soft:   #103564;
  --gold:        #DA9E35;
  --gold-light:  #F2C468;
  --gold-deep:   #A87722;
  --cream:       #FBF7EF;
  --cream-warm:  #F3EADA;
  --plum:        #3B2352;
  --river:       #1F6E7B;
  --ink:         #14181F;
  --ink-soft:    #4A5260;

  /* Three voices, deliberately:
     --display  Carey Type -- New Orleans hand-painted sign lettering, the kind
                on po-boy shops and snowball stands. Carries the big statements.
     --ui       Oswald -- condensed sans for navigation, buttons, labels, dates.
                Brush caps get illegible small, so utility text stays here.
     --body     Source Sans 3 -- paragraphs. */
  --display: "Carey Type", "Sign Painter", Impact, sans-serif;
  --ui:      "Oswald", "Arial Narrow", Impact, sans-serif;
  --body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* the logo's zigzag band, redrawn as a tiling SVG */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 30' preserveAspectRatio='none'%3E%3Cpath d='M-6 24 L16 6 L32 24 L48 6 L70 24' fill='none' stroke='%23DA9E35' stroke-width='12' stroke-linecap='butt'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------- fonts
   Carey Type by Steven Achord and Anthony DelRosario, 2018.
   SIL Open Font License 1.1 -- see carey-type-OFL.txt in assets/fonts/, which
   the licence requires we keep alongside the font files. "Carey Type" is a
   Reserved Font Name: we may use and redistribute it as-is, but a modified
   version must be renamed. */
@font-face {
  font-family: "Carey Type";
  src: url("../assets/fonts/carey-type.woff2") format("woff2"),
       url("../assets/fonts/carey-type.woff")  format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.02rem, 0.35vw + 0.95rem, 1.16rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-deep); }

h1, h2, .display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0;
  word-spacing: -0.14em;
  margin: 0 0 0.4em;
}

/* Sub-headings stay in the condensed sans -- six brush-lettered card titles in
   a row shout over each other. */
h3 {
  font-family: var(--ui);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 0.5em;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }

/* --------------------------------------------------------------- eyebrow */
.eyebrow {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 1rem;
}
.on-dark .eyebrow, .eyebrow.light { color: var(--gold-light); }

/* ------------------------------------------------------------------- nav */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--gold);
}
.site-nav .wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 72px;
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: #fff; margin-right: auto; }
.brand img { width: 44px; height: auto; }
.brand-text { font-family: var(--display); line-height: 1.05; }
.brand-text .k { display: block; font-family: var(--ui); font-size: 0.62rem; letter-spacing: 0.3em; color: var(--gold); text-transform: uppercase; }
.brand-text .b { display: block; font-size: 1.4rem; letter-spacing: 0.04em; text-transform: uppercase; }

.nav-links { display: flex; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block;
  padding: 0.55rem 0.85rem;
  color: #E8EDF5;
  font-family: var(--ui);
  font-weight: 400;
  font-size: 0.94rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-links a:hover { background: rgba(218,158,53,0.16); color: #fff; }
.nav-links a[aria-current="page"] { color: var(--navy); background: var(--gold); }

.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 4px;
  color: #fff;
  font-family: var(--ui);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
}

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--navy-deep);
    border-bottom: 3px solid var(--gold);
    padding: 0.5rem var(--gutter) 1rem;
  }
  .site-nav.open .nav-links { display: flex; }
  .nav-links a { padding: 0.85rem 0.25rem; font-size: 1.05rem; }
}

/* ----------------------------------------------------------- chevron band */
.chevron {
  height: 28px;
  background-image: var(--chevron);
  background-size: 64px 28px;
  background-repeat: repeat-x;
}
.chevron.flip { transform: scaleY(-1); }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  color: #fff;
  text-align: center;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem);
  isolation: isolate;
}
/* The campfire is the warmest thing in the painting and the scrim was burying
   it. The overall level is right, so rather than lift the whole image, both
   layers below are masked over the lower left where the fire sits: the picture
   comes up to full there and the scrim thins out. Everywhere else the maths
   works back to the same 0.52 it was before (0.86 x 0.60). */
:root {
  --fire: 34% 42% at 31% 86%;
}

.hero::before {
  /* the painting, dimmed back to atmosphere */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/bulbancha-hero.jpg");
  background-size: cover;
  background-position: 62% 55%;
  opacity: 0.52;
  filter: saturate(1.2);
  z-index: -2;
}

/* The lift depends entirely on the mask. Raising opacity outside this guard
   would leave a browser without mask support showing the whole painting at
   0.86 -- far brighter than intended -- rather than simply missing the
   firelight. Kept together so the two always arrive as a pair. */
@supports (mask-image: radial-gradient(#000, #000)) or (-webkit-mask-image: radial-gradient(#000, #000)) {
  .hero::before {
    opacity: 0.86;
    -webkit-mask-image: radial-gradient(var(--fire), rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.60) 64%, rgba(0,0,0,0.60) 100%);
            mask-image: radial-gradient(var(--fire), rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.60) 64%, rgba(0,0,0,0.60) 100%);
  }

  .hero::after {
    -webkit-mask-image: radial-gradient(var(--fire), rgba(0,0,0,0.44) 0%, rgba(0,0,0,1) 64%, rgba(0,0,0,1) 100%);
            mask-image: radial-gradient(var(--fire), rgba(0,0,0,0.44) 0%, rgba(0,0,0,1) 64%, rgba(0,0,0,1) 100%);
  }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 80% at 50% 8%, rgba(59,35,82,0.28) 0%, rgba(0,22,49,0.42) 45%, rgba(0,22,49,0.88) 100%),
    linear-gradient(180deg, rgba(0,22,49,0.68) 0%, rgba(0,22,49,0.06) 40%, rgba(0,22,49,0.86) 100%);
  z-index: -1;
}
.hero-logo { width: clamp(180px, 26vw, 268px); margin: 0 auto 1.6rem; filter: drop-shadow(0 10px 32px rgba(0,0,0,0.5)); }
.motto {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 8.4vw, 5rem);
  line-height: 0.96;
  text-transform: uppercase;
  letter-spacing: 0;
  word-spacing: -0.16em;
  margin: 0 0 1rem;
  text-shadow: 0 4px 26px rgba(0,0,0,0.45);
}
.motto .amp { color: var(--gold); display: block; }
.hero-sub {
  max-width: 46ch;
  margin: 0 auto 2rem;
  font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.3rem);
  color: #DCE5F0;
}
.hero-note {
  margin-top: 2.4rem;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--ui);
  color: rgba(255,255,255,0.66);
}
.hero-note strong { color: var(--gold-light); font-weight: 500; }
.hero-sub, .hero-note { text-shadow: 0 2px 14px rgba(0,22,49,0.75); }

/* --------------------------------------------------------------- buttons */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }
.btn {
  display: inline-block;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.7rem;
  border-radius: 3px;
  border: 2px solid var(--gold);
  background: var(--gold);
  color: var(--navy);
  transition: transform 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.btn:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy); transform: translateY(-2px); }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.btn.ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn.navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.navy:hover { background: var(--navy-soft); border-color: var(--navy-soft); color: #fff; }

/* -------------------------------------------------------------- sections */
section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.on-dark { background: var(--navy); color: #EDF1F7; }
.on-dark h2, .on-dark h3 { color: #fff; }
.on-dark a { color: var(--gold-light); }
.on-warm { background: var(--cream-warm); }

.section-head { max-width: 760px; margin-bottom: 2.75rem; }
.section-head h2 { font-size: clamp(2rem, 4.5vw, 3rem); text-transform: uppercase; }
.section-head.center { margin-inline: auto; text-align: center; }

.lede { font-size: clamp(1.1rem, 0.7vw + 1rem, 1.34rem); line-height: 1.6; }

/* ----------------------------------------------------------------- cards */
.grid { display: grid; gap: 1.4rem; }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  background: #fff;
  border: 1px solid rgba(0,33,71,0.12);
  border-top: 4px solid var(--gold);
  border-radius: 4px;
  padding: 1.8rem 1.6rem;
  box-shadow: 0 2px 14px rgba(0,33,71,0.06);
}
.card h3 { font-size: 1.5rem; text-transform: uppercase; }
.card p:last-child { margin-bottom: 0; }
.on-dark .card { background: rgba(255,255,255,0.055); border-color: rgba(255,255,255,0.14); }

.glyph {
  width: 66px; height: 66px;
  margin-bottom: 1rem;
  background-color: var(--navy);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.on-dark .glyph { background-color: var(--gold); }
.glyph.sun    { -webkit-mask-image: url("../assets/glyph-sun.png");    mask-image: url("../assets/glyph-sun.png"); }
.glyph.shield { -webkit-mask-image: url("../assets/glyph-shield.png"); mask-image: url("../assets/glyph-shield.png"); }
.glyph.people { -webkit-mask-image: url("../assets/glyph-people.png"); mask-image: url("../assets/glyph-people.png"); }

/* ----------------------------------------------------------- event lists */
.event-list { list-style: none; margin: 0; padding: 0; }
.event-list li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.35rem 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(0,33,71,0.14);
}
.on-dark .event-list li { border-bottom-color: rgba(255,255,255,0.16); }
.event-list li:first-child { border-top: 1px solid rgba(0,33,71,0.14); }
.on-dark .event-list li:first-child { border-top-color: rgba(255,255,255,0.16); }
.event-when {
  font-family: var(--ui);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.92rem;
  color: var(--gold-deep);
  padding-top: 0.15rem;
}
.on-dark .event-when { color: var(--gold-light); }
.event-what { font-weight: 600; }
.event-where { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.95rem; }
.on-dark .event-where { color: rgba(255,255,255,0.68); }

@media (max-width: 560px) {
  .event-list li { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- page header (inner) */
.page-head {
  background: var(--navy);
  color: #fff;
  padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(2.25rem, 5vw, 3.5rem);
  text-align: center;
}
.page-head h1 { font-size: clamp(2.4rem, 6.5vw, 4.2rem); text-transform: uppercase; margin-bottom: 0.35rem; }
.page-head p { max-width: 54ch; margin: 0 auto; color: #CFDAE8; }

/* --------------------------------------------- what-is-bulbancha feature */
.plate {
  position: relative;
  min-height: min(78vh, 680px);
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  padding: clamp(3rem, 8vw, 6rem) 0;
  overflow: hidden;
  isolation: isolate;
}
.plate::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../assets/bulbancha-hero.jpg");
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.plate::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,22,49,0.80) 0%, rgba(0,22,49,0.42) 42%, rgba(0,22,49,0.86) 100%);
  z-index: -1;
}
.plate h1 { margin: 0 0 1.1rem; }
.plate .tiles { --th: clamp(34px, 7.4vw, 76px); }
/* The name page speaks in the sign painter's hand. Carey is ASCII-only -- no
   em dashes, no curly quotes -- so copy set in it has to stay within that, or
   the missing character silently falls back to another font mid-sentence. */
.plate .translation {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 3.1vw, 2.05rem);
  letter-spacing: 0.05em;
  word-spacing: -0.1em;
  color: var(--gold-light);
  margin: 0 0 1.5rem;
  text-shadow: 0 2px 18px rgba(0,0,0,0.7);
}

.plate p.lede {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.02rem, 1.7vw, 1.5rem);
  line-height: 1.34;
  letter-spacing: 0.012em;
  word-spacing: -0.11em;
  max-width: 44ch;
  margin-inline: auto;
}
.plate p.lede { color: #E4EBF4; text-shadow: 0 2px 16px rgba(0,0,0,0.55); }

.credit {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-align: center;
  padding: 0.9rem var(--gutter);
  background: var(--cream-warm);
  margin: 0;
}

/* ------------------------------------------------------------ pull quote */
.pull {
  border-left: 5px solid var(--gold);
  padding: 0.4rem 0 0.4rem 1.6rem;
  margin: 2.25rem 0;
  font-family: var(--ui);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.8vw, 1.85rem);
  line-height: 1.35;
}

/* ---------------------------------------------------------------- callout */
.callout {
  background: var(--navy);
  color: #fff;
  border-radius: 5px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
}
.callout h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); text-transform: uppercase; color: #fff; }
.callout p { color: #D3DEEC; max-width: 52ch; margin-inline: auto; }
.mail {
  font-family: var(--ui);
  font-size: clamp(1.2rem, 3.4vw, 1.9rem);
  letter-spacing: 0.03em;
  color: var(--gold-light);
  text-decoration: none;
  border-bottom: 2px solid rgba(242,196,104,0.45);
}
.mail:hover { color: #fff; border-bottom-color: #fff; }

/* --------------------------------------------------------------- footer */
.site-footer {
  background: var(--navy-deep);
  color: #B9C6D8;
  padding: 3rem 0 2.25rem;
  font-size: 0.95rem;
}
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
.site-footer h4 {
  font-family: var(--ui);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.7rem;
}
.site-footer a { color: #DDE6F2; text-decoration: none; }
.site-footer a:hover { color: var(--gold-light); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.4rem; }
.footer-logo { width: 150px; margin-bottom: 1rem; }
.colophon {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.86rem;
  color: #8FA0B8;
}

/* -------------------------------------------------------- members-area */
.locked {
  text-align: center;
  border: 2px dashed rgba(0,33,71,0.28);
  border-radius: 6px;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: #fff;
}
.locked .glyph { margin-inline: auto; width: 68px; height: 68px; }
.soon {
  display: inline-block;
  font-family: var(--ui);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--navy);
  padding: 0.3rem 0.8rem;
  border-radius: 99px;
  margin-bottom: 1rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--gold);
  color: var(--navy);
  padding: 0.6rem 1rem;
  font-family: var(--ui);
  z-index: 100;
}
.skip-link:focus { left: 0.75rem; top: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ============================================================== interest form
   Markup is complete and labelled; nothing is wired to a backend yet.
   See README for how to point it at Formspree / a Cloudflare Function.
   ========================================================================== */
.form-card {
  background: #fff;
  border: 1px solid rgba(0,33,71,0.14);
  border-top: 4px solid var(--gold);
  border-radius: 5px;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: 0 2px 18px rgba(0,33,71,0.07);
}

.field { margin-bottom: 1.35rem; }
.field label,
.fieldset-legend {
  display: block;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.45rem;
}
/* Inline so it sits beside the label instead of pushing the input out of
   alignment with its neighbour in the same row. */
.field .hint {
  font-family: var(--body);
  font-size: 0.86rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  font-weight: 400;
  margin-left: 0.4rem;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid rgba(0,33,71,0.22);
  border-radius: 4px;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(218,158,53,0.25);
}

.field-row { display: grid; gap: 0 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

fieldset { border: 0; margin: 0 0 1.35rem; padding: 0; }
.check-grid { display: grid; gap: 0.55rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.98rem;
  cursor: pointer;
}
.check input { margin: 0.3rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--navy); flex: none; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.form-actions .btn { border: 0; cursor: pointer; font-family: var(--ui); }
.required { color: var(--gold-deep); }

.form-status {
  margin-top: 1.1rem;
  padding: 0.9rem 1.1rem;
  border-radius: 4px;
  background: var(--cream-warm);
  border-left: 4px solid var(--gold);
  font-size: 0.95rem;
}
.form-status[hidden] { display: none; }

/* honeypot: real people never see it, bots fill it in */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wip {
  display: inline-block;
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(0,33,71,0.08);
  color: var(--navy);
  border: 1px solid rgba(0,33,71,0.2);
  padding: 0.25rem 0.7rem;
  border-radius: 99px;
  margin-bottom: 1rem;
}

/* ------------------------------------------------------- artwork on phones
   `cover` on a tall narrow viewport zooms the 4:3 painting so far in that the
   skyline -- the entire subject -- falls outside the frame, leaving dark trees
   behind a dark scrim. A portrait crop keeps the city, the Superdome, the moon
   and the canoes, and the scrim lifts to match since there is less to fight.
   ========================================================================== */
@media (max-width: 700px) {
  .hero::before,
  .plate::before {
    background-image: url("../assets/bulbancha-hero-portrait.jpg");
    background-position: center 38%;
  }

  /* The phone crop frames the fire differently, and the mask's 0.60 floor
     would claw back the very brightness this breakpoint exists to add. */
  .hero::before {
    opacity: 0.82;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero::after {
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* Keep the top and bottom weighted so the motto and the buttons still have
     something to sit on, but let the middle -- where the skyline is -- clear. */
  .hero::after {
    background:
      radial-gradient(130% 66% at 50% 2%, rgba(59,35,82,0.10) 0%, rgba(0,22,49,0.16) 40%, rgba(0,22,49,0.72) 100%),
      linear-gradient(180deg, rgba(0,22,49,0.54) 0%, rgba(0,22,49,0) 38%, rgba(0,22,49,0.80) 100%);
  }

  .plate::after {
    background: linear-gradient(180deg, rgba(0,22,49,0.74) 0%, rgba(0,22,49,0.24) 40%, rgba(0,22,49,0.82) 100%);
  }

  .hero-sub { text-shadow: 0 2px 14px rgba(0,22,49,0.9), 0 1px 3px rgba(0,22,49,0.8); }
  .hero-note { text-shadow: 0 2px 10px rgba(0,22,49,0.9); }
}

/* ============================================================= members gate
   Note: the gate is cosmetic, not secure. See js/members.js.
   ========================================================================== */
.gate {
  max-width: 460px;
  margin-inline: auto;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(0,33,71,0.14);
  border-top: 4px solid var(--gold);
  border-radius: 5px;
  padding: clamp(1.9rem, 5vw, 3rem);
  box-shadow: 0 2px 18px rgba(0,33,71,0.07);
}
.gate .glyph { margin-inline: auto; width: 62px; height: 62px; }
.gate h2 { font-size: clamp(1.5rem, 3.6vw, 2rem); text-transform: uppercase; }
.gate input[type="password"] {
  width: 100%;
  font: inherit;
  text-align: center;
  letter-spacing: 0.12em;
  background: var(--cream);
  border: 1.5px solid rgba(0,33,71,0.22);
  border-radius: 4px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.9rem;
}
.gate input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(218,158,53,0.25); }
.gate .btn { width: 100%; border: 0; cursor: pointer; }
.gate-error {
  margin: 0.9rem 0 0;
  color: #9B2226;
  font-size: 0.94rem;
}
.gate-error[hidden] { display: none; }
.gate-note { font-size: 0.86rem; color: var(--ink-soft); margin-top: 1.4rem; }

/* ------------------------------------------------------------- to-do board */
.board-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid rgba(0,33,71,0.14);
}
.board-count {
  font-family: var(--ui);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--cream-warm);
  border-radius: 99px;
  padding: 0.3rem 0.9rem;
}
.board-bar .spacer { margin-left: auto; }
.link-btn {
  background: none;
  border: 1.5px solid rgba(0,33,71,0.28);
  border-radius: 4px;
  color: var(--navy);
  font-family: var(--ui);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
}
.link-btn:hover { background: var(--navy); color: #fff; }

.todo-group { margin-bottom: 2.75rem; }
.todo-group h3 {
  font-size: 1.35rem;
  text-transform: uppercase;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--gold);
}
.todo-group > p { color: var(--ink-soft); font-size: 0.96rem; margin-top: 0.75rem; }
.todo-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }

.todo {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid rgba(0,33,71,0.1);
}
.todo input[type="checkbox"] {
  margin: 0.35rem 0 0;
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--navy);
  flex: none;
  cursor: pointer;
}
.todo label { cursor: pointer; }
.todo .note { display: block; font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.15rem; }
.todo.done label { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgba(0,33,71,0.35); }
.todo.done .note { text-decoration: none; }

.flag {
  display: inline-block;
  font-family: var(--ui);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.1rem 0.5rem;
  border-radius: 99px;
  margin-left: 0.5rem;
  vertical-align: 0.12em;
  background: var(--gold);
  color: var(--navy);
}
.flag.first { background: #9B2226; color: #fff; }