/* Ash Stral: laid out like bookishtroves.com, coloured like the Bookish Troves
   redesign (the wax seal): cream linen paper, seal red and plum ink.
   Follows the visitor's light/dark setting, like Bookish Troves does. */
:root {
  --paper: #FBF7F1; --band: #F3EBE0; --surface: #FFFDF9;
  --ink: #2E2430; --text: #4E434B; --muted: #7D6F78; --rule: #E6DACB;
  --accent: #92373D; --accent-fill: #C77E78; --accent-soft: #F6E6E0;
  --btn: #92373D; --btn-text: #FFFFFF; --btn-hover: #6F252C; --btn-hover-text: #FFFFFF;
  --shadow: rgba(60, 35, 40, 0.55);
  --max: 1200px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --paper: #18131A; --band: #211A22; --surface: #211A22;
  --ink: #F3EAE4; --text: #D5C8C6; --muted: #A0919A; --rule: #3A2F38;
  --accent: #E8A19B; --accent-fill: #E8A19B; --accent-soft: #3A2228;
  --btn: #E8A19B; --btn-text: #1D1418; --btn-hover: #F3C2BC; --btn-hover-text: #1D1418;
  --shadow: rgba(0, 0, 0, 0.7);
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #18131A; --band: #211A22; --surface: #211A22;
  --ink: #F3EAE4; --text: #D5C8C6; --muted: #A0919A; --rule: #3A2F38;
  --accent: #E8A19B; --accent-fill: #E8A19B; --accent-soft: #3A2228;
  --btn: #E8A19B; --btn-text: #1D1418; --btn-hover: #F3C2BC; --btn-hover-text: #1D1418;
  --shadow: rgba(0, 0, 0, 0.7);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 20px;
  line-height: 1.8;
}

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

p { margin: 0 0 1.5em; }
strong, b { color: var(--ink); }

h1, h2, h3 { font-family: "Montserrat", Arial, sans-serif; color: var(--ink); margin: 20px 0; }
h1 { font-size: 40px; font-weight: 700; line-height: 1.3; }
h2 { font-size: 36px; font-weight: 600; line-height: 1.5; }
h3 { font-size: 26px; font-weight: 600; line-height: 1.5; color: var(--accent); }

/* Links: plum ink with a rose underline, seal red on hover */
main p a, main li a, footer a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--accent-fill);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
main p a:hover, main li a:hover, footer a:hover { color: var(--accent); }

hr { border: 0; height: 1px; background: var(--rule); margin: 50px 0; }

