/* ==========================================================================
   Plainview site design system (shared by every page)

   TOKENS
   Type      one scale, largest to smallest:
             --t-hero 48>80   page headline
             --t-h1   32>56   section title (.h1)
             --t-h2   26>32   sub-title, benefit and step titles (.h2)
             --t-h3   21>24   item title (.h3)
             --t-intro 17>21  intro paragraph
             body 17, small 14, caption 14 (12 only for non-citation labels)
             Display stack leads with the system face (SF on Apple devices),
             Instrument Sans + JetBrains Mono (Google Fonts); system faces as fallback.
   Space     --s-1..--s-12 (4, 8, 12, 16, 24, 32, 40, 56, 80, 112, 144, 216)
             --section-y (80>144), --section-y-end (112>216)
   Widths    --w-wide 1260, --w-text 980, --gutter >= 16px
   Color     --bg, --bg-alt (chapter band), --stage (media plate, matches the
             graphics' own paper), --fg, --fg-2 (AA secondary), --fg-3 (AA tertiary),
             --hairline, --accent (button fill), --accent-ink (text links).
             One accent only: cobalt. Light default, dark via
             prefers-color-scheme or [data-theme].
   Radius    --r-sm 12 (phones, small cards), --r-lg 28 (media tiles), --r-pill 980
   Motion    --ease, --ease-out, --ease-soft; reveals on IntersectionObserver only.
             Reduced motion: no transforms, no autoplay.

   REUSABLE CLASSES
   .wrap .wrap-text            containers
   .band                       alt-colour chapter band
   .section .section--end      vertical rhythm
   .hero-title .h1 .h2 .h3 .intro .small .caption
   .tone                       two-tone intro sentence (grey with <b> in primary)
   .btn .link                  CTAs (.link adds the chevron)
   .tile                       media plate
   .media + .media-row         video tile with its caption and play control below it
   .sticky-exhibit             pinned media with captions scrolling past
   .carousel                   peeking scroll-snap carousel with pill dots
   .reveal .reveal-media       scroll reveals (IntersectionObserver in site.js)
   ========================================================================== */


:root {
  color-scheme: light;
  --font-display: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-hero: clamp(48px, 3.4vw + 31px, 80px);
  --t-h1: clamp(32px, 2.6vw + 18px, 56px);
  --t-h2: clamp(26px, 0.6vw + 22px, 32px);
  --t-h3: clamp(21px, 0.3vw + 19px, 24px);
  --t-intro: clamp(17px, 0.4vw + 15.5px, 21px);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 40px; --s-8: 56px; --s-9: 80px; --s-10: 112px; --s-11: 144px; --s-12: 216px;
  --section-y: clamp(80px, 8vw + 24px, 144px);
  --section-y-end: clamp(112px, 12vw + 40px, 216px);

  --w-wide: 1260px;
  --w-text: 980px;
  --gutter: clamp(16px, 5vw, 90px);
  --nav-h: 48px;

  --r-sm: 12px;
  --r-lg: 28px;
  --r-pill: 980px;

  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --stage: #f3f4f4;
  --fg: #1d1d1f;
  --fg-2: #515154;
  --fg-3: #6e6e73;
  --hairline: #d2d2d7;
  --accent: #2a5bff;
  --accent-hover: #1c47e6;
  --accent-ink: #1f4fe8;
  --on-accent: #ffffff;
  --nav-bg: rgba(255, 255, 255, 0.8);
  --scrim: rgba(232, 232, 237, 0.8);
  --scrim-fg: #1d1d1f;
  --media-filter: none;

  --ease: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-soft: cubic-bezier(0.25, 0.1, 0.3, 1);
  --d-fast: 240ms;
  --d-ui: 320ms;
  --d-reveal: 800ms;
  --d-slide: 1000ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #101011;
    --bg-alt: #1d1d1f;
    --stage: #1d1d1f;
    --fg: #f5f5f7;
    --fg-2: #a1a1a6;
    --fg-3: #8e8e93;
    --hairline: #424245;
    --accent-hover: #4470ff;
    --accent-ink: #7f9cff;
    --nav-bg: rgba(22, 22, 23, 0.8);
    --scrim: rgba(66, 66, 69, 0.8);
    --scrim-fg: #f5f5f7;
    --media-filter: brightness(0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101011;
  --bg-alt: #1d1d1f;
  --stage: #1d1d1f;
  --fg: #f5f5f7;
  --fg-2: #a1a1a6;
  --fg-3: #8e8e93;
  --hairline: #424245;
  --accent-hover: #4470ff;
  --accent-ink: #7f9cff;
  --nav-bg: rgba(22, 22, 23, 0.8);
  --scrim: rgba(66, 66, 69, 0.8);
  --scrim-fg: #f5f5f7;
  --media-filter: brightness(0.9);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/25px var(--font-text);
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern";
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
h1, h2, h3, h4, p, figure, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: var(--r-pill); font-size: 14px; }
.skip:focus { top: 10px; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--w-wide)); margin-inline: auto; }
.wrap-text { width: min(100% - 2 * var(--gutter), var(--w-text)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--end { padding-bottom: var(--section-y-end); }
.band { background: var(--bg-alt); }
.center { text-align: center; }

/* ---------- Type ---------- */
.hero-title, .h1, .h2, .h3 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
.hero-title { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.035em; }
.h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.03em; }
.h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.02em; }
.h3 { font-size: var(--t-h3); line-height: 1.17; letter-spacing: -0.012em; }
.intro { font-size: var(--t-intro); line-height: 1.43; letter-spacing: 0.011em; }
.small { font-size: 14px; line-height: 20px; letter-spacing: -0.016em; }
.caption { font-size: 14px; line-height: 20px; letter-spacing: -0.016em; color: var(--fg-3); }
.muted { color: var(--fg-2); }
.eyebrow { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.17; font-weight: 600; color: var(--accent-ink); margin-bottom: var(--s-2); }
.num { font-variant-numeric: tabular-nums; }

