/* Hallmark · v2.0.0 · Editorial · hero: Banner · bag-style still life · single-page guide */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: E, keep the mobile comparison in the natural reading order with no sideways scroll */
:root {
  color-scheme: light;
  --paper: #f7f5ec;
  --paper-inset: #ebece0;
  --ink: #19271e;
  --body: #303b31;
  --muted: #4d594e;
  --rule: #b4b9ac;
  --accent: #2e633e;
  --focus: #2e633e;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: Spectral, Georgia, serif;
  --wrap: 75rem;
  --gutter: clamp(1.125rem, 4vw, 3rem);
  --gap: clamp(1.5rem, 5vw, 4.5rem);
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage-grotesque.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

@font-face {
  font-family: Spectral;
  src: url("assets/fonts/spectral.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font: 400 1.125rem/1.5 var(--font-body);
}

.wrap { width: min(calc(100% - 2 * var(--gutter)), var(--wrap)); margin-inline: auto; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 {
  min-width: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
  color: var(--ink);
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.99;
}
h1 { max-width: 9ch; font-size: clamp(3.125rem, 7.3vw, 7rem); }
h2 { font-size: clamp(2.1rem, 4vw, 3.65rem); }
h3 { font-size: clamp(1.75rem, 3vw, 2.65rem); }
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 0.23em; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
a:active { text-decoration-thickness: 2px; }

.skip-link {
  position: absolute;
  z-index: 2;
  inset: 0 auto auto var(--gutter);
  padding: 0.65rem 1rem;
  background: var(--paper);
  transform: translateY(-150%);
}
.skip-link:focus-visible { transform: translateY(0.75rem); }

.masthead, .site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-block: 0.8rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
}
.masthead { border-bottom: 3px solid var(--ink); }
.wordmark { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.04em; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
nav a, .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: var(--gap);
  padding-block: clamp(2.75rem, 5.2vw, 4.75rem) clamp(2rem, 5vw, 4.25rem);
}
.hero-copy p { margin-block: 1.35rem 1.55rem; font-size: clamp(1.2rem, 2vw, 1.5rem); }
.button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.55rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
}
.button:hover { background: var(--accent); color: var(--paper); }
figure img { display: block; width: 100%; height: auto; background: var(--paper-inset); }
figcaption { margin-top: 0.45rem; color: var(--muted); font: 500 0.825rem/1.35 var(--font-display); }

.section { border-top: 3px solid var(--ink); padding-block: clamp(1.65rem, 6vw, 5rem); scroll-margin-top: 1rem; }
.comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: 1.6rem; }
dl { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); margin-top: 1rem; }
dt, dd { border-top: 1px solid var(--rule); padding-block: 0.9rem; }
dt { padding-right: 0.5rem; color: var(--ink); font: 500 1rem/1.6 var(--font-display); }
dd { font-size: 1rem; }

.checklist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); }
.checklist p { max-width: 32ch; margin-top: 0.75rem; }
.checklist ul { list-style: none; margin: 0; padding: 0.35rem 1rem; background: var(--paper-inset); }
.checklist li { display: grid; grid-template-columns: 7.75rem minmax(0, 1fr); gap: 0.4rem 0.75rem; padding-block: 0.65rem; font-size: 1rem; }
.checklist li + li { border-top: 1px solid var(--rule); }
.checklist strong { font-family: var(--font-display); font-weight: 500; color: var(--ink); }

.sources { padding-inline: clamp(1rem, 3vw, 2rem); background: var(--paper-inset); }
.sources p { max-width: 42ch; margin-top: 0.8rem; color: var(--ink); font-size: clamp(1.25rem, 2.3vw, 2rem); }
.sources ul { margin-bottom: 0; padding-left: 1.3rem; }
.sources li + li { margin-top: 0.35rem; }
.site-footer { border-top: 1px solid var(--rule); }

@media (max-width: 48rem) {
  .hero { grid-template-columns: minmax(0, 1fr); align-items: start; padding-block: 2.25rem 2rem; }
  h1 { max-width: 12ch; }
  .comparison, .checklist { grid-template-columns: minmax(0, 1fr); }
  .comparison article + article { border-top: 1px solid var(--rule); padding-top: 1.3rem; }
}

@media (max-width: 26rem) {
  .masthead { flex-wrap: wrap; }
  nav { width: 100%; }
  .checklist li { grid-template-columns: minmax(0, 1fr); gap: 0.12rem; }
}