/* ===== Easy view, first called Easy read (Chris 2026-11-09): a calmer view for older visitors: a light reading page with solid
   backgrounds, larger near-black text (no gray), links that are plainly links, bigger buttons, and nothing that moves.
   Switched with the buttons in the utility bar and the menu (assets/easy.js; the footer button came out 2026-11-09 as a duplicate), remembered on the device,
   and on by default for prefers-contrast: more. Loaded after each page's own styles so these rules win. ===== */

/* ---------- the toggle (both views) ---------- */
.easy-btn{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:.45em;
  text-transform:inherit;letter-spacing:inherit;-webkit-tap-highlight-color:transparent}
.easy-btn svg{width:15px;height:15px;flex:none}
html:not(.easy) .ez-on,html.easy .ez-off{display:none}
.util .easy-btn{opacity:.9;min-height:34px;white-space:nowrap}
.util .easy-btn:hover{color:var(--accent);opacity:1}
.util .easy-btn svg{width:13px;height:13px}
/* tablets 561 to 760px get the phone bar (the address on two lines, no "Now enrolling", which already hides on phones):
   with it the address wrapped to three or four lines and ran out of the bar (found 2026-11-09) */
@media (min-width:561px) and (max-width:760px){.util .free{display:none}}
/* up to 1100px the bar grows to fit the two-line address instead of letting it spill below a fixed 38px (easy.js keeps the sticky header under it) */
@media (min-width:561px) and (max-width:1100px){.util .wrap{height:auto;min-height:38px;padding-top:4px;padding-bottom:4px}}
/* phones (Chris 2026-11-09: "put that left of Español ... shrink those two to the same size"): Easy view and the language
   link sit side by side as a matched pair, each a small icon over a label, the full height of the bar. While Easy view is on,
   the pressed toggle turns solid and its label says how to get back ("Standard view", Chris 2026-11-09). Labels shorten only where the full ones would not fit next to
   the address and social icons (measured 320 to 430px):
     English page: up to 370px "Easy" + "ES", up to 409px "Easy view" + "ES", then "Easy view" + "Español".
     Spanish page: up to 370px "Fácil" + "EN", up to 409px "Fácil" + "English", up to 429px "Vista fácil" + "EN", then both full. */
.ez-p,.lang-s{display:none}
@media (max-width:1100px){
  .util .wrap{padding-right:16px}
  .util .u-right{gap:6px;align-items:stretch}
  .util .easy-btn,.util .lang{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:36px;
    padding:2px 4px;font-size:11px;line-height:1.1;letter-spacing:.03em;white-space:nowrap;opacity:1;border-radius:6px;position:relative}
  .util .easy-btn svg,.util .lang svg{width:15px;height:15px;flex:none}
  .util .easy-btn .ez-t{display:none}
  .util .easy-btn .ez-pl{display:inline}
  html:not(.easy) .util .easy-btn .ez-on,html.easy .util .easy-btn .ez-off{display:none!important}
  html.easy .util .easy-btn[aria-pressed="true"]{background:#111!important}
  html.easy .util .easy-btn[aria-pressed="true"],html.easy .util .easy-btn[aria-pressed="true"] *{color:#fff!important}
  .util .lang .lang-l{display:inline}
}
/* a shortened language link keeps its full name for screen readers (the short code is hidden from them) */
@media (max-width:409px){html[lang="en"] .util .lang .lang-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}html[lang="es"] .util .easy-btn .ez-pl{display:none}
  html[lang="en"] .util .lang .lang-s,html[lang="es"] .util .easy-btn .ez-ps{display:inline}}
@media (min-width:410px) and (max-width:429px){html[lang="es"] .util .lang .lang-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}html[lang="es"] .util .lang .lang-s{display:inline}}
@media (max-width:370px){html[lang="en"] .util .easy-btn .ez-pl{display:none}html[lang="es"] .util .lang .lang-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  html[lang="en"] .util .easy-btn .ez-ps,html[lang="es"] .util .lang .lang-s{display:inline}}

/* while Easy view is on, the pressed toggle reads "Standard view" ("Vista estándar"). Where that does not fit it shortens to
   "Standard" ("Estándar"), and on the narrowest bars (where the off label is already "Easy" or "Fácil") the solid Aa icon
   stands alone, keeping the bar's right margin; the button's aria-label and title still say "Standard view" (measured 320 to 1300px;
   at 561 to 599px, and 761 to 939px in English, the long label would wrap the address onto another line) */
