/* ==========================================================================
   Pst. Umanuwa D. Caleb — site styles
   Palette: oxblood / port / gilt / parchment / ink / ash
   Type:    Bodoni Moda (display) · Marcellus SC (utility) · Karla (body)
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root{
  --oxblood:#4A1220;
  --port:#6B1F32;
  --oxblood-deep:#2E0B15;
  --gilt:#C9A227;
  --gilt-lt:#E8C766;
  --gilt-dk:#A8811C;
  --parchment:#F7F2E8;
  --parchment-2:#EFE7D8;
  --ink:#1B1416;
  --ash:#6E625F;
  --line:rgba(27,20,22,.14);
  --line-light:rgba(247,242,232,.22);

  --display:"Bodoni Moda","Didot","Times New Roman",serif;
  --utility:"Marcellus SC","Optima","Palatino Linotype",serif;
  --body:"Karla","Helvetica Neue",Arial,sans-serif;

  --wrap:1180px;
  --gutter:clamp(1.25rem,5vw,3rem);
  --section-y:clamp(4.5rem,9vw,8rem);
  --radius:3px;
  --shadow-sm:0 2px 10px rgba(27,20,22,.07);
  --shadow-md:0 18px 46px -22px rgba(27,20,22,.42);
  --shadow-book:14px 20px 40px -14px rgba(27,20,22,.55);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* --- Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: `overflow-x:hidden` here would compute overflow-y to
     `auto`, turning body into a scroll container and breaking the sticky
     masthead. `clip` contains the same overhangs without that side effect. */
  overflow-x:clip;
}
img,svg{max-width:100%;display:block}
/* Neutralise the width/height presentational hints so aspect-ratio governs.
   Modern browsers still derive the ratio from those attributes, so layout
   shift stays prevented. */
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:500;line-height:1.08;letter-spacing:-.005em}
p{margin:0 0 1.1em}
ul,ol{margin:0;padding:0}
figure,blockquote{margin:0}
/* Author display rules would otherwise beat the UA's [hidden] rule. */
[hidden]{display:none!important}
:focus-visible{outline:2.5px solid var(--gilt);outline-offset:3px;border-radius:2px}
::selection{background:var(--gilt);color:var(--ink)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--parchment);padding:.75rem 1.25rem;z-index:200}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Type scale --------------------------------------------------------- */
.eyebrow{
  font-family:var(--utility);
  font-size:clamp(.72rem,1.1vw,.82rem);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gilt-dk);
  margin:0 0 1.1rem;
  display:flex;align-items:center;gap:.75rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:none;opacity:.8}
.eyebrow--light{color:var(--gilt-lt)}

.h-display{font-size:clamp(2.5rem,6.4vw,4.6rem);line-height:1.02}
.h-section{font-size:clamp(2rem,4.2vw,3.15rem);margin-bottom:.5em}
.h-card{font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.14}
.lede{font-size:clamp(1.05rem,1.7vw,1.22rem);line-height:1.62;color:var(--ash);max-width:56ch}
.lede--light{color:rgba(247,242,232,.82)}
.ref{font-family:var(--utility);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash)}

