/* ============================================================
   VANESSA VON FRANKENBERG — brand foundation (light)
   Inverted GBY system · Parchment / Ivory · Cormorant + DM Sans
   ============================================================ */

/* self-hosted fonts — no third-party requests */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-500-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-500-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-garamond-600-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-garamond-600-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/dm-sans-300-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/dm-sans-300-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-sans-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-sans-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/dm-sans-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/dm-sans-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


:root {
  /* palette — warm light (new brand guide) */
  --parchment: #EDE6DA;
  --ivory:     #F5F0E7;
  --warm-grey: #EAE2D4;
  --sand:      #D8C7B0;

  --ink:    #2A211A;   /* espresso headlines */
  --ink-2:  #4A4036;   /* body — warm dark brown */
  --ink-3:  #8A7D6B;   /* muted / secondary */
  --stone:  #C9B99F;   /* warm beige — rules, fine accents */

  /* darks — two only */
  --espresso:  #2A211A;   /* primary dark sections */
  --cocoa:     #17110C;   /* deepest — footer, hovers */

  /* the one cream on dark */
  --cream:     #ECE4D6;

  /* the single accent */
  --brass:     #C9A86A;

  /* legacy aliases (map onto the new system) */
  --forest:    var(--espresso);
  --moss:      #332921;
  --sage:      #9C825F;   /* neutral warm — muted icons/labels */
  --sage-soft: #B79B7B;   /* neutral warm — muted labels */

  --line:       #DBCFBC;   /* hairline on light */
  --line-soft:  #E4D9C7;
  --line-dark:  rgba(236,228,214,0.16); /* hairline on espresso */

  /* tokens that flip per-tone (default = on light) */
  --ink-on:    var(--ink);
  --ink-on-2:  var(--ink-2);
  --eyebrow-c: var(--brass);

  /* type */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  /* rhythm */
  --section-y: clamp(5.5rem, 12vw, 12rem);
  --gutter: clamp(1.5rem, 6vw, 8rem);
  --measure: 60ch;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  font-family: var(--sans); font-weight: 400; line-height: 1.7;
  background: var(--parchment); color: var(--ink-2);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- type primitives ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: clamp(10px, 0.78vw, 12px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--eyebrow-c);
}
.eyebrow > svg { width: 15px; height: auto; vertical-align: -0.15em; margin-right: 0.55em; }
.eyebrow > svg path { fill: currentColor; }
.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink-on);
  text-wrap: balance;
}
.serif-h {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.006em;
  color: var(--ink-on);
  text-wrap: balance;
}
.lede {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink-on-2);
}
.body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.02rem, 1.1vw, 1.18rem);
  line-height: 1.75;
  color: var(--ink-on-2);
  max-width: var(--measure);
}
.em-serif { font-family: var(--serif); font-style: italic; }

/* ---------- the spark (connective motif from GBY) ---------- */
.spark { display: inline-block; width: 22px; height: auto; }
.spark path { fill: var(--brass); }

/* ---------- inline text link ---------- */
.tlink {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--sans); font-weight: 500; font-size: 0.95rem;
  letter-spacing: 0.01em; color: var(--ink-on);
  border-bottom: 1px solid var(--brass); padding-bottom: 0.3rem;
  transition: color .3s ease, border-color .3s ease, gap .3s ease;
}
.tlink .arrow { transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.tlink:hover { gap: 0.85em; }
.tlink:hover .arrow { transform: translateX(4px); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1.1rem,2vw,1.7rem) var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background .45s ease, backdrop-filter .45s ease, padding .45s ease, border-color .45s ease;
}
.nav.is-stuck {
  background: color-mix(in oklab, var(--parchment) 80%, transparent);
  backdrop-filter: blur(14px) saturate(1.05);
  border-bottom-color: var(--line);
  padding-top: 0.85rem; padding-bottom: 0.85rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand .spark { width: 15px; }
.brand .spark path { fill: var(--brass); transition: fill .4s ease; }
.brand .wordmark {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink);
  line-height: 1.3; white-space: nowrap;
}

/* ---------- accessibility ---------- */
.skip-link {
  position: fixed; top: 0; left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 200; background: var(--forest); color: var(--parchment);
  font-family: var(--sans); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em;
  padding: 0.7rem 1.3rem; border-radius: 0 0 12px 12px;
  transition: transform .25s ease;
}
.skip-link:focus { transform: translateX(-50%) translateY(0); outline: none; }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; border-radius: 3px; }
.tone-forest :focus-visible { outline-color: var(--sage-soft); }

/* ---------- film grain (matches GBY texture, lighter) ---------- */
.has-grain body::after {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.045;
  mix-blend-mode: multiply;
}

/* ---------- structure ---------- */
.section { padding: var(--section-y) var(--gutter); }
.wrap { max-width: 1340px; margin: 0 auto; }
.wrap-narrow { max-width: 980px; margin: 0 auto; }

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s cubic-bezier(.2,.7,.3,1), transform 1s cubic-bezier(.2,.7,.3,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .09s; }
[data-reveal][data-delay="2"] { transition-delay: .18s; }
[data-reveal][data-delay="3"] { transition-delay: .27s; }
[data-reveal][data-delay="4"] { transition-delay: .36s; }
[data-reveal][data-delay="5"] { transition-delay: .45s; }

.reveal-off [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}