/* PerpeNaval · web/css/pages.css — the site's reading pages (how to play, callings, companies, achievements, FAQ, changelog, about, legal).
   The chart room's palette and type, on a page made for reading: one column, 16px gutters on a phone, no horizontal scroll. */
:root{--charcoal:#1c1815;--ink:#241f1b;--cream:#ece0c4;--cream-dim:#ddcda6;--gold:#c9a24b;--gold-light:#e8cf8a;--gold-deep:#8f6a2e;--oxblood:#5c0f1c}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--charcoal);color:var(--cream);font-family:'EB Garamond',Georgia,serif;font-size:17px;line-height:1.55;-webkit-text-size-adjust:100%}
a{color:var(--gold-light);text-decoration:none}a:hover{text-decoration:underline}
header.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:10px 16px;background:rgba(28,24,21,.96);border-bottom:1px solid rgba(201,162,75,.35);backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:8px;font-family:'Cinzel',serif;font-weight:700;letter-spacing:.06em;color:var(--gold-light);font-size:18px}.brand img{border-radius:6px}
header nav{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}header nav::-webkit-scrollbar{display:none}
header nav a{padding:6px 10px;border-radius:4px;color:var(--cream-dim);font-size:15px;white-space:nowrap}header nav a.on,header nav a:hover{color:var(--gold-light);background:rgba(201,162,75,.12);text-decoration:none}
.play{font-family:'Cinzel',serif;font-size:13px;letter-spacing:.1em;padding:7px 14px;border:1px solid var(--gold);border-radius:4px;color:var(--charcoal);background:var(--gold);white-space:nowrap}.play:hover{background:var(--gold-light);text-decoration:none}
main{max-width:860px;margin:0 auto;padding:22px 16px 48px}
h1{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(26px,5vw,38px);color:var(--gold-light);margin:8px 0 6px;letter-spacing:.02em}
.lead{font-size:19px;color:var(--cream-dim);margin:0 0 22px;font-style:italic}
.card{background:var(--ink);border:1px solid rgba(201,162,75,.28);border-radius:6px;padding:16px 18px;margin:0 0 14px}
.card h2{font-family:'Cinzel',serif;font-weight:500;font-size:19px;color:var(--gold-light);margin:0 0 8px;letter-spacing:.02em}.card h2 small{font-family:'EB Garamond',serif;font-style:italic;font-weight:400;font-size:16px;color:var(--cream-dim);margin-left:8px}
.card p{margin:0 0 10px}.card p:last-child{margin-bottom:0}.card .tag{color:var(--gold);font-style:italic}
dl{margin:0}dt{color:var(--gold-light);font-weight:600;margin-top:10px}dd{margin:2px 0 0}
.cta{text-align:center;margin:26px 0 0}.btn{display:inline-block;font-family:'Cinzel',serif;font-size:14px;letter-spacing:.08em;padding:12px 22px;border:1px solid var(--gold);border-radius:4px;color:var(--charcoal);background:var(--gold)}.btn:hover{background:var(--gold-light);text-decoration:none}
.dim{color:var(--cream-dim);font-size:15px}
.list .row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:7px 0;border-bottom:1px dotted rgba(201,162,75,.18);font-size:16px}.list .row:last-child{border-bottom:0}.list .amt{color:var(--gold-light);white-space:nowrap;font-variant-numeric:tabular-nums}
.cotag{display:inline-block;padding:0 5px;border:1px solid var(--gold-deep);border-radius:3px;font-size:12px;letter-spacing:.08em;color:var(--gold);margin-right:5px;vertical-align:1px}
.achgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.ach{display:flex;gap:10px;border:1px solid rgba(201,162,75,.25);border-radius:4px;padding:8px 10px}.ach .g{font-size:22px;color:var(--gold-light);width:26px;text-align:center;line-height:1;padding-top:3px}
.ach b{display:block;color:var(--gold-light);font-weight:500}.ach span{display:block;font-size:14px;color:var(--cream-dim);line-height:1.35}.ach i{display:block;font-size:13px;color:var(--gold);font-style:normal;margin-top:3px}
.legal h4{font-family:'Cinzel',serif;color:var(--gold-light);font-weight:500;margin:0 0 8px}.legal h5{color:var(--gold);margin:16px 0 4px;font-size:16px}.legal p{margin:0 0 8px}
.adwrap{margin:26px 0 0;min-height:0}.adwrap ins{margin:0 auto}
footer{border-top:1px solid rgba(201,162,75,.25);padding:18px 16px 30px;text-align:center;color:var(--cream-dim);font-size:14px}footer a{color:var(--gold-light)}
@media (max-width:640px){header.top{padding:8px 12px;gap:8px}.brand span{display:none}main{padding:16px 16px 40px}.card{padding:14px}}