/* Letters of Marque pages on www.xn3tech.com (the product page; the player's manual may share it).
   Oak, candlelight, sealing-wax red and the sea at dusk, after the game's start painting. Light and dark follow the system. */
:root{
  --bg:#f3ead8;--bg2:#e8dcc2;--surface:#fdf8ee;--ink:#231912;--muted:#5d4a37;--line:#d6c3a0;--rule:#a7864f;
  --wax:#9b2c1f;--waxSoft:#f3ddd2;--gold:#8a6220;--on:#fdf8ee;--sea:#21485f;--seaSoft:#dbe6ea;
  --oak:#140e09;--oakText:#f1e4c9;--oakMuted:#cdb58c;--oakLine:#3b2c1e;
  --band:#1a120c;--bandText:#efe2c6;--bandMuted:#c4ad86;--bandLine:#3e2f21;--code:#eadcbf;
  --shadow:0 12px 32px rgba(50,30,10,0.18);
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --title:'Cinzel',Georgia,'Times New Roman',serif;
  --text:'Source Sans 3','Segoe UI',system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#120d09;--bg2:#1a130d;--surface:#1f1711;--ink:#efe3cc;--muted:#c5ae8b;--line:#3f3123;--rule:#7c6440;
  --wax:#e8846c;--waxSoft:#3a1d15;--gold:#dcae5e;--on:#140e09;--sea:#8dbcd3;--seaSoft:#15242c;
  --band:#0b0805;--bandText:#e8dbbf;--bandMuted:#a99272;--bandLine:#33271b;--code:#2c2219;
  --shadow:0 12px 32px rgba(0,0,0,0.5);
}}
:root[data-theme="dark"]{
  --bg:#120d09;--bg2:#1a130d;--surface:#1f1711;--ink:#efe3cc;--muted:#c5ae8b;--line:#3f3123;--rule:#7c6440;
  --wax:#e8846c;--waxSoft:#3a1d15;--gold:#dcae5e;--on:#140e09;--sea:#8dbcd3;--seaSoft:#15242c;
  --band:#0b0805;--bandText:#e8dbbf;--bandMuted:#a99272;--bandLine:#33271b;--code:#2c2219;
  --shadow:0 12px 32px rgba(0,0,0,0.5);
}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:18px;line-height:1.6}
[id]{scroll-margin-top:84px}
a{color:var(--wax);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--wax);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.12;letter-spacing:0.002em}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.muted{color:var(--muted)}
.skip{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--surface);color:var(--ink);padding:8px 14px;border:2px solid var(--wax);border-radius:6px}
.skip:focus{left:12px}

/* Site header and footer (the XN3 Technologies brand, as on every page of the site) */
header.site{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
header.site .wrap{padding-top:8px;padding-bottom:8px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 28px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--ink)}
.brand span{font-family:var(--text);font-size:19px;font-weight:700;letter-spacing:0}
nav.top{display:flex;flex-wrap:wrap;gap:0 24px;font-size:16px;font-weight:600}
nav.top a{display:inline-block;padding:10px 0;text-decoration:none;color:var(--ink)}
nav.top a:hover{color:var(--wax)}
footer.site{background:var(--band);color:var(--bandText)}
footer.site .wrap{padding-top:40px;padding-bottom:32px}
footer.site .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
footer.site .brand{color:var(--bandText)}
footer.site nav{display:flex;flex-wrap:wrap;gap:0 22px;font-size:16px}
footer.site nav a{display:inline-block;padding:10px 0;text-decoration:none;color:var(--bandText)}
footer.site .fine{margin-top:22px;padding-top:18px;border-top:1px solid var(--bandLine);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;font-size:15px;color:var(--bandMuted)}

/* The name in capitals, and the small line above titles */
.wordmark{margin:0;font-family:var(--title);font-weight:600;font-size:clamp(40px,6.2vw,76px);line-height:1.02;letter-spacing:0.02em}
.eyebrow{margin:0 0 14px;font-family:var(--title);font-size:15px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold)}

/* Ornament: a ruled line with a compass star */
.ornament{display:flex;align-items:center;gap:14px;margin:6px 0 18px;color:var(--rule);max-width:260px}
.ornament::before,.ornament::after{content:"";flex:1;border-top:1px solid currentColor;border-bottom:1px solid currentColor;height:3px}
.ornament svg{width:18px;height:18px;flex:none}

