/* Design tokens */
:root {
  --color-bg: #000000;
  --color-surface: #0d0d0d;
  --color-text: #ffffff;
  --color-text-muted: #b3b3b3;
  --color-border: #333333;

  --color-accent: #c62e20;
  --color-accent-600: #a8271b;
  --shadow-accent-rgb: 198,46,32;
  --color-primary: var(--color-accent);

  --color-overlay: rgba(0,0,0,.4);
  --color-overlay-strong: rgba(0,0,0,.85);
  --color-focus: #c62e20;

  --font-primary: 'Montserrat', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-display: 'Noto Serif Display', Georgia, 'Times New Roman', Times, serif;
  --font-script: 'Pinyon Script', cursive;

  /* Section focal points */
  --hero-focal: center; /* Hero background focal point */
  --clone-focal: center; /* About section image focal point (e.g., '50% 40%') */
  --portfolio-focal: center; /* Portfolio section background focal point */
}

/* Basic reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--color-text);
  background: var(--color-bg);
  scroll-snap-type: y mandatory; /* slide per screen */
  overscroll-behavior-y: contain;
}

/* Disable snap behavior on Impressum plain-text page */
body.impressum { scroll-snap-type: none; }

/* Mobile: disable snap to allow free scroll and ensure buttons are reachable */
@media (max-width: 860px) {
  body { scroll-snap-type: none; }
}

/* Back button for Impressum: placed above text block, centered column */
.impressum-back {
  position: static;
  display: inline-flex;
  margin: 96px auto 12px; /* top space then a small gap below */
  left: auto; top: auto;
  z-index: 10;
  font-size: 18px;
  padding: 14px 20px;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(0,0,0,0.35);
}

/* Readable layout for plain text block */
body.impressum pre {
  white-space: pre-wrap;
  max-width: 840px;
  margin: 0 auto 40px; /* sits directly under the button */
  padding: 0 20px;
}

/* Primary navigation */
.site-nav {
  position: fixed;
  top: 34px;
  right: clamp(96px, 14vw, 240px);
  left: auto;
  transform: none;
  display: flex;
  gap: 20px;
  padding: 10px 16px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  z-index: 4;
  backdrop-filter: blur(4px);
}
.site-nav a { color: var(--color-text); text-decoration: none; font-weight: 600; letter-spacing: 0.02em; font-size: 18px; }
.site-nav a.active { color: var(--color-accent); }
.site-nav a:hover { color: var(--color-accent); }
.site-nav a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }

/* Hero wrapper uses the provided screenshot as background */
.hero {
  position: relative;
  min-height: 100vh;
  /* New hero background with WebP + JPEG fallback */
  background-image: url('assets/image/hero-bg-1-jpeg.jpg'); /* basic fallback */
  background-image: image-set(
    url('assets/image/hero-bg-1-webp.webp') type('image/webp') 1x,
    url('assets/image/hero-bg-1-jpeg.jpg') type('image/jpeg') 1x
  );
  background-size: cover;
  background-position: var(--hero-focal, center);
  display: flex;
  align-items: center; /* vertical center */
  justify-content: flex-start; /* left side */
}

/* Background slideshow layers (crossfade) */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: var(--hero-focal, center);
  background-repeat: no-repeat;
  z-index: 0; /* sits below .overlay */
  opacity: 0;
  transition: opacity 800ms ease;
}
/* Allow legacy fallback by setting a JPEG url first, then overriding with image-set */
.hero::before { background-image: var(--hero-bg-a-jpg, none); background-image: var(--hero-bg-a, none); }
.hero::after  { background-image: var(--hero-bg-b-jpg, none); background-image: var(--hero-bg-b, none); }

/* Active layer visibility toggles */
.hero.is-a::before { opacity: 1; }
.hero.is-a::after  { opacity: 0; }
.hero.is-b::before { opacity: 0; }
.hero.is-b::after  { opacity: 1; }

/* Snap each full-screen section */
.slide { scroll-snap-align: start; scroll-snap-stop: always; }

