/* American Craft Candle Company — design system per _planning/STAGE3-DESIGN.md §F.
   Fonts: EB Garamond (display) and Source Serif 4 (body), self-hosted from /assets/fonts/ (SIL OFL 1.1;
   sources and hashes in src/assets/fonts/README.md). Source Sans 3 is not approved or downloaded: UI text
   (nav, buttons, forms, labels) stays on the system sans stack. No third-party font requests. */

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-var.woff2") format("woff2");
}

:root {
  --ink: #1d2340;
  --oxblood: #6e1a1f;
  --oxblood-hover: #8a2a2f;
  --cream: #f6f1e7;
  --sand: #e9e1d0;
  --white: #ffffff;
  --stone: #5f5953;
  --rule: #d9d0bf;
  --rule-strong: #8b8680;
  --parchment: #d8cfbd;

  --font-display: "EB Garamond", Garamond, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-ui: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: 20px;
  --section: 64px;
  --radius: 2px;
}
@media (min-width: 760px) {
  :root { --gutter: 32px; --section: 96px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
}
@media (min-width: 760px) { body { font-size: 19px; } }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; margin: 0 0 16px; text-wrap: balance; }
h1 { font-size: clamp(38px, 5vw, 52px); }
h2 { font-size: clamp(28px, 3.4vw, 36px); line-height: 1.15; }
h3 { font-size: clamp(22px, 2.4vw, 26px); line-height: 1.2; }
p { margin: 0 0 16px; }
a { color: var(--oxblood); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--oxblood-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
main:focus { outline: none; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(680px + 2 * var(--gutter)); }
.wrap--form { max-width: calc(760px + 2 * var(--gutter)); }
.center { text-align: center; }
.eyebrow {
  font-family: var(--font-display);
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
  font-size: 17px;
  color: var(--stone);
  margin: 0 0 8px;
}
.lead { font-size: 1.15em; }
.text-link { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.45; letter-spacing: .01em; }

.skip-link { position: absolute; left: 8px; top: -60px; z-index: 10; background: var(--white); color: var(--ink); padding: 12px 16px; font-family: var(--font-ui); }
.skip-link:focus { top: 8px; }

/* ---------- review markers (draft builds only) ---------- */
.draft-banner {
  background: var(--sand); color: var(--ink); border-bottom: 1px dashed var(--rule-strong);
  font: 500 14px/1.4 var(--font-ui); padding-block: 8px;
}
.pend {
  border: 2px dashed var(--oxblood); background: var(--white); color: var(--ink);
  padding: 16px 20px; margin: 0 0 24px; font: 400 16px/1.5 var(--font-ui);
}
.pend p { margin: 0; }
.pend__tag, .proposed-block__tag {
  font: 600 13px/1.4 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--oxblood); margin-bottom: 4px !important;
}
.pend--inline { display: inline-block; padding: 4px 10px; margin: 0; border-width: 1px; }
.pend--inline .pend__tag { display: inline; margin: 0 !important; }
.proposed { text-decoration: underline dotted var(--oxblood); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.proposed::after {
  content: "proposed"; margin-left: 6px; padding: 1px 6px; vertical-align: middle;
  font: 600 11px/1.4 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
  color: var(--oxblood); border: 1px solid var(--oxblood); border-radius: var(--radius); background: var(--white);
}
.proposed-block { border-left: 4px dotted var(--oxblood); padding-left: 16px; margin-bottom: 24px; }

/* ---------- image slots and placeholders ---------- */
.slot { margin: 0; --ar: 1 / 1; }
.slot--1x1 { --ar: 1 / 1; }
.slot--4x5 { --ar: 4 / 5; }
.slot--3x2 { --ar: 3 / 2; }
.slot--7x3 { --ar: 7 / 3; }
.slot img { width: 100%; aspect-ratio: var(--ar); object-fit: cover; }
.ph {
  aspect-ratio: var(--ar);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 16px; text-align: center;
  border: 1px dashed var(--rule-strong);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgb(139 134 128 / .08) 14px 15px),
    var(--sand);
  color: var(--stone);
}
.ph__tag { font: 600 12px/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--oxblood); }
.ph__what { font: 500 18px/1.25 var(--font-display); color: var(--ink); max-width: 28ch; }
.ph__meta { font: 400 12px/1.3 var(--font-ui); word-break: break-word; }