/* Header: linen bar, logo left, menu right */
/* Stays at the top while scrolling, like edscriver.com, slightly see-through */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--band) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(10px); -webkit-backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--rule);
}
html { scroll-padding-top: 110px; } /* in-page links (e.g. #books) land below the header */
.inside-header {
  max-width: var(--max); margin: 0 auto; padding: 18px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

/* Logo: round photo + name in the book-cover lettering, "Ash" in plum ink and
   "Stral" in seal red, like the "Bookish Troves" wordmark */
.site-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.site-logo img { width: 60px; height: 60px; }
.logo-name { font-family: "Cinzel Decorative", Georgia, serif; font-size: 30px; font-weight: 700; line-height: 1; white-space: nowrap; }
.logo-ash { color: var(--ink); }
.logo-stral { color: var(--accent); }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.nav a {
  display: block; padding: 0 14px; line-height: 60px;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; white-space: nowrap;
  color: var(--muted); text-decoration: none;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 8px;
}

main { max-width: var(--max); margin: 0 auto; padding: 40px 40px 20px; }

/* Book rows: cover left, text right */
.book { display: grid; grid-template-columns: 2fr 3fr; gap: 50px; align-items: center; }
.book .cover img { width: 100%; max-width: 400px; margin: 0 auto; }
.book h1 { margin-top: 0; }

/* Buttons: seal-red pills, the same red as the Sign Up button */
.btn {
  display: inline-block; background: var(--btn); color: var(--btn-text);
  font-family: "Source Code Pro", monospace; font-size: 20px; font-weight: 500;
  text-transform: capitalize; letter-spacing: 0.5px; line-height: 36px;
  padding: 5px 20px; border-radius: 20px; text-decoration: none;
}
.btn:hover { background: var(--btn-hover); color: var(--btn-hover-text); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent-fill); }
.btn-ghost:hover { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.buttons { margin: 0 0 1.5em; }

/* Page not found */
.not-found { max-width: 720px; margin: 20px auto 40px; text-align: center; }
.not-found .big-404 { font-family: "Cinzel Decorative", Georgia, serif; font-weight: 700; font-size: 120px; line-height: 1; color: var(--accent); margin: 0 0 6px; }
.not-found h1 { margin-top: 0; }
.not-found .buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Newsletter: linen-to-rose band holding the signup card, like Bookish Troves */
.join {
  margin: 60px 0 30px; padding: 40px; border-radius: 18px;
  background: linear-gradient(135deg, var(--band), var(--accent-soft));
  border: 1px solid var(--rule);
}
.join h2 { margin-top: 0; }
.join:has(> div) { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: center; }
.join:has(> div) p { margin-bottom: 1em; }

/* Home layout, after edscriver.com: hero + featured book, then a grid of book cards */
.eyebrow { display: block; font: 700 13px/1.3 "Montserrat", Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.lede { font-size: 20px; line-height: 1.75; }
.hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; padding: 20px 0 70px; }
.hero h1 { font-size: 46px; line-height: 1.15; margin: 12px 0 18px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.feature-card {
  display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: center; padding: 28px;
  background: linear-gradient(135deg, var(--band), var(--accent-soft)); border: 1px solid var(--rule);
  border-radius: 18px; box-shadow: 0 24px 48px -32px var(--shadow);
}
.feature-cover { transform: rotate(-3deg); box-shadow: 0 18px 30px -14px var(--shadow); }
.feature-meta { display: grid; gap: 8px; justify-items: start; }
.btn { white-space: nowrap; }
@media (max-width: 1100px) and (min-width: 961px) {
  .feature-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .feature-cover { width: 140px; }
  .feature-meta { justify-items: center; }
}
.feature-meta h2 { font-size: 28px; margin: 0; }
.feature-meta p { font-size: 16px; line-height: 1.6; margin: 0 0 6px; }
.tag { font: 700 12px/1.4 "Montserrat", Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
#books > h2 { margin-top: 6px; }
.books { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 24px; }
.book-card { display: grid; gap: 12px; align-content: start; justify-items: start; }
.book-card .cover { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 18px 30px -18px var(--shadow); transition: transform .2s; }
.book-card:hover .cover { transform: translateY(-4px); }
.book-card h3 { color: var(--ink); margin: 0; font-size: 24px; }
.book-card .sub { font: 600 15px/1.4 "Montserrat", Arial, sans-serif; color: var(--accent); }
.book-card p { font-size: 16px; line-height: 1.7; margin: 0; }
.book-card .reviews { font-size: 14px; color: var(--muted); }
.status { font: 700 11px/1 "Montserrat", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; }
.status.free { background: var(--btn); color: var(--btn-text); }
.status.soon { border: 1px solid var(--rule); color: var(--muted); }

/* About page, after edscriver.com: portrait heading, story + facts columns, quotes */
.profile-head { display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; padding: 10px 0 40px; }
.portrait { width: 150px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px var(--paper), 0 0 0 7px var(--accent-fill); }
.profile-head h1 { margin: 8px 0 6px; font-size: 44px; }
.tagline { font-size: 21px; line-height: 1.6; color: var(--muted); font-style: italic; margin: 0; }
.cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; }
.cols .facts { margin-top: 0; }
.quotes { display: grid; gap: 22px; max-width: 820px; margin-top: 56px; }
.quotes blockquote { margin: 0; font-size: 19px; line-height: 1.65; }
.quotes cite { font: 700 11px/1 "Montserrat", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }

/* Contact page, after edscriver.com: intro on the left, form on the right */
.contact { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; padding-top: 10px; }
.contact h1 { margin: 10px 0 16px; }
.hint { font-size: 15px; line-height: 1.6; color: var(--muted); }
.facts { margin: 18px 0 0; border-top: 2px solid var(--ink); }
.facts div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.facts dt { font: 700 11px/2.1 "Montserrat", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; color: var(--ink); }
.facts a, .contact-form a { color: var(--ink); font-weight: 600; text-decoration-color: var(--accent-fill); text-underline-offset: 3px; }
.facts a:hover, .contact-form a:hover { color: var(--accent); }
.contact-form { background: var(--band); border: 1px solid var(--rule); border-radius: 18px; padding: 32px; display: grid; gap: 18px; }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label { display: grid; gap: 7px; font: 600 14px/1.2 "Montserrat", Arial, sans-serif; color: var(--ink); }
.contact-form :is(input, select, textarea) { font: 16px/1.5 "Libre Baskerville", Georgia, serif; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 11px 13px; width: 100%; }
.contact-form textarea { min-height: 170px; resize: vertical; }
.contact-form :is(input, select, textarea):focus { outline: none; border-color: var(--accent-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-fill) 30%, transparent); }
.contact-form button { border: 0; cursor: pointer; }
.contact-form button:disabled { opacity: .6; cursor: default; }
.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { font: 500 15px/1.5 "Montserrat", Arial, sans-serif; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--rule); }
.notice.ok { border-color: #2F6B4F; color: #2F6B4F; }
.notice.err { border-color: #A23B3B; color: #A23B3B; }
@media (prefers-color-scheme: dark) { .notice.ok { border-color: #7CC4A0; color: #7CC4A0; } .notice.err { border-color: #E68A8A; color: #E68A8A; } }
.signup-card {
  max-width: 420px; padding: 24px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 16px;
  box-shadow: 0 20px 40px -32px var(--shadow);
  font-family: "Montserrat", Arial, sans-serif; font-size: 16px; line-height: 1.6; color: var(--text);
}
.signup-card p { margin: 0 0 18px; }
.signup-btn {
  display: block; text-align: center; background: var(--btn); color: var(--btn-text);
  padding: 11px 18px; border-radius: 10px; font-weight: 600; font-size: 15px; text-decoration: none;
}
.signup-btn:hover { background: var(--btn-hover); color: var(--btn-hover-text); }

/* About */
.about { display: grid; grid-template-columns: 2fr 5fr; gap: 50px; align-items: start; }
.about .photo img {
  width: 100%; max-width: 348px; margin: 0 auto; border-radius: 50%;
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 8px var(--accent-fill);
}
.about h1 { margin-top: 0; }
blockquote { margin: 0 0 24px; padding-left: 20px; border-left: 3px solid var(--accent-fill); font-style: italic; color: var(--ink); }
blockquote cite { display: block; font-style: normal; font-weight: 700; margin-top: 6px; color: var(--muted); }

/* Policy pages: one comfortable reading column */
.legal { max-width: 820px; margin: 0 auto; font-size: 17px; line-height: 1.8; }
.legal h1 { margin-top: 0; }
.legal h2 { font-size: 24px; line-height: 1.4; margin: 36px 0 14px; padding-top: 22px; border-top: 1px solid var(--rule); }
.legal h3 { font-size: 19px; line-height: 1.4; margin: 24px 0 10px; color: var(--ink); }
.legal p, .legal ul, .legal ol { margin: 0 0 1em; }
.legal ul, .legal ol { padding-left: 1.4em; }
.legal li { margin-bottom: 0.4em; }
.legal li::marker { color: var(--accent); }
.legal a { color: var(--ink); text-decoration-color: var(--accent-fill); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal a:hover { color: var(--accent); }
.legal table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: 15px; }
.legal td, .legal th { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule); }
.legal [id] { scroll-margin-top: 20px; }

/* Footer, after edscriver.com: one quiet row of copyright, legal links and elsewhere links */
.site-footer {
  max-width: var(--max); margin: 40px auto 0; padding: 28px 40px 40px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-start;
  font: 500 14px/1.6 "Montserrat", Arial, sans-serif; color: var(--muted);
}
.foot-brand { display: grid; gap: 4px; flex: 1 1 260px; max-width: 340px; margin-right: auto; }
.foot-brand small { font: italic 400 12.5px/1.6 "Libre Baskerville", Georgia, serif; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.site-footer a { color: var(--muted); font-weight: 500; text-decoration: none; }
.site-footer .foot-brand a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-fill); text-underline-offset: 3px; }
.site-footer a:hover { color: var(--accent); }
@media (max-width: 768px) { .site-footer { padding: 24px 20px 32px; } .foot-brand { max-width: none; flex-basis: 100%; } }

/* Old footer (no longer used): linen band, then a quiet bar */
.footer-widgets { background: var(--band); border-top: 1px solid var(--rule); padding: 40px; text-align: center; }
.footer-widgets p { max-width: 900px; margin: 24px auto 0; font-style: italic; }
.site-info {
  background: var(--paper); border-top: 1px solid var(--rule); color: var(--muted);
  padding: 20px 40px; text-align: center;
  font-family: "Montserrat", Arial, sans-serif; font-size: 16px; line-height: 2.25;
}
.site-info p { margin: 0 0 8px; }
.site-info a { color: var(--muted); text-decoration: none; }
.site-info a:hover { color: var(--accent); }

/* Tablet */
@media (max-width: 960px) {
  .hero, .contact, .cols, .join:has(> div) { grid-template-columns: 1fr; gap: 32px; }
  .books { grid-template-columns: 1fr 1fr; }
}

/* Phone and tablet menu: on screens 1120px wide and under (where the row of links stops fitting on one line), a
   Menu button replaces the row and opens a full-width list with big rows under the header (main.js opens and
   closes it). The logo shrinks, so the sticky header takes about half the room it used to. Without JavaScript the
   links just stay in view. */
.menu-btn { display: none; }
.menu-btn .x { display: none; }
.site-header.menu-open .menu-btn .bars { display: none; }
.site-header.menu-open .menu-btn .x { display: inline; }
@media (max-width: 1120px) {
  .inside-header { flex-wrap: nowrap; padding: 10px 16px; gap: 12px; }
  .site-logo { gap: 10px; min-width: 0; }
  .site-logo img { width: 44px; height: 44px; flex: none; }
  .logo-name { font-size: 24px; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 9px; flex: none; min-height: 44px; padding: 0 14px 0 16px;
    border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink);
    font: 700 12.5px/1 "Montserrat", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  }
  .site-header.menu-open .menu-btn { background: var(--btn); border-color: var(--btn); color: var(--btn-text); }
  .menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 30; padding: 6px 16px 14px;
    background: var(--surface); border-bottom: 1px solid var(--rule); box-shadow: 0 22px 40px -24px var(--shadow);
    max-height: calc(100vh - 80px); overflow-y: auto;
  }
  .site-header.menu-open .nav { display: block; }
  .nav ul { flex-direction: column; flex-wrap: nowrap; }
  .nav li + li { border-top: 1px solid var(--rule); }
  .nav a {
    display: flex; align-items: center; min-height: 50px; padding: 0 6px; line-height: 1.3; letter-spacing: 0;
    font-size: 16.5px; text-transform: none; white-space: normal; color: var(--ink);
  }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; font-weight: 700; text-decoration: none; }
}

