/* ==========================================================================
   Takumis — shared base
   Graphic language borrowed from the Hello.Purple design system.
   Logo, voice and page design are Takumis' own.

   NON-NEGOTIABLES inherited from Hello.Purple:
     · Ground is cream #FDF8E8, never white
     · SHARP BLOCKS, ROUND CONTROLS — cards radius 0, buttons/tags pill
     · FLAT — zero drop shadows, ever. 1px rules + colour blocks separate.
     · Greycliff CF, DemiBold 600 is the ceiling. Never 700+.
     · A Castoro serif accent ALWAYS changes colour too.
     · One accent word · one violet period · one CTA per block.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Castoro:ital@0;1&display=swap');

@font-face {
  font-family: 'Greycliff CF';
  src: url('./fonts/Greycliff-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Greycliff CF';
  src: url('./fonts/Greycliff-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Greycliff CF';
  src: url('./fonts/Greycliff-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Greycliff CF';
  src: url('./fonts/Greycliff-DemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
/* 700+ maps onto DemiBold so nothing ever faux-bolds the brand face. */
@font-face {
  font-family: 'Greycliff CF';
  src: url('./fonts/Greycliff-DemiBold.ttf') format('truetype');
  font-weight: 700 900; font-style: normal; font-display: swap;
}

