/* ============================================================
   compass.css: /compass/, the Pirates of the Caribbean terminal.
   Sister page to /citadel/, /marauders-map/, /crafting-table/
   and the rest: night water instead of stone, a sea chart
   instead of a map table. Jack's compass sits in the middle of
   the chart with every page charted round it by bearing, and
   the needle swings to whichever one you want.
   ============================================================ */

/* these pages load no shared stylesheet, so they carry their own reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img, svg { display: block; max-width: 100%; }
html.smooth { scroll-behavior: smooth; }   /* added after load, so back/forward restoration is not animated */

.pc {
  --iw-a: #d2ad62;   /* the shared world button, interface-world.css */
  --iw-bg: #0c0a07;
  /* IM Fell is the type John Fell bought for the Oxford press in the
     1670s: rough, inky and fifty years older than the films' Caribbean,
     which is exactly what a chart of the 1720s would have been lettered in.
     It has one weight, so nothing on this page is set bold. */
  --fell:   "IM Fell English", Georgia, "Times New Roman", serif;
  --sc:     "IM Fell English SC", "IM Fell English", Georgia, serif;
  --sea:    #07141a;
  --sea-2:  #0c1f28;
  --sea-3:  #123241;
  --glass:  #8cc9c0;          /* sea glass: the orbs on the dark */
  --parch:  #d8c9a0;          /* the Pirates world's tile color */
  --ink:    #2b1d0e;          /* iron gall */
  --ink-2:  #5a4326;
  --blood:  #7a2416;          /* oxblood: the course, the point of the needle */
  --brass:  #d2ad62;
  --brass-2:#9c7432;
  --text:   #ece3cb;
  --dim:    #bdb39b;
  --mute:   #918a78;
  --line:   rgba(210, 173, 98, 0.22);
  --ease:   cubic-bezier(.16, 1, .3, 1);
  --gut:    clamp(1rem, 4vw, 2.6rem);

  background: var(--sea);
  color: var(--text);
  font-family: var(--fell);
  font-size: 1.08rem;
  line-height: 1.5;
  min-height: 100vh;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}
