/*
 * Shared by the three module documents (/shells, /marks, /game). Colour, type and spacing come only from the
 * custom properties in /site/tokens.css; nothing here names a colour or a font of its own.
 *
 * A module page has the anatomy of every other page of the site, a strip of beach seen from above. The sea
 * (the field) carries the words and the work. The sand (the ink colour, used as a surface) carries what can
 * be checked against the chain, the navigation and the crab, which wears this page's shell. Between them runs
 * the tide line (tide.css, written by the build from the site's own curve).
 *
 *   Narrow screens: one column on the sea; the figures lie across it as a bar of sand; 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 running down the page between them.
 *
 * Anything that asks for a decision comes up as a sheet of sand lying over the sea: depth by overlap, no
 * shadows, no gradients. Rules, not boxes: a strong rule opens a block of evidence, hairlines divide its rows.
 * The light colour is the colour of the crab's eyes, and it marks attention and nothing else: where the
 * keyboard is, what is the visitor's own, the one line that warns, and a control under the pointer. It is
 * never the resting colour of a control.
 */

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

:root {
  color-scheme: dark;
  --page-left: clamp(20px, 4.4vw, 96px);
  --gutter: 20px;
  --nav-h: 76px;
  --band-h: 84px;
  /* What the band along the bottom takes from the window, with its edge. Nothing on a wide screen. */
  --band-total: calc(var(--band-h) + var(--band-edge));
  --mast-top: clamp(14px, 3.6vh, 40px);
  /* The quiet tones of whichever surface something is set on, and the colour of the focus ring there. */
  --quiet: var(--ink-75);
  --line: var(--ink-25);
  --track: var(--ink-10);
  --focus: var(--light);
  /* Until tide.css arrives the shore is a straight line. */
  --band-edge: 0px;
  --tide-amp: 0px;
  --tide-float: 0px;
  --tide-strip: 0px;
  --tide-period: 520px;
}

/* Sand: an ink-coloured surface with sea-coloured writing. */
.on-sand,
.sheet,
.pending,
.risk {
  color: var(--field);
  --quiet: var(--field-80);
  --line: var(--field-25);
  --track: var(--field-10);
  --focus: var(--field);
}

html {
  background: var(--field);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--space-7);
  scroll-padding-bottom: calc(var(--band-total) + var(--space-4));
  scrollbar-color: var(--ink-25) transparent;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-wrap: break-word;
  /* The text face at the size the rest of the site sets it: labels, controls, explanations of a step. */
  font: 400 1.0625rem/1.5 var(--font-text);
  background: var(--field);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--light);
  color: var(--field);
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

/* The display face is the voice: names of pages and of their parts, and the first person. */
h1,
h2,
h3 {
  font-family: var(--font-display);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-title);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

h2 {
  font-size: var(--text-l);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Anything that can change is set in figures of equal width, so a refresh never makes a line jump. */
.num,
time,
output {
  font-variant-numeric: tabular-nums;
}

/* An address or a hash: the text face, every digit the same width, as the rest of the site sets them. */
.mono {
  font-family: var(--font-text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.quiet {
  color: var(--quiet);
}

.small {
  font-size: var(--text-s);
}

.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-weight: 600;
  text-decoration: none;
  transform: translateY(-300%);
}

.skip:focus {
  transform: none;
}

/* ---------------------------------------------------------------------------------------------------------
   The sea (narrow)
   --------------------------------------------------------------------------------------------------------- */

.sea {
  position: relative;
  z-index: 0;
  min-height: 100dvh;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) calc(var(--band-total) + var(--space-6) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
}

.tide-fill,
.tide-edge,
.tide-foam,
.tide-wet {
  display: none;
}

.module-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  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;
}

.module-main {
  display: block;
  max-width: 62rem;
  padding: clamp(18px, 5vh, 56px) 0 var(--space-7);
}

.module-intro {
  margin-bottom: var(--space-5);
}

.module-intro h1 {
  margin-bottom: max(0.3em, 14px);
}

/* Where the character speaks in the first person, it speaks in the display face. Figures, labels, tables and
   controls stay in the text face: one is the voice, the other is the evidence. */
.lead,
.voice {
  font-family: var(--font-display);
  font-size: var(--text-m);
  line-height: var(--leading-text);
}

.lead {
  max-width: 40rem;
  font-size: calc(var(--text-m) * 1.3);
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: -0.012em;
}

/* ---------------------------------------------------------------------------------------------------------
   The strand: what can be checked, on the sand. Narrow: a bar of sand across the sea.
   --------------------------------------------------------------------------------------------------------- */

.strand {
  position: relative;
  margin: calc(var(--band-edge) + var(--space-4)) calc(-1 * max(var(--gutter), env(safe-area-inset-right))) calc(var(--band-edge) + var(--space-5)) calc(-1 * max(var(--gutter), env(safe-area-inset-left)));
  padding: var(--space-4) max(var(--gutter), env(safe-area-inset-right)) var(--space-5) max(var(--gutter), env(safe-area-inset-left));
  background: var(--ink);
  font: 400 1rem/1.4 var(--font-text);
}

/* The bar's two edges are the tide line laid flat; the far one is the same curve further along the shore. */
.strand::before,
.strand::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  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);
}

