/* Local Authors Only — site styles.
   Our own look (not the old Jottful site's): warm paper + deep navy + brick
   red, serif display headings over system-sans prose, full-width alternating
   bands on home. The platform only cares about [data-edit] wrappers, not CSS. */

:root {
  --ink: #212b36;        /* body text */
  --ink-soft: #52606f;   /* secondary text */
  --navy: #24405f;       /* headings, outlines */
  --navy-deep: #16283d;  /* dark bands (phone CTA, footer) */
  --paper: #f7f3eb;      /* warm cream band */
  --parchment: #f1e9d7;  /* declaration band */
  --accent: #b23f2e;     /* brick red — buttons, links */
  --accent-deep: #8e2f21;
  --gold: #c9a227;       /* small flourishes */
  --line: #e5e1d8;       /* hairlines */
  --font-display: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --font-body: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
/* The hidden attribute must always win — display rules on the same element
   (e.g. .book-card { display:flex }) otherwise override the UA default and
   "hidden" cards keep rendering (the directory filter relies on this). */
[hidden] { display: none !important; }
/* Reserve the scrollbar gutter so layout doesn't shift when page height
   crosses the viewport (e.g. the editor swapping expanded shortcodes for
   raw text, or images loading in). */
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  font: 17px/1.65 var(--font-body);
  color: var(--ink);
  background: #fff;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 16px;
}
h1 { font-size: clamp(30px, 4.5vw, 42px); }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: clamp(19px, 2.2vw, 23px); }

a { color: var(--accent); }
a:hover { color: var(--accent-deep); }

img { max-width: 100%; height: auto; }

/* --- Layout primitives ------------------------------------------------- */
.container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}
.container-prose { max-width: 780px; }
.container-video { max-width: 880px; }
.center { text-align: center; }

/* Inner (non-home) pages: one .page wrapper per template. */
.page { padding-block: clamp(36px, 6vw, 64px); }
.page > :first-child { margin-top: 0; }
.page section { margin-block: 36px; }
.page section:first-child { margin-top: 0; }

/* Home is built from full-width bands. */
.band { padding-block: clamp(44px, 7vw, 84px); }
.band-paper { background: var(--paper); }
.band-ink { background: var(--navy-deep); }
.band-accent { background: linear-gradient(115deg, var(--accent-deep), var(--accent)); }
.band-slim { padding-block: clamp(32px, 5vw, 56px); }

.section-title { margin: 0 0 20px; }
/* The big display titles run in caps (like the origin site's headings) —
   done here so content stays normally-cased text. Book/author names and
   in-prose bold subheads stay untouched. */
.section-title, .cta-title, .hero-title,
.page-head h1, .directory-head h1, .contact-head h1 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.rule-under::after {
  content: '';
  display: block;
  width: 64px; height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin: 16px auto 0;
}
.band-ink .section-title, .band-accent .section-title { color: #fff; }

/* --- Prose (region content) -------------------------------------------- */
/* [[img:…]] shortcode output can float; flow-root keeps floated figures
   contained inside their own editable region. */
[data-edit] { display: flow-root; }

.prose p { margin: 0.9em 0; }
.prose > p:first-child, .prose > ul:first-child { margin-top: 0; }
.prose > p:last-child, .prose > ul:last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0.9em 0; padding-left: 1.4em; }
.prose li { margin: 0.4em 0; }
.prose blockquote {
  margin: 1.2em 0;
  padding: 6px 0 6px 20px;
  border-left: 3px solid var(--gold);
  color: var(--ink-soft);
  font-style: italic;
}
.prose a { text-decoration: underline; text-underline-offset: 2px; }

.band-ink .prose { color: rgba(255, 255, 255, 0.88); }
/* Content links only — scoped so .btn-* text colors on dark bands win
   (a bare `.band-accent a` outranks .btn-light and blanked its label). */
