/* gl.aser.de · shared stylesheet for index.en.html + index.de.html
   Identity: warm golden #ff9e00, Karma serif, rotated square (−28° = 1°/professional year). */

/* ---------- Fonts (self-hosted, GDPR-safe) ---------- */
@font-face {
  font-family: "Karma";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/karma-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Karma";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/karma-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Karma";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/karma-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Karma";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/karma-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design tokens ---------- */
:root {
  color-scheme: light dark;
  --square: 3rem;             /* size of the identity squares & sticky band */
  --accent: #ff9e00;          /* identity gold — accents, borders, CTA only */
  --accent-text: #9c5e00;     /* AA-safe amber for colored text on light bg */
  --bg: #faf7f2;
  --surface: rgba(255, 255, 255, 0.72);
  --ink: #2e2a24;
  --ink-strong: #171310;
  --muted: #5f584e;  /* ≈6.6:1 on --bg */
  --faint: #756c61;  /* ≈4.8:1 on --bg (AA) */
  --rule: rgba(46, 42, 36, 0.16);
  --cta-ink: #241a06;         /* text on golden CTA */
  --bg-texture: url("bg.jpg");
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent-text: #ffb84d;
    --bg: #201d19;
    --surface: rgba(255, 255, 255, 0.04);
    --ink: #e9e3d9;
    --ink-strong: #faf7f2;
    --muted: #a89f92;  /* ≈6.4:1 on dark --bg */
    --faint: #8f8578;  /* ≈4.6:1 on dark --bg (AA) */
    --rule: rgba(233, 227, 217, 0.18);
    --bg-texture: none;
  }
}

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

html {
  scroll-behavior: smooth;
  /* scroll anchoring would fight the shrinking sticky masthead (flicker/snap-back) */
  overflow-anchor: none;
}

body {
  margin: 0;
  font-family: "Karma", Georgia, serif;
  font-weight: 300;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bg);
  -webkit-text-size-adjust: 100%;
}

/* Viewport-pinned texture (mobile-safe alternative to background-attachment: fixed) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--bg-texture) center / cover no-repeat;
}

h1, h2, h3 { color: var(--ink-strong); line-height: 1.25; text-wrap: balance; }

h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200;
  letter-spacing: 0.01em;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  margin: 0 0 0.35em;
}
h2 {
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  margin: 0 0 0.8em;
}
h3 {
  font-weight: 500;
  font-size: 1.05em;
  margin: 0 0 0.3em;
}

p { margin: 0 0 1em; max-width: 65ch; }

a:link, a:visited {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}
a:hover, a:active { color: var(--ink-strong); text-decoration-thickness: 0.18em; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; }

/* ---------- Layout shell ---------- */
.page {
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--pad);
}

main > section { margin-block: clamp(2.75rem, 7vw, 5.5rem); }

/* Editorial asymmetry on wide screens: alternate sections step right */
@media (min-width: 900px) {
  main > section:nth-of-type(even) { margin-left: 8rem; }
  main > section:nth-of-type(odd)  { margin-right: 6rem; }
}

/* Section heading marker: small golden square */
main > section > h2::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.55em;
  background: var(--accent);
  transform: rotate(-28deg);
}

/* ---------- Decorative squares ---------- */
.square { background: var(--accent); }
.corner-square {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--square);
  height: var(--square);
  z-index: 6; /* floats above the sticky masthead band */
}

/* ---------- Sticky masthead ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem; /* row spacing comes from .lang-nav's own margin (collapsible) */
  /* full-viewport band, h1 aligned with the content column */
  margin-inline: calc(50% - 50vw);
  padding-block: 0.9rem;
  padding-left: max(var(--pad), calc((100vw - 72rem) / 2 + var(--pad)));
  /* right side additionally clears the fixed corner square at every width */
  padding-right: max(var(--pad), calc((100vw - 72rem) / 2 + var(--pad)), 4rem);
  /* Fallback (no scroll-driven animations): band always readable */
  background-color: var(--bg);
  background-color: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.masthead h1 { margin: 0; line-height: 1.25em; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--cta-ink);
  padding: 0.6em 1em;
  z-index: 10;
  text-decoration: none;
  font-weight: 500;
}
.skip-link:focus-visible { left: 0; }

