/* ============================================================
   George Purton — Modern British Kitchen design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root{
  /* paper / ink */
  --paper:      #F6F1E7;   /* warm cream page */
  --paper-2:    #EFE8D8;   /* slightly deeper cream for bands */
  --surface:    #FFFDF8;   /* card surface */
  --ink:        #20251F;   /* warm near-black */
  --ink-soft:   #4A5048;   /* secondary text */
  --ink-faint:  #8A8C80;   /* tertiary / captions */
  --line:       #E2D9C6;   /* hairlines on paper */
  --line-2:     #ECE4D4;

  /* brand */
  --teal:       #14706B;   /* primary */
  --teal-deep:  #0E5450;
  --teal-tint:  #E3EEEB;
  --amber:      #D98A2B;   /* warm accent (the "110") */
  --amber-deep: #B96F18;

  /* per-book accents (used as small category tags) */
  --c-protein:  #14807B;
  --c-veggie:   #2E7D4F;
  --c-med:      #C26A22;
  --c-diabetic: #21407E;
  --c-liver:    #5B6647;

  /* type */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* shape */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(32,37,31,.05), 0 2px 8px rgba(32,37,31,.04);
  --shadow-md: 0 4px 14px rgba(32,37,31,.08), 0 18px 40px rgba(32,37,31,.07);
  --shadow-lg: 0 10px 30px rgba(32,37,31,.12), 0 40px 80px rgba(32,37,31,.10);

  --maxw: 1200px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width: var(--maxw); margin:0 auto; padding: 0 28px; }
.section{ padding: 88px 0; }
.section--tight{ padding: 60px 0; }

/* ---------- type ---------- */
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.01em; }
.serif{ font-family: var(--serif); }
.display{
  font-family: var(--serif);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.04;
}
.eyebrow{
  font-family: var(--sans);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--teal);
}
.eyebrow--amber{ color: var(--amber-deep); }
.lead{ font-size:1.18rem; color: var(--ink-soft); line-height:1.55; }
.muted{ color: var(--ink-soft); }
.fine{ font-size:.82rem; color: var(--ink-faint); }
.italic{ font-style: italic; }

.section-head{ max-width: 640px; }
.section-head .display{ font-size: clamp(2rem, 4vw, 2.9rem); margin:.35em 0 .3em; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family: var(--sans); font-weight:700; font-size:.98rem;
  padding:.85em 1.5em; border-radius: var(--r-pill);
  border:1.5px solid transparent; cursor:pointer; transition: all .18s ease;
  line-height:1; white-space:nowrap;
}
.btn svg{ width:1.05em; height:1.05em; }
.btn--primary{ background: var(--teal); color:#fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover{ background: var(--teal-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--amber{ background: var(--amber); color:#241a08; }
.btn--amber:hover{ background: var(--amber-deep); color:#fff; transform: translateY(-1px); }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover{ border-color: var(--ink); background: rgba(32,37,31,.03); }
.btn--sm{ padding:.6em 1.05em; font-size:.86rem; }
.btn--block{ width:100%; justify-content:center; }
.btn .flag{ width:18px; height:13px; border-radius:2px; flex:0 0 auto; box-shadow:0 0 0 1px rgba(0,0,0,.08); }

/* dual UK/US buy row */
.buy-row{ display:flex; gap:9px; margin-top:auto; }
.buy-row .btn{ flex:1; justify-content:center; padding-left:.7em; padding-right:.7em; }
.buy-label{ font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:9px; }

/* ---------- stars ---------- */
.stars{ display:inline-flex; align-items:center; gap:.45em; font-size:.88rem; color: var(--ink-soft); font-weight:600; }
.stars .glyphs{ color:#E0A93A; letter-spacing:.5px; font-size:1rem; }

/* ---------- region pill (UK/US) ---------- */
.region{
  display:inline-flex; align-items:center; background: var(--paper-2);
  border:1px solid var(--line); border-radius: var(--r-pill); padding:3px; gap:2px;
}
.region button{
  font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.02em;
  border:0; background:transparent; color: var(--ink-soft); cursor:pointer;
  padding:.42em .8em; border-radius: var(--r-pill); display:flex; align-items:center; gap:.4em;
  transition: all .15s ease;
}
.region button.is-active{ background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.region .flag{ width:18px; height:13px; border-radius:2px; display:block; }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{ display:flex; align-items:center; gap:24px; height:74px; }
.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.brand .mark{
  width:38px; height:38px; border-radius:10px; background: var(--teal);
  color:#fff; display:grid; place-items:center; font-family:var(--serif);
  font-weight:600; font-size:1.05rem; letter-spacing:.01em; box-shadow: var(--shadow-sm);
}
.brand .name{ display:flex; flex-direction:column; line-height:1.05; }
.brand .name b{ font-family:var(--serif); font-weight:600; font-size:1.16rem; letter-spacing:-.01em; }
.brand .name span{ font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color: var(--ink-faint); }
.nav{ display:flex; gap:30px; align-items:center; }
.nav a{ font-weight:600; font-size:.95rem; color: var(--ink-soft); transition: color .15s; }
.nav a:hover{ color: var(--ink); }
.header-tools{ display:flex; align-items:center; gap:16px; }

.menu-btn{ display:none; }

/* ---------- footer ---------- */
.site-footer{ background: var(--ink); color:#D9D6CC; padding:64px 0 36px; }
.site-footer a{ color:#D9D6CC; }
.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:40px; }
.footer-grid h4{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:#9A9686; margin-bottom:16px; font-weight:700; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-grid li a{ font-size:.95rem; opacity:.9; }
.footer-brand .display{ font-size:1.7rem; color:#fff; }
.footer-brand p{ color:#A7A394; font-size:.92rem; max-width:320px; margin:.7em 0 1.2em; }
.footer-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.82rem; color:#86836f; }

/* ---------- utilities ---------- */
.tag{
  display:inline-flex; align-items:center; gap:.4em; font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:.35em .7em; border-radius: var(--r-pill);
  background: var(--teal-tint); color: var(--teal-deep);
}
.divider{ height:1px; background: var(--line); border:0; }
/* Reveal is progressive enhancement: only hidden once JS arms it (html.reveal-ready). */
.reveal{ transition: opacity .7s ease, transform .7s ease; }
html.reveal-ready .reveal{ opacity:0; transform: translateY(18px); }
html.reveal-ready .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.reveal-ready .reveal{ opacity:1; transform:none; }
}

/* ---------- mobile slide-out sheet (global) ---------- */
.mobile-sheet{ display:none; }
body.no-scroll{ overflow:hidden; }
@media (max-width: 600px){
  .mobile-sheet.open{ display:block; position:fixed; inset:74px 0 0; background:var(--paper); z-index:49; padding:28px; }
  .mobile-sheet.open nav{ display:flex; flex-direction:column; gap:4px; }
  .mobile-sheet.open nav a{ font-family:var(--serif); font-size:1.5rem; padding:14px 0; border-bottom:1px solid var(--line); }
}

@media (max-width: 920px){
  .nav{ display:none; }
  .menu-btn{ display:inline-flex; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap:32px; }
  .footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .section{ padding:60px 0; }
  .wrap{ padding:0 20px; }
}