/* syumi.space editorial system. Loaded only on the verified staging site. */
body.syumi-editorial {
  --sy-paper: #faf8f2;
  --sy-surface: #f0eee5;
  --sy-ink: #202d35;
  --sy-muted: #5d655f;
  --sy-accent: #78654a;
  --sy-line: #d9d4c7;
  --sy-dark: #24343e;
  --sy-sans: "Noto Sans JP", "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --sy-serif: "Noto Serif JP", "BIZ UDPMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  color: var(--sy-ink);
  background: var(--sy-paper);
  font: 400 18px/1.9 var(--sy-sans);
  overflow-wrap: anywhere;
  padding-top: 0;
}
.syumi-editorial :where(*, *::before, *::after) { box-sizing: border-box; }
.syumi-editorial :where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--sy-accent);
  outline-offset: 4px;
}
.syumi-editorial :where(a) { text-underline-offset: .22em; }
.syumi-editorial :where(img, video, iframe) { max-width: 100%; }
.syumi-editorial :where(img) { height: auto; }
.syumi-editorial :where(#header-container, #header, #navi, #footer, .mobile-menu-buttons) {
  color: var(--sy-ink);
  background: var(--sy-paper);
}
.syumi-editorial #header-container { border-bottom: 1px solid var(--sy-line); }
.syumi-editorial #header-in { max-width: 1200px; padding: 24px 32px 16px; }
.syumi-editorial #header-in.sy-header-row { display: flex; flex-direction: row; min-height: 0; height: auto; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.syumi-editorial #header { min-height: 0; height: auto; }
.syumi-editorial #navi.sy-editorial-nav { width: auto; }
.syumi-editorial .sy-wordmark { color: var(--sy-ink); font: 400 36px/1.3 Georgia, var(--sy-serif); letter-spacing: -.035em; text-decoration: none; }
.syumi-editorial #navi .menu { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.syumi-editorial #navi .menu > li { width: auto; height: auto; }
.syumi-editorial #navi .menu a { width: auto; }
.syumi-editorial .sy-header-search { display: flex; align-items: stretch; max-width: 100%; margin: 0; }
.syumi-editorial .sy-header-search input { width: 160px; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid var(--sy-line); background: transparent; color: var(--sy-ink); font: 400 14px/1.5 var(--sy-sans); }
.syumi-editorial .sy-header-search button { min-height: 44px; padding: 8px 10px; border: 1px solid var(--sy-line); background: var(--sy-surface); color: var(--sy-ink); font: 400 14px/1.5 var(--sy-sans); }
.syumi-editorial .mobile-header-menu-buttons { display: none; }
.syumi-editorial #carousel { display: none; }
.syumi-editorial .tagline { color: var(--sy-muted); font-size: 14px; }
.syumi-editorial #navi a {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 18px;
  color: var(--sy-ink); font: 400 16px/1.6 var(--sy-sans); text-decoration: none;
}
.syumi-editorial #navi a:hover { background: var(--sy-surface); }
.syumi-editorial #navi .sub-menu { background: var(--sy-paper); border: 1px solid var(--sy-line); }
.syumi-editorial #navi li:focus-within > .sub-menu { display: block; visibility: visible; opacity: 1; }
.syumi-editorial #content-in { max-width: 1200px; gap: 40px; padding-inline: 32px; }
.syumi-editorial #main {
  min-width: 0; background: var(--sy-paper); color: var(--sy-ink);
  padding: 40px 32px; border: 0; box-shadow: none;
}
.syumi-editorial #sidebar { background: var(--sy-paper); }
.syumi-editorial #sidebar .widget-title {
  font: 400 20px/1.6 var(--sy-serif); background: transparent;
  border: 0; border-bottom: 1px solid var(--sy-line); padding: 0 0 14px;
}
.syumi-editorial #main .entry-title {
  color: var(--sy-ink); font: 400 clamp(28px, 3.2vw, 40px)/1.55 var(--sy-serif);
  margin-bottom: 24px; overflow-wrap: anywhere;
}
.syumi-editorial #main .entry-content { font: 400 18px/1.9 var(--sy-sans); }
.syumi-editorial #main .entry-content :where(p, ul, ol, blockquote) { margin-block: 0 1.6em; }
.syumi-editorial #main .entry-content :where(h2, h3, h4) {
  color: var(--sy-ink); background: transparent; border: 0; padding: 0;
  font-family: var(--sy-serif); font-weight: 400; line-height: 1.65;
}
.syumi-editorial #main .entry-content h2 {
  font-size: clamp(26px, 2.4vw, 30px); margin-block: 2.4em .85em;
  padding-bottom: .45em; border-bottom: 1px solid var(--sy-line);
}
.syumi-editorial #main .entry-content h3 { font-size: clamp(22px, 2vw, 24px); margin-block: 1.9em .7em; }
.syumi-editorial #main .entry-content h4 { font-size: 20px; margin-block: 1.7em .7em; }
.syumi-editorial #main .entry-content a { color: var(--sy-accent); text-decoration: underline; }
.syumi-editorial #main .entry-content :where(figcaption, .wp-element-caption) {
  font: 400 14px/1.8 var(--sy-sans); color: var(--sy-muted);
}
.syumi-editorial #main .entry-content blockquote {
  border-left: 2px solid var(--sy-accent); background: var(--sy-surface);
  padding: 24px; color: var(--sy-ink);
}
.syumi-editorial #main .entry-content pre { max-width: 100%; overflow: auto; white-space: pre; overflow-wrap: normal; }
.syumi-editorial #main .entry-content table { display: block; max-width: 100%; overflow-x: auto; font-size: 16px; }
.syumi-editorial #main .toc {
  max-width: 100%; background: var(--sy-surface); border: 1px solid var(--sy-line);
  border-radius: 0; box-shadow: none; padding: 24px; font-size: 18px;
}
.syumi-editorial #main .toc-title { font: 400 20px/1.6 var(--sy-serif); }
.syumi-editorial #main :where(.post-date, .post-update, .new-entry-card-date, .wp-block-post-date) {
  color: var(--sy-muted); font-size: 14px; line-height: 1.7;
}
.syumi-editorial #main .entry-card-wrap {
  padding: 0 0 24px; border: 0; border-bottom: 1px solid var(--sy-line);
  background: transparent; color: var(--sy-ink);
}
.syumi-editorial #main :where(.entry-card-title, .new-entry-card-title, .related-entry-card-title) {
  font: 400 20px/1.7 var(--sy-sans); color: var(--sy-ink);
}
.syumi-editorial #main :where(.entry-card-snippet, .new-entry-card-snippet) { font-size: 16px; line-height: 1.9; color: var(--sy-muted); }
.syumi-editorial #main .entry-content :where(.wp-block-post-template, .new-entry-cards) {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
  margin: 0; padding: 0; list-style: none;
}
.syumi-editorial #main .wp-block-post-template > li {
  min-width: 0; margin: 0; padding-bottom: 24px; border-bottom: 1px solid var(--sy-line);
}
.syumi-editorial #main .wp-block-post-title { font: 400 22px/1.65 var(--sy-sans); }
.syumi-editorial #main .entry-content .wp-block-post-title { font: 400 22px/1.65 var(--sy-sans); margin: 0 0 14px; padding: 0; border: 0; }
.syumi-editorial #main .wp-block-post-title a { color: var(--sy-ink); text-decoration: none; }
.syumi-editorial #main .wp-block-post-excerpt { font-size: 16px; }
.syumi-editorial.page-id-49 #main .wp-block-post-featured-image { margin: 0 0 20px; }
.syumi-editorial.page-id-49 #main .wp-block-post-featured-image a { display: block; }
.syumi-editorial.page-id-49 #main .wp-block-post-featured-image img {
  display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover;
}
.syumi-editorial #main .new-entry-card-link { display: block; min-width: 0; margin: 0; padding: 0 0 24px; border-bottom: 1px solid var(--sy-line); }
.syumi-editorial #main .new-entry-card-thumb { float: none; width: 100%; margin: 0 0 16px; }
.syumi-editorial #main .new-entry-card-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
/* Cocoon large_thumb_on positions copy over the photograph and hides it on hover.
 * Keep native dynamic cards, but place their full title on the paper surface. */
