/* ---------------------------------------------------------------
   CUSTOM CHAOS — a bespoke print-shop for event apparel.

   Built off the logo: warm paper ground, heavy black outlines, hard
   offset shadows, and the yellow/crimson/blue spot colours. Every
   occasion page then repaints the whole thing via its own theme block
   at the foot of this file.

   Colours are literal and never follow the viewer OS theme — this is a
   fixed brand identity, like a sticker sheet, not a document.
----------------------------------------------------------------*/

/* Brand constants, straight off the logo. These never change with the
   theme — they're the identity. Everything below is expressed in the
   semantic tokens that follow, so an occasion can repaint the whole site
   by redefining those and nothing else. */
:root{
  --brand-yellow:      #F5D34E;
  --brand-yellow-deep: #E7BC24;
  --brand-red:         #DE1E52;
  --brand-blue:        #4B9FE1;
  --brand-blue-deep:   #2C7CC0;
  --brand-black:       #16141A;
  --brand-paper:       #FFFBEF;
}

:root{
  --ink:        #FFFFFF;   /* clean white — the pastel washes below do the work */

  --ink-2:      #FFFFFF;   /* raised panels */
  --ink-3:      #16141A;   /* outlines — heavy and black, as on the logo */
  --hairline:   #E2DACA;   /* the quiet divider, where black would shout */
  --chalk:      #16141A;   /* primary text on the ground */
  --chalk-dim:  #514A58;   /* secondary text — dark enough for where pink and blue stack into lilac */

  --riot:       #DE1E52;   /* spot 1 — brand crimson */
  --volt:       #8FC410;   /* spot 2 — lime, goes neon on the dark themes */
  --azure:      #3E8FDC;   /* spot 3 — brand blue */
  --gold:       #F5C518;   /* spot 4 — party sun */
  --rose:       #E39FB2;   /* spot 5 — wedding blush */
  --violet:     #8B6FE8;   /* spot 6 — wildcard */

  /* Darkened twins of the spot colours. The occasion cards use each spot
     colour twice — as a swatch fill behind a dark icon, and as label text
     on a pale card — and one value can't do both legibly. Fills use the
     spot colour, text uses these. */
  --rose-deep:   #8C4A61;
  --azure-deep:  #1D5E96;
  --gold-deep:   #8A6500;
  --volt-deep:   #476300;
  --violet-deep: #5B3FC0;
  --riot-deep:   #B81140;

  --accent:     var(--brand-red);
  --on-accent:  #FFFFFF;   /* text sitting ON an accent fill */
  /* Tint of the accent used for pressed/active fills. Set per theme so it
     never has to be hardcoded as an rgba() that only works on one ground. */
  --accent-soft: rgba(222,30,82,0.12);
  --price:      var(--brand-red);   /* the money figures */

  /* Big soft washes of the brand colours, fixed to the viewport so they
     read as a printed ground rather than something that scrolls past. */
  --wash:
    radial-gradient(1150px 900px at 2% -5%,   rgba(255,150,186,0.62), transparent 68%),
    radial-gradient(1150px 900px at 98% 0%,   rgba(139,197,245,0.62), transparent 68%),
    radial-gradient(1000px 950px at 78% 72%,  rgba(198,174,252,0.50), transparent 68%),
    radial-gradient(950px 900px at 8% 92%,    rgba(255,208,150,0.42), transparent 68%),
    radial-gradient(900px 800px at 46% 42%,   rgba(255,236,175,0.28), transparent 70%);

  /* Scattered dots at mixed sizes and colours — confetti, which is rather
     the point of the name. Tiled, so it covers any page length. */
  --confetti:
    radial-gradient(circle at 7% 9%,   rgba(222,30,82,0.26)  0 5px, transparent 6px),
    radial-gradient(circle at 23% 3%,  rgba(245,211,78,0.50) 0 3px, transparent 4px),
    radial-gradient(circle at 41% 15%, rgba(75,159,225,0.26) 0 7px, transparent 8px),
    radial-gradient(circle at 63% 5%,  rgba(139,111,232,0.22) 0 4px, transparent 5px),
    radial-gradient(circle at 86% 12%, rgba(245,211,78,0.44) 0 6px, transparent 7px),
    radial-gradient(circle at 14% 28%, rgba(75,159,225,0.20) 0 3px, transparent 4px),
    radial-gradient(circle at 52% 33%, rgba(222,30,82,0.20)  0 4px, transparent 5px),
    radial-gradient(circle at 77% 39%, rgba(245,211,78,0.38) 0 5px, transparent 6px),
    radial-gradient(circle at 4% 47%,  rgba(139,111,232,0.20) 0 6px, transparent 7px),
    radial-gradient(circle at 31% 55%, rgba(245,211,78,0.42) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 61%, rgba(75,159,225,0.24) 0 5px, transparent 6px),
    radial-gradient(circle at 92% 68%, rgba(222,30,82,0.20)  0 4px, transparent 5px),
    radial-gradient(circle at 18% 74%, rgba(245,211,78,0.40) 0 7px, transparent 8px),
    radial-gradient(circle at 45% 83%, rgba(139,111,232,0.18) 0 4px, transparent 5px),
    radial-gradient(circle at 73% 91%, rgba(75,159,225,0.22) 0 5px, transparent 6px),
    radial-gradient(circle at 9% 95%,  rgba(222,30,82,0.18)  0 3px, transparent 4px);
  --confetti-size: 620px 620px;

  /* Section colour blocking, so the page isn't one flat expanse. */
  --band-tint:  rgba(75,159,225,0.10);
  --band-warm:  rgba(245,211,78,0.20);

  /* Drawn as a mask, not a coloured image, so one shape can take whatever
     colour the theme wants — a data URI can't have a var interpolated in. */
  --wave-color: var(--ink-3);
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cpath d='M0 7 Q 15 0 30 7 T 60 7 T 90 7 T 120 7' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E");

  --header-bg:  rgba(255,255,255,0.82);
  --dot: radial-gradient(circle, rgba(22,20,26,0.10) 1px, transparent 1.4px);

  /* Chequerboard shown behind a transparent logo upload. */
  --check-a: #E8E1D2;
  --check-b: #D3C9B4;
  /* Highlights on the hen-do fizz bubbles. */
  --bubble-hi: rgba(255,255,255,0.95);
  --bubble-lo: rgba(222,30,82,0.35);

  --font-display: 'Baloo 2', 'Trebuchet MS', sans-serif;
  --font-script:  'Pacifico', 'Brush Script MT', cursive;
  --font-body:    'Work Sans', system-ui, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  --radius: 10px;
  --border-w: 2px;
  /* Hard offset shadow — the sticker/screen-print look, no blur. */
  --lift: 4px 4px 0 var(--ink-3);
  --lift-sm: 3px 3px 0 var(--ink-3);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background-color:var(--ink);
  background-image:var(--wash);
  background-attachment:fixed;
  background-repeat:no-repeat;
  color:var(--chalk);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  position:relative;
  z-index:0;
}
/* Confetti rides above the washes but below every bit of content. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background-image:var(--confetti);
  background-size:var(--confetti-size);
  pointer-events:none;
}

h1,h2,h3{ font-family:var(--font-display); font-weight:800; text-wrap:balance; letter-spacing:-0.01em; margin:0; line-height:1.05; }
p{ margin:0; }
a{ color:inherit; }
button{ font-family:inherit; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--chalk-dim);
}

.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(1.25rem, 4vw, 3rem); }

img,svg{ max-width:100%; }

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

/* ---------------------------------- header ---------------------------------- */

