/* ============================================================
   Ardis Books — customer storefront
   Shared stylesheet
   Palette: warm cream / deep forest green / gold accent
   ============================================================ */

:root {
  --cream:        #f4ede1;
  --cream-deep:   #ece2d2;
  --cream-card:   #f8f3ea;
  --green:        #243d2c;
  --green-deep:   #1d3224;
  --green-mid:    #2c4a35;
  --gold:         #b8893f;
  --gold-text:    #8a6226;  /* WCAG AA gold for text/controls on light backgrounds */
  --gold-soft:    #c7a164;
  --ink:          #2b2b27;
  --muted:        #6e675a;
  --line:         #d9cdb8;
  --line-dark:    rgba(255,255,255,0.14);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  --maxw: 1180px;
  --nav-maxw: 1320px;   /* the menu bar spreads wider than the page, so all its links fit beside the logo */
  --pad: 24px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Visible keyboard focus everywhere (mouse clicks unaffected) */
:focus-visible { outline: 3px solid var(--gold-text); outline-offset: 2px; }

/* Skip link: hidden until focused */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--green); color: #f4ede1; padding: 12px 22px;
  font-family: var(--sans); font-size: .9rem; letter-spacing: .08em;
}
.skip-link:focus { left: 0; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--ink); line-height: 1.12; margin: 0 0 .4em; }
h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: 1.5rem; }
p  { margin: 0 0 1.1em; color: var(--muted); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* small gold eyebrow label */
.eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold-text);
  margin: 0 0 .5em;
}
.kicker {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .72rem;
  color: var(--gold-text);
  font-weight: 500;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .74rem;
  font-weight: 500;
  padding: 15px 30px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .2s ease;
}
.btn-solid { background: var(--green); color: #f4ede1; }
.btn-solid:hover { background: var(--green-deep); }
.btn-outline { background: transparent; border-color: var(--gold-text); color: var(--gold-text); }
.btn-outline:hover { background: var(--gold-text); color: #fff; }
.btn-ghost-light { background: transparent; border-color: rgba(255,255,255,.45); color: #f4ede1; }
.btn-ghost-light:hover { border-color: var(--gold-soft); color: var(--gold-soft); }
.btn-block { display: block; width: 100%; text-align: center; }
/* On a dark background — the hero photo, green sections and boxes — the gold
   outline is hard to see, so there the button is solid cream with green text. */
.hero .btn-outline, .section-green .btn-outline, .sell-cta .btn-outline {
  background: #f4ede1; border-color: #f4ede1; color: var(--green); font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.hero .btn-outline:hover, .section-green .btn-outline:hover, .sell-cta .btn-outline:hover {
  background: var(--gold-soft); border-color: var(--gold-soft); color: var(--green-deep);
}
/* Home page quick-shop promo cards beneath the hero. Text-driven (no images)
   so they read differently from the image-ready Browse-by-Category tiles. */
.promo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; max-width: 880px; margin: 0 auto; }
.promo-card {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: 230px; padding: 40px 44px;
  background: linear-gradient(150deg, var(--green-mid), var(--green-deep));
  border: 1px solid var(--green-deep);
  color: var(--cream); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* Delicate inset gold keyline frame, echoing the fine line-work of the logo */
.promo-card::before {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  border: 1px solid rgba(199,161,100,.32);
  transition: border-color .2s ease;
}
.promo-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(29,50,36,.28); }
.promo-card:hover::before { border-color: rgba(199,161,100,.6); }
.promo-kicker { text-transform: uppercase; letter-spacing: .22em; font-size: .75rem; color: var(--gold-text); margin-bottom: 12px; }
.promo-title { font-family: var(--serif); font-weight: 600; font-size: 1.7rem; line-height: 1.1; color: var(--cream); margin: 0 0 16px; }
/* Short gold rule under the title — like the flourish around "EST. 1989" */
.promo-title::after {
  content: ""; display: block; width: 38px; height: 1px;
  background: var(--gold-soft); opacity: .85; margin: 14px 0 0;
}
.promo-sub { font-size: .92rem; line-height: 1.5; color: rgba(244,237,225,.72); margin: 0 0 20px; max-width: 30ch; }
.promo-link { text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; color: var(--gold-text); transition: color .2s ease; }
.promo-link span { display: inline-block; transition: transform .2s ease; }
.promo-card:hover .promo-link { color: var(--cream); }
.promo-card:hover .promo-link span { transform: translateX(5px); }
@media (max-width: 560px) { .promo-grid { grid-template-columns: 1fr; } }
/* Compact promo card — same look as the home CTAs, used for category tiles */
.promo-compact { min-height: 150px; padding: 26px 30px; }
.promo-compact .promo-title { font-size: 1.3rem; margin-bottom: 12px; }
.promo-compact .promo-title::after { width: 30px; margin-top: 11px; }
.promo-compact .promo-link { font-size: .75rem; }
.promo-compact::before { inset: 7px; }

/* ============================================================
   Announcement bar + header
   ============================================================ */
.announce {
  background: var(--green-deep);
  color: var(--cream);
  text-align: center;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 8px 12px;
}
.announce .gold { color: var(--gold-soft); }

.warning {
  background: var(--green-deep);
  color: var(--cream);
  text-align: center;
  font-size: 18px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 8px 12px;
}

.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 var(--pad);
  min-height: 76px;
  position: relative;
  max-width: var(--nav-maxw);
  margin: 0 auto;
}
.nav-left, .nav-right {
  display: flex;
  align-items: center;
  gap: 26px;
}
/* pin to outer columns so the absolute centre badge never displaces them */
.nav-left { grid-column: 1; }
.nav-right { grid-column: 3; justify-content: flex-end; }
.nav a.navlink {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .74rem;
  color: var(--ink);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, color .2s;
  white-space: nowrap;
}
.nav a.navlink:hover, .nav a.navlink.active { color: var(--gold-text); border-color: var(--gold-text); }
/* "Sell to Us" sits beside the cart on wide screens (the left-hand links fill
   the space up to the logo), and in the hamburger menu on narrow ones. */
.nav-left .nav-menu-only { display: none; }
/* Search the shop, from the menu bar on every page: opens the shop filtered
   by the words typed (shop.html?q=…). On phones it's at the top of the menu. */
.nav-search {
  display: flex; align-items: center; height: 34px;
  border: 1px solid var(--line); background: var(--cream-card);
  transition: border-color .2s, box-shadow .2s;
}
.nav-search:focus-within { border-color: var(--gold-text); box-shadow: 0 0 0 2px rgba(138,98,38,.15); }
.nav-search input {
  border: 0; background: transparent; outline: none; width: 126px; min-width: 0;
  padding: 0 4px 0 11px; font-family: var(--sans); font-size: .82rem; color: var(--ink);
}
.nav-search input::placeholder { color: var(--muted); }
.nav-search input::-webkit-search-cancel-button { cursor: pointer; }
.nav-search button {
  border: 0; background: transparent; height: 100%; padding: 0 10px; cursor: pointer;
  color: var(--ink); display: flex; align-items: center;
}
.nav-search button:hover { color: var(--gold-text); }
/* Shop hover dropdown */
.nav-item { position: relative; display: flex; align-items: center; }
.navlink .caret { font-size: .82em; margin-left: 4px; }
.dropdown {
  position: absolute; top: 100%; left: 0;
  min-width: 240px;
  background: var(--cream); border: 1px solid var(--line);
  box-shadow: 0 14px 26px rgba(36,61,44,.12);
  padding: 6px 0;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}
.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a {
  display: block; padding: 10px 20px;
  text-transform: uppercase; letter-spacing: .14em; font-size: .76rem;
  color: var(--ink); white-space: nowrap;
  transition: background .15s, color .15s;
}
.dropdown a:hover { background: var(--green-deep); color: var(--cream); }
/* Centred logo in a curved cream badge that drops below the slim nav bar,
   so the logo can be larger without a bulky header. */
.brand {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 5;
  line-height: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 150px 150px / 0 0 38px 38px;
  padding: 8px 54px 18px;
  box-shadow: 0 12px 22px rgba(36,61,44,.08);
}
.brand img { width: auto; display: block; }
.brand .brand-full { height: 140px; }
.brand .brand-small { height: 0; opacity: 0; }   /* the lettering alone, for the scrolled bar */
/* Scrolled down, the badge folds up into the menu bar: the full logo shrinks
   away and the lettering takes its place, centred in the bar (main.js adds
   .scrolled to the header). Only where the badge is shown; reduced motion
   makes it an instant swap (the rule near the top of this file). */
@media (min-width: 1320px) {
  /* Five links fill the space up to the badge, so spaced a little closer */
  .nav-left { gap: 14px; }
  .nav a.navlink { letter-spacing: .14em; }
  .brand { transition: padding .35s ease, background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
  .brand img { transition: height .35s ease, opacity .25s ease; }
  .site-header.scrolled .brand {
    padding: 21px 0 0;                      /* (76px bar − 34px lettering) ÷ 2 */
    background-color: transparent; border-color: transparent; box-shadow: none;
  }
  .site-header.scrolled .brand .brand-full { height: 0; opacity: 0; }
  .site-header.scrolled .brand .brand-small { height: 34px; opacity: 1; }
}

/* Below the menu bar's full width the big overhanging badge would start to
   cover the nav links. Instead of jumping straight to the hamburger, drop the
   badge to a small INLINE logo (the lettering) in the grid's centre column —
   it now reserves its own space, so the full horizontal nav can survive much
   lower before we finally collapse to the hamburger (see the 1115px block). */
@media (max-width: 1319px) {
  .brand {
    position: static; transform: none;
    background: none; border: none; box-shadow: none;
    padding: 0; border-radius: 0;
  }
  /* The lettering alone, as in the scrolled bar: legible where the full
     logo, shrunk to fit the bar, isn't */
  .brand .brand-full { display: none; }
  .brand .brand-small { height: 30px; opacity: 1; }
  .nav { min-height: 58px; }
  .nav-left { gap: 16px; }
  .nav-right { gap: 16px; }
  .nav a.navlink { letter-spacing: .12em; }
}
.nav-icon { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.nav-icon:hover { color: var(--gold-text); }

.menu-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  font-size: 1.5rem; color: var(--ink); line-height: 1;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #f6efe2;
  overflow: hidden;
  /* Layers (top→bottom): a light neutral darkening just for text legibility,
     the hero photo, then a solid gradient fallback if the photo is missing.
     Drop your image in at assets/img/hero.jpg to use it. */
  /* The oval: a soft extra shade behind the words, fading to nothing, so the
     small gold line reads over the gold-tooled spines in the photo. */
  background:
    radial-gradient(ellipse 34% 50% at 50% 50%, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.40) 100%),
    url("../img/hero.jpg") center / cover no-repeat,
    linear-gradient(160deg, #2c4634 0%, #1c2f22 60%, #16261b 100%);
}
.hero-inner { position: relative; z-index: 2; padding: 60px var(--pad); max-width: 760px; }
.hero h1 { color: #f6efe2; font-style: italic; }
.hero .kicker {
  color: #e8cf9a; font-size: .8rem; display: block; margin-bottom: 18px;   /* paler gold, a touch larger */
  text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 0 12px rgba(0,0,0,.35);       /* for the photo's lightest spots */
}
.hero p { color: rgba(246,239,226,.82); font-size: 1.05rem; max-width: 540px; margin: 0 auto 26px; }
/* Browse the Shop, and Sell to Us beneath it, the same width */
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero-actions .btn { min-width: 220px; text-align: center; }
/* The home page's Browse the Shop and Sell to Us: solid soft gold with dark
   green text (5.7:1), a lighter gold on hover (6.9:1) */
.btn-gold { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--green-deep);
  font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.btn-gold:hover { background: #d4b47e; border-color: #d4b47e; color: var(--green-deep); }

/* ============================================================
   Sections
   ============================================================ */
section { padding: 72px 0; }
.section-cream-deep { background: var(--cream-deep); }
.section-green { background: var(--green); color: #e9e0d0; }
.section-green h2, .section-green h3 { color: #f4ede1; }
.section-green p { color: rgba(244,237,225,.78); }
.center { text-align: center; }
.lede { max-width: 640px; margin: 0 auto 8px; }
.lede a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }
.lede a:hover { color: var(--green); }

/* feature icon row */
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.feature .ficon {
  width: 46px; height: 46px; margin: 0 auto 16px;
  color: var(--gold-text);
}
.feature h4 {
  font-family: var(--sans); text-transform: uppercase;
  letter-spacing: .14em; font-size: .8rem; color: var(--ink); margin-bottom: 8px;
}
.feature p { font-size: .9rem; margin: 0; }

/* split text/image */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split.reverse .split-media { order: -1; }
/* "Our Story" image — drop your photo in at assets/img/our-story.jpg.
   Falls back to a soft cream panel until the file exists. */
.split-img {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background:
    url("../img/our-story.jpg") center / cover no-repeat,
    linear-gradient(135deg, var(--cream-card), var(--cream-deep));
}
.placeholder-img {
  background: linear-gradient(135deg, var(--cream-card), var(--cream-deep));
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-style: italic; font-family: var(--serif);
  font-size: 1.05rem; text-align: center; padding: 20px;
}

/* quote band */
.quote-band { background: var(--green); color: #f4ede1; text-align: center; }
.quote-band blockquote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2rem); max-width: 760px; margin: 0 auto 14px; color: #f4ede1;
}
.quote-band cite { color: var(--gold-soft); font-style: normal; letter-spacing: .12em; font-size: .8rem; text-transform: uppercase; }

/* category cards */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cat-grid.publishers { grid-template-columns: repeat(3, 1fr); }
.cat-grid.categories { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cat-card.cat-compact { aspect-ratio: 5 / 3; }
.divider-label.spaced { margin-top: 60px; }
@media (max-width: 720px) { .cat-grid.publishers { grid-template-columns: 1fr; } }
.cat-card {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #3a5742, #1d3224);
  display: flex; align-items: flex-end;
}
.cat-card::before {
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(95deg, rgba(255,255,255,.03) 0 8px, rgba(0,0,0,.08) 8px 18px);
}
.cat-card span {
  position: relative; z-index: 2; width: 100%;
  padding: 18px; color: #f4ede1;
  text-transform: uppercase; letter-spacing: .14em; font-size: .82rem;
  background: linear-gradient(to top, rgba(20,33,24,.85), transparent);
}
.cat-card:hover { border-color: var(--gold-text); }

.divider-label { text-align:center; margin-bottom: 36px; }
.divider-label .kicker::before,
.divider-label .kicker::after {
  content:""; display:inline-block; width:36px; height:1px;
  background: var(--gold); vertical-align: middle; margin: 0 14px;
}

/* ============================================================
   Shop page
   ============================================================ */
.shop-head { background: var(--cream-deep); padding: 56px 0 40px; text-align: center; }
.search-bar {
  display: flex; gap: 0; max-width: 560px; margin: 22px auto 0;
  border: 1px solid var(--line); background: #fff;
}
.search-bar input {
  flex: 1; border: none; padding: 14px 18px; font-family: var(--sans);
  font-size: .95rem; color: var(--ink); background: transparent;
}
.search-bar button {
  border: none; background: var(--green); color: var(--cream);
  padding: 0 22px; cursor: pointer; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem;
}
.shop-layout { display: grid; grid-template-columns: 230px 1fr; gap: 40px; padding: 48px 0 80px; }
.facets h4 {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .14em;
  font-size: .74rem; color: var(--gold-text); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.facets .facet-group { margin-bottom: 28px; }
.facets label { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); padding: 4px 0; cursor: pointer; }
.facets label:hover { color: var(--ink); }
.facets label input[type="checkbox"] { width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--gold-text); cursor: pointer; }
.facets select {
  width: 100%; padding: 9px 10px; border: 1px solid var(--line);
  background: #fff; font-family: var(--sans); font-size: .88rem; color: var(--ink);
}

.shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.shop-toolbar .count { font-size: .85rem; color: var(--muted); letter-spacing: .04em; }

.book-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.book-card { background: var(--cream-card); border: 1px solid var(--line); display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.book-card:hover { box-shadow: 0 10px 30px rgba(36,61,44,.12); transform: translateY(-3px); }
.book-cover {
  aspect-ratio: 3 / 4; background: linear-gradient(160deg, #34503d, #1d3224);
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-cover .no-img { color: rgba(244,237,225,.6); font-family: var(--serif); font-style: italic; font-size: .95rem; padding: 12px; text-align: center; }
.book-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--gold-text); color: #fff; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; padding: 4px 8px;
}
.book-body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.book-pub { font-size: .73rem; text-transform: uppercase; letter-spacing: .16em; color: var(--gold-text); margin-bottom: 6px; }
.book-title { font-family: var(--serif); font-size: 1.28rem; line-height: 1.15; margin: 0 0 2px; color: var(--ink); }
.book-title a { color: inherit; transition: color .15s; }
.book-title a:hover { color: var(--gold-text); }
.book-author { font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
.book-meta { font-size: .78rem; color: var(--muted); margin-bottom: 14px; }
.book-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.book-price { font-family: var(--serif); font-size: 1.4rem; color: var(--green); }
.book-foot .btn { padding: 10px 16px; font-size: .74rem; }

.shop-empty, .shop-loading { text-align: center; padding: 60px 20px; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 1.2rem; }
.notice {
  max-width: var(--maxw); margin: 0 auto; padding: 10px 16px;
  background: #fbf4e6; border: 1px solid var(--line); color: var(--muted);
  font-size: .82rem; text-align: center;
}

/* ============================================================
   Journal / blog
   ============================================================ */
.journal-head { background: var(--cream-deep); padding: 56px 0 40px; text-align: center; }
.journal-layout { display: grid; grid-template-columns: 1fr 300px; gap: 48px; padding: 48px 0 80px; }

.article-meta { font-size: .75rem; text-transform: uppercase; letter-spacing: .16em; color: var(--gold-text); }
.article-meta .dot { color: var(--gold-text); opacity: .5; margin: 0 10px; }

/* editorial article cards (image-free, typography-led) */
.article-list { display: flex; flex-direction: column; gap: 22px; }
.article-card {
  position: relative;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  padding: 34px 38px 32px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.article-card:hover { box-shadow: 0 14px 34px rgba(36,61,44,.10); transform: translateY(-2px); }
.article-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.article-cat { font-family: var(--sans); text-transform: uppercase; letter-spacing: .2em; font-size: .74rem; color: var(--gold-text); font-weight: 500; }
.article-date { font-family: var(--serif); font-style: italic; font-size: .9rem; color: var(--muted); white-space: nowrap; }
.article-card h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.14; margin: 0 0 12px; }
.article-card h3 a { color: var(--ink); transition: color .15s; }
.article-card h3 a:hover { color: var(--gold-text); }
.article-excerpt { font-family: var(--serif); font-style: italic; font-size: 1.18rem; line-height: 1.5; color: var(--muted); margin: 0 0 20px; }
.article-more { font-family: var(--sans); text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; color: var(--green); border-bottom: 1px solid transparent; padding-bottom: 3px; transition: color .15s, border-color .15s; }
.article-more:hover { color: var(--gold-text); border-color: var(--gold-text); }

/* featured (first) article — a touch larger */
.article-card.featured { padding: 44px 44px 40px; }
.article-card.featured h3 { font-size: clamp(2rem, 3.4vw, 2.7rem); }
.article-card.featured .article-excerpt { font-size: 1.28rem; }

/* sidebar */
.journal-aside { align-self: start; position: sticky; top: 110px; }
.aside-card { background: var(--cream-card); border: 1px solid var(--line); padding: 26px; margin-bottom: 26px; }
.aside-card h4 {
  font-family: var(--serif); font-size: 1.35rem; color: var(--ink);
  margin: 0 0 4px; text-transform: none; letter-spacing: 0;
}
.aside-card .aside-sub { font-size: .75rem; text-transform: uppercase; letter-spacing: .18em; color: var(--gold-text); margin-bottom: 16px; }
.news-list { list-style: none; margin: 0; padding: 0; }
.news-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.news-item:last-child { border-bottom: none; padding-bottom: 0; }
.news-item:first-child { padding-top: 0; }
.news-source { font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 4px; }
.news-item a { font-family: var(--serif); font-size: 1.02rem; line-height: 1.25; color: var(--ink); display: inline-flex; gap: 6px; }
.news-item a:hover { color: var(--gold-text); }
.news-item a .ext { color: var(--gold-text); font-size: .76rem; }
.aside-empty { font-style: italic; color: var(--muted); font-family: var(--serif); }

/* ============================================================
   Single article page
   ============================================================ */
.article-page { max-width: 720px; margin: 0 auto; padding: 44px var(--pad) 90px; }
.article-back { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--gold-text); display: inline-block; }
.article-back:hover { color: var(--green); }

.article-header { text-align: center; margin: 30px 0 40px; }
.article-header .article-meta { font-size: .72rem; margin-bottom: 18px; display: block; }
.article-header h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); margin: 0 auto 18px; max-width: 16ch; }
.article-byline { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 1.08rem; }

/* small gold ornament: a rule with a centred diamond */
.article-ornament { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--gold-text); margin: 26px 0 0; }
.article-ornament::before, .article-ornament::after { content: ""; width: 46px; height: 1px; background: var(--gold); opacity: .6; }
.article-ornament span { font-size: .76rem; }

.prose { font-size: 1.1rem; line-height: 1.82; color: #3a3630; }
.prose > p:first-of-type::first-letter {
  font-family: var(--serif); font-weight: 600; float: left;
  font-size: 3.6rem; line-height: .82; padding: 6px 12px 0 0; color: var(--green);
}
.prose p { margin: 0 0 1.3em; color: #3a3630; }
.prose h2 { font-size: 1.9rem; margin: 1.6em 0 .5em; }
.prose h3 { font-size: 1.4rem; margin: 1.4em 0 .4em; }
.prose a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--green); }
.prose ul, .prose ol { margin: 0 0 1.3em 1.4em; }
.prose li { margin-bottom: .4em; }
.prose blockquote {
  border-left: 3px solid var(--gold); margin: 1.4em 0; padding: 4px 0 4px 22px;
  font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--green);
}
.prose img { margin: 1.4em 0; border: 1px solid var(--line); }
.prose code { background: var(--cream-deep); padding: 2px 6px; border-radius: 3px; font-size: .9em; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; }
.article-state { text-align: center; padding: 80px 20px; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 1.3rem; }

.article-foot { text-align: center; margin-top: 56px; padding-top: 8px; }
.article-foot .signoff { font-family: var(--serif); font-style: italic; color: var(--gold-text); font-size: 1.05rem; margin: 22px 0 24px; }

/* ============================================================
   Product (single book) page
   ============================================================ */
.product-page { padding-top: 34px; padding-bottom: 80px; }
.product-back { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--gold-text); display: inline-block; margin-bottom: 26px; }
.product-back:hover { color: var(--green); }
.product-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 50px; align-items: start; }

