/* 小規模ネットワーク構成ガイド 共通スタイル。外部フォント・外部画像なし。
   方針: 読みやすさ最優先 / スレート+ミント・シアンの技術系 / 数値と設定例は等幅 / ライト基本+ダーク対応 */
:root {
  --bg: #f1f5f7;
  --surface: #ffffff;
  --surface-2: #e9f0f3;
  --ink: #10202b;
  --muted: #465865;
  --line: #d3dde3;
  --line-strong: #7d909c;
  --accent: #0a7283;
  --accent-ink: #ffffff;
  --accent-soft: #dff3f3;
  --mint: #19c2a5;
  --ok: #0a6b47; --ok-bg: #e0f5ea; --ok-bar: #15a57f;
  --warn: #7a4a00; --warn-bg: #fff0d1; --warn-bar: #e2a400;
  --bad: #9e1c1c; --bad-bg: #fde6e4; --bad-bar: #d13c35;
  --dep: #3b3a8c; --dep-bg: #e9e8fb; --dep-bar: #6f6bd6;
  --real: #0a6372; --real-bg: #e0f3f5;
  --head-bg: #10222d; --head-ink: #dcebf0; --head-accent: #5eead4;
  --code-bg: #0f1d27; --code-ink: #d7f3ee; --code-line: #27404f;
  --focus: #0b5fd0;
  --radius: 12px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Noto Sans Mono CJK JP", "Liberation Mono", monospace;
  --sans: "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b151c;
    --surface: #132029;
    --surface-2: #1a2b36;
    --ink: #e4eef2;
    --muted: #a9bcc6;
    --line: #27394580;
    --line: #2a3d49;
    --line-strong: #6f8593;
    --accent: #5eead4;
    --accent-ink: #052521;
    --accent-soft: #0f2f33;
    --mint: #5eead4;
    --ok: #7be8b5; --ok-bg: #0f2e24; --ok-bar: #2dc995;
    --warn: #fbd38d; --warn-bg: #33270d; --warn-bar: #e8b229;
    --bad: #ffb0ab; --bad-bg: #3a1514; --bad-bar: #f06a62;
    --dep: #c9c7ff; --dep-bg: #25244a; --dep-bar: #8f8cf0;
    --real: #8ae9f3; --real-bg: #0f2c33;
    --head-bg: #08121a; --head-ink: #cfe0e7;
    --code-bg: #07111a; --code-line: #27404f;
    --focus: #7dd3fc;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 1.03rem; line-height: 1.8;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.wrap.narrow { max-width: 46em; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; z-index: 30; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }
.mono, .num { font-family: var(--mono); }
.small { font-size: .88rem; color: var(--muted); line-height: 1.7; }

/* ---------- ヘッダー ---------- */
.site-header { background: var(--head-bg); color: var(--head-ink); border-bottom: 3px solid var(--mint); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 20px; padding-top: 10px; padding-bottom: 8px; }
.site-name { margin: 0; font-weight: 700; font-size: 1.02rem; letter-spacing: .02em; line-height: 1.4; }
.site-name a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; }
.site-name a::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: var(--head-accent); box-shadow: 4px 4px 0 -1px rgba(94, 234, 212, .35); flex: none; }
.site-header nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.site-header nav a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--head-ink); text-decoration: none; font-size: .9rem; line-height: 1.5; }
.site-header nav a:hover { background: rgba(255, 255, 255, .1); }
.site-header nav a[aria-current="page"] { color: var(--head-bg); background: var(--head-accent); font-weight: 700; }
.site-header :focus-visible { outline-color: var(--head-accent); }

/* ---------- 本文・見出し ---------- */
main { display: block; padding: 28px 0 56px; }
h1 { font-size: clamp(1.55rem, 4.6vw, 2.05rem); line-height: 1.4; margin: 0 0 .5em; letter-spacing: .01em; }
h2 { font-size: 1.4rem; line-height: 1.45; margin: 2.6em 0 .7em; padding-left: 14px; border-left: 5px solid var(--mint); }
h3 { font-size: 1.12rem; line-height: 1.5; margin: 1.9em 0 .5em; }
h2 + h3 { margin-top: 1em; }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.4em; margin: 0 0 1.2em; }
li { margin: .3em 0; }
strong { font-weight: 700; }
.lead { font-size: 1.1rem; line-height: 1.85; margin-bottom: 1.2em; }
.eyebrow { display: inline-block; margin: 0 0 6px; padding: 1px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font: 700 .78rem/1.8 var(--mono); letter-spacing: .08em; }
code { font-family: var(--mono); font-size: .92em; background: var(--surface-2); padding: .1em .4em; border-radius: 4px; }

