/* ==========================================================================
   SM Bazaar — landing page
   Palette sampled directly from the logo and comms artwork.
   ========================================================================== */

:root{
  /* Brand — straight from the logo */
  --ink:#081E21;
  --red:#F31818;
  --red-deep:#C2140B;      /* logo red, darkened to pass contrast on cream */
  --coral:#F9503C;         /* the arc + headline colour from the poster */
  --marigold:#FACB14;
  --orange:#FC700C;
  --teal:#05A591;
  --teal-deep:#05756A;     /* readable teal on light backgrounds */
  --blue:#0379C5;

  /* From the comms artwork */
  --amber:#F8A808;
  --amber-ray:#F7B424;
  --amber-deep:#8A4A00;
  --purple:#380058;
  --purple-lift:#4B0A70;

  /* Surfaces */
  --cream:#FFF9EC;
  --cream-2:#FFF3D6;
  --white:#FFFFFF;
  --line:#E9DEC4;
  --line-strong:#D8C89F;
  --muted:#7A7466;
  --body-text:#4A4338;

  --danger:#B23A3A;
  --danger-tint:#FBEAEA;

  /* Galindo is a display face with a single weight (400). Every rule using it
     sets font-weight:400 explicitly — otherwise headings, which are bold by
     default, get synthesised fake-bold and look smeared. */
  --display:"Galindo","Arial Narrow",Impact,system-ui,sans-serif;
  --body:"Anek Tamil",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --nav-h:64px;
  --wrap:1100px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* height:auto is load-bearing: the hero logo carries width/height attributes
   (they reserve space and stop the page jumping while it loads), and without
   this the browser honours that fixed height while CSS shrinks the width,
   stretching the image. Rules that set an explicit height, like .sponsor img,
   are more specific and still win. */
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--red-deep); }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }
section{ scroll-margin-top:var(--nav-h); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   Sticky nav
   -------------------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:50;
  height:var(--nav-h);
  background:rgba(255,249,236,0.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav-logo{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.nav-logo img{ height:42px; width:auto; }
.nav-logo span{
  font-family:var(--display); font-weight:400; font-size:16px; letter-spacing:0.05em;
  color:var(--ink); text-transform:uppercase;
}
.nav-links{ display:flex; align-items:center; gap:24px; }
.nav-links a{
  font-size:14px; font-weight:600; color:var(--ink); text-decoration:none;
}
.nav-links a:hover{ color:var(--red-deep); }
.nav-cta{
  background:var(--red-deep); color:#fff !important;
  padding:10px 18px; border-radius:999px;
  font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap;
}
.nav-cta:hover{ background:#A81009; }

@media (max-width:820px){
  .nav-links a:not(.nav-cta){ display:none; }
  .nav-logo span{ display:none; }
}

/* --------------------------------------------------------------------------
   Hero — CSS sunburst, content left, logo right
   -------------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 62% 46%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 48%),
    repeating-conic-gradient(from 0deg at 62% 46%,
      var(--amber) 0deg 2.6deg, var(--amber-ray) 2.6deg 5.2deg),
    var(--amber);
  padding:52px 0 56px;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(var(--amber-ray) 26%, transparent 27%);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(ellipse 60% 58% at 62% 46%, transparent 52%, #000 100%);
  mask-image:radial-gradient(ellipse 60% 58% at 62% 46%, transparent 52%, #000 100%);
  opacity:0.8; pointer-events:none;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr 0.95fr;
  gap:36px; align-items:center;
}
/* Organiser crests sit on a white card, the way they do on the printed poster —
   the gold marks would disappear against the amber otherwise. */
.presented{
  display:inline-flex; flex-direction:column; align-items:center; gap:7px;
  background:var(--white);
  border-radius:14px;
  padding:11px 22px 13px;
  margin-bottom:22px;
  box-shadow:0 4px 14px rgba(80,40,0,0.13);
}
.presented-label{
  font-size:10px; font-weight:800; letter-spacing:0.17em;
  text-transform:uppercase; color:var(--muted);
}
.presented-logos{ display:flex; align-items:center; gap:20px; }
.presented-logos img{ height:58px; width:auto; }

@media (max-width:860px){
  .presented-logos img{ height:50px; }
}

.hero-eyebrow{
  font-family:var(--display); font-weight:400;
  font-size:clamp(16px,2.6vw,22px); letter-spacing:0.09em;
  color:var(--amber-deep); text-transform:uppercase;
}
.hero-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(42px,7.4vw,84px); line-height:0.94; letter-spacing:0.01em;
  color:var(--red-deep); text-transform:uppercase;
  margin:6px 0 16px;
  text-shadow:0 3px 0 rgba(0,0,0,0.12);
}
.hero-strip{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  font-size:clamp(14px,2.2vw,19px); font-weight:700;
  color:#5C2E00; margin-bottom:26px;
}
.hero-strip i{ color:var(--red-deep); font-style:normal; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hero-logo img{
  width:min(440px,100%); margin:0 auto;
  filter:drop-shadow(0 8px 22px rgba(80,40,0,0.26));
}
@media (max-width:860px){
  .hero{ padding:34px 0 40px; }
  .hero-grid{ grid-template-columns:1fr; gap:24px; text-align:center; }
  .hero-logo{ order:-1; }
  .hero-logo img{ width:min(300px,72vw); }
  .hero-strip{ justify-content:center; }
  .hero-actions{ justify-content:center; }
}

/* Event details band — visually part of the hero */
.facts{
  background:var(--purple);
  border-top:7px solid var(--coral);
  padding:26px 0;
}
.facts-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:20px; text-align:center;
}
.fact-label{
  font-size:11px; font-weight:800; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--coral); margin-bottom:4px;
}
.fact-value{
  font-family:var(--display); font-weight:400;
  font-size:clamp(19px,2.8vw,26px); letter-spacing:0.02em;
  color:var(--marigold); text-transform:uppercase;
}
.fact-sub{ font-size:12.5px; color:#D9C2E8; margin-top:3px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:none; cursor:pointer; text-decoration:none;
  font-family:var(--body); font-size:16px; font-weight:700;
  padding:15px 30px; border-radius:999px;
  transition:transform .12s ease, background .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--red-deep); color:#fff; }
.btn-primary:hover{ background:#A81009; }
.btn-purple{ background:var(--purple); color:#fff; }
.btn-purple:hover{ background:var(--purple-lift); }
.btn-block{ width:100%; }

/* --------------------------------------------------------------------------
   Section furniture
   -------------------------------------------------------------------------- */
.section{ padding:70px 0; }
.section-tinted{ background:var(--cream-2); }
.section-head{ text-align:center; max-width:640px; margin:0 auto 40px; }
.kicker{
  display:inline-block;
  font-size:11px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--red-deep); background:#FCE6D8;
  padding:6px 14px; border-radius:999px; margin-bottom:14px;
}
.section-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(28px,5.2vw,44px); line-height:1.06;
  letter-spacing:0.01em; text-transform:uppercase; color:var(--ink);
}
.section-sub{ font-size:16px; color:var(--body-text); margin-top:12px; }

/* --------------------------------------------------------------------------
   Sponsors — tier drives size only; tier names never shown
   -------------------------------------------------------------------------- */
.sponsor-row{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:18px 26px; margin-bottom:30px;
}
.sponsor-row:last-child{ margin-bottom:0; }
.sponsor{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  text-decoration:none;
}
/* Padding is kept tight so the logo itself fills most of the card. Uploaded
   logos often carry their own built-in whitespace, and generous padding here
   stacks on top of that and leaves the mark looking lost in a big white box. */
.sponsor img{
  object-fit:contain;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:8px 10px;
  transition:transform .15s ease;
}
.sponsor:hover img{ transform:translateY(-2px); }

/* Card heights are the lever that matters. Most sponsor logos are square or
   near-square, and object-fit:contain scales to whichever side runs out first —
   so in a wide, short card a square logo is capped by height and ends up looking
   tiny no matter how wide the card is. These cards are kept close to 4:3 so
   square marks get room, and wide marks still fill the width. */
.tier-title img{ width:clamp(220px,34vw,300px); height:168px; }
.tier-gold img{ width:clamp(170px,26vw,215px); height:136px; }
.tier-partner img{ width:clamp(160px,24vw,200px); height:128px; }
.tier-silver img{ width:clamp(130px,20vw,160px); height:106px; }
.tier-bronze img{ width:clamp(112px,17vw,134px); height:88px; }

.sponsor-caption{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  text-align:center; max-width:210px;
}
.sponsor-name{
  font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.3;
}
.partner-label{
  font-size:11.5px; font-weight:800; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--teal-deep); line-height:1.35;
}
.sponsor-cta{ text-align:center; margin-top:34px; font-size:14.5px; color:var(--muted); }

/* --------------------------------------------------------------------------
   Events — carousel
   -------------------------------------------------------------------------- */
.carousel-shell{ position:relative; }
.carousel{
  display:flex; gap:18px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 2px 18px;
  scrollbar-width:thin;
}
.carousel::-webkit-scrollbar{ height:8px; }
.carousel::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px; }
.carousel::-webkit-scrollbar-track{ background:transparent; }

