/* ===========================================================================
   Forever Sandy VB
   Neumorphic: one warm sand ground everywhere, and everything on the page is
   either pushed OUT of it or pressed INTO it. That only works if the shadow
   colors are the ground lightened and darkened — so ground, highlight and
   shadow live together in three variables, and any block that wants a
   different color (the Pay panel) re-declares all three and every component
   inside it re-shades itself for free.
   =========================================================================== */

:root {
  /* Ground + the two lights that make the extrusion read. Pulled off the team
     shirt: its blue washed almost to white, so white is the highlight and a
     blue-grey is the shadow. */
  --ground:   #E3EDF5;
  --paper:    #FFFFFF;
  --shade:    #AFC3D5;

  --ink:      #0F2A40;
  --ink-70:   rgba(15, 42, 64, 0.72);
  --ink-45:   rgba(15, 42, 64, 0.48);
  --ink-25:   rgba(15, 42, 64, 0.24);

  /* The shirt is one blue; the badge is white and navy. Everything on the page
     is those three, so tints and depth do the work color usually would. */
  --sea:      #0E90C6;   /* the shirt itself — fills, dots, never small text */
  --sea-ink:  #0A6E99;   /* the same blue, dark enough to read as text        */
  --navy:     #0F2A40;

  /* The one color from outside the kit: the AVP OPTX ball. Reserved for the
     ball and for tournaments, so it always means "game day". */
  --optx:     #F2CE1E;
  --optx-ink: #8A6408;

  --lift:     7px 7px 15px var(--shade), -7px -7px 15px var(--paper);
  --lift-sm:  4px 4px 9px var(--shade), -4px -4px 9px var(--paper);
  --lift-lg:  14px 14px 30px var(--shade), -12px -12px 26px var(--paper);
  --sink:     inset 5px 5px 11px var(--shade), inset -5px -5px 11px var(--paper);
  --sink-sm:  inset 3px 3px 7px var(--shade), inset -3px -3px 7px var(--paper);

  --r:        22px;
  --r-sm:     14px;
  --wrap:     1160px;
  --pad:      clamp(18px, 5vw, 44px);
  --ease:     cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grain. Sand should feel like sand, not like plastic. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ type */
.display {
  font-family: "Outfit", "Plus Jakarta Sans", sans-serif;
  font-weight: 800; letter-spacing: -.03em; line-height: .98; text-wrap: balance;
  margin: 0;
}
h1.display { font-size: clamp(34px, 6.4vw, 66px); }
/* Three words can carry far more size than the two-line headline it replaced.
   Matches h1.display's specificity, or that rule above wins and nothing moves. */
h1.hero-h1 { font-size: clamp(40px, 7.4vw, 88px); letter-spacing: -.04em; }
.h2 { font-size: clamp(28px, 4.4vw, 46px); margin-bottom: 14px; }
.ink-sea { color: var(--sea-ink); }

.eyebrow {
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 700; color: var(--sea-ink); margin: 0 0 12px;
}
.lede { font-size: clamp(15px, 1.5vw, 18px); color: var(--ink-70); max-width: 34em; margin: 0 0 26px; }
.note { font-size: 13.5px; color: var(--ink-45); margin: 8px 0 0; }
.ttl { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.01em; margin: 0 0 6px; }
a { color: var(--sea-ink); text-decoration: none; }

/* ---------------------------------------------------------------- layout */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.sec { position: relative; padding: clamp(52px, 8vw, 96px) 0; }
.sec-sea { background: radial-gradient(120% 80% at 50% 0%, rgba(14,144,198,.13), transparent 68%); }
.stack { display: grid; gap: 16px; }
.rule { border: 0; height: 1px; background: var(--ink-25); opacity: .4; margin: 22px 0; }

/* Wave breaks between sections, straight off the badge artwork. */
.tide { line-height: 0; color: var(--sea); opacity: .22; }
.tide svg { width: 100%; height: 46px; display: block; fill: currentColor; }
.tide.flip svg { transform: scaleY(-1); }

/* ------------------------------------------------------------- the shell */
.card {
  background: var(--ground);
  border-radius: var(--r);
  box-shadow: var(--lift);
  padding: clamp(18px, 3vw, 26px);
}
.card-coach { box-shadow: var(--lift), inset 0 0 0 2px rgba(14,144,198,.42); }

/* -------------------------------------------------------------- controls */
.btn, .nub {
  font: inherit; font-weight: 600; color: var(--ink);
  background: var(--ground); border: 0; cursor: pointer;
  border-radius: 999px; box-shadow: var(--lift-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; transition: box-shadow .18s var(--ease), transform .18s var(--ease), color .18s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover, .nub:hover { box-shadow: var(--lift); }
.btn:active, .nub:active { box-shadow: var(--sink-sm); transform: translateY(1px); }
.btn:focus-visible, .nub:focus-visible { outline: 3px solid var(--sea-ink); outline-offset: 3px; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-go { color: var(--sea-ink); box-shadow: var(--lift-sm), inset 0 0 0 2px rgba(14,144,198,.5); }
.btn-go:hover { box-shadow: var(--lift), inset 0 0 0 2px rgba(14,144,198,.68); }
.btn[disabled] { opacity: .45; cursor: default; box-shadow: var(--sink-sm); }
.nub { padding: 10px; border-radius: 50%; }
.nub-txt { font-size: 14px; }
#coachBtn { border-radius: 999px; padding: 9px 15px; }
#coachBtn.on { color: var(--sea-ink); box-shadow: var(--sink-sm); }

input, select, textarea {
  font: inherit; color: var(--ink); width: 100%;
  background: var(--ground); border: 0; border-radius: var(--r-sm);
  box-shadow: var(--sink-sm); padding: 12px 15px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--sea-ink); outline-offset: 2px; }
label.fld { display: block; margin: 0 0 12px; }
label.fld > span { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-70); margin: 0 0 6px; letter-spacing: .01em; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ------------------------------------------------------------------ head */
.bar {
  position: sticky; top: 0; z-index: 800;
  display: flex; align-items: center; gap: 16px;
  padding: 10px var(--pad);
  background: var(--ground);
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 6px 18px -12px var(--shade);
}
.bar-id { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.bar-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: var(--lift-sm); }
.bar-id span { display: grid; line-height: 1.15; }
.bar-id b { font-family: "Outfit", sans-serif; font-size: 16px; letter-spacing: -.01em; }
.bar-id i { font-style: normal; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45); }
.bar-nav { display: flex; gap: 4px; margin-left: auto; }
.bar-nav a {
  padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-70);
  transition: box-shadow .18s var(--ease), color .18s;
}
.bar-nav a:hover { color: var(--ink); box-shadow: var(--lift-sm); }
@media (max-width: 880px) { .bar-nav { display: none; } .bar-id { margin-right: auto; } }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; padding: clamp(30px, 6vw, 62px) 0 clamp(48px, 8vw, 90px); overflow: hidden; }
.dune {
  position: absolute; inset: -20% -10% auto; height: 150%;
  /* The washes haven't finished fading at the element's edge, so without this
     the block ends in a visible horizontal seam across the page. */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 88%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 88%);
  background:
    radial-gradient(60% 55% at 20% 10%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(72% 62% at 84% 28%, rgba(14,144,198,.22), transparent 70%),
    radial-gradient(55% 52% at 55% 98%, rgba(15,42,64,.10), transparent 70%);
  pointer-events: none;
}
/* Copy on the left, the photo on the right; stacked on a phone. */
.hero-in {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(26px, 5vw, 60px); align-items: center;
}
.hero-badge {
  width: clamp(84px, 11vw, 116px); aspect-ratio: 1; border-radius: 50%;
  background: var(--ground); box-shadow: var(--lift-lg);
  display: grid; place-items: center; padding: 8px; margin: 0 0 22px;
}
.hero-shot {
  margin: 0; border-radius: clamp(22px, 3vw, 34px); overflow: hidden;
  box-shadow: var(--lift-lg); background: var(--ground);
}
.hero-shot img { width: 100%; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
/* h1 runs at line-height .98, so the lede needs its own gap or it collides. */
.hero-copy .lede { margin-top: 20px; }
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; gap: 30px; }
  .hero-shot img { aspect-ratio: 3 / 2; }
}
.hero-badge img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
.hero-do { display: flex; flex-wrap: wrap; gap: 12px; }

