/* Krija — coming soon.
   Tokens below are copied verbatim from the Krija design system
   (tokens/*.css). Page styles start at "PAGE". */

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Noto+Sans+Javanese&display=swap");

/* ---------- colors ---------- */
:root {
  --ink: #141414;
  --ink-soft: #3a3a3a;
  --stone: #8a8a8a;
  --stone-light: #c4c4c4;
  --paper: #fdfcfa;
  --white: #ffffff;
  --terracotta: #b3593e;
  --clay: #d98a6e;

  --ink-04: rgba(20, 20, 20, 0.04);
  --ink-08: rgba(20, 20, 20, 0.08);
  --ink-12: rgba(20, 20, 20, 0.12);
  --ink-24: rgba(20, 20, 20, 0.24);
  --paper-40: rgba(255, 255, 255, 0.4);
  --paper-55: rgba(255, 255, 255, 0.55);

  --text-primary: var(--ink);
  --text-body: var(--ink-soft);
  --text-muted: var(--stone);
  --text-accent: var(--terracotta);
  --text-inverse: var(--paper);
  --text-inverse-muted: var(--paper-55);

  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-sunken: var(--ink-04);
  --surface-inverse: var(--ink);
  --surface-accent: var(--terracotta);

  --border-hairline: var(--ink-12);
  --border-soft: var(--ink-08);
  --border-strong: var(--ink);
  --border-inverse: var(--paper-40);

  --focus-ring: var(--terracotta);
}

/* ---------- typography ---------- */
:root {
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-javanese: "Noto Sans Javanese", serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --text-display-xl: 88px;
  --text-display-lg: 54px;
  --text-display-md: 40px;
  --text-display-sm: 30px;
  --text-heading: 22px;
  --text-lead: 17px;
  --text-body-lg: 16px;
  --text-body: 15px;
  --text-small: 13.5px;
  --text-caption: 12px;
  --text-mono: 13px;
  --text-mono-sm: 11.5px;

  --tracking-display: -0.035em;
  --tracking-heading: -0.03em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;

  --leading-tight: 1;
  --leading-display: 1.1;
  --leading-snug: 1.45;
  --leading-body: 1.65;
}

/* ---------- spacing ---------- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 28px;
  --space-7: 36px;
  --space-8: 48px;
  --space-9: 56px;
  --space-10: 80px;
  --space-11: 110px;
  --space-12: 160px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --border-width: 1px;
  --container-wide: 1240px;
}

/* ---------- motion ---------- */
:root {
  --ease-weave: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;
  --duration-draw: 7s;
  --transition-ui: all var(--duration-base) var(--ease-weave);
}

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--clay); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ================= PAGE =================
   Reversed treatment: ink canvas, paper type, hairlines at
   rgba(253,252,250,0.14). Terracotta appears exactly three times —
   the status dot, the accent button, the section numerals. */

:root {
  --hair: rgba(253, 252, 250, 0.14);
  --muted: var(--paper-55);
  --gutter: 56px;
}

.bleed { width: 100%; }
.bleed > .inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.rule { border-top: 1px solid var(--hair); }

/* ---------- top bar ---------- */
.bar {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  font-weight: var(--weight-semibold);
  font-size: 22px;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--paper);
}

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: var(--space-9);
  align-items: center;
  padding: 110px 0 96px;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  border: 1px solid var(--terracotta);
  color: var(--clay);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
}
h1 {
  margin: 0;
  font-size: clamp(46px, 8.6vw, 92px);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: 0.98;
}
.hero-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-2);
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  color: var(--muted);
}

/* ---------- waitlist ---------- */
.waitlist {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
  max-width: 520px;
  width: 100%;
}
.waitlist.compact { max-width: 460px; }
.waitlist input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--text-body-lg);
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  outline: none;
  transition: var(--transition-ui);
}
.waitlist input::placeholder { color: var(--muted); }
.waitlist input:focus { border-color: var(--paper-40); }

.btn {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  transition: var(--transition-ui);
  padding: 15px 28px;
  font-size: var(--text-body-lg);
  white-space: nowrap;
  background: var(--surface-accent);
  color: var(--text-inverse);
}
.btn:hover { background: var(--clay); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* success state — replaces the form in place */
.joined {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border: 1px solid var(--hair);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  max-width: 520px;
}
.joined strong {
  color: var(--paper);
  font-weight: var(--weight-medium);
}
.joined .lines {
  display: flex;
  flex-direction: column;
}

/* the maker's chop — Javanese ꦏꦿꦶꦪ inside a hairline circle */
.chop {
  border-radius: 50%;
  flex: none;
  border: 2px solid var(--paper-40);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
}
.chop span {
  font-family: var(--font-javanese);
  font-size: 14px;
  line-height: 1.1;
  color: var(--paper);
  white-space: nowrap;
  transform: translateY(-2px);
}
.chop.sm { width: 38px; height: 38px; }
.chop.sm span { font-size: 10.3px; }

/* ---------- disciplines ---------- */
.section-title {
  font-size: var(--text-display-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
}
.disciplines { padding: 80px 0 96px; }
.disciplines .section-title {
  display: block;
  margin-bottom: var(--space-8);
}
.discipline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.discipline {
  border-top: 1px solid var(--paper-40);
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.discipline .num {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--clay);
}
.discipline h3 {
  margin: 0;
  font-size: var(--text-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}
.discipline p {
  margin: 0;
  color: var(--muted);
  line-height: var(--leading-body);
}

/* ---------- stay updated ---------- */
.updates {
  padding: 90px 0 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}
.updates-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.updates-copy .section-title {
  line-height: var(--leading-display);
  max-width: 18ch;
}
.updates-copy p {
  margin: 0;
  color: var(--muted);
  max-width: 44ch;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
}
.tags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-2);
}
.tags span {
  border: 1px solid var(--hair);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: var(--text-small);
  color: var(--muted);
}
.join-card {
  border: 1px solid var(--hair);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.join-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.join-card h2 {
  margin: 0;
  font-size: var(--text-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

/* ---------- footer ---------- */
.foot {
  padding: 44px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 72px 0 64px;
  }
  .hero-aside { display: none; }
  .updates {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: 64px 0 72px;
  }
  .discipline-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .disciplines { padding: 56px 0 64px; }
}

@media (max-width: 680px) {
  :root { --gutter: 24px; }
  .waitlist { flex-direction: column; }
  .btn { padding: 14px 24px; }
  .join-card { padding: var(--space-6); }
  .foot { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .section-title { font-size: var(--text-display-sm); }
}

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