/*!
 * Siam Works — デザインシステム（結合済み）
 *
 * このファイルは生成物。直接編集しないこと。
 * 編集するのは assets/css/ds/ 配下で、そのあと次を実行する:
 *   node wp-content/themes/siamworks/tools/build-ds-css.js
 */

/* ==========================================================
   tokens/fonts.css
   ========================================================== */
/* Kiroku webfonts.
   SUBSTITUTION NOTICE: no font binaries were provided, so all faces are Google
   Fonts from the Google CDN. Archivo stands in for the geometric sans used at
   display size (set LIGHT and widely tracked); Zen Kaku Gothic New carries the
   rounded Japanese display voice; Noto Sans JP carries running text; JetBrains
   Mono is dates, counts and code only. */
/* NOTE: Google Fonts の @import はここから外した。
   CSS の @import は直列のレンダーブロッキングになるため、
   functions.php の wp_enqueue_style + preconnect で読み込む。 */

:root {
  --font-family-grotesk: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --font-family-display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-family-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-family-mono: "JetBrains Mono", "SFMono-Regular", "Consolas", monospace;
}

/* ==========================================================
   tokens/colors.css
   ========================================================== */
:root {
  /* ============================================================
     BLUE — not an accent. The dominant colour of the brand.
     Headings, display type, shapes, CTAs and most icons are blue.
     ============================================================ */
  --blue-050: #eef4fe;
  --blue-100: #d8e6fb;
  --blue-200: #b3ccf5;
  --blue-300: #7ba8ec;
  --blue-400: #3d85e8;
  --blue-500: #1466d8;  /* the brand blue */
  --blue-600: #0f52c4;
  --blue-700: #0b3f9c;
  --blue-900: #072559;

  /* ============================================================
     GREIGE — warm neutral ground. Bands are greige, not white.
     ============================================================ */
  --greige-000: #ffffff;
  --greige-050: #f7f4f0;
  --greige-100: #f1ece6;
  --greige-200: #e6ded6;  /* the signature band colour */
  --greige-300: #d8cec3;
  --greige-400: #bdb2a6;

  /* ============================================================
     INK — near-black, warm-leaning. Long-form reading only.
     ============================================================ */
  --ink-900: #17181a;
  --ink-800: #2a2c2f;
  --ink-700: #43464a;
  --ink-600: #5d6166;
  --ink-500: #7b8085;
  --ink-400: #9ea3a8;
  --ink-450: #63676b;  /* AA 下限。地色 #ece5dd 上で 4.57:1 */
  --ink-300: #c2c6ca;
  --ink-200: #dcdfe2;

  /* Semantic hues — state messaging only, never decoration. */
  --green-600: #147a5c;
  --green-100: #dbf0e8;
  --amber-600: #a06710;
  --amber-100: #f8ecd7;
  --red-600: #c23a2c;
  --red-100: #fae3df;

  /* --- Text ------------------------------------------------------- */
  --text-display: var(--blue-500);   /* headings default to BLUE */
  --text-primary: var(--ink-900);    /* long-form prose */
  --text-secondary: var(--ink-600);
  /* コントラスト修正：元は muted=ink-500 / faint=ink-400 だったが、
     日付・件数・グロス・ページネーションといった実コンテンツに使われており
     WCAG 2.2 AA（4.5:1）に届いていなかった（最も暗い地色で 3.19:1 / 2.04:1）。
     全3地色で AA を満たす値に引き上げた。 */
  --text-muted: var(--ink-600);  /* page 5.69 / raised 6.15 / band 4.99 */
  --text-faint: var(--ink-450);  /* page 5.20 / raised 5.62 / band 4.57 */
  --text-inverse: var(--greige-050);
  --text-on-blue: #ffffff;
  --text-accent: var(--blue-500);
  --text-link: var(--blue-600);
  --text-link-hover: var(--blue-700);
  --text-success: var(--green-600);
  --text-warning: var(--amber-600);
  --text-danger: var(--red-600);

  /* --- Surfaces ---------------------------------------------------- */
  --surface-page: var(--greige-050);
  --surface-ground: var(--greige-100);  /* behind the floating panel */
  --surface-raised: var(--greige-000);
  --surface-band: var(--greige-200);   /* the beige band */
  --surface-sunken: var(--greige-100);
  --surface-hover: var(--greige-100);
  --surface-active: var(--greige-200);
  --surface-blue: var(--blue-500);
  --surface-blue-hover: var(--blue-600);
  --surface-blue-active: var(--blue-700);
  --surface-blue-subtle: var(--blue-050);
  --surface-inverse: var(--ink-900);
  --surface-code: #0d1522;
  --surface-success-subtle: var(--green-100);
  --surface-warning-subtle: var(--amber-100);
  --surface-danger-subtle: var(--red-100);
  --surface-scrim: rgba(23, 24, 26, 0.5);

  /* --- Borders ----------------------------------------------------- */
  --border-hairline: var(--greige-300);
  --border-hairline-strong: var(--greige-400);
  --border-rule: var(--ink-300);      /* the statement-list rules */
  --border-solid: var(--ink-900);
  --border-blue: var(--blue-500);
  --border-focus: var(--blue-500);
  --border-inverse: var(--ink-700);

  /* --- Code syntax (CodeBlock) -------------------------------------- */
  --syntax-plain: #dfe4ea;
  --syntax-comment: #7b8085;
  --syntax-keyword: #7ba8ec;
  --syntax-string: #86d3b8;
  --syntax-number: #e3b579;
  --syntax-function: #b3ccf5;
}

[data-theme="dark"] {
  --text-display: var(--blue-300);
  --text-primary: var(--greige-050);
  --text-secondary: var(--ink-300);
  --text-muted: var(--ink-400);
  --text-faint: var(--ink-500);
  --text-inverse: var(--ink-900);
  --text-accent: var(--blue-300);
  --text-link: var(--blue-300);
  --text-link-hover: var(--blue-200);

  --surface-page: #14161a;
  --surface-ground: #0f1114;
  --surface-raised: #1c1f24;
  --surface-band: #1f232a;
  --surface-sunken: #1c1f24;
  --surface-hover: #24282f;
  --surface-active: #2c313a;
  --surface-blue-subtle: #12203c;
  --surface-inverse: var(--greige-050);
  --surface-code: #0a1018;
  --surface-scrim: rgba(6, 8, 11, 0.7);

  --border-hairline: #2c313a;
  --border-hairline-strong: #3a4048;
  --border-rule: #3a4048;
  --border-solid: var(--greige-100);
  --border-inverse: var(--ink-300);
}

/* ==========================================================
   tokens/typography.css
   ========================================================== */