.ball-float { position: absolute; pointer-events: none; opacity: .9; }
.b1 { width: 92px; height: 92px; right: 4%; top: 6%; animation: bob 7s ease-in-out infinite; }
.b2 { width: 54px; height: 54px; right: 21%; top: 52%; opacity: .55; animation: bob 9s ease-in-out infinite reverse; }
@keyframes bob { 50% { transform: translateY(-20px) rotate(16deg); } }
@media (max-width: 760px) { .ball-float { display: none; } }
@media (prefers-reduced-motion: reduce) { .ball-float { animation: none; } html { scroll-behavior: auto; } }


/* --------------------------------------------------------- session cards */
.sess { display: grid; grid-template-columns: 96px 1fr; gap: clamp(14px, 3vw, 26px); align-items: start; }
.sess-when {
  text-align: center; border-radius: var(--r-sm); box-shadow: var(--sink-sm); padding: 12px 6px;
}
.sess-when .dow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-45); font-weight: 700; }
.sess-when .num { font-family: "Outfit", sans-serif; font-size: 30px; font-weight: 800; line-height: 1.05; }
.sess-when .mon { font-size: 12px; color: var(--ink-45); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.sess-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 4px; }
.sess h3 { font-family: "Outfit", sans-serif; font-size: clamp(19px, 2.4vw, 24px); font-weight: 700; margin: 0; letter-spacing: -.015em; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ink-70); margin: 6px 0 0; }
.meta b { font-weight: 600; }

