/* =========================================================================
   IAP Press — Design System
   Faithful implementation of brief §6. In the production WordPress build
   these tokens live in theme.json global styles (§8.1, hard requirement:
   no page-level colour overrides). Here they are CSS custom properties on
   :root, and every rule resolves colour to a token — no off-palette values.
   ========================================================================= */

/* --- 6.1 Colour tokens ------------------------------------------------- */
:root {
  --ink:            #0B0B0C;   /* page background, deepest surface        */
  --surface:        #141517;   /* cards, panels, elevated sections         */
  --surface-raised: #1D1F22;   /* hover states, modals, sticky bars        */
  --smoke:          #2B2E33;   /* dividers, borders, quiet fills           */
  --smoke-light:    #4A4F57;   /* disabled states, tertiary text           */
  --silver:         #C4CAD1;   /* body copy, secondary text                */
  --white:          #FFFFFF;   /* headings, primary text, active states    */
  --highlight:      #12AECF;   /* buttons, links, active filters, accents  */
  --highlight-deep: #0D8AA6;   /* button hover, pressed states             */
  --highlight-wash: rgba(18,174,207,0.10); /* tinted panels, quote bg      */

  /* --- 6.3 Layout & space --- */
  --container: 1280px;
  --reading:   1140px;
  --gutter:    32px;
  --rhythm:    120px;   /* vertical rhythm between major sections          */
  --radius-btn: 4px;
  --radius-card: 8px;

  /* type families (6.2) */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* --- reset-ish --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--silver);
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* Body 17px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--highlight); text-decoration: none; }

/* --- 6.2 Typography scale --------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--white); margin: 0 0 .4em; font-weight: 300; }
.display { font-size: 4rem;    font-weight: 300; line-height: 1.05; letter-spacing: .01em; color: var(--white); }
h1, .h1  { font-size: 3rem;    font-weight: 300; line-height: 1.1; }
h2, .h2  { font-size: 2rem;    font-weight: 600; line-height: 1.15; }
h3, .h3  { font-size: 1.375rem; font-weight: 500; line-height: 1.25; }
.body-lg { font-size: 1.25rem; line-height: 1.6; color: var(--silver); }
.meta    { font-size: .875rem; font-weight: 500; color: var(--smoke-light); }
.eyebrow {
  font-family: var(--font-body);
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--highlight); margin: 0 0 .75rem;
}
p { max-width: 70ch; }           /* max measure 70 characters */

/* --- links & focus (6.4) ---------------------------------------------- */
.textlink, .prose a {
  color: var(--highlight);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .15s ease;
}
.textlink:hover, .prose a:hover { color: var(--white); }
:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
  border-radius: 2px;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem;
  background: var(--highlight); color: var(--ink);
  padding: .6rem 1rem; border-radius: var(--radius-btn); font-weight: 700; z-index: 200;
  transition: top .15s ease;
}
.skip-link:focus { top: 1rem; }

