/* oTo Fan Club: the take-a-number pass (homepage and fan-club.html) and the tiers page. */
:root{--ticket-red:#d7262b}
.fan-take{display:grid;justify-items:start;gap:14px;margin-top:22px}
.fan-button{border:0;border-radius:60px;background:var(--ticket-red);color:white;font:600 clamp(1.1rem,1.6vw,1.35rem) var(--sans);padding:20px 34px;cursor:pointer;box-shadow:0 10px 24px #d7262b44;transition:transform .15s,box-shadow .15s}
.fan-button:hover{transform:translateY(-2px);box-shadow:0 14px 30px #d7262b55}
.fan-button:disabled{opacity:.7;cursor:progress;transform:none}
.fan-count{margin:0;font:500 1rem var(--serif);color:var(--blue)}
.fan-count strong{font:600 1.25rem var(--sans);color:var(--ticket-red)}
.fan-restore-toggle{background:none;border:0;padding:0;font:600 .9rem var(--sans);color:var(--blue);text-decoration:underline;cursor:pointer}
.fan-restore{display:flex;flex-wrap:wrap;gap:10px}
.fan-restore[hidden]{display:none}
.fan-restore input{font:600 1rem monospace;letter-spacing:.08em;text-transform:uppercase;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;width:220px;max-width:100%}
.fan-status{margin:0;min-height:1.2em;font:600 .95rem var(--sans);color:var(--rust)}

.fan-pass{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;margin-top:22px;background:white;border:2px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:0 18px 40px #0002}
.fan-pass::before,.fan-pass::after{content:"";position:absolute;left:calc(100% - var(--stub,190px) - 13px);width:26px;height:26px;border-radius:50%;background:var(--pass-cutout,var(--tan));border:2px solid var(--ink)}
.fan-pass::before{top:-15px}
.fan-pass::after{bottom:-15px}
.pass-main{display:grid;align-content:start;gap:4px;padding:24px 26px 24px 28px;border-right:2px dashed #4d789166;min-width:0}
.pass-brand{font:600 .85rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.pass-brand .brand-word{font-size:1.25em;letter-spacing:0}
.pass-label{margin-top:14px;font:600 .75rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.pass-number{font:400 clamp(3rem,7vw,5.2rem)/1 var(--display);color:var(--ticket-red);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pass-date{font:500 1rem var(--serif);margin-top:6px}
.pass-tiers{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tier-chip{padding:4px 10px;border-radius:20px;font:600 .72rem var(--sans);letter-spacing:.08em;text-transform:uppercase;background:var(--tan)}
.pass-confirm{display:grid;gap:2px;margin-top:10px}.pass-confirm small{font:600 .68rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}.pass-confirm code{font:600 .72rem monospace;overflow-wrap:anywhere}
.tier-chip.tier-copper{background:#c48e6e}.tier-chip.tier-bronze{background:#b0936c}.tier-chip.tier-silver{background:#d6d9dc}.tier-chip.tier-gold{background:#d4b979}.tier-chip.tier-platinum{background:#e7e6e2;outline:1px solid #999}
.pass-stub{width:var(--stub,190px);box-sizing:border-box;display:grid;justify-items:center;align-content:center;gap:10px;padding:20px;background:#faf8f0}
.pass-qr{width:130px;aspect-ratio:1}
.pass-qr svg{display:block;width:100%;height:100%}
.pass-code{font:600 .85rem monospace;letter-spacing:.06em}
.is-preview .pass-main::after{content:"PREVIEW";position:absolute;left:28px;top:50%;font:600 4.5rem var(--sans);color:#d7262b1f;transform:rotate(-12deg);pointer-events:none}
.pass-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pass-actions .pill{padding:10px 18px;font-size:.92rem}
.pass-note{margin:14px 0 0;font:500 .92rem/1.5 var(--serif);color:#444;max-width:560px}
.pass-privacy{margin:10px 0 0;font:500 .85rem/1.5 var(--serif);color:#555;max-width:560px}.pass-privacy .text-button{font-size:.85rem;padding:0;border-bottom-width:1px}
.fan-email{margin-top:20px}
.fan-banner{margin:20px 0 0;padding:14px 18px;border-radius:14px;background:white;border-left:6px solid var(--blue);font:600 1rem/1.45 var(--sans)}
.fan-banner.is-success{border-left-color:#2f8f4e}
.connect-signup .fan-tier-link{margin-top:22px}

/* fan-club.html */
.fan-page{background:var(--tan)}
.fan-hero{padding-top:150px}
.fan-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:start}
.fan-hero h1{font-size:clamp(3rem,6vw,6rem);margin:18px 0 26px}
.fan-hero h1 em{font-style:normal;color:var(--ticket-red)}
.fan-lede{font:500 clamp(1.15rem,1.7vw,1.4rem)/1.55 var(--serif);max-width:620px}
.fan-ticket-box{background:white;border-radius:26px;padding:clamp(22px,3vw,36px);--pass-cutout:white}
.fan-ticket-box .fan-take{margin-top:0}
.fan-tiers{background:var(--ink);color:white}
.fan-tiers .section-label{color:var(--tan)}
.fan-tiers h2{margin-bottom:34px}
.countdown{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding:22px 26px;border:1px solid #ffffff40;border-radius:18px;margin-bottom:34px}
.countdown p{margin:0;font:500 1.1rem var(--serif);max-width:520px}
.countdown-clock{display:flex;gap:14px}
.countdown-clock span{display:grid;justify-items:center;min-width:64px;padding:10px 6px;border-radius:12px;background:#ffffff14}
.countdown-clock strong{font:400 2.2rem/1 var(--display);color:var(--orange);font-variant-numeric:tabular-nums}
.countdown-clock small{font:600 .7rem var(--sans);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.tier-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* Each card is topped by a plate in its tier's metal, in quiet matte tones, with the price set large. */
.tier{position:relative;display:flex;flex-direction:column;gap:14px;padding:0 0 28px;border-radius:22px;overflow:hidden;border:1px solid #ffffff24;background:#121212;transition:transform .3s}
.tier>:not(.tier-plate){margin-left:26px;margin-right:26px}
.tier-free{--tier:#c8302f;--ink-metal:#fff;--metal:linear-gradient(180deg,#c8302f,#b52a2a)}
.tier-copper{--tier:#c48e6e;--ink-metal:#2b160a;--metal:linear-gradient(180deg,#c48e6e,#b47d5c)}
.tier-bronze{--tier:#b0936c;--ink-metal:#21170b;--metal:linear-gradient(180deg,#b0936c,#9f835d)}
.tier-silver{--tier:#c5c9cd;--ink-metal:#1e2328;--metal:linear-gradient(180deg,#d6d9dc,#c5c9cd)}
.tier-gold{--tier:#d4b979;--ink-metal:#2a2108;--metal:linear-gradient(180deg,#d4b979,#c4a764)}
.tier-platinum{--tier:#e7e6e2;--ink-metal:#1e2126;--metal:linear-gradient(180deg,#e7e6e2,#d8d7d2)}
.tier-plate{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:24px 26px 22px;background:var(--metal);color:var(--ink-metal);container-type:inline-size}
.tier-name{font:600 .85rem var(--sans);letter-spacing:.16em;text-transform:uppercase}
.tier-plate{grid-template-rows:minmax(24px,auto)}
/* 19cqi fits "$1,000,000" on one line; every card uses the same size. */
.tier-price{grid-column:1/-1;margin-top:4px;font:400 min(4.6rem,19cqi)/.95 var(--display);letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Cards side by side: plates without a caption keep its space, so the lists below line up. */
@media(min-width:701px){.tier-plate .tier-price:not(:has(small)){padding-bottom:calc(10px + 1.3rem)}}
.tier-cur{font-size:.5em;vertical-align:.72em;line-height:0;margin-right:.04em}
.tier-price small{display:block;margin-top:10px;font:500 1rem/1.3 var(--serif);letter-spacing:0;opacity:.85}
.tier ul{list-style:none;padding:0;margin-top:8px;margin-bottom:8px;display:grid;gap:8px;flex:1}
.tier li{position:relative;padding-left:18px;font:500 1rem/1.45 var(--serif)}
.tier li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--tier)}
.tier .pill{align-self:start;color:white}
.tier .pill-solid{background:var(--orange);border-color:var(--orange)}
.tier .pill:disabled{opacity:.5;cursor:not-allowed}
.tier .pill.is-included{opacity:1;background:transparent;border-color:var(--tier);color:var(--tier);cursor:default}
.tier-included{margin-top:0;margin-bottom:0;font:500 .95rem/1.45 var(--serif);color:#ffffffc8}
.tier-badge{padding:4px 10px;border:1px solid currentColor;border-radius:20px;font:600 .66rem var(--sans);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
@media(hover:hover){.tier:hover{transform:translateY(-4px)}}
/* Homepage: the paid tiers as a ladder of metal bars, each linking to its card on fan-club.html. */
.tier-ladder{list-style:none;margin:30px 0 26px;padding:0;display:grid;gap:10px;container-type:inline-size}
.tier-ladder a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px;border-radius:14px;background:var(--metal);color:var(--ink-metal);transition:transform .2s}
.tier-ladder a:hover{text-decoration:none;transform:translateX(4px)}
.tier-ladder-name{display:grid;gap:3px;min-width:0}
.tier-ladder small{font:500 .92rem/1.3 var(--serif);opacity:.85}
.tier-ladder .tier-price{flex:none;margin:0;font-size:min(3.2rem,9cqi)}
/* Narrow cards (phones): the price goes under the name, so it can be bigger. */
@container (max-width:420px){.tier-ladder a{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 18px}.tier-ladder .tier-price{font-size:min(3.2rem,15.5cqi)}}
@media(prefers-reduced-motion:reduce){.tier,.tier:hover,.tier-ladder a,.tier-ladder a:hover{transition:none;transform:none}}
.tier [data-vetting]{font:500 .92rem var(--serif);color:#ffffffc0;margin-top:0;margin-bottom:0}
.tier [data-vetting] a{color:var(--yellow)}
.tier-fine{margin-top:34px;font-size:.85rem;line-height:1.55;color:#ffffffa8;max-width:900px}
.fan-faq h2{font-size:clamp(2.4rem,4vw,3.6rem);margin-bottom:34px}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 40px}
.faq-grid h3{font-size:1.3rem;margin-bottom:8px}
.faq-grid p{font:500 1.02rem/1.6 var(--serif);margin:0}
.faq-grid a{text-decoration:underline;text-underline-offset:2px}
.tier-dialog{width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 40px);border:0;border-radius:24px;padding:34px;box-sizing:border-box}
.tier-dialog::backdrop{background:#000a}
.tier-dialog h2{font-size:2.6rem;margin:8px 0 4px}
.tier-dialog-price{margin:0;font:600 1.2rem var(--sans);color:var(--blue)}
.close-tier{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:white;font-size:1.4rem;cursor:pointer}
.tier-dialog textarea{width:100%;box-sizing:border-box;font:500 1rem var(--serif);padding:12px;border:1.5px solid var(--line);border-radius:12px}
.tier-number{margin:0}
@media(max-width:1000px){.tier-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fan-hero-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.fan-hero{padding-top:110px}
.tier-grid,.faq-grid{grid-template-columns:minmax(0,1fr)}
.fan-pass{--stub:130px}
.pass-main{padding:20px 16px 20px 18px}
.pass-stub{padding:14px 10px}
.pass-qr{width:96px}
.pass-code{font-size:.66rem}
.countdown-clock{gap:8px}.countdown-clock span{min-width:54px}
.tier-plate{padding:22px 22px 20px}.tier>:not(.tier-plate){margin-left:22px;margin-right:22px}
.tier-dialog{padding:26px 20px}}
[data-fan-after][hidden]{display:none}
.connect-card{--pass-cutout:white}
/* Size the number to the pass, so six digits always fit. */
.pass-main{container-type:inline-size}
.pass-number{font-size:min(5.2rem,17cqi)}
.tier-dialog [hidden]{display:none}
/* Phones: stack the stub under the number so the number can be big. */
@media(max-width:480px){.fan-pass{grid-template-columns:minmax(0,1fr)}
.fan-pass::before,.fan-pass::after{display:none}
.pass-main{border-right:0;border-bottom:2px dashed #4d789166}
.pass-stub{width:auto;grid-auto-flow:column;justify-content:start;align-items:center;gap:16px}
.pass-qr{width:92px}
.pass-code{font-size:.85rem}}