/* quietguardinsights.com: the company home of the QuietGuard family.
   Same font (Outfit) and colours as every family site (Robert, 2026-10-07: one font across the whole Group).
   What makes it the business site is the layout: hairline rules, figures, square corners, calm spacing. */

@font-face { font-family: "Outfit"; font-weight: 100 900; font-display: swap; src: url("fonts/outfit-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-weight: 100 900; font-display: swap; src: url("fonts/outfit-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #f5f6fa;
  --surface: #ffffff;
  --tint: #eceef5;
  --ink: #141a2e;
  --ink-2: #394158;
  --muted: #646c82;
  --rule: #dde1ec;
  --rule-strong: #141a2e;
  --navy: #2f3d6b;
  --navy-2: #40518a;
  --green: #4f9a5a;
  --band: #141a2e;
  --band-ink: #e9ecf5;
  --band-muted: #9aa2bb;
  --ph: #a8681a;
  --serif: "Outfit", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; /* one family font; name kept for the headline role */
  --sans: "Outfit", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
/* Family rule (Robert, 2026-10-07): light for everyone by default, never switched by the device setting.
   Dark only when the visitor picks it with the header switch. Dark stays in the brand's navy, just softer and
   lighter (Robert, 2026-10-07: "stay with blue, just lighter"), never near-black and never a different palette. */
:root[data-theme="dark"] {
  --paper: #222b45; --surface: #29334f; --tint: #27304c; --ink: #eef1f8; --ink-2: #cdd3e4; --muted: #a0a9c3;
  --rule: #3a4566; --rule-strong: #d6dcec; --navy: #bccaf3; --navy-2: #a9b8ea; --green: #7cc387;
  --band: #1b2239; --band-ink: #eef1f8; --band-muted: #a0a9c3; --ph: #e6b064; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--navy); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--navy-2) 25%, transparent); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 10; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand svg { width: 30px; height: 30px; color: var(--navy-2); flex: none; }
.brand .name { font-weight: 640; font-size: 1.08rem; letter-spacing: -0.01em; }
.brand .suffix { font-weight: 400; color: var(--muted); padding-left: 10px; margin-left: 10px; border-left: 1px solid var(--rule); }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 0.94rem; padding: 8px 10px; border-radius: 3px; }
.nav a:hover { color: var(--ink); background: var(--tint); }
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }
.theme-toggle { width: 36px; height: 36px; border: 1px solid var(--rule); background: transparent; color: var(--ink-2); border-radius: 50%; cursor: pointer; display: inline-grid; place-items: center; }
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-2); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
.header-tools { display: flex; align-items: center; gap: 8px; }
.menu { display: none; }
/* 8 menu items (incl. Home): the Menu button takes over below 1080px so the bar never wraps. */
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; border: 1px solid var(--rule); padding: 8px 14px; font-size: 0.92rem; border-radius: 3px; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] summary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .menu .panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(300px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--rule); box-shadow: 0 18px 40px rgba(10, 14, 30, .14); z-index: 20; padding: 8px; }
  .menu .panel a { display: block; padding: 12px 12px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
  .menu .panel a:last-of-type { border-bottom: 0; }
}

