/* =========================================================================
   CONSOLATION SYSTEMS — site styles
   Built on colors_and_type.css (the refined cold ramp + the one amber).
   Three things: the world (one warm door in the cold), the left rail nav,
   and the typed copy. Dark-first, vast quiet, one warm light.
   ========================================================================= */

html, body { margin: 0; height: 100%; background: var(--bg); }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }

.page { position: relative; min-height: 100vh; }

/* ---- the world: a fixed cinematic backdrop the copy descends over ------- */
.world {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/visitor.jpg") center / cover no-repeat;
  opacity: 0.82;
}
/* Visitor uses the base .world above; Imprint and Contact override it below.
   Studio's interior register is styled in studio-cascade.css (that page does
   not load site.css). */

/* the imprint world: the cold height itself. Towers in fog over churning
   water, no warm source anywhere. The image is already petrol-cold, so it is
   used near-native (a touch deeper for legibility), not drained to grey like
   the reused door. This is the opposite pole from the homepage's one door. */
.world.imprint {
  background-image: url("assets/imprint.jpg");
  background-position: 64% center;
  opacity: 0.94;
  filter: brightness(0.84) contrast(1.05) saturate(0.94);
}

/* the contact world: the ascent. Looking up from the cold deep toward the
   surface, where the one warm light breaks through and a plume of bubbles
   reaches for it. This is the homepage's geometry turned over: the warm source
   is no longer a door across the water but the surface above, and the cold is
   below and all around. The image is already the exact brand mood (cold near-
   black ground, one warm light, no second hue), so it is used near-native. It
   is pushed right so the light and the rising plume sit in the open gutter
   beside the reading column, never behind the type. */
.world.deep {
  background-image: url("assets/contact.jpg");
  background-size: 158%;
  background-position: 1% 31%;
  opacity: 0.98;
  filter: contrast(1.05) saturate(1.02);
}

/* a soft cinematic grade: deepen the edges, keep every line legible */
.grade {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(135% 95% at 50% 32%, transparent 38%, rgba(4,6,11,0.72) 100%),
    linear-gradient(to bottom, rgba(4,6,11,0.42) 0%, rgba(4,6,11,0.12) 28%, rgba(4,6,11,0.12) 66%, rgba(4,6,11,0.66) 100%);
}

/* cold register: the brightest fog in the tower image sits up-center, where
   the heading lands. Pull a darker wash across the left reading column and the
   top so every line holds, while the towers and water stay readable at right. */
.cold-register .grade {
  background:
    linear-gradient(102deg, rgba(4,7,12,0.86) 0%, rgba(4,7,12,0.52) 30%, rgba(4,7,12,0.06) 56%, rgba(4,7,12,0.0) 74%, rgba(4,7,12,0.34) 100%),
    radial-gradient(130% 90% at 62% 22%, transparent 30%, rgba(4,6,11,0.62) 100%),
    linear-gradient(to bottom, rgba(4,6,11,0.50) 0%, rgba(4,6,11,0.10) 30%, rgba(4,6,11,0.14) 64%, rgba(4,6,11,0.60) 100%);
}

/* contact register: the ascent. The reading column holds the dark left, so the
   wash is deepest there and clears toward the right, where the surface light and
   the rising bubble plume must stay open and glowing. The reading measure is
   pulled in so the type clears the right gutter and never crowds the light. */
.deep-register .col .line { max-width: 46ch; }
.deep-register .grade {
  background:
    linear-gradient(96deg,
      rgba(3,6,11,0.92) 0%,
      rgba(3,6,11,0.78) 17%,
      rgba(3,6,11,0.46) 34%,
      rgba(3,6,11,0.14) 52%,
      rgba(3,6,11,0.0) 68%),
    radial-gradient(46% 42% at 70% 34%, rgba(8,12,20,0.0) 0%, rgba(6,9,16,0.0) 46%, rgba(4,6,11,0.40) 100%),
    radial-gradient(150% 120% at 60% 30%, transparent 40%, rgba(3,6,11,0.62) 100%),
    linear-gradient(to bottom,
      rgba(3,6,11,0.46) 0%,
      rgba(3,6,11,0.08) 24%,
      rgba(3,6,11,0.0) 56%,
      rgba(3,6,11,0.40) 100%);
}

