/* ============================================
   KUMO - 和食レストラン 雲
   Theme: Warm Japanese Minimal
   ============================================ */
:root{
  --color-primary:#2c1810;
  --color-primary-hover:#3d2419;
  --color-accent:#c4956a;
  --color-accent-light:#f5efe8;
  --color-text:#6b5e54;
  --color-heading:#2c1810;
  --color-bg:#faf8f5;
  --color-bg-alt:#f0ece6;
  --color-card-bg:#fff;
  --color-header-bg:rgba(250,248,245,.95);
  --color-footer-bg:#2c1810;
  --color-footer-text:rgba(255,255,255,.5);
  --hero-overlay:linear-gradient(to right,rgba(44,24,16,.7) 0%,rgba(44,24,16,.3) 100%);
  --font-heading:'Noto Serif JP','Georgia',serif;
  --font-body:'Noto Sans JP',sans-serif;
  --font-en:'Cormorant Garamond','Georgia',serif;
  --container-width:1100px;
  --header-height:72px;
  --radius:4px;
  --radius-lg:8px;
}

.loading-screen{background:var(--color-primary)}
.loading-logo{font-family:var(--font-en);color:var(--color-accent);font-size:2rem;letter-spacing:.3em;font-weight:300}

/* Header */
.header .logo{font-family:var(--font-heading);font-size:1.1rem;color:var(--color-heading);letter-spacing:.15em;font-weight:500}
.header.scrolled .logo{color:var(--color-heading)}
.header .nav-link{font-size:.78rem;color:var(--color-text);letter-spacing:.05em}
.header.scrolled .nav-link{color:var(--color-text)}
.header .nav-link::after{background:var(--color-accent)}

/* Hero */
.hero-restaurant{min-height:100vh;background:var(--color-primary);position:relative;display:flex;align-items:center;overflow:hidden}
.hero-restaurant .hero-bg{opacity:.5}
.hero-restaurant .hero-content{padding-top:var(--header-height);max-width:560px}
.hero-restaurant .hero-eyebrow{font-family:var(--font-en);font-size:.7rem;letter-spacing:.3em;color:var(--color-accent);margin-bottom:1.5rem}
.hero-restaurant h1{font-family:var(--font-heading);font-size:clamp(2rem,4.5vw,3.5rem);color:#fff;font-weight:400;line-height:1.6;letter-spacing:.1em;margin-bottom:1.5rem}
.hero-restaurant .hero-desc{font-size:.88rem;color:rgba(255,255,255,.6);line-height:2.2}
.hero-restaurant .scroll-indicator{color:rgba(255,255,255,.4)}
.hero-restaurant .scroll-indicator::after{background:rgba(255,255,255,.3)}

/* Concept */
.concept-section{padding:clamp(6rem,12vw,10rem) 0;background:var(--color-bg)}
.concept-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,6rem);align-items:center}
.concept-image{aspect-ratio:3/4;overflow:hidden;position:relative}
.concept-image img{width:100%;height:100%;object-fit:cover}
.concept-image::before{content:'';position:absolute;inset:0;border:1px solid var(--color-accent);margin:16px;z-index:1;pointer-events:none;opacity:.3}
.concept-text .section-label{font-family:var(--font-en);color:var(--color-accent)}
.concept-text .section-label::before{background:var(--color-accent)}
.concept-text h2{font-family:var(--font-heading);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:400;color:var(--color-heading);line-height:1.8;letter-spacing:.08em;margin-bottom:1.5rem}
.concept-text p{font-size:.88rem;line-height:2.4;margin-bottom:1rem}
@media(max-width:768px){.concept-grid{grid-template-columns:1fr;gap:2rem}}

