/* BrightKidz — the apex site.
 *
 * WORLD: THE PUBLISHER'S SHELF. This page's job is to show what has been made
 * and who made it, to an adult deciding whether to hand one of them to a child.
 * So the artifact leads and the interface recedes: one mark, one product block,
 * ordinary prose, and nothing that looks like a dashboard.
 *
 * IT IS A SIBLING OF sanadtech, DELIBERATELY, BECAUSE IT IS THE SAME COMPANY.
 * SANAD Technologies LLC publishes both. That site's world is "architectural
 * systems"; its ground (#f4f2ec ivory), ink (#232622), rule (#d6d8d0) and
 * forest-green accent (#28734f) are carried here unchanged. Wearing the
 * entity's colour is the point of an umbrella page — the library keeps its own
 * six inks, and this site wears the company's.
 *
 * The ivory also lands one shade off the library's warm board stock (#f4efe4),
 * so the two BrightKidz sites read as related without the apex pretending to be
 * a rulebook. That is the whole relationship: same family, different job.
 *
 * NOT THE LIBRARY'S RULEBOOK THEME (owner decision D2). Flat saturated inks,
 * 3px rules and hard offset shadows are addressed to a child. Four pages, two
 * of them legal documents, addressed to a parent, are not.
 *
 * TYPE IS THE SYSTEM STACK, AND THAT IS A CONSTRAINT RATHER THAN A CHOICE.
 * sanadtech self-hosts Manrope. Here a webfont would be the first binary asset
 * on a site whose no-remote-request rule is enforced by its own test suite, and
 * a hosted one would have a children's publisher's company page phoning Google
 * on load. So the craft goes into the scale, the tracking and the measure
 * instead, which is where it shows anyway.
 *
 * DARK MODE FROM THE SYSTEM ONLY -- no toggle. A toggle needs storage, a
 * pre-paint script and a control in the header, for four pages. The use scene
 * (a parent on a phone in the evening, or a laptop at work) is served by
 * honouring what they already told their OS.
 */

:root {
  --paper:   #f4f2ec;   /* sanadtech canvas */
  --panel:   #faf9f5;
  --ink:     #232622;
  --muted:   #5b6058;
  --rule:    #d6d8d0;
  --accent:  #28734f;   /* the entity's green */
  --accent-hi: #205c40;
  --on-accent: #ffffff;

  /* The library's six subject inks, used ONCE, in the mark. They are the only
     saturated colour on this site and they carry identity, not decoration. */
  --s1: #12676f; --s2: #5b3fa8; --s3: #1d7533;
  --s4: #935824; --s5: #b8324c; --s6: #3a5794;

  --measure: 38rem;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --radius: 6px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141714;
    --panel: #1c201c;
    --ink:   #edf1ec;
    --muted: #a7b0a8;
    --rule:  #2f352f;
    --accent: #83cba1;      /* lifted for contrast on the dark ground */
    --accent-hi: #a3ddba;
    --on-accent: #141714;
    color-scheme: dark;
  }
}

/* prefers-contrast wins over both, so it comes last. */
@media (prefers-contrast: more) {
  :root { --paper: #fff; --panel: #fff; --ink: #000; --muted: #000;
          --rule: #000; --accent: #0b4a30; --on-accent: #fff; }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; font-weight: 600;
}
.skip-link:focus { left: .5rem; top: .5rem; }

a { color: var(--accent-hi); text-underline-offset: .18em; text-decoration-thickness: .07em; }
@media (prefers-color-scheme: dark) { a { color: var(--accent); } }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ── masthead ──────────────────────────────────────────────────────────── */

.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem;
  padding: 1.5rem clamp(1.2rem, 5vw, 3rem) 1.4rem;
  max-width: 72rem; margin-inline: auto;
}
.wordmark {
  display: inline-flex; align-items: baseline; gap: .1rem;
  font-size: 1.2rem; font-weight: 620; letter-spacing: -.022em;
  color: var(--ink); text-decoration: none;
}
/* The one flourish: the second half of the name in the entity's green, so the
   wordmark is a mark rather than a word set in the body face. */
.wordmark em { font-style: normal; color: var(--accent-hi); }
@media (prefers-color-scheme: dark) { .wordmark em { color: var(--accent); } }

.top nav { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-left: auto; }
.top nav a {
  color: var(--muted); text-decoration: none;
  font-size: .935rem; letter-spacing: -.005em;
  padding-bottom: .15rem; border-bottom: 1.5px solid transparent;
}
.top nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.top nav a[aria-current] { color: var(--ink); font-weight: 560; border-bottom-color: var(--accent); }

/* ── the page ──────────────────────────────────────────────────────────── */

main { max-width: 72rem; margin-inline: auto; padding: 0 clamp(1.2rem, 5vw, 3rem) 1rem; }
main > *:not(.hero):not(.panel) { max-width: var(--measure); }