.pc b { font-weight: 400; }
.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.pc a:focus-visible, .pc button:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* ───────────── night water ───────────── */
.pc-sea { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.pc-sea > span { position: absolute; inset: 0; }
.pc-moon {
  background:
    radial-gradient(38% 32% at 84% 4%, rgba(205, 225, 220, .13), transparent 70%),
    radial-gradient(70% 50% at 50% 100%, rgba(18, 50, 65, .55), transparent 75%),
    radial-gradient(120% 90% at 50% 45%, transparent 50%, rgba(0, 0, 0, .62));
}
/* the swell: long low rings of light on the water, rising and settling
   once every fourteen seconds, about the pace of a ship at anchor */
.pc-swell {
  inset: -40px 0;
  background: repeating-radial-gradient(ellipse 150% 55% at 50% 125%, rgba(140, 201, 192, .04) 0 2px, transparent 2px 42px);
  animation: pc-swell 14s ease-in-out infinite alternate;
}
@keyframes pc-swell { to { transform: translateY(-22px); } }

/* ───────────── header ───────────── */
.pc-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 0.2rem 1rem; flex-wrap: wrap;
  padding: calc(0.6rem + env(safe-area-inset-top, 0px)) calc(var(--gut) + env(safe-area-inset-right, 0px)) 0.6rem calc(var(--gut) + env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--line);
  font-family: var(--sc); font-size: 0.92rem; letter-spacing: 0.08em; color: var(--dim);
}
.pc-exit { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; color: var(--brass); }
.pc-exit:hover { color: #fff1cf; }
.pc-exit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.pc-top-bell { color: var(--brass); }

.pc-main {
  position: relative; z-index: 1; max-width: 1280px; margin: 0 auto;
  padding: 0 calc(var(--gut) + env(safe-area-inset-right, 0px)) 0 calc(var(--gut) + env(safe-area-inset-left, 0px));
}

/* ───────────── title ───────────── */
.pc-hero { text-align: center; padding-top: clamp(1.4rem, 4vw, 2.2rem); }
.pc-kicker { font-family: var(--sc); font-size: 1.02rem; letter-spacing: 0.2em; color: var(--brass); }
.pc-title {
  margin-top: 0.15rem;
  font-weight: 400; line-height: 1; letter-spacing: 0.01em;
  font-size: clamp(2.8rem, 8vw, 5.2rem);
  background: linear-gradient(180deg, #fff3d2 0%, #e9c77f 48%, #a9792c 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55));
}
.pc-sub {
  max-width: 64ch; margin: 0.8rem auto 0; text-wrap: pretty;
  font-style: italic; font-size: 1.16rem; line-height: 1.55; color: var(--dim);
}
.pc-epi { max-width: 64ch; margin: 0.6rem auto 0; font-size: 0.98rem; color: var(--mute); text-wrap: balance; }
.pc-epi span { display: block; font-family: var(--sc); font-size: 0.86rem; letter-spacing: 0.06em; }

/* ───────────── the chart ───────────── */
.pc-chart {
  position: relative; isolation: isolate; overflow: clip;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  color: var(--ink);
  background: radial-gradient(120% 100% at 50% 42%, #e6d9b4 0%, var(--parch) 48%, #c2ab78 100%);
  border-radius: 3px;
  box-shadow: 0 50px 90px -40px #000, 0 0 0 1px rgba(0, 0, 0, .45);
}
.pc-chart::before {                    /* fibers and foxing */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(93deg, rgba(120, 90, 50, .05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(3deg, rgba(120, 90, 50, .04) 0 1px, transparent 1px 11px),
    radial-gradient(ellipse 16% 12% at 14% 72%, rgba(150, 110, 60, .16), transparent 70%),
    radial-gradient(ellipse 14% 11% at 88% 34%, rgba(150, 110, 60, .13), transparent 70%),
    radial-gradient(ellipse 22% 15% at 58% 6%, rgba(150, 110, 60, .1), transparent 70%);
}
.pc-chart::after {                     /* the edges, browned by salt and handling */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 80px 14px rgba(90, 55, 20, .32), inset 0 0 18px 3px rgba(60, 32, 10, .4);
}
/* the neat line: a ruled double border just inside the edge, as engraved charts have */
.pc-neat { position: absolute; inset: 10px; z-index: 1; pointer-events: none; border: 1.5px solid rgba(43, 29, 14, .5); }
.pc-neat::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(43, 29, 14, .3); }

/* the drawing */
.pc-art { position: absolute; z-index: 0; pointer-events: none; overflow: visible; }
.pc-rh path { fill: none; stroke-width: 1; }
.pc-rh-c { stroke: rgba(43, 29, 14, .3); }
.pc-rh-h { stroke: rgba(52, 92, 60, .3); }      /* the half winds in green */
.pc-rh-q { stroke: rgba(122, 36, 22, .22); }     /* the quarter winds in red, as on a portolan */
.pc-orbit { fill: none; stroke: rgba(43, 29, 14, .28); stroke-width: 1; stroke-dasharray: 2 6; }
.pc-land .pc-wl path { fill: none; stroke: rgba(43, 29, 14, .2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pc-land .pc-wl--1 path { stroke: rgba(43, 29, 14, .3); }
.pc-land .pc-wl--3 path { stroke: rgba(43, 29, 14, .13); }
.pc-shore { fill: #c8b27e; stroke: rgba(43, 29, 14, .7); stroke-width: 1.3; }
.pc-waves path { fill: none; stroke: rgba(43, 29, 14, .4); stroke-width: 1.2; stroke-linecap: round; }
.pc-kraken > path { fill: rgba(43, 29, 14, .78); stroke: rgba(43, 29, 14, .9); stroke-width: 1; }
.pc-suck circle { fill: #cdb889; stroke: rgba(43, 29, 14, .7); stroke-width: .8; }
.pc-scale rect { fill: none; }
.pc-scale .pc-sb-f { fill: rgba(43, 29, 14, .7); }
.pc-scale .pc-sb-o { stroke: rgba(43, 29, 14, .7); stroke-width: 1; }
.pc-scale text { font-family: var(--fell); font-style: italic; font-size: 15px; fill: rgba(43, 29, 14, .82); }

/* the cartouche: the chart's title, framed in a corner */
.pc-cartouche {
  position: relative; z-index: 3;
  padding: 0.7rem 1rem 0.75rem;
  background: rgba(240, 230, 200, .72);
  border: 1px solid rgba(43, 29, 14, .55);
  outline: 1px solid rgba(43, 29, 14, .3); outline-offset: 3px;
}
.pc-cartouche h2 { font-weight: 400; font-size: 1.42rem; line-height: 1.15; letter-spacing: 0.01em; color: var(--ink); }
.pc-cartouche p { margin-top: 0.15rem; font-style: italic; font-size: 0.95rem; line-height: 1.35; color: var(--ink-2); }

/* the compass. Its shadow is a soft disc under the case drawn once in CSS,
   rather than a filter on the SVG, which would be worked out again on
   every frame the needle moves. */
.pc-binn { position: relative; z-index: 4; aspect-ratio: 3 / 4; }
.pc-binn::before {
  content: ""; position: absolute; left: 3%; top: 35%; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43, 29, 14, .5), rgba(43, 29, 14, .22) 70%, transparent);
}
.pc-cmp { position: relative; width: 100%; height: 100%; overflow: visible; }
.pc-c-ticks { fill: none; stroke: #3a260c; stroke-width: 1; }
.pc-c-ring { fill: none; stroke: rgba(58, 38, 12, .55); stroke-width: 1; }
.pc-r-q-d, .pc-r-q-l { fill: rgba(107, 68, 22, .55); }
.pc-r-q-l { fill: rgba(107, 68, 22, .25); }
.pc-r-h-d { fill: #3b5a40; }
.pc-r-h-l { fill: #d9cba4; stroke: #3b5a40; stroke-width: .6; }
.pc-r-i-d { fill: #7a2416; }
.pc-r-i-l { fill: #ecdfbd; stroke: #7a2416; stroke-width: .6; }
.pc-r-c-d { fill: #2b1d0e; }
.pc-r-c-l { fill: #c89a48; stroke: #2b1d0e; stroke-width: .6; }
.pc-c-letters text { font-family: var(--fell); font-size: 15px; fill: #2b1d0e; text-anchor: middle; dominant-baseline: middle; }
.pc-c-engr { font-family: var(--sc); font-size: 13.5px; letter-spacing: 1.2px; fill: #d9b46a; fill-opacity: .7; }
.pc-c-shadow path { fill: rgba(43, 29, 14, .28); }
.pc-c-glass { opacity: .5; pointer-events: none; }

/* the reading: a slip of paper pinned under the compass */
.pc-reading {
  position: relative; z-index: 4; text-align: center;
  padding: 0.55rem 0.9rem 0.65rem;
  background: radial-gradient(closest-side, rgba(240, 231, 204, .95), rgba(232, 220, 188, .88));
  border: 1px solid rgba(43, 29, 14, .35);
  box-shadow: 0 6px 14px -8px rgba(43, 29, 14, .6);
}
.pc-read-k {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-family: var(--sc); font-size: 0.9rem; letter-spacing: 0.06em; color: var(--blood);
}
.pc-think { width: 26px; height: 26px; flex: none; }
.pc-read-t { margin-top: 0.15rem; font-size: 1rem; line-height: 1.4; color: var(--ink-2); }
.pc-read-t b { color: var(--ink); font-size: 1.08em; }

/* the course, pricked out in oxblood, marching toward what is wanted */
.pc-course { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.pc-course line {
  stroke: var(--blood); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0.1 9;
  opacity: 0; transition: opacity .35s;
}
.pc-course.is-on line { opacity: .8; animation: pc-march 1.1s linear infinite; }
@keyframes pc-march { to { stroke-dashoffset: -9.1; } }

/* the islands */
.pc-ports { list-style: none; position: relative; z-index: 3; }
.pc-mark {
  max-width: none;            /* the reset's 100% is of a zero-width island */
  color: var(--ink); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  border-radius: 50%; outline: 1.5px solid transparent; outline-offset: 3px;
  transition: color .3s, outline-color .3s, scale .45s var(--ease);
}
.pc-mark .f { fill: currentColor; stroke: none; }
.pc-mark .g { stroke: #b0822f; stroke-width: 2; }
.pc-mark .gf { fill: #b0822f; stroke: none; }
.pc-mark .r { stroke: var(--blood); stroke-width: 2.2; }
.pc-port a { display: block; border-radius: 3px; transition: background .3s; }
.pc-port b { display: block; font-size: 1.12rem; line-height: 1.2; color: var(--ink); transition: color .3s; }
.pc-port i { display: block; font-size: 0.94rem; line-height: 1.3; color: var(--ink-2); text-wrap: balance; }
.pc-brg { display: block; margin-top: 0.1rem; font-family: var(--sc); font-size: 0.84rem; letter-spacing: 0.06em; color: #6b3a16; }
.pc-port.is-wanted .pc-mark { color: var(--blood); outline-color: var(--blood); scale: 1.12; }
/* the Kaʿbah keeps its ink: only the ring round it says it is wanted */
.pc-port.is-wanted .pc-mark--q { color: var(--ink); }
.pc-port.is-wanted b { color: var(--blood); }
.pc-port.is-wanted a { background: rgba(250, 243, 222, .62); }
.pc-chart a:focus-visible { outline-color: var(--blood); }

/* ── the ring: a wide screen, every island on its bearing ── */
@media (min-width: 1100px) {
  .pc-chart { aspect-ratio: 3 / 2; }
  .pc-art { inset: 0; width: 100%; height: 100%; }
  /* top left, kept to two short lines so it clears the Flying Dutchman */
  .pc-cartouche { position: absolute; left: 2.4%; top: 3.4%; max-width: 25%; }
  .pc-cartouche h2 { white-space: nowrap; font-size: 1.3rem; }
  .pc-cartouche p { font-size: 0.9rem; }
  /* the pivot of the needle, (0, 0) in the compass's drawing, is 250 of its
     400 units down and halfway across. At 24% of the chart's width the
     drawing is 48% of its height, so 20% from the top puts the pivot on the
     chart's center. */
  .pc-binn { position: absolute; left: 38%; top: 20%; width: 24%; }
  /* the slip hangs just under the catch and has to stay clear of the two
     islands due south of it, so it is narrow and its type shrinks with the
     chart rather than adding a line */
  .pc-reading { position: absolute; left: 50%; top: 67.4%; width: min(28%, 340px); translate: -50% 0; padding: 0.45rem 0.8rem 0.55rem; }
  .pc-read-k { font-size: 0.84rem; }
  .pc-read-t { font-size: clamp(0.86rem, 0.35rem + 0.7vw, 1rem); }
  .pc-read-t b { font-size: 1.06em; }
  .pc-ports { position: absolute; inset: 0; }
  .pc-port { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
  .pc-mark { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; }
  .pc-port a {
    position: absolute; left: var(--ox); top: var(--oy);
    width: max-content; max-width: 200px; padding: 0.2rem 0.4rem;
    transform: translate(var(--ax), var(--ay));
    text-align: var(--ta);
    text-shadow: 0 0 6px #e6d9b4, 0 0 2px #e6d9b4;
  }
}

/* the narrow end of the ring: the chart shrinks but the labels do not, so
   the cartouche gets smaller to stay above the Flying Dutchman */
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .pc-cartouche { padding: 0.45rem 0.75rem 0.5rem; }
  .pc-cartouche h2 { font-size: 1.08rem; }
  .pc-cartouche p { font-size: 0.8rem; }
}

/* ── the log lines: anything narrower, the same islands as a list ── */
@media (max-width: 1099.98px) {
  .pc-chart { padding: clamp(1rem, 4vw, 1.6rem); padding-bottom: clamp(1.2rem, 4vw, 1.8rem); }
  /* the drawing sits with its center under the compass, so the rhumb lines
     still run out of it, and fades out just below it: the rest of the
     sheet is plain paper, which is what the list wants to be read on */
  .pc-art {
    left: 50%; top: var(--art-top, -40px); width: 1200px; height: 800px; max-width: none; translate: -50% 0;
    -webkit-mask-image: linear-gradient(180deg, #000 0 58%, transparent 74%);
    mask-image: linear-gradient(180deg, #000 0 58%, transparent 74%);
  }
  .pc-cartouche { max-width: 30rem; margin: 0 auto; text-align: center; }
  .pc-binn { width: min(250px, 64vw); margin: 0.6rem auto 0; }
  .pc-reading { max-width: 26rem; margin: 0.3rem auto 0; }
  .pc-course { display: none; }
  .pc-ports { margin-top: 1.2rem; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.4rem; }
  .pc-port { position: relative; border-top: 1px dashed rgba(43, 29, 14, .3); }
  .pc-mark { position: absolute; left: 6px; top: 50%; width: 30px; height: 30px; translate: 0 -50%; }
  .pc-port a {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n b" "w b";
    align-items: center; column-gap: 0.8rem;
    min-height: 60px; padding: 0.55rem 0.5rem 0.55rem 50px;
  }
  .pc-port b { grid-area: n; }
  .pc-port i { grid-area: w; }
  .pc-brg { grid-area: b; margin: 0; }
}
@media (min-width: 640px) and (max-width: 1099.98px) {
  .pc-ports { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the small compass that follows you down the list (only ever shown there) */
.pc-follow { display: none; }
@media (max-width: 1099.98px) {
  .pc-follow {
    position: fixed; z-index: 15; top: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: 0.8rem;
    padding: calc(0.45rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) 0.45rem calc(1rem + env(safe-area-inset-left, 0px));
    background: #dccda6; color: var(--ink);
    border-bottom: 1px solid rgba(43, 29, 14, .4);
    box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .7);
    transform: translateY(-110%); transition: transform .45s var(--ease);
  }
  .pc-follow.is-on { transform: none; }
}
.pc-follow-cmp { width: 52px; height: 52px; flex: none; }
.pc-follow p { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pc-follow span { font-family: var(--sc); font-size: 0.82rem; letter-spacing: 0.06em; color: var(--blood); }
.pc-follow b { font-size: 1.02rem; color: var(--ink); }

/* ───────────── panels ───────────── */
/* the log and the fleet down the left, the record down the right: the
   record is the long one, and this keeps the two columns about level */
.pc-cols { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); grid-template-columns: minmax(0, 1fr); margin-top: clamp(1.6rem, 3.4vw, 2.4rem); }
@media (min-width: 900px) {
  .pc-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "log rec" "fleet rec"; align-items: start; }
  .pc-log { grid-area: log; }
  .pc-rec { grid-area: rec; }
  .pc-fleet { grid-area: fleet; }
  .pc-fleet .pc-ships { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pc-panel {
  position: relative;
  padding: clamp(1.1rem, 2.6vw, 1.7rem);
  border: 1px solid var(--line); border-radius: 4px;
  background: linear-gradient(180deg, rgba(18, 50, 65, .5), rgba(7, 20, 26, .88));
  box-shadow: inset 0 1px 0 rgba(210, 173, 98, .12);
}
.pc-h {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem 0.8rem;
  font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.75rem); line-height: 1.2; color: var(--text);
  margin-bottom: 1rem;
}
.pc-h span { font-style: italic; font-size: 1rem; color: var(--mute); }

/* the log */
.pc-log-date { font-style: italic; font-size: 1.12rem; color: var(--brass); }
.pc-bells { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; margin-top: 0.9rem; }
.pc-pips { display: inline-flex; gap: 0.55rem; }
.pc-pips b { display: inline-flex; gap: 0.18rem; }
/* each pip a small bell seen from the side */
.pc-pips i {
  width: 14px; height: 15px; border-radius: 50% 50% 3px 3px / 70% 70% 3px 3px;
  border: 1.5px solid rgba(210, 173, 98, .55); background: transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.pc-pips i.on { background: linear-gradient(180deg, #f3d98f, #b8862f); border-color: #f3d98f; }
.pc-pips i.rung { animation: pc-ring .9s var(--ease); }
@keyframes pc-ring {
  0% { box-shadow: 0 0 0 0 rgba(243, 217, 143, .8); transform: rotate(-14deg); }
  30% { transform: rotate(10deg); }
  60% { transform: rotate(-5deg); }
  100% { box-shadow: 0 0 0 10px rgba(243, 217, 143, 0); transform: none; }
}
.pc-bell-t { font-size: 1.32rem; line-height: 1.25; color: var(--text); }

.pc-dl { display: flex; flex-direction: column; margin-top: 0.9rem; }
.pc-dl div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem;
  padding: 0.5rem 0; border-bottom: 1px solid rgba(210, 173, 98, .12);
}
.pc-dl dt { flex: none; font-family: var(--sc); font-size: 0.9rem; letter-spacing: 0.06em; color: var(--mute); }
.pc-dl dd { text-align: right; font-style: italic; color: var(--text); }
.pc-dl dd a {
  display: inline-block; padding: 10px 0; margin: -10px 0;   /* a 44px target without moving the line */
  color: var(--brass); text-decoration: underline; text-decoration-color: rgba(210, 173, 98, .45); text-underline-offset: 3px;
}
.pc-dl dd a:hover { color: #fff1cf; }
.pc-dl--rec { margin-top: 0; }
.pc-dl--rec dt { width: 9.5rem; }
.pc-dl--rec div { justify-content: flex-start; }
.pc-dl--rec dd { text-align: left; }

.pc-strike {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; margin-top: 1.1rem;
  padding: 0.5rem 1.1rem; border: 1px solid var(--brass); border-radius: 2px;
  background: transparent; color: var(--brass); cursor: pointer;
  font-family: var(--sc); font-size: 1rem; letter-spacing: 0.06em;
  transition: background .3s, color .3s;
}
.pc-strike svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pc-strike:hover { background: var(--brass); color: #1a1208; }
.pc-note { margin-top: 0.8rem; font-size: 0.94rem; line-height: 1.45; color: var(--mute); }

/* ───────────── the fleet ───────────── */
.pc-ships { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pc-ship {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 0.75rem; align-items: center;
  min-height: 64px; padding: 0.55rem 0.8rem 0.55rem 0.6rem;
  border: 1px solid rgba(210, 173, 98, .14); border-radius: 3px;
  background: rgba(236, 227, 203, .03);
  transition: background .3s, border-color .3s;
}
.pc-ship:hover, .pc-ship:focus-visible { background: rgba(236, 227, 203, .07); border-color: var(--brass); }
.pc-ship b { font-size: 1.08rem; line-height: 1.2; align-self: end; }
.pc-ship i { font-size: 0.96rem; line-height: 1.3; color: var(--dim); align-self: start; }
/* a mast with a swallow-tailed pennant in the ship's two colors, lifting
   in the wind */
.pc-flag { grid-row: span 2; position: relative; width: 46px; height: 46px; }
.pc-flag::before {
  content: ""; position: absolute; left: 9px; top: 4px; bottom: 3px; width: 2px; border-radius: 1px;
  background: linear-gradient(180deg, #f0d38c, #8a5f20);
}
.pc-flag::after {
  content: ""; position: absolute; left: 11px; top: 6px; width: 31px; height: 21px;
  background: linear-gradient(180deg, var(--f) 0 58%, var(--f2) 58%);
  clip-path: polygon(0 0, 100% 0, 76% 50%, 100% 100%, 0 100%);
  transform-origin: 0 50%;
  animation: pc-flutter 3.2s ease-in-out infinite;
}
.pc-ship:nth-child(3n+2) .pc-flag::after { animation-delay: -1.1s; }
.pc-ship:nth-child(3n) .pc-flag::after { animation-delay: -2.2s; }
@keyframes pc-flutter {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  50% { transform: skewY(-5deg) scaleX(.93); }
}

/* ───────────── the call ───────────── */
.pc-take {
  display: block; margin: clamp(2rem, 5vw, 3rem) auto 0; min-height: 52px;
  padding: 0.8rem 2rem; border: 1px solid var(--brass); border-radius: 2px;
  outline: 1px solid rgba(210, 173, 98, .35); outline-offset: 4px;
  background: transparent; color: var(--brass); cursor: pointer;
  font-style: italic; font-size: 1.35rem; letter-spacing: 0.02em;
  transition: background .3s, color .3s;
}
.pc-take:hover, .pc-take:focus-visible { background: var(--brass); color: #1a1208; outline: 1px solid rgba(210, 173, 98, .35); outline-offset: 4px; }

/* the answer: the page goes under, and the crew's half of the line comes up */
.pc.is-ended .pc-main, .pc.is-ended .pc-top { opacity: 0; transition: opacity 1.1s ease; pointer-events: none; }
.pc.is-ended .pc-follow { transform: translateY(-110%); }
.pc-done {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center;
  padding: calc(2rem + env(safe-area-inset-top, 0px)) calc(1.2rem + env(safe-area-inset-right, 0px)) calc(2rem + env(safe-area-inset-bottom, 0px)) calc(1.2rem + env(safe-area-inset-left, 0px));
  text-align: center;
  background: radial-gradient(60% 45% at 50% 40%, rgba(18, 50, 65, .7), transparent 75%), var(--sea);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 1.1s ease, visibility 0s 1.1s;
}
.pc.is-ended .pc-done { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 1.1s ease .2s, visibility 0s; }
.pc-done-orb { display: block; width: 96px; height: 96px; margin: 0 auto 1.4rem; opacity: .85; }
.pc:not(.is-ended) .pc-done-orb { display: none; }
.pc-done-k { font-family: var(--sc); font-size: 1rem; letter-spacing: 0.2em; color: var(--mute); }
.pc-done-t {
  margin-top: 0.4rem; font-style: italic; line-height: 1.05;
  font-size: clamp(2.4rem, 8vw, 4.6rem); color: var(--brass);
}
.pc-done-home {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 1.6rem;
  font-family: var(--sc); font-size: 1rem; letter-spacing: 0.1em; color: var(--text);
  border-bottom: 1px solid var(--line);
}
.pc-done-home:hover { color: var(--brass); border-color: var(--brass); }
.pc-done-stay {
  display: block; min-height: 44px; margin: 0.4rem auto 0; padding: 0 0.8rem;
  border: 0; background: none; cursor: pointer;
  font-style: italic; font-size: 0.98rem; color: var(--mute);
}
.pc-done-stay:hover { color: var(--dim); }

/* ───────────── phones ───────────── */
@media (max-width: 560px) {
  .pc-top { font-size: 0.86rem; }
  .pc-top-mid { order: 3; width: 100%; padding-bottom: 0.2rem; }
  .pc-dl div { flex-direction: column; gap: 0.1rem; }
  .pc-dl dd, .pc-dl--rec dd { text-align: left; }
  .pc-dl--rec dt { width: auto; }
  .pc-ships { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pc-swell, .pc-flag::after, .pc-pips i.rung, .pc-course.is-on line { animation: none; }
  .pc-follow, .pc-mark { transition: none; }
}