/* tokens.css */
/*
 * Design tokens. The single place where colour, type and spacing are named. Every stylesheet in web/ uses
 * these custom properties and nothing else for those concerns. Colours mirror /brand.json (the build checks it).
 * The shell lane may add tokens and set the font stacks; it must not rename or remove the ones below.
 */
:root {
  /* One field, one ink, one light. The alarm colour is for the game only. */
  --field: #0e3b43;
  --ink: #f2e9dc;
  --light: #ff8a5b;
  --alarm: #e5484d;
  --ink-75: color-mix(in srgb, var(--ink) 75%, transparent);
  --ink-60: color-mix(in srgb, var(--ink) 60%, transparent);
  --ink-25: color-mix(in srgb, var(--ink) 25%, transparent);
  --ink-10: color-mix(in srgb, var(--ink) 10%, transparent);
  /* What lies under a dialog: the field itself, thick enough to push the page back. No fourth colour. */
  --scrim: color-mix(in srgb, var(--field) 82%, transparent);

  /* The same steps for anything set on the sand (an ink-coloured surface with field-coloured content). */
  --field-80: color-mix(in srgb, var(--field) 80%, transparent);
  --field-70: color-mix(in srgb, var(--field) 70%, transparent);
  --field-25: color-mix(in srgb, var(--field) 25%, transparent);
  --field-10: color-mix(in srgb, var(--field) 10%, transparent);

  /*
   * Type. Two self-hosted families (web/assets/fonts, SIL Open Font License 1.1; faces in fonts.css):
   *   Besley, a Clarendon, is the voice: headings and first-person prose.
   *   Barlow Semi Condensed is the evidence: labels, navigation, tables, live figures and their receipts.
   */
  --font-text: 'Barlow Semi Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Besley', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, monospace;
  --text-xs: 0.8125rem;   /* provenance lines: small, but still read as a sentence */
  --text-s: 0.9375rem;
  --text-m: clamp(1.0625rem, 1.3vw, 1.1875rem);
  --text-l: 1.5625rem;
  --text-xl: clamp(1.875rem, 3.1vw, 2.75rem);
  --text-value: clamp(1.75rem, 3vw, 2.625rem);  /* live figures; always tabular numerals */
  --text-title: clamp(2.375rem, 5.4vw, 4.75rem); /* the name of a page, set in the display face */
  --text-hero: clamp(2.5rem, 5.2vw, 5.25rem);    /* the tagline on the entry page */
  --leading-tight: 1.12;
  --leading-text: 1.55;

  /* Space and shape. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --radius: 5px;
  --hairline: 1px solid var(--ink-25);
  --hairline-sand: 1px solid var(--field-25);
  --target: 44px;          /* minimum size of anything clickable */
  --page-max: 1080px;

  /* Motion. Everything animated must also honour prefers-reduced-motion. */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: 160ms;
  --slow: 340ms;
}

/* fonts.css */
/*
 * The two font families, served from this origin (web/assets/fonts; licences beside the files).
 * `font-display: swap` shows text at once in the fallback and swaps when the file arrives; the two files the
 * first screen needs are preloaded by every document. The latin-ext files are only fetched for text that
 * needs them (a journal entry with accented names, say).
 */