:root {
  /* ============================================================
     Four roles, four families:
       GROTESK (Archivo)            - giant Latin display words
       DISPLAY (Zen Kaku Gothic New)- Japanese headings and statements
       BODY    (Noto Sans JP)       - running text and UI
       MONO    (JetBrains Mono)     - dates, counts, code, tiny meta ONLY
     ============================================================ */

  --text-3xs: 0.625rem;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.375rem;
  --text-4xl: 3.25rem;
  --text-5xl: 4.5rem;
  --text-6xl: 6.5rem;   /* hero grotesk */

  --leading-display: 1.1;   /* giant Latin, airy */
  --leading-jp-display: 1.25;
  --leading-tight: 1.4;
  --leading-ui: 1.6;
  --leading-body: 1.9;

  --tracking-grotesk: -0.035em; /* giant Latin, tight */
  --tracking-display: -0.02em;
  --tracking-normal: 0;
  --tracking-jp: 0.01em;
  --tracking-index: 0.1em;
  /* 小さい大文字ラテンラベル（ヘッダーナビ / CTA / 見出しの序数 /
     ViewAll / ページネーション / タブ）。navigation.css が7箇所で参照するが
     デザインシステムに定義が無かったため補った。役割は index と同じ。 */
  --tracking-grotesk-sm: 0.1em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* --- Role: GROTESK (giant Latin) ----------------------------------
     Light weight, very wide tracking, airy leading. This is the single
     most distinctive type decision in the system: the giant Latin words
     read as spaced-out signage, NOT as a heavy grotesque headline. */
  --type-grotesk-family: var(--font-family-grotesk);
  --type-grotesk-weight: 300; /* @kind font */
  --type-hero-size: clamp(2.75rem, 7vw, 5rem);
  --type-section-size: clamp(2rem, 4.6vw, 3.5rem);

  /* --- Role: INDEX (small Latin label) ------------------------------ */
  --type-index-family: var(--font-family-grotesk);
  --type-index-size: var(--text-xs);
  --type-index-weight: 600;
  --type-index-tracking: var(--tracking-index);

  /* --- Role: GLOSS (Japanese under a Latin label) ------------------- */
  --type-gloss-family: var(--font-family-sans);
  --type-gloss-size: var(--text-sm);
  --type-gloss-weight: var(--weight-regular);

  /* --- Role: DISPLAY / BODY / META ---------------------------------- */
  --type-display-family: var(--font-family-display);
  --type-statement-size: clamp(1.75rem, 3.4vw, 2.75rem); /* the big JP lines */
  /* Sub-section JP heading: one step under a statement. Use for a heading that
     opens a block inside a band (FOLLOW, ABOUT) and for feature-card titles.
     Card titles in a grid stay at --text-lg. */
  --type-heading-size: clamp(1.5rem, 2.6vw, 1.875rem); /* text-xl -> text-2xl */
  --type-body-family: var(--font-family-sans);
  --type-body-size: var(--text-md);
  --type-ui-family: var(--font-family-sans);
  --type-ui-size: var(--text-base);
  --type-meta-family: var(--font-family-mono);
  --type-meta-size: var(--text-2xs);
}

/* ==========================================================
   tokens/spacing.css
   ========================================================== */
:root {
  /* 4px base, but the large end is deliberately far apart: reference sites
     separate page sections by 96-160px, not by 32px. */
  --space-0: 0;
  --space-px: 1px;
  --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: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */
  --space-11: 10rem;    /* 160 */

  --gap-inline: var(--space-2);    /* icon to label */
  --gap-stack: var(--space-3);     /* between related lines */
  --gap-group: var(--space-5);     /* between fields, between cards */
  --gap-grid: var(--space-6);      /* grid gutter inside a card grid */
  --gap-section: var(--space-9);   /* label block to content */
  --gap-band: var(--space-11);     /* between page sections (desktop) */
  --gap-band-sm: var(--space-9);   /* between page sections (mobile) */

  --pad-control-y: 0.5rem;
  --pad-control-x: 0.875rem;
  --pad-card: var(--space-5);
  --pad-panel: var(--space-6);
  --pad-band-y: var(--space-10);
}

/* ==========================================================
   tokens/layout.css
   ========================================================== */
:root {
  --layout-max: 1240px;         /* outer frame; content never exceeds it */
  --layout-wide: 1440px;        /* full-bleed media band */
  --layout-measure: 40rem;      /* article column: ~36 JP characters at 17px */
  --layout-gutter: var(--space-5);      /* mobile */
  --layout-gutter-lg: var(--space-8);   /* desktop */
  --layout-columns: 12; /* @kind other */
  --layout-header-height: 64px;
  --layout-rail: 240px;         /* label rail in the two-column section layout */

  /* Media aspect ratios. Everything visual snaps to one of these. */
  --ratio-thumb: 3 / 2; /* @kind other */
  --ratio-hero: 16 / 9; /* @kind other */
  --ratio-square: 1 / 1; /* @kind other */
  --ratio-book: 3 / 4; /* @kind other */

  --z-base: 0; /* @kind other */
  --z-sticky: 10; /* @kind other */
  --z-header: 20; /* @kind other */
  --z-overlay: 40; /* @kind other */
  --z-dialog: 50; /* @kind other */
  --z-toast: 60; /* @kind other */
  --z-tooltip: 70; /* @kind other */
}

/* Breakpoints (documented; CSS custom properties can't be used in media
   queries, so these are the literal values used across the system):
   sm 480px | md 768px | lg 1024px | xl 1280px */

/* ==========================================================
   tokens/borders.css
   ========================================================== */
:root {
  /* Kiroku is a SOFT system: pill controls, generously rounded cards and media,
     hairline rules only where a list needs separating. */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;    /* cards, media frames */
  --radius-xl: 28px;    /* speech bubbles, dialogs */
  --radius-panel: 40px; /* the floating page panel + section panels */
  --radius-full: 999px; /* every button, tag, nav shell */

  --border-width-hairline: 1px;
  --border-width-strong: 2px;
  --border-width-marker: 3px;

  --border-hairline-style: 1px solid var(--border-hairline); /* @kind other */
  --border-rule-style: 1px solid var(--border-rule); /* @kind other */
  --border-solid-style: 1px solid var(--border-solid); /* @kind other */

  /* Soft, low-contrast shadows. Pills and floating layers only. */
  --shadow-none: none;
  --shadow-pill: 0 2px 8px rgba(20, 102, 216, 0.18);
  --shadow-card: 0 1px 2px rgba(23, 24, 26, 0.04), 0 8px 24px rgba(23, 24, 26, 0.06);
  --shadow-popover: 0 2px 6px rgba(23, 24, 26, 0.08), 0 10px 28px rgba(23, 24, 26, 0.12);
  --shadow-overlay: 0 4px 12px rgba(23, 24, 26, 0.1), 0 24px 56px rgba(23, 24, 26, 0.18);
  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--border-focus);
}

/* ==========================================================
   tokens/texture.css
   ========================================================== */
:root {
  /* ---------------------------------------------------------------
     GRAIN. The reference grounds are not flat — they carry a fine
     paper noise. This is a generated fractal-noise tile, applied as
     an overlay via .k-grain or the --texture-grain background.
     --------------------------------------------------------------- */
  --texture-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>"); /* @kind other */
  --texture-grain-opacity: 0.28; /* @kind other */
  --texture-grain-opacity-strong: 0.45; /* @kind other */

  /* Ornament sizes for the circle / diagonal shape motifs. */
  --ornament-dot-sm: 56px;
  --ornament-dot-md: 120px;
  --ornament-dot-lg: 220px;
  --ornament-dot-xl: 360px;
}

/* Grain overlay. Put .k-grain on any band; it adds a non-interactive layer. */
.k-grain { position: relative; isolation: isolate; }
.k-grain::after { content: ""; position: absolute; inset: 0; background-image: var(--texture-grain); background-size: 160px 160px; opacity: var(--texture-grain-opacity); pointer-events: none; mix-blend-mode: multiply; z-index: 0; }
.k-grain--strong::after { opacity: var(--texture-grain-opacity-strong); }
.k-grain > * { position: relative; z-index: 1; }

/* Diagonal cut: the band edge slices across rather than sitting square. */
.k-cut-bottom { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%); }
.k-cut-top { clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); }
.k-cut-both { clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%); }

/* ---------------------------------------------------------------
   THE PAGE PANEL. Content does not sit on the viewport background —
   it sits on a large-radius panel floating over it, with the textured
   ground visible at the edges. This is the shell of every screen.
   --------------------------------------------------------------- */
.k-shell { min-height: 100vh; background: var(--surface-ground); background-image: var(--texture-grain); background-size: 160px 160px; }
.k-panel { background: var(--surface-raised); border-radius: var(--radius-panel); margin: 0 var(--space-4) var(--space-4); overflow: hidden; }
@media (min-width: 768px) { .k-panel { margin: 0 var(--space-5) var(--space-5); } }
.k-panel--flush-top { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0; }
.k-panel--inset { margin: var(--space-6) var(--space-4); }
@media (min-width: 768px) { .k-panel--inset { margin: var(--space-7) var(--space-6); } }

/* Slight rotation, for image cards that lean. Max 3deg — never more. */
.k-tilt { transform: rotate(-2.4deg); }
.k-tilt--r { transform: rotate(2.4deg); }
.k-tilt-sm { transform: rotate(-1.2deg); }

