*, *::before, *::after { box-sizing: border-box; }
html { min-width: 0; overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; min-width: 0; overflow-x: clip; padding-bottom: calc(88px + env(safe-area-inset-bottom)); background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.75; }
a { color: inherit; text-underline-offset: 0.2em; }
img { display: block; width: 100%; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.18; letter-spacing: -0.03em; overflow-wrap: anywhere; }
h2 { font-size: clamp(2rem, 4.2vw, 4rem); }
h3 { font-size: var(--text-lg); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.hero a:focus-visible, .photo-band a:focus-visible, .trust a:focus-visible, .final-cta a:focus-visible, .sticky-cta a:focus-visible { outline-color: #fff; box-shadow: 0 0 0 3px #251f19; }
main[id], section[id] { scroll-margin-top: 7.5rem; }
.skip-link { position: fixed; z-index: 100; top: 0.5rem; left: 0.5rem; transform: translateY(-160%); padding: 0.7rem 1rem; background: var(--color-ink); color: white; }
.skip-link:focus { transform: translateY(0); }
.eyebrow { margin: 0 0 var(--space-sm); color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-variant-caps: all-small-caps; letter-spacing: 0.12em; }
.section-heading { max-width: 58rem; }
.cta-note { margin: var(--space-sm) 0 0; color: var(--color-muted); font-size: var(--text-sm); }

.masthead { display: grid; gap: var(--space-md); padding: var(--space-md) var(--page-gutter); border-bottom: 1px solid var(--color-rule); background: color-mix(in srgb, var(--color-paper) 96%, transparent); }
.masthead__identity { min-width: 0; }
.masthead__issue { margin: 0; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; }
.masthead__name { min-height: 48px; display: inline-flex; align-items: center; margin-top: 0.2rem; font-family: var(--font-display); font-size: clamp(1.25rem, 3vw, 1.8rem); line-height: 1.2; text-decoration: none; white-space: normal; }
.masthead nav { display: none; align-items: center; gap: var(--space-lg); }
.masthead nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--text-sm); text-decoration: none; }
.masthead__booking { display: none; text-align: center; }
.masthead__booking p { max-width: 24ch; margin: var(--space-xs) auto 0; color: var(--color-muted); font-size: 0.68rem; line-height: 1.35; }
.masthead__cta { display: none; min-height: 48px; align-items: center; justify-content: center; padding: 0 var(--space-md); border: 1px solid var(--color-accent); color: var(--color-accent); font-size: var(--text-sm); font-weight: 700; text-align: center; text-decoration: none; }

.hero { position: relative; isolation: isolate; min-height: min(82svh, 53rem); color: var(--color-paper); }
.hero__image, .hero__shade { position: absolute; inset: 0; height: 100%; }
.hero__image { object-fit: cover; object-position: 48% center; }
.hero__shade { z-index: 1; background: linear-gradient(0deg, var(--color-image-overlay), rgba(25, 18, 13, 0.12) 75%); }
.hero__caption { position: relative; z-index: 2; max-width: 35rem; padding: clamp(3rem, 8vh, 6rem) var(--page-gutter) 8rem; }
.hero__caption .eyebrow { color: var(--color-paper-on-image); }
.hero h1 { margin: 0 0 var(--space-md); color: var(--color-paper); font-size: var(--text-3xl); }
.hero__lead { max-width: 40rem; margin-bottom: 0; font-size: var(--text-md); }
.hero__cta { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); padding: 0 var(--space-md); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; text-decoration: none; box-shadow: 0 10px 28px var(--color-shadow); }
.hero__caption .cta-note { color: var(--color-paper-on-image); }
.hero__note { position: absolute; z-index: 2; left: var(--page-gutter); bottom: 6.5rem; max-width: 32ch; margin: 0; color: var(--color-paper-on-image); font-size: var(--text-xs); }

