:root{
--ink:#171310;--ink-2:#443b34;--muted:#7a7067;
--bg:#faf7f3;--paper:#fff;--sand:#f5efe6;--sand-2:#ede4d7;--tint:#fbf5ef;
--rule:#e7dfd3;--rule-2:#d4c6b3;--rule-3:#bfae97;
--accent:#7b2233;--accent-2:#9c3a4c;--accent-tint:#f6eaea;
--bar:#b98a5e;--bar-2:#d8b892;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--measure:70ch;--gutter:clamp(18px,4vw,56px)
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
font:400 clamp(16.5px,.42vw + 15.6px,18px)/1.62 var(--serif);text-rendering:optimizeLegibility}
.shell{max-width:1560px;margin:0 auto;padding:0 var(--gutter)}
a{color:var(--accent);text-underline-offset:.17em;text-decoration-thickness:.055em}
a:hover{color:var(--accent-2)}
::selection{background:var(--accent-tint)}

/* masthead */
.masthead{background:var(--paper);border-bottom:1px solid var(--rule)}
.masthead .shell{display:flex;flex-wrap:wrap;align-items:center;gap:0 clamp(24px,3vw,46px);padding-top:15px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand .mark{width:27px;height:27px;flex:0 0 auto;fill:none;stroke:var(--accent);stroke-width:1.4;
stroke-linejoin:round;stroke-linecap:round}
.brand b{display:block;font:600 1.04rem/1.1 var(--serif);letter-spacing:-.012em}
.brand em{display:block;font:400 .64rem/1.3 var(--sans);font-style:normal;letter-spacing:.11em;
text-transform:uppercase;color:var(--muted);margin-top:4px}
nav.primary{display:flex;flex-wrap:wrap;gap:0 clamp(14px,1.3vw,22px);font:.855rem/1.2 var(--sans)}
nav.primary a{color:var(--ink-2);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent;white-space:nowrap}
nav.primary a:hover{color:var(--accent)}
nav.primary a.on{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}
details.more{width:100%;border-top:1px solid var(--rule);margin-top:11px;font:.83rem/1.4 var(--sans)}
details.more summary{cursor:pointer;color:var(--muted);padding:10px 0;list-style:none;display:flex;align-items:center;gap:7px}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .15s}
details.more[open] summary::after{transform:rotate(-135deg)}
.more-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1px 24px;padding:0 0 16px}
.more-grid a{color:var(--ink-2);text-decoration:none;padding:6px 0;display:block}
.more-grid a:hover{color:var(--accent)}
.more-grid a.on{color:var(--accent);font-weight:600}

/* layout */
.layout{padding-bottom:8px}
.rail{display:none}
/* The rail only appears once the article can still have its full 1080: 230 rail plus the
   gap plus 1080 plus the gutters is 1400. Below that the rail would be paid for by the
   text, and a squeezed column starts breaking figures like $345-$1,900 across lines. */
@media(min-width:1400px){
.layout{display:grid;grid-template-columns:230px minmax(0,1080px);gap:clamp(38px,4.4vw,88px);
align-items:start;justify-content:center}
/* Both columns are pinned by name. A page with too few sections to list still has to put
   its article in the wide column, or it would render at the width of the missing rail. */
.rail{grid-column:1;display:block;position:sticky;top:26px;padding-top:44px;font:.82rem/1.45 var(--sans)}
article{grid-column:2}
.rail h2{font:600 .67rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
margin:0 0 13px;border:0;padding:0}
.rail ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.rail a{display:block;color:var(--ink-2);text-decoration:none;padding:6px 0 6px 15px;margin-left:-1px;
border-left:2px solid transparent}
.rail a:hover{color:var(--accent);border-left-color:var(--rule-3)}
.rail .meta{margin-top:20px;padding-left:15px;color:var(--muted);font-size:.77rem;line-height:1.5}
.rail .meta:first-child{margin-top:0;padding-left:0}
}

