/* ============================================================
   Chef Ashè — chefashe.com
   Palette : warm ink · bone · leaf-gold · moss
   Type    : Cormorant Garamond (display) / Jost (sans)
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* colour */
  --ink:        #12100E;
  --ink-2:      #1B1815;
  --ink-3:      #2A2521;
  --bone:       #F7F3EC;
  --bone-2:     #EFE8DB;
  --bone-3:     #E3DACA;

  --gold:       #A98142;   /* decorative / large only */
  --gold-deep:  #7A5C28;   /* small text on light — 5.6:1 */
  --gold-bright:#C9A227;   /* on dark — 7.6:1 */
  --moss:       #24312A;

  --text-dark:  #332F29;
  --text-muted: #5A544C;
  --text-light: #E8E1D5;
  --text-light-muted: #A79E90;

  /* spacing — spacious scale */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem;
  --s4: 2.5rem; --s5: 4rem;   --s6: 6rem;   --s7: 9rem;

  /* type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: 620ms;

  --wrap: 1240px;
  --nav-h: 76px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bone);
  color:var(--text-dark);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:400; line-height:1.06; }
p{ margin:0 0 var(--s2); }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; cursor:pointer; }

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

.skip-link{
  position:absolute; left:var(--s2); top:-100px; z-index:200;
  background:var(--ink); color:var(--bone);
  padding:.7rem 1.1rem; border-radius:2px;
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; transition:top 200ms var(--ease);
}
.skip-link:focus{ top:var(--s2); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.25rem, 5vw, 3rem); }

/* ---------- 3. Shared type ---------- */
.eyebrow{
  font-size:.7rem; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 var(--s3);
  display:flex; align-items:center; gap:.9rem;
}
.eyebrow::after{
  content:""; height:1px; flex:1; max-width:70px;
  background:currentColor; opacity:.45;
  transform-origin:left; transform:scaleX(0);
  transition:transform 900ms var(--ease-out) 180ms;
}
.is-in .eyebrow::after, .eyebrow.is-in::after{ transform:scaleX(1); }

.h2{
  font-size:clamp(2.3rem, 1.5rem + 3.6vw, 4.3rem);
  letter-spacing:-.015em;
  margin:0 0 var(--s3);
}
.h2 em{ font-style:italic; color:var(--gold-deep); }
.section--dark .h2 em{ color:var(--gold-bright); }

.prose p{ margin-bottom:var(--s2); color:var(--text-muted); max-width:56ch; }
/* Opening line of a bio — sets the thesis before the detail arrives. */
.prose .lede-para{
  font-family:var(--serif);
  font-size:clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  line-height:1.3; color:var(--text-dark);
  margin-bottom:var(--s3); max-width:26ch;
}
.section--dark .prose .lede-para, .prolific .prose .lede-para{ color:var(--text-light); }
.prose strong{ font-weight:500; color:var(--text-dark); }
.section--dark .prose p{ color:var(--text-light-muted); }
.section--dark .prose strong{ color:var(--text-light); }

.section__lede{
  color:var(--text-muted); max-width:58ch;
  font-size:1.05rem;
}
.section--dark .section__lede{ color:var(--text-light-muted); }

/* ---------- 4. Sections ---------- */
.section{ padding-block:clamp(4.5rem, 3rem + 9vw, var(--s7)); position:relative; }
.section--dark{ background:var(--ink); color:var(--text-light); }
.section--bone{ background:var(--bone-2); }
.section__head{ margin-bottom:clamp(2.5rem, 1.5rem + 4vw, var(--s6)); }
.section__head--center{ text-align:center; max-width:760px; margin-inline:auto; }
.section__head--center .eyebrow{ justify-content:center; }
.section__head--center .eyebrow::after{ display:none; }

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:.85rem 1.9rem;
  font-family:var(--sans); font-size:.78rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; border-radius:1px;
  transition:background-color 260ms var(--ease), color 260ms var(--ease),
             border-color 260ms var(--ease), transform 260ms var(--ease);
}
.btn--gold{ background:var(--gold); color:#1A1408; border-color:var(--gold); }
.btn--gold:hover{ background:var(--gold-bright); border-color:var(--gold-bright); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--bone); border-color:rgba(247,243,236,.45); }
.btn--ghost:hover{ border-color:var(--bone); background:rgba(247,243,236,.1); transform:translateY(-2px); }
.btn--full{ width:100%; }