/* ---------- Type ---------- */
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
h1 { font-size: clamp(2.2rem, 4.8vw, 3.7rem); line-height: 1.08; margin: 0 0 22px; font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.15; margin: 0 0 16px; font-weight: 600; }
h3 { font-size: 1.32rem; line-height: 1.25; margin: 0 0 8px; }
p { margin: 0 0 16px; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.28rem); color: var(--ink-2); max-width: 46rem; line-height: 1.55; }
.eyebrow { font-family: var(--sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; }
.eyebrow .num { color: var(--ink); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 0.86rem; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Layout blocks ---------- */
.hero { padding: clamp(48px, 8vw, 104px) 0 clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--rule); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: end; }
.page-head { padding: clamp(40px, 7vw, 88px) 0 clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--rule); }
.page-head h1 { max-width: 20ch; }
.section { padding: clamp(48px, 7vw, 96px) 0; border-bottom: 1px solid var(--rule); }
.section:last-of-type { border-bottom: 0; }
.section.tint { background: var(--tint); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(20px, 5vw, 72px); margin-bottom: clamp(28px, 4vw, 48px); align-items: start; }
.section-head h2 { margin: 0; }
.section-head p { margin: 0; color: var(--ink-2); }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 48px); }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(24px, 5vw, 72px); }
@media (max-width: 860px) {
  .hero-grid, .section-head, .split, .cols-2 { grid-template-columns: 1fr; }
  .cols-3 { grid-template-columns: 1fr; }
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Rule-topped items: the house style instead of rounded cards */
.item { border-top: 1px solid var(--rule-strong); padding-top: 18px; }
.item h3 { margin-bottom: 10px; }
.item p { color: var(--ink-2); margin-bottom: 12px; }
.item .more { font-weight: 550; font-size: 0.95rem; text-decoration: none; }
.item .more::after { content: " \2192"; }
.item .more:hover { text-decoration: underline; }

/* At-a-glance panel */
.glance { border-top: 2px solid var(--rule-strong); }
.glance dl { margin: 0; }
.glance .row { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.glance dt { color: var(--ink-2); font-size: 0.95rem; }
.glance dd { margin: 0; font-family: var(--serif); font-size: 1.5rem; font-variant-numeric: tabular-nums lining-nums; }
.glance .note { font-size: 0.8rem; color: var(--muted); margin-top: 12px; }

/* Key figures */
.figure { border-top: 1px solid var(--rule-strong); padding-top: 16px; }
.figure .value { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em; }
.figure .value small { font-size: 0.45em; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.figure .label { margin-top: 10px; color: var(--ink-2); font-size: 0.95rem; }
.figure .src { margin-top: 4px; color: var(--muted); font-size: 0.8rem; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 3px; font-weight: 550; font-size: 0.97rem; text-decoration: none; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--tint); color: var(--ink); border-color: var(--ink); }

/* Product rows */
.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(24px, 5vw, 72px); padding: clamp(32px, 5vw, 56px) 0; border-top: 1px solid var(--rule-strong); }
.product:first-of-type { border-top: 0; padding-top: 0; }
.product .tag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.product .tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.product h2 { margin-top: 10px; }
.product ul { padding-left: 1.1em; margin: 0 0 16px; color: var(--ink-2); }
.product li { margin-bottom: 6px; }
.facts { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 8px 0 20px; }
.facts th, .facts td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.facts th { color: var(--muted); font-weight: 500; width: 38%; padding-right: 16px; }
@media (max-width: 860px) { .product { grid-template-columns: 1fr; } }

/* Shots */
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.shot { margin: 0; border: 1px solid var(--rule); background: var(--surface); }
.shot img { display: block; width: 100%; height: 260px; object-fit: contain; background: var(--tint); }
.shot figcaption { padding: 12px 14px; font-size: 0.86rem; color: var(--ink-2); border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 12px; }
@media (max-width: 860px) { .shots { grid-template-columns: 1fr; } }

/* Quote / statement */
.statement { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3; font-weight: 500; max-width: 30ch; margin: 0; }

/* Audience links */
.routes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.routes a { display: block; padding: 22px 22px 26px 0; text-decoration: none; color: var(--ink); border-right: 1px solid var(--rule); padding-left: 22px; }
.routes a:first-child { padding-left: 0; }
.routes a:last-child { border-right: 0; }
.routes a strong { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.2rem; margin-bottom: 6px; }
.routes a span { color: var(--ink-2); font-size: 0.93rem; }
.routes a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 860px) {
  .routes { grid-template-columns: 1fr; }
  .routes a, .routes a:first-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* ---------- Insights list ---------- */
.insight-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.insight-list li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.insight-list time { color: var(--muted); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.insight-list h3 { margin: 0 0 6px; font-size: 1.35rem; }
.insight-list h3 a { color: var(--ink); text-decoration: none; }
.insight-list h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.insight-list p { margin: 0; color: var(--ink-2); font-size: 0.97rem; }
.insight-list .cat { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@media (max-width: 760px) { .insight-list li { grid-template-columns: 1fr; gap: 6px; } }
.badge-draft { display: inline-block; font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ph); border: 1px dashed var(--ph); padding: 1px 6px; margin-right: 8px; vertical-align: middle; }
.empty { border: 1px dashed var(--rule); padding: 28px; color: var(--muted); }

/* ---------- Article ---------- */
.article-head { padding: clamp(36px, 6vw, 72px) 0 28px; }
.article-head .crumbs { font-size: 0.86rem; color: var(--muted); margin-bottom: 22px; }
.article-head .crumbs a { color: var(--muted); }
.article-head h1 { max-width: 22ch; font-size: clamp(2rem, 4.4vw, 3.3rem); }
.article-head .dek { font-family: var(--serif); font-size: clamp(1.12rem, 1.8vw, 1.3rem); color: var(--ink-2); max-width: 40rem; line-height: 1.45; margin: 0 0 24px; }
.byline { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.88rem; color: var(--muted); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 12px 0; }
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 6vw, 80px); padding: 32px 0 clamp(56px, 8vw, 96px); }
@media (max-width: 960px) { .article-grid { grid-template-columns: 1fr; } }
.prose { font-family: var(--sans); font-size: 1.1rem; line-height: 1.75; max-width: 40rem; }
.prose h2 { font-size: 1.4rem; margin: 40px 0 12px; font-weight: 600; }
.prose p, .prose ul, .prose ol { margin: 0 0 20px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--muted); }
.prose strong { font-weight: 600; }
.aside-box { border-top: 2px solid var(--rule-strong); padding-top: 16px; margin-bottom: 36px; font-size: 0.94rem; }
.aside-box h2 { font-family: var(--sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.aside-box p { color: var(--ink-2); margin-bottom: 10px; }
.aside-box .src-title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--ink); line-height: 1.35; display: block; margin-bottom: 6px; }
.aside-box .app { display: flex; gap: 12px; align-items: flex-start; }
.aside-box .app svg { width: 34px; height: 34px; flex: none; color: var(--navy-2); }
.article-foot { border-top: 1px solid var(--rule); padding-top: 20px; margin-top: 36px; font-family: var(--sans); font-size: 0.9rem; color: var(--muted); max-width: 40rem; }