.pill {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; box-shadow: var(--sink-sm);
}
.pill-beach { color: var(--navy); }
.pill-jr { color: var(--sea-ink); }
.pill-tour { color: var(--optx-ink); }
.pill-now { color: var(--sea-ink); box-shadow: var(--sink-sm), inset 0 0 0 2px rgba(14,144,198,.4); }
.pill-off { color: var(--ink-45); text-decoration: line-through; }

/* check-in row */
.checkin { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--ink-25); }
.checkin-ttl { font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-45); margin: 0 0 11px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: 0;
  background: var(--ground); color: var(--ink-70); border-radius: 999px; padding: 10px 17px;
  box-shadow: var(--lift-sm); display: inline-flex; align-items: center; gap: 8px;
  transition: box-shadow .18s var(--ease), color .18s;
}
.chip:hover { box-shadow: var(--lift); }
.chip:focus-visible { outline: 3px solid var(--sea-ink); outline-offset: 3px; }
.chip.in { box-shadow: var(--sink-sm); color: var(--sea-ink); }
.chip .tick { opacity: 0; transition: opacity .18s; }
.chip.in .tick { opacity: 1; }
.roster { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 0; }
.name {
  font-size: 13px; font-weight: 600; color: var(--ink-70);
  padding: 5px 12px; border-radius: 999px; box-shadow: var(--sink-sm);
  display: inline-flex; align-items: center; gap: 7px;
}
.name .x { background: none; border: 0; cursor: pointer; color: var(--ink-25); padding: 0; line-height: 0; }
.name .x:hover { color: var(--sea-ink); }
.count { font-size: 13.5px; font-weight: 700; color: var(--sea-ink); }
.empty { font-size: 14px; color: var(--ink-45); font-style: italic; }

/* ----------------------------------------------------------- the calendar */
.cal-head { display: flex; align-items: center; gap: 16px; margin: 0 0 12px; }
.cal-title { font-family: "Outfit", sans-serif; font-size: 21px; font-weight: 700; margin: 0; min-width: 190px; }
.cal-key { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--ink-70); margin: 0 0 16px; }
.cal-key span { display: inline-flex; align-items: center; gap: 7px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-beach { background: var(--navy); } .dot-jr { background: var(--sea); } .dot-tour { background: var(--optx); }

.cal { padding: clamp(12px, 2vw, 18px); }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(4px, .9vw, 8px); }
.cal-dow span { text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-45); padding: 0 0 8px; letter-spacing: .1em; }
.cal-cell {
  aspect-ratio: 1; border: 0; background: var(--ground); cursor: pointer; font: inherit;
  border-radius: clamp(10px, 1.6vw, 15px); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; color: var(--ink-70);
  transition: box-shadow .16s var(--ease), color .16s;
}
.cal-cell.blank { visibility: hidden; }
.cal-cell.has { box-shadow: var(--lift-sm); color: var(--ink); font-weight: 700; }
.cal-cell:hover.has { box-shadow: var(--lift); }
.cal-cell.sel { box-shadow: var(--sink-sm); color: var(--sea-ink); }
.cal-cell.today { outline: 2px solid var(--sea); outline-offset: -2px; }
.cal-cell:focus-visible { outline: 3px solid var(--sea-ink); outline-offset: 2px; }
.cal-n { font-size: clamp(13px, 1.8vw, 16px); line-height: 1; }
.cal-dots { display: flex; gap: 3px; height: 6px; }
.cal-dots i { width: 5px; height: 5px; border-radius: 50%; }

