/* ==============================================================
   A THOUSAND LIVES BINDERY — SHARED STYLESHEET
   Every page (index.html, bindery.html, books.html, contact.html)
   links to this one file. Change a colour, font or spacing rule
   here and it updates on every page at once — no need to edit
   each file separately.
   ============================================================== */

/* ---- Colour palette — one place to change any colour site-wide ---- */
:root{
  --ink-black: #131313;        /* main dark background */
  --panel-black: #1B1911;      /* card / panel background on dark sections */
  --bottle-green: #1B251C;     /* green section background (Limited Editions block) */
  --gold: #B8935A;             /* main gold accent */
  --gold-soft: #8f7248;        /* muted gold, borders + secondary labels */
  --parchment: #E8DFC8;        /* light text colour used on dark backgrounds */
  --parchment-dim: #a99d84;    /* quieter/dimmer text on dark backgrounds */
  --cream-bg: #F4F1EC;         /* light section background (About / Details / Contact) */
  --ink-on-cream: #1B1911;     /* dark text used on the light cream sections */
  --ink-dim-on-cream: #5c5646; /* dimmer dark text on the light cream sections */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

/* Sticky-footer setup: body stretches to at least the full screen
   height, <main> grows to fill leftover space, so the footer always
   sits at the bottom even on short pages (like Contact) instead of
   floating halfway up the screen. */
html, body{ height:100%; }
body{
  display:flex; flex-direction:column; min-height:100vh;
  background:var(--ink-black);
  color:var(--parchment);
  font-family:'EB Garamond', serif;
  font-size:18px;
  line-height:1.7;
  overflow-x:hidden;
}
main{ flex:1; }

h1,h2,h3,.display{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;         /* regular weight — thinner, more elegant than bold */
  letter-spacing:0.02em;
}

/* The very large display headings (hero + page intros) go even lighter,
   matching the delicate serif in the reference photos */
.hero h1, .big-title{
  font-weight:300;
}

a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* ----------------------------------------------------------
   HEADER / NAV — identical on every page. The only difference
   between pages is which nav link has class="active" (set by
   hand in each file so it highlights gold on the current page).
   ---------------------------------------------------------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  gap:16px;
  padding:20px 40px;
  background:rgba(19,19,19,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(184,147,90,0.15);
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(1.05rem, 2.4vw, 1.3rem);
  color:var(--parchment);
  white-space:nowrap;
}
.brand-mark{
  width:38px; height:38px;
  border:1px solid var(--gold-soft);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  overflow:hidden;
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text .sub{
  font-family:'EB Garamond', serif;
  font-size:0.6rem;
  letter-spacing:0.25em;
  color:var(--gold-soft);
  text-transform:uppercase;
  margin-top:2px;
}
nav ul{ list-style:none; display:flex; gap:34px; }
nav a{
  font-size:0.82rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--parchment-dim);
  transition:color 0.25s ease;
  padding-bottom:2px;
}
nav a:hover, nav a.active{ color:var(--gold); }

@media (max-width:760px){
  header{ flex-direction:column; padding:16px 20px 12px; gap:10px; }
  nav ul{ gap:16px; flex-wrap:wrap; justify-content:center; }
  nav a{ font-size:0.7rem; }
}

/* ==========================================================
   SHARED SECTION STYLES — reused across all four pages
   ========================================================== */
section{ position:relative; }
.inner{ max-width:1180px; margin:0 auto; padding:0 48px; }
@media (max-width:700px){ .inner{ padding:0 22px; } }

.pad{ padding:110px 0; }
@media (max-width:700px){ .pad{ padding:80px 0; } }

.eyebrow{
  font-size:0.8rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:20px;
}
.eyebrow.on-light{ color:var(--gold-soft); }

/* ----------------------------------------------------------
   "LABEL" FONT — Cinzel
   A taller, more geometric display font used specifically for
   the small gold/uppercase labels throughout the site (eyebrows,
   page markers, tags, nav links, filter buttons). Kept separate
   from the softer Cormorant Garamond used in headings, so gold
   accents read as modern and structured against the elegant serif.
   ---------------------------------------------------------- */
.eyebrow, .page-mark, .arrow-link, .tag, .filter-btn,
nav a, .brand-text .sub, .detail-card .label-row span,
.detail-list .row .num, .footer-bottom{
  font-family:'Cinzel', serif;
}

/* A section with the light cream background instead of dark */
.section-light{
  background:var(--cream-bg);
  color:var(--ink-dim-on-cream);
}
.section-light h1, .section-light h2, .section-light h3{ color:var(--ink-on-cream); }

.gold-rule{ width:64px; height:1px; background:var(--gold); margin:32px auto; opacity:0.7; }

/* Reusable gold "filled" button (dark text on gold background) */
.btn-gold{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--gold); color:var(--ink-black);
  font-size:0.85rem; letter-spacing:0.12em; text-transform:uppercase;
  padding:16px 26px;
  transition:background 0.25s ease;
}
.btn-gold:hover{ background:#cba873; }

/* Reusable dark "filled" button, used on light backgrounds (e.g. contact form) */
.btn-dark{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink-on-cream); color:var(--cream-bg);
  font-size:0.85rem; letter-spacing:0.12em; text-transform:uppercase;
  padding:16px 30px;
  transition:opacity 0.25s ease;
}
.btn-dark:hover{ opacity:0.85; }

