/* False Colors: the public site.
   The look is a run of colour woodcut prints pulled on tan stock, alternating with night-sea plates. One bold
   moment per page (the masthead on the home page, the page head elsewhere); everything else is quiet.

   Components (use these; add page-only rules in css/<page>.css):
     layout     .wrap  .wrap.narrow  .cols  .cols-3  .split (text | art)  .split.flip  .stack
     plates     section.plate (stock)  .plate.night (dark sea, wave edge on top)  .plate.deep (darker stock)  .tight
     type       h1 h2 (Pirata One)  h3 (Garamond semibold)  .lede  .fine  .caption (Fell italic)  .kicker
     quotes     blockquote.pull (a pull quote, signed in its footer; the Admiral's lines use it, docs/voice/admiral.md)
     actions    .btn  .btn.ghost  .btn.light  .btn.big  .actions (a row of buttons)  .text-link
     art        .print (rough paper edge mask)  .print-wrap (its shadow)  figure + figcaption  .ship-strip
     chrome     .site-head (fixed, injected)  .page-head (interior title band)  .site-foot (injected)
     forms      form.signup  .field  .checks  .consent  .form-msg  .inline-signup  .hp (honeypot)
     misc       details.faq  .fc-compare (fog slider)  .ladder (rank buttons)  .sr  .skip-link
   Motion: everything that moves stops under .motion-paused (the pause control) and prefers-reduced-motion. */

/* ---------- tokens ---------- */
:root{
  --stock:#e9dcc0; --stock-2:#dfcfac; --stock-hi:#f3ead3;
  --ink:#1c1814; --ink-2:#4a4038; --ink-3:#6f6355; --rule:rgba(28,24,20,.2);
  --scarlet:#b4271f; --scarlet-deep:#8e1c16;
  --night:#10263a; --night-2:#0b1b2a; --sea:#1f4b5e; --verdigris:#2e6e6a; --foam:#d9e2dc;
  --gold:#c99a3b; --gold-deep:#9d7320;
  --f0:#b02a2a; --f1:#1f3f8a; --f2:#1e6b47; --f3:#b27812; --f4:#5b2a86; --f5:#2a6b7c; --f6:#1b1b1b;
  --display:"Pirata One", Georgia, serif;
  --text:"EB Garamond", Garamond, "Times New Roman", serif;
  --fell:"IM Fell English", "EB Garamond", Georgia, serif;
  --fs-s:clamp(.95rem, .9rem + .2vw, 1.02rem);
  --fs-0:clamp(1.1rem, 1.04rem + .3vw, 1.25rem);
  --fs-1:clamp(1.3rem, 1.18rem + .5vw, 1.55rem);
  --fs-2:clamp(1.6rem, 1.4rem + .9vw, 2.1rem);
  --fs-3:clamp(2.1rem, 1.6rem + 2vw, 3.1rem);
  --fs-4:clamp(2.6rem, 1.8rem + 3.6vw, 4.6rem);
  --fs-5:clamp(3.2rem, 2rem + 6vw, 7.2rem);
  --gutter:clamp(16px, 4vw, 56px); --wrap:1240px; --narrow:760px;
  --head-h:76px;
  --shadow-block:4px 4px 0 var(--ink);
  /* the engraver's marks: hatch for shadows, crosshatch for storm, a wave hatch for water (as art/ships.js cuts them) */
  --hatch:repeating-linear-gradient(45deg,var(--ink) 0 1px,transparent 1px 4px);
  --crosshatch:repeating-linear-gradient(45deg,var(--ink) 0 1px,transparent 1px 3.5px),repeating-linear-gradient(-45deg,var(--ink) 0 1px,transparent 1px 3.5px);
  /* the hatch inverted, tan lines for shadows on a night plate, where an ink shadow would vanish */
  --hatch-tan:repeating-linear-gradient(45deg,var(--stock) 0 1px,transparent 1px 4px);
  --waves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10' viewBox='0 0 24 10'%3E%3Cpath d='M0 5q3-2.4 6 0t6 0t6 0t6 0' fill='none' stroke='%231c1814' stroke-width='.9'/%3E%3C/svg%3E");
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--stock);color:var(--ink);font:400 var(--fs-0)/1.58 var(--text);font-variant-numeric:oldstyle-nums;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}
/* paper grain over everything, very faint */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .25 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--scarlet)}
:focus-visible{outline:3px solid var(--scarlet);outline-offset:3px}
::selection{background:var(--scarlet);color:var(--stock-hi)}
h1,h2,h3,h4{margin:0 0 .5em;font-weight:400;line-height:1.02;text-wrap:balance}
h1,h2{font-family:var(--display);letter-spacing:.005em}
h1{font-size:var(--fs-5)}
h2{font-size:var(--fs-4)}
h3{font-family:var(--text);font-weight:600;font-size:var(--fs-2);line-height:1.12;letter-spacing:-.005em}
h4{font-family:var(--text);font-weight:600;font-size:var(--fs-1);line-height:1.2}
p{margin:0 0 1em;max-width:36em;text-wrap:pretty}
ul,ol{padding-left:1.2em}
li{margin:.25em 0}
hr{border:0;height:1px;background:var(--rule);margin:2.5rem 0}
.lede{font-size:var(--fs-1);line-height:1.45;max-width:30em}
.fine{font-size:var(--fs-s);color:var(--ink-3)}
.caption,figcaption{font-family:var(--fell);font-style:italic;font-size:var(--fs-s);color:var(--ink-3);line-height:1.4}
.kicker{font-family:var(--fell);font-style:italic;font-size:var(--fs-1);color:var(--scarlet);margin:0 0 .35em}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:300;background:var(--ink);color:var(--stock-hi);padding:10px 14px}
.skip-link:focus{top:10px}
thead th{border-bottom:1.5px solid var(--ink)}
kbd{font-family:var(--text);font-size:.9em;border:1px solid var(--rule);border-bottom-width:2px;padding:0 .3em;border-radius:3px}

