/* Atlantic Road Seaside Housing — nautical chart drawing styles

   Shared sheet, loaded after css/main.css by the two pages that inline a
   chart generated by tools/make-chart.py:
     index.html  — the #journey instrument (js/story.js)
     boats.html  — the #banks sea chart   (js/boats.js)

   This file is DRAWING ONLY: it says what the chart looks like, never when
   parts of it appear. Reveal behaviour is the owning page's business —
   #journey fades the sea route and boat in on chapter six (css/story.css),
   boats.html draws the route with scroll (css/boats.css). Keeping the
   default state "visible and complete" is what makes both charts readable
   without JS.

   The generator emits one full label set for large formats; each page hides
   what it does not need at its own size (see the reduction blocks in
   css/story.css and css/boats.css). Colours are the dark-ground palette —
   plain --brass is correct here (4.6:1 on fjord), never --brass-ink. */

.chart-sea{fill:rgba(16,37,50,.55)}
.chart-land{fill:#1b3343;stroke:rgba(237,231,220,.5);stroke-width:1;stroke-linejoin:round}
.chart-land--ctx{fill:#172c3a;stroke:rgba(237,231,220,.25)}
.chart-land--skerry{fill:#182f3f;stroke:rgba(237,231,220,.4);stroke-width:.8}
.chart-land--home{fill:#20404f;stroke:rgba(237,231,220,.75)}
.chart-soundings circle{fill:rgba(237,231,220,.14)}
.chart-graticule line{stroke:rgba(237,231,220,.25);stroke-width:1}
.chart-graticule text{fill:rgba(237,231,220,.32);font:300 11px var(--accent);letter-spacing:.12em}
.chart-route{
  fill:none;
  stroke:var(--brass);
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.chart-route-ghost{
  fill:none;
  stroke:rgba(237,231,220,.3);
  stroke-width:3.5;
  stroke-dasharray:2 7;
  stroke-linecap:round;
}
.chart-searoute{
  fill:none;
  stroke:rgba(237,231,220,.8);
  stroke-width:3;
  stroke-dasharray:3 10;
  stroke-linecap:round;
}
.chart-wp .halo{fill:rgba(177,138,84,.14)}
.chart-wp .ring{fill:none;stroke:rgba(177,138,84,.55);stroke-width:2.5;r:9px}
.chart-wp .core{fill:rgba(237,231,220,.45);r:3.5px}
.chart-wp.lit .ring{stroke:var(--brass)}
.chart-wp.lit .core{fill:var(--linen)}
.chart-wp.is-current .halo{
  fill:rgba(177,138,84,.22);
  animation:wp-pulse 2.6s var(--ease) infinite;
  transform-origin:center;
  transform-box:fill-box;
}
@keyframes wp-pulse{0%,100%{transform:scale(.7)}50%{transform:scale(1.15)}}
.chart-wp--home .ring{stroke:rgba(237,231,220,.6)}
.chart-wp--home.lit .ring{stroke:var(--linen)}
.chart-wp--home.lit .core{fill:var(--brass)}
.chart-detour path{fill:none;stroke:rgba(201,168,118,.9);stroke-width:2}
.chart-detour circle{fill:rgba(201,168,118,.9)}
.chart-detour{opacity:.3;transition:opacity .6s var(--ease)}
.chart-detour.on{opacity:1}
.chart-detour--edge .arrow{fill:rgba(201,168,118,.9);stroke:none}
.chart-detour--edge text{fill:rgba(237,231,220,.6);font:300 12px var(--accent);letter-spacing:.14em}
.chart-you{
  fill:var(--linen);
  stroke:var(--fjord);
  stroke-width:2.5;
  r:7px;
}
.chart-boat{
  fill:rgba(237,231,220,.95);
  r:5px;
}
.chart-label{fill:rgba(237,231,220,.78);font:300 13px var(--accent);letter-spacing:.08em}
.chart-label--island{fill:rgba(237,231,220,.45);font-size:19px;letter-spacing:.5em}
.chart-label--sea{fill:rgba(237,231,220,.4);font-style:italic;font-family:var(--display);font-size:13px}
.chart-label--big{font-size:17px;letter-spacing:.4em;font-style:normal;font-family:var(--accent)}
.chart-rose circle{fill:none;stroke:rgba(237,231,220,.4);stroke-width:1}
.chart-rose path{fill:rgba(237,231,220,.75)}
.chart-rose path.s{fill:rgba(237,231,220,.3)}
.chart-rose text{fill:rgba(237,231,220,.7);font:300 12px var(--accent)}
.chart-frame{fill:none;stroke:rgba(177,138,84,.5);stroke-width:1.5}
.chart-frame--inner{stroke:rgba(177,138,84,.25);stroke-width:1}