/* 13 enamel-wegweiser — invented, seeded from a non-web medium: German
   signage. The original's #092C5F becomes vitreous enamel on stadium-shaped
   plates with an inset white keyline, hung off one vertical post; the greys
   become the whitewashed wall behind them. The steel #336799 is the chevron. */
@layer tokens, base, layout, components;

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

    /* Light is daylight signage on a limewashed wall. Dark is the same post
       at night: the ground drops away and the plates stay the brightest
       thing on the page. */
    --wall:   light-dark(#eceef0, #0e1116);
    --sunk:   light-dark(#dfe3e7, #151920);
    --enamel-bg: light-dark(#0f3a63, #14508a);
    --enamel: #f4f6f8;
    --ink:    light-dark(#161d26, #e6eaef);
    --muted:  light-dark(#4c5a6a, #a2aebc);
    --steel:  light-dark(#2b6ca8, #6fa8dd);
    --on-steel: light-dark(#ffffff, #0b1119);
    /* The post is structural; it must not thin out to nothing on dark. */
    --post:   light-dark(#b4bcc5, #333c47);

    --radius: 999px;
    --keyline: 2px;
    --grotesk: "Archivo Narrow", "Roboto Condensed", "Arial Narrow",
               "Helvetica Neue", system-ui, sans-serif;
    --text: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  }
  :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(--wall);
    color: var(--ink);
    font: 1rem/1.65 var(--text);
  }
  h1, h2, h3 { margin: 0; font-family: var(--grotesk); font-weight: 700;
               text-transform: uppercase; letter-spacing: 0.01em; }
  p { margin: 0; }
  ul { 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(--steel); }
  a:focus-visible { outline: 3px solid var(--steel); outline-offset: 3px;
                    border-radius: var(--radius); }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; }
  }
}

@layer layout {
  .post {
    position: relative;
    max-inline-size: 74rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
  }
  /* The post: one continuous vertical bar everything hangs off. */
  .post::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: clamp(1rem, 4vw, 2.5rem);
    inline-size: 10px;
    background: linear-gradient(90deg, var(--post) 0 4px,
                color-mix(in oklab, var(--post) 60%, transparent) 4px 10px);
  }
  main { padding-inline-start: clamp(1.5rem, 4vw, 3rem); }
  main > section { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }
}

@layer components {
  /* The enamel plate: a stadium shape, a deep navy field, and the white
     keyline set in from the edge that makes it read as vitreous. */
  .plate, .arm, .btn, .schemes a, .contact > div {
    background: var(--enamel-bg);
    color: var(--enamel);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 var(--keyline) var(--enamel-bg),
                inset 0 0 0 calc(var(--keyline) + 1.5px) var(--enamel),
                0 2px 0 rgb(0 0 0 / 0.18);
  }

  .masthead {
    max-inline-size: 74rem;
    margin-inline: auto;
    padding: clamp(1rem, 3vw, 1.75rem) clamp(1rem, 4vw, 2.5rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
  }
  .brand { text-decoration: none; }
  .plate {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 1.375rem 0.4rem 0.5rem;
    font-family: var(--grotesk);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .plate img { inline-size: 2rem; }
  .nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.125rem; margin-inline: auto;
         font-family: var(--grotesk); font-size: 0.9375rem;
         text-transform: uppercase; letter-spacing: 0.06em; }
  .nav a { color: var(--muted); text-decoration: none; }
  .nav a:hover { color: var(--enamel-bg); }
  .schemes { display: flex; gap: 0.375rem; }
  .schemes a { padding: 0.3rem 0.9rem; font-family: var(--grotesk); font-size: 0.75rem;
               text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none;
               color: var(--enamel); }
  .schemes a:hover { background: var(--steel); color: var(--on-steel);
                     box-shadow: inset 0 0 0 calc(var(--keyline) + 1.5px) var(--enamel); }

  .eyebrow {
    display: inline-block; padding: 0.2rem 0.8rem; border-radius: var(--radius);
    background: var(--steel); color: var(--on-steel);
    font-family: var(--grotesk); font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.12em; margin-block-end: 1.25rem;
  }
  .hero h1 { font-size: clamp(2rem, 5.5vw, 4rem); line-height: 1;
             max-inline-size: 18ch; text-wrap: balance; }
  .lede { margin-block-start: 1.25rem; max-inline-size: 50ch; color: var(--muted); }
  .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.75rem; }
  .btn {
    display: inline-block; padding: 0.65rem 1.5rem;
    font-family: var(--grotesk); font-weight: 700; font-size: 0.875rem;
    text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none;
    color: var(--enamel);
  }
  .btn::after { content: " ›"; }
  .btn:hover { background: color-mix(in oklab, var(--enamel-bg) 82%, #000); }
  .btn-primary { background: var(--steel); color: var(--on-steel);
                 box-shadow: inset 0 0 0 var(--keyline) var(--steel),
                             inset 0 0 0 calc(var(--keyline) + 1.5px) var(--enamel),
                             0 2px 0 rgb(0 0 0 / 0.18); }
  .btn-primary:hover { background: color-mix(in oklab, var(--steel) 85%, #000);
                       color: var(--on-steel); }
  .hero-figure { margin-block-start: 2rem; border-radius: 20px; overflow: hidden; }
  .hero-figure img { inline-size: 100%; aspect-ratio: 3 / 1; object-fit: cover;
                     object-position: 50% 58%; }

  h2 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); letter-spacing: 0.1em;
       margin-block-end: 1.5rem; color: var(--muted); }

  /* Signpost arms: plate with a chevron point, legend and figure on one line,
     the sentence set below in plain text, the photo below that. */
  .arms { display: grid; gap: 1.75rem; }
  .arms li { display: grid; gap: 0.625rem; }
  .arm {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.5rem;
    inline-size: fit-content; max-inline-size: 100%;
    padding: 0.6rem 2.5rem 0.6rem 1.375rem;
    position: relative;
    font-family: var(--grotesk);
  }
  .arm::after {
    content: "";
    position: absolute; inset-inline-end: 0.9rem; inset-block-start: 50%;
    inline-size: 0.55rem; block-size: 0.55rem; translate: 0 -50%;
    border-block-start: 2px solid var(--enamel);
    border-inline-end: 2px solid var(--enamel);
    rotate: 45deg;
  }
  .legend { font-weight: 700; font-size: 1.0625rem; text-transform: uppercase;
            letter-spacing: 0.06em; }
  .dist { font-size: 0.8125rem; letter-spacing: 0.06em; opacity: 0.85; }
  .arms p { color: var(--muted); max-inline-size: 62ch;
            padding-inline-start: 1.375rem; }
  .arms figure { margin-inline-start: 1.375rem; inline-size: min(34rem, 100%);
                 border-radius: 16px; overflow: hidden; }
  .arms figure img { inline-size: 100%; aspect-ratio: 5 / 2; object-fit: cover; }

  .contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .contact > div { padding: 1.25rem 1.375rem; border-radius: 20px; }
  .contact dt { font-family: var(--grotesk); font-size: 0.75rem;
                text-transform: uppercase; letter-spacing: 0.1em;
                margin-block-end: 0.5rem; opacity: 0.9; }
  .contact dd { line-height: 1.8; }
  .contact a { color: var(--enamel); }
  @media (max-width: 720px) { .contact { grid-template-columns: 1fr; } }

  .colophon {
    margin-block-start: clamp(3rem, 7vw, 5rem);
    padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 4vw, 2.5rem) 3rem;
    background: var(--sunk);
    font-size: 0.9375rem;
    display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center;
  }
  .sections { display: flex; flex-wrap: wrap; gap: 0.4rem 1.125rem; }
  .sections a { color: var(--ink); text-decoration: none; }
  .sections a:hover { color: var(--steel); }
  .up { margin-inline-start: auto; }
}