/* ═══════════════════════════════════════════════════════════════
   AMBER BLAKE — Conscious Connections
   Palettes · Type presets · Immersive scroll
   ═══════════════════════════════════════════════════════════════ */

/* ── PALETTES ──────────────────────────────────────────────── */
:root[data-palette="heritage"]{
  --bg:#F4E9E2; --bg-deep:#EAD6CC; --surface:#FCF6F1;
  --ink:#3A2C28; --ink-soft:#6E5A52; --ink-faint:#9A877E;
  --gold:#B68B4C; --gold-soft:#C8A878; --accent:#C2867F;
  --line:rgba(58,44,40,.16); --line-soft:rgba(58,44,40,.09);
  --veil:rgba(244,233,226,.0);
  --field:rgba(58,44,40,.04);
}
:root[data-palette="midnight"]{
  --bg:#15110E; --bg-deep:#0B0908; --surface:#1E1813;
  --ink:#EDE3D4; --ink-soft:#B6A48C; --ink-faint:#7C6C58;
  --gold:#CBA463; --gold-soft:#E0C691; --accent:#C28F87;
  --line:rgba(237,227,212,.15); --line-soft:rgba(237,227,212,.08);
  --veil:rgba(11,9,8,.0);
  --field:rgba(237,227,212,.05);
}
:root[data-palette="coastal"]{
  --bg:#E9E3D8; --bg-deep:#D6D0C2; --surface:#F3EFE7;
  --ink:#2C322E; --ink-soft:#586059; --ink-faint:#8A9088;
  --gold:#A98F63; --gold-soft:#C0AB85; --accent:#7C8B90;
  --line:rgba(44,50,46,.16); --line-soft:rgba(44,50,46,.08);
  --veil:rgba(233,227,216,.0);
  --field:rgba(44,50,46,.04);
}

/* ── TYPE PRESETS ─────────────────────────────────────────── */
:root[data-type="couture"]{
  --f-display:"Cormorant Garamond", Georgia, serif;
  --f-body:"Jost", system-ui, sans-serif;
  --f-label:"Jost", system-ui, sans-serif;
  --display-weight:500; --display-tight:-0.015em; --display-leading:0.98;
}
:root[data-type="editorial"]{
  --f-display:"Bodoni Moda", Georgia, serif;
  --f-body:"Hanken Grotesk", system-ui, sans-serif;
  --f-label:"Hanken Grotesk", system-ui, sans-serif;
  --display-weight:500; --display-tight:-0.01em; --display-leading:1.0;
}
:root[data-type="literary"]{
  --f-display:"EB Garamond", Georgia, serif;
  --f-body:"EB Garamond", Georgia, serif;
  --f-label:"Jost", system-ui, sans-serif;
  --display-weight:500; --display-tight:0; --display-leading:1.04;
}

/* ── RESET / BASE ─────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-weight:300;
  line-height:1.6; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .9s ease, color .9s ease;
}
::selection{background:var(--gold); color:var(--bg);}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
em{font-style:italic}

.wrap{width:min(1240px, 88vw); margin-inline:auto}

/* kickers / labels */
.kicker{
  font-family:var(--f-label); font-weight:500;
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-soft); display:flex; align-items:center; gap:.7em;
}
.kicker span{color:var(--gold); letter-spacing:0}
.kicker--center{justify-content:center; color:var(--gold)}
.kicker--center span{color:var(--ink-faint)}

/* ── WEBGL STAGE ──────────────────────────────────────────── */
.stage{position:fixed; inset:0; z-index:0; pointer-events:none}
.stage canvas{width:100%; height:100%; display:block}
.stage-grain{
  position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScuNScvPjwvc3ZnPg==");
}
.stage-veil{position:absolute; inset:0; background:var(--veil); transition:background .6s ease}

main{position:relative; z-index:1}

