/* ==================================================================
   Era of Sails — shared game chrome
   ================================================================== */

:root{
  --abyss:#060c11;
  --chart:#c9b486;
  --chart-deep:#b5a077;
  --vellum:#efe1c0;
  --vellum-edge:#d8c49a;
  --ink:#2a1f16;
  --ink-soft:rgba(42,31,22,.66);
  --ink-faint:rgba(42,31,22,.42);
  --brass:#b8862b;
  --brass-lift:#dcae52;
  --oxblood:#7a211c;
  --moss:#4a6846;
  --rule:rgba(42,31,22,.22);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;color:var(--ink);
  font-family:"IM Fell English",Georgia,serif;font-size:17px;
  background:var(--abyss);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button{font:inherit;color:inherit}

/* ---------- HUD ---------- */
.hud{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,#1a2a33,#101c23);
  border-bottom:1px solid rgba(184,134,43,.34);
  box-shadow:0 6px 22px rgba(6,12,17,.5);
}
/* Everything in here has to fit 1560px on one line or the bar silently
   becomes two and the whole page drops. It sat about 30px over once the
   nav gained a sixth group, so the gaps carry the slack rather than
   anything being taken out of the bar. */
.hud-inner{
  max-width:1560px;margin:0 auto;
  display:flex;align-items:center;gap:clamp(.7rem,1.1vw,1.15rem);flex-wrap:wrap;
  padding:.7rem clamp(1rem,3vw,2rem);
}
.hud-brand{
  display:flex;align-items:center;gap:.6rem;
  font-family:Cinzel,serif;font-weight:700;font-size:.78rem;
  letter-spacing:.3em;text-transform:uppercase;color:#e8d8b0;
}
.hud-brand svg{width:20px;height:20px;stroke:var(--brass-lift);fill:none;stroke-width:1.5}
.hud-brand picture{display:block;line-height:0}
.hud-brand img{height:34px;width:auto;display:block}
@media(max-width:720px){
  .hud-brand img{height:26px}}

.hud-nav{display:flex;gap:.3rem;flex-wrap:wrap;margin-right:auto;list-style:none}
.hud-nav a,.hud-nav span{
  display:block;padding:.42rem .6rem;text-decoration:none;
  font-family:Cinzel,serif;font-size:.6rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(232,216,176,.62);
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.hud-nav a:hover,.hud-nav a:focus-visible{color:#f2e6c6;border-bottom-color:var(--brass)}
.hud-nav .on{color:#f2e6c6;border-bottom-color:var(--brass)}
.hud-nav .soon{color:rgba(232,216,176,.26);cursor:default}
.hud-nav .soon::after{content:"·";margin-left:.4rem;color:var(--brass);opacity:.5}

.purse{display:flex;gap:.55rem;align-items:center}
.coin{
  display:flex;align-items:center;gap:.45rem;
  padding:.34rem .7rem;
  background:rgba(232,216,176,.07);
  border:1px solid rgba(184,134,43,.3);
  font-family:Cinzel,serif;font-size:.82rem;color:#f0e2bd;letter-spacing:.03em;
}
.coin i{width:20px;height:20px;display:block;flex:none;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.coin.gold i{background-image:url("img/coin-gold.png")}
.coin.crow i{background-image:url("img/coin-crow.png")}
.coin b{font-weight:400}
.coin small{font-family:"IM Fell English",serif;font-size:.72rem;color:rgba(240,226,189,.5);font-style:italic}

.hud-you{display:flex;align-items:center;gap:.75rem}
.hud-you a{
  font-family:Cinzel,serif;font-size:.6rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(232,216,176,.62);text-decoration:none;
}
.hud-you a:hover{color:#f2e6c6}

/* ---------- the scene ---------- */
/* ---------- page body ---------- */
.deck{max-width:1560px;margin:0 auto;padding:clamp(1.4rem,3vw,2.4rem) clamp(1rem,3vw,2rem) 4rem}
.parchment{
  position:relative;
  background:
    radial-gradient(70% 55% at 26% 18%,rgba(255,250,232,.7),transparent 70%),
    linear-gradient(160deg,var(--vellum),var(--vellum-edge));
  box-shadow:0 18px 44px -18px rgba(6,12,17,.7);
  padding:clamp(1.3rem,2.4vw,2rem);
}
.parchment::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--grain);opacity:.075;mix-blend-mode:multiply;
}

.eyebrow{
  font-family:Cinzel,serif;font-size:.6rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:#8a6420;
}
h1{font-family:Cinzel,serif;font-weight:700;letter-spacing:.05em;line-height:1;
   font-size:clamp(1.9rem,4vw,2.8rem);margin:.5rem 0}
h2{font-family:Cinzel,serif;font-weight:600;font-size:.68rem;letter-spacing:.26em;
   text-transform:uppercase;color:#8a6420;margin-bottom:.9rem}
.lede{font-style:italic;color:var(--ink-soft);max-width:58ch;line-height:1.6}

.columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);
         gap:clamp(1rem,2vw,1.6rem);align-items:start;margin-top:1.6rem}
@media(max-width:900px){.columns{grid-template-columns:1fr}}

.bar{height:4px;background:rgba(42,31,22,.16);overflow:hidden}
.bar i{display:block;height:100%;background:var(--brass);transition:width 1s linear}

.roster{list-style:none}
.roster li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
           padding:.62rem 0;border-bottom:1px solid var(--rule);font-size:.95rem}
.roster li:last-child{border-bottom:0}
.roster .who{display:flex;align-items:center;gap:.5rem}
.roster .dot{width:6px;height:6px;border-radius:50%;background:var(--moss);flex:none}
.roster .where{font-style:italic;color:var(--ink-soft);font-size:.88rem}
.empty{font-style:italic;color:var(--ink-soft)}

/* ---------- notices ---------- */
.notice{
  display:flex;gap:.65rem;align-items:flex-start;
  padding:.85rem 1rem;margin-bottom:1.4rem;
  font-size:1rem;line-height:1.45;color:#2a1f16;
  background:linear-gradient(160deg,#f6e7c6,#e2cfa4);
  border:1px solid rgba(60,42,16,.4);
  border-left:4px solid var(--oxblood);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.7);
  animation:rise .4s cubic-bezier(.16,1,.3,1) both;
}
.notice::before{
  content:"!";flex:none;display:grid;place-items:center;
  width:20px;height:20px;margin-top:.05rem;border-radius:50%;
  background:var(--oxblood);color:#f6e7c6;
  font-family:Cinzel,serif;font-size:.72rem;font-weight:700;line-height:1;
}
.notice.success{
  background:linear-gradient(160deg,#e9f0dc,#cfe0bc);
  border-left-color:#3f6b34;
}
.notice.success::before{content:"\2713";background:#3f6b34}

/* ---------- build panel ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(6,12,17,.72);
       display:flex;align-items:center;justify-content:center;padding:1.2rem;
       animation:fade .25s ease both}
.scrim[hidden]{display:none}
.panel{width:min(560px,100%);max-height:86vh;overflow-y:auto;
       animation:rise .4s cubic-bezier(.16,1,.3,1) both}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
            padding-bottom:.9rem;border-bottom:1px solid var(--rule);margin-bottom:1.1rem}
.panel-head h3{font-family:Cinzel,serif;font-weight:600;font-size:1.05rem;letter-spacing:.14em;
               text-transform:uppercase}
.panel-head p{font-style:italic;color:var(--ink-soft);font-size:.92rem;margin-top:.3rem}
.shut{background:none;border:0;cursor:pointer;font-size:1.3rem;line-height:1;color:var(--ink-soft);padding:.2rem .4rem}
.shut:hover{color:var(--ink)}

.offer{display:grid;grid-template-columns:1fr auto;gap:.9rem;align-items:center;
       padding:.95rem 0;border-bottom:1px solid var(--rule)}
.offer:last-of-type{border-bottom:0}
.offer h4{font-family:Cinzel,serif;font-weight:600;font-size:.88rem;letter-spacing:.06em}
.offer p{font-size:.9rem;color:var(--ink-soft);line-height:1.45;margin-top:.25rem;max-width:44ch}
.offer .meta{font-family:Cinzel,serif;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
             color:#8a6420;margin-top:.45rem;display:flex;gap:.9rem;flex-wrap:wrap}
.offer .meta .no{color:var(--oxblood)}
/* Running the guns out. One row per kind held ashore, so the choice is the
   list rather than a dropdown that hides what is actually available. */
.gunrow{display:grid;grid-template-columns:1fr 72px auto;gap:.5rem;align-items:center;margin-top:.4rem}
.gunname{font-family:Cinzel,serif;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.3}
.gunname em{display:block;font-family:"IM Fell English",Georgia,serif;font-size:.78rem;
  letter-spacing:0;text-transform:none;font-style:italic;color:var(--ink-faint)}
.gunrow input[type=number]{width:100%;padding:.34rem .4rem;text-align:center;
  background:rgba(255,250,232,.6);border:1px solid var(--rule);color:var(--ink);
  font-family:Cinzel,serif;font-size:.8rem}
.gunrow input[type=number]:focus{outline:none;border-color:var(--brass)}
.gunrow button[disabled],.gunrow input[disabled]{opacity:.45;cursor:not-allowed}
.hullact-note.bad{color:var(--oxblood)}
/* Said once at the top of the fleet, to a captain holding guns and flying
   none of them. Anything more insistent would nag the captains who have
   already armed. */
.gunhint{
  margin:.2rem 0 1rem;padding:.55rem .8rem;
  background:rgba(184,134,43,.12);border-left:3px solid var(--brass);
  font-size:.9rem;line-height:1.5;color:var(--ink-soft);
}
.gunhint b{color:var(--ink);font-weight:400;font-family:Cinzel,serif;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:560px){.gunrow{grid-template-columns:1fr 64px auto}}
/* A recipe carries a picture of what it makes, so a column of thirty reads by
   shape before it reads by name. Only the rows that have one get the extra
   column — the port's offers use .offer too and have no icon. */
.offer.has-ico{grid-template-columns:auto 1fr auto}
.offer-ico{
  width:44px;height:44px;display:grid;place-items:center;align-self:start;
  color:#8a6420;background:rgba(42,31,22,.05);border:1px solid var(--rule);
}
.offer-ico svg{width:26px;height:26px}
.offer-ico img{width:100%;height:100%;object-fit:cover;display:block}
/* A family of goods within one building. Foldable, because a workshop with
   five of them and thirty recipes is a scroll rather than a list. */
.famgroup{margin:1.1rem 0 .2rem;border-top:1px solid var(--rule)}
.famgroup:first-of-type{margin-top:.2rem;border-top:0}
.famgroup > summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  cursor:pointer;padding:.6rem 0 .4rem;list-style:none;
}
.famgroup > summary::-webkit-details-marker{display:none}
.famname{
  font-family:Cinzel,serif;font-size:.6rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#8a6420;
}
/* a fold-arrow that says which way it will go */
.famname::before{
  content:"";display:inline-block;width:0;height:0;margin-right:.5rem;
  border:4px solid transparent;border-left-color:#8a6420;
  transform:translateY(-1px);transition:transform .15s;
}
.famgroup[open] > summary .famname::before{transform:rotate(90deg) translateX(-1px)}
.famgroup > summary:hover .famname{color:var(--ink)}
.famcount{
  font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* While a search is running the tabs step aside and every building is on
   screen at once, so each block needs its own name over it. */
.subpanel.searching > .parchment > .fleethead{position:sticky;top:0;z-index:1}
body.ref-searching .subpanel[hidden]{display:none}
@media(max-width:560px){
  .offer.has-ico{grid-template-columns:auto 1fr}
  .offer.has-ico .runform{grid-column:1 / -1;justify-self:start}
  .offer-ico{width:36px;height:36px}
  .offer-ico svg{width:22px;height:22px}
}

.raise{padding:.55rem 1rem;border:1px solid var(--brass);background:rgba(184,134,43,.12);
       font-family:Cinzel,serif;font-size:.58rem;font-weight:600;letter-spacing:.2em;
       text-transform:uppercase;cursor:pointer;transition:background .2s,transform .15s;white-space:nowrap}
.raise:hover:not(:disabled){background:rgba(184,134,43,.26)}
.raise:active:not(:disabled){transform:scale(.97)}
.raise:disabled{opacity:.38;cursor:not-allowed;border-style:dashed}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;
                       transition-duration:.001s!important}
}

/* ==================================================================
   Port scene — the painting, graded for time of day
   ================================================================== */

/* The stage keeps its own shape rather than taking it from whichever image a
   port happens to use. Without this, a squarer backdrop makes the header
   several screens tall while a wide one is a letterbox — every port now
   renders identically whatever the artwork's dimensions. */
.stage{
  position:relative;width:100%;overflow:hidden;background:#0b1017;
  aspect-ratio:24/10;
  max-height:min(56vh,520px);
  border-bottom:1px solid rgba(184,134,43,.25);
}
.stage picture{position:absolute;inset:0;display:block}

/* a phone wants a shallower stage, and this must come after the base rule
   or the two media queries cancel each other out */
@media(max-width:720px){
  .stage{aspect-ratio:16/10;max-height:min(42vh,320px)}
}
.stage picture,.stage .backdrop{display:block;width:100%}
.stage .backdrop{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 62%;   /* favour the quay over the sky */
  filter:brightness(var(--sc-bright,1)) saturate(var(--sc-sat,1)) contrast(var(--sc-con,1));
  transition:filter 1.2s ease;
}

.stage > span,.stage > svg{position:absolute;pointer-events:none}
.grade{inset:0;display:block;transition:opacity 1.2s ease}
.base-fade{inset:auto 0 0 0;height:22%;display:block;
  background:linear-gradient(180deg,transparent,rgba(6,12,17,.5))}

.scene-clock{
  position:absolute;z-index:6;right:clamp(1rem,3vw,2rem);top:1rem;
  display:flex;align-items:center;gap:.5rem;padding:.34rem .8rem;
  background:rgba(10,18,24,.5);border:1px solid rgba(184,134,43,.3);
  backdrop-filter:blur(3px);
  font-family:Cinzel,serif;font-size:.56rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(240,226,189,.82);
}
.scene-clock i{width:7px;height:7px;border-radius:50%;background:var(--brass-lift);display:block}

/* ==================================================================
   Ship dossier & tech tree
   ================================================================== */

.dossier{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr);
         gap:clamp(1rem,2.4vw,2rem);align-items:center;margin-top:1.4rem}
@media(max-width:820px){.dossier{grid-template-columns:1fr}}
.portrait{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:300px;padding:1rem;
  background:
    radial-gradient(62% 58% at 50% 46%,rgba(255,248,228,.5),transparent 72%),
    linear-gradient(160deg,#d9c69c,#bfa87a);
  overflow:hidden}
.portrait::before{content:"";position:absolute;inset:0;background:var(--grain);
  opacity:.1;mix-blend-mode:multiply;pointer-events:none}
.portrait::after{content:"";position:absolute;inset:10px;border:1px solid rgba(42,31,22,.2);
  pointer-events:none}
.portrait img{position:relative;z-index:1;max-width:100%;max-height:420px;height:auto;display:block;
  filter:drop-shadow(0 16px 26px rgba(42,31,22,.42));
  animation:heave 9s ease-in-out infinite;transform-origin:50% 90%}
@keyframes heave{0%,100%{transform:translateY(0) rotate(-.5deg)}
                 50%{transform:translateY(-9px) rotate(.6deg)}}
.portrait .waterline{position:absolute;left:0;right:0;bottom:0;height:30%;z-index:0;
  background:linear-gradient(180deg,transparent,rgba(52,74,86,.42));
  pointer-events:none}

.specs{list-style:none}
.specs li{display:grid;grid-template-columns:6.6rem 1fr auto;gap:.8rem;align-items:center;
          padding:.62rem 0;border-bottom:1px solid var(--rule)}
.specs dt,.specs .k{font-family:Cinzel,serif;font-size:.56rem;letter-spacing:.22em;
                    text-transform:uppercase;color:#8a6420}
.specs .v{font-family:Cinzel,serif;font-size:.95rem;text-align:right}
.specs .g{height:3px;background:rgba(42,31,22,.15);overflow:hidden}
.specs .g i{display:block;height:100%;background:var(--brass)}

.scroll-note{font-style:italic;color:var(--ink-soft);line-height:1.6;
  border-left:2px solid var(--brass);padding-left:.9rem;margin-top:1.2rem;max-width:62ch}

/* ==================================================================
   Port page — title plate and content cards
   ================================================================== */

body.port-page{
  background:
    radial-gradient(60% 44% at 22% 8%,rgba(214,192,150,.3),transparent 68%),
    linear-gradient(158deg,#0c1720,#12242e 44%,#0a1219);
}

.portbar{
  position:relative;z-index:10;margin-top:-46px;
  padding:0 clamp(1rem,3vw,2rem);
}
/* on short viewports the scene compresses, so stop overlapping altogether */
@media(max-width:820px){
  .portbar{margin-top:0}
  .portbar-in{gap:.9rem}
  .tallies{width:100%}
  .tally{min-width:0;flex:1 1 30%;padding:.5rem .5rem}
  .tally b{font-size:.9rem}
  .tally span{font-size:.44rem;letter-spacing:.1em}
}
.portbar-in{
  max-width:1560px;margin:0 auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding:1.1rem clamp(1.1rem,2.4vw,1.9rem);
  background:linear-gradient(160deg,var(--vellum),var(--vellum-edge));
  box-shadow:0 20px 46px -20px rgba(6,12,17,.85);
  position:relative;
}
.portbar-in::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--grain);opacity:.075;mix-blend-mode:multiply}
.portbar h1{margin:.25rem 0 0;font-size:clamp(1.7rem,3.4vw,2.5rem)}
.portbar .lede{margin-top:.4rem;font-size:.98rem;max-width:52ch}

/* Five tallies at 92px each is 460px, which is wider than a phone — and a
   non-wrapping flex row does not shrink, it pushes the page out. They wrap
   now, and shrink on a narrow screen rather than overflowing. */
.tallies{display:flex;flex-wrap:wrap;gap:1px;border:1px solid var(--rule);background:var(--rule);
  max-width:100%}
.tally{background:rgba(255,250,232,.5);padding:.6rem 1.1rem;text-align:center;
  min-width:92px;flex:1 1 auto}
.tally span{display:block;overflow:hidden;text-overflow:ellipsis}
.tally b{display:block;font-family:Cinzel,serif;font-size:1.35rem;font-weight:400;line-height:1.1}
.tally span{font-family:Cinzel,serif;font-size:.52rem;letter-spacing:.2em;
            text-transform:uppercase;color:#8a6420}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:.85rem}
.card{
  display:grid;grid-template-columns:44px 1fr;gap:.9rem;align-items:start;
  padding:1rem;text-align:left;cursor:pointer;
  background:rgba(255,250,232,.42);
  border:1px solid var(--rule);
  transition:background .2s,border-color .2s,transform .2s;
}
.card:hover{background:rgba(255,250,232,.8);border-color:var(--brass);transform:translateY(-2px)}
.card:focus-visible{outline:2px solid var(--brass);outline-offset:-3px}
.card.static{cursor:default}
.card.static:hover{transform:none;border-color:var(--rule);background:rgba(255,250,232,.42)}
.card.empty{background:repeating-linear-gradient(135deg,
  rgba(255,250,232,.28) 0 10px,rgba(216,196,154,.24) 10px 20px);border-style:dashed}

.card-ico{width:44px;height:44px;display:grid;place-items:center;color:#8a6420;
  border:1px solid rgba(184,134,43,.4);background:rgba(184,134,43,.07)}
.card-ico svg{width:24px;height:24px}
.card.empty .card-ico{color:var(--ink-faint);border-style:dashed;border-color:var(--rule);background:none}

.card-body{min-width:0}
.card .no{display:block;font-family:Cinzel,serif;font-size:.52rem;letter-spacing:.22em;
          text-transform:uppercase;color:var(--ink-faint)}
.card .nm{display:block;font-family:Cinzel,serif;font-size:.95rem;font-weight:600;
          letter-spacing:.03em;margin:.18rem 0 .3rem;line-height:1.25}
.card.empty .nm{color:var(--ink-faint);font-weight:400}
.card .st{display:block;font-size:.9rem;font-style:italic;color:var(--ink-soft);line-height:1.35}
.card .bar{margin-top:.5rem}

.panel-stack{display:grid;gap:1rem}
.mini{font-family:Cinzel,serif;font-size:.52rem;letter-spacing:.22em;
      text-transform:uppercase;color:#8a6420}
.factlist{list-style:none;margin-top:.2rem}
.factlist li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
             padding:.5rem 0;border-bottom:1px solid var(--rule);font-size:.95rem}
.factlist li:last-child{border-bottom:0}
.factlist .k{font-family:Cinzel,serif;font-size:.54rem;letter-spacing:.2em;
             text-transform:uppercase;color:#8a6420}

section + section{margin-top:1.8rem}

/* ==================================================================
   Ship tree — branches down, tiers across
   ================================================================== */

.tree-wrap{overflow-x:auto;padding-bottom:.6rem;margin-top:1.2rem}
.tree-grid{
  display:grid;
  grid-template-columns:minmax(190px,210px) repeat(var(--tiers,6),minmax(146px,1fr));
  gap:.55rem;
  min-width:1080px;
  align-items:stretch;
}
.tree-corner{display:block}
.tier-head{
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:.4rem;
  font-family:Cinzel,serif;font-size:.54rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:#8a6420;
  border-bottom:1px solid var(--rule);
}

.branch-head{
  display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;
  column-gap:.65rem;align-content:center;padding:.7rem .8rem .7rem 0;
  border-right:1px solid var(--rule);
}
.bh-ico{grid-row:1 / span 2;align-self:center;color:#8a6420;opacity:.8}
.bh-ico svg{width:38px;height:30px;display:block}
.bh-name{font-family:Cinzel,serif;font-size:.86rem;font-weight:600;letter-spacing:.05em}
.bh-note{font-size:.82rem;font-style:italic;color:var(--ink-soft);line-height:1.35;margin-top:.15rem}

.node{
  position:relative;display:flex;flex-direction:column;gap:.22rem;
  padding:.7rem .75rem;text-decoration:none;color:var(--ink);
  background:rgba(255,250,232,.4);
  border:1px solid var(--rule);
  transition:background .18s,border-color .18s,transform .18s;
}
.node:hover{background:rgba(255,250,232,.85);border-color:var(--brass);transform:translateY(-2px)}
.node.picked{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass) inset;
             background:rgba(255,250,232,.9)}
.node.locked{opacity:.5}
.node.owned{background:rgba(184,134,43,.16);border-color:rgba(184,134,43,.55)}
.node.flag{background:linear-gradient(160deg,rgba(246,233,200,.95),rgba(220,195,140,.95));
           border-color:var(--brass)}
.node.blank{background:none;border:0}

.node-nm{font-family:Cinzel,serif;font-size:.78rem;font-weight:600;letter-spacing:.02em;line-height:1.25}
.node-stat{font-size:.8rem;color:var(--ink-soft);font-style:italic}
.node-foot{font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.14em;
           text-transform:uppercase;color:#8a6420;margin-top:.15rem;line-height:1.4}
.node.locked .node-foot{color:var(--oxblood)}
.node.owned .node-foot{color:#5c3f10}

/* rope link to the next tier */
.node.linked::after{
  content:"";position:absolute;top:50%;right:-.55rem;width:.55rem;height:0;
  border-top:1px dashed var(--brass);opacity:.7;
}

/* ---------- dossier extras ---------- */
.portrait.sketch{color:#6b563a}
.portrait.sketch svg{width:min(320px,80%);height:auto;position:relative;z-index:1;opacity:.5}
.sketch-note{position:absolute;bottom:1.1rem;left:0;right:0;text-align:center;z-index:2;
  font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-faint)}

.costline{font-family:Cinzel,serif;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  color:#8a6420;margin-top:1rem;display:flex;gap:1.1rem;flex-wrap:wrap}

.laykeel{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--rule)}
.laykeel label{display:block;font-family:Cinzel,serif;font-size:.54rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:#8a6420;margin-bottom:.5rem}
.laykeel-row{display:flex;gap:.6rem;flex-wrap:wrap}
.laykeel input{
  flex:1 1 200px;min-width:0;background:transparent;border:0;
  border-bottom:1px solid rgba(42,31,22,.34);
  font-family:"IM Fell English",serif;font-size:1.02rem;color:var(--ink);
  padding:.4rem .1rem;outline:none;transition:border-color .2s;
}
.laykeel input:focus{border-bottom-color:var(--brass)}
.laykeel input::placeholder{color:rgba(42,31,22,.3);font-style:italic}

body.yard-page{
  background:
    radial-gradient(64% 48% at 26% 12%,rgba(214,192,150,.34),transparent 68%),
    linear-gradient(155deg,#0d1820,#132630 46%,#0b141b);
}

/* nation sections in the ship tree */
.nation-block{margin-top:1.6rem}
.nation-block:first-of-type{margin-top:1.2rem}
.nation-head{
  font-family:Cinzel,serif;font-size:.62rem;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:#8a6420;
  padding-bottom:.5rem;border-bottom:1px solid var(--rule);margin-bottom:.2rem;
}
/* a sparse tree shouldn't stretch one card across the whole page */
.tree-grid{min-width:0;width:100%}
.tree-grid[style*="--tiers:1"],
.tree-grid[style*="--tiers:2"],
.tree-grid[style*="--tiers:3"]{
  grid-template-columns:minmax(190px,210px) repeat(var(--tiers),minmax(146px,220px));
  justify-content:start;
}
@media(min-width:1100px){
  .tree-grid[style*="--tiers:4"],
  .tree-grid[style*="--tiers:5"],
  .tree-grid[style*="--tiers:6"]{min-width:1040px}
}

/* ==================================================================
   Sound toggle
   ================================================================== */
.sound{
  display:grid;place-items:center;width:30px;height:30px;
  background:rgba(232,216,176,.06);border:1px solid rgba(184,134,43,.3);
  color:rgba(232,216,176,.55);cursor:pointer;padding:0;
  transition:color .2s,border-color .2s,background .2s;
}
.sound:hover{color:#f2e6c6;border-color:var(--brass)}
.sound:focus-visible{outline:2px solid var(--brass-lift);outline-offset:2px}
.sound svg{width:17px;height:17px}
.sound .wave-1,.sound .wave-2{opacity:0;transition:opacity .3s}
.sound .muted-x{opacity:.9}
.sound.on{color:var(--brass-lift);border-color:var(--brass);background:rgba(184,134,43,.14)}
.sound.on .muted-x{opacity:0}
.sound.on .wave-1{opacity:1;animation:sndPulse 2.4s ease-in-out infinite}
.sound.on .wave-2{opacity:.75;animation:sndPulse 2.4s ease-in-out .35s infinite}
@keyframes sndPulse{
  0%,100%{opacity:.35}
  50%{opacity:1}
}

/* ==================================================================
   Industry — warehouse, goods, nodes, recipes
   ================================================================== */
.store{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--rule)}
.store-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.5rem}
.store-count{font-family:Cinzel,serif;font-size:.9rem;letter-spacing:.04em}
.hintline{font-size:.88rem;font-style:italic;color:var(--ink-soft);margin-top:.5rem}

.goods{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1px;
       background:var(--rule);border:1px solid var(--rule);margin-top:1.1rem}
.good{display:grid;grid-template-columns:28px 1fr auto;gap:.6rem;align-items:center;
      background:rgba(255,250,232,.45);padding:.6rem .75rem}
.good-ico{color:#8a6420}
.good-ico svg{width:22px;height:22px;display:block}
.good-n{font-size:.92rem;line-height:1.2;min-width:0}
.good-q{font-family:Cinzel,serif;font-size:.98rem}
.good.none{background:rgba(255,250,232,.16)}
.good.none .good-n,.good.none .good-q{color:var(--ink-faint)}
.good.none .good-ico{color:var(--ink-faint);opacity:.6}

.card.mine{border-color:rgba(184,134,43,.6);background:rgba(184,134,43,.12)}
.muted{color:var(--ink-faint)}

.row-actions{display:flex;gap:.45rem;margin-top:.6rem;flex-wrap:wrap}
.row-actions form{display:contents}
.raise.ghost{background:none;border-color:var(--rule);color:var(--ink-soft)}
.raise.ghost:hover:not(:disabled){background:rgba(42,31,22,.06);border-color:var(--ink-faint)}

.runform{display:flex;gap:.5rem;align-items:center}
.runform input[type=number]{
  width:58px;background:rgba(255,250,232,.5);border:1px solid var(--rule);
  font-family:Cinzel,serif;font-size:.9rem;color:var(--ink);
  padding:.5rem .4rem;text-align:center;
}
.runform input[type=number]:focus{outline:none;border-color:var(--brass)}

/* node upgrade cost + selling rows */
.upcost{display:block;margin-top:.5rem;font-size:.84rem;line-height:1.45;color:var(--ink-soft)}
.upcost b{font-family:Cinzel,serif;font-size:.52rem;letter-spacing:.18em;
          text-transform:uppercase;color:#8a6420;display:block;margin-bottom:.1rem}
.upcost em{display:block;font-style:italic;color:var(--oxblood);font-size:.82rem}

.goods.sellable{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.sellrow{display:grid;grid-template-columns:28px 1fr 62px auto;gap:.6rem;align-items:center;
         background:rgba(255,250,232,.45);padding:.6rem .75rem}
.sell-n{font-size:.92rem;line-height:1.25;min-width:0}
.sell-n em{display:block;font-style:italic;font-size:.8rem;color:var(--ink-soft)}
.sellrow input[type=number]{
  width:100%;background:rgba(255,250,232,.6);border:1px solid var(--rule);
  font-family:Cinzel,serif;font-size:.88rem;color:var(--ink);
  padding:.42rem .3rem;text-align:center;
}
.sellrow input[type=number]:focus{outline:none;border-color:var(--brass)}
.sellrow .raise{padding:.45rem .8rem}

/* cargo manifest */
.loadgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem}
.loadgrid label{display:block}
.loadgrid .mini{display:block;margin-bottom:.4rem}
.pick2{
  width:100%;background:rgba(255,250,232,.6);border:1px solid var(--rule);
  font-family:"IM Fell English",Georgia,serif;font-size:.96rem;color:var(--ink);
  padding:.5rem .45rem;
}
.pick2:focus{outline:none;border-color:var(--brass)}

.loadrow{display:grid;grid-template-columns:28px 1fr 74px;gap:.6rem;align-items:center;
         background:rgba(255,250,232,.45);padding:.6rem .75rem}
.loadqty{
  width:100%;background:rgba(255,250,232,.65);border:1px solid var(--rule);
  font-family:Cinzel,serif;font-size:.88rem;color:var(--ink);
  padding:.42rem .3rem;text-align:center;
}
.loadqty:focus{outline:none;border-color:var(--brass)}

.loadfoot{display:flex;justify-content:space-between;align-items:center;gap:1rem;
          flex-wrap:wrap;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--rule)}
.loadtotal{font-family:Cinzel,serif;font-size:.62rem;letter-spacing:.2em;
           text-transform:uppercase;color:#8a6420}
.loadtotal b{font-size:1rem;letter-spacing:.02em;color:var(--ink);font-weight:400}
.loadtotal.over b{color:var(--oxblood)}

/* ==================================================================
   Market
   ================================================================== */
.tradelist{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.traderow{
  display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;
  gap:.75rem;align-items:center;
  background:rgba(255,250,232,.45);padding:.6rem .8rem;
}
@media(max-width:860px){
  .traderow{grid-template-columns:28px minmax(0,1fr);row-gap:.6rem}
  .traderow .tradeact{grid-column:1 / -1;justify-content:flex-end}
}
.trade-n{font-size:.95rem;line-height:1.25;min-width:0}
.trade-n em{display:block;font-style:italic;font-size:.8rem;color:var(--ink-soft);margin-top:.1rem}

.tradeact{display:flex;align-items:center;gap:.5rem}
.tradeact input[type=number]{
  width:62px;background:rgba(255,250,232,.65);border:1px solid var(--rule);
  font-family:Cinzel,serif;font-size:.86rem;color:var(--ink);
  padding:.4rem .3rem;text-align:center;
}
.tradeact input[type=number]:focus{outline:none;border-color:var(--brass)}
.tradeact .raise{padding:.42rem .75rem}

.pricetag{
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.05;
  min-width:58px;padding:.28rem .5rem;
  border:1px solid var(--rule);background:rgba(255,250,232,.55);
}
.pricetag b{font-family:Cinzel,serif;font-size:.95rem;font-weight:400}
.pricetag small{font-family:Cinzel,serif;font-size:.46rem;letter-spacing:.2em;
                text-transform:uppercase;color:var(--ink-faint)}
.pricetag.good{border-color:rgba(74,104,70,.6);background:rgba(74,104,70,.12)}
.pricetag.good b{color:#38512f}
.pricetag.bad{border-color:rgba(122,33,28,.5);background:rgba(122,33,28,.09)}
.pricetag.bad b{color:var(--oxblood)}

/* ==================================================================
   Quest dialogue
   ================================================================== */
.quest{
  position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);
  gap:clamp(1rem,2vw,1.6rem);align-items:stretch;
  margin-bottom:1.4rem;padding:clamp(1.1rem,2vw,1.5rem);
  background:
    radial-gradient(70% 60% at 22% 16%,rgba(255,250,232,.65),transparent 70%),
    linear-gradient(160deg,var(--vellum),var(--vellum-edge));
  border-left:3px solid var(--brass);
  box-shadow:0 20px 46px -22px rgba(6,12,17,.8);
  animation:rise .45s cubic-bezier(.16,1,.3,1) both;
}
.quest::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--grain);opacity:.08;mix-blend-mode:multiply;
}
@media(max-width:720px){
  .quest{grid-template-columns:1fr}
  .quest-portrait{max-width:180px}
}

.quest-portrait{position:relative;align-self:start}
.quest-portrait img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 8px 18px rgba(42,31,22,.4))}

.quest-body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start}
.quest-who{
  font-family:Cinzel,serif;font-size:.92rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#22180f;line-height:1.2;
}
.quest-who em{
  display:block;font-family:"IM Fell English",Georgia,serif;font-size:.85rem;
  font-style:italic;letter-spacing:0;text-transform:none;color:var(--ink-soft);margin-top:.2rem;
}
.quest-text{
  font-size:1.04rem;line-height:1.62;color:var(--ink);
  margin:.9rem 0 0;max-width:62ch;font-style:italic;
}
.quest-pending{
  margin-top:.7rem;font-size:.9rem;font-style:italic;color:#8a6420;
}

.quest-goal{width:100%;max-width:420px;margin:1.1rem 0 1rem}
.quest-step{
  display:block;font-family:Cinzel,serif;font-size:.52rem;letter-spacing:.24em;
  text-transform:uppercase;color:#8a6420;margin-bottom:.25rem;
}
.quest-goal strong{
  display:block;font-family:Cinzel,serif;font-size:.92rem;font-weight:600;
  letter-spacing:.03em;color:#22180f;
}
.quest-bar{display:block;height:4px;margin-top:.6rem;background:rgba(42,31,22,.16);overflow:hidden}
.quest-bar i{display:block;height:100%;background:var(--brass);transition:width .6s ease}

.quest .raise{text-decoration:none;display:inline-block}

/* ==================================================================
   Avatars, profile
   ================================================================== */
.avatar{display:block;line-height:0}
.avatar img{display:block;width:100%;height:auto}

.card-profile{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(1.2rem,2.5vw,2rem);align-items:start}
@media(max-width:720px){.card-profile{grid-template-columns:1fr}.pf-portrait{max-width:190px}}
.pf-portrait{position:relative}
.pf-portrait .avatar-lg img{filter:drop-shadow(0 10px 22px rgba(42,31,22,.45))}
.pf-online{
  display:inline-block;margin-top:.5rem;padding:.2rem .55rem;
  background:rgba(74,104,70,.15);border:1px solid rgba(74,104,70,.5);
  font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.2em;
  text-transform:uppercase;color:#38512f;
}
.pf-sub{font-style:italic;color:var(--ink-soft);margin-top:.3rem}

.avatarpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.7rem}
.avatopt{display:block;cursor:pointer}
.avatopt input{position:absolute;opacity:0;width:0;height:0}
.avatopt-in{
  display:block;padding:.55rem;text-align:center;
  border:1px solid var(--rule);background:rgba(255,250,232,.35);
  transition:border-color .18s,background .18s,transform .18s;
}
.avatopt-in .avatar img{max-height:130px;width:auto;margin:0 auto}
.avatopt-in b{display:block;font-family:Cinzel,serif;font-size:.68rem;font-weight:600;
  letter-spacing:.05em;margin-top:.4rem;line-height:1.2}
.avatopt-in em{display:block;font-size:.78rem;font-style:italic;color:var(--ink-soft)}
.avatopt:hover .avatopt-in{background:rgba(255,250,232,.7);transform:translateY(-2px)}
.avatopt input:checked + .avatopt-in{border-color:var(--brass);background:rgba(184,134,43,.16);
  box-shadow:0 0 0 1px var(--brass) inset}
.avatopt input:focus-visible + .avatopt-in{outline:2px solid var(--brass);outline-offset:2px}

.field textarea{
  width:100%;background:rgba(255,250,232,.55);border:1px solid var(--rule);
  font-family:"IM Fell English",Georgia,serif;font-size:1rem;color:var(--ink);
  padding:.6rem;resize:vertical;line-height:1.5;
}
.field textarea:focus{outline:none;border-color:var(--brass)}

/* ==================================================================
   Chat dock
   ================================================================== */
.chat{
  position:fixed;right:1rem;bottom:0;z-index:60;width:min(360px,calc(100vw - 2rem));
  display:flex;flex-direction:column;
  font-family:"IM Fell English",Georgia,serif;
}
.chat-tab{
  display:flex;align-items:center;gap:.5rem;width:100%;cursor:pointer;
  padding:.5rem .8rem;border:1px solid rgba(184,134,43,.4);border-bottom:0;
  background:linear-gradient(180deg,#1a2a33,#101c23);
  font-family:Cinzel,serif;font-size:.6rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(240,226,189,.82);
}
.chat-tab:hover{color:#f2e6c6}
.chat-dot{width:7px;height:7px;border-radius:50%;background:#4a6846;flex:none}
.chat-unread{
  margin-left:auto;padding:.05rem .4rem;background:var(--oxblood);color:#f0e2bd;
  font-size:.6rem;letter-spacing:.06em;
}
.chat-body{
  display:flex;flex-direction:column;height:min(46vh,380px);
  background:linear-gradient(160deg,rgba(15,28,35,.97),rgba(9,18,24,.97));
  border:1px solid rgba(184,134,43,.35);
  box-shadow:0 -12px 40px -14px rgba(0,0,0,.9);
}
.chat.shut .chat-body{display:none}

.chat-log{list-style:none;margin:0;padding:.7rem;overflow-y:auto;flex:1;scrollbar-width:thin}
.chat-msg{display:grid;grid-template-columns:30px minmax(0,1fr);gap:.55rem;padding:.32rem 0}
.chat-face{width:30px;height:30px;object-fit:cover;object-position:50% 22%;
  border:1px solid rgba(184,134,43,.45);background:rgba(240,226,189,.08)}
.chat-head{font-family:Cinzel,serif;font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(240,226,189,.55);line-height:1.3}
.chat-head a{color:var(--brass-lift);text-decoration:none}
.chat-head a:hover{text-decoration:underline}
.chat-msg.staff .chat-head a{color:#e0a05a}
.chat-msg.mine .chat-head a{color:#f2e6c6}
.chat-said{font-size:.95rem;line-height:1.42;color:rgba(240,226,189,.9);
  word-wrap:break-word;overflow-wrap:anywhere;margin-top:.1rem}

.chat-form{display:flex;gap:.4rem;padding:.55rem;border-top:1px solid rgba(184,134,43,.25)}
.chat-form input{
  flex:1;min-width:0;background:rgba(240,226,189,.07);
  border:1px solid rgba(184,134,43,.3);color:#f0e2bd;
  font-family:"IM Fell English",Georgia,serif;font-size:.95rem;padding:.45rem .55rem;
}
.chat-form input:focus{outline:none;border-color:var(--brass)}
.chat-form input::placeholder{color:rgba(240,226,189,.35);font-style:italic}
.chat-form .raise{padding:.42rem .7rem;color:#f0e2bd;border-color:rgba(184,134,43,.5)}
.chat-note{padding:0 .6rem .5rem;font-size:.82rem;font-style:italic;color:#d08a72;min-height:1px}

@media(max-width:720px){ .chat{right:.5rem;width:calc(100vw - 1rem)} }

/* portrait picker on the register form */
.facepick{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:.4rem}
.faceopt{display:block;cursor:pointer}
.faceopt input{position:absolute;opacity:0;width:0;height:0}
.faceopt-in{display:block;border:1px solid rgba(42,31,22,.24);background:rgba(255,250,232,.3);
  padding:.2rem;transition:border-color .18s,background .18s}
.faceopt-in img{display:block;width:100%;height:auto}
.faceopt-in em{display:none}
.faceopt:hover .faceopt-in{background:rgba(255,250,232,.65)}
.faceopt input:checked + .faceopt-in{border-color:var(--brass);background:rgba(184,134,43,.2);
  box-shadow:0 0 0 1px var(--brass) inset}
.faceopt input:focus-visible + .faceopt-in{outline:2px solid var(--brass);outline-offset:2px}
.pf-main{min-width:0}

/* ==================================================================
   Staff badges
   ================================================================== */
.tag{
  display:inline-block;margin-left:.35rem;padding:.08rem .4rem;vertical-align:.08em;
  font-family:Cinzel,serif;font-size:.5rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  border:1px solid currentColor;
}
.tag-admin{color:#8a2f18;background:rgba(138,47,24,.1)}
.tag-moderator{color:#4a6846;background:rgba(74,104,70,.12)}
.tag-bad{color:var(--oxblood);background:rgba(122,33,28,.1)}
.tag-on{color:#3f6b34;background:rgba(63,107,52,.12)}
/* a hull with empty ports: worth noticing on the fleet list without opening
   anything, because that is the state a captain cannot raid in */
.tag-off{color:#8a6420;background:rgba(138,100,32,.1);border-style:dashed}
/* A hull no yard lays down. Gilt on plum rather than another shade of brown,
   because every other tag on a ship row is brown and this one has to be the
   thing the eye lands on first. */
/* ---- striking out on a bearing -------------------------------------- */
/* Eight bearings, each a card with one ship picker and three reaches. A
   compass rose looks the part and is unusable on a phone; what a captain is
   choosing is a row in a list, so it is laid out as one. */
.bearings{display:grid;gap:.7rem;margin-top:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.bearing{display:flex;flex-direction:column;gap:.55rem;
  border:1px solid var(--rule);padding:.7rem .75rem .75rem;
  background:linear-gradient(165deg,rgba(255,250,232,.7),rgba(240,229,200,.45))}
/* A bearing with nothing left on it recedes rather than disappearing, so the
   shape of what a captain has covered stays legible. */
.bearing.spent{opacity:.55}

.bearing-name{display:flex;align-items:center;gap:.45rem;margin:0;
  font-family:Cinzel,serif;font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft)}
/* A needle rather than an icon: one square element rotated per bearing, so
   eight directions cost one rule and no image. */
.bearing-rose{width:13px;height:13px;flex:none;position:relative}
.bearing-rose::before{content:"";position:absolute;inset:0;margin:auto;
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:11px solid var(--brass)}
.bearing-rose.ne::before{transform:rotate(45deg)}
.bearing-rose.e::before {transform:rotate(90deg)}
.bearing-rose.se::before{transform:rotate(135deg)}
.bearing-rose.s::before {transform:rotate(180deg)}
.bearing-rose.sw::before{transform:rotate(225deg)}
.bearing-rose.w::before {transform:rotate(270deg)}
.bearing-rose.nw::before{transform:rotate(315deg)}

.bearing-legs{display:flex;flex-direction:column;gap:.3rem}

/* Every reach is the same shape whether it can be sailed or not, so the card
   does not reflow as water gets charted. */
.leg{display:flex;flex-direction:column;gap:.08rem;width:100%;text-align:left;
  border:1px solid var(--rule);padding:.4rem .55rem;background:rgba(255,250,232,.75);
  font:inherit;color:var(--ink);cursor:default}
.leg b{font-family:Cinzel,serif;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  color:#22180f}
.leg i{font-size:.72rem;font-style:italic;color:var(--ink-soft)}

.leg.go{cursor:pointer;border-color:var(--brass);
  background:linear-gradient(160deg,rgba(184,134,43,.16),rgba(255,250,232,.85));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  transition:background .14s ease,transform .1s ease,box-shadow .14s ease}
.leg.go:hover{background:linear-gradient(160deg,rgba(184,134,43,.3),rgba(255,250,232,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 5px rgba(58,42,24,.16)}
.leg.go:active{transform:translateY(1px);box-shadow:inset 0 1px 3px rgba(58,42,24,.24)}
.leg.go:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

.leg.done{border-style:dashed;background:rgba(63,107,52,.08);border-color:#3f6b34}
.leg.done b{color:#3f6b34}
.leg.dead{background:rgba(58,42,24,.05);opacity:.6}

.bearing-ship{display:flex;align-items:center;gap:.4rem;margin-top:auto}
.bearing-ship .lbl{font-family:Cinzel,serif;font-size:.6rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.bearing-ship select{flex:1 1 auto;min-width:0;background:rgba(255,250,232,.85);
  border:1px solid var(--rule);font-family:"IM Fell English",Georgia,serif;
  font-size:.84rem;color:var(--ink);padding:.3rem .35rem}
.bearing-ship select:focus{outline:none;border-color:var(--brass)}

/* ---- the month's ration ---------------------------------------------- */
/* A calendar, not a list. Thirty-one of anything in a column is a scroll
   nobody reads; as a grid the whole month is one glance. */
.ration{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.3rem;
  grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.ration li{border:1px solid var(--rule);background:rgba(255,250,232,.5);
  padding:.35rem .45rem;min-width:0}
.ration b{display:block;font-family:Cinzel,serif;font-size:.62rem;font-weight:600;
  letter-spacing:.12em;color:var(--ink-soft)}
.ration span{display:block;font-size:.76rem;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Taken recedes, today stands up, and a day gone by simply dims — none of
   which should shout as loudly as the two rungs worth crossing a room for. */
.ration li.got{opacity:.45;border-style:dashed}
.ration li.gone{opacity:.5}
.ration li.now{border-color:var(--brass);border-width:2px;padding:.3rem .4rem;
  background:linear-gradient(160deg,rgba(184,134,43,.2),rgba(255,250,232,.85))}
.ration li.coin{border-color:#3f6b34;background:rgba(63,107,52,.1)}
.ration li.coin b{color:#3f6b34}
.ration li.prize{border-color:#4a2d5c;
  background:linear-gradient(160deg,rgba(93,58,114,.18),rgba(255,250,232,.7))}
.ration li.prize b{color:#5d3a72}

/* ---- answering a sighting ------------------------------------------- */
.huntback{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap;
  padding:.4rem 0;border-bottom:1px dotted var(--rule)}
.huntback:last-child{border-bottom:0}
.huntback b{font-family:Cinzel,serif;font-size:.9rem;color:#22180f}
.huntback span{font-size:.82rem;color:var(--ink-soft)}
.huntback em{flex:1 1 160px;font-size:.82rem;font-style:italic;color:#3f6b34}

.seapost-hunt{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  margin:.5rem 0 .4rem;font-size:.82rem;color:var(--ink-soft)}
.seapost-hunt b{font-family:Cinzel,serif;color:var(--oxblood)}
.huntbar{flex:1 1 90px;min-width:70px;height:6px;background:rgba(58,42,24,.16);
  border:1px solid var(--rule)}
.huntbar i{display:block;height:100%;background:var(--oxblood)}
/* Which of your hulls is already on her way to this one, and when she lands.
   Sending a ship somewhere and having the page say nothing about her is the
   complaint this answers. */
.huntmine{display:flex;flex-direction:column;gap:.15rem;margin:.4rem 0 .2rem;
  padding:.4rem .55rem;border-left:2px solid var(--brass);
  background:rgba(184,134,43,.09);font-size:.82rem;color:var(--ink-soft)}
.huntmine b{font-family:Cinzel,serif;color:#5c3f10;margin-right:.3rem}

.huntgo{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:.3rem}
.huntgo select{flex:1 1 130px;min-width:0;background:rgba(255,250,232,.85);
  border:1px solid var(--rule);font-family:"IM Fell English",Georgia,serif;
  font-size:.84rem;color:var(--ink);padding:.28rem .35rem}

/* ---- the season roll ------------------------------------------------ */
.seasonbar{margin:1rem 0 .5rem}
.seasonnow{margin:0 0 .3rem;display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.seasonnow b{font-family:Cinzel,serif;font-size:1.05rem;color:#5c3f10}
.seasonnow span{font-size:.85rem;color:var(--ink-soft)}
.seasontrack{display:block;height:8px;background:rgba(58,42,24,.14);
  border:1px solid var(--rule)}
.seasontrack i{display:block;height:100%;
  background:linear-gradient(90deg,var(--brass),#d8ab52)}
.seasonfoot{margin:.35rem 0 0;font-size:.84rem;font-style:italic;color:var(--ink-soft)}

/* A rung is three columns: its number, the free reward, the charter one.
   Scrolls inside itself on a narrow screen rather than pushing the page. */
.rungs{margin-top:.8rem;overflow-x:auto}
.rung{display:grid;grid-template-columns:2.2rem minmax(9rem,1fr) minmax(9rem,1fr);
  gap:.4rem;align-items:stretch;padding:.28rem 0;min-width:22rem}
.rungno{display:flex;align-items:center;justify-content:center;
  font-family:Cinzel,serif;font-size:.78rem;font-weight:600;color:var(--ink-soft);
  border-right:1px solid var(--rule)}
/* A rung already reached reads differently from one still ahead. */
.rung.won .rungno{color:#5c3f10}

.rungcell{display:flex;align-items:center;padding:.3rem .45rem;
  border:1px solid var(--rule);background:rgba(255,250,232,.45);min-width:0}
.rungcell.premium{border-color:var(--brass);background:rgba(184,134,43,.09)}
.rungcell.taken{opacity:.55;border-style:dashed}
.rungcell form{margin:0;width:100%}

.rungnone{font-size:.8rem;color:var(--ink-soft);opacity:.5}
.rungwon,.rungwait{font-size:.82rem;color:var(--ink-soft)}
.rungwait em{font-style:normal;font-family:Cinzel,serif;font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;color:#5c3f10;
  border:1px solid var(--brass);padding:.06rem .3rem;margin-left:.3rem}

/* The one control on the page, so it should look like the only one. */
.rungtake{width:100%;text-align:left;font:inherit;font-size:.82rem;cursor:pointer;
  color:#22180f;border:1px solid var(--brass);padding:.24rem .4rem;
  background:linear-gradient(160deg,rgba(184,134,43,.28),rgba(255,250,232,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.rungtake:hover{background:linear-gradient(160deg,rgba(184,134,43,.42),rgba(255,250,232,.95))}
.rungtake:active{transform:translateY(1px)}
.rungtake:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ---- letters of marque ---------------------------------------------- */
.letter{border:1px solid var(--brass);padding:.75rem .85rem;margin:.8rem 0;
  background:linear-gradient(155deg,rgba(184,134,43,.12),rgba(255,250,232,.6))}
/* A met tally is the one state worth interrupting somebody for. */
.letter.met{border-color:#3f6b34;background:linear-gradient(155deg,rgba(63,107,52,.16),rgba(255,250,232,.7))}
.letter.offer{background:rgba(255,250,232,.5)}
.letter-tally{margin:0 0 .35rem;font-family:Cinzel,serif;font-size:.92rem;color:#22180f}
.letter-tally b{font-size:1.15rem;color:#5c3f10}
.letter-bar{display:block;height:6px;background:rgba(58,42,24,.14);margin:.2rem 0 .4rem}
.letter-bar i{display:block;height:100%;background:var(--brass)}
.letter.met .letter-bar i{background:#3f6b34}
.letter-foot{margin:0 0 .5rem;font-size:.84rem;font-style:italic;color:var(--ink-soft)}
.letter form{margin:0}

/* ---- torn maps ------------------------------------------------------ */
.scrapline{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:.9rem 0 .2rem;
  padding:.65rem .8rem;border:1px dashed var(--brass);background:rgba(184,134,43,.09)}
.scraptally{font-size:.9rem;color:var(--ink-soft)}
.scraptally b{font-family:Cinzel,serif;font-size:1.1rem;color:#5c3f10}

.maplist{list-style:none;margin:.8rem 0 0;padding:0}
.maplist li{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;padding:.55rem 0;
  border-bottom:1px solid var(--rule)}
.maplist li:last-child{border-bottom:0}
.mapwho{flex:1 1 150px;min-width:0}
.mapwho b{display:block;font-family:Cinzel,serif;font-size:.92rem;letter-spacing:.06em;
  color:#5c3f10}
.mapwho em{display:block;font-size:.8rem;font-style:italic;color:var(--ink-soft)}
.mapgo{display:flex;gap:.35rem;align-items:center;flex:0 1 auto}
.mapgo select{min-width:0;background:rgba(255,250,232,.85);border:1px solid var(--rule);
  font-family:"IM Fell English",Georgia,serif;font-size:.84rem;color:var(--ink);
  padding:.3rem .35rem}

/* ---- standing with the crowns -------------------------------------- */
.crownlist{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.crownlist li{border:1px solid var(--rule);background:rgba(255,250,232,.5);padding:.55rem .7rem}
.crownname{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline;
  font-family:Cinzel,serif;font-size:.8rem;font-weight:600;color:#22180f}
.crownname b{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
/* Below nothing is a different thing from early progress, not less of it. */
.crownbar{display:block;height:5px;margin:.4rem 0 .3rem;background:rgba(58,42,24,.14)}
.crownbar i{display:block;height:100%;background:var(--brass)}
.crownbar.ill i{background:var(--oxblood)}
.crownfoot{font-size:.78rem;font-style:italic;color:var(--ink-soft)}

/* ---- what a job is, at a glance ------------------------------------- */
.jobmarks{display:flex;flex-wrap:wrap;gap:.35rem;margin:.3rem 0 .1rem}
.jobmarks:empty{display:none}
.mark{font-family:Cinzel,serif;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule);padding:.16rem .42rem;color:var(--ink-soft);
  background:rgba(255,250,232,.6)}
.mark.chain{color:#3f5d78;border-color:#3f5d78;background:rgba(63,93,120,.1)}
.mark.crown{color:#5c3f10;border-color:var(--brass);background:rgba(184,134,43,.12)}
.mark.rare1{color:#3f6b34;border-color:#3f6b34;background:rgba(63,107,52,.1)}
/* The one line on the board worth crossing a room for. */
.mark.rare2{color:#f3e2b8;border-color:#4a2d5c;letter-spacing:.13em;
  background:linear-gradient(160deg,#5d3a72,#3b2349);
  box-shadow:inset 0 1px 0 rgba(255,228,168,.35)}

.chainrun{list-style:none;margin:.6rem 0 0;padding:0}
.chainrun li{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;padding:.4rem 0;
  border-bottom:1px dotted var(--rule)}
.chainrun li:last-child{border-bottom:0}
.chainrun b{font-family:Cinzel,serif;font-size:.84rem;font-weight:600;color:#22180f}
.chainrun span{font-size:.84rem;color:var(--ink-soft)}
.chainrun em{font-size:.78rem;font-style:italic;color:#3f6b34}

/* ---- bringing friends aboard --------------------------------------- */

/* A code somebody is meant to read out and a link they are meant to send are
   two different things, so the box shows both and copies the one worth
   copying. Laid out as a grid rather than a flex row: the label and the code
   sit on one line and the link runs the full width beneath, which is the only
   arrangement that survives a link long enough to wrap. */
.refbox{display:grid;gap:.15rem .7rem;align-items:center;margin:.9rem 0;padding:.8rem .9rem;
  grid-template-columns:auto 1fr auto;
  border:1px solid var(--brass);
  background:linear-gradient(150deg,rgba(184,134,43,.14),rgba(255,250,232,.65));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 3px rgba(58,42,24,.1)}
.refbox-lbl{grid-column:1;font-family:Cinzel,serif;font-size:.6rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.refbox-code{grid-column:2;justify-self:start;font-family:Cinzel,serif;font-size:1.2rem;
  font-weight:700;letter-spacing:.28em;color:#5c3f10;
  -webkit-user-select:all;user-select:all}
.refbox .btn{grid-column:3;grid-row:1/3;align-self:center;white-space:nowrap}
/* Long, and not the point — shown so a captain can see where it goes, sized
   so it never decides how wide the box is. */
.refbox-link{grid-column:1/3;font-size:.76rem;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* One line short of the full box, for the corner of the port page. */
.refbox.tight{grid-template-columns:1fr auto;padding:.6rem .7rem}
.refbox.tight .refbox-lbl{grid-column:1;grid-row:1}
.refbox.tight .refbox-code{grid-column:1;grid-row:2;font-size:1rem;letter-spacing:.22em}
.refbox.tight .btn{grid-column:2;grid-row:1/3}

/* Under about 380px the button cannot share a line with anything. */
@media (max-width:400px){
  .refbox,.refbox.tight{grid-template-columns:1fr}
  .refbox .btn,.refbox.tight .btn{grid-column:1;grid-row:auto;margin-top:.45rem}
  .refbox-code{grid-column:1}
  .refbox-link{grid-column:1}
}

/* Wraps, because three reward lines on a narrow screen must stack rather
   than push the page sideways. */
.refsteps{list-style:none;margin:.9rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.refsteps li{flex:1 1 190px;border:1px solid var(--rule);background:rgba(255,250,232,.5);
  padding:.55rem .7rem}
.refsteps b{display:block;font-family:Cinzel,serif;font-size:.66rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.25rem}
.refsteps span{display:block;font-size:.88rem;color:var(--ink)}
.refsteps em{display:block;font-size:.8rem;font-style:italic;color:var(--ink-soft);margin-top:.1rem}

.reftally{margin:.9rem 0 .5rem;font-size:.9rem;color:var(--ink-soft)}
.reftally b{font-family:Cinzel,serif;color:var(--ink)}

.reflist{list-style:none;margin:.5rem 0 0;padding:0}
.reflist li{display:flex;gap:.65rem;align-items:center;padding:.5rem 0;
  border-bottom:1px solid var(--rule)}
.reflist li:last-child{border-bottom:0}
.refface{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.refwho{flex:1 1 auto;min-width:0}
.refwho b{display:block;font-family:Cinzel,serif;font-size:.86rem;font-weight:600;color:#22180f}
.refwho em{display:block;font-size:.8rem;font-style:italic;color:var(--ink-soft)}
.reftag{flex:none;font-family:Cinzel,serif;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--rule);padding:.2rem .45rem;
  color:var(--ink-soft);background:rgba(255,250,232,.6)}
.reftag.paid{color:#3f6b34;border-color:#3f6b34;background:rgba(63,107,52,.1)}
.reftag.warn{color:#8a6420;border-color:#8a6420;background:rgba(138,100,32,.1);
  border-style:dashed}

.premium-tag{
  color:#f3e2b8;border-color:#4a2d5c;
  background:linear-gradient(160deg,#5d3a72,#3b2349);
  box-shadow:inset 0 1px 0 rgba(255,228,168,.35),0 1px 2px rgba(0,0,0,.28);
  letter-spacing:.09em}

.staffbanner{
  display:inline-flex;align-items:baseline;gap:.6rem;
  padding:.4rem .8rem;margin-bottom:.7rem;
  font-family:Cinzel,serif;font-size:.62rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  border-left:3px solid currentColor;
}
.staffbanner em{font-family:"IM Fell English",Georgia,serif;font-size:.82rem;
  font-style:italic;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.staffbanner.admin{color:#8a2f18;background:linear-gradient(90deg,rgba(138,47,24,.16),transparent)}
.staffbanner.moderator{color:#3f6b34;background:linear-gradient(90deg,rgba(63,107,52,.16),transparent)}

.chat-tag{
  display:inline-block;margin-left:.3rem;padding:0 .3rem;
  font-family:Cinzel,serif;font-size:.48rem;font-weight:600;letter-spacing:.14em;
  border:1px solid currentColor;
}
.chat-tag.admin{color:#e08a5a}
.chat-tag.moderator{color:#8fc07f}

/* ==================================================================
   Admin panel
   ================================================================== */
.admintabs{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:1rem;
           border-top:1px solid var(--rule);padding-top:1rem}
.admintabs a{
  padding:.4rem .8rem;text-decoration:none;
  font-family:Cinzel,serif;font-size:.6rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--rule);
}
.admintabs a:hover{background:rgba(255,250,232,.5);color:var(--ink)}
.admintabs a.on{border-color:var(--brass);background:rgba(184,134,43,.16);color:#5c3f10}

.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;
          background:var(--rule);border:1px solid var(--rule)}
.stat{background:rgba(255,250,232,.5);padding:.9rem 1rem}
.stat b{display:block;font-family:Cinzel,serif;font-size:1.4rem;font-weight:400;line-height:1.1}
.stat span{display:block;font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.2em;
           text-transform:uppercase;color:#8a6420;margin-top:.25rem}

.adminrow{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:1rem;
          padding:.9rem 0;border-bottom:1px solid var(--rule);align-items:start}
@media(max-width:900px){.adminrow{grid-template-columns:1fr}}
.ar-who{display:grid;grid-template-columns:46px minmax(0,1fr);gap:.7rem;align-items:start}
.ar-face img{width:46px;height:46px;object-fit:cover;object-position:50% 20%;
             border:1px solid var(--rule)}
.ar-name{font-family:Cinzel,serif;font-size:.92rem;font-weight:600;color:var(--ink);text-decoration:none}
.ar-name:hover{color:#8a6420}
.ar-who em{display:block;font-size:.82rem;font-style:italic;color:var(--ink-soft);margin-top:.15rem}
.ar-acts{display:grid;gap:.4rem}
.ar-form{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.ar-form input[type=number]{width:90px}
.ar-form input[type=text]{flex:1 1 130px;min-width:0}
.ar-form input,.ar-form select{
  background:rgba(255,250,232,.6);border:1px solid var(--rule);
  font-family:"IM Fell English",Georgia,serif;font-size:.9rem;color:var(--ink);padding:.35rem .4rem;
}
.ar-form input:focus,.ar-form select:focus{outline:none;border-color:var(--brass)}
.ar-form .raise{padding:.35rem .7rem}

.formgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.9rem}
.formgrid label{display:block}
.formgrid .mini{display:block;margin-bottom:.35rem}
.remember{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--ink-soft);cursor:pointer}
.remember input{accent-color:var(--oxblood);width:14px;height:14px}

/* ==================================================================
   Chat channel rail + friends
   ================================================================== */
.chat-rail{
  display:flex;gap:.25rem;overflow-x:auto;flex:none;
  padding:.45rem .5rem;border-bottom:1px solid rgba(184,134,43,.25);
  scrollbar-width:thin;
}
.chat-rail .ch{
  position:relative;display:flex;align-items:center;gap:.35rem;
  padding:.28rem .55rem;cursor:pointer;white-space:nowrap;flex:none;
  background:rgba(240,226,189,.06);border:1px solid rgba(184,134,43,.28);
  font-family:Cinzel,serif;font-size:.55rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(240,226,189,.6);
  transition:color .16s,background .16s,border-color .16s;
}
.chat-rail .ch:hover{color:#f2e6c6;background:rgba(240,226,189,.12)}
.chat-rail .ch.on{color:#f2e6c6;border-color:var(--brass);background:rgba(184,134,43,.2)}
.chat-rail .ch img{
  width:18px;height:18px;object-fit:cover;object-position:50% 18%;
  border:1px solid rgba(184,134,43,.4);flex:none;
}
.chat-rail .ch.up img{border-color:#6f9c5f}
.chdot{
  position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;
  background:var(--oxblood);border:1px solid rgba(15,28,35,.9);
}

.friend-ico{width:44px;height:44px;padding:0;border:1px solid rgba(60,42,16,.4);
  background:rgba(42,31,22,.06);overflow:hidden;display:block}
.friend-ico img{width:44px;height:44px;object-fit:cover;object-position:50% 18%;display:block}
.card .nm{color:var(--ink);text-decoration:none}
a.nm:hover{color:#8a6420}

/* painted icons sit inside the same boxes the drawn glyphs used */
.ico-art{display:block;line-height:0;width:100%;height:100%}
.ico-art img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 1px 2px rgba(42,31,22,.35))}
.card-ico:has(.ico-art){padding:3px;background:rgba(184,134,43,.05)}
.good-ico .ico-art img,.sellrow .ico-art img{width:22px;height:22px}
.loadrow .ico-art img{width:22px;height:22px}
.traderow .ico-art img{width:24px;height:24px}

/* ==================================================================
   Guilds
   ================================================================== */
/* .gemblem-img is handed to Uploads::picture, so it is a class on markup this
   file never sees. The crest that used to carry it went dark with the hall
   above; what is left is the picture inside it. */
.gemblem-img{display:block;line-height:0;width:100%;height:100%}
.gemblem-img img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 6px 14px rgba(42,31,22,.4))}
.gtag{
  font-family:Cinzel,serif;font-size:1.9rem;font-weight:700;letter-spacing:.1em;
  color:#5c3f10;text-shadow:0 1px 0 rgba(255,250,232,.6);
}
.gtag.small{font-size:.9rem;letter-spacing:.08em}

/* ---------- the guild hall ----------
   A company should look like something you belong to rather than a form you
   filled in, so the head of the page is dark like the chrome, with the crest
   lit against it and the figures it is judged by set out along the side. */
.ghall{
  position:relative;overflow:hidden;
  padding:clamp(1.2rem,3vw,2.1rem) clamp(1.1rem,3vw,2rem);
  background:radial-gradient(70% 120% at 16% 0%,rgba(184,134,43,.26),transparent 62%),
             linear-gradient(150deg,#1a2b33,#0b1219 76%);
  border:1px solid rgba(184,134,43,.4);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.95);
}
.ghall::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--grain);opacity:.16;mix-blend-mode:overlay}
.ghall-in{position:relative;z-index:1;display:grid;
  grid-template-columns:118px minmax(0,1fr) auto;
  gap:clamp(1rem,2.4vw,1.8rem);align-items:center}

.ghall-crest{display:grid;place-items:center;aspect-ratio:1;
  background:radial-gradient(60% 55% at 50% 40%,rgba(255,250,232,.16),transparent 70%);
  border:1px solid rgba(184,134,43,.5)}
.ghall-crest .gemblem-img{display:block;line-height:0;width:100%;height:100%}
.ghall-crest .gemblem-img img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.75))}
.ghall-crest .gtag{color:var(--brass-lift);text-shadow:0 2px 6px rgba(0,0,0,.7)}

.ghall-say{min-width:0}
.ghall-say h1{font-family:Cinzel,serif;font-size:clamp(1.5rem,3.6vw,2.3rem);font-weight:700;
  letter-spacing:.07em;color:#f4e8ca;margin:.3rem 0 .25rem;line-height:1.05}
.ghall-motto{font-style:italic;font-size:1.02rem;color:rgba(240,226,189,.72);max-width:52ch}
.ghall-lead{margin-top:.5rem;font-size:.9rem;color:rgba(240,226,189,.55)}
.ghall-lead a{color:var(--brass-lift);text-decoration:none}
.ghall-lead a:hover{color:#f6ecd2}

.ghall-tally{list-style:none;display:flex;flex-wrap:wrap;gap:1px;margin:0;
  background:rgba(184,134,43,.28);border:1px solid rgba(184,134,43,.28)}
.ghall-tally li{min-width:88px;padding:.6rem .8rem;text-align:center;
  background:rgba(9,17,23,.62)}
.ghall-tally b{display:block;font-family:Cinzel,serif;font-size:1.15rem;font-weight:600;
  color:#f4e8ca;line-height:1}
.ghall-tally b small{font-size:.72rem;color:rgba(240,226,189,.45);font-weight:400}
.ghall-tally span{display:block;margin-top:.25rem;font-family:Cinzel,serif;font-size:.46rem;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(240,226,189,.5)}

.ghall-note{position:relative;z-index:1;margin-top:1.1rem;padding-top:1rem;
  border-top:1px solid rgba(184,134,43,.24);
  font-size:.96rem;line-height:1.6;color:rgba(240,226,189,.72);max-width:76ch}

@media(max-width:900px){
  .ghall-in{grid-template-columns:92px minmax(0,1fr)}
  .ghall-tally{grid-column:1 / -1}
}
@media(max-width:560px){
  .ghall-in{grid-template-columns:1fr}
  .ghall-crest{max-width:110px}
  .ghall-tally li{flex:1 1 auto;min-width:72px}
}

/* what a member has put to the chest, under their name in the roster */
.gave{display:block;margin-top:.3rem;font-family:Cinzel,serif;font-size:.5rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.gave.some{color:#5c3f10}
.gave em{font-style:italic;text-transform:none;letter-spacing:0;font-size:.78rem;
  color:var(--ink-faint);margin-left:.35rem}

/* the stores: two rows of controls that must not run into one another */
.storerow{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:.9rem 1.4rem;align-items:start}
.storerow .hull-move{margin-top:0}

/* a company saying it will take hands on, in the browse list */
.wanted{display:block;margin-top:.4rem;padding-top:.4rem;
  border-top:1px dashed rgba(42,31,22,.2)}
.wanted b{font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.18em;
  text-transform:uppercase;color:#3f6b34}
.wanted em{display:block;margin-top:.15rem;font-size:.86rem;font-style:italic;
  line-height:1.45;color:var(--ink-soft)}

/* how the companies stand against one another */
.gtable{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.gtable-head,.gtable-row{display:grid;
  grid-template-columns:2.2rem minmax(0,1fr) 4rem 4rem 7rem 7rem;
  gap:.6rem;align-items:center;padding:.5rem .8rem}
.gtable-head{background:rgba(42,31,22,.07);
  font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.2em;
  text-transform:uppercase;color:#8a6420}
.gtable .num{text-align:right;font-family:Cinzel,serif;font-size:.88rem;color:var(--ink)}
.gtable-head .num{font-size:.5rem;color:#8a6420}
.gtable-row{background:rgba(255,250,232,.45);text-decoration:none}
.gtable-row:hover{background:rgba(255,250,232,.75)}
.gtable-no{font-family:Cinzel,serif;font-size:.86rem;color:var(--ink-faint)}
.gtable-row:first-of-type .gtable-no{color:var(--brass)}
.gtable-who b{font-family:Cinzel,serif;font-size:.92rem;font-weight:600;color:#22180f}
.gtable-who em{margin-left:.4rem;font-style:normal;font-size:.78rem;color:var(--ink-faint)}

@media(max-width:720px){
  .gtable-head{display:none}
  .gtable-row{grid-template-columns:2.2rem minmax(0,1fr) 4rem;row-gap:.3rem}
  .gtable-row .num:nth-child(n+5){display:none}
}

/* the company's book: one line an event, dated down the side */
.gbook{list-style:none;margin:0;padding:0}
.gbook li{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:.9rem;
  align-items:baseline;padding:.5rem 0;border-top:1px solid rgba(42,31,22,.1)}
.gbook li:first-child{border-top:0}
.gbook-when{font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.16em;
  text-transform:uppercase;color:#8a6420}
.gbook-what{font-size:.96rem;line-height:1.45;color:var(--ink-soft)}
/* the four kinds read differently at a glance without needing a legend */
.gbook li.port .gbook-what,.gbook li.siege .gbook-what{color:var(--ink)}
.gbook li.siege .gbook-when{color:var(--oxblood)}
.gbook li.port .gbook-when{color:#3f6b34}

.chat-rail .ch.guild{border-color:rgba(220,174,82,.55);color:#e6c98c}
.chat-rail .ch.guild.on{background:rgba(184,134,43,.28);color:#f7ecd0}

/* fleet thumbnails: every ship boxed to the same size whatever its aspect */
.card-ico.ship-ico{width:64px;height:48px;padding:2px;border-color:rgba(184,134,43,.45)}
.shipthumb{display:grid;place-items:center;width:100%;height:100%;overflow:hidden}
.shipthumb picture{display:block;line-height:0;width:100%;height:100%}
.shipthumb img{width:100%;height:100%;object-fit:contain;display:block}
.shipthumb.sil{color:#8a6420;opacity:.75}
.shipthumb.sil svg{width:100%;height:100%}
.cards .card:has(.ship-ico){grid-template-columns:64px 1fr}

/* rank and experience in the header */
.rankbar{display:flex;flex-direction:column;gap:.22rem;min-width:96px}
.rankbar b{font-family:Cinzel,serif;font-size:.56rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(240,226,189,.75)}
.rankbar i{display:block;height:4px;background:rgba(240,226,189,.14);
  border:1px solid rgba(184,134,43,.3);overflow:hidden}
.rankbar s{display:block;height:100%;background:var(--brass-lift);text-decoration:none;
  transition:width .6s ease}
/* It used to be hidden on a phone to buy the bar some width, which meant the
   one number a captain checks most was the one number they could not see. It
   stays, narrowed, and the width comes out of the HUD instead. */
@media(max-width:820px){
  .rankbar{min-width:56px;gap:.16rem}
  .rankbar b{font-size:.5rem;letter-spacing:.12em}
  .rankbar i{height:3px}
}

/* ==================================================================
   Tavern: NPCs offering work
   ================================================================== */
.joboffer{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:1.1rem;align-items:start;
  padding:1.1rem 0;border-bottom:1px solid var(--rule);
}
.joboffer:last-child{border-bottom:0}
.joboffer.dim{opacity:.55}
@media(max-width:640px){.joboffer{grid-template-columns:1fr}.jobface{max-width:96px}}

.jobface{display:block;line-height:0}
.jobface img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 6px 14px rgba(42,31,22,.4))}

.jobbody{min-width:0}
.jobwho{font-family:Cinzel,serif;font-size:.86rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#22180f;line-height:1.2}
.jobwho em{display:block;font-family:"IM Fell English",Georgia,serif;font-size:.86rem;
  font-style:italic;letter-spacing:0;text-transform:none;color:var(--ink-soft);margin-top:.2rem}
.jobline{font-size:1.02rem;line-height:1.6;font-style:italic;color:var(--ink);
  margin:.7rem 0 0;max-width:66ch}
.jobblock{margin-top:.6rem;font-size:.88rem;font-style:italic;color:var(--oxblood)}

/* ==================================================================
   Mark's tour
   ================================================================== */
.tour{
  position:relative;display:grid;grid-template-columns:132px minmax(0,1fr);
  gap:clamp(1rem,2vw,1.5rem);align-items:start;
  margin-bottom:1.4rem;padding:clamp(1.1rem,2vw,1.5rem);
  background:
    radial-gradient(70% 60% at 20% 14%,rgba(255,250,232,.62),transparent 70%),
    linear-gradient(160deg,var(--vellum),var(--vellum-edge));
  border-left:3px solid #6b4a12;
  box-shadow:0 20px 46px -22px rgba(6,12,17,.8);
  animation:rise .45s cubic-bezier(.16,1,.3,1) both;
}
.tour::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--grain);opacity:.08;mix-blend-mode:multiply;
}
@media(max-width:720px){.tour{grid-template-columns:1fr}.tour-face{max-width:150px}}

.tour-face{position:relative;line-height:0}
.tour-face picture,.tour-face .avatar{display:block;line-height:0}
.tour-face img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 8px 18px rgba(42,31,22,.42))}

.tour-body{position:relative;z-index:1}
.tour-who{font-family:Cinzel,serif;font-size:.9rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#22180f;line-height:1.2}
.tour-who em{display:block;font-family:"IM Fell English",Georgia,serif;font-size:.84rem;
  font-style:italic;letter-spacing:0;text-transform:none;color:var(--ink-soft);margin-top:.18rem}
.tour-title{font-family:Cinzel,serif;font-size:1.1rem;font-weight:600;letter-spacing:.06em;
  margin:.7rem 0 .1rem;color:#5c3f10}
.tour-intro{font-style:italic;color:var(--ink-soft);margin-top:.5rem;line-height:1.55;max-width:62ch}
.tour-text{font-size:1.04rem;line-height:1.62;font-style:italic;color:var(--ink);
  margin:.6rem 0 0;max-width:64ch}
.tour-hand{margin-top:.8rem;font-size:.98rem;line-height:1.55;color:#6b4a12;
  border-left:2px solid var(--brass);padding-left:.8rem;max-width:60ch}
.tour-bar{display:block;height:4px;margin:1rem 0;max-width:340px;
  background:rgba(42,31,22,.16);overflow:hidden}
.tour-bar i{display:block;height:100%;background:#6b4a12;transition:width .6s ease}

/* the chart page has no room for a wide panel */
.chart-side .tour{grid-template-columns:1fr;margin-bottom:1rem;padding:1rem}
.chart-side .tour-face{max-width:110px}

/* the cargo manifest needs room; the goods grid is far too narrow for it */
.loadlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
          gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:1.1rem}
.loadrow{display:grid;grid-template-columns:30px minmax(0,1fr) 78px;gap:.65rem;
         align-items:center;background:rgba(255,250,232,.45);padding:.6rem .75rem}
.loadrow .sell-n{min-width:0;font-size:.94rem;line-height:1.25}
.loadrow .sell-n em{display:block;font-style:italic;font-size:.8rem;color:var(--ink-soft);margin-top:.1rem}
.loadrow .good-ico{width:30px;height:30px;display:grid;place-items:center}
.loadrow .good-ico svg,.loadrow .good-ico .ico-art img{width:26px;height:26px}

/* ==================================================================
   Market: one row per good, one amount, two priced buttons
   ================================================================== */
.mktlist{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:.6rem}
.mkthead,.mktrow{
  display:grid;
  grid-template-columns:minmax(0,1fr) 74px 74px 92px 92px 76px;
  gap:.6rem;align-items:center;
}
.mkthead{
  background:rgba(42,31,22,.07);padding:.45rem .8rem;
  font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.2em;
  text-transform:uppercase;color:#8a6420;
}
.mkthead .num{text-align:center}
.mktrow{background:rgba(255,250,232,.45);padding:.5rem .8rem}
.mktrow:hover{background:rgba(255,250,232,.72)}

/* Both of these set display, so [hidden] alone would lose to it. */
.mktrow[hidden],.mktlist[hidden]{display:none}
.mktsearch{
  margin-left:auto;max-width:230px;padding:.4rem .6rem;
  font:inherit;font-size:.92rem;color:var(--ink);
  background:rgba(255,250,232,.6);border:1px solid var(--rule);
}
.mktsearch::placeholder{color:var(--ink-faint);font-style:italic}
.mktsearch:focus{outline:none;border-color:var(--brass)}
@media(max-width:560px){.mktsearch{margin-left:0;max-width:100%;width:100%}}

.mkt-good{display:flex;align-items:center;gap:.55rem;min-width:0}
.mkt-good .good-ico{width:26px;height:26px;display:grid;place-items:center;flex:none}
.mkt-good .good-ico svg,.mkt-good .good-ico .ico-art img{width:24px;height:24px}
.mkt-name{font-size:.96rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mkt-num{text-align:center;font-family:Cinzel,serif;font-size:.9rem;color:var(--ink-faint)}
.mkt-num.has{color:var(--ink)}

.mkt-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;line-height:1.05;padding:.32rem .4rem;cursor:pointer;
  border:1px solid var(--rule);background:rgba(255,250,232,.6);color:var(--ink);
  transition:background .15s,border-color .15s,transform .1s;
}
.mkt-btn b{font-family:Cinzel,serif;font-size:.92rem;font-weight:400}
.mkt-btn small{font-family:Cinzel,serif;font-size:.44rem;letter-spacing:.2em;
               text-transform:uppercase;color:var(--ink-faint)}
.mkt-btn:hover:not(:disabled){background:rgba(255,250,232,.95);border-color:var(--brass)}
.mkt-btn:active:not(:disabled){transform:scale(.96)}
.mkt-btn:disabled{opacity:.35;cursor:not-allowed}
.mkt-btn.good{border-color:rgba(63,107,52,.55);background:rgba(63,107,52,.12)}
.mkt-btn.good b{color:#38512f}
.mkt-btn.bad{border-color:rgba(122,33,28,.45);background:rgba(122,33,28,.09)}
.mkt-btn.bad b{color:var(--oxblood)}

.mkt-qty{
  width:100%;background:rgba(255,250,232,.7);border:1px solid var(--rule);
  font-family:Cinzel,serif;font-size:.88rem;color:var(--ink);
  padding:.4rem .3rem;text-align:center;
}
.mkt-qty:focus{outline:none;border-color:var(--brass)}

@media(max-width:820px){
  .mkthead{display:none}
  .mktrow{grid-template-columns:minmax(0,1fr) 80px 80px;row-gap:.5rem;padding:.7rem .8rem}
  .mkt-good{grid-column:1 / -1}
  .mkt-num{display:none}
  .mkt-qty{grid-column:1}
}

/* a raid at sea */
.fightbox{position:relative;margin-top:.7rem;max-width:560px}
/* Sits at the top because the foot of the frame belongs to the two ships:
   each hull hangs its name below itself, mine to the left and the pirate to
   the right, so a label along the bottom lands straight on top of one. */
.fightlabel{
  position:absolute;left:.6rem;top:.55rem;z-index:4;
  padding:.24rem .6rem;background:rgba(9,17,23,.66);
  border:1px solid rgba(184,134,43,.35);
  font-family:Cinzel,serif;font-size:.52rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(240,226,189,.86);
}
.fightbox.done .fightlabel{border-color:rgba(63,107,52,.6);color:#bfe0ac}

@keyframes fsRoll{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(-4px) rotate(.9deg)}}

.fs-swell path{animation:fsSwell 14s linear infinite}
@keyframes fsSwell{to{stroke-dashoffset:-160}}

.fs-smoke{animation:fsDrift 9s ease-in-out infinite}
@keyframes fsDrift{0%,100%{transform:translate(0,0);opacity:.18}50%{transform:translate(18px,-10px);opacity:.3}}

.fs-flash circle{opacity:0}
.fs-flash .f1{animation:fsFire 3.1s ease-out infinite}
.fs-flash .f2{animation:fsFire 3.1s ease-out .9s infinite}
.fs-flash .f3{animation:fsFire 3.1s ease-out 1.9s infinite}
@keyframes fsFire{0%{opacity:0;transform:scale(.4)}8%{opacity:1;transform:scale(1.25)}30%{opacity:0;transform:scale(1.6)}100%{opacity:0}}

.fightbox.done .fs-flash{display:none}

@media(prefers-reduced-motion:reduce){
  .fight-ship,.fs-swell path,.fs-smoke,.fs-flash circle{animation:none}
  .fs-flash circle{opacity:.7}
}

/* ==================================================================
   Header on narrow screens

   Nine nav items, a rank bar and two coin readouts wrap to four rows on a
   phone and swallow the viewport. Below 820px the header splits: identity and
   money stay on one line, and the nav drops to its own line that scrolls
   sideways instead of wrapping.

   Everything on the first line is ordered explicitly, including the bell —
   left to the default it sorts as 0 and lands in front of the wordmark. The
   gaps and padding are the whole reason the bar was still thick after the nav
   was tamed: five items on one line pay for four gaps twice over.
   ================================================================== */
@media(max-width:820px){
  .hud-inner{
    flex-wrap:wrap;
    gap:.34rem .45rem;
    padding:.4rem clamp(.6rem,3vw,1rem);
    align-items:center;
  }

  .hud-brand{order:1;font-size:.66rem;letter-spacing:.22em;gap:.45rem}
  .rankbar{order:2}
  .bell{order:3}
  .purse{order:4;margin-left:auto;gap:.35rem}
  .hud-you{order:5;gap:.5rem}

  /* its own row, one line, scrolled rather than wrapped */
  .hud-nav{
    order:6;
    width:100%;
    margin:0;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:1px;
    border-top:1px solid rgba(184,134,43,.18);
    padding-top:.28rem;
  }
  .hud-nav::-webkit-scrollbar{display:none}
  .hud-nav li{flex:none}
  .hud-nav a,.hud-nav span{
    padding:.3rem .5rem;
    font-size:.55rem;
    letter-spacing:.14em;
    white-space:nowrap;
    scroll-margin-inline:1rem;
  }

  /* the coin labels are the first thing that can go */
  .coin{padding:.2rem .36rem;gap:.28rem}
  .coin small{display:none}
  .coin b{font-size:.76rem}
  .coin i{width:15px;height:15px}

  .hud-you a{font-size:.55rem;letter-spacing:.14em}
  .sound{width:26px;height:26px}
  .sound svg{width:15px;height:15px}
}

/* on the smallest screens the wordmark goes too, leaving the ship */
@media(max-width:480px){
  .hud-brand{font-size:0;gap:0}
  .hud-brand img{height:24px}
  .hud-you a{font-size:.5rem;padding:0}
  .coin b{font-size:.72rem}
  .hud-nav a,.hud-nav span{padding:.28rem .44rem;font-size:.52rem}
}

/* The narrowest phones. Profile is a page the nav already carries, so that
   link goes rather than the first line breaking in two. Named rather than
   excluded, because the signed-out bar puts Sign in in the same place. */
@media(max-width:430px){
  .hud-you a[href="profile.php"]{display:none}
}

/* the login page masthead is lighter but still wraps awkwardly */
@media(max-width:640px){
  .masthead{gap:.6rem}
  .wayfinder{gap:.9rem;flex-wrap:wrap}
  .wayfinder a{font-size:.58rem;letter-spacing:.18em}
  .musicbtn{margin-right:.4rem}
}

/* ==================================================================
   Spoken dialogue
   ================================================================== */
.voice{
  display:inline-flex;align-items:center;gap:.34rem;vertical-align:.05em;
  margin-left:.4rem;padding:.16rem .5rem;cursor:pointer;
  border:1px solid rgba(184,134,43,.5);background:rgba(184,134,43,.12);
  color:#6b4a12;font-family:Cinzel,serif;font-size:.5rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  transition:background .16s,border-color .16s;
}
.voice:hover{background:rgba(184,134,43,.26)}
.voice:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.voice svg{width:13px;height:13px;flex:none}
.voice .v-stop{display:none}
.voice.playing{background:rgba(122,33,28,.14);border-color:rgba(122,33,28,.5);color:var(--oxblood)}
.voice.playing .v-play{display:none}
.voice.playing .v-stop{display:block}
.voice audio{display:none}
@media(max-width:520px){.voice-lbl{display:none}.voice{padding:.2rem .38rem}}

/* ==================================================================
   Rate crests and branch letters
   ================================================================== */
.tier-head{display:flex;flex-direction:column;align-items:center;gap:.2rem}
.tier-head .ratecrest{display:block;line-height:0;width:44px}
.tier-head .ratecrest img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 1px 2px rgba(42,31,22,.4))}
.tier-head b{font-weight:inherit}
@media(max-width:820px){.tier-head .ratecrest{width:32px}}

.bh-ico .branchmark{display:block;line-height:0;width:100%;height:100%}
.bh-ico .branchmark img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 1px 2px rgba(42,31,22,.35))}

/* ==================================================================
   Grouped navigation
   ================================================================== */
.navgroup{position:relative}

/* The panel sits a little below the button, and that gap used to break the
   hover: crossing it left the group, so the menu closed before the pointer
   arrived. This invisible bridge spans the gap and is as wide as the panel, so
   the pointer never leaves. It only accepts the pointer while the group is
   already open, so it can never swallow a click meant for the page. */
.navgroup::after{
  content:"";position:absolute;left:0;top:100%;
  width:100%;min-width:210px;height:.7rem;
  pointer-events:none;
}
.navgroup:hover::after,
.navgroup:focus-within::after,
.navgroup.open::after{pointer-events:auto}
.navtop{
  display:flex;align-items:center;gap:.4rem;cursor:pointer;
  background:none;border:0;
  /* the same padding as a plain nav link, or the groups crowd together */
  padding:.42rem .6rem;
  font-family:Cinzel,serif;font-size:.6rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(232,216,176,.62);transition:color .2s;
}
.navtop svg{width:9px;height:6px;opacity:.7;transition:transform .2s}
.navtop:hover,.navgroup:focus-within .navtop{color:#f2e6c6}
.navgroup.here .navtop{color:#f7ecd0}
.navgroup.here .navtop::after{
  /* inset must track the padding above, or the mark sits wider than its label */
  content:"";position:absolute;left:.6rem;right:.6rem;bottom:.28rem;
  height:2px;background:var(--brass);
}
.navgroup.open .navtop svg{transform:rotate(180deg)}

.navdrop{
  position:absolute;top:100%;left:0;z-index:40;min-width:210px;
  margin-top:.55rem;padding:.35rem;
  background:linear-gradient(160deg,#16262e,#0d1a21);
  border:1px solid rgba(184,134,43,.4);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s .12s,transform .16s .12s,visibility .16s .12s;
}
.navgroup:hover .navdrop,
.navgroup:focus-within .navdrop,
.navgroup.open .navdrop{
  opacity:1;visibility:visible;transform:translateY(0);
  transition-delay:0s;            /* open at once, close after a moment */
}

.navdrop a{
  display:block;padding:.45rem .6rem;text-decoration:none;
  border-left:2px solid transparent;transition:background .14s,border-color .14s;
}
.navdrop a:hover{background:rgba(240,226,189,.08);border-left-color:var(--brass)}
.navdrop a.on{background:rgba(184,134,43,.18);border-left-color:var(--brass-lift)}
.navdrop b{
  display:block;font-family:Cinzel,serif;font-size:.6rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(240,226,189,.9);
}
.navdrop em{
  display:block;font-size:.78rem;font-style:italic;
  color:rgba(240,226,189,.45);margin-top:.12rem;line-height:1.3;
}

/* on a phone the groups open in place rather than floating */
@media(max-width:820px){
  .navtop{font-size:.55rem;letter-spacing:.14em;padding:.34rem .6rem;gap:.3rem}
  .navgroup.here .navtop::after{display:none}
  .navgroup::after{display:none}
  .navdrop{
    position:fixed;left:.5rem;right:.5rem;top:auto;min-width:0;
    margin-top:.4rem;max-height:60vh;overflow-y:auto;
  }
}

/* ==================================================================
   Standings
   ================================================================== */
.lbhead{
  position:relative;overflow:hidden;
  margin-bottom:1.1rem;padding:clamp(1.4rem,4vw,2.6rem) clamp(1.1rem,3vw,2rem);
  background:
    radial-gradient(80% 120% at 12% 0%,rgba(184,134,43,.22),transparent 62%),
    linear-gradient(150deg,#16262e,#0c1a21 70%);
  border:1px solid rgba(184,134,43,.34);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.9);
}
.lbhead::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--grain);opacity:.16;mix-blend-mode:overlay;
}
.lbhead-in{position:relative;z-index:1}
.lbeyebrow{
  font-family:Cinzel,serif;font-size:.54rem;font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;color:var(--brass-lift);
}
.lbhead h1{
  font-family:Cinzel,serif;font-size:clamp(1.7rem,4.5vw,2.6rem);font-weight:700;
  letter-spacing:.09em;color:#f4e8ca;margin:.4rem 0 .3rem;line-height:1;
}
.lblede{font-style:italic;color:rgba(240,226,189,.62);max-width:52ch;line-height:1.55}

/* --- board selector --- */
.lbtabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:1px;
        background:rgba(60,42,16,.28);border:1px solid rgba(60,42,16,.3);margin-bottom:1.4rem}
.lbtabs a{
  display:flex;flex-direction:column;align-items:center;gap:.34rem;
  padding:.8rem .4rem;text-decoration:none;
  background:rgba(255,250,232,.42);color:var(--ink-soft);
  font-family:Cinzel,serif;font-size:.54rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  transition:background .16s,color .16s,box-shadow .16s;
}
.lbtabs a svg{width:18px;height:18px;opacity:.7;transition:opacity .16s}
.lbtabs a:hover{background:rgba(255,250,232,.75);color:var(--ink)}
.lbtabs a:hover svg{opacity:1}
.lbtabs a.on{
  background:linear-gradient(180deg,#f7ecd0,#e4d0a4);color:#5c3f10;
  box-shadow:inset 0 -3px 0 var(--brass);
}
.lbtabs a.on svg{opacity:1}

/* --- the board --- */
.lbboard{
  background:linear-gradient(160deg,var(--vellum),var(--vellum-edge));
  border:1px solid rgba(60,42,16,.3);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.7);
}
.lbboard-head{padding:clamp(1rem,2.4vw,1.6rem);border-bottom:1px solid var(--rule)}
.lbboard-head h2{
  font-family:Cinzel,serif;font-size:1.15rem;font-weight:600;letter-spacing:.1em;
  color:#22180f;margin:0;
}
.lbboard-head p{font-style:italic;color:var(--ink-soft);margin-top:.3rem;max-width:64ch}
.lbcount{
  display:inline-block;margin-top:.6rem;padding:.16rem .55rem;
  background:rgba(42,31,22,.07);border:1px solid var(--rule);
  font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.2em;
  text-transform:uppercase;color:#8a6420;
}

/* --- podium --- */
.podium{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,2vw,1.4rem);
  align-items:end;padding:clamp(1.2rem,3vw,2rem) clamp(1rem,2.4vw,1.6rem);
  background:
    radial-gradient(70% 90% at 50% 0%,rgba(184,134,43,.14),transparent 70%),
    rgba(42,31,22,.04);
  border-bottom:1px solid var(--rule);
}
.pod{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:1.1rem .7rem .9rem;
  background:rgba(255,250,232,.6);border:1px solid var(--rule);
}
.pod.gold{order:2;padding-top:1.7rem;border-color:rgba(184,134,43,.75);
  background:linear-gradient(180deg,rgba(240,205,106,.24),rgba(255,250,232,.72));
  box-shadow:0 12px 30px -18px rgba(120,86,20,.9)}
.pod.silver{order:1;background:linear-gradient(180deg,rgba(186,192,196,.26),rgba(255,250,232,.65))}
.pod.bronze{order:3;background:linear-gradient(180deg,rgba(176,124,86,.24),rgba(255,250,232,.65))}
.pod.mine{box-shadow:inset 0 0 0 2px var(--brass)}

.pod-medal{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  font-family:Cinzel,serif;font-size:.85rem;font-weight:700;color:#2a1f16;
  border:1px solid rgba(60,42,16,.5);
}
.pod.gold .pod-medal{background:radial-gradient(circle at 34% 30%,#f6dc94,#c99a2e)}
.pod.silver .pod-medal{background:radial-gradient(circle at 34% 30%,#eef1f3,#a8b0b6)}
.pod.bronze .pod-medal{background:radial-gradient(circle at 34% 30%,#e6b992,#a9713f)}

.pod-face{display:block;width:clamp(56px,9vw,84px);margin-bottom:.55rem}
.pod-face img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%;
  display:block;border:1px solid rgba(60,42,16,.45)}
.pod.gold .pod-face{width:clamp(66px,11vw,104px)}
.pod-name{font-family:Cinzel,serif;font-size:.86rem;font-weight:600;letter-spacing:.04em;
  color:#22180f;text-decoration:none;line-height:1.2;word-break:break-word}
.pod-name:hover{color:#8a6420}
.pod-guild{font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.16em;color:var(--ink-faint);margin-top:.15rem}
.pod-score{display:block;margin-top:.5rem;font-family:Cinzel,serif;font-size:1.05rem;color:#5c3f10}
.pod.gold .pod-score{font-size:1.25rem}
.pod-sub{font-size:.78rem;font-style:italic;color:var(--ink-faint);margin-top:.1rem}

@media(max-width:560px){
  .podium{grid-template-columns:1fr}
  .pod,.pod.gold,.pod.silver,.pod.bronze{order:0;padding-top:1.7rem}
}

/* --- the rest of the table --- */
.lbtable{list-style:none;margin:0;padding:0}
.lbtable li{
  display:grid;grid-template-columns:52px 40px minmax(0,1fr) auto;
  gap:.85rem;align-items:center;
  padding:.55rem clamp(1rem,2.4vw,1.6rem);
  border-bottom:1px solid rgba(42,31,22,.1);
  transition:background .14s;
}
.lbtable li:nth-child(even){background:rgba(42,31,22,.035)}
.lbtable li:hover{background:rgba(255,250,232,.6)}
.lbtable li:last-child{border-bottom:0}
.lbtable li.mine{background:rgba(184,134,43,.16);box-shadow:inset 3px 0 0 var(--brass)}
.lbtable li.medal.m1{background:linear-gradient(90deg,rgba(240,205,106,.2),transparent 60%)}
.lbtable li.medal.m2{background:linear-gradient(90deg,rgba(186,192,196,.2),transparent 60%)}
.lbtable li.medal.m3{background:linear-gradient(90deg,rgba(176,124,86,.2),transparent 60%)}

.lbplace{font-family:Cinzel,serif;font-size:.95rem;color:var(--ink-faint);text-align:center}
.lbface{display:block;width:40px;height:40px;overflow:hidden;
  border:1px solid var(--rule);background:rgba(42,31,22,.05)}
.lbface img{width:40px;height:40px;object-fit:cover;object-position:50% 16%;display:block}
.lbcrest{display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--rule);background:rgba(42,31,22,.05)}
.lbcrest img{max-width:100%;max-height:100%;display:block}
.lbcrest b{font-family:Cinzel,serif;font-size:.62rem;letter-spacing:.06em;color:#5c3f10}

.lbwho{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem}
.lbwho a{font-family:Cinzel,serif;font-size:.92rem;font-weight:600;color:var(--ink);text-decoration:none}
.lbwho a:hover{color:#8a6420}
.lbwho em{flex-basis:100%;font-size:.78rem;font-style:italic;color:var(--ink-soft)}
.lbtag{font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.14em;color:var(--ink-faint)}
.lbdot{width:7px;height:7px;border-radius:50%;background:#4a6846;
  box-shadow:0 0 0 2px rgba(74,104,70,.24)}

.lbscore{text-align:right;font-family:Cinzel,serif;font-size:.98rem;color:#5c3f10;white-space:nowrap}
.lbscore em{display:block;font-family:"IM Fell English",Georgia,serif;font-size:.76rem;
  font-style:italic;color:var(--ink-faint);margin-top:.1rem}
.lbempty{padding:1.4rem;text-align:center;font-style:italic;color:var(--ink-soft)}

/* your own line, kept in view */
.lbyou{
  position:sticky;bottom:0;z-index:5;
  display:grid;grid-template-columns:52px 40px minmax(0,1fr) auto;
  gap:.85rem;align-items:center;
  padding:.6rem clamp(1rem,2.4vw,1.6rem);
  background:linear-gradient(180deg,#f4e6c2,#e6d3a6);
  border-top:2px solid var(--brass);
}
.lbyou.onpodium{display:none}
.lbyou .lbwho em{flex-basis:100%;color:#8a6420;font-style:italic}

@media(max-width:640px){
  .lbtable li,.lbyou{grid-template-columns:38px 34px minmax(0,1fr);row-gap:.35rem}
  .lbface,.lbcrest{width:34px;height:34px}
  .lbface img{width:34px;height:34px}
  .lbscore{grid-column:2 / -1;text-align:left}
}

/* ==================================================================
   The Devil's Triangle
   ================================================================== */
.dthead{
  position:relative;overflow:hidden;
  padding:clamp(1.4rem,4vw,2.6rem) clamp(1.1rem,3vw,2rem);
  background:
    radial-gradient(90% 130% at 80% 0%,rgba(122,33,28,.35),transparent 60%),
    linear-gradient(150deg,#1d1519,#0a1116 72%);
  border:1px solid rgba(122,33,28,.45);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.95);
}
.dthead::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--grain);opacity:.2;mix-blend-mode:overlay}
.dthead-in{position:relative;z-index:1}
.dthead h1{font-family:Cinzel,serif;font-size:clamp(1.7rem,4.5vw,2.6rem);font-weight:700;
  letter-spacing:.09em;color:#f4e8ca;margin:.4rem 0 .3rem;line-height:1}

.dtstats{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.1rem}
.dtstats span{
  display:flex;flex-direction:column;gap:.1rem;padding:.45rem .75rem;
  background:rgba(240,226,189,.07);border:1px solid rgba(240,226,189,.2);
  font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(240,226,189,.6);
}
.dtstats b{font-size:1rem;letter-spacing:.02em;color:#f0e2bd}
.dtstats .bad{border-color:rgba(200,90,70,.5)}
.dtstats .bad b{color:#e8917a}
.dtstats .good{border-color:rgba(120,170,110,.45)}
.dtstats .good b{color:#a9d69a}

.dtmine{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1.1rem;align-items:center}
@media(max-width:640px){.dtmine{grid-template-columns:1fr}}
.dtship .shipthumb img{width:100%;height:auto;object-fit:contain}

.dtfoe{display:grid;grid-template-columns:76px minmax(0,1fr);gap:1rem;align-items:start;
  padding:1rem 0;border-bottom:1px solid var(--rule)}
.dtfoe:last-child{border-bottom:0}
.dtfoe.dim{opacity:.55}
.dtface{display:block}
.dtface img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 4px 10px rgba(42,31,22,.4))}
.dtbody{min-width:0}

.dtodds{display:flex;align-items:center;gap:.6rem;margin:.6rem 0 .7rem;max-width:340px;
  font-size:.88rem;color:var(--ink-soft)}
.dtbar{flex:1;height:6px;background:rgba(42,31,22,.14);border:1px solid var(--rule);overflow:hidden}
.dtbar i{display:block;height:100%;background:linear-gradient(90deg,var(--oxblood),var(--brass))}
.dtodds b{font-family:Cinzel,serif;font-size:.95rem;color:#22180f}

.dtlog{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.dtlog li{display:grid;grid-template-columns:118px minmax(0,1fr);gap:.8rem;
  background:rgba(255,250,232,.45);padding:.5rem .8rem;font-size:.92rem;line-height:1.4}
.dtlog .when{font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.16em;
  text-transform:uppercase;color:#8a6420}
@media(max-width:560px){.dtlog li{grid-template-columns:1fr}}
.hull-body{min-width:0}

/* ==================================================================
   The black market
   ================================================================== */
.bmhead{
  position:relative;overflow:hidden;
  padding:clamp(1.4rem,4vw,2.6rem) clamp(1.1rem,3vw,2rem);
  background:
    radial-gradient(85% 130% at 15% 0%,rgba(74,54,90,.4),transparent 62%),
    linear-gradient(150deg,#191320,#0b0e14 72%);
  border:1px solid rgba(150,120,180,.3);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.95);
}
.bmhead::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--grain);opacity:.2;mix-blend-mode:overlay}
.bmhead-in{position:relative;z-index:1}
.bmhead h1{font-family:Cinzel,serif;font-size:clamp(1.7rem,4.5vw,2.6rem);font-weight:700;
  letter-spacing:.09em;color:#f4e8ca;margin:.4rem 0 .3rem;line-height:1}
.bmpurse{display:flex;gap:.5rem;margin-top:1.1rem}
.bmpurse span{display:flex;flex-direction:column;gap:.1rem;padding:.45rem .8rem;
  background:rgba(240,226,189,.07);border:1px solid rgba(240,226,189,.24);
  font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(240,226,189,.6)}
.bmpurse b{font-size:1.15rem;letter-spacing:.02em;color:#e8d8b0}

/* auto-fit, not auto-fill: three consignments in a row that would hold four
   left an empty track, and since the grid's own background is what draws the
   rules between cards, that track showed as a grey slab beside them. */
.bmgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.bmitem{display:flex;flex-direction:column;background:rgba(255,250,232,.5);padding:.9rem}
/* Optional art for a counting-house product. The band keeps its shape whatever
   the picture's own proportions are, and crops from the middle rather than
   stretching, so a mixed set of art still lines up across the grid. */
.bmshot{display:block;line-height:0;overflow:hidden;margin:-.9rem -.9rem .8rem;
  aspect-ratio:16/9;max-height:150px;background:#16262e}
.bmshot img{display:block;width:100%;height:100%;object-fit:cover}
.bmitem.dim{opacity:.55}
.bmname{font-family:Cinzel,serif;font-size:.85rem;font-weight:600;letter-spacing:.05em;color:#22180f}
.bmnote{font-size:.9rem;font-style:italic;line-height:1.5;color:var(--ink-soft);margin:.4rem 0 .7rem;flex:1}
.bmcost{font-family:Cinzel,serif;font-size:.55rem;letter-spacing:.16em;
  text-transform:uppercase;color:#8a6420;margin-bottom:.7rem}
.bmcost b{font-size:1rem;letter-spacing:.02em;color:var(--ink)}
.bmcost em{font-style:italic;text-transform:none;letter-spacing:0;color:var(--ink-faint)}

/* What a thing used to cost, and what has come off it. */
.bmcost s{margin-left:.4rem;text-decoration:line-through;
  letter-spacing:.02em;color:var(--ink-faint)}
.bmoff{
  display:inline-block;margin-left:.4rem;padding:.1rem .34rem;
  font-family:Cinzel,serif;font-size:.5rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#f6ecd2;background:var(--oxblood);
}
/* Said before the coin is spent, because a consignment that cannot be landed
   is refused rather than tipped over the side. */
.bmroom{
  margin:0 0 .6rem;padding:.4rem .6rem;
  background:rgba(122,33,28,.16);border-left:2px solid var(--oxblood);
  font-size:.82rem;font-style:italic;line-height:1.4;color:rgba(240,226,189,.78);
}

/* The sale banner. The art carries the word SALE itself, so the panel beside
   it only has to say what is off and until when. Without the art the panel
   stands on its own and the eyebrow does the announcing. */
.salebanner{
  display:flex;align-items:center;gap:clamp(.8rem,2.5vw,1.8rem);flex-wrap:wrap;
  margin-top:1.4rem;padding:clamp(.9rem,2vw,1.4rem) clamp(1rem,2.5vw,1.6rem);
  background:radial-gradient(70% 120% at 20% 0%,rgba(184,134,43,.24),transparent 64%),
             linear-gradient(150deg,#1d2b25,#0d1219 76%);
  border:1px solid rgba(184,134,43,.42);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.9);
}
.salebanner-art{flex:none;line-height:0;width:clamp(150px,26vw,260px)}
.salebanner-art img{display:block;width:100%;height:auto}
.salebanner-in{flex:1 1 260px;min-width:0}
.salebanner.plain{justify-content:center;text-align:center}

.salebanner-list{list-style:none;margin:.45rem 0 0;padding:0}
.salebanner-list li{
  padding:.3rem 0;font-size:.98rem;line-height:1.4;color:rgba(240,226,189,.82);
  border-bottom:1px solid rgba(184,134,43,.2);
}
.salebanner-list li:last-child{border-bottom:0}
.salebanner-list b{font-family:Cinzel,serif;font-size:1.05rem;letter-spacing:.03em;
  color:var(--brass-lift);margin-right:.25rem}
.salebanner-list em{display:block;font-style:italic;font-size:.84rem;
  color:rgba(240,226,189,.5);margin-top:.1rem}

/* The coupon bar: one field when nothing is applied, the code and what it
   is worth once something is. */
.couponbar{padding:.85rem 1rem}
.coupon-off{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.coupon-off .mini{flex:none}
.coupon-off .pick2{flex:1 1 180px;min-width:0;max-width:260px}
.coupon-off .raise{flex:none}
.coupon-on{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.coupon-on p{flex:1 1 220px;font-size:.9rem;line-height:1.45;color:var(--ink-soft)}
.coupon-on p b{font-family:Cinzel,serif;font-size:.9rem;color:#5c3f10}
.coupon-tag{
  flex:none;padding:.3rem .6rem;
  font-family:Cinzel,serif;font-size:.62rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#5c3f10;
  background:rgba(184,134,43,.2);border:1px dashed var(--brass);
}

/* What a consignment holds, read before paying rather than after. */
.bmodds{margin-bottom:.7rem}
.bmodds > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.3rem;
  font-family:Cinzel,serif;font-size:.5rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#8a6420;
  padding:.3rem .5rem;border:1px solid var(--rule);
}
.bmodds > summary::-webkit-details-marker{display:none}
.bmodds > summary::after{content:"▾";font-size:.7rem;line-height:1}
.bmodds[open] > summary::after{content:"▴"}
.bmodds > summary:hover{border-color:var(--brass);color:#5c3f10;background:rgba(184,134,43,.1)}
.bmodds ul{list-style:none;margin:.5rem 0 0;padding:0;
  border:1px solid var(--rule);background:rgba(255,250,232,.4)}
.bmodds li{display:flex;justify-content:space-between;gap:.7rem;align-items:baseline;
  padding:.3rem .5rem;font-size:.86rem;line-height:1.35;color:var(--ink-soft);
  border-bottom:1px solid rgba(42,31,22,.08)}
.bmodds li:last-child{border-bottom:0}
.bmodds li b{font-family:Cinzel,serif;font-size:.8rem;color:var(--ink);flex:none}
.bmodds li.ship{color:#5c3f10}
.bmodds li.ship b{color:var(--brass)}
/* The rarest line in the sheet, and the one a captain is reading for. */
.bmodds li.premium{color:#5a3a6b;font-weight:600}
.bmodds li.premium b{color:#7a4f92}

.boons{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.boon{background:rgba(255,250,232,.5);padding:.7rem .8rem;border-left:3px solid var(--brass)}
.boon.forever{border-left-color:var(--moss)}
.boon b{display:block;font-family:Cinzel,serif;font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#22180f}
.boon em{display:block;font-size:.84rem;font-style:italic;color:var(--ink-soft);margin:.2rem 0 .35rem}
.boon span{font-family:Cinzel,serif;font-size:.55rem;letter-spacing:.16em;
  text-transform:uppercase;color:#8a6420}

/* The same boons said in one line, for the chart and the port. These sit on
   the dark page rather than on parchment, so they take the light-on-dark
   treatment the nav uses. */
.boonstrip{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem}
.boonchip{
  display:inline-flex;align-items:baseline;gap:.45rem;
  padding:.34rem .7rem;
  background:rgba(184,134,43,.16);border:1px solid rgba(184,134,43,.42);
}
.boonchip b{font-family:Cinzel,serif;font-size:.56rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass-lift)}
.boonchip em{font-style:italic;font-size:.82rem;color:rgba(240,226,189,.66)}
/* In the chart's side panel it floats over the map itself rather than over a
   panel, and the chart runs from open sea to land, so it takes a solid ground
   of its own instead of trusting whatever is beneath it. */
.chart-side .boonstrip{margin-bottom:.7rem}
.chart-side .boonchip{background:rgba(9,17,23,.9);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.9)}
.hull-yard{margin:.5rem 0;font-family:Cinzel,serif;font-size:.55rem;letter-spacing:.16em;
  text-transform:uppercase;color:#8a6420}
.hull-risk{margin:.5rem 0;font-size:.88rem;font-style:italic;color:var(--oxblood)}

/* ==================================================================
   Notices
   ================================================================== */
.bell{position:relative}
.bell-btn{
  position:relative;display:grid;place-items:center;width:32px;height:32px;cursor:pointer;
  background:rgba(240,226,189,.07);border:1px solid rgba(240,226,189,.22);
  color:rgba(240,226,189,.7);padding:0;transition:color .18s,border-color .18s,background .18s;
}
.bell-btn:hover{color:#f2e6c6;border-color:var(--brass);background:rgba(240,226,189,.14)}
.bell-btn svg{width:16px;height:16px}
.bell-count{
  position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 3px;
  display:grid;place-items:center;border-radius:8px;
  background:var(--oxblood);color:#f6e7c6;
  font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.02em;
  border:1px solid rgba(9,17,23,.8);
}
.bell-drop{
  position:absolute;top:100%;right:0;z-index:60;width:min(340px,calc(100vw - 2rem));
  margin-top:.5rem;
  background:linear-gradient(160deg,#16262e,#0d1a21);
  border:1px solid rgba(184,134,43,.4);
  box-shadow:0 18px 44px -16px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s,transform .16s,visibility .16s;
}
.bell.open .bell-drop{opacity:1;visibility:visible;transform:translateY(0)}
.bell-head{
  padding:.55rem .8rem;border-bottom:1px solid rgba(184,134,43,.25);
  font-family:Cinzel,serif;font-size:.52rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass-lift);
}
.bell-list{max-height:min(56vh,420px);overflow-y:auto;scrollbar-width:thin}
.notice-row{
  display:block;padding:.6rem .8rem;text-decoration:none;
  border-bottom:1px solid rgba(240,226,189,.08);border-left:2px solid transparent;
}
.notice-row:last-child{border-bottom:0}
a.notice-row:hover{background:rgba(240,226,189,.07)}
.notice-row.fresh{border-left-color:var(--brass);background:rgba(184,134,43,.09)}
.notice-row b{display:block;font-family:Cinzel,serif;font-size:.68rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(240,226,189,.92);line-height:1.35}
.notice-row em{display:block;font-size:.86rem;font-style:italic;
  color:rgba(240,226,189,.55);margin-top:.2rem;line-height:1.4}
.notice-row span{display:block;font-family:Cinzel,serif;font-size:.46rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(240,226,189,.34);margin-top:.3rem}
.bell-clear{border-top:1px solid rgba(184,134,43,.25)}
.bell-clear button{
  width:100%;padding:.5rem;cursor:pointer;background:none;border:0;
  font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(240,226,189,.55);
}
.bell-clear button:hover{color:#f2e6c6;background:rgba(240,226,189,.07)}
/* On a phone the bell sits well within the panel's own width of the left
   edge, so anchoring it to the button pushed it off screen. It is pinned to
   the viewport instead, and the script sets its top from the button's actual
   position because the header wraps to different heights. */
@media(max-width:820px){
  .bell-btn{width:28px;height:28px}
  .bell-btn svg{width:14px;height:14px}
  .bell-drop{
    position:fixed;
    top:var(--bell-top,56px);
    left:.5rem;right:.5rem;
    width:auto;max-width:none;
    margin-top:0;
    max-height:calc(100vh - var(--bell-top,56px) - 1rem);
    display:flex;flex-direction:column;
  }
  .bell-list{max-height:none;flex:1;min-height:0}
  .bell-head{position:sticky;top:0;background:#16262e;z-index:1}
}
.hull-move{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;margin-top:.7rem}
.hull-move .lbl{font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.2em;
  text-transform:uppercase;color:#8a6420}
.hull-move select,.hull-move input{max-width:220px}

/* ==================================================================
   The verdict on a beaten captain
   ================================================================== */
.verdict{
  margin-top:1.4rem;padding:clamp(1.2rem,3vw,2rem);
  background:radial-gradient(80% 120% at 20% 0%,rgba(184,134,43,.2),transparent 62%),
             linear-gradient(150deg,#1d1519,#0b1116 72%);
  border:1px solid rgba(184,134,43,.45);
}
.verdict h2{font-family:Cinzel,serif;font-size:1.4rem;font-weight:700;letter-spacing:.06em;
  color:#f4e8ca;margin:.3rem 0}
.verdicts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.7rem;margin-top:1.2rem}
.verdict-card{
  display:flex;flex-direction:column;padding:.9rem;
  background:rgba(240,226,189,.06);border:1px solid rgba(240,226,189,.22);
  transition:border-color .16s,background .16s;
}
.verdict-card:hover{border-color:var(--brass);background:rgba(240,226,189,.11)}
.verdict-card b{font-family:Cinzel,serif;font-size:.8rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#f0e2bd}
.verdict-card em{font-size:.88rem;font-style:italic;color:rgba(240,226,189,.6);
  margin:.35rem 0 .6rem;line-height:1.45}
.verdict-card ul{list-style:none;margin:0 0 .8rem;padding:0;flex:1}
.verdict-card li{font-family:Cinzel,serif;font-size:.52rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(240,226,189,.5);padding:.15rem 0}

/* the energy pool sits beside the coin readouts and shows how full it is */
.coin.energy{position:relative;overflow:hidden}
.coin.energy i{background-image:url("img/coin-energy.png")}
.coin.energy s{
  position:absolute;left:0;bottom:0;height:2px;
  background:var(--brass-lift);text-decoration:none;
  transition:width .6s ease;
}
.coin.energy.low b{color:#e8917a}
.coin.energy.low s{background:var(--oxblood)}

.chhead{
  position:relative;overflow:hidden;
  padding:clamp(1.4rem,4vw,2.6rem) clamp(1.1rem,3vw,2rem);
  background:radial-gradient(85% 130% at 18% 0%,rgba(184,134,43,.3),transparent 62%),
             linear-gradient(150deg,#1b2027,#0b1016 72%);
  border:1px solid rgba(184,134,43,.42);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.95);
}
.chhead::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--grain);opacity:.18;mix-blend-mode:overlay}
.chhead-in{position:relative;z-index:1}
.chhead h1{font-family:Cinzel,serif;font-size:clamp(1.7rem,4.5vw,2.6rem);font-weight:700;
  letter-spacing:.09em;color:#f4e8ca;margin:.4rem 0 .3rem;line-height:1}

/* ==================================================================
   The Crown Charter badge
   ================================================================== */
.charter-badge{display:inline-block;line-height:0;vertical-align:-.18em;margin-left:.3rem;flex:none}
.charter-badge img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 1px 3px rgba(42,31,22,.5))}
.charter-badge.sm{width:18px}
.charter-badge:not(.sm){width:40px;vertical-align:-.3em;margin-left:.5rem}

/* beside a name in the chat dock */
.chat-vip{width:15px;height:15px;object-fit:contain;flex:none;margin-left:.15rem;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}

/* on a dark header the drop shadow needs to go the other way */
.dthead .charter-badge img,.chhead .charter-badge img,.lbhead .charter-badge img,
.pod .charter-badge img{filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}

@media(max-width:520px){.charter-badge.sm{width:15px}}


/* Nothing in a page should be able to widen the document. Where something
   genuinely needs more room — the ship tree — it scrolls inside its own box
   rather than pushing the whole page out. This is the backstop. */
html,body{max-width:100%;overflow-x:hidden}

/* ==================================================================
   Site footer
   ================================================================== */
.sitefoot{
  margin-top:2.4rem;
  background:linear-gradient(160deg,#16262e,#0b1219);
  border-top:1px solid rgba(184,134,43,.32);
}
.sitefoot-in{
  display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;
  max-width:1180px;margin:0 auto;
  padding:1.6rem clamp(1rem,3vw,2rem) 1.1rem;
}

.ft-brand{display:flex;align-items:center;gap:.7rem;margin-right:auto;min-width:0}
.ft-brand img{width:30px;height:auto;display:block;opacity:.9}
.ft-brand b{
  display:block;font-family:Cinzel,serif;font-size:.72rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:#f0e2bd;
}
.ft-brand em{
  display:block;font-size:.84rem;font-style:italic;
  color:rgba(240,226,189,.45);margin-top:.15rem;
}

.ft-links{display:flex;gap:1.1rem;flex-wrap:wrap}
.ft-links a{
  text-decoration:none;font-family:Cinzel,serif;font-size:.55rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(240,226,189,.5);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:color .18s,border-color .18s;
}
.ft-links a:hover{color:#f2e6c6;border-bottom-color:var(--brass)}

.ft-social{display:flex;gap:.5rem}
.ft-out{
  display:inline-flex;align-items:center;gap:.42rem;
  padding:.42rem .8rem;text-decoration:none;
  background:rgba(240,226,189,.06);border:1px solid rgba(240,226,189,.2);
  color:rgba(240,226,189,.72);
  font-family:Cinzel,serif;font-size:.55rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  transition:color .18s,border-color .18s,background .18s;
}
.ft-out svg{width:16px;height:16px;flex:none}
.ft-out:hover{color:#fff;border-color:#5865f2;background:rgba(88,101,242,.22)}
.ft-out:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

.ft-fine{
  max-width:1180px;margin:0 auto;
  padding:0 clamp(1rem,3vw,2rem) 1.5rem;
  font-size:.8rem;font-style:italic;color:rgba(240,226,189,.3);
}

@media(max-width:720px){
  .sitefoot-in{gap:1rem;padding-top:1.3rem}
  .ft-brand{margin-right:0;flex-basis:100%}
  .ft-links{gap:.85rem}
  .ft-links a{font-size:.5rem;letter-spacing:.16em}
}

/* The chat dock is fixed to the bottom-right, so the footer keeps clear of it:
   on a wide screen the dock is 360px of that corner, and on a phone it spans
   the full width. Without this the Discord button sits underneath it. */
.sitefoot{padding-bottom:3.2rem}
@media(min-width:721px){
  .sitefoot-in{padding-right:calc(min(360px, 100vw - 2rem) + 2rem)}
}
@media(max-width:720px){
  .sitefoot{padding-bottom:4rem}
}

/* the install offer, shown only where it can actually do something */
.ft-install{display:flex}
/* [hidden] alone loses to the rule above, and the button it leaves behind has
   no handler bound to it — so the class does the hiding. */
.ft-install.is-installed{display:none}
/* the real dialog is available, not just the written steps */
.ft-out.ready{border-color:var(--brass);color:#f2e6c6}

/* Any rule that sets display beats the browser's own [hidden]{display:none},
   which is how the install button stayed on screen after the script hid it —
   visible, but with no prompt behind it. These put that back. */
[hidden]{display:none !important}
#install-btn{cursor:pointer;font:inherit;font-family:Cinzel,serif;font-size:.55rem;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase}
#install-btn:hover{color:#fff;border-color:var(--brass-lift);background:rgba(184,134,43,.24)}
.ft-hint{
  max-width:230px;padding:.42rem .8rem;
  background:rgba(240,226,189,.06);border:1px solid rgba(240,226,189,.2);
  font-size:.82rem;font-style:italic;line-height:1.4;color:rgba(240,226,189,.6);
}
.ft-hint b{
  display:block;font-family:Cinzel,serif;font-size:.55rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;font-style:normal;
  color:rgba(240,226,189,.85);margin-bottom:.15rem;
}
.ft-hint em{color:#f0e2bd;font-style:normal}

/* ==================================================================
   Install sheet
   ================================================================== */
.installsheet{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:1rem;background:rgba(6,12,17,.78);
}
.installsheet-card{
  position:relative;width:min(420px,100%);max-height:86vh;overflow-y:auto;
  padding:clamp(1.3rem,4vw,2rem);
  background:linear-gradient(160deg,#1a2a33,#0c1720);
  border:1px solid rgba(184,134,43,.5);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9);
}
.installsheet-card h2{
  font-family:Cinzel,serif;font-size:1.35rem;font-weight:700;letter-spacing:.06em;
  color:#f4e8ca;margin:.3rem 0 .6rem;
}
.installsheet-note{font-style:italic;line-height:1.55;color:rgba(240,226,189,.6)}
.installsheet-steps{margin:1.1rem 0 0;padding:0;list-style:none;counter-reset:step}
.installsheet-steps li{
  counter-increment:step;position:relative;
  padding:.6rem 0 .6rem 2.4rem;
  border-top:1px solid rgba(240,226,189,.1);
  line-height:1.55;color:rgba(240,226,189,.82);
}
.installsheet-steps li::before{
  content:counter(step);position:absolute;left:0;top:.55rem;
  width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  background:rgba(184,134,43,.2);border:1px solid rgba(184,134,43,.55);
  font-family:Cinzel,serif;font-size:.7rem;color:var(--brass-lift);
}
.installsheet-steps b{color:#f0e2bd;font-weight:600}
.installsheet-x{
  position:absolute;top:.5rem;right:.7rem;cursor:pointer;
  background:none;border:0;font-size:1.6rem;line-height:1;
  color:rgba(240,226,189,.5);padding:.2rem .4rem;
}
.installsheet-x:hover{color:#f4e8ca}

.installsheet-why{
  margin-top:1.1rem;padding:.8rem .9rem;
  background:rgba(122,33,28,.16);border:1px solid rgba(200,90,70,.4);
}
.installsheet-why b{
  display:block;font-family:Cinzel,serif;font-size:.52rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#e8917a;margin-bottom:.4rem;
}
.installsheet-why ul{margin:0;padding-left:1.1rem}
/* The facts behind the guess. Folded away by default — it is for reporting a
   problem, not for the player who only wants the three steps. */
.installsheet-facts{margin-top:.9rem;border-top:1px solid rgba(184,134,43,.22);padding-top:.7rem}
.installsheet-facts > summary{cursor:pointer;font-family:Cinzel,serif;font-size:.55rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(240,226,189,.5)}
.installsheet-facts > summary:hover{color:rgba(240,226,189,.8)}
.installsheet-facts dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;margin:.6rem 0 0}
.installsheet-facts dt{font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(240,226,189,.45);padding-top:.15rem}
.installsheet-facts dd{margin:0;font-size:.82rem;color:rgba(240,226,189,.78);
  word-break:break-word;line-height:1.4}
.installsheet-facts dd.bad{color:#e8917a}
.installsheet-why li{font-size:.88rem;line-height:1.5;color:rgba(240,226,189,.72);padding:.1rem 0}

/* ==================================================================
   The fleet — grouped by rate, one line a ship
   ================================================================== */
.fleethead{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin-bottom:.9rem}
.fleetcount{margin-left:auto;font-family:Cinzel,serif;font-size:.52rem;letter-spacing:.18em;
  text-transform:uppercase;color:#8a6420}

.rategroup{border-top:1px solid var(--rule)}
.rategroup:last-of-type{border-bottom:1px solid var(--rule)}
.rategroup > summary{
  display:flex;align-items:center;gap:.7rem;cursor:pointer;list-style:none;
  padding:.6rem .2rem;
}
.rategroup > summary::-webkit-details-marker{display:none}
.rategroup > summary::after{
  content:"";margin-left:auto;width:8px;height:8px;flex:none;
  border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);
  transform:rotate(45deg);transition:transform .2s;
}
.rategroup[open] > summary::after{transform:rotate(-135deg)}
.rategroup > summary:hover{background:rgba(255,250,232,.4)}
.rategroup .ratecrest{width:26px;flex:none}
.rategroup .ratecrest img{width:100%;height:auto;display:block}
.rategroup > summary b{font-family:Cinzel,serif;font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#22180f}
.rategroup > summary span{font-size:.86rem;font-style:italic;color:var(--ink-soft)}
.rategroup > summary em{
  font-family:Cinzel,serif;font-size:.48rem;font-style:normal;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
  padding:.1rem .4rem;border:1px solid var(--rule);
}
.rategroup > summary em.warn{color:var(--oxblood);border-color:rgba(122,33,28,.4)}

.hullrow{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto;
  gap:.7rem;align-items:center;
  padding:.5rem .2rem;border-top:1px solid rgba(42,31,22,.09);
}
.hullrow-art .shipthumb img{width:100%;height:auto;display:block}
.hullrow-main{min-width:0}
.hullrow-name b{font-family:Cinzel,serif;font-size:.86rem;font-weight:600;color:#22180f}
.hullrow-name em{display:block;font-size:.82rem;font-style:italic;color:var(--ink-soft)}
.hullrow-cond{display:flex;align-items:center;gap:.5rem;margin-top:.3rem;max-width:280px}
.hullrow-cond b{font-family:Cinzel,serif;font-size:.76rem;color:var(--ink-soft);min-width:34px}

/* A bare ellipsis gave no clue there was anything behind it — the controls
   were there all along and unfindable. It says what it does now. */
.hullrow-more > summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:.3rem;justify-content:flex-end;
  padding:.3rem .4rem;white-space:nowrap;
  border:1px solid var(--rule);
  font-family:Cinzel,serif;font-size:.5rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.hullrow-more > summary i{
  width:6px;height:6px;flex:none;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .2s;
}
.hullrow-more[open] > summary i{transform:rotate(-135deg) translateY(-1px)}
.hullrow-more[open] > summary{width:fit-content;margin-left:auto}
.hullrow-more > summary:hover{border-color:var(--brass);color:#5c3f10;background:rgba(184,134,43,.1)}
.hullrow-more > summary::-webkit-details-marker{display:none}
.hullrow-more > summary:hover{color:var(--ink)}
.hullrow-panel{
  grid-column:1 / -1;padding:.7rem 0 .9rem;
  border-top:1px dashed rgba(42,31,22,.18);margin-top:.5rem;
}
.hullrow-more[open]{grid-column:1 / -1}

/* The panel reads left and acts right: her papers on one side, the orders you
   may give on the other. Stacked in one column it was a long ladder of loose
   controls with the width beside them going to waste. */
.hullpanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:1.1rem;align-items:start}
.hullpanel-read,.hullpanel-do{min-width:0}
.hullpanel .mini{display:block;margin:0 0 .4rem}
.hullpanel-read .mini{margin-top:.9rem}
.hullpanel-read .mini:first-child{margin-top:0}

.hullacts,.hullpanel-do{min-width:0}
.hullact{
  background:rgba(255,250,232,.5);border:1px solid var(--rule);
  border-left:2px solid var(--rule);
  padding:.6rem .7rem;margin-bottom:.5rem;
}
.hullact:last-child{margin-bottom:0}
.hullact.lead{border-left-color:var(--brass);background:rgba(184,134,43,.1)}
.hullact-h{font-family:Cinzel,serif;font-size:.46rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#8a6420;margin-bottom:.4rem}
.hullact-note{font-size:.85rem;font-style:italic;line-height:1.45;
  color:var(--ink-soft);margin-bottom:.45rem}
.hullact-note:last-child{margin-bottom:0}
.hullact-row{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.hullact-row .pick2{flex:1 1 130px;min-width:0;max-width:none}
.hullact-row .raise{flex:none}

@media(max-width:820px){
  .hullpanel{grid-template-columns:1fr}
}

.hull-bar{flex:1;height:6px;background:rgba(42,31,22,.14);border:1px solid var(--rule);overflow:hidden}
.hull-bar i{display:block;height:100%;background:#4a6846}
.hull-bar.worn i{background:var(--brass)}
.hull-bar.bad i{background:var(--oxblood)}

.hull-stats,.hull-log{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin:0 0 .5rem}
.hull-stats div,.hull-log div{background:rgba(255,250,232,.5);padding:.4rem .5rem}
.hull-log div{background:rgba(42,31,22,.05)}
.hull-stats dt,.hull-log dt{font-family:Cinzel,serif;font-size:.44rem;letter-spacing:.18em;
  text-transform:uppercase;color:#8a6420}
.hull-stats dd,.hull-log dd{margin:.1rem 0 0;font-family:Cinzel,serif;font-size:.84rem;color:var(--ink)}

@media(max-width:640px){
  .hullrow{grid-template-columns:44px minmax(0,1fr) auto}
  .hullrow-more > summary span{display:none}
  .hullrow-more > summary{padding:.35rem .5rem}
}

/* ==================================================================
   Trading Post
   ================================================================== */
.tphead{
  position:relative;overflow:hidden;
  padding:clamp(1.4rem,4vw,2.6rem) clamp(1.1rem,3vw,2rem);
  background:radial-gradient(85% 130% at 20% 0%,rgba(74,104,70,.32),transparent 62%),
             linear-gradient(150deg,#16262e,#0b1219 72%);
  border:1px solid rgba(184,134,43,.36);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.95);
}
.tphead::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--grain);opacity:.16;mix-blend-mode:overlay}
.tphead-in{position:relative;z-index:1}
.tphead h1{font-family:Cinzel,serif;font-size:clamp(1.7rem,4.5vw,2.6rem);font-weight:700;
  letter-spacing:.09em;color:#f4e8ca;margin:.4rem 0 .3rem;line-height:1}

.tpfilter{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.tpfilter a{
  padding:.36rem .8rem;text-decoration:none;border:1px solid var(--rule);
  font-family:Cinzel,serif;font-size:.52rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);
}
.tpfilter a:hover{background:rgba(255,250,232,.5);color:var(--ink)}
.tpfilter a.on{border-color:var(--brass);background:rgba(184,134,43,.16);color:#5c3f10}
.tpfilter .pick2{max-width:200px}

.tpgrid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.tplot{
  display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:.8rem;align-items:center;
  background:rgba(255,250,232,.5);padding:.6rem .8rem;
}
.tplot:hover{background:rgba(255,250,232,.75)}
.tplot.mine{background:rgba(184,134,43,.14);box-shadow:inset 3px 0 0 var(--brass)}
.tplot-art{display:block;width:52px}
.tplot-art img,.tplot-art svg{width:100%;height:auto;display:block}
.tplot-body{min-width:0}
.tplot-name b{font-family:Cinzel,serif;font-size:.88rem;font-weight:600;color:#22180f}
.tplot-name em{display:block;font-size:.82rem;font-style:italic;color:var(--ink-soft)}
.tplot-meta{font-family:Cinzel,serif;font-size:.46rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:.25rem}
.tplot-buy{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}
.tplot-buy b{font-family:Cinzel,serif;font-size:1rem;color:#5c3f10;white-space:nowrap}

.tpforms{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.tpform{display:flex;flex-direction:column;gap:.5rem;background:rgba(255,250,232,.5);padding:.9rem}
.tpform .lbl{font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.2em;
  text-transform:uppercase;color:#8a6420}

@media(max-width:640px){
  .tplot{grid-template-columns:40px minmax(0,1fr);row-gap:.5rem}
  .tplot-art{width:40px}
  .tplot-buy{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between}
}

/* a company flag on a port */
.tally.flag{min-width:0;max-width:180px}
.tally.flag b{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;display:block;white-space:nowrap}
.tally.flag.ours b{color:#8a6420}
.siegeline{
  margin-top:.6rem;padding:.4rem .7rem;display:inline-block;
  background:rgba(122,33,28,.14);border:1px solid rgba(200,90,70,.45);
  font-size:.86rem;color:var(--ink);
}
.siegeline b{font-family:Cinzel,serif;font-size:.7rem;letter-spacing:.08em}

/* ==================================================================
   The running fight
   ================================================================== */
.fight{
  position:relative;margin-top:.7rem;max-width:560px;aspect-ratio:16/7;
  overflow:hidden;border:1px solid rgba(60,42,16,.5);
  box-shadow:inset 0 0 60px rgba(6,12,17,.55);
}
.fight-sea{position:absolute;inset:0;display:block}
.fight-sea img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block}

.fight-ship{position:absolute;bottom:12%;width:36%;max-width:210px;z-index:2}
.fight-ship .shipthumb{display:block;width:100%;line-height:0}
.fight-ship .shipthumb img{width:100%;height:auto;object-fit:contain;display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.7))}
.fight-ship.mine{left:2%;animation:fsRoll 5s ease-in-out infinite}
.fight-ship.foe{right:2%;width:42%;max-width:250px;bottom:9%;
  animation:fsRoll 6.4s ease-in-out -1.5s infinite}
/* the pirate is drawn bows-left, so she already faces the player */

.fight-tag{
  position:absolute;left:0;bottom:-2px;transform:translateY(100%);
  white-space:nowrap;font-family:Cinzel,serif;font-size:.48rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(240,226,189,.9);
  text-shadow:0 1px 4px rgba(6,12,17,.95);
}
.fight-ship.foe .fight-tag{left:auto;right:0;text-align:right}
.fight-tag em{display:block;font-style:normal;font-size:.44rem;color:rgba(240,226,189,.6)}

/* Powder smoke, shown only when a gun speaks.
   Sized as a gun rather than an explosion: at a third of the frame it dwarfed
   the ship it came from. These sit at the hulls' gunports and drift outward
   as they fade, which is what sells it as a broadside. */
.fight-shot{
  position:absolute;z-index:3;width:15%;max-width:84px;height:auto;
  opacity:0;pointer-events:none;
  transform:scale(.55);transform-origin:left center;
  transition:opacity .1s ease-out,transform .9s cubic-bezier(.15,.7,.4,1);
  filter:blur(.3px);
}
.fight-shot.firing{opacity:.92;transform:scale(1) translateX(6%)}

/* off your own bow, firing to starboard */
.fight-shot.s1{left:30%;bottom:30%}
/* the pirate answering, so the burst is mirrored back at you */
.fight-shot.s2{right:32%;bottom:32%;transform:scale(.55) scaleX(-1);transform-origin:right center}
.fight-shot.s2.firing{transform:scale(1) scaleX(-1) translateX(6%)}
/* a lighter gun amidships */
.fight-shot.s3{left:41%;bottom:23%;width:11%;max-width:62px}

@media(max-width:520px){
  .fight{aspect-ratio:16/9}
  .fight-tag{font-size:.42rem}
}
@media(prefers-reduced-motion:reduce){
  .fight-ship{animation:none}
  .fight-shot{transition:opacity .2s}
}
.adtools > summary{cursor:pointer;font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.18em;
  text-transform:uppercase;color:#8a6420;margin-top:.35rem}
.adtools-in{display:flex;flex-direction:column;gap:.35rem;margin-top:.5rem;
  padding:.5rem;background:rgba(42,31,22,.05);border:1px solid rgba(42,31,22,.12)}
.adtools-in .lbl{min-width:6rem;font-family:Cinzel,serif;font-size:.46rem;
  letter-spacing:.16em;text-transform:uppercase;color:#8a6420}

/* Trading Post — filters, value badges and price guidance */
.tpbar{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;justify-content:space-between;
  margin-bottom:1rem}
.tpsearch{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.tpsearch .pick2{max-width:190px}

.deal{
  font-family:Cinzel,serif;font-size:.46rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.1rem .4rem;border:1px solid var(--rule);color:var(--ink-faint);
}
.deal.good{color:#3f6b34;border-color:rgba(74,104,70,.5);background:rgba(74,104,70,.1)}
.deal.bad{color:var(--oxblood);border-color:rgba(122,33,28,.4);background:rgba(122,33,28,.08)}

.tprange{
  font-size:.82rem;font-style:italic;line-height:1.4;color:var(--ink-soft);
  padding:.4rem .55rem;background:rgba(42,31,22,.05);border-left:2px solid var(--brass);
}
.adtools-in .reset{border-top:1px solid rgba(122,33,28,.3);padding-top:.5rem;margin-top:.2rem}
.adtools-in .reset .lbl{color:var(--oxblood)}

/* officers aboard a hull */
.crewrow{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.6rem}
.crewchip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .5rem;background:rgba(255,250,232,.6);border:1px solid var(--rule);
}
.crewchip b{font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.14em;
  text-transform:uppercase;color:#5c3f10}
.crewchip em{font-size:.8rem;font-style:italic;color:var(--ink-soft)}
.crewchip button{cursor:pointer;background:none;border:0;padding:0 .1rem;
  font-size:.9rem;line-height:1;color:var(--ink-faint)}
.crewchip button:hover{color:var(--oxblood)}
.crewnone{font-size:.84rem;font-style:italic;color:var(--ink-faint)}

/* Refining — what the warehouse will actually bear */
.canmake{
  margin:.35rem 0 .5rem;font-size:.9rem;line-height:1.45;color:var(--ink-soft);
}
.canmake b{font-family:Cinzel,serif;font-size:1rem;color:#5c3f10}
.canmake em{
  display:inline-block;margin-left:.4rem;font-style:italic;
  font-size:.82rem;color:var(--ink-faint);
}
.canmake.none{color:var(--oxblood)}

.ing{display:inline-block;margin:.1rem .1rem}
.ing em{
  display:block;font-family:Cinzel,serif;font-size:.44rem;font-style:normal;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}
.ing.out{color:var(--oxblood)}
.ing.out em{color:var(--oxblood)}
.offer p b{margin:0 .35rem;color:var(--ink-faint);font-weight:400}

.runhint{
  font-family:Cinzel,serif;font-size:.46rem;letter-spacing:.16em;
  text-transform:uppercase;color:#8a6420;white-space:nowrap;
}

/* ==================================================================
   The news desk
   ================================================================== */
.nwhead{
  position:relative;overflow:hidden;
  padding:clamp(1.4rem,4vw,2.6rem) clamp(1.1rem,3vw,2rem);
  background:radial-gradient(80% 130% at 18% 0%,rgba(184,134,43,.26),transparent 62%),
             linear-gradient(150deg,#16262e,#0b1219 74%);
  border:1px solid rgba(184,134,43,.36);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.95);
}
.nwhead::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--grain);opacity:.16;mix-blend-mode:overlay}
.nwhead-in{position:relative;z-index:1;max-width:70ch}
.nwhead h1{font-family:Cinzel,serif;font-size:clamp(1.7rem,4.5vw,2.6rem);font-weight:700;
  letter-spacing:.09em;color:#f4e8ca;margin:.4rem 0 .3rem;line-height:1}

/* The featured three: the newest given the room, the next two beside it. */
.nwfeature{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:1.4rem}
.nwcard{
  display:flex;flex-direction:column;text-decoration:none;
  background:linear-gradient(160deg,var(--vellum),var(--vellum-edge));
  transition:transform .18s,box-shadow .18s;
}
.nwcard:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(6,12,17,.8)}
.nwcard:focus-visible{outline:2px solid var(--brass);outline-offset:-3px}
.nwcard.lead{grid-column:1 / -1}

/* The band holds the shape and the picture fills it. Without a height on the
   band, height:100% on the image had nothing to resolve against and fell back
   to auto, so object-fit never came into it — the picture ran to whatever
   height its own proportions asked for, which across a full-width card is
   most of a screen.
   The ratio keeps it sane on a narrow card and the cap keeps it sane on a
   wide one; between them the image is cropped from the middle rather than
   stretched, so a 16:9 banner still reads as one. */
.nwcard-shot{display:block;line-height:0;overflow:hidden;background:#16262e;
  aspect-ratio:16/9;max-height:180px}
.nwcard.lead .nwcard-shot{max-height:260px}
.nwcard-shot picture{display:block;line-height:0;width:100%;height:100%}
.nwcard-shot img{display:block;width:100%;height:100%;object-fit:cover}
.nwcard-shot.bare{display:none}

.nwcard-in{display:flex;flex-direction:column;flex:1;padding:clamp(.9rem,2vw,1.3rem)}
.nwcard-date{font-family:Cinzel,serif;font-size:.5rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:#8a6420}
.nwcard-title{font-family:Cinzel,serif;font-weight:700;letter-spacing:.04em;line-height:1.2;
  color:#22180f;margin:.35rem 0 .3rem;font-size:1.02rem}
.nwcard.lead .nwcard-title{font-size:clamp(1.2rem,2.6vw,1.6rem)}
.nwcard-sum{font-size:.92rem;font-style:italic;line-height:1.55;color:var(--ink-soft);
  flex:1;max-width:66ch}
.nwcard-more{margin-top:.7rem;font-family:Cinzel,serif;font-size:.5rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#8a6420}
.nwcard:hover .nwcard-more{color:#5c3f10}

/* The archive below it: one line each, dated down the left. */
.nwlist{list-style:none;margin:0;padding:0}
.nwlist li{border-top:1px solid rgba(42,31,22,.12)}
.nwlist li:first-child{border-top:0}
.nwlist a{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;
  padding:.75rem .2rem;text-decoration:none}
.nwlist a:hover{background:rgba(255,250,232,.55)}
.nwlist-date{font-family:Cinzel,serif;font-size:.5rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#8a6420;padding-top:.2rem}
.nwlist-body b{display:block;font-family:Cinzel,serif;font-size:.95rem;font-weight:600;
  letter-spacing:.03em;color:#22180f}
.nwlist-body em{display:block;margin-top:.2rem;font-size:.88rem;font-style:italic;
  line-height:1.5;color:var(--ink-soft);max-width:72ch}

.nwpages{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center;
  margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--rule)}
.nwpages a,.nwpages span{
  padding:.35rem .6rem;text-decoration:none;
  font-family:Cinzel,serif;font-size:.55rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--rule);color:var(--ink-soft);
}
.nwpages a:hover{border-color:var(--brass);color:var(--ink);background:rgba(184,134,43,.1)}
.nwpages .on{border-color:var(--brass);background:rgba(184,134,43,.18);color:#5c3f10}
.nwpages .off{opacity:.4}

/* A single dispatch. */
.nwsingle{
  max-width:76ch;margin:0 auto;
  background:linear-gradient(160deg,var(--vellum),var(--vellum-edge));
  padding:clamp(1.2rem,3vw,2.2rem);
  box-shadow:0 18px 44px -18px rgba(6,12,17,.7);
}
.nwback{margin-bottom:1rem}
.nwback a{font-family:Cinzel,serif;font-size:.52rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:#8a6420;text-decoration:none}
.nwback a:hover{color:#5c3f10}
.nwsingle-head{padding-bottom:1rem;margin-bottom:1.2rem;border-bottom:1px solid var(--rule)}
.nwsingle-head .lbeyebrow{color:#8a6420}
.nwsingle-head h1{font-family:Cinzel,serif;font-size:clamp(1.5rem,4vw,2.3rem);font-weight:700;
  letter-spacing:.04em;line-height:1.1;color:#22180f;margin:.35rem 0 .4rem}
.nwsingle-head .lblede{color:var(--ink-soft);max-width:66ch}
.nwsingle-art{display:block;line-height:0;margin-bottom:1.2rem}
.nwsingle-art img{display:block;width:100%;height:auto}

/* The article body is author-written HTML, so every ordinary tag needs to
   land somewhere sensible without a class on it. */
.nwbody{font-size:1.02rem;line-height:1.7;color:var(--ink)}
.nwbody > :first-child{margin-top:0}
.nwbody h2,.nwbody h3,.nwbody h4{font-family:Cinzel,serif;letter-spacing:.04em;
  color:#22180f;margin:1.6rem 0 .5rem;line-height:1.25;text-transform:none}
.nwbody h2{font-size:1.25rem}
.nwbody h3{font-size:1.08rem}
.nwbody h4{font-size:.97rem}
.nwbody p{margin-bottom:.9rem}
.nwbody a{color:#8a6420;text-decoration:underline}
.nwbody a:hover{color:#5c3f10}
.nwbody ul,.nwbody ol{margin:0 0 .9rem 1.3rem}
.nwbody li{margin-bottom:.3rem}
.nwbody img{max-width:100%;height:auto;display:block;margin:1rem 0}
.nwbody hr{border:0;border-top:1px solid var(--rule);margin:1.5rem 0}
.nwbody blockquote{margin:0 0 .9rem;padding-left:1rem;border-left:2px solid var(--brass);
  font-style:italic;color:var(--ink-soft)}
.nwbody code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86rem;
  padding:.05rem .3rem;background:rgba(42,31,22,.08);border:1px solid var(--rule)}
.nwbody pre{overflow-x:auto;padding:.8rem;margin:0 0 .9rem;
  background:rgba(42,31,22,.06);border:1px solid var(--rule)}
.nwbody pre code{border:0;padding:0;background:none}
.nwbody table{width:100%;border-collapse:collapse;margin:0 0 .9rem;font-size:.94rem}
.nwbody th,.nwbody td{padding:.4rem .55rem;border:1px solid var(--rule);text-align:left}
.nwbody th{font-family:Cinzel,serif;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8a6420;background:rgba(42,31,22,.05)}

@media(max-width:760px){
  .nwfeature{grid-template-columns:1fr}
  .nwlist a{grid-template-columns:1fr;gap:.2rem}
  .nwlist-date{padding-top:0}
}

/* ==================================================================
   The guide
   ================================================================== */
.gdhead{
  position:relative;overflow:hidden;
  padding:clamp(1.4rem,4vw,2.6rem) clamp(1.1rem,3vw,2rem);
  background:radial-gradient(80% 130% at 18% 0%,rgba(184,134,43,.26),transparent 62%),
             linear-gradient(150deg,#16262e,#0b1219 74%);
  border:1px solid rgba(184,134,43,.36);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.95);
}
.gdhead::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--grain);opacity:.16;mix-blend-mode:overlay}
.gdhead-in{position:relative;z-index:1;max-width:70ch}
.gdhead h1{font-family:Cinzel,serif;font-size:clamp(1.7rem,4.5vw,2.6rem);font-weight:700;
  letter-spacing:.09em;color:#f4e8ca;margin:.4rem 0 .3rem;line-height:1}
.gdsearch{
  width:100%;max-width:420px;margin-top:1.1rem;padding:.55rem .8rem;
  font:inherit;font-size:.95rem;color:#f4e8ca;
  background:rgba(240,226,189,.08);border:1px solid rgba(240,226,189,.28);
}
.gdsearch::placeholder{color:rgba(240,226,189,.45)}
.gdsearch:focus{outline:2px solid var(--brass);outline-offset:1px}

.gdwrap{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.4rem);margin-top:1.6rem;align-items:start}

.gdtoc{position:sticky;top:1rem}
.gdtoc .lbl{font-family:Cinzel,serif;font-size:.54rem;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--brass-lift)}
.gdtoc ul{list-style:none;margin:.5rem 0 0;padding:0}
.gdtoc li{margin-bottom:.15rem}
.gdtoc a{
  display:block;padding:.35rem .55rem;text-decoration:none;
  font-family:Cinzel,serif;font-size:.55rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(240,226,189,.7);
  border-left:2px solid transparent;
}
.gdtoc a:hover{background:rgba(255,250,232,.6);color:var(--ink);border-left-color:var(--brass)}

.gdbody{min-width:0}
.gdchapter{margin-bottom:2rem;scroll-margin-top:1rem}
.gdchapter[hidden]{display:none}
.gdchapter h2{font-family:Cinzel,serif;font-size:1.2rem;font-weight:700;
  letter-spacing:.07em;margin:0}
.gdblurb{font-style:italic;color:rgba(240,226,189,.62);margin:.2rem 0 1rem}

.gdentry{
  padding:.9rem 1.1rem;margin-bottom:.6rem;
  background:rgba(255,250,232,.5);border:1px solid var(--rule);
  border-left:3px solid var(--brass);
}
.gdentry[hidden]{display:none}
.gdentry h3{font-family:Cinzel,serif;font-size:.86rem;font-weight:600;
  letter-spacing:.06em;margin:0 0 .3rem}
.gdentry p{margin:0;line-height:1.62;max-width:76ch}

.gdnone{font-style:italic;color:rgba(240,226,189,.45);padding:1.5rem 0}

@media(max-width:820px){
  .gdwrap{grid-template-columns:1fr}
  .gdtoc{position:static;border-bottom:1px solid var(--rule);padding-bottom:.7rem}
  .gdtoc ul{display:flex;flex-wrap:wrap;gap:.25rem}
  .gdtoc a{border-left:0;border:1px solid var(--rule)}
}

/* ==================================================================
   Industry — section tabs
   ================================================================== */
/* These sit on the dark page rather than on parchment, so they take the
   light-on-dark treatment the nav and chat rail use. */
.pagetabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.pagetab{
  cursor:pointer;font-family:Cinzel,serif;font-size:.62rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(240,226,189,.72);
  background:rgba(240,226,189,.06);border:1px solid rgba(184,134,43,.3);
  padding:.55rem .9rem;transition:color .15s,border-color .15s,background .15s;
}
.pagetab:hover{background:rgba(240,226,189,.13);border-color:var(--brass);color:#f2e6c6}
.pagetab[aria-selected="true"]{
  background:rgba(184,134,43,.26);border-color:var(--brass-lift);color:#f6ecd2;
}
/* A bar inside a panel. Its own class rather than a nested .pagetabs, so a
   script that knows only the outer names cannot reach in and hide it.
   Lighter than the bar above it, so the page still reads as
   sections-within-a-section rather than two rows of equals. */
.subtabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:-.2rem 0 1rem}
.subtab{
  cursor:pointer;font-family:Cinzel,serif;font-size:.56rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(240,226,189,.72);
  background:rgba(240,226,189,.06);border:1px solid rgba(184,134,43,.3);
  padding:.42rem .7rem;transition:color .15s,border-color .15s,background .15s;
}
.subtab:hover{background:rgba(240,226,189,.13);border-color:var(--brass);color:#f2e6c6}
.subtab[aria-selected="true"]{
  background:rgba(184,134,43,.2);border-color:var(--brass-lift);color:#f6ecd2;
}
/* the count is what is ready to run, or the size of the group if none are */
.pagetab-n{
  display:inline-block;margin-left:.4rem;padding:0 .3rem;
  font-size:.9em;line-height:1.5;color:rgba(240,226,189,.6);
  background:rgba(240,226,189,.09);border:1px solid rgba(184,134,43,.28);
}
.pagetab[aria-selected="true"] .pagetab-n,
.subtab[aria-selected="true"] .pagetab-n{color:#f6ecd2;border-color:var(--brass)}
/* no such building at this port yet: still listed, so a captain can see what
   raising one would give them */
.subtab.unbuilt{color:rgba(240,226,189,.42);border-style:dashed}

@media(max-width:640px){
  .pagetabs{gap:.3rem}
  .pagetab{flex:1 1 auto;text-align:center;padding:.5rem .4rem;font-size:.56rem}
  .subtabs{gap:.3rem}
  .subtab{flex:1 1 auto;text-align:center;padding:.4rem .35rem;font-size:.52rem}
}

/* ==================================================================
   The Sea Post
   ==================================================================
   A newspaper rather than a list of modifiers. Cheap paper, a heavy
   masthead, rules above and below it, and two columns of dense type —
   which is what a broadsheet of the period actually looked like and
   what makes an event read as news instead of as a status effect. */
.seapost{
  position:relative;margin-bottom:1.4rem;padding:clamp(1rem,2.5vw,1.6rem);
  background:linear-gradient(178deg,#f7f0dc,#efe5c9 60%,#e8dcbc);
  border:1px solid rgba(60,42,16,.45);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.8);
  color:#2b2117;
}
.seapost-head{display:flex;align-items:center;gap:.9rem;margin-bottom:.5rem}
.seapost-rule{flex:1;height:0;border-top:3px double rgba(60,42,16,.6)}
.seapost h2{
  font-family:Cinzel,serif;font-weight:700;font-size:clamp(1.5rem,4.5vw,2.4rem);
  letter-spacing:.14em;text-transform:uppercase;color:#241a10;
  margin:0;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.seapost-line{
  display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;justify-content:center;
  margin:0 0 .9rem;padding-bottom:.6rem;
  border-bottom:1px solid rgba(60,42,16,.35);
  font-family:Cinzel,serif;font-size:.5rem;letter-spacing:.18em;
  text-transform:uppercase;color:#6b563a;
}

/* Two columns, with a rule between them, and the lead spanning both. */
.seapost-cols{columns:2;column-gap:1.6rem;column-rule:1px solid rgba(60,42,16,.28)}
@media(max-width:720px){.seapost-cols{columns:1}}
.seapost-item{break-inside:avoid;margin:0 0 1rem}
.seapost-item.lead{column-span:all;border-bottom:1px solid rgba(60,42,16,.3);padding-bottom:.8rem}
.seapost-item h3{
  font-family:Cinzel,serif;font-weight:700;letter-spacing:.04em;line-height:1.15;
  font-size:1rem;margin:0 0 .25rem;color:#1e1710;
}
.seapost-item.lead h3{font-size:clamp(1.1rem,3.2vw,1.6rem);text-align:center}
.seapost-item p{font-size:.9rem;line-height:1.5;margin:0;color:#3a2e20}
.seapost-item.lead p{font-size:.98rem}
.seapost-where{
  font-family:Cinzel,serif;font-size:.48rem;letter-spacing:.14em;text-transform:uppercase;
  color:#7a6444;margin:0 0 .3rem !important;
}
.seapost-where b{color:var(--oxblood);font-weight:600}
/* what reaches this harbour is marked, so a captain knows whose trouble it is */
.seapost-item.here{border-left:3px solid var(--oxblood);padding-left:.7rem}

/* Nothing happening is still an edition. Set quieter than a headline, and
   centred, so it reads as a calm week rather than a missing panel. */
.seapost-quiet{text-align:center;border-bottom:0 !important;padding-bottom:0 !important}
.seapost-quiet h3{color:#5c4a33 !important;letter-spacing:.1em}
.seapost-quiet p{max-width:56ch;margin:0 auto !important;font-style:italic;color:#5c4a33}