/* anointed2laugh.com stylesheet — VERSION 43 */
/* =========================================================
   anointed2laugh.com — main stylesheet
   1. Tokens
   2. Base
   3. Layout helpers
   4. Buttons
   5. Header + nav
   6. Hero slider
   7. Ticker
   8. Origins
   9. Gallery
   10. Video
   11. Booking band
   12. Footer
   13. Motion preferences
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:        #16110e;
  --ink-soft:   #2a221d;
  --paper:      #fbf6ec;
  --sand:       #e9dcc4;
  --lime:       #781eb8;
  --lime-dark:  #5c1490;
  --tangerine:  #ef6c12;
  --bulb:       #ffc93c;

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Newsreader", Georgia, "Times New Roman", serif;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --radius: 4px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--lime-dark); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--tangerine); }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-0.02em;
  margin:0 0 .5em;
}

p{ margin:0 0 1.15em; }
ul{ margin:0; padding:0; }
li{ list-style:none; }

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

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1.25rem; font-family:var(--font-display); font-weight:700;
}
.skip:focus{ left:0; }

/* ---------- 3. Layout helpers ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ padding-block:var(--section-y); }

.h-section{
  font-size:clamp(2rem, 4.2vw, 3.25rem);
  max-width:16ch;
}
.h-section--light{ color:var(--paper); }

.lede{
  font-size:clamp(1.2rem, 1.4vw + .9rem, 1.55rem);
  line-height:1.45;
  font-style:italic;
  color:var(--ink-soft);
  max-width:32ch;
}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.01em;
  text-decoration:none;
  padding:.85rem 1.6rem;
  border-radius:var(--radius);
  border:2px solid transparent;
  transition:transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:active{ transform:translateY(1px); }

.btn--lime{ background:var(--lime); color:#fff; }
.btn--lime:hover{ background:var(--tangerine); color:#fff; }

.btn--ink{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ink:hover{ background:var(--ink); color:var(--paper); }

.btn--big{ font-size:1.1rem; padding:1.05rem 2.2rem; }

/* ---------- 5. Header + nav ---------- */
.masthead{
  background:var(--ink);
  color:var(--paper);
  position:relative;
  z-index:50;
}

.masthead__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  min-height:88px;
}

.brand{
  display:flex; align-items:center; gap:.75rem;
  color:var(--paper); text-decoration:none;
}
.brand__mark{ width:52px; height:52px; object-fit:contain; }
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__name{
  font-family:var(--font-display); font-weight:800;
  font-size:1.35rem; letter-spacing:-.02em;
}
.brand__tag{ font-size:.8rem; color:var(--sand); opacity:.75; }

.mainnav__list{
  display:flex; align-items:center; gap:.25rem; flex-wrap:wrap;
}
.mainnav__list a{
  display:block;
  font-family:var(--font-display);
  font-weight:500;
  font-size:.94rem;
  color:var(--paper);
  text-decoration:none;
  padding:.5rem .7rem;
  border-radius:var(--radius);
}
.mainnav__list a:hover,
.mainnav__list a[aria-current="page"]{
  color:var(--bulb);
}
.mainnav__list .mainnav__cta{
  background:var(--lime); color:#fff; margin-left:.5rem;
}
.mainnav__list .mainnav__cta:hover{ background:var(--tangerine); color:#fff; }

.burger{
  display:none;
  width:46px; height:40px;
  background:none; border:0; cursor:pointer;
  padding:9px 8px;
}
.burger__bar{
  display:block; height:2px; background:var(--paper);
  margin:5px 0; transition:transform .25s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] .burger__bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1100px){
  .burger{ display:block; }
  .mainnav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--ink-soft);
    border-top:1px solid rgba(233,220,196,.18);
    display:none;
  }
  .mainnav.is-open{ display:block; }
  .mainnav__list{
    flex-direction:column; align-items:stretch;
    gap:0; padding:.5rem var(--gutter) 1.5rem;
  }
  .mainnav__list a{
    padding:.85rem .25rem; font-size:1.05rem;
    border-bottom:1px solid rgba(233,220,196,.12);
  }
  .mainnav__list .mainnav__cta{
    margin:1rem 0 0; text-align:center; border-bottom:0;
  }
}

