/* best-antidetect-browsers.com — editorial magazine. Plain CSS. */

:root{
  --paper: oklch(98.5% 0.008 95);
  --paper-2: oklch(95.5% 0.014 95);
  --ink: oklch(21% 0.02 160);
  --ink-2: oklch(38% 0.015 160);
  --ink-3: oklch(52% 0.012 160);
  --hair: oklch(88% 0.012 95);
  --leaf: oklch(46% 0.11 158);
  --leaf-deep: oklch(34% 0.09 158);
  --wash: oklch(94% 0.03 158);
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --text: 'Work Sans', -apple-system, 'Segoe UI', Helvetica, sans-serif;
  --col: 66ch;
}

*{ box-sizing:border-box; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--text);
  font-size:18px; line-height:1.68; text-wrap:pretty; }
::selection{ background:var(--wash); }

h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.14;
  margin:0 0 .45em; text-wrap:balance; }
h1{ font-size:clamp(2.3rem,1.7rem + 2.6vw,3.6rem); font-variation-settings:'SOFT' 40,'WONK' 1; letter-spacing:-.02em; }
h2{ font-size:clamp(1.5rem,1.3rem + .9vw,2rem); margin-top:0; }
h3{ font-size:1.2rem; }
p{ margin:0 0 1.1em; max-width:var(--col); color:var(--ink-2); }
a{ color:var(--leaf-deep); text-underline-offset:3px; }
a:hover{ color:var(--leaf); }

.shell{ max-width:1180px; margin:0 auto; padding:0 28px; }
.reading{ max-width:760px; }

/* masthead */
.masthead{ border-bottom:2px solid var(--ink); }
.masthead .shell{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; padding-top:26px; padding-bottom:18px; flex-wrap:wrap; }
.wordmark{ font-family:var(--display); font-weight:600; font-size:1.5rem; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; font-variation-settings:'WONK' 1; }
.wordmark span{ display:block; font-family:var(--text); font-size:.68rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:4px; }
.menu{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.menu a{ font-size:.9rem; font-weight:500; color:var(--ink); text-decoration:none; }
.menu a:hover,.menu a[aria-current]{ color:var(--leaf); text-decoration:underline; text-underline-offset:5px; }

.trail{ font-size:.82rem; color:var(--ink-3); padding:14px 0; border-bottom:1px solid var(--hair); }
.trail ol{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.trail a{ color:var(--ink-3); text-decoration:none; }
.trail li:not(:last-child)::after{ content:"›"; margin-left:8px; color:var(--hair); }

/* article head */
.head{ padding:64px 0 40px; }
.kicker{ font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--leaf); margin:0 0 18px; }
.standfirst{ font-size:1.22rem; line-height:1.6; color:var(--ink-2); max-width:38ch; }
.byline{ font-size:.8rem; color:var(--ink-3); border-top:1px solid var(--hair);
  padding-top:14px; margin-top:28px; max-width:none; }

.note{ background:var(--paper-2); border:1px solid var(--hair); padding:18px 22px;
  font-size:.88rem; color:var(--ink-3); margin:0 0 40px; max-width:none; }
.note b{ color:var(--ink); }

.block{ padding:40px 0; border-top:1px solid var(--hair); }

/* the pick */
.pick{ background:var(--paper-2); border-top:3px solid var(--leaf); padding:32px; margin:28px 0; }
.pick .tag{ font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--leaf); margin:0 0 10px; }
.pick h3{ font-size:1.7rem; margin-bottom:.3em; }
.pick .why{ font-size:1.05rem; color:var(--ink-2); }
.pick dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px;
  margin:24px 0 0; padding-top:22px; border-top:1px solid var(--hair); }
.pick dt{ font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:5px; }
.pick dd{ margin:0; font-size:.98rem; font-weight:500; }

/* runners-up */
.runners{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px; margin:28px 0; }
.runner{ border-top:1px solid var(--ink); padding-top:16px; }
.runner h3{ margin-bottom:.3em; }
.runner h3 a{ color:var(--ink); text-decoration:none; }
.runner h3 a:hover{ color:var(--leaf); }
.runner .role{ font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--leaf); margin:0 0 8px; }
.runner p{ font-size:.94rem; }
.runner .against{ color:var(--ink-3); font-size:.9rem; }

