/* Hallmark · genre: playful/editorial · macrostructure: Collection Index / Workbench
 * design-system: design.md · designed-as-app
 * pre-emit critique: P4 H4 E4 S5 R4 V4 */
@import url('tokens.css?v=club-ui-1');

/* Shared frame. One canvas continues across discovery, commerce and play. */
body { background: var(--color-paper); color: var(--color-ink); font-synthesis: none; }
button, a, input, select, textarea { touch-action: manipulation; }
button, a.primary, a.secondary { min-height: 44px; }
button, input, textarea, select { transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.demo-strip { background: var(--color-paper); color: var(--color-muted); border-bottom: 1px solid var(--color-rule); }
.demo-strip span:first-child { color: var(--color-accent); }
.header { background: var(--color-paper); color: var(--color-ink); }
.brand-product-wordmark { background: var(--color-paper); }
.brand-product-caption { font-family: var(--font-display); font-weight: 500; }
.desktop-nav button { font-size: 12px; }
.desktop-nav button.active { color: var(--color-accent); }
.desktop-nav .active:after { height: 2px; }
.icon-button { background: transparent; color: var(--color-ink); border-radius: var(--radius-card); }
.bag-button b { background: var(--color-accent); color: var(--color-accent-ink); }
body:not([data-view="home"]) #app { padding-top: var(--space-lg); }
.bottom-nav { background: var(--color-paper); }
.bottom-nav button.active { color: var(--color-accent); }
.bottom-nav .active span { background: transparent; padding: 0; }
.bottom-nav .active:after { content: ''; height: 2px; width: 14px; background: var(--color-accent); }
.primary, .primary.lime { background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-card); font-family: var(--font-display); font-weight: 500; gap: var(--space-md); box-shadow: none; }
.secondary { background: transparent; color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: var(--radius-card); font-family: var(--font-display); font-weight: 500; }
.text-link { color: var(--color-accent); }
button:disabled { opacity: .45; }
.primary:disabled { background: var(--color-soft); color: var(--color-muted); }
.notice { background: var(--color-soft); color: var(--color-muted); border-radius: var(--radius-card); border-left: 2px solid var(--color-rule); line-height: 1.8; }
.empty { border-style: solid; border-radius: 0; background: var(--color-white); color: var(--color-ink); }
.empty>svg { color: var(--color-accent); }
.empty h3 { font-weight: 500; }
.eyebrow { font-weight: 500; letter-spacing: .12em; }
.badge { background: var(--color-accent); color: var(--color-accent-ink); }
.badge.soft { background: var(--color-soft); color: var(--color-muted); }
.section-heading h2 { font-size: 24px; font-weight: 500; letter-spacing: .01em; }
.section-heading h2 span { font-family: var(--font-english); font-size: 21px; font-weight: 700; letter-spacing: .025em; }
.marquee { border-color: var(--color-rule); font-family: var(--font-english); font-weight: 700; font-size: 24px; letter-spacing: .035em; }
.marquee, .marquee-window { overflow: clip; }
.marquee-toggle { color: var(--color-accent); }
.footer-note { line-height: 1.8; }
#toast { background: var(--color-stage); color: var(--color-stage-ink); border-radius: var(--radius-card); font-size: 12px; }

/* Editorial mastheads share type, while the content below follows its task. */
.club-page-heading { gap: var(--space-md); align-items: flex-start; border-bottom: 1px solid var(--color-rule); padding-bottom: var(--space-lg); margin-bottom: var(--space-lg); }
.club-page-heading>div { min-width: 0; }
.club-kicker { color: var(--color-accent); font-size: 9px; letter-spacing: .14em; }
.club-page-heading h1, .profile h1 { font-family: var(--font-english); font-size: var(--text-display); line-height: 1.02; letter-spacing: -.015em; font-weight: 700; margin: 14px 0 16px; overflow-wrap: anywhere; word-break: normal; }
.club-page-title { font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.6; letter-spacing: .02em; }
.club-page-heading p { font-size: var(--text-sm); margin-top: var(--space-xs); line-height: 1.9; }
.club-page-heading>.icon-button { flex: 0 0 44px; align-self: flex-end; }