/* ---------- 6. Hero slider ---------- */
.stage{
  position:relative;
  background:var(--ink);
  overflow:hidden;
}

.stage__bulbs{
  position:absolute; left:0; right:0; height:16px; z-index:6;
  background-image:radial-gradient(circle at center, var(--bulb) 0 3px, rgba(255,201,60,.15) 3.5px 4.5px, transparent 5px);
  background-size:30px 16px;
  background-repeat:repeat-x;
  background-position:center;
  animation:bulbGlow 2.4s ease-in-out infinite alternate;
}
.stage__bulbs--top{ top:0; }
.stage__bulbs--bottom{ bottom:0; animation-delay:1.2s; }

@keyframes bulbGlow{
  from{ opacity:.55; }
  to{ opacity:1; }
}

.stage__viewport{
  position:relative;
  height:clamp(440px, 74vh, 720px);
  touch-action:pan-y;
}

.slides{
  position:absolute; inset:0;
}

.slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .9s ease, visibility .9s;
}
.slide.is-active{ opacity:1; visibility:visible; z-index:2; }

.slide__img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 28%;
  transform:scale(1.06);
}
.slide.is-active .slide__img{
  animation:kenburns 9s ease-out forwards;
}
@keyframes kenburns{
  from{ transform:scale(1.06); }
  to{ transform:scale(1.16); }
}

.slide__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(22,17,14,.92) 0%, rgba(22,17,14,.55) 42%, rgba(22,17,14,.18) 75%),
    linear-gradient(to right, rgba(22,17,14,.7), rgba(22,17,14,0) 65%);
}

.slide__copy{
  position:absolute; left:0; right:0; bottom:clamp(3.5rem, 8vh, 6rem);
  color:var(--paper);
}

.slide__kicker{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bulb);
  margin:0 0 .6rem;
}

.slide__title{
  font-size:clamp(2.75rem, 9vw, 6.5rem);
  line-height:.92;
  margin:0 0 .35em;
  text-shadow:0 6px 30px rgba(0,0,0,.45);
}

.slide__line{
  font-size:clamp(1.1rem, 1.2vw + .9rem, 1.4rem);
  max-width:34ch;
  margin:0 0 1.6rem;
  color:#f3ece0;
}

/* staged entrance for the active slide only */
.slide.is-active .slide__kicker,
.slide.is-active .slide__title,
.slide.is-active .slide__line,
.slide.is-active .btn{
  animation:copyIn .7s cubic-bezier(.2,.7,.3,1) backwards;
}
.slide.is-active .slide__kicker{ animation-delay:.15s; }
.slide.is-active .slide__title{ animation-delay:.28s; }
.slide.is-active .slide__line{ animation-delay:.41s; }
.slide.is-active .btn{ animation-delay:.54s; }

@keyframes copyIn{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:none; }
}

.stage__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:8;
  width:52px; height:52px;
  display:grid; place-items:center;
  background:rgba(22,17,14,.45);
  color:var(--paper);
  border:2px solid rgba(251,246,236,.35);
  border-radius:50%;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease;
}
.stage__arrow:hover{ background:var(--lime); border-color:var(--lime); }
.stage__arrow svg{ width:22px; height:22px; }
.stage__arrow--prev{ left:clamp(.6rem, 2vw, 1.75rem); }
.stage__arrow--next{ right:clamp(.6rem, 2vw, 1.75rem); }

.stage__dots{
  position:absolute; z-index:8;
  left:0; right:0; bottom:clamp(1.4rem, 3vh, 2.25rem);
  display:flex; justify-content:center; gap:.55rem;
}
.stage__dot{
  width:34px; height:5px;
  background:rgba(251,246,236,.35);
  border:0; padding:0; cursor:pointer; border-radius:99px;
  transition:background-color .25s ease, width .25s ease;
}
.stage__dot:hover{ background:rgba(251,246,236,.65); }
.stage__dot[aria-selected="true"]{ background:var(--bulb); width:52px; }

@media (max-width:640px){
  .stage__arrow{ width:42px; height:42px; }
  .slide__scrim{ background:linear-gradient(to top, rgba(22,17,14,.94) 12%, rgba(22,17,14,.35) 70%); }
}

