/*
 * ODYSSEY — foundation.css
 * System projektowy. Self-contained.
 * Kaskada: @layer reset, tokens, base, layout, components, utilities, themes
 *
 * Kroje (Google Fonts — licencja OFL):
 *   Display : Fraunces (variable, opsz, ital) — serif redakcyjny, wysoki kontrast kresek, "pismo"
 *   Body    : DM Sans  (variable, opsz)       — grotesk, duża x-height, spokojny rytm do czytania
 *   Label   : DM Mono  (regular 400, 500)     — mono, didaskalia, sygnatura redakcji
 *
 * Paleta OKLCH — prymitywy tylko w warstwie tokens, nigdy w komponentach.
 * Akcent: data-accent="cynober" (domyślny) | "bursztyn"
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..900;1,9..40,100..900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&display=swap');

/* ─────────────────────────────────────────────
   LAYER DECLARATION (kolejność = priorytet)
   ───────────────────────────────────────────── */
@layer reset, tokens, base, layout, components, utilities, themes;

/* ─────────────────────────────────────────────
   LAYER: reset
   ───────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    hanging-punctuation: first last;
  }

  img, video, svg, canvas {
    display: block;
    max-inline-size: 100%;
  }

  input, button, textarea, select {
    font: inherit;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ─────────────────────────────────────────────
   LAYER: tokens
   (Prymitywy + semantyczne + komponentowe)
   ───────────────────────────────────────────── */