.link-gold{
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:44px;                       /* touch target */
  color:var(--gold-deep); text-decoration:none;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  box-shadow:inset 0 -1px 0 rgba(122,92,40,.35);
  transition:gap 260ms var(--ease), box-shadow 260ms var(--ease);
}
.link-gold:hover{ box-shadow:inset 0 -1px 0 var(--gold-deep); }
.link-gold:hover{ gap:.95rem; }

/* ---------- 6. Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  transition:background-color 420ms var(--ease), box-shadow 420ms var(--ease),
             height 420ms var(--ease);
}
.nav.is-stuck{
  background:rgba(18,16,14,.93);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(169,129,66,.22);
  height:64px;
}
.nav__inner{
  height:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(1.25rem, 5vw, 3rem);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
}
.nav__brand{
  text-decoration:none; color:var(--bone); line-height:1;
  display:flex; flex-direction:column; justify-content:center;
  min-height:44px;
}
.nav__brand-mark{
  display:block; font-family:var(--serif); font-size:1.65rem;
  letter-spacing:.02em;
}
.nav__brand-sub{
  display:block; font-size:.56rem; letter-spacing:.36em;
  text-transform:uppercase; color:var(--gold-bright); margin-top:.2rem;
}
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2vw,1.9rem); }
.nav__links a{
  color:var(--bone); text-decoration:none;
  font-size:.74rem; letter-spacing:.17em; text-transform:uppercase;
  display:inline-flex; align-items:center; min-height:44px;
  position:relative;
  transition:color 240ms var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:.15rem; height:1px; width:100%;
  background:var(--gold-bright); transform:scaleX(0); transform-origin:right;
  transition:transform 340ms var(--ease-out);
}
.nav__links a:hover::after, .nav__links a.is-current::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-current{ color:var(--gold-bright); }
.nav__cta{
  border:1px solid rgba(201,162,39,.55); padding:.6rem 1.15rem !important;
  color:var(--gold-bright) !important;
}
.nav__cta::after{ display:none !important; }
.nav__cta:hover{ background:var(--gold-bright); color:#1A1408 !important; }

.nav__toggle{
  display:none; width:48px; height:48px; background:none; border:0;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:6px;
}
.nav__toggle span{
  display:block; height:1px; background:var(--bone);
  transition:transform 340ms var(--ease), width 340ms var(--ease), opacity 240ms;
}
.nav__toggle span:nth-child(1){ width:26px; }
.nav__toggle span:nth-child(2){ width:18px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ width:26px; transform:translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ width:26px; transform:translateY(-3.5px) rotate(-45deg); }

@media (max-width: 940px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:fixed; inset:0; z-index:-1;
    background:rgba(18,16,14,.98);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    flex-direction:column; justify-content:center; gap:var(--s3);
    opacity:0; visibility:hidden;
    transition:opacity 420ms var(--ease), visibility 420ms;
  }
  .nav__links.is-open{ opacity:1; visibility:visible; }
  .nav__links a{ font-size:1rem; letter-spacing:.24em; }
  .nav__cta{ margin-top:var(--s2); }
}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--nav-h) 0 clamp(3rem,7vw,6rem);
  overflow:hidden; background:var(--ink);
  isolation:isolate;
}
.hero__stage{ position:absolute; inset:0; z-index:-2; }
.hero__slide{
  position:absolute; inset:0;
  /* background-image is set inline in the HTML so the URL resolves
     against the document, not against this stylesheet's folder. */
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06);
  transition:opacity 2200ms var(--ease);
}
.hero__slide.is-active{
  opacity:1;
  animation:kenburns 15s ease-out forwards;
}
@keyframes kenburns{
  from{ transform:scale(1.02); }
  to  { transform:scale(1.14); }
}
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  /* The hero image rotates, so the type needs a ground that holds up over
     any of them — a left wash for the copy, a bottom wash for the buttons. */
  background:
    linear-gradient(to right, rgba(18,16,14,.93) 0%, rgba(18,16,14,.78) 26%, rgba(18,16,14,.34) 56%, rgba(18,16,14,.2) 78%, rgba(18,16,14,.45) 100%),
    linear-gradient(to top, rgba(18,16,14,.9) 0%, rgba(18,16,14,.4) 40%, rgba(18,16,14,.2) 68%, rgba(18,16,14,.55) 100%),
    radial-gradient(130% 90% at 15% 85%, rgba(18,16,14,.65), transparent 62%);
}
@media (max-width:640px){
  .hero__scrim{
    background:
      linear-gradient(to top, rgba(18,16,14,.94) 0%, rgba(18,16,14,.7) 45%, rgba(18,16,14,.5) 75%, rgba(18,16,14,.6) 100%);
  }
}
.hero__content{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(1.25rem, 5vw, 3rem);
  color:var(--bone);
}
.hero__eyebrow{
  font-size:.7rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold-bright); margin:0 0 var(--s3);
}
.hero__title{
  font-size:clamp(3.6rem, 1.6rem + 12vw, 10.5rem);
  line-height:.88; letter-spacing:-.02em;
  margin:0 0 var(--s3); font-weight:300;
}
.hero__word{ display:block; overflow:hidden; }
.hero__word > span{
  display:block;
  transform:translateY(105%);
  animation:wordUp 1150ms var(--ease-out) forwards;
}
.hero__word:nth-child(2) > span{ animation-delay:150ms; }
.hero__word--accent > span{ font-style:italic; color:var(--gold-bright); }
@keyframes wordUp{ to{ transform:translateY(0); } }

