/* ==========================================================================
   SUPERLOOM – Components
   All UI elements. Self-contained, referenced by class only.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Logo
   "super" in Fraunces, "loom" in Departure Mono.
   Size: --size-md (1.333rem), line-height 115%.
-------------------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  text-decoration: none;
  color: var(--color-text);
  line-height: var(--leading-115);
}

.logo:hover {
  text-decoration: none;
}

.logo__super {
  font-family: var(--font-serif);
  font-size: var(--size-md);
  font-weight: 300;
  font-variation-settings: var(--fraunces-axes);
  font-optical-sizing: auto;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

.logo__loom {
  font-family: var(--font-mono);
  font-size: var(--size-md);
  font-weight: 400;
  /* Optical correction: mono reads slightly large, pull back slightly */
  font-size: calc(var(--size-md) * 0.95);
  line-height: inherit;
}


/* --------------------------------------------------------------------------
   Site tagline – "future lab", top right
   Same size as logo, Fraunces only.
-------------------------------------------------------------------------- */

.site-tagline {
  font-family: var(--font-serif);
  font-size: var(--size-md);
  font-weight: 300;
  font-variation-settings: var(--fraunces-axes);
  font-optical-sizing: auto;
  line-height: var(--leading-115);
  color: var(--color-text);
}


/* --------------------------------------------------------------------------
   Headline – h1 / subline
   Fraunces 2.763rem, 100% line-height.
   "&" rendered in Departure Mono via .mono span.
   "n" in "intersections" stays in Fraunces (too fragile mid-word).
-------------------------------------------------------------------------- */

.text-headline {
  font-family: var(--font-serif);
  font-size: var(--size-2xl);       /* 2.763rem */
  font-weight: 300;
  font-variation-settings: var(--fraunces-axes);
  font-optical-sizing: auto;
  font-feature-settings: 'kern' 1, 'liga' 1;
  line-height: var(--leading-100);  /* 100% */
  color: var(--color-text);
}

/* "&" and other mono inserts within headline */
.text-headline .mono {
  font-size: var(--size-2xl);
  line-height: var(--leading-100);
}


/* --------------------------------------------------------------------------
   Body copy
   Inclusive Sans 300, 1rem, 125% line-height.
-------------------------------------------------------------------------- */

.text-copy {
  font-family: var(--font-sans);
  font-size: var(--size-sm);        /* 1rem */
  font-weight: 300;
  font-feature-settings: 'kern' 1;
  font-kerning: normal;
  line-height: var(--leading-125);  /* 125% */
  color: var(--color-text);
}


/* --------------------------------------------------------------------------
   Currently card
   Card background, label top-right (mono), text in Fraunces.
   Mobile: full-width, card content bündig mit page content.
   Tablet+: card gets same margin as page content (handled by .page padding).
-------------------------------------------------------------------------- */

.currently-card {
  background-color: var(--color-card);
  /* Mobile: negative margin to extend to page edges */
  margin-inline: calc(-1 * var(--margin-page));
  padding-inline: var(--margin-page);
  padding-block: var(--size-md) var(--size-lg);  /* top 1.333, bottom 1.777 */
  display: flex;
  flex-direction: column;
  gap: var(--size-lg);              /* 1.777rem between label and text */
}

/* Tablet+: card stays within page margin, no negative offset */
@media (min-width: 600px) {
  .currently-card {
    margin-inline: 0;
    padding-inline: var(--size-xl); /* 2.369rem horizontal padding */
  }
}

/* "Currently" label – mono, 1rem, left on mobile */
.currently-card__label {
  font-family: var(--font-mono);
  font-size: var(--size-sm);        /* 1rem */
  font-weight: 400;
  line-height: var(--leading-100);
  color: var(--color-text);
  align-self: flex-start;           /* left on mobile */
}

/* Tablet+: label right */
@media (min-width: 600px) {
  .currently-card__label {
    align-self: flex-end;
  }
}