:root {
  /* --- Brand palette [Hello.Purple MANUAL p.33, HEX canon] --------------- */
  --hp-cream-white: #FDF8E8;
  --hp-soft-cream: #FFF0E0;
  --hp-blue-violet: #7C3AED;
  --hp-tropical-indigo: #918EF4;
  --hp-pastel-orange: #FF9E64;
  --hp-warm-terracotta: #DE7347;
  --hp-midnight-berry: #2A1B4E;

  --hp-violet-700: #6A2BD9;
  --hp-violet-500: #8B5CF6;
  --hp-violet-200: #C9C2F9;
  --hp-violet-100: #E7E3FB;
  --hp-violet-050: #F3F1FD;

  --hp-berry-900: #1E123A;
  --hp-berry-700: #2A1B4E;
  --hp-berry-500: #453470;

  --hp-orange-600: #C85E38;
  --hp-orange-ink: #9C4520;
  --hp-orange-ink-deep: #7A3212;
  --hp-orange-200: #FFD3B4;
  --hp-orange-100: #FFE7D6;

  --hp-cream-50: #FFFDF6;
  --hp-cream-200: #F5EDD8;

  --hp-ink-900: #1E123A;
  --hp-ink-700: #2A1B4E;
  --hp-ink-500: #5B5470;
  --hp-ink-400: #857F97;
  --hp-line-300: #E3DECF;
  --hp-line-200: #EDE8DA;

  --hp-lavender-050: #F3F3FE;
  --hp-lavender-100: #E9E8FD;
  --hp-lavender-200: #D8D7FB;
  --hp-lavender-400: #C8C6F9;
  --hp-periwinkle: #BDBBF8;
  --hp-peach-050: #FFEBDA;
  --hp-peach-100: #FFD5AF;

  /* --- Semantic ---------------------------------------------------------- */
  --surface-page: var(--hp-cream-white);
  --surface-raised: var(--hp-cream-50);
  --surface-sunken: var(--hp-cream-200);
  --surface-inverse: var(--hp-midnight-berry);
  --surface-brand: var(--hp-blue-violet);
  --surface-brand-subtle: var(--hp-violet-050);
  --surface-graph: var(--hp-lavender-100);
  --surface-graph-rule: var(--hp-lavender-400);

  --text-strong: var(--hp-midnight-berry);
  --text-body: var(--hp-ink-700);
  --text-muted: var(--hp-ink-500);
  --text-subtle: var(--hp-ink-400);      /* micro-labels only — 3.6:1 */
  --text-on-brand: var(--hp-cream-white);

  --text-accent-on-light: var(--hp-blue-violet);
  --text-accent-on-dark: var(--hp-tropical-indigo);
  --text-accent-on-brand: var(--hp-pastel-orange);

  --border-hairline: var(--hp-line-300);
  --border-brand: var(--hp-blue-violet);

  /* --- Type -------------------------------------------------------------- */
  --font-sans: 'Greycliff CF', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Castoro', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;

  --fs-display-xl: 76px; --fs-display-lg: 60px; --fs-display-md: 46px;
  --fs-h1: 36px; --fs-h2: 28px; --fs-h3: 22px; --fs-title: 18px;
  --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px;
  --fs-caption: 13px; --fs-overline: 12px;

  --lh-tight: 1.04; --lh-snug: 1.15; --lh-heading: 1.2;
  --lh-body: 1.55; --lh-relaxed: 1.7;

  /* Tracking. Every letter-spacing on the site is a multiple of --tracking:
     one of the --ls-* tokens, or calc(<value> * var(--tracking)) for a value
     used once. Japanese sets it to 0 (see the end of this file). */
  --tracking: 1;
  --ls-hero:     calc(-0.035em * var(--tracking));  /* page heroes */
  --ls-title:    calc(-0.03em * var(--tracking));   /* group heads, stat figures */
  --ls-display:  calc(-0.02em * var(--tracking));   /* section heads */
  --ls-heading:  calc(-0.01em * var(--tracking));
  --ls-overline: calc(0.14em * var(--tracking));    /* eyebrows, footer heads */
  --ls-label:    calc(0.13em * var(--tracking));    /* small labels in forge-base.css */

  /* Small labels: uppercase and tracked in English. Japanese has no case,
     so it drops both and sets them at 13px (the floor for Japanese text). */
  --label-case: uppercase;
  --fs-label: 11px; --fs-label-sm: 10.5px; --fs-stat: 12.5px;

  /* Display scale: the heading sizes the pages use, by role. The -sm values
     are the pages' phone sizes (under 760px; --fs-section-sm under 900px). */
  --fs-hero: clamp(34px, 6.4vw, 76px);        --lh-hero: 0.98;        /* home */
  --fs-hero-page: clamp(34px, 4.8vw, 60px);   --lh-hero-page: 1.03;   /* features, faq, 404 */
  --fs-hero-split: clamp(38px, 5vw, 62px);    --lh-hero-split: 1.0;   /* how-it-works, lp: hero beside a picture */
  --fs-hero-split-sm: clamp(30px, 8vw, 44px);
  --fs-section: clamp(28px, 3.4vw, 44px);     --fs-section-sm: clamp(26px, 6.4vw, 36px);
  --fs-closing: clamp(32px, 4.6vw, 56px);     --fs-closing-sm: clamp(28px, 8.4vw, 40px);  /* .cta h2 */
  --fs-invite: clamp(30px, 4.2vw, 50px);      --fs-invite-sm: clamp(28px, 8vw, 40px);     /* how-it-works */
  --fs-question: clamp(26px, 3.2vw, 40px);    --fs-question-sm: clamp(24px, 6.6vw, 34px); /* how-it-works */
  --fs-group: clamp(26px, 3vw, 36px);         /* features steps, faq groups */

  /* A heading's measure is written in characters: max-width: calc(14 * var(--char)).
     1ch is about one Latin letter; a Japanese character is a full 1em. */
  --char: 1ch;

  /* The accent word (.hp-accent) and emphasis inside answers. */
  --font-accent: var(--font-serif); --fw-accent: var(--fw-regular);
  --em-weight: var(--fw-regular);

  /* Fixed widths that Japanese text has to fit. */
  --sc-rob-min: 132px;        /* home strategy cards: the robustness column */

  /* --- Space ------------------------------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;
  --container-max: 1200px;
  --container-narrow: 760px;
  --grid-unit: 24px;

  /* --- Effects ----------------------------------------------------------- */
  --radius-block: 0;
  --radius-control: 6px;
  --radius-pill: 999px;
  --hairline: 1px solid var(--border-hairline);
  --frame-rule: 2px solid var(--border-brand);
  --shadow-focus: 0 0 0 3px rgba(145, 142, 244, 0.55);
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms; --dur-base: 160ms; --dur-slow: 320ms;
  --dot-size: 14px;

  /* --- Charts [computed, validated] -------------------------------------- */
  --chart-1: #7C3AED;   /* strategy */
  --chart-2: #DE7347;   /* benchmark — 2.97:1 on cream, ALWAYS direct-labelled */
  --chart-grid: var(--hp-lavender-400);
}

/* ==========================================================================
   Reset & base elements
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: inherit;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0 0 0.4em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--hp-blue-violet);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--hp-violet-700); }

img, svg { max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

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

::selection { background: var(--hp-violet-200); color: var(--hp-midnight-berry); }

/* ==========================================================================
   Brand primitives
   ========================================================================== */

/* HARD RULE: the serif accent changes COLOUR as well as typeface. */
.hp-accent {
  font-family: var(--font-accent);
  font-weight: var(--fw-accent);
  font-style: normal;
  color: var(--text-accent-on-light);
}
.hp-accent.on-dark  { color: var(--text-accent-on-dark); }
.hp-accent.on-brand { color: var(--text-accent-on-brand); }

/* The violet period — one per block, never twice. */
.hp-period { color: var(--hp-blue-violet); }
.hp-period.on-dark { color: var(--hp-tropical-indigo); }

