/* =======================================================
   BARBARA VENNEMAN — Editorial / Museum / Innovation Lab
   Custom design system. No framework, no template.
   ======================================================= */

:root{
  --ink:        #0b0b0c;
  --ink-2:      #17171a;
  --paper:      #f3efe7;
  --paper-2:    #e8e2d5;
  --bone:       #d8d1c0;
  --rule:       #1a1a1d;
  --rule-soft:  rgba(11,11,12,.18);
  --ochre:      #c26a1b;
  --ochre-deep: #8a4510;
  --oat:        #b8a888;
  --sage:       #4a5a3c;
  --ivory:      #faf7f0;
  --grid:       rgba(11,11,12,.06);

  --f-display:  "Fraunces", "Cormorant Garamond", "Times New Roman", serif;
  --f-text:     "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:     "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", monospace;

  --ease:       cubic-bezier(.2,.7,.2,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);

  --mx:         clamp(20px, 4vw, 56px);
}

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

html,body{
  margin:0; padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(11,11,12,.04) 1px, transparent 0),
    linear-gradient(var(--paper), var(--paper));
  background-size:38px 38px, auto;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }

/* Grain overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:200;
  opacity:.35;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* =========================================
   TYPOGRAPHY
   ========================================= */
.display{
  font-family:var(--f-display);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:.92;
  font-variation-settings:"SOFT" 20, "opsz" 144;
}
.display.italic{ font-style:italic; font-variation-settings:"SOFT" 80, "opsz" 144; }

.eyebrow{
  font-family:var(--f-mono);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:11px;
  color:var(--ink);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:28px; height:1px; background:var(--ink);
}
.eyebrow.no-bar::before{ display:none; }

.num-mono{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

h1,h2,h3,h4,h5{ margin:0; font-weight:500; }

.lede{
  font-family:var(--f-display);
  font-size:clamp(22px, 2.4vw, 34px);
  line-height:1.25;
  font-style:italic;
  letter-spacing:-.01em;
  color:var(--ink);
}

p{ margin:0 0 1.1em; }

/* =========================================
   GLOBAL HEADER
   ========================================= */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  padding:20px var(--mx);
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:24px;
  mix-blend-mode:normal;
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(243,239,231,.82);
  backdrop-filter:blur(18px) saturate(1.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  border-bottom-color:var(--rule-soft);
}
.brand{
  font-family:var(--f-display);
  font-size:20px;
  letter-spacing:-.01em;
  line-height:1;
  display:flex; align-items:baseline; gap:10px;
}
.brand .bv{ font-style:italic; }
.brand .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--ochre); transform:translateY(-2px);
}

.nav{
  justify-self:center;
  display:flex; gap:2px;
  padding:6px;
  border:1px solid var(--rule-soft);
  border-radius:999px;
  background:rgba(243,239,231,.6);
  backdrop-filter:blur(10px);
}
.nav a{
  font-family:var(--f-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  padding:10px 14px;
  border-radius:999px;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.nav a:hover{ background:var(--ink); color:var(--paper); }
.nav a.current{ background:var(--ink); color:var(--paper); }

.header-meta{
  justify-self:end;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  display:flex; align-items:center; gap:14px;
}
.header-meta .live{
  display:inline-flex; align-items:center; gap:8px;
}
.header-meta .live::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--ochre);
  box-shadow:0 0 0 4px rgba(194,106,27,.16);
  animation:pulse 2.4s infinite var(--ease);
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(194,106,27,.14); }
  50%{ box-shadow:0 0 0 10px rgba(194,106,27,0); }
}

.menu-toggle{ display:none; }

