/* Inkling page styles */

/* Page layout adjustments: hero owns the viewport, like Tinker */
body:has(.inkling-hero-section) #main {
  padding-top: 0;
  max-width: none;
  animation: fadeIn 0.3s ease-in-out;
}

body:has(.inkling-hero-section) #main article.content {
  margin: 0;
  padding: 0;
  max-width: none;
}

/* Hero section - full viewport width edge-to-edge.
   Viewport-height hero (owns the screen), matching the Tinker page. */
.inkling-hero-section {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* #wrapper reserves --site-header-height of top padding for the fixed header
     (at every breakpoint), so the hero gets the *remaining* viewport. A plain
     100vh box overflows the first screenful by the header height, which both
     skews the flex centering and lets the next section peek above the fold.
     No extra padding: any asymmetric padding shifts the centered content.
     Vertical centering comes from the child's margin-block:auto rather than
     justify-content:center — auto margins collapse to zero when content
     overflows the box, so a too-short viewport pushes content *down* into
     scroll instead of up underneath the fixed header. */
  min-height: calc(100vh - var(--site-header-height));
  /* Break out to full viewport width */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.inkling-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding-inline: 1.25rem;
  box-sizing: border-box;
}

/* Overflow-safe vertical centering within the hero section (see above).
   Extra specificity: typography.css's `.content :last-child { margin-bottom: 0 }`
   would zero the bottom auto margin and shove the content to the bottom edge. */
.content .inkling-hero-section > .inkling-hero {
  margin-block: auto;
}

/* Interactive artwork stage: generative ink-blob engine (js/inkling.js).
   The renderer builds the <svg> inside any .inkling container, so styles are
   class-based and reused by the landing hero, blog posts, and the dev editor. */
.inkling {
  display: block;
  /* Reserve space (SVG viewBox is 660×440) so the JS-mounted or fallback SVG
     never shifts surrounding layout on slow loads. */
  aspect-ratio: 3 / 2;
}

/* "Deferred" = no inline fallback (e.g. the randomized landing hero): the
   artwork can only exist with JS, so hide it until the renderer mounts, then
   fade it in. Space stays reserved (aspect-ratio) so there's no layout shift. */
.inkling--deferred {
  opacity: 0;
}
/* No JS: a deferred instance can never render — remove it entirely, no gap. */
html.no-js .inkling--deferred {
  display: none;
}
/* Reveal once mounted (matches the Tinker fade-in convention). */
.inkling--deferred.inkling--ready {
  animation: inkling-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes inkling-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .inkling--deferred.inkling--ready { animation: none; opacity: 1; }
}

.inkling svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  /* Keep vertical page scroll working on touch; taps still commit marks */
  touch-action: pan-y;
  /* Contain the black-mode difference blend within the stage */
  isolation: isolate;
}

.inkling svg path {
  fill-rule: evenodd;
  pointer-events: none;
}

/* Landing hero sizing. Negative top margin nudges the artwork up to absorb the
   composition's built-in negative space, tightening the gap above it.
   Width is fluid against viewport *height* too (aspect ratio is 3:2, so
   height = width / 1.5): the third min() term keeps artwork + text block
   (~370px incl. header clearance) inside one screenful, shrinking the shape
   on short windows instead of letting centering push it under the header.
   The 240px clamp floor keeps it legible; if a viewport is shorter than even
   that allows, the hero's overflow-safe centering yields scroll, not overlap. */
.inkling-hero .inkling-artwork {
  width: clamp(240px, min(88vw, (100vh - 370px) * 1.5), 600px);
  margin: -1.75rem 0 1.25rem;
}

/* On short viewports the hero's auto margins collapse to zero, so the negative
   nudge would pull the artwork's box up underneath the fixed header (the
   composition is randomized, so its top whitespace can't be relied on). */
@media (max-height: 700px) {
  .inkling-hero .inkling-artwork {
    margin-top: 0;
  }
}

/* Calmer, smaller treatment for blog posts (shortcode default) */
.inkling-calm {
  width: min(440px, 100%);
  margin: 2rem auto;
}

/* Announcement CTA: center it and separate it from the introductory copy. */
#main.post.post-introducing-inkling article.content .inkling-intro-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  padding-bottom: 2.5rem;
}

/* Match the optical spacing used by the Tinker CTA component. */
#main.post.post-introducing-inkling article.content .inkling-intro-cta .btn.primary {
  margin-right: 1.4em;
}

