/* Why & Wherefore.
   One typeface, Crimson Pro. The logo and the end mark are squares; the tangle and the list marks
   are hand-drawn, with the tremor in the paths themselves. Only the logo goes through the #stamp
   filter (base.njk): it is the only textured element. */

@font-face {
  font-family: "Crimson Pro";
  src: url("/fonts/crimsonpro.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("/fonts/crimsonpro-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* The four brand colours (see the brand guidelines): paper is the ground, deep does the
     structure and all text, teal draws the options in every drawing, amber marks the one thing
     chosen and appears only on deep. The rest are interface roles from the guidelines. */
  --deep: #1c204f;        /* oklch(0.27 0.085 275): header, opening, the ask, and text */
  --teal: #2b9ab1;        /* oklch(0.64 0.101 215): the options in the drawings */
  --accent: #f4c352;      /* oklch(0.84 0.140 85): the chosen path in the tangle, the email underline, the end mark */
  --ink: var(--deep);
  --paper: #f6f5f1;
  --soft: #4d526a;         /* text/secondary on paper */
  --hair: #eae9e7;         /* border/hairline on paper */
  --tint: #f4f6ff;         /* surface/tint on paper: the about band */
  --focus: #1498b1;        /* focus ring on paper; amber on deep */

  /* Type: one face. Sizes grow with the viewport between a phone and a wide desktop (ratio ~1.25). */
  --text: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);   /* 19–21px */
  --lede: clamp(1.375rem, 1.25rem + 0.55vw, 1.6875rem);  /* 22–27px */
  --ask: clamp(2rem, 1.55rem + 1.8vw, 3rem);             /* 32–48px */
  --email: clamp(1.4rem, 7.4vw - 0.2rem, 4.4rem);
  --display: clamp(3.75rem, 2rem + 7vw, 8.25rem);        /* 60–132px */

  --mark: clamp(52px, 2.8rem + 2vw, 72px);
  --gutter: max(20px, 4vw);
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
  font-size: var(--text);
  font-weight: 400;
  line-height: 1.45;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.defs { position: absolute; width: 0; height: 0; }

/* Everything drawn is a square, filled, hollow or dashed, in the one ink. */
svg .f { fill: var(--ink); }
svg .h { fill: none; stroke: var(--ink); stroke-width: 2.2; }
svg .d { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-dasharray: 3.5 3; }
svg .x, svg .ln { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: square; }

/* Header: the lockup — the five-square w and the name in Crimson Pro Bold. */

.site-head { padding-top: 28px; padding-bottom: 4px; background: var(--deep); color: var(--paper); }
.site-head svg .f { fill: currentColor; }
.site-head + main > .notice-wrap { }

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  text-decoration: none;
}
.lockup .mark { width: 33px; height: auto; display: block; }   /* squares 1.4 x-heights tall; the gap plus the mark's own margin = 1 x-height */
.name { font-weight: 700; font-size: 1.45rem; letter-spacing: -0.005em; line-height: 1; }
.lockup:hover .name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* Opening: the headline beside the jumble that resolves into the w. */

.opening { padding-top: clamp(48px, 8vw, 112px); padding-bottom: clamp(56px, 8vw, 112px); background: var(--deep); color: var(--paper); }


.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px clamp(24px, 4vw, 72px);
}

/* One word per line. */
h1 {
  flex: none;
  margin: 0;
  font-size: var(--display);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.025em;
}
h1 span { display: block; }

.tangle {
  flex: 1 1 480px;
  min-width: 0;
  max-width: 900px;
  height: auto;
  overflow: visible;
}
/* The drawings, to the guidelines' specification: options in teal, the one choice heaviest and drawn
   last, scribbles at 75% teal. No filters: the logo is the only textured element. */
.tangle path, .help svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.scribble { stroke: var(--teal); stroke-width: 1.5; opacity: 0.75; }
.branch, .bet { stroke: var(--teal); stroke-width: 2.3; }
.unclear { stroke-dasharray: 4.6 3.6 5.2 4.1; }
.node { stroke: var(--teal); stroke-width: 2.3; fill: var(--deep); }
.thread { stroke: var(--accent); stroke-width: 3.8; }
.node.chosen { stroke: var(--accent); stroke-width: 3.8; }
.arrive { stroke: var(--accent); stroke-width: 3.8; }
.point { fill: var(--accent); }
.help .chalk { stroke: var(--teal); stroke-width: 2.1; }
.help .amber { stroke: var(--deep); stroke-width: 2.9; }
.help .fine { stroke-width: 1.6; }
.help .dashed { stroke-dasharray: 4.6 3.6 5.2 4.1; }


/* What I can do for you: the list, then the mission block, both on paper. */

.help {
  max-width: 820px;
  padding-top: clamp(56px, 8vw, 112px);
  padding-bottom: clamp(56px, 8vw, 112px);
}

.help h2 {
  margin: 0 0 16px;
  font-size: var(--ask);
  font-weight: 400;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.help ul { margin: 0; padding: 0; list-style: none; }

.help li {
  display: grid;
  grid-template-columns: var(--mark) minmax(0, 1fr);
  column-gap: clamp(16px, 2vw, 28px);
  align-items: start;
  padding: 20px 0;
  font-size: var(--lede);
  line-height: 1.3;
  text-wrap: pretty;
}

.help svg { display: block; width: var(--mark); height: var(--mark); overflow: visible; }

/* About: Flo, straight after the opening, on its own pale band so it reads as a new section. */

.about { background: var(--tint); padding: clamp(56px, 8vw, 112px) 0; }
.about-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px clamp(32px, 6vw, 96px);
}
/* The photo is a cut-out: a rounded navy panel sits behind the lower two-thirds, and the head rises
   above it. The bottom of the photo is rounded to match the panel. */
