/* tbilisi.work — architecture magazine × industrial directory.
   Hard edges, no shadows, photos are the only colour. Tokens first. */
:root{
  --paper:#E8E5DF;
  --paper-2:#DFDBD3;
  --ink:#171614;
  --ink-2:#3B3935;
  --graphite:#6A655D;
  --rule:#C4BEB4;
  --plate:#D4CFC6;
  --hatch:rgba(23,22,20,.13);
  --glass:rgba(232,229,223,.6);
  --frost:rgba(232,229,223,.74);
  --hover:rgba(23,22,20,.06);
  --alert:#B42318;
  --f-display:"Noto Sans","Noto Sans Georgian","Arial Narrow",Arial,sans-serif;
  --f-text:"Noto Sans","Noto Sans Georgian",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono","Noto Sans Georgian",ui-monospace,Menlo,Consolas,monospace;
  --f-accent:"Playfair Display","Noto Serif Georgian",Georgia,"Times New Roman",serif;
  --gut:clamp(16px,3vw,40px);
  --maxw:1480px;
  --mast-h:57px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#121110;--paper-2:#1B1A17;--ink:#EAE5DC;--ink-2:#C9C3B8;--graphite:#968F84;
    --rule:#34312C;--plate:#211F1C;--hatch:rgba(234,229,220,.11);--glass:rgba(18,17,16,.55);--frost:rgba(26,25,23,.74);--hover:rgba(234,229,220,.08);--alert:#D0382E;
  }
}
:root[data-theme="dark"]{
    color-scheme:dark;
    --paper:#121110;--paper-2:#1B1A17;--ink:#EAE5DC;--ink-2:#C9C3B8;--graphite:#968F84;
    --rule:#34312C;--plate:#211F1C;--hatch:rgba(234,229,220,.11);--glass:rgba(18,17,16,.55);--frost:rgba(26,25,23,.74);--hover:rgba(234,229,220,.08);--alert:#D0382E;
}
:root[data-theme="light"]{color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-text);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;line-height:1.5}
.muted{color:var(--graphite)}
.it{font-family:var(--f-accent);font-style:italic;font-weight:400;text-transform:none;font-stretch:100%;letter-spacing:-.02em;font-size:1.04em;line-height:.6}
/* Georgian has no capitals, so the uppercase styles leave it as it is; the tracking made
   for small Latin capitals would only pull its letters apart, and the mono font's wide
   space would gap its (proportional) words */
:lang(ka) :is(.mono,.pnotice,.guide-body h3,.mnav a,.sugg .sm,.sugg .none,.dd-btn,.dd-list li,.crumbs,.types a,.chip,.plate .pnote,.card-top,.meta,.badge,.card-foot,.ph-line,.sbadge,.fact-block h2,.links,.form label,.btn,table.spec th,.foot-grid h2,.pstat h2){letter-spacing:.02em;word-spacing:-.3em}
:lang(ka) .search input::placeholder{letter-spacing:.02em;word-spacing:-.3em}
:lang(ka) .display{line-height:1.02}  /* its letters rise and drop below the line, unlike capitals */
:lang(ka) .it{font-size:.9em}  /* the Georgian serif runs much wider than the condensed headline around it */
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:8px;background:var(--ink);color:var(--paper);padding:6px 10px;z-index:100}

/* ---------- masthead ---------- */
/* Frosted like recreateme.ai's header. The blur lives on ::before, not on .mast itself:
   a backdrop-filter on an ancestor blanks the blur of anything inside it (future dropdowns). */
.mast{position:sticky;top:0;z-index:40;isolation:isolate;border-bottom:1px solid var(--ink)}
.mast::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--glass);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mast::before{background:var(--paper)}}
.mast .in{display:flex;align-items:center;gap:8px;min-height:var(--mast-h);max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wm{font-family:var(--f-display);font-stretch:62.5%;font-weight:770;font-size:27px;line-height:1;text-decoration:none;white-space:nowrap}
.wm small{display:block;font-family:"Noto Sans Georgian",var(--f-text);font-stretch:75%;font-weight:500;font-size:11px;letter-spacing:.03em;color:var(--graphite);margin-top:3px}
.mnav{display:flex;gap:22px;margin-left:auto;margin-right:16px;overflow-x:auto;scrollbar-width:none}
.mnav::-webkit-scrollbar{display:none}
.mnav a{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);white-space:nowrap;padding-block:6px}
.mnav a:hover{color:var(--ink)}
.mnav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.mnav .n{margin-left:5px;opacity:.7}
.search{position:relative;flex:0 1 320px}
.search .sico{position:absolute;left:10px;top:50%;width:15px;height:15px;margin-top:-7.5px;color:var(--graphite);pointer-events:none}
.search input{width:100%;appearance:none;-webkit-appearance:none;border-radius:0;background:transparent;color:var(--ink);border:1px solid var(--ink);font-family:var(--f-text);font-size:15px;height:35px;padding:0 10px 0 32px;line-height:1}
.search input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--ink)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:11px;height:11px;cursor:pointer;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l10 10M11 1L1 11' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l10 10M11 1L1 11' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat}
.search input::placeholder{font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--graphite);opacity:1}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:80;margin:0;padding:0;list-style:none;border:1px solid var(--ink);max-height:60vh;overflow:auto;background:var(--frost);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);animation:ddIn .14s ease-out}
.sugg a{display:flex;flex-direction:column;gap:3px;padding:9px 12px;text-decoration:none;border-bottom:1px solid var(--rule)}
.sugg li:last-child a{border-bottom:0}
.sugg .sn{font-family:var(--f-display);font-stretch:62.5%;font-weight:720;text-transform:uppercase;font-size:18px;line-height:1}
.sugg .sm{font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--graphite)}
.sugg .on a,.sugg a:hover{background:var(--hover)}
.sugg .area .sn{display:flex;align-items:center;gap:7px}
.sugg .ak{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:9.5px;font-stretch:75%;font-weight:760}
.sugg .ak.lm{border:0;border-radius:0}
.sugg .ak.lm i{width:9px;height:9px;border:1.5px solid var(--ink);transform:rotate(45deg)}
.sugg .none{padding:10px 12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--graphite)}
.tools{display:flex;align-items:center;gap:8px;flex:none}
.ibtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:none;width:35px;height:35px;padding:0;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.ibtn svg{width:15px;height:15px}
.ibtn:hover{background:var(--hover)}
.sbtn{display:none}
.sbtn[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.tbtn .sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tbtn .sun{display:block}:root:not([data-theme="light"]) .tbtn .moon{display:none}}
:root[data-theme="dark"] .tbtn .sun{display:block}
:root[data-theme="dark"] .tbtn .moon{display:none}
.dd-cur,.dd-lang{height:35px;border:1px solid var(--ink)}
.dd-cur .dd-btn,.dd-lang .dd-btn{padding:0 10px;justify-content:center;gap:8px}
.dd-cur .dd-btn{min-width:86px}
.dd-lang .dd-btn{min-width:60px}  /* ENG, ქარ and РУС all get the same box */
.dd-cur .dd-val,.dd-lang .dd-val{margin-right:-.07em;position:relative;top:-.4px}  /* capitals sit a hair low in the line box */

