/* Timeless Sans Grotesk, Timeless Free Font License 1.2 (licenses/). Do not redistribute. */
@font-face {
  font-family: "Timeless Grotesk";
  src: url("/fonts/TimelessSans-GroteskMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Timeless Grotesk";
  src: url("/fonts/TimelessSans-GroteskSemibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* kaurimark.com theme tokens. Values come from gui/themes/kaurimark-com.md. */
:root {
  color-scheme: light dark;

  --font-ui: "Timeless Grotesk", sans-serif;
  --weight-ui-regular: 500;
  --weight-ui-medium: 600;
  --weight-ui-heavy: 600;
  --font-brand: "Timeless Grotesk", sans-serif;
  --weight-brand-regular: 500;
  --weight-brand-medium: 600;
  --weight-brand-heavy: 600;

  --size-xxs: 11px;
  --line-xxs: 15px;
  --size-xs: 13px;
  --line-xs: 18px;
  --size-s: 15px;
  --line-s: 22px;
  --size-m: 18px;
  --line-m: 26px;
  --size-l: 26px;
  --line-l: 35px;
  --size-xl: 40px;
  --line-xl: 44px;
  --size-xxl: 53px;
  --line-xxl: 57px;

  --tracking-xs: -0.02em;
  --tracking-s: -0.01em;
  --tracking-m: 0em;
  --tracking-l: 0.01em;
  --tracking-xl: 0.02em;
  --letter-spacing-xxs: var(--tracking-xl);
  --letter-spacing-xs: var(--tracking-l);
  --letter-spacing-s: var(--tracking-l);
  --letter-spacing-m: var(--tracking-m);
  --letter-spacing-l: var(--tracking-s);
  --letter-spacing-xl: var(--tracking-s);
  --letter-spacing-xxl: var(--tracking-xs);

  --space-zero: 0px;
  --space-xxs: 5px;
  --space-xs: 10px;
  --space-s: 15px;
  --space-m: 20px;
  --space-l: 31px;
  --space-xl: 41px;
  --space-xxl: 61px;

  --radius-zero: 0px;
  --radius-xs: 6px;
  --radius-s: 12px;
  --radius-m: 16px;
  --radius-l: 23px;
  --radius-xl: 35px;
  --radius-full: 9999px;

  --border-shadow-s: 0 0 0 0 transparent;

  --shadow-none: none;
  --shadow-s: 0px 2px 4px 0px #00000000;
  --shadow-m: 0px 2px 6px 0px #0000000d, 0px 8px 24px 0px #00000013;
  --shadow-l: 0px 16px 48px 0px #00000000;

  --motion-duration: 400ms;
  --motion-easing: linear(0, 0.2375, 0.5904, 0.8358, 0.9599, 1.0061, 1.0152, 1.0116, 1.0062, 1.0025, 1.0006, 0.9999, 1);
  --motion-press-distance: 1px;
  --motion-large-duration: 600ms;
  --motion-large-easing: linear(0, 0.0846, 0.2691, 0.4778, 0.6674, 0.8179, 0.9249, 0.9926, 1.0293, 1.0442, 1.0452, 1.0388, 1.0296, 1.0202, 1.0121, 1.0061, 1.0019, 0.9995, 0.9983, 1);

  /* Site motion: fast press squish and entrance stagger. */
  --motion-press-scale: 0.97;
  --motion-press-duration: 160ms;
  --motion-press-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --motion-stagger: 50ms;

  --color-1: #5151fc;
  --color-1-transparent: #5151fc33;
  --error: #fc032d;

  --neutral-1: #ffffff;
  --neutral-2: #fbfbfc;
  --neutral-3: #f3f4f6;
  --neutral-4: #e5e7eb;
  --neutral-4-transparent: #e5e7eb33;
  --neutral-5: #c8ced5;
  --neutral-6: #9ca2a9;
  --neutral-7: #787e84;
  --neutral-8: #51565c;
  --neutral-9: #2f3439;
  --neutral-10: #000000;

  --cte-canvas: var(--neutral-1);
  --cte-surface: var(--neutral-2);
  --cte-text: var(--neutral-10);
  --cte-text-muted: var(--neutral-7);
  --cte-accent: var(--color-1);
  --cte-accent-text: var(--neutral-2);
  --cte-focus: var(--color-1);

  /* Site alias: theme muted text (neutral-7) is below 4.5:1 on the light card. */
  --text-secondary: var(--neutral-8);

  /* Site customization: the name uses SF Pro Rounded where the browser exposes it (Safari). */
  --font-name: ui-rounded, var(--font-brand);

  /* Structural layout, tunable in DialKit during development. */
  --card-width: 640px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --neutral-1: #000000;
    --neutral-2: #1c2026;
    --neutral-3: #272b31;
    --neutral-4: #393e43;
    --neutral-4-transparent: #393e4333;
    --neutral-5: #52575d;
    --neutral-6: #7e848a;
    --neutral-7: #a6acb3;
    --neutral-8: #cad0d7;
    --neutral-9: #f3f4f6;
    --neutral-10: #ffffff;

    --cte-accent-text: var(--neutral-9);
  }
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--cte-canvas);
}

body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  color: var(--cte-text);
  background: var(--cte-canvas);
  font-family: var(--font-ui);
  font-weight: var(--weight-ui-regular);
  font-synthesis: none;
  text-wrap: pretty;
}

.site-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--space-m);
}

