/*
 * Athletic Army: homepage sections, loaded on the front page only (enqueue.php).
 * Built on Barry's homepage structure with the brand's own marks. Tokens come from theme.css.
 */

/* Hero: full-bleed duotone (greyscale under olive, like Barry's red room), field green from the left for the words,
   campaign line in Industry Inc Stencil, and a "find your kit" card where Barry's has "find a studio". */
.aa-hero--field { min-height: clamp(560px, 78vh, 760px) !important; }
.aa-hero--field::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--aa-field-green) 0, rgba(18, 27, 20, .9) 34%, rgba(18, 27, 20, .2) 72%, rgba(18, 27, 20, .4) 100%); pointer-events: none; }
.aa-hero--field .wp-block-cover__inner-container { z-index: 2; max-width: var(--wp--style--global--wide-size, 1280px) !important; margin-inline: auto; }
.aa-hero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(1) brightness(1.85) contrast(.9); transition: opacity .9s var(--aa-ease); }
.aa-hero__video.is-playing { opacity: 1; }
.aa-hero__toggle { position: absolute; right: var(--aa-gutter); bottom: 1.25rem; z-index: 3; width: 44px; height: 44px; padding: 0; border: 2px solid rgba(255, 255, 255, .7); border-radius: 50%; background: rgba(18, 27, 20, .6); color: #fff; cursor: pointer; }
.aa-hero__toggle::before, .aa-hero__toggle::after { content: ""; position: absolute; top: 13px; width: 4px; height: 14px; background: currentColor; }
.aa-hero__toggle::before { left: 14px; } .aa-hero__toggle::after { right: 14px; }
.aa-hero__toggle[aria-pressed="true"]::before { left: 16px; width: 0; height: 0; background: none; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.aa-hero__toggle[aria-pressed="true"]::after { display: none; }
body .aa-hero--field .aa-hero__grid { width: 100%; max-width: none !important; gap: clamp(1.5rem, 4vw, 4rem); margin: 0; }
.aa-hero__grid > .wp-block-column:last-child { flex: 0 0 min(100%, 420px) !important; }
/* The cover's paragraph rule is (0,3,1); this matches it and loads later. */
.wp-block-cover.aa-hero--field p.aa-campaign { max-width: none !important; min-height: 1.76em; margin: 0 0 .75rem; color: #fff; font: 300 var(--aa-t-display)/.88 var(--aa-head); letter-spacing: var(--aa-ls-head); text-transform: uppercase; }
.aa-hero--field h1 { max-width: 30ch !important; margin-bottom: .75rem; color: var(--aa-khaki); font-size: var(--aa-t-h3); line-height: 1.15; }
.aa-hero--field p:not(.aa-campaign):not(.aa-kicker) { max-width: 46ch !important; }
.aa-findkit { padding: clamp(1.25rem, 2.5vw, 1.75rem); background: rgba(18, 27, 20, .9); border: 1px solid rgba(232, 227, 211, .22); color: var(--aa-on-dark); }
.aa-findkit h2 { margin: 0 0 1rem; color: #fff; font-size: var(--aa-t-h3); }
.aa-findkit .wp-block-search__inside-wrapper { display: flex; gap: 0; }
.aa-findkit .wp-block-search__input { flex: 1; min-width: 0; min-height: 48px; border: 2px solid #fff; border-right: 0; background: #fff; color: var(--aa-ink); }
.aa-findkit .wp-block-search__button { margin: 0; min-height: 48px; border: 2px solid var(--aa-accent-dark); background: var(--aa-accent-dark); color: #fff; font: 300 var(--aa-t-ui)/1 var(--aa-head); letter-spacing: var(--aa-ls-head); text-transform: uppercase; padding: 0 1.25rem; }
/* A fixed 2 x 2 grid: the card keeps its height whichever font is showing, so nothing below it moves. */
.aa-findkit .wp-block-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
.aa-findkit .wp-block-button, .aa-findkit .wp-block-button__link { width: 100%; }
.aa-findkit .wp-block-button__link { min-height: 44px; padding: .55em 1em; border: 2px solid rgba(255, 255, 255, .8); background: transparent !important; color: #fff !important; font-size: var(--aa-t-ui); }
.aa-findkit .wp-block-button__link:hover { background: #fff !important; color: var(--aa-ink) !important; }
.aa-findkit ul { margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid rgba(232, 227, 211, .22); list-style: none; display: grid; gap: .375rem; font-size: var(--aa-t-body); color: var(--aa-on-dark-muted); }
.aa-findkit li::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: .6rem; vertical-align: -.05em; background: var(--aa-accent); -webkit-mask: var(--aa-insignia-star) center / contain no-repeat; mask: var(--aa-insignia-star) center / contain no-repeat; }
@media (max-width: 781px) { .aa-hero--field::before { background: linear-gradient(180deg, rgba(18, 27, 20, .8) 0, rgba(18, 27, 20, .92) 45%, var(--aa-field-green) 100%); } }

/* Ticker of the brand lines from the sweater set, static (no motion), separated by the Athletic Army star. */
.aa-ticker { padding-block: .9rem !important; text-align: center; }
p.aa-ticker__line { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; margin: 0; color: var(--aa-khaki); font: 300 var(--aa-t-lead)/1.2 var(--aa-head); letter-spacing: var(--aa-ls-head); text-transform: uppercase; }
p.aa-ticker__line span { display: inline-flex; align-items: center; gap: 1.5rem; }
@media (max-width: 599px) { p.aa-ticker__line { flex-direction: column; align-items: center; gap: .35rem; } p.aa-ticker__line span:first-child::before { content: ""; width: 16px; height: 16px; background: var(--aa-accent); -webkit-mask: var(--aa-insignia-star) center / contain no-repeat; mask: var(--aa-insignia-star) center / contain no-repeat; } p.aa-ticker__line span { gap: .6rem; } }
p.aa-ticker__line span + span::before { content: ""; width: 16px; height: 16px; background: var(--aa-accent); -webkit-mask: var(--aa-insignia-star) center / contain no-repeat; mask: var(--aa-insignia-star) center / contain no-repeat; }

/* "Welcome to the unit": Barry's script line over a ghost emblem becomes stencil over the Basic Issue roundel. */
.aa-welcome { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-block: clamp(4rem, 3rem + 4vw, 7rem) !important; }
/* 1.22: the roundel whole (Alexio: it was cropped). Sized by the section's height, a little inside it, so it never
   runs past the top or the bottom, and never wider than the screen. */
.aa-welcome { min-height: clamp(26rem, 22rem + 10vw, 34rem); display: flex; flex-direction: column; justify-content: center; }
.aa-welcome::before { content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; height: calc(100% - 2.5rem); max-height: 36rem; width: auto; max-width: calc(100% - 2rem); aspect-ratio: 549 / 582; transform: translate(-50%, -50%); background: var(--aa-olive); opacity: .13; -webkit-mask: url("../brand/basic-issue.svg") center / contain no-repeat; mask: url("../brand/basic-issue.svg") center / contain no-repeat; }
h2.aa-stencil { margin: 0 auto .75rem; color: var(--aa-accent-dark); font: 300 var(--aa-t-h1)/.95 var(--aa-head); letter-spacing: var(--aa-ls-head); text-transform: uppercase; }
.aa-welcome p { max-width: 54ch; margin-inline: auto; font-size: var(--aa-t-lead); }

/* Dark band with a chevron cut into its top edge and the Field Training topographic map as texture. */
.aa-band { position: relative; isolation: isolate; }
.aa-vcut { padding-top: calc(clamp(28px, 5vw, 72px) + clamp(3rem, 2.5rem + 2vw, 4.5rem)) !important; }
.aa-vcut::before { content: ""; position: absolute; z-index: 1; top: -1px; left: 0; right: 0; height: clamp(28px, 5vw, 72px); background: var(--aa-bg); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.aa-topo { background-image: linear-gradient(rgba(18, 27, 20, .4), rgba(18, 27, 20, .4)), url("../brand/topo-lines.svg"); background-size: auto, cover; background-position: center; background-repeat: no-repeat; }
.aa-band .aa-video { max-width: 980px; margin: 2rem auto 0; border: 2px solid rgba(232, 227, 211, .3); }
.aa-video__icon { position: absolute; top: 50%; left: 50%; width: 84px; height: 84px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--aa-accent-dark); box-shadow: 0 0 0 6px rgba(18, 27, 20, .45); transition: transform .2s var(--aa-ease); }
.aa-video__icon::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent #fff; }
.aa-video__play:hover .aa-video__icon, .aa-video__play:focus-visible .aa-video__icon { transform: translate(-50%, -50%) scale(1.08); }
.aa-video__play:focus-visible { outline: 3px solid var(--aa-accent); outline-offset: 3px; }
.aa-video__length { position: absolute; right: .75rem; bottom: .75rem; padding: .2rem .55rem; background: rgba(18, 27, 20, .85); color: #fff; font: 400 var(--aa-t-label)/1.3 var(--aa-body); }

/* Two ways to buy (Barry's "Run x Lift"): cards with a tag in the heading. */
.aa-duo .wp-block-columns { gap: clamp(1rem, 2vw, 1.5rem); }
.aa-duo-card { height: 100%; background: var(--aa-surface); }
.aa-duo-card .wp-block-image { margin: 0; }
.aa-duo-card .wp-block-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.aa-duo-card > :not(.wp-block-image) { padding-inline: clamp(1.25rem, 2.5vw, 1.75rem); }
.aa-duo-card h3 { margin-top: 1.25rem; font-size: var(--aa-t-h3); }
.aa-duo-card > :last-child { padding-bottom: 1.5rem; }
mark.aa-tag { display: inline-block; margin-left: .5rem; padding: .2em .5em; vertical-align: .3em; background: var(--aa-accent-dark); color: #fff; font: 400 var(--aa-t-label)/1.2 var(--aa-body); letter-spacing: var(--aa-ls-label); text-transform: uppercase; }
mark.aa-tag--stock { background: var(--aa-field-green); }
p.aa-sub { margin-bottom: .5rem; font: 400 var(--aa-t-body)/1.3 var(--aa-body); color: var(--aa-deep-olive); }
p.aa-protip { margin: 1.5rem auto 0; max-width: 72ch; padding-bottom: .625rem; border-bottom: 2px solid var(--aa-accent); text-align: center; font-size: var(--aa-t-body); }
p.aa-protip strong { color: var(--aa-deep-olive); font-family: var(--aa-body); text-transform: uppercase; letter-spacing: var(--aa-ls-label); }

/* How it works: numbered stops on a red line (Barry's timeline), because the order is the point. */
.aa-steps { counter-reset: aa-step; text-align: center; }
.aa-steps .wp-block-columns { position: relative; gap: clamp(1.5rem, 3vw, 3rem); margin-top: 2rem; }
.aa-steps .wp-block-column { position: relative; }
.aa-steps .wp-block-column::before { counter-increment: aa-step; content: counter(aa-step); position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 1rem; border: 2px solid var(--aa-accent); border-radius: 50%; background: var(--aa-bg); color: var(--aa-ink); font: 400 var(--aa-t-body)/1 var(--aa-body); }
@media (min-width: 782px) { .aa-steps .wp-block-columns::before { content: ""; position: absolute; top: 19px; left: 16.66%; right: 16.66%; height: 2px; background: var(--aa-accent); } }
.aa-steps h3 { font-size: var(--aa-t-h3); }
.aa-steps .wp-block-column p { max-width: 34ch; margin-inline: auto; }
.aa-steps .wp-block-buttons { justify-content: center; margin-top: 2rem; }

/* Core Unit card (Barry's instructors card): photo and dark panel, square corners, ghost star. */
.aa-splitcard { position: relative; isolation: isolate; overflow: hidden; }
.aa-splitcard .wp-block-media-text__content { position: relative; padding: clamp(2rem, 5vw, 4rem) !important; }
.aa-splitcard .wp-block-media-text__content::before { content: ""; position: absolute; z-index: -1; right: -3rem; bottom: -3rem; width: 16rem; aspect-ratio: 1; background: var(--aa-olive); opacity: .35; -webkit-mask: var(--aa-insignia-star) center / contain no-repeat; mask: var(--aa-insignia-star) center / contain no-repeat; }
.aa-splitcard .wp-block-media-text__media { align-self: stretch; margin: 0; height: 100%; }
.aa-splitcard .wp-block-media-text__media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }

/* Marks of the unit: the brand's own marks in bone on olive. */
.aa-marks .wp-block-columns { gap: clamp(1rem, 3vw, 2.5rem); margin-top: 2rem; }
.aa-marks .wp-block-image { margin: 0 auto 1rem; }
.aa-marks .wp-block-image img { height: clamp(96px, 12vw, 150px); width: auto; margin-inline: auto; }
.aa-marks .wp-block-column { text-align: center; }
.aa-marks h3 { font-size: var(--aa-t-lead); color: #fff; }
.aa-marks p { color: var(--aa-on-dark-muted); font-size: var(--aa-t-body); }
.aa-marks a { color: inherit; }


/* Full-screen hero (1.5): the video fills the whole hero, edge to edge, under the transparent header, as on the Goya
   site; the hero type stays. A wash on the left and at the top keeps the words and the header readable. */
.aa-hero--field { min-height: calc(100svh - var(--aa-topbar-h, 0px)) !important; padding-top: calc(var(--aa-header-h) + 1.5rem); }
.aa-has-topbar { --aa-topbar-h: 36px; }
@media (min-width: 1024px) { .aa-has-topbar { --aa-topbar-h: 40px; } }
.aa-hero--field::before { background: linear-gradient(180deg, rgba(11, 18, 13, .7) 0, rgba(11, 18, 13, 0) calc(var(--aa-header-h) + 80px)), linear-gradient(90deg, rgba(18, 27, 20, .88) 0, rgba(18, 27, 20, .6) 38%, rgba(18, 27, 20, .15) 70%, rgba(18, 27, 20, .3) 100%); }
@media (max-width: 781px) { .aa-hero--field::before { background: linear-gradient(180deg, rgba(11, 18, 13, .75) 0, rgba(18, 27, 20, .35) 30%, rgba(18, 27, 20, .7) 62%, rgba(18, 27, 20, .95) 100%); } }

/* Full-screen film (1.8; Alexio: "a big full screen video window, as it was before"): the brand's own footage edge to
   edge under the transparent header, nothing over it but the Scroll cue. The words wait below the fold. The footage is
   black and white already, so no filter (a filter on a playing video is repainted every frame). */
.aa-hero--full { min-height: calc(100svh - var(--aa-topbar-h, 0px)) !important; padding: 0 !important; align-items: flex-end !important; justify-content: center !important; }
.aa-hero--full::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11, 18, 13, .65) 0, rgba(11, 18, 13, 0) calc(var(--aa-header-h, 72px) + 90px), rgba(11, 18, 13, 0) 72%, rgba(11, 18, 13, .6) 100%); pointer-events: none; }
.aa-hero--full .aa-hero__video { filter: none; }
.wp-block-cover.aa-hero--full .wp-block-cover__background.has-black-background-color { background-color: var(--aa-night); mix-blend-mode: normal; opacity: .15; }
.aa-hero--full .wp-block-cover__inner-container { z-index: 2; width: auto !important; padding-bottom: clamp(1.25rem, 3.5vh, 2.25rem); }
.wp-block-cover.aa-hero--full p.aa-hero__cue { margin: 0; }
.aa-hero__cue a { display: grid; justify-items: center; gap: .625rem; padding: .5rem; color: #fff; font: 400 var(--aa-t-label)/1 var(--aa-body); letter-spacing: var(--aa-ls-label); text-transform: uppercase; text-decoration: none; }
.aa-hero__cue a::after { content: ""; width: 2px; height: 48px; background: linear-gradient(var(--aa-accent), var(--aa-accent)) 0 0 / 100% 18px no-repeat, rgba(255, 255, 255, .3); animation: aa-cue 2.4s var(--aa-ease) infinite; }
@keyframes aa-cue { from { background-position: 0 -18px, 0 0; } to { background-position: 0 48px, 0 0; } }
@media (prefers-reduced-motion: reduce) { .aa-hero__cue a::after { animation: none; background-position: 0 15px, 0 0; } }

/* Below the fold: the campaign line, the H1 and the buttons beside Find your kit, on field green. */
.aa-intro { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) !important; }
body .aa-intro .aa-intro__grid { width: 100%; max-width: var(--wp--style--global--wide-size, 1280px) !important; gap: clamp(2rem, 5vw, 5rem); margin: 0 auto; }
.aa-intro__grid > .wp-block-column:last-child { flex: 0 0 min(100%, 420px) !important; }
.aa-intro p.aa-campaign { max-width: none; margin: 0 0 .75rem; color: #fff; font: 300 var(--aa-t-display)/.88 var(--aa-head); letter-spacing: var(--aa-ls-head); text-transform: uppercase; }
.aa-intro h1 { max-width: 30ch; margin: 0 0 .75rem; color: var(--aa-khaki); font-size: var(--aa-t-h3); line-height: 1.15; }
.aa-intro p:not(.aa-campaign) { max-width: 46ch; color: var(--aa-on-dark); }
/* The round Basic Issue logo (1.10) as a small solid badge in bone above the campaign line, like a patch. Whole, one
   colour, from the brand file (a mask, so it takes the token colour). */
.aa-intro__grid > .wp-block-column:first-child::before { content: ""; display: block; width: clamp(64px, 3rem + 2vw, 80px); aspect-ratio: 549 / 582; margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); background: var(--aa-bone); -webkit-mask: url("../brand/basic-issue.svg") center / contain no-repeat; mask: url("../brand/basic-issue.svg") center / contain no-repeat; }
@media (forced-colors: active) { .aa-intro__grid > .wp-block-column:first-child::before { forced-color-adjust: none; background: CanvasText; } }

/* Sections rise into place as they come into view (theme.js marks them; nothing is hidden without the script). Columns
   follow one after another. */
.aa-reveal, .aa-reveal .wp-block-column { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--aa-ease), transform .8s var(--aa-ease); }
.aa-reveal.is-in, .aa-reveal.is-in .wp-block-column { opacity: 1; transform: none; }
.aa-reveal.is-in .wp-block-column:nth-child(2) { transition-delay: .12s; }
.aa-reveal.is-in .wp-block-column:nth-child(3) { transition-delay: .24s; }
.aa-reveal.is-in .wp-block-column:nth-child(4) { transition-delay: .36s; }
.aa-hero--full .aa-hero__toggle { right: auto; left: var(--aa-gutter); bottom: calc(1.25rem + var(--aa-desk-lift, 0px)); }
.aa-hero__poster { display: contents; }
/* The flat-lay still (1.11, inc/home.php) is the hero: the kit in its own colours (theme.css greys cover images). The
   training film under it never shows by itself: the WebGL effects draw it inside the scope (assets/js/fx/aa-fx.js). */
.wp-block-cover.aa-hero--full .wp-block-cover__image-background.aa-hero__still { filter: none; }
.aa-hero__video[data-aa-underlay] { opacity: 0 !important; }

/* 1.14: the intro under the hero is centred and stacked (Alexio): the roundel, the campaign line (now the H1 size
   range, smaller), the line under it, the text and the buttons on one centre line, the Find your kit card centred
   under them. */
body .aa-intro .aa-intro__grid { flex-direction: column; align-items: center; gap: clamp(2rem, 4vw, 3rem); text-align: center; }
.aa-intro__grid > .wp-block-column { flex: 0 1 auto !important; width: 100%; max-width: 46rem; }
.aa-intro__grid > .wp-block-column:last-child { max-width: 420px; }
.aa-intro__grid > .wp-block-column:first-child::before { margin-inline: auto; }
.aa-intro :is(h1, p) { margin-inline: auto !important; }
.aa-intro .wp-block-buttons { justify-content: center; }
.aa-intro .aa-findkit { text-align: left; }
.aa-intro .aa-findkit > h2 { text-align: center; }

/* 1.20: the photo layer's own pictures where the page shows them (overlay mode, aa-fx.js): the photo video over the
   still (.is-top), or a slide over it, changed with a short stepped wipe (.is-cut, 200 ms, only through the burst
   budget). Both sit under the film, so its CSS clip still shows to the right of the reveal's edge. */
.aa-hero__top, .aa-hero__slide { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.aa-hero__top { opacity: 0; }
html.aa-fx .aa-hero--video.is-top .aa-hero__top { opacity: 1; }
.aa-hero__slide.is-cut { animation: aa-hero-cut .2s steps(4, end) both; }
@keyframes aa-hero-cut { from { clip-path: inset(0 0 100% 0); transform: translateX(-12px); } to { clip-path: inset(0); transform: none; } }

/* 1.20: three of Alexio's lines over the middle of the hero (inc/home.php). 1.21: in Mono45 Light, standing still
   (Alexio). aa-fx.js changes quote every few seconds and fades them as the hero scrolls away (--aa-qo; --aa-qp fills
   the mark of the quote shown). Where the shader runs it draws the letters itself, with a heat haze through them and
   a blur between quotes, and the page's own letters turn transparent (.is-gl) but stay for screen readers. Over
   everything in the hero but the HUD's scanlines, the Scroll cue and the Pause button; they never take the pointer,
   so the reveal follows it underneath. The last word red, a Mono45 label with the brand star above, one mark per
   quote below. Without the effects (reduced motion, data saver, no WebGL) the first quote simply stays. */
.aa-hero__quotes { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; padding: calc(var(--aa-header-h) + 3rem) var(--aa-gutter) 8rem; text-align: center; pointer-events: none; opacity: var(--aa-qo, 1); }
/* A soft dark pool behind them, so white words hold over a white tee and the red word over a red one, with or without
   the canvas (the shader adds a little more). It drifts and fades with them (they form their own stacking context). */
.aa-hero__quotes::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 55% 38% at 50% 49%, rgba(11, 18, 13, .6), rgba(11, 18, 13, 0) 72%); }
/* Where the shader draws the letters it pools the dark under them itself; this one would lie over its letters. */
.aa-hero__quotes.is-gl::before { content: none; }
.wp-block-cover.aa-hero .aa-hero__quotes p.aa-hero__qkick { display: inline-flex; align-items: center; gap: .6em; max-width: none; margin: 0 0 1.1rem; color: var(--aa-bone); font: 400 var(--aa-t-ui)/1.3 var(--aa-menu); letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 0 2px rgba(11, 18, 13, .95), 0 1px 3px rgba(11, 18, 13, .9), 0 0 12px rgba(11, 18, 13, .8); }
.aa-hero__qstar { flex: none; width: 1.15em; height: 1.15em; background: var(--aa-accent); -webkit-mask: url("../brand/star.svg") center / contain no-repeat; mask: url("../brand/star.svg") center / contain no-repeat; }
.wp-block-cover.aa-hero .aa-hero__quotes p.aa-hero__quote { max-width: 15ch; margin: 0; color: #fff; font: 300 clamp(2.75rem, 1.2rem + 5.4vw, 7rem)/.95 var(--aa-menu); letter-spacing: 0; text-transform: uppercase; text-wrap: balance; text-shadow: 0 4px 40px rgba(11, 18, 13, .65), 0 0 2px rgba(11, 18, 13, .6); }
/* The shader draws the letters (aa-fx.js): the page's own go transparent, words and spacing kept. */
.wp-block-cover.aa-hero .aa-hero__quotes.is-gl p.aa-hero__quote :is(span, em) { color: transparent; text-shadow: none; -webkit-text-stroke: 0; }
.aa-hero__quote em { color: var(--aa-accent); font-style: normal; }
/* The red word keeps a tight dark edge, so it holds over the red tee in the slideshow (the shader also pools a little
   dark under the quotes). Not while swapping: the red split shows then. */
.wp-block-cover.aa-hero .aa-hero__quotes:not(.is-swap) .aa-hero__quote em { text-shadow: 0 0 1px rgba(11, 18, 13, .95), 0 1px 4px rgba(11, 18, 13, .8), 0 4px 40px rgba(11, 18, 13, .65); -webkit-text-stroke: 1.5px rgba(11, 18, 13, .8); paint-order: stroke fill; }
.wp-block-cover.aa-hero .aa-hero__quotes.is-swap p.aa-hero__quote { text-shadow: 4px 0 0 rgba(215, 25, 32, .8), 0 4px 40px rgba(11, 18, 13, .65); }
.aa-hero__qbar { display: flex; gap: .5rem; justify-content: center; margin-top: 1.6rem; }
.aa-hero__qbar i { position: relative; width: 1.75rem; height: 2px; overflow: hidden; background: rgba(229, 225, 214, .35); }
.aa-hero__qbar i.is-on::after { content: ""; position: absolute; inset: 0; background: var(--aa-accent); transform: scaleX(var(--aa-qp, 1)); transform-origin: left; }
@media (max-width: 599px) { .aa-hero__quotes { padding-bottom: 9rem; } }
/* Short landscape screens (a phone on its side): the line alone, sized to the height, clear of the header, the
   readouts and the Scroll cue. */
@media (max-height: 520px) {
	.wp-block-cover.aa-hero .aa-hero__quotes :is(p.aa-hero__qkick, .aa-hero__qbar) { display: none; }
	.aa-hero__quotes { padding-bottom: 7rem; }
	.wp-block-cover.aa-hero .aa-hero__quotes p.aa-hero__quote { font-size: clamp(2rem, min(1.2rem + 5vw, 12svh), 7rem); }
}
@media print { .aa-hero__quotes { display: none; } }

/* 1.22: the red band under the hero (inc/home.php), after the one on bemilitaryfit.com: brand red, white Mono45
   capitals spaced wide, small dots between, one strip running right to left. Hovering, focus or the Pause button stop
   it; with reduced motion it stands still. 1.23 (Alexio, to make it our own): a strip of torn paper. Its top and bottom
   edges are torn (two ragged edges drawn once, tiling every 600px, as masks), it lies over the hero and the section
   below by the depth of the tear, and a thin rim of bone shows behind the red along each tear, a little offset, like
   the paper's white core. --aa-tear-top and --aa-tear-bottom hold the edges. */
.aa-redband {
	--aa-tear-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8.9 L2.1 8.9 L5.5 9.6 L7.4 9.6 L9.4 9.9 L11.5 8.3 L13.4 8.5 L15.8 8.2 L18.7 7.3 L21.3 7.5 L23.7 6.7 L27.1 6.6 L28.8 7.1 L30.6 6.3 L33.9 7.3 L36.8 6.5 L40.0 4.8 L43.3 6.6 L45.4 5.5 L48.4 6.6 L50.4 5.4 L52.5 8.1 L55.7 7.9 L58.4 7.4 L61.6 7.3 L63.8 6.9 L66.0 6.2 L68.0 9.2 L70.6 7.5 L73.5 8.7 L75.2 8.2 L77.3 7.7 L80.6 6.6 L83.8 8.0 L85.5 7.0 L88.3 8.0 L91.6 6.9 L94.1 6.2 L97.3 7.5 L100.6 5.8 L103.2 6.8 L105.2 5.9 L106.8 6.4 L109.5 6.3 L112.7 6.8 L114.5 5.6 L116.3 8.0 L118.8 7.4 L120.6 8.9 L122.3 10.6 L125.5 9.4 L127.5 9.4 L129.8 6.7 L132.1 6.3 L133.9 5.9 L137.1 6.4 L139.8 6.6 L142.4 6.2 L145.0 6.5 L147.9 7.6 L150.9 6.8 L153.0 8.2 L154.6 8.3 L157.9 8.0 L159.9 8.4 L163.2 8.1 L165.6 8.5 L167.6 9.2 L169.9 10.2 L171.5 8.6 L174.8 9.5 L177.4 8.7 L179.3 10.3 L182.0 9.8 L185.1 9.7 L187.5 9.9 L189.6 9.6 L191.5 10.4 L193.8 8.6 L196.1 10.0 L199.2 9.7 L201.8 8.2 L205.1 9.4 L207.7 9.0 L209.6 9.3 L212.7 7.6 L215.3 9.5 L218.6 9.5 L221.2 9.7 L223.5 7.0 L226.4 8.0 L228.8 10.5 L231.1 10.8 L234.0 11.7 L237.4 14.0 L239.0 12.9 L242.2 12.1 L245.6 11.1 L247.6 10.9 L250.0 12.3 L253.3 11.7 L255.0 11.7 L258.1 10.2 L260.2 11.5 L262.3 10.3 L264.6 10.2 L266.8 10.2 L269.9 9.2 L272.7 9.9 L274.7 10.1 L277.9 9.3 L280.0 10.2 L281.9 10.0 L284.0 8.6 L287.0 6.5 L288.7 7.9 L290.6 8.0 L293.0 9.7 L294.6 5.4 L297.7 8.4 L300.4 6.8 L303.3 7.2 L306.1 7.1 L308.3 7.6 L310.0 6.4 L313.0 6.8 L315.8 7.2 L317.6 5.8 L320.9 8.6 L322.7 7.3 L324.9 7.1 L326.9 7.8 L328.8 8.1 L331.0 7.5 L333.5 8.9 L336.6 7.7 L339.7 8.5 L341.3 7.5 L344.2 7.0 L345.8 7.8 L348.9 8.5 L352.1 6.7 L354.5 7.2 L356.6 6.0 L358.6 5.7 L360.3 7.5 L362.3 6.4 L364.5 6.7 L366.6 7.0 L368.8 6.6 L370.9 6.5 L373.6 6.4 L376.6 6.1 L379.6 4.7 L381.2 4.5 L382.9 4.3 L384.6 6.7 L386.6 5.5 L388.7 4.2 L392.0 5.0 L395.1 5.4 L397.4 4.9 L400.3 5.3 L402.7 6.4 L405.9 8.0 L408.0 5.7 L409.6 5.8 L411.5 6.5 L414.1 6.8 L416.0 7.3 L419.2 7.3 L421.7 8.3 L423.6 7.1 L425.4 8.7 L427.2 7.1 L429.7 9.0 L431.9 9.9 L435.0 11.8 L437.7 12.1 L440.5 12.2 L443.4 9.2 L445.9 10.8 L448.3 8.7 L450.5 9.7 L453.3 6.7 L455.1 7.0 L457.3 8.0 L459.4 7.0 L462.5 6.5 L464.7 7.8 L468.0 5.4 L471.1 7.2 L474.1 7.6 L477.2 7.1 L479.5 7.2 L482.9 6.6 L485.8 7.5 L488.0 9.4 L491.1 7.1 L493.5 7.3 L495.6 10.5 L498.7 10.5 L501.8 10.8 L504.6 11.3 L507.4 11.3 L509.7 10.6 L512.1 10.7 L515.0 9.0 L517.6 11.5 L519.9 12.7 L523.3 11.3 L525.4 12.4 L527.1 11.6 L530.0 13.7 L532.3 12.9 L534.9 13.9 L538.1 13.5 L540.9 13.1 L543.5 13.1 L545.6 13.5 L548.9 13.1 L551.3 11.5 L553.1 12.6 L555.3 12.2 L556.9 11.1 L559.6 10.3 L563.0 10.2 L566.1 10.2 L569.2 8.8 L572.5 8.1 L575.6 8.0 L578.3 8.4 L581.3 8.4 L583.4 9.4 L586.5 9.1 L588.2 9.1 L591.5 9.1 L594.3 8.8 L597.1 9.0 L600.0 8.9 L600 16 L0 16 Z'/%3E%3C/svg%3E");
	--aa-tear-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 16' preserveAspectRatio='none'%3E%3Cpath d='M0 3.9 L1.7 6.5 L4.0 7.3 L6.6 8.4 L9.4 7.3 L11.9 7.7 L14.4 7.1 L16.1 8.6 L17.9 8.7 L20.4 8.6 L23.6 8.7 L26.2 10.4 L28.9 8.6 L31.4 9.7 L34.3 9.9 L36.9 9.7 L38.5 8.5 L41.5 8.3 L43.5 8.4 L46.7 8.0 L49.7 8.6 L51.9 8.2 L53.6 8.6 L55.2 8.1 L57.6 8.9 L60.0 7.3 L63.1 6.9 L66.4 5.3 L68.8 8.1 L70.8 7.9 L73.7 7.9 L76.4 6.2 L79.6 7.4 L82.2 6.4 L84.2 8.3 L86.6 8.7 L89.8 7.3 L92.2 9.4 L94.0 9.2 L97.0 9.3 L100.3 8.0 L102.4 9.2 L104.2 6.9 L107.1 8.9 L110.3 6.7 L112.2 6.4 L115.5 7.1 L118.5 8.5 L120.1 9.0 L122.7 9.4 L124.9 7.1 L127.5 9.2 L130.4 8.5 L133.0 9.7 L136.3 8.4 L139.4 9.1 L142.7 8.9 L144.8 6.8 L146.7 9.3 L149.2 9.1 L152.4 9.4 L155.8 7.8 L158.2 8.2 L160.8 8.4 L162.9 6.0 L164.6 9.0 L166.4 8.4 L168.5 8.1 L170.6 7.7 L173.3 7.7 L175.8 8.5 L177.5 9.1 L180.7 8.8 L184.0 8.8 L187.2 9.8 L189.3 9.1 L191.2 9.3 L194.1 9.7 L196.2 8.0 L198.4 7.7 L201.1 9.2 L204.4 7.6 L207.4 7.7 L209.6 7.8 L211.9 7.8 L215.3 6.3 L218.6 6.2 L221.3 4.6 L224.1 6.3 L226.0 5.5 L228.3 5.9 L231.2 6.4 L233.1 6.2 L236.4 5.1 L238.5 5.6 L241.6 4.7 L243.8 4.4 L246.5 5.6 L249.6 3.7 L251.3 4.8 L254.2 4.7 L256.6 4.4 L258.7 6.3 L261.7 5.1 L264.8 5.8 L266.6 6.0 L268.6 5.2 L270.4 4.2 L273.2 7.9 L276.4 5.9 L279.3 5.4 L281.0 6.6 L284.2 7.2 L287.6 7.4 L289.2 7.9 L291.6 6.3 L293.6 8.1 L296.1 6.0 L299.0 6.4 L301.7 7.4 L304.1 5.8 L306.4 5.9 L309.0 6.0 L310.6 4.4 L312.6 6.4 L315.8 3.6 L318.5 3.8 L321.9 3.8 L324.2 4.6 L326.8 2.9 L329.2 3.5 L332.1 5.5 L334.5 4.4 L337.6 3.2 L339.7 5.2 L342.3 6.0 L344.1 6.5 L347.1 8.6 L349.2 10.4 L351.1 8.2 L352.8 8.9 L355.3 8.6 L357.1 8.9 L360.4 9.1 L362.9 10.7 L365.9 10.8 L367.6 11.2 L370.4 10.9 L373.3 10.4 L376.5 11.0 L378.3 9.0 L379.9 10.5 L381.8 11.7 L384.2 10.3 L386.3 10.2 L389.1 9.2 L391.0 11.2 L392.8 9.4 L394.8 10.2 L397.0 10.7 L399.0 8.8 L401.2 9.9 L404.3 9.4 L407.4 9.0 L410.0 8.2 L412.8 10.3 L414.5 9.3 L416.6 10.1 L419.2 10.0 L422.0 8.3 L423.9 9.6 L427.0 10.5 L428.7 8.7 L432.0 8.8 L434.7 10.7 L437.6 10.0 L440.9 11.3 L443.4 11.4 L446.1 11.4 L448.2 10.9 L450.4 10.3 L453.2 9.0 L456.5 8.6 L458.2 8.9 L460.3 9.3 L462.8 9.3 L464.5 7.9 L466.1 9.4 L469.0 10.5 L471.4 10.1 L473.8 7.9 L476.1 7.7 L477.8 7.7 L480.0 7.9 L482.4 8.7 L485.7 6.8 L488.8 7.8 L491.2 7.5 L493.1 6.9 L495.6 6.6 L498.3 6.2 L500.2 7.2 L503.1 5.5 L504.8 5.9 L507.8 6.9 L509.5 5.8 L512.8 4.8 L514.9 5.8 L518.0 6.7 L520.5 6.5 L522.2 6.7 L523.9 7.6 L525.8 5.9 L528.4 7.5 L530.5 7.6 L533.8 7.7 L535.8 6.1 L537.5 7.0 L539.6 6.5 L542.5 6.1 L544.7 8.4 L547.9 4.9 L549.8 6.3 L551.4 6.5 L554.3 6.3 L557.2 7.2 L559.1 7.1 L562.5 6.8 L565.1 3.5 L567.2 4.5 L569.0 5.4 L570.6 5.9 L572.7 4.5 L576.1 5.3 L578.2 5.4 L581.5 4.9 L584.3 5.3 L587.0 4.8 L588.9 4.8 L591.1 5.4 L594.0 4.6 L597.0 5.5 L599.9 4.6 L600.0 3.9 L600 0 L0 0 Z'/%3E%3C/svg%3E");
	--aa-tear: 16px;
	position: relative; z-index: 4;
}
.entry-content > .aa-redband, .aa-redband { max-width: none; margin-block: -10px !important; background: none; color: #fff; }
.aa-redband::before { content: ""; position: absolute; inset: 0; background: var(--aa-bone-light); pointer-events: none;
	-webkit-mask: var(--aa-tear-top) 3px -2px / 600px var(--aa-tear) repeat-x, linear-gradient(#000 0 0) 0 calc(var(--aa-tear) - 3px) / 100% calc(100% - 2 * var(--aa-tear) + 6px) no-repeat, var(--aa-tear-bottom) 3px calc(100% + 2px) / 600px var(--aa-tear) repeat-x;
	mask: var(--aa-tear-top) 3px -2px / 600px var(--aa-tear) repeat-x, linear-gradient(#000 0 0) 0 calc(var(--aa-tear) - 3px) / 100% calc(100% - 2 * var(--aa-tear) + 6px) no-repeat, var(--aa-tear-bottom) 3px calc(100% + 2px) / 600px var(--aa-tear) repeat-x; }
.aa-redband__paper { position: relative; display: flex; align-items: center; padding-block: calc(var(--aa-tear) - 6px); background: var(--aa-accent);
	-webkit-mask: var(--aa-tear-top) 0 0 / 600px var(--aa-tear) repeat-x, linear-gradient(#000 0 0) 0 calc(var(--aa-tear) - 1px) / 100% calc(100% - 2 * var(--aa-tear) + 2px) no-repeat, var(--aa-tear-bottom) 0 100% / 600px var(--aa-tear) repeat-x;
	mask: var(--aa-tear-top) 0 0 / 600px var(--aa-tear) repeat-x, linear-gradient(#000 0 0) 0 calc(var(--aa-tear) - 1px) / 100% calc(100% - 2 * var(--aa-tear) + 2px) no-repeat, var(--aa-tear-bottom) 0 100% / 600px var(--aa-tear) repeat-x; }
.aa-redband__viewport { flex: 1; min-width: 0; overflow: hidden; padding-block: 1rem; }
.aa-redband__track { display: flex; width: max-content; animation: aa-redband 40s linear infinite; }
.aa-redband p.aa-redband__set { display: flex; flex: none; align-items: center; max-width: none; margin: 0; padding: 0; color: #fff; font: 300 var(--aa-t-ui)/1.3 var(--aa-menu); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.aa-redband__dot { flex: none; width: 4px; height: 4px; margin-inline: 1.4em; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.aa-redband:hover .aa-redband__track, .aa-redband:focus-within .aa-redband__track, .aa-redband.is-stopped .aa-redband__track { animation-play-state: paused; }
@keyframes aa-redband { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* The Pause button on the strip's right, over a fade of the red, the top bar's own button in white. */
.aa-redband .aa-redband__pause { position: absolute; right: 0; top: calc(var(--aa-tear) - 6px); bottom: calc(var(--aa-tear) - 6px); width: calc(var(--aa-gutter) * 2 + 32px); height: auto; border-radius: 0; background: linear-gradient(90deg, rgba(215, 25, 32, 0), var(--aa-accent) 35%); color: #fff; }
.aa-redband .aa-redband__pause::before, .aa-redband .aa-redband__pause::after { top: 50%; margin-top: -5px; }
.aa-redband .aa-redband__pause::before { left: auto; right: calc(var(--aa-gutter) + 17px); }
.aa-redband .aa-redband__pause::after { right: calc(var(--aa-gutter) + 12px); }
.aa-redband .aa-redband__pause[aria-pressed="true"]::before { right: calc(var(--aa-gutter) + 11px); }
.aa-redband .aa-redband__pause:hover { background: linear-gradient(90deg, rgba(184, 22, 31, 0), var(--aa-accent-dark) 35%); color: #fff; }
.aa-redband .aa-redband__pause:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .aa-redband__track { animation: none; } }