/* Krönika — an opinionated shopping magazine in a bookish black-and-white suit.
 *
 * The contract (docs/research/templates/strategist.md):
 *   · the chrome is ink on paper — old-style serif for anything with an opinion,
 *     typewriter mono for anything functional (eyebrows, prices, buttons, links)
 *   · DOTTED rules are the separation system — never solid hairlines
 *   · color lives inside the image plates; the chrome's entire color budget is
 *     ONE red-orange, spent only on rea/deal moments
 *   · links rest on a dotted underline and go solid on hover — the whole page
 *     speaks the same dotted language
 *   · motion is small and mechanical, like a carriage return — never showy
 *
 * Knob vars (with fallbacks): --smedja-rule-style, --smedja-radius-sm/md/lg,
 * --smedja-section-y.
 */

:root {
  --kr-ease: cubic-bezier(0.2, 0, 0, 1);
  --kr-r-sm: var(--smedja-radius-sm, 0px);
  --kr-r-md: var(--smedja-radius-md, 0px);
  --kr-r-lg: var(--smedja-radius-lg, 0px);
  --kr-section-y: var(--smedja-section-y, clamp(3rem, 3vw + 1.6rem, 4.75rem));
  --kr-rule-style: var(--smedja-rule-style, dotted);
  --kr-ink: var(--wp--preset--color--contrast);
  --kr-paper: var(--wp--preset--color--base);
  --kr-panel: var(--wp--preset--color--surface);
  --kr-black: var(--wp--preset--color--primary);
  --kr-pencil: var(--wp--preset--color--primary-soft);
  --kr-rea: var(--wp--preset--color--accent);
  --kr-grafit: var(--wp--preset--color--muted);
  --kr-dot: var(--wp--preset--color--line);
  --kr-mono: var(--wp--preset--font-family--mono);
  --kr-serif: var(--wp--preset--font-family--body);
  --kr-display: var(--wp--preset--font-family--display);
  /* The two rule weights: quiet (1px) and signature (2px — real dots). */
  --kr-rule: 1px var(--kr-rule-style) var(--kr-dot);
  --kr-rule-strong: 2px var(--kr-rule-style) color-mix(in srgb, var(--kr-ink) 55%, var(--kr-dot));
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[id] {
  scroll-margin-top: 5.5rem;
}
::selection {
  background: var(--kr-ink);
  color: var(--kr-paper);
}
body {
  font-optical-sizing: auto;
}

/* Links: dotted at rest, solid on hover — the page's handshake. */
a:not(.wp-element-button) {
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
a:not(.wp-element-button):hover {
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
}
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--kr-ink);
  outline-offset: 2px;
}

/* == Machinery type (the typewriter voice) =========================== */
.kr-eyebrow {
  font-family: var(--kr-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kr-ink);
  margin: 0;
}
.kr-caption {
  font-family: var(--kr-mono);
  font-size: 0.75rem;
  color: var(--kr-grafit);
  margin: 0.6rem 0 0;
  line-height: 1.55;
}

/* The ➔ arrow — every mono link carries one; it nudges on hover. */
.kr-arrow {
  display: inline-block;
  margin-left: 0.45em;
}
a:hover > .kr-arrow,
a:hover .kr-arrow {
  transform: translateX(3px);
}

/* Mono link — machinery navigation, no underline until hover. */
.kr-mlink {
  font-family: var(--kr-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kr-ink);
  text-decoration: none;
}
.kr-mlink:hover {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* Tags — bordered mono stamps; REA is the only colored one. */
.kr-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--kr-mono);
  font-size: 0.6563rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kr-ink);
  border: 1px solid var(--kr-ink);
  border-radius: var(--kr-r-sm);
  padding: 0.3em 0.65em 0.24em;
  white-space: nowrap;
  background: var(--kr-paper);
}
.kr-tag--rea {
  color: var(--kr-paper);
  background: var(--kr-rea);
  border-color: var(--kr-rea);
}
.kr-tag--dim {
  color: var(--kr-grafit);
  border-color: var(--kr-dot);
}

/* Prices — typewriter numerals, always. */
.kr-price {
  font-family: var(--kr-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--kr-ink);
  white-space: nowrap;
}
.kr-price--was {
  font-weight: 400;
  color: var(--kr-grafit);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-size: 0.8125rem;
}

/* Buttons — a typewriter key: ink block, mono caps, presses down. */
.kr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  font-family: var(--kr-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--kr-r-sm);
  padding: 0.78em 1.3em;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.kr-btn--ink {
  color: var(--kr-paper);
  background: var(--kr-ink);
}
.kr-btn--ink:hover {
  color: var(--kr-paper);
  background: var(--kr-pencil);
}
.kr-btn--ghost {
  color: var(--kr-ink);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--kr-ink);
}
.kr-btn--ghost:hover {
  color: var(--kr-paper);
  background: var(--kr-ink);
}
.kr-btn:active {
  transform: scale(0.98);
}

/* Image plates — where the color lives. Thin ink outline, sticker tilt. */
.kr-plate {
  margin: 0;
  overflow: hidden;
  border-radius: var(--kr-r-sm);
  background: var(--kr-panel);
}
.kr-plate img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a:hover .kr-plate img,
  .kr-plate a:hover img {
    transform: rotate(-0.6deg) scale(1.02);
  }
}