/* Tap a day: on a desktop it opens in the column beside the calendar; on a
   phone, where there is no room beside anything, it opens as a sheet. */
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 22px; align-items: start; }
.day-panel { display: grid; gap: 14px; position: sticky; top: 92px; }
.day-panel .sess h3 { font-size: 19px; }
/* In the day column and the day sheet the heading already carries the date, so
   the card drops its date block and its own shell — no card inside a card. */
.sess-bare { grid-template-columns: 1fr; }
.sheet .sess-bare { box-shadow: none; padding: 0; }
/* Stripped of their card shell, stacked sessions need a rule between them or
   the second one's title reads as part of the first one's details. */
.sheet .sess-bare + .sess-bare { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ink-25); }
.sheet .sess-top { margin-bottom: 8px; }
.day-hint {
  text-align: center; padding: 34px 22px; border-radius: var(--r);
  box-shadow: var(--sink-sm); color: var(--ink-45); font-size: 14px;
}
.day-hint b { display: block; color: var(--ink-70); font-family: "Outfit", sans-serif; font-size: 16px; margin: 0 0 4px; }
@media (max-width: 980px) {
  .cal-wrap { grid-template-columns: 1fr; }
  .day-panel { display: none; }
}

/* recurring editor rows */
.rec-list { display: grid; gap: 10px; margin: 0 0 14px; }
.rec {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 15px; border-radius: var(--r-sm); box-shadow: var(--sink-sm); font-size: 14px;
}
.rec .grow { flex: 1; min-width: 150px; }
.rec b { font-weight: 700; }

/* ----------------------------------------------------------------- shots */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 16px; margin: 22px 0 0; }
.shot { position: relative; border-radius: var(--r); box-shadow: var(--lift); overflow: hidden; background: var(--ground); }
.shot img { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: zoom-in; }
.shot figcaption { padding: 11px 14px; font-size: 13px; color: var(--ink-70); }
.shot figcaption b { display: block; color: var(--ink); font-weight: 600; }
.shot .kill {
  position: absolute; top: 9px; right: 9px; width: 30px; height: 30px; border-radius: 50%;
  border: 0; cursor: pointer; background: var(--ground); color: var(--sea-ink);
  box-shadow: var(--lift-sm); display: grid; place-items: center;
}
.up-status { font-size: 14px; font-weight: 600; color: var(--sea-ink); text-align: center; }

.lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(15,42,64,.9);
  display: grid; place-items: center; padding: 20px; backdrop-filter: blur(6px);
}
.lightbox img { max-height: 78vh; max-width: min(94vw, 900px); border-radius: 16px; }
.lightbox figcaption { color: #F4EFE6; text-align: center; font-size: 14px; margin: 14px 0 0; }
.lb-x { position: absolute; top: 18px; right: 18px; }

/* ------------------------------------------------------------------ gear */
.gear-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 18px; }
.item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.price { font-family: "Outfit", sans-serif; font-weight: 800; font-size: 22px; color: var(--sea-ink); }
.sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.size {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; border: 0; background: var(--ground);
  color: var(--ink-70); min-width: 44px; padding: 9px 12px; border-radius: 12px; box-shadow: var(--lift-sm);
  transition: box-shadow .16s var(--ease), color .16s;
}
.size:hover { box-shadow: var(--lift); }
.size.on { box-shadow: var(--sink-sm); color: var(--sea-ink); }
.size:focus-visible { outline: 3px solid var(--sea-ink); outline-offset: 3px; }
.tally { font-size: 13px; color: var(--ink-45); margin: 12px 0 0; }
.mine { margin: 18px 0 0; }
.sheet-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ink-25); font-size: 14px; }
.sheet-row:last-child { border: 0; }
.sheet-row .grow { flex: 1; }
.qty { font-family: "Outfit", sans-serif; font-weight: 800; color: var(--sea-ink); }

