/* ══ AOG-CROSSWALK-V1 (2026-09-25) — the crosswalk documents, as pages ═════════
   Jimmy: "Can all the crosswalk documents get a facelift and updated." The ten
   crosswalks were PDFs; each is now a page in the site's stained glass, readable
   on a phone first, printable to paper. One stylesheet for all ten.
   Markup contract (see xw-casel.html):
     <main class="xw" style="--gl:#2E8B57">
       <header class="xw-hero"> .xw-ey  h1  .xw-lede  .xw-meta </header>
       <nav class="xw-toc"> a… </nav>
       <section class="xw-sec" id="…"> <h2> … <table class="xw-t"> with
         data-label on every <td> (the column heading), so a phone stacks rows
         into cards. .xw-note for a callout; .xw-quote for scripted words;
         .xw-pill for a pillar / band tag. </section>
       <footer class="xw-foot"> </footer>
     </main> */
.xw { --lead:#1E1F22; --hair:rgba(242,201,100,.45); --ink:#15202E; --soft:#46506E; --card:#FFFDF8; --wash:#F6EFE0;
  max-width:1060px; margin:0 auto; padding:18px 16px 60px; color:var(--ink);
  font:16px/1.6 -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif; }
html[data-theme="dark"] .xw { --ink:#F4EEE2; --soft:#C8D4E2; --card:#13314F; --wash:#0F2A45; }
.xw *, .xw *::before, .xw *::after { box-sizing:border-box; }

.xw-hero { position:relative; overflow:hidden; margin:8px 0 18px; padding:30px 22px 24px; border-radius:22px;
  background:radial-gradient(90% 70% at 15% 0%, color-mix(in srgb, var(--gl) 22%, transparent), transparent 65%), var(--card);
  border:3px solid var(--lead); box-shadow:0 0 0 1px var(--hair), inset 0 8px 0 var(--gl), 0 24px 50px -32px rgba(0,0,0,.6); }
.xw-hero::after { content:""; position:absolute; top:22px; right:22px; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.75), var(--gl) 50%);
  box-shadow:0 0 0 2px var(--lead), 0 0 0 3px var(--hair), 0 0 14px var(--gl); }