header.site{
  position:sticky; top:0; z-index:40;
  background:var(--header-bg);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ink-3);
}
header.site .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:0.85rem; padding-bottom:0.85rem;
}
/* The real logo replaced the CSS wordmark. It carries its own black
   outline and white ring, so it holds its shape on the pale themes and
   the dark stag/festival ones alike without needing a plate behind it. */
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand-logo{
  display:block; height:60px; width:auto;
  /* width/height are on the tag so the header doesn't reflow while the
     image loads; this keeps the aspect ratio once CSS takes over. */
}
.footer-logo{ height:64px; }
@media (max-width:680px){
  .brand-logo{ height:38px; }
  .footer-logo{ height:52px; }
}

nav.primary{ display:flex; align-items:center; gap:1.6rem; }
nav.primary a{
  text-decoration:none; color:var(--chalk-dim); font-size:0.88rem;
  font-weight:500; transition:color .15s ease;
  padding-bottom:0.2rem;
  border-bottom:2px solid transparent;
}
nav.primary a:hover{ color:var(--chalk); }
nav.primary a[aria-current="page"]{ color:var(--chalk); border-bottom-color:var(--riot); }

.cart-btn{
  display:flex; align-items:center; gap:0.5rem;
  background:transparent; border:1px solid var(--ink-3); color:var(--chalk);
  padding:0.5rem 0.85rem; border-radius:var(--radius); cursor:pointer;
  font-family:var(--font-mono); font-size:0.78rem;
}
.cart-btn:hover{ border-color:var(--riot); }
.cart-count{
  background:var(--riot); color:var(--ink); font-weight:700;
  border-radius:50%; width:1.3rem; height:1.3rem; display:flex; align-items:center; justify-content:center;
  font-size:0.68rem;
}

.nav-toggle{
  display:none;
  background:transparent; border:1px solid var(--ink-3); color:var(--chalk);
  width:2.4rem; height:2.4rem; border-radius:var(--radius); cursor:pointer;
  font-size:1.1rem; line-height:1; align-items:center; justify-content:center;
}
.nav-toggle:hover{ border-color:var(--chalk-dim); }

.mobile-nav{
  display:flex; flex-direction:column;
  border-top:1px solid var(--ink-3); background:var(--ink-2);
}
.mobile-nav a{
  text-decoration:none; color:var(--chalk-dim); font-size:0.98rem; font-weight:500;
  padding:0.9rem clamp(1.25rem, 4vw, 3rem); border-bottom:1px solid var(--ink-3);
}
.mobile-nav a:last-child{ border-bottom:none; }
.mobile-nav a[aria-current="page"]{ color:var(--chalk); background:var(--accent-soft); }
.mobile-nav[hidden]{ display:none; }

@media (max-width:680px){
  header.site .wrap{ padding-top:0.7rem; padding-bottom:0.7rem; }
  .brand .sub{ display:none; }
  nav.primary{ gap:0.6rem; }
  nav.primary a{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (min-width:681px){
  .mobile-nav{ display:none !important; }
}

/* ---------------------------------- hero ---------------------------------- */

.hero{
  position:relative;
  padding:clamp(3rem,8vw,6rem) 0 clamp(3rem,6vw,4.5rem);
}
.hero-compact{
  padding:clamp(1.8rem,4vw,3rem) 0 clamp(1.6rem,3vw,2.2rem);
}
.hero-compact h1{ font-size:clamp(2rem,4.4vw,3.2rem); max-width:34ch; }
.hero-compact .lede{ max-width:60ch; }
.hero .stats-inline{ margin-top:1.6rem; }
.hero .tag{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--brand-black); background:var(--brand-yellow); padding:0.35rem 0.7rem; border-radius:3px; border:2px solid var(--ink-3);
  transform:rotate(-2deg); margin-bottom:1.4rem;
}
.hero h1{
  font-size:clamp(2.6rem, 7vw, 5.2rem);
  line-height:0.98;
  max-width:16ch;
}
.hero h1 .accent{ color:var(--accent, var(--riot)); }
.hero .lede{
  margin-top:1.4rem; max-width:52ch; font-size:1.08rem; color:var(--chalk-dim);
}
.hero .cta-row{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.85rem 1.5rem; border-radius:var(--radius); border:none; cursor:pointer;
  font-weight:600; font-size:0.95rem; text-decoration:none; transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent, var(--riot)); color:var(--ink); }
.btn-primary:hover{ box-shadow:0 0 0 2px var(--accent, var(--riot)) inset, 0 6px 18px -6px color-mix(in srgb, var(--accent, var(--riot)) 55%, transparent); }
.btn-ghost{ background:transparent; color:var(--chalk); border:1px solid var(--ink-3); }
.btn-ghost:hover{ border-color:var(--chalk-dim); }

.hero .stats{ display:flex; gap:2.2rem; margin-top:2.8rem; flex-wrap:wrap; }
.hero .stats div{ font-family:var(--font-mono); }
.hero .stats strong{ display:block; font-size:1.4rem; color:var(--chalk); }
.hero .stats span{ font-size:0.72rem; color:var(--chalk-dim); letter-spacing:0.06em; text-transform:uppercase; }

/* ---------------------------------- page hero (interior pages) ---------------------------------- */

.page-hero{
  position:relative;
  padding:clamp(2.4rem,6vw,3.6rem) 0 clamp(2.6rem,5vw,3.2rem);
}
.page-hero h1{ font-size:clamp(2.2rem,5vw,3.4rem); max-width:20ch; }
.page-hero h1 .accent{ color:var(--accent, var(--riot)); }
.page-hero .lede{ margin-top:1rem; max-width:56ch; font-size:1.02rem; color:var(--chalk-dim); }
.page-hero .lede a{ color:var(--chalk); text-decoration:underline; }
.page-hero .crumb{ margin-bottom:1rem; }
.page-hero .crumb a{ text-decoration:none; color:var(--chalk-dim); }
.page-hero .crumb a:hover{ color:var(--chalk); }
.page-hero .tag{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink); background:var(--accent, var(--riot)); padding:0.3rem 0.6rem; border-radius:2px;
  transform:rotate(-2deg); margin-bottom:1rem;
}
.page-hero .switch-line{ margin-top:1rem; font-size:0.85rem; color:var(--chalk-dim); }
.page-hero .switch-line a{ color:var(--chalk); text-decoration:underline; }

/* ---------------------------------- occasions ---------------------------------- */

section.section{ padding:clamp(3rem,7vw,5rem) 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.2rem; }
.section-head h2{ font-size:clamp(1.8rem,3.6vw,2.6rem); }
.section-head p{ color:var(--chalk-dim); max-width:42ch; }

