/* Own It and Run It
   Brightest ground and highest contrast in the line, because the reader is
   fifteen and the sister sites are all built for a worried adult.
   The accent is a HIGHLIGHTER, not a text colour: links stay near-black with a
   yellow underline that fills on hover, so every piece of text sits at maximum
   contrast and the site looks like what it does.
   Quoted primary sources are set in monospace. No sibling uses monospace at all,
   and the split makes "the official words" and "what that means" visibly
   different things on the page.
   Every class name here is disjoint from all four sister sites. */

:root {
  --paper: #fffdf7;
  --card: #ffffff;
  --ink: #16161a;
  --ink-mid: #4a4a52;
  --ink-low: #6a6a73;
  --line: #dcdad0;
  --line-hard: #16161a;
  --mark: #ffd400;
  --mark-soft: #fff4b8;
  --warn-bg: #fff1e8;
  --warn-line: #e0a184;
  --sans: "Segoe UI", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Menlo, "DejaVu Sans Mono", Consolas, monospace;
  --hold: 42rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.09rem;
  line-height: 1.62;
}

h1, h2, h3 { line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: 2.05rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.35rem; margin: 2.5rem 0 0.7rem; }
h3 { font-size: 1.08rem; margin: 1.8rem 0 0.4rem; }
p, ul, ol { margin: 0 0 1.05rem; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.45rem; }
strong { font-weight: 700; }
img { max-width: 100%; height: auto; }

/* the highlighter: links are near-black, the mark does the signalling */
a {
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 -0.42em 0 var(--mark-soft);
  border-bottom: 2px solid var(--mark);
  transition: box-shadow 0.12s ease-in;
}
a:hover, a:focus { box-shadow: inset 0 -1.05em 0 var(--mark); }

.jumplink { position: absolute; left: -9999px; }
.jumplink:focus {
  left: 0.5rem; top: 0.5rem; z-index: 30; background: var(--ink); color: var(--paper);
  padding: 0.5rem 0.9rem; border: 0; box-shadow: none;
}

/* ---- frame -------------------------------------------------------------- */

.ribbon { background: var(--ink); color: var(--paper); }
.masthold { max-width: 64rem; margin: 0 auto; padding: 0.9rem 1.25rem 0; }

