/* ============================================================================
   Quasi Puzzle — shared site styles (content pages + nav + footer)
   © 2026 TiSch. Matches the look of the game (index.html).
   ========================================================================== */
:root{
  --velvet:#0d1326; --velvet2:#141d3a;
  --red:#e30613; --red-dk:#a30310; --red-lt:#ff5a4d;
  --kraft:#e8dcc0; --kraft-dk:#d6c6a2; --kraft-line:#c3b288;
  --ink:#1f5fab; --ink-dk:#163f73; --gold:#f2c14e; --clear:#cfe3f2;
  --grot:'Oswald','Arial Narrow',sans-serif; --body:'Archivo',system-ui,sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:var(--body); color:#eef2ff; line-height:1.6;
  background:radial-gradient(140% 120% at 50% -10%, #1b2752 0%, var(--velvet2) 38%, var(--velvet) 78%) fixed;
  min-height:100vh; overflow-x:hidden;
}
a{color:inherit;}

/* ---------- top navigation ---------- */
.qp-nav{width:100%; border-bottom:1px solid rgba(207,227,242,.14); background:rgba(11,17,36,.55); backdrop-filter:blur(6px);}
.qp-nav-inner{max-width:1140px; margin:0 auto; padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.qp-nav-logo{font-family:var(--grot); font-weight:700; letter-spacing:.05em; font-size:19px; color:#eef2ff; text-decoration:none; white-space:nowrap;}
.qp-nav-logo .q{color:var(--red-lt);}
.qp-nav-logo .tm{font-size:.42em; vertical-align:super; font-weight:500; opacity:.8; margin-left:.05em;}
.qp-nav-links{display:flex; align-items:center; gap:4px 4px; flex-wrap:wrap;}
.qp-nav-links a{font-family:var(--grot); font-weight:500; letter-spacing:.11em; text-transform:uppercase; font-size:12.5px; color:#aeb9e0;
  text-decoration:none; padding:6px 10px; border-radius:4px; transition:color .15s, background .15s;}
.qp-nav-links a:hover{color:var(--gold); background:rgba(255,255,255,.05);}
.qp-nav-links a.active{color:#0d1326; background:var(--gold);}

/* ---------- page + parchment sheet ---------- */
.qp-page{max-width:850px; margin:0 auto; padding:34px 20px 20px;}
.qp-sheet{position:relative; background:var(--kraft); border:1px solid var(--kraft-line); border-radius:10px;
  padding:40px 44px 46px; box-shadow:0 18px 46px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.35);}
.qp-eyebrow{font-family:var(--grot); font-weight:600; letter-spacing:.26em; text-transform:uppercase; font-size:12px; color:var(--red-dk); margin:0 0 6px;}
.qp-sheet h1{font-family:var(--grot); font-weight:700; letter-spacing:.02em; color:#11315c; font-size:38px; line-height:1.05; margin:0 0 6px;}
.qp-lead{font-family:var(--grot); font-weight:400; letter-spacing:.02em; color:var(--ink-dk); font-size:17px; margin:0 0 22px;}
.qp-rule{border:none; border-top:2px solid var(--kraft-line); margin:22px 0;}

/* ---------- prose typography ---------- */
.qp-prose{color:#33291a; font-size:16.5px; line-height:1.72;}
.qp-prose h2{font-family:var(--grot); font-weight:600; letter-spacing:.02em; color:#11315c; font-size:23px; margin:30px 0 10px; padding-bottom:6px; border-bottom:1px solid rgba(19,49,92,.18);}
.qp-prose h3{font-family:var(--grot); font-weight:600; letter-spacing:.02em; color:var(--ink-dk); font-size:18px; margin:22px 0 7px;}
.qp-prose p{margin:0 0 14px;}
.qp-prose ul,.qp-prose ol{margin:0 0 16px; padding-left:22px;}
.qp-prose li{margin:0 0 8px;}
.qp-prose strong{color:#11315c;}
.qp-prose a{color:#1a4f97; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;}
.qp-prose a:hover{color:var(--red-dk);}
.qp-prose code{font-family:'Consolas','SFMono-Regular',ui-monospace,monospace; font-size:.92em; background:rgba(19,49,92,.09); padding:1px 5px; border-radius:4px; color:#11315c;}
.qp-callout{background:rgba(31,95,171,.08); border-left:3px solid var(--ink); padding:12px 16px; border-radius:0 6px 6px 0; margin:16px 0;}
.qp-callout p:last-child{margin-bottom:0;}
.qp-note{font-family:var(--grot); letter-spacing:.03em; color:#6b5325; font-size:13.5px; margin-top:8px;}
.qp-formula{font-size:19px; text-align:center; color:#11315c; background:rgba(255,255,255,.4); border:1px solid var(--kraft-line);
  border-radius:8px; padding:14px 10px; margin:16px 0; font-family:'Cambria','Georgia',serif;}
.qp-formula small{display:block; font-family:var(--grot); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#6b5325; margin-top:6px;}

/* definition rows (controls) */
.qp-deflist{margin:14px 0; border-top:1px solid var(--kraft-line);}
.qp-deflist div{display:flex; gap:14px; padding:10px 2px; border-bottom:1px solid var(--kraft-line); align-items:baseline;}
.qp-deflist dt{flex:0 0 132px; font-family:var(--grot); font-weight:600; letter-spacing:.04em; color:#11315c;}
.qp-deflist dd{margin:0; flex:1;}

/* call-to-action button (selectors also scoped under .qp-prose so button
   colours win over the generic .qp-prose a link colour) */
.qp-cta,.qp-prose a.qp-cta{display:inline-block; margin-top:8px; font-family:var(--grot); font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:14px;
  color:#3a2c12; background:var(--gold); text-decoration:none; padding:11px 22px; border-radius:6px; box-shadow:0 2px 0 #a8842a, inset 0 1px 0 rgba(255,255,255,.5); transition:filter .15s, transform .06s;}
.qp-cta:hover,.qp-prose a.qp-cta:hover{filter:brightness(1.05); color:#3a2c12;}
.qp-cta:active,.qp-prose a.qp-cta:active{transform:translateY(1px);}
.qp-cta.red,.qp-prose a.qp-cta.red{color:#fff; background:var(--red); box-shadow:0 2px 0 var(--red-dk), inset 0 1px 0 rgba(255,255,255,.3);}
.qp-cta.red:hover,.qp-prose a.qp-cta.red:hover{color:#fff;}
.qp-mail{font-family:var(--grot); font-weight:600; letter-spacing:.03em; font-size:19px; color:#1a4f97;}

/* ---------- footer ---------- */
.qp-footer{border-top:1px solid rgba(207,227,242,.14); margin-top:40px; padding:26px 18px 34px;}
.qp-foot-inner{max-width:1140px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;}
.qp-foot-links{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 4px;}
.qp-foot-links a{font-family:var(--grot); font-weight:500; letter-spacing:.1em; text-transform:uppercase; font-size:11.5px; color:#aeb9e0; text-decoration:none; padding:4px 9px; border-radius:4px; transition:color .15s;}
.qp-foot-links a:hover{color:var(--gold);}
.qp-foot-copy{font-family:var(--grot); letter-spacing:.03em; font-size:12.5px; color:#8a98c8; max-width:640px; line-height:1.6;}
.qp-foot-copy a{color:#aeb9e0; text-decoration:none;}
.qp-foot-copy a:hover{color:var(--gold);}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .qp-page{padding:20px 12px 12px;}
  .qp-sheet{padding:26px 20px 30px; border-radius:8px;}
  .qp-sheet h1{font-size:30px;}
  .qp-prose{font-size:16px;}
  .qp-nav-inner{padding:10px 12px;}
  .qp-deflist dt{flex-basis:100%;}
  .qp-deflist div{flex-wrap:wrap; gap:2px;}
}