@layer reset, tokens, base, layout, components;

@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@layer reset {
  *,
  ::before,
  ::after { box-sizing: border-box; }

  * { margin: 0; }

  ul, ol {
    padding: 0;
    list-style: none;
  }

  img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  html {
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

@layer tokens {
  :root {
    /* Inputs */
    --font-text: "Sofia Sans", "Sofia Sans Fallback", Arial, sans-serif;
    --font-display: var(--font-text);
    --font-meta: var(--font-text);
    --weight-text: 400;
    --weight-strong: 600;
    --track-display: -0.014em;
    --track-display-max: -0.03em;
    --num-text: lining-nums proportional-nums;
    --num-meta: lining-nums tabular-nums;
    --abbr-caps: all-small-caps;
    --abbr-track: 0.05em;
    --track-label: 0.06em;
    --track-short: 0.08em;
    --hyphens-de: 8 3 3;
    --hyphens-en: 6 3 3;
    --hyphens-heading: 12 5 5;
    --text-min: 1.0625rem;
    --text-max: 1.25rem;
    --ratio-min: 1.25;
    --ratio-max: 1.414;
    --leading: 1.45;
    --leading-step-1: 1.2;
    --leading-min: 1.05;
    --measure: 50ch;
    --vw-min: 20rem;
    --vw-max: 90rem;
    --measure-cols: 7;
    --cols-side: 3;
    --cols-fact: 2;
    --hairline: 1px;
    --focus-ring: 2px;
    --underline-offset: 0.2em;
    --underline-hover: 0.12em;
    --indent-hang: 1em;
    --indent-list: 1.25em;
    --gap-nav: 1em;
    --leader-pitch: 4px;
    --leader-gap: 0.5em;
    --leader-lift: 0.25em;

    /* Derived */
    --p: clamp(0, tan(atan2(100vi - var(--vw-min), var(--vw-max) - var(--vw-min))), 1);
    --text: calc(var(--text-min) + (var(--text-max) - var(--text-min)) * var(--p));
    --ratio: calc(var(--ratio-min) + (var(--ratio-max) - var(--ratio-min)) * var(--p));
    --step--1: calc(var(--text) / var(--ratio));
    --step-1: calc(1rlh / var(--leading-step-1));
    --lead: calc(var(--text) * pow(var(--ratio), 1.5));
    --unit: 0.5rlh;
    --lh: max(round(nearest, 1em + var(--text) * (var(--leading) - 1), var(--unit)), round(up, var(--leading-min) * 1em, var(--unit)));
    --space-s: 1rlh;
    --space-m: 2rlh;
    --space-l: 4rlh;
    --gutter: 1rlh;
    --edge: calc(var(--gutter) * (1 + 2 * var(--p)));
    --side: calc(var(--cols-side) * (var(--measure) + var(--gutter)) / var(--measure-cols) - var(--gutter));
    --grid:
      [content-start] minmax(0, var(--side)) minmax(0, var(--gutter))
      [text-start] min(var(--measure), 100% - 2 * var(--edge))
      [text-end] minmax(0, var(--gutter)) minmax(0, var(--side)) [content-end];

    color-scheme: light dark;

    --bg: light-dark(#fff, #000);
    --fg: light-dark(#000, #fff);
    --rule: linear-gradient(currentcolor 0 0) top / 100% var(--hairline) no-repeat;
  }
}

@layer base {
  :where(*) { line-height: var(--lh); } /* not :root: rlh reads it */

  html {
    line-height: round(var(--text) * var(--leading), 1px / 2);
    scrollbar-gutter: stable;
  }

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-text);
    font-size: var(--text);
    font-weight: var(--weight-text);
    font-kerning: normal;
    font-variant-numeric: var(--num-text);
    font-synthesis: none;
    hanging-punctuation: first allow-end last;
    hyphens: auto;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
  }

  :where(:root:lang(de), [lang|="de"]) { hyphenate-limit-chars: var(--hyphens-de); }
  :where(:root:lang(en), [lang|="en"]) { hyphenate-limit-chars: var(--hyphens-en); }

  :is(body > header, h1, .hero-title, .hero-text, dt, abbr, .meta, .url, a[href^="mailto:"], a[href^="tel:"]) { hyphens: manual; }
  :is(.url, a[href^="mailto:"], a[href^="tel:"]) { overflow-wrap: anywhere; }

  a[href^="tel:"] { font-variant-numeric: var(--num-text); }

  :is(h1, .hero-title) {
    font-family: var(--font-display);
    font-size: var(--lead);
    font-weight: var(--weight-text);
  }

  h2, h3 {
    font-size: inherit;
    font-weight: var(--weight-strong);
  }

  h1, h2, h3, .hero-title {
    hyphenate-limit-chars: var(--hyphens-heading);
    text-wrap: balance;
    letter-spacing: max(var(--track-display-max), var(--track-display) * (tan(atan2(1em, var(--text))) - 1));
  }

  /* Baseline grid: trim to cap and baseline, pad to --lh, round to --unit. */
  @supports (text-box: trim-both cap alphabetic) {
    :where(h1, h2, h3, p, figcaption, dt, dd, li:not(:has(p, h3, ul, ol))) {
      text-box: trim-both cap alphabetic;
      padding-block-start: calc(var(--lh) - 1cap);
      block-size: calc-size(auto, round(nearest, size, var(--unit)));
    }
  }

  p, li, dd, figcaption, blockquote { text-wrap: pretty; }

  p:empty { display: none; } /* (image:) inside a paragraph */

  strong { font-weight: var(--weight-strong); }

  address { font-style: normal; }
  address a { white-space: nowrap; }

  abbr {
    font-variant-caps: var(--abbr-caps);
    letter-spacing: var(--abbr-track);
    text-decoration: none;
  }

  :is(h1, h2, h3, .hero-title) abbr { font-variant-caps: normal; }

  sup, sub, span.meta { line-height: 0; }

  a {
    color: inherit;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--underline-offset);

    &:hover { text-decoration-thickness: var(--underline-hover); }
  }

  nav a { padding-block: var(--unit); }
  body > header nav a { text-decoration: none; }
  nav a:is(:hover, [aria-current]) { text-decoration: underline; }

  :focus-visible {
    outline: var(--focus-ring) solid;
    outline-offset: var(--focus-ring);
  }

  ::selection {
    background: var(--fg);
    color: var(--bg);
  }

  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
  }
}