.brandmark { display: inline-block; border: 0; box-shadow: none; color: var(--paper); }
.brandmark:hover { box-shadow: none; }
.brandmark span:first-child {
  display: block; font-weight: 800; font-size: 1.22rem; letter-spacing: -0.02em;
}
.brandmark span:first-child::after {
  content: ""; display: inline-block; width: 0.62rem; height: 0.62rem;
  background: var(--mark); margin-left: 0.35rem;
}
.brandmark-tag { display: block; font-size: 0.85rem; color: #c9c8c2; margin-top: 0.08rem; }

.navrow { display: flex; flex-wrap: wrap; gap: 0 1.15rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.navrow-item a {
  display: inline-block; padding: 0.4rem 0 0.55rem; font-size: 0.87rem;
  color: #e6e5df; border-bottom: 3px solid transparent; box-shadow: none;
}
.navrow-item a:hover { color: #fff; border-bottom-color: var(--mark); box-shadow: none; }
.navrow-item a[aria-current] { color: #fff; border-bottom-color: var(--mark); font-weight: 700; }

.pageframe { max-width: 64rem; margin: 0 auto; padding: 1.6rem 1.25rem 4rem; }
.copyblock { max-width: var(--hold); }
.hardrule { border: 0; border-top: 2px solid var(--line-hard); margin: 2.8rem 0; max-width: var(--hold); }

/* ---- tables in body copy ------------------------------------------------
   The platform age matrix is the highest-value thing on the site and three
   columns do not fit the 42rem reading measure. A table inside a copyblock
   breaks out rightwards into the frame's empty margin, and scrolls sideways on
   a narrow screen rather than crushing the operator's own wording. Quoted
   wording inside a cell stays monospace, the same split the plain-words block
   makes: their words in mono, ours in sans. */

.copyblock table {
  display: block; overflow-x: auto;
  width: calc(100vw - 2.5rem); max-width: 60rem;
  border-collapse: collapse; margin: 1.7rem 0; font-size: 0.95rem;
}
.copyblock th, .copyblock td {
  border: 2px solid var(--line-hard); padding: 0.5rem 0.7rem;
  text-align: left; vertical-align: top;
}
.copyblock thead th { background: var(--mark); font-weight: 800; }
.copyblock tbody tr:nth-child(even) { background: var(--card); }
.copyblock td code, .copyblock th code {
  font-family: var(--mono); font-size: 0.86rem; line-height: 1.45;
}

.wayback { font-size: 0.84rem; color: var(--ink-low); margin: 0 0 1rem; }
.headblock { max-width: var(--hold); margin-bottom: 1.5rem; }
.stamped { font-size: 0.82rem; color: var(--ink-low); margin: 0.5rem 0 0; }

/* ---- the answer up front ------------------------------------------------ */

.answerbox {
  border: 2px solid var(--line-hard); border-radius: 4px; background: var(--card);
  padding: 1.05rem 1.2rem 0.6rem; margin: 0 0 1.9rem; max-width: var(--hold);
}
.answerbox-tag {
  font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 800;
  margin: 0 0 0.4rem; background: var(--mark); display: inline-block; padding: 0.12rem 0.4rem;
}

/* ---- the plain-words block: the site's whole method --------------------- */

.saidplain { margin: 1.9rem 0; max-width: var(--hold); }
.saidplain-tag {
  font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 800;
  color: var(--ink-mid); margin: 0 0 0.4rem;
}
.saidplain-official {
  font-family: var(--mono); font-size: 0.92rem; line-height: 1.55;
  background: var(--card); border: 2px solid var(--line-hard); border-radius: 4px;
  padding: 0.9rem 1rem; margin: 0;
}
.saidplain-cite {
  display: block; font-family: var(--sans); font-size: 0.78rem; color: var(--ink-low);
  margin-top: 0.55rem;
}
.saidplain-means {
  border-left: 6px solid var(--mark); padding: 0.15rem 0 0.15rem 0.95rem; margin: 0.85rem 0 0;
}
.saidplain-means p:last-child { margin-bottom: 0; }

/* ---- safety block (generated) ------------------------------------------ */

.watchout {
  background: var(--warn-bg); border: 2px solid var(--warn-line); border-radius: 4px;
  padding: 1.05rem 1.2rem 0.7rem; margin: 2rem 0; max-width: var(--hold);
}
.watchout-h { font-size: 1rem; font-weight: 800; margin: 0 0 0.7rem; }
.watchout-line { margin: 0 0 0.9rem; }
.watchout-line strong { display: block; margin-bottom: 0.15rem; }
.watchout-note { font-size: 0.97rem; margin: 0; }
.watchout-src { display: block; font-size: 0.78rem; color: var(--ink-low); margin-top: 0.25rem; }

/* ---- worked example, questions, sources -------------------------------- */

.storybit { border-left: 6px solid var(--line); padding: 0.1rem 0 0.1rem 0.95rem; margin: 1.8rem 0; max-width: var(--hold); }
.storybit-tag {
  font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-low); font-weight: 800; margin: 0 0 0.35rem;
}

.askrow { max-width: var(--hold); margin: 1.4rem 0 0; }
.askrow-q { font-weight: 700; margin: 1.3rem 0 0.3rem; }
.askrow-a { margin: 0 0 0.8rem; }

.sourcelist { max-width: var(--hold); margin: 2.2rem 0 0; }
.sourcelist-h { font-size: 1.05rem; font-weight: 800; margin: 0 0 0.6rem; }
.sourcelist-item { font-size: 0.94rem; margin: 0 0 0.6rem; }
.sourcelist-where { color: var(--ink-low); font-size: 0.85rem; font-family: var(--mono); }

/* ---- book box ----------------------------------------------------------- */

.booknote {
  border: 2px dashed var(--line-hard); border-radius: 4px; background: var(--card);
  padding: 1rem 1.2rem 0.85rem; margin: 2.4rem 0 0; max-width: var(--hold);
}
.booknote-h { font-size: 1rem; font-weight: 800; margin: 0 0 0.3rem; }
.booknote-blurb { font-size: 0.95rem; margin: 0 0 0.7rem; color: var(--ink-mid); }
.booknote-go { font-size: 0.95rem; margin: 0; }
.booknote-fine { font-size: 0.79rem; color: var(--ink-low); margin: 0.55rem 0 0; }

/* ---- hubs and cards ----------------------------------------------------- */

.hubintro { max-width: var(--hold); font-size: 1.1rem; color: var(--ink-mid); margin-bottom: 0.4rem; }
.hubtally { font-size: 0.83rem; color: var(--ink-low); margin-bottom: 1.8rem; font-family: var(--mono); }

.cardgrid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 46rem) { .cardgrid { grid-template-columns: 1fr 1fr; } }

.cardbox { background: var(--card); border: 2px solid var(--line-hard); border-radius: 4px; padding: 1rem 1.15rem 0.9rem; }
.cardbox-h { font-size: 1.04rem; font-weight: 700; margin: 0 0 0.35rem; }
.cardbox-note { font-size: 0.94rem; color: var(--ink-mid); margin: 0; }
.cardbox-count { font-size: 0.78rem; color: var(--ink-low); margin: 0.5rem 0 0; font-family: var(--mono); }

/* ---- the parent wing shifts register ------------------------------------ */

.grownups { border-top: 6px solid var(--ink); padding-top: 0.9rem; }
.grownups-tag {
  font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 800;
  margin: 0 0 0.5rem; background: var(--ink); color: var(--paper); display: inline-block;
  padding: 0.12rem 0.45rem;
}
body[data-who="parent"] { font-size: 1.04rem; }
body[data-who="parent"] { --hold: 40rem; }

/* ---- misc --------------------------------------------------------------- */

.readsafe { max-width: var(--hold); }
.fencelink { font-size: 0.94rem; background: var(--mark-soft); padding: 0.8rem 1rem; border-radius: 4px; margin: 1.5rem 0; max-width: var(--hold); }
.steplist { counter-reset: s; list-style: none; padding: 0; max-width: var(--hold); }
.steplist-item { counter-increment: s; position: relative; padding-left: 2.2rem; margin-bottom: 0.9rem; }
.steplist-item::before {
  content: counter(s); position: absolute; left: 0; top: 0.05rem;
  background: var(--mark); font-weight: 800; font-size: 0.85rem;
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%;
}
.missing { max-width: var(--hold); }
.missing-h { font-size: 1.7rem; }

/* ---- footer ------------------------------------------------------------- */

.footzone { background: var(--ink); color: #d6d5cf; padding: 2.2rem 1.25rem 2.8rem; font-size: 0.88rem; }
.footzone > div { max-width: 64rem; margin: 0 auto; }
.footzone ul { display: flex; flex-wrap: wrap; gap: 0 1.2rem; list-style: none; padding: 0; margin: 0 0 1.1rem; }
.footzone a { color: #fff; box-shadow: none; border-bottom: 2px solid var(--mark); }
.footzone a:hover { box-shadow: none; background: var(--mark); color: var(--ink); }
.footzone p { max-width: 48rem; margin: 0 0 0.8rem; }

@media print {
  .navrow, .wayback, .booknote { display: none; }
  body { background: #fff; font-size: 11pt; }
  a { box-shadow: none; border-bottom: 0; text-decoration: underline; }
}