/* PrinterGuide Hub — see design-system/MASTER.md
   Swiss Modernism 2.0 / editorial. Typography and rules carry the hierarchy.
   Deliberately never uses a product grid: see the note above .ref. */

:root {
  --paper:      #FDFCFA;
  --surface:    #F5F2ED;
  --ink:        #1A1917;
  --ink-muted:  #5C5750;
  --accent:     #1B4D89;
  --accent-hi:  #143a68;
  --accent-ink: #FFFFFF;
  --rule:       #E3DED5;
  --edge:       #8C857A;
  --flag:       #FDF6E3;
  --flag-rule:  #E4D9B8;

  --serif: Newsreader, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Public Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --s1: .5rem;  --s2: .75rem; --s3: 1rem;  --s4: 1.5rem;
  --s5: 2.5rem; --s6: 4rem;   --s7: 6rem;

  --measure: 68ch;
  --shell: 60rem;
  --step--1: .875rem; --step-0: 1.125rem; --step-1: 1.35rem;
  --step-2: 1.7rem;   --step-3: 2.25rem;
  --fast: 160ms cubic-bezier(.33, 1, .68, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16151A; --surface: #1F1E24; --ink: #EDEBE7; --ink-muted: #A9A49B;
    --accent: #8FB6E0; --accent-hi: #B2CDEC; --accent-ink: #16151A;
    --rule: #33313A; --edge: #6E6A75; --flag: #2A2418; --flag-rule: #4A3F22;
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0)/1.7 var(--serif);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--shell); margin-inline: auto; padding-inline: var(--s4); }

/* Long-form reading measure. Applied to text, not to structural rows. */
main p, main li, main dd, .lede, .art-list p, .refs-note { max-width: var(--measure); }

a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hi); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; letter-spacing: -.011em; line-height: 1.22; }
h1 { font-size: var(--step-3); margin: var(--s5) 0 var(--s2); }
h2 { font-size: var(--step-2); margin: var(--s5) 0 var(--s2); }
h3 { font-size: var(--step-1); margin: var(--s4) 0 var(--s1); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--accent); color: var(--accent-ink);
  font: 600 var(--step--1) var(--sans); padding: var(--s2) var(--s3);
}
.skip:focus { left: 0; }

/* ---------------------------------------------------- compliance notices --
   The disclosure bar is required above all content on every page. Styled as a
   masthead standfirst rather than a banner ad, so it reads as part of the
   publication instead of something to dismiss. */
.disclosure {
  background: var(--flag);
  border-bottom: 1px solid var(--flag-rule);
  font: 400 var(--step--1)/1.6 var(--sans);
  padding: var(--s2) var(--s4);
  text-align: center;
}
.disclosure strong { font-weight: 600; }

.disclaimer, .notice {
  background: var(--surface);
  border-left: 3px solid var(--ink-muted);
  padding: var(--s3) var(--s4);
  margin: var(--s4) 0;
  font-size: var(--step--1);
  line-height: 1.65;
}
.disclaimer h2 {
  font: 600 .78rem/1.3 var(--sans);
  letter-spacing: .09em; text-transform: uppercase;
  margin: 0 0 var(--s1); color: var(--ink-muted);
}
.disclaimer p:last-child, .notice p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- masthead -- */
.site-header { border-bottom: 2px solid var(--ink); padding-top: var(--s4); }
.brand { display: block; text-decoration: none; color: inherit; }
.brand-name {
  display: block; font: 600 var(--step-3)/1.1 var(--serif); letter-spacing: -.02em;
}
.brand-tag {
  display: block; font: 400 var(--step--1)/1.5 var(--sans);
  color: var(--ink-muted); margin-top: .35rem;
}
.site-header nav { margin-top: var(--s3); }
.site-header nav ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--s4);
  margin: 0; padding: 0 0 var(--s2);
}
.site-header nav a {
  display: inline-block; padding: var(--s1) 0;
  font: 500 var(--step--1) var(--sans); text-decoration: none;
  color: var(--ink); border-bottom: 2px solid transparent;
  transition: border-color var(--fast), color var(--fast);
}
.site-header nav a:hover { color: var(--accent); border-bottom-color: var(--rule); }
.site-header nav a[aria-current] { border-bottom-color: var(--accent); color: var(--accent); }

main { padding-bottom: var(--s7); }

/* --------------------------------------------------------------- footer -- */
.site-footer {
  border-top: 1px solid var(--rule); background: var(--surface);
  padding: var(--s5) 0; margin-top: var(--s6);
  font: 400 var(--step--1)/1.65 var(--sans); color: var(--ink-muted);
}
.site-footer nav ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
  margin: var(--s3) 0; padding: 0;
}
.foot-independent, .foot-legal { max-width: var(--measure); }
.foot-legal { margin-bottom: 0; }

/* ----------------------------------------------------------- long-form -- */
.crumbs { font: 400 var(--step--1) var(--sans); color: var(--ink-muted); padding-top: var(--s4); }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-muted); margin-top: 0; }
.art-date, .art-sec { font: 400 .78rem var(--sans); color: var(--ink-muted); }
.art-sec { text-transform: uppercase; letter-spacing: .08em; }

.post h2 { padding-bottom: var(--s1); border-bottom: 1px solid var(--rule); }
.post ol, .post ul { padding-left: 1.3rem; }
.post li { margin-bottom: var(--s1); }
.post li::marker { color: var(--ink-muted); }