@layer tokens {

  /* ── Prymitywy OKLCH ── */
  :root {
    /* Papier: ciepły off-white — NIE czyste #fff */
    --prim-paper-100: oklch(0.98 0.005 70);
    --prim-paper-200: oklch(0.96 0.008 70);   /* canvas bazowy */
    --prim-paper-300: oklch(0.92 0.010 68);   /* lekkie przyciemnienie */
    --prim-paper-400: oklch(0.87 0.012 65);   /* separator, obramowanie */

    /* Atrament: ciemny grafit — NIE czyste #000 */
    --prim-ink-900:   oklch(0.20 0.012 60);   /* atrament bazowy */
    --prim-ink-800:   oklch(0.26 0.012 58);   /* lekko jaśniejszy */
    --prim-ink-700:   oklch(0.34 0.010 56);   /* muted strong */
    --prim-ink-500:   oklch(0.50 0.008 55);   /* mid-tone */
    --prim-ink-300:   oklch(0.68 0.006 54);   /* muted, didaskalia jasne */
    --prim-ink-200:   oklch(0.80 0.005 52);   /* bardzo muted */

    /* Akcent: cynober (ciepła drukarska czerwień) */
    --prim-cynober-600: oklch(0.58 0.16 35);  /* bazowy */
    --prim-cynober-700: oklch(0.50 0.18 33);  /* mocniejszy */
    --prim-cynober-400: oklch(0.68 0.13 37);  /* jaśniejszy */

    /* Akcent: bursztyn (ciepłe złoto) */
    --prim-amber-500: oklch(0.70 0.13 65);    /* bazowy */
    --prim-amber-600: oklch(0.62 0.15 62);    /* mocniejszy */
    --prim-amber-400: oklch(0.80 0.11 68);    /* jaśniejszy */

    /* Space scale (fluid — clamp) */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;
    --space-32:  8rem;
    --space-48: 12rem;
    --space-64: 16rem;
  }

  /* ── Tokeny semantyczne (domyślne — light, akcent cynober) ── */
  :root,
  [data-accent="cynober"] {
    /* Surfaces */
    --surface-page:          var(--prim-paper-200);
    --surface-page-subtle:   var(--prim-paper-100);
    --surface-raised:        var(--prim-paper-300);
    --surface-border:        var(--prim-paper-400);

    /* Text */
    --text-primary:          var(--prim-ink-900);
    --text-secondary:        var(--prim-ink-700);
    --text-muted:            var(--prim-ink-500);
    --text-faint:            var(--prim-ink-300);
    --text-on-dark:          var(--prim-paper-100);
    --text-on-dark-muted:    var(--prim-ink-200);

    /* Akcent (cynober) */
    --color-accent:          var(--prim-cynober-600);
    --color-accent-hover:    color-mix(in oklch, var(--prim-cynober-600) 80%, var(--prim-ink-900));
    --color-accent-subtle:   color-mix(in oklch, var(--prim-cynober-600) 12%, var(--prim-paper-200));
    --color-accent-text:     var(--prim-cynober-700);

    /* Inwersja (sekcja ciemna — atrament-tło) */
    --surface-inverted:      var(--prim-ink-900);
    --surface-inverted-mid:  var(--prim-ink-800);

    /* Noise texture intensity */
    --texture-noise-opacity: 0.028;

    /* Shadows — organiczne, ciepłe */
    --shadow-editorial: 0 1px 0 var(--surface-border);
    --shadow-card:
      0 2px 0 color-mix(in oklch, var(--prim-ink-900) 6%, transparent),
      0 8px 24px color-mix(in oklch, var(--prim-ink-900) 4%, transparent);
    --shadow-card-hover:
      0 2px 0 color-mix(in oklch, var(--prim-ink-900) 10%, transparent),
      0 12px 36px color-mix(in oklch, var(--prim-ink-900) 8%, transparent);
  }

  /* ── Akcent: bursztyn (przełączany) ── */
  [data-accent="bursztyn"] {
    --color-accent:          var(--prim-amber-500);
    --color-accent-hover:    color-mix(in oklch, var(--prim-amber-500) 80%, var(--prim-ink-900));
    --color-accent-subtle:   color-mix(in oklch, var(--prim-amber-500) 12%, var(--prim-paper-200));
    --color-accent-text:     var(--prim-amber-600);

    /* Komponentowe — dziedziczone przez elementy wewnątrz kontenera [data-accent] */
    --button-primary-bg:        var(--color-accent);
    --button-primary-bg-hover:  var(--color-accent-hover);
    --label-color:              var(--text-muted);
  }

  /* ── Sekcja ciemna (inwersja walorów — W27) ── */
  [data-theme="dark"] {
    --surface-page:          var(--prim-ink-900);
    --surface-page-subtle:   var(--prim-ink-800);
    --surface-raised:        var(--prim-ink-700);
    --surface-border:        color-mix(in oklch, var(--prim-ink-900) 60%, var(--prim-paper-200));
    --text-primary:          var(--prim-paper-100);
    --text-secondary:        var(--prim-ink-200);
    --text-muted:            var(--prim-ink-300);
    --text-faint:            var(--prim-ink-500);
    --shadow-editorial:      0 1px 0 color-mix(in oklch, var(--prim-paper-200) 12%, transparent);
    --texture-noise-opacity: 0.04;
  }

  /* ── Tokeny typograficzne ── */
  :root {
    /* Rodziny */
    --font-display:  'Fraunces', Georgia, serif;
    --font-body:     'DM Sans', system-ui, sans-serif;
    --font-mono:     'DM Mono', 'Courier New', monospace;

    /* Skala — kontrast bez drabinki środka (W3) */
    --text-hero:    clamp(2.5rem, 7vw, 6.5rem);
    --text-display: clamp(2rem,   5vw, 4.5rem);
    --text-heading: clamp(1.4rem, 3vw, 2.2rem);
    --text-lead:    clamp(1.1rem, 1.5vw, 1.3rem);
    --text-body:    1rem;
    --text-small:   0.875rem;
    --text-mono:    0.8rem;
    --text-label:   0.72rem;  /* uppercase mono didaskalia */

    /* Line-height */
    --leading-display: 1.02;   /* zbita masa — W4 */
    --leading-tight:   1.18;
    --leading-body:    1.62;
    --leading-relaxed: 1.75;

    /* Letter-spacing */
    --tracking-display: -0.03em;    /* lekko ujemny — zbita masa */
    --tracking-tight:   -0.015em;
    --tracking-body:     0;
    --tracking-label:    0.12em;    /* uppercase mono */
    --tracking-wide:     0.06em;
  }

  /* ── Tokeny ruchu ── */
  :root {
    --duration-fast:       150ms;
    --duration-base:       280ms;
    --duration-reveal:     600ms;
    --duration-cinematic:  900ms;
    --duration-ambient:   3000ms;

    --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:     cubic-bezier(0.45, 0, 0.55, 1);
    --ease-spring:     cubic-bezier(0.34, 1.4, 0.64, 1);
    --ease-linear:     linear;
  }

  /* ── Z-index (normal flow — nakładki idą w top layer) ── */
  :root {
    --z-below:    -1;
    --z-noise:    10;
    --z-content:  20;
    --z-sticky:   30;
    --z-nav:      50;
  }

  /* ── Tokeny layoutu ── */
  :root {
    --col-max:        1280px;
    --col-text:       680px;     /* max szerokość kolumny tekstu */
    --col-padding:    clamp(1.25rem, 5vw, 4rem);

    --section-pad-v:  clamp(4rem, 10vw, 9rem);   /* pionowy oddech sekcji */
    --section-pad-s:  clamp(2.5rem, 6vw, 5rem);  /* sparse sekcji */
  }

  /* ── Tokeny komponentowe ── */
  :root {
    --button-primary-bg:        var(--color-accent);
    --button-primary-color:     var(--prim-paper-100);
    --button-primary-bg-hover:  var(--color-accent-hover);
    --button-border-radius:     2px;
    --button-padding:           0.6em 1.4em;
    --button-font:              var(--font-mono);
    --button-font-size:         var(--text-label);
    --button-tracking:          var(--tracking-label);

    --label-color:              var(--text-muted);
    --label-font:               var(--font-mono);
    --label-size:               var(--text-label);
    --label-tracking:           var(--tracking-label);

    --nav-height:               clamp(3rem, 5vw, 3.75rem);
    --nav-bg:                   var(--surface-page);
    --nav-border:               var(--shadow-editorial);

    --card-bg:                  var(--surface-raised);
    --card-radius:              3px;
    --card-shadow:              var(--shadow-card);
    --card-shadow-hover:        var(--shadow-card-hover);
  }
}

