/* Kindlewood Cares — site stylesheet
   Extracted from the approved prototype (site/test/index.html) during the 2026
   redesign. See docs/redesign-plan-2026.md.

   Sections:
     1. tokens          palette, type, spacing
     2. base            reset, body, typography
     3. nav + footer    site chrome (new in the redesign; the prototype had none)
     4. hero
     5. components      bands, cards, tiers, stats, meter, photo grids
     6. utilities + motion
*/


:root{
  --navy:#0A192F; --navy-dark:#020C1B; --navy-light:#172A45;
  --gold:#C5A059; --gold-hi:#D4AF37; --green:#3E6342;
  --white:#fff; --off:#F8F9FA; --gray:#475569;
  --display:'Outfit',system-ui,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--navy-dark);color:var(--white);overflow-x:hidden}
img{max-width:100%;display:block}


/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;display:grid;place-items:center;
  padding:7rem 1.5rem 4rem;text-align:center;overflow:hidden}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 40%}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,12,27,.58) 0%,rgba(2,12,27,.74) 55%,rgba(2,12,27,.95) 100%)}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;
  mix-blend-mode:screen;opacity:.45}
.hero-inner{position:relative;z-index:3;max-width:56rem}
.eyebrow{font-family:var(--display);letter-spacing:.28em;text-transform:uppercase;
  font-size:.75rem;color:var(--gold);margin-bottom:1.5rem}
h1{font-family:var(--display);font-weight:800;line-height:1.04;
  font-size:clamp(2.4rem,7.5vw,5rem);letter-spacing:-.02em;
  text-shadow:0 2px 30px rgba(2,12,27,.6)}