/* gallery */
.gallery-main {
  position: relative;
  aspect-ratio: 3 / 4; background: var(--cream-card); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.gallery-main.zoomable { cursor: zoom-in; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; transition: transform .12s ease; will-change: transform; }
.gallery-main .no-img { color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 1.1rem; padding: 24px; text-align: center; }

/* prev / next arrows */
.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(244,237,225,.92);
  color: var(--green); cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  opacity: .82; transition: opacity .15s, background .15s, color .15s, border-color .15s;
}
.gallery-arrow svg { width: 18px; height: 18px; }
.gallery-main:hover .gallery-arrow { opacity: 1; }
.gallery-arrow:hover { background: var(--green); color: var(--cream); border-color: var(--green); }
.gallery-arrow.prev { left: 12px; }
.gallery-arrow.next { right: 12px; }
.zoom-hint {
  position: absolute; bottom: 10px; right: 12px; z-index: 3;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--green); background: rgba(244,237,225,.9); border: 1px solid var(--line);
  padding: 4px 9px; pointer-events: none; opacity: .85;
}
.gallery-main:hover .zoom-hint { opacity: 0; }
@media (hover: none) {
  .gallery-arrow { opacity: 1; }
  .gallery-main.zoomable { cursor: default; }
  .zoom-hint { display: none; }
}
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gallery-thumb {
  width: 66px; aspect-ratio: 3 / 4; object-fit: cover; cursor: pointer;
  border: 1px solid var(--line); opacity: .65; transition: opacity .15s, border-color .15s;
}
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.active { opacity: 1; border-color: var(--gold-text); }