.syumi-editorial #main .new-entry-cards.large-thumb-on .new-entry-card-content,
.syumi-editorial #main .new-entry-cards.large-thumb-on .a-wrap:hover .new-entry-card-content {
  position: static; width: auto; margin: 0; padding: 0;
  background: transparent; color: var(--sy-ink); opacity: 1; transition: none;
}
.syumi-editorial #main .new-entry-cards.large-thumb-on .new-entry-card-title {
  display: block; height: auto; max-height: none; overflow: visible;
  -webkit-line-clamp: unset;
}
.syumi-editorial #main .new-entry-cards.large-thumb-on .a-wrap:hover { opacity: 1; }
.syumi-editorial #main .new-entry-card-content { margin: 0; }
.syumi-editorial #main .new-entry-card-date { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.syumi-editorial #main :where(.page-numbers, .pagination-next-link, .wp-block-query-pagination a) {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 8px 14px;
}
.syumi-editorial #main .wp-block-search { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 24px; }
.syumi-editorial #main :where(.wp-block-search__input, input[type="text"], input[type="email"], textarea, select) {
  max-width: 100%; min-height: 48px; padding: 12px; color: var(--sy-ink);
  background: var(--sy-paper); border: 1px solid var(--sy-muted); font: inherit;
}
.syumi-editorial #main :where(.wp-block-search__button, input[type="submit"], button[type="submit"]) {
  min-height: 48px; padding: 12px 20px; background: var(--sy-dark);
  color: var(--sy-paper); border: 1px solid var(--sy-dark); font: inherit;
}
.syumi-editorial #main .wpcf7-not-valid-tip { font-size: 16px; line-height: 1.7; color: #932b2b; }
.syumi-editorial #main .wpcf7-response-output { font-size: 18px; line-height: 1.8; }
.syumi-editorial #footer { border-top: 1px solid var(--sy-line); padding-block: 32px; font-size: 16px; }
.syumi-editorial #footer a { color: var(--sy-ink); }
.syumi-editorial .sy-editorial-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; text-align: left; }
.syumi-editorial .sy-editorial-footer .menu { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.syumi-editorial .sy-editorial-footer .menu a { display: inline-flex; align-items: center; min-height: 44px; }
.syumi-editorial #footer .sy-editorial-footer p { margin-top: 16px; font-size: 16px; color: var(--sy-muted); }
.syumi-editorial .sy-copyright { color: var(--sy-muted); font-size: 14px; }
.syumi-editorial .mobile-menu-buttons { border-top: 1px solid var(--sy-line); }
.syumi-editorial .mobile-menu-buttons .menu-button { min-height: 48px; }

/* Native Cocoon search icon used to be positioned for a 24px button.
 * Our accessible button is taller; align by its actual dimensions instead. */
.syumi-editorial #main .search-box .search-submit {
  top: 50%; bottom: auto; transform: translateY(-50%);
  height: 48px; min-height: 48px; width: 48px; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.syumi-editorial #main .search-box .search-edit { min-height: 56px; padding-right: 60px; }
/* Balance complete titles without editing article text or inserting fixed breaks. */
.syumi-editorial #main :is(.entry-title, .new-entry-card-title, .wp-block-post-title) {
  text-wrap: balance; word-break: normal; overflow-wrap: anywhere;
}
@media (max-width: 782px) {
  /* Cocoon clears the WP mobile html offset; retain room for the logged-in toolbar. */
  body.syumi-editorial.admin-bar { padding-top: 46px; }
}

