/* ═══════════════════════════════════════════════════════════════
   THE L.A.W. FOUNDATION — shared stylesheet
   Lisa Ann Woods Foundation

   PALETTE: the San Francisco 49ers. Her team.
     Scarlet #AA0000 · Gold #B3995D · Black #0A0A0A · White #FFFFFF

   Edit this ONE file and every page re-skins.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── the four ── */
  --red:#AA0000;
  --red-lt:#C8102E;
  --red-deep:#6B0000;
  --gold:#B3995D;
  --gold-lt:#D4BC85;
  --gold-deep:#8A7444;
  --black:#0A0A0A;
  --white:#FFFFFF;

  /* ── working greys, biased warm toward the gold ── */
  --ink:#141312;
  --panel:#161514;
  --panel-2:#1F1D1B;
  --line:#332F2B;
  --line-2:#4A443D;
  --bone:#F4F1EC;
  --bone-dim:#B5AEA3;
  --bone-faint:#7C766D;

  --ground:var(--black);
  --nav-h:64px;
  --shadow:0 24px 60px -30px rgba(0,0,0,.95);
}

@media (prefers-color-scheme:light){
  :root{
    --ground:#FAF8F4; --panel:#FFFFFF; --panel-2:#F2EEE6;
    --line:#E0D9CC; --line-2:#C5BAA6;
    --bone:#16130F; --bone-dim:#544C41; --bone-faint:#867C6E;
    --gold:#8A7038; --gold-lt:#6B561F; --gold-deep:#A89264;
    --red:#9A0000; --red-lt:#AA0000;
    --shadow:0 20px 44px -28px rgba(70,40,20,.34);
  }
}
:root[data-theme="dark"]{
  --ground:#0A0A0A; --panel:#161514; --panel-2:#1F1D1B;
  --line:#332F2B; --line-2:#4A443D;
  --bone:#F4F1EC; --bone-dim:#B5AEA3; --bone-faint:#7C766D;
  --gold:#B3995D; --gold-lt:#D4BC85; --gold-deep:#8A7444;
  --red:#AA0000; --red-lt:#C8102E;
  --shadow:0 24px 60px -30px rgba(0,0,0,.95);
}
:root[data-theme="light"]{
  --ground:#FAF8F4; --panel:#FFFFFF; --panel-2:#F2EEE6;
  --line:#E0D9CC; --line-2:#C5BAA6;
  --bone:#16130F; --bone-dim:#544C41; --bone-faint:#867C6E;
  --gold:#8A7038; --gold-lt:#6B561F; --gold-deep:#A89264;
  --red:#9A0000; --red-lt:#AA0000;
  --shadow:0 20px 44px -28px rgba(70,40,20,.34);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{
  margin:0; background:var(--ground); color:var(--bone);
  font-family:ui-serif,Georgia,"Times New Roman",serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
.wrap{width:100%;max-width:1060px;margin-inline:auto;padding-inline:clamp(20px,5vw,44px)}
img{max-width:100%;height:auto}

/* ── NAV ─────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(10,10,10,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
:root[data-theme="light"] .nav,
@media (prefers-color-scheme:light){.nav{background:rgba(250,248,244,.94)}}
.nav__in{display:flex;align-items:center;gap:18px;height:var(--nav-h)}
.nav__brand{
  display:flex;align-items:baseline;gap:9px;text-decoration:none;border:none;margin-right:auto;
}
.nav__law{
  font-family:ui-sans-serif,system-ui,sans-serif;font-weight:900;font-size:1.12rem;
  letter-spacing:.04em;color:var(--red-lt);
  -webkit-text-stroke:.4px var(--gold);
}
.nav__sub{
  font-family:ui-monospace,Menlo,monospace;font-size:.56rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);
}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav a{
  font-family:ui-monospace,Menlo,monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-dim);text-decoration:none;border:none;
  padding:8px 0;transition:color .16s;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--gold-lt)}
.nav a[aria-current="page"]{border-bottom:2px solid var(--red-lt)}
.nav__toggle{display:none;background:none;border:1px solid var(--line-2);color:var(--bone);
  border-radius:3px;padding:9px 12px;font-size:.9rem;cursor:pointer;min-height:44px}
@media(max-width:760px){
  .nav ul{
    display:none;position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;gap:0;background:var(--panel);border-bottom:1px solid var(--line);
    padding:8px 20px 16px;
  }
  .nav ul.open{display:flex}
  .nav ul li a{display:block;padding:15px 0;border-bottom:1px solid var(--line);font-size:.74rem}
  .nav__toggle{display:block}
}

/* ── TYPE ────────────────────────────────────────── */
.eyebrow{
  font-family:ui-monospace,Menlo,monospace;font-size:.64rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);margin:0 0 14px;
  display:flex;align-items:center;gap:14px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}

h1,h2,h3{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
h1{font-weight:900;letter-spacing:-.022em;line-height:1.03;
   font-size:clamp(2rem,6vw,3.5rem);margin:0 0 18px;text-wrap:balance}
h2{font-weight:800;letter-spacing:-.016em;line-height:1.08;
   font-size:clamp(1.6rem,4.2vw,2.6rem);margin:0 0 16px;text-wrap:balance}
h3{font-weight:700;font-size:1.06rem;margin:0 0 8px}
p{margin:0 0 16px;max-width:66ch}
.lead{font-size:clamp(1.02rem,2.1vw,1.18rem);color:var(--bone-dim)}
a{color:var(--gold-lt);text-decoration:none;border-bottom:1px solid var(--line-2)}
a:hover{color:var(--bone);border-color:var(--gold)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
strong,b{color:var(--bone);font-weight:600}

section{padding:clamp(50px,8vw,96px) 0}
.section--panel{background:var(--panel);border-block:1px solid var(--line)}
.section--red{
  background:linear-gradient(180deg,transparent,rgba(170,0,0,.16) 55%,transparent),var(--panel-2);
  border-block:1px solid var(--line);
}

/* ── PAGE HEADER (inner pages) ───────────────────── */
.pagehead{
  padding:clamp(46px,8vw,90px) 0 clamp(30px,5vw,54px);
  background:
    radial-gradient(110% 80% at 50% -30%, rgba(170,0,0,.30), transparent 62%),
    radial-gradient(70% 50% at 85% 0%, rgba(179,153,93,.10), transparent 60%);
  border-bottom:1px solid var(--line);
}

/* ── HERO (home) ─────────────────────────────────── */
.hero{
  position:relative;padding:clamp(56px,11vw,132px) 0 clamp(44px,7vw,88px);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(170,0,0,.34), transparent 62%),
    radial-gradient(80% 60% at 84% 8%, rgba(179,153,93,.12), transparent 60%);
  border-bottom:1px solid var(--line);overflow:hidden;
}
.hero__mark{
  font-family:ui-sans-serif,system-ui,sans-serif;font-weight:900;
  font-size:clamp(4.6rem,18vw,13rem);line-height:.82;letter-spacing:-.03em;
  display:flex;gap:clamp(8px,3vw,30px);margin:0 0 8px;user-select:none;
  color:var(--red);-webkit-text-stroke:2px var(--gold);
  text-shadow:0 0 40px rgba(170,0,0,.4);
}
.hero__name{
  font-family:ui-monospace,Menlo,monospace;font-size:clamp(.66rem,1.8vw,.82rem);
  letter-spacing:.32em;text-transform:uppercase;color:var(--gold);
  margin:0 0 clamp(24px,5vw,42px);
}
.hero__quote{
  font-size:clamp(1.4rem,4.4vw,2.5rem);line-height:1.22;font-style:italic;
  color:var(--white);margin:0 0 16px;max-width:22ch;text-wrap:balance;
}
.hero__quote b{font-style:normal;font-weight:400;color:var(--gold-lt)}
.attrib{
  font-family:ui-monospace,Menlo,monospace;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-faint);margin:0;
}

/* ── BUTTONS ─────────────────────────────────────── */
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,5vw,40px)}
.btn{
  font-family:ui-monospace,Menlo,monospace;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;padding:15px 26px;border-radius:2px;border:1px solid transparent;
  cursor:pointer;transition:.18s;display:inline-block;min-height:48px;
}
a.btn{border-bottom-width:1px}
.btn--red{background:var(--red);color:var(--white);font-weight:600;border-color:var(--red)}
.btn--red:hover{background:var(--red-lt);border-color:var(--red-lt);color:var(--white)}
.btn--gold{background:var(--gold);color:#15100A;font-weight:600;border-color:var(--gold)}
.btn--gold:hover{background:var(--gold-lt);border-color:var(--gold-lt);color:#15100A}
.btn--ghost{background:transparent;border-color:var(--line-2);color:var(--bone)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-lt)}

/* ── THE ACROSTIC PILLARS ────────────────────────── */
.pillar{display:grid;gap:clamp(14px,3vw,36px);padding:clamp(28px,5vw,44px) 0;
  border-top:1px solid var(--line)}
@media(min-width:760px){.pillar{grid-template-columns:minmax(116px,.22fr) 1fr;align-items:start}}
.pillar__letter{
  font-family:ui-sans-serif,system-ui,sans-serif;font-weight:900;
  font-size:clamp(3.6rem,10vw,6.8rem);line-height:.8;letter-spacing:-.04em;margin:0;
  color:var(--red);-webkit-text-stroke:1.5px var(--gold);
}
.pillar__word{font-family:ui-monospace,Menlo,monospace;font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:10px 0 0}
.pillar__lyric{font-style:italic;color:var(--gold-lt);font-size:1.04rem;margin:0 0 14px}
.pillar ul{margin:14px 0 0;padding-left:18px;color:var(--bone-dim)}
.pillar li{margin:7px 0;max-width:60ch}

/* ── CARDS / GRIDS ───────────────────────────────── */
.grid{display:grid;gap:16px}
.grid--3{grid-template-columns:1fr}
@media(min-width:720px){.grid--3{grid-template-columns:repeat(3,1fr)}}
.grid--2{grid-template-columns:1fr}
@media(min-width:640px){.grid--2{grid-template-columns:repeat(2,1fr)}}
.card{border:1px solid var(--line);border-radius:5px;background:var(--panel);padding:22px}
.card--red{border-top:3px solid var(--red)}
.card--gold{border-top:3px solid var(--gold)}
.card .k{font-family:ui-monospace,Menlo,monospace;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.card p{font-size:.94rem;color:var(--bone-dim);margin:0}
.card p+p{margin-top:9px}

.person{border:1px solid var(--line);border-left:3px solid var(--red);
  border-radius:0 5px 5px 0;background:var(--panel);padding:18px 20px}
.person h3{margin:0 0 3px;font-size:1rem}
.person .role{font-family:ui-monospace,Menlo,monospace;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.person p{margin:0;font-size:.9rem;color:var(--bone-dim)}

/* ── QUOTE / VERSE ───────────────────────────────── */
.verse{border-left:3px solid var(--red);padding:4px 0 4px 22px;margin:0 0 22px;
  font-style:italic;color:var(--bone-dim);font-size:1.02rem;line-height:1.75}
.verse p{margin:0 0 10px;max-width:none}
.verse p:last-of-type{margin:0}
.verse cite{display:block;margin-top:14px;font-style:normal;
  font-family:ui-monospace,Menlo,monospace;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-faint)}

.ticks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.ticks li{padding-left:26px;position:relative;color:var(--bone-dim);max-width:64ch}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:3px;background:var(--red)}

/* ── EDITOR SLOT (the fill-me-in blocks) ─────────── */
.slot{border:1px dashed var(--line-2);border-radius:5px;padding:20px 22px;
  background:rgba(179,153,93,.05);margin-top:18px}
.slot .k{font-family:ui-monospace,Menlo,monospace;font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.slot p{margin:0;font-size:.88rem;color:var(--bone-dim)}

/* ── FOOTER ──────────────────────────────────────── */
footer{border-top:3px solid var(--red);padding:clamp(34px,6vw,56px) 0 42px;background:var(--panel)}
.foot{display:grid;gap:24px}
@media(min-width:760px){.foot{grid-template-columns:1.5fr 1fr 1fr}}
.foot h4{font-family:ui-monospace,Menlo,monospace;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.foot p{font-size:.9rem;color:var(--bone-dim);margin:0 0 8px}
.foot a{display:block;font-size:.9rem;color:var(--bone-dim);border:none;padding:9px 0}
.foot a:hover{color:var(--gold-lt)}
.legal{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
  font-family:ui-monospace,Menlo,monospace;font-size:.6rem;letter-spacing:.05em;
  color:var(--bone-faint);line-height:1.95}


/* ---- photographs of her ---- */
.fig { margin: 0 0 var(--s5, 2rem); }
.fig img {
  width: 100%; height: auto; display: block;
  border-radius: 2px;
}
.fig figcaption {
  margin-top: .7rem; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; opacity: .62;
}
.fig--portrait { max-width: 30rem; }
.figrow { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .figrow { grid-template-columns: 1fr 1fr; gap: 1.6rem; } }
.figrow .fig { margin-bottom: 0; }