/* ---------------------------------------------------------------
   SCROLL REVEAL. Elements rise and fade as they enter the viewport,
   staggered by DOM order within a group. Driven by the tiny observer
   in guidelines/reveal.js — add data-reveal to any element.
   --------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); will-change: opacity, transform; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ==========================================================
   tokens/motion.css
   ========================================================== */
:root {
  --duration-instant: 80ms; /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-base: 220ms; /* @kind other */
  --duration-slow: 420ms; /* @kind other */
  --duration-drift: 14s; /* @kind other */

  /* Soft deceleration. No overshoot, no spring. */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */

  --transition-color: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); /* @kind other */
  --transition-transform: transform var(--duration-base) var(--ease-standard); /* @kind other */
  --transition-soft: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); /* @kind other */
}

/* ==========================================================
   tokens/base.css
   ========================================================== */
/* Minimal element defaults. Consumers get these by linking styles.css. */
*, *::before, *::after { box-sizing: border-box; }

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

h1, h2, h3, h4 {
  font-family: var(--type-display-family);
  font-weight: var(--weight-bold);
  letter-spacing: 0.03em;
  line-height: 1.4;
  color: var(--text-primary);
  margin: 0;
  text-wrap: pretty;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

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

/* One blue character inside a near-black heading — the reference accent move. */
.k-accent { color: var(--blue-500); }
.k-ink { color: var(--text-primary); }

a { color: var(--text-link); text-decoration: none; border-bottom: 1px solid var(--blue-200); transition: var(--transition-color); }
a:hover { color: var(--text-link-hover); border-bottom-color: var(--blue-500); }

code, kbd, samp, pre { font-family: var(--font-family-mono); font-size: 0.925em; }

hr { border: 0; border-top: var(--border-rule-style); margin: var(--space-6) 0; }

::selection { background: var(--blue-100); color: var(--text-primary); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* 強制配色モード（Windows ハイコントラスト等）では box-shadow が描画されず、
   outline:none だけが残ってフォーカスが完全に見えなくなる（WCAG 2.4.7）。
   システム色の outline を復活させる。 */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================
   components/core/core.css
   ========================================================== */
/* ---------- LabelPair ---------- */
.k-labelpair { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.k-labelpair--inline { flex-direction: row; align-items: baseline; gap: var(--space-2); }
.k-labelpair__latin { font-family: var(--type-index-family); font-weight: var(--type-index-weight); text-transform: uppercase; letter-spacing: var(--type-index-tracking); font-size: var(--type-index-size); line-height: 1.2; color: inherit; }
.k-labelpair__gloss { font-family: var(--type-gloss-family); font-size: var(--type-gloss-size); font-weight: var(--weight-regular); line-height: 1.5; color: var(--text-muted); letter-spacing: var(--tracking-jp); }
.k-labelpair--sm .k-labelpair__latin { font-size: var(--text-2xs); }
.k-labelpair--sm .k-labelpair__gloss { font-size: var(--text-2xs); }
.k-labelpair--lg .k-labelpair__latin { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; }
.k-labelpair--lg .k-labelpair__gloss { font-size: var(--text-sm); }
.k-labelpair--display .k-labelpair__latin { font-family: var(--type-grotesk-family); font-size: var(--type-section-size); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-grotesk); line-height: var(--leading-display); text-transform: none; color: var(--text-display); }
.k-labelpair--display .k-labelpair__gloss { font-size: var(--text-sm); letter-spacing: var(--tracking-jp); margin-top: var(--space-3); }

/* ---------- Button : one pill, five fills, one hover law ----------
   THE LAW: geometry never changes between states. Every variant carries a
   border of the same width in EVERY state (transparent where it must not
   read), so hover only ever swaps colour — a border never appears, thickens,
   or vanishes on hover, and nothing moves or scales.
   Weight is a PAGE decision (hairline default / --stamp on sticker pages);
   variant is a JOB decision. Never hand-roll a pill in a template. */
.k-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-inline); font-family: var(--type-ui-family); font-weight: var(--weight-bold); letter-spacing: var(--tracking-jp); border: var(--border-width-hairline) solid transparent; border-radius: var(--radius-full); cursor: pointer; text-decoration: none; white-space: nowrap; transition: var(--transition-color), box-shadow var(--duration-base) var(--ease-out); -webkit-appearance: none; appearance: none; }
.k-btn--sm { height: 34px; padding: 0 var(--space-4); font-size: var(--text-sm); }
.k-btn--md { height: 44px; padding: 0 var(--space-5); font-size: var(--text-base); }
.k-btn--lg { height: 54px; padding: 0 var(--space-6); font-size: var(--text-md); }
.k-btn--stamp { border-width: var(--border-width-strong); font-weight: var(--weight-black); }
.k-btn--primary { background: var(--surface-blue); border-color: var(--surface-blue); color: var(--text-on-blue); box-shadow: var(--shadow-pill); }
.k-btn--primary:hover { background: var(--surface-blue-hover); border-color: var(--surface-blue-hover); color: var(--text-on-blue); box-shadow: 0 4px 14px rgba(20, 102, 216, 0.28); }
.k-btn--primary:active { background: var(--surface-blue-active); border-color: var(--surface-blue-active); box-shadow: var(--shadow-pill); }
.k-btn--ink { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--text-inverse); }
.k-btn--ink:hover { background: var(--surface-blue); border-color: var(--surface-blue); color: var(--text-on-blue); }
.k-btn--ink:active { background: var(--surface-blue-active); border-color: var(--surface-blue-active); }
.k-btn--secondary { background: var(--surface-raised); border-color: var(--border-hairline); color: var(--text-accent); }
.k-btn--secondary:hover { background: var(--surface-blue); border-color: var(--surface-blue); color: var(--text-on-blue); }
.k-btn--secondary:active { background: var(--surface-blue-active); border-color: var(--surface-blue-active); }
.k-btn--outline { background: transparent; border-color: var(--ink-900); color: var(--ink-900); }
.k-btn--outline:hover { background: var(--ink-900); border-color: var(--ink-900); color: var(--text-inverse); }
.k-btn--outline:active { background: var(--ink-800); border-color: var(--ink-800); }
.k-btn--ghost { background: transparent; color: var(--text-accent); }
.k-btn--ghost:hover { background: var(--surface-blue-subtle); }
.k-btn--ghost:active { background: var(--blue-100); }
.k-btn--danger { background: transparent; border-color: var(--red-600); color: var(--text-danger); }
.k-btn--danger:hover { background: var(--red-600); color: #fff; }
.k-btn--full { width: 100%; }
.k-btn--split { justify-content: space-between; }
.k-btn[disabled], .k-btn[aria-disabled="true"] { opacity: 0.38; pointer-events: none; box-shadow: none; }
.k-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.k-btn__div { width: 1px; height: 58%; background: currentColor; opacity: 0.35; margin: 0 2px; }
.k-btn__arrow { flex: none; width: 34px; height: 34px; margin-right: -12px; border-radius: 50%; border: var(--border-width-hairline) solid color-mix(in srgb, currentColor 55%, transparent); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-sm); line-height: 1; }
.k-btn--stamp .k-btn__arrow { border-width: var(--border-width-strong); }
.k-btn--sm .k-btn__arrow { width: 26px; height: 26px; margin-right: -8px; }