.facts, .stay-pattern, .bathroom, .amenities, .access, .fit, .rules, .faq, .final-cta { padding: var(--space-3xl) var(--page-gutter); }
.fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: var(--space-xl) 0; padding: 1px; background: var(--color-rule); list-style: none; }
.fact-grid li { display: flex; min-width: 0; flex-direction: column; padding: var(--space-lg); background: var(--color-paper); }
.fact-grid strong { font-family: var(--font-display); font-size: var(--text-lg); }
.fact-grid span { color: var(--color-muted); font-size: var(--text-sm); }
.capacity-alert { max-width: 70ch; margin: var(--space-xl) 0; padding: var(--space-md); border-left: 4px solid var(--color-accent); background: var(--color-paper-soft); font-weight: 600; }
.listing-disclosure { max-width: 70ch; margin: calc(-1 * var(--space-md)) 0 var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }
.link-cta { width: 100%; min-height: 48px; display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-accent); font-weight: 700; }

.choice { display: grid; gap: var(--space-xl); padding: var(--space-3xl) var(--page-gutter); background: var(--color-paper-soft); }
.choice p:last-child { max-width: var(--measure); margin: 0; font-size: var(--text-md); }
.card-grid { display: grid; gap: 1px; margin-top: var(--space-xl); background: var(--color-rule); }
.card-grid article { padding: var(--space-xl); background: var(--color-paper); }
.card-grid article > span { color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-sm); }
.card-grid h3 { margin: var(--space-md) 0 var(--space-sm); }
.card-grid p { margin: 0; color: var(--color-muted); }

.photo-band { display: grid; background: var(--color-ink); color: var(--color-paper); }
.photo-band > img { min-height: 26rem; height: 100%; object-fit: cover; }
.photo-band__copy { align-self: center; padding: var(--space-2xl) var(--page-gutter); }
.photo-band__copy .eyebrow { color: var(--color-paper-on-image); }
.sleeping-types { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.sleeping-types strong { display: block; font-size: var(--text-md); }
.sleeping-types p { margin: var(--space-xs) 0 0; color: var(--color-paper-on-image); }
.capacity-alert--light { border-left-color: var(--color-paper); background: rgba(255,255,255,0.08); }
.listing-mismatch { max-width: 62ch; margin: var(--space-md) 0 0; color: var(--color-paper-on-image); font-size: var(--text-sm); }

.bathroom { display: grid; gap: var(--space-xl); }
.bathroom > p { max-width: var(--measure); font-size: var(--text-md); }
.bathroom img { max-height: 40rem; object-fit: cover; }
.amenities { background: var(--color-paper-soft); }
.amenity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin: var(--space-xl) 0 var(--space-2xl); padding: 0; list-style: none; }
.amenity-grid li { min-height: 44px; display: flex; align-items: center; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); background: var(--color-paper); }
.gallery { display: grid; gap: 1px; background: var(--color-rule); }
.gallery figure { min-width: 0; margin: 0; background: var(--color-ink); color: var(--color-paper); }
.gallery img { height: 22rem; object-fit: cover; }
.gallery figcaption { padding: var(--space-sm) var(--space-md) var(--space-md); font-size: var(--text-sm); }

.access { background: var(--color-paper); }
.route-grid { display: grid; gap: 1px; margin: var(--space-xl) 0; background: var(--color-rule); }
.route-grid article { padding: var(--space-xl); background: var(--color-paper-soft); }
.route-grid span { color: var(--color-accent); font-family: var(--font-mono); }
.route-grid h3 { margin: var(--space-md) 0 var(--space-sm); }
.route-grid p, .route-note { max-width: var(--measure); color: var(--color-muted); }

