@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;1,500;1,600&family=Work+Sans:wght@400;500;600&family=Caveat:wght@500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* Golden Soul Circus — component styles. Loads after tokens.css.
   Naming: block-part for pieces (ticket-stub), --modifier for variants. */
:root{
  --fs-xs:.8rem; --fs-sm:.92rem; --fs-base:1.06rem; --fs-md:1.25rem;
  --fs-lg:clamp(1.3rem, 3.5vw, 1.65rem);
  --fs-xl:clamp(1.8rem, 4.4vw, 2.4rem);
  --fs-2xl:clamp(2rem, 5.5vw, 3.1rem);
  --fs-script:1.55rem; --fs-script-sm:1.35rem;
  --lh-tight:1.15; --lh-snug:1.3; --lh-body:1.55;
  --fw-medium:500; --fw-bold:600;
  --ease:ease; --dur-fast:160ms; --dur-med:320ms; --dur-slow:900ms; --dur-loop:2.4s;
  --accordion-ring:var(--text); --accordion-bar:var(--text);
  --accordion-fill:var(--amber); --accordion-bar-on:var(--ink);
}
body{margin:0; background:var(--page); color:var(--text); font-family:var(--font-body); font-size:17px; line-height:var(--lh-body);}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important; transition:none !important;} }

/* Type */
.title{font-family:var(--font-display); font-weight:var(--fw-medium); line-height:var(--lh-tight); letter-spacing:-.01em; font-size:var(--fs-xl); margin:0 0 .5em;}
.title--display{font-size:var(--fs-2xl); font-style:italic; max-width:14ch;}
.title--tagline{font-style:italic; line-height:1.2; margin:0 0 var(--space-1);}
.title--quiet{font-size:var(--fs-lg); line-height:var(--lh-snug); margin-bottom:.4em;}
.title--card{font-size:var(--fs-md); margin-bottom:var(--space-1);}
.lede{font-size:var(--fs-base); font-weight:var(--fw-medium); margin:0 0 1em;}
.lede--soft{color:var(--text-soft); font-weight:400;}
.lede--display{font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-lg); line-height:1.25;}
.script{font-family:var(--font-script); font-size:var(--fs-script); line-height:1.25; color:var(--accent-text); margin:0 0 1em;}
.script--sm{font-size:var(--fs-script-sm); line-height:1.2;}
.eyebrow{font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.04em; margin:0 0 var(--space-3);}
.note{font-size:var(--fs-sm); font-weight:var(--fw-medium);}
.note--fine{font-style:italic; font-weight:400;}
.link-accent{font-weight:var(--fw-bold); color:var(--accent-text);}

/* Wordmark */
.wordmark{font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-base); color:var(--text);}
.wordmark span{color:var(--accent-text);}

/* Bright bands: always ink text; buttons, fields, toggles and focus re-point */
.on-bright{
  color:var(--ink);
  --focus:var(--ink);
  --btn-bg:var(--ink); --btn-fg:var(--amber);
  --accent-text:var(--rouge-deep);
  --field-bg:var(--white-55); --field-fg:var(--ink);
  --field-line:var(--ink-70); --field-placeholder:var(--ink-75);
  --accordion-ring:var(--ink); --accordion-bar:var(--ink);
  --accordion-fill:var(--ink); --accordion-bar-on:var(--amber);
}
.band{padding:var(--section-y-tight) var(--gutter);}
.band--blue{--valance:var(--blue); background:var(--blue);}
.band--amber{--valance:var(--amber); background:var(--amber);}
.band--rouge{--valance:var(--rouge); background:var(--rouge);}
.band--aqua{--valance:var(--aqua); background:var(--aqua);}
.valance{position:relative; z-index:1;}
.valance::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:14px; pointer-events:none;
  background:radial-gradient(circle at 14px 0, var(--valance) 13.5px, transparent 14px) 0 0/28px 14px repeat-x;
}

/* Button */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:44px; padding:10px 18px;
  border:var(--bw) solid transparent; border-radius:var(--r-pill);
  font-family:var(--font-body); font-size:var(--fs-sm); font-weight:var(--fw-bold); line-height:1.2;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.btn--primary{background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg);}
