/* dcboldschools.org stylesheet, served by labs.empowerk12.org/bold-site.css (ek12-labs api/public/bold-site.css).
   Loaded on every page of the Squarespace site by one link line in Website > Developer Tools > Code Injection > Header.
   The 2026 Bold Performance Schools report's visual language: EK12 Blue and Yellow with navy, Comfortaa display type
   (the report's cleaned files, so outlined numerals draw as one line) and Inter text, the spotlight glow field, yellow
   panels with a white glow, school cards with a 45% EK12 Blue cast on photos, charts drawn natively.
   Every block pasted into Squarespace carries a .bs class; the Squarespace section around a block is painted through
   :has(), so the blocks stay inside the content width. The design source is C:/dev/design/dcboldschools-2026/site.css. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
/* Comfortaa comes from the report's cleaned files (overlapping contours removed), so outlined numerals draw as one clean line. */
@font-face { font-family: "Comfortaa Clean"; src: url("bold-assets/fonts/comfortaa-regular-clean.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Comfortaa Clean"; src: url("bold-assets/fonts/comfortaa-bold-clean.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --ek12-blue: #224798; --ek12-light-blue: #94bdfd; --ek12-yellow: #f7ca27;
  --db1: #0e1c3d; --db2: #142b5b; --db3: #2c394c; --db4: #597198;
  --lb1: #7a91c1; --lb2: #d3daea; --lb3: #bfd7fe; --lb4: #dfebfe;
  --ly1: #f9d552; --ly2: #f8f3a2; --dy1: #deb623; --white: #fff;
  --tint: #eef4ff;
  --font-display: "Comfortaa Clean", "Comfortaa", "Avenir Next Rounded", system-ui, sans-serif;
  --font-display-light: var(--font-display);
  --font-text: "Inter", "Helvetica Neue", Arial, sans-serif;
  --field-dot: #94bdfd40; --highlight: var(--ek12-yellow); --glow: #f7ca2773;
}

/* ---------- blocks ---------- */
.bs, .bs * { box-sizing: border-box; }
.bs { font-family: var(--font-text); color: var(--db1); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.bs em, .bs i, .bs cite { font-style: normal; }
.bs-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.bs h1, .bs h2, .bs h3, .bs h4, .bs p { margin: 0; letter-spacing: 0; text-transform: none; }
.bs a, .bs a:hover { text-decoration: none; }
.bs h2 { font: 700 clamp(26px, 3.2vw, 36px)/1.2 var(--font-display); color: var(--ek12-blue); }
.bs h3 { font: 700 20px/1.3 var(--font-display); color: var(--ek12-blue); }
.bs .kicker { font: 700 12px/16px var(--font-text); letter-spacing: .22em; text-transform: uppercase; color: var(--ek12-blue); margin-bottom: 12px; }
.bs .lead { font: 400 clamp(16px, 1.4vw, 18px)/1.65 var(--font-text); color: var(--db1); }
.bs .body { font: 300 17px/1.7 var(--font-text); color: var(--db1); }
.bs .body b, .bs .lead b { font-weight: 700; }
.bs .body + .body, .bs .lead + .body { margin-top: 14px; }
.bs .h2 + .lead, .bs h2 + .lead, .bs h2 + .body { margin-top: 14px; }
.bs a { color: inherit; }
.bs .link { color: var(--ek12-blue); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--lb3); }
.bs .link:hover { border-color: var(--ek12-blue); }
.bs .bd-pill { display: inline-block; font: 700 12px/16px var(--font-text); letter-spacing: .2em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; background: var(--ek12-yellow); color: var(--db1); }
.bs .btn { display: inline-block; font: 600 15px/20px var(--font-text); padding: 13px 24px; border-radius: 999px; text-decoration: none; border: 2px solid transparent; transition: background .15s, color .15s; }
.bs .btn-yellow { background: var(--ek12-yellow); color: var(--db1); border-color: var(--ek12-yellow); }
.bs .btn-yellow:hover { background: var(--ly1); }
.bs .btn-blue { background: var(--ek12-blue); color: #fff; border-color: var(--ek12-blue); }
.bs .btn-blue:hover { background: var(--db2); border-color: var(--db2); }
.bs .btn-white { background: #fff; color: var(--ek12-blue); border-color: #fff; }
.bs .btn-white:hover { background: var(--lb4); border-color: var(--lb4); }
.bs .btn-ghost { background: transparent; color: #fff; border-color: #fff; }
.bs .btn-ghost:hover { background: rgba(255,255,255,.12); }
.bs .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.bs .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.bs .two-col.wide-left { grid-template-columns: 1.2fr 1fr; }
.bs .two-col.wide-right { grid-template-columns: 1fr 1.2fr; }
.bs .sec-head { max-width: 820px; margin-bottom: 32px; }

/* ---------- section backgrounds (the Squarespace section around each block) ---------- */
section.page-section:has(.bs) { min-height: 0 !important; }
section.page-section:has(.bs) .content-wrapper { padding-top: 72px !important; padding-bottom: 72px !important; }
section.page-section:has(.bs-hero) { background: linear-gradient(#94bdfd1a 1px, transparent 1px), linear-gradient(90deg, #94bdfd1a 1px, transparent 1px), linear-gradient(135deg, var(--db2) 0%, var(--db1) 100%) !important; background-size: 32px 32px, 32px 32px, 100% 100% !important; overflow: hidden; }
section.page-section:has(.bs-hero) .content-wrapper { padding-top: 56px !important; padding-bottom: 64px !important; }
section.page-section:has(.bs-pagehero) { background: linear-gradient(135deg, var(--db2) 0%, var(--db1) 100%) !important; }
section.page-section:has(.bs-pagehero) .content-wrapper { padding-top: 64px !important; padding-bottom: 64px !important; }
section.page-section:has(.bs-band) .content-wrapper { padding-top: 0 !important; padding-bottom: 0 !important; }
section.page-section:has(.bs-tint), section.page-section:has(.bs-awards), section.page-section:has(.bs-bold), section.page-section:has(.bs-report) { background: var(--tint) !important; }
section.page-section:has(.bs-ek12) { background: linear-gradient(135deg, var(--db2) 0%, var(--db1) 100%) !important; }
section.page-section:has(.bs-ek12) .content-wrapper { padding-top: 64px !important; padding-bottom: 64px !important; }
section.page-section:has(.bs) .section-background, section.page-section:has(.bs) .section-background-overlay { display: none !important; }
/* Squarespace paints a section's theme color on .section-border (the wrapper of its background image); clear it so the section's own color shows. */
section.page-section:has(.bs) .section-border { background: transparent !important; }
/* Squarespace's Fluid Engine sizes a section as a grid of 24px rows, with the row count fixed when the block was placed in the
   editor, where our stylesheet does not load and a block renders tall and unstyled (the path's connectors alone ran to
   thousands of pixels: 1,540 rows under 3,900px of content on 2026-10-23). One row that sizes to the content, and the block
   in it, so a section is exactly as tall as what it holds. */
section.page-section:has(.bs) .fluid-engine { grid-template-rows: auto !important; grid-auto-rows: auto !important; }
section.page-section:has(.bs) .fe-block { grid-row: 1 / 2 !important; }
section.page-section:has(.bs) .content-wrapper { min-height: 0 !important; }

/* ---------- hero ---------- */
.bs-hero { --field-dot: #94bdfd40; --highlight: var(--ek12-yellow); --glow: #f7ca2773; position: relative; }
.bs-hero .bs-in { position: relative; }
.hero-top { display: grid; grid-template-columns: minmax(0, 600px) 1fr; gap: 56px; align-items: center; }
.hero-card { position: relative; background: #fff; border-radius: 32px; padding: 34px 44px 38px; max-width: 640px; }
.hero-lockup { width: 300px; max-width: 100%; display: block; margin: -16px 0 0 -10px; }
.hero-year { display: block; font: 700 clamp(88px, 12vw, 150px)/.9 var(--font-display); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 4px var(--ek12-blue); margin: 6px 0 12px -4px; }
.hero-title { font: 700 clamp(30px, 4vw, 40px)/1.15 var(--font-display); color: var(--db1); margin: 0 0 18px; }
.hero-field { position: relative; margin: 36px -8px 0; }
.hero-field svg { display: block; width: 100%; height: auto; }
.hero-field .narrow { display: none; }
.hero-cap { position: relative; margin: 0; max-width: 640px; font: 400 clamp(18px, 2vw, 24px)/1.5 var(--font-display-light); color: #fff; }
.hero-side .btns { margin-top: 28px; }
.hero-cap b { color: var(--ek12-yellow); font-weight: 700; }
.hero-logo { position: relative; width: 180px; margin-top: 36px; display: block; }
.bd-gf { display: block; } .bd-gf-dot { fill: var(--field-dot); } .bd-gf-spot { fill: var(--highlight); } .bd-tc-glowstop { stop-color: var(--glow); }

/* ---------- page hero (About, Past Bold Schools) ---------- */
.bs-pagehero { color: #fff; }
.bs-pagehero h1 { font: 700 clamp(30px, 4.4vw, 48px)/1.15 var(--font-display); color: #fff; margin: 16px 0 14px; max-width: 900px; }
.bs-pagehero .lead { color: var(--lb3); max-width: 760px; }

/* ---------- yellow panels: EK12 Yellow under the cover's spotlight field in white, fading out behind the text ---------- */
.ymotif { position: relative; overflow: hidden; background: var(--ek12-yellow); color: var(--db1); --field-dot: #ffffff73; --highlight: #ffffffd9; --glow: #ffffff99; }
.ymotif > .bd-gf { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 32%, #000 70%); mask-image: linear-gradient(90deg, transparent 0%, transparent 32%, #000 70%); }
.ymotif > *:not(.bd-gf) { position: relative; z-index: 1; }
.band { display: flex; border-radius: 24px; }
.band div { flex: 1; padding: 24px 28px 22px; }
.band div + div { border-left: 2px solid var(--db1); }
.band b { display: block; font: 700 clamp(34px, 4vw, 44px)/1 var(--font-display); color: var(--db1); }
.band span { display: block; font: 500 14px/20px var(--font-text); color: var(--db1); margin-top: 8px; }

/* ---------- the initiative, under the yellow band ---------- */
section.page-section:has(.bs-intro) .content-wrapper { padding-top: 56px !important; padding-bottom: 8px !important; }
.intro { max-width: 820px; }
.intro .lead { margin-top: 14px; }
.intro .btns { margin-top: 20px; }

/* ---------- school cards: photo (or the logo on a tint until the photo arrives), logo chip, name, link ---------- */
.sch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sch { display: block; text-decoration: none; color: var(--db1); border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--lb2); transition: border-color .15s, box-shadow .15s; }
.sch:hover { border-color: var(--ek12-blue); box-shadow: 0 8px 24px rgba(14,28,61,.12); }
.sch .ph { position: relative; aspect-ratio: 4 / 3; background: var(--lb4); overflow: hidden; display: grid; place-items: center; }
.sch .ph .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); filter: contrast(1.05) brightness(1.02); }
.sch .ph.has-photo::after { content: ""; position: absolute; inset: 0; background: var(--ek12-blue); mix-blend-mode: multiply; opacity: .45; pointer-events: none; }
.sch .mark { position: relative; z-index: 2; width: 120px; height: 88px; border-radius: 16px; border: 1px solid var(--lb2); background: #fff; display: grid; place-items: center; padding: 8px; overflow: hidden; }
.sch .mark img { max-width: 100px; max-height: 70px; width: auto; height: auto; object-fit: contain; display: block; }
.sch .mark.dark { background: linear-gradient(135deg, var(--db2), var(--db1)); border-color: var(--db1); }
.sch .mark.fill { padding: 0; } .sch .mark.fill img { max-width: 118px; max-height: 86px; }
.sch .ph.has-photo .mark { position: absolute; left: 12px; bottom: 12px; width: 66px; height: 50px; border-radius: 10px; padding: 4px; border: 0; box-shadow: 0 2px 8px rgba(14,28,61,.25); }
.sch .ph.has-photo .mark img { max-width: 56px; max-height: 40px; }
.sch .ph.has-photo .mark.fill img { max-width: 66px; max-height: 50px; }
.sch .txt { display: block; padding: 14px 18px 18px; }
.sch .ph.has-photo .mark.br { left: auto; right: 12px; }
.sch .ph.has-photo .mark.tl { bottom: auto; top: 12px; }
.sch .ph.has-photo .mark.tr { left: auto; right: 12px; bottom: auto; top: 12px; }
.sch .nm { display: block; font: 600 14.5px/19px var(--font-text); color: var(--db1); }
.sch .sub { display: block; font: 400 12px/16px var(--font-text); color: var(--db4); margin-top: 3px; }
.sch:hover .nm { color: var(--ek12-blue); }

/* ---------- logo cards ---------- */
.logos { display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px 12px; }
.logo { display: grid; gap: 8px; justify-items: center; text-align: center; align-content: start; text-decoration: none; color: var(--db1); }
.logo .box { width: 120px; height: 88px; border-radius: 16px; border: 1px solid var(--lb2); background: #fff; display: grid; place-items: center; padding: 8px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.logo:hover .box { border-color: var(--ek12-blue); box-shadow: 0 6px 18px rgba(14,28,61,.12); }
.logo .box img { max-width: 100px; max-height: 70px; width: auto; height: auto; object-fit: contain; display: block; }
.logo .box.dark { background: linear-gradient(135deg, var(--db2), var(--db1)); border-color: var(--db1); }
.logo .box.fill { padding: 0; }
.logo .box.fill img { max-width: 118px; max-height: 86px; }
.logo .nm { font: 600 13.5px/17px var(--font-text); color: var(--db1); }
.logo .sub { font: 400 12px/15px var(--font-text); color: var(--db4); margin-top: -4px; }
.logo:hover .nm { color: var(--ek12-blue); }
.bs-schools .note { font: 300 13px/18px var(--font-text); color: var(--db4); margin-top: 26px; }

/* ---------- awards ---------- */
.aw-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.aw { border-radius: 24px; border: 2px solid var(--lb2); background: #fff; text-align: center; padding: 6px 20px 24px; }
.aw.is-feature { background: linear-gradient(135deg, var(--db2), var(--db1)); border-color: var(--db1); color: #fff; }
.aw .sb { display: flex; justify-content: center; }
.aw .sb svg { width: 150px; height: 150px; display: block; }
.bd-sb-ray { stroke: var(--ek12-yellow); stroke-linecap: round; fill: none; }
.aw .kick { font: 700 11px/14px var(--font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--db4); margin-top: -6px; }
.aw.is-feature .kick { color: var(--ek12-yellow); }
.aw h3 { font: 700 21px/1.25 var(--font-display); margin: 8px 0; color: var(--ek12-blue); }
.aw.is-feature h3 { color: #fff; }
.aw p { font: 300 14px/20px var(--font-text); margin: 0; }

/* ---------- figures and charts ---------- */
.fig { display: grid; gap: 6px; margin: 0; }
.fig-eyebrow { font: 700 11px/14px var(--font-text); letter-spacing: .22em; text-transform: uppercase; color: var(--ek12-blue); }
.fig-title { font: 700 18px/24px var(--font-display); color: var(--ek12-blue); margin: 0; }
.fig-sub { font: 300 13.5px/19px var(--font-text); color: var(--db4); margin: 0; }
.fig-chart { margin-top: 10px; }
.fig-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig-src { font: 300 12px/16px var(--font-text); color: var(--db4); margin: 4px 0 0; }
.fig svg text { font-family: var(--font-text); }
.c-ax { font-size: 10.5px; font-weight: 500; fill: var(--db4); }
.c-axs { font-size: 9.5px; font-weight: 500; fill: var(--db4); }
.c-axp { font-size: 12px; font-weight: 700; fill: var(--db1); }
.c-val { font-size: 12px; font-weight: 700; fill: var(--db1); }
.c-valm { font-size: 11px; font-weight: 400; fill: var(--db4); }
.c-valb { font-size: 11px; font-weight: 600; fill: var(--db4); }
.c-leg { font-size: 11.5px; font-weight: 500; fill: var(--db1); }
.c-pan { font-size: 12.5px; font-weight: 700; fill: var(--db1); }
.c-note { font-size: 10.5px; font-weight: 400; fill: var(--db4); }
.c-lab { font-size: 11.5px; font-weight: 400; fill: var(--db1); }
.c-pill { font-size: 11.5px; font-weight: 700; fill: #fff; }
.c-pilln { font-size: 11.5px; font-weight: 700; fill: var(--db1); }
.c-ann { font-size: 11px; font-weight: 700; fill: var(--db1); }
.c-annm { font-size: 10.5px; font-weight: 500; fill: var(--db1); }

/* ---------- stat tiles ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0; }
.stat { background: var(--lb4); border-radius: 18px; padding: 18px 18px 16px; display: grid; gap: 6px; align-content: start; }
.stat-v { font: 700 32px/36px var(--font-display); color: var(--ek12-blue); letter-spacing: -.01em; }
.stat-l { font: 500 13px/18px var(--font-text); color: var(--db1); }

/* ---------- ten practices ---------- */
.ten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ten .tile { background: var(--lb4); border-radius: 18px; padding: 18px 20px 16px 18px; display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start; }
.ten .n { font: 700 36px/36px var(--font-display); color: transparent; -webkit-text-stroke: 1.8px var(--ek12-blue); }
.ten h4 { font: 700 15.5px/21px var(--font-text); color: var(--ek12-blue); margin: 0 0 4px; }
.ten p { font: 300 14.5px/21px var(--font-text); color: var(--db1); margin: 0; }
.bs-practices .after { margin-top: 24px; font: 300 15px/22px var(--font-text); color: var(--db4); }

/* ---------- the path: the ten practices as a scrollytelling rail on a light field of bright spots ----------
   Everything is visible without scripts. bold-site.js adds .jr-js to the panel and then reveals each step as it
   scrolls into view, draws the path between stations, lights the bright spots and moves the field a little slower
   than the page (parallax). Reduced motion: no transitions, everything shown. */
.jr { position: relative; overflow: hidden; border-radius: 32px; background: linear-gradient(180deg, #f7faff 0%, #e8f1ff 100%); padding: 48px 48px 44px; isolation: isolate; }
.jr-bg { position: absolute; inset: -160px 0; pointer-events: none; transform: translateY(var(--jr-shift, 0px)); will-change: transform; }
.jr-dots { position: absolute; inset: 0; opacity: .9;
  background-image: radial-gradient(circle, #94bdfd73 1.6px, transparent 2px), linear-gradient(#94bdfd1a 1px, transparent 1px), linear-gradient(90deg, #94bdfd1a 1px, transparent 1px);
  background-size: 34px 34px, 68px 68px, 68px 68px; background-position: 17px 17px, 0 0, 0 0; }
/* The bright spots stay quiet (Josh, 2026-10-23: "a bit more subtle/transparent"): a soft wash and a small core, half strength even when lit. */
.jr-glow { position: absolute; left: var(--x); top: var(--y); width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #f7ca2766 0%, #f7ca2729 26%, #f7ca2700 62%); opacity: .16; transform: scale(calc(var(--s, 1) * .75)); transition: opacity .9s ease, transform .9s ease; }
.jr-glow::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ek12-yellow); opacity: .85; box-shadow: 0 0 0 3px #f7ca2722; }
.jr-glow.is-lit { opacity: .55; transform: scale(var(--s, 1)); }
.jr > *:not(.jr-bg) { position: relative; z-index: 1; }
.jr-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.jr-head-text { max-width: 760px; }
.jr-head-text h2 { margin-top: 16px; }
.jr-head-text .lead { margin-top: 12px; }
.jr-play { display: inline-flex; align-items: center; gap: 10px; flex: none; font: 600 14px/1.3 var(--font-text); color: var(--ek12-blue); background: #fff; border: 1.5px solid var(--lb2); border-radius: 999px; padding: 11px 18px; cursor: pointer; margin-top: 4px; transition: border-color .15s, background .15s; }
.jr-play:hover { border-color: var(--ek12-blue); background: var(--lb4); }
.jr-play svg { flex: none; }
.jr-steps { list-style: none; margin: 0; padding: 0; }
.jr-step { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); column-gap: 28px; align-items: start; }
/* Both children name row 1: with only a column set, the grid's auto-placement would drop a left-side text into the row below its station. */
.jr-rail { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.jr-text { grid-column: 1; grid-row: 1; text-align: right; padding: 4px 0 56px; max-width: 460px; justify-self: end; }
.jr-step.is-right .jr-text { grid-column: 3; text-align: left; justify-self: start; }
.jr-step.is-last .jr-text { padding-bottom: 12px; }
.jr-kick { display: block; font: 700 11px/14px var(--font-text); letter-spacing: .22em; text-transform: uppercase; color: var(--db4); margin-bottom: 6px; }
.jr-text h3 { font: 700 23px/1.25 var(--font-display); color: var(--ek12-blue); margin: 0 0 8px; }
.jr-text p { font: 300 15.5px/1.65 var(--font-text); color: var(--db1); margin: 0; }
/* Under each practice: a short, wide navy card with three white-outline icons that tell the practice in pictures (Josh, 2026-10-23). */
.jr-card { display: flex; align-items: stretch; justify-content: space-between; gap: 6px; margin-top: 16px; padding: 14px 16px 12px; border-radius: 16px;
  background: linear-gradient(135deg, var(--db2), var(--db1)); color: #fff; text-align: center; box-shadow: 0 6px 18px rgba(14,28,61,.12); }
.jr-ic { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; padding: 0 4px; }
.jr-ic svg { width: 30px; height: 30px; display: block; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.jr-ic b { font: 500 11.5px/1.25 var(--font-text); color: #fff; letter-spacing: .01em; }
.jr-ic + .jr-ic::before { content: ""; position: absolute; left: -5px; top: 9px; width: 7px; height: 7px; border-right: 1.5px solid var(--ek12-light-blue); border-top: 1.5px solid var(--ek12-light-blue); transform: rotate(45deg); opacity: .8; }
.jr-node { width: 56px; height: 56px; flex: none; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; cursor: pointer;
  font: 700 20px/1 var(--font-display); background: #fff; border: 2px solid var(--lb1); color: var(--ek12-blue); box-shadow: 0 2px 8px rgba(14,28,61,.08); transition: background .25s, border-color .25s, color .25s, transform .25s; }
.jr-node.is-done { background: var(--ek12-blue); border-color: var(--ek12-blue); color: #fff; }
.jr-node.is-active { background: var(--ek12-yellow); border-color: var(--ek12-yellow); color: var(--db1); transform: scale(1.08); box-shadow: 0 0 0 8px #f7ca2724; }
.jr-conn { display: block; width: 100%; height: auto; flex: 1; min-height: 120px; }
.jr-track { fill: none; stroke: var(--lb1); stroke-width: 2; stroke-dasharray: 4 8; stroke-linecap: round; opacity: .8; }
.jr-prog { fill: none; stroke: var(--ek12-blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset .6s cubic-bezier(.2, 0, .2, 1); }
.jr-end { display: grid; justify-items: center; text-align: center; margin: 12px auto 0; max-width: 620px; }
.jr-sun { position: relative; width: 150px; height: 150px; margin-bottom: 2px; border-radius: 50%; background: radial-gradient(circle, #f7ca2780 0%, #f7ca2733 26%, #f7ca2700 64%); }
.jr-sun::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--ek12-yellow); opacity: .9; box-shadow: 0 0 0 7px #f7ca2726; }
.jr-end-text h3 { font: 700 26px/1.25 var(--font-display); color: var(--ek12-blue); margin: 8px 0 10px; }
.jr-end-text .body { font-size: 16px; }
.jr .after { margin-top: 28px; text-align: center; }
.bs-journey .photos { margin-top: 24px; }
/* once the script runs: hidden until revealed */
.jr.jr-js .jr-step .jr-text { opacity: 0; transform: translateX(-18px); transition: opacity .55s cubic-bezier(.2, 0, .2, 1), transform .55s cubic-bezier(.2, 0, .2, 1); }
.jr.jr-js .jr-step.is-right .jr-text { transform: translateX(18px); }
.jr.jr-js .jr-step.is-revealed .jr-text { opacity: 1; transform: none; }
.jr.jr-js .jr-prog { stroke-dashoffset: 100; }
.jr.jr-js .jr-step.is-done .jr-prog { stroke-dashoffset: 0; }
.jr.jr-js .jr-end { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.jr.jr-js .jr-end.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .jr-bg { transform: none !important; }
  .jr .jr-text, .jr .jr-prog, .jr .jr-end, .jr .jr-glow, .jr-node { transition: none !important; }
}

/* ---------- school photos: full color, EK12 Blue multiplied at 45%, navy label in the corner farthest from any face ---------- */
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.photo { border-radius: 22px; overflow: hidden; background: #fff; position: relative; aspect-ratio: 4 / 3; display: block; }
a.photo:hover .ph-label { background: var(--ek12-blue); }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); display: block; filter: contrast(1.05) brightness(1.02); }
.photo::after { content: ""; position: absolute; inset: 0; background: var(--ek12-blue); mix-blend-mode: multiply; opacity: .45; pointer-events: none; }
.photo .ph-label { position: absolute; left: 16px; bottom: 16px; z-index: 2; background: var(--db1); color: #fff; font: 600 11.5px/14px var(--font-text); letter-spacing: .02em; padding: 6px 10px; }
.photo .ph-label.br { left: auto; right: 16px; }
.photo .ph-label.tl { bottom: auto; top: 16px; }
.photo .ph-label.tr { left: auto; right: 16px; bottom: auto; top: 16px; }

/* ---------- spotlights ---------- */
.spots { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.spot { border-radius: 24px; padding: 34px 36px 32px; color: #fff; display: grid; gap: 12px; align-content: start; }
.spot.blue { background: var(--ek12-blue); }
.spot.navy { background: linear-gradient(135deg, var(--db2), var(--db1)); }
.spot .kicker { color: var(--ek12-yellow); margin-bottom: 0; }
.spot h3 { font: 700 26px/1.2 var(--font-display); color: #fff; }
.spot .sub-h { font: 400 18px/1.35 var(--font-display-light); color: #fff; margin-top: -4px; }
.spot .body { color: #fff; font-size: 15.5px; }
.spot .quote { display: grid; grid-template-columns: 88px 1fr; gap: 18px; align-items: center; margin-top: 10px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.25); }
.spot .quote img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; display: block; }
.spot .quote p { font: 500 15.5px/24px var(--font-text); color: #fff; }
.spot .quote .who { display: block; font: 700 10.5px/14px var(--font-text); letter-spacing: .18em; text-transform: uppercase; color: var(--lb3); margin-top: 8px; }
.spot .link { color: #fff; border-color: rgba(255,255,255,.5); justify-self: start; }
.spot .link:hover { border-color: #fff; }
.bs-spots .sec-head .body { max-width: 820px; }

/* ---------- ten years ---------- */
.tenyears { border-radius: 32px; overflow: hidden; position: relative; min-height: 380px; display: grid; place-items: center; padding: 48px 24px;
  background: var(--dy1) center / cover no-repeat; }
.tenyears .card { background: #fff; border-radius: 32px; padding: 36px 44px 34px; text-align: center; max-width: 620px; box-shadow: 0 12px 32px rgba(14,28,61,.18); }
.tenyears .card img { width: 320px; max-width: 100%; display: block; margin: -14px auto 6px; }
.tenyears .card p { font: 400 18px/27px var(--font-display-light); color: var(--db1); margin: 0; }
.tenyears .card p b { font-weight: 700; color: var(--ek12-blue); }

/* ---------- report ---------- */
.report { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center; }
.report .cover { border-radius: 12px; box-shadow: 0 16px 40px rgba(14,28,61,.22); display: block; width: 100%; }
.report .lead { margin-top: 14px; }

/* ---------- navy band (EK12) ---------- */
.bs-ek12 { color: #fff; }
.bs-ek12 h3 { font: 700 26px/1.25 var(--font-display); color: #fff; max-width: 820px; }
.bs-ek12 .body { color: #fff; max-width: 820px; margin-top: 14px; }
.bs-ek12 .btns { margin-top: 24px; }

/* ---------- past cohorts ---------- */
.cohort { padding: 32px 0; border-top: 1px solid var(--lb2); }
.cohort:first-of-type { border-top: 0; padding-top: 0; }
.cohort .yr { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cohort .yr h3 { font: 700 26px/1.2 var(--font-display); color: var(--ek12-blue); }
.cohort .yr span { font: 500 13px/18px var(--font-text); color: var(--db4); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 500 14px/18px var(--font-text); color: var(--db1); background: var(--lb4); border-radius: 999px; padding: 8px 14px; }
.chip.dcps { background: #fff; border: 1px solid var(--lb2); }

/* ---------- phone and tablet ---------- */
@media (max-width: 1000px) {
  .logos { grid-template-columns: repeat(4, 1fr); }
  .sch-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .bs .two-col, .bs .two-col.wide-left, .bs .two-col.wide-right { grid-template-columns: 1fr; gap: 32px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .spots { grid-template-columns: 1fr; }
  .report { grid-template-columns: 220px 1fr; gap: 32px; }
}
@media (max-width: 700px) {
  section.page-section:has(.bs) .content-wrapper { padding-top: 48px !important; padding-bottom: 48px !important; }
  section.page-section:has(.bs-hero) .content-wrapper { padding-top: 32px !important; padding-bottom: 48px !important; }
  .bs-in { padding: 0 16px; }
  .bs .sec-head { margin-bottom: 24px; }
  .hero-card { padding: 26px 24px 28px; border-radius: 24px; }
  .hero-lockup { width: 230px; margin: -8px 0 0 -6px; }
  .hero-year { -webkit-text-stroke: 3px var(--ek12-blue); }
  .hero-top { grid-template-columns: 1fr; gap: 28px; }
  .hero-field { margin: 4px -4px 0; }
  .hero-field .wide { display: none; } .hero-field .narrow { display: block; }
  .hero-side .btns { margin-top: 20px; }
  .band { flex-direction: column; }
  .band div + div { border-left: 0; border-top: 2px solid var(--db1); }
  .band div { padding: 18px 22px 16px; }
  .sch-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sch { border-radius: 16px; }
  .sch .mark { width: 96px; height: 70px; } .sch .mark img { max-width: 80px; max-height: 56px; } .sch .mark.fill img { max-width: 94px; max-height: 68px; }
  .sch .ph.has-photo .mark { width: 54px; height: 40px; left: 8px; bottom: 8px; border-radius: 8px; } .sch .ph.has-photo .mark img { max-width: 46px; max-height: 32px; } .sch .ph.has-photo .mark.fill img { max-width: 54px; max-height: 40px; }
  .sch .ph.has-photo .mark.br { right: 8px; } .sch .ph.has-photo .mark.tl { top: 8px; } .sch .ph.has-photo .mark.tr { right: 8px; top: 8px; }
  .sch .txt { padding: 12px 14px 14px; } .sch .nm { font-size: 13px; line-height: 17px; } .sch .sub { font-size: 11.5px; }
  .logos { grid-template-columns: repeat(3, 1fr); gap: 18px 8px; }
  .logo .box { width: 96px; height: 70px; border-radius: 14px; }
  .logo .box img { max-width: 80px; max-height: 56px; }
  .logo .box.fill img { max-width: 94px; max-height: 68px; }
  .logo .nm { font-size: 12.5px; line-height: 16px; }
  .aw-row { grid-template-columns: 1fr; }
  .fig-chart.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .fig-chart.scroll svg { min-width: 600px; }
  .fig-chart.scroll + .fig-src::before { content: "Swipe sideways to see the whole chart. "; }
  .ten { grid-template-columns: 1fr; }
  .jr { padding: 28px 18px 28px; border-radius: 24px; }
  .jr-head { margin-bottom: 24px; }
  .jr-step, .jr-step.is-right { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; }
  .jr-rail { grid-column: 1; }
  .jr-text, .jr-step.is-right .jr-text { grid-column: 2; text-align: left; justify-self: start; padding: 2px 0 36px; }
  .jr-node { width: 44px; height: 44px; font-size: 16px; }
  .jr-conn { min-height: 90px; }
  .jr-text h3 { font-size: 20px; }
  .jr-card { padding: 12px 8px 10px; gap: 4px; border-radius: 14px; }
  .jr-ic svg { width: 26px; height: 26px; }
  .jr-ic b { font-size: 10.5px; }
  .jr-glow { width: 160px; height: 160px; margin: -80px 0 0 -80px; }
  .jr-sun { width: 120px; height: 120px; }
  .photos { grid-template-columns: 1fr; margin-top: 28px; }
  .photo { aspect-ratio: 3 / 2; }
  .spot { padding: 26px 22px 24px; }
  .spot .quote { grid-template-columns: 64px 1fr; gap: 14px; }
  .spot .quote img { width: 64px; height: 64px; }
  .tenyears { min-height: 0; padding: 32px 16px; border-radius: 24px; }
  .tenyears .card { padding: 26px 22px 24px; border-radius: 24px; }
  .tenyears .card img { width: 240px; }
  .report { grid-template-columns: 1fr; gap: 24px; }
  .report .cover { max-width: 240px; }
}
@media (max-width: 350px) {
  .logos { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-v { font-size: 28px; }
}

/* ---------- Squarespace's own header and footer on dcboldschools.org ----------
   The header keeps its white 10-year lockup and its links; this paints it navy to meet the hero, sets the links in
   Inter, and hides the border and shadow. The footer goes on the light tint under the navy EmpowerK12 band, with the
   social icons hidden (Josh, 2026-10-22: remove the social media links for now). */
#header, #header .header-background, #header .header-menu-bg, #header .header-announcement-bar-wrapper { background: var(--db2) !important; }
#header .header-border, #header .header-dropshadow { display: none !important; }
#header .header-nav-item a, #header .header-nav-folder-item a { font: 500 16px/1 var(--font-text) !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important; }
#header .header-nav-item a:hover, #header .header-nav-item--active a, #header .header-nav-item--active a:hover { color: var(--ek12-yellow) !important; }
#header .header-menu-nav-item a { font: 700 24px/1.25 var(--font-display) !important; color: #fff !important; letter-spacing: 0 !important; text-transform: none !important; }
#header .header-burger-btn .burger-inner > div, #header .burger-inner .top-bun, #header .burger-inner .patty, #header .burger-inner .bottom-bun { background: #fff !important; }
#header .header-title-logo img { max-height: 64px; width: auto; }
#footer-sections section.page-section { background: var(--tint) !important; border-top: 1px solid var(--lb2); }
#footer-sections section.page-section .section-background { display: none !important; }
#footer-sections section.page-section .section-border { background: transparent !important; }
#footer-sections .content-wrapper { padding-top: 40px !important; padding-bottom: 40px !important; }
#footer-sections, #footer-sections p, #footer-sections li, #footer-sections span { font-family: var(--font-text) !important; color: var(--db1) !important; }
#footer-sections p { font-size: 14px !important; line-height: 22px !important; font-weight: 400 !important; letter-spacing: 0 !important; }
#footer-sections h1, #footer-sections h2, #footer-sections h3, #footer-sections h4 { font-family: var(--font-display) !important; color: var(--ek12-blue) !important; letter-spacing: 0 !important; text-transform: none !important; }
#footer-sections a { color: var(--ek12-blue) !important; text-decoration: none !important; font-weight: 500 !important; }
#footer-sections a:hover { text-decoration: underline !important; }
#footer-sections .sqs-block-socialaccountlinks { display: none !important; }
#footer-sections .sqs-block-image img { max-width: 170px !important; height: auto !important; }