/* ============================================================
   Big Dog Club — club site (production)
   "Premium Sticker" system: warm paper + ink + one hit of yellow
   + the hard-shadow press from the real hand-finished tags.
   ============================================================ */

:root {
  --ink:#191919; --ink-70:rgba(25,25,25,.70); --ink-45:rgba(25,25,25,.45);
  --paper:#FBF7EC; --cream:#FFF6C6; --yellow:#FFE94A;
  --pink:#FF7AC8; --green:#9CFF7A; --blue:#80E0FF; --gold:#B8893A;
  --shadow:6px 6px 0 var(--ink); --shadow-lg:10px 10px 0 var(--ink); --shadow-press:2px 2px 0 var(--ink);
  --border:3px solid var(--ink); --radius:18px; --radius-lg:26px;
  --maxw:1080px; --gap:clamp(20px,4vw,40px);
  --font-display:"Anton","Arial Narrow","Arial Black",system-ui,sans-serif;
  --font-text:"Inter",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --accent:#FFE94A; /* yellow base; cycles through 90s Solo-cup colors via accentCycle */
}
/* Animatable accent: the yellow accents drift through vintage 90s Solo-cup red/blue/green.
   @property lets a custom prop animate; browsers without it just keep the static yellow above. */
@property --accent { syntax:'<color>'; inherits:true; initial-value:#FFE94A; }
@keyframes accentCycle {
  0%,100% { --accent:#FFE94A; } /* Solo yellow */
  25%     { --accent:#EF4136; } /* Solo red   */
  50%     { --accent:#4F9CD9; } /* Solo blue  */
  75%     { --accent:#5DBB63; } /* Solo green */
}
body { animation:accentCycle 18s linear infinite; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background-color:var(--paper);
  background-image:radial-gradient(circle at 1px 1px, rgba(25,25,25,.035) 1px, transparent 0);
  background-size:4px 4px; color:var(--ink); font-family:var(--font-text);
  font-size:17px; line-height:1.6; letter-spacing:.01em; overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; }
.wrap { width:min(100% - 2*var(--gap), var(--maxw)); margin-inline:auto; }

.display { font-family:var(--font-display); font-weight:400; line-height:.86; letter-spacing:-.01em; text-transform:uppercase; }
.eyebrow { font-weight:800; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-70); }
.lead { font-size:clamp(18px,2.4vw,22px); line-height:1.5; }

/* Buttons — tactile press */
.btn {
  --btn-bg:var(--accent); display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px;
  text-decoration:none; background:var(--btn-bg); color:var(--ink); border:var(--border); border-radius:14px;
  padding:14px 22px; font-weight:800; font-size:18px; box-shadow:var(--shadow);
  transition:transform .06s var(--ease), box-shadow .06s var(--ease); cursor:pointer; font-family:var(--font-text);
}
.btn .sub { font-weight:600; font-size:13px; opacity:.8; letter-spacing:.02em; }
.btn:hover { transform:translate(-1px,-1px); box-shadow:7px 7px 0 var(--ink); }
.btn:active { transform:translate(2px,2px); box-shadow:var(--shadow-press); }
.btn--pink{--btn-bg:var(--pink);} .btn--ghost{--btn-bg:var(--paper);} .btn--green{--btn-bg:var(--green);} .btn--blue{--btn-bg:var(--blue);}
.btn-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }

/* Masthead + nav */
.masthead { position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:var(--border); }
.masthead .wrap { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; }
.mark { display:flex; align-items:center; gap:10px; text-decoration:none; }
.mark__paw { width:34px; height:34px; flex:none; background:var(--accent); border:2.5px solid var(--ink); border-radius:9px; display:grid; place-items:center; box-shadow:3px 3px 0 var(--ink); }
.mark__paw svg { width:18px; height:18px; }
.mark__word { font-family:var(--font-display); font-size:19px; letter-spacing:.02em; text-transform:uppercase; }
.nav { display:flex; align-items:center; gap:18px; }
.nav a { text-decoration:none; font-weight:700; font-size:14px; letter-spacing:.02em; }
.nav a:hover { background:var(--accent); }
.nav .pill { border:2px solid var(--ink); border-radius:999px; padding:4px 11px; background:var(--blue); box-shadow:2px 2px 0 var(--ink); white-space:nowrap; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.nav__links { display:none; gap:16px; }

/* Hero */
.hero { padding:clamp(36px,7vw,76px) 0 clamp(30px,6vw,60px); }
.hero .wrap { display:grid; grid-template-columns:1.05fr .95fr; gap:var(--gap); align-items:center; }
.hero__badge { display:inline-flex; align-items:center; gap:8px; border:var(--border); border-radius:999px; padding:7px 15px; background:var(--cream); box-shadow:var(--shadow-press); font-weight:800; font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px; }
.hero__badge .num { font-family:var(--font-display); color:var(--gold); letter-spacing:.04em; }
.hero h1 { margin:0; font-size:clamp(72px,17vw,168px); }
.hero__tag { font-family:var(--font-display); font-size:clamp(22px,3.4vw,34px); line-height:1; margin:14px 0 0; }
.hero__tag em { font-style:normal; background:var(--accent); padding:0 6px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.hero__intro { margin:22px 0 0; max-width:46ch; color:var(--ink-70); }

/* Photo placeholder system (no fabricated imagery) */
.photo { position:relative; margin:0; border:var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--cream); box-shadow:var(--shadow-lg); }
.photo--portrait{aspect-ratio:4/5;} .photo--wide{aspect-ratio:16/10;} .photo--square{aspect-ratio:1/1;}
.photo__img { width:100%; height:100%; object-fit:cover; }
.photo__ph { position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:22px; background-color:var(--cream); background-image:repeating-linear-gradient(45deg, rgba(25,25,25,.04) 0 12px, transparent 12px 24px); }
.photo.is-empty .photo__ph { display:flex; } .photo.is-empty .photo__img { display:none; }
.photo__ph .cam { width:40px; height:40px; opacity:.7; }
.photo__ph .lbl { font-weight:800; font-size:14px; letter-spacing:.14em; text-transform:uppercase; }
.photo__ph .spec { font-size:13px; color:var(--ink-70); max-width:26ch; }
.photo__ph .file { font-family:ui-monospace,Menlo,monospace; font-size:12px; background:var(--ink); color:var(--paper); padding:3px 8px; border-radius:6px; }
.photo__corner { position:absolute; top:12px; left:12px; z-index:2; background:var(--ink); color:var(--paper); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:7px; }

/* Sections */
section.band { padding:clamp(40px,7vw,88px) 0; border-top:var(--border); }
.section-head { display:flex; align-items:baseline; gap:14px; margin-bottom:clamp(22px,4vw,40px); flex-wrap:wrap; }
.section-head h2 { font-family:var(--font-display); font-size:clamp(34px,6vw,64px); margin:0; line-height:.9; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:center; }
.prose p { margin:0 0 16px; } .prose p:last-child { margin-bottom:0; }

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }
.step { border:var(--border); border-radius:var(--radius); background:var(--paper); padding:20px; box-shadow:var(--shadow); }
.step__n { font-family:var(--font-display); font-size:30px; color:var(--gold); line-height:1; }
.step h3 { margin:8px 0 6px; font-size:19px; } .step p { margin:0; font-size:15px; color:var(--ink-70); }

.pack-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
.member { border:var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--cream); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; }
.member__photo { border:none; border-bottom:var(--border); border-radius:0; box-shadow:none; }
.member__body { padding:20px 22px 22px; }
.member__no { font-family:var(--font-display); color:var(--gold); font-size:16px; letter-spacing:.08em; }
.member__name { font-family:var(--font-display); font-size:clamp(30px,5vw,44px); margin:2px 0 6px; line-height:.9; }
.member__meta { color:var(--ink-70); font-size:15px; margin:0 0 16px; }
.member--reserved { background:var(--paper); border-style:dashed; box-shadow:none; align-items:center; justify-content:center; text-align:center; min-height:240px; padding:30px; }
.member--reserved .member__no { font-size:22px; } .member--reserved p { color:var(--ink-45); max-width:26ch; margin:10px auto 0; }

/* Dog-gotchi teaser block on home */
.gotchi-teaser { display:grid; grid-template-columns:1.1fr .9fr; gap:var(--gap); align-items:center; border:var(--border); border-radius:var(--radius-lg); background:var(--blue); box-shadow:var(--shadow-lg); padding:clamp(24px,4vw,40px); }
.gotchi-teaser h2 { font-family:var(--font-display); font-size:clamp(30px,5vw,52px); margin:0 0 10px; line-height:.9; }
.gotchi-teaser p { margin:0 0 18px; max-width:42ch; }
.gotchi-teaser .glyphbox { font-size:clamp(80px,18vw,150px); text-align:center; line-height:1; filter:drop-shadow(6px 6px 0 var(--ink)); }

/* Join */
.join { background:var(--ink); color:var(--paper); border-radius:var(--radius-lg); padding:clamp(28px,5vw,56px); box-shadow:var(--shadow-lg); }
.join h2 { font-family:var(--font-display); font-size:clamp(32px,6vw,58px); margin:0 0 10px; line-height:.9; color:var(--paper); }
.join p { color:rgba(251,247,236,.75); max-width:48ch; margin:0 0 22px; }
.join form { display:flex; gap:12px; flex-wrap:wrap; }
.join input[type=email] { flex:1 1 240px; min-width:0; padding:15px 18px; font-size:17px; font-family:var(--font-text); border:3px solid var(--paper); border-radius:14px; background:transparent; color:var(--paper); }
.join input::placeholder { color:rgba(251,247,236,.5); }
.join .btn { box-shadow:6px 6px 0 var(--accent); } .join .btn:active { box-shadow:2px 2px 0 var(--accent); }
.join__note { font-size:13px; color:rgba(251,247,236,.6); margin:16px 0 0; }

/* Footer */
.foot { border-top:var(--border); padding:36px 0 60px; }
.foot .wrap { display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; justify-content:space-between; }
.foot__links { display:flex; flex-wrap:wrap; gap:8px 20px; }
.foot__links a { font-weight:700; text-decoration:none; border-bottom:2px solid var(--accent); }
.foot__links a:hover { background:var(--accent); }
.foot__fine { font-size:13px; color:var(--ink-70); } .foot__fine strong { color:var(--ink); }

/* Reveal motion */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity:1; transform:none; }
@keyframes nudge { 0%,100%{transform:rotate(-2deg);} 50%{transform:rotate(2deg);} }
.mark__paw { animation:nudge 6s var(--ease) infinite; }

/* Responsive */
@media (min-width:760px){ .nav__links{display:flex;} }
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;} .hero__media{order:-1; max-width:420px;}
  .two-col{grid-template-columns:1fr;} .steps{grid-template-columns:1fr;}
  .pack-grid{grid-template-columns:1fr;} .gotchi-teaser{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;} .reveal{opacity:1; transform:none; transition:none;}
  .mark__paw{animation:none;} .btn{transition:none;}
  body{animation:none;} /* freeze accent on static yellow */
}