/* ------------------------------------------------------------------- pay */
/* Re-declare the three ground variables and the whole component kit reshades. */
.sec-deep {
  --ground: #123A56; --paper: #1B5075; --shade: #0A2639;
  --ink: #EAF3F9; --ink-70: rgba(234,243,249,.78); --ink-45: rgba(234,243,249,.56); --ink-25: rgba(234,243,249,.28);
  --sea-ink: #8FD3F4; --optx-ink: #F2CE1E; --navy: #EAF3F9;
  /* These have to be redeclared wherever the ground changes. A custom property
     whose value contains var() is substituted where it is DECLARED, so the
     copies inherited from :root still carry the light palette's white
     highlight — which is why dark cards were getting a white halo. */
  --lift:     7px 7px 15px var(--shade), -7px -7px 15px var(--paper);
  --lift-sm:  4px 4px 9px var(--shade), -4px -4px 9px var(--paper);
  --lift-lg:  14px 14px 30px var(--shade), -12px -12px 26px var(--paper);
  --sink:     inset 5px 5px 11px var(--shade), inset -5px -5px 11px var(--paper);
  --sink-sm:  inset 3px 3px 7px var(--shade), inset -3px -3px 7px var(--paper);
  background: var(--ground); color: var(--ink);
  margin: clamp(52px, 8vw, 96px) var(--pad) 0; border-radius: clamp(26px, 4vw, 40px);
  padding: clamp(38px, 6vw, 76px) 0;
}
.sec-deep .eyebrow { color: var(--sea-ink); }
.pay-wrap { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.pay-cards { display: grid; gap: 14px; max-width: 430px; }
.pay-card { display: flex; align-items: center; gap: 15px; padding: 16px 18px; border-radius: var(--r); box-shadow: var(--lift-sm); }
.pay-mark { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; box-shadow: var(--sink-sm); font-family: "Outfit", sans-serif; font-weight: 800; font-size: 17px; }
.pay-card .grow { flex: 1; min-width: 0; }
.pay-card small { display: block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-45); font-weight: 700; }
.pay-card b { font-family: "Outfit", sans-serif; font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
.pay-art { display: grid; place-items: center; }
.pay-ball { width: clamp(120px, 18vw, 210px); aspect-ratio: 1; filter: drop-shadow(10px 16px 24px rgba(4,20,33,.5)); }
@media (max-width: 820px) { .pay-wrap { grid-template-columns: 1fr; } .pay-art { display: none; } }

/* ------------------------------------------------------------------ foot */
.foot { padding: clamp(40px, 6vw, 70px) 0 30px; }
.foot-in { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot-logo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: var(--lift-sm); }
.foot-name { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 17px; margin: 0; }
.foot-in .btn { margin-left: auto; }
.stamp { text-align: center; font-size: 12px; color: var(--ink-25); margin: 34px 0 0; }

/* ----------------------------------------------------------------- modal */
.veil {
  position: fixed; inset: 0; z-index: 1000; background: rgba(15,42,64,.44);
  backdrop-filter: blur(5px); display: grid; place-items: center; padding: 18px; overflow: auto;
}
.sheet { position: relative; width: min(520px, 100%); max-height: 90vh; overflow: auto; box-shadow: var(--lift-lg); }
.sheet-x { position: absolute; top: 14px; right: 14px; }
.sheet .ttl { padding-right: 44px; }
.sheet-do { display: flex; gap: 10px; margin: 20px 0 0; }
.sheet-do .btn { flex: 1; }

/* ----------------------------------------------------------------- toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 1100;
  background: var(--ink); color: #F6F2E9; padding: 13px 22px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; box-shadow: 0 14px 34px -12px rgba(31,48,64,.7);
}

@media (max-width: 620px) {
  /* :not() matters — a bare card has no date block, so giving it a first
     column would squeeze all its text into 74px. */
  .sess:not(.sess-bare) { grid-template-columns: 74px 1fr; }
  .sess-when .num { font-size: 25px; }
}


