/* 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)}
.strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;background:var(--line)}
/* height:auto, or the height attribute (there to reserve space while loading) beats the aspect ratio
   and the strip becomes 424px tall and pushes the score off the first screen */
.strip img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;filter:var(--shot)}

/* the summary column */
main{display:grid;grid-template-columns:minmax(0,23rem) minmax(0,1fr);max-width:1440px;margin:0 auto;align-items:start}
.rail{display:flex;flex-direction:column;position:sticky;top:3.4rem;height:calc(100vh - 3.4rem);overflow-y:auto;scrollbar-width:thin;padding:clamp(1.3rem,2.4vw,2rem) clamp(1rem,2.2vw,1.8rem) 0;border-right:1px solid var(--line)}
/* Book now is pinned to the foot of this column on screen, not to the foot of the column's
   own scroll area. Sticky inside a scrolling column measures from the column, and at the top
   of the page the column starts below the photos, so the button began life under the fold. */
@media(min-width:961px){
 .rail{padding-bottom:6.5rem}
 .rail .bk{position:fixed;z-index:31;left:max(0px,calc((100vw - 1440px)/2));bottom:0;width:23rem;margin:0;
  padding:1rem clamp(1rem,2.2vw,1.8rem) 1.25rem;background:var(--bg);border-top:1px solid var(--line);border-right:1px solid var(--line)}
 footer{padding-bottom:7.5rem}}
@media(min-width:861px) and (max-width:960px){
 .rail .bk{position:fixed;z-index:31;left:0;right:0;bottom:0;margin:0;padding:.8rem clamp(1rem,3vw,2rem);background:var(--bg);border-top:1px solid var(--line)}}