/* ── NAV ──────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem clamp(1.2rem,4vw,3.2rem);
  transition:padding .5s ease, background .5s ease, backdrop-filter .5s ease;
  mix-blend-mode:normal;
}
.nav.scrolled{
  padding-block:1rem;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:.5px solid var(--line-soft);
}
.nav-brand{display:flex; align-items:center; line-height:1}
.mark{font-family:var(--f-display); font-weight:var(--display-weight)}
.mark--word{
  font-size:1.5rem; letter-spacing:.04em; font-style:italic;
  display:inline-flex; align-items:baseline; gap:.06em;
}
.mark-amp{color:var(--gold); font-style:normal; transform:translateY(-.1em)}
.mark--mono{display:none; font-size:1.7rem; letter-spacing:-.04em; position:relative}
.mark--mono .mono-a{color:var(--ink)}
.mark--mono .mono-b{color:var(--gold); margin-left:-.18em}

:root[data-name="monogram"] .mark--word{display:none}
:root[data-name="monogram"] .mark--mono{display:inline-flex; align-items:baseline}

.nav-links{display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.4rem)}
.nav-links a{
  font-family:var(--f-label); font-size:.74rem; font-weight:400; white-space:nowrap;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  display:inline-flex; align-items:baseline; gap:.45em; position:relative;
  transition:color .35s ease;
}
.nav-links a span{font-size:.6rem; color:var(--gold); letter-spacing:0}
.nav-links a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; bottom:-.45em; height:1px; width:0;
  background:var(--gold); transition:width .4s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:not(.nav-cta):hover{color:var(--ink)}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav-cta{
  color:var(--ink); border:.5px solid var(--line);
  padding:.6em 1.2em; border-radius:999px; transition:all .4s ease;
}
.nav-cta:hover{background:var(--ink); color:var(--bg); border-color:var(--ink)}
@media (max-width:900px){
  .nav-links a:not(.nav-cta):not(:last-child){display:none}
}

/* ── SPLIT TYPE HELPERS ──────────────────────────────────── */
.line-mask{display:block; overflow:hidden}
.line-inner{display:block; will-change:transform}
[data-reveal]{will-change:transform,opacity}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{
  min-height:100svh; position:relative;
  display:flex; flex-direction:column; justify-content:center;
  padding:8rem clamp(1.2rem,4vw,3.2rem) 3rem;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(105deg, color-mix(in srgb,var(--bg) 62%, transparent) 0%,
      color-mix(in srgb,var(--bg) 30%, transparent) 34%, transparent 62%),
    linear-gradient(to top, color-mix(in srgb,var(--bg) 55%, transparent), transparent 32%);
}
.hero-inner{max-width:min(1100px,92vw)}
.hero-eyebrow{
  font-family:var(--f-label); font-weight:400;
  font-size:.82rem; letter-spacing:.5em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.6rem; padding-left:.2em;
}
.hero-title{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:clamp(3.6rem,12vw,11rem); line-height:var(--display-leading);
  letter-spacing:var(--display-tight); color:var(--ink);
}
.hero-title em{
  font-style:italic; color:transparent;
  background:linear-gradient(100deg,var(--gold),var(--gold-soft) 45%,var(--accent));
  -webkit-background-clip:text; background-clip:text;
}
.hero-sub{
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(1rem,1.7vw,1.4rem); letter-spacing:.06em;
  color:var(--ink-soft); margin-top:2rem; max-width:42ch;
}
.hero-foot{
  position:absolute; left:clamp(1.2rem,4vw,3.2rem); right:clamp(1.2rem,4vw,3.2rem);
  bottom:2.4rem; display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
}
.hero-scroll{
  display:flex; align-items:center; gap:.8rem;
  font-family:var(--f-label); font-size:.68rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-soft);
}
.hero-scroll i{
  width:42px; height:1px; background:var(--line); position:relative; overflow:hidden;
}
.hero-scroll i::after{
  content:""; position:absolute; inset:0; background:var(--gold);
  transform:translateX(-100%); animation:scrollline 2.6s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes scrollline{0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(100%)}}
.hero-coords{
  font-family:var(--f-label); font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-faint); text-align:right;
}

/* ── MANIFESTO ────────────────────────────────────────────── */
.manifesto{
  position:relative; background:var(--bg);
  padding:clamp(7rem,16vh,13rem) 0;
  border-top:.5px solid var(--line-soft);
}
.manifesto-lead{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:clamp(2.2rem,5.4vw,5.2rem); line-height:1.06;
  letter-spacing:var(--display-tight); margin:2rem 0;
  max-width:18ch;
}
.manifesto-lead em{color:var(--gold)}
.verbs{
  display:flex; flex-wrap:wrap; gap:.2em 1.1em;
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.1rem,2.4vw,2rem); color:var(--ink-faint);
  margin:1rem 0 2.6rem; max-width:30ch;
}
.verbs span{transition:color .4s ease}
.manifesto-body{
  font-size:clamp(1rem,1.5vw,1.3rem); font-weight:300;
  color:var(--ink-soft); max-width:46ch; line-height:1.7;
}

