:root {
  --red: #a9272d;
  --red-dark: #7e1820;
  --red-soft: #f7e7e3;
  --red-pale: #fff7f4;
  --ink: #18263c;
  --ink-2: #304158;
  --muted: #6d7480;
  --cream: #f8f3e9;
  --cream-2: #fffaf2;
  --gold: #b99252;
  --line: #e6dfd4;
  --line-cool: #dfe3e8;
  --white: #fff;
  --shadow: 0 16px 40px rgba(35, 31, 25, .08);
  --shadow-sm: 0 8px 24px rgba(35, 31, 25, .07);
  --radius: 16px;
  --radius-sm: 10px;
  --container: 1180px;
  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif;
  --sans: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: var(--sans); font-size: 15px; line-height: 1.8; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, dl, dd, ul, ol, blockquote { margin-top: 0; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 9999; padding: 10px 18px; color: #fff; background: var(--ink); border-radius: 0 0 8px 8px; transition: top .2s; }
.skip-link:focus { top: 0; }
.site-main { min-height: 60vh; overflow: hidden; }
.eyebrow { display: inline-block; color: var(--red); font: 700 11px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; }

/* Header */
.site-header { position: relative; z-index: 100; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line-cool); }
.header-inner { min-height: 78px; display: grid; grid-template-columns: 1fr minmax(300px, 420px); gap: 28px; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 12px; width: fit-content; }
.brand-seal { display: grid; place-items: center; width: 42px; aspect-ratio: 1; color: #fff; background: var(--red); border: 2px solid var(--red); outline: 1px solid rgba(255,255,255,.7); outline-offset: -5px; border-radius: 4px; font: 700 23px/1 var(--serif); transform: rotate(-2deg); box-shadow: 0 4px 10px rgba(169,39,45,.22); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong { font: 700 22px/1.2 var(--serif); letter-spacing: .04em; }
.brand-copy small { margin-top: 5px; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.header-search { display: grid; grid-template-columns: 1fr 44px; border: 1px solid #d8dce2; border-radius: 7px; overflow: hidden; background: #fff; }
.header-search input { min-width: 0; height: 42px; border: 0; padding: 0 14px; outline: 0; font-size: 13px; }
.header-search button { border: 0; display: grid; place-items: center; color: #fff; background: var(--ink); }
.header-search svg, .hero-search svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.header-actions { display: none; }
.header-contact-shortcut { display: none; }
.global-nav { border-top: 1px solid #f0f0f0; overflow: visible; }
.nav-inner { display: flex; align-items: stretch; justify-content: center; min-height: 49px; }
.global-nav .nav-inner > a,
.nav-dropdown__toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 17px;
  border: 0;
  color: #303743;
  background: transparent;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.global-nav .nav-inner > a::after,
.nav-dropdown__toggle::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 3px; background: var(--red); transform: translateX(-50%); transition: width .2s ease; }
.global-nav .nav-inner > a:hover,
.global-nav .nav-inner > a.is-active,
.nav-dropdown:hover > .nav-dropdown__toggle,
.nav-dropdown:focus-within > .nav-dropdown__toggle,
.nav-dropdown.is-active > .nav-dropdown__toggle { color: var(--red); }
.global-nav .nav-inner > a:hover::after,
.global-nav .nav-inner > a.is-active::after,
.nav-dropdown:hover > .nav-dropdown__toggle::after,
.nav-dropdown:focus-within > .nav-dropdown__toggle::after,
.nav-dropdown.is-active > .nav-dropdown__toggle::after { width: calc(100% - 28px); }
.nav-dropdown { position: relative; display: flex; align-items: stretch; }
.nav-dropdown__toggle { gap: 7px; cursor: pointer; }
.nav-dropdown__toggle svg { width: 10px; height: 7px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.nav-dropdown__menu {
  position: absolute;
  left: 50%;
  top: calc(100% - 1px);
  z-index: 30;
  width: 250px;
  display: grid;
  padding: 7px;
  border: 1px solid var(--line-cool);
  border-top: 3px solid var(--red);
  border-radius: 0 0 9px 9px;
  background: #fff;
  box-shadow: 0 16px 32px rgba(24,38,60,.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 7px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.nav-dropdown.is-open > .nav-dropdown__toggle svg { transform: rotate(180deg); }
.nav-dropdown__menu a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 52px;
  padding: 7px 12px;
  border-radius: 5px;
  color: #303743;
}
.nav-dropdown__menu a + a { border-top: 1px solid #f0ece6; border-radius: 0; }
.nav-dropdown__menu a:hover, .nav-dropdown__menu a.is-active { color: var(--red); background: var(--red-pale); }
.nav-dropdown__menu a span { font-size: 12px; font-weight: 700; }
.nav-dropdown__menu a small { margin-top: 1px; color: var(--muted); font-size: 8px; font-weight: 500; }
.global-nav .nav-inner > a.nav-contact {
  align-self: center;
  min-height: 37px;
  margin-left: 8px;
  padding: 0 17px;
  gap: 7px;
  color: #fff;
  background: var(--red);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(169,39,45,.18);
}
.global-nav .nav-inner > a.nav-contact::after { display: none; }
.global-nav .nav-inner > a.nav-contact:hover,
.global-nav .nav-inner > a.nav-contact.is-active { color: #fff; background: var(--red-dark); }
.nav-contact svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu-toggle { display: none; }

/* Footer */
.site-footer { position: relative; color: #dfe6ef; background: #14243c; margin-top: 90px; }
.footer-pattern { height: 14px; opacity: .3; background: repeating-radial-gradient(circle at 0 100%, transparent 0 10px, #8291a6 11px 12px, transparent 13px 22px); background-size: 44px 22px; }
.footer-main { display: grid; grid-template-columns: 1.1fr 2fr; gap: 80px; padding-block: 54px 44px; }
.footer-brand { display: flex; gap: 17px; align-items: flex-start; width: fit-content; transition: opacity .18s ease; }
.footer-brand:hover { opacity: .86; }
.footer-brand:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 4px; }
.brand-seal--footer { flex: none; }
.footer-brand strong { color: #fff; font: 700 24px var(--serif); }
.footer-brand p { margin: 10px 0 0; color: #aeb9c9; font-size: 13px; }
.footer-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 38px; }
.footer-links h2 { color: #fff; font-size: 13px; letter-spacing: .08em; }
.footer-links a { display: block; padding: 4px 0; color: #b8c3d2; font-size: 12px; }
.footer-links a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 20px; border-top: 1px solid rgba(255,255,255,.1); color: #8e9bad; font-size: 11px; }

/* Shared */
.section { padding: 82px 0; }
.section--cream { background: var(--cream-2); }
.section--wash { background: linear-gradient(135deg,#f7f5ef 0%,#fff 55%,#f7ece9 100%); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 30px; }
.section-heading h2 { margin: 7px 0 0; font: 700 30px/1.35 var(--serif); letter-spacing: .05em; }
.section-heading > p { max-width: 520px; margin: 0; color: var(--muted); font-size: 13px; }
.section-heading--inline { align-items: center; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 1px solid transparent; border-radius: 7px; font-weight: 700; font-size: 13px; transition: .2s ease; }
.button:hover { transform: translateY(-1px); }
.button--red { color: #fff; background: var(--red); box-shadow: 0 7px 18px rgba(169,39,45,.18); }
.button--red:hover { background: var(--red-dark); }
.button--ink { color: #fff; background: var(--ink); }
.button--ghost { color: var(--ink); background: #fff; border-color: var(--line); }
.button--ghost:hover { border-color: var(--red); color: var(--red); }
.button--muted { color: #555e69; background: #f1f1ef; }
.button--white { color: var(--red); background: #fff; }
.button--full { width: 100%; }
.button--large { min-height: 52px; padding-inline: 30px; }
.text-link { color: var(--red); font-weight: 700; font-size: 12px; }
.text-link b { margin-left: 5px; }
.card-label { display: inline-flex; padding: 4px 9px; border-radius: 999px; color: var(--red); background: var(--red-soft); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.mini-seal { flex: none; display: grid; place-items: center; width: 36px; aspect-ratio: 1; border-radius: 3px; color: #fff; background: var(--red); font: 700 18px var(--serif); box-shadow: inset 0 0 0 4px rgba(255,255,255,.2); }

/* Home hero */
.home-hero { position: relative; min-height: 492px; overflow: hidden; background: #f9f5eb; }
.home-hero__art { position: absolute; inset: 0; }
.home-hero__art img { width: 100%; height: 100%; object-fit: cover; }
.home-hero__inner { position: relative; min-height: 492px; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; }
.home-hero__copy { padding: 62px 0; }
.home-hero h1 { margin: 12px 0 18px; color: #171e2b; font: 700 47px/1.45 var(--serif); letter-spacing: .08em; }
.home-hero h1 em { color: var(--red); font-style: normal; }
.home-hero__copy > p { color: #3f4855; font-size: 14px; }
.hero-search { width: min(600px,100%); display: grid; grid-template-columns: 1fr 110px; margin-top: 27px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 12px 30px rgba(46,42,33,.14); }
.hero-search input { height: 56px; min-width: 0; border: 1px solid #e2ddd2; border-right: 0; padding: 0 19px; outline: 0; }
.hero-search input:focus { border-color: var(--red); }
.hero-search button { display: flex; gap: 8px; align-items: center; justify-content: center; border: 0; color: #fff; background: var(--red); font-weight: 700; }
.hero-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; color: #727882; font-size: 11px; }
.hero-suggestions a { padding: 1px 9px; background: rgba(255,255,255,.7); border: 1px solid #ddd5c8; border-radius: 999px; }
.hero-kanji { position: relative; display: grid; place-items: center; min-height: 430px; }
.hero-kanji__sun { position: absolute; width: 270px; aspect-ratio: 1; border-radius: 50%; background: rgba(177,43,46,.12); }
.hero-kanji__grid { position: relative; display: grid; place-items: center; width: 250px; aspect-ratio: 1; border: 1px solid rgba(169,39,45,.2); background: rgba(255,255,255,.42); }
.hero-kanji__grid::before, .hero-kanji__grid::after { content: ""; position: absolute; background: rgba(169,39,45,.14); }
.hero-kanji__grid::before { width: 1px; height: 100%; }
.hero-kanji__grid::after { width: 100%; height: 1px; }
.hero-kanji__grid span { font: 500 150px/1 var(--serif); color: #141719; filter: drop-shadow(0 5px 2px rgba(0,0,0,.06)); }
.hero-kanji__seal { position: absolute; right: 12%; bottom: 20%; display: grid; place-items: center; width: 38px; aspect-ratio: 1; color: #fff; background: var(--red); border-radius: 3px; font: 700 18px var(--serif); }
.stats-strip { position: relative; z-index: 2; margin-top: -1px; background: #fff; border-block: 1px solid var(--line); box-shadow: 0 5px 15px rgba(36,33,28,.04); }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat-item { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 96px; border-right: 1px solid var(--line); }
.stat-item:first-child { border-left: 1px solid var(--line); }
.stat-icon { display: grid; place-items: center; width: 38px; aspect-ratio: 1; border: 1px solid var(--red); border-radius: 50%; color: var(--red); font: 700 17px var(--serif); }
.stat-item > span:last-child { display: flex; flex-direction: column; }
.stat-item small { color: var(--muted); font-size: 10px; }
.stat-item strong { color: var(--ink); font-size: 23px; line-height: 1.35; }
.stat-item em { margin-left: 3px; color: var(--red); font-size: 11px; font-style: normal; }
.stat-item strong.stat-item__school {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.45;
  white-space: nowrap;
}
.stat-item__school em { margin-left: 0; }

.portal-menu-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 13px; }
.portal-menu-card { position: relative; min-height: 245px; padding: 25px 20px 20px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 9px; transition: .2s; }
.portal-menu-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.portal-menu-card--orange { border-top-color: #ce6b3d; background: #fffaf4; }
.portal-menu-card--blue { border-top-color: #557f9b; background: #f5fafc; }
.portal-menu-card--gold { border-top-color: #c29b48; background: #fffdf5; }
.portal-menu-card--ink { border-top-color: var(--ink); background: #f6f8fb; }
.portal-menu-card__icon { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 18px; color: var(--red); background: var(--red-pale); border-radius: 50%; }
.portal-menu-card__icon svg { width: 35px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.portal-menu-card__kanji { font: 700 30px var(--serif); }
.portal-menu-card strong { font: 700 18px var(--serif); }
.portal-menu-card p { min-height: 49px; margin: 8px 0 13px; color: var(--muted); font-size: 11px; line-height: 1.65; }

.ad-slot { width: min(calc(100% - 40px), var(--container)); min-height: 118px; margin: 40px auto; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9a9a96; }
.ad-label { margin-bottom: 4px; font-size: 9px; letter-spacing: .1em; }
.ad-placeholder { width: 100%; min-height: 90px; display: grid; place-items: center; background: #fafafa; border: 1px dashed #d9d9d5; color: #b9b9b5; font-size: 10px; letter-spacing: .2em; }
.article-sidebar .ad-slot { width: 100%; margin: 25px 0; }
.article-sidebar .ad-placeholder { min-height: 250px; }

.kanji-card-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.kanji-card-grid--home { grid-template-columns: repeat(8,1fr); }
.kanji-card { position: relative; min-width: 0; min-height: 165px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 10px; background: #fff; border: 1px solid var(--line-cool); border-radius: 8px; transition: .18s; overflow: hidden; }
.kanji-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid transparent; pointer-events: none; transition: border-color .18s; }
.kanji-card:hover { border-color: #d7aaa6; transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.kanji-card:hover::before { border-color: rgba(169,39,45,.12); }
.kanji-card__char { font: 500 52px/1.2 var(--serif); }
.kanji-card__reading { max-width: 100%; margin-top: 8px; color: var(--ink-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanji-card__meta { margin-top: 3px; color: var(--muted); font-size: 9px; }
.kanji-card--compact { min-height: 137px; }
.kanji-card--compact .kanji-card__char { font-size: 43px; }

.feature-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; }
.learning-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; }
.learning-card { min-height: 230px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fff; transition: .2s; }
.learning-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.learning-card h3 { margin: 9px 0 8px; font: 700 21px var(--serif); }
.learning-card p { color: var(--muted); font-size: 11px; }
.learning-card--today { grid-column: 1 / -1; min-height: 190px; background: linear-gradient(100deg,#fff 0%,#fff7ec 100%); }
.learning-card__big-kanji { flex: none; display: grid; place-items: center; width: 160px; aspect-ratio: 1; font: 500 105px var(--serif); background: rgba(255,255,255,.65); border: 1px solid #e5d9c2; }
.learning-card--quiz img { width: 115px; order: 2; }
.learning-card--compare { display: block; }
.compare-glyphs { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; }
.compare-glyphs span { font: 500 56px var(--serif); }
.compare-glyphs i { color: var(--red); font-style: normal; font-size: 12px; }
.today-panel { padding: 29px 28px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); box-shadow: var(--shadow-sm); text-align: center; }
.today-panel h2 { margin: 5px 0 12px; font: 700 20px var(--serif); }
.today-panel__char { display: grid; place-items: center; width: 155px; aspect-ratio: 1; margin: 0 auto 13px; border: 1px solid var(--line); background: #fffdf9; font: 500 100px var(--serif); }
.today-panel h3 { margin-bottom: 16px; color: var(--red); font-size: 13px; }
.today-panel dl { margin: 0 0 20px; border-top: 1px solid var(--line); }
.today-panel dl div { display: grid; grid-template-columns: 70px 1fr; padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 11px; }
.today-panel dt { color: var(--muted); }
.today-panel dd { margin: 0; }

.article-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 19px; }
.article-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 9px; transition: .2s; }
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.article-card__image { display: block; aspect-ratio: 16/8.7; overflow: hidden; background: var(--cream); }
.article-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.article-card:hover img { transform: scale(1.025); }
.article-card__body { padding: 18px 20px 19px; }
.article-card__body > div:first-child { display: flex; justify-content: space-between; align-items: center; }
.article-category { display: inline-flex; color: var(--red); font-size: 10px; font-weight: 700; }
.article-card h3, .article-card h2 { margin: 7px 0 8px; font: 700 16px/1.65 var(--serif); }
.article-card p { color: var(--muted); font-size: 11px; line-height: 1.75; }
.article-card time { color: #999; font-size: 9px; }
.home-cta { color: #fff; background: var(--red); }
.home-cta__inner { min-height: 190px; display: flex; align-items: center; justify-content: space-between; gap: 40px; background: url('/img/cta-pattern.svg') right center/500px auto no-repeat; }
.home-cta .eyebrow { color: #f1c8c5; }
.home-cta h2 { margin: 6px 0 5px; font: 700 30px var(--serif); }
.home-cta p { margin: 0; color: #f4dada; font-size: 12px; }

/* Breadcrumbs and page header */
.breadcrumbs { min-height: 47px; display: flex; align-items: center; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0; padding: 0; margin: 0; list-style: none; color: #818792; font-size: 10px; }
.breadcrumbs li + li::before { content: "›"; margin: 0 10px; color: #b3b6bb; }
.breadcrumbs a:hover { color: var(--red); }
.page-hero { position: relative; overflow: hidden; border-block: 1px solid #eee7db; background: #fbf7f0; }
.page-hero__wash { position: absolute; inset: 0; background: radial-gradient(circle at 80% 10%,rgba(169,39,45,.08),transparent 25%), linear-gradient(100deg,rgba(255,255,255,.8),transparent); }
.page-hero__wash::after { content: "漢"; position: absolute; right: 7%; top: 50%; color: rgba(169,39,45,.04); font: 700 160px/1 var(--serif); transform: translateY(-50%) rotate(-8deg); }
.page-hero__inner { position: relative; padding-block: 37px 39px; text-align: center; }
.page-hero h1 { margin: 7px 0 5px; font: 700 32px var(--serif); letter-spacing: .07em; }
.page-hero p { margin: 0; color: var(--muted); font-size: 12px; }
.page-layout { padding-top: 42px; }
.page-layout--single { max-width: 1140px; }

/* Forms */
.search-panel { padding: 24px 27px 27px; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 8px 30px rgba(37,32,24,.04); }
.search-panel__title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.search-panel__title h2 { margin: 0; font: 700 18px var(--serif); }
.filter-form { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 14px; align-items: start; }
.filter-form--idiom { grid-template-columns: 2fr 1fr 1.25fr auto; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .inline-search label { color: #404752; font-size: 11px; font-weight: 700; }
.field input, .field select, .inline-search input, .compare-form input { width: 100%; height: 45px; padding: 0 13px; border: 1px solid #d8dadd; border-radius: 5px; outline: 0; color: var(--ink); background: #fff; }
.field input:focus, .field select:focus, .inline-search input:focus, .compare-form input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(169,39,45,.08); }
.field small { color: var(--muted); font-size: 9px; }
.field--wide { grid-column: span 1; }
.filter-actions { grid-column: 1 / -1; display: flex; justify-content: center; gap: 9px; padding-top: 4px; }
.check-field { height: 45px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid #ddd; border-radius: 5px; font-size: 11px; }
.check-field input { accent-color: var(--red); }

/* Idioms: place the meaning-only checkbox on the same control row as the input/select.
   1.8em is the inherited label line-height (11px × 1.8), plus the field gap of 6px. */
@media (min-width: 1101px) {
  .filter-form.filter-form--idiom > .check-field {
    align-self: start;
    margin-top: calc(1.8em + 6px);
  }
}
.search-panel--compact { max-width: 740px; margin-inline: auto; }
.inline-search > div { display: grid; grid-template-columns: 1fr 100px; gap: 8px; margin-top: 7px; }
.result-toolbar { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.result-toolbar p { margin: 0; color: var(--muted); font-size: 11px; }
.result-toolbar p strong { color: var(--ink); font-size: 14px; }
.result-toolbar > a { color: var(--red); font-size: 11px; font-weight: 700; }
.view-switch { display: flex; border: 1px solid var(--line-cool); border-radius: 5px; overflow: hidden; }
.view-switch button { width: 35px; height: 32px; border: 0; color: #7b818a; background: #fff; }
.view-switch button + button { border-left: 1px solid var(--line-cool); }
.view-switch button.is-active { color: #fff; background: var(--ink); }
[data-result-grid].is-list { display: block; }
[data-result-grid].is-list .kanji-card { min-height: 80px; display: grid; grid-template-columns: 80px 1fr 180px; text-align: left; border-radius: 0; border-width: 0 0 1px; }
[data-result-grid].is-list .kanji-card__char { grid-row: 1 / span 2; font-size: 43px; }

.pagination { margin: 35px 0 20px; }
.pagination__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 0; padding: 0; list-style: none; }
.pagination__list li { margin: 0; padding: 0; list-style: none; }
.pagination a, .pagination span { min-width: 37px; height: 37px; display: inline-grid; place-items: center; padding: 0 9px; border: 1px solid var(--line-cool); border-radius: 5px; color: #555d68; background: #fff; font-size: 11px; }
.pagination .active a, .pagination a:hover { color: #fff; border-color: var(--red); background: var(--red); }
.pagination .disabled { opacity: .4; pointer-events: none; }
.empty-state { margin: 30px 0; padding: 70px 20px; text-align: center; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius); }
.empty-state > span { display: block; color: var(--red); font: 700 55px var(--serif); opacity: .45; }
.empty-state h2 { margin: 10px 0 4px; font: 700 20px var(--serif); }
.empty-state p { margin: 0; color: var(--muted); font-size: 12px; }
.empty-state--small { padding: 30px; }
.search-tip { position: relative; min-height: 180px; display: grid; grid-template-columns: 1fr 1.5fr 170px; align-items: center; gap: 25px; margin-top: 45px; padding: 28px 35px; overflow: hidden; background: #fff8e7; border: 1px solid #ead9ae; border-radius: 9px; }
.search-tip > div { display: flex; align-items: center; gap: 11px; }
.search-tip h2 { margin: 0; font: 700 19px var(--serif); }
.search-tip ul { margin: 0; padding-left: 18px; color: #555d66; font-size: 11px; }
.search-tip img { width: 155px; }
.notice-box { padding: 20px 23px; background: #f7f8fa; border-left: 4px solid var(--ink); border-radius: 4px; }
.notice-box span { color: var(--ink); font-size: 11px; font-weight: 700; }
.notice-box p { margin: 4px 0; }
.notice-box small { color: var(--muted); }
.notice-box--quality { display: flex; align-items: center; gap: 15px; margin-top: 18px; border-left-color: var(--red); }
.notice-box--quality span { flex: none; padding: 4px 9px; color: #fff; background: var(--red); border-radius: 999px; }
.notice-box--quality p { margin: 0; font-size: 11px; }

/* Word detail */
.detail-page { padding-top: 35px; }
.kanji-detail, .idiom-detail { max-width: 1040px; margin-inline: auto; }
.kanji-detail__hero { display: grid; grid-template-columns: 245px 1fr 290px; gap: 35px; align-items: center; padding: 35px; background: linear-gradient(100deg,#fff 0%,#fffdfa 58%,#f9f2e9 100%); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.kanji-square {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #ddd3c4;
  background: #fff;
}
.kanji-square::before,
.kanji-square::after,
.kanji-square i::before,
.kanji-square i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(169,39,45,.12);
  transform-origin: center;
}
.kanji-square::before {
  width: 1px;
  height: 100%;
  transform: translate(-50%, -50%);
}
.kanji-square::after {
  width: 100%;
  height: 1px;
  transform: translate(-50%, -50%);
}
.kanji-square i {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.kanji-square i::before {
  width: 1px;
  height: 142%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.kanji-square i::after {
  width: 1px;
  height: 142%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.kanji-square span {
  position: relative;
  z-index: 2;
  font: 500 160px/1 var(--serif);
  transform: translateY(.04em);
}
.kanji-detail__intro h1 { margin: 7px 0 0; font: 700 34px var(--serif); }
.kanji-reading { margin: 5px 0 13px; color: var(--red); font-size: 18px; font-weight: 700; }
.kanji-lead { color: var(--muted); font-size: 12px; }
.speak-button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid #d8dbe0; border-radius: 6px; color: var(--ink); background: #fff; font-size: 11px; font-weight: 700; }
.speak-button:hover { color: var(--red); border-color: var(--red); }
.speak-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.speak-button--compact {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  font-size: 9px;
}
.speak-button--compact svg { width: 15px; }
.kanji-facts { margin: 0; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.8); }
.kanji-facts div { display: grid; grid-template-columns: 86px 1fr; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 11px; }
.kanji-facts div:last-child { border-bottom: 0; }
.kanji-facts dt { color: var(--muted); }
.kanji-facts dd { margin: 0; font-weight: 700; }
.kanji-facts dd strong { margin-right: 3px; font-size: 18px; }
.kanji-facts dd small { display: block; color: var(--muted); font-weight: 400; }
.kanji-facts a { color: var(--red); }
.detail-anchor-nav { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: repeat(5,1fr); margin: 25px 0 0; color: #fff; background: var(--ink); border-radius: 7px; overflow: hidden; }
.detail-anchor-nav a { padding: 14px 10px; border-right: 1px solid rgba(255,255,255,.12); text-align: center; font-size: 11px; }
.detail-anchor-nav a:last-child { border: 0; }
.detail-anchor-nav a:hover { background: var(--red); }
.detail-section { padding: 58px 0 0; scroll-margin-top: 58px; }
.detail-section__heading { display: flex; align-items: center; gap: 13px; padding-bottom: 13px; border-bottom: 2px solid var(--ink); }
.detail-section__heading > span { display: grid; place-items: center; width: 41px; aspect-ratio: 1; color: #fff; background: var(--red); border-radius: 50%; font-size: 10px; font-weight: 700; }
.detail-section__heading small { color: var(--red); font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.detail-section__heading h2 { margin: 1px 0 0; font: 700 21px var(--serif); }
.info-table { margin-top: 20px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.info-table > div { display: grid; grid-template-columns: 155px 1fr; min-height: 54px; border-bottom: 1px solid var(--line); }
.info-table > div:last-child { border-bottom: 0; }
.info-table dt { display: flex; align-items: center; padding: 12px 18px; color: #4b5561; background: var(--cream-2); font-size: 11px; font-weight: 700; }
.info-table dd { display: flex; align-items: center; margin: 0; padding: 12px 20px; font-size: 12px; }
.info-table dd.reading-cell {
  justify-content: space-between;
  gap: 14px;
}
.reading-cell > span { min-width: 0; }
.practice-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 35px; align-items: center; margin-top: 22px; padding: 27px; background: #fbf7ef; border: 1px solid var(--line); border-radius: 9px; }
.practice-copy h3 { font: 700 18px var(--serif); }
.practice-copy p { color: var(--muted); font-size: 11px; }
.practice-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.practice-grid div { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: #fff; border: 1px solid #d9cfc0; }
.practice-grid div::before, .practice-grid div::after { content: ""; position: absolute; background: #eadfd1; }
.practice-grid div::before { width: 1px; height: 100%; }
.practice-grid div::after { width: 100%; height: 1px; }
.practice-grid span { position: relative; z-index: 1; color: #d4c8ba; font: 500 48px var(--serif); }
.practice-grid div:first-child span { color: #777; }
.practice-panel--writing { margin-top: 14px; }
.stroke-order-panel { align-items: start; }
.stroke-order-tips {
  display: grid;
  gap: 7px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  color: #59616b;
  font-size: 10px;
}
.stroke-order-tips li {
  position: relative;
  padding-left: 18px;
}
.stroke-order-tips li::before {
  content: "一";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--red);
  font-weight: 700;
}
.kanjivg-player {
  width: min(100%, 390px);
  justify-self: center;
  text-align: center;
}
.kanjivg-canvas {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #d8cdbf;
  background-color: #fff;
  background-image:
    linear-gradient(to right, transparent calc(50% - .5px), rgba(169,39,45,.12) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), rgba(169,39,45,.12) 50%, transparent calc(50% + .5px));
  box-shadow: inset 0 0 0 8px rgba(169,39,45,.018);
}
.kanjivg-canvas > img,
.kanjivg-inline {
  position: relative;
  z-index: 1;
  display: block;
  width: 94%;
  height: 94%;
  object-fit: contain;
}
.kanjivg-inline .kanjivg-stroke {
  fill: none !important;
  stroke: var(--ink) !important;
  stroke-width: 3.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke;
}
.kanjivg-inline .kanjivg-stroke.is-current {
  stroke: var(--red) !important;
}
.kanjivg-inline .kanjivg-stroke-numbers text {
  fill: #9a4b4f !important;
  font-family: var(--sans) !important;
  font-size: 7px !important;
  font-weight: 700;
}
.kanjivg-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 11px;
}
.stroke-order-button {
  min-width: 0;
  min-height: 39px;
  padding: 7px 8px;
  border: 1px solid #d3c8ba;
  border-radius: 5px;
  color: #414954;
  background: #fff;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.stroke-order-button:hover:not(:disabled) {
  color: var(--red);
  border-color: #d9aaa6;
  background: #fffafa;
}
.stroke-order-button--primary {
  color: #fff;
  border-color: var(--red);
  background: var(--red);
}
.stroke-order-button--primary:hover:not(:disabled) {
  color: #fff;
  border-color: #8f1f25;
  background: #8f1f25;
}
.stroke-order-button:disabled {
  cursor: wait;
  opacity: .48;
}
.kanjivg-status {
  min-height: 1.55em;
  margin: 9px 0 0;
  color: #59616b;
  font-size: 9px;
}
.kanjivg-credit {
  margin: 5px 0 0;
  color: #8a8f96;
  font-size: 8px;
}
.kanjivg-credit a {
  color: #6f747b;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kanjivg-credit a:hover { color: var(--red); }
.idiom-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 20px; }
.idiom-list a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 84px; padding: 11px 14px; border: 1px solid var(--line-cool); border-radius: 6px; background: #fff; }
.idiom-list a:hover { color: var(--red); border-color: #d9aaa6; }
.idiom-list strong { font: 700 21px var(--serif); }
.idiom-list__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.idiom-list__copy b {
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
}
.idiom-list__copy small {
  display: -webkit-box;
  overflow: hidden;
  color: #515a65;
  font-size: 9px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.idiom-list i { font-style: normal; }
.quality-note { margin: 12px 0 0; color: var(--muted); font-size: 9px; }
.section-intro { margin: 18px 0 0; color: var(--muted); font-size: 11px; }
.kanji-card-grid--same-reading { grid-template-columns: repeat(6,1fr); margin-top: 20px; }
.kanji-card-grid--related { grid-template-columns: repeat(8,1fr); margin-top: 20px; }

/* Idioms */
.idiom-card-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; }
.idiom-card { position: relative; min-height: 185px; display: flex; flex-direction: column; padding: 22px 19px 17px; border: 1px solid var(--line); border-radius: 8px; background: #fff; transition: .18s; }
.idiom-card:hover { transform: translateY(-3px); border-color: #d9aaa6; box-shadow: var(--shadow-sm); }
.idiom-card__status { align-self: flex-start; padding: 2px 7px; color: #777; background: #eee; border-radius: 999px; font-size: 8px; }
.idiom-card__status.is-known { color: #fff; background: var(--red); }
.idiom-card > strong { margin: 9px 0 1px; font: 700 31px var(--serif); letter-spacing: .08em; }
.idiom-card__reading { color: var(--red); font-size: 10px; }
.idiom-card p { flex: 1; margin: 10px 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.idiom-card i { color: var(--red); font-size: 9px; font-style: normal; font-weight: 700; }
.idiom-detail__hero { display: flex; align-items: center; gap: 45px; padding: 43px 50px; border: 1px solid var(--line); background: linear-gradient(100deg,#fff 0%,#fbf4e9 100%); box-shadow: var(--shadow-sm); }
.idiom-glyph { display: flex; align-items: center; gap: 16px; }
.idiom-glyph a { display: grid; place-items: center; width: 135px; aspect-ratio: 1; border: 1px solid #ddd0bd; background: #fff; font: 500 82px var(--serif); }
.idiom-glyph a:hover { border-color: var(--red); color: var(--red); }
.idiom-glyph span { color: var(--red); font-size: 20px; }
.idiom-detail__hero h1 { margin: 7px 0 4px; font: 700 35px var(--serif); }
.idiom-detail__hero p { color: var(--red); font-weight: 700; }
.data-badge { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 9px; }
.data-badge--caution { color: #825a08; background: #fff0c9; }
.composition-grid { display: grid; grid-template-columns: 1fr 1fr 160px; gap: 13px; margin-top: 21px; }
.composition-card { display: grid; grid-template-columns: 90px 1fr; gap: 17px; align-items: center; padding: 19px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.composition-card > strong { grid-row: 1 / span 2; display: grid; place-items: center; aspect-ratio: 1; background: var(--cream-2); border: 1px solid var(--line); font: 500 53px var(--serif); }
.composition-card dl { margin: 0; }
.composition-card dl div { display: grid; grid-template-columns: 45px 1fr; font-size: 9px; }
.composition-card dt { color: var(--muted); }
.composition-card dd { margin: 0; }
.composition-card > span { grid-column: 2; color: var(--red); font-size: 9px; font-weight: 700; }
.composition-total { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: var(--ink); border-radius: 8px; }
.composition-total small { font-size: 9px; }
.composition-total strong { font: 700 44px/1.2 var(--serif); }
.composition-total span { font-size: 10px; }
.reading-answer { display: flex; align-items: baseline; gap: 15px; margin-top: 21px; padding: 27px; background: var(--red-pale); border-left: 5px solid var(--red); }
.reading-answer strong { color: var(--red); font: 700 28px var(--serif); }
.reading-answer span { color: var(--muted); }
.prose-box { margin-top: 20px; padding: 25px 28px; background: #fff; border: 1px solid var(--line); }
.prose-box__source { margin: 18px 0 0; padding-top: 10px; border-top: 1px solid var(--line); text-align: right; font-size: 9px; }
.prose-box__source a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.prose-box__source a:hover { color: var(--red); }
.example-list > div { position: relative; margin-top: 12px; padding: 19px 22px 15px 60px; background: #f8f8f7; }
.example-list > div > span { position: absolute; left: 18px; top: 18px; display: grid; place-items: center; width: 27px; aspect-ratio: 1; color: #fff; background: var(--red); border-radius: 50%; font-size: 9px; }
.example-list blockquote { margin-bottom: 4px; font: 700 15px var(--serif); }
.example-list p { margin: 0; color: var(--muted); font-size: 10px; }
.unknown-word-panel { display: grid; grid-template-columns: 70px 1fr; gap: 22px; margin-top: 20px; padding: 27px; border: 1px solid #ead8a8; background: #fffaf0; }
.unknown-word-panel__icon { display: grid; place-items: center; width: 64px; aspect-ratio: 1; border-radius: 50%; color: #936512; background: #ffedbd; font: 700 30px var(--serif); }
.unknown-word-panel h3 { margin-bottom: 8px; font: 700 17px var(--serif); }
.unknown-word-panel p { margin-bottom: 7px; color: #625b50; font-size: 11px; }
.related-word-row { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; margin-top: 20px; }
.related-word-row a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 105px; padding: 10px; border: 1px solid var(--line); background: #fff; }
.related-word-row a:hover { color: var(--red); border-color: var(--red); }
.related-word-row strong { font: 700 24px var(--serif); }
.related-word-row span { color: var(--muted); font-size: 8px; }

/* Radicals, strokes, grades */
.radical-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 11px; }
.radical-card { min-height: 186px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; transition: .18s; }
.radical-card:hover { transform: translateY(-3px); color: var(--red); border-color: var(--red); box-shadow: var(--shadow-sm); }
.radical-card__shape { font: 500 52px/1.2 var(--serif); }
.radical-card__variants { min-height: 21px; color: #9a8d7e; font: 500 18px var(--serif); }
.radical-card strong { max-width: 100%; margin-top: 6px; color: var(--ink); font-size: 10px; text-align: center; }
.radical-card small { margin-top: 8px; color: var(--red); font-size: 8px; }
.radical-detail-hero { position: relative; min-height: 255px; display: grid; grid-template-columns: 210px 1fr 250px; align-items: center; gap: 35px; padding: 30px 45px; overflow: hidden; background: #fbf6ec; border: 1px solid var(--line); }
.radical-detail-hero__shape { display: grid; place-items: center; width: 180px; aspect-ratio: 1; background: #fff; border: 1px solid #ddd1bf; font: 500 110px var(--serif); }
.radical-detail-hero h2 { margin: 6px 0 13px; font: 700 25px var(--serif); }
.radical-detail-hero dl { margin: 0; }
.radical-detail-hero dl div { display: grid; grid-template-columns: 80px 1fr; padding: 5px 0; border-bottom: 1px solid #e6ddcf; font-size: 10px; }
.radical-detail-hero dd { margin: 0; }
.radical-detail-hero img { align-self: end; max-height: 210px; }
.stroke-grid { display: grid; grid-template-columns: repeat(10,1fr); gap: 8px; }
.stroke-card { min-height: 95px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.stroke-card:hover, .stroke-card.is-active { color: #fff; border-color: var(--red); background: var(--red); transform: translateY(-2px); }
.stroke-card strong { font: 700 29px/1 var(--serif); }
.stroke-card > span { align-self: flex-end; line-height: 1.4; font-size: 10px; }
.stroke-card small { flex-basis: 100%; color: var(--muted); text-align: center; font-size: 8px; }
.stroke-card:hover small, .stroke-card.is-active small { color: #f4cecb; }
.selected-result { margin-top: 50px; }
.guide-panel { display: grid; grid-template-columns: 280px 1fr; align-items: center; gap: 40px; margin-top: 45px; padding: 40px 70px; background: var(--cream-2); border: 1px solid var(--line); }
.guide-panel img { max-height: 190px; }
.guide-panel h2 { font: 700 22px var(--serif); }
.guide-panel p { color: var(--muted); }
.grade-nav { position: sticky; top: 0; z-index: 15; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 35px; color: #fff; background: var(--ink); box-shadow: var(--shadow-sm); }
.grade-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 12px 5px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.grade-nav a:hover { background: var(--red); }
.grade-nav strong {
  max-width: 100%;
  font: 700 15px var(--serif);
  line-height: 1.35;
  white-space: nowrap;
}
.grade-nav span {
  margin-top: 2px;
  color: #acb9ca;
  font-size: 10px;
  line-height: 1.3;
}
.grade-section { scroll-margin-top: 80px; margin-bottom: 52px; }
.grade-section > header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.grade-section > header > div { display: flex; align-items: center; gap: 13px; }
.grade-number { display: grid; place-items: center; width: 48px; aspect-ratio: 1; color: #fff; background: var(--red); border-radius: 50%; font: 700 19px var(--serif); }
.grade-section h2 { margin: 2px 0 0; font: 700 21px var(--serif); }
.grade-section > header > span { color: var(--muted); font-size: 11px; }
.grade-section__note { margin: 14px 0 -2px; color: var(--muted); font-size: 12px; }
.mini-kanji-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  max-width: 100%;
  margin-top: 16px;
}
.mini-kanji-grid a {
  min-width: 0;
  min-height: 87px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  overflow: hidden;
  border: 1px solid var(--line-cool);
  background: #fff;
}
.mini-kanji-grid a:hover { color: var(--red); border-color: var(--red); }
.mini-kanji-grid strong { font: 500 31px var(--serif); }
.mini-kanji-grid small {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  color: var(--muted);
  font-size: 7px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grade-more { display: block; margin-top: 11px; color: var(--red); text-align: right; font-size: 10px; font-weight: 700; }

/* Learning */
.learning-tool-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }
.tool-card { position: relative; min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; overflow: hidden; border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: 11px; background: #fff; transition: .2s; }
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tool-card__number { position: absolute; right: 18px; top: 12px; color: rgba(24,38,60,.06); font: 700 70px/1 var(--serif); }
.tool-card h2 { margin: 13px 0 9px; font: 700 24px var(--serif); }
.tool-card p { color: var(--muted); font-size: 11px; }
.tool-card--today > strong { align-self: flex-end; display: grid; place-items: center; width: 120px; aspect-ratio: 1; color: var(--red); background: var(--red-pale); border-radius: 50%; font: 500 75px var(--serif); }
.tool-card--quiz { border-top-color: #b4842f; background: #fffdf7; }
.tool-card--quiz img { align-self: flex-end; max-height: 120px; }
.tool-card--compare { border-top-color: var(--ink); background: #f8fafc; }
.tool-compare { display: flex; align-items: center; justify-content: center; gap: 14px; }
.tool-compare b { font: 500 66px var(--serif); }
.tool-compare i { color: var(--red); font-style: normal; }
.theme-section { margin-top: 70px; }
.theme-card-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.theme-card { min-height: 170px; display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 25px; padding: 23px 27px; border: 1px solid var(--line); background: #fff; transition: .2s; }
.theme-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.theme-card__kanji { display: grid; place-items: center; width: 110px; aspect-ratio: 1; border-radius: 50%; color: #36546c; background: #e9f2f3; font: 500 65px var(--serif); }
.theme-card--feelings .theme-card__kanji { color: var(--red); background: #f9e9e8; }
.theme-card--seasons .theme-card__kanji { color: #9d7228; background: #fbf0d4; }
.theme-card--body .theme-card__kanji { color: #725c42; background: #f2ece2; }
.theme-card--colors .theme-card__kanji { color: #5e4671; background: #efe9f5; }
.theme-card > div > span { color: var(--red); font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.theme-card h3 { margin: 3px 0 4px; font: 700 19px var(--serif); }
.theme-card p { margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.theme-card small { color: var(--red); font-size: 9px; font-weight: 700; }
.learning-method { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 65px; margin: 80px 0; padding: 45px 70px; background: var(--cream-2); border: 1px solid var(--line); }
.learning-method img { max-height: 330px; }
.learning-method h2 { margin: 6px 0 20px; font: 700 25px var(--serif); }
.learning-method ol { padding: 0; margin: 0; list-style: none; }
.learning-method li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.learning-method li > span { display: grid; place-items: center; width: 30px; aspect-ratio: 1; color: #fff; background: var(--red); border-radius: 50%; font-size: 10px; }
.learning-method strong { font: 700 14px var(--serif); }
.learning-method p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }

/* Today */
.today-page__hero { position: relative; color: #fff; background: var(--ink); overflow: hidden; }
.today-page__hero::after { content: ""; position: absolute; inset: 0; background: url('/img/cta-pattern.svg') right center/600px auto no-repeat; opacity: .22; }
.today-page__hero > .container { position: relative; z-index: 1; min-height: 370px; display: grid; grid-template-columns: 1fr 380px; align-items: center; }
.today-page__hero .eyebrow { color: #efbbb6; }
.today-page__hero h1 { margin: 4px 0; font: 700 38px var(--serif); }
.today-page__hero p { margin: 0; color: #bcc7d7; }
.today-glyph { display: flex; flex-direction: column; align-items: center; }
.today-glyph span { display: grid; place-items: center; width: 255px; aspect-ratio: 1; color: #151515; background: #fffdf8; border: 10px solid rgba(255,255,255,.15); outline: 1px solid #d9cab5; outline-offset: -18px; font: 500 158px var(--serif); }
.today-glyph i { margin-top: 10px; color: #fff; font-style: normal; }
.today-content { padding-top: 60px; }
.today-profile { display: grid; grid-template-columns: 320px 1fr; gap: 55px; align-items: center; }
.today-profile__char { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--line); background: var(--cream-2); font: 500 180px var(--serif); }
.today-profile h2 { margin: 6px 0; font: 700 27px var(--serif); }
.today-profile__reading { color: var(--red); font-size: 18px; font-weight: 700; }
.today-profile dl { margin: 18px 0 22px; border-top: 1px solid var(--line); }
.today-profile dl div { display: grid; grid-template-columns: 120px 1fr; padding: 9px 0; border-bottom: 1px solid var(--line); }
.today-profile dt { color: var(--muted); }
.today-profile dd { margin: 0; font-weight: 700; }
.today-reflection { display: flex; gap: 20px; margin: 55px 0 10px; padding: 28px 34px; background: #fff8e7; border: 1px solid #ead9ae; }
.today-reflection h2 { margin-bottom: 6px; font: 700 19px var(--serif); }
.today-reflection p { margin: 0; color: #5e5a52; font-size: 11px; }
.daily-nav { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 55px; }
.daily-nav a { padding: 22px 25px; border: 1px solid var(--line); background: #fff; }
.daily-nav a:hover { color: var(--red); border-color: var(--red); }
.daily-nav span { display: block; color: var(--muted); font-size: 9px; }
.daily-nav strong { font: 700 16px var(--serif); }

/* Quiz */
.quiz-page { position: relative; max-width: 1000px; display: grid; grid-template-columns: 1fr 265px; gap: 25px; padding-top: 45px; }
.quiz-card { min-height: 515px; display: flex; flex-direction: column; padding: 27px 35px 35px; border: 1px solid var(--line); border-top: 5px solid var(--red); background: #fff; box-shadow: var(--shadow-sm); }
.quiz-card > header { display: flex; align-items: center; gap: 15px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.quiz-progress { flex: 1; height: 5px; overflow: hidden; background: #ececec; border-radius: 999px; }
.quiz-progress i { display: block; width: 10%; height: 100%; background: var(--red); transition: width .25s; }
.quiz-question { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.quiz-question p { color: var(--muted); }
.quiz-question strong { font: 500 150px/1 var(--serif); }
.quiz-answer { margin: -10px 0 22px; padding: 16px; text-align: center; background: var(--red-pale); border: 1px solid #ead0cc; }
.quiz-answer > span { display: block; color: var(--red); font-size: 9px; font-weight: 700; }
.quiz-answer strong { color: var(--red); font: 700 23px var(--serif); }
.quiz-answer p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.quiz-actions { display: flex; justify-content: center; }
.quiz-side { padding: 27px 23px; background: var(--cream-2); border: 1px solid var(--line); }
.quiz-side h2 { font: 700 18px var(--serif); }
.quiz-side ul { padding-left: 19px; color: var(--muted); font-size: 10px; }
.quiz-side a { color: var(--red); font-size: 10px; font-weight: 700; }
.quiz-result { grid-column: 1 / -1; padding: 70px 30px; text-align: center; background: var(--cream-2); border: 1px solid var(--line); }
.quiz-result h2 { margin: 13px 0 6px; font: 700 25px var(--serif); }
.quiz-result p { color: var(--muted); }
.quiz-result .button { margin: 5px; }

/* Compare */
.compare-page { max-width: 1000px; padding-top: 45px; }
.compare-form { display: grid; grid-template-columns: 1fr 40px 1fr 130px; gap: 12px; align-items: end; padding: 22px; background: var(--cream-2); border: 1px solid var(--line); }
.compare-form > span { align-self: center; margin-top: 19px; text-align: center; color: var(--red); font: 700 14px var(--serif); }
.compare-form label { display: block; margin-bottom: 5px; font-size: 10px; font-weight: 700; }
.compare-form input { font: 500 27px var(--serif); text-align: center; }
.compare-board { margin-top: 30px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.compare-board > header { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; min-height: 260px; color: #fff; background: var(--ink); }
.compare-board > header > div { display: flex; flex-direction: column; align-items: center; }
.compare-board > header strong { font: 500 115px/1 var(--serif); }
.compare-board > header span { color: #c7d0dc; }
.compare-board > header i { display: grid; place-items: center; width: 55px; aspect-ratio: 1; margin: auto; color: #fff; background: var(--red); border-radius: 50%; font-style: normal; font-weight: 700; }
.compare-row { display: grid; grid-template-columns: 150px 1fr 1fr; border-bottom: 1px solid var(--line); }
.compare-row > span { display: grid; place-items: center; padding: 14px; background: var(--cream-2); font-weight: 700; font-size: 11px; }
.compare-row p { margin: 0; padding: 14px 18px; border-left: 1px solid var(--line); text-align: center; }
.compare-board > footer { display: grid; grid-template-columns: 1fr 1fr; }
.compare-board > footer a { padding: 15px; color: var(--red); text-align: center; font-weight: 700; font-size: 11px; }
.compare-board > footer a + a { border-left: 1px solid var(--line); }
.compare-examples { margin-top: 55px; }
.compare-examples > div:last-child { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.compare-examples a { display: flex; flex-direction: column; align-items: center; padding: 18px 10px; border: 1px solid var(--line); background: #fff; }
.compare-examples a:hover { border-color: var(--red); }
.compare-examples strong { font: 700 27px var(--serif); }
.compare-examples strong i { color: var(--red); font-style: normal; font-size: 12px; }
.compare-examples span { color: var(--muted); font-size: 8px; }

/* Themes */
.theme-hero { color: #fff; background: #31596a; }
.theme-hero--feelings { background: #8f333b; }
.theme-hero--seasons { background: #8a672e; }
.theme-hero--body { background: #63513e; }
.theme-hero--colors { background: #563f6a; }
.theme-hero > .container { min-height: 315px; display: flex; align-items: center; justify-content: space-between; }
.theme-hero .eyebrow { color: rgba(255,255,255,.65); }
.theme-hero h1 { margin: 7px 0 5px; font: 700 37px var(--serif); }
.theme-hero p { color: rgba(255,255,255,.8); }
.theme-hero > .container > strong { font: 500 170px/1 var(--serif); opacity: .16; }
.theme-page { padding-top: 45px; }
.theme-intro { display: flex; gap: 17px; padding: 25px 30px; background: var(--cream-2); border: 1px solid var(--line); }
.theme-intro h2 { margin-bottom: 6px; font: 700 18px var(--serif); }
.theme-intro p { margin: 0; color: var(--muted); font-size: 11px; }
.theme-word-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 30px; }
.theme-word-grid a { display: grid; grid-template-columns: 75px 1fr auto; align-items: center; gap: 14px; min-height: 105px; padding: 13px 18px; border: 1px solid var(--line); background: #fff; }
.theme-word-grid a:hover { color: var(--red); border-color: var(--red); }
.theme-word-grid strong { display: grid; place-items: center; width: 68px; aspect-ratio: 1; background: var(--cream-2); font: 500 42px var(--serif); }
.theme-word-grid span { display: block; color: var(--ink); font-size: 10px; }
.theme-word-grid small { color: var(--muted); font-size: 8px; }
.theme-word-grid i { font-style: normal; }
.back-learning { text-align: center; }
.back-learning a { color: var(--red); font-weight: 700; }

/* Articles */
.article-grid--all { grid-template-columns: repeat(2,1fr); }
.article-grid--all .article-card { display: grid; grid-template-columns: 43% 57%; }
.article-grid--all .article-card__image { aspect-ratio: auto; min-height: 240px; }
.article-grid--all .article-card h2 { font-size: 18px; }
.article-layout { display: grid; grid-template-columns: minmax(0,760px) 280px; gap: 40px; padding-top: 45px; }
.column-article > header { text-align: center; }
.column-article > header h1 { margin: 10px auto; max-width: 700px; font: 700 34px/1.55 var(--serif); }
.column-article > header > p { max-width: 650px; margin: 0 auto 5px; color: var(--muted); }
.column-article > header time { color: #999; font-size: 9px; }
.column-article > header img { width: 100%; margin-top: 25px; border: 1px solid var(--line); }
.article-toc { margin: 30px 0; padding: 20px 24px; background: var(--cream-2); border-left: 4px solid var(--red); }
.article-toc strong { font: 700 15px var(--serif); }
.article-toc p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.article-body { font-size: 14px; line-height: 2.05; }
.article-body h2 { margin: 48px 0 17px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font: 700 24px var(--serif); }
.article-body h2::before { content: ""; display: inline-block; width: 6px; height: 22px; margin-right: 10px; vertical-align: -3px; background: var(--red); }
.article-body p { margin-bottom: 18px; }
.source-note { margin-top: 30px; padding: 17px 20px; color: #625d55; background: #f7f3eb; border: 1px solid var(--line); font-size: 10px; }
.article-footer { margin-top: 40px; padding-top: 25px; border-top: 1px solid var(--line); }
.article-footer p { color: var(--muted); font-size: 10px; }
.article-footer a { color: var(--red); font-weight: 700; }
.article-sidebar { align-self: start; position: sticky; top: 20px; }
.article-sidebar > div:first-child { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.article-sidebar h2 { margin: 0; font: 700 17px var(--serif); }
.article-sidebar > a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
.article-sidebar > a span { color: var(--red); font-size: 8px; }
.article-sidebar > a strong { display: block; margin-top: 2px; font: 700 13px/1.6 var(--serif); }

/* Static pages */
.static-page { max-width: 900px; padding-top: 45px; }
.static-page > section { margin-bottom: 45px; }
.static-page h2 { margin-bottom: 13px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); font: 700 22px var(--serif); }
.static-page h2::before { content: ""; display: inline-block; width: 5px; height: 18px; margin-right: 10px; vertical-align: -2px; background: var(--red); }
.static-page p, .static-page li { color: #4d5661; }
.site-map-page { max-width: 1040px; }
.site-map-lead { max-width: 760px; margin: 0 auto 30px; text-align: center; }
.site-map-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.site-map-group {
  margin: 0 !important;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.site-map-group h2 { margin-bottom: 15px; font-size: 19px; }
.site-map-links { display: grid; gap: 8px; }
.site-map-links a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 66px;
  padding: 12px 34px 12px 14px;
  border: 1px solid var(--line-cool);
  border-radius: 6px;
  background: #fff;
}
.site-map-links a::after {
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  color: var(--red);
  transform: translateY(-50%);
}
.site-map-links a:hover { color: var(--red); border-color: #d9aaa6; }
.site-map-links strong { font: 700 14px var(--serif); }
.site-map-links span { color: var(--muted); font-size: 9px; line-height: 1.55; }
.site-map-links--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-map-links--compact a { min-height: 52px; justify-content: center; }
.site-map-xml { margin: 26px 0 0; text-align: right; font-size: 9px; }
.site-map-xml a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.about-data-grid { display: grid; grid-template-columns: repeat(4,1fr); margin: 20px 0; border: 1px solid var(--line); }
.about-data-grid div { display: flex; flex-direction: column; align-items: center; padding: 25px 10px; border-right: 1px solid var(--line); }
.about-data-grid div:last-child { border-right: 0; }
.about-data-grid strong { color: var(--red); font: 700 30px var(--serif); }
.about-data-grid strong.about-data-grid__school {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  min-height: 42px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}
.about-data-grid__school small {
  color: var(--red);
  font: inherit;
}
.about-data-grid span { color: var(--muted); font-size: 9px; }
.operation-guide-table-wrap { margin-top: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: 0 8px 25px rgba(37,32,24,.04); }
.operation-guide-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.operation-guide-table th, .operation-guide-table td { padding: 15px 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.operation-guide-table tr:last-child th, .operation-guide-table tr:last-child td { border-bottom: 0; }
.operation-guide-table th { width: 180px; color: #4b5561; background: var(--cream-2); font-size: 11px; font-weight: 700; }
.operation-guide-table td { color: #4d5661; font-size: 12px; line-height: 1.8; }
.operation-guide-table a { color: var(--red); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.operation-guide-table a:hover { text-decoration-thickness: 2px; }
.static-cta { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 28px 32px; background: var(--cream-2); border: 1px solid var(--line); }
.static-cta h2 { padding: 0; margin-bottom: 3px; border: 0; }
.static-cta h2::before { display: none; }
.static-cta p { margin: 0; font-size: 11px; }
.policy-updated { color: var(--muted); text-align: right; font-size: 10px; }
.policy-note { padding: 12px 15px; background: #fff5d8; border-left: 3px solid #b98727; font-size: 10px; }
.contact-guide { display: flex; gap: 17px; padding: 25px 30px; background: var(--cream-2); border: 1px solid var(--line); }
.contact-guide h2 { padding: 0; margin: 0 0 5px; border: 0; }
.contact-guide h2::before { display: none; }
.contact-guide p { margin: 0; }
.contact-type-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin: 30px 0 45px; }
.contact-type-grid div { padding: 23px; border: 1px solid var(--line); }
.contact-type-grid span { color: var(--red); font-size: 9px; font-weight: 700; }
.contact-type-grid h2 { padding: 0; margin: 5px 0; border: 0; font-size: 17px; }
.contact-type-grid h2::before { display: none; }
.contact-type-grid p { margin: 0; font-size: 10px; }
.contact-action { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 32px; color: #fff; background: var(--ink); }
.contact-action h2 { padding: 0; margin-bottom: 3px; border: 0; color: #fff; }
.contact-action h2::before { display: none; }
.contact-action p { margin: 0; color: #bcc6d4; font-size: 10px; }

.flash-wrap { width: min(calc(100% - 40px),var(--container)); margin-inline: auto; }
.message { margin: 15px 0; padding: 12px 15px; border-radius: 5px; background: #eaf7ef; color: #28613b; }

/* Responsive */
@media (max-width: 1100px) {
  .global-nav a { padding-inline: 10px; font-size: 12px; }
  .portal-menu-grid { grid-template-columns: repeat(3,1fr); }
  .kanji-card-grid--home { grid-template-columns: repeat(4,1fr); }
  .kanji-card-grid { grid-template-columns: repeat(4,1fr); }
  .kanji-card-grid--related { grid-template-columns: repeat(4,1fr); }
  .filter-form { grid-template-columns: repeat(2,1fr); }
  .filter-form--idiom { grid-template-columns: repeat(2,1fr); }
  .radical-grid { grid-template-columns: repeat(5,1fr); }
  .stroke-grid { grid-template-columns: repeat(8,1fr); }
  .mini-kanji-grid { grid-template-columns: repeat(8,1fr); }
  .kanji-detail__hero { grid-template-columns: 220px 1fr; }
  .kanji-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); }
  .kanji-facts div { grid-template-columns: 70px 1fr; border-right: 1px solid var(--line); }
  .idiom-card-grid { grid-template-columns: repeat(3,1fr); }
  .related-word-row { grid-template-columns: repeat(4,1fr); }
}

@media (min-width: 821px) and (max-width: 940px) {
  .global-nav a {
    padding-inline: 7px;
    font-size: 11px;
  }
}

@media (max-width: 820px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .header-inner { min-height: 67px; grid-template-columns: 1fr auto; gap: 10px; }
  .brand-seal { width: 37px; font-size: 20px; }
  .brand-copy strong { font-size: 19px; }
  .brand-copy small { display: none; }
  .header-search { display: none; }
  .header-actions { display: flex; align-items: center; gap: 3px; }
  .header-contact-shortcut { display: grid; place-items: center; width: 41px; height: 41px; border: 1px solid #e8c9c6; border-radius: 50%; color: var(--red); background: var(--red-pale); }
  .header-contact-shortcut:hover, .header-contact-shortcut.is-active { color: #fff; background: var(--red); border-color: var(--red); }
  .header-contact-shortcut svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 9px; border: 0; background: transparent; }
  .menu-toggle > span:not(.sr-only) { display: block; width: 100%; height: 2px; background: var(--ink); transition: .2s; }
  .menu-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .global-nav { display: none; position: absolute; left: 0; right: 0; top: 67px; max-height: calc(100vh - 67px); overflow-y: auto; background: #fff; box-shadow: 0 15px 30px rgba(0,0,0,.12); }
  .global-nav.is-open { display: block; }
  .nav-inner { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 8px 14px 16px; }
  .global-nav .nav-inner > a { min-height: 47px; justify-content: flex-start; padding: 0 13px; border-bottom: 1px solid #eee; font-size: 12px; }
  .global-nav .nav-inner > a::after, .nav-dropdown__toggle::after { display: none; }
  .nav-dropdown { grid-column: 1 / -1; display: block; }
  .nav-dropdown__toggle { width: 100%; min-height: 49px; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid #eee; font-size: 12px; }
  .nav-dropdown__menu { position: static; width: auto; display: none; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 8px; border: 0; border-radius: 0; background: var(--cream-2); box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none; }
  .nav-dropdown:hover .nav-dropdown__menu, .nav-dropdown:focus-within .nav-dropdown__menu { transform: none; }
  .nav-dropdown.is-open .nav-dropdown__menu { display: grid; }
  .nav-dropdown__menu a, .nav-dropdown__menu a + a { min-height: 51px; padding: 7px 10px; border: 1px solid #eee3d5; border-radius: 6px; background: #fff; }
  .nav-dropdown__menu a span { font-size: 11px; }
  .nav-dropdown__menu a small { font-size: 7px; }
  .global-nav .nav-inner > a.nav-contact { display: none; }
  .home-hero { min-height: auto; }
  .home-hero__inner { min-height: 560px; grid-template-columns: 1fr; }
  .home-hero__copy { position: relative; z-index: 2; padding: 62px 0 210px; }
  .home-hero h1 { font-size: 37px; }
  .home-hero__copy > p br { display: none; }
  .hero-kanji { position: absolute; right: -25px; bottom: -35px; min-height: auto; opacity: .48; }
  .hero-kanji__grid { width: 230px; }
  .hero-kanji__grid span { font-size: 135px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat-item { border-bottom: 1px solid var(--line); }
  .portal-menu-grid { grid-template-columns: repeat(2,1fr); }
  .section { padding: 58px 0; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .section-heading--inline { flex-direction: row; align-items: center; }
  .feature-layout { grid-template-columns: 1fr; }
  .today-panel { max-width: 420px; margin-inline: auto; }
  .article-grid { grid-template-columns: repeat(2,1fr); }
  .article-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .footer-main { grid-template-columns: 1fr; gap: 40px; }
  .filter-form, .filter-form--idiom { grid-template-columns: repeat(2,1fr); }
  .kanji-card-grid { grid-template-columns: repeat(3,1fr); }
  .kanji-card-grid--home { grid-template-columns: repeat(4,1fr); }
  .kanji-card-grid--same-reading { grid-template-columns: repeat(4,1fr); }
  .kanji-detail__hero { grid-template-columns: 180px 1fr; padding: 24px; gap: 25px; }
  .kanji-square span { font-size: 105px; }
  .kanji-facts { grid-template-columns: repeat(2,1fr); }
  .practice-panel { grid-template-columns: 1fr; }
  .kanjivg-player { width: min(100%, 370px); }
  .idiom-list { grid-template-columns: repeat(2,1fr); }
  .idiom-card-grid { grid-template-columns: repeat(2,1fr); }
  .idiom-detail__hero { padding: 30px; gap: 25px; }
  .idiom-glyph a { width: 105px; font-size: 65px; }
  .composition-grid { grid-template-columns: 1fr 1fr; }
  .composition-total { grid-column: 1 / -1; min-height: 100px; flex-direction: row; gap: 8px; }
  .radical-grid { grid-template-columns: repeat(4,1fr); }
  .radical-detail-hero { grid-template-columns: 180px 1fr; }
  .radical-detail-hero img { display: none; }
  .stroke-grid { grid-template-columns: repeat(6,1fr); }
  .mini-kanji-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grade-nav { grid-template-columns: repeat(5,1fr); position: static; }
  .learning-tool-grid { grid-template-columns: 1fr; }
  .tool-card { min-height: 235px; }
  .theme-card-grid { grid-template-columns: 1fr; }
  .learning-method { grid-template-columns: 1fr; padding: 35px; gap: 25px; }
  .learning-method img { max-height: 240px; margin: auto; }
  .today-page__hero > .container { grid-template-columns: 1fr 280px; }
  .today-glyph span { width: 210px; font-size: 130px; }
  .today-profile { grid-template-columns: 260px 1fr; gap: 35px; }
  .today-profile__char { font-size: 140px; }
  .quiz-page { grid-template-columns: 1fr; }
  .quiz-side { order: 2; }
  .compare-examples > div:last-child { grid-template-columns: repeat(3,1fr); }
  .theme-word-grid { grid-template-columns: repeat(2,1fr); }
  .article-grid--all { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }
}

@media (max-width: 560px) {
  body { font-size: 14px; }
  .container { width: min(calc(100% - 22px), var(--container)); }
  .home-hero__inner { min-height: 550px; }
  .home-hero__copy { padding-top: 48px; }
  .home-hero h1 { font-size: 31px; line-height: 1.5; }
  .home-hero__copy > p { font-size: 12px; }
  .hero-search { grid-template-columns: 1fr 70px; }
  .hero-search input { height: 52px; padding-inline: 12px; font-size: 12px; }
  .hero-search button span { display: none; }
  .stats-grid { width: 100%; }
  .stat-item { min-height: 82px; gap: 8px; }
  .stat-icon { width: 30px; font-size: 14px; }
  .stat-item strong { font-size: 18px; }
  .stat-item strong.stat-item__school { font-size: 11px; }
  .portal-menu-grid { grid-template-columns: 1fr; }
  .portal-menu-card { min-height: 180px; display: grid; grid-template-columns: 65px 1fr; column-gap: 15px; align-content: center; }
  .portal-menu-card__icon { grid-row: 1 / span 3; margin: 0; }
  .portal-menu-card p { min-height: auto; margin: 3px 0; }
  .section-heading h2 { font-size: 24px; }
  .section-heading--inline { align-items: flex-start; }
  .section-heading--inline .button { padding-inline: 12px; font-size: 10px; }
  .kanji-card-grid, .kanji-card-grid--home, .kanji-card-grid--same-reading, .kanji-card-grid--related { grid-template-columns: repeat(2,1fr); }
  .kanji-card { min-height: 145px; }
  .kanji-card__char { font-size: 46px; }
  .learning-cards { grid-template-columns: 1fr; }
  .learning-card, .learning-card--today { grid-column: auto; min-height: 210px; padding: 22px; }
  .learning-card__big-kanji { width: 110px; font-size: 70px; }
  .article-grid { grid-template-columns: 1fr; }
  .article-card:last-child:nth-child(odd) { grid-column: auto; }
  .home-cta__inner { min-height: 230px; flex-direction: column; align-items: flex-start; justify-content: center; }
  .footer-links { grid-template-columns: repeat(2,1fr); }
  .footer-bottom { flex-direction: column; }
  .page-hero__inner { padding-block: 29px; }
  .page-hero h1 { font-size: 27px; }
  .search-panel { padding: 20px 16px; }
  .filter-form, .filter-form--idiom { grid-template-columns: 1fr; }
  .filter-actions { flex-direction: column; }
  .filter-actions .button { width: 100%; }
  .search-tip { grid-template-columns: 1fr; padding: 25px; }
  .search-tip img { display: none; }
  [data-result-grid].is-list .kanji-card { grid-template-columns: 60px 1fr; }
  [data-result-grid].is-list .kanji-card__meta { grid-column: 2; }
  .notice-box--quality { align-items: flex-start; flex-direction: column; }
  .kanji-detail__hero { grid-template-columns: 1fr; text-align: center; }
  .kanji-square { width: 210px; margin: auto; }
  .kanji-facts { grid-template-columns: 1fr; text-align: left; }
  .detail-anchor-nav { grid-template-columns: repeat(2,1fr); position: static; }
  .info-table > div { grid-template-columns: 105px 1fr; }
  .practice-grid { grid-template-columns: repeat(2,1fr); }
  .kanjivg-controls { grid-template-columns: 1fr; }
  .stroke-order-button { min-height: 42px; }
  .kanjivg-player { width: min(100%, 320px); }
  .idiom-list { grid-template-columns: 1fr; }
  .idiom-card-grid { grid-template-columns: 1fr; }
  .idiom-detail__hero { align-items: flex-start; flex-direction: column; }
  .idiom-glyph { width: 100%; }
  .idiom-glyph a { flex: 1; width: auto; }
  .composition-grid { grid-template-columns: 1fr; }
  .composition-total { grid-column: auto; }
  .related-word-row { grid-template-columns: repeat(2,1fr); }
  .radical-grid { grid-template-columns: repeat(2,1fr); }
  .radical-detail-hero { grid-template-columns: 1fr; padding: 25px; text-align: center; }
  .radical-detail-hero__shape { margin: auto; }
  .stroke-grid { grid-template-columns: repeat(4,1fr); }
  .guide-panel { grid-template-columns: 1fr; padding: 25px; }
  .grade-nav { grid-template-columns: repeat(3,1fr); }
  .mini-kanji-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .theme-card { grid-template-columns: 85px 1fr; padding: 18px; gap: 14px; }
  .theme-card__kanji { width: 75px; font-size: 45px; }
  .learning-method { padding: 25px 20px; }
  .today-page__hero > .container { min-height: 480px; grid-template-columns: 1fr; text-align: center; padding-block: 40px; }
  .today-glyph span { width: 190px; font-size: 115px; }
  .today-profile { grid-template-columns: 1fr; }
  .today-profile__char { width: 230px; margin: auto; }
  .daily-nav { grid-template-columns: 1fr; }
  .quiz-card { min-height: 480px; padding: 22px; }
  .quiz-question strong { font-size: 120px; }
  .compare-form { grid-template-columns: 1fr 30px 1fr; }
  .compare-form .button { grid-column: 1 / -1; }
  .compare-board > header { grid-template-columns: 1fr 50px 1fr; min-height: 210px; }
  .compare-board > header strong { font-size: 80px; }
  .compare-row { grid-template-columns: 80px 1fr 1fr; font-size: 10px; }
  .compare-examples > div:last-child { grid-template-columns: repeat(2,1fr); }
  .theme-hero > .container { min-height: 250px; }
  .theme-hero h1 { font-size: 30px; }
  .theme-hero > .container > strong { font-size: 100px; }
  .theme-word-grid { grid-template-columns: 1fr; }
  .article-grid--all .article-card { grid-template-columns: 1fr; }
  .article-grid--all .article-card__image { min-height: 180px; }
  .column-article > header h1 { font-size: 27px; }
  .about-data-grid { grid-template-columns: repeat(2,1fr); }
  .about-data-grid div:nth-child(2) { border-right: 0; }
  .about-data-grid div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .operation-guide-table th, .operation-guide-table td { padding: 13px 12px; }
  .operation-guide-table th { width: 112px; font-size: 10px; }
  .operation-guide-table td { font-size: 11px; }
  .static-cta, .contact-action { align-items: flex-start; flex-direction: column; }
  .contact-type-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .site-map-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .site-map-group { padding: 18px; }
  .site-map-links--compact { grid-template-columns: 1fr; }
  .info-table dd.reading-cell {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

@media print {
  .site-header, .site-footer, .breadcrumbs, .detail-anchor-nav, .ad-slot, .speak-button, .button, .quality-note, .kanjivg-controls, .kanjivg-status { display: none !important; }
  body { color: #000; }
  .detail-page { padding: 0; }
  .kanji-detail__hero { box-shadow: none; }
  .detail-section { page-break-inside: avoid; }
  .practice-grid div { border-color: #999; }
}

/* Contact form */
.contact-form-section { padding: 32px; border: 1px solid var(--line); background: #fff; box-shadow: 0 10px 35px rgba(37,32,24,.05); }
.contact-form-section__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.contact-form-section__header h2 { margin: 4px 0 0; padding: 0; border: 0; }
.contact-form-section__header h2::before { display: none; }
.contact-form-section__header p { margin: 0; font-size: 10px; }
.contact-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 24px; }
.contact-form__field { min-width: 0; }
.contact-form__field--wide, .contact-consent, .contact-form__actions { grid-column: 1 / -1; }
.contact-form__field > label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #303844; font-size: 12px; font-weight: 700; }
.contact-form__field input, .contact-form__field select, .contact-form__field textarea { width: 100%; border: 1px solid #d7d9dd; border-radius: 6px; outline: 0; color: var(--ink); background: #fff; transition: border-color .2s,box-shadow .2s; }
.contact-form__field input, .contact-form__field select { height: 48px; padding: 0 14px; }
.contact-form__field textarea { min-height: 210px; padding: 13px 14px; line-height: 1.8; resize: vertical; }
.contact-form__field input:focus, .contact-form__field select:focus, .contact-form__field textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(169,39,45,.08); }
.contact-form__field small { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; }
.form-required, .form-optional { display: inline-flex; align-items: center; min-height: 18px; padding: 1px 6px; border-radius: 3px; font-size: 8px; font-weight: 700; line-height: 1; }
.form-required { color: #fff; background: var(--red); }
.form-optional { color: #65707d; background: #eef0f2; }
.error-message { margin-top: 6px; color: #b3262c; font-size: 10px; font-weight: 700; }
.contact-form__field .form-error, .contact-consent .form-error { border-color: #c83c42; background: #fffafa; }
.contact-consent { padding: 18px 20px; border: 1px solid var(--line); background: var(--cream-2); }
.contact-consent > label { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.contact-consent input[type="checkbox"] { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--red); }
.contact-consent label > span { color: #404852; font-size: 11px; line-height: 1.8; }
.contact-consent a { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.contact-consent .form-required { margin-left: 6px; color: #fff; line-height: 1; }
.contact-form__actions { display: flex; justify-content: center; padding-top: 4px; }
.contact-form__actions .button { min-width: 230px; border: 0; }
.contact-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.contact-confirm { padding: 32px; border: 1px solid var(--line); background: #fff; }
.contact-confirm > h2 { margin-top: 0; }
.contact-confirm-list { margin: 0; border: 1px solid var(--line); }
.contact-confirm-list > div { display: grid; grid-template-columns: 190px minmax(0,1fr); border-bottom: 1px solid var(--line); }
.contact-confirm-list > div:last-child { border-bottom: 0; }
.contact-confirm-list dt { padding: 17px 20px; color: #39414c; background: var(--cream-2); font-size: 11px; font-weight: 700; }
.contact-confirm-list dd { min-width: 0; margin: 0; padding: 17px 20px; overflow-wrap: anywhere; color: #4d5661; }
.contact-confirm-list__message dd { min-height: 170px; white-space: normal; line-height: 1.9; }
.contact-confirm-note { margin: 18px 0 0; padding: 13px 16px; color: #665b42 !important; background: #fff8e7; border-left: 3px solid #b98727; font-size: 10px; }
.contact-confirm-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; }
.contact-send-form { margin: 0; }
.contact-complete { padding: 48px 40px; border: 1px solid var(--line); background: #fff; text-align: center; box-shadow: 0 10px 35px rgba(37,32,24,.05); }
.contact-complete__seal { display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 18px; border-radius: 50%; color: #fff; background: var(--red); font: 700 27px var(--serif); box-shadow: 0 8px 25px rgba(169,39,45,.2); }
.contact-complete h2 { margin: 0 0 14px; padding: 0; border: 0; }
.contact-complete h2::before { display: none; }
.contact-complete p { max-width: 670px; margin: 0 auto 13px; line-height: 1.9; }
.contact-complete__note { margin-top: 22px !important; padding: 15px 18px; color: #625d55 !important; background: var(--cream-2); border: 1px solid var(--line); font-size: 10px; }
.contact-complete .button { margin-top: 15px; }
.message.error { color: #8d252a; background: #fff0f0; border: 1px solid #f2cdcf; }

@media (max-width: 820px) {
  .contact-form-section, .contact-confirm { padding: 22px 18px; }
  .contact-form-section__header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-form__field--wide, .contact-consent, .contact-form__actions { grid-column: auto; }
  .contact-confirm-list > div { grid-template-columns: 1fr; }
  .contact-confirm-list dt { padding: 11px 14px; }
  .contact-confirm-list dd { padding: 14px; }
  .contact-confirm-actions { align-items: stretch; flex-direction: column-reverse; }
  .contact-confirm-actions .button, .contact-send-form { width: 100%; }
  .contact-complete { padding: 38px 20px; }
}

/* Error pages */
.error-page { padding: 58px 0 0; background: linear-gradient(180deg,#fffaf2 0,#fff 400px); }
.error-page__inner { max-width: 1080px; }
.error-hero { position: relative; min-height: 360px; display: grid; grid-template-columns: 165px minmax(0,1fr) 245px; align-items: center; gap: 38px; padding: 48px 54px; overflow: hidden; border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.error-hero::before { content: ""; position: absolute; right: -110px; top: -135px; width: 360px; aspect-ratio: 1; border-radius: 50%; background: rgba(169,39,45,.055); }
.error-hero__code { position: relative; color: var(--red); font: 700 70px/1 var(--serif); letter-spacing: -.06em; writing-mode: vertical-rl; text-orientation: mixed; opacity: .9; }
.error-hero__copy { position: relative; z-index: 1; }
.error-hero__copy h1 { margin: 10px 0 15px; color: var(--ink); font: 700 34px/1.45 var(--serif); letter-spacing: .06em; }
.error-hero__copy p { margin-bottom: 25px; color: #515a66; font-size: 13px; line-height: 2; }
.error-hero__kanji { position: relative; z-index: 1; display: grid; place-items: center; width: 220px; aspect-ratio: 1; border: 1px solid #e3d6c5; background: #fffdf8; box-shadow: inset 0 0 0 9px rgba(169,39,45,.025); }
.error-hero__kanji::before, .error-hero__kanji::after { content: ""; position: absolute; background: rgba(169,39,45,.1); }
.error-hero__kanji::before { width: 1px; height: 100%; }
.error-hero__kanji::after { width: 100%; height: 1px; }
.error-hero__kanji span { position: relative; z-index: 1; font: 500 126px/1 var(--serif); }
.error-hero__kanji i { position: absolute; right: 11px; bottom: 9px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; color: #fff; background: var(--red); border-radius: 3px; font: 700 10px/1 var(--sans); font-style: normal; letter-spacing: .08em; transform: rotate(-3deg); }
.error-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.error-search-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,500px); align-items: center; gap: 35px; margin-top: 28px; padding: 28px 32px; color: #fff; background: var(--ink); border-radius: 9px; }
.error-search-panel h2 { margin: 5px 0 3px; font: 700 22px/1.45 var(--serif); }
.error-search-panel p { margin: 0; color: #bdc6d3; font-size: 11px; }
.error-search-panel .eyebrow { color: #e5aaa7; }
.error-search { display: grid; grid-template-columns: minmax(0,1fr) 108px; overflow: hidden; border-radius: 7px; background: #fff; }
.error-search input { min-width: 0; height: 52px; padding: 0 16px; border: 0; outline: 0; color: var(--ink); background: #fff; }
.error-search input:focus { box-shadow: inset 0 0 0 2px var(--red); }
.error-search button { border: 0; color: #fff; background: var(--red); font-weight: 700; }
.error-search button:hover { background: var(--red-dark); }
.error-destinations { padding: 70px 0 10px; }
.error-destinations .section-heading > p { max-width: 390px; }
.error-destination-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.error-destination-card { position: relative; min-height: 230px; padding: 25px 23px 21px; border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 9px; background: #fff; transition: transform .2s,box-shadow .2s,border-color .2s; }
.error-destination-card:nth-child(2) { border-top-color: #ce6b3d; }
.error-destination-card:nth-child(3) { border-top-color: #557f9b; }
.error-destination-card:nth-child(4) { border-top-color: #b99252; }
.error-destination-card:nth-child(5) { border-top-color: var(--ink); }
.error-destination-card:nth-child(6) { border-top-color: #76628e; }
.error-destination-card:hover { transform: translateY(-4px); border-color: #d8beb8; box-shadow: var(--shadow-sm); }
.error-destination-card__icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 17px; border-radius: 50%; color: var(--red); background: var(--red-pale); font: 700 25px/1 var(--serif); }
.error-destination-card strong { display: block; font: 700 17px/1.5 var(--serif); }
.error-destination-card p { min-height: 58px; margin: 7px 0 13px; color: var(--muted); font-size: 10px; line-height: 1.8; }
.error-destination-card > span:last-child { color: var(--red); font-size: 11px; font-weight: 700; }
.error-quick-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; margin-top: 24px; color: var(--muted); font-size: 10px; }
.error-quick-links a { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--cream-2); color: var(--ink); font-weight: 700; }
.error-quick-links a:hover { color: var(--red); border-color: #d6aaa8; }
.error-page--server .error-hero { min-height: 330px; }
.error-page--server .error-hero__kanji span { font-size: 116px; }

@media (max-width: 820px) {
  .error-page { padding-top: 35px; }
  .error-hero { min-height: 0; grid-template-columns: 90px minmax(0,1fr); gap: 23px; padding: 38px 30px; }
  .error-hero__code { font-size: 54px; }
  .error-hero__copy h1 { font-size: 28px; }
  .error-hero__kanji { position: absolute; right: -35px; bottom: -55px; width: 190px; opacity: .16; }
  .error-hero__kanji span { font-size: 110px; }
  .error-hero__kanji i { display: none; }
  .error-search-panel { grid-template-columns: 1fr; gap: 18px; }
  .error-destination-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .error-page { padding-top: 22px; }
  .error-hero { grid-template-columns: 1fr; gap: 12px; padding: 30px 22px; }
  .error-hero__code { font-size: 45px; writing-mode: horizontal-tb; letter-spacing: -.03em; }
  .error-hero__copy h1 { margin-top: 7px; font-size: 24px; }
  .error-hero__copy p { font-size: 11px; }
  .error-hero__copy p br { display: none; }
  .error-hero__copy .button { width: 100%; }
  .error-hero__actions { flex-direction: column; }
  .error-search-panel { padding: 24px 18px; }
  .error-search { grid-template-columns: 1fr 76px; }
  .error-search input { height: 48px; padding-inline: 12px; font-size: 11px; }
  .error-search button { font-size: 11px; }
  .error-destinations { padding-top: 52px; }
  .error-destination-grid { grid-template-columns: 1fr; }
  .error-destination-card { min-height: 175px; display: grid; grid-template-columns: 57px minmax(0,1fr); column-gap: 14px; align-content: center; }
  .error-destination-card__icon { grid-row: 1 / span 3; width: 52px; height: 52px; margin: 0; }
  .error-destination-card p { min-height: 0; margin: 5px 0 8px; }
  .error-quick-links > span { width: 100%; text-align: center; }
}

/* Footer PR links */
.footer-pr-links {
  margin-top: 18px;
  padding-top: 14px;
  padding-bottom: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.footer-pr-links__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-pr-links__item {
  margin: 0;
  padding: 0;
}
.footer-pr-links__item a {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: rgba(255, 255, 255, .72);
  font-size: 10px;
  line-height: 1.6;
  text-decoration: none;
}
.footer-pr-links__item a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-pr-links__mark {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .52);
  font-size: 8px;
  font-weight: 700;
}
.footer-pr-links__label {
  min-width: 0;
}

@media (max-width: 560px) {
  .footer-pr-links {
    margin-top: 14px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .footer-pr-links__list {
    display: grid;
    gap: 6px;
  }
  .footer-pr-links__item a {
    font-size: 10px;
  }
}