@media (max-width: 960px){
  .nav{ display:none; position:fixed; top:70px; left:var(--mx); right:var(--mx); flex-direction:column; padding:14px; border-radius:18px; background:var(--paper); box-shadow:0 20px 60px rgba(0,0,0,.15); }
  .nav.open{ display:flex; }
  .nav a{ padding:14px 16px; text-align:left; border-radius:12px; }
  .menu-toggle{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
  .menu-toggle .bar{ display:inline-block; width:22px; height:1px; background:var(--ink); position:relative; }
  .menu-toggle .bar::after{ content:""; position:absolute; left:0; top:-6px; width:22px; height:1px; background:var(--ink); }
  .header-meta{ display:none; }
}

/* =========================================
   PAGE SHELL
   ========================================= */
main{ padding-top:92px; }

.section{
  padding:clamp(60px, 9vw, 140px) var(--mx);
  position:relative;
}
.section.tight{ padding-top:clamp(40px, 5vw, 80px); padding-bottom:clamp(40px, 5vw, 80px); }
.section.paper-2{ background:var(--paper-2); }
.section.ink{ background:var(--ink); color:var(--paper); }
.section.ink .eyebrow::before{ background:var(--paper); }
.section.ink .eyebrow{ color:var(--paper); }

.hair{ height:1px; background:var(--rule-soft); border:0; margin:0; }

/* Edge indicator grid */
.edge-grid{
  position:absolute; inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px);
  background-size: calc(100%/12) 100%;
  opacity:.5;
}

/* =========================================
   HERO (HOMEPAGE)
   ========================================= */
.hero{
  min-height:100svh;
  padding:120px var(--mx) 48px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:24px;
  align-content:space-between;
  position:relative;
}
.hero__meta{
  grid-column: 1 / -1;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  flex-wrap:wrap;
}
.hero__headline{
  grid-column: 1 / -1;
  font-size: clamp(56px, 12vw, 200px);
  margin:6vh 0 0;
}
.hero__headline .line{ display:block; overflow:hidden; }
.hero__headline .line > span{
  display:block;
  transform:translateY(110%);
  animation:rise 1.1s var(--ease-out) forwards;
}
.hero__headline .line:nth-child(2) > span{ animation-delay:.12s; }
.hero__headline .line:nth-child(3) > span{ animation-delay:.22s; }
.hero__headline .line:nth-child(4) > span{ animation-delay:.32s; }

.hero__headline em{
  font-style:italic;
  color:var(--ochre-deep);
  font-variation-settings:"SOFT" 100, "opsz" 144;
}

@keyframes rise{
  from{ transform:translateY(110%); }
  to{ transform:translateY(0); }
}

.hero__foot{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:24px;
  align-items:end;
  padding-top:28px;
  border-top:1px solid var(--rule-soft);
}
.hero__foot .col p{ max-width:38ch; font-size:15px; }
.hero__foot .col .num-mono{ display:block; margin-bottom:10px; opacity:.7; }

@media (max-width:900px){
  .hero__foot{ grid-template-columns:1fr; }
}

/* =========================================
   SIGNATURE PORTRAIT
   ========================================= */
.portrait-stack{
  position:relative;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:24px;
  align-items:center;
}
.portrait-stack__image{
  grid-column: 1 / span 6;
  aspect-ratio: 4/5;
  position:relative;
  overflow:hidden;
  background:var(--bone);
}
.portrait-stack__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: center 20%;
  filter:grayscale(15%) contrast(1.02);
  transform:scale(1.02);
  transition:transform 1.2s var(--ease-out), filter .6s var(--ease);
}
.portrait-stack:hover .portrait-stack__image img{ transform:scale(1.05); filter:grayscale(0%); }
.portrait-stack__image::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.25));
  mix-blend-mode:multiply;
  pointer-events:none;
}
.portrait-stack__tag{
  position:absolute; left:16px; bottom:16px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--paper);
  display:flex; gap:10px; align-items:center;
}
.portrait-stack__tag::before{
  content:""; width:22px; height:1px; background:var(--paper);
}
.portrait-stack__text{
  grid-column: 8 / -1;
}
.portrait-stack__text h2{
  font-family:var(--f-display);
  font-size:clamp(32px,4.2vw,64px);
  letter-spacing:-.02em; line-height:1;
}
.portrait-stack__text p{
  margin-top:24px;
  font-size:17px; max-width:46ch;
}

@media (max-width: 960px){
  .portrait-stack__image{ grid-column: 1 / -1; aspect-ratio:4/5; }
  .portrait-stack__text{ grid-column: 1 / -1; }
}

/* =========================================
   EDITORIAL BLOCKS
   ========================================= */