/* ─────────────────────────────────────────────
   LAYER: base
   ───────────────────────────────────────────── */
@layer base {
  html {
    background-color: var(--surface-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-optical-sizing: auto;
    line-height: var(--leading-body);
    letter-spacing: var(--tracking-body);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
  }

  body {
    min-block-size: 100dvh;
    position: relative;
  }

  /* Tekstura papieru — CSS noise (subtelny grain, NIE bitmapa) */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-noise);
    opacity: var(--texture-noise-opacity);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
  }

  /* Typografia bazowa */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-hero);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    font-weight: 700;
    font-style: italic;  /* Fraunces jest wyjątkowy w italic — redakcyjność */
  }

  h2 {
    font-size: var(--text-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    font-weight: 600;
  }

  h3 {
    font-size: var(--text-heading);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: 500;
  }

  p {
    max-inline-size: var(--col-text);
    color: var(--text-secondary);
    margin-block-end: var(--space-4);
  }

  p:last-child { margin-block-end: 0; }

  strong { font-weight: 600; color: var(--text-primary); }
  em     { font-style: italic; }

  a {
    color: inherit;
    text-decoration-color: color-mix(in oklch, currentColor 30%, transparent);
    text-underline-offset: 0.2em;
    transition:
      text-decoration-color var(--duration-fast) var(--ease-out-expo),
      color var(--duration-fast) var(--ease-out-expo);
  }

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

  /* Mono / label bazowe */
  code, kbd, samp, var {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
  }

  hr {
    border: none;
    border-block-start: 1px solid var(--surface-border);
    margin-block: var(--space-8);
  }
}

/* ─────────────────────────────────────────────
   LAYER: layout
   ───────────────────────────────────────────── */
@layer layout {
  /* Kontener główny */
  .l-container {
    inline-size: min(100%, var(--col-max));
    margin-inline: auto;
    padding-inline: var(--col-padding);
  }

  /* Sekcja */
  .l-section {
    padding-block: var(--section-pad-v);
  }

  .l-section--sparse {
    padding-block: var(--section-pad-s);
  }

  /* Grid redakcyjny */
  .l-editorial-grid {
    display: grid;
    grid-template-columns:
      [full-start] var(--col-padding)
      [content-start] 1fr
      [content-end] var(--col-padding)
      [full-end];
  }

  .l-editorial-grid > * {
    grid-column: content;
  }

  /* Układ hero: teza left, metadane right */
  .l-hero-split {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--space-8);
  }

  @media (max-width: 640px) {
    .l-hero-split {
      grid-template-columns: 1fr;
    }
  }

  /* Stack pionowy */
  .l-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .l-stack--tight  { gap: var(--space-3); }
  .l-stack--loose  { gap: var(--space-12); }

  /* Cluster (inline-flex wrap) */
  .l-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
  }

  /* Dwie kolumny (dla kogo / nie) */
  .l-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-8), 4vw, var(--space-16));
  }

  @media (max-width: 640px) {
    .l-two-col {
      grid-template-columns: 1fr;
      gap: var(--space-8);
    }
  }

  /* Kafelki realizacji (2 kafle) */
  .l-work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(var(--space-4), 3vw, var(--space-8));
  }

  @media (max-width: 768px) {
    .l-work-grid {
      grid-template-columns: 1fr;
    }
  }
}

