@font-face{font-family:"DM Sans";font-style:normal;font-display:swap;font-weight:100 1000;src:url(assets/fonts/dm-sans/dm-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-display:swap;font-weight:100 1000;src:url(assets/fonts/dm-sans/dm-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fragment Mono";font-style:normal;font-display:swap;font-weight:400;src:url(assets/fonts/fragment-mono/fragment-mono-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fragment Mono";font-style:normal;font-display:swap;font-weight:400;src:url(assets/fonts/fragment-mono/fragment-mono-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--vb-bg:#11110F;--vb-surface:#131313;--vb-surface-2:#181916;--vb-surface-3:#1E1D1D;--vb-text:#EAEAEA;
--vb-text-body:rgba(255,255,255,.6);--vb-text-muted:#BCBCC0;--vb-brand:#95F400;--vb-on-brand:#11110F;
--vb-border:#3C3C3D;--vb-accent:#FFDD2A;--vb-error:#FE0000;color-scheme:dark;
--sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--mono:"Fragment Mono",ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
--gut:16px;--off:0px;--lane:62ch;--gap:48px;--fmax:1200px;--rw:0px;--rg:0px;--hair:1px solid var(--vb-border)}
@media (min-width:600px){:root{--gut:32px;--gap:64px}}
@media (min-width:900px){:root{--off:12%}}
@media (min-width:1180px){:root{--gut:48px;--off:204px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--vb-bg);color:var(--vb-text-muted);font-family:var(--sans);font-size:17px;line-height:28px;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
p,ul,ol,dl,dd,figure,h1,h2,h3{margin:0}
ul,ol{padding:0}
a{color:var(--vb-text);text-decoration:underline;text-decoration-color:rgba(149,244,0,.55);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--vb-text);outline-offset:2px;box-shadow:0 0 0 2px var(--vb-bg)}
a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:rgba(234,234,234,.12)}
h2[id]{scroll-margin-top:16px}
strong{color:var(--vb-text);font-weight:600}
q{quotes:"\201C" "\201D"}
h1,h2,h3{color:var(--vb-text);font-weight:600;text-wrap:balance}
p,li,dd{text-wrap:pretty}
.hn{font-family:var(--mono);font-size:.9375em;letter-spacing:0;overflow-wrap:anywhere}

/* signature line: one row (wordmark, tag); the nav sentence joins it from 700px */
.sig{max-width:calc(var(--fmax) + 2*var(--gut));margin:0 auto;padding:8px var(--gut) 7px;min-height:44px;display:flex;align-items:center;gap:12px;font-size:14px;line-height:20px;background:linear-gradient(var(--vb-border),var(--vb-border)) center bottom/calc(100% - 2*var(--gut)) 1px no-repeat}
.sig-mark{flex:none;color:var(--vb-text);font-weight:650;font-size:14px;text-decoration:none;letter-spacing:-.01em;white-space:nowrap;padding-block:14px;margin-block:-14px}
.sig-mark .sig-acc,.foot-mark .sig-acc{color:var(--vb-brand)}
.sig-tag{color:var(--vb-text-muted);margin-left:auto;font-size:14px;line-height:18px;text-align:right;max-width:30ch}
.sig-nav{display:none;color:var(--vb-text-muted)}
.sig-nav a{padding-block:15px;margin-block:-15px}
.sig-nav a[aria-current]{text-decoration:none;color:var(--vb-text-muted)}
.sig-nav .sig-sep:has(+ .sig-glue){display:none}
@media (min-width:700px){.sig{align-items:baseline;flex-wrap:wrap;gap:0;padding-block:10px 9px}.sig-mark{margin-right:1.4em}.sig-nav{display:block;order:1}.sig-tag{order:2;padding-left:1.4em;font-size:inherit;line-height:inherit;text-align:left;max-width:none}}
@media (min-width:1180px){.sig{font-size:14px;line-height:22px;padding-block:18px 16px}.sig-mark{font-size:16px}}
/* desktop: the nav sentence leaves the bar and stands as a margin note beside the opening, on the open right side */
@media (min-width:1180px){.sig{position:relative}.sig-nav{position:absolute;top:calc(100% + 40px);right:var(--gut);width:15rem;padding-left:16px;border-left:var(--hair);font-size:14px;line-height:22px}}

/* page grid: an offset reading lane, wide breakouts */
main{display:grid;grid-template-columns:[wide-start] minmax(0,var(--off)) [lane-start] minmax(0,var(--lane)) [lane-end] minmax(0,1fr) [wide-end];max-width:calc(var(--fmax) + 2*var(--gut));margin:0 auto;padding:0 var(--gut) 8px}
main>*{grid-column:lane;min-width:0}
main>section{grid-column:wide-start/wide-end;display:grid;grid-template-columns:subgrid;margin-top:var(--gap)}
main>section>*{grid-column:lane;min-width:0}
main>section>*+*{margin-top:20px}
main>section>h2+*{margin-top:12px}
main>section>h3{margin-top:36px}
main>section>h3+*{margin-top:8px}
main h2{font-size:21px;line-height:28px;letter-spacing:-.005em}
main h3{font-size:18px;line-height:26px}
@media (min-width:900px){main h2{font-size:24px;line-height:32px}main h3{font-size:19px;line-height:28px}}

/* opening: the H1 runs up a spine beside the reading column, a hairline on its fore-edge */
.hero{grid-column:wide-start/wide-end;display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"spine plate" "spine lede" "spine intro";column-gap:12px;align-items:start;padding-top:14px}
.name{display:contents}
.plate{grid-area:plate;justify-self:start;display:inline-flex;align-items:center;background:var(--vb-surface-2);border-radius:7px;padding:5px 8px}
.plate img{width:84px}
.hero h1{grid-area:spine;align-self:stretch;writing-mode:vertical-rl;transform:rotate(180deg);text-align:end;white-space:nowrap;font-size:52px;line-height:50px;letter-spacing:-.035em;font-weight:650;border-left:1px solid var(--vb-border);padding-left:1px}
.lede{grid-area:lede;margin-top:10px;color:var(--vb-text);font-weight:600;font-size:15px;line-height:22px}
.intro{grid-area:intro;margin-top:8px;font-size:16px;line-height:24px}
@media (min-width:700px){
.hero{position:relative;grid-template-columns:max(var(--off),112px) minmax(0,var(--lane));grid-template-areas:". plate" ". lede" ". intro";column-gap:0;padding-top:40px}
.plate{padding:8px 11px}.plate img{width:116px}
.hero h1{grid-area:auto;position:absolute;top:40px;right:calc(100% - max(var(--off),112px) + 24px);font-size:84px;line-height:80px;letter-spacing:-.04em;padding-left:.16em}
.lede{margin-top:22px;max-width:44ch;font-size:21px;line-height:31px}
.intro{margin-top:16px;max-width:58ch;font-size:17px;line-height:28px}
}
@media (min-width:1180px){.hero h1{font-size:120px;line-height:116px;right:calc(100% - var(--off) + 36px)}}

/* sponsored slip: borderless, the logo inline, on the reading column */
.deal{grid-column:wide-start/wide-end;margin:14px 44px 0 64px}
.deal-run{font-size:15px;line-height:23px}
.deal-plate{display:inline-flex;vertical-align:-1px;margin-right:8px}
.deal-plate img{width:80px}
.deal-say{display:inline}
.deal-k{color:var(--vb-text-muted)}
.deal-offer{display:block;margin-top:6px;font-weight:650;color:var(--vb-text);font-size:19px;line-height:25px}
.deal-terms{list-style:none;margin-top:14px;font-size:16px;line-height:24px}
.deal-terms li{margin-top:9px}
.deal-act{padding-top:14px}
.deal-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:7px;background:var(--vb-brand);color:var(--vb-on-brand);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transition:filter .12s ease}
.deal-btn:hover{filter:brightness(1.08)}
.deal-fine{margin-top:12px;font-size:16px;line-height:24px;color:var(--vb-text-muted)}
.deal-ad,.deal-age{color:var(--vb-text-muted);font-weight:600;margin-right:.45em}
@media (min-width:700px){
.deal{grid-column:lane-start/wide-end;justify-self:start;max-width:860px;margin:30px 0 0}
.deal-run{font-size:16px;line-height:26px}
.deal-plate{vertical-align:-2px;margin-right:10px}
.deal-plate img{width:96px}
.deal-offer{font-size:26px;line-height:34px;letter-spacing:-.01em}
.deal-terms{margin-top:10px;font-size:16px;line-height:24px}
.deal-terms li{display:inline;margin-top:0}
.deal-terms li+li::before{content:"";display:inline-block;width:1px;height:.85em;background:var(--vb-border);margin:0 .55em;vertical-align:-.08em}
.deal-act{padding-top:16px}
}
@media (min-width:1180px){.an-seg .hn{font-size:34px;line-height:42px}}
@media (min-width:1180px){.deal{max-width:640px}.deal-terms li{display:block;margin-top:4px}.deal-terms li+li::before{display:none}}

/* the checker: the one boxed block */
.checker{grid-column:wide-start/wide-end;margin-top:16px;background:var(--vb-surface-2);border-radius:16px;padding:20px 16px 22px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.ck-label{display:block;color:var(--vb-text);font-weight:600;font-size:15px;line-height:22px}
.ck-field{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.ck-field input{flex:1 1 15rem;min-width:0;min-height:52px;padding:10px 12px 8px;background:var(--vb-surface-3);border:0;border-bottom:2px solid var(--vb-text-muted);border-radius:7px 7px 0 0;color:var(--vb-text);font-family:var(--mono);font-size:19px;line-height:28px}
.ck-field input::placeholder{color:rgba(188,188,192,.6)}
.ck-field input:focus-visible{outline:2px solid var(--vb-text);outline-offset:2px;box-shadow:0 0 0 2px var(--vb-surface-2);border-bottom-color:var(--vb-text)}
.ck-btn{flex:0 0 auto;min-height:48px;padding:0 20px;border:1px solid var(--vb-text-muted);border-radius:7px;background:var(--vb-surface-3);color:var(--vb-text);font:700 14px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:filter .12s ease}
.ck-btn:hover{filter:brightness(1.08);border-color:var(--vb-text)}
.ck-out{margin-top:18px;min-height:96px;border-left:3px solid var(--vb-border);padding:2px 0 2px 16px;color:var(--vb-text-muted)}
.ck-out:has(.chip.ok){border-left-color:var(--vb-brand)}
.ck-out:has(.chip.q){border-left-color:var(--vb-accent)}
.ck-out:has(.chip.no){border-left-color:var(--vb-error)}
.ck-out .chip{font-size:18px;line-height:26px}
.ck-out .chip::before{width:12px;height:12px}
.ck-out p+p{margin-top:6px}
.ck-out .host{font-family:var(--mono);color:var(--vb-text);font-size:18px;line-height:26px;overflow-wrap:anywhere}
.chip,.term{display:inline-flex;align-items:center;gap:.45em;color:var(--vb-text);font-weight:600;font-size:14px;line-height:20px}
.chip::before,.term::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;border:2px solid var(--vb-text-muted)}
.chip.ok::before,.term-ok::before{background:var(--vb-brand);border-color:var(--vb-brand)}
.chip.no::before{border-color:var(--vb-error)}
.chip.q::before,.term-q::before{border-color:var(--vb-accent)}
.term-no::before{border-color:var(--vb-error)}
.term{font-size:inherit;line-height:inherit}
.ck-try{margin-top:18px;font-size:14px;line-height:20px;color:var(--vb-text-muted);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ck-try button{min-height:44px;padding:0 12px;background:transparent;border:1px solid var(--vb-border);border-radius:7px;color:var(--vb-text);font-family:var(--mono);font-size:14px;cursor:pointer}
.ck-try button:hover{border-color:var(--vb-text-muted)}
@media (max-width:699px){.ck-try{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.ck-try button{text-align:left}}
.ck-main .usage{margin-top:14px;border-left:0;padding-left:0;font-size:16px;line-height:25px}

/* hostname anatomy: the signature */
.checker .anatomy{align-self:start;border-top:var(--hair);padding-top:22px}
.an-host{display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:64px;padding-top:26px;padding-bottom:54px}
.an-seg{position:relative;display:flex;flex-direction:column}
.an-seg .hn{font-size:24px;line-height:30px;color:var(--vb-text);padding:0 1px;border-bottom:2px solid var(--vb-border)}
.an-name .hn{color:var(--vb-brand);border-bottom-color:var(--vb-brand)}
.an-k{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:14px;line-height:18px;color:var(--vb-text-muted)}
.an-sub .an-k,.an-path .an-k{top:calc(100% + 30px);left:0;transform:none}
.an-sub .an-k::before,.an-path .an-k::before{content:"";position:absolute;left:3px;top:-28px;width:1px;height:26px;background:rgba(188,188,192,.6)}
.an-dom{position:relative;display:flex}
.an-dk{position:absolute;left:0;right:0;top:-26px;font-size:14px;line-height:18px;color:var(--vb-text);text-align:center;border-bottom:1px solid var(--vb-text-muted);padding-bottom:3px}
.an-dk::before,.an-dk::after{content:"";position:absolute;bottom:-1px;width:1px;height:7px;background:var(--vb-text-muted)}
.an-dk::before{left:0}.an-dk::after{right:0}
.checker .anatomy figcaption{margin-top:16px;font-size:14px;line-height:21px;color:var(--vb-text-muted)}
@media (min-width:900px){
.checker{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;padding:36px 40px 36px}
.checker .anatomy{grid-column:1;grid-row:1;border-top:0;border-right:var(--hair);padding:0 40px 0 0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.ck-main{grid-column:2;grid-row:1}
section[data-tool]>h2{grid-column:wide-start/wide-end;padding-inline:40px}
.an-seg .hn{font-size:28px;line-height:36px}
.ck-label{font-size:16px}
.ck-field input{font-size:22px}
}

/* usage note under the tool */
.usage{border-left:2px solid var(--vb-text-muted);padding-left:16px;color:var(--vb-text)}

/* tables: hostnames to destinations */
.pairs{grid-column:lane-start/wide-end}
@media (min-width:700px){.pairs td:first-child wbr{display:none}}
.pairs table{width:100%;border-collapse:collapse;font-size:16px;line-height:24px}
.pairs caption{caption-side:top;text-align:left;color:var(--vb-text-muted);font-size:14px;line-height:20px;padding-bottom:10px}
.pairs th{color:var(--vb-text-muted);font-weight:600;font-size:14px;line-height:18px;text-align:left;padding:0 16px 8px 0;border-bottom:var(--hair)}
.pairs td{vertical-align:top;padding:12px 16px 12px 0;border-bottom:var(--hair)}
.pairs td:first-child{color:var(--vb-text);white-space:nowrap}
.pairs .hn{font-size:16px}
.hn-sub,.hn-end,.hn-path{color:var(--vb-text-muted)}
.hn-name{color:var(--vb-brand)}
.nm{font-weight:600;color:var(--vb-text)}
.chg{text-decoration:underline wavy var(--vb-accent);text-decoration-thickness:1.5px;text-underline-offset:.24em;text-decoration-skip-ink:none;white-space:pre}
.gap{display:inline-block;position:relative;width:.42em;height:1em;vertical-align:-.12em}
.gap::after{content:"";position:absolute;left:50%;bottom:-.22em;width:7px;height:7px;margin-left:-3.5px;border-left:1.5px solid var(--vb-accent);border-top:1.5px solid var(--vb-accent);transform:rotate(45deg)}
.legend+.pairs{margin-top:10px}
.legend{display:flex;flex-wrap:wrap;gap:6px 24px;font-size:14px;line-height:20px;color:var(--vb-text-muted)}
.key{display:inline-flex;align-items:center;gap:8px}
.sw{display:inline-block;position:relative;width:22px;height:14px}
.sw-chg{border-bottom:0}
.sw-chg::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:4px;background:linear-gradient(135deg,transparent 35%,var(--vb-accent) 35% 55%,transparent 55%) 0 0/6px 4px repeat-x,linear-gradient(45deg,transparent 35%,var(--vb-accent) 35% 55%,transparent 55%) 3px 0/6px 4px repeat-x}
.sw-gap::after{content:"";position:absolute;left:7px;bottom:0;width:7px;height:7px;border-left:1.5px solid var(--vb-accent);border-top:1.5px solid var(--vb-accent);transform:rotate(45deg)}
@media (max-width:699px){
.pairs caption{display:block;padding-bottom:12px}
.pairs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pairs table,.pairs tbody,.pairs tr,.pairs td{display:block}
.pairs tr{border-bottom:var(--hair);padding:12px 0}
.pairs tr:first-child{border-top:var(--hair)}
.pairs td{border:0;padding:2px 0;white-space:normal}
.pairs td:first-child{white-space:normal;padding-bottom:6px}
.pairs td::before{content:attr(data-label);display:block;color:var(--vb-text-muted);font-size:14px;line-height:19px;font-weight:500}
.pairs td:first-child::before{display:none}
.pairs .hn,.pairs .nm{font-size:19px;line-height:26px}
}

/* operator box: a definition list in the lane */
.opbox{margin-top:var(--gap)}
.opbox dl{display:grid;grid-template-columns:1fr;font-size:16px;line-height:25px;border-top:2px solid var(--vb-text-muted)}
.opbox dt{color:var(--vb-text);font-weight:600;padding-top:12px}
.opbox dd{padding-bottom:12px;border-bottom:var(--hair);overflow-wrap:anywhere}
@media (min-width:700px){.opbox dl{grid-template-columns:11rem 1fr}.opbox dt{padding:12px 16px 12px 0;border-bottom:var(--hair)}.opbox dd{padding-top:12px}}

/* plain Q&A */
.qa-plain h3{margin-top:32px}
.qa-plain h2+h3{margin-top:16px}
.qa-plain h3+p{margin-top:6px}
.qa-plain p+p{margin-top:12px}

/* RG close: a definition list */
.rg-dl{display:grid;grid-template-columns:1fr;row-gap:2px}
.rg-dl dt{color:var(--vb-text);font-weight:600;margin-top:10px}
.rg-dl dd{color:var(--vb-text-muted)}
@media (min-width:700px){.rg-dl{grid-template-columns:12rem 1fr;column-gap:24px;row-gap:10px}.rg-dl dt{margin-top:0}}

/* byline */
.byline{margin-top:var(--gap);padding-top:16px;border-top:var(--hair);font-size:15px;line-height:23px}
.by-n{color:var(--vb-text);font-weight:600}
.by-n a{padding-block:11px;margin-block:-11px}
.by-note{margin-top:2px}
.by-up{margin-top:6px;color:var(--vb-text-muted);font-size:14px}

/* footer: the wordmark on a spine (phones) or a left margin (desktop); the colophon is a run of term and value pairs */
.foot{margin-top:var(--gap);background:var(--vb-bg)}
.foot-in{max-width:calc(var(--fmax) + 2*var(--gut));margin:0 auto;padding:32px var(--gut) calc(40px + env(safe-area-inset-bottom));background:linear-gradient(var(--vb-border),var(--vb-border)) center top/calc(100% - 2*var(--gut)) 1px no-repeat;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:12px;align-items:start;font-size:15px;line-height:23px}
.foot-in>*{grid-column:2}
.foot-mark{grid-column:1;grid-row:1/span 3;justify-self:end;writing-mode:vertical-rl;transform:rotate(180deg);text-align:end;white-space:nowrap;color:var(--vb-text);font-weight:650;font-size:22px;line-height:26px;letter-spacing:-.01em}
.dl-row,.alpha{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:14px}
.dl-row{padding:12px 0;border-top:var(--hair)}
.dl-row:first-child{border-top:0;padding-top:0}
.dl-foot dt{color:var(--vb-text);font-weight:600}
.dl-foot dd{overflow-wrap:anywhere}
.dl-row:nth-child(3) dd{font-size:14px;line-height:21px}
.foot-age{display:inline-block;margin-right:.35em;padding:0 6px;border:1px solid var(--vb-text-muted);border-radius:4px;color:var(--vb-text);font-weight:600;font-size:14px;line-height:18px}
.alpha{margin-top:12px;padding-top:12px;border-top:var(--hair)}
.alpha-k{color:var(--vb-text);font-weight:600;text-wrap:balance}
.alpha ul{list-style:none;margin-top:-11px;display:flex;flex-wrap:wrap;column-gap:22px}
.alpha a{display:flex;align-items:center;min-height:44px}
.alpha a[aria-current]{text-decoration:none;color:var(--vb-text-muted)}
.foot-indep{margin-top:20px;padding-top:16px;border-top:var(--hair);color:var(--vb-text-muted);font-size:14px;line-height:21px}
@media (min-width:900px){
.foot-in{padding-top:44px;grid-template-columns:minmax(0,1fr) minmax(0,560px);column-gap:48px}
.foot-mark{grid-row:1/span 3;justify-self:start;writing-mode:horizontal-tb;transform:none;text-align:left;font-size:16px;line-height:23px}
.dl-row,.alpha{grid-template-columns:120px minmax(0,1fr);column-gap:20px}
.dl-row:nth-child(3) dd{font-size:inherit;line-height:inherit}
.alpha ul{display:block;margin-top:0}
.alpha li{display:inline;white-space:nowrap}
.alpha li+li::before{content:"\00B7";margin:0 .5em;color:var(--vb-text-muted)}
.alpha a{display:inline;min-height:0}
}

/* writer blocks (COMPONENTS.md) */
.hn-q .hn-name{color:var(--vb-text)}
.hn-q{text-decoration:underline dotted var(--vb-text-muted);text-decoration-thickness:1px;text-underline-offset:.3em}
.none{color:var(--vb-text-muted);font-style:italic}

/* comparison: two or more hostnames, segment by segment */
.anatomy.pair{grid-column:lane-start/wide-end}
.anatomy.pair table{border-collapse:collapse;font-size:16px;line-height:24px}
.anatomy.pair caption{caption-side:top;text-align:left;color:var(--vb-text-muted);font-size:14px;line-height:20px;padding-bottom:10px}
.anatomy.pair thead th{color:var(--vb-text-muted);font-weight:600;font-size:14px;line-height:18px;text-align:left;padding:0 20px 8px 0;border-bottom:var(--hair)}
.anatomy.pair tbody th{color:var(--vb-text);font-weight:600;text-align:left;padding:14px 24px 14px 0;vertical-align:bottom;border-bottom:var(--hair)}
.anatomy.pair td{padding:14px 20px 14px 0;vertical-align:bottom;border-bottom:var(--hair)}
.anatomy.pair td .hn{display:block;font-size:22px;line-height:30px;color:var(--vb-text);border-bottom:2px solid var(--vb-border);padding-bottom:2px}
.anatomy.pair td.seg-name .hn{border-bottom-color:var(--vb-text-muted)}
.anatomy.pair tbody tr:first-child td.seg-name .hn{border-bottom-color:var(--vb-brand)}
.anatomy.pair tbody tr:first-child td.seg-name .hn{color:var(--vb-brand)}
@media (max-width:699px){
.anatomy.pair thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.anatomy.pair table,.anatomy.pair tbody,.anatomy.pair caption{display:block}
.anatomy.pair tr{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:20px;padding:12px 0;border-bottom:var(--hair)}
.anatomy.pair tbody th{display:block;flex:0 0 100%;border:0;padding:0 0 4px}
.anatomy.pair td{display:block;border:0;padding:0}
.anatomy.pair td::after{content:attr(data-label);display:block;color:var(--vb-text-muted);font-size:14px;line-height:19px;padding-top:4px}
.anatomy.pair td .hn{font-size:18px;line-height:26px}
}

/* steps: a real sequence only */
.howto{list-style:none;padding:0;counter-reset:step}
.howto>li{counter-increment:step;position:relative;padding-left:44px;margin-top:18px}
.howto>li:first-child{margin-top:0}
.howto>li::before{content:counter(step);position:absolute;left:0;top:0;width:28px;height:28px;border:1px solid var(--vb-brand);border-radius:50%;color:var(--vb-text);font-weight:600;font-size:14px;line-height:26px;text-align:center}
.howto strong{display:block}

/* timeline: an ordered chain of addresses or dated changes */
.domain-line{list-style:none;padding:0;border-left:1px solid var(--vb-border);margin-left:5px}
.domain-line>li{position:relative;padding:0 0 18px 24px;margin:0}
.domain-line>li:last-child{padding-bottom:0}
.domain-line>li::before{content:"";position:absolute;left:-6px;top:9px;width:11px;height:11px;border-radius:50%;background:var(--vb-bg);border:2px solid var(--vb-text-muted)}
.domain-line>li:last-child::before{border-color:var(--vb-text);background:var(--vb-text)}
.domain-line li>p+p{margin-top:2px}
.ln-at{color:var(--vb-text);font-weight:600}
.ln-at .hn{font-weight:400}

/* checklist: checks the reader does, not a form */
.check-dl{border-top:var(--hair)}
.check-dl>div{position:relative;padding:14px 0 14px 34px;border-bottom:var(--hair)}
.check-dl>div::before{content:"";position:absolute;left:4px;top:20px;width:12px;height:7px;border-left:2px solid var(--vb-brand);border-bottom:2px solid var(--vb-brand);transform:rotate(-45deg)}
.check-dl dt{color:var(--vb-text);font-weight:600}
.check-dl dd{margin-top:2px}

/* name entry: one name, what it is, its relation to Velobet */
.entry{border-top:var(--hair);padding-top:14px}
.entry-name{font-size:21px;line-height:28px}
.entry dl{display:grid;grid-template-columns:1fr;margin-top:6px}
.entry dt{color:var(--vb-text-muted);font-size:14px;line-height:20px;margin-top:8px}
@media (min-width:700px){.entry dl{grid-template-columns:12rem 1fr;column-gap:24px}.entry dt{margin-top:0;padding-top:4px}.entry dd+dt,.entry dd+dt+dd{margin-top:8px}}

/* contents box: one inline sentence after the checker (pages of 2,500+ words only) */
.toc{margin-top:40px;border-block:var(--hair);padding-block:12px;font-size:16px;line-height:26px}
main>section.tool-more{margin-top:0}
.toc a{padding-block:8px}

/* captures: intact, never framed as a browser */
main figure.shot img{width:100%;border:1px solid var(--vb-border);border-radius:0}

/* design-time placeholder (gallery only) */
.v5-pending{border:1px dashed var(--vb-text-muted);border-radius:7px;padding:10px 14px;color:var(--vb-text-muted);font-size:14px;line-height:21px}

/* inner pages: basic prose, tables and lists keep working with this chrome */
main>:is(p,ul,ol,table,div,figure,blockquote,h2,h3,dl){margin-top:20px}
main>:is(ul,ol),main>section>:is(ul,ol){padding-left:1.2em}
main li+li{margin-top:6px}
main>section>table,main>table,main .tbl table{width:100%;border-collapse:collapse;font-size:16px;line-height:24px}
main .tbl{overflow-x:auto}
main :is(.tbl,section,main)>table caption,main .tbl caption{caption-side:top;text-align:left;color:var(--vb-text-muted);font-size:14px;padding-bottom:8px}
main .tbl th,main>section>table th{color:var(--vb-text-muted);font-weight:600;font-size:14px;text-align:left;padding:0 14px 8px 0;border-bottom:var(--hair)}
main .tbl td,main>section>table td{vertical-align:top;padding:10px 14px 10px 0;border-bottom:var(--hair);overflow-wrap:anywhere}
main details{border-top:var(--hair);padding-block:10px}
main summary{cursor:pointer;color:var(--vb-text);min-height:44px;display:flex;align-items:center;gap:16px;list-style:none}
main summary::-webkit-details-marker{display:none}
main summary::after{content:"+";margin-left:auto;flex:none;width:24px;text-align:center;color:var(--vb-text-muted);font-size:22px;line-height:24px}
main details[open]>summary::after{content:"\2212"}
main summary h3{flex:1 1 auto;margin:0}
main figure img{border-radius:0}
main figcaption{font-size:14px;line-height:21px;color:var(--vb-text-muted);margin-top:8px}

/* 1440 rhythm: prose sections are the offset lane (col 3 to about col 8, the right side open); only the checker
   spans the full width; sections that carry a table or a capture keep the col 3 edge and open to the right */
@media (min-width:900px){:root{--lane:33rem}.hero{--lane:62ch}}
@media (min-width:1180px){
main>section{grid-column:lane}
main>section[data-tool]{grid-column:wide-start/wide-end}
main>section:not([data-tool]):has(table,figure.shot){grid-column:lane-start/wide-end}
.pairs th:first-child,.pairs td:first-child{padding-right:32px}
.anatomy.pair table{width:100%;table-layout:fixed}
.anatomy.pair thead td:first-child{width:11rem}
.anatomy.pair thead th:nth-child(2){width:9.5rem}
.anatomy.pair thead th:nth-child(3){width:23rem}
.anatomy.pair tbody th{white-space:nowrap}
.anatomy.pair td{padding-right:40px}
.anatomy.pair td .hn{font-size:28px;line-height:36px}
.anatomy.pair td:last-child .hn{display:inline-block}
main>section>table{grid-column:lane-start/wide-end}
main>section>figure.shot{grid-column:lane-start/wide-end;max-width:760px}
main>section>.tbl{grid-column:lane-start/wide-end;max-width:760px}
main .tbl td{overflow-wrap:break-word}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* phones: the FAQ and the RG close hang their H2 on the same rotated spine as the H1 and the footer wordmark,
   and the byline carries a lime spine bar (22.10 comparative critique: br01/br07 read alike at 390) */
/* phones, pages whose H1 is a sentence (every page but the home): a rotated sentence would run far below the intro and
   stretch the opening rows, pushing the deal off the first screen, so the H1 sets horizontally beside the logo plate */
@media (max-width:699.98px){
.hero:not(:has(.name)){grid-template-columns:auto minmax(0,1fr);grid-template-areas:"plate h1" "lede lede" "intro intro";align-items:center}
.hero:not(:has(.name)) h1{grid-area:h1;align-self:center;writing-mode:horizontal-tb;transform:none;white-space:normal;text-align:start;font-size:22px;line-height:27px;letter-spacing:-.015em;border-left:0;padding-left:0}
.hero:not(:has(.name)) .lede{margin-top:12px}
main:not(:has(.name)) .deal{margin:18px 0 0}
/* v6 first-screen budget: the 14px header tag costs a line at 360, so the opening gives the space back */
.sig{padding-block:6px 5px}
.sig-tag{line-height:17px}
.hero{padding-top:8px}
.plate{padding-block:4px}
.lede{margin-top:7px}
.intro{margin-top:6px}
.deal{margin-top:8px}
}
@media (max-width:639.98px){
.qa-plain,.rg{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:12px;align-items:start}
.qa-plain>*,.rg>*{grid-column:2}
.qa-plain>h2,.rg>h2{grid-column:1;grid-row:1/span 40;justify-self:end;writing-mode:vertical-rl;transform:rotate(180deg);text-align:end;white-space:nowrap;margin:0;padding-left:1px;border-left:1px solid var(--vb-border);font-size:24px;line-height:28px}
.qa-plain h2+h3,.qa-plain>h3:first-of-type,.rg>h2+p{margin-top:0}
.byline{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:12px;border-top:0;padding-top:0}
.byline>*{grid-column:2}
.byline::before{content:"";grid-column:1;grid-row:1/span 3;justify-self:end;width:3px;background:var(--vb-brand)}
}

/* wide screens: the H1's spine rule runs on down the page beside the reading column, with a lime tick at each H2
   (22.10 comparative critique: brasil/valvet read alike at 1440) */
@media (min-width:1180px){
main>section:not([data-tool]){position:relative}
main>section:not([data-tool])::before{content:"";position:absolute;left:-36px;top:calc(-1*var(--gap));bottom:0;width:1px;background:var(--vb-border)}
main>section:not([data-tool])>h2::before{content:"";position:absolute;left:-39px;width:7px;height:7px;margin-top:12px;background:var(--vb-brand)}
}

/* v6 (22.10, owner orders 07:49Z and 07:52Z). Running text reaches 17px from 1024px. From 1180px the frame keeps a
   right column for the nav sentence, which becomes a fixed field note: it stays beside the reader on every screen,
   and main, the signature line and the footer never run under it. The signature line sits on the page grid
   (wordmark over the spine column, tag over the lane). Above 1440 the frame and the type grow together. */
@media (min-width:700px){
.deal{position:relative;border-block:var(--hair);padding-block:22px 20px}
.deal::before{content:"";position:absolute;left:0;top:-2px;width:56px;height:3px;background:var(--vb-brand)}
}
@media (min-width:1024px){
.deal-fine,.deal-terms{font-size:17px;line-height:27px}
.ck-main .usage{font-size:17px;line-height:27px;max-width:31em}
.toc{font-size:17px;line-height:28px}
.opbox dl{font-size:17px;line-height:27px}
}
@media (min-width:1180px){
:root{--lanew:527px;--rw:240px;--rg:40px;--top:96px}
main{--lane:var(--lanew);padding-right:calc(var(--gut) + var(--rw) + var(--rg))}
.hero{--lane:var(--lanew)}
.intro{max-width:none}
.sig{display:grid;grid-template-columns:var(--off) minmax(0,var(--lanew)) minmax(0,1fr);align-items:baseline;padding-right:calc(var(--gut) + var(--rw) + var(--rg))}
.sig-mark{grid-column:1;margin-right:0}
.sig-tag{grid-column:2;margin-left:0;padding-left:0}
.sig-nav{position:fixed;top:var(--top);right:max(var(--gut),calc((100% - var(--fmax))/2));width:var(--rw);padding-left:16px;border-left:var(--hair)}
.foot-in{padding-right:calc(var(--gut) + var(--rw) + var(--rg))}
/* the opening and the sections run on without gaps beside the H1 spine: the spacing lives inside the blocks, and each
   section opens on a hairline (the deal's lower rule is the next section's hairline) */
.hero{grid-column:wide-start/lane-end;grid-template-columns:var(--off) auto minmax(0,1fr);grid-template-areas:". plate lede" ". intro intro"}
.plate{margin:3px 28px 0 0}
.lede{margin-top:0;padding-top:0;max-width:none}
.intro{margin-top:0;padding-top:22px;padding-bottom:30px}
/* the deal's rules run on across the wide track, like the section hairlines; its content keeps the lane */
.deal{margin-top:0;max-width:none;justify-self:stretch;border-bottom:0;padding-bottom:28px}
.deal>*{max-width:var(--lanew)}
main>section{margin-top:0;padding-top:calc(var(--gap)*.6);padding-bottom:calc(var(--gap)*.5);border-top:var(--hair)}
main>section:not([data-tool])::before{top:0}
main>section.tool-more{border-top:0;padding-top:28px}
.toc{margin-top:0;border-bottom:0;padding-block:14px 30px}
.opbox{margin-top:0;padding-block:calc(var(--gap)*.3) calc(var(--gap)*.5)}
.byline{margin-top:0}
}
@media (min-width:1800px){
:root{--fmax:1520px;--off:248px;--lanew:589px;--rw:300px;--rg:56px;--gap:80px;--top:108px}
body{font-size:19px;line-height:30px}
.sig{font-size:16px;line-height:25px}.sig-mark{font-size:19px}
.sig-nav{font-size:16px;line-height:26px;padding-left:20px}
main h2{font-size:28px;line-height:36px}main h3{font-size:21px;line-height:30px}
.hero h1{font-size:140px;line-height:134px}
.lede{font-size:24px;line-height:35px}.intro{font-size:19px;line-height:30px}
.plate img{width:136px}
.deal-run{font-size:18px;line-height:29px}.deal-plate img{width:112px}
.deal-offer{font-size:30px;line-height:38px}.deal-terms{font-size:18px;line-height:28px}.deal-fine{font-size:18px;line-height:28px}
.deal-btn{min-height:50px;padding:0 24px;font-size:16px}
.checker{padding:44px 48px;gap:64px}
.ck-label{font-size:18px;line-height:26px}.ck-field input{min-height:58px;font-size:24px;line-height:32px}.ck-btn{min-height:54px;font-size:16px}
.ck-main .usage{font-size:19px;line-height:30px}.ck-out .chip,.ck-out .host{font-size:20px;line-height:29px}
.an-seg .hn{font-size:40px;line-height:48px}.an-k,.an-dk{font-size:16px;line-height:20px}.an-dk{top:-28px}
.checker .anatomy figcaption,main figcaption{font-size:16px;line-height:24px}
.ck-try{font-size:16px;line-height:24px}.ck-try button{font-size:16px}.chip{font-size:16px;line-height:23px}
.pairs table,main .tbl table,main>section>table,.anatomy.pair table{font-size:18px;line-height:27px}
.pairs th,main .tbl th,main>section>table th,.anatomy.pair thead th{font-size:16px;line-height:22px}
.pairs .hn{font-size:18px}.anatomy.pair td .hn{font-size:32px;line-height:40px}
.pairs caption,.anatomy.pair caption,main .tbl caption{font-size:16px;line-height:23px}.legend{font-size:16px;line-height:23px}
main>section>.tbl,main>section>figure.shot{max-width:860px}
.opbox dl{font-size:19px;line-height:30px;grid-template-columns:13rem 1fr}
.toc{font-size:19px;line-height:31px}
.byline{font-size:17px;line-height:26px}.by-up{font-size:16px}
.foot-in{font-size:17px;line-height:26px;grid-template-columns:minmax(0,1fr) minmax(0,620px)}.foot-mark{font-size:19px;line-height:26px}
.foot-indep{font-size:16px;line-height:24px}.foot-age{font-size:16px;line-height:21px}
.entry-name{font-size:24px;line-height:32px}.entry dt{font-size:16px;line-height:23px}
.howto>li{padding-left:50px}.howto>li::before{width:32px;height:32px;font-size:16px;line-height:30px}
}
@media (min-width:2400px){
:root{--fmax:1960px;--off:270px;--lanew:682px;--rw:440px;--rg:72px;--gap:96px;--top:124px}
body{font-size:22px;line-height:35px}
.sig{font-size:19px;line-height:29px;padding-block:24px 22px}.sig-mark{font-size:22px}
.sig-nav{font-size:19px;line-height:30px;padding-left:24px}
main h2{font-size:33px;line-height:42px}main h3{font-size:25px;line-height:34px}
main>section:not([data-tool])>h2::before{margin-top:17px}
.hero{padding-top:56px}.hero h1{top:56px;font-size:164px;line-height:156px}
.lede{font-size:28px;line-height:40px}.intro{padding-top:28px;padding-bottom:36px;font-size:22px;line-height:35px}
.plate{padding:10px 14px}.plate img{width:160px}
.deal{padding-block:28px 34px}.deal-run{font-size:21px;line-height:33px}.deal-plate img{width:132px}
.deal-offer{font-size:36px;line-height:44px}.deal-terms{font-size:21px;line-height:33px}.deal-fine{font-size:21px;line-height:33px}
.deal-btn{min-height:58px;padding:0 28px;font-size:19px}
.checker{padding:56px 64px;gap:80px;border-radius:20px}
.ck-label{font-size:21px;line-height:30px}.ck-field input{min-height:68px;font-size:29px;line-height:38px}.ck-btn{min-height:64px;padding:0 26px;font-size:19px}
.ck-main .usage{font-size:22px;line-height:35px}.ck-out .chip,.ck-out .host{font-size:24px;line-height:34px}
.an-seg .hn{font-size:48px;line-height:58px}.an-k,.an-dk{font-size:19px;line-height:24px}.an-dk{top:-34px}
.an-host{row-gap:80px;padding-top:34px;padding-bottom:64px}
.checker .anatomy figcaption,main figcaption{font-size:19px;line-height:28px}
.ck-try{font-size:19px;line-height:28px}.ck-try button{min-height:52px;font-size:19px}.chip{font-size:19px;line-height:27px}
.pairs table,main .tbl table,main>section>table,.anatomy.pair table{font-size:21px;line-height:32px}
.pairs th,main .tbl th,main>section>table th,.anatomy.pair thead th{font-size:19px;line-height:26px}
.pairs .hn{font-size:21px}.anatomy.pair td .hn{font-size:38px;line-height:46px}
.pairs caption,.anatomy.pair caption,main .tbl caption{font-size:19px;line-height:28px}.legend{font-size:19px;line-height:28px}
main>section>.tbl,main>section>figure.shot{max-width:1010px}
.opbox dl{font-size:22px;line-height:35px;grid-template-columns:15rem 1fr}
.toc{font-size:22px;line-height:36px}
.byline{font-size:20px;line-height:31px}.by-up{font-size:19px}
.foot-in{font-size:20px;line-height:31px;grid-template-columns:minmax(0,1fr) minmax(0,760px)}.foot-mark{font-size:22px;line-height:30px}
.foot-indep{font-size:19px;line-height:28px}.foot-age{font-size:19px;line-height:25px}
.entry-name{font-size:28px;line-height:36px}.entry dt{font-size:19px;line-height:27px}
.howto>li{padding-left:58px}.howto>li::before{width:38px;height:38px;font-size:19px;line-height:36px}
}

/* polish 1 (22.10, lead critique 09:00Z). Inner pages: the rotated spine stays the home's "Velvet Bet" alone; a page
   whose H1 is a sentence sets it flat over the standfirst, and the spine column keeps its hairline with a lime tick at
   the H1, the same tick the H2s carry further down. From 1180px the H1 runs on to the wide edge. */
@media (min-width:700px){
.hero:not(:has(.name)){grid-template-areas:". h1" ". plate" ". lede" ". intro"}
.hero:not(:has(.name)) h1{grid-area:h1;position:static;align-self:start;writing-mode:horizontal-tb;transform:none;white-space:normal;text-align:start;border-left:0;padding:0;font-size:36px;line-height:42px;letter-spacing:-.02em;font-weight:650}
.hero:not(:has(.name)) .plate{margin-top:24px}
.hero:not(:has(.name))::before{content:"";position:absolute;left:calc(max(var(--off),112px) - 25px);top:40px;bottom:0;width:1px;background:var(--vb-border)}
.hero:not(:has(.name))::after{content:"";position:absolute;left:calc(max(var(--off),112px) - 28px);top:57px;width:7px;height:7px;background:var(--vb-brand)}
}
@media (min-width:1180px){
/* from 1180 the Velobet plate moves into the spine column, beside the H1's first line and outside the rule, so the
   standfirst and the intro keep the whole lane and no row of the opening starts deeper than the lane */
.hero:not(:has(.name)){grid-column:wide-start/wide-end;grid-template-columns:var(--off) minmax(0,var(--lanew)) minmax(0,1fr);grid-template-areas:"plate h1 h1" ". lede ." ". intro ."}
.hero:not(:has(.name)) h1{font-size:46px;line-height:52px;padding-bottom:26px}
.hero:not(:has(.name)) .plate{justify-self:end;margin:8px 56px 0 0}
.hero:not(:has(.name))::before{left:calc(var(--off) - 36px)}
.hero:not(:has(.name))::after{display:none}
}
@media (min-width:1800px){
.hero:not(:has(.name)) h1{font-size:54px;line-height:60px;padding-bottom:30px}
.hero:not(:has(.name)) .plate{margin-top:10px}
}
@media (min-width:2400px){
.hero:not(:has(.name)) h1{font-size:64px;line-height:70px;padding-bottom:36px}
.hero:not(:has(.name)) .plate{margin:11px 60px 0 0}
.hero:not(:has(.name))::before{top:56px}
}

/* polish 1: on wide, tall screens the home's list of recognised addresses leaves the reading column and stands under
   the nav note as a hostname index, so the right column carries the page's own material from the first screen to the
   footer. Like the note it is fixed in the reserved column (main and the footer never run under it), keeps the note's
   hairline, and shows only where the window is tall enough to hold it whole. */
@media (min-width:1800px) and (min-height:760px){
main>section.tool-more{position:fixed;top:calc(var(--top) + 4*26px + 30px);right:max(var(--gut),calc((100% - var(--fmax))/2));width:var(--rw);display:block;margin:0;padding:2px 0 2px 20px;border:0;border-left:var(--hair);font-size:17px;line-height:27px}
main>section.tool-more::before{display:none}
/* the footer's frame rule slides under the note and the index, never through their text */
.sig-nav,main>section.tool-more{background:var(--vb-bg)}
main>section.tool-more>h3{margin:0;font-size:19px;line-height:27px}
main>section.tool-more>p{margin-top:12px}
.tool-more .hn{display:inline-block;padding:0 .32em;border-radius:4px;background:var(--vb-surface-3);color:var(--vb-text);line-height:1.5;white-space:nowrap}
}
@media (min-width:2400px) and (min-height:820px){
main>section.tool-more{top:calc(var(--top) + 4*30px + 36px);padding-left:24px;font-size:20px;line-height:32px}
main>section.tool-more>h3{font-size:23px;line-height:31px}
main>section.tool-more>p{margin-top:14px}
}

/* polish 2 (22.10, lead critique 09:34Z). Inner pages from 1600px: the lane and the field note form one composition. The
   type grows with the window (18px at 1600 to 26px at 2560) and the lane, the note and the gap between them are set in
   that type, so lines stay under 75 characters. The lane-plus-note unit is centred in the window and the spine column
   hangs into the left margin, so the open space on either side of the reading unit is the same. The home keeps its
   frame and its hostname index. */
@media (min-width:1600px){
:root:not(:has(.hero .name)){
--fs:clamp(18px,calc(18px + (100vw - 1600px)*.00833),26px);
--lanew:calc(var(--fs)*29.5);--off:calc(var(--fs)*10 + 8px);--rg:min(64px,calc(var(--fs)*3));--rw:calc(var(--fs)*20);
--fmax:calc(var(--off) + var(--lanew) + var(--rg) + var(--rw));
--cl:calc((100vw - var(--lanew) - var(--rg) - var(--rw))/2 - var(--off))}
:root:not(:has(.hero .name)) :is(main,.sig,.foot-in){margin-left:calc(var(--cl) - var(--gut));margin-right:auto}
:root:not(:has(.hero .name)) body{font-size:var(--fs);line-height:1.6}
:root:not(:has(.hero .name)) .intro{font-size:var(--fs);line-height:1.6}
:root:not(:has(.hero .name)) .lede{font-size:calc(var(--fs)*1.2);line-height:1.5}
:root:not(:has(.hero .name)) main h2{font-size:calc(var(--fs)*1.4);line-height:1.3}
:root:not(:has(.hero .name)) main h3{font-size:calc(var(--fs)*1.1);line-height:1.4}
:root:not(:has(.hero .name)) .sig-nav{left:calc(var(--cl) + var(--off) + var(--lanew) + var(--rg));right:auto;padding-left:calc(var(--fs)*1.1);font-size:calc(var(--fs)*.85);line-height:1.6}
:root:not(:has(.hero .name)) .hero .plate{margin-right:52px}
:root:not(:has(.hero .name)) .plate img{width:calc(var(--fs)*6.2)}
:root:not(:has(.hero .name)) main>section>:is(.tbl,figure.shot){max-width:none}
}

/* polish 2: the contents links get a 44px tap height from padding alone (inline padding, so no line moves) */
.toc a{padding-block:12px}