@font-face {
  font-family: "Barlow Condensed";
  src: url("barlow-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("barlow-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("source-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #20231f;
  --paper: #f6f3ec;
  --white: #fffdf8;
  --dark: #141513;
  --deep: #10110f;
  --muted: #585953;
  --line: #ded9ce;
  --signal: #b13d12;
  --hot: #ff6c36;
  --green: #216749;
  --focus: #1f6b4a;
  --title: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: "Source Sans 3", system-ui, sans-serif;
  --caption-size: .9375rem;
  --gutter: clamp(1.125rem, 4.45vw, 4.5rem);
  --radius: .65rem;
  font-family: var(--text);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 1.0625rem; line-height: 1.55; overflow-wrap: anywhere; }
main { min-height: 60vh; }
main:focus { outline: none; }
a { color: inherit; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
img { display: block; width: 100%; height: auto; }
h1, h2, h3 {
  font-family: var(--title);
  font-weight: 700;
  line-height: .99;
  margin: 0;
  text-wrap: balance;
  min-width: 0;
  overflow-wrap: anywhere;
}
h1 { font-size: clamp(3.1rem, 6.4vw, 6.4rem); letter-spacing: -.018em; }
h2 { font-size: clamp(2.2rem, 4.5vw, 3.65rem); letter-spacing: -.01em; }
h3 { font-size: 1.8rem; }
p { margin: 0; }
ul, ol { margin: 0; }
table { width: 100%; border-collapse: collapse; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
::selection { color: var(--deep); background: #ffc2a5; }
section[id], form[id], h2[id], summary[id] { scroll-margin-top: 1.25rem; }

.wrap { width: min(100% - 2 * var(--gutter), 82rem); margin-inline: auto; }
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  z-index: 10;
  inset-block-start: .6rem;
  inset-inline-start: .6rem;
  max-inline-size: calc(100% - 1.2rem);
  padding: .6rem 1rem;
  color: var(--deep);
  background: var(--hot);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }
.eyebrow {
  color: var(--signal);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .15em;
}
.eyebrow--light { color: #ffc2a5; }
.signal {
  display: inline-block;
  width: 1.25rem;
  height: 2px;
  margin: 0 .65rem .25em 0;
  background: var(--hot);
}
.arrow { display: inline-block; line-height: 1; font-family: system-ui, sans-serif; font-weight: 500; }
.button {
  min-height: 3.125rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .72rem;
  padding: .65rem 1.1rem;
  border: 1px solid transparent;
  border-radius: .28rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.button .arrow, .text-link .arrow { transition: transform .18s ease; }
.button:hover .arrow, .text-link:hover .arrow { transform: translateX(.2rem); }
.button--primary { background: var(--signal); color: white; }
.button--primary:hover { background: #8a2f06; }
.button--outline { border-color: #878377; background: transparent; color: var(--ink); }
.button--outline:hover { background: #eae3d6; border-color: var(--ink); }
.button--ghost { color: #fffaf1; background: #1818157a; border-color: #fff6e976; }
.button--ghost:hover { background: #34312b; border-color: #fff6e9; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  font-weight: 700;
  color: var(--signal);
  text-underline-offset: .27em;
}
.text-link:hover { color: #7e2b0c; }
.button--primary:active, .button--outline:active { filter: brightness(.92); }

.site-header, .hero, .site-footer, .hub-hero, .finder {
  color: #fffaf1;
  --focus: #ffd0a7;
}
.site-header {
  position: relative;
  z-index: 3;
  background: var(--dark);
  border-bottom: 1px solid #ffffff1a;
}
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.45rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .26em;
  width: fit-content;
  min-height: 2.75rem;
  font: 800 2.15rem/.96 var(--title);
  letter-spacing: -.025em;
  text-decoration: none;
  white-space: nowrap;
}
.brand-period, .brand-mark { color: var(--hot); }
.brand-mark { position: relative; display: block; width: .884em; height: .86em; flex: none; }
.brand-mark::before {
  content: "";
  position: absolute;
  inset: .084em .023em .019em;
  border: 2.5px solid currentColor;
  border-bottom-color: transparent;
  border-radius: 50%;
}
.brand-mark::after {
  content: "";
  position: absolute;
  left: .42em;
  top: .437em;
  width: .386em;
  height: 2.5px;
  border-radius: 5px;
  background: currentColor;
  transform: rotate(-40deg);
  transform-origin: left;
}
.main-nav { display: flex; gap: clamp(1.1rem, 2.4vw, 2.6rem); }
.main-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: .45rem .04rem;
  min-height: 2.75rem;
  color: #e6e2d9;
  text-decoration: none;
  font-weight: 600;
}
.main-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: .25rem;
  height: 2px;
  background: var(--hot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.main-nav a:hover::after, .main-nav a[aria-current]::after, .main-nav .nav-active::after { transform: scaleX(1); }
.header-actions { display: flex; justify-content: end; align-items: center; gap: .5rem; }
.search-toggle, .mobile-menu summary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .65rem;
  min-width: max(44px, 2.75rem);
  min-height: max(44px, 2.75rem);
  color: #f5f0e6;
  padding: .42rem .8rem;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid #ffffff5d;
  border-radius: .27rem;
}
.search-toggle:hover, .mobile-menu summary:hover { background: #2c2d28; }
.search-icon {
  position: relative;
  width: .91rem;
  height: .91rem;
  display: block;
  margin: 0 .15rem .13rem 0;
  border: 1.6px solid currentColor;
  border-radius: 50%;
}
.search-icon::after {
  content: "";
  position: absolute;
  width: .42rem;
  height: 1.6px;
  right: -.35rem;
  bottom: -.15rem;
  border-radius: 1rem;
  background: currentColor;
  transform: rotate(45deg);
}
.mobile-menu { display: none; }
.mobile-menu summary { cursor: pointer; list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.menu-icon { display: block; width: 1.13rem; height: .75rem; border-block: 2px solid currentColor; }
.mobile-menu[open] .menu-icon { transform: rotate(-12deg); color: var(--hot); }
.mobile-menu:not([open]) nav { display: none; }
.mobile-menu nav {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  display: grid;
  padding: .5rem var(--gutter) 1rem;
  background: var(--dark);
  border-bottom: 2px solid var(--hot);
  box-shadow: 0 14px 22px #0003;
  max-height: 65dvh;
  overflow: auto;
}
.mobile-menu nav a {
  display: flex;
  align-items: center;
  min-height: 2.8rem;
  padding: .35rem .1rem;
  border-bottom: 1px solid #ffffff27;
  text-decoration: none;
}
.mobile-menu nav a:hover { color: var(--hot); }

.hero { position: relative; isolation: isolate; background: var(--deep); overflow: clip; }
.hero-art { position: absolute; z-index: -2; inset: 0; }
.hero-art img { height: 100%; object-fit: cover; object-position: 73% 53%; }
.hero-art::after {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(90deg, #10110fed 0%, #10110fa0 33%, #10110f2e 58%, #10110f00 76%),
              linear-gradient(0deg, #10110f70 0%, #10110f00 21%);
}
.hero-inner { position: relative; display: flex; align-items: center; min-height: clamp(32.5rem, 42.4vw, 44rem); padding-block: 3.75rem 4.3rem; }
.hero-copy { width: min(62%, 44rem); animation: arrive .62s cubic-bezier(.2,.7,.3,1) both; }
@keyframes arrive {
  from { opacity: .82; transform: translateY(.62rem); }
  to { opacity: 1; transform: translateY(0); }
}
.hero h1 {
  margin: 1.08rem 0 1.55rem;
  font-size: clamp(4.5rem, 8.5vw, 8.85rem);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.026em;
  text-wrap: wrap;
}
.hero h1 span, .hero h1 em { display: block; }
.hero h1 em { color: var(--hot); font-style: normal; }
.hero-summary { max-width: 31ch; color: #e7e2da; font-size: clamp(1.15rem, 1.9vw, 1.375rem); line-height: 1.37; }
.hero-actions, .article-actions { display: flex; align-items: stretch; flex-wrap: wrap; gap: .7rem; margin-top: 1.58rem; }
.hero-actions .button--primary, .finder .button--primary { background: var(--hot); color: #18140e; }
.hero-actions .button--primary:hover, .finder .button--primary:hover { background: #ff8d62; }
.hero-ruler {
  height: .7rem;
  position: absolute;
  inset: auto 0 0;
  border-bottom: 1px solid #ffad7d55;
  background: repeating-linear-gradient(90deg,#ff9c6690 0 1px,transparent 1px 4.25rem) bottom left / 100% 100% no-repeat,
              repeating-linear-gradient(90deg,#ffb68d73 0 1px,transparent 1px .85rem) bottom left / 100% 48% no-repeat;
  mask-image: linear-gradient(90deg, #0000 0%, #000 8%, #000 94%, #0004);
}

.home-body { padding-block: 3.45rem 5.2rem; }
.home-categories { container-type: inline-size; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: .8rem 1.5rem; margin-bottom: 1.45rem; }
.section-heading h2 { text-wrap: wrap; }
.section-heading .text-link { flex-shrink: 0; }
.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.65vw, 1.55rem); }
.category-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.category-card:hover, .category-card:focus-visible { border-color: #c4a78b; }
.category-card:hover { box-shadow: 0 .65rem 1.65rem #2d231319; transform: translateY(-.25rem); }
.category-media { overflow: hidden; background: #30251d; }
.category-media img { aspect-ratio: 2.1; object-fit: cover; transition: transform .38s ease; }
.category-card:hover img { transform: scale(1.035); }
.category-body { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: 1.12rem 1.18rem 1.32rem; flex: 1; }
.category-body > div, .guide-card > div, .checklist li > div { min-width: 0; }
.category-body h3 { font-size: clamp(1.7rem, 3vw, 2.45rem); text-wrap: wrap; }
.category-body p { color: var(--muted); line-height: 1.35; margin-top: .3rem; }
.card-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 2.65rem;
  width: 2.65rem;
  height: 2.65rem;
  border: 1px solid #cfc7b7;
  border-radius: 50%;
  color: var(--signal);
  background: var(--paper);
  font: 500 1.1rem/1 system-ui, sans-serif;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.category-card:hover .card-arrow, .guide-card:hover .card-arrow { color: var(--white); background: var(--signal); border-color: var(--signal); }

.home-guide-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(16rem, .86fr); gap: 1.4rem; }
.guide-list { display: grid; gap: .65rem; padding: 0; list-style: none; }
.guide-list > li { min-width: 0; }
.guide-card {
  height: 100%;
  min-height: 5.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: var(--white);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.guide-card:hover { border-color: #bd9b81; background: #fffcf5; }
.guide-card h3 { font-size: 1.64rem; text-wrap: wrap; }
.guide-card p { margin-top: .34rem; color: var(--muted); line-height: 1.35; }
.guide-card .eyebrow { display: block; margin-bottom: .36rem; }
.compare-promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.3rem, 3.25vw, 2.8rem);
  background: #f0e5d5;
  border: 1px solid #e0cfba;
  border-radius: var(--radius);
}
.size-samples { display: flex; align-items: center; gap: 1rem; width: 100%; margin-bottom: 1.45rem; }
.size-samples span {
  display: grid;
  place-items: center;
  width: min(38%, 7rem);
  min-height: 2.8rem;
  color: #7e2b0c;
  background: #f9efe2;
  border: 2px solid #af4724;
  outline: 1px dashed #be7458;
  outline-offset: .23rem;
  border-radius: .16rem;
  font: 700 1.45rem/1 var(--title);
}
.size-samples span:last-child { min-height: 4.5rem; }
.compare-promo h3 { font-size: clamp(2.15rem, 4.1vw, 3.18rem); text-wrap: wrap; }
.compare-promo p { margin: .65rem 0 1.1rem; line-height: 1.4; }

.site-footer { background: var(--dark); }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.2rem 2rem; padding-block: 2rem 2.6rem; }
.footer-inner p { color: #d8d4cb; margin-top: .35rem; }
.footer-inner nav { display: flex; flex-wrap: wrap; align-content: start; gap: .25rem 1.4rem; }
.footer-inner nav a { min-height: 2.75rem; display: flex; align-items: center; text-decoration: none; color: #e4dfd3; }
.footer-inner nav a:hover { text-decoration: underline; text-underline-offset: .23em; }

.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; padding: 0; gap: .2rem .6rem; font-size: var(--caption-size); line-height: 1.35; list-style: none; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; color: #77766d; margin-inline-end: .6rem; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 2rem; text-underline-offset: .2em; }
.breadcrumbs a:hover { color: var(--signal); }
.breadcrumbs [aria-current] { font-weight: 700; }
.hub-hero { background: var(--dark); padding: 1rem 0 2.85rem; }
.hub-hero .breadcrumbs ol, .hub-hero .breadcrumbs li + li::before { color: #d5d2c9; }
.hub-hero .breadcrumbs a:hover { color: #ffb58c; }
.hub-hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 2.1rem; padding-top: 1rem; }
.hub-hero h1 { margin: .55rem 0 .75rem; }
.hub-hero h1 + p { max-width: 46ch; color: #e4ddd2; font-size: 1.18rem; line-height: 1.43; }
.hub-image { overflow: hidden; border-radius: var(--radius); border: 1px solid #ffffff2e; }
.hub-image img { aspect-ratio: 2.1; object-fit: cover; }
.page-section { padding-block: 1.1rem 4.8rem; }
.page-section > .section-heading:first-child { margin-top: 1.75rem; }
.page-heading { margin-block: 1.4rem 1.45rem; }
.page-heading p, .info-lede { font-size: clamp(1.12rem, 2.2vw, 1.32rem); line-height: 1.42; color: var(--muted); max-width: 57ch; margin-top: .8rem; }
.hub-guides .guide-list, .directory-group .guide-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
.directory-form { width: min(100%, 42rem); }
.search-form { display: flex; flex-wrap: wrap; align-items: stretch; gap: .55rem; }
.search-form input, .field-row select, [data-compare-share] {
  width: 100%;
  min-width: 0;
  min-height: 2.85rem;
  padding: .5rem .65rem;
  border: 1px solid #837c6e;
  border-radius: .28rem;
  background: var(--white);
  color: var(--ink);
}
.search-form input { flex: 1 1 9em; }
.search-form input::placeholder { color: #676961; opacity: 1; font-weight: 400; }
.search-form .button { flex-shrink: 0; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 .55rem; }
.chip {
  min-height: 2.75rem;
  padding: .42rem .88rem;
  border-radius: 3rem;
  border: 1px solid #8d8a7f;
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
}
.chip:hover { background: #f0e5d5; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.result-count { color: var(--muted); font-size: var(--caption-size); }
.directory-group { margin-top: 2rem; }
.directory-group h2 { font-size: clamp(2rem, 3.6vw, 2.95rem); margin-bottom: .7rem; }
.empty-search { margin-top: 1.6rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.empty-search h2 { margin-bottom: .5rem; font-size: 2.2rem; }

.search-dialog {
  --focus: #1f6b4a;
  width: min(calc(100% - 2rem), 39rem);
  max-height: min(84vh, calc(100% - 2rem));
  padding: clamp(1rem, 3.8vw, 1.8rem);
  margin: min(11vh, 5rem) auto auto;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: .72rem;
  box-shadow: 0 2rem 7rem #0005;
}
.search-dialog::backdrop { background: #10110fba; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.dialog-head h2 { font-size: clamp(1.95rem, 4.6vw, 2.8rem); }
.icon-button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid #8d8a7f;
  border-radius: .3rem;
  color: var(--ink);
  background: var(--paper);
  font-size: 1.8rem;
  line-height: 1;
}
.icon-button:hover { background: #eae3d6; }
.dialog-results { margin: .8rem 0 .45rem; }
.dialog-results ul { list-style: none; padding: 0; }
.dialog-results li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 2.9rem;
  gap: .55rem;
  padding: .45rem .08rem;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  text-decoration: none;
}
.dialog-results a:hover { color: var(--signal); }
.dialog-results small { color: var(--muted); font-size: var(--caption-size); font-weight: 600; }

.article { padding-block: 1.1rem 4.8rem; }
.article-intro { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(15rem, .8fr); gap: clamp(1.1rem, 4vw, 4rem); align-items: center; margin: 1.55rem 0 2.4rem; }
.article-intro--solo { grid-template-columns: minmax(0, 1fr); }
.more-group-title { font-size: 1.15rem; margin: 1.4rem 0 .6rem; }
.article-intro h1 { font-size: clamp(2.85rem, 5.8vw, 5.55rem); margin: .6rem 0 1rem; text-wrap: wrap; }
.direct-answer { max-width: 65ch; border-left: 3px solid var(--signal); padding-left: .9rem; font-size: clamp(1.12rem, 2vw, 1.32rem); line-height: 1.43; }
.article-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .8rem; margin-top: .62rem; font-size: var(--caption-size); color: var(--muted); }
.article-byline a { display: inline-flex; align-items: center; min-height: 1.75rem; color: var(--signal); font-weight: 700; text-underline-offset: .22em; }
.article-actions { margin-top: 1.18rem; }
.article-index { margin-top: 1rem; max-width: 36rem; border: 1px solid #bcb1a1; border-radius: var(--radius); background: var(--white); }
.article-index summary { display: flex; justify-content: space-between; align-items: center; gap: .7rem; min-height: 2.75rem; padding: .55rem .8rem; cursor: pointer; list-style: none; font-weight: 700; }
.article-index summary::-webkit-details-marker { display: none; }
.article-index summary:hover, .article-index[open] summary { color: var(--signal); }
.article-index ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); column-gap: 1rem; padding: .14rem .8rem .45rem; list-style: none; }
.article-index a { display: flex; justify-content: space-between; align-items: center; gap: .38rem; min-height: 2.75rem; padding-block: .32rem; border-top: 1px solid var(--line); color: var(--signal); text-underline-offset: .22em; font-size: 1rem; line-height: 1.3; }
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem); gap: clamp(1.2rem, 4vw, 3.55rem); }
.article-main { min-width: 0; }
.article-main section { margin-block: 0 2.6rem; }
.article-main h2, .article-related h2, .compare-result h2 { font-size: clamp(2.15rem, 4vw, 3.15rem); margin-bottom: .85rem; }
.checklist { display: grid; grid-template-columns: minmax(0,1fr); list-style: none; padding: 0; gap: .65rem; }
.checklist li { display: flex; align-items: start; gap: .85rem; padding: .95rem 1.1rem; background: var(--white); border: 1px solid var(--line); border-radius: .35rem; }
.checklist h3 { font-size: 1.57rem; text-wrap: wrap; margin-bottom: .25rem; }
.checklist p, .options-table td { color: #40433d; line-height: 1.45; }
.check-icon { display: grid; place-items: center; flex: 0 0 1.55rem; height: 1.55rem; margin-top: .05rem; border-radius: 50%; background: #e7f0e7; color: var(--green); }
.check-icon::after { content: ""; width: .62rem; height: .34rem; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateY(-.1rem) rotate(-45deg); }
.options-table, .compare-table { border: 1px solid var(--line); background: var(--white); table-layout: fixed; line-height: 1.42; }
.options-table td, .options-table th, .compare-table td, .compare-table th { padding: .72rem .85rem; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
.options-table thead, .compare-table thead { background: #eae4d8; }
.options-table th:first-child { width: 31%; }
.comparison-link { margin-top: .35rem; }
.faq { border-top: 1px solid #cfc9bc; }
.faq details { border-bottom: 1px solid #cfc9bc; }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 3.3rem;
  gap: .8rem;
  padding: .55rem .35rem;
  font-weight: 700;
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--signal); }
.faq details > p { padding: 0 1.9rem .9rem .35rem; color: #3f413b; line-height: 1.45; }
.details-icon { display: grid; place-items: center; flex: 0 0 1rem; width: 1rem; height: 1rem; position: relative; color: var(--signal); }
.details-icon::before, .details-icon::after { content: ""; grid-area: 1 / 1; width: .76rem; height: 2px; background: currentColor; transition: transform .22s ease; }
.details-icon::after { transform: rotate(90deg); }
details[open] .details-icon::after { transform: rotate(0); }
.sources ul { padding-left: 1.15rem; }
.sources a { display: inline-flex; align-items: center; gap: .32rem; min-height: 2.75rem; padding: .25rem 0; color: var(--signal); text-underline-offset: .24em; }
.index-back { margin: -.85rem 0 1.25rem; }
.aside-photo { border-radius: var(--radius); overflow: hidden; }
.aside-photo img { aspect-ratio: 1.52; object-fit: cover; }
.article-related { border-top: 1px solid var(--line); padding-top: 1.55rem; }
.article-related h2 { margin: 0; }
.article-related .guide-list { grid-template-columns: repeat(2, minmax(0,1fr)); }

.compare-page { max-width: 67rem; }
.compare-controls { container-type: inline-size; background: var(--white); border: 1px solid var(--line); padding: 1.2rem; border-radius: var(--radius); }
.compare-controls .field-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .6rem; }
.field-row label { display: grid; gap: .22rem; min-width: 0; font-weight: 700; }
.field-row select { font-weight: 400; text-overflow: ellipsis; }
.compare-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .85rem; }
.compare-actions [role="status"] { font-size: var(--caption-size); color: var(--green); }
.compare-controls [data-compare-share] { margin-top: .7rem; }
.compare-result { margin-top: 1.75rem; }
.compare-result h2 { margin-bottom: .45rem; }
.compare-result p { margin-bottom: .85rem; color: var(--muted); }
.compare-table th:first-child { width: 26%; }
.compare-table .text-link { flex-wrap: wrap; }
.compare-source { display: flex; align-items: center; gap: .25rem; min-height: 2.75rem; color: var(--muted); font-size: var(--caption-size); text-underline-offset: .23em; }
.info-page .reading-width { max-width: 68ch; margin-block: 1.5rem .8rem; }
.info-page h2 { font-size: 2.55rem; margin: 1.55rem 0 .55rem; }

@media (max-width: 950px) {
  .article-grid { grid-template-columns: minmax(0, 1fr) minmax(10rem, 12.5rem); }
  .category-body { padding: .85rem .8rem 1rem; }
  .category-body .card-arrow { flex-basis: 2.28rem; width: 2.28rem; height: 2.28rem; }
}
@media (max-width: 790px) {
  .header-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .55rem; min-height: 3.8rem; padding-block: .26rem; }
  .header-actions { flex-wrap: wrap; max-inline-size: 100%; margin-inline-start: auto; }
  .brand { font-size: min(2.15rem, 9vw + .36rem); max-inline-size: 100%; }
  .main-nav { display: none; }
  .mobile-menu { display: block; }
  .hero h1 { font-size: clamp(4.15rem, 10vw, 6.35rem); }
  .article-grid { display: block; }
  .article-aside { display: none; }
}
@media (max-width: 700px) {
  .hero-summary { font-size: 1.14rem; }
  .hero-actions { margin-top: 1.05rem; }
  .home-body { padding-top: 2.25rem; padding-bottom: 3rem; }
  .home-categories .section-heading { align-items: start; flex-direction: column; gap: .2rem; }
  .home-categories .section-heading .text-link { min-height: 2.25rem; }
  .category-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .category-card { display: grid; grid-template-columns: 33% minmax(0, 1fr); }
  .category-media img { height: 100%; aspect-ratio: auto; }
  .category-body { min-height: 6.65rem; }
  .category-body h3 { font-size: clamp(1.55rem, 5.3vw, 2.2rem); }
  .category-body p { font-size: .95rem; }
  .home-guide-grid { grid-template-columns: minmax(0,1fr); gap: .85rem; }
  .compare-promo { padding: 1.25rem; }
  .size-samples { margin-bottom: 1.1rem; }
  .hub-hero-grid, .article-intro { grid-template-columns: minmax(0,1fr); gap: 1rem; }
  .hub-hero { padding-bottom: 1.5rem; }
  .hub-hero h1 { margin: .4rem 0 .6rem; }
  .hub-image img { aspect-ratio: 2.15; }
  .hub-guides .guide-list, .directory-group .guide-list, .article-related .guide-list { grid-template-columns: minmax(0,1fr); }
  .article-intro { margin-top: 1.1rem; margin-bottom: 1.6rem; }
  .compare-controls .field-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .compare-controls .field-row label:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .site-header .brand { font-size: min(1.9rem, 9vw + .36rem); }
  .search-toggle, .mobile-menu summary { padding-inline: .45rem; }
  .search-toggle .search-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 430px) {
  .hero .eyebrow { letter-spacing: .11em; }
  .hero .button { padding-inline: .63rem; gap: .38rem; font-size: 1rem; }
  .section-heading { align-items: start; flex-direction: column; }
  .category-body { gap: .38rem; }
  .category-body .card-arrow { flex-basis: 1.9rem; width: 1.9rem; height: 1.9rem; }
  .article-actions .button { padding-inline: .85rem; }
  .compare-controls { padding: .85rem; }
  .compare-table th, .compare-table td { padding: .58rem .36rem; font-size: 1rem; }
  .compare-table .text-link { gap: .25rem; }
}
@media (max-width: 355px) {
  .site-header .brand, .site-footer .brand { font-size: min(1.8rem, 9vw + .36rem); gap: .21em; }
  .brand-mark { scale: .9; }
  .category-card { grid-template-columns: 29% minmax(0,1fr); }
  .category-body { padding-inline: .64rem; }
  .compare-actions .button { padding-inline: .6rem; }
}
@container (max-width: 12em) {
  .category-card { grid-template-columns: minmax(0,1fr); }
  .category-media img { height: auto; aspect-ratio: 2.1; }
}
@container (max-width: 17em) {
  .compare-controls .field-row { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}

/* Ofertas (aparecem só com catálogo preenchido) */
.offers-note { color: var(--muted); }
.offers-list { list-style: none; padding: 0; display: grid; gap: 1rem; margin: 1rem 0 0; }
.offer-card { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: start; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.offer-card img { inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: cover; border-radius: .4rem; }
.offer-card h3 { font-size: 1.3rem; text-wrap: wrap; }
.offer-card p { margin: .25rem 0; color: var(--muted); }
.offer-price { color: var(--ink) !important; font-weight: 700; font-size: 1.2rem; }
.offer-price small { font-weight: 400; font-size: .85rem; color: var(--muted); }

/* Com 6 links no menu, o menu compacto entra um pouco antes. */
@media (min-width: 791px) and (max-width: 1100px) {
  .header-inner { grid-template-columns: 1fr auto; }
  .main-nav { display: none; }
  .mobile-menu { display: block; }
}