/* ============================================================
   VANESSA VON FRANKENBERG — page styles
   Builds on base.css. Light editorial rhythm, one forest block.
   ============================================================ */

/* ---------- tones ---------- */
.tone-parchment { background: var(--parchment); }
.tone-ivory     { background: var(--ivory); }
.tone-sand      { background: var(--sand); }
.tone-forest {
  background: var(--espresso);
  color: var(--cream);
  --ink-on:    var(--cream);
  --ink-on-2:  rgba(236,228,214,0.8);
  --sage-soft: var(--cream);
  --eyebrow-c: var(--brass);
  --line:      var(--line-dark);
}

/* shared section heads */
.sec-head { max-width: 60ch; }
.sec-head .eyebrow { display: block; margin-bottom: 1.2rem; }

/* ============================================================
   1 — HERO
   ============================================================ */
.s-hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: clamp(8rem,12vw,10rem) var(--gutter) clamp(4rem,8vw,6rem); overflow: hidden; }
.hero-grid {
  width: 100%; max-width: 1500px; margin: 0 auto;
  display: grid; grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(2.5rem, 5vw, 5.5rem); align-items: center;
}
.hero-copy { max-width: 100%; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.hero-eyebrow .spark { width: 13px; }
.hero-title { font-size: clamp(2.6rem, 5vw, 4.8rem); max-width: 13ch; }
.hero-title .soft { color: var(--sage); font-style: italic; }
.hero-sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.9rem;
  margin-top: clamp(1.8rem, 3.2vw, 2.6rem);
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem); letter-spacing: 0.01em; color: var(--ink-2);
}
.hero-sub .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--sage); display: inline-block; }

.hero-portrait { position: relative; }
.hero-portrait .ph { position: relative; aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; }
.hero-portrait .frame-cap {
  position: absolute; left: 0; bottom: -2.1rem;
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
}
.scroll-hint {
  position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%);
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; gap: 0.7rem; z-index: 2;
}
.scroll-hint .ln { width: 42px; height: 1px; background: var(--sage-soft); display: inline-block; transform-origin: left; animation: pull 2.6s ease-in-out infinite; }
@keyframes pull { 0%,100%{ transform: scaleX(.5); opacity:.45 } 50%{ transform: scaleX(1); opacity:1 } }
@media (prefers-reduced-motion: reduce) { .scroll-hint .ln { animation: none; } }

@media (max-width: 880px) {
  .s-hero { min-height: auto; padding-top: clamp(7rem,18vw,9rem); }
  .hero-grid { grid-template-columns: 1fr; gap: clamp(2.5rem,8vw,3.5rem); }
  .hero-copy { max-width: 18ch; }
  .hero-portrait { order: -1; max-width: 440px; }
  .scroll-hint { display: none; }
}

/* ============================================================
   2 — ABOUT  (photo left, text right)
   ============================================================ */
.s-about .about-grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.s-about .portrait { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/5; }
.s-about .portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.96) contrast(1.01); }
.s-about h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); margin: 1.2rem 0 0; max-width: 16ch; }
.s-about .about-body { margin-top: clamp(1.7rem, 3vw, 2.4rem); }
.s-about .about-body p { font-size: clamp(1.05rem, 1.18vw, 1.22rem); line-height: 1.78; color: var(--ink-2); max-width: 52ch; }
.s-about .about-body .hl { font-style: italic; color: var(--brass); }
@media (max-width: 880px) {
  .s-about .about-grid { grid-template-columns: 1fr; gap: clamp(2rem,7vw,3rem); }
  .s-about .portrait { max-width: 380px; margin-left: auto; margin-right: auto; }
}

/* ============================================================
   3 — SPEAKING
   ============================================================ */
