/* ============================================================
   lily sports — shared brand foundation
   ------------------------------------------------------------
   Values marked (chief) are lifted verbatim from
   3PR-Solutions-Group/chief-and-co index.html :root — not matched
   by eye. Lily is a Chief & Co product; the palette and the mark
   are the parent's.

   Two grounds are defined here and a page picks ONE:
     .on-light  — the cream ground (chiefand.co)
     .on-dark   — the dark ground (pitch.veromarbella.com)
   Both resolve the same token names, so no component names a hex.

   THE ONE RULE THAT MATTERS (docs/BRAND-STYLE-GUIDE.md §3):
   a colour that is a THING and the same colour as a WORD are two
   tokens. `color:` takes the -ink half. Everything else takes the
   base. On the dark ground the base IS legal as text (6.59:1 on
   --bone), which is why --accent-ink resolves to the base there.
   ============================================================ */

:root{
  /* --- light ground (chief) --- */
  --bg:#F7F2E9;            /* (chief --bg) */
  --bg-warm:#EEE6D6;       /* (chief --bg-warm) */
  --bg-soft:#E7DECB;       /* (chief --bg-soft) */
  --bg-elev:#FBF7F0;       /* (chief --bg-elev) */
  --ink:#2B221C;           /* (chief --ink) */
  --ink-soft:#5C5045;      /* (chief --ink-soft) */
  --ink-muted:rgba(43,34,28,.66);
  --ink-faint:rgba(43,34,28,.42);
  --line:rgba(43,34,28,.16);   /* (chief --line) */
  --hair:rgba(43,34,28,.08);   /* (chief --hair) */

  --accent:#B08640;        /* (chief --accent) */
  --accent-warm:#C9A35E;   /* (chief --accent-warm) — dark grounds + the mark */
  --accent-deep:#8E6C2E;   /* (chief --accent-deep) — the accent ON LIGHT */
  --accent-ink:#81622A;    /* the accent as a WORD on light — 5.66:1 on white */
  --live:#3E8E5A;          /* (chief --live) the emitter dot */
  --live-ink:#2F7A4C;      /* the word beside it — clears 4.5:1 on white */

  /* --- dark ground (vero/chief dk) --- */
  --dk:#0E0D0C;
  --dk-warm:#15120F;
  --dk-soft:#1C1813;
  --dk-elev:#221E18;
  --dk-tint:#2A2520;
  --cream:#F4ECD8;         /* (chief --dk-cream) */
  --cream-soft:#D8CDB4;
  --cream-mut:rgba(244,236,216,.6);
  --dk-hair:rgba(244,236,216,.09);
  --dk-line:rgba(244,236,216,.16);

  --fd:'DM Sans',system-ui,-apple-system,sans-serif;
  --fs:'DM Sans',system-ui,-apple-system,sans-serif;
  --fm:'DM Mono',ui-monospace,SFMono-Regular,monospace;
  --fx:'Fraunces',Georgia,serif;   /* display italic only — never body */

  --gutter:clamp(20px,4vw,56px);
  --max:1200px;
  --ease:cubic-bezier(.16,.84,.32,1);
}

/* ---- ground selection ---------------------------------------- */
/* Every ink below was MEASURED against the worst of the four grounds it can
   land on, not chosen. The first draft copied Chief's --ink-faint (.42 alpha)
   straight across; a browser pass measured it at 3.60:1 on the lightest dark
   ground and 2.38:1 on the darkest light one — 272 failures across the two
   pages, because a faint ink is used for provenance lines and table headers,
   which are text. The alphas here are the smallest step clearing 4.55 on the
   worst ground, then rounded up one notch. Ratios in the comments are the
   WORST case of the four, not the flattering one. */