.band-ink .prose a, .band-accent .prose a, .band-accent .cta-sub a { color: #fff; }
.band-accent .cta-sub { color: rgba(255, 255, 255, 0.94); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  font: 600 16px/1.2 var(--font-body);
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-lg { padding: 15px 30px; font-size: 17px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); color: #fff; }
.btn-light { background: #fff; color: var(--accent-deep); }
.btn-light:hover { background: var(--paper); color: var(--accent-deep); }
.btn-dark { background: var(--navy-deep); color: #fff; }
.btn-dark:hover { background: var(--navy); color: #fff; }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-outline-light { border-color: rgba(255, 255, 255, 0.75); color: #fff; background: transparent; }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 26px;
}

/* --- Header ------------------------------------------------------------- */
.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.site-header-inner {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px 24px;
  padding-block: 14px;
}
.brand {
  font: 700 22px/1.2 var(--font-display);
  color: var(--navy);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.brand:hover { color: var(--navy); }
.site-header nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-header nav a {
  font: 600 13px/1 var(--font-body);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 0 6px;
  border-bottom: 2px solid transparent;
}
.site-header nav a:hover { color: var(--accent); border-color: var(--accent); }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.85);
  padding-block: 40px;
  text-align: center;
  font-size: 15px;
}
.site-footer a { color: #fff; }
.footer-info p { margin: 6px 0; }
.footer-legal { margin: 20px 0 0; font-size: 13.5px; opacity: 0.7; }
.site-footer .admin-link { color: inherit; }

/* --- Hero carousel ------------------------------------------------------ */
/* Slides share one grid cell, so the tallest slide sets the height and a
   fade never reflows the page. Inactive slides are inert (script-toggled). */
.hero-carousel {
  display: grid;
  position: relative;
  background: var(--navy-deep);
  overflow: hidden;
}
.hero-slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s 0.7s;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease;
  z-index: 1;
}
.hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-slide::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(13, 23, 38, 0.88) 0%, rgba(13, 23, 38, 0.62) 55%, rgba(13, 23, 38, 0.34) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(56px, 10vw, 110px) clamp(76px, 12vw, 130px);
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.6vw, 50px);
  line-height: 1.12;
  color: #fff;
  max-width: 21ch;
  margin: 0 0 14px;
  text-wrap: balance;
}
.hero-sub {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(16px, 2vw, 19px);
  max-width: 58ch;
  margin-bottom: 26px;
}
.hero-sub p { margin: 0.5em 0; }
.hero-dots {
  position: absolute;
  bottom: 22px; left: 50%;
  translate: -50%;
  display: flex; gap: 12px;
  z-index: 2;
}
.hero-dot {
  width: 12px; height: 12px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.hero-dot.is-active { background: #fff; }
/* Single-slide page heroes (about) sit a bit shorter than the carousel. */
.page-hero .hero-inner { padding-block: clamp(48px, 8vw, 88px); }

/* --- Video hero (home) -------------------------------------------------- */
/* Video leads, what it's about sits beside it, the pair stacks when there
   isn't room. There is no photo underneath, so the scrim the photo slides
   need would only mute the text — it goes. */
.hero-video-carousel .hero-slide::after { content: none; }
.hero-video-carousel .hero-inner {
  padding-block: clamp(36px, 5vw, 64px) clamp(62px, 8vw, 92px);
}
.hero-split {
  display: grid;
  gap: clamp(22px, 4vw, 48px);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
}
.hero-video, .hero-copy { min-width: 0; }
/* The region's content is a paragraph holding the [[youtube]] shortcode; the
   expanded embed is what should carry the spacing, not the paragraph. */
.hero-video p { margin: 0; }
.hero-video .ws-video {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}
.hero-video-carousel .hero-title { font-size: clamp(23px, 3.1vw, 37px); max-width: 24ch; }
.hero-video-carousel .hero-sub { font-size: clamp(15px, 1.6vw, 18px); margin-bottom: 22px; }

.hero-arrow {
  position: absolute; top: 50%; translate: 0 -50%;
  z-index: 2;
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  font: 26px/1 var(--font-body);
  color: #fff;
  background: rgba(13, 23, 38, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  cursor: pointer;
}
.hero-arrow:hover { background: rgba(13, 23, 38, 0.85); }
.hero-prev { left: clamp(6px, 1.5vw, 16px); }
.hero-next { right: clamp(6px, 1.5vw, 16px); }

@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; }
}
/* Below this the arrows would sit on top of the video they're meant to
   navigate away from; the dots still do the job. */
@media (max-width: 700px) {
  .hero-arrow { display: none; }
}

/* --- Text + photo split grids (home intro/impact, about, tutorials) ----- */
.split {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.split-right { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); }
/* Wider media column, image leading — the About "Our Founder" treatment. */
.split-left { grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); }
/* Media column wide enough for a 16:9 video, not just a portrait promo card
   — the home intro's slot takes either. */
.split-media-wide { grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); }
.split-media { position: sticky; top: 32px; }
.split-media .ws-img, .split-media .ws-video { margin: 0; }
.split-media p { margin: 0; }
.split-media .ws-img img {
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(22, 40, 61, 0.1);
  background: #fff;
}
@media (max-width: 860px) {
  .split-right, .split-left, .split-media-wide { grid-template-columns: 1fr; }
  .split-media { position: static; max-width: 340px; margin-inline: auto; }
  /* A stacked video wants the full column, unlike a promo card. */
  .split-media-wide .split-media { max-width: none; }
}

