/* Shared look for the inside pages (card library, rules). The main page carries its own styles in home.html. */
:root{--ink:#1d2a33;--night:#101830;--gold:#f2b632;--gold-deep:#c98a00;--muted:#5f6d77;--line:#e7e5e0}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:#fff;font:17px/1.6 Cambria,Caladea,Georgia,serif}
h1,h2,h3{font-family:Cambria,Caladea,Georgia,serif;font-weight:700;line-height:1.08;margin:0;color:var(--night);text-wrap:balance}
a{color:inherit}
.hide{display:none!important}

/* picture banner: each page gets its own scene behind the title */
.banner{position:relative;color:#fff;background:var(--night) center/cover no-repeat;min-height:min(46vh,420px);display:flex;flex-direction:column}
.banner::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,20,44,.82) 0%,rgba(13,20,44,.5) 55%,rgba(13,20,44,.72) 100%)}
.banner nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px clamp(18px,4vw,48px)}
.brand{font:700 18px/1 Cambria,Caladea,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.banner .links{display:flex;gap:clamp(14px,2.4vw,30px);font-weight:700;font-size:15px}
.banner .links a{text-decoration:none;opacity:.88}
.banner .links a:hover,.banner .links a.here{opacity:1;text-decoration:underline;text-underline-offset:5px}
.banner .title{position:relative;z-index:2;margin:auto 0;padding:10px clamp(20px,4vw,48px) 44px;max-width:1160px;width:100%;align-self:center}
.banner h1{color:#fff;font-size:clamp(40px,6.5vw,84px);letter-spacing:-.01em;text-shadow:0 3px 0 rgba(13,20,44,.35),0 14px 30px rgba(13,20,44,.55)}
.banner p{margin:12px 0 0;max-width:34em;font-size:clamp(17px,1.5vw,20px);text-shadow:0 2px 10px rgba(13,20,44,.7)}

.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
main{padding:clamp(30px,5vw,56px) 0 clamp(60px,8vw,96px)}
input,button,select{font:inherit}
input[type=search]{border:1.5px solid #cfd3d8;border-radius:10px;padding:10px 13px;background:#fff;color:var(--night);min-width:0}
input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pill{display:inline-block;font:700 15px/1 Cambria,Caladea,Georgia,serif;text-decoration:none;border-radius:99px;padding:11px 20px;background:var(--night);color:#fff;border:1.5px solid var(--night);cursor:pointer}
.pill.line{background:none;color:var(--night)}
footer{background:#f6f3ee;border-top:1px solid var(--line);color:var(--muted);font-size:14px;padding:34px 0 42px}
@media(max-width:700px){
  .banner nav{padding:16px 18px}.brand{font-size:14px;letter-spacing:.1em}
  .banner .links{font-size:14px;gap:14px}
  .banner{min-height:300px}
}