/* ===== tokens/fonts.css ===== */
/* ============================================================
   Belladrey Press — Webfonts
   Loaded from Google Fonts CDN. If you self-host, replace the
   @import below with local @font-face rules pointing at the
   binaries and keep the family names identical.
   ------------------------------------------------------------
   Cormorant Garamond — display / editorial headlines
   EB Garamond        — long-form body & book content
   Hanken Grotesk     — UI labels, eyebrows, meta, buttons
   ============================================================ */

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


/* ===== tokens/colors.css ===== */
/* ============================================================
   Belladrey Press — Color System
   A warm, literary palette: ink on cream paper, anchored by an
   oxblood/burgundy accent with fine brass detailing.
   Base ramps first, semantic aliases second.
   ============================================================ */

:root {
  /* ---- Ink (warm near-black neutral ramp) ---- */
  --ink-900: #1C1A17;   /* primary text, logo */
  --ink-800: #2A2622;
  --ink-700: #3A3530;
  --ink-600: #564F47;
  --ink-500: #6F665A;   /* muted / secondary text */
  --ink-400: #8C8275;
  --ink-300: #B4A998;
  --ink-200: #D8CEBD;
  --ink-100: #E9E1D2;

  /* ---- Paper (warm cream surface ramp) ---- */
  --paper-000: #FFFFFF;  /* pure white, rare */
  --paper-50:  #FFFDF8;  /* raised card */
  --paper-100: #FBF7EF;  /* default page background */
  --paper-200: #F4EEE1;  /* sunken / alt section */
  --paper-300: #ECE3D3;  /* hairline fills */
  --sand:      #E2D7C4;  /* default border on paper */
  --sand-deep: #D2C4AC;  /* stronger border */

  /* ---- Burgundy / Oxblood (primary accent ramp) ---- */
  --wine-700: #4F1822;   /* pressed */
  --wine-600: #5E1F2B;   /* hover */
  --wine-500: #722539;   /* primary accent — buttons, links */
  --wine-400: #8B3A4C;
  --wine-300: #B97A86;
  --wine-200: #E6CDD1;   /* tint surface */
  --wine-100: #F4E6E8;   /* faint tint surface */

  /* ---- Brass / Gilt (secondary metallic accent) ---- */
  --brass-700: #7C5A28;
  --brass-600: #94702F;
  --brass-500: #A67C3D;  /* fine rules, ornaments, stars */
  --brass-400: #C29A5A;
  --brass-300: #DcC193;
  --brass-200: #EFE0C4;  /* tint surface */

  /* ---- Semantic status (muted, editorial) ---- */
  --green-500: #3E6B4F;  /* success / in stock */
  --green-100: #E2EDE4;
  --red-500:   #9B2C2C;  /* error / sold out */
  --red-100:   #F4E2E0;
  --amber-500: #B5862A;  /* warning / pre-order */
  --amber-100: #F6ECD4;
  --blue-500:  #3C5A72;  /* info */
  --blue-100:  #E1E8EE;

  /* ============================================================
     Semantic aliases — reference these in components, not the ramps
     ============================================================ */

  /* Surfaces */
  --surface-page:      var(--paper-100);
  --surface-alt:       var(--paper-200);
  --surface-card:      var(--paper-50);
  --surface-raised:    var(--paper-000);
  --surface-ink:       var(--ink-900);   /* dark sections (footer) */
  --surface-tint-wine: var(--wine-100);
  --surface-tint-brass:var(--brass-200);

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-800);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--ink-400);
  --text-on-ink:   var(--paper-100);   /* text on dark surfaces */
  --text-on-wine:  #FBF1EE;
  --text-accent:   var(--wine-500);

  /* Lines & borders */
  --border-hairline: var(--sand);
  --border-strong:   var(--sand-deep);
  --border-ink:      var(--ink-900);
  --rule-brass:      var(--brass-500);

  /* Interactive (links, primary actions) */
  --accent:         var(--wine-500);
  --accent-hover:   var(--wine-600);
  --accent-active:  var(--wine-700);
  --accent-contrast:var(--text-on-wine);

  /* Focus ring */
  --focus-ring: var(--brass-500);
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   Belladrey Press — Typography
   Display: Cormorant Garamond (high-contrast, literary)
   Body:    EB Garamond (warm old-style serif, long-form reading)
   UI:      Hanken Grotesk (labels, eyebrows, buttons, meta)
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-serif:   'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-ui:      'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Type scale (fluid-friendly, editorial) ---- */
  --text-display-2xl: 5.5rem;   /* 88px — hero title */
  --text-display-xl:  4rem;     /* 64px */
  --text-display-lg:  3rem;     /* 48px — section headers */
  --text-display-md:  2.25rem;  /* 36px */
  --text-display-sm:  1.75rem;  /* 28px */

  --text-title-lg: 1.5rem;   /* 24px — card titles */
  --text-title-md: 1.25rem;  /* 20px */
  --text-title-sm: 1.125rem; /* 18px */

  --text-body-lg: 1.25rem;   /* 20px — lead paragraphs / blurbs */
  --text-body-md: 1.0625rem; /* 17px — default body */
  --text-body-sm: 0.9375rem; /* 15px */

  --text-label:    0.8125rem; /* 13px — UI labels */
  --text-eyebrow:  0.75rem;   /* 12px — tracked eyebrows */
  --text-caption:  0.6875rem; /* 11px — fine print */

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ---- Line heights ---- */
  --leading-tight:   1.08;  /* display */
  --leading-snug:    1.25;  /* titles */
  --leading-normal:  1.5;   /* UI */
  --leading-relaxed: 1.65;  /* body reading */
  --leading-loose:   1.8;   /* long-form book content */

  /* ---- Letter spacing ---- */
  --tracking-display: -0.01em; /* tighten large serif */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.22em;  /* the brand's tracked-cap signature */
  --tracking-wordmark:0.32em;  /* matches BELLADREY PRESS wordmark */
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   Belladrey Press — Spacing, Radii, Borders, Shadows, Layout
   Generous, print-inspired spacing. Restrained radii — this is
   an editorial brand, not a soft app. Shadows are subtle and warm.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ---- Radii (restrained / editorial) ---- */
  --radius-none: 0;
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;    /* default — cards, inputs */
  --radius-lg:  10px;
  --radius-pill: 999px; /* tags, chips */

  /* ---- Border widths ---- */
  --border-thin:   1px;
  --border-medium: 1.5px;
  --border-thick:  2px;

  /* ---- Shadows (warm, low, paper-on-paper) ---- */
  --shadow-xs:  0 1px 2px rgba(28, 26, 23, 0.05);
  --shadow-sm:  0 2px 6px rgba(28, 26, 23, 0.07);
  --shadow-md:  0 6px 18px rgba(28, 26, 23, 0.09);
  --shadow-lg:  0 16px 40px rgba(28, 26, 23, 0.13);
  --shadow-book:18px 22px 44px rgba(28, 26, 23, 0.28); /* cast under a book cover */
  --shadow-inset-hairline: inset 0 0 0 1px var(--sand);

  /* ---- Layout ---- */
  --container-prose:  44rem;   /* 704px — long-form reading column */
  --container-narrow: 60rem;   /* 960px */
  --container-wide:   75rem;   /* 1200px — site max width */
  --gutter:           clamp(1.25rem, 5vw, 4rem); /* @kind spacing */

  /* ---- Motion (calm, editorial — ease, never bounce) ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-base: 220ms; /* @kind other */
  --duration-slow: 360ms; /* @kind other */

  /* ---- Z-index ---- */
  --z-base: 0; /* @kind other */
  --z-raised: 10; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-modal: 1100; /* @kind other */
  --z-toast: 1200; /* @kind other */
}


