/* A quieter, bookish finish for the current converter experience. */
body.site-refresh {
  --ink-900: #30231d;
  --ink-800: #48342a;
  --ink-700: #5d4a3f;
  --ink-600: #766257;
  --ink-500: #8b796c;
  --ink-400: #a89586;
  --ink-300: #c4b3a5;
  --ink-200: #ddcfc2;
  --ink-100: #eee5dc;
  --paper-0: #ffffff;
  --paper-50: #ffffff;
  --paper-100: #ffffff;
  --paper-200: #f5f5f4;
  --paper-300: #e7e5e4;
  --spine-700: #83371f;
  --spine-600: #a34323;
  --spine-500: #b94d27;
  --spine-400: #d66c42;
  --spine-200: #e9b59d;
  --spine-100: #f4dace;
  --spine-50: #fbede5;
  --action-accent-bg: #a34323;
  --action-accent-bg-hover: #83371f;
  --text-link: #a34323;
  --text-link-hover: #83371f;
  --surface-page: #ffffff;
  --surface-card: #ffffff;
  --surface-sunken: #ffffff;
  --surface-raised: #ffffff;
  --surface-accent: #fbede5;
  --border-hairline: #eee5dc;
  --border-default: #ddcfc2;
  --border-strong: #c4b3a5;
  --border-focus: #b94d27;
  --focus-ring: 0 0 0 3px rgb(185 77 39 / 22%);
  --veil-bg: #ffffff;
  background: var(--surface-page);
}

body.home-page .hero {
  padding-top: clamp(62px, 7vw, 100px);
  background: #ffffff;
}

body.home-page .hero-copy { max-width: 1100px; }
body.home-page .hero-title {
  max-width: 1100px;
  color: #30231d;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(58px, 6.1vw, 88px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.055em;
}
body.home-page .hero-title span {
  color: #a34323;
  font-style: italic;
  font-weight: 400;
}
/* The search phrase the page is for, inside the h1 but set as the hero's
   eyebrow pill so the display line above the fold stays as designed. */