/* Phone */
@media (max-width: 768px) {
  body { font-size: 18px; }
  main { padding: 24px 20px 10px; }
  h1 { font-size: 30px; }
  h2 { font-size: 27px; }
  h3 { font-size: 22px; }
  hr { margin: 36px 0; }
  html { scroll-padding-top: 80px; } /* the header is one slim row on phones */
  .book, .about { grid-template-columns: 1fr; gap: 16px; }
  .book .cover img { max-width: 280px; }
  .about .photo img { max-width: 240px; }
  .btn { font-size: 18px; }
  .join { margin-top: 40px; padding: 24px 20px; }
  .not-found .big-404 { font-size: 84px; }
  .hero { padding-bottom: 40px; }
  .profile-head { grid-template-columns: 1fr; gap: 18px; padding-bottom: 24px; }
  .portrait { width: 110px; }
  .profile-head h1 { font-size: 34px; }
  .tagline { font-size: 18px; }
  .hero h1 { font-size: 34px; }
  .lede { font-size: 18px; }
  .feature-card { grid-template-columns: 96px 1fr; padding: 20px; gap: 18px; }
  .books, .contact-form .row { grid-template-columns: 1fr; }
  .book-card .cover { max-width: 240px; }
  .contact-form { padding: 22px 18px; }
  .legal { font-size: 16px; }
  .legal h2 { font-size: 21px; }
  .footer-widgets { padding: 30px 20px; }
  .site-info { padding: 20px; }
}