/* --- Home bands --------------------------------------------------------- */

.phone-band .btn-row { margin-top: 30px; }

.services-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
}
.service-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 28px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(22, 40, 61, 0.06);
  text-align: center;
  font: 600 15px/1.4 var(--font-body);
  color: var(--navy);
  transition: box-shadow 0.15s, translate 0.15s;
}
.service-card:hover { box-shadow: 0 6px 16px rgba(22, 40, 61, 0.12); translate: 0 -2px; }
.service-card svg { width: 44px; height: 44px; color: var(--accent); }

/* Icon + heading + one-liner cards (tutorials "How You Can Help"). */
.pillar-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 36px 0 0;
  padding: 0;
}
.pillar-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(22, 40, 61, 0.06);
  padding: 30px 24px;
  text-align: center;
}
.pillar-card svg { width: 44px; height: 44px; color: var(--accent); margin-bottom: 10px; }
.pillar-card h3 { margin: 0 0 8px; }
.pillar-card .prose { color: var(--ink-soft); font-size: 15.5px; }

/* Testimonial quotes (tutorials) — bigger serif voice on parchment. */
.testimonial-quotes blockquote {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.7;
}

.featured-more { margin: 32px 0 0; }
.note-strip {
  max-width: 720px;
  margin: 36px auto 0;
  padding: 14px 20px;
  background: #fff;
  border-left: 4px solid var(--gold);
  border-radius: 0 10px 10px 0;
  box-shadow: 0 1px 3px rgba(22, 40, 61, 0.08);
  color: var(--ink-soft);
}
.note-strip p { margin: 0.4em 0; }

.impact-band .prose { color: var(--ink-soft); }
.impact-band .prose strong { color: var(--ink); }

.declaration-band {
  background: var(--parchment);
  border-block: 1px solid #e0d3b4;
}
.prose-declaration {
  font-family: var(--font-display);
  font-size: 18.5px;
  line-height: 1.75;
}
/* Drop cap on the opening paragraph (the first <p> is the italic date line). */
.prose-declaration > p:nth-of-type(2)::first-letter {
  font-size: 3.3em;
  float: left;
  line-height: 0.82;
  padding: 4px 8px 0 0;
  color: var(--accent);
}
.declaration-permalink { margin-top: 30px; }

.cta-band { text-align: center; }
.cta-title {
  color: #fff;
  font-size: clamp(26px, 3.6vw, 40px);
  max-width: 28ch;
  margin: 0 auto 12px;
  text-wrap: balance;
}
.cta-sub { font-size: 18px; max-width: 56ch; margin-inline: auto; }
.cta-sub p { margin: 0; }

/* --- Shortcode output ([[youtube]], [[img]]) ---------------------------- */
.ws-video { position: relative; aspect-ratio: 16 / 9; margin: 16px 0; }
.ws-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.container-video .ws-video {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(22, 40, 61, 0.16);
}

figure.ws-img { margin: 16px 0; }
.ws-img img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.ws-img figcaption { font: 14px/1.5 var(--font-body); color: var(--ink-soft); margin-top: 6px; }
figure.ws-img-left { float: left; max-width: min(45%, 320px); margin: 6px 24px 20px 0; }
figure.ws-img-right { float: right; max-width: min(45%, 320px); margin: 6px 0 20px 24px; }
.ws-img-full { max-width: 100%; margin: 24px 0; }

/* --- Catalog: directory + cards ---------------------------------------- */
.directory-head { margin-bottom: 28px; }
.directory-head h1 { margin-bottom: 8px; }
.directory-empty { color: var(--ink-soft); }

.filters {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 24px 0;
}
.filters input, .filters select {
  font: 15px/1.4 var(--font-body);
  padding: 9px 12px;
  border: 1px solid #cfd0c8;
  border-radius: 8px;
  background: #fff; color: var(--ink);
}
.filters input { flex: 1 1 220px; }

.book-grid {
  display: grid; gap: 24px 20px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin: 24px 0;
}
.book-card {
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit;
  font-family: var(--font-body);
}
.book-card:hover { color: inherit; }
.book-card-cover {
  /* contain, not cover: real covers come in many aspect ratios, and cropping
     chops titles/author names off the art. The fixed 2:3 box keeps the grid
     even; off-ratio covers sit on a white mat inside it. */
  width: 100%; aspect-ratio: 2 / 3; object-fit: contain;
  padding: 4px;
  border-radius: 6px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(22, 40, 61, 0.14);
  background: #fff;
  transition: box-shadow 0.15s;
}
.book-card-cover-empty {
  display: flex; align-items: center; justify-content: center;
  padding: 12px; text-align: center;
  color: var(--ink-soft); font-style: italic;
}
.book-card:hover .book-card-cover { box-shadow: 0 5px 14px rgba(22, 40, 61, 0.24); }
.book-card-title { font-weight: 600; line-height: 1.3; }
.book-card-author { color: var(--ink-soft); font-size: 14px; }