/* ===== tokens/base.css ===== */
/* ============================================================
   Belladrey Press — Base element styles & helpers
   Light, opinionated resets that apply the brand defaults.
   Token files hold the variables; this applies them to elements.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-serif);
  font-size: var(--text-body-md);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings default to the display serif */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--text-display-lg); }
h2 { font-size: var(--text-display-md); }
h3 { font-size: var(--text-title-lg); line-height: var(--leading-snug); letter-spacing: 0; }
h4 { font-size: var(--text-title-md); line-height: var(--leading-snug); letter-spacing: 0; }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 0.18em;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

::selection { background: var(--wine-200); color: var(--ink-900); }

:focus-visible {
  outline: var(--border-medium) solid var(--focus-ring);
  outline-offset: 2px;
}

hr {
  border: none;
  border-top: var(--border-thin) solid var(--border-hairline);
  margin: var(--space-6) 0;
}

/* ---- Brand helper classes ---- */
.bp-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.bp-wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  color: var(--text-strong);
}

/* A thin brass ornamental divider — the brand's signature flourish */
.bp-rule-brass {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--rule-brass);
}
.bp-rule-brass::before,
.bp-rule-brass::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}



/* ============================================================
   Belladrey Press — Components & layout (production)
   ============================================================ */

.bp-container { max-width: var(--container-wide); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---- Site header ---- */
.bp-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--paper-100) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-hairline); }
.bp-header__bar { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.bp-header__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.bp-header__brand img { height: 34px; }
.bp-header__brand .wm { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; font-size: 15px; color: var(--ink-900); white-space: nowrap; }
.bp-header__nav { display: flex; align-items: center; gap: var(--space-6); }
.bp-header__nav a { font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--ink-700); text-decoration: none; border-bottom: 1.5px solid transparent; padding: 4px 0; transition: color .15s, border-color .15s; }
.bp-header__nav a:hover, .bp-header__nav a.is-active { color: var(--wine-500); border-color: var(--wine-500); }

