/* Logge Media Forge · Base [LEAD] · layers in tokens.css · only tokens, motion opt-in, nothing hidden waiting for JS.
   Below-the-fold skeletons and the footer: skeletons.css. */

/* RESET */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
  }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    hanging-punctuation: first allow-end last;
  }
  body {
    min-block-size: 100svh;
  }
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-inline-size: 100%;
  }
  img,
  video {
    block-size: auto;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }
  button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
  }
  :where(ul, ol)[role="list"] {
    list-style: none;
    padding: 0;
  }
  p,
  h1,
  h2,
  h3,
  h4,
  li,
  dd,
  figcaption,
  blockquote {
    overflow-wrap: break-word;
  }
  [hidden] {
    display: none !important;
  }
  dialog {
    padding: 0;
    border: 0;
    color: inherit;
  }
  summary {
    cursor: pointer;
  }
  table {
    border-collapse: collapse;
  }
}

/* BASE */
@layer base {
  /* Document */
  html {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 100%;
    font-weight: 420;
    line-height: var(--lh-body);
    scroll-padding-top: calc(var(--header-h) + 16px);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    accent-color: var(--accent);
  }
  body {
    position: relative;
    font-size: var(--t-body);
    background: transparent;
    overflow-x: clip;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--grain);
    background-size: 160px 160px;
    opacity: var(--grain-opacity);
  }
  ::selection {
    background: var(--accent);
    color: var(--on-alloy);
  }
  main {
    display: block;
    outline: none;
  }
  .sprite {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
  }

  /* Typography */
  h1,
  h2,
  .section-title,
  .chapter-title,
  .block-title {
    font-family: var(--font-display);
    font-weight: 400;
    text-wrap: balance;
    font-kerning: normal;
  }
  h1 em,
  h2 em,
  h3 em,
  .section-title em,
  .chapter-title em,
  .block-title em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  h3,
  h4 {
    font-family: var(--font-body);
    font-size: var(--t-h3);
    font-weight: 650;
    line-height: var(--lh-h3);
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  h4 {
    font-size: 1.125rem;
  }
  p {
    text-wrap: pretty;
  }
  .lead {
    font-size: var(--t-lead);
    line-height: var(--lh-lead);
    font-weight: 420;
    max-inline-size: 38ch;
  }
  /* Mono = sourced fact (§1.4). */
  .meta,
  .eyebrow,
  code,
  kbd,
  dl,
  time {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
  .meta {
    font-size: var(--t-meta);
    line-height: var(--lh-meta);
    font-weight: 500;
    letter-spacing: var(--track-meta);
    text-transform: uppercase;
  }
  .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s3);
    font-size: var(--t-meta);
    line-height: var(--lh-meta);
    font-weight: 500;
    letter-spacing: var(--track-meta);
    text-transform: uppercase;
    color: var(--muted);
  }
  .eyebrow::before {
    content: "";
    flex: none;
    inline-size: 8px;
    block-size: 8px;
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
  a:hover {
    text-decoration-thickness: 2px;
  }
  strong {
    font-weight: 650;
  }
  blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--t-quote);
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  kbd {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.6em;
    padding: 0 0.35em;
    border: 1px solid var(--control);
    border-block-end-width: 2px;
    border-radius: var(--r-chip);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--muted);
  }

  /* Icons (sprite, §4.7) */
  .i {
    inline-size: 1em;
    block-size: 1em;
    flex: none;
    display: inline-block;
    vertical-align: -0.14em;
    overflow: visible;
  }

  /* Layout */
  .shell {
    inline-size: 100%;
    max-inline-size: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .section {
    position: relative;
    padding-block: var(--section-pad);
  }
  .alias {
    display: block;
    position: absolute;
    inset-block-start: 0;
    inline-size: 1px;
    block-size: 1px;
    pointer-events: none;
  }
  section,
  article {
    position: relative;
  }
  #schichtbuch,
  #werkstatt,
  #abseits {
    content-visibility: auto;
  }
  #abseits {
    contain-intrinsic-size: auto 1000px;
  }
  #schichtbuch {
    contain-intrinsic-size: auto 2400px;
  }
  #werkstatt {
    contain-intrinsic-size: auto 4500px;
  }
  @media (min-width: 1024px) {
    #schichtbuch {
      contain-intrinsic-size: auto 2000px;
    }
    #werkstatt {
      contain-intrinsic-size: auto 3300px;
    }
    #abseits {
      contain-intrinsic-size: auto 1300px;
    }
  }

  .section-head {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: var(--s5);
    padding-block-start: var(--s6);
    margin-block-end: clamp(40px, 3.4vw, 56px);
  }
  .section-head--guides::before {
    content: "";
    position: absolute;
    inset: 0 0 -24px;
    z-index: -1;
    pointer-events: none;
    background-image:
      linear-gradient(to right, var(--line) 1px, transparent 1px),
      linear-gradient(to right, var(--line) 1px, transparent 1px);
    background-size:
      calc((100% + var(--gap)) / var(--cols)) 100%,
      100% 1px;
    background-repeat: repeat-x, no-repeat;
    mask-image: linear-gradient(to bottom, #000 0, rgb(0 0 0 / 0.5) 40%, transparent 100%);
    opacity: 0.55;
  }
  .section-head > * {
    grid-column: 1 / -1;
  }
  .section-head--guides > .section-title {
    max-inline-size: none;
  }
  .section-title {
    font-size: var(--t-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--track-h2);
    max-inline-size: 14ch;
  }
  @media (min-width: 1024px) {
    .section-head .section-title {
      grid-column: 1 / span 8;
      align-self: end;
    }
    .section-head .section-lead {
      grid-column: 9 / span 4;
      align-self: end;
      padding-block-end: 0.4em;
    }
  }

  .section-head--rail {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--s4);
    padding-block-start: 0;
    margin-block-end: var(--s6);
  }
  .section-head.section-head--rail > .section-title {
    grid-column: 1;
    max-inline-size: none;
  }
  .section-head--rail > .warm-controls {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    margin: 0 0 0.3em;
  }
  .section-head.section-head--rail > .section-lead {
    grid-column: 1 / -1;
    max-inline-size: 34ch;
    padding: 0;
  }

  .section-head--count {
    row-gap: var(--s4);
    padding-block-start: 0;
    margin-block-end: var(--s6);
  }
  .section-head--count > .section-title {
    grid-row: 2;
    font-size: clamp(2.75rem, 8vw, 8rem);
    max-inline-size: none;
  }
  .section-count {
    grid-row: 1;
    justify-self: end;
    align-self: center;
    font-family: var(--font-mono);
    font-size: clamp(2.5rem, 1rem + 6vw, 7.5rem);
    font-weight: 200;
    line-height: 0.8;
    letter-spacing: -0.07em;
    font-variant-numeric: tabular-nums;
    color: var(--heat-text);
  }
  .section-head.section-head--count > .eyebrow {
    grid-column: 1 / span 3;
    grid-row: 1;
  }
  .section-head.section-head--count > .section-count {
    grid-column: 4 / -1;
  }
  @media (min-width: 1024px) {
    .section-head.section-head--count > .eyebrow {
      grid-column: 1 / -1;
    }
    .section-head.section-head--count > .section-title {
      grid-column: 1 / span 10;
    }
    .section-head.section-head--count > .section-count {
      grid-column: 11 / -1;
      grid-row: 2;
      align-self: end;
      padding-block-end: 0.12em;
    }
    .section-head.section-head--count > .section-lead {
      grid-column: 1 / span 6;
      padding: 0;
    }
  }

  @media (min-width: 1024px) {
    .section-head.section-head--stats > .section-title {
      grid-column: 1 / span 6;
      grid-row: 2;
    }
    .section-head.section-head--stats > .section-lead {
      grid-column: 1 / span 6;
      grid-row: 3;
      max-inline-size: 44ch;
      padding: 0;
    }
    .section-head--stats > .counters {
      grid-column: 7 / -1;
      grid-row: 2 / span 2;
      align-self: start;
      margin-block-start: 0.35em;
    }
  }

  .abseits-stage {
    border: 1px solid var(--line);
    padding-block-start: clamp(24px, 3vw, 40px);
  }
  .section-head--stage {
    padding: 0 clamp(16px, 3vw, 40px);
    margin-block-end: clamp(16px, 2vw, 32px);
  }
  @media (min-width: 1024px) {
    .section-head.section-head--stage > .section-title {
      grid-column: 1 / span 7;
      align-self: start;
    }
    .section-head.section-head--stage > .section-lead {
      grid-column: 8 / -1;
      align-self: start;
      max-inline-size: 44ch;
      padding: 0.5em 0 0;
      font-size: var(--t-body);
      color: var(--muted);
    }
  }

  /* Header */
  .skip-link {
    position: fixed;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    z-index: 100;
    padding: var(--s3) var(--s4);
    background: var(--ink);
    color: var(--bg);
    font-weight: 650;
    text-decoration: none;
    transform: translateY(-160%);
  }
  .skip-link:focus {
    transform: none;
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 60;
    block-size: var(--header-h);
    background: color-mix(in srgb, var(--bg) 97%, transparent);
    border-block-end: 1px solid var(--line);
  }
  @supports (backdrop-filter: blur(1px)) {
    .site-header {
      backdrop-filter: saturate(1.3) blur(14px);
      -webkit-backdrop-filter: saturate(1.3) blur(14px);
    }
  }
  .site-header-inner {
    display: flex;
    align-items: center;
    gap: var(--s4);
    block-size: 100%;
  }

  /* Brand: the red mark heats up under the hand. */
  .brand {
    --heat: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-block-size: 44px;
    color: var(--ink);
    text-decoration: none;
    flex: none;
    margin-inline-end: auto;
  }
  .brand-logo {
    inline-size: 42px;
    block-size: 25px;
    color: var(--brand);
    filter: drop-shadow(0 0 calc(var(--heat) * 8px) color-mix(in srgb, var(--heat-3) calc(var(--heat) * 85%), transparent));
  }
  .brand-word {
    display: grid;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .brand-word > :last-child {
    color: var(--muted);
    font-weight: 650;
  }
  .brand:hover,
  .brand:focus-visible {
    --heat: 1;
  }

  /* Nav */
  .site-nav ul {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .site-nav a {
    --heat: 0;
    white-space: nowrap;
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-block-size: 44px;
    align-items: center;
    padding-inline: 12px;
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 560;
    letter-spacing: -0.005em;
    text-decoration: none;
    border-radius: var(--r-button);
  }
  .site-nav .nav-no {
    display: none;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
  }
  .site-nav a::after {
    content: "";
    position: absolute;
    inset-inline: 12px;
    inset-block-end: 9px;
    block-size: 2px;
    background: linear-gradient(90deg, var(--heat-2), var(--heat-3) 40%, var(--heat-4) 60%, var(--heat-3));
    transform: scaleX(var(--heat));
    opacity: calc(0.25 + var(--heat) * 0.75);
    transform-origin: 50% 50%;
  }
  .site-nav a:hover,
  .site-nav a:focus-visible {
    --heat: 1;
  }
  .site-nav a[aria-current] {
    color: var(--accent);
  }
  .site-nav a[aria-current]::after {
    transform: scaleX(1);
    opacity: 1;
    background: var(--accent);
  }

  .section-readout {
    display: none;
    flex: none;
    min-inline-size: 15ch;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  /* the same square as the section eyebrows */
  .section-readout-mark {
    display: inline-block;
    inline-size: 7px;
    block-size: 7px;
    margin-inline-end: 0.9em;
    vertical-align: 0.08em;
    background: var(--accent);
  }

  .header-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
  }
  .icon-button {
    --heat: 0;
    position: relative;
    display: inline-grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid var(--control);
    border-radius: var(--r-button);
    color: var(--ink);
    background: color-mix(in srgb, var(--heat-4) calc(var(--heat) * 22%), transparent);
    font-size: 1.125rem;
  }
  .icon-button:hover,
  .icon-button:focus-visible {
    --heat: 1;
    border-color: var(--ink);
  }
  .icon-button:disabled,
  .icon-button[aria-disabled="true"] {
    opacity: 0.45;
    cursor: default;
  }
  #motion-toggle .i-when-paused,
  #motion-toggle[aria-pressed="true"] .i-when-running {
    display: none;
  }
  #motion-toggle[aria-pressed="true"] .i-when-paused {
    display: inline-block;
  }
  #motion-toggle[aria-pressed="true"] {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  #theme-toggle .i {
    transform: rotate(0deg);
  }
  :root[data-theme="dark"] #theme-toggle .i {
    transform: rotate(180deg);
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    padding-inline: 14px;
    border: 1px solid var(--control);
    border-radius: var(--r-button);
    font-weight: 650;
    font-size: 0.9375rem;
    order: 3;
  }
  .menu-plus {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1;
  }
  .menu-toggle[aria-expanded="true"] .menu-plus {
    transform: rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }

  .gluehlinie {
    --page-heat: 0.3;
    position: absolute;
    inset-inline: 0;
    inset-block-end: -2px;
    block-size: 2px;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in oklch, var(--heat-2) calc(var(--page-heat) * 100%), var(--line)) 12%,
      color-mix(in oklch, var(--heat-3) calc(var(--page-heat) * 100%), var(--line)) 50%,
      color-mix(in oklch, var(--heat-4) calc(var(--page-heat) * 100%), var(--line)) 72%,
      transparent
    );
  }

  @media (max-width: 1023.98px) {
    .site-header-inner {
      gap: var(--s2);
    }
    .js .site-nav {
      position: absolute;
      inset-inline: 0;
      inset-block-start: 100%;
      max-block-size: calc(100svh - var(--header-h));
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--bg);
      border-block-end: 1px solid var(--line);
      box-shadow: 0 24px 48px -24px rgb(var(--shadow-ink) / 0.35);
      padding: var(--s3) var(--gutter) var(--s6);
      visibility: hidden;
      opacity: 0;
      transform: translateY(-8px);
    }
    .js .site-nav[data-open="true"] {
      visibility: visible;
      opacity: 1;
      transform: none;
    }
    .js .site-nav ul {
      display: grid;
      gap: 0;
    }
    .js .site-nav li + li {
      border-block-start: 1px solid var(--line);
    }
    .js .site-nav a {
      display: flex;
      align-items: baseline;
      gap: var(--s4);
      padding: var(--s3) 0;
      min-block-size: 56px;
      font-family: var(--font-display);
      font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
      font-weight: 400;
      line-height: 1;
      letter-spacing: -0.015em;
    }
    .js .site-nav .nav-no {
      display: inline;
      min-inline-size: 2.5ch;
    }
    .js .site-nav a::after {
      inset-inline: 0 auto;
      inline-size: 100%;
      inset-block-end: 0;
      transform-origin: 0 50%;
    }
    :root:not(.js) .site-header {
      position: relative;
      block-size: auto;
    }
    :root:not(.js) .site-header-inner {
      flex-wrap: wrap;
      row-gap: 0;
      padding-block: var(--s1);
    }
    :root:not(.js) .site-nav {
      order: 3;
      inline-size: calc(100% + 2 * var(--gutter));
      margin-inline: calc(var(--gutter) * -1);
      padding-inline: calc(var(--gutter) - 8px);
      overflow-x: auto;
      scrollbar-width: none;
    }
    :root:not(.js) .site-nav a {
      padding-inline: 8px;
      white-space: nowrap;
      font-size: 0.875rem;
    }
    :root:not(.js) .site-nav ul {
      flex-wrap: nowrap;
      inline-size: max-content;
    }
  }
  @media (min-width: 1024px) {
    .menu-toggle {
      display: none;
    }
  }
  @media (min-width: 1180px) {
    .section-readout {
      display: block;
    }
  }
  :root:not(.js) :is(#menu-toggle, #motion-toggle, #theme-toggle, .section-readout) {
    display: none;
  }
  @media (max-width: 379.98px) {
    .brand-word {
      display: none;
    }
    .brand::after {
      content: "LMF";
      font-weight: 800;
      font-size: 0.75rem;
      letter-spacing: 0.16em;
    }
  }

  /* Buttons */
  .button {
    --heat: 0;
    --on-accent: var(--on-alloy);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-block-size: 48px;
    padding: 0 22px;
    border: 1px solid var(--accent);
    border-radius: var(--r-button);
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: 0.005em;
    line-height: 1.1;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
  }
  .button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
      circle at var(--mx) var(--my),
      color-mix(in oklch, var(--heat-4) calc(var(--heat) * 55%), transparent),
      transparent 70%
    );
    pointer-events: none;
  }
  .button:hover,
  .button:focus-visible {
    --heat: 1;
    text-decoration: none;
  }
  .button:active,
  .button.is-struck {
    transform: translateY(2px) scaleY(0.965);
  }
  .button .i {
    font-size: 1.05em;
  }
  .button--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--control);
  }
  .button--ghost:hover,
  .button--ghost:focus-visible {
    border-color: var(--ink);
  }
  .button--ghost::before {
    background: radial-gradient(
      circle at var(--mx) var(--my),
      color-mix(in oklch, var(--heat-3) calc(var(--heat) * 22%), transparent),
      transparent 70%
    );
  }
  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 44px;
    color: var(--ink);
    font-weight: 650;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
  }
  .text-link:hover {
    color: var(--accent);
  }

  /* Chips */
  .chip {
    --heat: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 32px;
    padding: 0 12px;
    border: 1px solid var(--control);
    border-radius: var(--r-chip);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: nowrap;
  }
  button.chip {
    min-block-size: 44px;
    padding-inline: 14px;
    cursor: pointer;
    background: color-mix(in srgb, var(--heat-4) calc(var(--heat) * 16%), transparent);
  }
  button.chip:hover,
  button.chip:focus-visible {
    --heat: 1;
    border-color: var(--ink);
  }
  .chip[data-alloy] {
    border-color: color-mix(in srgb, var(--alloy) 70%, var(--control));
  }
  .chip[data-alloy]::before {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    background: var(--alloy);
    flex: none;
  }
  .chip[aria-pressed="true"] {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  .chip[aria-pressed="true"][data-alloy] {
    background: var(--alloy);
    border-color: var(--alloy);
    color: var(--on-alloy);
  }
  .chip[aria-pressed="true"][data-alloy]::before {
    background: var(--on-alloy);
  }
  .chip[aria-disabled="true"] {
    opacity: 0.55;
  }
  .chip-count {
    color: inherit;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
  }
  .chip-count:empty {
    display: none;
  }
  .chip--note {
    background: var(--surface);
    color: var(--muted);
  }
  .chip--probe {
    border-color: var(--alloy, var(--control));
    color: var(--alloy, var(--ink));
    text-transform: uppercase;
    letter-spacing: var(--track-meta);
  }
  /* Filled alloy chip for plates etc. */
  .chip--alloy {
    background: var(--alloy);
    color: var(--on-alloy);
    border-color: var(--alloy);
  }

  /* Stamp row (mono facts, only present fields) */
  .stamps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: var(--t-meta);
    font-weight: 500;
    letter-spacing: var(--track-meta);
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
  }
  .stamps > li + li::before {
    content: "·";
    padding-inline: 0.6em;
    color: var(--control);
  }
  [data-glow="glueht"] .stamp--glow {
    color: var(--heat-text);
    font-weight: 700;
  }

  /* Hero (#esse) — skeleton layout; sections/esse.css (WP3) refines */
  .hero {
    position: relative;
    padding-block: clamp(32px, 6vw, 88px) 0;
  }
  .hero-inner {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: var(--s7);
    align-items: end;
  }
  .hero-copy {
    grid-column: 1 / -1;
    container-type: inline-size;
    display: grid;
    gap: var(--s5);
    align-content: end;
  }
  .hero-eyebrow {
    margin-block-end: var(--s2);
  }
  .hero-title {
    display: grid;
    font-size: clamp(3rem, 21cqi, 12rem);
    line-height: var(--lh-hero);
    letter-spacing: var(--track-hero);
    margin-block: var(--s2) var(--s3);
  }
  @supports not (font-size: 1cqi) {
    .hero-title {
      font-size: var(--t-hero);
    }
  }
  .hero-title em {
    color: var(--brand);
    padding-inline-start: 0.02em;
  }
  .hero-lead {
    max-inline-size: 34ch;
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
  }
  .hero-readout {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) 1.6em;
    color: var(--muted);
    padding-block-start: var(--s4);
    border-block-start: 1px solid var(--line);
    overflow-x: clip;
  }
  .hero-readout > span {
    position: relative;
    white-space: nowrap;
  }
  .hero-readout > span + span::before {
    content: "·" / "";
    position: absolute;
    inset-inline-end: 100%;
    inline-size: 1.6em;
    text-align: center;
    color: var(--control);
  }
  .esse-panel {
    grid-column: 1 / -1;
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    aspect-ratio: 4 / 3;
    inline-size: 100%;
    border: 1px solid var(--line);
    overflow: hidden;
    isolation: isolate;
  }
  .esse-poster {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background:
      radial-gradient(120% 60% at 50% 108%, color-mix(in srgb, var(--heat-3) 55%, transparent), transparent 60%),
      radial-gradient(80% 45% at 30% 100%, color-mix(in srgb, var(--heat-2) 70%, transparent), transparent 70%),
      radial-gradient(70% 40% at 78% 102%, color-mix(in srgb, var(--heat-4) 40%, transparent), transparent 70%),
      linear-gradient(to bottom, var(--bg) 40%, var(--heat-1));
  }
  .esse-poster-logo {
    inline-size: 46%;
    aspect-ratio: 2510 / 1500;
    block-size: auto;
    color: var(--heat-0);
    translate: 0 -12%;
    filter: drop-shadow(0 0 1px var(--heat-2)) drop-shadow(0 0 22px color-mix(in srgb, var(--heat-3) 40%, transparent));
  }
  /* Coal bed: decoration only (embers are data: esse.js / poster). */
  .esse-poster-bed {
    position: absolute;
    inset: auto 0 0;
    block-size: 42%;
    background:
      radial-gradient(40% 55% at 22% 100%, color-mix(in srgb, var(--heat-2) 55%, transparent), transparent 75%),
      radial-gradient(30% 45% at 64% 105%, color-mix(in srgb, var(--heat-3) 45%, transparent), transparent 75%),
      radial-gradient(22% 35% at 88% 100%, color-mix(in srgb, var(--heat-4) 30%, transparent), transparent 75%);
    filter: blur(2px);
  }
  .esse-poster-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(50% 35% at 50% 42%, color-mix(in srgb, var(--heat-2) 22%, transparent), transparent 70%);
  }
  .esse-panel:not([data-embers]) .esse-caption {
    display: none;
  }
  .esse-caption {
    grid-row: 2;
    display: grid;
    gap: 2px;
    padding: var(--s4) var(--s4) var(--s4);
    color: var(--on-screen-muted);
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.75rem;
    background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.35) 70%, transparent);
  }
  .esse-hint {
    position: absolute;
    inset-block-start: var(--s3);
    inset-inline-end: var(--s3);
    color: var(--on-screen-muted);
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0.02em;
  }
  .esse-hint-pointer,
  .esse-hint-touch {
    display: none;
  }
  @media (hover: hover) and (pointer: fine) {
    :root:not([data-motion="paused"]) .esse-panel[data-strike] .esse-hint-pointer {
      display: inline;
    }
  }
  @media not ((hover: hover) and (pointer: fine)) {
    :root:not([data-motion="paused"]) .esse-panel[data-strike] .esse-hint-touch {
      display: inline;
    }
  }
  @media (min-width: 1024px) {
    .hero-copy {
      grid-column: 1 / span 6;
    }
    .esse-panel {
      grid-column: 7 / span 6;
      aspect-ratio: 4 / 5;
      max-block-size: 78svh;
      justify-self: end;
    }
  }

  /* Generic section skeletons (the owners' sections/*.css refine) */

  /* Noch warm */
  .warm-controls {
    display: flex;
    justify-content: flex-end;
    gap: var(--s2);
    margin-block: calc(var(--s7) * -1) var(--s5);
  }
  .warm-rail {
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
    padding-block: var(--s2) var(--s5);
  }
  .warm-list {
    display: contents;
  }
  .warm-end {
    --heat: 0;
    flex: 0 0 min(80vw, 280px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--s3);
    min-block-size: 220px;
    padding: var(--s5);
    border: 1px dashed var(--control);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 2.25rem;
    line-height: 1;
    text-decoration: none;
    background: color-mix(in srgb, var(--heat-4) calc(var(--heat) * 14%), transparent);
  }
  .warm-end:hover,
  .warm-end:focus-visible {
    --heat: 1;
    border-style: solid;
    border-color: var(--accent);
  }
  .warm-end .i {
    color: var(--accent);
  }
  .warm-static {
    flex: 0 0 min(80vw, 300px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s5);
    min-block-size: 220px;
    padding: var(--s5);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
  }
  .warm-static > a {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 2.25rem;
    line-height: 1;
    text-decoration: none;
  }
  :root.js #warm:not([data-failed]) .warm-static {
    display: none;
  }

  /* Toast (announce.toast) */
  .toast {
    position: fixed;
    inset-inline: 50% auto;
    inset-block-end: max(var(--s5), env(safe-area-inset-bottom));
    z-index: 90;
    translate: -50% 0;
    max-inline-size: min(92vw, 520px);
    padding: var(--s3) var(--s5);
    background: var(--ink);
    color: var(--bg);
    font-weight: 600;
    border-inline-start: 4px solid var(--heat-3);
    box-shadow: 0 16px 40px -12px rgb(var(--shadow-ink) / 0.5);
  }

  /* Focus (3 px, 2 px offset, never removed) */
  :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }
  :focus:not(:focus-visible) {
    outline: none;
  }
  [tabindex="-1"]:focus {
    outline: none;
  }
}

