/* Decision 351: the marketing pages on a computer or tablet (821px and up). Decision 350 fixed contrast, type size and
   tap room inside the phone blocks only; this lifts the same values to desktop, so every width reads the same. The
   phone blocks are left as they are, so phones do not change. Loaded last by index.html, for-fighters and for-brands. */
@media (min-width:821px){

/* PUB-4: white text sits on the text-safe red (#d6331c, 4.8:1 with white); the bright red stays for display type. */
.primary,.dialog-reward{background:#d6331c;color:#fff}
.primary:hover{background:#b92a15}
.store-url{background:#d6331c;color:#fff}
.fighter-sport{background:#d6331c;color:#fff}
.closing{background:#d6331c}
.closing-bottom>p,.closing>.eyebrow,.closing .eyebrow{color:#fff}
.brand-section{--muted:#111}
.brand-partner-copy p,.brand-partner-copy>.lead{color:#111}
.b-closing{background:#d6331c}

/* PUB-5: a 12px floor; 11px only for uppercase labels tracked at 0.08em or more. */
.hero-kicker,.photo-label>span,.hero-benefits,.royalty-label,.hero-royalty p,.royalty-disclaimer,.value-index,.value-detail,.calculator-top,.calculator-result>span:first-child,.gross-label,.range-labels,.calculator-pair label>span,.calc-formula,.calculator-note strong,.calculator-note p{font-size:12px}
.calculator-top>span:first-child{max-width:none}
.value-heading .eyebrow,.earnings-story .eyebrow,.closing .eyebrow,.closing>.eyebrow,.eyebrow{font-size:12px}
.hero-foot>span{font-size:11px;letter-spacing:.08em}
.motion-toggle,.motion-label{font-size:12px}
.store-topbar>span,.store-profile-tag,.store-collection-title>span,.store-collection-title strong,.store-mini-products span,.store-mini-products strong,.store-url>span:first-child,.stage-caption{font-size:12px}
.community-photo figcaption{font-size:12px}
.market-topline,.market-topline>span:last-child,.market-heading-copy>span{font-size:11px;letter-spacing:.08em}
.mission-photo-top{font-size:12px}
.mission-status{font-size:11px;letter-spacing:.08em}
.mission-photo-reward>span{font-size:11px;letter-spacing:.08em}
.mission-editorial-category{font-size:12px}
.mission-editorial-deliverable,.mission-editorial-footer>div>span,.gear-edit-footer p>span{font-size:12px}
.gear-card-top,.gear-card-caption>span,.brand-showcase-kicker,.brand-showcase-mark>span{font-size:11px;letter-spacing:.08em}
.gear-feature .gear-card-caption>span{font-size:12px}

/* PUB-6: one grey for secondary text on paper, #6a6961 (4.8:1); a darker sage on the green panels (#5d6b5e and
   #4d5a45, as the phone). The review suggested #6e7a69 for sage, but that is 3.8:1 on these panels. */
.value-heading .eyebrow,.value-index,.value-detail,.royalty-disclaimer,.hero-royalty>div>span:nth-child(2),.calculator-top,.gross-label,.range-labels,.calculator-pair label>span,#fighter-count,.fighter-location,.directory-controls>span{color:#6a6961}
.calculator-note p,.store-profile p,.store-topbar>span,.store-profile-tag,.store-collection-title>span,.store-mini-products span{color:#5f5e57}
.product-edit .market-heading-copy>span,.market-heading-copy>span,.gear-edit-footer p>span,.brand-showcase-mark>span,.gear-card-caption>span{color:#4d5a45}
.b-value-grid article>span,.b-journey li>span,.plan-overline,.plan-overline span,.addon-index,.addon-alt,.detail-plus,.f-steps li>span{color:#b92a15}
.b-mission-card:not(.mission-text-card) .mission-copy>span:first-child,.unavailable{color:#5d6b5e}
.f-person-meta>span,.f-royalty-example>span{color:#4d5a45}
.f-royalty-example b,.fighters-page .gross-label,.fighters-page .range-labels{color:#5d6b5e}

/* PUB-3: the For pages' headlines in Titling capitals, as the home page, the app and the phone. */
#main h2{font-family:Titling,Impact,sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:-.012em;line-height:1.02}
.b-editorial h2,.b-store-copy h2,.b-section-heading h2,.b-managed-heading h2,.b-community-copy h2,.b-addons>h2,.b-comparison .b-section-heading h2,.b-faq h2,.f-value-heading h2,.f-earning-copy h2,.f-how-copy h2,.f-community-copy h2{font-size:clamp(44px,4.4vw,72px)}

/* PUB-14: every control reacts to the pointer. */
.store-step,.faq-list summary,.b-faq-list summary,.comparison-detail summary,.commercial-notes summary,.f-mission summary,.brand-directory>summary{transition:color .2s}
select#fighter-discipline,.discipline-select select{cursor:pointer}

/* PUB-15: a readable measure for body copy and notes. */
.b-commission-note p,.b-mission-note p,.b-managed-copy>p,.b-store-note,.comparison-foot,.comparison-foot p,.f-earnings-note,.f-pricing-note,.earning-note,.section-foot p,.journey-bottom>p{max-width:68ch}
.commercial-notes li{max-width:68ch}
.calculator-note p,.brand-showcase-footer>p,.mission-editorial-footer p,.image-note{max-width:60ch}

/* PUB-18: no red bars along the window edge beside the hero and the calculator. */
.hero-visual:after,.earnings:before{display:none}

/* PUB-13: the red link card covered "Explore Paul Weir's storefront"; the card and the caption already link there. */
.store-visit{display:none}
.stage-caption>a{white-space:nowrap}

/* PUB-19: text links at least 24px tall. */
.hero-foot>a,.community-photo figcaption>a,.stage-caption>a,.mission-brief-content a,.f-share-link>a,.f-catalog-link,.b-text-link,.text-link{padding-block:4px}
.mission-brief-content a{display:inline-block}
}

/* PUB-14: hover, for a mouse. */
@media (min-width:821px) and (hover:hover){
.store-step:hover strong,.faq-list summary:hover,.b-faq-list summary:hover,.comparison-detail summary:hover,.commercial-notes summary:hover,.f-mission summary:hover,.brand-directory>summary:hover{color:var(--red)}
.store-step:hover>span:first-child{color:var(--red)}
a.hero-product:hover strong,a.hero-product:hover .hero-product-link{color:var(--red)}
.f-catalog-link:hover{color:var(--red)}
.motion-toggle:hover{color:var(--paper)}
}

/* PUB-8: the ten fighters stay in two rows of five down to 1000px; below that they are a swipe rail (as on phones)
   instead of three columns that left one fighter alone on a fourth row. */
@media (min-width:1000px) and (max-width:1150px){
.fighter-grid,.f-person-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 16px}
.fighter-info h3,.f-person-meta>h3{font-size:22px;min-height:0}
.fighter-info>p,.f-person-meta>p{font-size:14px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
}
@media (min-width:761px) and (max-width:999px){
.fighter-grid,.f-person-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(31%,260px);gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding:0 var(--gutter) 14px}
.fighter-card,.f-person{scroll-snap-align:start}
.fighter-info>p,.f-person-meta>p{font-size:14px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
}

/* PUB-9: "How it works" in three columns between 821 and 1000px instead of five 110px ones. */
@media (min-width:821px) and (max-width:1000px){
.journey{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:44px}
.journey:before{display:none}
}

/* PUB-16: one content width (1440px, centred) on wide screens, as the storefront and directories; backgrounds and
   the hero photo still run to the edge. The home page sets the same in style.css. */
@media (min-width:1600px){
.home-page{--gutter:max(80px,calc((100vw - 1440px) / 2))}
.fighters-page,.brands-page{--gutter:max(84px,calc((100vw - 1440px) / 2))}
}
/* The shared header and footer line up with each page's own gutter. */
.pc-head,.pc-foot{--pc-g:var(--gutter)}