/* ליבה: site styles.
   Liquid Glass throughout, tinted by the ember of the logo: every surface is frosted glass with a lit rim,
   on a plain, slightly warm page, so the ember of the chip and the scores is the only color. Floating parts (header, controls,
   notices) are clearer glass than the content tiles, which stay calm enough to read on.
   One accent color; its strength also encodes review scores.
   Always dark, whatever the operating system asks. Motion runs only without a reduced-motion preference,
   and every animation is optional: without support the page is complete and static.
   The styles come in six files, linked in this order on every page (the order is the cascade):
   styles.css (fonts, tokens, base, glass), layout.css, reviews.css, pages.css, subscription.css, motion.css. */

/* Assistant, the reading face: open, soft letters for Hebrew and Latin (SIL Open Font License, see
   fonts/OFL-Assistant.txt). Each weight is split into a Hebrew and a Latin file; the browser downloads
   only what a page uses. */
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/assistant-hebrew-400.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/assistant-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/assistant-hebrew-600.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/assistant-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/assistant-hebrew-700.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/assistant-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Display type, one face per script: Secular One for Hebrew, Archivo (semi-condensed, bold) for Latin
   letters and digits, whose Latin reads better than Secular One's. Both SIL Open Font License, see
   fonts/OFL-SecularOne.txt and fonts/OFL-Archivo.txt. Each file has a single weight, declared as 400 so
   headings set in it never ask for faux bold. */
@font-face {
  font-family: "Liba Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/secular-one-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: "Liba Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens */

:root {
  color-scheme: dark;
  --flow: 1;
  interpolate-size: allow-keywords;

  --canvas: #f6f4f1;
  --ink: #17181c;
  --ink-2: #4b4f57;
  /* Dark enough for 4.5:1 on every surface. */
  --accent: #9a3206;
  --accent-fill: #b93a0a;
  --on-accent: #ffffff;
  --focus: #9a3206;
  --tint: rgb(234 88 12 / 0.12);
  --hover: rgb(23 24 28 / 0.06);

  /* Content glass: frosted enough to read on. */
  --tile: rgb(255 255 255 / 0.78);
  --tile-solid: #ffffff;
  --tile-rim: rgb(255 255 255 / 0.95);
  --tile-blur: blur(22px) saturate(170%);
  --line: rgb(23 24 28 / 0.1);
  --line-strong: rgb(23 24 28 / 0.2);
  --track: rgb(23 24 28 / 0.1);

  /* Floating glass: clearer, with more light bent through it. */
  --glass: rgb(255 255 255 / 0.66);
  --glass-strong: rgb(255 255 255 / 0.72);
  --glass-solid: #f7f5f3;
  --glass-blur: blur(18px) saturate(200%) brightness(1.04);
  --glass-rim: rgb(255 255 255 / 0.95);
  --glass-rim-soft: rgb(255 255 255 / 0.5);
  --glass-edge: rgb(23 24 28 / 0.07);
  --glass-depth: rgb(255 255 255 / 0.45);
  --glass-shadow: 0 18px 40px -20px rgb(120 45 5 / 0.35), 0 2px 8px -2px rgb(23 24 28 / 0.08);
  --glare: rgb(255 255 255 / 0.55);
  --chip-glass: rgb(255 255 255 / 0.5);
  /* A glossy top on solid colors (scores, cores): faded out before the text, so contrast is kept. */
  --gloss: linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 38%);


  /* The chip on the home page: package, die, pins and the glass lid. */
  --package: rgb(255 255 255 / 0.45);
  --die: #d8d9dd;
  --pin: #a5a7ad;
  --lid-glare: rgb(255 255 255 / 0.22);
  --lid-sheen: rgb(255 255 255 / 0.22);
  --lid-edge: rgb(255 255 255 / 0.55);

  /* Review scores as heat: one hue, hotter for higher scores. Text colors keep at least 4.5:1. */
  --band-6: #fde2cc;
  --on-band-6: #1a0e05;
  --band-7: #fbbd8c;
  --on-band-7: #1a0e05;
  --band-8: #f59547;
  --on-band-8: #1a0e05;
  --band-9: #e2570b;
  --on-band-9: #1a0e05;
  --band-10: #a8340a;
  --on-band-10: #ffffff;

  /* Text sizes: one step apart (about 1.12), so small print stays readable and sizes don't drift. */
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-base: 1.125rem;
  --text-md: 1.25rem;
  --text-lg: 1.4375rem;

  --font: "Assistant", system-ui, "Segoe UI", "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
  --font-display: "Liba Display", var(--font);
  --r-tile: 32px;
  --r-inner: 20px;
  --r-chip: 12px;
  --r-pill: 999px;
  --header-h: 84px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* A gentle spring with a small overshoot, for things that move because the user did something. */
  --spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%,
    0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
}

/* Liba is dark, always: a black page, so the ember of the chip and the scores is the only color.
   These values override the light ones above, which are kept as the base palette. */