/* MOTION (opt-in, calm-gated) */
@layer base {
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="paused"]) {
      scroll-behavior: smooth;
    }
    /* Heat grammar: cool slowly by default … */
    :root:not([data-motion="paused"]) :is(.brand, .site-nav a, .icon-button, .button, button.chip, .warm-end, .knopf, .contact-mail) {
      transition:
        --heat var(--d-cool) var(--ease-cool),
        border-color var(--d-cool) var(--ease-cool),
        background-color var(--d-cool) var(--ease-cool),
        color var(--d-ui) var(--ease-std),
        transform var(--d-rebound) var(--ease-rebound),
        box-shadow var(--d-rebound) var(--ease-rebound);
    }
    /* … and heat up fast. */
    :root:not([data-motion="paused"]) :is(.brand, .site-nav a, .icon-button, .button, button.chip, .warm-end, .knopf, .contact-mail):is(:hover, :focus-visible) {
      transition-duration: var(--d-heat-in), var(--d-heat-in), var(--d-heat-in), var(--d-ui), var(--d-rebound), var(--d-rebound);
    }
    /* Strike: accelerate into impact. */
    :root:not([data-motion="paused"]) :is(.button, .knopf, button.chip):active {
      transition-duration: var(--d-strike);
      transition-timing-function: var(--ease-hammer);
    }
    :root:not([data-motion="paused"]) .site-nav a::after {
      transition:
        transform var(--d-cool) var(--ease-cool),
        opacity var(--d-cool) var(--ease-cool);
    }
    :root:not([data-motion="paused"]) .site-nav a:is(:hover, :focus-visible)::after {
      transition-duration: var(--d-heat-in);
    }
    :root:not([data-motion="paused"]) .brand-logo {
      transition: filter var(--d-cool) var(--ease-cool);
    }
    :root:not([data-motion="paused"]) .brand:is(:hover, :focus-visible) .brand-logo {
      transition-duration: var(--d-heat-in);
    }
    :root:not([data-motion="paused"]) #theme-toggle .i {
      transition: transform 520ms var(--ease-rebound);
    }
    :root:not([data-motion="paused"]) .menu-plus {
      transition: transform var(--d-rebound) var(--ease-rebound);
    }
    :root:not([data-motion="paused"]) .skip-link {
      transition: transform var(--d-ui) var(--ease-std);
    }
    :root.js:not([data-motion="paused"]) .site-nav {
      transition:
        opacity var(--d-ui) var(--ease-std),
        transform var(--d-ui) var(--ease-std),
        visibility 0s linear var(--d-ui);
    }
    :root.js:not([data-motion="paused"]) .site-nav[data-open="true"] {
      transition:
        opacity var(--d-ui) var(--ease-std),
        transform var(--d-ui) var(--ease-std),
        visibility 0s;
    }
    :root:not([data-motion="paused"]) .contact-mail {
      transition:
        --heat var(--d-cool) var(--ease-cool),
        color var(--d-cool) var(--ease-cool),
        border-color var(--d-cool) var(--ease-cool),
        text-shadow var(--d-cool) var(--ease-cool);
    }
    :root:not([data-motion="paused"]) .contact-mail:is(:hover, :focus-visible) {
      transition-duration: var(--d-heat-in);
    }
    :root:not([data-motion="paused"]) .hero-stamp.is-stamped {
      animation: lmf-stamp 350ms var(--ease-rebound);
    }
    @keyframes lmf-stamp {
      from {
        scale: 1.04;
      }
      to {
        scale: 1;
      }
    }
    :root:not([data-motion="paused"]) .toast {
      animation: lmf-toast-in var(--d-ui) var(--ease-std);
    }
    @keyframes lmf-toast-in {
      from {
        opacity: 0;
        translate: -50% 8px;
      }
    }
  }
}

