/* Glaze: an inn's site as blue-and-white transferware. A cool glaze ground, cobalt engraving, one marmalade
   object to press. The glaze itself moves: cobalt bleeding slowly into it, as flow blue does in the firing. */
:root {
  --glaze: #f3f6fb; --glaze-2: #e7edf7; --glaze-3: #d6e0f0; --white: #fbfcfe;
  --cobalt: #1f3c9b; --cobalt-deep: #12276b; --cobalt-line: rgba(31, 60, 155, .22);
  --ink: #101a3a; --ink-soft: #36426b;
  --marm: #ef8a2a; --marm-hi: #f8ab5a; --marm-lo: #d9701a;
  --display: "Gloock", "Didot", "Bodoni 72", Georgia, serif;
  --text: "Atkinson Hyperlegible Next", "Avenir Next", "Segoe UI", sans-serif;
  --gut: max(16px, 4vw); --wide: 1240px; --measure: 62ch;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
* { box-sizing: border-box }
html { background: var(--glaze); scroll-behavior: smooth; scrollbar-color: #8a9cd0 var(--glaze-2); -webkit-text-size-adjust: 100% }
html.flat { background: radial-gradient(60vw 40vw at 82% 12%, rgba(31, 60, 155, .13), transparent 70%), radial-gradient(50vw 50vw at 6% 78%, rgba(31, 60, 155, .09), transparent 70%), var(--glaze) }
body { margin: 0; color: var(--ink); font: 400 1.125rem/1.62 var(--text); caret-color: var(--cobalt); text-rendering: optimizeLegibility }
::selection { background: var(--cobalt); color: var(--white) }
#flow { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block }
h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--cobalt-deep); text-wrap: balance; margin: 0 }
h1 { font-size: clamp(3.1rem, 1.6rem + 6vw, 6rem); line-height: .92; letter-spacing: -.012em }
h2 { font-size: clamp(2.1rem, 1.45rem + 2.6vw, 3.4rem); line-height: 1.02; letter-spacing: -.008em; margin-bottom: .45em }
h3 { font-size: 1.5rem; line-height: 1.1 }
p { margin: 0 0 1em; max-width: var(--measure) }
a { color: var(--cobalt-deep) }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 6px }
.skip { position: absolute; left: 16px; top: 8px; z-index: 9; opacity: 0; pointer-events: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--white); color: var(--cobalt-deep); font-weight: 700; border-radius: 999px }
.skip:focus { opacity: 1; pointer-events: auto }
.link { display: inline-flex; align-items: center; min-height: 44px; color: var(--cobalt-deep); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .24em; transition: text-decoration-thickness .15s var(--ease) }
.link:hover { text-decoration-thickness: 2px }

/* The example's ribbon */
.ribbon { background: var(--glaze-2); border-bottom: 1px dashed rgba(31, 60, 155, .4); padding: 2px var(--gut); text-align: center }
.ribbon p { margin: 0 auto; max-width: none; font-size: .9375rem; color: var(--ink-soft) }
.ribbon a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-underline-offset: .2em }

/* The bar */
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(4px + env(safe-area-inset-top, 0px)) var(--gut) 4px; background: rgba(243, 246, 251, .9); border-bottom: 1px solid var(--cobalt-line); transition: box-shadow .25s var(--ease) }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .bar { background: rgba(243, 246, 251, .78); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3) } }
body.scrolled .bar { box-shadow: 0 10px 24px -18px rgba(16, 26, 58, .5) }
.mark { display: flex; flex-direction: column; justify-content: center; min-height: 52px; text-decoration: none; color: var(--cobalt-deep) }
.mk-name { font: 400 1.5rem/1 var(--display) }
.mk-place { font: 600 .9375rem/1.3 var(--text); color: var(--ink-soft); letter-spacing: .02em }
#nav { display: flex; align-items: center; gap: 2px }
#nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--ink); font: 600 1rem var(--text); text-decoration: none; transition: background-color .18s var(--ease), color .18s var(--ease) }
#nav a:hover { background: var(--glaze-2); color: var(--cobalt-deep) }
#nav a[aria-current="page"] { color: var(--cobalt-deep); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em }
#nav a.book { margin-left: 8px; padding: 0 20px; color: var(--ink); background: linear-gradient(180deg, var(--marm-hi), var(--marm) 55%, var(--marm-lo)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 14px -8px rgba(150, 70, 0, .55) }
#nav a.book:hover { color: var(--ink); filter: saturate(1.08) brightness(1.03) }
.menu { display: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 7px }
.menu span { display: block; width: 24px; height: 2px; background: var(--cobalt-deep); border-radius: 2px; transition: transform .22s var(--ease) }
.menu[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg) }
.menu[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg) }

