/* Shared Header/nav/drawer, Sidebar shell, Footer/SNS, News filter and interactions.
   Measured reference: reference/igaku-shoin/css/94d6128130a3-style.css. */
.skip-link { position:fixed; left:12px; top:-100px; background:#fff; padding:12px; z-index:100; }
.skip-link:focus { top:12px; }
.site-header { position:relative; background:#fff; border-top:1px solid var(--line); }
.brand-row { width:94%; max-width:1520px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; text-decoration:none; }
.brand-symbol { object-fit:contain; }
.brand-name { font-size:26px; font-weight:700; letter-spacing:.08em; }
.brand-wordmark { object-fit:contain; }
.desktop-nav { background:var(--accent); color:#fff; }
/* Existing TOP banner yellow; readable on the neutral, burgundy and blue navs. */
:root { --recruitment-yellow:#f9ea28; }
.desktop-nav .nav-list .nav-recruitment { color:var(--recruitment-yellow); }
.nav-list { display:flex; list-style:none; margin:0 auto; padding:0; max-width:1600px; }
.nav-list a { display:flex; align-items:center; justify-content:center; text-align:center; min-height:60px; padding:12px clamp(16px,2.1vw,40px); font-size:18px; text-decoration:none; color:inherit; white-space:nowrap; }
.nav-list a[aria-current=page] { text-decoration:underline; text-underline-offset:7px; }
.compact-header { position:fixed; top:0; left:0; width:100%; z-index:30; align-items:center; background:#fff; border-bottom:1px solid var(--line); display:flex; }
.compact-header .brand-name { font-size:16px; letter-spacing:.02em; }
.compact-header .brand { gap:8px; flex-shrink:0; }
.compact-header nav { flex:1; min-width:0; }
.menu-toggle { display:none; }
.menu-panel { border:0; margin:0 0 0 auto; position:fixed; inset:0 0 0 auto; width:88%; max-width:88%; height:100dvh; max-height:100dvh; background:#fff; color:#000; }
.menu-panel .nav-list { display:block; }
.menu-panel .nav-list a { justify-content:flex-start; border-bottom:1px solid var(--line); white-space:normal; }
.menu-close { position:absolute; right:6.5px; top:6.5px; width:44px; height:44px; min-width:44px; min-height:44px; padding:0; -webkit-appearance:none; appearance:none; border:0; background:transparent; line-height:1; }
.menu-close-icon { position:absolute; left:7.5px; top:10px; width:29px; height:24px; }
.menu-close-icon::before, .menu-close-icon::after { content:""; position:absolute; left:0; top:50%; width:100%; height:10%; background:#000; }
.menu-close-icon::before { transform:rotate(225deg); }
.menu-close-icon::after { transform:rotate(135deg); }
.menu-close:focus-visible { outline-offset:2px; }
.menu-panel.is-pointer-open .menu-close:focus-visible { outline:none; }
.menu-secondary { font-size:.8125em; font-weight:400; line-height:2.5em; text-decoration:none; }
.sidebar { background:var(--side); flex:1 1 calc(50% - 340px); padding:40px 0 78px; min-width:0; }
.sidebar-inner { max-width:350px; margin-right:auto; padding:0 11.4285714286%; }
.side-heading { padding-bottom:12px; border-bottom:1px solid var(--line); }
.socials { display:flex; align-items:center; }
.socials a { font-size:15px; }
.social-note { font-size:13px; margin:0; color:var(--muted); }
.teaser { display:block; width: fit-content; max-width: 100%; margin-inline: auto; text-align:center; }
.teaser img { width:226px; }
.side-philosophy { font-size:14px; }
.text-link { display:inline-block; color:var(--accent); font-weight:700; text-decoration:none; padding:5px 0; }
@media (hover: hover) and (pointer: fine) { .text-link:hover { text-decoration:underline; } }
/* The Sidebar About link stays in the logo's azuki on every page and viewport, not the page theme. */
.philosophy-block .text-link { color:var(--atelier); }
/* The contact page's address takes the atelier color (the same one as the sidebar's アトリエについて) in every state. */
.prose a.contact-email { color:var(--atelier); }
/* Page-to-page navigation (list / back) in the publisher's accent-colored type; its chevron comes from .cta-chevron. */
.nav-link { color:var(--accent); font-weight:700; line-height:1.5; text-decoration:none; padding:5px 0; }
/* Every page-to-page text CTA (list, back, about; Gene-NAVI .c-btn-icon-right): the text, then one small right-pointing
   chevron in the text color. Back links point right too. Only geometry lives here; each link keeps its own type and hover. */
.cta-chevron { display:inline-flex; align-items:center; gap:8px; }
.cta-chevron::after { content:""; flex:none; width:6px; height:6px; margin-right:1px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); }
/* A link that goes back: the same chevron, turned to point left and placed before the text (the markup order is unchanged). */
.cta-chevron-back::after { order:-1; margin:0 0 0 1px; transform:rotate(225deg); }
@media (hover: hover) and (pointer: fine) { .nav-link:hover { text-decoration:underline; } }
.breadcrumb { padding:0; flex-wrap:wrap; gap:6px 10px; list-style:none; }
.breadcrumb li+li:before { margin-right:10px; }
.breadcrumb a { text-decoration:none; }
@media (hover: hover) and (pointer: fine) { .breadcrumb a:hover { text-decoration:underline; } }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--accent); background:#fff; padding:9px 18px; color:var(--accent); font-size:14px; text-decoration:none; line-height:1.5; gap:10px; }
.news-filter { margin-bottom:28px; }
.site-footer { display:grid; grid-template-columns:1fr 1fr; background:#f6f6f6; }
.footer-site { max-width:800px; width:100%; margin-left:auto; }
.footer-site .brand-name { font-size:20px; }
.footer-site .brand-symbol { width:48px; height:48px; }
.footer-nav { grid-template-columns:1fr 1fr; list-style:none; gap:10px 20px; }
.footer-nav a { text-decoration:none; }
/* As on the other Igaku-Shoin sites (NAVI, Gastropedia, Mashup): footer links keep their text color on hover and only gain a plain underline
   in that color; the page/edition accent (the global a:hover color) never applies here. The underline is for pointers that can hover. */
.footer-nav a, .footer-nav a:hover { color:inherit; }
@media (hover: hover) and (pointer: fine) { .footer-nav a:hover { text-decoration:underline; } }
.footer-company { background:var(--publisher); color:#fff; }
.publisher-logo { margin-bottom:24px; }
.footer-company p { font-size:12px; line-height:1.9; }
.footer-company a:hover { color:#fff; }
.copyright { grid-column:1/-1; margin:0; font-size:11px; }
@media(min-width:1400px) {
  .sidebar-inner { max-width:420px; padding:0 14.2857142857%; }
}
@media(min-width:1600px) {
  .sidebar-inner { padding:0 60px; }
  .sidebar { flex-grow:0; }
}
@media(max-width:1199.98px) and (min-width:1024px) {
  .nav-list a { padding-inline:16px; font-size:16px; }
  .compact-header .brand-name { display:none; }
  .compact-header .nav-list a { padding-inline:10px; }
}
@media(max-width:1023.98px) {
  .site-header { position:fixed; top:0; left:0; width:100%; z-index:30; border-bottom:1px solid var(--line); }
  .brand-row { width:93.3333333333%; }
  .brand-name { font-size:18px; letter-spacing:.04em; }
  .desktop-nav { display:none!important; }
  .compact-header { display:none!important; }
  /* Gene-NAVI .l-header-toggle: its official icon, 1.8125em wide (capped at 7.7333vw), .84375em from the header's right edge
     and 1.15625em below its top border. The 44px hit area stays vertically centred in the 3.125em header row, centred on the icon across. */
  .menu-toggle { --toggle-icon-w:min(1.8125em,7.7333333333vw); display:block; position:absolute; top:calc((3.125em - 44px) / 2); right:calc(.84375em + var(--toggle-icon-w) / 2 - 22px); border:0; background:#fff url(/assets/ui/icon_hamburger_01.png) no-repeat 50% calc(22px - .40625em) / var(--toggle-icon-w) auto; width:44px; height:44px; padding:10px; font-size:16px; }
  .menu-toggle span { display:none; }
  .sidebar { background:transparent; margin-top:45px; padding:40px 0 45px; }
  .sidebar-inner { width:88%; max-width:800px; margin:0 auto; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:32px; }
  .side-block:first-child { grid-column:1/-1; }
  .side-philosophy { font-size:14px; }
  .sidebar .teaser { grid-row:2; grid-column:1; }
  .sidebar .philosophy-block { grid-row:2; grid-column:2; }
  .breadcrumb { margin-bottom:24px; }
  .site-footer { display:block; background:#fff; }
  .footer-site { max-width:none; }
}
@media(max-width:640px) {
  .sidebar-inner { display:block; }
  .teaser { text-align:center; }
  .sidebar .teaser img { width:226px; max-width:100%; }
  .side-philosophy { max-width:36em; }
  .footer-nav { gap:14px; }
  .footer-site .brand-name { font-size:18px; }
  .brand-name { font-size:16px; }
}
@media(min-width:641px) and (max-width:1023.98px) {
  .sidebar .teaser { grid-row:auto; grid-column:auto; }
  .sidebar .philosophy-block { grid-row:auto; grid-column:auto; }
}
@media print {
  .site-header { display:none!important; }
  .compact-header { display:none!important; }
  .sidebar { display:none!important; }
  .site-footer { display:none!important; }
}
:root { --header-font: 18px; --fixed-font: 16px; --number-font: "Cabin", var(--font); --subtle-text: #707070; }
.site-header { font-size: var(--header-font); }
.brand-row { height: 5.5555555556em; }
.brand { gap: 16px; flex-shrink: 0; }
.brand-symbol { width: 3.7777777778em; height: 3.7777777778em; }
.brand-wordmark { width: auto; height: 5em; max-width: none; max-height: none; }
.brand:hover { color: inherit; }
.desktop-nav { overflow-x: auto; scrollbar-width: none; }
.desktop-nav::-webkit-scrollbar { display: none; }
.compact-header nav::-webkit-scrollbar { display: none; }
.nav-list { justify-content: flex-start; }
.desktop-nav .nav-list a { min-height: 3.3333333333em; font-size: inherit; padding: 0; margin: 0 2em; }
.nav-list a { font-weight: 400; line-height: 1.15; letter-spacing: .05em; }
.nav-list a[aria-current="page"] { text-decoration: none; }
/* Gene-NAVI limits nav hover to the desktop bar; touch taps in the drawer leave no underline. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .nav-list a:hover { text-decoration: underline; text-underline-offset: .2em; }
}
.compact-header { font-size: var(--fixed-font); height: 3.75em; gap: 0; padding: 0 3%; border-block: 1px solid #bcbcbc; opacity: 0; visibility: hidden; pointer-events: none; }
.compact-header.is-hiding { transition: opacity .3s ease-in-out, visibility 0s .3s; }
.compact-header.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .4s ease-in-out, visibility 0s; }
.compact-header .brand-symbol { height: 2.375em; }
.compact-header .brand-wordmark { height: 3em; }
.compact-header .brand-symbol { width: 2.375em; }
.compact-header nav { overflow-x: auto; scrollbar-width: none; }
.compact-header .nav-list { justify-content: flex-start; }
.compact-header .nav-list a { min-height: calc(3.75em - 2px); font-size: inherit; padding: 0; margin: 0 2em; }
.breadcrumb { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 43px; font-size: 16px; line-height: 1.5; letter-spacing: .05em; color: #000; }
.breadcrumb li { display: inline; }
.breadcrumb li + li::before { content: '/ '; margin: 0 0 0 .5em; }
.breadcrumb a { font-weight: 700; color: var(--accent); }
.side-heading { font-size: 22px; text-align: center; letter-spacing: .05em; padding: 0; border: 0; margin-bottom: 28px; }
.side-block + .side-block { margin-top: 60px; }
.side-philosophy { line-height: 1.7407407407; }
.philosophy-logo { display: none; }
.philosophy-content { display: contents; }
.socials { justify-content: center; gap: 20px; }
.socials a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; text-decoration: none; }
.social-icon { display: block; width: 24px; height: 24px; object-fit: contain; }
.footer-brand .social-icon { width: 26px; height: 26px; }
/* Official PNG includes clear space; 37.133px image height gives a 20px mark. */
.socials a[aria-label="YouTube"] { position: relative; }
.socials a[aria-label="YouTube"] .social-icon { position: absolute; height: 37.133px; width: auto; max-width: none; }
@font-face { font-family: "Cabin"; src: url('/assets/fonts/cabin-bold-latin.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
.news-index .page-heading { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; padding: 0; border: 0; margin-bottom: 35px; }
.news-index .page-heading h1 { margin: .2083333333em 0; }
.news-filter { display: flex; flex-wrap: wrap; gap: 0; max-width: none; padding: 0; list-style: none; font-size: 20px; margin: 44px -.5em 36px; }
.news-filter-item { margin: 0 .5em 1em; }
.news-filter-button { appearance: none; display: flex; align-items: center; justify-content: center; position: relative; font-family: var(--number-font); font-size: inherit; font-weight: 700; line-height: 1; letter-spacing: .05em; min-width: 7.2em; padding: .6em; margin: 0; border: 2px solid #000; border-radius: .2em; background: #000; color: #fff; text-align: center; cursor: pointer; }
/* The hover fade starts only once the page has loaded (site.js): WebKit can resolve the button's style before this stylesheet
   applies, and a resting transition would fade both buttons from the browser's default gray into their real colors. */
.news-filter.is-ready .news-filter-button { transition: background .2s linear, color .2s linear; }
.news-filter-button[aria-pressed="true"] { background: #fff; color: #000; }
/* Hover previews the toggle; on touch it stuck, turning the tapped (selected) year black. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .news-filter-button:hover { background: #fff; color: #000; }
  .news-filter-button[aria-pressed="true"]:hover { background: #000; color: #fff; }
}
@media (max-width: 1023.98px) {
  .news-index .page-heading { margin-bottom: 13px; }
  .news-index .page-heading h1 { margin: .3235294118em 0; }
  .news-filter { font-size: 16px; margin: 44px -.4375em 36px; }
  .news-filter-item { flex-basis: calc(33.33333% - .875em); margin: 0 .4375em .625em; }
  .news-filter-button { height: 100%; min-width: auto; width: 100%; border-width: 1px; padding: .6875em 2px; }
}
@media (min-width: 600.02px) and (max-width: 1023.98px) {
  .news-filter-item { flex-basis: calc(25% - .875em); }
}
.article-card::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #fff; opacity: 0; transition: opacity .2s linear; }
.teaser-image::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #fff; opacity: 0; transition: opacity .2s linear; }
.article-card img { transition: transform .2s linear; }
.teaser-image { position: relative; display: inline-block; vertical-align: middle; width: 226px; max-width: 100%; overflow: hidden; border-radius: inherit; }
.teaser img { display: block; transition: transform .2s linear; }
/* PC: the teaser fills the Sidebar's content width like the blocks around it (270-300px), at its own aspect ratio. */
@media (min-width: 1024px) {
  .sidebar .teaser, .sidebar .teaser-image, .sidebar .teaser img { width: 100%; }
}
.teaser:hover { opacity: 1; }
.article-card:hover h2 { text-decoration: none; }
.site-footer { position: relative; }
.footer-site { display: flex; justify-content: space-between; align-items: flex-start; padding: 5.75% 2.5% 9.5% 12.5%; }
.footer-brand { font-size: 14px; flex: 1 1 50.7353%; min-width: 0; }
.footer-brand .brand { gap: 8px; }
.footer-brand .brand-symbol { width: 2.6em; height: 2.6em; }
.footer-brand .brand-wordmark { height: 3.2em; }
.footer-identity { width: max-content; max-width: 100%; }
.footer-brand .socials { justify-content: center; margin-top: 22px; }
.footer-nav { display: block; flex: 0 0 49.2647%; padding: 0 0 0 2.9411%; margin: 0; }
.footer-nav li { min-width: 0; max-width: 100%; }
.footer-nav a { font-size: 13px; font-weight: 700; line-height: 2.5; white-space: normal; overflow-wrap: anywhere; }
.footer-company { padding: 0; }
.footer-company-inner { max-width: 800px; margin-right: auto; padding: 10% 11.25%; }
.publisher-logo-link { display: block; width: 160px; transition: opacity .2s linear; }
.publisher-logo { display: block; width: 100%; margin: 0; }
.company-detail { margin: 30px 0 0; }
.company-detail dt { font-size: 15px; font-weight: 700; line-height: 1.8; margin-bottom: .4em; }
.company-detail dd { margin: 0; font-size: 12px; line-height: 1.8; }
.company-contact { margin-top: 1.4666666667em; font-size: 15px; font-weight: 700; line-height: 1.15; }
.company-contact a { text-decoration: none; padding-left: 1.5em; position: relative; }
.company-contact a::before { content: ""; background: url('/assets/ui/icon_letter_01.svg') center / contain no-repeat; position: absolute; width: 1em; height: 100%; left: 0; top: 0; }
@media (hover: hover) and (pointer: fine) { .company-contact a:hover { text-decoration: underline; } }
.copyright { position: absolute; left: 6.25%; bottom: 0; width: auto; background: transparent; padding: 0 0 1.75%; font: 700 14px/1.15 var(--number-font); letter-spacing: .05em; color: #9c9c9c; }
.button { transition: background .2s linear, color .2s linear; }
/* Hover is only for pointers that can hover: touch browsers keep :hover on the last tapped element, which left 「すべて解除」
   black after a tap. Pressing (:active) is feedback on every device and ends with the press. */
.button:active { background: var(--accent); color: #fff; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent); color: #fff; text-decoration: none; }
}
.brand { transition: opacity .2s linear; }
.socials a { transition: opacity .2s linear; }
/* Hover dimming is for pointers that can hover; on touch, :hover stays on the last tapped link (a dimmed logo or social icon after
   returning to the page). The press itself needs no dimming: these links leave the page. */
@media (hover: hover) and (pointer: fine) {
  .brand:hover { opacity: .6; }
  .socials a:hover { opacity: .6; }
}
@media (hover: hover) and (pointer: fine) {
  .article-card:hover::before, .teaser-image:hover::before { opacity: .6; }
  .article-card:hover img, .teaser-image:hover img { transform: scale(1.03); }
  .publisher-logo-link:hover { opacity: .6; }
  .nav-link:hover { opacity: .6; }
  .compact-header nav.is-scrollable { cursor: grab; }
  .compact-header nav.is-dragging { cursor: grabbing; user-select: none; }
}
/* The resting (closed) overlay has no transition, as on Gene-NAVI: WebKit may run the deferred
   site.js before this stylesheet applies, and a transition here would fade a full-screen veil
   out from that unstyled style on page load. Only user actions animate it (site.js). */
.menu-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.3); opacity: 0; visibility: hidden; pointer-events: none; }
.menu-open .menu-overlay { opacity: 1; visibility: visible; transition: opacity .2s linear, visibility 0s; }
.menu-overlay.is-hiding { transition: opacity .6s linear, visibility 0s .6s; }
.menu-open .layout { filter: blur(4px); }
.menu-panel { padding: 84px 6.2666666667vw 40px; transform: translateX(100%); transition: transform .3s linear; }
.menu-panel[open] { animation: none; }
.menu-open .menu-panel { transform: translateX(0); }
.menu-panel::backdrop { background: transparent; backdrop-filter: none; }
.menu-panel .nav-list li { margin-bottom: 3.2px; }
.menu-panel .nav-list a { min-height: 44px; padding: 4px 0; border: 0; font-size: 16px; font-weight: 700; line-height: 36px; }
/* NAVI's secondary pitch is 41.6px; keep non-overlapping 44px touch targets. */
.menu-secondary { margin-top: 0; min-height: 44px; display: flex; align-items: center; }
@media (min-width: 1024px) and (max-width: 1199.98px) {
  :root { --header-font: 16px; --fixed-font: 14px; }
}
@media (min-width: 1024px) and (max-width: 1039.98px) {
  :root { --header-font: 14px; --fixed-font: 12px; }
}
@media (min-width: 1400px) {
  .footer-site { padding-bottom: 5.75%; }
  .footer-brand { font-size: 17px; }
  .footer-company-inner { padding: 80px 90px; }
}
@media (min-width: 1600px) {
  .footer-site { padding: 46px 20px 46px 100px; }
  .footer-brand { font-size: 20px; }
  .copyright { left: calc(50% - 700px); padding-bottom: 28px; }
}
@media (max-width: 1023.98px) {
  .site-header { font-size: 16px; border-top: 3px solid var(--accent); border-bottom: 0; box-shadow: 0 2.5px 5px rgba(0,0,0,.06); }
  .brand-row { height: 50px; }
  .brand { gap: 10px; }
  .brand-symbol { width: 38px; height: 38px; }
  .brand-wordmark { width: auto; height: 45px; max-height: none; max-width: none; }
  .breadcrumb { font-size: 12px; margin-bottom: 14px; }
  .sidebar { padding-top: 0; }
  .sidebar-inner { display: flex; flex-direction: column; gap: 45px; }
  /* The markup is About, teaser, works, SNS; match the enhanced DOM order (About, SNS, ...) before deferred JS arrives. */
  .sidebar .philosophy-block, .sidebar .side-socials { order: -1; }
  .sidebar .sidebar-inner > .side-block { margin-top: 0; }
  .sidebar .philosophy-block, .sidebar .discovery { box-shadow: 0 0 7px rgba(0,0,0,.1); }
  /* NAVI mobile saying: full-width surface, 18px inset, 50px portrait and 23px gap. */
  .sidebar .philosophy-block { width: 100vw; margin-inline: calc(50% - 50vw); background: #fff; padding: 18px 21.5px; display: grid; grid-template-columns: 50px minmax(0,1fr); gap: 23px; align-items: center; }
  .philosophy-logo { display: block; width: 50px; height: 50px; border: 1px solid #eee; border-radius: 50%; padding: 2px; background: #fff; }
  .philosophy-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .philosophy-content { display: block; min-width: 0; }
  .philosophy-content .side-heading { font-size: 14px; line-height: 18px; letter-spacing: .025em; text-align: center; margin: 0 0 11.25px; }
  .philosophy-content .side-philosophy { font-size: 14px; line-height: 1.5; max-width: none; margin: 0 0 11.25px; }
  /* The CTA closes the block: centered within the text column beside the logo (the copy above stays left-aligned). */
  .philosophy-content .text-link { display: flex; width: fit-content; margin: 1px auto 0; font-size: 12px; line-height: 1.5; }
  .side-heading { font-size: 17px; margin-bottom: 5.5px; }
  .side-block + .side-block { margin-top: 0; }
  .footer-site { display: block; padding: 43px 6% 39.5px; }
  .footer-brand { font-size: 19px; text-align: center; }
  .footer-identity { margin-inline: auto; }
  .footer-nav { display: none; }
  .footer-company { padding: 0; }
  .footer-company-inner { max-width: none; margin: auto; padding: 35px 33.5px; }
  .publisher-logo-link { font-size: 13.5px; width: 10.3333333333em; max-width: 37.2%; }
  .company-detail { margin-top: 13.5px; }
  .company-detail dt { font-size: 13.5px; }
  .company-detail dd { font-size: 12px; }
  .company-contact { font-size: 13.5px; }
  .copyright { position: static; padding: 44px 21.5px 25px; font-size: 11px; text-align: left; }
}
@media (max-width: 640px) {
  .side-block + .side-block { margin-top: 45px; }
}
@media (max-width: 374.98px) {
  .site-header { border-top-width: 2.625px; }
  .menu-toggle { font-size: 14px; }
  .brand-row { height: 43.75px; }
  .brand-symbol { width: 33px; height: 33px; }
  .brand-wordmark { height: 39px; }
}
@media (prefers-reduced-motion: reduce) {
  .article-card:hover img { transform: none; }
  .teaser-image:hover img { transform: none; }
}

/* Native CSS anchors keep the popover attached through browser zoom and nav scrolling. */
.past-nav { position: relative; }
.desktop-nav .nav-trigger { anchor-name: --past-desktop; }
.compact-header .nav-trigger { anchor-name: --past-compact; }
#past-menu-desktop { position-anchor: --past-desktop; }
#past-menu-compact { position-anchor: --past-compact; }
.nav-trigger { position: relative; display: flex; align-items: center; justify-content: center; min-height: 60px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 400; line-height: 1.15; letter-spacing: .05em; white-space: nowrap; cursor: pointer; }
.nav-trigger > span { position: absolute; right: -14px; font-size: 12px; }
.desktop-nav .nav-trigger { min-height: 3.3333333333em; padding: 0; margin: 0 2em; }
.compact-header .nav-trigger { min-height: calc(3.75em - 2px); padding: 0; margin: 0 2em; }
.year-submenu { list-style: none; background: #fff; color: #000; border: 1px solid var(--line); padding: 8px 0; margin: 0; box-shadow: 0 3px 8px rgba(0,0,0,.1); }
.year-submenu[hidden] { display: none; }
.year-submenu[popover] { position: fixed; inset: auto; top: anchor(bottom); left: anchor(left); position-try-fallbacks: flip-inline; min-width: 160px; max-width: calc(100vw - 16px); }
.nav-list .year-submenu a { justify-content: flex-start; min-height: 44px; padding: 10px 18px; margin: 0; font-size: 14px; line-height: 1.5; white-space: nowrap; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .nav-list .year-submenu a:hover { background: #f6f6f6; }
}
.menu-panel .nav-trigger { width: 100%; justify-content: flex-start; min-height: 44px; padding: 4px 0; font-size: 16px; font-weight: 700; line-height: 36px; }
.menu-panel .nav-trigger > span { position: static; margin-left: 12px; }
.menu-panel .year-submenu { border: 0; box-shadow: none; padding: 0 0 8px 18px; }
.menu-panel .year-submenu li { margin-bottom: 0; }
.menu-panel .year-submenu a { font-size: 14px; font-weight: 400; }

/* Same white editorial surface as NAVI's desktop saying, within the existing column. */
@media (min-width: 1024px) {
  .sidebar .philosophy-block, .sidebar .discovery { box-shadow: 0 0 10px rgba(0,0,0,.1); }
  .sidebar .philosophy-block { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 15px 16px; background: #fff; padding: 24px 24px 20px; }
  .philosophy-content { display: contents; }
  .philosophy-content .side-heading { grid-column: 1 / -1; font-size: 18px; line-height: 1.5; text-align: center; margin: 0; }
  .philosophy-content .side-philosophy { grid-column: 1 / -1; font-size: 16px; line-height: 1.5; margin: 0; }
  .philosophy-logo { display: block; grid-row: 3; width: 64px; height: 64px; border: 1px solid #eee; border-radius: 50%; padding: 2px; background: #fff; }
  .philosophy-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .philosophy-content .text-link { grid-column: 2; grid-row: 3; align-self: center; font-size: 14px; line-height: 1.5; }
}
@media (max-width: 1023.98px) {
  .sidebar .philosophy-block { grid-template-columns: 64px minmax(0,1fr); gap: 18px; }
  .philosophy-logo { width: 64px; height: 64px; }
}
/* Tablet portrait: the logo + text group takes the text's natural width and is centered on the full-width surface. */
@media (min-width: 641px) and (max-width: 1023.98px) {
  .sidebar .philosophy-block { grid-template-columns: 64px minmax(0, max-content); justify-content: center; }
}

.discovery { position: relative; min-width: 0; }
.discovery-window { overflow: hidden; aspect-ratio: 1; }
.discovery-track { display: flex; align-items: flex-start; }
.discovery-card { flex: 0 0 100%; min-width: 0; display: block; color: inherit; text-decoration: none; }
.discovery-card:focus-visible { outline-offset: -3px; }
.discovery-image { width: 100%; aspect-ratio: 1; color: var(--muted); font-size: 13px; }
.discovery-image img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
@media (max-width: 1023.98px) { .discovery { width: 100%; align-self: center; } }
/* Discovery is supplementary: phones keep the desktop's 270px display size below the
   teaser; tablet portrait pairs it with the teaser, square at the teaser's ~320px height. */
@media (max-width: 640px) { .sidebar .discovery { max-width: 270px; } }
@media (min-width: 641px) and (max-width: 1023.98px) {
  .sidebar-inner { display: grid; grid-template-columns: auto minmax(0, 320px); justify-content: center; align-items: center; gap: 45px 32px; }
  .sidebar-inner > .side-block:not(.teaser):not(.discovery) { grid-column: 1 / -1; }
  .sidebar .teaser { grid-row: auto; grid-column: 1; }
  .sidebar .discovery { grid-column: 2; }
}

/* Play/pause for the auto-moving works (TOP strip, Sidebar carousel): a small achromatic control just below the component.
   The 40px button is the touch target; the visible chip (::before) and its pause bars / play triangle (::after) are drawn in CSS. */
.motion-toggle { position: absolute; right: 0; top: 100%; z-index: 2; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: #222; opacity: .6; }
.motion-toggle::before { content: ""; position: absolute; inset: 8px; border: 1px solid currentColor; border-radius: 2px; background: #fff; }
.motion-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; box-sizing: border-box; width: 8px; height: 10px; transform: translate(-50%, -50%); border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
/* Stopped by the viewer: filled chip with a play triangle. */
.motion-toggle[data-state="paused"]::before { background: currentColor; }
.motion-toggle[data-state="paused"]::after { width: 0; height: 0; transform: translate(-30%, -50%); border-width: 5px 0 5px 8px; border-style: solid; border-color: transparent transparent transparent #fff; }
.motion-toggle:focus-visible { outline: none; opacity: 1; }
.motion-toggle:focus-visible::before { outline: 3px solid #2275b5; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .motion-toggle:hover { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }

/* NAVI header tool: keyword input and official icon share a black bottom rule. */
.site-search { display: flex; align-items: stretch; font-size: inherit; line-height: 1.15; color: #000; }
.search-header { position: absolute; right: max(2.5vw,calc((100% - 1520px) / 2)); width: min(32.5vw, 520px); margin: 0; }
.search-input { flex: 1 1 auto; min-width: 0; }
.site-search input { appearance: none; display: block; width: 100%; height: 100%; min-width: 0; border: 0; border-bottom: 1px solid #000; border-radius: 0; background: #fff; color: #000; font: inherit; line-height: 1.2; padding: 0 .3em; }
/* Gene-NAVI uses native text-input focus; undo only the shared custom ring here. */
:is(.search-header, .search-mobile) { font-family: -apple-system,BlinkMacSystemFont,"Yu Gothic Medium","游ゴシック Medium","Yu Gothic",YuGothic,"游ゴシック体","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Helvetica Neue",HelveticaNeue,"メイリオ",Meiryo,Arial,"ＭＳ ゴシック",sans-serif; }
:is(.search-header, .search-mobile) input { appearance: auto; display: inline-block; position: relative; vertical-align: middle; }
:is(.search-header, .search-mobile) :is(input, button):focus-visible { outline: revert; outline-offset: revert; }
.site-search input::placeholder { color: #9c9c9c; opacity: 1; }
.search-submit { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font: inherit; line-height: 1; border: 0; border-bottom: 1px solid #000; border-radius: 0; background: transparent; padding: .5em; }
.search-submit img { display: block; width: 1.3333333em; height: auto; transition: opacity .2s linear; }
@media (hover: hover) and (pointer: fine) { .search-submit:hover img { opacity: .6; } }
.search-mobile { display: none; }
#search-status { margin-top: 24px; overflow-wrap: anywhere; }
.site-search.search-page { margin: 0; max-width: 620px; min-height: 44px; }
@media (max-width: 1023.98px) {
  .search-header { display: none; }
  .search-mobile { display: flex; margin: 0 0 16px; font-size: 16px; }
  .site-search input { min-height: 44px; font-size: 16px; }
  .search-submit { min-width: 44px; min-height: 44px; padding: .53125em .1875em .53125em .53125em; }
  .search-submit img { width: 1.375em; }
  .search-mobile input { min-height: 0; }
  .search-mobile .search-submit { min-width: 0; min-height: 0; }
  .search-mobile .search-submit:hover img { opacity: 1; }
}