/* ---------- 7. Ticker ---------- */
.ticker{
  background:var(--tangerine);
  color:#fff;
  overflow:hidden;
  padding-block:.7rem;
  border-block:3px solid var(--ink);
}
.ticker__track{
  display:flex; align-items:center; gap:1.5rem;
  width:max-content;
  animation:tickerRoll 38s linear infinite;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
  white-space:nowrap;
}
.ticker__dot{
  width:7px; height:7px; border-radius:50%; background:var(--bulb); flex:none;
}
@keyframes tickerRoll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- 8. Origins ---------- */
.origins__grid{
  display:grid;
  grid-template-columns:minmax(260px, 380px) 1fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}

.origins__portrait{
  margin:0;
  position:relative;
}
.origins__portrait img{
  width:100%;
  border-radius:var(--radius);
  border:6px solid var(--ink);
}
.origins__portrait::after{
  content:"";
  position:absolute; inset:14px -14px -14px 14px;
  border:2px solid var(--lime);
  border-radius:var(--radius);
  z-index:-1;
}

.origins__body p{ max-width:66ch; }
.origins__body .lede{ margin-bottom:1.4rem; }
.origins__body .btn{ margin-top:.75rem; }

@media (max-width:860px){
  .origins__grid{ grid-template-columns:1fr; }
  .origins__portrait{ max-width:420px; }
}

/* ---------- 9. Gallery ---------- */
.gallery{
  background:var(--sand);
  padding-block:var(--section-y);
}
.gallery .h-section{ margin-bottom:1.75rem; }

.gallery__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(140px, 21vw, 240px), 1fr));
  gap:clamp(.6rem, 1.4vw, 1.1rem);
}
.gallery__grid img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--radius);
  transition:transform .3s ease;
}
.gallery__grid li:hover img{ transform:scale(1.03); }

/* ---------- 10. Video ---------- */
.reel{
  background:var(--ink);
  color:var(--paper);
  padding-block:var(--section-y);
}
.reel__intro{ max-width:50ch; margin-bottom:2.25rem; }
.reel__intro p{ color:var(--sand); margin:0; }

.reel__player{
  position:relative;
  aspect-ratio:16/9;
  background:#000;
  border-radius:var(--radius);
  overflow:hidden;
  border:3px solid var(--bulb);
}
.reel__player iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.reel__play{
  position:absolute; inset:0;
  width:100%; height:100%;
  padding:0; border:0; cursor:pointer;
  background:#000;
  display:grid; place-items:center;
}
.reel__play img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.72; transition:opacity .3s ease;
}
.reel__play:hover img{ opacity:.55; }
.reel__triangle{
  position:relative;
  width:0; height:0;
  border-left:30px solid var(--ink);
  border-top:19px solid transparent;
  border-bottom:19px solid transparent;
  margin-left:8px;
}
.reel__play::after{
  content:"";
  position:absolute;
  width:86px; height:86px;
  border-radius:50%;
  background:var(--bulb);
  transition:transform .25s ease, background-color .25s ease;
}
.reel__play:hover::after{ transform:scale(1.08); background:var(--lime); }
.reel__triangle{ z-index:2; }

/* ---------- 11. Booking band ---------- */
.band{
  background:var(--lime);
  color:#fff;
  padding-block:clamp(2.75rem, 6vw, 4.5rem);
}
.band__inner{ text-align:center; }
.band__title{
  font-size:clamp(1.9rem, 4vw, 3rem);
  margin-bottom:.35em;
}
.band__text{
  max-width:44ch; margin:0 auto 1.75rem;
  color:#f2fbef;
}

/* ---------- 12. Footer ---------- */
.foot{
  background:var(--ink);
  color:var(--sand);
  padding-top:clamp(3rem, 6vw, 4.5rem);
}
.foot a{ color:var(--sand); text-decoration:none; }
.foot a:hover{ color:var(--bulb); }

.foot__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:clamp(1.75rem, 4vw, 3rem);
  padding-bottom:2.75rem;
}
@media (max-width:820px){
  .foot__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .foot__grid{ grid-template-columns:1fr; }
}