/* == Bands (sections own their rhythm) =============================== */
.kr-band {
  padding-top: calc(var(--kr-section-y) * 0.55);
  padding-bottom: calc(var(--kr-section-y) * 0.55);
}
.kr-band--hero {
  padding-top: calc(var(--kr-section-y) * 0.75);
  padding-bottom: calc(var(--kr-section-y) * 0.3);
}
.kr-band--disclosure {
  padding-top: 0;
  padding-bottom: 0;
}
.kr-band--front {
  padding-top: calc(var(--kr-section-y) * 0.5);
}

.kr-section-head {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1.9rem;
  border-top: 3px solid var(--kr-ink);
  padding-top: 0.85rem;
  max-width: none;
}
.kr-section-head--plain {
  border-top: 0;
  padding-top: 0;
  max-width: 42rem;
}
.kr-section-title {
  font-family: var(--kr-display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
.kr-section-lede {
  font-size: var(--wp--preset--font-size--md);
  font-style: italic;
  line-height: 1.5;
  color: var(--kr-grafit);
  margin: 0;
  max-width: 44rem;
}
.kr-section-head--row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
}
/* Eyebrow and lede span the full row; only title + more-link share a line. */
.kr-section-head--row .kr-eyebrow,
.kr-section-head--row .kr-section-lede {
  grid-column: 1 / -1;
}
.kr-section-head--row .kr-mlink {
  grid-column: 2;
  justify-self: end;
}

/* == Masthead ======================================================== */
/* WP wraps template parts in .wp-block-template-part — sticky must live on
   the wrapper, or the header only sticks within its own height. */
.wp-block-template-part:has(> .kr-masthead) {
  position: sticky;
  top: 0;
  z-index: 50;
}
.kr-masthead {
  border-top: 4px solid var(--kr-ink);
  border-bottom: var(--kr-rule-strong);
  background: color-mix(in srgb, var(--kr-paper) 94%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
}
.kr-masthead__utility {
  border-bottom: var(--kr-rule);
  transition: max-height 220ms var(--kr-ease), opacity 160ms ease;
  max-height: 3rem;
  overflow: hidden;
}
.kr-masthead.is-condensed .kr-masthead__utility {
  max-height: 0;
  opacity: 0;
  border-bottom-color: transparent;
}
.kr-utility-note,
.kr-utility-links {
  font-family: var(--kr-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kr-grafit);
  margin: 0;
  padding: 0.5rem 0;
}
.kr-utility-links {
  display: flex;
  gap: 1.4rem;
}
.kr-utility-links a {
  color: var(--kr-grafit);
  text-decoration: none;
}
.kr-utility-links a:hover {
  color: var(--kr-ink);
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.kr-masthead__main {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  transition: padding 220ms var(--kr-ease);
}
.kr-masthead.is-condensed .kr-masthead__main {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
/* Logo lockup — the onsen glyph beside the wordmark.
   The mark is the same drawing as the favicon so the two read as one identity; it takes
   currentColor so it inherits the wordmark's ink and needs no separate dark-mode handling.
   The full stop stays accent-coloured: it is the one piece of colour the masthead spends. */
.kr-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--kr-ink);
  line-height: 1;
}
.kr-logo__mark {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--kr-ink);
  transition: transform 220ms var(--kr-ease), width 220ms var(--kr-ease), height 220ms var(--kr-ease);
}
.kr-logo__word {
  font-family: var(--kr-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: font-size 220ms var(--kr-ease);
}
.kr-logo__dot { color: var(--kr-rea); }
.kr-logo:hover .kr-logo__mark { transform: translateY(-2px); }
.kr-masthead.is-condensed .kr-logo__word { font-size: 1.3rem; }
.kr-masthead.is-condensed .kr-logo__mark { width: 24px; height: 24px; }
@media (max-width: 480px) {
  .kr-logo__word { font-size: 1.35rem; }
  .kr-logo__mark { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .kr-logo__mark { transition: none; }
  .kr-logo:hover .kr-logo__mark { transform: none; }
}

.kr-wordmark {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  transition: font-size 220ms var(--kr-ease);
}
.kr-masthead.is-condensed .kr-wordmark {
  font-size: 1.3rem;
}
.kr-wordmark a {
  text-decoration: none;
  color: var(--kr-ink);
}
/* The wordmark's full stop — a newspaper's period, set in ink. */
.kr-wordmark a::after {
  content: ".";
  color: var(--kr-rea);
}
.kr-wordmark a:hover {
  color: var(--kr-pencil);
}
.kr-masthead__nav {
  gap: 1.5rem;
}
.kr-nav a {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kr-ink);
}
.kr-nav a:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}
.kr-nav .wp-block-navigation__container {
  gap: 1.4rem;
}
.kr-masthead__cta {
  font-family: var(--kr-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kr-paper);
  background: var(--kr-ink);
  text-decoration: none;
  border-radius: var(--kr-r-sm);
  padding: 0.85em 1.1em;
  white-space: nowrap;
  transition: background-color 140ms ease;
}
.kr-masthead__cta:hover {
  background: var(--kr-pencil);
  color: var(--kr-paper);
}

/* == Page hero ======================================================= */
.kr-hero {
  display: grid;
  gap: 1.1rem;
  max-width: 50rem;
}
.kr-hero__title {
  font-family: var(--kr-display);
  font-size: var(--wp--preset--font-size--3-xl);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.008em;
  margin: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}
.kr-hero__dek {
  font-size: var(--wp--preset--font-size--md);
  font-style: italic;
  line-height: 1.52;
  color: var(--kr-grafit);
  margin: 0;
  max-width: 42rem;
}
.kr-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.1rem;
  font-family: var(--kr-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kr-grafit);
  border-top: var(--kr-rule);
  padding-top: 0.8rem;
  margin-top: 0.4rem;
}
.kr-byline__name {
  font-weight: 700;
  color: var(--kr-ink);
}
.kr-hero__media {
  margin-top: 1.8rem;
}

