/* tting.ai — shared page chrome on top of the merged tting design system
   (assets/styles.css). Page-specific layout stays inline in each page body;
   this file carries only what every page repeats: ground, nav, dropdowns,
   and the article typography the content templates render into. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  text-wrap: pretty;
  background:
    radial-gradient(1200px 720px at 82% -160px, color-mix(in srgb, var(--color-neutral-800) 80%, transparent), transparent 60%),
    var(--color-bg);
}
/* The home page layers a second, lower glow under the first. */
body.home {
  background:
    radial-gradient(1200px 720px at 82% -160px, color-mix(in srgb, var(--color-neutral-800) 80%, transparent), transparent 60%),
    radial-gradient(1100px 800px at -10% 100%, color-mix(in srgb, black 30%, transparent), transparent 55%),
    var(--color-bg);
}

a { color: var(--color-text); }
a:hover { color: var(--color-accent); }

/* — nav & dropdown menus — */
.site-nav {
  position: relative; z-index: 10;
  padding-inline: max(clamp(24px, 6vw, 110px), calc((100% - 1200px) / 2 + clamp(24px, 6vw, 110px)));
}
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; white-space: nowrap; font-size: 14px; color: var(--color-text); }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary::after { content: "\25BE"; font-size: 9px; margin-left: 6px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.dd[open] > summary, .dd > summary:hover { color: var(--color-accent); }
.dd-menu {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 230px; display: grid;
  background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700);
  border-radius: var(--radius-md); padding: var(--space-2); box-shadow: var(--shadow-md); z-index: 60;
}
.dd-menu a { display: block; padding: 7px 10px; border-radius: var(--radius-sm); text-decoration: none; font-size: 14px; line-height: 20px; }
.dd-menu a:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.dd-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); padding: 10px 10px 4px; }
.nav-mobile { display: none; margin-left: auto; }
@media (max-width: 860px) {
  .dd-desktop { display: none; }
  .nav-mobile { display: block; }
  .site-nav .btn-ghost { display: none; }
}

/* — shared page primitives the designs repeat — */
.kicker {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-accent); margin: 0 0 14px;
}
.kicker::before { content: ""; width: 44px; height: 1px; background: var(--color-accent); }
.rule {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-divider) 48px calc(100% - 48px), transparent);
}

/* — article typography: what src/content markdown renders into — */
.article { max-width: 760px; margin: 0 auto; padding: 0 clamp(24px, 6vw, 110px) 56px; display: flex; flex-direction: column; min-height: calc(100dvh - 90px); box-sizing: border-box; }
.article-header { padding: 70px 0 28px; }
.article-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(32px, 4.2vw, 48px); line-height: 1.18; letter-spacing: -0.015em;
  margin: 0; color: var(--color-text);
}
.article-meta {
  font-size: 13px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: 28px 0 0; font-feature-settings: 'tnum' 1;
}
.article-body { font-size: 16px; line-height: 30px; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.article-body > p { margin: 0 0 28px; max-width: 62ch; }
.article-body > p:first-child { font-size: 17px; color: var(--color-text); }
.article-body h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: 32px; letter-spacing: -0.01em;
  margin: 42px 0 14px; color: var(--color-text);
}
.article-body h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; line-height: 28px; margin: 42px 0 14px; color: var(--color-text);
}
.article-body ul, .article-body ol { margin: 0 0 28px; padding-left: 20px; max-width: 62ch; }
.article-body li { margin: 0 0 6px; }
.article-body pre {
  font-size: 14px; line-height: 24px; color: var(--color-accent-300);
  background: color-mix(in srgb, var(--color-neutral-900) 70%, transparent);
  border: 1px solid var(--color-neutral-700); border-radius: var(--radius-md);
  padding: var(--space-4); margin: 0 0 28px; overflow-x: auto;
}
.article-body code { color: var(--color-accent-300); }
.article-body pre code { color: inherit; }
.article-body blockquote {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; line-height: 34px; letter-spacing: -0.01em; color: var(--color-text);
  border-left: 2px solid var(--color-accent); padding-left: var(--space-6);
  margin: 42px 0; max-width: 30ch;
}
.article-body blockquote p { margin: 0; }
.article-body img { border-radius: var(--radius-md); margin: 0 0 28px; }
.article-body a { color: var(--color-accent-300); }
.article-back { font-size: 15px; line-height: 28px; color: var(--color-accent-300); }

/* — listing column shared by blog/release/insights — */
.listing { max-width: 1000px; margin: 0 auto; padding: 0 clamp(24px, 6vw, 110px) 56px; display: flex; flex-direction: column; min-height: calc(100dvh - 90px); box-sizing: border-box; }
.listing-header { padding: 70px 0 42px; }
.listing-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(36px, 4.5vw, 56px); line-height: 1.15; letter-spacing: -0.015em;
  margin: 0; color: var(--color-text);
}
.page-footer {
  margin-top: auto; padding: 56px 0 0;
  font-size: 13px; line-height: 28px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}