/* ---------- Text link : the third action tier, below the pill ---------- */
.k-textlink { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--type-ui-family); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-jp); color: var(--text-primary); text-decoration: none; border-bottom: var(--border-width-strong) solid var(--surface-blue); padding-bottom: 2px; transition: var(--transition-color); }
.k-textlink:hover { color: var(--text-link); border-bottom-color: var(--text-link); }
.k-textlink:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- IconButton ---------- */
.k-iconbtn { display: inline-flex; align-items: center; justify-content: center; border: var(--border-width-hairline) solid transparent; border-radius: var(--radius-full); background: transparent; color: var(--text-accent); cursor: pointer; transition: var(--transition-color); -webkit-appearance: none; appearance: none; }
.k-iconbtn--sm { width: 34px; height: 34px; }
.k-iconbtn--md { width: 40px; height: 40px; }
.k-iconbtn--lg { width: 48px; height: 48px; }
.k-iconbtn--ghost:hover { background: var(--surface-blue-subtle); }
.k-iconbtn--secondary { border-color: var(--border-hairline); background: var(--surface-raised); }
.k-iconbtn--secondary:hover { border-color: var(--surface-blue); background: var(--surface-blue); color: var(--text-on-blue); }
.k-iconbtn--solid { background: var(--surface-blue); color: var(--text-on-blue); box-shadow: var(--shadow-pill); }
.k-iconbtn--solid:hover { background: var(--surface-blue-hover); }
.k-iconbtn[disabled] { opacity: 0.38; pointer-events: none; }
.k-iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Tag ---------- */
.k-tag { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--type-ui-family); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1; letter-spacing: var(--tracking-jp); color: var(--text-accent); text-decoration: none; border: var(--border-width-hairline) solid var(--blue-200); padding: 7px 13px; background: var(--surface-raised); border-radius: var(--radius-full); transition: var(--transition-color); cursor: pointer; }
.k-tag:hover { border-color: var(--blue-400); background: var(--surface-blue-subtle); }
.k-tag--plain { border-color: transparent; background: transparent; padding: 0; color: var(--text-muted); font-weight: var(--weight-regular); }
.k-tag--plain:hover { border-color: transparent; background: transparent; color: var(--text-accent); }
.k-tag[aria-pressed="true"], .k-tag--active { background: var(--surface-blue); border-color: var(--surface-blue); color: var(--text-on-blue); }
.k-tag__count { font-family: var(--type-meta-family); font-size: var(--text-2xs); opacity: 0.65; }
.k-taglist { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.k-taglist--plain { gap: var(--space-1) var(--space-4); }

/* ---------- Badge ---------- */
.k-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--type-index-family); font-size: var(--text-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1; padding: 5px 9px; border-radius: var(--radius-full); border: var(--border-width-hairline) solid transparent; }
.k-badge--solid.k-badge--neutral { background: var(--ink-900); color: var(--greige-050); }
.k-badge--solid.k-badge--accent { background: var(--blue-500); color: #fff; }
.k-badge--solid.k-badge--success { background: var(--green-600); color: #fff; }
.k-badge--solid.k-badge--warning { background: var(--amber-600); color: #fff; }
.k-badge--solid.k-badge--danger { background: var(--red-600); color: #fff; }
.k-badge--subtle.k-badge--neutral { background: var(--surface-sunken); color: var(--text-secondary); }
.k-badge--subtle.k-badge--accent { background: var(--surface-blue-subtle); color: var(--text-accent); }
.k-badge--subtle.k-badge--success { background: var(--surface-success-subtle); color: var(--text-success); }
.k-badge--subtle.k-badge--warning { background: var(--surface-warning-subtle); color: var(--text-warning); }
.k-badge--subtle.k-badge--danger { background: var(--surface-danger-subtle); color: var(--text-danger); }
.k-badge--outline { background: transparent; border-color: var(--blue-200); color: var(--text-accent); }

/* ---------- Card ---------- */
.k-card { display: block; position: relative; background: transparent; border-radius: var(--radius-lg); color: inherit; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-out); }
.k-card--framed { border: var(--border-width-hairline) solid var(--border-hairline); background: var(--surface-raised); }
.k-card--sunken { background: var(--surface-sunken); }
.k-card--band { background: var(--surface-band); }
.k-card--blue { background: var(--surface-blue); color: var(--text-on-blue); }
.k-card--blue .k-labelpair__gloss, .k-card--blue .k-meta { color: var(--blue-200); }
.k-card--inverse { background: var(--surface-inverse); color: var(--text-inverse); }
.k-card--pad-sm { padding: var(--space-4); }
.k-card--pad-md { padding: var(--pad-card); }
.k-card--pad-lg { padding: var(--pad-panel); }
.k-card--interactive { cursor: pointer; }
.k-card--interactive:hover.k-card--framed { box-shadow: var(--shadow-card); border-color: var(--blue-200); }
.k-card--interactive:hover.k-card--sunken { background: var(--surface-active); }
.k-card--interactive:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.k-card--interactive:hover .k-mediaframe__img { transform: scale(1.03); }

/* ==========================================================
   components/motifs/motifs.css
   ========================================================== */
/* ---------- StatementList : hairline rows, dot bullet, huge JP line ---------- */
.k-statements { display: flex; flex-direction: column; }
.k-statement { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-6) 0; border-top: var(--border-rule-style); align-items: baseline; }
.k-statement:last-child { border-bottom: var(--border-rule-style); }
@media (min-width: 900px) { .k-statement { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); } }
.k-statement__head { display: flex; align-items: baseline; gap: var(--space-4); min-width: 0; }
.k-statement__dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--surface-blue); transform: translateY(-0.35em); }
.k-statement__title { font-family: var(--type-display-family); font-weight: var(--weight-bold); font-size: var(--type-statement-size); line-height: 1.25; letter-spacing: var(--tracking-jp); color: var(--text-display); margin: 0; }
.k-statement__desc { font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--leading-body); color: var(--text-accent); margin: 0; }
.k-statement__desc--ink { color: var(--text-secondary); font-weight: var(--weight-regular); }

/* ---------- SpeechBubble ---------- */
.k-bubble { position: relative; display: inline-block; padding: var(--space-4) var(--space-5); border-radius: var(--radius-xl); font-family: var(--type-display-family); font-weight: var(--weight-bold); font-size: var(--text-base); letter-spacing: var(--tracking-jp); line-height: 1.6; }
.k-bubble--blue { background: var(--surface-blue); color: var(--text-on-blue); }
.k-bubble--paper { background: var(--surface-raised); color: var(--text-display); }
.k-bubble--band { background: var(--surface-band); color: var(--text-display); }
.k-bubble__tail { position: absolute; width: 22px; height: 22px; background: inherit; }
.k-bubble--tail-bl .k-bubble__tail { left: 26px; bottom: -9px; border-radius: 0 0 4px 0; transform: rotate(28deg) skewX(-12deg); }
.k-bubble--tail-br .k-bubble__tail { right: 26px; bottom: -9px; border-radius: 0 0 0 4px; transform: rotate(-28deg) skewX(12deg); }
.k-bubble--tail-tl .k-bubble__tail { left: 26px; top: -9px; border-radius: 4px 0 0 0; transform: rotate(-28deg) skewX(12deg); }
.k-bubble--link { text-decoration: none; border: 0; display: inline-flex; align-items: center; gap: var(--space-3); transition: var(--transition-color); }
.k-bubble--link:hover.k-bubble--blue { background: var(--surface-blue-hover); color: var(--text-on-blue); border: 0; }

/* ---------- ShapeField : circles + diagonal wedges behind a band ---------- */
.k-shapefield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.k-shape { position: absolute; }
.k-shape--dot { border-radius: var(--radius-full); }
.k-shape--wedge { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.k-shape--wedge-l { clip-path: polygon(0 0, 100% 0, 0 100%); }
.k-hasfield { position: relative; isolation: isolate; }
.k-hasfield > *:not(.k-shapefield) { position: relative; z-index: 1; }
@keyframes k-drift { 0% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-14px,0); } 100% { transform: translate3d(0,0,0); } }
.k-shape--drift { animation: k-drift var(--duration-drift) var(--ease-standard) infinite; }

/* ---------- VerticalText ---------- */
.k-vtext { writing-mode: vertical-rl; text-orientation: upright; font-family: var(--type-display-family); font-weight: var(--weight-bold); letter-spacing: 0.12em; line-height: 1.1; color: var(--text-display); }
.k-vtext--lg { font-size: clamp(1.5rem, 2.6vw, 2.5rem); }
.k-vtext--md { font-size: var(--text-lg); }