.foot__name{
  font-family:var(--font-display); font-weight:800;
  font-size:1.3rem; color:var(--paper); margin:0 0 .5rem;
}
.foot__blurb{ font-size:1rem; max-width:34ch; }

.foot__head{
  font-size:.85rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--bulb); margin:0 0 .9rem;
}
.foot__list{ font-size:1rem; }
.foot__list li{ margin-bottom:.5rem; }

.social{ display:flex; gap:1rem; font-size:.95rem; }

.foot__base{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  border-top:1px solid rgba(233,220,196,.18);
  padding-block:1.25rem;
  font-size:.9rem;
}
.foot__base p{ margin:0; }

/* ---------- 13. Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .slide.is-active .slide__img{ animation:none; transform:scale(1.06); }
}

/* =========================================================
   INTERIOR PAGES
   14. Page header + breadcrumb
   15. Split layout
   16. Prose
   17. Awards
   18. Video grid
   19. Quotes
   20. Shop grid
   21. Conference
   22. Contact form
   ========================================================= */

/* ---------- 14. Page header ---------- */
.pagehead{
  background:var(--ink);
  color:var(--paper);
  padding-block:clamp(2.5rem, 6vw, 4.5rem);
  border-bottom:6px solid var(--bulb);
}
.pagehead__title{
  font-size:clamp(2.4rem, 6vw, 4.5rem);
  margin:0 0 .35em;
}
.pagehead__sub{
  color:var(--sand);
  font-size:clamp(1.05rem, 1vw + .85rem, 1.3rem);
  max-width:44ch;
  margin:0;
}

.crumbs{
  font-family:var(--font-display);
  font-size:.85rem;
  letter-spacing:.04em;
  color:var(--sand);
  margin-bottom:1.25rem;
}
.crumbs a{ color:var(--bulb); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }
.crumbs span{ opacity:.7; }

/* ---------- 15. Split layout ---------- */
.split{
  display:grid;
  grid-template-columns:minmax(240px, 400px) 1fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}
.split--reverse{ grid-template-columns:1fr minmax(240px, 380px); }
.split--reverse .split__media{ order:2; }

.split__media{ margin:0; position:relative; }
.split__media img{
  width:100%;
  border-radius:var(--radius);
  border:6px solid var(--ink);
}
.split__media--book img{ border-color:var(--bulb); }

@media (max-width:860px){
  .split,
  .split--reverse{ grid-template-columns:1fr; }
  .split--reverse .split__media{ order:0; }
  .split__media{ max-width:420px; }
}

/* ---------- 16. Prose ---------- */
.prose p{ max-width:66ch; }
.prose--wide{ max-width:70ch; }
.prose .lede{ margin-bottom:1.4rem; }
.prose__actions{
  display:flex; flex-wrap:wrap; gap:.75rem;
  margin-top:1.5rem;
}

/* ---------- 17. Awards ---------- */
.awards{ background:var(--sand); }
.awards__list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1.5rem 2.5rem;
  margin-top:1.5rem;
}
.awards__list li{
  border-top:2px solid var(--ink);
  padding-top:.85rem;
}
.awards__list strong{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  line-height:1.2;
  margin-bottom:.2rem;
}
.awards__list span{ font-size:.98rem; color:var(--ink-soft); }

/* ---------- 18. Video grid ---------- */
.videos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:clamp(1rem, 2.5vw, 1.75rem);
  margin-top:1.5rem;
}
.videos .reel__player{ border-width:2px; }
.videos .reel__play::after{ width:64px; height:64px; }
.videos .reel__triangle{
  border-left-width:22px;
  border-top-width:14px;
  border-bottom-width:14px;
  margin-left:6px;
}

/* ---------- 19. Quotes ---------- */
.quotes{
  columns:2;
  column-gap:clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width:820px){ .quotes{ columns:1; } }

.quote{
  break-inside:avoid;
  margin-bottom:clamp(1.5rem, 3vw, 2.25rem);
  background:#fff;
  border-left:5px solid var(--lime);
  border-radius:var(--radius);
  padding:clamp(1.4rem, 3vw, 2rem);
}
.quote blockquote{ margin:0; }
.quote blockquote p{
  margin:0;
  font-size:1.05rem;
  line-height:1.6;
}
.quote__by{
  font-family:var(--font-display);
  font-weight:700;
  margin:1.1rem 0 0;
  line-height:1.3;
}
.quote__by span{
  display:block;
  font-weight:500;
  font-size:.9rem;
  color:var(--ink-soft);
}