.on-light{
  --g:var(--bg); --g2:var(--bg-elev); --g3:var(--bg-warm); --g4:var(--bg-soft);
  --tx:var(--ink);                       /* 12.55 worst */
  --tx2:var(--ink-soft);                 /* #5C5045 — 5.84 worst */
  --tx3:rgba(43,34,28,.72);              /* 5.32 worst */
  --tx4:rgba(43,34,28,.68);              /* 4.74 worst */
  --rule:var(--line); --rule2:var(--hair);
  --acc:var(--accent-deep);        /* fills, borders, icons, rules */
  --acc-tx:var(--accent-ink);      /* the accent as a word — 4.56 worst */
  --acc-on:#FFFFFF;                /* ink that sits ON the accent — 4.84:1 */
  --lv:var(--live); --lv-tx:var(--live-ink);
  /* A word on a WASH is a third case, and it is where the guide's own
     "--live-ink clears 4.5:1 on white" stops being true: on a 13% green wash
     over the warm band it measures 3.45. These are the same hue stepped deeper
     until the worst ground clears 4.55. */
  --chip-tx:rgba(43,34,28,.72);    /* neutral word on a 7% ink wash — 4.96 */
  --chip-lv:#26653E;               /* live word on a 13% live wash  — 4.59 */
  --chip-acc:#6E5323;              /* accent word on an 11% wash    — 4.77 */
}
.on-dark{
  --g:var(--dk); --g2:var(--dk-soft); --g3:var(--dk-warm); --g4:var(--dk-elev);
  --tx:var(--cream);                     /* 14.6 worst */
  --tx2:var(--cream-soft);               /* #D8CDB4 — 10.51 worst */
  --tx3:rgba(244,236,216,.66);           /* 6.84 worst */
  --tx4:rgba(244,236,216,.56);           /* 5.31 worst */
  --rule:var(--dk-line); --rule2:var(--dk-hair);
  --acc:var(--accent-warm);
  --acc-tx:var(--accent-warm);     /* 6.59:1 on --ink — legal as a word here */
  --acc-on:var(--dk);
  --lv:#6FBF8A; --lv-tx:#6FBF8A;
  --chip-tx:rgba(244,236,216,.72);
  --chip-lv:#6FBF8A;
  --chip-acc:var(--accent-warm);
}

/* ---- reset + base -------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:80px}
body{font-family:var(--fs);font-weight:400;font-size:16px;line-height:1.55;
  letter-spacing:-.005em;overflow-x:clip;min-height:100vh;
  background:var(--g);color:var(--tx)}
::selection{background:var(--acc);color:var(--acc-on)}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1}

/* ---- the mark ------------------------------------------------
   Three ascending chevrons. Chief's stroke and angle with a third
   added and the stack faded upward; Chief's own mark is two and
   stays the parent's. viewBox cropped to the ink (47 29 206 236) —
   the full 0 0 300 300 box carries ~30% dead padding, which is what
   made the first lockup read as two unrelated objects.

   THE RISE: a highlight travels bottom → top, opacity only. A logo
   reports nothing, so it cannot misreport — this is the one named
   exemption to "motion is a claim" (BRAND-STYLE-GUIDE §6).
   --------------------------------------------------------------- */
.mk{flex:none;display:block}
.mk .c1{--o:.78}
.mk .c2{--o:.5}
.mk .c3{--o:.26}
.mk .c1,.mk .c2,.mk .c3{opacity:var(--o);animation:rise 2.8s var(--ease) infinite}
.mk .c3{animation-delay:0s}
.mk .c2{animation-delay:.17s}
.mk .c1{animation-delay:.34s}
@keyframes rise{0%,30%,100%{opacity:var(--o)}11%{opacity:1}}

/* Lockup: gap:0 on the flex container, every space set explicitly.
   A bare text node inside a flex container becomes an ANONYMOUS FLEX
   ITEM, so a container `gap` silently applies between the two words
   as well as between mark and word. That bug is where the original
   .30em came from; nobody chose it. */
.lockup{display:inline-flex;align-items:baseline;gap:0;color:var(--tx);
  font-family:var(--fs);font-weight:640;font-size:22px;line-height:1;
  letter-spacing:-.048em;white-space:nowrap}
.lockup .mk{align-self:center;margin-right:.24em}
.lockup .s{font-weight:420;color:var(--tx3);letter-spacing:-.036em;margin-left:.09em}

/* ---- type ----------------------------------------------------
   Hierarchy from weight and tracking, never a second face. Fraunces
   is display italic ONLY — one or two words inside a heading. Mono
   is labels, keys and code: not a sentence, not a price. Figures use
   the normal face with tabular figures, which aligns just as well
   and stays readable.
   --------------------------------------------------------------- */
/* The rule sits on the FIRST line of the label, not floating against the
   middle of a wrapped block — which is what centring gave on a 375 screen
   where the eyebrow runs to two lines. */
.ey{display:inline-flex;align-items:flex-start;gap:14px;font-family:var(--fm);
  font-weight:500;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc-tx);line-height:1.5}
.ey::before{content:'';width:30px;height:1px;background:var(--acc);flex:none;
  margin-top:.72em}

.sl{display:inline-flex;align-items:center;gap:12px;font-family:var(--fm);
  font-weight:500;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc-tx);margin-bottom:16px}

h1,h2,h3,h4{font-family:var(--fd);text-wrap:balance}
.h-hero{font-weight:700;font-size:clamp(38px,7.4vw,86px);line-height:1;
  letter-spacing:-.035em;max-width:16ch}
.sh{font-weight:600;font-size:clamp(26px,4.2vw,44px);line-height:1.1;
  letter-spacing:-.025em;max-width:21ch}
.sh2{font-weight:600;font-size:clamp(21px,2.6vw,28px);line-height:1.18;
  letter-spacing:-.02em}
