/* Adapted from Horace v2.0.0 by JustGoodThemes (licensed source in the repo).
   Plain CSS: edit directly, no compilation required. */
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --accent: #ee5a29;
  --accent-support: #fff;
  --accent-halo: rgba(238, 90, 41, 0.15);
  --ink: #1f2937;
  --text: #4b5563;
  --muted: #626b78;
  --line: #e5e7eb;
  --pale: #f9fafb;
  --outer: clamp(1.25rem, 4vw, 1.875rem);
  --space-l: clamp(2.5rem, 7vw, 3.75rem);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-family: "Karla", sans-serif; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
main { flex-grow: 1; }
h1, h2, h3, h4 {
  margin: 0 0 1rem;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
}
p { margin: 0 0 1rem; }
a {
  color: var(--accent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:where(:hover, :focus-visible, :active) {
  color: var(--ink);
  text-decoration: none;
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
img, svg { max-width: 100%; }
.outer { padding-inline: var(--outer); }
.inner { max-width: 45rem; margin-inline: auto; }
.inner-wide { max-width: 68.75rem; margin-inline: auto; }
.skip-link {
  position: absolute;
  z-index: 10;
  top: 0.75rem;
  left: var(--outer);
  padding: 0.5rem 1rem;
  transform: translateY(-200%);
  background: #fff;
  color: var(--ink);
}
.skip-link:focus { transform: none; }

/* Horace's pale, geometric masthead, without its sidebar. */
.masthead {
  position: relative;
  isolation: isolate;
  background: var(--pale);
  border-bottom: 1px solid var(--line);
}
.masthead::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("../images/horace-background.webp") center / cover;
  opacity: 0.15;
  pointer-events: none;
}
.site-header { padding-block: 1.5rem; }
body > .site-header {
  background: var(--pale);
  border-bottom: 1px solid var(--line);
}
.header-inside { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.brand-mark { width: 2rem; height: 2rem; flex-shrink: 0; }
.brand-subtitle { display: block; font-size: 0.875rem; font-weight: 400; letter-spacing: 0.015em; margin-top: 0.2rem; }
.site-navigation a {
  padding-block: 0.5rem;
  font-size: 1rem;
  text-decoration: none;
  color: var(--ink);
}
.site-header a:where(:hover, :focus-visible, :active) { color: var(--accent); }
.site-navigation a[aria-current="page"] { border-bottom: 2px solid var(--accent); }
.hero { padding-block: clamp(3rem, 7vw, 5rem) clamp(3.5rem, 7vw, 5.5rem); text-align: center; }
.eyebrow, .small-title {
  margin: 0 0 1.5rem;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero h1 { font-size: clamp(2.25rem, 5vw, 3rem); }
.hero-description { max-width: 34rem; margin: 0 auto; font-size: 1.125rem; }
.catalog { padding-block: var(--space-l) 4.5rem; }
.sandbox-notice {
  margin-bottom: 2rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--accent);
  background: #fdf0e9;
  color: var(--ink);
  font-size: 0.9375rem;
}
.small-title { margin-bottom: 2.5rem; }
.small-title::after { content: ""; display: block; width: 4rem; height: 1px; margin-top: 1rem; background: var(--accent); }

/* Each product is a standalone HTML section. Duplicate it to add another. */
.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.product + .product { margin-top: var(--space-l); padding-top: var(--space-l); border-top: 1px solid var(--line); }
.product-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 19rem;
  border-radius: 0.5rem;
  background: #fdf0e9;
}
.product-art img { display: block; width: 100%; height: auto; }
.product-kind { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; }
.product h3 { font-size: clamp(1.875rem, 3vw, 2.25rem); }
.product-description { max-width: 31rem; margin-bottom: 1.5rem; }
.product-video { margin-bottom: 1.5rem; }
.video-link { display: inline-flex; align-items: center; gap: 0.4em; text-decoration: underline dashed 1px; }
.popup-icon { width: 1em; height: 1em; flex-shrink: 0; }
.product-details { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 0; margin: 0 0 1.75rem; list-style: none; font-size: 0.9375rem; }
.product-details li { display: flex; align-items: center; gap: 0.5rem; }
.product-details li::before { content: ""; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--accent); }
.buy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875em 1.875em;
  min-width: 8rem;
  border: 0;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--accent-support);
  font: 700 1rem / 1.25 "Karla", sans-serif;
  cursor: pointer;
}
.buy-button:is(:hover, :focus-visible, :active) {
  box-shadow: 0 0 1px 7px var(--accent-halo);
  color: var(--accent-support);
}
.buy-button:disabled { cursor: default; opacity: 1; }
.checkout-note { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.875rem; }
.site-footer { padding-block: 1.75rem 2.25rem; border-top: 1px solid var(--line); }
.footer-inside { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.site-info { margin: 0; font-size: 0.8125rem; letter-spacing: 0.05em; }
.footer-navigation { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; font-size: 0.9375rem; }
.footer-navigation a { color: inherit; text-decoration-color: var(--line); }
.footer-navigation a:where(:hover, :focus-visible, :active) { color: var(--accent); }
.footer-navigation a[aria-current="page"] { text-decoration-color: var(--accent); }

/* Legal pages remain ordinary HTML, including the summary and full agreement. */
.legal { padding-block: var(--space-l) 5rem; }
.legal h1 { margin-bottom: 2rem; font-size: clamp(2.25rem, 5vw, 3rem); }
.placeholder-notice { border-left: 3px solid var(--accent); padding-left: 1.5rem; margin-block: 2rem; }
.placeholder-notice h2 { font-size: 1.5rem; }
.placeholder-notice p:last-child { margin-bottom: 0; }
.back-link { display: inline-block; margin-top: 1rem; }
.legal-layout { max-width: 61rem; margin-inline: auto; }
.legal-prose { max-width: 45rem; margin-inline: auto; }
.legal-chapter { margin-top: 4rem; scroll-margin-top: 1.5rem; }
.legal-chapter > .legal-prose > h2 { font-size: clamp(1.75rem, 4vw, 2rem); line-height: 1.25; }
.legal-introduction h1 { max-width: 44rem; margin-bottom: 1.25rem; }
.legal-version { color: var(--muted); font-size: 0.9375rem; margin-bottom: 1.75rem; overflow-wrap: anywhere; }
.legal-notice { padding: 1rem 1.25rem; margin-bottom: 2rem; border-left: 3px solid var(--accent); background: #fdf0e9; font-size: 0.9375rem; }
.legal-notice strong { color: var(--ink); }
.legal-summary { padding: clamp(1.25rem, 4vw, 2.5rem); margin-block: 3rem; background: var(--pale); border: 1px solid var(--line); border-radius: 0.5rem; }
.legal-summary > .eyebrow { margin-bottom: 0.75rem; }
.legal-summary h2 { font-size: 2rem; }
.legal-summary > h3 { margin-top: 0; font-size: 1.5rem; }
.legal-summary-intro { max-width: 48rem; margin-bottom: 1.75rem; font-size: 1rem; }
.legal-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; list-style: none; padding: 0; margin: 0; }
.legal-highlights li { display: flex; align-items: flex-start; gap: 0.875rem; }
.legal-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 50%; background: #fdf0e9; color: var(--accent); }
.legal-icon svg { width: 1.4rem; height: 1.4rem; }
.legal-highlights h3, .legal-highlights h4 { margin: 0.15rem 0 0.5rem; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.015em; }
.legal-highlights p { margin: 0; font-size: 1rem; line-height: 1.5; }
.legal-summary-contact { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.legal-contents { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.legal-section { margin-top: 2.75rem; scroll-margin-top: 1.5rem; }
.legal-section h2 { font-size: clamp(1.5rem, 3vw, 1.75rem); line-height: 1.25; }
.legal-section h3 { margin-top: 1.75rem; font-size: 1.25rem; line-height: 1.3; }
.legal-section h4 { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.3; }
.legal-section ul { padding-left: 1.4rem; margin-bottom: 1.25rem; }
.legal-section li + li { margin-top: 0.5rem; }
.legal-prose strong { color: var(--ink); }
.supplier-details { margin-block: 1.5rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 0.25rem; font-style: normal; font-size: 1rem; overflow-wrap: anywhere; }
.legal-callout { border-left: 3px solid var(--accent); background: var(--pale); padding: 1.25rem; margin-block: 1.5rem; }
.legal-callout h3, .legal-callout h4 { margin-top: 0; }
.legal-callout p:last-child { margin-bottom: 0; }

/* Keep the page scrollbar visible. Native dialogs manage focus and Escape;
   contain scrolling inside the popup without changing the page's overflow. */
.store-dialog {
  width: calc(100% - 2rem);
  max-width: 36rem;
  max-height: calc(100dvh - 2rem);
  overscroll-behavior: contain;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  color: var(--text);
  background: #fff;
  box-shadow: 0 1.5rem 5rem rgba(31, 41, 55, 0.2);
}
.store-dialog::backdrop { background: rgba(31, 41, 55, 0.65); }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.dialog-header h2 { margin: 0; font-size: 1.75rem; }
.dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  margin: -0.5rem -0.5rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pale);
  color: var(--muted);
  font: 400 1.75rem / 1 "Karla", sans-serif;
  cursor: pointer;
}
.dialog-close:hover { color: var(--accent); }
.dialog-subtext { color: var(--muted); font-size: 0.875rem; }
.store-dialog > :last-child { margin-bottom: 0; }
.video-dialog { max-width: 56rem; }
.video-player { aspect-ratio: 16 / 9; min-height: 200px; background: var(--ink); margin-bottom: 1rem; }
.video-player iframe { display: block; width: 100%; height: 100%; min-height: 200px; border: 0; }
.acceptance-label { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; }
.acceptance-label input { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin: 0.25rem 0 0; accent-color: var(--accent); }
.delivery-details { border: 0; border-top: 1px solid var(--line); padding: 1.25rem 0 0; margin: 1.5rem 0 0; min-width: 0; }
.delivery-details legend { padding: 0 0.5rem 0 0; color: var(--ink); font-weight: 700; }
.delivery-details > :last-child { margin: 1rem 0 0; }
.delivery-email-field { margin-top: 1rem; }
.delivery-email-field label { display: block; margin-bottom: 0.5rem; font-weight: 700; color: var(--ink); }
.email-input { width: 100%; min-width: 0; border: 1px solid var(--muted); border-radius: 0.25rem; padding: 0.625rem 0.75rem; font: inherit; color: var(--ink); background: #fff; }
.delivery-email-field .dialog-subtext { margin: 0.5rem 0 0; }
.dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.75rem; }
.purchase-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.store-dialog .buy-button:disabled { opacity: 0.45; box-shadow: none; cursor: not-allowed; }
.text-button { padding: 0.5rem 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.text-button:hover { color: var(--accent); }

@media (max-width: 700px) {
  .legal-highlights { grid-template-columns: 1fr; gap: 1.5rem; }
  .product { grid-template-columns: 1fr; gap: 1.75rem; }
  .product-art { min-height: 0; }
  .product-art img { max-height: 19rem; object-fit: contain; }
  .footer-inside { align-items: flex-start; flex-direction: column; }
}
@media print {
  .site-header, .site-footer, .skip-link, .legal-contents, .back-link { display: none; }
  .legal { padding: 0; }
  .legal-layout, .legal-prose { max-width: none; }
  .legal-summary { padding: 1rem; margin-block: 1.5rem; }
  .legal-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-highlights li, .supplier-details, .legal-callout { break-inside: avoid; }
  .legal-chapter h2, .legal-section h2, .legal-section h3, .legal-section h4 { break-after: avoid; }
}
@media (prefers-reduced-motion: no-preference) {
  a { transition: color 0.3s ease, opacity 0.3s ease; }
  .buy-button {
    transition: background-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
  }
}