.editorial{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:24px;
}
.editorial__index{
  grid-column: 1 / span 2;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding-top:6px;
}
.editorial__title{
  grid-column: 3 / span 5;
  font-family:var(--f-display);
  font-size:clamp(28px,3.4vw,54px);
  letter-spacing:-.015em;
  line-height:1.04;
}
.editorial__body{
  grid-column: 8 / -1;
  font-size:17px;
  line-height:1.65;
}
.editorial__body p:first-child::first-letter{
  font-family:var(--f-display);
  font-size:64px;
  float:left;
  line-height:.85;
  margin:6px 10px 0 0;
  font-style:italic;
  color:var(--ochre-deep);
}
@media (max-width:900px){
  .editorial__index{ grid-column: 1 / -1; }
  .editorial__title{ grid-column: 1 / -1; }
  .editorial__body{ grid-column: 1 / -1; }
}

/* =========================================
   MARQUEE / TICKER
   ========================================= */
.ticker{
  border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
  padding:18px 0;
  overflow:hidden;
  white-space:nowrap;
}
.ticker__track{
  display:inline-flex;
  gap:60px;
  animation: tick 42s linear infinite;
  font-family:var(--f-display);
  font-style:italic;
  font-size:clamp(26px, 4vw, 60px);
  letter-spacing:-.01em;
}
.ticker__track span{ display:inline-flex; align-items:center; gap:60px; }
.ticker__track span::after{
  content:"✦"; color:var(--ochre); font-style:normal; font-size:.5em;
  transform:translateY(-.25em);
}
@keyframes tick{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* =========================================
   CARDS / TILES (innovation themes)
   ========================================= */
.tiles{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px;
}
.tile{
  grid-column: span 4;
  background:var(--paper-2);
  border:1px solid var(--rule-soft);
  padding:28px;
  min-height:320px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  position:relative;
  overflow:hidden;
}
.tile:hover{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
  transform:translateY(-4px);
}
.tile:hover .tile__arrow{ transform:translate(6px,-6px); }
.tile:hover .tile__no{ color:var(--ochre); }
.tile__no{
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ochre-deep);
  transition:color .4s var(--ease);
}
.tile h3{
  font-family:var(--f-display);
  font-size:clamp(24px, 2.6vw, 34px);
  line-height:1.05;
  letter-spacing:-.01em;
  margin-top:50px;
}
.tile p{ font-size:14px; margin-top:14px; opacity:.82; }
.tile__arrow{
  position:absolute; top:28px; right:28px;
  width:28px; height:28px;
  transition:transform .4s var(--ease);
}
.tile__arrow svg{ width:100%; height:100%; }

@media (max-width:900px){ .tile{ grid-column:1 / -1; } }

/* =========================================
   QUOTE PANEL
   ========================================= */
.quote-panel{
  padding:clamp(70px, 10vw, 160px) var(--mx);
  background:var(--ink); color:var(--paper);
  position:relative;
  overflow:hidden;
}
.quote-panel::before{
  content:"“";
  position:absolute;
  top:-20px; left:var(--mx);
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(260px, 40vw, 560px);
  color:rgba(194,106,27,.14);
  line-height:1;
  pointer-events:none;
}
.quote-panel blockquote{
  position:relative;
  margin:0; max-width:22ch;
  font-family:var(--f-display);
  font-size:clamp(32px, 4.6vw, 80px);
  font-style:italic;
  line-height:1.05;
  letter-spacing:-.01em;
}
.quote-panel .signoff{
  margin-top:40px;
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
}

