/* tasteskill / base.css (design-taste-frontend v2, MIT), set to the dealt direction: The well-kept board,
   Schibsted Grotesk, greys and mint. Reset, tokens, type steps, states and the motion helpers. */

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/schibsted-grotesk-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); } /* taste-skill-ignore: code only */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); } /* taste-skill-ignore: code only */

/* ---------- tokens ---------- */
:root {
  color-scheme: light dark;
  --bg: light-dark(#e2e2e2, #141414);
  --surface: light-dark(#eeeeee, #242424);
  --surface-2: light-dark(#f7f7f7, #313131);
  --ink: light-dark(#1c1c1c, #ececec);
  --muted: light-dark(#575757, #a3a3a3);
  --accent: #a1ffcb;
  --accent-ink: light-dark(#232323, #141414);
  --field: light-dark(#1c1c1c, #ececec);
  --field-ink: light-dark(#ffffff, #141414);
  --night: light-dark(#fbfbfb, #0e0e0e);
  --night-ink: light-dark(#1a1a1a, #f2f2f2);
  --night-muted: light-dark(#5c5c5c, #a6a6a6);
  --focus: light-dark(#232323, #a1ffcb);

  --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-code: "IBM Plex Mono", ui-monospace, Menlo, monospace; /* taste-skill-ignore: pre, code, kbd, samp only */

  --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.375rem, 1.05rem + 0.9vw, 2rem);
  --step-head: clamp(2.25rem, 1.2rem + 3vw, 3.75rem);
  --step-display: clamp(6rem, 11vw, 10rem);

  --margin: 16px;
  --gap: 8px;
  --pad: clamp(1.25rem, 1rem + 0.4vw, 1.5rem);
  --radius: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (max-width: 599px) { :root { --gap: 6px; } }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.5; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
:where(ul[class], ol[class]) { padding: 0; list-style: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; background: var(--surface-2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
code, kbd, samp, pre { font-family: var(--font-code); font-size: 1em; }
:target { scroll-margin-top: 1.5rem; }
::selection { background: var(--accent); color: #232323; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; text-wrap: balance; hyphens: none; }
.head { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.04em; }
.lead { font-size: var(--step-lead); line-height: 1.22; letter-spacing: -0.02em; }
.small { font-size: var(--step-small); line-height: 1.45; }
.muted { color: var(--muted); }
p { max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }
.nums { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 3.25rem; padding: 0 1.4rem; background: var(--field); color: var(--field-ink); border-radius: var(--radius); font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
.link-plain { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: currentColor; }
}

/* ---------- motion helpers (content stays visible without JavaScript) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal].is-in:nth-child(2) { transition-delay: 70ms; }
  .js [data-reveal].is-in:nth-child(3) { transition-delay: 140ms; }
  .js [data-reveal].is-in:nth-child(4) { transition-delay: 210ms; }
  .js [data-reveal].is-in:nth-child(n+5) { transition-delay: 280ms; }
}