/* ===========================================================
   Brian Flores — /coaches/brian-flores/
   Compositional pattern: minimalism & Swiss / International style.
   Layout only: strict 12-column grid, hairline rules, generous
   whitespace, mathematical type scale, hard left alignment.
   Colour, type faces and chrome all come from style.css.
   All classes are prefixed bfl- and are used only on this page.
   =========================================================== */

.page-bfl{
  /* ---- mathematical type scale (1.32 ratio, rounded) ---- */
  --bfl-t-10:11px;   /* small-caps index labels          */
  --bfl-t-20:13px;   /* captions, table heads            */
  --bfl-t-30:16px;   /* body                             */
  --bfl-t-40:21px;   /* lead paragraph                   */
  --bfl-t-50:28px;   /* h3                               */
  --bfl-t-60:38px;   /* h2 display                       */

  /* ---- the grid ---- */
  --bfl-cols:12;
  --bfl-gut:24px;
  --bfl-shell:1200px;

  /* ---- rules ---- */
  --bfl-rule:#c4c2d2;          /* hairline on --page            */
  --bfl-rule-strong:#4f2683;   /* section-opening rule          */
  --bfl-rule-dark:rgba(255,255,255,.24);

  /* ---- text roles, all >= 4.5:1 on their own ground ---- */
  --bfl-ink:#1a1a1a;           /* 15.7:1 on --page              */
  --bfl-ink-2:#4a4a54;         /*  7.9:1 on --page              */
  --bfl-ink-3:#55555f;         /*  6.6:1 on --page              */
  --bfl-on-purple:#ffffff;     /* 10.8:1 on --purple            */
  --bfl-on-purple-2:#d9cfe9;   /*  7.2:1 on --purple            */
}

/* ===========================================================
   1. Shell and grid
   =========================================================== */
.bfl-shell{
  width:100%;max-width:var(--bfl-shell);margin:0 auto;padding:0 20px;
}
.bfl-grid{
  display:grid;
  grid-template-columns:repeat(var(--bfl-cols),minmax(0,1fr));
  column-gap:var(--bfl-gut);
}

/* the index/body split every section uses */
.bfl-idx{grid-column:1 / span 3}
.bfl-body{grid-column:4 / span 8}
.bfl-body-wide{grid-column:4 / span 9}

@media (max-width:900px){
  .page-bfl{--bfl-gut:16px}
  .bfl-idx,.bfl-body,.bfl-body-wide{grid-column:1 / -1}
  .bfl-idx{margin-bottom:18px}
}

/* ===========================================================
   2. Shared typographic atoms
   =========================================================== */
.bfl-label{
  font-family:var(--display);font-weight:600;
  font-size:var(--bfl-t-10);letter-spacing:.18em;text-transform:uppercase;
  color:var(--bfl-ink-3);margin:0;
}
.bfl-num{
  font-family:var(--display);font-weight:700;
  font-size:var(--bfl-t-10);letter-spacing:.16em;
  color:var(--purple);margin:0 0 8px;
  font-variant-numeric:tabular-nums;
}
.bfl-h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,3.4vw,var(--bfl-t-60));line-height:1.04;
  letter-spacing:.005em;color:var(--bfl-ink);
  margin:0 0 var(--space-3);max-width:22ch;
}
.bfl-h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,2.1vw,var(--bfl-t-50));line-height:1.1;
  letter-spacing:.01em;color:var(--bfl-ink);margin:0 0 10px;
}
.bfl-h4{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:15px;letter-spacing:.1em;color:var(--purple);margin:0 0 6px;
}
.bfl-p{
  font-size:var(--bfl-t-30);line-height:1.62;color:var(--bfl-ink-2);
  margin:0 0 var(--space-2);max-width:66ch;
}
.bfl-p:last-child{margin-bottom:0}
.bfl-p b,.bfl-p strong{color:var(--bfl-ink);font-weight:700}
.bfl-lead{
  font-size:clamp(17px,2vw,var(--bfl-t-40));line-height:1.45;
  color:var(--bfl-ink);margin:0 0 var(--space-3);max-width:54ch;
}
.bfl-p a,.bfl-lead a,.bfl-note a{
  color:var(--purple);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
}
.bfl-p a:hover,.bfl-lead a:hover,.bfl-note a:hover{text-decoration-thickness:2px}
/* Footnote. The rule runs the full measure of the column it sits in,
   the way a note rule does in a set reference document. */
.bfl-note{
  font-size:var(--bfl-t-20);line-height:1.6;color:var(--bfl-ink-3);
  margin:var(--space-3) 0 0;
  padding-top:12px;border-top:1px solid var(--bfl-rule);
}
.bfl-note + .bfl-note{margin-top:12px}