/* ---------- dropdowns (site.js turns every <select> into this) ---------- */
.dd{position:relative;display:flex}
.dd-native{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;clip:rect(0 0 0 0)}
.dd-btn{flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;appearance:none;background:transparent;border:0;color:var(--ink);font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:0 12px;cursor:pointer;text-align:left;white-space:nowrap;min-width:0}
.dd-btn:hover{background:var(--hover)}
.dd-val{overflow:hidden;text-overflow:ellipsis}
.dd-caret{width:9px;height:9px;flex:none;transition:transform .15s ease}
.dd.open .dd-caret{transform:rotate(180deg)}
.dd-list{position:absolute;top:calc(100% + 6px);left:-1px;min-width:calc(100% + 2px);z-index:80;margin:0;padding:5px 0;list-style:none;border:1px solid var(--ink);background:var(--frost);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);max-height:min(62vh,440px);overflow:auto;overscroll-behavior:contain}
.dd.open .dd-list{animation:ddIn .14s ease-out}
.dd-list.up{top:auto;bottom:calc(100% + 6px)}
.dd.open .dd-list.up{animation-name:ddUp}
/* Scrollbars inside panels: thin, square, in the palette, no arrow buttons */
.dd-list::-webkit-scrollbar,.sugg::-webkit-scrollbar{width:9px}
.dd-list::-webkit-scrollbar-track,.sugg::-webkit-scrollbar-track{background:transparent}
.dd-list::-webkit-scrollbar-thumb,.sugg::-webkit-scrollbar-thumb{background:var(--rule);border:3px solid transparent;background-clip:padding-box}
.dd-list::-webkit-scrollbar-thumb:hover,.sugg::-webkit-scrollbar-thumb:hover{background-color:var(--graphite)}
.dd-list::-webkit-scrollbar-button,.sugg::-webkit-scrollbar-button{display:none;height:0}
@supports not selector(::-webkit-scrollbar){.dd-list,.sugg{scrollbar-width:thin;scrollbar-color:var(--rule) transparent}}
/* the page's own scrollbar looks like the dropdowns': a thin square thumb, no arrows */
html::-webkit-scrollbar{width:9px;height:9px}
html::-webkit-scrollbar-track{background:linear-gradient(to bottom,transparent var(--mast-h),var(--ink) var(--mast-h),var(--ink) calc(var(--mast-h) + 1px),transparent calc(var(--mast-h) + 1px)) var(--paper)}  /* the header's line carries on */
html::-webkit-scrollbar-thumb{background:var(--rule);border:3px solid transparent;background-clip:padding-box}
html::-webkit-scrollbar-thumb:hover{background-color:var(--graphite)}
html::-webkit-scrollbar-button{display:none;height:0}
@supports not selector(::-webkit-scrollbar){html{scrollbar-width:thin;scrollbar-color:var(--rule) var(--paper)}}
.dd.right .dd-list{left:auto;right:-1px}
.dd-list li{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:9px 14px 9px 28px;font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.dd-list li .c{color:var(--graphite)}
.dd-list li.on{background:var(--hover);color:var(--ink)}
.dd-list li[aria-selected="true"]{color:var(--ink)}
.dd-list li[aria-selected="true"]::before{content:"";position:absolute;left:12px;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--ink)}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes ddUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (max-width:860px){
  .mast .in{flex-wrap:wrap;gap:0 8px;min-height:0;padding-block:8px}  /* snug around the title; the top row stays put when search opens */
  .mast{transition:transform .25s ease}
  body.tucked .mast{transform:translateY(-100%)}  /* reading down: out of the way (site.js) */
  .mnav{display:none}
  .tools{margin-left:auto}
  .sbtn{display:inline-flex}
  .tbtn{display:none}
  .dd-cur .dd-btn{min-width:0}
  .search{order:5;flex:1 1 100%;max-height:0;margin:0;overflow:hidden;visibility:hidden;opacity:0;
          transition:max-height .22s ease,margin .22s ease,opacity .18s ease,visibility 0s linear .22s}
  .mast.searching .search{max-height:48px;margin:8px 0 2px;visibility:visible;opacity:1;transition:max-height .22s ease,margin .22s ease,opacity .18s ease}
  .mast.searched .search{overflow:visible}  /* once open, suggestions may hang below it */
  .search input{font-size:16px}  /* smaller than 16px and iPhones zoom into the box */
}

/* ---------- catalogue head ---------- */
.cat-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end;padding-block:clamp(28px,5vw,64px) clamp(20px,3vw,32px)}
.display{font-family:var(--f-display);font-stretch:62.5%;font-weight:760;text-transform:uppercase;font-size:clamp(44px,7.4vw,112px);line-height:.88;letter-spacing:-.004em;margin:0;text-wrap:balance;overflow-wrap:break-word}
.cat-intro{margin:0;max-width:40ch;font-size:17px;line-height:1.5}
.cat-side{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:6px}
.cat-stats{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px}
.cat-stats::after,.cat-office::after{content:" →"}
.cat-stats:hover{border-color:var(--ink)}
.cat-office{font-size:15px;max-width:52ch;text-wrap:pretty}
@media (max-width:560px){.cat-stats{display:none}}  /* phones: the first card stays high; the team line stays */
.crumbs{font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--graphite);margin:0 0 14px}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
@media (max-width:860px){.cat-head{grid-template-columns:1fr;gap:12px;padding-block:24px 18px}.cat-intro{font-size:16px}.cat-intro.home{display:none}}  /* phones: the home page starts at the places */