/* ---------- PillNote : long hairline pill + connector stroke ---------- */
.k-pillnote { display: inline-flex; align-items: center; min-width: 0; }
.k-pillnote__body { display: inline-flex; align-items: center; justify-content: center; min-height: 68px; padding: var(--space-4) var(--space-7); border-radius: var(--radius-full); font-family: var(--type-body-family); font-size: var(--text-sm); letter-spacing: 0.08em; line-height: 1.6; color: var(--text-primary); text-align: center; }
.k-pillnote--outline .k-pillnote__body { border: var(--border-width-hairline) solid var(--border-solid); }
.k-pillnote--tint .k-pillnote__body { background: var(--surface-sunken); }
.k-pillnote--solid .k-pillnote__body { background: var(--surface-inverse); color: var(--text-inverse); }
.k-pillnote__connector { width: 28px; height: 1px; background: var(--border-solid); flex: 0 0 auto; }
.k-pillnote--solid .k-pillnote__connector { background: var(--surface-inverse); }
@media (max-width: 700px) { .k-pillnote__connector { display: none; } .k-pillnote__body { min-height: 56px; padding: var(--space-3) var(--space-5); } }

/* ---------- Attribution row : avatar + name, as on the reference cards ---------- */
.k-attrib { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.k-attrib__avatar { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--surface-blue); color: var(--text-on-blue); display: inline-flex; align-items: center; justify-content: center; font-family: var(--type-index-family); font-size: var(--text-3xs); font-weight: 700; letter-spacing: 0.04em; overflow: hidden; }
.k-attrib__avatar img { width: 100%; height: 100%; object-fit: cover; }
.k-attrib__name { font-size: var(--text-xs); color: var(--text-secondary); letter-spacing: var(--tracking-jp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================
   components/navigation/navigation.css
   ========================================================== */
/* ---------- SiteHeader : transparent, mark far left, tracked nav, one blue pill ---------- */
.k-header { position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-header); display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-5) var(--space-5) 0; pointer-events: none; }
@media (min-width: 1024px) { .k-header { padding: var(--space-5) var(--space-7) 0; } }
.k-header > * { pointer-events: auto; }
.k-header--sticky { position: sticky; }
.k-header__mark { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; border: 0; color: var(--text-display); }
.k-header__mark:hover { color: var(--blue-600); border: 0; }
.k-header__mark-name { font-family: var(--font-family-grotesk); font-weight: 700; font-size: var(--text-lg); letter-spacing: 0.02em; line-height: 1; }
.k-header__mark-suffix { font-family: var(--font-family-grotesk); font-weight: 600; font-size: var(--text-2xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue-300); }
.k-header__nav { display: none; margin-left: auto; align-items: center; gap: var(--space-6); }
@media (min-width: 940px) { .k-header__nav { display: flex; } }
.k-header__link { font-family: var(--type-index-family); font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-grotesk-sm); color: var(--text-accent); text-decoration: none; border: 0; padding: var(--space-2) 0; position: relative; transition: var(--transition-color); }
.k-header__link:hover { color: var(--blue-700); border: 0; }
.k-header__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-out); }
.k-header__link:hover::after, .k-header__link[aria-current="page"]::after { transform: scaleX(1); }
.k-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
@media (min-width: 940px) { .k-header__actions { margin-left: var(--space-5); } }
.k-header__cta { display: inline-flex; align-items: center; gap: var(--space-3); height: 40px; padding: 0 6px 0 var(--space-5); border-radius: var(--radius-full); background: var(--surface-blue); color: var(--text-on-blue); border: 0; text-decoration: none; font-family: var(--type-index-family); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-grotesk-sm); box-shadow: var(--shadow-pill); transition: var(--transition-color), box-shadow var(--duration-base) var(--ease-out); }
.k-header__cta:hover { background: var(--surface-blue-hover); color: var(--text-on-blue); border: 0; box-shadow: 0 4px 14px rgba(20, 102, 216, 0.3); }
.k-header__cta-arrow { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-full); border: 1px solid rgba(255, 255, 255, 0.55); transition: transform var(--duration-base) var(--ease-out); }
.k-header__cta:hover .k-header__cta-arrow { transform: translateX(3px); }
.k-header__burger { display: inline-flex; }
@media (min-width: 940px) { .k-header__burger { display: none; } }

.k-menu { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--surface-raised); display: flex; flex-direction: column; padding: var(--space-5); animation: k-fade var(--duration-base) var(--ease-out); }
.k-menu__top { display: flex; align-items: flex-start; justify-content: space-between; }
.k-menu__list { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-8); }
.k-menu__item { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; border: 0; color: var(--text-display); }
.k-menu__latin { font-family: var(--type-grotesk-family); font-weight: var(--type-grotesk-weight); font-size: var(--text-3xl); text-transform: uppercase; letter-spacing: var(--tracking-grotesk); line-height: 1.1; }
.k-menu__gloss { font-size: var(--text-sm); color: var(--text-muted); }

/* ---------- SectionHeading : dot + big JP heading, small Latin BELOW ---------- */
.k-sectionhead { display: flex; flex-direction: column; gap: var(--space-4); }
.k-sectionhead__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-8); }
.k-sectionhead__titles { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.k-sectionhead__ordinal { font-family: var(--type-index-family); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-grotesk-sm); color: var(--text-faint); }
.k-sectionhead__jp { display: flex; align-items: center; gap: var(--space-4); font-family: var(--type-display-family); font-weight: var(--weight-bold); font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.25; letter-spacing: 0.04em; color: var(--text-primary); margin: 0; }
.k-sectionhead__dot { flex: 0 0 auto; width: 0.78em; height: 0.78em; border-radius: var(--radius-full); background: currentColor; }
.k-sectionhead__latin { font-family: var(--type-index-family); font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-grotesk-sm); color: var(--text-muted); }
.k-sectionhead__aside { margin-left: auto; display: flex; align-items: center; min-width: 0; }
.k-sectionhead__lead { font-family: var(--type-display-family); font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: 1.7; letter-spacing: var(--tracking-jp); color: var(--text-display); max-width: 32em; }
.k-sectionhead__note { font-size: var(--text-sm); line-height: var(--leading-body); color: var(--text-secondary); max-width: 40em; }
/* wide = the spaced light Latin display, for statement bands */
.k-sectionhead--wide .k-sectionhead__jp { order: 2; font-size: var(--text-lg); letter-spacing: var(--tracking-jp); color: var(--text-secondary); }
.k-sectionhead--wide .k-sectionhead__dot { display: none; }
.k-sectionhead--wide .k-sectionhead__latin { order: 1; font-family: var(--type-grotesk-family); font-weight: var(--type-grotesk-weight); font-size: var(--type-section-size); letter-spacing: var(--tracking-grotesk); line-height: var(--leading-display); color: var(--text-display); }
.k-sectionhead--lg .k-sectionhead__jp { font-size: var(--text-xl); }

/* ---------- ViewAllLink ---------- */
.k-viewall { display: inline-flex; align-items: center; gap: var(--space-4); text-decoration: none; border: 0; color: var(--text-accent); padding: var(--space-2) 0; transition: var(--transition-color); }
.k-viewall:hover { color: var(--blue-700); border: 0; }
.k-viewall__labels { display: flex; align-items: baseline; gap: var(--space-3); }
.k-viewall__latin { font-family: var(--type-index-family); font-size: var(--text-sm); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-grotesk-sm); }
.k-viewall__gloss { font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-jp); }
.k-viewall:hover .k-viewall__gloss { color: var(--text-accent); }
.k-viewall__rule { display: none; }
.k-viewall__arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); border: 1px solid currentColor; transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.k-viewall:hover .k-viewall__arrow { background: var(--surface-blue); border-color: var(--surface-blue); color: var(--text-on-blue); transform: translateX(4px); }
.k-viewall--block { align-self: center; margin-left: auto; margin-right: auto; }
/* dark pill closer — the grained black VIEW ALL button */
.k-viewall--pill { display: inline-flex; flex: 0 0 auto; height: 56px; padding: 0 var(--space-7); border-radius: var(--radius-full); background: var(--surface-inverse); color: var(--text-inverse); position: relative; overflow: hidden; isolation: isolate; }
.k-viewall--pill::after { content: ""; position: absolute; inset: 0; background-image: var(--texture-grain); background-size: 160px 160px; opacity: 0.5; mix-blend-mode: overlay; pointer-events: none; }
.k-viewall--pill .k-viewall__latin { font-size: var(--text-md); font-weight: 600; }
.k-viewall--pill .k-viewall__gloss { color: var(--ink-400); }
.k-viewall--pill .k-viewall__arrow { border: 0; width: auto; height: auto; }
.k-viewall--pill:hover { color: var(--text-inverse); background: var(--ink-800); }
.k-viewall--pill:hover .k-viewall__arrow { background: none; border: 0; color: var(--text-inverse); }

