/* Secret Sails: 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, a soft shadow above and below)  .plate.deep (darker stock, deckled edges)  .tight
     type       h1 h2 and labels (New Rocker, --display)  h3 (Garamond semibold)  .lede  .fine  .caption (Fell italic)
                ship ratings (7 to 1, X, A) in Pirata One, --rating, the glyphs engraved on the tiles (art/make_glyphs.py);
                a number or abbreviation standing alone (a score, a count, a step, a code) in Pirata One, --numeral;
                a number inside a heading's sentence keeps the heading's face (owner, 10 October 2026). New Rocker is
                never set in capitals (no uppercase, no small caps): a label that wants caps takes another face
     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 prefers-reduced-motion (.motion-paused, set by site.js; no button). */

/* ---------- 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:"New Rocker", Georgia, serif;
  /* New Rocker sets about a fifth wider than Pirata One at one size: the big headings (h1, h2) take this share of
     their size; smaller display text keeps its own size, where the face reads well */
  --display-k:.9;
  /* New Rocker set a little tight everywhere it appears (owner, 10 October 2026: "tighten up new rocker space across the site slightly") */
  --display-track:-.035em;
  --rating:"Pirata One", Georgia, serif;
  --numeral:"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");
  /* the paper's grain, drawn in code (art/make_paper.py): the top layer of every tan surface, as in
     background:var(--grain),var(--stock-hi). It scrolls with its surface (no fixed layer, nothing redrawn on scroll);
     not on night plates, pictures or the ship art */
  --grain:url(/img/paper-grain.webp);
  /* a deckled paper edge, drawn in code (300 x 8, seamless): the masks for a strip hung under the menu and above and
     below the darker paper bands (owner) */
  --deckle-bottom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='8' viewBox='0 0 300 8'%3E%3Cpath d='M0 0H300V5.65L297.5 6.17L295 5.84L292.5 5.37L290 4.52L287.5 4.12L285 4.92L282.5 4.46L280 4.4L277.5 4.74L275 5.11L272.5 5.22L270 4.63L267.5 4.43L265 4.97L262.5 3.57L260 3.26L257.5 3.52L255 3.11L252.5 4.59L250 4.54L247.5 4.9L245 6.07L242.5 5.06L240 5.58L237.5 5.02L235 4.85L232.5 4.93L230 5.62L227.5 5.32L225 5.02L222.5 6.59L220 5.81L217.5 6.93L215 7.6L212.5 6.39L210 5.98L207.5 5.45L205 5.67L202.5 5.08L200 5.53L197.5 4.79L195 5.58L192.5 5.03L190 6.55L187.5 5.86L185 6.07L182.5 4.28L180 5.04L177.5 3.66L175 4.19L172.5 3.8L170 3.35L167.5 3.49L165 4.12L162.5 4.96L160 5.5L157.5 4.25L155 4.77L152.5 4.3L150 4.23L147.5 4.57L145 4.85L142.5 4.07L140 4.88L137.5 5.26L135 6.21L132.5 5.4L130 5.79L127.5 5.93L125 5.57L122.5 5.18L120 4.92L117.5 6.31L115 5.38L112.5 6.63L110 7.16L107.5 7.25L105 6.88L102.5 6.59L100 6.6L97.5 5.47L95 5.7L92.5 4.49L90 5.39L87.5 5.49L85 5.5L82.5 4.91L80 5.42L77.5 5.29L75 5.22L72.5 3.49L70 3.91L67.5 2.92L65 3.13L62.5 4.3L60 4.1L57.5 5.19L55 4.58L52.5 4.38L50 4.57L47.5 4.29L45 5.52L42.5 5.11L40 3.84L37.5 5.31L35 4.37L32.5 4.93L30 5.61L27.5 6.25L25 6.09L22.5 6.88L20 6.78L17.5 6.85L15 5.96L12.5 5.67L10 5.51L7.5 5.34L5 6.58L2.5 6.1L0 5.65Z' fill='%23000'/%3E%3C/svg%3E");
  --deckle-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='8' viewBox='0 0 300 8'%3E%3Cpath d='M0 8H300V2.35L297.5 1.83L295 2.16L292.5 2.63L290 3.48L287.5 3.88L285 3.08L282.5 3.54L280 3.6L277.5 3.26L275 2.89L272.5 2.78L270 3.37L267.5 3.57L265 3.03L262.5 4.43L260 4.74L257.5 4.48L255 4.89L252.5 3.41L250 3.46L247.5 3.1L245 1.93L242.5 2.94L240 2.42L237.5 2.98L235 3.15L232.5 3.07L230 2.38L227.5 2.68L225 2.98L222.5 1.41L220 2.19L217.5 1.07L215 0.4L212.5 1.61L210 2.02L207.5 2.55L205 2.33L202.5 2.92L200 2.47L197.5 3.21L195 2.42L192.5 2.97L190 1.45L187.5 2.14L185 1.93L182.5 3.72L180 2.96L177.5 4.34L175 3.81L172.5 4.2L170 4.65L167.5 4.51L165 3.88L162.5 3.04L160 2.5L157.5 3.75L155 3.23L152.5 3.7L150 3.77L147.5 3.43L145 3.15L142.5 3.93L140 3.12L137.5 2.74L135 1.79L132.5 2.6L130 2.21L127.5 2.07L125 2.43L122.5 2.82L120 3.08L117.5 1.69L115 2.62L112.5 1.37L110 0.84L107.5 0.75L105 1.12L102.5 1.41L100 1.4L97.5 2.53L95 2.3L92.5 3.51L90 2.61L87.5 2.51L85 2.5L82.5 3.09L80 2.58L77.5 2.71L75 2.78L72.5 4.51L70 4.09L67.5 5.08L65 4.87L62.5 3.7L60 3.9L57.5 2.81L55 3.42L52.5 3.62L50 3.43L47.5 3.71L45 2.48L42.5 2.89L40 4.16L37.5 2.69L35 3.63L32.5 3.07L30 2.39L27.5 1.75L25 1.91L22.5 1.12L20 1.22L17.5 1.15L15 2.04L12.5 2.33L10 2.49L7.5 2.66L5 1.42L2.5 1.9L0 2.35Z' fill='%23000'/%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(--grain),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}
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:var(--display-track)}
h1{font-size:calc(var(--fs-5) * var(--display-k))}
h2{font-size:calc(var(--fs-4) * var(--display-k))}
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(--grain),var(--stock-2)}
.plate.deep::before,.plate.deep::after{content:"";position:absolute;z-index:1;left:0;right:0;height:8px;background:inherit;pointer-events:none;
  -webkit-mask:var(--deckle-top) 0 0/300px 8px repeat-x;mask:var(--deckle-top) 0 0/300px 8px repeat-x}