/* ---------- filter rail ---------- */
.rail{scroll-margin-top:var(--mast-h);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);display:flex;flex-wrap:wrap;align-items:stretch}
.rail>*{border-right:1px solid var(--rule)}
.rail>*:last-child{border-right:0}
.types{display:flex;flex-wrap:wrap}
.types a,.chip{appearance:none;background:transparent;color:var(--ink);border:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:11px 12px;cursor:pointer;line-height:1.2;text-decoration:none;white-space:nowrap}
.types a{border-right:1px solid var(--rule)}
.types a:last-child{border-right:0}
.types a[aria-current="page"],.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.types a:hover,.chip:hover{background:var(--paper-2)}
.types a[aria-current="page"]:hover,.chip[aria-pressed="true"]:hover{background:var(--ink)}
.types .n{margin-left:5px;opacity:.65}
.chips{display:none;flex-wrap:wrap;order:9;width:100%;border-top:1px solid var(--rule);border-right:0!important}  /* the must-haves open under the rail with Filters */
.rail.open .chips{display:flex}
.chips .chip{border-right:1px solid var(--rule)}
.chips .chip:last-child{border-right:0}
.sel{display:flex;align-items:stretch;padding:0}
.sel .dd{flex:1}
.sel .dd-btn{min-width:150px}
.sel select{appearance:none;background:transparent;color:var(--ink);border:0;font:inherit;letter-spacing:inherit;text-transform:uppercase;padding:10px 16px 10px 0;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:right 4px center,right 0 center;background-size:4px 4px;background-repeat:no-repeat}
.sel select option{color:#171614;background:#E8E5DF}
.rail .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ftoggle{display:block}
.ftoggle .n{margin-left:5px}
.views{display:flex;margin-left:auto}
.views .chip{border-left:1px solid var(--rule)}
.views .chip:first-child{border-left:0}
.count{margin:0;padding:9px 0;color:var(--graphite)}
@media (max-width:860px){
  .rail>*{border-right:0}
  .types{order:1;width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;border-bottom:1px solid var(--rule)}
  .rail .sel{order:2;flex:1 1 30%;min-width:0;padding:0}
  .sel .dd-btn{min-width:0}
  .rail .sel+.sel{border-left:1px solid var(--rule)}
  .sel select{width:100%;min-width:0;text-overflow:ellipsis}
  .ftoggle{display:block;order:2;border-left:1px solid var(--rule)!important}
  .chips{order:3;width:100%;display:none;flex-wrap:wrap;border-top:1px solid var(--rule)}
  .rail.open .chips{display:flex}
  .views{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--paper);border:1px solid var(--ink)!important;margin:0}
  .views .chip{padding:12px 18px}
  .views{transition:transform .25s ease}
  body.tucked .views{transform:translateX(-50%) translateY(calc(100% + 24px + env(safe-area-inset-bottom,0px)))}
}

/* ---------- index grid + cards ---------- */
.idx-clip{overflow:hidden;border-top:1px solid var(--rule)}
.idx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-right:-1px;margin-bottom:-1px}
@media (max-width:1100px){.idx{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.idx{grid-template-columns:minmax(0,1fr)}}
.idx.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.idx.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.card:hover .card-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.plate{position:relative;aspect-ratio:3/2;max-width:100%;background:repeating-linear-gradient(135deg,var(--hatch) 0 1px,transparent 1px 8px),var(--plate);overflow:hidden}
.plate img{width:100%;height:100%;object-fit:cover}
/* blurred stand-ins while a place has no photos of its own (data.py _lend_stand_ins) */
.soon-tag{position:absolute;left:10px;bottom:10px;z-index:3;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:6px 8px;background:var(--paper);color:var(--ink)}
.gal.soon .gph{cursor:default}
.gal.soon .soon-tag{left:12px;bottom:12px}
.plate .pname{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 10%;text-align:center;text-wrap:balance;font-family:var(--f-display);font-stretch:62.5%;font-weight:760;text-transform:uppercase;font-size:clamp(26px,2.8vw,40px);line-height:.95;letter-spacing:.01em;color:var(--graphite);opacity:.55}
.plate .pnote{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
/* label on the photo: "Reported closed" in ink; "Residents only" and the like outlined */
.pnotice{position:absolute;left:10px;top:10px;z-index:4;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:6px 8px;background:var(--paper);color:var(--ink);border:1px solid var(--ink)}
.pnotice.closed{background:var(--ink);color:var(--paper)}
.plate .pcap{position:absolute;left:10px;right:10px;bottom:8px;display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.card-body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:5px}
.card-top{display:flex;justify-content:space-between;gap:8px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.card-top b{color:var(--ink);font-weight:500}
.card-name{font-family:var(--f-display);font-stretch:62.5%;font-weight:730;text-transform:uppercase;font-size:24px;line-height:.98;margin:3px 0 3px;overflow-wrap:anywhere}
.meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;line-height:1.5;color:var(--ink-2);font-variant-numeric:tabular-nums}
.meta.d{color:var(--graphite)}
/* what a coworking card rents and from how much: a label column, then one price per row in the headline face */
.offers{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:4px;align-items:baseline;margin:2px 0 1px}
.offers dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);white-space:nowrap}
.offers .lw{display:block;height:0;overflow:hidden;visibility:hidden}
.offers .lw span{display:block}
.offers dd{margin:0;font-size:13px;line-height:1.25;color:var(--graphite);font-variant-numeric:tabular-nums;white-space:nowrap}
.offers b{font-family:var(--f-display);font-stretch:62.5%;font-weight:760;font-size:21px;color:var(--ink);margin-right:1px}
@media (max-width:480px){.offers b{font-size:19px}}
/* a narrow card (two columns on a small tablet, four in Nearby, a 320px phone) puts each label above its price */
.card-body{container-type:inline-size}
@container (max-width:280px){.offers{grid-template-columns:minmax(0,1fr);row-gap:0}.offers dd + dt{margin-top:7px}}
.badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ph-badges{margin-top:14px}  /* the place's badges, under its address */
.badge{border:1px solid var(--ink);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:1px 5px;line-height:1.5;white-space:nowrap}
.badge.soft{border-color:var(--rule);color:var(--graphite)}
a.badge{color:inherit;text-decoration:none}
a.badge:hover{background:var(--ink);color:var(--paper)}
.badge.demo{border-style:dashed}
/* closed / not open to everyone: the one red thing on the page, always the first tag */
.badge.alert{background:var(--alert);border-color:var(--alert);color:#fff;font-weight:600}
.card-foot{margin-top:auto;padding:8px 12px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--graphite)}
.card-foot .sc{color:var(--ink)}
@media (max-width:480px){
  .card-body{padding:10px 10px 12px}
  .card-name{font-size:19px}
  .meta{font-size:10px}
  .card-top{font-size:9.5px}
  .card-foot{padding:7px 10px;font-size:9px}
  .plate .pname{font-size:26px}
}
.empty{padding:48px 0;text-align:center;color:var(--graphite)}

