/* Am Staufenberg OÜ - single-page site */

:root {
  --bg: #fffff8;
  --ink: #111110;
  --ink-secondary: #55544d;
  --ink-muted: #83817a;
  --highlight: #15468f;
  --rule: #dddcd2;
  --measure: 34rem;
  --gutter: 1.5rem;
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: et-bembo, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hero */

.hero {
  margin: 0;
  width: 100%;
}

.hero img {
  display: block;
  width: 100%;
  height: clamp(13rem, 42vh, 26rem);
  object-fit: cover;
  object-position: center 58%;
  background: var(--rule);
}

/* Layout */

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3rem var(--gutter) 4rem;
}

section, .masthead, footer {
  margin-bottom: 3rem;
}

/* Type */

.mark {
  display: block;
  color: var(--highlight);
  margin: 0 0 0.9rem -0.15rem;
}

h1 {
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}

h2 {
  font-size: 1.3rem;
  font-weight: 400;
  font-style: italic;
  color: var(--highlight);
  margin: 0 0 0.6rem;
}

p { margin: 0 0 1rem; }

.lede {
  font-size: 1.22rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 0;
}

/* Section figures */

main figure {
  margin: 1.75rem 0 0;
}

main figure + figure {
  margin-top: 1.25rem;
}

main figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--rule);
}

figcaption {
  color: var(--ink-muted);
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.45;
  margin-top: 0.5rem;
}

/* Links */

a {
  color: var(--highlight);
  text-decoration: none;
  background-image: linear-gradient(var(--highlight), var(--highlight));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 1.08em;
  padding-bottom: 0.08em;
}

a:hover, a:focus-visible {
  color: var(--bg);
  background-color: var(--highlight);
  background-image: none;
}

a:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
}

/* Footer */

footer {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  margin-bottom: 0;
}

.contact {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.meta {
  color: var(--ink-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.meta a { color: inherit; background-image: none; text-decoration: underline; text-decoration-color: var(--rule); }
.meta a:hover, .meta a:focus-visible { color: var(--bg); background-color: var(--ink-secondary); }

.credit {
  color: var(--ink-muted);
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.credit + .credit { margin-top: 0.75rem; }

.credit a { color: inherit; background-image: none; text-decoration: underline; text-decoration-color: var(--rule); }
.credit a:hover, .credit a:focus-visible { color: var(--bg); background-color: var(--ink-muted); }

/* Small screens */

@media (max-width: 34rem) {
  body { font-size: 1.0625rem; }
  main { padding-top: 2.25rem; }
  h1 { font-size: 1.85rem; }
  .lede { font-size: 1.1rem; }
}

/* Wide screens: keep the measure, let the images breathe past it */

@media (min-width: 64rem) {
  .hero img { height: clamp(18rem, 46vh, 30rem); }
  main { padding-top: 3.75rem; }
  main figure {
    width: calc(100% + 6rem);
    margin-left: -3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}