/* ---------- 20. Shop grid ---------- */
.shop__note{
  background:var(--sand);
  border-left:5px solid var(--tangerine);
  padding:1rem 1.25rem;
  font-size:1rem;
  margin-bottom:2rem;
  max-width:70ch;
}
.shop__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(220px, 26vw, 280px), 1fr));
  gap:clamp(1.25rem, 3vw, 2.25rem);
}
.item img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--radius);
  border:3px solid var(--ink);
  margin-bottom:.9rem;
}
.item__name{
  font-size:1.2rem;
  margin:0 0 .3rem;
}
.item__price{
  font-size:.98rem;
  color:var(--ink-soft);
  margin:0 0 1rem;
}

/* ---------- 21. Conference ---------- */
.conf{
  display:grid;
  grid-template-columns:minmax(260px, 340px) 1fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
@media (max-width:860px){ .conf{ grid-template-columns:1fr; } }

.conf__facts{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(1.5rem, 3vw, 2.25rem);
  border-radius:var(--radius);
  border-top:6px solid var(--bulb);
}
.conf__facts dl{ margin:0 0 1.5rem; }
.conf__facts div{ margin-bottom:1.15rem; }
.conf__facts dt{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bulb);
  margin-bottom:.25rem;
}
.conf__facts dd{ margin:0; line-height:1.45; }
.conf__facts .muted{ color:var(--sand); font-size:.95rem; }
.conf__note{
  font-style:italic;
  color:var(--sand);
  margin-bottom:1.25rem;
}
.conf__facts .btn{ display:block; text-align:center; margin-bottom:.7rem; }
.conf__facts .btn--ink{ color:var(--paper); border-color:var(--sand); }
.conf__facts .btn--ink:hover{ background:var(--paper); color:var(--ink); }

.conf__flyer{
  width:100%;
  max-width:760px;
  margin-inline:auto;
  border-radius:var(--radius);
  border:5px solid var(--ink);
}

/* ---------- Notices ---------- */
.notice{
  max-width:60ch;
  margin-inline:auto;
  text-align:center;
  padding-block:clamp(3rem, 8vw, 6rem);
}
.notice h1{ font-size:clamp(2rem, 5vw, 3.25rem); }

/* ---------- 23. Screenshot wall (testimonials) ---------- */
/* Screenshots hold text, so these must never be cropped to a square. */
.shots{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(1.25rem, 3vw, 2.5rem);
  align-items:start;
  margin-top:1.5rem;
  max-width:860px;
  margin-inline:auto;
}
@media (max-width:700px){
  .shots{ grid-template-columns:1fr; max-width:460px; }
}
.shots img{
  width:100%;
  height:auto;
  border-radius:var(--radius);
  border:3px solid var(--ink);
  background:#fff;
  transition:transform .2s ease;
}
.shots a{ display:block; }
.shots a:hover img,
.shots a:focus-visible img{ transform:translateY(-3px); }

/* ---------- 24. Store groups ---------- */
/* Consecutive shop sections would otherwise double up their padding. */
.shop + .shop{ padding-top:0; }
.shop--intro{ padding-bottom:0; }
.shop--intro .shop__note{ margin-bottom:0; }
.shop .h-section{ font-size:clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom:1.5rem; }

/* ---------- 26. Form status and validation ---------- */
.form-status{
  display:none;
  border-radius:var(--radius);
  padding:.9rem 1.1rem;
  margin-bottom:1.25rem;
  font-size:1rem;
  font-family:var(--font-display);
  font-weight:700;
}
.form-status.show{ display:block; }
.form-status.ok{
  background:#f2e8fb;
  color:var(--lime-dark);
  border:2px solid var(--lime);
}
.form-status.bad{
  background:#fdecea;
  color:#a32b1c;
  border:2px solid #d94a36;
}

.field .req{ color:var(--tangerine); }

.field .err{
  display:none;
  margin-top:.35rem;
  font-size:.9rem;
  font-family:var(--font-display);
  font-weight:500;
  color:#a32b1c;
}
.field.has-error .err{ display:block; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color:#d94a36;
  background:#fffafa;
}