/* Two-tone intro: grey copy, the line that matters in primary. One or two sentences only. */
.tone { color: var(--fg-2); font-weight: 600; text-wrap: pretty; }
.tone b { color: var(--fg); font-weight: 600; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 11px 22px;
  border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font-size: 17px; line-height: 1; font-weight: 400; letter-spacing: -0.022em;
  white-space: nowrap; border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--d-fast) var(--ease), transform 120ms var(--ease);
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { border-radius: var(--r-pill); }
.btn--sm { position: relative; min-height: 28px; padding: 5px 12px; font-size: 12px; letter-spacing: -0.01em; }
.btn--sm::before { content: ""; position: absolute; inset: -8px -4px; } /* 44px hit area */
.link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent-ink); font-size: inherit;
  transition: color var(--d-ui) var(--ease);
}
.link::after {
  content: ""; width: 0.42em; height: 0.42em; margin-left: 0.1em;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(1px);
}
.link:hover, .link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-6); }
.center .cta-row { justify-content: center; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  color: #1d1d1f;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  transition: background-color 400ms var(--ease), color 400ms var(--ease), box-shadow 400ms var(--ease);
}
.nav.on-dark { background: rgba(22, 22, 23, 0.72); color: #f5f5f7; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); }
.nav.on-dark .nav__links a { color: #d2d2d7; }
.nav.on-dark .nav__links a:hover { color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav { background: rgba(22, 22, 23, 0.72); color: #f5f5f7; }
  :root:not([data-theme="light"]) .nav__links a { color: #d2d2d7; }
}
.nav__inner { height: 100%; display: flex; align-items: center; gap: var(--s-6); }
.brand { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.03em; }
.nav__brand { margin-right: auto; display: inline-flex; align-items: center; min-height: 44px; }
.nav__links { display: flex; gap: var(--s-6); }
.nav__links a { font-size: 13px; letter-spacing: 0; color: #424245; transition: color var(--d-ui) var(--ease); padding-block: 12px; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: #000; }
.nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
@media (max-width: 640px) {
  .nav__inner { gap: var(--s-5); }
  .nav__links { gap: var(--s-5); }
  .nav .btn--sm { display: none; }
  .brand { font-size: 19px; }
}

/* ---------- Media ---------- */
.feature { display: block; }
.tile { background: var(--stage); border-radius: var(--r-lg); overflow: hidden; position: relative; isolation: isolate; }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; filter: var(--media-filter); }
.media .tile { aspect-ratio: 16 / 9; }
.media video { position: absolute; inset: 0; }
.media[data-click] .tile { cursor: pointer; }
.media-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); margin-top: var(--s-4); }
.media-row .caption { max-width: 72ch; }
.media-toggle {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--bg-alt); color: var(--fg);
  transition: transform 160ms var(--ease), background-color var(--d-fast) var(--ease);
}
.band .media-toggle { background: var(--bg); }
.media-toggle:hover { transform: scale(1.06); }
.media-toggle:focus-visible { border-radius: 50%; }
.media-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.media-toggle .i-play { display: none; }
.media-toggle[data-state="paused"] .i-play { display: block; }
.media-toggle[data-state="paused"] .i-pause { display: none; }
@media (max-width: 640px) {
  .tile { border-radius: var(--r-sm); }
  .media .tile { aspect-ratio: 3 / 4; }
}

/* ---------- Sticky exhibit: media pinned, captions scroll past ---------- */
/* Frames are cropped below their own title strip; the caption beside them carries the words. */
.sticky-exhibit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-9); align-items: start; }
.sticky-exhibit__media { position: sticky; top: calc(var(--nav-h) + 10svh); }
.sticky-exhibit__media .frames { position: relative; aspect-ratio: 1920 / 900; }
.sticky-exhibit__media .frames img { position: absolute; inset: 0; object-position: 50% 100%; opacity: 0; transition: opacity 600ms var(--ease); }
.sticky-exhibit__media .frames img.is-active { opacity: 1; }
.sticky-exhibit__steps { display: grid; }
.sticky-exhibit__step { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--s-6); }
.sticky-exhibit__step:first-child { min-height: 50svh; justify-content: flex-start; padding-top: 0; }
.sticky-exhibit__step:last-child { min-height: 50svh; }
.sticky-exhibit__step .h2 { color: var(--fg-3); transition: color 400ms var(--ease); max-width: 22ch; }
.sticky-exhibit__step.is-active .h2 { color: var(--fg); }
.sticky-exhibit__step .source { display: block; margin-top: var(--s-3); font-size: 14px; line-height: 20px; color: var(--fg-2); }
.sticky-exhibit__step .source b { font-weight: 600; color: var(--accent-ink); }
.sticky-exhibit__step .inline-frame { display: none; width: 100%; height: auto; object-fit: cover; object-position: 50% 100%; filter: var(--media-filter); }
@media (max-width: 900px) {
  .sticky-exhibit { grid-template-columns: 1fr; gap: var(--s-6); }
  .sticky-exhibit__media { display: none; }
  .sticky-exhibit__step, .sticky-exhibit__step:first-child, .sticky-exhibit__step:last-child { min-height: 0; padding-block: var(--s-6); }
  .sticky-exhibit__step .h2 { color: var(--fg); }
  .sticky-exhibit__step .inline-frame { display: block; margin-bottom: var(--s-5); aspect-ratio: 1920 / 900; }
}
@media (max-width: 640px) {
  .sticky-exhibit__step .inline-frame { aspect-ratio: 1080 / 1130; }
}