/* ---- Mobile menu toggle (hidden on desktop) ---- */
.bp-header__toggle { display: none; appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 8px; margin: -8px -8px -8px 0; cursor: pointer; color: var(--ink-900); }
.bp-burger, .bp-burger::before, .bp-burger::after { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.bp-burger { position: relative; }
.bp-burger::before, .bp-burger::after { content: ""; position: absolute; left: 0; }
.bp-burger::before { top: -7px; }
.bp-burger::after { top: 7px; }
.bp-header__toggle.is-open .bp-burger { background: transparent; }
.bp-header__toggle.is-open .bp-burger::before { transform: translateY(7px) rotate(45deg); }
.bp-header__toggle.is-open .bp-burger::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 640px) {
  .bp-header__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .bp-header__brand .wm { font-size: 13px; letter-spacing: 0.16em; }
  .bp-header__nav {
    display: none;
    position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper-100); border-bottom: 1px solid var(--border-hairline);
    box-shadow: 0 12px 24px -16px rgba(0,0,0,.35);
    padding: var(--space-2) var(--gutter) var(--space-4);
  }
  .bp-header__nav.is-open { display: flex; }
  .bp-header__nav a { padding: 14px 2px; font-size: 16px; border-bottom: 1px solid var(--border-hairline); }
  .bp-header__nav a:last-child { border-bottom: 0; }
  .bp-header__nav a:hover, .bp-header__nav a.is-active { border-color: var(--border-hairline); color: var(--wine-500); }
}

/* ---- Buttons ---- */
.bp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; -webkit-appearance: none; transition: background .14s, border-color .14s, color .14s, transform .14s; font-size: var(--text-body-sm); padding: 0.7rem 1.25rem; background: var(--wine-500); color: var(--text-on-wine); }
.bp-btn:hover { background: var(--wine-600); }
.bp-btn:active { transform: translateY(0.5px); }
.bp-btn--lg { font-size: var(--text-body-md); padding: 0.9rem 1.7rem; }
.bp-btn--secondary { background: transparent; color: var(--ink-900); border-color: var(--ink-900); }
.bp-btn--secondary:hover { background: var(--paper-200); }
.bp-btn--brass { background: transparent; color: var(--brass-700); border-color: var(--brass-500); }
.bp-btn--brass:hover { background: var(--brass-200); }

