/* nkdstudio.io — v0 static site
   Simplified type hierarchy (6 Sep 2026) — every text style on the site
   maps to one of five tokens, applied directly on the semantic classes
   below rather than via separate utility classes (no build step, so this
   keeps markup untouched):
     hero-display      Playfair Display 400, 48px / 1.3
     page-header       Playfair Display 400, 32px / 1.3
     paragraph-header  Red Hat Display  400, 16px / 1.5
     body              Red Hat Display  400, 14px / 1.5
     tags              Red Hat Display  500, 10px / 1.5 (reserved — the
                       define/build/grow/operate tag row that used it was
                       removed from case-study pages 6 Sep 2026, per Leo)
   Case-study meta (industry · year) is a one-off at 12px / 1.5, uppercase.
   Anything marked "inferred" was read off a screenshot, not pulled from
   Figma — flag if it needs correcting against the source file. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Red+Hat+Display:wght@400;500;600&display=swap');

:root {
  /* colour */
  --bg: #FFFFFF;
  --ink: #000000;
  --ink-80: rgba(0, 0, 0, 0.8);
  --ink-60: rgba(0, 0, 0, 0.6);
  --ink-40: rgba(0, 0, 0, 0.4);
  --ink-20: rgba(0, 0, 0, 0.2);
  --ink-05: rgba(0, 0, 0, 0.05);

  /* accents (locked per rebrand brief: teal = advisory, magenta = venture studio) */
  --accent-advisory: #17BEBB;

  /* layout */
  --container: 640px;
  --gutter: 32px;
  --radius: 4px;
  --header-h: 96px; /* keeps the sticky header + sticky hero column in sync */

  /* type families */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Red Hat Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Dark theme — currently only used on the products listing page.
   Same opacity scale, just built on white instead of black. The nav-menu
   itself is a further one-off on top of this (see below) — a plain
   --ink-05 swap wasn't dark enough for it, and the selected pill needs to
   stay literal white/black rather than following the inverted tokens. */
body.theme-dark {
  --bg: #000000;
  --ink: #FFFFFF;
  --ink-80: rgba(255, 255, 255, 0.8);
  --ink-60: rgba(255, 255, 255, 0.6);
  --ink-40: rgba(255, 255, 255, 0.4);
  --ink-20: rgba(255, 255, 255, 0.2);
  --ink-05: rgba(255, 255, 255, 0.05);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Header and footer are sticky, not a fixed-height/overflow:hidden shell —
   the earlier fixed-viewport version broke on real devices (mobile's
   dynamic browser-chrome height made 100vh unreliable, and the footer
   ended up clipped and unreachable). Sticky positioning lets the page
   scroll normally, which works the same way everywhere. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink-80);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; width: 100%; }

a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: var(--gutter); top: 8px; }

/* ---------- header / nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--header-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px var(--gutter);
  border-bottom: 1px solid var(--ink-20);
  background: var(--bg);
}

.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ink-05);
  border-radius: 999px;
  padding: 4px;
}

.nav-pill a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.nav-pill a[aria-current="page"] {
  background: var(--bg);
}

/* dark-theme nav-menu: a bespoke 10% white track + a literal white/black
   selected pill, rather than following the inverted --bg/--ink tokens */
body.theme-dark .nav-pill {
  background: rgba(255, 255, 255, 0.10);
}
body.theme-dark .nav-pill a[aria-current="page"] {
  background: #FFFFFF;
  color: #000000;
}

/* case-study page header: no nav, just a back link, tighter padding */
.site-header--case {
  justify-content: flex-start;
  padding: 16px 32px;
}

.back-link {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.back-link:hover { color: var(--ink-60); }

/* ---------- footer ---------- */

.site-footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  flex: 0 0 auto;
  background: var(--bg);
  border-top: 1px solid var(--ink-20);
  padding: 24px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-60);
}

.site-footer a { color: var(--ink-60); }
.site-footer a:hover { color: var(--ink); }

