/* club-enhancement.css — scoped .club visual enhancement (EX FITNESS cabinet)
   Load AFTER styles.css in index.html.
   Every selector targets .club or its descendants/pseudo-elements only.
   Uses existing :root tokens and existing hairline colors from styles.css.
   No content changes and no layout-contract changes: grid geometry, padding,
   and the typography scale defined in styles.css are preserved. */

/* 1) Section separation: subtle skewed accent band behind the content,
   echoing the .hero:before diagonal geometry. */
.club{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid #293029}
.club::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(-6deg);opacity:.7;pointer-events:none;background:linear-gradient(105deg,transparent 0 57%,#1d271e 57% 61%,transparent 61%),linear-gradient(105deg,transparent 0 73%,#151c16 73% 74.5%,transparent 74.5%)}

/* 2) Vertical hairline at the edge of the title column (desktop 2-col grid). */
.club>div:first-child{border-right:1px solid #334034}

/* 3) Title block rhythm: slightly more air between eyebrow and the big title. */
.club .eyebrow{margin-bottom:36px}

/* 4) Paragraph rhythm: larger text, comfortable leading, lime accent rule
   echoing the .mark i bar. */
.club>p{font-size:17px;line-height:1.75;letter-spacing:.2px}
.club>p::before{content:"";display:block;width:56px;height:3px;background:var(--lime);margin:0 0 22px}

/* 5) <=800px: styles.css switches .club to block flow; swap the vertical
   rule for a horizontal divider. The h2 keeps its 40px margin-bottom; the
   border on the div prevents margin collapse, so the gap stays ~41px. */
@media(max-width:800px){
  .club::before{opacity:.45;transform:skewX(-3deg);background:linear-gradient(90deg,transparent 0 66%,#1d271e 66% 100%)}
  .club>div:first-child{border-right:0;border-bottom:1px solid #293029}
  .club>p{font-size:15px}
  .club>p::before{width:44px;height:2px;margin-bottom:18px}
}