/* ─────────────────────────────────────────────────────────────
   GLOW GIVER · Stylesheet
   Restored slowly, kept honestly.
   Hamburg · Bremerhaven · Est. MMXXII
   
   Structure:
   01. Design tokens (colors, type, space)
   02. Reset & base
   03. Typography
   04. Layout (container, sections)
   05. Header & navigation
   06. Footer
   07. Components (eyebrow, card, hairline, etc.)
   08. Page-specific (homepage folds, exposé, etc.)
   09. Bilingual handling (detail pages)
   10. Responsive behavior
   11. Accessibility & motion
   ───────────────────────────────────────────────────────────── */


/* ── 01 · DESIGN TOKENS ───────────────────────────────────── */

:root {
  /* Color — the 70 / 20 / 10 system */
  --bone:        #F3ECDD;   /* the page itself, ~70% */
  --linen:       #FAF5EA;   /* quiet panels */
  --paper:       #EDE5D2;   /* faintly different from bone */
  --ink:         #1A1714;   /* primary text */
  --ink-mid:     #2A2520;   /* footer surface, secondary text */
  --ember:       #D9A661;   /* the glow — sparingly */
  --ember-deep:  #C4913A;
  --clay:        #A8674F;   /* editorial italic accents */
  --oak:         #8E6A40;
  --smoke:       #8A8377;   /* labels, captions */
  --smlight:     #C4BDB4;   /* on-ink secondary */
  --moss:        #6E7253;   /* status: available */

  /* Hairlines */
  --line:        rgba(26, 23, 20, 0.12);
  --line-soft:   rgba(26, 23, 20, 0.06);
  --line-bone:   rgba(243, 236, 221, 0.12);  /* hairlines on ink */

  /* Typefaces */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "EB Garamond", Georgia, serif;
  --font-label:   "Jost", system-ui, -apple-system, sans-serif;

  /* Spacing — section rhythm */
  --space-section:       128px;
  --space-section-tab:   80px;
  --space-section-phone: 56px;

  /* Layout */
  --container:           1180px;
  --container-text:      720px;   /* ~60ch */
  --page-pad-l:          56px;
  --page-pad-t:          40px;
  --page-pad-p:          24px;

  /* Motion */
  --ease:     cubic-bezier(0.4, 0.0, 0.2, 1);
  --t-image:  380ms;
}


/* ── 02 · RESET & BASE ────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--bone);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  hanging-punctuation: first allow-end last;
}

body {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.62;
  background: var(--bone);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 220ms var(--ease);
}

a:hover {
  opacity: 0.65;
}

a.underline-on-hover {
  border-bottom: 1px solid transparent;
  transition: border-color 220ms var(--ease), opacity 220ms var(--ease);
}

a.underline-on-hover:hover {
  border-bottom-color: var(--ink);
  opacity: 1;
}

::selection {
  background: var(--ember);
  color: var(--ink);
}

::-moz-selection {
  background: var(--ember);
  color: var(--ink);
}


/* ── 03 · TYPOGRAPHY ──────────────────────────────────────── */

/* Cormorant — atmospheric type */

.t-hero {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 14ch;
  text-wrap: balance;
}

.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.008em;
  color: var(--ink);
  max-width: 18ch;
  text-wrap: balance;
}

.t-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.006em;
  color: var(--ink);
  max-width: 20ch;
  text-wrap: balance;
}

.t-subhead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.18;
  color: var(--ink);
  max-width: 28ch;
}

.t-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.2;
  color: var(--ink);
}

.t-pull {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.32;
  color: var(--ink-mid);
  max-width: 38ch;
}

.t-numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1;
  color: var(--ember);
  display: inline-block;
}

/* Italic accents inside headlines — Clay color */
.t-hero em,
.t-display em,
.t-headline em,
.t-subhead em,
.t-title em,
.t-tagline em {
  font-style: italic;
  color: var(--clay);
}

/* EB Garamond — reading type */

.t-lead {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--ink-mid);
  max-width: 56ch;
  text-wrap: pretty;
}

.t-body {
  font-family: var(--font-body);
  font-size: clamp(16.5px, 1.3vw, 17.5px);
  line-height: 1.62;
  color: var(--ink);
  max-width: 60ch;
  text-wrap: pretty;
  hyphens: auto;
}

.t-body em {
  font-style: italic;
}

.t-body p + p {
  margin-top: 1em;
}

.t-small {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.1vw, 15px);
  line-height: 1.58;
  color: var(--ink-mid);
  max-width: 52ch;
}

