/* Not My Event: the look of "Quince en el Rancho" (drawings /assets/ranch-art.js, behaviour /assets/ranch-show.js). Another way through a night, unlike every other design: the ranch is ONE long landscape five screens wide,
   and the guest ROLLS A WAGON WHEEL (in the bar at the bottom: drag it, tap it, or use the arrows beside it) to travel along it, from the afternoon at the gate to the bonfire under the stars.
   Everything that moves uses transform/opacity only; the landscape moves as one layer. */
:root { --gold: #f0c95a; --acc: #c8102e; --acc2: #ffd27a; --ink: #3a1e0c; --paper: #fff8ec; --night: #1a0e08; --bar: 152px;
  --display: "Rye", Georgia, serif; --body: "Josefin Sans", system-ui, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--night); color: #fff; font-family: var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 300; padding: 10px 14px; background: #fff; color: #000; border-radius: 8px; } .skip:focus { top: 8px; }
#net { position: fixed; left: 0; right: 0; top: 0; z-index: 250; padding: 10px 14px; text-align: center; background: #c8102e; color: #fff; font-size: 14px; } #net[hidden] { display: none; }
.hit { cursor: pointer; outline: none; } .hit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hit.tap { transform-box: fill-box; transform-origin: 50% 100%; animation: tap .45s ease; } @keyframes tap { 0%, 100% { scale: 1; } 40% { scale: 1.07; } }
.twk { animation: glint 3s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes glint { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---------- the landscape ---------- */
#ranch { position: fixed; inset: 0; overflow: hidden; }
#pano { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
#pano.snap { transition: transform .7s cubic-bezier(.3, .9, .3, 1); }
#pano .art { display: block; width: 100%; height: 100%; -webkit-user-select: none; user-select: none; }
.hud { position: fixed; z-index: 30; left: 0; right: 0; top: 0; display: flex; justify-content: center; padding: max(10px, env(safe-area-inset-top, 0px)) 64px 0; pointer-events: none; }
.tag { pointer-events: auto; padding: 5px 14px; border-radius: 999px; background: rgba(40, 20, 8, .7); border: 1px solid rgba(255, 210, 122, .7); font-size: 13px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }

/* ---------- the words, placed differently in each scene ---------- */
.copy { position: fixed; z-index: 5; left: 0; right: 0; top: calc(56px + env(safe-area-inset-top, 0px)); padding: 0 18px; text-align: center; pointer-events: none; text-shadow: 0 2px 10px rgba(30, 12, 4, .85); transition: opacity .5s ease; }
.copy.away { opacity: 0; }
.copy[hidden] { display: none; }
.copy .eyebrow { font-weight: 700; font-size: clamp(11px, 2.8vw, 14px); letter-spacing: .26em; text-transform: uppercase; color: var(--acc2); }
.copy h1, .copy h2 { margin-top: 4px; font-family: var(--display); font-weight: 400; line-height: 1.04; color: #fff3c8; text-wrap: balance; overflow-wrap: anywhere; }
.copy h1 { font-size: clamp(30px, 8.6vw, 66px); } .copy h2 { font-size: clamp(26px, 7vw, 50px); }
.copy .sub, .copy .lead { margin: 6px auto 0; max-width: 40ch; font-size: clamp(14px, 3.6vw, 18px); font-weight: 600; line-height: 1.35; text-wrap: balance; }
.copy .with { margin-top: 6px; font-size: clamp(12px, 3vw, 15px); font-weight: 600; letter-spacing: .1em; color: var(--acc2); }
.copy h1, .copy .sub, .copy .with span { pointer-events: auto; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .copy.pos-l, .copy.pos-r { width: min(32vw, 440px); padding: 0; top: 18svh; }
  .copy.pos-l { left: max(28px, 4vw); right: auto; text-align: left; } .copy.pos-l .sub, .copy.pos-l .lead { margin-left: 0; }
  .copy.pos-r { right: max(28px, 4vw); left: auto; text-align: right; } .copy.pos-r .sub, .copy.pos-r .lead { margin-right: 0; }
}

/* ---------- what moves on the ranch ---------- */
.loop { transform-box: fill-box; transform-origin: 50% 50%; animation: loop 1.1s linear infinite; } @keyframes loop { 0%, 100% { scale: 1 1; } 50% { scale: -1 1; } }
.lasso.spinning .loop { animation-duration: .35s; }
.tail { transform-box: fill-box; transform-origin: 0 0; animation: swish 2.6s ease-in-out infinite alternate; } @keyframes swish { from { rotate: -8deg; } to { rotate: 10deg; } }
.horse.tap .hrs { animation: rear .8s ease-out; } .hrs { transform-box: fill-box; transform-origin: 20% 100%; } @keyframes rear { 40% { rotate: -14deg; } }
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flick .5s ease-in-out infinite alternate; } @keyframes flick { from { scale: .94 .9; } to { scale: 1.06 1.12; } }
.fire.roar .flame { animation: roar .9s ease-out; } @keyframes roar { 40% { scale: 1.5 1.6; } }
.lant { animation: lbob 3s ease-in-out infinite alternate; animation-delay: var(--d, 0s); } @keyframes lbob { from { translate: 0 0; } to { translate: 0 -5px; } }
.bulb { animation: glint 1.6s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.smoke { animation: smoke 3s ease-out infinite; } @keyframes smoke { from { translate: 0 6px; opacity: .2; } 60% { opacity: .9; } to { translate: 0 -20px; opacity: 0; } }
.grill.tap .smoke { animation-duration: .8s; }
.pair, .qn { transform-box: fill-box; transform-origin: 50% 100%; } .pair.tap, .qn.twirl { animation: twirl .9s ease-in-out; } @keyframes twirl { 50% { scale: -1 1; translate: 0 -8px; } }
.nb { opacity: 0; transition: opacity .6s ease .5s; } .booted .nb { opacity: 1; } .sneak { transition: opacity .4s ease .4s; } .booted .vals .sneak { opacity: 0; } .bxboots { transition: opacity .4s ease; } .booted .bxboots { opacity: 0; }
.bl { display: none; } .lv0 .bl0, .lv1 .bl1, .lv2 .bl2 { display: inline; }
.candle .fl { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .4s ease, scale .4s ease; }
.candle:not(.lit) .fl { opacity: 0; scale: .2; } .candle.lit .fl { opacity: 1; scale: 1; animation: flick .5s ease-in-out infinite alternate; } .candle.lit.out .fl { opacity: 0; scale: .3; animation: none; }
.ring { transform-box: fill-box; transform-origin: 50% 50%; animation: ping 1.8s ease-out infinite; } .candle.lit .ring { display: none; }
@keyframes ping { 0% { scale: .7; opacity: .95; } 100% { scale: 2.1; opacity: 0; } }

/* ---------- the bar, with the wagon wheel ---------- */
.bar { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: 18px 12px max(10px, env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, rgba(30, 14, 6, .95) 0%, rgba(30, 14, 6, .82) 62%, rgba(30, 14, 6, 0) 100%); text-align: center; }
.slogan { font-family: var(--display); font-size: clamp(20px, 5.4vw, 28px); line-height: 1.05; color: #fff3c8; }
.hintline { margin: 4px auto 8px; max-width: 50ch; min-height: 2.6em; font-size: clamp(13px, 3.4vw, 16px); font-weight: 600; line-height: 1.3; text-wrap: balance; }
.hintline b { color: var(--acc2); letter-spacing: .1em; text-transform: uppercase; font-size: .86em; }
.row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pill { min-height: 46px; padding: 0 16px; border-radius: 999px; border: 2px solid rgba(255, 210, 122, .8); background: rgba(30, 14, 6, .55); font-weight: 700; white-space: nowrap; }
.pill.pri { background: var(--acc); border-color: #fff3c8; }
.pill[hidden] { display: none; }
.arrow { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255, 243, 200, .8); background: rgba(30, 14, 6, .55); font-size: 24px; line-height: 1; display: grid; place-items: center; }
.arrow[disabled] { opacity: .3; }
#wheel { width: 68px; height: 68px; padding: 0; border: 0; border-radius: 50%; background: transparent; touch-action: none; cursor: grab; }
#wheel svg { width: 100%; height: 100%; display: block; transition: rotate .7s cubic-bezier(.3, .9, .3, 1); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
#wheel.drag { cursor: grabbing; } #wheel.drag svg { transition: none; }
#go { position: fixed; z-index: 21; left: 50%; bottom: calc(var(--bar) + 12px); translate: -50% 0; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 2px solid #fff3c8; background: linear-gradient(180deg, #fff3c8, #ffd27a); color: var(--ink); font-weight: 800; font-size: 17px; white-space: nowrap; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6); }
#go[hidden] { display: none; }
#go.ready { animation: readyp 1.4s ease-in-out infinite; } @keyframes readyp { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 122, .7); } 50% { box-shadow: 0 0 0 10px rgba(255, 210, 122, 0); } }
#cap { position: fixed; z-index: 40; left: 50%; bottom: calc(var(--bar) + 76px); width: min(86vw, 380px); padding: 12px 18px; border-radius: 6px; background: var(--paper); color: var(--ink); text-align: center; box-shadow: 0 12px 30px rgba(0, 0, 0, .5), inset 0 0 0 2px var(--acc); transform: translate(-50%, 20px) rotate(-1.5deg); opacity: 0; pointer-events: none; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .9, .3, 1.2); }
#cap.on { opacity: 1; transform: translate(-50%, 0) rotate(-1.5deg); }
#cap small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--acc); } #cap b { display: block; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--acc); } #cap span { display: block; font-size: 15px; line-height: 1.3; font-style: italic; }
.bub { position: fixed; z-index: 60; max-width: 220px; padding: 6px 12px; border-radius: 14px; background: #fff; color: #3a1e0c; font: 700 14px / 1.25 system-ui, sans-serif; text-align: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); pointer-events: none; transform: translate(-50%, calc(-100% - 8px)); animation: bub 2.4s ease both; }
@keyframes bub { 0% { opacity: 0; translate: 0 8px; } 12%, 80% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -8px; } }
.fin { position: fixed; z-index: 22; left: 0; right: 0; top: 16svh; padding: 0 16px; text-align: center; pointer-events: none; opacity: 0; transform: scale(.85); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .9, .3, 1.15); }
.fin.show { opacity: 1; transform: none; }
.fin h2 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 11vw, 96px); line-height: 1; color: #fff3c8; text-shadow: 0 0 24px rgba(255, 210, 122, .6), 0 3px 12px rgba(30, 12, 4, .9); }
.fin p { margin-top: 6px; font-size: clamp(15px, 4vw, 22px); font-weight: 600; text-shadow: 0 2px 8px rgba(30, 12, 4, .9); }

/* ---------- the sheets ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(30, 14, 6, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .sheet-wrap[hidden] { display: none; }
.sheetp { position: relative; width: min(480px, 100%); max-height: calc(100svh - 32px); overflow-y: auto; padding: 28px 22px 22px; border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7), inset 0 0 0 2px var(--acc); outline: none; text-align: left; }
.sheetp h2 { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.05; color: var(--acc); margin: 0 40px 6px 0; }
.sheetp .sub { margin: 0 0 14px; opacity: .85; line-height: 1.4; font-weight: 600; }
.x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 28px; line-height: 1; }
.det { display: grid; gap: 12px; margin: 0 0 16px; } .det div { display: grid; gap: 2px; }
.det dt { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--acc); font-weight: 700; } .det dd { margin: 0; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { min-height: 50px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--ink); background: var(--acc); color: #fff; font-weight: 800; font-size: 16px; } .btn.ghost { background: transparent; color: var(--ink); }
.linkish { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.f { display: grid; gap: 6px; margin-bottom: 12px; font-size: 13px; font-weight: 800; }
#g-name { width: 100%; min-height: 50px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid #d9c3a0; background: #fff; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; }
.err { margin: 0 0 10px; color: #c0283c; font-weight: 700; font-size: 14px; } .err[hidden], #done[hidden], #rsvp-form[hidden], #plus-field[hidden], #more[hidden], #sample-note[hidden] { display: none; }
.ans { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; min-width: 0; } .ans label { position: relative; display: block; } .ans input { position: absolute; opacity: 0; pointer-events: none; }
.ans span { display: flex; align-items: center; min-height: 50px; padding: 0 16px; border-radius: 10px; border: 1.5px solid #d9c3a0; font-weight: 700; cursor: pointer; background: #fff; }
.ans input:checked + span { border-color: var(--acc); box-shadow: inset 0 0 0 2px var(--acc); } .ans input:focus-visible + span { outline: 3px solid var(--acc); outline-offset: 2px; }
.step { display: flex; align-items: center; gap: 16px; } .step button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); font-size: 24px; line-height: 1; } .step output { min-width: 2ch; text-align: center; font-size: 22px; font-weight: 800; }
#done { text-align: center; display: grid; gap: 10px; padding: 6px 0; } #done p { margin: 0; opacity: .85; line-height: 1.4; }
.crowd-h { margin: 18px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--acc); }
.crowd { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.gc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1.5px solid var(--acc2); font-weight: 700; font-size: 14px; } .gc.new { animation: tap .7s ease 2; }
.gempty { opacity: .8; font-size: 14px; } #more { margin-top: 8px; border: 0; background: none; color: var(--ink); font-weight: 700; } #sample-note { margin-top: 10px; font-size: 12px; opacity: .75; }

@media (max-height: 520px) { .slogan { display: none; } .hintline { margin-bottom: 6px; min-height: 0; } .bar { padding-top: 10px; } :root { --bar: 100px; } #wheel { width: 54px; height: 54px; } .copy .lead { display: none; } }
@media (max-width: 380px) { .pill { padding: 0 11px; } .arrow { width: 40px; height: 40px; } #wheel { width: 60px; height: 60px; } }
html.nme-edit .bar { display: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; } }