/* ---------- 22. Booking page ---------- */
.booking{
  display:grid;
  grid-template-columns:minmax(260px, 360px) 1fr;
  gap:clamp(1.75rem, 4vw, 3.5rem);
  align-items:start;
}
@media (max-width:900px){
  .booking{ grid-template-columns:1fr; }
}

/* Contact card */
.bookcard{
  background:var(--ink);
  color:var(--paper);
  border-radius:var(--radius);
  padding:clamp(1.6rem, 3vw, 2.25rem);
  position:relative;
  overflow:hidden;
}
.bookcard::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:14px;
  background-image:radial-gradient(circle at center, var(--bulb) 0 2.5px, transparent 3px);
  background-size:26px 14px;
  background-repeat:repeat-x;
  background-position:center;
}
.bookcard__eyebrow{
  margin:1.1rem 0 .3rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bulb);
}
.bookcard__phone{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.75rem, 3.4vw, 2.3rem);
  letter-spacing:-.02em;
  line-height:1.05;
  color:var(--paper);
  text-decoration:none;
  margin-bottom:1.6rem;
}
.bookcard__phone:hover{ color:var(--bulb); }

.bookcard__list{ margin:0 0 1.5rem; }
.bookcard__list div{
  padding-top:.9rem;
  margin-bottom:.9rem;
  border-top:1px solid rgba(233,220,196,.2);
}
.bookcard__list dt{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--bulb);
  margin-bottom:.25rem;
}
.bookcard__list dd{ margin:0; font-size:1rem; line-height:1.5; color:var(--sand); }
.bookcard__list a{ color:var(--paper); }
.bookcard__list a:hover{ color:var(--bulb); }

.bookcard__social{
  display:flex; flex-wrap:wrap; gap:1rem;
  font-family:var(--font-display);
  font-weight:500;
  font-size:.92rem;
}
.bookcard__social a{ color:var(--sand); text-decoration:none; }
.bookcard__social a:hover{ color:var(--bulb); }

/* Form card */
.contact__form{
  background:#fff;
  border-radius:var(--radius);
  padding:clamp(1.6rem, 3.5vw, 2.75rem);
  border-top:6px solid var(--lime);
}
.formhead{
  font-size:clamp(1.7rem, 3.2vw, 2.4rem);
  margin:0 0 .35rem;
}
.formhead__sub{
  color:var(--ink-soft);
  font-size:1.02rem;
  max-width:46ch;
  margin:0 0 1.75rem;
}

.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 1.25rem;
}
@media (max-width:560px){
  .field-row{ grid-template-columns:1fr; }
}

.field{ margin:0 0 1.25rem; }
.field label{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.92rem;
  margin-bottom:.4rem;
}
.field .opt{ font-weight:500; color:var(--ink-soft); font-size:.84rem; }
.field .req{ color:var(--tangerine); }

.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:1.05rem;
  padding:.75rem .9rem;
  border:2px solid var(--sand);
  border-radius:var(--radius);
  background:var(--paper);
  color:var(--ink);
}
.field textarea{ resize:vertical; }
.field textarea::placeholder{ color:#9a8f80; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--lime);
  background:#fff;
  outline:none;
}

.btn--block{ display:block; width:100%; text-align:center; }

.formnote{
  margin:1rem 0 0;
  font-size:.95rem;
  color:var(--ink-soft);
  text-align:center;
}

.hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

/* ---------- 27. About page ---------- */
.split__caption{
  margin-top:.75rem;
  font-family:var(--font-display);
  font-weight:500;
  font-size:.9rem;
  letter-spacing:.02em;
  color:var(--ink-soft);
}

.strands{ background:var(--sand); }
.strands__intro{
  font-size:1.15rem;
  max-width:52ch;
  margin:0 0 2rem;
  color:var(--ink-soft);
}
.strands__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:clamp(1.25rem, 3vw, 2rem);
}
.strand{
  background:var(--paper);
  border-radius:var(--radius);
  border-top:5px solid var(--lime);
  padding:clamp(1.25rem, 2.5vw, 1.75rem);
}
.strand__label{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tangerine);
  margin:0 0 .35rem;
}
.strand__title{
  font-size:1.5rem;
  margin:0 0 .6rem;
}
.strand p{ font-size:1rem; }
.strand__link{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  border-bottom:2px solid var(--lime);
  padding-bottom:2px;
}
.strand__link:hover{ border-color:var(--tangerine); }

