/* Instrument Sans, the typeface from the one-pager. Served from this domain,
   not from Google, because the privacy page tells families this site loads
   nothing from any other company and that has to stay true. Latin subset,
   29 KB, one variable file covering weights 400 to 700, shared by every page. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Overlap. Four pages, one stylesheet.
   Palette from the one-pager, measured not eyeballed. Every pair is checked by
   tools/contrast.py. There is no JavaScript anywhere on this site, so nothing
   here may depend on it.

   ONE DESIGN, deliberately. There is no dark variant. The identity is cream
   against navy, and a dark version had to throw the cream away, which left
   every surface a shade of navy and stopped the navy panels reading as
   emphasis. It also hid one of the four pathway edges completely. What Bryan
   sees is what a family sees, and it matches the printed one-pager. */
:root { color-scheme: light; }

:root {
  --bg: #FBF8F3;
  --surface: #FFFFFF;
  --panel: #1A2647;
  --panel-text: #FBF8F3;
  /* Body text on a navy panel. Was a bare hex in two rules, promoted to a
     token so tools/contrast.py can measure it. The sample report sets its
     "not a real person" disclosure in this colour. */
  --panel-dim: #C9D2E6;
  --text: #1A2647;
  --muted: #4E5A72;
  --rule: #848DA0;
  --hair: #E2DCD1;
  --link: #377874;
  --accent: #E7AC52;
  --focus: #377874;

  /* Start of Trail mark kit. The three parents, then the four children which
     are calculated from them, not picked by eye. Gold and Sea are 1.90:1 and
     2.02:1 on cream, so they are mark colours only and never text. */
  --blaze-gold: #E7AC52;
  --blaze-terracotta: #D46047;
  --blaze-sea: #6FBFB6;
  --ember: #C04117;
  --moss: #65813B;
  --walnut: #5C4833;
  --bark: #543110;
}


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.5rem; }

/* Reading width without breaking the left edge. The container stays on the
   same grid as every other band; only the text inside it is narrowed, so
   nothing appears to shift inward as you scroll down the page. */
.narrow > * { max-width: 44rem; }

/* Skip link, for anyone arriving by keyboard */
.skip {
  position: absolute; left: -9999px;
  background: var(--panel); color: var(--panel-text);
  padding: 0.75rem 1rem; border-radius: 0 0 6px 0; z-index: 10;
}
.skip:focus { left: 0; top: 0; }

/* ---------- Header ---------- */
/* Navy, running straight into the navy hero, so the top of every page is the
   one-pager's cover. Gold only ever sits on navy: on cream it measures 1.90:1
   and is unreadable. */
.site-header { background: var(--panel); color: var(--panel-text); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap; padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
/* The mark is portrait (160 x 206), so it is sized by height. Sizing by width
   would make the header taller than the nav beside it. */
.brand svg { height: 3.2rem; width: auto; flex: 0 0 auto; }
.brand .name {
  font-weight: 700; font-size: 1.05rem; letter-spacing: 0.05em;
  text-transform: uppercase; line-height: 1.1;
}
.brand .tag {
  color: var(--accent); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.01em; display: block; margin-top: 0.1rem;
}

.nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.6rem; align-items: center; }
.nav a {
  color: var(--panel-text); text-decoration: none;
  font-size: 0.9375rem; font-weight: 600;
  padding: 0.3rem 0; border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--panel-text); }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); }

/* ---------- Bands ---------- */
.band { padding: 3.5rem 0; }
.band + .band { border-top: 1px solid var(--rule); }
.hero + .band { border-top: 0; }
.band.alt { background: var(--surface); }
.band.dark { background: var(--panel); color: var(--panel-text); border-top: 0; }
.band.dark .eyebrow { color: var(--accent); }
.band.dark a { color: var(--accent); }