.xw-ey { font:800 11px/1.3 Inter, sans-serif; letter-spacing:.18em; text-transform:uppercase; color:#9A6F24; margin:0 0 8px; }
html[data-theme="dark"] .xw-ey { color:#E7C46A; }
.xw h1 { font:600 clamp(28px, 6vw, 44px)/1.12 Fraunces, Georgia, serif; margin:0 0 12px; letter-spacing:-.01em; }
.xw-lede { font-size:17px; color:var(--soft); max-width:68ch; margin:0; }
.xw-meta { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; }
.xw-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font:700 12px/1.4 Inter, sans-serif;
  border:1.5px solid color-mix(in srgb, var(--gl) 55%, transparent); background:color-mix(in srgb, var(--gl) 10%, transparent); color:var(--ink); }

.xw-toc { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.xw-toc a { padding:8px 14px; border-radius:12px; text-decoration:none; font:700 13px/1.3 Inter, sans-serif; color:var(--ink);
  border:1.5px solid color-mix(in srgb, var(--gl) 50%, transparent); background:color-mix(in srgb, var(--gl) 8%, var(--card)); }
.xw-toc a:hover { background:color-mix(in srgb, var(--gl) 20%, var(--card)); }

.xw-sec { margin:0 0 22px; padding:22px 20px; border-radius:18px; background:var(--card);
  border:1px solid var(--hair); box-shadow:0 18px 40px -30px rgba(0,0,0,.6); scroll-margin-top:70px; }
.xw-sec h2 { font:600 clamp(22px, 4.5vw, 28px)/1.2 Fraunces, Georgia, serif; margin:0 0 6px; }
.xw-sec h2::before { content:""; display:block; width:54px; height:5px; border-radius:3px; margin:0 0 12px;
  background:linear-gradient(90deg, var(--gl), color-mix(in srgb, var(--gl) 40%, transparent)); box-shadow:0 0 10px var(--gl); }
.xw-sec h3 { font:700 17px/1.3 Fraunces, Georgia, serif; margin:18px 0 6px; }
.xw-sec p { margin:8px 0; }
.xw-sec > p:first-of-type { color:var(--soft); }
.xw-sec ul, .xw-sec ol { margin:8px 0; padding-left:1.3em; }
.xw-sec li { margin:4px 0; }

.xw-t { width:100%; border-collapse:separate; border-spacing:0; margin:14px 0 4px; font-size:15px; }
.xw-t th { text-align:left; vertical-align:bottom; font:800 11px/1.3 Inter, sans-serif; letter-spacing:.12em; text-transform:uppercase;
  color:#9A6F24; padding:8px 12px; border-bottom:2px solid var(--gl); }
html[data-theme="dark"] .xw-t th { color:#E7C46A; }
.xw-t td { vertical-align:top; padding:12px; border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.xw-t tr:nth-child(even) td { background:color-mix(in srgb, var(--gl) 5%, transparent); }
.xw-t td:first-child { font-weight:700; }
.xw-t td:first-child b, .xw-t td:first-child strong { font-family:Fraunces, Georgia, serif; }

.xw-note { margin:14px 0; padding:14px 16px; border-radius:14px; border:1.5px solid color-mix(in srgb, var(--gl) 45%, transparent);
  background:color-mix(in srgb, var(--gl) 8%, var(--card)); box-shadow:inset 5px 0 0 var(--gl); }
.xw-note b:first-child { display:block; font:800 11px/1.3 Inter, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#9A6F24; margin:0 0 4px; }
html[data-theme="dark"] .xw-note b:first-child { color:#E7C46A; }
.xw-quote { margin:12px 0; padding:10px 16px; border-left:4px solid #C9A24A; font:italic 17px/1.5 Fraunces, Georgia, serif; }

.xw-foot { margin:26px 0 0; padding:16px 0 0; border-top:1px solid var(--hair); color:var(--soft); font-size:13px; }
.xw-foot a, .xw a { color:inherit; text-decoration-color:#C9A24A; text-underline-offset:3px; }
.xw-bar { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 14px; }
.xw-btn { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 18px; border-radius:999px; cursor:pointer;
  font:700 14px Inter, sans-serif; text-decoration:none; color:var(--ink); background:transparent; border:1.5px solid #C9A24A; }
.xw-btn.solid { background:var(--gl); color:#fff; border-color:var(--lead);
  background-image:radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%); }

/* phones: every table row becomes a small card, each cell labelled */
@media (max-width:700px) {
  .xw-t, .xw-t tbody, .xw-t tr, .xw-t td { display:block; width:100%; }
  .xw-t thead { display:none; }
  .xw-t tr { margin:0 0 12px; padding:6px 4px; border-radius:14px; border:1.5px solid color-mix(in srgb, var(--gl) 40%, transparent);
    background:color-mix(in srgb, var(--gl) 5%, var(--card)); box-shadow:inset 0 4px 0 var(--gl); }
  .xw-t tr:nth-child(even) td { background:transparent; }
  .xw-t td { border:0; padding:6px 12px; }
  .xw-t td[data-label]::before { content:attr(data-label); display:block; font:800 10px/1.3 Inter, sans-serif; letter-spacing:.12em;
    text-transform:uppercase; color:#9A6F24; margin:0 0 2px; }
  html[data-theme="dark"] .xw-t td[data-label]::before { color:#E7C46A; }
  .xw-sec { padding:18px 14px; }
  .xw-hero { padding:24px 16px 20px; }
}

@media print {
  .aogtop, .aogtop-spacer, .xw-toc, .xw-bar, .no-print { display:none !important; }
  body { background:#fff !important; }
  .xw { --ink:#000; --soft:#333; --card:#fff; max-width:none; padding:0; }
  .xw-hero, .xw-sec { box-shadow:none; border:1px solid #999; break-inside:auto; }
  .xw-hero { border-top:6px solid var(--gl); }
  .xw-t tr { break-inside:avoid; }
  .xw-t th { color:#000; }
}