/* =========================================================
   Taylor Mac Brown — light editorial theme
   Derived from the "Your Story" print campaign (lovestory.html).

   Replaces the old dark cinematic look on the PUBLIC pages. The
   private client galleries are self-contained and untouched, and
   they still use js/stars.js, so that file stays.

   Type: Inter everywhere, with Cormorant Garamond for DISPLAY
   headings only. Never mix the two inside a sentence. Emphasis
   within a sentence is weight, colour, and case.
   ========================================================= */

:root {
  /* paper */
  --paper:     #faf7f2;
  --paper-2:   #f3eee6;
  --paper-3:   #ebe4d9;
  --card:      #ffffff;

  /* ink */
  --ink:       #2b2b2d;
  --ink-mid:   #56565b;
  --ink-dim:   #8b8b91;
  --ink-faint: #b3b3b8;

  /* accent */
  --gold:      #a8873f;   /* text weight, readable on paper */
  --gold-lit:  #dcab57;   /* fills, rules, the brand gold */
  --gold-soft: rgba(220,171,87,.14);

  --line:      rgba(0,0,0,.10);
  --line-2:    rgba(0,0,0,.18);

  --display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:    Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --max:    1240px;
  --rail:   clamp(20px, 5vw, 68px);
  --gutter: clamp(16px, 2.4vw, 30px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: 240ms;
  --med:  600ms;
  --slow: 900ms;

  /* ---------- compatibility aliases ----------
     The pages carried over from the dark theme (photo.html, selected-work.html,
     next-steps.html) reference the old token names roughly 150 times inside
     their own <style> blocks. Aliasing them here re-tones those pages through
     the cascade, so their markup and scripts can be left completely alone.
     Prefer the paper/ink names in anything new. */
  --fg:       var(--ink);
  --fg-mid:   var(--ink-mid);
  --fg-dim:   var(--ink-dim);
  --fg-faint: var(--ink-faint);
  --bg:       var(--paper);
  --bg-2:     var(--paper-2);
  --panel:    var(--card);
  --accent:   var(--ink);
  --gold-dim: rgba(168,135,63,.55);
  --font:     var(--sans);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- layout ---------- */
.shell  { width: min(var(--max), 100% - (var(--rail) * 2)); margin-inline: auto; }
.narrow { width: min(680px, 100% - 40px); margin-inline: auto; }
.center { text-align: center; }
section { padding: clamp(60px, 8.5vw, 120px) 0; }
.band   { background: var(--paper-2); }
.band-3 { background: var(--paper-3); }

/* ---------- type ---------- */
.display {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: .005em;
}
h1.display { font-size: clamp(40px, 8vw, 78px); }
h2.display { font-size: clamp(30px, 5.2vw, 50px); }
h3.display { font-size: clamp(21px, 2.6vw, 27px); font-weight: 400; line-height: 1.2; }

/* Emphasis inside a display heading: colour only, never a second face. */
.display em { font-style: normal; color: var(--gold); }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
}
.lede {
  color: var(--ink-mid); font-weight: 300;
  font-size: clamp(15px, 1.6vw, 17.5px);
}
.fine { font-size: 12.5px; color: var(--ink-dim); }

.rule {
  display: flex; align-items: center; gap: 14px;
  justify-content: center; margin: 22px auto; max-width: 420px;
}
.rule::before, .rule::after { content: ''; height: 1px; background: var(--line-2); flex: 1; }
.rule span { font-size: 8px; color: var(--ink-dim); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  padding: 15px 30px; border-radius: 999px;
  border: 1px solid var(--gold-lit); background: var(--gold-lit); color: #241a06;
  transition: filter var(--fast) var(--ease), transform var(--fast) var(--ease),
              border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn .arrow { transition: transform var(--fast) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(0,0,0,.02); }
.btn-dark { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn[disabled] { opacity: .55; cursor: default; transform: none; filter: none; }

/* ---------- nav ----------
   Structure and ids match the old dark nav on purpose: js/soundtrack.js docks
   its control into a nav that is .topnav OR #gnav and contains a .spacer.
   Keep #gnav and .spacer or the player detaches. */
.v2-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 16px;
  padding: 16px var(--rail);
  background: transparent;
  transition: background var(--med) var(--ease), border-color var(--med) var(--ease),
              backdrop-filter var(--med) var(--ease);
  border-bottom: 1px solid transparent;
}
.v2-nav.scrolled {
  background: rgba(250,247,242,.9);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--line);
}
.v2-brand img { height: 30px; width: auto; }
.v2-nav .spacer { margin-left: auto; }

.v2-menu-wrap { position: relative; }
.v2-menu-btn {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  background: transparent; border: 1px solid var(--line-2);
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.v2-menu-btn:hover { border-color: var(--ink); }
.v2-menu {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 208px; padding: 8px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,.10);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all var(--fast) var(--ease);
}
/* Two conventions exist across the site: some pages put .open on the menu
   itself, photo.html and next-steps.html put it on the wrapper. This rule
   sets the visibility, so matching only one of them left those two pages
   with a menu that toggled its class but stayed visibility:hidden. */
.v2-menu.open,
.v2-menu-wrap.open .v2-menu { opacity: 1; visibility: visible; transform: none; }
.v2-menu a {
  display: block; padding: 11px 14px; border-radius: 9px;
  font-size: 14px; color: var(--ink-mid); text-decoration: none;
  transition: all var(--fast) var(--ease);
}
.v2-menu a:hover { background: var(--paper-2); color: var(--ink); }
.v2-menu a.current { color: var(--gold); font-weight: 600; }
.v2-nav-book {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
  padding: 11px 20px; border-radius: 999px;
  background: var(--gold-lit); color: #241a06;
  transition: filter var(--fast) var(--ease);
}
.v2-nav-book:hover { filter: brightness(1.05); }

/* Nav sitting over a photographic hero, before any scroll. */
.v2-nav.on-media .v2-menu-btn { color: #fff; border-color: rgba(255,255,255,.55); }
.v2-nav.on-media .v2-menu-btn:hover { border-color: #fff; }
.v2-nav.on-media .v2-brand img { filter: brightness(0) invert(1); }
.v2-nav.scrolled.on-media .v2-menu-btn { color: var(--ink); border-color: var(--line-2); }
.v2-nav.scrolled.on-media .v2-brand img { filter: none; }

/* ---------- cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 26px 24px;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.card:hover {
  border-color: var(--gold-lit); transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
}
.card .rate {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
.card p { margin-top: 12px; font-size: 14px; font-weight: 300; color: var(--ink-mid); }

/* ---------- white-on-transparent artwork ----------
   Every client logo and festival laurel was exported white for the old dark
   site. brightness(0) turns white into black while keeping the alpha, so the
   same files work on paper with no re-export. */
.ink-art { filter: brightness(0); opacity: .62; transition: opacity var(--fast) var(--ease); }
a:hover .ink-art, .ink-art:hover { opacity: 1; }

/* ---------- quotes ---------- */
.quote-card { border: 1px solid var(--line); border-radius: 16px; padding: clamp(26px, 3vw, 40px); background: var(--card); }
.quote-mark { font-family: var(--display); font-size: 52px; line-height: .6; color: var(--gold-lit); }
.quote-text { margin-top: 14px; font-weight: 300; font-size: clamp(15px, 1.35vw, 17.5px); line-height: 1.62; }
.quote-by { margin-top: 20px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

/* ---------- footer ---------- */
.v2-footer {
  background: var(--paper-3); border-top: 1px solid var(--line);
  padding: 52px 0 40px; text-align: center;
}
.v2-footer .sig { height: 42px; width: auto; margin: 0 auto 18px; opacity: .55; }
.v2-footer nav { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.v2-footer nav a { font-size: 13px; color: var(--ink-mid); text-decoration: none; transition: color var(--fast) var(--ease); }
.v2-footer nav a:hover { color: var(--gold); }


/* ---------- soundtrack control ----------
   js/soundtrack.js injects its own dark styles at runtime, after this file, so
   equal-specificity rules would lose. These are scoped one level deeper
   (.v2-nav .st-btn) to win without !important. */
.v2-nav .st-btn {
  color: var(--ink-mid) !important;
  background: rgba(255,255,255,.72) !important;
  border-color: var(--line-2) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}
.v2-nav .st-btn:hover { color: var(--ink) !important; border-color: var(--gold-lit) !important; background: #fff !important; }
.v2-nav .st-bars i { background: var(--gold) !important; }
.v2-nav .st-menu { background: rgba(255,255,255,.97) !important; border-color: var(--line) !important; box-shadow: 0 18px 44px rgba(0,0,0,.12); }
.v2-nav .st-opt { color: var(--ink-mid) !important; }
.v2-nav .st-opt:hover { background: var(--paper-2) !important; color: var(--ink) !important; }
.v2-nav .st-opt.active { color: var(--gold) !important; }

/* ---------- motion ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* =========================================================
   Signature opener (js/intro.js)

   Full-screen white plate carrying the signature draw, faded away to reveal
   the site. White rather than paper because the exported frames have a pure
   white background and no alpha, so anything else would show a rectangle edge
   around the video. The 2% warm shift to paper happens under the fade and is
   not perceptible.
   ========================================================= */
.tmb-intro {
  position: fixed; inset: 0; z-index: 9999;
  background: #fff;
  display: grid; place-items: center;
  opacity: 1; transition: opacity .7s var(--ease);
  /* Promote to its own layer. Without this the browser repaints the whole page
     underneath on every frame of the fade, which is what made the hand-off to
     the site stutter. */
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.tmb-intro.is-out { opacity: 0; pointer-events: none; }
/* contain, not cover: the signature must never be cropped by an odd viewport.
   The white letterbox is invisible against the white plate. */
.tmb-intro-v { width: 100%; height: 100%; object-fit: contain; display: block; }

.tmb-intro-skip {
  position: absolute; right: clamp(16px, 3vw, 30px); bottom: clamp(16px, 3vw, 30px);
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim); background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 18px; cursor: pointer;
}
.tmb-intro-skip:hover { color: var(--ink); border-color: var(--ink-dim); }

/* No scroll lock: releasing overflow mid-fade brought the scrollbar back and
   shifted the page sideways behind the half-faded plate. Scrolling dismisses
   the opener instead. */

@media (prefers-reduced-motion: reduce) { .tmb-intro { display: none; } }