/* =========================================
   STAT STRIP
   ========================================= */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
}
.stat{
  padding:36px 28px;
  border-right:1px solid var(--rule-soft);
}
.stat:last-child{ border-right:0; }
.stat__big{
  font-family:var(--f-display);
  font-size:clamp(40px, 5vw, 72px);
  line-height:1;
  letter-spacing:-.02em;
  display:flex; align-items:baseline;
}
.stat__big em{ font-style:italic; color:var(--ochre-deep); }
.stat__label{
  margin-top:12px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  opacity:.8;
}
@media (max-width:900px){
  .stats{ grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-child(1), .stat:nth-child(2){ border-bottom:1px solid var(--rule-soft); }
}

/* =========================================
   PAGE INTRO (non-home pages)
   ========================================= */
.page-intro{
  padding:160px var(--mx) 80px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px;
  position:relative;
}
.page-intro__meta{
  grid-column:1 / span 3;
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.page-intro__meta div{ margin-bottom:8px; }
.page-intro__title{
  grid-column: 4 / -1;
  font-family:var(--f-display);
  font-size:clamp(52px, 10vw, 160px);
  line-height:.92;
  letter-spacing:-.025em;
}
.page-intro__title em{ color:var(--ochre-deep); }
.page-intro__sub{
  grid-column: 4 / span 7;
  margin-top:40px;
  font-family:var(--f-display);
  font-style:italic;
  font-size:clamp(22px, 2.4vw, 32px);
  line-height:1.3;
  color:var(--ink);
}
@media (max-width:900px){
  .page-intro__meta{ grid-column: 1 / -1; }
  .page-intro__title{ grid-column: 1 / -1; }
  .page-intro__sub{ grid-column: 1 / -1; }
}

/* =========================================
   IMAGE FRAME (face-safe edge-to-edge)
   ========================================= */
.frame{
  position:relative;
  overflow:hidden;
  background:var(--bone);
  isolation:isolate;
}
.frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position: center 22%; /* shift so face never clips */
  transition:transform 1.2s var(--ease-out);
}
.frame:hover img{ transform:scale(1.035); }
.frame.contain img{ object-fit:contain; object-position:center center; background:var(--paper-2); }
.frame.wide{ aspect-ratio:16/9; }
.frame.square{ aspect-ratio:1/1; }
.frame.tall{ aspect-ratio:4/5; }
.frame.portrait{ aspect-ratio:3/4; }

/* backdrop version — blurred image fills space, sharp contained in middle (face-safe) */
.frame.safe{
  background:var(--ink-2);
}
.frame.safe::before{
  content:""; position:absolute; inset:0;
  /* Inherit the frame's own (inline-set) background-image so the URL resolves
     against the HTML document — not assets/css/ — in every browser. */
  background-image: inherit;
  background-size:cover; background-position:center;
  filter:blur(40px) saturate(1.2) brightness(.55);
  transform:scale(1.2);
}
.frame.safe img{
  position:relative;
  object-fit:contain;
  object-position:center center;
  width:100%; height:100%;
}

.frame__caption{
  position:absolute; left:16px; bottom:16px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper);
  display:flex; gap:10px; align-items:center;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* =========================================
   SPLIT SECTION
   ========================================= */
.split{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:0;
  align-items:stretch;
  min-height:70vh;
}
.split__visual{ grid-column: 1 / span 6; position:relative; overflow:hidden; }
.split__visual .frame{ position:absolute; inset:0; aspect-ratio:auto; }
.split__body{
  grid-column: 8 / -1;
  padding:60px 40px 60px 0;
  align-self:center;
}
.split.reverse .split__visual{ grid-column: 7 / -1; }
.split.reverse .split__body{ grid-column: 1 / span 6; padding:60px 40px 60px var(--mx); }

.split__body h2{
  font-family:var(--f-display);
  font-size:clamp(32px, 4.4vw, 64px);
  line-height:1; letter-spacing:-.02em;
}
.split__body .lede{ margin-top:26px; }
.split__body p{ margin-top:16px; font-size:16px; }

@media (max-width:960px){
  .split{ grid-template-columns:1fr; }
  .split__visual, .split.reverse .split__visual{ grid-column:1; min-height:60vh; }
  .split__body, .split.reverse .split__body{ grid-column:1; padding:40px var(--mx); }
}

/* =========================================
   TIMELINE
   ========================================= */
.timeline{
  display:grid;
  grid-template-columns: 1fr;
  gap:0;
  position:relative;
  border-top:1px solid var(--rule-soft);
}
.tl-row{
  display:grid;
  grid-template-columns: 140px 1fr 2fr 1fr;
  gap:24px;
  padding:36px 0;
  border-bottom:1px solid var(--rule-soft);
  align-items:start;
  position:relative;
  transition:background .3s var(--ease);
}
.tl-row:hover{ background:rgba(194,106,27,.06); }
.tl-year{
  font-family:var(--f-display);
  font-size:clamp(32px, 3.4vw, 52px);
  line-height:1; letter-spacing:-.02em;
  font-style:italic;
}
.tl-tag{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ochre-deep); padding-top:10px;
}
.tl-body h4{
  font-family:var(--f-display);
  font-size:clamp(20px, 2vw, 28px);
  line-height:1.1; letter-spacing:-.01em;
  font-weight:500;
}
.tl-body p{ margin-top:10px; font-size:15px; max-width:60ch; }
.tl-loc{
  padding-top:14px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  text-align:right;
  opacity:.7;
}
@media (max-width:900px){
  .tl-row{ grid-template-columns: 1fr 1fr; }
  .tl-body{ grid-column:1 / -1; }
  .tl-loc{ text-align:left; grid-column:1 / -1; }
}