/* ---------- FilterBar ---------- */
.k-filterbar { display: flex; flex-direction: column; gap: var(--space-3); }
.k-filterbar__prompt { font-family: var(--type-display-family); font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-display); letter-spacing: var(--tracking-jp); }
.k-filterbar__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Pagination ---------- */
.k-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-5); font-family: var(--type-index-family); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-grotesk-sm); text-transform: uppercase; }
.k-pagination__edge { display: inline-flex; align-items: center; gap: var(--space-2); background: none; border: 0; padding: var(--space-2); color: var(--text-accent); cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; transition: var(--transition-color); }
.k-pagination__edge:hover { color: var(--blue-700); }
.k-pagination__edge[disabled] { opacity: 0.3; pointer-events: none; }
.k-pagination__pages { display: flex; align-items: center; gap: var(--space-1); }
.k-pagination__page { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: none; border: var(--border-width-hairline) solid transparent; border-radius: var(--radius-full); color: var(--text-muted); cursor: pointer; font: inherit; letter-spacing: 0; transition: var(--transition-color); }
.k-pagination__page:hover { color: var(--text-accent); border-color: var(--blue-200); }
.k-pagination__page[aria-current="page"] { color: var(--text-on-blue); background: var(--surface-blue); border-color: var(--surface-blue); }

/* ---------- Tabs ---------- */
.k-tabs { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: 4px; background: var(--surface-sunken); border-radius: var(--radius-full); align-self: flex-start; max-width: 100%; }
.k-tabs::-webkit-scrollbar { display: none; }
.k-tab { position: relative; display: inline-flex; align-items: baseline; gap: var(--space-2); padding: 9px var(--space-5); border: 0; border-radius: var(--radius-full); background: none; cursor: pointer; color: var(--text-muted); white-space: nowrap; transition: var(--transition-color); }
.k-tab__latin { font-family: var(--type-index-family); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-grotesk-sm); }
.k-tab__gloss { font-size: var(--text-xs); letter-spacing: var(--tracking-jp); }
.k-tab__count { font-family: var(--type-meta-family); font-size: var(--text-2xs); opacity: 0.7; }
.k-tab:hover { color: var(--text-accent); }
.k-tab[aria-selected="true"] { color: var(--text-on-blue); background: var(--surface-blue); }

/* ==========================================================
   components/content/content.css
   ========================================================== */
/* ---------- MediaFrame ---------- */
.k-mediaframe { position: relative; display: block; overflow: hidden; background: var(--surface-band); border-radius: var(--radius-md); }
.k-mediaframe--panel { border-radius: var(--radius-panel); }
.k-mediaframe--thumb { aspect-ratio: var(--ratio-thumb); }
.k-mediaframe--hero { aspect-ratio: var(--ratio-hero); }
.k-mediaframe--square { aspect-ratio: var(--ratio-square); }
.k-mediaframe--book { aspect-ratio: var(--ratio-book); }
.k-mediaframe--framed { border: var(--border-width-hairline) solid var(--border-hairline); }
.k-mediaframe--pill { border-radius: var(--radius-xl); }
.k-mediaframe__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-slow) var(--ease-out); }
.k-mediaframe__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-4); font-family: var(--type-index-family); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-index); text-transform: uppercase; color: var(--blue-300); background-color: var(--surface-band); background-image: var(--texture-grain); background-size: 160px 160px; background-blend-mode: multiply; }
.k-mediaframe__caption { position: absolute; left: var(--space-3); bottom: var(--space-3); padding: 5px 11px; border-radius: var(--radius-full); background: var(--surface-blue); color: var(--text-on-blue); font-family: var(--type-meta-family); font-size: var(--text-2xs); letter-spacing: 0.04em; }

/* ---------- WorkCard ---------- */
.k-workcard { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; border: 0; color: inherit; }
.k-workcard:hover { border: 0; }
.k-workcard__media { position: relative; }
.k-workcard__badge { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1; }
.k-workcard__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.k-workcard__meta { display: flex; align-items: baseline; gap: var(--space-3); font-family: var(--type-meta-family); font-size: var(--text-2xs); letter-spacing: 0.05em; color: var(--text-faint); text-transform: uppercase; }
.k-workcard__latin { font-family: var(--type-index-family); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-index); color: var(--blue-300); }
.k-workcard__title { font-family: var(--type-display-family); font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: 1.55; letter-spacing: 0.02em; color: var(--text-primary); transition: var(--transition-color); text-wrap: pretty; margin: 0; }
.k-workcard:hover .k-workcard__title { color: var(--text-accent); }
.k-workcard:hover .k-mediaframe__img { transform: scale(1.03); }
.k-workcard__excerpt { font-size: var(--text-sm); line-height: var(--leading-body); color: var(--text-secondary); margin: 0; }
.k-workcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.k-workcard__arrow { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--radius-full); border: 1px solid var(--blue-200); color: var(--text-accent); transition: var(--transition-color), transform var(--duration-base) var(--ease-out); }
.k-workcard:hover .k-workcard__arrow { background: var(--surface-blue); border-color: var(--surface-blue); color: var(--text-on-blue); transform: translateX(3px); }
.k-workcard--row { flex-direction: row; gap: var(--space-6); align-items: center; }
.k-workcard--row .k-workcard__media { flex: 0 0 46%; }
.k-workcard--row .k-workcard__body { flex: 1 1 260px; }
@media (max-width: 700px) { .k-workcard--row { flex-direction: column; align-items: stretch; } .k-workcard--row .k-workcard__media { flex: none; width: 100%; } }

/* ---------- ArticleRow ---------- */
.k-articlerow { display: grid; grid-template-columns: 104px 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; border-top: var(--border-rule-style); text-decoration: none; border-left: 0; border-right: 0; border-bottom: 0; color: inherit; transition: var(--transition-color); }
.k-articlerow:last-child { border-bottom: var(--border-rule-style); }
.k-articlerow__date { font-family: var(--type-meta-family); font-size: var(--text-2xs); letter-spacing: 0.05em; color: var(--text-faint); }
.k-articlerow__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.k-articlerow__title { font-family: var(--type-display-family); font-size: var(--text-md); font-weight: var(--weight-bold); line-height: 1.5; letter-spacing: var(--tracking-jp); color: var(--text-display); text-wrap: pretty; transition: var(--transition-color); }
.k-articlerow:hover .k-articlerow__title { color: var(--blue-700); }
.k-articlerow__arrow { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-full); border: 1px solid var(--blue-200); color: var(--text-accent); transition: var(--transition-color), transform var(--duration-base) var(--ease-out); }
.k-articlerow:hover .k-articlerow__arrow { background: var(--surface-blue); border-color: var(--surface-blue); color: var(--text-on-blue); transform: translateX(3px); }
@media (max-width: 600px) { .k-articlerow { grid-template-columns: 1fr auto; } .k-articlerow__date { grid-column: 1 / -1; } }