/* article */
article{min-width:0;padding-bottom:10px}
header.page{padding:42px 0 6px;border-bottom:1px solid var(--rule);margin-bottom:4px}
h1{font:600 clamp(1.85rem,2.1vw + .9rem,2.8rem)/1.1 var(--serif);letter-spacing:-.023em;margin:.22em 0 .4em;
max-width:24ch;text-wrap:balance}
h2{font:600 clamp(1.2rem,.62vw + 1.05rem,1.5rem)/1.26 var(--serif);letter-spacing:-.012em;
margin:2.7em 0 .7em;padding-top:1.2em;border-top:1px solid var(--rule);scroll-margin-top:20px;
max-width:34ch;text-wrap:balance}
h3{font:600 .99rem/1.4 var(--sans);letter-spacing:.002em;margin:2em 0 .55em;max-width:46ch;text-wrap:balance}
p{margin:.95em 0;max-width:var(--measure);text-wrap:pretty}
.eyebrow{font:600 .71rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0}
.lead{font-size:1.14em;line-height:1.52;color:var(--ink-2);max-width:64ch;margin-top:.5em}
.lead strong{color:var(--ink);font-weight:600}
main>h2:first-child{border-top:0;padding-top:.3em;margin-top:1.5em}

/* key figures */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:0;margin:30px 0 10px;
border-top:2px solid var(--accent);border-bottom:1px solid var(--rule-2);background:var(--tint)}
.stat{padding:17px 24px 18px;border-right:1px solid var(--rule);min-width:0}
.stat:last-child{border-right:0}
.stat b{display:block;font:600 clamp(1.44rem,1vw + 1.14rem,1.86rem)/1.05 var(--serif);color:var(--accent);
letter-spacing:-.022em;font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.stat span{display:block;font:.775rem/1.45 var(--sans);color:var(--muted);margin-top:7px;text-wrap:pretty}

/* tables */
.tw{overflow-x:auto;margin:24px 0 30px;-webkit-overflow-scrolling:touch;
border-top:2px solid var(--accent);border-bottom:1px solid var(--rule-2)}
table{border-collapse:collapse;width:100%;font:.895rem/1.5 var(--sans);font-variant-numeric:tabular-nums}
thead th{font-weight:600;color:var(--ink-2);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
background:var(--tint);border-bottom:1px solid var(--rule-2);padding:11px 18px 10px;white-space:nowrap;text-align:left}
td{padding:11px 18px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
tbody tr:nth-child(2n){background:rgba(247,242,235,.55)}
tbody tr:hover{background:var(--accent-tint)}
tbody tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;white-space:nowrap}
td:first-child{font-weight:600;color:var(--ink);box-shadow:inset 2px 0 0 -1px var(--rule-2)}
thead th:first-child{box-shadow:inset 2px 0 0 -1px var(--rule-2)}
td.t{color:var(--ink-2);min-width:min(44ch,100%)}

/* bars */
.bars{font:.86rem/1.35 var(--sans);margin:24px 0 30px;max-width:860px;
border-top:2px solid var(--accent);padding-top:16px}
.bar{display:grid;grid-template-columns:minmax(150px,282px) 1fr 48px;gap:18px;align-items:center;margin:0;
padding:7px 0;border-bottom:1px solid var(--rule)}
.bar:last-child{border-bottom:0}
.bar span{text-wrap:pretty}
.bar i{display:block;height:14px;background:linear-gradient(90deg,var(--bar) 0%,var(--bar-2) 100%);
border-radius:0 1px 1px 0;min-width:2px}
.bar em{font-style:normal;text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums;font-weight:600}

/* lists, accordions, callouts */
ul.links,ul.shops{padding-left:0;list-style:none;max-width:var(--measure)}
ul.links li,ul.shops li{margin:.75em 0;padding-left:19px;position:relative;text-wrap:pretty}
ul.links li::before,ul.shops li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1px;
background:var(--rule-3)}
details:not(.more){border-bottom:1px solid var(--rule);padding:0;max-width:var(--measure)}
details:not(.more) summary{cursor:pointer;font:600 .96rem/1.55 var(--sans);padding:14px 30px 14px 0;
position:relative;list-style:none;color:var(--ink)}
details:not(.more) summary::-webkit-details-marker{display:none}
details:not(.more) summary::after{content:"";position:absolute;right:7px;top:21px;width:7px;height:7px;
border-right:1.5px solid var(--rule-3);border-bottom:1.5px solid var(--rule-3);transform:rotate(45deg);transition:transform .15s}
details:not(.more)[open] summary::after{transform:rotate(-135deg);border-color:var(--accent)}
details:not(.more) summary:hover{color:var(--accent)}
details:not(.more) summary small{font-weight:400;color:var(--muted)}
details:not(.more) p{margin:0 0 17px;font-size:.97em;color:var(--ink-2);padding-left:1px;
border-left:2px solid var(--sand-2);padding-left:15px;margin-left:1px}
.faq h3{font:600 1.05rem/1.45 var(--serif);margin:1.9em 0 .35em;color:var(--ink);letter-spacing:-.008em}
.faq p{color:var(--ink-2)}
.note{background:var(--tint);border-left:2px solid var(--accent);padding:15px 20px;margin:24px 0;
font-size:.95em;max-width:var(--measure)}