@font-face {
  font-family: 'Besley';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/besley-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Besley';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/besley-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/barlow-semi-condensed-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/barlow-semi-condensed-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/barlow-semi-condensed-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-semi-condensed-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* tide.css */
/* Written by web/tools/build.mjs from web/site/tide.mjs. Do not edit: change the curve there. */
:root {
  --tide-period: 520px;
  --tide-amp: 60px;
  --tide-gap: 58px;
  --tide-float: 178px;
  --tide-strip: 156px;
  --band-edge: 26px;
}
.tide-float { shape-outside: polygon(98px 0px,102.6px 8px,106.9px 16px,109.7px 24px,110.6px 32px,109.6px 40px,107.2px 48px,104.3px 56px,104.3px 64px,105.4px 72px,105.5px 80px,104.5px 88px,102.2px 96px,98.9px 104px,95.4px 112px,94.5px 120px,96px 128px,97.1px 136px,97.2px 144px,96.1px 152px,94px 160px,91.2px 168px,89.9px 176px,91.4px 184px,92.4px 192px,92.1px 200px,90.1px 208px,86.4px 216px,81.4px 224px,76.7px 232px,75px 240px,72.9px 248px,69.4px 256px,64.2px 264px,57.4px 272px,49.5px 280px,41.5px 288px,37px 296px,33.5px 304px,29.3px 312px,24.4px 320px,18.7px 328px,12.7px 336px,7.1px 344px,5.3px 352px,6.2px 360px,7.4px 368px,8.4px 376px,9.2px 384px,9.9px 392px,11.1px 400px,15.2px 408px,22.7px 416px,30.4px 424px,37.6px 432px,44px 440px,49.4px 448px,54.2px 456px,60.2px 464px,69.3px 472px,77.9px 480px,85.2px 488px,90.6px 496px,94.2px 504px,96.2px 512px,98px 520px,178px 520px,178px 0px); }
.tide-edge { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22156%22 height=%22520%22 viewBox=%220 0 156 520%22%3E%3Cpath d=%22M0,0L98,0L100.1,4L102.6,8L104.9,12L106.9,16L108.5,20L109.7,24L110.4,28L110.6,32L110.3,36L109.6,40L108.6,44L107.2,48L105.7,52L104.3,56L103.9,60L104.3,64L104.9,68L105.4,72L105.6,76L105.5,80L105.2,84L104.5,88L103.5,92L102.2,96L100.7,100L98.9,104L97.1,108L95.4,112L94.3,116L94.5,120L95.2,124L96,128L96.6,132L97.1,136L97.3,140L97.2,144L96.8,148L96.1,152L95.2,156L94,160L92.6,164L91.2,168L90,172L89.9,176L90.6,180L91.4,184L92.1,188L92.4,192L92.5,196L92.1,200L91.3,204L90.1,208L88.4,212L86.4,216L84,220L81.4,224L78.8,228L76.7,232L75.8,236L75,240L74.1,244L72.9,248L71.4,252L69.4,256L67,260L64.2,264L61,268L57.4,272L53.6,276L49.5,280L45.3,284L41.5,288L38.9,292L37,296L35.3,300L33.5,304L31.5,308L29.3,312L27,316L24.4,320L21.6,324L18.7,328L15.7,332L12.7,336L9.7,340L7.1,344L5.5,348L5.3,352L5.6,356L6.2,360L6.8,364L7.4,368L7.9,372L8.4,376L8.9,380L9.2,384L9.6,388L9.9,392L10.4,396L11.1,400L12.4,404L15.2,408L18.8,412L22.7,416L26.6,420L30.4,424L34.1,428L37.6,432L40.9,436L44,440L46.8,444L49.4,448L51.8,452L54.2,456L56.7,460L60.2,464L64.6,468L69.3,472L73.7,476L77.9,480L81.7,484L85.2,488L88.1,492L90.6,496L92.6,500L94.2,504L95.4,508L96.2,512L96.9,516L98,520L0,520Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22156%22 height=%22520%22 viewBox=%220 0 156 520%22%3E%3Cpath d=%22M0,0L98,0L100.1,4L102.6,8L104.9,12L106.9,16L108.5,20L109.7,24L110.4,28L110.6,32L110.3,36L109.6,40L108.6,44L107.2,48L105.7,52L104.3,56L103.9,60L104.3,64L104.9,68L105.4,72L105.6,76L105.5,80L105.2,84L104.5,88L103.5,92L102.2,96L100.7,100L98.9,104L97.1,108L95.4,112L94.3,116L94.5,120L95.2,124L96,128L96.6,132L97.1,136L97.3,140L97.2,144L96.8,148L96.1,152L95.2,156L94,160L92.6,164L91.2,168L90,172L89.9,176L90.6,180L91.4,184L92.1,188L92.4,192L92.5,196L92.1,200L91.3,204L90.1,208L88.4,212L86.4,216L84,220L81.4,224L78.8,228L76.7,232L75.8,236L75,240L74.1,244L72.9,248L71.4,252L69.4,256L67,260L64.2,264L61,268L57.4,272L53.6,276L49.5,280L45.3,284L41.5,288L38.9,292L37,296L35.3,300L33.5,304L31.5,308L29.3,312L27,316L24.4,320L21.6,324L18.7,328L15.7,332L12.7,336L9.7,340L7.1,344L5.5,348L5.3,352L5.6,356L6.2,360L6.8,364L7.4,368L7.9,372L8.4,376L8.9,380L9.2,384L9.6,388L9.9,392L10.4,396L11.1,400L12.4,404L15.2,408L18.8,412L22.7,416L26.6,420L30.4,424L34.1,428L37.6,432L40.9,436L44,440L46.8,444L49.4,448L51.8,452L54.2,456L56.7,460L60.2,464L64.6,468L69.3,472L73.7,476L77.9,480L81.7,484L85.2,488L88.1,492L90.6,496L92.6,500L94.2,504L95.4,508L96.2,512L96.9,516L98,520L0,520Z%22/%3E%3C/svg%3E"); }
.tide-foam { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22156%22 height=%22520%22 viewBox=%220 0 156 520%22%3E%3CclipPath id=%22w%22%3E%3Cpath d=%22M0,0L98,0L100.1,4L102.6,8L104.9,12L106.9,16L108.5,20L109.7,24L110.4,28L110.6,32L110.3,36L109.6,40L108.6,44L107.2,48L105.7,52L104.3,56L103.9,60L104.3,64L104.9,68L105.4,72L105.6,76L105.5,80L105.2,84L104.5,88L103.5,92L102.2,96L100.7,100L98.9,104L97.1,108L95.4,112L94.3,116L94.5,120L95.2,124L96,128L96.6,132L97.1,136L97.3,140L97.2,144L96.8,148L96.1,152L95.2,156L94,160L92.6,164L91.2,168L90,172L89.9,176L90.6,180L91.4,184L92.1,188L92.4,192L92.5,196L92.1,200L91.3,204L90.1,208L88.4,212L86.4,216L84,220L81.4,224L78.8,228L76.7,232L75.8,236L75,240L74.1,244L72.9,248L71.4,252L69.4,256L67,260L64.2,264L61,268L57.4,272L53.6,276L49.5,280L45.3,284L41.5,288L38.9,292L37,296L35.3,300L33.5,304L31.5,308L29.3,312L27,316L24.4,320L21.6,324L18.7,328L15.7,332L12.7,336L9.7,340L7.1,344L5.5,348L5.3,352L5.6,356L6.2,360L6.8,364L7.4,368L7.9,372L8.4,376L8.9,380L9.2,384L9.6,388L9.9,392L10.4,396L11.1,400L12.4,404L15.2,408L18.8,412L22.7,416L26.6,420L30.4,424L34.1,428L37.6,432L40.9,436L44,440L46.8,444L49.4,448L51.8,452L54.2,456L56.7,460L60.2,464L64.6,468L69.3,472L73.7,476L77.9,480L81.7,484L85.2,488L88.1,492L90.6,496L92.6,500L94.2,504L95.4,508L96.2,512L96.9,516L98,520L0,520Z%22/%3E%3C/clipPath%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-linecap=%22round%22 clip-path=%22url(%23w)%22%3E%3Cpath stroke-width=%221.6%22 d=%22M100.2,0L101.1,4L101.5,8L101.5,12L101,16L100.2,20L98.9,24L97.5,28L95.9,32L94.9,36L95.1,40L95.6,44L96.2,48L96.5,52L96.6,56L96.4,60L95.9,64L95,68L93.9,72L92.5,76L90.8,80L89,84L87.2,88L85.7,92L85.3,96L85.9,100L86.6,104L87.3,108L87.9,112L88.2,116L88.3,120L88,124L87.5,128L86.7,132L85.6,136L84.3,140L82.9,144L81.5,148L80.8,152L81.2,156L82,160L82.8,164L83.3,168L83.5,172L83.3,176L82.7,180L81.7,184L80.3,188L78.5,192L76.3,196L73.8,200L71.1,204L68.6,208L67.2,212L66.4,216L65.6,220L64.6,224L63.2,228L61.4,232L59.3,236L56.7,240L53.7,244L50.3,248L46.5,252L42.5,256L38.4,260L34.3,264L31.1,268L28.9,272L27.2,276L25.4,280L23.5,284L21.5,288L19.2,292L16.7,296L14,300L11.2,304L8.2,308L5.2,312L2.2,316L-0.7,320L-2.9,324L-3.7,328L-3.6,332L-3.1,336L-2.5,340L-1.9,344L-1.4,348L-0.8,352L-0.4,356L0.1,360L0.4,364L0.8,368L1.2,372L1.7,376L2.6,380L4.6,384L8,388L11.7,392L15.6,396L19.5,400L23.3,404L26.9,408L30.3,412L33.5,416L36.4,420L39.1,424L41.6,428L44,432L46.4,436L49.3,440L53.3,444L57.9,448L62.5,452L66.9,456L70.9,460L74.5,464L77.7,468L80.4,472L82.7,476L84.5,480L85.8,484L86.8,488L87.6,492L88.4,496L90,500L92.4,504L94.8,508L97,512L98.8,516L100.2,520%22/%3E%3Cpath stroke-width=%221.2%22 stroke-dasharray=%2246 22%22 d=%22M85.7,0L84.3,4L83.9,8L84.3,12L84.9,16L85.4,20L85.6,24L85.5,28L85.2,32L84.5,36L83.5,40L82.2,44L80.7,48L78.9,52L77.1,56L75.4,60L74.3,64L74.5,68L75.2,72L76,76L76.6,80L77.1,84L77.3,88L77.2,92L76.8,96L76.1,100L75.2,104L74,108L72.6,112L71.2,116L70,120L69.9,124L70.6,128L71.4,132L72.1,136L72.4,140L72.5,144L72.1,148L71.3,152L70.1,156L68.4,160L66.4,164L64,168L61.4,172L58.8,176L56.7,180L55.8,184L55,188L54.1,192L52.9,196L51.4,200L49.4,204L47,208L44.2,212L41,216L37.4,220L33.6,224L29.5,228L25.3,232L21.5,236L18.9,240L17,244L15.3,248L13.5,252L11.5,256L9.3,260L7,264L4.4,268L1.6,272L-1.3,276L-4.3,280L-7.3,284L-10.3,288L-12.9,292L-14.5,296L-14.7,300L-14.4,304L-13.8,308L-13.2,312L-12.6,316L-12.1,320L-11.6,324L-11.1,328L-10.8,332L-10.4,336L-10.1,340L-9.6,344L-8.9,348L-7.6,352L-4.8,356L-1.2,360L2.7,364L6.6,368L10.4,372L14.1,376L17.6,380L20.9,384L24,388L26.8,392L29.4,396L31.8,400L34.2,404L36.7,408L40.2,412L44.6,416L49.3,420L53.7,424L57.9,428L61.7,432L65.2,436L68.1,440L70.6,444L72.6,448L74.2,452L75.4,456L76.2,460L76.9,464L78,468L80.1,472L82.6,476L84.9,480L86.9,484L88.5,488L89.7,492L90.4,496L90.6,500L90.3,504L89.6,508L88.6,512L87.2,516L85.7,520%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22156%22 height=%22520%22 viewBox=%220 0 156 520%22%3E%3CclipPath id=%22w%22%3E%3Cpath d=%22M0,0L98,0L100.1,4L102.6,8L104.9,12L106.9,16L108.5,20L109.7,24L110.4,28L110.6,32L110.3,36L109.6,40L108.6,44L107.2,48L105.7,52L104.3,56L103.9,60L104.3,64L104.9,68L105.4,72L105.6,76L105.5,80L105.2,84L104.5,88L103.5,92L102.2,96L100.7,100L98.9,104L97.1,108L95.4,112L94.3,116L94.5,120L95.2,124L96,128L96.6,132L97.1,136L97.3,140L97.2,144L96.8,148L96.1,152L95.2,156L94,160L92.6,164L91.2,168L90,172L89.9,176L90.6,180L91.4,184L92.1,188L92.4,192L92.5,196L92.1,200L91.3,204L90.1,208L88.4,212L86.4,216L84,220L81.4,224L78.8,228L76.7,232L75.8,236L75,240L74.1,244L72.9,248L71.4,252L69.4,256L67,260L64.2,264L61,268L57.4,272L53.6,276L49.5,280L45.3,284L41.5,288L38.9,292L37,296L35.3,300L33.5,304L31.5,308L29.3,312L27,316L24.4,320L21.6,324L18.7,328L15.7,332L12.7,336L9.7,340L7.1,344L5.5,348L5.3,352L5.6,356L6.2,360L6.8,364L7.4,368L7.9,372L8.4,376L8.9,380L9.2,384L9.6,388L9.9,392L10.4,396L11.1,400L12.4,404L15.2,408L18.8,412L22.7,416L26.6,420L30.4,424L34.1,428L37.6,432L40.9,436L44,440L46.8,444L49.4,448L51.8,452L54.2,456L56.7,460L60.2,464L64.6,468L69.3,472L73.7,476L77.9,480L81.7,484L85.2,488L88.1,492L90.6,496L92.6,500L94.2,504L95.4,508L96.2,512L96.9,516L98,520L0,520Z%22/%3E%3C/clipPath%3E%3Cg fill=%22none%22 stroke=%22black%22 stroke-linecap=%22round%22 clip-path=%22url(%23w)%22%3E%3Cpath stroke-width=%221.6%22 d=%22M100.2,0L101.1,4L101.5,8L101.5,12L101,16L100.2,20L98.9,24L97.5,28L95.9,32L94.9,36L95.1,40L95.6,44L96.2,48L96.5,52L96.6,56L96.4,60L95.9,64L95,68L93.9,72L92.5,76L90.8,80L89,84L87.2,88L85.7,92L85.3,96L85.9,100L86.6,104L87.3,108L87.9,112L88.2,116L88.3,120L88,124L87.5,128L86.7,132L85.6,136L84.3,140L82.9,144L81.5,148L80.8,152L81.2,156L82,160L82.8,164L83.3,168L83.5,172L83.3,176L82.7,180L81.7,184L80.3,188L78.5,192L76.3,196L73.8,200L71.1,204L68.6,208L67.2,212L66.4,216L65.6,220L64.6,224L63.2,228L61.4,232L59.3,236L56.7,240L53.7,244L50.3,248L46.5,252L42.5,256L38.4,260L34.3,264L31.1,268L28.9,272L27.2,276L25.4,280L23.5,284L21.5,288L19.2,292L16.7,296L14,300L11.2,304L8.2,308L5.2,312L2.2,316L-0.7,320L-2.9,324L-3.7,328L-3.6,332L-3.1,336L-2.5,340L-1.9,344L-1.4,348L-0.8,352L-0.4,356L0.1,360L0.4,364L0.8,368L1.2,372L1.7,376L2.6,380L4.6,384L8,388L11.7,392L15.6,396L19.5,400L23.3,404L26.9,408L30.3,412L33.5,416L36.4,420L39.1,424L41.6,428L44,432L46.4,436L49.3,440L53.3,444L57.9,448L62.5,452L66.9,456L70.9,460L74.5,464L77.7,468L80.4,472L82.7,476L84.5,480L85.8,484L86.8,488L87.6,492L88.4,496L90,500L92.4,504L94.8,508L97,512L98.8,516L100.2,520%22/%3E%3Cpath stroke-width=%221.2%22 stroke-dasharray=%2246 22%22 d=%22M85.7,0L84.3,4L83.9,8L84.3,12L84.9,16L85.4,20L85.6,24L85.5,28L85.2,32L84.5,36L83.5,40L82.2,44L80.7,48L78.9,52L77.1,56L75.4,60L74.3,64L74.5,68L75.2,72L76,76L76.6,80L77.1,84L77.3,88L77.2,92L76.8,96L76.1,100L75.2,104L74,108L72.6,112L71.2,116L70,120L69.9,124L70.6,128L71.4,132L72.1,136L72.4,140L72.5,144L72.1,148L71.3,152L70.1,156L68.4,160L66.4,164L64,168L61.4,172L58.8,176L56.7,180L55.8,184L55,188L54.1,192L52.9,196L51.4,200L49.4,204L47,208L44.2,212L41,216L37.4,220L33.6,224L29.5,228L25.3,232L21.5,236L18.9,240L17,244L15.3,248L13.5,252L11.5,256L9.3,260L7,264L4.4,268L1.6,272L-1.3,276L-4.3,280L-7.3,284L-10.3,288L-12.9,292L-14.5,296L-14.7,300L-14.4,304L-13.8,308L-13.2,312L-12.6,316L-12.1,320L-11.6,324L-11.1,328L-10.8,332L-10.4,336L-10.1,340L-9.6,344L-8.9,348L-7.6,352L-4.8,356L-1.2,360L2.7,364L6.6,368L10.4,372L14.1,376L17.6,380L20.9,384L24,388L26.8,392L29.4,396L31.8,400L34.2,404L36.7,408L40.2,412L44.6,416L49.3,420L53.7,424L57.9,428L61.7,432L65.2,436L68.1,440L70.6,444L72.6,448L74.2,452L75.4,456L76.2,460L76.9,464L78,468L80.1,472L82.6,476L84.9,480L86.9,484L88.5,488L89.7,492L90.4,496L90.6,500L90.3,504L89.6,508L88.6,512L87.2,516L85.7,520%22/%3E%3C/g%3E%3C/svg%3E"); }
.tide-wet { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22156%22 height=%22520%22 viewBox=%220 0 156 520%22%3E%3Cpath d=%22M98,0L100.1,4L102.6,8L104.9,12L106.9,16L108.5,20L109.7,24L110.4,28L110.6,32L110.3,36L109.6,40L108.6,44L107.2,48L105.7,52L104.3,56L103.9,60L104.3,64L104.9,68L105.4,72L105.6,76L105.5,80L105.2,84L104.5,88L103.5,92L102.2,96L100.7,100L98.9,104L97.1,108L95.4,112L94.3,116L94.5,120L95.2,124L96,128L96.6,132L97.1,136L97.3,140L97.2,144L96.8,148L96.1,152L95.2,156L94,160L92.6,164L91.2,168L90,172L89.9,176L90.6,180L91.4,184L92.1,188L92.4,192L92.5,196L92.1,200L91.3,204L90.1,208L88.4,212L86.4,216L84,220L81.4,224L78.8,228L76.7,232L75.8,236L75,240L74.1,244L72.9,248L71.4,252L69.4,256L67,260L64.2,264L61,268L57.4,272L53.6,276L49.5,280L45.3,284L41.5,288L38.9,292L37,296L35.3,300L33.5,304L31.5,308L29.3,312L27,316L24.4,320L21.6,324L18.7,328L15.7,332L12.7,336L9.7,340L7.1,344L5.5,348L5.3,352L5.6,356L6.2,360L6.8,364L7.4,368L7.9,372L8.4,376L8.9,380L9.2,384L9.6,388L9.9,392L10.4,396L11.1,400L12.4,404L15.2,408L18.8,412L22.7,416L26.6,420L30.4,424L34.1,428L37.6,432L40.9,436L44,440L46.8,444L49.4,448L51.8,452L54.2,456L56.7,460L60.2,464L64.6,468L69.3,472L73.7,476L77.9,480L81.7,484L85.2,488L88.1,492L90.6,496L92.6,500L94.2,504L95.4,508L96.2,512L96.9,516L98,520L95.7,520L91.3,516L86.6,512L82.2,508L78.7,504L76.2,500L73.8,496L71.4,492L68.8,488L66,484L62.9,480L59.6,476L56.1,472L52.4,468L48.6,464L44.7,460L40.8,456L37.2,452L34.4,448L33.1,444L32.4,440L31.9,436L31.6,432L31.2,428L30.9,424L30.4,420L29.9,416L29.4,412L28.8,408L28.2,404L27.6,400L27.3,396L27.5,392L29.1,388L31.7,384L34.7,380L37.7,376L40.7,372L43.6,368L46.4,364L49,360L51.3,356L53.5,352L55.5,348L57.3,344L59,340L60.9,336L63.5,332L67.3,328L71.5,324L75.6,320L79.4,316L83,312L86.2,308L89,304L91.4,300L93.4,296L94.9,292L96.1,288L97,284L97.8,280L98.7,276L100.8,272L103.4,268L106,264L108.4,260L110.4,256L112.1,252L113.3,248L114.1,244L114.5,240L114.4,236L114.1,232L113.4,228L112.6,224L111.9,220L112,216L113.2,212L114.6,208L116,204L117.2,200L118.1,196L118.8,192L119.2,188L119.3,184L119.1,180L118.6,176L118,172L117.2,168L116.5,164L116.3,160L117.4,156L119.1,152L120.9,148L122.7,144L124.2,140L125.5,136L126.5,132L127.2,128L127.5,124L127.6,120L127.4,116L126.9,112L126.3,108L125.9,104L126.3,100L127.7,96L129.2,92L130.6,88L131.6,84L132.3,80L132.6,76L132.4,72L131.7,68L130.5,64L128.9,60L126.9,56L124.6,52L122.1,48L120,44L118.9,40L118.2,36L117.4,32L116.2,28L114.6,24L112.6,20L110.1,16L107.2,12L103.7,8L99.9,4L95.7,0Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22156%22 height=%22520%22 viewBox=%220 0 156 520%22%3E%3Cpath d=%22M98,0L100.1,4L102.6,8L104.9,12L106.9,16L108.5,20L109.7,24L110.4,28L110.6,32L110.3,36L109.6,40L108.6,44L107.2,48L105.7,52L104.3,56L103.9,60L104.3,64L104.9,68L105.4,72L105.6,76L105.5,80L105.2,84L104.5,88L103.5,92L102.2,96L100.7,100L98.9,104L97.1,108L95.4,112L94.3,116L94.5,120L95.2,124L96,128L96.6,132L97.1,136L97.3,140L97.2,144L96.8,148L96.1,152L95.2,156L94,160L92.6,164L91.2,168L90,172L89.9,176L90.6,180L91.4,184L92.1,188L92.4,192L92.5,196L92.1,200L91.3,204L90.1,208L88.4,212L86.4,216L84,220L81.4,224L78.8,228L76.7,232L75.8,236L75,240L74.1,244L72.9,248L71.4,252L69.4,256L67,260L64.2,264L61,268L57.4,272L53.6,276L49.5,280L45.3,284L41.5,288L38.9,292L37,296L35.3,300L33.5,304L31.5,308L29.3,312L27,316L24.4,320L21.6,324L18.7,328L15.7,332L12.7,336L9.7,340L7.1,344L5.5,348L5.3,352L5.6,356L6.2,360L6.8,364L7.4,368L7.9,372L8.4,376L8.9,380L9.2,384L9.6,388L9.9,392L10.4,396L11.1,400L12.4,404L15.2,408L18.8,412L22.7,416L26.6,420L30.4,424L34.1,428L37.6,432L40.9,436L44,440L46.8,444L49.4,448L51.8,452L54.2,456L56.7,460L60.2,464L64.6,468L69.3,472L73.7,476L77.9,480L81.7,484L85.2,488L88.1,492L90.6,496L92.6,500L94.2,504L95.4,508L96.2,512L96.9,516L98,520L95.7,520L91.3,516L86.6,512L82.2,508L78.7,504L76.2,500L73.8,496L71.4,492L68.8,488L66,484L62.9,480L59.6,476L56.1,472L52.4,468L48.6,464L44.7,460L40.8,456L37.2,452L34.4,448L33.1,444L32.4,440L31.9,436L31.6,432L31.2,428L30.9,424L30.4,420L29.9,416L29.4,412L28.8,408L28.2,404L27.6,400L27.3,396L27.5,392L29.1,388L31.7,384L34.7,380L37.7,376L40.7,372L43.6,368L46.4,364L49,360L51.3,356L53.5,352L55.5,348L57.3,344L59,340L60.9,336L63.5,332L67.3,328L71.5,324L75.6,320L79.4,316L83,312L86.2,308L89,304L91.4,300L93.4,296L94.9,292L96.1,288L97,284L97.8,280L98.7,276L100.8,272L103.4,268L106,264L108.4,260L110.4,256L112.1,252L113.3,248L114.1,244L114.5,240L114.4,236L114.1,232L113.4,228L112.6,224L111.9,220L112,216L113.2,212L114.6,208L116,204L117.2,200L118.1,196L118.8,192L119.2,188L119.3,184L119.1,180L118.6,176L118,172L117.2,168L116.5,164L116.3,160L117.4,156L119.1,152L120.9,148L122.7,144L124.2,140L125.5,136L126.5,132L127.2,128L127.5,124L127.6,120L127.4,116L126.9,112L126.3,108L125.9,104L126.3,100L127.7,96L129.2,92L130.6,88L131.6,84L132.3,80L132.6,76L132.4,72L131.7,68L130.5,64L128.9,60L126.9,56L124.6,52L122.1,48L120,44L118.9,40L118.2,36L117.4,32L116.2,28L114.6,24L112.6,20L110.1,16L107.2,12L103.7,8L99.9,4L95.7,0Z%22/%3E%3C/svg%3E"); }
.shore-edge, .aside::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22520%22 height=%2226%22 viewBox=%220 0 520 26%22%3E%3Cpath d=%22M0,26L0,5.4L4,5L8,4.5L12,4L16,3.6L20,3.3L24,3.1L28,2.9L32,2.9L36,2.9L40,3.1L44,3.3L48,3.6L52,3.9L56,4.1L60,4.2L64,4.1L68,4L72,3.9L76,3.9L80,3.9L84,4L88,4.1L92,4.3L96,4.6L100,4.9L104,5.2L108,5.6L112,5.9L116,6.1L120,6.1L124,6L128,5.8L132,5.7L136,5.6L140,5.5L144,5.6L148,5.6L152,5.8L156,6L160,6.2L164,6.5L168,6.8L172,7L176,7L180,6.9L184,6.7L188,6.6L192,6.5L196,6.5L200,6.6L204,6.7L208,7L212,7.3L216,7.7L220,8.2L224,8.7L228,9.2L232,9.7L236,9.8L240,10L244,10.2L248,10.4L252,10.7L256,11.1L260,11.6L264,12.2L268,12.8L272,13.5L276,14.3L280,15.1L284,15.9L288,16.7L292,17.2L296,17.6L300,17.9L304,18.3L308,18.7L312,19.1L316,19.6L320,20.1L324,20.7L328,21.3L332,21.9L336,22.5L340,23.1L344,23.6L348,23.9L352,23.9L356,23.9L360,23.8L364,23.6L368,23.5L372,23.4L376,23.3L380,23.2L384,23.2L388,23.1L392,23L396,22.9L400,22.8L404,22.5L408,22L412,21.2L416,20.5L420,19.7L424,18.9L428,18.2L432,17.5L436,16.8L440,16.2L444,15.6L448,15.1L452,14.6L456,14.2L460,13.7L464,13L468,12.1L472,11.1L476,10.3L480,9.4L484,8.7L488,8L492,7.4L496,6.9L500,6.5L504,6.2L508,5.9L512,5.8L516,5.6L520,5.4L520,26Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22520%22 height=%2226%22 viewBox=%220 0 520 26%22%3E%3Cpath d=%22M0,26L0,5.4L4,5L8,4.5L12,4L16,3.6L20,3.3L24,3.1L28,2.9L32,2.9L36,2.9L40,3.1L44,3.3L48,3.6L52,3.9L56,4.1L60,4.2L64,4.1L68,4L72,3.9L76,3.9L80,3.9L84,4L88,4.1L92,4.3L96,4.6L100,4.9L104,5.2L108,5.6L112,5.9L116,6.1L120,6.1L124,6L128,5.8L132,5.7L136,5.6L140,5.5L144,5.6L148,5.6L152,5.8L156,6L160,6.2L164,6.5L168,6.8L172,7L176,7L180,6.9L184,6.7L188,6.6L192,6.5L196,6.5L200,6.6L204,6.7L208,7L212,7.3L216,7.7L220,8.2L224,8.7L228,9.2L232,9.7L236,9.8L240,10L244,10.2L248,10.4L252,10.7L256,11.1L260,11.6L264,12.2L268,12.8L272,13.5L276,14.3L280,15.1L284,15.9L288,16.7L292,17.2L296,17.6L300,17.9L304,18.3L308,18.7L312,19.1L316,19.6L320,20.1L324,20.7L328,21.3L332,21.9L336,22.5L340,23.1L344,23.6L348,23.9L352,23.9L356,23.9L360,23.8L364,23.6L368,23.5L372,23.4L376,23.3L380,23.2L384,23.2L388,23.1L392,23L396,22.9L400,22.8L404,22.5L408,22L412,21.2L416,20.5L420,19.7L424,18.9L428,18.2L432,17.5L436,16.8L440,16.2L444,15.6L448,15.1L452,14.6L456,14.2L460,13.7L464,13L468,12.1L472,11.1L476,10.3L480,9.4L484,8.7L488,8L492,7.4L496,6.9L500,6.5L504,6.2L508,5.9L512,5.8L516,5.6L520,5.4L520,26Z%22/%3E%3C/svg%3E"); }
.shore-line { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22520%22 height=%2226%22 viewBox=%220 0 520 26%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 d=%22M0,5.4L4,5L8,4.5L12,4L16,3.6L20,3.3L24,3.1L28,2.9L32,2.9L36,2.9L40,3.1L44,3.3L48,3.6L52,3.9L56,4.1L60,4.2L64,4.1L68,4L72,3.9L76,3.9L80,3.9L84,4L88,4.1L92,4.3L96,4.6L100,4.9L104,5.2L108,5.6L112,5.9L116,6.1L120,6.1L124,6L128,5.8L132,5.7L136,5.6L140,5.5L144,5.6L148,5.6L152,5.8L156,6L160,6.2L164,6.5L168,6.8L172,7L176,7L180,6.9L184,6.7L188,6.6L192,6.5L196,6.5L200,6.6L204,6.7L208,7L212,7.3L216,7.7L220,8.2L224,8.7L228,9.2L232,9.7L236,9.8L240,10L244,10.2L248,10.4L252,10.7L256,11.1L260,11.6L264,12.2L268,12.8L272,13.5L276,14.3L280,15.1L284,15.9L288,16.7L292,17.2L296,17.6L300,17.9L304,18.3L308,18.7L312,19.1L316,19.6L320,20.1L324,20.7L328,21.3L332,21.9L336,22.5L340,23.1L344,23.6L348,23.9L352,23.9L356,23.9L360,23.8L364,23.6L368,23.5L372,23.4L376,23.3L380,23.2L384,23.2L388,23.1L392,23L396,22.9L400,22.8L404,22.5L408,22L412,21.2L416,20.5L420,19.7L424,18.9L428,18.2L432,17.5L436,16.8L440,16.2L444,15.6L448,15.1L452,14.6L456,14.2L460,13.7L464,13L468,12.1L472,11.1L476,10.3L480,9.4L484,8.7L488,8L492,7.4L496,6.9L500,6.5L504,6.2L508,5.9L512,5.8L516,5.6L520,5.4%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22520%22 height=%2226%22 viewBox=%220 0 520 26%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 d=%22M0,5.4L4,5L8,4.5L12,4L16,3.6L20,3.3L24,3.1L28,2.9L32,2.9L36,2.9L40,3.1L44,3.3L48,3.6L52,3.9L56,4.1L60,4.2L64,4.1L68,4L72,3.9L76,3.9L80,3.9L84,4L88,4.1L92,4.3L96,4.6L100,4.9L104,5.2L108,5.6L112,5.9L116,6.1L120,6.1L124,6L128,5.8L132,5.7L136,5.6L140,5.5L144,5.6L148,5.6L152,5.8L156,6L160,6.2L164,6.5L168,6.8L172,7L176,7L180,6.9L184,6.7L188,6.6L192,6.5L196,6.5L200,6.6L204,6.7L208,7L212,7.3L216,7.7L220,8.2L224,8.7L228,9.2L232,9.7L236,9.8L240,10L244,10.2L248,10.4L252,10.7L256,11.1L260,11.6L264,12.2L268,12.8L272,13.5L276,14.3L280,15.1L284,15.9L288,16.7L292,17.2L296,17.6L300,17.9L304,18.3L308,18.7L312,19.1L316,19.6L320,20.1L324,20.7L328,21.3L332,21.9L336,22.5L340,23.1L344,23.6L348,23.9L352,23.9L356,23.9L360,23.8L364,23.6L368,23.5L372,23.4L376,23.3L380,23.2L384,23.2L388,23.1L392,23L396,22.9L400,22.8L404,22.5L408,22L412,21.2L416,20.5L420,19.7L424,18.9L428,18.2L432,17.5L436,16.8L440,16.2L444,15.6L448,15.1L452,14.6L456,14.2L460,13.7L464,13L468,12.1L472,11.1L476,10.3L480,9.4L484,8.7L488,8L492,7.4L496,6.9L500,6.5L504,6.2L508,5.9L512,5.8L516,5.6L520,5.4%22/%3E%3C/svg%3E"); }

/* crab.css */
/*
 * The character's colours and the small set of states its script switches. Any page can use the crab by
 * linking this file with tokens.css and importing /site/crab.mjs; nothing here depends on the page layout.
 * The crab is drawn in the ink of the surface it stands on: sand-coloured on the sea, sea-coloured on the sand.
 */
.crab {
  --crab-body: var(--ink);
  --crab-cut: var(--field);
  display: block;
  overflow: visible;
  -webkit-user-select: none;
  user-select: none;
}
.on-sand .crab,
.crab.on-sand,
.on-sand .shell-glyph,
.shell-glyph.on-sand {
  --crab-body: var(--field);
  --crab-cut: var(--ink);
}
.shell-glyph {
  --crab-body: var(--ink);
  --crab-cut: var(--field);
  display: block;
  overflow: visible;
}

.crab-body { fill: var(--crab-body); }
.crab-cut { fill: var(--crab-cut); }
.crab-light { fill: var(--light); }
.crab-alarm { fill: var(--alarm); }
.crab-part {
  stroke: var(--crab-cut);
  stroke-width: 3.6;
  stroke-linejoin: round;
  paint-order: stroke;
}
.crab-line {
  fill: none;
  stroke: var(--crab-cut);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.crab-feeler {
  fill: none;
  stroke: var(--crab-body);
  stroke-width: 3;
  stroke-linecap: round;
}
.crab-halo {
  fill: none;
  stroke: var(--crab-cut);
  stroke-width: 14;
  stroke-linecap: round;
}
.crab-stalk {
  fill: none;
  stroke: var(--crab-body);
  stroke-width: 7.5;
  stroke-linecap: round;
}
.crab-eye {
  fill: var(--light);
  stroke: var(--crab-body);
  stroke-width: 3.4;
}
.crab-eyehalo { fill: var(--crab-cut); }
.crab-pupil { fill: var(--field); }

/* The body is only clipped to the shell's opening while it is moving through it. */
.crab:not([data-state]) .crab-clip,
.crab[data-state='out'] .crab-clip { mask: none; }

/* Hidden until the crab is inside its shell; the script flips these, never the layout. */
.crab-door { visibility: hidden; }
.crab[data-state='in'] .crab-door,
.crab[data-state='peek'] .crab-door { visibility: visible; }
.crab[data-state='in'] .crab-out,
.crab[data-state='peek'] .crab-out,
.crab[data-state='in'] .crab-far,
.crab[data-state='peek'] .crab-far { visibility: hidden; }
.crab[data-state='in'] .crab-eyes { visibility: hidden; }

/* Small marks: drop the hairline details and thicken what is left so it survives at 40 pixels. */
.crab--mark .crab-fine,
.crab--mark .crab-feeler,
.shell-glyph--small .crab-fine { display: none; }
.crab--mark .crab-line,
.shell-glyph--small .crab-line { stroke-width: 6; }
.crab--mark .crab-stalk { stroke-width: 12; }
.crab--mark .crab-halo { stroke-width: 20; }
.crab--mark .crab-eye { stroke-width: 5; }

/* style.css */
/*
 * The shell's layout and components. Colours, type families and spacing come from tokens.css; the shore's
 * curve comes from tide.css, which the build writes. Nothing here names a colour.
 *
 * The page is a strip of beach seen from above. The sea (the field) carries what the crab says, in the
 * display face. The sand (the ink colour, used as a surface) carries what can be checked against the chain,
 * in the text face, and the crab itself. Between them runs the tide line, and the text's edge follows it.
 *
 * Narrow screens: one column on the sea; a band of sand along the bottom holds the navigation and the crab.
 * Wide screens: sea on the left, sand on the right; the shore runs down the page and scrolls with the text.
 */

/* --------------------------------------------------------------------------------------------- base --- */

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

:root {
  color-scheme: dark;
  --page-left: clamp(20px, 7vw, 132px);
  --line-max: 44rem;
  --nav-h: 76px;
  --band-h: 84px;
  --mast-top: clamp(14px, 3.6vh, 40px);
}

html {
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 100%;
  line-height: var(--leading-text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--ink-25) transparent;
}
body {
  margin: 0;
  min-height: 100dvh;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--light); color: var(--field); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
/* After a move the heading takes focus. A keyboard user sees that as a line under it, not a box across the shore. */
h1:focus { outline: none; }
h1:focus-visible { text-decoration: underline var(--light) 0.07em; text-underline-offset: 0.16em; }
[hidden] { display: none !important; }
html:not(.js) [data-needs-script] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 var(--space-4);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--field);
  font: 600 1rem var(--font-text);
  text-decoration: none;
  transform: translateY(-300%);
}
.skip:focus { transform: none; }

/* ------------------------------------------------------------------------------------------ controls --- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--field);
  font: 600 1.0625rem/1 var(--font-text);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.button:hover { background: var(--light); }
.button:active { transform: scale(0.97); }
.button--sand { background: var(--field); color: var(--ink); }
.button--sand:hover { background: var(--field); color: var(--light); }

.text-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 2px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.text-button:hover { text-decoration-thickness: 2px; }

/* ------------------------------------------------------------------------------- the sea (narrow) --- */

.sea {
  position: relative;
  z-index: 0;
  min-height: 100dvh;
  padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
}
.tide-floats { height: 0; }
.tide-float,
.tide-fill,
.tide-edge,
.tide-foam,
.tide-wet { display: none; }

.masthead { padding-top: var(--mast-top); }
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font: 800 1.625rem/1 var(--font-display);
  letter-spacing: -0.03em;
  text-decoration: none;
}
.wordmark:hover { text-decoration: underline; text-decoration-color: var(--light); text-decoration-thickness: 3px; }

main { display: block; outline: none; }

/* ----------------------------------------------------------------------------------- words on the sea --- */

.page {
  max-width: 40rem;
  padding: clamp(18px, 5vh, 56px) 0 var(--space-7);
  font-size: var(--text-m);
}
.page h1 {
  margin: 0 0 max(0.3em, 14px);
  font: 800 var(--text-title)/1.02 var(--font-display);
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.page h2 {
  margin: 2.1em 0 0.45em;
  font: 700 var(--text-l)/1.15 var(--font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.page p {
  margin: 0 0 0.95em;
  text-wrap: pretty;
}
.page .lead {
  margin-bottom: 1.3em;
  font-size: 1.3em;
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: -0.012em;
}
.page a:hover { text-decoration-color: var(--light); }
.notice,
.hint {
  font: 500 1.0625rem/1.45 var(--font-text);
}
.hint { display: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin: 1.6em 0 0; }
.actions-also { display: inline-flex; align-items: center; min-height: var(--target); font: 500 1.0625rem var(--font-text); }
.plain-list { margin: 0 0 1em; padding-left: 1.15em; }
.plain-list li { margin-bottom: 0.55em; padding-left: 0.2em; }
.plain-list li::marker { color: var(--light); }
/* A link that stands alone (in a list of links, or as a paragraph's only content) is a full-size target. */
.plain-list a,
.page p > a:only-child { display: inline-flex; align-items: center; min-height: var(--target); }
.plain-list li:has(a) { margin-bottom: 0; }

.entry-meta {
  display: block;
  margin: 0 0 0.4em;
  font: 500 1rem/1.3 var(--font-text);
  font-variant-numeric: tabular-nums;
}
.prose p { white-space: pre-line; }
/* An address set in the middle of the words: the text face, every digit the same width, easy to select. */
.token-line {
  font: 400 1.0625rem/1.5 var(--font-text);
}
.token-line .address { margin: 2px 0 0; font-size: 1.0625rem; }
.token-line .address-actions { justify-content: flex-start; }

/* Lists of functions and of journal entries. Rows are plain blocks so their lines follow the shore. */
.fn-list,
.entry-list {
  margin: 0.4em 0 0;
  padding: 0;
  list-style: none;
}
.fn-link {
  position: relative;
  display: block;
  min-height: 64px;
  padding: 13px 0 13px 70px;
  text-decoration: none;
}
.fn-link .shell-glyph {
  position: absolute;
  left: 0;
  top: 14px;
  width: 52px;
  height: 42px;
}
.fn-name {
  font: 700 1.4em/1.15 var(--font-display);
  letter-spacing: -0.025em;
}
.fn-link:hover .fn-name,
.entry-link:hover .entry-title {
  text-decoration: underline;
  text-decoration-color: var(--light);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.16em;
}
.fn-state {
  margin-left: 0.6em;
  font: 500 var(--text-s)/1 var(--font-text);
  white-space: nowrap;
}
.fn-state::before { content: '('; }
.fn-state::after { content: ')'; }
.fn-summary,
.entry-summary {
  display: block;
  margin-top: 3px;
  font: 400 1.0625rem/1.42 var(--font-text);
}
.fn-list--compact .fn-link { min-height: 52px; padding: 8px 0 8px 58px; }
.fn-list--compact .shell-glyph { top: 9px; width: 42px; height: 34px; }
.fn-list--compact .fn-name { font-size: 1.16em; }
.fn-list--compact .fn-summary { font-size: 1rem; }

.entry-link { display: block; padding: 12px 0; text-decoration: none; }
.entry-title {
  display: block;
  font: 700 1.32em/1.2 var(--font-display);
  letter-spacing: -0.02em;
}
.entry-link .entry-meta { margin: 0 0 2px; }

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-6);
  margin-top: 3em;
  font-family: var(--font-text);
}
.pager-link {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--target);
  text-decoration: none;
}
.pager-label { font-size: var(--text-s); font-weight: 500; }
.pager-name {
  font: 700 1.2rem/1.2 var(--font-display);
  letter-spacing: -0.02em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.pager-up {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-weight: 500;
}

/* A journal entry's title is a sentence somebody wrote, not a name: smaller, so it can run on. */
.page--article h1 { margin-bottom: 0.5em; font-size: var(--text-xl); line-height: var(--leading-tight); letter-spacing: -0.03em; }

/* Entry page: the tagline, large. On a wide screen its second sentence is set on the sand. */
.page--entry { padding-top: clamp(16px, 5vh, 64px); }
.tagline {
  position: relative;
  margin: 0 0 0.42em;
  font: 800 var(--text-hero)/1.02 var(--font-display);
  letter-spacing: -0.045em;
}
.page .tagline { font-size: var(--text-hero); }
.tagline-sea,
.tagline-sand { display: block; }
.page--entry .lead { max-width: 25em; }

/* --------------------------------------------------------------------------------- facts on the sand --- */

/* The quiet tones of whichever surface something is set on, and the colour of the focus ring there. The ring
   is never the control's own colour: a sand-coloured button on the sea would wear a ring nobody can see. */
:root { --quiet: var(--ink-75); --line: var(--ink-25); --track: var(--ink-10); --focus: var(--light); }
.on-sand { color: var(--field); --quiet: var(--field-80); --line: var(--field-25); --track: var(--field-10); --focus: var(--field); }

.rail { margin: var(--space-6) calc(-1 * max(20px, env(safe-area-inset-right))) 0 calc(-1 * max(20px, env(safe-area-inset-left))); }
.aside {
  position: relative;
  min-height: calc(var(--band-h) + 150px);
  padding: 30px max(20px, env(safe-area-inset-right)) calc(var(--band-h) + 56px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: var(--ink);
  font: 400 1rem/1.4 var(--font-text);
}
.aside::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: var(--band-edge);
  background: var(--ink);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: var(--tide-period) var(--band-edge);
  mask-size: var(--tide-period) var(--band-edge);
}
.aside > * { max-width: 34rem; }

.reading,
.card { margin: 0 0 var(--space-5); font: 400 1rem/1.4 var(--font-text); }
/* A page's second reading is written in two places; a narrow screen shows the one beside the first. */
.reading--after { display: none; }
.reading-title {
  margin: 0 0 var(--space-3);
  padding-bottom: 7px;
  border-bottom: 2px solid currentColor;
  font: 600 1.0625rem/1.2 var(--font-text);
}
.reading-body { min-height: 6.5rem; }
.reading-wait,
.reading-note { margin: 0; color: var(--quiet); }
html:not(.js) .reading-wait { display: none; }
html:not(.js) .reading-body { min-height: 0; }

.figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  margin: 0;
}
.figure-label {
  flex-basis: 100%;
  font-size: var(--text-s);
  font-weight: 500;
  color: var(--quiet);
}
.figure-value,
.figure--none {
  font: 600 var(--text-value)/1.08 var(--font-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
}
.figure-unit { font-size: 1.125rem; font-weight: 500; }
.figure-note { margin: 4px 0 0; font-size: var(--text-s); }

/* A meter is one ratio against its limit: a fill on a lighter track of the same colour. */
.meter {
  height: 10px;
  margin: 14px 0 5px;
  background: var(--line);
  border-radius: 0 4px 4px 0;
  overflow: hidden;
}
.meter-fill {
  display: block;
  height: 100%;
  background: currentColor;
  border-radius: 0 4px 4px 0;
}
.meter-label { margin: 0; font-size: var(--text-s); font-variant-numeric: tabular-nums; }

/* Bars: the parts of one fee, each a line under its own row, drawn against the whole. One colour; the
   labels carry the names. */
.bars {
  margin: var(--space-3) 0 var(--space-2);
  padding: 0;
  list-style: none;
}
.bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 6px 0 9px;
}
.bar-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--track);
}
.bar-mark {
  display: block;
  min-width: 2px;
  height: 100%;
  background: currentColor;
  border-radius: 0 2px 2px 0;
}

.facts { margin: var(--space-3) 0 0; }
.facts > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px var(--space-4);
  padding: 5px 0;
  border-top: 1px solid var(--line);
}
.facts dt { color: var(--quiet); }
.facts dd {
  margin: 0 0 0 auto;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.address {
  display: block;
  font: 500 0.9375rem/1.35 var(--font-text);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}
.address-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--space-4); }
.address-actions a { display: inline-flex; align-items: center; min-height: var(--target); }
.facts a { display: inline-flex; align-items: center; min-height: 28px; }
/* A full address or hash takes the row to itself, under its label. */
.facts > div:has(.address) { display: block; }
.facts > div:has(.address) dd { margin: 2px 0 0; text-align: left; }
.facts .address-actions { justify-content: flex-start; }

