/* ==========================================================================
   Ciaosoos — the inspection sheet
   One hand-written stylesheet for the whole site. No build step, no script,
   no third-party request: the one hosted font is served from /fonts/.

   Concept: a product-testing bulletin, not a lifestyle blog. Cool mist paper,
   grotesque + mono, hairline rules. Two accent hues only, used semantically —
   orange means "warning, look here", green means "verified, pass" — and
   never decoratively. No gradients, shadows deeper than 1px, or corners
   rounder than 2px.
   ========================================================================== */

/* --- 1. The one hosted face --------------------------------------------- */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-var-latin.woff2") format("woff2");
}

/* --- 2. Tokens ----------------------------------------------------------- */

:root {
  --paper:       #EFF3F2;  /* page — cool mist gray-green            */
  --paper-raised:#FAFCFB;  /* cards, checklist boxes, at-a-glance    */
  --ink:         #0F1B21;  /* body — deep slate blue-black           */
  --ink-soft:    #44565E;  /* secondary, captions, datelines         */
  --rule:        #C2CDD0;  /* hairlines, table borders, ledger lines */
  --flag:        #D9481C;  /* inspection orange — warnings, links    */
  --pass:        #1D6A5A;  /* verification green — pass marks        */
  --flag-tint:   #F7E3DA;  /* red-flag callout background            */
  --pass-tint:   #DDEAE5;  /* green-flag callout background          */

  --sans: "Archivo", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --measure: 68ch;   /* the reading column           */
  --rail: 200px;     /* the right margin rail        */
  --gap: 32px;      /* column ↔ rail gutter          */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px;
}

/* --- 3. Base ------------------------------------------------------------- */

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 700px) { body { font-size: 18px; } }

a { color: var(--flag); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s2);
  text-wrap: balance;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; margin-top: var(--s8); }
h3 { font-size: 1.05rem; margin-top: var(--s4); }
@media (min-width: 700px) { h1 { font-size: 2.5rem; } }

p, ul, ol { margin: 0 0 var(--s3); max-width: var(--measure); }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s6) 0; }

figure { margin: var(--s4) 0; }
img { max-width: 100%; height: auto; display: block; }
figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: var(--s1);
}

table { border-collapse: collapse; width: 100%; max-width: var(--measure); margin: 0 0 var(--s3); }
th, td { text-align: left; padding: var(--s1) var(--s2); border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: var(--mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
td.num, th.num { font-family: var(--mono); font-size: 0.85rem; }

::selection { background: var(--pass-tint); }

/* --- 4. Shell ------------------------------------------------------------ */

.shell {
  max-width: calc(var(--measure) + var(--gap) + var(--rail) + 2 * var(--s3));
  margin-inline: auto;
  padding-inline: var(--s3);
}

/* --- 5. Masthead + nav --------------------------------------------------- */

.masthead { padding-top: var(--s4); }

.masthead .word {
  font-stretch: 118%;
  font-weight: 800;
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}
.masthead .word a { color: var(--ink); text-decoration: none; }
.masthead .word a:hover { color: var(--flag); }

.masthead .dek {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: var(--s1) 0 0;
  max-width: none;
}

.masthead .brandrule { margin: var(--s2) 0 0; border-top: 1px solid var(--ink); }

nav.sitenav {
  border-bottom: 1px solid var(--rule);
  padding: var(--s1) 0;
  margin-bottom: var(--s6);
}
nav.sitenav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  max-width: none;
}
nav.sitenav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
nav.sitenav a:hover,
nav.sitenav a[aria-current="page"] { color: var(--flag); }

/* --- 6. The mono register ------------------------------------------------ */

.dateline, .kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: none;
}
.dateline { margin: var(--s2) 0 var(--s4); }
.kicker { margin: 0 0 var(--s1); }

.secnum {
  font-family: var(--mono);
  font-size: 0.8em;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-right: 0.6em;
}