.plate.deep::before{top:-7px}
.plate.deep::after{bottom:-7px;-webkit-mask-image:var(--deckle-bottom);mask-image:var(--deckle-bottom)}
.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")}
/* a night band lies on the paper with a soft, low shadow above and below (owner: no wavy edges) */
.plate.night{box-shadow:0 -8px 22px -10px rgba(28,18,8,.3),0 8px 22px -10px rgba(28,18,8,.3)}
.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 blue with cream letters: a third label beside Play now's scarlet and the cream one (owner) */
.btn.night{--bg:linear-gradient(180deg,#1b3c5a,#10263a);--hover:linear-gradient(180deg,#10263a,#0b1b2a);--fg:var(--stock-hi);--rule:rgba(243,234,211,.45)}
.btn.night:hover{color:var(--stock-hi)}
.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 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);letter-spacing:var(--display-track)}
.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:176px;align-self:center;transition:opacity .2s} /* centred in the bar (owner) */
.head-mark img{width:176px;height:auto}
/* the one-line wordmark in ink on paper; in cream while the header sits on a night band */
.head-mark .wm-cream{display:none}
.site-head.on-night:not(.solid) .head-mark .wm-ink{display:none}
.site-head.on-night:not(.solid) .head-mark .wm-cream{display:block}
.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:var(--grain),color-mix(in srgb,var(--stock) 94%,transparent);filter:drop-shadow(0 3px 4px rgba(40,24,10,.16))}
/* its bottom edge deckled like a sheet of handmade paper (owner): a strip of the same paper below the bar */
.site-head.solid::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px;margin-top:-1px;background:inherit;pointer-events:none;
  -webkit-mask:var(--deckle-bottom) 0 0/300px 8px repeat-x;mask:var(--deckle-bottom) 0 0/300px 8px repeat-x}