/* Uppercase eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: var(--label-case);
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--hp-blue-violet);
  flex: none;
}
.eyebrow.on-dark { color: var(--hp-lavender-200); }
.eyebrow.on-dark::before { background: var(--hp-tropical-indigo); }
.eyebrow.on-brand { color: rgba(253,248,232,.82); }
.eyebrow.on-brand::before { background: var(--hp-pastel-orange); }

/* Graph paper — the 24px module */
.graph-paper {
  background-color: var(--surface-graph);
  background-image:
    linear-gradient(to right, var(--surface-graph-rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--surface-graph-rule) 1px, transparent 1px);
  background-size: var(--grid-unit) var(--grid-unit);
}
.graph-paper-cream {
  background-color: var(--surface-page);
  background-image:
    linear-gradient(to right, rgba(145,142,244,.20) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(145,142,244,.20) 1px, transparent 1px);
  background-size: var(--grid-unit) var(--grid-unit);
}

/* The 8-dot frame — 4 corners + 4 edge midpoints */
.frame { position: relative; border: var(--frame-rule); border-radius: 0; }
.frame > .dot {
  position: absolute;
  width: var(--dot-size); height: var(--dot-size);
  background: var(--hp-blue-violet);
  border-radius: 50%;
  pointer-events: none;
}
.frame > .dot.tl { top: 0; left: 0;   transform: translate(-50%, -50%); }
.frame > .dot.tc { top: 0; left: 50%; transform: translate(-50%, -50%); }
.frame > .dot.tr { top: 0; right: 0;  transform: translate(50%, -50%); }
.frame > .dot.ml { top: 50%; left: 0; transform: translate(-50%, -50%); }
.frame > .dot.mr { top: 50%; right: 0;transform: translate(50%, -50%); }
.frame > .dot.bl { bottom: 0; left: 0;   transform: translate(-50%, 50%); }
.frame > .dot.bc { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.frame > .dot.br { bottom: 0; right: 0;  transform: translate(50%, 50%); }

/* ==========================================================================
   The logo — "The Cut"
   A T whose stem ends in a 45° chisel bevel. Artwork lives in assets/logo/
   as outlined SVG; the ground decides which file is used:

     light  → violet mark  + berry wordmark
     dark   → indigo mark  + cream wordmark   (violet only reaches 2.7:1 on berry)
     brand  → cream mark   + cream wordmark

   Never recoloured in CSS, never stretched, never given a shadow.
   Web-nav floor is 104px wide; below 72px use the symbol alone.
   ========================================================================== */
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { display: block; height: 24px; width: auto; }
.logo-lg img { height: 30px; }
.logo-sm img { height: 19px; }

/* ==========================================================================
   Controls — pills, the only round things besides the dot
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: calc(0.01em * var(--tracking));
  min-height: 42px;          /* comfortable thumb target on touch */
  padding: 13px 24px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--hp-blue-violet); color: var(--hp-cream-white); }
.btn-primary:hover { background: var(--hp-violet-700); color: var(--hp-cream-white); }

.btn-accent { background: var(--hp-blue-violet); color: var(--hp-cream-white); }
.btn-accent:hover { background: var(--hp-violet-700); color: var(--hp-cream-white); }

.btn-outline { background: transparent; color: var(--hp-midnight-berry); border-color: var(--hp-midnight-berry); }
.btn-outline:hover { background: var(--hp-violet-050); border-color: var(--hp-blue-violet); color: var(--hp-blue-violet); }

.btn-ghost { background: transparent; color: var(--text-body); }
.btn-ghost:hover { background: var(--hp-violet-050); color: var(--hp-blue-violet); }

.btn-on-dark { background: var(--hp-cream-white); color: var(--hp-midnight-berry); }
.btn-on-dark:hover { background: var(--hp-blue-violet); color: var(--hp-cream-white); }

.btn-outline-dark { background: transparent; color: var(--hp-cream-white); border-color: rgba(253,248,232,.45); }
.btn-outline-dark:hover { background: rgba(253,248,232,.08); border-color: var(--hp-cream-white); color: var(--hp-cream-white); }

.btn-lg { padding: 16px 32px; font-size: var(--fs-body); }

/* Tag — the other pill */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline);
  color: var(--text-muted);
  background: transparent;
}
.tag-brand { border-color: var(--hp-violet-200); background: var(--hp-violet-050); color: var(--hp-violet-700); }
.tag-warm  { border-color: var(--hp-orange-200); background: var(--hp-orange-100); color: var(--hp-orange-ink); }

/* Cards — SHARP. Never round these. Hover shifts the hairline to violet. */
.card {
  background: var(--surface-raised);
  border: var(--hairline);
  border-radius: 0;
  padding: var(--space-8);
  transition: border-color var(--dur-base) var(--ease-standard);
}
.card:hover { border-color: var(--hp-blue-violet); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }
.narrow    { max-width: var(--container-narrow); }
.section   { padding: var(--space-32) 0; }
.section-sm{ padding: var(--space-20) 0; }
.stack-0 > * + * { margin-top: 0; }