.hero {
  background: var(--panel); color: var(--panel-text);
  padding: 4rem 0 4.5rem;
}
.hero .eyebrow { color: var(--accent); }
.hero a { color: var(--accent); }
.gold { color: var(--accent); }
.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.1rem);
  line-height: 1.08; letter-spacing: -0.03em; font-weight: 700;
  margin: 0 0 1.1rem; max-width: 18ch;
}
.hero p { font-size: 1.15rem; color: var(--panel-dim); max-width: 46ch; margin: 0; }

.eyebrow {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--link); margin: 0 0 0.75rem;
}

h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.2; letter-spacing: -0.02em;
     font-weight: 700; margin: 0 0 1rem; }
h3 { font-size: 1.0625rem; font-weight: 700; margin: 0 0 0.3rem; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-underline-offset: 0.15em; }
/* Focus indicators need 3:1 against their own background. Teal on navy is
   2.90:1, so navy surfaces get gold (7.38:1) and cream surfaces get navy
   (14.04:1). Gold on cream is 1.90:1 and must never be the default. */
a:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; border-radius: 2px; }
.site-header a:focus-visible,
.hero a:focus-visible,
.band.dark a:focus-visible,
.skip:focus { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

ul, ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
li { margin-bottom: 0.55rem; }

.lede { font-weight: 700; }

/* Vertical breaks between sub-sections inside one band. These exist as classes
   rather than inline style attributes because the content security policy sets
   style-src 'self', which strips attributes. An inline style works on localhost
   and silently vanishes in production. */
.spaced { margin-top: 2.5rem; }
.spaced-sm { margin-top: 2rem; }
.muted { color: var(--muted); }
.small { font-size: 0.9375rem; }

/* ---------- Grids and cards ---------- */
.grid { display: grid; gap: 1.1rem; }
.g2 { grid-template-columns: 1fr; }
.g3 { grid-template-columns: 1fr; }
.g4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 46rem) {
  .g2 { grid-template-columns: 1fr 1fr; }
  .g3 { grid-template-columns: repeat(3, 1fr); }
  .g4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: 10px; padding: 1.25rem 1.35rem;
}
.band.alt .card { background: var(--bg); }
.card.edge { border-top: 4px solid var(--rule); }

.pathway { display: flex; flex-direction: column; min-height: 8rem; }
.pathway .num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
.pathway .lab { margin-top: auto; font-weight: 700; font-size: 1.05rem; line-height: 1.25; }

.numbered { display: flex; gap: 1rem; align-items: flex-start; }
.numbered .n {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.95rem; color: var(--panel-text); background: var(--panel);
}

/* ---------- Provenance labels ---------- */
.labels { list-style: none; padding: 0; margin: 0; }
.labels li { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.85rem; }
.mark { flex: 0 0 auto; width: 1.15em; height: 1.15em; margin-top: 0.26em; }
.mark-inline {
  display: inline-block; width: 1em; height: 1em;
  margin: 0 0.1em; vertical-align: -0.14em;
}
.sprite { position: absolute; width: 0; height: 0; }

/* ---------- Emphasis ---------- */
.panel {
  background: var(--panel); color: var(--panel-text);
  border-radius: 12px; padding: 1.6rem 1.7rem;
}
.price { font-size: 2.1rem; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; line-height: 1; }
blockquote { margin: 0; }
blockquote p { font-size: 1.0625rem; }
.attrib {
  color: var(--muted); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5; margin: 0.6rem 0 0;
}
.band.dark .attrib { color: var(--accent); }

.cta { display: inline-block; background: var(--panel); color: var(--panel-text);
       text-decoration: none; font-weight: 700; padding: 0.8rem 1.4rem; border-radius: 8px; }
.cta:hover { background: #2C3A66; }
.band.dark .cta { background: var(--accent); color: var(--panel); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--hair); background: var(--surface);
  padding: 2.5rem 0; color: var(--muted); font-size: 0.9375rem;
}
.site-footer .cols { display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .site-footer .cols { grid-template-columns: 2fr 1fr; } }
.site-footer a { color: var(--link); }
.footlinks { list-style: none; padding: 0; margin: 0; }
.footlinks li { margin-bottom: 0.4rem; }

