/* ==========================================================================
   Cheesecakes to Die For — Design System
   Palette, typography, components and layout for a premium cookbook website.
   ========================================================================== */

/* ----- Design tokens ----------------------------------------------------- */
:root{
  /* Colour — drawn from the cover and manuscript */
  --red:#B01D22;          /* deep cheesecake red (title/spine) */
  --red-dark:#8C161A;     /* hover / depth */
  --red-tint:#F4E1E0;
  --ink:#2B211C;          /* dark chocolate brown — headings & body */
  --ink-soft:#5C4F47;     /* secondary text */
  --muted:#6E5F54;        /* captions / meta (AA contrast on light) */
  --ivory:#FAF5EC;        /* warm premium background */
  --white:#FFFFFF;
  --blush:#F8EEEB;        /* soft section background */
  --blush-deep:#F3E2DE;
  --biscuit:#EADFC9;      /* cards / supporting */
  --biscuit-line:#E4D7BC; /* borders */
  --gold:#B79654;         /* premium accent — used sparingly */

  --shadow-sm:0 2px 8px rgba(43,33,28,.06);
  --shadow:0 12px 34px rgba(43,33,28,.10);
  --shadow-lg:0 30px 70px rgba(43,33,28,.18);
  --shadow-book:0 40px 80px -24px rgba(43,33,28,.55);

  --radius:14px;
  --radius-sm:9px;
  --radius-lg:22px;

  --wrap:1200px;
  --wrap-narrow:900px;
  --gap:clamp(1rem,3vw,2rem);
  --section-y:clamp(2.5rem,5vw,4.5rem);

  --ff-display:"Poppins",system-ui,sans-serif;
  --ff-serif:"Fraunces",Georgia,serif;
  --ff-body:"Inter",system-ui,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ----- 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;
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--white);
  font-size:clamp(1rem,.97rem + .2vw,1.075rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;            /* contain the off-canvas menu without breaking sticky */
}
img,picture,svg{max-width:100%;display:block}
img{height:auto}                 /* preserve aspect ratio with intrinsic width/height attrs */
a:not(.btn){color:var(--red);text-decoration:none;transition:color .2s var(--ease)}
a:not(.btn):hover{color:var(--red-dark)}
a.btn{text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--ff-display);color:var(--ink);line-height:1.08;margin:0;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}

