/* Autonomouse
   Pen-and-ink: a navy ink line on cool paper, with pencil yellow kept for
   focus and selection. One typeface, Atkinson Hyperlegible Next, chosen for
   legibility. The mouse sketching itself on the home page is the one flourish. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/atkinson-next-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/atkinson-next-latin-italic.woff2") format("woff2");
}

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

:root {
  --paper: #f4f6f9;
  --panel: #e8ecf3;
  --ink: #18213b;
  --muted: #4a546e;
  --rule: #c5ccd9;
  --link: #2a44c2;
  --mark: #ffd23f;
  --on-mark: #18213b;

  --font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;

  /* Type scale: 14 / 16 / 18 / 21 / 24 / 30 / 36 / 48 */
  --step--1: 0.875rem;
  --step-0: 1.125rem;
  --step-1: 1.3125rem;
  --step-2: 1.5rem;
  --step-3: 1.875rem;
  --step-4: 2.25rem;
  --step-5: 3rem;

  --gutter: clamp(1rem, 4vw, 3rem);
  --measure: 38rem;
  --page: 76rem;

  --logo-fill: var(--paper);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121a2e;
    --panel: #1a2440;
    --ink: #eef1f7;
    --muted: #aab3c8;
    --rule: #334063;
    --link: #a9b7ff;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #121a2e;
  --panel: #1a2440;
  --ink: #eef1f7;
  --muted: #aab3c8;
  --rule: #334063;
  --link: #a9b7ff;
  color-scheme: dark;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1.5rem;
}

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.55;
  font-variant-numeric: proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main:focus {
  outline: none;
}

h1,
h2,
h3 {
  line-height: 1.15;
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.16em;
}

/* Focus: pencil-yellow highlight with an ink underline, on any background.
   Listed with the muted link styles so it always beats their colour. */
a:focus-visible,
.toc__list a:focus-visible,
.site-footer a:focus-visible {
  outline: 3px solid transparent;
  background: var(--mark);
  color: var(--on-mark);
  box-shadow: 0 -2px var(--mark), 0 4px var(--on-mark);
  text-decoration: none;
}

button:focus-visible {
  outline: 3px solid var(--mark);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px var(--ink);
}

::selection {
  background: var(--mark);
  color: var(--on-mark);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--mark);
  color: var(--on-mark);
  font-weight: 700;
  transform: translateY(-120%);
}

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

/* ---------- The mouse ---------- */

