/* ============================================================
   THE DOCUMENTS

   One stylesheet for every plain page the site serves: the two privacy
   notices and, since 2026-10-18, the eight pages beside the canvas -
   STUDIO, WORK, PLUGINS and CONTACT in two languages
   (`scripts/make-pages.mjs`).

   It was inline until the Spanish notice existed; two copies of the same
   rules is two things to keep in step. Now it is ten pages' worth, which
   settles the question for good.

   They are all the same kind of object: the site's ground, its face and
   its brand mark, and no application at all.
   ============================================================ */

@font-face {
  font-family: 'Montserrat';
  src: url('/derived/fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/derived/fonts/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/derived/fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  --ground: #f6f5f5;
  --ink: #1a1a1a;
  --muted: #6b6b6b;
  --rule: #d8d8d8;
  --accent: #eb682f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 6vw 12vh;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 7vh 0 6vh;
}

header img {
  width: clamp(44px, 5vw, 62px);
  height: auto;
}

.back {
  font-size: 0.78em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
}

.back:hover,
.back:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
}

.eyebrow {
  font-size: 0.75em;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

h1 {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.updated {
  color: var(--muted);
  font-size: 0.82em;
  margin: 0 0 6vh;
}

h2 {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 5vh 0 12px;
  padding-top: 3vh;
  border-top: 1px solid var(--rule);
}

p {
  margin: 0 0 14px;
}

ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

li {
  margin-bottom: 8px;
}

dl {
  margin: 0 0 14px;
}

dt {
  font-weight: 600;
  margin-top: 14px;
}

dd {
  margin: 2px 0 0;
  color: var(--muted);
}

/* Only three weights are loaded here - 400, 500 and 600 - so `strong` is
   given the 600 the files actually carry. Left at the browser's default
   700 it was synthesised from the regular, which on a document meant to be
   compared against a register is the wrong kind of approximate. */
strong {
  font-weight: 600;
}

/* ---- The registered name -------------------------------------------
   The controller's name is the one string in this document that has to be
   matched against a state register, character for character, so it is set
   to be read slowly: a shade larger than the sentence around it, with a
   little air between the letters.

   NOT underlined, and deliberately. Links in this document are marked by
   an underline in the accent colour and by nothing else, so a rule under
   the name would read as a link that goes nowhere. Weight and space carry
   the emphasis instead.

   It stays inside its sentence. Lifted out into a line of its own it would
   read as a signature; it is a fact, and the sentence around it is what
   says which fact. And it is allowed to WRAP - the name is 28 characters
   and the page is read at 320px too, where holding it on one line would
   push the paragraph past the edge. A name broken across two lines is
   still the same name; a name running off the screen is not readable at
   all. */
.legal-name {
  font-size: 1.06em;
  letter-spacing: 0.015em;
}

a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

footer {
  margin-top: 8vh;
  padding-top: 3vh;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.78em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none;
  }
}

/* The header's right-hand pair: the other language, and the way back. */
.switch {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  margin: 0;
}

.switch > a {
  font-size: 0.78em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
}

.switch > a:hover,
.switch > a:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
}


/* ============================================================
   THE PAGES BESIDE THE CANVAS

   Everything below is used only by the generated documents. The two
   notices never reach these selectors, so their measured composition
   (`CONTACT-PRIVACY-002`) is untouched by any of it.
   ============================================================ */

h3 {
  font-size: 0.92em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2.6vh 0 10px;
}

/* The plugin's own one-line subtitle, under its name. */
.sub {
  color: var(--muted);
  margin-top: -6px;
}

/* ---- The gallery, as a list ----------------------------------------
   A document, not a viewer: one column on a phone, two from 700px, three
   from 1100px. Every figure reserves its box from the width and height
   the generator measured off the file, so nothing shifts as the pictures
   arrive - and every picture is `loading="lazy"`, because this page
   names everything in the folder and the folder is 29 MB.
   -------------------------------------------------------------------- */
.work-list {
  list-style: none;
  margin: 4vh 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vh, 54px) clamp(18px, 2vw, 32px);
}

@media (min-width: 700px) {
  .work-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .work-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.work-list li {
  margin: 0;
}

.work-list figure {
  margin: 0;
}

/* One ratio for every tile, so the captions sit on a line together.
   This is an INDEX, not the viewer: the uncropped work, portrait ones
   included, is what the canvas shows (`WORK-VERTICAL-001`). The measured
   width/height attributes stay on the element - they hold the box before
   this stylesheet has arrived; `aspect-ratio` overrides them once it
   has. */
.work-list img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background-color: #e6e4e2;
}

.work-list figcaption {
  margin-top: 10px;
  font-size: 0.78em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.9;
}

.work-list figcaption strong {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

.work-list figcaption span {
  display: block;
  color: var(--muted);
}

/* ---- The way on, and the way back ---------------------------------- */
.doc-nav {
  margin-top: 6vh;
}

.doc-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 28px);
}

.doc-nav a,
.social a {
  font-size: 0.82em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
}

.doc-nav a:hover,
.doc-nav a:focus-visible,
.social a:hover,
.social a:focus-visible {
  border-color: var(--ink);
}

.social {
  list-style: none;
  margin: 3vh 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 28px);
}