.rule { border: 0; border-top: var(--hairline); margin: 0; }

.lead { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-muted); }

.mono { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: calc(-0.01em * var(--tracking)); }

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--hp-midnight-berry); color: var(--hp-cream-white);
  padding: 12px 20px; z-index: 999;
}
.skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Japanese — <html lang="ja">, the pages under /ja/
   The same tokens with Japanese values, after the app's Japanese typography
   (Axiory-AI-Trader, packages/ui/globals.css :lang(ja)): system Japanese
   fonts after Greycliff, no tracking, no uppercase or italics, taller lines,
   headings that break between phrases.

   Tokens rather than element rules, because each page's <style> block loads
   after this file and would win over a plain `.hero h1` rule here.
   :root:lang(ja) outranks the pages' own :root, so a token set here holds
   on every page. The few element rules below are on :root:lang(ja) too,
   which outranks any one-class page rule.
   ========================================================================== */
:root:lang(ja) {
  /* Greycliff still draws Latin letters and digits. Japanese falls through to
     the system's Japanese sans (macOS/iOS, then Windows, then Android/Linux).
     No Japanese webfont: font-src is 'self', and one would weigh megabytes. */
  --font-sans: 'Greycliff CF', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'Noto Sans JP', sans-serif;
  /* Consolas named so Windows keeps the same Latin mono as the English
     pages; otherwise 'Yu Gothic UI' would draw the digits. */
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'Noto Sans JP', monospace;
  /* The accent word keeps its colour but not the serif: Castoro has no
     Japanese, and the browser would fall back to a Mincho. It takes the
     heading's own weight, so only the colour sets it apart. */
  --font-accent: var(--font-sans); --fw-accent: var(--fw-semibold);

  --tracking: 0;              /* kana and kanji are set solid */
  --label-case: none;         /* labels stand out by weight and colour */
  --em-weight: var(--fw-semibold);  /* no italics: see :is(em, i) below */
  --char: 1em;

  /* 13px is the floor for Japanese text. */
  --fs-overline: 13px; --fs-label: 13px; --fs-label-sm: 13px; --fs-stat: 13px;

  --lh-body: 1.7; --lh-relaxed: 1.8;
  --lh-tight: 1.3; --lh-snug: 1.4; --lh-heading: 1.45;
  --lh-hero: 1.35; --lh-hero-page: 1.35; --lh-hero-split: 1.35;

  /* Display scale: about 60–65% of the English maximum. A Japanese character
     fills its whole em square, so the same size reads much larger. */
  --fs-hero: clamp(30px, 4.4vw, 48px);
  --fs-hero-page: clamp(26px, 3.2vw, 38px);
  --fs-hero-split: clamp(28px, 3.3vw, 40px);
  --fs-hero-split-sm: clamp(24px, 7vw, 30px);
  --fs-section: clamp(24px, 2.3vw, 28px);     --fs-section-sm: clamp(21px, 5.6vw, 26px);
  --fs-closing: clamp(24px, 2.9vw, 36px);     --fs-closing-sm: clamp(22px, 6.4vw, 28px);
  --fs-invite: clamp(24px, 2.6vw, 32px);      --fs-invite-sm: clamp(22px, 6.4vw, 28px);
  --fs-question: clamp(22px, 2.1vw, 26px);    --fs-question-sm: clamp(20px, 5.6vw, 24px);
  --fs-group: clamp(21px, 2vw, 24px);

  /* The robustness column may give way on a phone, where the label and score
     then stack. 132px is what forced the card wider than a 320px screen. */
  --sc-rob-min: min(132px, 40%);
}

/* Small kana and ー never start a line. */
:root:lang(ja) body { line-break: strict; }

/* Headings break between phrases, never inside a word, and even out their
   lines. auto-phrase is Chromium-only; elsewhere a <wbr> in the translation
   does the same job (i18n/README.md). */
:root:lang(ja) :is(h1, h2, h3, h4, h5, summary, .answer) { word-break: auto-phrase; text-wrap: balance; }

/* There is no Japanese italic; a browser would fake one by slanting. */
:root:lang(ja) :is(em, i) { font-style: normal; }

/* The violet period is a full-width 。 (or ？) whose glyph sits in one part
   of a 1em box. Proportional widths trim the empty part, so a centred
   heading stays centred (Hiragino, Yu Gothic, Meiryo, Noto: 。 1em → 0.5em;
   Yu Gothic UI's 。 is narrow already). */
:root:lang(ja) .hp-period { font-feature-settings: "palt"; }