/* ============================================================
   SANUKI — Restaurant japonais · Genève
   Design system derived from the Figma "Restauration" identity
   Palette: red #EE323F · sage #D6D9D2 · plum #2E2B32
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500;1,700&family=Kanit:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Yuji+Mai&family=Yuji+Syuku&display=swap');

:root {
  --red: #ee323f;
  --red-deep: #cf1f2c;
  --red-ink: #b81824;
  --sage: #d6d9d2;
  --sage-deep: #c4c8bf;
  --paper: #e6e7e1;
  --plum: #2e2b32;
  --plum-soft: #3a3640;
  --ink: #2e2b32;
  --muted: #7c7a80;
  --white: #ffffff;

  --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-label: 'Kanit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Kanit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-brush: 'Yuji Mai', serif;
  --font-brush2: 'Yuji Syuku', serif;

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);
  --nav-h: 76px;

  --shadow-soft: 0 30px 60px -28px rgba(20, 16, 22, 0.45);
  --shadow-card: 0 18px 40px -24px rgba(20, 16, 22, 0.4);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink);
  background: var(--sage);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--red); color: #fff; }

/* paper grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { position: relative; padding: clamp(64px, 9vw, 130px) 0; }
.section--plum { background: var(--plum); color: var(--sage); }
.section--red { background: var(--red); color: #fff; }
.section--sage { background: var(--sage); color: var(--ink); }
.section--paper { background: var(--paper); color: var(--ink); }

/* ---------- Typographic atoms ---------- */
.kicker {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.kicker::before {
  content: "";
  width: 30px; height: 1.5px;
  background: currentColor;
  opacity: 0.6;
}
.kicker--center::after {
  content: "";
  width: 30px; height: 1.5px;
  background: currentColor;
  opacity: 0.6;
}
.kicker--red { color: var(--red); }

.display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
}
.display .accent { color: var(--red); }
.display .outline {
  -webkit-text-stroke: 1.4px currentColor;
  color: transparent;
}

.brush { font-family: var(--font-brush); font-weight: 400; }
.brush2 { font-family: var(--font-brush2); font-weight: 400; }

.lede {
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.62;
  max-width: 56ch;
}

.jp-mark {
  font-family: var(--font-brush);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* vertical side label (poster motif) */
.vlabel {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--red);
  --fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 16px 28px;
  background: var(--bg);
  color: var(--fg);
  border: 1.5px solid var(--bg);
  border-radius: 0;
  overflow: hidden;
  transition: color .45s var(--ease), border-color .45s var(--ease);
  z-index: 0;
}
.btn .btn__arrow { transition: transform .45s var(--ease); }
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--plum);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
  z-index: -1;
}
.btn:hover { color: #fff; border-color: var(--plum); }
.btn:hover::after { transform: translateY(0); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--ghost {
  --bg: transparent;
  --fg: currentColor;
  border-color: currentColor;
}
.btn--ghost::after { background: var(--red); }
.btn--ghost:hover { color: #fff; border-color: var(--red); }

.btn--light {
  --bg: var(--sage);
  --fg: var(--plum);
  border-color: var(--sage);
}
.btn--light::after { background: var(--red); }
.btn--light:hover { color: #fff; border-color: var(--red); }

/* ---------- Reveal: base state is VISIBLE (entrance handled by browsers that paint) ---------- */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* tag chip */
.chip {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1.5px solid currentColor;
  display: inline-block;
  line-height: 1;
}
.chip--solid { background: var(--red); color: #fff; border-color: var(--red); }