:root {
    --ink: #151411;
    --ink-soft: #282621;
    --sumi: #0c0b0a;
    --paper: #f0ede6;
    --paper-bright: #faf8f3;
    --stone: #d8d7d1;
    --stone-dark: #95938b;
    --wood: #655344;
    --red: #8b1f1c;
    --red-bright: #b03a31;
    --gold: #b8a273;
    --white: #fff;
    --header-height: 88px;
    --shell: min(1400px, calc(100% - 96px));
    --serif: "Noto Serif JP", Georgia, serif;
    --sans: "Manrope", Arial, sans-serif;
}

html:lang(ja) {
    --sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
    line-break: strict;
    word-break: normal;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: auto;
    scroll-padding-top: calc(var(--header-height) + 12px);
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.is-menu-open,
body.is-dialog-open { overflow: hidden; }

button,
a { -webkit-tap-highlight-color: transparent; }

button,
input,
select,
textarea { font: inherit; }

a { color: inherit; }

img {
    display: block;
    max-width: 100%;
}

svg {
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.skip-link {
    position: fixed;
    z-index: 200;
    top: 12px;
    left: 12px;
    padding: 12px 16px;
    color: var(--white);
    background: var(--sumi);
    transform: translateY(-160%);
    transition: transform 180ms ease;
}

.skip-link:focus { transform: translateY(0); }

.shell {
    width: var(--shell);
    margin-inline: auto;
}

.page-progress {
    position: fixed;
    z-index: 150;
    inset: 0 0 auto;
    height: 2px;
    pointer-events: none;
}

.page-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--red-bright);
    transform: scaleX(0);
    transform-origin: left center;
}

.arrival-curtain {
    position: fixed;
    z-index: 180;
    inset: 0;
    display: none;
    grid-template-columns: 1fr 1fr;
    pointer-events: none;
}

.js .arrival-curtain {
    display: grid;
    animation: curtain-fallback 0ms linear 1800ms forwards;
}

@keyframes curtain-fallback {
    to { visibility: hidden; }
}

.arrival-curtain span:first-child { background: var(--sumi); }
.arrival-curtain span:last-child { background: var(--red); }

.site-header {
    position: fixed;
    z-index: 100;
    inset: 0 0 auto;
    min-height: var(--header-height);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 42px;
    padding: 0 48px;
    color: var(--white);
    border-bottom: 1px solid rgb(255 255 255 / 16%);
    background: rgb(12 11 10 / 20%);
    backdrop-filter: blur(10px);
    transition: color 260ms ease, background-color 260ms ease, border-color 260ms ease;
}

.site-header.is-solid {
    color: var(--ink);
    border-color: rgb(21 20 17 / 12%);
    background: rgb(240 237 230 / 95%);
}

.brand {
    min-width: 255px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.brand img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border: 1px solid currentColor;
    filter: grayscale(1) contrast(1.15);
}

.brand-copy {
    display: grid;
    gap: 3px;
}

.brand-copy strong {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
}

.brand-copy small {
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 36px;
}

.nav-links,
.nav-actions {
    display: flex;
    align-items: center;
}

.nav-links { gap: 28px; }
.nav-actions { gap: 14px; }

