/* Boutique Stay. Change the colors here. */
:root {
  --bg: #f7f1e6;
  --paper: #fcf8f1;
  --plum: #3c2236;
  --plum-soft: #6e5468;
  --gold: #b5915a;
  --gold-dark: #8a6b3b;
  --sage: #8f9b80;
  --line: #e2d6c3;
  --serif: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", ui-serif, Georgia, serif;
  --text: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--plum);
  font: 18px/1.7 var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-dark); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.page { width: min(900px, 100% - 40px); margin: 0 auto; padding: 36px 0 32px; text-align: center; }

.head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.crest { margin: 0; color: var(--gold-dark); font-family: var(--serif); font-size: 1.2rem; letter-spacing: 0.3em; }
.since { margin: 0; color: var(--plum-soft); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; font-family: ui-sans-serif, system-ui, sans-serif; }

.frame {
  width: min(320px, 72vw);
  margin: 40px auto 28px;
  padding: 26px 22px 18px;
  border: 1px solid var(--gold);
  border-radius: 50% / 42%;
  background: var(--paper);
  box-shadow: 0 0 0 8px var(--bg), 0 0 0 9px var(--line);
}
.frame svg { display: block; width: 100%; height: auto; }
.lines { fill: none; stroke: var(--plum); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lines .thin, .win .thin { stroke-width: 1; }
.win rect { fill: #fdf3dc; }
.ivy circle { fill: var(--sage); opacity: 0.85; }
.knob { fill: var(--gold); }
.lines { stroke-dasharray: 2400; animation: sketch 3.5s ease-out both; }

.eyebrow { margin: 0 0 8px; color: var(--gold-dark); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; }
h1 { margin: 0 0 16px; font-family: var(--serif); font-size: clamp(2.8rem, 8vw, 5rem); font-weight: 400; line-height: 1; letter-spacing: 0.01em; }
.lead { max-width: 620px; margin: 0 auto 48px; color: var(--plum-soft); }

h2 { margin: 0 0 22px; font-family: var(--serif); font-size: 1.9rem; font-weight: 400; font-style: italic; }

.rooms { padding: 40px 0; border-top: 1px solid var(--line); }
.rooms ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.rooms li { padding: 8px 22px 12px; }
.rooms li + li { border-left: 1px solid var(--line); }
.num { display: block; margin-bottom: 6px; color: var(--gold); font-family: var(--serif); font-size: 2.2rem; line-height: 1; }
.rooms h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 1.3rem; font-weight: 400; }
.rooms p { margin: 0; color: var(--plum-soft); font-size: 0.95rem; line-height: 1.5; }
.rooms .from { margin-top: 10px; color: var(--plum); font-style: italic; }

.first { max-width: 560px; margin: 8px auto 48px; padding: 36px clamp(20px, 5vw, 44px); background: var(--plum); color: var(--bg); }
.first h2 { color: #f1e3c9; }
.first > p { margin: -10px 0 22px; color: #d6c6d1; font-size: 0.98rem; }
form { display: grid; gap: 6px; text-align: left; }
form label { margin-top: 8px; color: #e7cfa0; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; }
input, select { height: 46px; padding: 0 2px; border: 0; border-bottom: 1px solid #b89aa9; background: transparent; color: var(--bg); font: inherit; }
select option { color: var(--plum); }
input:focus-visible, select:focus-visible { outline: 2px solid #e7cfa0; outline-offset: 2px; }
form button { margin-top: 22px; height: 52px; border: 1px solid #e7cfa0; background: transparent; color: #f1e3c9; font: 600 0.8rem ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.3em; text-transform: uppercase; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
form button:hover { background: #e7cfa0; color: var(--plum); }
.note { min-height: 1.6em; margin: 10px 0 0; color: #e7cfa0; font-style: italic; text-align: center; }

.foot { padding-top: 20px; border-top: 1px solid var(--line); color: var(--plum-soft); font-size: 0.9rem; }
.foot p { margin: 0; }

@media (max-width: 720px) {
  .rooms ol { grid-template-columns: 1fr; }
  .rooms li + li { border-left: 0; border-top: 1px solid var(--line); padding-top: 20px; }
  .since { display: none; }
}

@keyframes sketch { from { stroke-dashoffset: 2400; } }

@media (prefers-reduced-motion: reduce) {
  .lines { animation: none; }
  form button { transition: none; }
}