/* ══ Site chrome: tokens, nav, theme toggle, footer ══
   Shared by every page. base.njk loads it before style.css; the standalone
   case studies load only this file, so keep global element rules out of it. */

:root {
  /* Colour tokens — Figma "Colours" collection, Light mode */
  color-scheme: light;
  --bg:            #ffffff;   /* Surface/Canvas */
  --card-bg:       #f4f4f2;   /* Surface/Surface 1 */
  --card-alt-bg:   #f4f4f2;   /* Surface/Surface 1 */
  --header-bg:     #e9e9e6;   /* Surface/Surface 2 */
  --panel:         #0000000f; /* Surface/Panel */
  --hover-tint:    #00000014; /* Surface/Hover */
  --divider:       #d6d6d3;   /* Strokes/Divider */
  --text:          #111111;   /* Text/High emphasis */
  --text-muted:    #6b6b6b;   /* Text/Low emphasis */
  --text-on-color: #ffffff;   /* Text/On Colour */
  --accent:        #000ed6;   /* Brand/Blue, also Strokes/Focus */
  --accent-tint:   color-mix(in srgb, var(--accent) 80%, #fff);   /* CTA hover; follows --accent in dark mode */
  --brand-lime:    #3eff21;   /* Brand/Lime — logo dot only */
  --shadow-hover:  0 12px 40px rgba(0, 0, 0, 0.08);
  --content-w:   1148px;

  /* Layout tokens — Figma "Layout" collection */
  --radius-lg: 16px; --radius-sm: 8px; --radius-pill: 999px;
  /* Concentric corners: a box inset inside another gets radius = outer radius - inset.
     --inset-sm is the standard 4px panel padding; --radius-nested is the matching inner radius. */
  --inset-sm: 4px;
  --radius-nested: calc(var(--radius-lg) - var(--inset-sm));
  /* Motion */
  --dur-fast: 150ms; --dur-theme: 400ms;
  --ease: cubic-bezier(.2,.7,.2,1);

  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  96px;

  /* Type scale (design system) */
  --fs-72: 72px; --fs-51: 51px; --fs-40: 40px; --fs-32: 32px; --fs-25: 25px;
  --fs-20: 20px; --fs-18: 18px; --fs-16: 16px; --fs-14: 14px; --fs-12: 12px; --fs-10: 10px;
  /* Weights */
  --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700;
  /* Line-heights */
  --lh-tight: 1.1; --lh-body: 1.5;
  /* Letter-spacing */
  --ls-0: 0; --ls-label: -1px; --ls-caps: 0.06em; --ls-overhead: 0.12em;
}

/* Dark mode — Figma "Colours" collection, Dark mode */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #0a0a0a;
  --card-bg:       #161616;
  --card-alt-bg:   #161616;
  --header-bg:     #222222;
  --panel:         #ffffff12;
  --hover-tint:    #ffffff1f;
  --divider:       #2a2a2a;
  --text:          #e4e6e3;
  --text-muted:    #9a9a9a;
  --text-on-color: #0a0a0a;
  --accent:        #4d5cff;
  --brand-lime:    #aaff60;
  --shadow-hover:  0 12px 40px rgba(0,0,0,0.6);
}

/* Anchor jumps land below the sticky nav (nav top 16 + bar 64 + 16 breathing room) */
html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* External links: anything that opens a new tab or the mail app gets the same arrow.
   Drawn here so markup never has to remember it. Rows and cards place it in style.css. */
:root { --ext-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
a[target="_blank"]::after,
a[href^="mailto:"]::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.3em;
  vertical-align: -0.05em;
  background-color: currentColor;
  -webkit-mask: var(--ext-arrow) center / contain no-repeat;
  mask: var(--ext-arrow) center / contain no-repeat;
}

.container {
  max-width: calc(var(--content-w) + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

/* ══════════════════════════════
   NAVIGATION (Figma: Header 673:2572 — floating panel bar)
══════════════════════════════ */
.nav {
  position: sticky;
  top: 16px;
  z-index: 100;
  max-width: calc(var(--content-w) + 48px);
  margin: 24px auto 0;
  padding: 0 24px;
}

.nav a { text-decoration: none; }

.nav__inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 8px 8px 16px;
  border-radius: var(--radius-lg); /* header keeps its designed corners (owner, 2026-10-11) */
  /* Surface/Panel over canvas, kept opaque so content does not show through while scrolling */
  background: linear-gradient(var(--panel), var(--panel)), var(--bg);
}

.nav__logo { display: inline-flex; align-items: baseline; }

.nav__logo-v {
  font-size: 24px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--accent);
}

