/* ===== Shiny Enterprise - All Black + Grand Feast Hero (drop-in style.css) ===== */
:root{
  --bg:#000000;
  --text:#f0f0f0;
  --muted:#b5b9c9;
  --gold:#d4af37;
  --gold-weak:#e6c766;
  --border:#222;
  --shadow: 0 10px 30px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Hiragino Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:#000; /* site-wide black */
  color:var(--text);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* If a star canvas remains in HTML, hide it. */
#stars{ display:none !important; }

a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-weak)}

.container{max-width:1080px;margin:0 auto;padding:0 20px}

/* ===== Header ===== */
header.site-header{
  position:sticky;top:0;z-index:20;
  background:#000;
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.6px}
/* Hide SVG logo by default (text-only brand). Remove this rule to show the SVG. */
.brand svg{display:none !important}
.brand span{font-size:1.05rem}
nav.main-nav a{margin-left:18px;font-weight:600;color:#e9e9f0}
nav.main-nav a:hover{color:var(--gold)}

/* ===== Hero (grand feast photo) ===== */
/* Alternative options (swap URL if you prefer):
   https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?q=80&w=1920&auto=format&fit=crop
   https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?q=80&w=1920&auto=format&fit=crop
*/
.hero{
  padding:80px 0 60px;
  background-color:#000; /* base black */
  background-image:url('https://images.unsplash.com/photo-1532634896-26909d0d4b6a?q=80&w=1920&auto=format&fit=crop');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  /* Uncomment next line if you want a darker image: */
  /* background-blend-mode:multiply; */
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
}
.hero h1{
  font-family:"Noto Serif JP","Times New Roman",serif;
  font-weight:700;font-size:clamp(26px,5vw,40px);
  margin:0 0 14px;color:var(--gold);letter-spacing:.3px
}
.hero p{max-width:760px;color:#e8e8ee;margin:0 0 8px;font-size:1.05rem}
.hero .tagline{color:var(--gold-weak);font-weight:600;margin-top:8px}

/* ===== Sections ===== */
.section{padding:48px 0;background:#000}
.section h2{
  font-family:"Noto Serif JP","Times New Roman",serif;
  font-weight:700;font-size:clamp(22px,4vw,30px);
  margin:0 0 18px;color:#fff
}

/* ===== Cards (recipe list) ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:960px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards{grid-template-columns:1fr}}

.card{
  background:#000;border:1px solid var(--border);
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column
}
/* Thumbs use inline background-image from HTML; keep them visible */
.card .thumb{
  height:200px;
  background-color:#000; /* underlay */
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  border-bottom:1px solid var(--border)
}
.card .content{padding:16px 16px 18px;flex:1;background:#000}
.card h3{margin:0 0 6px;font-size:1.05rem;color:#fff}
.card p{margin:0 0 10px;color:var(--muted)}
.card .meta{font-size:.9rem;color:#cfd3e6}
.card .actions{
  padding:14px 16px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;background:#000
}
.button{
  background:linear-gradient(180deg,#f3d88a,var(--gold));
  color:#1a1200;padding:10px 14px;border-radius:10px;font-weight:700;border:none;cursor:pointer;
  box-shadow:0 6px 16px rgba(212,175,55,.35)
}
.button:hover{filter:brightness(1.06)}
.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.ghost:hover{background:rgba(212,175,55,.08)}

.about{
  background:#000;border-top:1px solid var(--border);border-bottom:1px solid var(--border)
}
.about p{max-width:900px;color:#e6e7f1}

/* ===== Footer ===== */
footer.site-footer{
  border-top:1px solid var(--border);
  padding:22px 0;color:#a7acc3;font-size:.95rem;text-align:center;background:#000
}
footer .small{color:#8d93af;font-size:.85rem}

/* ===== Recipe Pages ===== */
.recipe-hero{
  padding:64px 0 28px; border-bottom:1px solid var(--border); background:#000;
}
.breadcrumb a{ color:#cdd2eb }
.recipe-grid{
  display:grid; gap:28px; grid-template-columns: 1.2fr .8fr;
}
@media(max-width:880px){ .recipe-grid{ grid-template-columns: 1fr; } }
.recipe-image{
  height:360px; border-radius:12px;
  background-color:#000; /* underlay */
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow: var(--shadow); border:1px solid var(--border);
}
.panel{
  background:#000;
  border:1px solid var(--border);
  border-radius:12px; padding:16px 18px
}
.panel h4{ margin:0 0 12px; color:#fff; font-size:1.05rem }
.panel ul{ margin:0; padding-left:18px }
.panel li{ margin:6px 0 }
.steps ol{ margin:0; padding-left:20px }
.badge{
  display:inline-block; padding:6px 10px; border:1px solid var(--gold); color:var(--gold); border-radius:999px; font-weight:700; font-size:.85rem; background:#000;
}
.hr{ border:0; border-top:1px solid var(--border); margin:22px 0 }