/* =========================================
   INSIGHT CARDS
   ========================================= */
.insights-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:36px 24px;
}
.insight{
  grid-column: span 6;
  display:grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap:14px;
  padding-bottom:28px;
  border-bottom:1px solid var(--rule-soft);
}
.insight.feature{ grid-column: span 12; display:grid; grid-template-columns: 1.2fr 1fr; gap:36px; align-items:start; }
.insight.feature .insight__body{ padding:8px 0; }
.insight__cat{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ochre-deep);
}
.insight__title{
  font-family:var(--f-display);
  font-size:clamp(22px, 2.2vw, 32px);
  line-height:1.1; letter-spacing:-.01em;
}
.insight.feature .insight__title{ font-size:clamp(32px, 3.6vw, 52px); }
.insight__excerpt{ font-size:15px; color:var(--ink-2); opacity:.85; }
.insight__meta{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  display:flex; justify-content:space-between; opacity:.6;
  margin-top:10px;
}
.insight__cover{
  aspect-ratio: 4/3;
  background:var(--paper-2);
  position:relative; overflow:hidden;
  border:1px solid var(--rule-soft);
}
.insight__cover.mono{ background:linear-gradient(135deg, var(--paper-2), var(--bone)); }

@media (max-width:900px){
  .insight, .insight.feature{ grid-column:1 / -1; grid-template-columns:1fr; }
}

/* =========================================
   GALLERY
   ========================================= */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:8px;
}
.g-item{ position:relative; overflow:hidden; background:var(--bone); }
.g-item .frame{ position:absolute; inset:0; aspect-ratio:auto; }
.g-01{ grid-column: span 8; aspect-ratio:16/9; }
.g-02{ grid-column: span 4; aspect-ratio:3/4; }
.g-03{ grid-column: span 4; aspect-ratio:3/4; }
.g-04{ grid-column: span 4; aspect-ratio:3/4; }
.g-05{ grid-column: span 4; aspect-ratio:3/4; }
.g-06{ grid-column: span 6; aspect-ratio:4/3; }
.g-07{ grid-column: span 6; aspect-ratio:4/3; }
.g-08{ grid-column: span 12; aspect-ratio:21/9; }

@media (max-width:900px){
  .g-01,.g-02,.g-03,.g-04,.g-05,.g-06,.g-07,.g-08{ grid-column: span 12; }
}

/* =========================================
   CONTACT
   ========================================= */
.contact{
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap:24px;
  align-items:start;
}
.contact__left{ grid-column: 1 / span 7; }
.contact__right{ grid-column: 9 / -1; padding-top:12px; }
.contact__list{ list-style:none; margin:40px 0 0; padding:0; }
.contact__list li{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:24px;
  padding:22px 0;
  border-top:1px solid var(--rule-soft);
  align-items:baseline;
}
.contact__list li:last-child{ border-bottom:1px solid var(--rule-soft); }
.contact__list .lbl{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.contact__list .val{
  font-family:var(--f-display);
  font-size:clamp(22px, 2.4vw, 32px);
  line-height:1; letter-spacing:-.01em;
}
.contact__list .val a{ position:relative; }
.contact__list .val a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:currentColor; transform-origin:left; transform:scaleX(0);
  transition:transform .4s var(--ease);
}
.contact__list .val a:hover::after{ transform:scaleX(1); }

@media (max-width:900px){
  .contact__left, .contact__right{ grid-column:1 / -1; }
  .contact__list li{ grid-template-columns:1fr; gap:8px; }
}

/* =========================================
   CONTACT FORM
   ========================================= */
