/*
 * SIGNAL design — ported from implementation/site/homepage-concepts/
 * (concepts.css + journey.css, effective values only; archived concept styles removed).
 * Section order follows the page: base → header → hero → sections → pages → curtain → footer.
 */

:root {
	--cs-bg: #151714;
	--cs-bg-deep: #11130f;
	--cs-bg-raised: #20231d;
	--cs-text: #f1ecdf;
	--cs-paper: #f1ecdf;
	--cs-cream: #e8e0ce;
	--cs-light: #f4f0e8;
	--cs-ink: #191a18;
	--cs-brand: #e05c00;
	--cs-orange: #d65a2d;
	--cs-orange-text: #f27a44;
	--cs-orange-hot: #e8703a;
	--cs-orange-deep: #a13b11;
	--cs-action: #bc4c00;
	--cs-muted: #b8b9ad;
	--cs-font-jp: 'Noto Sans JP', sans-serif;
	--cs-font-display: 'Barlow Condensed', sans-serif;
	--cs-font-logo: 'Orbitron', sans-serif;
	--cs-font-mono: monospace;
	color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Smooth scrolling only after load (signal.js adds .cs-smooth), so deep links jump at once. */
html.cs-smooth { scroll-behavior: smooth; }
body { margin: 0; background: var(--cs-bg); color: var(--cs-text); font-family: var(--cs-font-jp); }
button, input, a { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #e47b49; outline-offset: 5px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p { margin: 0; }
/* Break Japanese headings between phrases where supported (Chrome/Edge); others fall back to normal wrapping. */
h1, h2, h3 { word-break: auto-phrase; overflow-wrap: anywhere; }
p { line-height: 1.9; }
[hidden] { display: none !important; }

.signal { background: var(--cs-bg); }
@media (min-width: 1500px) { .signal { max-width: 1700px; margin: auto; } }

.eyebrow { font: 11px var(--cs-font-mono); letter-spacing: 2px; text-transform: uppercase; }
.orange { color: var(--cs-orange-text); }
/* On cream/light sections the bright orange fails WCAG AA (≈2.1–2.4:1); use the deep brand orange (≥5:1). */
:is(.product-feature, .latest-section, .philosophy, .article-layout, .contact-layout, .news-section, .policy-section, .post-pager, .comments-area) .orange { color: var(--cs-orange-deep); }
.article-cta .orange { color: var(--cs-orange-text); }
.display { font-family: var(--cs-font-display); font-weight: 600; letter-spacing: -2px; line-height: .85; }
.action { display: inline-flex; gap: 35px; justify-content: space-between; align-items: center; background: var(--cs-action); color: #fff; padding: 17px 25px; font-size: 13px; }
.text-link { font-size: 13px; border-bottom: 1px solid; padding-bottom: 7px; display: inline-block; }
button.text-link { background: transparent; }
.brand-copy-part { display: inline-block; }

.section { padding: 90px 7%; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 38px; }
.section-heading h2 { font-size: 32px; line-height: 1.5; }
.section-heading .eyebrow { margin-bottom: 14px; }
.product-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 25px; }
@media (max-width: 600px) {
	.section { padding: 55px 7%; scroll-margin-top: 100px; }
	.section-heading { align-items: start; flex-direction: column; gap: 15px; }
	.section-heading h2 { font-size: 28px; }
}

main { animation: cs-arrive .55s ease-out; }
@keyframes cs-arrive { from { opacity: .35; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Logo lockup (brand/brand-guidelines-orange.html, Logo System) ---------- */
.brand { --logo-ink: var(--cs-cream); --logo-rule: #333; display: inline-flex; align-items: center; gap: 10px; font-family: var(--cs-font-logo); flex-shrink: 0; line-height: 1.2; }
.brand .cs-symbol { font-family: var(--cs-font-logo); font-weight: 900; font-size: 36px; letter-spacing: -2px; white-space: nowrap; color: var(--logo-ink); line-height: 1.2; }
.brand .cs-symbol > span:first-child { color: var(--cs-brand); }
.brand .cs-divider { width: 1px; height: 36px; background: var(--logo-rule); flex-shrink: 0; }
.brand .cs-lockup { display: flex; flex-direction: column; gap: 5px; }
.brand .cs-wordmark { font-family: var(--cs-font-logo); font-weight: 900; font-size: 14px; letter-spacing: -.04em; color: var(--logo-ink); line-height: 1; white-space: nowrap; }
.brand .custom-logo { max-height: 44px; width: auto; }

/* ---------- Header / navigation ---------- */
.site-header { position: relative; z-index: 20; background: var(--cs-bg); min-height: 68px; padding: 12px 5%; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 25px; border-bottom: 1px solid #ffffff25; }
.site-nav { display: flex; align-items: center; gap: 22px; font-size: 12px; }
.site-nav > a { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1.25; font-size: 11px; white-space: nowrap; }
.site-nav .nav-ja { font-family: var(--cs-font-jp); font-size: 11px; font-weight: 400; letter-spacing: 0; color: #d1cbbd; }
.site-nav a[aria-current] { color: var(--cs-orange-text); }
.site-nav a[aria-current] .nav-ja, .site-nav a:hover .nav-ja { color: #f49a70; }
.site-nav .store { border: 1px solid currentColor; padding: 8px 13px; }
.menu-toggle { display: none; background: transparent; font-size: 12px; white-space: nowrap; }

@media (max-width: 1100px) {
	.site-header .menu-toggle { display: block; }
	.site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--cs-bg); border-bottom: 1px solid #555; padding: 20px 6%; z-index: 25; }
	.site-nav.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
	.site-nav > a { padding: 12px 0; font-size: 12px; white-space: normal; }
	.site-nav .nav-ja { font-size: 12px; }
	.site-nav .store { padding: 12px; }
	/* Without JavaScript the menu cannot be toggled, so keep it in the document flow and open. */
	html:not(.cs-js) .site-header { flex-wrap: wrap; }
	html:not(.cs-js) .site-header .menu-toggle { display: none; }
	html:not(.cs-js) .site-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; position: static; width: 100%; padding: 10px 0 0; border: 0; }
}
@media (max-width: 600px) {
	.site-header { padding: 12px 6%; gap: 12px; }
	.site-nav.open { gap: 18px; }
}
@media (max-width: 370px) {
	.site-header { padding-inline: 4%; gap: 8px; }
	.menu-toggle { padding: 0; font-size: 9px; }
}

/* Short-lived announcement strip (Customizer: お知らせバナー). */
.announcement { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: center; padding: 10px 5%; background: var(--cs-bg-deep); border-bottom: 1px solid #ffffff25; font-size: 12px; text-align: center; }
.announcement .eyebrow { font-size: 10px; }
.announcement a { border-bottom: 1px solid; }

/* ---------- Home: hero ---------- */
.signal-hero { position: relative; min-height: 720px; isolation: isolate; overflow: hidden; }
.signal-hero .hero-photo { position: absolute; right: 0; top: 0; width: 68%; height: 100%; object-fit: cover; object-position: center; z-index: -2; opacity: .82; }
.signal-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #151714 0%, #151714e6 25%, #15171433 72%), linear-gradient(0deg, #151714, transparent 50%); z-index: -1; }
.signal-copy { padding: 75px 7% 115px; max-width: 780px; }
.signal-copy h1 { font-size: clamp(80px, 10vw, 150px); margin: 28px 0 26px; }
.signal-copy h1 span { color: var(--cs-orange-hot); }
.signal-copy h2 { font-size: 26px; line-height: 1.8; margin-bottom: 18px; }
.signal-copy > p:not(.eyebrow) { font-size: 13px; color: #c3c2b6; max-width: 365px; }
.signal-copy .action { margin-top: 28px; }
.hero-secondary { display: inline-flex; margin: 20px 0 0 14px; font-size: 12px; border-bottom: 1px solid #aaa; padding: 10px 0; }
.hero-coordinate { position: absolute; right: 5%; top: 38px; font: 10px var(--cs-font-mono); writing-mode: vertical-rl; letter-spacing: 2px; color: #ddd; }
.signal-bottom { position: absolute; bottom: 24px; left: 7%; right: 7%; display: flex; justify-content: space-between; align-items: center; font: 10px var(--cs-font-mono); letter-spacing: 2px; }
.signal-controls { display: flex; gap: 10px; }
.signal-controls button { border: 1px solid #777; background: #151714c9; padding: 10px 14px; font: 10px var(--cs-font-mono); }
.signal-controls button[aria-pressed=true] { border-color: #e47842; color: #ff9c6a; }
html:not(.cs-js) .signal-controls { display: none; }

@media (max-width: 850px) {
	.signal-copy { padding-top: 65px; }
	.signal-hero .hero-photo { width: 100%; opacity: .6; }
	.signal-hero::after { background: linear-gradient(90deg, #151714ed, #15171430), linear-gradient(0deg, #151714, transparent); }
}
@media (max-width: 600px) {
	.signal-hero { min-height: 690px; }
	.signal-copy { padding: 50px 7% 120px; }
	.signal-copy > .eyebrow { line-height: 1.8; }
	.signal-copy h1 { font-size: clamp(62px, 20vw, 91px); }
	.signal-copy h2 { font-size: 22px; }
	.signal-copy > p:not(.eyebrow) { max-width: none; }
	.signal-copy .hero-secondary { margin-left: 0; display: block; width: max-content; }
	.hero-coordinate { display: none; }
	.signal-bottom { align-items: start; gap: 20px; flex-direction: column; bottom: 20px; }
	.signal-controls { flex-wrap: wrap; }
	.brand-copy-part { display: block; }
}

/* ---------- Brand experience: ANALOG / CLASSIC / DIGITAL ---------- */
.brand-experience .section-heading > p { font-size: 12px; }
.dna-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 40px; border-block: 1px solid #8887; }
.dna-tabs button { background: transparent; text-align: left; padding: 25px 18px; font: 600 clamp(24px, 4vw, 56px) var(--cs-font-display); border-right: 1px solid #8887; transition: background .3s, color .3s; }
.dna-tabs button:last-child { border-right: 0; }
.dna-tabs button small { display: block; font: 10px var(--cs-font-mono); letter-spacing: 2px; margin-bottom: 14px; }
.dna-tabs button[aria-selected=true] { background: var(--cs-brand); color: #111; }
.dna-content { display: grid; grid-template-columns: 1.2fr 1fr; gap: 65px; align-items: center; scroll-margin-top: 100px; }
.dna-content img { width: 100%; aspect-ratio: 1.6; object-fit: cover; }
.dna-content h3 { font-size: 32px; margin: 20px 0; }
.dna-content p { font-size: 14px; }
.dna-content .text-link { margin-top: 30px; }
/* Without JavaScript every panel is shown in sequence. */
html:not(.cs-js) .dna-tabs { display: none; }
html:not(.cs-js) .dna-content[hidden] { display: grid !important; }
html:not(.cs-js) .dna-content + .dna-content { margin-top: 60px; }
@media (max-width: 600px) {
	.dna-tabs button { font-size: 25px; padding: 20px 8px; }
	.dna-tabs button small { font-size: 9px; letter-spacing: 0; }
	.dna-content { grid-template-columns: 1fr; gap: 25px; }
	.dna-content h3 { font-size: 27px; }
}

/* ---------- Type-I feature (cream band) ---------- */
.product-feature { background: var(--cs-cream); color: var(--cs-ink); display: grid; grid-template-columns: 1.1fr 1fr; gap: 7%; align-items: center; padding-top: 78px; padding-bottom: 78px; }
.product-feature-image img { width: 100%; height: 390px; object-fit: cover; }
.product-feature h2 { font-size: 34px; line-height: 1.65; margin: 20px 0; }
.product-feature > div > p:not(.eyebrow) { font-size: 13px; color: #444; }
@media (max-width: 850px) {
	.product-feature { gap: 5%; }
	.product-feature-image img { height: 310px; }
}
@media (max-width: 600px) {
	.product-feature { grid-template-columns: 1fr; gap: 27px; padding-top: 52px; padding-bottom: 52px; }
	.product-feature-image img { height: 260px; }
	.product-feature h2 { font-size: 28px; margin: 13px 0; }
	.product-actions { align-items: flex-start; flex-direction: column; }
}

/* ---------- Latest posts / cards ---------- */
.latest-section { background: var(--cs-light); color: var(--cs-ink); }
.latest-section .section-heading { align-items: end; }
.latest-section .section-heading h2 { font-size: 34px; }
.latest-section .section-heading .eyebrow { margin-bottom: 8px; }
.behind-intro { font-size: 12px; margin-top: 14px; color: #626357; }
.latest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.latest-grid:has(.latest-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.latest-card > a { display: block; color: var(--cs-ink); }
.card-photo { overflow: hidden; background: #ded7c8; }
.latest-card img { width: 100%; aspect-ratio: 1.36; object-fit: cover; transition: transform .7s; }
.latest-card:hover img { transform: scale(1.045); }
.latest-card .card-photo-empty { aspect-ratio: 1.36; display: grid; place-items: center; font: 600 28px var(--cs-font-display); color: #5f5a4e; }
.latest-card .latest-category { display: inline-block; font: 10px var(--cs-font-mono); letter-spacing: .6px; color: #ad4a1b; margin-top: 19px; }
.latest-card time { display: block; font: 10px var(--cs-font-mono); color: #5f5f58; margin-top: 6px; }
.latest-card h3 { font-size: 17px; line-height: 1.7; margin-top: 11px; }
.latest-card p { font-size: 12px; color: #555; line-height: 1.8; margin-top: 9px; }
.latest-card .latest-read { display: inline-block; font-size: 11px; border-bottom: 1px solid #555; margin-top: 15px; padding-bottom: 4px; }
.latest-empty { font-size: 13px; color: #555; }
@media (max-width: 850px) {
	.latest-grid { gap: 18px; }
	.latest-card h3 { font-size: 15px; }
}
@media (max-width: 600px) {
	.latest-section .section-heading { align-items: flex-start; }
	.latest-section .section-heading h2 { font-size: 27px; }
	.latest-grid, .latest-grid:has(.latest-card:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); gap: 38px; }
	.latest-card img, .latest-card .card-photo-empty { aspect-ratio: 1.5; }
	.latest-card h3 { font-size: 18px; }
}

/* ---------- Closing statement ---------- */
.next-world { background: var(--cs-bg-raised); position: relative; overflow: hidden; }
.next-world h2 { font-size: clamp(50px, 9vw, 130px); margin: 24px 0 35px; }
.next-world h2 span { color: var(--cs-orange-hot); }
.motion-caption { font-size: clamp(14px, 1.6vw, 20px); margin-bottom: 32px; }

/* ---------- Page intro (inner pages) ---------- */
.page-intro { padding: 85px 7% 60px; position: relative; overflow: hidden; }
.page-intro h1 { font-size: clamp(66px, 12vw, 170px); margin: 24px 0 32px; overflow-wrap: anywhere; }
.page-intro-lede { font-size: 14px; color: var(--cs-muted); }
.intro-line { display: block; height: 2px; background: linear-gradient(90deg, var(--cs-brand) 0 25%, #ffffff24 25%); margin-top: 48px; }
@media (max-width: 600px) {
	.page-intro { padding: 55px 7% 35px; }
	.page-intro h1 { font-size: clamp(48px, 15vw, 84px); letter-spacing: -1px; }
	.page-intro-lede { font-size: 14px; }
	.intro-line { margin-top: 30px; }
}

/* ---------- Philosophy (cream two-column) ---------- */
.philosophy { display: grid; grid-template-columns: 1fr 1.4fr; gap: 70px; background: var(--cs-cream); color: var(--cs-ink); }
.philosophy h2 { font-size: 40px; line-height: 1.55; }
.philosophy p { font-size: 14px; }
.philosophy p + p { margin-top: 22px; }
.philosophy .text-link { margin-top: 28px; }
@media (max-width: 600px) {
	.philosophy { grid-template-columns: 1fr; gap: 30px; }
	.philosophy h2 { font-size: 32px; }
}

/* ---------- Wide photo ---------- */
.wide-photo { height: 600px; position: relative; isolation: isolate; }
.wide-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: -2; }
.wide-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #10140eee, transparent 80%); z-index: -1; }
.wide-photo > div { position: absolute; bottom: 60px; left: 7%; right: 7%; }
.wide-photo h2 { font-size: clamp(28px, 3.5vw, 48px); line-height: 1.65; margin-top: 20px; }
@media (max-width: 900px) { .wide-photo { height: 480px; } }
@media (max-width: 600px) { .wide-photo { height: 390px; } .wide-photo > div { bottom: 35px; } }

/* ---------- Product page ---------- */
.product-stage { padding: 70px 7%; display: grid; grid-template-columns: .9fr 1.3fr; align-items: center; gap: 5%; min-height: 620px; }
.product-stage h1 { font-size: clamp(100px, 13vw, 190px); margin: 28px 0; }
.product-sub { font-size: 25px; margin-bottom: 20px; }
.product-stage .product-model { font: 11px/1.9 var(--cs-font-mono); color: #aaa; }
.product-gallery { min-width: 0; background: #ded7c8; color: #1b1c18; padding: 35px 20px 20px; }
.gallery-image { width: 100%; height: 330px; object-fit: contain; }
.gallery-controls { display: flex; gap: 8px; border-top: 1px solid #7777; padding-top: 18px; justify-content: center; }
.gallery-controls button { background: transparent; font: 10px var(--cs-font-mono); padding: 10px; border-bottom: 2px solid transparent; }
.gallery-controls button[aria-pressed=true] { border-color: var(--cs-orange); color: #963600; }
html:not(.cs-js) .gallery-controls { display: none; }
@media (max-width: 900px) {
	.product-stage { grid-template-columns: 1fr; }
	.product-gallery { margin-top: 20px; }
	.product-stage h1 { font-size: 120px; }
}
@media (max-width: 600px) {
	.product-stage { padding: 45px 7%; }
	.product-stage h1 { font-size: 100px; }
	.gallery-image { height: 210px; }
	.gallery-controls button { font-size: 9px; padding: 8px; }
}

/* ---------- BEHIND THE SCENES archive ---------- */
.archive { min-height: 540px; }
.filter-row { display: flex; gap: 8px; margin-bottom: 26px; flex-wrap: wrap; }
.filter-row a { padding: 12px 22px; border: 1px solid #26292150; font-size: 12px; }
.filter-row a[aria-current] { background: #1a1c18; color: var(--cs-paper); }
@media (max-width: 600px) { .filter-row a { padding: 10px 15px; font-size: 11px; } }

/* ---------- Story (single post) ----------
 * Opening: one container (.story-frame, the featured-image width) holds the
 * breadcrumb, category, title, meta, lead and image, all left-aligned to the
 * image edge. Below: contents 190px | gap 48px | text ≤700px, centred.
 * ≤900px: one column; the contents list becomes a collapsible box above the text.
 */
.story-opening { padding: 40px 6% 0; }
.story-frame { max-width: 1120px; margin: 0 auto; }
.article-layout { display: grid; grid-template-columns: 190px minmax(0, 700px); column-gap: 48px; justify-content: center; }
.story-heading { padding-bottom: 36px; text-align: left; }
.story-category { margin: 26px 0 12px; font-size: 13px; }
.story-category a { color: var(--cs-orange-text); border-bottom: 1px solid currentColor; }
.story-heading h1 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.55; letter-spacing: .01em; margin: 0 0 18px; text-spacing-trim: trim-start; }
.story-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: #c3c2b6; }
.story-lead { margin-top: 22px; max-width: 46em; font-size: 18px; line-height: 1.9; font-weight: 500; color: var(--cs-cream); }
.story-cover-wrap { margin: 0; }
.story-cover { width: 100%; height: auto; max-height: min(620px, 70vh); object-fit: cover; }
.story-cover-wrap.is-portrait { display: flex; justify-content: center; background: #0d0f0b; }
.story-cover-wrap.is-portrait .story-cover { width: auto; max-width: 100%; max-height: min(720px, 80vh); object-fit: contain; }

.article-layout { padding: 56px 6% 80px; background: var(--cs-paper); color: var(--cs-ink); grid-auto-rows: auto; }
.article-layout > .article-body { grid-column: 2; grid-row: 1; min-width: 0; }
.article-layout > .article-aside { grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; color-scheme: light; scrollbar-width: thin; scrollbar-color: #b9b2a3 transparent; padding-right: 6px; }

.article-toc-box > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; list-style: none; cursor: default; padding-bottom: 12px; border-bottom: 1px solid #7776; margin-bottom: 12px; }
.article-toc-box > summary::-webkit-details-marker { display: none; }
.article-toc-title { font-size: 13px; font-weight: 700; }
.article-toc-en { font: 10px var(--cs-font-mono); letter-spacing: 1.5px; color: #5f5f58; }
.article-toc, .article-toc ol { list-style: none; margin: 0; padding: 0; }
.article-toc ol { padding-left: 12px; }
/* Spacing sits outside the clamped box (margin, not padding) so no third line peeks through. */
.article-toc a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0; padding: 0 0 0 12px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.6; color: #3f403a; }
.article-toc ol a { font-size: 13px; color: #55564f; }
.article-toc a:hover { color: var(--cs-orange-deep); }
.article-toc a[aria-current] { border-left-color: var(--cs-orange); color: var(--cs-ink); font-weight: 700; }

.article-cta { margin-top: 56px; padding: 32px; background: #1b1e18; color: var(--cs-paper); display: grid; gap: 14px; justify-items: start; }
.article-cta-title { font-size: 24px; line-height: 1.5; }
.article-cta-note { font-size: 15px; line-height: 1.9; color: #d1cbbd; }
.article-cta .action { margin-top: 6px; }
.article-cta.is-generic { background: transparent; color: var(--cs-ink); border-top: 1px solid #7776; padding: 28px 0 0; }
.article-cta.is-generic .eyebrow { color: var(--cs-orange-deep); }

@media (max-width: 900px) {
	.article-layout { grid-template-columns: minmax(0, 700px); }
	.article-layout > .article-body, .article-layout > .article-aside { grid-column: 1; grid-row: auto; }
	.article-layout > .article-aside { position: static; max-height: none; overflow: visible; margin-bottom: 32px; }
	.article-toc-box { border: 1px solid #7776; background: #ebe4d3; }
	.article-toc-box > summary { cursor: pointer; padding: 12px 16px; margin: 0; border: 0; min-height: 48px; align-items: center; }
	.article-toc-box > summary::after { content: '＋'; font-size: 16px; }
	.article-toc-box[open] > summary::after { content: '－'; }
	.article-toc-box[open] > summary { border-bottom: 1px solid #7776; }
	.article-toc-box nav { padding: 8px 16px 14px; }
	.article-toc-en { display: none; }
}
@media (max-width: 600px) {
	.story-opening { padding: 28px 6% 0; }
	.story-heading { padding-bottom: 26px; }
	.story-heading h1 { font-size: clamp(22px, 6.4vw, 28px); }
	.story-cover { max-height: 62vh; }
	.article-layout { padding: 36px 6% 56px; }
	.story-lead { font-size: 17px; margin-top: 18px; }
	.article-cta { padding: 24px; }
}

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: .75fr 1.5fr; gap: 9%; background: var(--cs-paper); color: var(--cs-ink); }
.contact-aside { align-self: start; }
.contact-aside h2 { font-size: 28px; line-height: 1.7; margin: 20px 0; }
.contact-aside > p { font-size: 13px; }
.contact-aside > .text-link { display: table; margin-top: 25px; }
.form-steps { display: flex; list-style: none; margin: 0 0 40px; padding: 0; border-bottom: 1px solid #7775; gap: 30px; }
.form-steps li { padding: 0 0 17px; color: #5f5f58; font-size: 13px; }
.form-steps li span { font: 11px var(--cs-font-mono); margin-right: 10px; }
.form-steps li[aria-current] { color: var(--cs-orange-deep); border-bottom: 2px solid var(--cs-orange); }
.contact-panel { scroll-margin-top: 30px; min-width: 0; }
@media (max-width: 900px) {
	.contact-layout { grid-template-columns: 1fr; gap: 45px; }
	.contact-aside { max-width: 650px; }
}
@media (max-width: 600px) {
	.contact-aside h2 { font-size: 25px; }
	.form-steps { gap: 24px; }
}

/* ---------- News / policy ---------- */
.news-section, .policy-section { background: var(--cs-paper); color: var(--cs-ink); }
.notice-list { border-top: 1px solid #7776; margin-bottom: 40px; }
.notice-list > a { display: grid; grid-template-columns: 130px 130px 1fr 20px; gap: 25px; align-items: center; padding: 32px 0; border-bottom: 1px solid #7776; transition: color .2s; }
.notice-list > a:hover { color: var(--cs-orange-deep); }
.notice-index { font: 10px var(--cs-font-mono); color: #5f5f58; }
.notice-list h2 { font-size: 18px; font-weight: 500; }
.policy-section { padding-inline: max(7%, calc((100% - 860px) / 2)); }
.policy-section > .action { margin-top: 30px; }
@media (max-width: 900px) {
	.notice-list > a { grid-template-columns: 100px 1fr 20px; gap: 16px; }
	.notice-list h2 { grid-column: 1 / 3; }
	.notice-list > a > span:last-child { grid-column: 3; grid-row: 1 / 3; }
}
@media (max-width: 600px) { .notice-list h2 { font-size: 16px; } }

/* ---------- Brand curtain (load and page transition) ---------- */
.brand-curtain { position: fixed; inset: 0; z-index: 1000; background: var(--cs-bg-deep); display: grid; place-items: center; transform: translateY(-102%); visibility: hidden; transition: transform .38s cubic-bezier(.76, 0, .24, 1), visibility .38s; pointer-events: none; }
html.cs-intro .brand-curtain, html.cs-arrive .brand-curtain { transform: translateY(0); visibility: visible; transition: none; }
html.cs-leaving .brand-curtain { transform: translateY(0); visibility: visible; pointer-events: auto; }
.curtain-center { width: min(440px, 76vw); }
.curtain-center > .brand { transform: scale(1.35); transform-origin: left center; margin-bottom: 55px; }
.signal-trace { height: 2px; background: #3b3c31; overflow: hidden; margin-bottom: 28px; }
.signal-trace i { display: block; width: 40%; height: 100%; background: var(--cs-brand); box-shadow: 0 0 20px var(--cs-brand); animation: cs-trace 1.05s ease-in-out infinite; }
.curtain-title { font: 600 clamp(30px, 6vw, 52px)/1 var(--cs-font-display); letter-spacing: 1px; }
.curtain-center small { display: block; font: 9px var(--cs-font-mono); letter-spacing: 2px; color: #86897c; margin-top: 18px; }
@keyframes cs-trace { from { transform: translateX(-110%); } to { transform: translateX(360%); } }
@media (max-width: 600px) {
	.curtain-center > .brand { transform: scale(1.15); }
	.curtain-center small { line-height: 1.8; }
}

/* ---------- Footer ---------- */
.footer { padding: 36px 7%; border-top: 1px solid #8885; display: flex; flex-wrap: wrap; gap: 36px; justify-content: space-between; align-items: center; font: 11px var(--cs-font-mono); }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; max-width: 660px; }
.footer-links a { font-size: 11px; }
.footer-links a:hover { color: var(--cs-orange-text); }
@media (max-width: 600px) {
	.footer { align-items: flex-start; flex-direction: column; }
	.footer-links { flex-direction: column; }
}

/* ---------- 1.1: readable Japanese text ----------
 * Decorative English (eyebrows, display type) keeps the mock sizes; Japanese
 * text people need to read is raised to ≥13px (supporting) / ≥15px (body).
 */
.site-nav .nav-ja { font-size: 12px; }
.signal-copy > p:not(.eyebrow) { font-size: 15px; max-width: 420px; }
.section-heading > p, .brand-experience .section-heading > p { font-size: 14px; line-height: 1.9; }
.behind-intro { font-size: 14px; color: #55564f; }
.dna-content p, .product-feature > div > p:not(.eyebrow) { font-size: 15px; }
.philosophy p { font-size: 16px; }
.contact-aside > p { font-size: 15px; }
.text-link { font-size: 14px; }
.action { font-size: 14px; }
.footer-links a { font-size: 13px; }
.latest-card .latest-category, .latest-card time { font-size: 12px; letter-spacing: .3px; }
.latest-card h3, .latest-card h2 { font-size: 18px; line-height: 1.65; margin-top: 10px; overflow-wrap: anywhere; }
.latest-card p { font-size: 14px; color: #4d4d47; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.latest-card .latest-read { font-size: 12px; }
.page-intro-lede { font-size: 16px; }
.latest-section.archive { padding-top: 44px; }
@media (max-width: 600px) { .latest-section.archive { padding-top: 32px; } }
.product-summary { font-size: 16px; line-height: 1.9; margin: 0 0 18px; color: var(--cs-cream); max-width: 32em; }
.wide-photo-text { font-size: clamp(24px, 3vw, 40px); line-height: 1.65; font-weight: 700; margin-top: 20px; }
@media (max-width: 600px) {
	.signal-copy > p:not(.eyebrow) { font-size: 14px; }
	.latest-card h3, .latest-card h2 { font-size: 17px; }
}

/* ---------- 1.1: compact list headings (not the home hero) ---------- */
.page-intro--compact { padding: 48px 7% 30px; }
.page-intro--compact h1 { font-size: clamp(44px, 7vw, 104px); margin: 14px 0 16px; }
.display-sub { display: block; margin-top: 14px; font: 700 clamp(16px, 1.8vw, 22px)/1.5 var(--cs-font-jp); letter-spacing: .02em; color: var(--cs-cream); }
.page-intro--compact .intro-line { margin-top: 26px; }
@media (max-width: 600px) {
	.page-intro--compact { padding: 34px 6% 24px; }
	.page-intro--compact h1 { font-size: clamp(38px, 12vw, 60px); }
}
.philosophy--first { padding-top: 64px; }

/* ---------- 1.1: list search, filters and states ---------- */
.list-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 34px; }
.list-search input { width: 100%; }
.list-search label, .list-scope { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.list-scope { font-weight: 400; }
.list-scope a { margin-left: 10px; border-bottom: 1px solid; }
.list-search-row { display: flex; gap: 8px; max-width: 560px; }
.list-search input { flex: 1; min-width: 0; min-height: 46px; border: 1px solid #87877a; background: #faf7ef; color: var(--cs-ink); padding: 10px 14px; font: 16px var(--cs-font-jp); color-scheme: light; }
.list-search input:focus-visible { outline: 2px solid var(--cs-action); outline-offset: 2px; }
.list-search button { min-height: 46px; padding: 0 22px; background: var(--cs-action); color: #fff; font-size: 14px; }
.filter-row { align-items: center; margin-bottom: 0; }
.filter-label { font-size: 13px; color: #55564f; margin-right: 4px; }
.filter-row a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; font-size: 13px; }
.filter-row a[aria-current] { font-weight: 700; }
.filter-count { font: 11px var(--cs-font-mono); opacity: .75; }
.list-status { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 14px; padding: 12px 16px; background: #ebe4d3; }
.list-status a { border-bottom: 1px solid; }
.list-empty { padding: 32px 0; font-size: 15px; }
.list-empty p + p { margin-top: 8px; }
.list-empty-actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px !important; }
.list-tools .search-form { margin-top: 0; }

/* ---------- 1.1: breadcrumbs ---------- */
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0; padding: 0; font-size: 13px; }
.breadcrumbs li:not(:last-child)::after { content: '›'; margin: 0 8px; opacity: .6; }
.breadcrumbs a { border-bottom: 1px solid transparent; }
.breadcrumbs a:hover { border-bottom-color: currentColor; }
.breadcrumbs [aria-current] { font-weight: 500; }
/* The current page repeats the h1: keep it to one line (full text stays in the HTML / JSON-LD). */
.breadcrumbs li:last-child { min-width: 0; max-width: 100%; }
.breadcrumbs li:last-child span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 28em; }
.story-heading .breadcrumbs { color: #c3c2b6; }
.archive .breadcrumbs { margin-bottom: 18px; color: #55564f; }

/* ---------- 1.1: target sizes (WCAG 2.2, 2.5.8) ---------- */
.menu-toggle { min-height: 44px; padding: 8px 0; }
.breadcrumbs a, .breadcrumbs [aria-current] { display: inline-block; padding: 4px 0; }
.story-category a { display: inline-block; padding: 3px 0; }
.footer-links a { display: inline-block; padding: 4px 0; }

/* ---------- 1.1: footer social links ---------- */
.footer-end { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 0; padding: 0; }
.footer-social a { font: 12px var(--cs-font-mono); border-bottom: 1px solid #8887; padding-bottom: 2px; }
@media (max-width: 600px) { .footer-end { align-items: flex-start; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.brand-curtain { display: none; }
}