/* ── PILLARS ──────────────────────────────────────────────── */
.pillars{background:var(--bg); padding-bottom:clamp(4rem,10vh,8rem)}
.pillar{
  width:min(1240px,88vw); margin-inline:auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,6vw,6rem);
  align-items:center; padding:clamp(3rem,9vh,7rem) 0;
}
.pillar--rev .pillar-media{order:2}
.pillar-media{
  position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:2px;
  background:
    linear-gradient(135deg, color-mix(in srgb,var(--gold) 14%, var(--surface)),
      color-mix(in srgb,var(--accent) 12%, var(--bg-deep)));
  box-shadow:inset 0 0 0 .5px var(--line);
}
.pillar-media::after{
  content:""; position:absolute; inset:14px; z-index:2; pointer-events:none;
  border:.5px solid color-mix(in srgb,var(--bg) 55%, transparent);
}
.pillar-media .slot{width:100%; height:100%; display:block; position:relative; z-index:1}
.pillar-media .pillar-no{
  position:absolute; top:1rem; left:1.1rem; z-index:3;
  font-family:var(--f-display); font-style:italic; font-size:1.4rem;
  color:var(--bg); mix-blend-mode:difference; opacity:.9;
}
.pillar-copy{max-width:34ch}
.pillar-title{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:clamp(2.4rem,5vw,4.4rem); line-height:1.02;
  letter-spacing:var(--display-tight); margin:1.4rem 0 1.4rem;
}
.pillar-title em{color:var(--gold)}
.pillar-copy p{color:var(--ink-soft); font-weight:300; font-size:1.05rem; line-height:1.7}
.link{
  display:inline-flex; align-items:center; gap:.6em; margin-top:1.8rem; white-space:nowrap;
  font-family:var(--f-label); font-size:.76rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink);
  padding-bottom:.4em; border-bottom:.5px solid var(--line);
  transition:gap .35s ease, border-color .35s ease;
}
.link i{color:var(--gold); transition:transform .35s ease}
.link:hover{gap:1em; border-color:var(--gold)}
.link:hover i{transform:translateX(.3em)}
@media (max-width:820px){
  .pillar{grid-template-columns:1fr; gap:2rem}
  .pillar--rev .pillar-media{order:0}
  .pillar-media{aspect-ratio:16/11}
}

/* ── APPROACH ─────────────────────────────────────────────── */
.approach{
  position:relative; background:var(--surface);
  padding:clamp(6rem,14vh,11rem) 0;
  border-top:.5px solid var(--line-soft); border-bottom:.5px solid var(--line-soft);
}
.approach-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start}
.approach-head{position:sticky; top:18vh}
.approach-title{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:clamp(2rem,4.4vw,4rem); line-height:1.05;
  letter-spacing:var(--display-tight); margin:1.6rem 0 1.4rem;
}
.approach-title em{color:var(--gold)}
.approach-lede{color:var(--ink-soft); font-weight:300; font-size:1.08rem; max-width:38ch; line-height:1.7}
.approach-list{list-style:none; display:flex; flex-direction:column}
.approach-list li{
  display:flex; gap:1.4rem; padding:1.5rem 0;
  border-top:.5px solid var(--line-soft);
}
.approach-list li:last-child{border-bottom:.5px solid var(--line-soft)}
.approach-list li span{
  font-family:var(--f-display); font-style:italic; font-size:1.1rem;
  color:var(--gold); min-width:1.6em; padding-top:.1em;
}
.approach-list h4{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:1.5rem; letter-spacing:.005em; margin-bottom:.2em;
}
.approach-list p{color:var(--ink-soft); font-weight:300; font-size:1rem}
@media (max-width:820px){
  .approach-grid{grid-template-columns:1fr; gap:2.5rem}
  .approach-head{position:static}
}

/* ── RESULT ───────────────────────────────────────────────── */
.result{
  position:relative; padding:clamp(8rem,22vh,18rem) 0; text-align:center;
  background:transparent;
}
.result::before, .creed::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 50%,
    color-mix(in srgb,var(--bg) 52%, transparent) 0%,
    color-mix(in srgb,var(--bg) 22%, transparent) 45%, transparent 78%);
}
.result .wrap{max-width:min(1100px,90vw)}
.result-title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2rem,5vw,4.8rem); line-height:1.12;
  letter-spacing:var(--display-tight); margin:1.8rem auto;
}
.result-title em{font-style:italic; color:var(--gold)}
.result-cta{
  font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:clamp(1.6rem,3.6vw,3rem); color:var(--accent); margin-top:1rem;
}