.ph-icon{ width:26px; height:26px; opacity:0.7; }

/* Generic placeholder tile — used anywhere a real photo will
   eventually replace it (process steps, detail cards, etc.) */
.placeholder-tile{
  aspect-ratio:4/5;
  background:linear-gradient(135deg, var(--bottle-green), var(--panel-black));
  border:1px solid rgba(184,147,90,0.18);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; padding:18px;
  color:var(--parchment-dim); font-size:0.78rem; letter-spacing:0.05em;
}
.placeholder-tile img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================
   HOME PAGE
   ========================================================== */
.hero{
  min-height:90vh; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start; text-align:left;
  padding:170px 48px 100px;
  background:radial-gradient(ellipse at 50% -10%, rgba(92,36,48,0.3), transparent 60%),
             linear-gradient(180deg, var(--ink-black), var(--panel-black));
}
@media (max-width:700px){ .hero{ padding:170px 22px 80px; } }
.hero h1{ font-size:clamp(2.6rem, 7vw, 5.2rem); line-height:1.05; max-width:920px; color:var(--parchment); }
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero p{ margin-top:26px; max-width:520px; color:var(--parchment-dim); font-size:1.15rem; }
.hero .btn-gold{ margin-top:38px; }

.intro-split{ display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:start; }
@media (max-width:700px){ .intro-split{ grid-template-columns:1fr; gap:20px; } }
.intro-split p{
  font-family:'Cormorant Garamond', serif; font-size:clamp(1.4rem,2.6vw,2rem);
  line-height:1.4; color:var(--parchment);
}

.section-head-row{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  margin-bottom:48px; flex-wrap:wrap;
}
.arrow-link{
  font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gold); border-bottom:1px solid var(--gold-soft); padding-bottom:4px;
  white-space:nowrap;
}
.featured-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
@media (max-width:760px){ .featured-grid{ grid-template-columns:1fr; } }
.featured-card{ border:1px solid rgba(184,147,90,0.18); background:var(--panel-black); }
.featured-card .img-wrap{ aspect-ratio:4/5; overflow:hidden; }
.featured-card .img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.featured-card .cap{ padding:22px; display:flex; justify-content:space-between; align-items:center; }
.featured-card h3{ font-size:1.3rem; color:var(--parchment); font-weight:500; }

.mini-links{ display:grid; grid-template-columns:1fr 1fr; margin-top:1px; }
@media (max-width:600px){ .mini-links{ grid-template-columns:1fr; } }
.mini-links a{ display:block; padding:26px 4px; border-top:1px solid rgba(184,147,90,0.15); }
.mini-links a .tag{ font-size:0.72rem; letter-spacing:0.15em; color:var(--gold-soft); text-transform:uppercase; }
.mini-links a h4{ font-family:'Cormorant Garamond', serif; font-size:1.4rem; color:var(--parchment); margin-top:6px; font-weight:500; }
.mini-links a span.desc{ display:block; font-size:0.9rem; color:var(--parchment-dim); margin-top:4px; }

.grid-4{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:0; border:1px solid rgba(27,25,17,0.12); }
.detail-card{ background:var(--panel-black); color:var(--parchment); border-right:1px solid rgba(184,147,90,0.15); display:flex; flex-direction:column; }
.detail-card:last-child{ border-right:none; }
.detail-card .placeholder-tile{ border:none; aspect-ratio:1/1; background:linear-gradient(160deg, var(--bottle-green), var(--panel-black)); }
.detail-card .label-row{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-top:1px solid rgba(184,147,90,0.15); }
.detail-card .label-row h4{ font-family:'Cormorant Garamond', serif; font-size:1.2rem; font-weight:500; }
.detail-card .label-row span{ font-size:0.8rem; color:var(--gold-soft); }

.cta-band{ text-align:center; }
.cta-band h2{ font-size:clamp(2.2rem,5vw,3.6rem); max-width:800px; margin:0 auto; color:var(--parchment); }
.cta-band p{ color:var(--parchment-dim); max-width:520px; margin:22px auto 0; }
.cta-band .btn-gold{ margin-top:34px; }

/* ==========================================================
   THE BINDERY PAGE  /  THE BOOKS PAGE (shared page-header style)
   ========================================================== */
.page-mark{ font-size:0.85rem; letter-spacing:0.15em; color:var(--gold); text-transform:uppercase; margin-bottom:18px; }
.page-mark.on-light{ color:var(--gold-soft); }
.big-title{ font-size:clamp(2.6rem,6vw,4.4rem); line-height:1.08; max-width:820px; }
.big-title em{ font-style:italic; }
.lede{ max-width:640px; margin-top:26px; font-size:1.15rem; }

