/* ============================================================
   Ikigai — Apple-pure design tokens
   White / black / gray. SF Pro-flavored stack. Kanji watermark.
   ============================================================ */

:root {
  /* Apple neutrals */
  --k-white:        #ffffff;
  --k-bg:           #fbfbfd;        /* Apple's signature off-white */
  --k-bg-soft:      #f5f5f7;        /* Apple secondary surface */
  --k-bg-dark:      #000000;
  --k-bg-graphite:  #1d1d1f;        /* Apple body-on-dark */

  --k-ink:          #1d1d1f;        /* Apple primary text */
  --k-ink-2:        #424245;        /* Apple secondary text */
  --k-ink-3:        #6e6e73;        /* Apple tertiary text */
  --k-ink-4:        #86868b;        /* Apple captions */
  --k-line:         #d2d2d7;        /* Apple hairline */
  --k-line-soft:    #e8e8ed;

  --k-blue:         #0071e3;        /* Apple action blue */
  --k-blue-hover:   #0077ed;

  /* Type — Apple SF Pro-flavored stack */
  --k-font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --k-font-text:    'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --k-font-jp:      'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;

  /* Apple keynote scale */
  --k-text-eyebrow: 19px;
  --k-text-body:    17px;
  --k-text-lead:    21px;
  --k-text-h3:      28px;
  --k-text-h2:      40px;
  --k-text-h1:      56px;
  --k-text-display: 80px;
  --k-text-mega:    120px;

  --k-radius:       12px;
  --k-radius-lg:    18px;
  --k-radius-pill:  980px;          /* Apple's actual pill radius */

  --k-ease:         cubic-bezier(0.42, 0, 0.58, 1);
  --k-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--k-white);
  color: var(--k-ink);
  font-family: var(--k-font-text);
  font-size: var(--k-text-body);
  line-height: 1.47059;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--k-font-display);
  margin: 0;
  color: var(--k-ink);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.07143;
}

p { margin: 0; }

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

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

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

::selection { background: var(--k-ink); color: var(--k-white); }

/* ===== Apple typography classes ===== */

.k-eyebrow {
  font-family: var(--k-font-text);
  font-size: var(--k-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.011em;
  line-height: 1.21053;
  color: var(--k-ink);
}

.k-eyebrow.muted { color: var(--k-ink-3); font-weight: 500; }

.k-h1 {
  font-size: clamp(40px, 7vw, 80px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.k-h1-tight {
  font-size: clamp(48px, 8.4vw, 96px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.0;
}

.k-h2 {
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.07;
}

.k-h3 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: 0.004em;
  line-height: 1.14286;
}

.k-lead {
  font-family: var(--k-font-display);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 400;
  letter-spacing: 0.009em;
  line-height: 1.381;
  color: var(--k-ink-2);
}

.k-body {
  font-size: var(--k-text-body);
  line-height: 1.47059;
  color: var(--k-ink-2);
  font-weight: 400;
}

.k-caption {
  font-size: 14px;
  line-height: 1.42859;
  color: var(--k-ink-3);
  font-weight: 400;
}

.k-meta {
  font-size: 12px;
  line-height: 1.33337;
  color: var(--k-ink-3);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ===== Apple buttons ===== */

.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 22px;
  border-radius: var(--k-radius-pill);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.17648;
  min-width: 28px;
  transition: background-color 0.18s var(--k-ease);
  white-space: nowrap;
}

.k-btn-primary {
  background: var(--k-blue);
  color: var(--k-white);
}
.k-btn-primary:hover { background: var(--k-blue-hover); }

.k-btn-dark {
  background: var(--k-ink);
  color: var(--k-white);
}
.k-btn-dark:hover { background: #2d2d2f; }

.k-btn-light {
  background: var(--k-white);
  color: var(--k-ink);
}
.k-btn-light:hover { background: #f0f0f2; }

.k-btn-ghost {
  background: transparent;
  color: var(--k-blue);
  padding: 12px 0;
}
.k-btn-ghost:hover { color: var(--k-blue-hover); text-decoration: underline; }

.k-link {
  color: var(--k-blue);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.022em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.k-link::after {
  content: '›';
  display: inline-block;
  transform: translateY(-1px);
  transition: transform 0.18s var(--k-ease);
}
.k-link:hover::after { transform: translateX(2px) translateY(-1px); }
.k-link:hover { text-decoration: underline; }

/* ===== Layout ===== */

.k-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 22px;
}
.k-container-wide {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 22px;
}

/* ===== Kanji watermark — signature element ===== */

.k-kanji {
  font-family: var(--k-font-jp);
  font-weight: 400;
  user-select: none;
  pointer-events: none;
  color: var(--k-ink);
}

.k-kanji-vert {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* ===== Apple-style nav ===== */

.k-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 251, 253, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  height: 48px;
  display: flex;
  align-items: center;
}

.k-nav-dark {
  background: rgba(0, 0, 0, 0.8);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.k-nav-inner {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.k-nav-link {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--k-ink-2);
  opacity: 0.8;
  transition: opacity 0.18s var(--k-ease);
}
.k-nav-link:hover { opacity: 1; }

.k-nav-dark .k-nav-link { color: #f5f5f7; }

.k-nav-logo {
  font-family: var(--k-font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
}

/* ===== Sections ===== */

.k-section {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.k-section-tight { padding: 60px 0; }

.k-section-dark {
  background: var(--k-bg-dark);
  color: var(--k-white);
}
.k-section-dark h1, .k-section-dark h2, .k-section-dark h3 { color: var(--k-white); }
.k-section-dark .k-body, .k-section-dark .k-lead { color: #a1a1a6; }
.k-section-dark .k-caption, .k-section-dark .k-meta { color: #86868b; }

.k-section-soft {
  background: var(--k-bg-soft);
}

/* ===== Cards ===== */

.k-card {
  background: var(--k-white);
  border-radius: var(--k-radius-lg);
  overflow: hidden;
  position: relative;
}

.k-tile {
  background: var(--k-bg-soft);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
}

.k-tile-dark {
  background: var(--k-bg-graphite);
  color: var(--k-white);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
}

/* ===== Reveal animations ===== */

@keyframes k-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes k-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.k-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--k-ease-out), transform 0.9s var(--k-ease-out);
  will-change: opacity, transform;
}
.k-reveal.is-in.is-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ===== Kata silhouette placeholder ===== */

.k-figure-placeholder {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, #1a1a1c 0%, #000 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* utility */
.k-row { display: flex; }
.k-grid { display: grid; }
.k-center { display: flex; align-items: center; justify-content: center; }

/* hide scrollbar for horizontal scrollers */
.k-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.k-no-scrollbar::-webkit-scrollbar { display: none; }