/* info column */
.product-pub { font-family: var(--sans); text-transform: uppercase; letter-spacing: .2em; font-size: .76rem; color: var(--gold-text); margin-bottom: 10px; }
.product-title { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; margin: 0 0 8px; }
.product-author { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--muted); margin-bottom: 14px; }
.product-edition { font-size: .9rem; color: var(--muted); margin-bottom: 22px; }
.product-edition .dot { color: var(--gold-text); opacity: .5; margin: 0 8px; }
.product-price { font-family: var(--serif); font-size: 2.4rem; color: var(--green); margin-bottom: 18px; }
.product-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.pbadge {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem;
  color: var(--green); background: var(--cream-deep); border: 1px solid var(--line); padding: 6px 11px;
}
.pbadge.gold { background: var(--gold); color: #fff; border-color: var(--gold-text); }
.add-basket { width: 100%; justify-content: center; text-align: center; padding: 16px; font-size: .78rem; }
.basket-note { font-size: .78rem; color: var(--muted); font-style: italic; font-family: var(--serif); margin: 10px 0 0; text-align: center; }
.product-sku { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 22px 0 0; }
.product-desc { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 1.12rem; line-height: 1.7; color: #3a3630; }
.product-desc p { color: #3a3630; margin: 0 0 1em; }

/* condition + specs */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 60px; padding-top: 12px; }
.detail-h { font-size: 1.7rem; margin: 0 0 4px; }
.detail-rule { width: 46px; height: 2px; background: var(--gold); margin: 0 0 22px; }
.cond-group { margin-bottom: 22px; }
.cond-group h4 { font-family: var(--sans); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--gold-text); margin: 0 0 8px; }
.cond-table { width: 100%; border-collapse: collapse; }
.cond-table tr { border-bottom: 1px solid var(--line); }
.cond-table tr:last-child { border-bottom: none; }
.cond-table td { padding: 8px 0; font-size: .92rem; vertical-align: top; }
.cond-table td.k { color: var(--muted); width: 44%; }
.cond-table td.v { color: var(--ink); }
.cond-note { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: .95rem; margin: 8px 0 0; }
.cond-overall { font-family: var(--serif); font-size: 1.3rem; color: var(--green); margin: 0 0 18px; }
.product-state { text-align: center; padding: 90px 20px; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 1.3rem; }

@media (max-width: 860px) {
  .product-layout { grid-template-columns: 1fr; gap: 30px; }
  .gallery-main { max-width: 360px; margin: 0 auto; }
  .product-detail { grid-template-columns: 1fr; gap: 36px; }
}

/* newsletter (placeholder) confirmation */
.newsletter-thanks { font-family: var(--serif); font-style: italic; color: var(--green); font-size: 1.15rem; }

/* ============================================================
   Cart
   ============================================================ */
.cart-badge {
  display: inline-block; background: var(--gold); color: #fff;
  font-size: .72rem; line-height: 1; border-radius: 10px; padding: 3px 6px; margin: 0 2px;
  vertical-align: middle;
}
.cart-page { padding-top: 40px; padding-bottom: 80px; max-width: 920px; }
.cart-head { text-align: center; margin-bottom: 10px; }
.cart-head h1 { margin-bottom: 6px; }
.cart-count-line { font-size: .85rem; color: var(--muted); letter-spacing: .04em; }

.cart-row {
  display: grid; grid-template-columns: 88px 1fr auto auto; gap: 20px;
  align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line);
}
.cart-row:first-child { border-top: 1px solid var(--line); }
.cart-thumb {
  width: 88px; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(160deg, #34503d, #1d3224);
  display: flex; align-items: center; justify-content: center;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-thumb .no-img { color: rgba(244,237,225,.6); font-family: var(--serif); font-style: italic; font-size: .76rem; padding: 6px; text-align: center; }
.cart-pub { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--gold-text); margin-bottom: 4px; }
.cart-title { font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; color: var(--ink); }
.cart-title:hover { color: var(--gold-text); }
.cart-author { font-size: .85rem; color: var(--muted); margin: 2px 0 6px; }
.cart-sku { font-size: .73rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.cart-price { font-family: var(--serif); font-size: 1.35rem; color: var(--green); white-space: nowrap; }
.cart-row.unavailable { opacity: .72; }
.cart-row.unavailable .cart-thumb { filter: grayscale(1); }
.cart-unavail { color: #7a2626; font-family: var(--sans); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.cart-remove { background: none; border: none; cursor: pointer; color: var(--muted); font-family: var(--sans); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; padding: 4px; transition: color .15s; }
.cart-remove:hover { color: #7a2626; }

.cart-summary { display: flex; justify-content: flex-end; margin-top: 28px; }
.cart-summary-inner { width: 340px; max-width: 100%; background: var(--cream-card); border: 1px solid var(--line); padding: 26px; }
.cart-summary-inner h3 { font-size: 1.4rem; margin: 0 0 16px; }
.cart-line { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; font-size: .92rem; color: var(--muted); }
.cart-line.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px; font-family: var(--serif); }
.cart-line.total .v { font-size: 1.5rem; color: var(--green); }
.cart-checkout { width: 100%; justify-content: center; text-align: center; margin-top: 18px; padding: 15px; }
.cart-checkout[disabled] { opacity: .55; cursor: not-allowed; }
.cart-checkout-note { font-size: .78rem; color: var(--muted); font-style: italic; font-family: var(--serif); margin: 12px 0 0; text-align: center; line-height: 1.5; }
.cart-checkout-note a { color: var(--gold-text); }
.cart-continue { display: inline-block; margin-top: 22px; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-text); }
.cart-continue:hover { color: var(--green); }
.cart-empty { text-align: center; padding: 80px 20px; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 1.3rem; }

@media (max-width: 620px) {
  .cart-row { grid-template-columns: 70px 1fr; grid-template-areas: "thumb info" "thumb price" "remove remove"; gap: 6px 16px; }
  .cart-thumb { grid-area: thumb; width: 70px; align-self: start; }
  .cart-info { grid-area: info; }
  .cart-price { grid-area: price; }
  .cart-remove { grid-area: remove; justify-self: start; padding-left: 0; }
  .cart-summary-inner { width: 100%; }
}

/* ============================================================
   Checkout
   ============================================================ */
.checkout-page { padding-top: 40px; padding-bottom: 80px; max-width: 980px; }
.checkout-head { text-align: center; margin-bottom: 22px; }
.checkout-head h1 { margin-bottom: 6px; }
.checkout-grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: 48px; align-items: start; }

.field-group { margin-bottom: 16px; }
.field-group label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 6px; }
.field-group input, .field-group select, .field-group textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); background: #fff;
  font-family: var(--sans); font-size: .95rem; color: var(--ink);
}
.field-group input:focus-visible, .field-group select:focus-visible, .field-group textarea:focus-visible { outline: 3px solid var(--gold-text); outline-offset: 1px; border-color: var(--gold-text); }
.field-group textarea { resize: vertical; font-family: var(--sans); }
.field-group .req { color: var(--gold-text); }
.field-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkout-form h3 { font-size: 1.4rem; margin: 0 0 16px; }

