/* Self-hosted, so no page calls a third party for its type (the privacy page says so). Both are variable fonts:
   one file per alphabet carries every weight. A page in English fetches only the two latin files, 84 KB. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
.lw{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;min-height:44px;color:inherit}
.lw-m{height:34px;width:auto;flex:none;display:block}
.lw-t{display:flex;flex-direction:column;justify-content:center;gap:.28rem}
.lw-n{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:1.12rem;line-height:1;
 letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.lw-div{display:flex;align-items:center;gap:.45rem}
.lw-div:before,.lw-div:after{content:"";height:1px;width:1.2rem;background:currentColor;opacity:.4}
.lw-div .st{width:7px;height:7px;color:#D49373}
.lw-tag{font-family:"Cormorant Garamond",Georgia,serif;font-size:.8rem;letter-spacing:.11em;line-height:1;opacity:.75;white-space:nowrap}
.lw-stack{flex-direction:column;gap:1.1rem;text-align:center}
.lw-stack .lw-t{align-items:center;gap:.55rem}
.lw-stack .lw-m{height:128px}
.lw-stack .lw-n{font-size:2.5rem;letter-spacing:.3em;text-indent:.3em}
.lw-stack .lw-tag{font-size:1.05rem;letter-spacing:.14em}
.lw-stack .lw-div:before,.lw-stack .lw-div:after{width:2.4rem}
@media(max-width:560px){.lw-m{height:28px}.lw-n{font-size:.95rem;letter-spacing:.18em}.lw-tag,.lw-div{display:none}
 .lw-stack .lw-m{height:96px}.lw-stack .lw-n{font-size:1.7rem}.lw-stack .lw-tag,.lw-stack .lw-div{display:flex}}
:root{--bg:#191917;--bg2:#211F1D;--bg3:#272421;--line:#33302b;--line2:#443E36;--fg:#F6F2EA;--muted:#a39c8f;--sand:#E7DCC7;--terra:#D49373;--sea:#88A8B3;--olive:#8a9668;--bar:rgba(25,25,23,.94);--shot:saturate(.9) brightness(.85);--bk-ink:#E7DCC7;--bk-on:#211F1D;
 /* One radius scale. There were seven ad-hoc values (999/8/50%/3/10/4/6) and nothing lined up. */
 --r1:6px;--r2:10px;--r3:16px;--rp:999px;
 /* Two elevations and no more. Tinted with the palette's own brown, never pure black: black on cream reads as dirt. */
 --e1:0 1px 2px rgba(0,0,0,.34),0 4px 12px -6px rgba(0,0,0,.5);
 --e2:0 2px 6px rgba(0,0,0,.4),0 18px 40px -16px rgba(0,0,0,.7);
 --tint:rgba(246,242,234,.05);--tint2:rgba(246,242,234,.09);
 /* One rhythm for every animation on the site. 180ms for feedback, 300ms for something that travels. */
 --dur:.18s;--dur2:.3s;--ease:cubic-bezier(.2,.7,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
 /* the serif's default figures are old-style and its 1 reads as a capital I: "81" looked like "8I" on a site whose product is a number */
 font-variant-numeric:lining-nums}
img{max-width:100%;display:block;background:rgba(124,116,100,.10)}a{color:inherit}figure{margin:0}h1,h2,h3,p,ul{margin:0}ul{list-style:none;padding:0}
::selection{background:var(--terra);color:var(--bg)}
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--fg);color:var(--bg);padding:.7rem 1rem}.skip:focus{left:0}
a:focus-visible,summary:focus-visible{outline:2px solid var(--sea);outline-offset:3px;border-radius:var(--r1)}
.n,.pv,.dn b,.tiles b,.kv b,.cv{font-variant-numeric:lining-nums tabular-nums}

