/* ════════════════════════════════════════
   🖼 IMAGE PATHS — CMD+F → IMAGE PATHS
   ════════════════════════════════════════ */
:root {
  /* 🖼 About portrait right → about-portrait */
  --img-about-portrait:           url('img/cococrema-magdalena-pohlus-portrait.jpg');
  /* 🖼 Closing CTA Desktop → about-closing-full-width */
  --img-about-closing-full-width: url('img/cococrema-website-und-branding-studio-anfrage-senden-image.jpg');
  /* 🖼 Closing CTA Mobile → about-closing-mobile-img */
  --img-about-closing-mobile-img: url('img/cococrema-website-und-branding-studio-anfrage-senden-image-mobile.jpg');
}

/* ════════════════════════════════════════
   DESIGN TOKENS
   ════════════════════════════════════════ */
:root {
  --font-display:           'Cormorant Garamond', Georgia, serif;
  --font-body:              'DM Sans', Helvetica, sans-serif;
  --size-hero:              clamp(2.8rem, 4.5vw, 4.8rem);
  --size-headline:          clamp(1.9rem, 3vw, 3rem);
  --size-subline:           clamp(1.2rem, 2vw, 1.7rem);
  --size-body:              1.3rem;
  --size-small:             1.1rem;
  --size-eyebrow:           1.0rem;
  --size-label:             0.88rem;
  --size-nav-logo:          1.5rem;
  --size-nav-link:          0.95rem;
  --size-nav-meta:          0.8rem;
  --size-footer:            0.72rem;
  --weight-light:           300;
  --weight-regular:         400;
  --leading-tight:          1.08;
  --leading-normal:         1.78;
  --tracking-wide:          0.22em;
  --tracking-mid:           0.15em;
  --tracking-narrow:        0.08em;

  --space-section:          7rem;
  --space-section-mobile:   4rem;
  --space-h:                4rem;
  --space-h-mobile:         1.5rem;
  --max-width:              1100px;
  --border-line:            0.5px solid rgba(28,26,22,0.1);
}

/* Override eyebrow: about uses simpler style without accent line */
.text-eyebrow {
  color: var(--color-ink-faint);
  display: block;
  gap: 0;
  margin-bottom: 1.2rem;
}
.text-eyebrow::before { display: none; }

/* ════════════════════════════════════════
   ABOUT MAIN SECTION
   ════════════════════════════════════════ */
.section-about-main {
  padding: var(--space-section) var(--space-h);
  max-width: var(--max-width);
  margin: 0 auto;
}
.section-about-main::after {
  content: '';
  display: table;
  clear: both;
}
.about-left {}
.about-right {
  float: right;
  width: 420px;
  margin-left: 5rem;
}
.about-eyebrow { margin-bottom: 1.5rem; }
.about-divider { margin-bottom: 2.5rem; }
.about-headline { margin-bottom: 2.5rem; }
.about-body { margin-bottom: 1.4rem; }

.about-schnittstelle {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-normal);
  color: var(--color-accent);
  margin-bottom: 1.4rem;
}

.about-closing-statement {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.65;
  color: var(--color-accent);
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: var(--border-line);
}

.about-portrait-frame {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-image: var(--img-about-portrait);
  background-size: cover;
  background-position: center top;
  background-color: var(--color-cream-mid);
  margin-top: 110px;
}

.about-portrait-caption { margin-top: 1.2rem; }
.about-portrait-name {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--size-footer);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
  display: block;
  margin-bottom: 0.2rem;
}
.about-portrait-role {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--color-ink-faint);
  display: block;
  margin-bottom: 50px;
}

/* ════════════════════════════════════════
   CLOSING CTA — FULL BLEED
   🖼 CMD+F → about-closing-full-width
   ════════════════════════════════════════ */
.section-about-closing {
  border-top: var(--border-line);
  width: 100%;
  aspect-ratio: 16/9;
  background-image: var(--img-about-closing-full-width);
  background-size: cover;
  background-position: center;
  background-color: var(--color-cream-mid);
  display: flex;
  align-items: stretch;
  position: relative;
}
.section-about-closing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(245,240,232,0.48) 0%,
    rgba(245,240,232,0.44) 35%,
    rgba(245,240,232,0) 55%,
    rgba(245,240,232,0) 100%
  );
  z-index: 1;
}
.about-closing-text {
  width: 48%;
  min-width: 340px;
  padding: 5rem var(--space-h);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-closing-mobile-img { display: none; }

.closing-eyebrow {
  font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}
.closing-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 0.5px;
  background: var(--color-accent);
}
.closing-headline {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(2.2rem, 3.5vw, 3.5rem);
  line-height: var(--leading-tight);
  color: var(--color-ink);
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}
.closing-headline em { font-style: italic; color: var(--color-accent); }
.closing-body {
  font-size: var(--size-body);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  margin-bottom: 2.5rem;
}
.closing-cta-group {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.closing-tagline {
  margin-top: 2.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-ink-faint);
  letter-spacing: 0.04em;
}
.closing-tagline em { color: var(--color-accent); font-style: normal; }

/* ════════════════════════════════════════
   MOBILE — Page-specific
   ════════════════════════════════════════ */
@media (max-width: 1100px) {
  .section-about-main {
    display: flex;
    flex-direction: column;
    padding: 1.2rem var(--space-h-mobile) var(--space-section-mobile);
  }
  .about-right {
    float: none;
    width: 100%;
    margin-left: 0;
  }
  .about-portrait-frame {
    aspect-ratio: 4/5;
    margin-top: 0;
  }

  .section-about-closing {
    background-image: none;
    background-color: var(--color-cream-base);
    flex-direction: column;
    align-items: stretch;
    aspect-ratio: auto;
  }
  .section-about-closing::before { display: none; }
  .about-closing-mobile-img {
    display: block;
    width: 100%;
    aspect-ratio: 5/4;
    background-image: var(--img-about-closing-mobile-img);
    background-size: cover;
    background-position: center;
    background-color: var(--color-cream-mid);
  }
  .about-closing-text {
    width: 100%;
    min-width: unset;
    padding: var(--space-section-mobile) var(--space-h-mobile);
  }
}