/* == Disclosure ====================================================== */
/* Hero disclosure CTA — the low-friction jump to the product card on this page. */
.kr-disclosure__cta {
  display: flex;
  justify-content: center;
  margin: 0.85rem 0 0.15rem;
}
.kr-band--disclosure:has(.kr-disclosure__cta) .kr-disclosure {
  border-bottom: 0;
  padding-bottom: 0.4rem;
}

.kr-disclosure {
  font-family: var(--kr-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--kr-grafit);
  border-top: var(--kr-rule);
  border-bottom: var(--kr-rule);
  padding: 0.75rem 0;
  margin: 0;
  /* One disclosure per page, centred under the hero image and above every affiliate
     link on the page — so it is read before anything it discloses. */
  text-align: center;
  text-wrap: balance;
}

/* == Temperaturskalan ================================================
   The front page's primary navigation: pick a temperature, you have picked
   a product. The rung marker is the ONE place the chrome carries colour,
   because here the colour is the datum — cold at the top, hot at the bottom.
   Everything else stays black and white per the template contract. */
.kr-band--temp {
  --temp-cold: #3E6E8E;
  --temp-hot: #A8502B;
  scroll-margin-top: 7rem;
}

/* On the front page the hero is an invitation, not the destination — cap it so the
   temperature scale is reachable without a scroll on a laptop. */
body.home .kr-hero__media img {
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center 58%;
}
body.home .kr-band--hero {
  padding-bottom: 0;
}
.kr-temp {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  border-top: var(--kr-rule-strong);
}
.kr-temp__row {
  /* the rung colour, interpolated cold -> hot by --heat */
  --rung: color-mix(in oklab, var(--temp-hot) calc(var(--heat) * 100%), var(--temp-cold));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 1.5rem;
  border-bottom: var(--kr-rule);
  position: relative;
  padding-left: 1.15rem;
}
/* the scale itself — a segment of rail per rung */
.kr-temp__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--rung);
  transition: width 160ms var(--kr-ease);
}
.kr-temp__main {
  display: grid;
  grid-template-columns: 5.9rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0 1.4rem;
  padding: 1.15rem 0;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.kr-temp__deg {
  font-family: var(--kr-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rung);
  white-space: nowrap;
}
.kr-temp__text { min-width: 0; }
.kr-temp__name {
  display: block;
  font-family: var(--kr-display);
  font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.18;
  transition: color 140ms ease;
}
.kr-temp__line {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--kr-grafit);
  margin-top: 0.25rem;
  max-width: 52ch;
}
.kr-temp__main:hover .kr-temp__name {
  color: var(--kr-pencil);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}
.kr-temp__row:hover::before { width: 7px; }

