/* ===================================================================
   Kynd — project intro page
   Built on the root site's tokens (../../styles.css loads first:
   --ink, --accent, --font-display/body, --s1..s7, --r-* radii,
   --shadow-card/lift, --ease). This file adds Kynd's own warm
   palette, used only here, and the page's layout.

   The page runs white → cream → brown, getting warmer as you move
   down it, so the palette shift does the work a stack of section
   dividers would otherwise have to do.
   =================================================================== */

:root {
  /* Sampled from the live product so the page and the screenshots
     sit in the same world rather than approximating it. */
  --k-cream: #F2ECE3;        /* Kynd page / rail background */
  --k-cream-line: #E2D8C9;   /* hairline on cream */
  --k-brown: #412921;        /* Kynd brand brown (the Create button) */
  --k-ink: #241A14;

  --k-on-brown: #F2ECE3;
  --k-on-brown-soft: rgba(242, 236, 227, 0.70);
  --k-on-brown-line: rgba(242, 236, 227, 0.18);

  --k-wrap: 74rem;
}

.kynd-body { background: var(--paper); color: var(--k-ink); }

.k-wrap {
  width: 100%;
  max-width: var(--k-wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 640px) { .k-wrap { padding-inline: 2rem; } }

/* ---------------------------------------------------------------
   Reveal — one behaviour, matching the root site's .reveal
--------------------------------------------------------------- */

.js .k-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js .k-reveal-2 { transition-delay: 0.12s; }
.js .k-reveal.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------
   Header / footer — same slim chrome as the other project page
--------------------------------------------------------------- */

.kynd-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.kynd-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding-block: 0.8rem;
}

.kynd-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-faint);
  transition: color 0.2s var(--ease);
}

.kynd-back:hover { color: var(--k-ink); }

.kynd-back .icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kynd-header-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.label-short { display: none; }

@media (max-width: 480px) {
  .label-full { display: none; }
  .label-short { display: inline; }
}

.kynd-footer {
  background: var(--k-brown);
  color: var(--k-on-brown-soft);
  padding-block: var(--s3);
  border-top: 1px solid var(--k-on-brown-line);
}

.kynd-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2);
  font-size: 0.85rem;
}

.kynd-footer a {
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.kynd-footer a:hover { color: var(--k-on-brown); border-color: currentColor; }
.kynd-footer :focus-visible { outline-color: var(--k-cream); }

/* ---------------------------------------------------------------
   Buttons — root .btn geometry, Kynd colours
--------------------------------------------------------------- */

.k-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border-radius: var(--r-pill);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease),
              box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}

.k-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.k-btn:active { transform: translateY(0); }

.k-btn-dark { background: var(--k-brown); color: var(--k-cream); }
.k-btn-dark:hover { background: var(--k-ink); }

.k-btn-light { background: var(--k-cream); color: var(--k-brown); }
.k-btn-light:hover { background: #FFFFFF; }

.k-arrow { display: inline-block; transition: transform 0.2s var(--ease); }
.k-btn:hover .k-arrow { transform: translateX(3px); }

/* ---------------------------------------------------------------
   1. Hero
--------------------------------------------------------------- */

.k-hero { padding-block: var(--s4) var(--s5); }

.k-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--s3);
}

.k-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--k-brown);
}

.k-pill {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
  background: var(--k-cream);
  padding: 0.32rem 0.75rem;
  border-radius: var(--r-pill);
}

.k-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 15ch;
  margin-bottom: var(--s3);
}

.k-lede {
  font-size: clamp(1.02rem, 0.96rem + 0.32vw, 1.18rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 36rem;
  margin-bottom: var(--s4);
}

/* Product stage. The main shot is nudged right and the Discover crop
   sits in the gutter that opens up on the left, so the composition is
   asymmetric without anything having to overflow the page. */

.k-stage { position: relative; }

.k-shot {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--k-cream);
  box-shadow: var(--shadow-card);
}

.k-shot img { width: 100%; }

.k-shot-main { border: 1px solid var(--k-cream-line); }

/* Below 700px the inset is a 350px-wide strip of two cards, which is
   too small to read. It exists for the desktop composition, so it
   steps out rather than shrinking into noise. */
.k-shot-inset { display: none; }

@media (min-width: 700px) {
  .k-shot-inset {
    display: block;
    border: 6px solid var(--paper);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-lift);
    margin-top: var(--s3);
  }
}

.k-hero .k-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}

@media (min-width: 900px) {
  .k-hero .k-wrap { gap: var(--s5); }

  .k-stage {
    width: 88%;
    margin-left: auto;      /* opens the left gutter for the inset */
    padding-bottom: 3.5rem; /* room for the overhang */
  }

  .k-shot-inset {
    position: absolute;
    left: -12%;
    bottom: 0;
    width: 40%;
    margin-top: 0;
    transform: rotate(-2.5deg);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  }
}