.awards .strands__intro{ margin-bottom:2rem; }


/* ---------- 28. Rose button (Torn page) ---------- */
/* Picks up the pink from the Torn artwork. Darker on hover so the
   colour still shifts for anyone who cannot rely on hue alone. */
.btn--rose{
  background:#db285d;
  color:#fff;
  border-color:transparent;
}
.btn--rose:hover{
  background:#b01c48;
  color:#fff;
}

/* ---------- 29. Conference schedule ---------- */
.conf__schedule{
  border-top:1px solid rgba(233,220,196,.2);
  padding-top:1.1rem;
  margin-bottom:1.5rem;
}
.conf__schedule-head{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--bulb);
  margin:0 0 .7rem;
}
.conf__schedule li{
  font-size:.98rem;
  line-height:1.45;
  color:var(--sand);
  margin-bottom:.4rem;
}
.conf__schedule strong{
  display:block;
  color:var(--paper);
  font-family:var(--font-display);
  font-weight:700;
  font-size:.88rem;
}

/* ---------- 30. Taller select on the booking form ---------- */
/* A native select ignores vertical padding in most browsers, so the height
   has to be set directly. appearance:none removes the system control, which
   also means supplying our own arrow. */
.field select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  height:44px;
  padding:0 3rem 0 .9rem;
  line-height:40px;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a221d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1.1rem center;
  background-size:18px 18px;
  cursor:pointer;
}
.field select::-ms-expand{ display:none; }

/* ---------- 31. Video fallback link ---------- */
.reel__escape{
  display:block;
  margin-top:.85rem;
  font-family:var(--font-display);
  font-weight:500;
  font-size:.95rem;
  color:var(--sand);
}
.reel__escape:hover{ color:var(--bulb); }

/* ---------- 32. Self-hosted video ---------- */
.reel__video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  background:#000;
  border-radius:var(--radius);
  border:3px solid var(--bulb);
}

/* ---------- 33. "Coming soon" dialog ---------- */
.soon{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(22,17,14,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
}
.soon[hidden]{ display:none; }

.soon__box{
  background:var(--paper);
  border-top:6px solid var(--lime);
  border-radius:var(--radius);
  padding:clamp(1.6rem, 4vw, 2.5rem);
  max-width:34rem;
  width:100%;
  text-align:center;
}
.soon__title{
  font-size:clamp(1.6rem, 4vw, 2.2rem);
  margin:0 0 .5rem;
}
.soon__text{
  color:var(--ink-soft);
  margin:0 0 1.75rem;
}
.soon__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center;
}
.soon__actions .btn{ cursor:pointer; font-family:var(--font-display); }

/* ---------- 34. Banner framing on phones ---------- */
/* A phone screen is tall and narrow while the banner is very wide, so only a
   thin slice of each photo survives the crop. Slides 1 and 3 have Tanya on
   the right, so centring the crop cuts her out entirely. Each slide gets its
   own focal point, and the banner is a little shorter so more width shows.
   Nothing here touches the position of the headline or buttons. */
@media (max-width:760px){
  .stage__viewport{ height:clamp(440px, 62vh, 560px); }

  /* Slide 1 — Tanya sits at 83% across */
  .slides .slide:nth-child(1) .slide__img{ object-position:78% center; }

  /* Slide 2 — centred, but her cap is near the top of the frame */
  .slides .slide:nth-child(2) .slide__img{ object-position:50% 22%; }

  /* Slide 3 — Tanya sits at 77% across */
  .slides .slide:nth-child(3) .slide__img{ object-position:73% center; }

  /* Slide 4 — the two laughing faces sit left of centre */
  .slides .slide:nth-child(4) .slide__img{ object-position:42% 35%; }

  /* The slow zoom pushes the subject further out of frame on a narrow
     crop, so hold the framing still on phones. */
  .slide.is-active .slide__img{ animation:none; transform:scale(1.02); }
}