/* the price is the commercial exit — mono, boxed, unmistakably a button */
.kr-temp__price {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  justify-self: end;
  font-family: var(--kr-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.7em 1.1em;
  min-height: 42px;
  color: var(--kr-paper);
  background: var(--kr-ink);
  border-radius: var(--kr-r-sm);
  transition: background-color 140ms ease;
}
.kr-temp__price:hover { color: var(--kr-paper); background: var(--rung); }
.kr-temp__price .kr-arrow { transition: transform 160ms var(--kr-ease); }
.kr-temp__price:hover .kr-arrow { transform: translateX(3px); }
.kr-temp__price--none {
  color: var(--kr-grafit);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--kr-dot);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
@media (max-width: 640px) {
  .kr-temp__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kr-temp__main { grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0 1rem; padding-bottom: 0.7rem; }
  .kr-temp__price { justify-self: stretch; justify-content: center; margin-bottom: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kr-temp__row::before,
  .kr-temp__price .kr-arrow { transition: none; }
  .kr-temp__row:hover::before { width: 4px; }
  .kr-temp__price:hover .kr-arrow { transform: none; }
}

/* Compact scale — the cross-navigation that runs at the foot of every guide.
   Each page omits its own rung, so the block reads as "the other temperatures"
   rather than a repeated boilerplate strip. */
.kr-band--temp.is-compact .kr-temp { margin-top: 1rem; }
.kr-band--temp.is-compact .kr-temp__main { padding: 0.85rem 0; grid-template-columns: 5.2rem minmax(0, 1fr); }
.kr-band--temp.is-compact .kr-temp__name { font-size: 1.0625rem; }
.kr-band--temp.is-compact .kr-temp__line { display: none; }
.kr-band--temp.is-compact .kr-temp__deg { font-size: 0.9375rem; }
.kr-band--temp.is-compact .kr-temp__price { font-size: 0.75rem; padding: 0.55em 0.9em; min-height: 36px; }
@media (max-width: 640px) {
  .kr-band--temp.is-compact .kr-temp__price { margin-bottom: 0.85rem; }
}

/* == Front feature (the magazine cover spread) ======================= */
.kr-front {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 2.7fr);
  gap: clamp(1.5rem, 2.6vw, 2.8rem);
  align-items: start;
}

/* The lead story — one big plate, one big headline. */
.kr-lead {
  display: grid;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.kr-lead__img img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.kr-lead__title {
  font-family: var(--kr-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.008em;
  margin: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
  transition: color 150ms ease;
}
.kr-lead__dek {
  font-size: var(--wp--preset--font-size--md);
  font-style: italic;
  line-height: 1.5;
  color: var(--kr-grafit);
  margin: 0;
}
.kr-lead__meta {
  font-family: var(--kr-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kr-grafit);
  margin: 0;
}
.kr-lead:hover .kr-lead__title {
  color: var(--kr-pencil);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}

/* The middle column — smaller stories stacked between dotted rules. */
.kr-front__stack {
  display: grid;
  align-content: start;
  min-width: 0;
}
.kr-stack-card {
  display: grid;
  gap: 0.6rem;
  padding: 1.1rem 0;
  border-bottom: var(--kr-rule);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.kr-stack-card:first-child {
  padding-top: 0;
}
.kr-stack-card__img img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.kr-stack-card__title {
  font-family: var(--kr-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.16;
  margin: 0;
  overflow-wrap: break-word;
  transition: color 150ms ease;
}
.kr-stack-card:hover .kr-stack-card__title {
  color: var(--kr-pencil);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
}

/* "Dagens fynd" — the price rail with dotted leaders, like an index page. */
.kr-rail {
  border-top: 3px solid var(--kr-ink);
  padding-top: 0.8rem;
  min-width: 0;
}
.kr-rail__head {
  font-family: var(--kr-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.3rem;
}
.kr-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kr-rail__item + .kr-rail__item {
  border-top: var(--kr-rule);
}
.kr-rail__link {
  display: block;
  padding: 0.8rem 0;
  text-decoration: none;
  color: inherit;
}
.kr-rail__row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}
.kr-rail__name {
  font-family: var(--kr-display);
  font-size: 1.0313rem;
  font-weight: 600;
  line-height: 1.25;
  transition: color 140ms ease;
}
.kr-rail__leader {
  flex: 1 1 1rem;
  min-width: 1rem;
  border-bottom: 2px dotted var(--kr-dot);
  transform: translateY(-0.3em);
}
.kr-rail__price {
  font-family: var(--kr-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.875rem;
  white-space: nowrap;
}
.kr-rail__note {
  display: block;
  font-size: 0.8438rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--kr-grafit);
  margin-top: 0.25rem;
}
.kr-rail__link:hover .kr-rail__name {
  color: var(--kr-pencil);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}
.kr-rail__more {
  display: inline-block;
  margin-top: 0.9rem;
}

/* == Roundup (numbered, opinionated) ================================= */
.kr-roundup {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 3px solid var(--kr-ink);
}
.kr-roundup__row {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 11rem) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
  align-items: start;
  padding: clamp(1.4rem, 2.4vw, 2rem) 0;
  border-bottom: var(--kr-rule);
}
.kr-roundup__num {
  font-family: var(--kr-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--kr-grafit);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.kr-roundup__num::after {
  content: ".";
}
.kr-roundup__media {
  min-width: 0;
}
/* Text-only roundups (no item has an image — e.g. places to stay, which we may not photograph):
   drop the media column instead of leaving an empty square beside every row. */
.kr-roundup--text .kr-roundup__row {
  grid-template-columns: 2.8rem minmax(0, 1fr);
}
.kr-roundup__media img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.kr-roundup__body {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}
.kr-roundup__toprow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem 1.2rem;
  flex-wrap: wrap;
}
.kr-roundup__name {
  font-family: var(--kr-display);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  overflow-wrap: break-word;
}
.kr-roundup__prices {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  white-space: nowrap;
}
.kr-roundup__line {
  font-size: 1.0313rem;
  line-height: 1.58;
  margin: 0;
  max-width: 38rem;
}
/* Product plate as a link — the image is usually the first thing a reader reaches for. */
.kr-roundup__imglink {
  display: block;
  text-decoration: none;
  border-radius: var(--kr-r-sm);
  overflow: hidden;
  transition: opacity 140ms ease, transform 140ms ease;
}
.kr-roundup__imglink:hover {
  opacity: 0.88;
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .kr-roundup__imglink { transition: none; }
  .kr-roundup__imglink:hover { transform: none; }
}

/* The shop CTA — the click the page exists to earn. Comfortable tap target, clear affordance,
   arrow that nudges on hover so it reads as "this goes somewhere". */
.kr-roundup__cta {
  min-height: 44px;
  padding: 0.85em 1.5em;
  font-size: 0.875rem;
  box-shadow: 0 1px 0 var(--kr-ink);
}
.kr-roundup__cta .kr-arrow {
  transition: transform 160ms ease;
}
.kr-roundup__cta:hover .kr-arrow {
  transform: translateX(3px);
}
.kr-roundup__cta:active {
  box-shadow: none;
  transform: translateY(1px) scale(0.99);
}
@media (max-width: 34rem) {
  .kr-roundup__cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .kr-roundup__cta .kr-arrow { transition: none; }
  .kr-roundup__cta:hover .kr-arrow { transform: none; }
}

.kr-roundup__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-top: 0.7rem;
}

/* == Review (first person, no lab coat) ============================== */
.kr-review {
  border: var(--kr-rule-strong);
  border-radius: var(--kr-r-md);
  padding: clamp(1.5rem, 3vw, 2.6rem);
  background: var(--kr-paper);
  display: grid;
  gap: clamp(1.3rem, 2.4vw, 2rem);
}
.kr-review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.kr-review__cols {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.3rem, 2.6vw, 2.4rem);
  align-items: start;
}
.kr-review__name {
  font-family: var(--kr-display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 0.7rem;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.kr-review__verdict {
  font-size: 1.0625rem;
  line-height: 1.62;
  margin: 0;
}
.kr-review__buys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1rem;
  margin-top: 1.2rem;
}
.kr-review__lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  border-top: var(--kr-rule);
  padding-top: 1.2rem;
}
.kr-review__listhead {
  font-family: var(--kr-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
  color: var(--kr-ink);
}
.kr-review__lists ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.kr-review__lists li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.kr-review__lists li > span {
  font-family: var(--kr-mono);
  font-weight: 700;
  flex: 0 0 auto;
  color: var(--kr-ink);
}
.kr-review__sign {
  font-family: var(--kr-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kr-grafit);
  border-top: var(--kr-rule);
  padding-top: 0.9rem;
  margin: 0;
}

/* == Deal band — the ONE loud chrome moment ========================== */
.kr-band--rea {
  background: var(--kr-rea);
  color: var(--kr-paper);
  padding-top: calc(var(--kr-section-y) * 0.6);
  padding-bottom: calc(var(--kr-section-y) * 0.6);
}
.kr-band--rea ::selection {
  background: var(--kr-paper);
  color: var(--kr-rea);
}
.kr-rea__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.6rem 1.5rem;
  border-top: 3px solid var(--kr-paper);
  padding-top: 0.85rem;
  margin-bottom: 1.6rem;
}
.kr-rea__eyebrow {
  grid-column: 1 / -1;
  font-family: var(--kr-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kr-paper);
  margin: 0;
}
.kr-rea__title {
  font-family: var(--kr-display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--kr-paper);
  margin: 0;
  text-wrap: balance;
}
.kr-rea__more {
  font-family: var(--kr-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kr-paper);
  text-decoration: none;
  justify-self: end;
  white-space: nowrap;
}
.kr-rea__more:hover {
  color: var(--kr-paper);
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.kr-rea__lede {
  font-size: 1.0313rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--kr-paper);
  margin: -0.6rem 0 1.4rem;
  max-width: 42rem;
}
.kr-rea__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
}
.kr-deal {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 1.1rem 1.4rem 1.1rem 0;
  border-top: 2px dotted color-mix(in srgb, var(--kr-paper) 55%, transparent);
}
.kr-deal__name {
  font-family: var(--kr-display);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: break-word;
}
.kr-deal__name a {
  color: var(--kr-paper);
  text-decoration: none;
}
.kr-deal__name a:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}
.kr-deal__spec {
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.45;
  margin: 0;
  color: color-mix(in srgb, var(--kr-paper) 94%, var(--kr-rea));
}
.kr-deal__prices {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--kr-mono);
  font-variant-numeric: tabular-nums;
  margin-top: 0.15rem;
}
.kr-deal__was {
  font-size: 0.8125rem;
  text-decoration: line-through;
  color: color-mix(in srgb, var(--kr-paper) 86%, var(--kr-rea));
}
.kr-deal__now {
  font-weight: 700;
  font-size: 1.0625rem;
}
.kr-deal__save {
  font-family: var(--kr-mono);
  font-size: 0.6563rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kr-rea);
  background: var(--kr-paper);
  border-radius: var(--kr-r-sm);
  padding: 0.3em 0.6em 0.24em;
  white-space: nowrap;
}
.kr-band--rea :where(a, button, input):focus-visible {
  outline-color: var(--kr-paper);
}

