/* Viqeno after dark — warm type, deep evergreen surfaces, quieter details. */
:root {
  color-scheme: dark;
  --paper: #131a17;
  --white: #162019;
  --ink: #f0ede3;
  --muted: #adb6ac;
  --green: #c9d5b0;
  --lime: #dce5c1;
  --line: #354139;
  --sand: #1c2721;
}

/* Age confirmation is isolated from the guide until an explicit adult choice. */
html.age-pending { overflow:hidden; }
.age-pending .site-shell { visibility:hidden; }
.age-gate {
  position:fixed; inset:0; margin:auto;
  width:min(540px,calc(100% - 32px)); height:fit-content;
  max-height:calc(100svh - 32px); overflow-y:auto; overscroll-behavior:contain;
  padding:0; border:1px solid #657257; border-radius:10px;
  background:#1a271f; color:#f0ede3;
  box-shadow:0 28px 110px rgba(0,0,0,.5);
}
.age-gate::backdrop { background:rgba(6,14,9,.94); backdrop-filter:blur(9px); }
.age-gate-inner { padding:37px 42px 27px; text-align:center; }
.age-gate-brand { width:157px; height:auto; margin:0 auto 26px; }
.age-gate-badge {
  display:grid; place-items:center; width:86px; height:86px; margin:0 auto 25px;
  border:1px solid #9aab80; border-radius:50%;
  font:38px/1 var(--serif); color:#d3dfb5; background:#233429;
}
.age-gate-eyebrow { margin:0 0 12px; text-transform:uppercase; letter-spacing:.16em; font-size:9px; color:#c1d0a5; }
.age-gate h2 { font-family:var(--serif); font-size:39px; font-weight:400; line-height:1.13; letter-spacing:-.025em; margin:0 0 19px; }
.age-gate h2:focus { outline:none; }
.age-gate p:not(.age-gate-eyebrow) { font-size:13px; line-height:1.8; color:#bbc5b5; margin-bottom:22px; }
.age-gate-actions { display:grid; gap:11px; margin-top:25px; }
.age-gate-actions .button { justify-content:center; padding:14px 19px; font-size:12px; width:100%; }
.age-gate p.age-gate-memory { font-size:10px; line-height:1.6; margin:17px 0 0; color:#9eae92; }
.age-gate-footer { margin-top:26px; padding-top:20px; border-top:1px solid #40503b; }
.age-gate-footer p { font-size:10px!important; line-height:1.7!important; margin-bottom:12px!important; }
.age-gate-footer p a { color:#e6edd8; font-size:12px; font-weight:500; }
.age-gate-footer > div { display:flex; justify-content:center; gap:24px; font-size:10px; color:#c1cdb6; }
.age-leave { justify-content:center; width:100%; margin-top:4px; }
.age-noscript {
  position:fixed; inset:0; z-index:100; padding:48px 24px; text-align:center;
  background:#131a17; color:#f0ede3; display:grid; place-content:center; gap:16px;
}
.age-noscript p { max-width:420px; margin:0; }
@media (max-width:480px) {
  .age-gate { width:calc(100% - 24px); max-height:calc(100svh - 24px); }
  .age-gate-inner { padding:28px 24px 23px; }
  .age-gate-brand { width:145px; margin-bottom:21px; }
  .age-gate-badge { width:68px; height:68px; font-size:31px; margin-bottom:20px; }
  .age-gate h2 { font-size:34px; }
  .age-gate p:not(.age-gate-eyebrow) { font-size:12px; }
  .age-gate-footer { margin-top:22px; }
}

::selection { background: #c9d5b0; color: #172119; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: #e2cca1; }
.notice { background: #0c120f; color: #b9c3b3; }
.notice a { color: #d5deca; }
.site-header { background: rgba(19,26,23,.97); border-color: #303b33; }
.brand-dot { color: #bdcc9d; }
.brand-image { display: block; flex: none; }
.brand-image img { width: 178px; height: auto; }
.brand-image small { margin-top: 10px; font-size: 7px; letter-spacing: .19em; }
.footer-brand .brand-image img { width: 190px; }
.nav .nav-help { border-color: #64725c; }
.nav .nav-help:hover { background: #27352a; }
.menu-toggle { border-color: #53604e; }
.button { color: #172119; background: #d0dbb8; border-color: #d0dbb8; }
.button:hover { background: #e3eacb; border-color: #e3eacb; }
.button.secondary { color: #eceee3; border-color: #687561; }
.button.secondary:hover { background: #2a382c; }
.skip-link { color: #152019; }
.eyebrow .dot { background: #c3d1a8; }
.section-label { color: #d3ddc6; }
.section-label span { color: #9dac90; }
.section-label::after { background: #637258; }
.text-link { border-color: #697b5d; }
.text-link:hover { color: #d4dfa9; }
.facts-after-hero { margin-top: 0; border-top: 0; }
.fact { padding-block: 28px; }
.fact svg { stroke: #c1d0a5; }
.resort-image img { object-position: 50% 53%; }
.resort-image figcaption { color: #a7b39f; }
.resort-details { border-color: #3b483c; }
.entry-section { background: #1c2721; }
.entry-item { border-color: #495642; }
.entry-number { color: #b8c59d; }
.entry-bottom { border-color: #3c4a3d; }
.game-tabs button[aria-selected=true] { color: #d4deb9; border-color: #c7d6a7; }
.game-tabs button:hover { color: #eff0e2; }
.game-visual { background: #213027; }
.game-visual::before, .game-visual::after { border-color: #354736; }
.game-photo { margin:0; display:block; height:330px; }
.game-photo img { width:100%; height:100%; object-fit:cover; }
.game-photo::before { display:none; }
.game-photo::after {
  inset:0; width:auto; height:auto; border:0; border-radius:0;
  background:linear-gradient(180deg, transparent 58%, rgba(6,15,10,.8) 100%);
  pointer-events:none;
}
.game-photo figcaption {
  position:absolute; bottom:16px; left:18px; right:18px; z-index:1;
  font-size:9px; line-height:1.5; letter-spacing:.02em; color:#f0eee2;
}
@media (max-width:800px) { .game-photo { height:286px; } }
@media (max-width:480px) { .game-photo { height:250px; } }
.game-kicker { color: #b5c79d; }
.safer-section { background: #24372c; color: #f1efe4; border-block: 1px solid #40533b; }
.safer-section .section-label { color: #d1ddbf; }
.safer-section p { color: #c5cfbe; }
.safer-section .button { color: #172119; }
.support-panel { border-color: #66785a; }
.support-panel small { color: #ccd9bb; }
.support-panel .text-link { color: #e1e8ce; border-color: #82936d; }
.faq-list summary::after { color: #c2d0a6; }
.faq-list summary:hover { color: #d2e0b1; }
.about-strip { background: #202d24; }
.site-footer { background: #0e1511; }
.footer-column a:hover, .footer-bottom a:hover { color: #e0e7cc; }
.back-top { background: #223126; color: #dce5c1; border-color: #6e805e; }
.page-aside { background: #202c24; }
.page-aside a:not(.button) { border-color: #43513f; }
.page-aside a:hover { color: #d0dcb5; }
.article .callout { background: #26362a; border-color: #a8bd87; }
.article .helpline { color: #d4dfb5; }
.breadcrumb a:hover { color: #d9e4c2; }

/* The photograph forms the entire opening scene; the copy is its focal point. */
.hero-cinematic {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: clamp(680px, calc(100svh - 128px), 900px);
  overflow: hidden;
  background: #24332b;
  text-align: center;
  color: #fffdf4;
}
.hero-backdrop { position: absolute; inset: 0; z-index: -2; }
.hero-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
  filter: saturate(.73) brightness(.86);
}
.hero-cinematic::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7,19,14,.22) 0%, rgba(7,19,14,.47) 48%, rgba(7,19,14,.86) 100%),
    linear-gradient(90deg, rgba(8,20,14,.16), rgba(8,20,14,.3) 50%, rgba(8,20,14,.16));
}
.hero-content { align-self: center; padding-block: 58px 64px; }
.hero-emblem { display: flex; justify-content: center; align-items: center; gap: 22px; margin-bottom: 24px; color: #e5e8cb; }
.hero-emblem::before, .hero-emblem::after { content: ''; width: 44px; height: 1px; background: rgba(226,234,201,.53); }
.hero-emblem svg { width: 31px; height: 31px; }
.hero-emblem img { width: 56px; height: auto; }
.hero-content .eyebrow { justify-content: center; color: #e4e9d6; font-size: 10px; letter-spacing: .21em; margin-bottom: 23px; }
.hero-content h1 {
  font-family: var(--serif);
  font-size: clamp(70px, 7.4vw, 112px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.035em;
  max-width: 1120px;
  margin: 0 auto 26px;
  text-wrap: balance;
  text-shadow: 0 3px 35px rgba(3,12,7,.2);
}
.hero-content h1 em { font-style: normal; color: #e1e5c5; }
.hero-content > p { font-size: 14px; line-height: 1.9; max-width: 590px; margin: 0 auto; color: #e4e9df; }
.hero-ctas { display: flex; justify-content: center; gap: 13px; margin-top: 31px; }
.hero-ctas .button { min-width: 180px; padding: 15px 22px; }
.hero-ctas .button.secondary { background: rgba(12,28,18,.22); border-color: rgba(225,234,207,.58); color: #fffdf4; }
.hero-ctas .button.secondary:hover { background: rgba(30,52,35,.7); border-color: #e0e8ce; }
.hero-independence { display: block; font-size: 9px; letter-spacing: .13em; color: #d0d8c5; margin-top: 25px; }
.hero-scene-label {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 25px;
  padding-block: 21px;
  border-top: 1px solid rgba(227,234,209,.24);
  color: #d6dfcc;
  font-size: 9px;
  letter-spacing: .045em;
}
.hero-scene-label > span:first-child { text-align: left; }
.hero-scene-label > span:last-child { text-align: right; letter-spacing: .13em; }
.hero-scene-label a { text-decoration: none; color: #f0f2df; display: inline-flex; gap: 14px; align-items: center; }
.hero-scene-label a span { font-size: 18px; }
.hero-scene-label a:hover { color: #d0deb0; }
.scene-divider { color: #aaba9a; margin-inline: 10px; }

/* The new wordmark needs a little more room before navigation collapses. */
@media (min-width:801px) and (max-width:840px) {
  .header-inner { min-height:76px; flex-wrap:wrap; gap:0; }
  .menu-toggle { display:none; }
  .js .menu-toggle { display:flex; }
  .nav { flex-basis:100%; display:grid; grid-template-columns:1fr 1fr; padding:18px 0 24px; gap:8px; align-items:stretch; }
  .js .nav { display:none; }
  .js .nav.is-open { display:grid; }
  .nav a { padding:12px; font-size:13px; }
  .nav a::after { display:none; }
}

@media (min-width:1600px) {
  .hero-content { padding-block: 80px; }
  .hero-content > p { font-size: 16px; }
}
@media (max-width:800px) {
  .hero-cinematic { min-height: 710px; }
  .hero-content { padding-block: 56px; }
  .hero-content h1 { font-size: clamp(62px, 9.5vw, 79px); }
  .hero-backdrop img { object-position: 58% center; }
  .hero-scene-label { grid-template-columns: 1fr auto; }
  .hero-scene-label > span:last-child { display: none; }
  .support-panel { border-top-color: #66785a; }
}
@media (max-width:480px) {
  .hero-cinematic { min-height: 680px; }
  .hero-content { padding-block: 45px 48px; }
  .hero-emblem { margin-bottom: 22px; }
  .hero-emblem svg { width: 27px; height: 27px; }
  .hero-emblem img { width: 48px; }
  .brand-image img { width: 153px; }
  .hero-content .eyebrow { font-size: 8px; letter-spacing: .13em; margin-bottom: 24px; }
  .hero-content h1 { font-size: clamp(36px, 11.7vw, 56px); line-height: 1.08; margin-bottom: 23px; }
  .hero-content > p { font-size: 12px; line-height: 1.85; max-width: 330px; }
  .desktop-break { display: none; }
  .hero-ctas { gap: 10px; margin-top: 26px; flex-wrap: wrap; }
  .hero-ctas .button { min-width: 146px; padding: 14px 16px; font-size: 10px; gap: 17px; }
  .hero-independence { font-size: 8px; letter-spacing: .05em; margin-top: 23px; }
  .hero-scene-label { font-size: 8px; grid-template-columns: 1fr auto; gap: 12px; padding-block: 17px; }
  .hero-scene-label > span:first-child { max-width: 175px; }
  .scene-divider { margin-inline: 4px; }
  .hero-scene-label a { gap: 8px; }
  .facts-after-hero { margin-top: 0; }
  .fact, .fact:first-child { padding-block: 19px; }
}
