/* Insert Human — inserthuman.com
   One stylesheet, no build step. Tokens first; everything else reads them.

   The look is a risograph print: five spot inks, a logotype printed in two
   inks slightly off register, halftone dots, and chunky buttons.
   By day the inks multiply onto a pale gradient, as ink does on paper. By
   night they screen onto a dark one, so overlaps glow instead of darken. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* Riso inks */
  --blue: #0078bf;
  --pink: #ff48b0;
  --yellow: #ffe800;
  --green: #00a95c;
  --orange: #ff6c2f;

  /* Heading ink: tomato by day, the logotype's pink by night. The bright
     inks are too faint on pale paper and the deep ones too dim on navy. */
  --heading: #d2515e;

  /* Reading ink: deep midnight blue, for text, outlines and button shadows */
  --ink: #1c2550;
  --soft: #4a5277;
  --on-ink: #1c2550;        /* text on a bright ink, day or night */
  --card: #fffdf8;
  --sky-top: #f6f1e7;
  --sky-bottom: #e2e9ee;

  --print: multiply;        /* how ink meets the page */

  --line: 3px solid var(--ink);
  --pop: 5px 5px 0 var(--ink);
  --gutter: clamp(16px, 4vw, 48px);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --heading: var(--pink);
    --ink: #eef0f7;
    --soft: #b7bdd6;
    --card: #1f2433;
    --sky-top: #12141c;
    --sky-bottom: #1d2232;

    --print: screen;
  }
}

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

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

html {
  background: var(--sky-top);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
  color: var(--ink);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.1875rem;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

.wrap { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--yellow);
  color: var(--on-ink);
  border: var(--line);
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.caps {
  font-size: 0.8125rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.condensed {
  font-weight: 900;
  font-stretch: 62%;
  line-height: 0.86;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

/* ---------- Print ---------- */

/* The logotype: two drums, slightly off register. The first ink, then the
   second on top at full strength. The second copy is aria-hidden; screen
   readers hear the word once. */
.two-ink { position: relative; display: block; isolation: isolate; }
.two-ink > span { display: block; mix-blend-mode: var(--print); }
.two-ink > span + span { position: absolute; inset: 0; transform: translate(0.035em, 0.025em); }

/* Every other heading: one pass of the heading ink. */
.one-ink { display: block; color: var(--heading); }

.ink-blue { color: var(--blue); }
.ink-pink { color: var(--pink); }

/* A little grain where the ink didn't quite take. */
.grain {
  -webkit-mask: url("/img/ink-grain.webp") 0 0 / 256px;
  mask: url("/img/ink-grain.webp") 0 0 / 256px;
}

/* Halftone: --ink-colour printed through a dot screen. The dots are baked
   into SVG masks by tools/halftones.mjs, which also holds each tone. */
.ht {
  position: absolute;
  mix-blend-mode: var(--print);
  pointer-events: none;
}
.ht::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ink-colour, var(--yellow));
  -webkit-mask: var(--halftone) 0 0 / var(--halftone-size, 100% 100%);
  mask: var(--halftone) 0 0 / var(--halftone-size, 100% 100%);
}

/* ---------- Buttons (chunky, with a hard shadow; they press in) ---------- */

/* Printed, not drawn: the face (fill and key line) and the hard shadow are
   two passes of ink inside the button's own box, which keeps --room to the
   right and below for the shadow. Buttons print clean, without the grain,
   so they read as things to press. Pressing moves the face onto its
   shadow; the shadow stays put. */
.btn {
  --face: var(--sky-top);   /* an unfilled button is paper */
  --sh: 5px;                /* shadow offset at rest */
  --room: 8px;
  --pad-y: 15px;
  --pad-x: 27px;
  --h: 52px;
  --press: 4px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: calc(var(--h) + var(--room));
  padding: var(--pad-y) calc(var(--pad-x) + var(--room)) calc(var(--pad-y) + var(--room)) var(--pad-x);
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 800;
  font-stretch: 100%;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: transform 0.12s ease;
}
.btn::before,
.btn::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  transition: transform 0.12s ease;
}
.btn::before {   /* the face */
  z-index: -1;
  inset: 0 var(--room) var(--room) 0;
  background: var(--face);
  border: 3px solid var(--ink);
}
.btn::after {    /* the shadow */
  z-index: -2;
  inset: var(--sh) calc(var(--room) - var(--sh)) calc(var(--room) - var(--sh)) var(--sh);
  background: var(--ink);
}
.btn:hover { transform: translate(-2px, -2px); }
.btn:hover::after { transform: translate(2px, 2px); }
.btn:active { transform: translate(var(--press), var(--press)); }
.btn:active::after { transform: translate(calc(-1 * var(--press)), calc(-1 * var(--press))); }
/* Focus: an underline and a heavier key line, which suit the pill better than a ring. */
.btn:focus-visible { outline: none; text-decoration: underline 3px; text-underline-offset: 5px; }
.btn:focus-visible::before { border-width: 5px; }
.btn--pink { --face: var(--pink); color: var(--on-ink); }
.btn--yellow { --face: var(--yellow); color: var(--on-ink); }
.btn--orange { --face: var(--orange); color: var(--on-ink); }
.btn--small { --sh: 3px; --room: 6px; --pad-y: 9px; --pad-x: 19px; --h: 40px; --press: 2px; font-size: 0.9375rem; }
.btn--big { --pad-y: 19px; --pad-x: 35px; --h: 64px; font-size: clamp(1.125rem, 1rem + 0.8vw, 1.625rem); }
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before,
  .btn::after { transition: none; }
}

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

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
}
.site-header nav { display: flex; align-items: center; gap: 28px; }
.site-header a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.site-header a:not(.btn):hover { text-decoration: underline; text-underline-offset: 6px; }