/* --- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--body);font-weight:600;font-size:.94rem;letter-spacing:.03em;
  padding:.95rem 1.6rem;border:1.5px solid transparent;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;
  transition:transform .28s var(--ease),background-color .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--gilt{background:var(--gilt);color:var(--ink);border-color:var(--gilt);box-shadow:0 10px 24px -14px rgba(169,129,28,.9)}
.btn--gilt:hover{background:var(--gilt-lt);border-color:var(--gilt-lt);box-shadow:0 16px 30px -14px rgba(169,129,28,1)}
.btn--oxblood{background:var(--oxblood);color:var(--parchment);border-color:var(--oxblood)}
.btn--oxblood:hover{background:var(--port);border-color:var(--port)}
.btn--outline{background:transparent;color:var(--oxblood);border-color:rgba(74,18,32,.35)}
.btn--outline:hover{border-color:var(--oxblood);background:rgba(74,18,32,.05)}
.btn--ghost-light{background:transparent;color:var(--parchment);border-color:var(--line-light)}
.btn--ghost-light:hover{border-color:var(--gilt-lt);color:var(--gilt-lt)}
.btn--sm{padding:.7rem 1.15rem;font-size:.86rem}
.btn--block{width:100%}
.btn__arrow{transition:transform .28s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}

.link-quiet{
  font-family:var(--body);font-weight:600;font-size:.92rem;letter-spacing:.04em;
  color:var(--oxblood);text-decoration:none;
  border-bottom:1.5px solid rgba(74,18,32,.28);padding-bottom:2px;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.link-quiet:hover{border-color:var(--gilt);color:var(--port)}
.link-quiet--light{color:var(--gilt-lt);border-bottom-color:rgba(232,199,102,.4)}
.link-quiet--light:hover{color:var(--parchment);border-bottom-color:var(--parchment)}

/* --- Masthead ----------------------------------------------------------- */
.masthead{
  position:sticky;top:0;z-index:100;
  background:rgba(74,18,32,.97);
  border-bottom:1px solid rgba(232,199,102,.16);
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease);
}
@supports (backdrop-filter:blur(8px)){
  .masthead{background:rgba(74,18,32,.82);backdrop-filter:blur(14px) saturate(1.2)}
}
.masthead.is-stuck{box-shadow:0 12px 30px -22px rgba(27,20,22,.9);background:rgba(46,11,21,.94)}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:76px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--parchment);flex:none}
.brand__mark{width:34px;height:34px;flex:none}
.brand__name{font-family:var(--display);font-size:1.06rem;letter-spacing:.02em;line-height:1.1}
.brand__role{display:block;font-family:var(--utility);font-size:.6rem;letter-spacing:.24em;color:var(--gilt-lt);text-transform:uppercase;margin-top:2px}

.nav{display:flex;align-items:center;gap:.35rem;list-style:none}
.nav a{
  display:block;text-decoration:none;color:rgba(247,242,232,.88);
  font-size:.88rem;font-weight:500;letter-spacing:.05em;
  padding:.55rem .8rem;position:relative;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.28rem;height:1px;
  background:var(--gilt);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--parchment)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.masthead__cta{display:flex;align-items:center;gap:.6rem;flex:none}

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

/* --- Hero --------------------------------------------------------------- */
.hero{position:relative;isolation:isolate}
.hero__ground{
  position:relative;
  background:
    radial-gradient(120% 90% at 78% 12%,rgba(107,31,50,.9) 0%,rgba(74,18,32,0) 58%),
    linear-gradient(168deg,#5C1728 0%,var(--oxblood) 46%,var(--oxblood-deep) 100%);
  color:var(--parchment);
  padding-block:clamp(2rem,3.6vw,3.25rem) clamp(7.5rem,13vw,10.5rem);
  overflow:hidden;
}
.hero__ground::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.hero__title{margin-bottom:1.3rem;display:grid;gap:.2rem}
.hero__kicker{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(1.05rem,1.9vw,1.55rem);line-height:1.2;
  letter-spacing:.03em;color:rgba(247,242,232,.9);
}
.hero__title em{
  display:block;
  font-style:italic;font-weight:400;
  font-size:clamp(2.9rem,7.4vw,5.6rem);line-height:.98;letter-spacing:-.02em;
  color:var(--gilt-lt);
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .hero__title em{
    background:linear-gradient(100deg,var(--gilt-dk) 0%,var(--gilt) 22%,#F6E7B4 40%,var(--gilt) 58%,var(--gilt-dk) 100%);
    background-size:280% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:foil 2.8s var(--ease) .55s 1 forwards;
  }
}
@keyframes foil{from{background-position:100% 0}to{background-position:12% 0}}

.hero__sub{max-width:52ch;margin-bottom:1.6rem}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-bottom:1.9rem}
.hero__proof{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;padding-top:1.6rem;border-top:1px solid var(--line-light);list-style:none}
.hero__proof li{display:flex;flex-direction:column;gap:.15rem}
.hero__proof b{font-family:var(--display);font-size:1.6rem;font-weight:500;color:var(--gilt-lt);line-height:1}
.hero__proof span{font-family:var(--utility);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,242,232,.62)}

