/*
 * Nautical marks: the cartography kit.
 *
 * Replaces the single raster chart texture. Every mark is inline SVG, so it
 * takes its colour from the palette tokens instead of from baked-in pixels
 * and stays crisp at any size. The marks repeat, so they are bulky in the
 * source and cheap on the wire: about 26 KB of markup on the homepage,
 * 2 KB once gzipped, against a 424 KB image request. Weight is carried by
 * the colour mixes below rather than by element opacity, so a mark can sit
 * on a light or a dark surface without being faded into mud.
 */

.nautical-mark,
.nautical-flow {
  pointer-events: none;
  user-select: none;
}

/* ------------------------------------------------------------ Mark colours */

/* These are decoration behind running text, so they are mixed at texture
   strength, not at ink strength. The raster they replace sat at 9-16%
   opacity; anything heavier competes with the copy. */
.nautical-mark__ink { fill: color-mix(in srgb, var(--color-navy) 13%, transparent); }
.nautical-mark__ink-soft { fill: color-mix(in srgb, var(--color-navy) 6%, transparent); }
.nautical-mark__decor { fill: color-mix(in srgb, var(--color-sage-deep) 15%, transparent); }
.nautical-mark__decor-soft { fill: color-mix(in srgb, var(--color-sage-deep) 7%, transparent); }

.nautical-mark__limb,
.nautical-mark__hairline,
.nautical-mark__hub {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.nautical-mark__limb { stroke: color-mix(in srgb, var(--color-navy) 12%, transparent); }
.nautical-mark__hairline { stroke: color-mix(in srgb, var(--color-sage-deep) 10%, transparent); }
.nautical-mark__hub { stroke: color-mix(in srgb, var(--color-navy) 15%, transparent); }

.nautical-mark__figure {
  fill: color-mix(in srgb, var(--color-navy) 14%, transparent);
  font-family: var(--font-family-body);
  font-size: 30px;
  font-weight: var(--font-weight-medium);
  letter-spacing: .04em;
}

/* ------------------------------------------------------------- Compass rose */

.nautical-rose {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ----------------------------------------------------------- Course lines */

/* .nautical-flow already carries its placement and stroke in pages/nautical.css. */
.nautical-flow__rhumb,
.nautical-flow__dashed,
.nautical-flow__dotted {
  fill: none;
  stroke: inherit;
  vector-effect: non-scaling-stroke;
}

.nautical-flow__dashed { stroke-dasharray: 10 7; }
.nautical-flow__dotted { stroke-dasharray: 1.5 7; stroke-linecap: round; }

.nautical-flow--plain :is(.nautical-flow__dashed, .nautical-flow__dotted) { stroke-dasharray: none; }
.nautical-flow--dashed :is(.nautical-flow__rhumb, .nautical-flow__dotted) { stroke-dasharray: 10 7; }
.nautical-flow--dotted :is(.nautical-flow__rhumb, .nautical-flow__dashed) { stroke-dasharray: 1.5 7; stroke-linecap: round; }

/* --------------------------------------------------- Soundings, rings, fixes */

.nautical-soundings,
.nautical-rings,
.nautical-fix {
  display: block;
  width: 100%;
  height: auto;
}

.nautical-fix { width: var(--nautical-fix-size, 1.25rem); }

/* ---------------------------------------------------------------- The field */

/*
 * The composition that stands in for the old texture. It is a positioned
 * box holding three independent marks, so a surface can move, resize or
 * drop any one of them without a new asset.
 */
/*
 * The field lives in the margin of a band, never across its text column,
 * and dissolves at both edges rather than ending on a crop. Its own marks
 * stay inside it: nothing reaches back over the copy.
 */
.chart-field {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 34%, #000 100%),
    linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 34%, #000 100%),
    linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.chart-field .nautical-flow {
  inset: 8% 0 auto 0;
  right: 0;
  bottom: auto;
  width: 100%;
  opacity: 1;
}

.chart-field .nautical-rose {
  position: absolute;
  inset: auto 4% 6% auto;
  width: 54%;
}

/* Below the tablet breakpoint the margin a field needs no longer exists. */
@media (max-width: 55rem) {
  .chart-field { display: none; }
}

/* ------------------------------------------------------- Marks on the navy */

/*
 * The footer inverts the surface, so the mixes invert with it: the same
 * marks drawn in light ink rather than the same marks faded out.
 */
.footer--integrated .nautical-mark__ink { fill: color-mix(in srgb, var(--color-white) 5%, transparent); }
.footer--integrated .nautical-mark__ink-soft { fill: color-mix(in srgb, var(--color-white) 2.5%, transparent); }
.footer--integrated .nautical-mark__decor { fill: color-mix(in srgb, var(--color-sage) 7%, transparent); }
.footer--integrated .nautical-mark__decor-soft { fill: color-mix(in srgb, var(--color-sage) 4%, transparent); }
.footer--integrated .nautical-mark__limb { stroke: color-mix(in srgb, var(--color-white) 8%, transparent); }
.footer--integrated .nautical-mark__hairline { stroke: color-mix(in srgb, var(--color-sage) 6%, transparent); }
/* The hub sits where every point already overlaps, so it is drawn lighter
   than the limb rather than heavier, or the centre blooms. */
.footer--integrated .nautical-mark__hub { stroke: color-mix(in srgb, var(--color-white) 4%, transparent); }
.footer--integrated .nautical-mark__figure { fill: color-mix(in srgb, var(--color-sage) 12%, transparent); }

/* The marks are decoration and carry no information the page needs. */
@media (forced-colors: active) {
  .chart-field,
  .nautical-mark,
  .nautical-flow { display: none; }
}