:root{ --paper:#F5F4F0; --card:#FBFAF6; --photo:#E2E4E5; --graphite:#2E2D2A; --lead:#55534D; --line:rgba(46,45,42,.18); --red:#A8322A; --dark:#1F1E1C;
  --display:"Big Shoulders Display", Impact, "Arial Narrow", sans-serif; --hand:"Caveat", "Segoe Print", cursive; --body:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:light; box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#F5F4F0; } }
:root[data-theme="dark"]{ --paper:#F5F4F0; }
*,*::before,*::after{ box-sizing:inherit; } html{ scroll-padding-top:env(safe-area-inset-top,0px); }
body{ margin:0; background:var(--paper); color:var(--graphite); font-family:var(--body); -webkit-font-smoothing:antialiased; }
a{ color:inherit; } :focus-visible{ outline:2px solid var(--graphite); outline-offset:3px; }
.top{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px clamp(20px,5vw,72px); padding-top:calc(16px + env(safe-area-inset-top,0px)); background:rgba(245,244,240,.94); border-bottom:1px solid var(--line); }
.logo{ font-family:var(--display); font-weight:900; font-size:28px; letter-spacing:.1em; text-decoration:none; }
.nav{ display:flex; gap:28px; font-size:15px; font-weight:500; } .nav a{ text-decoration:none; } .nav a[aria-current]{ text-decoration:underline; text-underline-offset:6px; }
.tools{ display:flex; gap:20px; font-size:15px; font-weight:500; } .tools a{ text-decoration:none; }
.crumbs{ padding:18px clamp(20px,5vw,72px) 0; font-size:14px; color:var(--lead); } .crumbs a{ text-decoration:none; } .crumbs span{ margin:0 8px; }
header.hero{ padding:18px clamp(20px,5vw,72px) 8px; }
.hero .k{ font-family:var(--hand); font-size:28px; color:var(--red); }
.hero h1{ margin:2px 0 10px; font-family:var(--display); font-weight:900; font-size:clamp(52px,7vw,96px); line-height:.9; text-transform:uppercase; }
.hero p{ margin:0; max-width:40em; font-size:17px; line-height:1.6; color:var(--lead); }
.bname{ margin:44px clamp(20px,5vw,72px) 0; padding:14px 22px; background:var(--dark); color:var(--paper); font-family:var(--display); font-weight:900; font-size:clamp(34px,4.4vw,56px); letter-spacing:.04em; text-transform:uppercase; line-height:1; }
.grp{ padding:30px clamp(20px,5vw,72px) 10px; }
.grp h2{ margin:0 0 16px; padding-bottom:10px; border-bottom:1.5px solid var(--graphite); font-family:var(--display); font-weight:800; font-size:30px; letter-spacing:.02em; text-transform:uppercase; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:26px; }
.card{ display:flex; flex-direction:column; text-decoration:none; }
.cimg{ aspect-ratio:1/1.05; background:var(--photo); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cimg img{ width:92%; height:92%; object-fit:contain; transition:transform .3s ease; }
.card:hover .cimg img{ transform:scale(1.04); }
.kick{ margin-top:12px; font-family:var(--hand); font-size:21px; color:var(--red); }
.card h3{ margin:0; font-family:var(--display); font-weight:800; font-size:30px; text-transform:uppercase; line-height:1; }
.card p{ margin:6px 0 0; font-size:15px; color:var(--lead); } .card .n{ margin-top:2px; font-size:14px; }
.card:hover h3{ text-decoration:underline; text-underline-offset:4px; }
footer{ margin-top:60px; background:var(--dark); color:#A9A59C; padding:40px clamp(20px,5vw,72px); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:14px; }
footer b{ font-family:var(--display); font-weight:900; font-size:28px; letter-spacing:.1em; color:#ECE9E1; }
@media (max-width:900px){ .nav{ display:none; } .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .card h3{ font-size:24px; } }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }
/* BP-INDEX */
:root:root:root{ --paper:#EDE3C6; --card:#F2E6C6; --photo:#F3F2EE; --graphite:#13243C; --lead:#4B4A63; --line:rgba(19,36,60,.30); --red:#C23B2B; --dark:#171F3E; --display:"Anton","Oswald",Impact,sans-serif; --hand:"Oswald","Arial Narrow",sans-serif; color-scheme:light; }
body{ background-color:var(--paper); background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1.5px); background-size:7px 7px; }
.crumbs{ font-family:var(--hand); font-size:13px; text-transform:uppercase; letter-spacing:.1em; }
header.hero{ position:relative; z-index:1; margin-top:14px; padding:30px clamp(20px,5vw,72px) 84px; background:#171F3E; color:#F2E6C6; clip-path:polygon(0 0,100% 0,100% 82%,0 100%); }
.hero .k{ font-family:var(--hand); font-size:20px; letter-spacing:.4em; text-transform:uppercase; color:#F6D77C; } .hero .k::before{ content:"★ ★ ★  "; }
.hero h1{ font-weight:400; font-size:clamp(60px,10vw,124px); line-height:.9; color:#F2E6C6; text-shadow:6px 6px 0 #C23B2B; }
.hero p{ color:#F2E6C6; font-family:var(--hand); font-size:16px; letter-spacing:.12em; text-transform:uppercase; max-width:48em; text-wrap:balance; }   /* balance = lines of even length, no word left alone on the last line */
.bname{ position:relative; z-index:2; display:inline-block; margin:-20px 0 0 clamp(20px,5vw,72px); padding:8px 26px; background:#C23B2B; color:#fff; font-weight:400; font-size:clamp(34px,4.4vw,54px); letter-spacing:.06em; box-shadow:5px 5px 0 #13243C; }
.grp h2{ display:inline-block; margin:6px 0 20px; padding:8px 20px; border:0; background:#13243C; color:#F2E6C6; font-weight:400; font-size:22px; letter-spacing:.1em; }
.card{ background:#F2E6C6; border:5px solid #13243C; box-shadow:8px 8px 0 #C23B2B; padding:10px 10px 14px; transition:transform .15s,box-shadow .15s; } .card:hover{ transform:translate(-2px,-2px); box-shadow:10px 10px 0 #C23B2B; }
.cimg{ border:3px solid #13243C; background:var(--photo); } .kick{ margin-top:10px; font-family:var(--hand); font-weight:500; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#C23B2B; }
.card h3{ margin-top:4px; font-weight:400; font-size:32px; letter-spacing:.03em; } .card:hover h3{ text-decoration:none; } .card p{ color:#4B4A63; }
.card p.from{ margin:6px 0 0; font-family:var(--hand); font-weight:600; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:#13243C; }
.gar{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .gar span{ background:#13243C; color:#F2E6C6; font-family:var(--hand); font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; } .gar span:nth-child(2){ background:#C23B2B; } .gar span:nth-child(3){ background:#171F3E; box-shadow:inset 0 -3px 0 #F6D77C; }
.cimg{ position:relative; }
.mini{ position:absolute; bottom:8px; width:23%; display:block; background:#F2E6C6; border:3px solid #13243C; box-shadow:3px 3px 0 #C23B2B; line-height:0; } .mini.l{ left:8px; } .mini.r{ right:8px; }
.cimg .mini img{ width:100%; height:auto; object-fit:initial; display:block; transition:none; } .card:hover .cimg .mini img{ transform:none; }
.mini i{ display:block; background:#13243C; color:#F2E6C6; font-style:normal; font-family:var(--hand); font-size:9.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; text-align:center; line-height:1; padding:3px 0; }
footer{ background:#171F3E; border-top:6px solid #C23B2B; color:#F2E6C6; } footer b{ color:#F6D77C; font-weight:400; letter-spacing:.12em; }

/* ===== dusk additions ===== */
:root:root:root{ --mbg:#1B2150; --macc:#C23B2B; --msh:#0B1020; --mtx:#F2E6C6; --mgold:#F6D77C; --mcard:#F2E6C6; --mlead:#4B4A63; --mdeep:#0B1020; }
body{ background-color:var(--paper); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .22  0 0 0 0 .15  0 0 0 0 .08  0 0 0 .30 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
header.hero{ position:relative; margin-top:0; padding:clamp(34px,5vw,56px) clamp(20px,5vw,72px) clamp(40px,5vw,62px); color:#F2E6C6; clip-path:none; border-bottom:6px solid #C23B2B;
 background:radial-gradient(1.4px 1.4px at 9% 20%,#F2E6C6 98%,transparent),radial-gradient(1.2px 1.2px at 27% 44%,#F2E6C6 98%,transparent),radial-gradient(1.6px 1.6px at 46% 14%,#F2E6C6 98%,transparent),radial-gradient(1.2px 1.2px at 71% 36%,#F2E6C6 98%,transparent),radial-gradient(1.4px 1.4px at 90% 18%,#F2E6C6 98%,transparent),linear-gradient(to bottom,#171F3E 0%,#4E3558 60%,#D08A5B 100%); }
.hero .k{ display:inline-block; margin-bottom:14px; padding:5px 24px; background:#C23B2B; color:#FBEFC8; border:3px solid #F6E8C4; font-family:var(--hand); font-weight:600; font-size:14px; letter-spacing:.2em; text-transform:uppercase; transform:rotate(-1.5deg); } .hero .k::before{ content:""; }
.hero h1{ color:#FBEFC8; text-shadow:5px 5px 0 #B0301F,-2px -2px 0 #13243C,2px -2px 0 #13243C,-2px 2px 0 #13243C; } .hero p{ color:#F2E6C6; }
.card:hover{ box-shadow:10px 10px 0 #0B1020; } .card{ box-shadow:8px 8px 0 #0B1020; border-color:#13243C; } .mini{ box-shadow:3px 3px 0 #C23B2B; }
.bname{ box-shadow:5px 5px 0 #0B1020; }
footer{ background:linear-gradient(to bottom,#171F3E,#0B1020); border-top:6px solid #C23B2B; color:#F2E6C6; } footer b{ color:#F6D77C; font-weight:400; letter-spacing:.12em; }

:root:root:root{ --cream:#F2E6C6; --brass:#C9A74B; --gold:#F6D77C; --script:"Yellowtail",cursive; }     /* used by the shared header block */
/* /BP-INDEX */