.crumbs{font:500 .7rem Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);margin-bottom:.7rem}
h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:clamp(1.9rem,2.9vw,2.5rem);line-height:1.05;letter-spacing:-.01em}
.sub{font-size:.86rem;color:var(--muted);margin-top:.45rem}
.score{display:flex;align-items:center;gap:1.1rem;margin-top:1.3rem}
.dial{position:relative;width:6.6rem;height:6.6rem;flex:none}.dial svg{width:100%;height:100%}
.dt{fill:none;stroke:var(--line);stroke-width:9}.dv{fill:none;stroke-width:9;stroke-linecap:round;stroke:var(--sea)}
.dial.good .dv{stroke:var(--olive)}.dial.weak .dv{stroke:var(--terra)}
.dn{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.dn b{font:500 2.3rem/1 "Cormorant Garamond",serif;color:var(--fg)}.dn span{font-size:.7rem;color:var(--muted);margin-top:.2rem;letter-spacing:.04em}
.sl{font:500 .7rem Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.flag{display:flex;gap:.4rem;align-items:flex-start;font-size:.78rem;line-height:1.35;margin-top:.55rem;color:var(--muted)}
.flag b{font-weight:600;color:var(--fg)}/* a 44px target that does not stretch its line: the padding is the hit area, the negative margin hands the height back */
.flag .see{display:inline-block;padding:.85rem 0;margin:-.85rem 0;color:var(--terra)}.flag.weak .ic{color:var(--terra)}.flag.good .ic{color:var(--olive)}
.parts{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--line);display:grid;gap:.6rem}
.parts li{display:grid;grid-template-columns:1fr auto;gap:.25rem .6rem;align-items:center}
.pl{display:block;font-size:.84rem}.pl .ic{margin-right:.4rem;color:var(--muted)}
.how{margin-top:.5rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.how>summary{display:flex;align-items:center;gap:.4rem;min-height:44px;cursor:pointer;list-style:none;font-size:.78rem;color:var(--muted)}
.how>summary::-webkit-details-marker{display:none}.how>summary .ic:last-child{margin-left:auto;transition:transform .2s}
.how[open]>summary .ic:last-child{transform:rotate(180deg)}
.how li{font-size:.76rem;color:var(--muted);line-height:1.45;padding:.3rem 0}.how b{color:var(--fg);font-weight:600}
.pv{font:600 1rem Inter}.parts .mt{grid-column:1/-1}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:.8rem .9rem;margin:.9rem 0 1rem}
.facts li{display:flex;gap:.65rem;align-items:flex-start;font-size:.86rem}.facts .ic{margin-top:.12rem;color:var(--muted)}
.facts b{font-weight:600;display:block}.facts small{display:block;font-size:.74rem;color:var(--muted)}

/* sections */
.body{padding:0 clamp(1rem,3vw,2.6rem) 2rem;min-width:0}
/* A rule is only ever drawn BETWEEN two siblings (x+x gets a top line), never under the last one.
   Sections, rows and list items each used to close themselves with a bottom line, so a section
   ending in a list drew two lines, and the last section drew a third against the footer. */
section{padding:1.7rem 0;scroll-margin-top:4rem}section~section{border-top:1px solid var(--line)}
.sh{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:.9rem}.sh:not(:has(.sum)){align-items:center}
.si{display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;flex:none;border-radius:50%;background:var(--bg2);color:var(--sand);font-size:1.05rem}
h2{font:600 1.08rem/1.3 Inter;letter-spacing:-.005em}.sum{font-size:.88rem;color:var(--muted);margin-top:.15rem;max-width:72ch}
h3{display:flex;align-items:center;gap:.45rem;font:600 .74rem Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:1.3rem 0 .35rem}
h3 small{font-size:.74rem;font-weight:400;text-transform:none;letter-spacing:0;margin-left:.2rem}
.note{font-size:.78rem;color:var(--muted);margin-top:.7rem;max-width:72ch;line-height:1.5}
.inline{margin:.7rem 0}

/* the row everything is made of */
.row+.row{border-top:1px solid var(--line)}
.rw{display:grid;grid-template-columns:1.5rem 14rem minmax(6rem,1fr) 10rem 1.1rem;gap:.2rem .75rem;align-items:center;min-height:44px;padding:.35rem 0;font-size:.92rem}
summary.rw{cursor:pointer;list-style:none}summary.rw::-webkit-details-marker{display:none}
summary.rw:hover .rl{color:var(--sand)}
.ri{color:var(--muted);display:inline-flex}.rl{font-weight:500;min-width:0}
.rm{display:flex;align-items:center;gap:.6rem;min-width:0}.rm small,.rr small{font-size:.76rem;color:var(--muted);white-space:nowrap}
.rr{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex-wrap:wrap;text-align:right}
.rc{color:var(--muted);display:inline-flex;transition:transform .2s}details[open]>summary .rc{transform:rotate(180deg)}
.n{font-weight:600;min-width:2.1rem;text-align:right}.n.pos{color:var(--olive)}.n.neg{color:var(--terra);text-align:left}.n.wide{min-width:0;white-space:nowrap}
.rw:has(>.rm:empty) .rl{grid-column:2/4}.rw>.rm:empty{display:none}
.rh{display:grid;grid-template-columns:1.5rem 14rem minmax(6rem,1fr) 10rem 1.1rem;gap:.75rem;padding:.2rem 0 .4rem;border-bottom:1px solid var(--line);font:500 .7rem Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rh .rm{justify-content:space-between}.rh em{font-style:normal;display:inline-flex;gap:.3rem;align-items:center}.rh span:nth-child(4){text-align:right}
.tight .rw{grid-template-columns:1.5rem 8.5rem minmax(3rem,1fr) 6.5rem}.tight .rc{display:none}
.tr{display:inline-flex;align-items:center;gap:.25rem;margin-left:.45rem;color:var(--sea);white-space:nowrap}
.tr small{font-size:.72rem;font-weight:400;letter-spacing:0;text-transform:none}.tr.up{color:var(--terra)}.tr.down{color:var(--olive)}.vf{display:block}.vf .chip{font-size:.7rem}
.ev{padding:.2rem 0 1rem 2.25rem}
.row.bad .rl{color:var(--terra)}
a.row.alt{display:block;text-decoration:none;color:inherit}a.row.alt:hover .rl{color:var(--terra)}

/* meters: a fill over a track. Two-sided meters are praise over complaints.
   Named .mt, not .bar: .bar is the sticky header, and sharing the name crushed the header to a
   6px strip and turned every meter into a padded block. */
.mt{display:block;flex:1;min-width:3rem;height:8px;border-radius:var(--rp);background:var(--line);overflow:hidden}
/* a track whose length is itself a measure. margin-right:auto keeps the complaints column
   at the right edge, or eleven different track lengths would leave eleven ragged numbers. */
.mt.vol{flex:0 1 var(--w);min-width:1.5rem;margin-right:auto;transition:flex-basis var(--dur2) var(--ease)}
.mt i{display:block;height:100%;border-radius:var(--rp);background:var(--sea);transition:width var(--dur2) var(--ease)}
.mt.two{background:var(--terra)}.mt.two i{background:var(--olive);border-radius:var(--rp) 0 0 var(--rp)}
.mt.good i{background:var(--olive)}.mt.weak i{background:var(--terra)}.mt.split i{background:var(--sea)}

/* a reading is always an icon and a word, never a colour on its own */
.chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;font-weight:500;color:var(--muted);max-width:100%;min-width:0}
.chip>span{overflow-wrap:anywhere}.rr .chip,.chip.big{white-space:nowrap}
.chip.good{color:var(--olive)}.chip.weak{color:var(--terra)}.chip.split{color:var(--sea)}
.chip.big{font-size:1.02rem;font-weight:600}
blockquote{margin:.6rem 0 0;padding-left:.9rem;border-left:2px solid var(--line)}
blockquote p{font-family:"Cormorant Garamond",serif;font-size:1.06rem;line-height:1.4}
cite{font:400 .74rem Inter;color:var(--muted);font-style:normal}
.ans{font-size:.88rem;color:var(--muted);max-width:70ch}

/* for and against */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:.4rem 2.4rem}
.two.tight{margin-top:.6rem}
.fa h3{margin-top:0}.fa.for h3{color:var(--olive)}.fa.against h3{color:var(--terra)}
.fa li{display:flex;gap:.65rem;align-items:flex-start;padding:.55rem 0;font-size:.92rem}.fa li+li,.kv li+li,.rooms li+li,.meth li+li{border-top:1px solid var(--line)}
.fa li>.ic{margin-top:.15rem;color:var(--muted)}.fa b{font-weight:500;display:block}.fa small{display:block;font-size:.78rem;color:var(--muted)}