.occasions-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.6rem 1.3rem;
}

.ticket{
  position:relative;
  background:var(--ink-2);
  border:1px solid var(--ink-3);
  border-radius:var(--radius);
  padding:1.5rem 1.4rem 1.7rem;
  text-align:left;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  display:flex; flex-direction:column; gap:0.7rem;
  transition:transform .16s ease, border-color .16s ease;
}
.ticket:hover{ transform:translateY(-4px); }
.ticket::before,.ticket::after{
  content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  background:var(--ink); top:50%; transform:translateY(-50%);
}
.ticket::before{ left:-10px; }
.ticket::after{ right:-10px; }
.ticket .swatch{ width:2.4rem; height:2.4rem; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ticket .swatch svg{ width:1.3rem; height:1.3rem; }
.ticket h3{ font-size:1.5rem; }
.ticket .mood{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; }
.ticket p.desc{ color:var(--chalk-dim); font-size:0.92rem; }
.ticket .go{ margin-top:auto; display:flex; align-items:center; gap:0.4rem; font-weight:600; font-size:0.88rem; }
.ticket .stub-line{ border-top:2px dashed var(--ink-3); margin:0.2rem 0; }

/* ---------------------------------- customizer ---------------------------------- */

#customizer{ border-top:1px solid var(--ink-3); border-bottom:1px solid var(--ink-3); background:var(--ink-2); }
.studio{
  display:grid; grid-template-columns:minmax(280px,420px) 1fr; gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}
@media (max-width:840px){ .studio{ grid-template-columns:1fr; } }

.preview-pane{
  position:sticky; top:5.2rem;
  background:var(--ink);
  border:1px solid var(--ink-3);
  border-radius:8px;
  padding:1.6rem;
  display:flex; flex-direction:column; gap:1rem;
}
@media (max-width:840px){ .preview-pane{ position:static; } }
.preview-pane .stage{
  background-image:var(--dot); background-size:12px 12px;
  border-radius:6px; display:flex; align-items:center; justify-content:center; padding:1rem;
}
.preview-pane .drag-hint{ font-size:0.76rem; color:var(--chalk-dim); }
.preview-pane .nudge-pad{ display:flex; gap:0.5rem; align-items:center; justify-content:center; }
.preview-pane .price-line{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-mono); }
.preview-pane .price-line .amount{ font-size:1.7rem; color:var(--price); }
.preview-pane .price-note{ font-size:0.7rem; color:var(--chalk-dim); }
.discount-note{ font-family:var(--font-mono); font-size:0.72rem; color:var(--price); }
.discount-note[hidden]{ display:none; }
.preview-pane .add-row{ display:flex; gap:0.7rem; }
.preview-pane .btn[disabled]{ opacity:0.45; cursor:not-allowed; }

/* Size breakdown — one small numeric box per size, wrapping to as many
   rows as the pane needs. auto-fill rather than a fixed column count so
   it stays usable from a narrow phone up to the full desktop pane. */
.size-block{ display:flex; flex-direction:column; gap:0.6rem; margin:0.4rem 0 0.9rem; }
.size-block .label{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--chalk-dim); }
.size-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(3.2rem, 1fr)); gap:0.5rem;
}
.size-cell{
  display:flex; flex-direction:column; align-items:center; gap:0.25rem;
  border:1px solid var(--ink-3); border-radius:var(--radius); padding:0.4rem 0.2rem;
}
.size-label{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; color:var(--chalk-dim); }
.size-input{
  width:100%; text-align:center; background:transparent; border:none; color:var(--chalk);
  font-family:var(--font-mono); font-size:0.95rem; padding:0;
}
.size-input:focus-visible{ outline:2px solid var(--riot); outline-offset:2px; border-radius:3px; }
/* A zeroed size should recede so the chosen ones stand out at a glance. */
.size-cell:focus-within{ border-color:var(--riot); }
.size-summary{ font-family:var(--font-mono); font-size:0.72rem; color:var(--price); margin:0; }

.controls{ display:flex; flex-direction:column; gap:1.7rem; }
.field{ display:flex; flex-direction:column; gap:0.6rem; }
.field .label{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--chalk-dim); }

.chip-row{ display:flex; gap:0.6rem; flex-wrap:wrap; }
.chip{
  border:1px solid var(--ink-3); background:var(--ink); color:var(--chalk);
  border-radius:999px; padding:0.5rem 1rem; font-size:0.85rem; cursor:pointer;
}
.chip[aria-pressed="true"]{
  border-color:var(--accent, var(--riot)); color:var(--accent, var(--riot));
  background:color-mix(in srgb, var(--accent, var(--riot)) 8%, transparent);
}

.swatch-row{ display:flex; gap:0.6rem; flex-wrap:wrap; }
.swatch-btn{
  width:2.15rem; height:2.15rem; border-radius:50%; border:2px solid var(--ink-3); cursor:pointer; padding:0;
}
.swatch-btn[aria-pressed="true"]{ border-color:var(--accent); box-shadow:0 0 0 2px var(--ink), 0 0 0 4px var(--accent); }

/* Garment colour grid — mirrors our supplier's real stock colours, so
   every swatch needs a legible name, not just a tooltip. */
/* Colour picker. Each swatch is the garment's own photo — with 400
   colours in the range there is no trustworthy hex per item, and the
   photo is both accurate and easier to pick from than a name. Ranges run
   to 100+ colours, so the grid scrolls rather than pushing the rest of
   the controls off the page. */
.garment-swatch-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(56px,1fr)); gap:0.4rem;
  max-height:15rem; overflow-y:auto; padding:0.3rem;
  border:var(--border-w) solid var(--ink-3); border-radius:var(--radius);
  background:var(--ink-2);
}
.garment-swatch{
  display:block; background:transparent; border:2px solid transparent;
  cursor:pointer; padding:0; border-radius:6px; overflow:hidden; line-height:0;
}
.garment-swatch:hover{ border-color:var(--chalk-dim); }
.garment-swatch-img{
  width:100%; aspect-ratio:546/665; object-fit:cover; display:block;
  background:#fff;
}
.garment-swatch[aria-pressed="true"]{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent);
}
.colour-count{
  font-family:var(--font-mono); font-size:0.62rem; opacity:0.7;
  text-transform:none; letter-spacing:0;
}
#colourName{ color:var(--chalk); text-transform:none; letter-spacing:0; }

/* Logo upload. The logo is shown on the mockup exactly as supplied —
   nothing is traced and no background is removed in the browser. */
.upload-dropzone{
  border:1px dashed var(--ink-3); border-radius:var(--radius); padding:1.2rem;
  color:var(--chalk-dim); font-size:0.85rem; background:var(--ink);
  transition:border-color .15s ease, background .15s ease;
}
.upload-dropzone.dragging{ border-color:var(--accent); background:var(--accent-soft); }
#logoEmpty{ display:flex; flex-direction:column; align-items:center; gap:0.8rem; text-align:center; }
#logoEmpty[hidden], #logoLoaded[hidden]{ display:none; }
.upload-note{ font-family:var(--font-mono); font-size:0.66rem; opacity:0.75; }

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