/* ---------- Hero ---------- */

/* The hero runs to the edges of the screen and clips there, so the sun can
   hang off the side without making the page scroll sideways. */
.hero,
.lost {
  position: relative;
  margin-inline: calc(-1 * var(--gutter));
  padding: 56px var(--gutter) 48px;
  overflow-x: clip;
}
/* The sky is the hero and the pines under it. By day the sun rises from
   behind the pines, is highest at solar noon, and sinks behind them by
   sunset: sun.js sets --sun-up from 0 (its centre on the horizon, the
   ground under the trees) to 1 (noon, the top of the sky), once per page
   load. Without sun.js it's always noon. The sky clips at the ground, so a
   low sun is cut off there and a set one is out of sight. */
.sky { position: relative; overflow: clip; }
.sky > .treeline { position: relative; }   /* the pines print over the sun */
.ht--sun {
  --sun-up: 1;
  --sun-size: min(40vw, 480px);
  --sun-noon: 10px;   /* the top of the sun at noon */
  /* 2% in from the hero's right edge; the hero is at most 1180px wide. */
  right: calc((100% - min(100%, 1180px)) / 2 + min(100%, 1180px) * 0.02);
  top: calc((1 - var(--sun-up)) * 100% + var(--sun-up) * (var(--sun-noon) + var(--sun-size) / 2) - var(--sun-size) / 2);
  width: var(--sun-size);
  aspect-ratio: 1;
  border-radius: 50%;
  --ink-colour: var(--yellow);
  --halftone: url("/img/halftone-sun.svg");
}
.ht--sun.is-down { display: none; }
/* By night the sun gives way to tonight's moon (moon.js masks it to its
   phase), printed in pale ink over a faint blue earthshine disc. */
