/* ==========================================================================
   Café Senku — Fonts
   --------------------------------------------------------------------------
   NOTE: No brand font files were supplied. These are Google Fonts selected to
   match the rounded, friendly, Japanese-café feeling of the logo wordmark:
     • M PLUS Rounded 1c  — rounded geometric display (mascot energy, kana/kanji)
     • Zen Kaku Gothic New — clean neutral body sans (kana/kanji support)
     • Shippori Mincho     — refined serif for editorial / story copy
   Swap these for licensed brand fonts when available.
   ========================================================================== */

/* Selbst gehostet (DSGVO) — latin + latin-ext aller Schnitte, plus JP-Subsets
   fuer die Kanji 千空 (M PLUS Rounded 1c 700). Quelle: Google Fonts woff2. */
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/m-plus-rounded-1c-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/m-plus-rounded-1c-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/m-plus-rounded-1c-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/m-plus-rounded-1c-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/m-plus-rounded-1c-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/m-plus-rounded-1c-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/m-plus-rounded-1c-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/m-plus-rounded-1c-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Shippori Mincho';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/shippori-mincho-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Shippori Mincho';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/shippori-mincho-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Shippori Mincho';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/shippori-mincho-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Shippori Mincho';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/shippori-mincho-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/zen-kaku-gothic-new-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/zen-kaku-gothic-new-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/zen-kaku-gothic-new-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/zen-kaku-gothic-new-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/zen-kaku-gothic-new-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/zen-kaku-gothic-new-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/m-plus-rounded-1c-700-jp109.woff2') format('woff2');
  unicode-range: U+266a, U+4f11, U+533a, U+5343, U+534a, U+53cd, U+5404, U+56f3, U+5b57-5b58, U+5bae, U+5c4a, U+5e0c, U+5e2f, U+5eab, U+5f35, U+5f79, U+614b, U+6226, U+629e, U+65c5, U+6625, U+6751, U+6821, U+6b69, U+6b8b, U+6bce, U+6c42, U+706b, U+7c21, U+7cfb, U+805e, U+80b2, U+82b8, U+843d, U+8853, U+88c5, U+8a3c, U+8a66, U+8d8a, U+8fba, U+9069, U+91cf, U+9752, U+975e, U+9999, U+ff0f-ff10, U+ff14-ff15;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/m-plus-rounded-1c-700-jp112.woff2') format('woff2');
  unicode-range: U+4e16, U+4e3b, U+4ea4, U+4ee4, U+4f4d, U+4f4f, U+4f55, U+4f9b, U+5317, U+5358, U+53c2, U+53e4, U+548c, U+571f, U+59cb, U+5cf6, U+5e38, U+63a2, U+63b2, U+6559, U+662d, U+679c, U+6c7a, U+72b6, U+7523, U+767d, U+770c, U+7a2e, U+7a3f, U+7a7a, U+7b2c, U+7b49, U+7d20, U+7d42, U+8003, U+8272, U+8a08, U+8aac, U+8cb7, U+8eab, U+8ee2, U+9054-9055, U+90fd, U+914d, U+91cd, U+969b, U+97f3, U+984c, U+ff06;
}

/* ==========================================================================
   Café Senku — Color Tokens
   Green & beige, soft and warm. Matcha primary, cream paper, espresso ink,
   sakura-pink accent. Base scales first, then semantic aliases.
   ========================================================================== */

:root {
  /* ---- Matcha (primary green) ---- */
  --matcha-50:  #f0f5ec;
  --matcha-100: #dcebd3;
  --matcha-200: #bcd8ab;
  --matcha-300: #97c084;
  --matcha-400: #7bae66;
  --matcha-500: #6ba368;  /* brand green — the mascot blob */
  --matcha-600: #56904f;  /* hover / pressed */
  --matcha-700: #4a7a4a;  /* deep matcha — wordmark, on cream */
  --matcha-800: #3a5f3a;
  --matcha-900: #2c4a2e;

  /* ---- Sand (warm cream neutrals) ---- */
  --sand-50:  #fdfaf3;
  --sand-100: #fbf5e8;  /* page paper — logo background */
  --sand-200: #f4ecd9;
  --sand-300: #e9ddc4;
  --sand-400: #d9c9a9;
  --sand-500: #c2ad85;
  --sand-600: #a08b63;

  /* ---- Espresso (warm browns / ink) ---- */
  --espresso-900: #2a2420;  /* primary ink */
  --espresso-700: #4a3f36;
  --espresso-500: #5a4a3a;  /* secondary text */
  --espresso-300: #8c7b69;  /* muted / captions */

  /* ---- Sakura (pink accent — the mascot cheeks) ---- */
  --sakura-100: #fde9e7;
  --sakura-300: #f9c4bf;
  --sakura-500: #f4a5a0;
  --sakura-700: #e07c76;

  /* ---- Pure ---- */
  --white: #ffffff;
  --black: #1c1814;

  /* ---- Semantic status ---- */
  --status-success: #56904f;
  --status-success-bg: #e3f0dc;
  --status-warning: #d99441;
  --status-warning-bg: #f9ecd6;
  --status-error: #cf5a4f;
  --status-error-bg: #fae0db;
  --status-info: #5b8aa8;
  --status-info-bg: #e0edf3;

  /* ======================================================================
     SEMANTIC ALIASES — prefer these in components & layouts
     ====================================================================== */

  /* Surfaces */
  --bg-page: var(--sand-100);
  --bg-page-alt: var(--sand-200);
  --surface-card: var(--sand-50);
  --surface-raised: var(--white);
  --surface-sunken: var(--sand-200);
  --surface-inverse: var(--espresso-900);

  /* Text */
  --text-primary: var(--espresso-900);
  --text-secondary: var(--espresso-500);
  --text-muted: var(--espresso-300);
  --text-on-brand: var(--sand-50);
  --text-on-inverse: var(--sand-100);
  --text-brand: var(--matcha-700);

  /* Brand / interactive */
  --brand: var(--matcha-500);
  --brand-strong: var(--matcha-700);
  --brand-hover: var(--matcha-600);
  --brand-soft: var(--matcha-100);
  --brand-tint: var(--matcha-50);
  --accent: var(--sakura-500);
  --accent-soft: var(--sakura-100);

  /* Lines */
  --border-soft: #ece1cc;
  --border: #e0d2b8;
  --border-strong: #cdbb98;
  --border-brand: var(--matcha-300);

  /* Focus */
  --focus-ring: var(--matcha-400);
}