/* == Link list (arrow bullets, mono) ================================= */
.kr-links {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: clamp(2rem, 4vw, 4rem);
}
.kr-links--single {
  columns: 1;
}
.kr-links li {
  break-inside: avoid;
  border-bottom: var(--kr-rule);
}
.kr-links a {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.85rem 0.2rem 0.85rem 0;
  font-family: var(--kr-mono);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--kr-ink);
  text-decoration: none;
  transition: color 140ms ease;
}
.kr-links a::before {
  content: "➔";
  flex: 0 0 auto;
  font-weight: 400;
}
.kr-links a:hover {
  color: var(--kr-pencil);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.kr-links a:hover::before {
  transform: translateX(3px);
}
.kr-links .kr-links__meta {
  margin-left: auto;
  font-weight: 400;
  color: var(--kr-grafit);
  white-space: nowrap;
}

/* == Statement (om oss) ============================================== */
.kr-statement {
  border-top: 3px solid var(--kr-ink);
  border-bottom: var(--kr-rule-strong);
  padding: clamp(2rem, 4vw, 3.4rem) 0;
  display: grid;
  gap: 1.3rem;
}
.kr-statement__text {
  font-family: var(--kr-display);
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.875rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.004em;
  margin: 0;
  max-width: 56rem;
  text-wrap: balance;
}
.kr-statement__cite {
  font-family: var(--kr-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--kr-grafit);
}

/* == Newsletter ====================================================== */
.kr-news {
  border: var(--kr-rule-strong);
  border-radius: var(--kr-r-lg);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: grid;
  gap: 1.1rem;
  background: var(--kr-paper);
}
.kr-news__title {
  font-family: var(--kr-display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.35rem;
  text-wrap: balance;
}
.kr-news__lede {
  font-size: 1.0313rem;
  font-style: italic;
  color: var(--kr-grafit);
  margin: 0;
  max-width: 36rem;
}
.kr-news__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  position: relative;
}
.kr-news__form input[type="email"] {
  flex: 1 1 16rem;
  font-family: var(--kr-mono);
  font-size: 0.9375rem;
  color: var(--kr-ink);
  background: var(--kr-paper);
  border: 1px solid var(--kr-ink);
  border-radius: var(--kr-r-sm);
  padding: 0.75em 1em;
  transition: box-shadow 140ms ease;
}
.kr-news__form input[type="email"]::placeholder {
  color: var(--kr-grafit);
  opacity: 1;
}
.kr-news__form input[type="email"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--kr-ink);
}
.kr-news__form button {
  font-family: var(--kr-mono);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kr-paper);
  background: var(--kr-ink);
  border: 0;
  border-radius: var(--kr-r-sm);
  padding: 0.85em 1.5em;
  cursor: pointer;
  transition: background-color 140ms ease;
}
.kr-news__form button:hover {
  background: var(--kr-pencil);
}
.kr-news__form button:active {
  transform: scale(0.98);
}
.kr-news__status {
  font-family: var(--kr-mono);
  font-size: 0.8125rem;
  color: var(--kr-ink);
}
.kr-news__note {
  font-family: var(--kr-mono);
  font-size: 0.75rem;
  color: var(--kr-grafit);
  margin: 0;
}