/* Inline flag tags. Colour is never the only signal: the word is the tag. */
.tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 2px;
  white-space: nowrap;
}
.tag.red   { background: var(--flag-tint); color: var(--flag); border: 1px solid var(--flag); }
.tag.green { background: var(--pass-tint); color: var(--pass); border: 1px solid var(--pass); }
.tag.check { background: var(--paper-raised); color: var(--ink-soft); border: 1px solid var(--rule); }

/* --- 7. Article layout: column + margin rail ----------------------------- */

.article { max-width: var(--measure); }

.dek-line {
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: var(--s2) 0 0;
}

/* Margin notes float into the rail on wide screens (Tufte-style),
   and collapse to small tinted blocks inline on narrow ones. */
.mnote {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.mnote a { color: var(--ink-soft); }
@media (min-width: 1024px) {
  .mnote {
    float: right;
    clear: right;
    width: var(--rail);
    margin-right: calc(-1 * (var(--rail) + var(--gap)));
    margin-top: 4px;
    border-top: 1px solid var(--rule);
    padding-top: var(--s1);
  }
}
@media (max-width: 1023.9px) {
  .mnote {
    display: block;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: var(--s1) var(--s2);
    margin: var(--s2) 0;
  }
}

/* --- 8. The franchise devices -------------------------------------------- */

/* At a glance — the article's promise, skimmable in ten seconds. */
.glance {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--pass);
  border-radius: 2px;
  padding: var(--s2) var(--s3);
  margin: var(--s4) 0;
  max-width: var(--measure);
}
.glance .kicker { color: var(--pass); }
.glance ul { list-style: none; margin: 0; padding: 0; }
.glance li { padding-left: 1.5em; text-indent: -1.5em; margin-bottom: var(--s1); }
.glance li::before { content: "☐ "; color: var(--pass); font-family: var(--mono); }

/* The Checklist — every service article ends in one that could stand alone. */
.checklist {
  background: var(--paper-raised);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: var(--s3) var(--s4);
  margin: var(--s6) 0;
  max-width: var(--measure);
}
.checklist ol { margin: 0; padding-left: 1.4em; }
.checklist li { margin-bottom: var(--s1); }
.checklist li::marker { font-family: var(--mono); font-size: 0.85em; color: var(--flag); }

/* Callout blocks, tinted by meaning. */
.callout {
  border-radius: 2px;
  padding: var(--s2) var(--s3);
  margin: var(--s3) 0;
  max-width: var(--measure);
}
.callout.red   { background: var(--flag-tint); border-left: 3px solid var(--flag); }
.callout.green { background: var(--pass-tint); border-left: 3px solid var(--pass); }
.callout > :last-child { margin-bottom: 0; }

/* Claim vs. Fact — a marketing line against what the source says. */
.claimfact {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--rule);
  border-radius: 2px;
  margin: var(--s4) 0;
  max-width: var(--measure);
}
@media (min-width: 700px) { .claimfact { grid-template-columns: 1fr 1fr; } }
.claimfact > div { padding: var(--s2) var(--s3); }
.claimfact .claim { background: var(--flag-tint); }
.claimfact .fact  { background: var(--pass-tint); }
.claimfact .kicker { margin-bottom: var(--s1); }
.claimfact .claim .kicker { color: var(--flag); }
.claimfact .fact  .kicker { color: var(--pass); }
.claimfact p { margin: 0; }

/* --- 9. Homepage: the desk sheet ----------------------------------------- */

.mission-line { font-size: 1.1rem; color: var(--ink-soft); max-width: var(--measure); margin: var(--s3) 0 0; }

.sheet-section { margin-top: var(--s8); }
.sheet-section > .kicker { border-bottom: 1px solid var(--ink); padding-bottom: var(--s1); }

/* Problem index — the reader's words, two columns on desktop. */
.problems { list-style: none; margin: var(--s3) 0 0; padding: 0; max-width: none;
  display: grid; grid-template-columns: 1fr; gap: 0 var(--s6); }