/* The four pathway edges and the numbered badges. Navy disappears against the
   dark background, so the first of the four flips to cream there. All four must
   read with equal weight in both themes, because the line above them says none
   is weighted ahead of another. */
.card.c1 { border-top-color: #1A2647; }
.card.c2 { border-top-color: #377874; }
.card.c3 { border-top-color: #D46047; }
.card.c4 { border-top-color: #E7AC52; }
.n1 { background: #1A2647; color: #FBF8F3; }
.n2 { background: #377874; color: #FBF8F3; }
.n3 { background: #A83E28; color: #FBF8F3; }   /* darkened: coral was 3.56:1 */
.n4 { background: #E7AC52; color: #1A2647; }
.n5 { background: #1A2647; color: #E7AC52; }


/* The header is fixed furniture, and on a phone it was taking a quarter of the
   screen before a word of content. Tighter below 46rem. */
@media (max-width: 46rem) {
  .site-header .wrap { padding-top: 0.85rem; padding-bottom: 0.85rem; gap: 0.75rem 1.5rem; }
  .brand svg { height: 2.7rem; }
  .brand .name { font-size: 0.95rem; }
  .brand .tag { font-size: 0.6875rem; line-height: 1.35; }
  .nav { gap: 0.55rem 1.1rem; }
  .nav a { font-size: 0.875rem; }
  .hero { padding: 2.75rem 0 3rem; }
  .band { padding: 2.75rem 0; }
}

/* The mark, explained. Art beside the text on a wide screen, above it on a
   phone. The keyline in this variant is cream, so it needs a cream ground. */
.markblock { display: grid; gap: 1.4rem; align-items: start; }
.markbig { height: 8rem; width: auto; }
.markblock-art {
  background: var(--bg); border: 1px solid var(--rule);
  border-radius: 10px; padding: 1.4rem; display: flex; justify-content: center;
}
.band.alt .markblock-art { background: var(--bg); }
@media (min-width: 40rem) { .markblock { grid-template-columns: 13rem 1fr; gap: 2rem; } }

/* ---------- Sample report ---------- */
/* Only sample.html uses these. A reading measure that can be put on a single
   element, rather than on a .wrap, because .narrow constrains children and a
   lone paragraph has none. */
.readable { max-width: 44rem; }

/* Seven column tables will not fit a phone. Each table gets its own horizontal
   scroller so the page body never scrolls sideways. No JavaScript involved. */
.tablewrap { position: relative; overflow-x: auto; margin: 0 0 1.4rem; }
.tablewrap table {
  border-collapse: collapse; width: 100%; min-width: 42rem;
  font-size: 0.9375rem;
}
.tablewrap caption { text-align: left; font-weight: 700; margin-bottom: 0.5rem; }
.tablewrap th, .tablewrap td {
  border: 1px solid var(--rule); padding: 0.6rem 0.7rem;
  text-align: left; vertical-align: top; line-height: 1.5;
}
.tablewrap thead th { background: var(--panel); color: var(--panel-text); }
.tablewrap tbody th { background: var(--bg); font-weight: 700; }
.tablewrap tbody td { background: var(--surface); }
.band.alt .tablewrap tbody th { background: var(--surface); }
.band.alt .tablewrap tbody td { background: var(--bg); }

/* The notice saying the student in the sample is not a real person. It has to
   read as a caution without borrowing the red of the unverified mark, so it is
   the navy panel rather than a coloured alert box. */
.stamp {
  background: var(--panel); color: var(--panel-text);
  border-radius: 12px; padding: 1.5rem 1.6rem; margin-bottom: 2.2rem;
}
.stamp p { color: var(--panel-dim); }
.stamp p.lede { color: var(--panel-text); }

/* The word a verification mark stands for, for anyone using a screen reader.
   The mark itself is decorative art and is hidden from the accessibility tree,
   so without this a whole column of the report is silent. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}