/* ---------- home / products page (two-column) ---------- */

.home-main {
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter); /* 32px minimum outer gutter, shrinks first */
}

.home-col {
  flex: 1 1 576px;
  max-width: 576px;
  padding: 96px 48px;
}

.home-col--left {
  border-right: 1px solid var(--ink-20);
}

/* wraps just the hero <p> — kept separate from .home-col--left so the
   divider (border-right, above) still runs the full height of the row
   even though this inner wrapper sticks partway down it */
.home-hero-sticky {
  position: sticky;
  top: var(--header-h);
}

.home-hero {
  margin: 0;
  padding-top: 16px; /* matches the case-item's own 16px inset, so both
                         columns' text line up at the same visual offset */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.3;
  color: var(--ink);
}

.case-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }

.case-item a {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  padding: 16px;
  border-radius: var(--radius);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.case-item a:hover,
.case-item a:focus-visible {
  background: var(--ink);
  color: var(--bg);
}

/* ---------- case-study page ---------- */

.case-main {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--gutter);
  padding-top: 128px;
  padding-bottom: 64px;
}

.case-meta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-60);
  text-transform: uppercase;
  margin: 0 0 16px;
}

.case-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 48px;
}

.case-body p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-80);
  margin: 0 0 24px;
}
.case-body p:last-child { margin-bottom: 0; }

/* ---------- case-study screenshot frame ----------
   Reusable pattern for adding product screenshots to a case study:
   tinted background (locked advisory accent at 8%) and an elevation
   shadow on each screen, laid out as a simple static row -- 4 screens
   on desktop, 2 on mobile, no scrolling or pagination. Plus a
   one-time scroll-in reveal on desktop only. See the
   add-images-to-cases skill for how to reuse this on the other case
   studies.

   .case-hero               outer wrapper -- carries the 48px gap to
                             whatever follows
   .case-frame                the tinted, padded, rounded box
   .case-frame-desktop /
   .case-frame-mobile          a plain flex row of images -- exactly
                             one is shown at a time, by viewport width

   Deliberately kept simple: no overflow/scroll container, so there's
   nothing to clip the drop-shadow, and no flex-basis tricks that can
   fight the parent's width -- that's what caused the clipping and
   centering bugs in the scrollable version this replaced. If a future
   case study needs more than 4/2 screens, add a second frame+row
   below this one rather than reintroducing scrolling here. */

.case-hero { margin: 0 0 48px; }

.case-frame {
  --frame-tint: color-mix(in srgb, var(--accent-advisory) 8%, var(--bg));
  background: #ECFAFA; /* static fallback for browsers without color-mix */
  background: var(--frame-tint);
  border-radius: var(--radius);
  padding: 16px;
}

.case-frame-desktop,
.case-frame-mobile {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  width: 100%;
}

.case-frame-mobile { display: none; }

.case-frame img {
  display: block;
  width: 100%;
  height: auto;
  flex: 1 1 0;
  min-width: 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.05)) drop-shadow(0 16px 16px rgba(0, 0, 0, 0.03));
}

@media (min-width: 641px) {
  /* .will-reveal is added by JS only if IntersectionObserver is available,
     so a no-JS visitor always sees the frame fully visible, never stuck
     hidden. */
  .case-frame.will-reveal {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .case-frame.will-reveal.is-visible {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 640px) {
  .case-frame-desktop { display: none; }
  .case-frame-mobile { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .case-frame.will-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- about page ---------- */

.about-main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-main p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.3;
  color: var(--ink);
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .home-main { flex-direction: column; }
  .home-col { flex: 1 1 auto; max-width: none; padding: 64px var(--gutter); }
  .home-col--left { border-right: none; border-bottom: 1px solid var(--ink-20); }
  .home-hero-sticky { position: static; } /* stacked layout scrolls as one — no pinned hero */
  .home-hero { font-size: clamp(28px, 6vw, 40px); }
}

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

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}