/*
Theme Name:     Zell
Theme URI:      https://zell.jp/
Template:       twentytwentyfive
Author:         Cell Inc. / Zell
Author URI:     https://cell-inc.co.jp/
Description:    株式会社Zellコーポレートサイト用子テーマ。「偶然を、設計する」を軸にした、和の余白を継承したミニマル・ミンチョ体デザイン。姉妹サイト cell-inc.co.jp と同じ技術構成、独自のクリーム×墨×金茶の色調。
Version:        1.9.1
Text Domain:    zell
*/

/* =====================================================================
   Tokens — Zell design system (warm mincho minimal)
   ===================================================================== */
:root {
    /* Color: light — 和紙 washi cream field */
    --z-cream:        #f5f2ea;   /* primary background */
    --z-cream-2:      #efeadd;   /* recessed cream (cards, wells) */
    --z-cream-3:      #e6dfcd;   /* divider cream */
    --z-line:         #d4c9a8;   /* subtle border on cream */

    /* Color: dark — 墨 sumi warm black field */
    --z-sumi:         #1a1613;
    --z-sumi-2:       #262220;
    --z-sumi-3:       #333029;

    /* Color: ink — text on cream */
    --z-ink:          #2b2621;   /* primary body ink */
    --z-ink-2:        #4a433c;   /* strong secondary */
    --z-ink-3:        #6b625a;   /* muted secondary */
    --z-ink-4:        #8f867b;   /* placeholder / caption */

    /* Color: accent — 金茶 kincha (warm khaki-gold) */
    --z-gold:         #a08862;   /* primary accent */
    --z-gold-2:       #b8a17a;   /* softer */
    --z-gold-3:       #7d6a4c;   /* deeper */

    /* Color: text on sumi */
    --z-cream-on-sumi: #d8cfb8;
    --z-gold-on-sumi:  #b89c73;
    --z-ink-on-sumi:   #9a9284;

    /* Type */
    --z-mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "游明朝", "YuMincho", "Yu Mincho", serif;
    --z-sans:   "Manrope", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --z-mono:   "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Scale */
    --z-size-eyebrow: 0.7rem;
    --z-size-body:    1rem;
    --z-size-lead:    1.125rem;
    --z-size-h4:      1.5rem;
    --z-size-h3:      1.85rem;
    --z-size-h2:      2.35rem;
    --z-size-h1:      3rem;
    --z-size-display: 4rem;

    /* Spacing */
    --z-gap:          1.5rem;
    --z-section:      clamp(6rem, 10vw, 10rem);
    --z-section-lg:   clamp(8rem, 14vw, 14rem);
    --z-container:    1120px;
    --z-container-narrow: 720px;
    --z-container-wide:   1280px;

    /* Rhythm */
    --z-track-loose:  0.35em;   /* wide letter-spacing for English caps */
    --z-track-tight:  0.05em;
    --z-leading-jp:   2;        /* generous mincho leading */
    --z-leading-tight: 1.5;

    /* Motion */
    --z-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
    --z-dur:          700ms;
    --z-dur-fast:     280ms;
}

/* =====================================================================
   Reset & base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    overflow-x: hidden;
    max-width: 100%;
}

body {
    margin: 0;
    background: var(--z-cream);
    color: var(--z-ink);
    font-family: var(--z-mincho);
    font-size: var(--z-size-body);
    line-height: var(--z-leading-jp);
    font-feature-settings: "palt";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}

main { width: 100%; max-width: 100vw; overflow-x: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity var(--z-dur-fast) var(--z-ease), color var(--z-dur-fast) var(--z-ease); }
a:hover { opacity: 0.65; }
button { font: inherit; cursor: pointer; }

/* Remove Japanese first-letter drop cap tendency inherited from parent */
p::first-letter { font-size: inherit; float: none; margin: 0; padding: 0; }

::selection { background: var(--z-gold); color: var(--z-cream); }

/* =====================================================================
   Utilities
   ===================================================================== */
.container      { max-width: var(--z-container);        margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.container-narrow { max-width: var(--z-container-narrow); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.container-wide { max-width: var(--z-container-wide);   margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

.section     { padding-block: var(--z-section); }
.section-lg  { padding-block: var(--z-section-lg); }
.section--dark { background: var(--z-sumi); color: var(--z-cream-on-sumi); }
.section--cream { background: var(--z-cream); }
.section--cream-2 { background: var(--z-cream-2); }

.text-center { text-align: center; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   Typography — the core of zell aesthetic
   ===================================================================== */

/* English small-caps eyebrow — the signature */
.eyebrow {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: var(--z-size-eyebrow);
    color: var(--z-gold);
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    line-height: 1;
    display: inline-block;
}
.section--dark .eyebrow { color: var(--z-gold-on-sumi); }

/* Ornament: — text — flanking em-dashes for Japanese subhead */
.jp-flank {
    display: inline-flex;
    align-items: center;
    gap: 1.25em;
    font-family: var(--z-mincho);
    color: var(--z-gold);
    font-size: 0.95rem;
    letter-spacing: 0.15em;
}
.jp-flank::before, .jp-flank::after {
    content: "";
    width: 1.25em; height: 1px;
    background: currentColor;
    opacity: 0.7;
}
.section--dark .jp-flank { color: var(--z-gold-on-sumi); }

/* Vertical line divider — the signature motif */
.rule-v {
    display: block;
    width: 1px;
    height: clamp(48px, 8vw, 88px);
    background: var(--z-gold);
    margin: 0 auto;
    opacity: 0.7;
}
.section--dark .rule-v { background: var(--z-gold-on-sumi); }

/* Horizontal thin rule with center label — DISCOVER pattern */
.rule-h-label {
    display: inline-flex;
    align-items: center;
    gap: 1.5em;
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: var(--z-size-eyebrow);
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: var(--z-gold);
}
.rule-h-label::before, .rule-h-label::after {
    content: ""; width: clamp(24px, 4vw, 44px); height: 1px;
    background: currentColor; opacity: 0.7;
}
.section--dark .rule-h-label { color: var(--z-gold-on-sumi); }

/* Headings — mincho */
.h-display {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.75rem, 3.5vw, var(--z-size-display));
    line-height: 1.55;
    letter-spacing: 0.05em;
    color: var(--z-ink);
    margin: 0;
}
.h-lead {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.2vw, 2.1rem);
    line-height: 1.85;
    letter-spacing: 0.05em;
    color: var(--z-ink);
    margin: 0;
}
.h-sub {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 2.1;
    letter-spacing: 0.05em;
    color: var(--z-ink-3);
    margin: 0;
}
.section--dark .h-display { color: var(--z-cream-on-sumi); }
.section--dark .h-lead    { color: var(--z-cream-on-sumi); }
.section--dark .h-sub     { color: var(--z-ink-on-sumi); }

/* Emphasis — gold word for accent */
.gold { color: var(--z-gold); }
.section--dark .gold { color: var(--z-gold-on-sumi); }

/* Body paragraph — leaves generous rhythm */
.p-body {
    font-family: var(--z-mincho);
    font-size: var(--z-size-body);
    line-height: 2.15;
    letter-spacing: 0.05em;
    color: var(--z-ink-2);
    margin: 0 0 1.5em;
}

/* =====================================================================
   Header — site chrome
   ===================================================================== */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 40;
    padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    transition: background var(--z-dur-fast) var(--z-ease),
                border-color var(--z-dur-fast) var(--z-ease),
                padding var(--z-dur-fast) var(--z-ease);
}
.site-header.is-scrolled {
    background: rgba(245, 242, 234, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--z-cream-3);
}
.site-header.is-on-dark:not(.is-scrolled) { color: var(--z-cream-on-sumi); }

.brand {
    display: inline-flex;
    align-items: center;
    color: inherit;
    line-height: 1;
    transition: opacity var(--z-dur-fast) var(--z-ease);
}
.brand:hover { opacity: 0.7; }
.brand__logo {
    height: 32px;
    width: auto;
    display: block;
}
@media (max-width: 600px) {
    .brand__logo { height: 26px; }
}

.nav-primary {
    display: flex;
    align-items: center;
}
.nav-primary ul,
.nav-primary__list {
    display: flex;
    gap: 2.25rem;
    align-items: center;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-primary li,
.nav-primary__list li,
.nav-primary .menu-item {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    line-height: 1;
    position: relative;
}
.nav-primary li::marker,
.nav-primary__list li::marker,
.nav-primary .menu-item::marker { content: ""; display: none; }
.nav-primary a {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: inherit;
    position: relative;
    padding-block: 0.4em;
    white-space: nowrap;
}

/* Sub-menu — hover dropdown for 運営店舗一覧 → 5店舗 */
.nav-primary .menu-item-has-children > a::after {
    content: " ▾";
    font-size: 0.6em;
    margin-left: 0.4em;
    color: var(--z-gold);
    opacity: 0.7;
}
.nav-primary .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--z-cream);
    padding: 1.25rem 0;
    display: block;
    min-width: 260px;
    opacity: 0;
    visibility: hidden;
    border: 1px solid var(--z-line);
    list-style: none;
    margin: 1.2rem 0 0;
    z-index: 100;
    transition: opacity 260ms var(--z-ease), visibility 260ms var(--z-ease), transform 260ms var(--z-ease);
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(26, 22, 19, 0.06);
}
/* invisible bridge above sub-menu so hover doesn't drop when moving from parent */
.nav-primary .sub-menu::before {
    content: "";
    position: absolute;
    top: -1.5rem;
    left: 0; right: 0;
    height: 1.5rem;
}
.nav-primary .menu-item-has-children:hover > .sub-menu,
.nav-primary .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.nav-primary .sub-menu li { display: block; padding: 0; margin: 0; }
.nav-primary .sub-menu a {
    display: block;
    padding: 0.9rem 2rem;
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: var(--z-ink);
    text-transform: none;
    white-space: nowrap;
    text-align: center;
    transition: background var(--z-dur-fast) var(--z-ease), color var(--z-dur-fast) var(--z-ease);
}
.nav-primary .sub-menu a::after { display: none; }
.nav-primary .sub-menu a:hover {
    background: var(--z-cream-2);
    color: var(--z-gold);
    opacity: 1;
}

.nav-primary > ul > li > a::after,
.nav-primary__list > li > a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transition: right var(--z-dur-fast) var(--z-ease);
}
.nav-primary a:hover { opacity: 1; }
.nav-primary > ul > li > a:hover::after,
.nav-primary > ul > li > a[aria-current="page"]::after,
.nav-primary__list > li > a:hover::after,
.nav-primary__list > li > a[aria-current="page"]::after { right: 0; }

/* Header actions — CTA + burger container */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-left: 1.25rem;
}
.header-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.7em 1.6em;
    border: 1px solid currentColor;
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.68rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: var(--z-gold);
    transition: background var(--z-dur-fast) var(--z-ease), color var(--z-dur-fast) var(--z-ease);
    white-space: nowrap;
    line-height: 1;
}
.header-cta:hover {
    background: var(--z-gold);
    color: var(--z-cream);
    opacity: 1;
}
.site-header.is-scrolled .header-cta { color: var(--z-gold); }
.site-header.is-on-dark:not(.is-scrolled) .header-cta { color: var(--z-gold-on-sumi); }

.menu-toggle {
    display: none;
    width: 40px; height: 40px;
    background: transparent;
    border: 0;
    color: inherit;
    padding: 0;
    position: relative;
}
.menu-toggle span {
    position: absolute;
    left: 8px; right: 8px;
    height: 1px;
    background: currentColor;
    transition: transform var(--z-dur-fast) var(--z-ease), opacity var(--z-dur-fast) var(--z-ease);
}
.menu-toggle span:nth-child(1) { top: 15px; }
.menu-toggle span:nth-child(2) { top: 20px; }
.menu-toggle span:nth-child(3) { top: 25px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: var(--z-cream);
    padding: 6rem clamp(1.5rem, 6vw, 4rem) 4rem;
    transform: translateY(-100%);
    transition: transform var(--z-dur) var(--z-ease);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.mobile-menu a {
    display: flex;
    align-items: baseline;
    gap: 1em;
    font-family: var(--z-mincho);
    font-size: 1.5rem;
    color: var(--z-ink);
    letter-spacing: 0.1em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--z-cream-3);
}
.mobile-menu a .en {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.65rem;
    letter-spacing: var(--z-track-loose);
    color: var(--z-gold);
    text-transform: uppercase;
    margin-left: auto;
}