.checkout-summary { background: var(--cream-card); border: 1px solid var(--line); padding: 26px; position: sticky; top: 110px; }
.checkout-summary h3 { font-size: 1.4rem; margin: 0 0 16px; }
.sum-item { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.sum-item .t { color: var(--ink); }
.sum-item .t small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.sum-item .p { color: var(--green); font-family: var(--serif); font-size: 1.05rem; white-space: nowrap; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.sum-total .v { font-family: var(--serif); font-size: 1.6rem; color: var(--green); }
.sum-note { font-size: .78rem; color: var(--muted); font-style: italic; font-family: var(--serif); margin: 10px 0 0; }
.sum-row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0 4px; font-size: .9rem; color: var(--muted); }
.ship-options { margin: 8px 0 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.ship-options-head { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.ship-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; transition: border-color .15s, background .15s; }
.ship-option:hover { border-color: var(--green); }
.ship-option.selected { border-color: var(--green); background: var(--cream-card); }
.ship-option input { accent-color: var(--green); }
.ship-option .ship-name { flex: 1; color: var(--ink); font-size: .9rem; }
.ship-option .ship-name small { color: var(--muted); font-size: .76rem; margin-left: 4px; }
.ship-option .ship-price { color: var(--green); font-family: var(--serif); font-size: 1.05rem; white-space: nowrap; }
.checkout-submit { width: 100%; justify-content: center; text-align: center; margin-top: 20px; padding: 15px; }

.checkout-error { background: #fbecec; border: 1px solid #e2c4c4; color: #7a2626; padding: 12px 16px; font-size: .88rem; margin-bottom: 18px; line-height: 1.5; }
.checkout-error a { color: #7a2626; text-decoration: underline; }

/* test-payment panel */
.pay-panel { max-width: 560px; margin: 0 auto; text-align: center; }
.test-badge { display: inline-block; background: #7a5a00; color: #fdedb0; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; padding: 4px 10px; margin-bottom: 16px; }
.reserve-note { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 1.05rem; margin: 0 0 6px; }
.countdown { font-family: var(--serif); font-size: 2.2rem; color: var(--green); margin: 6px 0 18px; }
.countdown.expired { color: #7a2626; }
.pay-recap { background: var(--cream-card); border: 1px solid var(--line); padding: 20px 24px; text-align: left; margin: 22px auto; }
.pay-disclaimer { font-size: .8rem; color: var(--muted); font-style: italic; font-family: var(--serif); margin-top: 14px; line-height: 1.5; }

/* confirmation */
.confirm-panel { text-align: center; max-width: 560px; margin: 0 auto; padding: 30px 0; }
.confirm-tick { width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 22px; }
.confirm-ref { font-family: var(--serif); font-size: 1.5rem; color: var(--green); margin: 8px 0 18px; }

@media (max-width: 820px) {
  .checkout-grid { grid-template-columns: 1fr; gap: 30px; }
  .checkout-summary { position: static; }
}
@media (max-width: 520px) { .field-row2 { grid-template-columns: 1fr; } }

/* ============================================================
   Policy / info pages (Shipping/Returns/FAQs, Privacy, Terms)
   ============================================================ */
.policy-page { padding-top: 12px; padding-bottom: 80px; max-width: 860px; }
.policy-intro { text-align: center; padding: 40px 0 8px; }
.policy-intro h1 { margin-bottom: 14px; }
.policy-divider { width: 100%; max-width: 560px; height: 1px; background: var(--line); margin: 28px auto 0; }

/* pill tab nav */
.policy-tabs { display: flex; max-width: 640px; margin: 34px auto 8px; border: 1px solid var(--line); background: var(--cream-card); }
.policy-tabs a {
  flex: 1; text-align: center; padding: 15px 10px;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .14em;
  font-size: .75rem; color: var(--ink); border-right: 1px solid var(--line); transition: background .15s, color .15s;
}
.policy-tabs a:last-child { border-right: none; }
.policy-tabs a:hover { background: var(--cream-deep); color: var(--gold-text); }

/* sections (anchored — offset for the sticky header) */
.policy-section { scroll-margin-top: 100px; padding-top: 40px; }
.policy-h { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 12px; }
.policy-rule { height: 2px; background: var(--gold); opacity: .8; margin: 0 0 26px; }
.policy-section p { color: var(--muted); line-height: 1.75; margin: 0 0 1.1em; }
.policy-section a { color: var(--gold-text); }

/* two info boxes side by side */
.info-box-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 6px 0 26px; }
.info-box { background: var(--cream-card); border: 1px solid var(--line); padding: 24px 26px; }
.info-box h3 { font-size: 1.3rem; margin: 0 0 14px; }
.info-box ul { margin: 0; padding-left: 18px; }
.info-box li { font-size: .92rem; color: var(--muted); margin-bottom: 9px; line-height: 1.5; }
.info-box li:last-child { margin-bottom: 0; }

/* highlighted callout note */
.callout { background: var(--cream-card); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 0; padding: 18px 22px; margin: 8px 0 18px; }
.callout p { margin: 0; font-size: .95rem; color: var(--muted); line-height: 1.6; }

/* FAQ list */
.faq-list { margin-top: 6px; }
.faq-item { padding: 24px 0; border-bottom: 1px solid var(--line); }
.faq-item:first-child { padding-top: 8px; }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { font-size: 1.3rem; margin: 0 0 8px; }
.faq-item p { margin: 0; color: var(--muted); line-height: 1.65; }
.faq-item a { color: var(--gold-text); }

.policy-signoff { text-align: center; font-family: var(--serif); font-style: italic; color: var(--gold-text); font-size: 1.1rem; margin-top: 48px; }
.policy-note { font-size: .82rem; color: var(--muted); font-style: italic; font-family: var(--serif); margin-top: 8px; }

@media (max-width: 640px) {
  .info-box-grid { grid-template-columns: 1fr; }
  .policy-tabs a { font-size: .72rem; letter-spacing: .1em; padding: 12px 6px; }
}

/* ============================================================
   Contact page
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 36px; }
.info-card { border: 1px solid var(--line); background: var(--cream-card); padding: 34px; }
.info-card .ficon { width: 38px; height: 38px; color: var(--gold-text); background: rgba(36,61,44,.06); padding: 8px; margin-bottom: 18px; }
.info-card h3 { margin-bottom: 10px; }
.info-card a { color: var(--gold-text); }
.sell-cta {
  background: var(--green); color: #f4ede1; padding: 48px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; margin-top: 40px;
}
.sell-cta h2 { color: #f4ede1; }
.sell-cta p { color: rgba(244,237,225,.78); }
/* The button side: against the box's right edge, level with the text (under it on phones),
   with anything above the button (the contact page's "Start the conversation") lined up with it */
.sell-cta > div:last-child { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* The contact page's box: Sell to Us, and the email button beneath, the same width */
.sell-cta-actions .btn { min-width: 270px; text-align: center; }
.sell-cta-actions .btn + .btn { margin-top: 8px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--green-deep); color: #cdd7cd; padding: 60px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.site-footer h4 {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .16em;
  font-size: .74rem; color: var(--gold-soft); margin: 0 0 16px;
}
.site-footer .brand-name { font-family: var(--serif); font-size: 1.6rem; color: #f4ede1; margin-bottom: 6px; }
.site-footer .brand-tag { font-family: var(--serif); font-style: italic; color: var(--gold-soft); margin-bottom: 14px; }
.site-footer p { color: rgba(205,215,205,.7); font-size: .88rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer li a { font-size: .88rem; color: rgba(205,215,205,.8); }
.site-footer li a:hover { color: var(--gold-soft); }
/* Our Facebook and Instagram pages, under the description in the footer */
.footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; }
.footer-social-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-soft); }
.footer-social a { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: rgba(205,215,205,.85);
  padding: 10px 0; margin: -10px 0; }   /* a bigger target to tap, same spacing */
.footer-social a svg { flex-shrink: 0; }
.footer-social a:hover { color: var(--gold-soft); }
.footer-bottom {
  border-top: 1px solid var(--line-dark); margin-top: 44px; padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: .78rem; color: rgba(205,215,205,.6);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .features { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .split, .sell-cta, .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .sell-cta > div:last-child { justify-self: start; align-items: flex-start; }
  .sell-cta > div.sell-cta-actions { justify-self: stretch; align-items: stretch; }
  .sell-cta-actions .btn { min-width: 0; padding-left: 16px; padding-right: 16px; }
  .split.reverse .split-media { order: 0; }
  .book-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-layout { grid-template-columns: 1fr; }
  .journal-layout { grid-template-columns: 1fr; gap: 36px; }
  .journal-aside { position: static; top: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
/* Final collapse to the hamburger, once even the tightened horizontal links
   no longer fit alongside the small centred logo. Above this the inline logo
   reserves its own column, so the links never sit under it. */
@media (max-width: 1115px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav-left { display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--cream); border-bottom: 1px solid var(--line); padding: 8px var(--pad); z-index: 60; }
  .nav-left.open { display: flex; }
  .nav-left a.navlink { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); }
  /* In the mobile menu the Shop submenu is shown inline (always expanded) */
  .nav-item { display: block; width: 100%; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: none; box-shadow: none; padding: 0 0 8px 16px; min-width: 0; background: none;
  }
  .dropdown a { padding: 10px 0; text-transform: none; letter-spacing: .04em; font-size: .82rem; color: var(--muted); }
  .menu-toggle { display: block; }
  .nav-right .nav-text { display: none; }
  /* "Sell to Us" moves from beside the cart into the menu */
  .nav-left .nav-menu-only { display: block; }
  .nav-right .nav-search { display: none; }
  .nav-left .nav-search.nav-menu-only { display: flex; width: 100%; height: 42px; margin: 6px 0 8px; }
  .nav-left .nav-search input { flex: 1; width: auto; font-size: 16px; }  /* 16px: phones don't zoom in */
  .nav-right .nav-sell { display: none; }
}
@media (max-width: 640px) {
  .book-grid { grid-template-columns: 1fr 1fr; }
  .article-card, .article-card.featured { padding: 28px 24px 26px; }
  .article-card-top { flex-direction: column; gap: 4px; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .book-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Header badge overhang — clearance for the first content block
   on each page. Placed last so it wins over the section defaults
   (which use the `padding` shorthand and would otherwise reset it).
   ============================================================ */
.shop-head, .journal-head { padding-top: 150px; }
.policy-intro { padding-top: 122px; }
.cart-page, .checkout-page, .product-page, .article-page { padding-top: 122px; }
/* The first .center section after the header needs clearance for the badge —
   whether it sits directly after the header or inside the <main> landmark. */
.site-header + .center,
.site-header + main > .center:first-child { padding-top: 130px; }
/* With the compact (non-overhanging) header below 1320px, the first content
   block no longer needs the big top-padding clearance. */
@media (max-width: 1319px) {
  .shop-head, .journal-head { padding-top: 48px; }
  .policy-intro { padding-top: 40px; }
  .cart-page, .checkout-page { padding-top: 40px; }
  .product-page { padding-top: 34px; }
  .article-page { padding-top: 44px; }
  .site-header + .center,
  .site-header + main > .center:first-child { padding-top: 60px; }
}

/* ---------- accessibility helpers ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Selling to us (folio-society.html)
   ============================================================ */
.features.three { grid-template-columns: repeat(3, 1fr); max-width: 980px; margin-left: auto; margin-right: auto; }
.feature-h {
  font-family: var(--sans); text-transform: uppercase;
  letter-spacing: .14em; font-size: .8rem; color: var(--ink); margin: 0 0 8px;
}
.wanted-h { font-size: 1.6rem; margin: 48px 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.wanted-intro { color: var(--muted); margin: 10px 0 14px; }
.wanted-list { columns: 3 240px; column-gap: 36px; list-style: none; padding: 0; margin: 14px 0 0; }
.wanted-list li { break-inside: avoid; padding: 6px 0; border-bottom: 1px dotted var(--line); font-size: .95rem; line-height: 1.4; }
.wanted-list .yr { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.wanted-list .yr::before { content: "· "; }
@media (max-width: 900px) {
  .features.three { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   Sell to Us: the landing page's publisher cards (sell.html),
   and the Franklin Library and Easton Press pages' terms
   ============================================================ */
.sell-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sell-card {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-top: 3px solid var(--gold);
  background: var(--cream-card); padding: 30px 28px;
  color: inherit; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.sell-card h2 { font-size: 1.9rem; margin: .1em 0 .2em; }
.sell-card p { flex: 1; margin: 0 0 14px; }
.sell-card .sell-more { color: var(--gold-text); font-size: .88rem; letter-spacing: .04em; }
.sell-card:hover { border-color: var(--gold-text); box-shadow: 0 6px 22px rgba(36,61,44,.10); transform: translateY(-2px); }
.sell-card:hover .sell-more { text-decoration: underline; text-underline-offset: 3px; }
.back-to-sell { display: block; width: fit-content; margin: 0 auto 18px; font-size: .85rem; color: var(--gold-text); letter-spacing: .04em; }
.back-to-sell:hover { color: var(--green); }
.sell-terms { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 980px; margin: 0 auto;
  border: 1px solid var(--line); background: var(--cream-card); }
.sell-terms > div { padding: 22px 24px; text-align: center; }
.sell-terms > div + div { border-left: 1px solid var(--line); }
.sell-terms p { margin: 8px 0 0; font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; color: var(--ink); }
.sell-terms-note { color: var(--muted); margin: 14px auto 0; max-width: 640px; }
.sell-figure { margin: 10px auto 0; text-align: center; }
.sell-figure img { display: block; margin: 0 auto; max-width: 100%; height: auto; border: 1px solid var(--line); }
@media (max-width: 860px) {
  .sell-grid, .sell-terms { grid-template-columns: 1fr; }
  .sell-terms > div + div { border-left: none; border-top: 1px solid var(--line); }
}

/* How we grade condition (sell.html#grading) */
.grading { max-width: 860px; margin: 64px auto 0; scroll-margin-top: 90px; }
.grades { margin: 26px 0 0; border-top: 1px solid var(--line); }
.grade { display: grid; grid-template-columns: 170px 1fr; gap: 24px; padding: 20px 4px; border-bottom: 1px solid var(--line); }
.grade dt { font-family: var(--serif); font-size: 1.45rem; color: var(--ink); line-height: 1.2; }
.grade dd { margin: 0; color: #3a3630; line-height: 1.7; }
.grade-abbr { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--gold-text);
  color: var(--gold-text); font-family: var(--sans); font-size: .72rem; letter-spacing: .08em; vertical-align: middle; }
.sell-terms a { color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.sell-terms a:hover { color: var(--gold-text); }
@media (max-width: 640px) { .grade { grid-template-columns: 1fr; gap: 6px; } }

/* Newsletter sign-up (contact.html#newsletter) */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.newsletter-msg { font-size: .9rem; color: var(--muted); margin: 10px 0 0; min-height: 1.2em; }
.newsletter-msg.error { color: #8a2a1f; }
.newsletter-small { font-size: .8rem; color: var(--muted); font-style: italic; font-family: var(--serif); margin-top: 12px; }
.newsletter-small a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }
/* newsletter.html: confirming and unsubscribing */
.nl-step[hidden] { display: none; }

/* The publisher pages' heading ("We Buy Franklin Library Books.") on one
   line: as large as other headings where there's room, smaller with the
   screen where there isn't, rather than wrapping */
.sell-title { white-space: nowrap; font-size: min(4.2rem, 6.4vw); }

/* The publisher pages' "Have some … books to sell?" box: solid green behind
   the words, fading into the photo of the office (about page) behind the
   button. A light green veil stays over the photo, so the cream button
   still stands out against its white walls. On phones, where the box
   stacks, the fade runs from top to bottom instead. */
.sell-cta-photo {
  background:
    linear-gradient(90deg, var(--green) 0%, var(--green) 42%, rgba(36,61,44,.72) 62%, rgba(36,61,44,.32) 100%),
    /* over the right-hand 62% only, so Charley and the shelves are in the clear part */
    url("../img/about/the-office.jpg") right 70% / 62% auto no-repeat,
    var(--green);
}
@media (max-width: 900px) {      /* where the box stacks */
  .sell-cta-photo {
    background:
      linear-gradient(180deg, var(--green) 0%, var(--green) 50%, rgba(36,61,44,.72) 72%, rgba(36,61,44,.35) 100%),
      url("../img/about/the-office.jpg") 45% 70% / cover no-repeat,
      var(--green);
  }
}

/* Shop search: "Showing results for …" / "Did you mean …?" (shop.js) */
.search-note { margin: -6px 0 18px; font-size: .98rem; color: var(--ink); }
.search-note[hidden] { display: none; }
.search-note a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }
.search-note a:hover { color: var(--green); }

/* ============================================================
   Folio Society bibliography (folio-bibliography.html)
   ============================================================ */
.wanted-lookup { margin: 6px 0 0; color: var(--muted); }
.wanted-lookup a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }
.wanted-lookup a:hover { color: var(--green); }
.bib-search { max-width: 680px; }
.bib-search select {
  border: none; border-right: 1px solid var(--line); padding: 0 14px; background: var(--cream);
  font-family: var(--sans); font-size: .85rem; color: var(--ink); cursor: pointer;
}
.bib-results { padding-top: 40px; }
.bib-status { color: var(--muted); margin: 0 0 18px; }
.bib-table-wrap { overflow-x: auto; }
.bib-table-wrap.is-empty { display: none; }
.bib-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.bib-table th { text-align: left; padding: 0; border-bottom: 2px solid var(--green); white-space: nowrap; }
.bib-table th > button, .bib-table th.bib-col-stock {
  display: block; width: 100%; padding: 10px 12px; border: none; background: none; text-align: inherit;
  font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: .14em;
  font-size: .7rem; color: var(--gold-text);
}
.bib-table th > button { cursor: pointer; }
.bib-table th > button:hover { color: var(--green); }
.bib-table th > button::after { content: "\2195"; margin-left: 6px; opacity: .35; letter-spacing: 0; }
.bib-table th[aria-sort="ascending"] > button::after { content: "\25B2"; opacity: 1; font-size: .8em; }
.bib-table th[aria-sort="descending"] > button::after { content: "\25BC"; opacity: 1; font-size: .8em; }
.bib-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bib-table tbody tr:not(.bib-detail):hover { background: var(--cream-card); }
.bib-table .bib-col-no { width: 1%; white-space: nowrap; text-align: right; }
.bib-table td.bib-col-no { font-family: var(--serif); font-size: 1.15rem; line-height: 1.2; color: var(--gold-text); }
.bib-table .bib-col-year { width: 1%; white-space: nowrap; }
.bib-table .bib-col-author, .bib-table .bib-col-illus { min-width: 10em; }
.bib-table td.bib-col-title { font-family: var(--serif); font-size: 1.1rem; line-height: 1.3; }
.bib-table .bib-col-stock a {
  display: block; white-space: nowrap; color: var(--green); text-decoration: underline; text-underline-offset: 2px;
}
.bib-table .bib-col-stock a:hover { color: var(--gold-text); }
.bib-open {
  border: none; background: none; padding: 0; margin: 0; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink);
}
.bib-open::before { content: "\25B8"; display: inline-block; width: 1em; color: var(--gold-text); font-size: .8em; transition: transform .15s; }
.bib-open[aria-expanded="true"]::before { transform: rotate(90deg); }
.bib-open:hover { color: var(--green); }
.bib-detail td { background: var(--cream-card); padding: 4px 16px 16px calc(12px + 1.1rem); }
.bib-detail p { margin: 10px 0 0; font-size: .9rem; line-height: 1.6; max-width: 80ch; }
.bib-detail p + p { margin-top: 3px; }        /* the later printings */
.bib-status strong { color: var(--ink); font-weight: 500; }
.bib-results .btn { margin-top: 30px; }
@media (max-width: 760px) {
  .bib-table .bib-col-illus { display: none; }
}
@media (max-width: 600px) {
  /* Too narrow for columns: the headings become a row of sort buttons, and
     each entry a card — number on the left; title, author, year, stock */
  .bib-table, .bib-table thead, .bib-table tbody { display: block; }
  .bib-table thead tr { display: flex; flex-wrap: wrap; border-bottom: 2px solid var(--green); }
  .bib-table th { border-bottom: none; }
  .bib-table th.bib-col-no, .bib-table th.bib-col-year { width: auto; text-align: left; }
  .bib-table th.bib-col-stock { display: none; }
  .bib-table th > button { padding: 8px 10px; }
  .bib-table tbody tr:not(.bib-detail) {
    display: grid; grid-template-columns: 3.6em 1fr; column-gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--line);
  }
  .bib-table tbody td { border: none; padding: 0; }
  .bib-table tbody td:empty { display: none; }
  .bib-table td.bib-col-no { grid-row: 1 / span 4; width: auto; }
  .bib-table tbody td:not(.bib-col-no) { grid-column: 2; }
  .bib-table td.bib-col-year { color: var(--muted); font-size: .88rem; }
  .bib-table .bib-col-author { min-width: 0; }
  .bib-table td.bib-col-stock { margin-top: 4px; }
  .bib-table .bib-detail { display: block; }
  .bib-table .bib-detail[hidden] { display: none; }
  .bib-detail td { display: block; padding: 2px 10px 14px; }
  .bib-search { flex-wrap: wrap; }
  .bib-search select { flex: 1 0 100%; border-right: none; border-bottom: 1px solid var(--line); padding: 10px 14px; }
}

/* ============================================================
   Page not found (404.html)
   ============================================================ */
.not-found-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  list-style: none; padding: 0; margin: 34px 0 0;
}
.not-found-links a {
  text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; color: var(--gold-text);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.not-found-links a:hover { color: var(--green); border-color: var(--green); }