em.x{font-family:var(--fx);font-style:italic;font-weight:400;
  font-optical-sizing:auto;color:var(--acc-tx);letter-spacing:-.01em}
.sd{margin-top:18px;color:var(--tx3);font-size:16.5px;line-height:1.62;max-width:58ch}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.005em}

section{padding:clamp(52px,7vw,86px) 0;position:relative;overflow:clip}
.band{background:var(--g3);border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule2)}

/* ---- scroll reveal -------------------------------------------
   Native CSS scroll-driven. Visible by default so it can never blank
   out a section on a browser that does not support it. */
.rv{opacity:1}
@keyframes revealIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rv{opacity:0;animation:revealIn linear both;animation-timeline:view();
      animation-range:entry 0% entry 46%}
  }
}

/* ---- nav ------------------------------------------------------ */
.prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:300;
  background:linear-gradient(90deg,var(--acc),var(--acc-deep,var(--acc)));
  transition:width 90ms linear}
.nav{position:fixed;top:0;left:0;right:0;height:64px;z-index:200;
  background:color-mix(in srgb,var(--g) 80%,transparent);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--rule2)}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-link{font-size:13.5px;color:var(--tx3);transition:color .2s}
.nav-link:hover{color:var(--tx)}
.nav-link.on{color:var(--tx)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;min-width:44px;min-height:44px}
.burger span{display:block;width:20px;height:1.5px;background:var(--tx);margin:4px 0;transition:.3s}
@media(max-width:900px){
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:4px;background:var(--g2);padding:14px var(--gutter) 20px;
    border-bottom:1px solid var(--rule);display:none;max-height:70vh;overflow-y:auto}
  .nav-links.open{display:flex}
  .nav-link{font-size:16px;padding:11px 0;width:100%;min-height:44px;display:flex;align-items:center}
  .burger{display:block}
}

/* ---- buttons -------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--fs);font-size:14px;font-weight:600;letter-spacing:.01em;
  padding:14px 26px;border-radius:2px;border:1px solid transparent;cursor:pointer;
  min-height:44px;transition:background .25s,color .25s,border-color .25s,transform .2s}
.btn-p{background:var(--acc);color:var(--acc-on)}
.btn-p:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-g{color:var(--tx);border-color:var(--rule);padding:14px 22px}
.btn-g:hover{border-color:var(--acc);color:var(--acc-tx)}

/* ---- tables ---------------------------------------------------
   Wide content scrolls INSIDE its own container. The page body never
   scrolls horizontally. Measured per element, not on document. */
.tw{margin-top:30px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--rule);border-radius:12px;background:var(--g2)}
table.t{border-collapse:separate;border-spacing:0;width:100%;min-width:600px;font-size:14.5px}
table.t th,table.t td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--rule2);
  vertical-align:top;line-height:1.5}
table.t thead th{font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx4);vertical-align:bottom;
  background:var(--g2);position:sticky;top:0;z-index:1}
table.t tbody tr:last-child td{border-bottom:0}
table.t td.n,table.t th.n{text-align:right;font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;white-space:nowrap}
table.t tr.grp td{background:var(--g3);font-family:var(--fm);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--acc-tx);padding:9px 14px}
table.t td.hi{color:var(--acc-tx);font-weight:600}
table.t .yes{color:var(--acc-tx);font-weight:700}
table.t .no{color:var(--tx4)}
.tn{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--tx4);max-width:78ch}
.tn b{color:var(--tx2);font-weight:600}

/* ---- stat tiles -----------------------------------------------
   Every stat tile carries its provenance line. Required, not
   optional — it is the difference between a true screen and one
   that reports a number nobody can trace. */
.stats{margin-top:34px;display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.stat{background:var(--g2);padding:22px 20px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat-n{font-family:var(--fd);font-weight:700;font-size:clamp(26px,3vw,34px);line-height:1.05;
  letter-spacing:-.032em;font-variant-numeric:tabular-nums;color:var(--tx)}
.stat.acc .stat-n{color:var(--acc-tx)}
.stat-l{font-size:14.5px;color:var(--tx2);margin-top:7px;line-height:1.4}
.stat-d{font-size:13px;color:var(--tx4);margin-top:5px;line-height:1.45}

/* ---- cards ---------------------------------------------------- */
.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:12px;overflow:hidden;margin-top:34px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--g2);padding:24px 22px;display:flex;flex-direction:column;gap:9px;min-width:0}
.card-k{font-family:var(--fm);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acc-tx)}
.card h3{font-weight:600;font-size:17.5px;letter-spacing:-.012em;line-height:1.25}
.card p{font-size:14.5px;color:var(--tx3);line-height:1.6}
@media(max-width:900px){.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}