/* facts */
.facts{ width:100%; border-collapse:collapse; font-size:.94rem; margin:22px 0; }
.facts caption{ text-align:left; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:12px; }
.facts th,.facts td{ text-align:left; padding:13px 14px; border-bottom:1px solid var(--hair);
  vertical-align:top; }
.facts thead th{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); border-bottom:2px solid var(--ink); font-weight:600; }
.facts tbody th{ font-weight:600; color:var(--ink); }
.facts td:first-child,.facts th:first-child{ padding-left:0; }
.facts td:last-child,.facts th:last-child{ padding-right:0; }
.scroller{ overflow-x:auto; }
@media (max-width:720px){
  .flip thead{ display:none; }
  .flip,.flip tbody,.flip tr{ display:block; }
  .flip tr{ border-bottom:2px solid var(--hair); padding:14px 0; }
  .flip th,.flip td{ display:flex; justify-content:space-between; gap:18px; padding:5px 0;
    border:none; text-align:right; }
  .flip th::before,.flip td::before{ content:attr(data-l); font-size:.72rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-3); text-align:left; font-weight:600; }
}

/* rule list */
.checks{ list-style:none; margin:22px 0; padding:0; }
.checks li{ padding:14px 0 14px 34px; border-bottom:1px solid var(--hair); position:relative;
  color:var(--ink-2); max-width:var(--col); }
.checks li::before{ content:"—"; position:absolute; left:0; color:var(--leaf); font-weight:600; }

/* pullquote */
.pull{ font-family:var(--display); font-size:1.45rem; line-height:1.35; color:var(--ink);
  border-left:3px solid var(--leaf); padding:6px 0 6px 26px; margin:34px 0; max-width:32ch; }

/* questions */
.qa{ margin:22px 0; }
.qa details{ border-bottom:1px solid var(--hair); }
.qa summary{ padding:18px 0; cursor:pointer; font-weight:600; font-family:var(--display);
  font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; gap:18px; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:"＋"; color:var(--leaf); font-weight:400; }
.qa details[open] summary::after{ content:"－"; }
.qa p{ padding-bottom:18px; }

/* index cards */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:2px;
  background:var(--hair); border:1px solid var(--hair); margin:28px 0; }
.tile{ background:var(--paper); padding:26px; display:flex; flex-direction:column; gap:10px; }
.tile .n{ font-family:var(--display); font-size:.85rem; color:var(--leaf); }
.tile h3{ margin:0; font-size:1.15rem; }
.tile h3 a{ color:var(--ink); text-decoration:none; }
.tile h3 a:hover{ color:var(--leaf); }
.tile p{ font-size:.9rem; color:var(--ink-3); margin:0; flex-grow:1; }
.tile .winner{ font-size:.8rem; font-weight:600; color:var(--ink); border-top:1px solid var(--hair);
  padding-top:10px; margin:0; }

.button{ display:inline-block; background:var(--leaf); color:var(--paper); text-decoration:none;
  font-weight:600; font-size:.92rem; padding:14px 28px; }
.button:hover{ background:var(--leaf-deep); color:var(--paper); }
.cited{ font-size:.8rem; color:var(--ink-3); max-width:none; margin-top:14px; }
.cited a{ color:var(--ink-3); }
.starred{ border-bottom:1px dotted var(--leaf); }

.more{ border-top:2px solid var(--ink); padding-top:22px; margin:56px 0 72px; }
.more h2{ font-family:var(--text); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:16px; }
.more ul{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px 28px; font-size:.94rem; }
.more a{ text-decoration:none; }

.colophon{ border-top:1px solid var(--hair); padding:34px 0 56px; font-size:.82rem; color:var(--ink-3); }
.colophon .shell{ display:flex; flex-wrap:wrap; gap:10px 30px; justify-content:space-between; }
.colophon a{ color:var(--ink-3); }