/* ==========================================================================
   Dana Johnson — Purpose Is My Legacy
   Core stylesheet
   ========================================================================== */

:root{
  /* Palette */
  --ink:            #14110D;
  --ink-soft:       #4C443B;
  --ink-mute:       #6E655A;
  --gold:           #B08D45;
  --gold-deep:      #8C6C2E;
  --gold-light:     #D8BF89;
  --gold-wash:      rgba(176,141,69,.16);
  --cream:          #FBF7EF;
  --cream-deep:     #F3EDE1;
  --white:          #FFFFFF;
  --charcoal:       #16130F;
  --line:           rgba(176,141,69,.28);
  --line-soft:      rgba(20,17,13,.08);

  /* Type */
  --serif:  "Playfair Display", Georgia, serif;
  --sans:   "Lato", "Helvetica Neue", Arial, sans-serif;
  --script: "Pinyon Script", cursive;
  --sig:    "Great Vibes", cursive;

  /* Metrics */
  --wrap: 1200px;
  --nav-h: 88px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:28px;
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--cream);
  padding:12px 20px; z-index:999;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ---------- Type primitives ---------- */

.eyebrow{
  font-family:var(--sans);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 18px;
}

.script{
  font-family:var(--script);
  font-weight:400;
  color:var(--gold);
  line-height:1.15;
}

.sig{
  font-family:var(--sig);
  color:var(--gold);
  line-height:1;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  color:var(--ink);
  margin:0 0 18px;
  line-height:1.15;
  letter-spacing:.005em;
}

h1{ font-size:clamp(2.6rem,5.4vw,4.1rem); }
h2{ font-size:clamp(2rem,3.6vw,2.9rem); }
h3{ font-size:1.28rem; }

p{ margin:0 0 18px; }

.lede{
  font-size:1.05rem;
  color:var(--ink-soft);
  max-width:60ch;
}

.muted{ color:var(--ink-mute); }

/* ---------- Ornamental divider (thin gold rule + leaf) ---------- */

.rule{
  display:flex;
  align-items:center;
  gap:10px;
  margin:22px 0;
}
.rule::before,.rule::after{
  content:"";
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  flex:1;
  max-width:96px;
}
.rule svg{ width:22px; height:12px; color:var(--gold); flex:none; }
.rule--center{ justify-content:center; }
.rule--left::before{ display:none; }
.rule--left{ justify-content:flex-start; }
.rule--left::after{ max-width:120px; }

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 34px;
  font-family:var(--sans);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.btn svg{ width:13px; height:13px; flex:none; }

.btn--ink{ background:var(--ink); color:var(--cream); }
.btn--ink:hover{ background:var(--gold-deep); color:#fff; transform:translateY(-2px); }

.btn--gold{ background:var(--gold); color:#fff; }
.btn--gold:hover{ background:var(--gold-deep); transform:translateY(-2px); }

.btn--outline{
  background:transparent;
  color:var(--gold-deep);
  border-color:var(--gold);
}
.btn--outline:hover{ background:var(--gold); color:#fff; transform:translateY(-2px); }

.btn--light{
  background:transparent;
  color:var(--cream);
  border-color:rgba(216,191,137,.5);
}
.btn--light:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header{
  position:absolute;
  inset:0 0 auto 0;
  z-index:60;
  padding:22px 0;
}
.site-header--solid{
  position:sticky;
  top:0;
  background:rgba(251,247,239,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

/* Logo lockup */
.logo{ display:block; line-height:1; }
.logo__script{
  font-family:var(--sig);
  font-size:2.7rem;
  color:var(--gold);
  display:block;
  line-height:.95;
}
.logo__last{
  font-family:var(--sans);
  font-weight:400;
  font-size:.78rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ink);
  display:block;
  margin-top:2px;
  padding-left:4px;
}
.logo__roles{
  font-family:var(--sans);
  font-weight:400;
  font-size:.53rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-mute);
  display:block;
  margin-top:5px;
  line-height:1.55;
  max-width:200px;
}
.site-header--dark .logo__last{ color:var(--ink); }

/* Nav */
.nav{
  display:flex;
  align-items:center;
  gap:26px;
}
.nav__link{
  font-size:.8rem;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--ink);
  padding:6px 0;
  position:relative;
  white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1.5px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .3s var(--ease);
}
.nav__link:hover{ color:var(--gold-deep); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]{ color:var(--gold-deep); }

.nav__cta{
  padding:13px 22px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--gold);
  transition:background .3s var(--ease), color .3s var(--ease);
  white-space:nowrap;
}
.nav__cta:hover{ background:var(--gold); color:#fff; }

/* Mobile toggle */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  background:none;
  border:1px solid var(--line);
  cursor:pointer;
  padding:0;
  align-items:center;
  justify-content:center;
}
.nav-toggle span{
  display:block;
  width:20px; height:1.5px;
  background:var(--ink);
  position:relative;
  transition:background .2s;
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:""; position:absolute; left:0;
  width:20px; height:1.5px; background:var(--ink);
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative;
  min-height:calc(100vh - 40px);
  min-height:760px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--cream-deep);
}

