:root {
  --kd-bg: #ffffff; --kd-surface: #f0efee; --kd-text: #241c16; --kd-muted: #6b6058;
  --kd-accent: #6f5732; --kd-on-accent: #ffffff; --kd-accent-2: #a39c92; --kd-accent-ink: #6f5732;
}

/* Gallery scale: one huge, one large, one middle, text, small */
:root {
  --m: 16px;
  --gap: 16px;
  --bar: 60px;
  --radius: 8px;
  --fs-xl: clamp(64px, 20vw, 200px);
  --fs-l: 9.4vw;
  --fs-m: clamp(22px, 2.6vw, 36px);
  --fs-text: 17px;
  --fs-small: 15px;
  --section: 104px;
}

@media (min-width: 768px) {
  :root {
    --m: 32px;
    --gap: 24px;
    --bar: 72px;
    --fs-xl: clamp(64px, 15vw, 200px);
    --fs-l: clamp(48px, 6.5vw, 96px);
    --fs-text: 18px;
    --section: 160px;
  }
}

@media (min-width: 1024px) {
  :root { --fs-xl: clamp(64px, 13vw, 200px); --section: 200px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--kd-bg);
  color: var(--kd-text);
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--fs-text);
  line-height: 1.55;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
figure { margin: 0; }
h1, h2, h3, p, ul, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

:focus-visible { outline: 2px solid var(--kd-accent-ink); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { max-width: 1600px; margin-inline: auto; padding-inline: var(--m); }

.display {
  font-size: var(--fs-l);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.display span { display: block; }

/* One corner, one treatment, every picture */
figure { border-radius: var(--radius); overflow: hidden; background: var(--kd-surface); }
figure img { width: 100%; height: 100%; object-fit: cover; }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  background: var(--kd-accent); color: var(--kd-on-accent);
  font-size: var(--fs-text); font-weight: 500; text-decoration: none;
}
.btn:hover { background: color-mix(in srgb, var(--kd-accent) 86%, var(--kd-text)); }
.btn:active { scale: 0.98; }

.link { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.link:hover { text-decoration-color: currentColor; }

@media (prefers-reduced-motion: no-preference) {
  a { transition: color 0.3s ease, text-decoration-color 0.3s ease, translate 0.4s cubic-bezier(.2,.7,.2,1); }
  .btn { transition: background-color 0.3s ease, scale 0.2s ease; }
}

/* Header: a plain bar on the white wall */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--bar);
  max-width: 1600px; margin-inline: auto; padding-inline: var(--m);
}
.wordmark { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; text-decoration: none; }
.bar-nav { display: flex; align-items: center; gap: 20px; font-size: var(--fs-small); }
.bar-nav a { text-decoration-color: transparent; }
.bar-nav a:hover { text-decoration-color: currentColor; }
.bar-nav .bar-call { text-decoration-color: currentColor; }
.bar-room, .bar-call-long { display: none; }

@media (min-width: 768px) {
  .wordmark { font-size: 22px; }
  .bar-nav { gap: 32px; font-size: var(--fs-text); }
  .bar-room { display: inline; }
  .bar-call-long { display: inline; }
}