/* Wide editorial pages; article reading column stays separate. */
.syumi-editorial:is(.home, .page-id-402, .page-id-49, .page-id-408, .page-id-86, .single) #content-in { display: block; }
.syumi-editorial:is(.home, .page-id-402, .page-id-49, .page-id-408, .page-id-86, .single) #main { width: 100%; max-width: 1200px; margin-inline: auto; }
.syumi-editorial:is(.home, .page-id-402, .page-id-49, .page-id-408, .page-id-86, .single) #sidebar { display: none; }
.syumi-editorial.single #main :where(.article-header, .entry-content, .under-entry-content, .article-footer) { max-width: 720px; margin-inline: auto; }
.syumi-editorial.single #main .eye-catch img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.syumi-editorial.page #content-in { display: block; }
.syumi-editorial.page #main { width: 100%; margin-inline: auto; }
.syumi-editorial.page #sidebar { display: none; }
.syumi-editorial.page:not(.home):not(.page-id-402):not(.page-id-49):not(.page-id-408):not(.page-id-86) #main { max-width: 800px; }
/* Keep the WP page's H1 in the accessibility tree; the editorial lead is visual. */
.syumi-editorial:is(.home, .page-id-402) #main .article-header {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.syumi-editorial:is(.home, .page-id-402, .page-id-49, .page-id-408, .page-id-86) #main .toc { display: none; }
.syumi-editorial #main .sy-top { width: 100%; max-width: none; font: 400 18px/1.9 var(--sy-sans); }
.syumi-editorial #main .sy-top > :where(section, .chapter),
.syumi-editorial #main .sy-top > .chapter > :where(.section-head, .new-entry-cards) { width: 100%; max-width: none; }
.syumi-editorial #main .sy-top :where(section, div, figure) { min-width: 0; }
.syumi-editorial #main .sy-top .hero {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  align-items: center; gap: 48px; padding: 16px 0 64px;
}
.syumi-editorial #main .sy-top .sy-home-headline {
  margin: 0 0 24px; padding: 0; border: 0;
  font: 400 clamp(30px, 3vw, 42px)/1.5 var(--sy-serif); letter-spacing: 0;
  text-align: left; text-justify: none; word-break: normal;
}
.syumi-editorial #main .sy-top .sy-home-headline em { font-style: normal; color: var(--sy-accent); }
.syumi-editorial #main .sy-top .eyebrow {
  margin: 0 0 16px; font: 400 14px/1.7 var(--sy-sans);
  color: var(--sy-accent); letter-spacing: .09em;
}
.syumi-editorial #main .sy-top .intro { max-width: 430px; margin: 0; color: var(--sy-muted); font-size: 18px; }
.syumi-editorial #main .sy-top .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.syumi-editorial #main .sy-top .primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 48px; padding: 12px 24px; background: var(--sy-dark);
  color: var(--sy-paper); font-size: 16px; text-decoration: none;
}
.syumi-editorial #main .sy-top .secondary { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.syumi-editorial #main .sy-top .hero figure { margin: 0; }
.syumi-editorial #main .sy-top .hero img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; object-position: 56% center; }
.syumi-editorial #main .sy-top .hero figcaption { margin-top: 10px; font-size: 14px; line-height: 1.8; }
.syumi-editorial #main .sy-top .chapter { margin: 0; padding: 64px 0; border-top: 1px solid var(--sy-line); }
.syumi-editorial #main .sy-top .section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin-bottom: 32px; }
.syumi-editorial #main .sy-top .section-head h2 { margin: 0; padding: 0; border: 0; font: 400 clamp(26px, 2.5vw, 32px)/1.6 var(--sy-serif); }
.syumi-editorial #main .sy-top .section-head .eyebrow { margin-bottom: 8px; }
.syumi-editorial #main .sy-top .section-head > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.syumi-editorial #main .sy-top .features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.syumi-editorial #main .sy-top .feature { padding-bottom: 24px; border-bottom: 1px solid var(--sy-line); }
.syumi-editorial #main .sy-top .feature .no { display: block; margin-bottom: 20px; font: 400 36px/1.2 var(--sy-serif); color: var(--sy-accent); }
.syumi-editorial #main .sy-top .feature h3 { margin: 0 0 14px; font: 400 22px/1.7 var(--sy-sans); }
.syumi-editorial #main .sy-top .feature h3 a { color: var(--sy-ink); text-decoration: none; }
.syumi-editorial #main .sy-top .feature p { margin: 0; font-size: 18px; color: var(--sy-muted); }
.syumi-editorial #main .sy-top .feature p > a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; }
.syumi-editorial #main .sy-top .topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.syumi-editorial #main .sy-top .topics > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 18px 0; border-bottom: 1px solid var(--sy-line); font: 400 20px/1.6 var(--sy-sans); text-decoration: none; }
.syumi-editorial #main .sy-top .sy-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.syumi-editorial #main .sy-top .sy-path { display: block; min-height: 44px; padding: 24px; border: 1px solid var(--sy-line); text-decoration: none; }
.syumi-editorial #main .sy-top .sy-path h3 { margin: 0 0 10px; font: 400 24px/1.6 var(--sy-serif); }
.syumi-editorial #main .sy-top .sy-path p { margin: 0; color: var(--sy-muted); font-size: 18px; }
.syumi-editorial #main .sy-top .sy-question { padding: 32px; background: var(--sy-surface); }
.syumi-editorial #main .sy-top .sy-question h2 { margin: 0 0 16px; border: 0; padding: 0; }
.syumi-editorial #main .sy-top .editorial { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 64px; }
.syumi-editorial #main .sy-top .editorial h2 { margin: 0; border: 0; padding: 0; font: 400 32px/1.7 var(--sy-serif); }
.syumi-editorial #main .sy-top .editorial p { color: var(--sy-muted); }
@media (max-width: 1023px) {
  .syumi-editorial #content-in { padding-inline: 24px; }
  .syumi-editorial #main { padding: 32px 24px; }
  .syumi-editorial #main .sy-top .hero { gap: 32px; }
  .syumi-editorial #main .sy-top :is(.features, .topics),
  .syumi-editorial #main .entry-content :where(.wp-block-post-template, .new-entry-cards) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 834px) {
  .syumi-editorial #main .sy-top :is(.hero, .editorial) { grid-template-columns: 1fr; gap: 28px; }
  .syumi-editorial #main .sy-top .hero img { aspect-ratio: 3/2; object-position: center; }
  .syumi-editorial #main .sy-top .chapter { padding-block: 48px; }
}
@media (max-width: 599px) {
  .syumi-editorial #content-in { padding-inline: 0; }
  .syumi-editorial #main { padding: 24px 20px; }
  .syumi-editorial #header-in { padding-inline: 20px; }
  .syumi-editorial #header-in.sy-header-row { justify-content: center; padding-block: 20px 12px; }
  .syumi-editorial .sy-wordmark { font-size: 32px; }
  .syumi-editorial #navi a { padding-inline: 8px; font-size: 15px; }
  .syumi-editorial .sy-header-search { width: 100%; }
  .syumi-editorial .sy-header-search input { flex: 1; width: auto; }
  .syumi-editorial #main .sy-top :is(.features, .topics, .sy-paths),
  .syumi-editorial #main .entry-content :where(.wp-block-post-template, .new-entry-cards) { grid-template-columns: 1fr; }
  .syumi-editorial #main .sy-top .chapter { padding-block: 40px; }
  .syumi-editorial #main .sy-top .sy-home-headline { font-size: 30px; }
  .syumi-editorial #main .sy-top :where(.sy-path, .sy-question) { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .syumi-editorial { scroll-behavior: auto; }
  .syumi-editorial *, .syumi-editorial *::before, .syumi-editorial *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}

