/* BrowVerdict — site styles. Tokens from the Modernist design system. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-400.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/archivo-500.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/archivo-600.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/archivo-700.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/archivo-800.woff2) format("woff2")}
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0;padding:0;background:var(--color-bg)}
body{font-family:var(--font-body);color:var(--color-text);-webkit-font-smoothing:antialiased;line-height:1.55;font-size:15px}
h1,h2,h3,h4{font-family:var(--font-heading)}
a{color:var(--color-accent-700);text-decoration:none}
a:hover{color:var(--color-accent-600)}
img{max-width:100%}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--color-accent) 30%,transparent)}
.skip{position:absolute;left:-9999px;top:0;background:var(--color-accent);color:#fff;padding:12px 16px;z-index:10;font-weight:600}
.skip:focus{left:8px;top:8px;color:#fff}
.navlink:hover{color:var(--color-bg)!important;background:var(--color-neutral-800)}
.flink:hover{color:#fff!important}
.tlink:hover{color:var(--color-accent-700)!important}
.h-acc:hover{background:var(--color-accent-600)!important;color:#fff!important}
.h-dark:hover{background:var(--color-neutral-800)!important;color:var(--color-bg)!important}
.h-white:hover{background:var(--color-accent-100)!important}
.chip{display:inline-block;appearance:none;border:0;cursor:pointer;background:var(--color-surface);color:var(--color-text);font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:9px 12px;line-height:1.3}
.chip:hover{background:var(--color-neutral-300);color:var(--color-text)}
.chip[aria-pressed="true"]{background:var(--color-neutral-900);color:var(--color-bg)}
.card[hidden]{display:none!important}
table th,table td{font-weight:inherit}
.hv1:hover,.hv1:focus-visible{background:var(--color-accent-600) !important}
.hv2:hover,.hv2:focus-visible{background:var(--color-neutral-800) !important;color:var(--color-bg) !important}
.hv3:hover,.hv3:focus-visible{background:var(--color-neutral-800) !important}
.hv4:hover,.hv4:focus-visible{color:var(--color-accent-700) !important}
.hv5:hover,.hv5:focus-visible{background:var(--color-accent-600) !important;color:#fff !important}
.hv6:hover,.hv6:focus-visible{background:var(--color-neutral-800) !important;color:#fff !important}
@media (max-width:700px){
  .wrap{padding-left:20px!important;padding-right:20px!important}
  .spacer{display:none}
  .toc{position:static!important;flex:1 1 100%!important;order:2}
  section{padding-top:56px}
}