.contact-form{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:24px;
  margin-top:18px;
}
.field{
  position:relative;
  grid-column: span 6;
  border-bottom:1px solid var(--rule-soft);
  padding:20px 0 10px;
  transition:border-color .3s var(--ease);
}
.field.full{ grid-column: span 12; }
.field__label{
  position:absolute;
  left:0; top:20px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:.55;
  pointer-events:none;
  transform-origin:left center;
  transition:transform .35s var(--ease), opacity .25s var(--ease), color .25s var(--ease);
}
.field__label .req{ color:var(--ochre-deep); margin-left:4px; }
.field input,
.field select,
.field textarea{
  width:100%;
  background:transparent;
  border:0; outline:0;
  font-family:var(--f-display);
  font-size:clamp(20px, 2vw, 26px);
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--ink);
  padding:14px 0 4px;
  resize:vertical;
}
.field select{
  font-family:var(--f-display);
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='1.4'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right center;
  padding-right:26px;
  cursor:pointer;
}
.field textarea{ min-height:90px; }
.field:focus-within{ border-bottom-color:var(--ochre); }
.field:focus-within .field__label,
.field.has-value .field__label{
  transform:translateY(-22px) scale(.82);
  opacity:1;
  color:var(--ochre-deep);
}
.field input::placeholder,
.field textarea::placeholder{ color:transparent; }

.form-actions{
  grid-column: span 12;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:18px;
  padding-top:12px;
}
.form-actions .disclaimer{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.6;
  max-width:48ch;
}
.btn-submit{
  display:inline-flex; align-items:center; gap:12px;
  padding:18px 28px;
  background:var(--ink);
  color:var(--paper);
  border-radius:999px;
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600;
  transition:background .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.btn-submit:hover{ background:var(--ochre); color:var(--ink); transform:translateY(-1px); }
.btn-submit .arrow{
  display:inline-block;
  width:22px; height:1px;
  background:currentColor;
  position:relative;
}
.btn-submit .arrow::after{
  content:""; position:absolute; right:0; top:-4px;
  width:9px; height:9px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg);
}