.hero { padding-top: var(--s4); }
.hero h1 { margin-top: var(--s3); }

/* Article indexes are rules-and-whitespace lists, never tiles. */
.art-list { list-style: none; padding: 0; margin: var(--s3) 0 0; }
.art-list li { border-top: 1px solid var(--rule); padding: var(--s3) 0; }
.art-list li:last-child { border-bottom: 1px solid var(--rule); }
.art-list > li > a {
  font: 600 var(--step-1)/1.3 var(--serif); text-decoration: none; color: var(--ink);
}
.art-list > li > a:hover { color: var(--accent); text-decoration: underline; }
.art-list p { margin: var(--s1) 0 .35rem; color: var(--ink-muted); font-size: 1rem; }

.col-list { margin-top: var(--s3); }
.col { border-top: 1px solid var(--rule); padding: var(--s3) 0; }
.col h3 { margin: 0 0 .25rem; }
.col h3 a { text-decoration: none; }
.col h3 a:hover { text-decoration: underline; }
.col p { margin: 0; color: var(--ink-muted); font-size: 1rem; }

.inline-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); padding: 0; }
.what-we-are ul { padding-left: 1.3rem; }
.what-we-are li { margin-bottom: var(--s1); max-width: var(--measure); }

/* ------------------------------------------------- product reference row --
   NOT a grid and never becomes one: a grid of equal tiles is the single
   strongest visual cue that a page is a shop. Each entry is a horizontal
   editorial row, stacked vertically, separated by a rule — the same shape as
   a reference list in a printed guide. No price, no badge, no stock, no
   urgency, one outbound link. */
.refs { margin-top: var(--s5); }
.refs-note { font-size: var(--step--1); color: var(--ink-muted); }

.ref {
  display: flex; gap: var(--s4); align-items: flex-start;
  border-top: 1px solid var(--rule); padding: var(--s4) 0;
}
.ref:last-of-type { border-bottom: 1px solid var(--rule); }
.ref-img {
  flex: 0 0 auto; width: 104px; height: 104px;
  object-fit: contain; background: var(--surface); padding: var(--s1);
  border-radius: 2px;
}
.ref-body { flex: 1 1 auto; min-width: 0; }
.ref-title { margin: 0 0 var(--s1); font-size: var(--step-1); line-height: 1.3; }
.ref-note { margin: 0 0 var(--s2); }

.ref-specs { margin: var(--s2) 0; font: 400 var(--step--1)/1.6 var(--sans); }
.ref-specs > div {
  display: flex; gap: var(--s3);
  padding: .3rem 0; border-bottom: 1px solid var(--rule);
}
.ref-specs > div:first-child { border-top: 1px solid var(--rule); }
.ref-specs dt { flex: 0 0 10rem; font-weight: 600; color: var(--ink-muted); }
.ref-specs dd { margin: 0; min-width: 0; }

.ref-meta { font: 400 var(--step--1)/1.5 var(--sans); color: var(--ink-muted); margin: var(--s2) 0; }
.ref-asof { display: block; font-size: .78rem; }

.ref-cta { margin: var(--s3) 0 0; }
.btn-amazon {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--s1) var(--s4);
  background: var(--accent); color: var(--accent-ink);
  font: 600 var(--step--1) var(--sans); text-decoration: none; border-radius: 2px;
  transition: background var(--fast);
}
.btn-amazon:hover { background: var(--accent-hi); color: var(--accent-ink); }
.ref-cta-note { display: block; font: 400 .78rem var(--sans); color: var(--ink-muted); margin-top: var(--s1); }

/* ---------------------------------------------------------------- forms -- */
.form { max-width: 34rem; margin-top: var(--s3); }
.form label { display: block; font: 600 var(--step--1) var(--sans); margin-bottom: .3rem; }
.form input, .form textarea, .form select {
  width: 100%; min-height: 44px; padding: var(--s1) var(--s2);
  border: 1px solid var(--edge); border-radius: 2px;
  background: var(--paper); color: var(--ink);
  font: 400 1rem var(--sans);
}
.form textarea { line-height: 1.6; }
.form button {
  min-height: 44px; padding: var(--s1) var(--s5);
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 2px;
  font: 600 var(--step--1) var(--sans); cursor: pointer;
  transition: background var(--fast);
}
.form button:hover { background: var(--accent-hi); }

.errors, .success {
  font: 400 var(--step--1)/1.6 var(--sans);
  padding: var(--s2) var(--s3); margin: var(--s3) 0;
  max-width: var(--measure);
}
.errors { background: var(--surface); border-left: 3px solid #A3311F; }
.success { background: var(--surface); border-left: 3px solid #1F6B38; }
ul.errors { padding-left: var(--s5); }

/* ----------------------------------------------------------- responsive -- */
@media (min-width: 46rem) {
  .col-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s5); }
  .disclosure { padding-inline: var(--s5); }
}

@media (max-width: 34rem) {
  :root { --step-3: 1.85rem; --step-2: 1.45rem; --step-1: 1.2rem; }
  .ref { display: block; }
  .ref-img { margin-bottom: var(--s2); }
  .ref-specs > div { display: block; }
  .ref-specs dt { margin-bottom: .1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .disclosure, .site-header nav, .site-footer nav, .ref-cta { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .ref, .art-list li { break-inside: avoid; }
}