/* Prompt Kinetics: styles shared by every page. Colour tokens, type, the header, buttons, forms and the footer. */
/* The fonts, served from this site (see SOURCES.md): Archivo for headings, as one variable file covering widths
   100-125% and weights 400-800; Public Sans for text, in regular, semibold and italic. Both SIL Open Font License. */
@font-face { font-family: "Archivo"; src: url("fonts/archivo/Archivo-Variable.woff2") format("woff2");
  font-weight: 400 800; font-stretch: 100% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/public-sans/PublicSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/public-sans/PublicSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/public-sans/PublicSans-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* The palette (chosen 2026-11-11): four neutrals, two pastels, and the pastels' deeper companions for light grounds. */
  --graphite: #1A1C1F; --charcoal: #33373C; --ash: #8B9096; --bone: #ECEAE6;
  --mint: #9FE2BF; --ice-blue: #A8CDE8; --jade: #00A86B; --deep-ice-blue: #529BD1;

  /* Dark mode, the default: graphite ground, bone ink; mint and ice blue for lines and fills alike. */
  --ground: var(--graphite); --raised: #272A2E; --rule: var(--charcoal); --muted: var(--ash); --ink: var(--bone);
  --accent: var(--mint); --accent2: var(--ice-blue); --logo-wake: var(--mint); --logo-circle: var(--ice-blue);
  --cta: var(--mint); --on-cta: var(--graphite); --cta-edge: transparent; --field: #6E6E6F; --warn: #F0786A;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --pad: max(clamp(16px, 4vw, 48px), calc((100vw - 1360px) / 2)); /* the content is at most 1360px wide, centred */
  color-scheme: dark;
}
/* Light mode: bone ground, graphite ink. The pastels are too pale for lines here, so they are used only as fills (the
   button, with a graphite edge and text); lines take jade and deep ice blue, and the mark is graphite. */
:root[data-mode="light"] {
  --ground: var(--bone); --raised: #F6F6F4; --rule: #CACBCA; --muted: var(--charcoal); --ink: var(--graphite);
  --accent: var(--jade); --accent2: var(--deep-ice-blue); --logo-wake: var(--graphite); --logo-circle: var(--graphite);
  --cta-edge: var(--graphite); --field: #838383; --warn: #B8432F;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 1rem/1.5 var(--body); }
h1, h2, p, ol, figure { margin: 0; }
ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

/* Header: the mark and name, and the Dark/Light switch */
.top { color: var(--ink); position: absolute; inset: 0 0 auto 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; padding: 20px var(--pad); padding-left: max(var(--pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad), env(safe-area-inset-right, 0px)); }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand svg { height: 30px; width: auto; display: block; }
.brand span { font: 700 1.05rem/1 var(--display); font-stretch: 112%; letter-spacing: 0.01em; white-space: nowrap; }
.wk { stroke: var(--logo-wake); fill: none; stroke-width: 4.5; stroke-linejoin: miter; }
.bc { stroke: var(--logo-circle); fill: none; stroke-width: 4.5; stroke-linecap: butt; }
.mode { flex: none; display: flex; padding: 2px; border: 1px solid var(--rule); border-radius: 999px; font: 600 0.72rem/1 var(--display); font-stretch: 108%; letter-spacing: 0.04em; }
.mode button { padding: 6px 10px; border-radius: 999px; color: var(--muted); }
.mode button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
/* The narrowest phones: the name and the switch stay on one row. */
@media (max-width: 360px) { .top { gap: 8px; } .brand { gap: 8px; } .brand span { font-size: 0.9rem; } .mode button { padding: 6px 8px; } }

/* Buttons, headings, forms and the footer */
.cta { display: inline-block; margin-top: 6px; padding: 15px 22px; border-radius: 3px; background: var(--cta); color: var(--on-cta); box-shadow: inset 0 0 0 1.5px var(--cta-edge, transparent); text-decoration: none;
  font: 650 0.9rem/1 var(--display); font-stretch: 112%; letter-spacing: 0.03em; }
@media (hover: hover) { .cta:hover { filter: brightness(1.08); } }
h2 { font: 700 clamp(1.35rem, 2.4vw, 1.9rem)/1.1 var(--display); font-stretch: 112%; letter-spacing: -0.01em; text-wrap: balance; }
form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 980px; }
label { display: grid; gap: 6px; font-size: 0.8rem; color: var(--muted); }
.wide { grid-column: 1 / -1; }
input, textarea { font: 400 1rem/1.4 var(--body); color: var(--ink); background: var(--raised); border: 1px solid var(--field); border-radius: 3px; padding: 11px 12px; width: 100%; resize: vertical; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); border-radius: 3px; }
::placeholder { color: var(--muted); opacity: 0.75; }
[aria-invalid="true"] { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.send { display: flex; align-items: center; gap: 16px; }
.send .cta { margin: 0; padding: 15px 26px; cursor: pointer; }
#sent { color: var(--muted); font-size: 0.85rem; }
#sent a, .note a { color: var(--ink); }
button:disabled { cursor: default; opacity: 0.6; }
.note { color: var(--muted); font-size: 0.8rem; }
/* The form's honeypot: out of sight and out of the tab order, so only bots fill it in. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
footer { padding: 20px var(--pad) 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; color: var(--muted); font-size: 0.8rem; border-top: 1px solid var(--rule); }
@media (max-width: 640px) { form { grid-template-columns: minmax(0, 1fr); } }

/* A plain page: a heading and a little text, under the header (the 404 page). */
.plain { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: 20px; padding: 120px var(--pad) 80px; }
.plain h1 { font: 700 clamp(2rem, 5vw, 4rem)/1.05 var(--display); font-stretch: 112%; letter-spacing: -0.015em; text-wrap: balance; }