/* Lead/cover graphic for a blog or news post (fills the .post-cover slot) */
.inkling-cover {
  width: 100%;
  margin: 0 auto;
}

.inkling-hero .inkling-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  font-feature-settings: "ss05";
  line-height: normal;
  color: var(--fg);
  margin: 0 0 1.25rem;
}

/* Specificity matches the global non-blog h1 rule in typography.css */
#main.content article.content h1.inkling-title,
.inkling-hero .inkling-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 4vw, 2.943rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--fg);
  text-align: center;
  max-width: none;
  margin: 0 0 1.25rem;
}

.inkling-hero .inkling-subtitle {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.625;
  /* Solid dark-gray (not opacity) so the hero fade-in can't leave it a
     different shade than the other secondary text. Matches the CTA-band body. */
  color: color-mix(in srgb, var(--fg) 80%, var(--bg));
  text-wrap: balance;
  max-width: 44ch;
  margin: 0 0 1.25rem;
}

.inkling-hero .inkling-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  margin: 0.75rem 0 0;
}
/* Optical balance (mirrors Tinker): no column-gap — the primary gets a right
   margin and the plain chevron buttons rely on their own padding. */
#main.content article.content .inkling-cta-row .btn.primary { margin-right: 1.4em; }

/* Hero reveal: text starts visible (no-JS safe); JS adds .animate-in to replay
   it as a staggered fade-up, matching the Tinker fade-in convention. The
   artwork itself fades in separately when the renderer mounts (.inkling--ready). */
.inkling-hero.animate-in .inkling-eyebrow,
.inkling-hero.animate-in .inkling-title,
.inkling-hero.animate-in .inkling-subtitle,
.inkling-hero.animate-in .inkling-cta-row {
  opacity: 0;
  animation: inkling-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.inkling-hero.animate-in .inkling-eyebrow { animation-delay: 0.10s; }
.inkling-hero.animate-in .inkling-title { animation-delay: 0.18s; }
.inkling-hero.animate-in .inkling-subtitle { animation-delay: 0.26s; }
.inkling-hero.animate-in .inkling-cta-row { animation-delay: 0.34s; }
@media (prefers-reduced-motion: reduce) {
  .inkling-hero.animate-in .inkling-eyebrow,
  .inkling-hero.animate-in .inkling-title,
  .inkling-hero.animate-in .inkling-subtitle,
  .inkling-hero.animate-in .inkling-cta-row { animation: none; opacity: 1; }
}

/* The authoring editor (dev-only) injects its own styles from
   content/tools/inkling/editor.js, so no editor CSS ships to production. */

/* ============================================================
   Landing page sections (mirrors the Tinker multi-section layout, in the
   .inkling-* namespace). The landing renders as #main.content (not a post),
   so selectors are scoped to that. Section reveal reuses the shared
   .scroll-fade convention (JS in single.html toggles .is-visible).
   ============================================================ */

/* Centered content measure for the below-hero sections. */
.inkling-section {
  width: 100%;
  max-width: 1000px;
  margin: 8rem auto 0;
  /* No side padding: #main already supplies the page gutter, so adding more
     here double-insets the content (worst on mobile). */
  box-sizing: border-box;
}
@media (max-width: 640px) {
  .inkling-section { margin-top: 6rem; }
}
/* The first section inherits the standard 8rem section gap, matching the
   spacing below it, so "Model at a glance" sits evenly between hero and
   the next section. */
.inkling-customize-section { margin-top: 10rem; }
@media (max-width: 640px) {
  .inkling-customize-section { margin-top: 7.5rem; }
}

/* Section heading (serif, centered) — specific enough to beat .content h2. */
#main.content article.content .inkling-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.65rem;
  line-height: 1.25;
  text-align: center;
  color: var(--fg);
  max-width: none;
  /* Generous gap to whatever follows (grid, chart, band body). */
  margin: 0 0 2rem;
}
.inkling-section .inkling-h2-sub {
  font-family: var(--font-sans);
  text-align: center;
  color: color-mix(in srgb, var(--fg) 80%, var(--bg));
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: balance;
  max-width: 44ch;
  margin: 0 auto 2.5rem;
}

/* Hairline divider between bands. */
.inkling-divider {
  width: 80px;
  height: 1px;
  background: var(--fg4);
  opacity: 0.35;
  margin: 6rem auto 0;
  border: 0;
}

/* Scroll-reveal (shared convention with Tinker). JS adds .scroll-fade at
   runtime so no-JS users still see content; .is-visible reveals it. */
.scroll-fade {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-fade.is-visible { opacity: 1; transform: translateY(0); }
.scroll-fade.in-viewport-on-load {
  transform: translateY(0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-fade { opacity: 1; transform: none; transition: none; }
}

/* --- Icon + text feature grid (model specs + capabilities overview).
   Quiet, left-aligned cards mirroring the Tinker "four functions" row. --- */
.inkling-features {
  display: grid;
  gap: 2.6rem 2.94rem;
  margin: 0.5rem auto 0;
  text-align: left;
}
.inkling-features--specs { grid-template-columns: repeat(4, 1fr); }
.inkling-features--caps { grid-template-columns: repeat(3, 1fr); }
.inkling-feature-icon {
  width: 24px;
  height: 24px;
  color: var(--fg2);
  transition: transform 0.3s ease;
}
.inkling-feature-icon svg { width: 24px; height: 24px; display: block; }
.inkling-feature:hover .inkling-feature-icon { transform: translateY(-4px); }
.inkling-feature-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.inkling-feature-body {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--fg3);
}
@media (max-width: 860px) {
  .inkling-features--specs,
  .inkling-features--caps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  /* Specs are short — keep them two-up even on the narrowest phones. */
  .inkling-features--specs { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 1.5rem; }
  .inkling-features--caps { grid-template-columns: 1fr; gap: 2rem; }
}



/* --- "Customize with Tinker" CTA band --- */
.inkling-cta-band {
  text-align: center;
  padding: 0;
}
.inkling-cta-band .inkling-cta-band-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--fg) 80%, var(--bg));
  text-wrap: balance;
  max-width: 44ch;
  margin: 0 auto;
}
.inkling-cta-band .inkling-cta-actions {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* typography.css applies margin-bottom to bare div/p/hN inside article.content,
   which leaks into these grid/card components (e.g. pushing model-card cells up
   and exposing the container hairline as thick bands). Reset within landing
   sections, then restore the intended spacing at higher specificity. */
#main.content article.content .inkling-section :is(div, p, h3) {
  margin-top: 0;
  margin-bottom: 0;
}
#main.content article.content .inkling-section .inkling-h2-sub { margin: 0 auto 2.5rem; }
#main.content article.content .inkling-section .inkling-cta-band-body { margin: 0 auto; }
#main.content article.content .inkling-section .inkling-cta-actions { margin-top: 1.5rem; }
#main.content article.content .inkling-section .inkling-cta-art { margin: 0 auto 2.5rem; }
/* icon + text feature grid */
#main.content article.content .inkling-section .inkling-features { margin: 0.5rem auto 0; }
/* Specs grid has no subhead, so give it more air below the heading. */
#main.content article.content .inkling-section .inkling-features--specs { margin-top: 3.25rem; }
/* Give the capability grid breathing room: clear of the benchmark legend
   above and the customize band below. */
#main.content article.content .inkling-section .inkling-features--caps { margin-top: 9rem; margin-bottom: 6rem; }
#main.content article.content .inkling-section .inkling-feature-icon { margin: 0 0 0.9rem; }
#main.content article.content .inkling-section .inkling-feature-title { margin: 0 0 0.3rem; }
#main.content article.content .inkling-section .inkling-feature-body { margin: 0; }

/* Tinker artwork above the "Customize it with Tinker" copy. */
.inkling-cta-art {
  max-width: 200px;
  margin: 0 auto 2.5rem;
}
.inkling-cta-art img,
.inkling-cta-art svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Bookend CTA at the foot of the page (mirror the hero actions, centered). */
.inkling-endcta { text-align: center; }
.inkling-endcta .inkling-h2 { margin-bottom: 1.5rem; }
.inkling-endcta .inkling-cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 0;
  flex-wrap: wrap;
}

/* Chevron buttons (ported from tinker.css; tinker.css doesn't load here). */
.btn-with-chevron { display: inline-flex; align-items: center; gap: 0.25rem; }
.btn-with-chevron svg { width: 16px; height: 16px; transition: transform 0.2s ease-in-out; }
.btn-with-chevron svg path { fill: currentColor; opacity: 0.4; transition: opacity 0.2s ease-in-out; }
.btn-with-chevron:hover svg { transform: translateX(3px); }
.btn-with-chevron:hover svg path { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .btn-with-chevron svg { transition: none; }
}