/* ---------- header and navigation ---------- */
.site-header { background: var(--white); border-bottom: 1px solid var(--rule); position: relative; }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 88px; padding-block: 12px; }
.brand { display: block; color: var(--ink); text-decoration: none; }
.brand__logo { width: 180px; }
.brand--placeholder {
  width: 180px; aspect-ratio: 7 / 3; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 8px 12px; border: 1px dashed var(--rule-strong);
}
.brand__name { font: 500 19px/1.1 var(--font-display); }
.brand__tag { font: 600 10px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--oxblood); }
@media (min-width: 760px) {
  .brand__logo, .brand--placeholder { width: 240px; }
  .brand__name { font-size: 24px; }
}
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 20px/1 var(--font-display); letter-spacing: .01em; color: var(--ink); text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.site-nav a[aria-current] { text-decoration: underline 2px var(--oxblood); text-underline-offset: 6px; }
.site-nav .nav-button { padding: 0 16px; border: 1.5px solid var(--ink); border-radius: var(--radius); }
.site-nav .nav-button:hover { background: var(--ink); color: var(--cream); text-decoration: none; }
.site-nav .nav-button[aria-current] { background: var(--ink); color: var(--cream); text-decoration: none; }
.menu-toggle { display: none; }

@media (max-width: 759px) {
  /* Without JavaScript the menu is a visible stacked list. */
  .site-nav { width: 100%; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--rule); }
  .site-nav li { border-bottom: 1px solid var(--rule); }
  .site-nav a { width: 100%; min-height: 52px; font-size: 21px; }
  .site-nav .nav-button { border: 0; padding: 0; }
  .site-nav .nav-button[aria-current] { background: none; color: var(--ink); text-decoration: underline 2px var(--oxblood); }
  .js .menu-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
    font: 500 20px/1 var(--font-display); letter-spacing: .01em; color: var(--ink); background: var(--white);
    border: 1.5px solid var(--ink); border-radius: var(--radius); cursor: pointer;
  }
  .js .menu-toggle::after { content: "▾"; margin-left: 8px; font-size: 14px; }
  .js .menu-toggle[aria-expanded="true"]::after { content: "▴"; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  /* The same collapsed state, applied before the script has run whenever scripting is available, so the full list
     never flashes at first paint. Without scripting this block does not apply and the visible list above remains. */
  @media (scripting: enabled) {
    .menu-toggle {
      display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
      font: 500 20px/1 var(--font-display); letter-spacing: .01em; color: var(--ink); background: var(--white);
      border: 1.5px solid var(--ink); border-radius: var(--radius); cursor: pointer;
    }
    .menu-toggle::after { content: "▾"; margin-left: 8px; font-size: 14px; }
    .menu-toggle[aria-expanded="true"]::after { content: "▴"; }
    .site-nav { display: none; }
    .site-nav.is-open { display: block; }
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  font: 600 19px/1.2 var(--font-display); letter-spacing: .01em; text-decoration: none; border-radius: var(--radius); cursor: pointer;
  border: 1.5px solid transparent;
}
.btn--primary { background: var(--oxblood); color: var(--white); border-color: var(--oxblood); }
.btn--primary:hover { background: var(--oxblood-hover); border-color: var(--oxblood-hover); color: var(--white); text-decoration: none; }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--cream); text-decoration: none; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 479px) { .button-row .btn { width: 100%; } }

/* ---------- sections and bands ---------- */
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) / 2); }
.section__head { margin-bottom: 32px; }
.section__title { margin-bottom: 32px; }
.section__more { margin: 32px 0 0; text-align: right; }
.band { padding-block: var(--section); }
.band--sand { background: var(--sand); }
.band--navy { background: var(--ink); color: var(--parchment); }
.band--inquiry { border-top: 1px solid var(--rule); }
.band__line { font: 500 clamp(24px, 3vw, 30px)/1.25 var(--font-display); margin-bottom: 24px; }
.page-intro { padding-top: 48px; }
.page-top { padding-top: 48px; padding-bottom: calc(var(--section) / 2); }
.quote blockquote { margin: 0 0 16px; font: italic 400 clamp(24px, 3vw, 32px)/1.35 var(--font-display); color: var(--cream); }
.quote__cite { font: 400 16px/1.4 var(--font-ui); }