/* =====================================================================
   Hero — the money page opening
   ===================================================================== */
.hero {
    min-height: 100vh;
    padding: 8rem 1.5rem 6rem;
    display: grid;
    place-items: center;
    background: var(--z-cream);
    position: relative;
}
.hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
    max-width: 720px;
    width: 100%;
}
.hero__eyebrow { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }

.hero__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.85rem, 3.2vw, 2.6rem);
    line-height: 2;
    letter-spacing: 0.15em;
    color: var(--z-ink);
    margin: 0;
}
.hero__title .line { display: block; }

.hero__sub {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(0.9rem, 1.15vw, 1rem);
    line-height: 2.4;
    letter-spacing: 0.1em;
    color: var(--z-ink-3);
    margin: 0;
}
.hero__sub .line { display: block; }

.hero__discover {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* =====================================================================
   Passage — dark bridging section (Image 2 pattern)
   ===================================================================== */
.passage {
    background: var(--z-sumi);
    color: var(--z-cream-on-sumi);
    padding: clamp(8rem, 15vw, 14rem) 1.5rem;
    display: grid;
    place-items: center;
    text-align: center;
    min-height: 60vh;
}
.passage__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 4rem);
    max-width: 720px;
}
.passage__whisper {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    line-height: 2.4;
    letter-spacing: 0.15em;
    color: var(--z-ink-on-sumi);
    margin: 0;
}
.passage__whisper .line { display: block; }
.passage__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.8;
    letter-spacing: 0.25em;
    color: var(--z-cream-on-sumi);
    margin: 0;
}

/* =====================================================================
   Stores — the main content: 4 store cards
   ===================================================================== */
.stores-intro {
    padding: clamp(7rem, 12vw, 12rem) 1.5rem;
    text-align: center;
    background: var(--z-cream);
}
.stores-intro__inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 4vw, 3rem);
}
.stores-intro__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 2;
    letter-spacing: 0.15em;
    color: var(--z-ink);
    margin: 0;
}
.stores-intro__body {
    font-family: var(--z-mincho);
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    line-height: 2.4;
    letter-spacing: 0.08em;
    color: var(--z-ink-2);
    margin: 0;
}
.stores-intro__body p { margin: 0 0 1.5em; }
.stores-intro__body p:last-child { margin: 0; }

/* Store card — the individual store */
.store-card {
    padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 3rem);
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: 1fr;
    max-width: var(--z-container-wide);
    margin: 0 auto;
    align-items: center;
}
@media (min-width: 900px) {
    .store-card { grid-template-columns: 1fr 1.15fr; }
    .store-card--flip { grid-template-columns: 1.15fr 1fr; }
    .store-card--flip .store-card__body { order: -1; }
}

/* alternating background per store (subtle) */
.store-card--alt { background: var(--z-cream-2); }
.store-card--dark { background: var(--z-sumi); color: var(--z-cream-on-sumi); }
.store-card--dark .store-card__num { color: var(--z-gold-on-sumi); }
.store-card--dark .store-card__area { color: var(--z-gold-on-sumi); }
.store-card--dark .store-card__name-en { color: var(--z-cream-on-sumi); }
.store-card--dark .store-card__name-jp { color: var(--z-cream-on-sumi); }
.store-card--dark .store-card__lead { color: var(--z-cream-on-sumi); }
.store-card--dark .store-card__body { color: var(--z-ink-on-sumi); }
.store-card--dark .store-card__link { color: var(--z-gold-on-sumi); }
.store-card--dark .store-card__link::after { background: var(--z-gold-on-sumi); }

/* Visual side — image or textured placeholder */
.store-card__visual {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--z-cream-3);
    overflow: hidden;
}
.store-card__visual img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.4s var(--z-ease);
}
.store-card:hover .store-card__visual img { transform: scale(1.03); }
.store-card__visual::after {
    content: "";
    position: absolute; inset: 0;
    border: 1px solid rgba(160, 136, 98, 0.25);
    pointer-events: none;
}

/* Body side — meta + title + copy + link */
.store-card__body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-block: clamp(1rem, 3vw, 2rem);
}
.store-card__meta {
    display: flex;
    align-items: baseline;
    gap: 1.5em;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--z-line);
}
.store-card--dark .store-card__meta { border-bottom-color: rgba(184, 156, 115, 0.25); }
.store-card__num {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: var(--z-gold);
}
.store-card__area {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: var(--z-gold);
    margin-left: auto;
}
.store-card__name-en {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--z-ink);
    margin: 0;
}
.store-card__name-jp {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.8;
    letter-spacing: 0.2em;
    color: var(--z-ink-2);
    margin: 0;
}
.store-card__lead {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 2.1;
    letter-spacing: 0.1em;
    color: var(--z-ink);
    margin: 1rem 0 0;
}
.store-card__body-text {
    font-family: var(--z-mincho);
    font-size: 0.95rem;
    line-height: 2.3;
    letter-spacing: 0.05em;
    color: var(--z-ink-3);
    margin: 0;
}
.store-card__link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.75em;
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: var(--z-gold);
    margin-top: 1rem;
    padding-bottom: 0.4em;
    align-self: flex-start;
    position: relative;
}
.store-card__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--z-gold);
    opacity: 0.35;
    transform-origin: right;
    transition: transform var(--z-dur) var(--z-ease), opacity var(--z-dur-fast) var(--z-ease);
}
.store-card__link:hover::after {
    opacity: 1;
    transform: scaleX(1.15);
}
.store-card__link .arrow {
    display: inline-block;
    transition: transform var(--z-dur-fast) var(--z-ease);
}
.store-card__link:hover .arrow { transform: translateX(4px); }

/* =====================================================================
   Store detail page
   ===================================================================== */
.store-hero {
    padding: 9rem 1.5rem 4rem;
    text-align: center;
    background: var(--z-cream);
}
.store-hero__inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.store-hero__area {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: var(--z-gold);
}
.store-hero__name-en {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--z-ink);
    margin: 0;
}
.store-hero__name-jp {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    letter-spacing: 0.25em;
    color: var(--z-ink-2);
    margin: 0;
}
.store-hero__lead {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    line-height: 2;
    letter-spacing: 0.1em;
    color: var(--z-ink);
    margin: 1rem 0 0;
}

.store-visual {
    aspect-ratio: 21 / 9;
    background: var(--z-cream-3);
    max-width: var(--z-container-wide);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.store-visual img { width: 100%; height: 100%; object-fit: cover; }

.store-narrative {
    padding: clamp(6rem, 10vw, 10rem) 1.5rem;
}
.store-narrative__inner {
    max-width: 640px;
    margin: 0 auto;
    font-family: var(--z-mincho);
    font-size: 1rem;
    line-height: 2.4;
    letter-spacing: 0.08em;
    color: var(--z-ink-2);
}
.store-narrative__inner p { margin: 0 0 2em; }
.store-narrative__inner p:last-child { margin: 0; }

/* Info table for store details */
.store-info {
    background: var(--z-cream-2);
    padding: clamp(6rem, 10vw, 10rem) 1.5rem;
}
.store-info__inner { max-width: 800px; margin: 0 auto; }
.store-info__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    text-align: center;
    color: var(--z-ink);
    margin: 0 0 3rem;
}
.store-info__list {
    list-style: none;
    padding: 0; margin: 0;
    display: grid;
    gap: 0;
}
.store-info__list li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5em;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--z-line);
}
@media (min-width: 700px) {
    .store-info__list li { grid-template-columns: 180px 1fr; gap: 2rem; align-items: baseline; }
}
.store-info__label {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: var(--z-gold);
}
.store-info__value {
    font-family: var(--z-mincho);
    font-size: 0.95rem;
    line-height: 2;
    color: var(--z-ink-2);
    letter-spacing: 0.05em;
}
.store-info__value a { color: var(--z-gold-3); border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* =====================================================================
   Company / About / generic content pages
   ===================================================================== */
.page-hero {
    padding: 9rem 1.5rem 4rem;
    text-align: center;
    background: var(--z-cream);
}
.page-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 720px;
    margin: 0 auto;
}
.page-hero__eyebrow {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: var(--z-gold);
}
.page-hero__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    line-height: 1.4;
    letter-spacing: 0.2em;
    color: var(--z-ink);
    margin: 0;
}
.page-hero__sub {
    font-family: var(--z-mincho);
    font-size: 1rem;
    line-height: 2.2;
    letter-spacing: 0.08em;
    color: var(--z-ink-3);
    margin: 1rem 0 0;
}

.page-content {
    padding: clamp(5rem, 8vw, 8rem) 1.5rem;
}
.page-content__inner {
    max-width: 720px;
    margin: 0 auto;
    font-family: var(--z-mincho);
    font-size: 1rem;
    line-height: 2.2;
    letter-spacing: 0.05em;
    color: var(--z-ink-2);
}
.page-content__inner h2 {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    color: var(--z-ink);
    margin: 3rem 0 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--z-line);
}
.page-content__inner h3 {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: 0.15em;
    color: var(--z-ink);
    margin: 2.5rem 0 1rem;
}
.page-content__inner p { margin: 0 0 1.5em; }
.page-content__inner a { color: var(--z-gold-3); border-bottom: 1px solid currentColor; }
.page-content__inner ol,
.page-content__inner ul { padding-left: 1.5em; margin: 0 0 1.5em; }
.page-content__inner li { margin: 0.5em 0; }

/* Info table for company page */
.info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
}
.info-table th, .info-table td {
    text-align: left;
    padding: 1.25rem 0.5rem;
    border-bottom: 1px solid var(--z-line);
    font-family: var(--z-mincho);
    font-size: 0.95rem;
    line-height: 1.9;
    vertical-align: top;
    letter-spacing: 0.05em;
}
.info-table th {
    width: 30%;
    font-weight: 400;
    color: var(--z-gold-3);
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    padding-top: 1.6rem;
}
.info-table td { color: var(--z-ink-2); }

/* =====================================================================
   Stores index page
   ===================================================================== */
.stores-index {
    padding: clamp(5rem, 8vw, 8rem) 1.5rem;
    background: var(--z-cream);
}
.stores-index__list {
    display: grid;
    gap: clamp(3rem, 6vw, 5rem);
    max-width: var(--z-container);
    margin: 0 auto;
}
@media (min-width: 720px) {
    .stores-index__list { grid-template-columns: repeat(2, 1fr); }
}
.stores-index__item {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: inherit;
}
.stores-index__visual {
    aspect-ratio: 4 / 5;
    background: var(--z-cream-3);
    overflow: hidden;
    position: relative;
}
.stores-index__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--z-ease); }
.stores-index__item:hover .stores-index__visual img { transform: scale(1.03); }
.stores-index__meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: var(--z-gold);
}
.stores-index__name {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: 1.75rem;
    letter-spacing: 0.05em;
    color: var(--z-ink);
    margin: 0;
    line-height: 1.4;
}
.stores-index__jp {
    font-family: var(--z-mincho);
    font-size: 0.95rem;
    letter-spacing: 0.15em;
    color: var(--z-ink-3);
    margin: 0;
}

/* =====================================================================
   Contact form (Contact Form 7 compatible)
   ===================================================================== */
