:root {
  --sleeve-ratio: 1.7;
  --pack-depth: 8px;
  --flap-upper: #292724;
  --flap-lower: #191817;
  --seal-light: #c66c3d;
  --seal-mid: #8d3c20;
  --seal-dark: #572614;
  --seal-rim: #b76c46;
  --seal-groove: #74321b;
  --seal-inner: #b46438;
  --seal-engraving: #e19a62;
  --pack-reveal: 16px;
  --pack-notch: 24px;
  --cover-rest-angle: -10deg;
  --cover-rest-tilt: 8deg;
  --extract-duration: 2300ms;
  --bundle-scale: .88;
  --bundle-fan-angle: 5deg;
  --bundle-fan-gap: 24px;
}
.invitation-cover { box-shadow: var(--paper-shadow); overflow: visible; }
.envelope-back { position: absolute; inset: 0; border: 1px solid var(--paper-edge); border-radius: var(--radius); background: var(--cover-surface); }
.pack-front { position: absolute; inset: 0; z-index: 4; border: 1px solid var(--paper-edge); border-radius: var(--radius); background: var(--cover-surface); clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); }
.pack-front::before, .pack-front::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.pack-front::before { background: linear-gradient(33deg, transparent 49.7%, var(--paper-highlight) 50%, transparent 50.3%); clip-path: polygon(0 0, 50% 56%, 0 100%); }
.pack-front::after { background: linear-gradient(-33deg, transparent 49.7%, var(--paper-highlight) 50%, transparent 50.3%); clip-path: polygon(100% 0, 50% 56%, 100% 100%); }
.envelope-flap { position: absolute; inset: 0; z-index: 5; transform-origin: 50% 0; transform-style: preserve-3d; }
.flap-paper { position: absolute; inset: 0; background: var(--paper-texture), linear-gradient(170deg, var(--flap-upper), var(--flap-lower) 65%); clip-path: polygon(0 0, 100% 0, 51% 59%, 49% 59%); filter: drop-shadow(0 2px 1px #000); }
.envelope-seal { position: absolute; left: 50%; top: 55%; width: 18%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 47% 51% 46% 49%; background: radial-gradient(circle at 35% 25%, var(--seal-light), var(--seal-mid) 65%, var(--seal-dark)); border: 2px solid var(--seal-rim); box-shadow: inset 0 0 0 5px var(--seal-groove), inset 0 0 0 7px var(--seal-inner), 0 5px 9px #0009; backface-visibility: hidden; }
.envelope-seal .cover-horse { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; filter: brightness(.4) drop-shadow(0 1px 0 var(--seal-engraving)); mask-image: none; }
.pack-front .cover-wordmark { top: auto; bottom: 14%; left: 7%; --brand-logo-size: 30px; }
.pack-front .cover-edition { left: auto; right: 7%; bottom: 14%; font-size: 8px; max-width: 34%; text-align: right; }
[data-scene='signin'] .invitation-cover { box-shadow: none; }
.extraction-stage { position: fixed; inset: 0; overflow: clip; z-index: 5; pointer-events: none; perspective: var(--scene-perspective); }
.extraction-cover { position: absolute; z-index: 4; }
.extraction-cover .pack-stock { visibility: hidden; }
.extraction-ticket { position: absolute; margin: 0; transform-origin: center; transition: none; pointer-events: none; }
.extraction-ticket .card-art { opacity: 1; }
.extraction-ticket .card-gallop { display: none !important; }
.extraction-ticket .card-art > img { visibility: visible !important; }
.extraction-ticket .copy-button { visibility: hidden; }
@media (max-width: 600px) { :root { --bundle-fan-gap: 12px; --pack-reveal: 12px; --pack-notch: 20px; } }

:root { --sleeve-width: 640px; --scene-width: 1120px; --signin-pack-width: 640px; --cover-rest-angle: -5deg; --cover-rest-tilt: 3deg; --cover-rest-scale: .96; --ticket-height: 280px; --ticket-gap: 24px; }
.invitation-cover { margin-bottom: var(--s12); }
.experience[data-scene='registered'] > .invitation { max-width: var(--scene-width); }
#invitation-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ticket-gap); padding: var(--s4) var(--s2) var(--s8); }
.invitation-row { height: var(--ticket-height); padding: var(--s5); }
.card-art { width: 160px; height: 160px; top: var(--s10); right: var(--s5); }
.invitation-details { max-width: 100%; z-index: 1; }
.invitation-row { transform: translateY(var(--rest-y, 0px)) rotate(var(--rest-angle, 0deg)); }
.invitation-row:nth-child(1) { --rest-y: 12px; --rest-angle: -3deg; }
.invitation-row:nth-child(2) { --rest-y: 0px; --rest-angle: 1deg; }
.invitation-row:nth-child(3) { --rest-y: 18px; --rest-angle: 3deg; }
.invitation-row:hover, .invitation-row:focus-within { transform: translateY(var(--rest-y)) rotate(var(--rest-angle)) !important; }
.invitation-row .card-art > img { visibility: visible !important; }
.invitation-row .card-gallop { display: none !important; }
.invitation-row:not([data-claimed='true']):hover { border-color: var(--paper-edge-lit); box-shadow: var(--card-shadow); }
.invitation-pagination { display: none; }
@media (max-width: 899px) {
  .experience[data-scene='signin'] { --signin-pack-width: 640px; }
  .experience[data-scene='registered'] { width: calc(100% + var(--s12)); }
  #invitation-list { display: flex; flex-direction: row; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; gap: var(--s4); padding-inline: 10%; scroll-padding-inline: 10%; }
  #invitation-list::-webkit-scrollbar { display: none; }
  .invitation-row { flex: 0 0 100%; max-width: 520px; scroll-snap-align: center; scroll-snap-stop: always; }
  .invitation-pagination { display: flex; justify-content: center; gap: var(--s2); margin-bottom: var(--s4); }
  .invitation-pagination button { min-width: var(--s12); min-height: var(--s12); background: transparent; color: var(--muted); border: 0; border-bottom: 1px solid var(--line); font: var(--small)/1 var(--mono); cursor: pointer; }
  .invitation-pagination button[aria-current='true'] { color: var(--text); border-bottom-color: var(--paper-edge-lit); }
  .experience[data-scene='registered'] .account-help { padding-inline: var(--s6); }
}
@media (max-width: 600px) {
  :root { --cover-rest-scale: .88; }
  [data-scene='signin'] .invitation-cover { width: 100%; transform: rotate(-5deg) scale(.88); }
}
.main, .experience > .invitation, .experience .stage-content, #invitation-list { min-width: 0; }
@media (max-width: 899px) {
  .experience[data-scene='registered'] > .invitation { width: 100%; }
  .experience[data-scene='registered'] .stage-content { width: 100%; }
}

:root { --brand-logo-size: 32px; --brand-logo-weight: 700; --brand-logo-tracking: -.065em; --brand-logo-square: .28em; --brand-logo-gap: .055em; }
.brand-logo { display: inline-flex; color: var(--orange); font: var(--brand-logo-weight) var(--brand-logo-size)/1 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: var(--brand-logo-tracking); white-space: nowrap; }
.brand-logo-a, .brand-logo-b { display: inline-flex; align-items: baseline; }
.brand-logo-a { display: none; gap: var(--brand-logo-gap); }
.brand-logo-block { display: block; line-height: .85; padding: .04em .06em .025em; background: var(--orange); color: var(--canvas); }
.brand-logo-dot { transform: translateY(1px); flex: none; width: var(--brand-logo-square); height: var(--brand-logo-square); background: currentColor; }
.brand-logo .glyph-slot { display: inline-flex; justify-content: center; align-items: flex-end; width: .46em; height: .5em; flex: none; letter-spacing: 0; }
.brand-logo .glyph { display: grid; place-items: center; width: var(--brand-logo-square); height: var(--brand-logo-square); }
.brand-logo .glyph svg { display: block; width: 100%; height: 100%; }
.brand-logo .glyph.is-square { background: currentColor; }
[data-brand-logo='a'] .brand-logo-a { display: inline-flex; }
[data-brand-logo='a'] .brand-logo-b { display: none; }
.cover-wordmark { width: auto; opacity: 1; --brand-logo-size: 36px; }
@media (max-width: 600px) { .cover-wordmark { --brand-logo-size: 24px; } }

@media (prefers-reduced-motion: reduce) { .invitation-row, .invitation-row:hover, .invitation-row:focus-within { transform: none !important; } }

:root { --lining-light: #38322b; --lining-dark: #211e1a; --flap-upper: #35332f; --seal-light: #aa724e; --seal-mid: #71482f; --seal-dark: #422d22; --seal-rim: #9b7153; --seal-groove: #513727; --seal-inner: #967055; --seal-engraving: #bb906c; }
.brand-logo { animation: none; }
.pack-front .brand-logo { color: #121211; text-shadow: 0 1px 0 rgb(255 255 255 / .2), 0 -1px 1px #000; }
.envelope-back { background: var(--paper-texture), repeating-linear-gradient(45deg, transparent 0 5px, rgb(255 255 255 / .025) 5px 6px), linear-gradient(150deg, var(--lining-light), var(--lining-dark)); box-shadow: inset 0 2px 8px #0008, inset 0 0 0 5px #39352f; }
.invitation-cover { filter: drop-shadow(1px 3px 0 #3c352d) drop-shadow(0 16px 20px #0008); }
.pack-front { background: var(--paper-texture), linear-gradient(32deg, #262522 0%, #161614 49.5%, #32302c 50%, #22211e 50.5%, #1b1b19 100%); box-shadow: inset 0 -2px 0 #4e4335, inset 2px 0 1px #454039, inset -2px 0 1px #0e0e0d; }
.flap-paper { background: var(--paper-texture), linear-gradient(165deg, var(--flap-upper), #272622 38%, var(--flap-lower) 68%); }
.flap-paper::after { content: ''; position: absolute; inset: 5px 6px; clip-path: polygon(0 0, 100% 0, 50% 58%); background: linear-gradient(148deg, transparent 49.6%, #91806a55 49.9%, #090909 50.2%, transparent 50.6%); }
.envelope-seal { border-radius: 45% 49% 46% 48% / 48% 44% 51% 46%; border-width: 3px; background: var(--paper-texture), radial-gradient(ellipse at 30% 20%, var(--seal-light), var(--seal-mid) 58%, var(--seal-dark)); box-shadow: inset 1px 2px 2px #d2a47b80, inset -2px -3px 3px #2d1a14, inset 0 0 0 5px var(--seal-groove), inset 0 0 0 7px var(--seal-inner), 1px 4px 2px #090909, 0 9px 14px #0008; }
.envelope-seal .cover-horse { filter: brightness(.45) drop-shadow(0 1px 0 var(--seal-engraving)); }
.footer { justify-content: flex-end; }
#arrival-card { width: 100%; max-width: 640px; margin: var(--s8) auto var(--s12); padding-top: var(--s8); border-top: 1px solid var(--line); }
.arrival-heading { margin-bottom: var(--s5); text-align: center; }
.arrival-heading h2 { font: 500 24px/1.3 var(--sans); margin: 0 0 var(--s2); }
.arrival-heading p { color: var(--muted); margin: 0; font-size: 14px; }
#arrival-card canvas { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: var(--paper-shadow); }
.arrival-customize { margin-block: var(--s5); text-align: left; }
.arrival-customize summary { cursor: pointer; padding: var(--s3) 0; color: var(--text); }
.arrival-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-block: var(--s4); }
.arrival-fields label { min-width: 0; font-size: 14px; }
.arrival-fields input { display: block; width: 100%; min-width: 0; min-height: 48px; margin-top: var(--s2); padding: var(--s3); color: var(--text); background: var(--paper); border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.arrival-fields input[type=file] { font-size: 12px; }
.arrival-actions { display: flex; gap: var(--s3); }
.arrival-actions .button { flex: 1; }
#arrival-card > .account-help { margin-block: var(--s3); }
#arrival-card > .text-link { display: inline-block; padding-block: var(--s3); }
@media (max-width: 899px) { #arrival-card { width: calc(100% - var(--s12)); } }
@media (max-width: 600px) { .arrival-fields { grid-template-columns: 1fr; } .arrival-actions { flex-direction: column; } .arrival-heading h2 { font-size: 20px; } }

:root { --seal-light: #ff9358; --seal-mid: var(--orange); --seal-dark: #a83612; --seal-rim: #f8783c; --seal-groove: #ad3b17; --seal-inner: #ff9255; --seal-engraving: #ffab71; --fold-edge: rgb(186 172 148 / .24); --fold-shadow: rgb(0 0 0 / .65); }
.pack-front { clip-path: polygon(0 0, 43% 54%, 57% 54%, 100% 0, 100% 100%, 0 100%); background: var(--paper-texture), radial-gradient(ellipse at 50% 5%, #35332f, #242320 60%, #1c1c19); box-shadow: inset 0 -2px 1px #514a3d, inset 2px 0 1px #494339, inset -2px 0 1px #494339; }
.pack-front::before, .pack-front::after { content: none; }
.flap-paper { clip-path: polygon(0 0, 100% 0, 56% 59%, 44% 59%); background: var(--paper-texture), radial-gradient(ellipse at 50% 0, #3b3934, #2d2c27 55%, #23231f); filter: none; }
.flap-paper::before, .flap-paper::after { content: ''; position: absolute; inset: 0; background: linear-gradient(141deg, transparent 49.1%, var(--fold-shadow) 49.4%, var(--fold-edge) 49.8%, transparent 50.1%); clip-path: polygon(50% 0, 100% 0, 56% 59%, 50% 59%); }
.flap-paper::before { transform: scaleX(-1); }
.envelope-flap { filter: drop-shadow(0 3px 1px rgb(0 0 0 / .55)); }
.envelope-seal { width: 19%; background: var(--paper-texture), radial-gradient(ellipse at 34% 24%, var(--seal-light), var(--seal-mid) 55%, var(--seal-dark)); border-color: var(--seal-rim); box-shadow: inset 1px 2px 2px #ffd2a580, inset -2px -3px 3px #842507, inset 0 0 0 5px var(--seal-groove), inset 0 0 0 7px var(--seal-inner), 1px 4px 2px #090909, 0 9px 14px #0008; }
.seal-horse { position: absolute; inset: 18%; width: 64%; height: 64%; fill: #ac3610; filter: drop-shadow(0 1px 0 var(--seal-engraving)) drop-shadow(0 -1px 0 #792606); }
.flap-paper::before, .flap-paper::after { content: none; }

.reference-card {
  --sleeve-width: 480px;
  --sleeve-ratio: 1.55;
  --pack-notch: 32px;
  width: min(var(--sleeve-width), 100%);
  transform: none;
  filter: none;
  box-shadow: var(--cover-rest-shadow);
  margin-bottom: var(--s8);
}
.reference-card .envelope-back, .reference-card .envelope-flap { display: none; }
.reference-card .pack-front {
  overflow: clip;
  clip-path: none;
  background: var(--cover-surface);
  box-shadow: var(--paper-lip);
  mask-image: radial-gradient(circle at 0 50%, transparent var(--pack-notch), black calc(var(--pack-notch) + 1px));
}
.reference-card .pack-front::before {
  content: '';
  inset: var(--s1);
  border: 1px solid var(--paper-highlight);
  border-radius: var(--rim-radius);
  background: none;
  clip-path: none;
}
.reference-card .pack-front > .cover-horse { mix-blend-mode: normal; mask-image: none; }
.reference-card .cover-wordmark {
  left: 7%; top: 9%; bottom: auto; width: auto;
  color: var(--canvas); opacity: 1;
  font: 700 var(--cover-mark-size)/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: var(--mark-tracking);
  text-shadow: var(--emboss-shadow);
}
.reference-card .cover-edition { left: 7%; right: auto; bottom: 8%; max-width: none; text-align: left; font-size: var(--edition-size); }
[data-scene='signin'] .reference-card { width: min(480px, 100%); transform: none; box-shadow: var(--cover-rest-shadow); }
@media (max-width: 600px) { .reference-card { --pack-notch: 22px; --cover-mark-size: 24px; } }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .reference-card, [data-scene='signin'] .reference-card {
    transform: translateY(calc(var(--pointer-light, 0) * -3px)) rotateX(var(--pointer-y, 0deg)) rotateY(var(--pointer-x, 0deg)) rotateZ(var(--pointer-roll, 0deg));
    transform-origin: center;
    filter: drop-shadow(0 calc(var(--pointer-light, 0) * 8px) calc(var(--pointer-light, 0) * 8px) rgb(0 0 0 / .3));
  }
  .reference-card:hover .pack-front { border-color: var(--paper-edge-lit); }
  .reference-card .pack-front::after {
    content: '';
    inset: -30%;
    background: linear-gradient(115deg, transparent 30%, rgb(255 239 215 / .32) 45%, rgb(255 239 215 / .65) 49%, transparent 63%);
    opacity: calc(var(--pointer-light, 0) * .12);
    transform: translateX(var(--pointer-sheen, 0%));
    clip-path: none;
  }
}

:root { --entry-top-space: clamp(24px, 6.667svh, 80px); }
.main:has(.experience:not([data-scene='registered'])) {
  justify-content: flex-start;
  padding-top: var(--entry-top-space);
}
[data-scene='signin'] .reference-card { margin-bottom: var(--s8); }