/* == Post cards (query grid) ========================================= */
.kr-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: clamp(1.4rem, 2.4vw, 2.4rem);
}
.kr-card {
  display: block;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.kr-card__img {
  margin-bottom: 0.9rem;
}
.kr-card__img img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.kr-card__cat {
  color: var(--kr-grafit);
  margin-bottom: 0.4rem;
}
.kr-card__cat a {
  color: inherit;
  text-decoration: none;
}
.kr-card__cat a:hover {
  color: var(--kr-ink);
}
.kr-card__title {
  font-family: var(--kr-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.16;
  margin: 0 0 0.45rem;
  overflow-wrap: break-word;
  transition: color 150ms ease;
}
.kr-card__title a {
  text-decoration: none;
  color: inherit;
}
.kr-card__title a:hover {
  color: var(--kr-pencil);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
}
.kr-card__dek {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--kr-grafit);
  margin: 0 0 0.5rem;
}
.kr-card__date {
  font-family: var(--kr-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kr-grafit);
  margin: 0;
}

/* == Prose, article, archive ========================================= */
.kr-main {
  padding-top: calc(var(--kr-section-y) * 0.55);
  padding-bottom: var(--kr-section-y);
}
.kr-main--wide {
  padding-top: 0;
  padding-bottom: 0;
}
.kr-page-head {
  margin-bottom: 2rem;
  border-bottom: var(--kr-rule-strong);
  padding-bottom: 1.4rem;
}
.kr-article__meta {
  margin-bottom: 0.9rem;
}
.kr-article__meta .kr-eyebrow,
.kr-article__meta .kr-eyebrow a {
  color: var(--kr-grafit);
  text-decoration: none;
}
.kr-article__meta .kr-eyebrow a:hover {
  color: var(--kr-ink);
}
.kr-article__title {
  margin-bottom: 0.8rem;
  text-wrap: balance;
}
.kr-article__dek p {
  font-size: var(--wp--preset--font-size--md);
  font-style: italic;
  line-height: 1.5;
  color: var(--kr-grafit);
  margin: 0 0 1.1rem;
}
.kr-article__byline {
  font-family: var(--kr-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kr-grafit);
  gap: 1.1rem;
  border-bottom: var(--kr-rule-strong);
  padding-bottom: 1rem;
  margin-bottom: 1.8rem;
}
.kr-article__author {
  font-weight: 700;
  color: var(--kr-ink);
}
.kr-article__hero {
  margin-bottom: 2rem;
}
.kr-article__body > * {
  margin-block-start: 1.25em;
}
.kr-article__body h2 {
  margin-block-start: 1.9em;
  border-top: var(--kr-rule);
  padding-top: 1em;
}
.kr-article__footer {
  border-top: var(--kr-rule-strong);
  margin-top: 3rem;
  padding-top: 1.3rem;
}
.kr-article__nav a {
  font-family: var(--kr-mono);
  font-size: 0.8125rem;
  text-decoration: none;
}
.kr-article__nav a:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

.kr-hub-head {
  margin-bottom: 2.2rem;
  border-bottom: var(--kr-rule-strong);
  padding-bottom: 1.2rem;
}
.kr-hub-head__title {
  font-family: var(--kr-display);
  font-size: var(--wp--preset--font-size--2-xl);
  margin: 0;
}
.kr-pagination {
  font-family: var(--kr-mono);
  font-size: 0.875rem;
  margin-top: 3rem;
  border-top: var(--kr-rule);
  padding-top: 1.2rem;
}

/* == Footer — the ink block bookend ================================== */
.kr-footer {
  background: var(--kr-ink);
  color: var(--kr-paper);
  border-top: 4px solid var(--kr-ink);
  padding-top: calc(var(--kr-section-y) * 0.65);
  padding-bottom: 2rem;
  margin-top: var(--kr-section-y);
}
.kr-main--wide + .kr-footer,
.kr-band--news + .kr-footer,
.kr-band--rea + .kr-footer {
  margin-top: 0;
}
.kr-footer ::selection {
  background: var(--kr-paper);
  color: var(--kr-ink);
}
.kr-footer__wordmark {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--kr-paper);
}
.kr-footer__wordmark::after {
  content: ".";
  color: var(--kr-rea);
}
.kr-footer__tagline {
  color: color-mix(in srgb, var(--kr-paper) 72%, var(--kr-ink));
  font-style: italic;
  margin-top: 0.3rem;
}
.kr-footer__note {
  font-family: var(--kr-mono);
  line-height: 1.65;
  color: color-mix(in srgb, var(--kr-paper) 72%, var(--kr-ink));
  margin-top: 1.1rem;
  max-width: 27rem;
}
.kr-footer__head {
  font-family: var(--kr-mono);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--kr-paper) 60%, var(--kr-ink));
  margin: 0 0 0.7rem;
}
.kr-footer__links {
  margin: 0;
}
.kr-footer__links .wp-block-navigation__container {
  align-items: flex-start;
  gap: 0.55rem;
}
.kr-footer__links .wp-block-navigation-item {
  margin: 0;
}
.kr-footer__links a {
  font-family: var(--kr-mono);
  color: var(--kr-paper);
  text-decoration: none;
}
.kr-footer__links a:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.kr-footer__base {
  border-top: 2px dotted color-mix(in srgb, var(--kr-paper) 35%, transparent);
  margin-top: 2.4rem;
  padding-top: 1.2rem;
}
.kr-footer__copy {
  font-family: var(--kr-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--kr-paper) 62%, var(--kr-ink));
  margin: 0;
}
.kr-footer :where(a):focus-visible {
  outline-color: var(--kr-paper);
}

