/* rankpedia.org — the whole stylesheet.
   No framework, no web fonts, no JS dependency. Budget: 8 KB gzipped. */

*,*::before,*::after{box-sizing:border-box}
:root{
  --paper:#fcfbf8;
  --card:#fff;
  --ink:#16181c;
  --ink-2:#3d424c;
  /* dark enough to clear 4.5:1 on the tinted panels, not just on the paper */
  --ink-3:#5b6373;
  --rule:#e3e0d8;
  --rule-2:#efece5;
  --accent:#1c4e80;
  --accent-2:#2a6ba8;
  --accent-dk:#123a61;
  --tint:#eef3f8;
  --mark:#b4531a;
  --ok:#1f6b45;
  --wrap:1180px;
  --measure:70ch;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"kern" 1;
  text-rendering:optimizeLegibility;
  min-width:0;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;min-width:0}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}

/* Links inside running text must be distinguishable without colour (WCAG 1.4.1).
   Stated as "underline everything in the content, then exempt the navigation":
   an allowlist of text containers silently fails every time a new field starts
   carrying links, which is exactly how .reality shipped unmarked. */
.entry a,.page a,.note a,.hero p a,.foot .about a,.home-about a,.home-lede a{
  text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:rgba(28,78,128,.45)
}
.crumbs a,.toc a,.rail-list a,.rail-all,.byline a,.entry h1 a{text-decoration:none}
.entry a:hover,.page a:hover,.note a:hover{
  text-decoration:underline;text-decoration-color:currentColor;background:var(--tint)
}
.rail-list a:hover,.toc a:hover,.crumbs a:hover{background:none}
.rail-list a:hover{text-decoration:none}
.toc a:hover,.crumbs a:hover{text-decoration:underline}
.foot .about a{text-decoration-color:rgba(223,227,233,.5)}
:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}

/* ---------------------------------------------------------------- header -- */
.mast{background:var(--card);border-bottom:1px solid var(--rule)}
.mast-in{display:flex;align-items:center;gap:20px;padding-top:12px;padding-bottom:12px}
.brand{
  font:700 25px/1 ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  color:var(--ink);letter-spacing:-.015em;white-space:nowrap
}
.brand:hover{text-decoration:none}
.brand span{color:var(--accent)}
.brand-sub{display:block;font:400 11.5px/1.3 system-ui,sans-serif;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.find{margin-left:auto;display:flex;min-width:0;max-width:340px;flex:1}
.find input{
  flex:1;min-width:0;font:inherit;font-size:15px;padding:8px 12px;
  border:1px solid var(--rule);border-right:0;border-radius:4px 0 0 4px;background:#fff;color:var(--ink)
}
.find input::placeholder{color:var(--ink-3)}
.find button{
  font:600 14px/1 system-ui,sans-serif;padding:0 14px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:0 4px 4px 0
}
.find button:hover{background:var(--accent-dk);border-color:var(--accent-dk)}

/* Navy rather than black: the accent already is navy, and a pure black band
   above a navy palette reads as two unrelated designs stacked. */
.nav{background:var(--accent-dk);overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav ul{display:flex;gap:0;list-style:none;margin:0;padding:0;white-space:nowrap}
.nav a{
  display:block;color:#c3d2e2;font:600 13.5px/1 system-ui,sans-serif;letter-spacing:.015em;
  padding:12px 15px;border-bottom:3px solid transparent
}
.nav a:hover{color:#fff;text-decoration:none;border-bottom-color:rgba(255,255,255,.45);background:rgba(255,255,255,.05)}
.nav a[aria-current]{color:#fff;border-bottom-color:#fff;background:rgba(255,255,255,.08)}

/* ------------------------------------------------------------ structure -- */
main{display:block;padding:22px 0 56px}
.crumbs{font-size:13.5px;color:var(--ink-3);margin:0 0 14px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--rule)}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--accent)}

h1{
  font:700 clamp(30px,4.4vw,42px)/1.14 ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  letter-spacing:-.02em;margin:0 0 14px;color:var(--ink)
}
h2{
  font:700 22px/1.25 ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  letter-spacing:-.01em;margin:30px 0 10px;color:var(--ink);scroll-margin-top:14px
}
h3{font:600 17px/1.3 system-ui,sans-serif;margin:20px 0 6px}
p{margin:0 0 14px;max-width:var(--measure)}

/* ---------------------------------------------------------------- entry -- */
.entry{max-width:none}
.def{
  font-size:20.5px;line-height:1.5;font-weight:600;color:var(--ink);
  border-left:4px solid var(--sec,var(--accent));padding:2px 0 2px 17px;
  margin:0 0 20px;max-width:var(--measure)
}
/* The heading rule picks up the section colour, which is the only cue on an
   entry page telling you which of the seven parents you are inside. */
.body>section>h2{
  padding-bottom:7px;border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:11px
}
.body>section>h2::before{
  content:"";width:4px;height:19px;border-radius:2px;background:var(--sec,var(--accent));flex:none
}
/* Two columns from the H1 down: the facts box sits beside the title the way
   a Wikipedia infobox does. Areas: lede+body on the left, rail spanning both.
   On mobile they stack lede → rail → body so the widget is never below the
   fold of a long article. */
.entry-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  grid-template-areas:"lede rail" "body rail";
  column-gap:40px;align-items:start
}
.lede{grid-area:lede;min-width:0}
.rail{grid-area:rail}
.body{grid-area:body;min-width:0}

