/* The shipyard (www/shipyard.php, spec ch. 2): each ship on a parchment card, as the home page's
   sheet is, her picture drawn by www/shipyard/shipyard.js at 3:2. */
.shipyard header, .shipyard main, .shipyard footer { max-width: 72rem; }
.shipyard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 24px; }
.shipyard-card { min-width: 0; margin-bottom: 24px; padding: 16px 20px 20px; border: 1px solid #8b6f3f; border-radius: 3px; color: var(--ink);
  background: var(--parchment); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 6px 24px rgba(0, 0, 0, 0.4); }
.shipyard-grid .shipyard-card { margin-bottom: 0; display: flex; flex-direction: column; }
.shipyard-card h2 { margin: 0 0 10px; font-size: 28px; }
.shipyard-render {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: contain;
}
.shipyard-stats {
    margin: 12px 0 0;
    padding-left: 18px;
}
a.shipyard-card-link {
    display: block;
    flex: 1;
    color: inherit;
    text-decoration: none;
}
a.shipyard-card-link:hover h2 { text-decoration: underline; text-underline-offset: 0.15em; }
.shipyard-act { margin: 16px 0 0; }
.shipyard-act .play { font-size: 20px; padding: 6px 28px; }
.shipyard-back {
    margin: 0 0 12px;
}
.shipyard-card > .shipyard-render {
    max-width: 720px;
    margin: 0 auto;
}
.shipyard-note {
    margin: 10px 0 0;
    font-size: 0.9em;
}

/* Blueprint (www/shipyard/blueprint.js): white line on blueprint blue. Drawn in metres, so line
   widths are screen pixels (non-scaling) except the grid, which is in metres. On a narrow
   screen the sheet keeps a readable width and scrolls sideways inside its card. */
.shipyard-blueprint, .shipyard-polar {
    overflow-x: auto;
    border-radius: 6px;
}
.shipyard-blueprint svg.bp, .shipyard-polar svg.bp {
    display: block;
    width: 100%;
    min-width: 640px;
    height: auto;
    font-family: "Courier New", Courier, monospace;
}
.bp-paper { fill: #1d4f86; }
.bp-grid { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 0.03; }
.bp-grid-major { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 0.05; }
.bp-border, .bp-outline, .bp-mid, .bp-thin, .bp-lwl, .bp-hidden, .bp-centre, .bp-mast, .bp-port, .bp-scale-open {
    fill: none;
    stroke: #eef4ff;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}
.bp-border { stroke-width: 1.5; }
.bp-outline { stroke-width: 1.8; }
.bp-mast { stroke-width: 2.2; }
.bp-mid { stroke-width: 1; stroke-opacity: 0.85; }
.bp-thin { stroke-width: 0.6; stroke-opacity: 0.55; }
.bp-lwl { stroke-width: 1.2; stroke: #ffd98a; }
.bp-hidden { stroke-width: 0.9; stroke-dasharray: 5 3; stroke-opacity: 0.7; }
.bp-centre { stroke-width: 0.8; stroke-dasharray: 10 3 2 3; stroke-opacity: 0.8; }
.bp-port { stroke-width: 0.9; }
.bp-scale-open { stroke-width: 0.9; }
.bp-scale-fill { fill: #eef4ff; }
/* Polar diagram (www/shipyard/polarplan.js), on the same sheet: the curve in the load waterline's
   yellow, its points, a wider unseen target for each one's hover title, and lettering that
   breaks the lines it sits on. */
.bp-polar { fill: rgba(255, 217, 138, 0.1); stroke: #ffd98a; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bp-dot { fill: #ffd98a; }
.bp-hit { fill: transparent; }
.bp-knock { paint-order: stroke; stroke: #1d4f86; stroke-width: 3; }
.bp-text { fill: #eef4ff; letter-spacing: 0.05em; }
.bp-title { fill: #ffffff; font-weight: bold; letter-spacing: 0.12em; }
/* The drawings (www/shipyard/shipyard.js): ink and wash, close up. */
.shipyard-views figure {
    margin: 0;
}
.shipyard-views img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #8b7355;
}
.shipyard-views figcaption {
    margin-top: 6px;
    font-style: italic;
    text-align: center;
    opacity: 1;
}