:root {
  --river: #173d4a;
  --deep: #0d2731;
  --night: #081b22;
  --mist: #edf1ef;
  --cloud: #f7f8f5;
  --silver: #a8c7cf;
  --steel: #69838a;
  --slate: #4f6367;
  --ink: #14272d;
  --line: rgba(20, 39, 45, .18);
  --line-dark: rgba(237, 241, 239, .2);
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad: clamp(1.4rem, 5vw, 5.5rem);
  --space: clamp(5.5rem, 10vw, 10rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cloud); color: var(--ink); font-family: var(--sans); line-height: 1.65; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-underline-offset: .2em; }
p, h1, h2, h3 { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; line-height: .98; }
h1 { font-size: clamp(4.5rem, 11vw, 11.5rem); }
h2 { font-size: clamp(2.8rem, 5.7vw, 6rem); }
h3 { font-size: 2rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: fixed; left: 50%; top: 0; z-index: 100; padding: .7rem 1rem; background: var(--silver); transform: translate(-50%, -150%); transition: transform .2s; }
.skip:focus { transform: translate(-50%, .5rem); }
.content-width { padding-right: var(--pad); padding-left: var(--pad); }
.overline { margin-bottom: 1.3rem; color: var(--river); font-size: .66rem; font-weight: 700; letter-spacing: .22em; line-height: 1.2; text-transform: uppercase; }
.lead { font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.45; }
.section-index { color: var(--steel); font-family: var(--serif); font-size: 1rem; }
.button { display: inline-flex; min-height: 3.3rem; align-items: center; justify-content: center; padding: .8rem 1.4rem; border: 1px solid currentColor; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; transition: color .2s, background .2s; }
.button-light { border-color: var(--mist); color: var(--mist); }
.button-light:hover, .button-light:focus-visible { background: var(--mist); color: var(--deep); }
.button-dark { background: var(--deep); color: var(--cloud); }
.button-dark:hover, .button-dark:focus-visible { background: var(--river); }
.button-pale { border-color: var(--silver); color: var(--mist); }
.button-pale:hover, .button-pale:focus-visible { background: var(--silver); color: var(--deep); }
.plain-link { display: inline-flex; gap: 1rem; align-items: center; font-size: .69rem; font-weight: 700; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.plain-link::after { content: ""; width: 2.8rem; border-top: 1px solid currentColor; transition: width .25s; }
.plain-link:hover::after, .plain-link:focus-visible::after { width: 4rem; }
.plain-link.light { color: var(--mist); }
.fine { color: var(--steel); font-size: .73rem; }

/* Navigation */
.header { position: relative; z-index: 20; display: grid; min-height: 6rem; grid-template-columns: 17rem 1fr auto; align-items: center; padding: 0 var(--pad); border-bottom: 1px solid rgba(255,255,255,.25); color: var(--mist); }
.header-solid { background: var(--deep); }
.brand { display: flex; gap: .85rem; align-items: center; font-family: var(--serif); font-size: 1.05rem; line-height: 1; text-decoration: none; }
.brand small { display: block; margin-top: .38rem; font-family: var(--sans); font-size: .48rem; letter-spacing: .17em; text-transform: uppercase; }
.brand-mark { display: grid; width: 2.65rem; aspect-ratio: 1; place-items: center; border: 1px solid var(--silver); color: var(--silver); font-family: var(--serif); font-size: .75rem; }
.navigation { display: flex; justify-content: center; gap: clamp(1rem, 2.5vw, 2.6rem); }
.navigation a { position: relative; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.navigation a::after { content: ""; position: absolute; right: 50%; bottom: -.65rem; left: 50%; border-top: 1px solid var(--silver); transition: left .2s, right .2s; }
.navigation a:hover::after, .navigation a:focus-visible::after, .navigation a[aria-current]::after { right: 0; left: 0; }
.header-action { padding: .75rem 1rem; border: 1px solid var(--silver); font-size: .63rem; font-weight: 700; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.header-action:hover, .header-action:focus-visible { background: var(--silver); color: var(--deep); }
.menu-button { display: none; width: 2.75rem; height: 2.75rem; border: 0; background: none; color: inherit; }
.menu-button i { display: block; width: 1.5rem; margin: .38rem auto; border-top: 1px solid; }

/* Homepage */
.hotel-hero { position: relative; min-height: max(48rem, 100svh); margin-top: -6rem; overflow: hidden; color: var(--mist); }
.hotel-hero > img { position: absolute; inset: 0; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,19,25,.78), rgba(5,19,25,.23) 68%), linear-gradient(0deg, rgba(5,19,25,.5), transparent 55%); }
.hero-content { position: relative; z-index: 2; width: min(48rem, 64vw); padding: clamp(12rem, 24vh, 17rem) 0 10rem var(--pad); }
.hero-content .overline { color: var(--silver); }
.hero-content h1 { max-width: 7ch; margin-bottom: 1.7rem; }
.hero-content > p:not(.overline) { max-width: 36rem; font-family: var(--serif); font-size: clamp(1.1rem, 1.7vw, 1.45rem); }
.actions { display: flex; gap: 2rem; align-items: center; margin-top: 2.5rem; }
.hero-arrival { position: absolute; z-index: 2; right: var(--pad); bottom: 0; display: flex; width: min(34rem, 42vw); align-items: center; gap: 1.2rem; padding: 1.4rem 1.6rem; background: var(--mist); color: var(--ink); }
.hero-arrival span { color: var(--river); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero-arrival strong { flex: 1; font-family: var(--serif); font-size: 1.05rem; font-weight: 400; }
.hero-arrival small { max-width: 7rem; color: var(--slate); font-size: .6rem; line-height: 1.4; }
.waterline { position: absolute; z-index: 2; right: 5%; top: 19%; display: flex; flex-direction: column; gap: .6rem; opacity: .55; }
.waterline i { display: block; width: 7rem; border-top: 1px solid var(--silver); }
.waterline i:nth-child(2) { margin-left: 2.5rem; }
.waterline i:nth-child(3) { width: 4rem; margin-left: 1rem; }
.welcome { display: grid; grid-template-columns: .18fr 1fr .75fr; gap: clamp(2rem, 7vw, 8rem); padding-top: var(--space); padding-bottom: var(--space); background: var(--mist); }
.welcome h2 { margin-bottom: 0; }
.welcome-copy { padding-top: 4rem; }
.welcome-copy p:not(.lead) { color: var(--slate); }
.welcome-copy .plain-link { margin-top: 1.5rem; }
.rooms { display: grid; grid-template-columns: 1.2fr .8fr; min-height: 55rem; background: var(--deep); color: var(--mist); }
.rooms-image { min-height: 42rem; }
.rooms-copy { display: flex; flex-direction: column; justify-content: center; padding: var(--space) var(--pad); }
.rooms-copy .overline { color: var(--silver); }
.rooms-copy > p:not(.overline) { max-width: 33rem; color: rgba(237,241,239,.7); }
.facts { margin: 2.5rem 0; border-top: 1px solid var(--line-dark); }
.facts div { display: grid; grid-template-columns: 5.5rem 1fr; padding: .9rem 0; border-bottom: 1px solid var(--line-dark); }
.facts dt { font-family: var(--serif); font-size: 1.3rem; }
.facts dd { margin: 0; color: var(--silver); font-size: .65rem; letter-spacing: .11em; text-transform: uppercase; }
.rooms-copy .button { align-self: flex-start; }
.bar-section { display: grid; grid-template-columns: .15fr .65fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-top: var(--space); padding-bottom: var(--space); }
.bar-copy { max-width: 36rem; }
.bar-copy p:not(.overline) { color: var(--slate); }
.hours { display: flex; flex-direction: column; margin: 2rem 0; border-top: 1px solid var(--line); }
.hours span { padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; }
.bar-image { height: clamp(32rem, 54vw, 52rem); margin-right: calc(var(--pad) * -1); }
.casino-chapter { position: relative; display: grid; grid-template-columns: 1fr .75fr; gap: clamp(3rem, 10vw, 12rem); align-items: end; padding: var(--space) var(--pad); overflow: hidden; background: var(--river); color: var(--mist); }
.casino-chapter .overline { color: var(--silver); }
.chapter-number { position: absolute; right: 3%; top: -20%; color: rgba(168,199,207,.1); font-family: var(--serif); font-size: clamp(17rem, 38vw, 38rem); line-height: 1; }
.casino-chapter > div:not(.chapter-number) { position: relative; z-index: 1; }
.chapter-copy p { max-width: 35rem; font-family: var(--serif); font-size: 1.25rem; }
.chapter-copy small { display: block; margin-top: 1.5rem; color: rgba(237,241,239,.6); }
.service-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--silver); color: var(--deep); }
.service-strip span { padding: 1.25rem; border-right: 1px solid rgba(13,39,49,.2); font-size: .63rem; font-weight: 700; letter-spacing: .12em; text-align: center; text-transform: uppercase; }