.ht--moon,
.ht--moon-shade {
  display: none;
  right: 6%;
  top: 30px;
  width: min(32vw, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: auto;
}
.ht--moon-shade {
  opacity: 0.4;
  --ink-colour: var(--blue);
  --halftone: url("/img/halftone-moon-shade.svg");
}
.ht--moon {
  --ink-colour: #fff3c4;
  --halftone: url("/img/halftone-moon.svg");
  -webkit-mask: var(--moon-lit, none) center / 100% 100% no-repeat;
  mask: var(--moon-lit, none) center / 100% 100% no-repeat;
}
@media (prefers-color-scheme: dark) {
  .ht--sun { display: none; }
  .ht--moon,
  .ht--moon-shade { display: block; }
}
.logotype { position: relative; font-size: clamp(5rem, 2rem + 12vw, 12.5rem); }
.tagline {
  position: relative;
  max-width: 15em;
  margin-top: 34px;
  font-size: clamp(1.7rem, 1rem + 2.2vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.lede { position: relative; max-width: 30em; margin-top: 18px; color: var(--soft); }
.actions { position: relative; display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }

/* ---------- Pines ---------- */

/* Screen-printed treelines, edge to edge. Each ink is a layer: blue pines
   behind, then a yellow pass slipped off register, then green on top.
   Where they overlap the inks mix, as they do on the press. */
/* The drawings are 3000 units wide with headroom above the tallest tree.
   The height below sets the scale; narrower screens crop the sides, never
   the tops. */
.trees {
  display: block;
  width: 100%;
  height: clamp(130px, 18vw, 250px);
  mix-blend-mode: var(--print);
}
.trees g { mix-blend-mode: var(--print); }
.trees-back { fill: var(--blue); opacity: 0.85; }
.trees-shine { fill: var(--yellow); }
.trees-front { fill: var(--green); }
.treeline--footer .trees { height: clamp(90px, 12vw, 180px); }
/* By night the inks glow; a full yellow pass would bleach the green pines. */
@media (prefers-color-scheme: dark) {
  .trees-shine { opacity: 0.3; }
}

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

section { position: relative; padding: 80px 0; }
.section-title { font-size: clamp(3.4rem, 1.6rem + 6vw, 7rem); margin-bottom: 44px; }

/* Poster: flyers stapled to a pole, one framed in a phone's viewfinder, and
   the plan it became. Inline SVG printed like the pines: flat inks with the
   grain, type in the dark ink that stays dark on a bright flyer. */
.poster {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.poster-art { position: relative; container-type: inline-size; }
.poster-art > svg { display: block; width: 100%; height: auto; mix-blend-mode: var(--print); }
.pa-pole { fill: var(--blue); }
.pa-wood { fill: none; stroke: var(--on-ink); stroke-width: 2; opacity: 0.2; }
.pa-yellow { fill: var(--yellow); }
.pa-pink { fill: var(--pink); }
.pa-orange { fill: var(--orange); }
.pa-green { fill: var(--green); }
.pa-blue { fill: var(--blue); }
.pa-type { fill: var(--on-ink); }
.pa-over { mix-blend-mode: multiply; }   /* a second ink on a printed flyer */
.pa-big { font-weight: 900; font-stretch: 62%; letter-spacing: -0.005em; }
.pa-small { font-weight: 700; font-stretch: 125%; letter-spacing: 0.12em; }
.pa-frame { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
/* The plan the flyer became: printed like a small button, but it isn't one.
   It scales with the art and sits on its bottom edge, so it covers next to
   nothing on a phone. */
/* What the phone says once the flyer is snapped: a flat notification, tilted
   like the flyers, with no key line or shadow, so it reads as part of the
   picture rather than a button. Dark on light by night, light on dark by day. */
.poster-chip {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.75em 1.1em;
  border-radius: 8px;
  background: var(--ink);
  color: var(--sky-top);
  transform: translateY(50%) rotate(-3deg);
  font-size: clamp(0.625rem, 2.4cqi, 0.8125rem);
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}
.poster-chip svg { width: 1.25em; height: 1.25em; fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.poster-copy { position: relative; }
/* Project names are subheadings: about two thirds the size of a section title. */
.poster h3,
.aquarius h3 { font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem); }
.poster h3 { display: flex; align-items: center; gap: 0.2em; }
.poster p { margin-top: 18px; max-width: 24em; }
.poster .btn { margin-top: 28px; }
/* A rubber stamp: a heavy ring, a thin ring inside it, and heavy type that
   runs over both rings, with the grain where the ink didn't quite take.
   Each letter has a knockout edge (white by day, black by night, which
   vanish under multiply and screen), so the words cut through the rings.
   The box is wider than the rings so the grain mask covers the overflow.
   It sits beside the project name, overhanging the line above and below. */
.stamp {
  --knockout: #fff;
  --ring: 10px;   /* box edge to outer ring */
  --size: 108px;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--size);
  height: var(--size);
  margin-block: -28px;
  color: var(--green);
  font-size: 1.625rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 0.95;
  text-align: center;
  text-indent: 0.06em;   /* balances the trailing letter-space */
  text-shadow:
    3px 0 var(--knockout), -3px 0 var(--knockout), 0 3px var(--knockout), 0 -3px var(--knockout),
    2px 2px var(--knockout), -2px -2px var(--knockout), 2px -2px var(--knockout), -2px 2px var(--knockout);
  transform: rotate(-12deg);
  mix-blend-mode: var(--print);
}
.stamp::before,
.stamp::after {
  content: "";
  position: absolute;
  z-index: -1;   /* under the words */
  border-radius: 50%;
}
.stamp::before { inset: var(--ring); border: 5px solid currentColor; }
.stamp::after { inset: calc(var(--ring) + 8px); border: 2px solid currentColor; }
@media (prefers-color-scheme: dark) {
  .stamp { --knockout: #000; }
}

/* Aquarius: green halftone waves */
.aquarius {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin-top: 120px;
  padding: 64px 56px;
}
.ht--waves {
  inset: 0;
  opacity: 0.9;
  --ink-colour: var(--green);
  --halftone: url("/img/halftone-waves.svg");
  --halftone-size: 480px 240px;
}
.aquarius h3 { position: relative; }
/* The notice: a yellow sheet pasted over the waves at a slight angle. The
   sheet takes the grain; the words and button on it print clean, in the
   dark ink, day or night. */
.aquarius .card {
  --ink: var(--on-ink);
  position: relative;
  isolation: isolate;
  padding: 28px 30px 24px;
  color: var(--on-ink);
  transform: rotate(-1.5deg);
}
.aquarius .card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--yellow);
  -webkit-mask: url("/img/ink-grain.webp") 0 0 / 256px;
  mask: url("/img/ink-grain.webp") 0 0 / 256px;
}
.aquarius .card .btn { --face: var(--yellow); }
.aquarius .card p:not(.caps) { margin: 8px 0 20px; }

/* Principles */
.principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 64px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.principles li { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: start; }
.principles .n { font-size: 4.75rem; mix-blend-mode: var(--print); }
.principles li:nth-child(1) .n { color: var(--pink); }
.principles li:nth-child(2) .n { color: var(--blue); }
.principles li:nth-child(3) .n { color: var(--green); }
.principles li:nth-child(4) .n { color: var(--orange); }
.principles li:nth-child(5) .n { color: var(--blue); }
.principles li:nth-child(6) .n { color: var(--pink); }
.principles h3 { margin-bottom: 4px; font-size: 1.375rem; font-weight: 800; }
.principles p { color: var(--soft); }

/* Contact */
.hello {
  display: grid;
  justify-items: center;
  gap: 30px;
  padding: 110px 0 120px;
  text-align: center;
}
/* Shrinks with the screen below 400px, so "Got an idea, a bug," keeps to one line. */
.hello h2 { font-size: min(6.4rem, max(min(3rem, 12vw), 1.4rem + 5vw)); }
.hello-note { color: var(--soft); }

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

.site-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 26px 0 44px;
}

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

.lost .logotype { font-size: clamp(7rem, 3rem + 18vw, 18rem); }
.lost .tagline { margin-top: 28px; }
.lost { padding-bottom: 40px; }

/* ---------- Small screens ---------- */

@media (max-width: 820px) {
  .site-header nav a:not(.btn) { display: none; }
  .ht--sun { --sun-size: 70vw; --sun-noon: 20px; right: -16vw; }
  .ht--moon,
  .ht--moon-shade { width: 52vw; right: -6vw; top: 30px; }
  .poster,
  .aquarius,
  .principles { grid-template-columns: 1fr; }
  .aquarius { padding: 40px 20px; }
  .stamp { --ring: 8px; --size: 84px; margin-block: -24px; font-size: 1.25rem; }
  .stamp::before { border-width: 4px; }
  .stamp::after { inset: calc(var(--ring) + 6px); }
}
/* The smallest phones: a slimmer big button, so the email address fits. */
@media (max-width: 374px) {
  .btn--big { --pad-x: 22px; font-size: 1rem; }
}
/* Phones: halftones with fewer, larger cells, so the dots keep their size. */
@media (max-width: 560px) {
  .ht--sun { --halftone: url("/img/halftone-sun-small.svg"); }
  .ht--moon { --halftone: url("/img/halftone-moon-small.svg"); }
  .ht--moon-shade { --halftone: url("/img/halftone-moon-shade-small.svg"); }
}