/* Store: one lead product and a quiet catalog, no separate promotion card. */
.club-store-note { display: flex; justify-content: space-between; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-md); color: var(--color-muted); font-size: var(--text-xs); }
.club-store-note>span:first-child { font-family: var(--font-english); font-size: 21px; letter-spacing: .04em; color: var(--color-ink); }
.search { border-radius: var(--radius-input); background: transparent; color: var(--color-muted); margin-bottom: var(--space-sm); }
.search input { color: var(--color-ink); min-width: 0; }
.search input::placeholder { color: var(--color-muted); opacity: 1; }
.filter-row { gap: var(--space-xs); }
.filter { border-radius: var(--radius-card); background: transparent; padding-inline: 16px; min-height: 44px; color: var(--color-muted); }
.filter.active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.club-catalog-meta { padding-block: var(--space-xs); border-top: 1px solid var(--color-rule); margin-bottom: var(--space-md); }
.club-catalog-meta .footer-note { padding: 0; font-size: 9px; }
.products { gap: 28px 18px; }
.product { border-bottom: 1px solid var(--color-rule); padding-bottom: var(--space-md); }
.product-image, .product:nth-child(n) .product-image { background: var(--color-stage); color: var(--color-stage-ink); border-radius: 0; }
.product-tag { background: var(--color-stage-ink); color: var(--color-stage); font-weight: 400; letter-spacing: .04em; }
.product-copy { padding-top: 14px; }
.club-product-kind { display: block; font-family: var(--font-english); font-size: 17px; letter-spacing: .03em; color: var(--color-muted); margin-bottom: 7px; }
.product-copy h3 { font-family: var(--font-display); font-weight: 500; font-size: 14px; }
.product-copy p { font-size: 11px; margin-top: 5px; line-height: 1.8; }
.price { font-family: var(--font-english); font-size: 32px; font-weight: 700; letter-spacing: 0; }
.price small { font-family: var(--font-body); font-size: 12px; font-weight: 400; }
.demo-price { font-family: var(--font-body); font-size: 9px; }
.add-btn { border-radius: 0; min-height: 44px; width: 44px; background: transparent; color: var(--color-accent); border-color: var(--color-rule); position: relative; flex-shrink: 0; }
.product[data-product-id="beer"] { grid-column: span 2; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); background: var(--color-white); color: var(--color-ink); padding: 0; align-items: stretch; }
.product[data-product-id="beer"] .product-image { aspect-ratio: auto; min-height: 310px; }
.product[data-product-id="beer"] .product-copy { padding: var(--space-md); align-self: center; }
.product[data-product-id="beer"] .product-copy h3 { font-size: 23px; line-height: 1.6; }
.product[data-product-id="beer"] .product-copy p { margin-block: var(--space-sm) var(--space-md); }
.product[data-product-id="beer"] .club-product-kind { color: var(--color-accent); font-size: 21px; }
.product[data-product-id="beer"] .price { font-size: 45px; }
.product[data-product-id="beer"] .product-tag { background: var(--color-accent); color: var(--color-accent-ink); }

/* City posters: original artwork is the surface, with a readable text veil. */
.event-list { gap: var(--space-lg); }
.event-card { display: grid; grid-template-columns: minmax(0,1fr); border: 1px solid var(--color-rule); border-radius: 0; background: var(--color-paper); color: var(--color-ink); isolation: isolate; }
.event-card>img { grid-area: 1/1; width: 100%; height: 100%; min-height: 470px; aspect-ratio: auto; object-fit: cover; opacity: .65; z-index: -1; }
.event-card-content { grid-area: 1/1; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-lg); background: linear-gradient(0deg,var(--color-veil),var(--color-clear)); color: var(--color-ink); }
.event-card-content .badge { align-self: flex-start; margin-bottom: 100px; }
.event-card-content h2 { font-size: 30px; line-height: 1.5; letter-spacing: .01em; font-weight: 500; max-width: 14em; }
.event-card-content>p { font-size: 12px; line-height: 1.9; max-width: 36em; }
.event-card-content .event-meta { color: var(--color-ink); font-size: 11px; margin: var(--space-sm) 0 var(--space-md); }
.event-bottom { gap: var(--space-md); border-top: 1px solid var(--color-rule); padding-top: var(--space-md); }
.event-bottom .eyebrow { font-size: 10px; letter-spacing: .025em; }
.event-bottom .primary { font-size: 12px; flex-shrink: 0; }

