/* Carla May, Flowers Grow Here Too */

:root{
  --plum:#241019;
  --plum-2:#38182A;
  --wine:#4A1F35;
  --rose:#D89AAF;
  --rose-lt:#EFC3D1;
  --blush:#F6E4E9;
  --cream:#FAF3EF;
  --dusk:#B08FA1;
  --ink:#2B141F;
  --paper:#F7EFEC;
  --disp:"Cormorant Garamond", Georgia, serif;
  --script:"Yellowtail", cursive;
  --sans:"Jost", system-ui, sans-serif;
  --maxw:1220px;
  --pad:clamp(20px,5vw,64px);
  --sec:clamp(72px,10vw,140px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-loading{overflow:hidden}
body.menu-open{overflow:hidden}
img{display:block; max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--disp); font-weight:400; line-height:1.06; margin:0; letter-spacing:-.01em}
h2{font-size:clamp(31px,4.4vw,55px)}
h3{font-size:clamp(21px,2.4vw,27px)}
p{margin:0 0 1.15em}
em{font-style:normal; font-family:var(--script); color:var(--wine); font-size:1.06em; line-height:1}
.lede{font-size:clamp(18px,1.7vw,21px); line-height:1.7; color:#54303F}

.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:99; background:var(--plum); color:var(--cream); padding:10px 16px}
:focus-visible{outline:2px solid var(--rose); outline-offset:3px}

.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.22; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

/* INTRO */
.intro{
  position:fixed; inset:0; z-index:80; background:var(--plum);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  transition:opacity .9s var(--ease), visibility .9s;
}
.intro.done{opacity:0; visibility:hidden}
.intro__flower{
  width:1px; height:0; background:linear-gradient(180deg,transparent,var(--rose));
  animation:stem 1.1s var(--ease) .1s forwards;
}
@keyframes stem{to{height:56px}}
.intro__name{
  font-family:var(--script); color:var(--blush); font-size:clamp(30px,5vw,46px);
  opacity:0; animation:fadein .9s var(--ease) .5s forwards;
}
@keyframes fadein{to{opacity:1}}

/* HEADER */
.head{position:fixed; inset:0 0 auto; z-index:50; transition:background .5s, backdrop-filter .5s, box-shadow .5s}
.head.stuck{background:rgba(36,16,25,.9); backdrop-filter:blur(9px); box-shadow:0 1px 0 rgba(246,228,233,.12)}
.head__in{max-width:var(--maxw); margin:0 auto; padding:20px var(--pad); display:flex; align-items:center; gap:24px}
.mark{text-decoration:none; display:grid; line-height:1.1}
.mark__name{font-family:var(--script); font-size:26px; color:var(--blush)}
.mark__sub{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(246,228,233,.55); margin-top:4px}
.nav{margin-left:auto; display:flex; align-items:center; gap:clamp(16px,2vw,30px)}
.nav a{text-decoration:none; font-size:13.5px; letter-spacing:.06em; color:rgba(246,228,233,.82); transition:color .3s}
.nav a:hover{color:var(--rose-lt)}
.nav__cta{border:1px solid rgba(216,154,175,.55); border-radius:999px; padding:9px 20px; color:var(--rose-lt) !important}
.nav__cta:hover{background:var(--rose); color:var(--plum) !important; border-color:var(--rose)}
.burger{display:none; margin-left:auto; background:none; border:0; width:38px; height:32px; cursor:pointer; padding:6px}
.burger span{display:block; height:1.5px; background:var(--blush); margin:6px 0; transition:transform .35s var(--ease)}

/* HERO */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--plum)}
.hero__media{position:absolute; inset:0}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:60% 55%; will-change:transform}
.hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(36,16,25,.62) 0%, rgba(36,16,25,.18) 34%, rgba(36,16,25,.72) 76%, rgba(36,16,25,.96) 100%);
}
.hero__in{position:relative; z-index:2; max-width:var(--maxw); width:100%; margin:0 auto; padding:0 var(--pad) clamp(96px,13vh,150px); color:var(--cream)}
.hero__eyebrow{
  font-size:clamp(12px,1.3vw,14px); letter-spacing:.14em; color:var(--rose-lt);
  max-width:34ch; margin-bottom:18px;
}
.hero__title{font-family:var(--script); font-size:clamp(52px,10.5vw,138px); line-height:.98; letter-spacing:0}
.hero__title .line{display:block; overflow:hidden; padding-bottom:.08em}
.hero__title .line span{display:block; transform:translateY(105%); transition:transform 1.15s var(--ease)}
body.ready .hero__title .line span{transform:none}
.hero__series{
  font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:var(--rose-lt);
  margin:14px 0 24px; display:flex; align-items:center; gap:16px;
}
.hero__series::before,.hero__series::after{content:""; height:1px; width:38px; background:rgba(239,195,209,.5)}
.hero__lede{max-width:52ch; color:rgba(250,243,239,.86); font-size:clamp(16px,1.6vw,19px)}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.hero__cue{
  position:absolute; z-index:2; right:var(--pad); bottom:clamp(96px,13vh,150px);
  display:flex; flex-direction:column; align-items:center; gap:12px; text-decoration:none;
  font-family:var(--script); font-size:18px; color:rgba(239,195,209,.8);
}
.hero__cueline{width:1px; height:70px; background:linear-gradient(180deg,transparent,rgba(239,195,209,.7))}
.stage{opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
body.ready .stage{opacity:1; transform:none}
.hero__title.stage,.hero__title .line{opacity:1; transform:none}

/* BUTTONS */
.btn{
  display:inline-block; text-decoration:none; font-size:13.5px; letter-spacing:.1em;
  padding:14px 30px; border-radius:999px; border:1px solid transparent; transition:all .35s var(--ease);
}
.btn--rose{background:var(--rose); color:var(--plum); border-color:var(--rose)}
.btn--rose:hover{background:var(--rose-lt); border-color:var(--rose-lt)}
.btn--ghost{color:var(--cream); border-color:rgba(250,243,239,.42)}
.btn--ghost:hover{background:rgba(250,243,239,.1); border-color:var(--cream)}
.btn--line{color:var(--wine); border-color:rgba(74,31,53,.35)}
.btn--line:hover{background:rgba(74,31,53,.06); border-color:var(--wine)}
.textlink{
  text-decoration:none; font-size:13px; letter-spacing:.08em; color:var(--wine);
  border-bottom:1px solid rgba(74,31,53,.32); padding-bottom:3px; transition:border-color .3s
}
.textlink:hover{border-color:var(--wine)}

/* REVEALS */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .95s var(--ease), transform .95s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal,.stage{opacity:1 !important; transform:none !important}
  .hero__title .line span{transform:none}
}

