/* ════════════════════════════════════════════════════════════════════
   LENTAVERA · Holding page — "Atmosphere" (day / paper colorway)
   Full-bleed hero in a floating rounded frame. Warm paper field, ink
   Bodoni headline, ferro accent over a full-bleed hero photo.
   ════════════════════════════════════════════════════════════════════ */

:root { --frame-radius: 0px; --frame-inset: 0px; }

html, body { height: 100%; }
body {
  background: #D7D2C7;          /* warm putty matte framing the panel */
  overflow: hidden;
}

/* ── The floating frame ────────────────────────────────────────────── */
.matte { position: fixed; inset: 0; padding: var(--frame-inset); }
.frame {
  position: relative;
  width: 100%; height: 100%;
  border-radius: var(--frame-radius);
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
}

/* ── Layer 0 · default paper atmosphere (ships without any image) ───── */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(125% 88% at 80% 4%,  rgba(139,58,45,0.13),  transparent 56%),
    radial-gradient(110% 95% at 10% 98%, rgba(122,106,67,0.12), transparent 70%),
    radial-gradient(70% 55% at 52% 120%, rgba(139,58,45,0.10),  transparent 60%),
    linear-gradient(157deg, #FCFBF7 0%, #F4F1E9 50%, #EBE7DD 100%);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, transparent 40%, rgba(255,252,246,0.5) 52%, transparent 64%);
}

/* ── Layer 1 · hero photo ──────────────────────────────────────────── */
.hero-media {
  position: absolute; inset: 0; z-index: 1;
  transform: scale(1.08); transform-origin: 50% 45%;
}
.hero-media img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Brand grade — pulls the photo gently toward the paper/ferro palette:
   cool greys warmed, saturation eased, a breath of ferro in the shadows. */
.hero-media img { filter: sepia(0.16) saturate(0.9) brightness(1.03) contrast(0.965); }
.hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(157deg, rgba(244,241,233,0.55) 0%, rgba(139,58,45,0.40) 100%);
  mix-blend-mode: soft-light;
}

/* ── Layer 2 · legibility veil (keeps ink readable over a photo) ────── */
.scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(86% 72% at 5% 88%, rgba(248,246,241,0.80) 0%, transparent 60%),
    linear-gradient(to top, rgba(248,246,241,0.84) 0%, rgba(248,246,241,0.30) 40%, transparent 62%),
    linear-gradient(102deg, rgba(248,246,241,0.62) 0%, transparent 52%);
}

/* ── Layer 3 · grain, the brand texture (multiply on paper) ────────── */
.frame .grain {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  opacity: 0.05; mix-blend-mode: multiply;
}

/* ── Layer 4 · content shell ───────────────────────────────────────── */
.shell {
  position: absolute; inset: 0; z-index: 4;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(22px, 3.2vw, 46px);
}

/* ── Top bar ───────────────────────────────────────────────────────── */
.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 16px; }
.bar-left  { justify-self: start; }
.bar-right { justify-self: end; }

.brand { justify-self: center; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.brand .name {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(24px, 2.2vw, 31px); letter-spacing: -0.01em; line-height: 1;
  color: var(--ink);
}
.brand .sub {
  font-family: var(--font-body); font-weight: 500;
  font-size: 11px; letter-spacing: 0.05em; text-transform: lowercase;
  color: var(--mid);
}

/* ── Flat editorial nav links (no shapes) ──────────────────────────── */
.navlink {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 500;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mid); white-space: nowrap;
  transition: color var(--dur-base) var(--ease);
}
.navlink:hover { color: var(--ink); }
.navlink .glyph { font-size: 12px; opacity: 0.85; transition: transform var(--dur-base) var(--ease); }
.navlink:hover .glyph { transform: translate(2px, -2px); }
.bar-right .navlink { position: relative; }
.bar-right .navlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur-base) var(--ease);
}
.bar-right .navlink:hover::after { transform: scaleX(1); transform-origin: left center; }

/* ── Hero headline (anchored lower-left) ───────────────────────────── */
.hero {
  align-self: end;
  display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px);
  padding-bottom: clamp(44px, 8vh, 104px);
}
.headline {
  font-family: "Bodoni Moda", serif; font-style: normal; font-weight: 400;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 8, "wght" 400;
  font-size: clamp(46px, 7.7vw, 116px);
  line-height: 0.95; letter-spacing: -0.022em;
  text-transform: uppercase; color: var(--ink);
}
.headline .ln { display: block; white-space: nowrap; }
.headline .ln > span { display: block; will-change: transform, opacity; }
.headline .accent { color: var(--accent); font-style: italic; }

.subhead {
  font-family: var(--font-body); font-weight: 400; font-style: italic;
  font-size: clamp(16px, 1.5vw, 21px); line-height: 1.4;
  color: var(--ink-soft); max-width: 30ch; text-wrap: pretty;
}

/* ── Bottom bar ────────────────────────────────────────────────────── */
.foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.colophon {
  font-family: var(--font-body); font-weight: 500;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 8px; margin-left: auto;
}

/* ── Entrance ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .hero-media { animation: settle 1800ms cubic-bezier(0.16, 0.7, 0.2, 1) forwards; }
  .headline .ln > span {
    opacity: 0; transform: translateY(0.42em);
    animation: rise 1050ms cubic-bezier(0.16, 0.78, 0.2, 1) forwards;
    animation-delay: var(--d, 0ms);
  }
  .fade {
    opacity: 0; transform: translateY(10px);
    animation: rise 900ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
    animation-delay: var(--d, 0ms);
  }
}
@keyframes settle { to { transform: scale(1); } }
@keyframes rise   { to { opacity: 1; transform: none; } }

.entered .headline .ln > span { opacity: 1 !important; transform: none !important; }
.entered .fade { opacity: 1 !important; transform: none !important; }
.entered .hero-media { transform: scale(1) !important; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .brand .sub { letter-spacing: 0.3em; }
  .bar-left .navlink .txt { display: none; }
  .hero { max-width: 100%; }
  .colophon { display: none; }
}
@media (max-width: 480px) { .headline { font-size: 14vw; } }