@font-face { font-family: Cormorant; src: url('/assets/cormorant.woff2') format('woff2'); font-display: swap; font-weight: 500 600; }
@font-face { font-family: Manrope; src: url('/assets/manrope.woff2') format('woff2'); font-display: swap; font-weight: 400 700; }
:root { --ink: #24231f; --paper: #f1e9dd; --muted: #615b51; --line: #c9c0b1; --amber: #d49653; --serif: Cormorant, Georgia, serif; --sans: Manrope, Arial, sans-serif; --side: clamp(24px,5.2vw,100px); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.8; -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: transparent; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--amber); outline-offset: 6px; }
img { display: block; max-width: 100%; }
p, h1, h2, h3, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 500; }
h2 { font-family: var(--serif); font-size: clamp(56px,5.3vw,82px); line-height: 1.08; letter-spacing: -.035em; }
.icon { display: block; width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.icon-left { transform: rotate(180deg); }
.icon-up { transform: rotate(-90deg); }
.section-shell { width: 100%; max-width: 1440px; margin-inline: auto; padding: 112px var(--side); }
.eyebrow { font-size: 11px; font-weight: 500; line-height: 1.6; letter-spacing: .08em; }
.skip-link { position: fixed; z-index: 150; top: -70px; left: 24px; padding: 12px 20px; background: var(--paper); color: var(--ink); }
.skip-link:focus { top: 12px; }
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 100px; padding-inline: var(--side); display: flex; align-items: center; gap: 40px; color: var(--paper); transition: height .3s, background .3s; }
.header.scrolled { height: 78px; background: #24231ff5; border-bottom: 1px solid #f1e9dd20; backdrop-filter: blur(12px); }
.brand { width: 246px; flex-shrink: 0; }
.brand img { width: 100%; height: auto; }
.desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.desktop-nav a, .desktop-nav button, .header-contact { font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.desktop-nav a, .desktop-nav button { padding: 12px 0; border-bottom: 1px solid transparent; transition: border-color .25s; }
.desktop-nav a:hover, .desktop-nav button:hover { border-bottom-color: var(--paper); }
.header-contact { padding-block: 10px; margin-left: 15px; border-bottom: 1px solid #f1e9dd80; }
.menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px; }
.menu-toggle .icon { width: 25px; height: 25px; }
.hero { height: 100svh; min-height: 740px; max-height: 1120px; position: relative; isolation: isolate; overflow: hidden; color: var(--paper); background: var(--ink); }
.hero-media, .hero-shade { position: absolute; inset: 0; z-index: -1; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% center; animation: image-arrival 1.5s ease-out both; }
.hero-shade { background: linear-gradient(90deg,#131411cf 0%,#13141191 36%,#13141108 78%),linear-gradient(0deg,#10120fe0 0%,transparent 35%,transparent 76%,#10120f9c 100%); }
.hero-content { max-width: 1440px; height: 100%; margin: auto; padding: 150px var(--side) 132px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hero-announcement { font-size: 12px; line-height: 1.5; font-weight: 400; letter-spacing: .025em; margin-bottom: 22px; animation: type-arrival .8s .1s both; }
.hero h1 { font-family: var(--serif); font-size: clamp(100px,min(10.7vw,17vh),168px); line-height: 1.08; letter-spacing: -.04em; animation: type-arrival .85s .18s both; }
.hero h1 > span { display: block; }
.hero h1 .hero-the { font-size: 26px; line-height: 1.25; letter-spacing: 0; margin-bottom: 3px; }
.hero-bottom { margin-top: 25px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; animation: type-arrival .85s .3s both; }
.hero-bottom > p { font-size: 14px; color: #f1e9ddd9; line-height: 1.6; }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; padding: 10px 0 13px; border-bottom: 1px solid #24231f90; font-size: 12px; line-height: 1.6; font-weight: 500; }
.text-link .icon { transition: translate .2s; }
.text-link:hover .icon { translate: 4px 0; }
.hero-link { min-width: 156px; }
.hero-link, .light-link { color: var(--paper); border-bottom-color: #f1e9dd80; }
.hero-foot { position: absolute; bottom: 32px; left: var(--side); right: var(--side); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; font-size: 11px; line-height: 1.7; }
.hero-foot p > span { display: block; color: #f1e9dda9; }
.hero-age { color: #f1e9ddc0; }
.intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(70px,11vw,160px); padding-block: 120px 128px; }
.intro-copy > .eyebrow { margin-bottom: 20px; color: var(--muted); }
.intro-copy h2 { margin-bottom: 30px; }
.intro-copy > p:not(.eyebrow) { max-width: 425px; margin-bottom: 22px; font-size: 14px; line-height: 1.85; color: var(--muted); }
.intro-copy > p.lead { font-size: 16px; color: var(--ink); line-height: 1.8; }
.intro-copy > .text-link { margin-top: 4px; }
.image-button { display: block; width: 100%; padding: 0; overflow: hidden; cursor: zoom-in; }
.image-button > img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2,.6,.3,1); }
.image-button:hover > img { transform: scale(1.025); }
.intro-image .image-button { aspect-ratio: 4/5; }
.intro-image img { object-position: 57% center; }
figcaption { margin-top: 16px; font-size: 11px; line-height: 1.6; letter-spacing: .015em; color: var(--muted); }
.intro-image figcaption { text-align: right; }
.nights { background: var(--ink); color: var(--paper); }
.nights-inner { display: grid; grid-template-columns: 1.12fr .9fr; align-items: center; gap: clamp(80px,11.5vw,170px); padding-block: 108px 118px; }
.nights-copy > .eyebrow { color: #bcb3a6; margin-bottom: 22px; }
.nights-copy h2 { font-size: clamp(64px,6.2vw,92px); margin-bottom: 29px; line-height: 1.06; }
.nights-copy > p:not(.eyebrow) { max-width: 335px; font-size: 14px; line-height: 1.9; color: #c8beb0; }
.nights-copy > .text-link { margin-top: 28px; }
.bar-image { width: 100%; }
.bar-image .image-button { aspect-ratio: 3/4.15; }
.bar-image img { object-position: 56% center; }
.bar-image figcaption { color: #bcb3a6; }
.visit { display: grid; grid-template-columns: 1.03fr 1fr; align-items: start; gap: 100px; padding-block: 114px 124px; }
.visit-location > .eyebrow { color: var(--muted); margin-bottom: 20px; }
.visit-location h2 { margin-bottom: 28px; }
address { font-style: normal; font-size: 17px; line-height: 1.8; }
.travel-note { max-width: 320px; margin-top: 15px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.visit-location > .text-link { margin-top: 20px; }
.visit-details { padding-top: 9px; }
.hours-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hours-heading h3 { font-family: var(--serif); font-size: 32px; line-height: 1.2; letter-spacing: -.015em; }
.live-status { color: var(--muted); font-size: 10px; line-height: 1.5; }
.live-status.is-open { color: #3b6247; }
.hours { margin-top: 25px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.7; }
.hours > div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.hours dd { white-space: nowrap; }
.email-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 21px; padding-block: 13px; font-size: 13px; line-height: 1.6; border-bottom: 1px solid #24231f80; overflow-wrap: anywhere; }
.email-link .icon { width: 19px; height: 19px; }
.visit-note { color: var(--muted); margin-top: 25px; font-size: 12px; line-height: 1.8; }
.footer { background: var(--ink); color: var(--paper); padding: 46px var(--side) 25px; }
.footer-top { max-width: 1240px; margin: 0 auto 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 12px; line-height: 1.7; }
.footer-top p > span { display: block; color: #bcb3a6; }
.footer-top > a { padding-block: 9px; border-bottom: 1px solid #f1e9dd70; }
.footer-top > .back-top { display: inline-flex; align-items: center; gap: 20px; border-bottom: 0; }
.footer-logo { width: 100%; height: auto; max-width: 1240px; margin: auto auto 44px; }
.footer-bottom { max-width: 1240px; margin: auto; padding-top: 22px; border-top: 1px solid #f1e9dd30; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 10px; line-height: 1.6; color: #bcb3a6; }
.dialog-close { display: grid; place-items: center; width: 46px; height: 46px; padding: 10px; }
.dialog-close .icon { width: 25px; height: 25px; }
dialog { padding: 0; border: 0; background: var(--ink); color: var(--paper); }
dialog::backdrop { background: #151611e8; backdrop-filter: blur(8px); }
dialog[open] { animation: dialog-arrival .2s ease both; }
.mobile-menu { position: fixed; inset: 0; margin: 0 0 0 auto; width: min(480px,100%); max-width: 100%; height: 100svh; max-height: 100svh; padding: 24px 32px; overflow: auto; }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; }
.mobile-menu nav { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-block: 76px 64px; }
.mobile-menu nav > a, .mobile-menu nav > button { padding: 0; text-align: left; font-family: var(--serif); font-size: 43px; font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
.mobile-menu-bottom { border-top: 1px solid #f1e9dd40; padding-top: 25px; }
.mobile-email { display: inline-block; padding-bottom: 5px; font-size: 14px; line-height: 1.6; border-bottom: 1px solid #f1e9dd70; overflow-wrap: anywhere; }
.mobile-menu-bottom > p { margin-top: 20px; font-size: 11px; line-height: 1.6; color: #bcb3a6; }
.gallery-dialog { width: min(1120px,calc(100% - 64px)); max-width: none; max-height: calc(100svh - 48px); overflow: auto; }
.gallery-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 24px; font-size: 12px; line-height: 1.6; }
.gallery-dialog figure { padding-inline: 24px; }
.gallery-dialog figure > img { width: 100%; height: min(62svh,700px); object-fit: contain; }
.gallery-dialog figcaption { margin-top: 16px; font-size: 13px; color: #c8beb0; letter-spacing: 0; }
.gallery-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; font-size: 12px; line-height: 1.6; letter-spacing: .05em; }
.gallery-bottom > div { display: flex; gap: 12px; }
.gallery-bottom button { display: grid; place-items: center; width: 46px; height: 46px; padding: 10px; border: 1px solid #f1e9dd50; transition: background .2s; }
.gallery-bottom button:hover { background: #f1e9dd20; }
@keyframes type-arrival { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes image-arrival { from { transform: scale(1.025); } to { transform: scale(1); } }
@keyframes dialog-arrival { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 1150px) {
  .header { gap: 28px; }
  .brand { width: 210px; }
  .desktop-nav { gap: 24px; }
  .header-contact { margin-left: 0; }
  .desktop-nav a, .desktop-nav button, .header-contact { font-size: 11px; }
  .intro { gap: 72px; }
  .nights-inner { gap: 90px; }
  .visit { gap: 70px; }
}
@media (max-width: 930px) {
  .header { height: 88px; }
  .desktop-nav { display: none; }
  .header-contact { margin-left: auto; }
  .menu-toggle { display: flex; flex: 0 0 44px; }
  .brand { width: 222px; }
  .hero h1 { font-size: clamp(96px,min(14vw,16vh),145px); }
  .intro, .nights-inner { gap: 55px; }
  .section-shell { padding-block: 88px; }
  .intro-copy h2 { font-size: 64px; }
  .intro-copy > p.lead { font-size: 15px; }
  .intro-copy > p:not(.eyebrow) { font-size: 13px; }
  .nights-copy h2 { font-size: 72px; }
  .nights-copy > p:not(.eyebrow) { font-size: 13px; }
  .visit { gap: 55px; }
  .visit-location h2 { font-size: 66px; }
  address { font-size: 15px; }
  .hours { font-size: 12px; }
  .hours-heading { display: block; }
  .live-status { display: block; margin-top: 12px; }
  .email-link { font-size: 11px; }
}
@media (max-width: 640px) {
  :root { --side: 25px; }
  html { scroll-padding-top: 94px; }
  .header { height: 80px; gap: 20px; }
  .header.scrolled { height: 72px; }
  .brand { width: 203px; }
  .header-contact { display: none; }
  .menu-toggle { margin-left: auto; }
  .hero { height: 100svh; min-height: 680px; max-height: 900px; }
  .hero-media img { object-position: 61% center; }
  .hero-shade { background: linear-gradient(90deg,#131411c7,#13141160 76%,#13141135),linear-gradient(0deg,#10120fe8 0%,transparent 42%,transparent 72%,#10120f90); }
  .hero-content { padding-top: 130px; padding-bottom: 140px; }
  .hero-announcement { font-size: 11px; margin-bottom: 23px; }
  .hero h1 { font-size: clamp(74px,23vw,112px); line-height: 1.08; letter-spacing: -.04em; }
  .hero h1 .hero-the { font-size: 23px; margin-bottom: 4px; }
  .hero-bottom { margin-top: 25px; gap: 22px; }
  .hero-bottom > p { font-size: 13px; }
  .hero-link { min-width: 151px; font-size: 12px; }
  .hero-foot { bottom: 29px; gap: 22px; font-size: 10px; line-height: 1.7; }
  .hero-age { font-size: 10px; }
  .section-shell { padding-block: 68px 74px; }
  h2 { font-size: 56px; line-height: 1.1; }
  .eyebrow { font-size: 10px; line-height: 1.6; }
  .intro { grid-template-columns: 1fr; gap: 39px; }
  .intro-copy > .eyebrow { margin-bottom: 16px; }
  .intro-copy h2 { font-size: 56px; margin-bottom: 24px; }
  .intro-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.85; margin-bottom: 19px; max-width: none; }
  .intro-copy > p.lead { font-size: 15px; }
  .intro-copy > .text-link { margin-top: 1px; font-size: 12px; }
  .intro-image { width: 90%; justify-self: end; }
  .intro-image .image-button { aspect-ratio: 4/4.7; }
  figcaption { margin-top: 13px; font-size: 10px; line-height: 1.6; }
  .nights-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 69px; padding-bottom: 74px; }
  .nights-copy > .eyebrow { margin-bottom: 18px; }
  .nights-copy h2 { font-size: 64px; line-height: 1.06; margin-bottom: 24px; }
  .nights-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.9; max-width: 285px; }
  .nights-copy > .text-link { margin-top: 23px; font-size: 12px; }
  .bar-image { width: 79%; justify-self: end; }
  .bar-image .image-button { aspect-ratio: 3/3.9; }
  .bar-image figcaption { text-align: right; }
  .visit { grid-template-columns: 1fr; gap: 47px; padding-top: 68px; padding-bottom: 76px; }
  .visit-location > .eyebrow { margin-bottom: 17px; }
  .visit-location h2 { font-size: 56px; margin-bottom: 24px; }
  address { font-size: 16px; line-height: 1.85; }
  .travel-note { max-width: 300px; font-size: 12px; margin-top: 15px; }
  .visit-location > .text-link { margin-top: 17px; font-size: 12px; }
  .visit-details { padding-top: 0; }
  .hours-heading { display: block; }
  .hours-heading h3 { font-size: 30px; }
  .live-status { font-size: 11px; margin-top: 9px; }
  .hours { margin-top: 22px; font-size: clamp(12.5px,3.5vw,14px); }
  .hours > div { padding-block: 16px; gap: 12px; }
  .email-link { font-size: 13px; margin-top: 19px; gap: 15px; }
  .visit-note { margin-top: 21px; font-size: 12px; }
  .footer { padding-top: 33px; padding-bottom: 24px; }
  .footer-top { display: grid; grid-template-columns: 1fr auto; gap: 24px 20px; margin-bottom: 43px; font-size: 12px; }
  .footer-top > a:not(.back-top) { justify-self: end; }
  .footer-top > .back-top { grid-column: 1/-1; justify-self: end; font-size: 11px; gap: 18px; padding: 0; }
  .back-top .icon { width: 19px; height: 19px; }
  .footer-logo { margin-bottom: 29px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 19px; font-size: 9px; line-height: 1.8; }
  .mobile-menu { padding: 21px 26px; }
  .mobile-menu nav { padding-top: 61px; padding-bottom: 50px; gap: 22px; }
  .mobile-menu nav > a, .mobile-menu nav > button { font-size: 40px; }
  .gallery-dialog { width: 100%; height: 100svh; max-height: 100svh; }
  .gallery-top { padding: 17px 20px; }
  .gallery-dialog figure { padding-inline: 20px; display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - 183px); }
  .gallery-dialog figure > img { height: auto; max-height: calc(100svh - 275px); object-fit: contain; }
  .gallery-dialog figcaption { font-size: 12px; line-height: 1.7; }
  .gallery-bottom { padding: 17px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}/* Alternate the photographic rhythm while keeping the established palette. */
.nights-inner { grid-template-columns: .95fr 1.05fr; }
.nights-inner > .bar-image { grid-column: 1; grid-row: 1; }
.nights-inner > .nights-copy { grid-column: 2; grid-row: 1; }
@media (max-width: 640px) {
  .nights-inner { display: flex; flex-direction: column; align-items: stretch; gap: 38px; padding-top: 0; }
  .nights-inner > .bar-image { order: 0; width: 84%; margin-left: calc(-1 * var(--side)); align-self: flex-start; }
  .bar-image .image-button { aspect-ratio: 3/3.8; }
  .nights-inner > .nights-copy { order: 1; }
}
.brand { min-height: 44px; display: flex; align-items: center; }
.text-link, .header-contact { min-height: 44px; }
.footer-top > a { min-height: 44px; }

/* Ownership, sport and premises additions stay within the pub's existing palette. */
:root { --banner-height: 36px; }
html { scroll-padding-top: 146px; }
.ownership-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--banner-height); display: grid; place-items: center; padding-inline: 20px; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.ownership-banner p { font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; }
.header { top: var(--banner-height); }
.hero-content { padding-top: 186px; }
.sport-feature { margin-bottom: 25px; padding-block: 20px 23px; border-top: 1px solid #f1e9dd50; border-bottom: 1px solid #f1e9dd50; }
.sport-feature h3 { font-family: var(--serif); font-size: 32px; line-height: 1.2; letter-spacing: -.015em; margin-bottom: 10px; }
.sport-feature p { max-width: 340px; font-size: 13px; line-height: 1.8; color: #c8beb0; }
.premises-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 96px; padding-bottom: 0; }
.premises-grid .image-button { aspect-ratio: 3/2; }
.premises-grid .premises-exterior { grid-column: 1/-1; aspect-ratio: 3.5/1; }
.punch-affiliation { display: inline-flex; align-items: center; gap: 15px; min-height: 44px; }
.punch-affiliation > img { width: 108px; height: auto; }
.gallery-dialog figure > img { height: min(68svh,740px); }
@media (max-width: 640px) {
  :root { --banner-height: 34px; }
  html { scroll-padding-top: 128px; }
  .hero-content { padding-top: 154px; }
  .sport-feature h3 { font-size: 30px; }
  .sport-feature p { font-size: 14px; }
  .premises-grid { grid-template-columns: 1fr; gap: 16px; padding-top: 54px; }
  .premises-grid .premises-exterior { aspect-ratio: 1.9/1; }
  .footer-bottom { gap: 10px; }
  .punch-affiliation { margin-top: 6px; }
  .punch-affiliation > img { width: 101px; }
  .gallery-dialog figure { min-height: calc(100svh - 183px); }
  .gallery-dialog figure > img { height: auto; max-height: calc(100svh - 210px); }
}