/* ==========================================================================
   Café Senku — Typography Tokens
   Display: M PLUS Rounded 1c · Body: Zen Kaku Gothic New · Serif: Shippori Mincho
   ========================================================================== */

:root {
  /* ---- Families ---- */
  --font-display: 'M PLUS Rounded 1c', 'Zen Kaku Gothic New', system-ui, sans-serif;
  --font-body: 'Zen Kaku Gothic New', system-ui, -apple-system, sans-serif;
  --font-serif: 'Shippori Mincho', 'Hiragino Mincho ProN', serif;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* ---- Type scale (1.25 major-third-ish, tuned) ---- */
  --text-2xs: 0.6875rem;  /* 11px — labels, kanji caption */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-base: 1rem;      /* 16px — body */
  --text-md:  1.125rem;   /* 18px — lead body */
  --text-lg:  1.375rem;   /* 22px */
  --text-xl:  1.75rem;    /* 28px */
  --text-2xl: 2.25rem;    /* 36px */
  --text-3xl: 3rem;       /* 48px */
  --text-4xl: 3.75rem;    /* 60px */
  --text-5xl: 4.75rem;    /* 76px — hero */

  /* ---- Line heights ---- */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-widest: 0.18em;  /* eyebrow / kanji captions */
}

/* ==========================================================================
   Café Senku — Spacing & Layout Tokens
   8px base rhythm, with a couple of half-steps for tight UI.
   ========================================================================== */

:root {
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 2.5rem;    /* 40 */
  --space-8: 3rem;      /* 48 */
  --space-9: 4rem;      /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7rem;     /* 112 */

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: var(--space-5);
  --section-y: var(--space-10);
}

/* ==========================================================================
   Café Senku — Effects: radii, shadows, borders, motion
   Soft and rounded — generous corners, gentle warm-tinted shadows, no harsh
   edges. Matches the blob mascot's pillowy geometry.
   ========================================================================== */

:root {
  /* ---- Radii (soft, generous) ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-blob: 48% 52% 52% 48% / 52% 48% 52% 48%;  /* organic blob shape */

  /* ---- Shadows (warm, brown-tinted, low + soft) ---- */
  --shadow-xs: 0 1px 2px rgba(42, 36, 32, 0.06);
  --shadow-sm: 0 2px 8px rgba(42, 36, 32, 0.07);
  --shadow-md: 0 6px 18px rgba(42, 36, 32, 0.09);
  --shadow-lg: 0 14px 38px rgba(42, 36, 32, 0.12);
  --shadow-brand: 0 10px 26px rgba(86, 144, 79, 0.22);
  --shadow-inset: inset 0 1px 2px rgba(42, 36, 32, 0.06);

  /* ---- Borders ---- */
  --border-width: 1.5px;
  --border-hair: 1px;

  /* ---- Motion ---- */
  --ease-soft: cubic-bezier(0.33, 0.1, 0.25, 1);   /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 130ms;   /* @kind other */
  --dur-base: 220ms;   /* @kind other */
  --dur-slow: 380ms;   /* @kind other */
}

/* ==========================================================================
   Café Senku — Base / reset
   Light, opinionated defaults. Sets the paper background and ink, rounded
   font-smoothing, and sensible element resets.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }

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

::selection { background: var(--brand-soft); color: var(--matcha-900); }

/* Eyebrow / kanji caption utility used across specimens */
.cs-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-strong);
}