/* ── CREED ────────────────────────────────────────────────── */
.creed{
  position:relative; padding:clamp(7rem,16vh,13rem) 0; text-align:center;
  background:transparent;
}
.creed .wrap{max-width:min(960px,90vw)}
.creed-verses{
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(1.2rem,2.8vw,2rem); line-height:1.6; color:var(--ink-soft);
}
.creed-verses span{display:block}
.creed-verses em{color:var(--gold); font-style:italic}
.creed-line{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:clamp(2.2rem,6vw,5.4rem); line-height:1.04;
  letter-spacing:var(--display-tight); margin:2rem 0 1rem;
}
.creed-foot{
  font-family:var(--f-label); font-size:.8rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-faint);
}

/* ── CONNECT ──────────────────────────────────────────────── */
.connect{
  position:relative; background:var(--bg);
  padding:clamp(6rem,14vh,11rem) 0; border-top:.5px solid var(--line-soft);
}
.connect-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,7vw,7rem); align-items:start}
.connect-title{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:clamp(2.2rem,4.8vw,4.4rem); line-height:1.04;
  letter-spacing:var(--display-tight); margin:1.6rem 0 1.4rem;
}
.connect-title em{color:var(--gold)}
.connect-note{color:var(--ink-soft); font-weight:300; font-size:1.08rem; max-width:38ch; line-height:1.7}
.connect-meta{list-style:none; margin-top:2.4rem; display:flex; flex-direction:column; gap:1rem}
.connect-meta li{
  font-family:var(--f-label); font-size:.92rem; color:var(--ink);
  display:flex; flex-direction:column; gap:.2em;
  padding-top:1rem; border-top:.5px solid var(--line-soft);
}
.connect-meta span{font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold)}

.connect-form{display:flex; flex-direction:column; gap:1.4rem}
.field{position:relative}
.field input, .field textarea, .field select{
  width:100%; background:var(--field); border:none;
  border-bottom:.5px solid var(--line);
  padding:1.4rem .2rem .7rem; font-family:var(--f-body); font-weight:300;
  font-size:1.05rem; color:var(--ink); outline:none; border-radius:2px 2px 0 0;
  transition:border-color .4s ease, background .4s ease;
}
.field textarea{resize:none; line-height:1.6}
.field select{appearance:none; cursor:pointer}
.field label{
  position:absolute; left:.2rem; top:1.3rem; pointer-events:none;
  font-family:var(--f-label); font-size:1rem; color:var(--ink-faint);
  transition:all .35s cubic-bezier(.2,.7,.3,1);
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--gold); background:color-mix(in srgb,var(--gold) 7%, var(--field))}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label{
  top:.1rem; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.submit{
  margin-top:.6rem; align-self:flex-start; cursor:pointer;
  display:inline-flex; align-items:center; gap:.8em;
  background:var(--ink); color:var(--bg); border:none;
  font-family:var(--f-label); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  padding:1.1em 2em; border-radius:999px; transition:all .4s ease;
}
.submit i{transition:transform .4s ease}
.submit:hover{background:var(--gold); color:var(--bg)}
.submit:hover i{transform:translateX(.4em)}
.form-done{font-family:var(--f-display); font-style:italic; font-size:1.2rem; color:var(--gold); min-height:1.2em}
@media (max-width:820px){ .connect-grid{grid-template-columns:1fr; gap:2.5rem} }

/* ── FOOTER ───────────────────────────────────────────────── */
.foot{background:var(--bg-deep); padding:clamp(3rem,7vh,5rem) 0 2.4rem; position:relative}
.foot-grid{display:grid; grid-template-columns:1fr auto; gap:2rem 3rem; align-items:start}
.foot-brand{display:flex; flex-direction:column; gap:.4rem}
.foot-brand .mark--word{font-size:1.7rem}
.foot-brand p{font-family:var(--f-display); font-style:italic; color:var(--ink-soft); font-size:1.05rem}
.foot-links{display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; justify-content:flex-end}
.foot-links a{
  font-family:var(--f-label); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); transition:color .3s ease;
}
.foot-links a:hover{color:var(--gold)}
.foot-fine{
  grid-column:1/-1; margin-top:2rem; padding-top:1.6rem;
  border-top:.5px solid var(--line-soft);
  font-family:var(--f-label); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint);
}

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important}
  html{scroll-behavior:auto}
}