@import url('../assets/fonts/fonts.css');

/* ============================================================
   SUNDAY SERVICE — design system
   Minimal-retro, bold. Cream canvas, groovy red, brown ink.
   Doodles as sparse accents. Marquee ribbon = signature device.
   ============================================================ */

:root{
  /* palette */
  --cream:#fff8e7;
  --cream-2:#fbefd2;      /* deeper cream panels */
  --cream-3:#f5e6c4;      /* card edge / hairline warm */
  --red:#e02c2c;
  --red-2:#c31f1f;        /* hover */
  --brown:#623001;        /* primary ink / linework */
  --brown-2:#3f2000;      /* deep brown text */
  --brown-ink:#2c1600;    /* near-black brown for body copy */
  --gold:#eab24a;         /* sun accent, used rarely */
  --blue:#5292ab;         /* brand accent blue (from the wave poster art) */
  --blue-deep:#35697f;    /* darker blue, safe for text on cream */
  --blue-tint:#e6f0f4;    /* soft blue wash */

  /* type */
  --display:'Fredoka', system-ui, sans-serif;
  --body:'Mulish', system-ui, sans-serif;

  /* rhythm */
  --wrap:1180px;
  --gutter:clamp(1.15rem, 5vw, 3rem);
  --section-y:clamp(3.75rem, 11vw, 8rem);
  --radius:22px;
  --radius-sm:14px;
  --border:2.5px solid var(--brown);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream);
  color:var(--brown-ink);
  font-family:var(--body);
  font-size:clamp(1rem,.55rem + .9vw,1.12rem);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* subtle paper warmth */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(234,178,74,.10), transparent 60%),
    radial-gradient(90% 60% at 110% 8%, rgba(224,44,44,.05), transparent 55%);
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:clamp(2.5rem,7vw,4.5rem)}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(.72rem,.6rem + .4vw,.86rem);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--red);
  display:inline-flex;align-items:center;gap:.6em;
  margin:0 0 1.1rem;
}
.eyebrow::before{content:"";width:1.7em;height:2.5px;background:var(--red);border-radius:2px}
.eyebrow--center{justify-content:center}
.eyebrow--center::after{content:"";width:1.7em;height:2.5px;background:var(--red);border-radius:2px}