/* Hero: the start painting, dark in both themes, the words over its dark wall */
.hero{position:relative;overflow:hidden;background:var(--oak);color:var(--oakText);border-bottom:1px solid var(--oakLine)}
.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,14,9,0.94) 0%,rgba(20,14,9,0.78) 34%,rgba(20,14,9,0.15) 64%,rgba(20,14,9,0) 100%),linear-gradient(0deg,rgba(20,14,9,0.55),rgba(20,14,9,0) 30%)}
.hero .wrap{position:relative;z-index:1;min-height:clamp(560px,46vw,700px);display:flex;flex-direction:column;justify-content:center;padding-top:56px;padding-bottom:56px}
.hero-copy{max-width:600px}
.hero .eyebrow{color:#dcae5e}
.hero h1{margin:18px 0 0;font-size:clamp(26px,3vw,36px);font-weight:600;font-style:italic;color:var(--oakText)}
.hero p.lead{margin:16px 0 0;font-size:19px;color:var(--oakMuted)}
.hero .facts-line{margin:18px 0 0;font-size:15px;color:var(--oakMuted)}
.hero .btn.ghost{border-color:var(--oakText);color:var(--oakText)}
.hero .btn.ghost:hover{border-color:#dcae5e;color:#dcae5e}
.hero figcaption{position:absolute;z-index:1;right:clamp(16px,4vw,40px);bottom:14px;max-width:420px;font-size:14px;font-style:italic;color:var(--oakMuted);text-align:right}
.btns{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:6px;font-family:var(--text);font-size:17px;font-weight:700;text-decoration:none}
.btn.primary{background:var(--wax);color:var(--on);border:2px solid var(--wax)}
.hero .btn.primary{background:#b23a26;border-color:#b23a26;color:#fdf8ee}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{border:2px solid var(--ink);color:var(--ink)}
.btn.ghost:hover{border-color:var(--wax);color:var(--wax)}
/* "Coming soon": a seal, never a link */
.soon{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border-radius:999px;border:1px dashed currentColor;font-size:16px;font-weight:700;letter-spacing:0.02em}
.soon svg{width:20px;height:20px;flex:none}
.hero .soon{color:#dcae5e}

/* Sections */
.section{padding:clamp(52px,7vw,88px) 0}
.section.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section h2{margin:0 0 6px;font-size:clamp(34px,4.2vw,50px)}
.section p.sub{margin:0 0 30px;max-width:740px;font-size:19px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px 24px}
.section.alt .card{background:var(--bg)}
.card h3{margin:0 0 8px;font-size:26px}
.card p{margin:0;color:var(--muted)}
.card p+p{margin-top:10px}
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,52px);align-items:center;margin:0 0 clamp(52px,7vw,80px)}
.feature:last-child{margin-bottom:0}
.feature.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feature.flip .ftext{order:2}
.feature.wide{grid-template-columns:minmax(0,1fr);gap:22px}
.feature.wide .ftext{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:8px clamp(24px,4vw,52px)}
.feature h3{margin:0 0 10px;font-size:clamp(28px,3vw,36px)}
.feature p{margin:0 0 10px;color:var(--muted)}
.feature ul{margin:10px 0 0;padding-left:22px;color:var(--muted)}
.feature li{margin:5px 0}
.shot{margin:0}
.shot img{display:block;width:100%;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow)}
.shot figcaption,.ships figcaption,.pair figcaption{margin-top:10px;font-size:15px;color:var(--muted)}
.panorama{margin:0}
.panorama img{display:block;width:100%;aspect-ratio:3/1;object-fit:cover;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow)}
.panorama figcaption{margin-top:10px;font-size:15px;color:var(--muted)}
/* The painted ships on a sea-colored card */
.ships{margin:0;padding:18px 18px 14px;border-radius:8px;border:1px solid var(--line);background:linear-gradient(180deg,var(--seaSoft),var(--surface))}
.ships .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
.ships img{display:block;width:100%}
.ships span{display:block;margin-top:4px;font-size:14px;text-align:center;color:var(--muted)}
/* A governor and his daughter */
.pair{margin:0}
.pair .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pair img{display:block;width:100%;aspect-ratio:380/480;object-fit:cover;border:1px solid var(--ink);border-radius:2px;box-shadow:0 0 0 5px var(--surface),0 0 0 6px var(--rule),var(--shadow)}
.pair span{display:block;margin-top:14px;font-size:15px;font-style:italic;text-align:center;color:var(--muted)}
.list-cols{columns:2 240px;column-gap:28px}
.list-cols li{break-inside:avoid}