/* ---------- ボタン・フォーム ---------- */
button { font: inherit; }
.btn { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font-weight: 600; cursor: pointer; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.add { width: 100%; border-style: dashed; color: var(--accent); background: transparent; }
.btn.add:hover { background: var(--accent-soft); }
.btn.sm { min-height: 44px; min-width: 44px; padding: 0 10px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
label { display: block; font-size: .88rem; font-weight: 700; margin: 0 0 4px; line-height: 1.5; }
input[type="text"], select {
  width: 100%; min-height: 46px; padding: 6px 10px; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 8px;
}
input[type="text"] { font-family: var(--mono); font-size: 1.05rem; }
input[type="text"]:focus, select:focus { border-color: var(--focus); }
input[aria-invalid="true"] { border-color: var(--bad-bar); background: var(--bad-bg); }
.field { margin: 0 0 14px; min-width: 0; }
.hint { display: block; margin-top: 4px; font-size: .84rem; line-height: 1.65; color: var(--muted); }
.err { margin: 4px 0 0; font-size: .86rem; font-weight: 700; color: var(--bad); }
.err:empty { display: none; }
.err:not(:empty)::before { content: "⚠ "; }
.grid3 { display: grid; gap: 0 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid2 { display: grid; gap: 0 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid3 .wide-m { grid-column: 1 / -1; } }

/* ---------- パネル・折りたたみ ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px 8px; margin: 0 0 18px; }
.panel h2 { margin: 0 0 14px; padding: 0; border: 0; font-size: 1.12rem; display: flex; align-items: center; gap: 10px; }
.step { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 .9rem var(--mono); flex: none; }
details { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin: 0 0 14px; }
summary { cursor: pointer; padding: 10px 14px; min-height: 44px; font-weight: 700; line-height: 1.6; list-style: none; display: flex; align-items: center; gap: 8px; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "▸"; color: var(--accent); font-size: .9em; transition: transform .15s; flex: none; }
details[open] > summary::before { transform: rotate(90deg); }
details[open] > summary { border-bottom: 1px solid var(--line); }
details > :not(summary) { margin-left: 14px; margin-right: 14px; }
details > summary + * { margin-top: 12px; }
details > :last-child { margin-bottom: 14px; }
.more { background: transparent; border: 0; margin: 4px 0 0; }
.more summary { padding: 2px 0; min-height: 32px; font-weight: 600; font-size: .84rem; color: var(--accent); }
.more[open] > summary { border: 0; }
.more > :not(summary) { margin-left: 0; margin-right: 0; font-size: .84rem; }

/* ---------- バナー・ラベル ---------- */
.banner { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 8px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--ink); font-size: .9rem; line-height: 1.65; border: 1px solid var(--line); }
.banner::before { content: "i"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 .8rem var(--mono); }
.banner p { margin: 0; }
.confirm { display: inline-block; padding: 0 8px; border-radius: 4px; background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-bar); font-weight: 700; font-size: .84em; line-height: 1.6; white-space: nowrap; }
.notice { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-bar); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: .92rem; }
.notice p:last-child, .notice ul:last-child { margin-bottom: 0; }