.nav-links a {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

.nav-links a::after {
    content: "";
    position: absolute;
    inset: auto 0 6px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 220ms ease;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a[aria-current="location"]::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.language-switch {
    display: flex;
    flex-shrink: 0;
    border: 1px solid currentColor;
}

.language-switch button {
    width: 44px;
    height: 44px;
    padding: 0;
    color: inherit;
    border: 0;
    background: transparent;
    font-size: 0.69rem;
    font-weight: 800;
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease;
}

.language-switch button.is-active {
    color: var(--paper);
    background: var(--red);
}

.site-header.is-solid .language-switch button.is-active {
    color: var(--white);
}

.button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 14px 20px;
    border: 1px solid transparent;
    border-radius: 2px;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transform: translateZ(0);
    transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, transform 160ms ease;
}

.button:hover,
.button:focus-visible { transform: translateY(-2px); }
.button:active { transform: scale(0.98); }

.button-primary {
    color: var(--white);
    background: var(--red);
}

.button-primary:hover,
.button-primary:focus-visible { background: var(--red-bright); }

.button-ghost,
.button-outline {
    color: var(--white);
    border-color: rgb(255 255 255 / 50%);
    background: rgb(12 11 10 / 18%);
}

.button-ghost:hover,
.button-ghost:focus-visible,
.button-outline:hover,
.button-outline:focus-visible {
    color: var(--ink);
    background: var(--paper-bright);
    border-color: var(--paper-bright);
}

.button-warm {
    color: var(--ink);
    background: var(--gold);
}

.button-warm:hover,
.button-warm:focus-visible { background: #cbb581; }

.menu-toggle,
.nav-backdrop { display: none; }

.hero {
    position: relative;
    min-height: 680px;
    height: 82svh;
    max-height: 920px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: var(--white);
    background: var(--sumi);
}

.hero-media,
.hero-shade {
    position: absolute;
    inset: 0;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%;
    transform: scale(1.035);
}

.hero-shade {
    background:
        linear-gradient(90deg, rgb(8 7 6 / 86%) 0%, rgb(8 7 6 / 52%) 47%, rgb(8 7 6 / 14%) 75%),
        linear-gradient(0deg, rgb(8 7 6 / 75%) 0%, transparent 52%);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-bottom: 76px;
}

.eyebrow {
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--red);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.eyebrow-light,
.hero-eyebrow { color: var(--gold); }

.eyebrow-line {
    width: 42px;
    height: 1px;
    flex: none;
    background: currentColor;
}

.hero h1 {
    max-width: 1100px;
    margin: 0;
    font-size: 6.4rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 0.94;
}

.hero-line { display: block; }

.hero-line-serif {
    font-family: var(--serif);
    font-size: 0.86em;
    font-weight: 400;
    font-style: italic;
}

.hero-intro {
    max-width: 650px;
    margin: 30px 0 0;
    color: rgb(255 255 255 / 82%);
    font-size: 1.08rem;
    line-height: 1.8;
}

.hero-actions {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-actions .button { min-width: 235px; }

.hero-seal {
    position: absolute;
    z-index: 2;
    right: 42px;
    bottom: 38px;
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 38%);
    border-radius: 50%;
    font-size: 0.58rem;
    letter-spacing: 0.16em;
}

.hero-seal i {
    position: absolute;
    width: 42px;
    height: 1px;
    background: var(--gold);
}

.fact-rail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid rgb(21 20 17 / 16%);
    background: var(--paper);
}

.fact-rail > * {
    min-height: 112px;
    display: grid;
    align-content: center;
    gap: 9px;
    padding: 24px 34px;
    border-right: 1px solid rgb(21 20 17 / 16%);
}

.fact-rail > *:last-child { border-right: 0; }
.fact-rail a { text-decoration: none; }

.fact-rail small {
    color: var(--red);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fact-rail strong {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.fact-rail strong span {
    color: var(--gold);
    font-family: var(--sans);
    font-size: 0.7em;
    letter-spacing: 0;
}

.section-light,
.section-paper,
.section-dark { padding: 108px 0; }

.section-light { background: var(--paper-bright); }
.section-paper { background: var(--paper); }
.section-dark { color: var(--white); background: var(--sumi); }

.philosophy-grid,
.craft-grid,
.visit-grid {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    align-items: center;
    gap: 88px;
}

.section-copy h2,
.section-heading h2,
.craft-copy h2,
.visit-copy h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: 4.4rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.08;
    text-wrap: balance;
}

.section-copy .lead,
.craft-copy .lead {
    max-width: 620px;
    margin: 30px 0 0;
    color: #5b5852;
    font-size: 1rem;
    line-height: 1.9;
}

.text-link {
    min-height: 44px;
    margin-top: 28px;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: var(--red);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-decoration: none;
    text-transform: uppercase;
}

.text-link svg { transition: transform 180ms ease; }
.text-link:hover svg,
.text-link:focus-visible svg { transform: translateX(5px); }
.text-link-light { color: var(--gold); }

.philosophy-image,
.visit-image { margin: 0; }

.philosophy-image {
    width: 100%;
    max-width: 560px;
    justify-self: end;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.philosophy-image img {
    grid-area: 1 / 1 / 2 / 3;
    width: 100%;
    height: auto;
    aspect-ratio: 1080 / 1351;
    object-fit: cover;
}

.philosophy-image figcaption {
    grid-area: 1 / 2;
    max-width: 245px;
    padding: 18px 22px;
    color: var(--white);
    background: rgb(12 11 10 / 92%);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    line-height: 1.6;
    text-transform: uppercase;
}

.section-heading {
    max-width: 930px;
    margin-bottom: 56px;
}

.experience-composer {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    border-top: 1px solid rgb(255 255 255 / 20%);
    border-bottom: 1px solid rgb(255 255 255 / 20%);
}

.experience-tabs {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    border-right: 1px solid rgb(255 255 255 / 20%);
}

.experience-tabs button {
    min-height: 190px;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 11px;
    padding: 28px;
    color: rgb(255 255 255 / 56%);
    border: 0;
    border-bottom: 1px solid rgb(255 255 255 / 20%);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: color 220ms ease, background-color 220ms ease;
}

.experience-tabs button:last-child { border-bottom: 0; }

.experience-tabs button[aria-selected="true"] {
    color: var(--ink);
    background: var(--paper);
}

.experience-tabs button > span {
    color: var(--red-bright);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.experience-tabs button strong {
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 500;
}

.experience-tabs button small {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.experience-stage { min-width: 0; }

.experience-panel {
    min-height: 520px;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
}

.experience-panel[hidden] { display: none; }

.experience-panel > img {
    width: 100%;
    height: 100%;
    max-height: 620px;
    object-fit: cover;
}

.experience-panel > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 54px;
    background: var(--ink-soft);
}

.panel-kicker {
    margin: 0 0 14px;
    color: var(--gold);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.experience-panel h3 {
    max-width: 520px;
    margin: 0;
    font-family: var(--serif);
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.1;
}

.experience-panel p:not(.panel-kicker) {
    max-width: 550px;
    margin: 24px 0 30px;
    color: rgb(255 255 255 / 68%);
    line-height: 1.8;
}

.experience-panel > .dinner-portrait { object-position: center 53%; }

.craft-grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(30px, 4.5vw, 68px);
}

.craft-copy { min-width: 0; }

.craft-sequence {
    margin: 44px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgb(21 20 17 / 18%);
}

.craft-sequence li {
    min-height: 78px;
    display: grid;
    grid-template-columns: 50px 120px 1fr;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid rgb(21 20 17 / 18%);
}

.craft-sequence span {
    color: var(--red);
    font-size: 0.65rem;
    font-weight: 800;
}

.craft-sequence strong {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 500;
}

.craft-sequence small { color: #68655f; }

.counter-board {
    width: 100%;
    max-width: 760px;
    min-width: 0;
    justify-self: center;
}

.counter-board-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin: 0 10px 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgb(21 20 17 / 18%);
    color: var(--wood);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.6;
    text-transform: uppercase;
}

.counter-board-heading > :last-child {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--red);
}

.counter-board-cards {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 10px 14px;
    padding: 20px 18px 28px;
}

.counter-board-cards::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 14% 8% 12%;
    border: 1px solid rgb(101 83 68 / 12%);
    background: rgb(101 83 68 / 4%);
    transform: rotate(-2deg);
    pointer-events: none;
}

.counter-card {
    --rest-rotation: -5deg;
    --card-rotation: var(--rest-rotation);
    --card-lift: 0px;
    --card-scale: 1;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
    padding: 7px 7px 0;
    color: var(--ink);
    border: 1px solid rgb(21 20 17 / 12%);
    background: var(--paper-bright);
    box-shadow: 0 2px 3px rgb(21 20 17 / 7%), 0 12px 26px -12px rgb(21 20 17 / 30%);
    text-decoration: none;
    cursor: zoom-in;
    transform: perspective(850px) translateY(var(--card-lift)) rotate(var(--card-rotation)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--card-scale));
    transition: transform 300ms cubic-bezier(.22, 1, .36, 1), box-shadow 260ms ease, filter 260ms ease;
    -webkit-tap-highlight-color: transparent;
}

.counter-card-courses { --rest-rotation: 4deg; margin-top: 26px; }
.counter-card-service { --rest-rotation: -3deg; margin-top: 8px; }
.counter-card-sashimi { --rest-rotation: 4deg; margin-top: -8px; }
.counter-card-temaki { --rest-rotation: -4deg; margin-top: 12px; }
.counter-card-selection { --rest-rotation: 3deg; margin-top: -8px; }

.counter-card-photo {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--ink-soft);
}