h1,h2,h3{font-family:var(--display);color:var(--brown);line-height:1.02;margin:0;font-weight:700;letter-spacing:-.01em}
.h-xl{font-size:clamp(2.4rem,1rem + 7vw,5rem)}
.h-lg{font-size:clamp(1.9rem,1rem + 4.4vw,3.35rem);line-height:1.05}
.h-md{font-size:clamp(1.4rem,1rem + 2.2vw,2.1rem);line-height:1.1}
.lead{font-size:clamp(1.08rem,.9rem + .7vw,1.32rem);line-height:1.55;color:var(--brown-2)}
.muted{color:#7a5a33}
em.mark{font-style:normal;color:var(--red)}
.u-red{color:var(--red)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--display);font-weight:600;font-size:1rem;
  padding:.85em 1.5em;border-radius:100px;
  transition:transform .25s var(--ease), background .2s, color .2s, box-shadow .25s;
  line-height:1;white-space:nowrap;
}
.btn svg{width:1.05em;height:1.05em}
.btn--primary{background:var(--red);color:var(--cream);box-shadow:0 0 0 0 rgba(224,44,44,.35)}
.btn--primary:hover{background:var(--red-2);transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(224,44,44,.55)}
.btn--ghost{background:transparent;color:var(--brown);box-shadow:inset 0 0 0 2.5px var(--brown)}
.btn--ghost:hover{background:var(--brown);color:var(--cream);transform:translateY(-2px)}
.btn--cream{background:var(--cream);color:var(--brown)}
.btn--cream:hover{background:#fff;transform:translateY(-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter:saturate(1.3) blur(9px);
  -webkit-backdrop-filter:saturate(1.3) blur(9px);
  border-bottom:2px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.is-stuck{border-bottom-color:var(--cream-3)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:clamp(58px,10vw,74px)}
.nav__brand{display:flex;align-items:center;gap:.6rem}
.nav__brand img{height:clamp(30px,7vw,40px);width:auto;transition:transform .3s var(--ease)}
.nav__brand:hover img{transform:rotate(-4deg) scale(1.05)}
.nav__links{display:flex;align-items:center;gap:2rem}
.nav__link{
  font-family:var(--display);font-weight:500;color:var(--brown);font-size:1.02rem;
  position:relative;padding:.2em 0;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2.5px;
  background:var(--red);border-radius:2px;transition:right .28s var(--ease);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{right:0}
.nav__social{display:flex;align-items:center;gap:1rem;padding-left:1.6rem;border-left:2px solid var(--cream-3)}
.nav__social a{color:var(--brown);transition:color .2s, transform .2s}
.nav__social a:hover{color:var(--red);transform:translateY(-2px)}
.nav__social svg{width:20px;height:20px;display:block}
.nav__toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px}
.nav__toggle span{position:relative;width:22px;height:2.5px;background:var(--brown);border-radius:2px;transition:.3s}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:22px;height:2.5px;background:var(--brown);border-radius:2px;transition:.3s}
.nav__toggle span::before{top:-7px}.nav__toggle span::after{top:7px}
.nav.is-open .nav__toggle span{background:transparent}
.nav.is-open .nav__toggle span::before{top:0;transform:rotate(45deg)}
.nav.is-open .nav__toggle span::after{top:0;transform:rotate(-45deg)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(2rem,6vw,4rem);text-align:center;position:relative;overflow:hidden}
.hero__sun{
  position:absolute;top:-14vw;left:50%;transform:translateX(-50%);
  width:min(115vw,900px);aspect-ratio:1;z-index:-1;pointer-events:none;
  opacity:.5;
  background:
    conic-gradient(from 0deg, transparent 0 6deg, rgba(234,178,74,.28) 6deg 12deg, transparent 12deg 18deg,
    rgba(234,178,74,.28) 18deg 24deg, transparent 24deg 30deg, rgba(234,178,74,.28) 30deg 36deg,
    transparent 36deg 42deg, rgba(234,178,74,.28) 42deg 48deg, transparent 48deg 54deg,
    rgba(234,178,74,.28) 54deg 60deg, transparent 60deg 66deg, rgba(234,178,74,.28) 66deg 72deg,
    transparent 72deg 78deg, rgba(234,178,74,.28) 78deg 84deg, transparent 84deg 90deg,
    rgba(234,178,74,.28) 90deg 96deg, transparent 96deg 102deg, rgba(234,178,74,.28) 102deg 108deg,
    transparent 108deg 114deg, rgba(234,178,74,.28) 114deg 120deg, transparent 120deg 126deg,
    rgba(234,178,74,.28) 126deg 132deg, transparent 132deg 138deg, rgba(234,178,74,.28) 138deg 144deg,
    transparent 144deg 150deg, rgba(234,178,74,.28) 150deg 156deg, transparent 156deg 162deg,
    rgba(234,178,74,.28) 162deg 168deg, transparent 168deg 174deg, rgba(234,178,74,.28) 174deg 180deg,
    transparent 180deg 186deg, rgba(234,178,74,.28) 186deg 192deg, transparent 192deg 198deg,
    rgba(234,178,74,.28) 198deg 204deg, transparent 204deg 210deg, rgba(234,178,74,.28) 210deg 216deg,
    transparent 216deg 222deg, rgba(234,178,74,.28) 222deg 228deg, transparent 228deg 234deg,
    rgba(234,178,74,.28) 234deg 240deg, transparent 240deg 246deg, rgba(234,178,74,.28) 246deg 252deg,
    transparent 252deg 258deg, rgba(234,178,74,.28) 258deg 264deg, transparent 264deg 270deg,
    rgba(234,178,74,.28) 270deg 276deg, transparent 276deg 282deg, rgba(234,178,74,.28) 282deg 288deg,
    transparent 288deg 294deg, rgba(234,178,74,.28) 294deg 300deg, transparent 300deg 306deg,
    rgba(234,178,74,.28) 306deg 312deg, transparent 312deg 318deg, rgba(234,178,74,.28) 318deg 324deg,
    transparent 324deg 330deg, rgba(234,178,74,.28) 330deg 336deg, transparent 336deg 342deg,
    rgba(234,178,74,.28) 342deg 348deg, transparent 348deg 354deg, rgba(234,178,74,.28) 354deg 360deg);
  -webkit-mask:radial-gradient(closest-side, #000 62%, transparent 74%);
  mask:radial-gradient(closest-side, #000 62%, transparent 74%);
  animation:spin 120s linear infinite;
}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
.hero__wordmark{width:min(86vw,540px);margin:0 auto .2rem;filter:drop-shadow(0 6px 0 rgba(98,48,1,.06))}
.hero__sub{font-family:var(--display);font-weight:600;color:var(--brown);font-size:clamp(1.15rem,.9rem + 1.6vw,1.9rem);margin:.4rem 0 1.7rem}
.hero__tag{display:flex;justify-content:center;flex-wrap:wrap;gap:.2rem .9rem;font-family:var(--display);font-weight:500;color:var(--red);font-size:clamp(1rem,.85rem + .7vw,1.25rem);margin-bottom:1.6rem}
.hero__tag span{display:inline-flex;align-items:center;gap:.9rem}
.hero__tag span:not(:last-child)::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
.hero .btn-row{justify-content:center}
.hero__meta{margin-top:1.5rem;font-size:.95rem;color:#8a6a3f;font-family:var(--display);font-weight:500}
.hero__photo{margin-top:clamp(2.2rem,6vw,3.5rem)}
.hero__photo .frame{aspect-ratio:16/8}
.hero__spark{position:absolute;width:clamp(34px,7vw,56px);top:clamp(2rem,7vw,3.4rem)}
.hero__spark--l{left:6vw}.hero__spark--r{right:7vw;top:auto;bottom:26%}
.hero__note{position:absolute;right:8vw;top:12%;width:clamp(30px,6vw,50px);opacity:.85;animation:bob 5s var(--ease) infinite}
@keyframes bob{50%{transform:translateY(-10px) rotate(6deg)}}

/* ---------- image frame ---------- */
.frame{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--cream-2);box-shadow:inset 0 0 0 2.5px rgba(98,48,1,.9)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame--full{border-radius:0}

/* full-bleed helper */
.bleed{width:100vw;margin-left:calc(50% - 50vw)}

/* ---------- marquee ribbon (signature) ---------- */
.ribbon{background:var(--red);color:var(--cream);overflow:hidden;border-block:3px solid var(--brown);padding-block:.7rem;user-select:none}
.ribbon__track{display:flex;width:max-content;animation:marq 34s linear infinite}
.ribbon:hover .ribbon__track{animation-play-state:paused}
.ribbon__group{display:flex;align-items:center;flex-shrink:0}
.ribbon span{font-family:var(--display);font-weight:600;font-size:clamp(1rem,.8rem + 1vw,1.5rem);letter-spacing:.02em;padding:0 1.1rem;text-transform:uppercase;white-space:nowrap;display:inline-flex;align-items:center;gap:1.1rem}
.ribbon span::after{content:"";width:11px;height:11px;background:var(--cream);border-radius:50%}
@keyframes marq{to{transform:translateX(-50%)}}
.ribbon--brown{background:var(--brown)}
.ribbon--brown span::after{background:var(--gold)}
.ribbon--blue{background:var(--blue)}
.ribbon--blue span::after{background:var(--cream)}

/* blue wave divider (echoes the wave art on the posters) */
.wavebreak{
  height:24px;width:100%;
  background-repeat:repeat-x;background-position:center;background-size:60px 24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24'%3E%3Cpath d='M0 16 q7.5 -9 15 0 q7.5 9 15 0 q7.5 -9 15 0 q7.5 9 15 0' fill='none' stroke='%235292ab' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity:.9;
}

/* ---------- section header ---------- */
.shead{max-width:34ch}
.shead--center{margin-inline:auto;text-align:center;max-width:40ch}
.shead p{margin:1rem 0 0}

/* ---------- about ---------- */
.about{padding-top:clamp(2.6rem,7vw,5rem)}
.about__grid{display:grid;gap:clamp(1.5rem,5vw,3.5rem);align-items:center}
.about__body p+p{margin-top:1.1rem}
.about__photos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.about__photos .frame:first-child{grid-column:1/-1;aspect-ratio:16/10}
.about__photos .frame{aspect-ratio:3/4}
.tagchips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem}
.tagchips li{list-style:none;font-family:var(--display);font-weight:500;font-size:.9rem;color:var(--brown);padding:.4em 1em;border-radius:100px;box-shadow:inset 0 0 0 2px rgba(82,146,171,.45);background:var(--blue-tint)}

/* ---------- next party (red block) ---------- */
.next{background:var(--red);color:var(--cream);position:relative;overflow:hidden}
.next .eyebrow{color:var(--cream)}
.next .eyebrow::before,.next .eyebrow--center::after{background:var(--cream)}
.next h2{color:var(--cream)}
.next__grid{display:grid;gap:clamp(2rem,5vw,3rem);align-items:center}
.next__card{background:var(--cream);color:var(--brown-ink);border-radius:var(--radius);padding:clamp(1.4rem,4vw,2.2rem);box-shadow:0 20px 50px -24px rgba(63,32,0,.5)}
.next__card .pill{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);background:var(--cream-2);padding:.4em 1em;border-radius:100px;margin-bottom:1rem}
.next__doodle{position:absolute;right:-3%;bottom:-8%;width:min(42vw,290px);opacity:.16;transform:rotate(-8deg)}
.inv{filter:brightness(0) invert(1)}

/* form */
.form{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.3rem}
.form input[type=email]{
  flex:1 1 220px;min-width:0;font:inherit;font-size:1rem;padding:.85em 1.15em;border-radius:100px;
  border:2.5px solid var(--brown);background:var(--cream);color:var(--brown-ink);
}
.form input::placeholder{color:#9c7a4e}
.form input:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(82,146,171,.4)}
.form .btn{flex:0 0 auto}
.form__note{margin:.8rem 0 0;font-size:.86rem;color:#8a6a3f;font-family:var(--display);font-weight:500}
.next__card .form__note{color:#8a6a3f}
.form__err{width:100%;margin:.85rem 0 0;font-family:var(--display);font-weight:600;color:var(--red);font-size:.95rem;display:none}
.form__err a{text-decoration:underline}
.form.is-error .form__err{display:block}
.form__ok{margin-top:1rem;font-family:var(--display);font-weight:600;color:var(--red);display:none}
.form.is-done .form__ok{display:block}
.form.is-done .form__fields{display:none}
.form__fields{display:flex;gap:.6rem;flex-wrap:wrap;width:100%}

/* ---------- gallery ---------- */
.gallery__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.6rem,1.6vw,1rem);grid-auto-flow:dense}
.gallery__grid .frame{aspect-ratio:1;margin:0}
.gallery__grid .frame.wide{grid-column:span 2;aspect-ratio:16/9}
.gallery__grid .frame img{transition:transform .6s var(--ease)}
.gallery__grid .frame:hover img{transform:scale(1.05)}
.gallery__foot{display:flex;justify-content:center;margin-top:clamp(1.6rem,4vw,2.4rem)}

/* ---------- residents ---------- */
.res__strip{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.8rem}
.res__strip .frame{aspect-ratio:4/5}
.res__names{display:flex;flex-wrap:wrap;gap:.6rem .5rem;align-items:center}
.res__names li{list-style:none;font-family:var(--display);font-weight:600;color:var(--brown);font-size:clamp(1.1rem,.9rem + 1.2vw,1.7rem)}
.res__names li:not(:last-child)::after{content:"✳";color:var(--red);margin-left:.5rem;font-size:.7em;vertical-align:middle}
.res__note{margin-top:1.2rem;color:#8a6a3f;font-family:var(--display)}

/* ---------- live sets (dark block) ---------- */
.live{background:var(--brown);color:var(--cream);position:relative;overflow:hidden}
.live .eyebrow{color:var(--gold)}
.live .eyebrow::before,.live .eyebrow--center::after{background:var(--gold)}
.live h2{color:var(--cream)}
.live .lead{color:#e8d3a8}
.live__player{
  position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;margin-top:1.8rem;
  box-shadow:inset 0 0 0 2.5px rgba(255,248,231,.5);cursor:pointer;background:#3f2000;
}
.live__player img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:opacity .3s,transform .6s var(--ease)}
.live__player:hover img{opacity:.85;transform:scale(1.03)}
.live__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem}
.live__play .disc{width:clamp(66px,14vw,92px);height:clamp(66px,14vw,92px);border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.5);transition:transform .3s var(--ease)}
.live__player:hover .live__play .disc{transform:scale(1.08)}
.live__play .disc svg{width:38%;height:38%;fill:var(--cream);margin-left:8%}
.live__play span{font-family:var(--display);font-weight:600;font-size:1.05rem;background:rgba(44,22,0,.6);padding:.4em 1em;border-radius:100px;backdrop-filter:blur(4px)}
.live__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.live__grid{display:grid;gap:clamp(1.1rem,3vw,1.8rem);margin-top:1.8rem}
.live__item{margin:0}
.live__item .live__player{margin-top:0}
.live__cap{font-family:var(--display);font-weight:600;color:var(--cream);margin:.8rem 0 0;font-size:1.02rem;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.live__cap span{color:var(--blue);font-weight:500;font-size:.88rem;white-space:nowrap}
@media (min-width:760px){.live__grid{grid-template-columns:1fr 1fr}}

/* ---------- book us ---------- */
.book__grid{display:grid;gap:clamp(1.8rem,5vw,3.5rem);align-items:center}
.book__photo .frame{aspect-ratio:4/5}
.book ul.book__list{margin:1.4rem 0 0;padding:0}
.book__list li{list-style:none;display:flex;gap:.7rem;align-items:flex-start;padding:.5rem 0;font-weight:500}
.book__list li::before{content:"";flex:0 0 auto;width:22px;height:22px;margin-top:.15rem;background:var(--red);border-radius:50%;-webkit-mask:var(--check) center/64% no-repeat;mask:var(--check) center/64% no-repeat}
:root{--check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.7L18.2 5.9l1.4 1.4z'/%3E%3C/svg%3E")}

/* ---------- newsletter ---------- */
.subscribe{text-align:center}
.subscribe .form{max-width:520px;margin-inline:auto;justify-content:center}
.subscribe .form__fields{justify-content:center}

/* ---------- footer ---------- */
.foot{background:var(--brown-2);color:var(--cream);padding-block:clamp(3rem,7vw,4.5rem) 2rem}
.foot__top{display:grid;gap:2rem;grid-template-columns:1fr;align-items:start}
.foot__brand img{height:46px;width:auto;margin-bottom:1rem}
.foot__brand p{color:#e8d3a8;max-width:34ch;margin:0}
.foot__cols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.foot h4{font-family:var(--display);font-weight:600;color:var(--gold);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .9rem}
.foot__cols a{display:block;color:var(--cream);padding:.28rem 0;font-family:var(--display);font-weight:500;transition:color .2s,transform .2s}
.foot__cols a:hover{color:var(--red);transform:translateX(3px)}
.foot__bar{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;align-items:center;margin-top:clamp(2.5rem,6vw,3.5rem);padding-top:1.6rem;border-top:2px solid rgba(255,248,231,.16);color:#c9ab7e;font-size:.85rem;font-family:var(--display)}
.foot__bar a:hover{color:var(--red)}

/* ---------- doodle accent util ---------- */
.doodle{position:absolute;pointer-events:none;z-index:0}
.reveal-doodle{opacity:0;transform:translateY(14px) rotate(-6deg)}
.is-in .reveal-doodle{opacity:1;transform:none;transition:opacity .7s var(--ease) .1s, transform .7s var(--ease) .1s}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px)}
.is-in.reveal,.is-in .reveal{opacity:1;transform:none;transition:opacity .7s var(--ease), transform .7s var(--ease)}
.is-in .reveal.d1{transition-delay:.08s}
.is-in .reveal.d2{transition-delay:.16s}
.is-in .reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-doodle{opacity:1 !important;transform:none !important;transition:none !important}
  .ribbon__track,.hero__sun,.hero__note{animation:none !important}
}

/* ---------- responsive ---------- */
@media (min-width:760px){
  .about__grid{grid-template-columns:1.05fr .95fr}
  .about__grid.rev>*:first-child{order:2}
  .next__grid{grid-template-columns:1fr 1fr}
  .book__grid{grid-template-columns:.95fr 1.05fr}
  .book__grid .book__photo{order:-1}
  .gallery__grid{grid-template-columns:repeat(4,1fr)}
  .res__strip{grid-template-columns:repeat(4,1fr)}
  .foot__top{grid-template-columns:1.4fr 1fr;gap:3rem}
  .foot__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:759px){
  .nav__links{
    position:fixed;inset:0 0 0 auto;width:min(78vw,320px);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:1.4rem;
    background:var(--cream);padding:2rem var(--gutter);
    transform:translateX(100%);transition:transform .38s var(--ease);
    box-shadow:-20px 0 50px -20px rgba(63,32,0,.4);
  }
  .nav.is-open .nav__links{transform:none}
  .nav__link{font-size:1.6rem;font-family:var(--display);font-weight:600}
  .nav__social{padding-left:0;border-left:none;border-top:2px solid var(--cream-3);padding-top:1.4rem;margin-top:.4rem;width:100%}
  .nav__toggle{display:flex;z-index:61}
  .nav__scrim{position:fixed;inset:0;background:rgba(44,22,0,.4);opacity:0;visibility:hidden;transition:.3s;z-index:59}
  .nav.is-open .nav__scrim{opacity:1;visibility:visible}
}

/* ============================================================
   SUB-PAGES
   ============================================================ */
.page-hero{text-align:center;padding-top:clamp(2.4rem,7vw,4.5rem);padding-bottom:clamp(1rem,3vw,2rem);position:relative;overflow:hidden}
.page-hero .hero__sun{opacity:.4}
.page-hero h1{margin:.2rem 0 0}
.page-hero .lead{max-width:46ch;margin:1.1rem auto 0}
.page-hero__doodle{width:clamp(40px,8vw,58px);margin:0 auto 1rem}

/* posters / events archive */
.posters{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,3.4vw,2rem)}
.poster{
  display:flex;flex-direction:column;gap:.8rem;
  background:var(--cream);border-radius:calc(var(--radius) + 4px);
  padding:clamp(.5rem,1.4vw,.8rem);
  box-shadow:0 0 0 2.5px var(--blue), 0 14px 30px -18px rgba(53,105,127,.55);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.poster:hover{transform:translateY(-4px);box-shadow:0 0 0 2.5px var(--blue-deep), 0 22px 36px -18px rgba(53,105,127,.6)}
.poster .frame{aspect-ratio:4/5;box-shadow:inset 0 0 0 2px rgba(53,105,127,.3)}
.poster__meta{padding:0 .45rem .4rem}
.poster__meta h3{font-size:clamp(1.05rem,.9rem + .8vw,1.4rem);line-height:1.05}
.poster__meta .where{font-family:var(--body);font-weight:600;color:var(--red);font-size:.95rem;margin:.25rem 0 0}
.poster__meta .when{font-family:var(--display);font-weight:500;color:#8a6a3f;font-size:.9rem;margin:.15rem 0 0}

/* upcoming card (events) */
.upcoming{background:var(--cream-2);border-radius:var(--radius);padding:clamp(1.6rem,5vw,3rem);text-align:center;box-shadow:inset 0 0 0 2.5px var(--cream-3)}
.upcoming .pill{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);background:var(--cream);padding:.4em 1em;border-radius:100px;margin-bottom:1.1rem}
.upcoming .form{max-width:480px;margin:1.4rem auto 0;justify-content:center}
.upcoming .form__fields{justify-content:center}

/* masonry gallery page */
.masonry{columns:2;column-gap:clamp(.6rem,1.6vw,1rem)}
.masonry .frame{margin:0 0 clamp(.6rem,1.6vw,1rem);break-inside:avoid;width:100%}
.masonry .frame img{transition:transform .6s var(--ease)}
.masonry .frame:hover img{transform:scale(1.04)}

/* merch lookbook */
.look{display:grid;gap:clamp(1.5rem,5vw,3rem);align-items:center}
.look .frame{aspect-ratio:4/5}
.look__body p+p{margin-top:1rem}

/* book form */
.formgrid{display:grid;gap:1rem;grid-template-columns:1fr}
.field label{display:block;font-family:var(--display);font-weight:600;color:var(--brown);font-size:.9rem;margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;padding:.8em 1em;border-radius:14px;
  border:2.5px solid var(--brown);background:var(--cream);color:var(--brown-ink);
}
.field textarea{min-height:130px;resize:vertical;border-radius:16px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(82,146,171,.4)}
.formgrid .full{grid-column:1/-1}
.venues{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
.venues li{list-style:none;font-family:var(--display);font-weight:500;font-size:.9rem;color:var(--brown);padding:.4em 1em;border-radius:100px;box-shadow:inset 0 0 0 2px rgba(82,146,171,.45);background:var(--blue-tint)}

@media (min-width:760px){
  .posters{grid-template-columns:repeat(3,1fr)}
  .masonry{columns:3}
  .look{grid-template-columns:1fr 1fr}
  .look.rev .look__photo{order:2}
  .formgrid{grid-template-columns:1fr 1fr}
}
@media (min-width:1040px){ .masonry{columns:4} }

/* focus visibility */
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--red);color:#fff;padding:.7em 1.2em;border-radius:0 0 12px 0;z-index:100;font-family:var(--display);font-weight:600}
.skip:focus{left:0}