/* Meltem Photography — V8 “Colour becomes memory”
   A grounded hero, viewport-held horizontal story and a floral finale. */

:root {
  --v8-header: 72px;
  --v8-coral: #c85f52;
  --v8-ruby: #7d1e2c;
  --v8-olive: #68725f;
  --v8-cream: #f7f2e9;
}

/* ------------------------------------------------------------------
   Hero: the title card opens, the picture stays free, conversion stays.
   ------------------------------------------------------------------ */

.stage-cta {
  position: absolute;
  z-index: 9;
  bottom: calc(82px + clamp(18px, 2vw, 30px));
  left: clamp(24px, 3.5vw, 58px);
  min-height: 50px;
  padding: 0 19px;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  border: 1px solid rgba(23, 23, 20, .74);
  background: rgba(251, 250, 246, .95);
  box-shadow: 0 14px 34px rgba(23, 23, 20, .13);
  color: var(--v5-carbon);
  font-size: .69rem;
  font-weight: 680;
  letter-spacing: .12em;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateY(12px);
  transition:
    opacity 440ms 280ms ease,
    transform 720ms 220ms var(--v5-ease),
    background-color 180ms ease,
    color 180ms ease;
}

.shadow-stage.has-entered-story .stage-cta {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.stage-cta span {
  transition: transform 220ms var(--v5-ease);
}

.stage-cta:hover,
.stage-cta:focus-visible {
  background: var(--v5-carbon);
  color: var(--v5-sheet);
}

.stage-cta:hover span,
.stage-cta:focus-visible span {
  transform: translate(3px, 3px);
}

/* ------------------------------------------------------------------
   Repeating signature: colour approaches, a shadow settles between it.
   ------------------------------------------------------------------ */

main .section-number {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.signature-cue {
  position: relative;
  width: 44px;
  height: 12px;
  display: inline-block;
  flex: 0 0 44px;
}

.signature-cue i,
.signature-cue b {
  position: absolute;
  display: block;
  transition:
    transform 880ms var(--v5-ease),
    opacity 620ms ease;
}

.signature-cue i {
  top: 1px;
  width: 14px;
  height: 8px;
  border-radius: 100% 0 100% 0;
  opacity: .34;
}

.signature-cue i:first-child {
  left: 0;
  background: var(--v8-ruby);
  transform: translateX(-7px) rotate(25deg);
}

.signature-cue i:nth-child(2) {
  right: 0;
  background: var(--v8-olive);
  transform: translateX(7px) rotate(205deg);
}

.signature-cue b {
  bottom: 0;
  left: 50%;
  width: 15px;
  height: 4px;
  border-radius: 50%;
  background: rgba(23, 23, 20, .5);
  filter: blur(2px);
  opacity: 0;
  transform: translateX(-50%) scale(.5);
}

[data-signature-rest].is-resting .signature-cue i:first-child {
  opacity: .92;
  transform: translateX(8px) rotate(38deg);
}

[data-signature-rest].is-resting .signature-cue i:nth-child(2) {
  opacity: .88;
  transform: translateX(-8px) rotate(192deg);
}

[data-signature-rest].is-resting .signature-cue b {
  opacity: .48;
  transform: translateX(-50%) scale(1);
  transition-delay: 150ms;
}

/* ------------------------------------------------------------------
   Chapter rests and the horizontal “Mittendrin” story.
   ------------------------------------------------------------------ */

.discoveries-pin {
  background: var(--v5-sheet);
}

.discoveries.is-horizontal-story-active {
  position: relative;
  height: calc(100svh - var(--v8-header) + var(--v8-reel-travel, 1800px));
  padding: 0;
  overflow: clip;
}

.discoveries.is-horizontal-story-active .discoveries-pin {
  position: sticky;
  z-index: 2;
  top: var(--v8-header);
  height: calc(100svh - var(--v8-header));
  min-height: 0;
  padding: clamp(18px, 2.2vh, 28px) 0 clamp(10px, 1.5vh, 18px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-bottom: 1px solid var(--v5-line);
}

.discoveries.is-horizontal-story-active .discoveries-header {
  padding-top: 10px;
  grid-template-columns: minmax(82px, .34fr) minmax(0, 1.65fr) minmax(230px, .68fr);
  gap: clamp(24px, 4vw, 64px);
}

.discoveries.is-horizontal-story-active .discoveries-header > div {
  grid-template-columns: minmax(0, 1.65fr) minmax(230px, .68fr);
  gap: clamp(24px, 4vw, 64px);
}

.discoveries.is-horizontal-story-active .discoveries-header h2 {
  font-size: clamp(3rem, 4.7vw, 5.8rem);
  line-height: .88;
}

.discoveries.is-horizontal-story-active .discoveries-header > div > p {
  font-size: clamp(.9rem, .82rem + .18vw, 1.05rem);
  line-height: 1.45;
}

.discoveries.is-horizontal-story-active .reel-toolbar {
  margin: clamp(12px, 1.8vh, 22px) auto clamp(8px, 1.2vh, 14px);
  padding-top: 8px;
}

.discoveries.is-horizontal-story-active .reel-viewport {
  height: 100%;
  min-height: 0;
  scroll-behavior: auto;
  scroll-snap-type: none;
  scrollbar-width: none;
  cursor: ew-resize;
}

.discoveries.is-horizontal-story-active .reel-viewport::-webkit-scrollbar {
  display: none;
}

.discoveries.is-horizontal-story-active .reel-track {
  /* v8.js measures the row the pin actually gives the viewport. The old
     100svh guess did not account for the header, toolbar and controls, so
     the cards were clipped at the bottom. */
  --rail-height: var(--v8-rail-height, clamp(450px, calc(100svh - 450px), 620px));
  min-height: calc(var(--rail-height) + 66px);
  padding-right: var(--v8-reel-tail, 18vw);
  padding-bottom: 6px;
}

/* Card heights were width-driven while the rail became height-driven; on a
   short row that mismatch pushed the cards past the bottom edge. Capping
   them against the rail keeps every card whole and preserves the staggered
   rhythm, and capping the widths alongside keeps each crop in its own
   orientation instead of stretching it letterbox-wide. */
.discoveries.is-horizontal-story-active .reel-card--celebration,
.discoveries.is-horizontal-story-active .reel-card--nikah {
  --card-height: min(clamp(463px, 32.7vw, 563px), calc(var(--rail-height) * .92));
  --card-width: min(clamp(347px, 24.5vw, 450px), calc(var(--card-height) * .8));
}

.discoveries.is-horizontal-story-active .reel-card--walk,
.discoveries.is-horizontal-story-active .reel-card--civil {
  --card-width: min(clamp(765px, 54vw, 930px), calc(var(--card-height) * 1.78));
}

.discoveries.is-horizontal-story-active .reel-card--package {
  --card-width: min(clamp(720px, 60vw, 1020px), calc(var(--card-height) * 1.9));
}

.discoveries.is-horizontal-story-active .reel-card {
  scroll-snap-stop: always;
}

.discoveries.is-horizontal-story-active .reel-controls {
  margin: clamp(5px, 1vh, 12px) auto 0;
}

.discoveries.is-horizontal-story-active .reel-controls > p {
  max-width: 58ch;
}

/* ------------------------------------------------------------------
   Floral finale: two real colour fields converge on the known shadow.
   ------------------------------------------------------------------ */

.site-footer--garden {
  position: relative;
  min-height: clamp(760px, 92svh, 980px);
  padding: 0 clamp(22px, 3vw, 52px) 22px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 0;
  overflow: clip;
  isolation: isolate;
  background: var(--v8-cream);
  border-top: 1px solid var(--v5-line);
  color: var(--v5-carbon);
}

.footer-garden {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.footer-garden::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(circle at 50% 49%, rgba(247, 242, 233, .86) 0 17%, rgba(247, 242, 233, .44) 34%, transparent 57%);
}

.footer-floral {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: saturate(.96) contrast(1.035);
  opacity: .48;
  transition:
    transform 1450ms cubic-bezier(.18, .72, .18, 1),
    opacity 900ms ease;
  will-change: transform, opacity;
}

.footer-floral--left {
  clip-path: inset(0 50% 0 0);
  transform: translate3d(-7%, 2%, 0) scale(1.035);
}

.footer-floral--right {
  clip-path: inset(0 0 0 50%);
  transform: translate3d(7%, 2%, 0) scale(1.035);
}

.footer-garden__shadow {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: clamp(270px, 29vw, 510px);
  max-width: none;
  opacity: 0;
  mix-blend-mode: multiply;
  filter: blur(1.5px);
  transform: translate(-50%, -43%) rotate(-8deg) scale(.86);
  transition:
    transform 1300ms 180ms cubic-bezier(.18, .72, .18, 1),
    opacity 900ms 180ms ease;
  will-change: transform, opacity;
}

.site-footer--garden.is-resting .footer-floral {
  opacity: 1;
}

.site-footer--garden.is-resting .footer-floral--left,
.site-footer--garden.is-resting .footer-floral--right {
  transform: translate3d(0, 0, 0) scale(1);
}

.site-footer--garden.is-resting .footer-garden__shadow {
  opacity: .135;
  transform: translate(-50%, -50%) rotate(-8deg) scale(1);
}

.footer-finale {
  position: relative;
  z-index: 3;
  align-self: center;
  justify-self: center;
  width: min(720px, calc(100% - 40px));
  padding: clamp(90px, 13vh, 150px) 22px clamp(58px, 8vh, 94px);
  text-align: center;
}

.footer-finale :is(h2, p) {
  margin: 0;
}

.footer-kicker {
  font-size: .7rem;
  font-weight: 680;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.footer-finale h2 {
  margin: 24px 0 25px;
  font-size: clamp(3.6rem, 6.15vw, 7rem);
  font-weight: 315;
  letter-spacing: -.064em;
  line-height: .89;
  text-wrap: balance;
}

.footer-finale > p:not(.footer-kicker) {
  max-width: 45ch;
  margin-inline: auto;
  color: var(--v5-carbon-soft);
  line-height: 1.55;
  text-wrap: pretty;
}

.footer-cta {
  min-height: 54px;
  margin-top: 34px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 32px;
  border: 1px solid var(--v5-carbon);
  background: var(--v5-carbon);
  color: var(--v5-sheet);
  font-size: .72rem;
  font-weight: 680;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.footer-cta:hover,
.footer-cta:focus-visible {
  border-color: var(--v8-ruby);
  background: var(--v8-ruby);
}

/* The closing moment also carries the direct channels, so no separate contact section repeats the CTA. */
.footer-finale > p.footer-contact {
  max-width: none;
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  font-size: .84rem;
}

.footer-contact a {
  color: var(--v5-carbon);
  text-underline-offset: .28em;
}

.footer-meta {
  position: relative;
  z-index: 3;
  margin-inline: -1px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 20px clamp(24px, 4vw, 58px);
  border-top: 1px solid rgba(23, 23, 20, .34);
  border-bottom: 1px solid rgba(23, 23, 20, .15);
  background: rgba(247, 242, 233, .78);
  -webkit-backdrop-filter: blur(12px) saturate(.82);
  backdrop-filter: blur(12px) saturate(.82);
}

.footer-meta .footer-mark {
  color: var(--v5-carbon);
  font-size: clamp(1.45rem, 1.12rem + 1vw, 2.3rem);
  font-weight: 350;
  letter-spacing: -.04em;
  text-decoration: none;
}

.footer-meta .footer-links {
  display: flex;
  gap: 24px;
}

.footer-meta p,
.site-footer--garden .prototype-note {
  margin: 0;
}

.site-footer--garden .prototype-note {
  position: relative;
  z-index: 3;
  max-width: 74ch;
  margin-top: 8px;
  padding: 9px 11px;
  background: rgba(247, 242, 233, .8);
  color: rgba(23, 23, 20, .61);
  font-size: .68rem;
  line-height: 1.45;
}

@media (min-width: 901px) and (min-height: 880px) {
  .second-look {
    min-height: calc(100svh - var(--v8-header));
    padding-block: clamp(18px, 2.4vh, 30px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .second-look .look-header {
    padding-top: 10px;
  }

  .second-look .look-header h2 {
    font-size: clamp(3rem, 4.6vw, 5.6rem);
    /* Below .96 the descender of "ganzen" touches the cap of "Detail". */
    line-height: .98;
  }

  .second-look .look-layout {
    min-height: 0;
    margin-top: clamp(16px, 2.5vh, 28px);
    align-items: stretch;
  }

  .second-look .look-frame {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .second-look .look-media {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  .second-look .look-copy {
    position: static;
    min-height: 0;
  }

  html.v8-snap {
    scroll-padding-top: var(--v8-header);
    scroll-snap-type: y proximity;
  }

  html.v8-snap .hero,
  html.v8-snap .thesis,
  html.v8-snap .cinema-intro,
  html.v8-snap .second-look,
  html.v8-snap .method,
  html.v8-snap .contact,
  html.v8-snap .site-footer--garden {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 0;
  }

  /* scroll-padding already reserves the fixed navigation. The older ID
     offsets would otherwise add a second header-height and leave a slice
     of the previous chapter visible. */
  html.v8-snap #zweiter-blick,
  html.v8-snap #anfrage,
  html.v8-snap #abschluss {
    scroll-margin-top: 0;
  }

  html.v8-snap .discoveries {
    scroll-margin-top: 0;
    scroll-snap-align: none;
  }
}

/* The finale was taller than a laptop screen, so the page came to rest with
   the headline cropped behind the fixed header and the legal block already
   in the same view — two states at once. The finale and the legal block are
   one composition, so the footer is now exactly the screen below the header,
   never taller: whatever the height, kicker, headline, copy and CTA rest
   whole in the visual centre and the legal block follows beneath them. Every
   value equals the original at 800px and only tightens as the height
   shrinks; nothing here applies to a tall desktop. */
@media (min-width: 901px) and (max-height: 879px) {
  .site-footer--garden {
    min-height: calc(100svh - var(--v8-header));
    padding-bottom: clamp(8px, calc(4.7vh - 15.6px), 22px);
  }

  .footer-finale {
    padding: clamp(8px, 2vh, 64px) 22px clamp(8px, 2vh, 40px);
  }

  .footer-finale h2 {
    margin: clamp(8px, calc(5.3vh - 18px), 24px) 0 clamp(8px, calc(5.4vh - 18px), 25px);
    font-size: min(clamp(3.6rem, 6.15vw, 7rem), calc(9.3vh - .55rem));
  }

  .footer-cta {
    min-height: clamp(46px, calc(2.7vh + 32px), 54px);
    margin-top: clamp(12px, calc(7.3vh - 24px), 34px);
  }

  .footer-meta {
    padding-block: clamp(10px, calc(2.7vh - 3.6px), 18px);
  }

  .site-footer--garden .footer-meta .footer-mark.brand-lockup {
    width: min(clamp(188px, 16vw, 238px), calc(50vh - 130px));
  }

  .site-footer--garden .prototype-note {
    margin-top: clamp(4px, 1vh, 8px);
  }
}

/* Laptop heights: the same pinned stage, set more densely. Nothing is
   hidden here — spacing, type scale and chrome shrink so the header, the
   rail and the controls fit one screen honestly. */
@media (min-width: 901px) and (min-height: 700px) and (max-height: 879px) {
  .discoveries.is-horizontal-story-active .discoveries-pin {
    padding: clamp(8px, 1.2vh, 14px) 0 clamp(6px, 1vh, 10px);
  }

  .discoveries.is-horizontal-story-active .discoveries-header {
    padding-top: 2px;
    gap: clamp(20px, 3vw, 44px);
  }

  .discoveries.is-horizontal-story-active .discoveries-header h2 {
    font-size: clamp(2.1rem, 3.3vw, 3.3rem);
  }

  .discoveries.is-horizontal-story-active .discoveries-header > div > p {
    font-size: clamp(.82rem, .78rem + .12vw, .93rem);
    line-height: 1.4;
  }

  .discoveries.is-horizontal-story-active .reel-toolbar {
    margin: clamp(6px, 1vh, 12px) auto clamp(4px, .8vh, 8px);
    padding-top: 4px;
  }

  .discoveries.is-horizontal-story-active .reel-controls {
    margin: clamp(2px, .6vh, 8px) auto 0;
  }

  /* The package card carries no caption strip, so on laptop heights it may
     use that row as well — its bottom edge meets the captions' bottom edge
     instead of the photographs'. Its copy sets tighter and the headline
     scales with the card, so the CTA is never cut off. */
  .discoveries.is-horizontal-story-active .reel-card--package {
    --card-height: calc(var(--rail-height) + 68px);
  }

  .discoveries.is-horizontal-story-active .package-card__copy {
    padding: clamp(18px, 2.2vw, 34px);
  }

  .discoveries.is-horizontal-story-active .package-card h3 {
    margin-bottom: 14px;
    font-size: min(clamp(3.1rem, 4.4vw, 5.5rem), calc(var(--card-height) * .11));
  }

  .discoveries.is-horizontal-story-active .package-card__copy > p:not(:first-child) {
    margin-bottom: clamp(14px, 2.4vh, 28px);
  }
}

/* Below the compact rail's floor the pin is released and the section
   returns to natural document flow. */
@media (max-width: 900px), (max-height: 699px) {
  .stage-cta {
    display: none;
  }

  .discoveries {
    padding-top: clamp(74px, 12vw, 110px);
    padding-bottom: clamp(64px, 11vw, 96px);
  }

  .discoveries-pin {
    position: static;
    height: auto;
  }

  .reel-toolbar [data-reel-instruction]::after {
    content: "";
  }
}

@media (max-width: 700px) {
  .stage-scene--balustrade {
    object-position: 68% center;
  }

  .site-footer--garden {
    min-height: max(780px, 96svh);
    padding-inline: 16px;
  }

  .footer-floral {
    inset: auto auto -1% -30vw;
    width: 160vw;
    height: auto;
    object-fit: contain;
  }

  .footer-garden::after {
    background: radial-gradient(circle at 50% 43%, rgba(247, 242, 233, .9) 0 19%, rgba(247, 242, 233, .58) 38%, transparent 66%);
  }

  .footer-garden__shadow {
    top: 43%;
    width: min(72vw, 360px);
  }

  .footer-finale {
    width: 100%;
    padding: 110px 4px 86px;
  }

  .footer-finale h2 {
    font-size: clamp(3rem, 13.6vw, 4.6rem);
  }

  .footer-finale > p:not(.footer-kicker) {
    max-width: 31ch;
  }

  .footer-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

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

  .footer-meta .footer-links {
    flex-wrap: wrap;
    gap: 12px 24px;
  }

  .footer-meta p {
    text-align: left;
  }

  .site-footer--garden .prototype-note {
    padding-bottom: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-cta,
  .signature-cue i,
  .signature-cue b,
  .footer-floral,
  .footer-garden__shadow {
    transition: none !important;
  }

  .footer-floral--left,
  .footer-floral--right {
    opacity: 1;
    transform: none;
  }

  .footer-garden__shadow {
    opacity: .135;
    transform: translate(-50%, -50%) rotate(-8deg) scale(1);
  }
}

@media print {
  .stage-cta {
    display: none;
  }

  .discoveries.is-horizontal-story-active {
    height: auto;
  }

  .discoveries.is-horizontal-story-active .discoveries-pin {
    position: static;
    height: auto;
  }

  .site-footer--garden {
    min-height: 0;
  }
}