@layer layout {
  body {
    display: grid;
    grid-template-columns: minmax(var(--edge), 1fr) var(--grid) minmax(var(--edge), 1fr);
    grid-template-rows: auto 1fr auto;
    row-gap: var(--space-l);
    min-block-size: round(down, 100dvb, var(--unit));
    padding-block: var(--space-m) var(--space-l);
  }

  body > :is(header, footer) {
    grid-column: text;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-s);
  }

  body > footer {
    font-size: var(--step--1);
    background: var(--rule);
  }

  nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--gap-nav);
  }

  :is(main, main > *) {
    grid-column: content;
    display: grid;
    grid-template-columns: subgrid;
  }

  main {
    align-content: start;
    row-gap: var(--space-l);
  }

  main > * { row-gap: var(--unit); }
  main > * > * { grid-column: text; }
  main > * > :not(:first-child, h2 + *) { margin-block-start: var(--unit); }
  .hero-title { grid-column: text-start / content-end; }

  /* ?grid overlay. Keep in sync with --grid. */
  [data-grid] body { position: relative; }

  [data-grid] body::before {
    --overlay-baseline: 25%;
    --overlay-column: 8%;

    content: "";
    position: absolute;
    inset: 0;
    grid-column: text;
    grid-row: 1 / -1;
    pointer-events: none;
    background:
      repeating-linear-gradient(to bottom, transparent 0 calc(var(--unit) - var(--hairline)), color-mix(in srgb, currentcolor var(--overlay-baseline), transparent) 0 var(--unit)),
      linear-gradient(to right, color-mix(in srgb, currentcolor var(--overlay-column), transparent) calc(100% - var(--gutter)), transparent 0) 0 0 / calc((100% + var(--gutter)) / var(--measure-cols)) 100%;
  }
}

@layer components {
  .prose {
    > * + * { margin-block-start: var(--space-s); }

    > * + :is(h2, h3) { margin-block-start: var(--space-m); }
    > :is(h2, h3) + * { margin-block-start: 0; }
    > :is(h2, h3) + figure { margin-block-start: var(--space-s); }

    :is(h2, blockquote) { font-size: var(--step-1); }

    :is(ul, ol) {
      padding-inline-start: var(--indent-list);
      list-style: revert;
    }
  }

  .hero-text > * + * { margin-block-start: var(--unit); }

  .hero > .contact { margin-block-start: calc(var(--space-m) - var(--unit)); }

  .entries {
    display: grid;
    row-gap: var(--space-s);

    > li > h3 { font-weight: var(--weight-text); }

    > li > .meta + p { margin-block-start: var(--space-s); }
  }

  .meta {
    font-family: var(--font-meta);
    font-size: var(--step--1);
    font-variant-numeric: var(--num-meta);
  }

  main > * > ul:not([class]) {
    container-type: inline-size;

    > li {
      padding-inline-start: var(--indent-hang);
      text-indent: calc(-1 * var(--indent-hang));
    }

    @container (inline-size >= 24em) {
      > li:has(> .meta) {
        display: flex;
        align-items: end;
        padding: 0;
        text-indent: 0;
        text-box: normal;

        > * {
          @supports (text-box: trim-both cap alphabetic) {
            text-box: trim-both cap alphabetic;
            padding-block-start: calc(var(--lh) - 1cap);
            block-size: calc-size(auto, round(nearest, size, var(--unit)));
          }
        }

        > strong { font-weight: var(--weight-text); }
        > .sep { display: none; }

        > .meta {
          order: 2;
          line-height: var(--lh);
        }

        &::after {
          content: "";
          order: 1;
          flex: 1;
          block-size: var(--hairline);
          margin: 0 var(--leader-gap) var(--leader-lift);
          background: linear-gradient(to right, currentcolor var(--hairline), transparent 0) left bottom / var(--leader-pitch) var(--hairline) repeat-x;
        }
      }
    }
  }

  figure { container-type: inline-size; }

  main > * > figure img {
    inline-size: 100%;
    block-size: max(var(--unit), round(100cqi / var(--aspect), var(--unit)));
    object-fit: cover;
  }

  .prose figure img {
    block-size: max(var(--unit), round(min(100cqi, var(--img-w) * 1px) * var(--img-h) / var(--img-w), var(--unit)));
    object-fit: cover;
  }

  dl {
    display: grid;
    grid-template-columns: minmax(max-content, calc((100% + var(--gutter)) * var(--cols-fact) / var(--measure-cols) - var(--gutter))) 1fr;
    gap: var(--unit) var(--gutter);
  }

  :is(main > * > h2, dt) {
    font-weight: var(--weight-strong);
    font-variant-caps: all-small-caps;
    letter-spacing: var(--track-label);
  }

  nav a[hreflang] {
    font-variant-caps: all-small-caps;
    letter-spacing: var(--track-short);
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .skip-link {
    position: fixed;
    inset: 0 auto auto 0;
    padding: var(--unit) var(--gutter);
    background: var(--fg);
    color: var(--bg);
    translate: 0 -100%;

    &:focus-visible { translate: none; }
  }
}