/* --- layout helpers ---------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.reading   { max-width: var(--reading); }
.section   { padding-block: calc(var(--rhythm) / 2); }
.section--lg { padding-block: var(--rhythm); }
.divider { border: 0; border-top: 1px solid var(--smoke); margin: 0; }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; }

/* --- buttons (6.4) ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-size: 1rem; font-weight: 500;
  padding: 14px 26px; border-radius: var(--radius-btn);
  cursor: pointer; border: 1px solid transparent; transition: all .15s ease;
  text-decoration: none; line-height: 1;
}
.btn--primary { background: var(--highlight); color: var(--ink); font-weight: 700; }
.btn--primary:hover { background: var(--highlight-deep); color: var(--ink); }
.btn--secondary { background: transparent; border-color: var(--silver); color: var(--silver); }
.btn--secondary:hover { border-color: var(--white); color: var(--white); }
.btn--sm { padding: 9px 16px; font-size: .9rem; }
.btn svg { width: 1em; height: 1em; }

/* --- header / nav (4.2) ------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11,11,12,.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--smoke);
}
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; height: 76px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 40px; width: auto; }
.mainnav { display: flex; gap: 1.5rem; margin-left: auto; }
.mainnav a {
  color: var(--silver); font-size: .95rem; font-weight: 500; padding: .4rem 0;
  position: relative; transition: color .15s ease;
}
.mainnav a:hover, .mainnav a[aria-current="page"] { color: var(--white); }
.mainnav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--highlight);
}
.header-actions { display: flex; align-items: center; gap: 1rem; }
.icon-btn {
  background: transparent; border: 0; color: var(--silver); cursor: pointer;
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-btn);
}
.icon-btn:hover { color: var(--white); background: var(--surface); }
.icon-btn svg { width: 20px; height: 20px; }
.nav-toggle { display: none; }

/* --- mobile overlay menu (4.2) ---------------------------------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 150; background: var(--ink);
  display: flex; flex-direction: column; padding: 1.5rem var(--gutter) 2rem;
  transform: translateY(-100%); transition: transform .25s ease; visibility: hidden;
}
.mobile-menu.open { transform: translateY(0); visibility: visible; }
.mobile-menu__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.mobile-menu__search { margin-bottom: 1.5rem; }
.mobile-menu nav { display: flex; flex-direction: column; gap: .25rem; }
.mobile-menu nav a {
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 300; color: var(--white);
  padding: .5rem 0; border-bottom: 1px solid var(--smoke);
}
.mobile-menu__amazon { margin-top: auto; padding-top: 1.5rem; }
.mobile-menu__amazon .btn { width: 100%; justify-content: center; }

/* --- search field ------------------------------------------------------ */
.search-field { display: flex; gap: .5rem; }
input[type="search"], input[type="email"], input[type="text"], select, textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--smoke);
  color: var(--white); font-family: var(--font-body); font-size: 1rem;
  padding: 12px 14px; border-radius: var(--radius-btn);
}
input::placeholder, textarea::placeholder { color: var(--smoke-light); }
label { display: block; color: var(--silver); font-size: .9rem; font-weight: 500; margin-bottom: .4rem; }

/* --- book card (6.4) --------------------------------------------------- */
.book-grid { display: grid; gap: 2rem 1.75rem; grid-template-columns: repeat(4, 1fr); }
.book-grid--3 { grid-template-columns: repeat(3, 1fr); }
.book-card { position: relative; text-align: center; }
.book-card a.cover-link { display: block; margin-bottom: 10px; }
.book-card .cover-wrap {
  aspect-ratio: 2 / 3; overflow: hidden; background: var(--surface);
  transition: transform .18s ease; will-change: transform;
}
.book-card .cover-wrap img { width: 100%; height: 100%; object-fit: cover;
  box-shadow: 0 14px 30px rgba(0,0,0,.55); }
.book-card:hover .cover-wrap { transform: translateY(-4px); }
.book-card__title {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--white);
  margin: .9rem 0 .1rem; line-height: 1.2; display: inline; background-image: linear-gradient(var(--highlight),var(--highlight));
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .2s ease;
}
.book-card:hover .book-card__title { background-size: 100% 1px; }
.book-card__author { color: var(--silver); font-size: .95rem; margin: .2rem 0 0; }
.book-card__author a { color: var(--silver); }
.book-card__author a:hover { color: var(--white); }
.series-badge {
  display: inline-block; margin-top: .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; background: var(--highlight-wash); color: var(--highlight);
  padding: .25rem .5rem; border-radius: 2px;
}
.book-card__meta { color: var(--smoke-light); font-size: .8rem; margin-top: .35rem; }
/* --- "Coming Soon" button overlaid on the cover ----------------------- */
.cover-wrap { position: relative; }
.cover-ribbon {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  background: var(--highlight); color: var(--ink);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .45rem .9rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.55); z-index: 2;
}
.book-card:hover .cover-ribbon { background: var(--highlight-deep); }

/* branded placeholder shown only until the real cover file is added */
.cover-soon {
  aspect-ratio: 2 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; text-align: center; padding: 1.25rem; background:
    radial-gradient(120% 90% at 50% 0%, var(--surface-raised), var(--surface) 70%);
  border: 1px solid var(--smoke); box-shadow: 0 14px 30px rgba(0,0,0,.55);
}
.cover-soon__eyebrow { font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--smoke-light); }
.cover-soon__title { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; line-height: 1.15; color: var(--white); }
.book-hero__cover .cover-wrap { width: 100%; }
.book-hero__cover .cover-wrap img { width: 100%; box-shadow: 0 24px 50px rgba(0,0,0,.6); }
.book-hero__cover .cover-ribbon { bottom: 16px; font-size: .8rem; padding: .55rem 1.1rem; }

/* disabled CTA (Coming Soon) */
.btn.is-disabled { background: var(--smoke); color: var(--silver); cursor: default; pointer-events: none; border-color: var(--smoke); }