.contact-form { max-width: 640px; margin: 0 auto; }
.contact-form .cf-field { margin-bottom: 2rem; }
.contact-form label {
    display: block;
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: var(--z-gold);
    margin-bottom: 0.75rem;
}
.contact-form .required { color: var(--z-gold-3); margin-left: 0.5em; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 1rem;
    background: var(--z-cream-2);
    border: 1px solid var(--z-line);
    border-radius: 0;
    font-family: var(--z-mincho);
    font-size: 1rem;
    color: var(--z-ink);
    letter-spacing: 0.05em;
    transition: border-color var(--z-dur-fast) var(--z-ease);
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--z-gold);
}
.contact-form textarea { min-height: 200px; resize: vertical; line-height: 1.9; }

.wpcf7-submit,
.contact-form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 1em;
    padding: 1.25rem 3rem;
    background: var(--z-sumi);
    color: var(--z-cream-on-sumi);
    border: 0;
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--z-dur-fast) var(--z-ease);
}
.wpcf7-submit:hover,
.contact-form button[type="submit"]:hover { background: var(--z-sumi-2); }

.wpcf7-response-output {
    margin: 2rem 0 !important;
    padding: 1.25rem !important;
    border-radius: 0 !important;
    border: 1px solid var(--z-line) !important;
    background: var(--z-cream-2);
    font-family: var(--z-mincho);
    font-size: 0.95rem;
}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer {
    background: var(--z-sumi);
    color: var(--z-cream-on-sumi);
    padding: clamp(5rem, 8vw, 7rem) clamp(1.5rem, 4vw, 3rem) 3rem;
}
.site-footer__inner {
    max-width: var(--z-container);
    margin: 0 auto;
    display: grid;
    gap: 4rem;
    grid-template-columns: 1fr;
}
@media (min-width: 800px) {
    .site-footer__inner { grid-template-columns: 1.2fr 1fr; }
}
.site-footer__brand {
    display: inline-flex;
    align-items: center;
    color: var(--z-cream-on-sumi);
    line-height: 1;
    transition: opacity var(--z-dur-fast) var(--z-ease);
}
.site-footer__brand:hover { opacity: 0.7; }
.site-footer__logo {
    height: 36px;
    width: auto;
    display: block;
    filter: invert(1) brightness(1.05) sepia(0.15) saturate(0.6);
}
.site-footer__tagline {
    font-family: var(--z-mincho);
    font-size: 0.95rem;
    line-height: 2.2;
    color: var(--z-ink-on-sumi);
    letter-spacing: 0.1em;
    margin: 1.5rem 0 0;
    max-width: 380px;
}
.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
.site-footer__nav-title {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: var(--z-gold-on-sumi);
    margin: 0 0 1.5rem;
}
.site-footer__nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.site-footer__nav a {
    font-family: var(--z-mincho);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    color: var(--z-cream-on-sumi);
}
.site-footer__bottom {
    max-width: var(--z-container);
    margin: 4rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(184, 156, 115, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: var(--z-ink-on-sumi);
}

/* =====================================================================
   To top — Zell-style minimal: vertical line + chevron + typography
   ===================================================================== */
.to-top {
    position: fixed;
    right: 2rem;
    bottom: 2.25rem;
    z-index: 30;
    background: transparent;
    border: 0;
    padding: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 320ms var(--z-ease), transform 320ms var(--z-ease);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    color: var(--z-gold);
}
.to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.to-top.is-near-footer {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(20px) !important;
}

.to-top__mark {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20px;
    height: 68px;
    transition: transform 400ms var(--z-ease);
}
.to-top:hover .to-top__mark { transform: translateY(-4px); }

/* Chevron ^ at the top */
.to-top__chevron {
    display: block;
    width: 10px;
    height: 10px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(-45deg);
    margin-top: 4px;
    transition: border-color 300ms var(--z-ease);
}
.to-top:hover .to-top__chevron { border-color: var(--z-gold-3); }

/* Vertical track below the chevron */
.to-top__track {
    position: relative;
    width: 1px;
    height: 46px;
    margin-top: 4px;
    background: currentColor;
    opacity: 0.35;
    overflow: hidden;
}

/* Drop rising upward inside the track — reverse scroll cue */
.to-top__drop {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: 22px;
    transform: translate(-50%, 100%);
    background: linear-gradient(0deg, transparent 0%, var(--z-gold) 100%);
    animation: to-top-rise 2.4s ease-out infinite !important;
    will-change: transform, opacity;
}
@keyframes to-top-rise {
    0%   { transform: translate(-50%, 100%); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translate(-50%, -280%); opacity: 0; }
}

.to-top__label {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.58rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: currentColor;
    opacity: 0.8;
    line-height: 1;
    padding-left: 0.35em;
}

@media (prefers-reduced-motion: reduce) {
    .to-top__drop { animation: none; opacity: 0.4; transform: translate(-50%, -20%); }
}
@media (max-width: 600px) {
    .to-top { right: 1.25rem; bottom: 1.5rem; }
    .to-top__mark { height: 52px; }
    .to-top__track { height: 34px; }
    .to-top__label { font-size: 0.55rem; }
}

/* Scroll progress */
.progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 2px;
    background: transparent;
    z-index: 41;
}
.progress__bar {
    height: 100%;
    width: 0;
    background: var(--z-gold);
    opacity: 0.9;
}

/* =====================================================================
   Reveal on scroll — visible by default, JS-only gate for enhancement
   ===================================================================== */
[data-reveal] {
    opacity: 1;
    transform: none;
    transition: opacity 800ms var(--z-ease), transform 800ms var(--z-ease);
}
html.js-enabled [data-reveal]:not(.is-in) {
    opacity: 0;
    transform: translateY(20px);
}
html.js-enabled [data-reveal].is-in {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    html.js-enabled [data-reveal]:not(.is-in),
    html.js-enabled [data-reveal].is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
    html { scroll-behavior: auto; }
}

/* =====================================================================
   404
   ===================================================================== */
.error-page {
    min-height: 80vh;
    display: grid;
    place-items: center;
    padding: 6rem 1.5rem;
    text-align: center;
}
.error-page__code {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(4rem, 10vw, 7rem);
    color: var(--z-gold);
    letter-spacing: 0.1em;
    margin: 0 0 1rem;
}
.error-page__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    color: var(--z-ink);
    margin: 0 0 1rem;
}
.error-page__body {
    font-family: var(--z-mincho);
    font-size: 0.95rem;
    line-height: 2.1;
    color: var(--z-ink-3);
    max-width: 480px;
    margin: 0 auto 2rem;
}
.error-page__link {
    display: inline-flex;
    gap: 0.75em;
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: var(--z-gold);
    padding-bottom: 0.4em;
    border-bottom: 1px solid var(--z-gold);
}

/* =====================================================================
   Blog list (home / archive / single)
   ===================================================================== */
.blog-list {
    display: grid;
    gap: 3rem;
    max-width: var(--z-container);
    margin: 0 auto;
}
.blog-list article {
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--z-line);
}
.blog-list article:last-child { border-bottom: 0; }
.blog-list h2 {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    line-height: 1.8;
    margin: 0 0 0.8rem;
}
.blog-list .meta {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: var(--z-gold);
    margin: 0 0 1rem;
}
.blog-list .excerpt {
    font-family: var(--z-mincho);
    font-size: 0.95rem;
    line-height: 2;
    color: var(--z-ink-3);
    letter-spacing: 0.05em;
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1100px) {
    .nav-primary { display: none; }
    .menu-toggle { display: block; }
}

/* Prevent Twenty Twenty-Five parent theme from overriding our type */
.wp-site-blocks { padding: 0 !important; }
body .wp-block-group { margin: 0; }

/* =====================================================================
   News preview on front page
   ===================================================================== */
.news-preview { background: var(--z-cream-2); padding: clamp(6rem, 10vw, 10rem) 1.5rem; }
.news-preview__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}
.news-preview__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    letter-spacing: 0.2em;
    color: var(--z-ink);
    margin: 0;
}
.news-preview__list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 720px;
    display: grid;
    gap: 0;
}
.news-preview__item {
    border-top: 1px solid var(--z-line);
}
.news-preview__item:last-child { border-bottom: 1px solid var(--z-line); }
.news-preview__item a {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.75rem 0.5rem;
    color: inherit;
    transition: background var(--z-dur-fast) var(--z-ease);
}
.news-preview__item a:hover {
    background: var(--z-cream-2);
    opacity: 1;
}
.news-preview__date {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: var(--z-track-loose);
    color: var(--z-gold);
    white-space: nowrap;
}
.news-preview__cat {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--z-ink-3);
    padding: 0.25em 0.75em;
    border: 1px solid var(--z-line);
    white-space: nowrap;
}
.news-preview__title-txt {
    font-family: var(--z-mincho);
    font-size: 0.95rem;
    line-height: 1.8;
    letter-spacing: 0.05em;
    color: var(--z-ink);
}
.news-preview__arrow {
    font-family: var(--z-sans);
    font-weight: 300;
    color: var(--z-gold);
    transition: transform var(--z-dur-fast) var(--z-ease);
}
.news-preview__item a:hover .news-preview__arrow { transform: translateX(4px); }
.news-preview__empty {
    text-align: center;
    font-family: var(--z-mincho);
    color: var(--z-ink-3);
    margin: 3rem 0;
    letter-spacing: 0.1em;
}
.news-preview__more {
    text-align: center;
    margin-top: 3rem;
}

@media (max-width: 700px) {
    .news-preview__item a {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 1.5rem 0;
    }
    .news-preview__arrow { display: none; }
    .news-preview__cat { justify-self: start; }
}

/* =====================================================================
   Recruit CTA on front page (dark)
   ===================================================================== */
.recruit-cta {
    padding: clamp(8rem, 14vw, 12rem) 1.5rem;
    display: grid;
    place-items: center;
    text-align: center;
}
.recruit-cta__inner {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 4vw, 3rem);
}
.recruit-cta__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 2;
    letter-spacing: 0.15em;
    color: var(--z-cream-on-sumi);
    margin: 0;
}
.recruit-cta__body {
    font-family: var(--z-mincho);
    font-size: 0.95rem;
    line-height: 2.4;
    letter-spacing: 0.1em;
    color: var(--z-ink-on-sumi);
    margin: 0;
}
.recruit-cta__link {
    display: inline-flex;
    align-items: center;
    gap: 1em;
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.8rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: var(--z-gold-on-sumi);
    padding: 1.25rem 3rem;
    border: 1px solid var(--z-gold-on-sumi);
    transition: background var(--z-dur-fast) var(--z-ease), color var(--z-dur-fast) var(--z-ease);
    margin-top: 1rem;
}
.recruit-cta__link:hover {
    background: var(--z-gold-on-sumi);
    color: var(--z-sumi);
    opacity: 1;
}
.recruit-cta__link .arrow {
    display: inline-block;
    transition: transform var(--z-dur-fast) var(--z-ease);
}
.recruit-cta__link:hover .arrow { transform: translateX(4px); }

/* =====================================================================
   News list page (/news/)
   ===================================================================== */
.news-list { padding: clamp(4rem, 7vw, 7rem) 1.5rem; }
.news-list__items {
    list-style: none;
    padding: 0;
    margin: 0 0 4rem;
}
.news-list__item {
    border-top: 1px solid var(--z-line);
}
.news-list__item:last-child { border-bottom: 1px solid var(--z-line); }
.news-list__item a {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 2rem 0.5rem;
    color: inherit;
    transition: background var(--z-dur-fast) var(--z-ease);
}
.news-list__item a:hover { background: var(--z-cream-2); opacity: 1; }
.news-list__meta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}
.news-list__date {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: var(--z-track-loose);
    color: var(--z-gold);
}
.news-list__cat {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--z-ink-3);
    padding: 0.25em 0.75em;
    border: 1px solid var(--z-line);
}
.news-list__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    color: var(--z-ink);
    margin: 0;
    line-height: 1.9;
}
.news-list__arrow {
    font-family: var(--z-sans);
    font-weight: 300;
    color: var(--z-gold);
    align-self: end;
}
.news-list__empty {
    text-align: center;
    font-family: var(--z-mincho);
    color: var(--z-ink-3);
    margin: 4rem 0;
    letter-spacing: 0.1em;
}