/* ===========================================================
   3. Breadcrumb
   =========================================================== */
.bfl-crumb{background:var(--page);border-bottom:1px solid var(--bfl-rule)}
.bfl-crumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:13px 0;margin:0;list-style:none;
  font-family:var(--display);font-weight:600;
  font-size:var(--bfl-t-10);letter-spacing:.14em;text-transform:uppercase;
  color:var(--bfl-ink-3);
}
.bfl-crumb a{color:var(--purple);text-decoration:none}
.bfl-crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.bfl-crumb .bfl-sep{color:var(--bfl-ink-3)}

/* ===========================================================
   4. Hero — CSS only, no photography, no imagery
   The "visible grid" of the Swiss pattern is literal here:
   the twelve column hairlines are drawn behind the type.
   =========================================================== */
.bfl-hero{
  position:relative;background:var(--purple-ink);color:var(--bfl-on-purple);
  overflow:hidden;border-bottom:4px solid var(--gold);
}
.bfl-hero__rules{
  position:absolute;inset:0;pointer-events:none;
  max-width:var(--bfl-shell);margin:0 auto;padding:0 20px;
}
.bfl-hero__rules span{
  display:block;height:100%;
  background-image:repeating-linear-gradient(
    to right,
    rgba(68,206,227,.16) 0 1px,
    transparent 1px calc((100% + var(--bfl-gut)) / var(--bfl-cols))
  );
  border-right:1px solid rgba(68,206,227,.16);
}
.bfl-hero__in{position:relative;padding-block:var(--space-5) var(--space-4)}

.bfl-hero__eyebrow{
  font-family:var(--display);font-weight:600;
  font-size:var(--bfl-t-10);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 var(--space-3);
  padding-bottom:12px;border-bottom:1px solid var(--gold);
  grid-column:1 / -1;
}
.bfl-hero__name{
  grid-column:1 / span 9;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(46px,10.5vw,124px);line-height:.88;letter-spacing:-.005em;
  color:var(--bfl-on-purple);margin:0;
}
.bfl-hero__name .bfl-hero__given{display:block;color:var(--gold)}
.bfl-hero__role{
  grid-column:1 / span 9;
  margin:var(--space-3) 0 0;max-width:44ch;
  font-size:clamp(16px,1.7vw,19px);line-height:1.5;color:var(--bfl-on-purple-2);
}
.bfl-hero__role b{color:var(--bfl-on-purple);font-weight:700}

.bfl-vitals{
  grid-column:1 / -1;margin:var(--space-5) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid var(--bfl-rule-dark);
}
.bfl-vitals li{
  padding:16px var(--bfl-gut) 4px 0;
  border-right:1px solid var(--bfl-rule-dark);
}
.bfl-vitals li:last-child{border-right:0}
.bfl-vitals dt,.bfl-vitals .bfl-vk{
  font-family:var(--display);font-weight:600;
  font-size:var(--bfl-t-10);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:0 0 7px;
}
.bfl-vitals dd,.bfl-vitals .bfl-vv{
  margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(17px,2vw,23px);line-height:1.18;letter-spacing:.01em;
  color:var(--bfl-on-purple);text-transform:uppercase;
}
.bfl-vitals .bfl-vsub{
  display:block;margin-top:5px;font-family:var(--body);font-weight:400;
  font-size:var(--bfl-t-20);letter-spacing:0;text-transform:none;
  line-height:1.4;color:var(--bfl-on-purple-2);
}
@media (max-width:900px){
  .bfl-hero__name,.bfl-hero__role{grid-column:1 / -1}
  .bfl-vitals{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--space-4)}
  .bfl-vitals li{padding-bottom:16px;border-bottom:1px solid var(--bfl-rule-dark)}
  .bfl-vitals li:nth-child(2n){border-right:0}
  .bfl-vitals li:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:520px){
  .bfl-vitals{grid-template-columns:1fr}
  .bfl-vitals li{border-right:0}
  .bfl-vitals li:nth-last-child(-n+2){border-bottom:1px solid var(--bfl-rule-dark)}
  .bfl-vitals li:last-child{border-bottom:0}
  .bfl-hero__rules{display:none}
}

/* ===========================================================
   5. Sections — separated by rules, never by boxes
   =========================================================== */
.bfl-sec{padding:var(--space-5) 0;border-top:1px solid var(--bfl-rule)}
.bfl-sec:first-of-type{border-top:0}
.bfl-sec--open{border-top:0}
.bfl-sec--rule-strong{border-top:2px solid var(--bfl-rule-strong)}
.bfl-idx{position:relative}
@media (min-width:901px){
  .bfl-idx-sticky{position:sticky;top:78px}
}

