/* ============================================================
   Uli Brodersen — Brand / Design System
   Warm vintage "Visions-era" palette. Shared across One-Pager
   (EN) and Workshop Landingpage (DE).
   ============================================================ */

@import url('fonts.css'); /* Self-hosted (DSGVO) — ehemals Google Fonts */

:root {
  /* ---- Visions palette — teal-led, warm accents (sampled from artwork) ---- */
  --cream:        #F4E7C9;  /* primary background — warm cream */
  --cream-deep:   #ECDBB6;  /* card / alt surface */
  --cream-dim:    #E6D3AC;
  --cream-stripe: #F0D8B0;  /* lightest warm cream from artwork */

  --teal-deep:    #123E48;  /* darkest petrol — deep sections / scrims */
  --teal:         #1A6D7A;  /* THE signature blue */
  --teal-mid:     #4E888D;  /* lighter petrol */
  --teal-soft:    #7DA9AB;

  --coral:        #D5434F;  /* coral red — primary CTA / accent */
  --coral-deep:   #B5333E;
  --orange:       #EA992B;  /* golden orange — secondary accent */
  --orange-soft:  #F0B25A;
  --peach:        #FBA69B;  /* peach — soft highlight */

  /* legacy aliases (kept so existing classes resolve) */
  --amber:        #EA992B;
  --amber-soft:   #F0B25A;
  --terracotta:   #D5434F;
  --rust:         #B5333E;
  --rust-deep:    #8F2A33;

  --ink:          #18353C;  /* deep teal-ink — primary text on cream */
  --ink-80:       rgba(24, 53, 60, 0.82);
  --ink-60:       rgba(24, 53, 60, 0.60);
  --ink-40:       rgba(24, 53, 60, 0.40);
  --sand:         #C2A87F;  /* warm taupe — hairlines */
  --sand-line:    rgba(24, 53, 60, 0.16);
  --on-dark:      #F4E7C9;  /* cream text on teal fields */
  --on-dark-70:   rgba(244, 231, 201, 0.74);
  --on-dark-50:   rgba(244, 231, 201, 0.52);

  /* ---- Type ---- */
  --serif:  'Bodoni Moda', 'Times New Roman', serif;
  --sans:   'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* ---- Spacing scale ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Layout ---- */
  --maxw: 1200px;
  --maxw-narrow: 760px;
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  /* Default theme = teal-dominant (petrol). Cream is an opt-in surface. */
  --fg: var(--on-dark);
  --fg-muted: var(--on-dark-70);
  --fg-subtle: var(--on-dark-50);
  --hair: rgba(244,231,201,0.20);
  --eyebrow: var(--peach);
  background: var(--teal);
  color: var(--on-dark);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(16px, 1.05vw + 12px, 19px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
html, body { overflow-x: hidden; max-width: 100%; }
:where(section, header)[id] { scroll-margin-top: 76px; }

/* ============================================================
   Typography primitives
   ============================================================ */
.display, .h1, .h2, .h3 { font-family: var(--serif); font-weight: 700; line-height: 1.02; letter-spacing: -0.01em; margin: 0; }
.display { font-size: clamp(3.2rem, 9vw, 7.5rem); line-height: 0.96; }
.h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; }
.h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.1; }
.serif-italic { font-family: var(--serif); font-style: italic; font-weight: 500; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin: 0;
}
.eyebrow--dark { color: var(--amber-soft); }

.lead { font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.6; color: var(--fg-muted); }
.muted { color: var(--fg-subtle); }

/* ---- Section themes: opt into a surface; sets local fg/hair/eyebrow ---- */
.band-teal      { background: var(--teal);      color: var(--on-dark); --fg: var(--on-dark); --fg-muted: var(--on-dark-70); --fg-subtle: var(--on-dark-50); --hair: rgba(244,231,201,0.20); --eyebrow: var(--peach); }
.band-teal-deep { background: var(--teal-deep); color: var(--on-dark); --fg: var(--on-dark); --fg-muted: var(--on-dark-70); --fg-subtle: var(--on-dark-50); --hair: rgba(244,231,201,0.18); --eyebrow: var(--orange-soft); }
.band-cream     { background: var(--cream);     color: var(--ink);     --fg: var(--ink); --fg-muted: var(--ink-60); --fg-subtle: var(--ink-40); --hair: var(--sand-line); --eyebrow: var(--coral); }

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }
.wrap-narrow { max-width: var(--maxw-narrow); }
.section { padding-block: clamp(56px, 9vw, 128px); }

/* ============================================================
   Photo treatment — warm grade + film grain
   Apply to a wrapper around <img>. Cover/logos do NOT use this.
   ============================================================ */
.photo { position: relative; overflow: hidden; isolation: isolate; }
.photo > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.05) contrast(1.04) brightness(0.98)
          sepia(calc(var(--photo-warm, 0) * 0.5))
          hue-rotate(calc(var(--photo-warm, 0) * -8deg))
          saturate(calc(1 + var(--photo-warm, 0) * 0.25));
}
/* split-tone color grade: teal shadows + warm highlights (cinematic) */
.photo::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg, rgba(234,153,43,0.12), rgba(18,62,72,0.34)),
    radial-gradient(120% 80% at 32% 22%, rgba(244,231,201,0.10), transparent 62%);
  mix-blend-mode: multiply; opacity: 0.9;
}
/* film grain */
.photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: var(--grain-opacity, 0.13); mix-blend-mode: overlay;
}
.photo--soft::before { opacity: 0.55; }
.photo--strong::after { opacity: 0.18; }

/* page-wide ambient grain (optional, very subtle) */
.grain-page::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px; opacity: 0.04; mix-blend-mode: multiply;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.02em; line-height: 1;
  padding: 1.05em 1.6em; border-radius: 2px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: all 0.18s var(--ease);
  white-space: nowrap;
}
.btn--primary { background: var(--coral); color: var(--on-dark); }
.btn--primary:hover { background: var(--coral-deep); transform: translateY(-1px); }
.btn--teal { background: var(--teal); color: var(--on-dark); }
.btn--teal:hover { background: var(--teal-deep); transform: translateY(-1px); }
.btn--solid-ink { background: var(--teal-deep); color: var(--cream); }
.btn--solid-ink:hover { background: var(--ink); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--cream); }
.btn--ghost-light { background: transparent; color: var(--on-dark); border-color: rgba(244,231,201,0.5); }
.btn--ghost-light:hover { background: var(--on-dark); color: var(--teal-deep); border-color: var(--on-dark); }
.btn--lg { font-size: 1.05rem; padding: 1.2em 2em; }

/* link with animated underline */
.link-u { position: relative; text-decoration: none; color: var(--fg); font-weight: 600; }
.link-u::after { content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.link-u:hover { color: var(--peach); }
.link-u:hover::after { transform: scaleX(1); }

/* ============================================================
   Hairline divider
   ============================================================ */
.rule { border: 0; border-top: 1px solid var(--hair); margin: 0; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
}