/* Pagination */
.news-list__pager .nav-links {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.news-list__pager .page-numbers {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: var(--z-track-loose);
    padding: 0.75em 1.25em;
    color: var(--z-ink-3);
    border: 1px solid transparent;
    transition: all var(--z-dur-fast) var(--z-ease);
}
.news-list__pager .page-numbers.current {
    color: var(--z-gold);
    border-color: var(--z-gold);
}
.news-list__pager .page-numbers:hover:not(.current) {
    color: var(--z-gold);
    border-color: var(--z-line);
    opacity: 1;
}

/* =====================================================================
   Single article content refinements
   ===================================================================== */
.news-single .page-content__inner { max-width: 720px; }
.news-single .page-content__inner img { margin: 2rem auto; }
.news-single .page-content__inner blockquote {
    border-left: 2px solid var(--z-gold);
    padding: 0.5em 0 0.5em 1.5em;
    margin: 2em 0;
    color: var(--z-ink-3);
    font-style: normal;
    letter-spacing: 0.05em;
}

/* Ordered list numbering for legal pages */
.page-content__inner ol {
    counter-reset: legal-counter;
    list-style: none;
    padding-left: 0;
}
.page-content__inner ol > li {
    counter-increment: legal-counter;
    padding-left: 2.5em;
    position: relative;
}
.page-content__inner ol > li::before {
    content: counter(legal-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.85em;
    color: var(--z-gold);
    letter-spacing: 0.1em;
}

/* Recruit CTA — property sub-link */
.recruit-cta__property {
    margin-top: 2.5rem;
    font-family: var(--z-mincho);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--z-ink-on-sumi);
}
.recruit-cta__property a {
    color: var(--z-gold-on-sumi);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color var(--z-dur-fast) var(--z-ease);
    margin-left: 0.5em;
}
.recruit-cta__property a:hover {
    border-bottom-color: var(--z-gold-on-sumi);
    opacity: 1;
}
.recruit-cta__property a .arrow {
    display: inline-block;
    transition: transform var(--z-dur-fast) var(--z-ease);
    margin-left: 0.4em;
}
.recruit-cta__property a:hover .arrow { transform: translateX(3px); }

/* =====================================================================
   Water animations — 滴り / 波紋 / 波
   ===================================================================== */

/* --- 1. Rule-v: 一滴が上から下へ描画される — page-load animation (JS-independent, forced) --- */
.rule-v {
    position: relative;
    opacity: 0.7;
    animation: rule-drop 1.6s var(--z-ease) 0.3s both !important;
    transform-origin: top center;
    will-change: transform, opacity;
}
@keyframes rule-drop {
    0%   { transform: scaleY(0); opacity: 0; }
    40%  { opacity: 0.9; }
    100% { transform: scaleY(1); opacity: 0.7; }
}

/* --- 2. Rule-v: 下端からの波紋 — always-on ambient (JS-independent, forced) --- */
.rule-v::before,
.rule-v::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 8px;
    height: 8px;
    border: 1px solid var(--z-gold);
    border-radius: 50%;
    transform: translate(-50%, 0) scale(0);
    opacity: 0;
    pointer-events: none;
    animation: ripple-spread 5s var(--z-ease) 1s infinite !important;
    will-change: transform, opacity;
}
.rule-v::after { animation-delay: 3.5s !important; }
.section--dark .rule-v::before,
.section--dark .rule-v::after {
    border-color: var(--z-gold-on-sumi);
}

@keyframes ripple-spread {
    0%   { transform: translate(-50%, 0) scale(0);   opacity: 0;    border-width: 1.2px; }
    10%  { transform: translate(-50%, 0) scale(0.5); opacity: 0.75; border-width: 1.2px; }
    100% { transform: translate(-50%, 0) scale(16);  opacity: 0;    border-width: 0.4px; }
}

/* --- 3. クリック波紋: JSで注入される要素のスタイル --- */
.click-ripple {
    position: absolute;
    pointer-events: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid var(--z-gold);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.55;
    z-index: 1;
    animation: click-ripple-out 900ms var(--z-ease) forwards;
}
.section--dark .click-ripple,
.store-card--dark .click-ripple {
    border-color: var(--z-gold-on-sumi);
}
@keyframes click-ripple-out {
    0%   { transform: translate(-50%, -50%) scale(0);  opacity: 0.55; border-width: 1.5px; }
    100% { transform: translate(-50%, -50%) scale(50); opacity: 0;    border-width: 0.5px; }
}

/* Position parents for ripples */
.recruit-cta__link,
.stores-index__item,
.store-card,
.error-page__link,
.wpcf7-submit,
.contact-form button[type="submit"] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}/* --- 4. Passage title shimmer — with @supports fallback --- */
.passage__title {
    color: var(--z-cream-on-sumi);
}
.passage__title .gold { color: var(--z-gold-on-sumi); }

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .passage__title {
        background: linear-gradient(90deg,
            var(--z-cream-on-sumi) 0%,
            var(--z-gold-on-sumi) 50%,
            var(--z-cream-on-sumi) 100%);
        background-size: 200% 100%;
        background-position: 100% 0;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: shimmer 12s var(--z-ease) 1s infinite;
    }
    .passage__title .gold {
        color: transparent;
        background: inherit;
        background-clip: text;
        -webkit-background-clip: text;
    }
}

@keyframes shimmer {
    0%   { background-position: 100% 0; }
    50%  { background-position: 0% 0; }
    100% { background-position: -100% 0; }
}

/* --- 5. Reduced motion — 全てOFF --- */
@media (prefers-reduced-motion: reduce) {
    .rule-v {
        animation: none;
        transform: scaleY(1);
        opacity: 0.7;
    }
    .rule-v::before,
    .rule-v::after {
        animation: none !important;
        display: none;
    }
    .click-ripple { animation: none; display: none; }
    .passage__title {
        animation: none;
        background: none;
        -webkit-background-clip: unset;
        background-clip: unset;
        color: var(--z-cream-on-sumi);
    }
    .passage__title .gold { color: var(--z-gold-on-sumi); background: none; }
}

/* =====================================================================
   Scroll cue — 右端で3つの光滴が順に降りる
   ===================================================================== */
.scroll-cue {
    position: absolute;
    right: 2.5rem;
    bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    z-index: 2;
    pointer-events: none;
}
.scroll-cue__label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.65rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--z-gold);
    opacity: 0.85;
    line-height: 1;
    padding-right: 0.15em;
}
.scroll-cue__track {
    position: relative;
    width: 1px;
    height: 100px;
    background: rgba(160, 136, 98, 0.18);
    overflow: hidden;
}
.scroll-cue__dot {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -100%);
    width: 1px;
    height: 22px;
    background: linear-gradient(180deg, transparent 0%, var(--z-gold) 100%);
    animation: scroll-cue-drop 2.8s cubic-bezier(0.55, 0.05, 0.35, 1) infinite !important;
    will-change: transform, opacity;
}
.scroll-cue__dot:nth-child(1) { animation-delay: 0s; }
.scroll-cue__dot:nth-child(2) { animation-delay: 0.9s; }
.scroll-cue__dot:nth-child(3) { animation-delay: 1.8s; }
@keyframes scroll-cue-drop {
    0%   { transform: translate(-50%, -100%); opacity: 0; }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { transform: translate(-50%, 460%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-cue__dot { animation: none; opacity: 0.6; transform: translate(-50%, 30%); }
}
@media (max-width: 900px) {
    .scroll-cue { right: 1.25rem; bottom: 2rem; gap: 1rem; }
    .scroll-cue__track { height: 72px; }
}
@media (max-width: 600px) {
    .scroll-cue { right: 1rem; bottom: 1.5rem; }
    .scroll-cue__track { height: 56px; }
    .scroll-cue__label { font-size: 0.6rem; }
}

/* =====================================================================
   Stores CTA on front page — single invitation section
   ===================================================================== */
.stores-cta {
    padding: clamp(8rem, 14vw, 12rem) 1.5rem;
    background: var(--z-cream);
    display: grid;
    place-items: center;
    text-align: center;
}
.stores-cta__inner {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 4vw, 3rem);
}
.stores-cta__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    line-height: 1.9;
    letter-spacing: 0.15em;
    color: var(--z-ink);
    margin: 0;
}
.stores-cta__body {
    font-family: var(--z-mincho);
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    line-height: 2.4;
    letter-spacing: 0.08em;
    color: var(--z-ink-2);
    max-width: 620px;
}
.stores-cta__body p { margin: 0 0 1.5em; }
.stores-cta__body p:last-child { margin: 0; }
.stores-cta__link {
    display: inline-flex;
    align-items: center;
    gap: 1em;
    padding: 1.25rem 3rem;
    border: 1px solid var(--z-gold);
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: var(--z-gold);
    transition: background var(--z-dur-fast) var(--z-ease), color var(--z-dur-fast) var(--z-ease);
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
}
.stores-cta__link:hover {
    background: var(--z-gold);
    color: var(--z-cream);
    opacity: 1;
}
.stores-cta__link .arrow {
    display: inline-block;
    transition: transform var(--z-dur-fast) var(--z-ease);
}
.stores-cta__link:hover .arrow { transform: translateX(4px); }

/* =====================================================================
   Header actions responsive — collapse CTA text below very narrow
   ===================================================================== */
@media (max-width: 480px) {
    .header-cta {
        padding: 0.6em 1em;
        font-size: 0.62rem;
    }
    .header-actions { gap: 0.75rem; margin-left: 0.5rem; }
}

/* Add ripple parent context for stores-cta__link */
.stores-cta__link { position: relative; overflow: hidden; isolation: isolate; }

/* =====================================================================
   Section background differentiation on front page
   (Stores CTA=cream / News=cream-2 / Recruit=sumi-2 / Footer=sumi)
   ===================================================================== */
.stores-cta { background: var(--z-cream); }
.recruit-cta.section--dark { background: var(--z-sumi-2); }
.site-footer { background: var(--z-sumi); }

/* Also differentiate news-preview list item hover on cream-2 backdrop */
.news-preview__item a:hover { background: var(--z-cream-3); }
.news-preview__cat { border-color: var(--z-cream-3); background: var(--z-cream); }

/* =====================================================================
   Hero image mode — Ken Burns + dark overlay + cream typography
   ===================================================================== */
.hero--image {
    background: var(--z-sumi);
    color: var(--z-cream-on-sumi);
    overflow: hidden;
}
.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation: hero-kenburns 26s ease-out both !important;
    will-change: transform;
}
@keyframes hero-kenburns {
    0%   { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.hero__vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(26, 22, 19, 0.30) 0%,
            rgba(26, 22, 19, 0.55) 50%,
            rgba(26, 22, 19, 0.78) 100%),
        radial-gradient(ellipse at center,
            rgba(26, 22, 19, 0.15) 0%,
            rgba(26, 22, 19, 0.55) 100%);
}
.hero--image .hero__inner {
    position: relative;
    z-index: 1;
}

/* Text — cream on dark hero */
.hero--image .hero__title { color: var(--z-cream-on-sumi); }
.hero--image .hero__title .line { color: inherit; }
.hero--image .hero__sub { color: var(--z-ink-on-sumi); }
.hero--image .eyebrow { color: var(--z-gold-on-sumi); }
.hero--image .jp-flank { color: var(--z-gold-on-sumi); }
.hero--image .rule-v { background: var(--z-gold-on-sumi); }
.hero--image .rule-v::before,
.hero--image .rule-v::after { border-color: var(--z-gold-on-sumi); }
.hero--image .rule-h-label { color: var(--z-gold-on-sumi); }
.hero--image .rule-h-label::before,
.hero--image .rule-h-label::after { background: var(--z-gold-on-sumi); }