@media (min-width: 700px) { .problems { grid-template-columns: 1fr 1fr; } }
.problems li { border-bottom: 1px solid var(--rule); }
.problems a {
  display: block;
  padding: var(--s2) 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.problems a::before { content: "→ "; font-family: var(--mono); color: var(--flag); }
.problems a:hover { color: var(--flag); }

/* Lead slot — the flagship. */
.lead {
  display: grid; grid-template-columns: 1fr; gap: var(--s4);
  border: 1px solid var(--ink); border-radius: 2px;
  background: var(--paper-raised);
  padding: var(--s4);
  margin-top: var(--s3);
}
@media (min-width: 860px) { .lead { grid-template-columns: 5fr 4fr; align-items: center; } }
.lead h2 { margin-top: 0; font-size: 1.6rem; }
.lead .excerpt { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.lead .excerpt li { margin-bottom: var(--s2); padding-left: 0; }
.lead .excerpt .tag { margin-right: 0.6em; }
.lead figure { margin: 0; }

/* Ledger rows — hubs and homepage strands. */
.ledger { list-style: none; margin: var(--s2) 0 0; padding: 0; max-width: none; }
.ledger li { border-bottom: 1px solid var(--rule); }
.ledger a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s1) var(--s3);
  align-items: baseline;
  padding: var(--s2) 0;
  color: var(--ink);
  text-decoration: none;
}
@media (min-width: 700px) { .ledger a { grid-template-columns: 7ch 1fr; } }
.ledger .lnum {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.ledger .ltitle { font-weight: 700; }
.ledger .lhook { grid-column: 2; color: var(--ink-soft); font-size: 0.9rem; margin: 0; }
.ledger a:hover .ltitle { color: var(--flag); }

/* --- 10. Forms ------------------------------------------------------------ */

form.contact { max-width: var(--measure); }
.field { margin-bottom: var(--s3); }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s1);
}
.field input, .field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: var(--s1) var(--s2);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--pass); outline-offset: 0; border-color: var(--pass); }
.field textarea { min-height: 10rem; resize: vertical; }

/* The honeypot lives off-canvas, not display:none — some scripts skip
   fields the layout engine dropped. Real assistive tech is told to skip it. */
.hp-wrap { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }

button[type="submit"] {
  font: inherit;
  font-weight: 700;
  color: var(--paper-raised);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: var(--s1) var(--s4);
  cursor: pointer;
}
button[type="submit"]:hover { background: var(--flag); border-color: var(--flag); }

/* --- 11. Footer ----------------------------------------------------------- */

footer.colophon {
  margin-top: calc(var(--s8) * 1.5);
  border-top: 1px solid var(--ink);
  padding: var(--s4) 0 var(--s8);
}
.footcols {
  display: grid; grid-template-columns: 1fr; gap: var(--s4);
}
@media (min-width: 700px) { .footcols { grid-template-columns: 1fr 1fr 1fr; } }
.footcols ul { list-style: none; margin: 0; padding: 0; }
.footcols li { margin-bottom: var(--s1); }
.footcols a { color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; }
.footcols a:hover { color: var(--flag); }
.footcols .kicker { margin-bottom: var(--s2); }
.footmark .word {
  font-stretch: 118%; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; font-size: 0.95rem;
}
.footmark .tagline { font-size: 0.85rem; color: var(--ink-soft); margin: var(--s1) 0; }
.footmark .copy { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); margin: 0; }

/* --- 12. Sources ----------------------------------------------------------- */

.sources {
  border-top: 1px solid var(--rule);
  margin-top: var(--s8);
  padding-top: var(--s3);
  max-width: var(--measure);
}
.sources ul { list-style: none; margin: 0; padding: 0; }
.sources li {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.6;
  margin-bottom: var(--s1);
  padding-left: 1.5em;
  text-indent: -1.5em;
}
.sources li::before { content: "▸ "; color: var(--flag); }
.sources a { color: var(--ink); }

/* --- 13. Print: the checklists keep working on paper ----------------------- */

@media print {
  nav.sitenav, footer.colophon, .lead figure { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: none; }
  .checklist, .glance, .claimfact, .callout { border: 1px solid #000; background: #fff; break-inside: avoid; }
  .mnote { float: none; width: auto; margin: 6pt 0; border: 1px solid #000; padding: 4pt 6pt; }
  .sources a::after { content: " (" attr(href) ")"; font-size: 8pt; }
}