/* Casino */
.casino-page { background: var(--cloud); }
.casino-hero { position: relative; min-height: calc(100svh - 6rem); overflow: hidden; background: var(--deep); }
.casino-hero > img { position: absolute; inset: 0; }
.casino-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,25,32,.6), transparent 66%), linear-gradient(0deg, rgba(7,25,32,.45), transparent 55%); }
.casino-hero-panel { position: absolute; z-index: 2; left: var(--pad); bottom: 10%; width: min(43rem, 57vw); padding: 2.5rem 3rem; background: rgba(237,241,239,.93); backdrop-filter: blur(8px); }
.casino-hero-panel h1 { margin-bottom: 1rem; color: var(--deep); }
.casino-hero-panel > p:last-child { max-width: 31rem; margin-bottom: 0; color: var(--slate); font-family: var(--serif); font-size: 1.2rem; }
.casino-open { position: absolute; z-index: 3; right: var(--pad); bottom: 0; min-width: 20rem; padding: 1.4rem 1.6rem; background: var(--silver); color: var(--deep); }
.casino-open span, .casino-open small { display: block; font-size: .63rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.casino-open strong { display: block; margin: .2rem 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 400; }
.casino-intro { display: grid; grid-template-columns: .18fr 1fr .75fr; gap: clamp(2rem, 7vw, 8rem); padding-top: var(--space); padding-bottom: var(--space); }
.casino-intro h2 { margin: 0; }
.casino-intro > div:last-child { padding-top: 3.5rem; }
.casino-intro > div:last-child p:not(.lead) { color: var(--slate); }
.tables-feature { display: grid; grid-template-columns: .8fr 1.2fr; min-height: 54rem; background: var(--deep); color: var(--mist); }
.tables-copy { display: flex; flex-direction: column; justify-content: center; padding: var(--space) var(--pad); }
.tables-copy .overline { color: var(--silver); }
.tables-copy > p:not(.overline):not(.fine) { color: rgba(237,241,239,.68); }
.tables-copy ul { padding: 0; margin: 2rem 0 1rem; list-style: none; border-top: 1px solid var(--line-dark); }
.tables-copy li { display: flex; justify-content: space-between; padding: .8rem 0; border-bottom: 1px solid var(--line-dark); }
.tables-copy li span { font-family: var(--serif); }
.tables-copy li small { color: var(--silver); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.tables-image { min-height: 42rem; }
.lounge-feature { display: grid; grid-template-columns: .15fr 1.25fr .7fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-top: var(--space); padding-bottom: var(--space); background: var(--river); color: var(--mist); }
.lounge-image { height: clamp(32rem, 51vw, 50rem); }
.lounge-copy .overline { color: var(--silver); }
.lounge-copy p:not(.overline) { color: rgba(237,241,239,.72); }
.visit-casino { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: var(--space); padding-bottom: var(--space); }
.visit-heading { grid-column: 1 / -1; margin-bottom: 4rem; }
.visit-casino article { padding: 2rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.visit-casino article:last-child { border-right: 1px solid var(--line); }
.visit-casino article > span { color: var(--steel); font-family: var(--serif); }
.visit-casino article h3 { margin: 2.5rem 0 1rem; }
.visit-casino article p { color: var(--slate); }
.responsible { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(3rem, 8vw, 9rem); padding: var(--space) var(--pad); background: var(--mist); }
.responsible h2 { max-width: 10ch; margin: 0; }
.responsible > div:last-child { align-self: end; color: var(--slate); }

/* Contact */
.contact-page { background: var(--cloud); }
.contact-hero { position: relative; display: grid; min-height: 35rem; grid-template-columns: 1fr .75fr; gap: 6rem; align-items: end; padding-top: var(--space); padding-bottom: 5rem; overflow: hidden; background: var(--mist); }
.contact-hero h1 { margin-bottom: 0; color: var(--deep); }
.contact-hero > p { position: relative; z-index: 1; max-width: 34rem; padding-bottom: 1.3rem; color: var(--slate); font-family: var(--serif); font-size: 1.35rem; }
.contact-waterline { position: absolute; right: -4rem; top: 16%; display: flex; flex-direction: column; gap: 1.5rem; transform: rotate(-8deg); }
.contact-waterline i { display: block; width: 32rem; border-top: 1px solid rgba(23,61,74,.15); }
.contact-waterline i:nth-child(2) { width: 25rem; margin-left: 8rem; }
.contact-waterline i:nth-child(3) { width: 40rem; margin-left: 2rem; }
.contact-waterline i:nth-child(4) { width: 20rem; margin-left: 12rem; }
.reservation-grid { display: grid; grid-template-columns: .7fr 1.15fr .85fr; gap: clamp(2rem, 6vw, 6rem); padding-top: var(--space); padding-bottom: var(--space); }
.reservation-title h2 { margin-bottom: 1rem; font-size: clamp(2.5rem, 4vw, 4rem); }
.reservation-title > p:last-child { color: var(--steel); font-size: .67rem; letter-spacing: .09em; text-transform: uppercase; }
.reservation-primary { align-self: center; border-top: 1px solid var(--line); }
.reservation-primary a { display: block; padding: 1.2rem 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.8rem); overflow-wrap: anywhere; text-decoration: none; }
.reservation-note { align-self: center; color: var(--slate); }
.reservation-note .button { margin-top: 1.2rem; }
.contact-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding-top: 1px; padding-bottom: 1px; background: var(--line); }
.contact-services article { min-height: 34rem; padding: clamp(2rem, 4vw, 4rem); background: var(--mist); }
.contact-services article > span { color: var(--steel); font-family: var(--serif); }
.contact-services .overline { margin-top: 4rem; }
.contact-services h2 { font-size: clamp(2.3rem, 3.5vw, 3.8rem); }
.contact-services article > p:not(.overline) { color: var(--slate); }
.contact-services a { display: block; margin-top: .35rem; font-size: .75rem; overflow-wrap: anywhere; }
.arrival { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 10vw, 12rem); padding-top: var(--space); padding-bottom: var(--space); }
.arrival address { color: var(--slate); font-family: var(--serif); font-size: 1.2rem; font-style: normal; }
.arrival-routes div { padding: 1.2rem 0; border-top: 1px solid var(--line); }
.arrival-routes div:last-child { border-bottom: 1px solid var(--line); }
.arrival-routes span { font-size: .66rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.arrival-routes p { margin: .5rem 0 0; color: var(--slate); }
.opening { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 10vw, 12rem); padding-top: var(--space); padding-bottom: var(--space); background: var(--mist); }
.opening h2 { max-width: 8ch; }
.opening dl { margin: 0; }
.opening dl div { display: flex; justify-content: space-between; gap: 2rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.opening dl div:last-child { border-bottom: 1px solid var(--line); }
.opening dt { font-family: var(--serif); font-size: 1.1rem; }
.opening dd { margin: 0; color: var(--slate); font-size: .75rem; }

/* Footer */
.footer { display: grid; grid-template-columns: 1.1fr .85fr .45fr; gap: 4rem; padding: clamp(4rem, 7vw, 7rem) var(--pad) 2rem; background: var(--night); color: var(--mist); }
.footer-brand { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; }
.footer-brand .brand-mark { grid-row: 1 / 3; }
.footer-brand h2 { margin: 0; font-size: 1.8rem; letter-spacing: -.02em; }
.footer-brand p { margin: .2rem 0 0; color: var(--silver); font-size: .55rem; letter-spacing: .15em; text-transform: uppercase; }
.footer-contact p { margin-top: 0; color: rgba(237,241,239,.67); font-family: var(--serif); }
.footer-contact a { display: block; font-size: .72rem; overflow-wrap: anywhere; }
.footer-nav { display: flex; flex-direction: column; gap: .5rem; }
.footer-nav a { width: fit-content; font-size: .68rem; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.footer-nav a:hover { color: var(--silver); }
.footer-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); color: rgba(237,241,239,.45); font-size: .59rem; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 980px) {
  .header { grid-template-columns: 1fr auto; }
  .header-action { display: none; }
  .menu-button { display: block; }
  .navigation { position: fixed; inset: 6rem 0 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 0; padding: 3rem var(--pad); background: var(--deep); opacity: 0; pointer-events: none; transform: translateY(-1rem); transition: opacity .2s, transform .2s; }
  .navigation.is-open { opacity: 1; pointer-events: auto; transform: none; }
  .navigation a { padding: 1rem 0; border-bottom: 1px solid var(--line-dark); font-family: var(--serif); font-size: 1.7rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
  .navigation a::after { display: none; }
  .welcome, .casino-intro { grid-template-columns: .12fr 1fr 1fr; }
  .visit-casino { grid-template-columns: 1fr 1fr; }
  .visit-casino article:nth-of-type(2) { border-right: 1px solid var(--line); }
  .reservation-grid { grid-template-columns: 1fr 1fr; }
  .reservation-note { grid-column: 2; }
}

@media (max-width: 720px) {
  .header { min-height: 5rem; }
  .navigation { inset: 5rem 0 0; }
  .hotel-hero { min-height: 49rem; margin-top: -5rem; }
  .hero-content { width: auto; padding: 10rem var(--pad) 10rem; }
  .hero-content h1 { font-size: clamp(4rem, 21vw, 6rem); }
  .actions { align-items: flex-start; flex-direction: column; gap: 1.2rem; }
  .hero-arrival { right: 0; width: 88%; flex-wrap: wrap; }
  .hero-arrival strong { min-width: 60%; }
  .waterline { display: none; }
  .welcome, .rooms, .bar-section, .casino-chapter, .casino-intro, .tables-feature, .lounge-feature, .responsible, .contact-hero, .reservation-grid, .contact-services, .arrival, .opening { grid-template-columns: 1fr; }
  .section-index { margin-bottom: 1rem; }
  .welcome-copy, .casino-intro > div:last-child { padding-top: 0; }
  .rooms-image, .tables-image { min-height: 30rem; }
  .rooms-copy, .tables-copy { padding-top: 5rem; padding-bottom: 5rem; }
  .bar-image { height: 29rem; margin: 2rem calc(var(--pad) * -1) 0; }
  .chapter-copy { padding-top: 1rem; }
  .service-strip { grid-template-columns: 1fr 1fr; }
  .service-strip span { border-bottom: 1px solid rgba(13,39,49,.2); }
  .casino-hero { min-height: 44rem; }
  .casino-hero-panel { left: 0; bottom: 6rem; width: 90%; padding: 2rem var(--pad); }
  .casino-hero-panel h1 { font-size: 5.3rem; }
  .casino-open { right: 0; min-width: 0; width: 78%; }
  .lounge-image { height: 29rem; }
  .lounge-copy { padding: 1rem 0; }
  .visit-casino { grid-template-columns: 1fr; }
  .visit-casino article, .visit-casino article:nth-of-type(2), .visit-casino article:last-child { border-right: 1px solid var(--line); }
  .visit-heading { margin-bottom: 2rem; }
  .contact-hero { min-height: 31rem; gap: 2rem; align-items: start; }
  .contact-hero h1 { font-size: clamp(4.2rem, 22vw, 7rem); }
  .contact-waterline { opacity: .45; }
  .reservation-note { grid-column: auto; }
  .contact-services article { min-height: 0; }
  .arrival-routes { margin-top: 1rem; }
  .opening dl div { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .footer { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-meta { grid-column: auto; align-items: flex-start; flex-direction: column; }
}

@media (max-width: 430px) {
  .brand { font-size: .9rem; }
  .brand-mark { width: 2.35rem; }
  .brand small { font-size: .43rem; }
  .hero-content h1 { font-size: 4rem; }
  .hero-content > p:not(.overline) { font-size: 1rem; }
  .hero-arrival small { display: none; }
}