.mouse {
  display: block;
  color: var(--ink);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.mouse--mark {
  width: 2.5rem;
  height: auto;
  aspect-ratio: 326 / 307;
  stroke-width: 1.25px;
}

/* The hero mouse's paths have their transforms baked in, so one stroke width
   (in drawing units) gives every line the same weight. No non-scaling-stroke:
   it breaks pathLength dashes in some browsers. */
.mouse--hero {
  width: 100%;
  height: auto;
  stroke-width: 2.6;
}

@media (min-width: 52rem) {
  .mouse--hero {
    stroke-width: 1.4;
  }
}

/* The mouse sketches itself once, line by line, then opens its eyes.
   Each line ends solid, so the finished drawing never depends on dash maths. */
@media (prefers-reduced-motion: no-preference) {
  .mouse--hero :is(path, ellipse) {
    animation: sketch 0.7s cubic-bezier(0.55, 0, 0.35, 1) both;
    animation-delay: calc(0.15s + var(--i) * 0.09s);
  }

  .mouse--hero .pupil {
    transform-box: fill-box;
    transform-origin: center;
    transform: scaleY(0);
    animation: blink 0.5s ease-out 2.1s forwards;
  }
}

@keyframes sketch {
  /* Hidden until it starts: a round cap on an empty dash would show as a dot. */
  0% {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    stroke-opacity: 0;
  }
  2% {
    stroke-opacity: 1;
  }
  99.9% {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

@keyframes blink {
  0% {
    transform: scaleY(0);
  }
  60% {
    transform: scaleY(1.15);
  }
  100% {
    transform: scaleY(1);
  }
}

/* ---------- Header ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding: 1.25rem var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

.brand__name {
  font-size: var(--step-1);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand:focus-visible .mouse {
  color: var(--on-mark);
  --logo-fill: var(--mark);
}

.site-nav {
  margin-right: auto;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
}

.theme-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: 999px;
}

.theme-switch[hidden] {
  display: none;
}

.theme-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 44px;
  min-height: 40px;
  padding: 0.25rem 0.8rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}

.theme-switch svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Narrow screens: icons only, the labels stay available to screen readers. */
@media (max-width: 39.99rem) {
  .theme-switch button {
    padding-inline: 0;
  }

  .theme-switch__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.theme-switch button:hover {
  color: var(--ink);
}

.theme-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Home ---------- */

.hero {
  display: grid;
  gap: 2rem var(--gutter);
  align-items: center;
  padding-block: clamp(1rem, 5vh, 4rem) clamp(3rem, 8vh, 6rem);
}

.hero__art {
  width: min(48vw, 15rem);
}

.hero__title {
  margin: 0 0 1.5rem;
  font-size: clamp(3.25rem, 11vw, 7.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.hero__lead {
  max-width: 32rem;
  margin: 0 0 2.5rem;
  font-size: var(--step-1);
  line-height: 1.5;
}

.products {
  display: grid;
  gap: 0;
  max-width: 34rem;
  margin: 0 0 2.5rem;
  border-top: 2px solid var(--ink);
}

.product {
  padding-block: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.product dt {
  font-size: var(--step-1);
  font-weight: 750;
  letter-spacing: -0.01em;
}

.product dd {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

.hero__contact {
  margin: 0;
  color: var(--muted);
}

@media (min-width: 52rem) {
  .hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    min-height: calc(100svh - 12rem);
  }

  .hero__art {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 30rem;
    justify-self: end;
  }

  .hero__text {
    grid-column: 1;
    grid-row: 1;
  }
}

/* ---------- Policy pages ---------- */

.policy-layout {
  display: grid;
  gap: 2.5rem 4rem;
  padding-block: clamp(1.5rem, 5vh, 3.5rem) 5rem;
}

.policy-head h1 {
  max-width: 20ch;
  margin: 0 0 1rem;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.policy-head__meta {
  margin: 0;
  color: var(--muted);
}

.toc__title {
  margin: 0 0 0.75rem;
  font-size: var(--step-0);
  font-weight: 700;
}

.toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--rule);
}

.toc__list a {
  display: block;
  padding: 0.35rem 0 0.35rem 1rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.35;
  text-decoration: none;
}

.toc__list a:hover {
  border-left-color: var(--ink);
  color: var(--ink);
}

.toc__list a:focus-visible {
  border-left-color: var(--on-mark);
  box-shadow: none;
}

@media (max-width: 63.99rem) {
  .toc__list {
    columns: 2 14rem;
    column-gap: 1.5rem;
  }

  .toc__list li {
    break-inside: avoid;
  }
}

@media (min-width: 64rem) {
  .policy-layout {
    grid-template-columns: 15rem minmax(0, var(--measure));
  }

  .policy-head {
    grid-column: 1 / -1;
  }

  .toc {
    position: sticky;
    top: 1.5rem;
    align-self: start;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }
}

/* ---------- Products ---------- */

.products-layout {
  padding-block: clamp(1.5rem, 5vh, 3.5rem) 5rem;
}

.products-layout h1 {
  margin: 0 0 2rem;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* As wide as a product page's contents list, gap and article together, so
   both pages share the same right edge. */
.products-layout .products {
  max-width: calc(15rem + 4rem + var(--measure));
}

.product dt a {
  color: var(--ink);
}

.product dt a:hover {
  color: var(--link);
}

.product .product__price {
  color: var(--ink);
  font-weight: 700;
}

.product-head__up {
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.product-head__up a {
  color: var(--muted);
}

.product-head__up a::before {
  content: "← ";
}

.product-head__lead {
  max-width: var(--measure);
  margin: 0 0 1.25rem;
  font-size: var(--step-1);
  line-height: 1.5;
}

.product-head__price {
  max-width: var(--measure);
  margin: 0 0 1.5rem;
  color: var(--muted);
}

.product-head__price strong {
  color: var(--ink);
  font-size: var(--step-2);
  font-weight: 800;
}

.product-head__cta {
  margin: 0;
}

/* Wide screens: the head spans both grid columns, so filling it puts its
   right edge in line with the article's. */
@media (min-width: 64rem) {
  .product-head__lead,
  .product-head__price {
    max-width: none;
  }
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
}

.button:hover {
  background: var(--link);
}

/* ---------- Prose ---------- */

.prose {
  max-width: var(--measure);
}

.prose > :first-child {
  margin-top: 0;
}

.prose h2 {
  margin: 3.25rem 0 1rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--ink);
  font-size: var(--step-3);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.prose h3 {
  margin: 2.25rem 0 0.5rem;
  font-size: var(--step-1);
  font-weight: 700;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1.1rem;
}

.prose ul,
.prose ol {
  padding-left: 1.4rem;
}

.prose li + li {
  margin-top: 0.45rem;
}

.prose li::marker {
  color: var(--muted);
}

.prose strong {
  font-weight: 700;
}

.prose code {
  font-family: inherit;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* "The short version" summary sits on a panel so it reads as an overview. */
.prose > h2:first-of-type {
  margin-top: 2.5rem;
}

.prose > h2:first-of-type + ul {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem 1.25rem 2.6rem;
  background: var(--panel);
  border-radius: 4px;
}

/* ---------- 404 ---------- */

.not-found__body {
  max-width: var(--measure);
  padding-block: clamp(2rem, 10vh, 6rem);
}

.not-found__body h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

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

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding: 1.5rem var(--gutter) 2rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: var(--step--1);
}

.site-footer p {
  margin: 0;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--muted);
}

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

/* ---------- Forced colours and print ---------- */

@media (forced-colors: active) {
  .theme-switch button[aria-pressed="true"] {
    border: 2px solid ButtonText;
  }

  .mouse {
    --logo-fill: Canvas;
  }
}

@media print {
  .site-header .theme-switch,
  .skip-link,
  .toc {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  .prose a::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}