/* ---------- Header / hero ---------- */
.site-header { padding-top: clamp(0.5rem, 2vw, 2rem); }

.lang-nav { display: flex; gap: 0.25em; flex: 0 0 auto; }
/* Mobile: constant-height masthead (no scroll-linked layout changes at all —
   they trigger scroll-anchoring feedback loops on touch devices).
   The h1 stays one compact line; the chips hang below the band, absolutely
   positioned so their fade-out never changes layout. */
@media (max-width: 600px) {
  .masthead { padding-block: 0; }
  .masthead h1 {
    font-size: 1.15rem;
    line-height: var(--square); /* band height = corner square, always */
    white-space: nowrap;
  }
  .lang-nav {
    position: absolute;
    top: var(--square);
    right: var(--pad);
    margin-top: 0.75rem; /* spacing between band and chips */
  }
  .site-header { padding-top: 3.25rem; } /* clear the floating chips */
}
.lang-nav a, .lang-nav span {
  padding: 0.3em 0.7em;
  font-size: 0.9em;
  text-decoration: none;
  border: 1px solid transparent;
}
.lang-nav [aria-current="page"] {
  border-color: var(--accent);
  font-weight: 500;
  color: var(--ink-strong);
}
.lang-nav a { border-color: var(--rule); }
.lang-nav a:hover { border-color: var(--accent); color: var(--ink-strong); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; }
  .hero .portrait-col { margin-top: 7.25rem; } /* top-aligned with the intro paragraph */
}

/* Portrait with contact links to its right — at every viewport width */
.portrait-col {
  display: flex;
  align-items: flex-end;
  gap: clamp(0.9rem, 3vw, 1.6rem);
}

.roles { font-size: 1.05em; margin: 0 0 0.2em; max-width: none; }
.roles .lighter { color: var(--muted); }
.roles .lightest { color: var(--faint); }
.location { color: var(--muted); margin: 0 0 1.2em; }

.portrait-wrap { position: relative; flex: 0 1 14rem; min-width: 7.5rem; }

/* The signature rotated square: 1° per professional year → −28°.
   Fixed in the left margin; at scroll top it sits above the first headline.
   Only shown when the viewport leaves a real gutter next to the content column. */
body::after {
  content: "";
  display: none;
  position: fixed;
  top: 36rem; /* at scroll top: below the intro paragraph, above "What I offer" */
  left: calc((100vw - 72rem) / 2 - 1.5em);
  width: var(--square);
  height: var(--square);
  background: var(--accent);
  transform: rotate(-28deg);
  z-index: -1;
}
@media (min-width: 1250px) {
  body::after { display: block; }
}
.portrait {
  display: block;
  border: 3px solid var(--accent); /* same weight as the offer/rate top borders */
  width: 100%;
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}
.contact-list li { margin-bottom: 0.15em; }

/* ---------- Inline dot-separated lists ---------- */
.inline-list {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  max-width: 70ch;
}
.inline-list li { display: inline; }
.inline-list li + li::before { content: " · "; color: var(--accent-text); }

/* ---------- Services ---------- */
.services {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}
.services li {
  border-top: 3px solid var(--accent);
  background: var(--surface);
  padding: 0.9em 1em 0.7em;
}
.services p { margin: 0; font-size: 0.95em; color: var(--muted); }