.rail{
  position:sticky;top:16px;
  max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin
}
.lede > h1{margin-top:0}
.short h2{margin-top:0;font-size:13px;font-family:system-ui,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);margin-bottom:11px}
.short ul{margin:0;padding:0;list-style:none;max-width:var(--measure)}
.short li{position:relative;padding-left:27px;margin-bottom:10px;line-height:1.55}
.short li::before{
  content:"";position:absolute;left:2px;top:.44em;width:12px;height:6px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);
  transform:rotate(-45deg)
}
.short{margin:0 0 8px}

/* The facts box is a widget, not a table in the article. Dark header, stacked
   label/value rows — readable at 300px without looking like a spreadsheet. */
.infobox{
  background:var(--card);border:1px solid var(--rule);border-radius:8px;
  overflow:hidden;font-size:14px;box-shadow:0 1px 3px rgba(22,24,28,.06)
}
.infobox h2{
  font:700 12px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.1em;
  color:#fff;margin:0;padding:12px 15px;
  background:var(--sec,var(--accent-dk))
}
.infobox dl{margin:0;padding:2px 15px 10px}
.infobox div{padding:10px 0;border-top:1px solid var(--rule-2)}
.infobox div:first-child{border-top:0}
.infobox dt{
  display:block;font:700 11px/1.3 system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3);margin:0 0 3px
}
.infobox dd{display:block;margin:0;color:var(--ink);line-height:1.45}

.rail-list h2{
  font:700 11.5px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-3);margin:0 -15px 4px;padding:12px 15px 10px;
  border-bottom:1px solid var(--rule-2)
}
.rail-list{
  margin-top:14px;background:var(--card);border:1px solid var(--rule);border-radius:8px;
  padding:0 15px 13px;box-shadow:0 1px 3px rgba(22,24,28,.06)
}
.rail-list ul{list-style:none;margin:0;padding:0}
.rail-list li{border-top:1px solid var(--rule-2)}
.rail-list li:first-child{border-top:0}
.rail-list a{display:block;padding:7px 0;font-size:14px;line-height:1.4;color:var(--ink-2)}
.rail-list a:hover{color:var(--accent);text-decoration:none}
.rail-all{
  display:inline-block;margin-top:10px;font:600 13px/1 system-ui,sans-serif;
  color:var(--accent);letter-spacing:.01em
}
.rail-all::after{content:" →"}

/* The second sentence of the page: the caveat that stops a reader acting on the
   definition alone. Quieter than the definition, louder than body text. */
.reality{
  font-size:16.5px;line-height:1.6;color:var(--ink-2);
  margin:-8px 0 24px;max-width:var(--measure)
}

.body{max-width:var(--measure)}
.body>section:first-child>h2,.body>.toc+section>h2{margin-top:0}

/* Contents. The entry is scanned before it is read, so the headings are offered
   as a list of destinations first. */
.toc{
  background:var(--tint);border-radius:6px;
  padding:13px 18px 14px;margin:0 0 30px;max-width:var(--measure)
}
.toc::before{
  content:"On this page";display:block;
  font:700 11.5px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-3);margin-bottom:9px
}
.body .toc ul{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:3px 22px}
.body .toc li{margin:0;padding:0;font-size:14.5px;border:0}
.body .toc li::before{content:none;display:none}
.toc a{color:var(--accent);text-decoration:none}
.toc a::before{content:"↓ ";color:var(--ink-3)}
.toc a:hover{text-decoration:underline}

/* The one narrative block on the page. */
.example p{margin:0 0 14px}

/* Everything else is a labelled point: a bold lead-in, an em dash, a payoff.
   This is the unit the whole entry format is built from. */