/* related */
.related{background:var(--sand);border-top:2px solid var(--accent);padding:22px 26px 24px;margin:46px 0 0;
font:.9rem/1.5 var(--sans);max-width:none}
.related strong{display:block;font:600 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);margin-bottom:16px}
.related ul.links{max-width:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px 34px}
.related li{margin:.35em 0;padding-left:0}
.related li::before{display:none}
.related li a{display:block;font-weight:600;text-decoration:none;color:var(--ink);margin-bottom:2px}
.related li a:hover{color:var(--accent);text-decoration:underline}
.related li{color:var(--muted);font-size:.86rem;line-height:1.45}

.pager{font:.85rem/1.6 var(--sans);color:var(--muted);margin:18px 0}
.pager a{margin:0 1px;text-decoration:none;padding:3px 8px;border:1px solid var(--rule)}
.pager a:hover{background:var(--sand);border-color:var(--rule-2)}
.pager strong{padding:3px 8px;background:var(--accent);color:#fff;font-weight:600}

/* forms and calculator */
form,.calc{background:var(--paper);border:1px solid var(--rule);border-top:2px solid var(--accent);
padding:26px 28px 28px;font:.95rem/1.55 var(--sans);max-width:720px;margin:24px 0}
form label,.calc label{display:block;font-weight:600;margin:18px 0 6px;font-size:.8rem;letter-spacing:.04em;
text-transform:uppercase;color:var(--muted)}
form input,form select,form textarea,.calc select{width:100%;max-width:100%;padding:11px 12px;
border:1px solid var(--rule-2);font:.95rem var(--sans);background:var(--bg);color:var(--ink);border-radius:0}
form select,.calc select{appearance:none;-webkit-appearance:none;
background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;
background-repeat:no-repeat;padding-right:38px}
form input:focus,form select:focus,form textarea:focus,.calc select:focus{outline:2px solid var(--accent);
outline-offset:1px;border-color:transparent}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form button{margin-top:20px;background:var(--accent);color:#fff;border:0;padding:13px 26px;
font:600 .92rem var(--sans);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
form button:hover{background:var(--accent-2)}
.hp{position:absolute;left:-9999px}
.calc .checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:0 26px;margin-top:6px}
.calc .checks label{font-weight:400;display:flex;gap:11px;align-items:flex-start;margin:0;padding:10px 0;
font-size:.9rem;text-transform:none;letter-spacing:0;color:var(--ink);border-bottom:1px solid var(--rule)}
.calc .checks input{margin-top:3px;flex:0 0 auto;accent-color:var(--accent);width:15px;height:15px}
.calc .checks span{display:block;line-height:1.4}
.calc .checks small{display:block;color:var(--muted);font-size:.775rem;margin-top:3px}
.calc>label:last-of-type{display:flex;gap:11px;align-items:flex-start;text-transform:none;letter-spacing:0;
font-weight:400;font-size:.9rem;color:var(--ink);margin-top:18px}
.calc>label:last-of-type input{width:15px;height:15px;margin-top:3px;accent-color:var(--accent)}
.out{margin-top:26px;padding-top:22px;border-top:2px solid var(--accent)}
.out .big{font:600 clamp(1.8rem,2vw + 1.15rem,2.5rem)/1.08 var(--serif);color:var(--accent);display:block;
letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.out>p{max-width:52ch;color:var(--ink-2);font-size:.92rem}
.out .tw{border-top:1px solid var(--rule-2);margin-top:18px}
.out .why{color:var(--muted);font-size:.82rem;margin-top:14px}

/* footer */
footer{margin-top:72px;border-top:1px solid var(--rule);background:var(--paper)}
footer .shell{padding-top:34px;padding-bottom:48px;font:.85rem/1.7 var(--sans);color:var(--muted)}
.foot-top{display:flex;flex-wrap:wrap;gap:18px 44px;align-items:flex-start;margin-bottom:22px}
.foot-top .brand{color:var(--ink);flex:0 0 auto}
.foot-note{flex:1 1 36ch;max-width:76ch}
footer p{margin:.6em 0}
footer p:first-child{margin-top:0}
footer a{color:var(--ink-2)}
.foot-legal{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule);font-size:.8rem;
display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-legal p{margin:0}

.wrap{max-width:720px;margin:0 auto;padding:0 var(--gutter)}

@media(max-width:900px){
.stats{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.stat{padding:14px 16px 15px}
h1,h2,h3{max-width:none}
header.page{padding-top:26px}
.masthead .shell{padding-bottom:0;gap:0}
.brand{width:100%;margin-bottom:4px}
nav.primary{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:0 21px;padding-bottom:4px;
scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
nav.primary::-webkit-scrollbar{display:none}
nav.primary a{padding:7px 0}
details.more{margin-top:2px}
td,thead th{padding-left:13px;padding-right:13px}
td.t{min-width:32ch}
/* Give the label column room rather than letting it shred a four-word route name over
   four lines. The table already scrolls sideways here, so width is the cheap resource. */
td:first-child,thead th:first-child{min-width:17ch}
td:first-child:last-child{min-width:0}
}
@media(max-width:560px){
.stats{grid-template-columns:1fr 1fr}
.stat:nth-child(2n){border-right:0}
.bar{grid-template-columns:minmax(92px,1fr) 1.3fr 42px;gap:11px}
.related{padding:18px 20px}
form,.calc{padding:20px 18px 22px}
form .row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{.masthead,.rail,.related,footer{display:none}article{max-width:none}}

/* sortable column headers: the whole heading cell is the control, so the padding moves off
   the cell and onto the button rather than leaving a thin strip of text to hit on a phone */
th:has(.sort){padding:0}
th .sort{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;
background:none;border:0;margin:0;padding:11px 18px 10px;width:100%;cursor:pointer;
display:flex;align-items:center;gap:7px;text-align:inherit;user-select:none}
th.n .sort{flex-direction:row-reverse;justify-content:flex-start}
th .sort::after{content:"";width:6px;height:6px;flex:none;margin-top:-3px;
border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:rotate(45deg);opacity:.32}
th .sort:hover{color:var(--accent)}
th .sort:hover::after{opacity:.7}
th .sort:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
th[aria-sort] .sort{color:var(--accent)}
th[aria-sort] .sort::after{opacity:1}
th[aria-sort=ascending] .sort::after{transform:rotate(-135deg);margin-top:2px}
@media(max-width:900px){th .sort{padding:11px 13px 10px}}
@media print{th .sort::after{display:none}}

/* monetization sections, printed by inc/*.php; each prints nothing while its programme is off */
.mz{margin:34px 0;font:.86rem/1.5 var(--sans)}
.mz-label{font:600 .66rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 11px}
.mz-ad{min-height:300px}
.mz-amazon,.mz-partner{border-top:2px solid var(--accent);background:var(--tint);padding:18px 22px 16px}
.mz-products{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.mz-products a{display:flex;flex-direction:column;gap:5px;height:100%;padding:13px 15px 12px;background:var(--paper);
border:1px solid var(--rule);color:var(--ink);text-decoration:none}
.mz-products a:hover{border-color:var(--accent)}
.mz-products b{font:600 .98rem/1.3 var(--serif)}
.mz-products span{color:var(--ink-2)}
.mz-products em{margin-top:auto;padding-top:6px;font-style:normal;font-weight:600;color:var(--accent)}
.mz-partner{max-width:70ch}
.mz-partner-title{font:600 1.05rem/1.3 var(--serif);color:var(--ink);margin:0 0 6px}
.mz-partner p{margin:0 0 6px}
.mz-button{display:inline-block;margin-top:8px;padding:9px 16px;background:var(--accent);color:#fff;font-weight:600;text-decoration:none}
.mz-button:hover{filter:brightness(1.12)}
.mz-fine{margin:12px 0 0;color:var(--muted);font-size:.76rem}
.mz-footnote{margin:.6em 0}
.mz-slot-preview{margin:30px 0;padding:10px 14px;border:2px dashed var(--accent);background:var(--accent-tint);
font:.8rem/1.4 var(--sans);color:var(--ink)}
.mz-slot-preview>p{margin:0 0 6px}
@media print{.mz{display:none}}
/* the rail section, under "On this page": wide screens only. The rail itself is hidden below
   1400px, and AdSense makes no request for a unit that is not displayed. A long contents list
   scrolls inside the rail, so the unit under it stays on a laptop screen. */
.rail .mz{margin:24px 0 0}
.rail .mz-ad{min-height:250px}
.rail:has(.mz-ad) ol{max-height:max(160px,calc(100vh - 430px));overflow-y:auto}