h1 {
  padding-top: clamp(1.6rem, 5vw, 3.4rem);
  font-size: clamp(2.1rem, 6.2vw, 3.4rem);
  line-height: 1.06; letter-spacing: -.034em; font-weight: 600;
  margin: 0 0 1.5rem; text-wrap: balance;
}
h2 {
  font-size: clamp(1.2rem, 2.4vw, 1.42rem);
  line-height: 1.25; letter-spacing: -.018em; font-weight: 600;
  /* More space above than below — the heading belongs to what follows it. */
  margin: 3.6rem 0 .9rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  text-wrap: balance;
}
h3 { font-size: 1.05rem; font-weight: 620; letter-spacing: -.012em; margin: 2.2rem 0 .5rem; }
h1 + h2 { border-top: 0; padding-top: 0; margin-top: 2.4rem; }
.hero + h2 { margin-top: 0; }

p { margin: 0 0 1.15rem; }
ul, ol { margin: 0 0 1.15rem; padding-left: 1.25rem; }
li { margin: .5rem 0; padding-left: .15rem; }
li::marker { color: var(--muted); }
strong { font-weight: 620; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .95rem; }
th, td { text-align: left; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--rule);
         vertical-align: top; }
th { font-weight: 620; }
.table-scroll { overflow-x: auto; }

/* ── hero: asymmetric, artifact-led ────────────────────────────────────── */

.hero-text h1 { padding-top: 0; }

.hero {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.2rem, 6vw, 4rem) 0 clamp(1.4rem, 3vw, 2.4rem);
}
@media (min-width: 56rem) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  /* Source order is mark-then-text so the phone reads artifact first; on a wide
     screen the text leads and the mark sits right of it. */
  .hero-mark { order: 2; justify-self: end; }
  .hero-text { order: 1; }
}
.hero-text > :last-child { margin-bottom: 0; }
.hero-text p {
  font-size: clamp(1.06rem, 1.6vw, 1.2rem);
  color: var(--muted); max-width: 34rem;
}
.hero-text p strong { color: var(--ink); font-weight: 560; }

/* The board: the same six regions as the library's home page and its app icon,
   drawn once, at a size where it reads as an object rather than a favicon. */
/* Small on a phone -- an object beside the headline, not a screenful
   before it. Full size only once there is a column to put it in. */
.hero-mark { width: 4.6rem; aspect-ratio: 1; }
@media (min-width: 56rem) { .hero-mark { width: min(16rem, 30vw); } }
.hero-mark svg { width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 8px 18px rgb(35 38 34 / .11)); }
@media (prefers-color-scheme: dark) {
  .hero-mark svg { filter: drop-shadow(0 8px 20px rgb(0 0 0 / .45)); }
}

/* THE ONE AUTHORED MOMENT. The six regions settle in, once, in board order.
   They start VISIBLE — the animation refines an already-correct page rather
   than revealing it, so a failed animation, a reduced-motion preference or a
   dead JS engine all leave the same finished mark. */
@media (prefers-reduced-motion: no-preference) {
  .hero-mark .region { animation: settle .85s var(--ease) backwards; }
  .hero-mark .region:nth-child(1) { animation-delay: .04s; }
  .hero-mark .region:nth-child(2) { animation-delay: .10s; }
  .hero-mark .region:nth-child(3) { animation-delay: .16s; }
  .hero-mark .region:nth-child(4) { animation-delay: .22s; }
  .hero-mark .region:nth-child(5) { animation-delay: .28s; }
  .hero-mark .region:nth-child(6) { animation-delay: .34s; }
}
@keyframes settle {
  from { opacity: 0; transform: translateY(9px); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ── the product panel ─────────────────────────────────────────────────── */

/* ONE PANEL, NOT A CARD GRID. There is one product. A grid of one is the tell
   that the layout was chosen before the content was counted; a second product
   gets a second panel below this one, which reads as a shelf rather than as a
   dashboard. */
.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  /* Wider than the measure so the panel reads as a shelf rather than a
     quote, but not the full 72rem: a 38rem paragraph inside a 72rem box
     is mostly empty box. */
  max-width: 52rem;
  margin: 1.6rem 0 2.2rem;
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel h3 { margin-top: 0; font-size: 1.3rem; letter-spacing: -.02em; }
.panel p { max-width: var(--measure); }
.panel .links { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

/* ── the two links that leave ──────────────────────────────────────────── */

.cta, .store {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .72rem 1.2rem; border-radius: var(--radius);
  text-decoration: none; font-weight: 580; font-size: .97rem;
  letter-spacing: -.008em;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.cta { background: var(--accent); color: var(--on-accent); border: 1px solid transparent; }
.cta:hover { background: var(--accent-hi); }
.store { border: 1px solid var(--rule); color: var(--ink); background: transparent; }
.store:hover { border-color: var(--accent); }
.store svg { width: 1.15rem; height: 1.15rem; flex: none; }

/* ── footer ────────────────────────────────────────────────────────────── */

.foot {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--rule);
  background: var(--panel);
}
.foot .inner {
  max-width: 72rem; margin-inline: auto;
  padding: 2.2rem clamp(1.2rem, 5vw, 3rem) 2.8rem;
  font-size: .89rem; color: var(--muted); line-height: 1.6;
}
.foot nav { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 0 0 1.1rem; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--ink); }
.foot p { margin: 0 0 .45rem; max-width: 46rem; }
.foot .pub { color: var(--ink); font-weight: 560; }

/* The six inks again, hairline, closing the page the way the mark opens it.
   Six 1px bands rather than a decorative divider: it is the only ornament, and
   it is the identity. */
.inks { display: flex; height: 3px; }
.inks span { flex: 1; }