#logoLoaded{ display:flex; flex-direction:column; gap:0.9rem; }
.logo-row{ display:flex; gap:0.85rem; align-items:center; }
.logo-thumb{
  width:56px; height:56px; object-fit:contain; flex:0 0 56px;
  /* Chequerboard, so a transparent logo reads as transparent rather than
     looking like it has a solid panel behind it. */
  background-color:var(--check-a);
  background-image:
    linear-gradient(45deg, var(--check-b) 25%, transparent 25%, transparent 75%, var(--check-b) 75%),
    linear-gradient(45deg, var(--check-b) 25%, transparent 25%, transparent 75%, var(--check-b) 75%);
  background-size:12px 12px;
  background-position:0 0, 6px 6px;
  border-radius:var(--radius); padding:2px;
}
.logo-meta{ display:flex; flex-direction:column; gap:0.1rem; min-width:0; }
.logo-name{
  font-size:0.82rem; color:var(--chalk);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.logo-size{ font-family:var(--font-mono); font-size:0.66rem; color:var(--chalk-dim); }
.logo-remove{
  background:none; border:none; padding:0; margin-top:0.15rem; text-align:left;
  color:var(--riot); font-family:var(--font-mono); font-size:0.68rem;
  text-decoration:underline; cursor:pointer;
}

/* Shared by the text and logo size sliders — both scale their layer as a
   fraction of the print area, so they read and behave the same way. */
.scale-row{ display:flex; align-items:center; gap:0.7rem; margin-top:0.5rem; }
.scale-row span{
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--chalk-dim); white-space:nowrap;
}
.scale-row input[type="range"]{ flex:1; accent-color:var(--accent); min-width:0; }
.scale-row output{
  font-family:var(--font-mono); font-size:0.68rem; color:var(--chalk);
  font-variant-numeric:tabular-nums; min-width:3.2em; text-align:right;
}

.logo-check{ display:flex; gap:0.6rem; align-items:flex-start; font-size:0.78rem; line-height:1.4; cursor:pointer; }
.logo-check input{ margin-top:0.2rem; accent-color:var(--riot); flex:0 0 auto; }
.logo-check em{ font-style:normal; color:var(--chalk-dim); font-size:0.72rem; }

.logo-error{
  font-family:var(--font-mono); font-size:0.72rem; color:var(--riot);
  border:1px solid var(--riot); border-radius:var(--radius);
  padding:0.6rem 0.8rem; margin:0.6rem 0 0; line-height:1.5;
}
.logo-error[hidden]{ display:none; }

/* Only shown when a side has both text and a logo, so the nudge buttons
   can say which one they move. */
.nudge-target-row{ display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; margin-top:0.2rem; }
.nudge-target-row[hidden]{ display:none; }
.nudge-target-label{
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--chalk-dim);
}
.chip.chip-sm{ padding:0.3rem 0.7rem; font-size:0.72rem; }

.text-input{
  width:100%; padding:0.85rem 1rem; background:var(--ink); border:1px solid var(--ink-3); color:var(--chalk);
  border-radius:var(--radius); font-size:1rem; font-family:var(--font-body);
}
.text-input:focus{ border-color:var(--riot); }
.char-count{ font-family:var(--font-mono); font-size:0.68rem; color:var(--chalk-dim); text-align:right; }

.font-chip{
  border:1px solid var(--ink-3); background:var(--ink); color:var(--chalk);
  border-radius:var(--radius); padding:0.75rem 1rem; cursor:pointer; text-align:left; min-width:9.5rem;
}
.font-chip[aria-pressed="true"]{
  border-color:var(--accent, var(--riot));
  background:color-mix(in srgb, var(--accent, var(--riot)) 8%, transparent);
}
.font-chip .sample{ font-size:1.2rem; display:block; }
.font-chip .fname{ display:block; font-family:var(--font-mono); font-size:0.65rem; color:var(--chalk-dim); margin-top:0.2rem; text-transform:uppercase; letter-spacing:0.06em; }

.icon-btn{
  width:3rem; height:3rem; border-radius:var(--radius); border:1px solid var(--ink-3); background:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--chalk);
}
.icon-btn svg{ width:1.35rem; height:1.35rem; }
.icon-btn[aria-pressed="true"]{ border-color:var(--accent); background:var(--accent-soft); }

/* ---------------------------------- occasion entrance fx ----------------------------------
   A short, once-per-load flourish on each dedicated occasion page — falling
   hearts for weddings, confetti for parties, mugs clinking for a stag do,
   and so on. Purely decorative: fixed, non-interactive, and removed from
   the DOM a few seconds after it plays. Skipped entirely (in JS) when the
   viewer has prefers-reduced-motion, and hidden here as a fallback.
------------------------------------------------------------------------- */

#occasionFx{
  position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden;
}
.fx-particle{ position:absolute; top:-40px; will-change:transform, opacity; }
.fx-particle svg{ width:100%; height:100%; display:block; }

@keyframes fx-fall{
  0%   { transform:translateY(0) rotate(0deg); opacity:0; }
  8%   { opacity:1; }
  100% { transform:translateY(112vh) rotate(var(--fx-spin, 220deg)); opacity:0; }
}
.fx-particle.fall{ animation-name:fx-fall; animation-timing-function:linear; animation-fill-mode:forwards; }

@keyframes fx-rise{
  0%   { transform:translateY(0) translateX(0); opacity:0; }
  10%  { opacity:0.85; }
  100% { transform:translateY(-115vh) translateX(var(--fx-drift, 20px)); opacity:0; }
}
.fx-bubble{
  position:absolute; bottom:-30px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--bubble-hi), var(--bubble-lo) 60%, transparent 72%);
  border:1px solid var(--bubble-lo);
  animation-name:fx-rise; animation-timing-function:linear; animation-fill-mode:forwards;
}

@keyframes fx-clink-left{
  0%   { transform:translateX(0) rotate(-8deg); opacity:0; }
  10%  { opacity:1; }
  45%  { transform:translateX(30vw) rotate(14deg) scale(1.1); }
  58%  { transform:translateX(28vw) rotate(9deg) scale(0.96); }
  100% { transform:translateX(24vw) rotate(6deg) scale(1); opacity:0; }
}
@keyframes fx-clink-right{
  0%   { transform:translateX(0) rotate(8deg); opacity:0; }
  10%  { opacity:1; }
  45%  { transform:translateX(-30vw) rotate(-14deg) scale(1.1); }
  58%  { transform:translateX(-28vw) rotate(-9deg) scale(0.96); }
  100% { transform:translateX(-24vw) rotate(-6deg) scale(1); opacity:0; }
}
@keyframes fx-clink-spark{
  0%   { opacity:0; transform:scale(0.4) rotate(0deg); }
  40%  { opacity:1; transform:scale(1.2) rotate(20deg); }
  100% { opacity:0; transform:scale(0.9) rotate(45deg); }
}
.fx-particle.clink-left{ animation:fx-clink-left 1.5s cubic-bezier(.22,.7,.3,1) forwards; }
.fx-particle.clink-right{ animation:fx-clink-right 1.5s cubic-bezier(.22,.7,.3,1) forwards; }
.fx-particle.clink-spark{ animation:fx-clink-spark 0.7s ease-out forwards; opacity:0; }