/* ---------- Carousel ---------- */
.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(var(--w-wide), 100% - 2 * var(--gutter) - 72px);
  gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: max(var(--gutter), (100% - var(--w-wide)) / 2);
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline-offset: -3px; }
.carousel__slide { scroll-snap-align: center; margin: 0; }
.carousel__slide .tile { aspect-ratio: 16 / 9; transition: opacity 500ms var(--ease), filter 500ms var(--ease); }
.carousel__slide figcaption { margin-top: var(--s-4); max-width: 64ch; }
.carousel__slide figcaption b { display: block; font-weight: 600; }
.carousel__slide figcaption span { display: block; margin-top: 2px; color: var(--fg-2); font-size: 14px; line-height: 20px; }
.carousel__slide:not(.is-active) .tile { opacity: 0.55; }
.carousel__controls { display: flex; justify-content: center; align-items: center; gap: var(--s-3); margin-top: var(--s-7); }
.dots { display: flex; align-items: center; height: 56px; padding-inline: 16px; border-radius: var(--r-pill); background: var(--scrim); }
.dots button { width: 22px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.dots button::after { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--fg-3); transition: width 400ms var(--ease), background-color 400ms var(--ease); }
.dots button[aria-current="true"] { width: 60px; }
.dots button[aria-current="true"]::after { width: 48px; background: var(--fg); }
.round-btn { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--scrim); color: var(--scrim-fg); display: grid; place-items: center; cursor: pointer; transition: opacity var(--d-fast) var(--ease); }
.round-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.round-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.round-btn:focus-visible { border-radius: 50%; }
@media (max-width: 640px) {
  .carousel__track { grid-auto-columns: calc(100% - 2 * var(--gutter) - 28px); gap: 12px; }
  .carousel__slide .tile { aspect-ratio: 3 / 4; }
  .carousel__controls .round-btn { display: none; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .carousel__slide:not(.is-active) .tile { opacity: 0.4; filter: saturate(0.6); }
}
:root[data-theme="dark"] .carousel__slide:not(.is-active) .tile { opacity: 0.4; filter: saturate(0.6); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--hairline); padding-block: var(--s-8) var(--s-8); }
.footer__inner { display: grid; grid-template-columns: 1fr auto; gap: var(--s-6) var(--s-8); align-items: end; }
.footer__line { color: var(--fg-2); margin-top: var(--s-2); }
.footer__email { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); color: var(--accent-ink); }
.footer__email:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); color: var(--fg-2); padding-top: var(--s-5); border-top: 1px solid var(--hairline); }
.footer__meta a { padding-block: 2px; }
.footer__meta a:hover { color: var(--fg); }
.footer__legal { flex: 1 1 32ch; text-align: right; color: var(--fg-3); }
@media (max-width: 640px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__legal { text-align: left; flex-basis: 100%; }
}