.portrait {
  --r: 16px;
  position: relative;
  flex: 0 1 300px;
  width: 100%;
  max-width: 300px;
}
.portrait::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 68%;
  background: var(--deep);
  border-radius: var(--r);
}
.portrait img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 0 var(--r) var(--r);
}
.about-text { flex: 1 1 400px; min-width: 0; }
.about h2 {
  margin: 0;
  font-size: var(--ask);
  font-weight: 400;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.about .who { margin: 6px 0 20px; font-style: italic; color: var(--soft); }
.about p { max-width: 44ch; margin: 0; font-size: var(--lede); line-height: 1.38; text-wrap: pretty; }
.about .who, .about .more { font-size: var(--text); }
.about .more { margin-top: 20px; }
.about-text p + p:not(.more) { margin-top: 16px; }
.about .hello + p { margin-top: 20px; }
/* The three ways decisions go wrong: a drawing each, the same height, the same line weight. */
.decisions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px clamp(16px, 2.5vw, 32px);
  align-items: stretch;
  max-width: 760px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-weight: 400;
  line-height: 1.25;
}
.decisions li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.decisions .art { display: flex; align-items: center; justify-content: center; height: 44px; margin: 0; }
.decisions svg { display: block; height: 100%; width: auto; max-width: 100%; overflow: visible; }
.decisions svg path[stroke] { stroke-width: 3px; }
.about .aim { margin-top: 28px; max-width: 34ch; }
.about a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* Mission first (mostly). */

.mission { padding-top: clamp(56px, 8vw, 112px); }
.two-lines { margin-top: clamp(40px, 6vw, 80px); }
.mission .decisions { margin-bottom: 28px; }
.mission-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 32px clamp(32px, 6vw, 96px); }
.mission-text { flex: 1 1 420px; min-width: 0; }
.overlap { flex: 0 1 340px; width: 100%; max-width: 340px; height: auto; overflow: visible; }
.mission h2 {
  margin: 0 0 20px;
  font-size: var(--ask);
  font-weight: 400;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.mission p { max-width: 46ch; margin: 0 0 16px; font-size: var(--lede); line-height: 1.38; text-wrap: pretty; }

/* The ask: the page turns to ink. */

.ask { background: var(--deep); color: var(--paper); }
.ask svg .f { fill: var(--paper); }   /* one amber element per view: the email underline */

.invite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.5vw, 32px);
  padding-top: clamp(64px, 9vw, 128px);
  padding-bottom: max(clamp(64px, 9vw, 128px), env(safe-area-inset-bottom));
}

.question {
  max-width: 34ch;
  margin: 0;
  font-size: var(--ask);
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}

.email {
  color: inherit;
  font-size: var(--email);
  font-weight: 600;
  line-height: 1.05;
  white-space: nowrap;
  text-decoration-thickness: 0.05em;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.16em;
}
.email:hover { text-decoration-thickness: 0.09em; }

.nowrap { white-space: nowrap; }
.detail { margin: 0; max-width: 40ch; font-size: var(--lede); line-height: 1.38; }
.about .draft { color: var(--soft); font-style: italic; margin-top: 20px; }

/* The end mark: a filled square, as at the end of a proof. A decision, finished. Paper on deep. */
.end { display: block; width: 0.8em; height: 0.8em; font-size: var(--ask); margin-top: 4px; }

/* Footer */

.colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 32px;
  padding-top: 24px;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--hair);
}
main:has(> .ask:last-child) + .site-foot .colophon { border-top-color: transparent; }
.colophon p { margin: 0; }
.colophon nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.colophon a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* The privacy page */

.notice { max-width: 38rem; padding: clamp(48px, 8vw, 112px) 0 clamp(64px, 9vw, 128px); }
.notice h1 { font-size: var(--ask); font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; }
.notice .updated { margin: 8px 0 40px; color: var(--soft); font-style: italic; }
.notice h2 { margin: 40px 0 8px; font-size: var(--text); font-weight: 700; }
.notice h2::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; background: var(--deep); margin-right: 0.5em; vertical-align: 0.06em; }
.notice p, .notice ul { margin: 0 0 16px; }
.notice ul { padding-left: 1.2em; list-style: square; }
.notice li + li { margin-top: 8px; }
.notice a { color: inherit; text-underline-offset: 0.2em; overflow-wrap: anywhere; }

a:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
.site-head a:focus-visible, .opening a:focus-visible, .ask a:focus-visible { outline-color: var(--accent); }

/* Phones. The headline keeps one word per line; the tangle is left out, since below the headline it
   floats on its own. In the about section the photo shrinks and sits beside the greeting. */
@media (max-width: 600px) {
  .opening { padding-top: 40px; padding-bottom: 48px; }
  .tangle { display: none; }

  .about { padding: 48px 0; }
  .about-inner {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 0;
  }
  .about-text { display: contents; }
  .portrait { grid-column: 1; width: 112px; max-width: none; --r: 8px; }
  .hello { grid-column: 2; align-self: end; }
  .about .who { margin: 4px 0 0; }
  .about-text > :not(.hello) { grid-column: 1 / -1; }
  .about-text > p:first-of-type:not(.who) { margin-top: 20px; max-width: none; }
  .about .more { margin-top: 12px; }

  .decisions { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .decisions li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .decisions .art { height: 40px; margin: 0; }
}