body.home-page .hero-title .hero-kicker {
  display: block;
  width: fit-content;
  margin: 0 auto 26px;
  line-height: 1.2;
}
.hero-title-mark {
  display: inline-block;
  width: .62em;
  height: .62em;
  margin: 0 .035em 0 .07em;
  border-radius: .17em;
  vertical-align: -.04em;
  box-shadow: 0 .08em .16em rgb(57 41 31 / 16%);
}
body.home-page .hero-lede {
  max-width: 610px;
  color: #766257;
  font-size: clamp(16px, 1.3vw, 18px);
}
body.home-page .hero-jump {
  border-color: #983e20;
  background: #a34323;
  color: #fffdfa;
  box-shadow: 0 5px 12px rgb(117 51 29 / 18%);
}
body.home-page .hero-jump:hover { background: #83371f; color: #fffdfa; }
.hero-secondary { border-color: #e3d7ca; background: #fffdfa; color: #392a22; }
.hero-secondary:hover { background: #f6ede3; color: #392a22; }

body.home-page .converter-side-heading .c2e-eyebrow { color: #a34323; }
body.home-page .dropzone {
  border-color: #d8a98c;
  background: #fff8f1;
}
body.home-page .dropzone:hover,
body.home-page .dropzone:focus-visible,
body.home-page .dropzone.dragover {
  border-color: #b94d27;
  background: #fdf0e6;
}
body.home-page .dz-icon { color: #b94d27; }
body.home-page .model-option.is-on { border-color: #d9a28a; }
body.home-page .convert-btn:not(:disabled) {
  background: #a34323;
  color: #fffdfa;
}
body.home-page .convert-btn:not(:disabled):hover { background: #83371f; }
body.home-page .tool-card :focus-visible { outline-color: #b94d27; }

body.site-refresh .desktop-nav-btn {
  border-color: #6c4634;
  box-shadow: 2px 3px 0 #6c4634;
  color: #392a22;
}
body.site-refresh .desktop-nav-btn:hover { background: #f7eee5; }
body.site-refresh .site-nav a:hover { color: #a34323; }
body.site-refresh .postit-section { background: #ffffff; }
body.site-refresh .story-introduction { background: #ffffff; }
body.site-refresh .story-state-label { color: #a34323; }
body.site-refresh .story-toggle { background: #a34323; color: #fffdfa; }
body.site-refresh .story-toggle:hover { background: #83371f; }
body.site-refresh .faq-item[open] summary { color: #a34323; }

@media (max-width: 620px) {
  body.home-page .hero { padding-top: 44px; }
  body.home-page .hero-title { font-size: clamp(42px, 10.8vw, 59px); }
  .hero-title-mark { width: .57em; height: .57em; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.site-refresh {
    --ink-900: #f2e8dd;
    --ink-800: #e2d2c4;
    --ink-700: #d0bbaa;
    --ink-600: #b9a18f;
    --ink-500: #a38c7a;
    --ink-400: #8f7867;
    --ink-300: #725b4b;
    --ink-200: #584537;
    --ink-100: #403126;
    --paper-0: #2b211b;
    --paper-50: #1e1713;
    --paper-100: #281d17;
    --paper-200: #38271f;
    --paper-300: #493126;
    --spine-700: #f1a07a;
    --spine-600: #e9855b;
    --spine-500: #dd7447;
    --spine-400: #d66c42;
    --spine-200: #68412e;
    --spine-100: #472c21;
    --spine-50: #36241c;
    --action-accent-bg: #dd7447;
    --action-accent-bg-hover: #e9855b;
    --text-link: #e9855b;
    --text-link-hover: #f1a07a;
    --surface-page: #1e1713;
    --surface-card: #2b211b;
    --surface-sunken: #281d17;
    --surface-accent: #36241c;
    --border-hairline: #403126;
    --border-default: #584537;
    --border-strong: #725b4b;
    --border-focus: #dd7447;
    --focus-ring: 0 0 0 3px rgb(221 116 71 / 28%);
  }
}

:root[data-theme="dark"] body.site-refresh {
  --ink-900: #f2e8dd;
  --ink-800: #e2d2c4;
  --ink-700: #d0bbaa;
  --ink-600: #b9a18f;
  --ink-500: #a38c7a;
  --ink-400: #8f7867;
  --ink-300: #725b4b;
  --ink-200: #584537;
  --ink-100: #403126;
  --paper-0: #2b211b;
  --paper-50: #1e1713;
  --paper-100: #281d17;
  --paper-200: #38271f;
  --paper-300: #493126;
  --spine-700: #f1a07a;
  --spine-600: #e9855b;
  --spine-500: #dd7447;
  --spine-400: #d66c42;
  --spine-200: #68412e;
  --spine-100: #472c21;
  --spine-50: #36241c;
  --action-accent-bg: #dd7447;
  --action-accent-bg-hover: #e9855b;
  --text-link: #e9855b;
  --text-link-hover: #f1a07a;
  --surface-page: #1e1713;
  --surface-card: #2b211b;
  --surface-sunken: #281d17;
  --surface-accent: #36241c;
  --border-hairline: #403126;
  --border-default: #584537;
  --border-strong: #725b4b;
  --border-focus: #dd7447;
  --focus-ring: 0 0 0 3px rgb(221 116 71 / 28%);
}

:root[data-theme="dark"] body.home-page .hero {
  background: radial-gradient(ellipse at 50% 0%, #302219, #1e1713 70%);
}
:root[data-theme="dark"] body.home-page .hero-title { color: #f2e8dd; }
:root[data-theme="dark"] body.home-page .hero-title span { color: #e9855b; }
:root[data-theme="dark"] body.home-page .hero-lede { color: #b9a18f; }
:root[data-theme="dark"] body.home-page .hero-jump { background: #dd7447; border-color: #dd7447; color: #241710; }
:root[data-theme="dark"] body.home-page .hero-jump:hover { background: #e9855b; color: #241710; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.home-page .hero {
    background: radial-gradient(ellipse at 50% 0%, #302219, #1e1713 70%);
  }
  :root:not([data-theme="light"]) body.home-page .hero-title { color: #f2e8dd; }
  :root:not([data-theme="light"]) body.home-page .hero-title span { color: #e9855b; }
  :root:not([data-theme="light"]) body.home-page .hero-lede { color: #b9a18f; }
  :root:not([data-theme="light"]) body.home-page .hero-jump { background: #dd7447; border-color: #dd7447; color: #241710; }
  :root:not([data-theme="light"]) body.home-page .hero-jump:hover { background: #e9855b; color: #241710; }
}