:root {
  --ink: #17313a;
  --ink-soft: #466169;
  --paper: #f8f7f1;
  --wash: #dbe7e2;
  --wash-deep: #b9cdc4;
  --accent: #c84d36;
  --accent-dark: #963523;
  --line: rgba(23, 49, 58, 0.18);
  --shadow: 0 22px 55px rgba(36, 64, 69, 0.12);
  --display: "Arial Narrow", "Aptos Display", "Franklin Gothic Medium", sans-serif;
  --body: "Trebuchet MS", "Aptos", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  line-height: 1.55;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { color: inherit; }
:focus-visible { outline: 3px solid #16728d; outline-offset: 3px; }
.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  background: var(--ink);
  color: white;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header, footer {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header { min-height: 76px; border-bottom: 1px solid var(--line); }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 0.77rem/1 var(--body);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}
.wordmark picture {
  display: block;
  flex: 0 0 auto;
}
.wordmark-logo {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 50%;
}
nav { display: flex; align-items: center; gap: 28px; }
nav a { font-size: 0.86rem; text-decoration: none; }
nav a:hover { text-decoration: underline; text-underline-offset: 5px; }

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(560px, 1.18fr);
  gap: clamp(36px, 6vw, 92px);
  align-items: center;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(50px, 8vw, 70px) 0 72px;
}
.hero::before {
  position: absolute;
  z-index: -1;
  inset: 5% -20vw auto 48%;
  height: 76%;
  content: "";
  background: var(--wash);
  clip-path: polygon(5% 0, 100% 0, 96% 93%, 0 100%);
}
.eyebrow, .card-kicker {
  margin: 0 0 14px;
  color: var(--accent-dark);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 630px;
  margin-bottom: 24px;
  font: 800 clamp(3.6rem, 7vw, 6.8rem)/0.82 var(--display);
  letter-spacing: -0.07em;
  text-transform: uppercase;
}
h1 em {
  color: var(--accent);
  font-family: var(--serif);
  font-size: 0.76em;
  font-weight: 400;
  letter-spacing: -0.05em;
  text-transform: none;
}
.lede { max-width: 600px; color: var(--ink-soft); font-size: 1.04rem; }
.trust-note {
  max-width: 520px;
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
}
.trust-note span { color: var(--accent); margin-right: 5px; }
.mobile-generate { display: none; }

.generator-card {
  position: relative;
  padding: clamp(24px, 4vw, 42px);
  background: rgba(248, 247, 241, 0.96);
  border: 1px solid rgba(23, 49, 58, 0.12);
  box-shadow: var(--shadow);
}
.generator-card::after {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 32px;
  height: 32px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  content: "";
}
.card-heading { display: flex; justify-content: space-between; margin-bottom: 28px; }
.card-heading h2 { margin: 0; font: 700 1.55rem/1.1 var(--serif); }
.card-kicker { margin-bottom: 6px; color: var(--ink-soft); }
.file-tab {
  display: grid;
  width: 50px;
  height: 32px;
  place-items: center;
  color: white;
  background: var(--accent);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.field { display: grid; gap: 8px; }
.field > span, .quantity legend, .alphabet-filter legend {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.field span small { color: var(--ink-soft); font-weight: 400; }
.field > small { color: var(--ink-soft); font-size: 0.67rem; }
input[type="text"], input[type="search"], select {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 0;
}
.field-wide { margin-bottom: 22px; }
.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: end;
}
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.quantity legend { margin-bottom: 8px; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  display: grid;
  min-height: 48px;
  place-items: center;
  background: white;
  border: 1px solid var(--line);
  border-right: 0;
  cursor: pointer;
}
.segmented label:last-child { border-right: 1px solid var(--line); }
.segmented input:checked + label { color: white; background: var(--ink); }
.segmented input:focus-visible + label { outline: 3px solid #16728d; outline-offset: 3px; }
.alphabet-filter { margin-top: 22px; }
.alphabet-filter legend { margin-bottom: 8px; }
.alphabet { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
.alphabet button {
  min-width: 0;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  font: 700 0.65rem/1 var(--body);
  cursor: pointer;
}
.alphabet button:hover, .alphabet button.active {
  color: white;
  background: var(--accent);
}
.alphabet button[disabled] { color: #9aaaa9; cursor: not-allowed; }
.primary-button {
  display: flex;
  width: 100%;
  min-height: 56px;
  margin-top: 24px;
  padding: 0 20px;
  align-items: center;
  justify-content: space-between;
  color: white;
  background: var(--accent);
  border: 0;
  font-weight: 800;
  cursor: pointer;
}
.primary-button:hover { background: var(--accent-dark); }
.primary-button:disabled { opacity: 0.65; cursor: wait; }
.noscript-note { color: var(--accent-dark); font-size: 0.8rem; }
.button-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}
.button-row .primary-button { margin-top: 24px; }
.surprise-button {
  min-width: 132px;
  margin-top: 24px;
  background: white;
}
.fantasy-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fantasy-page .hero::before { background: #e6ded3; }
.fantasy-page .file-tab, .fantasy-page .primary-button { background: #7f3f2f; }
.fantasy-page .primary-button:hover { background: #5f2f25; }
.fantasy-page .eyebrow, .fantasy-page .card-kicker { color: #7f3f2f; }
.origin-page .hero::before { background: #d9e6e8; }
.origin-page .file-tab, .origin-page .primary-button { background: #2f6f7f; }
.origin-page .primary-button:hover { background: #245766; }
.origin-page .eyebrow, .origin-page .card-kicker { color: #2f6f7f; }
.japanese-page .hero::before { background: #e3e4dc; }
.japanese-page .file-tab, .japanese-page .primary-button { background: #335f4b; }
.japanese-page .primary-button:hover { background: #254637; }
.japanese-page .eyebrow, .japanese-page .card-kicker { color: #335f4b; }
.russian-page .hero::before { background: #e1e6e4; }
.russian-page .file-tab, .russian-page .primary-button { background: #7b2432; }
.russian-page .primary-button:hover { background: #5d1c28; }
.russian-page .eyebrow, .russian-page .card-kicker { color: #7b2432; }
.japanese-page h1 {
  max-width: 560px;
  font-size: clamp(2.85rem, 6vw, 6rem);
  line-height: 0.92;
}
.russian-page h1 {
  max-width: 610px;
  font-size: clamp(2.85rem, 6vw, 6rem);
  line-height: 0.92;
}
.origin-search-card { align-self: stretch; }
.origin-button-row { grid-template-columns: 1fr 112px; }
.japanese-filter-card { align-self: stretch; }
.japanese-filter-grid,
.russian-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.japanese-button-row,
.russian-button-row { grid-template-columns: 1fr 112px; }
.russian-filter-card { align-self: stretch; }
.russian-form-control { margin: 0 0 22px; }
.starter-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.starter-examples button,
.origin-suggestions button,
.quiet-link-button {
  display: inline-grid;
  min-height: 42px;
  padding: 0 13px;
  place-items: center;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  font-size: 0.76rem;
  text-decoration: none;
  cursor: pointer;
}
.starter-examples button:hover,
.origin-suggestions button:hover,
.quiet-link-button:hover {
  background: var(--wash);
}

.results-section, .use-cases, .how-section, .guide-section, .explore-section, .faq-section {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 50px 0;
}
.results-section { min-height: 720px; }
.section-heading {
  display: grid;
  grid-template-columns: 0.45fr 1fr;
  gap: 40px;
  margin-bottom: 42px;
}
.section-heading h2, .guide-intro h2 {
  margin: 0;
  font: 700 clamp(2rem, 4vw, 3.6rem)/1.02 var(--display);
  letter-spacing: -0.045em;
}
.results-heading { grid-template-columns: 1fr auto; align-items: end; }
.results-heading h2 { font-family: var(--serif); }
.result-actions { display: flex; gap: 8px; }
.quiet-button, .text-button, .card-actions button {
  min-height: 44px;
  padding: 0 15px;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
}
.quiet-button:hover, .card-actions button:hover { background: var(--wash); }
.text-button { padding: 0; border: 0; text-decoration: underline; text-underline-offset: 4px; }
.status { margin: -22px 0 8px; color: var(--ink-soft); font-size: 0.82rem; }
.dataset-note {
  margin: 0 0 28px;
  color: var(--ink-soft);
  font-size: 0.78rem;
}
.dataset-note a { font-weight: 700; text-underline-offset: 3px; }
.result-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--ink); }
.result-card {
  display: flex;
  min-height: 132px;
  padding: 25px 20px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.result-card:nth-child(odd) { border-right: 1px solid var(--line); }
.result-card h3 { margin: 0 0 7px; font: 400 clamp(1.55rem, 3vw, 2.25rem)/1 var(--serif); }
.result-card p { margin: 0; color: var(--ink-soft); font-size: 0.74rem; text-transform: capitalize; }
.full-name { color: var(--accent-dark) !important; text-transform: none !important; }
.fantasy-result-card {
  min-height: 188px;
  align-items: flex-start;
  gap: 18px;
}
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.tag-row span {
  display: inline-grid;
  min-height: 24px;
  padding: 0 8px;
  place-items: center;
  color: var(--ink);
  background: var(--wash);
  border: 1px solid var(--line);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.result-card .fit-note {
  max-width: 440px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-transform: none;
}
.card-actions { display: flex; gap: 7px; opacity: 0.56; transition: opacity 160ms ease; }
.result-card:hover .card-actions, .result-card:focus-within .card-actions { opacity: 1; }
.card-actions button { padding: 0 11px; font-size: 0.74rem; }
.card-actions button.saved { color: white; background: var(--ink); }
.empty-state {
  padding: 70px 24px;
  text-align: center;
  background: var(--wash);
}
.empty-state h3 { font: 700 1.7rem/1.2 var(--serif); }
.empty-state p { max-width: 560px; margin-right: auto; margin-left: auto; }
.empty-glyph { margin-bottom: 8px !important; color: var(--accent); font-size: 3rem; }
.saved-drawer {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr auto;
  gap: 28px;
  align-items: start;
  margin-top: 52px;
  padding: 30px;
  background: var(--wash);
  border-left: 5px solid var(--accent);
}
.saved-drawer h2 { margin: 0; font: 700 1.45rem/1.2 var(--serif); }
.saved-drawer h2 span { display: inline-grid; min-width: 26px; height: 26px; place-items: center; color: white; background: var(--ink); border-radius: 50%; font: 700 0.68rem/1 var(--body); }
.saved-storage-note { margin: 8px 0 0; color: var(--ink-soft); font-size: 0.72rem; }
.saved-list { display: flex; flex-wrap: wrap; gap: 8px; }
.saved-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; background: var(--paper); border: 1px solid var(--line); }
.saved-chip button { width: 28px; height: 28px; padding: 0; background: transparent; border: 0; cursor: pointer; }

.origin-results-section { min-height: 540px; }
.origin-result-panel {
  padding: clamp(24px, 4vw, 42px);
  background: rgba(255,255,255,0.55);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.origin-result-panel h3 {
  margin-bottom: 18px;
  font: 700 clamp(1.65rem, 3vw, 2.6rem)/1.06 var(--serif);
}
.origin-result-panel h4 {
  margin: 0 0 12px;
  font: 400 clamp(2rem, 4vw, 3.2rem)/1 var(--serif);
}
.origin-match-label {
  margin-bottom: 8px;
  color: var(--accent-dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.origin-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.origin-fact-grid > div {
  min-height: 132px;
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.origin-fact-grid strong,
.runtime-result strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.origin-fact-grid p,
.runtime-result p,
.not-found-result p {
  color: var(--ink-soft);
}
.origin-fact-grid small {
  display: block;
  color: var(--ink-soft);
}
.origin-limit-note {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}
.origin-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.origin-limits { background: #17313a; box-shadow: 0 0 0 100vmax #17313a; }

.japanese-list-section { min-height: 620px; }
.japanese-table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--ink);
}
.japanese-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  background: rgba(255,255,255,0.4);
}
.japanese-table caption {
  padding: 14px 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-align: left;
}
.japanese-table th,
.japanese-table td {
  padding: 16px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}
.japanese-table thead th {
  color: var(--ink-soft);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.japanese-table tbody th {
  width: 150px;
  font-weight: 400;
}
.japanese-name {
  display: block;
  margin-bottom: 6px;
  font: 400 1.45rem/1.05 var(--serif);
}
.japanese-table small {
  display: block;
  color: var(--accent-dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.japanese-table td {
  color: var(--ink-soft);
  font-size: 0.82rem;
}
.japanese-table td:nth-child(2),
.japanese-table td:nth-child(3) {
  color: var(--ink);
  font-size: 1.05rem;
}
.japanese-row-actions {
  display: grid;
  gap: 7px;
}
.japanese-row-actions button {
  min-height: 38px;
  padding: 0 10px;
  background: white;
  border: 1px solid var(--line);
  cursor: pointer;
}
.japanese-row-actions a {
  display: grid;
  min-height: 38px;
  padding: 0 10px;
  place-items: center;
  background: white;
  border: 1px solid var(--line);
  font-size: 0.82rem;
  text-decoration: none;
}
.japanese-row-actions button:hover,
.japanese-row-actions a:hover { background: var(--wash); }
.japanese-list-footer {
  display: flex;
  justify-content: center;
  padding: 22px 0 0;
}
.japanese-saved-drawer {
  margin-top: 36px;
  border-left-color: #335f4b;
}
.japanese-meaning-section {
  background: #243d36;
  box-shadow: 0 0 0 100vmax #243d36;
}
.japanese-dark-guide {
  background: #dfe3de;
  box-shadow: 0 0 0 100vmax #dfe3de;
}
.russian-saved-drawer {
  margin-top: 36px;
  border-left-color: #7b2432;
}
.russian-meaning-section {
  background: #2d3438;
  box-shadow: 0 0 0 100vmax #2d3438;
}
.russian-common-guide {
  background: #e0e4df;
  box-shadow: 0 0 0 100vmax #e0e4df;
}
.russian-work-guide {
  background: #e4ded8;
  box-shadow: 0 0 0 100vmax #e4ded8;
}
.italian-page .hero::before { background: #e9e5d6; }
.italian-page .file-tab, .italian-page .primary-button { background: #5b6b3f; }
.italian-page .primary-button:hover { background: #47543a; }
.italian-page .eyebrow, .italian-page .card-kicker { color: #5b6b3f; }
.italian-page h1 {
  max-width: 620px;
  font-size: clamp(2.85rem, 6vw, 6rem);
  line-height: 0.92;
}
.italian-filter-card { align-self: stretch; }
.italian-button-row { grid-template-columns: 1fr 112px; }
.italian-saved-drawer {
  margin-top: 36px;
  border-left-color: #5b6b3f;
}
.italian-meaning-section.use-cases {
  background: #2e3526;
  box-shadow: 0 0 0 100vmax #2e3526;
}
.italian-common-guide {
  background: #e7e3d4;
  box-shadow: 0 0 0 100vmax #e7e3d4;
}
.italian-american-guide {
  background: #dde2d4;
  box-shadow: 0 0 0 100vmax #dde2d4;
}
.italian-work-guide {
  background: #ece7db;
  box-shadow: 0 0 0 100vmax #ece7db;
}
.italian-page .japanese-row-actions button,
.italian-page .japanese-row-actions a {
  min-height: 44px;
}
.italian-table { min-width: 980px; }
.italian-table tbody th { width: 200px; }
.italian-table small + small { margin-top: 4px; }
.italian-region-label {
  display: block;
  margin-bottom: 3px;
  color: var(--accent-dark);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fantasy-use-cases { background: #24393d; box-shadow: 0 0 0 100vmax #24393d; }
.use-cases { background: var(--ink); color: white; box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.use-cases .eyebrow { color: #f08a74; }
.case-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.case-grid article { min-height: 230px; padding: 30px; border: 1px solid rgba(255,255,255,0.18); border-right: 0; }
.case-grid article:last-child { border-right: 1px solid rgba(255,255,255,0.18); }
.case-grid span { color: #f08a74; font-size: 0.68rem; letter-spacing: 0.12em; }
.case-grid h3 { margin: 50px 0 12px; font: 400 1.35rem/1.2 var(--serif); }
.case-grid p { color: #c9d5d4; font-size: 0.86rem; }

.steps { margin: 0 0 0 38%; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 0.7fr 1fr; gap: 26px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.steps strong { font: 700 1.2rem/1.3 var(--serif); }
.steps span { color: var(--ink-soft); }
.guide-section { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(40px, 10vw, 140px); background: var(--wash); box-shadow: 0 0 0 100vmax var(--wash); clip-path: inset(0 -100vmax); }
.guide-intro > p:last-child { max-width: 420px; margin-top: 28px; color: var(--ink-soft); }
.guide-list article { padding: 22px 0; border-top: 1px solid var(--line); }
.guide-list article:last-child { border-bottom: 1px solid var(--line); }
.guide-list h3 { margin-bottom: 8px; font: 700 1.2rem/1.2 var(--serif); }
.guide-list p { margin: 0; color: var(--ink-soft); }
.explore-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--ink); }
.explore-grid a { display: flex; min-height: 130px; padding: 25px; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 400 1.45rem/1.2 var(--serif); text-decoration: none; }
.explore-grid a:nth-child(even) { border-right: 0; }
.explore-grid a:hover { background: var(--wash); }
.explore-grid span { font: 700 0.7rem/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; }
.coming-soon { margin-top: 22px; color: var(--ink-soft); font-size: 0.78rem; }
.faq-list { margin-left: 30%; border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: 24px 44px 24px 0; font: 700 1.12rem/1.35 var(--serif); cursor: pointer; }
.faq-list p { max-width: 760px; color: var(--ink-soft); }

footer { min-height: 130px; border-top: 1px solid var(--line); }
footer p { margin: 0; color: var(--ink-soft); font-size: 0.76rem; }
footer nav { gap: 18px; }

.methodology-main {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}
.methodology-hero {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(50px, 10vw, 150px);
  padding: clamp(70px, 10vw, 130px) 0 90px;
  align-items: end;
}
.methodology-hero h1 { margin-bottom: 0; }
.methodology-summary {
  padding: 30px 0 8px;
  border-top: 1px solid var(--ink);
  color: var(--ink-soft);
}
.methodology-lede { color: var(--ink); font: 400 1.45rem/1.4 var(--serif); }
.methodology-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--ink);
  color: white;
  box-shadow: 0 0 0 100vmax var(--ink);
  clip-path: inset(0 -100vmax);
}
.methodology-facts article {
  min-height: 170px;
  padding: 32px 26px;
  border-right: 1px solid rgba(255,255,255,0.18);
}
.methodology-facts article:first-child { border-left: 1px solid rgba(255,255,255,0.18); }
.methodology-facts strong { display: block; margin-bottom: 38px; color: #f08a74; font: 700 2rem/1 var(--serif); }
.methodology-facts span { color: #d2dcda; font-size: 0.8rem; }
.methodology-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 96px 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}
.methodology-card {
  min-height: 300px;
  padding: clamp(28px, 5vw, 54px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.methodology-card-wide { grid-column: 1 / -1; }
.methodology-card h2, .methodology-section h2, .methodology-sources h2 {
  margin-bottom: 24px;
  font: 700 clamp(1.8rem, 3.4vw, 3rem)/1.04 var(--display);
  letter-spacing: -0.04em;
}
.methodology-card > p:last-child, .methodology-section p, .methodology-sources p { color: var(--ink-soft); }
.methodology-steps { margin: 36px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.methodology-steps li {
  display: grid;
  grid-template-columns: 0.35fr 1fr;
  gap: 26px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.methodology-steps strong { font-family: var(--serif); }
.methodology-steps span { color: var(--ink-soft); }
.methodology-section, .methodology-sources {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(40px, 10vw, 140px);
  padding: 84px 0;
  border-top: 1px solid var(--ink);
}
.methodology-section > div:last-child, .methodology-sources > div:last-child { max-width: 720px; }
.methodology-limit-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.methodology-limit-list li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.methodology-sources a { font-weight: 700; text-underline-offset: 3px; }
.methodology-return {
  display: flex;
  min-height: 72px;
  margin: 10px 0 96px;
  padding: 0 24px;
  align-items: center;
  justify-content: space-between;
  color: white;
  background: var(--accent);
  font-weight: 800;
  text-decoration: none;
}
.methodology-return:hover { background: var(--accent-dark); }

@media (max-width: 900px) {
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero::before { inset: 36% -20px auto 18%; height: 60%; }
  .filter-grid { grid-template-columns: repeat(2, 1fr); }
  .button-row { grid-template-columns: 1fr; }
  .origin-button-row { grid-template-columns: 1fr; }
  .japanese-button-row,
  .russian-button-row { grid-template-columns: 1fr; }
  .surprise-button { width: 100%; }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .case-grid article:nth-child(2) { border-right: 1px solid rgba(255,255,255,0.18); }
  .guide-section { grid-template-columns: 1fr; }
  .saved-drawer { grid-template-columns: 1fr; }
  .methodology-hero { grid-template-columns: 1fr; }
  .methodology-facts { grid-template-columns: repeat(2, 1fr); }
  .methodology-section, .methodology-sources { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 620px) {
  .site-header, footer, .hero, .results-section, .use-cases, .how-section, .guide-section, .explore-section, .faq-section, .methodology-main { width: min(100% - 28px, 1180px); }
  .hero { padding-top: 48px; gap: 38px; }
  h1 { font-size: clamp(3.25rem, 18vw, 5rem); }
  .hero::before { inset: 39% -14px auto 8%; height: 58%; }
  .generator-card { padding: 22px 18px; }
  .filter-grid { grid-template-columns: 1fr; }
  .fantasy-filter-grid { grid-template-columns: 1fr; }
  .japanese-filter-grid,
  .russian-filter-grid { grid-template-columns: 1fr; }
  .mobile-generate { display: flex; margin-top: 22px; }
  .alphabet { grid-template-columns: repeat(7, 1fr); }
  .alphabet button { min-height: 44px; }
  .results-section, .use-cases, .how-section, .guide-section, .explore-section, .faq-section { padding: 70px 0; }
  .section-heading, .results-heading { grid-template-columns: 1fr; gap: 14px; }
  .result-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .result-grid { grid-template-columns: 1fr; }
  .result-card:nth-child(odd) { border-right: 0; }
  .result-card { padding-right: 8px; padding-left: 8px; }
  .fantasy-result-card { flex-direction: column; }
  .origin-fact-grid { grid-template-columns: 1fr; }
  .japanese-table { min-width: 840px; }
  .japanese-table th,
  .japanese-table td { padding: 14px 10px; }
  .card-actions { opacity: 1; }
  .case-grid { grid-template-columns: 1fr; }
  .case-grid article, .case-grid article:nth-child(2) { border-right: 1px solid rgba(255,255,255,0.18); }
  .steps, .faq-list { margin-left: 0; }
  .steps li { grid-template-columns: 1fr; gap: 8px; }
  .explore-grid { grid-template-columns: 1fr; }
  .explore-grid a { border-right: 0; }
  footer { padding: 30px 0; flex-wrap: wrap; gap: 20px; }
  footer p { order: 3; flex-basis: 100%; }
  footer nav { flex-wrap: wrap; gap: 12px 18px; }
  .methodology-hero { padding: 64px 0; gap: 36px; }
  .methodology-facts { grid-template-columns: 1fr 1fr; }
  .methodology-facts article { min-height: 145px; padding: 24px 18px; }
  .methodology-facts strong { margin-bottom: 28px; font-size: 1.55rem; }
  .methodology-grid { grid-template-columns: 1fr; margin: 70px 0; }
  .methodology-card-wide { grid-column: auto; }
  .methodology-card { min-height: auto; padding: 32px 22px; }
  .methodology-steps li { grid-template-columns: 1fr; gap: 7px; }
  .methodology-section, .methodology-sources { padding: 64px 0; }
  .methodology-return { margin-bottom: 70px; }
}

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