/* Dogstar Technologies — shared stylesheet. Plain CSS, no build step. */
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-serif/IBMPlexSerif-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-serif/IBMPlexSerif-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans/IBMPlexSans-SemiBold.woff2") format("woff2"); }

:root {
  --navy: #0B1F3A;   /* text on white 16.52:1, on stone 14.77:1 */
  --gold: #C4A35A;   /* text only on navy (6.87:1); elsewhere a rule or border */
  --white: #FFFFFF;
  --slate: #4B5A6A;  /* text on white 7.07:1, on stone 6.32:1 */
  --stone: #F5F2EA;
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  --measure: 40rem;
  --wide: 68rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; color: var(--navy); background: var(--white); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; margin-top: 1.5em; }
h3 { font-size: 1.2rem; }
p, ul, ol { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover, a:focus { text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--white); padding: 0.5rem 1rem; }
.skip:focus { left: 1rem; z-index: 10; }
.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 1rem; }

.site-header { background: var(--navy); color: var(--white); border-bottom: 4px solid var(--gold); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; padding-top: 0.5rem; padding-bottom: 0.75rem; }
/* The logo SVG (560 x 230) carries side padding of about 0.4 x its height; the negative margin sets the wordmark on the gutter. */
.wordmark { display: block; line-height: 0; text-decoration: none; }
.wordmark img { display: block; height: 5rem; width: auto; margin-left: -2rem; margin-right: -1.5rem; }
.site-nav ul, .sub-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; max-width: none; }
.site-nav a { color: var(--white); text-decoration: none; padding: 0.25rem 0; display: inline-block; }
.site-nav a:hover, .site-nav a:focus { text-decoration: underline; text-decoration-color: var(--gold); }
.site-nav a[aria-current="page"] { border-bottom: 3px solid var(--gold); }

.sub-nav { background: var(--stone); border-bottom: 1px solid var(--gold); }
.sub-nav .wrap { padding-top: 0.6rem; padding-bottom: 0.6rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.25rem; }
.sub-nav .section-name { font-family: var(--serif); font-weight: 600; margin-right: 0.5rem; }
.sub-nav a { text-decoration: none; }
.sub-nav a:hover, .sub-nav a:focus, .sub-nav a[aria-current="page"] { text-decoration: underline; }

.hero { background: var(--navy); color: var(--white); padding: 2.5rem 0 2.75rem; }
.hero h1 { color: var(--white); max-width: 22ch; }
.hero .eyebrow { color: var(--gold); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 0.75rem; }
.hero .lede { font-size: 1.2rem; color: var(--stone); max-width: var(--measure); margin-bottom: 0; }
.hero a { color: var(--white); }

.band { padding: 2rem 0; }
.band.stone { background: var(--stone); }
.status { display: inline-block; border: 1px solid var(--gold); border-left: 6px solid var(--gold); padding: 0.4rem 0.9rem; font-weight: 600; margin: 0 0 1.25rem; background: var(--white); }
.lede { font-size: 1.15rem; color: var(--slate); }
.muted { color: var(--slate); }

.cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; list-style: none; padding: 0; margin: 1rem 0 0; max-width: none; }
.card { background: var(--white); border: 1px solid var(--stone); border-top: 4px solid var(--gold); padding: 1.25rem; }
.band.stone .card { border-color: var(--white); border-top-color: var(--gold); }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 1rem 0 0; max-width: var(--measure); }
.steps li { position: relative; padding-left: 3.25rem; margin-bottom: 1.5rem; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--navy); color: var(--white); font-family: var(--serif); font-weight: 600; display: flex; align-items: center; justify-content: center; }
.steps h3 { margin-bottom: 0.25rem; }

.cta { display: inline-block; background: var(--navy); color: var(--white); padding: 0.7rem 1.2rem; text-decoration: none; border: 2px solid var(--navy); font-weight: 600; margin-top: 0.5rem; }
.cta:hover, .cta:focus { background: var(--white); color: var(--navy); text-decoration: none; }
.hero .cta { background: var(--white); color: var(--navy); border-color: var(--white); }
.hero .cta:hover, .hero .cta:focus { background: var(--navy); color: var(--white); }

dl { max-width: var(--measure); margin: 0 0 1em; }
dt { font-weight: 600; margin-top: 1em; }
dd { margin: 0.25em 0 0; }