/* ---------- Reveals ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(32px); transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 100ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal-media { opacity: 0.6; transform: scale(0.97); transition: opacity var(--d-slide) var(--ease-soft), transform var(--d-slide) var(--ease-soft); }
  .js .reveal-media.is-in { opacity: 1; transform: none; }
  .lift .tile { transition: transform 400ms cubic-bezier(0, 0, 0.5, 1), box-shadow 400ms var(--ease); }
  .lift:hover .tile { transform: scale(1.01); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 200ms !important; scroll-behavior: auto !important; }
  .sticky-exhibit__media .frames img { transition: none !important; }
}

/* ==========================================================================
   Pincite Studio design system tokens (from the Magic Patterns DS export)
   ========================================================================== */
:root {
  --ink: #0A0B0D; --ink-secondary: #3A3F47; --background: #FFFFFF; --surface: #F7F8FA; --surface-raised: #EEF0F3;
  --border: #E2E5EA; --border-strong: #CBD0D9;
  --gray-50: #F7F8FA; --gray-100: #EEF0F3; --gray-200: #E2E5EA; --gray-300: #CBD0D9; --gray-400: #9AA3B0;
  --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #343A46; --gray-800: #1F2430; --gray-900: #12151C;
  --accent-strong: #1830C4; --accent-tint: #E6EBFF; --documented-fact: #2B4EFF;
  --illustrative-choice: #9AA3B2; --illustrative-choice-tint: #E9EBEF;
  --highlight: #E8FF3C; --highlight-ink: #0A0B0D;
  --surface-dark: #0B0D12; --surface-dark-raised: #171B24; --text-on-dark: #F7F8FA; --text-on-dark-secondary: #9AA3B0; --border-on-dark: #2A2F3A;
  --font-heading: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* Older names mapped onto the system */
  --font-display: var(--font-heading); --font-text: var(--font-body);
  --accent: #2B4EFF; --accent-hover: #1830C4; --accent-ink: #2B4EFF;
  --bg: #FFFFFF; --bg-alt: #F7F8FA; --stage: #F3F4F4; --fg: #0A0B0D; --fg-2: #4B5563; --fg-3: #6B7280; --hairline: #E2E5EA;
  --r-sm: 2px; --r-lg: 2px; --r-pill: 2px; --w-wide: 1152px; --gutter: 24px;
}
/* Light only: the system has no dark theme for pages. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: light; --bg: #FFFFFF; --bg-alt: #F7F8FA; --stage: #F3F4F4; --fg: #0A0B0D; --fg-2: #4B5563; --fg-3: #6B7280; --hairline: #E2E5EA; --accent-ink: #2B4EFF; --media-filter: none; } }
body { font-family: var(--font-body); letter-spacing: 0; }
.btn { background: var(--gray-900); color: var(--gray-50); border-radius: 2px; font-weight: 500; }
.btn:hover { background: var(--gray-800); }
.hero-title, .h1, .h2, .h3 { font-weight: 500; letter-spacing: -0.035em; }

  .mono { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }

/* Buttons: ink primary, hairline secondary, amber underline draws on hover. */
.b { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 2px; font: 500 15px/1 var(--font-body); letter-spacing: -0.01em; border: 1px solid var(--ink); cursor: pointer; transition: background-color 150ms; white-space: nowrap; }
.b--lg { height: 48px; padding: 0 24px; font-size: 16px; }
.b--primary { background: var(--gray-900); color: var(--gray-50); border-color: var(--gray-900); }
.b--primary:hover { background: var(--gray-800); }
.b--secondary { background: transparent; color: var(--ink); border-color: rgba(10, 11, 13, 0.8); }
.b--secondary:hover { background: rgba(10, 11, 13, 0.03); }
.b > span { position: relative; }
.b > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: #d97706; transform: scaleX(0); transform-origin: left; transition: transform 200ms ease-out; }
.b:hover > span::after { transform: scaleX(1); }
.b svg { width: 16px; height: 16px; }

.tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 2px; font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.tag i { width: 6px; height: 6px; border-radius: 50%; }
.tag--static { background: #f5f5f4; color: #44403c; border: 1px solid #d6d3d1; } .tag--static i { background: #78716c; }
.tag--motion { background: #1c1917; color: #fafaf9; border: 1px solid #1c1917; } .tag--motion i { background: #fbbf24; }
.tag--record { color: #44403c; border: 1px dashed #a8a29e; } .tag--record i { border: 1px solid #78716c; }
.tag--hl { background: var(--highlight); color: var(--highlight-ink); border: 1px solid var(--highlight); } .tag--hl i { background: var(--ink); }

/* ---------- Nav ---------- */
.topbar { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.topbar .container { height: 64px; display: flex; align-items: center; justify-content: space-between; }
.topbar nav { display: flex; align-items: center; gap: 32px; }
.topbar ul { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.topbar ul a { font-size: 14px; color: var(--gray-500); transition: color 150ms; }
.topbar ul a:hover { color: var(--ink); }
.topbar .cta { height: 36px; padding: 0 16px; border-radius: 2px; background: var(--gray-900); color: #fff; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; }
.topbar .cta:hover { background: var(--gray-700); }
@media (max-width: 720px) { .topbar ul { display: none; } }

/* Wordmark: lowercase, -0.04em, the period is a small square. */
.wordmark { display: inline-flex; align-items: baseline; font: 500 20px/1 "Familjen Grotesk", var(--font-heading); letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; }
.wordmark i { display: inline-block; width: 0.17em; height: 0.17em; margin: 0 0.06em; background: currentColor; }
.wordmark--sm { font-size: 17px; }
.wordmark .wm-2 { margin-left: 0.24em; color: var(--gray-500); }
.wordmark .wm-mark { width: 1.3em; height: 1.3em; margin-right: 0.45em; align-self: center; flex: none; }

/* Footer */
.foot { border-top: 1px solid var(--border); padding: 48px 0 40px; }
.foot .row1 { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.foot .contact { margin-top: 12px; font-size: 14px; color: var(--gray-500); }
.foot .contact a { color: var(--ink); border-bottom: 1px solid var(--border-strong); }
.foot nav ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.foot nav a { color: var(--gray-600); } .foot nav a:hover { color: var(--ink); }
.foot .row2 { display: flex; justify-content: space-between; gap: 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.foot .row2 .mono { color: var(--gray-500); letter-spacing: 0.06em; }

.container { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }