/* =========================================================
   Pup-Up Studio — site stylesheet
   One file. Edit tokens below; everything inherits.
   ========================================================= */

:root{
  /* ---- Brand colours. Do not add new ones without a reason. ---- */
  --ink:      #10323C;   /* near-black teal. All body text. */
  --ink-soft: #4A6870;   /* secondary text */
  --sun:      #FFC21F;   /* primary accent. Buttons, event ticket. */
  --surf:     #0E6F73;   /* deep teal. Inverted sections. */
  --punch:    #E8467C;   /* hot pink. Sparingly: bullets, highlights, focus. */
  --paper:    #FFFCF4;   /* page background */
  --sand:     #F2E9D8;   /* placeholder blocks, subtle fills */
  --line:     #DCCFB8;   /* hairlines */

  --max: 1140px;
  --pad: 24px;
  --radius: 16px;
}

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

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

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Instrument Sans", system-ui, -apple-system, sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* Display face = Anton. Matches the printed collateral. */
h1,h2,h3,.disp{
  font-family:"Anton", "Instrument Sans", sans-serif;
  font-weight:400;
  line-height:1.03;
  letter-spacing:.005em;
}

p{ margin:0 0 1rem }
p:last-child{ margin-bottom:0 }
a{ color:inherit }
img{ max-width:100%; display:block }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad) }
.narrow{ max-width:760px }

:focus-visible{ outline:3px solid var(--punch); outline-offset:3px; border-radius:2px }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--sun);
  padding:12px 18px; z-index:100; text-decoration:none; font-weight:600;
}
.skip:focus{ left:8px; top:8px }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:1rem;
  padding:15px 28px; border-radius:999px;
  border:2px solid var(--ink); background:var(--sun); color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s, box-shadow .12s;
}
.btn:hover,.btn:focus-visible{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink) }
.btn.ghost{ background:transparent; box-shadow:none }
.btn.ghost:hover{ background:var(--sand); transform:none }
.btn.dark{ background:var(--ink); color:var(--sun); box-shadow:none }
.btn.dark:hover{ background:#081F26; transform:none }
.btn.wide{ width:100%; text-align:center }

/* ---------------------------------------------------------
   Nav  (duplicated in every page — change all of them together)
   --------------------------------------------------------- */
.nav{ border-bottom:2px solid var(--ink); background:var(--paper); position:sticky; top:0; z-index:30 }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:14px; padding-bottom:14px }
.logo{ font-family:"Anton",sans-serif; font-size:1.35rem; letter-spacing:.01em; text-decoration:none; line-height:1; white-space:nowrap;
       display:inline-flex; align-items:center; gap:10px }
.logo img{ height:40px; width:auto; flex:none }
/* Wordmark sits to the right of the logo mark, styled like the logo artwork:
   PUP-UP heavy and condensed, STUDIO light and spaced out. All caps on purpose. */
.wordmark{ display:inline-flex; align-items:baseline; gap:.4em; white-space:nowrap; color:var(--ink) }
.wordmark b{ font-family:"Anton",sans-serif; font-weight:400; letter-spacing:.05em }
.wordmark span{ font-family:"Instrument Sans",sans-serif; font-weight:400; font-size:.78em; letter-spacing:.2em }
.logo.big{ font-size:1.9rem; gap:14px }
.logo.big img{ height:58px }
.navlinks{ display:flex; align-items:center; gap:26px }
.navlinks a{ text-decoration:none; font-weight:500; font-size:.96rem }
.navlinks a:hover{ color:var(--surf) }
.navlinks a[aria-current="page"]{ box-shadow:inset 0 -3px 0 var(--punch) }
.nav .btn{ padding:10px 20px; font-size:.92rem; box-shadow:3px 3px 0 var(--ink) }

/* ---------------------------------------------------------
   Sections
   --------------------------------------------------------- */
.sec{ padding:76px 0; border-bottom:2px solid var(--ink) }
.sec.tight{ padding:52px 0 }
.sec h2{ font-size:clamp(2rem,4.2vw,3rem); max-width:20ch; margin-bottom:36px }
.sec .intro{ font-size:1.1rem; max-width:60ch; margin-top:-20px; margin-bottom:36px; color:var(--ink-soft) }

.sec.dark{ background:var(--surf); color:var(--paper) }
.sec.dark h2{ color:var(--paper) }
.sec.dark a{ color:var(--sun) }

