/* ==========================================================================
   RankLab — stylesheet
   Design idea: the page borrows the vernacular of a search result page.
   Tool cards are shaped like SERP listings (blue title, green breadcrumb,
   snippet). Results panes are shaped like a diagnostic console.
   ========================================================================== */

:root{
  --ink:#10233F; --ink-2:#3E5273; --ink-3:#64748B;
  --paper:#FFFFFF; --wash:#F3F6FB; --wash-2:#E9EFF8;
  --rule:#DCE4F0;
  --signal:#1B6EF3; --signal-dk:#0F4FC0; --signal-wash:#E8F0FE;
  --verdict:#0E9F6E; --verdict-wash:#E3F7EF;
  --alert:#E8590C; --alert-wash:#FEEFE4;
  --danger:#DC2626; --danger-wash:#FDECEC;
  --violet:#7C3AED;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Sora",var(--sans);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-s:8px; --r-m:12px; --r-l:18px;
  --shadow:0 1px 2px rgba(16,35,63,.06),0 8px 24px -12px rgba(16,35,63,.18);
  --maxw:1140px;
}
html[data-theme="dark"]{
  --ink:#E8EEF8; --ink-2:#AEBED6; --ink-3:#8296B5;
  --paper:#101B2D; --wash:#0A1220; --wash-2:#17253C;
  --rule:#243652;
  --signal:#6BA4FF; --signal-dk:#8FBBFF; --signal-wash:#16294A;
  --verdict:#34D399; --verdict-wash:#0F3229;
  --alert:#FB923C; --alert-wash:#3A2314;
  --danger:#F87171; --danger-wash:#3B1A1A;
  --violet:#A78BFA;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--wash);color:var(--ink);font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word;position:relative;min-height:100vh}
/* Ambient background: three soft brand-coloured washes over a fine grid.
   Painted once on a fixed pseudo-element, so it costs nothing to scroll. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px 520px at 12% -6%,  rgba(27,110,243,.13), transparent 62%),
    radial-gradient(660px 460px at 92% 4%,   rgba(124,58,237,.10), transparent 60%),
    radial-gradient(900px 620px at 50% 108%, rgba(14,159,110,.10), transparent 64%),
    linear-gradient(0deg,  rgba(16,35,63,.030) 1px, transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg, rgba(16,35,63,.030) 1px, transparent 1px) 0 0/34px 100%,
    var(--wash);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,rgba(0,0,0,.55) 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 62%,rgba(0,0,0,.55) 100%);
}
html[data-theme="dark"] body::before{
  background:
    radial-gradient(760px 520px at 12% -6%,  rgba(107,164,255,.15), transparent 62%),
    radial-gradient(660px 460px at 92% 4%,   rgba(167,139,250,.12), transparent 60%),
    radial-gradient(900px 620px at 50% 108%, rgba(52,211,153,.10), transparent 64%),
    linear-gradient(0deg,  rgba(255,255,255,.028) 1px, transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0/34px 100%,
    var(--wash);
}
@media print{body::before{display:none}}
img,svg{max-width:100%;height:auto;vertical-align:middle}
a{color:var(--signal);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--signal-dk)}
h1,h2,h3,h4{font-family:var(--display);line-height:1.18;margin:0 0 .5em;letter-spacing:-.018em;font-weight:600}
h1{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.1rem);font-weight:700}
h2{font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em;max-width:72ch}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1.1rem;z-index:99}
.skip:focus{left:8px;top:8px}
.wrap{width:min(100% - 2.2rem,var(--maxw));margin-inline:auto}

/* ---------- masthead ---------- */
.masthead{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40}
.masthead-in{display:flex;align-items:center;gap:1rem;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:inherit;font-family:var(--display);font-weight:700;font-size:1.18rem;letter-spacing:-.02em;min-width:0;flex:1 1 auto}
.brand-mark{display:inline-flex;flex:0 0 auto}
.brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-toggle{margin-left:auto;display:none;background:none;border:1px solid var(--rule);border-radius:var(--r-s);width:42px;height:38px;cursor:pointer;color:inherit}
.bars,.bars::before,.bars::after{display:block;width:17px;height:2px;background:currentColor;border-radius:2px;margin-inline:auto;position:relative}
.bars::before,.bars::after{content:"";position:absolute;left:0}
.bars::before{top:-5px}.bars::after{top:5px}
.sitenav{margin-left:auto;display:flex;align-items:center;gap:.4rem}
.sitenav ul{display:flex;gap:.15rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.sitenav a{display:block;padding:.45rem .6rem;border-radius:var(--r-s);color:var(--ink-2);text-decoration:none;font-size:.9rem;font-weight:500}
.sitenav a:hover{background:var(--wash-2);color:var(--ink)}
.theme-btn{margin-left:.4rem;background:var(--wash-2);border:1px solid var(--rule);color:var(--ink-2);width:38px;height:38px;border-radius:var(--r-s);cursor:pointer;display:grid;place-items:center}
.theme-btn .i-moon{display:none}
html[data-theme="dark"] .theme-btn .i-moon{display:block}
html[data-theme="dark"] .theme-btn .i-sun{display:none}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:#fff;padding:clamp(2.4rem,1rem + 6vw,4.6rem) 0 clamp(2rem,1rem + 4vw,3.2rem);position:relative;overflow:hidden}
html[data-theme="dark"] .hero{background:#0B1524}
.hero::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.14) 1px,transparent 0);
  background-size:26px 26px;mask-image:linear-gradient(to bottom right,#000,transparent 72%);
  -webkit-mask-image:linear-gradient(to bottom right,#000,transparent 72%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;max-width:17ch}
.hero-lede{color:#B9CBE6;font-size:clamp(1rem,.95rem + .3vw,1.18rem);max-width:60ch;margin-bottom:1.6rem}
.hero-count{color:var(--verdict);font-weight:600}
.toolsearch{position:relative;max-width:640px}
.toolsearch input{width:100%;font:500 1.05rem/1.4 var(--sans);padding:1rem 1rem 1rem 3rem;border-radius:var(--r-m);
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;backdrop-filter:blur(4px)}
.toolsearch input::placeholder{color:#93A9C8}
.toolsearch input:focus{background:#fff;color:var(--ink);border-color:#fff;outline:3px solid rgba(77,163,255,.55);outline-offset:1px}
.toolsearch input:focus::placeholder{color:var(--ink-3)}
.toolsearch svg{position:absolute;left:1.05rem;top:50%;transform:translateY(-50%);color:#93A9C8;pointer-events:none}
.toolsearch input:focus + svg{color:var(--ink-3)}
.hero-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.hero-chips a{font-size:.85rem;color:#CBD9EC;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  padding:.32rem .7rem;border-radius:999px;text-decoration:none}
.hero-chips a:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- sections ---------- */
.section{padding:clamp(2rem,1rem + 3.4vw,3.4rem) 0}
.section-head{margin-bottom:1.4rem}
.section-head p{color:var(--ink-2);margin:0}
.rail{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin-bottom:.3rem}
.rail .count{color:var(--ink-3);font-size:.9rem}

/* ---------- tool cards: shaped like search listings ---------- */
.toolgrid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));list-style:none;padding:0;margin:0}
.toolcard{background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--hue,var(--signal));
  border-radius:var(--r-m);padding:1rem 1.1rem;box-shadow:var(--shadow);transition:transform .16s ease,box-shadow .16s ease}
.toolcard:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,35,63,.07),0 16px 30px -16px rgba(16,35,63,.3)}
.toolcard .crumb{font:400 .78rem/1.3 var(--sans);color:var(--verdict);margin-bottom:.15rem}
.toolcard h3{margin:0 0 .3rem;font-size:1.05rem;font-family:var(--display);font-weight:600}
.toolcard h3 a{color:var(--signal);text-decoration:none}
.toolcard h3 a::after{content:"";position:absolute;inset:0}
.toolcard{position:relative}
.toolcard:hover h3 a{text-decoration:underline}
.toolcard p{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.5}
.toolgrid.stagger .toolcard{opacity:0;animation:rise .45s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.toolgrid.stagger .toolcard{transform:translateY(10px)}

/* category header */
.cathead{display:flex;align-items:center;gap:.6rem;margin:0 0 .9rem}
.catdot{width:10px;height:10px;border-radius:3px;background:var(--hue,var(--signal));flex:none}
.cathead h2{margin:0}

/* ---------- tool page ---------- */
.toolhead{background:var(--paper);border-bottom:1px solid var(--rule);padding:1.8rem 0 1.6rem}
.crumbs{font-size:.85rem;color:var(--ink-3);margin-bottom:.6rem}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--signal);text-decoration:underline}
.crumbs span{margin:0 .4rem;opacity:.5}
.toolhead h1{margin-bottom:.35rem;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)}
.toolhead .lede{color:var(--ink-2);max-width:62ch;margin:0;font-size:1.05rem}

