/* 15 riso-hundeplakat — invented, seeded from a material: risograph printing.
   Two spot inks from the family — the site's #0050C8 and a pale steel — on a
   grey newsprint stock, with a visible halftone and every heading printed
   twice a few pixels out of register. */
@layer tokens, base, layout, components;

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Two inks and the stock. In dark the stock becomes the drum's own black
       and the blue runs hotter, the way a riso reads under a lamp. */
    --stock:   light-dark(#e6e7e3, #101318);
    --stock-2: light-dark(#dbdcd7, #171b21);
    --ink:     light-dark(#1d2430, #dfe4ea);
    --blue:    light-dark(#0050C8, #4d8fef);
    --steel:   light-dark(#8fb0d4, #2d4a6d);
    --on-blue: #ffffff;
    --muted:   light-dark(#4e5867, #9aa5b4);
    /* Misregistration offset — the whole point of the material. */
    --slip-x: 3px;
    --slip-y: 2px;
    --dot: light-dark(rgb(29 36 48 / 0.16), rgb(223 228 234 / 0.12));

    --radius: 0;
    --grotesk: "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
    --mono: ui-monospace, "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  }
  :root:has(#light:target) { color-scheme: light; }
  :root:has(#dark:target)  { color-scheme: dark; }
}

@layer base {
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--stock);
    color: var(--ink);
    font: 0.875rem/1.55 var(--mono);
    /* The halftone: a coarse dot screen over the whole stock. */
    background-image: radial-gradient(var(--dot) 0.9px, transparent 1px);
    background-size: 4px 4px;
  }
  h1, h2, h3 { margin: 0; font-family: var(--grotesk); font-weight: 800;
               text-transform: uppercase; letter-spacing: -0.02em; }
  p { margin: 0; }
  ol { margin: 0; padding: 0; list-style: none; }
  dl, dd { margin: 0; }
  figure { margin: 0; }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  a { color: var(--blue); }
  a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; }
  }
}

@layer layout {
  /* See 14: `body > *` would otherwise give the scheme anchors page padding
     and render them as empty boxes. They still match :target when hidden. */
  #light, #dark { display: none; }
  body > * {
    max-inline-size: 78rem;
    margin-inline: auto;
    padding-inline: clamp(0.875rem, 3vw, 2rem);
  }
  .spread {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 2.5rem);
    margin-block-start: 1.5rem;
  }
  @media (max-width: 680px) { .spread { grid-template-columns: 1fr; } }
}

@layer components {
  /* The second impression: a blue copy of the same glyphs, slipped. Purely
     visual — the DOM text stays single. */
  [data-echo] { position: relative; isolation: isolate; display: inline-block; }
  [data-echo]::before {
    content: attr(data-echo);
    position: absolute;
    inset-block-start: var(--slip-y);
    inset-inline-start: var(--slip-x);
    /* Without an explicit width the absolutely-positioned copy is
       shrink-to-fit against the containing block and breaks its lines
       somewhere else than the real text — which reads as a second, broken
       heading rather than as a misregistered impression. */
    inline-size: 100%;
    z-index: -1;
    color: var(--blue);
    pointer-events: none;
    user-select: none;
  }
  @media (prefers-contrast: more), (forced-colors: active) {
    /* The slip is ornament; at raised contrast it only muddies the glyphs. */
    [data-echo]::before { content: none; }
  }

  .masthead {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem;
    padding-block: 1.25rem;
    border-block-end: 4px solid var(--ink);
  }
  .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none;
           color: var(--ink); }
  .brand img { inline-size: 2.25rem; }
  .name { font-family: var(--grotesk); font-weight: 800; font-size: 1.0625rem;
          text-transform: uppercase; letter-spacing: 0.02em; }
  .nav { display: flex; flex-wrap: wrap; gap: 0 1rem; margin-inline: auto;
         font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
  .nav a { color: var(--muted); text-decoration: none; }
  .nav a:hover { color: var(--blue); }
  .schemes { display: flex; gap: 0.375rem; font-size: 0.6875rem;
             text-transform: uppercase; letter-spacing: 0.1em; }
  .schemes a { text-decoration: none; border: 2px solid var(--ink);
               padding: 0.2rem 0.55rem; color: var(--ink); }
  .schemes a:hover { background: var(--blue); border-color: var(--blue);
                     color: var(--on-blue); }

  .hero { padding-block: clamp(1.5rem, 4vw, 3rem) 0; }
  .eyebrow { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.18em;
             color: var(--blue); margin-block-end: 1rem; }
  .hero h1 { font-size: clamp(2rem, 8vw, 6rem); line-height: 0.92;
             text-wrap: balance; }
  .hero-figure { margin-block-start: 1.5rem; border-block: 4px solid var(--ink); }
  /* Duotone: flattened to one channel, then tinted through the spot blue —
     the photograph is printed with the same two inks as everything else. */
  .hero-figure img, .marginalia figure img {
    inline-size: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.2)
            sepia(1) hue-rotate(185deg) saturate(2.2)
            brightness(light-dark(1.02, 0.8));
  }
  .hero-figure img { aspect-ratio: 4 / 1; object-position: 50% 58%; }
  .lede { font-size: 0.9375rem; line-height: 1.6;
          padding-inline-start: 1rem; border-inline-start: 4px solid var(--blue); }
  .actions { display: flex; flex-wrap: wrap; gap: 0.625rem; align-content: start; }
  .btn {
    display: inline-block; padding: 0.6rem 1.25rem;
    border: 3px solid var(--ink); border-radius: var(--radius);
    background: transparent; color: var(--ink);
    font-family: var(--grotesk); font-weight: 800; font-size: 0.8125rem;
    text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none;
    block-size: fit-content;
  }
  .btn:hover { background: var(--ink); color: var(--stock); }
  .btn-primary { background: var(--blue); border-color: var(--blue);
                 color: var(--on-blue); }
  .btn-primary:hover { background: var(--ink); border-color: var(--ink);
                       color: var(--stock); }

  .angebot, .kontakt { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
  h2 { font-size: clamp(1.375rem, 3.5vw, 2.5rem); margin-block-end: 1.75rem; }

  /* Hanging numerals in the gutter — the spread's organising device. */
  .marginalia { counter-reset: m; column-count: 2;
                column-gap: clamp(1.5rem, 4vw, 3rem);
                column-rule: 2px solid var(--ink); }
  .marginalia li {
    counter-increment: m;
    break-inside: avoid;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 0 0.75rem;
    margin-block-end: 1.75rem;
  }
  .marginalia li::before {
    content: counter(m, decimal-leading-zero);
    grid-row: 1 / 4;
    font-family: var(--grotesk); font-weight: 800; font-size: 2rem;
    line-height: 0.9; color: var(--blue);
  }
  .marginalia h3 { font-size: 0.9375rem; letter-spacing: 0.02em;
                   margin-block-end: 0.25rem; }
  .marginalia p { color: var(--muted); }
  .marginalia figure { margin-block-start: 0.75rem; border: 2px solid var(--ink); }
  .marginalia figure img { aspect-ratio: 3 / 2; }
  @media (max-width: 680px) { .marginalia { column-count: 1; } }

  .contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
             border-block: 4px solid var(--ink); }
  .contact > div { padding: 1.125rem 1rem; border-inline-end: 2px solid var(--ink); }
  .contact > div:last-child { border-inline-end: 0; }
  .contact dt { font-family: var(--grotesk); font-weight: 800; font-size: 0.6875rem;
                text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue);
                margin-block-end: 0.5rem; }
  .contact dd { line-height: 1.8; }
  @media (max-width: 660px) {
    .contact { grid-template-columns: 1fr; }
    .contact > div { border-inline-end: 0; border-block-end: 2px solid var(--ink); }
    .contact > div:last-child { border-block-end: 0; }
  }

  .colophon {
    margin-block-start: clamp(3rem, 7vw, 5rem);
    padding-block: 1.5rem 3rem;
    border-block-start: 4px solid var(--ink);
    background: var(--stock-2);
    display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center;
    font-size: 0.8125rem;
  }
  .sections { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
  .sections a { color: var(--ink); text-decoration: none; }
  .sections a:hover { color: var(--blue); }
  .up { margin-inline-start: auto; }
}