.strand::before {
  bottom: calc(100% - 1px);
}

.strand::after {
  top: calc(100% - 1px);
  transform: scaleY(-1);
  -webkit-mask-position: calc(var(--tide-period) * 0.42) 0;
  mask-position: calc(var(--tide-period) * 0.42) 0;
}

.strand-facts {
  max-width: 34rem;
}

.strand-title {
  margin: 0 0 var(--space-3);
  padding-bottom: 7px;
  border-bottom: 2px solid currentColor;
  font: 600 1.0625rem/1.2 var(--font-text);
  letter-spacing: 0;
}

.strand-crab {
  display: none;
}

/* Live figures: the first is the one the page is about, set large; the rest are rows under it. Each keeps
   its second part (a unit, a remainder) beside it in the quiet tone. */
.facts {
  margin: 0;
}

.fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--space-4);
  padding: 6px 0;
  border-top: 1px solid var(--line);
}

.fact dt {
  flex: none;
  max-width: 60%;
  color: var(--quiet);
}

.fact dd {
  min-width: 0;
  min-height: 1.4em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The second part stays in one piece: if it does not fit beside the figure it goes under it, whole. */
.fact dd small {
  display: inline-block;
  margin-left: 0.3em;
  font-size: var(--text-s);
  font-weight: 400;
  color: var(--quiet);
}

.fact:first-child {
  display: block;
  padding: 0 0 var(--space-3);
  border-top: 0;
}

.fact:first-child dt {
  font-size: var(--text-s);
  font-weight: 500;
}

.fact:first-child dd {
  margin: 0;
  min-height: 1.08em;
  font-size: var(--text-value);
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-align: left;
}

.fact:first-child dd small {
  display: block;
  margin: 4px 0 0;
  line-height: 1.3;
  letter-spacing: 0;
  color: inherit;
}

.receipt {
  min-height: 1.6em;
  margin-top: 10px;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.receipt .button--text {
  min-height: 0;
  font-size: inherit;
  font-weight: 600;
}

/* A bar of sand with room to spare: the figure the page is about on the left, the rows beside it. */
@media (min-width: 700px) {
  .strand-facts {
    max-width: none;
  }

  .facts {
    display: grid;
    grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1.2fr);
    column-gap: var(--space-7);
    align-items: start;
  }

  .fact {
    grid-column: 2;
  }

  .fact:first-child {
    grid-column: 1;
    grid-row: 1 / span 6;
    padding-bottom: 0;
  }

  .fact:nth-child(2) {
    border-top: 0;
  }
}

/* ---------------------------------------------------------------------------------------------------------
   Navigation and the crab (narrow): a band of sand along the bottom, as on every page of the site
   --------------------------------------------------------------------------------------------------------- */

.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. The same bead marks whatever else wants attention. */
.nav a[aria-current]::before,
.notice--warn > :first-child::before,
p.notice--warn::before,
.mine::before {
  content: '';
  flex: none;
  display: inline-block;
  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);
}

.shore-crab {
  position: absolute;
  right: max(8px, env(safe-area-inset-right));
  bottom: calc(5px + env(safe-area-inset-bottom));
  width: min(100vw - 262px, 168px);
  height: calc(var(--band-h) - 10px);
}

.shore-crab .crab,
.strand-crab .crab {
  width: 100%;
  height: 100%;
}

@media (max-width: 380px) {
  .nav {
    font-size: 1rem;
  }

  .nav a {
    padding: 0 7px;
  }

  .shore-crab {
    width: calc(100vw - 238px);
  }
}

/* ---------------------------------------------------------------------------------------------------------
   The foot of the page: what could go wrong, and where to check
   --------------------------------------------------------------------------------------------------------- */

.module-footer {
  display: grid;
  gap: var(--space-6);
  max-width: 62rem;
  padding-top: var(--space-6);
  border-top: 2px solid currentColor;
}

.module-footer h2 {
  margin-bottom: var(--space-3);
}