/* ---------- SectionBlock ---------- */
.k-section { position: relative; isolation: isolate; padding: var(--gap-band-sm) 0; }
@media (min-width: 768px) { .k-section { padding: var(--gap-band) 0; } }
.k-section--tint { background: var(--surface-sunken); }
.k-section--panel { background: var(--surface-raised); border-radius: var(--radius-panel); margin: 0 var(--space-4); }
@media (min-width: 768px) { .k-section--panel { margin: 0 var(--space-5); } }
.k-section--band { background: var(--surface-band); }
.k-section--blue { background: var(--surface-blue); color: var(--text-on-blue); }
.k-section--blue .k-labelpair__latin, .k-section--blue .k-sectionhead__lead, .k-section--blue .k-statement__title, .k-section--blue .k-viewall { color: var(--text-on-blue); }
.k-section--blue .k-labelpair__gloss, .k-section--blue .k-sectionhead__note, .k-section--blue .k-statement__desc { color: var(--blue-100); }
.k-section--blue .k-sectionhead__ordinal { color: var(--blue-100); }
.k-section--blue .k-sectionhead__ordinal::before { background: var(--greige-050); }
.k-section--blue .k-statement { border-color: rgba(255,255,255,0.28); }
.k-section--blue .k-statement__dot { background: var(--greige-050); }
.k-section--inverse { background: var(--surface-inverse); color: var(--text-inverse); }
.k-section__inner { position: relative; z-index: 1; max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--layout-gutter); display: grid; gap: var(--space-7); }
@media (min-width: 1024px) { .k-section__inner { padding: 0 var(--layout-gutter-lg); grid-template-columns: var(--layout-rail) 1fr; gap: var(--space-8); align-items: start; } }
.k-section--stacked .k-section__inner { grid-template-columns: 1fr; }
.k-section__content { display: flex; flex-direction: column; gap: var(--gap-section); min-width: 0; }
.k-grid { display: grid; gap: var(--gap-grid); }
.k-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .k-grid--3, .k-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .k-grid--2, .k-grid--3, .k-grid--4 { grid-template-columns: 1fr; } }

/* ---------- ContactBand : blue, grained, giant grotesk word ---------- */
.k-contactband { position: relative; isolation: isolate; overflow: hidden; background: var(--surface-blue); color: var(--text-on-blue); padding: var(--space-10) 0; border-radius: var(--radius-panel); margin: 0 var(--space-4) var(--space-4); }
@media (min-width: 768px) { .k-contactband { margin: 0 var(--space-5) var(--space-5); } }
.k-contactband__inner { position: relative; z-index: 1; max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--layout-gutter); display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
@media (min-width: 1024px) { .k-contactband__inner { padding: 0 var(--layout-gutter-lg); } }
.k-contactband__lead { font-family: var(--type-display-family); font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: 1.6; letter-spacing: var(--tracking-jp); max-width: 28em; }
.k-contactband__latin { font-family: var(--type-grotesk-family); font-size: var(--type-section-size); font-weight: var(--type-grotesk-weight); letter-spacing: var(--tracking-grotesk); line-height: var(--leading-display); text-transform: uppercase; }
.k-contactband .k-viewall { color: var(--text-on-blue); }
.k-contactband .k-viewall__gloss { color: var(--blue-100); }
.k-contactband .k-viewall:hover .k-viewall__arrow { background: var(--greige-050); border-color: var(--greige-050); color: var(--text-accent); }

/* ---------- CodeBlock ---------- */
.k-code { background: var(--surface-code); border-radius: var(--radius-lg); overflow: hidden; }
.k-code__bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid rgba(255,255,255,0.08); }
.k-code__file { font-family: var(--type-meta-family); font-size: var(--text-2xs); color: var(--syntax-plain); letter-spacing: 0.04em; }
.k-code__lang { font-family: var(--type-index-family); font-size: var(--text-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-index); color: var(--blue-300); margin-left: auto; }
.k-code__copy { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--ink-400); cursor: pointer; font-family: var(--type-index-family); font-size: var(--text-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-index); padding: 4px; border-radius: var(--radius-full); transition: var(--transition-color); }
.k-code__copy:hover { color: #fff; }
.k-code__pre { margin: 0; padding: var(--space-4); overflow-x: auto; font-family: var(--font-family-mono); font-size: var(--text-sm); line-height: 1.8; color: var(--syntax-plain); }
.k-code__line { display: block; }
.k-code__ln { display: inline-block; width: 2.5em; color: #3a4048; user-select: none; }
.k-code__line--hl { background: rgba(20, 102, 216, 0.22); box-shadow: inset 2px 0 0 var(--blue-400); }
.k-tok-c { color: var(--syntax-comment); font-style: italic; }
.k-tok-k { color: var(--syntax-keyword); }
.k-tok-s { color: var(--syntax-string); }
.k-tok-n { color: var(--syntax-number); }
.k-tok-f { color: var(--syntax-function); }

/* ---------- Callout ---------- */
.k-callout { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); border-left: var(--border-width-marker) solid var(--blue-300); background: var(--surface-blue-subtle); }
.k-callout__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.k-callout__title { font-family: var(--type-display-family); font-size: var(--text-base); font-weight: var(--weight-bold); letter-spacing: var(--tracking-jp); color: var(--text-display); }
.k-callout__text { font-size: var(--text-sm); line-height: var(--leading-body); color: var(--text-secondary); }
.k-callout--note { border-left-color: var(--greige-400); background: var(--surface-sunken); }
.k-callout--note .k-callout__title, .k-callout--note > .k-icon { color: var(--text-primary); }
.k-callout--tip { border-left-color: var(--blue-500); background: var(--surface-blue-subtle); }
.k-callout--tip .k-callout__title, .k-callout--tip > .k-icon { color: var(--text-accent); }
.k-callout--warn { border-left-color: var(--amber-600); background: var(--surface-warning-subtle); }
.k-callout--warn .k-callout__title, .k-callout--warn > .k-icon { color: var(--text-warning); }
.k-callout--caution { border-left-color: var(--red-600); background: var(--surface-danger-subtle); }
.k-callout--caution .k-callout__title, .k-callout--caution > .k-icon { color: var(--text-danger); }

/* ==========================================================
   components/forms/forms.css
   ========================================================== */
.k-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.k-field__label { display: flex; align-items: baseline; gap: var(--space-2); font-family: var(--type-index-family); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-index); color: var(--text-accent); }
.k-field__gloss { font-family: var(--type-ui-family); font-size: var(--text-xs); font-weight: var(--weight-regular); text-transform: none; letter-spacing: var(--tracking-jp); color: var(--text-muted); }
.k-field__req { color: var(--text-danger); font-size: var(--text-2xs); }
.k-field__hint { font-size: var(--text-xs); line-height: var(--leading-ui); color: var(--text-muted); }
.k-field__error { font-size: var(--text-xs); color: var(--text-danger); display: flex; align-items: center; gap: 6px; }

.k-input { display: flex; align-items: center; gap: var(--space-2); background: var(--surface-raised); border: var(--border-width-hairline) solid var(--border-hairline); border-radius: var(--radius-full); padding: 0 var(--space-5); transition: var(--transition-color); color: var(--blue-300); }
.k-input:hover { border-color: var(--blue-200); }
.k-input:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--blue-100); color: var(--text-accent); }
.k-input--sm { min-height: 38px; }
.k-input--md { min-height: 46px; }
.k-input--lg { min-height: 54px; }
.k-input--invalid { border-color: var(--red-600); }
.k-input--disabled { background: var(--surface-sunken); opacity: 0.6; pointer-events: none; }
.k-input__control { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--type-ui-family); font-size: var(--text-base); line-height: var(--leading-ui); color: var(--text-primary); padding: 10px 0; letter-spacing: var(--tracking-jp); }
.k-input__control::placeholder { color: var(--text-faint); }
.k-input--multiline { align-items: flex-start; border-radius: var(--radius-lg); padding: var(--space-2) var(--space-5); }
.k-input--multiline .k-input__control { resize: vertical; min-height: 120px; }
.k-input__suffix { font-family: var(--type-meta-family); font-size: var(--text-2xs); color: var(--text-faint); }