/* The button: the one marmalade object */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; color: var(--ink); font: 700 1.0625rem/1 var(--text); letter-spacing: .01em;
  background: linear-gradient(180deg, var(--marm-hi) 0%, var(--marm) 52%, var(--marm-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(140, 60, 0, .22), 0 10px 22px -12px rgba(150, 66, 0, .7);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease) }
.btn:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(140, 60, 0, .22), 0 14px 26px -12px rgba(150, 66, 0, .75) }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(140, 60, 0, .2), 0 4px 10px -6px rgba(150, 66, 0, .6) }
.btn:focus-visible { outline: 3px solid var(--cobalt-deep); outline-offset: 3px }

/* The first view: the words and the house on its platter */
.first { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 72px); align-items: center; max-width: var(--wide); margin: 0 auto; padding: clamp(28px, 6vh, 76px) var(--gut) clamp(40px, 7vh, 92px) }
.first .line { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.45; margin: 26px 0 30px; max-width: 30ch; color: var(--ink) }
.act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px }
.assure { margin: 0; max-width: 34ch; font-size: 1rem; line-height: 1.45; color: var(--ink-soft) }
.facts { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; padding: 0; margin: 34px 0 0 }
.facts li { display: flex; align-items: center; gap: 10px; font: 600 1rem var(--text); color: var(--cobalt-deep) }
.facts li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--cobalt); box-shadow: inset 0 0 0 2.5px var(--glaze), inset 0 0 0 7px var(--cobalt) }
.platter-wrap { margin: 0; justify-self: center; width: min(100%, 640px) }
.platter { position: relative; aspect-ratio: 1; width: 100%; border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #ffffff 0%, #f8fafd 42%, #e6ecf6 100%);
  box-shadow: 0 34px 60px -30px rgba(16, 26, 58, .55), 0 12px 20px -14px rgba(16, 26, 58, .3), inset 0 2px 0 rgba(255, 255, 255, .95), inset 0 -10px 26px rgba(31, 60, 155, .1) }
.platter canvas { position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; border-radius: 50% }
.platter .rim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
.platter-wrap figcaption { margin: 18px auto 0; max-width: 46ch; text-align: center; font-size: .9375rem; color: var(--ink-soft) }
.rim-line { fill: none; stroke: var(--cobalt); stroke-width: 1px; vector-effect: non-scaling-stroke }
.rim-dots { fill: none; stroke: var(--cobalt); stroke-width: 1.6px; stroke-dasharray: 0 5; stroke-linecap: round; vector-effect: non-scaling-stroke }
.rim-leaf { fill: var(--cobalt) }