.btn--primary:hover:not(:disabled){background:var(--amber); color:var(--ink); border-color:var(--amber);}
.btn--outline{background:transparent; color:var(--text); border-color:var(--text);}
.on-bright .btn--outline{color:var(--ink); border-color:var(--ink);}
.btn--outline:hover:not(:disabled){background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg);}
.btn--lg{padding:15px 32px; font-size:var(--fs-base);}
.btn--tilt{transform:rotate(-1.5deg);}
.btn--tilt:hover{transform:rotate(0deg) scale(1.03);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn[aria-busy="true"]{cursor:progress;}
.btn[aria-busy="true"]::before{content:""; width:14px; height:14px; border-radius:var(--r-round); border:2px solid currentColor; border-right-color:transparent; animation:gsc-spin 700ms linear infinite;}
@keyframes gsc-spin{to{transform:rotate(360deg);}}

/* Tag */
.tag{display:inline-block; font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.06em; padding:3px 9px; border-radius:var(--r-pill);}
.tag--brick{background:var(--brick); color:var(--white);}

/* Cup dots */
.cup-dots{display:flex; gap:var(--space-2);}
.cup-dots span{width:14px; height:14px; border-radius:var(--r-round);}
.cup-dots span:nth-child(1){background:var(--brick);}
.cup-dots span:nth-child(2){background:var(--aqua);}
.cup-dots span:nth-child(3){background:var(--amber);}
.cup-dots--sm{gap:5px;}
.cup-dots--sm span{width:9px; height:9px;}

/* Accordion */
.accordion-toggle{
  position:relative; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:40px; height:40px; padding:0; background:transparent;
  border:var(--bw) dashed var(--accordion-ring); border-radius:var(--r-round); cursor:pointer;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.accordion-toggle::after{content:""; position:absolute; inset:-5px; border-radius:var(--r-round);}
.accordion-toggle:hover{transform:scale(1.06);}
.accordion-bar{position:absolute; top:50%; left:50%; background:var(--accordion-bar); border-radius:var(--r-xs); transition:transform 260ms var(--ease), background var(--dur-fast) var(--ease);}
.accordion-bar--h{width:14px; height:2.5px; transform:translate(-50%,-50%);}
.accordion-bar--v{width:2.5px; height:14px; transform:translate(-50%,-50%);}
.accordion-toggle[aria-expanded="true"] .accordion-bar--v{transform:translate(-50%,-50%) rotate(90deg);}
.accordion-toggle:hover, .accordion-toggle[aria-expanded="true"]{background:var(--accordion-fill); border-color:var(--accordion-fill); border-style:solid;}
.accordion-toggle:hover .accordion-bar, .accordion-toggle[aria-expanded="true"] .accordion-bar{background:var(--accordion-bar-on);}
.accordion-panel{overflow:hidden; max-height:0; transition:max-height var(--dur-med) var(--ease);}
.accordion-panel > :first-child{margin-top:18px;}
.accordion-panel > :last-child{margin-bottom:0;}

/* Field */
.field{
  min-height:44px; padding:10px 14px;
  background:var(--field-bg); color:var(--field-fg);
  border:var(--bw) solid var(--field-line); border-radius:var(--r-sm);
  font-family:var(--font-body); font-size:var(--fs-sm);
}
.on-bright .field{color-scheme:light;}
.field::placeholder{color:var(--field-placeholder);}
.field[aria-invalid="true"]{border-color:var(--field-fg); border-width:2.5px; background:var(--white);}
textarea.field{resize:vertical; line-height:1.45;}
.field-wrap{display:flex; flex-direction:column; gap:5px;}
.field-wrap .field{width:100%;}
.field-label{font-size:var(--fs-sm); font-weight:var(--fw-bold);}
.field-label .req{font-weight:var(--fw-medium);}

/* Choice pill */
.pill-row{display:flex; flex-wrap:wrap; gap:10px;}
.pill{
  min-height:44px; padding:10px 17px;
  background:var(--white-28); color:var(--ink);
  border:var(--bw) solid var(--ink-70); border-radius:var(--r-pill);
  font-family:var(--font-body); font-size:var(--fs-sm); font-weight:var(--fw-medium); cursor:pointer;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pill:hover{border-color:var(--ink); background:var(--white-50);}
.pill[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--mint); font-weight:var(--fw-bold);}

/* Callout */
.callout{
  position:relative; background:var(--surface);
  border-left:6px solid var(--rouge); border-radius:var(--r-md);
  padding:var(--space-5) 26px var(--space-5) var(--space-5);
  box-shadow:var(--shadow-card);
}
.callout .cup-dots{position:absolute; top:var(--space-4); right:18px;}
.callout-lead{margin:0 40px 6px 0;}
.callout-text{font-family:var(--font-display); font-size:var(--fs-md); line-height:1.45; margin:0;}

/* Ticket card */
.ticket{
  --stub-w:78px; position:relative; display:grid; grid-template-columns:var(--stub-w) 1fr;
  background:var(--surface); border-radius:var(--r-md); box-shadow:var(--shadow-card);
}
.ticket::before,.ticket::after{content:""; position:absolute; left:calc(var(--stub-w) - 10px); width:20px; height:20px; border-radius:var(--r-round); background:var(--page); z-index:2;}
.ticket::before{top:-10px;}
.ticket::after{bottom:-10px;}
.ticket-stub{background:var(--stub); color:var(--ink); border-radius:var(--r-md) 0 0 var(--r-md); display:flex; justify-content:center; align-items:flex-start; padding-top:var(--space-5);}
.ticket-stub svg{width:36px; height:36px; transform:rotate(-6deg);}
.ticket-body{min-width:0; padding:22px 22px 22px var(--space-5); border-left:var(--bw-strong) dashed var(--line);}
.ticket .tag{margin-bottom:var(--space-3);}
.ticket .script{margin:0 0 var(--space-1);}
.ticket-audience{font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--text-soft); margin:var(--space-1) 0 0;}
.ticket-actions{display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-4); flex-wrap:wrap;}
.ticket .accordion-panel p:not(.script){font-size:var(--fs-sm); color:var(--text-soft);}
.ticket--funeral{--stub:var(--rouge);}
.ticket--reiki{--stub:var(--aqua);}
.ticket--pal{--stub:var(--amber);}
.ticket--sidequest{--stub:var(--blue);}
.ticket--mixers{--stub:var(--brick);}
.ticket--mixers .ticket-stub{color:var(--white);}
@media (max-width:440px){ .ticket{--stub-w:58px;} .ticket-stub svg{width:30px; height:30px;} .ticket-body{padding:20px 18px 20px 20px;} }