.fx-pulse{
  position:absolute; inset:-10%; border-radius:50%;
  background:radial-gradient(circle, var(--fx-color, var(--accent)) 0%, transparent 55%);
  opacity:0; animation:fx-pulse-glow 0.9s ease-out forwards;
  mix-blend-mode:screen;
}
@keyframes fx-pulse-glow{
  0%   { opacity:0; }
  35%  { opacity:0.6; }
  100% { opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  #occasionFx{ display:none; }
}

/* ---------------------------------- how it works ---------------------------------- */

.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.6rem; counter-reset:step; }
.step{ border-top:2px solid var(--ink-3); padding-top:1rem; }
.step .num{ font-family:var(--font-mono); color:var(--accent); font-size:0.85rem; }
.step h3{ font-family:var(--font-body); font-weight:700; font-size:1.15rem; margin-top:0.4rem; }
.step p{ color:var(--chalk-dim); font-size:0.92rem; margin-top:0.4rem; }

/* ---------------------------------- info blocks (how-it-works page extras) ------------------- */

.info-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.4rem; }
.info-card{ background:var(--ink-2); border:1px solid var(--ink-3); border-radius:var(--radius); padding:1.4rem 1.5rem; }
.info-card h3{ font-family:var(--font-body); font-weight:700; font-size:1.05rem; }
.info-card p{ color:var(--chalk-dim); font-size:0.92rem; margin-top:0.5rem; }
.info-card .stat{ font-family:var(--font-mono); color:var(--price); font-size:1.5rem; display:block; margin-bottom:0.3rem; }

/* ---------------------------------- cart drawer ---------------------------------- */

.scrim{
  position:fixed; inset:0; background:rgba(10,9,13,0.6); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:50;
}
.scrim.open{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(400px,92vw);
  background:var(--ink-2); border-left:1px solid var(--ink-3);
  transform:translateX(100%); transition:transform .25s ease; z-index:51;
  display:flex; flex-direction:column;
}
.drawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.4rem; border-bottom:1px solid var(--ink-3); }
.drawer-head h2{ font-size:1.3rem; }
.drawer-close{ background:none; border:none; color:var(--chalk-dim); font-size:1.4rem; cursor:pointer; line-height:1; }
.drawer-body{ padding:1.2rem 1.4rem; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:1rem; }
.empty-cart{ color:var(--chalk-dim); font-size:0.92rem; }

.cart-item{ display:flex; gap:0.9rem; border:1px solid var(--ink-3); border-radius:var(--radius); padding:0.7rem; }
.cart-item .thumb{ width:3.6rem; height:3.6rem; background:var(--ink); border-radius:4px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background-image:var(--dot); background-size:8px 8px; }
.cart-item .thumb svg{ width:2.6rem; }
.cart-item .meta{ flex:1; min-width:0; }
.cart-item .meta .name{ font-weight:600; font-size:0.9rem; }
.cart-item .meta .sub{ font-family:var(--font-mono); font-size:0.68rem; color:var(--chalk-dim); margin-top:0.15rem; }
/* The size split is the line that actually gets printed against, so it
   reads brighter than the rest of the spec. */
.cart-item .meta .sub.sizes{ color:var(--price); }
.cart-item .meta .row{ display:flex; justify-content:space-between; align-items:center; margin-top:0.4rem; }
.cart-item .remove{ background:none; border:none; color:var(--chalk-dim); font-size:0.72rem; text-decoration:underline; cursor:pointer; padding:0; }
.cart-item .price{ font-family:var(--font-mono); color:var(--price); font-size:0.9rem; }

.drawer-foot{ border-top:1px solid var(--ink-3); padding:1.2rem 1.4rem; display:flex; flex-direction:column; gap:0.9rem; }
.drawer-foot .total-row{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:1.05rem; }
.drawer-foot .note{ font-size:0.72rem; color:var(--chalk-dim); }

/* ---------------------------------- footer ---------------------------------- */

footer.site{ padding:2.6rem 0 3.2rem; }
footer.site .wrap{ display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:center; border-top:1px solid var(--ink-3); padding-top:1.8rem; }
footer.site .mark{ font-family:var(--font-display); font-size:1.1rem; }
footer.site .mark span{ color:var(--riot); }
footer.site .links{ display:flex; gap:1.4rem; flex-wrap:wrap; font-size:0.85rem; color:var(--chalk-dim); }
footer.site a{ text-decoration:none; }
footer.site a:hover{ color:var(--chalk); }

.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; }

/* ---------------------------------------------------------------
   Order page — cart review beside the quote-request form
----------------------------------------------------------------*/
.order-layout{
  display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start;
}
@media (max-width: 860px){
  .order-layout{ grid-template-columns:1fr; gap:2rem; }
}
.order-layout h2{ margin:0 0 1.2rem; }

.order-review{
  background:var(--ink-2); border:1px solid var(--ink-3);
  border-radius:var(--radius); padding:1.4rem;
}
.order-item{
  display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--ink-3);
}
.order-item:first-of-type{ padding-top:0; }
.order-item:last-of-type{ border-bottom:none; }
.order-item .thumb{
  flex:0 0 78px; background:var(--ink); border:1px solid var(--hairline);
  background-image:var(--dot); background-size:8px 8px;
  border-radius:var(--radius); padding:0.4rem;
}
.order-item .thumb svg{ width:100%; height:auto; display:block; }
.order-item .meta{ flex:1; min-width:0; }
.order-item .meta h3{ margin:0 0 0.35rem; font-size:0.95rem; }
.order-item p{ margin:0.15rem 0; font-family:var(--font-mono); font-size:0.7rem; color:var(--chalk-dim); }
/* The size split drives the whole print run, so it leads visually. */
.order-item .order-sizes{ color:var(--price); font-size:0.74rem; }
.order-item .order-price{ color:var(--chalk); font-size:0.85rem; margin-top:0.45rem; }

.order-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--ink-3);
  font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--chalk-dim);
}
.order-total strong{ font-size:1.3rem; color:var(--chalk); letter-spacing:0; }
.order-review .btn{ margin-top:1.2rem; }

.order-form-pane{
  background:var(--ink-2); border:1px solid var(--ink-3);
  border-radius:var(--radius); padding:1.4rem;
}
.form-field{ display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.1rem; }
.form-field .label{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--chalk-dim);
}
.form-field .req{ color:var(--riot); }
.form-field .opt{ color:var(--chalk-dim); opacity:0.7; text-transform:none; letter-spacing:0; }
.form-field textarea.text-input{ resize:vertical; min-height:3rem; font-family:var(--font-body); }
.field-hint{ font-family:var(--font-mono); font-size:0.66rem; color:var(--chalk-dim); opacity:0.8; }
.form-error{
  font-family:var(--font-mono); font-size:0.74rem; color:var(--riot);
  border:1px solid var(--riot); border-radius:var(--radius); padding:0.7rem 0.9rem; margin:0 0 1rem;
}
.form-error[hidden]{ display:none; }
#submitOrder{ width:100%; }
#submitOrder[disabled]{ opacity:0.55; cursor:not-allowed; }