/* ---------- Placeholders (visible on purpose: Robert fills these in) ---------- */
.ph { display: inline-block; border: 1px dashed var(--ph); color: var(--ph); padding: 1px 8px; font-family: var(--sans); font-size: 0.86em; font-weight: 500; border-radius: 2px; }
.ph::before { content: "To fill: "; font-weight: 700; letter-spacing: 0.02em; }
div.ph, p.ph { display: block; padding: 16px 18px; margin: 0 0 16px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--band); color: var(--band-ink); padding: clamp(48px, 7vw, 80px) 0 28px; font-size: 0.93rem; }
.site-footer a { color: var(--band-ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-grid h2 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--band-muted); font-weight: 600; margin: 0 0 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-brand { display: flex; align-items: center; gap: 12px; font-weight: 640; font-size: 1.05rem; margin-bottom: 14px; }
.footer-brand svg { width: 30px; height: 30px; color: #c9d2f0; }
.footer-brand .suffix { font-weight: 400; color: var(--band-muted); padding-left: 10px; border-left: 1px solid #2d3450; }
.footer-blurb { color: var(--band-muted); max-width: 30rem; }
.footer-legal { margin-top: 28px; padding-top: 20px; border-top: 1px solid #262c45; color: var(--band-muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.84rem; }
.site-footer .ph { color: #e0a24f; border-color: #e0a24f; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; } }

/* ---------- Plain legal text ---------- */
.legal { max-width: 44rem; }
.legal h2 { font-size: 1.5rem; margin-top: 40px; }

@media print {
  .site-header nav, .menu, .theme-toggle, .site-footer { display: none; }
  body { background: #fff; color: #000; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ---------- Latest insights (home page, right under the hero) ---------- */
.latest { padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--rule); background: var(--surface); }
.latest-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.latest-head .eyebrow { margin: 0; }
.latest-head a { font-size: 0.92rem; font-weight: 550; text-decoration: none; }
.latest-head a:hover { text-decoration: underline; }
.latest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.latest-item { border-top: 1px solid var(--rule-strong); padding-top: 14px; display: flex; flex-direction: column; }
.latest-item .meta { font-size: 0.8rem; color: var(--muted); margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.latest-item h3 { font-size: 1.2rem; line-height: 1.28; margin: 0 0 8px; }
.latest-item h3 a { color: var(--ink); text-decoration: none; }
.latest-item h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.latest-item .summary { color: var(--ink-2); font-size: 0.94rem; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.latest-item .more { margin-top: auto; font-size: 0.9rem; font-weight: 550; text-decoration: none; }
.latest-item .more::after { content: " \2192"; }
@media (max-width: 860px) { .latest-grid { grid-template-columns: 1fr; } }

/* ---------- Snapshot review page ---------- */
.snap-list { display: grid; gap: 28px; max-width: 46rem; }
.snap { border-top: 1px solid var(--rule-strong); padding-top: 14px; }
.snap .meta { font-size: 0.8rem; color: var(--muted); margin: 0 0 6px; letter-spacing: .06em; }
.snap h2 { font-size: 1.35rem; margin: 0 0 8px; }
.snap-en { margin-top: 10px; padding: 12px 14px; background: var(--tint); font-size: 0.92rem; color: var(--ink-2); }

/* ---------- The family of sites (footer, on every page; same line on quietguard.io and quietweb.io) ---------- */
.footer-family { margin-top: 44px; padding-top: 24px; border-top: 1px solid #262c45; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }
.footer-family .label { width: 100%; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--band-muted); font-weight: 600; }
.footer-family a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.footer-family a:hover strong { text-decoration: underline; }
.footer-family svg { width: 26px; height: 26px; color: #c9d2f0; flex: none; }
.footer-family span span, .footer-family a > span { display: flex; flex-direction: column; line-height: 1.25; }
.footer-family strong { font-weight: 600; color: var(--band-ink); }
.footer-family small { color: var(--band-muted); font-size: 0.82rem; }
/* The site you are on: a green tick after its name (same as quietguard.io and quietweb.io; Robert). */
.footer-family a[aria-current] strong::after { content: " ✓"; color: #7cc387; font-weight: 400; }

/* Trademark sign after the name in header and footer (Robert, 2026-10-07). */
.brand .tm, .footer-brand .tm { font-size: inherit; font-weight: inherit; vertical-align: baseline; margin-left: 0; } /* full-size ™, Outfit raises it by itself (Robert: "Big ™", all sites) */

/* Narrow phones: the Menu button becomes an icon and the brand spacing tightens, so the bar never overflows. */
.menu-icon { display: none; }
@media (max-width: 420px) {
  .site-header .wrap { gap: 12px; }
  .brand { gap: 8px; }
  .brand .suffix { padding-left: 8px; margin-left: 8px; }
  .menu summary { display: inline-grid; place-items: center; width: 40px; height: 36px; padding: 0; }
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-icon { display: block; width: 20px; height: 20px; }
}
@media (max-width: 340px) { .brand .suffix { display: none; } }