/* ---------- map ---------- */
.mapbox{position:relative;height:min(72vh,760px);border-top:1px solid var(--rule);background:var(--paper-2)}
.mapbox .maplibregl-map{font-family:var(--f-text)}
.maplegend{position:absolute;left:10px;top:10px;z-index:3;display:flex;flex-wrap:wrap;gap:4px 12px;background:var(--paper);border:1px solid var(--ink);padding:5px 9px;font-size:10px;pointer-events:none}
.maplegend .dash{border-bottom:1px dashed var(--ink)}
.pin{width:15px;height:15px;border:1.5px solid var(--ink);background:var(--ink);cursor:pointer;padding:0}
.pin.cafe{background:var(--paper)}
.pin.approx{border-style:dashed;background:var(--paper)}
.pin.on{outline:3px solid var(--ink);outline-offset:2px}
.labels-off .pin-label{display:none}
.mpin{position:relative;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-stretch:75%;font-weight:760;font-size:12px;line-height:1}
.mpin .pin-label{left:26px;top:3px;font-weight:400}
.mpin.flip .pin-label{left:auto;right:26px}
.lpin{position:relative;width:22px;height:22px;display:flex;align-items:center;justify-content:center}  /* a landmark */
.lpin i{width:12px;height:12px;border:1.5px solid var(--ink);background:var(--paper);transform:rotate(45deg)}
.lpin .pin-label{left:26px;top:3px}
.lpin.flip .pin-label{left:auto;right:26px}
.pin-label{position:absolute;left:19px;top:-1px;font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;color:var(--ink);background:var(--paper);padding:0 3px;white-space:nowrap;max-width:210px;display:flex;gap:6px;pointer-events:none}
.pl-name{overflow:hidden;text-overflow:ellipsis}
.pl-score{flex:none;font-weight:600}
.maplibregl-popup-content{border-radius:0!important;box-shadow:none!important;border:1px solid var(--ink);background:var(--frost)!important;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);color:var(--ink);padding:10px 12px!important;font-family:var(--f-text)}
.maplibregl-popup-tip{display:none}
.maplibregl-popup-close-button{font-size:18px;color:var(--ink)}
.pop-name{font-family:var(--f-display);font-stretch:62.5%;font-weight:730;text-transform:uppercase;font-size:20px;line-height:1;margin:4px 0 6px}
.maplibregl-ctrl-group{border-radius:0!important;box-shadow:none!important;border:1px solid var(--ink);background:var(--frost)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--rule)!important}
.maplibregl-ctrl-attrib.maplibregl-compact,.maplibregl-ctrl-attrib.maplibregl-compact-show{border-radius:0!important;background:var(--frost)!important;color:var(--ink-2)}
.maplibregl-ctrl-attrib a{color:var(--ink-2)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .maplibregl-ctrl-icon,:root:not([data-theme="light"]) .maplibregl-ctrl-attrib-button{filter:invert(.88)}}
:root[data-theme="dark"] .maplibregl-ctrl-icon,:root[data-theme="dark"] .maplibregl-ctrl-attrib-button{filter:invert(.88)}

/* ---------- place page ---------- */
.place-head{padding-block:clamp(24px,4vw,48px) 20px;border-bottom:1px solid var(--ink)}
.place-head.bare{border-bottom:0}  /* no photo strip below: the about and amenities rules divide */
.place-head h1{font-family:var(--f-display);font-stretch:62.5%;font-weight:760;text-transform:uppercase;font-size:clamp(44px,7vw,104px);line-height:.88;margin:0;text-wrap:balance}
.place-sub{margin:12px 0 0;color:var(--graphite)}
.place-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 32px;align-items:start}
.ph-side{display:flex;flex-direction:column;align-items:flex-end;gap:9px;padding-top:2px}
.ph-line{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.ph-line b{font-weight:500;color:var(--ink)}
.ph-line:hover{text-decoration:underline;text-underline-offset:3px}
#score,#reviews{scroll-margin-top:calc(var(--mast-h) + 16px)}
@media (max-width:760px){
  .place-head{grid-template-columns:1fr}
  .ph-side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px}
}
.sbadge{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:6px 9px;border:1px dashed var(--ink-2);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.sbadge.ok{border:1px solid var(--ink);background:var(--ink);color:var(--paper)}
.sbadge.ok::before{content:"";width:6px;height:6px;background:currentColor}
.sbadge:hover{text-decoration:underline;text-underline-offset:3px}
.place-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,40px);padding-block:clamp(24px,3vw,36px) 48px}  /* about + facts get the room, amenities are a sidebar */
.pg-left,.pg-right{display:flex;flex-direction:column;gap:28px;min-width:0}
.pg-right{gap:22px}
.summary{font-size:18px;line-height:1.5;margin:0;max-width:76ch}
.summary.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines,6);line-clamp:var(--lines,6);overflow:hidden}  /* long ones open with Show more */
/* Get a quote / Book a tour: a small bar that follows the page at the bottom, like the grid/map switch on phones.
   No "ad-" class names in it: ad blockers hide .ad-btn and .ad-unit (EasyList), which took the buttons away. */