/* Hero: the picture, then the name set beneath it like a wall label */
.hero {
  max-width: 1600px; margin-inline: auto;
  padding: 0 var(--m) 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.hero-photo { height: 56svh; min-height: 300px; }
.hero-photo img { object-position: 40% 50%; scale: 1.15; }

.hero-name {
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.03em;
  padding-bottom: 0.04em;
}
.hero-text { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.hero-headline { font-size: var(--fs-m); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.hero-sub { max-width: 52ch; order: 3; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; order: 2; }

@media (min-width: 1024px) {
  .hero { height: calc(100svh - var(--bar)); min-height: 620px; padding-bottom: 32px; gap: 24px; }
  .hero-photo { flex: 1 1 auto; height: auto; min-height: 320px; }
  .hero-photo img { object-position: 50% 45%; }
  .hero-label {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
    align-items: end;
  }
  .hero-name { grid-column: 1 / 8; }
  .hero-text { grid-column: 8 / 13; margin: 0 0 0.6em; gap: 16px; }
  .hero-sub { order: 2; }
  .hero-actions { order: 3; margin-top: 8px; }
}

/* Intro: a heading captioning a panorama */
.intro { padding-top: clamp(96px, 16svh, 160px); }
.captions { margin-top: 28px; font-size: var(--fs-small); line-height: 1.45; max-width: 34ch; }
.captions p { display: inline; }
.captions p + p::before { content: " "; }
.pano { margin-top: 40px; border-radius: var(--radius); aspect-ratio: 4 / 5; }
.pano img { object-position: 45% 90%; scale: 1.15; }

.intro-body { padding-top: 96px; display: grid; gap: 72px; }
.about { display: grid; gap: 1em; max-width: 60ch; }
.highlights { display: grid; gap: 40px; }
.highlights h3 { font-size: var(--fs-m); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 10px; }
.highlights p { max-width: 40ch; }

@media (min-width: 768px) {
  .captions { display: flex; gap: 48px; max-width: none; }
  .captions p { display: block; width: 150px; }
  .captions p + p::before { content: none; }
  .pano { aspect-ratio: 21 / 9; }
  .intro-body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-top: 120px; }
  .about { grid-column: 1 / 7; }
  .highlights { grid-column: 8 / 13; gap: 48px; }
}

/* What's on: the stone room, everything hung from one axis */
.menu {
  margin-top: var(--section);
  background: var(--kd-surface);
  padding-bottom: var(--section);
}
.menu-head {
  min-height: 50svh;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding-block: 64px;
}
.menu-head p { max-width: 38ch; }

.row { display: flex; flex-direction: column; gap: 12px; margin-top: 64px; }
.row h3 { font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.row p { max-width: 34ch; }
.row-photo { margin-top: 12px; }
.row-photo--tall { width: 100%; aspect-ratio: 4 / 5; }
.row-photo--tall img { object-position: 100% 100%; scale: 1.8; transform-origin: 100% 100%; }
.row-photo--wide { width: 70%; align-self: flex-end; aspect-ratio: 3 / 2; }

@media (min-width: 768px) {
  .menu-head {
    min-height: 70svh;
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
    align-content: center;
  }
  .menu-head > * { grid-column: 5 / 12; }
  .menu-head .display { font-size: clamp(40px, 5vw, 80px); }
  .row {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
    grid-template-rows: auto 1fr; align-items: start;
    margin-top: 112px;
  }
  .row h3 { grid-column: 5 / 10; font-size: clamp(28px, 3vw, 48px); }
  .row p { grid-column: 5 / 10; margin-top: 4px; }
  .row-photo { grid-column: 10 / 13; grid-row: 1 / 3; justify-self: end; margin-top: 0; }
  .row-photo--tall { width: min(240px, 100%); }
  .row-photo--wide { width: min(320px, 100%); align-self: start; }
}

/* Kind words: portrait and offset quotation */
.words { padding-block: var(--section); }
.words-grid { display: flex; flex-direction: column; gap: 32px; }
.portrait { order: -1; width: 72%; aspect-ratio: 3 / 4; }
.quote p { font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; max-width: 26ch; }
.quote footer { margin-top: 20px; font-size: var(--fs-small); color: var(--kd-muted); }
.more-words { margin-top: 56px; display: grid; gap: 32px; max-width: 46ch; }
.more-words footer { margin-top: 8px; font-size: var(--fs-small); color: var(--kd-muted); }
.rating { font-size: var(--fs-small); color: var(--kd-muted); }

@media (min-width: 768px) {
  .words-grid {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
    align-items: start;
  }
  .portrait { grid-column: 2 / 6; grid-row: 1; width: auto; max-height: 72svh; }
  .words-text { grid-column: 7 / 13; grid-row: 1; padding-top: 120px; }
  .quote p { font-size: clamp(24px, 2.6vw, 36px); }
  .quote footer { margin-top: 32px; }
  .more-words { margin-top: 96px; }
}

/* Visit: the card is the wall label for the place */
.visit { position: relative; }
.visit-photo { height: 70svh; border-radius: var(--radius); }
.visit-photo img { object-position: 30% 50%; }

.card {
  position: relative;
  margin: -80px 16px 0;
  background: var(--kd-bg);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 28px 24px 0;
  display: flex; flex-direction: column; gap: 18px;
}
.card h2 { font-size: 28px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
.card address { font-style: normal; }
.card address a { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.card address a:hover { text-decoration-color: currentColor; }

.hours { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.hours th { text-align: left; font-weight: 400; padding: 3px 12px 3px 0; }
.hours td { text-align: right; padding: 3px 0; white-space: nowrap; }

.card-btn { margin: 8px -24px 0; min-height: 56px; }

@media (min-width: 768px) {
  .visit { min-height: max(100svh, 640px); }
  .visit-photo { position: absolute; inset: 0; height: auto; }
  .card {
    position: absolute; top: 60px; right: 60px;
    width: 380px; margin: 0; padding: 32px 32px 0;
  }
  .card-btn { margin: 8px -32px 0; min-height: 52px; }
}

@media (min-width: 1700px) {
  .card { right: calc((100% - 1600px) / 2 + 60px); }
}

/* Footer: a close crop beside the floor plan */
.foot {
  margin-top: var(--section);
  background: var(--kd-text);
  color: var(--kd-bg);
}
.foot-photo { height: 50svh; border-radius: var(--radius); }
.foot-photo img { object-position: 48% 70%; scale: 1.3; transform-origin: 50% 80%; }

.foot-field { padding: 48px var(--m) 28px; display: flex; flex-direction: column; }
.foot-mark { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; text-decoration: none; }
.foot-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 40px; }
.foot-menu a {
  font-size: 8vw; font-weight: 500; line-height: 1; letter-spacing: -0.02em;
  text-decoration: none;
}
.foot-menu:hover a:not(:hover) { color: color-mix(in srgb, var(--kd-bg) 50%, var(--kd-text)); }
.foot-menu a:hover { translate: 12px 0; }
.foot-blocks { display: grid; gap: 24px; margin-top: 56px; font-size: var(--fs-small); line-height: 1.6; }
.foot-blocks a { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.foot-blocks a:hover { text-decoration-color: currentColor; }
.legal { margin-top: 48px; font-size: var(--fs-small); color: color-mix(in srgb, var(--kd-bg) 62%, var(--kd-text)); }
.foot :focus-visible { outline-color: var(--kd-bg); }

@media (min-width: 768px) {
  .foot { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
  .foot-photo { height: auto; min-height: 100%; }
  .foot-field { padding: 80px var(--m) 32px calc(100% / 6); }
  .foot-menu { gap: 28px; margin-top: 48px; }
  .foot-menu a { font-size: clamp(26px, 2.6vw, 40px); }
  .foot-blocks { grid-template-columns: repeat(2, minmax(0, 220px)); gap: 32px; margin-top: 64px; }
  .legal { margin-top: auto; padding-top: 48px; }
}