/* Header on hero image page — logo invert while at top */
body.is-front .site-header:not(.is-scrolled) .brand__logo {
    filter: invert(1) brightness(1.1) sepia(0.15) saturate(0.6);
    transition: filter 300ms var(--z-ease);
}
body.is-front .site-header:not(.is-scrolled) { color: var(--z-cream-on-sumi); }
body.is-front .site-header:not(.is-scrolled) .header-cta { color: var(--z-gold-on-sumi); }
body.is-front .site-header:not(.is-scrolled) .menu-toggle { color: var(--z-cream-on-sumi); }

/* Scroll cue on hero image — brighter gold for visibility on darker bg */
.hero--image .scroll-cue__label { color: var(--z-gold-on-sumi); }
.hero--image .scroll-cue__track { background: rgba(184, 156, 115, 0.28); }
.hero--image .scroll-cue__dot {
    background: linear-gradient(180deg, transparent 0%, var(--z-gold-on-sumi) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .hero__image { animation: none !important; transform: none; }
}

/* =====================================================================
   Property page CTA wrapper — centered send button
   ===================================================================== */
.property-cta {
    text-align: center;
    padding: clamp(3rem, 6vw, 5rem) 1.5rem clamp(5rem, 8vw, 7rem);
    background: var(--z-cream);
}

/* =====================================================================
   About page — chaptered narrative
   ===================================================================== */
.about-theme {
    padding: clamp(7rem, 12vw, 12rem) 1.5rem;
    text-align: center;
    background: var(--z-cream);
}
.about-theme__inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 4vw, 3rem);
}
.about-theme__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.9;
    letter-spacing: 0.15em;
    color: var(--z-ink);
    margin: 0;
}
.about-theme__title .gold { color: var(--z-gold); }
.about-theme--closing { background: var(--z-cream-2); }

/* Chapter — narrative section */
.chapter {
    padding: clamp(6rem, 12vw, 11rem) 1.5rem;
    text-align: center;
    background: var(--z-cream);
}
.chapter--alt  { background: var(--z-cream-2); }
.chapter--dark { background: var(--z-sumi); color: var(--z-cream-on-sumi); }

.chapter__inner {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 4vw, 3rem);
}

.chapter__num {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.5em;
    color: var(--z-gold);
    line-height: 1;
    padding-left: 0.5em;
}
.chapter--dark .chapter__num { color: var(--z-gold-on-sumi); }

.chapter__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    line-height: 1.95;
    letter-spacing: 0.15em;
    color: var(--z-ink);
    margin: 0;
}
.chapter--dark .chapter__title { color: var(--z-cream-on-sumi); }
.chapter__title .gold { color: var(--z-gold); }
.chapter--dark .chapter__title .gold { color: var(--z-gold-on-sumi); }

.chapter__body {
    font-family: var(--z-mincho);
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    line-height: 2.4;
    letter-spacing: 0.1em;
    color: var(--z-ink-3);
    max-width: 560px;
}
.chapter--dark .chapter__body { color: var(--z-ink-on-sumi); }
.chapter__body p { margin: 0 0 0.5em; }
.chapter__body p:last-child { margin: 0; }

/* =====================================================================
   About Us page — hero corner marker, chapter grid, CTA
   ===================================================================== */

/* Hero corner "About Us | — | 01" marker */
.page-hero--about { position: relative; }
.page-hero__corner {
    position: absolute;
    top: clamp(6rem, 8vw, 8rem);
    right: clamp(1.5rem, 4vw, 3.5rem);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    z-index: 2;
}
.page-hero__corner-label {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.68rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--z-gold);
    line-height: 1;
}
.page-hero__corner-divider {
    display: block;
    width: 28px;
    height: 1px;
    background: var(--z-gold);
    opacity: 0.65;
}
.page-hero__corner-num {
    font-family: var(--z-mincho);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: var(--z-gold);
    line-height: 1;
}
@media (max-width: 600px) {
    .page-hero__corner { top: 5rem; right: 1rem; gap: 0.5rem; }
    .page-hero__corner-label { font-size: 0.6rem; }
    .page-hero__corner-divider { width: 18px; }
    .page-hero__corner-num { font-size: 0.75rem; }
}

/* Hero inner override for About */
.about-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
    max-width: 880px;
}
.about-hero__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.85rem, 3.5vw, 3rem);
    line-height: 2;
    letter-spacing: 0.15em;
    color: var(--z-ink);
    margin: 0;
}

/* Chapter transition — quiet breath between light and dark sections */
.chapter-transition {
    background: var(--z-cream);
    padding: clamp(4rem, 7vw, 6rem) 1.5rem;
    text-align: center;
}

/* Chapter 06 grid — 2×2 white cards */
.chapter--grid .chapter__inner {
    max-width: 900px;
}
.chapter__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgba(160, 136, 98, 0.18);
    border: 1px solid rgba(160, 136, 98, 0.18);
    margin-top: clamp(2rem, 4vw, 3rem);
    width: 100%;
}
@media (max-width: 700px) {
    .chapter__grid { grid-template-columns: 1fr; }
}
.chapter__grid-item {
    padding: clamp(2rem, 4vw, 3rem);
    background: #ffffff;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.chapter__grid-en {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.68rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--z-gold);
    margin: 0;
    display: block;
    line-height: 1;
}
.chapter__grid-title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: 1.15rem;
    letter-spacing: 0.2em;
    color: var(--z-ink);
    margin: 0;
    line-height: 1.7;
}
.chapter__grid-body {
    font-family: var(--z-mincho);
    font-size: 0.9rem;
    line-height: 2.15;
    color: var(--z-ink-3);
    letter-spacing: 0.05em;
    margin: 0;
}

/* Closing OUR THEME — larger, more presence */
.about-theme__title--closing {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.75;
    letter-spacing: 0.2em;
}

/* CTA — sumi dark with dual buttons */
.about-cta {
    padding: clamp(6rem, 10vw, 10rem) 1.5rem;
    background: var(--z-sumi);
    color: var(--z-cream-on-sumi);
    text-align: center;
}
.about-cta__inner {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4rem);
}
.about-cta__text {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 2;
    letter-spacing: 0.12em;
    color: var(--z-cream-on-sumi);
    margin: 0;
}
.about-cta__buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
.about-cta__button {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    padding: 1.15em 2.6em;
    border: 1px solid var(--z-gold-on-sumi);
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: var(--z-track-loose);
    text-transform: uppercase;
    color: var(--z-cream-on-sumi);
    transition: background var(--z-dur-fast) var(--z-ease),
                color var(--z-dur-fast) var(--z-ease),
                border-color var(--z-dur-fast) var(--z-ease);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.about-cta__button .arrow { display: inline-block; transition: transform var(--z-dur-fast) var(--z-ease); }
.about-cta__button:hover {
    background: var(--z-gold-on-sumi);
    color: var(--z-sumi);
    opacity: 1;
}
.about-cta__button:hover .arrow { transform: translateX(3px); }

.about-cta__button--primary {
    background: var(--z-gold-on-sumi);
    color: var(--z-sumi);
}
.about-cta__button--primary:hover {
    background: transparent;
    color: var(--z-cream-on-sumi);
    border-color: var(--z-cream-on-sumi);
}

/* =====================================================================
   LULL SHIBUYA — English tagline & Coming Soon marker
   ===================================================================== */
.lull-tagline-en {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    font-style: italic;
    color: var(--z-gold-on-sumi);
    margin: 0.5rem 0 0;
    opacity: 0.85;
}
.coming-soon {
    font-family: var(--z-sans);
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--z-gold-on-sumi);
    margin-top: 2.5rem;
    line-height: 1;
    padding-left: 0.4em;
}
/* Bright gold when on cream backgrounds (e.g. info table Status row uses inline color already) */

/* =====================================================================
   Store detail — meta bar / italic name / tagline
   ===================================================================== */
.store-meta-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    font-family: var(--z-sans);
}
.store-meta-bar__back {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--z-gold);
    padding-block: 0.4em;
    position: relative;
}
.store-meta-bar__back::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1px; background: currentColor;
    transition: right 300ms var(--z-ease);
}
.store-meta-bar__back:hover::after { right: 0; }
.store-meta-bar__divider {
    display: inline-block; width: 28px; height: 1px;
    background: var(--z-gold); opacity: 0.6;
}
.store-meta-bar__num {
    font-family: var(--z-mincho);
    font-size: 0.85rem; letter-spacing: 0.1em; color: var(--z-gold);
}
.store-meta-bar__loc {
    font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--z-gold); font-weight: 300;
}
.section--dark .store-meta-bar__back,
.section--dark .store-meta-bar__num,
.section--dark .store-meta-bar__loc { color: var(--z-gold-on-sumi); }
.section--dark .store-meta-bar__divider { background: var(--z-gold-on-sumi); }

.store-italic-name {
    font-family: var(--z-mincho);
    font-style: italic;
    font-size: 0.85rem;
    letter-spacing: 0.28em;
    color: var(--z-gold);
    margin: 0 0 0.8rem;
    display: block;
}
.section--dark .store-italic-name { color: var(--z-gold-on-sumi); }

.store-hero__jp-main {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--z-ink);
    margin: 0 0 2rem;
}
.section--dark .store-hero__jp-main { color: var(--z-cream-on-sumi); }

.store-tagline {
    font-family: var(--z-mincho);
    font-style: italic;
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    line-height: 2;
    color: var(--z-ink-2);
    margin: 0 0 3rem;
    letter-spacing: 0.06em;
}
.section--dark .store-tagline { color: var(--z-ink-on-sumi); }
.store-tagline .gold-mark { color: var(--z-gold); font-style: italic; }
.section--dark .store-tagline .gold-mark { color: var(--z-gold-on-sumi); }

/* Full width main visual */
.store-visual--main {
    max-width: 1280px;
    margin: 0 auto clamp(5rem, 8vw, 8rem);
    padding: 0 clamp(1.25rem, 4vw, 3.5rem);
    background: var(--z-cream);
}
.section--dark + .store-visual--main,
.store-visual--main-dark { background: var(--z-sumi); }
.store-visual--main__frame {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--z-cream-3);
}
.store-visual--main__frame img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 2s var(--z-ease);
}
.store-visual--main:hover img { transform: scale(1.02); }

/* Statement */
.store-statement {
    padding: 0 1.5rem clamp(5rem, 8vw, 8rem);
    text-align: center;
    background: var(--z-cream);
}
.store-statement--dark { background: var(--z-sumi); }
.store-statement__inner {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}
.store-statement__lead {
    font-family: var(--z-mincho);
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    line-height: 2.2;
    color: var(--z-ink);
    letter-spacing: 0.08em;
    margin: 0;
}
.store-statement--dark .store-statement__lead { color: var(--z-cream-on-sumi); }
.store-statement__lead .gold-mark { color: var(--z-gold); font-style: italic; }
.store-statement--dark .store-statement__lead .gold-mark { color: var(--z-gold-on-sumi); }
.store-statement__body {
    font-family: var(--z-mincho);
    font-size: 0.9rem;
    line-height: 2.3;
    color: var(--z-ink-3);
    letter-spacing: 0.05em;
    margin: 0;
}
.store-statement--dark .store-statement__body { color: var(--z-ink-on-sumi); }
.store-statement__body p { margin: 0 0 1.5em; }
.store-statement__body p:last-child { margin: 0; }