/* ----- Utilities --------------------------------------------------------- */
.wrap{width:min(100% - 2.4rem,var(--wrap));margin-inline:auto}
.wrap--narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--section-y)}
.bg-white{background:var(--white)}
.bg-ivory{background:var(--ivory)}
.bg-blush{background:var(--blush)}
.bg-ink{background:var(--ink);color:var(--ivory)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip-link{position:absolute;left:1rem;top:-3rem;background:var(--red);color:#fff;padding:.6rem 1rem;border-radius:8px;z-index:200;transition:top .2s}
.skip-link:focus{top:1rem;color:#fff}

.eyebrow{
  font-family:var(--ff-serif);font-style:italic;font-weight:500;
  color:var(--red);font-size:1.05rem;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);display:inline-block}
.eyebrow--center{justify-content:center}

h1,.h1{font-size:clamp(1.9rem,1.35rem + 2.2vw,3.1rem);font-weight:800}
h2,.h2{font-size:clamp(1.55rem,1.22rem + 1.3vw,2.25rem);font-weight:700}
h3,.h3{font-size:clamp(1.12rem,1.02rem + .42vw,1.35rem)}
.lead{font-size:clamp(1.1rem,1.02rem + .4vw,1.3rem);color:var(--ink-soft);line-height:1.65}
.section-head{max-width:44rem}
.section-head--center{margin-inline:auto;text-align:center}
.section-head .lead{margin-top:.4rem}

/* ----- Buttons ----------------------------------------------------------- */
.btn{
  --btn-bg:var(--red);--btn-fg:#fff;--btn-bd:var(--red);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--ff-display);font-weight:600;font-size:.98rem;letter-spacing:.01em;
  padding:.85rem 1.6rem;border-radius:50px;border:1.6px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;
  transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(176,29,34,.18)}
/* each variant controls its own hover text colour via --btn-fg (no forced white) */
.btn--primary{--btn-bg:var(--red);--btn-fg:#fff}
.btn--primary:hover{background:var(--red-dark)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--biscuit-line)}
.btn--ghost:hover{--btn-fg:var(--red);background:var(--white);box-shadow:var(--shadow-sm);border-color:var(--red)}
.btn--light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.55)}
.btn--light:hover{background:#fff;color:var(--ink)}
.btn--solid-ivory{--btn-bg:var(--ivory);--btn-fg:var(--ink);--btn-bd:var(--ivory)}
.btn--solid-ivory:hover{background:#fff;color:var(--red)}
.btn--sm{padding:.6rem 1.15rem;font-size:.9rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.textlink{font-family:var(--ff-display);font-weight:600;display:inline-flex;align-items:center;gap:.4rem}
.textlink::after{content:"→";transition:transform .2s var(--ease)}
.textlink:hover::after{transform:translateX(4px)}

/* ----- Announcement bar -------------------------------------------------- */
.announce{background:var(--red);color:#fff;text-align:center;font-size:.9rem;letter-spacing:.02em}
.announce .wrap{padding:.4rem 0;font-family:var(--ff-display);font-weight:500}

/* ----- Header / nav ------------------------------------------------------ */
/* The frosted backdrop lives on a pseudo-element, NOT on .site-header itself.
   A non-none backdrop-filter makes an element a containing block for its
   position:fixed descendants, which would size the off-canvas .mainnav to the
   75px header instead of the viewport (menu clipped to one visible link). */
.site-header{position:sticky;top:0;z-index:100;background:transparent;border-bottom:1px solid var(--biscuit-line);transition:box-shadow .25s}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  backdrop-filter:saturate(1.4) blur(10px)}
.site-header.is-stuck{box-shadow:0 6px 24px rgba(43,33,28,.08)}
.site-header__row{display:flex;align-items:center;gap:1rem;min-height:72px}
.brand{display:inline-flex;align-items:center;flex:0 0 auto;color:var(--red)}
.brand picture{display:block;line-height:0}
.brand__logo{display:block;width:auto;height:54px}
.mainnav{margin-left:auto}
.mainnav>ul{display:flex;align-items:center;gap:.35rem}
.mainnav__close{display:none}
.mainnav a:not(.btn){display:inline-block;padding:.55rem .8rem;color:var(--ink);font-family:var(--ff-display);font-weight:500;font-size:.96rem;border-radius:8px;position:relative}
.mainnav a:not(.btn)::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.35rem;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.mainnav a:not(.btn):hover,.mainnav a[aria-current="page"]{color:var(--red)}
.mainnav a[aria-current="page"]::after,.mainnav a:not(.btn):hover::after{transform:scaleX(1)}
.mainnav__buy{display:none}
.site-header__actions{display:flex;align-items:center;gap:.6rem;margin-left:.4rem}
/* Desktop: three columns so the nav is centred on the page, not merely in the
   gap left over between the logo and the buttons (those differ in width).
   Below 901px .mainnav becomes the fixed off-canvas panel, so the flex row above stands. */
@media (min-width:901px){
  .site-header__row{display:grid;grid-template-columns:1fr auto 1fr;justify-items:center}
  .brand{justify-self:start}
  .mainnav{margin-left:0}
  .site-header__actions{justify-self:end}
}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;color:var(--ink);border:1px solid transparent;transition:background .2s,color .2s}
.icon-btn:hover{background:var(--blush);color:var(--red)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:0;padding:0}
.nav-toggle span{display:block;height:2.4px;width:24px;margin-inline:auto;background:var(--ink);border-radius:3px;transition:transform .3s var(--ease),opacity .2s}
.nav-scrim{position:fixed;inset:0;background:rgba(43,33,28,.45);z-index:98;opacity:0;transition:opacity .3s}
.nav-scrim.show{opacity:1}

/* ----- Book cover facsimile (used inside 3D mockup) ---------------------- */
.book-cover{width:100%;aspect-ratio:776/1015;overflow:hidden;background:#fff}
.book-cover__img,.book-cover img{width:100%;height:100%;object-fit:cover;display:block}

/* ----- 3D book ----------------------------------------------------------- */
.book-3d{position:relative;perspective:1600px;width:100%;max-width:360px}
.book-3d__inner{
  position:relative;transform-style:preserve-3d;
  transform:rotateY(-22deg) rotateX(6deg);
  transition:transform .6s var(--ease);
}
.book-3d:hover .book-3d__inner{transform:rotateY(-14deg) rotateX(3deg)}
.book-3d__front{
  position:relative;border-radius:4px 8px 8px 4px;overflow:hidden;
  box-shadow:var(--shadow-book);
  border-left:3px solid rgba(0,0,0,.12);
}
.book-3d__front::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.35),transparent 22%,transparent 88%,rgba(0,0,0,.10))}
.book-3d__side{
  position:absolute;top:0;left:0;height:100%;width:34px;
  background:linear-gradient(90deg,#8C161A,var(--red) 60%,#8C161A);
  transform:translateX(-33px) rotateY(90deg);transform-origin:right center;
  border-radius:4px 0 0 4px;
}
.book-3d__shadow{position:absolute;left:8%;right:-2%;bottom:-26px;height:44px;background:radial-gradient(ellipse at center,rgba(43,33,28,.34),transparent 70%);filter:blur(6px);z-index:-1}
@media (prefers-reduced-motion:reduce){.book-3d__inner{transform:rotateY(-16deg)}}

/* ----- Hero -------------------------------------------------------------- */
.hero{position:relative;background:
   radial-gradient(120% 90% at 90% 0%,var(--blush) 0%,transparent 60%),
   linear-gradient(180deg,var(--ivory),var(--white));
   overflow:hidden}
.hero::before{content:"";position:absolute;top:-14%;right:-8%;width:44vw;max-width:640px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--red-tint),transparent 66%);opacity:.6;pointer-events:none}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;padding-block:clamp(1.75rem,3.5vw,3rem)}
.hero__content{max-width:36rem}
.hero h1{margin:.2rem 0 1.1rem;text-wrap:balance;
  font-size:clamp(2.5rem,1.5rem + 3.6vw,4.3rem);line-height:1.02}