/* Card body text – Fraunces 1.777rem, 110% */
.currently-card__text {
  font-family: var(--font-serif);
  font-size: var(--size-lg);        /* 1.777rem */
  font-weight: 300;
  font-variation-settings: var(--fraunces-axes);
  font-optical-sizing: auto;
  font-feature-settings: 'kern' 1, 'liga' 1;
  line-height: var(--leading-110);  /* 110% */
  color: var(--color-text);
}


/* --------------------------------------------------------------------------
   Contact section
   Label: Inclusive Sans 300, 1rem
   Email: Fraunces 1.333rem, "@" in Departure Mono
-------------------------------------------------------------------------- */

.contact-label {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: 300;
  line-height: var(--leading-125);
  color: var(--color-text);
}

.contact-email {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: var(--size-md);        /* 1.333rem */
  font-weight: 300;
  font-variation-settings: var(--fraunces-axes);
  font-optical-sizing: auto;
  font-feature-settings: 'kern' 1, 'liga' 1;
  line-height: var(--leading-115);
  color: var(--color-text);
  text-decoration: none;
}

.contact-email:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "@" within email address – Departure Mono, same size */
.contact-email .mono {
  font-size: var(--size-md);
  line-height: inherit;
}


/* --------------------------------------------------------------------------
   Footer
   All text: Inclusive Sans 300, 1rem.
   Links: #202020, no underline by default, underline on hover.
   Meta text (copyright): --color-meta.
-------------------------------------------------------------------------- */

.footer-link {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: 300;
  color: var(--color-text);
  text-decoration: none;
  line-height: var(--leading-125);
}

.footer-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Active page indicator in footer nav */
.footer-link[aria-current="page"] {
  font-weight: 600;
}

.footer-separator {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  color: var(--color-meta);
  user-select: none;
  line-height: var(--leading-125);
}

.footer-copyright {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: 300;
  color: var(--color-meta);
  line-height: var(--leading-125);
}


/* --------------------------------------------------------------------------
   Subpage title (Impressum, Colophon etc.)
   Fraunces, --size-2xl, 100% line-height – same as main headline.
-------------------------------------------------------------------------- */

.subpage-title {
  font-family: var(--font-serif);
  font-size: var(--size-2xl);
  font-weight: 300;
  font-variation-settings: var(--fraunces-axes);
  font-optical-sizing: auto;
  line-height: var(--leading-100);
  color: var(--color-text);
}

/* Subpage h2 – size-md, semibold */
.subpage-content h2 {
  font-family: var(--font-sans);
  font-size: var(--size-lg);        /* 1.333rem */
  font-weight: 600;
  line-height: var(--leading-120);
  color: var(--color-text);
}

/* Subpage h3 – size-sm, semibold */
.subpage-content h3 {
  font-family: var(--font-sans);
  font-size: var(--size-md);        /* 1rem */
  font-weight: 600;
  line-height: var(--leading-125);
  color: var(--color-text);
}

/* Subpage h4 – size-sm, semibold */
.subpage-content h4 {
  font-family: var(--font-sans);
  font-size: var(--size-sm);        /* 1rem */
  font-weight: 600;
  line-height: var(--leading-125);
  color: var(--color-text);
}

/* Subpage body text */
.subpage-content p {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: 300;
  line-height: var(--leading-125);
  color: var(--color-text);
}

/* Colophon intro – italic placeholder state */
.colophon-intro {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: 300;
  line-height: var(--leading-125);
  color: var(--color-meta);
}


/* -------------------------------------------
   Modular Scroll Motion - Play Mode
   - Basis-Motion für alle Elemente
   - Optionale Klassen: .soft, .weight, .translate-y
------------------------------------------- */
.play-motion-line {
  transition: transform 0.2s ease-out;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Utility: no-wrap – prevents line break mid-element
   e.g. "intersections" with mixed fonts in headline
-------------------------------------------------------------------------- */

.no-wrap {
  white-space: nowrap;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .play-motion-line {
    transform: none !important;
    transition: none !important;
  }
}