/* small "Soon" thumbnails (sticky bar, practitioner rows) */
.buy-bar__thumb-soon, .prac-thumb-soon {
  display: inline-grid; place-items: center; background: var(--surface); border: 1px solid var(--smoke);
  color: var(--highlight); font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.buy-bar__thumb-soon { height: 48px; width: 34px; }
.prac-thumb-soon { width: 90px; aspect-ratio: 2/3; }
.specs--soon { color: var(--highlight) !important; font-weight: 600; }

/* horizontal scroll row (home new releases, series covers) */
.cover-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 1.5rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; }
.cover-row::-webkit-scrollbar { height: 8px; }
.cover-row::-webkit-scrollbar-thumb { background: var(--smoke); border-radius: 4px; }
.cover-row > * { scroll-snap-align: start; }

/* --- cards / panels ---------------------------------------------------- */
.panel { background: var(--surface); border: 1px solid var(--smoke); border-radius: var(--radius-card); padding: 2rem; }
.card { background: var(--surface); border: 1px solid var(--smoke); border-radius: var(--radius-card); overflow: hidden; transition: border-color .15s ease; }
.card:hover { border-color: var(--smoke-light); }

/* --- quote card (6.4) -------------------------------------------------- */
.quote-card {
  background: var(--highlight-wash); border-left: 3px solid var(--highlight);
  padding: 1.5rem 1.75rem; border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.quote-card blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--white); }
.quote-card cite { display: block; margin-top: .9rem; font-family: var(--font-body); font-style: normal; font-size: .9rem; color: var(--silver); }
.quote-card cite strong { color: var(--white); font-weight: 600; }

/* --- filter chips (6.4) ------------------------------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: .4rem; background: var(--smoke); color: var(--silver);
  border: 0; font-family: var(--font-body); font-size: .85rem; font-weight: 500;
  padding: .5rem .85rem; border-radius: 999px; cursor: pointer; transition: all .15s ease;
}
.chip:hover { color: var(--white); }
.chip.active, .chip[aria-pressed="true"] { background: var(--highlight); color: var(--ink); font-weight: 700; }

/* --- hero (5.1) -------------------------------------------------------- */
.hero { background: var(--ink); position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding-block: 5rem; }
.hero__cover { justify-self: center; max-width: 340px; }
.hero__cover img { box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.hero h1 { font-size: 3rem; margin: .3rem 0 1rem; }
.hero__hook { font-size: 1.25rem; color: var(--silver); }
.hero__desc { color: var(--silver); }
.hero__actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; flex-wrap: wrap; }
.hero__nav { display: flex; gap: .5rem; margin-top: 2rem; }

/* --- split banner: two kinds of reader (5.1.3) ------------------------ */
.two-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--smoke); border: 1px solid var(--smoke); border-radius: var(--radius-card); overflow: hidden; }
.two-kinds__panel { background: var(--surface); padding: 3rem; }
.two-kinds__panel:hover { background: var(--surface-raised); }
.two-kinds__panel h3 { font-size: 1.75rem; }

/* --- subject grid (5.1.5 / 5.7) --------------------------------------- */
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tile {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: var(--surface); border: 1px solid var(--smoke); border-radius: var(--radius-card);
  padding: 1.1rem 1.25rem; color: var(--silver); font-weight: 500; transition: all .15s ease;
}
.tile:hover { border-color: var(--highlight); color: var(--white); background: var(--surface-raised); }
.tile:hover .tile__arrow { color: var(--highlight); transform: translateX(3px); }
.tile__arrow { color: var(--smoke-light); transition: all .15s ease; }
.tile--lg { flex-direction: column; align-items: flex-start; min-height: 150px; justify-content: space-between; padding: 1.5rem; }
.tile--lg .tile__label { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; color: var(--white); }

/* --- article cards (5.8) ---------------------------------------------- */
.article-card__img { aspect-ratio: 16/10; background: var(--surface-raised); overflow: hidden; }
.article-card__img svg, .article-card__img img { width: 100%; height: 100%; object-fit: cover; }
.article-card__body { padding: 1.25rem 1.4rem 1.5rem; }
.article-card h3 { font-size: 1.3rem; margin: .4rem 0 .5rem; }
.article-card h3 a { color: var(--white); }
.article-card:hover h3 a { color: var(--highlight); }
.article-card p { font-size: .95rem; color: var(--silver); }

