:root {
  --ink-50: #f7f1e8;
  --ink-100: #efe6d8;
  --ink-200: #e0d5c4;
  --ink-300: #c8baa6;
  --ink-400: #aa9780;
  --ink-500: #88755f;
  --ink-600: #695846;
  --ink-700: #4d4033;
  --ink-800: #342a22;
  --ink-900: #1d1813;
  --ink-950: #14110d;
  --shadow-card: 0 1px 0 rgba(20, 17, 13, 0.05), 0 16px 40px rgba(20, 17, 13, 0.05);
}

html {
  background: var(--ink-50);
}

body {
  color: var(--ink-900);
  background:
    radial-gradient(circle at top, rgba(217, 119, 87, 0.08), transparent 34%),
    radial-gradient(circle at 15% 0%, rgba(120, 140, 93, 0.05), transparent 24%),
    linear-gradient(180deg, #faf6ef 0%, #f6f1e8 48%, #f2ece2 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.22), transparent 18%),
    radial-gradient(circle at 85% 0%, rgba(106, 155, 204, 0.04), transparent 20%);
  z-index: 0;
}

.site-frame {
  position: relative;
  z-index: 1;
}

header a.font-serif.text-section {
  font-family: "EB Garamond Variable", serif;
  font-size: clamp(1.9rem, 2.2vw, 2.15rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink-950);
}

.text-body {
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-800);
}

.text-small {
  font-size: 13px;
  color: var(--ink-600);
}

.studio-hero .text-hero {
  max-width: 10.8ch;
  margin-inline: auto;
  color: var(--ink-950);
  font-size: clamp(2.55rem, 3.85vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
  text-wrap: balance;
}

.studio-hero .text-body {
  max-width: 33ch;
  margin-inline: auto;
}

h2.text-section.font-serif {
  font-family: "EB Garamond Variable", serif;
  font-size: clamp(1.95rem, 2.2vw, 2.35rem);
  letter-spacing: -0.03em;
  color: var(--ink-950);
}

.studio-section-copy .text-body {
  max-width: 58ch;
}

.studio-card {
  background: rgba(255, 251, 245, 0.58);
  border: 1px solid rgba(29, 24, 19, 0.07);
  box-shadow: var(--shadow-card);
}

.studio-card .text-ink-500 {
  color: #b56f52;
}

.studio-card .text-ink-600 {
  color: var(--ink-600);
}

.studio-card li span:last-child {
  color: var(--ink-800);
}

.studio-footer {
  border-top: 1px solid rgba(29, 24, 19, 0.08);
  padding-top: 1.9rem;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  padding: 0.6rem 0.9rem;
  background: rgba(255, 251, 245, 0.96);
  color: var(--ink-950);
  border: 1px solid rgba(29, 24, 19, 0.12);
  box-shadow: 0 10px 24px rgba(20, 17, 15, 0.08);
  text-decoration: none;
  transition: top 140ms ease;
}

.skip-link:focus-visible {
  top: 1rem;
  outline: 2px solid rgba(102, 115, 133, 0.45);
  outline-offset: 2px;
}

.underline,
[data-slot="tooltip-trigger"] {
  text-decoration-color: rgba(217, 119, 87, 0.42);
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.underline:hover,
[data-slot="tooltip-trigger"]:hover {
  text-decoration-color: rgba(217, 119, 87, 0.78);
}

::selection {
  background: rgba(217, 119, 87, 0.22);
  color: var(--ink-950);
}