:root {
  --ink: #202124;
  --body: #35383b;
  --muted: #596067;
  --red: #b83e34;
  --red-bright: #d94b3d;
  --paper: #ffffff;
  --soft: #f2f3f2;
  --line: #cbd0cf;
  --line-dark: #202124;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 Arial, Helvetica, sans-serif; }
[id] { scroll-margin-top: 24px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.055em; overflow-wrap: anywhere; hyphens: auto; }
h1, h2 { text-wrap: balance; }
h1 { font-size: clamp(3.8rem, 7.8vw, 7.8rem); font-weight: 800; }
h2 { font-size: clamp(2.15rem, 4.2vw, 4.2rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
a { color: inherit; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a, button, input, select, textarea, summary { touch-action: manipulation; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.wrap { width: min(1216px, calc(100% - 64px)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 10px; z-index: 100; padding: 10px 14px; background: var(--paper); }
.skip:focus { left: 10px; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* Navigation */
.header { background: var(--paper); border-top: 5px solid var(--ink); border-bottom: 1px solid var(--ink); }
.head-inner { display: flex; align-items: center; gap: 42px; min-height: 84px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-size: 1.75rem; font-weight: 800; letter-spacing: -.08em; line-height: 1; text-decoration: none; white-space: nowrap; }
.brand img { width: 39px; height: 39px; }
.brand-dot { color: var(--red-bright); }
.nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.nav a { color: var(--body); font-size: .88rem; font-weight: 700; text-decoration: none; }
.nav a:hover, .nav a[aria-current] { color: var(--red); }
.menu-toggle { display: none; }
.exotic-heading { margin-top: 64px; }
.head-cta { border: 1px solid var(--ink); padding: 10px 18px; background: var(--ink); color: #fff; font-size: .82rem; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.head-cta:hover { background: var(--red); border-color: var(--red); }

/* Typography and controls */
.eyebrow { display: inline-block; color: var(--red); font-size: .75rem; font-weight: 800; letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 49px; padding: 10px 18px; border: 1px solid var(--ink); border-radius: 0; font-size: .88rem; font-weight: 700; line-height: 1.3; text-decoration: none; transition: background .16s, color .16s; }
.button.primary { background: var(--ink); color: #fff; }
.button.primary:hover { background: var(--red); border-color: var(--red); }
.button.subtle { background: transparent; color: var(--ink); }
.button.subtle:hover { background: var(--ink); color: #fff; }
.button:disabled { opacity: .5; cursor: not-allowed; }
.text-link { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 3px; border-bottom: 1px solid currentColor; font-size: .9rem; font-weight: 700; text-decoration: none; }
.text-link:hover { color: var(--red); }

/* Home hero */
.hero { border-bottom: 1px solid var(--ink); background: var(--soft); }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.94fr); gap: 65px; align-items: center; padding-block: 88px 95px; }
.hero h1 { margin: 20px 0 24px; max-width: 640px; }
.hero h1 em { color: var(--red); font-style: normal; }
.hero p { max-width: 520px; color: var(--body); font-size: 1.18rem; line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 33px; flex-wrap: wrap; }
.hero-note { display: flex; align-items: center; gap: 13px; margin-top: 55px; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.note-line { width: 26px; height: 2px; background: var(--red); }
.hero-art { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 42px 400px 42px; min-width: 0; border: 1px solid var(--ink); background: var(--paper); }
.hero-art-meta, .hero-art-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; font-size: .7rem; font-weight: 800; letter-spacing: .11em; }
.hero-art-meta { border-bottom: 1px solid var(--ink); }
.hero-art-footer { border-top: 1px solid var(--ink); }
.hero-art-footer span:last-child { color: var(--red); font-size: 1.6rem; line-height: 1; }
.hero-portrait { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; min-width: 0; }
.hero-portrait img { width: 76%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 8px 24px #20212416; }
.hero-dog { background: #efd8d3; border-right: 1px solid var(--ink); }
.hero-cat { background: #e1e4e3; }
.portrait-label { position: absolute; top: 15px; left: 14px; color: var(--body); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.portrait-name { position: absolute; right: 15px; bottom: 8px; color: var(--ink); font-size: clamp(1.5rem,3vw,2.7rem); font-weight: 800; letter-spacing: -.07em; }

/* Error page */
.not-found-hero { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); align-items: center; gap: clamp(30px,5vw,80px); min-height: min(62vh,650px); padding-block: 80px; border-bottom: 1px solid var(--ink); }
.not-found-number { color: var(--red); font-size: clamp(9rem,21vw,19rem); font-weight: 800; line-height: .82; letter-spacing: -.1em; }
.not-found-copy h1 { max-width: 690px; margin: 18px 0 22px; font-size: clamp(3.2rem,6.5vw,6.3rem); }
.not-found-copy p { max-width: 550px; color: var(--body); font-size: 1.12rem; }
.not-found-next { padding-block: 62px 88px; }
.not-found-next h2 { font-size: clamp(1.8rem,3vw,2.6rem); }
.not-found-next p { max-width: 660px; color: var(--body); }
.not-found-next a { font-weight: 700; text-underline-offset: 4px; }

/* Site sections */
.section { padding-block: 94px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 35px; }
.section-heading h2 { margin: 11px 0 0; max-width: 800px; }
.section-heading p { max-width: 350px; margin: 0; color: var(--muted); font-size: .93rem; }
.animal-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.animal-card { display: flex; flex-direction: column; min-height: 318px; padding: 20px 21px 23px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper); text-decoration: none; transition: background .16s; }
.animal-card:hover { background: #f9efed; }
.animal-card-top { display: flex; justify-content: space-between; align-items: start; }
.animal-index { color: var(--red); font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.animal-card .arrow { font-size: 1.5rem; line-height: 1; }
.animal-icon { width: 148px; height: 148px; margin: 4px 0 12px; object-fit: cover; align-self: center; }
.animal-card-text { display: block; margin-top: 8px; }
.animal-card strong { display: block; margin-bottom: 6px; font-size: 1.48rem; font-weight: 800; letter-spacing: -.05em; line-height: 1.1; }
.animal-card small { display: block; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.feature-section { padding-block: 93px; background: var(--ink); color: #fff; }
.feature-section .eyebrow { color: #ff8a7d; }
.feature-grid { display: grid; grid-template-columns: .92fr 1fr; gap: 100px; }
.feature-grid h2 { margin: 14px 0 20px; }
.feature-grid p { max-width: 480px; color: #d6d8d8; }
.feature-grid .text-link { margin-top: 14px; }
.feature-grid .text-link:hover { color: #ff8a7d; }
.steps > div { display: flex; gap: 27px; padding: 24px 0; border-bottom: 1px solid #646b6d; }
.steps > div:first-child { border-top: 1px solid #646b6d; }
.steps span { min-width: 38px; color: #ff8a7d; font-size: .9rem; font-weight: 800; }
.steps h3 { margin-bottom: 4px; font-size: 1.22rem; }
.steps p { margin: 0; color: #c8cdce; font-size: .9rem; }
.article-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.article-card { display: flex; flex-direction: column; min-height: 260px; padding: 22px 0 16px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--line); text-decoration: none; }
.article-card:hover { border-top-color: var(--red); }
.article-no { color: var(--red); font-size: .7rem; font-weight: 800; letter-spacing: .11em; }
.article-card h2, .article-card h3 { margin: 24px 0 13px; font-size: 1.55rem; font-weight: 800; line-height: 1.17; }
.article-card p { color: var(--muted); font-size: .87rem; }
.article-go { margin-top: auto; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

/* Inner pages */
.page-hero { padding-top: 29px; padding-bottom: 50px; border-bottom: 1px solid var(--ink); }
.breadcrumbs { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: .75rem; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--red); text-decoration: underline; }
.page-heading { max-width: 960px; margin-top: 60px; }
.page-heading h1 { margin: 12px 0 15px; font-size: clamp(3.5rem,6.3vw,6.4rem); hyphens: auto; overflow-wrap: anywhere; }
.page-heading p { max-width: 700px; margin: 0; color: var(--body); font-size: 1.12rem; }
.compact-top { padding-top: 64px; }
.info-panel { display: grid; grid-template-columns: 240px 1fr; gap: 40px; margin-top: 47px; padding: 28px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.info-panel h2 { font-size: 1.55rem; }
.info-panel p { margin: 0; color: var(--body); }

/* Generator */
.tool-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; align-items: start; margin-top: 55px; border: 1px solid var(--ink); }
.tool-card, .results-card { min-width: 0; padding: 29px 31px; }
.tool-card { border-bottom: 1px solid var(--ink); background: var(--soft); }
.results-card { background: var(--paper); }
.tool-card-head, .result-head { display: flex; align-items: start; justify-content: space-between; gap: 22px; }
.tool-card h2, .results-card h2 { margin: 9px 0 25px; font-size: 2.1rem; }
.tool-icon { width: 70px; height: 70px; flex: none; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.fields label { display: block; color: var(--ink); font-size: .79rem; font-weight: 800; }
.fields .full { grid-column: 1 / -1; }
.fields input, .fields select, .fields textarea { display: block; width: 100%; min-height: 46px; margin-top: 7px; padding: 9px 11px; border: 1px solid #858c8d; border-radius: 0; background: #fff; color: var(--ink); }
.fields textarea { min-height: 180px; resize: vertical; }
.fields input::placeholder { color: #687077; }
.fields small { display: block; margin-top: 5px; color: var(--muted); font-size: .8rem; font-weight: 400; line-height: 1.5; }
.form-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 25px; }
.form-error { margin: 13px 0 0; color: #9c3029; font-size: .83rem; }
.result-count { padding-top: 3px; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.result-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 290px; border-top: 1px solid var(--line); color: var(--muted); text-align: center; }
.result-empty span { color: var(--red); font-size: 2rem; }
.result-empty p { max-width: 250px; }
.results { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.name-result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 70px; padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.name-result strong { display: block; font-size: 1.18rem; font-weight: 800; line-height: 1.15; }
.name-result small { display: block; margin-top: 4px; color: var(--muted); font-size: .8rem; }
.favorite { min-width: 44px; min-height: 44px; padding: 4px 7px; border: 0; background: transparent; color: #62696a; font-size: 1.45rem; line-height: 1; }
.favorite[aria-pressed="true"] { color: var(--red); }
.result-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 19px; }
.status { min-height: 19px; margin: 11px 0 0; color: #345e3d; font-size: .8rem; }
.favorites-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 22px; padding: 25px 28px; border: 1px solid var(--ink); }
.favorites-panel h2 { margin: 8px 0; font-size: 1.7rem; }
.favorites-panel p { margin: 0; color: var(--muted); font-size: .83rem; }
.favorites-panel .name-tags { margin: 0 0 14px; }
.favorite-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.favorites-panel .status { margin-top: 10px; }

/* Supporting content */
.guide-section { display: grid; grid-template-columns: 1.12fr .88fr; gap: 78px; }
.guide-section h2 { max-width: 600px; margin: 12px 0 20px; }
.guide-section p { color: var(--body); }
.guide-section h3 { margin-top: 34px; }
.check-list { padding: 0; list-style: none; }
.check-list li { position: relative; padding: 8px 0 8px 30px; border-bottom: 1px solid var(--line); }
.check-list li:before { content: '↗'; position: absolute; left: 0; color: var(--red); font-weight: 800; }
.sample-panel { align-self: start; padding: 25px; border-top: 3px solid var(--red); background: var(--soft); }
.sample-panel h3 { margin-top: 11px; font-size: 1.5rem; }
.sample-panel p { color: var(--muted); font-size: .82rem; }
.name-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 19px 0; }
.name-tags span { padding: 6px 10px; border: 1px solid var(--ink); background: var(--paper); font-size: .82rem; font-weight: 700; }
.editorial-case { max-width: 870px; padding: 34px 40px; border-left: 3px solid var(--red); background: var(--soft); }
.editorial-case h2 { margin: 12px 0 17px; font-size: clamp(1.6rem,3vw,2.1rem); }
.editorial-case p { max-width: 700px; margin: 0 0 16px; color: var(--body); line-height: 1.72; }
.editorial-case p:nth-of-type(2) { margin-bottom: 0; font-size: .86rem; }
.editorial-case a { font-weight: 800; text-underline-offset: 3px; }
.editorial-case nav { display: grid; gap: 9px; margin-top: 23px; padding-top: 19px; border-top: 1px solid var(--line); }
.editorial-case nav strong { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; }
.editorial-case nav a { width: fit-content; }
.faq-section { max-width: 870px; padding-top: 20px; padding-bottom: 40px; }
.faq-section h2 { margin: 12px 0 27px; }
.faq-section details { padding: 19px 0; border-top: 1px solid var(--ink); }
.faq-section details:last-child { border-bottom: 1px solid var(--ink); }
.faq-section summary { cursor: pointer; font-weight: 800; }
.faq-section p { margin: 13px 0 0; color: var(--muted); }
.small-grid .animal-card { min-height: 255px; }
.article-heading { max-width: 970px; }
.article-body { max-width: 760px; padding-top: 24px; padding-bottom: 100px; }
.article-body section { padding: 20px 0 23px; border-top: 1px solid var(--line); }
.article-body h2 { max-width: 700px; margin-bottom: 15px; font-size: 2rem; }
.article-body p { color: var(--body); font-size: 1.02rem; line-height: 1.78; }
.article-toc { margin: 4px 0 44px; padding: 23px 26px; background: var(--soft); border-left: 3px solid var(--red); }
.article-toc strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.article-toc ol { columns: 2; gap: 32px; margin: 14px 0 0; padding-left: 20px; }
.article-toc li { break-inside: avoid; margin: 5px 0; color: var(--body); font-size: .88rem; }
.article-toc a { text-decoration: none; }
.article-toc a:hover { color: var(--red); text-decoration: underline; }
.article-body .article-example { margin: 12px 0 0; padding: 27px 30px; border: 1px solid var(--ink); background: #f9f2ed; }
.article-body .article-example h2 { font-size: 1.6rem; }
.article-body .article-example p { margin: 0; }
.article-body .article-checklist { margin: 18px 0; padding: 27px 30px; border: 1px solid var(--ink); }
.article-body .article-checklist h2 { font-size: 1.6rem; }
.article-checklist ul { margin: 0; padding-left: 20px; }
.article-checklist li { margin: 9px 0; line-height: 1.55; }
.article-body .article-sources { margin: 24px 0; padding: 24px 30px; border-left: 3px solid var(--red); background: #f5f5f3; }
.article-body .article-sources h2 { margin-top: 0; font-size: 1.55rem; }
.article-sources ul { margin: 18px 0 0; padding: 0; list-style: none; }
.article-sources li + li { margin-top: 16px; }
.article-sources a { display: inline-block; font-weight: 800; }
.article-sources span { display: block; margin-top: 4px; color: var(--body); font-size: .92rem; line-height: 1.55; }
.article-related { display: grid; gap: 9px; margin-top: 34px; }
.article-related h2 { margin-bottom: 4px; font-size: 1.4rem; }
.article-related a { display: flex; justify-content: space-between; gap: 15px; padding: 11px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 700; }
.article-related a:hover { color: var(--red); }
.guide-jump { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 30px; }
.guide-jump a { padding: 8px 12px; border: 1px solid var(--ink); font-size: .78rem; font-weight: 800; text-decoration: none; }
.guide-jump a:hover { background: var(--ink); color: #fff; }
.guide-group { scroll-margin-top: 20px; }
.article-end { margin-top: 32px; padding: 29px; border-top: 3px solid var(--red); background: var(--soft); }
.article-end h2 { font-size: 1.9rem; }
.article-end p { font-size: .94rem; }
.legal-body { max-width: 850px; padding-top: 12px; padding-bottom: 100px; }
.legal-body h2 { margin: 34px 0 13px; font-size: 1.8rem; }
.legal-body p { color: var(--body); line-height: 1.75; }
.legal-date { color: var(--muted) !important; font-size: .83rem; }
.legal-status { border-left:4px solid var(--red); background:var(--soft); padding:20px 24px; margin:25px 0; }
.legal-status h2 { margin-top:0; font-size:1.3rem; }
.legal-toc { padding:20px 0; border-block:1px solid var(--line); margin:30px 0; }
.legal-toc ul { columns:2; padding-left:20px; margin-bottom:0; }
.legal-toc li { padding:5px 0; break-inside:avoid; }
.legal-body section { scroll-margin-top:25px; }
.legal-body li { margin-bottom:10px; line-height:1.75; }
.legal-body code { overflow-wrap:anywhere; }
.legal-table-wrap { max-width:100%; overflow-x:auto; margin:24px 0; }
.legal-table-wrap table { border-collapse:collapse; width:100%; min-width:620px; font-size:.88rem; }
.legal-table-wrap caption { text-align:left; font-weight:700; padding-bottom:12px; }
.legal-table-wrap th,.legal-table-wrap td { text-align:left; vertical-align:top; padding:14px; border:1px solid var(--line); line-height:1.65; }
.legal-table-wrap thead { background:var(--soft); }
@media(max-width:650px) { .legal-toc ul { columns:1; } .legal-status { padding:16px; } .legal-body h2 { font-size:1.5rem; } }

/* Companion tools and grouped guides */
.two-col { grid-template-columns: repeat(2,minmax(0,1fr)); }
.tool-link-card { min-height: 230px; }
.tool-card-copy { margin-bottom: 22px; }
.tool-card-copy p { margin: 0; max-width: 66ch; color: var(--body); font-size: .92rem; line-height: 1.75; }
.tool-card-copy p + p { margin-top: 14px; }
.guide-group + .guide-group { padding-top: 0; }
.result-intro { color: var(--muted); font-size: .88rem; }
.tool-placeholder { padding: 45px 0; border-top: 1px solid var(--line); color: var(--muted); }
.pair-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.pair-results .tool-placeholder { grid-column: 1/-1; }
.pair-row { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-height: 62px; padding: 10px 13px; border: 1px solid var(--line); }
.pair-row strong { overflow-wrap: anywhere; font-size: 1.04rem; }
.pair-row span { color: var(--red); font-weight: 800; }
.compare-table-wrap { max-width: 100%; overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .85rem; }
.compare-table th, .compare-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.compare-table th { border-top: 1px solid var(--ink); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.compare-table td:first-child { font-weight: 800; }
.comparison-note { padding: 15px 0; color: var(--body); font-size: .86rem; }
.shortlist-items { border-top: 1px solid var(--line); }
.shortlist-row, .conflict-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 59px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.shortlist-row strong, .conflict-row strong { overflow-wrap: anywhere; font-size: 1.04rem; }
.conflict-row { align-items: flex-start; }
.conflict-row span { max-width: 66%; color: var(--body); font-size: .82rem; text-align: right; }
.shortlist-row .button { min-height: 38px; padding: 7px 11px; font-size: .76rem; }
.result-actions [hidden] { display: none; }
.advice-block { max-width: 900px; }
.advice-block h2 { font-size: clamp(2rem,4vw,3.5rem); }
.advice-block p { color: var(--body); line-height: 1.75; }
.advice-block a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Footer */
.footer { padding: 66px 0 24px; background: var(--ink); color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 65px; }
.footer .brand { color: #fff; }
.footer p { max-width: 390px; margin-top: 20px; color: #c6cbcc; font-size: .87rem; }
.footer h2 { margin-bottom: 17px; color: #ff8a7d; font: 800 .74rem/1.4 Arial,Helvetica,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.footer-grid > div:not(:first-child) a { display: block; margin: 9px 0; color: #fff; font-size: .86rem; text-decoration: none; }
.footer-grid a:hover { text-decoration: underline; }
.footer-bottom { margin-top: 54px; padding-top: 21px; border-top: 1px solid #6c7071; color: #c6cbcc; font-size: .76rem; }

@media (max-width: 980px) {
  .head-cta { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 52px; }
  .hero-art { width: min(100%,650px); }
  .feature-grid { gap: 45px; }
  .animal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .article-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tool-layout { grid-template-columns: 1fr; }
  .tool-card { border-right: 0; border-bottom: 1px solid var(--ink); }
  .tool-card, .results-card { min-height: 0; }
}

@media (max-width: 650px) {
  .conflict-row { flex-direction: column; gap: 3px; }
  .conflict-row span { max-width: none; text-align: left; }
  .wrap { width: min(100% - 32px,1216px); }
  .head-inner { min-height: 70px; gap: 9px; padding-block: 12px; flex-wrap: wrap; }
  .brand { font-size: 1.55rem; }
  .brand img { width: 34px; height: 34px; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 82px; min-height: 44px; margin-left: auto; padding: 8px 11px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font-size: .88rem; font-weight: 700; cursor: pointer; }
  .menu-toggle:hover, .menu-toggle[aria-expanded="true"] { background: var(--ink); color: #fff; }
  .menu-toggle span:first-child { font-size: 1.1rem; line-height: 1; }
  .nav { display: none; order: 3; width: 100%; margin: 7px 0 0; border-top: 1px solid var(--line); }
  .menu-toggle[aria-expanded="true"] + .nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { display: block; padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: .92rem; white-space: normal; }
  .hero-grid { gap: 38px; padding-block: 59px 61px; }
  .hero h1 { margin: 17px 0 21px; font-size: clamp(3.4rem,14vw,5.2rem); }
  .hero p { font-size: 1.05rem; }
  .hero-actions { gap: 21px; margin-top: 27px; }
  .hero-note { margin-top: 30px; }
  .hero-art { grid-template-rows: 35px 238px 35px; }
  .hero-art-meta, .hero-art-footer { padding-inline: 10px; font-size: .58rem; }
  .portrait-label { top: 11px; left: 9px; font-size: .58rem; }
  .portrait-name { right: 8px; bottom: 7px; font-size: 1.3rem; }
  .not-found-hero { grid-template-columns: 1fr; gap: 28px; min-height: 0; padding-block: 55px 62px; }
  .not-found-number { font-size: clamp(7rem,30vw,10rem); }
  .not-found-copy h1 { margin-top: 12px; font-size: clamp(2.9rem,11vw,4.7rem); }
  .not-found-copy p { font-size: 1rem; }
  .not-found-next { padding-block: 46px 68px; }
  .section { padding-block: 65px; }
  .section-heading { display: block; }
  .section-heading p, .section-heading .text-link { display: inline-block; margin-top: 15px; }
  .animal-grid, .article-grid { grid-template-columns: 1fr; }
  .animal-card, .small-grid .animal-card { min-height: 260px; }
  .animal-icon { width: 126px; height: 126px; }
  .two-col, .pair-results { grid-template-columns: 1fr; }
  .feature-section { padding-block: 64px; }
  .feature-grid { grid-template-columns: 1fr; gap: 34px; }
  .steps > div { gap: 14px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .page-hero { padding-bottom: 35px; }
  .page-heading { margin-top: 46px; }
  .page-heading h1 { font-size: clamp(2.9rem,12vw,4.5rem); }
  .page-heading p { font-size: 1rem; }
  .compact-top { padding-top: 46px; }
  .info-panel { grid-template-columns: 1fr; gap: 6px; }
  .tool-layout { margin-top: 38px; }
  .tool-card, .results-card { padding: 20px; }
  .tool-card h2, .results-card h2 { font-size: 1.7rem; }
  .tool-icon { width: 58px; height: 58px; }
  .fields { grid-template-columns: 1fr; gap: 13px; }
  .fields .full { grid-column: auto; }
  .results { grid-template-columns: 1fr; }
  .favorites-panel { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .guide-section { grid-template-columns: 1fr; gap: 20px; }
  .faq-section { width: min(100% - 32px,870px); }
  .article-body h2 { font-size: 1.6rem; }
  .article-toc { padding: 20px; }
  .article-toc ol { columns: 1; }
  .article-body .article-example, .article-body .article-checklist, .article-body .article-sources { padding: 20px; }
}

@media (max-width: 390px) {
  .results { grid-template-columns: 1fr; }
  .hero-actions { align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; }
}

.mixer-results { max-height: 580px; overflow-y: auto; padding-left: 24px; scrollbar-gutter: stable; }
.mixer-results li { padding: 14px 8px; border-bottom: 1px solid var(--line); }
.mixer-results strong { font-size: 1.35rem; }
.mixer-results p { margin: 4px 0 0; overflow-wrap: anywhere; font-size: .86rem; color: var(--muted); }
.directory-filters { display: grid; grid-template-columns: 2fr 1fr auto; gap: 18px; align-items: end; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.directory-intro { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--line); border-bottom: 0; }
.directory-intro > div { display: grid; gap: 5px; padding: 22px; border-right: 1px solid var(--line); }
.directory-intro > div:last-child { border-right: 0; }
.directory-intro strong { font-size: clamp(1.9rem,4vw,3rem); line-height: 1; }
.directory-intro span { color: var(--body); font-size: .88rem; }
.directory-filters label { font-size: .9rem; font-weight: 700; }
.directory-filters input, .directory-filters select { display: block; width: 100%; min-height: 48px; margin-top: 8px; padding: 10px; border: 1px solid var(--muted); background: white; color: var(--ink); }
.directory-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin-top: 26px; }
.directory-item { display: flex; flex-direction: column; padding: 24px 0; border-top: 2px solid var(--ink); text-decoration: none; }
.directory-item:hover { border-color: var(--red); }
.directory-item > span { color: var(--muted); font-size: .8rem; }
.directory-item h2 { margin: 16px 0; font-size: 1.6rem; overflow-wrap: anywhere; }
.directory-item p { color: var(--body); font-size: .92rem; }
.directory-item dl { margin: 6px 0 22px; padding: 12px 0; border-top: 1px solid var(--line); }
.directory-item dt { color: var(--muted); font-size: .72rem; font-weight: 700; }
.directory-item dd { margin: 4px 0 0; color: var(--ink); font-size: .88rem; line-height: 1.45; }
.directory-item strong { margin-top: auto; font-size: .85rem; }
.specialist-results { padding: 0; list-style: none; }
.specialist-results li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.specialist-results h3 { margin-bottom: 6px; font-size: 1.5rem; }
.specialist-results small { color: var(--muted); }
.specialist-results p { margin: 10px 0 14px; font-size: .9rem; }
.specialist-guide { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 50px; }
.specialist-guide > * { min-width: 0; overflow-wrap: anywhere; }
.specialist-guide h2 { font-size: 2rem; }
.specialist-guide p { max-width: 66ch; }
@media(max-width:980px) { .directory-grid { grid-template-columns: 1fr 1fr; } .directory-filters { grid-template-columns: 1fr 1fr; } }
@media(max-width:650px) { .directory-filters, .directory-grid, .specialist-guide, .directory-intro { grid-template-columns: 1fr; } .directory-grid { gap: 12px; } .directory-intro > div { border-right: 0; border-bottom: 1px solid var(--line); } .directory-intro > div:last-child { border-bottom: 0; } }

.name-insights { width: 100%; flex-basis: 100%; margin: 16px 0 0; overflow-wrap: anywhere; }
.name-insights > div { padding: 11px 0; border-top: 1px solid var(--line); }
.name-insights dt { margin-bottom: 4px; font-size: .76rem; font-weight: 800; letter-spacing: .02em; }
.name-insights dd { max-width: 78ch; margin: 0; color: var(--body); font-size: .88rem; line-height: 1.6; }
.specialist-results .name-insights { margin-bottom: 14px; }

/* Zusammenfassung zuerst, Details auf Wunsch; Formular bleibt über den Ergebnissen. */
.name-insight-summary { max-width: 78ch; margin: 0 0 12px; color: var(--body); font-size: .92rem; line-height: 1.7; }
.name-insight-details { width: 100%; border-top: 1px solid var(--line); }
.name-insight-details summary { width: fit-content; min-height: 44px; padding: 10px 0; font-size: .85rem; font-weight: 700; cursor: pointer; text-underline-offset: 4px; }
.name-insight-details summary:hover { color: var(--red); }
.name-insight-details dl { margin: 0; }
.name-insight-details dl > div { padding: 12px 0; border-top: 1px solid var(--line); }
.result-save { margin: 6px 0 10px; }
.results-card, .tool-card, .fields > *, .article-decision { min-width: 0; }
.article-byline { display: flex; flex-wrap: wrap; gap: 5px 18px; margin-top: 20px; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.article-byline a { text-underline-offset: 3px; }
.article-decision { margin: 0 0 36px; }
.article-decision h2 { font-size: clamp(1.45rem,3vw,2rem); }
.article-decision table { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.6; }
.article-decision caption { text-align: left; padding: 0 0 12px; color: var(--muted); font-size: .8rem; }
.article-decision th, .article-decision td { width: 33.333%; padding: 16px; border: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.article-decision thead th { background: var(--soft); font-size: .8rem; }
.article-decision tbody th { font-weight: 700; }
.article-tool-path { padding: 18px 0; border-bottom: 1px solid var(--ink); }
.article-tool-path a { font-weight: 700; }
.base-example { padding: 28px; margin-top: 30px; border: 1px solid var(--line); }
.base-example h2 { margin: 8px 0 16px; font-size: 1.7rem; }
.base-example dl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.base-example dt { font-weight: 700; }
.base-example dd { margin: 5px 0 0; line-height: 1.7; }
.base-example p { max-width: 78ch; }
.base-example code { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 600px) {
 .article-decision thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 .article-decision tbody, .article-decision tr, .article-decision th, .article-decision td { display: block; width: 100%; }
 .article-decision tr { margin-bottom: 16px; border: 1px solid var(--line); }
 .article-decision tbody th, .article-decision td { border: 0; padding: 12px 16px; }
 .article-decision tbody th { background: var(--soft); }
 .article-decision td::before { content: attr(data-label); display: block; font-weight: 700; font-size: .77rem; margin-bottom: 4px; }
 .base-example { padding: 20px; }
 .base-example dl { grid-template-columns: 1fr; }
 .article-byline { display: block; }
 .article-byline > * { display: block; margin-top: 5px; }
}

.specialist-advanced { margin-top: 20px; border-top: 1px solid var(--line); }
.specialist-advanced > summary, .specialist-guide > details > summary { cursor: pointer; padding: 16px 0; font-size: 1rem; font-weight: 700; }
.specialist-advanced[open] > .fields { padding: 5px 0 12px; }
.specialist-guide dl { margin: 0; }
.specialist-guide dt { margin-top: 16px; font-weight: 700; }
.specialist-guide dd { margin: 5px 0 0; max-width: 70ch; overflow-wrap: anywhere; }
.specialist-guide > details { border-top: 1px solid var(--line); }
.specialist-guide > details h3 { margin-top: 22px; }
#specialist-groups { padding: 20px; margin-top: 20px; border-left: 3px solid var(--red); background: var(--soft); }
#specialist-groups h3 { font-size: 1.2rem; }
#specialist-groups summary { cursor: pointer; padding: 10px 0; font-weight: 700; }

/* Lesbare Absätze innerhalb der Ergebnisdetails. */
.name-insights dd p { margin: 0 0 13px; font-size: .91rem; line-height: 1.75; }
.name-insights dd p:last-child { margin-bottom: 0; }
.tool-analysis-card { min-width: 0; padding: 22px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.tool-analysis-card h3 { margin: 0 0 12px; font-size: 1.25rem; }
.tool-analysis-card .analysis-summary { max-width: 78ch; margin: 0 0 15px; line-height: 1.75; }
.tool-analysis-card details { margin: 0 0 16px; }
.tool-analysis-card summary { cursor: pointer; padding: 12px 0; font-weight: 700; border-top: 1px solid var(--line); }
.tool-analysis-card summary:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.conflict-row.tool-analysis-card { display: block; }
.pair-results:has(.tool-analysis-card) { display: block; }
.shortlist-row label { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; padding: 8px 0; }
.shortlist-row input[type=checkbox] { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--ink); }
.shortlist-row .button { flex-shrink: 0; }
.bulk-panel, .selection-panel { margin-top: 30px; padding-top: 25px; border-top: 1px solid var(--line); }
.bulk-panel > label { display: block; font-weight: 700; margin-bottom: 10px; }
.bulk-panel textarea { display: block; width: 100%; min-height: 150px; padding: 11px; resize: vertical; border: 1px solid #858c8d; background: white; color: var(--ink); font: inherit; }
.tool-crosslinks { margin-top: 30px; line-height: 2; }
.handoff-panel,.handoff-inbox { width:min(1216px,calc(100% - 32px)); margin:28px auto; padding:24px; border:1px solid var(--line); background:var(--soft); overflow-wrap:anywhere; }
.handoff-panel h2,.handoff-inbox h2 { font-size:1.45rem; }
.handoff-panel p,.handoff-inbox p { max-width:78ch; }
.handoff-chips { display:flex;flex-wrap:wrap;gap:8px; }
.handoff-choice { display:flex;align-items:center;gap:10px; width:100%;padding:12px 0;cursor:pointer;font-size:.9rem; }
.handoff-choice input { width:22px;height:22px;flex:0 0 22px;accent-color:var(--ink); }
@media(max-width:650px) {
  [data-shortlist-tool] .result-head { display: block; }
  [data-shortlist-tool] .result-head h2 { margin-bottom: 8px; }
  [data-shortlist-tool] .result-count { display: block; padding-bottom: 18px; white-space: normal; }
}
.name-insight-summary { max-width: 78ch; font-size: .95rem; line-height: 1.75; }
.name-insight-details dl > div { padding: 17px 0; }