.hero__portrait{margin:0;position:relative}
/* The studio backdrop is already near-black, so the radial mask dissolves the
   photo's rectangle straight into the oxblood ground. */
/* The mask must be centred with a radius that reaches full transparency
   inside every edge (0.66 * 0.78 ≈ 51% > 50%), otherwise the photograph's
   rectangle shows as a hard line along the top and right. */
.hero__portrait img{
  width:100%;
  max-height:clamp(330px,46vw,560px);
  object-fit:cover;object-position:50% 26%;
  -webkit-mask-image:radial-gradient(66% 66% at 50% 50%,#000 30%,transparent 78%);
  mask-image:radial-gradient(66% 66% at 50% 50%,#000 30%,transparent 78%);
}
.hero__seal{
  position:absolute;right:-16px;top:5%;
  background:var(--parchment);color:var(--oxblood);
  padding:.9rem 1.1rem;border-radius:2px;box-shadow:var(--shadow-md);
  font-family:var(--utility);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;text-align:center;line-height:1.5;
}
.hero__seal b{display:block;font-family:var(--display);font-size:1.35rem;letter-spacing:0;text-transform:none}

/* --- The shelf: book cards ---------------------------------------------- */
.shelf{position:relative;z-index:3;margin-top:clamp(-11rem,-13vw,-7.5rem)}
.shelf__panel{
  background:var(--parchment);
  border:1px solid rgba(201,162,39,.3);
  box-shadow:0 40px 80px -46px rgba(27,20,22,.75);
  padding:clamp(1.6rem,3.4vw,2.6rem);
}
.shelf__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.shelf__head h2{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:500}
.shelf__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.4rem)}
.shelf__grid > *{padding-top:clamp(1.6rem,3vw,2.2rem)}
.shelf__grid > *:first-child{border-right:1px solid var(--line);padding-right:clamp(1.5rem,3vw,2.4rem)}

/* The supplied covers are landscape mockups, so side-by-side would leave the
   title in a ~240px column. Stack instead and cap the cover width. */
.bookcard{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1rem,2vw,1.4rem);align-items:start}
/* The two mockups have slightly different intrinsic ratios, so cap by HEIGHT
   or one reads as the larger book. */
.bookcard .book{width:auto;max-width:100%}
.bookcard .book img{width:auto;max-width:100%;max-height:245px}
.bookcard__body{min-width:0}
.bookcard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-bottom:.7rem}
.tag{
  font-family:var(--utility);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.32rem .6rem;border:1px solid rgba(74,18,32,.28);color:var(--oxblood);border-radius:2px;
}
.tag--gilt{background:rgba(201,162,39,.16);border-color:rgba(169,129,28,.45);color:#7A5F12}
.bookcard h3{margin-bottom:.45rem}
.bookcard__sub{font-family:var(--display);font-style:italic;font-size:1.02rem;color:var(--port);margin-bottom:.75rem}
.bookcard__desc{font-size:.97rem;color:var(--ash);margin-bottom:.95rem}
.gains{list-style:none;margin-bottom:1.25rem;display:grid;gap:.42rem}
.gains li{position:relative;padding-left:1.5rem;font-size:.92rem;line-height:1.5}
.gains li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
  border:1.5px solid var(--gilt-dk);transform:rotate(45deg);
}
.bookcard__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}

/* --- The book object ----------------------------------------------------
   The supplied covers are 3D mockups that already carry their own spine,
   page block and perspective, so the old CSS chrome (spine shading, gilt
   page edge, ribbon marker) would double up on them. Only the lift and the
   cast shadow remain. */