.layout{display:grid;gap:1.6rem;grid-template-columns:minmax(0,1fr) 300px;align-items:start;padding:1.8rem 0 2.6rem}
@media (max-width:980px){.layout{grid-template-columns:1fr}}
.sidebar{position:sticky;top:80px;display:grid;gap:1rem}
@media (max-width:980px){.sidebar{position:static}}

/* ---------- panels & forms ---------- */
.panel{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-l);padding:1.3rem;box-shadow:var(--shadow)}
.panel + .panel{margin-top:1.2rem}
.panel h2{font-size:1.2rem}
.panel h3{margin-top:1.4rem}
.panel > :last-child{margin-bottom:0}

.field{margin-bottom:.95rem}
.field > label,.lbl{display:block;font-weight:600;font-size:.9rem;margin-bottom:.32rem;color:var(--ink)}
.hint{display:block;font-size:.82rem;color:var(--ink-3);margin-top:.28rem}
input[type=text],input[type=url],input[type=number],input[type=email],input[type=search],input[type=password],select,textarea{
  width:100%;font:400 .97rem/1.5 var(--sans);color:var(--ink);background:var(--wash);
  border:1px solid var(--rule);border-radius:var(--r-s);padding:.62rem .75rem}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--signal);background:var(--paper);
  outline:3px solid var(--signal-wash);outline-offset:0}