.hero__media{
  position:absolute;
  inset:0 0 0 42%;
  z-index:1;
}
.hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 18%;
}
.hero__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg,var(--cream-deep) 0%,rgba(243,237,225,.58) 7%,rgba(243,237,225,0) 22%);
}

.hero__inner{
  position:relative;
  z-index:2;
  width:100%;
  padding-top:34px;   /* header is sticky now and takes its own space */
}

.hero__copy{ max-width:560px; }

.hero__eyebrow{
  font-size:.74rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 6px;
}
.hero__eyebrow .hl{ color:var(--gold); }

.hero__title{
  font-family:var(--serif);
  font-size:clamp(2.9rem,5.6vw,4.4rem);
  line-height:1.02;
  margin:0;
  letter-spacing:-.01em;
}
.hero__title .script{
  display:block;
  font-family:var(--script);
  font-size:clamp(3.6rem,7.4vw,5.9rem);
  line-height:.9;
  margin-top:-.04em;
  margin-left:.14em;
}

.hero__text{
  font-size:1rem;
  color:var(--ink-soft);
  max-width:44ch;
  margin:0 0 32px;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* Page-load sequence */
.reveal{
  opacity:0;
  transform:translateY(16px);
  animation:rise .9s var(--ease) forwards;
}
.reveal--1{ animation-delay:.05s; }
.reveal--2{ animation-delay:.18s; }
.reveal--3{ animation-delay:.31s; }
.reveal--4{ animation-delay:.44s; }
.reveal--5{ animation-delay:.57s; }

@keyframes rise{
  to{ opacity:1; transform:none; }
}

/* ==========================================================================
   Values band
   ========================================================================== */

.values{
  position:relative;
  background:var(--cream);
  padding:64px 0 76px;
  margin-top:-46px;
  z-index:5;
  border-radius:60% 60% 0 0 / 46px 46px 0 0;
}

.values__head{ text-align:center; margin-bottom:8px; }

.values__kicker{
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 8px;
}
.values__line{
  font-family:var(--script);
  font-size:clamp(1.7rem,3.2vw,2.4rem);
  color:var(--gold-deep);
  margin:0;
  line-height:1.3;
}

.values__grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  margin-top:34px;
}

.value{
  text-align:center;
  padding:18px 16px;
  border-left:1px solid var(--line);
}
.value:first-child{ border-left:0; }

.value__icon{
  width:44px; height:44px;
  margin:0 auto 16px;
  color:var(--gold);
}
.value__icon svg{ width:100%; height:100%; }

.value__title{
  font-family:var(--serif);
  font-size:1.02rem;
  margin:0 0 10px;
  line-height:1.3;
}
.value__body{
  font-size:.82rem;
  line-height:1.75;
  color:var(--ink-soft);
  margin:0;
}

/* ==========================================================================
   About split
   ========================================================================== */

.about{
  display:grid;
  grid-template-columns:minmax(0,44%) minmax(0,56%);
  background:var(--cream-deep);
  align-items:stretch;
}

.about__media{ position:relative; min-height:520px; }
.about__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 30%;
}