/* ===========================================================
   6. Definition list used as a reference block
   =========================================================== */
.bfl-dl{margin:0;padding:0}
.bfl-dl__row{
  display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);
  gap:var(--bfl-gut);
  padding:13px 0;border-top:1px solid var(--bfl-rule);
}
.bfl-dl__row:first-child{border-top:0;padding-top:0}
.bfl-dl dt{
  font-family:var(--display);font-weight:600;
  font-size:var(--bfl-t-20);letter-spacing:.11em;text-transform:uppercase;
  color:var(--bfl-ink-3);margin:0;
}
.bfl-dl dd{
  margin:0;font-size:var(--bfl-t-30);line-height:1.5;color:var(--bfl-ink);
}
@media (max-width:620px){
  .bfl-dl__row{grid-template-columns:1fr;gap:4px}
}

/* ===========================================================
   7. Data table — rules only, no fills, no shadows
   =========================================================== */
/* The caption sits outside the scrolling box so it is never clipped
   on a narrow screen; the table points back to it with aria-describedby. */
.bfl-tcap{
  font-size:var(--bfl-t-20);line-height:1.5;color:var(--bfl-ink-3);
  margin:0 0 14px;max-width:70ch;
}
.bfl-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bfl-table{
  width:100%;min-width:520px;border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.bfl-table caption{
  text-align:left;font-size:var(--bfl-t-20);line-height:1.5;
  color:var(--bfl-ink-3);padding-bottom:12px;
}
.bfl-table th,.bfl-table td{
  text-align:left;padding:12px 16px 12px 0;
  border-bottom:1px solid var(--bfl-rule);vertical-align:top;
}
.bfl-table thead th{
  font-family:var(--display);font-weight:600;
  font-size:var(--bfl-t-10);letter-spacing:.16em;text-transform:uppercase;
  color:var(--bfl-ink-3);border-bottom:2px solid var(--purple);
  padding-bottom:9px;white-space:nowrap;
}
.bfl-table tbody th{
  font-family:var(--display);font-weight:700;
  font-size:var(--bfl-t-30);letter-spacing:.02em;color:var(--bfl-ink);
  white-space:nowrap;
}
.bfl-table tbody td{font-size:15px;line-height:1.5;color:var(--bfl-ink-2)}
.bfl-table .bfl-numcell{
  font-family:var(--display);font-weight:700;font-size:17px;color:var(--bfl-ink);
  white-space:nowrap;
}
.bfl-table tfoot th,.bfl-table tfoot td{
  border-bottom:0;border-top:2px solid var(--purple);
  font-family:var(--display);font-weight:700;font-size:17px;color:var(--purple);
  padding-top:13px;
}
.bfl-table tfoot th{
  font-size:var(--bfl-t-10);letter-spacing:.16em;text-transform:uppercase;
  color:var(--bfl-ink-3);font-weight:600;
}

/* ===========================================================
   8. Timeline — hairline ledger, no dots, no cards
   =========================================================== */
.bfl-ledger{list-style:none;margin:0;padding:0}
.bfl-ledger > li{
  display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr);
  gap:var(--bfl-gut);
  padding:16px 0;border-top:1px solid var(--bfl-rule);
}
.bfl-ledger > li:first-child{border-top:0;padding-top:0}
.bfl-ledger__yr{
  font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.04em;
  color:var(--purple);font-variant-numeric:tabular-nums;
}
.bfl-ledger__what{margin:0}
.bfl-ledger__role{
  display:block;font-family:var(--display);font-weight:700;
  font-size:17px;letter-spacing:.02em;text-transform:uppercase;
  color:var(--bfl-ink);margin-bottom:4px;
}
.bfl-ledger__org{
  display:block;font-size:15px;line-height:1.55;color:var(--bfl-ink-2);
}
@media (max-width:620px){
  .bfl-ledger > li{grid-template-columns:1fr;gap:5px}
}

/* ===========================================================
   9. Scheme blocks — labelled prose, deliberately NOT diagrams
   =========================================================== */
.bfl-blocks{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--bfl-gut);row-gap:0;
  border-top:1px solid var(--bfl-rule);
}
.bfl-blocks > article{
  padding:20px var(--bfl-gut) 22px 0;
  border-bottom:1px solid var(--bfl-rule);
}
.bfl-blocks > article:nth-child(2n){padding-right:0}
.bfl-blocks > article:nth-last-child(-n+2){border-bottom:0}
.bfl-blocks p{
  font-size:15px;line-height:1.6;color:var(--bfl-ink-2);margin:0;max-width:46ch;
}
.bfl-blocks .bfl-term{
  display:block;font-family:var(--display);font-weight:600;
  font-size:var(--bfl-t-10);letter-spacing:.16em;text-transform:uppercase;
  color:var(--bfl-ink-3);margin-bottom:9px;
}
@media (max-width:760px){
  .bfl-blocks{grid-template-columns:1fr}
  .bfl-blocks > article{padding-right:0}
  .bfl-blocks > article:nth-last-child(2){border-bottom:1px solid var(--bfl-rule)}
}