.book{
  position:relative;display:block;width:100%;
  transition:transform .5s var(--ease),filter .5s var(--ease);
  filter:drop-shadow(8px 14px 22px rgba(27,20,22,.3));
}
.book img{width:100%;height:auto}
.book:hover,.bookcard:hover .book{transform:translateY(-8px) scale(1.015);filter:drop-shadow(10px 20px 30px rgba(27,20,22,.38))}
.book--lg{max-width:400px}

/* --- Generic sections --------------------------------------------------- */
.section{padding-block:var(--section-y)}
.section--dark{background:var(--oxblood-deep);color:var(--parchment)}
.section--dark .h-section{color:var(--parchment)}
.section--tint{background:var(--parchment-2)}
.section__head{max-width:62ch;margin-bottom:clamp(2.25rem,4vw,3.25rem)}
.section__head--center{margin-inline:auto;text-align:center}
.section__head--center .eyebrow{justify-content:center}

/* --- About -------------------------------------------------------------- */
.about{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about__figure{position:relative;margin:0}
.about__figure img{border-radius:2px;box-shadow:var(--shadow-md)}
.about__figure::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--gilt);z-index:-1}
.about__sig{font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--port);margin-top:1.4rem}
.pillars{list-style:none;display:grid;gap:1.1rem;margin:1.6rem 0 2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.pillars li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start}
.pillars .ref{padding-top:.28rem;color:var(--gilt-dk)}
.pillars b{display:block;font-family:var(--display);font-size:1.12rem;font-weight:500;margin-bottom:.15rem}
.pillars p{margin:0;font-size:.95rem;color:var(--ash)}

/* --- Featured books (deep dive) ----------------------------------------- */
.feature{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.feature + .feature{margin-top:clamp(3.5rem,7vw,6rem);padding-top:clamp(3.5rem,7vw,6rem);border-top:1px solid var(--line)}
.feature__aside{position:sticky;top:110px;display:grid;justify-items:center;gap:1.4rem}
.pricebox{width:100%;max-width:300px;background:var(--parchment);border:1px solid var(--line);padding:1.35rem;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.pricebox__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.pricebox__price{font-family:var(--display);font-size:2rem;font-weight:500;line-height:1}
/* Placeholder text in the price slot: read it as a status, not as a figure. */
.pricebox__price--pending{font-family:var(--utility);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.pricebox__stack{display:grid;gap:.55rem;margin-bottom:.9rem}
.pricebox__fine{font-size:.8rem;color:var(--ash);margin:0;text-align:center;line-height:1.5}

.contents{list-style:none;display:grid;gap:.05rem;margin:1.4rem 0 1.6rem;border-top:1px solid var(--line)}
.contents li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:baseline;padding:.72rem 0;border-bottom:1px solid var(--line)}
/* Each row is its own grid, so without a floor on the ref column the titles
   start at a different x on every line. */
.contents .ref{color:var(--gilt-dk);font-size:.7rem;min-width:4.25rem}
.contents__pg{font-family:var(--utility);font-size:.74rem;color:var(--ash);letter-spacing:.1em}
.pullquote{
  margin:1.6rem 0;padding:1.3rem 0 1.3rem 1.6rem;border-left:2px solid var(--gilt);
  font-family:var(--display);font-style:italic;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.42;
}
.pullquote cite{display:block;margin-top:.7rem;font-family:var(--utility);font-style:normal;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash)}
.pullquote p{margin:0}
.pullquote__by{display:flex;align-items:center;gap:.85rem;margin-top:1rem}
.pullquote__by cite{margin-top:0}
.pullquote__portrait{
  width:48px;height:48px;flex:none;border-radius:50%;
  object-fit:cover;object-position:50% 18%;
  border:1px solid rgba(201,162,39,.55);
}
.buyrow{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.share{display:flex;align-items:center;gap:.6rem;margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.share__btn{
  width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:50%;background:transparent;cursor:pointer;color:var(--oxblood);
  transition:border-color .25s var(--ease),background-color .25s var(--ease),transform .25s var(--ease);
}
.share__btn:hover{border-color:var(--gilt);background:rgba(201,162,39,.12);transform:translateY(-2px)}

/* --- Cards / grids ------------------------------------------------------ */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.6vw,2rem)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,2.6vw,2rem)}
.card{
  background:var(--parchment);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.4rem,2.6vw,1.9rem);display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(201,162,39,.5)}
