:root { --ink:#101114; --paper:#f4f0e7; --line:rgba(16,17,20,.2); --gold:#f5b841; --blue:#7ad7f0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; }
.site-header { min-height:84px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.site-header p,.kicker,.section-heading p,.card-eyebrow { margin:0; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.wordmark { font-size:25px; font-weight:900; letter-spacing:-.08em; text-decoration:none; }
.wordmark span { color:#d56d22; }
.hero { padding:clamp(72px,11vw,150px) 5vw 56px; border-bottom:1px solid var(--line); }
.kicker,.section-heading p,.card-eyebrow { color:#6e665a; }
.hero h1 { max-width:960px; margin:22px 0 28px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(58px,9.4vw,138px); font-weight:400; line-height:.86; letter-spacing:-.065em; }
.hero h1 em { color:#d56d22; font-weight:400; }
.intro { max-width:660px; margin:0; font-size:clamp(18px,2vw,25px); line-height:1.5; color:#4c4b48; }
.hero-meta { display:flex; flex-wrap:wrap; gap:10px 30px; margin-top:52px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; font-weight:700; }
.hero-meta span:last-child { margin-left:auto; }
.games { padding:78px 5vw 100px; }
.section-heading { display:grid; grid-template-columns:1fr 3fr; align-items:end; margin-bottom:34px; }
.section-heading h2 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(38px,5vw,72px); font-weight:400; letter-spacing:-.04em; }
.game-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--ink); }
.game-card { position:relative; min-width:0; padding:22px; display:flex; flex-direction:column; }
.game-card+.game-card { border-left:1px solid var(--ink); }
.card-topline { display:flex; justify-content:space-between; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.card-visual { min-height:270px; margin:22px 0 30px; display:flex; align-items:center; justify-content:center; gap:9px; overflow:hidden; border-radius:2px; }
.gold .card-visual { background:radial-gradient(circle at 50% 15%,#6d4b10,#17150f 65%); }
.blue .card-visual { background:radial-gradient(circle at 50% 15%,#174c65,#0d1824 65%); }
.reel { width:27%; aspect-ratio:.78; display:grid; place-items:center; border:1px solid rgba(255,255,255,.25); border-radius:10px; background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.04)); color:white; font-family:Georgia,serif; font-size:clamp(35px,6vw,74px); text-shadow:0 4px 20px rgba(0,0,0,.5); }
.reel-one { transform:translateY(14px) rotate(-2deg); }
.reel-two { transform:translateY(-10px); color:var(--gold); }
.blue .reel-two { color:var(--blue); }
.reel-three { transform:translateY(18px) rotate(2deg); }
.card-copy { min-height:238px; }
.card-copy h3 { margin:10px 0 14px; font-family:Georgia,serif; font-size:clamp(34px,4vw,56px); font-weight:400; letter-spacing:-.04em; }
.card-copy>p:not(.card-eyebrow) { max-width:580px; margin:0; color:#4c4b48; font-size:16px; line-height:1.65; }
.card-copy ul { display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:23px 0 0; list-style:none; }
.card-copy li { padding:7px 10px; border:1px solid var(--line); border-radius:99px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.play-link { display:flex; align-items:center; justify-content:space-between; padding:18px 0 3px; border-top:1px solid var(--ink); font-size:16px; font-weight:800; text-decoration:none; }
.play-link span { font-size:24px; transition:transform .2s ease; }
.play-link:hover span { transform:translate(4px,-4px); }
footer { padding:28px 5vw 40px; display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); color:#6e665a; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
footer p { margin:0; }
@media (max-width:760px) {
  .site-header p { font-size:10px; } .hero { padding-top:80px; } .hero-meta span:last-child { margin-left:0; }
  .section-heading { grid-template-columns:1fr; gap:12px; } .game-grid { grid-template-columns:1fr; }
  .game-card+.game-card { border-left:0; border-top:1px solid var(--ink); } .card-visual { min-height:210px; }
  .card-copy { min-height:0; padding-bottom:34px; } footer { flex-direction:column; }
}