/* == Motion — small and mechanical, like a carriage return =========== */
@media (prefers-reduced-motion: no-preference) {
  .kr-arrow,
  .kr-links a::before {
    transition: transform 160ms var(--kr-ease);
  }
  .kr-btn {
    transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 120ms var(--kr-ease);
  }
  .kr-plate img {
    transition: transform 320ms var(--kr-ease);
  }
  .kr-news__form button {
    transition: background-color 140ms ease, transform 120ms var(--kr-ease);
  }
  @supports (animation-timeline: view()) {
    .kr-roundup__row,
    .kr-card,
    .kr-stack-card,
    .kr-deal,
    .kr-review,
    .kr-news,
    .kr-statement {
      animation: kr-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
  }
}
@keyframes kr-settle {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* == Responsive ====================================================== */
@media (max-width: 1080px) {
  .kr-front {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .kr-rail {
    grid-column: 1 / -1;
  }
  .kr-rail__list {
    columns: 2;
    column-gap: 3rem;
  }
  .kr-rail__item {
    break-inside: avoid;
  }
  .kr-rail__item + .kr-rail__item {
    border-top: 0;
  }
  .kr-rail__item {
    border-bottom: var(--kr-rule);
  }
}
@media (max-width: 920px) {
  .kr-utility-links {
    display: none;
  }
  .kr-masthead__nav {
    gap: 1rem;
  }
  .kr-nav a {
    font-size: 0.6875rem;
  }
  .kr-nav .wp-block-navigation__container {
    gap: 0.9rem;
  }
}
@media (max-width: 760px) {
  .kr-front {
    grid-template-columns: 1fr;
  }
  .kr-rail__list {
    columns: 1;
  }
  .kr-review__cols {
    grid-template-columns: 1fr;
  }
  .kr-review__lists {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
  .kr-links {
    columns: 1;
  }
  .kr-roundup__row {
    grid-template-columns: 2.2rem minmax(0, 1fr);
  }
  .kr-roundup__media {
    grid-column: 2;
    max-width: 13rem;
  }
  .kr-roundup__body {
    grid-column: 2;
  }
}
@media (max-width: 640px) {
  .kr-masthead__utility {
    display: none;
  }
  .kr-masthead__cta {
    display: none;
  }
}

/* Commercial metadata: retailer, stock and the date a price was checked.
   Required by brand/strategy.md — a price without a check date is a claim we can't stand behind. */
.kr-shopmeta{
	margin:.35rem 0 .5rem;
	font-family:var(--wp--preset--font-family--mono, monospace);
	font-size:var(--wp--preset--font-size--2-xs, .72rem);
	letter-spacing:.02em;
	color:var(--wp--preset--color--muted, #6b6b6b);
}
.kr-shopmeta__merchant{ font-weight:600; color:var(--wp--preset--color--contrast, inherit); }

/* ---------------------------------------------------------------------------
   Mobile navigation. The kronika blueprint styles the nav for desktop and lets
   the overlay inherit those sizes, which produced 11px links in 18px rows and
   24px icon buttons — far below the 44px minimum tap target. Phone-first fixes.
   --------------------------------------------------------------------------- */

/* Open and close icons: real tap targets, centred glyph. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{
	min-inline-size:44px;
	min-block-size:44px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
.wp-block-navigation__responsive-container-close{
	inset-block-start:.5rem;
	inset-inline-end:.5rem;
}

/* The masthead carries a backdrop-filter, and any element with one becomes the
   containing block for its position:fixed descendants. The nav overlay is fixed with
   inset:0, so it was sizing itself against a 142px header instead of the viewport —
   the menu opened as a strip showing one item with the page visible underneath.
   Dropping the effect while the menu is open hands the viewport back.

   This is why the earlier pass at this menu did not work: tap targets and type sizes
   were corrected inside a container that was the wrong size to begin with. */
.has-modal-open .kr-masthead,
.kr-masthead:has(.wp-block-navigation__responsive-container.is-menu-open){
	-webkit-backdrop-filter:none;
	backdrop-filter:none;
}

@media (max-width: 781px){
	/* The overlay itself: full-bleed, generous, readable.

	   The selector repeats core's `.wp-block-navigation:not(.has-background)` prefix on
	   purpose. Core sets background-color:#fff at specificity 0-3-0; a plain
	   `.container.is-menu-open` is 0-2-0 and loses, which is why the menu opened stark
	   white on a cream site. */
	.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation__responsive-container.is-menu-open{
		background-color:var(--kr-paper);
		padding-block:max(5rem, calc(3.5rem + env(safe-area-inset-top))) 2rem;
		padding-inline:1.5rem;
	}
	/* The close button sits above the notch on a phone without this. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
		inset-block-start:max(.5rem, env(safe-area-inset-top));
		inset-inline-end:max(.75rem, env(safe-area-inset-right));
	}
	/* A long menu must scroll rather than clip. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
		overflow-y:auto;
		max-block-size:100%;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
		inline-size:100%;
	}
	/* Stack the items and give each a full-width, finger-sized row. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
		gap:0;
		inline-size:100%;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
		inline-size:100%;
		border-block-end:var(--kr-rule);
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child{
		border-block-end:0;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
		display:flex;
		align-items:center;
		inline-size:100%;
		min-block-size:56px;
		padding-block:.35rem;
		font-family:var(--kr-display);
		font-size:1.35rem;
		letter-spacing:0;
		text-transform:none;
		line-height:1.2;
	}
	/* Stop the page scrolling behind the open overlay. */
	.has-modal-open,
	.has-modal-open body{
		overflow:hidden;
		touch-action:none;
	}
}

/* == Tables ==========================================================
   Tables only started rendering once the compiler learned to emit them, so
   they arrived wearing core's default full grid — every cell boxed. That
   fights a design whose whole premise is horizontal rules and air, so they
   get the same treatment as the rest of the machinery: mono small caps for
   the head, hairline rules between rows, and nothing vertical at all.
   Core already wraps the table in a figure with overflow-x:auto, so a wide
   table scrolls inside its own box and never pushes the page sideways. */
.wp-block-table{
	margin-block:2rem;
}
.wp-block-table table{
	border-collapse:collapse;
	inline-size:100%;
	font-size:0.9375rem;
	line-height:1.55;
}
.wp-block-table :is(th,td){
	border:0;
	border-block-end:var(--kr-rule);
	padding:0.85rem 1.1rem 0.85rem 0;
	text-align:start;
	vertical-align:top;
}
.wp-block-table :is(th,td):last-child{
	padding-inline-end:0;
}
.wp-block-table th{
	font-family:var(--kr-mono);
	font-size:0.6875rem;
	font-weight:700;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--kr-ink);
	border-block-end:var(--kr-rule-strong);
	white-space:nowrap;
}
/* The first column is the row's subject — it carries the scan. */
.wp-block-table tbody td:first-child{
	color:var(--kr-ink);
	font-weight:600;
}
.wp-block-table tbody tr:last-child :is(th,td){
	border-block-end:0;
}
/* A head row that is entirely empty is a layout table, not a data table —
   several pages use one for a two-column facts list. Hide the empty head
   rather than leaving a bare rule floating above the first row. */
.wp-block-table thead:has(th:empty:only-child),
.wp-block-table thead:has(th:empty + th:empty){
	display:none;
}

/* == Product shots in roundups ========================================
   Merchant feeds ship cut-outs on pure white, and this site's paper is cream
   (#FAF6EC), so each one landed as a visible white rectangle. Multiplying the
   image against the page turns white into the paper colour and leaves the
   product — no per-image editing, and it keeps working when the palette knob
   changes or a merchant swaps its photography.

   Only safe because these are flat studio cut-outs; a photo with real shadows
   would go muddy. Hero images are deliberately untouched. */
.kr-roundup__media img{
	mix-blend-mode:multiply;
}
/* Blending needs a painted backdrop to multiply against; without this the
   image blends with whatever happens to be behind the band. */
.kr-band--roundup{
	isolation:isolate;
}