.k-select { position: relative; display: flex; align-items: center; background: var(--surface-raised); border: var(--border-width-hairline) solid var(--border-hairline); border-radius: var(--radius-full); transition: var(--transition-color); }
.k-select:hover { border-color: var(--blue-200); }
.k-select:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--blue-100); }
.k-select__control { -webkit-appearance: none; appearance: none; width: 100%; border: 0; outline: none; background: transparent; font-family: var(--type-ui-family); font-size: var(--text-base); color: var(--text-primary); padding: 12px var(--space-8) 12px var(--space-5); cursor: pointer; letter-spacing: var(--tracking-jp); border-radius: var(--radius-full); }
.k-select__chevron { position: absolute; right: var(--space-4); pointer-events: none; color: var(--text-accent); }
.k-select--sm .k-select__control { padding-top: 8px; padding-bottom: 8px; font-size: var(--text-sm); }

.k-choice { display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--text-base); line-height: var(--leading-ui); color: var(--text-primary); letter-spacing: var(--tracking-jp); }
.k-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.k-choice__box { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; border: var(--border-width-strong) solid var(--blue-200); border-radius: var(--radius-sm); background: var(--surface-raised); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: var(--transition-color); }
.k-choice__box--radio { border-radius: var(--radius-full); }
.k-choice:hover .k-choice__box { border-color: var(--blue-400); }
.k-choice input:checked + .k-choice__box { background: var(--surface-blue); border-color: var(--surface-blue); color: #fff; }
.k-choice input:focus-visible + .k-choice__box { box-shadow: var(--focus-ring); }
.k-choice__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: #fff; opacity: 0; }
.k-choice input:checked + .k-choice__box .k-choice__dot { opacity: 1; }
.k-choice--disabled { opacity: 0.4; pointer-events: none; }
.k-choice__desc { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

.k-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--text-base); color: var(--text-primary); letter-spacing: var(--tracking-jp); }
.k-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.k-switch__track { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: var(--radius-full); background: var(--greige-300); transition: background-color var(--duration-base) var(--ease-standard); }
.k-switch input:checked + .k-switch__track { background: var(--surface-blue); }
.k-switch input:focus-visible + .k-switch__track { box-shadow: var(--focus-ring); }
.k-switch__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--radius-full); background: #fff; transition: transform var(--duration-base) var(--ease-standard); }
.k-switch input:checked + .k-switch__track .k-switch__knob { transform: translateX(18px); }
.k-switch--disabled { opacity: 0.4; pointer-events: none; }

/* ==========================================================
   components/feedback/feedback.css
   ========================================================== */
.k-scrim { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--surface-scrim); animation: k-fade var(--duration-base) var(--ease-standard); }
@keyframes k-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes k-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.k-dialog { position: fixed; z-index: var(--z-dialog); top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 2 * var(--layout-gutter))); max-height: calc(100vh - 4rem); overflow: auto; background: var(--surface-raised); border-radius: var(--radius-xl); box-shadow: var(--shadow-overlay); animation: k-rise var(--duration-base) var(--ease-out); }
.k-dialog__head { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-3); }
.k-dialog__titles { flex: 1 1 auto; min-width: 0; color: var(--text-display); }
.k-dialog__body { padding: 0 var(--space-6) var(--space-6); font-size: var(--text-base); line-height: var(--leading-body); color: var(--text-secondary); }
.k-dialog__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: var(--border-hairline-style); background: var(--surface-sunken); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.k-dialog--wide { width: min(880px, calc(100vw - 2 * var(--layout-gutter))); }

.k-toaster { position: fixed; z-index: var(--z-toast); right: var(--space-5); bottom: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); max-width: min(420px, calc(100vw - 2 * var(--space-5))); }
.k-toast { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--surface-blue); color: var(--text-on-blue); border-radius: var(--radius-full); box-shadow: var(--shadow-popover); animation: k-rise var(--duration-base) var(--ease-out); }
.k-toast__body { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); line-height: var(--leading-ui); }
.k-toast__title { font-family: var(--type-index-family); font-size: var(--text-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-index); color: var(--blue-100); display: block; margin-bottom: 2px; }
.k-toast--success { background: var(--green-600); }
.k-toast--warning { background: var(--amber-600); }
.k-toast--danger { background: var(--red-600); }
.k-toast--neutral { background: var(--ink-900); }
.k-toast__close { background: none; border: 0; color: currentColor; opacity: 0.7; cursor: pointer; padding: 2px; transition: opacity var(--duration-fast) var(--ease-standard); }
.k-toast__close:hover { opacity: 1; }

.k-tooltip-wrap { position: relative; display: inline-flex; }
.k-tooltip { position: absolute; z-index: var(--z-tooltip); bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--ink-900); color: var(--greige-050); font-family: var(--type-ui-family); font-size: var(--text-2xs); letter-spacing: var(--tracking-jp); padding: 6px 11px; border-radius: var(--radius-full); box-shadow: var(--shadow-popover); opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-standard); }
.k-tooltip--bottom { bottom: auto; top: calc(100% + 8px); }
.k-tooltip-wrap:hover .k-tooltip, .k-tooltip-wrap:focus-within .k-tooltip { opacity: 1; }

/* ==========================================================
   guidelines/utilities.css
   ========================================================== */
/* Layout, prose and motion utilities shipped to consumers. */
.k-page { background: var(--surface-page); color: var(--text-primary); min-height: 100vh; }
.k-container { max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--layout-gutter); }
@media (min-width: 1024px) { .k-container { padding: 0 var(--layout-gutter-lg); } }
.k-measure { max-width: var(--layout-measure); }
.k-stack { display: flex; flex-direction: column; gap: var(--gap-stack); }
.k-row { display: flex; align-items: center; gap: var(--space-3); }
.k-rule { border: 0; border-top: var(--border-rule-style); margin: 0; }
.k-meta { font-family: var(--type-meta-family); font-size: var(--type-meta-size); letter-spacing: 0.05em; color: var(--text-faint); text-transform: uppercase; }
.k-eyebrow { font-family: var(--type-index-family); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-index); text-transform: uppercase; color: var(--text-accent); }
.k-lead { font-family: var(--type-display-family); font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: 1.6; letter-spacing: var(--tracking-jp); color: var(--text-display); }
.k-hero-latin { font-family: var(--type-grotesk-family); font-size: var(--type-hero-size); font-weight: var(--type-grotesk-weight); letter-spacing: var(--tracking-grotesk); line-height: var(--leading-display); color: var(--text-display); text-transform: uppercase; margin: 0; }
.k-jp-display { font-family: var(--type-display-family); font-weight: var(--weight-bold); font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.35; letter-spacing: 0.04em; color: var(--text-primary); margin: 0; }
.k-jp-statement { font-family: var(--type-display-family); font-weight: var(--weight-bold); font-size: var(--text-lg); line-height: 2.1; letter-spacing: 0.06em; color: var(--text-primary); margin: 0; }
.k-prose { max-width: var(--layout-measure); font-size: var(--type-body-size); line-height: var(--leading-body); color: var(--text-primary); }
.k-prose > * + * { margin-top: var(--space-5); }
.k-prose h2 { font-size: var(--text-xl); margin-top: var(--space-8); }
.k-prose h3 { font-size: var(--text-lg); margin-top: var(--space-7); }
.k-prose ul, .k-prose ol { padding-left: 1.4em; }
.k-prose li + li { margin-top: var(--space-2); }
.k-prose code { background: var(--surface-blue-subtle); color: var(--text-accent); padding: 2px 6px; border-radius: var(--radius-sm); }

/* The one reveal: 10px rise + fade, staggered 70ms. */
@keyframes k-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.k-reveal { animation: k-reveal var(--duration-slow) var(--ease-out) both; }
.k-reveal-1 { animation-delay: 70ms; }
.k-reveal-2 { animation-delay: 140ms; }
.k-reveal-3 { animation-delay: 210ms; }
.k-reveal-4 { animation-delay: 280ms; }
.k-center-row { display: flex; justify-content: center; }