/* ─────────────────────────────────────────────
   LAYER: components
   ───────────────────────────────────────────── */
@layer components {

  /* Label / didaskalia mono */
  .c-label {
    font-family: var(--label-font);
    font-size: var(--label-size);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: var(--label-color);
    line-height: 1.4;
  }

  .c-label--accent {
    color: var(--color-accent-text);
  }

  /* Sygnatura redakcyjna — (NN / NAZWA) */
  .c-signature {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-faint);
    line-height: 1.4;
  }

  /* Żywy stempel czasu — memorable element */
  .c-timestamp {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent-text);
    line-height: 1.4;
    /* Tykanie przez JS — tu tylko styl */
  }

  /* CTA — jedyny przycisk akcji */
  /* background-color BEZPOŚREDNIO z --color-accent (dziedziczony lokalnie z [data-accent] na rodzicu) */
  .c-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--button-font);
    font-size: var(--button-font-size);
    font-weight: 500;
    letter-spacing: var(--button-tracking);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--prim-paper-100);
    background-color: var(--color-accent);
    padding: var(--button-padding);
    border-radius: var(--button-border-radius);
    border: none;
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-out-expo),
      transform var(--duration-fast) var(--ease-out-expo);
  }

  .c-cta:hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-1px);
    color: var(--prim-paper-100);
    text-decoration: none;
  }

  .c-cta:active {
    transform: translateY(0);
    transition-duration: var(--duration-fast);
  }

  /* Link redakcyjny (inline — nie button) */
  .c-link-editorial {
    text-decoration: none;
    border-block-end: 1px solid var(--surface-border);
    padding-block-end: 1px;
    transition:
      border-color var(--duration-fast) var(--ease-out-expo),
      color var(--duration-fast) var(--ease-out-expo);
  }

  .c-link-editorial:hover {
    border-color: var(--color-accent);
    color: var(--text-primary);
  }

  /* Kafel realizacji (c-work-card) */
  .c-work-card {
    position: relative;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition:
      box-shadow var(--duration-base) var(--ease-out-expo),
      transform var(--duration-base) var(--ease-out-expo);
    text-decoration: none;
    display: block;

    /* Clip-reveal — W21 jeden gest (wejście w viewport) */
    clip-path: inset(0 0 0 0);
  }

  .c-work-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-3px);
  }

  /* Wejście karty (JS dodaje .is-revealed) */
  .c-work-card.will-reveal {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
    clip-path: inset(4% 0 0 0);
    transition:
      opacity     var(--duration-reveal) var(--ease-out-expo),
      transform   var(--duration-reveal) var(--ease-out-expo),
      clip-path   var(--duration-reveal) var(--ease-out-expo);
  }

  .c-work-card.will-reveal.is-revealed {
    opacity: 1;
    transform: scale(1) translateY(0);
    clip-path: inset(0 0 0 0);
  }

  @media (prefers-reduced-motion: reduce) {
    .c-work-card.will-reveal {
      opacity: 1;
      transform: none;
      clip-path: inset(0 0 0 0);
      transition: none;
    }
  }

  /* Thumbnail karty */
  .c-work-card__thumb {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--surface-inverted);
  }

  .c-work-card__thumb iframe,
  .c-work-card__thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    pointer-events: none;
  }

  .c-work-card__body {
    padding: var(--space-6) var(--space-6) var(--space-8);
  }

  .c-work-card__label {
    composes: c-label;
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-block-end: var(--space-2);
  }

  .c-work-card__title {
    font-family: var(--font-display);
    font-size: var(--text-heading);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    margin-block-end: var(--space-3);
  }

  .c-work-card__desc {
    font-size: var(--text-small);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    max-inline-size: none;
    margin-block-end: 0;
  }

  /* Nav masthead */
  .c-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    block-size: var(--nav-height);
    background: var(--nav-bg);
    box-shadow: var(--nav-border);
    display: flex;
    align-items: center;
  }

  .c-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: min(100%, var(--col-max));
    margin-inline: auto;
    padding-inline: var(--col-padding);
  }

  .c-nav__wordmark {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 600;
    font-style: italic;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    text-decoration: none;
  }

  .c-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  .c-nav__lang {
    display: flex;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .c-nav__lang a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out-expo);
  }

  .c-nav__lang a:hover,
  .c-nav__lang a[aria-current="true"] {
    color: var(--color-accent-text);
  }

  .c-nav__contact {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    border-block-end: 1px solid var(--surface-border);
    padding-block-end: 1px;
    transition:
      color var(--duration-fast) var(--ease-out-expo),
      border-color var(--duration-fast) var(--ease-out-expo);
  }

  .c-nav__contact:hover {
    color: var(--text-primary);
    border-color: var(--text-primary);
  }

  /* Separator sekcji */
  .c-divider {
    inline-size: 100%;
    block-size: 1px;
    background: var(--surface-border);
  }

  /* Kronostempel (4 kroki "jak pracuję") */
  .c-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-6);
    align-items: start;
  }

  .c-step__num {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent-text);
    padding-block-start: 0.3em;
    min-inline-size: 2.5rem;
  }

  .c-step__title {
    font-family: var(--font-display);
    font-size: var(--text-heading);
    font-weight: 500;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    margin-block-end: var(--space-2);
  }

  .c-step__desc {
    font-size: var(--text-body);
    color: var(--text-secondary);
    line-height: var(--leading-body);
    max-inline-size: none;
    margin-block-end: 0;
  }

  /* Email CTA (kontakt) */
  .c-email-cta {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 500;
    font-style: italic;
    letter-spacing: var(--tracking-tight);
    color: var(--color-accent-text);
    text-decoration: none;
    border-block-end: 1px solid color-mix(in oklch, var(--color-accent) 40%, transparent);
    transition:
      border-color var(--duration-base) var(--ease-out-expo),
      color var(--duration-base) var(--ease-out-expo);
  }

  .c-email-cta:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
}

