/* Store pages: the same drafting-sheet system as the tests, laid out as a spec sheet. */
.site { max-width: 68rem; margin-inline: auto; display: flex; flex-direction: column; gap: 18px; }
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.masthead a { text-decoration: none; }
.masthead .mark { font: 800 1.5rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.masthead .mark small { display: block; font: 500 .6875rem/1.4 var(--mono); letter-spacing: .09em; color: var(--ink-2); }
.masthead nav { display: flex; gap: 16px; flex-wrap: wrap; }
.masthead nav a { font: 500 .75rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

.hero { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 60rem) { .hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } }
.hero h1 { font-size: clamp(2.4rem, 7.6vw, 4.2rem); }
.kicker { font: 500 .75rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

.buy { border: 1.5px solid var(--ink); display: flex; flex-direction: column; }
.buy .head { padding: 14px 16px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.buy .price { font: 800 3.4rem/.9 var(--display); }
.buy .body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.buy .btn { width: 100%; }
.buy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.buy li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 8px; }
.buy li::before { content: "✓"; font-weight: 600; color: var(--good); }

dl.spec { margin: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
dl.spec > div { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
dl.spec dt { font: 500 .75rem/1.7 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
dl.spec dd { margin: 0; }
@media (max-width: 30rem) { dl.spec > div { grid-template-columns: 1fr; gap: 2px; } }

.steps { counter-reset: s; margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li { border: 1px solid var(--rule); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.steps li::before { counter-increment: s; content: "Step " counter(s); font: 500 .6875rem/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }

details.faq { border: 1px solid var(--rule); }
details.faq + details.faq { border-top: 0; }
details.faq summary { cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font: 500 1.1rem/1 var(--mono); }
details.faq[open] summary::after { content: "−"; }
details.faq .a { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }

.legal h2 { margin-top: 8px; }
.legal p, .legal li { max-width: 68ch; }
.legal ul { margin: 0; padding-left: 1.25rem; display: grid; gap: 6px; }

.sitefoot { border-top: 1.5px solid var(--ink); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); font-size: .875rem; }
.sitefoot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.sitefoot nav a { font: 500 .75rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* full tests: picker */
.tests { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .tests { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.testcard { border: 1.5px solid var(--ink); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.testcard .val { font-size: 1.75rem; }
.skilltable { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.skilltable th, .skilltable td { border-bottom: 1px solid var(--rule); padding: 9px 8px; text-align: left; vertical-align: middle; }
.skilltable th { font: 500 .6875rem/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.skilltable td.n { text-align: right; font-family: var(--mono); white-space: nowrap; }
.meter { display: block; height: 10px; border: 1px solid var(--ink); min-width: 5rem; }
.meter > span { display: block; height: 100%; background: var(--ink); }
.notice { border: 1.5px solid var(--ink); background: var(--mark); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
/* written-test question parts (police and similar products) */
.stem p { margin: 0 0 .5em; }
.stem p:last-child { margin-bottom: 0; }
.stem .inst { font-size: 1rem; color: var(--ink-2); }
.stem u { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.blank { display: inline-block; width: 5.5em; border-bottom: 2px solid var(--ink); margin: 0 .2em; transform: translateY(-.15em); }
.choices.pair .choice { align-items: flex-start; }
.choices.pair .choice > span:last-child { padding-top: .45rem; line-height: 1.45; }
.passage table { border-collapse: collapse; margin: 0 0 1em; }
/* ParaPro parts: fractions, labels on underlined parts, data tables, wide charts, lists in passages */
.fr { white-space: nowrap; }
.fr sup, .fr sub { font-size: .72em; line-height: 0; }
.fr sub { vertical-align: -.25em; }
sup.tag { font: 600 .62em/0 var(--mono); margin-left: 2px; color: var(--ink-2); }
.stem .figure { margin: .4em 0 .7em; }
.figure.wide { max-width: 27rem; }
table.data { border-collapse: collapse; margin: .25em 0 .5em; font-variant-numeric: tabular-nums; font-size: 1rem; }
table.data caption { text-align: left; font-weight: 600; padding-bottom: 6px; }
table.data th, table.data td { border: 1px solid var(--rule); padding: 6px 12px; text-align: left; }
table.data thead th { font: 500 .75rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
table.data td { text-align: right; }
.passage ol, .passage ul { margin: 0; padding-left: 1.6em; max-width: 64ch; }
.passage li + li { margin-top: 6px; }

/* a notice's own heading inside a reading passage (not a numbered paragraph) */
.passage .phead { font-weight: 600; letter-spacing: .01em; border-bottom: 1px solid var(--rule); padding-bottom: 6px; max-width: 64ch; }

/* Offer pages (offers.py): status strip in the price box, short facts, an example, who it's for */
.buy .state { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--rule); font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.buy .state .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--good); }
.buy .state.preorder { background: var(--mark); }
.buy .state.preorder .dot { background: var(--accent); box-shadow: 0 0 0 1.5px var(--on-accent); }
.buy .state.made .dot { background: var(--ink-2); }
ul.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
ul.facts li { font: 500 .75rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--rule); padding: 6px 9px; }
figure.example { margin: 0; border: 1px solid var(--rule); border-left: 3px solid var(--ink); padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; max-width: 46rem; }
figure.example .ex { display: flex; flex-direction: column; gap: 10px; }
figure.example .ex p { max-width: 64ch; }
.fit { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fit > div { border: 1px solid var(--rule); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.fit ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; }
.notice p { max-width: 68ch; }

/* Soft theme, for offers outside the trades: warm paper, no grid, serif headings, sentence case */
body.theme-soft {
  --paper: #F7F1EC; --sheet: #FFFDFB; --ink: #3A2233; --ink-2: #765769; --rule: #E6D6DB;
  --grid: transparent; --accent: #A84D5C; --on-accent: #FFFFFF; --mark: #F8E7E5; --pick: #3A2233;
  --good: #2F7A55; --display: "Fraunces", Georgia, "Times New Roman", serif;
  background-image: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.theme-soft {
    --paper: #21151D; --sheet: #2C1D27; --ink: #F6E9EE; --ink-2: #CFB3C1; --rule: #543B4A;
    --accent: #E58C95; --on-accent: #21151D; --mark: #48293A; --pick: #E58C95; --good: #7FD6A8;
  }
}
:root[data-theme="dark"] body.theme-soft {
  --paper: #21151D; --sheet: #2C1D27; --ink: #F6E9EE; --ink-2: #CFB3C1; --rule: #543B4A;
  --accent: #E58C95; --on-accent: #21151D; --mark: #48293A; --pick: #E58C95; --good: #7FD6A8;
}
body.theme-soft h1, body.theme-soft h2, body.theme-soft .masthead .mark, body.theme-soft .buy .price { text-transform: none; letter-spacing: 0; }
body.theme-soft h1 { font-weight: 600; line-height: 1.04; font-size: clamp(2.2rem, 6.4vw, 3.6rem); }
body.theme-soft h2 { font-weight: 600; font-size: 1.7rem; }
body.theme-soft .masthead .mark { font-weight: 700; font-size: 1.55rem; }
body.theme-soft .buy .price { font-weight: 700; }
body.theme-soft .btn { font: 600 1.0625rem/1 var(--body); letter-spacing: .01em; text-transform: none; }
body.theme-soft .sheet, body.theme-soft .buy, body.theme-soft .cta, body.theme-soft .sitefoot { border-color: var(--rule); }
body.theme-soft .buy { border-width: 1.5px; box-shadow: 0 1px 0 var(--rule); }
body.theme-soft .btn { border-color: var(--ink); }
body.theme-soft .btn.primary { border-color: var(--accent); }
body.theme-soft .masthead .mark small { text-transform: uppercase; letter-spacing: .09em; }