.empty-order, .order-sent{
  text-align:center; max-width:34rem; margin:0 auto; padding:2.5rem 1.4rem;
  background:var(--ink-2); border:1px solid var(--ink-3); border-radius:var(--radius);
}
.empty-order h2, .order-sent h2{ margin:0 0 0.7rem; }
.empty-order p, .order-sent p{ color:var(--chalk-dim); margin:0 0 1.2rem; }
.empty-order .btn, .order-sent .btn{ margin:0 0.3rem; }
.order-sent .note{ font-family:var(--font-mono); font-size:0.72rem; color:var(--price); }

/* Logo confirmation on the order review — the customer should be able to
   see exactly which file and which background choice is being sent. */
.order-logo{ display:flex; gap:0.6rem; align-items:center; margin:0.35rem 0 0.15rem; }
.order-logo-thumb{
  width:34px; height:34px; object-fit:contain; flex:0 0 34px;
  background-color:var(--check-a);
  background-image:
    linear-gradient(45deg, var(--check-b) 25%, transparent 25%, transparent 75%, var(--check-b) 75%),
    linear-gradient(45deg, var(--check-b) 25%, transparent 25%, transparent 75%, var(--check-b) 75%);
  background-size:10px 10px;
  background-position:0 0, 5px 5px;
  border-radius:3px; padding:2px;
}
.order-logo-meta{ display:flex; flex-direction:column; min-width:0; }
.order-logo-name{
  font-family:var(--font-mono); font-size:0.66rem; color:var(--chalk);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.order-logo-bg{ font-family:var(--font-mono); font-size:0.64rem; color:var(--price); }

/* Wavy divider under the heroes, and colour-blocked section bands, so the
   page reads as a set of printed panels rather than one flat sheet. */
.hero::after, .page-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:14px;
  background-color:var(--wave-color);
  -webkit-mask:var(--wave-mask) repeat-x center / 120px 14px;
  mask:var(--wave-mask) repeat-x center / 120px 14px;
}

.band{ position:relative; }
.band-cool{ background:var(--band-tint); }
.band-warm{ background:var(--band-warm); }
.band-cool, .band-warm{
  border-top:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);
}

/* ---------------------------------------------------------------
   STICKER LAYER

   The logo is a heavy-outlined sticker, so the furniture matches it:
   thick black borders, hard offset shadows with no blur, and a physical
   press on click. Themes that want restraint (weddings, stag, festival)
   set --lift:none and a 1px --border-w, and these rules fall in line
   without needing to be overridden one by one.
----------------------------------------------------------------*/

.btn{
  border:var(--border-w) solid var(--ink-3);
  box-shadow:var(--lift);
  font-weight:700;
  transition:transform .1s ease, box-shadow .1s ease;
}
.btn:hover{ transform:translate(-1px,-1px); box-shadow:var(--lift); }
.btn:active{ transform:translate(2px,2px); box-shadow:none; }
.btn-primary{ background:var(--accent); color:var(--on-accent); }
.btn-primary:hover{ box-shadow:var(--lift); }
.btn-ghost{ background:var(--ink-2); color:var(--chalk); }

.cart-btn{
  border:var(--border-w) solid var(--ink-3);
  box-shadow:var(--lift-sm);
  font-weight:700;
}
.cart-btn:hover{ border-color:var(--ink-3); transform:translate(-1px,-1px); }
.cart-count{ background:var(--accent); color:var(--on-accent); }

.nav-toggle{ border:var(--border-w) solid var(--ink-3); box-shadow:var(--lift-sm); }
nav.primary a{ font-weight:600; }
nav.primary a[aria-current="page"]{ border-bottom-color:var(--accent); }

/* Occasion cards. Each carries its own colour so the grid previews the
   six themes rather than showing six identical cards. */
.ticket{
  border:var(--border-w) solid var(--ink-3);
  box-shadow:var(--lift);
  background:var(--card-bg, var(--ink-2));
  transition:transform .14s ease, box-shadow .14s ease;
}
.ticket:hover{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--ink-3); }
.ticket::before,.ticket::after{ display:none; }
.ticket .swatch{
  border:var(--border-w) solid var(--ink-3);
  box-shadow:var(--lift-sm);
}
.ticket h3{ font-size:1.7rem; }
.ticket .stub-line{ border-top:2px dashed var(--ink-3); opacity:0.35; }
.ticket .go{ font-weight:700; }