/* --- newsletter block (5.1.8) ----------------------------------------- */
.newsletter { background: var(--surface); border-top: 1px solid var(--smoke); border-bottom: 1px solid var(--smoke); }
.newsletter__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; padding-block: 4rem; }
.newsletter form { display: flex; gap: .75rem; }
.newsletter form input { flex: 1; }
.newsletter__note { font-size: .8rem; color: var(--smoke-light); margin-top: .75rem; }
.newsletter--accent { position: relative; }
.newsletter--accent::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--highlight); }

/* --- credibility row (5.1.7) ------------------------------------------ */
.cred-row { display: flex; gap: 3rem; flex-wrap: wrap; margin-top: 2rem; }
.cred-row .num { font-family: var(--font-display); font-size: 2.5rem; font-weight: 300; color: var(--highlight); line-height: 1; }
.cred-row .lbl { font-size: .85rem; color: var(--silver); margin-top: .35rem; }

/* --- breadcrumbs (9.4) ------------------------------------------------- */
.breadcrumbs { font-size: .8rem; color: var(--smoke-light); padding-block: 1rem; }
.breadcrumbs a { color: var(--silver); }
.breadcrumbs a:hover { color: var(--white); }
.breadcrumbs span[aria-current] { color: var(--smoke-light); }

/* =========================================================================
   BOOK DETAIL TEMPLATE (5.3) — the conversion template
   ========================================================================= */
.book-hero { display: grid; grid-template-columns: 360px 1fr; gap: 4rem; padding-top: 2rem; align-items: start; }
.book-hero__cover img { box-shadow: 0 24px 50px rgba(0,0,0,.6); width: 100%; }
.format-chips { display: flex; gap: .5rem; margin-top: 1.25rem; flex-wrap: wrap; }
.format-chip {
  background: var(--surface); border: 1px solid var(--smoke); color: var(--silver);
  padding: .5rem .85rem; border-radius: var(--radius-btn); font-size: .85rem; cursor: pointer; font-weight: 500;
  transition: all .15s ease;
}
.format-chip:hover { border-color: var(--smoke-light); color: var(--white); }
.format-chip.active { border-color: var(--highlight); background: var(--highlight-wash); color: var(--highlight); }
.book-hero h1 { font-size: 3rem; margin: .5rem 0 .3rem; }
.book-hero__subtitle { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; color: var(--silver); font-style: italic; margin-bottom: 1rem; }
.book-hero__author { font-size: 1.05rem; margin-bottom: 1.5rem; }
.book-hero__hook { font-size: 1.4rem; line-height: 1.4; color: var(--white); font-family: var(--font-display); font-weight: 300; margin-bottom: 2rem; }
.buy-note { font-size: .8rem; color: var(--smoke-light); margin-top: .75rem; max-width: 46ch; }
.buy-note a { color: var(--silver); }

/* quick facts (5.3.2) */
.quick-facts { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--smoke); border-bottom: 1px solid var(--smoke); margin-block: 3rem; }
.quick-facts div { padding: 1.25rem 1.75rem 1.25rem 0; margin-right: 1.75rem; border-right: 1px solid var(--smoke); }
.quick-facts div:last-child { border-right: 0; }
.quick-facts dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--smoke-light); font-weight: 700; }
.quick-facts dd { margin: .3rem 0 0; color: var(--white); font-size: .95rem; }

/* who it is for (5.3.4) */
.who-for { background: var(--highlight-wash); border-radius: var(--radius-card); padding: 2rem 2.25rem; }
.who-for ul { margin: 1rem 0 0; padding: 0; list-style: none; }
.who-for li { position: relative; padding-left: 1.75rem; margin-bottom: .75rem; color: var(--silver); max-width: 68ch; }
.who-for li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--highlight); border-radius: 2px; }

/* table of contents (5.3.5) */
.toc-list { list-style: none; margin: 1rem 0 0; padding: 0; column-count: 2; column-gap: 3rem; }
.toc-list li { break-inside: avoid; padding: .5rem 0; border-bottom: 1px solid var(--smoke); color: var(--silver); }
details.toc > summary { cursor: pointer; color: var(--highlight); font-weight: 500; list-style: none; padding: .5rem 0; }
details.toc > summary::-webkit-details-marker { display: none; }

/* series band (5.3.8 / 5.4) */
.series-band { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); gap: 1.25rem; overflow-x: auto; padding-bottom: 1rem; }
.series-band .this-title .cover-wrap { outline: 2px solid var(--highlight); outline-offset: 3px; }
.series-band .this-title .book-card__meta { color: var(--highlight); }

