@charset "UTF-8";

/* 中華ダイニング饗十膳 トップページ共通CSS
   色・幅・画像は各項目のコメントを参考に変更してください。 */

:root{
  --black:#050505;
  --panel:#0d0d0d;
  --ink:#181512;
  --white:#fff;
  --ivory:#f4efe7;
  --muted:#cfc6bb;
  --gold:#c89b36;
  --gold-dark:#6e5217;
  --red:#a30012;
  --deep-red:#470006;
  --max:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
  line-height:1.9;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.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
}
.section-wrap{max-width:var(--max);margin:0 auto;padding-left:28px;padding-right:28px}

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(0,0,0,.96);
  border-bottom:1px solid rgba(200,155,54,.16);
}
.header-inner{
  max-width:var(--max);margin:0 auto;min-height:104px;
  padding:12px 28px;display:flex;align-items:center;justify-content:space-between;gap:28px
}
.brand,.footer-brand{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:0 0 auto
}
.logo-sub{width:130px;height:auto}
.logo-main{width:180px;height:auto}
.global-nav{display:flex;align-items:center;gap:clamp(18px,2.5vw,36px);font-size:.98rem;white-space:nowrap}
.global-nav a{position:relative;padding:34px 0 29px}
.global-nav a:after{
  content:"";position:absolute;left:0;right:0;bottom:17px;height:2px;
  background:var(--red);transform:scaleX(0);transition:.2s
}
.global-nav a:hover:after,.global-nav a.active:after{transform:scaleX(1)}

