/* ============================================================
   THE ANDREWMARK X — Point Break / Pismo Beach 2026
   1991 surf-noir action poster: dusk ocean, poster caps,
   FBI case files, marker annotations, grain + scanlines.
   ============================================================ */

:root {
  --ink:      #07131d;   /* ocean night */
  --dusk-1:   #0b2233;
  --dusk-2:   #14374e;
  --dusk-3:   #1d4a63;
  --sunset:   #ff5a36;   /* coral flare */
  --gold:     #f7a325;
  --pink:     #ff3d68;   /* dusk magenta */
  --aqua:     #2ec4b6;
  --foam:     #eef4f4;   /* off-white */
  --paper:    #f4efe3;   /* case-file manila */
  --paper-ink:#20242a;
  --stamp:    #b3202c;   /* rubber stamp red */
  --hairline: rgba(238,244,244,.14);
}

* { margin:0; padding:0; box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  background:var(--ink);
  color:var(--foam);
  font-family:'Barlow', 'Helvetica Neue', Arial, sans-serif;
  font-size:17px;
  line-height:1.55;
  overflow-x:hidden;
}

/* --- atmosphere: grain + scanlines over everything --- */
body::before {
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
body::after {
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(7,19,29,.09) 3px 4px);
}

a { color:var(--aqua); text-decoration:none; }
a:hover { color:var(--foam); }

img { max-width:100%; }

/* ============ type ============ */
.display, h1.display {
  font-family:'Anton', 'Arial Narrow', sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:.95;
}
.marker { font-family:'Permanent Marker', cursive; }
.dossier { font-family:'Special Elite', 'Courier New', monospace; }

.kicker {
  font-family:'Barlow', sans-serif; font-weight:600;
  font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold);
}

/* ============ layout shell ============ */
.wrap { max-width:1060px; margin:0 auto; padding:0 22px; position:relative; z-index:3; }

/* top nav (gated pages) */
.topbar {
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg, rgba(7,19,29,.96), rgba(7,19,29,.88));
  border-bottom:1px solid var(--hairline);
  backdrop-filter:blur(6px);
}
.topbar-in {
  max-width:1060px; margin:0 auto; padding:10px 22px;
  display:flex; align-items:center; gap:18px;
}
.brand-x {
  font-family:'Anton',sans-serif; font-size:24px; color:var(--foam);
  display:flex; align-items:baseline; gap:8px; text-transform:uppercase;
}
.brand-x .x { color:var(--sunset); font-size:30px; }
.nav-links { display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; }
.nav-links a {
  font-family:'Barlow',sans-serif; font-weight:600; font-size:12.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--foam); padding:8px 12px; border:1px solid transparent;
}
.nav-links a:hover { border-color:var(--hairline); color:var(--gold); }
.nav-links a.on { color:var(--sunset); border-color:rgba(255,90,54,.4); }
.nav-links a.bye { color:var(--aqua); }
.nav-links a.bye .bye-sub {
  font-size:10px; letter-spacing:.14em; opacity:.72; margin-left:6px;
  border-left:1px solid rgba(255,255,255,.22); padding-left:7px;
}

/* golf-tee menu button (mobile) */
.tee-btn {
  display:none; margin-left:auto; background:none; border:1px solid var(--hairline);
  padding:6px 10px 4px; cursor:pointer; line-height:0;
  transition:transform .18s ease;
}
.tee-btn:active { transform:translateY(3px); } /* tee it up */
@media (max-width:700px) {
  .tee-btn { display:block; }
  .nav-links {
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; margin-left:0;
    background:rgba(7,19,29,.98); border-bottom:1px solid var(--hairline);
  }
  .nav-links a { padding:14px 22px; border-top:1px solid rgba(238,244,244,.07); font-size:13px; letter-spacing:.2em; }
  .topbar.open .nav-links { display:flex; }
}

/* ============ hero (login + dashboard) ============ */
.hero {
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 520px at 50% -80px, rgba(255,61,104,.28), transparent 60%),
    radial-gradient(900px 420px at 78% 10%, rgba(247,163,37,.20), transparent 55%),
    linear-gradient(180deg, #241436 0%, #4a1e3e 22%, #8f2f43 40%, #d8503a 55%, #14374e 74%, var(--ink) 100%);
}
.hero .sun {
  position:absolute; left:50%; top:118px; transform:translateX(-50%);
  width:210px; height:210px; border-radius:50%;
  background:radial-gradient(circle, #ffd9a0 0%, var(--gold) 45%, var(--sunset) 78%, transparent 79%);
  filter:blur(1px); opacity:.9;
}
.hero .sun::after {
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, transparent 0 14px, rgba(36,20,54,.55) 14px 20px);
  border-radius:50%;
}
.hero-waves { position:absolute; left:0; right:0; bottom:-2px; }
.hero-waves svg { display:block; width:100%; height:170px; }