.points{list-style:none;padding:0!important;margin:0 0 6px;max-width:var(--measure)}
.points>li{
  position:relative;padding:0 0 0 17px!important;margin:0 0 13px;line-height:1.6
}
.points>li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;background:var(--mark)
}
.points>li>b{font-weight:680;color:var(--ink)}
.points>li>b::after{content:" —";color:var(--ink-3);font-weight:400}
.body section{content-visibility:auto;contain-intrinsic-size:auto 340px}
.body ul,.body ol{max-width:var(--measure);padding-left:22px;margin:0 0 14px}
.body li{margin-bottom:6px}
.body ul{list-style:none;padding-left:20px}
.body ul li{position:relative;padding-left:16px}
.body ul li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--mark)}
.body strong{font-weight:650}
.body code{
  font:500 14.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--tint);border:1px solid var(--rule-2);border-radius:3px;padding:1px 5px;
  overflow-wrap:break-word
}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 18px;border:1px solid var(--rule);border-radius:4px}
table{border-collapse:collapse;width:100%;font-size:15px;background:var(--card)}
caption{caption-side:top;text-align:left;font-size:13.5px;color:var(--ink-3);padding:10px 14px 8px}
th,td{padding:10px 14px;text-align:left;border-top:1px solid var(--rule-2);vertical-align:top}
thead th{background:var(--ink);color:#fff;border-top:0;font-size:13.5px;letter-spacing:.02em}
tbody tr:nth-child(even){background:#fbfaf7}

/* ------------------------------------------------------------------ faq -- */
.faq{margin:34px 0 0;max-width:var(--measure)}
.faq h2{margin-bottom:12px}
.faq details{border:1px solid var(--rule);border-radius:4px;background:var(--card);margin-bottom:8px}
.faq summary{
  cursor:pointer;list-style:none;padding:12px 44px 12px 15px;font-weight:600;position:relative;
  font-size:16px
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;line-height:20px;text-align:center;border-radius:50%;
  background:var(--tint);color:var(--accent);font-weight:700
}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 15px 13px;margin:0;color:var(--ink-2)}

/* ------------------------------------------------------------- see also -- */
.seealso{margin:34px 0 0;border-top:1px solid var(--rule);padding-top:18px}
.seealso h2{margin-top:0;font:700 13px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.seealso ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 26px;margin:0;padding:0}
.seealso li{padding:6px 0;border-bottom:1px solid var(--rule-2);font-size:15.5px}
.seealso .sec{display:block;font-size:12px;color:var(--ink-3);letter-spacing:.03em}

/* -------------------------------------------------------------- sources -- */
.sources{margin:30px 0 0;background:var(--tint);border-radius:4px;padding:16px 18px 6px}
.sources h2{margin:0 0 10px;font:700 13px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.sources ol{margin:0;padding-left:20px;font-size:15px}
.sources li{margin-bottom:9px}
.sources .note{display:block;color:var(--ink-3);font-size:13.5px}

.byline{
  margin:26px 0 0;padding-top:16px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:14.5px;color:var(--ink-3)
}
.byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--rule-2)}
.byline b{color:var(--ink);font-weight:650}
.byline .checked{display:inline-flex;align-items:center;gap:5px}
.byline .checked::before{content:"✓";color:var(--ok);font-weight:700}

/* ----------------------------------------------------------- section ix -- */
.hero{border-bottom:1px solid var(--rule);padding-bottom:20px;margin-bottom:24px}
.hero p{font-size:18.5px;color:var(--ink-2);max-width:64ch}
.meta-line{font-size:13.5px;color:var(--ink-3);letter-spacing:.03em}

.groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px 38px}
.group h2{
  margin:0 0 10px;font-size:17px;padding-bottom:8px;
  border-bottom:2px solid var(--sec,var(--accent));display:flex;align-items:baseline;gap:9px
}
.group .gn{
  font:700 11px/1 system-ui,sans-serif;color:var(--ink-3);letter-spacing:.06em;margin-left:auto
}
.group ul{list-style:none;margin:0;padding:0}
.group li{padding:6px 0;border-bottom:1px solid var(--rule-2);font-size:15.5px}
.group li a{color:var(--ink-2)}
.group li a:hover{color:var(--sec,var(--accent))}
.group .more{font-size:13.5px;color:var(--ink-3);padding-top:9px;display:block}
/* "Start here" is a row of names, not summaries — no blurb means no reason to
   carry a card's worth of padding. */