@layer reset {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
    }
  }
  :root[data-motion="paused"] *,
  :root[data-motion="paused"] *::before,
  :root[data-motion="paused"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* PREFERS-CONTRAST / FORCED COLORS */
@layer base {
  @media (prefers-contrast: more) {
    .button,
    .chip,
    .icon-button,
    .menu-toggle,
    .search,
    #sort {
      border-width: 2px;
    }
    .section-head--guides::before,
    body::before,
    .esse-poster-bed {
      display: none;
    }
    .site-header {
      background: var(--bg);
      backdrop-filter: none;
    }
  }
  @media (forced-colors: active) {
    .button,
    .chip,
    .icon-button,
    .menu-toggle,
    .knopf,
    .wb-close {
      border: 1px solid ButtonText;
      background: ButtonFace;
      color: ButtonText;
      forced-color-adjust: none;
    }
    .chip[aria-pressed="true"],
    #motion-toggle[aria-pressed="true"],
    .knopf[aria-pressed="true"] {
      background: Highlight;
      color: HighlightText;
      border-color: Highlight;
    }
    .brand-logo,
    .footer-logo,
    .esse-poster-logo {
      color: CanvasText;
    }
    canvas {
      display: none;
    }
    .esse-poster {
      forced-color-adjust: none;
    }
    .gluehlinie,
    .section-head--guides::before,
    body::before,
    .kontakt-coals {
      display: none;
    }
    .site-nav a[aria-current] {
      text-decoration: underline;
    }
    :focus-visible {
      outline: 3px solid Highlight;
    }
    .probe-stage,
    .project-dialog {
      border: 1px solid CanvasText;
    }
  }
}

/* UTILITIES */
@layer utilities {
  .vh {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

@layer sections {
  #schichtbuch .section-head .counters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-end: 0;
  }
  #werkstatt .about > .knoepfe {
    grid-column: 1 / -1;
    margin-block-start: var(--s6);
  }
  @media (min-width: 1024px) {
    #werkstatt .about > .about-copy {
      grid-row: 2;
    }
    #werkstatt .about > .knoepfe {
      grid-column: 1 / span 7;
      grid-row: 2;
      align-self: start;
      margin-block-start: 0;
    }
  }
  #abseits .abseits-stage :is(.nu, .contact-sheet) {
    border: 0;
    margin-block-end: 0;
  }
}