/* Shared by every Soo page: fonts, palette tokens, and the two-layer stack */
@font-face { font-family: "Soo Wappen"; src: url("fonts/Soo-Wappen.woff2") format("woff2"), url("fonts/Soo-Wappen.woff") format("woff"); font-display: block; }
@font-face { font-family: "Soo Thread"; src: url("fonts/Soo-Thread.woff2") format("woff2"), url("fonts/Soo-Thread.woff") format("woff"); font-display: block; }
@font-face { font-family: "Soo Completed"; src: url("fonts/Soo-Completed.woff2") format("woff2"), url("fonts/Soo-Completed.woff") format("woff"); font-display: block; }

:root {
  --navy: #14213D;
  --red: #FF4F2B;
  --yellow: #FFD23F;
  --cream: #F6EEDF;
  --pink: #FF8FB1;
  --teal: #1FB5A6;
  --black: #111111;
  --sans: "Baloo 2", "Arial Rounded MT Bold", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: 24px;
  /* page palette, set on load and by the recolor button */
  --bg: #FF4F2B;
  --ink: #14213D;
  --patch: #14213D;
  --thread: #FFD23F;
}
@media (max-width: 600px) { :root { --gutter: 16px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.5; overflow-x: hidden; transition: background-color .6s ease; }
a { color: inherit; }
::selection { background: var(--yellow); color: var(--navy); }

/* Stack both layers in one grid cell: identical advance widths keep line breaks in sync */
.soo { display: inline-grid; line-height: 1.05; letter-spacing: 0; font-kerning: none; font-size: var(--size, 1em); }
.soo > span { grid-area: 1 / 1; white-space: pre-wrap; overflow-wrap: anywhere; }
.soo .w { font-family: "Soo Wappen"; color: var(--patch); transition: color .45s; }
.soo .t { font-family: "Soo Thread"; color: var(--thread); transition: color .45s; }
.soo .c { font-family: "Soo Completed"; color: var(--patch); display: none; }
[data-mode="wappen"] .soo .t, [data-mode="thread"] .soo .w { visibility: hidden; }
[data-mode="completed"] .soo .w, [data-mode="completed"] .soo .t { display: none; }
[data-mode="completed"] .soo .c { display: block; }
.sub { font-size: clamp(17px, 1.6vw, 21px); max-width: 640px; margin: 0 0 56px; }
footer { background: none; color: var(--ink);   /* sits on the page color, like the header */
  padding: 28px var(--gutter); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
footer a { text-decoration: none; border-bottom: 2px solid transparent; }
footer a:hover, footer a[aria-current="page"] { border-color: currentColor; }

/* Header bar with the site menu */
.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px var(--gutter); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.top a { text-decoration: none; border-bottom: 2px solid transparent; }
.top nav { display: flex; gap: 24px; }
.top nav a:hover, .top nav a[aria-current="page"] { border-color: currentColor; }
@media (max-width: 600px) { .top { font-size: 12px; } .top nav { gap: 14px; } .top .brand-long { display: none; } }

/* Titles: the patch letters are placed one by one, then the thread is stitched.
   Nothing moves until the title gets .in — on load for page titles, when scrolled into view for sections —
   and it plays once. Width fits the content column (max 1280px): each letter is about 0.52em wide.
   Gap below = 1/5 of the letter height (the letters fill 0.97em of the 1em box, minus the text's own top space). */
.title { display: inline-grid; line-height: 1; font-weight: normal; margin: 0 0 calc(0.178em - 9px);   /* 9px: space above capitals in the copy (Baloo 2, 21px) */
  font-size: min(300px, calc((min(100vw, 1280px) - 2 * var(--gutter)) / (var(--len) * 0.52))); }
.title > span { white-space: pre; }
.title .ch { display: inline-block; opacity: 0; }
.title .t { clip-path: inset(-10% 100% -10% -10%); }
.title.in .ch { animation: place .9s cubic-bezier(.3,.7,.2,1) calc(.1s + var(--i) * .09s) both; }
.title.in .t { animation: stitch 1.1s ease-in-out calc(.5s + var(--len) * .09s) both; }
/* Seen from above: in the air a patch looks bigger, tilted, with a wide soft shadow */
@keyframes place {
  0%   { opacity: 0; transform: rotate(var(--tilt)) scale(1.6); filter: drop-shadow(14px 28px 36px rgba(0,0,0,.35)); }
  20%  { opacity: 1; }
  80%  { opacity: 1; transform: rotate(0) scale(1); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  90%  { opacity: 1; transform: scale(.98); }                 /* pressed into the cloth */
  100% { opacity: 1; transform: none; filter: none; }
}
/* Scattered section titles: visible from the start, gathered by scrolling (index.html), stitched when in place */
.title.scatter .ch { opacity: 1; animation: none; }
.title.scatter.in .t { animation-delay: 0s; }   /* stitch the moment the last patch is in place */

/* Titles skipped past (jumped over) just appear finished */
.title.skip .ch { opacity: 1; animation: none; }
.title.skip .t { clip-path: none; animation: none; }
@keyframes stitch { from { clip-path: inset(-10% 100% -10% -10%); } to { clip-path: inset(-10% -10% -10% -10%); } }
@media (prefers-reduced-motion: reduce) {
  .title .ch { opacity: 1; animation: none !important; }
  .title .t { clip-path: none; animation: none !important; }
}

/* Section and page titles, and the line of copy under them, sit centered */
.sec > .title, .page > .title { display: grid; width: fit-content; margin-left: auto; margin-right: auto; }
.sec > .sub, .page > .sub { margin-left: auto; margin-right: auto; text-align: center; }

/* Other elements' first appearance (reveal.js): text rises in, patch-like pieces settle onto the cloth */
.reveal { opacity: 0; }
.reveal.in { animation: rise .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s) both; }
.reveal.patch.in { animation: settle .8s cubic-bezier(.3,.7,.2,1) var(--d, 0s) both; }
.reveal.skip { animation: none; opacity: 1; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes settle {
  from { opacity: 0; transform: rotate(var(--tilt, 0deg)) scale(1.15); filter: drop-shadow(8px 16px 20px rgba(0,0,0,.3)); }
  to   { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; animation: none !important; } }

/* Content lines are running stitches with round ends in the thread color, like the dividers
   (19px stitch, 9px gap, 3px thick — what the dividers' 16px round-capped dashes look like). The tiles --stitch-h / --stitch-v are drawn by theme.js (sooStitches)
   in the current thread color and repeated along each edge as background layers. */

/* Needle cursor (cursor.js): the system cursor is hidden everywhere and a drawn needle with a trailing thread
   follows the mouse instead. */
.needle-on, .needle-on * { cursor: none !important; }
.needle-cursor { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2147483647; overflow: hidden; }   /* clipped, so a needle at the edge can't widen the page */
.needle-cursor .n-thread { fill: none; stroke: var(--thread); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.needle-cursor .n-body { fill: var(--ink); stroke: var(--bg); stroke-width: 2; paint-order: stroke; stroke-linejoin: round; }
.needle-cursor .n-eye { fill: var(--bg); }