.about__body{
  position:relative;
  padding:96px clamp(28px,5vw,88px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}

.about__inner{ position:relative; z-index:2; max-width:560px; }

.about__title{
  font-size:clamp(1.9rem,3.4vw,2.7rem);
  line-height:1.18;
  margin:0 0 4px;
}

.about__text{
  font-size:.95rem;
  color:var(--ink-soft);
  max-width:56ch;
}

.about__sig{
  font-size:2.6rem;
  margin:26px 0 4px;
}
.about__role{
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 30px;
}

/* Etched botanical watermark */
.about__flourish{
  position:absolute;
  right:-40px; top:50%;
  transform:translateY(-50%);
  width:min(46%,420px);
  color:var(--gold);
  opacity:.22;
  z-index:1;
  pointer-events:none;
}

/* ==========================================================================
   Pillars + quote strip
   ========================================================================== */

.strip{
  display:grid;
  grid-template-columns:repeat(3,1fr) 1.18fr;
  gap:0;
  background:var(--cream-deep);
  padding:0 0 0;
  align-items:stretch;
}

.strip__cards{
  grid-column:1 / 4;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  padding:22px 22px 26px;
}

.pillar{
  background:var(--white);
  display:flex;
  flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pillar:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 40px rgba(20,17,13,.1);
}
.pillar__img{
  aspect-ratio:16/7;
  overflow:hidden;
}
.pillar__img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.pillar:hover .pillar__img img{ transform:scale(1.06); }

.pillar__body{
  padding:20px 22px 26px;
  text-align:center;
}
.pillar__label{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 10px;
}
.pillar__text{
  font-size:.84rem;
  line-height:1.75;
  color:var(--ink-soft);
  margin:0;
}

.quote{
  grid-column:4 / 5;
  background:var(--charcoal);
  color:var(--cream);
  padding:56px 44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.quote__mark{
  font-family:var(--serif);
  font-size:3.4rem;
  line-height:.6;
  color:var(--gold);
  margin:0 0 18px;
}
.quote__text{
  font-family:var(--serif);
  font-size:1.12rem;
  line-height:1.6;
  margin:0 0 22px;
  color:#F0EAE0;
}
.quote__sig{ font-size:2rem; }

/* ==========================================================================
   Closing CTA
   ========================================================================== */

.closer{
  position:relative;
  background:var(--cream);
  padding:64px 0;
  overflow:hidden;
}
.closer__inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.closer__title{
  font-size:clamp(1.7rem,3.2vw,2.35rem);
  margin:0 0 10px;
}
.closer__text{
  font-size:.9rem;
  color:var(--ink-soft);
  margin:0;
  max-width:52ch;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{
  background:var(--charcoal);
  color:#CFC7BA;
  padding:56px 0 0;
  font-size:.83rem;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.25fr .8fr .8fr 1.15fr .75fr;
  gap:36px;
  padding-bottom:44px;
}

.footer__logo .logo__script{ font-size:2.5rem; }
.footer__logo .logo__last{ color:#EFE9DE; }

.footer__title{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-light);
  margin:6px 0 16px;
}

.footer__list{
  list-style:none;
  margin:0; padding:0;
}
.footer__list li{ margin-bottom:9px; }
.footer__list a{
  color:#CFC7BA;
  transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.footer__list a:hover{ color:var(--gold-light); padding-left:4px; }

.footer__note{
  margin:0 0 14px;
  color:#A79E90;
  line-height:1.65;
}

.subscribe{
  display:flex;
  border:1px solid rgba(216,191,137,.32);
  background:rgba(255,255,255,.04);
}
.subscribe input{
  flex:1;
  min-width:0;
  background:transparent;
  border:0;
  padding:12px 14px;
  color:#EFE9DE;
  font-family:var(--sans);
  font-size:.82rem;
}
.subscribe input::placeholder{ color:#8E857A; }
.subscribe input:focus{ outline:none; }
.subscribe button{
  background:var(--gold);
  border:0;
  width:46px;
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .25s var(--ease);
}
.subscribe button:hover{ background:var(--gold-deep); }
.subscribe button svg{ width:15px; height:15px; }

.socials{
  display:flex;
  gap:10px;
}
.socials a{
  width:36px; height:36px;
  border:1px solid rgba(216,191,137,.34);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--gold-light);
  transition:background .28s var(--ease), color .28s var(--ease), transform .28s var(--ease);
}
.socials a:hover{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
  transform:translateY(-3px);
}
.socials svg{ width:15px; height:15px; }

.footer-bar{
  border-top:1px solid rgba(216,191,137,.16);
  padding:18px 0;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:.75rem;
  color:#8E857A;
}
.footer-bar a{ transition:color .25s var(--ease); }
.footer-bar a:hover{ color:var(--gold-light); }
.footer-bar__legal{ display:flex; gap:12px; }

/* ==========================================================================
   Interior pages
   ========================================================================== */

.page-hero{
  background:var(--cream-deep);
  padding:70px 0 62px;
  text-align:center;
  border-bottom:1px solid var(--line-soft);
  position:relative;
  overflow:hidden;
}
.page-hero__inner{ position:relative; z-index:2; }
.page-hero h1{
  font-size:clamp(2.2rem,4.4vw,3.3rem);
  margin:0 0 6px;
}
.page-hero .script{
  font-size:clamp(2.4rem,4.6vw,3.4rem);
  display:block;
  margin-top:-6px;
}
.page-hero__text{
  max-width:60ch;
  margin:14px auto 0;
  color:var(--ink-soft);
  font-size:.98rem;
}

.section{ padding:76px 0; }
.section--cream{ background:var(--cream); }
.section--deep{ background:var(--cream-deep); }
.section--dark{ background:var(--charcoal); color:#CFC7BA; }
.section--dark h2,.section--dark h3{ color:#F3EDE1; }
.section--tight{ padding:52px 0; }

.section__head{
  text-align:center;
  max-width:64ch;
  margin:0 auto 46px;
}
.section__head p{ color:var(--ink-soft); margin:0; }
.section--dark .section__head p{ color:#B5ACA0; }

.prose{ max-width:70ch; margin-inline:auto; }
.prose p{ font-size:1rem; color:var(--ink-soft); }
.prose h3{ margin-top:36px; }
.prose blockquote{
  margin:34px 0;
  padding:4px 0 4px 26px;
  border-left:2px solid var(--gold);
  font-family:var(--serif);
  font-size:1.16rem;
  line-height:1.6;
  color:var(--ink);
}

/* Card grids */
.grid{ display:grid; gap:24px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--white);
  border:1px solid var(--line-soft);
  padding:34px 30px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  border-color:var(--line);
  box-shadow:0 16px 38px rgba(20,17,13,.09);
}
.card__icon{
  width:40px; height:40px;
  color:var(--gold);
  margin-bottom:18px;
}
.card__icon svg{ width:100%; height:100%; }
.card h3{ margin:0 0 12px; font-size:1.14rem; }
.card p{ font-size:.88rem; color:var(--ink-soft); margin:0; }
.card__meta{
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 10px;
}

.section--dark .card{
  background:rgba(255,255,255,.03);
  border-color:rgba(216,191,137,.16);
}
.section--dark .card p{ color:#B5ACA0; }
.section--dark .card:hover{ border-color:rgba(216,191,137,.38); box-shadow:none; }

/* Numbered list where order genuinely matters */
.steps{ list-style:none; margin:0; padding:0; counter-reset:step; }
.steps li{
  counter-increment:step;
  position:relative;
  padding:0 0 30px 60px;
  border-left:1px solid var(--line);
  margin-left:16px;
}
.steps li:last-child{ border-left-color:transparent; padding-bottom:0; }
.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:-17px; top:-2px;
  width:34px; height:34px;
  background:var(--cream);
  border:1px solid var(--gold);
  border-radius:50%;
  display:grid; place-items:center;
  font-size:.68rem;
  letter-spacing:.04em;
  color:var(--gold-deep);
  font-weight:700;
}
.steps h3{ margin:2px 0 8px; font-size:1.08rem; }
.steps p{ font-size:.88rem; color:var(--ink-soft); margin:0; }

/* Feature split rows */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.split--flip .split__media{ order:2; }
.split__media img{ width:100%; }
.split__body h2{ margin-bottom:12px; }
.split__body p{ color:var(--ink-soft); font-size:.95rem; }

/* Book feature */
.book{
  display:grid;
  grid-template-columns:minmax(0,320px) 1fr;
  gap:52px;
  align-items:center;
}
.book__cover{
  aspect-ratio:2/3;
  background:linear-gradient(150deg,#1D1913,#3A3025);
  border:1px solid rgba(216,191,137,.3);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 26px;
  box-shadow:0 24px 50px rgba(20,17,13,.24);
}
.book__cover .sig{ font-size:2.1rem; margin-bottom:14px; }
.book__cover-title{
  font-family:var(--serif);
  color:#F3EDE1;
  font-size:1.5rem;
  line-height:1.25;
  margin:0 0 14px;
}
.book__cover-rule{ width:44px; height:1px; background:var(--gold); margin:0 auto 14px; }
.book__cover-sub{
  font-size:.6rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#B5ACA0;
  margin:0;
}
/* Real cover art — overrides the CSS-drawn placeholder cover.
   The Little Living Ones is roughly square, not the 2:3 of a trade book. */
.book__cover.book__cover--art{
  aspect-ratio:auto;
  background:none;
  border:0;
  padding:0;
  display:block;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(20,17,13,.16);
}
.book__cover.book__cover--art img{ display:block; width:100%; height:auto; }

.book__status{
  display:inline-block;
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-deep);
  border:1px solid var(--line);
  padding:5px 12px;
  margin-bottom:18px;
}

/* FAQ */
.faq{ max-width:76ch; margin-inline:auto; }
.faq__item{ border-bottom:1px solid var(--line-soft); }
.faq__q{
  width:100%;
  background:none;
  border:0;
  text-align:left;
  padding:22px 40px 22px 0;
  font-family:var(--serif);
  font-size:1.06rem;
  color:var(--ink);
  cursor:pointer;
  position:relative;
}
.faq__q::after{
  content:"";
  position:absolute;
  right:6px; top:50%;
  width:9px; height:9px;
  border-right:1px solid var(--gold);
  border-bottom:1px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s var(--ease);
}
.faq__q[aria-expanded="true"]::after{ transform:translateY(-30%) rotate(-135deg); }
.faq__a{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--ease);
}
.faq__a p{
  font-size:.9rem;
  color:var(--ink-soft);
  margin:0 0 22px;
  max-width:64ch;
}

/* Forms */
.form{
  max-width:720px;
  margin-inline:auto;
  background:var(--white);
  border:1px solid var(--line-soft);
  padding:44px clamp(24px,4vw,48px);
}
.field{ margin-bottom:22px; }
.field label{
  display:block;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  background:var(--cream);
  border:1px solid var(--line-soft);
  padding:13px 15px;
  font-family:var(--sans);
  font-size:.92rem;
  color:var(--ink);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--gold);
  background:var(--white);
}
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.field--row .field{ margin-bottom:0; }
.form__hint{
  font-size:.76rem;
  color:var(--ink-mute);
  margin:-8px 0 22px;
}
.hp{ position:absolute; left:-9999px; }

/* Contact detail rows */
.detail{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:18px 0;
  border-bottom:1px solid var(--line-soft);
}
.detail:last-child{ border-bottom:0; }
.detail__icon{
  width:34px; height:34px;
  flex:none;
  color:var(--gold);
  border:1px solid var(--line);
  border-radius:50%;
  display:grid; place-items:center;
}
.detail__icon svg{ width:15px; height:15px; }
.detail__label{
  font-size:.64rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin:0 0 3px;
}
.detail__value{ margin:0; font-size:.95rem; }
.detail__value a:hover{ color:var(--gold-deep); }

/* Journal */
.post{
  background:var(--white);
  border:1px solid var(--line-soft);
  display:flex;
  flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.post:hover{ transform:translateY(-5px); box-shadow:0 16px 38px rgba(20,17,13,.09); }
.post__band{
  height:6px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold),var(--gold-deep));
}
.post__body{ padding:30px 28px 32px; flex:1; display:flex; flex-direction:column; }
.post__meta{
  font-size:.65rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 12px;
}
.post h3{ font-size:1.2rem; margin:0 0 12px; line-height:1.3; }
.post p{ font-size:.88rem; color:var(--ink-soft); margin:0 0 20px; }
.post__link{
  margin-top:auto;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.post__link svg{ width:12px; height:12px; transition:transform .3s var(--ease); }
.post:hover .post__link svg{ transform:translateX(4px); }

/* Stat / marker row */
.markers{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.marker{
  text-align:center;
  padding:30px 18px;
  border-left:1px solid var(--line);
}
.marker:first-child{ border-left:0; }
.marker__k{
  font-family:var(--serif);
  font-size:1.9rem;
  color:var(--gold-deep);
  display:block;
  line-height:1.2;
}
.marker__l{
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin:6px 0 0;
}

/* Timeline (chronological — order carries meaning) */
.timeline{ max-width:760px; margin-inline:auto; }
.tl{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:28px;
  padding:26px 0;
  border-bottom:1px solid var(--line-soft);
}
.tl:last-child{ border-bottom:0; }
.tl__when{
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--gold-deep);
  padding-top:2px;
}
.tl h3{ font-size:1.06rem; margin:0 0 8px; }
.tl p{ font-size:.9rem; color:var(--ink-soft); margin:0; }

/* Scroll reveal */
.fx{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.fx.is-in{ opacity:1; transform:none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1180px){
  .nav{ gap:18px; }
  .nav__link{ font-size:.75rem; }
  .values__grid{ grid-template-columns:repeat(3,1fr); row-gap:34px; }
  .value:nth-child(3n+1){ border-left:0; }
  .strip{ grid-template-columns:1fr; }
  .strip__cards{ grid-column:1 / -1; }
  .quote{ grid-column:1 / -1; padding:48px 40px; }
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; row-gap:36px; }
}

@media (max-width:980px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed;
    inset:0 0 0 auto;
    width:min(340px,86vw);
    background:var(--cream);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:4px;
    padding:104px 34px 40px;
    transform:translateX(100%);
    transition:transform .4s var(--ease);
    box-shadow:-14px 0 44px rgba(20,17,13,.14);
    z-index:70;
    overflow-y:auto;
  }
  .nav.is-open{ transform:none; }
  .nav__link{
    font-size:1rem;
    width:100%;
    padding:14px 0;
    border-bottom:1px solid var(--line-soft);
  }
  .nav__link::after{ display:none; }
  .nav__cta{ margin-top:22px; width:100%; text-align:center; justify-content:center; }
  .nav-backdrop{
    position:fixed; inset:0;
    background:rgba(20,17,13,.42);
    opacity:0; pointer-events:none;
    transition:opacity .35s var(--ease);
    z-index:65;
  }
  .nav-backdrop.is-on{ opacity:1; pointer-events:auto; }

  /* Mobile: stack the copy ABOVE the photo instead of overlapping them.
     The old approach put text on top of the image and then washed the image
     out (opacity .72 under an .86 cream veil) just to keep the text legible —
     which buried her face. Stacked, the photo needs no veil at all. */
  .hero{
    min-height:0;
    display:flex;
    flex-direction:column;
    padding-bottom:0;
  }
  .hero__inner{
    order:1;
    padding-top:150px;
    padding-bottom:40px;
  }
  .hero__media{
    order:2;
    position:relative;
    inset:auto;
    width:100%;
    height:460px;
    opacity:1;            /* full strength — no fade */
  }
  .hero__media::after{ display:none; }   /* no cream veil */
  .hero__media img{ object-position:center center; }
  .hero__copy{ max-width:none; }
  .hero__text{ max-width:52ch; }

  .about{ grid-template-columns:1fr; }
  .about__media{ min-height:400px; }
  .about__body{ padding:64px 28px; }
  .about__flourish{ display:none; }

  .split{ grid-template-columns:1fr; gap:34px; }
  .split--flip .split__media{ order:0; }
  .book{ grid-template-columns:1fr; gap:34px; }
  .book__cover{ max-width:300px; margin-inline:auto; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .markers{ grid-template-columns:repeat(2,1fr); }
  .marker:nth-child(3),.marker:nth-child(4){ border-top:1px solid var(--line); }
  .marker:nth-child(2n+1){ border-left:0; }
}

@media (max-width:720px){
  .wrap{ padding-inline:20px; }
  .logo__script{ font-size:2.2rem; }
  .logo__roles{ display:none; }
  .values{ border-radius:0; margin-top:0; padding:52px 0 58px; }
  .values__grid{ grid-template-columns:1fr 1fr; row-gap:30px; }
  .value{ border-left:1px solid var(--line); }
  .value:nth-child(3n+1){ border-left:1px solid var(--line); }
  .value:nth-child(2n+1){ border-left:0; }
  .strip__cards{ grid-template-columns:1fr; padding:20px; }
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .field--row{ grid-template-columns:1fr; gap:22px; }
  .field--row .field{ margin-bottom:22px; }
  .closer__inner{ flex-direction:column; align-items:flex-start; }
  .tl{ grid-template-columns:1fr; gap:8px; }
  .section{ padding:56px 0; }
  .form{ padding:32px 22px; }
  .quote{ padding:44px 26px; }
}

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

@media print{
  .site-header,.site-footer,.nav-toggle{ display:none; }
  body{ background:#fff; }
}