/* Request card */
.request-card{background:var(--white); color:var(--ink); border:var(--bw-strong) dashed var(--ink); border-radius:var(--r-md); padding:22px var(--space-5);}
.request-card .title--card{color:var(--rouge-deep); margin-bottom:var(--space-2);}
.request-line{font-size:var(--fs-sm); margin-bottom:var(--space-1);}
.request-note{margin-top:14px; padding-top:var(--space-3); border-top:var(--bw-hair) solid var(--ink-18); font-size:var(--fs-xs); font-style:italic; color:var(--ink-75);}

/* Give card + sponsor tile */
.give-card{background:var(--white); color:var(--ink); border-radius:var(--r-md); padding:var(--space-5); box-shadow:var(--shadow-card); max-width:600px;}
.give-actions{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;}
.sponsor-wall{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-3);}
@media (min-width:640px){ .sponsor-wall{grid-template-columns:repeat(4, 1fr);} }
.sponsor-tile{min-height:104px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-1); padding:var(--space-4); text-align:center; background:var(--white-55); border:var(--bw-strong) dashed var(--ink-70); border-radius:var(--r-md); font-family:var(--font-display); font-size:var(--fs-base);}
.sponsor-tile span{font-family:var(--font-body); font-size:var(--fs-sm); color:var(--ink-75);}

/* Review card */
.review{margin:0; background:var(--surface); border-radius:var(--r-md); padding:var(--space-5); box-shadow:var(--shadow-card);}
.review::before{content:"\201C"; display:block; font-family:var(--font-script); font-size:3.4rem; line-height:.7; color:var(--accent-text); margin-bottom:var(--space-2);}
.review blockquote{margin:0;}
.review p{font-family:var(--font-display); font-size:var(--fs-base); line-height:1.45; margin:0;}
.review figcaption{margin-top:var(--space-3); font-size:var(--fs-sm); color:var(--text-soft);}

/* Photo frame (snapshot) */
.photo{margin:0; background:var(--white); padding:6px 6px 18px; border-radius:var(--r-xs); box-shadow:0 10px 22px -14px rgba(20,33,61,.55); transition:transform var(--dur-fast) var(--ease);}
.photo:nth-child(3n+1){transform:rotate(-2.5deg);}
.photo:nth-child(3n+2){transform:rotate(1.5deg) translateY(6px);}
.photo:nth-child(3n){transform:rotate(-1deg);}
.photo:hover{transform:rotate(0deg) scale(1.03);}
.photo img{display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; border-radius:1px;}
.photo figcaption{margin:var(--space-2) 2px 0; text-align:center; font-family:var(--font-script); font-size:var(--fs-script-sm); line-height:1.1; color:var(--rouge-deep);}
.photo-ph{aspect-ratio:1 / 1; display:flex; align-items:center; justify-content:center; background:var(--ph, var(--blue)); border-radius:1px;}
.photo-ph span{font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.06em; color:var(--ink); text-align:center; padding:0 var(--space-2);}