.occasions-grid [data-key="wedding"] { --card-bg:#FBF4F6; }
.occasions-grid [data-key="stag"]    { --card-bg:#EAF2FA; }
.occasions-grid [data-key="hen"]     { --card-bg:#FFEFF6; }
.occasions-grid [data-key="party"]   { --card-bg:#FFF6DA; }
.occasions-grid [data-key="festival"]{ --card-bg:#F1FADC; }
.occasions-grid [data-key="other"]   { --card-bg:#F2EFFC; }

/* Panels get the same outline treatment. */
.info-card, .preview-pane, .order-review, .order-form-pane,
.empty-order, .order-sent{
  border:var(--border-w) solid var(--ink-3);
  box-shadow:var(--lift);
}
.step{ border-top:3px solid var(--ink-3); }
.step .num{
  display:inline-block; background:var(--accent); color:var(--on-accent);
  padding:0.1rem 0.5rem; border-radius:4px; font-weight:700;
}

.chip, .font-chip, .size-cell, .text-input, .icon-btn, .qty{
  border-width:var(--border-w);
}
.chip[aria-pressed="true"], .font-chip[aria-pressed="true"],
.garment-swatch[aria-pressed="true"]{
  box-shadow:var(--lift-sm);
}

/* ---------------------------------------------------------------
   HOME PAGE
----------------------------------------------------------------*/

/* The yellow badge from the logo, reused as a page device. */
.sticker{
  display:inline-block;
  background:var(--brand-yellow); color:var(--brand-black);
  border:var(--border-w) solid var(--ink-3); border-radius:999px;
  box-shadow:var(--lift);
  padding:0.4rem 1.1rem;
  font-family:var(--font-mono); font-size:0.72rem;
  letter-spacing:0.12em; text-transform:uppercase; font-weight:700;
  transform:rotate(-2deg);
}

.hero .stats div{
  background:var(--ink-2);
  border:var(--border-w) solid var(--ink-3);
  border-radius:var(--radius);
  box-shadow:var(--lift-sm);
  padding:0.7rem 1.1rem;
}
.hero .stats strong{ font-family:var(--font-display); font-weight:800; font-size:1.8rem; color:var(--accent); }

/* Scrolling strip of what they actually print — cheap energy, and it
   says more about the business than another paragraph would. */
.marquee{
  border-top:var(--border-w) solid var(--ink-3);
  border-bottom:var(--border-w) solid var(--ink-3);
  background:var(--brand-yellow);
  overflow:hidden; padding:0.7rem 0;
}
.marquee-track{
  display:flex; gap:2.5rem; width:max-content;
  /* Both values are set by js/common.js once it has measured one copy of
     the list. The fallbacks only apply if that never runs; a -50% shift
     leaves a gap whenever half the track is narrower than the screen. */
  animation:marquee var(--marquee-duration, 32s) linear infinite;
}
.marquee span{
  font-family:var(--font-display); font-weight:800; font-size:1.15rem;
  text-transform:uppercase; letter-spacing:0.02em; color:var(--brand-black);
  display:flex; align-items:center; gap:2.5rem; white-space:nowrap;
}
.marquee span::after{ content:"★"; color:var(--brand-red); }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-1 * var(--marquee-shift, 50%))); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
}

/* Two-up band: what you get / how it costs less in a group. */
.split{
  /* Three slabs across on a wide screen, folding to two then one. */
  display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:1.4rem;
}
.slab{
  border:var(--border-w) solid var(--ink-3);
  border-radius:var(--radius);
  box-shadow:var(--lift);
  padding:1.8rem;
}
.slab.yellow{ background:var(--brand-yellow); color:var(--brand-black); }
.slab.blue{ background:var(--brand-blue); color:#fff; }
/* The third slab stays quiet so the two brand-coloured ones still lead. */
.slab.plain{ background:var(--ink-2); color:var(--chalk); }
.slab.plain a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.slab h3{ font-size:1.6rem; margin-bottom:0.6rem; }
.slab p{ font-size:0.95rem; }
.slab.blue p{ color:rgba(255,255,255,0.9); }
.slab .tiers{ display:flex; gap:1.4rem; margin-top:1.1rem; flex-wrap:wrap; }
.slab .tier{ font-family:var(--font-mono); }
.slab .tier b{ display:block; font-size:1.5rem; font-family:var(--font-display); font-weight:800; }
.slab .tier span{ font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; opacity:0.75; }

/* ---------------------------------------------------------------
   OCCASION THEMES

   Each dedicated occasion page carries data-occasion on <body>, and
   repaints the site by redefining the semantic tokens only — no
   structural CSS is duplicated per theme. A theme may swing all the way
   from paper to near-black; everything downstream follows because it
   reads --ink / --chalk / --accent rather than literal colours.
----------------------------------------------------------------*/

/* WEDDINGS — elegant. Warm ivory, blush, and a proper serif. Restrained:
   thin rules instead of the house's heavy sticker outlines. */
[data-occasion="wedding"]{
  --ink:        #FBF7F2;
  --ink-2:      #FFFFFF;
  --ink-3:      #DDD0C8;
  --hairline:   #EBE1D9;
  --chalk:      #2E2429;
  --chalk-dim:  #5D5058;

  --accent:      #9C5069;
  --on-accent:   #FFFFFF;
  --accent-soft: rgba(156,80,105,0.12);
  --price:       #8E4A60;

  --header-bg: rgba(251,247,242,0.92);
  --dot: radial-gradient(circle, rgba(46,36,41,0.05) 1px, transparent 1.4px);
  --check-a: #EFE7E0; --check-b: #DDD0C8;
  --bubble-hi: rgba(255,255,255,0.9); --bubble-lo: rgba(196,120,140,0.3);

  --font-display: 'Playfair Display', Georgia, serif;
  --radius: 3px;
  --border-w: 1px;
  --lift: none;
  --lift-sm: none;
}
[data-occasion="wedding"] h1,
[data-occasion="wedding"] h2,
[data-occasion="wedding"] h3{ font-style:italic; font-weight:500; letter-spacing:0; }
[data-occasion="wedding"] .btn{ border-radius:2px; letter-spacing:0.04em; }

/* STAG — manly. Cold slate, steel blue, hard edges, condensed caps.
   Nothing rounded and nothing pink. */
[data-occasion="stag"]{
  --ink:        #14181D;
  --ink-2:      #1C222A;
  --ink-3:      #303B47;
  --hairline:   #283039;
  --chalk:      #E4EAF0;
  --chalk-dim:  #ADBAC7;

  --accent:      #5CAEEF;
  --on-accent:   #0E1319;
  --accent-soft: rgba(92,174,239,0.16);
  --price:       #7CC2F5;

  --header-bg: rgba(20,24,29,0.92);
  --dot: radial-gradient(circle, rgba(228,234,240,0.07) 1px, transparent 1.4px);
  --check-a: #2A333D; --check-b: #1C222A;
  --bubble-hi: rgba(255,255,255,0.8); --bubble-lo: rgba(75,159,225,0.3);

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --radius: 2px;
  --border-w: 1px;
  --lift: none;
  --lift-sm: none;
}
[data-occasion="stag"] h1,
[data-occasion="stag"] h2{ text-transform:uppercase; letter-spacing:0.02em; }

/* HEN — fun and bubbly. Hot pink on soft blush, rounded everything,
   and the deepest sticker shadows on the site. */
[data-occasion="hen"]{
  --ink:        #FFF0F6;
  --ink-2:      #FFFFFF;
  --ink-3:      #2A1520;
  --hairline:   #F6D3E2;
  --chalk:      #2A1520;
  --chalk-dim:  #5F344A;

  --accent:      #D4176B;
  --on-accent:   #FFFFFF;
  --accent-soft: rgba(212,23,107,0.14);
  --price:       #C71460;

  --header-bg: rgba(255,240,246,0.92);
  --dot: radial-gradient(circle, rgba(255,62,143,0.16) 1.5px, transparent 2px);
  --check-a: #F3D9E5; --check-b: #E4BFD1;
  --bubble-hi: rgba(255,255,255,0.95); --bubble-lo: rgba(255,62,143,0.35);

  --font-display: 'Baloo 2', 'Trebuchet MS', sans-serif;
  --radius: 18px;
  --border-w: 2px;
  --lift: 5px 5px 0 var(--ink-3);
  --lift-sm: 3px 3px 0 var(--ink-3);
}
[data-occasion="hen"] h1,
[data-occasion="hen"] h2,
[data-occasion="hen"] h3{ font-weight:700; }
[data-occasion="hen"] .btn{ border-radius:999px; }

/* FESTIVAL — neon. Near-black field, electric lime and cyan, and the one
   theme where colours glow rather than sit flat. */
[data-occasion="festival"]{
  --ink:        #0B0D10;
  --ink-2:      #14181D;
  --ink-3:      #2B3440;
  --hairline:   #1E242B;
  --chalk:      #F2FFE0;
  --chalk-dim:  #B7CAAF;

  --accent:      #C7FF4D;
  --on-accent:   #0B0D10;
  --accent-soft: rgba(199,255,77,0.15);
  --price:       #C7FF4D;

  --header-bg: rgba(11,13,16,0.92);
  --dot: radial-gradient(circle, rgba(199,255,77,0.10) 1px, transparent 1.4px);
  --check-a: #202830; --check-b: #14181D;
  --bubble-hi: rgba(255,255,255,0.85); --bubble-lo: rgba(199,255,77,0.3);

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --radius: 3px;
  --border-w: 1px;
  --lift: none;
  --lift-sm: none;
}
[data-occasion="festival"] h1,
[data-occasion="festival"] h2{ text-transform:uppercase; }
[data-occasion="festival"] .hero h1 .accent,
[data-occasion="festival"] .page-hero h1 .accent{
  text-shadow:0 0 18px rgba(199,255,77,0.6), 0 0 46px rgba(199,255,77,0.3);
}
[data-occasion="festival"] .btn-primary{
  box-shadow:0 0 18px rgba(199,255,77,0.45);
}
[data-occasion="festival"] .tag{
  box-shadow:0 0 16px rgba(199,255,77,0.4);
}

/* PARTIES — the loudest use of the brand palette itself: yellow ground,
   red and blue against it, everything slightly off-square. */
[data-occasion="party"]{
  --ink:        #FFF6D8;
  --ink-2:      #FFFFFF;
  --ink-3:      #16141A;
  --hairline:   #F0DFA8;
  --chalk:      #16141A;
  --chalk-dim:  #453E2A;

  --accent:      #DE1E52;
  --on-accent:   #FFFFFF;
  --accent-soft: rgba(222,30,82,0.13);
  --price:       #1F6BAB;

  --header-bg: rgba(255,246,216,0.92);
  --dot: radial-gradient(circle, rgba(222,30,82,0.14) 1.5px, transparent 2px);
  --check-a: #EFE3C0; --check-b: #DCCEA6;
  --bubble-hi: rgba(255,255,255,0.95); --bubble-lo: rgba(222,30,82,0.3);

  --radius: 12px;
  --lift: 5px 5px 0 var(--ink-3);
}
[data-occasion="party"] .ticket:nth-child(odd),
[data-occasion="party"] .info-card:nth-child(even){ transform:rotate(-0.7deg); }

/* OTHER — the house brand, straight. Deliberately the plainest of the
   six: it's the "tell us the vibe" page, so it shouldn't presume one. */
[data-occasion="other"]{
  --accent:      #6F51D9;
  --on-accent:   #FFFFFF;
  --accent-soft: rgba(111,81,217,0.13);
  --price:       #5B3FC0;
  --dot: radial-gradient(circle, rgba(139,111,232,0.12) 1px, transparent 1.4px);
}

/* Per-theme grounds. A wash tuned for warm paper looks wrong on the dark
   themes, so each sets its own — and the two dark themes also swap the
   wavy divider to a light stroke. */
[data-occasion="wedding"]{
  --wash:
    radial-gradient(700px 700px at 8% 6%,   rgba(227,159,178,0.30), transparent 70%),
    radial-gradient(600px 600px at 94% 12%, rgba(214,196,176,0.34), transparent 70%),
    radial-gradient(560px 560px at 78% 72%, rgba(227,159,178,0.20), transparent 70%);
  /* Elegant means restrained: a few soft flecks, not a confetti storm. */
  --confetti:
    radial-gradient(circle at 18% 22%, rgba(156,80,105,0.10) 0 3px, transparent 4px),
    radial-gradient(circle at 71% 46%, rgba(156,80,105,0.08) 0 4px, transparent 5px),
    radial-gradient(circle at 39% 81%, rgba(156,80,105,0.09) 0 3px, transparent 4px);
  --confetti-size: 520px 520px;
  --band-tint: rgba(227,159,178,0.14);
  --band-warm: rgba(214,196,176,0.22);
}
[data-occasion="stag"]{
  --wash:
    radial-gradient(760px 760px at 12% 4%,  rgba(92,174,239,0.20), transparent 70%),
    radial-gradient(640px 640px at 90% 30%, rgba(92,174,239,0.12), transparent 70%),
    radial-gradient(700px 700px at 40% 92%, rgba(40,60,80,0.55),  transparent 70%);
  --confetti:
    radial-gradient(circle at 21% 17%, rgba(92,174,239,0.14) 0 4px, transparent 5px),
    radial-gradient(circle at 64% 38%, rgba(228,234,240,0.08) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 74%, rgba(92,174,239,0.10) 0 5px, transparent 6px),
    radial-gradient(circle at 33% 88%, rgba(228,234,240,0.06) 0 4px, transparent 5px);
  --confetti-size: 560px 560px;
  --wave-color: #5CAEEF;
  --band-tint: rgba(92,174,239,0.10);
  --band-warm: rgba(255,255,255,0.04);
}
[data-occasion="hen"]{
  --wash:
    radial-gradient(700px 700px at 6% 8%,   rgba(255,120,180,0.34), transparent 70%),
    radial-gradient(620px 620px at 92% 4%,  rgba(245,211,78,0.28),  transparent 70%),
    radial-gradient(660px 660px at 84% 58%, rgba(212,23,107,0.20),  transparent 70%),
    radial-gradient(580px 580px at 10% 84%, rgba(139,111,232,0.20), transparent 70%);
  --band-tint: rgba(212,23,107,0.09);
  --band-warm: rgba(245,211,78,0.22);
}
[data-occasion="festival"]{
  --wash:
    radial-gradient(720px 720px at 10% 6%,  rgba(199,255,77,0.20), transparent 70%),
    radial-gradient(640px 640px at 92% 22%, rgba(62,143,220,0.20), transparent 70%),
    radial-gradient(680px 680px at 74% 78%, rgba(222,30,82,0.16),  transparent 70%),
    radial-gradient(600px 600px at 22% 90%, rgba(199,255,77,0.12), transparent 70%);
  --confetti:
    radial-gradient(circle at 16% 13%, rgba(199,255,77,0.20) 0 4px, transparent 5px),
    radial-gradient(circle at 58% 27%, rgba(62,143,220,0.20) 0 5px, transparent 6px),
    radial-gradient(circle at 87% 52%, rgba(222,30,82,0.16)  0 4px, transparent 5px),
    radial-gradient(circle at 29% 66%, rgba(199,255,77,0.14) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 89%, rgba(62,143,220,0.14) 0 4px, transparent 5px);
  --confetti-size: 540px 540px;
  --wave-color: #C7FF4D;
  --band-tint: rgba(199,255,77,0.07);
  --band-warm: rgba(62,143,220,0.09);
}
[data-occasion="party"]{
  --wash:
    radial-gradient(700px 700px at 8% 6%,   rgba(245,211,78,0.65), transparent 70%),
    radial-gradient(620px 620px at 92% 8%,  rgba(75,159,225,0.34), transparent 70%),
    radial-gradient(660px 660px at 82% 62%, rgba(222,30,82,0.24),  transparent 70%),
    radial-gradient(600px 600px at 12% 82%, rgba(139,111,232,0.24), transparent 70%);
  --band-tint: rgba(75,159,225,0.13);
  --band-warm: rgba(222,30,82,0.10);
}
[data-occasion="other"]{
  --wash:
    radial-gradient(680px 680px at 10% 8%,  rgba(139,111,232,0.30), transparent 70%),
    radial-gradient(600px 600px at 90% 14%, rgba(75,159,225,0.24),  transparent 70%),
    radial-gradient(620px 620px at 78% 70%, rgba(245,211,78,0.28),  transparent 70%);
  --band-tint: rgba(139,111,232,0.11);
}