.hero__tagline{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.15rem, 1rem + .8vw, 1.7rem);
  color:rgba(247,243,236,.9); max-width:34ch;
  margin:0 0 var(--s4);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s2); }

.hero__scroll{
  position:absolute; right:clamp(1.25rem,5vw,3rem); bottom:clamp(3rem,7vw,6rem);
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  color:rgba(247,243,236,.65); text-decoration:none;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  writing-mode:vertical-rl;
  transition:color 260ms var(--ease);
}
.hero__scroll:hover{ color:var(--gold-bright); }
.hero__scroll-line{
  width:1px; height:60px; background:linear-gradient(to bottom, var(--gold-bright), transparent);
  animation:scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse{ 0%,100%{ opacity:.35; transform:scaleY(.6);} 50%{ opacity:1; transform:scaleY(1);} }
@media (max-width:640px){ .hero__scroll{ display:none; } }

/* ---------- 8. Marquee ---------- */
.marquee{
  background:var(--ink-2); color:var(--text-light-muted);
  padding-block:1.15rem; overflow:hidden;
  border-block:1px solid rgba(169,129,66,.2);
}
.marquee__track{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__set{ display:flex; align-items:center; flex-shrink:0; }
.marquee__set span{
  padding-inline:1.6rem; white-space:nowrap;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
}
.marquee__set i{ color:var(--gold); font-style:normal; font-size:.6rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- 9. The Chef ---------- */
.chef__grid{
  display:grid; gap:clamp(2.5rem,5vw,var(--s6));
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  align-items:center;
}
@media (max-width:900px){ .chef__grid{ grid-template-columns:1fr; } }

.chef__figure{ margin:0; position:relative; }
.chef__figure img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%;
  border-radius:2px;
}
.chef__figure::after{
  content:""; position:absolute; inset:auto -14px -14px auto;
  width:58%; height:58%; border:1px solid var(--gold);
  opacity:.4; z-index:-1; border-radius:2px;
}
/* The offset frame needs room to sit behind the image; below the column
   break it would only collide with the caption, so drop it. */
@media (max-width:900px){ .chef__figure::after{ display:none; } }
.chef__figure figcaption{
  margin-top:.9rem; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-muted);
}

/* ---- Bio chapters ---- */
.chapters{
  display:grid; gap:clamp(2rem,4vw,var(--s5)) clamp(2rem,5vw,var(--s6));
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:clamp(3rem,6vw,var(--s6));
  padding-top:clamp(2.5rem,5vw,var(--s5));
  border-top:1px solid var(--bone-3);
}
@media (max-width:860px){ .chapters{ grid-template-columns:1fr; } }

.chapter h3{
  font-size:clamp(1.5rem,1.25rem + 1.1vw,2.1rem);
  margin-bottom:.6rem;
}
.chapter p{ color:var(--text-muted); font-size:.97rem; max-width:58ch; }
/* Declared after .chapter p so the accent colour isn't lost to specificity. */
.chapter p.chapter__lede{
  font-family:var(--serif); font-style:italic;
  font-size:1.12rem; line-height:1.45;
  color:var(--gold-deep);
  margin-bottom:var(--s2); max-width:40ch;
}
.chapter strong{ font-weight:500; color:var(--text-dark); }
.chapter em{ font-family:var(--serif); font-size:1.08em; font-style:italic; color:var(--text-dark); }

/* ---- FAITH method ---- */
.faith{
  margin-top:clamp(3rem,6vw,var(--s6));
  padding:clamp(2rem,4vw,var(--s5));
  background:var(--ink); color:var(--text-light);
  border-radius:2px; text-align:center;
}
.faith__label{
  margin:0 0 .35rem; font-size:.66rem;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--text-light-muted);
}
.faith__name{
  margin:0 0 var(--s3); font-family:var(--serif);
  font-size:clamp(1.9rem,1.5rem + 2vw,2.9rem);
  color:var(--gold-bright); line-height:1.1;
}
.faith__list{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(1rem,3vw,2.75rem); counter-reset:none;
}
.faith__list li{
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-light);
}
.faith__list span{
  font-family:var(--serif); font-size:2rem; line-height:1;
  color:var(--gold-bright); letter-spacing:0;
}