.mono{font-family:var(--mono);font-size:.88rem}
.row{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.inline{display:flex;flex-wrap:wrap;gap:.75rem 1.1rem;align-items:center}
.check{display:flex;gap:.5rem;align-items:flex-start;font-size:.93rem;cursor:pointer}
.check input{width:auto;margin-top:.25rem;accent-color:var(--signal)}
input[type=range]{width:100%;accent-color:var(--signal)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:600 .95rem/1 var(--sans);
  padding:.75rem 1.25rem;border-radius:var(--r-s);border:1px solid transparent;background:var(--signal);color:#fff;
  cursor:pointer;text-decoration:none;transition:background .15s ease}
.btn:hover{background:var(--signal-dk);color:#fff}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn.ghost{background:transparent;border-color:var(--rule);color:var(--ink)}
.btn.ghost:hover{background:var(--wash-2);color:var(--ink)}
.btn.small{padding:.45rem .8rem;font-size:.85rem}
.btn.wide{width:100%}
.btn .spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  display:none;animation:spin .7s linear infinite}
.btn.busy .spin{display:block}
.btn.busy .txt{opacity:.75}
@keyframes spin{to{transform:rotate(360deg)}}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.4rem}

/* ---------- results console ---------- */
.result{margin-top:1.3rem}
.result:empty{display:none}
.console{border:1px solid var(--rule);border-radius:var(--r-m);overflow:hidden;background:var(--paper)}
.console-bar{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;background:var(--wash-2);
  border-bottom:1px solid var(--rule);font-size:.85rem;font-weight:600}
.console-body{padding:.9rem}
pre.out{font-family:var(--mono);font-size:.85rem;line-height:1.55;background:var(--wash);border:1px solid var(--rule);
  border-radius:var(--r-s);padding:.85rem;overflow:auto;max-height:440px;margin:0;white-space:pre-wrap;word-break:break-word}