/* Passport: a field journal, with stamps and tasks on the same green-black page. */
.passport { max-width: none; background: var(--color-white); color: var(--color-ink); border-color: var(--color-rule); border-radius: 0; padding: var(--space-lg); }
.passport-top { border-bottom: 1px solid var(--color-rule); gap: var(--space-md); align-items: flex-start; }
.passport .eyebrow { color: var(--color-accent); }
.passport h2 { font-size: 33px; font-weight: 500; line-height: 1.5; }
.passport-top p { color: var(--color-muted); font-size: 12px; line-height: 1.9; }
.passport-number { writing-mode: initial; font-family: var(--font-english); font-size: 22px; line-height: 1.1; letter-spacing: .035em; color: var(--color-muted); white-space: nowrap; text-align: right; }
.progress { background: var(--color-soft); border-radius: 0; height: 4px; }
.progress div { background: var(--color-accent); }
.passport>.progress+p { color: var(--color-muted); }
.passport>.progress+p strong { color: var(--color-accent); font-family: var(--font-english); font-size: 25px; margin-inline: var(--space-2xs); }
.stamps { gap: var(--space-lg); max-width: 680px; margin: var(--space-xl) auto; }
.stamp { background: var(--color-paper); color: var(--color-muted); border: 1px dashed var(--color-rule); opacity: 1; }
.stamp strong { font-family: var(--font-display); font-weight: 500; }
.stamp.done { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent-ink); }
.task strong { font-family: var(--font-display); font-weight: 500; }
.task p { margin-top: var(--space-2xs); max-width: 46em; line-height: 1.8; }
.task button { flex-shrink: 0; }
.redeem { background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: 0; margin-top: var(--space-lg); padding: var(--space-md); }
.redeem h3 { font-size: 24px; font-weight: 500; margin-bottom: var(--space-md); }
.reward strong { font-weight: 500; }
.reward button { flex-shrink: 0; }

/* Personal corner and records. The image comes from the original brand artwork. */
.profile { position: relative; isolation: isolate; justify-content: space-between; padding: var(--space-lg) 0 var(--space-xl); background: transparent; color: var(--color-ink); border-radius: 0; border-bottom: 1px solid var(--color-rule); overflow: clip; }
.profile>div:first-child { position: relative; z-index: 1; }
.profile h1 { font-size: 108px; }
.profile h2 { font-size: 25px; font-weight: 500; letter-spacing: .025em; }
.profile p { color: var(--color-muted); margin-top: var(--space-xs); }
.profile .avatar { width: 280px; height: 300px; border-radius: 0; background: transparent; position: absolute; right: -20px; z-index: -1; opacity: .7; mask-image: linear-gradient(90deg,transparent,var(--color-paper)); -webkit-mask-image: linear-gradient(90deg,transparent,var(--color-paper)); }
.profile .avatar img { object-fit: cover; object-position: 80% 55%; mix-blend-mode: lighten; }
.stats { border-radius: 0; margin-top: 0; border-inline: 0; border-top: 0; padding: var(--space-md) 0; }
.stats button { color: var(--color-muted); }
.stats strong { font-family: var(--font-english); font-size: 44px; font-weight: 700; color: var(--color-accent); line-height: 1.3; }
.order-card { border-radius: 0; background: var(--color-white); color: var(--color-ink); }
.order-body img, .cart-item img { background: var(--color-stage); border-radius: 0; }
.order-head { flex-wrap: wrap; }
.order-body h3 { font-weight: 500; }
.order-body strong { font-family: var(--font-english); font-size: 27px; font-weight: 700; }
.menu-list button { padding: 20px 0; font-size: 13px; }
.menu-list button>span:first-child { display: flex; align-items: center; }
.menu-list button>span:last-child { color: var(--color-accent); }
.ticket-code { border-radius: 0; }
.ticket-code strong { font-family: var(--font-english); font-size: 32px; }

