:root {
  --bg: #e5e1d8; --surface: #dad5ca; --ink: #2a1d17; --muted: #5f5047; --accent: #456f3a;
  --margin: clamp(1rem, 2.2vw, 1.5rem);
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-display: clamp(3.5rem, 1rem + 9vw, 10rem);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.45 "Schibsted Grotesk", system-ui, sans-serif; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
h1, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; background: var(--surface); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { padding-inline: var(--margin); }
.top { padding-top: 1.5rem; }
.mark { font-size: var(--step-small); font-weight: 600; text-decoration: none; }
.title { margin-top: clamp(6rem, 18vh, 12rem); font-size: var(--step-display); font-weight: 800; letter-spacing: -0.05em; line-height: 0.88; max-width: 12ch; text-wrap: balance; }
.intro { margin-top: 2rem; font-size: var(--step-lead); line-height: 1.3; max-width: 34ch; }
.products { margin-top: clamp(5rem, 14vw, 10rem); }
.product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1rem, 2vw, 2rem); align-items: end; text-decoration: none; padding-block: 1.5rem; transition: background-color 180ms ease; }
.product img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1); mix-blend-mode: multiply; }
.product-text { display: grid; gap: 0.8rem; align-content: end; }
.product-name { font-size: var(--step-lead); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.product-sum { max-width: 46ch; }
.product-meta { color: var(--muted); font-size: var(--step-small); }
.product-cta { font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
.product:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .product:hover .product-name, .product:hover .product-cta { color: var(--accent); } }
.foot { margin-top: clamp(6rem, 16vw, 12rem); padding-bottom: 2rem; font-size: var(--step-small); color: var(--muted); }
@media (max-width: 47.99em) {
  .product { grid-template-columns: 1fr; }
}