/* Kenpes FC - Design tokens & base styles */
:root {
  --navy-900: #0a1a30;
  --navy-800: #0f2745;
  --navy-700: #163459;
  --navy-600: #1f4778;
  --coral-600: #9e3371;
  --coral-500: #c2458a;
  --coral-400: #d668a6;
  --cream-50: #faf6ef;
  --cream-100: #f4eee3;
  --cream-200: #e9dfcc;
  --ink-900: #1a1410;
  --ink-700: #3d342d;
  --ink-500: #6b5f55;
  --grass: #2d8a4e;
  --gold: #d4a84a;

  --font-jp: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  --font-jp-serif: 'Shippori Mincho', 'Noto Serif JP', serif;
  --font-display: 'Oswald', 'Zen Kaku Gothic New', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-jp);
  background: var(--cream-50);
  color: var(--ink-900);
  font-weight: 400;
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}
/* minimum 14px everywhere */
html { font-size: 16px; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Utility: eyebrow tag */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--coral-600);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 28px; height: 2px;
  background: var(--coral-500);
  display: inline-block;
}

.section-title {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(28px, 5.5vw, 44px);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--navy-900);
  margin-top: 12px;
  text-wrap: balance;
}

.section-title .accent { color: var(--coral-500); }

.section-sub {
  color: var(--ink-500);
  font-size: 16px;
  line-height: 1.9;
  margin-top: 18px;
  max-width: 640px;
  text-wrap: pretty;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--coral-500);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(232, 90, 42, 0.55);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--coral-600); box-shadow: 0 16px 32px -10px rgba(232, 90, 42, 0.6); }
.btn-ghost {
  background: transparent;
  color: var(--navy-900);
  border: 2px solid var(--navy-900);
}
.btn-ghost:hover { background: var(--navy-900); color: #fff; }

.btn-arrow {
  display: inline-block; width: 18px; height: 12px;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><path d='M0 6h16M11 1l5 5-5 5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><path d='M0 6h16M11 1l5 5-5 5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

/* Photo placeholders - generative */
.photo-ph {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  letter-spacing: 0.2em;
  font-size: 12px;
  opacity: 0.95;
}
.photo-ph::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 300px at 20% 20%, rgba(255,107,61,0.25), transparent 60%),
    radial-gradient(600px 400px at 80% 90%, rgba(212,168,74,0.15), transparent 60%);
  pointer-events: none;
}

/* Section spacing */
section { padding: clamp(64px, 10vw, 120px) 0; position: relative; }

/* Responsive hide helpers */
.only-desktop { display: none; }
@media (min-width: 900px) {
  .only-desktop { display: initial; }
  .only-mobile { display: none; }
}

/* Scroll reveal base */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.in { opacity: 1; transform: none; }