/* ---- Closing invitation ---- */
.invitation{
  margin-top:clamp(3rem,6vw,var(--s6));
  padding-top:clamp(2.5rem,5vw,var(--s5));
  border-top:1px solid var(--bone-3);
  text-align:center; max-width:64ch; margin-inline:auto;
}
.invitation h3{
  font-size:clamp(1.8rem,1.4rem + 1.8vw,2.7rem);
  margin-bottom:var(--s2);
}
.invitation p{ color:var(--text-muted); }
.invitation__close{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.25rem,1.05rem + .9vw,1.75rem);
  color:var(--text-dark); margin:var(--s3) 0 var(--s3);
}

.facts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s3) var(--s4); margin:var(--s4) 0 0;
  padding-top:var(--s3); border-top:1px solid var(--bone-3);
}
.facts dt{
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:.35rem;
}
.facts dd{ margin:0; font-size:.95rem; color:var(--text-dark); }
@media (max-width:520px){ .facts{ grid-template-columns:1fr; } }

/* ---------- 10. Gallery ---------- */
.gallery{
  display:grid; gap:clamp(.6rem,1.4vw,1.1rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:900px){ .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .gallery{ grid-template-columns:1fr; } }

.gallery__item{
  position:relative; margin:0; overflow:hidden; cursor:pointer;
  background:var(--ink-2); border-radius:2px;
}
.gallery__item img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform 900ms var(--ease-out), filter 600ms var(--ease);
}
.gallery__item:hover img, .gallery__item:focus-within img{
  transform:scale(1.055); filter:brightness(.72);
}
.gallery__item figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.4rem 1.3rem;
  display:flex; flex-direction:column; gap:.25rem;
  background:linear-gradient(to top, rgba(18,16,14,.9), transparent);
  opacity:0; transform:translateY(12px);
  transition:opacity 420ms var(--ease), transform 480ms var(--ease-out);
}
.gallery__item:hover figcaption, .gallery__item:focus-within figcaption{ opacity:1; transform:translateY(0); }
.gallery__item figcaption span{
  font-family:var(--serif); font-size:1.2rem; color:var(--bone); line-height:1.2;
}
.gallery__item figcaption em{
  font-style:normal; font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-bright);
}
/* touch devices: captions always visible */
@media (hover:none){
  .gallery__item figcaption{ opacity:1; transform:none; }
}