/* The Quote Library, built like edscriver.com's Scarequotes: a featured quote
   in a linen-to-rose card, then search, tags and every quote. Also the admin. */
[hidden] { display: none !important; } /* so the hidden attribute beats display rules like .btn and .ad */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.quote-library button.btn, .ad button.btn, .ql-card-dlg button.btn { border: 0; cursor: pointer; }
.btn-ghost { border: 0; } /* the ghost outline is a box-shadow, so buttons need no border */
button.btn-ghost { cursor: pointer; }
.ql-head { max-width: 820px; padding: 10px 0 24px; }
.ql-head h1 { font-size: 46px; line-height: 1.15; margin: 12px 0 18px; }
.ql-head h1 em { font-style: normal; color: var(--accent); }
.ql-head .lede { margin-bottom: .8em; }
.ql-stats { font: 600 13px/1 "Montserrat", Arial, sans-serif; letter-spacing: .06em; color: var(--muted); margin: 0; }
.ql { display: grid; gap: 22px; }
.ql-feature {
  position: relative; margin: 0; padding: 40px 44px 34px; display: grid; gap: 16px; border-radius: 18px;
  background: linear-gradient(135deg, var(--band), var(--accent-soft)); border: 1px solid var(--rule);
  box-shadow: 0 24px 48px -32px var(--shadow);
}
.ql-feature blockquote { margin: 0; padding: 0; border: 0; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.6; font-style: italic; color: var(--ink); }
.ql-feature figcaption { font: 600 15px/1.5 "Montserrat", Arial, sans-serif; color: var(--muted); }
.ql-feature .buttons { margin: 6px 0 0; }
.ql-author { color: var(--accent); }
.ql-feature figcaption cite, .ql-by cite { font: italic 400 14px/1.5 "Libre Baskerville", Georgia, serif; }

