.skip { position: absolute; left: 12px; top: -48px; background: #fff; color: #1a1612; padding: 8px 12px; z-index: 80; }
.skip:focus { top: 12px; }
.hero {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 28px 22px 36px;
  color: #fff;
  background: #1a1612;
  position: relative;
  overflow: hidden;
}
/* Text stays above the scrim and never fades. Layers sit behind it. */
.hero > *:not(.layer-bg):not(.layer-mid) { position: relative; z-index: 2; }
.layer-bg, .layer-mid {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
/* Extra bleed so a strong lag (about half scroll speed) never shows an edge. */
.layer-bg { top: -56%; height: 168%; }
.layer-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.layer-mid {
  top: -40%;
  height: 180%;
  background:
    radial-gradient(closest-side at 68% 62%, rgba(236, 196, 150, 0.55), rgba(236, 196, 150, 0) 72%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(28, 22, 16, 0.42);
  pointer-events: none;
}
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; margin: 0; max-width: 16ch; }
.hero .one { max-width: 38rem; font-size: 1.12rem; margin: 0; }
.mark { width: 28px; height: 28px; color: #fff; background: none; border: 0; padding: 0; cursor: pointer; }
.mark svg { width: 100%; height: 100%; display: block; overflow: visible; shape-rendering: geometricPrecision; }
@media (min-width: 1200px) {
  .mark { width: 28px; height: 28px; }
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 10px 18px; border-radius: 999px;
  background: #c4785a; color: #fff; text-decoration: none; font-weight: 600;
  border: 0;
}
.btn.ghost { background: transparent; color: #6f4a2f; border: 1px solid #c4b5a0; }
.btn.light { background: #fff; color: #3d3429; }
.section { padding: 28px 22px; max-width: 880px; }
.section p { margin: 0 0 14px; }
.alt { background: #fff; border-top: 1px solid #e2d6c8; border-bottom: 1px solid #e2d6c8; }
.section h2 { font-family: var(--serif); font-weight: 500; font-size: 2rem; margin: 0 0 10px; }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shot { height: 220px; border-radius: 12px; overflow: hidden; background: #e7e1d8; position: relative; }
.shot.wide { grid-column: 1 / -1; height: 320px; }
.shot img {
  width: 100%;
  height: 184%;
  margin-top: -42%;
  object-fit: cover;
  display: block;
  will-change: transform;
}
.days { display: flex; flex-wrap: wrap; gap: 8px; }
.day { width: 112px; background: #fff; border: 1px solid #e2d6c8; border-radius: 12px; padding: 8px; }
.day strong { display: block; }
.places { list-style: none; padding: 0; margin: 0; }
.places li { padding: 8px 0; border-bottom: 1px solid #e2d6c8; }
.reviews article { background: #fff; border-radius: 14px; padding: 14px; margin: 0 0 10px; border: 1px solid #e2d6c8; }
.reviews header { display: flex; justify-content: space-between; gap: 8px; font-weight: 650; }
.links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
footer.site {
  background: #2c241c; color: #f7f1e8; padding: 28px 22px 48px;
}
footer.site a { color: #e8d5c4; }
footer.site p { margin: 0 0 10px; }
.langs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.lang {
  min-height: 26px; min-width: 28px; padding: 2px 6px; border-radius: 999px;
  border: 1px solid rgba(232,213,196,0.45); background: transparent; color: #fff;
  font-size: 10px; font-weight: 700;
}
.lang.is-on { background: #e8d5c4; color: #2c241c; border-color: #e8d5c4; }
.a11y { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.a11y button {
  min-height: 36px; border-radius: 999px; border: 1px solid rgba(232,213,196,0.45);
  background: transparent; color: #fff; padding: 6px 10px; font-size: 13px;
}
.a11y button.is-on { background: #e8d5c4; color: #2c241c; }
.note { font-size: 0.95rem; }
html.lpm-large { zoom: 1.16; }
html.lpm-contrast { filter: contrast(1.22); }
html.lpm-still *, html.lpm-still *::before, html.lpm-still *::after { animation: none !important; transition: none !important; }
.map-svg { width: 100%; max-width: 640px; height: auto; background: #f0e8de; border-radius: 14px; }
.prose p { margin: 0 0 12px; }
@media (max-width: 640px) {
  .shot { height: 160px; }
  .shot.wide { height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .layer-bg { top: 0; height: 100%; }
  .layer-mid { display: none; }
  .shot img { height: 100%; margin-top: 0; transform: none; }
}
html.lpm-still .layer-bg,
html.lpm-plx-off .layer-bg { top: 0; height: 100%; transform: none; }
html.lpm-still .layer-mid,
html.lpm-plx-off .layer-mid { display: none; }
html.lpm-still .shot img,
html.lpm-plx-off .shot img { height: 100%; margin-top: 0; transform: none; }