/* ======================================================= tournament cards */
.tour-grid { display: grid; gap: 16px; }
.tour-card {
  display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: clamp(14px, 3vw, 24px);
  color: var(--ink); transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.tour-card:hover { box-shadow: var(--lift-lg); transform: translateY(-2px); }
.tour-when {
  text-align: center; border-radius: var(--r-sm); box-shadow: var(--sink-sm); padding: 12px 6px; display: grid;
}
.tour-when .dow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45); font-weight: 700; }
.tour-when .num { font-family: "Outfit", sans-serif; font-size: 28px; font-weight: 800; line-height: 1.05; }
.tour-when .mon { font-size: 12px; color: var(--ink-45); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.tour-body h3 { font-family: "Outfit", sans-serif; font-size: clamp(18px, 2.3vw, 23px); font-weight: 700; margin: 0 0 4px; letter-spacing: -.015em; }
.tour-go { color: var(--sea-ink); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; box-shadow: var(--lift-sm); }
@media (max-width: 560px) {
  .tour-card { grid-template-columns: 66px 1fr; }
  .tour-go { display: none; }
}

/* ================================================== the tournament page */
.t-page { position: relative; padding: clamp(24px, 4vw, 44px) 0 clamp(50px, 7vw, 90px); overflow: hidden; }
/* .dune is absolutely positioned, so it paints above static in-flow content.
   The content column has to be positioned too or the wash covers the heading. */
.t-page .wrap { position: relative; }
.back {
  display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600;
  color: var(--ink-70); margin: 0 0 22px; padding: 9px 16px 9px 12px; border-radius: 999px;
  box-shadow: var(--lift-sm); transition: box-shadow .18s var(--ease);
}
.back:hover { box-shadow: var(--lift); color: var(--ink); }
.t-name { font-size: clamp(30px, 5.4vw, 54px); margin: 0 0 26px; }
.t-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 14px; margin: 0 0 22px; }
.fact { padding: 16px 18px; border-radius: var(--r); box-shadow: var(--sink-sm); }
.fact small { display: block; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-45); font-weight: 700; margin: 0 0 5px; }
.fact b { font-family: "Outfit", sans-serif; font-size: 17px; font-weight: 700; line-height: 1.25; }
.t-block { margin: 0 0 16px; }
.t-block .ttl { margin-bottom: 10px; }

/* ============================================================== albums */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 18px; }
.album {
  font: inherit; text-align: left; border: 0; background: none; cursor: pointer; color: var(--ink);
  display: grid; gap: 12px; padding: 0;
}
.album-cover {
  position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r);
  box-shadow: var(--lift); overflow: hidden; background: var(--ground);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.album:hover .album-cover { box-shadow: var(--lift-lg); transform: translateY(-2px); }
.album:focus-visible .album-cover { outline: 3px solid var(--sea-ink); outline-offset: 3px; }
.album-cover img { width: 100%; height: 100%; object-fit: cover; }
.album-blank { display: grid; place-items: center; color: var(--ink-25); box-shadow: var(--sink-sm); }
.album-count {
  position: absolute; right: 10px; bottom: 10px; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; background: var(--ground); color: var(--ink-70); box-shadow: var(--lift-sm);
}
.album-new .album-cover { box-shadow: var(--sink-sm); }
.album-meta { display: grid; gap: 2px; padding: 0 4px; }
.album-meta b { font-family: "Outfit", sans-serif; font-size: 16px; font-weight: 700; }
.album-meta i { font-style: normal; font-size: 13px; color: var(--ink-45); }

.album-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.album-head .grow { flex: 1; min-width: 160px; }
.shot-load { aspect-ratio: 1; border-radius: var(--r); box-shadow: var(--sink-sm); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .shot-load { animation: none; } }

/* ================================================================ gear */
.gear-type {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sea-ink); padding: 4px 11px; border-radius: 999px; box-shadow: var(--sink-sm); margin: 8px 0 0;
}
.swatch-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 0; }
.swatch { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-70); font-weight: 600; }
.swatch i { width: 15px; height: 15px; border-radius: 50%; box-shadow: var(--lift-sm), inset 0 0 0 1px rgba(15,42,64,.14); }


/* A file input must stay in the layout to be reliably clickable in phone
   webviews — display:none ones are flaky — so clip it instead of hiding it. */
.vis-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
#albumView.dropping { outline: 3px dashed var(--sea); outline-offset: 10px; border-radius: var(--r); }


/* ============================================================= team chats */
.sec-tight { padding: clamp(40px, 6vw, 70px) 0; }
.chat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; align-items: stretch; }
.chat-card {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  padding: 18px 20px; border-radius: var(--r); box-shadow: var(--lift); background: var(--ground);
}
.chat-card .wa {
  width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center;
  box-shadow: var(--sink-sm); color: #1FA855;    /* WhatsApp's own green, on its mark only */
}
.chat-card .grow { flex: 1; min-width: 130px; display: grid; gap: 2px; }
.chat-card small {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-45); font-weight: 700;
}
.chat-card b { font-family: "Outfit", sans-serif; font-size: 17px; font-weight: 700; line-height: 1.2; }
.chat-row > .btn { justify-self: start; align-self: center; }
@media (max-width: 420px) { .chat-card .btn { width: 100%; } }