.card h3{margin-bottom:.5rem}
.card p{color:var(--ash);font-size:.96rem}
.card__foot{margin-top:auto;padding-top:1rem}
.card--dark{background:rgba(247,242,232,.04);border-color:var(--line-light)}
.card--dark p{color:rgba(247,242,232,.72)}
.card__icon{width:34px;height:34px;color:var(--gilt-dk);margin-bottom:1rem}
.card--dark .card__icon{color:var(--gilt-lt)}

.quote-card{background:var(--parchment);border:1px solid var(--line);padding:clamp(1.5rem,2.8vw,2rem);border-radius:var(--radius);display:flex;flex-direction:column;gap:1.1rem}
.quote-card blockquote{margin:0;font-family:var(--display);font-size:1.12rem;line-height:1.5;font-style:italic}
.quote-card__who{display:flex;align-items:center;gap:.85rem;margin-top:auto}
.avatar{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--oxblood);color:var(--gilt-lt);font-family:var(--display);font-size:1rem}
.quote-card__who b{display:block;font-family:var(--body);font-size:.92rem;font-weight:600}
.quote-card__who span{font-size:.82rem;color:var(--ash)}


/* --- Events ------------------------------------------------------------- */
.events{list-style:none;display:grid;gap:0;border-top:1px solid var(--line-light)}
.events li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.5rem;align-items:center;padding:1.15rem 0;border-bottom:1px solid var(--line-light)}
.events time{font-family:var(--display);font-size:1.1rem;color:var(--gilt-lt);min-width:6.5rem}
.events b{display:block;font-weight:500;font-family:var(--display);font-size:1.15rem}
.events span{font-size:.88rem;color:rgba(247,242,232,.66)}

/* --- Newsletter --------------------------------------------------------- */
.signup{
  background:linear-gradient(140deg,var(--port) 0%,var(--oxblood) 55%,var(--oxblood-deep) 100%);
  color:var(--parchment);border-radius:var(--radius);
  padding:clamp(2rem,5vw,3.6rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:center;
  position:relative;overflow:hidden;
}
.signup::before{
  content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;
  border:1px solid rgba(232,199,102,.28);border-radius:50%;
}
.signup__body{position:relative;z-index:2}
.signup h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:.6rem}
.form{position:relative;z-index:2;display:grid;gap:.85rem}
.field{display:grid;gap:.4rem}
.field label{font-family:var(--utility);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,242,232,.8)}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:.98rem;color:var(--ink);background:var(--parchment);
  border:1.5px solid transparent;border-radius:var(--radius);padding:.85rem 1rem;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gilt);box-shadow:0 0 0 3px rgba(201,162,39,.3)}