.form-status{
  grid-column: span 12;
  min-height:18px;
  padding-top:4px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.form-status.show{ opacity:1; transform:translateY(0); }
.form-status.ok{ color:var(--sage); }
.form-status.err{ color:#b04a2a; }

.form-success{
  grid-column: 1 / -1;
  margin-top:32px;
  padding:40px;
  background:var(--paper-2);
  border:1px solid var(--rule-soft);
  border-left:3px solid var(--ochre);
  display:none;
}
.form-success.show{ display:block; animation:rise2 .8s var(--ease-out); }
.form-success h4{
  font-family:var(--f-display);
  font-size:clamp(22px, 2.2vw, 30px);
  letter-spacing:-.01em;
  line-height:1.1;
}
.form-success p{ margin-top:10px; font-size:15px; max-width:60ch; }

@media (max-width:700px){
  .field{ grid-column: span 12; }
}

/* Social */
.socials{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.socials a{
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--rule-soft);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.socials a:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.socials svg{ width:16px; height:16px; }

/* =========================================
   FOOTER
   ========================================= */
.site-footer{
  background:var(--ink); color:var(--paper);
  padding:90px var(--mx) 40px;
  position:relative;
  overflow:hidden;
}
.site-footer::before{
  content:"Barbara Venneman";
  position:absolute; left:-2vw; bottom:-4vw;
  font-family:var(--f-display);
  font-size:22vw;
  line-height:.8;
  letter-spacing:-.03em;
  color:rgba(243,239,231,.06);
  pointer-events:none;
  white-space:nowrap;
  font-style:italic;
}
.footer-top{
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap:24px;
  padding-bottom:60px;
  border-bottom:1px solid rgba(243,239,231,.15);
}
.footer-top h3{
  grid-column: 1 / span 7;
  font-family:var(--f-display);
  font-size:clamp(34px, 4.6vw, 72px);
  line-height:1.02; letter-spacing:-.02em;
}
.footer-top h3 em{ color:var(--ochre); }
.footer-top .meta{
  grid-column: 9 / -1;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  opacity:.8;
}

.footer-columns{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:40px;
  padding:50px 0 40px;
}
.footer-columns h5{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  opacity:.6; margin-bottom:18px;
}
.footer-columns ul{ list-style:none; margin:0; padding:0; }
.footer-columns li{ padding:6px 0; font-size:15px; font-family:var(--f-display); letter-spacing:-.01em; }
.footer-columns li a{ opacity:.9; transition:color .2s, opacity .2s; }
.footer-columns li a:hover{ color:var(--ochre); opacity:1; }

.footer-bottom{
  padding-top:30px;
  border-top:1px solid rgba(243,239,231,.15);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  position:relative; z-index:1;
}
.footer-bottom a{ border-bottom:1px dashed rgba(243,239,231,.4); padding-bottom:2px; }
.footer-bottom a:hover{ color:var(--ochre); border-color:var(--ochre); }
.footer-bottom .socials a{ border-color:rgba(243,239,231,.3); }
.footer-bottom .socials a:hover{ background:var(--ochre); border-color:var(--ochre); color:var(--ink); }

@media (max-width:900px){
  .footer-top h3, .footer-top .meta{ grid-column:1 / -1; }
  .footer-columns{ grid-template-columns: repeat(2,1fr); }
}

/* =========================================
   ACCESS GATE
   ========================================= */
.gate{
  min-height:100svh;
  min-height:100vh;
  background:var(--ink);
  color:var(--paper);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px;
  padding:40px var(--mx);
  position:relative;
  overflow:hidden;
}
.gate::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(194,106,27,.35), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(74,90,60,.25), transparent 40%);
  filter:blur(40px);
  pointer-events:none;
  z-index:0;
}
.gate > *{ position:relative; z-index:1; }
.gate__top{
  grid-column:1 / -1;
  display:flex;
  justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  opacity:.7;
}
.gate__center{
  grid-column: 3 / span 8;
  align-self:center;
  text-align:center;
  padding:60px 0;
}
.gate__eye{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:12px;
  padding:10px 20px;
  border:1px solid rgba(243,239,231,.25);
  border-radius:999px;
  margin-bottom:32px;
}
.gate__eye .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--ochre);
  box-shadow:0 0 0 4px rgba(194,106,27,.25);
  animation:pulse 2.4s infinite var(--ease);
}
.gate h1{
  font-family:var(--f-display);
  font-size:clamp(48px, 8vw, 120px);
  line-height:.94; letter-spacing:-.025em;
  font-style:italic;
  font-variation-settings:"SOFT" 80, "opsz" 144;
}
.gate h1 em{ color:var(--ochre); }
.gate p.sub{
  max-width:50ch;
  margin:30px auto 0;
  font-family:var(--f-display);
  font-size:clamp(16px, 1.4vw, 20px);
  font-style:italic;
  opacity:.85;
}
.gate__form{
  margin:44px auto 0;
  max-width:480px;
  display:flex; flex-direction:column; gap:16px;
}
.gate__input{
  display:flex;
  align-items:center;
  border:1px solid rgba(243,239,231,.25);
  border-radius:999px;
  padding:6px 6px 6px 22px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  background:rgba(11,11,12,.4);
  backdrop-filter:blur(10px);
}
.gate__input:focus-within{
  border-color:var(--ochre);
  box-shadow:0 0 0 4px rgba(194,106,27,.18);
}
.gate__input input{
  flex:1;
  background:none; border:0; color:var(--paper);
  font-family:var(--f-mono); font-size:14px; letter-spacing:.18em;
  padding:16px 0;
  outline:none;
}
.gate__input input::placeholder{
  color:rgba(243,239,231,.4); text-transform:uppercase; letter-spacing:.22em; font-size:12px;
}
.gate__submit{
  background:var(--ochre);
  color:var(--ink);
  border-radius:999px;
  padding:14px 24px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600;
  transition:background .3s var(--ease), transform .2s var(--ease);
}
.gate__submit:hover{ background:var(--paper); transform:translateY(-1px); }
.gate__error{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:#ff8a6b; opacity:0;
  transform:translateY(4px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  min-height:14px; text-align:center;
}
.gate__error.show{ opacity:1; transform:translateY(0); }

.gate__bottom{
  grid-column:1 / -1;
  align-self:end;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  opacity:.6;
}

.gate-lines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(243,239,231,.04) 1px, transparent 1px);
  background-size: calc(100%/12) 100%;
  z-index:0; pointer-events:none;
}

/* tiny reveal for gate title */
.gate h1 span{
  display:inline-block;
  opacity:0; transform:translateY(14px);
  animation:rise2 1.1s var(--ease-out) forwards;
}
.gate h1 span:nth-child(1){ animation-delay:.1s; }
.gate h1 span:nth-child(2){ animation-delay:.25s; }
.gate h1 span:nth-child(3){ animation-delay:.4s; }
@keyframes rise2{ to{ opacity:1; transform:translateY(0); } }

/* Reveal animation for general sections */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
[data-reveal].in{ opacity:1; transform:translateY(0); }

