/*
Theme Name: Kaimin Journal Magazine
Theme URI: https://kaimin-journal.com/
Author: 快眠ジャーナル編集部
Author URI: https://kaimin-journal.com/
Description: 若い読者向けの雑誌感と、WordPress標準の投稿しやすさを両立した快眠ジャーナル専用テーマ。
Version: 1.2.4
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: kaimin-journal
*/

:root {
	--kj-ink: #0d0d0d;
	--kj-muted: #626765;
	--kj-paper: #fbfbf8;
	--kj-cream: #eeeee8;
	--kj-green: #00a47a;
	--kj-mint: #c9ff38;
	--kj-blue: #63d9ff;
	--kj-pink: #ff82ac;
	--kj-line: rgba(13, 13, 13, .16);
	--kj-sans: -apple-system, BlinkMacSystemFont, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	--kj-serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--kj-paper); color: var(--kj-ink); font-family: var(--kj-sans); }
body.admin-bar .site-header { top: 32px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.screen-reader-text { position: absolute; left: -9999px; }
.screen-reader-text:focus { z-index: 100000; top: 10px; left: 10px; padding: 12px; background: #fff; }
.ad-disclosure { padding: 8px 16px; background: var(--kj-ink); color: #c8d4d0; font-size: 10px; line-height: 1.5; letter-spacing: .02em; text-align: center; }

.site-header { position: relative; z-index: 20; width: min(1180px, calc(100% - 48px)); height: 92px; margin: 0 auto; display: flex; align-items: center; gap: 42px; border-bottom: 1px solid var(--kj-line); }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; }
.brand-mark { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--kj-mint); font: 850 13px/1 ui-monospace, monospace; }
.brand-copy strong { display: block; font-size: 17px; letter-spacing: .06em; }
.brand-copy small { display: block; margin-top: 3px; color: var(--kj-muted); font-size: 9px; letter-spacing: .12em; }
.custom-logo-link { display: block; line-height: 0; }
.custom-logo, .default-site-logo { width: 230px; max-width: 25vw; height: 58px; object-fit: contain; object-position: left center; mix-blend-mode: multiply; }
.main-nav .nav-list, .footer-menu { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.main-nav a { font-size: 12px; font-weight: 750; }
.main-nav a:hover, .main-nav .current-menu-item a { color: var(--kj-green); }
.search-form { display: flex; width: 220px; height: 38px; border-bottom: 1px solid var(--kj-ink); }
.search-field { min-width: 0; width: 100%; padding: 7px 4px; border: 0; outline: 0; background: transparent; color: var(--kj-ink); font-size: 10px; }
.search-field::placeholder { color: #8a8e8c; }
.search-submit { padding: 0 3px 0 10px; border: 0; background: transparent; color: var(--kj-ink); font: 850 8px/1 ui-monospace, monospace; letter-spacing: .08em; cursor: pointer; }
.search-submit:hover, .search-submit:focus-visible { color: var(--kj-green); }

.magazine-cover { width: min(1180px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: 185px 1fr; gap: 38px; padding: 34px 0 70px; }
.issue-rail { padding-right: 25px; border-right: 1px solid var(--kj-ink); }
.issue-url { display: block; margin-bottom: 15px; font: 700 7px/1 ui-monospace, monospace; letter-spacing: .08em; }
.issue-number { display: block; margin-left: -6px; font-size: 98px; line-height: .85; letter-spacing: -.1em; }
.issue-rail > b { display: block; margin-top: 13px; font-size: 13px; letter-spacing: .04em; }
.issue-rail > p { margin: 8px 0 25px; font: 700 7px/1.5 ui-monospace, monospace; letter-spacing: .04em; }
.contact-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.contact-sheet img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.8); }
.issue-rail > small { display: block; margin-top: 20px; color: var(--kj-muted); font: 650 7px/1.55 ui-monospace, monospace; }
.cover-main { min-width: 0; }
.cover-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--kj-ink); }
.cover-meta span { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.cover-meta b { font: 800 7px/1.2 ui-monospace, monospace; }
.cover-meta small { color: var(--kj-muted); font: 600 6px/1.35 ui-monospace, monospace; }
.cover-kicker { margin-top: 20px; font-size: 11px; font-weight: 800; text-align: right; }
.cover-kicker span { display: inline-block; margin-right: 7px; padding: 4px 7px; background: var(--kj-pink); color: #fff; transform: rotate(-3deg); }
.cover-main h1 { margin: 6px 0 0; font-size: clamp(66px, 8.5vw, 116px); line-height: .87; letter-spacing: -.11em; font-weight: 950; }
.cover-main h1 > span { color: var(--kj-green); }
.cover-main h1 em { display: block; margin: 16px 0 0 16%; font-family: var(--kj-serif); font-size: .22em; line-height: 1.2; letter-spacing: -.04em; font-style: normal; font-weight: 700; }
.cover-lead { margin: 22px 0 0 22%; font-size: 12px; line-height: 1.75; font-weight: 700; }
.cover-photo-grid { margin-top: 31px; display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 11px; align-items: end; }
.cover-feature { position: relative; display: block; }
.cover-feature img { width: 100%; aspect-ratio: 1.38; object-fit: cover; filter: saturate(.82) contrast(.96); }
.cover-feature.feature-a img { aspect-ratio: 1.18; }
.feature-b, .feature-c { margin-top: 44px; }
.cover-feature b { display: inline-block; margin-top: 6px; color: var(--kj-green); font: 850 9px/1 ui-monospace, monospace; }
.cover-feature span { margin-left: 7px; font-size: 10px; font-weight: 800; }
.cover-feature:hover span { text-decoration: underline; }
.cover-lines { margin-top: 24px; border-top: 3px solid var(--kj-ink); }
.cover-lines a { display: grid; grid-template-columns: 54px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--kj-line); }
.cover-lines b { color: var(--kj-green); font: 850 10px/1.5 ui-monospace, monospace; }
.cover-lines span { font-size: 13px; line-height: 1.4; font-weight: 850; }
.cover-action { margin-top: 13px; display: flex; align-items: center; justify-content: flex-end; gap: 15px; }
.cover-action p { margin: 0; font-size: 10px; font-weight: 700; }
.cover-action p span { padding: 3px 6px; background: var(--kj-blue); font: 800 7px/1 ui-monospace, monospace; }
.cover-action > a { display: flex; gap: 22px; padding: 11px 14px; background: var(--kj-ink); color: #fff; font-size: 10px; font-weight: 800; }

.quick-paths { width: min(1180px, calc(100% - 48px)); margin: 0 auto 90px; display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); border-top: 1px solid var(--kj-ink); border-bottom: 1px solid var(--kj-ink); }
.quick-paths p, .quick-paths a { margin: 0; padding: 17px 12px; font-size: 11px; font-weight: 800; }
.quick-paths p { background: var(--kj-ink); color: #fff; }
.quick-paths a { border-left: 1px solid var(--kj-line); }
.quick-paths span { margin-right: 8px; color: var(--kj-green); font: 800 8px/1 ui-monospace, monospace; }
.quick-paths a:hover { background: var(--kj-mint); }

.people-story { padding: 90px max(24px, calc((100% - 1180px) / 2)); background: #fff; }
.people-story-head { display: grid; grid-template-columns: .8fr 1.4fr 1fr; gap: 30px; align-items: end; margin-bottom: 42px; }
.people-story-head > span { align-self: start; color: var(--kj-green); font: 800 8px/1 ui-monospace, monospace; letter-spacing: .12em; }
.people-story h2 { margin: 0; font-size: clamp(46px, 5vw, 74px); line-height: .95; letter-spacing: -.08em; }
.people-story h2 b { color: var(--kj-green); }
.people-story-head p { margin: 0; color: var(--kj-muted); font-size: 11px; line-height: 1.9; }
.people-grid { display: grid; grid-template-columns: 1.5fr .85fr .85fr; grid-template-rows: 250px 250px; gap: 8px; }
.people-shot { position: relative; min-width: 0; margin: 0; overflow: hidden; }
.people-shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82); transition: transform .5s; }
.people-shot:hover img { transform: scale(1.025); }
.people-shot figcaption { position: absolute; right: 7px; bottom: 7px; padding: 6px 8px; background: var(--kj-paper); font: 800 7px/1 ui-monospace, monospace; }
.people-shot figcaption b { margin-right: 5px; color: var(--kj-green); }
.shot-1 { grid-row: 1 / 3; }
.shot-2 { grid-column: 2 / 4; }

.diagnosis-section { padding: 110px max(24px, calc((100% - 1180px) / 2)); display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; background: var(--kj-cream); }
.diagnosis-section .section-kicker { font-size: 13px; letter-spacing: .18em; }
.diagnosis-title { font-size: clamp(48px, 4.8vw, 70px) !important; line-height: .98 !important; letter-spacing: -.075em !important; }
.diagnosis-title span { color: var(--kj-green); }
.section-kicker { margin: 0 0 18px; color: var(--kj-green); font: 850 9px/1 ui-monospace, monospace; letter-spacing: .14em; }
.section-intro h2, .section-heading-row h2, .comparison-title h2, .policy-heading h2, .newsletter h2 { margin: 0; font-size: clamp(38px, 4vw, 58px); line-height: 1.08; letter-spacing: -.07em; }
.section-intro > p:last-child { margin: 28px 0 0; max-width: 37em; color: var(--kj-muted); font-size: 16px; line-height: 1.85; }
.diagnosis-card { min-height: 420px; padding: 42px; border: 3px solid var(--kj-ink); background: #fff; box-shadow: 10px 10px 0 var(--kj-mint); }
.diagnosis-progress { display: flex; align-items: center; gap: 18px; }
.diagnosis-progress span { white-space: nowrap; font: 800 12px/1 ui-monospace, monospace; letter-spacing: .05em; }
.diagnosis-progress i { flex: 1; height: 3px; background: var(--kj-cream); overflow: hidden; }
.diagnosis-progress em { display: block; width: 0; height: 100%; background: var(--kj-green); transition: width .35s; }
.diagnosis-number { margin: 48px 0 10px; color: var(--kj-green); font: 900 14px/1 ui-monospace, monospace; }
.diagnosis-card h3 { margin: 0 0 28px; font-size: 34px; letter-spacing: -.05em; }
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.answer-grid button { min-height: 68px; padding: 16px 18px; border: 1px solid var(--kj-ink); background: #fff; text-align: left; font-size: 16px; font-weight: 750; cursor: pointer; }
.answer-grid button:hover, .answer-grid button:focus-visible { background: var(--kj-mint); }
.diagnosis-result { margin-top: 54px; }
.diagnosis-result[hidden] { display: none; }
.diagnosis-result > span { color: var(--kj-green); font: 850 12px/1 ui-monospace, monospace; letter-spacing: .12em; }
.diagnosis-result p { color: var(--kj-muted); font-size: 16px; line-height: 1.85; }
.diagnosis-result a { display: inline-block; margin-top: 16px; padding: 15px 20px; background: var(--kj-ink); color: #fff; font-size: 15px; font-weight: 800; }

.stories-section { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 110px 0; }
.section-heading-row { display: grid; grid-template-columns: 1.3fr .7fr; gap: 60px; align-items: end; margin-bottom: 42px; }
.section-heading-row > p { margin: 0; color: var(--kj-muted); font-size: 11px; line-height: 1.8; }
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px 15px; }
.story-card { min-width: 0; }
.story-card-featured { grid-column: span 2; display: grid; grid-template-columns: 1.25fr .75fr; gap: 23px; }
.story-card-featured + .story-card .story-image img { aspect-ratio: .84; }
.story-image { display: block; overflow: hidden; background: var(--kj-cream); }
.story-image img { width: 100%; aspect-ratio: 1.35; object-fit: cover; filter: saturate(.8); transition: transform .4s; }
.story-image:hover img { transform: scale(1.025); }
.story-copy { padding-top: 10px; border-top: 2px solid var(--kj-ink); }
.story-copy > span, .archive-card span { color: var(--kj-green); font: 800 8px/1 ui-monospace, monospace; }
.story-copy h3 { margin: 9px 0 8px; font-size: 20px; line-height: 1.35; letter-spacing: -.04em; }
.story-card-featured h3 { font-size: 31px; }
.story-copy p, .archive-card p { margin: 0; color: var(--kj-muted); font-size: 10px; line-height: 1.8; }
.read-more { display: inline-block; margin-top: 15px; font-size: 9px; font-weight: 850; border-bottom: 2px solid var(--kj-mint); }
.empty-stories { padding: 60px; border: 2px solid var(--kj-ink); text-align: center; }
.empty-stories h3 { margin-top: 0; }

.editorial-break { position: relative; min-height: 620px; padding: 70px max(24px, calc((100% - 1180px) / 2)); display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.editorial-break > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.editorial-break::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,18,15,.8), rgba(6,18,15,.08)); }
.editorial-break-copy { position: relative; z-index: 1; max-width: 680px; }
.editorial-break-copy > span { color: var(--kj-mint); font: 800 9px/1 ui-monospace, monospace; letter-spacing: .12em; }
.editorial-break h2 { margin: 13px 0 18px; font-size: clamp(48px, 6vw, 82px); line-height: 1; letter-spacing: -.08em; }
.editorial-break p { margin: 0; font-size: 11px; font-weight: 800; }
.editorial-break > small { position: absolute; z-index: 1; right: max(24px, calc((100% - 1180px) / 2)); bottom: 73px; font: 700 7px/1 ui-monospace, monospace; writing-mode: vertical-rl; }

.comparison-section { padding: 110px max(24px, calc((100% - 1180px) / 2)); background: var(--kj-paper); }
.comparison-title { display: grid; grid-template-columns: .45fr 1.25fr .7fr; gap: 35px; align-items: start; }
.comparison-title > p:last-child { margin: 5px 0 0; color: var(--kj-muted); font-size: 11px; line-height: 1.8; }
.comparison-grid { margin-top: 55px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.comparison-card { padding: 27px; border: 1px solid var(--kj-ink); background: #fff; }
.comparison-card > span { color: var(--kj-green); font: 850 8px/1 ui-monospace, monospace; letter-spacing: .12em; }
.comparison-card h3 { margin: 28px 0 10px; font-size: 24px; letter-spacing: -.04em; }
.comparison-card p { color: var(--kj-muted); font-size: 11px; line-height: 1.7; }
.comparison-card ul { margin: 23px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--kj-ink); }
.comparison-card li { padding: 10px 0; border-bottom: 1px solid var(--kj-line); font-size: 10px; font-weight: 750; }
.comparison-card li::before { content: "+"; margin-right: 9px; color: var(--kj-green); }

.policy-section { padding: 110px max(24px, calc((100% - 1180px) / 2)); border-top: 1px solid var(--kj-line); background: #fff; }
.policy-heading { margin-bottom: 45px; }
.policy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.policy-grid > div { padding-top: 20px; border-top: 2px solid var(--kj-ink); }
.policy-grid span { color: var(--kj-green); font: 800 9px/1 ui-monospace, monospace; }
.policy-grid h3 { margin: 18px 0 10px; font-size: 16px; }
.policy-grid p { margin: 0; color: var(--kj-muted); font-size: 10px; line-height: 1.9; }

.newsletter { padding: 80px max(24px, calc((100% - 1180px) / 2)); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; background: var(--kj-mint); }
.newsletter-badge { display: inline-block; margin-bottom: 18px; padding: 5px 8px; border-radius: 999px; background: var(--kj-ink); color: var(--kj-mint); font: 750 8px/1 ui-monospace, monospace; }
.newsletter > div:last-child p { margin: 0 0 18px; color: #30423c; font-size: 12px; line-height: 1.9; }
.newsletter > div:last-child span { font-size: 10px; font-weight: 800; }

.site-footer { padding: 55px max(24px, calc((100% - 1180px) / 2)) 30px; background: #0a1814; color: #fff; }
.footer-brand { display: flex; align-items: center; }
.footer-brand img { width: 250px; max-width: 60vw; height: 72px; object-fit: contain; object-position: left center; filter: invert(1); mix-blend-mode: screen; }
.footer-links { margin: 34px 0 28px; padding: 21px 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); color: #bbc7c3; font-size: 10px; }
.footer-links > a { margin-right: 24px; }
.footer-menu { flex-wrap: wrap; }
.site-footer > p { max-width: 650px; color: #83958e; font-size: 9px; line-height: 1.7; }
.site-footer > small { display: block; margin-top: 24px; color: #62746d; font-size: 8px; }

.archive-hero { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 85px 8% 60px; border-bottom: 3px solid var(--kj-ink); }
.archive-hero > span, .standard-page header > span { color: var(--kj-green); font: 850 9px/1 ui-monospace, monospace; letter-spacing: .14em; }
.archive-hero h1, .standard-page h1 { margin: 12px 0 0; font-size: clamp(50px, 7vw, 92px); line-height: 1; letter-spacing: -.09em; }
.archive-hero p, .archive-description { max-width: 650px; margin: 22px 0 0; color: var(--kj-muted); font-size: 12px; line-height: 1.8; }
.archive-content { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 60px 0 110px; }
.archive-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 55px 20px; }
.archive-card-image { display: block; overflow: hidden; }
.archive-card-image img { width: 100%; aspect-ratio: 1.55; object-fit: cover; filter: saturate(.8); }
.archive-card > div { padding-top: 13px; border-top: 2px solid var(--kj-ink); }
.archive-card h2 { margin: 10px 0; font-size: 25px; line-height: 1.3; letter-spacing: -.04em; }
.pagination { margin-top: 55px; }
.nav-links { display: flex; gap: 7px; }
.page-numbers { padding: 9px 12px; border: 1px solid var(--kj-ink); font-size: 10px; font-weight: 800; }
.page-numbers.current { background: var(--kj-ink); color: #fff; }
.no-results { padding: 70px 0; text-align: center; }

.single-article { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.single-hero { padding: 70px 8% 40px; }
.single-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.single-meta span { padding: 5px 8px; background: var(--kj-mint); font: 850 8px/1 ui-monospace, monospace; }
.single-meta b { color: var(--kj-green); font: 850 9px/1 ui-monospace, monospace; }
.single-hero h1 { max-width: 950px; margin: 0; font-size: clamp(48px, 7vw, 96px); line-height: .98; letter-spacing: -.085em; }
.single-hero > p { max-width: 720px; margin: 24px 0; font-size: 15px; line-height: 1.8; font-weight: 650; }
.single-byline { padding-top: 12px; border-top: 1px solid var(--kj-ink); font: 720 8px/1 ui-monospace, monospace; }
.single-byline span { float: right; }
.single-lead-image { margin: 0; }
.single-lead-image img { width: 100%; max-height: 690px; object-fit: cover; }
.single-layout { display: grid; grid-template-columns: 210px 1fr; gap: 80px; padding: 70px 8% 110px; }
.article-aside { align-self: start; position: sticky; top: 25px; padding-top: 12px; border-top: 3px solid var(--kj-ink); }
.article-aside > strong { display: block; margin-bottom: 15px; font: 850 8px/1 ui-monospace, monospace; letter-spacing: .12em; }
.article-aside > span { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 9px 0; border-top: 1px solid var(--kj-line); font-size: 9px; line-height: 1.4; }
.article-aside b { color: var(--kj-green); font: 800 8px/1 ui-monospace, monospace; }
.article-body { max-width: 720px; }
.article-body p { margin: 0 0 30px; font-size: 16px; line-height: 2.1; }
.article-body > p:first-child::first-letter { float: left; margin: 8px 10px 0 0; padding: 4px 9px; background: var(--kj-mint); font-size: 48px; line-height: .9; font-weight: 900; }
.article-body h2 { margin: 55px 0 22px; padding-bottom: 11px; border-bottom: 3px solid var(--kj-ink); font-size: 31px; letter-spacing: -.05em; }
.article-body h3 { margin: 42px 0 16px; font-size: 23px; letter-spacing: -.04em; }
.article-body ul, .article-body ol { margin: 25px 0 35px; padding-left: 1.4em; line-height: 2; }
.article-body blockquote { margin: 40px 0; padding: 25px 30px; border-left: 6px solid var(--kj-mint); background: var(--kj-cream); }
.article-body a { color: var(--kj-green); text-decoration: underline; }
.article-body .alignwide { width: min(920px, 100vw - 48px); max-width: none; margin-left: max(-100px, calc((720px - min(920px, 100vw - 48px)) / 2)); }
.article-body figcaption { color: var(--kj-muted); font-size: 9px; }
.article-notice { margin-top: 60px; padding: 16px; background: var(--kj-cream); color: var(--kj-muted); font-size: 9px; line-height: 1.8; }
.post-taxonomy { margin-top: 20px; font-size: 9px; }
.post-taxonomy span { margin-left: 15px; }
.post-navigation { width: min(980px, calc(100% - 48px)); margin: 0 auto 90px; display: flex; justify-content: space-between; gap: 30px; }
.post-navigation a { width: 48%; padding: 17px 0; border-top: 1px solid var(--kj-ink); font-size: 11px; font-weight: 800; }
.related-section { padding: 90px max(24px, calc((100% - 1180px) / 2)); background: var(--kj-ink); color: #fff; }
.related-section > span { color: var(--kj-mint); font: 800 8px/1 ui-monospace, monospace; letter-spacing: .12em; }
.related-section h2 { margin: 8px 0 30px; font-size: 42px; letter-spacing: -.06em; }
.related-section > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.related-section img { width: 100%; aspect-ratio: 1.45; object-fit: cover; filter: saturate(.75); }
.related-section a > b { display: inline-block; margin-top: 8px; color: var(--kj-mint); font: 800 8px/1 ui-monospace, monospace; }
.related-section a > strong { display: block; margin-top: 5px; font-size: 13px; line-height: 1.5; }

.standard-page { width: min(980px, calc(100% - 48px)); margin: 0 auto; padding: 80px 0 120px; }
.standard-page header { padding-bottom: 45px; border-bottom: 3px solid var(--kj-ink); }
.standard-content { max-width: 720px; margin: 55px auto 0; font-size: 15px; line-height: 2; }
.standard-content h2 { margin-top: 50px; }
.error-page { min-height: 70vh; width: min(980px, calc(100% - 48px)); margin: 0 auto; display: grid; align-content: center; justify-items: start; }
.error-page > span { color: var(--kj-green); font: 850 9px/1 ui-monospace, monospace; }
.error-page h1 { margin: 15px 0; font-size: clamp(56px, 8vw, 100px); line-height: .95; letter-spacing: -.08em; }
.error-page p { color: var(--kj-muted); }
.error-page a { margin-top: 20px; padding: 13px 16px; background: var(--kj-ink); color: #fff; font-weight: 800; }
.comments-area { max-width: 720px; margin: 50px auto; }

@media (max-width: 900px) {
	body.admin-bar .site-header { top: 46px; }
	.site-header { width: min(100% - 30px, 1180px); height: 76px; }
	.main-nav, .brand-copy small { display: none; }
	.custom-logo, .default-site-logo { max-width: none; width: 210px; }
	.search-form { width: min(220px, 34vw); }
	.magazine-cover { width: min(100% - 30px, 1180px); grid-template-columns: 130px 1fr; gap: 22px; }
	.issue-number { font-size: 70px; }
	.cover-main h1 { font-size: clamp(56px, 10vw, 80px); }
	.people-story-head { grid-template-columns: 1fr; }
	.people-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 260px); }
	.shot-1, .shot-2 { grid-column: auto; grid-row: auto; }
	.shot-1 { grid-column: 1 / -1; }
	.quick-paths { width: min(100% - 30px, 1180px); grid-template-columns: 1fr 1fr; }
	.quick-paths p { grid-column: 1 / -1; }
	.diagnosis-section { grid-template-columns: 1fr; gap: 45px; }
	.story-grid { grid-template-columns: 1fr 1fr; }
	.story-card-featured { grid-column: 1 / -1; }
	.comparison-title { grid-template-columns: 1fr; }
	.comparison-grid { grid-template-columns: 1fr; }
	.policy-grid { grid-template-columns: 1fr 1fr; }
	.newsletter { grid-template-columns: 1fr; gap: 35px; }
	.single-layout { grid-template-columns: 160px 1fr; gap: 40px; padding-left: 2%; padding-right: 2%; }
}

@media (max-width: 560px) {
	.ad-disclosure { font-size: 8px; }
	.site-header { gap: 15px; }
	.custom-logo, .default-site-logo { width: min(180px, 49vw); height: 48px; }
	.search-form { width: min(145px, 40vw); height: 34px; }
	.search-field { font-size: 9px; }
	.search-submit { font-size: 0; padding-left: 6px; }
	.search-submit::after { content: "⌕"; font-size: 18px; }
	.magazine-cover { display: block; padding-top: 22px; }
	.issue-rail { display: grid; grid-template-columns: 78px 1fr; column-gap: 13px; padding: 0 0 14px; margin-bottom: 20px; border-right: 0; border-bottom: 1px solid var(--kj-ink); }
	.issue-url { grid-column: 1 / -1; }
	.issue-number { grid-row: span 2; font-size: 62px; }
	.issue-rail > b { margin-top: 5px; }
	.issue-rail > p { margin: 4px 0; }
	.contact-sheet, .issue-rail > small, .cover-meta { display: none; }
	.cover-kicker { margin-top: 0; }
	.cover-main h1 { font-size: 52px; }
	.cover-main h1 em { margin: 12px 0 0; font-size: 14px; }
	.cover-lead { margin-left: 0; font-size: 10px; }
	.cover-photo-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
	.feature-a { grid-column: 1 / -1; }
	.feature-b, .feature-c { margin-top: 0; }
	.cover-lines a { grid-template-columns: 44px 1fr; }
	.cover-lines span { font-size: 11px; }
	.cover-action { align-items: stretch; gap: 8px; }
	.quick-paths { grid-template-columns: 1fr; margin-bottom: 55px; }
	.quick-paths p { grid-column: auto; }
	.quick-paths a { border-left: 0; border-top: 1px solid var(--kj-line); }
	.people-story, .diagnosis-section, .comparison-section, .policy-section, .newsletter, .related-section { padding-left: 15px; padding-right: 15px; }
	.people-story { padding-top: 65px; padding-bottom: 65px; }
	.people-story h2 { font-size: 46px; }
	.people-grid { grid-template-rows: 250px 190px 190px; gap: 5px; }
	.diagnosis-section { padding-top: 75px; padding-bottom: 75px; }
	.diagnosis-card { min-height: 0; padding: 22px; box-shadow: 6px 6px 0 var(--kj-mint); }
	.answer-grid { grid-template-columns: 1fr; }
	.stories-section { width: min(100% - 30px, 1180px); padding: 80px 0; }
	.section-heading-row { grid-template-columns: 1fr; gap: 20px; }
	.story-grid { grid-template-columns: 1fr; }
	.story-card-featured { display: block; }
	.story-card-featured h3 { font-size: 24px; }
	.editorial-break { min-height: 500px; padding-left: 15px; padding-right: 15px; }
	.editorial-break::after { background: linear-gradient(0deg, rgba(6,18,15,.86), rgba(6,18,15,.1)); }
	.editorial-break > small { right: 15px; bottom: 70px; }
	.policy-grid { grid-template-columns: 1fr; }
	.archive-hero, .archive-content, .single-article { width: min(100% - 30px, 1180px); }
	.archive-hero { padding: 55px 0 35px; }
	.archive-grid { grid-template-columns: 1fr; }
	.single-hero { padding: 45px 0 28px; }
	.single-hero h1 { font-size: 48px; }
	.single-layout { grid-template-columns: 1fr; gap: 35px; padding: 48px 0 80px; }
	.article-aside { position: static; }
	.article-body p { font-size: 14px; }
	.article-body .alignwide { width: 100%; margin-left: 0; }
	.related-section > div { grid-template-columns: 1fr; }
	.post-navigation { width: min(100% - 30px, 980px); flex-direction: column; }
	.post-navigation a { width: 100%; }
}

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


/* Magazine cover refinement — v1.1.0 */
.magazine-cover {
	width: min(1060px, calc(100% - 48px));
	grid-template-columns: 158px minmax(0, 1fr);
	gap: 28px;
	padding: 28px 0 54px;
}
.issue-rail { padding-right: 21px; }
.issue-url { margin-bottom: 14px; font-size: 7px; letter-spacing: .02em; }
.issue-number { margin-left: -4px; font-size: 112px; line-height: .78; letter-spacing: -.11em; }
.issue-rail > b { margin-top: 18px; font-size: 14px; }
.issue-rail > p { margin: 8px 0 21px; }
.cover-meta { gap: 28px; padding-bottom: 11px; }
.cover-title-row {
	position: relative;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 56px;
	gap: 12px;
	align-items: center;
	margin-top: 13px;
}
.cover-title-copy { min-width: 0; }
.cover-person { display: block; align-self: end; text-align: center; }
.cover-person img { width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; object-fit: cover; filter: saturate(.78) contrast(1.02); }
.cover-person small { display: block; margin-top: 4px; font: 800 7px/1.1 ui-monospace, monospace; }
.cover-kicker { margin: 0 0 3px; font-size: 10px; }
.cover-main h1 { display: flex; align-items: baseline; gap: .14em; margin: 0; font-size: clamp(45px, 5.4vw, 72px); line-height: .92; letter-spacing: -.09em; white-space: nowrap; }
.cover-main h1 em { display: inline; margin: 0; font-family: var(--kj-serif); font-size: .34em; letter-spacing: -.05em; white-space: nowrap; }
.cover-lead { margin: 9px 0 0 80px; font-size: 11px; line-height: 1.55; }
.cover-photo-grid { margin-top: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 10px; align-items: start; }
.cover-feature, .feature-a, .feature-b, .feature-c { margin-top: 0; }
.cover-feature img, .cover-feature.feature-a img { aspect-ratio: 1.6; }
.cover-feature b { margin-top: 5px; font-size: 8px; }
.cover-feature span { margin-left: 4px; font-size: 8px; }
.cover-lines { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin-top: 19px; border-top-width: 2px; }
.cover-lines a { grid-template-columns: 39px 1fr; gap: 3px; padding: 6px 0; }
.cover-lines a:last-child { grid-column: 1 / -1; }
.cover-lines b { font-size: 9px; }
.cover-lines span { font-size: 11px; line-height: 1.25; }
.cover-action { margin-top: 10px; }
.cover-action p { font-size: 9px; }

@media (max-width: 900px) {
	.magazine-cover { width: min(100% - 30px, 1060px); grid-template-columns: 120px minmax(0, 1fr); gap: 20px; }
	.issue-number { font-size: 78px; }
	.cover-title-row { grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; }
	.cover-person img { width: 40px; height: 40px; }
	.cover-main h1 { font-size: clamp(38px, 6.6vw, 58px); }
	.cover-lead { margin-left: 58px; }
}

@media (max-width: 560px) {
	.magazine-cover { display: block; padding-top: 18px; }
	.issue-rail { grid-template-columns: 68px 1fr; }
	.issue-number { font-size: 58px; }
	.cover-title-row { grid-template-columns: 34px minmax(0, 1fr) 34px; margin-top: 4px; }
	.cover-person img { width: 33px; height: 33px; }
	.cover-person small { font-size: 6px; }
	.cover-kicker { text-align: left; font-size: 8px; }
	.cover-main h1 { display: block; font-size: clamp(39px, 12vw, 54px); white-space: normal; }
	.cover-main h1 em { display: block; margin-top: 8px; font-size: 14px; }
	.cover-lead { margin: 13px 0 0; font-size: 10px; }
	.cover-photo-grid { grid-template-columns: 1fr 1fr; gap: 13px 8px; }
	.cover-lines { display: block; }
	.cover-lines a:last-child { grid-column: auto; }
	.cover-action { display: grid; grid-template-columns: 1fr auto; }
}


/* Readable comparison tables — v1.1.1 */
.article-body .comparison-table-wrap {
	position: relative;
	margin: 24px 0 36px;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	border: 1px solid var(--kj-ink);
	background: #fff;
	box-shadow: 6px 6px 0 var(--kj-mint);
	scrollbar-color: var(--kj-green) var(--kj-cream);
	scrollbar-width: thin;
}
.article-body .comparison-table {
	width: 100%;
	min-width: 660px;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background: #fff;
	font-size: 13px;
	line-height: 1.5;
}
.article-body .comparison-table th,
.article-body .comparison-table td {
	padding: 12px 14px;
	border-right: 1px solid rgba(13,13,13,.18);
	border-bottom: 1px solid rgba(13,13,13,.2);
	text-align: left;
	vertical-align: top;
}
.article-body .comparison-table th:last-child,
.article-body .comparison-table td:last-child { border-right: 0; }
.article-body .comparison-table tbody tr:last-child td { border-bottom: 0; }
.article-body .comparison-table thead th {
	position: sticky;
	top: 0;
	z-index: 3;
	background: var(--kj-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 850;
	letter-spacing: .03em;
	white-space: nowrap;
}
.article-body .comparison-table tbody tr:nth-child(even) td { background: #f2f2ed; }
.article-body .comparison-table tbody tr:hover td { background: #e7fff5; }
.article-body .product-table { min-width: 820px; }
.article-body .product-table th:first-child,
.article-body .product-table td:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	width: 54px;
	min-width: 54px;
	text-align: center;
	font-weight: 900;
}
.article-body .product-table thead th:first-child {
	z-index: 4;
	background: var(--kj-ink);
}
.article-body .product-table tbody tr:nth-child(odd) td:first-child { background: #fff; }
.article-body .product-table tbody tr:nth-child(even) td:first-child { background: #f2f2ed; }
.article-body .product-table td:nth-child(2) {
	min-width: 230px;
	font-weight: 800;
}
.article-body .product-table td:nth-child(3) { min-width: 205px; }
.article-body .product-table td:nth-child(4) { min-width: 125px; white-space: nowrap; }
.article-body .product-table td:last-child { min-width: 105px; white-space: nowrap; }
.article-body .product-table td:last-child strong {
	display: inline-block;
	padding: 3px 7px;
	background: var(--kj-mint);
	font-size: 16px;
	line-height: 1;
}
.article-body .table-scroll-hint {
	display: none;
	margin: 18px 0 8px;
	color: var(--kj-green);
	font: 800 10px/1.4 ui-monospace, monospace;
	letter-spacing: .02em;
}
@media (max-width: 700px) {
	.article-body .table-scroll-hint { display: block; }
	.article-body .comparison-table-wrap {
		margin-top: 8px;
		box-shadow: 4px 4px 0 var(--kj-mint);
	}
	.article-body .comparison-table { font-size: 12px; }
	.article-body .comparison-table th,
	.article-body .comparison-table td { padding: 10px 11px; }
	.article-body .comparison-table thead th { font-size: 10px; }
	.article-body .product-table { min-width: 790px; }
}


/* Homepage feature carousel + Nintendo-inspired topics — 1.2.0 */
.feature-slider {
	position: relative;
	height: clamp(390px, 48vw, 610px);
	margin: 24px 0 30px;
	overflow: hidden;
	background: #0b1714;
	isolation: isolate;
}

.feature-slider-track,
.feature-slide,
.feature-slide > a {
	display: block;
	width: 100%;
	height: 100%;
}

.feature-slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	transform: scale(1.025);
	pointer-events: none;
	transition: opacity .65s ease, transform 1.1s ease;
}

.feature-slide.is-active {
	z-index: 1;
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.feature-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.feature-slide-shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(3, 14, 11, .86) 0%, rgba(3, 14, 11, .48) 48%, rgba(3, 14, 11, .05) 78%),
		linear-gradient(0deg, rgba(3, 14, 11, .64), transparent 52%);
}

.feature-slide-copy {
	position: absolute;
	z-index: 2;
	left: clamp(24px, 5vw, 72px);
	bottom: clamp(66px, 9vw, 108px);
	width: min(720px, 72%);
	color: #fff;
}

.feature-slide-copy small {
	display: block;
	margin-bottom: 12px;
	font: 800 12px/1.4 Arial, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.feature-slide-copy strong {
	display: block;
	font-size: clamp(30px, 4.4vw, 62px);
	line-height: 1.12;
	letter-spacing: -.045em;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .22);
}

.feature-slide-copy > b {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding-bottom: 5px;
	border-bottom: 2px solid #fff;
	font-size: 14px;
	letter-spacing: .04em;
}

.feature-slide-copy > b i {
	font-style: normal;
	font-size: 18px;
}

.feature-slider-controls {
	position: absolute;
	z-index: 4;
	left: 50%;
	bottom: 20px;
	display: flex;
	align-items: center;
	padding: 0;
	transform: translateX(-50%);
}

.feature-slider-controls button {
	display: grid;
	place-items: center;
	margin: 0;
	border: 0;
	color: #fff;
	background: transparent;
	cursor: pointer;
	font: inherit;
}

.feature-dots {
	display: flex;
	align-items: center;
	gap: 10px;
}

.feature-dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .72);
	border-radius: 50%;
	background: rgba(255, 255, 255, .38);
	transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.feature-dots button:hover,
.feature-dots button:focus-visible {
	background: #fff;
	outline: none;
	transform: scale(1.15);
}

.feature-dots button.is-active {
	background: var(--kj-mint);
	box-shadow: 0 0 0 3px rgba(155, 255, 213, .24);
	transform: scale(1.25);
}

.topics-section {
	width: min(1180px, calc(100% - 40px));
	margin: 72px auto 88px;
}

.topics-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 30px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--kj-line);
}

.topics-heading .section-kicker {
	margin: 0 0 3px;
	color: var(--kj-green);
	font: 900 13px/1 Arial, sans-serif;
	letter-spacing: .16em;
}

.topics-heading h2 {
	margin: 0;
	font-size: clamp(38px, 5vw, 64px);
	line-height: 1;
	letter-spacing: -.06em;
}

.topics-heading > p {
	max-width: 430px;
	margin: 0;
	color: var(--kj-muted);
	font-size: 14px;
	line-height: 1.8;
}

.topics-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 38px 24px;
}

.topic-card a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.topic-image {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #e8eae4;
}

.topic-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s ease;
}

.topic-card a:hover .topic-image img,
.topic-card a:focus-visible .topic-image img {
	transform: scale(1.035);
}

.topic-card a:focus-visible {
	outline: 3px solid var(--kj-green);
	outline-offset: 5px;
}

.topic-copy {
	display: block;
	padding-top: 15px;
}

.topic-meta {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 9px;
	font: 700 11px/1.2 Arial, sans-serif;
	letter-spacing: .05em;
	color: var(--kj-muted);
}

.topic-meta b {
	padding: 4px 7px 3px;
	color: #fff;
	background: #e60012;
	font-size: 10px;
	letter-spacing: .08em;
}

.topic-meta em {
	margin-left: auto;
	font-style: normal;
	color: var(--kj-green);
}

.topic-copy > strong {
	display: block;
	font-size: clamp(18px, 1.8vw, 23px);
	line-height: 1.48;
	letter-spacing: -.025em;
}

.topics-more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(330px, 100%);
	margin: 40px 0 0 auto;
	padding: 16px 4px;
	border-top: 1px solid var(--kj-ink);
	border-bottom: 1px solid var(--kj-ink);
	color: inherit;
	font-weight: 800;
	text-decoration: none;
}

.topics-more span {
	font-size: 22px;
	transition: transform .2s ease;
}

.topics-more:hover span,
.topics-more:focus-visible span {
	transform: translateX(5px);
}

@media (max-width: 860px) {
	.feature-slider {
		height: clamp(390px, 66vw, 520px);
	}

	.feature-slide-copy {
		width: min(650px, 82%);
	}

	.topics-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.feature-slider {
		height: 440px;
		margin: 18px -18px 24px;
	}

	.feature-slide-shade {
		background: linear-gradient(0deg, rgba(3, 14, 11, .88) 0%, rgba(3, 14, 11, .25) 74%, rgba(3, 14, 11, .06) 100%);
	}

	.feature-slide-copy {
		left: 22px;
		bottom: 86px;
		width: calc(100% - 44px);
	}

	.feature-slide-copy small {
		margin-bottom: 8px;
		font-size: 10px;
	}

	.feature-slide-copy strong {
		font-size: clamp(28px, 9vw, 40px);
	}

	.feature-slide-copy > b {
		margin-top: 18px;
	}

	.feature-slider-controls {
		bottom: 14px;
		padding: 0;
	}

	.topics-section {
		width: min(100% - 32px, 1180px);
		margin: 54px auto 66px;
	}

	.topics-heading {
		display: block;
		margin-bottom: 22px;
	}

	.topics-heading > p {
		margin-top: 14px;
	}

	.topics-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.topic-copy > strong {
		font-size: 20px;
	}

	.topics-more {
		margin-top: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.feature-slide,
	.topic-image img,
	.feature-dots button,
	.topics-more span {
		transition: none;
	}
}
