/* Reset, elements, type roles, focus and selection (REDESIGN-PLAN.md §4.2–4.3, §6.1).
   Rendering checklist §4.3: optical sizing auto, no synthesis, kerning on, smoothing per
   field, no resting transforms on text, Lina's <br> breaks kept. */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, picture, svg, video, canvas { display: block; max-inline-size: 100%; }
  img, video { block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
}

@layer base {
  html {
    color-scheme: light;
    background: var(--c-bone);
    color: var(--fg);
    scroll-padding-top: calc(var(--header-h) + var(--s4));
    /* Room under a focused element, so its ring is not cut at the window's bottom edge */
    scroll-padding-block-end: var(--s4);
    hanging-punctuation: first;
  }

  body {
    min-block-size: 100svh;
    font-family: var(--font-text);
    font-size: var(--t-body);
    font-weight: calc(var(--w-body) + var(--w-adjust));
    line-height: calc(var(--lh-body) + var(--lh-adjust));
    letter-spacing: calc(var(--tr-body) + var(--tr-adjust));
    font-optical-sizing: auto;
    font-synthesis: none;
    font-kerning: normal;
    overflow-x: clip;
  }

  /* Fields carry their own ground, text colour and smoothing (§4.1, §4.3 item 6). */
  body, .f-bone, .f-blush, .f-cobalt, .f-ink {
    -webkit-font-smoothing: var(--smoothing);
    -moz-osx-font-smoothing: var(--smoothing-moz);
  }
  .f-bone, .f-blush, .f-cobalt, .f-ink {
    background-color: var(--ground);
    color: var(--fg);
    font-weight: calc(var(--w-body) + var(--w-adjust));
    letter-spacing: calc(var(--tr-body) + var(--tr-adjust));
    line-height: calc(var(--lh-body) + var(--lh-adjust));
  }

  /* Headings: default level-to-role map for case, Me & AI, contact and legal (§4.2).
     Home sets its own roles with the type-* classes. */
  h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-variant-numeric: lining-nums;
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  h1 { --role-size: var(--t-title); --role-lh: var(--lh-title); --role-tr: var(--tr-title); --role-w: var(--w-title); }
  h2 { --role-size: var(--t-section); --role-lh: var(--lh-section); --role-tr: var(--tr-section); --role-w: var(--w-section); }
  h3, h4 { --role-size: var(--t-component); --role-lh: var(--lh-component); --role-tr: var(--tr-component); --role-w: var(--w-component); }
  h1, h2, h3, h4,
  .type-display, .type-title, .type-title-long, .type-section, .type-component, .type-lede, .type-body,
  .type-small, .type-label, .type-caption, .type-promise, .type-stat, .type-year, .type-ui {
    font-size: var(--role-size);
    line-height: calc(var(--role-lh) + var(--lh-adjust));
    letter-spacing: calc(var(--role-tr) + var(--tr-adjust));
    font-weight: calc(var(--role-w) + var(--w-adjust));
  }

  /* Below 320px (a phone at 200% zoom) long words in headings may break rather than
     overflow; text keeps its full size, so zoom still enlarges it (WCAG 1.4.4, 1.4.10). */
  @media (width < 320px) {
    h1, h2, h3, h4, .type-display, .type-title, .type-title-long, .type-section, .type-component, .type-promise {
      hyphens: auto;
      overflow-wrap: anywhere;
    }
  }

  p, li, dd, figcaption, blockquote { text-wrap: pretty; }
  p { max-inline-size: var(--measure); }

  /* Type roles (§4.2). Classes win over the element defaults above. */
  .type-display {
    font-family: var(--font-display);
    --role-size: var(--t-display); --role-lh: var(--lh-display); --role-tr: var(--tr-display); --role-w: var(--w-display);
  }
  .type-title { font-family: var(--font-heading); --role-size: var(--t-title); --role-lh: var(--lh-title); --role-tr: var(--tr-title); --role-w: var(--w-title); }
  .type-title-long { font-family: var(--font-heading); --role-size: var(--t-title-long); --role-lh: var(--lh-title); --role-tr: var(--tr-title); --role-w: var(--w-title); }
  .type-section { font-family: var(--font-heading); --role-size: var(--t-section); --role-lh: var(--lh-section); --role-tr: var(--tr-section); --role-w: var(--w-section); }
  .type-component { font-family: var(--font-heading); --role-size: var(--t-component); --role-lh: var(--lh-component); --role-tr: var(--tr-component); --role-w: var(--w-component); }
  .type-lede { font-family: var(--font-text); --role-size: var(--t-lede); --role-lh: var(--lh-lede); --role-tr: var(--tr-lede); --role-w: var(--w-lede); }
  .type-body { font-family: var(--font-text); --role-size: var(--t-body); --role-lh: var(--lh-body); --role-tr: var(--tr-body); --role-w: var(--w-body); }
  .type-small { font-family: var(--font-text); --role-size: var(--t-small); --role-lh: var(--lh-small); --role-tr: var(--tr-small); --role-w: var(--w-small); }
  .type-label {
    font-family: var(--font-text);
    text-transform: uppercase;
    /* One line by content rule (§4.2: about 30 characters), never forced: a forced
       line overflows at 320px and 200% zoom (WCAG 1.4.10). */
    --role-size: var(--t-label); --role-lh: var(--lh-label); --role-tr: var(--tr-label); --role-w: var(--w-label);
  }
  .type-caption { font-family: var(--font-text); color: var(--fg-muted); --role-size: var(--t-small); --role-lh: var(--lh-small); --role-tr: var(--tr-small); --role-w: var(--w-body); }

  /* Derived roles (§4.2) reuse the steps above */
  .type-promise { font-family: var(--font-heading); --role-size: var(--t-section); --role-lh: var(--lh-section); --role-tr: var(--tr-section); --role-w: 500; }
  .type-stat { font-family: var(--font-heading); font-variant-numeric: lining-nums; --role-size: var(--t-title); --role-lh: var(--lh-title); --role-tr: var(--tr-title); --role-w: var(--w-title); }
  .type-year { font-family: var(--font-heading); font-variant-numeric: tabular-nums lining-nums; --role-size: var(--t-title); --role-lh: var(--lh-title); --role-tr: var(--tr-title); --role-w: var(--w-title); }
  .type-ui { font-family: var(--font-text); --role-size: var(--t-small); --role-lh: var(--lh-small); --role-tr: var(--tr-small); --role-w: 600; }
  .type-narrow { font-stretch: var(--stretch-narrow); }

  .u-muted { color: var(--fg-muted); }
  .u-tabular { font-variant-numeric: tabular-nums; }

  /* Links in running text (§6.2): underline at rest, thicker on hover */
  a {
    color: var(--link);
    text-decoration-line: underline;
    text-decoration-thickness: var(--underline);
    text-underline-offset: var(--underline-offset);
    text-decoration-skip-ink: auto;
    transition: text-decoration-thickness var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
  }
  a:hover { text-decoration-thickness: var(--underline-hover); }

  /* Focus (§6.1): 2px, cobalt on light fields, saffron on cobalt and ink */
  :focus-visible {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: var(--focus-offset);
    border-radius: 2px;
  }

  ::selection { background: var(--c-saffron); color: var(--c-ink); }
  input, textarea { caret-color: var(--accent); }
  html { scrollbar-color: var(--c-ink-2) var(--c-bone); }

  blockquote { hanging-punctuation: first last; }
  strong, b { font-weight: calc(700 + var(--w-adjust)); }
  em, i { font-style: italic; }

  /* Sticky header must not hide focus at high zoom (§15 R5) */
  @media (height < 500px) {
    html { scroll-padding-top: var(--s4); }
  }
}

@layer utilities {
  /* In the last layer, so the hidden attribute beats any component's display value. */
  [hidden] { display: none; }

  /* Decoration that only fits beside text on wide screens (owner, 2026-11-04). */
  @media (width < 761px) {
    .u-wide-only { display: none; }
  }

  .u-sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Reduced motion (§7.3): the system setting, or a stored preference that main.js
     reflects as .is-reduced-motion. Everything shows in its final state. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition-duration: 0s;
      transition-delay: 0s;
      animation-duration: 0s;
      animation-iteration-count: 1;
      scroll-behavior: auto;
    }
  }
  .is-reduced-motion *, .is-reduced-motion *::before, .is-reduced-motion *::after {
    transition-duration: 0s;
    transition-delay: 0s;
    animation-duration: 0s;
    animation-iteration-count: 1;
    scroll-behavior: auto;
  }
}