.field--light label{color:var(--ash)}
.field--light input,.field--light textarea,.field--light select{background:#fff;border-color:var(--line)}
.field__error{font-size:.82rem;color:#FFC9C9;min-height:1.2em}
.field--light .field__error{color:#A11B2E}
.form__fine{font-size:.8rem;color:rgba(247,242,232,.6);margin:0}
.form--light .form__fine{color:var(--ash)}
.form__status{font-size:.9rem;font-weight:600;margin:0;min-height:1.4em}
.form__status[data-state="ok"]{color:var(--gilt-lt)}
.form__status[data-state="err"]{color:#FFC9C9}
.form--light .form__status[data-state="ok"]{color:#1F6B3A}
.form--light .form__status[data-state="err"]{color:#A11B2E}
.magnet{display:flex;align-items:center;gap:.9rem;margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--line-light);font-size:.9rem;color:rgba(247,242,232,.78)}
.magnet svg{color:var(--gilt-lt);flex:none}

/* --- Footer ------------------------------------------------------------- */
.footer{background:var(--oxblood-deep);color:rgba(247,242,232,.76);padding-block:clamp(3rem,6vw,4.5rem) 2rem;font-size:.92rem}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(1.75rem,4vw,3rem);padding-bottom:2.5rem;border-bottom:1px solid var(--line-light)}
.footer h4{font-family:var(--utility);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gilt-lt);margin-bottom:1rem;font-weight:400}
.footer ul{list-style:none;display:grid;gap:.55rem}
.footer a{text-decoration:none;color:rgba(247,242,232,.76);transition:color .25s var(--ease)}
.footer a:hover{color:var(--gilt-lt)}
.footer__brand p{max-width:38ch;font-size:.92rem;color:rgba(247,242,232,.62)}
.social{display:flex;gap:.6rem;margin-top:1.2rem}
.social a{width:38px;height:38px;border:1px solid var(--line-light);border-radius:50%;display:grid;place-items:center;transition:border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.social a:hover{border-color:var(--gilt-lt);color:var(--gilt-lt);transform:translateY(-2px)}
.footer__base{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center;padding-top:1.75rem;font-size:.84rem;color:rgba(247,242,232,.55)}
.footer__base ul{display:flex;flex-wrap:wrap;gap:1.25rem;list-style:none}

/* --- Page header (sub-pages) -------------------------------------------- */
.pagehead{
  background:linear-gradient(158deg,#5C1728 0%,var(--oxblood) 52%,var(--oxblood-deep) 100%);
  color:var(--parchment);padding-block:clamp(3.5rem,7vw,5.5rem);
}
.pagehead h1{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:.8rem}
.crumbs{display:flex;gap:.5rem;align-items:center;font-family:var(--utility);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,242,232,.6);list-style:none;margin-bottom:1.5rem}
.crumbs a{text-decoration:none;color:var(--gilt-lt)}
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:2.5rem 0 .8rem}
.prose h3{font-size:1.25rem;margin:1.8rem 0 .5rem}
.prose ul{padding-left:1.2rem;margin-bottom:1.2rem;display:grid;gap:.4rem}
.prose li{list-style:disc}

/* --- Motion ------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.1s}
[data-reveal-delay="2"]{transition-delay:.2s}
[data-reveal-delay="3"]{transition-delay:.3s}

/* --- Responsive --------------------------------------------------------- */
@media (max-width:1080px){
  .nav{display:none}
  .nav.is-open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:var(--oxblood-deep);padding:.75rem var(--gutter) 1.5rem;
    border-bottom:1px solid var(--line-light);box-shadow:0 24px 40px -28px rgba(0,0,0,.9);
  }
  .nav.is-open a{padding:.85rem 0;border-bottom:1px solid rgba(247,242,232,.09);font-size:1rem}
  .nav.is-open a::after{display:none}
  .hamburger{display:flex}
  .masthead__inner{position:relative}
  .masthead__cta .btn{display:none}
  .feature__aside{position:static}
}
@media (max-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__portrait{display:none}
  .hero__ground{padding-bottom:clamp(8rem,20vw,11rem)}
  .shelf__grid{grid-template-columns:minmax(0,1fr);gap:0}
  .shelf__grid > *:first-child{border-right:0;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:clamp(1.6rem,4vw,2.2rem)}
  .about,.feature,.signup{grid-template-columns:minmax(0,1fr)}
  .about__figure{max-width:420px}
  .feature__aside{justify-items:start}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .book{max-width:280px}
  .grid-3,.grid-2{grid-template-columns:minmax(0,1fr)}
  .footer__grid{grid-template-columns:minmax(0,1fr)}
  .events li{grid-template-columns:minmax(0,1fr);gap:.35rem}
  .hero__proof{gap:1.1rem 1.75rem}
  .bookcard__actions .btn,.buyrow .btn{width:100%}
  .contents li{grid-template-columns:auto minmax(0,1fr);gap:.75rem}
  .contents__pg{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero__title em{background-position:12% 0}
  [data-reveal]{opacity:1;transform:none}
  .book:hover,.bookcard:hover .book{transform:none}
}

@media print{
  .masthead,.hamburger,.signup,.social{display:none}
  body{background:#fff;color:#000}
}