.disclosures {
  max-width: 40rem;
  padding-left: 1.15em;
  list-style: disc;
  font: 400 var(--text-m) / var(--leading-text) var(--font-display);
}

.disclosures li {
  margin-bottom: 0.55em;
  padding-left: 0.2em;
}

.disclosures li::marker {
  color: var(--light);
}

.source-links h2 {
  margin: 0;
  font: 600 1rem/1.3 var(--font-text);
  letter-spacing: 0;
}

.source-links ul,
#explorer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
}

.source-links li:has(> span:empty) {
  display: none;
}

.source-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-size: 1rem;
}

/* ---------------------------------------------------------------------------------------------------------
   Controls
   --------------------------------------------------------------------------------------------------------- */

.button {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target);
  min-width: var(--target);
  padding: var(--space-2) var(--space-5);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.button:hover:not(:disabled) {
  background: var(--track);
}

.button:active:not(:disabled) {
  transform: scale(0.97);
}

/* The one thing to press: the colour of the other surface. Under the pointer it takes the light. */
.button--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--field);
  font-weight: 600;
}

.button--primary:hover:not(:disabled) {
  background: var(--light);
  border-color: var(--light);
  color: var(--field);
}

.on-sand .button--primary,
.pending .button--primary,
.sheet .button--primary,
.risk .button--primary {
  background: var(--field);
  border-color: var(--field);
  color: var(--ink);
}

.on-sand .button--primary:hover:not(:disabled),
.pending .button--primary:hover:not(:disabled),
.sheet .button--primary:hover:not(:disabled),
.risk .button--primary:hover:not(:disabled) {
  background: var(--light);
  border-color: var(--light);
  color: var(--field);
}

.button:disabled {
  cursor: not-allowed;
  background: transparent;
  border-color: var(--line);
  color: var(--quiet);
}

.button--text {
  min-width: 0;
  padding-inline: 0;
  border-color: transparent;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  font-weight: 500;
  letter-spacing: 0;
}

.button--text:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  text-decoration-thickness: 2px;
}

.button--text:disabled {
  border-color: transparent;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label,
.field .label {
  font-weight: 500;
}

.hint {
  color: var(--quiet);
}

.field .hint {
  font-size: var(--text-s);
}

.input-line {
  display: flex;
  align-items: stretch;
  border: 1px solid currentColor;
  border-radius: var(--radius);
}

.input-line:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.input-line input {
  flex: 1;
  min-width: 0;
  min-height: var(--target);
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.input-line input:focus {
  outline: none;
}

.input-line .unit {
  display: flex;
  align-items: center;
  padding-inline: var(--space-3);
  border-left: 1px solid currentColor;
  font-size: var(--text-s);
  white-space: nowrap;
}

.field-error {
  font-size: var(--text-s);
  font-weight: 600;
}

.field-error::before {
  content: "Not sent. ";
}

/* ---------------------------------------------------------------------------------------------------------
   The wallet, at the head of the page
   --------------------------------------------------------------------------------------------------------- */

.wallet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-3);
  margin-left: auto;
  font-size: var(--text-s);
}

.wallet .account {
  display: grid;
  justify-items: end;
  line-height: 1.25;
  white-space: nowrap;
}

.wallet .account .mono {
  font-weight: 600;
}

.wallet .button {
  padding-inline: var(--space-4);
}

/* ---------------------------------------------------------------------------------------------------------
   What the page says about itself: the status line, statements, an unresolved transaction
   --------------------------------------------------------------------------------------------------------- */

/* The page's one line about what a transaction is doing. Always in the document so that it is announced. */
.status {
  min-height: 1.6em;
  margin-block: var(--space-4);
  font-weight: 500;
}

.status:empty {
  margin-block: 0;
  min-height: 0;
}

.status[data-tone='working']::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--light);
  animation: pulse 1.2s var(--ease) infinite alternate;
}

@keyframes pulse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.25;
  }
}

/* A statement about the state of things: ruled off above and below, never boxed. */
.notice {
  padding: var(--space-3) 0;
  border-top: 2px solid currentColor;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}

.notice > * + * {
  margin-top: var(--space-2);
}

.notice .small {
  font-weight: 400;
}

/* An unresolved transaction. It sits above everything else and does not go away until it is resolved. */
.pending {
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-5);
  padding: var(--space-5);
  background: var(--ink);
  border-radius: var(--radius);
}

.pending dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  font-size: var(--text-s);
}

.pending dt {
  color: var(--quiet);
}

