/*!
 * Reset, base typography and layout primitives.
 * First ported from the Ledger design; restyled for the Private Club design (spec decision D35, November 5, 2026) and
 * authored by hand since. Every literal is a token from tokens.css.
 */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:var(--motion-0-01ms)!important;transition-duration:var(--motion-0-01ms)!important}}



body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-16-5);line-height:1.7;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;margin:0;letter-spacing:0}
p{margin:0 0 var(--space-1em)}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--space-28)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--deep);color:var(--palette-white);padding:var(--space-12) var(--space-18)}
.skip:focus{left:8px;top:8px}

/* Two-tone focus ring (spec 8.3): the approved brass outline, plus an inner ring in the ground color so it reads on every surface. */
:focus-visible{outline:2.5px solid var(--focus-outer);outline-offset:3px;border-radius:var(--radius-2);box-shadow:0 0 0 3px var(--focus-inner)}


/* ==========================================================================
   Additions beyond the prototype.
   Named utilities and fixes for markup the prototype did not have. Every value
   is a token from tokens.css.
   ========================================================================== */

/* Named utilities carrying the prototype's own inline values, so templates do
   not need style attributes to reproduce the approved interior page headings. */
.page-title{font-size:var(--fs-page-title)}
.page-title.narrow{max-width:16ch}
.page-title.wide{max-width:18ch}
.page-lede{color:var(--muted);font-size:var(--fs-18);max-width:56ch;margin-top:var(--space-18)}
.sec-tight{padding-top:0}
.sec-flush{padding-bottom:var(--space-34)}
.stack-top{margin-top:var(--space-28)}
.full-width{width:100%}

/* The prototype sets these two with style attributes on the sidecard's intro
   and footnote. Same declarations, same values, given class names so the
   template does not have to carry inline styles. */
.sidecard-intro{color:var(--muted);font-size:var(--fs-15-5)}
.sidecard-foot{font-size:var(--fs-13-5);color:var(--muted);border-top:1px solid var(--line-soft);padding-top:var(--space-18);margin:0}

/* Defensive wrapping for the two places that print the site title.
   The approved design never contains an unbreakable word, so this changes
   nothing about how it looks. It matters because the title comes from the
   database: wp-env's default is the 34-character "SouthFloridaBusinessLeadersWebsite",
   which cannot wrap and pushed the header 112px past a 360px viewport. A site
   name is data, and data must not be able to break the layout.
   Two details matter. `min-width:0` is required because a flex item defaults to
   min-width:auto and refuses to shrink below its content. And it has to be
   `overflow-wrap:anywhere`, not `break-word`: only `anywhere` is taken into
   account when the browser computes the min-content size, which is exactly the
   number the flex layout is consulting here. */
.brand,.brand-txt{min-width:0}
.brand-txt strong,footer.site .fbrand strong{overflow-wrap:anywhere}

/* The prototype's .card is a <button>, so its CSS never needed to suppress a
   link underline. Ours is an <a> so that every member card carries a real,
   crawlable URL — which brings the browser's default underline with it. This
   removes it and nothing else: the card is meant to look exactly as approved. */
a.card{text-decoration:none;color:inherit}