/* Native Cocoon search cards: keep desktop columns; give mobile titles room. */
@media (max-width: 599px) {
  body.syumi-editorial.search #main .list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  body.syumi-editorial.search #main .list > .entry-card-wrap {
    width: 100%;
    min-width: 0;
    margin: 0;
  }
  body.syumi-editorial.search #main .entry-card-title {
    display: block;
    max-height: none;
    overflow: visible;
    -webkit-line-clamp: unset;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
}

/* Logged-in editor controls must stay legible even if a saved Cocoon color is invalid.
 * These controls exist only for logged-in editors. Keep their links and menus. */
body.syumi-editorial #admin-panel {
  background: var(--sy-dark); color: var(--sy-paper); opacity: 1;
}
body.syumi-editorial #admin-panel a { color: var(--sy-paper); }
body.syumi-editorial #admin-panel > div { border-color: #89959b; }
/* At intermediate CSS widths the account menu wrapped below WP's32px backdrop.
 * Reserve a deliberate second row rather than putting white text over the page. */
@media (min-width: 783px) and (max-width: 1200px) {
  body.syumi-editorial.admin-bar { padding-top: 32px; }
  body.syumi-editorial #wpadminbar { height: 64px; }
  body.syumi-editorial #wpadminbar #wp-admin-bar-root-default {
    display: flex; flex-wrap: nowrap; float: none; width: 100%; height: 32px;
  }
  body.syumi-editorial #wpadminbar #wp-admin-bar-root-default > li { min-width: 0; }
  body.syumi-editorial #wpadminbar #wp-admin-bar-root-default > li > .ab-item {
    max-width: 110px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  body.syumi-editorial #wpadminbar #wp-admin-bar-top-secondary {
    float: none; display: flex; justify-content: flex-end;
    width: 100%; height: 32px; background: #1d2327;
  }
}