@media (min-width:371px) and (max-width:429px),(min-width:761px) and (max-width:939px){html[lang="en"].easy .util .easy-btn .ez-pl.ez-on{display:none!important}html[lang="en"].easy .util .easy-btn .ez-ps.ez-on{display:inline!important}}
@media (min-width:561px) and (max-width:599px){html.easy .util .easy-btn .ez-pl.ez-on{display:none!important}html.easy .util .easy-btn .ez-ps.ez-on{display:inline!important}}
@media (min-width:371px) and (max-width:389px){html[lang="es"].easy .util .easy-btn .ez-p{display:none!important}html[lang="es"].easy .util .easy-btn{min-width:34px}}
@media (max-width:370px){html.easy .util .easy-btn .ez-p{display:none!important}html.easy .util .easy-btn{min-width:32px}}

/* the status bar's class cards never run past the screen: a card too long for one line moves its time (or its ages) down a
   line, each piece kept whole (in Easy view's 16px type the longest lines, like "Adults No-Gi (All levels) · 7:00 – 7:50 PM",
   ran 19px past a 320px phone) */
#gymstatus .stc{max-width:100%;flex-wrap:wrap;row-gap:0;box-sizing:border-box}

/* the header between the compact phone logo (up to 360px) and the full one: at 361 to 399px the full logo, the spacer, and the
   menu button needed 373px, so the button ran off the screen up to 372px and sat 1.5px from the edge at 375px. Here the logo
   and wordmark are about 8 to 12% smaller and the spacer 8px, which keeps the button 24px from the edge (both views, every page) */
@media (min-width:361px) and (max-width:399px){
  header.site .header-cta{margin-right:8px}
  header.site .brand{gap:10px}
  header.site .brand .mark{height:70px}
  header.site .brand .wm,html.easy header.site .brand .wm{font-size:23.5px}
  header.site .brand .wm small,html.easy header.site .brand .wm small{font-size:12.2px}
}

/* blog post titles: a word wider than the column (like "Responsibility," on a 320px phone) breaks instead of running off the
   screen; the long ones carry a soft hyphen in the page itself (respon­sibility), so the break is a real hyphen */
.post-head h1{overflow-wrap:break-word}
/* soft hyphens (­) sit at dictionary syllable breaks in the long heading words (Chris 2026-11-09), for phones, where those
   words are wider than the column. A browser also uses them to fill out any line, so above 430px headings use none, and no
   stray hyphen shows on tablets or desktops; the gear card titles are single words in narrow cards at every width, so they
   keep theirs and hyphenate only when the word cannot fit */
@media (min-width:431px){:is(h1,h2,h3){hyphens:none!important;-webkit-hyphens:none!important}
  .gear-card h3{hyphens:manual!important;-webkit-hyphens:manual!important}}

/* the menu: one full-width row at the end of the drop-down (the desktop nav row has no room, and the utility bar holds it there) */
nav.main .easy-menu{display:none}
@media (max-width:1279px){
  header.site nav.main .easy-menu{display:flex;width:100%;justify-content:flex-start;gap:.6em;padding:14px 2px;margin-top:4px;border-top:1px solid var(--line);
    font-family:var(--f-label);text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;color:var(--ink)}
  header.site nav.main .easy-menu svg{width:20px;height:20px}
}

/* ---------- Easy view on ---------- */
/* A light reading page (Chris 2026-11-09: "truly an easy read for older people"): near-black #111 on warm white, every
   word at 7:1 or better, Heritage red kept only as a small dark accent (#A30500, 8:1 on white), no photos, gradients,
   textures, glows, or shadows behind words. */