/* sticky buy bar (5.3.10) — REQUIRED FEATURE */
.buy-bar {
  position: fixed; left: 0; right: 0; z-index: 90; background: var(--surface-raised);
  border-top: 1px solid var(--smoke); box-shadow: 0 -8px 24px rgba(0,0,0,.4);
  transform: translateY(100%); transition: transform .25s ease; bottom: 0;
}
.buy-bar.visible { transform: translateY(0); }
.buy-bar__inner { display: flex; align-items: center; gap: 1rem; padding: .75rem var(--gutter); max-width: var(--container); margin-inline: auto; }
.buy-bar img { height: 48px; width: auto; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.buy-bar__title { flex: 1; min-width: 0; }
.buy-bar__title strong { color: var(--white); font-weight: 600; display: block; font-family: var(--font-display); font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buy-bar__title span { font-size: .8rem; color: var(--silver); }
.disclosure-inline { font-size: .75rem; color: var(--smoke-light); }

/* =========================================================================
   PROSE (article & long-form, 5.8)
   ========================================================================= */
.prose { max-width: 68ch; margin-inline: auto; }
.prose p { font-size: 1.15rem; line-height: 1.75; color: var(--silver); margin: 0 0 1.5rem; max-width: none; }
.prose h2 { margin-top: 2.5rem; }
.prose .pullquote { font-family: var(--font-display); font-size: 1.7rem; font-style: italic; color: var(--highlight); line-height: 1.35; border: 0; padding: 1.5rem 0; margin: 1.5rem 0; }
.inline-book { display: flex; gap: 1.25rem; align-items: center; background: var(--surface); border: 1px solid var(--smoke); border-left: 3px solid var(--highlight); border-radius: var(--radius-card); padding: 1.25rem; margin: 2rem 0; }
.inline-book img { width: 70px; flex-shrink: 0; box-shadow: 0 8px 18px rgba(0,0,0,.5); }
.inline-book__body { flex: 1; }
.inline-book__body .eyebrow { margin-bottom: .25rem; }
.inline-book__body h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--white); margin: 0 0 .5rem; }

.byline { display: flex; align-items: center; gap: .85rem; margin: 1.5rem 0; }
.byline img { width: 48px; height: 48px; border-radius: 50%; }
.byline .meta { margin: 0; }
.byline strong { color: var(--white); }

/* --- practitioner rows (5.6) ------------------------------------------ */
.prac-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 1.5rem; align-items: start; padding: 1.75rem 0; border-bottom: 1px solid var(--smoke); }
.prac-row img { width: 90px; box-shadow: 0 8px 18px rgba(0,0,0,.5); }
.prac-row h3 { font-size: 1.4rem; margin: 0 0 .15rem; }
.prac-row .specs { font-size: .82rem; color: var(--smoke-light); margin-top: .75rem; }
.prac-row__buy { text-align: right; white-space: nowrap; }

/* --- author detail ----------------------------------------------------- */
.author-hero { display: grid; grid-template-columns: 240px 1fr; gap: 3rem; align-items: start; }
.author-hero img { width: 240px; border-radius: var(--radius-card); }
.author-hero .credentials { color: var(--highlight); font-weight: 500; font-size: 1rem; }
.authors-index-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.75rem; }
.author-cell { text-align: center; }
.author-cell img { border-radius: var(--radius-card); margin-bottom: .85rem; }
.author-cell h3 { font-size: 1.2rem; margin: 0; }
.author-cell h3 a { color: var(--white); }
.author-cell:hover h3 a { color: var(--highlight); }
.author-cell .meta { margin-top: .2rem; }

/* --- footer (4.3) ------------------------------------------------------ */
.site-footer { background: var(--surface); border-top: 1px solid var(--smoke); margin-top: var(--rhythm); }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; padding-block: 4rem 3rem; }
.footer-cols h4 { font-family: var(--font-body); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--smoke-light); font-weight: 700; margin-bottom: 1.1rem; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: .6rem; }
.footer-cols a { color: var(--silver); font-size: .92rem; }
.footer-cols a:hover { color: var(--white); }
.footer-social { display: flex; gap: .75rem; margin-top: 1rem; }
.footer-social a { width: 34px; height: 34px; border: 1px solid var(--smoke); border-radius: 50%; display: grid; place-items: center; color: var(--silver); }
.footer-social a:hover { border-color: var(--highlight); color: var(--highlight); }
.footer-base { border-top: 1px solid var(--smoke); padding-block: 1.75rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; }
.footer-base__links { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; }
.footer-base__links a, .footer-base p { color: var(--smoke-light); font-size: .8rem; }
.footer-base__links a:hover { color: var(--silver); }
.footer-imprint { color: var(--smoke-light); font-size: .8rem; max-width: 60ch; margin-top: .5rem; }