.profile-card {
  width: min(100%, var(--card-width));
  padding: var(--space-xxl);
  background: var(--cte-surface);
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--border-shadow-s), var(--shadow-m);
}

h1 {
  margin: 0;
  font-family: var(--font-name);
  font-size: var(--size-xxl);
  font-weight: var(--weight-brand-heavy);
  line-height: var(--line-xxl);
  letter-spacing: var(--letter-spacing-xxl);
}

.introduction {
  max-width: 35rem;
  margin-top: var(--space-xl);
  font-size: var(--size-m);
  line-height: var(--line-m);
  letter-spacing: var(--letter-spacing-m);
}

.introduction p {
  margin: 0;
}

.introduction .availability {
  margin-top: var(--space-m);
  color: var(--text-secondary);
}

.projects {
  margin-top: var(--space-xl);
  font-size: var(--size-m);
  line-height: var(--line-m);
  letter-spacing: var(--letter-spacing-m);
}


.projects ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-xxs);
}

.projects a {
  color: var(--cte-text);
  font-weight: var(--weight-ui-medium);
  text-decoration-color: var(--cte-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.projects a:hover {
  color: var(--cte-accent);
}

.projects a:focus-visible {
  outline: 2px solid var(--cte-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.projects-note {
  margin: var(--space-s) 0 0;
  color: var(--text-secondary);
  font-size: var(--size-xs);
  line-height: var(--line-xs);
  letter-spacing: var(--letter-spacing-xs);
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
}

/* Theme Button: primary and secondary variants. */
.contact-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-l);
  border: 0;
  border-radius: var(--radius-s);
  font-family: var(--font-ui);
  font-size: var(--size-s);
  font-weight: var(--weight-ui-medium);
  line-height: var(--line-s);
  letter-spacing: var(--tracking-l);
  text-decoration: none;
  box-shadow: var(--shadow-none);
  transition:
    transform var(--motion-press-duration) var(--motion-press-easing),
    background-color var(--motion-duration) var(--motion-easing),
    box-shadow var(--motion-duration) var(--motion-easing);
}

.contact-primary {
  color: var(--cte-accent-text);
  background: var(--color-1);
}

.contact-primary:hover {
  box-shadow: var(--shadow-s);
}

.contact-secondary {
  color: var(--neutral-10);
  background: var(--color-1-transparent);
}

.contact-secondary:hover {
  background: var(--neutral-4-transparent);
}

.contact-links a:active {
  transform: scale(var(--motion-press-scale));
}

/* Both labels share one grid cell, so the button keeps its width when the label swaps. */
.contact-links .contact-primary {
  display: inline-grid;
  place-items: center;
}

.contact-label {
  grid-area: 1 / 1;
  transition:
    opacity var(--motion-press-duration) var(--motion-press-easing),
    transform var(--motion-duration) var(--motion-easing);
}

.contact-copied,
.contact-primary[data-copied] .contact-label:first-child {
  opacity: 0;
  transform: translateY(calc(-1 * var(--space-xs)));
}

.contact-copied {
  transform: translateY(var(--space-xs));
}

.contact-primary[data-copied] .contact-copied {
  opacity: 1;
  transform: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Entrance: the card rises in, then its sections follow in order. */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-s)) scale(var(--motion-press-scale));
  }
}

@keyframes rise-in-small {
  from {
    opacity: 0;
    transform: translateY(var(--space-xs));
  }
}

.profile-card {
  animation: rise-in var(--motion-large-duration) var(--motion-large-easing) both;
}

.profile-card > * {
  animation: rise-in-small var(--motion-large-duration) var(--motion-large-easing) both;
  animation-delay: calc(var(--motion-stagger) * (var(--order) + 2));
}

.profile-card > :nth-child(1) { --order: 1; }
.profile-card > :nth-child(2) { --order: 2; }
.profile-card > :nth-child(3) { --order: 3; }
.profile-card > :nth-child(4) { --order: 4; }
.profile-card > :nth-child(5) { --order: 5; }

.contact-links a:focus-visible {
  outline: 2px solid var(--cte-focus);
  outline-offset: 2px;
}

footer {
  margin-top: var(--space-xxl);
  color: var(--text-secondary);
  font-size: var(--size-xs);
  line-height: var(--line-xs);
  letter-spacing: var(--letter-spacing-xs);
}

@media (max-width: 31rem) {
  .site-shell {
    place-items: stretch;
    padding: var(--space-xs);
  }

  .profile-card {
    min-height: calc(100svh - 2 * var(--space-xs));
    display: flex;
    flex-direction: column;
    padding: var(--space-l) var(--space-m);
    border-radius: var(--radius-l);
  }

  h1 {
    font-size: var(--size-xl);
    line-height: var(--line-xl);
    letter-spacing: var(--letter-spacing-xl);
  }

  .contact-links {
    align-items: stretch;
    flex-direction: column;
  }

  footer {
    margin-top: auto;
    padding-top: var(--space-xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-links a,
  .contact-label {
    transition: opacity var(--motion-press-duration) ease;
  }

  .contact-links a:active,
  .contact-label,
  .contact-primary[data-copied] .contact-label {
    transform: none;
  }

  @keyframes rise-in {
    from { opacity: 0; }
  }

  @keyframes rise-in-small {
    from { opacity: 0; }
  }

  .profile-card > * {
    animation-delay: 0ms;
  }
}