/* ---------- Background ladder ---------- */
.background-ladder {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.35em 1.2em;
}
.background-ladder dt {
  font-weight: 500;
  color: var(--accent-text);
  white-space: nowrap;
}
.background-ladder dd { margin: 0; }
@media (max-width: 480px) {
  .background-ladder { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .background-ladder dd { margin-bottom: 0.8em; }
}

/* ---------- Projects ---------- */
.project { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.project .meta { color: var(--muted); font-size: 0.9em; margin: 0 0 0.5em; }
.tech-line { color: var(--faint); font-size: 0.85em; max-width: none; }
.cv-note { color: var(--muted); font-style: italic; }

/* ---------- Rates ---------- */
.rates-cards {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-bottom: 1.2em;
}
.rate-card {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  background: var(--surface);
  padding: 1em 1.2em;
  flex: 1 1 8rem;      /* two cards share one row even on narrow phones */
  max-width: 13rem;
}
.rate-card strong {
  display: block;
  font-size: 1.7em;
  font-weight: 500;
  color: var(--ink-strong);
  line-height: 1.2;
}
.rate-card span { color: var(--muted); }

.cta {
  display: inline-block;
  background: var(--accent);
  color: var(--cta-ink);
  font-weight: 500;
  font-size: 1.05em;
  padding: 0.7em 1.6em;
  margin-top: 0.5em;
  text-decoration: none;
  border: none;
}
a.cta:link, a.cta:visited { color: var(--cta-ink); text-decoration: none; }
a.cta:hover, a.cta:active { color: var(--ink-strong); }

/* ---------- Clients ---------- */
.clients .inline-list { color: var(--muted); font-size: 0.95em; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: clamp(3rem, 8vw, 6rem);
  padding-top: 1.5rem;
  font-size: 0.9em;
  color: var(--muted);
}
.site-footer h2 { font-size: 1em; }
.site-footer h2::before { content: none; }
.footer-imprint ul { list-style: none; margin: 0 0 1em; padding: 0; }
.colophon { color: var(--faint); font-size: 0.9em; }

/* ---------- Motion (opt-in via OS setting) ---------- */
@media (prefers-reduced-motion: no-preference) {
  a, .lang-nav a, .cta {
    transition: color 160ms ease, border-color 160ms ease,
                text-decoration-thickness 160ms ease,
                transform 160ms ease, box-shadow 160ms ease;
  }
  .cta:hover, .cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 158, 0, 0.35);
  }
  @supports (animation-timeline: view()) {
    main > section {
      animation: fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
  @supports (animation-timeline: scroll()) {
    .masthead {
      /* transparent at the top; the band fades in while it sticks */
      background-color: transparent;
      -webkit-backdrop-filter: blur(0);
      backdrop-filter: blur(0);
      animation: masthead-shrink linear both;
      animation-timeline: scroll();
      animation-range: 0px 220px;
    }
    .masthead h1 {
      animation: masthead-h1-shrink linear both;
      animation-timeline: scroll();
      animation-range: 0px 220px;
    }
    .lang-nav {
      animation: lang-nav-shrink linear both;
      animation-timeline: scroll();
      animation-range: 0px 220px;
    }
    /* On mobile there is no room for the chips in the sticky band:
       fade them out as soon as the header sticks — visible only at the top.
       The h1 is already at its final size there, so skip its animation. */
    @media (max-width: 600px) {
      .masthead h1 { animation: none; }
      .lang-nav {
        animation: lang-nav-hide linear both;
        animation-timeline: scroll();
        animation-range: 0px 48px;
      }
    }
  }
}
@keyframes lang-nav-shrink {
  to { font-size: 0.8em; }
}
@keyframes lang-nav-hide {
  /* paint-only fade; visibility flips at the very end (discrete) */
  to { opacity: 0; visibility: hidden; }
}
@keyframes masthead-shrink {
  to {
    padding-block: 0;
    background-color: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 10px rgba(23, 19, 16, 0.14);
  }
}
@keyframes masthead-h1-shrink {
  to {
    font-size: clamp(1.15rem, 0.95rem + 1.1vw, 1.5rem);
    /* line-height = band height = corner square height */
    line-height: var(--square);
  }
}
@keyframes fade-up {
  from { opacity: 0.15; transform: translateY(1.2rem); }
  to   { opacity: 1;    transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Print ---------- */
@media print {
  body { background: #fff; color: #000; }
  .corner-square, .lang-nav, .skip-link { display: none; }
}