/* Chapter split — 2-col image + text */
.chapter--split { padding-block: clamp(6rem, 10vw, 10rem); }
.chapter--split .chapter__inner {
    max-width: 1180px;
    align-items: stretch;
    text-align: left;
    gap: 0;
}
.chapter__split {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    width: 100%;
    margin-bottom: clamp(3rem, 5vw, 5rem);
}
.chapter__split:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
    .chapter__split { grid-template-columns: 1fr 1.05fr; }
    .chapter__split--flip { grid-template-columns: 1.2fr 1fr; }
    .chapter__split--flip .chapter__split-body { order: -1; }
}
.chapter__split-visual {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--z-cream-3);
}
.chapter__split-visual--portrait { aspect-ratio: 4 / 5; }
.chapter__split-visual img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.4s var(--z-ease);
}
.chapter__split-visual:hover img { transform: scale(1.03); }
.chapter__split-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-block: 1rem;
}
.chapter__split-meta {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.chapter__split-meta-num {
    font-family: var(--z-mincho);
    font-size: 0.9rem; letter-spacing: 0.1em; color: var(--z-gold);
}
.chapter__split-meta-divider {
    display: inline-block; width: 28px; height: 1px;
    background: var(--z-gold); opacity: 0.6;
}
.chapter__split-meta-en {
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.68rem;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--z-gold);
}
.chapter__split-title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.7;
    letter-spacing: 0.08em;
    color: var(--z-ink);
    margin: 0.25rem 0 0.5rem;
}
.chapter__split-title .gold-mark { color: var(--z-gold); font-style: italic; }
.chapter__split-body-text {
    font-family: var(--z-mincho);
    font-size: 0.9rem;
    line-height: 2.3;
    color: var(--z-ink-3);
    letter-spacing: 0.05em;
    margin: 0;
}
.chapter__split-body-text p { margin: 0 0 1em; }
.chapter__split-body-text p:last-child { margin: 0; }
.chapter__split-body-text strong { color: var(--z-ink); font-weight: 400; }

/* Chapter gallery — 3-col image row */
.chapter__gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    width: 100%;
}
@media (min-width: 700px) {
    .chapter__gallery { grid-template-columns: repeat(3, 1fr); }
}
.chapter__gallery-item {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--z-cream-3);
    position: relative;
}
.chapter__gallery-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.4s var(--z-ease);
}
.chapter__gallery-item:hover img { transform: scale(1.03); }

/* Reservation card that fits in a gallery slot */
.chapter__gallery-item--reserve {
    background: var(--z-sumi);
    color: var(--z-cream-on-sumi);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.75rem;
    text-align: center;
}
.chapter__gallery-item--reserve .rsv-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}
.chapter__gallery-item--reserve .rsv-label {
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.65rem;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--z-gold-on-sumi);
}
.chapter__gallery-item--reserve .rsv-body {
    font-family: var(--z-mincho);
    font-size: 0.9rem; line-height: 1.85;
    color: var(--z-cream-on-sumi);
    margin: 0;
    letter-spacing: 0.05em;
}
.chapter__gallery-item--reserve .rsv-link {
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.65rem;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--z-gold-on-sumi);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--z-gold-on-sumi);
    margin-top: 0.4rem;
}

/* Chapter mosaic — 6-col grid for Shal 5-image space */
.chapter__mosaic {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    width: 100%;
}
@media (min-width: 700px) {
    .chapter__mosaic {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 260px;
    }
    .chapter__mosaic-item--wide { grid-column: span 4; }
    .chapter__mosaic-item--half { grid-column: span 2; }
}
.chapter__mosaic-item {
    overflow: hidden;
    background: var(--z-cream-3);
}
@media (max-width: 699px) {
    .chapter__mosaic-item { aspect-ratio: 4 / 3; }
}
.chapter__mosaic-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.4s var(--z-ease);
}
.chapter__mosaic-item:hover img { transform: scale(1.03); }

/* Google Maps section */
.store-map {
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(3rem, 5vw, 4rem) 0 0;
}
.store-map__label {
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.68rem;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--z-gold);
    text-align: center;
    display: block;
    margin-bottom: 1.25rem;
}
.store-map__frame {
    position: relative;
    width: 100%;
    padding-bottom: 50%;
    overflow: hidden;
    border: 1px solid var(--z-line);
    background: var(--z-cream-3);
}
.store-map__frame iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border: 0;
}
.store-map__frame--dark iframe {
    filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.85) saturate(0.4);
}
.store-map__link {
    display: block;
    text-align: center;
    margin-top: 1.25rem;
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.68rem;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--z-gold);
}
.store-map__link span {
    border-bottom: 1px solid var(--z-line);
    padding-bottom: 4px;
    transition: border-color 300ms var(--z-ease);
}
.store-map__link:hover span { border-color: var(--z-gold); }

/* Reservation CTA (dark) */
.reservation-cta {
    padding: clamp(6rem, 10vw, 10rem) 1.5rem;
    background: var(--z-sumi);
    color: var(--z-cream-on-sumi);
    text-align: center;
}
.reservation-cta__inner {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.reservation-cta__label {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    justify-content: center;
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.7rem;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--z-gold-on-sumi);
}
.reservation-cta__label::before,
.reservation-cta__label::after {
    content: "";
    display: inline-block;
    width: 28px; height: 1px;
    background: var(--z-gold-on-sumi);
    opacity: 0.6;
}
.reservation-cta__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    line-height: 1.85;
    letter-spacing: 0.1em;
    color: var(--z-cream-on-sumi);
    margin: 0;
}
.reservation-cta__title .gold-mark {
    color: var(--z-gold-on-sumi);
    font-style: italic;
}
.reservation-cta__note {
    font-family: var(--z-mincho);
    font-size: 0.85rem;
    color: var(--z-ink-on-sumi);
    line-height: 2;
    margin: 0 0 0.5rem;
}
.reservation-cta__buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
.reservation-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    padding: 1.1em 2.4em;
    border: 1px solid rgba(216, 207, 184, 0.35);
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.72rem;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--z-cream-on-sumi);
    transition: all 300ms var(--z-ease);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.reservation-cta__btn:hover {
    background: var(--z-cream-on-sumi);
    color: var(--z-sumi);
    border-color: var(--z-cream-on-sumi);
    opacity: 1;
}
.reservation-cta__btn--primary {
    background: var(--z-gold-on-sumi);
    border-color: var(--z-gold-on-sumi);
    color: var(--z-sumi);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    padding: 1.2em 2.8em;
}
.reservation-cta__btn--primary:hover {
    background: var(--z-gold-3);
    border-color: var(--z-gold-3);
    color: var(--z-cream-on-sumi);
}

/* Other stores */
.other-stores {
    padding: clamp(5rem, 8vw, 7rem) 1.5rem;
    background: var(--z-cream);
    text-align: center;
}
.other-stores--dark {
    background: var(--z-sumi);
    color: var(--z-cream-on-sumi);
}
.other-stores__inner {
    max-width: 680px;
    margin: 0 auto;
}
.other-stores__label {
    display: block;
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.68rem;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--z-gold);
    margin-bottom: 1.5rem;
}
.other-stores--dark .other-stores__label { color: var(--z-gold-on-sumi); }
.other-stores__lead {
    font-family: var(--z-mincho);
    font-size: 0.9rem;
    color: var(--z-ink-3);
    margin: 0 0 2rem;
    letter-spacing: 0.05em;
}
.other-stores--dark .other-stores__lead { color: var(--z-ink-on-sumi); }
.other-stores__links {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.other-stores__link {
    display: inline-flex;
    align-items: center;
    padding: 0.9em 1.6em;
    border: 1px solid rgba(43, 38, 33, 0.35);
    font-family: var(--z-mincho);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--z-ink);
    transition: all 300ms var(--z-ease);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.other-stores__link:hover {
    background: var(--z-sumi);
    color: var(--z-cream-on-sumi);
    border-color: var(--z-sumi);
    opacity: 1;
}
.other-stores--dark .other-stores__link {
    border-color: rgba(216, 207, 184, 0.3);
    color: var(--z-cream-on-sumi);
}
.other-stores--dark .other-stores__link:hover {
    background: var(--z-cream-on-sumi);
    color: var(--z-sumi);
    border-color: var(--z-cream-on-sumi);
}

/* Mugen — poetry section */
.mugen-poem {
    padding: clamp(5rem, 8vw, 7rem) 1.5rem;
    background: var(--z-sumi);
    color: var(--z-cream-on-sumi);
}
.mugen-poem__inner {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3rem, 6vw, 5rem);
}
.mugen-poem__verse {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 3;
    color: var(--z-cream-on-sumi);
    margin: 0;
    letter-spacing: 0.08em;
}
.mugen-poem__verse--emphasis {
    color: var(--z-gold-on-sumi);
    font-size: clamp(1.15rem, 1.6vw, 1.3rem);
    line-height: 2.6;
}
.mugen-poem__verse .gold-mark { color: var(--z-gold-on-sumi); font-style: italic; }
.mugen-poem__rule {
    display: block;
    width: 1px;
    height: 64px;
    background: var(--z-gold-on-sumi);
    opacity: 0.6;
}

/* Mugen — What We Offer (3-col i/ii/iii) */
.mugen-offer {
    padding: clamp(5rem, 8vw, 7rem) 1.5rem;
    background: var(--z-sumi);
    color: var(--z-cream-on-sumi);
    text-align: center;
}
.mugen-offer__inner {
    max-width: 720px;
    margin: 0 auto;
}
.mugen-offer__label {
    display: block;
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.68rem;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--z-gold-on-sumi);
    margin-bottom: 3rem;
}
.mugen-offer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 700px) {
    .mugen-offer__grid { grid-template-columns: repeat(3, 1fr); }
}
.mugen-offer__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}
.mugen-offer__roman {
    font-family: var(--z-mincho);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--z-gold-on-sumi);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.mugen-offer__name {
    font-family: var(--z-mincho);
    font-size: 1.05rem;
    color: var(--z-gold-on-sumi);
    letter-spacing: 0.06em;
    margin: 0;
}
.mugen-offer__desc {
    font-family: var(--z-mincho);
    font-size: 0.75rem;
    color: var(--z-ink-on-sumi);
    letter-spacing: 0.05em;
    margin: 0;
}

/* Mugen — closing (no reservation, just invitation) */
.mugen-closing {
    padding: clamp(6rem, 10vw, 10rem) 1.5rem;
    background: var(--z-sumi);
    color: var(--z-cream-on-sumi);
    text-align: center;
    border-top: 1px solid rgba(184, 156, 115, 0.15);
}
.mugen-closing__inner {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}
.mugen-closing__whisper {
    font-family: var(--z-mincho);
    font-size: 0.85rem;
    line-height: 2.4;
    color: var(--z-ink-on-sumi);
    letter-spacing: 0.08em;
    margin: 0;
}
.mugen-closing__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 2;
    color: var(--z-gold-on-sumi);
    letter-spacing: 0.12em;
    margin: 0;
}
.mugen-closing__buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Dark store-info for Mugen */
.store-info--dark {
    background: var(--z-sumi);
    color: var(--z-cream-on-sumi);
}
.store-info--dark .store-info__title { color: var(--z-cream-on-sumi); }
.store-info--dark .store-info__list li { border-bottom-color: rgba(184, 156, 115, 0.2); }
.store-info--dark .store-info__label { color: var(--z-gold-on-sumi); }
.store-info--dark .store-info__value { color: var(--z-cream-on-sumi); }
.store-info--dark .store-info__value a { color: var(--z-gold-on-sumi); }
.store-info--dark .store-info__value strong { color: var(--z-cream-on-sumi); }

/* =====================================================================
   Recruit page — hero, stats, message, job cards, perks, flow, CTA
   ===================================================================== */