/* ─────────────────────────────────────────────
   LAYER: utilities
   ───────────────────────────────────────────── */
@layer utilities {
  /* Wizualne */
  .u-text-display  { font-family: var(--font-display); }
  .u-text-body     { font-family: var(--font-body); }
  .u-text-mono     { font-family: var(--font-mono); }

  .u-text-hero     { font-size: var(--text-hero);    line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
  .u-text-heading  { font-size: var(--text-heading); line-height: var(--leading-tight); }
  .u-text-lead     { font-size: var(--text-lead);    line-height: var(--leading-body); }
  .u-text-body     { font-size: var(--text-body);    line-height: var(--leading-body); }
  .u-text-small    { font-size: var(--text-small);   line-height: var(--leading-body); }
  .u-text-label    { font-size: var(--text-label);   letter-spacing: var(--tracking-label); text-transform: uppercase; }
  .u-text-mono-sm  { font-size: var(--text-mono);    letter-spacing: var(--tracking-label); text-transform: uppercase; }

  .u-italic        { font-style: italic; }
  .u-weight-light  { font-weight: 300; }
  .u-weight-reg    { font-weight: 400; }
  .u-weight-mid    { font-weight: 500; }
  .u-weight-semi   { font-weight: 600; }
  .u-weight-bold   { font-weight: 700; }

  .u-color-accent  { color: var(--color-accent-text); }
  .u-color-muted   { color: var(--text-muted); }
  .u-color-faint   { color: var(--text-faint); }

  /* Layout */
  .u-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }

  .u-no-wrap  { white-space: nowrap; }
  .u-balance  { text-wrap: balance; }
  .u-center   { text-align: center; }

  /* Spacing */
  .u-mb-0  { margin-block-end: 0; }
  .u-mb-2  { margin-block-end: var(--space-2); }
  .u-mb-4  { margin-block-end: var(--space-4); }
  .u-mb-8  { margin-block-end: var(--space-8); }
  .u-mb-12 { margin-block-end: var(--space-12); }
  .u-mb-16 { margin-block-end: var(--space-16); }

  .u-mt-auto { margin-block-start: auto; }
}

/* ─────────────────────────────────────────────
   LAYER: themes (style-pack editorial)
   Warstwa themes wygrywa bez !important — @layer.
   Pack: data-pack="editorial" na <html>/<body>
   ───────────────────────────────────────────── */
@layer themes {
  [data-pack="editorial"] {
    /* Editorial: papier, siatka, typografia-pierwsza */
    /* Tokeny bazowe już odpowiadają editorial — nadpisujemy tylko specyfikę */

    /* Fraunces w italic dla h1/h2 — mocniejszy sygnał redakcji */
    h1, h2 {
      font-style: italic;
    }

    h3, h4 {
      font-style: normal;
      font-weight: 500;
    }

    /* Accent — line-through w labelach (nawiasach) zamiast bg */
    .c-label--accent::before {
      content: '— ';
    }

    /* Separator redakcyjny — cienka kreska */
    .c-divider {
      background: var(--surface-border);
    }
  }
}