/* =========================================================
   Osteria Notte — 表サイト 共通スタイル（白基調）
   要件書 0-3 / 0-4 / 0-5 / 0-6 準拠
   ========================================================= */

:root{
  --bg          : #F7F4EE;   /* 生成りの白 */
  --surface     : #FFFFFF;
  --ink-900     : #20180F;   /* 本文の濃い焦げ茶 */
  --ink-700     : #4A3B2C;
  --ink-500     : #7A6A57;
  --ink-50      : #F5F1E8;   /* 動画上の白文字 */
  --accent      : #7C2A2A;   /* くすんだワインレッド */
  --accent-dark : #5A1E1E;
  --accent-tint : #F0E6E2;   /* 帯の薄い赤 */
  --gold        : #A8855A;   /* 暖色の金 */
  --hairline    : color-mix(in oklab, var(--ink-900) 14%, transparent);
  --hairline-soft: color-mix(in oklab, var(--ink-900) 8%, transparent);

  --font-display: "Playfair Display", Georgia, serif;
  --font-mincho : "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --font-mono   : "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-body   : "Noto Sans JP", system-ui, sans-serif;

  --header-h: 76px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-900);
  font-family:var(--font-body);
  font-size:clamp(15px, 0.4vw + 13px, 17px);
  line-height:1.95;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#fff; }

/* ---- Container ---- */
.container{
  max-width:1440px;
  margin-inline:auto;
  padding-inline:clamp(24px, 5vw, 80px);
}

/* ---- Typographic helpers ---- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:clamp(11px, 0.4vw + 9px, 13px);
  letter-spacing:0.34em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
}
.eyebrow-ink{ color:var(--ink-500); }
.mincho{ font-family:var(--font-mincho); }
.display{ font-family:var(--font-display); font-weight:600; line-height:1.06; letter-spacing:-0.01em; }
.rule{ height:1px; background:var(--hairline); border:0; margin:0; }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .4s ease, border-color .4s ease, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.site-header .container{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
}
.site-header[data-solid="true"]{
  background:color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--hairline);
}
.brand{
  display:flex; align-items:baseline; gap:.6em;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(18px, 0.6vw + 14px, 23px);
  letter-spacing:.01em;
  color:var(--ink-900);
}
.brand .brand-sub{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); font-weight:500;
  transform:translateY(-2px);
}
/* header変種：動画ヒーロー上では白文字 */
.site-header[data-onhero="true"]:not([data-solid="true"]) .brand,
.site-header[data-onhero="true"]:not([data-solid="true"]) .nav-desktop a{ color:var(--ink-50); }
.site-header[data-onhero="true"]:not([data-solid="true"]) .brand .brand-sub{ color:color-mix(in oklab,var(--gold) 70%, #fff); }
.site-header[data-onhero="true"]:not([data-solid="true"]) .hamburger span{ background:var(--ink-50); }

.nav-desktop{ display:flex; align-items:center; gap:clamp(20px,2vw,40px); }
.nav-desktop a{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-700); position:relative; padding:6px 0;
  transition:color .25s;
}
.nav-desktop a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:currentColor; transition:width .3s ease;
}
.nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after{ width:100%; }
.nav-desktop a:hover{ color:var(--accent); }

.hamburger{
  display:none; width:40px; height:40px; border:0; background:none; cursor:pointer;
  flex-direction:column; justify-content:center; gap:6px; padding:8px;
}
.hamburger span{ display:block; height:1.5px; background:var(--ink-900); transition:.3s; }

/* mobile drawer */
.nav-mobile{
  position:fixed; inset:0; z-index:80;
  background:var(--bg);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px;
  opacity:0; pointer-events:none; transform:translateY(-8px);
  transition:opacity .3s, transform .3s;
}
.nav-mobile.open{ opacity:1; pointer-events:auto; transform:none; }
.nav-mobile a{
  font-family:var(--font-display); font-size:34px; color:var(--ink-900); padding:10px;
}
.nav-mobile .close{
  position:absolute; top:24px; right:24px; font-family:var(--font-mono);
  font-size:13px; letter-spacing:.2em; background:none; border:0; cursor:pointer; color:var(--ink-700);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  padding:15px 28px; border:1px solid currentColor; cursor:pointer;
  transition:.3s ease; background:none; color:var(--ink-900);
}
.btn .arr{ transition:transform .3s; }
.btn:hover .arr{ transform:translateX(5px); }
.btn-accent{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-accent:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }
.btn-ghost-light{ color:var(--ink-50); border-color:color-mix(in oklab,var(--ink-50) 55%, transparent); }
.btn-ghost-light:hover{ background:var(--ink-50); color:var(--ink-900); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background:var(--ink-900); color:var(--ink-50);
  padding-block:clamp(56px, 4vw + 24px, 96px);
  margin-top:clamp(80px,6vw,140px);
}
.site-footer .foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,3vw,64px);
  align-items:start;
}
.site-footer .brand{ color:var(--ink-50); font-size:28px; }
.site-footer h4{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin:0 0 18px; font-weight:500;
}
.site-footer p, .site-footer li{ color:color-mix(in oklab,var(--ink-50) 78%, transparent); margin:.2em 0; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer a:hover{ color:#fff; }
.foot-bottom{
  margin-top:clamp(40px,4vw,72px); padding-top:24px;
  border-top:1px solid color-mix(in oklab,var(--ink-50) 16%, transparent);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in oklab,var(--ink-50) 55%, transparent);
}

/* =========================================================
   Image placeholder（差し替え前提・要件 0-4）
   ========================================================= */
.ph{
  position:relative; overflow:hidden; background:var(--accent-tint);
  background-image:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 8%, transparent) 0 1px,
      transparent 1px 11px);
  display:grid; place-items:center;
}
.ph::after{
  content:attr(data-label);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:color-mix(in oklab,var(--accent) 65%, var(--ink-700));
  padding:6px 12px; border:1px solid color-mix(in oklab,var(--accent) 30%, transparent);
  background:color-mix(in oklab,var(--surface) 60%, transparent);
  text-align:center; max-width:80%;
}
.ph-dark{ background:#15110d; background-image:
  repeating-linear-gradient(135deg, rgba(168,133,90,.12) 0 1px, transparent 1px 11px); }
.ph-dark::after{ color:var(--gold); border-color:color-mix(in oklab,var(--gold) 40%, transparent);
  background:rgba(0,0,0,.3); }
/* 実画像を入れたプレースホルダ（差し替え済み）：ストライプとラベルを消して写真を表示 */
.ph.filled{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.ph.filled::after{ display:none; }

/* =========================================================
   Section scaffolding + reveal
   ========================================================= */
.section{ padding-block:clamp(72px, 5vw + 24px, 144px); }
.section-head{ max-width:760px; }
.section-head .display{ font-size:clamp(34px, 2.6vw + 16px, 58px); margin:.3em 0 .4em; }
.lead{ font-size:clamp(16px,0.5vw+14px,19px); color:var(--ink-700); max-width:62ch; }

[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1023px){
  .site-footer .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:767px){
  [class*="grid-"]{ grid-template-columns:1fr; }
  .nav-desktop{ display:none; }
  .hamburger{ display:flex; }
  .site-footer .foot-grid{ grid-template-columns:1fr; gap:36px; }
  .foot-bottom{ flex-direction:column; }
}