.hero{
  position:relative;min-height:790px;overflow:hidden;
  background:
    linear-gradient(90deg,rgba(38,0,3,.96) 0%,rgba(60,0,0,.82) 30%,rgba(0,0,0,.22) 58%,rgba(0,0,0,.08) 100%),
    url("../images/top-hero-mapotofu-temp.jpg") center 56% / cover no-repeat;
}
.hero:before{
  content:"";position:absolute;inset:0 auto 0 0;width:48%;opacity:.14;
  background-image:repeating-linear-gradient(45deg,transparent 0 18px,rgba(255,255,255,.06) 18px 19px)
}
.hero-shade{
  position:absolute;inset:0;background:radial-gradient(circle at 70% 50%,transparent 0 28%,rgba(0,0,0,.16) 64%,rgba(0,0,0,.5) 100%)
}
.hero-inner{
  position:relative;z-index:2;max-width:var(--max);min-height:790px;margin:0 auto;
  padding:80px 48px;display:flex;align-items:center;justify-content:space-between;gap:40px
}
.hero-copy{width:min(560px,52vw)}
.eyebrow,.feature-kicker,.contact-kicker,.section-heading span{
  margin:0 0 18px;color:var(--gold);font-family:Georgia,serif;font-size:.76rem;letter-spacing:.22em
}
.hero h1{
  margin:0;font-size:clamp(3rem,5.4vw,5.45rem);line-height:1.35;font-weight:500;letter-spacing:.06em;
  text-shadow:0 4px 24px rgba(0,0,0,.75)
}
.lead{margin:34px 0 0;font-size:clamp(1rem,1.45vw,1.23rem);color:#f7f1e8;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.hero-actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.button{
  min-height:54px;padding:11px 22px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--gold-dark);transition:.2s;font-size:.98rem
}
.button-primary{background:var(--red);border-color:var(--red)}
.button-primary:hover{background:#c00018}
.button-secondary{background:rgba(0,0,0,.55)}
.button-secondary:hover{background:#16100b;border-color:var(--gold)}
.button.large{min-width:210px;min-height:66px;font-size:1.08rem}
.vertical-label{
  margin-right:2%;padding:22px 14px;writing-mode:vertical-rl;letter-spacing:.18em;font-size:1.22rem;
  background:rgba(0,0,0,.78);border:1px solid var(--gold);outline:1px solid rgba(200,155,54,.4);outline-offset:-6px
}

.intro{
  padding-top:90px;padding-bottom:74px;display:grid;grid-template-columns:.9fr 1.3fr;gap:72px;
  background:var(--ivory);color:var(--ink);max-width:none
}
.intro>*{max-width:calc(var(--max)/2)}
.intro .section-heading{justify-self:end;width:100%;padding-left:max(28px,calc((100vw - var(--max))/2 + 28px))}
.intro-copy{padding-right:max(28px,calc((100vw - var(--max))/2 + 28px))}
.section-heading h2{margin:0;font-size:clamp(2rem,3.8vw,3.4rem);font-weight:500;line-height:1.45}
.section-heading.light h2{color:#fff}
.intro-copy p{margin:0 0 18px;font-size:1.05rem}

.feature-grid{
  padding-top:34px;padding-bottom:70px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px
}
.feature-card{background:linear-gradient(#101010,#070707);border:1px solid var(--gold-dark)}
.feature-card img{width:calc(100% - 24px);margin:12px auto 0;aspect-ratio:4/3;object-fit:cover}
.feature-body{padding:22px 24px 28px}
.feature-kicker{margin-bottom:8px;font-size:.66rem}
.feature-body h3{margin:0 0 12px;color:var(--gold);font-size:1.48rem;font-weight:500}
.feature-body p:last-child{margin:0;color:#eee7de}

.menu-preview{
  background:
    linear-gradient(rgba(26,0,0,.9),rgba(5,5,5,.96)),
    url("../images/top-dish-3.jpg") center/cover no-repeat;
  border-top:1px solid rgba(200,155,54,.18);border-bottom:1px solid rgba(200,155,54,.18)
}
.menu-inner{padding-top:86px;padding-bottom:88px}
.menu-categories{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px}
.menu-categories span{
  padding:8px 14px;border:1px solid rgba(200,155,54,.55);background:rgba(0,0,0,.42);font-size:.95rem
}
.sample-menu{
  margin-top:32px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;
  border-top:1px solid var(--gold-dark);border-bottom:1px solid var(--gold-dark)
}
.sample-menu strong{display:block;color:var(--gold);font-size:1.35rem;font-weight:500}
.sample-menu span{color:#eee2d5}
.sample-menu em{font-style:normal;font-size:1.2rem}
.menu-note{max-width:800px;margin:26px 0 0;color:#ded4ca}

.gallery{padding-top:84px;padding-bottom:78px}
.gallery-grid{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid rgba(200,155,54,.35)}
.photo-note{margin:18px 0 0;color:#aaa;font-size:.9rem}

.access-section{background:#0b0b0b;border-top:1px solid rgba(200,155,54,.18)}
.access-inner{padding-top:86px;padding-bottom:86px;display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:start}
.access-list{margin:24px 0 0;padding-left:1.2em}
.shop-card{padding:34px;border:1px solid var(--gold-dark);background:linear-gradient(180deg,#111,#070707)}
.shop-logo-sub{width:120px;margin-bottom:8px}
.shop-logo-main{width:220px;margin-bottom:24px}
.shop-card address{font-style:normal;color:#eee4db}
.shop-info{margin:24px 0 0}
.shop-info div{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
.shop-info dt,.shop-info dd{margin:0}
.shop-info dt{color:var(--gold)}

.contact-band{background:linear-gradient(90deg,#3b0006,#0b0001)}
.contact-inner{padding-top:62px;padding-bottom:62px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.contact-inner h2{margin:0 0 12px;font-size:clamp(1.65rem,3vw,2.5rem);font-weight:500;line-height:1.5}
.contact-inner p:last-child{margin:0;color:#d8cbc1}
.contact-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}

.site-footer{padding:30px 0 20px;border-top:8px solid #520008;background:#000}
.footer-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.footer-brand .logo-sub{width:110px}
.footer-brand .logo-main{width:160px}
.site-footer small{color:#888}

@media(max-width:980px){
  .header-inner{min-height:78px}
  .logo-sub{width:105px}.logo-main{width:150px}
  /* JavaScriptを使わず、スマートフォンでも常に操作できるメニュー */
  .header-inner{flex-wrap:wrap}
  .global-nav{
    width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:0;
    padding-top:8px;border-top:1px solid rgba(208,165,72,.16)
  }
  .global-nav a{padding:10px 14px}
  .global-nav a:after{bottom:4px}
  .hero,.hero-inner{min-height:700px}.hero{background-position:62% center}
  .hero-inner{padding:60px 30px}.hero-copy{width:min(620px,74vw)}
  .intro{grid-template-columns:1fr;gap:30px}
  .intro .section-heading,.intro-copy{max-width:var(--max);padding-left:28px;padding-right:28px;justify-self:auto}
  .feature-grid{grid-template-columns:1fr}
  .feature-card{display:grid;grid-template-columns:minmax(220px,38%) 1fr}
  .feature-card img{width:100%;height:100%;margin:0;aspect-ratio:auto}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gallery-grid img:last-child{grid-column:1/-1;aspect-ratio:2/1}
  .access-inner{grid-template-columns:1fr}
  .contact-inner{align-items:flex-start;flex-direction:column}
  .contact-actions{justify-content:flex-start}
}

@media(max-width:640px){
  .section-wrap{padding-left:16px;padding-right:16px}
  .header-inner{padding:10px 16px;justify-content:center}
  .brand{align-items:center}
  .logo-sub{width:92px}.logo-main{width:132px}
  .global-nav{font-size:.84rem}
  .global-nav a{padding:8px 9px}
  .hero{
    min-height:660px;
    background:
      linear-gradient(180deg,rgba(35,0,0,.35),rgba(0,0,0,.45)),
      linear-gradient(90deg,rgba(60,0,0,.88),rgba(0,0,0,.12)),
      url("../images/top-hero-mapotofu-temp.jpg") 58% center/cover no-repeat
  }
  .hero-inner{min-height:660px;padding:46px 20px 32px;align-items:flex-end}
  .hero-copy{width:100%}.hero h1{font-size:clamp(2.55rem,13vw,4rem)}
  .lead{font-size:.98rem}.vertical-label{display:none}
  .hero-actions{flex-direction:column}.button{width:100%}
  .feature-card{display:block}.feature-card img{width:calc(100% - 20px);height:auto;margin:10px auto 0;aspect-ratio:4/3}
  .gallery-grid{grid-template-columns:1fr}.gallery-grid img:last-child{grid-column:auto;aspect-ratio:1/1}
  .sample-menu{align-items:flex-start;flex-direction:column}
  .shop-card{padding:24px}.shop-info div{grid-template-columns:80px 1fr}
  .contact-actions{width:100%;flex-direction:column}.button.large{width:100%}
  .footer-inner{align-items:flex-start;flex-direction:column}
}

.page-enter .hero-copy,
.page-enter .vertical-label { animation: heroFade 1.05s ease both; }
.page-enter .vertical-label { animation-delay: .18s; }
.feature-card, .gallery-grid img, .shop-card {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.feature-card:hover, .shop-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}
.gallery-grid img:hover { transform: scale(1.015); }
@keyframes heroFade {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .page-enter .hero-copy,
  .page-enter .vertical-label { animation: none; }
  * { transition: none !important; }
}


/* 第3稿：佛跳牆スペシャル料理 */
.special-dish {
  padding-top: 86px;
  padding-bottom: 88px;
}
.special-hero {
  margin-top: 34px;
  display: grid;
  grid-template-columns: minmax(320px, .9fr) 1.1fr;
  border: 1px solid var(--gold-dark);
  background: linear-gradient(135deg, #120b08, #060606);
}
.special-hero img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
}
.special-title {
  padding: 46px;
  align-self: center;
}
.special-title h3 {
  margin: 0;
  color: var(--gold);
  font-size: clamp(3rem, 6vw, 5.8rem);
  font-weight: 500;
  line-height: 1.15;
}
.special-subtitle {
  margin: 10px 0 0;
  font-size: clamp(1.2rem, 2.3vw, 1.8rem);
}
.special-price {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(200,155,54,.45);
  font-size: 1.25rem;
}
.special-content {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
}
.special-story,
.special-ingredients {
  padding: 30px;
  border: 1px solid rgba(200,155,54,.38);
  background: #0b0b0b;
}
.special-story p {
  margin: 0 0 18px;
  color: #eee7df;
}
.special-story blockquote {
  margin: 28px 0;
  padding: 20px 24px;
  border-left: 3px solid var(--gold);
  background: #140b08;
  color: #fff3e4;
  font-size: 1.08rem;
  line-height: 2;
}
.special-ingredients img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 22px;
}
.ingredient-groups {
  display: grid;
  gap: 14px;
}
.ingredient-groups section {
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.ingredient-groups h4 {
  margin: 0 0 4px;
  color: var(--gold);
  font-size: 1.15rem;
  font-weight: 500;
}
.ingredient-groups p {
  margin: 0;
  color: #e9e1d8;
}
@media(max-width: 980px){
  .special-hero,
  .special-content {
    grid-template-columns: 1fr;
  }
  .special-hero img {
    min-height: 360px;
  }
}
@media(max-width: 640px){
  .special-title,
  .special-story,
  .special-ingredients {
    padding: 22px;
  }
  .special-hero img {
    min-height: 280px;
  }
}

.special-title.standalone{
  margin-top:30px;
  margin-bottom:26px;
  padding:0;
}
.ingredient-images{
 display:grid;
 grid-template-columns:2fr 1fr;
 gap:18px;
 margin-bottom:22px;
 align-items:start;
}
.ingredient-images img{
 width:100%;
 aspect-ratio:1/1;
 object-fit:cover;
 margin:0;
}
@media(max-width:700px){
 .ingredient-images{grid-template-columns:1fr;}
}


/* 第5稿：黒に近い焦げ茶を基調にした質感調整 */
:root{
  --black:#130d0a;
  --panel:#1a120e;
  --ink:#1b1511;
  --white:#fffaf4;
  --ivory:#eee3d4;
  --muted:#cdbdac;
  --gold:#d0a548;
  --gold-dark:#70531d;
  --red:#8d0010;
  --deep-red:#3a0805;
}

body{
  background:
    radial-gradient(circle at 18% 12%, rgba(108,58,27,.10), transparent 28%),
    linear-gradient(180deg,#160f0c 0%,#100b09 52%,#0d0907 100%);
}

.site-header{
  background:rgba(17,11,8,.97);
  border-bottom:1px solid rgba(208,165,72,.22);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}

.global-nav a{
  color:#f4ede5;
  letter-spacing:.035em;
}
.global-nav a:after{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.hero{
  background:
    linear-gradient(90deg,rgba(48,20,12,.96) 0%,rgba(58,19,13,.82) 30%,rgba(18,11,8,.34) 60%,rgba(10,7,5,.12) 100%),
    url("../images/top-hero-mapotofu-temp.jpg") center 56% / cover no-repeat;
}
.hero-shade{
  background:
    linear-gradient(180deg,rgba(12,8,6,.08),rgba(8,5,4,.26)),
    radial-gradient(circle at 72% 48%,transparent 0 24%,rgba(16,10,7,.18) 56%,rgba(8,5,4,.58) 100%);
}
.hero h1{
  color:#fffaf5;
  text-shadow:0 5px 28px rgba(0,0,0,.8),0 1px 0 rgba(208,165,72,.15);
}
.lead{
  color:#f2e7dc;
}
.vertical-label{
  background:linear-gradient(180deg,rgba(20,13,9,.92),rgba(9,6,4,.9));
  border-color:#bd9135;
  box-shadow:0 14px 32px rgba(0,0,0,.28);
}

.button{
  border-radius:2px;
  letter-spacing:.05em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.button-primary{
  background:linear-gradient(180deg,#a10b1c,#7f0010);
  border-color:#b51628;
  box-shadow:0 10px 24px rgba(74,0,8,.24);
}
.button-primary:hover{
  background:linear-gradient(180deg,#b41629,#8f0012);
  transform:translateY(-1px);
}
.button-secondary{
  background:linear-gradient(180deg,rgba(31,21,15,.9),rgba(15,10,7,.9));
  border-color:#7b5b22;
}
.button-secondary:hover{
  background:linear-gradient(180deg,#2a1c14,#17100c);
  border-color:#d0a548;
}

.intro{
  background:
    linear-gradient(rgba(239,228,213,.96),rgba(233,219,201,.96)),
    repeating-linear-gradient(45deg,rgba(70,44,23,.025) 0 2px,transparent 2px 7px);
  color:#221811;
}
.section-heading h2{
  letter-spacing:.035em;
}
.section-heading span,
.eyebrow,
.feature-kicker,
.contact-kicker{
  color:#d7ad55;
}

.feature-card,
.shop-card,
.special-story,
.special-ingredients{
  background:
    linear-gradient(180deg,rgba(31,21,16,.98),rgba(16,11,8,.98));
  border-color:rgba(208,165,72,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 18px 38px rgba(0,0,0,.16);
}
.feature-card img,
.gallery-grid img,
.special-ingredients img,
.special-hero img{
  filter:saturate(.96) contrast(1.03);
}
.feature-body h3,
.special-title h3,
.ingredient-groups h4{
  color:#ddb45b;
}

.menu-preview{
  background:
    linear-gradient(rgba(55,15,10,.88),rgba(15,10,7,.97)),
    url("../images/top-dish-3.jpg") center/cover no-repeat;
}
.menu-categories span{
  background:linear-gradient(180deg,rgba(37,24,17,.74),rgba(17,11,8,.78));
  border-color:rgba(208,165,72,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.menu-categories span:hover{
  border-color:#d0a548;
  background:#24170f;
}

.access-section{
  background:
    radial-gradient(circle at 85% 10%,rgba(112,67,34,.08),transparent 26%),
    #140e0b;
}
.shop-card address,
.shop-info dd,
.special-story p,
.ingredient-groups p{
  color:#eee3d8;
}

.contact-band{
  background:
    linear-gradient(90deg,#43100c 0%,#24100b 42%,#130c09 100%);
  border-top:1px solid rgba(208,165,72,.18);
  border-bottom:1px solid rgba(208,165,72,.12);
}

.site-footer{
  background:#0d0907;
  border-top-color:#5f150f;
}

.special-title.standalone{
  padding:26px 30px;
  border-top:1px solid rgba(208,165,72,.38);
  border-bottom:1px solid rgba(208,165,72,.28);
  background:linear-gradient(90deg,rgba(39,24,16,.78),rgba(18,12,9,.45),transparent);
}
.special-price{
  color:#f4e5cf;
}
.special-story blockquote{
  background:linear-gradient(90deg,#2c1710,#1a100c);
  border-left-color:#d0a548;
  box-shadow:inset 0 0 0 1px rgba(208,165,72,.06);
}

.ingredient-images img{
  border:1px solid rgba(208,165,72,.26);
  box-shadow:0 12px 28px rgba(0,0,0,.2);
}

.section-heading:after{
  content:"";
  display:block;
  width:74px;
  height:1px;
  margin-top:18px;
  background:linear-gradient(90deg,var(--gold),transparent);
}

.feature-body,
.special-story,
.special-ingredients,
.shop-card{
  position:relative;
}
.feature-body:before,
.special-story:before,
.special-ingredients:before,
.shop-card:before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(208,165,72,.08);
  pointer-events:none;
}

@media(max-width:640px){
  .hero{
    background:
      linear-gradient(180deg,rgba(46,18,11,.36),rgba(13,8,6,.52)),
      linear-gradient(90deg,rgba(63,19,12,.84),rgba(15,9,6,.18)),
      url("../images/top-hero-mapotofu-temp.jpg") 58% center/cover no-repeat;
  }
  .special-title.standalone{
    padding:20px 18px;
  }
}

/* =========================================================
   メニュー総合ページ menu.html
   画像を差し替える場合は、menu.html内の assets/dish-*.jpg を変更します。
   ========================================================= */
.subpage-hero{
  position:relative;
  min-height:420px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid rgba(208,165,72,.25);
}
.menu-page-hero{
  background:
    linear-gradient(90deg,rgba(42,15,10,.94) 0%,rgba(37,15,11,.74) 42%,rgba(10,7,5,.28) 72%,rgba(5,5,5,.25) 100%),
    url("../images/top-dish-3.jpg") center 48% / cover no-repeat;
}
.subpage-hero-shade{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 72% 46%,transparent 0 22%,rgba(8,5,4,.18) 58%,rgba(5,5,5,.58) 100%);
}
.subpage-hero-inner{
  position:relative;
  z-index:1;
  width:100%;
  padding-top:78px;
  padding-bottom:78px;
}
.subpage-hero h1{
  margin:0;
  color:#fffaf4;
  font-size:clamp(2.8rem,5.5vw,5rem);
  line-height:1.3;
  font-weight:500;
  letter-spacing:.08em;
  text-shadow:0 5px 26px rgba(0,0,0,.74);
}
.subpage-hero p:last-child{
  max-width:680px;
  margin:24px 0 0;
  color:#f0e5da;
  font-size:1.08rem;
  text-shadow:0 2px 12px rgba(0,0,0,.72);
}
.menu-guide{
  padding-top:88px;
  padding-bottom:96px;
}
.menu-guide-heading{
  text-align:center;
}
.menu-guide-heading:after{
  margin-left:auto;
  margin-right:auto;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.menu-guide-lead{
  max-width:780px;
  margin:28px auto 0;
  text-align:center;
  color:#ddd2c7;
}
.menu-category-grid{
  margin-top:50px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px;
}
.menu-category-card{
  display:grid;
  grid-template-columns:minmax(220px,43%) 1fr;
  min-height:370px;
  overflow:hidden;
  border:1px solid rgba(208,165,72,.42);
  background:linear-gradient(145deg,#211610,#0d0907 70%);
  box-shadow:0 20px 44px rgba(0,0,0,.22);
}
.menu-category-card-last{
  grid-column:1 / -1;
  width:calc(50% - 15px);
  justify-self:center;
}
.menu-category-image{
  display:block;
  min-height:100%;
  overflow:hidden;
  background:#130d09;
}
.menu-category-image img{
  width:100%;
  height:100%;
  min-height:370px;
  object-fit:cover;
  transition:transform .35s ease,filter .35s ease;
  filter:saturate(.96) contrast(1.03);
}
.menu-category-card:hover .menu-category-image img{
  transform:scale(1.025);
  filter:saturate(1.02) contrast(1.04);
}
.menu-category-body{
  position:relative;
  padding:34px 30px 30px;
  display:flex;
  flex-direction:column;
}
.menu-category-body:before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(208,165,72,.07);
  pointer-events:none;
}
.menu-category-body h3{
  position:relative;
  margin:0 0 16px;
  color:#dfb75f;
  font-size:clamp(1.35rem,2vw,1.85rem);
  line-height:1.5;
  font-weight:500;
}
.menu-category-body h3 a:hover{
  color:#f0cd80;
}
.menu-category-body > p:not(.feature-kicker){
  position:relative;
  margin:0 0 16px;
  color:#eee5dc;
  line-height:1.85;
}
.menu-category-body .menu-category-examples{
  color:#bfb2a6;
  font-size:.9rem;
}
.category-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  gap:10px;
  margin-top:auto;
  padding:10px 0 5px;
  color:#e3bd69;
  border-bottom:1px solid rgba(208,165,72,.55);
  letter-spacing:.05em;
}
.category-link:hover{
  color:#ffe0a0;
  border-color:#ffe0a0;
}
.menu-information{
  background:
    linear-gradient(90deg,rgba(62,17,12,.96),rgba(28,14,10,.98)),
    url("../images/top-hero-mapotofu-temp.jpg") center / cover no-repeat;
  border-top:1px solid rgba(208,165,72,.18);
}
.menu-information-inner{
  padding-top:70px;
  padding-bottom:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:45px;
}
.menu-information h2{
  margin:0 0 15px;
  font-size:clamp(1.65rem,3vw,2.65rem);
  line-height:1.5;
  font-weight:500;
}
.menu-information p:last-child{
  max-width:760px;
  margin:0;
  color:#ddd0c5;
}

@media(max-width:1100px){
  .menu-category-grid{grid-template-columns:1fr}
  .menu-category-card-last{grid-column:auto;width:100%}
}
@media(max-width:720px){
  .subpage-hero{min-height:360px}
  .subpage-hero-inner{padding-top:58px;padding-bottom:58px}
  .subpage-hero h1{font-size:clamp(2.45rem,12vw,3.8rem)}
  .menu-guide{padding-top:68px;padding-bottom:72px}
  .menu-guide-lead br{display:none}
  .menu-category-grid{margin-top:36px;gap:22px}
  .menu-category-card{display:block;min-height:0}
  .menu-category-image img{height:auto;min-height:0;aspect-ratio:4/3}
  .menu-category-body{padding:27px 24px 28px}
  .menu-category-examples{font-size:.85rem}
  .menu-information-inner{align-items:flex-start;flex-direction:column}
  .menu-information-inner .button{width:100%}
}