/* The worlds */
.towns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 30px}
.towns figure{margin:0}
.towns img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow)}
.towns figcaption{margin-top:8px;font-size:15px;color:var(--muted)}
.worlds{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.world{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:20px 22px;border-top:4px solid var(--sea)}
.world.first{border-top-color:var(--wax);grid-column:span 2}
.world h3{margin:0;font-size:25px}
.world .years{margin:2px 0 8px;font-size:14px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold)}
.world p{margin:0;color:var(--muted);font-size:17px}
.eras{columns:2 220px;column-gap:24px;margin:12px 0 0;padding:0;list-style:none;font-size:16px;color:var(--muted)}
.eras li{margin:2px 0;break-inside:avoid}
.eras b{display:inline-block;min-width:3em;color:var(--ink)}

/* Details */
.details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.details ul{margin:6px 0 0;padding-left:20px;color:var(--muted)}
.details li{margin:4px 0}
.details .langs,.langs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.langs li{margin:0;padding:3px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:15px;color:var(--ink)}
.section.alt .langs li{background:var(--bg)}
.levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 0}
.levels div{padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.levels b{display:block;font-family:var(--display);font-size:21px;line-height:1.2}
.levels span{font-size:15px;color:var(--muted)}

/* Coming soon */
.release{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.release .card h3{font-size:28px}
.release .soon{margin-top:14px;color:var(--wax)}
.privacy{margin-top:14px;padding:12px 16px;border-radius:6px;background:var(--seaSoft);border-left:4px solid var(--sea);font-size:16px;color:var(--ink)}
.faq details{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px 18px;margin:0 0 10px;max-width:860px}
.section.alt.faq details{background:var(--bg)}
.faq h2{margin-bottom:22px}
.faq summary{font-weight:700;cursor:pointer;min-height:28px}
.faq p{margin:10px 0 0;color:var(--muted)}

/* Manual layout (for the player's manual, if it shares this sheet) */
.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;padding-top:40px;padding-bottom:72px}
aside.toc{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 100px);overflow:auto;font-size:16px}
aside.toc p{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
aside.toc ol{list-style:none;margin:0;padding:0}
aside.toc a{display:block;padding:3px 10px;border-left:2px solid var(--line);text-decoration:none;color:var(--muted)}
aside.toc a:hover{color:var(--ink);border-left-color:var(--wax)}
kbd{display:inline-block;min-width:1.6em;padding:0 7px;border:1px solid var(--rule);border-bottom-width:2px;border-radius:5px;background:var(--surface);font-family:var(--text);font-size:15px;font-weight:700;line-height:1.5;text-align:center;white-space:nowrap}
code{padding:1px 6px;border-radius:4px;background:var(--code);font-size:0.86em}
table{border-collapse:collapse;width:100%;max-width:820px;margin:12px 0;font-size:16px;background:var(--surface);border:1px solid var(--line)}
th,td{text-align:left;vertical-align:top;padding:8px 12px;border-bottom:1px solid var(--line)}
th{font-size:13px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);background:var(--bg2)}
.table-scroll{overflow-x:auto;max-width:100%}

@media (max-width:900px){
  /* the painting on top, cut to the candle and the window, the words below it */
  .hero::after{background:linear-gradient(180deg,rgba(20,14,9,0) 0,rgba(20,14,9,0) 36vw,rgba(20,14,9,0.86) 60vw,#140e09 76vw)}
  .hero-art{height:auto;aspect-ratio:5/4;inset:0 0 auto 0;object-position:86% 40%}
  .hero .wrap{min-height:0;padding-top:58vw;padding-bottom:44px}
  .hero figcaption{display:none}
  .feature,.feature.flip,.feature.wide .ftext{grid-template-columns:minmax(0,1fr);gap:18px}
  .feature.flip .ftext{order:0}
  .release,.details{grid-template-columns:minmax(0,1fr)}
  .towns{grid-template-columns:minmax(0,1fr)}
  .layout{grid-template-columns:minmax(0,1fr);gap:0;padding-top:8px}
  aside.toc{display:none}
}
@media (max-width:699px){ /* the header wraps to two lines below 700 px: let it scroll away */
  header.site{position:static}
  [id]{scroll-margin-top:12px}
}
@media (max-width:520px){
  body{font-size:17px}
  nav.top{gap:0 16px;font-size:15px}
  .btn,.hero .soon{width:100%;justify-content:center}
  .levels{grid-template-columns:minmax(0,1fr)}
  .details{grid-template-columns:minmax(0,1fr)}
  .worlds{grid-template-columns:minmax(0,1fr)}
  .world.first{grid-column:auto}
  .panorama img{aspect-ratio:2/1}
}
@media print{
  header.site,footer.site,.btns,.skip,aside.toc{display:none}
  .hero{background:none;color:#000}
  .hero::after,.hero-art{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  a{color:inherit;text-decoration:none}
  figure{break-inside:avoid}
}