/* Tagline — italic Ember, used for the brand line */

.t-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.3;
  color: var(--ember);
  text-wrap: balance;
}

/* Jost — structural type */

.t-nav {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
}

.t-eyebrow {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--smoke);
}

.t-meta {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mid);
  font-feature-settings: "tnum" 1;
}

.t-micro {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--smoke);
}

/* The numeral-eyebrow combo — italic Ember numeral + Jost label */

.eyebrow-num {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.eyebrow-num em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.65em;
  color: var(--ember);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}


/* ── 04 · LAYOUT ──────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--page-pad-l);
  padding-right: var(--page-pad-l);
}

.container-text {
  width: 100%;
  max-width: var(--container-text);
  margin: 0 auto;
  padding-left: var(--page-pad-l);
  padding-right: var(--page-pad-l);
}

main {
  min-height: 60vh;
}

section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

section:first-of-type {
  padding-top: 0;
}

/* The hairline divider — the only divider we use */

.hairline {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 0;
}

.hairline-soft {
  border: 0;
  height: 1px;
  background: var(--line-soft);
  margin: 0;
}


/* ── 05 · HEADER & NAVIGATION ─────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bone);
  border-bottom: 1px solid transparent;
  transition:
    transform 380ms var(--ease),
    border-color 380ms var(--ease);
  will-change: transform;
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  padding-bottom: 28px;
  gap: 24px;
}

.site-logo {
  display: block;
  width: 64px;
  flex-shrink: 0;
}

.site-logo svg {
  width: 100%;
  height: auto;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.site-nav a {
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
}

.site-nav a:hover {
  opacity: 0.55;
}

.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: var(--ember);
}

.site-nav .lang-toggle {
  margin-left: 12px;
  padding-left: 28px;
  border-left: 1px solid var(--line);
  color: var(--smoke);
}

.site-nav .lang-toggle .active {
  color: var(--ink);
}

/* Phone: collapse nav into a "menu" word */

.nav-menu-btn {
  display: none;
  background: none;
  border: none;
  padding: 8px 0;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bone);
  z-index: 60;
  padding: 80px 24px 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
}

.nav-overlay.is-open {
  display: flex;
}

.nav-overlay a {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 38px;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.nav-overlay .lang-toggle {
  margin-top: 32px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--smoke);
}

.nav-overlay__close {
  position: absolute;
  top: 28px;
  right: 24px;
  background: none;
  border: none;
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  padding: 8px;
}


/* ── 06 · FOOTER ──────────────────────────────────────────── */

.site-footer {
  background: var(--ink-mid);
  color: var(--bone);
  padding-top: 80px;
  padding-bottom: 32px;
  margin-top: var(--space-section);
}

.site-footer .container {
  max-width: var(--container);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line-bone);
}

.footer-mark {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.20em;
  color: var(--bone);
}

.footer-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ember);
}

.footer-loc {
  font-family: var(--font-label);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--smlight);
  margin-top: 6px;
}

.footer-col h3 {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 16px;
}

.footer-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-list a {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--bone);
}

.footer-list a:hover {
  color: var(--ember);
  opacity: 1;
}

.footer-list .legal {
  color: var(--smlight);
  font-size: 13.5px;
  margin-top: 8px;
}

.footer-contact a {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--bone);
}

.footer-contact .channel {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--smlight);
}

.footer-bar {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
}

.footer-lang a {
  color: var(--smoke);
  margin: 0 6px;
}

.footer-lang a.active {
  color: var(--bone);
}


/* ── 07 · COMPONENTS ──────────────────────────────────────── */

/* Section opener — the recurring eyebrow + headline + lead pattern */

.section-opener {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.section-opener .eyebrow-num {
  margin-bottom: 6px;
}

/* Editorial card — a row with image + text */

.ed-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}

.ed-row.reverse {
  grid-template-columns: 1fr 1.1fr;
}

.ed-row.reverse .ed-row__media {
  order: 2;
}

.ed-row.reverse .ed-row__text {
  order: 1;
}

.ed-row__media img {
  width: 100%;
  height: auto;
  display: block;
}

.ed-row__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Doorway — the three-column row of homepage doorways */

.doorways {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.doorway {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doorway__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.doorway__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease), opacity 380ms var(--ease);
}

.doorway:hover .doorway__media img {
  transform: scale(1.015);
}

.doorway__label {
  margin-top: 4px;
}

.doorway__link {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  margin-top: 8px;
}