/* ---- the rail: navigation in the empty left margin ---------------------- */
.rail {
  position: fixed; left: clamp(40px, 5vw, 88px); top: 50%;
  transform: translateY(-50%); z-index: 5;
  display: flex; flex-direction: column; gap: 38px;
}
.rail a {
  position: relative; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-secondary);
  text-decoration: none; transition: color var(--dur-1) var(--ease);
}
.rail a:hover { color: var(--text-primary); }
.rail a[aria-current="page"] { color: var(--accent-text); }
.rail a[aria-current="page"]::before {
  content: ""; position: absolute; left: -22px; top: -0.06em;
  width: 2px; height: 1.25em; background: var(--accent-solid);
}
/* cold register: the one light is suppressed, so the marker goes cold too */
.cold-register .rail a[aria-current="page"] { color: var(--text-primary); }
.cold-register .rail a[aria-current="page"]::before { background: var(--text-primary); }

/* ---- the reading column ------------------------------------------------- */
.col {
  position: relative; z-index: 2;
  margin-left: clamp(180px, 22vw, 340px); max-width: 720px;
  padding: clamp(120px, 18vh, 200px) 40px 160px 0;
}
.col.narrow { max-width: 620px; }
.col.center { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 80px; padding-bottom: 80px; }

/* the wordmark + page headings — Plex Sans, the monumental grotesque */
.wordmark {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(56px, 6vw, 82px); line-height: 1.02; letter-spacing: -0.018em;
  color: var(--text-primary); margin: 0 0 clamp(48px, 8vh, 104px);
  text-shadow: 0 2px 40px rgba(3,6,11,0.78), 0 1px 8px rgba(3,6,11,0.7);
}
.page-h {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(40px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -0.01em;
  color: var(--text-primary); margin: 0 0 clamp(36px, 6vh, 64px);
  text-shadow: 0 2px 30px rgba(3,6,11,0.75);
}

/* the body lines — Plex Mono, the typed voice */
.line {
  font-family: var(--font-mono); font-size: 18px; line-height: 1.78;
  color: var(--text-primary); letter-spacing: 0.005em; margin: 0 0 13px;
  max-width: 60ch; text-wrap: pretty;
  text-shadow: 0 0 1px rgba(3,6,11,0.9), 0 1px 22px rgba(3,6,11,0.92), 0 2px 6px rgba(3,6,11,0.85);
}
.line.lead {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(26px, 3vw, 31px); line-height: 1.34; letter-spacing: -0.01em;
  margin: 0 0 40px; text-shadow: 0 1px 22px rgba(3,6,11,0.9);
}
.line.solo {
  font-size: clamp(19px, 2vw, 22px); line-height: 1.7; max-width: 40ch;
}
.line.close { margin-top: clamp(48px, 8vh, 104px); }
.amber { color: var(--accent-text); }

/* ---- the imprint legal block: the Impressum the poem does not carry. Set
   far below the prose and plainly present (no typed reveal, no JS gate) so it
   stays leicht erkennbar and ständig verfügbar per § 5 DDG. Cold register, the
   typed voice, quiet but legible against the cold height behind it. */
.legal {
  position: relative; z-index: 2;
  margin-top: clamp(104px, 22vh, 240px); max-width: 56ch;
  padding-top: clamp(28px, 4vh, 40px);
  border-top: 1px solid var(--border-default);
}
.legal-kicker { display: block; color: var(--text-faint); margin: 0 0 clamp(22px, 3.4vh, 34px); }
.legal-dl { margin: 0; display: flex; flex-direction: column; gap: clamp(20px, 3vh, 30px); }
.legal-row { display: grid; grid-template-columns: 12em 1fr; gap: 6px var(--s-4); align-items: start; }
.legal-row dt {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
  text-shadow: 0 1px 16px rgba(3,6,11,0.85);
}
.legal-row dd {
  margin: 0; font-family: var(--font-mono); font-size: 15px; line-height: 1.74;
  color: var(--text-secondary); text-shadow: 0 1px 18px rgba(3,6,11,0.9), 0 0 1px rgba(3,6,11,0.9);
}
.legal-row dd strong { font-weight: 500; color: var(--text-primary); }
.legal-mail {
  color: var(--text-secondary); text-decoration: none;
  border-bottom: 1px solid var(--border-strong); padding-bottom: 1px;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.legal-mail:hover { color: var(--text-primary); border-bottom-color: var(--text-secondary); }
.legal-mail:focus-visible { outline: none; color: var(--text-primary); border-bottom-color: var(--text-primary); }

/* ---- the reach: the one warm point of contact. The surface light in the
   image is the way to the studio; the address is that light brought into the
   type. Kept at amber-quiet so the caret stays the single brightest filament;
   it warms on hover and focus. Set low and apart, the terminus of the descent. */
.reach { margin-top: clamp(40px, 7vh, 88px); display: flex; flex-direction: column; gap: var(--s-1); }
.reach .cs-label { color: var(--text-faint); }
.reach-mail {
  font-family: var(--font-mono); font-size: 19px; line-height: 1.4;
  letter-spacing: 0.005em; color: var(--accent-quiet); text-decoration: none;
  width: max-content; padding: 2px 0; border-bottom: 1px solid transparent;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  text-shadow: 0 1px 22px rgba(3,6,11,0.92), 0 0 18px rgba(255,176,96,0.10);
}
.reach-mail:hover { color: var(--accent-text); border-bottom-color: oklch(0.770 0.150 64 / 0.42); }
.reach-mail:focus-visible {
  outline: none; color: var(--accent-bright);
  border-bottom-color: var(--accent-solid);
}

/* ---- the caret: the one live mark on the page -------------------------- */
.caret {
  display: inline-block; width: 0.16em; height: 1.0em; margin-left: 0.12em;
  vertical-align: -0.16em; background: var(--accent-bright);
  box-shadow: 0 0 14px rgba(255,176,96,0.5), 0 0 3px rgba(255,176,96,0.7);
  animation: blink 1.15s steps(1, end) infinite;
}
.cold-register .caret { background: var(--text-primary); box-shadow: none; }
@keyframes blink { 0%, 52% { opacity: 1; } 53%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; opacity: 1; }
}

/* =========================================================================
   MOBILE / RESPONSIVE  (<= 860px)
   The desktop layout is a wide left margin with the rail standing in it. On a
   narrow viewport there is no margin to stand in, so two things change: the
   rail lies down as a quiet bottom bar (out of the reading flow, thumb-near),
   and the reading column drops the margin for a left-anchored measure with real
   side padding. The world keeps its one warm source framed on a tall viewport,
   and a portrait scrim keeps every typed line legible over it.
   ========================================================================= */
@media (max-width: 860px) {
  /* the rail lies down: a horizontal bottom bar over a soft scrim. The active
     marker moves from a left tick to a short tick above the label. */
  .rail {
    left: 0; right: 0; top: auto; bottom: 0; transform: none;
    flex-direction: row; justify-content: space-around; align-items: center;
    gap: 0; padding: 13px 10px calc(13px + env(safe-area-inset-bottom));
    background: linear-gradient(to top,
      rgba(4,6,11,0.94) 0%, rgba(4,6,11,0.86) 52%, rgba(4,6,11,0.0) 100%);
    border-top: 1px solid var(--border-subtle);
  }
  .rail a { font-size: 11px; letter-spacing: 0.16em; padding: 7px 8px; }
  .rail a[aria-current="page"]::before {
    left: 50%; top: -9px; transform: translateX(-50%);
    width: 14px; height: 2px;
  }

  /* the reading column: no margin, a left-anchored measure, side padding, and
     room at the foot so the closing line clears the bottom bar. */
  .col {
    margin-left: 0; max-width: min(660px, 100%);
    padding: clamp(82px, 12vh, 116px) clamp(22px, 6vw, 38px) 148px;
  }
  .col.narrow { max-width: min(620px, 100%); }
  .col.center { min-height: 100vh; padding-top: clamp(82px, 12vh, 116px); padding-bottom: 148px; }
  .deep-register .col .line { max-width: none; }

  .wordmark { font-size: clamp(48px, 13vw, 70px); margin-bottom: clamp(40px, 7vh, 76px); }
  .page-h { font-size: clamp(36px, 9vw, 50px); }
  .line { font-size: 17px; max-width: none; }
  .line.lead { font-size: clamp(23px, 5.6vw, 28px); }
  .line.solo { font-size: clamp(18px, 4.6vw, 21px); }

  .legal { max-width: 100%; }
  .legal-row { grid-template-columns: 1fr; gap: 4px; }
  .reach-mail { font-size: 17px; overflow-wrap: anywhere; }

  /* portrait framing: keep each scene's one warm source in the tall crop. */
  .world { background-position: center 56%; }
  .world.imprint { background-position: 58% 34%; }
  .world.deep { background-size: cover; background-position: 52% 26%; }

  /* one portrait scrim for every register: full-width type now sits over the
     whole frame, so darken top (heading) and bottom (close + bar) and hold the
     middle open. Beats the landscape left/right washes at this specificity. */
  .grade,
  .cold-register .grade,
  .deep-register .grade {
    background:
      radial-gradient(120% 78% at 50% 30%, transparent 42%, rgba(4,6,11,0.50) 100%),
      linear-gradient(180deg,
        rgba(4,6,11,0.82) 0%, rgba(4,6,11,0.48) 23%,
        rgba(4,6,11,0.40) 55%, rgba(4,6,11,0.80) 100%);
  }
}

/* =========================================================================
   PAGE TRANSITIONS . the descent
   Navigating between sections is not a cut. The world is one place; you move
   through it. The backdrop dissolves from one register into the next (the warm
   door giving way to the cold height when you enter Imprint), the nav rail and
   vignette hold steady as fixed points, and the reading column settles in and
   types itself. Cross-document View Transitions, same easing and durations as
   the rest of the system. Where unsupported, navigation is an ordinary load.
   ========================================================================= */
@view-transition { navigation: auto; }

/* the persistent scene: named so each animates on its own track, lifted out of
   the page cross-fade. The rail and vignette persist; the world dissolves. */
.world { view-transition-name: world; }
.grade { view-transition-name: grade; }
.rail  { view-transition-name: rail; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(*) {
    animation-duration: var(--dur-3);
    animation-timing-function: var(--ease);
  }

  /* the world: a slow cross-fade, one register settling into the next */
  ::view-transition-old(world),
  ::view-transition-new(world) {
    animation-duration: 560ms;
    animation-timing-function: var(--ease);
  }

  /* rail + vignette: steady anchors, the shortest cross-fade */
  ::view-transition-group(rail),
  ::view-transition-group(grade) { animation-duration: var(--dur-1); }

  /* the reading column (everything unnamed): fades out lifting, the next page
     fades up from just below . the descent, restrained, no bounce */
  ::view-transition-old(root) {
    animation: vt-col-out var(--dur-2) var(--ease) both;
  }
  ::view-transition-new(root) {
    animation: vt-col-in var(--dur-3) var(--ease) both;
  }
}

@keyframes vt-col-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes vt-col-in {
  from { opacity: 0; transform: translateY(12px); }
}

/* reduced motion: the world still changes, but instantly . no movement */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}