:root {
  --ink: #3b2119;
  --ink-soft: #6d4536;
  --paper: #fffaf4;
  --paper-deep: #f7e8d9;
  --sage: #f6e2cf;
  --sage-strong: #e4ba92;
  --clay: #c95329;
  --clay-dark: #a83f21;
  --line: #ead8c8;
  --muted: #8b6251;
  --shadow: 0 16px 48px rgba(91, 47, 31, .10);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(circle at 4% 17%, rgba(233, 221, 200, .45), transparent 18rem), var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 999; padding: .7rem 1rem; background: var(--ink); color: white; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
.pg-shell { width: min(1440px, calc(100% - 48px)); margin: 28px auto; overflow: hidden; border: 1px solid #ecd7c5; border-radius: 24px; background: #fffdf8; box-shadow: var(--shadow); }
.pg-header { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; min-height: 88px; padding: 0 48px; border-bottom: 1px solid var(--line); background: rgba(255, 253, 248, .94); backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 700; white-space: nowrap; }
.brand-mark { width: 34px; height: 34px; color: var(--ink); }
.main-nav { display: flex; justify-content: center; gap: clamp(16px, 2.5vw, 38px); align-items: stretch; height: 88px; }
.main-nav a { position: relative; display: grid; place-items: center; color: var(--ink); font-size: .9rem; font-weight: 650; }
.main-nav a[aria-current='page']::after { content: ''; position: absolute; bottom: 18px; height: 2px; width: 100%; background: var(--clay); border-radius: 2px; }
.header-actions { display: flex; gap: 15px; align-items: center; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: var(--ink); background: transparent; border: 0; cursor: pointer; }
.icon-button svg { width: 23px; height: 23px; stroke-width: 1.8; }
.nav-toggle { display: none; }
.mobile-nav { display: none; }
.page { padding: 62px 48px 0; }
.kicker { margin: 0 0 10px; color: var(--clay); font-family: var(--serif); font-size: 1.2rem; font-weight: 700; letter-spacing: .01em; }
.reading-meta { display: inline-flex; gap: 8px; align-items: center; color: var(--ink-soft); font-size: .92rem; font-weight: 600; }
.reading-meta svg { width: 18px; height: 18px; }
.article-top { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(420px, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.article-top h1, .page-hero h1 { max-width: 700px; margin: 0; font-family: var(--serif); font-size: clamp(2.9rem, 5.15vw, 5rem); line-height: .99; letter-spacing: -.055em; }
.article-dek { max-width: 520px; margin: 20px 0 26px; color: var(--ink-soft); font-family: var(--serif); font-size: clamp(1.06rem, 1.55vw, 1.35rem); line-height: 1.5; }
.hero-photo { overflow: hidden; min-height: 420px; border-radius: 22px; background: var(--sage); }
.hero-photo img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: center; }
.article-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(42px, 6vw, 92px); padding-top: 52px; }
.toc { align-self: start; position: sticky; top: 112px; padding: 25px 22px; border-radius: 18px; background: linear-gradient(145deg, #faeadc, #f4d9c1); }
.toc h2 { margin: 0 0 17px; font-family: var(--serif); font-size: 1.28rem; }
.toc a { display: flex; gap: 12px; align-items: center; padding: 10px 0; color: var(--ink-soft); font-family: var(--serif); font-size: .92rem; }
.toc-number { flex: 0 0 27px; display: grid; place-items: center; height: 27px; border: 1px solid #d8a87e; border-radius: 50%; color: var(--ink); font-family: var(--sans); font-size: .78rem; }
.toc a:first-of-type .toc-number { color: white; background: #9c4e2b; border-color: #9c4e2b; }
.article-body { max-width: 860px; padding-bottom: 64px; }
.article-body h2 { margin: 0 0 8px; padding-top: 8px; font-family: var(--serif); font-size: clamp(2rem, 3vw, 2.82rem); line-height: 1.08; letter-spacing: -.03em; }
.article-body h3 { margin: 34px 0 8px; font-family: var(--serif); font-size: 1.43rem; line-height: 1.2; }
.article-body p { margin: 0 0 18px; color: var(--ink-soft); font-family: var(--serif); font-size: 1.08rem; line-height: 1.68; }
.article-body ul { margin: 10px 0 22px; padding-left: 1.2rem; color: var(--ink-soft); font-family: var(--serif); font-size: 1.05rem; }
.article-body li { padding-left: .35rem; margin: 7px 0; }
.soft-note { margin: 30px 0; padding: 22px 24px; border-left: 3px solid var(--clay); border-radius: 0 14px 14px 0; background: #f8f1e7; color: var(--ink-soft); font-family: var(--serif); }
.coat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 26px 0 34px; }
.coat-card { overflow: hidden; border: 1px solid #ecdace; border-radius: 14px; background: white; }
.coat-card img { width: 100%; height: 164px; object-fit: cover; }
.coat-card div { padding: 14px 15px 16px; }
.coat-card h3 { margin: 0 0 4px; font-size: 1.16rem; }
.coat-card p { margin: 0; font-size: .94rem; line-height: 1.45; }
.guide-callout { display: flex; justify-content: space-between; gap: 22px; align-items: center; margin: 43px 0 0; padding: 26px 28px; border-radius: 18px; background: var(--ink); color: #fffdf8; }
.guide-callout p { margin: 0; color: #f4d5c2; font-family: var(--sans); font-size: .94rem; }
.guide-callout strong { display: block; margin-bottom: 4px; font-family: var(--serif); font-size: 1.3rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 45px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; color: white; background: var(--clay); font-weight: 750; font-size: .92rem; white-space: nowrap; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); background: var(--clay-dark); }
.related { padding: 46px 48px 60px; border-top: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 22px; }
.section-heading h2 { margin: 0; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.03em; }
.text-link { color: var(--clay-dark); font-weight: 750; font-size: .92rem; }
.related-grid, .guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.guide-card { display: flex; flex-direction: column; overflow: hidden; min-height: 100%; border: 1px solid #ecdace; border-radius: 16px; background: white; transition: transform .2s ease, box-shadow .2s ease; }
.guide-card:hover { transform: translateY(-4px); box-shadow: 0 14px 35px rgba(23,48,40,.1); }
.guide-card img { width: 100%; height: 172px; object-fit: cover; }
.guide-card-content { display: flex; flex: 1; flex-direction: column; padding: 18px; }
.guide-card .eyebrow { margin: 0 0 6px; color: var(--clay); font-family: var(--serif); font-size: .88rem; font-weight: 700; }
.guide-card h3 { margin: 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.13; letter-spacing: -.02em; }
.guide-card p:not(.eyebrow) { margin: 11px 0 14px; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.guide-card .read-more { margin-top: auto; color: var(--ink); font-size: .88rem; font-weight: 760; }
.pg-footer { display: grid; grid-template-columns: 1.35fr .8fr .8fr; gap: 30px; padding: 40px 48px; background: #5a2f20; color: #f9eee4; }
.pg-footer .brand { color: #fffdf8; }
.pg-footer p { max-width: 440px; margin: 12px 0 0; color: #e7c8ae; font-size: .9rem; }
.footer-title { margin: 0 0 8px; color: #fffdf8; font-family: var(--serif); font-size: 1.1rem; }
.footer-links { display: grid; gap: 7px; color: #e7c8ae; font-size: .9rem; }
.footer-bottom { grid-column: 1 / -1; margin-top: 7px; padding-top: 20px; border-top: 1px solid rgba(255, 239, 224, .16); color: #d9ad91; font-size: .8rem; }

/* Guide index */
.page-hero { display: grid; grid-template-columns: 1fr .95fr; gap: 50px; align-items: end; padding-bottom: 49px; }
.page-hero p { max-width: 500px; margin: 20px 0 0; color: var(--ink-soft); font-family: var(--serif); font-size: 1.15rem; }
.guide-stat { padding: 30px; border-radius: 20px; background: linear-gradient(145deg, #fae4d0, #f1cfb4); }
.guide-stat span { display: block; color: var(--clay-dark); font-size: .85rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.guide-stat strong { display: block; margin: 7px 0; font-family: var(--serif); font-size: 3.55rem; line-height: .9; }
.guide-stat p { margin: 8px 0 0; color: var(--ink-soft); font-family: var(--sans); font-size: .96rem; }
.guide-directory { padding: 40px 48px 60px; border-top: 1px solid var(--line); }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 29px; }
.filter-button { padding: 9px 16px; border: 1px solid #e5c7ad; border-radius: 999px; color: var(--ink-soft); background: white; cursor: pointer; font-size: .88rem; font-weight: 700; }
.filter-button[aria-pressed='true'] { color: white; border-color: var(--ink); background: var(--ink); }
.guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide-card[hidden] { display: none; }
.placeholder-image { display: grid; place-items: center; height: 172px; color: rgba(59, 33, 25, .82); background: linear-gradient(135deg, #f0cfb5, #f8e3d1); font-family: var(--serif); font-size: 1.2rem; }
.progress { position: fixed; top: 0; left: 0; z-index: 100; width: 0; height: 3px; background: var(--clay); }

@media (max-width: 1050px) {
  .pg-header { padding: 0 28px; gap: 18px; }
  .main-nav, .search-button { display: none; }
  .nav-toggle { display: grid; }
  .page, .related, .guide-directory { padding-left: 28px; padding-right: 28px; }
  .article-top { gap: 38px; }
  .article-layout { grid-template-columns: 215px minmax(0, 1fr); gap: 38px; }
  .pg-footer { padding: 36px 28px; }
}

@media (max-width: 820px) {
  .pg-shell { width: min(100% - 24px, 620px); margin: 12px auto; border-radius: 18px; }
  .pg-header { min-height: 68px; padding: 0 19px; grid-template-columns: 1fr auto; }
  .brand { gap: 8px; font-size: 1.06rem; }
  .brand-mark { width: 28px; height: 28px; }
  .main-nav, .search-button { display: none; }
  .nav-toggle { display: grid; }
  .mobile-nav { position: absolute; top: 68px; right: 0; left: 0; z-index: 25; grid-template-columns: 1fr; max-height: 0; overflow: hidden; border-bottom: 1px solid transparent; background: #fffdf8; transition: max-height .3s ease; }
  .mobile-nav.is-open { max-height: 420px; border-color: var(--line); }
  .mobile-nav a { padding: 13px 20px; border-top: 1px solid #eeeae2; color: var(--ink); font-weight: 700; }
  .page { padding: 38px 20px 0; }
  .article-top, .page-hero { grid-template-columns: 1fr; gap: 27px; }
  .article-top h1, .page-hero h1 { font-size: clamp(2.55rem, 12vw, 4rem); }
  .article-dek { margin-bottom: 20px; }
  .hero-photo, .hero-photo img { min-height: 280px; }
  .article-layout { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
  .toc { position: static; padding: 18px; }
  .toc a { display: none; }
  .toc a:first-of-type { display: flex; }
  .article-body { padding-bottom: 40px; }
  .article-body p { font-size: 1rem; }
  .coat-grid, .related-grid, .guide-grid { grid-template-columns: 1fr; }
  .coat-grid { gap: 12px; }
  .coat-card { display: grid; grid-template-columns: 112px 1fr; }
  .coat-card img { height: 100%; min-height: 115px; }
  .guide-callout { align-items: flex-start; flex-direction: column; }
  .related, .guide-directory { padding: 35px 20px; }
  .page-hero { padding-bottom: 34px; }
  .guide-stat strong { font-size: 3rem; }
  .pg-footer { grid-template-columns: 1fr; gap: 24px; padding: 33px 20px; }
  .footer-bottom { grid-column: auto; }
}

/* v1.7: 300-guide library, searchable directory and daily product catalogue */
.generated-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  min-height: 172px;
  overflow: hidden;
  padding: 20px;
  color: #3b2119;
  background: linear-gradient(var(--cover-hue, 135deg), var(--cover-a, #f4d9c3), var(--cover-b, #d8946d));
}
.generated-cover::before,
.generated-cover::after {
  position: absolute;
  z-index: -1;
  content: '';
  border-radius: 50%;
  background: rgba(255, 250, 244, .42);
}
.generated-cover::before { width: 155px; height: 155px; top: -62px; right: -34px; }
.generated-cover::after { width: 100px; height: 100px; bottom: -46px; left: -22px; background: rgba(90, 47, 32, .12); }
.generated-cover .cover-shape { position: absolute; top: 17px; right: 20px; color: rgba(90, 47, 32, .72); font-size: 2.45rem; line-height: 1; }
.generated-cover .cover-animal { align-self: flex-start; margin-bottom: auto; padding: 6px 9px; border: 1px solid rgba(59, 33, 25, .22); border-radius: 999px; background: rgba(255, 250, 244, .58); font-size: .67rem; font-weight: 850; letter-spacing: .11em; }
.generated-cover strong { max-width: 86%; font-family: var(--serif); font-size: 1.38rem; line-height: 1.02; letter-spacing: -.03em; }
.generated-cover small { margin-top: 6px; font-size: .67rem; font-weight: 720; letter-spacing: .04em; }
.generated-cover.article-cover { height: 390px; min-height: 390px; padding: clamp(28px, 4vw, 58px); border-radius: 14px; box-shadow: 0 22px 52px rgba(83, 46, 31, .15); }
.generated-cover.article-cover strong { max-width: 74%; font-size: clamp(2.35rem, 4vw, 4.5rem); line-height: .92; }
.generated-cover.article-cover small { margin-top: 14px; font-size: .78rem; }
.generated-cover.article-cover .cover-shape { top: 34px; right: 42px; font-size: 5rem; }
.generated-cover.article-cover .cover-animal { font-size: .78rem; }
.updated-line { margin: 0; color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .03em; }

.guide-search-wrap { display: grid; gap: 7px; max-width: 720px; margin: 0 0 18px; }
.guide-search-wrap label { color: var(--ink); font-family: var(--serif); font-size: 1rem; font-weight: 700; }
.guide-search-wrap input { width: 100%; min-height: 50px; padding: 0 17px; border: 1px solid #dfc3ad; border-radius: 12px; outline: none; color: var(--ink); background: #fffaf4; font: inherit; }
.guide-search-wrap input:focus { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(201, 83, 41, .12); }
.guide-result-count { min-height: 1.5rem; margin: 0 0 18px; color: var(--muted); font-size: .86rem; font-weight: 700; }
.guide-pagination { display: flex; justify-content: center; gap: 16px; align-items: center; margin-top: 30px; }
.guide-pagination button { min-height: 42px; padding: 0 17px; border: 1px solid #dfb999; border-radius: 999px; color: var(--ink); background: #fffaf4; cursor: pointer; font-weight: 750; }
.guide-pagination button:disabled { cursor: default; opacity: .42; }
.guide-pagination span { color: var(--muted); font-size: .86rem; font-weight: 700; }

.recommendation-section { margin: 42px 0; padding-top: 34px; border-top: 1px solid var(--line); }
.recommendation-heading h2 { margin-bottom: 9px; }
.recommendation-heading > p:last-child { max-width: 700px; }
.affiliate-inline { padding: 12px 14px; border-radius: 8px; color: var(--ink-soft); background: #f7e4d4; font-family: var(--sans) !important; font-size: .78rem !important; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 22px; }
.product-card { display: flex; flex-direction: column; min-height: 235px; padding: 20px; border: 1px solid #ead5c3; border-radius: 12px; background: #fffaf4; }
.product-card.has-affiliate-link { border-color: #d9ac88; box-shadow: 0 12px 28px rgba(90, 47, 32, .08); }
.product-label { color: var(--clay-dark); font-size: .68rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.product-card h3 { margin: 8px 0 !important; font-size: 1.2rem !important; }
.product-card p { margin: 0 0 14px !important; font-family: var(--sans) !important; font-size: .84rem !important; line-height: 1.5 !important; }
.product-meta { margin-top: auto; color: var(--muted); font-size: .72rem; font-weight: 700; }
.product-link { align-self: flex-start; margin-top: 13px; min-height: 40px; padding: 0 15px; font-size: .78rem; }
.editorial-steps { display: grid; gap: 11px; padding: 0 !important; counter-reset: editorial-step; list-style: none; }
.editorial-steps li { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); gap: 16px; padding: 15px 16px !important; border-radius: 9px; background: #f9eadc; }
.editorial-steps li strong { color: var(--ink); }
.faq-section { margin-top: 43px; }
.faq-section details { padding: 16px 0; border-top: 1px solid var(--line); }
.faq-section details:last-child { border-bottom: 1px solid var(--line); }
.faq-section summary { cursor: pointer; color: var(--ink); font-family: var(--serif); font-size: 1.12rem; font-weight: 700; }
.faq-section details p { margin: 10px 0 0; }
.compact-guide-card .generated-cover { min-height: 155px; }

.home-library-banner { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 20px clamp(24px, 5.2vw, 80px); color: #fffaf4; background: #5a2f20; }
.home-library-banner strong { font-family: var(--serif); font-size: 1.15rem; }
.home-library-banner span { color: #f2d7c5; font-size: .86rem; }
.home-library-banner a { color: #ffd6bb; font-size: .85rem; font-weight: 800; white-space: nowrap; }
.footer-disclosure { grid-column: 1 / -1; margin: 0; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; text-align: center; }

@media (max-width: 820px) {
  .generated-cover.article-cover { height: 300px; min-height: 300px; padding: 26px; }
  .generated-cover.article-cover strong { max-width: 86%; font-size: 2.7rem; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { min-height: 0; }
  .editorial-steps li { grid-template-columns: 1fr; gap: 5px; }
  .home-library-banner { grid-template-columns: 1fr; gap: 7px; padding: 23px 20px; }
  .guide-pagination { gap: 9px; }
  .guide-pagination button { padding: 0 12px; font-size: .8rem; }
}

/* Content-first home and topic hubs */
.home-hero { display: grid; grid-template-columns: 1.03fr .97fr; gap: 54px; align-items: center; padding-bottom: 56px; }
.home-hero h1 { max-width: 670px; margin: 0; font-family: var(--serif); font-size: clamp(3rem, 5.7vw, 5.8rem); line-height: .94; letter-spacing: -.06em; }
.home-hero .intro { max-width: 545px; margin: 24px 0 0; color: var(--ink-soft); font-family: var(--serif); font-size: 1.2rem; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 29px; }
.button.secondary { color: var(--ink); border-color: #dfb08b; background: transparent; }
.button.secondary:hover { color: var(--ink); background: var(--sage); }
.home-hero-art { position: relative; min-height: 510px; overflow: hidden; border-radius: 24px; background: var(--sage); }
.home-hero-art img { width: 100%; height: 510px; object-fit: cover; }
.hero-stamp { position: absolute; right: 20px; bottom: 20px; width: 172px; padding: 16px; border: 1px solid rgba(255,255,255,.7); border-radius: 16px; background: rgba(255,253,248,.92); box-shadow: 0 10px 30px rgba(20,43,37,.14); color: var(--ink); font-family: var(--serif); line-height: 1.15; }
.hero-stamp strong { display: block; margin-top: 5px; color: var(--clay-dark); font-size: 1.55rem; }
.topic-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.topic-strip a { min-height: 164px; padding: 29px; border-right: 1px solid var(--line); background: #fffdf8; transition: background .2s ease; }
.topic-strip a:last-child { border-right: 0; }
.topic-strip a:hover { background: var(--sage); }
.topic-strip span { display: block; margin-bottom: 8px; color: var(--clay); font-family: var(--serif); font-size: .9rem; font-weight: 700; }
.topic-strip strong { display: block; font-family: var(--serif); font-size: 1.55rem; line-height: 1.08; }
.topic-strip p { margin: 9px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.home-section { padding: 58px 48px; }
.home-section.ink-section { background: var(--ink); color: #fffdf8; }
.home-section.ink-section .kicker { color: #e9a68f; }
.home-section.ink-section h2 { max-width: 670px; margin: 0; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.05em; }
.standards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.standard { padding: 24px; border: 1px solid rgba(232,245,235,.17); border-radius: 16px; }
.standard span { color: #e9a68f; font-family: var(--serif); font-size: 1.15rem; }
.standard h3 { margin: 10px 0 7px; font-family: var(--serif); font-size: 1.42rem; }
.standard p { margin: 0; color: #f1d4c0; font-size: .93rem; line-height: 1.55; }
.future-note { display: grid; grid-template-columns: .95fr 1.05fr; gap: 38px; align-items: center; padding: 46px 48px 55px; background: #f7efe5; }
.future-note h2 { margin: 0; font-family: var(--serif); font-size: clamp(2rem, 3vw, 3rem); line-height: 1.05; letter-spacing: -.04em; }
.future-note p { max-width: 620px; margin: 0; color: var(--ink-soft); font-family: var(--serif); font-size: 1.08rem; }
.hub-hero { display: grid; grid-template-columns: 1fr .72fr; gap: 42px; align-items: end; padding-bottom: 48px; }
.hub-hero h1 { max-width: 690px; margin: 0; font-family: var(--serif); font-size: clamp(3rem, 5vw, 5rem); line-height: .98; letter-spacing: -.055em; }
.hub-hero p { max-width: 520px; margin: 20px 0 0; color: var(--ink-soft); font-family: var(--serif); font-size: 1.16rem; }
.hub-summary { padding: 25px; border-radius: 18px; background: #f4e9dc; }
.hub-summary strong { display: block; font-family: var(--serif); font-size: 2.4rem; line-height: 1; }
.hub-summary p { margin: 9px 0 0; font-family: var(--sans); font-size: .94rem; }
.simple-page { max-width: 850px; padding-bottom: 70px; }
.simple-page h1 { margin: 0; font-family: var(--serif); font-size: clamp(3rem, 5vw, 4.8rem); line-height: .98; letter-spacing: -.05em; }
.simple-page .lead { margin: 22px 0 34px; color: var(--ink-soft); font-family: var(--serif); font-size: 1.2rem; }
.simple-page h2 { margin: 36px 0 9px; font-family: var(--serif); font-size: 2rem; line-height: 1.12; }
.simple-page p, .simple-page li { color: var(--ink-soft); font-family: var(--serif); font-size: 1.05rem; }
.simple-page ul { padding-left: 1.3rem; }

@media (max-width: 820px) {
  .home-hero, .hub-hero, .future-note { grid-template-columns: 1fr; gap: 26px; }
  .home-hero { padding-bottom: 36px; }
  .home-hero h1, .hub-hero h1 { font-size: clamp(2.7rem, 12.5vw, 4.4rem); }
  .home-hero-art, .home-hero-art img { min-height: 340px; height: 340px; }
  .topic-strip, .standards-grid { grid-template-columns: 1fr; }
  .topic-strip a { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .topic-strip a:last-child { border-bottom: 0; }
  .home-section, .future-note { padding: 38px 20px; }
  .hub-summary { padding: 20px; }
  .simple-page { padding-bottom: 45px; }
}

/* Preview-matched content-site presentation */
body { background: #fffaf4; }
.pg-shell { width: 100%; max-width: none; margin: 0; overflow: hidden; border: 0; border-radius: 0; background: #fffaf4; box-shadow: none; }
.pg-header { min-height: 76px; padding: 0 clamp(24px, 5vw, 80px); border-bottom: 1px solid rgba(234, 216, 200, .8); background: rgba(255, 250, 244, .94); }
.main-nav { height: 76px; }
.main-nav a[aria-current='page']::after { bottom: 12px; }
.header-actions { justify-content: flex-end; }
.search-button { display: grid; }

.showcase-hero { display: grid; grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr); min-height: 520px; background: #fffaf4; }
.showcase-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(58px, 7vw, 112px) clamp(28px, 5.2vw, 100px); background: radial-gradient(circle at 88% 16%, rgba(248, 219, 195, .55), transparent 22rem), #fffaf4; }
.showcase-copy .kicker { margin-bottom: 14px; font-size: 1rem; }
.showcase-copy h1 { max-width: 700px; margin: 0; font-family: var(--serif); font-size: clamp(3.35rem, 4.45vw, 5.25rem); line-height: .98; letter-spacing: -.055em; }
.showcase-copy .intro { max-width: 595px; margin: 19px 0 0; color: var(--ink-soft); font-family: var(--serif); font-size: clamp(1rem, 1.15vw, 1.16rem); line-height: 1.52; }
.showcase-photo { position: relative; min-height: 520px; overflow: hidden; background: #f4dfce; }
.showcase-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,250,244,.12), transparent 28%, transparent 70%, rgba(93,52,34,.08)); }
.showcase-photo img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; object-position: center; }
.hero-note { position: absolute; z-index: 1; top: 42px; right: clamp(25px, 4vw, 72px); width: 145px; padding: 22px 16px 18px; background: rgba(255, 250, 244, .95); box-shadow: 0 12px 28px rgba(79, 43, 27, .14); color: var(--ink); font-family: var(--serif); font-size: 1.14rem; line-height: 1.15; text-align: center; transform: rotate(1.4deg); }
.hero-note strong { display: block; margin-top: 4px; font-size: 1.32rem; }
.hero-note span { display: block; margin-top: 7px; color: var(--clay); font-family: var(--sans); font-size: 1.38rem; }

.home-topic-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 20px clamp(24px, 5.2vw, 80px) 22px; background: #fae8d9; }
.home-topic-rail.topic-rail-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-topic-card { display: grid; grid-template-columns: 132px 1fr auto; gap: 18px; align-items: center; min-height: 112px; padding: 11px; border-radius: 12px; background: rgba(255, 250, 244, .7); transition: transform .2s ease, background .2s ease; }
.home-topic-card:hover { background: #fffaf4; transform: translateY(-3px); }
.home-topic-card img { width: 132px; height: 88px; border-radius: 8px; object-fit: cover; }
.home-topic-copy strong { display: block; font-family: var(--serif); font-size: clamp(1.1rem, 1.4vw, 1.42rem); line-height: 1.1; }
.home-topic-copy small { display: block; margin-top: 7px; color: var(--muted); font-size: .84rem; line-height: 1.42; }
.topic-arrow { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: white; background: var(--clay); font-size: 1rem; }

.feature-section { padding: 48px clamp(24px, 5.2vw, 80px) 18px; background: #fffaf4; }
.feature-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 18px; }
.feature-heading .kicker { margin-bottom: 3px; font-size: 1.85rem; color: var(--ink); letter-spacing: -.03em; }
.feature-heading h2 { max-width: 760px; margin: 0; color: var(--ink-soft); font-family: var(--serif); font-size: 1rem; font-weight: 400; line-height: 1.35; }
.feature-heading .text-link { display: inline-flex; gap: 8px; padding-bottom: 3px; white-space: nowrap; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature-guide { display: grid; grid-template-columns: 38% 1fr; gap: 15px; min-height: 138px; padding: 10px; border: 1px solid #f1e4d8; border-radius: 10px; background: #fffdf9; transition: transform .2s ease, box-shadow .2s ease; }
.feature-guide:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(87, 50, 34, .1); }
.feature-guide img { width: 100%; height: 118px; border-radius: 7px; object-fit: cover; }
.feature-guide h3 { margin: 4px 0 7px; font-family: var(--serif); font-size: clamp(1.02rem, 1.25vw, 1.23rem); line-height: 1.08; letter-spacing: -.02em; }
.feature-guide p { margin: 0; color: var(--muted); font-size: .81rem; line-height: 1.38; }
.feature-guide b { display: block; margin-top: 8px; color: var(--clay-dark); font-size: .79rem; }
.feature-guide i { padding-left: 4px; font-style: normal; }

.standards-band { display: grid; grid-template-columns: .88fr 2.12fr; gap: 42px; align-items: center; margin-top: 22px; padding: 38px clamp(24px, 5.2vw, 80px); background: #5a2f20; color: #fffaf4; }
.standards-band-intro .kicker { margin-bottom: 8px; color: #f0bf9e; font-size: .86rem; }
.standards-band-intro h2 { max-width: 315px; margin: 0; font-family: var(--serif); font-size: clamp(1.72rem, 2.35vw, 2.45rem); line-height: 1.04; letter-spacing: -.035em; }
.standards-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.standards-cards article { display: grid; grid-template-columns: 44px 1fr; gap: 13px; min-height: 130px; padding: 22px 18px; border-radius: 8px; background: #fffaf4; color: var(--ink); }
.standard-icon { color: var(--clay); font-size: 2rem; line-height: 1; }
.standards-cards h3 { margin: 2px 0 7px; font-family: var(--serif); font-size: 1.06rem; line-height: 1.1; }
.standards-cards p { margin: 0; color: var(--muted); font-size: .79rem; line-height: 1.42; }
.content-status { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 34px; align-items: center; padding: 42px clamp(24px, 5.2vw, 80px); background: #f8eee4; }
.content-status h2 { margin: 0; font-family: var(--serif); font-size: clamp(1.65rem, 2.5vw, 2.5rem); line-height: 1.05; letter-spacing: -.035em; }
.content-status p { max-width: 640px; margin: 0; color: var(--ink-soft); font-family: var(--serif); font-size: 1rem; }

.pg-footer { display: grid; grid-template-columns: auto 1fr auto; gap: 34px; align-items: center; padding: 28px clamp(24px, 5.2vw, 80px); background: #fffaf4; color: var(--ink); }
.pg-footer .brand { color: var(--ink); }
.footer-primary, .footer-legal { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-family: var(--serif); font-size: .84rem; }
.footer-primary { justify-content: center; }
.footer-legal { justify-content: flex-end; color: var(--ink-soft); font-size: .78rem; }
.footer-bottom { display: none; }

@media (max-width: 1080px) {
  .showcase-hero { grid-template-columns: .9fr 1.1fr; }
  .home-topic-rail { gap: 12px; }
  .home-topic-rail.topic-rail-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-topic-card { grid-template-columns: 88px 1fr auto; gap: 12px; }
  .home-topic-card img { width: 88px; height: 76px; }
  .feature-guide { grid-template-columns: 1fr; }
  .feature-guide img { height: 156px; }
  .standards-band { grid-template-columns: 1fr; }
  .standards-band-intro h2 { max-width: 600px; }
}

@media (max-width: 820px) {
  .pg-header { min-height: 68px; padding: 0 20px; }
  .main-nav { height: auto; }
  .search-button { display: none; }
  .showcase-hero { grid-template-columns: 1fr; }
  .showcase-copy { padding: 58px 22px 42px; }
  .showcase-copy h1 { font-size: clamp(2.75rem, 12vw, 4.25rem); }
  .showcase-photo, .showcase-photo img { min-height: 350px; height: 350px; }
  .hero-note { top: 22px; right: 22px; width: 130px; }
  .home-topic-rail, .home-topic-rail.topic-rail-four, .feature-grid, .standards-cards { grid-template-columns: 1fr; }
  .home-topic-rail { padding: 16px 20px; }
  .home-topic-card { grid-template-columns: 105px 1fr auto; }
  .home-topic-card img { width: 105px; height: 76px; }
  .feature-section { padding: 38px 20px 14px; }
  .feature-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .feature-guide { grid-template-columns: 120px 1fr; }
  .feature-guide img { height: 116px; }
  .standards-band { gap: 26px; margin-top: 12px; padding: 38px 20px; }
  .standards-cards article { min-height: 0; }
  .content-status { grid-template-columns: 1fr; gap: 15px; padding: 34px 20px; }
  .pg-footer { grid-template-columns: 1fr; gap: 16px; padding: 28px 20px; }
  .footer-primary, .footer-legal { justify-content: flex-start; gap: 12px 18px; }
}

/* v1.4: collection, policy and article-detail templates */
.collection-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr); gap: clamp(34px, 6vw, 92px); align-items: center; padding: clamp(54px, 6.5vw, 104px) clamp(24px, 8vw, 140px); background: radial-gradient(circle at 5% 20%, rgba(250, 218, 193, .75), transparent 22rem), #fffaf4; }
.collection-copy .kicker { margin-bottom: 12px; }
.collection-copy h1 { max-width: 670px; margin: 0; font-family: var(--serif); font-size: clamp(3.2rem, 5vw, 5.35rem); line-height: .98; letter-spacing: -.055em; }
.collection-copy > p:not(.kicker) { max-width: 590px; margin: 20px 0 0; color: var(--ink-soft); font-family: var(--serif); font-size: clamp(1.02rem, 1.2vw, 1.2rem); line-height: 1.55; }
.collection-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.collection-points span { padding: 8px 12px; border: 1px solid #e9cdb8; border-radius: 999px; color: var(--ink-soft); background: rgba(255,255,255,.72); font-size: .78rem; font-weight: 700; }
.collection-visual { position: relative; min-height: 430px; overflow: hidden; border-radius: 14px; background: #f4ddc8; box-shadow: 0 24px 60px rgba(81, 46, 31, .14); }
.collection-visual img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; }
.collection-visual figcaption { position: absolute; right: 18px; bottom: 18px; max-width: 190px; padding: 14px 16px; border-left: 3px solid var(--clay); background: rgba(255,250,244,.94); color: var(--ink); font-family: var(--serif); font-size: .96rem; line-height: 1.28; }
.collection-guide-section { padding: 52px clamp(24px, 8vw, 140px) 60px; background: #fffdf9; }
.collection-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 24px; }
.collection-heading .kicker { margin: 0 0 5px; font-size: .92rem; }
.collection-heading h2 { max-width: 740px; margin: 0; font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 3.4rem); line-height: 1.01; letter-spacing: -.045em; }
.collection-heading > p { max-width: 310px; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.collection-guide-section .guide-grid { gap: 16px; }
.guide-card { border-color: #f0e0d3; border-radius: 10px; background: #fff; }
.guide-card:hover { box-shadow: 0 16px 35px rgba(84, 45, 30, .11); }
.guide-card img { height: 220px; }
.guide-card-content { padding: 20px; }
.guide-card h3 { font-size: 1.38rem; }
.guide-card .read-more { color: var(--clay-dark); }
.collection-note { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; padding: 30px clamp(24px, 8vw, 140px); border-top: 1px solid #ead9cb; background: #f8eee5; }
.collection-note strong { font-family: var(--serif); font-size: 1.3rem; }
.collection-note p { max-width: 670px; margin: 0; color: var(--ink-soft); font-family: var(--serif); }

.page-hero { grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr); gap: clamp(36px, 8vw, 112px); align-items: center; padding: clamp(55px, 6.5vw, 104px) clamp(24px, 8vw, 140px); background: linear-gradient(112deg, #fffaf4 58%, #f8e3d1 58%); }
.page-hero h1 { max-width: 760px; font-size: clamp(3rem, 5vw, 5.3rem); }
.page-hero p { max-width: 640px; font-size: 1.12rem; }
.guide-stat { position: relative; overflow: hidden; padding: 36px; border-radius: 14px; background: #5a2f20; color: #fffaf4; box-shadow: 0 20px 45px rgba(76, 39, 24, .18); }
.guide-stat::after { content: 'GUIDES'; position: absolute; right: -7px; bottom: -31px; color: rgba(255,255,255,.07); font-family: var(--serif); font-size: 5.2rem; font-weight: 700; letter-spacing: -.1em; }
.guide-stat span { color: #f4c5a7; }
.guide-stat strong { font-size: 4.2rem; }
.guide-stat p { position: relative; z-index: 1; color: #f3d9c7; }
.guide-directory { padding: 52px clamp(24px, 8vw, 140px) 68px; background: #fffdf9; }
.guide-directory .section-heading h2 { font-size: clamp(2.1rem, 3.6vw, 3.55rem); }
.filter-bar { margin-bottom: 24px; }
.filter-button { border-color: #e7c7ae; background: #fffaf4; }

.simple-page { max-width: none; padding: 0; }
.policy-hero { padding: clamp(54px, 7vw, 110px) clamp(24px, 15vw, 300px) clamp(46px, 6vw, 90px); background: radial-gradient(circle at 88% 20%, rgba(248, 215, 192, .75), transparent 23rem), #fffaf4; text-align: center; }
.policy-hero .kicker { margin-bottom: 13px; }
.policy-hero h1 { max-width: 830px; margin: 0 auto; font-family: var(--serif); font-size: clamp(3rem, 5.5vw, 5.6rem); line-height: .96; letter-spacing: -.06em; }
.policy-hero .lead { max-width: 660px; margin: 23px auto 0; color: var(--ink-soft); font-family: var(--serif); font-size: clamp(1.05rem, 1.3vw, 1.24rem); }
.policy-content { display: grid; grid-template-columns: 205px minmax(0, 760px); gap: clamp(36px, 7vw, 110px); justify-content: center; padding: 60px clamp(24px, 10vw, 160px) 72px; background: #fffdf9; }
.policy-rail { align-self: start; position: sticky; top: 102px; padding: 19px; border-radius: 10px; background: #f8e6d6; color: var(--ink-soft); font-size: .86rem; }
.policy-rail strong { display: block; margin-bottom: 8px; color: var(--ink); font-family: var(--serif); font-size: 1.08rem; }
.policy-rail span { display: block; padding: 6px 0; border-top: 1px solid rgba(161,91,50,.18); }
.policy-article h2 { margin: 0 0 10px; padding-top: 24px; font-family: var(--serif); font-size: clamp(1.85rem, 3vw, 2.55rem); line-height: 1.08; letter-spacing: -.035em; }
.policy-article h2:first-child { padding-top: 0; }
.policy-article p, .policy-article li { color: var(--ink-soft); font-family: var(--serif); font-size: 1.06rem; line-height: 1.7; }
.policy-article ul { padding-left: 1.25rem; }
.policy-article li { margin: 8px 0; }
.policy-affirmation { margin: 30px 0 0; padding: 25px; border-left: 3px solid var(--clay); border-radius: 0 10px 10px 0; background: #f9eadc; color: var(--ink); font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; }

.article-top { grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr); gap: clamp(36px, 7vw, 105px); align-items: center; padding: clamp(52px, 6.2vw, 96px) clamp(24px, 8vw, 140px); background: radial-gradient(circle at 9% 20%, rgba(249, 219, 195, .65), transparent 22rem), #fffaf4; }
.article-top h1 { max-width: 700px; font-size: clamp(3.1rem, 5.3vw, 5.65rem); }
.article-dek { max-width: 585px; color: var(--ink-soft); }
.hero-photo { height: 390px; min-height: 0; border-radius: 14px; box-shadow: 0 22px 52px rgba(83, 46, 31, .15); }
.hero-photo img { height: 390px; min-height: 0; object-fit: cover; }
.article-layout { grid-template-columns: 240px minmax(0, 820px); justify-content: center; gap: clamp(42px, 7vw, 115px); padding: 58px clamp(24px, 8vw, 140px) 72px; background: #fffdf9; }
.toc { top: 105px; padding: 20px; border-radius: 10px; background: #f8e5d5; }
.toc h2 { font-size: 1.18rem; }
.toc a { font-size: .87rem; }
.toc-number { border-color: #d7a47d; }
.article-body { max-width: 820px; }
.article-body h2 { font-size: clamp(2rem, 3.2vw, 3rem); }
.article-body h3 { font-size: 1.55rem; }
.article-body p, .article-body ul { font-size: 1.06rem; }
.soft-note { background: #f9e9da; }
.coat-card { border-color: #ead9ca; }
.guide-callout { border-radius: 12px; background: #5a2f20; }
.related { padding: 52px clamp(24px, 8vw, 140px) 66px; border-color: #ead9cb; background: #f8eee5; }
.related .guide-card { background: #fffdf9; }

@media (max-width: 900px) {
  .collection-hero, .article-top { grid-template-columns: 1fr; }
  .collection-visual { min-height: 350px; }
  .collection-visual img { min-height: 350px; }
  .policy-content, .article-layout { grid-template-columns: 1fr; }
  .policy-rail, .toc { position: static; }
  .policy-rail { display: flex; gap: 12px; flex-wrap: wrap; }
  .policy-rail strong { width: 100%; }
  .policy-rail span { border-top: 0; padding: 0; }
}

@media (max-width: 820px) {
  .collection-hero, .page-hero { padding: 56px 20px; }
  .collection-copy h1 { font-size: clamp(2.75rem, 12vw, 4.35rem); }
  .collection-guide-section, .guide-directory { padding: 39px 20px 46px; }
  .collection-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .collection-heading h2 { font-size: 2.28rem; }
  .collection-note { grid-template-columns: 1fr; gap: 8px; padding: 26px 20px; }
  .page-hero { background: #fffaf4; }
  .page-hero h1 { font-size: clamp(2.75rem, 12vw, 4.3rem); }
  .guide-stat { padding: 27px; }
  .policy-hero { padding: 58px 20px 45px; text-align: left; }
  .policy-hero h1 { margin: 0; font-size: clamp(2.75rem, 12vw, 4.5rem); }
  .policy-hero .lead { margin-left: 0; }
  .policy-content { gap: 28px; padding: 38px 20px 48px; }
  .article-top { padding: 55px 20px 40px; }
  .article-top h1 { font-size: clamp(2.75rem, 12vw, 4.45rem); }
  .hero-photo, .hero-photo img { height: 300px; min-height: 0; }
  .article-layout { gap: 28px; padding: 38px 20px 48px; }
  .related { padding: 39px 20px 46px; }
}

/* v1.8: compact editorial article-detail template */
body[data-page='article'] { background: #fffdf9; }
body[data-page='article'] .pg-shell { overflow: visible; }

.article-intro {
  padding: 0 clamp(22px, 5vw, 76px) 24px;
  border-bottom: 1px solid #efe1d5;
  background:
    radial-gradient(circle at 8% 12%, rgba(242, 207, 181, .32), transparent 25rem),
    #fffaf4;
}
.article-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 17px 0 14px;
  color: #806255;
  font-size: .78rem;
  font-weight: 650;
}
.article-breadcrumbs a { transition: color .18s ease; }
.article-breadcrumbs a:hover { color: var(--clay-dark); }
.article-breadcrumbs span { color: #b99c8b; }

.article-hero {
  display: grid;
  grid-template-columns: minmax(340px, .76fr) minmax(520px, 1.24fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
  width: min(1320px, 100%);
  min-height: 358px;
  margin: 0 auto;
}
.article-hero-copy { padding: 28px 0 34px; }
.article-category-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0 0 18px;
  padding: 4px 12px;
  border: 1px solid #efcbb0;
  border-radius: 999px;
  color: #a84425;
  background: #fbe6d7;
  font-size: .78rem;
  font-weight: 800;
}
.article-hero h1 {
  max-width: 650px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 4.2vw, 4.75rem);
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.article-hero .article-dek {
  max-width: 590px;
  margin: 18px 0 15px;
  color: #6d574e;
  font-family: var(--sans);
  font-size: clamp(.98rem, 1.2vw, 1.08rem);
  line-height: 1.52;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  align-items: center;
  color: #785b4f;
  font-size: .79rem;
  font-weight: 700;
}
.article-meta .reading-meta { font-size: inherit; }
.article-meta-divider { width: 1px; height: 17px; background: #d9bba5; }
.article-hero-media {
  position: relative;
  height: 314px;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  border-radius: 16px;
  background: #f1dfd0;
  box-shadow: 0 18px 44px rgba(77, 42, 28, .14);
}
.article-hero-media::after {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(79, 43, 30, .08);
}
.article-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.article-hero-media.image-focus-1 img { object-position: 48% 44%; }
.article-hero-media.image-focus-2 img { object-position: 54% 50%; }
.article-hero-media.image-focus-3 img { object-position: 42% 48%; }
.article-hero-media.image-focus-4 img { object-position: 58% 46%; }

.article-key-takeaways {
  display: grid;
  grid-template-columns: minmax(180px, .9fr) repeat(3, minmax(180px, 1fr));
  width: min(1320px, 100%);
  margin: 16px auto 0;
  overflow: hidden;
  border: 1px solid #f0d9c7;
  border-radius: 14px;
  background: linear-gradient(90deg, #f9e5d5, #fff2e8);
}
.article-key-takeaways h2,
.takeaway-item {
  min-height: 74px;
  margin: 0;
  padding: 14px 20px;
}
.article-key-takeaways h2 {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.2;
}
.article-key-takeaways h2 span { color: var(--clay); }
.takeaway-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
  border-left: 1px solid #e8c7ae;
}
.takeaway-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #c75b34;
  font-family: var(--serif);
  font-size: 1.42rem;
}
.takeaway-item p { margin: 0; line-height: 1.25; }
.takeaway-item strong { display: block; color: var(--ink); font-family: var(--serif); font-size: .96rem; }
.takeaway-item p span { display: block; margin-top: 3px; color: #7d6256; font-size: .74rem; }

body[data-page='article'] .article-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 720px) 280px;
  gap: clamp(24px, 3vw, 42px);
  align-items: start;
  justify-content: center;
  width: min(1320px, calc(100% - 44px));
  margin: 0 auto;
  padding: 42px 0 72px;
  background: #fffdf9;
}
body[data-page='article'] .toc {
  top: 96px;
  padding: 20px 18px;
  border: 1px solid #f0dfd2;
  border-radius: 14px;
  background: #fbf3ec;
}
body[data-page='article'] .toc h2 { margin-bottom: 12px; font-size: 1.06rem; }
body[data-page='article'] .toc a { gap: 10px; padding: 8px 0; font-family: var(--sans); font-size: .77rem; line-height: 1.35; }
body[data-page='article'] .toc-number { flex-basis: 24px; height: 24px; font-size: .7rem; }
body[data-page='article'] .article-body { width: 100%; max-width: 720px; padding-bottom: 0; }
body[data-page='article'] .article-body h2 {
  margin-bottom: 11px;
  padding-top: 6px;
  font-size: clamp(2rem, 3vw, 2.85rem);
  line-height: 1.04;
  text-wrap: balance;
}
body[data-page='article'] .article-body h3 { margin-top: 30px; font-size: 1.42rem; }
body[data-page='article'] .article-body p,
body[data-page='article'] .article-body ul { font-size: 1.01rem; line-height: 1.67; }

.article-at-glance {
  position: sticky;
  top: 96px;
  padding: 21px 20px 15px;
  border: 1px solid #dfe9f0;
  border-radius: 14px;
  background: linear-gradient(145deg, #f2f7fb, #edf3f7);
}
.article-at-glance h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 1.35rem; line-height: 1.1; }
.glance-item { display: grid; grid-template-columns: 36px 1fr; gap: 11px; align-items: center; padding: 12px 0; border-top: 1px solid #d9e4eb; }
.glance-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #7b4c37; background: #fbe5d5; font-size: .75rem; font-weight: 850; }
.glance-item:nth-of-type(2) .glance-icon { background: #deebf5; }
.glance-item p { margin: 0; line-height: 1.32; }
.glance-item strong { display: block; font-family: var(--serif); font-size: .92rem; }
.glance-item p span { display: block; margin-top: 2px; color: #6f625d; font-size: .75rem; }

body[data-page='article'] .recommendation-section {
  margin: 46px 0;
  padding: 30px;
  border: 1px solid #efdac9;
  border-radius: 16px;
  background: #fff5ec;
}
body[data-page='article'] .recommendation-heading .kicker { margin-bottom: 4px; font-size: .82rem; }
body[data-page='article'] .recommendation-heading h2 { padding-top: 0; }
body[data-page='article'] .product-grid { gap: 11px; }
body[data-page='article'] .product-card { border-color: #ead7c7; background: #fffdf9; }
body[data-page='article'] .guide-callout { background: #573226; }
body[data-page='article'] .related { background: #f9efe6; }

@media (max-width: 1180px) {
  .article-hero { grid-template-columns: minmax(320px, .82fr) minmax(440px, 1.18fr); }
  body[data-page='article'] .article-layout { grid-template-columns: 190px minmax(0, 720px); }
  .article-at-glance { position: static; grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }
  .article-at-glance h2 { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .article-intro { padding-right: 24px; padding-left: 24px; }
  .article-hero { grid-template-columns: 1fr; gap: 8px; }
  .article-hero-copy { padding-bottom: 16px; }
  .article-hero-media { height: 360px; }
  .article-key-takeaways { grid-template-columns: repeat(3, 1fr); }
  .article-key-takeaways h2 { grid-column: 1 / -1; min-height: 54px; border-bottom: 1px solid #e8c7ae; }
  .takeaway-item:first-of-type { border-left: 0; }
  body[data-page='article'] .article-layout { grid-template-columns: 1fr; width: min(760px, calc(100% - 44px)); }
  body[data-page='article'] .toc { position: static; }
  body[data-page='article'] .article-body { max-width: none; }
  .article-at-glance { grid-column: auto; grid-row: 2; }
}

@media (max-width: 620px) {
  .article-intro { padding: 0 16px 18px; }
  .article-breadcrumbs { padding-top: 12px; font-size: .7rem; }
  .article-breadcrumbs a:nth-of-type(2),
  .article-breadcrumbs a:nth-of-type(2) + span { display: none; }
  .article-hero-copy { padding: 18px 0 12px; }
  .article-category-pill { margin-bottom: 13px; }
  .article-hero h1 { font-size: clamp(2.35rem, 12vw, 3.7rem); }
  .article-hero .article-dek { margin-top: 14px; font-size: .94rem; }
  .article-hero-media { height: 255px; border-radius: 12px; }
  .article-key-takeaways { grid-template-columns: 1fr; }
  .article-key-takeaways h2 { grid-column: auto; }
  .takeaway-item { min-height: 64px; border-top: 1px solid #e8c7ae; border-left: 0; }
  body[data-page='article'] .article-layout { width: calc(100% - 32px); gap: 24px; padding: 30px 0 48px; }
  body[data-page='article'] .toc a { display: flex; }
  .article-at-glance { grid-template-columns: 1fr; }
  .article-at-glance h2 { grid-column: auto; }
  body[data-page='article'] .article-body h2 { font-size: 2rem; }
  body[data-page='article'] .recommendation-section { padding: 22px 18px; }
}

/* v1.8.2: full-width article canvas aligned with the home page */
body[data-page='article'] .article-intro {
  width: 100%;
  padding: 0;
}
body[data-page='article'] .article-breadcrumbs {
  width: 100%;
  max-width: none;
  padding: 17px clamp(32px, 4.2vw, 80px) 14px;
}
body[data-page='article'] .article-hero {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 0;
  width: 100%;
  max-width: none;
  min-height: 390px;
}
body[data-page='article'] .article-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 390px;
  padding: 34px clamp(42px, 5.2vw, 100px) 46px clamp(32px, 4.2vw, 80px);
}
body[data-page='article'] .article-hero h1 { max-width: 720px; }
body[data-page='article'] .article-hero-media {
  height: 390px;
  border-radius: 0;
  box-shadow: none;
}
body[data-page='article'] .article-key-takeaways {
  grid-template-columns: minmax(220px, .9fr) repeat(3, minmax(220px, 1fr));
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(32px, 4.2vw, 80px);
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
body[data-page='article'] .article-key-takeaways h2,
body[data-page='article'] .takeaway-item { padding-right: clamp(18px, 2vw, 34px); padding-left: clamp(18px, 2vw, 34px); }
body[data-page='article'] .article-layout {
  grid-template-columns: minmax(210px, 230px) minmax(0, 860px) minmax(250px, 290px);
  gap: clamp(30px, 2.6vw, 50px);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 52px clamp(32px, 4.2vw, 80px) 78px;
}
body[data-page='article'] .article-body { max-width: 860px; }

@media (max-width: 1180px) {
  body[data-page='article'] .article-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  body[data-page='article'] .article-layout { grid-template-columns: 190px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  body[data-page='article'] .article-intro { padding: 0; }
  body[data-page='article'] .article-breadcrumbs { padding: 14px 24px 10px; }
  body[data-page='article'] .article-hero { grid-template-columns: 1fr; }
  body[data-page='article'] .article-hero-copy { min-height: 0; padding: 30px 24px 24px; }
  body[data-page='article'] .article-hero-media { height: 360px; }
  body[data-page='article'] .article-key-takeaways { grid-template-columns: repeat(3, 1fr); padding: 0 24px; }
  body[data-page='article'] .article-key-takeaways h2 { grid-column: 1 / -1; }
  body[data-page='article'] .article-layout { grid-template-columns: 1fr; width: 100%; padding: 38px 24px 58px; }
}

@media (max-width: 620px) {
  body[data-page='article'] .article-breadcrumbs { padding: 12px 16px 8px; }
  body[data-page='article'] .article-hero-copy { padding: 24px 16px 20px; }
  body[data-page='article'] .article-hero-media { height: 255px; }
  body[data-page='article'] .article-key-takeaways { grid-template-columns: 1fr; padding: 0 16px; }
  body[data-page='article'] .article-key-takeaways h2 { grid-column: auto; }
  body[data-page='article'] .article-layout { padding: 30px 16px 48px; }
}

/* v1.8.3: wider reading grid and complete-subject hero framing */
@media (min-width: 1181px) {
  body[data-page='article'] .article-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(600px, .88fr);
    min-height: 500px;
  }
  body[data-page='article'] .article-hero-copy {
    min-height: 500px;
    padding: 42px clamp(42px, 5vw, 96px) 50px clamp(32px, 3.4vw, 64px);
  }
  body[data-page='article'] .article-hero-media {
    height: 500px;
    background: linear-gradient(135deg, #f0e4d9, #f9f3ec);
  }
  body[data-page='article'] .article-hero-media img {
    object-fit: cover;
    object-position: center 25%;
  }
  body[data-page='article'] .article-hero-media.image-focus-1 img { object-position: 46% 25%; }
  body[data-page='article'] .article-hero-media.image-focus-2 img { object-position: 54% 25%; }
  body[data-page='article'] .article-hero-media.image-focus-3 img { object-position: 42% 25%; }
  body[data-page='article'] .article-hero-media.image-focus-4 img { object-position: 58% 25%; }

  body[data-page='article'] .article-layout {
    grid-template-columns: minmax(190px, 230px) minmax(0, 1320px) minmax(250px, 300px);
    gap: clamp(26px, 2.2vw, 42px);
    justify-content: space-between;
    width: 100%;
    max-width: none;
    padding: 52px clamp(28px, 3.4vw, 64px) 78px;
  }
  body[data-page='article'] .article-body {
    width: 100%;
    max-width: none;
  }
  body[data-page='article'] .toc,
  body[data-page='article'] .article-at-glance { width: 100%; }
}

@media (min-width: 1181px) and (max-width: 1480px) {
  body[data-page='article'] .article-hero {
    grid-template-columns: minmax(0, 1.06fr) minmax(540px, .94fr);
    min-height: 450px;
  }
  body[data-page='article'] .article-hero-copy { min-height: 450px; }
  body[data-page='article'] .article-hero-media { height: 450px; }
  body[data-page='article'] .article-layout {
    grid-template-columns: 200px minmax(0, 1fr) 260px;
    padding-right: 34px;
    padding-left: 34px;
  }
}

body[data-page='article'] .article-hero-media img[src$='/cat-black.png'],
body[data-page='article'] .article-hero-media img[src$='/cat-orange.png'],
body[data-page='article'] .article-hero-media img[src$='/cat-white.png'],
body[data-page='article'] .article-hero-media img[src$='/home-essentials-hero-v2.png'] {
  object-fit: contain;
  object-position: center;
  padding: 10px;
}


/* Aurora Paw affiliate clusters v2.0 */
.article-byline{display:flex;align-items:center;gap:12px;max-width:1280px;margin:18px auto 0;padding:0 28px;color:#655e6d}
.article-byline .byline-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#312c48;color:#fff;font:700 12px/1 Inter,sans-serif;letter-spacing:.08em}
.article-byline p{display:flex;flex-direction:column;gap:3px;margin:0;font-size:.88rem}
.article-byline a{color:#312c48;text-decoration-thickness:1px;text-underline-offset:3px}
.article-table-wrap{overflow-x:auto;margin:24px 0;border:1px solid #e8e1ec;border-radius:18px;background:#fff}
.article-table{width:100%;border-collapse:collapse;min-width:640px;font-size:.94rem}
.article-table th,.article-table td{padding:15px 17px;text-align:left;vertical-align:top;border-bottom:1px solid #eee8f1}
.article-table th{color:#312c48;background:#f8f5fa;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.article-table tr:last-child td{border-bottom:0}
.quality-checklist{display:grid;gap:11px;margin:20px 0 30px;padding:0;list-style:none}
.quality-checklist li{padding:14px 16px;border-left:3px solid #8b78a8;background:#faf8fb;border-radius:0 12px 12px 0}
.source-notes{margin-top:42px;padding:26px;border:1px solid #e8e1ec;border-radius:20px;background:#faf8fb}
.source-notes h2{margin-top:0}.source-notes ul{margin:14px 0;padding-left:22px}.source-notes a{color:#58446e;text-underline-offset:3px}
.source-updated{font-size:.84rem;color:#716a77}
@media(max-width:720px){.article-byline{padding:0 18px}.source-notes{padding:20px}.article-table{min-width:560px}}

/* Aurora Paw member identity v2.1 */
.member-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 250px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #dec0a7;
  border-radius: 999px;
  color: var(--ink);
  background: #fff9f1;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.member-button:hover { transform: translateY(-1px); border-color: var(--clay); background: #fff3e7; }
.member-button-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: white; background: var(--clay); font-size: .78rem; }
.member-button [data-member-label] { overflow: hidden; text-overflow: ellipsis; }
.member-button.is-signed-in { border-color: #b79ec8; background: #f6effa; }
.member-button.is-signed-in .member-button-mark { background: #6f537f; }

.member-invite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin: 0 48px 52px;
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid #e4d3e8;
  border-radius: 24px;
  background: radial-gradient(circle at 86% 20%, rgba(212, 186, 226, .52), transparent 14rem), linear-gradient(135deg, #fbf6fc 0%, #f3e8f6 100%);
}
.member-invite-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; }
.member-invite-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; color: white; background: #6f537f; font-family: var(--serif); font-size: 1.55rem; box-shadow: 0 12px 28px rgba(76, 50, 91, .17); }
.member-invite h2 { margin: 0 0 8px; font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.55rem); line-height: 1.05; letter-spacing: -.035em; }
.member-invite p { max-width: 720px; margin: 0; color: var(--ink-soft); }
.member-invite .button { background: #6f537f; }
.member-invite .button:hover { background: #594066; }

.member-page { min-height: 720px; padding: clamp(30px, 5vw, 70px) clamp(24px, 5vw, 78px) 72px; background: radial-gradient(circle at 12% 16%, rgba(224, 195, 169, .46), transparent 24rem), radial-gradient(circle at 91% 13%, rgba(199, 169, 217, .42), transparent 23rem), #fffdf9; }
.member-stage { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(480px, 1.18fr); gap: clamp(30px, 5vw, 74px); align-items: start; max-width: 1240px; margin: 0 auto; }
.member-story { position: sticky; top: 118px; padding-top: 18px; }
.member-story h1 { max-width: 610px; margin: 0; font-family: var(--serif); font-size: clamp(3rem, 5.6vw, 5.8rem); line-height: .92; letter-spacing: -.06em; }
.member-story .member-lead { max-width: 570px; margin: 24px 0; color: var(--ink-soft); font-family: var(--serif); font-size: clamp(1.05rem, 1.5vw, 1.32rem); }
.identity-preview { display: inline-flex; align-items: center; gap: 13px; max-width: 100%; margin: 8px 0 26px; padding: 12px 16px 12px 12px; border: 1px solid #dfcce6; border-radius: 999px; background: rgba(255,255,255,.8); box-shadow: 0 10px 28px rgba(70, 47, 82, .08); }
.identity-preview-mark { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: white; background: #6f537f; }
.identity-preview-copy { overflow: hidden; }
.identity-preview-copy small { display: block; color: #87738f; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.identity-preview-copy strong { display: block; overflow: hidden; color: #493653; font-family: var(--serif); font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.member-promises { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; color: var(--ink-soft); }
.member-promises li { display: flex; gap: 10px; align-items: start; }
.member-promises li::before { content: '✓'; color: #6f537f; font-weight: 900; }

.member-panel { overflow: hidden; border: 1px solid #eadde9; border-radius: 26px; background: rgba(255,255,255,.92); box-shadow: 0 24px 70px rgba(74, 46, 84, .12); }
.member-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 8px; border-bottom: 1px solid #eee3ee; background: #fbf7fb; }
.member-tab { min-height: 48px; border: 0; border-radius: 16px; color: #75647b; background: transparent; cursor: pointer; font-weight: 800; }
.member-tab[aria-selected='true'] { color: #fff; background: #4f3b59; box-shadow: 0 8px 18px rgba(69, 48, 79, .16); }
.member-form-wrap { padding: clamp(24px, 4vw, 42px); }
.member-form { display: grid; gap: 21px; }
.member-form[hidden], .member-profile[hidden], .member-auth-shell[hidden] { display: none; }
.member-form-heading h2, .member-profile h2 { margin: 0; font-family: var(--serif); font-size: clamp(2rem, 3vw, 2.75rem); letter-spacing: -.04em; }
.member-form-heading p { margin: 7px 0 0; color: var(--muted); font-size: .93rem; }
.member-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.member-field { display: grid; gap: 7px; }
.member-field-full { grid-column: 1 / -1; }
.member-field label, .member-legend { color: #4b374f; font-size: .79rem; font-weight: 850; letter-spacing: .035em; }
.member-field input, .member-field select { width: 100%; min-height: 49px; padding: 0 14px; border: 1px solid #ddcfdc; border-radius: 13px; color: var(--ink); outline: none; background: #fffdfd; font: inherit; }
.member-field input:focus, .member-field select:focus { border-color: #846394; box-shadow: 0 0 0 3px rgba(132, 99, 148, .12); }
.member-field small { color: var(--muted); font-size: .75rem; }
.relationship-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.relationship-options { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; margin-top: 9px; }
.relationship-option { position: relative; }
.relationship-option input { position: absolute; opacity: 0; pointer-events: none; }
.relationship-option span { display: grid; place-items: center; min-height: 48px; padding: 8px 5px; border: 1px solid #dfd3df; border-radius: 13px; color: #6e5d73; background: #fff; cursor: pointer; font-size: .79rem; font-weight: 800; text-align: center; }
.relationship-option input:checked + span { color: #fff; border-color: #6f537f; background: #6f537f; }
.relationship-option input:focus-visible + span { outline: 3px solid rgba(111,83,127,.22); outline-offset: 2px; }
.member-consent { display: flex; gap: 10px; align-items: start; color: var(--ink-soft); font-size: .82rem; line-height: 1.45; }
.member-consent input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: #6f537f; }
.member-consent a { color: #5f446d; text-decoration: underline; text-underline-offset: 2px; }
.member-submit { width: 100%; min-height: 51px; border: 0; border-radius: 15px; color: white; background: #4f3b59; cursor: pointer; font-weight: 850; }
.member-submit:hover { background: #3f2d48; }
.member-submit:disabled { cursor: wait; opacity: .62; }
.member-message { min-height: 0; margin: 0; padding: 0; border-radius: 12px; font-size: .85rem; }
.member-message:not(:empty) { padding: 11px 13px; color: #7a2e25; background: #fff0ed; }
.member-message.is-success:not(:empty) { color: #355b42; background: #edf7ef; }
.member-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.member-secure-note { margin: 0; color: #8a7b8e; font-size: .74rem; text-align: center; }

.member-profile { padding: clamp(24px, 4vw, 42px); }
.member-profile-card { display: grid; gap: 24px; }
.member-profile-identity { display: flex; gap: 16px; align-items: center; padding: 20px; border: 1px solid #e3d5e5; border-radius: 18px; background: linear-gradient(135deg, #fcf7fd, #f3e8f6); }
.member-profile-avatar { display: grid; flex: 0 0 54px; place-items: center; width: 54px; height: 54px; border-radius: 18px; color: white; background: #6f537f; font-family: var(--serif); font-size: 1.4rem; }
.member-profile-identity strong { display: block; color: #4b3752; font-family: var(--serif); font-size: 1.2rem; }
.member-profile-identity span { color: #7b6b80; font-size: .82rem; }
.member-profile-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.member-profile-actions button { min-height: 43px; padding: 0 17px; border: 1px solid #d9cbd9; border-radius: 999px; color: #59485e; background: #fff; cursor: pointer; font-weight: 780; }
.member-profile-actions .danger-button { color: #9b3f35; border-color: #e8c5c1; }
.member-delete-box { display: grid; gap: 12px; padding: 18px; border: 1px solid #efcfca; border-radius: 16px; background: #fff7f5; }
.member-delete-box[hidden] { display: none; }

.privacy-page .policy-article code { padding: 2px 6px; border-radius: 6px; background: #f2eaf4; font-size: .88em; }

@media (max-width: 1180px) {
  .member-button { max-width: 190px; }
  .member-stage { grid-template-columns: minmax(280px, .75fr) minmax(440px, 1.25fr); }
}
@media (max-width: 1050px) {
  .member-button { max-width: 260px; }
  .member-stage { grid-template-columns: 1fr; max-width: 760px; }
  .member-story { position: static; }
  .member-story h1 { max-width: 700px; }
}
@media (max-width: 820px) {
  .member-button { max-width: 190px; }
  .member-invite { margin-right: 28px; margin-left: 28px; }
}
@media (max-width: 620px) {
  .member-button { width: 40px; max-width: 40px; min-height: 40px; padding: 0; justify-content: center; border: 0; background: transparent; }
  .member-button [data-member-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .member-button-mark { width: 32px; height: 32px; }
  .header-actions { gap: 7px; }
  .member-invite { grid-template-columns: 1fr; margin: 0 16px 38px; padding: 24px 20px; border-radius: 18px; }
  .member-invite-copy { grid-template-columns: 1fr; gap: 15px; }
  .member-invite .button { width: 100%; }
  .member-page { padding: 28px 16px 48px; }
  .member-story h1 { font-size: clamp(2.8rem, 15vw, 4.4rem); }
  .member-panel { border-radius: 20px; }
  .member-form-wrap, .member-profile { padding: 24px 18px; }
  .member-grid { grid-template-columns: 1fr; }
  .member-field-full { grid-column: auto; }
  .relationship-options { grid-template-columns: repeat(2, minmax(0,1fr)); }
}