/* --- misc -------------------------------------------------------------- */
.tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--highlight); }
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--silver); }
.notice { background: var(--highlight-wash); border: 1px solid var(--smoke); border-left: 3px solid var(--highlight); border-radius: var(--radius-card); padding: 1.25rem 1.5rem; color: var(--silver); font-size: .95rem; }
.count-pill { color: var(--smoke-light); font-size: 1rem; font-family: var(--font-body); font-weight: 400; }
.filter-bar { position: sticky; top: 76px; z-index: 50; background: rgba(11,11,12,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--smoke); padding-block: 1rem; }
.filter-bar__inner { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.filter-group { display: flex; flex-direction: column; gap: .2rem; }
.filter-group label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--smoke-light); margin: 0; }
.filter-group select { min-width: 150px; padding: 8px 12px; font-size: .9rem; }
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(200%); background: var(--surface-raised); border: 1px solid var(--highlight); color: var(--white); padding: 1rem 1.5rem; border-radius: var(--radius-btn); z-index: 300; transition: transform .3s ease; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.toast.show { transform: translateX(-50%) translateY(0); }

.page-header { padding-block: 3rem 1rem; }
.page-header .display { margin: .5rem 0; }
.lede { font-size: 1.25rem; color: var(--silver); max-width: 60ch; }

/* form layout */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-grid .full { grid-column: 1 / -1; }
.field { margin-bottom: 1.25rem; }

/* =========================================================================
   RESPONSIVE (9.2) — breakpoints at 480 / 768 / 1024 / 1280
   Mobile-first sizing reduces display & H1 ~40% (6.2)
   ========================================================================= */
@media (max-width: 1024px) {
  .book-grid { grid-template-columns: repeat(3, 1fr); }
  .authors-index-grid, .tile-grid { grid-template-columns: repeat(3, 1fr); }
  .hero__grid { gap: 2.5rem; }
  .book-hero { grid-template-columns: 300px 1fr; gap: 2.5rem; }
}
@media (max-width: 768px) {
  :root { --gutter: 20px; --rhythm: 72px; }
  .display { font-size: 2.4rem; }
  h1, .h1, .hero h1, .book-hero h1 { font-size: 2rem; }
  h2, .h2 { font-size: 1.6rem; }
  .mainnav, .header-actions .desktop-only { display: none; }
  .nav-toggle { display: grid; }
  .hero__grid { grid-template-columns: 1fr; padding-block: 2.5rem; text-align: left; }
  .hero__cover { max-width: 240px; grid-row: 1; }
  .two-kinds, .newsletter__inner, .book-hero, .author-hero, .form-grid { grid-template-columns: 1fr; }
  .book-hero__cover { max-width: 260px; }
  .book-grid, .book-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .authors-index-grid, .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .toc-list { column-count: 1; }
  .prac-row { grid-template-columns: 70px 1fr; }
  .prac-row__buy { grid-column: 1 / -1; text-align: left; margin-top: .5rem; }
  .prac-row img { width: 70px; }
  .quick-facts div { border-right: 0; padding: .75rem 0; margin-right: 0; width: 50%; }
  .newsletter form { flex-direction: column; }
  .two-kinds__panel { padding: 2rem; }
  .author-hero img { width: 160px; }
  .cred-row { gap: 1.5rem; }
  /* sticky buy bar stays bottom on mobile (mandatory) */
}
@media (max-width: 480px) {
  .book-grid, .book-grid--3, .tile-grid, .authors-index-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: 1fr; }
  .quick-facts div { width: 100%; }
}

/* desktop: sticky buy bar fixes to TOP, just below the header (5.3.10) */
@media (min-width: 769px) {
  .buy-bar { bottom: auto; top: 76px; z-index: 89; border-top: 0; border-bottom: 1px solid var(--smoke); box-shadow: 0 8px 24px rgba(0,0,0,.4); transform: translateY(-200%); }
  .buy-bar.visible { transform: translateY(0); }
}