/* 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(--grain),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);letter-spacing:var(--display-track)}
.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(--grain),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:1220px){ /* the five site links and both buttons need about 1220 px on one line */
  .head-nav,.head-actions .light{display:none}
  .menu-btn{display:inline-flex}
  .head-actions{margin-left:auto}
}
@media (max-width:520px){
  :root{--head-h:67px}
  .head-mark{width:142px}
  .head-mark img{width:142px}
  .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, the battle print, its surf, the copy, the stacked wordmark (img/brand,
   scripts/brand.js). site.js moves each layer at its own fraction of the scroll and flies the wordmark into the
   header. --flag-w is the wordmark's width, --flag-h its height (the drawing's own proportion). */
.masthead{--flag-w:clamp(190px, min(27vw, 31svh), 400px);--flag-h:calc(var(--flag-w) * .984);--print-w:max(100vw, 1100px);--print-top:calc(var(--head-h) + var(--flag-h) - 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-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{margin:0}
.mh-flag img{width:100%;height:auto}
.mh-copy{position:absolute;z-index:5;left:0;right:0;top:calc(var(--head-h) + 1svh + var(--flag-h));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;letter-spacing:var(--display-track)}
.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:.9em auto 0;font-family:var(--fell);font-style:italic;font-size:var(--fs-1);line-height:1.35;color:var(--ink);max-width:none} /* a line, not fine print (owner) */
@media (max-width:700px){
  .masthead{--flag-w:min(48vw,260px);--print-w:200vw;--print-top:calc(var(--head-h) + var(--flag-h) + 320px)}
  .mh-flag{top:calc(var(--head-h) + 4px)}
  .mh-copy{top:calc(var(--head-h) + var(--flag-h) + 2px)}
  .mh-hook{font-size:clamp(2.3rem,10.5vw,3rem);line-height:.98}
  .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(--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(--rating)}
.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(--grain),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{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--scarlet)}
/* what signing on means, under the button: small print, the privacy notice a link */
.consent{margin:10px 0 0;font-size:.82rem;line-height:1.45;color:var(--ink-2)}
.consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.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(--grain),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 captains' list pop-up (site.js): the broadside's frame, centred; a bottom sheet on a phone ---------- */
.join-pop{padding:0;border:0;background:transparent;color:var(--ink);width:calc(100% - 32px);max-width:520px;max-height:calc(100dvh - 32px);overflow:visible}
.join-pop::backdrop{background:rgba(11,20,30,.62)}
.join-pop[open]{animation:jp-in .3s ease-out}
.jp-card{position:relative;max-height:calc(100dvh - 52px);overflow:auto;background:var(--grain),var(--stock-hi);padding:clamp(26px,4vw,40px) clamp(22px,4vw,40px) 26px;text-align:center;
  border:2px solid var(--ink);box-shadow:0 0 0 7px var(--stock-hi), 0 0 0 9px var(--ink), 0 26px 60px rgba(0,0,0,.45);margin:9px;outline:none}
.jp-art{display:block;width:clamp(150px,22vh,200px);height:auto;margin:-10px auto 4px;
  -webkit-mask-image:radial-gradient(closest-side,#000 64%,transparent);mask-image:radial-gradient(closest-side,#000 64%,transparent)} /* its own parchment fades into the card */
.jp-card h2{font:400 clamp(2rem,4.4vw,2.7rem)/1 var(--display);color:var(--scarlet);margin:0;letter-spacing:var(--display-track)}
.jp-lede{font:italic 400 1.05rem/1.4 var(--fell);color:var(--ink-2);margin:.5em auto 0;max-width:30em}
.jp-gets{list-style:none;margin:16px 0 18px;padding:14px 0 0;border-top:3px double var(--ink);display:grid;gap:9px;text-align:left}
.jp-gets li{display:flex;gap:10px;align-items:flex-start;margin:0;line-height:1.4}
.jp-gets .ico{width:1.25em;height:1.25em;margin-top:.1em;color:var(--scarlet)}
.jp-form{text-align:left}
.jp-free{font-size:.86rem;color:var(--ink-3);margin:12px 0 0}
.jp-form .btn{white-space:nowrap}
.jp-card .actions{justify-content:center;margin-top:18px}
.jp-x{position:absolute;top:6px;right:8px;width:40px;height:40px;border:0;background:none;font:400 30px/1 Georgia,serif;color:var(--ink-2);cursor:pointer;border-radius:50%}
.jp-x:hover{color:var(--scarlet)}
.jp-x:focus-visible{outline:2px solid var(--scarlet);outline-offset:2px}
@keyframes jp-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
@keyframes jp-up{from{transform:translateY(100%)}}
@media (max-width:640px){
  .join-pop{margin:auto 0 0;width:100%;max-width:100%;max-height:88dvh}
  .join-pop::backdrop{background:rgba(11,20,30,.4)}
  .join-pop[open]{animation:jp-up .32s ease-out}
  .jp-card{margin:0;max-height:88dvh;border-width:2px 0 0;border-radius:14px 14px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.35);text-align:left;
    padding:20px 16px calc(18px + env(safe-area-inset-bottom))}
  .jp-art{display:none}
  .jp-card h2{font-size:1.55rem;padding-right:36px}
  .jp-card>.jp-lede{display:none}
  .jp-gets{margin:8px 0 10px;padding-top:8px;gap:4px;font-size:.9rem;line-height:1.3}
  .jp-gets .ico{width:1.1em;height:1.1em}
  .jp-form .inline-signup{flex-wrap:nowrap;gap:8px}
  .jp-form .inline-signup input{flex:1 1 auto;min-width:0}
  .jp-form .btn{padding-left:14px;padding-right:14px}
  .jp-card .consent,.jp-free{font-size:.74rem;line-height:1.35;margin-top:6px}
  .jp-card{padding-top:14px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .jp-form .inline-signup input,.jp-form .btn{min-height:44px;padding-top:6px;padding-bottom:6px}
  .jp-card .actions{justify-content:flex-start}
}
@media (max-width:640px) and (max-height:760px){ .jp-gets li+li{display:none} }
@media (prefers-reduced-motion:reduce){ .join-pop[open]{animation:none} }

/* ---------- the recruiting bill (home and captains): an eighteenth-century broadside, set in type ---------- */
.bill-poster{background:var(--grain),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(2.9rem,6vw,4.9rem);line-height:.9;margin:.06em auto .04em;color:var(--scarlet);text-align:center;max-width:none;width:100%} /* smaller, centred (owner) */
.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(--numeral);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;letter-spacing:var(--display-track)}
.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;letter-spacing:var(--display-track)}
.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;letter-spacing:var(--display-track)}
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;box-shadow:0 -8px 22px -10px rgba(28,18,8,.3)}
.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:170px;margin:0 0 18px -4px}
.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;letter-spacing:var(--display-track)}
.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}
/* the six ships are decoration (hidden from screen readers); the social links beside them are not, so they sit outside */
.foot-row{display:flex;gap:14px 18px;margin:clamp(48px,6vw,80px) 0 26px;flex-wrap:wrap;align-items:flex-end}
.foot-fleets{display:flex;gap:10px;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}
/* the Shipwright's Creed, short: a strip in every footer, a band on the home page */
.foot-creed{text-wrap:balance;margin:clamp(28px,4vw,44px) 0 0;padding:18px 0 0;border-top:1px solid rgba(243,234,211,.16);max-width:none;text-align:center;font:italic 400 1.05rem/1.6 var(--fell);color:#c9cfcc}
.foot-creed b{font:400 1.2rem/1 var(--display);font-style:normal;color:var(--stock-hi);margin-right:.25em;letter-spacing:var(--display-track)}
.foot-creed a{color:var(--gold);white-space:nowrap;margin-left:.3em}
.creed-band{text-align:center}
/* the wax seal above the title (owner), a render of the double-S seal */
.creed-band .creed-seal{display:block;width:clamp(96px,9vw,124px);height:auto;margin:0 auto 6px;filter:drop-shadow(0 3px 4px rgba(40,10,6,.3))}
.creed-band h2{margin:0 0 .6em;font-size:clamp(2rem,4.6vw,3rem)}
.creed-short{list-style:none;margin:0 auto 1.6em;padding:0;display:grid;justify-items:center;gap:.35em;font:400 clamp(1.45rem,3vw,1.85rem)/1.2 var(--display);color:var(--ink);letter-spacing:var(--display-track)}
.creed-short li{margin:0}
.creed-short li+li::before{content:"";display:block;width:.36em;height:.36em;margin:0 auto .5em;background:var(--scarlet);transform:rotate(45deg)}
.creed-band .actions{justify-content:center}
.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} .foot-social{margin-left:0} }

/* ---------- 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,.site-foot form{display:none!important}
  :root{--grain: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(--numeral);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(--grain),linear-gradient(to bottom, rgba(255,250,235,.7), rgba(233,220,192,.0) 45%) var(--stock-hi);
  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);letter-spacing:var(--display-track)}
.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(--numeral);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}