.page-head{ padding:66px 0 44px; border-bottom:2px solid var(--ink) }
.page-head h1{ font-size:clamp(2.5rem,6.5vw,4.2rem); max-width:16ch }
.page-head p{ font-size:1.15rem; max-width:58ch; margin-top:20px; color:var(--ink-soft) }

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{ padding:72px 0 56px; border-bottom:2px solid var(--ink) }
.hero .wrap{ display:grid; grid-template-columns:1.12fr .88fr; gap:56px; align-items:start }
.hero h1{ font-size:clamp(3rem,7.4vw,5.4rem) }
.hero .lede{ font-size:1.2rem; max-width:32ch; margin-top:26px; color:var(--ink-soft) }
.hero .lede strong{ color:var(--ink); font-weight:600 }

/* ---------------------------------------------------------
   Event ticket  (populated from data/events.json by site.js)
   --------------------------------------------------------- */
.ticket{
  background:var(--sun); border:2px solid var(--ink); border-radius:18px;
  padding:28px 26px 26px; box-shadow:8px 8px 0 var(--ink); position:relative;
}
.ticket::before,.ticket::after{
  content:""; position:absolute; width:26px; height:26px; background:var(--paper);
  border:2px solid var(--ink); border-radius:50%; top:50%; margin-top:-13px;
}
.ticket::before{ left:-15px; clip-path:inset(0 0 0 50%) }
.ticket::after{ right:-15px; clip-path:inset(0 50% 0 0) }
.ticket .lbl{ font-weight:600; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:12px }
.ticket .venue{ font-family:"Anton",sans-serif; font-size:1.95rem; line-height:1.04; letter-spacing:.01em }
.ticket .when{ font-size:1.05rem; font-weight:500; margin:9px 0 0 }
.ticket .slots{
  display:inline-block; margin:16px 0 18px; background:var(--punch); color:#fff;
  font-weight:600; font-size:.9rem; padding:6px 14px; border-radius:999px;
}
.ticket .fine{ font-size:.85rem; margin:13px 0 0; opacity:.78 }

@media (prefers-reduced-motion:no-preference){
  .ticket{ animation:settle .55s cubic-bezier(.2,.8,.3,1) both .15s }
  @keyframes settle{ from{ transform:translateY(-14px) rotate(-2.5deg); opacity:0 } to{ transform:none; opacity:1 } }
}

/* Event list rows (events.html) */
.evlist{ display:flex; flex-direction:column; gap:18px }
.evrow{
  border:2px solid var(--ink); border-radius:var(--radius); padding:24px 26px;
  display:flex; gap:24px; align-items:center; flex-wrap:wrap;
}
.evrow.next{ background:var(--sun); box-shadow:6px 6px 0 var(--ink) }
.evrow .d{ flex:1; min-width:220px }
.evrow h3{ font-size:1.5rem; margin-bottom:5px }
.evrow .meta{ font-size:.98rem; font-weight:500 }
.evrow .sub{ font-size:.92rem; color:var(--ink-soft); margin-top:5px }
.evrow.next .sub{ color:#5A4A14 }
.evrow.full{ background:var(--sand); opacity:.75 }

/* ---------------------------------------------------------
   Photo placeholders — swap for real <img> as you shoot
   --------------------------------------------------------- */
.strip{ display:grid; grid-template-columns:repeat(4,1fr); border-bottom:2px solid var(--ink) }
.ph{
  aspect-ratio:4/5; background:var(--sand); border-right:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:20px; font-size:.82rem; font-weight:500; color:var(--ink-soft);
  background-image:repeating-linear-gradient(45deg,transparent,transparent 11px,rgba(16,50,60,.045) 11px,rgba(16,50,60,.045) 22px);
}
.ph:last-child{ border-right:0 }

/* ---------------------------------------------------------
   Numbered steps — only for genuine sequences
   --------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; counter-reset:s }
.step{ counter-increment:s; padding-top:18px; border-top:3px solid var(--ink) }
.step::before{
  content:counter(s); display:block; font-family:"Anton",sans-serif;
  font-size:2.6rem; line-height:1; color:var(--punch); margin-bottom:10px;
}
.step h3{ font-size:1.16rem; margin-bottom:8px; line-height:1.2 }
.step p{ font-size:.96rem; color:var(--ink-soft) }

/* ---------------------------------------------------------
   Q&A (objection handling)
   --------------------------------------------------------- */
.qa{ max-width:760px }
.qa > div{ padding:22px 0; border-top:1px solid rgba(255,252,244,.28) }
.qa > div:last-child{ border-bottom:1px solid rgba(255,252,244,.28) }
.qa dt{ font-family:"Anton",sans-serif; font-size:1.26rem; margin-bottom:6px; letter-spacing:.01em }
.qa dd{ font-size:1.02rem; color:rgba(255,252,244,.87) }
/* light variant for /faq */
.qa.light > div{ border-top-color:var(--line) }
.qa.light > div:last-child{ border-bottom-color:var(--line) }
.qa.light dd{ color:var(--ink-soft) }

/* ---------------------------------------------------------
   Pricing tiers
   --------------------------------------------------------- */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch }
.tier{
  border:2px solid var(--ink); border-radius:var(--radius); padding:28px;
  display:flex; flex-direction:column; background:var(--paper);
}
.tier.feature{ background:var(--sun); box-shadow:8px 8px 0 var(--ink) }
.tier .tag{
  font-weight:600; font-size:.76rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--punch); margin-bottom:10px; min-height:1.1em;
}
.tier h3{ font-size:1.5rem }
.tier .price{ font-family:"Anton",sans-serif; font-size:3rem; line-height:1; margin:14px 0 16px }
.tier .who{ font-size:.9rem; color:var(--ink-soft); font-style:italic; margin-bottom:18px }
.tier.feature .who{ color:#5A4A14 }
.tier ul{ list-style:none; margin-bottom:24px; font-size:.97rem }
.tier li{ padding:7px 0 7px 24px; position:relative; border-top:1px solid var(--line) }
.tier li:first-child{ border-top:0 }
.tier.feature li{ border-top-color:rgba(16,50,60,.2) }
.tier li::before{ content:""; position:absolute; left:2px; top:15px; width:9px; height:9px; background:var(--punch); border-radius:50% }
.tier .btn{ margin-top:auto; text-align:center }

/* Add-on table */
.addons{ width:100%; border-collapse:collapse; max-width:640px; margin-top:8px }
.addons td{ padding:11px 0; border-top:1px solid var(--line); font-size:1rem }
.addons tr:first-child td{ border-top:0 }
.addons td:last-child{ text-align:right; font-weight:600; white-space:nowrap }

/* ---------------------------------------------------------
   Charity band
   --------------------------------------------------------- */
.band{ background:var(--punch); color:#fff; text-align:center; padding:54px 0; border-bottom:2px solid var(--ink) }
.band p{ font-family:"Anton",sans-serif; font-size:clamp(1.6rem,3.6vw,2.4rem); line-height:1.1; max-width:24ch; margin:0 auto }
.band small{ display:block; margin-top:14px; font-family:"Instrument Sans",sans-serif; font-weight:500; font-size:.95rem; opacity:.88 }

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
.twocol{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center }
form{ display:flex; flex-direction:column; gap:12px; max-width:440px }
label{ font-weight:600; font-size:.9rem; display:block; margin-bottom:5px }
input,textarea,select{
  font:inherit; font-size:1rem; width:100%; padding:14px 16px;
  border:2px solid var(--ink); border-radius:11px; background:#fff; color:var(--ink);
}
textarea{ min-height:120px; resize:vertical }
input::placeholder,textarea::placeholder{ color:#9AA9AD }
form .btn{ align-self:flex-start; margin-top:4px }
.note{ font-size:.95rem; font-weight:600; min-height:1.4em; margin-top:8px }
.hp{ position:absolute; left:-9999px }   /* honeypot */

/* ---------------------------------------------------------
   Prose blocks (about, faq intro)
   --------------------------------------------------------- */
.prose{ max-width:62ch }
.prose p{ margin-bottom:1.15rem }
.prose h3{ font-size:1.45rem; margin:2.2rem 0 .7rem }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.foot{ padding:46px 0 60px; font-size:.92rem; color:var(--ink-soft) }
.foot .wrap{ display:flex; flex-wrap:wrap; gap:14px 32px; justify-content:space-between; align-items:center }
.foot a{ color:var(--ink); font-weight:500 }
@media (max-width:400px){
  .logo{ font-size:1.1rem; gap:8px }
  .logo img{ height:32px }
  .wordmark span{ letter-spacing:.12em }
  .logo.big{ font-size:1.6rem; gap:12px }
  .logo.big img{ height:50px }
}

/* ---------------------------------------------------------
   Inline icons (Instagram, email) — no icon library, no
   third-party request. Plain SVG, coloured via currentColor.
   --------------------------------------------------------- */
.iconlink{ display:inline-flex; align-items:center; gap:.4em }
.iconlink .ic{
  width:1.05em; height:1.05em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; gap:40px }
  .steps{ grid-template-columns:1fr 1fr; gap:28px }
  .tiers{ grid-template-columns:1fr }
  .tier.feature{ box-shadow:5px 5px 0 var(--ink) }
  .strip{ grid-template-columns:1fr 1fr }
  .ph:nth-child(2){ border-right:0 }
  .twocol{ grid-template-columns:1fr; gap:32px }
  .sec{ padding:56px 0 }
  .navlinks{ display:none }
}
@media (max-width:540px){
  .hero{ padding:48px 0 40px }
  .steps{ grid-template-columns:1fr }
  .evrow{ padding:20px }
}

/* ---------------------------------------------------------
   Event pages + events index  (pages written by build.js)
   --------------------------------------------------------- */
[hidden]{ display:none !important }

.ticket .venue a{ text-decoration:none }
.ticket .venue a:hover{ text-decoration:underline }
.ticket .when + .btn{ margin-top:18px }
.ticket .fine a{ font-weight:600 }

.evrow h3 a{ text-decoration:none }
.evrow h3 a:hover{ text-decoration:underline }
.evrow.cancelled{ background:var(--sand) }
.evrow.cancelled h3{ text-decoration:line-through }

.ev-head{ padding:40px 0 48px; border-bottom:2px solid var(--ink) }
.ev-when{ font-weight:600; font-size:1.08rem; margin-bottom:12px }
.ev-head h1{ font-size:clamp(2.4rem,7vw,4.2rem); max-width:18ch }
.ev-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:28px }
.ev-slots{ font-weight:600 }
.ev-sub{ color:var(--ink-soft); margin-top:16px; max-width:60ch }
.ev-notice{
  margin-top:24px; max-width:60ch; padding:16px 20px; font-weight:500;
  background:var(--sand); border:2px solid var(--ink); border-radius:var(--radius);
}

.ev-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start }
.ev-grid h2{ margin-bottom:22px }
.ev-photo{
  width:100%; aspect-ratio:3/2; object-fit:cover; margin-top:24px; background:var(--sand);
  border:2px solid var(--ink); border-radius:var(--radius);
}

