/* Arial (Helvetica on Apple devices): already on every device, so nothing to download. */
/* Kiwi colors: cream flesh, green flesh, brown skin, black seeds. Every text color is 8:1 or more on what it sits on. */
:root{--bg:#FBF7EC;--fill:#EFE6CF;--ink:#141210;--muted:#433D32;--link:#174A13;--bad:#7A1E14;--kiwi:#A6D85B;--kiwi-ink:#141210;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#141210;--fill:#2A2620;--ink:#FBF7EC;--muted:#C9C1AC;--link:#B6E37A;--bad:#FFB0A0}.part .btn:not(.line){border-color:#FBF7EC}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:19px/1.45 Arial,"Helvetica Neue",Helvetica,sans-serif}
a{color:var(--link);text-underline-offset:.15em}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:16px;top:-4rem;background:var(--ink);color:var(--bg);padding:.5rem .75rem;font-weight:700;z-index:10}
.skip:focus{top:.5rem}
.wrap{max-width:60rem;margin:0 auto;padding:0 16px}
h1,h2,h3{text-wrap:balance;margin:0;overflow-wrap:break-word}
h2{font-size:2rem;font-weight:700;line-height:1.1;letter-spacing:-.01em}
.small{font-size:.9rem;color:var(--muted)}

/* Top bar */
.top{border-bottom:3px solid var(--ink)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.75rem;padding-bottom:.75rem;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none;font-weight:700;font-size:1.5rem;letter-spacing:-.01em}
.top nav{display:flex;gap:1.25rem;font-weight:700;font-size:17px}
.top nav a{color:var(--ink)}

