/* Homepage gold touches (owner's choice, 2026-10-12, from the liquid-gold
   mockups): black buttons with a thin liquid-gold edge, a liquid-gold
   "Honest Apologist" title (pick "Liquid gold" in Admin > Settings > Hero
   Title Texture), and on phones a lighter page — plain cream instead of the
   painted backgrounds, nothing animated, fewer big images.
   Loaded on the homepage only. Computers with the motion setting on get the
   moving gold; phones and reduce-motion users get the same look standing
   still. Remove the <link> in index.html to switch it all off. */

:root {
  --hg-gold-edge: linear-gradient(100deg, #7b5719 0%, #e8c46a 14%, #fff4c9 24%, #c8962e 36%, #8a6118 48%, #f6dc8c 60%, #fffbe6 66%, #c18a26 78%, #7b5719 90%, #e8c46a 100%);
}

/* Animations can't move a background that another stylesheet locked with
   !important (home-react.js locks the buttons'), so the moving gold lives on
   its own layer (::before) behind each button, and the title's position is
   left unlocked. */
@keyframes hg-gold-flow { 0% { background-position: 0% 50%; } 100% { background-position: 250% 50%; } }
@keyframes hg-title-sheen { 0% { background-position: 100% 0, 0 0; } 55%, 100% { background-position: 0% 0, 0 0; } }

/* ---- Buttons: black, thin liquid-gold edge ------------------------------- */
html body .hero-qa-browse-all,
html body .fce-hero-actions .fce-btn-primary,
html body .fce-hero-actions .fce-btn-secondary,
html body .fce-hero-donate-btn,
html body #nav-donate-link {
  position: relative;
  isolation: isolate;
  border: 1.5px solid transparent !important;
  background: linear-gradient(160deg, #26221c 0%, #141210 55%, #0d0c0a 100%) !important;
  background-clip: padding-box !important;
  color: #f7eed6 !important;
  box-shadow: 0 12px 28px -12px rgba(20, 14, 6, 0.6), 0 0 18px -6px rgba(232, 196, 106, 0.45) !important;
  overflow: visible !important;
}
/* The gold edge: a gold layer just behind the button, showing through the
   1.5px transparent border. */
html body .hero-qa-browse-all::before,
html body .fce-hero-actions .fce-btn-primary::before,
html body .fce-hero-actions .fce-btn-secondary::before,
html body .fce-hero-donate-btn::before,
html body #nav-donate-link::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  background: var(--hg-gold-edge);
  background-size: 250% 100%;
  /* Show only a 1.5px ring: cut the middle out so the black stays visible. */
  padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  z-index: -1;
  pointer-events: none;
}
html body .hero-qa-browse-all:hover,
html body .fce-hero-actions .fce-btn:hover,
html body .fce-hero-donate-btn:hover,
html body #nav-donate-link:hover {
  background: linear-gradient(160deg, #332d24 0%, #1c1916 55%, #12100d 100%) !important;
  background-clip: padding-box !important;
  box-shadow: 0 16px 34px -12px rgba(20, 14, 6, 0.65), 0 0 26px -4px rgba(232, 196, 106, 0.6) !important;
}
html body .hero-qa-browse-all i,
html body .fce-hero-actions .fce-btn i { color: #e8c46a !important; }
/* The book/scroll icons are dark SVGs: turn them light, then tint gold. */
html body .fce-hero-actions .fce-btn img { filter: brightness(0) invert(1) sepia(1) saturate(2.4) hue-rotate(-8deg) brightness(0.92); }

/* ---- Title: "Liquid gold" preset ------------------------------------------ */
/* Classic gold lettering: bright at the top of each letter, deep in the
   middle, warm again at the foot, plus a soft highlight band that glides
   across (computers only). Two layers: [0] the highlight, [1] the gold.
   Selector doubled up to outrank style.css's ".fce-hero-title.has-texture span". */
.fce-hero-title.fce-hero-title--liquid span {
  background-image:
    linear-gradient(105deg, rgba(255, 248, 220, 0) 42%, rgba(255, 248, 220, 0.9) 50%, rgba(255, 248, 220, 0) 58%),
    linear-gradient(180deg, #fbe7a3 0%, #ecc15a 22%, #c99224 46%, #93630f 64%, #b9831f 80%, #e9c66c 100%) !important;
  background-size: 300% 100%, 100% 100% !important;
  background-position: 100% 0, 0 0;
  background-repeat: no-repeat !important;
  /* The title's tight line-height cut the gold off before the tails of
     "p" and "g"; pad the painted area down without moving the layout. */
  display: inline-block;
  padding: 0.02em 0.06em 0.24em !important;
  margin-bottom: -0.22em !important;
  -webkit-text-stroke: 0.5px rgba(70, 42, 6, 0.5);
  /* style.css's cream "letterpress" text-shadow paints over gold-filled text
     and washes it out; the drop-shadow filter below gives the depth instead. */
  text-shadow: none !important;
  filter: drop-shadow(0 1px 0 rgba(70, 42, 6, 0.55)) drop-shadow(0 6px 14px rgba(90, 60, 10, 0.3)) !important;
}

/* Motion only on computers, and only for people who haven't asked for less. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html body .hero-qa-browse-all::before,
  html body .fce-hero-actions .fce-btn-primary::before,
  html body .fce-hero-actions .fce-btn-secondary::before,
  html body .fce-hero-donate-btn::before,
  html body #nav-donate-link::before { animation: hg-gold-flow 7s linear infinite; }
  .fce-hero-title.fce-hero-title--liquid span { animation: hg-title-sheen 6s ease-in-out infinite; }
}

/* ---- Phones: the lighter page --------------------------------------------- */
@media (max-width: 720px) {
  /* Plain cream instead of the painted backdrop, hero picture and side images
     (these were most of the ~5.7 MB a phone downloaded). */
  body.home-page::before { background-image: none !important; background-color: #f3e9d3 !important; }
  body.home-page::after,
  body.home-page .decorative-side-gutters,
  body.home-page #hero::before,
  body.home-page #hero::after { content: none !important; display: none !important; background-image: none !important; }
  body.home-page .fce-hero-center { background-image: none !important; background-color: transparent !important; }
  /* A faint 12%-opacity overlay and the placeholder cards shown before the
     real articles load both pulled in an 846 KB picture. */
  body.home-page .hero-artifacts { display: none !important; background-image: none !important; }
  body.home-page #articles-grid [class*="topic-visual-"] { background-image: linear-gradient(135deg, #3a2a12, #6b4c1c) !important; }

  /* Cards: cream with a fine gold border. */
  body.home-page .content-card {
    background: #fffaf0 !important;
    border: 1.5px solid #c9a24e !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }
}