html.easy:root,html.easy .hero,html.easy .cta{--ground:#FFFDF8;--surface:#FFFFFF;--surface-2:#F6F2EA;--raised:#FFFFFF;
  --ink:#111111;--muted:#222222;--faint:#333333;--line:rgba(17,17,17,.4);--line-strong:rgba(17,17,17,.7);--shadow:none;
  --accent:#A30500;--accent-deep:#7E0400;--accent-bold:#A30500;--accent-soft:transparent;--on-accent:#fff}
html.easy{font-size:19px;scroll-behavior:auto;color-scheme:light}
html.easy body{font-size:20px;line-height:1.7;background:#FFFDF8!important;color:#111}

/* nothing moves: no animations, transitions, scroll reveals, or hover lifts */
/* (the announcement ribbon and the reviews row are the exception: they keep scrolling, slower, see below) */
html.easy *:not(.rb-track,.rev-track),html.easy *::before,html.easy *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.easy :is(.rb-track,.rev-track){transition:none!important}
html.easy .reveal,html.easy .hero .reveal:not(.in){opacity:1!important;transform:none!important}
html.easy :is(.btn,.hero-card,.card,.nogi-cell,.coach,.rev-card,.faq details,.scls,.lg,.cpic,.chip,.stc,.usoc,.socials a,.gear-card,.comm-media img):is(:hover,:focus-visible)::after{opacity:0!important}
html.easy :is(.btn,.hero-card,.card,.nogi-cell,.coach,.rev-card,.faq details,.scls,.lg,.cpic,.stc,.usoc,.gear-card):hover,
html.easy :is(.cpic,.gear-card,.comm-media):hover img{transform:none!important;filter:none!important;box-shadow:none!important}
html.easy :focus-visible{outline:3px solid #111!important;outline-offset:3px}
html.easy *{text-shadow:none!important;box-shadow:none!important}

/* every band of the page is plain warm white: no photos, gradients, textures, or dark panels behind words */
html.easy :is(.util,header.site,.status,#gymstatus,.ribbon,main,section,.hero,.cta,.cta-alt,.reviews,.programs,.schedule,.coaches,.whynogi,.shop,.faq,.community,footer.site,.post-wrap,.blog-list,.cc-wrap,.mobile-cta,nav.main){
  background:#FFFDF8!important;background-image:none!important;color:#111!important;border-color:rgba(17,17,17,.25)!important}
html.easy :is(.util,header.site,.status,.ribbon,footer.site,.mobile-cta,.sdiv)::before,
html.easy :is(.util,header.site,.status,.ribbon,footer.site,.mobile-cta,.hero,.cta,section)::after{background:none!important;background-image:none!important}
html.easy .sdiv{background:rgba(17,17,17,.25)!important;background-image:none!important}
html.easy .flagbg,html.easy .grain,html.easy .gear-stage::before,html.easy .gear-stage::after{display:none!important}
html.easy .gear-stage{background:#F6F2EA!important;background-image:none!important}
html.easy .gear-stage img,html.easy .cc-shop-stage img{filter:none!important}
html.easy .sched{background:#fff!important;background-image:none!important;border:1.5px solid rgba(17,17,17,.45)!important}
html.easy :is(.lgclear,.rev3d-nav){background:#fff!important;color:#111!important;border:2px solid #111!important}
html.easy .util{border-bottom:1px solid rgba(17,17,17,.25)!important}
html.easy header.site{border-bottom:2px solid #111!important}
html.easy .mobile-cta{border-top:2px solid #111!important}
/* cards, panels, and boxes: white with a clear dark edge */
html.easy :is(.card,.hero-card,.coach,.rev-card,.gear-card,.nogi-cell,.faq details,.sday,.stc,.leadform,.cta-band,.cmodal,.post-more,.offer,.cc-buy,.cc-bundle,.lf-wrap,.free-card,.cb){
  background:#FFFFFF!important;background-image:none!important;color:#111!important;border-color:rgba(17,17,17,.45)!important}

/* schedule blocks and legend keys: white, with their class-type color stripe kept on the left; the class running now
   keeps its dark red edge */
html.easy :is(.scls,.lg){background:#fff!important;background-image:none!important;color:#111!important;
  border-top-color:rgba(17,17,17,.45)!important;border-right-color:rgba(17,17,17,.45)!important;border-bottom-color:rgba(17,17,17,.45)!important}
html.easy .scls.live{border-color:#A30500!important;border-width:2px!important;background:#FFF5F3!important}

/* words: near-black everywhere; no gray, faded, or light text */
html.easy body :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,label,summary,td,th,span,b,strong,em,small,i,time,div,a,button,s,cite){color:#111}
html.easy :is(.muted,.c,.role,.coach-more,.lghint,.ckey,.none,.gear-price,.gear-go,.stdt,.lvl,.rev-name,.dt,.date,.meta,small,em,.lede,.sta,.wm,.wm small,.brand,.rev-card blockquote){color:#111!important;opacity:1!important}
html.easy [style*="opacity"],html.easy .util :is(a,.lang,.free){opacity:1!important}

/* the schedule: class names, details, and hints in near-black; day names in dark red */
html.easy :is(.sched,.schedule) :is(.n,.c,.l,p,span,li,.lghint,.ckey,h3,h4):not(.btn *){color:#111!important}
html.easy :is(.sched,.schedule) h4{color:#A30500!important}
html.easy #schedule :is(.lghint,.ckey,.lgslot span,.ckey span,p,span):not(.btn *):not(.t){color:#111!important}
/* gear pages: the product tabs and buttons are white with dark words; the chosen tab is solid dark */
html.easy :is(.cc-seg-btn,.hjj-shop-enlarge){background:#fff!important;color:#111!important;border:2px solid #111!important}
html.easy :is(.cc-seg-btn,.hjj-shop-enlarge) *{color:inherit!important}
html.easy .cc-seg-btn.is-active{background:#111!important;color:#fff!important}

/* Heritage red as a small, dark accent only */
html.easy :is(.eyebrow,.accent,.lf-kicker,.hl,.wj,.wm small,.sched .scls .t,.scls .t){color:#A30500!important}
html.easy .rev-stars,html.easy .rev-marquee.is3d .rev-card .rev-stars{color:#5C4300!important}

/* links are plainly links: dark blue and underlined */
html.easy :is(main,footer.site,.status) a:not(.btn):not(.bfly-lockup):not(.gear-card):not(.tape-free):not(.blog-item):not(.cc-seg-btn),
html.easy .ribbon .rb-u,
html.easy .post a:not(.btn){color:#0B3D91!important;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
html.easy .util a:not(.usoc),html.easy header.site nav.main a{color:#111!important}

/* buttons: solid fills with white words at 7:1 or better */
html.easy .btn-primary,html.easy .lf-native .btn,html.easy .tape-free{background:#A30500!important;border-color:#A30500!important;color:#fff!important}
html.easy .btn-go{background:#0A4BCC!important;border-color:#0A4BCC!important;color:#fff!important}
html.easy .btn:not(.btn-primary):not(.btn-go){background:#fff!important;color:#111!important;border:2px solid #111!important}
html.easy :is(.btn-primary,.btn-go,.tape-free,.lf-native .btn) *{color:#fff!important}
html.easy .menu-toggle{background:#fff!important;color:#111!important;border:2px solid #111!important}
html.easy .tape a:not(.tape-free),html.easy .tape > *:not(.tape-free){background:#fff!important;color:#111!important;border-color:#111!important}
html.easy .chip{border-color:#111!important}
html.easy .chip:not([class*="belt-"]):not(.champ){background:#fff!important;color:#111!important}
/* official third-party logos (the Facebook and Instagram buttons, the Google, Facebook, and Yelp review badges) keep their
   own colors, shapes, and gradients in Easy view (Chris 2026-11-09: "the easy read shouldn't change the official logos");
   Easy view may only make them larger. No color rule here may reach .usoc or .rev-src. */

/* the free week and contact forms: dark words, clear field edges */
html.easy form.lf-native{background:#fff!important;color:#111;border:2px solid #111!important}
html.easy form.lf-native :is(p,span,small,em,label,.lf-disclose,.lf-agree,.lf-note,.lf-optional,.muted):not(.btn,.btn *){color:#111!important}
html.easy form.lf-native :is(input,select,textarea){background:#fff!important;color:#111!important;border:2px solid #444!important}
html.easy form.lf-native a:not(.btn){color:#0B3D91!important}

/* Remaining today: plain white chips with dark words; a canceled class has a dark red border and dark red CANCELED,
   and the coach notes ("With Coach AJ") are dark green */
html.easy #gymstatus .stc{background:#fff!important;border:1.5px solid rgba(17,17,17,.55)!important;color:#111!important}
html.easy #gymstatus .stc *{color:#111!important}
html.easy #gymstatus .stc.stc-x{border:2.5px solid #A30500!important;background:#FFF5F3!important}
html.easy #gymstatus .stc.stc-x s{color:#111!important;text-decoration-color:#A30500;text-decoration-thickness:2px}
html.easy #gymstatus .stc.stc-x b{color:#A30500!important}
html.easy #gymstatus .stc .stc-note{color:#0A6324!important}
html.easy #gymstatus :is(.st-today,.st-detail,.st-notice,.stl,.stdt){color:#111!important}

/* the footer's credit band stays black so the Butterfly Effect mark keeps its colors */
html.easy footer.site .foot-bottom{background:#000!important;color:#fff!important}
html.easy footer.site .foot-bottom *{color:inherit}
html.easy footer.site .foot-bottom::before{background:none!important}

/* small labels grow to at least 15px */
html.easy :is(.rev-name,.rev-src,.lvl,.role,.coach-more,.chip,.gear-go,.tape-free,.sta,.stdt,.lf-kicker,.lf-steps),
html.easy .sched .scls :is(.t,.c,.l){font-size:.8rem!important}

/* bigger buttons and tap targets */
html.easy .btn{min-height:52px;box-shadow:none!important}
html.easy .mobile-cta .btn{min-height:0;font-size:15px}
@media (max-width:1279px){html.easy header.site nav.main a{font-size:1.1rem;padding:15px 2px}}
/* the header row and the utility bar keep their standard sizes on phones, so the logo, menu button, and language link still fit */
@media (max-width:760px){html.easy .util{font-size:12.24px}html.easy .brand .wm{font-size:25.5px}html.easy .brand .wm small{font-size:13.26px}}
@media (max-width:360px){html.easy .brand .wm{font-size:19.55px}html.easy .brand .wm small{font-size:10.2px}}

/* The announcement ribbon and the reviews keep scrolling in Easy view (Chris 2026-11-09), in the Easy view colors and larger type,
   at 60% of the usual speed: 30 px/s instead of 50, set by the homepage scripts from each loop's width. They pause while hovered,
   touched or held, or focused from the keyboard; there is no pause button. Visitors whose device asks for reduced motion get the
   still list and the still row instead (the @media blocks at the end of this section). */

/* Each announcement reads as one plain sentence (Chris 2026-11-09: the emojis, dots, and arrows were hard to read): every .rb-item
   carries a .rb-easy version with the day spelled out and one short underlined link phrase. The ribbon's own date logic still
   removes expired items. When adding an announcement, give it a .rb-easy sentence too (English and Spanish); an item without one
   falls back to its normal text (each item's usual words sit in .rb-std). */
.rb-easy{display:none}
html.easy .rb-item .rb-std{display:none}
html.easy .ribbon{text-transform:none;letter-spacing:.01em;line-height:1.5;font-size:1rem;padding:9px 0;border-top:1px solid rgba(17,17,17,.25)!important;border-bottom:2px solid #111!important}
html.easy .rb-item{color:#111!important;text-decoration:none!important;padding:0 2.2rem;border-right:2px solid rgba(17,17,17,.3)}
html.easy .rb-item .rb-easy{display:inline;font-family:var(--f-body);font-size:20px;line-height:1.5;font-weight:500;letter-spacing:0;text-transform:none;color:#111!important}
html.easy .rb-item .rb-go{color:#0B3D91!important;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em;font-weight:600}
html.easy .rb-u{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}

/* reviews: no 3D wheel; a flat row of large, plain cards. Phones keep their swipe strip (moved by script); wider screens loop the
   row with the same CSS animation as the standard marquee, over the doubled cards (the wheel keeps its copies as .rev-dup). */
html.easy .rev-marquee,html.easy .rev-marquee.is3d{position:static!important;overflow-x:auto!important;overflow-y:hidden!important;height:auto!important;
  width:auto!important;max-width:none!important;margin:0!important;perspective:none!important;-webkit-mask-image:none!important;mask-image:none!important;
  cursor:auto!important;padding:8px 0 18px!important}
html.easy .rev-marquee .rev-track,html.easy .rev-marquee.is3d .rev-track{position:static!important;display:flex!important;gap:20px!important;width:max-content!important;
  height:auto!important;flex-wrap:nowrap!important;padding:0 24px!important}
/* (no transform here except where the row holds still: an !important transform would override the loop's animation) */
html.easy .rev-marquee.is-swipe .rev-track{transform:none!important}
html.easy .rev-marquee .rev-card{position:relative!important;left:auto!important;top:auto!important;transform:none!important;opacity:1!important;visibility:visible!important;
  height:auto!important;pointer-events:auto!important;
  width:min(360px,82vw)!important;background:#fff!important;border:1.5px solid rgba(17,17,17,.45)!important;border-radius:8px!important;box-shadow:none!important}
html:not(.easy) .rev-marquee.is3d .rev-dup{display:none!important}
html.easy .rev-marquee .rev-face,html.easy .rev-marquee .rev-floor,html.easy .rev3d-nav:not(.rev-swipe-nav .rev3d-nav){display:none!important}
html.easy .rev-card blockquote{font-size:1.05rem!important;line-height:1.6!important}

@media (prefers-reduced-motion:no-preference){
  /* wider screens: the row loops on its own; no gap or side padding, so half the track is exactly one lap */
  html.easy .rev-marquee:not(.is-swipe){overflow:hidden!important}
  html.easy .rev-marquee:not(.is-swipe) .rev-track{gap:0!important;padding:0!important;
    animation-name:scroll!important;animation-duration:var(--revd,240s)!important;animation-timing-function:linear!important;animation-iteration-count:infinite!important;animation-delay:0s!important}
  html.easy .rev-marquee:not(.is-swipe) .rev-card{margin-right:20px!important;display:flex!important}
  html.easy .rev-marquee:not(.is-swipe):is(:hover,:focus-within,.held) .rev-track{animation-play-state:paused!important}
}
@media (prefers-reduced-motion:reduce){
  /* the announcements hold still as a short list, and the reviews as a row the visitor scrolls */
  html.easy .ribbon{white-space:normal;overflow:visible;cursor:auto;user-select:auto;-webkit-user-select:auto;padding:8px 0}
  html.easy .rb-track{display:block;width:auto;transform:none!important}
  html.easy .rb-item{display:block;max-width:var(--maxw);margin:0 auto;border-right:0;border-bottom:1px solid rgba(17,17,17,.15);padding:10px 24px!important}
  html.easy .rb-item[aria-hidden="true"]{display:none}
  html.easy .rb-item .rb-easy{display:block}
  html.easy .rev-marquee:not(.is-swipe) .rev-card[aria-hidden="true"]{display:none!important}
  html.easy .rev-marquee .rev-track{transform:none!important}
  /* only the still desktop row shows a scrollbar, for scrolling it with a mouse; the moving strip and row never do (a visible thumb
     on the phone strip read as a small black dash under the reviews, Chris 2026-11-09) */
  html.easy .rev-marquee:not(.is-swipe){scrollbar-width:auto;scrollbar-color:#444 #eee}
}

/* the status bar (Remaining today, canceled classes, and coach notes) reads larger */
html.easy .status{font-size:1rem}
html.easy #gymstatus .stc{font-size:16px!important;line-height:1.45}
html.easy #gymstatus :is(.st-today,.st-detail,.st-notice){font-size:16px}

/* gear pages: the larger text must not widen the product column past a phone screen */
html.easy .cc-shop-media > *{min-width:0}
/* blog list: the larger headings need the full width on phones, so the photo sits above the title */
@media (max-width:420px){html.easy .blog-item{flex-direction:column}html.easy .bi-thumb{width:100%;height:auto;aspect-ratio:3/2}}
html.easy a.blog-item{text-decoration:none}
html.easy .blog-item h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
/* the largest words wrap instead of running off a small phone */
html.easy :is(.post-body,.post-wrap,main) :is(h1,h2,h3){overflow-wrap:break-word}
html.easy .post-body :is(h2,h3){hyphens:auto;-webkit-hyphens:auto}
html.easy .hero h1{font-size:clamp(44px,8.4vw,6.6rem)}   /* the one-line hero headline keeps its standard size on phones */
@media (max-width:340px){html.easy .hero h1{font-size:39px}}
@media (max-width:360px){html.easy .mobile-cta .btn{font-size:14px}}
/* the homepage gear cards: one per row on phones, so names and prices have room at the larger size */
@media (max-width:560px){html.easy .shop .gear-grid{grid-template-columns:minmax(0,1fr)}}
/* light-theme fixes for small pieces drawn in white on the dark page */
html.easy .cta .leadform .lf-steps li::before{color:#111!important;border-color:#111!important;background:#fff!important}
html.easy :is(.faq summary,.faq details)::after,html.easy .faq summary::before{color:#A30500!important}
/* gear store: the jump bar is white, and product photos sit on plain warm white instead of dark smoke */
html.easy .cc-jump{background:#fff!important;background-image:none!important;border-bottom:2px solid #111!important}
html.easy :is(.cc-shop-stage,.hjj-shop-card-media,.cc-shop-thumbs button,.cc-views button,.cc-shop-thumbs > *){background:#F6F2EA!important;background-image:none!important}
html.easy :is(.cc-shop-thumbs,.cc-views) :is(button.is-active,[aria-current],[aria-selected="true"]){outline:3px solid #111!important;outline-offset:-3px}
html.easy :is(.cc-shop-stage,.hjj-shop-card-media) img{filter:none!important}
html.easy main::before,html.easy main::after{background-image:none!important;background:none!important}
/* the CombatCuff mark keeps its red; only its white letters turn near-black so they show on the light page */
html.easy .cc-logoh svg [fill="#FFFFFF"]{fill:#111!important}
@media (max-width:480px){html.easy .cc-jump .cc-seg-btn{border-width:1px!important;font-size:13.5px!important;padding-left:6px!important;padding-right:6px!important}}