.askdock{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;transform:translateX(-50%);display:flex;align-items:stretch;max-width:calc(100% - 24px);background:var(--paper);border:1px solid var(--ink);transition:transform .25s ease}
.dock-from{display:flex;align-items:baseline;gap:5px;padding:0 14px;white-space:nowrap;align-self:center}
.dock-from .mono{color:var(--graphite)}
.dock-from b{font-family:var(--f-display);font-stretch:62.5%;font-weight:760;font-size:22px;line-height:1;font-variant-numeric:tabular-nums}
.dock-unit{font-size:13px;color:var(--graphite)}
.dock-btn{appearance:none;border:0;border-left:1px solid var(--rule);background:transparent;color:var(--ink);font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;line-height:1.2;padding:13px 16px;cursor:pointer;white-space:nowrap}
.dock-btn:first-child{border-left:0}
.dock-btn.on{background:var(--ink);color:var(--paper);border-left-color:var(--ink)}
@media (hover:hover){.dock-btn:hover{background:var(--paper-2)}.dock-btn.on:hover{background:var(--ink-2)}}
body:has(.askdock) .foot-base{padding-bottom:84px}  /* room so the bar never covers the last line */
@media (max-width:860px){body.tucked .askdock{transform:translateX(-50%) translateY(calc(100% + 24px + env(safe-area-inset-bottom,0px)))}}
@media (max-width:420px){.dock-from{padding:0 9px;gap:4px}.dock-btn{padding:13px 10px;letter-spacing:.04em}.dock-from b{font-size:20px}}
@media (max-width:374px){.dock-from .mono{display:none}}  /* narrow phones: "₾425/month" says enough */
@media (max-width:340px){.dock-unit{display:none}}
.btn.ghost{background:transparent;color:var(--ink)}
@media (hover:hover){.btn.ghost:hover{background:var(--ink);color:var(--paper)}}
/* Get a quote / Book a tour: one question at a time. Phones get the whole screen (below), so the dialog never
   changes size between questions; no tap highlight, and each question fades in instead of popping. */
.ask,.askdock{-webkit-tap-highlight-color:transparent}
.ask .step:not([hidden]){animation:askIn .16s ease-out}
@keyframes askIn{from{opacity:.4}}  /* from 0 the screen blinks empty for a frame */
.ask{width:min(640px,calc(100% - 24px));max-height:calc(100vh - 24px);max-height:calc(100svh - 24px);padding:0;border:1px solid var(--ink);background:var(--paper);color:var(--ink);overflow:auto}
.ask::backdrop{background:rgba(18,17,16,.5)}
.ask-form{display:flex;flex-direction:column;min-height:min(520px,calc(100vh - 26px));min-height:min(520px,calc(100svh - 26px))}  /* svh: browser bars showing or not, the size stays */
.ask-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 20px}
.ask-head h2{margin:0;font-size:11px;font-weight:500;color:var(--ink)}
.ask-head h2:focus{outline:none}  /* the dialog opens on its title; it isn't something to press */
.ask-head .ibtn svg{fill:none;stroke:currentColor;stroke-width:1.8}
.ask-bar{height:1px;background:var(--rule);position:relative}
.ask-bar i{position:absolute;left:0;top:-1px;height:3px;background:var(--ink);width:0;transition:width .25s ease}
.ask-count{margin:16px 20px 0}
.ask .step{border:0;margin:0;padding:10px 20px 20px;min-width:0;display:flex;flex-direction:column;gap:14px}
.ask .step[hidden],.ask [data-skip]{display:none}
.ask legend{float:left;width:100%;padding:0;margin:0 0 6px;font-family:var(--f-display);font-stretch:62.5%;font-weight:760;text-transform:uppercase;font-size:clamp(28px,5vw,40px);line-height:.95;text-wrap:balance}
.ask legend+*{clear:both}
.opts{display:grid;gap:8px}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opts.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.opts.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px 12px;border:1px solid var(--ink);text-align:center;font-size:15px;line-height:1.3}
@media (hover:hover){.opt:hover span{background:var(--hover)}}
.opt input:checked+span{background:var(--ink);color:var(--paper)}
.opt input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.ask-date{display:flex;flex-direction:column;gap:5px}
.ask-date input{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--ink);border-radius:0;padding:10px 12px;max-width:240px}
.ask .form{max-width:none;gap:12px}
.ask .form textarea{min-height:64px}
.ask-note{margin:0;padding:10px 12px;border:1px dashed var(--ink-2);font-size:14.5px;line-height:1.45}
.ask-done .ask-big{font-family:var(--f-display);font-stretch:62.5%;font-weight:760;text-transform:uppercase;font-size:44px;line-height:.9;margin:8px 0 6px}
.ask-done p{margin:0;font-size:17px}
.ask-err{margin:0 20px 12px;color:var(--alert);font-size:14.5px}
.ask-foot{margin-top:auto;display:flex;justify-content:space-between;gap:8px;padding:14px 20px 18px;border-top:1px solid var(--rule)}
.ask-foot .ask-next,.ask-foot .ask-send,.ask-foot .ask-close{margin-left:auto}
@media (max-width:560px){.opts.four{grid-template-columns:repeat(3,minmax(0,1fr))}.opts.three{grid-template-columns:1fr}.ask-head{padding-left:16px}.ask .step,.ask-count,.ask-foot{padding-inline:16px}.ask-count{margin-inline:0;padding-top:0}
  .ask{width:100%;max-width:none;height:100%;max-height:none;margin:0;border:0}
  .ask-form{min-height:100%}
  .ask-head{padding-top:calc(12px + env(safe-area-inset-top,0px))}
  .ask-foot{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}}