/* Word wall. Text carries the collection, with one silver sheet among dark rows. */
.club-word-invite { background: transparent; color: var(--color-ink); padding: 0 0 var(--space-lg); border-bottom: 1px solid var(--color-rule); border-radius: 0; }
.club-word-invite .eyebrow { font-family: var(--font-english); color: var(--color-accent); font-size: 24px; letter-spacing: .025em; }
.club-word-invite p { color: var(--color-muted); font-size: 11px; }
.club-word-invite .primary { font-size: 12px; flex-shrink: 0; }
.quote-list { gap: 0 var(--space-lg); }
.quote-entry { background: transparent; color: var(--color-ink); border-radius: 0; border: 0; border-top: 1px solid var(--color-rule); padding: 35px 0; display: flex; flex-direction: column; justify-content: space-between; min-height: 230px; }
.quote-entry:nth-child(4n+2) { background: var(--color-stage); color: var(--color-stage-ink); padding-inline: var(--space-lg); border-color: var(--color-stage); }
.quote-entry blockquote { font-family: var(--font-display); font-size: 30px; font-weight: 500; line-height: 1.7; margin-bottom: var(--space-lg); max-width: 15em; }
.quote-entry footer { font-size: 10px; gap: var(--space-sm); }
.quote-entry:nth-child(4n+2) footer { color: var(--color-stage-muted); }
.like-btn { border-radius: var(--radius-card); min-height: 44px; color: var(--color-muted); }
.like-btn.liked { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.quote-entry:nth-child(4n+2) .like-btn { border-color: var(--color-stage-muted); color: var(--color-stage-ink); }
.submitted { background: var(--color-soft); color: var(--color-ink); border-left: 2px solid var(--color-accent); }
.submitted strong { color: var(--color-accent); font-weight: 500; font-size: 12px; }
.submitted p { padding-top: var(--space-xs); font-size: 13px; }

/* Quiz and studio. Dark working surfaces; the avatar itself remains labelled Demo. */
.duck-page-head { margin-bottom: var(--space-lg); }
.duck-page-head>.text-link { margin-bottom: var(--space-sm); font-size: 11px; }
.club-play-heading { padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.club-play-heading h1 { font-family: var(--font-english); font-size: 86px; line-height: 1.02; font-weight: 700; letter-spacing: -.015em; overflow-wrap: anywhere; }
.club-play-heading h2 { font-family: var(--font-display); font-size: 25px; line-height: 1.5; font-weight: 500; letter-spacing: .02em; margin-top: 14px; }
.club-play-heading>p { color: var(--color-muted); font-size: 12px; line-height: 1.8; margin-top: var(--space-xs); }
.duck-pill { border-radius: var(--radius-card); font-size: 10px; font-weight: 500; }
.duck-intro { border-radius: 0; border: 0; background: transparent; color: var(--color-ink); gap: var(--space-xl); }
.duck-intro-art { position: relative; isolation: isolate; background: var(--color-paper); color: var(--color-ink); padding: 0; min-height: 430px; overflow: clip; border-bottom: 1px solid var(--color-rule); }
.duck-brand-intro-image { width: 100%; height: 100%; max-height: 480px; max-width: none; object-fit: contain; object-position: center; border-radius: 0; mix-blend-mode: lighten; mask-image: linear-gradient(90deg,transparent,var(--color-paper) 15%,var(--color-paper) 85%,transparent); -webkit-mask-image: linear-gradient(90deg,transparent,var(--color-paper) 15%,var(--color-paper) 85%,transparent); }
.duck-intro-art>.duck-art-label { position: absolute; bottom: 12px; padding: 5px; background: var(--color-paper); color: var(--color-muted); font-size: 8px; }
.duck-intro-copy { padding: var(--space-md) 0; }
.duck-intro-copy h2 { font-size: 36px; font-weight: 500; letter-spacing: .01em; line-height: 1.5; }
.duck-mini-dims { gap: 12px 22px; }
.duck-mini-dims span { font-size: 13px; }
.duck-mini-dims i { margin-inline: 12px; }
.duck-quiz { max-width: 800px; border-radius: 0; padding: 28px 32px; background: var(--color-white); color: var(--color-ink); scroll-margin-top: 105px; }
.duck-quiz-meta strong { font-family: var(--font-english); font-size: 26px; font-weight: 700; letter-spacing: .025em; }
.duck-quiz-progress { border-radius: 0; height: 3px; margin-top: 12px; }
.duck-question-scene { color: var(--color-accent); font-weight: 500; }
.duck-quiz h2 { font-weight: 500; font-size: 28px; letter-spacing: .015em; }
.duck-answer { border-radius: var(--radius-card); background: transparent; color: var(--color-ink); }
.duck-answer-letter { border-radius: 0; border-color: var(--color-rule); font-family: var(--font-english); font-size: 25px; font-weight: 700; width: 32px; height: 40px; flex-basis: 32px; }
.duck-answer>span:nth-child(2) { font-weight: 400; line-height: 1.85; }
.duck-answer.selected { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.duck-answer.selected .duck-answer-letter { border-color: var(--color-accent-ink); }
.duck-answer i { color: var(--color-accent); }
.duck-answer.selected i { color: var(--color-accent-ink); }
.duck-result-layout { gap: var(--space-xl); }
.duck-result-poster { border-radius: 0; background: var(--color-white); color: var(--color-ink); border-color: var(--color-rule); }
.duck-poster-brand { font-family: var(--font-english); font-size: 25px; letter-spacing: .02em; border-color: var(--color-rule); color: var(--color-accent); }
.duck-result-name small { font-family: var(--font-english); font-size: 19px; letter-spacing: .08em; color: var(--color-muted); }
.duck-result-name h2 { font-size: 35px; font-weight: 500; letter-spacing: .02em; }
.duck-result-poster>.duck-avatar { border: 0; border-radius: 0; }
.duck-keywords span { border-color: var(--color-rule); border-radius: 0; font-size: 11px; }
.duck-result-poster blockquote { font-weight: 400; }
.duck-result-info>h2 { font-size: 30px; font-weight: 500; }
.duck-dimension-bar { background: var(--color-soft); border-radius: 0; height: 4px; }
.duck-dimension-bar i { background: var(--color-accent); }
.duck-result-info>.duck-pill { background: transparent; color: var(--color-accent); padding: 0; }
.duck-action-stack button { font-size: 12px; }
.duck-preview-column { top: 106px; }
.duck-preview-heading { font-size: 10px; }
.duck-preview-heading>span { font-family: var(--font-english); font-size: 22px; letter-spacing: .025em; }
.duck-preview-heading strong { color: var(--color-accent); font-size: 10px; }
.duck-avatar-stage { border-radius: 0; border-color: var(--color-rule); }
.duck-preview-tools button { font-size: 11px; }
.duck-workbench { border-radius: 0; border-color: var(--color-rule); background: transparent; color: var(--color-ink); padding: var(--space-md); }
.duck-category-tabs { border-radius: 0; border-color: var(--color-rule); }
.duck-category-tabs button { color: var(--color-muted); }
.duck-category-tabs button[aria-selected=true] { background: var(--color-accent); color: var(--color-accent-ink); }
.duck-options-grid { gap: 10px; }
.duck-look-option, .duck-look-option.selected { border: 1px solid var(--color-rule); padding: 7px; border-radius: 0; background: transparent; color: var(--color-ink); }
.duck-look-option.selected { border-color: var(--color-accent); background: var(--color-soft); }
.duck-look-option>div { border-radius: 0; }
.duck-look-option>span { min-height: 20px; }
.duck-look-option>i { border-radius: 0; background: var(--color-accent); color: var(--color-accent-ink); }
.duck-studio-personality { margin-block: var(--space-md); }
.duck-studio-personality strong { font-weight: 500; }
.duck-save-bar>span { color: var(--color-accent); }
.duck-export-buttons button { border-radius: 0; }
.duck-export-result { background: var(--color-white); color: var(--color-ink); border-radius: 0; border: 1px solid var(--color-rule); }
.duck-export-result>img { border-radius: 0; }
.duck-export-result>strong { color: var(--color-accent); font-weight: 500; }
.duck-warning { background: var(--color-white); color: var(--color-error); border-radius: 0; }

/* Product, cart, checkout, tickets and other dialog states use the same system. */
dialog { border: 1px solid var(--color-rule); border-radius: var(--radius-card); height: fit-content; color-scheme: dark; }
.modal-head { padding: 16px 22px; background: var(--color-paper); color: var(--color-ink); }
.club-modal-kicker { display: block; color: var(--color-accent); font-family: var(--font-english); font-size: 23px; letter-spacing: .025em; }
.modal-head h2 { font-size: 18px; font-weight: 500; letter-spacing: .02em; margin-top: 2px; }
.modal-body h3 { font-weight: 500; font-size: 23px; letter-spacing: .01em; }
.modal-product-img { border-radius: 0; background: var(--color-stage); color: var(--color-stage-ink); }
.modal-body .price { font-size: 40px; }
.option, .ticket-option, .city-options button { border-radius: 0; }
.option.active, .ticket-option.active { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.stepper { background: transparent; border-radius: 0; color: var(--color-ink); }
.stepper button, .cart-item .stepper button { min-height: 44px; width: 40px; }
.stepper span { min-width: 28px; }
.field input, .field textarea, .field select { background: var(--color-white); color: var(--color-ink); border-radius: var(--radius-input); border-color: var(--color-rule); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }
.checkline { padding-block: 4px; }
.checkline input { accent-color: var(--color-accent); }
.cart-item img { align-self: flex-start; }
.cart-item h3 { font-size: 14px; }
.cart-item-bottom { gap: 8px; }
.cart-total strong { font-family: var(--font-english); font-size: 40px; }
.ticket-option strong { font-weight: 500; }
.ticket-option b { font-family: var(--font-english); font-size: 32px; }
.event-detail-img { border-radius: 0; }
.city-options button { padding-inline: 8px; }
.city-options strong { font-weight: 500; }
.success .success-icon { background: var(--color-accent); color: var(--color-accent-ink); border-radius: 0; }
.success h3 { font-weight: 500; }

@media (hover:hover) {
  .primary:hover, .primary.lime:hover { background: var(--color-accent); color: var(--color-accent-ink); filter: brightness(.93); }
  .secondary:hover, .filter:not(.active):hover, .option:not(.active):hover, .duck-answer:not(.selected):hover, .duck-look-option:not(.selected):hover { background: var(--color-soft); color: var(--color-ink); }
  .add-btn:hover { background: var(--color-accent); color: var(--color-accent-ink); }
  .menu-list button:hover, .stats button:hover { color: var(--color-accent); }
  .search:hover, .field input:hover, .field textarea:hover { background: var(--color-soft); }
}

@media (max-width:1000px) and (min-width:761px) {
  .desktop-nav { gap: 14px; }
  .header { gap: 16px; }
  .brand-product-wordmark { width: 115px; }
  .brand-product-caption { font-size: 13px; }
  .product[data-product-id="beer"] .product-copy { padding: 14px; }
  .product[data-product-id="beer"] .product-copy h3 { font-size: 19px; }
  .product[data-product-id="beer"] .product-image { min-height: 260px; }
  .event-card-content { padding: 22px; }
  .event-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .duck-studio { gap: 20px; }
}

@media (max-width:760px) {
  body:not([data-view="home"]) #app { padding-top: var(--space-md); }
  .header { gap: 10px; }
  .icon-button { min-height: 44px; width: 44px; }
  .bottom-nav .active span { padding: 0; }
  .club-page-heading { padding-bottom: var(--space-md); margin-bottom: var(--space-md); }
  .club-page-heading h1, .profile h1 { font-size: 68px; margin: 14px 0 12px; }
  .club-page-title { font-size: 21px; line-height: 1.65; }
  .club-page-heading p { font-size: 11px; }
  .club-kicker { font-size: 8px; }
  .club-page-heading>.icon-button { display: none; }
  .club-store-note { display: block; margin-bottom: 16px; }
  .club-store-note>span:first-child { display: block; font-size: 20px; }
  .club-store-note>span:last-child { display: block; font-size: 9px; margin-top: 4px; }
  .filter-row { gap: 6px; margin-block: 12px 20px; }
  .filter { padding: 6px 12px; min-height: 44px; }
  body[data-view="shop"] .filter-row { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; }
  body[data-view="shop"] .filter { padding-inline: 2px; font-size: 10px; }
  .club-catalog-meta { align-items: center; margin-bottom: 14px; }
  .club-catalog-meta .eyebrow { font-size: 9px; letter-spacing: .025em; }
  .club-catalog-meta .footer-note { font-size: 8px; }
  .products { gap: 24px 12px; }
  .product-image { padding: 14px; }
  .product-copy h3 { font-size: 12px; }
  .product-copy p { font-size: 10px; line-height: 1.8; }
  .club-product-kind { font-size: 14px; margin-bottom: 5px; }
  .product-copy { padding-top: 11px; }
  .price { font-size: 28px; }
  .price small { font-size: 10px; }
  .demo-price { font-size: 8px; margin-left: 4px; }
  .product[data-product-id="beer"] .product-image { min-height: 248px; padding: 15px 10px; }
  .product[data-product-id="beer"] .product-copy { padding: 14px 12px; }
  .product[data-product-id="beer"] .product-copy h3 { font-size: 19px; }
  .product[data-product-id="beer"] .club-product-kind { font-size: 17px; line-height: 1.2; }
  .product[data-product-id="beer"] .product-copy p { font-size: 10px; margin-block: 10px 12px; }
  .product[data-product-id="beer"] .price { font-size: 37px; }
  .product[data-product-id="beer"] .demo-price { display: block; margin: -5px 0 0; }
  .event-card>img { min-height: 470px; object-position: 60% center; }
  .event-card-content { padding: 22px; }
  .event-card-content .badge { margin-bottom: 105px; }
  .event-card-content h2 { font-size: 27px; line-height: 1.6; }
  .event-card-content>p { font-size: 11px; }
  .event-bottom { gap: 10px; }
  .event-bottom .eyebrow { font-size: 9px; }
  .event-bottom .primary { padding-inline: 13px; font-size: 11px; gap: 10px; }
  .passport { padding: var(--space-md) 16px; }
  .passport h2 { font-size: 27px; margin-top: 12px; }
  .passport-top { display: block; position: relative; }
  .passport-top p { font-size: 11px; }
  .passport-number { display: block; margin-top: 16px; font-size: 18px; text-align: left; }
  .passport-number br { display: none; }
  .passport-number br:after { content: ' / '; }
  .stamps { gap: 7px; margin-block: 25px; }
  .stamp { padding: 4px; }
  .stamp strong { font-size: 11px; }
  .stamp small { font-size: 7px; }
  .task { gap: 14px; }
  .task strong { font-size: 12px; }
  .task p { font-size: 10px; }
  .task button { padding-inline: 10px; }
  .redeem { padding: 16px; margin-inline: -1px; }
  .redeem h3 { font-size: 21px; }
  .reward { gap: 10px; }
  .reward p { font-size: 10px; }
  .profile { padding: 10px 0 26px; }
  .profile .avatar { width: 190px; height: 250px; right: -24px; opacity: .6; }
  .profile h2 { font-size: 22px; }
  .profile p { font-size: 11px; }
  .stats { padding: 15px 0; }
  .stats strong { font-size: 36px; }
  .section-heading h2 { font-size: 21px; }
  .section-heading h2 span { font-size: 20px; }
  .menu-list button { font-size: 12px; padding-block: 18px; }
  .club-word-invite { gap: 15px; align-items: flex-start; }
  .club-word-invite p { font-size: 10px; line-height: 1.8; }
  .club-word-invite .primary { font-size: 11px; padding-inline: 12px; gap: 12px; }
  .quote-entry { min-height: 215px; padding-block: 28px; }
  .quote-entry:nth-child(4n+2) { padding-inline: 20px; }
  .quote-entry blockquote { font-size: 28px; line-height: 1.75; }
  .quote-entry footer { font-size: 9px; gap: 10px; }
  .like-btn { font-size: 11px; padding-inline: 12px; }
  .club-play-heading h1 { font-size: 62px; line-height: 1.05; }
  .club-play-heading h2 { font-size: 22px; margin-top: 12px; }
  .club-play-heading>p { font-size: 11px; }
  .duck-page-head { margin-bottom: 20px; }
  .duck-page-head>.text-link { margin-bottom: 12px; }
  .duck-intro { gap: 12px; }
  .duck-intro-art { min-height: 250px; height: 250px; }
  .duck-brand-intro-image { max-height: none; object-fit: contain; object-position: center; }
  .duck-intro-copy { padding: 20px 0 0; }
  .duck-intro-copy h2 { font-size: 29px; line-height: 1.6; }
  .duck-intro-copy>p { font-size: 12px; }
  .duck-quiz { padding: 20px 16px; scroll-margin-top: 90px; }
  .duck-quiz-meta strong { font-size: 24px; }
  .duck-quiz-meta span { font-size: 9px; }
  .duck-quiz-progress { margin-bottom: 22px; }
  .duck-quiz h2 { font-size: 22px; min-height: 84px; line-height: 1.6; margin-bottom: 22px; }
  .duck-answer { min-height: 94px; padding: 13px 11px; }
  .duck-answer-letter { font-size: 24px; height: 36px; }
  .duck-answer>span:nth-child(2) { font-size: 12px; }
  .duck-result-name h2 { font-size: 30px; }
  .duck-result-info>h2 { font-size: 26px; }
  .duck-preview-column { top: 69px; background: var(--color-paper); color: var(--color-ink); padding-block: 12px; gap: 10px 14px; }
  .duck-preview-heading>span { font-size: 19px; }
  .duck-preview-heading strong { font-size: 9px; }
  .duck-preview-tools button { min-height: 44px; padding: 7px; }
  .duck-avatar-stage { border-radius: 0; }
  .duck-workbench { padding: 16px; }
  .duck-category-tabs button { font-size: 11px; }
  .duck-export-buttons button { min-height: 46px; }
  .duck-studio-personality p { font-size: 10px; }
  .duck-options-grid { gap: 8px; }
  .duck-look-option>span { font-size: 9px; }
  .modal-head { padding: 12px 18px; }
  .modal-body { padding: 18px; }
  .modal-product-img { height: 235px; }
  .modal-actions button { min-height: 46px; font-size: 12px; }
  .cart-item { gap: 10px; }
  .cart-item img { width: 65px; height: 85px; }
  .cart-item .stepper button { width: 34px; }
  .cart-item .stepper span { min-width: 23px; }
  .cart-item-bottom>strong { font-size: 12px; }
  .order-body strong { font-size: 24px; }
  .marquee { font-size: 22px; }
}

@media (max-width:350px) {
  .club-page-heading h1, .profile h1 { font-size: 58px; }
  .club-page-title { font-size: 19px; }
  .club-play-heading h1 { font-size: 53px; }
  .club-play-heading h2 { font-size: 20px; }
  .club-page-heading p { font-size: 10px; }
  .club-product-kind { font-size: 12px; }
  .product[data-product-id="beer"] .product-copy { padding: 12px 10px; }
  .product[data-product-id="beer"] .product-copy h3 { font-size: 17px; }
  .product[data-product-id="beer"] .product-image { min-height: 235px; }
  .product[data-product-id="beer"] .price { font-size: 34px; }
  .product[data-product-id="beer"] .add-btn { width: 40px; }
  .product-copy h3 { font-size: 11px; }
  .product-copy p { font-size: 9px; }
  .stamp strong { font-size: 10px; }
  .quote-entry blockquote { font-size: 25px; }
  .quote-entry footer { font-size: 8px; }
  .quote-entry:nth-child(4n+2) { padding-inline: 16px; }
  .duck-quiz { padding: 18px 13px; }
  .duck-quiz h2 { font-size: 20px; }
  .duck-answer { gap: 8px; }
  .duck-answer-letter { width: 25px; flex-basis: 25px; }
  .duck-answer>span:nth-child(2) { font-size: 11px; }
  .duck-answer i svg { width: 15px; }
  .duck-preview-heading>span { font-size: 17px; }
  .duck-workbench { padding: 12px; }
  .duck-export-buttons { flex-direction: row; }
  .duck-export-buttons button { font-size: 10px; gap: 5px; padding-inline: 7px; }
}

@media (prefers-reduced-motion:reduce) {
  button, input, textarea, select { transition: none; }
}