/* ---- numbered narrative rows ---------------------------------- */
.rows{margin-top:34px;display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:230px 1fr;gap:30px;padding:26px 2px;
  border-bottom:1px solid var(--rule);align-items:baseline}
.row-h{display:flex;flex-direction:column;gap:9px}
.row-n{font-family:var(--fm);font-size:13px;color:var(--acc-tx);letter-spacing:.08em}
.row h3{font-weight:600;font-size:19.5px;letter-spacing:-.014em;line-height:1.2}
.row p{font-size:15px;color:var(--tx3);line-height:1.62;max-width:62ch}
.row p+p{margin-top:11px}
@media(max-width:760px){.row{grid-template-columns:1fr;gap:10px;padding:22px 2px}}

/* ---- accordion ------------------------------------------------ */
.acc{margin-top:34px;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--g2)}
.ai{border-bottom:1px solid var(--rule)}
.ai:last-child{border-bottom:0}
.ah{width:100%;background:none;border:0;cursor:pointer;display:flex;align-items:flex-start;
  gap:16px;padding:20px 22px;text-align:left;color:var(--tx);font-family:inherit;
  min-height:44px;transition:background .25s}
.ah:hover{background:var(--g4)}
.ah-n{font-family:var(--fm);font-size:13px;color:var(--acc-tx);flex:none;padding-top:3px;
  font-variant-numeric:tabular-nums}
.ah-q{font-weight:600;font-size:16.5px;letter-spacing:-.012em;line-height:1.35;flex:1;min-width:0}
.ah-t{margin-left:auto;flex:none;width:26px;height:26px;position:relative;color:var(--acc-tx);
  transition:transform .35s var(--ease)}
.ah-t::before,.ah-t::after{content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);background:currentColor}
.ah-t::before{width:13px;height:1.6px}
.ah-t::after{width:1.6px;height:13px;transition:opacity .3s}
.ai.open .ah-t{transform:rotate(180deg)}
.ai.open .ah-t::after{opacity:0}
.ab{overflow:hidden;max-height:0;transition:max-height .42s var(--ease)}
.ab-in{padding:0 22px 24px 60px}
.ab-in p{font-size:15px;color:var(--tx3);line-height:1.65;max-width:64ch}
.ab-in p+p{margin-top:12px}
@media(max-width:600px){.ab-in{padding:0 22px 22px}}

/* ---- callout -------------------------------------------------- */
.note{margin-top:26px;padding:20px 22px;border-left:2px solid var(--acc);
  background:color-mix(in srgb,var(--acc) 8%,transparent);
  border-radius:0 10px 10px 0;font-size:15px;line-height:1.62;color:var(--tx2);max-width:74ch}
.note b{color:var(--tx);font-weight:600}
.note.hard{border-left-color:var(--lv);background:color-mix(in srgb,var(--lv) 9%,transparent)}

/* ---- chips ---------------------------------------------------- */
/* A chip's word sits on a wash, not on the page ground, so it takes the
   -chip- half rather than the -tx half. Measured per pair, worst ground. */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  padding:5px 10px;border-radius:6px;background:color-mix(in srgb,var(--tx) 7%,transparent);
  color:var(--chip-tx);white-space:nowrap}
/* LIVE is the one chip that animates, because it is the one chip asserting
   something is happening right now. If nothing is running it does not ship. */
.chip.live{color:var(--chip-lv);background:color-mix(in srgb,var(--lv) 13%,transparent)}
.chip.live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--lv);
  flex:none;animation:emit 2.4s var(--ease) infinite}
.chip.info{color:var(--chip-acc);background:color-mix(in srgb,var(--acc) 11%,transparent)}
.chip.wait{color:var(--tx3);border:1px solid var(--rule);background:transparent}
@keyframes emit{0%,100%{opacity:1}50%{opacity:.4}}

/* ---- footer --------------------------------------------------- */
footer{border-top:1px solid var(--rule);padding:36px 0 44px}
.ft-in{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:22px}
.ft-r{text-align:right;font-size:13.5px;color:var(--tx4);line-height:1.6}
.ft-note{margin-top:22px;padding-top:20px;border-top:1px solid var(--rule2);
  font-size:13px;color:var(--tx4);line-height:1.62;max-width:86ch}
@media(max-width:640px){.ft-in{flex-direction:column}.ft-r{text-align:left}}

/* ---- reduced motion ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:1ms !important;animation-iteration-count:1 !important;
    transition-duration:1ms !important}
  /* The mark freezes at its resting opacities rather than flattening,
     because the fade-up is part of the drawing. */
  .mk .c1,.mk .c2,.mk .c3{animation:none !important;opacity:var(--o) !important}
  .chip.live::before{opacity:1 !important}
}