.receipt {
  margin: 10px 0 0;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.reading-status { margin: 8px 0 0; font-size: var(--text-s); font-weight: 500; }
.reading-status:empty { display: none; }
.reading-again { margin: 0; font-size: var(--text-s); font-variant-numeric: tabular-nums; }

.sources { font-size: 1rem; }
.sources-title { margin: 0; font: 600 1rem/1.3 var(--font-text); }
.sources ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sources a { display: inline-flex; align-items: center; min-height: var(--target); overflow-wrap: anywhere; }

.wardrobe-note { margin: 0 0 var(--space-3); font-size: 1.125rem; font-weight: 500; }
.wardrobe-now { margin: 0 0 var(--space-4); min-height: 2.8em; }
.wardrobe p { max-width: 26rem; }

/* --------------------------------------------------------------- navigation and the crab (narrow) --- */

.nav {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  bottom: env(safe-area-inset-bottom);
  z-index: 6;
  display: flex;
  align-items: center;
  height: var(--band-h);
  font: 500 1.0625rem/1 var(--font-text);
}
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 10px;
  text-decoration: none;
}
.nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.nav a[aria-current] { font-weight: 600; }
/* "You are here" is a bead, like an eye on a stalk. */
.nav a[aria-current]::before {
  content: '';
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: var(--light);
}

