/* Delfit club: one continuous photographic world. All selectors are page scoped. */
.club {
  --club-paper: #f4f2e8; --club-ink: #20251c; --club-muted: #56604b;
  --club-lime: #d5f46c; --club-line: #d7d9ca; --club-top: 0px; --club-bottom: 0px;
  color: var(--club-ink); background: var(--club-paper); font-family: 'DanaFaNum', sans-serif;
  position: relative; isolation: isolate;
}
.club *, .club *::before, .club *::after { box-sizing: border-box; }
.club-intro { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-block-end: 24px; }
.club-intro .breadcrumb-bar { padding: 0; margin: 0; border: 0; background: transparent; }
.club-intro .breadcrumb { padding: 0; margin: 0; font-size: 11px; color: var(--club-muted); }
.club-intro .club-kicker { margin: 0; }
.club a { color: inherit; }
.club a:focus-visible, .club summary:focus-visible, .club button:focus-visible {
  outline: 3px solid #596c1d; outline-offset: 5px;
}
.club-panel:focus { outline: none; }
.club-panel > * { flex-shrink: 0; }
.club-scene { position: relative; height: min(65vw, 620px); min-height: 260px; overflow: hidden; background: var(--club-paper); }
.club-poster, .club-plate { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.club-poster { position: absolute; inset: 0; }
.club-planes, .club-leg, .club-scene__shade, .club-scene__stamp { display: none; }
.club-copy { position: relative; }
.club-panel { position: relative; width: min(100% - 48px, 900px); margin-inline: auto; padding-block: 64px; scroll-margin-top: 100px; }
.club-panel + .club-panel { border-top: 1px solid var(--club-line); }
.club-panel h1, .club-panel h2, .club-panel h3, .club-panel p { margin: 0; }
.club-panel h1, .club-panel h2 { font-size: clamp(34px, 4.6vw, 72px); font-weight: 900; line-height: 1.2; letter-spacing: -0.045em; text-wrap: balance; }
.club-panel h2 { font-size: clamp(30px, 3.2vw, 48px); }
.club-panel h2 span { color: #596447; }
.club-kicker { display: inline-flex; align-items: center; gap: 8px; margin-block-end: 24px; font-size: 13px; font-weight: 700; }
.club-kicker::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #6d841f; }
.club-panel .club-lead { margin-block-start: 24px; color: var(--club-muted); font-size: 17px; line-height: 1.9; max-width: 520px; }
.club-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 26px; margin-block-start: 30px; }
.club .club-join { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; padding: 17px 25px; min-height: 56px; background: var(--club-lime); border: 1px solid #b6cd5b; border-radius: 3px; text-decoration: none; font-size: 15px; font-weight: 800; color: var(--club-ink); }
.club-join span { font-family: sans-serif; font-size: 25px; line-height: 1; }
.club .club-join:hover { background: #cbe95e; }
.club-text-link { text-decoration: underline; text-underline-offset: 5px; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
.club-panel .club-small { margin-block-start: 20px; font-size: 12px; color: var(--club-muted); line-height: 1.8; }
.club-small a { text-decoration: underline; text-underline-offset: 4px; }
.club-methods { list-style: none; padding: 0; margin: 15px 0 0; }
.club-methods li { display: flex; gap: 16px; padding-block: 11px; border-bottom: 1px solid var(--club-line); }
.club-methods li:last-child { border-bottom: 0; }
.club-method-icon { display: inline-grid; place-items: center; flex: 0 0 32px; height: 32px; background: var(--club-lime); border-radius: 50%; font-size: 19px; }
.club-methods h3 { font-size: 14px; font-weight: 800; line-height: 1.6; }
.club-methods p { font-size: 12px; line-height: 1.85; color: var(--club-muted); }
.club-credit { position: relative; margin-block-start: 24px; padding: 20px 25px; border-radius: 9px; background: var(--club-ink); color: var(--club-paper); overflow: hidden; box-shadow: -8px 16px 35px #20251c1c; }
.club-credit__heading { display: flex; align-items: center; justify-content: space-between; color: #d9e2cc; font-size: 12px; }
.club-credit__heart { font-size: 29px; color: var(--club-lime); }
.club-credit .club-credit__coins { font-size: 15px; margin-block-start: 3px; }
.club-credit .club-credit__amount { margin-block: 5px; line-height: 1.35; }
.club-credit__amount strong { font-size: clamp(30px, 3.2vw, 46px); font-weight: 900; color: var(--club-lime); font-variant-numeric: tabular-nums; }
.club-credit__amount span { font-size: 14px; margin-inline-start: 8px; }
.club-credit__caption { color: #d9e2cc; font-size: 11px; }
.club-credit__line { display: block; position: absolute; inset: auto 0 0; height: 3px; background: var(--club-lime); transform-origin: right; }
.club-values { display: flex; gap: 20px; margin-block: 18px 0; }
.club-values > div { flex: 1; }
.club-values dt { font-size: 11px; color: var(--club-muted); }
.club-values dd { margin: 6px 0 0; font-size: 13px; font-weight: 700; }
.club-rules { padding-inline-start: 20px; margin-block: 26px 0; }
.club-rules li { padding-inline-start: 9px; padding-block: 10px; font-size: 14px; line-height: 1.9; }
.club-rules li::marker { color: #6d841f; }
.club-panel--finale > .club-join { margin-block-start: 30px; align-self: flex-start; }
.club-details { margin-block-start: 25px; border-top: 1px solid var(--club-line); }
.club-details > summary { padding-block: 15px; cursor: pointer; font-size: 13px; font-weight: 700; }
.club-details__body { padding: 20px; background: #fffdf5; border: 1px solid var(--club-line); font-size: 14px; line-height: 1.9; }
.club-details__body img { max-width: 100%; height: auto; }
.club-details__body .cb-stack { gap: 30px; }
.club-details__body :is(.cb-hero__title, .cb-section-title, h2, h3) { font-size: 22px; }
.club-route { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 20px 24px; border-top: 1px solid var(--club-line); }
.club-route a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 13px; font-size: 12px; text-decoration: none; border-radius: 30px; }
.club-route a:hover { background: #e8edd9; }
.club-route__dot { width: 5px; height: 5px; border-radius: 50%; background: #68705c; }
.club-route a[aria-current="step"] { background: var(--club-ink); color: var(--club-paper); }
.club-route a[aria-current="step"] .club-route__dot { background: var(--club-lime); }
.club-spacer { display: none; }

/* Flight is enabled only after successful engine initialization. */
.club--flight .club-scene, .club--flight .club-copy {
  position: fixed; inset: var(--club-top) 0 0; height: auto; min-height: 0;
  transform: translate3d(0, var(--club-exit, 0px), 0);
}
.club--flight .club-scene { z-index: 1; }
.club--flight .club-copy { z-index: 5; pointer-events: none; overflow: hidden; container: club-copy / size; }
.club--flight .club-spacer { display: block; }
.club--flight .club-planes { display: block; position: absolute; inset: 0; opacity: 0; }
.club--flight.club--layered .club-planes { opacity: 1; }
.club--flight.club--layered .club-poster { opacity: 0; }
.club--flight .club-plate { position: absolute; inset: 0; transform: translate3d(var(--plate-x, 0px), 0, 0) scale(var(--plate-scale, 1.02)); }
.club--flight .club-fashion { position: absolute; left: 3%; bottom: 14%; width: min(46vw, 650px); transform-origin: 50% 90%; transform: translate3d(var(--fashion-x, 0px), var(--fashion-y, 0px), 0) scale(var(--fashion-scale, .82)); opacity: var(--fashion-opacity, 1); }
.club-fashion img, .club-coin img { display: block; width: 100%; height: auto; }
.club--flight .club-coin { position: absolute; width: min(15vw, 220px); transform: translate3d(var(--coin-x, 0px), var(--coin-y, 0px), 0) rotate(var(--coin-rotation, -15deg)) scale(var(--coin-scale, 1)); opacity: var(--coin-opacity, 1); filter: drop-shadow(-4px 10px 12px #20251c16); }
.club-coin--one { left: 8%; top: 8%; }
.club--flight .club-coin--two { left: 36%; top: 43%; width: min(9vw, 125px); }
.club--flight .club-coin--three { left: 5%; top: 64%; width: min(7vw, 105px); }
.club--flight .club-scene__shade { display: block; position: absolute; inset: 0 0 0 47%; background: linear-gradient(90deg, #f4f2e800, #f4f2e8e8 25%, #f4f2e8f5); }
.club--flight .club-scene__stamp { display: block; position: absolute; left: 5%; bottom: 11%; font-size: 10px; font-weight: 800; line-height: 1.6; letter-spacing: .15em; }
.club--flight .club-panel { position: absolute; inset: 0 6% 62px auto; display: flex; flex-direction: column; justify-content: safe center; width: min(43vw, 570px); margin: 0; padding: 25px 0; border: 0; overflow-y: auto; scrollbar-width: thin; opacity: 0; pointer-events: none; }
.club--flight .club-panel--welcome { opacity: 1; overflow: visible; }
.club--flight .club-panel h1 { font-size: clamp(42px, 4.8vw, 76px); }
.club--flight .club-panel h2 { font-size: clamp(32px, 3.1vw, 48px); }
.club--flight .club-route { position: fixed; inset: auto 0 var(--club-bottom); z-index: 8; padding: 8px 20px; background: #f4f2e8f2; border-top: 1px solid #d7d9ca99; flex-wrap: nowrap; }
.club--flight .club-credit__line { transform: scaleX(var(--credit-progress, 0)); }
.club--flight.club--outside :is(.club-scene, .club-copy, .club-route) { visibility: hidden; pointer-events: none; }
.club--flight .club-details[open] .club-details__body { max-height: 230px; overflow-y: auto; }

@media (max-width: 767px) {
  .club-panel { width: calc(100% - 40px); padding-block: 40px; }
  .club-panel h1 { font-size: 38px; }
  .club-panel .club-lead { font-size: 14px; margin-block-start: 16px; }
  .club-kicker { font-size: 11px; margin-block-end: 16px; }
  .club-actions { gap: 12px 18px; margin-block-start: 20px; }
  .club .club-join { min-height: 48px; padding: 13px 18px; font-size: 13px; }
  .club--flight .club-panel { inset: 0 22px 60px; width: auto; padding: 18px 0; justify-content: flex-start; }
  .club--flight .club-panel--welcome { padding-top: 25px; }
  .club--flight .club-panel h1 { max-width: 420px; font-size: clamp(30px, 8.7vw, 42px); line-height: 1.25; }
  .club--flight .club-panel h2 { font-size: clamp(27px, 7.2vw, 35px); }
  .club--flight .club-panel--welcome .club-lead { max-width: 450px; }
  .club--flight .club-panel .club-small { margin-block-start: 12px; font-size: 10px; }
  .club--flight .club-panel--welcome .club-small { max-width: 66%; align-self: flex-start; padding: 3px 7px; background: #f4f2e8f5; }
  .club--flight .club-fashion { width: 72vw; left: -8%; bottom: 7%; }
  .club--flight .club-coin--one { width: 22vw; left: 65%; top: 63%; }
  .club--flight .club-coin--two { width: 14vw; left: 5%; top: 55%; }
  .club--flight .club-coin--three { width: 13vw; left: 77%; top: 82%; }
  .club--flight .club-plate { object-position: 23% center; }
  .club--flight .club-poster { object-position: 20% center; }
  .club--flight .club-scene__shade { inset: 0; background: linear-gradient(#f4f2e8f5 0%, #f4f2e8f5 35%, #f4f2e8b3 56%, #f4f2e800 80%); }
  .club--flight[data-waypoint="1"] .club-scene__shade, .club--flight[data-waypoint="2"] .club-scene__shade, .club--flight[data-waypoint="3"] .club-scene__shade { background: #f4f2e8ed; }
  .club--flight[data-waypoint="2"] .club-scene__shade { background: linear-gradient(#f4f2e8f5 0%, #f4f2e8f5 62%, #f4f2e8b3 76%, #f4f2e800 95%); }
  .club--flight .club-scene__stamp { display: none; }
  .club--flight .club-route { justify-content: flex-start; overflow-x: auto; padding: 6px 12px; gap: 2px; scrollbar-width: none; }
  .club-route a { white-space: nowrap; font-size: 10px; padding-inline: 10px; }
  .club-methods li { padding-block: 8px; gap: 10px; }
  .club-methods p { font-size: 12px; line-height: 1.7; }
  .club-methods h3 { font-size: 13px; }
  .club-credit { padding: 14px 20px; margin-block-start: 16px; }
  .club-credit__amount strong { font-size: 34px; }
  .club-values { gap: 10px; margin-block-start: 12px; }
  .club-values dd { font-size: 11px; }
  .club-rules { margin-block-start: 15px; }
  .club-rules li { font-size: 12px; padding-block: 8px; }
  .club-panel--finale > .club-join { align-self: flex-start; margin-block-start: 22px; }
  .club--flight .club-details { background: #f4f2e8ed; }
}
@media (max-height: 740px) and (min-width: 768px) {
  .club--flight .club-panel h1 { font-size: 50px; }
  .club--flight .club-panel h2 { font-size: 36px; }
  .club-panel .club-lead { font-size: 14px; margin-block-start: 15px; }
  .club-methods li { padding-block: 8px; }
  .club-credit { margin-block-start: 15px; padding-block: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .club *, .club *::before, .club *::after { scroll-behavior: auto !important; }
}

/* Fit the opening copy to the scene's usable height without an inner scroll area. */
@container club-copy (max-height: 540px) {
  .club-panel--welcome { padding-block: 16px !important; }
  .club-panel--welcome .club-intro { margin-block-end: 12px; gap: 6px 16px; }
  .club-panel--welcome h1 { font-size: clamp(28px, 4.2vw, 44px) !important; }
  .club-panel--welcome .club-lead { font-size: 13px; line-height: 1.7; margin-block-start: 12px; }
  .club-panel--welcome .club-actions { margin-block-start: 16px; gap: 8px 18px; }
  .club-panel--welcome .club-small { margin-block-start: 10px; }
}
@container club-copy (max-height: 400px) {
  .club-panel--welcome { padding-block: 10px !important; }
  .club-panel--welcome .club-intro { margin-block-end: 8px; }
  .club-panel--welcome h1 { font-size: 28px !important; }
  .club-panel--welcome .club-lead { margin-block-start: 8px; font-size: 12px; }
  .club-panel--welcome .club-actions { margin-block-start: 10px; }
  .club-panel--welcome .club-small { margin-block-start: 6px; }
}