/* ---------- 11. Services ---------- */
.cards{
  display:grid; gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:780px){ .cards{ grid-template-columns:1fr; } }

.card{
  position:relative; background:var(--bone-2);
  padding:clamp(1.8rem,3vw,2.8rem);
  border:1px solid var(--bone-3); border-radius:2px;
  transition:transform 480ms var(--ease-out), box-shadow 480ms var(--ease),
             border-color 480ms var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 44px -26px rgba(18,16,14,.5);
  border-color:var(--gold);
}
.card__num{
  font-family:var(--serif); font-size:.9rem; color:var(--gold-deep);
  letter-spacing:.2em; display:block; margin-bottom:var(--s2);
}
.card h3{
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem);
  margin-bottom:var(--s2);
}
.card p{ color:var(--text-muted); font-size:.97rem; }
.card ul{
  margin-top:var(--s3); padding-top:var(--s2);
  border-top:1px solid var(--bone-3);
  display:flex; flex-direction:column; gap:.55rem;
}
.card li{
  font-size:.83rem; letter-spacing:.04em; color:var(--text-muted);
  padding-left:1.2rem; position:relative;
}
.card li::before{
  content:"—"; position:absolute; left:0; color:var(--gold);
}

/* ---------- 13. Prolific ---------- */
.prolific{ background:var(--moss); color:var(--text-light); }
.prolific .eyebrow{ color:var(--gold-bright); }
.prolific .h2 em{ color:var(--gold-bright); }
.prolific .prose p{ color:rgba(232,225,213,.78); }
.prolific .prose strong{ color:var(--text-light); }

.prolific__grid{
  display:grid; gap:clamp(2.5rem,5vw,var(--s6));
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  align-items:center;
}
@media (max-width:900px){ .prolific__grid{ grid-template-columns:1fr; } }

.pill-list{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin:var(--s3) 0 var(--s3);
}
.pill-list li{
  border:1px solid rgba(201,162,39,.4); border-radius:100px;
  padding:.45rem 1rem; font-size:.74rem;
  letter-spacing:.1em; color:rgba(232,225,213,.9);
}
.prolific__note{
  font-family:var(--serif); font-style:italic; font-size:1.15rem;
  color:rgba(232,225,213,.72); max-width:44ch; margin:0;
}
.prolific__card{ margin:0; overflow:hidden; cursor:pointer; border-radius:2px; }
.prolific__card img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform 900ms var(--ease-out);
}
.prolific__card:hover img{ transform:scale(1.05); }

/* ---------- 14. Books ---------- */
.books__grid{
  display:grid; gap:clamp(2rem,4vw,var(--s5));
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:820px){ .books__grid{ grid-template-columns:1fr; } }

.book{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--s3); align-items:center; }
@media (max-width:1000px){ .book{ grid-template-columns:1fr; } }

.book__cover{
  margin:0; overflow:hidden; cursor:pointer; border-radius:2px;
  background:var(--bone-3); padding:clamp(.75rem,2vw,1.25rem);
}
/* The two covers have different native ratios (one square, one 2:3).
   Contain keeps every cover readable instead of cropping the titles. */
.book__cover img{
  width:100%; aspect-ratio:3/4; object-fit:contain;
  transition:transform 900ms var(--ease-out);
}
.book__cover:hover img{ transform:scale(1.04); }
.book h3{ font-size:clamp(1.6rem,1.3rem + 1.2vw,2.3rem); margin-bottom:.5rem; }
.book__sub{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:var(--s2); line-height:1.6;
}
.book__body p{ color:var(--text-muted); font-size:.95rem; }
.books__foot{
  margin:clamp(2.5rem,5vw,var(--s5)) 0 0; text-align:center;
  font-size:.85rem; color:var(--text-muted);
}
.books__foot em{ font-family:var(--serif); font-size:1.05rem; color:var(--text-dark); }