/* The scan: the one thing the page leads with */
.scan{background:var(--kiwi);color:var(--kiwi-ink);border-bottom:3px solid var(--ink);--ink:#141210;--link:#141210}
.scan .wrap{padding-top:2.25rem;padding-bottom:2.5rem}
.scan h1{font-size:clamp(2.1rem,5.2vw,3.3rem);line-height:1.05;letter-spacing:-.02em;font-weight:700;max-width:20em}
.scan .lede{font-size:1.3rem;line-height:1.35;max-width:36rem;margin:1rem 0 1.5rem;overflow-wrap:anywhere}
.scanform{display:flex;flex-wrap:wrap;gap:.75rem;max-width:40rem}
.scanform label{flex-basis:100%;font-weight:700;font-size:1.15rem}
.scanform input{flex:1 1 16rem;min-width:0;font:inherit;font-size:1.15rem;padding:.7rem .8rem;border:3px solid #141210;border-radius:0;background:#FBF7EC;color:#141210}
.btn{font:inherit;font-weight:700;font-size:1.15rem;padding:.7rem 1.6rem;border:3px solid #141210;border-radius:0;background:#141210;color:#FBF7EC;cursor:pointer}
.btn:hover{background:#FBF7EC;color:#141210}
.scan .note{margin:1rem 0 0;font-weight:600}
.scanform .left{flex-basis:100%;margin:-.25rem 0 0;font-size:.9rem}
.scan .said{margin:1rem 0 0;font-weight:700}
.scan .said:empty{margin:0}

/* Sections: rules and spacing, no boxes */
section.part{padding:3rem 0;border-bottom:3px solid var(--ink)}
.part > .wrap > p{max-width:38rem}

/* The example report: dense, a table */
.report{width:100%;border-collapse:collapse;margin-top:1.5rem;font-size:.98rem}
.report th{text-align:left;font-weight:700;background:var(--fill);padding:.6rem .75rem;border-bottom:3px solid var(--ink)}
.report td{vertical-align:top;padding:.85rem .75rem;border-bottom:1px solid var(--ink);overflow-wrap:anywhere}
.report td:first-child{font-weight:700;white-space:nowrap}
.report .bad{color:var(--bad)}
.report .thumb{display:block;max-width:7.5rem;max-height:7.5rem;margin-bottom:.5rem;border:1px solid var(--ink)}
.report .when{display:block;font-size:.85rem;font-weight:400;color:var(--ink);margin-top:.15rem}
.report .diy{margin:.5rem 0 0;font-size:.92rem}
.report .showme{display:inline-block;margin-top:.3rem;font-weight:700}
.report .pic{display:block;margin-top:.5rem;color:var(--ink);width:10rem}
.report .pic svg{display:block;width:100%;height:auto}
.report code{font-size:.85em}
.seen{margin-top:1.5rem;background:var(--fill);padding:1rem 1.25rem;border-left:6px solid var(--ink)}
.seen strong{display:block}
@media (max-width:40rem){
  .report thead{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .report,.report tbody,.report tr,.report td{display:block}
  .report tr{border-bottom:3px solid var(--ink);padding:.75rem 0}
  .report td{border:0;padding:.2rem 0}
  .report td[data-l]::before{content:attr(data-l) ": ";font-weight:700}
}

/* What's my setup: live rows */
.setup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 3rem;align-items:start}
@media (max-width:48rem){.setup{grid-template-columns:minmax(0,1fr)}}
.facts{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr)}
.facts dt,.facts dd{margin:0;padding:.5rem 0;border-bottom:1px solid var(--ink)}
.facts dt{font-weight:700;padding-right:1.25rem}
@media (max-width:30rem){.facts{grid-template-columns:minmax(0,1fr)}.facts dt{border-bottom:0;padding-bottom:0}.facts dd{padding-top:.15rem}}
.facts dd{overflow-wrap:anywhere}
.btn.line{display:inline-block;text-decoration:none;background:transparent;color:var(--ink);border-color:var(--ink);margin-top:1.25rem}
.btn.line:hover{background:var(--ink);color:var(--bg)}

/* The checks: rows */
.checks{list-style:none;margin:1.5rem 0 0;padding:0}
.checks li{display:grid;grid-template-columns:11rem minmax(0,1fr) 7rem;gap:.25rem 1.25rem;padding:1rem 0;border-bottom:1px solid var(--ink)}
.checks b{font-size:1.3rem;font-weight:700}
.checks .when{font-weight:700;text-align:right}
@media (max-width:40rem){.checks li{grid-template-columns:minmax(0,1fr) auto}.checks li p{grid-column:1 / -1;grid-row:2}}
.checks p{margin:0}

footer{padding:2rem 0 3rem}
footer p{margin:.3rem 0;max-width:40rem}

/* Setup pages: /me and saved links at /r/<code> */
.logo img{width:2rem;height:2rem}
.kicker{margin:0 0 .75rem;font-weight:700;font-size:1.15rem}
.title{font-size:clamp(2rem,6vw,3rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:1rem}
.quote{margin:1rem 0 0;padding:1rem 1.25rem;background:var(--fill);border-left:6px solid var(--ink);max-width:40rem}
.scan .lede b{font-size:1.1em}
.share{margin-top:2rem;max-width:40rem}
.scan .small{color:#141210;margin:.6rem 0 0}
details.tech{margin-top:1rem}
details.tech summary{cursor:pointer;font-weight:700;font-size:1.15rem;color:var(--link);text-decoration:underline;text-underline-offset:.15em}
details.tech .facts{margin-top:1rem}
.facts .fix{display:block;font-size:.9rem;color:var(--muted)}

/* Link Check */
.scan .note a{color:#141210}
.scan .lede a{color:#141210}
.scan p .btn.line{margin-top:0;margin-left:.5rem}
ul.plain{margin:1rem 0 0;padding-left:1.25rem}
ul.plain li{margin:.4rem 0}
.checks.two li{grid-template-columns:13rem minmax(0,1fr)}
@media (max-width:40rem){.checks.two li{grid-template-columns:minmax(0,1fr)}}

/* Guides: a quick answer, a browser picker, keys, big numbered steps, flat diagrams */
.scan .answer{font-size:1.3rem;line-height:1.4;font-weight:700;max-width:38rem;margin:1rem 0 1.25rem}
.pick{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.pick a{color:#141210;background:#FBF7EC;border:3px solid #141210;padding:.35rem .7rem;font-weight:700;text-decoration:none;font-size:1rem}
.pick a:hover{background:#141210;color:#FBF7EC}
kbd{font:700 .9em Arial,"Helvetica Neue",Helvetica,sans-serif;display:inline-block;min-width:1.6em;text-align:center;padding:.05em .4em;border:2px solid currentColor;border-bottom-width:4px;background:var(--bg);color:var(--ink);white-space:nowrap}
.scan kbd{background:#FBF7EC;color:#141210;border-color:#141210}
ol.steps{list-style:none;counter-reset:step;margin:1.25rem 0 0;padding:0;max-width:40rem}
ol.steps > li{counter-increment:step;position:relative;padding:.6rem 0 .6rem 3.25rem;min-height:2.6rem;border-bottom:1px solid var(--ink)}
ol.steps > li::before{content:counter(step);position:absolute;left:0;top:.45rem;width:2.2rem;height:2.2rem;line-height:2.2rem;text-align:center;font-weight:700;font-size:1.15rem;background:var(--kiwi);color:#141210}
figure.diagram{margin:1.5rem 0;max-width:40rem}
figure.diagram svg{display:block;width:100%;height:auto;color:var(--ink)}
figure.diagram figcaption{margin-top:.5rem;font-size:.9rem;color:var(--muted)}
.part h2[id]{scroll-margin-top:1rem}
pre{background:var(--fill);padding:1rem 1.25rem;border-left:6px solid var(--ink);overflow-x:auto;max-width:40rem}
#said b{user-select:all;overflow-wrap:anywhere}

/* Color check */
.pair{display:flex;flex-wrap:wrap;gap:1rem 2rem}
.pair p{margin:0}
.pair label{display:block;font-weight:700;margin-bottom:.35rem}
.pair span{display:flex;gap:.5rem}
.pair input[type=color]{width:3.4rem;height:3.4rem;padding:0;border:3px solid #141210;border-radius:0;background:#FBF7EC;cursor:pointer}
.pair input[type=text]{width:8.5rem;font:inherit;font-size:1.15rem;padding:.6rem .7rem;border:3px solid #141210;border-radius:0;background:#FBF7EC;color:#141210}
.sample{padding:1.5rem;border:3px solid var(--ink);max-width:40rem}
.sample p{margin:0}
.sample .big{font-size:1.6rem;font-weight:700;margin-bottom:.4rem}
.verdict{font-size:1.3rem;font-weight:700;margin:1.25rem 0 .5rem}
.swatch{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.75rem 0 0}
.swatch .btn.line{margin:0;padding:.35rem .8rem;font-size:1rem}
.chip{display:inline-block;width:1.6rem;height:1.6rem;border:2px solid var(--ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Shrink a photo */
.drop{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:1.25rem;border:3px dashed #141210;max-width:40rem;font-weight:700}
.drop.on{background:#FBF7EC}
.drop .btn{display:inline-block;cursor:pointer}
.drop:has(input:focus-visible) label.btn{outline:3px solid #141210;outline-offset:3px}
.opts{margin:1rem 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.opts label{font-weight:700}
.opts select{font:inherit;font-size:1.05rem;padding:.5rem;border:3px solid #141210;border-radius:0;background:#FBF7EC;color:#141210}
.shrunk{list-style:none;margin:1rem 0 0;padding:0}
.shrunk li{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--ink)}
.shrunk li p{margin:0;flex:1 1 14rem;overflow-wrap:anywhere}
.shrunk img{display:block;border:2px solid var(--ink);height:auto}
.shrunk a.btn{text-decoration:none}
/* A guide's shortcuts: one device a line, the keys never split */
ul.keys{list-style:none;margin:1rem 0 1.25rem;padding:0;max-width:34rem}
ul.keys li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;padding:.45rem 0;border-bottom:2px solid #141210;font-weight:700;font-size:1.15rem}
ul.keys li > span:last-child{white-space:nowrap}
ul.keys li > span:last-child:has(.nb){white-space:normal;text-align:right}
.nb{white-space:nowrap}

/* QR code */
.kind{border:0;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.kind legend{font-weight:700;margin-bottom:.5rem;padding:0}
.kind label{font-weight:700;display:flex;align-items:center;gap:.4rem;cursor:pointer}
.kind input{width:1.3rem;height:1.3rem;accent-color:#141210}
.qrform{max-width:40rem}
.qrform p{margin:0 0 .75rem}
.qrform label{display:block;font-weight:700;margin-bottom:.35rem}
.qrform input{width:100%;font:inherit;font-size:1.15rem;padding:.7rem .8rem;border:3px solid #141210;border-radius:0;background:#FBF7EC;color:#141210}
.qrout{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:2rem;align-items:start}
@media (max-width:40rem){.qrout{grid-template-columns:minmax(0,1fr)}}
.qrbox svg{display:block;width:100%;height:auto;border:3px solid var(--ink)}
.qrbox:empty{aspect-ratio:1;border:3px dashed var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:.75rem}
.btns .btn{text-decoration:none;display:inline-block}
.btns .btn.line{margin-top:0}

/* Google and share preview: neutral drawings, not anyone's branding */
.previews{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem 3rem}
@media (max-width:48rem){.previews{grid-template-columns:minmax(0,1fr)}}
.previews h2{font-size:1.3rem;margin:0 0 .75rem}
.previews h2:not(:first-child){margin-top:2rem}
.serp{background:#fff;color:#202124;padding:1rem 1.25rem;border:3px solid var(--ink);font-family:Arial,sans-serif}
.serp p{margin:0}
.serp .crumb{font-size:.85rem;color:#4d5156}
.serp .stitle{font-size:1.25rem;color:#1a0dab;margin:.2rem 0}
.serp .sdesc{font-size:.9rem;color:#4d5156;line-height:1.45}
.card{background:#fff;color:#1c1e21;border:3px solid var(--ink);max-width:30rem;font-family:Arial,sans-serif}
.card .cpic img{display:block;width:100%;height:auto}
.card .ctext{padding:.75rem 1rem;background:#f0f2f5}
.card p{margin:0}
.card .csite{font-size:.75rem;color:#606770}
.card .ctitle{font-weight:700;font-size:1rem;margin:.15rem 0}
.card .cdesc{font-size:.85rem;color:#606770}

/* Guides and tools: groups */
.group{margin-top:2.25rem}
.group h2{font-size:1.4rem}
[hidden]{display:none!important}
.flavours{border:0;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.flavours legend{font-weight:700;margin-bottom:.5rem;padding:0;font-size:1.15rem}
.flavours label{border:3px solid var(--ink);padding:.45rem .9rem;font-weight:700;cursor:pointer}
.flavours label:has(input:checked){background:var(--ink);color:var(--bg)}
.flavours label:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.flavours input{position:absolute;opacity:0;width:1px;height:1px}
.words{max-width:30rem;margin:0 0 2rem}
.words label{display:block;font-weight:700;margin-bottom:.35rem}
.words input{width:100%;font:inherit;font-size:1.05rem;padding:.6rem .7rem;border:3px solid var(--ink);border-radius:0;background:var(--bg);color:var(--ink)}

/* Site health and Email check: one row per check, a symbol and a word as well as color */
.health{list-style:none;margin:1rem 0 0;padding:0;max-width:46rem}
.health li{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:1rem;padding:1rem 0;border-bottom:1px solid var(--ink)}
.health .sym{width:2.2rem;height:2.2rem;line-height:2.2rem;text-align:center;font-weight:700;font-size:1.2rem;border:3px solid var(--ink)}
.health .good .sym{background:var(--kiwi);color:#141210;border-color:#141210}
.health .bad .sym{background:var(--bad);color:var(--bg);border-color:var(--bad)}
.health .state{color:var(--muted);font-size:.9rem}
.health p{margin:.25rem 0 0}
.health .fix{font-weight:700}
.health .fix:empty{display:none}
.altpic{display:block;width:100%;height:auto;border:3px solid var(--ink)}
.alts dd .btn.line{margin:.4rem 0 0;padding:.3rem .8rem;font-size:.95rem}
.alts dd span{display:block}

/* Readability */
#text{width:100%;max-width:46rem;font:inherit;font-size:1.05rem;padding:.7rem .8rem;border:3px solid #141210;border-radius:0;background:#FBF7EC;color:#141210;resize:vertical}
.scan .words{max-width:46rem}
.marked{max-width:46rem;line-height:1.8;margin-top:.5rem}
mark{color:#141210;padding:0 .1em}
.m-long{background:#EFE6CF;color:#141210;text-decoration:underline wavy #7A1E14;text-underline-offset:.25em}
/* Not by color alone: hard words get a solid ink line, jargon a double one (long sentences, above, a wavy one). */
mark.m-word{background:#F3EEC4;text-decoration:underline solid #141210 2px;text-underline-offset:.15em}
mark.m-jargon{background:#FFB0A0;text-decoration:underline double #141210 3px;text-underline-offset:.15em}
.m-try{font-size:.9rem;font-weight:700}
.sub2{font-size:1.4rem;margin-top:2rem}
.age{margin:1rem 0 0;color:#141210}
.age b{display:block;font-size:clamp(2.6rem,9vw,4.5rem);line-height:1;letter-spacing:-.02em}
.age span{display:block;font-size:1.3rem;font-weight:700;margin-top:.35rem}
.age:empty{display:none}

/* 404: a giant 4-kiwi-4 */
.four04{display:block;width:min(100%,26rem);height:auto;margin:0 0 1rem}
.lost .lede a{color:#141210}
.scan a.btn{text-decoration:none}
.note .btn.line,.drop .btn.line{margin:0 .5rem 0 0;padding:.35rem .8rem;font-size:1rem;background:#FBF7EC;color:#141210;border-color:#141210}
.note .btn.line:hover,.drop .btn.line:hover{background:#141210;color:#FBF7EC}

/* Favicon maker */
.fvopts{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:1rem}
.fvopts p{margin:0}
.fvopts .pair{display:flex;gap:.5rem}
.fvopts select{font:inherit;font-size:1.05rem;padding:.55rem;border:3px solid #141210;border-radius:0;background:#FBF7EC;color:#141210}
.fvopts input[type=color]{width:3.2rem;height:3.2rem;padding:0;border:3px solid #141210;border-radius:0;background:#FBF7EC}
.fvopts input[type=text]{width:8rem;font:inherit;font-size:1.05rem;padding:.55rem;border:3px solid #141210;border-radius:0;background:#FBF7EC;color:#141210}
.fvpreview{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-end;margin:1rem 0}
.tabmock{display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;background:#fff;color:#202124;border:2px solid var(--ink);border-bottom:0;font:14px Arial,sans-serif;width:14rem}
.homemock{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:1rem;background:#1E3A5F;color:#fff;font:12px Arial,sans-serif;width:7rem}
.homemock img{border-radius:14px}

/* Email signature */
.sigform{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:0 1.5rem;max-width:46rem}
.sigform input[type=color]{width:3.2rem;height:3.2rem;padding:0;border:3px solid #141210;border-radius:0;background:#FBF7EC}
.sigbox{background:#fff;color:#141210;border:3px solid var(--ink);padding:1.5rem;max-width:34rem;overflow-x:auto}

/* Screen sizes */
.wrap.wide{max-width:90rem}
.screens{margin-top:1.25rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,2.6fr);gap:1.5rem;align-items:start}
@media (max-width:56rem){.screens{grid-template-columns:minmax(0,1fr)}}
.screen{margin:0}
.screen .frame{position:relative;overflow:hidden;border:3px solid var(--ink);background:#fff}
.screen iframe{border:0;transform-origin:0 0;display:block}
.screen figcaption{font-weight:700;margin-top:.5rem}
/* Phones: table cells and long addresses wrap instead of pushing the page sideways */
@media (max-width:40rem){.report td,.report td:first-child{white-space:normal}}
ol.steps > li,.checks p,.facts dd{overflow-wrap:break-word}
.part .sigform input{width:100%;font:inherit;font-size:1.05rem;padding:.6rem .7rem;border:3px solid var(--ink);border-radius:0;background:var(--bg);color:var(--ink)}
.part .sigform label{display:block;font-weight:700;margin-bottom:.35rem}

/* Search in the header, on every page: deliberately quiet, so a page's own main button stays the one that stands out */
.top .logo{margin-right:auto}
.top nav{order:2}
.top .find{order:3;display:flex;flex:0 1 15rem;margin:0}
.top .find input{flex:1;min-width:0;font:inherit;font-size:.95rem;padding:.35rem .5rem;border:2px solid var(--ink);border-right:0;border-radius:0;background:var(--bg);color:var(--ink)}
.top .find button{font:inherit;font-weight:700;font-size:.95rem;padding:.35rem .6rem;border:2px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);cursor:pointer}
.top .find button:hover{background:var(--ink);color:var(--bg)}
/* On phones the box would push a page's main button down, so it's a plain Search link instead */
.top .find-link{display:none}
@media (max-width:40rem){.top .find{display:none}.top .find-link{display:inline}.top nav{flex-wrap:wrap;gap:.35rem 1rem;font-size:16px}}
.results .kind{font-weight:700}
.later{display:flex;flex-wrap:wrap;gap:.75rem;max-width:40rem;margin-top:.5rem}
.later label{flex-basis:100%;font-weight:700}
.later input{flex:1 1 14rem;min-width:0;font:inherit;font-size:1.1rem;padding:.6rem .7rem;border:3px solid #141210;border-radius:0;background:#FBF7EC;color:#141210}
.searchform{margin:0 0 1.5rem}
.searchform input{border-color:var(--ink);background:var(--bg);color:var(--ink)}

/* Progress bar for scans: flat, the site's ink filling a ruled box */
.bar{display:block;width:100%;max-width:40rem;height:1.1rem;margin:1rem 0 0;appearance:none;-webkit-appearance:none;border:3px solid #141210;border-radius:0;background:#FBF7EC;color:#141210}
.bar::-webkit-progress-bar{background:#FBF7EC}
.bar::-webkit-progress-value{background:#141210}
.bar::-moz-progress-bar{background:#141210}
.bar[hidden]{display:none}
.testpage{display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:1.5rem;align-items:start}
.testpage img{display:block;width:100%;height:auto;border:3px solid var(--ink)}
@media (max-width:40rem){.testpage{grid-template-columns:minmax(0,1fr)}}
.beta{display:inline-block;vertical-align:middle;font-size:.8rem;font-weight:700;padding:.05rem .4rem;border:2px solid var(--ink);margin-left:.3rem;letter-spacing:.02em}
.chrome h2{font-size:1.5rem}
.official{background:var(--fill);padding-top:1.5rem;padding-bottom:1.5rem}
.official p{max-width:46rem;font-size:.95rem;margin:0}
.shot{display:block;max-width:100%;height:auto;border:3px solid var(--ink)}
.errs{margin:.75rem 0 0;padding-left:1.25rem}.errs li{padding:.3rem 0;overflow-wrap:anywhere}
.contactform textarea{width:100%;font:inherit;font-size:1.05rem;padding:.6rem .7rem;border:3px solid var(--ink);border-radius:0;background:var(--bg);color:var(--ink)}
.contactform{display:block;max-width:36rem}
.contactform input[type=email]{width:100%}
.guideshot{margin:1.25rem 0 0}.guideshot img{display:block;max-width:100%;height:auto;border:3px solid var(--ink)}.guideshot.narrow img{max-width:min(100%,32rem)}.guideshot figcaption{font-size:.9rem;margin-top:.4rem}

/* Ideas */
.ideas h3{font-size:1.3rem}
.ideas p{margin:0}
.vote{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:.6rem 0 0}
.vote .btn.line{margin:0;padding:.35rem .8rem;font-size:1rem}
.vote .btn.line[aria-disabled=true]{cursor:default}
.vote .btn.line[aria-disabled=true]:hover{background:transparent;color:var(--ink)}
.vote .said{font-weight:700}
.part .lede{font-size:1.3rem;line-height:1.35;max-width:38rem}
.contactform .small{display:block;margin-bottom:.35rem}