.pill{display:inline-flex;align-items:center;gap:.35rem;font:600 .76rem/1 var(--sans);padding:.3rem .55rem;border-radius:999px;white-space:nowrap}
.pill.ok{background:var(--verdict-wash);color:var(--verdict)}
.pill.warn{background:var(--alert-wash);color:var(--alert)}
.pill.bad{background:var(--danger-wash);color:var(--danger)}
.pill.info{background:var(--signal-wash);color:var(--signal-dk)}
.pill.mute{background:var(--wash-2);color:var(--ink-3)}

table.data{width:100%;border-collapse:collapse;font-size:.9rem}
table.data th,table.data td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--rule);vertical-align:top}
table.data th{font-weight:600;color:var(--ink-2);font-size:.8rem;background:var(--wash)}
table.data tr:last-child td{border-bottom:0}
table.data td.num{text-align:right;font-family:var(--mono);white-space:nowrap}
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-s)}

.checklist{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.checklist li{display:grid;grid-template-columns:auto 1fr;gap:.65rem;align-items:start;padding:.6rem .7rem;
  border:1px solid var(--rule);border-radius:var(--r-s);background:var(--wash);font-size:.92rem}
.checklist .ci{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700;color:#fff;margin-top:.1rem}
.checklist .ci.ok{background:var(--verdict)}.checklist .ci.warn{background:var(--alert)}.checklist .ci.bad{background:var(--danger)}
.checklist b{display:block;font-weight:600}
.checklist span.d{color:var(--ink-2);font-size:.88rem}

.score{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;padding:1rem;background:var(--wash);
  border:1px solid var(--rule);border-radius:var(--r-m);margin-bottom:1rem}
.score .ring{--v:0;width:92px;height:92px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--sc,var(--verdict)) calc(var(--v)*1%),var(--wash-2) 0)}
.score .ring b{width:70px;height:70px;border-radius:50%;background:var(--paper);display:grid;place-items:center;
  font:700 1.5rem/1 var(--display)}
.score .meta{min-width:0}
.score .meta p{margin:.2rem 0 0;color:var(--ink-2);font-size:.9rem}

.kv{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;font-size:.92rem;margin:0}
.kv dt{color:var(--ink-3);font-weight:500}
.kv dd{margin:0;font-family:var(--mono);font-size:.86rem;word-break:break-all}

.copybar{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.6rem;flex-wrap:wrap}
.tagcloud{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.tagcloud li{background:var(--signal-wash);color:var(--signal-dk);border-radius:999px;padding:.3rem .65rem;
  font-size:.85rem;cursor:pointer;border:1px solid transparent}
.tagcloud li:hover{border-color:var(--signal)}
.tagcloud li.off{background:var(--wash-2);color:var(--ink-3);text-decoration:line-through}

.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--rule);margin-bottom:1rem;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:.6rem .8rem;font:600 .9rem var(--sans);
  color:var(--ink-3);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--signal);border-bottom-color:var(--signal)}

.note{border-left:3px solid var(--signal);background:var(--signal-wash);padding:.8rem 1rem;border-radius:0 var(--r-s) var(--r-s) 0;font-size:.92rem}
.note.warn{border-color:var(--alert);background:var(--alert-wash)}
.note p:last-child{margin-bottom:0}

.empty{color:var(--ink-3);font-size:.92rem;text-align:center;padding:1.6rem 1rem;border:1px dashed var(--rule);border-radius:var(--r-s)}

/* ---------- ads ---------- */
.adbox{margin:1.6rem 0;text-align:center}
.adlabel{display:block;font-size:.68rem;letter-spacing:.06em;color:var(--ink-3);margin-bottom:.35rem}
.adph{border:1px dashed var(--rule);border-radius:var(--r-s);background:var(--paper);color:var(--ink-3);
  font-size:.82rem;display:grid;place-items:center;padding:1rem;min-height:110px}
.adbox-sidebar .adph{min-height:250px}