.ev-card{
  flex:0 0 clamp(250px, 30%, 310px);
  scroll-snap-align:start;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.ev-img{ width:100%; height:164px; object-fit:cover; background:var(--cream-2); }
.ev-body{ padding:18px 18px 22px; display:flex; flex-direction:column; gap:8px; }
.ev-title{ font-size:18px; font-weight:800; line-height:1.25; }
.ev-time{
  align-self:flex-start;
  font-size:12px; font-weight:800; letter-spacing:0.04em;
  color:var(--teal-deep); background:#E3F3EE;
  padding:4px 11px; border-radius:999px;
}
.ev-desc{ font-size:14.5px; color:var(--body-text); }

.carousel-btns{ display:flex; gap:10px; justify-content:center; margin-top:6px; }
.c-btn{
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid var(--line-strong); background:var(--white);
  color:var(--red-deep); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.c-btn:hover{ background:#FCE6D8; }
.c-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* --------------------------------------------------------------------------
   Stalls directory
   -------------------------------------------------------------------------- */
.stall-tools{ max-width:760px; margin:0 auto 16px; }
.stall-search{
  width:100%; font-family:var(--body); font-size:15px; color:var(--ink);
  padding:13px 16px; border:1.5px solid var(--line-strong);
  border-radius:11px; background:var(--white); outline:none;
}
.stall-search::placeholder{ color:#A79E88; }
.stall-search:focus{ border-color:var(--red-deep); box-shadow:0 0 0 3px rgba(194,20,11,0.09); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.chip{
  font-family:var(--body);
  font-size:13px; font-weight:700; cursor:pointer;
  padding:7px 14px; border-radius:999px;
  background:var(--white); border:1px solid var(--line); color:var(--body-text);
}
.chip:hover{ border-color:var(--line-strong); }
.chip.active{ background:var(--red-deep); border-color:var(--red-deep); color:#fff; }

.stall-list{
  max-width:760px; margin:0 auto;
  background:var(--white); border:1px solid var(--line); border-radius:16px;
  max-height:470px; overflow-y:auto;
  padding:2px 22px 14px;
}
.letter-head{
  position:sticky; top:0;
  background:var(--white);
  font-family:var(--display); font-weight:400; font-size:18px; letter-spacing:0.04em;
  color:var(--red-deep);
  padding:12px 0 6px;
  border-bottom:2px solid var(--cream-2);
  z-index:1;
}
.stall-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid #F6EFDE;
}
.stall-row:last-child{ border-bottom:none; }
.stall-name{ font-size:15px; font-weight:600; }
.stall-cat{
  font-size:12px; font-weight:700; color:var(--teal-deep);
  background:#E3F3EE; padding:4px 11px; border-radius:999px; white-space:nowrap;
}
.stall-count{ text-align:center; font-size:13.5px; color:var(--muted); margin-top:14px; }
.stall-empty{ padding:36px 0; text-align:center; color:var(--muted); font-size:15px; }

/* --------------------------------------------------------------------------
   Tickets
   -------------------------------------------------------------------------- */
.tickets{
  background:var(--cream);
  border-top:6px solid var(--red-deep);
  padding:72px 0 84px;
}
.ticket-layout{
  display:grid; grid-template-columns:1fr 1fr; gap:44px;
  align-items:start; max-width:940px; margin:0 auto;
}
@media (max-width:860px){ .ticket-layout{ grid-template-columns:1fr; gap:30px; } }

.ticket-pitch h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(30px,5vw,46px); line-height:1.02;
  text-transform:uppercase; margin-bottom:14px;
}
.ticket-pitch p{ font-size:15.5px; color:var(--body-text); margin-bottom:20px; }
.ticket-points{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.ticket-points li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; }
.ticket-points svg{ flex-shrink:0; margin-top:3px; }

.form-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:20px; padding:30px 28px;
  box-shadow:0 2px 4px rgba(60,40,0,0.04), 0 18px 40px rgba(60,40,0,0.08);
}
.form-card h3{
  font-family:var(--display); font-weight:400; font-size:24px;
  text-transform:uppercase; letter-spacing:0.02em; margin-bottom:4px;
}
.form-note{ font-size:13.5px; color:var(--muted); margin-bottom:22px; }

.field{ margin-bottom:17px; }
.field label{
  display:block; font-size:11px; font-weight:800; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--muted); margin-bottom:7px;
}
.field input{
  width:100%; font-family:var(--body); font-size:15.5px; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--line-strong);
  border-radius:11px; background:#FFFDF7; outline:none;
}
.field input::placeholder{ color:#A79E88; }
.field input:focus{
  border-color:var(--red-deep); background:#fff;
  box-shadow:0 0 0 3px rgba(194,20,11,0.10);
}
.field input.has-error{ border-color:var(--danger); background:var(--danger-tint); }
.field .hint{ font-size:11.5px; color:var(--muted); margin-top:6px; }
.field .error{ font-size:12px; color:var(--danger); margin-top:6px; font-weight:600; }

.summary-error{
  background:var(--danger-tint); color:var(--danger);
  font-size:13.5px; padding:12px 14px; border-radius:11px;
  margin-bottom:18px; border:1px solid #F0CACA;
}

.stepper{
  display:flex; align-items:center; width:150px;
  border:1.5px solid var(--line-strong); border-radius:11px;
  background:#FFFDF7; overflow:hidden;
}
.step-btn{
  width:44px; height:48px; border:none; background:transparent;
  color:var(--red-deep); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.step-btn:hover:not(:disabled){ background:#FCE6D8; }
.step-btn:disabled{ color:#C9C0AC; cursor:not-allowed; }
.step-value{
  flex:1; text-align:center; height:48px; line-height:48px;
  font-size:17px; font-weight:800;
  border-left:1.5px solid var(--line-strong);
  border-right:1.5px solid var(--line-strong);
}

.free-badge{
  display:inline-flex; align-items:center; gap:7px;
  background:#E3F3EE; color:var(--teal-deep);
  font-size:12.5px; font-weight:800;
  padding:7px 14px; border-radius:999px; margin-bottom:16px;
}

.hp-field{ position:absolute; left:-9999px; top:-9999px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer{
  background:var(--ink); color:#A9B7B8;
  padding:48px 0; text-align:center; font-size:13.5px;
}
.footer img{ height:192px; width:auto; margin:0 auto 20px; }
.footer p{ margin-bottom:6px; }
.footer a{ color:var(--marigold); }

.footer-credit{
  margin-top:22px; padding-top:20px;
  border-top:1px solid rgba(169,183,184,0.22);
  font-size:12.5px; color:#8C9A9B;
}
.footer-credit a{ font-weight:600; text-decoration:none; }
.footer-credit a:hover{ text-decoration:underline; }

@media (max-width:640px){
  .footer img{ height:150px; }
}