.recruit-hero {
    position: relative;
    padding: clamp(6rem, 12vw, 9rem) clamp(1.5rem, 4vw, 3.5rem);
    background: var(--z-cream);
    border-bottom: 1px solid var(--z-line);
    overflow: hidden;
}
.recruit-hero__corner {
    position: absolute;
    top: clamp(5.5rem, 7vw, 6.5rem);
    right: clamp(1.5rem, 4vw, 3.5rem);
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.recruit-hero__corner-label {
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.68rem;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--z-gold);
}
.recruit-hero__corner-divider {
    display: inline-block; width: 28px; height: 1px;
    background: var(--z-gold); opacity: 0.6;
}
.recruit-hero__corner-num {
    font-family: var(--z-mincho);
    font-size: 0.85rem; letter-spacing: 0.1em; color: var(--z-gold);
}
.recruit-hero__inner { max-width: 880px; margin: 0 auto; }
.recruit-hero__eyebrow {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 2rem;
}
.recruit-hero__eyebrow-line {
    display: inline-block; width: 28px; height: 1px;
    background: var(--z-gold); opacity: 0.6;
}
.recruit-hero__eyebrow-en {
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.75rem;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--z-gold);
}
.recruit-hero__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--z-ink);
    margin: 0 0 2rem;
}
.recruit-hero__title .gold-mark { color: var(--z-gold); font-style: italic; }
.recruit-hero__intro {
    font-family: var(--z-mincho);
    font-size: 0.95rem;
    line-height: 2.2;
    color: var(--z-ink-3);
    max-width: 640px;
    margin: 0 0 2.5rem;
    letter-spacing: 0.05em;
}
.recruit-hero__buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
.recruit-hero__btn {
    display: inline-flex;
    align-items: center;
    padding: 1em 2em;
    border: 1px solid rgba(43, 38, 33, 0.35);
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.72rem;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--z-ink);
    transition: all 300ms var(--z-ease);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.recruit-hero__btn:hover {
    background: var(--z-sumi);
    color: var(--z-cream-on-sumi);
    border-color: var(--z-sumi);
    opacity: 1;
}
.recruit-hero__btn--gold {
    background: var(--z-gold);
    border-color: var(--z-gold);
    color: var(--z-cream);
    font-size: 0.75rem;
}
.recruit-hero__btn--gold:hover {
    background: var(--z-gold-3);
    border-color: var(--z-gold-3);
    color: var(--z-cream);
}

/* Recruit stats grid */
.recruit-stats {
    padding: 0 clamp(1.5rem, 4vw, 3.5rem);
    background: var(--z-cream);
    margin-top: -1px;
}
.recruit-stats__grid {
    display: grid;
    grid-template-columns: 1fr;
    background: #ffffff;
    border: 1px solid var(--z-line);
    max-width: 1080px;
    margin: 0 auto;
}
@media (min-width: 700px) {
    .recruit-stats__grid { grid-template-columns: repeat(4, 1fr); }
}
.recruit-stat {
    padding: clamp(2.5rem, 4vw, 3.25rem) 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--z-line);
}
.recruit-stat:last-child { border-bottom: none; }
@media (min-width: 700px) {
    .recruit-stat { border-right: 1px solid var(--z-line); border-bottom: none; }
    .recruit-stat:last-child { border-right: none; }
}
.recruit-stat__num {
    font-family: var(--z-mincho);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    color: var(--z-ink);
    line-height: 1;
}
.recruit-stat__num--italic { font-style: italic; }
.recruit-stat__unit {
    font-size: 0.85rem;
    color: var(--z-gold);
    margin-left: 0.3rem;
}
.recruit-stat__label {
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.65rem;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--z-gold);
    margin-top: 0.85rem;
    display: block;
}

/* Recruit message */
.recruit-message {
    padding: clamp(6rem, 10vw, 8rem) 1.5rem;
    background: var(--z-cream);
    text-align: center;
}
.recruit-message__inner {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}
.recruit-section-meta {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    justify-content: center;
}
.recruit-section-meta__num {
    font-family: var(--z-mincho);
    font-size: 0.85rem; letter-spacing: 0.1em; color: var(--z-gold);
}
.recruit-section-meta__divider {
    display: inline-block; width: 28px; height: 1px;
    background: var(--z-gold); opacity: 0.6;
}
.recruit-section-meta__en {
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.68rem;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--z-gold);
}
.recruit-message__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.65rem, 2.8vw, 2.25rem);
    line-height: 1.7;
    letter-spacing: 0.08em;
    color: var(--z-ink);
    margin: 0;
}
.recruit-message__body {
    font-family: var(--z-mincho);
    font-size: 0.95rem;
    line-height: 2.4;
    color: var(--z-ink-3);
    letter-spacing: 0.05em;
    margin: 0;
}
.recruit-message__body p { margin: 0 0 1em; }
.recruit-message__body p:last-child { margin: 0; }

/* Job listings + card */
.job-listings {
    padding: clamp(6rem, 10vw, 8rem) 1.5rem;
    background: var(--z-cream-2);
}
.job-listings__inner { max-width: 1080px; margin: 0 auto; }
.job-listings__head {
    text-align: center;
    margin-bottom: clamp(3rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.job-listings__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.85rem, 3.2vw, 2.5rem);
    letter-spacing: 0.1em;
    color: var(--z-ink);
    margin: 0;
}
.job-listings__sub {
    font-family: var(--z-mincho);
    font-size: 0.85rem; color: var(--z-ink-3);
    letter-spacing: 0.05em; margin: 0;
}

.job-card {
    background: #ffffff;
    border: 1px solid var(--z-line);
    padding: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 2rem;
    position: relative;
}
.job-card:last-child { margin-bottom: 0; }
.job-card__num {
    position: absolute;
    top: clamp(1.5rem, 3vw, 2rem);
    right: clamp(1.5rem, 3vw, 2.5rem);
    font-family: var(--z-mincho);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--z-gold);
}
.job-card__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (min-width: 800px) {
    .job-card__grid { grid-template-columns: 1fr 2fr; gap: 3rem; }
}
.job-card__en {
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.68rem;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--z-gold);
    margin-bottom: 1rem;
    display: block;
}
.job-card__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.35rem, 2.3vw, 1.75rem);
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--z-ink);
    margin: 0 0 1.5rem;
}
.job-card__badge {
    display: inline-block;
    padding: 0.45em 1em;
    background: var(--z-gold);
    color: var(--z-cream);
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.job-card__badge--outline {
    background: #ffffff;
    color: var(--z-gold);
    border: 1px solid var(--z-gold);
}
.job-card__salary-block {
    border-top: 1px solid rgba(43, 38, 33, 0.1);
    padding-top: 1.25rem;
    margin-top: 0.5rem;
}
.job-card__salary-label {
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.62rem;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--z-gold);
    display: block;
    margin-bottom: 0.5rem;
}
.job-card__salary {
    font-family: var(--z-mincho);
    font-size: clamp(1.4rem, 2.3vw, 1.85rem);
    color: var(--z-ink);
    line-height: 1.2;
}
.job-card__salary-dash {
    font-size: 0.75em;
    color: var(--z-gold);
    margin: 0 0.35em;
}
.job-card__salary-note {
    font-family: var(--z-sans);
    font-size: 0.7rem;
    color: var(--z-ink-4);
    margin-top: 0.4rem;
}
.job-card__lead {
    font-family: var(--z-mincho);
    font-size: 0.9rem;
    line-height: 2.15;
    color: var(--z-ink-3);
    letter-spacing: 0.05em;
    margin: 0 0 1.5rem;
}
.job-card__meta {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1rem 1.5rem;
    font-size: 0.85rem;
    line-height: 2;
    border-top: 1px solid rgba(43, 38, 33, 0.08);
    padding-top: 1.5rem;
    margin: 0;
}
@media (max-width: 700px) {
    .job-card__meta { grid-template-columns: 90px 1fr; gap: 0.75rem 1rem; font-size: 0.8rem; }
}
.job-card__meta dt {
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.65rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--z-gold);
    padding-top: 0.35em;
    margin: 0;
}
.job-card__meta dd {
    font-family: var(--z-mincho);
    color: var(--z-ink);
    margin: 0;
    line-height: 2;
    letter-spacing: 0.04em;
}

/* Recruit perks (4 items) */
.recruit-perks {
    padding: clamp(6rem, 10vw, 8rem) 1.5rem;
    background: var(--z-cream);
}
.recruit-perks__inner { max-width: 1080px; margin: 0 auto; }
.recruit-perks__head {
    text-align: center;
    margin-bottom: clamp(3rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.recruit-perks__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.85rem, 3.2vw, 2.5rem);
    letter-spacing: 0.1em;
    color: var(--z-ink);
    margin: 0;
}
.recruit-perks__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 600px) {
    .recruit-perks__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .recruit-perks__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}
.recruit-perk {
    padding: clamp(1.75rem, 3vw, 2rem) 1.5rem;
    background: #ffffff;
    border: 1px solid var(--z-line);
    text-align: center;
}
.recruit-perk__roman {
    font-family: var(--z-mincho);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--z-gold);
    line-height: 1;
    margin-bottom: 1rem;
}
.recruit-perk__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: 1rem;
    color: var(--z-ink);
    letter-spacing: 0.06em;
    line-height: 1.65;
    margin: 0 0 0.85rem;
}
.recruit-perk__body {
    font-family: var(--z-mincho);
    font-size: 0.78rem;
    line-height: 2;
    color: var(--z-ink-3);
    letter-spacing: 0.03em;
    margin: 0;
}

/* Application flow */
.recruit-flow {
    padding: clamp(6rem, 10vw, 8rem) 1.5rem;
    background: var(--z-cream-2);
}
.recruit-flow__inner { max-width: 1080px; margin: 0 auto; }
.recruit-flow__head {
    text-align: center;
    margin-bottom: clamp(3rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.recruit-flow__label {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    justify-content: center;
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.68rem;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--z-gold);
}
.recruit-flow__label::before,
.recruit-flow__label::after {
    content: "";
    display: inline-block;
    width: 28px; height: 1px;
    background: var(--z-gold);
    opacity: 0.6;
}
.recruit-flow__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(1.65rem, 2.8vw, 2.25rem);
    letter-spacing: 0.1em;
    color: var(--z-ink);
    margin: 0;
}
.recruit-flow__title .gold-mark { color: var(--z-gold); font-style: italic; }
.recruit-flow__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 600px) {
    .recruit-flow__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .recruit-flow__grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
.recruit-flow-step {
    background: #ffffff;
    border: 1px solid var(--z-line);
    padding: clamp(1.75rem, 3vw, 2rem) 1.5rem;
    text-align: center;
}
.recruit-flow-step__label {
    font-family: var(--z-mincho);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--z-gold);
    margin-bottom: 1rem;
    display: block;
}
.recruit-flow-step__num {
    font-family: var(--z-mincho);
    font-style: italic;
    font-size: 2rem;
    color: var(--z-gold);
    line-height: 1;
    margin-bottom: 1rem;
    display: block;
}
.recruit-flow-step__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--z-ink);
    letter-spacing: 0.06em;
    margin: 0 0 0.6rem;
}
.recruit-flow-step__desc {
    font-family: var(--z-mincho);
    font-size: 0.75rem;
    line-height: 1.95;
    color: var(--z-ink-3);
    margin: 0;
}

/* Recruit final CTA (dark, LINE button) */
.recruit-final-cta {
    padding: clamp(6rem, 10vw, 10rem) 1.5rem;
    background: var(--z-sumi);
    color: var(--z-cream-on-sumi);
    text-align: center;
}
.recruit-final-cta__inner {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.recruit-final-cta__label {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    justify-content: center;
    font-family: var(--z-sans);
    font-weight: 300; font-size: 0.7rem;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--z-gold-on-sumi);
}
.recruit-final-cta__label::before,
.recruit-final-cta__label::after {
    content: "";
    display: inline-block;
    width: 28px; height: 1px;
    background: var(--z-gold-on-sumi);
    opacity: 0.6;
}
.recruit-final-cta__title {
    font-family: var(--z-mincho);
    font-weight: 400;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    line-height: 1.6;
    color: var(--z-cream-on-sumi);
    letter-spacing: 0.1em;
    margin: 0;
}
.recruit-final-cta__title .gold-mark {
    color: var(--z-gold-on-sumi);
    font-style: italic;
}
.recruit-final-cta__note {
    font-family: var(--z-mincho);
    font-size: 0.85rem;
    line-height: 2.2;
    color: var(--z-ink-on-sumi);
    margin: 0 0 1rem;
}
.recruit-final-cta__disclaimer {
    font-family: var(--z-mincho);
    font-size: 0.72rem;
    color: rgba(216, 207, 184, 0.4);
    margin-top: 1.5rem;
    letter-spacing: 0.05em;
}
.recruit-line-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    padding: 1.25em 2.8em;
    background: #06c755;
    color: #ffffff;
    border: 1px solid #06c755;
    font-family: var(--z-sans);
    font-weight: 400; font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: all 300ms var(--z-ease);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.recruit-line-btn:hover {
    background: #04a544;
    border-color: #04a544;
    color: #ffffff;
    opacity: 1;
}