.counter-card-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgb(0 0 0 / 10%);
    pointer-events: none;
}

.counter-card-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.counter-card-fish img { object-position: 50% 64%; }
.counter-card-sashimi img { object-position: 50% 45%; }
.counter-card-courses .counter-card-photo,
.counter-card-service .counter-card-photo,
.counter-card-temaki .counter-card-photo,
.counter-card-selection .counter-card-photo { aspect-ratio: 1; }

.counter-card-caption {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 56px;
    padding: 10px 2px;
    font-family: var(--serif);
    font-size: clamp(0.7rem, 0.85vw, 0.8rem);
    line-height: 1.5;
    text-wrap: pretty;
}

.counter-card-number {
    color: var(--red);
    font-family: var(--sans);
    font-size: 0.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.counter-card-caption svg {
    width: 14px;
    height: 14px;
    color: var(--wood);
}

.counter-card:focus-visible {
    z-index: 4;
    --card-lift: -7px;
    --card-rotation: 0deg;
    --card-scale: 1.025;
    outline: 2px solid var(--red);
    outline-offset: 5px;
}

.counter-card:active { --card-scale: 0.96; }

.counter-board-hint {
    margin: 12px 8px 0;
    color: #68655f;
    font-size: 0.69rem;
    line-height: 1.7;
    text-align: center;
}

.counter-pointer-hint { display: none; }

@media (hover: hover) and (pointer: fine) {
    .counter-pointer-hint { display: inline; }
    .counter-card:hover {
        z-index: 4;
        --card-lift: -9px;
        --card-rotation: 0deg;
        --card-scale: 1.025;
        box-shadow: 0 3px 6px rgb(21 20 17 / 8%), 0 24px 40px -16px rgb(21 20 17 / 36%);
    }
    .counter-card.is-tracking { transition-duration: 130ms, 260ms, 260ms; }
    .counter-board-cards.is-exploring .counter-card:not(.is-tracking) { filter: brightness(0.91); }
    .counter-card:hover:active { --card-scale: 0.96; }
}

.dialog-bar button,
.dialog-media button {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease, transform 160ms ease;
}

.dialog-bar button:active,
.dialog-media button:active { transform: scale(0.96); }

.craft + .proof { padding-top: 0; }
.craft + .proof .proof-grid {
    padding-top: 56px;
    border-top: 1px solid rgb(21 20 17 / 18%);
}

.proof-grid {
    display: grid;
    grid-template-columns: 0.35fr 0.65fr;
    align-items: center;
    gap: 88px;
}

.proof-score {
    display: grid;
    justify-items: start;
}

.proof-score > strong {
    font-family: var(--serif);
    font-size: 8rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.proof-score > span {
    color: var(--gold);
    letter-spacing: 0.1em;
}

.proof-score > small {
    margin-top: 9px;
    color: #625f59;
}

.proof-carousel {
    min-width: 0;
    display: grid;
    gap: 30px;
    outline: none;
}

.proof-reviews {
    grid-row: 1;
    display: grid;
}

.proof-review {
    grid-area: 1 / 1;
    align-self: center;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    filter: blur(3px);
    transform: translateY(10px);
    transition-property: opacity, transform, filter, visibility;
    transition-duration: 180ms, 180ms, 180ms, 0ms;
    transition-timing-function: ease-in, ease-in, ease-in, linear;
    transition-delay: 0ms, 0ms, 0ms, 180ms;
}

.proof-review.is-active {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    transform: translateY(0);
    transition-duration: 430ms, 430ms, 430ms, 0ms;
    transition-timing-function: cubic-bezier(.2, 0, 0, 1), cubic-bezier(.2, 0, 0, 1), cubic-bezier(.2, 0, 0, 1), linear;
    transition-delay: 120ms, 120ms, 120ms, 0ms;
}

.proof-review p {
    margin: 0;
    font-family: var(--serif);
    font-size: 2.45rem;
    line-height: 1.45;
    text-wrap: pretty;
}

.proof-review footer {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 14px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.proof-review-stars {
    color: var(--gold);
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.proof-review cite { font-style: normal; }

.proof-review cite a {
    color: var(--red);
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    transition-property: color, text-decoration-color;
    transition-duration: 180ms;
    transition-timing-function: ease-out;
}

.proof-review cite a:hover { text-decoration-color: currentColor; }

.proof-review cite a:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 5px;
}

.proof-carousel-status {
    grid-row: 2;
    width: min(480px, 100%);
    display: grid;
    grid-template-columns: auto minmax(80px, 1fr) auto;
    align-items: center;
    gap: 16px;
    color: #625f59;
    font-size: 0.63rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.12em;
}

.proof-carousel-track {
    height: 1px;
    overflow: hidden;
    background: rgb(21 20 17 / 18%);
}

.proof-carousel-track > span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--red);
    transform: scaleX(0.2);
    transform-origin: left center;
    transition-property: transform;
    transition-duration: 430ms;
    transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

.proof-carousel-toggle {
    min-width: 88px;
    min-height: 40px;
    padding: 0 13px;
    color: var(--red);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: 0 0 0 1px rgb(139 31 28 / 34%);
    cursor: pointer;
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition-property: color, background-color, box-shadow, transform;
    transition-duration: 180ms, 180ms, 180ms, 150ms;
    transition-timing-function: ease-out;
}

.proof-carousel-toggle:hover {
    color: var(--paper-bright);
    background: var(--red);
    box-shadow: 0 0 0 1px var(--red), 0 3px 8px rgb(21 20 17 / 10%);
}

.proof-carousel-toggle:active { transform: scale(0.96); }

.proof-carousel-toggle:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}

.proof-toggle-resume,
.proof-carousel-toggle[aria-pressed="true"] .proof-toggle-pause { display: none; }

.proof-carousel-toggle[aria-pressed="true"] .proof-toggle-resume { display: inline; }

.visit-grid { grid-template-columns: 0.9fr 1.1fr; }

.visit-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.visit-copy h2 { max-width: 720px; }

.visit-actions {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.visit-actions .button { min-width: 230px; }

.visit-facts {
    margin: 52px 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 42px;
}

.visit-facts div {
    padding-top: 18px;
    border-top: 1px solid rgb(255 255 255 / 20%);
}

.visit-facts dt {
    margin-bottom: 9px;
    color: var(--gold);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.visit-facts dd {
    margin: 0;
    color: rgb(255 255 255 / 72%);
    font-size: 0.86rem;
    line-height: 1.7;
}

.visit-facts a { text-underline-offset: 4px; }

.site-footer {
    padding: 34px 0;
    color: var(--white);
    border-top: 1px solid rgb(255 255 255 / 12%);
    background: var(--sumi);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1.2fr 1fr auto;
    align-items: center;
    gap: 34px;
}

.footer-grid p {
    margin: 0;
    color: rgb(255 255 255 / 52%);
    font-size: 0.7rem;
    line-height: 1.6;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--serif);
}

.footer-brand img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    filter: grayscale(1) contrast(1.1);
}

.concept-note { text-align: right; }

.room-dialog {
    width: min(1200px, calc(100% - 48px));
    height: min(860px, calc(100dvh - 48px));
    max-width: none;
    max-height: none;
    padding: 0;
    overflow: hidden;
    color: var(--white);
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 2px;
    background: var(--sumi);
}

.room-dialog::backdrop {
    background: rgb(8 7 6 / 88%);
    backdrop-filter: blur(6px);
}

.room-dialog[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.dialog-bar {
    min-height: 76px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 18px;
    padding: 12px 18px 12px 24px;
    border-bottom: 1px solid rgb(255 255 255 / 18%);
}

.dialog-bar strong {
    font-family: var(--serif);
    font-weight: 500;
}

.dialog-bar > span {
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

.dialog-bar button { width: 48px; height: 48px; }

.dialog-media {
    min-height: 0;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    align-items: center;
    gap: 18px;
    padding: 24px;
}

.dialog-caption {
    min-height: 48px;
    margin: 0;
    padding: 12px 24px 18px;
    border-top: 1px solid rgb(255 255 255 / 12%);
    color: rgb(255 255 255 / 76%);
    font-size: 0.82rem;
    line-height: 1.6;
    text-align: center;
}

.dialog-media img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

.dialog-media button { width: 56px; height: 56px; }

.motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
}

/* Japanese keeps its own reading rhythm without altering the EN/VI composition. */
html:lang(ja) .hero h1 {
    font-family: var(--serif);
    font-size: clamp(1.85rem, 6.25vw, 5.2rem);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.025em;
    text-wrap: balance;
}

html:lang(ja) .hero-line-serif {
    font-size: 1em;
    font-style: normal;
}

html:lang(ja) :is(.section-copy h2, .section-heading h2, .craft-copy h2, .visit-copy h2) {
    font-size: clamp(1.85rem, 3.6vw, 3.4rem);
    line-height: 1.5;
    letter-spacing: 0.025em;
}

html:lang(ja) :is(.hero-intro, .section-copy .lead, .craft-copy .lead, .experience-panel p) {
    line-height: 1.95;
}

html:lang(ja) .hero-intro {
    max-width: 720px;
    text-wrap: pretty;
}

html:lang(ja) :is(.button, .eyebrow, .brand-copy small, .counter-board-heading) {
    letter-spacing: 0.035em;
    line-height: 1.65;
}

html:lang(ja) .counter-card-caption { line-height: 1.7; }

@media (max-width: 1180px) {
    :root { --shell: min(100% - 56px, 1120px); }
    .site-header { padding-inline: 28px; gap: 20px; }
    .site-nav { gap: 18px; }
    .nav-links { gap: 18px; }
    .nav-links a { font-size: 0.65rem; }
    .brand { min-width: 220px; }
    .hero h1 { font-size: 5.2rem; }
    .section-copy h2,
    .section-heading h2,
    .craft-copy h2,
    .visit-copy h2 { font-size: 3.6rem; }
    .philosophy-grid,
    .craft-grid,
    .visit-grid { gap: 54px; }
}

@media (max-width: 980px) {
    :root { --header-height: 76px; --shell: calc(100% - 40px); }

    .site-header {
        min-height: var(--header-height);
        grid-template-columns: 1fr auto;
        padding-inline: 20px;
        color: var(--ink);
        background: rgb(240 237 230 / 98%);
        border-color: rgb(21 20 17 / 14%);
        backdrop-filter: none;
    }

    .brand { min-width: 0; }
    .brand img { width: 46px; height: 46px; }
    .brand-copy strong { font-size: 0.88rem; }
    .brand-copy small { display: none; }

    .menu-toggle {
        width: 48px;
        height: 48px;
        display: grid;
        place-content: center;
        gap: 8px;
        color: inherit;
        border: 1px solid currentColor;
        border-radius: 2px;
        background: transparent;
        cursor: pointer;
    }

    .menu-toggle span {
        width: 23px;
        height: 1px;
        background: currentColor;
        transition: transform 220ms ease;
    }

    .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

    .site-nav {
        position: fixed;
        z-index: 102;
        inset: var(--header-height) 0 0 auto;
        width: min(420px, 90vw);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        gap: 32px;
        padding: 34px 24px calc(28px + env(safe-area-inset-bottom));
        color: var(--white);
        background: var(--sumi);
        transform: translateX(104%);
        visibility: hidden;
        transition: transform 340ms cubic-bezier(.22, 1, .36, 1), visibility 0ms linear 340ms;
    }

    .site-nav.is-open {
        transform: translateX(0);
        visibility: visible;
        transition-delay: 0ms;
    }

    .nav-links,
    .nav-actions { align-items: stretch; }

    .nav-links {
        display: grid;
        gap: 0;
    }

    .nav-links a {
        min-height: 58px;
        justify-content: space-between;
        border-bottom: 1px solid rgb(255 255 255 / 18%);
        font-family: var(--serif);
        font-size: 1.2rem;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
    }

    .nav-links a::after { display: none; }

    .nav-actions {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 12px;
    }

    .nav-book { min-height: 48px; }

    .nav-backdrop {
        position: fixed;
        z-index: 101;
        inset: var(--header-height) 0 0;
        display: block;
        width: 100%;
        padding: 0;
        border: 0;
        background: rgb(8 7 6 / 66%);
        opacity: 0;
        pointer-events: none;
        transition: opacity 240ms ease;
    }

    .nav-backdrop.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    .hero { padding-top: var(--header-height); }
    .hero h1 { font-size: 4.5rem; }

    .fact-rail { grid-template-columns: repeat(2, 1fr); }
    .fact-rail > *:nth-child(2) { border-right: 0; }
    .fact-rail > *:nth-child(-n+2) { border-bottom: 1px solid rgb(21 20 17 / 16%); }

    .philosophy-grid,
    .craft-grid,
    .visit-grid { grid-template-columns: 1fr; }

    .philosophy-image { order: -1; justify-self: center; }
    .counter-board { max-width: 720px; }

    .experience-composer { grid-template-columns: 1fr; }
    .experience-tabs {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: none;
        border-right: 0;
        border-bottom: 1px solid rgb(255 255 255 / 20%);
    }
    .experience-tabs button {
        min-height: 130px;
        border-right: 1px solid rgb(255 255 255 / 20%);
        border-bottom: 0;
    }
    .experience-tabs button:last-child { border-right: 0; }

    .proof-grid { gap: 44px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .concept-note { text-align: left; }
}

@media (max-width: 700px) {
    :root { --shell: calc(100% - 32px); }

    .hero {
        min-height: 660px;
        height: calc(100svh - 12px);
        max-height: 820px;
    }

    .hero-media img {
        object-position: center 42%;
        transform: none;
    }

    .hero-shade {
        background:
            linear-gradient(0deg, rgb(8 7 6 / 92%) 0%, rgb(8 7 6 / 58%) 62%, rgb(8 7 6 / 13%) 100%),
            linear-gradient(90deg, rgb(8 7 6 / 38%), transparent 70%);
    }

    .hero-content { padding-bottom: 34px; }
    .hero h1 { font-size: clamp(2.45rem, 10.6vw, 3.45rem); line-height: 1.05; }
    .hero-line-serif { font-size: 0.82em; }
    .hero-intro { margin-top: 22px; font-size: 0.9rem; line-height: 1.7; }
    .hero-actions { margin-top: 22px; display: grid; }
    .hero-actions .button { width: 100%; min-width: 0; }
    .hero-seal { display: none; }

    .fact-rail > * {
        min-height: 104px;
        padding: 20px 18px;
    }

    .fact-rail strong { font-size: 0.86rem; }

    .section-light,
    .section-paper,
    .section-dark { padding: 76px 0; }

    .section-copy h2,
    .section-heading h2,
    .craft-copy h2,
    .visit-copy h2 { font-size: 2.65rem; line-height: 1.1; }

    .philosophy-grid,
    .craft-grid,
    .visit-grid { gap: 46px; }

    .philosophy-image { display: block; }
    .philosophy-image img { aspect-ratio: 1080 / 1351; }
    .philosophy-image figcaption { max-width: none; }

    .section-heading { margin-bottom: 36px; }

    .experience-tabs button {
        min-height: 112px;
        padding: 18px;
    }

    .experience-tabs button strong { font-size: 1.15rem; }
    .experience-panel { min-height: 0; grid-template-columns: 1fr; }
    .experience-panel > img { height: auto; aspect-ratio: 4 / 5; object-position: center; }
    .experience-panel > div { padding: 30px 22px 34px; }
    .experience-panel h3 { font-size: 2.1rem; }

    .craft-sequence li {
        grid-template-columns: 34px 92px 1fr;
        gap: 10px;
    }

    .craft-sequence small { font-size: 0.72rem; }
    .experience-panel > .dinner-portrait { object-position: center 53%; }
    .counter-board-heading { margin-inline: 4px; font-size: 0.61rem; }
    .counter-board { max-width: 440px; }
    .counter-board-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 14px 13px 24px; }
    .counter-card { padding: 6px 6px 0; }
    .counter-card-caption { gap: 6px; min-height: 56px; font-size: 0.7rem; }
    .counter-card-caption svg { width: 14px; height: 14px; }
    .counter-card-courses { margin-top: 22px; }
    .counter-card-service { margin-top: 0; }
    .counter-card-sashimi { margin-top: -12px; }
    .counter-card-temaki { margin-top: 10px; }
    .counter-card-selection { margin-top: -4px; }
    .counter-board-hint { margin-top: 4px; }

    .proof-grid { grid-template-columns: 1fr; }
    .proof-score > strong { font-size: 6rem; }
    .proof-review p { font-size: 1.7rem; }
    .proof-carousel { gap: 24px; }
    .proof-carousel-status { width: 100%; }

    .visit-image img { aspect-ratio: 1080 / 1351; }
    .visit-actions { display: grid; }
    .visit-actions .button { min-width: 0; width: 100%; }
    .visit-facts { grid-template-columns: 1fr; margin-top: 40px; }

    .footer-grid { grid-template-columns: 1fr; gap: 18px; }

    .room-dialog {
        width: calc(100% - 16px);
        height: calc(100dvh - 16px);
    }

    .dialog-bar {
        min-height: 68px;
        padding: 10px 10px 10px 16px;
    }

    .dialog-media {
        position: relative;
        display: block;
        padding: 16px 12px 76px;
    }

    .dialog-media img { width: 100%; height: 100%; object-fit: contain; }

    .dialog-media button {
        position: absolute;
        z-index: 2;
        bottom: 12px;
        width: 52px;
        height: 52px;
        background: var(--sumi);
    }
    .dialog-media button:first-child { left: calc(50% - 62px); }
    .dialog-media button:last-child { right: calc(50% - 62px); }
}

@media (max-width: 390px) {
    .brand-copy strong { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hero h1 { font-size: clamp(2.25rem, 10.6vw, 2.6rem); }
    .hero-intro { font-size: 0.84rem; }
    .button { gap: 18px; padding-inline: 16px; }
    .fact-rail > * { padding-inline: 14px; }
    .section-copy h2,
    .section-heading h2,
    .craft-copy h2,
    .visit-copy h2 { font-size: 2.35rem; }
    .craft-sequence li { grid-template-columns: 28px 76px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .arrival-curtain { display: none; }
    .hero-media img { transform: none; }
    .motion-ready [data-reveal] { opacity: 1; transform: none; }
    .counter-card,
    .counter-card:hover,
    .counter-card:focus-visible,
    .counter-card:active {
        transform: rotate(var(--rest-rotation));
        transition: none;
    }
    .counter-board-cards.is-exploring .counter-card { filter: none; }
    .proof-reviews { gap: 38px; }
    .proof-review,
    .proof-review.is-active {
        grid-area: auto;
        opacity: 1;
        visibility: visible;
        filter: none;
        transform: none;
        transition: none;
    }
    .proof-carousel-status { display: none; }
}