/* ---------- layout ---------- */
.wrap{width:min(var(--wrap), 100% - 2 * var(--gutter));margin-inline:auto}
.wrap.narrow{width:min(var(--narrow), 100% - 2 * var(--gutter))}
.stack>*+*{margin-top:1rem}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,80px)}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,56px)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.split.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.flip>:first-child{order:2}
@media (max-width:860px){
  .cols,.cols-3,.split,.split.flip{grid-template-columns:1fr}
  .split.flip>:first-child{order:0}
}

/* ---------- plates ---------- */
.plate{position:relative;padding-block:clamp(72px,10vw,150px)}
.plate.tight{padding-block:clamp(48px,6vw,88px)}
.plate.deep{background:var(--stock-2)}
.plate.night{background-color:var(--night);color:var(--stock-hi);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='28'%3E%3Cpath d='M0 20 Q20 8 40 20 T80 20 T120 20 T160 20' fill='none' stroke='%23ffffff' stroke-opacity='.035' stroke-width='1.2'/%3E%3C/svg%3E")}
.plate.night::before{content:"";position:absolute;left:0;right:0;top:-23px;height:24px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cpath d='M0 24 L0 14 C10 14 14 4 30 4 C42 4 44 14 60 14 C70 14 74 4 90 4 C102 4 104 14 120 14 L120 24 Z' fill='%2310263a'/%3E%3C/svg%3E") repeat-x bottom/120px 24px}
.plate.night.no-edge::before{display:none}
.night a:not(.btn):hover{color:var(--gold)}
.night .fine,.night .caption,.plate.night figcaption{color:#b9c2c3}
.night .kicker{color:var(--gold)}
.night h2,.night h3{color:var(--stock-hi)}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26em);gap:clamp(20px,5vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,72px)}
.section-head h2{margin:0}
.section-head p{margin:0;color:var(--ink-2)}
.night .section-head p{color:#c9cfcc}
@media (max-width:860px){ .section-head{grid-template-columns:1fr} }

/* ---------- actions ---------- */
/* Buttons are engraved trade-card labels: a ruled border, a second hairline rule just inside it (the outline, drawn
   inward), small-caps lettering, and on the tan and outline buttons a printer's lozenge either side of the words. */
.btn{--bg:linear-gradient(180deg,#bf2e25,#a5231b);--hover:linear-gradient(180deg,#a5231b,#86190f);--fg:var(--stock-hi);
  --rule:rgba(243,234,211,.55);--lift:3px 3px 0 var(--ink);--orn:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:46px;
  padding:.6em 1.2em .66em;border:2px solid var(--ink);border-radius:6px;background:var(--bg);color:var(--fg);box-shadow:var(--lift);
  outline:1px solid var(--rule);outline-offset:-6px;
  font:600 1.08rem/1.1 var(--text);font-variant-caps:small-caps;letter-spacing:.045em;text-decoration:none;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .15s}
.btn:hover{color:var(--fg);background:var(--hover)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--scarlet);outline-offset:3px}
.btn.ghost{--bg:rgba(243,234,211,.35);--hover:var(--ink);--fg:var(--ink);--rule:rgba(28,24,20,.35);--orn:var(--scarlet);box-shadow:none}
.btn.ghost:hover{color:var(--stock-hi);--rule:rgba(243,234,211,.45);--orn:var(--gold)}
.btn.light{--bg:linear-gradient(180deg,#faf4e4,#e8dbbd);--hover:linear-gradient(180deg,#fcf6e8,#e2cb94);--fg:var(--ink);
  --rule:rgba(28,24,20,.5);--orn:var(--scarlet);border-color:var(--ink);--lift:4px 4px 0 #000}
.btn.light:hover{color:var(--ink)}
.night .btn{--lift:4px 4px 0 #000}
.night .btn:not(.light){border-color:var(--stock-hi)}
.night .btn.ghost{--bg:rgba(11,27,42,.35);--hover:var(--stock-hi);--fg:var(--stock-hi);--rule:rgba(243,234,211,.4);--orn:var(--gold)}
.night .btn.ghost:hover{color:var(--ink);--rule:rgba(28,24,20,.4);--orn:var(--scarlet)}
/* the lozenges: on the tan and outline buttons, not in the header or the menu (those carry icons) */
.btn.light::before,.btn.light::after,.btn.ghost::before,.btn.ghost::after{content:"";flex:none;width:.34em;height:.34em;background:var(--orn);transform:rotate(45deg);transition:transform .2s ease}
.btn.light:hover::before,.btn.light:hover::after,.btn.ghost:hover::before,.btn.ghost:hover::after{transform:rotate(45deg) scale(1.35)}
.head-actions .btn::before,.head-actions .btn::after,.site-menu .btn::before,.site-menu .btn::after,.btn:has(.ico)::before,.btn:has(.ico)::after{content:none}
.btn.big{font-size:1.2rem;padding:.74em 1.45em .8em;min-height:56px}
.btn[disabled]{opacity:.55;cursor:wait}
.actions{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.text-link{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em;text-decoration-color:var(--scarlet)}
.text-link:hover{text-decoration-color:currentColor}
.night .text-link{text-decoration-color:var(--gold)}

/* ---------- art ---------- */
/* framed: a plain rectangular picture (a screenshot, a render) in an ink rule with a slim printer's block shadow
   (half the buttons' offset, owner 9 October 2026) */
.framed{border-radius:2px;border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);background:var(--stock-hi)}
.night .framed{border-color:var(--stock-hi);box-shadow:2px 2px 0 #000}
/* print: a torn paper edge; print-wrap stands it on a hatched block, cut a little off register like the colour plate */
.print{mask-image:url(img/paper-edge.svg);mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-image:url(img/paper-edge.svg);-webkit-mask-size:100% 100%}
.print-wrap{position:relative;filter:drop-shadow(1px 1.5px 0 rgba(28,24,20,.28))}
/* its shadow is the same torn sheet, hatched and set 5px down and right, so it shows only below and to the right */
.print-wrap>.print{display:block}
.print-wrap::after{content:"";position:absolute;inset:0;transform:translate(5px,5px);background:var(--hatch);opacity:.55;z-index:-1;pointer-events:none;
  mask-image:url(img/paper-edge.svg);mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-image:url(img/paper-edge.svg);-webkit-mask-size:100% 100%}
.night .print-wrap::after{background:var(--hatch-tan);opacity:.55}
/* hatch: any box that should stand on the hatched block (a card, a notice, a sheet) */
.hatch{position:relative;border:1.5px solid var(--ink);border-radius:2px}
.hatch::after{content:"";position:absolute;inset:4px -4.5px -4.5px 4px;background:var(--hatch);opacity:.55;z-index:-1;pointer-events:none}
.night .hatch{border-color:var(--stock-hi)}
.night .hatch::after{background:var(--hatch-tan);opacity:.55}
/* water: the wave hatch behind a ship standing on stock (the rank ladder, the footer's fleets) */
.water{background:var(--waves) 0 0/24px 10px repeat,var(--stock)}
/* the ornament under a section title: two rules and a scarlet point, as the rulebook's chapter heads */
.section-head h2::after,.orn::after{content:"";display:block;width:120px;height:9px;margin-top:14px;background:
  linear-gradient(currentColor,currentColor) 0 1px/100% 1px no-repeat,linear-gradient(currentColor,currentColor) 0 7px/100% 1px no-repeat,
  radial-gradient(circle at 60px 4px,var(--scarlet) 2.6px,transparent 3px)}
.night .section-head h2::after,.night .orn::after{background:
  linear-gradient(currentColor,currentColor) 0 1px/100% 1px no-repeat,linear-gradient(currentColor,currentColor) 0 7px/100% 1px no-repeat,
  radial-gradient(circle at 60px 4px,var(--gold) 2.6px,transparent 3px)}
/* a drop cap on a lead paragraph */
.dropcap::first-letter{font-family:var(--display);font-size:3em;float:left;line-height:.82;padding:.06em .1em 0 0;color:var(--scarlet)}
.night .dropcap::first-letter{color:var(--gold)}
figure{margin:0}
figure figcaption{margin-top:.7em}
.ship-strip{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(4px,1vw,14px);align-items:end}
.ship-strip img{width:100%;height:auto}
@media (max-width:620px){ .ship-strip{grid-template-columns:repeat(5,minmax(0,1fr))} }

/* ---------- header (injected by build.js from partials/header.html) ---------- */
.site-head{position:fixed;inset:0 0 auto;z-index:200;height:var(--head-h);transition:background-color .25s, box-shadow .25s}
.site-head .bar{height:100%;display:flex;align-items:center;gap:clamp(12px,2.4vw,32px);width:min(1400px, 100% - 2 * var(--gutter));margin-inline:auto}
.head-mark{flex:none;display:block;width:146px;margin-top:2px;align-self:flex-start;transition:opacity .2s}
.head-mark img{width:146px;height:auto;filter:drop-shadow(1px 3px 2px rgba(40,24,10,.28))}
.head-nav{display:flex;gap:clamp(14px,2vw,30px);margin-left:auto}
/* icons: the game client's own line drawings (fc-icons.js), copied in by build.js as a sprite */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.head-nav a{display:inline-flex;align-items:center;gap:7px;font-size:1.04rem;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.head-nav .ico{color:var(--scarlet);transition:transform .25s ease}
.head-nav a:hover .ico{transform:rotate(-10deg) scale(1.08)}
.btn .ico{width:1.05em;height:1.05em;margin-left:-.1em}
.head-nav a:hover{color:var(--ink);border-bottom-color:var(--scarlet)}
.head-nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.head-actions{display:flex;gap:12px;align-items:center}
.head-actions .btn{min-height:42px;padding:.45em .95em .5em;font-size:1.02rem;--lift:3px 3px 0 var(--ink);outline-offset:-5px}
.site-head.on-night:not(.solid) .head-nav a,.site-head.on-night:not(.solid) .menu-btn{color:var(--stock-hi)}
.site-head.on-night:not(.solid) .head-nav a:hover{border-bottom-color:var(--gold)}
.site-head.on-night:not(.solid) .head-nav .ico{color:var(--gold)}
.site-head.on-night:not(.solid) .btn.ghost{--fg:var(--stock-hi);border-color:var(--stock-hi)}
.site-head.on-night:not(.solid) .btn{border-color:var(--stock-hi);box-shadow:3px 3px 0 #000}
.site-head.solid{background:color-mix(in srgb,var(--stock) 94%,transparent);box-shadow:0 1px 0 var(--rule), 0 8px 24px -18px rgba(40,24,10,.5);backdrop-filter:blur(6px)}
/* on the home page the mark waits for the masthead flag to dock into it */
.home .site-head:not(.docked) .head-mark{opacity:0;pointer-events:none}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px;background:none;border:0;font:600 1.05rem var(--text);color:var(--ink);cursor:pointer}
.menu-btn i{display:grid;gap:5px;width:24px}
.menu-btn i::before,.menu-btn i::after,.menu-btn i b{content:"";display:block;height:2px;background:currentColor;transition:transform .2s, opacity .2s}
.menu-open .menu-btn i::before{transform:translateY(7px) rotate(45deg)}
.menu-open .menu-btn i::after{transform:translateY(-7px) rotate(-45deg)}
.menu-open .menu-btn i b{opacity:0}
.site-menu{position:fixed;inset:0;z-index:190;background:var(--stock);padding:calc(var(--head-h) + 40px) var(--gutter) 40px;display:none;overflow:auto}
.site-menu nav{display:grid;gap:2px;max-width:560px}
.site-menu nav a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;font:400 clamp(1.9rem,8vw,2.6rem)/1.05 var(--display);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--rule)}
.site-menu nav .ico{width:1.6rem;height:1.6rem;color:var(--scarlet);stroke-width:1.5}
.site-menu nav small{display:block;font:italic 400 1.02rem/1.3 var(--fell);color:var(--ink-3);margin-top:4px}
.site-menu .actions{margin-top:28px}
.menu-open .site-menu{display:block}
.menu-open{overflow:hidden}
.menu-open .site-head{background:var(--stock)}
.menu-open .site-head .head-mark{opacity:1}
.home.menu-open .site-head:not(.docked) .head-mark{opacity:1;pointer-events:auto}
@media (max-width:1100px){
  .head-nav,.head-actions .ghost{display:none}
  .menu-btn{display:inline-flex}
  .head-actions{margin-left:auto}
}
@media (max-width:520px){
  :root{--head-h:67px}
  .head-mark{width:126px;margin-top:2px}
  .head-mark img{width:126px}
  .head-actions .btn{font-size:.95rem;padding:.4em .75em}
  .menu-btn span{display:none}
}

/* ---------- interior page head ---------- */
.page-head{position:relative;padding:calc(var(--head-h) + clamp(56px,8vw,120px)) 0 clamp(56px,7vw,100px);overflow:hidden;isolation:isolate}
.page-head .wrap{position:relative;z-index:1}
.page-head h1{margin:0 0 .25em;max-width:11em}
.page-head .lede{max-width:28em}
.page-head .head-art{position:absolute;right:max(-4vw,-60px);bottom:-10px;width:min(50vw,720px);z-index:0;pointer-events:none}
.page-head.night{background:var(--night);color:var(--stock-hi)}
.page-head.night h1{color:var(--stock-hi)}
/* the engraved sky: thinning horizontal lines, as art/ships.js draws behind every ship */
.sky-lines{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(to bottom, transparent 0 9px, rgba(28,24,20,.12) 9px 10px);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);mask-image:linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent)}
@media (max-width:860px){ .page-head .head-art{position:relative;right:auto;width:100%;margin-top:24px} }

/* ---------- home masthead ---------- */
/* Back to front: stock and sky lines, two engraved clouds, the battle print, its surf, the copy, the flag.
   site.js moves each layer at its own fraction of the scroll and flies the flag into the header. */
.masthead{--flag-w:clamp(300px, min(54vw, 62svh), 820px);--print-w:max(100vw, 1100px);--print-top:calc(var(--head-h) + var(--flag-w) * .5 - 2svh);
  position:relative;height:calc(var(--print-top) + var(--print-w) * .6667 + 40px);overflow:clip;isolation:isolate;
  background:linear-gradient(to bottom, var(--stock) 0%, #e6d6b5 40%, #dccaa5 70%, var(--night) 99%)}
.masthead .layer{position:absolute;left:0;right:0;will-change:transform;pointer-events:none}
.masthead .sky-lines{z-index:0}
.mh-cloud{width:clamp(320px,46vw,760px);opacity:.9}
.mh-cloud.a{left:-5vw;right:auto;top:calc(var(--head-h) + 2svh)}
.mh-cloud.b{left:auto;right:-7vw;top:calc(var(--head-h) + 22svh);width:clamp(260px,34vw,580px);opacity:.7}
.mh-print{z-index:2;top:var(--print-top);display:flex;justify-content:center}
.mh-print img{width:var(--print-w);max-width:none;height:auto;flex:none}
.mh-flag{position:absolute;z-index:6;left:calc(50% - var(--flag-w) / 2);top:calc(var(--head-h) + 1svh);width:var(--flag-w);transform-origin:0 0}
.mh-flag .sway{transform-origin:5% 12%;animation:sway 9s ease-in-out infinite}
.mh-flag img{width:100%;height:auto;filter:drop-shadow(4px 10px 10px rgba(50,30,12,.28))}
@keyframes sway{0%,100%{transform:rotate(-.5deg) skewY(.3deg)}50%{transform:rotate(.6deg) skewY(-.4deg)}}
.mh-copy{position:absolute;z-index:5;left:0;right:0;top:calc(var(--head-h) + 1svh + var(--flag-w) * .5);text-align:center;padding-inline:var(--gutter)}
.mh-copy::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(980px,120vw);height:190%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(233,220,192,.95), rgba(233,220,192,.78) 50%, rgba(233,220,192,0))}
.mh-hook{font:400 var(--fs-3)/1 var(--display);margin:0 auto .28em;max-width:none}
.mh-sub{font-size:var(--fs-1);line-height:1.4;margin:0 auto 1.05em;max-width:27em;color:var(--ink-2)}
.mh-copy .actions{justify-content:center}
.mh-note{margin:1.1em auto 0;font-family:var(--fell);font-style:italic;font-size:var(--fs-s);color:var(--ink-2);max-width:none}
.mh-foot{position:absolute;z-index:7;left:0;right:0;bottom:26px;display:flex;justify-content:space-between;align-items:center;width:min(1400px,100% - 2 * var(--gutter));margin-inline:auto;color:var(--stock-hi)}
.motion-toggle{display:inline-flex;gap:8px;align-items:center;min-height:36px;padding:4px 12px;background:rgba(11,27,42,.55);border:1px solid rgba(243,234,211,.4);color:var(--stock-hi);font:500 .92rem var(--text);border-radius:2px;cursor:pointer}
.motion-toggle:hover{background:rgba(11,27,42,.85)}
.mh-cue{font-family:var(--fell);font-style:italic;font-size:1.05rem;text-shadow:0 1px 6px rgba(0,0,0,.7);text-decoration:none}
.mh-cue:hover{color:var(--gold)}
@media (max-width:700px){
  .masthead{--flag-w:min(94vw,520px);--print-w:200vw;--print-top:calc(var(--head-h) + var(--flag-w) * .5 + 320px)}
  .mh-flag{top:calc(var(--head-h) + 4px)}
  .mh-copy{top:calc(var(--head-h) + var(--flag-w) * .5 + 2px)}
  .mh-hook{font-size:clamp(2.3rem,10.5vw,3rem);line-height:.98}
  .mh-cloud.a{width:96vw;top:calc(var(--head-h) + 30px)}
  .mh-cloud.b{display:none}
  .mh-copy .btn.big{width:100%;max-width:340px}
}

/* ---------- the rank ladder (home and learn): a button per ship, the engine says who beats whom ---------- */
.ladder{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(4px,.8vw,12px);margin:0;padding:0;list-style:none}
.ladder li{margin:0}
.ladder button{all:unset;box-sizing:border-box;display:grid;justify-items:center;gap:6px;width:100%;padding:10px 4px 12px;cursor:pointer;border:2px solid transparent;border-radius:3px;transition:background-color .15s,border-color .15s,opacity .15s}
.ladder button:hover{background:rgba(243,234,211,.07)}
.ladder button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ladder button[aria-pressed="true"]{border-color:var(--stock-hi);background:rgba(243,234,211,.12)}
.ladder img{width:100%;max-width:120px;background:var(--waves) 0 0/24px 10px repeat,var(--stock);border:1.5px solid var(--ink);border-radius:2px;padding:6px 4px}
.ladder .r{font:400 clamp(1.3rem,2.4vw,2rem)/1 var(--display)}
.ladder .n{font-size:.88rem;line-height:1.15;text-align:center;color:#c9cfcc}
.ladder li.dim button{opacity:.35}
.ladder li.win button{border-color:var(--gold)}
.ladder li.lose button{border-color:var(--scarlet)}
.ladder li.both button{border-color:#8fa6ad;border-style:dashed}
@media (max-width:760px){
  .ladder{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ladder .n{display:none}
}

/* ---------- fog slider (a recorded game: the public view against the referee's view) ---------- */
.fc-compare{position:relative;--x:55%;overflow:clip;isolation:isolate}
.fc-compare>img{width:100%;height:auto}
.fc-compare .fc-public{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.fog-label{position:absolute;top:12px;background:rgba(16,38,58,.88);color:var(--stock-hi);padding:5px 10px;font-size:.9rem}
.fog-left{left:12px}.fog-right{right:12px}
.fog-line{position:absolute;left:var(--x);top:0;bottom:0;width:2px;background:var(--stock-hi);box-shadow:0 0 10px rgba(0,0,0,.4)}
.fog-control{display:flex;align-items:center;gap:18px;font-size:var(--fs-s);padding:16px 0 0}
.fog-control input{flex:1;accent-color:var(--scarlet);cursor:ew-resize;min-height:30px}

/* ---------- forms ---------- */
form.signup{display:grid;gap:16px;max-width:560px}
.field{display:grid;gap:6px}
.field label,.checks legend{font-weight:600;font-size:1rem}
input[type=email],input[type=text],select,textarea{width:100%;min-height:48px;padding:.55em .75em;border:2px solid var(--ink);border-radius:2px;background:var(--stock-hi);color:var(--ink);font:400 1.08rem var(--text)}
input::placeholder{color:#8a7d6c}
.checks{border:0;padding:0;margin:0;display:grid;gap:8px}
.checks legend{margin-bottom:6px}
.checks label{display:flex;gap:10px;align-items:flex-start;font-size:1.02rem;line-height:1.35;cursor:pointer}
.checks input,.consent input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--scarlet)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-s);line-height:1.4;color:var(--ink-2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{position:relative;padding:14px 16px;border:2px solid var(--ink);background:var(--stock-hi);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.form-msg.err{border-color:var(--scarlet);color:var(--scarlet-deep)}
.inline-signup{display:flex;gap:10px;flex-wrap:wrap}
.inline-signup input{flex:1 1 220px;width:auto;min-width:0}
.night input[type=email],.night input[type=text],.site-foot input[type=email]{border-color:var(--stock-hi)}
.night .consent,.site-foot .consent{color:#c9cfcc}

/* ---------- the recruiting bill (home and captains): an eighteenth-century broadside, set in type ---------- */
.bill-poster{background:var(--stock-hi);color:var(--ink);padding:clamp(28px,4vw,52px) clamp(24px,3.5vw,48px);text-align:center;border:2px solid var(--ink);
  box-shadow:0 0 0 8px var(--stock-hi), 0 0 0 10px var(--ink), 12px 14px 0 10px rgba(0,0,0,.35);transform:rotate(-1.4deg);margin:10px}
.bill-top{font:400 clamp(1.4rem,2.4vw,2rem)/1 var(--fell);letter-spacing:.32em;margin:0 auto .2em;max-width:none;padding-left:.32em}
.bill-poster h2,.bill-title{font-size:clamp(4rem,9vw,7.4rem);line-height:.85;margin:0;color:var(--scarlet)}
.night .bill-poster h2,.bill-title{color:var(--scarlet)}
.bill-for{font:italic 400 var(--fs-1)/1.3 var(--fell);margin:.3em auto 1em;max-width:none}
.bill-gets{list-style:none;padding:16px 0 0;margin:0;border-top:3px double var(--ink);display:grid;gap:6px;font-size:var(--fs-0)}
.bill-gets li{margin:0}
.bill-countdown{margin:18px auto 0;padding-top:14px;border-top:3px double var(--ink);font-family:var(--fell);font-style:italic;max-width:none}
.bill-countdown b{font:400 1.3em var(--display);font-style:normal;color:var(--scarlet);display:block}
.bill-form .signup{max-width:none}
.bill-form .field label,.bill-form legend{color:var(--stock-hi)}
.bill-form .checks label{color:#e2e6e1}
.bill-title{font-family:var(--display);margin:0 auto}
.bill-sig{font:italic 400 var(--fs-s)/1.4 var(--fell);margin:16px auto 0;max-width:none}

/* ---------- pull quotes: a line in the display face, its source in the footer. The history page keeps its own copy
   of these after its .read rules, which would otherwise win there ---------- */
.pull{margin:2.2rem 0 2.4rem;padding:0 0 0 clamp(18px,3vw,32px);border-left:3px solid var(--scarlet)}
.pull p{font:400 clamp(1.7rem,1.3rem + 1.6vw,2.5rem)/1.12 var(--display);margin:0 0 .45em}
.pull footer{font-family:var(--fell);font-style:italic;font-size:var(--fs-s);color:var(--ink-3)}
.night .pull{border-left-color:var(--gold)}
.night .pull p{color:var(--stock-hi)}
.night .pull footer{color:#b9c2c3}

/* ---------- questions ---------- */
details.faq{border-top:1px solid var(--rule)}
details.faq:last-of-type{border-bottom:1px solid var(--rule)}
details.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:18px 0;font-weight:600;font-size:var(--fs-1);line-height:1.25}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font:400 1.6rem/1 var(--display);color:var(--scarlet);transition:transform .2s}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq>div,details.faq>p{padding:0 0 20px}

/* ---------- footer (injected from partials/footer.html) ---------- */
.site-foot{position:relative;background:var(--night-2);color:#d8dcd6;padding:clamp(80px,9vw,130px) 0 36px;margin-top:24px}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:-23px;height:24px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cpath d='M0 24 L0 14 C10 14 14 4 30 4 C42 4 44 14 60 14 C70 14 74 4 90 4 C102 4 104 14 120 14 L120 24 Z' fill='%230b1b2a'/%3E%3C/svg%3E") repeat-x bottom/120px 24px}
.plate.night + .site-foot{margin-top:0}
.site-foot a{text-decoration:none}
.site-foot .fine{color:#a9b2b1}
.site-foot a:hover{color:var(--gold)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.foot-brand img{width:220px;margin:-12px 0 18px -6px}
.foot-brand p{max-width:24em}
.foot-signup{margin-top:24px;max-width:460px}
.foot-signup h3{font:400 var(--fs-2)/1 var(--display);color:var(--stock-hi);margin-bottom:.35em}
.foot-signup .consent{margin-top:10px}
.foot-signup .form-msg{margin-top:10px}
.foot-col h4{font:600 1.02rem var(--text);color:var(--gold);margin:6px 0 14px;letter-spacing:.01em}
.foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.foot-col li{margin:0}
.foot-fleets{display:flex;gap:10px;margin:clamp(48px,6vw,80px) 0 26px;flex-wrap:wrap;align-items:flex-end}
.foot-fleets img{width:58px;height:auto;background:var(--waves) 0 0/24px 10px repeat,var(--stock-hi);padding:3px;border-radius:2px}
.foot-social{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.foot-social:empty{display:none}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;border-top:1px solid rgba(243,234,211,.16);padding-top:22px;font-size:.95rem;color:#a9b2b1}
.foot-base nav{display:flex;gap:20px;flex-wrap:wrap}
.foot-legal{flex-basis:100%;margin:6px 0 0;max-width:none;font-size:.85rem;color:#8d9897}
@media (max-width:980px){ .foot-top{grid-template-columns:1fr 1fr 1fr} .foot-brand{grid-column:1/-1} }
@media (max-width:560px){ .foot-top{grid-template-columns:1fr 1fr} .foot-fleets img{width:44px} }

/* ---------- motion ---------- */
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
  .site-head,.site-menu,.mh-foot,.site-foot form{display:none!important}
  body::before{display:none}
  .plate{padding-block:24px}
}

/* ---------- galleries (site.js): a picture you can open larger, and the viewer it opens in ---------- */
.zoom{all:unset;box-sizing:border-box;display:block;position:relative;width:100%;cursor:zoom-in;border-radius:8px}
.zoom img{display:block;transition:transform .35s ease, filter .35s ease}
.zoom::after{content:"View larger";position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:5px 11px 6px;
  border-radius:20px;background:rgba(16,38,58,.86);color:var(--stock-hi);font:600 .82rem/1 var(--text);font-variant-caps:small-caps;letter-spacing:.05em;
  opacity:0;transform:translateY(4px);transition:opacity .2s, transform .2s;pointer-events:none}
.zoom:hover::after,.zoom:focus-visible::after{opacity:1;transform:none}
.zoom:hover img{filter:brightness(1.04)}
.zoom:focus-visible{outline:3px solid var(--scarlet);outline-offset:4px}
/* a framed picture on a night plate stands on the tan hatch, 5px down and right, in place of the ink shadow */
.night .zoom{isolation:isolate}
.night .zoom .framed{box-shadow:none}
.night .zoom::before{content:"";position:absolute;inset:0;transform:translate(5px,5px);background:var(--hatch-tan);opacity:.55;border-radius:2px;z-index:-1;pointer-events:none}
@media (hover:none){ .zoom::after{opacity:.92;transform:none} }
body.viewing{overflow:hidden}
.viewer{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(9,20,31,.94);color:var(--stock-hi);
  display:none;grid-template-rows:minmax(0,1fr) auto}
.viewer[open]{display:grid}
.viewer::backdrop{background:rgba(9,20,31,.6)}
.v-stage{position:relative;display:grid;place-items:center;padding:clamp(56px,6vw,80px) clamp(56px,8vw,120px) 12px;min-height:0}
.v-fig{margin:0;display:grid;justify-items:center;gap:14px;max-height:100%;min-height:0}
.v-img{max-width:min(100%,1500px);max-height:calc(100dvh - 210px);width:auto;height:auto;object-fit:contain;border-radius:8px;background:var(--stock-hi);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8);animation:v-in .25s ease}
@keyframes v-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.v-cap{max-width:56em;text-align:center;font:italic 400 var(--fs-0)/1.4 var(--fell);color:#d8dcd6}
.v-nav{all:unset;position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:rgba(243,234,211,.1);border:1px solid rgba(243,234,211,.35);transition:background .15s}
.v-nav:hover{background:rgba(243,234,211,.22)}
.v-nav:focus-visible,.v-close:focus-visible,.v-strip button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.v-nav svg,.v-close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v-prev{left:clamp(8px,2vw,28px)}.v-next{right:clamp(8px,2vw,28px)}
.v-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px clamp(16px,3vw,40px) 20px;border-top:1px solid rgba(243,234,211,.12)}
.v-count{font:400 1.1rem var(--display);color:var(--gold)}
.v-strip{display:flex;gap:10px;justify-content:center}
.v-strip button{all:unset;cursor:pointer;width:72px;height:50px;border-radius:5px;overflow:hidden;opacity:.5;outline:2px solid transparent;transition:opacity .15s}
.v-strip button:hover{opacity:.85}
.v-strip button[aria-current="true"]{opacity:1;outline:2px solid var(--gold);outline-offset:2px}
.v-strip img{width:100%;height:100%;object-fit:cover;object-position:top}
.v-close{all:unset;justify-self:end;display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:8px 14px;border-radius:20px;border:1px solid rgba(243,234,211,.35);
  font:600 1rem var(--text);font-variant-caps:small-caps;letter-spacing:.05em}
.v-close:hover{background:rgba(243,234,211,.12)}
.viewer.single .v-nav,.viewer.single .v-strip{display:none}
@media (max-width:640px){
  .v-stage{padding:56px 10px 8px}
  .v-nav{top:auto;bottom:-6px;width:44px;height:44px}
  .v-strip{display:none}
  .v-img{max-height:calc(100dvh - 190px)}
}
@media (prefers-reduced-motion:reduce){ .v-img{animation:none} }

/* ---------- the welcome letter (site.js): after signing on, the form gives way to a letter under a wax seal ---------- */
.welcome{position:relative;margin:34px 6px 10px;padding:46px clamp(18px,3vw,32px) 24px;color:var(--ink);text-align:left;outline:none;
  background:var(--stock-hi) linear-gradient(to bottom, rgba(255,250,235,.7), rgba(233,220,192,.0) 45%);
  border:2px solid var(--ink);border-radius:6px;box-shadow:0 0 0 5px var(--stock-hi), 0 0 0 6px var(--ink), 10px 12px 0 4px rgba(0,0,0,.22);
  animation:letter-in .5s cubic-bezier(.2,.8,.3,1) both}
.welcome .seal{position:absolute;left:50%;top:-34px;width:68px;height:68px;display:grid;place-items:center;border-radius:50%;color:var(--stock-hi);
  background:radial-gradient(circle at 38% 32%, #d4483c 0 18%, #b4271f 46%, #7d150f 100%);
  box-shadow:0 0 0 4px #9a1e17, 0 0 0 6px rgba(125,21,15,.45), 0 6px 12px rgba(60,10,5,.45), inset 0 -4px 8px rgba(0,0,0,.35);
  transform:translateX(-50%) rotate(-8deg);animation:seal-stamp .7s .25s cubic-bezier(.2,1.4,.4,1) both}
.welcome .seal::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1.5px dashed rgba(243,234,211,.55)}
.welcome .seal::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(180,39,31,.5);opacity:0;animation:seal-ring .7s .55s ease-out both}
.welcome .seal .ico{width:28px;height:28px;stroke-width:1.8}
.welcome .w-kicker{margin:0 auto 2px;text-align:center;max-width:none;font:italic 400 1.02rem var(--fell);color:var(--scarlet)}
.welcome .w-title{margin:0 0 16px;text-align:center;font:400 clamp(1.9rem,1.5rem + 1.6vw,2.6rem)/1.02 var(--display);color:var(--ink)}
.welcome .w-steps{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px;counter-reset:w}
.welcome .w-steps li{margin:0;counter-increment:w;display:grid;grid-template-columns:1.7em minmax(0,1fr);gap:10px;font-size:1.02rem;line-height:1.45;color:var(--ink-2)}
.welcome .w-steps li::before{content:counter(w);font:400 1.55em/1 var(--display);color:var(--scarlet);text-align:center}
.welcome .w-steps b{color:var(--ink)}
.welcome .w-steps .text-link{white-space:nowrap}
.welcome .w-wait{margin:4px 0 10px;padding-top:12px;border-top:3px double var(--rule);max-width:none;font:italic 400 1rem var(--fell);color:var(--ink-3)}
.welcome .actions{gap:12px}
.welcome .btn.ghost,.night .welcome .btn.ghost{--bg:rgba(243,234,211,.35);--hover:var(--ink);--fg:var(--ink);--rule:rgba(28,24,20,.35);--orn:var(--scarlet);border-color:var(--ink)}
.welcome .btn.ghost:hover,.night .welcome .btn.ghost:hover{color:var(--stock-hi);--rule:rgba(243,234,211,.45);--orn:var(--gold)}
.night .welcome .btn:not(.light){border-color:var(--ink)}
.welcome .btn{--lift:3px 3px 0 var(--ink)}
.site-foot .welcome .w-steps li{font-size:.98rem}
@keyframes letter-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes seal-stamp{0%{opacity:0;transform:translateX(-50%) scale(1.9) rotate(-34deg)}55%{opacity:1;transform:translateX(-50%) scale(.9) rotate(-6deg)}100%{opacity:1;transform:translateX(-50%) scale(1) rotate(-8deg)}}
@keyframes seal-ring{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}
@media (prefers-reduced-motion:reduce){ .welcome,.welcome .seal,.welcome .seal::after{animation:none} .welcome .seal::after{display:none} }
.welcome{scroll-margin-top:52px}