.nav__logo-dot {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.06em;
  background: var(--brand-lime);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav__links {
  display: flex;
  gap: 8px;
  list-style: none;
}

.nav__links a {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-overhead);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

.nav__links a:hover { background: var(--hover-tint); color: var(--text); }

/* Current page, or the home section in view (set by site-scripts.njk) */
.nav__links a[aria-current] { background: var(--card-bg); color: var(--text); }

/* Hamburger button — hidden on desktop */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* Theme Toggle (Figma 811:62) */
.theme-toggle {
  position: relative;
  width: 62px;
  height: 38px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--hover-tint);
  cursor: pointer;
  flex-shrink: 0;
}

.theme-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 350ms var(--ease), background-color 350ms var(--ease);
}

[data-theme="dark"] .theme-toggle::after { transform: translateX(24px); }
.theme-toggle, .nav__hamburger { transition: background-color 200ms var(--ease); }
.theme-toggle:hover { background: var(--header-bg); }
.nav__hamburger { border-radius: var(--radius-sm); }
.nav__hamburger:hover { background: var(--hover-tint); }

.theme-toggle:focus-visible,
.nav__hamburger:focus-visible,
.nav a:focus-visible,
.footer__links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ══════════════════════════════
   FOOTER (Figma: Footer 811:13784)
══════════════════════════════ */
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 32px 0;
  border-top: 1px solid var(--divider);
  color: var(--text-muted);
}

.footer__copy { font-size: var(--fs-12); }

.footer__links { display: flex; gap: 24px; list-style: none; }

.footer__links a {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  transition: color 200ms var(--ease);
}

.footer__links a:hover { color: var(--text); }
/* Footer labels read as links already; no ↗ here (owner ruling 2026-10-11) */
.footer__links a[href]::after { content: none; }

/* ══ Mobile (≤ 640px) ══ */
@media (max-width: 640px) {
  :root { --radius-lg: 12px; --radius-sm: 6px; }
  html { scroll-padding-top: 80px; }

  .container, .nav { padding: 0 16px; }
  .nav { top: 8px; margin-top: 16px; }

  /* Nav: hamburger opens the links as a panel under the bar */
  .nav__hamburger { display: flex; }

  .nav__links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border-radius: var(--radius-lg);
    background: linear-gradient(var(--panel), var(--panel)), var(--bg);
    box-shadow: var(--shadow-hover);
  }

  .nav--open .nav__links { display: flex; }

  .theme-toggle { width: 52px; height: 32px; }
  .theme-toggle::after { width: 26px; height: 26px; }
  [data-theme="dark"] .theme-toggle::after { transform: translateX(20px); }

  .footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle::after, .nav__hamburger, .nav__links a, .footer__links a { transition: none; }
}

/* ══ CREDITS ══ */
/* End of every case study (Figma: Credits_Design System 955:3224, Credit Row 957:150) */
.credits__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 32px;
}
.credits__title { font-size: 25px; font-weight: 700; line-height: 1.1; color: var(--text); }
.credits__desc { margin-top: 24px; font-size: 20px; line-height: 1.5; color: var(--text-muted); }
.credits__panel {
  display: flex;
  flex-direction: column;
  gap: var(--inset-sm);
  padding: var(--inset-sm);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
.credits__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-radius: var(--radius-nested);
  background: var(--card-bg);
  color: var(--text);
  text-decoration: none;
  transition: background-color 200ms var(--ease);
}
.credits__row:hover { background: var(--header-bg); }
.credits__row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The ↗ trails the row, muted, darkening on hover like a.row */
a.credits__row[target="_blank"]::after { width: 18px; height: 18px; margin-left: 0; flex-shrink: 0; background-color: var(--text-muted); transition: background-color 200ms var(--ease); }
a.credits__row[target="_blank"]:hover::after { background-color: var(--text); }
.credits__text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.credits__name { font-size: 18px; font-weight: 700; line-height: 1.1; }
.credits__role { font-size: 16px; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 768px) {
  .credits__cols { grid-template-columns: 1fr; gap: 24px; }
  .credits__desc { margin-top: 16px; font-size: 16px; }
}

/* ══ REVEAL ══ */
/* Blocks inside [data-reveal] unblur one by one (site-scripts.njk adds .revealed + --reveal-delay).
   Animation, not transition, so rows keep their own hover transitions. Off without JS or with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] > :not(.revealed) { opacity: 0; filter: blur(8px); }
  .js [data-reveal] > .revealed { animation: reveal 0.6s ease-out var(--reveal-delay, 0ms) both; }
}

@keyframes reveal {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: none; }
}