.ql-search {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 12px 28px -22px var(--shadow);
}
.ql-search svg { color: var(--muted); }
.ql-search input { font: 16px/1.4 "Libre Baskerville", Georgia, serif; color: var(--ink); background: transparent; border: 0; outline: none; width: 100%; padding: 6px 0; min-width: 0; }
.ql-search:focus-within { border-color: var(--accent-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-fill) 30%, transparent); }
.ql-controls { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 16px; padding-top: 8px; border-top: 1px solid var(--rule); }
.ql-controls label { display: flex; align-items: center; gap: 8px; font: 600 12.5px/1 "Montserrat", Arial, sans-serif; color: var(--muted); }
.ql-controls select { font: 14px/1.3 "Libre Baskerville", Georgia, serif; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 7px 10px; max-width: 230px; }
.ql-count { grid-column: 1 / -1; font: 600 12.5px/1.3 "Montserrat", Arial, sans-serif; color: var(--muted); margin: 0; }
.ql-help { border: 1px solid var(--rule); border-radius: 12px; padding: 14px 18px; background: var(--surface); font-size: 15.5px; line-height: 1.75; }
.ql-help summary { cursor: pointer; font: 700 14px/1.4 "Montserrat", Arial, sans-serif; color: var(--ink); }
.ql-help ul { margin: 12px 0 0; padding-left: 1.3em; }
.ql-help li { margin-bottom: .4em; }
.ql-help li::marker { color: var(--accent); }