.s-speaking .speak-head { max-width: 24ch; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.s-speaking .speak-head .eyebrow { display: block; margin-bottom: 1.3rem; }
.s-speaking .speak-head h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
.s-speaking .speak-head .sub { margin-top: clamp(1.3rem, 2.2vw, 1.8rem); font-family: var(--sans); font-weight: 300; font-size: clamp(1.05rem, 1.2vw, 1.25rem); line-height: 1.6; color: var(--ink-2); max-width: 46ch; }

.link-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.8rem, 1.4vw, 1.2rem); }
.link-card {
  display: flex; flex-direction: column; gap: 1.4rem;
  background: var(--warm-grey); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: clamp(1.5rem, 2.2vw, 2rem);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.link-card:hover {
  transform: translateY(-5px); background: var(--ivory);
  border-color: var(--stone); box-shadow: 0 30px 56px -40px rgba(42,33,26,0.4);
}
.link-card .ic { width: 26px; height: 26px; color: var(--sage); }
.link-card .ic svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.link-card .lc-label { font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 1.5vw, 1.55rem); line-height: 1.15; color: var(--ink); }
.link-card .lc-meta { margin-top: auto; display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); transition: color .4s ease, gap .4s ease; }
.link-card:hover .lc-meta { color: var(--sage); gap: 0.75em; }
.link-card .lc-meta .arrow { transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.link-card:hover .lc-meta .arrow { transform: translateX(3px); }
@media (max-width: 880px) { .link-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .link-cards { grid-template-columns: 1fr; } }

/* ============================================================
   4 — GO BEYOND WHY  (forest dark block)
   ============================================================ */
.s-gby { position: relative; overflow: hidden; }
.s-gby .gby-glow { position: absolute; top: -20%; right: -8%; width: 55%; height: 120%; background: radial-gradient(ellipse at center, rgba(138,154,128,0.10), transparent 68%); pointer-events: none; }
.s-gby .gby-inner { position: relative; max-width: 760px; }
.s-gby .spark-lead { width: 24px; margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.s-gby .spark-lead path { fill: var(--stone); }
.s-gby .eyebrow { display: block; margin-bottom: 1.3rem; }
.s-gby h2 { font-size: clamp(2.1rem, 4.4vw, 3.7rem); max-width: 18ch; color: var(--parchment); }
.s-gby .body { margin-top: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--ink-on-2); max-width: 50ch; }
.s-gby .gby-cta { margin-top: clamp(2rem, 3.5vw, 2.8rem); }
.s-gby .tlink { color: var(--parchment); border-color: var(--sage-soft); }
.s-gby .tlink:hover { color: var(--stone); border-color: var(--stone); }

/* ============================================================
   5 — STUDIO ESSENCE  (warm sand card)
   ============================================================ */
.s-essence .essence-card {
  position: relative; overflow: hidden;
  background: var(--warm-grey); border: 1px solid var(--line);
  border-radius: 18px; padding: clamp(2.5rem, 6vw, 5.5rem);
  max-width: 1100px; margin: 0 auto;
}
.s-essence .essence-watermark {
  position: absolute; right: clamp(-1rem, -1vw, 0); bottom: clamp(-3rem, -4vw, -1.5rem);
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(9rem, 20vw, 18rem); line-height: 1; color: var(--sage);
  opacity: 0.08; pointer-events: none; user-select: none;
}
.s-essence .essence-inner { position: relative; max-width: 30ch; }
.s-essence .eyebrow { display: block; margin-bottom: 1.3rem; }
.s-essence h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
.s-essence .body { margin-top: clamp(1.4rem, 2.4vw, 2rem); max-width: 46ch; }
.s-essence .essence-cta { margin-top: clamp(1.9rem, 3.2vw, 2.6rem); }

/* ============================================================
   6 — CLOSING STATEMENT + FOOTER
   ============================================================ */
.s-closing { text-align: center; padding-top: clamp(6.5rem, 14vw, 12rem); padding-bottom: clamp(5rem, 10vw, 8rem); }
.s-closing .spark { width: 22px; margin: 0 auto clamp(2rem, 4vw, 3rem); display: block; }
.s-closing .spark path { fill: var(--sage); }
.closing-stmt {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.8rem, 3.6vw, 3.3rem); line-height: 1.32; letter-spacing: -0.008em;
  color: var(--ink); max-width: 24ch; margin: 0 auto; text-wrap: balance;
}
.closing-attr { margin-top: clamp(2rem, 4vw, 3rem); font-family: var(--sans); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); }

.site-footer { padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(3rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.footer-inner { max-width: 1340px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1.6rem; }
.footer-inner a, .footer-inner span { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.05em; color: var(--ink-3); }
.footer-inner a { transition: color .3s ease; }
.footer-inner a:hover { color: var(--ink); }
.footer-inner .fdot { width: 3px; height: 3px; border-radius: 50%; background: var(--stone); display: inline-block; }
.footer-inner .home { color: var(--ink); font-weight: 500; }
@media (max-width: 620px) { .footer-inner .fdot { display: none; } .footer-inner { gap: 0.5rem 1.2rem; } }