.book__tag{
  display:inline-block; margin:0 0 .7rem;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-deep);
  border:1px solid rgba(122,92,40,.5); border-radius:100px;
  padding:.3rem .85rem;
}
.book__buy{ margin-top:.25rem; }
.book__buy-ext{ margin-left:.6rem; font-size:.9em; }
.book__via{
  margin:.65rem 0 0; font-size:.74rem; letter-spacing:.04em;
  color:var(--text-muted);
}

/* ---------- 14b. Footer subscribe ---------- */
.subscribe{ scroll-margin-top:100px; }   /* clears the fixed nav on #subscribeForm jumps */
.subscribe label{
  display:block; margin-bottom:.5rem;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(232,225,213,.75);
}
.subscribe__row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.subscribe input{
  flex:1 1 200px; min-width:0;
  font-family:var(--sans); font-size:.98rem; font-weight:300;
  color:var(--text-light);
  background:rgba(247,243,236,.06);
  /* .45 keeps the field edge at 3:1 against the footer — WCAG 1.4.11 */
  border:1px solid rgba(232,225,213,.45);
  border-radius:2px; padding:.85rem 1rem; min-height:48px;
  transition:border-color 240ms var(--ease), background-color 240ms var(--ease);
}
.subscribe input::placeholder{ color:rgba(232,225,213,.6); }
.subscribe input:focus{
  border-color:var(--gold-bright); background:rgba(247,243,236,.1); outline:none;
}
.subscribe input:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }
.subscribe.has-error input{ border-color:#C96A6A; }
.subscribe .form__err{ margin-top:.45rem; }
.subscribe__fine{
  margin:.6rem 0 0; font-size:.74rem; color:rgba(232,225,213,.55);
}

/* ---------- 15. Contact ---------- */
.contact__grid{
  display:grid; gap:clamp(2.5rem,5vw,var(--s6));
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width:900px){ .contact__grid{ grid-template-columns:1fr; } }

.contact__details{
  margin-top:var(--s4); padding-top:var(--s3);
  border-top:1px solid rgba(169,129,66,.25);
  display:flex; flex-direction:column; gap:var(--s2);
}
.contact__details li{ display:flex; flex-direction:column; gap:.25rem; }
.contact__label{
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-bright);
}
.contact__details a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--text-light); text-decoration:none;
  box-shadow:inset 0 -1px 0 rgba(232,225,213,.25);
  align-self:flex-start;
  transition:box-shadow 240ms var(--ease), color 240ms var(--ease);
}
.contact__details a:hover{ color:var(--gold-bright); box-shadow:inset 0 -1px 0 var(--gold-bright); }
.contact__details span:not(.contact__label){ color:var(--text-light-muted); }

.form{ display:flex; flex-direction:column; gap:var(--s2); }
.form__row{ display:flex; flex-direction:column; gap:.45rem; }
.form label{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--text-light-muted);
}
.form__opt{ letter-spacing:.06em; text-transform:none; opacity:.65; }
.form input, .form select, .form textarea{
  font-family:var(--sans); font-size:.98rem; font-weight:300;
  color:var(--text-light);
  background:rgba(247,243,236,.045);
  /* .45 keeps the field edge at 3:1 against the ink panel — WCAG 1.4.11 */
  border:1px solid rgba(232,225,213,.45);
  border-radius:2px; padding:.85rem 1rem;
  min-height:48px; width:100%;
  transition:border-color 240ms var(--ease), background-color 240ms var(--ease);
}
.form textarea{ resize:vertical; min-height:130px; line-height:1.6; }
.form select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-bright) 50%),
                   linear-gradient(135deg,var(--gold-bright) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.form select option{ background:var(--ink-2); color:var(--text-light); }
.form input::placeholder, .form textarea::placeholder{ color:rgba(232,225,213,.6); }
.form input:focus, .form select:focus, .form textarea:focus{
  border-color:var(--gold-bright); background:rgba(247,243,236,.075); outline:none;
}
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible{
  outline:2px solid var(--gold-bright); outline-offset:2px;
}
.form__err{
  margin:0; font-size:.76rem; color:#E8A0A0; min-height:0;
  letter-spacing:.02em;
}
.form__row.has-error input,
.form__row.has-error textarea{ border-color:#C96A6A; }
.form__status{ margin:.5rem 0 0; font-size:.88rem; }
.form__status.is-ok{ color:var(--gold-bright); }
.form__status.is-bad{ color:#E8A0A0; }
.form__fallback{
  margin:.4rem 0 0; font-size:.8rem; color:var(--text-light-muted);
}
.form__fallback a{ color:var(--gold-bright); }

/* ---------- 16. Footer ---------- */
.footer{ background:var(--ink-2); color:var(--text-light-muted); padding-block:var(--s5) var(--s4); }
.footer__inner{ display:flex; flex-direction:column; gap:var(--s3); }
.footer__top{
  display:grid; gap:clamp(2rem,4vw,var(--s5));
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width:820px){ .footer__top{ grid-template-columns:1fr; } }
.footer__mark{
  font-family:var(--serif); font-size:1.9rem; color:var(--bone);
  display:block; margin-bottom:.4rem;
}
.footer__brand p{ margin:0; font-size:.85rem; max-width:44ch; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:0 1.3rem; padding-block:var(--s1);
  border-block:1px solid rgba(232,225,213,.1); }
.footer__nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; transition:color 240ms var(--ease);
}
.footer__nav a:hover{ color:var(--gold-bright); }
.footer__legal{
  margin:0; display:flex; flex-wrap:wrap; gap:.7rem; align-items:center;
  font-size:.75rem; letter-spacing:.06em;
}
.footer__legal a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--text-light-muted); text-decoration:none;
}
.footer__legal a:hover{ color:var(--gold-bright); }