/* A border, as a transfer print's */
.band { max-width: var(--wide); height: 20px; margin: 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='20'%3E%3Cg fill='none' stroke='%231f3c9b' stroke-width='1'%3E%3Cpath d='M0 2.5h28M0 17.5h28'/%3E%3Cpath d='M0 10c4-6 10-6 14 0s10 6 14 0'/%3E%3C/g%3E%3Ccircle cx='7' cy='10' r='1.5' fill='%231f3c9b'/%3E%3Cpath d='M21 6.5q2.6 3.5 0 7q-2.6-3.5 0-7z' fill='%231f3c9b'/%3E%3C/svg%3E") repeat-x center / 28px 20px; opacity: .85 }

/* The rooms: plates on a dresser */
.dresser-sec { max-width: var(--wide); margin: 0 auto; padding: clamp(56px, 9vh, 112px) var(--gut) clamp(40px, 6vh, 72px) }
.intro { font-size: 1.1875rem; color: var(--ink); max-width: 56ch }
.dresser { margin-top: clamp(28px, 4vh, 48px) }
.shelf { position: relative; display: flex; justify-content: center; gap: clamp(14px, 2.6vw, 40px); list-style: none; margin: 0; padding: 0 0 26px }
.shelf + .shelf { margin-top: 44px }
.shelf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-top: 2px solid var(--cobalt-deep); background: linear-gradient(180deg, rgba(18, 39, 107, .16), transparent) }
.shelf li { flex: 0 1 270px; display: flex }
.plate-link { flex: 1; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; text-align: center; gap: 4px; padding: 6px 8px 10px; border-radius: 18px; color: inherit; text-decoration: none }
.plate-link .facts-line { align-self: start }
.plate-link .from { align-self: end }
.plate-link .plate { width: 100%; max-width: 224px; aspect-ratio: 1; filter: drop-shadow(0 12px 12px rgba(16, 26, 58, .2)) drop-shadow(0 2px 2px rgba(16, 26, 58, .12)); transform-origin: 50% 92%; transition: transform .55s var(--ease) }
.plate-link:hover .plate { transform: translateY(-5px) rotate(-2.5deg) }
.plate-link h3 { margin-top: 12px }
.facts-line { margin: 0; font-size: 1rem; color: var(--ink-soft) }
.from { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums lining-nums }
.from b { color: var(--cobalt-deep) }
.plate-link:focus-visible { outline-offset: 2px }
.more { margin: 30px 0 0; text-align: center; max-width: none }

/* The plans */
.pl-wall { fill: var(--cobalt-deep) }
.pl-win { fill: var(--white); stroke: var(--cobalt); stroke-width: 1px; vector-effect: non-scaling-stroke }
.pl-line, .pl-leaf, .pl-arc, .pl-fix, .pl-thin, .pl-faint, .pl-dash, .pl-dashline, .pl-bar, .pl-bed, .pl-hatch { fill: none; stroke: var(--cobalt); vector-effect: non-scaling-stroke }
.pl-line, .pl-fix { stroke-width: 1.1px }
.pl-leaf { stroke-width: 1.6px; stroke: var(--cobalt-deep) }
.pl-arc { stroke-width: .9px; stroke-dasharray: 3 3 }
.pl-thin { stroke-width: .8px }
.pl-faint { stroke-width: .6px; opacity: .55 }
.pl-dash { stroke-width: 1px; stroke-dasharray: 5 4 }
.pl-dashline { stroke-width: 1px; stroke-dasharray: 7 5 }
.pl-bar { stroke-width: 2.4px; stroke-linecap: round }
.pl-bed { stroke-width: 1.3px; fill: rgba(31, 60, 155, .06) }
.pl-hatch { stroke-width: .8px; fill: rgba(31, 60, 155, .35) }
.pl-north { fill: var(--cobalt) }
.pl-note, .pl-dim { font: 600 12px var(--text); fill: var(--cobalt-deep) }
.pl-dim { font-size: 13px }