/* --- Book page ---------------------------------------------------------- */
.book { display: flex; gap: 40px; flex-wrap: wrap; }
.book-media { flex: 0 1 260px; }
.book-cover {
  width: 100%; border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(22, 40, 61, 0.18);
}
.book-info { flex: 1 1 320px; min-width: 0; }
.book-title { margin: 0 0 4px; font-size: clamp(26px, 4vw, 38px); }
.book-byline { margin: 0 0 12px; color: var(--ink-soft); }
.book-byline a { color: inherit; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.badge {
  font: 13px/1 var(--font-body);
  padding: 5px 10px; border-radius: 999px;
  background: var(--paper); color: var(--ink-soft);
  border: 1px solid var(--line);
}

/* "Where to get it" — one block, same order, on every book page. A book may
   have any subset of these links; the list just gets shorter. */
.buy { margin: 20px 0 24px; }
.buy-title {
  font: 600 13px/1 var(--font-body);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.buy-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.buy-links li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.buy-btn {
  font: 600 16px/1.2 var(--font-body);
  padding: 13px 22px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: #fff;
}
.buy-btn:hover { background: var(--accent-deep); }
.buy-btn:disabled { background: #9aa3ad; cursor: default; }
/* Secondary action beside a primary one (the thanks page's file download next
   to "Listen now") — same shape, less shout. */
.buy-btn-quiet {
  background: transparent; color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.buy-btn-quiet:hover { background: var(--paper); color: var(--accent-deep); }
.buy-note { color: var(--ink-soft); font-size: 14px; }
.buy-link {
  display: inline-block;
  font: 600 15px/1.2 var(--font-body);
  padding: 11px 18px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--navy);
  text-decoration: none;
}
.buy-link:hover { border-color: var(--navy); color: var(--navy); }

/* Author bio on a book page — the same prose as the author page, one record. */
.book-author { margin-top: clamp(36px, 6vw, 64px); }
/* An author who hasn't written a bio yet must not leave an empty "About …"
   heading on every book they wrote. The region still ships in the markup —
   the editor needs an element to click — so it stays hidden until it has
   something in it, and reappears the moment the editor activates regions. */
.book-author:has(.book-author-bio:empty) { display: none; }
.book-author:has(.book-author-bio.ws-editable) { display: block; }
.book-author-title { margin: 0 0 18px; font-size: clamp(21px, 2.6vw, 27px); }
.book-author-inner { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.book-author-photo {
  width: 120px; height: 120px; object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(22, 40, 61, 0.2);
}
.book-author-bio { flex: 1 1 320px; min-width: 0; }
.book-author-more { margin-top: 14px; }

.spoken-note {
  margin: 24px 0 0; padding: 14px 18px;
  border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0;
  background: var(--paper); color: var(--ink-soft); font-size: 16px;
}

/* --- Author page + index ------------------------------------------------ */
.author-head { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.author-photo {
  width: 140px; height: 140px; object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(22, 40, 61, 0.2);
}
.author-name { margin: 0; }

.author-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin: 24px 0;
}
.author-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; color: inherit; text-align: center;
  font-family: var(--font-body);
}
.author-card:hover { color: inherit; }
.author-card-photo {
  width: 120px; height: 120px; object-fit: cover; border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 4px rgba(22, 40, 61, 0.18);
}
.author-card-photo-empty {
  display: flex; align-items: center; justify-content: center;
  font: 600 40px/1 var(--font-display); color: #a3ada9;
}
.author-card:hover .author-card-photo { box-shadow: 0 4px 12px rgba(22, 40, 61, 0.26); }
.author-card-name { font-weight: 600; }
.author-card-count { color: var(--ink-soft); font-size: 14px; }

/* --- Contact form + thanks page ----------------------------------------- */
.contact-head { margin-bottom: 32px; }
.contact-head h1 { text-align: center; }

.contact-form { display: flex; flex-direction: column; gap: 22px; }
.contact-form .field { display: flex; flex-direction: column; gap: 8px; }
.contact-form .field-label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.contact-form label { font-size: 16px; font-weight: 700; color: var(--ink); }
.contact-form .required-label { font-style: italic; font-size: 14px; color: var(--ink-soft); }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  font: 16px/1.5 var(--font-body); color: var(--ink);
  padding: 10px 12px; border: 1px solid #cfd0c8; border-radius: 8px;
  background: #fff;
}
.contact-form button {
  align-self: center;
  font: 600 16px/1.2 var(--font-body);
  padding: 14px 34px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: #fff;
}
.contact-form button:hover { background: var(--accent-deep); }
.contact-form button:disabled { background: #9aa3ad; }
.contact-form .hp { position: absolute; left: -9999px; }
.contact-status { min-height: 1.5em; color: var(--ink-soft); text-align: center; }

.field-hint { color: var(--ink-soft); font-size: 14px; }
.form-footnote { color: var(--ink-soft); font-size: 14px; text-align: center; margin: 0; }

.thanks-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 0; }
.thanks-delivery .buy-btn { display: inline-block; text-decoration: none; }
.thanks-wait { color: var(--ink-soft); }

/* --- Audiobooks page ---------------------------------------------------- */
.audio-catalog h2 { margin-bottom: 8px; }
.audio-steps p { margin: 14px 0; }

/* --- Tutorial library --------------------------------------------------- */
/* The subject index is the client's "table of contents": every subject the
   records actually carry, with a count, driving the same filter as the select
   below it. */
.subject-index { margin: 28px 0 4px; }
.subject-index-title {
  font: 600 13px/1 var(--font-body);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.subject-chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.subject-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font: 15px/1 var(--font-body);
  padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--navy);
  cursor: pointer;
}
.subject-chip:hover { border-color: var(--navy); }
.subject-chip.is-active {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.subject-chip-count {
  font-size: 13px;
  padding: 2px 7px; border-radius: 999px;
  background: var(--paper); color: var(--ink-soft);
}
.subject-chip.is-active .subject-chip-count {
  background: rgba(255, 255, 255, 0.2); color: #fff;
}

.tutorial-grid {
  display: grid; gap: 26px 22px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 24px 0;
}
.tutorial-card {
  display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: inherit;
  font-family: var(--font-body);
}
.tutorial-card:hover { color: inherit; }
.tutorial-card-thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden;
  background: var(--navy-deep);
  box-shadow: 0 1px 4px rgba(22, 40, 61, 0.16);
  transition: box-shadow 0.15s;
}
/* YouTube's hqdefault still is 4:3 with letterbox bars baked in; cover-fitting
   it into a 16:9 box crops exactly those bars and keeps the full 480px of
   real image (the natively-16:9 mqdefault is only 320px wide, and soft). */
.tutorial-card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.tutorial-card-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.tutorial-card-play::after {
  content: '';
  width: 0; height: 0;
  border-left: 20px solid #fff;
  border-block: 13px solid transparent;
  margin-left: 5px;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}
.tutorial-card:hover .tutorial-card-thumb { box-shadow: 0 6px 18px rgba(22, 40, 61, 0.28); }
.tutorial-card-title { font-weight: 600; line-height: 1.3; }
.tutorial-card-subjects { color: var(--ink-soft); font-size: 14px; }

/* --- Tutorial page ------------------------------------------------------ */
.tutorial-back { margin: 0 0 12px; font-size: 15px; }
.tutorial-title { margin: 0 0 12px; font-size: clamp(24px, 3.4vw, 36px); }
.badge-link { text-decoration: none; }
.badge-link:hover { border-color: var(--navy); color: var(--navy); }
.tutorial-video { margin: 20px 0 28px; border-radius: 10px; overflow: hidden; }
.tutorial-summary { max-width: 72ch; }
.tutorial-related { margin-top: clamp(36px, 6vw, 60px); }
.tutorial-related h2 { margin-bottom: 4px; }
.tutorial-foot {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}

/* --- Sales (owner only) ------------------------------------------------- */
.sales-gate { color: var(--ink-soft); }
.sales-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 20px 0 28px;
}
.sales-tools select {
  font: 15px/1.4 var(--font-body);
  padding: 9px 12px;
  border: 1px solid #cfd0c8; border-radius: 8px;
  background: #fff; color: var(--ink);
}
.sales-author { margin-bottom: 40px; }
.sales-author h2 { margin: 0 0 2px; }
.sales-author-total { margin: 0 0 16px; color: var(--ink-soft); }
.sales-book-title { margin: 20px 0 8px; font-size: 18px; }
.sales-table {
  width: 100%;
  border-collapse: collapse;
  font: 15px/1.5 var(--font-body);
}
.sales-table th, .sales-table td {
  text-align: left;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--line);
}
.sales-table th {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft);
}