:root {
  --canvas: #050506;
  --ink: #f3f1ee;
  --ink-2: #bcb7b0;
  --accent: #ff8f45;
  --accent-fill: #f97316;
  --on-accent: #1a0e05;
  --focus: #ff8f45;
  --tint: rgb(249 115 22 / 0.16);
  --hover: rgb(243 241 238 / 0.08);

  --tile: rgb(27 25 30 / 0.86);
  --tile-solid: #1c1b20;
  --tile-rim: rgb(255 255 255 / 0.1);
  --line: rgb(243 241 238 / 0.1);
  --line-strong: rgb(243 241 238 / 0.22);
  --track: rgb(243 241 238 / 0.12);

  --glass: rgb(34 32 37 / 0.72);
  --glass-strong: rgb(34 32 37 / 0.75);
  --glass-solid: #242228;
  --glass-blur: blur(18px) saturate(180%) brightness(1.08);
  --glass-rim: rgb(255 255 255 / 0.28);
  --glass-rim-soft: rgb(255 200 160 / 0.1);
  --glass-edge: rgb(255 255 255 / 0.08);
  --glass-depth: rgb(255 170 110 / 0.08);
  --glass-shadow: 0 18px 44px -18px rgb(0 0 0 / 0.8), 0 2px 10px -2px rgb(0 0 0 / 0.4);
  --glare: rgb(255 210 170 / 0.1);
  --chip-glass: rgb(255 255 255 / 0.06);


  --package: rgb(40 37 44 / 0.5);
  --die: #121116;
  --pin: #45434d;
  --lid-glare: rgb(255 200 150 / 0.12);
  --lid-sheen: rgb(255 255 255 / 0.08);
  --lid-edge: rgb(255 255 255 / 0.1);

  --band-6: #4a1d0a;
  --on-band-6: #ffffff;
  --band-7: #8a330f;
  --on-band-7: #ffffff;
  --band-8: #d9590f;
  --on-band-8: #1a0e05;
  --band-9: #ff8a3d;
  --on-band-9: #1a0e05;
  --band-10: #ffc483;
  --on-band-10: #1a0e05;
}


/* Less transparency asked for (on Windows: "Transparency effects" off): the glass stays, but frosted
   much more, so what is behind it barely shows. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --tile: color-mix(in srgb, var(--tile-solid) 84%, transparent);
    --glass: color-mix(in srgb, var(--glass-solid) 78%, transparent);
    --glass-strong: color-mix(in srgb, var(--glass-solid) 90%, transparent);
    --package: color-mix(in srgb, var(--tile-solid) 70%, transparent);
    --chip-glass: color-mix(in srgb, var(--tile-solid) 70%, transparent);
  }
}

/* More contrast asked for, or no backdrop-filter support: every surface is solid. */
@media (prefers-contrast: more) {
  :root {
    --glass: var(--glass-solid);
    --glass-strong: var(--glass-solid);
    --tile: var(--tile-solid);
    --package: var(--tile-solid);
    --chip-glass: var(--tile-solid);
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --glass: var(--glass-solid);
    --glass-strong: var(--glass-solid);
    --tile: var(--tile-solid);
    --package: var(--tile-solid);
  }
}

@media (prefers-contrast: more) {
  :root {
    --ink-2: var(--ink);
    --line: var(--line-strong);
    --glass-edge: var(--line-strong);
  }
}

.band-6 {
  --heat: var(--band-6);
  --on-heat: var(--on-band-6);
}

.band-7 {
  --heat: var(--band-7);
  --on-heat: var(--on-band-7);
}

.band-8 {
  --heat: var(--band-8);
  --on-heat: var(--on-band-8);
}

.band-9 {
  --heat: var(--band-9);
  --on-heat: var(--on-band-9);
}

.band-10 {
  --heat: var(--band-10);
  --on-heat: var(--on-band-10);
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Keeps anchors and focused elements clear of the floating header and the cookie notice. */
  scroll-padding-top: calc(var(--header-h) + 12px);
  scroll-padding-bottom: var(--notice-space, 0px);
}

body {
  min-height: 100vh;
  margin: 0;
  padding-bottom: var(--notice-space, 0px);
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}

/* Display type: headings, product names and every score share one voice. */
h1,
h2,
.section-title,
.brand,
.review h3,
.heat-score,
.score-tile,
.review article::before,
.steps li::before,
.steps h3,
.verdict-grade,
.footer-name,
.lens,
.bench-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
}

h1,
h2,
.section-title {
  letter-spacing: -0.01em;
}

/* Small headings inside text stay in the reading font. */
.prose h3,
.proscons h3,
.proscons h4,
.toc h2,
.sources-title,
.strip-label,
.verdict-title,
.bench figcaption {
  font-family: var(--font);
  font-weight: 600;
}

p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

p {
  text-wrap: pretty;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

a:hover {
  text-decoration-color: var(--accent);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* main.js moves focus to <main> when the cookie notice closes; a ring around the whole page would only confuse. */
main[tabindex="-1"]:focus {
  outline: none;
}

.wrap {
  width: min(100% - 32px, 1200px);
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: 12px;
  z-index: 50;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--canvas);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Liquid glass. Two strengths of one material: floating glass (header, controls, buttons, notices)
   and content glass (tiles and the review list). Both get a lit rim, a soft glow inside the lower edge
   where light passing through the glass gathers, and a glare that follows the pointer (main.js). */

.glass,
.tile,
.review-list {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),
    inset 0 -14px 24px -18px var(--glass-depth),
    var(--glass-shadow);
}

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* The rim: light caught along the edge, brightest at the top corner and again at the opposite one. */
.glass::before,
.tile::before,
.review-list::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(160deg, var(--glass-rim), transparent 32%, transparent 68%, var(--glass-rim-soft));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* The glare: under the content, over the glass. main.js moves it with the pointer. */
.glass::after,
.tile::after,
.review-list::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 0%), var(--glare), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.glass.is-lit::after,
.tile.is-lit::after,
.review-list.is-lit::after {
  opacity: 1;
}

/* Content glass: frosted more, so text on it stays calm. */

.tile,
.review-list {
  border-radius: var(--r-tile);
  background: var(--tile);
  -webkit-backdrop-filter: var(--tile-blur);
  backdrop-filter: var(--tile-blur);
}