/* Place photos: a strip of 3:2 photos, a big one then a stacked pair (also 3:2), repeating. It scrolls
   sideways (snapping to a column), the arrows move it a screen at a time, a photo opens full screen.
   Fewer photos than the strip holds grow to fill it, big ones twice as fast as pairs. */
.gal-sec{padding-top:clamp(16px,2vw,24px)}
.gal{position:relative;--h:clamp(220px,31vw,460px);--gap:4px}
.gal-track{position:relative;display:flex;gap:var(--gap);height:var(--h);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gal-track::-webkit-scrollbar{display:none}
.gal-track:focus-visible{outline-offset:3px}
.gcol{flex:2 0 calc(var(--h) * 1.5);display:flex;flex-direction:column;gap:var(--gap);min-width:0;scroll-snap-align:start}
.gcol.pair{flex:1 0 calc((var(--h) - var(--gap)) * .75)}
.gph{position:relative;flex:1 1 0;min-height:0;display:block;width:100%;padding:0;border:0;overflow:hidden;cursor:zoom-in;background:var(--plate)}
.gph img{position:relative;width:100%;height:100%;object-fit:cover}
.gph.whole img{object-fit:contain}
.gph:focus-visible{outline-offset:-3px}
.slide-bg{position:absolute;inset:-40px;background:center/cover no-repeat;filter:blur(28px) saturate(1.1) brightness(.92)}
.sl-arrow{position:absolute;top:50%;z-index:3;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-top:-20px;padding:0;border:1px solid var(--ink);background:var(--frost);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);cursor:pointer}
.sl-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.sl-prev{left:12px}.sl-next{right:12px}
@media (hover:none){.sl-arrow{display:none}}  /* phones swipe; the next photo peeks in from the edge */
@media (hover:hover){.sl-arrow:hover,.gal-full:hover{background:var(--ink);color:var(--paper)}}
.gal-full{position:absolute;right:12px;top:12px;z-index:3;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--ink);background:var(--frost);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);cursor:pointer}
.gal-full .ico{width:15px;height:15px;stroke-width:1.6}
@media (max-width:760px){.gal{--h:calc((100vw - 2 * var(--gut)) * .56)}}  /* a big photo fills most of the width, the next one peeks in */
/* whole pixels, so the arrows (top:50%) sit on the pixel grid and stay sharp */
@supports (height:round(1px,1px)){
  .gal{--h:round(clamp(220px,31vw,460px),2px)}
  @media (max-width:760px){.gal{--h:round(calc((100vw - 2 * var(--gut)) * .56),2px)}}
}
/* full screen: dark in both themes, photos whole, swipe or arrows; Esc, the cross or a click beside the photo closes it */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:#121110;color:#EAE5DC}
.lb::backdrop{background:#121110}
.lb-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.lb-track::-webkit-scrollbar{display:none}
.lb-slide{flex:0 0 100%;height:100%;margin:0;display:flex;align-items:center;justify-content:center;padding:64px clamp(8px,7vw,96px);scroll-snap-align:center;scroll-snap-stop:always}
.lb-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb-count{position:absolute;left:var(--gut);top:22px;z-index:2;margin:0;color:#EAE5DC}
.lb-close,.lb-arrow{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:1px solid rgba(234,229,220,.55);background:rgba(18,17,16,.5);color:#EAE5DC;cursor:pointer}
.lb-close{right:var(--gut);top:12px}
.lb-arrow{top:50%;margin-top:-21px}
.lb-prev{left:var(--gut)}.lb-next{right:var(--gut)}
.lb-close svg,.lb-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
@media (hover:hover){.lb-close:hover,.lb-arrow:hover{background:#EAE5DC;color:#121110}}
@media (hover:none){.lb-arrow{display:none}}
html.lb-open{overflow:hidden}
/* amenities: icon, name and what the place says about it */
.ico{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.amen{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
.amen li{display:flex;align-items:flex-start;gap:11px;min-width:0}
.amen .ico{flex:none;width:20px;height:20px}
.am-t{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:1px}
.am-t b{font-weight:500;font-size:15px;line-height:1.3}
.am-v{font-size:13.5px;line-height:1.4;color:var(--graphite);overflow-wrap:anywhere}
.more-btn{appearance:none;align-self:flex-start;background:none;border:0;padding:10px 0 2px;color:var(--ink);cursor:pointer}
.more-btn::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 2px 8px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:rotate(45deg)}
.more-btn:hover{text-decoration:underline;text-underline-offset:3px}
.more-btn[aria-expanded="true"]::after{transform:rotate(-135deg);margin-bottom:-1px}
/* price cards: one per way to pay, sharing 1px rules (outlines meet in the 1px gap) */
.plans-sec{padding-bottom:40px}
/* tabs when a place sells more than one kind of thing (coworking, offices, meeting rooms, virtual office) */
.plan-tabs{display:inline-flex;max-width:100%;margin-top:18px;border:1px solid var(--ink);overflow-x:auto;scrollbar-width:none}
.plan-tabs::-webkit-scrollbar{display:none}
.plan-tabs button{appearance:none;flex:none;background:transparent;color:var(--ink);border:0;border-right:1px solid var(--rule);font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;line-height:1.2;padding:11px 16px;cursor:pointer;white-space:nowrap}
.plan-tabs button:last-child{border-right:0}
.plan-tabs button:hover{background:var(--paper-2)}
.plan-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.plan-tabs button:focus-visible{outline-offset:-4px;outline-color:currentColor}
.plan-panels{display:grid;margin:18px 1px 0}
.plans{grid-area:1/1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:1px}  /* rows fill the tallest tab's height */
.plans.off{visibility:hidden}
.plan{outline:1px solid var(--rule);padding:18px 20px 22px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.plan .ico{width:22px;height:22px;margin-bottom:10px}
.plan h3{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin:0}
.plan-price{font-family:var(--f-display);font-stretch:62.5%;font-weight:760;font-size:clamp(40px,4vw,56px);line-height:.9;margin:6px 0 0;font-variant-numeric:tabular-nums}
.plan-price small{font-size:.42em;font-weight:600;color:var(--graphite);margin-right:.15em}
.plan-price.req{font-size:clamp(28px,2.6vw,36px);line-height:1;margin-top:10px}
.plan-unit{margin:2px 0 0;font-size:14.5px;color:var(--ink-2)}
.plan-cta{margin-top:14px;text-decoration:none}
.plan-lead{grid-column:span 2;justify-content:flex-start}
.plan-lead p{margin:6px 0 0;font-size:17px;line-height:1.5;max-width:52ch}
.plans-note{margin:14px 0 0;font-size:14.5px;max-width:70ch}
@media (max-width:900px){.plans{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;align-content:start}.plan-lead,.plan:has(+ .plan-lead),.plan:last-child:nth-child(odd){grid-column:1/-1}}  /* no card alone beside a gap */
@media (max-width:900px){.plans.off{display:none}}  /* phones: the section follows the open tab, so the note below sits right under its cards */
@media (max-width:480px){.plan{padding:14px 14px 16px}.plan-price{font-size:36px}}
.nearby-more{display:block;width:fit-content;margin:18px auto 0;border:1px solid var(--ink)}
@media (max-width:900px){
  /* one column in reading order: about, score + facts, amenities, corrections */
  .place-grid{display:flex;flex-direction:column}
  .pg-left,.pg-right{display:contents}
  .pg-about{order:1}.pg-side{order:2}.pg-amen{order:3}.pg-wrong{order:4}
}
.gallery{display:grid;grid-template-columns:2fr 1fr;gap:8px;align-self:start}
.gallery .plate:first-child{grid-row:span 2;aspect-ratio:4/5}
.gallery .plate:not(:first-child){aspect-ratio:auto;min-height:100px}
.plate.wide{aspect-ratio:3/2;align-self:start}
.facts{display:flex;flex-direction:column;gap:22px;min-width:0}
.fact-block{border-top:1px solid var(--ink);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.fact-block h2{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin:0}
.fact-block p{margin:0}
.status{border:1px solid var(--ink);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.status.ok{background:var(--ink);color:var(--paper)}
.status .mono{font-size:10.5px}
.score{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap}
.parts{display:flex;gap:16px;margin:0;padding:0;list-style:none}
.parts li{display:flex;flex-direction:column;align-items:center;gap:7px}
.parts svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.bar{display:block;width:28px;height:7px;border:1px solid var(--ink);background:linear-gradient(to right,var(--ink) var(--f,0%),transparent var(--f,0%))}
.bar.b1{--f:50%}.bar.b2{--f:100%}
.score .big{font-family:var(--f-display);font-stretch:62.5%;font-weight:760;font-size:56px;line-height:.85}
.score .big small{font-size:.45em;color:var(--graphite);font-weight:600}
table.kv{width:100%;border-collapse:collapse;font-size:15px}
table.kv th{text-align:left;font-weight:400;color:var(--graphite);padding:7px 12px 7px 0;border-bottom:1px solid var(--rule);width:48%;vertical-align:top}
table.kv td{padding:7px 0;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums;vertical-align:top}
.links{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.minimap{height:260px;border:1px solid var(--ink);background:var(--paper-2)}
.spec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
details.more summary{list-style:none;cursor:pointer;padding:8px 0 2px;color:var(--ink)}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 2px 8px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:rotate(45deg)}
details.more[open] summary::after{transform:rotate(-135deg);margin-bottom:-1px}
.where{padding-bottom:40px}
.where .minimap{height:380px}
.where-info{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,40px);margin-top:22px;align-items:start}  /* the same columns as about | amenities above */
.where-info table.kv th{width:36%}
/* exactly one line of the table's text tall, so the row doesn't move when the number replaces the button */
.btn.reveal{box-sizing:border-box;height:23px;line-height:21px;padding:0 10px;font-size:11px;vertical-align:top}
.btn.reveal:disabled{opacity:.5;cursor:default}
.reveal .r-tap,.reveal .r-err{display:none}
@media (hover:none){.reveal .r-click{display:none}.reveal .r-tap{display:inline}}  /* phones and tablets: Tap to show */
.reveal.failed .r-click,.reveal.failed .r-tap{display:none}
.reveal.failed .r-err{display:inline}
@media (max-width:760px){.where .minimap{height:280px}.where-info{grid-template-columns:1fr}}
.reviews{padding-block:40px 48px}
.rate{display:inline-flex;gap:3px;vertical-align:-1px}
.rate i{display:block;width:9px;height:9px;border:1.3px solid var(--ink)}
.rate i.on{background:var(--ink)}
.card-foot .sc{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.card-foot .sep{color:var(--graphite)}
.card-foot .rvsum{display:inline-flex;align-items:center;gap:6px}
.card-foot .rate i{width:8px;height:8px}
@media (max-width:480px){.card-foot .sc-word,.card-foot .vf{display:none}}  /* a score already means we visited */
.rv-list{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--ink);max-width:820px}
.rv{display:flex;flex-direction:column;gap:8px;padding:16px 0;border-bottom:1px solid var(--rule)}
.rv p{margin:0;max-width:66ch}
.rv-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.rv-reply{margin-left:16px;padding-left:14px;border-left:2px solid var(--ink);display:flex;flex-direction:column;gap:4px}
.rv-write{margin-top:20px}
.rv-write summary{list-style:none;display:inline-block}
.rv-write summary::-webkit-details-marker{display:none}
.rv-write[open] summary{margin-bottom:20px}
.rate-in{border:0;margin:0;padding:0;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px}
.rate-in legend{padding:0;margin-bottom:8px}
.rate-in input{position:absolute;width:1px;height:1px;opacity:0}
.form .rate-in label{display:block;width:26px;height:26px;padding:0;border:1.5px solid var(--ink);cursor:pointer}
.form .rate-in input:checked~label,.form .rate-in label:hover,.form .rate-in label:hover~label{background:var(--ink)}
.form .rate-in input:focus-visible+label{outline:2px solid var(--ink);outline-offset:2px}
.rate-in .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.section-title{font-family:var(--f-display);font-stretch:62.5%;font-weight:740;text-transform:uppercase;font-size:clamp(30px,3.6vw,48px);line-height:.92;margin:0 0 14px}

/* ---------- forms ---------- */
.form{display:grid;gap:14px;max-width:640px}
.form label{display:flex;flex-direction:column;gap:5px;font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--graphite)}
.form input,.form select,.form textarea{font:inherit;font-family:var(--f-text);font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--paper);border:1px solid var(--ink);border-radius:0;padding:10px 12px}
.form textarea{min-height:110px;resize:vertical}
.form .dd{border:1px solid var(--ink);min-height:45px}
.form .dd-btn{font-family:var(--f-text);font-size:16px;letter-spacing:0;text-transform:none;padding:0 12px}
.form .dd-list li{font-family:var(--f-text);font-size:15px;letter-spacing:0;text-transform:none}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.form .row{grid-template-columns:1fr}}
.btn{appearance:none;justify-self:start;background:var(--ink);color:var(--paper);border:1px solid var(--ink);font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:12px 18px;cursor:pointer}
@media (hover:hover){.btn:hover{background:transparent;color:var(--ink)}}  /* on phones a tapped button would keep it */
.hp{position:absolute;left:-9999px}
.notice{border:1px solid var(--ink);padding:14px 16px;max-width:640px}

/* ---------- prose pages ---------- */
.page{padding-block:clamp(28px,5vw,64px) 64px}
.page .lede{font-size:19px;line-height:1.5;max-width:62ch;margin:18px 0 0}
.prose{max-width:66ch}
.spec-wrap{overflow-x:auto;border-top:1px solid var(--ink);margin-top:18px}
table.spec{width:100%;border-collapse:collapse;font-size:14.5px;min-width:620px}
table.spec th{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--ink)}
table.spec td{padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
ol.rules,ul.rules{margin:18px 0 0;padding-left:1.3em;display:flex;flex-direction:column;gap:6px;max-width:66ch}
.legal .section-title{margin-top:44px}
.legal .prose{margin:14px 0 0}
.legal .lede+.mono{margin-top:12px}
.form-privacy{margin:0}
/* price index: four medians, then every price */
.pstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);margin-top:32px}
.pstat{display:flex;flex-direction:column;gap:6px;padding:12px 16px 16px;border-right:1px solid var(--rule)}
.pstat:first-child{padding-left:0}
.pstat:last-child{border-right:0}
.pstat h2{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin:0}
.pstat .big{font-family:var(--f-display);font-stretch:62.5%;font-weight:760;font-size:clamp(40px,4.6vw,64px);line-height:.85;margin:6px 0 0;font-variant-numeric:tabular-nums}
.pstat .big small{font-size:.4em;color:var(--graphite);font-weight:600}
.pstat p{margin:0}
table.spec.prices td{font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .pstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pstat:nth-child(odd){padding-left:0}
  .pstat:nth-child(even){border-right:0}
  .pstat:nth-child(n+3){border-top:1px solid var(--rule)}
}

/* ---------- guides ---------- */
.guide .lede{max-width:60ch}
.guide-date{margin:16px 0 0}
.guide-body{margin-top:40px;font-size:18px;line-height:1.65}
.guide-body>*:not(.guide-places):not(.spec-wrap):not(.pstats){max-width:68ch}
.guide-body h2{font-family:var(--f-display);font-stretch:62.5%;font-weight:740;text-transform:uppercase;font-size:clamp(28px,3.2vw,40px);line-height:.95;margin:52px 0 14px}
.guide-body h3{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin:28px 0 8px}
.guide-body p{margin:0 0 16px}
.guide-body ul,.guide-body ol{margin:0 0 18px;padding-left:1.2em}
.guide-body li{margin:0 0 7px}
.guide-body .facts-line{margin:-4px 0 14px}
.guide-body .spec-wrap{margin:10px 0 26px}
.guide-body .pstats{margin:18px 0 26px}
.guide-body .pstat h2{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;color:var(--graphite);margin:0}  /* a tile label, not a section heading */
.guide-places{margin:30px 0 34px}
.guide-places figcaption{margin-top:10px}
.guide-sources{margin-top:60px;border-top:1px solid var(--ink);padding-top:12px;max-width:68ch}
.guide-sources h2{font-size:11px;font-weight:500;margin:0 0 10px}
.guide-sources ol{margin:0;padding-left:1.2em;font-size:14.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:6px;overflow-wrap:anywhere}
.guide-list{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--ink)}
.guide-list a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 32px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.guide-list .gl-title{font-family:var(--f-display);font-stretch:62.5%;font-weight:740;text-transform:uppercase;font-size:clamp(24px,2.6vw,34px);line-height:.95}
.guide-list .gl-sum{color:var(--ink-2)}
.guide-list a:hover .gl-title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:760px){.guide-list a{grid-template-columns:1fr}.guide-body{font-size:17px}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--ink);margin-top:48px}
.foot-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px;padding-block:32px}
@media (max-width:1100px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.foot-grid h2{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin:0 0 10px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:14px}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{text-decoration:underline}
.foot-base{border-top:1px solid var(--rule);padding-block:14px 28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.foot-cur{display:flex;align-items:center;gap:10px;width:100%}
@media (max-width:860px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the long link lists: plain headings on wide screens, tap-to-open rows on phones (Browse and About stay open, first) */
.foot-grid .fold summary{display:block;list-style:none}
.foot-grid .fold summary::-webkit-details-marker{display:none}
@media (min-width:861px){.foot-grid .fold summary{pointer-events:none}}
@media (max-width:860px){
  .foot-grid{row-gap:0;padding-block:24px 0}  /* the bottom line below closes the last row */
  .foot-grid .keep{order:-1;padding-bottom:24px}
  .foot-grid .fold{grid-column:1/-1;border-top:1px solid var(--rule)}
  .foot-grid .fold summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px;cursor:pointer}
  .foot-grid .fold summary h2{margin:0}
  .foot-grid .fold summary::after{content:"+";font-family:var(--f-mono);font-size:17px;line-height:1;color:var(--graphite)}
  .foot-grid .fold[open] summary::after{content:"\2212"}
  .foot-grid .fold ul{padding-bottom:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}