/* Hero image — full-bleed at top of homepage and exposé */

.hero {
  margin: 0;
  position: relative;
}

.hero__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.hero--bleed {
  max-width: 100vw;
}

/* Status pill — for apartment cards */

.status {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-block;
}

.status--available {
  color: var(--moss);
}

.status--let,
.status--soon {
  color: var(--smoke);
}

/* Data table — for apartment facts and piece specs */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 15.5px;
}

.data-table tr {
  border-bottom: 1px solid var(--line-soft);
}

.data-table td {
  padding: 11px 0;
  vertical-align: top;
}

.data-table td:first-child {
  width: 40%;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  padding-right: 24px;
}

.data-table td:last-child {
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}

.data-table__title {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 16px;
}

/* Contact strip — appears at the bottom of detail pages */

.contact-strip {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-strip__line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
}

.contact-strip__line a {
  border-bottom: 1px solid var(--line);
  transition: border-color 220ms var(--ease);
}

.contact-strip__line a:hover {
  border-bottom-color: var(--ink);
  opacity: 1;
}


/* ── 08 · PAGE-SPECIFIC ───────────────────────────────────── */

/* Homepage fold 1 — hero */

.home-hero {
  padding-top: 32px;
  padding-bottom: 96px;
}

.home-hero__img {
  margin-bottom: 40px;
}

.home-hero__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 880px;
}

.home-hero__eyebrow {
  margin-bottom: 4px;
}

.home-hero__subline {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-top: 4px;
}

/* Homepage fold 2 — who */

.home-who {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}

.home-who__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-who__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Homepage fold 3 — doorways (uses .doorways above) */

.home-doorways__head {
  margin-bottom: 56px;
}

/* Homepage fold 4 — closing */

.home-close {
  text-align: center;
  padding-top: 96px;
  padding-bottom: 32px;
}

.home-close__img {
  margin-bottom: 48px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.home-close__line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  color: var(--ember);
}


/* ── 09 · BILINGUAL HANDLING (detail pages) ───────────────── */

/* On detail pages, both languages appear; the toggle reveals one at a time.
   By default we show German. Adding .lang-en to <html> reveals English.
   This is a no-JS-required approach via the :root class plus :has() fallback. */

html:not(.lang-en) [lang="en"] {
  display: none;
}

html.lang-en [lang="de"] {
  display: none;
}

/* But on the main pages (not detail pages), each page is single-language —
   that's handled by separate files, not by hiding. */


/* ── 10 · RESPONSIVE BEHAVIOR ─────────────────────────────── */

@media (max-width: 1023px) {
  :root {
    --page-pad-l: var(--page-pad-t);
    --space-section: var(--space-section-tab);
  }

  .ed-row,
  .ed-row.reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ed-row.reverse .ed-row__media {
    order: 1;
  }

  .ed-row.reverse .ed-row__text {
    order: 2;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-mark {
    grid-column: 1 / -1;
    margin-bottom: 16px;
  }

  .home-who {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 639px) {
  :root {
    --page-pad-l: var(--page-pad-p);
    --space-section: var(--space-section-phone);
  }

  body {
    font-size: 16.5px;
  }

  /* Hide desktop nav links, show menu button */
  .site-nav .nav-links,
  .site-nav .lang-toggle {
    display: none;
  }

  .nav-menu-btn {
    display: block;
  }

  .site-header__inner {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .doorways {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 36px;
  }

  .footer-mark {
    grid-column: auto;
  }

  .footer-bar {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .home-hero {
    padding-bottom: 56px;
  }

  .home-close {
    padding-top: 56px;
  }

  .home-close__img {
    margin-bottom: 32px;
  }
}


/* ── 11 · ACCESSIBILITY & MOTION ──────────────────────────── */

/* Visible focus ring — fits the brand */
*:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

/* Hide the focus ring on mouse clicks but keep for keyboard */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .site-header.is-hidden {
    transform: none;
  }
}

/* Image fade-in on scroll-into-view (works with the small JS below) */
.fade-in {
  opacity: 0;
  transition: opacity var(--t-image) var(--ease);
}

.fade-in.is-visible {
  opacity: 1;
}

/* Reduced-motion users see images immediately */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
  }
}


/* ── 12 · FONTS (self-hosted, loaded from /assets/fonts/) ── */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/cormorant-garamond-300.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/cormorant-garamond-300-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond-400.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/eb-garamond-400.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/eb-garamond-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jost-400.woff2") format("woff2");
}