/* THRESHOLD */
.thresh{
  background:var(--plum); color:var(--blush); text-align:center;
  padding:clamp(80px,11vw,150px) var(--pad);
}
.thresh__q{
  font-family:var(--disp); font-size:clamp(27px,4vw,50px); line-height:1.24; max-width:19ch;
  margin:0 auto .9em; color:var(--cream);
}
.thresh__q em{color:var(--rose-lt); font-size:1.02em}
.thresh__p{max-width:56ch; margin:0 auto; color:rgba(246,228,233,.68); font-size:16.5px}

/* BOOK */
.book{padding:var(--sec) var(--pad); background:var(--paper)}
.book__in{
  max-width:var(--maxw); margin:0 auto; display:grid; gap:clamp(40px,6vw,88px);
  grid-template-columns:minmax(240px,.8fr) 1.2fr; align-items:center;
}
.jacket{margin:0; perspective:1100px}
.jacket img{
  width:100%; border-radius:3px;
  box-shadow:0 40px 70px -30px rgba(36,16,25,.55), 0 3px 10px rgba(36,16,25,.16);
  transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)); transition:transform .5s var(--ease);
  height: auto;
}
.book__copy h2{margin-bottom:.5em; max-width:17ch}
.book__pts{list-style:none; margin:34px 0; padding:0; border-top:1px solid rgba(74,31,53,.14)}
.book__pts li{
  border-bottom:1px solid rgba(74,31,53,.14); padding:15px 0 15px 30px; position:relative;
  font-size:15.5px; color:#54303F;
}
.book__pts li::before{
  content:""; position:absolute; left:2px; top:24px; width:9px; height:9px; border-radius:50%;
  background:var(--rose);
}
.book__cta{display:flex; flex-wrap:wrap; gap:14px}
.book__note{margin-top:18px; font-size:13.5px; color:#7A5C68}

/* SECTION HEAD */
.sec-head{max-width:var(--maxw); margin:0 auto clamp(40px,5vw,64px)}
.sec-head h2{max-width:16ch; margin-bottom:.42em}
.sec-head__p{max-width:56ch; color:#6A4A57; font-size:16.5px; margin:0}

/* STORY ACCORDION */
.story{background:var(--plum-2); padding:var(--sec) var(--pad)}
.story .sec-head h2{color:var(--cream)}
.story .sec-head h2 em{color:var(--rose-lt)}
.story .sec-head__p{color:rgba(246,228,233,.62)}
.stages{max-width:var(--maxw); margin:0 auto; display:flex; gap:6px; height:min(620px,74vh)}
.st{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden; background:var(--plum);
  transition:flex 1.05s var(--ease);
}
.st.is-active{flex:4.4 1 0}
.st__media{position:absolute; inset:0}
.st__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  filter:saturate(.35) brightness(.46); transform:scale(1.1);
  transition:filter 1s var(--ease), transform 1.4s var(--ease);
}
.st.is-active .st__media img{filter:saturate(1) brightness(.72); transform:scale(1)}
.st::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(36,16,25,.14) 28%, rgba(36,16,25,.92) 100%);
}
.st__hit{
  position:absolute; inset:0; z-index:3; width:100%; height:100%;
  background:none; border:0; cursor:pointer; padding:26px 0; color:var(--blush);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  font-family:inherit;
}
.st__num{font-family:var(--script); font-size:19px; color:var(--rose-lt); transition:opacity .5s}
.st__spine{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:11.5px; font-weight:400; letter-spacing:.26em; text-transform:uppercase;
  white-space:nowrap; transition:opacity .5s var(--ease);
}
.st.is-active .st__spine{opacity:0}
.st.is-active .st__hit{justify-content:flex-start; align-items:flex-start; padding-left:clamp(24px,3vw,44px)}
.st__card{
  position:absolute; z-index:2; left:clamp(24px,3vw,44px); right:clamp(24px,3vw,44px);
  bottom:clamp(30px,3.4vw,48px); max-width:430px; color:var(--cream);
  opacity:0; transform:translateY(18px); pointer-events:none;
  transition:opacity .7s var(--ease) .18s, transform .7s var(--ease) .18s;
}
.st.is-active .st__card{opacity:1; transform:none}
.st__kicker{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--rose-lt); margin:0 0 12px}
.st__card h3{color:var(--cream); margin-bottom:12px}
.st__card p{font-size:15px; line-height:1.65; color:rgba(250,243,239,.78); margin:0}

