/* 鮨 華曜 — Design tokens */
:root {
  /* Sumi / Kin / Washi */
  --sumi: #0A0A0A;
  --sumi-2: #121212;
  --sumi-3: #1A1817;
  --kin: #C9A961;
  --kin-deep: #8C7437;
  --kin-light: #E4CC8A;
  --washi: #F5F0E6;
  --washi-2: #EDE5D3;
  --washi-shadow: #D9CFB8;
  --ink: #1C1A17;
  --ink-soft: #2A2622;

  /* Type */
  --f-mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-mincho-body: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --f-latin: "Cormorant Garamond", "EB Garamond", serif;
  --f-latin-sans: "Cormorant Infant", "EB Garamond", serif;

  /* Scale */
  --tr-slow: 1400ms cubic-bezier(.22,.61,.36,1);
  --tr-med: 900ms cubic-bezier(.22,.61,.36,1);
  --tr-fast: 400ms cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--sumi); color: var(--washi); font-family: var(--f-mincho-body); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ————— Utility: thin hairline in kin ————— */
.hairline { height: 1px; background: var(--kin); opacity: .55; }
.hairline-v { width: 1px; background: var(--kin); opacity: .55; }

/* ————— Utility: film grain overlay ————— */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.75 0 0 0 0 0.65 0 0 0 0.14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity: .35; pointer-events: none; z-index: 2;
}

/* ————— Vertical writing ————— */
.tate {
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  font-feature-settings: "palt";
  letter-spacing: .15em;
}

/* ————— Eyebrow numerals ————— */
.numeral {
  font-family: var(--f-latin);
  font-style: italic;
  font-weight: 300;
  color: var(--kin);
  letter-spacing: .18em;
}

/* ————— Kanji display ————— */
.kanji {
  font-family: var(--f-mincho);
  font-weight: 500;
  letter-spacing: .18em;
  font-feature-settings: "palt";
}

/* ————— Primary CTA ————— */
.btn-kin {
  display: inline-flex; align-items: center; gap: 1.4em;
  padding: 1.1em 2.2em;
  border: 1px solid var(--kin);
  color: var(--kin);
  font-family: var(--f-latin);
  font-size: 14px;
  letter-spacing: .32em;
  text-transform: uppercase;
  background: transparent;
  transition: background var(--tr-med), color var(--tr-med), letter-spacing var(--tr-med);
  cursor: pointer;
}
.btn-kin:hover { background: var(--kin); color: var(--sumi); letter-spacing: .38em; }
.btn-kin .arr { transition: transform var(--tr-med); }
.btn-kin:hover .arr { transform: translateX(4px); }

/* ————— Page transition ————— */
.page-enter { animation: pageEnter var(--tr-slow) both; }
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ————— Scroll reveal ————— */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.3s ease-out, transform 1.3s ease-out; }
.reveal.in { opacity: 1; transform: none; }

/* ————— Scrollbar ————— */
::-webkit-scrollbar { width: 0; height: 0; }

/* ————— Selection ————— */
::selection { background: var(--kin); color: var(--sumi); }

/* ————— Image slots (drop targets) ————— */
image-slot {
  background: linear-gradient(135deg, #161210 0%, #0E0B09 100%);
  --is-placeholder-color: rgba(201,169,97,.55);
  --is-placeholder-border: rgba(201,169,97,.25);
  --is-placeholder-font: var(--f-mincho);
  color: var(--kin);
  font-family: var(--f-mincho);
  letter-spacing: .2em;
}
image-slot::part(placeholder) {
  font-family: var(--f-mincho);
  letter-spacing: .25em;
  color: rgba(201,169,97,.65);
}
/* fallback: ensure dropped imagery doesn't get tinted */
image-slot[data-filled] { background: transparent; }