.story-split{ display:grid; grid-template-columns:260px 1fr; gap:48px; }
@media (max-width:760px){ .story-split{ grid-template-columns:1fr; gap:20px; } }
.story-split h2{ font-size:clamp(2rem,4vw,2.8rem); }
.story-split .copy p{ margin-bottom:18px; font-size:1.08rem; }

.grid-5{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:24px; }
.step-card h4{ font-family:'Cormorant Garamond', serif; font-size:1.3rem; margin-top:14px; font-weight:500; color:var(--parchment); }

.detail-list{ display:flex; flex-direction:column; }
.detail-list .row{ display:flex; align-items:baseline; gap:22px; padding:20px 0; border-bottom:1px solid rgba(184,147,90,0.18); }
.detail-list .row .num{ font-size:0.8rem; color:var(--gold-soft); min-width:26px; }
.detail-list .row .txt{ font-family:'Cormorant Garamond', serif; font-size:1.35rem; color:var(--parchment); }

.band-green{ background:var(--bottle-green); text-align:center; }
.band-green h2{ font-size:clamp(2rem,5vw,3rem); color:var(--parchment); }
.band-green p{ max-width:640px; margin:20px auto 0; color:var(--parchment-dim); }

/* ==========================================================
   THE BOOKS PAGE — filter bar + grid
   ========================================================== */
.filter-bar{ display:flex; flex-wrap:wrap; gap:12px; margin:44px 0 46px; }
.filter-btn{
  border:1px solid rgba(184,147,90,0.3); color:var(--parchment-dim);
  font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  padding:12px 20px; transition:all 0.2s ease;
}
.filter-btn:hover{ border-color:var(--gold); color:var(--parchment); }
.filter-btn.active{ background:var(--gold); border-color:var(--gold); color:var(--ink-black); }

.book-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:32px; }
.book-card{ border:1px solid rgba(184,147,90,0.18); background:var(--panel-black); }
.book-card .img-wrap{ aspect-ratio:4/5; overflow:hidden; position:relative; }
.book-card .img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease; }
.book-card:hover .img-wrap img{ transform:scale(1.04); }
.book-card .cap{ padding:20px 22px; }
.book-card .cap .tag{ font-size:0.72rem; letter-spacing:0.12em; color:var(--gold-soft); text-transform:uppercase; }
.book-card .cap h3{ font-size:1.3rem; font-weight:500; color:var(--parchment); margin-top:6px; }
.book-card .cap p{ font-size:0.92rem; color:var(--parchment-dim); margin-top:4px; }
.book-card.is-hidden{ display:none; }

/* ==========================================================
   CONTACT PAGE (light section)
   ========================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:36px; } }
.contact-left .quick-links{ display:flex; gap:28px; margin-top:34px; }
.contact-left .quick-links a{
  font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase;
  border-bottom:1px solid var(--ink-on-cream); padding-bottom:3px;
  display:inline-flex; align-items:center; gap:8px;
}
.contact-left .quick-links svg{ width:16px; height:16px; stroke:currentColor; }

form.enquiry{ display:flex; flex-direction:column; gap:26px; }
form.enquiry label{
  display:block; font-size:0.72rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--ink-dim-on-cream); margin-bottom:8px;
}
form.enquiry input, form.enquiry select, form.enquiry textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(27,25,17,0.35);
  padding:8px 2px; font-family:'EB Garamond', serif; font-size:1.05rem; color:var(--ink-on-cream);
}
form.enquiry textarea{ min-height:110px; resize:vertical; }
form.enquiry input:focus, form.enquiry select:focus, form.enquiry textarea:focus{ outline:none; border-bottom-color:var(--gold); }
form.enquiry .btn-dark{ align-self:flex-start; margin-top:6px; }
form.enquiry .btn-dark:disabled{ opacity:0.6; cursor:wait; }
.form-status{ display:none; font-size:1rem; line-height:1.5; }
.form-status.success, .form-status.error{ display:block; padding:16px 18px; border-left:2px solid var(--gold); }
.form-status.success{ color:var(--ink-on-cream); }
.form-status.error{ color:#7a2525; }
.form-status strong{ font-family:'Cormorant Garamond', serif; font-size:1.2rem; font-weight:600; }

/* ==========================================================
   FOOTER — identical markup pasted into the bottom of every page
   ========================================================== */
footer{ background:var(--ink-black); padding:60px 0 26px; border-top:1px solid rgba(184,147,90,0.15); }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; }
.footer-tagline{ color:var(--parchment-dim); margin-top:14px; }
.footer-links{ display:grid; grid-template-columns:1fr 1fr; gap:8px 50px; text-align:right; }
.footer-links a{ display:block; padding:6px 0; color:var(--parchment); }
.footer-links a:hover{ color:var(--gold); }
@media (max-width:600px){ .footer-top{ flex-direction:column; } .footer-links{ text-align:left; grid-template-columns:1fr 1fr; } }
.footer-bottom{ margin-top:40px; padding-top:20px; border-top:1px solid rgba(184,147,90,0.12); font-size:0.78rem; letter-spacing:0.05em; color:var(--parchment-dim); }