/* 16 horizont — invented, free: the flat Ostfriesland horizon as the layout
   principle. Every section is a letterbox band cut by one full-bleed rule,
   sky above and land below. The original's #336799 ground is the sky and the
   greys are the land; the horizon itself is a pale steel line. Home: dark. */
@layer tokens, base, layout, components;

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

    /* Home is dark — the marsh at dusk, when the horizon actually reads as a
       line. Light is the same landscape at noon: the sky lifts, the land
       stays the darker half. */
    --sky:   light-dark(#e7ecf1, #0f1620);
    --land:  light-dark(#dde3ea, #090e15);
    --ink:   light-dark(#28313c, #e2e8ef);
    --muted: light-dark(#56626f, #97a4b3);
    --steel: light-dark(#336799, #8fb8de);
    --on-steel: light-dark(#ffffff, #0b1119);
    /* The horizon must hold in both — it is the only line on the page. */
    --line:  light-dark(#336799, #8fb8de);
    --faint: light-dark(#c2cbd5, #1e2833);

    --radius: 0;
    --sans: "Helvetica Neue", "Inter", Helvetica, Arial, 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(--land);
    color: var(--ink);
    font: 1rem/1.6 var(--sans);
  }
  h1, h2, h3 { margin: 0; font-weight: 300; }
  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: 2px solid var(--steel); outline-offset: 4px; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; }
  }
}

@layer layout {
  .band { display: grid; }
  .sky {
    display: grid;
    align-content: end;
    min-block-size: clamp(9rem, 26vh, 17rem);
    padding: clamp(2rem, 6vh, 4rem) clamp(1.25rem, 5vw, 4rem) clamp(1rem, 3vh, 1.75rem);
    background: linear-gradient(to bottom, var(--sky) 0%,
                color-mix(in oklab, var(--sky) 70%, var(--land)) 100%);
    border-block-end: 1px solid var(--line);
  }
  .land {
    padding: clamp(1.5rem, 4vh, 2.5rem) clamp(1.25rem, 5vw, 4rem) clamp(2.5rem, 7vh, 4rem);
  }
}

@layer components {
  .masthead {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2.5rem;
    padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 5vw, 4rem);
    background: var(--sky);
  }
  .brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none;
           color: var(--ink); }
  .brand img { inline-size: 2.25rem; }
  .name { font-size: 0.875rem; font-weight: 400; text-transform: uppercase;
          letter-spacing: 0.3em; }
  .nav { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin-inline-start: auto;
         font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; }
  .nav a { color: var(--muted); text-decoration: none; }
  .nav a:hover { color: var(--steel); }
  .schemes { display: flex; gap: 1rem; font-size: 0.6875rem;
             text-transform: uppercase; letter-spacing: 0.16em; }
  .schemes a { text-decoration: none; color: var(--muted); }
  .schemes a:hover { color: var(--steel); }

  /* A photographic sky: the image fills the band, the type sits in it, and
     the horizon rule still cuts the bottom edge. */
  .photo-sky { position: relative; padding: 0; min-block-size: clamp(14rem, 42vh, 26rem); }
  .photo-sky img {
    position: absolute; inset: 0;
    inline-size: 100%; block-size: 100%;
    object-fit: cover; object-position: 50% 58%;
  }
  .photo-sky::after {
    /* A scrim so the headline holds 4.5:1 over an amateur photo whose sky is
       almost white in the top third. */
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to bottom,
      color-mix(in oklab, var(--sky) 88%, transparent) 0%,
      color-mix(in oklab, var(--sky) 55%, transparent) 55%,
      color-mix(in oklab, var(--sky) 90%, transparent) 100%);
  }
  .photo-sky.flat::after { background: color-mix(in oklab, var(--sky) 25%, transparent); }
  .sky-text {
    position: relative;
    z-index: 1;
    align-self: end;
    padding: clamp(2rem, 6vh, 4rem) clamp(1.25rem, 5vw, 4rem) clamp(1rem, 3vh, 1.75rem);
  }
  .photo-sky { display: grid; align-content: end; }

  .eyebrow { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.3em;
             color: var(--steel); margin-block-end: 1.25rem; }
  .hero h1 { font-size: clamp(1.875rem, 5vw, 3.75rem); line-height: 1.06;
             letter-spacing: 0.01em; max-inline-size: 20ch; text-wrap: balance; }
  .hero .land { display: grid; grid-template-columns: minmax(0, 1fr) auto;
                gap: 1.25rem clamp(1.5rem, 5vw, 4rem); align-items: start; }
  .lede { max-inline-size: 48ch; color: var(--muted); }
  .actions { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-self: end; }
  @media (max-width: 760px) {
    .hero .land { grid-template-columns: 1fr; }
    .actions { justify-self: start; }
  }
  .btn {
    display: inline-block; padding: 0.55rem 0;
    border-block-end: 1px solid var(--steel); border-radius: var(--radius);
    color: var(--ink);
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em;
    text-decoration: none;
  }
  .btn:hover { color: var(--steel); }
  .btn-primary { padding-inline: 1.5rem; background: var(--steel);
                 color: var(--on-steel); border-block-end-color: transparent; }
  .btn-primary:hover { background: transparent; color: var(--steel);
                       border-block-end-color: var(--steel); }

  h2 { font-size: clamp(1.375rem, 3.5vw, 2.25rem); max-inline-size: 20ch; }

  /* Strata: rows lying flat on the land, each a thin band of its own. */
  .strata { display: grid; }
  .strata li {
    display: grid;
    grid-template-columns: minmax(10rem, 20%) minmax(0, 1fr);
    gap: 0.5rem clamp(1.5rem, 5vw, 4rem);
    padding-block: 1.125rem;
    border-block-end: 1px solid var(--faint);
  }
  .strata li:last-child { border-block-end: 0; }
  .strata h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em;
               color: var(--steel); padding-block-start: 0.25rem; }
  .strata p { color: var(--muted); max-inline-size: 66ch; }
  @media (max-width: 700px) { .strata li { grid-template-columns: 1fr; } }

  .meta { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em;
          color: var(--muted); max-inline-size: 70ch; }

  .contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
             gap: clamp(1.5rem, 5vw, 4rem); }
  .contact dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em;
                color: var(--steel); margin-block-end: 0.75rem;
                padding-block-end: 0.75rem; border-block-end: 1px solid var(--faint); }
  .contact dd { line-height: 1.9; }
  @media (max-width: 700px) { .contact { grid-template-columns: 1fr; } }

  .colophon {
    padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 5vw, 4rem) 3.5rem;
    border-block-start: 1px solid var(--line);
    background: var(--sky);
    font-size: 0.875rem;
    display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center;
  }
  .sections { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
  .sections a { color: var(--ink); text-decoration: none; }
  .sections a:hover { color: var(--steel); }
  .up { margin-inline-start: auto; }
}