/* Recruit hero corner marker — mobile refinement */
@media (max-width: 600px) {
    .recruit-hero__corner {
        top: clamp(5rem, 15vw, 5.5rem);
        gap: 0.5rem;
    }
    .recruit-hero__corner-label { font-size: 0.6rem; letter-spacing: 0.25em; }
    .recruit-hero__corner-divider { width: 18px; }
    .recruit-hero__corner-num { font-size: 0.75rem; }
    /* Ensure hero content clears the corner marker */
    .recruit-hero { padding-top: clamp(7rem, 18vw, 9rem); }
}

/* =====================================================================
   Mobile refinements — narrow viewport comprehensive review
   (≤700px)
   ===================================================================== */
@media (max-width: 700px) {

    /* ─────────────────────────────────────
       見出しの変な改行防止 — 短い見出し（<br>付き）のみに適用
    ───────────────────────────────────── */
    .hero__title,
    .passage__title,
    .stores-cta__title,
    .news-preview__title,
    .recruit-cta__title,
    .about-theme__title,
    .about-theme__title--closing,
    .about-hero__title,
    .chapter__title,
    .chapter__grid-title,
    .store-hero__jp-main,
    .store-italic-name,
    .store-statement__lead,
    .chapter__split-title,
    .reservation-cta__title,
    .recruit-hero__title,
    .recruit-message__title,
    .job-card__title,
    .recruit-perks__title,
    .recruit-perk__title,
    .recruit-flow__title,
    .recruit-flow-step__title,
    .recruit-final-cta__title,
    .job-listings__title,
    .mugen-offer__name,
    .mugen-closing__title,
    .page-hero__title {
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    /* ─────────────────────────────────────
       見出し letter-spacing / line-height を全体タイト化
    ───────────────────────────────────── */
    .stores-cta__title,
    .passage__title,
    .recruit-cta__title,
    .about-theme__title,
    .about-hero__title,
    .chapter__title,
    .chapter__split-title,
    .reservation-cta__title,
    .recruit-hero__title,
    .recruit-message__title,
    .job-card__title,
    .recruit-perks__title,
    .recruit-flow__title,
    .recruit-final-cta__title,
    .about-theme__title--closing,
    .job-listings__title,
    .mugen-closing__title,
    .store-hero__jp-main,
    .page-hero__title,
    .hero__title {
        letter-spacing: 0.05em;
        line-height: 1.65;
    }

    /* 本文系も改行を少しタイトに */
    .stores-cta__body,
    .hero__sub,
    .about-hero__intro,
    .chapter__body,
    .chapter__split-body-text,
    .store-statement__body,
    .recruit-hero__intro,
    .job-card__lead,
    .recruit-message__body,
    .recruit-final-cta__note {
        line-height: 2.05;
        letter-spacing: 0.02em;
    }

    /* ─────────────────────────────────────
       Section 縦横パディング — 過剰な余白を削減
    ───────────────────────────────────── */
    .stores-cta,
    .news-preview,
    .recruit-cta,
    .about-theme,
    .chapter,
    .about-cta,
    .reservation-cta,
    .other-stores,
    .recruit-hero,
    .recruit-message,
    .job-listings,
    .recruit-perks,
    .recruit-flow,
    .recruit-final-cta,
    .mugen-poem,
    .mugen-offer,
    .mugen-closing,
    .store-statement,
    .store-info,
    .passage {
        padding-top: clamp(4rem, 14vw, 6rem);
        padding-bottom: clamp(4rem, 14vw, 6rem);
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* ─────────────────────────────────────
       Chapter Split — 900pxブレイクを700pxに短縮
    ───────────────────────────────────── */
    .chapter--split .chapter__inner { max-width: 100%; }
    .chapter__split {
        grid-template-columns: 1fr !important;
        gap: 1.75rem !important;
    }
    .chapter__split--flip { grid-template-columns: 1fr !important; }
    .chapter__split--flip .chapter__split-body { order: 0; }
    .chapter__split-body { padding-block: 0.5rem; }
    .chapter__split-title { font-size: 1.4rem; }

    /* ─────────────────────────────────────
       Font sizes — 具体調整
    ───────────────────────────────────── */
    .hero__title { font-size: 1.7rem; }
    .hero__sub { font-size: 0.9rem; }
    .passage__title { font-size: 1.55rem; letter-spacing: 0.08em; }
    .passage__whisper { font-size: 0.95rem; }
    .stores-cta__title { font-size: 1.6rem; }
    .stores-cta__body { font-size: 0.9rem; }
    .about-hero__title { font-size: 1.7rem; }
    .about-theme__title { font-size: 1.85rem; }
    .about-theme__title--closing { font-size: 2.1rem; }
    .chapter__title { font-size: 1.4rem; }
    .reservation-cta__title { font-size: 1.55rem; }
    .recruit-hero__title { font-size: 1.85rem; }
    .recruit-message__title { font-size: 1.5rem; }
    .recruit-final-cta__title { font-size: 1.75rem; }
    .job-listings__title,
    .recruit-perks__title { font-size: 1.7rem; }
    .recruit-flow__title { font-size: 1.5rem; }
    .mugen-closing__title { font-size: 1.45rem; }
    .store-hero__jp-main { font-size: 1.45rem; }

    /* ─────────────────────────────────────
       Hero image — Ken Burns container
    ───────────────────────────────────── */
    .hero--image { min-height: 90vh; }

    /* ─────────────────────────────────────
       Store hero
    ───────────────────────────────────── */
    .store-hero {
        padding-top: 5.5rem;
        padding-bottom: 2.5rem;
    }
    .store-meta-bar { gap: 0.6rem; }
    .store-meta-bar__back,
    .store-meta-bar__loc { font-size: 0.6rem; letter-spacing: 0.22em; }
    .store-meta-bar__num { font-size: 0.75rem; }
    .store-meta-bar__divider { width: 18px; }
    .store-italic-name { font-size: 0.72rem; letter-spacing: 0.22em; }
    .store-tagline { font-size: 0.95rem; }
    .store-statement__lead { font-size: 1.05rem; }

    /* Main visual — reduce container padding, taller aspect */
    .store-visual--main {
        padding: 0 1.25rem;
        margin-bottom: 3rem;
    }
    .store-visual--main__frame { aspect-ratio: 4 / 3; }

    /* ─────────────────────────────────────
       Store Info list — stack label above value
    ───────────────────────────────────── */
    .store-info__inner { max-width: 100%; }
    .store-info__list li {
        display: block !important;
        padding: 1.25rem 0 !important;
    }
    .store-info__label {
        display: block !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.6rem !important;
    }
    .store-info__value {
        display: block !important;
        font-size: 0.85rem;
        line-height: 2;
    }

    /* Map */
    .store-map__frame { padding-bottom: 65%; }
    .store-map__label,
    .store-map__link { font-size: 0.62rem; letter-spacing: 0.25em; }

    /* ─────────────────────────────────────
       Recruit stats
    ───────────────────────────────────── */
    .recruit-stats { padding: 0 1.25rem; }
    .recruit-stat { padding: 1.75rem 1rem; }
    .recruit-stat__num { font-size: 1.75rem; }
    .recruit-stat__unit { font-size: 0.7rem; }
    .recruit-stat__label { font-size: 0.55rem; letter-spacing: 0.22em; margin-top: 0.5rem; }

    /* ─────────────────────────────────────
       Job card
    ───────────────────────────────────── */
    .job-card {
        padding: 1.75rem 1.4rem;
    }
    .job-card__num { top: 1rem; right: 1.25rem; font-size: 0.75rem; }
    .job-card__title { font-size: 1.35rem; line-height: 1.5; }
    .job-card__salary { font-size: 1.25rem; }
    .job-card__badge { font-size: 0.58rem; padding: 0.4em 0.85em; }
    .job-card__meta {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        font-size: 0.82rem;
    }
    .job-card__meta dt {
        padding-top: 0.85rem;
        margin-top: 0.5rem;
        border-top: 1px solid rgba(43, 38, 33, 0.07);
    }
    .job-card__meta dt:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

    /* ─────────────────────────────────────
       Buttons — smaller & stackable
    ───────────────────────────────────── */
    .stores-cta__link,
    .about-cta__button,
    .reservation-cta__btn,
    .recruit-hero__btn,
    .recruit-line-btn,
    .other-stores__link {
        padding: 0.9em 1.75em;
        font-size: 0.65rem;
        letter-spacing: 0.2em;
    }
    .reservation-cta__btn--primary {
        padding: 1em 2em;
        font-size: 0.7rem;
        letter-spacing: 0.15em;
    }
    .reservation-cta__buttons,
    .recruit-hero__buttons,
    .about-cta__buttons,
    .mugen-closing__buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    .reservation-cta__btn,
    .about-cta__button,
    .recruit-hero__btn { justify-content: center; }

    /* Other stores links stack */
    .other-stores__links { flex-direction: column; align-items: stretch; }
    .other-stores__link { justify-content: center; }

    /* ─────────────────────────────────────
       Chapter 2×2 grid — collapse to 1 col earlier
    ───────────────────────────────────── */
    .chapter__grid { gap: 0.4rem; }
    .chapter__mosaic { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; }
    .chapter__mosaic-item { aspect-ratio: 4 / 3 !important; }

    /* Mugen poem tighter */
    .mugen-poem__verse { font-size: 1rem; line-height: 2.6; letter-spacing: 0.06em; }
    .mugen-poem__verse--emphasis { font-size: 1.1rem; }
    .mugen-poem__rule { height: 48px; }
    .mugen-offer__grid { gap: 2rem; }

    /* Header CTA */
    .header-cta { padding: 0.5em 0.9em; font-size: 0.6rem; letter-spacing: 0.2em; }

    /* Page hero — About Us / Contact / etc */
    .page-hero { padding: 5rem 1.25rem 3rem; }
    .page-hero__title { font-size: 2rem; letter-spacing: 0.06em; }
    .page-hero__sub { font-size: 0.9rem; line-height: 2.1; }
    .page-hero__eyebrow { font-size: 0.62rem; letter-spacing: 0.3em; }
    .page-hero__corner { top: 5rem; right: 1rem; gap: 0.5rem; }
    .page-hero__corner-label { font-size: 0.58rem; letter-spacing: 0.25em; }
    .page-hero__corner-divider { width: 18px; }
    .page-hero__corner-num { font-size: 0.75rem; }

    /* News preview items */
    .news-preview__item a {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 1.25rem 1rem;
    }
    .news-preview__title-txt { font-size: 0.9rem; line-height: 1.7; }
    .news-preview__date { font-size: 0.65rem; }
    .news-preview__cat { font-size: 0.6rem; }
}

/* ─────────────────────────────────────
   Very narrow — under 400px
───────────────────────────────────── */
@media (max-width: 400px) {
    .stores-cta__title,
    .passage__title,
    .about-theme__title,
    .chapter__title,
    .chapter__split-title,
    .recruit-hero__title,
    .about-theme__title--closing,
    .hero__title,
    .store-hero__jp-main,
    .reservation-cta__title,
    .recruit-final-cta__title,
    .job-listings__title,
    .recruit-perks__title,
    .recruit-flow__title,
    .recruit-message__title,
    .mugen-closing__title,
    .page-hero__title {
        letter-spacing: 0.02em !important;
        line-height: 1.6 !important;
    }
    .store-hero__jp-main { font-size: 1.3rem; }
    .recruit-hero__title { font-size: 1.65rem; }
    .about-theme__title--closing { font-size: 1.9rem; }
}