/* BlankCanvas Software — shared styles: tokens, type, navigation, footer, simple pages */

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: optional; /* preloaded; if it isn't ready for first paint, keep the fallback (no layout shift) */
  src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  --bg: #fbfaf7;
  --bg-alt: #f3f1ec;
  --surface: #ffffff;
  --ink: #111113;
  --ink-soft: #3c3c43;
  --muted: #66666e;
  --hairline: rgb(17 17 19 / 0.09);
  --hairline-strong: rgb(17 17 19 / 0.2);
  --dot: rgb(17 17 19 / 0.15);
  --accent: #ff5a1f;
  --focus: #d9480f; /* accent darkened to clear 3:1 against the paper */
  --live: #16a34a;
  --blank-fill: rgb(255 255 255 / 0.45);
  --nav-material: rgb(251 250 247 / 0.72);
  --dock-material: rgb(255 255 255 / 0.5);
  --dock-edge: rgb(255 255 255 / 0.85);
  --shadow-soft: 0 1px 2px rgb(17 17 19 / 0.05), 0 6px 20px -8px rgb(17 17 19 / 0.12);
  --shadow-lift: 0 2px 6px rgb(17 17 19 / 0.06), 0 28px 56px -20px rgb(17 17 19 / 0.28);

  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, "New York", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --radius-xl: clamp(28px, 3.2vw, 44px);
  --radius-l: 24px;
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --nav-h: 60px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0c;
    --bg-alt: #111113;
    --surface: #18181b;
    --ink: #f5f5f7;
    --ink-soft: #d4d4d8;
    --muted: #9d9da5;
    --hairline: rgb(255 255 255 / 0.09);
    --hairline-strong: rgb(255 255 255 / 0.22);
    --dot: rgb(255 255 255 / 0.14);
    --accent: #ff6a33;
    --focus: #ff6a33;
    --live: #22c55e;
    --blank-fill: rgb(255 255 255 / 0.04);
    --nav-material: rgb(11 11 12 / 0.68);
    --dock-material: rgb(38 38 42 / 0.5);
    --dock-edge: rgb(255 255 255 / 0.14);
    --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.5), 0 6px 20px -8px rgb(0 0 0 / 0.6);
    --shadow-lift: 0 2px 6px rgb(0 0 0 / 0.5), 0 28px 56px -20px rgb(0 0 0 / 0.8);
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font-text);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

p,
h1,
h2,
h3,
figure {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: rgb(255 90 31 / 0.22);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 8px;
}

[hidden] {
  display: none !important;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.nowrap {
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease-out);
}

.skip-link:focus-visible {
  transform: none;
}

/* ---------- Type ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.004em;
}

.display {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.05rem + 6.4vw, 6.5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.042em;
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 1.15rem + 3.4vw, 4rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.034em;
  text-wrap: balance;
}

.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.display .serif,
.h2 .serif {
  font-size: 1.1em;
}

.lede {
  color: var(--muted);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

/* ---------- Buttons ---------- */

.btn {
  --btn-h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--btn-h);
  padding: 0 1.35em;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 1rem/1 var(--font-text);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s var(--ease-out), background-color 0.2s, border-color 0.2s;
}

/* Feedback lives on the press, and it is instant. */
.btn:active {
  transform: scale(0.96);
  transition-duration: 0.1s;
}

.btn--ink {
  background: var(--ink);
  color: var(--bg);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-strong);
}

.btn--small {
  --btn-h: 36px;
  padding: 0 1em;
  font-size: 0.9375rem;
}