@media (min-width: 900px) and (hover: hover) {
  .k-shot-inset:hover { transform: rotate(0deg) translateY(-4px) scale(1.02); }
}

@media (min-width: 1200px) {
  .k-hero .k-wrap { gap: var(--s4); }
  .k-hero-copy { max-width: 46rem; }
}

/* ---------------------------------------------------------------
   2. Why I built it + thesis  (cream)
--------------------------------------------------------------- */

.k-why {
  background: var(--k-cream);
  border-radius: var(--r-band) var(--r-band) 0 0;
  padding-block: var(--s6);
}

.k-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  align-items: start;
}

@media (min-width: 960px) {
  .k-why-grid { grid-template-columns: 0.95fr 1.05fr; gap: var(--s6); }
}

.k-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-text);
  margin-bottom: 0.75rem;
}

.k-kicker-light { color: var(--accent); }

.k-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--s3);
  max-width: 18ch;
}

.k-body {
  color: var(--ink-soft);
  max-width: 34rem;
  margin-bottom: var(--s2);
}

.k-quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--k-brown);
  margin: var(--s3) 0 0;
  padding-left: var(--s3);
  border-left: 3px solid var(--accent);
  max-width: 30rem;
}

/* Thesis graphic */

.k-thesis {
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s3);
  box-shadow: var(--shadow-card);
}

@media (min-width: 640px) { .k-thesis { padding: var(--s4); } }

.k-model-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-faint);
  margin-bottom: 0.8rem;
}

.k-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}

.k-chain li {
  position: relative;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--paper-soft);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
}

/* The arrow sits in the gap after each node rather than inside the
   pill. Trailing rather than leading, so when the chain wraps the
   arrow ends the line it belongs to instead of dangling at the start
   of the next one. */
.k-chain li:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  right: -1.15rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--line-strong);
  font-weight: 500;
}

.k-chain-strong li {
  background: var(--k-brown);
  border-color: var(--k-brown);
  color: var(--k-cream);
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
}

.k-chain-strong li:not(:last-child)::after { color: var(--k-brown); }

.k-model-turn {
  font-size: 1.3rem;
  line-height: 1;
  color: var(--line-strong);
  margin: var(--s3) 0 var(--s3) 0.6rem;
}

/* The one-time thesis transition: the old model settles back and
   dims, the Kynd model comes forward node by node. Nothing is
   hidden by it — with motion off, both models are simply present. */

.js .k-model-old,
.js .k-model-turn { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }

.js .k-reveal .k-model-old { opacity: 1; transform: none; }

.js .k-reveal.is-visible .k-model-old {
  opacity: 0.55;
  transform: translateY(-4px) scale(0.985);
  transform-origin: left center;
}

.js .k-reveal .k-chain-strong li {
  opacity: 0;
  transform: translateY(10px);
}

.js .k-reveal.is-visible .k-chain-strong li {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  transition-delay: calc(0.25s + var(--i) * 0.07s);
}

/* ---------------------------------------------------------------
   3. Takeaways + try it  (brown)
--------------------------------------------------------------- */

/* Pulled up by one corner-radius so the rounded top sits on the cream
   section above it rather than exposing the white page behind. */
.k-close {
  background: var(--k-brown);
  color: var(--k-on-brown);
  border-radius: var(--r-band) var(--r-band) 0 0;
  margin-top: calc(var(--r-band) * -1);
  padding-block: calc(var(--s5) + var(--r-band)) var(--s5);
}

.k-close :focus-visible { outline-color: var(--k-cream); }

.k-takeaways {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-bottom: var(--s5);
}

@media (min-width: 820px) {
  .k-takeaways { grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
}

.k-takeaway {
  position: relative;
  padding-top: var(--s2);
  border-top: 2px solid var(--k-on-brown-line);
}

.k-takeaway-index {
  position: absolute;
  top: var(--s2);
  right: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(242, 236, 227, 0.14);
}

/* With no supporting copy underneath, the statements carry the section
   on their own, so they run considerably larger than a heading would. */
.k-statement {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 17ch;
  padding-right: 3rem;
}

.k-try {
  padding-top: var(--s4);
  border-top: 1px solid var(--k-on-brown-line);
}

.k-disclosure {
  margin-top: var(--s3);
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(242, 236, 227, 0.52);
  max-width: 34rem;
}

/* ---------------------------------------------------------------
   Reduced motion — the page must read identically without any of it
--------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js .k-reveal,
  .js .k-reveal .k-chain-strong li,
  .js .k-model-old,
  .k-btn,
  .k-arrow {
    opacity: 1 !important;
    transform: none !important;
  }

  /* The inset's tilt is composition, not motion, so it stays put.
     Only the transition on it is dropped. */
  .js .k-reveal,
  .js .k-reveal .k-chain-strong li,
  .js .k-model-old,
  .k-shot-inset,
  .k-btn,
  .k-arrow { transition: none !important; }

  .js .k-reveal.is-visible .k-model-old { opacity: 1 !important; }
}