/* ========== RESET ========== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { overflow-x: clip; }
body { min-height: 100vh; }
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ========== ROOT ========== */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Anchor target offset so the fixed header doesn't cover the heading */
:target { scroll-margin-top: calc(var(--header-h) + 16px); }
[id]   { scroll-margin-top: calc(var(--header-h) + 16px); }

body {
  font-family: var(--font-body);
  /* На мобильных оставляем минимум 16px (рекомендация Apple/Google против
     зум-фокуса в input), на десктопе подрастает до 17px по --fs-base. */
  font-size: clamp(16px, 1rem + 0.1vw, var(--fs-base));
  line-height: var(--lh-normal);
  color: var(--sumi);
  background: var(--washi);
  background-image:
    radial-gradient(1200px 600px at 20% -10%, rgba(202, 36, 36, 0.04), transparent 60%),
    radial-gradient(900px 600px at 110% 20%, rgba(44, 62, 92, 0.04), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
  padding-top: var(--header-h);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1, 0 0 0 0 0.1, 0 0 0 0 0.1, 0 0 0 0.025 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

main, header, footer { position: relative; z-index: 1; }

/* Falling maple leaves canvas — sits behind everything but above body bg */
.maple-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--sumi);
}

h1 { font-size: var(--fs-3xl); letter-spacing: -0.035em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.03em; }
h3 { font-size: var(--fs-xl);  letter-spacing: -0.025em; }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }

p { line-height: var(--lh-relaxed); }
small { font-size: var(--fs-sm); color: var(--sumi-mute); }

strong, b { font-weight: 700; }

.font-display { font-family: var(--font-display); font-weight: 800; }
.font-body    { font-family: var(--font-body); }
.font-jp      { font-family: var(--font-jp); }
.font-jp-display { font-family: var(--font-display-jp); font-weight: 400; letter-spacing: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--sumi-mute);
  font-weight: 600;
}

.tategaki {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: var(--tracking-wide);
}

.kanji-display {
  font-family: var(--font-display-jp);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1;
  color: var(--sumi);
  letter-spacing: 0;
}

/* ========== LAYOUT HELPERS ========== */
.container       { max-width: var(--maxw-base);   margin: 0 auto; padding: 0 var(--s-5); }
.container-wide  { max-width: var(--maxw-wide);   margin: 0 auto; padding: 0 var(--s-5); }
.container-narrow { max-width: var(--maxw-narrow); margin: 0 auto; padding: 0 var(--s-5); }
.container-page  { max-width: var(--maxw-page);   margin: 0 auto; padding: 0 var(--s-6); }

.stack > * + * { margin-top: var(--stack-gap, var(--s-4)); }
.stack-tight > * + * { margin-top: var(--s-2); }
.stack-loose > * + * { margin-top: var(--s-7); }

.row    { display: flex; gap: var(--s-4); align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.row-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); }

.section { padding: var(--s-9) 0; }
.section-tight { padding: var(--s-7) 0; }

.divider-brush {
  height: 24px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 24'><path d='M 0 12 Q 50 4, 120 14 T 280 10 T 440 14 T 600 10' stroke='%231A1A1A' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
  opacity: 0.5;
  margin: var(--s-6) 0;
}

/* ========== UTILITIES ========== */
.muted   { color: var(--sumi-mute); }
.faint   { color: var(--sumi-faint); }
.accent  { color: var(--beni); }
.indigo  { color: var(--indigo); }

.text-center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.no-scroll { overflow: hidden; }

/* ========== FOCUS ========== */
:focus-visible {
  outline: 2px solid var(--beni);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* ========== SELECTION ========== */
::selection { background: var(--beni); color: var(--kinari); }