/* ===========================================================
   10. Figures — a number set large, rule above, caption below
   =========================================================== */
.bfl-figs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--bfl-gut);row-gap:var(--space-3);
  margin:0;padding:0;list-style:none;
}
.bfl-figs > li{border-top:2px solid var(--purple);padding-top:12px}
.bfl-figs .bfl-fig-n{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(30px,4vw,44px);line-height:1;letter-spacing:-.01em;
  color:var(--purple);font-variant-numeric:tabular-nums;
}
.bfl-figs .bfl-fig-k{
  display:block;margin-top:9px;font-family:var(--display);font-weight:600;
  font-size:var(--bfl-t-10);letter-spacing:.15em;text-transform:uppercase;
  color:var(--bfl-ink-3);
}
.bfl-figs .bfl-fig-d{
  display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--bfl-ink-2);
}
@media (max-width:760px){.bfl-figs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.bfl-figs{grid-template-columns:1fr}}

/* ===========================================================
   11. Record-of-fact panel (lawsuit) — inverted, still no box art
   =========================================================== */
.bfl-record{background:var(--purple-ink);color:var(--bfl-on-purple)}
.bfl-record .bfl-label{color:var(--gold)}
.bfl-record .bfl-num{color:var(--gold)}
.bfl-record .bfl-h2{color:var(--bfl-on-purple)}
.bfl-record .bfl-p{color:var(--bfl-on-purple-2)}
.bfl-record .bfl-p b{color:var(--bfl-on-purple)}
.bfl-record .bfl-p a,.bfl-record .bfl-note a{color:var(--gold)}
.bfl-record .bfl-note{color:var(--bfl-on-purple-2);border-top-color:var(--bfl-rule-dark)}
.bfl-record .bfl-dl__row{border-top-color:var(--bfl-rule-dark)}
.bfl-record .bfl-dl dt{color:var(--gold)}
.bfl-record .bfl-dl dd{color:var(--bfl-on-purple)}

/* ===========================================================
   12. Sources
   =========================================================== */
.bfl-src{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--bfl-gut);row-gap:0;border-top:1px solid var(--bfl-rule)}
.bfl-src > li{padding:12px 0;border-bottom:1px solid var(--bfl-rule);
  font-size:14px;line-height:1.55;color:var(--bfl-ink-2)}
.bfl-src > li:nth-child(2n){padding-left:var(--bfl-gut)}
.bfl-src a{color:var(--purple);text-decoration:underline;text-underline-offset:3px;
  word-break:break-word}
.bfl-src cite{font-style:normal;font-weight:700;color:var(--bfl-ink)}
@media (max-width:760px){
  .bfl-src{grid-template-columns:1fr}
  .bfl-src > li:nth-child(2n){padding-left:0}
}

/* ===========================================================
   13. Section links out
   =========================================================== */
.bfl-out{display:flex;flex-wrap:wrap;gap:26px;margin-top:var(--space-3);
  padding-top:16px;border-top:1px solid var(--bfl-rule)}
.bfl-out a{
  font-family:var(--display);font-weight:600;font-size:var(--bfl-t-20);
  letter-spacing:.11em;text-transform:uppercase;color:var(--purple);
  display:inline-flex;align-items:center;gap:8px;
}
.bfl-out a:hover{text-decoration:underline;text-underline-offset:4px}
.bfl-out svg{width:14px;height:14px;flex:none}

/* ===========================================================
   14. Motion + print
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  .page-bfl *,.page-bfl *::before,.page-bfl *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .page-bfl .bfl-idx-sticky{position:static}
}
.page-bfl :focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.bfl-hero :focus-visible,.bfl-record :focus-visible{outline-color:var(--gold)}

/* ---------- hero portrait (real club headshot, 320x320 verified) ---------- */
.bfl-portrait{grid-column:10 / -1;grid-row:2 / span 2;align-self:end;margin:0;justify-self:end}
.bfl-portrait img{display:block;width:176px;height:176px;object-fit:cover;border:1px solid var(--gold);background:rgba(255,255,255,.05)}
@media(max-width:860px){
  .bfl-portrait{grid-column:1 / -1;grid-row:auto;justify-self:start;margin:var(--space-4) 0 0}
  .bfl-portrait img{width:120px;height:120px}
}