/* ---- Tags ---- */
.bp-tag { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-ui); font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; line-height: 1; padding: 0.4rem 0.7rem; border-radius: var(--radius-pill); border: 1px solid var(--sand-deep); color: var(--ink-700); }

/* ---- Badges ---- */
.bp-badge { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-ui); font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; line-height: 1; padding: 0.35rem 0.6rem; border-radius: var(--radius-sm); }
.bp-badge__dot { width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; }
.bp-badge--instock { background: var(--green-100); color: var(--green-500); }
.bp-badge--preorder { background: var(--amber-100); color: var(--amber-500); }
.bp-badge--soldout { background: var(--red-100); color: var(--red-500); }

/* ---- Buy links ---- */
.bp-buylink { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; text-decoration: none; font-family: var(--font-ui); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: 0.85rem 1.1rem; color: var(--ink-900); transition: border-color .14s, background .14s; }
.bp-buylink:hover { border-color: var(--wine-500); background: var(--paper-50); }
.bp-buylink__retailer { display: flex; flex-direction: column; gap: 2px; }
.bp-buylink__name { font-weight: 600; font-size: var(--text-body-sm); letter-spacing: 0.01em; }
.bp-buylink__meta { font-size: var(--text-caption); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.bp-buylink__price { display: flex; align-items: center; gap: 0.6rem; }
.bp-buylink__amount { font-family: var(--font-display); font-size: var(--text-title-md); font-weight: 600; color: var(--wine-500); }
.bp-buylink__arrow { color: var(--ink-400); display: inline-flex; transition: transform .14s, color .14s; }
.bp-buylink:hover .bp-buylink__arrow { transform: translateX(3px); color: var(--wine-500); }
.bp-buylink--inactive { cursor: default; opacity: 0.7; }
.bp-buylink--inactive:hover { border-color: var(--border-hairline); background: var(--surface-card); }
.bp-buylink--soon .bp-buylink__meta { color: var(--wine-500); }

/* ---- Book cover (photo, or typeset fallback) ---- */
.bp-cover { position: relative; aspect-ratio: 2 / 3; width: 100%; border-radius: 2px 4px 4px 2px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-book); background: var(--ink-900); }
.bp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-cover--typeset { padding: 9% 9% 8%; box-sizing: border-box; color: #F7F2E9; text-align: center; align-items: center; }
.bp-cover--typeset .bp-cover__kicker { font-family: var(--font-ui); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(247,242,233,0.7); }
.bp-cover--typeset .bp-cover__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; }
.bp-cover--typeset .bp-cover__title { font-family: var(--font-display); font-size: clamp(1.1rem, 8cqw, 2rem); font-weight: 600; line-height: 1.05; margin: 0; }
.bp-cover--typeset .bp-cover__author { font-family: var(--font-ui); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247,242,233,0.82); }

/* ---- Book card (catalog tile) ---- */
.bp-card { display: flex; flex-direction: column; gap: var(--space-4); text-decoration: none; color: inherit; width: 100%; max-width: 200px; }
.bp-card__coverwrap { transition: transform .22s var(--ease-out); }
.bp-card:hover .bp-card__coverwrap { transform: translateY(-6px); }
.bp-card__title { font-family: var(--font-display); font-size: var(--text-title-lg); font-weight: 600; line-height: 1.12; color: var(--text-strong); margin: 0; }
.bp-card__author { font-family: var(--font-serif); font-style: italic; font-size: var(--text-body-md); color: var(--text-muted); margin: 2px 0 0; }
.bp-card__price { font-family: var(--font-display); font-size: var(--text-title-md); font-weight: 600; color: var(--wine-500); margin-top: 4px; }