.shore {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: calc(var(--band-h) + env(safe-area-inset-bottom));
  background: var(--ink);
  pointer-events: none;
}
.shore-edge,
.shore-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: var(--band-edge);
  background: var(--ink);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: var(--tide-period) var(--band-edge);
  mask-size: var(--tide-period) var(--band-edge);
}
/* A tide mark along the band's edge, so the edge is still there when what slides under it is sand too. */
.shore-line { background: var(--field-25); }
/* The crab stands in the band, beside the navigation, drawn as large as that space allows. */
.shore-crab {
  position: absolute;
  right: max(8px, env(safe-area-inset-right));
  bottom: calc(5px + env(safe-area-inset-bottom));
  /* What the navigation beside it leaves free. */
  width: min(100vw - 262px, 168px);
  height: calc(var(--band-h) - 10px);
}
.shore-crab .crab { width: 100%; height: 100%; }

/* Entry: a taller band. The crab gets the upper part to itself and the navigation the row beneath it. */
html[data-route='entry'] { --band-h: 176px; --nav-row: 56px; }
html[data-route='entry'] .shore-crab { bottom: calc(var(--nav-row) + env(safe-area-inset-bottom)); width: min(74vw, 300px); height: calc(var(--band-h) - var(--nav-row) - 4px); }
html[data-route='entry'] .nav { height: var(--nav-row); }

