/* Nagaland Stays prototype — one stylesheet for every page. No build step. */
@font-face{font-family:"Work Sans";src:url(assets/worksans-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --ink:#15201B; --ink-2:#4A5650; --ink-3:#5F6963; /* was #6E7872 (4.17:1 on ground); HANDOFF §7a */
  --paper:#FFFFFF; --ground:#F3F5F0; --line:#D6DCD2;
  --rhodo:#9E2B3A; --rhodo-tint:#F7E6E9; /* accent LOCKED 10 Oct 2026: rhododendron red */
  --forest:#0B6B3A; --forest-tint:#E2F1E7;
  --amber:#7A5000; --amber-tint:#FFF0CF;
  --slate:#25313A;
  --r:12px; --tap:48px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --display:"Work Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#314B64} /* the photo's bottom colour, only seen past the footer on short pages */
body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.45 var(--sans)}
a{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;margin:0;letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:720px;margin:0 auto}

/* prototype notice */
.proto{background:var(--amber-tint);color:var(--amber);font-size:13px;font-weight:600;padding:6px 16px;text-align:center;border-bottom:1px solid #EBD6A6}

/* header */
.top{background:var(--paper);border-bottom:1px solid var(--line);padding:10px 16px;display:flex;align-items:center;gap:10px}
.mark{display:flex;align-items:center;text-decoration:none;flex:none}
.mark img{display:block;height:44px;width:auto} /* header logo (Vikedo, 15 Oct): rhododendron rounded tile 44px with the white S1 house + stacked Work Sans wordmark ("Stays" in rhododendron), 142px wide. 44px = the "+ List" row height, so the header stays 65px */
.top .sp{flex:1;margin-left:-8px} /* spacer adds no extra gap */
.pill{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:1.5px solid var(--ink);font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;background:var(--paper)}
.pill.hb{border-color:var(--rhodo);color:var(--rhodo)}
/* header rule, option A (decided 11 Oct 2026): lockup + "+ List" link + Hornbill pill. The pill shows its dates only from 430px
   (full "Hornbill Festival, 1–10 Dec" stays in aria-label). Tile 44px at >=390, 40px at 360-389, 36px below 360 (floor 28px). Header 65px. */
.top{gap:8px}
.lst{display:inline-flex;align-items:center;gap:3px;min-height:44px;padding:0 2px;font-weight:800;font-size:15px;color:var(--rhodo);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.pill.hb .hb-d{display:none}
@media (max-width:389.98px){.mark img{height:40px}.pill.hb{padding:0 10px}} /* below 390px the tile is 40px */
@media (max-width:359.98px){.top{gap:6px}.top .sp{margin-left:-6px}.mark img{height:36px}.pill.hb{padding:0 8px;font-size:13px}.lst{font-size:14px}}
/* district seal in the phone bar (davinci, 23 Oct 2026, option B): 64px, shrinking 1px per px of width to 49px at 320 so the back link never wraps; hidden from 1000px where the hero carries it */
.top .dbadge{display:none}
@media (max-width:999.98px){.top .dbadge{flex:none;display:block;width:clamp(49px,calc(100vw - 271px),64px);height:auto;aspect-ratio:1;margin-right:4px}.top .dbadge~.back{white-space:nowrap}}
@media (max-width:359.98px){.top .dbadge{margin-right:0}}
@media (min-width:440px){.pill.hb .hb-d{display:inline}} /* davinci 11 Oct: dates from 440px */
.back{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:700;text-decoration:none;gap:4px}

/* search + controls */
.controls{background:var(--paper);padding:12px 16px 10px;border-bottom:1px solid var(--line)}
.search{display:flex;align-items:center;gap:8px;height:var(--tap);border:1.5px solid var(--ink);border-radius:999px;padding:0 12px;font-size:16px;color:var(--ink-3);background:var(--paper)}
.search svg{flex:none}
.search>svg,.hsearch>svg{box-sizing:border-box;display:block;flex:none;width:36px;height:36px;margin-left:-8px;margin-right:8px;padding:8px;border-radius:50%;background:var(--rhodo);color:#fff}
.seg{display:grid;grid-template-columns:1fr 1fr;margin-top:10px;padding:3px;background:var(--ground);border:1px solid var(--line);border-radius:999px}
.seg a{min-height:42px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;font-weight:600;text-decoration:none;font-size:15px;color:var(--ink-2)}
.seg a[aria-current]{background:var(--ink);color:#fff;font-weight:700}
.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 16px;margin:0 -16px -10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);font-size:15px;font-weight:600;text-decoration:none;color:var(--ink)}
.chip.on{background:var(--forest-tint);border-color:var(--forest);color:var(--forest)}
.chip.f{border-color:var(--ink)}
.chip b{background:var(--ink);color:#fff;border-radius:999px;font-size:12px;min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 6px}
.chip .n{color:var(--ink-3);font-weight:500}
.meta{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 4px;font-size:14px;color:var(--ink-2)}
.meta strong{color:var(--ink)}

/* listing card */
.list{list-style:none;margin:0;padding:8px 12px 24px;display:grid;gap:10px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px;position:relative}
.card .row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px}
.card h3{font-size:20px}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0 0 64px 0}
.where{font-size:14px;color:var(--ink-2);margin-top:3px}
.price{font-size:15px;font-weight:700;margin-top:6px}
.price span{font-weight:400;color:var(--ink-3);font-size:13px}
.price.none{font-weight:500;color:var(--ink-3)}
.thumb{width:88px;height:88px;border-radius:10px;object-fit:cover;background:var(--ground)}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ig{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:4px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;font-size:15px}.ig svg{flex:none}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);border-radius:var(--r);font-weight:800;font-size:16px;text-decoration:none;border:2px solid transparent;position:relative;z-index:1}
.btn.wa{background:var(--forest);color:#fff}
.btn.call{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.btn.ghost{background:var(--paper);border-color:var(--line);color:var(--ink)}
.btn.lg{min-height:56px;font-size:17px}
.btn.wide{grid-column:1/-1}
.btn.ask{grid-column:1/-1;background:var(--ground);border:2px dashed #A9B3A3;color:var(--ink);font-weight:700}

/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;line-height:1.2;padding:5px 9px;border-radius:7px;border:1px solid transparent}
.badge svg{flex:none}
.b-ver{background:var(--forest-tint);color:var(--forest);border-color:#B5D9C2}
.b-pend{background:var(--amber-tint);color:var(--amber);border-color:#EBD6A6}
.b-stale{background:#F4ECE2;color:#7A4B1E;border-color:#E2CDB3}
.b-unk{background:var(--ground);color:var(--ink-2);border-color:var(--line)}
.b-ex{font:700 10px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--rhodo);border:1px solid var(--rhodo);border-radius:4px;padding:3px 5px;background:var(--paper)}

/* no-photo tile: district tint + contour lines + village name */
.np{--t:#2F5D4E;position:relative;overflow:hidden;background-color:var(--t);color:#fff;border-radius:10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120' fill='none' stroke='%23fff' stroke-opacity='.13' stroke-width='1.2'%3E%3Cpath d='M-10 96c30-18 52-30 84-26s58 22 96 6'/%3E%3Cpath d='M-10 80c28-22 54-36 86-32s56 20 94 2'/%3E%3Cpath d='M-10 64c26-24 56-42 88-38s54 18 92-2'/%3E%3Cpath d='M-10 48c24-24 58-46 90-44s52 14 90-6'/%3E%3Cpath d='M-10 112c32-14 50-22 82-18s60 24 98 10'/%3E%3C/svg%3E");background-size:160px 120px}
.np{container-type:inline-size}
.np .v{font:600 min(16px,calc((100cqi - 14px) / (var(--n,8) * .69)))/1.05 var(--display);display:block;padding:9px 7px 0;hyphens:manual} /* HANDOFF §7a tile text rule */
.np .d{position:absolute;left:8px;right:6px;bottom:7px;font:700 min(9px,calc((100cqi - 14px) / (var(--nd,8) * .86)))/1.1 var(--sans);letter-spacing:.09em;text-transform:uppercase;opacity:.82;hyphens:manual}
.np.big{border-radius:0;height:260px;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 16px;background-size:240px 180px}
.np.big .v{font-size:min(60px,calc((100cqi - 32px) / (var(--n,8) * .69)));padding:0;letter-spacing:-.02em}
.np.big .d{position:static;font-size:12px;margin-top:10px;opacity:.9}
.np.big .note{position:absolute;top:14px;left:16px;font-size:13px;font-weight:700;background:rgba(0,0,0,.28);padding:5px 9px;border-radius:7px}
.t-kohima{--t:#2F5D4E}.t-dimapur{--t:#7A5530}.t-mon{--t:#38506E}.t-mokokchung{--t:#5A6530}.t-wokha{--t:#6A4658}
.t-phek{--t:#2D5B66}.t-zunheboto{--t:#6B5729}.t-tuensang{--t:#4D4870}.t-kiphire{--t:#5E4B36}.t-peren{--t:#3C6440}
.t-longleng{--t:#6A3E3A}.t-chumoukedima{--t:#80502A}.t-other{--t:#47554D}

/* place page */
.hero{margin:0;position:relative;aspect-ratio:4/3;background:#2a332e}
.hero img{width:100%;height:100%;object-fit:cover}
.hero figcaption{position:absolute;left:10px;bottom:10px;right:10px;font-size:12px;font-weight:600;color:#fff;background:rgba(0,0,0,.6);padding:4px 8px;border-radius:6px;width:max-content;max-width:calc(100% - 20px)}
.hero figcaption b{background:var(--amber-tint);color:var(--amber);border-radius:4px;padding:0 5px;margin-right:6px;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.credit{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--paper);padding:8px 16px;font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.credit a{color:var(--ink);font-weight:700}
.tw{position:relative;width:88px;height:88px}
.tw span{position:absolute;left:4px;bottom:4px;background:var(--amber-tint);color:var(--amber);font:800 9px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;padding:3px 4px;border-radius:3px}
.sec{background:var(--paper);padding:18px 16px;border-bottom:1px solid var(--line)}
.sec h2{font-size:21px;margin-bottom:10px}
.kicker{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.title h1{font-size:32px;margin:6px 0 6px}
.bigprice{font:600 28px/1.1 var(--display);margin-top:12px}
.bigprice small{font:500 15px var(--sans);color:var(--ink-2)}
.src{font-size:13px;color:var(--ink-3);margin-top:4px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0}
.facts div{padding:10px 0;border-top:1px solid var(--line);font-size:16px}
.facts div:nth-child(odd){padding-right:10px}
.facts dt{font-size:13px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin:0 0 2px}.facts dd{margin:0;color:var(--ink);font-weight:600}
.facts .ph{color:var(--ink-3);font-style:italic}
.y{color:var(--forest);font-weight:800}.q{color:var(--ink-3);font-weight:800}
.ph-tag{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--rhodo)}
.dir{display:grid;gap:10px}
.addr{font-size:16px}
.gps{font:600 14px ui-monospace,Menlo,Consolas,monospace;color:var(--ink-2)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.note{background:var(--ground);border-left:4px solid var(--ink);padding:10px 12px;border-radius:0 8px 8px 0;font-size:15px}
.note.warn{border-color:var(--amber);background:var(--amber-tint)}
.dock{position:sticky;bottom:0;z-index:5;background:var(--paper);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 18px rgba(0,0,0,.08)}
.dock .num{font-size:13px;color:var(--ink-2);text-align:center;margin-bottom:8px}
.dock .num b{color:var(--ink);font-family:ui-monospace,Menlo,monospace}
.trust{display:grid;gap:8px}
.trust .badge{font-size:14px;padding:8px 10px}
.trust p{margin:0;font-size:14px;color:var(--ink-2)}
.specimen{display:grid;gap:10px}
.specimen .rowx{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.links a:first-child,.links h2+a{border-top:0}
.links{padding-top:4px;padding-bottom:4px}
.links a{display:flex;align-items:center;min-height:var(--tap);border-top:1px solid var(--line);text-decoration:none;font-weight:600;justify-content:space-between}
.helpus{margin-top:12px;border-top:1px solid var(--line)}
.helpus a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--tap);text-decoration:none;font-weight:600}
.foot{padding:20px 16px 40px;font-size:14px;color:var(--ink-2);text-align:center}

/* map */
.mapbox{position:relative;background:#E9EDE4;overflow:hidden}
.mapbox img{width:100%;height:auto}
.pin{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:999px;background:var(--rhodo);color:#fff;font:800 13px/1 var(--sans);text-decoration:none;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35);min-width:26px;height:26px;padding:0 6px;font-size:12px}
@media (min-width:1000px){.pin{min-width:30px;height:30px;font-size:13px;padding:0 7px}}
.pin.s{background:var(--ink);min-width:16px;height:16px;padding:0;border-width:2px}
.pin.sel{background:var(--ink);outline:3px solid var(--rhodo);z-index:2}
.pin.dot{min-width:12px;height:12px;padding:0;background:var(--rhodo);border-width:1.5px}
.mapattr{position:absolute;right:6px;bottom:4px;font-size:10px;color:var(--ink-3);background:rgba(255,255,255,.8);padding:1px 4px;border-radius:3px}
.zoomout{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;background:var(--paper);border:1.5px solid var(--ink);font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.maplegend{position:absolute;left:8px;top:8px;background:rgba(255,255,255,.92);font-size:12px;padding:5px 8px;border-radius:6px;color:var(--ink-2)}
.sheet{background:var(--paper);border-radius:18px 18px 0 0;margin-top:-14px;position:relative;padding:8px 12px 16px;box-shadow:0 -4px 16px rgba(0,0,0,.1)}
.grab{width:40px;height:5px;border-radius:9px;background:var(--line);margin:4px auto 10px}
.sheet h2{font-size:22px;padding:0 4px}
.sheet .sub{font-size:14px;color:var(--ink-2);padding:2px 4px 10px}

/* filter sheet */
.scrim{position:fixed;inset:0;background:rgba(10,16,13,.55);z-index:10}
.fsheet{position:fixed;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;z-index:11;background:var(--paper);border-radius:18px 18px 0 0;padding:6px 16px 0}
.fsheet header{display:flex;justify-content:space-between;align-items:center;padding:4px 0 8px}
.fsheet header h2{font-size:24px}
.fgroup{border-top:1px solid var(--line);padding:14px 0}
.fgroup h3{font:700 15px/1.2 var(--sans);margin-bottom:10px;display:flex;justify-content:space-between}
.fgroup h3 span{font-weight:500;color:var(--ink-3);font-size:13px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.toggle{display:flex;justify-content:space-between;align-items:center;min-height:var(--tap);gap:12px;font-size:15px}
.toggle small{display:block;color:var(--ink-3);font-size:13px}
.sw{flex:none;width:52px;height:32px;border-radius:999px;background:#C9D0C5;position:relative}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.sw.on{background:var(--forest)}.sw.on::after{left:23px}
.sw.off{opacity:.45}
.select{display:flex;justify-content:space-between;align-items:center;min-height:var(--tap);border:1.5px solid var(--ink);border-radius:var(--r);padding:0 12px;font-weight:600}
.ffoot{position:sticky;bottom:0;background:var(--paper);display:grid;grid-template-columns:auto 1fr;gap:10px;padding:12px 0 16px;border-top:1px solid var(--line)}
.ffoot .btn.clear{padding:0 18px;background:var(--paper);border-color:var(--line);color:var(--ink)}
.ffoot .btn.go{background:var(--ink);color:#fff}

/* hornbill */
.hb-hero{background:var(--ink);color:#fff;padding:24px 16px 22px;position:relative;overflow:hidden}
.hb-hero .kicker{color:#F0B9C2}
.hb-hero h1{font-size:40px;margin:8px 0 6px}
.hb-hero .dates{font:600 22px/1.2 var(--display);color:#fff}
.hb-hero p{color:#D2D9D4;margin:10px 0 0;font-size:15px}
.hb-hero .bar{position:absolute;left:0;right:0;bottom:0;height:6px;--hb-stripe:#F0B9C2;background:linear-gradient(90deg,var(--hb-stripe) 0 30%,#15201B 30% 34%,var(--hb-stripe) 34% 64%,#15201B 64% 68%,var(--hb-stripe) 68%)}
.days{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin-top:16px}
.days span{background:rgba(255,255,255,.1);border-radius:5px;text-align:center;padding:6px 0 5px;font:700 14px/1 var(--sans)}
.days span small{display:block;font-size:9px;font-weight:600;opacity:.7;margin-top:3px;letter-spacing:.04em}
.ring{display:grid;gap:10px}
.ring a.zone{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;min-height:64px;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r);text-decoration:none}
.zone .km{font:600 20px/1 var(--display);min-width:58px}
.zone .km small{display:block;font:600 11px var(--sans);color:var(--ink-3);margin-top:3px}
.zone b{display:block;font-size:16px}
.zone span{font-size:13px;color:var(--ink-2)}
.zone .c{font-weight:800;font-size:15px;color:var(--forest)}
.seeall{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.mini{display:grid;gap:8px;margin-top:10px}
.mini .card{padding:10px}
.mini .card .row{grid-template-columns:64px 1fr}
.mini .thumb,.mini .np{width:64px;height:64px}
.mini .np .v{padding:7px 6px 0}
.mini .np .d{display:none}
.mini h3{font-size:17px}

/* home, above the footer: "Explore Nagaland by district" (plain home only), 2 columns on phones, 3 from 700px, 4 from 1000px */
.dband{background:var(--paper);border-top:1px solid var(--line);padding:26px 16px 30px}
.dband-in{max-width:1200px;margin:0 auto}
.dband h2{font-size:20px;margin-bottom:10px}
.dband ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.dband li a{display:block;min-height:44px;padding:10px 0;text-decoration:none;color:var(--ink)}
.dband li b{display:block;font-size:14.5px;font-weight:600}
.dband li span{display:block;font-size:13px;color:var(--ink-3)}
.dband li a:hover b{text-decoration:underline;text-underline-offset:3px}
.dband p{margin:12px 0 0}.dband p a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--rhodo);text-decoration:underline;text-underline-offset:3px}
@media (min-width:700px){.dband ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* map pills (live-map.css shows them once the live map is up) */
.tolist,.tomap{display:none}

/* desktop */
@media (min-width:1000px){
  :root{--hdr:65px} /* sticky header height (44px logo tile + 2 x 10px padding + 1px rule) */
  html{scroll-padding-top:var(--hdr)} /* anchors and focus never land under the sticky header */
  body{background:var(--ground)}
  .desk{display:grid;grid-template-columns:660px minmax(0,1fr)} /* the page scrolls as a page: no fixed height, no inner scroll pane */
  .desk>*{min-width:0}
  .desk .left{overflow:visible;border-right:1px solid var(--line);margin:0}
  /* the map (and the filter column) stay pinned under the header while the cards scroll; the footer follows the grid, so they un-stick at its end */
  .desk .right{position:sticky;top:var(--hdr);align-self:start;height:calc(100vh - var(--hdr));height:calc(100dvh - var(--hdr));display:block!important;background:#E9EDE4;overflow:hidden}
  .desk .right .mapbox{height:100%;display:flex;align-items:center;justify-content:center}
  .desk .right .mapbox .mapinner{position:relative;height:100%;aspect-ratio:400/428}
  .desk .right .mapinner>img{height:100%;width:auto}
  .seg{display:none}
  .list{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 16px 24px}
  .card .row{grid-template-columns:72px minmax(0,1fr)} .card .thumb,.card .np,.card .tw{width:72px;height:72px}
}
.right{display:none}

/* ---- batch 2 (10 Oct 2026): search, district, attraction, list your place, report ---- */
.search input{flex:1;min-width:0;height:100%;border:0;background:none;font:16px var(--sans);color:var(--ink);outline:0;padding:0}
.search input::placeholder{color:var(--ink-3)}
.search input::-webkit-search-cancel-button{display:none}
.search:focus-within{box-shadow:0 0 0 3px var(--rhodo-tint)}
.search .x{flex:none;display:grid;place-items:center;width:40px;height:40px;margin-right:-8px;text-decoration:none;color:var(--ink-2);font-size:17px}
.chip .x{font-size:13px;font-weight:800}
.lbl{font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0;padding:16px 16px 0}
.hit{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:var(--tap);background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:10px 12px;margin:10px 12px 0;text-decoration:none}
.hit.lite{border:1px solid var(--line)}
.hit .np{width:64px;height:64px}
.hit small{display:block;font:700 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--rhodo);margin-bottom:4px}
.hit b{display:block;font:600 20px/1.12 var(--display)}
.hit .s{display:block;font-size:14px;color:var(--ink-2);margin-top:3px}
.hit .go{font-size:26px;color:var(--ink-2)}
.matchnote{margin:0;padding:2px 16px 0;font-size:13px;color:var(--ink-3)}
.more{padding:0 12px 4px}
.empty{background:var(--paper);padding:20px 16px;border-bottom:1px solid var(--line)}
.empty h1{font-size:28px;margin:6px 0 8px}
.empty p{margin:0 0 14px}
.do{display:grid;gap:10px}.do .hint{margin:-2px 0 4px;font-size:13px;color:var(--ink-3)}
.ph{color:var(--ink-3);font-style:italic}
.tips{margin:0;padding-left:20px}.tips li{margin:6px 0}
.dist{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:800;color:var(--rhodo);margin-bottom:2px}
/* district */
.dhero{border-radius:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:end;padding:20px 16px 16px;background-size:240px 180px}
.dhero .kicker{color:rgba(255,255,255,.8)}
.dhero h1{font-size:44px;hyphens:manual;overflow-wrap:anywhere;margin:4px 0 6px;letter-spacing:-.02em}
.dhero .dsub{font-size:16px;font-weight:600}
.dmap{margin:0;background:#fff;border-radius:12px;padding:5px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.dmap img{width:104px;height:auto}
.tcount{grid-column:1/-1;font-size:14px;color:rgba(255,255,255,.88);margin-top:8px;border-top:1px solid rgba(255,255,255,.25);padding-top:10px}
.tcount b{color:#fff}
.dseal{display:none}
@media (max-width:359.98px){.dhero h1{font-size:38px}} /* Chümoukedima broke into three lines ("Chümo / u- / kedima") at 320; 38px keeps every district name to two */
.dhero h1 .sh{user-select:none;-webkit-user-select:none} /* the soft hyphen is a break point and a drawn hyphen only: copying the name gives the plain word */
@media (max-width:339.98px){.dhero.t-chumoukedima h1{font-size:34px}} /* "Chümou-" (the syllable break) needs 170px at 38px; the H1 column is 160px at 320, so only Chümoukedima steps down further below 340 */
.hbband{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:64px;padding:10px 16px;background:var(--rhodo-tint);color:var(--rhodo);text-decoration:none;border-bottom:1px solid #EBC9CF;font-size:22px}
.hbband b{display:block;font-size:16px}.hbband span span{display:block;font-size:14px;color:var(--ink-2)}
.atts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.att{display:flex;flex-direction:column;gap:2px;min-height:var(--tap);padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r);text-decoration:none}
.att b{font-size:15px;line-height:1.25}.att span{font-size:13px;color:var(--ink-2)}
.att .c{margin-top:auto;padding-top:4px;color:var(--forest);font-weight:800;font-size:14px}
.fbar{position:sticky;top:0;z-index:4;background:var(--paper);padding:14px 16px 10px;border-bottom:1px solid var(--line);margin-top:8px;border-top:1px solid var(--line)}
.fbar h2{font-size:21px}
/* attraction */
.hero.wide{aspect-ratio:16/9}
.credit span{min-width:0}
.lede{margin:8px 0 12px;font-size:17px}
.facts dd{font-weight:600}
/* forms (list your place, report) */
.lhero h1{font-size:32px;margin:6px 0 4px}
.steps{list-style:none;counter-reset:s;margin:14px 0 0;padding:0;display:grid;gap:10px}
.steps li{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:start;counter-increment:s}
.steps li::before{content:counter(s);width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}
.form{display:grid;gap:20px}
fieldset{border:0;margin:0;padding:0;min-width:0}
.field>label,.field legend{display:block;font-weight:700;font-size:16px;margin-bottom:6px;padding:0}
.field .hint{font-size:14px;color:var(--ink-2);margin:-2px 0 8px}
.opt{font-weight:500;color:var(--ink-3);font-size:14px}
.field input[type=text],.field input[type=tel],.field input[type=url],.field input[type=email],.field select,.field textarea{display:block;width:100%;min-height:52px;border:2px solid var(--ink);border-radius:var(--r);padding:0 12px;font:16px var(--sans);color:var(--ink);background:var(--paper)}
.field select{appearance:none;-webkit-appearance:none;padding-right:32px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2315201B' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;font-weight:600}
.field textarea{min-height:88px;padding:10px 12px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--rhodo-tint);outline-offset:1px}
.field label.sub{font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:4px;display:block}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.radios{display:flex;flex-wrap:wrap;gap:8px}
.radios label{position:relative}
.radios input{position:absolute;opacity:0;inset:0}
.radios span{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 16px;border:1.5px solid var(--line);border-radius:999px;font-weight:600;background:var(--paper)}
.radios input:checked+span{background:var(--forest-tint);border-color:var(--forest);color:var(--forest);font-weight:800}
.radios input:focus-visible+span{outline:3px solid var(--rhodo);outline-offset:1px}
label.inline{display:flex;align-items:center;gap:10px;min-height:var(--tap);font-size:15px;font-weight:600;margin-top:4px}
label.inline input,.check input,.ropts input{width:24px;height:24px;margin:0;flex:none;accent-color:var(--forest)}
.check{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;padding:14px;border:2px solid var(--line);border-radius:var(--r);background:var(--ground)}
.check small{display:block;font-size:14px;color:var(--ink-2);margin-top:4px}
.btn.dark{background:var(--ink);color:#fff;width:100%;font-family:inherit;cursor:pointer}
button.btn{font-family:inherit;cursor:pointer}
/* report sheet */
.rsheet .about{margin:-2px 0 6px;font-size:14px;color:var(--ink-2)}
.ropts{border-top:1px solid var(--line);margin-bottom:14px}
.ropts label{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;min-height:56px;padding:15px 4px;border-bottom:1px solid var(--line);font-size:16px}
.ropts label b{font-weight:700}
.ropts small{display:block;font-size:14px;color:var(--ink-2);margin-top:3px}
.ropts small b{color:var(--forest)}
.ropts label:has(input:checked){background:var(--ground)}
.book-url{display:none}
form:has(input[name=reach][value=booking-site]:checked) .book-url{display:block}
.rsheet .field{margin-bottom:14px}
.tbc{font-size:14px;color:var(--ink-2);background:var(--paper);border:1.5px dashed var(--rhodo);border-radius:8px;padding:8px 10px;display:block}
.tbc .b-ex{margin-right:4px}.note .tbc{margin-top:8px}
.btn svg{flex:none}
.b-ex{white-space:nowrap;display:inline-block}
.route+.route{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.route h3{font-size:19px;margin:0 0 4px}.route h3 span{font:600 14px var(--sans);color:var(--ink-3)}
.route>p{margin:0 0 10px;font-size:15px;color:var(--ink-2)}
.route .tbc{margin:10px 0 0}
.btn.book{grid-column:1/-1;background:var(--ink);color:#fff}
.cstates{display:grid;gap:14px}.cstates .contact{margin-top:6px}.cstates .src{margin-top:6px}
.scope{border-top:1px solid var(--line);margin:0}
.scope label{padding:12px 4px;min-height:52px}

/* ---- new-owner flow + entry points (11 Oct 2026) ---- */
[hidden]{display:none!important}
.btn.own{background:var(--rhodo);color:#fff}
/* footer: Vikedo's photo of the view from Viswema (HANDOFF › Footer, approved 13 Oct 2026; no credit by his decision) */
footer.site{--sky:#2B3A4C;position:relative;isolation:isolate;background:#616A74;color:#FFFFFF;font-size:14px;text-align:center;margin-top:0}
footer.site::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(43,58,76,0.600) 0.0%,rgba(43,58,76,0.593) 1.9%,rgba(43,58,76,0.574) 3.8%,rgba(43,58,76,0.545) 5.6%,rgba(43,58,76,0.506) 7.5%,rgba(43,58,76,0.461) 9.4%,rgba(43,58,76,0.410) 11.2%,rgba(43,58,76,0.356) 13.1%,rgba(43,58,76,0.300) 15.0%,rgba(43,58,76,0.244) 16.9%,rgba(43,58,76,0.190) 18.8%,rgba(43,58,76,0.139) 20.6%,rgba(43,58,76,0.094) 22.5%,rgba(43,58,76,0.055) 24.4%,rgba(43,58,76,0.026) 26.2%,rgba(43,58,76,0.007) 28.1%,rgba(43,58,76,0.000) 30.0%,rgba(43,58,76,0) 100%)}
footer.site{overflow:hidden}
footer.site a,footer.site p{text-shadow:0 1px 2px rgba(14,20,28,.8),0 0 10px rgba(14,20,28,.6)}
.f-in{position:relative}.f-in::before{content:"";position:absolute;inset:-40px -24px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse closest-side at 50% 50%,rgba(22,30,40,.62),rgba(22,30,40,.45) 55%,rgba(22,30,40,.18) 80%,rgba(22,30,40,0))}
@media(min-width:1000px){.f-in::before{inset:-70px -60px;background:radial-gradient(ellipse 18% 44% at 19% 50%,rgba(22,30,40,.55),rgba(22,30,40,.42) 30%,rgba(22,30,40,.22) 60%,rgba(22,30,40,.07) 82%,rgba(22,30,40,0) 100%),radial-gradient(ellipse 12% 46% at 46% 50%,rgba(22,30,40,.55),rgba(22,30,40,.42) 30%,rgba(22,30,40,.22) 60%,rgba(22,30,40,.07) 82%,rgba(22,30,40,0) 100%),radial-gradient(ellipse 19% 44% at 77% 50%,rgba(22,30,40,.55),rgba(22,30,40,.42) 30%,rgba(22,30,40,.22) 60%,rgba(22,30,40,.07) 82%,rgba(22,30,40,0) 100%)}}
.f-in{display:grid;gap:12px;padding:28px 16px 8px;max-width:1120px;margin:0 auto}
/* phones: 36px more room under the last line than the prototype (8px), so the bright cloud edge starts below it: the prototype's 8px measured 2.5:1 there at 360–430px (deviation, see PR) */
@media(max-width:999px){.f-in{padding-bottom:44px}}
.f-brand img{display:block;margin:0 auto;height:40px;width:auto;filter:drop-shadow(0 1px 2px rgba(14,20,28,.6))} /* all-white lockup (Vikedo, 14 Oct): the shadow matches the footer text-shadow */.f-brand p{margin:8px 0 0}
footer.site nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px}
footer.site nav a,footer.site a{color:#fff}footer.site nav a{min-height:44px;display:inline-flex;align-items:center;font-weight:600}
/* official channels: white glyphs (currentColor), ~20px, 44px hit targets; icon-only */
footer.site .f-social{margin-top:8px;gap:4px 8px}
footer.site .f-social a{min-width:44px;min-height:44px;justify-content:center;padding:0 6px;text-decoration:none}
footer.site .f-social svg{width:20px;height:20px;flex:none}
@media(min-width:1000px){footer.site .f-brand .f-social{justify-content:flex-start}}
footer.site p{margin:0}footer.site .b-ex{color:var(--ink)}
/* Upper part cropped (Vikedo, 13 Oct): the band is shorter than the photo and the photo sits on its bottom edge,
   so the sky above the hills is cut. The fade is 150px (was 70px) to keep the brighter cloud line off the text (AA ≥ 4.68:1). */
.f-ridge{position:relative;z-index:-2;overflow:hidden;margin-top:-70px;height:290px;-webkit-mask-image:linear-gradient(transparent,#000 150px);mask-image:linear-gradient(transparent,#000 150px)}
.f-ridge img{display:block;position:absolute;left:0;bottom:0;width:100%;height:360px;object-fit:cover;object-position:62% 100%}
@media(min-width:1000px){.f-ridge{height:auto;aspect-ratio:1600/480}.f-ridge img{position:static;height:100%;object-position:50% 100%}}
@media(min-width:1000px){.f-in{grid-template-columns:1.4fr 1fr 1.2fr;grid-auto-flow:row dense;text-align:left;column-gap:48px;row-gap:10px;padding:48px 32px 12px;align-content:start}.f-in>*{grid-column:3}.f-in>.f-brand{grid-column:1;grid-row:1/span 4}.f-brand img{margin:0;height:40px}.f-in>nav{grid-column:2;grid-row:1/span 4;flex-direction:column;justify-content:flex-start;align-items:flex-start}.f-in>.btn.own{justify-self:start;padding:0 18px}}
.sec.own p{margin:0 0 12px}
.owncard{margin:8px 12px 24px;padding:16px;background:var(--rhodo-tint);border:1px solid #EBC9CF;border-radius:14px;display:grid;gap:10px}
.owncard h2{font-size:22px}.owncard p{margin:0}
.lnk{min-height:var(--tap);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--rhodo);text-decoration:none}
.prog .kicker{margin:0}
.prog ol{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.prog li{border-top:5px solid var(--line);padding-top:6px;font-size:13px;line-height:1.25;font-weight:600;color:var(--ink-3)}
.prog li.done{border-color:var(--forest);color:var(--ink-2)}
.prog li.on{border-color:var(--rhodo);color:var(--ink);font-weight:800}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.youq{margin:0;font-size:15px;color:var(--ink-2)}.youq b{color:var(--ink)}
.h1s{font-size:27px;margin:0}
.mlist>li,.lhero .mcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px}
.lhero .mcard{margin-top:12px;background:var(--ground)}
.mcard :is(h2,h3){font-size:20px}.mcard .where{font-size:15px;color:var(--ink-2);margin-top:2px}
.mcard .num{font-size:14px;color:var(--ink-2);margin-top:4px}.mcard .num b{color:var(--ink);font-family:ui-monospace,Menlo,monospace}
.mcard .badges{margin-top:8px}
.why{margin:8px 0 0;font-size:13px;font-weight:700;color:var(--rhodo)}
.two{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}.two .btn.ghost{padding:0 20px}
.notlisted p{margin:0 0 12px}
.sn{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;margin-right:8px;vertical-align:1px}
.cks{display:flex;flex-wrap:wrap;gap:8px}
.cks label{position:relative}
.cks input{position:absolute;opacity:0;inset:0}
.cks span{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 14px;border:1.5px solid var(--line);border-radius:999px;font-weight:600;background:var(--paper)}
.cks span::before{content:"+";margin-right:6px;font-weight:800;color:var(--ink-3)}
.cks input:checked+span{background:var(--forest-tint);border-color:var(--forest);color:var(--forest);font-weight:800}
.cks input:checked+span::before{content:"✓";color:var(--forest)}
.cks input:focus-visible+span{outline:3px solid var(--rhodo);outline-offset:1px}
.field input.file{display:block;width:100%;padding:12px;border:2px dashed #A9B3A3;border-radius:var(--r);background:var(--ground);font:15px var(--sans);color:var(--ink-2)}
.field input.file::file-selector-button{font:700 15px var(--sans);min-height:44px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);padding:0 14px;margin-right:10px}
.rights{margin-top:10px}
.btn.geo{width:100%;margin-bottom:14px;font-family:inherit;cursor:pointer}
.sec.alt{display:grid;gap:10px}.sec.alt h2{margin:0}
.or{display:flex;align-items:center;gap:12px;margin:0;padding:14px 16px;color:var(--ink-3);font-size:14px;font-weight:700}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.thanks{text-align:center}
.tick{width:56px;height:56px;border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center;margin:4px auto 10px}.tick svg{width:28px;height:28px}
.thanks h1{font-size:30px}.thanks .where{color:var(--ink-2);margin-top:4px}
.ref{margin:16px auto 0;border:2px dashed var(--ink);border-radius:14px;padding:12px;display:grid;gap:2px;max-width:320px}
.ref span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ref b{font:700 28px/1.15 ui-monospace,Menlo,monospace}
.ref small{font-size:14px;color:var(--ink-2)}
.wabox{background:#EFEAE2}
.wahead{font-size:13px;color:var(--ink-2);margin-bottom:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bubble{background:#D9FDD3;border-radius:12px 2px 12px 12px;padding:10px 12px;font-size:15px;line-height:1.5;margin:0 0 14px 20px;box-shadow:0 1px 1px rgba(0,0,0,.12);color:#111B21}
.field .hint b,.mcard .num b{white-space:nowrap}
/* owner photo upload (11 Oct 2026) */
.prules{margin:0 0 12px;padding:10px 12px 10px 30px;background:var(--ground);border-radius:var(--r);font-size:15px}.prules li{margin:3px 0}
.slots{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.slot{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;border:1px solid var(--line);border-radius:var(--r);padding:10px;background:var(--paper)}
.pthumb{width:76px;height:76px;border-radius:10px;border:2px dashed #A9B3A3;background:var(--ground) center/cover no-repeat;display:grid;place-items:center;align-content:center;color:var(--ink-3);position:relative;font-weight:800;font-size:13px}
.pthumb.has{border:0}.pthumb.has svg,.pthumb.has>span:not(:only-child){display:none}
.pthumb.has[data-w]:not([data-w=""])::after{content:attr(data-w);position:absolute;inset:auto 0 0;background:var(--rhodo);color:#fff;font-size:11px;text-align:center;border-radius:0 0 10px 10px;padding:2px}
.sbody{display:grid;gap:4px;min-width:0}.sbody label.sub{margin:0}
.field .sbody input.file{padding:8px;font-size:14px}.field .sbody input.file::file-selector-button{min-height:40px;padding:0 10px}
.field .sbody input[type=text]{min-height:48px}
.cover{display:flex;align-items:center;gap:8px;min-height:40px;font-size:15px;font-weight:600}.cover input{width:22px;height:22px;margin:0;accent-color:var(--forest)}
.moreph{margin-top:10px}.moreph summary{min-height:var(--tap);display:flex;align-items:center;font-weight:700;color:var(--rhodo);cursor:pointer}
.moreph .slots{margin-top:6px}
.consent{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;margin-top:14px;padding:12px;border:2px solid var(--ink);border-radius:var(--r);font-size:15px}.consent input{width:24px;height:24px;margin:0;accent-color:var(--forest)}
.fallback{margin:12px 0 0;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.addph p{margin:0 0 12px}
.field>label.consent{padding:12px;display:grid;grid-template-columns:24px minmax(0,1fr);box-sizing:border-box;width:100%;font-weight:400;font-size:15px;margin-bottom:0}

/* ---- build additions (sentinel, Oct 2026; Phase 1 Worker) ---- */
.btn.call.solo{grid-column:1/-1} /* landline: Call only, no WhatsApp */
.ast{font-weight:800;margin-left:1px}
.nvn{margin:6px 0 0;font-size:13px;line-height:1.35;color:var(--ink-2)}
.dock .nvn{text-align:center;margin-top:6px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px 0}
.pager .pv{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 14px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper);font-weight:700;text-decoration:none;color:var(--ink)}
.pager span.pv{color:var(--ink-3);background:var(--ground)}
.pager .pn{font-size:14px;color:var(--ink-2)}
.nvn.lnote{margin:0;padding:2px 16px 0;color:var(--ink-2)} /* list-level unverified-number note (davinci 11 Oct) */
/* chunk 2: real form controls in the filter sheet */
.fgroup legend{display:flex;justify-content:space-between;width:100%;padding:0;margin:0 0 10px;font-weight:800;font-size:16px}
.fgroup legend span+span{font-weight:500;font-size:14px;color:var(--ink-2)}
fieldset.fgroup{border:0;margin:0;min-width:0}
.cks span .n{display:inline;min-height:0;padding:0;border:0;border-radius:0;background:none;color:var(--ink-3);font-weight:500;margin-left:4px}.cks span .n::before{content:none}.cks input:checked+span .n{color:var(--forest)}
.toggle{position:relative}
.toggle .swi{position:absolute;right:0;width:52px;height:32px;margin:0;opacity:0}
.toggle .swi:checked+.sw{background:var(--forest)}.toggle .swi:checked+.sw::after{left:23px}
.toggle .swi:focus-visible+.sw{outline:3px solid var(--rhodo);outline-offset:2px}
.toggle .swi:disabled+.sw{opacity:.45}
button.lnk{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;cursor:pointer;min-height:24px}
.matchnote{color:var(--ink-2)} /* darker grey for small notes on ground (davinci 11 Oct) */
/* chunk 2: form errors */
.errs{border:2px solid var(--rhodo);background:#fff;padding:12px 14px;border-radius:12px;margin:0 0 4px}
.errs h2{font-size:17px;margin:0 0 6px}.errs ul{margin:0;padding-left:18px}.errs a{color:var(--rhodo);font-weight:700}
.err{color:var(--rhodo);font-weight:700;font-size:14px;margin:4px 0 0}
.field [aria-invalid="true"]{border-color:var(--rhodo)}
/* chunk 2: map dots get a 24px hit area (WCAG 2.5.8); close dots merge into one numbered pin */
.pin.dot{min-width:24px;height:24px;padding:0;background:transparent;border:0;box-shadow:none}
.pin.dot::after{content:"";width:12px;height:12px;box-sizing:border-box;border-radius:50%;background:var(--rhodo);border:1.5px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.pin.dot.sel{outline:0;background:transparent}.pin.dot.sel::after{background:var(--ink);outline:3px solid var(--rhodo)}
.pin.dot.multi{background:var(--rhodo);border:1.5px solid #fff;font-size:11px;box-shadow:0 1px 3px rgba(0,0,0,.35)}.pin.dot.multi::after{display:none}
.pin.dot.multi.sel{background:var(--ink);outline:3px solid var(--rhodo)}
.chip.on .n{color:var(--forest)}
.subh{font:600 19px/1.2 var(--display);margin:18px 0 4px}

/* prose pages (privacy, Getting to Kisama) */
.prose h1{font-size:28px;margin:0 0 10px}.prose h2{margin:0 0 8px}.prose h3{font-size:19px;margin:20px 0 6px}.prose p{margin:0 0 10px}.prose ul{margin:0 0 10px;padding-left:20px}.prose li{margin:4px 0}.prose ul ul{margin:4px 0 0}.prose .b-ex{margin-left:4px;white-space:normal;max-width:100%;line-height:1.3} /* long review notes must wrap (privacy overflowed ~700px at 390) */
.priv h2{margin-top:22px}
.abt h2{margin-top:22px}.abt li .badge{margin-right:2px;vertical-align:-1px}.abt li{margin:8px 0}
.abt-n{margin:20px 0 0;padding:12px 0 0;border-top:1px solid var(--line);color:var(--ink-2);font-size:15px} /* /about live counts (D1) */

/* ===== desktop layout (davinci 12 Oct 2026, from the hotelist.com study). Nothing here applies below 1000px. ===== */
/* desktop-only parts are in the HTML on every width and hidden on phones */
.hsearch,.mark.dk,.side,.fside,.tsel,.fdd{display:none}

/* keyboard focus: one clear ring, same as the radios/checkboxes */
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid var(--rhodo);outline-offset:2px}

@media (min-width:1000px){
  /* (a) full-width page (Airbnb-style, 15 Oct 2026; was capped at 1280px): sticky header; place and district pages keep a centred 1200px body, so the header lines up with it */
  .top{position:sticky;top:0;z-index:30;padding-inline:clamp(24px,3vw,80px)}
  body:has(>main.wrap.place) .top,body:has(>main.wrap.district) .top{padding-inline:max(clamp(24px,3vw,80px),calc(50% - 584px))}
  .top .back{min-height:44px} /* 44px like the logo tile: the header is 65px on every page (it was 69px beside the 48px phone tap target) */
  .scrim{z-index:40}.fsheet{z-index:41} /* dialogs and their scrim sit above the sticky header */
  .desk,.mapview{max-width:none;margin:0}
  /* (b) search centred on the sticky header (its own centre, so the logo and List / Hornbill don't pull it). ~520px. In-page search goes. */
  .mark.dk{display:flex}
  .hsearch{display:flex;align-items:center;gap:8px;position:absolute;left:50%;top:10px;z-index:1;transform:translateX(-50%);flex:0 1 520px;width:520px;max-width:520px;height:44px;border:1.5px solid var(--ink);border-radius:999px;padding:0 12px;color:var(--rhodo);background:var(--paper)}
  .hsearch input{flex:1;min-width:0;height:100%;border:0;background:none;font:16px var(--sans);color:var(--ink);outline:0;padding:0}
  .hsearch input::placeholder{color:var(--ink-3)}
  .hsearch:focus-within{box-shadow:0 0 0 3px var(--rhodo-tint)}
  .top .back{margin-left:8px;font-size:15px;color:var(--ink-2)}
  .controls .search{display:none}
  .controls{padding-top:12px}
  .controls .chips{margin-top:-10px}

  /* single-column pages keep 720px; footer content follows the column */
  .desk .wrap{max-width:none}

  /* (7) one row of "Near …" chips; Type is a native select in the bar */
  .chips{flex-wrap:nowrap}
  .fbar .chips{flex-wrap:wrap}
  .desk{grid-template-columns:minmax(0,1fr) clamp(380px,40%,1000px)}
  .controls .chip{padding:0 10px;font-size:14px;min-height:36px;gap:4px}
  .controls .chip .n{font-size:13px}
  .desk .right .mapbox .mapinner{height:auto;width:min(100%,calc((100vh - var(--hdr) - 24px) * 400 / 428));aspect-ratio:auto}
  .desk .list.grid{grid-template-columns:repeat(4,minmax(0,1fr))} /* home: 4 places per row on desktop (Vikedo, 21 Oct) */
  .desk .list.grid{gap:20px 12px;padding:16px 12px 28px}
  .desk .list.grid .gc :is(h3,h4){margin-top:8px;font-size:14px;line-height:18px}.desk .list.grid :is(.gw,.gp){font-size:14px;line-height:18px} /* Airbnb's card scale (15/19 on ~300px cards), 14/18 for our ~180–210px cards */
  /* Filters: a button in the list header opens the form as a panel over the cards (native <details>, no script); the list keeps the full width */
  .desk .controls .chip.f{display:none}
  .desk .meta{position:relative}
  .fdd{display:block;margin-left:auto}.fdd+.tsel{margin-left:0}
  .fdd>summary{list-style:none;cursor:pointer;min-height:36px;font-size:14px}.fdd>summary::-webkit-details-marker{display:none}
  .fdd[open]>summary{background:var(--ink);color:#fff}
  .fdd[open]>.fside{display:block;position:absolute;z-index:25;left:12px;top:calc(100% + 6px);width:min(380px,calc(100% - 24px));max-height:calc(100vh - 340px);max-height:calc(100dvh - 340px);min-height:240px;box-sizing:border-box;overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:14px 16px 0;color:var(--ink);text-align:left}
  .fside h2{font-size:22px;margin:0 0 4px}
  .fside .cks{display:flex;flex-wrap:wrap;gap:6px}
  .fside .ffoot{grid-template-columns:auto 1fr}
  .fbar{top:var(--hdr)}
  .desk .right .mapinner>img{height:auto;width:100%}
  .fside .cks>label>span{font-size:14px;min-height:36px;padding:0 10px}
  .desk .chips>a:last-child:not(.f):not([href*="near="]){display:none} /* the "Homestays" type chip */
  .meta{gap:12px;flex-wrap:wrap}
  .dband{padding:40px clamp(24px,3vw,80px) 44px}.dband h2{font-size:23px;margin-bottom:14px}.dband ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px}
  .tsel{display:flex;align-items:center;gap:6px;margin-left:auto}
  .tsel label{font-weight:700;color:var(--ink)}
  .tsel select{height:36px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);font:14px var(--sans);padding:0 8px;color:var(--ink)}
  .tsel .btn{min-height:36px;padding:0 12px;font-size:14px;border-radius:10px;cursor:pointer;font-family:inherit}

  /* (c) browse cards: photo-led, 2 columns */
  .desk .card .row{grid-template-columns:120px minmax(0,1fr)}
  .desk .card .thumb,.desk .card .np,.desk .card .tw{width:120px;height:120px}
  .card .price{display:block}
  .card .price span{display:block;margin-top:2px}

  /* (5) /map and /map/plains: list + map split like browse */
  /* the page scrolls; the map is pinned under the header and always has a definite size (Leaflet needs one). The live-map selector is
     html.live main.mapview: live-map.css loads later and sets its own columns. */
  .mapview,html.live main.mapview{display:grid;grid-template-columns:minmax(420px,38%) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:auto;min-height:calc(100vh - var(--hdr));min-height:calc(100dvh - var(--hdr))}
  .mapview>.controls{grid-column:1;grid-row:1;border-right:1px solid var(--line)}
  .mapview>.sheet{grid-column:1;grid-row:2;overflow:visible;margin:0;border-radius:0;box-shadow:none;border-right:1px solid var(--line)}
  .mapview>.sheet .grab{display:none}
  .mapview>.sheet h2{position:sticky;top:var(--hdr);z-index:3;background:var(--paper);padding:10px 4px 6px} /* the list heading stays under the header while the cards scroll */
  .mapview>.mapbox{grid-column:2;grid-row:1/3;position:sticky;top:var(--hdr);align-self:start;height:calc(100vh - var(--hdr));height:calc(100dvh - var(--hdr));display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
  .mapview .mapinner{width:min(100%,calc((100vh - var(--hdr) - 32px) * var(--ar)));max-width:none;margin:0}
  /* (6) the map frame hugs the map, so the credit sits inside it */
  main.wrap:not(.mapview) .mapbox{width:fit-content;margin:0 auto}
  .mapview .mapbox>.mapattr{position:static}
  .mapview .mapbox{flex-direction:column}
  .mapview .mapbox .mapinner .mapattr,.mapview .mapbox .zoomout{z-index:2}

  /* (4) place page: two columns, sticky summary card replaces the dock (1) */
  .wrap.place{max-width:1200px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0 28px;align-items:start;padding:20px 16px 0;box-sizing:border-box}
  .place .pl{min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .place .pl>.sec:last-child{border-bottom:0}
  .dock{display:none}
  .side{display:block;position:sticky;top:calc(var(--hdr) + 16px);background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 16px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
  .side .sname{font:600 22px/1.15 var(--display);margin:0}
  .side .bigprice{margin-top:8px}
  .side .num{font-size:13px;color:var(--ink-2);margin-top:14px}
  .side .num b{color:var(--ink);font-family:ui-monospace,Menlo,monospace}
  .side .contact{grid-template-columns:1fr;margin-top:8px}
  /* (8) hero and the no-photo tile at 5:3 */
  .place .hero{aspect-ratio:5/3}
  .place .np.big{height:auto;aspect-ratio:5/3}

  /* (4) district page: two columns, 1200px body */
  .wrap.district{max-width:1200px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0 24px;align-items:start;padding:20px 16px 0;box-sizing:border-box}
  .district>.dhero,.district>.hbband{grid-column:1/-1;border-radius:14px}
  .district>.hbband{margin-top:10px}
  .dhero{grid-template-columns:auto minmax(0,1fr) auto;column-gap:20px}
  .dhero .dseal{display:block;width:128px;height:128px;align-self:center}
  .district>.dside{grid-column:2;grid-row:3;position:sticky;top:calc(var(--hdr) + 16px);margin-top:16px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .district>.dmain{grid-column:1;grid-row:3;min-width:0;margin-top:16px}
  .district .dside .atts{grid-template-columns:1fr}
  .district .dmain .fbar{margin-top:0;border-radius:14px 14px 0 0;border:1px solid var(--line)}
  .district .dmain .list:not(.grid){grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:0}
  .district .dmain .owncard{margin-inline:0}

  /* (3) filter + report sheets: centred dialogs */
  .fsheet{top:50%;bottom:auto;left:50%;right:auto;width:720px;max-height:86vh;transform:translate(-50%,-50%);border-radius:18px}
  .fsheet .grab{display:none}
  .fsheet.rsheet{width:560px}
}

@media (min-width:1000px) and (max-width:1279.98px){.controls .chip .n{display:none}}
/* (3) filters as a left column on browse from 1280px */
@media (min-width:1280px){
  .desk{grid-template-columns:minmax(0,1fr) clamp(420px,38%,1000px)}
}

/* (2) hover, only on devices that hover; every hover has a matching focus state */
@media (hover:hover) and (min-width:1000px){
  .card{transition:border-color .12s,box-shadow .12s}
  .card:hover,.card:focus-within{border-color:#B9C2B4;box-shadow:0 6px 18px rgba(0,0,0,.08)}
  .btn:hover,.btn:focus-visible{filter:brightness(.94)}
  .btn.call:hover,.btn.ghost:hover,.btn.call:focus-visible,.btn.ghost:focus-visible{background:var(--ground)}
  .chip:hover,.chip:focus-visible,.att:hover,.att:focus-visible{border-color:var(--ink)}
  /* pins are centred with transform:translate(-50%,-50%): a hover transform would replace it, jump the pin away from the
     cursor and flicker (Vikedo, 14 Oct). Hover is a ring + shadow only; the box never moves or resizes. */
  .pin:hover,.pin:focus-visible{box-shadow:0 0 0 3px var(--ink),0 2px 6px rgba(0,0,0,.35);z-index:3}
  .pin.dot:hover,.pin.dot:focus-visible{box-shadow:none}
  .pin.dot:hover::after,.pin.dot:focus-visible::after{box-shadow:0 0 0 3px var(--ink),0 1px 3px rgba(0,0,0,.35)}
  .pin.dot.multi:hover,.pin.dot.multi:focus-visible{box-shadow:0 0 0 3px var(--ink),0 2px 6px rgba(0,0,0,.35)}
  .links a:hover,.links a:focus-visible,.helpus a:hover,.helpus a:focus-visible,.card h3 a:hover,.card h3 a:focus-visible{text-decoration:underline}
  .pill:hover,.pill:focus-visible{background:var(--rhodo-tint)}
}
@media (hover:hover) and (min-width:1000px) and (prefers-reduced-motion:no-preference){
  .card:hover{transform:translateY(-1px)}
}
/* owner location (set-location + list step 3) */
#gl{width:100%;margin:2px 0 6px}#gl[hidden]{display:none}
#gls{margin:0 0 10px;font-size:14px}#gls:empty{display:none}
#gls.ok{color:var(--forest);font-weight:700}#gls.warn{background:var(--amber-tint);border-left:4px solid var(--amber);padding:8px 10px;color:var(--ink);font-weight:600}#gls.err{margin:0 0 10px}
.lmleg{display:none}
.pcl{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--ink);text-decoration:underline}
/* Results grid (Airbnb-style cards, 14 Oct): 2 columns on phones, 3–4 from 600px; whole card is one link; no box */
.list.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;padding:12px 12px 24px}
.list.grid.mini,.sec .list.grid{padding:0}
@media (min-width:600px){.list.grid{grid-template-columns:repeat(auto-fill,minmax(max(160px,calc((100% - 48px) / 4)),1fr));gap:24px 16px;padding:16px 16px 28px}} /* 3–4 columns; 160px minimum: beside a sidebar (a ~500px column) that is 3 columns, not 4 truncated ones (14 Oct, card polish) */
.gc{min-width:0;position:relative}
.gc>a{display:block;color:var(--ink);text-decoration:none;border-radius:14px;min-height:44px}
.gc>a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.gm{position:relative;display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--line)}
.gm img,.gnp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gnp{background:var(--t)}
.gnp::after{content:"";position:absolute;inset:28%;background:#fff;opacity:.2;-webkit-mask:url(/assets/mark-light.svg) center/contain no-repeat;mask:url(/assets/mark-light.svg) center/contain no-repeat}
.gpill{position:absolute;left:8px;top:8px;max-width:calc(100% - 16px);display:inline-flex;align-items:center;gap:4px;background:#fff;color:var(--ink);font:700 12px/1.2 var(--sans);padding:5px 9px;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.18);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gpill svg{flex:none;width:12px;height:12px;color:var(--amber)}.gpill.ok svg{color:var(--forest)}
.gs{position:absolute;right:8px;bottom:8px;background:var(--amber-tint);color:var(--amber);font:800 10px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;padding:4px 5px;border-radius:4px}
.gc :is(h3,h4){margin:8px 0 0;font:600 15px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gw,.gp{display:block;font-size:14px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gw{color:var(--ink-2)}.gp{color:var(--ink);font-weight:600;margin-top:2px}
.gc .dist{font-size:13px;color:var(--ink-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.gc>a:hover :is(h3,h4){text-decoration:underline}}
/* from 600px: names wrap to 2 lines, the type · town line and the price wrap too (no ellipsis on a name or a price); phones keep one line */
@media (min-width:600px){.gc :is(h3,h4),.gw,.gp{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}}
/* phones: a smaller badge pill so it covers less of the half-width photo (11px bold on white, ink 16:1) */
@media (max-width:599.98px){.gpill{left:6px;top:6px;max-width:calc(100% - 12px);gap:3px;font-size:11px;padding:3px 7px}.gpill svg{width:11px;height:11px}}

/* Place-page share button: hidden until its tiny handler is ready. */
.share{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 1px 5px rgba(0,0,0,.25);cursor:pointer}
html.share-ready .share{display:inline-flex}
.share svg{width:20px;height:20px;flex:none}
.share:focus-visible{outline:3px solid var(--forest);outline-offset:2px}
.titleline{display:flex;align-items:center;gap:12px}.titleline h1{min-width:0;flex:1}
.shareplace{flex:none;border:1px solid var(--line);box-shadow:none}
.share-status{position:fixed;z-index:5000;left:50%;bottom:80px;transform:translate(-50%,8px);padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;font:700 14px/1.3 var(--sans);box-shadow:0 4px 16px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.share-status.shown{opacity:1;transform:translate(-50%,0)}
/* Near: "Within 5 · 10 · 25 · 50 km" (plain links) and "~4 km away" on cards */
.within{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 0 0;font-size:14px;color:var(--ink-2)}
.within a{display:inline-block;padding:6px 10px;border:1px solid var(--line,#d5d5d0);border-radius:999px;color:var(--ink);text-decoration:none;min-height:32px;line-height:18px}
.within a.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.gd{color:var(--forest)}
/* Place gallery (no JS): phones a scroll-snap strip, desktop one large + four small, "Show all N photos" page */
.gal{position:relative;padding:12px 0 4px;background:var(--paper)}
.gstrip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;margin:0;padding:0 16px;scroll-padding:0 16px;scrollbar-width:none}
.gstrip::-webkit-scrollbar{display:none}
.gstrip li{flex:0 0 82%;scroll-snap-align:start}
.gstrip figure,.gall-list figure{margin:0}
.gstrip img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:#2a332e}
.gal figcaption,.gall-list figcaption{font-size:12px;color:var(--ink-2);padding:4px 2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gall{display:inline-block;margin:10px 16px 4px;font-weight:700;color:var(--ink);font-size:14px}
.gpage h1{font:600 26px/1.2 var(--display);margin:18px 0 4px}.gpage h1 span{font:400 15px var(--sans);color:var(--ink-2)}
.gall-list{list-style:none;margin:12px 0;padding:0;display:grid;gap:18px}
.gall-list img{display:block;width:100%;height:auto;border-radius:12px;background:#2a332e;aspect-ratio:4/3;object-fit:cover}
@media (min-width:1000px){
  .gal{padding:0;border-radius:14px;overflow:hidden}
  .gstrip{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;padding:0;overflow:visible;aspect-ratio:2/1}
  .gstrip li{min-width:0;min-height:0;position:relative}
  .gstrip li:first-child{grid-row:1/3}
  .gstrip li:nth-child(n+6){display:none}
  .gstrip.g2{grid-template-columns:1fr 1fr;grid-template-rows:1fr;aspect-ratio:2.2/1}.gstrip.g2 li:first-child{grid-row:auto}
  .gstrip figure{height:100%}
  .gstrip img{height:100%;aspect-ratio:auto;border-radius:0}
  .gstrip figcaption{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);color:#fff;background:rgba(0,0,0,.62);border-radius:5px;padding:2px 6px;font-size:11px}
  .gall{position:absolute;right:12px;bottom:12px;margin:0;background:#fff;border:1px solid var(--ink);border-radius:8px;padding:7px 12px;font-size:13px}
  .gpage{max-width:880px}
  .gall-list{grid-template-columns:1fr 1fr}
  .gall-list li:first-child{grid-column:1/-1}
}
.gstrip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* 1000–1279px: map pane keeps ≥420px, so 4 columns would be ~138px; use 3 */
@media (min-width:1000px) and (max-width:1279.98px){.desk .list.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}