/* Page transition veil */
.veil{
  position:fixed; inset:0;
  background:var(--ink);
  z-index:999;
  pointer-events:none;
  transform:translateY(100%);
}
.veil.in{ animation:veil-in .7s var(--ease-out) forwards; }
.veil.out{ animation:veil-out .9s var(--ease-out) forwards; }
@keyframes veil-in{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
@keyframes veil-out{ from{ transform:translateY(0);} to{ transform:translateY(-100%);} }

/* Misc util */
.u-center{ text-align:center; }
.u-max{ max-width:70ch; }
.u-mt-s{ margin-top:20px; }
.u-mt-m{ margin-top:40px; }
.u-mt-l{ margin-top:80px; }
.u-pt-0{ padding-top:0 !important; }

/* Reading column */
.reading{
  max-width:70ch;
  margin:0 auto;
  font-size:17px; line-height:1.75;
}
.reading h2{
  font-family:var(--f-display);
  font-size:clamp(28px, 3vw, 40px);
  letter-spacing:-.015em;
  margin: 2.2em 0 .6em;
  line-height:1.1;
}
.reading h3{
  font-family:var(--f-display);
  font-size:clamp(22px, 2.2vw, 28px);
  margin: 1.6em 0 .4em;
  line-height:1.15;
  font-style:italic;
  color:var(--ochre-deep);
}
.reading blockquote{
  margin: 1.8em 0;
  padding-left:28px;
  border-left:2px solid var(--ochre);
  font-family:var(--f-display);
  font-style:italic;
  font-size:clamp(22px, 2vw, 30px);
  line-height:1.3;
  letter-spacing:-.01em;
}

/* Pull quote */
.pull{
  max-width:90%;
  margin:80px auto;
  text-align:center;
  font-family:var(--f-display);
  font-style:italic;
  font-size:clamp(26px, 3.4vw, 52px);
  line-height:1.12; letter-spacing:-.015em;
  padding:0 20px;
  position:relative;
}
.pull::before, .pull::after{
  content:""; display:block; width:60px; height:1px;
  background:var(--ochre); margin:30px auto;
}

/* Two-column feature layout */
.feature-split{
  display:grid; grid-template-columns:repeat(12,1fr); gap:24px;
  align-items:start;
}
.feature-split__copy{ grid-column: 1 / span 6; }
.feature-split__art{ grid-column: 7 / -1; position:sticky; top:110px; }
@media (max-width:960px){
  .feature-split__copy, .feature-split__art{ grid-column:1 / -1; position:static; }
}

/* Numbered list (principles) */
.principles{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--rule-soft); }
.principle{
  display:grid; grid-template-columns: 80px 1fr 2fr; gap:24px;
  padding:34px 0;
  border-bottom:1px solid var(--rule-soft);
  transition:background .3s var(--ease);
}
.principle:hover{ background:rgba(194,106,27,.06); }
.principle__no{ font-family:var(--f-mono); font-size:12px; letter-spacing:.2em; color:var(--ochre-deep); }
.principle__name{ font-family:var(--f-display); font-size:clamp(22px, 2.2vw, 30px); letter-spacing:-.01em; line-height:1.1; }
.principle__desc{ font-size:15px; max-width:60ch; }
@media (max-width:900px){
  .principle{ grid-template-columns: 1fr; }
}

/* pill link */
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px;
  border:1px solid var(--ink);
  border-radius:999px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.pill:hover{ background:var(--ink); color:var(--paper); }
.pill.light{ border-color:var(--paper); color:var(--paper); }
.pill.light:hover{ background:var(--paper); color:var(--ink); }
.pill.primary{ background:var(--ochre); border-color:var(--ochre); color:var(--ink); }
.pill.primary:hover{ background:var(--ink); color:var(--ochre); }

.cta-band{
  padding: clamp(60px, 8vw, 120px) var(--mx);
  background:var(--ivory);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px;
  align-items:center;
}
.cta-band h3{
  grid-column: 1 / span 8;
  font-family:var(--f-display);
  font-size:clamp(30px, 4vw, 56px);
  line-height:1.05; letter-spacing:-.02em;
}
.cta-band .actions{
  grid-column: 9 / -1;
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:flex-end;
}
@media (max-width:900px){
  .cta-band h3, .cta-band .actions{ grid-column:1 / -1; }
  .cta-band .actions{ justify-content:flex-start; }
}