/* ---------------------------------------------------------------------------------------------------------
   Sheets: native <dialog>, sand over sea
   --------------------------------------------------------------------------------------------------------- */

.sheet {
  width: min(34rem, calc(100vw - 2 * var(--space-4)));
  max-height: calc(100dvh - 2 * var(--space-4));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  overflow: auto;
}

.sheet::backdrop {
  background: var(--scrim);
}

.sheet[open] {
  animation: rise var(--fast) var(--ease);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
}

.sheet-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
}

.sheet-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-4);
}

.sheet-close {
  flex: none;
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 0 0;
  border-color: transparent;
  padding-inline: var(--space-3);
}

.sheet dl.terms {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4);
  border-top: 2px solid currentColor;
  border-bottom: 1px solid var(--line);
}

.sheet dl.terms dt {
  color: var(--quiet);
}

.sheet dl.terms dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* On a sheet the terms above already carry the rules; a warning there needs only its bead. */
.sheet .notice,
.pending .notice {
  padding: 0;
  border: 0;
}

.wallet-list {
  display: grid;
  gap: var(--space-3);
}

.wallet-option {
  justify-content: flex-start;
  width: 100%;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-weight: 500;
}

.wallet-option img,
.wallet-option .wallet-glyph {
  width: var(--space-6);
  height: var(--space-6);
  flex: none;
  border-radius: var(--radius);
}

.wallet-option .wallet-glyph {
  border: 1px solid currentColor;
}

/* ---------------------------------------------------------------------------------------------------------
   Tabs
   --------------------------------------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-6);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  min-height: var(--target);
  padding: var(--space-2) 0;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--quiet);
  font: inherit;
  font-size: 1.1875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.tab:hover {
  color: var(--ink);
}

.tab[aria-selected='true'] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: currentColor;
}

.tab:focus-visible {
  outline-offset: -2px;
}

.tab .count {
  margin-left: var(--space-1);
  font-size: var(--text-s);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--quiet);
}

.panel {
  padding-top: var(--space-6);
}

.panel:focus-visible {
  outline-offset: var(--space-2);
}

.panel > p {
  margin-bottom: var(--space-4);
}

.empty {
  max-width: 34rem;
  padding-block: var(--space-5);
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

/* A phone: the tabs run to both edges of the window and can be pushed sideways. */
@media (max-width: 700px) {
  .tabs {
    gap: var(--space-4);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }

  .tab {
    font-size: 1.0625rem;
  }

  .sheet-body {
    padding: var(--space-5) var(--space-4);
  }
}

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

@media (min-width: 1280px) and (min-height: 560px) {
  :root {
    --tide-mean: 67vw;
    --sea-right: calc(var(--tide-mean) + var(--tide-amp));
    --strand-left: calc(var(--sea-right) + 40px);
    --strand-right: clamp(20px, 2.6vw, 44px);
    --band-h: 0px;
    --band-total: 0px;
  }

  body {
    background: var(--ink);
  }

  /* The work keeps a straight edge, well clear of the furthest the water reaches. */
  .sea {
    padding: 0 calc(100% - var(--sea-right) + var(--tide-float)) var(--space-8) var(--page-left);
  }

  .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);
  }

  .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;
  }

  .shore {
    display: none;
  }

  /* The strand leaves the page's flow and stands on the sand: figures at the top, the crab at the foot. */
  .strand {
    position: fixed;
    top: var(--nav-h);
    bottom: 0;
    left: var(--strand-left);
    right: var(--strand-right);
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: var(--space-2) 0 clamp(10px, 2.4vh, 26px);
    background: none;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--field-25) transparent;
  }

  .strand::before,
  .strand::after {
    display: none;
  }

  .strand-facts {
    flex: none;
    max-width: 34rem;
    padding-right: var(--space-3);
  }

  .facts {
    display: block;
  }

  .fact:first-child {
    padding-bottom: var(--space-3);
  }

  .fact:nth-child(2) {
    border-top: 1px solid var(--line);
  }

  .strand-crab {
    display: block;
    flex: 1 1 150px;
    min-height: 150px;
    max-height: clamp(150px, 30vh, 330px);
    margin-top: auto;
    padding-top: var(--space-5);
  }
}

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

/* ---------------------------------------------------------------------------------------------------------
   Less motion; print
   --------------------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .nav,
  .shore,
  .strand-crab {
    display: none;
  }
}

/* A choice between a few fixed options, as pressed buttons (which side, how many days). */
.side-choice {
  display: flex;
  gap: var(--space-3);
}

.side-choice .button[aria-pressed='true'] {
  background: var(--field);
  border-color: var(--field);
  color: var(--ink);
}