.trust { padding: var(--space-3xl) var(--page-gutter); background: var(--color-ink); color: var(--color-paper); }
.trust .eyebrow { color: var(--color-paper-on-image); }
.trust > p { max-width: var(--measure); color: var(--color-paper-on-image); }
.trust__score { display: grid; gap: var(--space-md); align-items: center; max-width: 56rem; margin: var(--space-xl) 0; padding: var(--space-lg) 0; border-block: 1px solid rgba(255,255,255,0.3); }
.trust__score > p { margin: 0; font-family: var(--font-display); font-size: clamp(3rem, 7vw, 5rem); line-height: 1; }
.trust__score > p span { color: #d58f60; font-family: var(--font-body); font-size: 0.55em; }
.trust__score ul { margin: 0; padding-left: 1.25rem; }
.link-cta--light { color: var(--color-paper); }

.fit-grid { display: grid; gap: 1px; margin-top: var(--space-xl); background: var(--color-rule); }
.fit-grid article { padding: var(--space-xl); background: var(--color-paper-soft); }
.fit-grid ul, .rules ul { padding-left: 1.2rem; }
.fit-grid li, .rules li { margin-block: var(--space-xs); }
.rules { background: var(--color-paper-soft); }
.rules ul { max-width: 58rem; columns: 1; margin: var(--space-xl) 0; }
.rules > p { max-width: var(--measure); }

.faq { max-width: 80rem; }
.faq details { border-top: 1px solid var(--color-rule); }
.faq details:last-of-type { margin-bottom: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.faq summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) 0; cursor: pointer; font-family: var(--font-display); font-size: var(--text-lg); }
.faq summary::after { content: "+"; color: var(--color-accent); font-family: var(--font-body); font-size: 1.5rem; }
.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: var(--measure); margin: 0; padding: 0 0 var(--space-lg); color: var(--color-muted); }
.final-cta { background: var(--color-accent-dark); color: var(--color-paper); text-align: center; }
.final-cta .eyebrow { color: var(--color-paper-on-image); }
.final-cta > p:not(.eyebrow) { max-width: 58ch; margin-inline: auto; color: var(--color-paper-on-image); }

.footer { display: grid; gap: var(--space-xs); padding: var(--space-2xl) var(--page-gutter) calc(var(--space-2xl) + 4rem); border-top: 4px double var(--color-rule); }
.footer p { max-width: 68ch; margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.footer__brand { color: var(--color-ink) !important; font-family: var(--font-display); font-size: var(--text-xl) !important; }
.footer__privacy { margin-top: var(--space-sm) !important; }
.sticky-cta { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; min-height: calc(64px + env(safe-area-inset-bottom)); padding: var(--space-xs) var(--space-md) calc(var(--space-xs) + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-rule); background: var(--color-paper); box-shadow: 0 -12px 30px var(--color-shadow); }
.sticky-cta p { max-width: 15ch; margin: 0; color: var(--color-muted); font-size: 0.73rem; line-height: 1.35; }
.sticky-cta a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; max-width: 15rem; padding: 0 var(--space-md); background: var(--color-accent); color: white; font-size: 0.78rem; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; }
.sticky-cta[hidden] { display: none; }

@media (min-width: 48rem) {
  .hero__cta { width: auto; }
  .link-cta { width: auto; }
  .hero__caption { padding: clamp(7rem, 18vh, 11rem) var(--page-gutter) 8rem; }
  .masthead { grid-template-columns: auto 1fr; align-items: center; }
  .fact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .choice { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
  .card-grid, .route-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-band { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .amenity-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bathroom { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); align-items: start; }
  .gallery__large { grid-row: span 2; }
  .gallery__large img { height: 100%; min-height: 45rem; }
  .trust__score { grid-template-columns: auto 1fr; }
  .fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules ul { columns: 2; column-gap: var(--space-2xl); }
}

@media (min-width: 64rem) {
  body { padding-bottom: 0; }
  .masthead { grid-template-columns: minmax(0, 1fr) auto; position: sticky; z-index: 15; top: 0; }
  .masthead__booking { display: block; }
  .masthead__cta { display: inline-flex; }
  .sticky-cta { display: none; }
  .hero__shade { background: linear-gradient(90deg, var(--color-image-overlay), rgba(25, 18, 13, 0.06) 72%); }
  .hero__caption { padding: clamp(8rem, 22vh, 13rem) var(--page-gutter) var(--space-3xl); }
  .hero__note { right: var(--page-gutter); bottom: var(--space-md); left: auto; text-align: right; }
  .bathroom { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); align-items: start; }
  .bathroom img { grid-column: 2; grid-row: 1 / span 2; }
}

@media (min-width: 75rem) {
  .masthead { grid-template-columns: auto 1fr auto; }
  .masthead nav { display: flex; justify-self: end; }
}

@media (hover: hover) {
  .hero__cta:hover, .masthead__cta:hover, .sticky-cta a:hover { background: var(--color-accent); color: white; }
  .link-cta:hover, .masthead nav a:hover { color: var(--color-accent-dark); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}