.facts{ margin-top:22px; max-width:640px }
.facts > div{ display:grid; grid-template-columns:7rem 1fr; gap:4px 16px; padding:11px 0; border-top:1px solid var(--line) }
.facts > div:first-child{ border-top:0 }
.facts dt{ font-weight:600 }
.facts dd{ color:var(--ink-soft) }

.cal-links{ display:flex; flex-wrap:wrap; gap:12px }

.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.gallery img{ width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--sand); border:2px solid var(--ink); border-radius:12px }

@media (max-width:900px){
  .ev-grid{ grid-template-columns:1fr; gap:44px }
  .gallery{ grid-template-columns:1fr 1fr }
}
@media (max-width:540px){
  .ev-head{ padding:28px 0 36px }
  .ev-actions .btn{ width:100%; text-align:center }
  .facts > div{ grid-template-columns:1fr }
}

/* Photos in the strip (home, full sessions) — same frame as the .ph blocks they replace */
.strip img{
  width:100%; height:100%; aspect-ratio:4/5; object-fit:cover;
  background:var(--sand); border-right:2px solid var(--ink);
}
.strip img:last-child{ border-right:0 }
@media (max-width:900px){
  .strip img:nth-child(2){ border-right:0 }
}

/* Calendly's booking page inside the event page (settings.bookingEmbed) */
#book{ scroll-margin-top:70px }
.booking-frame{
  max-width:760px; background:#fff; overflow:hidden;
  border:2px solid var(--ink); border-radius:var(--radius); box-shadow:4px 4px 0 var(--ink);
}
.booking-frame iframe{ display:block; width:100%; height:820px; border:0 }
.booking-alt{ font-size:.92rem; color:var(--ink-soft); margin-top:18px }
@media (max-width:540px){
  .booking-frame iframe{ height:760px; height:min(760px, 88svh) }
}