h1 .gold{color:var(--gold);display:block}
.lede{margin:1.75rem auto 0;max-width:40rem;font-size:clamp(1.02rem,2.2vw,1.22rem);
  line-height:1.7;color:#DCE5EF;text-shadow:0 1px 12px rgba(2,12,27,.7)}
.cta{margin-top:2.5rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn{font-family:var(--display);font-weight:600;font-size:.95rem;padding:.95rem 2rem;
  border-radius:2rem;text-decoration:none;display:inline-block;transition:transform .2s,box-shadow .2s}
.btn-gold{background:var(--gold);color:var(--navy-dark);box-shadow:0 8px 30px rgba(197,160,89,.3)}
.btn-ghost{border:1px solid rgba(255,255,255,.45);color:var(--white);
  backdrop-filter:blur(4px);background:rgba(2,12,27,.25)}
.btn:hover{transform:translateY(-2px)}
.scroll-cue{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:3;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.scroll-cue::after{content:"";display:block;width:1px;height:2.2rem;margin:.6rem auto 0;
  background:linear-gradient(var(--gold),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}


/* ---------- 3. NAV + FOOTER — site chrome ----------
   The prototype was a single scrolling page with no navigation. These are new,
   designed against the same navy/gold system.

   The nav is a fixed bar that gains a solid background once scrolled, so it
   reads over the hero photograph without a hard edge at the top of the page. */
.skip-to-main{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--navy-dark);padding:.75rem 1.25rem;
  font-weight:600;border-radius:0 0 .5rem 0}
.skip-to-main:focus{left:0}

.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.nav.scrolled{background:rgba(2,12,27,.92);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav-inner{max-width:76rem;margin:0 auto;padding:.85rem 1.5rem;
  display:flex;align-items:center;gap:1.25rem}
.nav-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;
  color:var(--white);font-family:var(--display);font-weight:600;
  font-size:1.02rem;letter-spacing:-.01em;margin-right:auto}
.nav-brand img{width:40px;height:40px;border-radius:50%}

.nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;background:none;cursor:pointer;
  border:1px solid rgba(255,255,255,.25);border-radius:.5rem}
.nav-toggle span{display:block;height:2px;background:var(--white);border-radius:2px;
  transition:transform .25s,opacity .25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-menu{list-style:none;display:flex;align-items:center;gap:.35rem;margin:0;padding:0}
.nav-link{display:block;padding:.55rem .85rem;border-radius:.5rem;
  color:#DCE5EF;text-decoration:none;font-size:.94rem;
  font-family:var(--display);font-weight:400;
  background:none;border:0;cursor:pointer;font-family:inherit}
.nav-link:hover{color:var(--white);background:rgba(255,255,255,.08)}
.nav-link[aria-current="page"]{color:var(--gold)}
.nav-cta{background:var(--gold);color:var(--navy-dark)!important;font-weight:600;
  padding:.55rem 1.15rem;border-radius:2rem}
.nav-cta:hover{background:var(--gold-hi)}

/* Dropdown. Opens on hover for pointers and on click for everything else --
   the button's aria-expanded is the single source of truth either way. */
.nav-item{position:relative}
.nav-dropdown{list-style:none;margin:0;padding:.4rem;position:absolute;
  top:calc(100% + .4rem);left:0;min-width:14rem;
  background:var(--navy-light);border:1px solid rgba(255,255,255,.1);
  border-radius:.7rem;box-shadow:0 18px 44px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility .2s}
.nav-item:hover .nav-dropdown,
.nav-toggle-sub[aria-expanded="true"] + .nav-dropdown{
  opacity:1;visibility:visible;transform:none}
.nav-dropdown a{display:block;padding:.55rem .75rem;border-radius:.45rem;
  color:#C3D0DE;text-decoration:none;font-size:.9rem}
.nav-dropdown a:hover{background:rgba(197,160,89,.14);color:var(--white)}
.nav-caret{margin-left:.35rem;transition:transform .2s}
.nav-toggle-sub[aria-expanded="true"] .nav-caret{transform:rotate(180deg)}

@media(max-width:61.99rem){
  .nav-toggle{display:flex}
  .nav-menu{position:fixed;inset:64px 0 auto 0;flex-direction:column;
    align-items:stretch;gap:.15rem;padding:1rem 1.25rem 1.5rem;
    background:rgba(2,12,27,.98);backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.08);
    max-height:calc(100vh - 64px);overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .2s,transform .2s,visibility .2s}
  .nav-menu.open{opacity:1;visibility:visible;transform:none}
  .nav-link{padding:.8rem .9rem;font-size:1rem}
  .nav-cta{text-align:center;margin-top:.5rem}
  .nav-dropdown{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;background:rgba(255,255,255,.04);margin:.2rem 0 .4rem .5rem;
    display:none}
  .nav-toggle-sub[aria-expanded="true"] + .nav-dropdown{display:block}
}
@media(min-width:62rem){ .nav-toggle{display:none} }

/* Footer */
.site-footer{background:var(--navy-dark);border-top:1px solid rgba(255,255,255,.08);
  padding:3.5rem 1.5rem 2.5rem;color:#8095AC;font-size:.9rem;line-height:1.75}
.footer-grid{max-width:70rem;margin:0 auto;display:grid;gap:2.5rem;
  grid-template-columns:1fr}
@media(min-width:48rem){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer-brand{display:flex;align-items:center;gap:.7rem;
  color:var(--white);font-family:var(--display);font-weight:600;
  font-size:1.05rem;margin-bottom:.9rem;text-decoration:none}
.footer-brand img{width:38px;height:38px;border-radius:50%}
.footer h3{font-family:var(--display);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.9rem;font-weight:600}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin-bottom:.5rem}
.footer-links a,.site-footer a{color:#B8C6D6;text-decoration:none}
.footer-links a:hover,.site-footer a:hover{color:var(--gold);text-decoration:underline}
.footer-social{display:flex;gap:.6rem;margin-top:.4rem;flex-wrap:wrap}
.footer-social a{display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .95rem;border:1px solid rgba(255,255,255,.16);border-radius:2rem;
  font-size:.85rem;color:#C3D0DE}
.footer-social a:hover{border-color:var(--gold);color:var(--gold);text-decoration:none}
.footer-legal{max-width:70rem;margin:2.5rem auto 0;padding-top:1.75rem;
  border-top:1px solid rgba(255,255,255,.07);font-size:.82rem;text-align:center}

/* Fixed nav needs the page to start below it. */
body{padding-top:0}
main{display:block}

/* ---------- 5. COMPONENTS ---------- */
section{padding:6rem 1.5rem}
.wrap{max-width:70rem;margin:0 auto}
.narrow{max-width:46rem;margin:0 auto}
h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.5vw,3rem);
  line-height:1.12;margin-bottom:1.25rem;letter-spacing:-.015em}
.sub{color:#9FB0C4;max-width:42rem;line-height:1.7;margin-bottom:3rem}

/* ---------- photo bands ----------
   A section with a photograph behind it. The gradient is listed FIRST in the
   background shorthand so it paints on top of the image (CSS stacks background
   layers front-to-back, unlike z-index). One element, no pseudo-element and no
   z-index bookkeeping — unlike .hero, which needs ::after because the canvas
   has to sit between the photo and the text.

   background-attachment stays scroll: `fixed` is janky-to-broken on iOS Safari.

   Only narrative sections get a band. Anything showing a number — the stats,
   the thermometer, the tier prices — stays on flat navy, because contrast over
   a photograph varies pixel to pixel and cannot be verified against WCAG AA. */
.band{position:relative;background-color:var(--navy-dark);
  background-repeat:no-repeat;background-size:cover;background-position:center}
.band-dawn{background-image:
  linear-gradient(180deg,rgba(2,12,27,.72) 0%,rgba(2,12,27,.80) 50%,rgba(2,12,27,.90) 100%),
  url(../images/band-dawn.jpg)}
.band-deck{background-image:
  linear-gradient(180deg,rgba(2,12,27,.88) 0%,rgba(2,12,27,.88) 45%,rgba(2,12,27,.94) 100%),
  url(../images/band-deck.jpg);
  background-position:center 35%}

/* ---------- WHY — the founder's promise ---------- */
.why{background-color:var(--navy)}
.why-grid{display:grid;gap:3rem;grid-template-columns:1fr;align-items:center}
@media(min-width:62rem){.why-grid{grid-template-columns:.85fr 1fr}}
.why-photo{border-radius:1rem;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.why p{color:#C3D0DE;line-height:1.85;margin-bottom:1.3rem;font-size:1.04rem}
.pull{font-family:var(--display);font-size:clamp(1.3rem,3vw,1.7rem);line-height:1.4;
  color:var(--gold);font-weight:600;margin:0 0 1.6rem;letter-spacing:-.01em}
.sig{margin-top:1.6rem;font-size:.92rem;color:#8095AC}
.sig strong{color:var(--white);font-weight:600}

/* ---------- three generations ----------
   The photographs are the argument this section is making: the same man
   teaching one boy to fish in the 1970s and another forty years later. So they
   are content, not background -- a washed-out photo behind text would throw
   away the faces, which are the whole point.

   The three sources are mixed orientation (one landscape, two portrait), so a
   fixed aspect-ratio box with object-fit:cover squares them up rather than
   leaving a ragged row. 4/5 is tall enough to keep the two portrait frames
   from being cropped to a slot. */
.gens{display:grid;gap:1.25rem;grid-template-columns:1fr;margin:2.5rem 0 0}
@media(min-width:40rem){.gens{grid-template-columns:repeat(3,1fr);gap:1rem}}
.gen{margin:0;position:relative;border-radius:.85rem;overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.5)}
.gen img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
/* The 1980s frame is landscape (900x706). Forcing it into the same 4/5 portrait
   box as the other two cropped 19% off each side -- measured -- which cuts into
   Donald on the left and the horizon on the right. It keeps its own shape
   instead; a ragged row is a smaller cost than clipping the man the section is
   about. On the 3-up grid it self-aligns to the top. */
.gen-wide img{aspect-ratio:auto;height:auto}
@media(min-width:40rem){.gen-wide{align-self:start}}
.gen figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:2.25rem .9rem .85rem;font-size:.8rem;line-height:1.45;color:#E4EBF3;
  background:linear-gradient(transparent,rgba(2,12,27,.94))}
.gen figcaption b{display:block;font-family:var(--display);font-weight:600;
  color:var(--gold);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:.3rem}
.gens-note{margin:1.5rem 0 0;color:#8095AC;font-size:.93rem;line-height:1.7;
  max-width:44rem}

/* ---------- name meaning ---------- */
.kindle{background:var(--navy-dark);text-align:center}
.kindle .word{font-family:var(--display);font-weight:800;
  font-size:clamp(3rem,11vw,7rem);color:var(--gold);line-height:1;letter-spacing:-.03em}
.kindle .word em{font-style:normal;color:rgba(255,255,255,.16)}
.kindle p{margin:1.75rem auto 0;max-width:40rem;color:#B8C6D6;line-height:1.8;font-size:1.05rem}
.parts{display:grid;gap:1.25rem;grid-template-columns:1fr;max-width:46rem;
  margin:3rem auto 0;text-align:left}
@media(min-width:48rem){.parts{grid-template-columns:repeat(3,1fr);gap:1.75rem}}
.part{border-top:2px solid rgba(197,160,89,.35);padding-top:1.1rem}
.part .p-word{font-family:var(--display);font-weight:800;font-size:1.15rem;
  color:var(--gold);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem}
.part .p-def{margin:0;color:#B8C6D6;line-height:1.65;font-size:.95rem;max-width:none}

/* ---------- beneficiaries ---------- */
.who{background:var(--navy)}
.two{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.card{background:var(--navy-light);border:1px solid rgba(255,255,255,.08);
  border-radius:1rem;padding:2.25rem}
.card h3{font-family:var(--display);font-size:1.25rem;color:var(--gold);margin-bottom:.9rem}
.card p{color:#9FB0C4;line-height:1.7;font-size:.97rem}

/* ---------- the rod ---------- */
.rods{background:var(--navy-dark)}
.rod-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin-top:2.5rem}
.rod-shot{border-radius:1rem;overflow:hidden;position:relative;
  box-shadow:0 18px 46px rgba(0,0,0,.5)}
.rod-shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.rod-shot figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:2.5rem 1.25rem 1.1rem;font-size:.85rem;color:#E4EBF3;
  background:linear-gradient(transparent,rgba(2,12,27,.92))}

/* ---------- promise / closing ---------- */
.promise{background-color:var(--navy);text-align:center}
.promise blockquote{font-family:var(--display);font-weight:600;
  font-size:clamp(1.35rem,3.4vw,2.1rem);line-height:1.45;color:var(--white);
  max-width:46rem;margin:0 auto 1.5rem;letter-spacing:-.01em}
.promise cite{font-style:normal;color:#8095AC;font-size:.95rem}
.promise .cta{margin-top:2.75rem}

/* ---------- trust strip ---------- */
.trust{background:var(--navy-dark);padding:3.5rem 1.5rem;border-top:1px solid rgba(255,255,255,.07)}
.trust-row{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  max-width:70rem;margin:0 auto}
.trust-item{text-align:center}
.trust-item .k{font-family:var(--display);font-weight:600;color:var(--gold);
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.5rem}
.trust-item .v{color:#B8C6D6;font-size:.95rem;line-height:1.6}

/* ---------- impact ---------- */
.impact{background:var(--navy-dark)}
.stats{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.stat{background:linear-gradient(160deg,var(--navy-light),rgba(23,42,69,.35));
  border:1px solid rgba(197,160,89,.18);border-radius:1rem;padding:2rem 1.5rem}
.stat .n{font-family:var(--display);font-weight:800;font-size:2.6rem;color:var(--gold);
  line-height:1;letter-spacing:-.02em}
.stat .l{margin-top:.6rem;font-size:.9rem;color:#9FB0C4}

/* ---------- goal ---------- */
.goal{background:var(--navy)}
.meter-card{background:var(--navy-light);border:1px solid rgba(197,160,89,.2);
  border-radius:1.25rem;padding:2.5rem}
.meter{height:2.5rem;border-radius:999px;background:rgba(255,255,255,.07);
  overflow:hidden;position:relative;margin:1.5rem 0 1rem}
.meter-fill{height:100%;width:var(--fill,0%);border-radius:999px;min-width:5rem;
  background:linear-gradient(90deg,var(--gold-hi),var(--gold));
  display:flex;align-items:center;justify-content:flex-end;
  transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.meter-fill span{padding-right:1rem;font-family:var(--display);font-weight:600;
  color:var(--navy-dark);font-size:.95rem}
.asof{font-size:.85rem;color:#8095AC}

/* ---------- how ---------- */
.how{background:var(--navy-dark)}
.how .card p{margin-top:.9rem}
.tiers{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  margin-top:2.5rem}
.tier{background:var(--navy-light);border:1px solid rgba(255,255,255,.08);
  border-radius:.9rem;padding:1.5rem 1.25rem;text-align:center}
.tier.feature{border-color:rgba(197,160,89,.45);
  background:linear-gradient(165deg,rgba(197,160,89,.10),var(--navy-light))}
.tier .t-name{font-family:var(--display);font-weight:600;font-size:.82rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.tier .t-price{font-family:var(--display);font-weight:800;font-size:2.1rem;
  color:var(--white);line-height:1}
.tier .t-split{margin-top:.85rem;font-size:.83rem;color:#9FB0C4;line-height:1.55}
.tier .t-split b{color:#DCE5EF;font-weight:600}
.tier-note{margin-top:1.75rem;font-size:.9rem;color:#8095AC;line-height:1.7;
  max-width:44rem}
.pct{font-family:var(--display);font-weight:800;font-size:2.6rem;color:var(--white);line-height:1}
.pct small{font-size:.95rem;color:#8095AC;font-weight:400}

footer{background:var(--navy-dark);border-top:1px solid rgba(255,255,255,.08);
  padding:3rem 1.5rem;text-align:center;color:#6B7F96;font-size:.85rem;line-height:1.8}

/* Content is visible by default (decision D7).

   The element's resting state is opacity 1. The keyframes animate FROM transparent
   TO that resting state, with NO fill-mode — so if the animation never runs, the
   element is simply already visible.

   Do not add `both` or `forwards` here. `both` holds the from-state (opacity 0)
   before the animation starts; `forwards` only applies the end state after it
   finishes. Either makes visibility depend on the animation actually running,
   which is precisely the bug that hid five sections of the live site for weeks.

   Verified: with `animation: none` forced on an element, computed opacity is 1. */
.rise{animation:rise .9s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
  .meter-fill{transition:none}
  .scroll-cue::after{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- 7. INNER PAGES ---------- */

/* Shorter hero for pages below the homepage. The fixed nav overlaps the top of
   the page, so this needs top padding the homepage hero gets from min-height. */
.page-head{padding:9rem 1.5rem 4.5rem;text-align:center}
.page-head h1{font-family:var(--display);font-weight:800;line-height:1.06;
  font-size:clamp(2.1rem,5.5vw,3.6rem);letter-spacing:-.02em}
.page-head h1 .gold{color:var(--gold);display:block}
.page-head .lede{margin:1.4rem auto 0;max-width:38rem;font-size:1.05rem;
  line-height:1.7;color:#DCE5EF}
.page-head .eyebrow{margin-bottom:1rem}

/* Screen-reader-only. Used for table captions, which give assistive tech the
   table's purpose without repeating the visible heading above it. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Ledger tables on the giving page.
   Wide tables must scroll inside their own box rather than pushing the page
   sideways, so the table is display:block with overflow-x on narrow screens. */
.ledger{width:100%;border-collapse:collapse;margin-top:2rem;font-size:.95rem}
.ledger caption{text-align:left}
.ledger th,.ledger td{padding:.85rem 1rem;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.09)}
.ledger thead th{font-family:var(--display);font-weight:600;font-size:.74rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold);
  border-bottom-color:rgba(197,160,89,.35)}
.ledger tbody td{color:#C3D0DE}
.ledger .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger tfoot th,.ledger tfoot td{font-family:var(--display);font-weight:600;
  color:var(--white);border-bottom:0;padding-top:1.1rem}
.ledger-note{margin-top:1.1rem;font-size:.88rem;color:#8095AC;line-height:1.7}

@media(max-width:44rem){
  .ledger,.ledger tbody,.ledger tfoot,.ledger thead,.ledger tr{display:block}
  .ledger thead{display:none}
  .ledger tr{border:1px solid rgba(255,255,255,.1);border-radius:.7rem;
    padding:.4rem .2rem;margin-bottom:.9rem;background:rgba(255,255,255,.02)}
  .ledger td,.ledger th{border-bottom:0;padding:.4rem 1rem;display:flex;
    justify-content:space-between;gap:1rem}
  .ledger td::before{content:attr(data-label);color:#8095AC;font-size:.8rem;
    font-family:var(--display);letter-spacing:.06em;text-transform:uppercase}
  .ledger .num{text-align:right}
  .ledger tfoot tr{background:rgba(197,160,89,.1);border-color:rgba(197,160,89,.35)}
}

/* The trust strip's link back to the giving record. The claim "every figure
   traceable" is only honest while this link resolves to a real page -- see
   docs/redesign-plan-2026.md D5. */
.trust-item a{color:var(--gold);text-decoration:none;font-weight:600}
.trust-item a:hover{text-decoration:underline}

/* ---------- 8. TOURNAMENTS ---------- */
.band-cast{background-image:
  linear-gradient(180deg,rgba(2,12,27,.80) 0%,rgba(2,12,27,.86) 55%,rgba(2,12,27,.94) 100%),
  url(images/band-cast.jpg)}

.tgrid{display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:2.5rem}
@media(min-width:40rem){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.tgrid{grid-template-columns:repeat(3,1fr)}}

.tcard{background:var(--navy-light);border:1px solid rgba(255,255,255,.08);
  border-radius:1rem;padding:1.75rem;display:flex;flex-direction:column}
.tcard-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:1rem;margin-bottom:.9rem}
.tcard h3{font-family:var(--display);font-size:1.2rem;color:var(--white);margin:0}
.tcard-dates{margin:.3rem 0 0;font-size:.85rem;color:#8095AC}
.tcard-blurb{color:#9FB0C4;line-height:1.65;font-size:.95rem;margin:0 0 1.1rem}
.tcard-meta{display:grid;gap:.5rem;margin:0 0 1.25rem;font-size:.87rem}
.tcard-meta div{display:flex;gap:.6rem}
.tcard-meta dt{color:#8095AC;min-width:3.6rem}
.tcard-meta dd{margin:0;color:#C3D0DE}
.tcard-link{margin-top:auto;color:var(--gold);text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:.9rem}
.tcard-link:hover{text-decoration:underline}

/* Status badge. The label is written by JS from the data-start/data-end dates,
   so the page stays truthful as the season advances with no edit. The markup
   ships saying "Upcoming"; JS corrects it. Worst case (no JS) a completed
   tournament reads as upcoming -- which is why the dates are always shown too. */
.badge{font-family:var(--display);font-weight:600;font-size:.68rem;
  letter-spacing:.11em;text-transform:uppercase;padding:.4rem .7rem;
  border-radius:2rem;white-space:nowrap;border:1px solid rgba(255,255,255,.25);
  color:#C3D0DE}
.badge[data-state="live"]{background:var(--gold);color:var(--navy-dark);border-color:transparent}
.badge[data-state="done"]{opacity:.65}
.badge[data-state="next"]{border-color:rgba(197,160,89,.5);color:var(--gold)}

.result{background:var(--navy-light);border:1px solid rgba(255,255,255,.08);
  border-radius:1rem;padding:1.75rem;margin-top:1.25rem}
.result h3{font-family:var(--display);font-size:1.15rem;color:var(--gold);margin:0}
.result-dates{margin:.3rem 0 1.25rem;font-size:.85rem;color:#8095AC}
.podiums{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:40rem){.podiums{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}}
.podium h4{font-family:var(--display);font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:#8095AC;margin:0 0 .7rem;font-weight:600}
.podium ol{list-style:none;margin:0;padding:0}
.podium li{display:flex;align-items:baseline;gap:.6rem;padding:.4rem 0;
  color:#C3D0DE;font-size:.94rem;border-bottom:1px solid rgba(255,255,255,.06)}
.podium li:last-child{border-bottom:0}
.podium .pl{font-family:var(--display);font-weight:700;color:var(--gold);
  min-width:1.1rem}
.podium .pin{margin-left:auto;font-variant-numeric:tabular-nums;color:#8095AC;
  font-size:.88rem;white-space:nowrap}

/* Homepage season strip — a compact summary that links through to the full
   tournaments page. Repetition with that page is deliberate: a visitor should
   be able to see where the season stands without a second click. */
.season{background:var(--navy)}
.season-strip{list-style:none;margin:2.5rem 0 2.5rem;padding:0;display:grid;
  gap:.6rem;grid-template-columns:1fr}
@media(min-width:48rem){.season-strip{grid-template-columns:repeat(5,1fr);gap:.75rem}}
.season-strip li{background:var(--navy-light);border:1px solid rgba(255,255,255,.08);
  border-radius:.8rem;padding:1.1rem;display:flex;flex-direction:column;
  align-items:flex-start;gap:.7rem}
.season-strip .s-name{font-family:var(--display);font-weight:600;
  color:var(--white);font-size:.97rem;line-height:1.3}

/* ---------- 9. CONTACT ---------- */
.contact-grid{display:grid;gap:3rem;grid-template-columns:1fr;align-items:start}
@media(min-width:56rem){.contact-grid{grid-template-columns:1.3fr .8fr;gap:4rem}}
.cform .field{margin-bottom:1.4rem}
.cform label{display:block;font-family:var(--display);font-weight:600;
  font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.5rem}
.cform input,.cform select,.cform textarea{width:100%;font:inherit;
  font-size:1rem;color:var(--white);background:var(--navy-light);
  border:1px solid rgba(255,255,255,.16);border-radius:.6rem;padding:.85rem 1rem}
.cform textarea{resize:vertical;min-height:8rem;line-height:1.6}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,160,89,.22)}
.cform select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
    linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 1.35rem,calc(100% - .8rem) 1.35rem;
  background-size:.4rem .4rem,.4rem .4rem;background-repeat:no-repeat;
  padding-right:2.75rem}
.cform button{border:0;cursor:pointer;font-size:.95rem}
/* Formspree honeypot: must stay in the DOM and stay unreachable. */
.gotcha{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;opacity:0!important;pointer-events:none}

.contact-aside{background:var(--navy-light);border:1px solid rgba(255,255,255,.08);
  border-radius:1rem;padding:2rem}
.contact-aside h2{font-family:var(--display);font-size:1.15rem;color:var(--white);
  margin-bottom:1.5rem}
.contact-list{margin:0}
.contact-list div{margin-bottom:1.25rem}
.contact-list dt{font-family:var(--display);font-weight:600;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:#8095AC;margin-bottom:.35rem}
.contact-list dd{margin:0;color:#C3D0DE;font-size:.95rem;line-height:1.65}
.contact-list a{color:var(--gold);text-decoration:none}
.contact-list a:hover{text-decoration:underline}
.contact-note{margin-top:1.5rem;padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.88rem;color:#8095AC;line-height:1.7}

/* Money-flow table on the giving page. Raised, then every deduction, then what
   is left -- so a reader can see the arithmetic close instead of wondering
   about the gap between "raised" and "given". */
.flow{margin-top:2.5rem;background:var(--navy-light);
  border:1px solid rgba(255,255,255,.08);border-radius:1rem;padding:2rem}
.flow h3{font-family:var(--display);font-size:1.1rem;color:var(--white);margin-bottom:.5rem}
.flow-table{margin-top:1.25rem}
.flow-table td:first-child,.flow-table th:first-child{color:#C3D0DE}
.flow-table .neg{color:#9FB0C4}
.flow-table tfoot th{font-size:.95rem;line-height:1.5;text-align:left}
.flow .ledger-note strong{color:var(--gold)}
@media(max-width:44rem){
  .flow{padding:1.4rem}
  .flow-table td::before{max-width:60%}
}

/* In-kind donor credit. States what was given, never a dollar value -- we do
   not value in-kind gifts (see content/templates/04-in-kind-donation.md). */
.sponsor{margin-top:2rem;padding:1.5rem 1.75rem;border-radius:.9rem;
  background:linear-gradient(165deg,rgba(197,160,89,.10),var(--navy-light));
  border:1px solid rgba(197,160,89,.35)}
.sponsor-k{margin:0;font-family:var(--display);font-weight:600;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:#8095AC}
.sponsor-v{margin:.3rem 0 .6rem;font-family:var(--display);font-weight:800;
  font-size:1.35rem;line-height:1}
.sponsor-v a{color:var(--gold);text-decoration:none}
.sponsor-v a:hover{text-decoration:underline}
.sponsor-d{margin:0;color:#9FB0C4;font-size:.92rem;line-height:1.7}

/* Related-party disclosure under a donor credit. Small but not hidden -- the
   point is that the relationship is stated as a governance fact, not left to be
   inferred from the founder's first-person narrative above it. */
.sponsor-rel{margin:.9rem 0 0;padding-top:.9rem;
  border-top:1px solid rgba(197,160,89,.25);
  color:#8095AC;font-size:.82rem;line-height:1.65}

/* Florida Ch. 496 solicitation disclosure. Required wording, set small but
   legible -- it must be readable, not buried. */
.fdacs{margin:1.25rem auto 0;max-width:52rem;font-size:.68rem;line-height:1.6;
  color:#5F7285;letter-spacing:.01em}
.footer-links-row{margin:.9rem 0 0;font-size:.85rem}
.footer-links-row a{color:#8095AC;text-decoration:none}
.footer-links-row a:hover{color:var(--gold);text-decoration:underline}

/* ---------- 10. RULES PAGE ----------
   A dense reference document, not a marketing page. Optimised for finding a
   specific clause quickly: generous line height, clear heading hierarchy, and
   tables that scroll rather than push the page sideways. */
.rules-body{background:var(--navy);padding-top:2rem}
.rules-content{color:#C3D0DE;line-height:1.8}
.rules-content h2{font-family:var(--display);font-size:1.35rem;color:var(--gold);
  margin:3rem 0 1rem;padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.1);scroll-margin-top:5rem}
.rules-content h2:first-of-type{border-top:0;margin-top:0;padding-top:0}
.rules-content h3{font-family:var(--display);font-size:1.02rem;color:var(--white);
  margin:1.75rem 0 .6rem}
.rules-content p{margin:0 0 1rem;font-size:.97rem}
.rules-content ul{margin:0 0 1.25rem;padding-left:1.15rem}
.rules-content li{margin-bottom:.5rem;font-size:.97rem}
.rules-content strong{color:var(--white)}
.rules-content a{color:var(--gold)}
.rules-table{width:100%;border-collapse:collapse;margin:1rem 0 1.5rem;
  font-size:.9rem;display:block;overflow-x:auto;white-space:nowrap}
.rules-table th,.rules-table td{padding:.6rem .85rem;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.09)}
.rules-table thead th{font-family:var(--display);font-weight:600;font-size:.72rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--gold);
  border-bottom-color:rgba(197,160,89,.35)}
@media(min-width:52rem){.rules-table{white-space:normal}}

/* ---------- 11. LINKS ----------
   Body links had no rule at all, so they fell back to the browser default:
   blue unvisited and PURPLE visited, both close to unreadable on navy. Gold on
   navy measures 5.9:1 against --navy and 8.9:1 against --navy-dark, so it
   clears WCAG AA for body text in either section.

   :visited is set explicitly to the same colour. Without it the browser keeps
   its own purple, which is the bug being fixed here -- and :visited can only be
   restyled for colour, so this is the whole fix.

   Buttons, nav, footer and card links keep their own rules; this is the
   fallback for prose links, which is where the problem was. */
.rules-content a,
main p a:not([class]),
main li a:not([class]),
main dd a:not([class]),
.sub a, .lede a, .tier-note a, .ledger-note a, .reporting-note a,
.sponsor-d a, .contact-list a{
  color:var(--gold);
  text-decoration:underline;
  text-underline-offset:.15em;
  text-decoration-thickness:.06em;
  text-decoration-color:rgba(197,160,89,.45)}

.rules-content a:visited,
main p a:not([class]):visited,
main li a:not([class]):visited,
main dd a:not([class]):visited,
.sub a:visited, .lede a:visited, .tier-note a:visited, .ledger-note a:visited,
.reporting-note a:visited, .sponsor-d a:visited, .contact-list a:visited{
  color:var(--gold)}

.rules-content a:hover,
main p a:not([class]):hover,
main li a:not([class]):hover,
main dd a:not([class]):hover,
.sub a:hover, .lede a:hover, .tier-note a:hover, .ledger-note a:hover,
.reporting-note a:hover, .sponsor-d a:hover, .contact-list a:hover{
  color:var(--gold-hi);
  text-decoration-color:var(--gold-hi)}

/* Visible keyboard focus on every link and button. */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold-hi);
  outline-offset:3px;
  border-radius:.2rem}

/* A framed notice for information an angler must not miss before paying --
   what it costs, what is required. Deliberately not a card: cards read as
   optional reading, this does not. */
.notice{margin:2rem 0 0;padding:1.4rem 1.6rem;border-radius:.9rem;
  background:rgba(197,160,89,.08);border:1px solid rgba(197,160,89,.35)}
.notice p{margin:0 0 .8rem;color:#DCE5EF;line-height:1.7;font-size:.97rem}
.notice p:last-child{margin-bottom:0}
.notice strong{color:var(--white)}