/* Menu */
.menu-section{padding:clamp(5rem,10vw,8rem) 0;background:var(--color-bg-alt)}
.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-top:3rem}
.menu-card{background:var(--color-card-bg);overflow:hidden;transition:all .4s;border:none}
.menu-card:hover{box-shadow:0 16px 50px rgba(0,0,0,.06);transform:translateY(-3px)}
.menu-card img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:brightness(.95);transition:all .6s}
.menu-card:hover img{filter:brightness(1);transform:scale(1.02)}
.menu-card-body{padding:1.5rem}
.menu-card-en{font-family:var(--font-en);font-size:.65rem;letter-spacing:.15em;color:var(--color-accent);margin-bottom:.4rem;text-transform:uppercase}
.menu-card h3{font-family:var(--font-heading);font-size:1rem;font-weight:500;letter-spacing:.08em;color:var(--color-heading);margin-bottom:.4rem}
.menu-card p{font-size:.78rem;line-height:1.8}
.menu-card .price{font-family:var(--font-en);font-size:.9rem;color:var(--color-accent);margin-top:.75rem;display:block;letter-spacing:.05em}
@media(max-width:640px){.menu-grid{grid-template-columns:1fr}}

/* Info */
.info-section{padding:clamp(5rem,10vw,8rem) 0}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2rem}
.info-box{padding:2rem;background:var(--color-bg-alt)}
.info-box h3{font-family:var(--font-heading);font-size:1rem;letter-spacing:.08em;color:var(--color-heading);margin-bottom:1rem}
.hours-table{width:100%;border-collapse:collapse}
.hours-table th,.hours-table td{padding:.6rem .8rem;font-size:.8rem;text-align:center;border-bottom:1px solid rgba(0,0,0,.04)}
.hours-table th{background:var(--color-primary);color:#fff;font-size:.72rem;font-weight:400;letter-spacing:.05em}
@media(max-width:640px){.info-grid{grid-template-columns:1fr}}

/* Gallery */
.gallery-section{padding:clamp(4rem,8vw,6rem) 0;background:var(--color-bg-alt)}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:2rem}
.gallery-grid img{width:100%;aspect-ratio:1;object-fit:cover;filter:brightness(.9);transition:filter .4s}
.gallery-grid img:hover{filter:brightness(1)}
@media(max-width:768px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}

/* CTA */
.cta-restaurant{background:var(--color-primary);padding:clamp(5rem,10vw,8rem) 0;text-align:center;position:relative;overflow:hidden}
.cta-restaurant h2{font-family:var(--font-heading);color:#fff;font-size:clamp(1.5rem,3vw,2rem);font-weight:400;letter-spacing:.1em;margin-bottom:1rem}
.cta-restaurant p{color:rgba(255,255,255,.5);font-size:.88rem;margin-bottom:2rem}
.btn-reserve{display:inline-flex;align-items:center;gap:.75rem;padding:.9rem 2.5rem;border:1px solid var(--color-accent);color:var(--color-accent);font-family:var(--font-en);font-size:.8rem;letter-spacing:.15em;transition:all .3s}
.btn-reserve:hover{background:var(--color-accent);color:var(--color-primary);opacity:1}

/* Page header */
.page-header{background:var(--color-primary);padding:calc(var(--header-height) + 3rem) 0 3rem;color:#fff}
.page-header .section-label{color:var(--color-accent)}
.page-header h1{color:#fff;font-family:var(--font-heading);font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:400;letter-spacing:.1em}
.page-header .page-subtitle{font-family:var(--font-en);font-size:.75rem;color:rgba(255,255,255,.35);letter-spacing:.15em;margin-top:.4rem}
.breadcrumb a{color:var(--color-accent)}

/* Footer override */
.footer{background:var(--color-footer-bg)}
.footer-logo{font-family:var(--font-heading);letter-spacing:.15em;font-weight:400}

/* Contact form */
.form-input,.form-textarea,.form-select{background:var(--color-bg);border-color:rgba(0,0,0,.08)}
.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--color-accent)}

/* SCALE Badge */
.scale-badge{background:var(--color-primary);border-radius:0}
.scale-badge-dot{background:var(--color-accent)}