/* QUOTE BAND */
.band{position:relative; padding:clamp(84px,11vw,150px) var(--pad); overflow:hidden; background:var(--wine)}
.band__bg{
  position:absolute; inset:0;
  background:url("../images/banner.webp") center 60%/cover no-repeat;
  filter:saturate(.5) brightness(.35);
}
.band__q{position:relative; z-index:2; max-width:960px; margin:0 auto; text-align:center; color:var(--cream)}
.band__q p{font-family:var(--disp); font-style:italic; font-size:clamp(24px,3.5vw,42px); line-height:1.3; margin:0 0 26px}
.band__q cite{font-style:normal; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--rose-lt)}

/* AUTHOR */
.author{background:var(--paper); padding:var(--sec) var(--pad)}
.author__in{
  max-width:var(--maxw); margin:0 auto; display:grid; gap:clamp(38px,6vw,84px);
  grid-template-columns:minmax(230px,.72fr) 1.28fr; align-items:start;
}
.author__portrait{margin:0}
.author__portrait img{
  width:100%; border-radius:2px; box-shadow:0 30px 60px -32px rgba(36,16,25,.55);
  border:6px solid #fff;
  height: auto;
}
.author__portrait figcaption{
  margin-top:14px; font-family:var(--script); font-size:22px; color:var(--wine); text-align:center;
}
.author__copy h2{max-width:16ch; margin-bottom:.5em}
.facts{margin:36px 0 0; padding:0; display:grid; gap:0; border-top:1px solid rgba(74,31,53,.14)}
.fact{display:grid; grid-template-columns:150px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid rgba(74,31,53,.14)}
.fact dt{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#8A6875; padding-top:4px}
.fact dd{margin:0; font-size:15.5px; color:#54303F}

/* SERIES */
.series{background:var(--blush); padding:var(--sec) var(--pad)}
.series__grid{
  max-width:var(--maxw); margin:0 auto; display:grid; gap:clamp(28px,4vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.title__cover{position:relative; display:block; text-decoration:none}
.title__cover img{
  width:100%; border-radius:2px; box-shadow:0 26px 46px -26px rgba(36,16,25,.5);
  transition:transform .6s var(--ease);
  height: auto;
}
.title__cover:hover img{transform:translateY(-6px)}
.title__cover--blank{
  aspect-ratio:703/1024; border:1px dashed rgba(74,31,53,.3); border-radius:2px;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.4);
}
.title__cover--blank span{font-family:var(--script); font-size:26px; color:rgba(74,31,53,.45)}
.title__flag{
  position:absolute; top:14px; left:14px; background:var(--wine); color:var(--blush);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; padding:6px 12px; border-radius:999px;
}
.title__body{padding-top:20px}
.title__body h3{margin-bottom:10px}
.title__body p{font-size:15px; color:#5E3A49}

/* CONTACT */
.contact{background:var(--plum); color:var(--blush); padding:var(--sec) var(--pad)}
.contact__in{
  max-width:var(--maxw); margin:0 auto; display:grid; gap:clamp(38px,6vw,80px);
  grid-template-columns:1fr 1fr; align-items:start;
}
.contact h2{color:var(--cream); margin-bottom:.5em}
.contact__copy p{color:rgba(246,228,233,.72); max-width:46ch}
.contact__list{list-style:none; margin:32px 0 0; padding:0; border-top:1px solid rgba(246,228,233,.16)}
.contact__list li{display:grid; grid-template-columns:120px 1fr; gap:14px; padding:14px 0; border-bottom:1px solid rgba(246,228,233,.16)}
.contact__list span{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(246,228,233,.5)}
.contact__list a{color:var(--rose-lt); text-decoration:none; border-bottom:1px solid transparent}
.contact__list a:hover{border-color:var(--rose-lt)}

.cform__row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{margin-bottom:18px; display:grid; gap:8px}
.field label{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(246,228,233,.6)}
.field input,.field select,.field textarea{
  background:rgba(246,228,233,.05); border:1px solid rgba(246,228,233,.2); border-radius:3px;
  color:var(--cream); font-family:inherit; font-size:15px; padding:13px 14px; width:100%;
}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--rose) 50%),linear-gradient(135deg,var(--rose) 50%,transparent 50%); background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px; background-size:6px 6px; background-repeat:no-repeat}
.field select option{color:#2B141F}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--rose); outline:none}
.cform__note{margin-top:14px; font-size:14px; color:var(--rose-lt); min-height:1.2em}
.cform__note.ok{color:#B9DCC4}

/* FOOTER */
.foot{background:#1B0B12; color:rgba(246,228,233,.65); padding:52px var(--pad)}
.foot__in{max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; gap:26px; align-items:center}
.foot__nav{margin-left:auto; display:flex; flex-wrap:wrap; gap:22px}
.foot__nav a{text-decoration:none; font-size:13px; color:rgba(246,228,233,.65)}
.foot__nav a:hover{color:var(--rose-lt)}
.foot__legal{width:100%; margin:0; font-size:12.5px; color:rgba(246,228,233,.4); border-top:1px solid rgba(246,228,233,.1); padding-top:22px}

/* RESPONSIVE */
@media (max-width:1000px){
  .book__in,.author__in,.contact__in{grid-template-columns:1fr}
  .jacket{max-width:320px}
  .author__portrait{max-width:280px}
  .stages{height:min(540px,70vh)}
  .st.is-active{flex:3.4 1 0}
}
@media (max-width:860px){
  .nav{
    position:fixed; inset:0; margin:0; background:rgba(36,16,25,.98); flex-direction:column;
    align-items:flex-start; justify-content:center; gap:26px; padding:0 var(--pad);
    transform:translateX(100%); transition:transform .5s var(--ease);
  }
  .nav.open{transform:none}
  .nav a{font-size:26px; font-family:var(--disp)}
  .nav__cta{font-family:var(--sans); font-size:14px}
  .burger{display:block}
  .hero__cue{display:none}
  .stages{flex-direction:column; height:auto; gap:10px}
  .st,.st.is-active{flex:none; height:auto; min-height:250px; display:flex; align-items:flex-end}
  .st__media img{filter:saturate(.9) brightness(.5); transform:none}
  .st::after{background:linear-gradient(180deg, rgba(36,16,25,.3) 0%, rgba(36,16,25,.9) 100%)}
  .st__hit{position:absolute; padding:0; opacity:0}
  .st__spine{display:none}
  .st__card{position:relative; opacity:1; transform:none; padding:26px clamp(20px,5vw,30px); max-width:none; left:auto; right:auto; bottom:auto}
}
@media (max-width:560px){
  .cform__row{grid-template-columns:1fr}
  .fact{grid-template-columns:1fr; gap:2px}
  .contact__list li{grid-template-columns:1fr; gap:2px}
  .mark__sub{display:none}
}