/* ---------- 17. Lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:150;
  background:rgba(10,9,8,.96);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,5vw,4rem);
  opacity:0; transition:opacity 340ms var(--ease);
}
.lb[hidden]{ display:none; }
.lb.is-open{ opacity:1; }
.lb__figure{ margin:0; max-width:min(1100px,92vw); max-height:86vh; display:flex;
  flex-direction:column; align-items:center; gap:var(--s2); }
.lb__figure img{
  max-width:100%; max-height:78vh; width:auto; object-fit:contain;
  border-radius:2px; transform:scale(.97); opacity:0;
  transition:transform 460ms var(--ease-out), opacity 460ms var(--ease);
}
.lb.is-open .lb__figure img{ transform:scale(1); opacity:1; }
.lb__figure figcaption{
  color:var(--text-light-muted); font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; text-align:center;
}
.lb__close, .lb__nav{
  position:absolute; background:none; border:0; color:var(--bone);
  width:56px; height:56px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:background-color 240ms var(--ease), color 240ms var(--ease);
}
.lb__close:hover, .lb__nav:hover{ background:rgba(247,243,236,.12); color:var(--gold-bright); }
.lb__close{ top:clamp(.75rem,2vw,1.5rem); right:clamp(.75rem,2vw,1.5rem); font-size:2.4rem; }
.lb__nav{ top:50%; transform:translateY(-50%); font-size:3rem; }
.lb__nav--prev{ left:clamp(.4rem,2vw,1.5rem); }
.lb__nav--next{ right:clamp(.4rem,2vw,1.5rem); }
@media (max-width:600px){
  .lb__nav{ top:auto; bottom:1rem; transform:none; }
  .lb__figure img{ max-height:66vh; }
}

/* ---------- 18. Scroll reveal ---------- */
.js-rise{
  opacity:0; transform:translateY(26px);
  transition:opacity 760ms var(--ease-out), transform 760ms var(--ease-out);
  transition-delay:var(--d, 0ms);
}
.js-rise.is-in{ opacity:1; transform:none; }

/* ---------- 19. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js-rise{ opacity:1 !important; transform:none !important; }
  .hero__word > span{ transform:none !important; }
  .hero__slide.is-active{ animation:none !important; }
  .marquee__track{ animation:none !important; }
  .eyebrow::after{ transform:scaleX(1) !important; }
  .lb__figure img{ opacity:1 !important; transform:none !important; }
}

/* ---------- 20. Print ---------- */
@media print{
  .nav,.hero__scroll,.lb,.marquee,.form{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section--dark,.prolific{ background:#fff !important; color:#000 !important; }
}