.hero .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-overlay-strong) 0%, var(--color-overlay-strong) 38%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.35) 100%);
}

.content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  row-gap: 22px;
  align-content: start;
  min-height: auto; /* allow vertical centering via parent */
  max-width: 842px;
  margin-left: clamp(32px, 8vw, 140px);
  padding: 72px 32px 32px 64px;
}

/* Subtle card treatment for content */
.card {
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}


.eyebrow {
  margin-top: 24px;
  font-size: 18px;
  letter-spacing: 0.35em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.title {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(34px, 5vw, 56px);
  color: var(--color-text);
  font-family: var(--font-display);
}
.title .break { display: block; }

.actions { margin-top: 8px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 12px 26px;
  background: var(--color-accent);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-family: var(--font-primary);
  font-weight: 600;
  letter-spacing: 0.06em;
  box-shadow: 0 10px 20px rgba(var(--shadow-accent-rgb),0.25);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.btn:hover { background: var(--color-accent-600); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(var(--shadow-accent-rgb),0.32); }
.btn:active { transform: translateY(0); }

/* Outline button variant */
.btn-outline {
  background: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  box-shadow: none;
  padding: 10px 24px; /* compensate for 2px border */
}
.btn-outline:hover { background: rgba(var(--shadow-accent-rgb),0.08); box-shadow: none; }
.btn-outline:active { background: rgba(var(--shadow-accent-rgb),0.12); }

.social { display: flex; gap: 14px; margin-top: 32px; align-items: center; }
.soc {
  width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #000; /* black circle */
  color: #ffffff; /* white icon */
  text-decoration: none;
  transition: transform 160ms ease, opacity 160ms ease;
}
.soc:hover { transform: translateY(-1px); opacity: 0.9; color: var(--color-accent); }
.soc svg { width: 18px; height: 18px; line-height: 1; display: block; }

/* unified social icon styling; no brand-specific overrides */

.legal {
  margin-top: auto;
  color: var(--color-text-muted);
  font-size: 13px;
}

.legal a {
  color: inherit;
  text-decoration: underline;
}
.legal a:hover { color: var(--color-text); }

/* Place copyright footer at bottom center, separate from content */
.site-footer {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
  z-index: 3;
  /* Strong text glow for readability on light areas */
  text-shadow:
    0 0 2px rgba(0,0,0,0.95),
    0 2px 8px rgba(0,0,0,0.85),
    0 0 14px rgba(0,0,0,0.8);
}
.site-footer a { color: inherit; text-decoration: underline; text-shadow: inherit; }
.site-footer a:hover { color: var(--color-text); }
/* Ensure two lines on small screens: split into two spans */
.site-footer .foot-left, .site-footer .foot-right { white-space: nowrap; }
@media (max-width: 420px) {
  .site-footer { padding: 0 14px; line-height: 1.35; }
  .site-footer .foot-left, .site-footer .foot-right { display: block; }
  .site-footer .foot-right { margin-top: 4px; }
}

/* Hide old in-flow legal footer inside content area */
.content .legal { display: none; }

/* Back-to-top (desktop only) */
.to-top {
  position: fixed;
  right: clamp(28px, 6vw, 80px);
  bottom: 28px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.38);
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 4;
  backdrop-filter: blur(4px);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 200ms ease, transform 200ms ease, background 160ms ease, border-color 160ms ease;
}
.to-top.is-hidden { opacity: 0; transform: translateY(8px); visibility: hidden; pointer-events: none; }
.to-top:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.7); }
.to-top:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.to-top svg { width: 20px; height: 20px; line-height: 1; display: block; }

@media (min-width: 861px) { .to-top { display: inline-flex; } }