/* ---------- 計算ツールのレイアウト ---------- */
.tool { display: grid; gap: 4px 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .tool { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } .res-col { position: sticky; top: 16px; } }
.dev-list { list-style: none; margin: 0 0 12px; padding: 0; }
.dev { margin: 0 0 12px; padding: 12px 12px 2px; border: 1px solid var(--line); border-left: 4px solid var(--mint); border-radius: 10px; background: var(--bg); }
.dev-grid { display: grid; gap: 0 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.dev-grid .f-type { grid-column: 1 / 2; }
.dev-grid .f-cls { grid-column: 2 / 4; }
.stepper { display: flex; gap: 4px; }
.stepper input { text-align: center; min-width: 0; width: 64px; }
.dev-actions { align-self: end; margin-bottom: 14px; }
.dev-title { font: 700 .78rem var(--mono); color: var(--muted); letter-spacing: .06em; margin: 0 0 8px; }
@media (max-width: 420px) { .dev-grid { grid-template-columns: minmax(0, 1fr) auto; } .dev-grid .f-type, .dev-grid .f-cls { grid-column: 1 / -1; } }

/* ---------- 結果 ---------- */
.res { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 18px; }
.res h2 { font-size: 1.05rem; margin: 0 0 12px; padding: 0; border: 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 4px 14px 4px 6px; border-radius: 99px; font-weight: 700; font-size: 1.02rem; line-height: 1.5; }
.pill .ic { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 1rem var(--mono); color: var(--surface); }
.pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.ok .ic { background: var(--ok-bar); color: #04281b; }
.pill.tight { background: var(--warn-bg); color: var(--warn); } .pill.tight .ic { background: var(--warn-bar); color: #2b1a00; }
.pill.over { background: var(--bad-bg); color: var(--bad); } .pill.over .ic { background: var(--bad-bar); color: #fff; }
.pill.depends { background: var(--dep-bg); color: var(--dep); } .pill.depends .ic { background: var(--dep-bar); color: #fff; }
.vtext { font-size: .94rem; line-height: 1.75; margin: 0 0 16px; }
.gauge { margin: 0 0 20px; }
.g-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.g-title { font-size: .88rem; font-weight: 700; margin: 0; }
.g-pct { font: 700 2.6rem/1.1 var(--mono); letter-spacing: -.02em; margin: 0; }
.g-pct small { font-size: 1rem; font-weight: 600; margin-left: 2px; }
.gauge.sub .g-pct { font-size: 1.7rem; }
.gauge.ok .g-pct { color: var(--ok); } .gauge.tight .g-pct { color: var(--warn); } .gauge.over .g-pct { color: var(--bad); }
.meter { display: block; width: 100%; height: 18px; margin: 6px 0 4px; border-radius: 9px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-strong); }
.gauge.sub .meter { height: 12px; }
.m-track { fill: var(--surface-2); }
.m-fill { fill: var(--ok-bar); } .gauge.tight .m-fill { fill: var(--warn-bar); } .gauge.over .m-fill { fill: var(--bad-bar); }
.m-mark { stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 3 2; }
.g-scale { display: flex; justify-content: space-between; font: .78rem var(--mono); color: var(--muted); gap: 8px; }
.kv3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.kv3 > div { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.kv3 dt { font-size: .74rem; color: var(--muted); line-height: 1.4; margin: 0; }
.kv3 dd { margin: 2px 0 0; font: 700 1.02rem var(--mono); }
.kv3 dd.neg { color: var(--bad); }
.kv3 dd.pos { color: var(--ok); }
@media (max-width: 420px) { .kv3 { grid-template-columns: 1fr 1fr; } .g-pct { font-size: 2.3rem; } }
.res details { margin-bottom: 10px; }

/* スマホ: 画面下に常に結果の要約を出す */
.live-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--head-bg); color: #fff; border-top: 3px solid var(--mint); font-size: .92rem; transition: transform .2s; }
.live-bar.hide { transform: translateY(110%); }
.live-bar .lb-pct { font: 700 1.3rem var(--mono); }
.live-bar .lb-tag { font-weight: 700; padding: 0 10px; border-radius: 99px; background: var(--ok-bg); color: var(--ok); }
.live-bar.tight .lb-tag { background: var(--warn-bg); color: var(--warn); }
.live-bar.over .lb-tag { background: var(--bad-bg); color: var(--bad); }
.live-bar.depends .lb-tag { background: var(--dep-bg); color: var(--dep); }
.live-bar .lb-rest { margin-left: auto; font: .85rem var(--mono); color: #cfe0e7; }
@media (min-width: 960px) { .live-bar { display: none; } }
@media (max-width: 959px) { body.has-bar { padding-bottom: 64px; } }

/* ---------- 表 ---------- */
.table-scroll { overflow-x: auto; margin: 0 0 1.3em; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.table-scroll:focus-visible { outline-offset: 0; }
table { border-collapse: collapse; width: 100%; font-size: .94rem; line-height: 1.6; }
caption { text-align: left; padding: 10px 12px; font-size: .86rem; font-weight: 700; color: var(--muted); caption-side: top; }
th, td { padding: 8px 12px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--surface-2); font-size: .84rem; white-space: nowrap; border-top: 1px solid var(--line-strong); }
tbody tr:nth-child(even) { background: var(--bg); }
.t-num td:nth-child(n+3), .t-num th:nth-child(n+3), td.num, th.num { font-family: var(--mono); text-align: right; white-space: nowrap; }
.t-vlan td:nth-child(4) { font-family: var(--mono); font-size: .88rem; }
.t-vlan td:first-child { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
table.min { min-width: 34em; }

/* ---------- 記事部品 ---------- */
.article-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 0 0 18px; font-size: .84rem; color: var(--muted); }
.article-meta .chip { padding: 0 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); line-height: 1.8; }
.pr { margin: 0; font-size: .84rem; color: var(--muted); }
.pr::before { content: "PR"; display: inline-block; margin-right: 8px; padding: 0 7px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line-strong); font: 700 .72rem/1.6 var(--mono); }
.summary { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--mint); border-radius: var(--radius); padding: 14px 16px 6px; margin: 0 0 18px; }
.summary h2 { margin: 0 0 6px; padding: 0; border: 0; font-size: 1.02rem; }
.summary ul { margin-bottom: 10px; }
.conclusion { margin: 4px 0 10px; padding: 10px 12px; border-radius: 8px; background: var(--accent-soft); font-weight: 600; line-height: 1.75; }
.conclusion b { font: 700 .76rem var(--mono); color: var(--accent); letter-spacing: .08em; display: block; }
.toc { margin: 0 0 8px; }
.toc ol { margin: 0; padding-left: 1.6em; }
.toc li { margin: .2em 0; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.callout { margin: 0 0 1.3em; border: 1px solid var(--line); border-left-width: 5px; border-radius: 10px; background: var(--surface); padding: 10px 14px 2px; }
.callout > p:first-child:not(.tag) { margin-top: 0; }
.callout h3 { margin: .2em 0 .5em; }
.callout .tag { display: inline-block; margin: 0 0 6px; padding: 0 10px; border-radius: 4px; font: 700 .78rem/1.8 var(--sans); letter-spacing: .04em; }
.callout.real { border-left-color: var(--real); } .callout.real .tag { background: var(--real-bg); color: var(--real); border: 1px solid var(--real); }
.callout.check { border-left-color: var(--warn-bar); background: var(--warn-bg); color: var(--ink); } .callout.check .tag { background: var(--surface); color: var(--warn); border: 1px solid var(--warn-bar); }
.callout.caution { border-left-color: var(--bad-bar); } .callout.caution .tag { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-bar); }
.callout.tip { border-left-color: var(--mint); } .callout.tip .tag { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }
.steps { list-style: none; padding: 0; counter-reset: st; }
.steps > li { counter-increment: st; position: relative; margin: 0 0 10px; padding: 10px 14px 10px 50px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.steps > li::before { content: counter(st); position: absolute; left: 12px; top: 10px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 .9rem var(--mono); }
.code { margin: 0 0 1.3em; border-radius: 10px; overflow: hidden; background: var(--code-bg); border: 1px solid var(--code-line); }
.code figcaption { padding: 4px 14px; font: .76rem var(--mono); color: #8fb3b8; border-bottom: 1px solid var(--code-line); letter-spacing: .04em; }
.code pre { margin: 0; padding: 12px 14px; overflow-x: auto; color: var(--code-ink); font: .92rem/1.7 var(--mono); user-select: all; -webkit-user-select: all; white-space: pre; }
.code pre:focus-visible { outline-offset: -3px; }
.code code { background: none; padding: 0; font-size: inherit; }
.diagram { margin: 0 0 1.4em; padding: 14px 10px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.diagram svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.diagram figcaption { margin-top: 8px; text-align: center; }
.d-box { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.5; }
.d-router { stroke: var(--accent); stroke-width: 2.5; }
.d-switch { stroke: var(--ink); stroke-width: 2.5; }
.d-ap { stroke: var(--real); stroke-width: 2; }
.d-end { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 4; }
.d-link { stroke: var(--ink); stroke-width: 2.5; fill: none; }
.d-wifi { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 5; fill: none; }
.d-t { fill: var(--ink); font: 700 14px var(--sans); }
.d-s { fill: var(--muted); font: 12px var(--mono); }
.d-l { fill: var(--ink); font: 12px var(--mono); }
.related { margin-top: 3em; }
.related h2 { margin-top: 0; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); }
.cards li { margin: 0; }
.cards a { display: block; height: 100%; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--mint); border-radius: 10px; color: var(--ink); text-decoration: none; }
.cards a:hover { border-color: var(--accent); }
.cards strong { display: block; color: var(--accent); line-height: 1.5; margin-bottom: 2px; }
.cards span { font-size: .86rem; color: var(--muted); line-height: 1.6; display: block; }
.src-list li { margin: .5em 0; font-size: .94rem; }
article { max-width: 44em; margin: 0 auto; }
article > section h2:first-child { margin-top: 2.2em; }

/* ---------- フッター ---------- */
.site-footer { background: var(--head-bg); color: var(--head-ink); padding: 28px 0 32px; font-size: .86rem; line-height: 1.75; border-top: 3px solid var(--mint); }
.site-footer a { color: var(--head-accent); }
.site-footer :focus-visible { outline-color: var(--head-accent); }
.site-footer p { margin: 0 0 .6em; }
.foot-links { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .92rem; }
.foot-links li { margin: 0; }
.site-footer .legal { color: #b9ccd4; }
.site-footer .updated { font-family: var(--mono); font-size: .8rem; color: #b9ccd4; }
.ad-slot:not([hidden]) { min-height: 90px; margin-bottom: 16px; border: 1px dashed #456; }
@media (max-width: 420px) { .site-header nav a { padding: 6px 8px; font-size: .86rem; } .site-header nav ul { gap: 0; } }