/* photos, price, rooms */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin:.9rem 0 .4rem}
.pgrid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r1)}
.warn{display:flex;gap:.5rem;align-items:flex-start;margin-top:.9rem;font-size:.84rem;color:var(--sand)}.warn .ic{color:var(--terra);margin-top:.15rem}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.tiles div{padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r2);background:var(--bg3);box-shadow:var(--e1)}
.tiles b{display:block;font:500 1.7rem/1 "Cormorant Garamond",serif}.tiles span{display:block;font-size:.74rem;color:var(--muted);margin-top:.3rem}
/* The month chart. Every month shares the width, so it never scrolls, and nothing is positioned
   outside its box: the old one scrolled sideways on a phone, which clipped every price drawn
   above a bar, and its labels were wider than the bars so they ran into each other. */
.spark{display:flex;align-items:flex-start;gap:.5rem;margin:.4rem 0 0;max-width:46rem}
.spark .col{flex:1 1 0;min-width:0;max-width:4.6rem;display:flex;flex-direction:column;align-items:center}
.spark .cb{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;width:100%;height:132px}
.spark i{display:block;flex:none;width:100%;height:calc((100% - 1.3rem) * var(--p));background:var(--sea);border-radius:var(--r1) var(--r1) 0 0;min-height:4px}
.spark .lo i{background:var(--olive)}.spark .hi i{background:var(--terra)}
.spark .cv{font-size:.72rem;line-height:1.3rem;color:var(--fg);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.spark .cl{display:block;margin-top:.35rem;text-align:center;font-size:.7rem;line-height:1.3;color:var(--muted);white-space:nowrap}
.spark .cl small{display:block;font-size:.7rem}
.sparkkey{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin-top:.7rem}.sparkkey .chip{font-size:.86rem}
.more{margin-top:.9rem;border:1px solid var(--line);border-radius:var(--r2);padding:0 .9rem;background:var(--bg3);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.more:hover{border-color:var(--line2);box-shadow:var(--e1)}
.more>summary{display:flex;align-items:center;gap:.5rem;min-height:44px;cursor:pointer;list-style:none;font-size:.86rem;font-weight:500}
.more>summary::-webkit-details-marker{display:none}.more>summary .ic:last-child{margin-left:auto;color:var(--muted);transition:transform .2s}
.more[open]>summary .ic:last-child{transform:rotate(180deg)}.more>*:last-child{margin-bottom:.9rem}
.kv li{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;font-size:.86rem}.kv b{font-weight:600}
.rooms li{display:grid;grid-template-columns:minmax(10rem,1.6fr) 5rem 6rem minmax(8rem,1fr);gap:.25rem .9rem;align-items:center;padding:.6rem 0;font-size:.86rem}
.rooms b{font-weight:500}.rs{display:inline-flex;align-items:center;gap:.35rem;color:var(--muted);white-space:nowrap}.rs.bed{white-space:normal}
.chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.35rem .9rem}.chips:empty{display:none}
.rc-on{color:var(--olive)}.rc-seen{color:var(--sea)}.rc-off{color:var(--muted)}
.meth li{padding:.4rem 0;font-size:.84rem;color:var(--muted)}

/* where it ranks */
.gauge{max-width:44rem}.gtrack{position:relative;height:6px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--rp);margin:2.6rem 0 .5rem}
.gtrack i{display:block;height:100%;background:linear-gradient(90deg,var(--terra),var(--sea),var(--olive));border-radius:var(--rp)}
.gpin{position:absolute;top:-30px;transform:translateX(-50%);text-align:center}
.gpin b{font:500 1.4rem/1 "Cormorant Garamond",serif}.gpin:after{content:"";display:block;width:1px;height:14px;background:var(--fg);margin:.25rem auto 0}
.gmid{position:absolute;top:-16px;width:1px;height:22px;background:var(--muted)}
.gmid em{position:absolute;left:6px;top:-2px;font:400 .72rem Inter;font-style:normal;color:var(--muted);white-space:nowrap}
.gends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--muted)}
footer{border-top:1px solid var(--line);padding:1.4rem clamp(1rem,3vw,3rem) 3rem;color:var(--muted);font-size:.74rem;max-width:1440px;margin:0 auto}

/* ── 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)}
.lbs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;background:var(--bg2)}
.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}
/* a line near the right edge puts its own label on its left, or the label runs off the chart */
.nbm.far em{left:auto;right:.4rem}
.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)}
 .strip{grid-template-columns:repeat(3,minmax(0,1fr))}.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:0;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}
.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}
.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)}
.hotel .ft{padding-bottom:7.5rem}
.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}}