/* Breakfast */
.breakfast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: center; max-width: var(--wide); margin: 0 auto; padding: clamp(48px, 8vh, 100px) var(--gut) }
.menu-card { justify-self: center; width: min(100%, 440px); padding: 44px 34px 36px; text-align: center; background: var(--white); border: 1.5px solid var(--cobalt); box-shadow: inset 0 0 0 6px var(--white), inset 0 0 0 7px var(--cobalt), 0 30px 44px -30px rgba(16, 26, 58, .5), 0 4px 8px -4px rgba(16, 26, 58, .16); transform: rotate(-1.2deg) }
.menu-card h3 { font-size: 2rem; margin-bottom: 14px }
.menu-card ul { list-style: none; margin: 0; padding: 0 }
.menu-card li { padding: 12px 0; font-size: 1.0625rem; line-height: 1.4; color: var(--ink) }
.menu-card li + li::before { content: ""; display: block; height: 10px; margin: 0 auto 14px; width: 60px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10'%3E%3Cpath d='M2 5h20M38 5h20' stroke='%231f3c9b' stroke-width='1'/%3E%3Cpath d='M30 1q4 4 0 8q-4-4 0-8z' fill='%231f3c9b'/%3E%3C/svg%3E") center / contain no-repeat }

/* The house */
.house { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px clamp(28px, 5vw, 80px); max-width: var(--wide); margin: 0 auto; padding: clamp(48px, 8vh, 100px) var(--gut) clamp(60px, 10vh, 120px) }
.house .big { grid-column: 2; font: 400 clamp(1.7rem, 1.2rem + 1.9vw, 2.65rem)/1.16 var(--display); color: var(--cobalt-deep); max-width: 26ch; margin: 0 0 22px }
.house .rest { grid-column: 2 }

/* A date: the cobalt field */
.book { color: var(--white); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 7px), linear-gradient(180deg, var(--cobalt), #1a3487) }
.book-in { max-width: var(--wide); margin: 0 auto; padding: clamp(56px, 10vh, 112px) var(--gut) }
.book h2 { color: var(--white) }
.dates { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr) minmax(0, .7fr) minmax(0, 1.4fr) auto; gap: 14px; align-items: end; margin-top: 18px }
.dates label, .ask label { display: grid; gap: 7px; font: 600 1rem var(--text) }
.dates input, .dates select { width: 100%; min-height: 54px; padding: 0 14px; border: 1.5px solid rgba(251, 252, 254, .5); border-radius: 14px; background: var(--white); color: var(--ink); font: 400 1.0625rem var(--text); accent-color: var(--cobalt) }
.dates input:focus-visible, .dates select:focus-visible { outline: 3px solid var(--marm); outline-offset: 2px }
.book .btn:focus-visible { outline-color: var(--white) }
.status { min-height: 1.6em; margin: 16px 0 0; font-weight: 600; color: var(--white); max-width: 70ch }
.status:not(:empty) { padding: 12px 16px; border-radius: 12px; background: rgba(251, 252, 254, .12); border: 1px solid rgba(251, 252, 254, .3) }
.promises { display: flex; flex-wrap: wrap; gap: 10px 30px; list-style: none; padding: 0; margin: 24px 0 0 }
.promises li { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; color: var(--white) }
.promises li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--white); box-shadow: inset 0 0 0 2.5px var(--cobalt), inset 0 0 0 6px var(--white) }

/* The foot */
.foot { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr; gap: 28px clamp(24px, 4vw, 64px); padding: clamp(48px, 8vh, 80px) var(--gut) calc(32px + env(safe-area-inset-bottom, 0px)); background: var(--cobalt-deep); color: var(--white) }
.foot p { color: rgba(251, 252, 254, .92); font-size: 1rem }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); text-underline-offset: .22em }
.f-name { font: 400 1.9rem/1 var(--display); color: var(--white) !important; margin-bottom: 14px }
.f-reach { display: flex; flex-direction: column; align-items: flex-start }
.f-reach .hours { margin-top: 10px; max-width: 46ch }
.f-pages { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 26px; align-content: start }
.credit { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 16px; border-top: 1px solid rgba(251, 252, 254, .2); max-width: none }