/* ---------- faq / prose ---------- */
.prose{max-width:72ch}
.prose h2{margin-top:2rem}
.prose h3{margin-top:1.5rem}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li{margin-bottom:.4rem}
.faq details{border:1px solid var(--rule);border-radius:var(--r-s);background:var(--paper);margin-bottom:.6rem}
.faq summary{cursor:pointer;padding:.85rem 1rem;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--signal);font-weight:700}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 1rem 1rem;color:var(--ink-2);font-size:.95rem}
.faq .a p:last-child{margin-bottom:0}

.sidecard{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);padding:1rem}
.sidecard h2{font-size:.95rem;margin-bottom:.6rem}
.sidecard ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.sidecard a{display:block;padding:.4rem .5rem;border-radius:var(--r-s);text-decoration:none;color:var(--ink-2);font-size:.9rem}
.sidecard a:hover{background:var(--wash-2);color:var(--signal)}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#C3D2E6;padding:2.8rem 0 1.4rem;margin-top:1rem}
html[data-theme="dark"] .footer{background:#081120}
.footer-grid{display:grid;gap:1.8rem;grid-template-columns:1.5fr repeat(auto-fit,minmax(140px,1fr))}
.footer .brand{color:#fff}
.footer-blurb{font-size:.9rem;color:#93A9C8;max-width:38ch;margin-top:.7rem}
.footer-blurb.small{font-size:.85rem}
.footer-blurb a{color:#9EC5FF}
.footer-h{font:600 .88rem/1.3 var(--sans);color:#fff;margin:0 0 .55rem;letter-spacing:.01em}
.footer-h a{color:#fff;text-decoration:none}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.28rem}
.footer-col a{color:#A8BCD8;text-decoration:none;font-size:.85rem}
.footer-col a:hover,.footer-h a:hover{color:#fff;text-decoration:underline}
.footer-bar{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1rem;display:flex;
  flex-wrap:wrap;gap:.6rem 1.2rem;justify-content:space-between;align-items:center;font-size:.85rem}
.footer-bar p{margin:0;color:#93A9C8}
.footer-bar nav{display:flex;flex-wrap:wrap;gap:.3rem 1rem}
.footer-bar a{color:#A8BCD8;text-decoration:none}
.footer-bar a:hover{color:#fff;text-decoration:underline}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120%);background:var(--ink);color:#fff;
  padding:.7rem 1.1rem;border-radius:var(--r-s);font-size:.9rem;z-index:80;transition:transform .25s ease;box-shadow:var(--shadow)}
#toast.on{transform:translate(-50%,0)}
html[data-theme="dark"] #toast{background:#1E3050;border:1px solid var(--rule)}

/* ---------- misc pages ---------- */
.page-hero{background:var(--paper);border-bottom:1px solid var(--rule);padding:2.2rem 0 1.8rem}
.stat-row{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:1.4rem 0}
.stat{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);padding:.9rem 1rem}
.stat b{display:block;font:700 1.5rem/1.2 var(--display);color:var(--ink)}
.stat span{font-size:.85rem;color:var(--ink-3)}
.postcard{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);padding:1.1rem 1.2rem;margin-bottom:.9rem}
.postcard h2{font-size:1.15rem;margin-bottom:.3rem}
.postcard h2 a{text-decoration:none}
.postcard .date{font-size:.82rem;color:var(--ink-3)}

@media (max-width:860px){
  .nav-toggle{display:block}
  .sitenav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--rule);
    padding:.8rem 1.1rem 1.1rem;flex-direction:column;align-items:stretch;gap:.6rem;box-shadow:var(--shadow)}
  .sitenav.open{display:flex}
  .sitenav ul{flex-direction:column;gap:.1rem}
  .sitenav a{padding:.6rem .5rem;font-size:.98rem}
  .theme-btn{margin-left:0;width:100%}
  .masthead-in{position:relative;flex-wrap:wrap}
}
@media (max-width:380px){
  .brand{font-size:1rem}
  .brand-mark svg{width:26px;height:26px}
}
@media print{.masthead,.footer,.adbox,.sidebar,.toolsearch{display:none!important}}