/* Karya · home page.
 *
 * The page IS slide 1 of the pitch deck — nothing else. Every number below was
 * measured off a 1500x844 render of that slide and is expressed in --u, one
 * hundredth of the slide's width, so the whole composition scales as a unit.
 * Reference measurements at 1500x844 (--u = 15px):
 *
 *   margin 95   mark 47   wordmark 21.5 / 0.18em tracked   gap to mark 20
 *   headline 100.4 / 105 leading      lockup -> headline 64
 *   sub 34.4 / 47 leading             headline -> sub 47
 *   bg #0a0b0d   cream #f2efe9   muted #9aa0a8   accent #c9a0f5
 *
 * --u tracks the smaller of width and height against the slide's 16:9, so a
 * short window shrinks the type rather than pushing the CTA off the fold.
 */

:root {
  --ink:    #0a0b0d;
  --cream:  #f2efe9;
  --muted:  #9aa0a8;
  --accent: #c9a0f5;

  --u: clamp(6.4px, min(1vw, 1.7773vh), 20px);

  --margin: calc(var(--u) * 6.33);

  /* The mark's art fills only 58.4 of its 64-unit viewBox, so its box runs
     4.38% wider than the ink on each side — hence the pull-back below. */
  --mark: calc(var(--u) * 3.43);
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--margin);
  background: var(--ink);
  color: var(--cream);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── the slide ───────────────────────────── */

/* Centred in the space above the links row. The block runs taller than the
   slide's — it carries the CTA the slide has no need for — so it settles a
   touch above dead centre, which is where a title block wants to sit anyway. */
.slide {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.lockup {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.18);
  margin-bottom: calc(var(--u) * 3.27);
}

.lockup svg {
  width: var(--mark);
  height: auto;
  display: block;
  margin-left: calc(var(--mark) * -0.0438);   /* ink flush to the margin */
}

.wordmark {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(var(--u) * 1.43);
  letter-spacing: 0.18em;
  color: var(--cream);
}

/* The max-widths are the deck's own measures — wide enough for its longest
   line, too narrow for the next word. That is what holds the two-line breaks
   ("The Enterprise / Software Factory") without hard-coding a <br>. */
h1 {
  margin: 0;
  font-size: calc(var(--u) * 6.69);
  font-weight: 600;
  line-height: 1.046;
  letter-spacing: -0.021em;
  max-width: calc(var(--u) * 52);
}

.sub {
  margin: calc(var(--u) * 2.77) 0 0;
  font-size: calc(var(--u) * 2.293);
  line-height: 1.366;
  color: var(--muted);
  max-width: calc(var(--u) * 58);
}

/* ─── the one CTA ─────────────────────────── */

.cta {
  display: inline-block;
  margin-top: calc(var(--u) * 3.4);
  padding: 0.72em 1.5em;
  border: 1px solid rgba(242, 239, 233, 0.28);
  border-radius: 999px;
  font-size: calc(var(--u) * 1.32);
  line-height: 1;
  color: var(--cream);
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cta:hover,
.cta:focus-visible {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}

/* ─── quiet links, out of the composition ─── */

.links {
  display: flex;
  gap: calc(var(--u) * 2);
  padding-top: calc(var(--u) * 3.4);
  font-size: calc(var(--u) * 1.06);
}

.links a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.18s ease;
}

.links a:hover,
.links a:focus-visible { color: var(--cream); }

:where(a):focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

/* Portrait and phone widths: the slide's measures stop being reachable, so the
   type is set against the viewport width instead and the lines break freely. */
@media (max-width: 720px) {
  :root { --margin: max(24px, 6.4vw); --mark: 9.5vw; }

  h1 {
    font-size: clamp(34px, 9.6vw, 62px);
    line-height: 1.06;
    max-width: none;
  }
  .wordmark { font-size: clamp(11px, 3.1vw, 15px); }
  .lockup   { gap: 3.2vw; margin-bottom: clamp(24px, 7vw, 44px); }
  .sub      { font-size: clamp(15px, 4.2vw, 24px); margin-top: clamp(18px, 5vw, 32px); max-width: 34ch; }
  .cta      { font-size: clamp(14px, 3.6vw, 18px); margin-top: clamp(26px, 7vw, 44px); }
  .links    { font-size: clamp(13px, 3.3vw, 16px); gap: 22px; padding-top: clamp(28px, 7vw, 44px); }
}

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