/* The other pages */
.head { max-width: var(--wide); margin: 0 auto; padding: clamp(40px, 8vh, 96px) var(--gut) clamp(20px, 4vh, 44px) }
.head h1 { font-size: clamp(2.8rem, 1.7rem + 4.2vw, 4.9rem); margin-bottom: 22px }
.reach { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0 }
.room { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: start; max-width: var(--wide); margin: 0 auto; padding: clamp(40px, 7vh, 84px) var(--gut); border-top: 1px solid var(--cobalt-line); scroll-margin-top: 80px }
.room:nth-of-type(even) .plan { order: 2 }
.plan { margin: 0; padding: clamp(10px, 2vw, 22px); background: var(--white); border: 1px solid var(--cobalt-line); border-radius: 4px; box-shadow: 0 24px 40px -30px rgba(16, 26, 58, .5) }
.plan svg { display: block; width: 100%; height: auto; max-height: 76vh }
.plan figcaption { margin-top: 10px; font-size: .9375rem; color: var(--ink-soft) }
.plan.wide { max-width: min(var(--wide) - 2 * var(--gut), 820px); margin: 8px auto 0 }
.about h2 { margin-bottom: .35em }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; margin: 22px 0 }
.specs div { padding: 11px 0; border-top: 1px solid var(--cobalt-line) }
.specs dt { font: 600 .9375rem var(--text); color: var(--ink-soft) }
.specs dd { margin: 2px 0 0; font-size: 1.0625rem }
.price { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; margin-bottom: 18px }
.price b { font: 400 1.6rem var(--display); color: var(--cobalt-deep) }
.access-note { margin: 22px 0 0; padding: 14px 16px 6px; border-radius: 12px; background: var(--glaze-2); font-size: 1rem }
.access-note b { display: block; color: var(--cobalt-deep) }
.facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 72px); max-width: var(--wide); margin: 0 auto; padding: 8px var(--gut) clamp(32px, 6vh, 64px) }
.fact { padding: 22px 0 8px; border-top: 1px solid var(--cobalt-line) }
.fact h2 { font-size: 1.7rem; margin-bottom: 10px }
.fact ul { margin: 0; padding: 0 0 0 1.1em }
.fact li { margin-bottom: 8px; max-width: 58ch }
.fact li::marker { color: var(--cobalt) }
.faq, .write, .places { max-width: var(--wide); margin: 0 auto; padding: clamp(28px, 5vh, 56px) var(--gut) }
.faq details { border-top: 1px solid var(--cobalt-line); max-width: 860px }
.faq details:last-of-type { border-bottom: 1px solid var(--cobalt-line) }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; cursor: pointer; list-style: none; font: 400 1.4rem/1.2 var(--display); color: var(--cobalt-deep) }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: ""; flex: none; width: 18px; height: 18px; background: linear-gradient(var(--cobalt), var(--cobalt)) center / 18px 2px no-repeat, linear-gradient(var(--cobalt), var(--cobalt)) center / 2px 18px no-repeat; transition: transform .25s var(--ease) }
.faq details[open] summary::after { transform: rotate(45deg) }
.faq details p { margin: 0 0 20px }
.ask { display: grid; gap: 16px; max-width: 640px; margin-top: 16px }
.ask input, .ask textarea { width: 100%; min-height: 54px; padding: 12px 14px; border: 1.5px solid rgba(31, 60, 155, .45); border-radius: 14px; background: var(--white); color: var(--ink); font: 400 1.0625rem var(--text) }
.ask textarea { min-height: 140px; resize: vertical }
.ask .btn { justify-self: start }
.ask .hp { display: none }
.sent:not(:empty) { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--glaze-2); font-weight: 600; max-width: 640px }
.map { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gut) }
.map svg { display: block; width: 100%; height: auto; background: var(--white); border: 1px solid var(--cobalt-line); border-radius: 4px; box-shadow: 0 24px 40px -30px rgba(16, 26, 58, .5) }
.map figcaption { margin-top: 10px; font-size: .9375rem; color: var(--ink-soft) }
.mp-frame { fill: none; stroke: var(--cobalt); stroke-width: 2px; vector-effect: non-scaling-stroke }
.mp-frame.thin { stroke-width: .8px }
.mp-bank, .mp-road, .mp-path, .mp-rail, .mp-lane { fill: none; stroke: var(--cobalt); vector-effect: non-scaling-stroke }
.mp-bank { stroke-width: 1.4px }
.mp-road { stroke-width: 1px }
.mp-lane { stroke-width: 1px; stroke-dasharray: 2 3 }
.mp-path { stroke-width: 1.2px; stroke-dasharray: 6 5 }
.mp-rail { stroke-width: 1.4px }
.mp-water, .mp-tick, .mp-hach { stroke: var(--cobalt); stroke-width: .7px; vector-effect: non-scaling-stroke }
.mp-hach { stroke-width: 1px }
.mp-ferry { stroke: var(--cobalt-deep); stroke-width: 2px; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke }
.mp-tree { fill: none; stroke: var(--cobalt); stroke-width: .9px; vector-effect: non-scaling-stroke }
.mp-dot { fill: var(--cobalt); opacity: .6 }
.mp-house, .mp-north { fill: var(--cobalt-deep) }
.mp-num { fill: var(--white); stroke: var(--cobalt-deep); stroke-width: 1.6px; vector-effect: non-scaling-stroke }
.mp-numt { font: 400 17px var(--display); fill: var(--cobalt-deep) }
.mp-label, .mp-town, .mp-river { paint-order: stroke; stroke: var(--white); stroke-width: 5px; stroke-linejoin: round }
.mp-label { font: 600 15px var(--text); fill: var(--cobalt-deep) }
.mp-town { font: 400 30px var(--display); fill: var(--cobalt-deep) }
.mp-river { font: italic 400 18px var(--text); fill: var(--cobalt) }
.mp-scale { stroke: var(--cobalt-deep); stroke-width: 1.4px; vector-effect: non-scaling-stroke }
.places ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px clamp(24px, 4vw, 56px); list-style: none; margin: 0; padding: 0 }
.places li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--cobalt-line) }
.pn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.6px solid var(--cobalt-deep); background: var(--white); font: 400 1.25rem var(--display); color: var(--cobalt-deep) }
.places h3 { margin-bottom: 6px }
.places p { margin: 0 0 4px }
.places .how { font-weight: 600; color: var(--ink-soft) }
.doc { max-width: 820px; margin: 0 auto; padding: 0 var(--gut) clamp(48px, 8vh, 96px) }
.doc section { padding: 18px 0; border-top: 1px solid var(--cobalt-line) }
.doc h2 { font-size: 1.7rem }