/* Always break as "Cheesecakes" / "to Die For", never mid-phrase. */
.hero h1 .accent{color:var(--red);display:block}
.hero__sub{max-width:32rem}
.hero__note{margin-top:1.5rem;font-family:var(--ff-serif);font-style:italic;color:var(--muted);font-size:1rem}
.hero__stage{display:flex;justify-content:center;position:relative}
.hero__stack{position:relative;width:100%;max-width:360px;margin-inline:auto}
.hero__photo{position:absolute;width:40%;border-radius:14px;box-shadow:var(--shadow-lg);border:5px solid #fff;overflow:hidden;z-index:3}
.hero__photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}
.hero__photo--1{right:-6%;bottom:8%;width:46%}
.hero__photo--2{left:-4%;top:2%;width:34%}
.hero__badge{position:absolute;left:-6%;bottom:-6%;z-index:5;background:var(--red);color:#fff;border-radius:50%;width:104px;height:104px;display:grid;place-content:center;text-align:center;font-family:var(--ff-serif);font-style:italic;line-height:1.15;box-shadow:var(--shadow);padding:.5rem}
.hero__badge b{display:block;font-family:var(--ff-display);font-style:normal;font-weight:800;font-size:1.4rem}
.hero__badge small{font-size:.68rem;letter-spacing:.04em}

/* ----- Card grids -------------------------------------------------------- */
.grid{display:grid;gap:clamp(1.1rem,2.4vw,1.8rem)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--auto{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}

/* Recipe card */
.rcard{position:relative;background:#fff;border:1px solid var(--biscuit-line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.rcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.rcard__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--biscuit)}
.rcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.rcard:hover .rcard__media img{transform:scale(1.05)}
.rcard__tag{position:absolute;top:.8rem;left:.8rem;background:rgba(255,255,255,.94);color:var(--red);font-family:var(--ff-display);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .7rem;border-radius:50px;box-shadow:var(--shadow-sm)}
.rcard__body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.rcard__title{font-size:1.16rem;line-height:1.2;margin-bottom:.45rem}
.rcard__title a{color:var(--ink)}
.rcard__title a:hover{color:var(--red)}
.rcard__desc{color:var(--ink-soft);font-size:.95rem;margin-bottom:1rem}
.rcard__foot{margin-top:auto}
/* Typographic (photo-less) card */
.rcard--type .rcard__media{aspect-ratio:4/3;display:grid;place-content:center;text-align:center;background:
   linear-gradient(160deg,var(--blush),var(--ivory));border-bottom:1px solid var(--biscuit-line);padding:1.5rem}
.rcard--type .rc-mono{font-family:var(--ff-serif);font-style:italic;color:var(--red);font-size:1.05rem}
.rcard--type .rc-plate{width:70px;height:70px;border-radius:50%;border:2px solid var(--gold);margin:0 auto .8rem;display:grid;place-content:center;color:var(--gold);font-family:var(--ff-display);font-weight:700}

/* ----- Intro split ------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4.5rem);align-items:center}
.split--reverse .split__media{order:2}
.split__media{position:relative}
.split__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%}
/* Content images in split sections: uniform, controlled height (no giant tall crops) */
.split__media>picture img{aspect-ratio:4/3;object-fit:cover;max-height:520px}
.value-list{display:grid;gap:1rem;margin:1.5rem 0}
.value-list li{display:flex;gap:.9rem;align-items:flex-start}
.value-list .vnum{flex:none;width:40px;height:40px;border-radius:50%;background:var(--red-tint);color:var(--red);display:grid;place-content:center;font-family:var(--ff-display);font-weight:700}
.value-list b{font-family:var(--ff-display);display:block;font-size:1.02rem}
.value-list span{color:var(--ink-soft);font-size:.95rem}

/* ----- Category tiles ---------------------------------------------------- */
.cat-tile{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;display:block;box-shadow:var(--shadow-sm)}
.cat-tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cat-tile:hover img{transform:scale(1.06)}
.cat-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(43,33,28,.82))}
.cat-tile__label{position:absolute;left:0;right:0;bottom:0;padding:1.2rem;color:#fff;z-index:2}
.cat-tile__label h3{color:#fff;font-size:1.15rem;line-height:1.15}
.cat-tile__label p{margin:.35rem 0 0;font-size:.85rem;color:rgba(255,255,255,.86);line-height:1.4}
.cat-tile__label .go{display:inline-block;margin-top:.6rem;font-family:var(--ff-display);font-weight:600;font-size:.82rem;color:#fff;letter-spacing:.04em}

/* ----- About Denis ------------------------------------------------------- */
.about-split{align-items:center}
/* Reserve 22px either side: the ::before frame and the __tag badge are hung
   outside the box, and without the room they push past the page padding. */
.portrait{position:relative;width:min(100% - 44px,400px);margin:1.2rem auto 1.5rem}
.portrait::before{content:"";position:absolute;top:22px;left:22px;right:-22px;bottom:-22px;border:1.5px solid var(--gold);border-radius:var(--radius-lg);z-index:0}
.portrait img{position:relative;z-index:1;border-radius:var(--radius-lg);width:100%;filter:grayscale(.05);box-shadow:var(--shadow-lg);border:7px solid #fff}
.portrait__tag{position:absolute;bottom:-1.1rem;left:-1.1rem;z-index:2;background:#fff;border:1px solid var(--biscuit-line);border-radius:14px;padding:.75rem 1.1rem;box-shadow:var(--shadow);font-family:var(--ff-serif);font-style:italic;color:var(--ink)}
.portrait__tag b{display:block;font-family:var(--ff-display);font-style:normal;color:var(--red)}
.signature-name{font-family:var(--ff-serif);font-style:italic;font-size:1.9rem;color:var(--ink);margin-top:.5rem}

/* ----- Essentials (four layers) ----------------------------------------- */
.layer{background:#fff;border:1px solid var(--biscuit-line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.layer__media{aspect-ratio:16/10;overflow:hidden;background:var(--biscuit)}
.layer__media img{width:100%;height:100%;object-fit:cover}
.layer__body{padding:1.3rem 1.4rem 1.5rem;position:relative}
.layer__n{font-family:var(--ff-display);font-weight:800;color:var(--red-tint);font-size:2.4rem;line-height:1;position:absolute;top:-1.6rem;right:1rem;background:#fff;padding:0 .3rem}
.layer h3{margin-bottom:.5rem}
.layer p{color:var(--ink-soft);font-size:.95rem;margin:0}

/* ----- Signature spotlight ---------------------------------------------- */
.spotlight{background:var(--ink);color:var(--ivory);border-radius:var(--radius-lg);overflow:hidden}
.spotlight__grid{display:grid;grid-template-columns:1.1fr .9fr}
.spotlight__media{position:relative;min-height:420px}
.spotlight__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spotlight__media .inset{position:absolute;right:-28px;bottom:1.5rem;width:38%;max-width:170px;border-radius:12px;border:5px solid var(--ink);box-shadow:var(--shadow-lg);z-index:2}
.spotlight__media .inset img{position:static}
.spotlight__body{padding:clamp(1.8rem,4vw,3.4rem)}
.spotlight__body .eyebrow{color:#E9B7B4}
.spotlight__body .eyebrow::before{background:var(--gold)}
.spotlight__body h2{color:#fff}
.spotlight__body p{color:rgba(250,245,236,.82)}
.notes{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 1.6rem}
.notes li{border:1px solid rgba(255,255,255,.22);border-radius:50px;padding:.35rem .85rem;font-size:.82rem;font-family:var(--ff-display);letter-spacing:.02em;color:var(--ivory)}
.spot-meta{display:flex;gap:2rem;margin:1.2rem 0}
.spot-meta b{display:block;font-family:var(--ff-display);font-size:1.3rem;color:#fff}
.spot-meta span{font-size:.8rem;color:rgba(250,245,236,.7);text-transform:uppercase;letter-spacing:.06em}

/* ----- Timeline ---------------------------------------------------------- */
.timeline{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:1rem;margin-top:2.5rem}
.timeline::before{content:"";position:absolute;left:0;right:0;top:52px;height:2px;background:linear-gradient(90deg,var(--biscuit-line),var(--gold),var(--biscuit-line))}
.tl-item{position:relative;padding-top:82px;text-align:center}
.tl-item::before{content:"";position:absolute;top:44px;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--red);z-index:2}
.tl-year{font-family:var(--ff-display);font-weight:800;color:var(--red);font-size:1.05rem}
.tl-item h3{font-size:1rem;margin:.5rem 0 .35rem}
.tl-item p{font-size:.82rem;color:var(--ink-soft);line-height:1.45;margin:0}

/* ----- Gallery / masonry ------------------------------------------------- */
.masonry{columns:4;column-gap:14px}
.masonry__item{break-inside:avoid;margin-bottom:14px;border-radius:12px;overflow:hidden;background:var(--biscuit);cursor:zoom-in;position:relative;box-shadow:var(--shadow-sm)}
.masonry__item img{width:100%;transition:transform .5s var(--ease)}
.masonry__item:hover img{transform:scale(1.05)}
.masonry__item figcaption{position:absolute;inset:auto 0 0 0;padding:1.4rem .9rem .7rem;color:#fff;font-size:.82rem;background:linear-gradient(transparent,rgba(43,33,28,.75));opacity:0;transition:opacity .3s;font-family:var(--ff-display)}
.masonry__item:hover figcaption{opacity:1}
.credit-note{font-family:var(--ff-serif);font-style:italic;color:var(--muted);text-align:center;margin-top:1.8rem}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(24,18,15,.94);z-index:300;display:flex;align-items:center;justify-content:center;padding:2rem;opacity:0;visibility:hidden;transition:opacity .3s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:min(92vw,1100px);max-height:86vh;border-radius:8px;box-shadow:var(--shadow-lg)}
.lightbox__close,.lightbox__nav{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;width:52px;height:52px;border-radius:50%;font-size:1.6rem;display:grid;place-content:center;transition:background .2s}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.28)}
.lightbox__close{top:1.4rem;right:1.4rem}
.lightbox__nav--prev{left:1.4rem;top:50%;transform:translateY(-50%)}
.lightbox__nav--next{right:1.4rem;top:50%;transform:translateY(-50%)}
.lightbox__cap{position:absolute;bottom:1.3rem;left:0;right:0;text-align:center;color:rgba(255,255,255,.85);font-size:.9rem;font-family:var(--ff-serif);font-style:italic}

/* ----- Purchase band ----------------------------------------------------- */
.purchase{background:
   radial-gradient(90% 120% at 12% 10%,#3A2C25,transparent 55%),
   linear-gradient(135deg,var(--red-dark),var(--red) 55%,#7E1418);
   color:#fff;border-radius:var(--radius-lg);overflow:hidden;position:relative}
.purchase__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(2rem,5vw,4rem)}
.purchase__books{display:flex;justify-content:center;position:relative}
.purchase h2{color:#fff}
.purchase .eyebrow{color:#F4C9C7}
.purchase .eyebrow::before{background:#F4C9C7}
.purchase p{color:rgba(255,255,255,.9)}
.purchase__photo{position:absolute;right:-6%;bottom:-8%;width:40%;aspect-ratio:4/5;overflow:hidden;border-radius:14px;border:5px solid #fff;box-shadow:var(--shadow-lg);z-index:4}
.purchase__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ----- Contact form ------------------------------------------------------ */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.form{display:grid;gap:1.1rem;background:#fff;border:1px solid var(--biscuit-line);border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2.4rem);box-shadow:var(--shadow-sm)}
.field{display:grid;gap:.4rem}
.field label{font-family:var(--ff-display);font-weight:600;font-size:.9rem}
.field input,.field select,.field textarea{
  font-family:var(--ff-body);font-size:1rem;color:var(--ink);
  padding:.8rem .95rem;border:1.5px solid var(--biscuit-line);border-radius:10px;background:var(--ivory);
  transition:border-color .2s,box-shadow .2s;width:100%
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint);background:#fff}
.field textarea{min-height:120px;resize:vertical}
.field .err{color:var(--red);font-size:.82rem;min-height:1em;font-weight:500}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--red)}
.form__note{font-size:.82rem;color:var(--muted)}
.form-status{padding:.9rem 1.1rem;border-radius:10px;font-family:var(--ff-display);font-weight:500;display:none}
.form-status.ok{display:block;background:#EAF3EA;color:#2E6B34;border:1px solid #BBD9BC}
.contact-info li{display:flex;gap:.8rem;padding:1rem 0;border-bottom:1px dashed var(--biscuit-line)}
.contact-info b{font-family:var(--ff-display)}
.contact-info span{color:var(--ink-soft);font-size:.92rem}

/* ----- Breadcrumbs ------------------------------------------------------- */
.breadcrumbs{background:var(--ivory);border-bottom:1px solid var(--biscuit-line)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.9rem 0;font-size:.85rem;font-family:var(--ff-display)}
.breadcrumbs li{display:flex;align-items:center;gap:.5rem;color:var(--muted)}
.breadcrumbs li:not(:last-child)::after{content:"/";color:var(--biscuit-line)}
.breadcrumbs a{color:var(--ink-soft)}
.breadcrumbs a:hover{color:var(--red)}
.breadcrumbs [aria-current="page"]{color:var(--red)}

/* ----- Page hero (interior) --------------------------------------------- */
.page-hero{background:linear-gradient(180deg,var(--blush),var(--white));padding-block:clamp(1.5rem,2.8vw,2.2rem) clamp(1.1rem,2.2vw,1.6rem)}
.page-hero--tight{padding-bottom:clamp(1rem,2.5vw,1.75rem)}
.page-hero .eyebrow{margin-bottom:.7rem}
.page-hero p{max-width:42rem}
/* The hero already carries its own bottom padding, so drop the trailing text
   margin and lighten the following section's top pad, or the two stack into a
   large void between the intro and the first real content. */
.page-hero .wrap > :last-child{margin-bottom:0}
.page-hero + .section{padding-top:clamp(1.5rem,3vw,2.4rem)}

/* ----- Filter bar -------------------------------------------------------- */
.toolbar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:2rem}
.search-box{position:relative;flex:1;min-width:240px;max-width:420px}
.search-box input{width:100%;padding:.75rem 1rem .75rem 2.6rem;border:1.5px solid var(--biscuit-line);border-radius:50px;background:#fff;font-size:1rem;font-family:var(--ff-body)}
.search-box input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint)}
.search-box svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border:1.5px solid var(--biscuit-line);background:#fff;color:var(--ink-soft);border-radius:50px;padding:.5rem 1rem;font-family:var(--ff-display);font-weight:500;font-size:.88rem;transition:all .2s}
.chip:hover{border-color:var(--red);color:var(--red)}
.chip.active{background:var(--red);color:#fff;border-color:var(--red)}
.result-count{color:var(--muted);font-size:.9rem;margin-bottom:1.2rem;font-family:var(--ff-display)}
.no-results{text-align:center;padding:3rem 1rem;color:var(--muted);grid-column:1/-1}

/* ----- Recipe preview page ---------------------------------------------- */
.recipe-hero{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
/* Source photos are a mix of portrait and landscape; a fixed square crop keeps
   every recipe hero the same shape and roughly level with the text column. */
.recipe-hero__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;object-position:center}
.recipe-hero__media.is-type{aspect-ratio:4/3;border-radius:var(--radius-lg);background:linear-gradient(160deg,var(--blush),var(--ivory));display:grid;place-content:center;border:1px solid var(--biscuit-line)}
/* Recipe titles run long, so the heading steps down by title length and keeps
   to two lines in the narrow hero column instead of stacking to four. */
/* Stacked (<=900px) the heading spans the whole wrap, so it can run larger. */
.recipe-hero__content h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,2.8rem);text-wrap:balance}
.recipe-hero__content h1.rh-title--sm{font-size:clamp(1.7rem,1.15rem + 2.2vw,2.6rem)}
.recipe-hero__content h1.rh-title--xs{font-size:clamp(1.4rem,.95rem + 1.8vw,2.2rem)}
.recipe-hero__content h1.rh-title--xxs{font-size:clamp(1.2rem,.8rem + 1.6vw,2rem)}
/* Two columns: the text column is a fixed ~52% of the viewport, so the size has
   to track vw, not just clamp at 1280, or long titles spill to three lines at 1024. */
@media (min-width:901px){
  .recipe-hero__content h1{font-size:min(5vw,3.1rem)}
  .recipe-hero__content h1.rh-title--sm{font-size:min(3.6vw,3rem)}
  .recipe-hero__content h1.rh-title--xs{font-size:min(2.8vw,2.25rem)}
  .recipe-hero__content h1.rh-title--xxs{font-size:min(2.35vw,1.95rem)}
}
.meta-row{display:flex;flex-wrap:wrap;gap:1.6rem;margin:1.4rem 0;padding:1.1rem 0;border-block:1px solid var(--biscuit-line)}
.meta-row .m b{font-family:var(--ff-display);font-size:1.05rem;display:block;color:var(--ink)}
.meta-row .m span{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip--static{border:1px solid var(--biscuit-line);background:var(--blush);color:var(--red);border-radius:50px;padding:.35rem .85rem;font-size:.82rem;font-family:var(--ff-display);font-weight:500}
.panel{background:#fff;border:1px solid var(--biscuit-line);border-radius:var(--radius);padding:1.5rem 1.7rem;margin-top:1.5rem}
.panel h2{font-size:1.3rem;margin-bottom:.8rem}
.hl-list{display:grid;gap:.6rem}
.hl-list li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink-soft)}
.hl-list li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:.55rem}
.callout{background:var(--blush);border-left:4px solid var(--red);border-radius:0 12px 12px 0;padding:1.2rem 1.4rem;margin-top:1.5rem;font-family:var(--ff-serif);font-style:italic;color:var(--ink)}

/* ----- Steps / guide ----------------------------------------------------- */
.steps{counter-reset:step;display:grid;gap:1.2rem;margin-top:1.5rem}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;background:#fff;border:1px solid var(--biscuit-line);border-radius:var(--radius);padding:1.3rem 1.5rem}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--ff-display);font-weight:800;color:var(--red-tint);font-size:1.9rem;line-height:1}
.step h3{font-size:1.12rem;margin-bottom:.35rem}
.step p{margin:0;color:var(--ink-soft);font-size:.96rem}
.faq{border:1px solid var(--biscuit-line);border-radius:var(--radius);overflow:hidden;background:#fff}
.faq details{border-bottom:1px solid var(--biscuit-line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:1.1rem 1.4rem;font-family:var(--ff-display);font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-size:1.4rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 1.4rem 1.3rem;margin:0;color:var(--ink-soft)}
.equip{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.8rem;margin-top:1.4rem}
.equip li{background:#fff;border:1px solid var(--biscuit-line);border-radius:10px;padding:.85rem 1rem;font-family:var(--ff-display);font-weight:500;font-size:.92rem;display:flex;gap:.6rem;align-items:center}
.equip li::before{content:"";width:9px;height:9px;background:var(--gold);border-radius:50%;flex:none}

/* prose */
.prose{max-width:44rem}
.prose p{color:var(--ink-soft)}
.prose h2{margin:2rem 0 .8rem}
.prose h3{margin:1.6rem 0 .6rem;color:var(--red)}
.prose > :first-child{margin-top:0}
.pull{font-family:var(--ff-serif);font-style:italic;font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem);color:var(--ink);line-height:1.4;border-left:3px solid var(--gold);padding-left:1.4rem;margin:2rem 0}

/* spread strip */
.spreads{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.spreads img{border-radius:12px;box-shadow:var(--shadow-sm);width:100%;aspect-ratio:4/3;object-fit:cover}

/* ----- Footer ------------------------------------------------------------ */
.site-footer{background:var(--ink);color:var(--ivory);padding-top:clamp(2.25rem,4vw,3.25rem)}
.site-footer a{color:rgba(250,245,236,.82)}
.site-footer a:hover{color:#fff}
.site-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:2rem;padding-bottom:2.5rem}
.brand--footer .brand__logo{height:68px}
.site-footer__blurb{color:rgba(250,245,236,.72);font-size:.92rem;margin:1rem 0 1.2rem;max-width:28rem}
.social{display:flex;gap:.6rem;flex-wrap:wrap}
.social a{border:1px solid rgba(255,255,255,.2);border-radius:50px;padding:.35rem .8rem;font-size:.8rem;font-family:var(--ff-display)}
.social a:hover{background:rgba(255,255,255,.1)}
.site-footer__nav h2,.site-footer__cta h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin-bottom:1rem;font-family:var(--ff-display)}
.site-footer__nav li{margin-bottom:.6rem;font-size:.94rem}
.site-footer__cta p{color:rgba(250,245,236,.72);font-size:.92rem;margin-bottom:1.1rem}
.site-footer__base{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;padding:1.4rem 0 2rem;border-top:1px solid rgba(255,255,255,.12);font-size:.82rem;color:rgba(250,245,236,.6)}
.site-footer__base p{margin:0}
.site-footer__credit{font-family:var(--ff-serif);font-style:italic}
.dot{opacity:.5}

/* ----- Back to top ------------------------------------------------------- */
.to-top{position:fixed;right:1.4rem;bottom:1.4rem;z-index:90;width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;border:0;display:grid;place-content:center;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s}
.to-top.show{opacity:1;transform:none}
.to-top:hover{background:var(--red-dark)}

/* ----- Reveal on scroll -------------------------------------------------- */
/* No-JS safe: content is visible by default; only hidden once JS marks html.js */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .grid--4{grid-template-columns:repeat(3,1fr)}
  .timeline{grid-template-columns:repeat(4,1fr);gap:1.2rem 1rem}
  .timeline::before{display:none}
  .tl-item{padding-top:0}
  .tl-item::before{display:none}
  .masonry{columns:3}
}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .hero__stage{order:-1}
  .book-3d{max-width:280px}
  .split,.about-split,.recipe-hero,.contact-grid,.spotlight__grid,.purchase__grid{grid-template-columns:1fr}
  .recipe-hero__media img{aspect-ratio:4/3}   /* full width when stacked, so keep it shallower */
  .split--reverse .split__media{order:0}
  .spotlight__media{min-height:300px}
  .spotlight__media .inset{display:none}
  .purchase__photo{display:none}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .spreads{grid-template-columns:repeat(2,1fr)}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:2rem 1.5rem}

  /* mobile nav */
  .site-header__buy{display:none}
  .nav-toggle{display:flex}
  /* .mainnav goes position:fixed below, so its margin-left:auto no longer
     pushes the actions over, push them to the right edge here instead. */
  .site-header__actions{margin-left:auto}
  .mainnav{position:fixed;top:0;right:0;bottom:0;width:min(84vw,340px);background:var(--ivory);
    margin:0;padding:5rem 1.6rem 2rem;transform:translateX(100%);transition:transform .35s var(--ease);
    z-index:99;box-shadow:var(--shadow-lg);overflow-y:auto}
  .mainnav.open{transform:none}
  .mainnav>ul{flex-direction:column;align-items:stretch;gap:.2rem}
  .mainnav a:not(.btn){padding:.9rem .4rem;font-size:1.1rem;border-bottom:1px solid var(--biscuit-line)}
  .mainnav a:not(.btn)::after{display:none}
  .mainnav__buy{display:block;margin-top:1.2rem}
  .mainnav__buy .btn{width:100%}
  .mainnav__close{display:block;position:absolute;top:1.1rem;right:1.2rem;background:none;border:0;font-size:2rem;line-height:1;color:var(--ink)}
  body.nav-open{overflow:hidden}
}
@media (max-width:560px){
  .grid--3,.grid--4,.grid--2,.grid--auto{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr 1fr}
  .masonry{columns:2;column-gap:10px}
  .masonry__item{margin-bottom:10px}
  .spreads{grid-template-columns:1fr}
  .site-footer__grid{grid-template-columns:1fr}
  .meta-row{gap:1.1rem}
  .hero__badge{width:88px;height:88px}
  h1,.h1{font-size:clamp(1.75rem,1.25rem + 2.6vw,2.35rem)}
  .btn{width:100%}
  .btn-row .btn{width:auto;flex:1 1 auto}
  .to-top{right:1rem;bottom:1rem}
}
@media (max-width:380px){
  .grid--4.cat-grid,.timeline{grid-template-columns:1fr}
}

/* ----- Touch & small-screen refinements ---------------------------------- *
 * The layout above already reflows correctly at every width; these rules fix
 * touch ergonomics and hover-only content, which a layout audit doesn't catch.
 * -------------------------------------------------------------------------- */

/* Purchase editions: stack to equal, full-width targets instead of letting
   flex-grow give each button a different width as the row wraps. */
@media (max-width:560px){
  .buy-formats{display:grid;grid-template-columns:1fr;gap:.7rem}
  .buy-formats .btn{width:100%}
}

/* Tap targets: bring sub-44px controls up to a comfortable touch size. */
@media (max-width:900px){
  .brand{min-height:44px}
  .brand__logo{height:42px}
  .site-header__row{min-height:58px}
  .announce{font-size:.78rem;line-height:1.35}
  .announce .wrap{padding:.35rem 0}
  .mainnav__close{width:44px;height:44px;display:grid;place-content:center}
  .textlink{min-height:44px}
  .chip{min-height:44px}
  .breadcrumbs a{display:inline-flex;align-items:center;min-height:34px}
  .site-footer__nav li{margin-bottom:0}
  .site-footer__nav a,
  .social a,
  .site-footer__base a{display:inline-flex;align-items:center;min-height:44px}
  .social a{padding-inline:1rem}
}

/* Hover-only content is unreachable on touch: keep gallery captions visible. */
@media (hover:none){
  .masonry__item figcaption{opacity:1}
}

/* Lightbox: on phones the side arrows sat on top of the photo. Move them
   below it, and give the image room so controls never cover the image. */
@media (max-width:700px){
  .lightbox{padding:1rem}
  .lightbox img{max-height:68vh}
  .lightbox__close{top:1rem;right:1rem;width:46px;height:46px}
  .lightbox__nav{width:46px;height:46px;top:auto;bottom:1rem;transform:none}
  .lightbox__nav--prev{left:50%;margin-left:-58px;transform:none}
  .lightbox__nav--next{right:50%;margin-right:-58px;transform:none}
  .lightbox__cap{bottom:4.6rem;padding-inline:1rem}
}