/* Topic landing: the existing six fields remain editable in the WP list block. */
.syumi-editorial.page-id-86 #main .entry-content > p:first-child { max-width: 720px; }
.syumi-editorial.page-id-86 #main .entry-content > h2:first-of-type { margin-top: 1.5em; }
.syumi-editorial.page-id-86 #main .entry-content .sy-topic-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  width: 100%; max-width: none; padding: 0; margin: 0 0 48px; list-style: none;
}
.syumi-editorial.page-id-86 #main .sy-topic-cards > li { margin: 0; padding: 0; min-width: 0; }
.syumi-editorial.page-id-86 #main .sy-topic-cards > li > a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  height: 100%; min-height: 220px; padding: 24px;
  border: 1px solid var(--sy-line); background: var(--sy-paper);
  color: var(--sy-ink); text-decoration: none;
}
.syumi-editorial.page-id-86 #main .sy-topic-cards > li > a:hover,
.syumi-editorial.page-id-86 #main .sy-topic-cards > li > a:focus-visible {
  background: var(--sy-surface); border-color: var(--sy-accent);
}
.syumi-editorial.page-id-86 #main .sy-topic-title { font: 400 24px/1.6 var(--sy-serif); }
.syumi-editorial.page-id-86 #main .sy-topic-description { color: var(--sy-muted); font: 400 18px/1.9 var(--sy-sans); }
.syumi-editorial.page-id-86 #main .sy-topic-arrow { margin-top: auto; color: var(--sy-accent); line-height: 1; }
@media (max-width: 1023px) {
  .syumi-editorial.page-id-86 #main .entry-content .sy-topic-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .syumi-editorial.page-id-86 #main .entry-content .sy-topic-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .syumi-editorial.page-id-86 #main .sy-topic-cards > li > a { min-height: 180px; padding: 24px; }
}