/* Night-market art direction: cinematic imagery, charcoal, red and warm paper. */
:root {
  --red: #cb3826;
  --red-dark: #a72417;
  --cream: #f1e9d8;
  --ink: #27231d;
  --muted: #736a5d;
  --line: #d5c9b6;
  --coal: #191815;
  --gold: #edbf6b;
}
body { background: var(--cream); }
.topline { display: none; }
.site-header {
  position: fixed;
  inset: 0 0 auto;
  height: 100px;
  padding: 0 max(4.6vw, calc((100vw - 1340px) / 2));
  color: #fff1d9;
  background: linear-gradient(#111b, #1111);
  border-color: #fff1d91c;
  backdrop-filter: none;
  transition: background .25s, height .25s;
}
.site-header.scrolled { height: 82px; background: #191815f5; backdrop-filter: blur(15px); }
.site-header .brand-type strong { font-size: 38px; }
.site-header .brand-type small { color: #d7c9b6; font-size: 8px; }
.brand-seal { border-radius: 3px; background: var(--red); }
.desktop-nav { gap: 35px; }
.desktop-nav a { font-size: 14px; font-weight: 700; }
.desktop-nav a.active, .desktop-nav a:hover { color: var(--gold); }
.desktop-nav a:after { width: 18px; height: 2px; border-radius: 0; background: var(--gold); bottom: 23px; }
.header-cta { background: var(--red); color: #fff5e6; border-color: var(--red); font-size: 12px; padding: 14px 19px; }
.hero { height: min(900px, 100svh); min-height: 750px; background: #191511; }
.hero-scenes { position: absolute; inset: 0; }
.hero .scene-image { object-position: center 57%; opacity: 0; transition: opacity .7s ease; }
.hero .scene-image.is-active { opacity: 1; }
.hero [data-scene-image="1"] { object-position: center 55%; }
.hero [data-scene-image="2"] { object-position: center 53%; }
.hero-shade {
  background: linear-gradient(90deg, #11120fc9, #11120f65 45%, #11120f05 78%), linear-gradient(0deg, #12130fdf, transparent 32%, #1114 90%);
}
.hero-content { padding-top: clamp(190px, 23vh, 245px); width: calc(100% - 144px); max-width: 1296px; }
.hero-eyebrow { font-size: 12px; letter-spacing: 5px; color: #ead9b6; }
.hero h1 { font-size: 91px; line-height: 1.27; letter-spacing: 3px; max-width: 850px; margin-top: 25px; font-weight: 900; }
.hero-title-emphasis { font-size: .88em; }
.brush-word { color: #f0c477; }
.brush-word svg { stroke: #dc652e; bottom: -11px; }
.hero-description { margin-top: 27px; font-size: 14px; line-height: 2; letter-spacing: 2px; color: #e7ddca; }
.hero-actions { margin-top: 35px; gap: 31px; }
.hero-actions .button { min-height: 55px; font-size: 13px; padding: 15px 28px; }
.hero-store-link { font-size: 12px; }
.hero-stamp { top: auto; bottom: 156px; right: 6%; border-radius: 2px; width: 104px; height: 126px; color: #ead1a0; outline-offset: 5px; transform: rotate(6deg); background: #331f0d24; }
.hero-stamp strong { font-size: 27px; line-height: 1.3; }
.hero-stamp>span { font-size: 7px; letter-spacing: 1px; }
.hero-bottom { left: 72px; right: 72px; bottom: 39px; align-items: flex-end; }
.scene-controls { display: flex; gap: 32px; }
.scene-tab { color: #c5bbab; display: flex; gap: 12px; align-items: center; padding: 12px 0; border: 0; border-top: 1px solid #dacbae50; background: none; font: 11px var(--sans); min-width: 137px; text-align: left; letter-spacing: 1px; }
.scene-tab span { font: 12px Arial, sans-serif; color: #bcad96; }
.scene-tab.active { border-top: 2px solid var(--gold); color: #f8e9cc; }
.scene-tab.active span { color: var(--gold); }
.scene-tab:hover { color: #fff5e1; }
.hero-image-note { right: 72px; bottom: 92px; font-size: 10px; color: #dccdb7; }
.hero-bottom>a { font-size: 11px; padding-bottom: 11px; }
.flavor-strip { height: 80px; background: var(--red); color: #ffe2a6; border-top: 1px solid #efb58e33; }
.flavor-strip span { font: 900 29px var(--serif); letter-spacing: 6px; }
.flavor-strip b { font-size: 29px; color: #eeab66; }
.about { padding-top: 114px; padding-bottom: 118px; gap: 85px; }
.about-frame { height: 510px; transform: rotate(-2deg); outline: 1px solid #c8bda8; outline-offset: 8px; }
.about-frame img { object-position: 64% center; }
.about-label { width: 220px; right: -6px; bottom: 4px; background: #b82e20; padding: 26px 31px; transform: rotate(5deg); box-shadow: 5px 5px 0 #c9b794; }
.about-label strong { font-size: 33px; }
.about-label>span { font-size: 17px; }
.about h2, .section-heading h2, .cooperation h2 { font-size: 49px; line-height: 1.38; font-weight: 900; }
.about-copy>p:not(.eyebrow) { font-size: 13px; line-height: 2.05; }
.about-values { margin-top: 29px; padding: 24px 0; }
.about-values strong { font-size: 14px; }
.about-values span { font-size: 10px; }
.eyebrow { font-size: 10px; letter-spacing: 2px; }
.text-link { font-size: 12px; }
.menu-section { padding-top: 92px; padding-bottom: 85px; background: var(--coal); color: var(--cream); position: relative; }
.menu-section .section-heading h2 span { color: var(--gold); }
.menu-section .eyebrow { color: #d6ab61; }
.menu-section .eyebrow span { border-color: #6d5c43; color: #d6c19b; }
.menu-section .section-heading>p { color: #b1a998; font-size: 12px; }
.signature-feature { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 460px; margin: 46px 0 39px; border-top: 1px solid #5f514035; border-bottom: 1px solid #5f514035; background: #211e18; }
.signature-photo { min-height: 460px; position: relative; background-size: 300% auto; }
.signature-copy { position: relative; padding: 63px 55px 43px; }
.signature-number { position: absolute; right: 27px; top: 25px; font-size: 10px; color: #b29d78; letter-spacing: 2px; }
.signature-copy h3 { font: 900 45px/1.35 var(--serif); margin: 22px 0; letter-spacing: 2px; }
.signature-copy h3 span { color: var(--gold); }
.signature-copy>p:not(.eyebrow) { font-size: 12px; line-height: 2.1; color: #c2b39d; }
.signature-copy .text-link { margin-top: 22px; color: var(--gold); background: none; border: 0; border-bottom: 1px solid #a5895a; padding: 0 0 8px; }
.menu-toolbar { border-top: 0; padding-top: 6px; padding-bottom: 31px; }
.menu-hint { color: #aca08b; }
.filter-tabs { gap: 10px; }
.filter-tabs button { color: #c5b9a2; font-size: 12px; padding: 12px 22px; border: 1px solid #69594175; border-radius: 0; }
.filter-tabs button.active { color: #fff0d6; border-color: var(--red); }
.filter-tabs button:hover { color: var(--gold); }
.dish-grid { gap: 29px 24px; }
.dish-card { background: #26221c; color: var(--cream); border-bottom: 1px solid #5b483535; }
.dish-photo { aspect-ratio: 1.14; }
.dish-tag { background: #b53124; color: #fff3d8; letter-spacing: 2px; top: 18px; left: 18px; padding: 7px 10px; }
.dish-info { padding: 24px 23px 27px; }
.dish-info h3 { font-size: 28px; font-weight: 900; }
.dish-info p { color: #b3a892; font-size: 11px; }
.dish-info .dish-en { color: #a38c65; font-size: 8px; letter-spacing: 2px; }
.dish-arrow { border-color: #7c674a; color: var(--gold); }
.menu-section .section-footnote { color: #ac9f88; font-size: 10px; margin-top: 27px; }
.gather-banner { position: relative; height: 590px; background: #1c1611; }
.gather-photo { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center 53%; }
.gather-banner:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #181511e6, #18151188 48%, #18151110); }
.gather-inner { position: relative; z-index: 1; padding-top: 115px; padding-bottom: 80px; }
.gather-inner .eyebrow { color: #dac6a0; }
.gather-inner h2 { font: 900 56px/1.35 var(--serif); letter-spacing: 2px; margin-top: 23px; }
.gather-inner h2 span { color: var(--gold); }
.gather-description { color: #e2d2b5; font-size: 13px; margin-top: 20px; letter-spacing: 1px; }
.gather-inner .button { position: static; transform: none; margin-top: 32px; font-size: 12px; background: var(--red); color: #fff0d8; }
.gather-inner .button:hover { background: var(--red-dark); }
.gather-image-note { position: absolute; right: 43px; bottom: 24px; font-size: 10px; color: #ddceb8; z-index: 2; }
.stores { padding-top: 99px; padding-bottom: 107px; }
.section-heading>p { font-size: 12px; }
.store-layout { grid-template-columns: .9fr 1.1fr; gap: 47px; }
.store-card h3 { font-size: 27px; }
.store-card p { font-size: 12px; }
.store-card .store-warning { font-size: 10px; }
.store-actions a { font-size: 11px; }
.store-actions .map-link { padding: 11px 16px; }
.city-map { border: 7px solid #e4d7bf; min-height: 460px; }
.stories-section { background: #e6dac4; padding-top: 87px; padding-bottom: 85px; }
.story-photo { height: 255px; }
.story-card h3 { font-size: 25px; font-weight: 900; }
.story-card>p { font-size: 12px; }
.story-read { font-size: 11px; }
.cooperation { padding-top: 95px; padding-bottom: 100px; gap: 65px; }
.cooperation h2 { font-size: 47px; }
.inquiry-panel { background: #e5dac5; border-top: 5px solid var(--red); box-shadow: 10px 10px 0 #dfd2bb65; padding: 35px; }
.form-heading h3 { font-size: 29px; }
form label { font-size: 12px; }
form input:not([type=checkbox]),form select,form textarea { border-color: #cdbca2; font-size: 12px; }
.cooperation-copy>p:not(.eyebrow) { font-size: 13px; }
.cooperation-note p { font-size: 11px; }
.faq summary { font-size: 12px; }
.closing { background: var(--red); color: #fce1ac; border: 0; padding: 53px 30px; }
.closing-small { color: #f5cc93; font-size: 10px; }
.closing p { font-size: 57px; font-weight: 900; }
.closing p span { color: #fff0d2; }
.closing>a { color: #ffe2ac; border-color: #e5ad65; font-size: 12px; }
footer { background: #171714; }
.footer-top { padding-top: 53px; padding-bottom: 48px; }
.back-top { color: #ffe0a4; background: #2d2720; border-color: #7e6745; }
.mobile-nav { background: #201d17; color: #fae8c9; }
.mobile-nav a { border-color: #62503a; }
.menu-toggle span { background: #f8e6c6; }
.modal-copy .eyebrow { color: var(--red); }
.modal-copy .text-link { color: var(--red); }
@media (min-width: 1600px) {
  .hero-content { padding-top: 240px; }
  .hero h1 { font-size: 105px; }
  .hero-bottom { left: calc((100% - 1296px)/2); right: calc((100% - 1296px)/2); }
}
@media (max-width: 1150px) {
  .site-header { padding: 0 36px; gap: 18px; }
  .desktop-nav { gap: 23px; }
  .desktop-nav a { font-size: 12px; }
  .site-header .brand-type strong { font-size: 32px; }
  .hero-content { width: calc(100% - 80px); }
  .hero h1 { font-size: 80px; }
  .hero-bottom { left: 40px; right: 40px; }
  .hero-image-note { right: 40px; }
  .about { gap: 54px; }
  .about h2, .section-heading h2, .cooperation h2 { font-size: 42px; }
  .about-frame { height: 480px; }
  .about-values span { font-size: 9px; }
  .signature-copy { padding: 63px 35px 35px; }
  .signature-copy h3 { font-size: 38px; }
  .signature-feature, .signature-photo { min-height: 420px; }
  .store-layout { gap: 32px; }
  .cooperation { gap: 43px; }
  .inquiry-panel { padding: 28px; }
  .story-card h3 { font-size: 23px; }
  .story-photo { height: 215px; }
}
@media (max-width: 900px) {
  .site-header { height: 88px; padding: 0 28px; gap: 15px; }
  .site-header.scrolled { height: 76px; }
  .site-header .brand-type strong { font-size: 30px; }
  .desktop-nav { gap: 17px; }
  .desktop-nav a { font-size: 11px; }
  .header-cta { font-size: 10px; padding: 11px 12px; gap: 12px; }
  .hero { min-height: 780px; }
  .hero h1 { font-size: 73px; }
  .hero-content { padding-top: 210px; }
  .scene-controls { gap: 21px; }
  .scene-tab { min-width: 111px; font-size: 10px; }
  .hero-bottom>a { font-size: 9px; }
  .about { gap: 36px; padding-top: 86px; padding-bottom: 91px; }
  .about h2, .section-heading h2, .cooperation h2 { font-size: 35px; }
  .about-copy>p:not(.eyebrow) { font-size: 12px; }
  .about-frame { height: 480px; }
  .about-label { width: 185px; padding: 23px; }
  .about-label strong { font-size: 28px; }
  .about-values strong { font-size: 12px; }
  .signature-feature, .signature-photo { min-height: 380px; }
  .signature-copy { padding: 52px 24px 26px; }
  .signature-copy h3 { font-size: 33px; }
  .signature-copy>p:not(.eyebrow) { font-size: 11px; }
  .signature-copy .eyebrow { font-size: 8px; }
  .dish-info { padding: 21px 17px; }
  .dish-info h3 { font-size: 24px; }
  .dish-info p { font-size: 10px; }
  .dish-info .dish-en { font-size: 7px; letter-spacing: 1px; }
  .gather-banner { height: 520px; }
  .gather-inner { padding-top: 95px; }
  .gather-inner h2 { font-size: 49px; }
  .story-card h3 { font-size: 21px; }
  .story-photo { height: 190px; }
  .inquiry-panel { padding: 25px; }
  .form-heading h3 { font-size: 25px; }
  .cooperation { gap: 33px; }
  .closing p { font-size: 48px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 83px; }
  .site-header, .site-header.scrolled { height: 76px; padding: 0 20px; }
  .site-header .brand-type strong { font-size: 30px; }
  .site-header .brand-type small { font-size: 6px; }
  .header-cta { font-size: 9px; padding: 10px; gap: 9px; }
  .hero { height: 800px; min-height: 0; max-height: none; }
  .hero .scene-image { object-position: 61% center; }
  .hero [data-scene-image="1"] { object-position: 64% center; }
  .hero [data-scene-image="2"] { object-position: 60% center; }
  .hero-shade { background: linear-gradient(90deg, #12120fbf, #12120f22), linear-gradient(0deg, #12110fff, transparent 52%, #1113); }
  .hero-content { width: calc(100% - 40px); padding-top: 161px; }
  .hero-eyebrow { font-size: 9px; letter-spacing: 2.5px; }
  .hero h1 { font-size: 61px; line-height: 1.35; letter-spacing: 1px; margin-top: 28px; }
  .hero-title-emphasis { font-size: .68em; white-space: nowrap; }
  .hero-description { font-size: 12px; line-height: 2; margin-top: 23px; letter-spacing: 1px; }
  .hero-actions { margin-top: 28px; gap: 22px; }
  .hero-actions .button { font-size: 11px; min-height: 49px; padding: 13px 17px; gap: 18px; }
  .hero-store-link { font-size: 10px; }
  .hero-stamp { bottom: 151px; right: 31px; width: 79px; height: 94px; }
  .hero-stamp strong { font-size: 21px; }
  .hero-stamp>span { font-size: 6px; }
  .hero-bottom { left: 20px; right: 20px; bottom: 25px; display: block; }
  .hero-bottom>a { display: none; }
  .scene-controls { width: 100%; gap: 17px; justify-content: space-between; }
  .scene-tab { flex: 1; min-width: 0; font-size: 10px; gap: 7px; padding: 13px 0 7px; white-space: nowrap; letter-spacing: .5px; }
  .scene-tab span { font-size: 10px; }
  .hero-image-note { font-size: 8px; right: 21px; bottom: 86px; }
  .flavor-strip { height: 64px; gap: 13px; padding: 0 22px; }
  .flavor-strip span { font-size: 20px; letter-spacing: 2px; }
  .flavor-strip b { font-size: 21px; }
  .about { padding-top: 76px; padding-bottom: 72px; gap: 46px; }
  .about-visual { padding: 0 20px 26px 7px; }
  .about-frame { height: 370px; outline-offset: 5px; }
  .about-frame img { object-position: 60% center; }
  .about-label { width: 178px; right: 4px; padding: 21px 24px; }
  .about-label strong { font-size: 28px; }
  .about-label>span { font-size: 15px; }
  .vertical-caption { font-size: 16px; }
  .about h2, .section-heading h2, .cooperation h2 { font-size: 35px; letter-spacing: 0; }
  .about-copy>p:not(.eyebrow) { font-size: 12px; }
  .about-values { gap: 10px; padding: 22px 0; }
  .about-values strong { font-size: 12px; }
  .about-values span { font-size: 9px; }
  .menu-section { padding-top: 65px; padding-bottom: 58px; }
  .menu-section .section-heading>p { font-size: 11px; }
  .signature-feature { grid-template-columns: 1fr; margin: 28px 0; }
  .signature-photo { min-height: 0; aspect-ratio: 1.1; }
  .signature-copy { padding: 34px 25px; }
  .signature-number { top: 25px; right: 20px; font-size: 9px; }
  .signature-copy h3 { font-size: 36px; margin: 17px 0; }
  .signature-copy>p:not(.eyebrow) { font-size: 12px; }
  .signature-copy .text-link { font-size: 11px; }
  .filter-tabs { gap: 7px; justify-content: space-between; }
  .filter-tabs button { font-size: 10px; padding: 10px; }
  .filter-tabs button span { display: none; }
  .menu-toolbar { padding-top: 4px; padding-bottom: 22px; }
  .dish-grid { gap: 19px 13px; }
  .dish-photo { aspect-ratio: 1; }
  .dish-tag { font-size: 8px; letter-spacing: 0; top: 10px; left: 10px; padding: 5px 7px; }
  .dish-info { padding: 17px 12px 19px; }
  .dish-info h3 { font-size: 22px; }
  .dish-info p { font-size: 10px; line-height: 1.8; }
  .dish-info .dish-en { font-size: 6px; letter-spacing: .7px; padding-right: 10px; }
  .dish-arrow { top: 13px; right: 10px; width: 20px; height: 20px; }
  .menu-section .section-footnote { font-size: 9px; line-height: 2; }
  .gather-banner { height: 555px; }
  .gather-photo { object-position: 65% center; }
  .gather-banner:after { background: linear-gradient(90deg, #161410d9, #16141052), linear-gradient(0deg, #1614109c, transparent 70%); }
  .gather-inner { padding-top: 91px; }
  .gather-inner .eyebrow { font-size: 7px; letter-spacing: 1.2px; }
  .gather-inner h2 { font-size: 41px; letter-spacing: 1px; margin-top: 22px; line-height: 1.45; }
  .gather-description { font-size: 11px; margin-top: 22px; letter-spacing: 0; }
  .gather-inner .button { font-size: 11px; margin-top: 28px; }
  .gather-image-note { font-size: 8px; right: 20px; bottom: 19px; }
  .stores { padding-top: 70px; padding-bottom: 66px; }
  .store-layout { grid-template-columns: 1fr; gap: 25px; }
  .city-map { min-height: 350px; border-width: 5px; }
  .store-card h3 { font-size: 25px; }
  .store-card p { font-size: 11px; }
  .store-card .store-warning { font-size: 10px; }
  .store-actions a { font-size: 10px; }
  .stories-section { padding-top: 64px; padding-bottom: 65px; }
  .stories-section .section-heading h2 { font-size: 33px; }
  .story-photo { height: 245px; }
  .story-card h3 { font-size: 25px; }
  .story-card>p { font-size: 11px; }
  .cooperation { padding-top: 67px; padding-bottom: 70px; gap: 38px; }
  .cooperation-copy>p:not(.eyebrow) { font-size: 12px; }
  .inquiry-panel { padding: 27px 22px; box-shadow: 6px 6px 0 #dfd2bb65; }
  .cooperation-note p { font-size: 10px; }
  .form-heading h3 { font-size: 27px; }
  form input:not([type=checkbox]), form select, form textarea { font-size: 14px; }
  .closing { padding: 39px 20px; }
  .closing p { font-size: 33px; letter-spacing: 1px; margin-top: 16px; }
  .closing-small { font-size: 9px; letter-spacing: 2px; }
  .footer-top { padding-top: 37px; padding-bottom: 35px; }
}
@media (max-width: 375px) {
  .site-header, .site-header.scrolled { padding: 0 16px; gap: 11px; }
  .site-header .brand-type strong { font-size: 26px; }
  .site-header .brand-type small { font-size: 5px; }
  .header-cta { font-size: 9px; padding: 9px; gap: 7px; }
  .hero-content { width: calc(100% - 32px); }
  .hero h1 { font-size: 56px; }
  .hero-title-emphasis { font-size: .69em; }
  .hero-actions { gap: 17px; }
  .hero-actions .button { font-size: 10px; padding: 13px 14px; }
  .hero-store-link { font-size: 9px; }
  .flavor-strip { padding: 0 18px; gap: 10px; }
  .flavor-strip span { font-size: 19px; letter-spacing: 1px; }
  .about h2, .section-heading h2, .cooperation h2 { font-size: 32px; }
  .dish-info h3 { font-size: 20px; }
  .dish-info .dish-en { font-size: 5px; }
  .filter-tabs button { font-size: 9px; padding: 10px; }
  .closing p { font-size: 30px; }
}

/* Island night refresh — real photography, ocean-dark surfaces and neon sunset accents. */
:root {
  --red: #ff5a36;
  --red-dark: #d93e28;
  --cream: #f5efe2;
  --ink: #102b31;
  --muted: #60777a;
  --line: #c9d7d3;
  --coal: #071c26;
  --gold: #ffcc72;
  --ocean: #0b7782;
  --lagoon: #42d8d0;
  --neon: #dc49ef;
  --sand: #f5efe2;
}

body {
  background:
    radial-gradient(circle at 8% 22%, #35c9c50d 0 12%, transparent 12.3%),
    var(--cream);
}

button:focus-visible,
a:focus-visible,
summary:focus-visible { outline-color: var(--lagoon); }

.site-header {
  background: linear-gradient(180deg, #04131de8, #061a2573 72%, transparent);
  border-bottom-color: #8cece319;
}

.site-header.scrolled {
  background: #061a25f4;
  box-shadow: 0 12px 44px #00141c45;
  border-bottom-color: #46d9d330;
}

.brand-seal {
  background: linear-gradient(145deg, var(--neon), var(--red) 55%, #ff8f3d);
  box-shadow: 0 0 24px #f63dac44;
}

.desktop-nav a.active,
.desktop-nav a:hover { color: #8af2e8; }
.desktop-nav a:after { background: linear-gradient(90deg, var(--lagoon), var(--neon)); }
.header-cta,
.button-red {
  background: linear-gradient(105deg, #ff4d38, #ff713f);
  border-color: #ff7f5e;
  box-shadow: 0 8px 28px #ff54372b;
}
.header-cta:hover,
.button-red:hover { background: linear-gradient(105deg, #e43a2a, #f45b36); }

.hero {
  min-height: 760px;
  background: #04131c;
}
.hero:before {
  content: '';
  position: absolute;
  z-index: 2;
  left: -8vw;
  right: -8vw;
  bottom: -62px;
  height: 126px;
  border-radius: 50% 46% 0 0;
  background: var(--cream);
  transform: rotate(-1.4deg);
  pointer-events: none;
}
.hero .scene-image { filter: saturate(1.08) contrast(1.03); }
.hero [data-scene-image="0"] { object-position: center 59%; }
.hero [data-scene-image="1"] { object-position: center 53%; }
.hero [data-scene-image="2"] { object-position: center 58%; }
.hero-shade {
  background:
    linear-gradient(90deg, #02151ee8 0%, #04202aaa 44%, #05202b26 78%),
    linear-gradient(0deg, #031821ef 0%, transparent 42%, #06111b4d 82%),
    radial-gradient(circle at 75% 29%, #d844e93d, transparent 25%);
}
.hero-eyebrow { color: #97f2e8; }
.hero-eyebrow span { background: var(--lagoon); box-shadow: 0 0 12px var(--lagoon); }
.hero h1 { text-shadow: 0 7px 30px #00141f7d; }
.brush-word {
  background: linear-gradient(90deg, #ffca6a, #ff6d3d 54%, #f55bdc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brush-word svg { stroke: #49ded3; filter: drop-shadow(0 0 5px #49ded380); }
.hero-description { color: #e4f4ee; }
.hero-store-link { border-color: #6fe4d3aa; color: #c8fff5; }
.hero-stamp {
  color: #b8fff4;
  border-color: #71eaddb0;
  outline-color: #ee5ee382;
  background: #061b25a6;
  box-shadow: 0 0 38px #d649e72e;
}
.scene-tab { color: #b5cdca; border-top-color: #b6f8ec35; }
.scene-tab.active { border-top-color: var(--lagoon); color: #e3fff9; }
.scene-tab.active span { color: #ffb45d; }
.hero-image-note { color: #b8dcd6; }
.hero-bottom { bottom: 72px; }

.flavor-strip {
  margin-top: -1px;
  height: 96px;
  background: var(--cream);
  color: var(--ocean);
  border: 0;
  position: relative;
  z-index: 4;
}
.flavor-strip span { font-size: 25px; }
.flavor-strip b { color: var(--red); }

.about-frame {
  border-radius: 150px 150px 16px 16px;
  outline-color: #4db8b2;
  overflow: hidden;
}
.about-frame img { object-position: center 55%; filter: saturate(1.04); }
.about-label {
  background: linear-gradient(140deg, var(--ocean), #0f99a0);
  box-shadow: 7px 7px 0 #ff633d;
}
.about h2 span,
.section-heading h2 span,
.cooperation h2 span { color: var(--ocean); }
.eyebrow,
.text-link { color: var(--ocean); }
.text-link { border-bottom-color: var(--ocean); }

.menu-section {
  background:
    radial-gradient(circle at 95% 12%, #c846df22, transparent 27%),
    radial-gradient(circle at 4% 82%, #1caea51a, transparent 28%),
    var(--coal);
}
.menu-section:before {
  content: 'HOT² / WELCOME TO THE ISLAND';
  position: absolute;
  top: 38px;
  right: 4vw;
  color: #78e7dd12;
  font: 900 clamp(28px, 5vw, 76px) Arial, sans-serif;
  letter-spacing: 4px;
  pointer-events: none;
}
.menu-section .section-heading h2 span,
.signature-copy h3 span { color: #73e9df; }
.menu-section .eyebrow,
.signature-copy .text-link { color: #ff8b55; }
.menu-section .eyebrow span { color: #93d9d4; border-color: #347f7d; }
.signature-feature {
  background: #0a2731;
  border-color: #4acbc836;
  box-shadow: 0 24px 80px #0007;
}
.signature-photo { overflow: hidden; }
.signature-photo img,
.dish-photo img,
.modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.signature-photo img { object-position: center 58%; }
.signature-number { color: #6fd9d1; }
.signature-copy>p:not(.eyebrow) { color: #b8cfcb; }
.filter-tabs button { border-color: #4a77735e; color: #bad1cd; }
.filter-tabs button.active {
  color: #071c26;
  background: #72e4da;
  border-color: #72e4da;
}
.filter-tabs button:hover { color: #ff9a67; }
.dish-card {
  background: #0b2a34;
  border-bottom-color: #54d3cc40;
  box-shadow: 0 15px 38px #00000028;
}
.dish-photo { aspect-ratio: 1.08; }
.dish-photo img { object-position: center 54%; transition: transform .4s ease; }
.dish-card:hover .dish-photo img { transform: scale(1.045); }
.dish-tag {
  background: #ff5b3b;
  color: #fff;
  box-shadow: 0 0 18px #ff4b3d55;
}
.dish-info .dish-en { color: #69d3ca; }
.dish-info p { color: #aac3bf; }
.dish-arrow { color: #75e4db; border-color: #75e4db73; }
.dish-card:hover .dish-arrow { background: #73e4da; color: #06212b; border-color: #73e4da; }
.menu-section .section-footnote { color: #91aaa6; }

.island-gallery {
  position: relative;
  padding: 96px 0 104px;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 14%, #31c8c217, transparent 23%),
    linear-gradient(180deg, #f5efe2, #e7f0ec);
}
.island-gallery:before {
  content: 'ISLAND  /  FIRE  /  SEA';
  position: absolute;
  right: -2vw;
  top: 24px;
  color: #0d727b0b;
  font: 900 clamp(35px, 7vw, 112px) Arial, sans-serif;
  letter-spacing: 6px;
  white-space: nowrap;
  pointer-events: none;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 268px;
  grid-auto-flow: dense;
  gap: 16px;
}
.gallery-item {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #082632;
  border-radius: 86px 86px 10px 10px;
  box-shadow: 0 15px 36px #164c5326;
  transition: box-shadow .5s ease;
}
.gallery-item:hover { box-shadow: 0 24px 48px #164c5340; }
.gallery-item-store,
.gallery-item-wide,
.gallery-item-accent { grid-column: span 2; }
.gallery-item-tall { grid-row: span 2; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  transition: transform .5s ease, filter .5s ease;
}
/* 竖构图照片在宽格中的取景：门店对准招牌带，烤鱼对准鱼盘 */
.gallery-item-store img { object-position: center 52%; }
.gallery-item-tall img { object-position: center 57%; }
.gallery-item-wide img { object-position: center 62%; }
.gallery-item:hover img { transform: scale(1.045); filter: saturate(1.08); }
.gallery-item:after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, #031a24d9);
  pointer-events: none;
}
.gallery-item figcaption {
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 18px;
  bottom: 17px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  color: #f3fff9;
  font: 700 15px var(--serif);
  letter-spacing: 2px;
}
.gallery-item figcaption span {
  color: #7de9df;
  font: 10px Arial, sans-serif;
  letter-spacing: 1px;
}

.gather-banner { background: #061b25; }
.gather-photo { object-position: center 64%; filter: saturate(.92) contrast(1.05); }
.gather-banner:after {
  background:
    linear-gradient(90deg, #041923ec, #041923a6 48%, #04192320),
    linear-gradient(0deg, #061b25a3, transparent 48%);
}
.gather-inner .eyebrow { color: #75e4da; }
.gather-inner h2 span { color: #ff8a54; }
.gather-description { color: #d4ebe7; }

.stores { position: relative; }
.stores:before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 80% 18%, #31c8c211, transparent 23%);
}
.city-map { border-color: #0c7c85; box-shadow: 11px 11px 0 #ff6442; }
.pin-circle,
.map-pin.active .pin-circle { background: var(--ocean); }
.map-pin.active .pin-circle { outline-color: #ff64422a; }
.map-pin.active .pin-label { color: var(--ocean); }
.store-kicker,
.store-actions .platform-link { color: var(--ocean); }
.store-kicker:before { background: var(--red); }

.stories-section { background: #dcebea; }
.story-photo {
  height: 300px;
  border-radius: 120px 120px 10px 10px;
  box-shadow: 0 12px 36px #164c5333;
}
.story-photo img { object-position: center 56%; }
.story-card:nth-child(2) .story-photo img { object-position: center 56%; }
.story-card:nth-child(3) .story-photo img { object-position: center 48%; }
.story-meta span,
.story-read { color: var(--ocean); }
.story-read { border-color: #9ebfbc; }

.inquiry-panel {
  background: #dfece8;
  border-top-color: var(--ocean);
  box-shadow: 10px 10px 0 #ff624038;
}
.form-heading>span,
.faq summary span,
.cooperation-note>span,
.inline-button { color: var(--ocean); }
form input:not([type=checkbox]),
form select,
form textarea { border-color: #a9c3bf; }

.closing {
  background:
    radial-gradient(circle at 15% 30%, #f253dd38, transparent 28%),
    linear-gradient(120deg, #06212b, #0b6871);
  color: #d8fff8;
}
.closing-small { color: #83e7de; }
.closing p span { color: #ffb35e; }
.closing>a { color: #7eeee2; border-color: #7eeee2; }
footer { background: #041821; }
.footer-dot { color: #5de0d5; }
.back-top { background: #082d37; color: #79e8de; border-color: #2aa49f; }
.modal-photo { overflow: hidden; background: #071c26; }
.modal-photo img { object-position: center 55%; }
.modal-copy .eyebrow,
.modal-copy .text-link,
.modal-source a { color: var(--ocean); }

@media (max-width: 1000px) and (min-width: 701px) {
  /* 3 列 × 3 行恰好填满：仅门店图跨 2 列，其余归位 */
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 235px; gap: 13px; }
  .gallery-item-tall { grid-row: span 1; }
  .gallery-item-wide,
  .gallery-item-accent { grid-column: span 1; }
}

@media (max-width: 700px) {
  .site-header { background: #061a25ed; }
  .mobile-nav { background: #061a25; color: #e7fff9; border-color: #24545a; }
  .mobile-nav a { border-color: #24545a; }
  .menu-toggle span { background: #dffbf6; }
  .hero { height: 780px; }
  .hero:before { bottom: -46px; height: 88px; }
  .hero [data-scene-image="0"] { object-position: 54% 56%; }
  .hero [data-scene-image="1"] { object-position: center 52%; }
  .hero [data-scene-image="2"] { object-position: center 55%; }
  .hero-content { padding-top: 150px; }
  .hero h1 { font-size: 55px; }
  .hero-stamp { bottom: 146px; }
  .hero-bottom { bottom: 72px; }
  .hero-image-note { bottom: 112px; }
  .flavor-strip { height: 72px; }
  .about-frame { border-radius: 95px 95px 10px 10px; }
  .story-photo { height: 330px; border-radius: 110px 110px 10px 10px; }
  .signature-photo img { object-position: center 57%; }
  .island-gallery { padding: 66px 0 72px; }
  /* 手机端统一 2 列 × 4 行，全部等大，整齐不缺角 */
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 205px; gap: 10px; }
  .gallery-item { border-radius: 58px 58px 8px 8px; }
  .gallery-item-store,
  .gallery-item-wide,
  .gallery-item-accent { grid-column: span 1; }
  .gallery-item-tall { grid-row: span 1; }
  .gallery-item-store img { object-position: center 45%; }
  .gallery-item-wide img { object-position: center 58%; }
  .gallery-item figcaption { left: 13px; right: 12px; bottom: 12px; font-size: 12px; letter-spacing: 1px; }
  .gallery-item figcaption span { font-size: 8px; }
  .gather-photo { object-position: center 63%; }
  .city-map { box-shadow: 6px 6px 0 #ff6442; }
}