/* ===================== Send Something Real — event page ===================== */
/* Extends Pachis "Pressed & Posted" with the flyer's brighter travel-journal palette. */
/* Page-only styles; shared chrome/type comes from ../styles.css. */

/* The flyer/sticker collage overflows horizontally; clip (not hidden) so the
   body doesn't become a scroll container, which would break the sticky header
   on mobile Safari (nav jumps/drifts out of frame when scrolling up). */
body.sr{overflow-x:clip}

.sr{
  --coral:#ff5722;     /* event accent (matches the API event color) */
  --coral-deep:#e2400f;
  --marigold:#f4a82c;
  --sky:#2f9bd6;
  --pink:#ef9bb3;
}

/* coral CTA variant (ticket-stamp button, never a pill) */
.sr .btn--coral{background:var(--coral);color:#fff;border-color:var(--ink)}
.sr .btn--coral:hover{background:var(--coral-deep)}

/* readable section eyebrows (keep Courier Prime, but de-track + bold so labels are legible) */
.sr .sec-head .no{font-weight:700;letter-spacing:.08em;font-size:.82rem}

/* little cut-paper sticker labels echoing the flyer */
.sr .sticker{
  position:absolute;z-index:3;font-family:"Courier Prime",monospace;text-transform:uppercase;
  letter-spacing:.1em;font-size:.62rem;font-weight:700;color:var(--ink);
  padding:.45em .7em;border:1.5px solid var(--ink);border-radius:3px;background:var(--marigold);
  box-shadow:2px 2px 0 var(--ink);
}

/* ---------- HERO ---------- */
.sr-hero{padding:30px 0 56px}
.sr-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.sr-hero-copy .eyebrow{display:flex;align-items:center;gap:.55em;color:var(--ink);margin-bottom:18px}
.sr-hero-copy .eyebrow .flower{width:1.2em;height:1.2em;color:var(--marigold)}
/* date/time is important info: drop the all-caps tracking, keep the typewriter feel but make it readable */
.sr-hero-copy .eyebrow .mono{text-transform:none;letter-spacing:.01em;font-weight:700;font-size:.96rem;color:var(--ink)}
.sr-hero-copy h1{font-size:clamp(2.7rem,6.6vw,4.7rem);letter-spacing:-.02em}
.sr-hero-copy h1 em{font-style:italic;color:var(--coral)}
.sr-hero-copy .lede{font-size:1.2rem;color:var(--ink-soft);max-width:42ch;margin:22px 0 24px}
.sr-facts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
/* facts read as plain words, not tracked all-caps mono */
.sr-facts .chip{font-family:"Hanken Grotesk",sans-serif;text-transform:none;letter-spacing:0;font-size:.92rem;color:var(--ink-soft);padding:.5em .95em}
.sr-facts .chip b{color:var(--ink);font-weight:700}
.sr-hero .cta-row{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.sr-cta-note{font-family:"Hanken Grotesk",sans-serif;font-size:.86rem;letter-spacing:0;text-transform:none;color:var(--ink-soft);font-weight:600}

/* the pinned flyer */
.sr-hero-media{position:relative}
.sr-flyer{
  position:relative;margin:0;background:#fff;border:1.5px solid var(--frame);padding:14px;border-radius:4px;
  box-shadow:10px 13px 0 rgba(43,82,64,.2);transform:rotate(-1.6deg);max-width:460px;margin-left:auto;
}
.sr-flyer img{border-radius:2px;width:100%;height:auto;display:block;background:var(--paper-deep)}
.sr-flyer .tape{position:absolute;width:118px;height:30px;background:rgba(244,168,44,.6);border:1px dashed rgba(44,53,32,.32);z-index:2}
.sr-flyer .tape--a{top:-15px;left:24px;transform:rotate(-5deg)}
.sr-flyer .tape--b{top:-13px;right:30px;transform:rotate(4deg);background:rgba(47,155,214,.5)}
.sr-postmark{position:absolute;right:-26px;bottom:-22px;width:104px;height:104px;border-color:var(--coral);color:var(--coral);background:rgba(240,241,231,.86);transform:rotate(-9deg);z-index:3}
.sticker--dest{top:8px;left:-26px;transform:rotate(-7deg);background:var(--sky);color:#fff;border-color:var(--ink)}
.sticker--adv{bottom:44px;left:-30px;transform:rotate(5deg);background:var(--marigold)}

@media (max-width:880px){
  .sr-hero-grid{grid-template-columns:1fr;gap:38px}
  .sr-flyer{margin:0 auto;transform:rotate(-1deg)}
  .sticker--dest{left:0}
  .sticker--adv{left:4px}
}

/* ---------- THE WHY ---------- */
.sr-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.sr-why .sec-head .no{color:var(--coral)}
.sr-why h2{max-width:16ch}
.sr-why-body p{font-size:1.1rem;color:var(--ink-soft);margin:0 0 1.1em}
.sr-why-body blockquote{margin:1.1em 0;padding-left:18px;border-left:3px solid var(--coral);
  font-family:"Spectral",serif;font-style:italic;font-size:1.34rem;color:var(--ink);line-height:1.4}
.sr-sign{font-family:"Spectral",serif;font-style:italic;color:var(--ink);font-size:1.05rem}
.sr-sign .mono{font-style:normal;color:var(--ink-soft);margin-left:.3em}
@media (max-width:780px){.sr-why-grid{grid-template-columns:1fr;gap:22px}}

/* ---------- WHAT YOU'LL DO ---------- */
.sr-steps .sec-head .no{color:var(--coral)}
.sr-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.sr-card{position:relative;background:var(--paper-card);border:1.5px solid var(--frame);border-radius:5px;
  padding:30px 26px 26px;box-shadow:5px 7px 0 rgba(43,82,64,.14)}
.sr-card:nth-child(1){transform:rotate(-.8deg);border-top:4px solid var(--coral)}
.sr-card:nth-child(2){transform:rotate(.6deg);border-top:4px solid var(--sky)}
.sr-card:nth-child(3){transform:rotate(-.5deg);border-top:4px solid var(--marigold)}
.sr-card-no{font-family:"Courier Prime",monospace;font-size:.74rem;letter-spacing:.16em;color:var(--ink-soft)}
.sr-stamp{display:grid;place-items:center;width:60px;height:60px;margin:12px 0 14px;border:2px dashed var(--rule);
  border-radius:4px;color:var(--coral);background:rgba(255,87,34,.06)}
.sr-card:nth-child(2) .sr-stamp{color:var(--sky);background:rgba(47,155,214,.07)}
.sr-card:nth-child(3) .sr-stamp{color:var(--marigold);background:rgba(244,168,44,.1)}
.sr-stamp svg{width:30px;height:30px;display:block}
.sr-card h3{font-family:"Spectral",serif;font-size:1.4rem;font-weight:600;margin:0 0 .35em}
.sr-card p{margin:0;color:var(--ink-soft);font-size:.98rem}
@media (max-width:820px){.sr-cards{grid-template-columns:1fr;gap:26px}.sr-card{transform:none!important}}

/* ---------- WHAT'S INCLUDED (the kit) ---------- */
.sr-kit{padding:18px 0 64px}
.sr-kit-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:start;
  background:var(--paper-card);border:1.5px solid var(--frame);border-radius:6px;
  box-shadow:7px 9px 0 rgba(43,82,64,.16);padding:44px 44px 46px}
.sr-kit .sec-head .no{color:var(--coral)}
.sr-kit-sub{color:var(--ink-soft);margin:.6em 0 0;font-size:1.02rem}
.sr-pricetag{display:inline-flex;align-items:center;gap:14px;margin-top:26px;
  border:2px solid var(--ink);border-radius:4px;background:var(--marigold);padding:14px 18px;
  box-shadow:3px 3px 0 var(--ink);transform:rotate(-1.4deg)}
.sr-pricetag-amt{font-family:"Spectral",serif;font-weight:700;font-size:2.5rem;line-height:1;color:var(--ink)}
.sr-pricetag-lbl{font-family:"Courier Prime",monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);line-height:1.5}
.sr-checklist{list-style:none;padding:0;margin:0}
.sr-checklist li{position:relative;padding:14px 0 14px 44px;border-bottom:1.5px dashed var(--rule);
  color:var(--ink);font-size:1.04rem}
.sr-checklist li:last-child{border-bottom:none}
.sr-checklist li em{font-style:italic;color:var(--coral-deep)}
.sr-checklist li::before{content:"";position:absolute;left:6px;top:16px;width:22px;height:22px;
  border:2px solid var(--coral);border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%23ff5722' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat}
@media (max-width:820px){
  .sr-kit-grid{grid-template-columns:1fr;gap:30px;padding:30px 24px 32px}
}

/* ---------- WORLD'S LARGEST CRAFT CLUB ---------- */
.sr-club{position:relative;background:var(--coral);color:#fff;padding:84px 0;margin:20px 0}
.sr-club .tear{position:absolute;left:0;width:100%;height:24px;display:block;fill:var(--paper)}
.sr-club .tear.top{top:-1px}
.sr-club .tear.bot{bottom:-1px;transform:scaleY(-1)}
.sr-club-inner{max-width:62ch}
.sr-club .sec-head .no{color:#ffe2bb}
.sr-club h2{color:#fff;font-size:clamp(1.9rem,4.6vw,3rem)}
.sr-club p{color:rgba(255,255,255,.92);font-size:1.12rem;margin:.7em 0 0;max-width:54ch}
.sr-club-tag{display:inline-block;margin-top:24px;font-family:"Courier Prime",monospace;text-transform:uppercase;
  letter-spacing:.1em;font-size:.78rem;font-weight:700;color:#fff;text-decoration:none;
  border:2px solid #fff;border-radius:3px;padding:.55em .9em;box-shadow:3px 3px 0 var(--coral-deep)}
.sr-club-tag:hover{background:#fff;color:var(--coral)}

/* ---------- HOST + VENUE ---------- */
.sr-host-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.sr-host-photo{transform:rotate(-1.6deg);max-width:360px}
.sr-host .sec-head .no{color:var(--coral)}
.sr-host-body p{font-size:1.08rem;color:var(--ink-soft);margin:.2em 0 1em}
.sr-venue{border-top:1.5px dashed var(--rule);padding-top:16px;font-size:1rem!important}
.sr-venue .mono{display:inline-block;color:var(--coral);margin-right:.5em}
.sr-venue a{color:var(--coral-deep);text-decoration:underline;text-underline-offset:2px}
@media (max-width:820px){.sr-host-grid{grid-template-columns:1fr;gap:28px}.sr-host-photo{max-width:300px}}

/* ---------- DETAILS ---------- */
.sr-details-card{background:var(--paper-card);border:1.5px solid var(--frame);border-radius:6px;
  box-shadow:6px 8px 0 rgba(43,82,64,.15);padding:36px 40px 30px;position:relative}
.sr-details-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  border-bottom:2px dashed var(--rule);padding-bottom:16px;margin-bottom:8px}
.sr-details-head .mono{color:var(--coral)}
.sr-details-head h2{font-size:clamp(1.7rem,3.6vw,2.3rem)}
.sr-dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.sr-dl > div{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:start;
  padding:14px 0;border-bottom:1.5px dashed var(--rule)}
.sr-dl > div:last-child{grid-column:1 / -1}
.sr-dl dt{font-family:"Courier Prime",monospace;text-transform:uppercase;letter-spacing:.1em;
  font-size:.68rem;color:var(--ink-soft);padding-top:.2em}
.sr-dl dd{margin:0;color:var(--ink);font-size:1.02rem}
.sr-dl dd a{color:var(--coral-deep)}
.sr-where{text-decoration:none;line-height:1.5;display:inline-block}
.sr-where:hover{color:var(--coral)}
.sr-maplink{display:inline-block;margin-top:7px;font-family:"Courier Prime",monospace;font-size:.66rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--coral-deep);
  border-bottom:2px solid var(--coral);padding-bottom:1px}
.sr-where .arrow{display:inline-block;transition:transform .15s ease}
.sr-where:hover .arrow{transform:translateX(3px)}
.sr-details .faqs{margin-top:46px}
.sr-details .faq .qno{color:var(--coral)}
@media (max-width:720px){
  .sr-details-card{padding:26px 22px}
  .sr-dl{grid-template-columns:1fr}
  .sr-dl > div{grid-template-columns:100px 1fr}
}

/* ---------- CLOSER ---------- */
/* ---------- CLOSER: the postcard you'll send ---------- */
.sr-mailer-sec{background:var(--paper-deep);padding:70px 0 78px}
.sr-mailer{max-width:940px;margin:0 auto;transform:rotate(-.6deg)}
.sr-mailer .left{padding:40px 42px}
.sr-mailer .kicker{color:var(--coral);font-weight:700}
.sr-mailer h2{font-size:clamp(1.9rem,4.2vw,2.8rem);margin:.22em 0 .45em}
.sr-mailer .left > p{color:var(--ink-soft);margin:0 0 1.1em;max-width:44ch}
.sr-mailer .sr-ps{font-family:"Spectral",serif;font-style:italic;color:var(--ink);font-size:1.06rem;margin:0 0 .4em;max-width:42ch}
.sr-mailer .sr-signoff{font-family:"Spectral",serif;font-style:italic;font-size:1.55rem;color:var(--coral);margin:0}
.sr-mailer .right{justify-content:flex-start;gap:22px;padding:32px 30px}
.sr-mailer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.sr-mailer .postmark{align-self:auto;border-color:var(--coral);color:var(--coral);transform:rotate(6deg);opacity:1}
.sr-mailer-facts{font-weight:600;color:var(--ink);font-size:.96rem;line-height:1.85;
  border-top:1.5px dashed var(--rule);border-bottom:1.5px dashed var(--rule);padding:14px 0}
.sr-mailer .btn--coral{justify-content:center;font-size:1.02rem;padding:.95em 1.4em}
.sr-closer-contact{text-align:center;color:var(--ink-soft);font-size:.95rem;margin:30px 0 0}
.sr-closer-contact a{color:var(--coral-deep)}
@media(max-width:680px){
  .sr-mailer{transform:none}
  .sr-mailer .left{padding:28px 24px}
  .sr-mailer .right{flex-direction:column;align-items:stretch;padding:24px}
  .sr-mailer-top{justify-content:flex-start;gap:18px}
}