.wave {
  position: fixed;
  inset: 0;
  z-index: 40;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (max-width: 380px) {
  .nav { font-size: 1rem; }
  .nav a { padding: 0 7px; }
  .shore-crab { width: calc(100vw - 238px); }
}

/* --------------------------------------------------------------------- wide: sea beside the sand --- */

@media (min-width: 960px) and (min-height: 560px) {
  :root {
    --tide-mean: 55vw;
    --sea-right: calc(var(--tide-mean) + var(--tide-amp));
    --content-left: max(var(--page-left), calc(var(--sea-right) - var(--tide-gap) - var(--line-max)));
    --strand-left: calc(var(--sea-right) + 46px);
    --strand-right: clamp(20px, 3vw, 48px);
    /* The crab is as tall as --crab-max unless the readings above it need the room (main.mjs then lowers
       --crab-h); without JavaScript the readings scroll inside their column instead. */
    --crab-max: clamp(150px, 30vh, 330px);
    --crab-h: var(--crab-max);
    --band-h: 0px;
  }
  body { background: var(--ink); }

  .sea {
    padding: 0 calc(100% - var(--sea-right)) 0 var(--content-left);
    /* Floats shape the text along the shore (tide.css). They hang from this box without stretching it, and
       the script keeps the run of them exactly as tall as the box (main.mjs, fit). */
  }
  .tide-float {
    display: block;
    float: right;
    clear: right;
    width: var(--tide-float);
    height: var(--tide-period);
  }
  .tide-fill,
  .tide-edge,
  .tide-foam,
  .tide-wet {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
  }
  .tide-fill { left: 0; width: calc(var(--tide-mean) - var(--tide-amp) + 1px); background: var(--field); }
  .tide-edge,
  .tide-foam,
  .tide-wet {
    left: calc(var(--tide-mean) - var(--tide-amp));
    width: var(--tide-strip);
    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;
    -webkit-mask-size: var(--tide-strip) var(--tide-period);
    mask-size: var(--tide-strip) var(--tide-period);
  }
  .tide-edge { background: var(--field); }
  .tide-foam { background: var(--ink-60); }
  .tide-wet { background: var(--field-10); }

  .page { max-width: none; padding-bottom: clamp(72px, 16vh, 150px); }
  .page section p,
  .prose p {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
  }
  /* The shore's floats switch the browser's own balancing of headings off. A title somebody wrote, and each
     row of a list of such titles, stands clear of the floats as a whole instead (a straight measure, well
     short of the water), and inside that box its lines are balanced again: no word left alone on the last. */
  .page--article h1,
  .entry-link { display: flow-root; }
  .hint { display: block; }
  @media (hover: none) { .hint { display: none; } }
  /* The column of readings is fixed and short here: it keeps the first, the rest close the article. */
  .reading--beside { display: none; }
  /* flow-root: the block stands clear of the shore's floats as a whole, so its rules stop short of the water. */
  .reading--after { display: flow-root; margin-top: 2.6em; }

  .nav {
    top: 0;
    bottom: auto;
    left: var(--strand-left);
    right: var(--strand-right);
    height: var(--nav-h);
    gap: var(--space-2);
  }
  .nav a { padding: 0 var(--space-3) 0 0; margin-right: var(--space-3); font-size: 1.125rem; }

  .rail {
    position: fixed;
    top: var(--nav-h);
    left: var(--strand-left);
    right: var(--strand-right);
    bottom: calc(var(--crab-h) + clamp(18px, 3vh, 34px));
    margin: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--field-25) transparent;
  }
  .aside {
    min-height: 0;
    padding: var(--space-2) var(--space-3) var(--space-4) 0;
    background: none;
  }
  .aside::before { display: none; }

  .shore {
    left: var(--strand-left);
    height: var(--crab-h);
    background: none;
  }
  .shore-edge,
  .shore-line { display: none; }
  .shore-crab {
    right: var(--strand-right);
    bottom: clamp(10px, 2.4vh, 26px);
    width: calc(100% - var(--strand-right));
    height: var(--crab-h);
    max-height: var(--crab-max);
  }

  /* Entry: one line across the shore. The first sentence floats; the second has landed. */
  html[data-route='entry'] { --crab-max: clamp(220px, 48vh, 500px); --band-h: 0px; }
  html[data-route='entry'] .shore-crab { bottom: clamp(10px, 2.4vh, 26px); width: calc(100% - var(--strand-right)); height: var(--crab-h); }
  html[data-route='entry'] .nav { height: var(--nav-h); }
  .page--entry { padding-top: clamp(40px, 13vh, 150px); }
  .tagline-sea,
  .tagline-sand { white-space: nowrap; }
  .tagline-sand {
    position: absolute;
    top: 0;
    left: calc(var(--strand-left) - var(--content-left));
    color: var(--field);
  }
  html[data-route='entry'] .rail {
    top: calc(var(--mast-top) + var(--target) + clamp(40px, 13vh, 150px) + var(--text-hero) * 1.12 + var(--space-5));
  }
}

@media (min-width: 960px) and (min-height: 560px) and (max-height: 700px) {
  :root { --nav-h: 60px; }
}

/* Justified lines need a measure that can carry them: about fifty-five characters or more. Narrower than
   that the words drift apart, so the text keeps a ragged edge, still shaped by the shore. */
@media (min-width: 1200px) and (min-height: 560px) {
  .page section p,
  .prose p { text-align: justify; }
}

/* ------------------------------------------------------------------------------------------- motion --- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .nav,
  .shore,
  .wave,
  .tide-floats { display: none; }
}