/* ---------- home hero and split layouts ---------- */
.hero { display: grid; gap: 32px; padding-block: 48px; align-items: center; }
.hero__photo { max-width: 520px; width: 100%; }
@media (max-width: 699px) {
  /* Shorter photo on phones so the primary button lands on the first screen. */
  .hero__photo { --ar: 5 / 4; }
  .hero__photo img { object-position: 50% 70%; }
}
@media (min-width: 700px) {
  .hero { grid-template-columns: 5fr 6fr; gap: 40px; }
}
@media (min-width: 900px) {
  .hero { gap: 64px; }
}
.split { display: grid; gap: 32px; align-items: center; }
.split__photo { width: 100%; max-width: 560px; }
.band--sand .split__photo, .page-top .split__photo { max-width: 440px; justify-self: center; }
@media (min-width: 700px) {
  .split { grid-template-columns: 1fr 1fr; gap: 40px; }
  .split--reverse > .split__photo { order: -1; }
}
@media (min-width: 900px) {
  .split { gap: 64px; }
}
@media (max-width: 699px) {
  /* Photo first on mobile for the sections that lead with an image. */
  .band--sand .split__photo, .page-top .split__photo { order: -1; }
}

/* ---------- candle cards ---------- */
.card-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card__link { display: block; color: var(--ink); text-decoration: none; }
.card__photo { background: var(--white); border: 1px solid var(--rule); transition: border-color .2s; }
.card__photo .ph { border: 0; }
.card__photo img { object-fit: contain; background: var(--white); transition: transform .2s; }
.card__link:hover { color: var(--ink); }
.card__link:hover .card__photo { border-color: var(--ink); }
.card__link:hover .card__photo img { transform: translateY(-2px); }
.card__name { font: 500 23px/1.2 var(--font-display); margin: 12px 0 4px; }
.card__notes { font-size: 16px; color: var(--stone); margin: 0 0 4px; }
.card__more { font: 600 18px/1.2 var(--font-display); letter-spacing: .01em; color: var(--oxblood); }
.card__link:hover .card__more { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- candle page ---------- */
.breadcrumb { padding-top: 24px; font: 400 15px/1.4 var(--font-ui); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumb li + li::before { content: "›"; margin-right: 8px; color: var(--stone); }
.breadcrumb [aria-current] { color: var(--stone); }
.product { display: grid; gap: 32px; padding-block: 24px 0; }
@media (min-width: 700px) { .product { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } }
@media (min-width: 900px) { .product { gap: 64px; } }
.product__view .slot { background: var(--white); border: 1px solid var(--rule); }
.product__view .ph { border: 0; }
.product__view img { object-fit: contain; }
.product__view + .product__view { margin-top: 16px; }
.js .product__view + .product__view { margin-top: 0; }
/* Without scripting both photos are shown stacked and the thumbnail strip stays hidden. With scripting the page starts
   in its interactive state (label view first, top view hidden but already loaded, thumbnails shown) before the script runs. */
.product__thumbs { display: none; gap: 8px; margin-top: 12px; }
.js .product__thumbs { display: flex; }
@media (scripting: enabled) {
  .product__view + .product__view { margin-top: 0; }
  .product__view + .product__view:not(.is-active) { display: none; }
  .product__thumbs { display: flex; }
}
.thumb {
  display: block; width: 88px; height: 88px; padding: 0; cursor: pointer; overflow: hidden;
  background: var(--white); border: 2px solid var(--rule); border-radius: var(--radius);
}
.thumb:hover { border-color: var(--rule-strong); }
.thumb[aria-pressed="true"] { border-color: var(--ink); }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.product__details { display: grid; gap: 8px; margin: 24px 0; padding-block: 16px; border-block: 1px solid var(--rule); font-family: var(--font-ui); }
.product__details div { display: flex; gap: 16px; }
.product__details dt { font-weight: 600; min-width: 96px; }
.product__details dd { margin: 0; }

/* ---------- custom candles, about ---------- */
.steps { margin: 0; padding-left: 1.4em; }
.steps li { margin-bottom: 12px; padding-left: 8px; }
.steps li::marker { font-family: var(--font-display); font-weight: 600; color: var(--oxblood); }
.photo-strip { display: grid; gap: 24px; align-items: start; }
@media (min-width: 640px) { .photo-strip { grid-template-columns: 2fr 3fr; } }
@media (min-width: 640px) { .photo-strip--three { grid-template-columns: 1fr 1fr 1fr; } }
.option-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .option-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .option-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.option-card { background: var(--white); border: 1px solid var(--rule); padding: 24px; }
.option-card h3 { margin-bottom: 8px; }
.option-card p { margin: 0; font-size: 17px; }
.prose { max-width: 680px; }
.link-list { padding-left: 1.2em; }
.link-list li { margin-bottom: 8px; }

/* ---------- contact ---------- */
.contact { display: grid; gap: 48px; padding-block: 32px var(--section); }
@media (min-width: 900px) { .contact { grid-template-columns: 3fr 2fr; gap: 64px; align-items: start; } }
.contact__aside { background: var(--sand); padding: 24px; }
.contact__aside h2 { font-size: 24px; }
.contact__note { font-size: 16px; margin-top: 16px; }

/* ---------- inquiry form ---------- */
.inquiry { font-family: var(--font-ui); }
.field { margin-bottom: 20px; }
.field label { display: block; font: 600 16px/1.4 var(--font-ui); margin-bottom: 6px; }
.field__optional { font-weight: 400; color: var(--stone); }
.field__hint { font-size: 15px; color: var(--stone); margin: 0 0 6px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  font: 400 17px/1.4 var(--font-ui); color: var(--ink); background: var(--white);
  border: 1.5px solid var(--rule-strong); border-radius: var(--radius);
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.field [aria-invalid="true"] { border: 2px solid var(--oxblood); }
.field__error { color: var(--oxblood); font: 600 15px/1.4 var(--font-ui); margin: 6px 0 0; }
.custom-fields { border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 16px 20px 4px; margin: 0 0 20px; background: var(--white); }
.custom-fields legend { font: 500 20px/1.2 var(--font-display); padding: 0 8px; }
.custom-fields__hint { font-size: 15px; color: var(--stone); }
.js .custom-fields__hint { display: none; }
/* Contact page: the custom-only group starts hidden when scripting is available (the script reveals it for "Custom
   candles"), so it does not appear and then vanish. The Custom Candles page marks it data-preset and shows it from the start. */
@media (scripting: enabled) {
  [data-custom-fields]:not([data-preset]):not(.is-open) { display: none; }
  .custom-fields__hint { display: none; }
}
.form-errors { border-left: 4px solid var(--oxblood); background: var(--white); padding: 16px 20px; margin-bottom: 24px; }
.form-errors__title { font: 600 18px/1.3 var(--font-ui); margin-bottom: 8px; }
.form-errors ul { margin: 0; padding-left: 1.2em; }
.form-errors a { color: var(--oxblood); font-weight: 500; }
.form-actions { margin-top: 8px; }
.form-privacy { font-size: 15px; color: var(--stone); margin-top: 16px; }
.mock-notice {
  font: 500 15px/1.45 var(--font-ui); background: var(--sand); color: var(--ink);
  border: 1px dashed var(--rule-strong); padding: 10px 14px; margin-bottom: 24px;
}
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--parchment); padding-block: 48px; font: 400 16px/1.5 var(--font-ui); }
.site-footer__inner { display: grid; gap: 24px; }
.site-footer__id { display: flex; gap: 16px; align-items: center; }
.site-footer__id p { margin: 0; }
.site-footer__name { font: 500 20px/1.3 var(--font-display); color: var(--cream); }
.site-footer a { color: var(--parchment); }
.site-footer a:hover { color: var(--white); }
.site-footer :focus-visible { outline-color: var(--cream); }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 18px/1 var(--font-display); letter-spacing: .01em; }
.site-footer__copy { font-size: 14px; margin: 0; }
.site-footer .pend { background: transparent; color: var(--parchment); border-color: var(--parchment); }
.site-footer .pend__tag { color: var(--cream); }
.band--navy .pend { background: transparent; color: var(--parchment); border-color: var(--parchment); }
.band--navy .pend__tag { color: var(--cream); }
@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: center; }
  .site-footer__nav, .site-footer__copy { justify-self: end; }
  .site-footer__copy { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .card__link:hover .card__photo img { transform: none; }
}