/* Arrival: the plates settle on the shelf */
@media (prefers-reduced-motion: no-preference) {
  .js .shelf li { animation: settle .9s var(--ease) both; animation-play-state: paused }
  .js .shelf.in li { animation-play-state: running }
  .js .shelf li:nth-child(2) { animation-delay: .07s } .js .shelf li:nth-child(3) { animation-delay: .14s } .js .shelf li:nth-child(4) { animation-delay: .21s }
  @keyframes settle { from { transform: translateY(-14px) rotate(-3deg) } to { transform: none } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important } }

/* Narrower */
@media (max-width: 980px) {
  .menu { display: inline-flex }
  #nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gut) 18px; background: var(--glaze); border-bottom: 1px solid var(--cobalt-line); box-shadow: 0 24px 30px -24px rgba(16, 26, 58, .45) }
  #nav.open { display: flex }
  #nav a { min-height: 52px; padding: 0 8px; border-radius: 10px; font-size: 1.125rem }
  #nav a.book { justify-content: center; margin: 10px 0 0 }
  .first { grid-template-columns: 1fr }
  .platter-wrap { width: min(100%, 520px) }
  .dates { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .dates label:first-child, .dates .room-pick, .dates .btn { grid-column: 1 / -1 }
  .foot { grid-template-columns: 1fr 1fr }
  .f-pages { grid-column: 1 / -1 }
}
@media (max-width: 760px) {
  body { font-size: 1.0625rem }
  .breakfast, .house, .room, .facts-grid, .places ol { grid-template-columns: 1fr }
  .house .big, .house .rest { grid-column: 1 }
  .room:nth-of-type(even) .plan { order: 0 }
  .shelf { flex-direction: column; gap: 0; padding: 0 }
  .shelf + .shelf { margin-top: 0 }
  .shelf::after { display: none }
  .shelf li { flex: none }
  .plate-link { grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; justify-items: start; text-align: left; column-gap: 18px; row-gap: 2px; padding: 14px 0; border-radius: 0; border-bottom: 1px solid var(--cobalt-line) }
  .plate-link .plate { grid-row: 1 / span 4; max-width: 116px }
  .plate-link h3 { margin-top: 6px }
  .menu-card { transform: none }
  .foot { grid-template-columns: 1fr }
  .f-pages { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .specs { grid-template-columns: 1fr 1fr }
}