/* ============================================================
   home-chart.css — "Where We Roam", the home page's paper chart.

   The SVG itself is baked at build time by tools/build-chart.mjs from
   Natural Earth 1:110m (public domain). Everything below is only its
   ink: no geometry lives here.

   The whole idea in one line: the COASTLINES are printed (accurate,
   even, machine-true) and the COURSES are drawn (wobbly, uneven, human).
   Keep that contrast if you touch this file.

   Colours come from the :root tokens in styles.css. Rust is spent on
   exactly one thing here — the twentieth voyage — so don't reach for it.
   ============================================================ */

.chart-plane {
  position: relative;
  background: #f6ecd8;                                      /* the sea IS the paper */
  background-image: radial-gradient(#e6d5b3 1.1px, transparent 1.1px);
  background-size: 20px 20px;
  border: 1px solid #e0cda5;
  overflow: hidden;
}

.chart-plane-label {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 2;
  font: 700 22px/1 'Caveat', cursive;
  color: #8b5e3c;
  transform: rotate(-1.5deg);
  pointer-events: none;
}

.chart-svg {
  display: block;
  width: 100%;
  height: auto;                                             /* viewBox drives the aspect */
}

/* ---------- printed: the world ---------- */

.chart-graticule path {
  fill: none;
  stroke: var(--blueprint);
  stroke-width: 0.5;
  opacity: 0.22;                                            /* faint — it should whisper */
}

.chart-land {
  fill: #e7d4ae;                                            /* pale manila */
  stroke: var(--ink);
  stroke-width: 0.65;
  stroke-linejoin: round;
  opacity: 0.95;
}

/* ---------- drawn: the wake ---------- */

.chart-track {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

/* Three chapters, three passes of the same pencil — a shade apart, not a palette. */
.chart-track--atlantic { opacity: 0.72; }
.chart-track--pacific  { opacity: 0.66; stroke-width: 1.35; }
.chart-track--med      { opacity: 0.86; stroke-width: 1.65; }

.chart-port {
  fill: var(--ink);
  opacity: 0.5;
}

/* ---------- Cowes, home ---------- */

.chart-home-halo { fill: var(--teal); opacity: 0.16; }
.chart-home-dot  { fill: var(--teal); stroke: var(--cream); stroke-width: 1.2; }

.chart-home-label {
  fill: var(--teal);
  font: 600 9px/1 var(--font-display);
  letter-spacing: 0.16em;
}

/* ---------- the twentieth voyage (the only rust on this chart) ---------- */

.chart-next {
  fill: none;
  stroke: var(--rust);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1 9;                                    /* pencil dots, not a line */
  opacity: 0.9;
}

/* ---------- furniture ---------- */

.chart-sea {
  fill: var(--blueprint);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.34em;
  opacity: 0.42;
  text-anchor: middle;
}

.chart-rose-ring { fill: none; stroke: var(--teal); stroke-width: 2.4; opacity: 0.5; }
.chart-rose-ring--dashed { stroke-width: 1.1; stroke-dasharray: 2 6; opacity: 0.38; }
.chart-rose-n { fill: var(--teal); opacity: 0.6; }
.chart-rose-s { fill: var(--teal); opacity: 0.22; }

.chart-stamp {
  fill: var(--wood);
  font: 500 9px/1 var(--font-display);
  letter-spacing: 0.24em;
  opacity: 0.75;
}

/* ---------- small screens ---------- */
/* The chart is 1000×420 and scales by viewBox, so it stays crisp; it just needs
   the grid and the smallest type to survive being a third of the size. */

@media (max-width: 700px) {
  .chart-plane-label { font-size: 17px; top: 9px; left: 11px; }
  .chart-graticule path { stroke-width: 0.7; opacity: 0.26; }
  .chart-land { stroke-width: 0.75; }
  .chart-track { stroke-width: 1.8; }
  .chart-next { stroke-width: 2.4; }
  .chart-sea { letter-spacing: 0.22em; opacity: 0.34; }
}