.site-footer { background: var(--navy); color: var(--stone); margin-top: 0; border-top: 4px solid var(--gold); padding: 2rem 0; font-size: 0.95rem; }
.site-footer a { color: var(--white); }
.site-footer .cols { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.site-footer h2 { font-size: 1rem; color: var(--gold); margin: 0 0 0.5em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.3em; }
.site-footer .fine { margin-top: 1.5rem; margin-bottom: 0; color: var(--stone); }

/* The last section meets the footer directly, so no white band shows under a stone section (S-20). */
main > .band:last-child { padding-bottom: 3rem; }

@media (min-width: 40rem) {
  .wordmark img { height: 6rem; margin-left: -2.4rem; margin-right: -1.8rem; }
  h1 { font-size: 2.6rem; }
  h2 { font-size: 1.75rem; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .site-footer .cols { grid-template-columns: repeat(3, 1fr); }
  .hero { padding: 3.5rem 0 3.75rem; }
}

/* Home: the sky. No script: each star is a link to its caption; :target (with :has) shows the selected caption,
   Dogstar when none is selected. Unselected captions are hidden visually only, so screen readers still read the whole
   list, and with CSS off the captions show as a plain list. */
.sky { background: var(--navy); color: var(--stone); padding: 0 0 2.5rem; }
.sky .chart { overflow-x: auto; overflow-y: hidden; max-width: 50rem; margin: 0 auto; }
.sky svg { display: block; width: 100%; height: auto; }
.sky svg text { font-family: var(--sans); }
.sky .lbl { font-size: 15px; fill: var(--stone); }
.sky .lbl.strong { font-weight: 600; }
.sky .lbl.dim { fill: #A9B5C4; }
.sky .cap-lbl { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--gold); }
.sky .star { cursor: pointer; text-decoration: none; }
.sky .star:focus { outline: none; }
.sky .star .halo { opacity: 0; transition: opacity 0.2s; }
.sky .star .ring { stroke: transparent; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.sky .star:hover .halo { opacity: 0.18; }
.sky .star:focus-visible .ring { stroke: var(--gold); }
.sky .star:focus-visible .halo { opacity: 0.22; }
.sky:not(:has(.captions li:target)) .s-dogstar .halo,
.sky:has(#cap-dogstar:target) .s-dogstar .halo, .sky:has(#cap-vision:target) .s-vision .halo,
.sky:has(#cap-doctrine:target) .s-doctrine .halo, .sky:has(#cap-lanes:target) .s-lanes .halo,
.sky:has(#cap-seats:target) .s-seats .halo, .sky:has(#cap-calibration:target) .s-calibration .halo,
.sky:has(#cap-ap:target) .s-ap .halo, .sky:has(#cap-health:target) .s-health .halo,
.sky:has(#cap-room:target) .s-room .halo { opacity: 0.28; }
/* Narrow screens: labels at 29 units render at 12.4 px or more (S-21); the AP Engine and rural-hospitals labels move under
   their stars and Calibration's drops lower, so the larger labels do not collide. */
@media (max-width: 40rem) {
  .sky .lbl { font-size: 29px; }
  .sky .cap-lbl { font-size: 24px; letter-spacing: 0.08em; }
  .sky .s-ap .lbl { text-anchor: middle; transform: translate(-17px, 36px); }
  .sky .s-health .lbl { text-anchor: middle; transform: translate(17px, 36px); }
  .sky .s-calibration .lbl { transform: translate(0, 20px); }
  .sky .cap-lbl.top { transform: translate(0, -8px); }
  .sky .s-doctrine .lbl { transform: translate(-12px, 0); }
  .sky .s-lanes .lbl { transform: translate(12px, 0); }
}
@media (prefers-reduced-motion: no-preference) { .sky .twinkle { animation: sky-twinkle 3.2s ease-in-out infinite; } }
@keyframes sky-twinkle { 50% { opacity: 0.35; } }
.sky .captions { position: relative; list-style: none; padding: 0; margin: 0 auto; max-width: 50rem; min-height: 6.5rem; border-top: 1px solid #2C4467; }
.sky .captions li { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sky .captions li:target, .sky .captions:not(:has(li:target)) #cap-dogstar {
  position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
  padding: 1rem 0 0 1.1rem; margin-top: 1rem; border-left: 3px solid var(--gold); max-width: var(--measure);
  scroll-margin-top: calc(min(100vw - 2rem, 50rem) * 0.5875 + 3rem); }