.cards.start{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.cards.start .card{padding:13px 16px}
.cards.start h3{margin:0;font-size:16.5px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px;margin:0 0 40px;padding:0;list-style:none}
.card{
  position:relative;background:var(--card);border:1px solid var(--rule);
  border-radius:7px;padding:17px 19px 18px;overflow:hidden;
  transition:border-color .12s ease,box-shadow .12s ease
}
/* A colour per section, so the seven parents are told apart at a glance
   instead of by reading seven near-identical blurbs. */
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--sec,var(--accent))
}
.card:hover{border-color:var(--sec,var(--accent));box-shadow:0 3px 14px rgba(22,24,28,.09)}
.card h2,.card h3{margin:0 0 7px;font-size:18.5px}
.card h2 a,.card h3 a{color:var(--ink)}
.card h2 a:hover,.card h3 a:hover{color:var(--sec,var(--accent));text-decoration:none}
.card p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0}
.card .n{
  display:block;font:700 11px/1 system-ui,sans-serif;color:var(--sec,var(--accent));
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:8px
}
.sec-how-search-works{--sec:#1c4e80}
.sec-keywords{--sec:#0f6b57}
.sec-content{--sec:#96521c}
.sec-technical{--sec:#4a3d8f}
.sec-links{--sec:#961f4a}
.sec-tools{--sec:#1a5f7a}
.sec-practice{--sec:#7a5a10}

/* ----------------------------------------------------------------- home -- */
.home-hero{
  background:linear-gradient(180deg,var(--tint) 0%,transparent 100%);
  border:1px solid var(--rule);border-radius:10px;
  padding:28px 28px 30px;margin:0 0 36px
}
.home-kicker{
  font:700 11.5px/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px
}
.home-hero h1{
  font-size:clamp(28px,4vw,38px);margin:0 0 12px;max-width:18ch;line-height:1.15
}
.home-lede{max-width:52ch;font-size:17.5px;line-height:1.55;color:var(--ink-2);margin:0 0 20px}
.home-find{display:flex;max-width:640px;gap:0}
.home-find input{
  flex:1;min-width:0;font:inherit;font-size:16px;padding:13px 16px;
  border:1px solid var(--rule);border-right:0;border-radius:6px 0 0 6px;
  background:#fff;color:var(--ink);box-shadow:inset 0 1px 2px rgba(22,24,28,.04)
}
.home-find input::placeholder{color:var(--ink-3)}
.home-find button{
  font:600 15px/1 system-ui,sans-serif;padding:0 22px;cursor:pointer;
  border:1px solid var(--accent-dk);background:var(--accent-dk);color:#fff;border-radius:0 6px 6px 0
}
.home-find button:hover{background:var(--accent);border-color:var(--accent)}

.sec-list{list-style:none;margin:0 0 40px;padding:0;border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--card)}
.sec-row{border-top:1px solid var(--rule-2)}
.sec-row:first-child{border-top:0}
.sec-row a{
  display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr) auto;
  gap:16px;align-items:baseline;padding:14px 18px 14px 16px;color:inherit;text-decoration:none;
  border-left:4px solid var(--sec,var(--accent))
}
.sec-row a:hover{background:var(--tint);text-decoration:none}
.sec-title{
  font:700 16.5px/1.25 ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  color:var(--ink)
}
.sec-blurb{font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.sec-n{
  font:700 12px/1 system-ui,sans-serif;letter-spacing:.04em;color:var(--ink-3);white-space:nowrap
}
.sec-n::after{content:" entries"}
.sec-row a:hover .sec-title{color:var(--sec,var(--accent))}

.blockhead{
  display:flex;align-items:baseline;gap:14px;margin:38px 0 16px
}
.blockhead:first-child,.home-secs .blockhead,.home-pop .blockhead{margin-top:0}
.blockhead h2{
  margin:0;font:700 13px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-3);white-space:nowrap
}
.blockhead::after{content:"";flex:1;height:1px;background:var(--rule)}
.block-more{
  font:600 13px/1 system-ui,sans-serif;color:var(--accent);white-space:nowrap;margin-left:8px
}
.block-more::after{content:" →"}

.pop-grid{
  list-style:none;margin:0 0 36px;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;
  border-top:1px solid var(--rule)
}
.pop-grid li{border-bottom:1px solid var(--rule-2)}
.pop-grid a{
  display:flex;align-items:baseline;gap:10px;padding:10px 0;
  color:var(--ink-2);font-size:15.5px;text-decoration:none
}
.pop-grid a:hover{color:var(--accent)}
.pop-i{
  flex:0 0 1.6em;font:700 12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ink-3);text-align:right
}

.home-about{
  background:var(--tint);border-left:4px solid var(--accent);border-radius:0 8px 8px 0;
  padding:16px 20px;margin:0 0 8px
}
.home-about p{margin:0;max-width:72ch;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.home-about b{color:var(--ink)}

.az{columns:5 170px;column-gap:30px;list-style:none;margin:0;padding:0}
.az li{break-inside:avoid;padding:4px 0;font-size:15px}
.pill{
  display:inline-block;font:600 11.5px/1 system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent);background:var(--tint);border-radius:99px;padding:6px 11px;margin:0 0 14px
}
.toplist{
  columns:5 165px;column-gap:30px;list-style:none;margin:0 0 40px;padding:0
}
.toplist li{break-inside:avoid;padding:0}
.toplist a{
  display:block;padding:7px 0;font-size:15px;color:var(--ink-2);
  border-bottom:1px solid var(--rule-2)
}
.toplist a:hover{color:var(--accent);text-decoration:none;border-bottom-color:var(--accent)}

@media (max-width:900px){
  .sec-row a{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .sec-blurb{grid-column:1 / -1}
  .pop-grid{grid-template-columns:1fr 1fr}
  .home-hero{padding:22px 18px 24px}
}
@media (max-width:560px){
  .pop-grid{grid-template-columns:1fr}
  .home-find{flex-direction:column;gap:8px}
  .home-find input,.home-find button{border-radius:6px;border:1px solid var(--rule)}
  .home-find button{border-color:var(--accent-dk);padding:12px}
}

/* ---------------------------------------------------------------- prose -- */
.page{max-width:var(--measure)}
.page h2{margin-top:32px}
.page ul{padding-left:22px}
.note{background:var(--tint);border-left:4px solid var(--accent);border-radius:0 4px 4px 0;padding:14px 16px;margin:0 0 18px}
.note p:last-child{margin-bottom:0}

/* --------------------------------------------------------------- footer -- */
.foot{background:var(--ink);color:#b9bec7;margin-top:auto;padding:34px 0 26px;font-size:14.5px}
.foot a{color:#dfe3e9}
.foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:26px}
.foot h2{font:700 12px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.09em;color:#fff;margin:0 0 12px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:7px}
.foot .about{max-width:38ch;color:#9aa1ac}
.foot-meta{border-top:1px solid #2b2f36;margin-top:26px;padding-top:16px;font-size:13px;color:#868d97;display:flex;flex-wrap:wrap;gap:6px 18px}

/* --------------------------------------------------------------- mobile -- */
@media (max-width:1040px){
  .entry-grid{grid-template-columns:minmax(0,1fr) 270px;column-gap:28px}
}
@media (max-width:900px){
  .entry-grid{grid-template-columns:1fr;grid-template-areas:"lede" "rail" "body"}
  .rail{position:static;max-height:none;overflow:visible;margin:8px 0 24px}
  .rail-list{margin-top:14px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .toplist{columns:3 150px}
}
@media (max-width:680px){
  body{font-size:16.5px}
  .mast-in{flex-wrap:wrap;gap:10px;padding-bottom:10px}
  /* flex-basis beats width in a flex row, so `width:100%` alone leaves the
     search squeezed onto the brand line instead of wrapping below it. */
  .find{margin-left:0;max-width:none;flex:1 0 100%}
  .brand{font-size:22px}
  h1{font-size:29px}
  .def{font-size:18.5px;padding-left:13px}
  .seealso ul{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:20px}
  .az{columns:2 130px}
  .toplist{columns:2 140px}
  .body .toc ul{grid-template-columns:1fr}
  main{padding-top:16px}
}
@media (max-width:420px){
  .wrap{padding:0 15px}
}

/* -------------------------------------------------------------- to top -- */
.totop{
  position:fixed;right:16px;bottom:16px;width:42px;height:42px;border-radius:50%;
  background:var(--ink);color:#fff;display:none;align-items:center;justify-content:center;
  font-size:19px;text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.22)
}
.totop:hover{background:var(--accent);text-decoration:none}
@media (min-width:681px){.totop.on{display:flex}}

/* ------------------------------------------------------------- results -- */
.results{list-style:none;margin:0;padding:0;max-width:var(--measure)}
.results li{padding:13px 0;border-bottom:1px solid var(--rule-2)}
.results h2{margin:0 0 3px;font-size:18px}
.results p{margin:0;font-size:15px;color:var(--ink-2)}
.results .sec{font-size:12.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}