/* Clone slide uses local screenshot as background */
.clone { position: relative; min-height: 100vh; display: grid; }
.clone-wrap {
  display: grid;
  grid-template-columns: minmax(280px, 42%) 1fr;
  min-height: 100vh;
}
.clone-media {
  /* Set by JS when near viewport to delay initial load */
  background-size: cover;
  background-position: var(--clone-focal, center);
}
.clone-content {
  align-self: center;
  margin: 0 clamp(32px, 6vw, 80px);
  padding: clamp(24px, 4vw, 40px);
  max-width: 842px;
}
.clone-title {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  font-size: clamp(28px, 4.8vw, 56px);
  color: var(--color-text);
}
.br-desktop::before { content: none; }
@media (min-width: 861px) {
  .br-desktop::before { content: "\A"; white-space: pre; }
}
.clone-title em {
  font-style: italic;
  font-family: var(--font-display);
  color: var(--color-accent);
  font-weight: 400; /* thinner than heading */
}
.clone-kicker {
  margin: 14px 0 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}
.clone-copy { color: var(--color-text-muted); font-size: 14px; line-height: 1.7; max-width: 56ch; margin: 0 0 32px; }

/* Button variant removed (no longer used) */

/* Responsive tweaks */
@media (max-width: 860px) {
  .content { padding: 48px 24px; max-width: 748px; }
  .overlay { background: rgba(0,0,0,0.8); }
  .clone-wrap { grid-template-columns: 1fr; }
  .clone-media { min-height: 42vh; }
  .clone-content { margin: 0 clamp(20px, 6vw, 40px) clamp(28px, 6vw, 56px); }
}

@media (max-width: 520px) {
  .eyebrow { letter-spacing: 0.2em; font-size: 14px; }
  .soc { width: 36px; height: 36px; }
  .soc i { font-size: 16px; }
}

/* brand-specific social styles removed */

/* Typewriter reveal (progressive enhancement) */
.js .typewriter { position: relative; display: inline-block; white-space: nowrap; }
.js .typewriter .char { display: inline-block; opacity: 0; transform: translateY(6px); }
.js .typewriter.play .char { animation: char-in 520ms cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(var(--i) * 110ms); }
@keyframes char-in {
  0% { opacity: 0; transform: translateY(6px) scale(0.98); }
  70% { opacity: 1; transform: translateY(0) scale(1.02); }
  100% { opacity: 1; transform: none; }
}

/* Calendly: helper close button (overlayed, large, high-contrast) */
.cal-close-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.38);
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999; /* above Calendly overlay */
  backdrop-filter: blur(4px);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.cal-close-btn.is-visible { display: inline-flex; }
.cal-close-btn:hover { transform: scale(1.06); border-color: rgba(255,255,255,0.7); }
.cal-close-btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.cal-close-btn svg { width: 22px; height: 22px; }

/* Portfolio slide – full-bleed background with overlay and left-aligned content */
.portfolio { position: relative; min-height: 100vh; }
.portfolio-wrap { position: relative; min-height: 100vh; display: flex; align-items: center; }
.portfolio-media { position: absolute; inset: 0; background-image: image-set(
    url('assets/image/iconic-portfolio-webp2400x1350.webp') type('image/webp') 1x,
    url('assets/image/iconic-portfolio-jpeg2400x1350.jpg') type('image/jpeg') 1x
  ); background-size: cover; background-position: var(--portfolio-focal, center); filter: grayscale(100%); }
.portfolio-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.portfolio-content { position: relative; z-index: 1; margin: 0 auto; max-width: 840px; text-align: center; padding: 0 clamp(20px, 6vw, 40px); }
.portfolio-title { margin: 0 0 10px; font-family: var(--font-display); font-weight: 600; line-height: 1.06; font-size: clamp(42px, 6.6vw, 96px); color: var(--color-text); text-transform: uppercase; letter-spacing: 0.04em; }
.portfolio-subtitle { margin: 0 0 16px; font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--color-text); font-size: clamp(28px, 4.8vw, 64px); }
.portfolio-copy { color: var(--color-text-muted); font-size: 13px; line-height: 1.6; max-width: 56ch; margin: 0 auto 26px; }

@media (max-width: 860px) {
  .portfolio-content { padding: 0 clamp(16px, 5vw, 32px); }
  .portfolio-title { font-size: clamp(32px, 9vw, 56px); }
  .portfolio-subtitle { font-size: clamp(22px, 7vw, 40px); }
}