.ql-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 600 12.5px/1 "Montserrat", Arial, sans-serif; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--rule);
  background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s;
}
.chip:hover { border-color: var(--accent-fill); }
.chip span { font-weight: 500; color: var(--muted); margin-left: 2px; }
.chip.on { background: var(--btn); border-color: var(--btn); color: var(--btn-text); }
.chip.on span { color: inherit; opacity: .75; }
.chip.small { padding: 5px 9px; font-size: 11.5px; }
.chip.more { background: transparent; border-style: dashed; }
.chip-all { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.chip-all[hidden] { display: none; }
.ql-tags .chip { font-size: 14px; padding: 10px 15px; }

.ql-list { list-style: none; padding: 0; margin: 0; display: grid; }
.ql-item { display: grid; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--rule); content-visibility: auto; contain-intrinsic-size: auto 190px; }
.ql-item blockquote { margin: 0; padding: 0; border: 0; font-size: 18px; line-height: 1.75; color: var(--ink); }
.ql-by { font: 600 14px/1.5 "Montserrat", Arial, sans-serif; color: var(--muted); margin: 0; }
.ql-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ql-qtags { display: flex; flex-wrap: wrap; gap: 6px; }
.ql-actions { display: flex; gap: 4px; }
.ql-act { border: 0; background: none; cursor: pointer; padding: 7px 9px; border-radius: 6px; font: 700 12.5px/1 "Montserrat", Arial, sans-serif; color: var(--accent); }
.ql-act:hover { background: var(--band); color: var(--ink); }
.ql mark { background: var(--accent-soft); color: var(--ink); padding: 0 2px; border-radius: 3px; }
.ql-none { padding-block: 24px; color: var(--muted); font-style: italic; margin: 0; }
.ql-hint { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }

/* "Share as image" box */
.ql-card-dlg {
  box-sizing: border-box; overflow-x: hidden; font-family: "Montserrat", Arial, sans-serif; border: 1px solid var(--rule);
  border-radius: 18px; padding: 18px; max-width: min(92vw, 760px); width: 100%; background: var(--paper); color: var(--text);
  box-shadow: 0 30px 60px -30px var(--shadow);
}
.ql-card-dlg::backdrop { background: rgba(24, 19, 26, .6); }
.ql-card-dlg canvas { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; border-radius: 8px; background: var(--band); }
.ql-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.ql-card-sizes { display: flex; gap: 8px; }
.ql-card-msg { min-height: 1.4em; margin: 8px 0; font-size: .9rem; color: var(--muted); }
.ql-card-dlg .buttons .btn { font-size: 16px; line-height: 30px; }
.ql-social { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: .92rem; }
.ql-social span { color: var(--muted); }
.ql-social a { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--rule); }
.ql-social a:hover { border-color: currentColor; color: var(--accent); }

/* Admin page (/admin/quote-library/) */
.ad-head { display: grid; gap: 10px; padding-bottom: 14px; }
.ad-head h1 { margin: 0; }
.ad { display: grid; gap: 18px; max-width: 900px; }
.ad-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.ad-file { cursor: pointer; }
.ad-form { display: grid; gap: 14px; padding: 24px; border: 1px solid var(--rule); border-radius: 14px; background: var(--band); }
.ad-form[hidden] { display: none; }
.ad-form h2 { font-size: 20px; margin: 0; }
.ad-form label { display: grid; gap: 6px; font: 600 13px/1.3 "Montserrat", Arial, sans-serif; color: var(--ink); }
.ad-form label .ql-hint { font-weight: 400; font-size: 13px; }
.ad-form :is(input, textarea) { width: 100%; font: 15px/1.5 "Libre Baskerville", Georgia, serif; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; }
.ad-form :is(input, textarea):focus { outline: none; border-color: var(--accent-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-fill) 30%, transparent); }
.ad-form textarea { min-height: 140px; resize: vertical; }
.ad-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ad-form .form-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ad-tagpick { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-del { margin-left: auto; color: #A23B3B; }
.ad-list { list-style: none; padding: 0; margin: 0; display: grid; }
.ad-item { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.ad-quote { font-size: 15px; line-height: 1.6; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.ad-meta { font: 500 12.5px/1.5 "Montserrat", Arial, sans-serif; color: var(--muted); margin: 4px 0 0; }
.btn.small { font-size: 14px; line-height: 24px; padding: 4px 14px; }
.ad .notice { margin: 0; }
@media (prefers-color-scheme: dark) { .ad-del { color: #E68A8A; } }

.quote-library :is(button, summary):focus-visible, .ad :is(button, summary):focus-visible, .ql-card-dlg button:focus-visible, .ql-social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 768px) {
  .ql-head h1 { font-size: 34px; }
  .ql-feature { padding: 26px 22px 24px; }
  .ql-item blockquote { font-size: 17px; }
  .ad-form { padding: 18px; }
  .ad-form .row { grid-template-columns: 1fr; }
  .ql-tags .chip { font-size: 13px; padding: 9px 13px; }
}