/* ---- Grids & sections ---- */
.bp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8) var(--space-7); justify-items: center; }
@media (max-width: 1100px) { .bp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .bp-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-5); } }
@media (max-width: 480px) { .bp-grid { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; } }
.bp-section { padding: var(--space-9) 0; }
.bp-section__head { text-align: center; margin-bottom: var(--space-7); }
.bp-section__head h1 { font-size: var(--text-display-lg); margin: 8px 0 12px; }

/* ---- Divider ---- */
.bp-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--brass-500); width: 100%; }
.bp-divider::before, .bp-divider::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.55; }
.bp-divider__mark { font-family: var(--font-display); font-size: var(--text-title-md); line-height: 1; }

/* ---- Book detail page ---- */
.bp-detail__top { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 6rem; align-items: start; padding-top: var(--space-7); }
.bp-detail__cover { position: sticky; top: 100px; }
.bp-detail__cover .frame { width: min(330px, 100%); margin: 0 auto; }
.bp-detail__cover .price { text-align: center; margin-top: var(--space-5); font-family: var(--font-display); font-size: var(--text-display-sm); font-weight: 600; color: var(--wine-500); }
.bp-detail__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bp-detail__title { font-family: var(--font-display); font-size: var(--text-display-xl); line-height: 1; font-weight: 600; letter-spacing: -0.01em; color: var(--text-strong); margin: 0 0 10px; }
.bp-detail__author { font-family: var(--font-serif); font-style: italic; font-size: var(--text-title-lg); color: var(--text-muted); margin: 0 0 18px; }
.bp-detail__meta { display: flex; align-items: center; gap: 16px; margin-bottom: var(--space-6); }
.bp-detail__blurb { font-family: var(--font-serif); font-size: var(--text-body-lg); line-height: 1.6; color: var(--text-body); max-width: 56ch; margin: 0 0 var(--space-6); }
.bp-detail__quote { border-left: 2px solid var(--brass-500); padding: 4px 0 4px 20px; margin: 0 0 var(--space-7); }
.bp-detail__quote p { font-family: var(--font-display); font-style: italic; font-size: var(--text-title-lg); line-height: 1.35; color: var(--text-strong); margin: 0 0 6px; }
.bp-detail__quote cite { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-style: normal; }
.bp-detail__buy { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-7); }
.bp-detail__buy h3 { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 16px; }
.bp-detail__buylist { display: flex; flex-direction: column; gap: 10px; }
.bp-detail__specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; margin: 0 0 var(--space-7); }
.bp-detail__spec { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--border-hairline); padding-top: 10px; }
.bp-detail__spec dt { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin: 0; }
.bp-detail__spec dd { font-family: var(--font-serif); font-size: var(--text-body-md); color: var(--text-body); margin: 0; }
.bp-detail__opening { background: var(--ink-900); color: var(--paper-100); border-radius: var(--radius-lg); padding: var(--space-7); }
.bp-detail__opening .lbl { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-400); margin: 0 0 18px; }
.bp-detail__opening p { font-family: var(--font-display); font-size: var(--text-display-sm); font-style: italic; line-height: 1.45; color: var(--paper-100); max-width: 40ch; margin: 0; letter-spacing: -0.01em; }
.bp-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none; margin: var(--space-6) 0; }
.bp-back:hover { color: var(--wine-500); }
@media (max-width: 920px) {
  .bp-detail__top { grid-template-columns: 1fr; gap: 2.5rem; }
  .bp-detail__cover { position: static; }
  .bp-detail__cover .frame { width: 220px; }
  .bp-detail__title { font-size: var(--text-display-lg); }
}

/* ---- Footer ---- */
.bp-footer { background: var(--ink-900); color: var(--paper-100); margin-top: var(--space-10); }
.bp-footer__inner { max-width: var(--container-wide); margin: 0 auto; padding: var(--space-8) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.bp-footer img { height: 28px; }
.bp-footer span { font-family: var(--font-ui); font-size: 12px; color: rgba(247,242,233,0.55); }