/* top bar */
.bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1.5rem;padding:.55rem clamp(1rem,3vw,2rem);background:var(--bar);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top{display:flex;align-items:center;flex:none}.tprice{display:none}
.tnav{display:flex;gap:1.1rem;overflow-x:auto;scrollbar-width:none;min-width:0}
/* the edge fades only where the links can scroll; on a wide screen all ten fit, and the fade was dimming the last one */
@media(max-width:1240px){.tnav{-webkit-mask-image:linear-gradient(to right,#000 90%,transparent);mask-image:linear-gradient(to right,#000 90%,transparent)}}
.tnav::-webkit-scrollbar{display:none}
.tnav a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-size:.78rem;color:var(--muted);text-decoration:none;white-space:nowrap}
.tnav a:hover{color:var(--fg)}

/* the summary column
   The column holds about 800px of summary beside 5,000px of evidence, so the two cannot scroll at
   the same rate without one of them finishing long before the other. The column is held in the
   window and its contents are moved at their own rate instead: level with the section beside it at
   the top, level with it at the bottom, and in between moving only as far as they have to. There is
   no second scrollbar, so the wheel always scrolls the page, which is what made the old version
   feel like it was fighting back.
   The held column is switched on by the script (.railsync). Without a script the column is an
   ordinary one that scrolls with the page, so nothing is ever clipped out of reach. */
main{display:grid;grid-template-columns:minmax(0,23rem) minmax(0,1fr);max-width:1440px;margin:0 auto}
.rail{display:flex;flex-direction:column;padding:clamp(1.3rem,2.4vw,2rem) clamp(1rem,2.2vw,1.8rem) 0;border-right:1px solid var(--line)}
/* flex:none, or the column's box is shrunk to the window and its own contents spill out of it:
   the height the script measures has to be the height the summary actually wants. */
.railin{display:flex;flex-direction:column;flex:none}
@media(min-width:961px){
 .railsync .rail{position:sticky;top:var(--barh,0px);height:calc(100vh - var(--barh,0px));overflow:hidden}
 .railsync .railin{will-change:transform}}
@media(min-width:961px){
 /* Book now is simply the last thing in the column. It needs no pinning of its own: the column is
    held in the window and moved at its own rate, so the button comes into view as the reader goes
    down and is fully in view when the section beside it reaches its end. */
 .rail .bk{position:static;margin:1.3rem 0 0;width:auto;z-index:auto;
  padding:1.1rem 0 1.4rem;background:none;border-top:1px solid var(--line);border-right:0}
 .rail .bk .bk-t{display:none}}
/* Between 861 and 960 the page is one column, so there is no side column to hold the button. It
   goes back to being a bar locked to the foot of the screen, which stops on top of the footer like
   the phone's. Losing this rule left the button scrolling away with nothing to bring it back. */
@media(min-width:861px) and (max-width:960px){
 .rail .bk{position:fixed;z-index:31;left:0;right:0;bottom:var(--lift,0px);margin:0;
  padding:.8rem clamp(1rem,3vw,2rem);background:var(--bg);border-top:1px solid var(--line)}}

/* ── motion ─────────────────────────────────────────────────────────────────────
   One rhythm, two durations, transform and opacity only, and nothing that moves more than a
   few pixels: this is feedback, not choreography. Everything here is switched off wholesale
   by the reduced-motion rule at the foot of this sheet. */
.row{border-radius:var(--r1);transition:background var(--dur) var(--ease)}
summary.rw{transition:none}
.row:has(>summary):hover{background:var(--tint)}
.row:has(>summary):hover .rw{padding-left:.55rem;padding-right:.55rem}
.row:has(>summary){transition:background var(--dur) var(--ease)}
.rw{transition:padding var(--dur) var(--ease)}
details.row[open]{background:var(--tint)}
details.row[open] .rw{padding-left:.55rem;padding-right:.55rem}
.ev{padding-left:2.8rem}
/* The panel itself cannot be animated open without ::details-content, which is too new to rely on.
   Its contents can: when the row opens they rise the last few pixels, which reads as the panel opening. */
details[open]>.ev,details[open]>.ev>*{animation:evin var(--dur2) var(--ease) both}
@keyframes evin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.rc{transition:transform var(--dur2) var(--ease),color var(--dur) var(--ease)}
summary.rw:hover .rc,.more>summary:hover .ic:last-child{color:var(--fg)}
a.row.alt{transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
a.row.alt:hover{background:var(--tint);transform:translateX(2px)}
a.row.alt:active{transform:translateX(1px) scale(.998)}
.chip{transition:color var(--dur) var(--ease)}
.tiles div{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.tiles div:hover{transform:translateY(-2px);box-shadow:var(--e2)}
.spark i{transition:filter var(--dur) var(--ease)}
.spark .col:hover i{filter:brightness(1.12)}
.tnav a{position:relative;transition:color var(--dur) var(--ease)}
/* the section the reader is actually in, marked by the scroll spy */
.tnav a[aria-current="true"]{color:var(--fg)}
.tnav a[aria-current="true"]:after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:var(--rp);background:var(--terra)}

/* ── the three acts ───────────────────────────────────────────────────────────
   Twelve sections of one rhythm gave the page no shape. The verdict sits on its own raised
   surface; the evidence runs plain; the detail runs quieter and denser. Nothing is reordered
   and nothing is hidden: this is weight, not a change of content. */
.act{display:flex;align-items:center;gap:.8rem;margin:2.2rem 0 -.4rem;font:500 .7rem Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.act:before{content:"";flex:none;width:1.6rem;height:1px;background:var(--line2)}
.act:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
section.a1{background:var(--bg3);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--e1);padding:1.5rem clamp(1rem,2.2vw,1.6rem);margin-top:1.4rem}
/* Five things for and one against leaves half the panel empty, and the emptiness is the data.
   A rule between them makes it read as two columns rather than as a gap. */
@media(min-width:721px){.a1 .fa.against{border-left:1px solid var(--line);padding-left:2.4rem}
 .a1 .two{gap:.4rem 0}.a1 .fa.for{padding-right:2.4rem}}
section.a1~section{border-top:0}
section.a1+section{padding-top:1.4rem}
.a3 h2{font-size:1rem}
.a3 .sum{font-size:.84rem}

/* ── the gallery ──────────────────────────────────────────────────────────────
   The photographs used to be a six-across ribbon about 215px wide: the emotional half of a hotel
   spent as a decorative band. One lead image carries the page, the rest support it, and any of
   them opens full size. On a phone the whole set is one full-bleed swipe. */
/* Capped on purpose. Left to the lead picture's own shape the gallery ran 555px and pushed the
   score, which is the whole product, under the fold on a laptop. The pictures open full size anyway. */
.gal{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:4px;height:clamp(260px,38vh,430px);
 background:var(--line);border-bottom:1px solid var(--line)}
.gal figure{position:relative;margin:0;overflow:hidden}
.gal .gsub{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px}
.gal img{width:100%;height:100%;object-fit:cover;filter:var(--shot);transition:transform var(--dur2) var(--ease)}
.gal .glead,.gal .gsub,.gal .gsub figure{min-height:0}
.gal button{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;color:inherit;font:inherit}
.gal button:hover img{transform:scale(1.025)}
.gal button:focus-visible{outline:3px solid var(--terra);outline-offset:-3px}
.gcount{position:absolute;right:.7rem;bottom:.7rem;z-index:2;display:inline-flex;align-items:center;gap:.4rem;
 padding:.5rem .8rem;border-radius:var(--rp);background:rgba(25,25,23,.72);color:#F6F2EA;font:500 .78rem Inter;
 backdrop-filter:blur(6px);pointer-events:none}
.gcount .ic{width:.95em;height:.95em}

/* the lightbox */
.lb{width:min(96vw,1200px);max-width:none;max-height:92vh;padding:0;border:0;border-radius:var(--r2);background:var(--bg);color:var(--fg);box-shadow:var(--e2);overflow:hidden}
.lb::backdrop{background:rgba(12,11,10,.82);backdrop-filter:blur(3px)}
.lbw{display:flex;flex-direction:column;max-height:92vh}
.lbh{display:flex;align-items:center;gap:1rem;padding:.7rem .9rem;border-bottom:1px solid var(--line)}
.lbh b{font-weight:500;font-size:.9rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbh .lbn{margin-left:auto;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lbx{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:0;border-radius:var(--rp);
 background:var(--tint);color:var(--fg);cursor:pointer;transition:background var(--dur) var(--ease)}
.lbx:hover{background:var(--tint2)}
.lbwrap{position:relative;min-height:0;display:flex}
.lbs{flex:1;min-width:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:var(--bg2)}
.lbs::-webkit-scrollbar{display:none}
/* the way to the next picture without closing this one */
.lbar{position:absolute;top:50%;z-index:2;display:inline-flex;align-items:center;justify-content:center;
 width:46px;height:46px;margin-top:-23px;border:0;border-radius:var(--rp);cursor:pointer;
 background:rgba(25,25,23,.6);color:#F6F2EA;backdrop-filter:blur(6px);
 transition:background var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.lbar:hover{background:rgba(25,25,23,.82)}
.lbar:disabled{opacity:0;pointer-events:none}
.lbar .ic{width:1.4em;height:1.4em}
.lbprev{left:.8rem}.lbprev .ic{transform:rotate(90deg)}
.lbnext{right:.8rem}.lbnext .ic{transform:rotate(-90deg)}
.lbn b{font-weight:600;color:var(--fg)}
.lbs figure{flex:0 0 100%;scroll-snap-align:center;margin:0;display:flex;flex-direction:column}
.lbs img{width:100%;height:auto;max-height:72vh;object-fit:contain;background:var(--bg2)}
.lbs figcaption{padding:.7rem .9rem;font-size:.82rem;color:var(--muted);line-height:1.45}
@starting-style{.lb[open]{opacity:0;transform:translateY(8px) scale(.99)}}
.lb[open]{opacity:1;transform:none;transition:opacity var(--dur2) var(--ease),transform var(--dur2) var(--ease)}
.lb::backdrop{transition:opacity var(--dur2) var(--ease)}
@starting-style{.lb[open]::backdrop{opacity:0}}

/* ── the neighbourhood diagram ────────────────────────────────────────────────
   Drawn at build time from the places already collected around this hotel, in the page's own
   colours, as inline SVG: no tiles, no map library, no call to anyone. It is a diagram of what
   is within a walk, not a street map, and it says so. */
.nb{margin:1.6rem 0 .4rem;max-width:52rem}
.nb .nbh,.nb li{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) 7rem;gap:.2rem .9rem;align-items:center}
.nbl{display:flex;align-items:center;gap:.5rem;min-width:0;font-size:.88rem}
.nbl>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nbl .ic{color:var(--muted);flex:none}
.nbr li{min-height:38px}.nbr li+li{border-top:1px solid var(--line)}
/* the track. Its line is drawn as a background so a row has one element, not three. */
/* the row's own line, plus a guide line at each walk time, all as backgrounds on one element */
.nbt{position:relative;height:100%;min-height:38px;background:
 linear-gradient(var(--line),var(--line)) left 50%/100% 1px no-repeat,
 linear-gradient(var(--line2),var(--line2)) var(--m1,-99%) 0/1px 100% no-repeat,
 linear-gradient(var(--line2),var(--line2)) var(--m2,-99%) 0/1px 100% no-repeat,
 linear-gradient(var(--line2),var(--line2)) var(--m3,-99%) 0/1px 100% no-repeat}
.nbt>i{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:var(--rp);
 background:var(--terra);box-shadow:0 0 0 3px var(--bg);transition:transform var(--dur) var(--ease)}
.nbr li:hover .nbt>i{transform:scale(1.25)}
.nbv{text-align:right;font-weight:600;font-size:.86rem;font-variant-numeric:tabular-nums}
.nbv small{display:block;font-weight:400;font-size:.72rem;color:var(--muted)}
/* the guide lines: a walk a reader might actually make */
.nbh{height:1.5rem}.nbh .nbt{background:none;min-height:0;height:100%}
.nbm{position:absolute;top:0;bottom:0;width:1px}
.nbm em{position:absolute;bottom:0;left:.4rem;font:400 .7rem Inter;font-style:normal;color:var(--muted);white-space:nowrap;letter-spacing:.04em}
.nbkey{font-size:.76rem;color:var(--muted);margin-top:.5rem}
.nbax{height:1.3rem;margin-top:.2rem}
.nbax .nbt>span{position:absolute;top:0;transform:translateX(-50%);font:400 .7rem Inter;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── cross-page motion ────────────────────────────────────────────────────────
   A hotel's picture on a list becomes the same picture at the top of its page. Browsers without
   it simply navigate, so nothing is owed to it. */
@view-transition{navigation:auto}

@media(max-width:960px){
 main{grid-template-columns:minmax(0,1fr)}.rail{position:static;height:auto;overflow:visible;padding-bottom:1.4rem;border-right:0;border-bottom:1px solid var(--line)}
 .body{padding-top:0}
 /* the gallery becomes one full-bleed swipe: on a phone six crops in a grid showed nothing */
 .gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0;background:var(--bg2)}
 .gal::-webkit-scrollbar{display:none}
 .gal .gsub{display:contents}
 .gal figure{flex:0 0 88%;scroll-snap-align:center;border-right:2px solid var(--bg)}
 .gal{height:auto}.gal img{aspect-ratio:4/3;height:auto}
 .nb{grid-template-columns:minmax(0,1fr)}}
@media(max-width:860px){
 .bar{display:block;position:static;padding:0;background:none;backdrop-filter:none;border-bottom:0}
 .top{position:sticky;top:0;z-index:30;gap:1rem;padding:.5rem clamp(1rem,3vw,2rem);background:var(--bar);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
 .tprice{display:inline-flex;align-items:center;min-height:44px;margin-left:auto;font:500 .8rem Inter;color:var(--terra);text-decoration:none;white-space:nowrap}
 .tnav{padding:0 clamp(1rem,3vw,2rem);border-bottom:1px solid var(--line)}}
@media(max-width:700px){
 /* the distance plot stacks: what it is on one line, then how far on a track worth reading */
 .nb .nbh,.nb li{grid-template-columns:minmax(0,1fr) 5.6rem;gap:.1rem .7rem}
 .nbl{grid-column:1/-1;grid-row:1}
 .nbr li{padding:.5rem 0;min-height:0}
 .nbt{grid-column:1;grid-row:2;min-height:26px}
 .nbv{grid-column:2;grid-row:2;align-self:center}
 .nbh .nbl,.nbh .nbv{display:none}
 .nbh .nbt{grid-column:1;grid-row:1}}
@media(max-width:640px){
 /* a row becomes two lines: what it is and its reading, then the numbers */
 .rw,.rh{grid-template-columns:1.5rem minmax(0,1fr) auto 1.1rem;gap:.15rem .6rem}
 .rw .rm,.rh .rm{grid-column:2/4;grid-row:2}.rw .rm:empty{display:none}.rw .rr{grid-column:3;grid-row:1}
 /* A row with no meter: on a wide screen its label borrows the meter's column. Here that column is where the value
    sits, so the label was pushed to a second line and every such row read backwards: "211 m", then "Nearest main road". */
 .rw:has(>.rm:empty) .rl{grid-column:2;grid-row:1}
 /* the value stacks ("12 min walk" over "894 m by road") so a long label beside it keeps its width */
 .rw:has(>.rm:empty) .rr{max-width:46vw;flex-direction:column;align-items:flex-end;gap:0}
 .rh span:nth-child(4){display:none}
 .ev{padding-left:0}.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .rooms li{grid-template-columns:1fr 1fr}.rooms b,.rs.bed{grid-column:1/-1}
 .tiles b{font-size:1.35rem}.score{gap:.9rem}
 /* a phone column is about 30px: no price fits over one bar, so the two that matter are written under the chart */
 .spark .cv{display:none}.spark .cb{height:96px}.spark i{height:calc(100% * var(--p))}.spark .col{max-width:3.2rem}}
@media(max-width:520px){.spark .rest{display:none}}
/* Everything above that moves is switched off here, in one place: transitions, the keyframe the
   evidence panel opens on, the picture's hover zoom, and the page-to-page transition. */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *{transition:none!important;animation:none!important}
 .gal button:hover img{transform:none}
 .tiles div:hover,a.row.alt:hover{transform:none}
 @view-transition{navigation:none}}
:root{--bg:#F6F2EA;--bg2:#EFE9DA;--bg3:#FCFAF5;--line:#DED3BD;--line2:#CDBF9F;--fg:#2C2C2C;--muted:#666155;--sand:#4A3F2F;
 --terra:#984E2C;--sea:#446876;--olive:#5A6640;--bar:rgba(246,242,234,.94);--shot:none;--bk-ink:#211F1D;--bk-on:#F6F2EA;
 /* Shadows carry the paper's own brown. The same shapes in black looked like smudges on cream. */
 --e1:0 1px 2px rgba(74,63,47,.07),0 4px 12px -6px rgba(74,63,47,.18);
 --e2:0 2px 6px rgba(74,63,47,.09),0 18px 40px -16px rgba(74,63,47,.3);
 --tint:rgba(74,63,47,.045);--tint2:rgba(74,63,47,.08)}

/* One source for the rail's width: a design whose header is absolutely positioned has to
   offset itself by the same amount, and two hand-typed copies of it drift. */
:root{--bk-w:13rem}
.bk{position:fixed;left:0;right:0;bottom:var(--lift,0px);z-index:55;display:flex;align-items:center;gap:1rem;
 padding:.7rem clamp(1rem,4vw,1.4rem);padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px));
 background:rgba(30,29,27,.96);backdrop-filter:blur(12px);border-top:1px solid rgba(231,220,199,.18);
 font-family:Inter,system-ui,sans-serif}
.bk-t{min-width:0;flex:1;line-height:1.3}
.bk-t b{display:block;font-weight:500;font-size:.88rem;color:#F6F2EA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-t span{display:block;font-size:.76rem;color:#a39c8f}
.bk-go{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.7rem 1.5rem;
 border-radius:999px;background:#D49373;color:#211F1D;font:600 .9rem Inter,sans-serif;letter-spacing:.01em;
 text-decoration:none;transition:background .2s}
.bk-go:hover{background:#E7DCC7}
.bk-go:focus-visible,.bk-l:focus-visible,.bkd-x:focus-visible{outline:2px solid #88A8B3;outline-offset:2px}

/* Desktop: it stops being a bar and becomes the last thing in the design's own side column,
   which is sticky and full height, so the button sits at the bottom left and stays there. */
@media(min-width:861px){
 /* sticky, not static: the column runs past the bottom of the screen, so a button merely
    placed at its foot starts out below the fold on the first screen the reader sees */
 .bk{position:sticky;bottom:1.25rem;margin-top:auto;padding:1.4rem 0 0;width:auto;gap:0;
  background:none;backdrop-filter:none;border-top:1px solid var(--line,rgba(124,116,100,.22))}
 .bk-t{display:none}          /* the column right above already says the hotel and the price */
 /* Dark and large on a desktop: it sits alone at the foot of a pale column with nothing
    competing for attention, so it can carry the weight of the page's one action. */
 /* Dark on a pale page, pale on a dark one: a design sets --bk-ink/--bk-on if its ground is
    dark, or the button lands at 1.07:1 against it and disappears. */
 .bk-go{width:100%;min-height:58px;padding:1rem 1.6rem;border-radius:10px;
  background:var(--bk-ink,#211F1D);color:var(--bk-on,#F6F2EA);font-size:1.02rem;font-weight:600;letter-spacing:.015em}
 .bk-go:hover{filter:brightness(1.18)}
 /* inside the dark bar the same ink would vanish too, so the bar keeps the terracotta pill */
 .bk--fixed .bk-go{width:auto;border-radius:999px;min-height:52px;font-size:.95rem;
  background:#D49373;color:#211F1D}
 .bk--fixed .bk-go:hover{background:#E7DCC7}
 .bk--fixed{position:fixed;left:0;right:0;bottom:0;margin:0;padding:.8rem clamp(1rem,4vw,1.4rem);
  background:rgba(30,29,27,.96);backdrop-filter:blur(12px);border-top:1px solid rgba(231,220,199,.18);
  flex-direction:row;align-items:center;gap:1rem}
 .bk--fixed .bk-t{display:block;flex:1}
 .bk--fixed .bk-go{width:auto}
}

/* The panel. Without JavaScript :target opens it in place; the script upgrades it to a modal. */
.bkd{border:0;padding:0;background:transparent;color:inherit;max-width:min(30rem,92vw);width:100%}
.bkd::backdrop{background:rgba(20,19,18,.62);backdrop-filter:blur(3px)}
.bkd:target{display:block;position:fixed;z-index:60;inset:auto 50% 5rem auto;transform:translateX(50%)}
.bkd-in{background:#F6F2EA;color:#2C2C2C;border-radius:14px;padding:1.4rem;
 box-shadow:0 30px 80px -30px rgba(0,0,0,.6);font-family:Inter,system-ui,sans-serif}
.bkd-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.bkd h2{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:1.55rem;line-height:1.15}
.bkd-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-.5rem -.5rem 0 0;
 border-radius:50%;color:#6f6a5f;text-decoration:none;font-size:1.5rem;line-height:1}
.bkd-x:hover{background:rgba(44,44,44,.07);color:#2C2C2C}
.bkd-s{margin:.6rem 0 1.1rem;font-size:.78rem;line-height:1.5;color:#6f6a5f}
.bk-ls{display:grid;gap:.5rem}
.bk-l{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:52px;padding:.8rem 1.1rem;
 border:1px solid #ded3bd;border-radius:10px;text-decoration:none;color:#2C2C2C;font:500 .95rem Inter,sans-serif;
 background:#FFFDF8;transition:.18s}
.bk-l:hover{border-color:#D49373;transform:translateX(2px)}
.bk-l i{font-style:normal;color:#D49373}

/* Nothing may hide behind the bar at the bottom of a phone screen. Only a page that HAS the bar leaves room for it:
   as a blanket rule on body it put an empty strip under the footer of every other page. On the live site the hotel
   page's footer carries that room itself (.hotel .ft), so its tint runs under the bar instead of stopping above it. */
body:not(.site):has(.bk){padding-bottom:5.5rem}
@media(min-width:861px){body:not(.site):has(.bk){padding-bottom:0}
 body:has(.bk--fixed){padding-bottom:5rem}}
@media(prefers-reduced-motion:reduce){.bk-go,.bk-l{transition:none}.bk-l:hover{transform:none}}

/* pages that are not a hotel: one centred column */
main.page{display:block;max-width:1080px;margin:0 auto;padding:clamp(1.4rem,3vw,2.4rem) clamp(1rem,3vw,2rem) 2rem}
main.page h1{font-size:clamp(2rem,4.2vw,3.1rem);max-width:22ch;text-wrap:balance}
.lede{font-size:1.02rem;color:var(--muted);max-width:66ch;margin-top:.7rem;text-wrap:pretty}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 .45rem;margin-bottom:.2rem}
/* a breadcrumb link measured 37 x 13 px on a phone; the text stays small, the target does not */
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.25em}.crumbs a:hover{color:var(--fg)}
.glink{display:none}
@media(min-width:861px){.glink{display:inline-flex;align-items:center;gap:.4rem;flex:none;margin-left:auto;min-height:44px;font-size:.8rem;font-weight:500;color:var(--fg);text-decoration:none;white-space:nowrap}}
.hero{padding-bottom:.6rem}.hero+section{border-top:0}
/* On a wide screen the headline is 22ch and the counts sat under it, which left the right half of the
   masthead empty. The counts are the product, so they stand beside it instead of beneath it. */
@media(min-width:960px){
 .home .hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:.8rem 3.5rem;align-items:end;padding-bottom:1.4rem}
 .home .hero h1,.home .hero .lede{grid-column:1}
 .home .hero .stat{grid-column:2;grid-row:1/3;grid-template-columns:minmax(0,1fr);margin-top:0;max-width:none;align-self:end}}
.stat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:1.5rem;max-width:40rem}
.stat li{padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r2);background:var(--bg3);box-shadow:var(--e1)}
.stat b{display:block;font:500 1.7rem/1 "Cormorant Garamond",serif;font-variant-numeric:tabular-nums}.stat span{display:block;font-size:.74rem;color:var(--muted);margin-top:.3rem}
/* auto-fit, not auto-fill: two destinations share the row instead of leaving two empty slots beside them */
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.9rem}
.dcard{display:block;max-width:34rem;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;text-decoration:none;background:var(--bg3);
 box-shadow:var(--e1);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.dcard:hover{border-color:var(--line2);box-shadow:var(--e2);transform:translateY(-3px)}
.dcard img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform var(--dur2) var(--ease)}
.dcard:hover img{transform:scale(1.04)}
.dcard span{display:block;padding:.8rem .9rem}.dcard b{display:block;font:500 1.35rem/1.1 "Cormorant Garamond",serif}.dcard small{display:block;font-size:.78rem;color:var(--muted);margin-top:.25rem}
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 2.4rem}
.pager{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.4rem;font-size:.86rem;color:var(--muted)}
.steps li{display:flex;gap:.7rem;align-items:flex-start}.steps .ic{margin-top:.2rem;color:var(--terra)}
.steps b{display:block;font-weight:600;font-size:.95rem}.steps small{display:block;font-size:.84rem;color:var(--muted);line-height:1.5;margin-top:.15rem}
.tgrid{display:flex;flex-wrap:wrap;gap:.5rem}
.tchip{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.4rem .95rem;border:1px solid var(--line);border-radius:var(--rp);text-decoration:none;font-size:.86rem;background:var(--bg3);
 transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.tchip:hover{border-color:var(--line2);background:var(--bg2);transform:translateY(-1px)}
.tchip:active{transform:none}.tchip .ic{color:var(--muted)}.tchip b{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}

/* the hotel row: one link, the whole width */
.hlist{list-style:none;padding:0;margin:0;counter-reset:none}
.hrow+.hrow{border-top:1px solid var(--line)}
.hl{display:grid;grid-template-columns:1.6rem 9.5rem minmax(0,1fr) 6.4rem 4.6rem;gap:.1rem 1.1rem;align-items:center;
 padding:.8rem .7rem;margin:0 -.7rem;border-radius:var(--r2);text-decoration:none;color:inherit;
 transition:background var(--dur) var(--ease)}
.hl:hover{background:var(--tint)}
/* two rows: what the hotel is, then its chips. Everything else spans both and sits in the middle. */
.hk,.ht,.hpr,.hs{grid-row:1/3}.hm{grid-column:3;grid-row:1;align-self:end}.hf{grid-column:3;grid-row:2;align-self:start}
.hl:hover .hm>b{color:var(--terra)}
/* the picture is its own box so it can crop on hover without the layout moving */
.ht{display:block;width:100%;aspect-ratio:4/3;border-radius:var(--r2);overflow:hidden;background:var(--bg2);box-shadow:var(--e1)}
.ht img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur2) var(--ease)}
.hl:hover .ht img{transform:scale(1.04)}
.hk{font:400 1rem/1 "Cormorant Garamond",serif;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.hm{min-width:0;display:block}.hm>b{display:block;font:500 1.3rem/1.15 "Cormorant Garamond",serif;transition:color var(--dur) var(--ease)}
.hm small{display:block;font-size:.78rem;color:var(--muted);margin-top:.15rem}.hm .hp{color:var(--fg)}
.hf{display:flex;flex-wrap:wrap;gap:.2rem .8rem;margin-top:.35rem}
.hpr{text-align:right}.hpr b{display:block;font-weight:600;font-variant-numeric:tabular-nums}.hpr small{display:block;font-size:.7rem;color:var(--muted)}
/* The ring is drawn to the score. Seven hotels between 86 and 98 used to wear seven identical
   circles, so a ranked list looked flat: the number was the only thing that moved. */
.hs{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:4.3rem;height:4.3rem;justify-self:end}
/* The ring is the arc alone, cut out with a mask rather than covered by a solid disc: a disc painted
   over the row's hover tint showed as a paler circle, which is the seam this avoids. */
.hs:before{content:"";position:absolute;inset:0;border-radius:50%;
 background:conic-gradient(var(--ring,var(--sea)) calc(var(--s,100) * 1%),var(--line) 0);
 -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
 mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 3px))}
.hs>*{position:relative}
.hs.good{--ring:var(--olive)}.hs.weak{--ring:var(--terra)}
.hs b{font:500 1.35rem/1 "Cormorant Garamond",serif;font-variant-numeric:tabular-nums}.hs small{font-size:.7rem;color:var(--muted);letter-spacing:.02em;margin-top:.1rem}
.prose section p,.prose .plain li{font-size:.95rem;line-height:1.6;max-width:68ch;color:var(--fg)}.prose section p+p{margin-top:.6rem}
.prose .plain{list-style:disc;padding-left:1.2rem;display:grid;gap:.35rem}.prose a,.sum a,.note a{color:var(--terra)}

/* the hotel page's extra pieces on the live site */
.also{display:flex;flex-wrap:wrap;gap:.35rem;margin:.2rem 0 1rem}.also a{font-size:.76rem;padding:.3rem .8rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--muted);min-height:44px;display:inline-flex;align-items:center}
.also a:hover{color:var(--fg);border-color:var(--terra)}
.why{font-size:.76rem;line-height:1.45;color:var(--muted);margin-top:.8rem}
.ok{display:flex;gap:.5rem;align-items:flex-start;margin-top:.8rem;font-size:.86rem}.ok .ic{color:var(--olive);margin-top:.15rem}.ok b{font-weight:600}
.pre{display:block;font-weight:400;font-size:.8rem;color:var(--muted);margin-top:.15rem}

/* The hotel page keeps a Book now control fixed over the foot of the screen, so only there does the footer
   leave room under its last line. Everywhere else that room was 120 px of nothing. */
/* full width, however wide the screen; its contents line up with the page column above (they used to start 32 px left of it) */
.ft{border-top:1px solid var(--line);max-width:none;margin-top:2rem;padding:2rem 0 2.2rem;background:var(--bg2)}
/* The reserve exists only where Book now is a bar locked to the screen, which is the phone and the
   tablet band. On a wide screen the button is the last thing in the left column and stands in its
   own space, so the footer keeps its normal foot. The .lift class is set by the script once it can
   park the bar above the footer; without a script the reserve stays, because a button sitting on
   the fine print is worse than a strip of empty paper. */
@media(max-width:960px){
 .hotel .ft{padding-bottom:7.5rem}
 .lift .hotel .ft{padding-bottom:2.2rem}}
.ftin,.ft .fine{box-sizing:border-box;max-width:1080px;margin-left:auto;margin-right:auto;padding-left:clamp(1rem,3vw,2rem);padding-right:clamp(1rem,3vw,2rem)}
.ftin{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));gap:1.6rem}
.ft p{font-size:.82rem;color:var(--muted);max-width:42ch;margin-top:.6rem;line-height:1.5}
.ft h2{font:600 .74rem Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.ft nav a{display:flex;align-items:center;min-height:44px;font-size:.88rem;text-decoration:none}.ft nav a:hover{color:var(--terra)}
.ft .fine{margin-top:1.4rem;font-size:.76rem}
@media(max-width:700px){
 /* On a phone the chips had 180 px beside the score ring, so each wrapped to two lines and a row ran to 280 px.
    They now run the full width under the photo: photo, name and ring on top, price beneath, chips last. */
 .hl{grid-template-columns:5.2rem minmax(0,1fr) auto;gap:.35rem .8rem;align-items:start}
 .hk{display:none}.ht{grid-column:1;grid-row:1/3}.hm{grid-column:2;grid-row:1;align-self:start}
 .hs{grid-column:3;grid-row:1/3;width:3.7rem;height:3.7rem}.hs b{font-size:1.15rem}
 .hpr{grid-column:2;grid-row:2;text-align:left;display:flex;gap:.4rem;align-items:baseline}
 .hf{grid-column:1/-1;grid-row:3;margin-top:.15rem}
 .dgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.dcard img{aspect-ratio:4/3}.dcard span{padding:.6rem .7rem}.dcard b{font-size:1.15rem}
 .steps{grid-template-columns:1fr}
 .ftin{grid-template-columns:1fr 1fr}.ftin>div{grid-column:1/-1}.stat b{font-size:1.3rem}}