.hero-in {
  position:relative; z-index:4; text-align:center;
  padding:86px 20px 150px;
}
.hero-in .kicker { color:#ffd9a0; text-shadow:0 1px 0 rgba(0,0,0,.4); }
.hero-title {
  font-family:'Anton',sans-serif; text-transform:uppercase;
  font-size:clamp(52px, 11vw, 128px); line-height:.92; color:var(--foam);
  text-shadow:0 4px 0 rgba(7,19,29,.35), 0 14px 40px rgba(7,19,29,.5);
  margin:14px 0 6px;
}
.hero-title .tx { color:var(--sunset); -webkit-text-stroke:2px var(--foam); text-stroke:2px var(--foam); }
.hero-sub {
  font-family:'Barlow',sans-serif; font-weight:600; letter-spacing:.42em;
  text-transform:uppercase; font-size:clamp(11px,2.4vw,15px); color:var(--foam); opacity:.92;
}
.hero-tag {
  display:inline-block; margin-top:22px;
  font-family:'Permanent Marker',cursive; font-size:clamp(17px,3vw,24px);
  color:#ffe3b0; transform:rotate(-2deg);
}

/* staggered load-in */
.rise { opacity:0; transform:translateY(18px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.rise.d1{ animation-delay:.08s } .rise.d2{ animation-delay:.2s }
.rise.d3{ animation-delay:.34s } .rise.d4{ animation-delay:.5s }
@keyframes rise { to { opacity:1; transform:none; } }

/* ============ login card ============ */
.gate-card {
  max-width:400px; margin:-92px auto 70px; position:relative; z-index:5;
  background:var(--paper); color:var(--paper-ink);
  border:1.5px solid #20242a;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 2px 0 #20242a;
  transform:rotate(-.6deg);
}
.gate-card .tab {
  position:absolute; top:-15px; left:22px;
  background:var(--stamp); color:#fff;
  font-family:'Barlow',sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.3em; text-transform:uppercase; padding:4px 12px;
  transform:rotate(-1.2deg);
}
.gate-card-in { padding:34px 30px 30px; }
.gate-card h2 {
  font-family:'Special Elite', monospace; font-size:19px; font-weight:400;
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px;
}
.gate-card p.small { font-family:'Special Elite',monospace; font-size:13.5px; color:#4c5258; margin-bottom:18px; }

.field-label {
  display:block; font-family:'Barlow',sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.26em; text-transform:uppercase; color:#4c5258; margin:0 0 6px 2px;
}
input.gate-input {
  width:100%; padding:13px 14px; font-size:19px; letter-spacing:.06em;
  font-family:'Special Elite',monospace;
  background:#fffdf6; color:var(--paper-ink);
  border:1.5px solid #20242a; border-radius:0; outline:none;
}
input.gate-input:focus { border-color:var(--sunset); box-shadow:3px 3px 0 rgba(255,90,54,.35); }
input.gate-input.code { text-align:center; font-size:28px; letter-spacing:.42em; }

.btn-x {
  display:block; width:100%; margin-top:16px; padding:14px 18px;
  font-family:'Anton',sans-serif; font-size:17px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--ink); color:var(--foam);
  border:1.5px solid var(--ink); border-radius:0; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-x:hover { background:var(--sunset); color:var(--ink); border-color:var(--ink);
  transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }
.btn-x:active { transform:none; box-shadow:none; }

.gate-note { margin-top:14px; font-family:'Special Elite',monospace; font-size:12.5px; color:#6a7178; }
.gate-err {
  margin-bottom:14px; padding:10px 12px;
  background:#fbe6e2; border:1.5px dashed var(--stamp);
  font-family:'Special Elite',monospace; font-size:13.5px; color:var(--stamp);
}

/* ============ sections / cards ============ */
.section { padding:56px 0 8px; }
.section-head { display:flex; align-items:baseline; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.section-head h2 {
  font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(26px,4.6vw,40px);
  color:var(--foam); letter-spacing:.02em;
}
.section-head .marker { color:var(--sunset); font-size:16px; transform:rotate(-2deg); }
.rule-x { flex:1; height:1px; background:var(--hairline); min-width:60px; }

.card-x {
  background:linear-gradient(180deg, var(--dusk-1), rgba(11,34,51,.6));
  border:1px solid var(--hairline);
  padding:26px 26px 22px; margin-bottom:22px; position:relative;
}
.card-x h3 { font-family:'Anton',sans-serif; text-transform:uppercase; font-size:21px; margin-bottom:12px; color:var(--gold); }
.card-x ul { margin:8px 0 8px 20px; }
.card-x li { margin-bottom:6px; }
.card-x .tbd {
  display:inline-block; font-family:'Permanent Marker',cursive; color:var(--pink);
  border:1.5px dashed var(--pink); padding:2px 10px; transform:rotate(-1.4deg); font-size:14px;
}

/* case file (paper) card */
.case-file {
  background:var(--paper); color:var(--paper-ink);
  border:1.5px solid #20242a; box-shadow:0 14px 34px rgba(0,0,0,.4);
  padding:24px 24px 20px; margin-bottom:26px; position:relative;
}
.case-file:nth-child(odd) { transform:rotate(-.35deg); }
.case-file:nth-child(even) { transform:rotate(.3deg); }
.case-file .stamp {
  position:absolute; top:14px; right:14px;
  font-family:'Barlow',sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--stamp); border:2px solid var(--stamp);
  padding:3px 9px; transform:rotate(6deg); opacity:.85;
}
.case-file h3 { font-family:'Special Elite',monospace; font-weight:400; font-size:20px; text-transform:uppercase; }
.case-file .meta { font-family:'Special Elite',monospace; font-size:13px; color:#5b6167; margin:2px 0 10px; }
.case-file p { font-family:'Special Elite',monospace; font-size:14.5px; line-height:1.6; }

/* ============ player dossier grid ============ */
.roster { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:22px; margin-bottom:40px; }
.dossier-card {
  background:var(--paper); color:var(--paper-ink); border:1.5px solid #20242a;
  box-shadow:0 12px 28px rgba(0,0,0,.42); position:relative;
  transition:transform .15s ease, box-shadow .15s ease;
}
.dossier-card:hover { transform:translateY(-4px) rotate(-.4deg); box-shadow:0 20px 40px rgba(0,0,0,.55); }
.dossier-card .mug {
  height:230px; overflow:hidden; border-bottom:1.5px solid #20242a;
  background:#0b2233; position:relative;
}
.dossier-card .mug img { width:100%; height:100%; object-fit:cover; filter:saturate(.92) contrast(1.04); }
.dossier-card .mug .no-photo {
  display:flex; align-items:center; justify-content:center; height:100%;
  font-family:'Special Elite',monospace; color:#5b7488; font-size:13px; letter-spacing:.2em;
}
.dossier-card .mug::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 62%, rgba(7,19,29,.32));
}
.dossier-body { padding:14px 16px 16px; }
.dossier-body h3 { font-family:'Anton',sans-serif; font-size:19px; text-transform:uppercase; letter-spacing:.02em; }
.dossier-body .aka { font-family:'Permanent Marker',cursive; color:var(--sunset); font-size:14px; margin:1px 0 8px; }
.dossier-body .stat-line {
  font-family:'Special Elite',monospace; font-size:12.5px; color:#4c5258;
  border-top:1px dashed #9aa0a6; padding-top:8px; margin-top:8px;
}
.badge-champ {
  display:inline-block; font-family:'Barlow',sans-serif; font-weight:600;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  background:var(--gold); color:var(--ink); padding:2px 8px; margin-right:5px;
}
.badge-go, .badge-paid {
  display:inline-block; font-family:'Barlow',sans-serif; font-weight:600;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  padding:2px 8px; margin-right:5px;
}
.badge-go   { background:var(--aqua); color:var(--ink); }
.badge-paid { background:var(--ink);  color:var(--foam); border:1px solid var(--aqua); }
.badge-dorsia { /* bone. and the lettering is something called Silian Rail. */
  display:inline-block; font-family:'Barlow',sans-serif; font-weight:600;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  background:#f4efe3; color:#20242a; border:1px solid #c9c2b2;
  padding:2px 8px; margin-right:5px;
}
.dossier-card.pending { opacity:.62; filter:saturate(.55); }
.dossier-card.pending:hover { opacity:1; filter:none; }
.dossier-card.mvp { border:2px solid var(--gold); box-shadow:0 0 0 4px rgba(247,163,37,.15), 0 12px 28px rgba(0,0,0,.42); }

/* ============ history timeline ============ */
.timeline { position:relative; margin:10px 0 50px; }
.timeline::before {
  content:""; position:absolute; left:17px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--sunset), var(--dusk-3));
}
.epoch { position:relative; padding:0 0 30px 56px; }
.epoch .dot {
  position:absolute; left:6px; top:4px; width:24px; height:24px; border-radius:50%;
  background:var(--ink); border:2px solid var(--sunset);
  font-family:'Anton',sans-serif; font-size:11px; color:var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.epoch h3 { font-family:'Anton',sans-serif; text-transform:uppercase; font-size:22px; color:var(--foam); }
.epoch .epoch-meta { font-family:'Barlow',sans-serif; font-weight:600; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--aqua); margin:2px 0 8px; }
.epoch .epoch-body { color:#c8d4d8; font-size:15.5px; max-width:640px; }
.epoch .champ { font-family:'Permanent Marker',cursive; color:var(--gold); font-size:15px; margin-top:6px; }
.epoch a.arch {
  display:inline-block; margin-top:8px; font-family:'Barlow',sans-serif; font-weight:600;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sunset); border:1px solid rgba(255,90,54,.45); padding:5px 12px;
}
.epoch a.arch:hover { background:var(--sunset); color:var(--ink); }

/* ============ tables (admin) ============ */
table.x-table { width:100%; border-collapse:collapse; margin-bottom:26px; font-size:14.5px; }
.x-table th {
  font-family:'Barlow',sans-serif; font-weight:600; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); text-align:left;
  border-bottom:1px solid var(--hairline); padding:8px 10px;
}
.x-table td { padding:8px 10px; border-bottom:1px solid rgba(238,244,244,.07); vertical-align:middle; }
.x-table input[type=text], .x-table input[type=tel] {
  width:100%; padding:7px 9px; font-size:14px; font-family:'Barlow',sans-serif;
  background:#0b2233; color:var(--foam); border:1px solid var(--hairline); border-radius:0;
}
.x-table input:focus { border-color:var(--aqua); outline:none; }
.btn-mini {
  font-family:'Barlow',sans-serif; font-weight:600; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; background:var(--sunset); color:var(--ink);
  border:none; padding:7px 14px; cursor:pointer;
}
.btn-mini.ghost { background:transparent; color:var(--aqua); border:1px solid var(--hairline); }
.btn-mini:hover { filter:brightness(1.1); }

.flash-ok, .flash-err {
  padding:11px 14px; margin:18px 0; font-size:14px; font-weight:600;
  font-family:'Barlow',sans-serif; letter-spacing:.04em;
}
.flash-ok  { background:rgba(46,196,182,.12); border:1px solid var(--aqua); color:var(--aqua); }
.flash-err { background:rgba(255,61,104,.1); border:1px solid var(--pink); color:var(--pink); }

/* ============ minimal-poster touches ============ */
.billing {
  font-family:'Barlow',sans-serif; font-weight:600; font-size:10px;
  letter-spacing:.3em; text-transform:uppercase; color:rgba(238,244,244,.66);
  transform:scaleY(1.5); transform-origin:center top; line-height:1.9;
  max-width:680px; margin:26px auto 0; text-align:center;
}
.expres { text-align:center; }
.expres img { width:100%; max-width:560px; display:block; margin:0 auto; }
.expres .cast {
  font-family:'Barlow',sans-serif; font-weight:600; font-size:10px;
  letter-spacing:.42em; text-transform:uppercase; color:var(--gold);
  margin-top:2px;
}
.expres .cast-sub { font-family:'Permanent Marker',cursive; color:var(--aqua); font-size:15px; margin-top:8px; }
.club-board { max-width:560px; margin:26px auto 0; }
.club-board .row-x {
  display:flex; align-items:baseline; gap:12px; padding:8px 4px;
  border-bottom:1px solid rgba(238,244,244,.08); font-size:15.5px;
}
.club-board .row-x .nm { color:var(--foam); }
.club-board .row-x .dots { flex:1; border-bottom:1px dotted rgba(238,244,244,.25); }
.club-board .row-x .ct { font-family:'Anton',sans-serif; color:var(--gold); font-size:17px; letter-spacing:.06em; }

/* ============ footer ============ */
.foot {
  margin-top:60px; padding:34px 22px 46px; text-align:center;
  border-top:1px solid var(--hairline);
  background:linear-gradient(180deg, transparent, rgba(11,34,51,.5));
}
.foot .marker { color:var(--aqua); font-size:16px; }
.foot .fine { font-size:12px; color:#6d8391; margin-top:8px; letter-spacing:.12em; text-transform:uppercase; font-family:'Barlow',sans-serif; font-weight:600; }

@media (max-width:640px) {
  .hero-in { padding:64px 16px 130px; }
  .hero .sun { top:96px; width:150px; height:150px; }
  .gate-card { margin-top:-80px; }
  .topbar-in { padding:10px 14px; gap:10px; }
}