@media (hover: hover) {
  .btn--ink:hover {
    background: color-mix(in srgb, var(--ink) 84%, var(--bg));
  }

  .btn--ghost:hover {
    background: var(--hairline);
  }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.actions--start {
  justify-content: flex-start;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: none;
}

.link-arrow::after {
  content: "↗";
  content: "↗" / ""; /* decorative: keep it out of the link's accessible name */
  transition: transform 0.3s var(--ease-out);
}

.link-arrow--internal::after {
  content: "→";
  content: "→" / "";
}

@media (hover: hover) {
  .link-arrow:hover::after {
    transform: translate(2px, -2px);
  }

  .link-arrow--internal:hover::after {
    transform: translateX(3px);
  }
}

/* ---------- Navigation ---------- */

.nav-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 8px;
  pointer-events: none;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  transition: background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

/* The material only appears once content actually scrolls underneath it. */
.nav[data-scrolled] {
  background: var(--nav-material);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 var(--hairline);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.mark {
  width: 28px;
  height: 28px;
  flex: none;
}

.mark__tile {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 2;
}

.mark__dot {
  fill: var(--accent);
}

.nav__links {
  display: flex;
  gap: 2px;
}

.nav__links a {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

@media (hover: hover) {
  .nav__links a:hover {
    background: var(--hairline);
    color: var(--ink);
  }
}

.nav__lang {
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

@media (hover: hover) {
  .nav__lang:hover {
    background: var(--hairline);
    color: var(--ink);
  }
}

@media (max-width: 640px) {
  .nav__links {
    display: none;
  }
}

/* ---------- Canvas ---------- */

/* A design-tool canvas: faint dot grid that fades out toward the edges. */
.canvas-grid {
  position: absolute;
  inset: calc(-1 * var(--nav-h)) 0 0;
  z-index: -1;
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.6px);
  background-size: 24px 24px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 38%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 38%, #000 30%, transparent 78%);
  pointer-events: none;
}

/* ---------- Sections ---------- */

.section {
  position: relative;
  padding-block: clamp(88px, 11vw, 152px);
}

.section--alt {
  background: var(--bg-alt);
}

.section-head {
  max-width: 48rem;
}

.section-head .h2 {
  margin-top: 14px;
}

.section-head .lede {
  max-width: 34em;
  margin-top: 20px;
}

/* ---------- Footer ---------- */

.footer {
  padding-block: 44px 52px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 0.875rem;
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 28px 40px;
}

.footer__brand .brand {
  color: var(--ink);
  font-size: 1rem;
}

.footer__brand p {
  margin-top: 12px;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.footer__nav a {
  text-decoration: none;
}

@media (hover: hover) {
  .footer__nav a:hover {
    color: var(--ink);
  }
}

.footer__fine {
  grid-column: 1 / -1;
  font-size: 0.75rem;
}

/* ---------- Simple pages (legal, 404) ---------- */

.page {
  padding-block: clamp(56px, 8vw, 104px) clamp(88px, 10vw, 136px);
}

.prose {
  max-width: 44rem;
}

.prose .h2 {
  margin-top: 14px;
}

.prose .updated {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.prose h2 {
  margin: 48px 0 12px;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.prose p,
.prose li {
  color: var(--ink-soft);
}

.prose p + p {
  margin-top: 12px;
}

.prose ul {
  display: grid;
  gap: 8px;
  padding-left: 1.2em;
  list-style: disc;
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 28px;
  margin: 0;
}

.facts dt {
  color: var(--muted);
}

.facts dd {
  margin: 0;
  color: var(--ink-soft);
}

@media (max-width: 480px) {
  .facts {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .facts dd + dt {
    margin-top: 12px;
  }
}

.not-found {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(100dvh - var(--nav-h) - 160px);
  text-align: center;
}

.not-found .lede {
  max-width: 28em;
  margin: 22px auto 0;
}

.not-found .actions {
  margin-top: 34px;
}


/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .footer__inner {
    grid-template-columns: 1fr;
  }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  [data-enter] {
    animation: enter 1s var(--ease-out) both;
  }

  [data-enter="2"] { animation-delay: 0ms; } /* the H1 is the LCP element: don't hold it back */
  [data-enter="3"] { animation-delay: 180ms; }
  [data-enter="4"] { animation-delay: 260ms; }
  [data-enter="5"] { animation-delay: 380ms; animation-duration: 1.2s; }

  @keyframes enter {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
  }

  /* Scroll-linked reveals: tied to scroll position, so they never fight the reader. The fade
     completes within 200px of entering, so tall blocks are fully opaque long before they are
     read, and very short viewports (e.g. 400% zoom) skip it entirely. */
  @supports (animation-timeline: view()) {
    @media (min-height: 480px) {
      [data-reveal] {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 200px;
      }
    }

    /* Starts at 40% (never invisible), so fixed-viewport screenshots and previews show the content. */
    @keyframes reveal {
      from {
        opacity: 0.4;
        transform: translateY(28px);
      }
    }
  }
}

/* ---------- Accessibility preferences ---------- */

@media (prefers-reduced-transparency: reduce) {
  .nav[data-scrolled] {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --muted: var(--ink-soft);
    --hairline: rgb(17 17 19 / 0.35);
    --hairline-strong: rgb(17 17 19 / 0.6);
  }

  .nav[data-scrolled] {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --hairline: rgb(255 255 255 / 0.4);
    --hairline-strong: rgb(255 255 255 / 0.65);
  }
}