@font-face{font-family:'Talpa House';src:url('/static/fonts/talpa-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Talpa House';src:url('/static/fonts/talpa-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Talpa House';src:url('/static/fonts/talpa-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Talpa House';src:url('/static/fonts/talpa-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Talpa House';src:url('/static/fonts/talpa-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ============================================================
   TALPA HOUSE — public site
   Warm paper, ink, one sage accent, one soft radius. IBM Plex Sans for
   everything people read; IBM Plex Mono only for labels and measured data.
   No JavaScript is required for anything on this stylesheet to work.
   ============================================================ */
:root{
  --paper:#F7F5F0;--paper-2:#F1EEE7;--card:#FFFFFF;
  --ink:#1F2621;--ink-soft:#5C6058;--ink-muted:#6A6E64;
  --sage:#62705E;--sage-deep:#4C574A;
  --line:#E3DFD5;--line-2:#C9C4B6;
  --earth:#16190F;--earth-2:#1E2318;--on-earth:#EDEAE0;--paper-dim:rgba(237,234,224,.68);--line-lit:rgba(237,234,224,.2);
  --max:1240px;--gutter:clamp(20px,4.5vw,64px);--r:6px;--r-lg:8px;--r-sm:4px;--hdr-h:76px;
  /* One face for the whole site, as the reference does it: the labels are the same
     letters as the headlines, only smaller and spaced. The old stacks stay behind it
     as a fallback for the seconds before the file arrives. */
  --mono:'Talpa House','IBM Plex Sans',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --sans:'Talpa House','IBM Plex Sans','Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
}
@media(max-width:760px){:root{--hdr-h:66px}}
/* Moving between pages.

   Every site loads as HTML — the references we are following included; what makes them
   feel like an application is what happens AFTER the load. This is that, without the
   application: the browser cross-fades one document into the next, and a photograph
   that exists on both pages flies from one to the other instead of being thrown away
   and fetched again. Nothing is downloaded for it and it degrades to a plain page load
   in a browser that does not know the feature. */
@view-transition{navigation:auto}
/* The motion, and its rules. One page leaving and the next arriving, never a show:

   - What is the same on both pages does not move at all. The header carries a name of
     its own, so it is lifted out of the page and stays exactly where it is while the
     content under it changes.
   - What exists on both pages in two places travels between them: a house's photograph
     from its row to its page (house-<slug>), the logo from the header to the calculator's
     corner (vt-brand), the "price your home" button into the price it asks for (vt-price).
     A name is given to one element per page at most, so a list can carry one per house
     and a filtered list slides its houses into their new places.
   - Everything else is the page itself: the old one steps back quickly, the new one rises
     a few pixels as it appears. Short, eased out, the same curve everywhere.

   Nothing runs for a visitor who asked their system for less motion, and a browser that
   does not know view transitions simply loads the page. */
.hdr{view-transition-name:vt-hdr}
.brand{view-transition-name:vt-brand}
.hdr .cta{view-transition-name:vt-price}
/* a row of tabs: the highlight glides to the tab just chosen */
::view-transition-old(root){animation:vt-leave .16s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-arrive .38s cubic-bezier(.2,.8,.2,1) .05s both}
@keyframes vt-leave{to{opacity:0}}
@keyframes vt-arrive{from{opacity:0;transform:translateY(10px)}}
::view-transition-group(*){animation-duration:.46s;animation-timing-function:cubic-bezier(.22,.8,.2,1)}
/* a travelling element cross-fades its two looks with no ghosting at the start */
::view-transition-old(*):not(:only-child){animation-duration:.2s}
::view-transition-new(*):not(:only-child){animation-duration:.34s}
/* the header only ever cross-fades its own contents, never moves */
::view-transition-group(vt-hdr){animation-duration:.2s}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* Sections arriving. The class is put on by the browser half and only on things still
   below the fold, so a page with no JavaScript — and everything already on screen —
   is simply there. */
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.8,.2,1),transform .7s cubic-bezier(.22,.8,.2,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:#E5E3D8;color:var(--ink)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:760px}
:focus-visible{outline:2px solid var(--sage);outline-offset:2px}

/* ---------- type ---------- */
.h1,h1{font-weight:400;font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.h2{font-weight:400;font-size:clamp(1.9rem,4vw,3.4rem);line-height:1.06;letter-spacing:-.02em;max-width:20ch;text-wrap:balance;margin-bottom:clamp(28px,4vw,48px)}
h3{font-weight:500;font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.2;letter-spacing:-.01em}
p{color:var(--ink-soft);max-width:65ch}
.lead{font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.5;max-width:46ch;color:var(--ink-soft)}
b,strong{font-weight:600;color:inherit}
.label{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap}
.num{font-family:var(--mono);font-weight:400;letter-spacing:-.01em}
.rulehead{display:flex;align-items:center;gap:20px;margin-bottom:clamp(30px,4vw,56px)}
.rulehead::after{content:"";flex:1;height:1px;background:var(--line)}
.dark .rulehead::after{background:var(--line-lit)}
.dark .label{color:#9AA894}
.pre{white-space:pre-line}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:15px;font-weight:500;padding:16px 26px;border:1px solid transparent;border-radius:var(--r);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .1s}
.btn:active{transform:scale(.985)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:#141914}
.dark .btn-solid{background:var(--paper);color:var(--ink)}
.dark .btn-solid:hover{background:#fff}
.textlink{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--sage);padding-bottom:2px;transition:color .2s,border-color .2s}
.textlink:hover{color:var(--sage-deep);border-color:var(--sage-deep)}
.dark .textlink{color:var(--on-earth);border-color:var(--sage)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;padding:9px 16px;border-radius:var(--r);border:1px solid var(--line);background:transparent;color:var(--ink);transition:border-color .2s,background .2s}
.chip:hover{border-color:var(--ink)}
.chip.is-active{border-color:var(--sage);background:#EEF1EB;color:var(--sage-deep)}

/* ---------- photos ---------- */
.ph{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--paper-2);box-shadow:inset 0 0 0 1px rgba(31,38,33,.05);object-fit:cover}
.ph.photo{box-shadow:inset 0 0 0 1px rgba(31,38,33,.06)}

/* ---------- header (floating, transparent container, glass chips on scroll) ---------- */
.hdr-sentinel{position:absolute;top:0;left:0;width:1px;height:24px;pointer-events:none}
.hdr{position:fixed;top:0;left:0;right:0;z-index:90;background:transparent;pointer-events:none}
.hdr a,.hdr summary,.hdr details,.hdr .navpill,.hdr .hdr-right{pointer-events:auto}
.hdr-in{position:relative;max-width:max(var(--max),min(1480px,100%));margin:0 auto;height:var(--hdr-h);padding:0 clamp(18px,4.5vw,56px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);padding:10px 15px;margin-left:-15px;border-radius:var(--r);border:1px solid transparent;transition:color .35s,background .35s,border-color .35s,box-shadow .35s}
.brand .mark{display:block}
.logo{display:block;height:auto}
.brand .logo{height:17px;width:auto}
.mnav-top .logo{height:15px;width:auto}
.wordmark{font-family:var(--mono);letter-spacing:.17em;font-size:12px;line-height:1;white-space:nowrap}
.navpill{position:relative;margin:0 auto;display:flex;min-width:0;align-items:center;gap:2px;padding:5px;border-radius:var(--r);background:rgba(247,245,240,.8);border:1px solid transparent;-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);box-shadow:0 8px 28px rgba(20,24,21,.07);transition:background .35s,border-color .35s,box-shadow .35s}
.navpill a{font-size:14.5px;color:var(--ink);padding:10px clamp(11px,1.1vw,18px);border-radius:var(--r-sm);white-space:nowrap;transition:background .22s,color .22s}
.navpill a:hover{background:rgba(31,38,33,.06);color:var(--ink)}
.hdr-right{display:flex;align-items:center;gap:8px;margin-left:0;flex:0 0 auto;color:var(--ink-soft);transition:color .35s}
.cta{font-size:14px;font-weight:500;white-space:nowrap;background:rgba(20,24,21,.88);color:var(--paper);padding:12px 22px;border-radius:var(--r);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 8px 26px rgba(20,24,21,.12);transition:background .25s,color .25s}
.cta:hover{background:#141914}
details.lang{position:relative}
details.lang summary{list-style:none;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;padding:10px 13px;border-radius:var(--r);cursor:pointer;color:inherit;transition:background .35s,box-shadow .35s}
details.lang summary::-webkit-details-marker{display:none}
details.lang[open] summary svg{transform:rotate(180deg)}
details.lang summary svg{transition:transform .25s}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:184px;padding:6px;border-radius:var(--r);background:var(--paper);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(31,38,33,.09);box-shadow:0 18px 44px rgba(20,24,21,.16);z-index:20}
.lang-menu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);font-size:14px;color:var(--ink-soft)}
.lang-menu a:hover{background:rgba(31,38,33,.06)}
.lang-menu a .lang-code{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-muted);min-width:20px}
.lang-menu a.is-active{color:var(--ink);font-weight:500}
.lang-menu a.is-active .lang-code{color:var(--sage)}
/* overlay state: over the home hero */
html:not(.hdr-solid) body.has-overlay .brand{color:var(--on-earth)}
html:not(.hdr-solid) body.has-overlay .hdr-right{color:var(--on-earth)}
html:not(.hdr-solid) body.has-overlay .navpill{background:rgba(255,255,255,.14);border-color:transparent;box-shadow:none}
html:not(.hdr-solid) body.has-overlay .navpill a{color:rgba(255,255,255,.9)}
html:not(.hdr-solid) body.has-overlay .navpill a:hover{background:rgba(255,255,255,.16);color:#fff}
html:not(.hdr-solid) body.has-overlay .cta{background:rgba(20,24,21,.82);color:#fff}
html:not(.hdr-solid) body.has-overlay .mnav summary span{background:var(--on-earth)}
/* scrolled: chips crystallise */
html.hdr-solid .brand,html.hdr-solid details.lang summary,html.hdr-solid .hdr-login,html.hdr-solid .mnav>summary{background:rgba(247,245,240,.8);color:var(--ink);-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);box-shadow:0 8px 28px rgba(20,24,21,.07)}
body:not(.has-overlay) .hdr+main,body:not(.has-overlay) main{padding-top:var(--hdr-h)}
body.has-overlay main{padding-top:0}
/* mobile menu (native details, no JS needed) */
.mnav{display:none}
.mnav>summary{list-style:none;width:40px;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;border-radius:var(--r);cursor:pointer;padding:0 8px}
.mnav>summary::-webkit-details-marker{display:none}
.mnav>summary span{display:block;width:20px;height:1.5px;background:currentColor;border-radius:2px;transition:width .25s}
.mnav>summary span:nth-child(2){width:13px}
.mnav-sheet{position:fixed;inset:0;z-index:120;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;padding:16px 22px 30px;overflow:auto}
.mnav-top{display:flex;align-items:center;justify-content:space-between;height:44px}
.mnav-links{display:flex;flex-direction:column;margin-top:26px}
.mnav-links a{font-weight:300;font-size:30px;letter-spacing:-.01em;padding:13px 0;border-bottom:1px solid var(--line)}
.hdr-login{display:inline-flex;align-items:center;height:46px;padding:0 16px;border-radius:var(--r);font-size:14px;font-weight:500;white-space:nowrap;color:inherit;text-decoration:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 32%,transparent);transition:background .35s,box-shadow .3s,color .35s}
.hdr-login:hover{box-shadow:inset 0 0 0 1px currentColor}
@media(max-width:900px){.hdr-login{display:none}}
.mnav-login{text-align:center;padding:16px;border-radius:var(--r);font-size:15px;font-weight:500;margin-top:10px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.mnav-cta{text-align:center;background:var(--ink);color:var(--paper);padding:17px;border-radius:var(--r);font-size:15px;font-weight:500;margin-top:28px}
.mnav-langs{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:28px}
.mnav-langs a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;padding:9px 13px;border:1px solid var(--line);border-radius:999px}
.mnav-langs a.is-active{border-color:var(--sage);color:var(--sage-deep);background:#EEF1EB}
.mnav-contact{font-family:var(--mono);font-size:13px;color:var(--ink-soft);margin-top:14px}
/* The pill sits between the name and the actions, never over them. When the window is
   too narrow for every item, the pages the admin put in the menu go first (they are all
   in the menu button, which appears alongside); below 900 px the pill goes entirely. */
.brand{flex:0 0 auto}
/* narrower windows: the same items, set closer, before anything is dropped */
@media(max-width:1360px){.navpill a{padding-left:clamp(8px,.8vw,12px);padding-right:clamp(8px,.8vw,12px);font-size:14px}}
@media(max-width:1180px){.navpill a{padding-left:7px;padding-right:7px;font-size:13.5px}}
/* and in any language whose words do not fit (the header measures itself) */
/* when the words of a language do not fit: first closer together, only then fewer */
html.nav-snug .navpill a{padding-left:7px;padding-right:7px;font-size:13.5px}
html.nav-measure .nav-dd-m{display:none}
html.nav-tight .navpill .nav-dd{display:none}html.nav-tight .mnav{display:block}
/* the menu, open: its button becomes the close, above the sheet, at any width */
.mnav[open]>summary{position:fixed;top:13px;right:14px;z-index:130;background:var(--paper-2)!important;box-shadow:none!important}
.mnav[open]>summary span:nth-child(1){transform:translateY(6.5px) rotate(45deg);width:20px}
.mnav[open]>summary span:nth-child(2){opacity:0}
.mnav[open]>summary span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mnav[open]>summary span{background:var(--ink)!important}
/* every block in the bar is one height: the name, the menu, the language, the button */
.brand,.navpill,details.lang summary,.hdr .cta,.mnav>summary{height:46px}
.brand{padding-top:0;padding-bottom:0}
.navpill{padding:4px}
.navpill a{display:inline-flex;align-items:center;height:36px;padding-top:0;padding-bottom:0}
details.lang summary{padding-top:0;padding-bottom:0;min-width:46px;justify-content:center}
.hdr .cta{display:inline-flex;align-items:center;padding-top:0;padding-bottom:0}
.mnav>summary{width:46px;padding:0 13px}
@media(max-width:900px){.navpill{display:none}}
@media(max-width:760px){
  .hdr-in{padding:0 14px;gap:10px}
  .brand{gap:9px;padding:8px 12px;margin-left:-10px}
  .brand .logo{height:15px}
  .wordmark{font-size:10.5px;letter-spacing:.14em}
  .cta{font-size:12.5px;padding:10px 14px}
  .brand,.hdr .cta,.mnav>summary{height:40px}
  .brand{padding-top:0;padding-bottom:0}
  .hdr .cta{padding-top:0;padding-bottom:0}
  .mnav>summary{width:40px;padding:0 10px}
  details.lang{display:none}
  .mnav{display:block}
}
@media(max-width:360px){.cta{display:none}}

/* ---------- sections ---------- */
.section{padding:clamp(88px,11vw,160px) 0;position:relative}
.panel{background:var(--paper-2)}
.dark{background:var(--earth);color:var(--on-earth);border-top:1px solid var(--line-lit)}
.dark p{color:var(--paper-dim)}
.dark .lead,.dark h3{color:var(--on-earth)}
.dark .h2{color:var(--on-earth)}
.more{margin-top:clamp(28px,4vw,48px)}

/* ---------- home ---------- */
.hero{position:relative;min-height:94svh;display:flex;align-items:flex-end;color:var(--on-earth);background:var(--earth)}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg .ph{position:absolute;inset:0;width:100%;height:100%;border-radius:0;box-shadow:none;animation:heroin 1200ms cubic-bezier(.16,1,.3,1) both}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(192deg,rgba(22,25,15,.02) 34%,rgba(22,25,15,.66) 100%)}
@keyframes heroin{from{transform:scale(1.03)}to{transform:scale(1)}}
.hero-grade{position:absolute;left:0;right:0;top:58%;height:1px;background:var(--line-lit);z-index:2}
.hero-grade span{position:absolute;right:var(--gutter);top:-19px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(237,234,224,.66)}
.hero-inner{position:relative;z-index:3;width:100%;padding-bottom:clamp(48px,7vh,88px);padding-top:clamp(80px,10vh,120px)}
.hero-eyebrow{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(237,234,224,.8);margin-bottom:20px;white-space:nowrap}
.hero h1{font-size:clamp(2.3rem,4.9vw,4.4rem);line-height:1.05;max-width:30ch;margin-bottom:24px;color:var(--on-earth)}
.hero-sub{max-width:46ch;color:var(--paper-dim);font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.5;margin-bottom:30px}
.hero-ctas{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.hero .textlink{color:var(--on-earth);border-color:var(--sage)}
.trust{padding:clamp(40px,6vw,72px) 0;border-bottom:1px solid var(--line)}
.trust-cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px}
.cell .num{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;letter-spacing:-.02em}
.cell-l{font-size:13px;color:var(--ink-muted);margin-top:8px;line-height:1.4}
.trust-note{font-size:13.5px;color:var(--ink-muted);margin-top:28px;max-width:80ch}
.q-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,36px)}
.q-card h3{margin:18px 0 8px}
.q-card p{font-size:15.5px}
.leak-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,72px);align-items:start}
.leak .lead{margin-bottom:22px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;margin-top:clamp(40px,6vw,72px);padding-top:32px;border-top:1px solid var(--line-lit)}
.stat .num{font-size:clamp(1.9rem,3.2vw,2.8rem);line-height:1}
.stat-l{font-size:13px;margin-top:8px;color:var(--paper-dim)}
.stat.big{margin:28px 0}
.stat.big .num{font-size:clamp(2.4rem,4vw,3.4rem)}
.invest .stat-l,.invest .stat .num{color:var(--ink-soft)}
.invest .stat .num{color:var(--ink)}
.sys-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:start;margin-top:36px}
.sys-list{list-style:none;display:flex;flex-direction:column}
.sys-list li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:22px 0;border-top:1px solid var(--line)}
.sys-list li:last-child{border-bottom:1px solid var(--line)}
.sys-n{color:var(--sage);font-size:12px;padding-top:6px}
.sys-list p{font-size:15.5px;margin-top:6px}
.sys-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sys-photos .ph:last-child{margin-top:48px}
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line-lit);border:1px solid var(--line-lit);border-radius:var(--r);overflow:hidden}
.proof-cell{background:var(--earth);padding:28px 24px}
.proof-cell .num{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1}
.proof-cell .cell-l{color:var(--paper-dim)}
.owners{margin-top:clamp(36px,5vw,64px);font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.4;max-width:34ch;font-weight:300;color:var(--on-earth);border-left:2px solid var(--sage);padding-left:22px}
.founder-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:start}
.quote{margin-top:28px;padding:24px 28px;background:var(--card);border-radius:var(--r);border:1px solid var(--line)}
.quote p{font-size:1.15rem;line-height:1.5;color:var(--ink)}
.quote cite{display:block;margin-top:12px;font-style:normal;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.invest-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.examples{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.examples th,.examples td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.examples thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);font-weight:500}
.examples tbody th{font-weight:500}
.ex-spec{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-muted);font-weight:400;margin-top:4px}
.creds{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-muted)}
.creds li::before{content:"·";color:var(--sage);margin-right:8px}
.examples tr:last-child td,.examples tr:last-child th{border-bottom:0}
.where-p{max-width:60ch;font-size:clamp(1.15rem,1.7vw,1.5rem)}
.where-p p{font-size:inherit;line-height:1.5;color:var(--ink)}
.faq-list{display:flex;flex-direction:column;max-width:820px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-weight:500;font-size:1.05rem;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:4px;top:16px;font-family:var(--mono);font-size:22px;color:var(--sage);transition:transform .25s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .prose{padding:0 0 24px;max-width:66ch}
.final .h2{max-width:24ch}
.final .lead{margin-bottom:28px}
.final p .textlink{margin-left:22px}

/* ---------- cards / listings ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,32px)}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 1px 2px rgba(31,38,33,.04);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(31,38,33,.09)}
.card .ph{border-radius:0;box-shadow:none}
.card-b{padding:18px 20px 22px}
.card-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:8px}
.card h3{font-size:1.1rem}
.card p{font-size:14px;margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.listing .cards,.filters{margin-bottom:clamp(60px,8vw,110px)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.page-head{padding:clamp(40px,6vw,80px) var(--gutter) clamp(28px,4vw,48px)}
.page-head .label{margin-bottom:18px;display:block}
.page-head .lead{margin-top:18px}
.page-cover,.post-cover,.project-cover{margin-bottom:clamp(36px,5vw,64px)}
.page .prose,.post .prose{padding-bottom:clamp(60px,8vw,110px)}
.post-foot{padding:0 var(--gutter) clamp(60px,8vw,110px)}
.post-head{padding-top:clamp(28px,4vw,48px)}
.post-meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-muted);margin-top:16px}
.post-meta .sep{color:var(--line-2)}
.post-body>p:first-of-type{font-weight:500;color:var(--ink);font-size:1.08em}
.related{padding-bottom:clamp(60px,8vw,110px)}
/* project page: the name and one line, the house wide underneath, then the figures */
.project-hero-head{padding-top:clamp(28px,5vw,64px);text-align:center;display:grid;justify-items:center;gap:14px}
.project-title{font-size:clamp(2.6rem,7vw,8.5rem);font-weight:300;letter-spacing:-.035em;line-height:.98;max-width:14ch}
.project-sub{font-weight:400;font-size:18px;line-height:24px;color:rgba(0,0,0,.4);max-width:46ch;text-wrap:balance}
.project-hero-head .project-place{margin-top:2px}
/* the house itself, as wide as the window allows: a thin gutter, and the same
   gutter on a 2560 screen as on a laptop — a hero that stops at a text measure reads
   as an illustration of the page rather than as the building */
.project-stage{margin:clamp(24px,3.4vw,44px) auto clamp(36px,5vw,72px);max-width:none;width:100%;padding:0 clamp(12px,1.4vw,28px)}
.project-stage .ph{border-radius:var(--r-lg)}

/* project page: hero beside the specification list, then alternating story rows */
.post-backline{padding-top:clamp(24px,4vw,40px)}
.project-head{padding-top:clamp(20px,3vw,32px)}
.project-top{display:grid;grid-template-columns:45fr 55fr;gap:clamp(28px,5vw,72px);align-items:start;margin-bottom:clamp(56px,8vw,110px)}
.specs-h{font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.02em;margin:6px 0 22px}
.project-place{margin-top:14px;display:block}
.project-desc{margin-top:26px}
.project-desc p{font-size:1rem}
.project-plan{margin-top:26px}
.project-plan .ph{object-fit:contain;background:var(--card)}
.story{display:flex;flex-direction:column;gap:clamp(48px,7vw,104px);margin-bottom:clamp(56px,8vw,110px)}
.srow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.srow.img-first .srow-img{order:-1}
.srow-text.prose p{font-size:1.05rem}
.project-film{margin-bottom:clamp(40px,6vw,72px)}
.project-film video{width:100%;height:auto;border-radius:var(--r);background:#000;display:block}
.closing{max-width:46ch;margin:0 0 clamp(56px,8vw,110px);padding-left:24px;border-left:2px solid var(--sage)}
.closing p{font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.4;font-weight:300;color:var(--ink);max-width:none}
.project-more{padding-bottom:clamp(48px,6vw,80px)}
.gallery-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(80vw,420px),1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.gallery-strip .ph{scroll-snap-align:start}
.project-grid{display:grid;grid-template-columns:280px 1fr;gap:clamp(28px,5vw,72px);align-items:start;padding-bottom:clamp(48px,6vw,80px)}
.specs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.specs>div{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.specs dd{color:var(--ink);line-height:1.45}
.specs dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.gallery{padding-bottom:clamp(48px,6vw,80px)}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,3vw,36px);margin-bottom:clamp(60px,8vw,110px)}
.person{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.person-photo{border-radius:999px;aspect-ratio:1/1}
.person-role{font-size:14.5px;margin-top:4px;color:var(--ink)}
.person-meta{font-size:13px;color:var(--ink-muted);margin-top:4px}
.person-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.company{padding-bottom:clamp(60px,8vw,110px)}
.company-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:760px}
.company p{font-size:15px}
.notfound{padding:clamp(80px,14vw,160px) var(--gutter)}
.notfound .lead{margin:18px 0 28px}

/* ---------- prose ---------- */
.prose{overflow-wrap:break-word}
.prose h2{font-weight:400;font-size:26px;line-height:1.25;letter-spacing:-.015em;color:var(--ink);margin:40px 0 14px}
.prose h3{font-weight:500;font-size:19px;line-height:1.3;color:var(--ink);margin:32px 0 10px}
.prose p{margin:0 0 16px;max-width:none}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;color:var(--ink-soft)}
.prose li{margin-bottom:8px}
.prose a{color:var(--ink);border-bottom:1px solid var(--sage)}
.prose blockquote{margin:24px 0;padding:4px 0 4px 22px;border-left:2px solid var(--sage);color:var(--ink);font-size:1.1rem}
.prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.prose .fig{margin:28px 0}
.prose .fig img{width:100%;height:auto;border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(31,38,33,.06)}
.prose figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-muted);margin-top:8px}
.prose .fig-float,.prose .vid-float{float:right;width:min(46%,320px);margin:6px 0 18px 28px}
.prose .fig-left,.prose .vid-left{float:left;margin:6px 28px 18px 0}
.prose .vid{margin:28px 0;clear:both}
.prose .vid video{width:100%;border-radius:var(--r);background:var(--paper-2);box-shadow:inset 0 0 0 1px rgba(31,38,33,.06)}
.prose .yt{margin:28px 0;clear:both}
.yt-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prose::after{content:"";display:table;clear:both}
.prose-dark,.prose-dark p,.prose-dark li{color:var(--paper-dim)}
.prose-dark h2,.prose-dark h3,.prose-dark a,.prose-dark blockquote{color:var(--on-earth)}

/* ---------- footer ---------- */
.ftr{background:var(--earth);color:var(--on-earth);border-top:1px solid var(--sage);padding:clamp(56px,7vw,96px) 0 36px}
.ftr-in{display:flex;flex-direction:column;gap:clamp(36px,5vw,64px)}
.ftr-brand .mark,.ftr-brand .logo{color:var(--on-earth)}
.ftr-brand .logo{height:22px;width:auto}
.ftr-tagline{color:var(--paper-dim);margin-top:16px;max-width:40ch}
.ftr-contact{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;font-family:var(--mono);font-size:13.5px}
.ftr-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.ftr-cols>div{display:flex;flex-direction:column;gap:9px}
.ftr-cols a{font-size:14.5px;color:var(--paper-dim);transition:color .2s}
.ftr-cols a:hover{color:#fff}
.ftr-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#9AA894;margin-bottom:6px}
.ftr-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#9AA894;border-top:1px solid var(--line-lit);padding-top:22px}

/* ---------- consent ---------- */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:100;max-width:520px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:0 18px 44px rgba(20,24,21,.16)}
.consent p{font-size:14px;line-height:1.5;margin-bottom:14px;max-width:none}
.consent p a{color:var(--ink);border-bottom:1px solid var(--sage)}
.consent-b{display:flex;gap:8px;flex-wrap:wrap}
.consent .btn{padding:11px 18px;font-size:14px}
.btn-ghost{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .q-grid,.cards{grid-template-columns:repeat(2,1fr)}
  .leak-grid,.sys-grid,.founder-grid,.invest-grid,.project-grid,.project-top,.srow{grid-template-columns:1fr}
  .srow.img-first .srow-img{order:0}
  .srow .srow-img{order:-1}
  .ftr-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  body{font-size:16px}
  .hero-eyebrow{white-space:normal;max-width:32ch}
  .q-grid,.cards,.gallery-grid,.company-grid{grid-template-columns:1fr}
  .sys-photos .ph:last-child{margin-top:0}
  .person{grid-template-columns:88px 1fr}
  .prose .fig-float,.prose .vid-float,.prose .fig-left,.prose .vid-left{float:none;width:100%;margin:24px 0}
  .final p .textlink{display:inline-block;margin:16px 0 0}
  .ftr-cols{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .hero-bg .ph{animation:none}
  *{transition:none!important}
}

/* the house list: one sentence and the two figures people compare first */
.card-lead{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--ink-soft,#4E534B);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-facts{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted,#6A6E64)}
.card-facts span{display:inline-flex;align-items:baseline;gap:5px}
.card-facts b{font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink,#1F2621)}

/* ---------- the houses (views.tsx → ProjectListView) ----------
   A practice showing its work: the title, then one line per house — the building large
   on the left, a room beside it, and the name, the place and one sentence under it.
   The type is the brand's: one face, light weight, the second line of the heading grey
   rather than smaller, as the reference has it. */
/* The list of houses runs the width of the window, as the reference does it: a house is
   a building, and a building wants the room. Everything else on the site keeps the
   1240px measure, because prose does not. */
.houses .wrap{max-width:none;padding-left:clamp(18px,2.6vw,44px);padding-right:clamp(18px,2.6vw,44px)}
.houses-head{padding:clamp(48px,7vw,104px) clamp(18px,2.6vw,44px) clamp(24px,3vw,40px)}
.houses-h{display:grid;gap:.06em;font-weight:300;font-size:clamp(2.4rem,6.4vw,7rem);letter-spacing:-.035em;line-height:1;max-width:22ch}
.houses-h span{color:var(--ink-muted);font-size:.62em;max-width:26ch;letter-spacing:-.025em;line-height:1.04}
.houses-filters{display:flex;justify-content:center;margin-bottom:clamp(26px,4vw,52px)}
.seg{display:inline-flex;gap:2px;padding:4px;border-radius:var(--r);background:rgba(247,245,240,.55);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);border:1px solid var(--line);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg-b{padding:10px 20px;border-radius:var(--r-sm);font-size:14.5px;font-weight:500;color:var(--ink-soft);white-space:nowrap;transition:background .2s,color .2s}
.seg-b:hover{color:var(--ink)}
.seg-b.is-on{background:var(--ink);color:var(--paper)}
.houses-rows{display:grid;gap:clamp(56px,8vw,120px);padding-bottom:clamp(72px,10vw,140px)}
.hrow{display:grid;grid-template-columns:64fr 36fr;gap:clamp(18px,2.4vw,38px);align-items:start}
.hrow-main,.hrow-in{display:block;overflow:clip;border-radius:var(--r-lg)}
.hrow-main .ph,.hrow-in .ph{border-radius:0}

/* Photographs drift as you scroll.

   Each one is tied to its own passage through the window, so a picture moves at its own
   pace and never in step with the words beside it or the picture above it — which is
   the whole difference between a page that feels alive and a page that slides. The
   movement is about thirty pixels over a full screen of scrolling: enough to notice
   only by its absence.

   It is done by the browser's own scroll timeline, so nothing is downloaded, nothing
   runs on the main thread, and a browser that does not know the feature simply shows a
   still photograph. The image is scaled a few per cent first, or the drift would show
   the frame's edge. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .hrow-main .ph,.hrow-in .ph,.hb-pt-f img,.hb-two-a img,.hb-two-b img,.hb-photo img,.hb-open-p img{
      animation:drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%;
      will-change:transform}
    /* the smaller photograph in a pair travels a little further, so the two never lock */
    .hrow-in .ph,.hb-two-b img{animation-name:drift-more}
  }
}
@keyframes drift{from{transform:scale(calc(1.06*var(--zoom))) translateY(2.2%)}to{transform:scale(calc(1.06*var(--zoom))) translateY(-2.2%)}}
@keyframes drift-more{from{transform:scale(calc(1.08*var(--zoom))) translateY(3.4%)}to{transform:scale(calc(1.08*var(--zoom))) translateY(-3.4%)}}
.hrow-t{padding-top:clamp(18px,2.2vw,30px)}
.hrow-h{font-weight:400;font-size:clamp(1.45rem,2.3vw,2rem);letter-spacing:-.02em;line-height:1.1}
.hrow-place{font-size:clamp(1.02rem,1.6vw,1.35rem);line-height:1.25;letter-spacing:-.01em;color:var(--ink-muted);margin-top:3px}
.hrow-sum{font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin-top:14px;max-width:52ch;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.hrow .card-facts{margin-top:12px}
.hrow-go{margin-top:20px;padding:13px 24px;font-size:14.5px}
@media(max-width:900px){
  .hrow{grid-template-columns:1fr;gap:14px}
  .hrow-t{padding-top:6px}
  .hrow-sum{max-width:56ch}
}
@media(max-width:640px){.hrow-in{display:none}.houses-filters{justify-content:flex-start}}
/* four words have to fit a phone before the strip starts sliding */
@media(max-width:420px){.seg-b{padding:10px 14px;font-size:14px}}

/* ---------- what sets a house apart (views.tsx → Features) ----------
   One idea per card: the icon, the claim, the sentence under it. Quiet grey cards
   rather than lines, so a row reads as a set of qualities and not as a list of
   features; centred, because each card is read on its own. */
.feat{margin-top:clamp(56px,7vw,96px)}
.feat-cards{list-style:none;margin:0 0 clamp(12px,1.4vw,20px);padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,20px)}
@media (max-width:1080px){.feat-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.feat-cards{grid-template-columns:1fr}}
/* everything past the four cards reads as a list, two columns of hairlines, the way the
   figures do — a fifth card standing alone is the one thing that makes this look unfinished */
.feat-rows{list-style:none;margin:clamp(18px,2.2vw,30px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,4vw,64px)}
.feat-rows li{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.feat-rows li b{font-family:var(--mono);font-size:12.5px;font-weight:400;letter-spacing:.04em;color:var(--ink-muted);min-width:5ch}
.feat-rows li span{font-size:15px;color:var(--ink)}
@media (max-width:620px){.feat-rows{grid-template-columns:1fr}}
.feat-v{display:block;margin-top:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--ink)}
.feat-card{display:grid;justify-items:start;align-content:start;gap:8px;text-align:left;
  background:var(--paper-2,#F4F3EF);border-radius:var(--r-lg);padding:clamp(26px,3vw,38px) clamp(20px,2.4vw,30px)}
.feat-card h3{margin:0;font-size:clamp(18px,1.6vw,21px);font-weight:400;letter-spacing:-.014em;line-height:1.25;text-wrap:balance;max-width:20ch}
.feat-card p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-muted,#6A6E64);text-wrap:pretty;max-width:34ch}
@media (max-width:640px){.feat-card{padding:24px 20px}}


/* ---------- houses to see next (views.tsx → Recommendations) ----------
   Large cards on a strip that runs the width of the window. The badge and the corner
   note are facts, not decoration: one says what can be done with the house today, the
   other says the picture is a visualisation and not a finished building. */
.recs{padding:clamp(56px,8vw,120px) 0 clamp(64px,9vw,130px)}
.recs-h{font-weight:300;font-size:clamp(1.9rem,4.4vw,3.6rem);letter-spacing:-.035em;line-height:1.04;
  max-width:20ch;margin-bottom:clamp(26px,3.4vw,52px)}
.recs-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(46vw,720px),1fr);
  gap:clamp(14px,1.6vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;
  /* the first card starts on the same line as the heading above it, and snaps back there */
  --edge:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding:0 var(--edge) 6px;scroll-padding-inline:var(--edge);scrollbar-width:none}
.recs-rail::-webkit-scrollbar{display:none}
.rec{scroll-snap-align:start;min-width:0}
.rec-img{position:relative;display:block;overflow:clip;border-radius:var(--r-lg);background:var(--paper-2)}
.rec-img .ph{border-radius:0}
/* the badge reads as a note, not as a label: regular weight, a little larger, and the
   bead after the words rather than before them */
.rec-pill{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px 8px 15px;border-radius:999px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  font-size:13.5px;font-weight:400;letter-spacing:-.005em;color:var(--ink-soft);box-shadow:0 2px 10px rgba(20,24,21,.07)}
.rec-pill i{width:7px;height:7px;border-radius:999px;background:#6EE24B;flex:0 0 auto}
.rec-note{position:absolute;left:16px;bottom:13px;font-size:12px;color:rgba(255,255,255,.92);
  text-shadow:0 1px 3px rgba(20,24,21,.5);letter-spacing:.01em}
.rec-b{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px}
.rec-t{font-size:clamp(14.5px,1vw,15.5px);font-weight:400;color:var(--ink);line-height:1.3;letter-spacing:-.006em}
/* the living area follows the name in grey: the one figure worth knowing before the click */
.rec-a{margin-left:10px;color:var(--ink-muted)}
.rec-go{flex:0 0 auto;width:32px;height:32px;border-radius:999px;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;color:var(--ink-muted);transition:border-color .2s,color .2s,transform .3s cubic-bezier(.2,.8,.2,1)}
.rec-go svg{width:17px;height:17px}
.rec:hover .rec-go{border-color:var(--ink);color:var(--ink);transform:translate(2px,-2px)}
@media(max-width:760px){.recs-rail{grid-auto-columns:minmax(84vw,1fr)}}

/* The photograph lifts a little under the pointer.

   A custom property does the zoom rather than the transform itself, because these
   pictures already carry a scroll-driven animation on transform and an animation beats
   a hover rule every time. Registering the property is what makes it able to ease.
   Where scroll timelines are unsupported there is no animation to fight, so the plain
   transform does the same job. */
@property --zoom{syntax:'<number>';initial-value:1;inherits:false}
/* pictures that drift as you scroll: the zoom rides inside the animation's own scale */
.hrow-main .ph,.hrow-in .ph{--zoom:1;transition:--zoom .55s cubic-bezier(.2,.8,.2,1)}
.hrow:hover .hrow-main .ph,.hrow:hover .hrow-in .ph{--zoom:1.04}
@supports not (animation-timeline: view()){
  .hrow-main .ph,.hrow-in .ph{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
  .hrow:hover .hrow-main .ph,.hrow:hover .hrow-in .ph{transform:scale(1.04)}
}
/* a card in the strip has no scroll animation, so nothing is competing for transform */
.rec-img .ph{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.rec:hover .rec-img .ph,.rec:focus-within .rec-img .ph{transform:scale(1.05)}

/* Back to the houses.

   It was a centred, underlined link sitting in the middle of the measure, which made a
   small navigational aid look like a sentence somebody wrote. It belongs in the corner:
   quiet, close to the edge, the arrow doing the work. The arrow steps back under the
   pointer, which is the only movement it needs. */
.backlink{display:inline-flex;align-items:center;gap:7px;margin:clamp(14px,1.8vw,24px) 0 0 clamp(16px,2.2vw,34px);
  padding:8px 12px 8px 8px;border-radius:999px;font-size:13.5px;font-weight:500;letter-spacing:.005em;
  color:var(--ink-muted);transition:color .22s,background .22s}
.backlink svg{width:15px;height:15px;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.backlink:hover{color:var(--ink);background:var(--paper-2)}
.backlink:hover svg{transform:translateX(-3px)}
.backlink:focus-visible{outline:2px solid var(--sage);outline-offset:2px}

/* The price, as the reference sets it: a quiet chip, not a claim shouted in colour.
   Every one of these is computed from today's price list, so it can be read as current
   — which is exactly why the old stored figures no longer appear anywhere. */
.pricepill{display:inline-block;margin-top:clamp(12px,1.4vw,18px);padding:9px 16px;border-radius:var(--r);
  background:var(--paper-2);color:var(--ink-soft);font-size:14.5px;line-height:1.2;cursor:help}
.hrow-price{margin-top:12px;font-size:15px;color:var(--ink);font-weight:500;cursor:help}
.rec-tw{display:grid;gap:3px;min-width:0}
.rec-price{font-size:14px;color:var(--ink-muted)}

/* A hover window rather than the browser's own tooltip: dark glass over whatever it
   covers, so a note about the price can be read without leaving the price. It waits a
   beat before appearing, which is the difference between a note and a flicker. */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 10px);z-index:40;
  width:max-content;max-width:min(340px,72vw);padding:14px 16px;border-radius:var(--r-lg);
  background:rgba(26,30,27,.58);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 18px 46px rgba(12,16,13,.26),inset 0 0 0 1px rgba(255,255,255,.1);
  color:rgba(255,255,255,.95);font-family:var(--sans);font-size:14px;font-weight:400;line-height:1.42;letter-spacing:0;text-align:left;text-transform:none;white-space:normal;
  opacity:0;transform:translate(-50%,6px);pointer-events:none;
  transition:opacity .2s ease,transform .28s cubic-bezier(.2,.8,.2,1);transition-delay:0s}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0);transition-delay:.12s}
@media (prefers-reduced-motion:reduce){[data-tip]::after{transition:opacity .01s}}
@media (hover:none){[data-tip]::after{display:none}}
.pricepill-spec{justify-self:start;margin-top:clamp(18px,2.2vw,28px)}

/* the mark above a card's title: one weight, one size, one ink, so four of them read as
   a set and none of them competes with the sentence underneath */
.feat-i{width:24px;height:24px;color:var(--ink);opacity:.7;margin-bottom:4px}

/* Houses to see next, uncropped. Every photograph keeps its own proportions: the cards
   share one height and each is as wide as its picture, like a strip of contact prints.
   The name wraps to the width of its own photograph rather than running past it. */
.recs-rail{grid-auto-columns:max-content;align-items:start}
.rec{display:grid;grid-template-columns:min-content;max-width:92vw}
.rec-img .ph{height:clamp(240px,32vw,500px);width:auto;max-width:92vw;object-fit:contain}
@media(max-width:760px){.recs-rail{grid-auto-columns:max-content}.rec-img .ph{height:clamp(220px,58vw,300px)}}

/* the arrow follows the name and the area instead of waiting at the far edge of the
   photograph, and is small enough to read as part of the line */
.rec-b{justify-content:flex-start;gap:10px;margin-top:10px}
.rec-go{width:24px;height:24px;border-color:var(--line-2)}
.rec-go svg{width:12px;height:12px}
.rec:hover .rec-go{transform:translate(1px,-1px)}



/* ============================================================================
   Where we build (views.tsx → MapSection, pages/Map.tsx, static/map/map.js)

   A quiet light map, the houses on it as small framed photographs, and one card that
   describes whatever the pointer is on. MapLibre positions a marker by writing its
   transform, so nothing here ever transforms the marker element itself: the frame, the
   lift and the shadow all live on the element inside it.
   ============================================================================ */
.tmap-sec{padding-bottom:clamp(56px,8vw,110px)}
.tmap-head{text-align:center;display:grid;justify-items:center;gap:14px;margin-bottom:clamp(26px,4vw,48px)}
.tmap-h{font-weight:300;font-size:clamp(2.4rem,6vw,4.6rem);letter-spacing:-.03em;line-height:1.03;max-width:18ch}
.tmap-sub{color:var(--ink-muted);max-width:44ch;line-height:1.5;text-wrap:pretty}

.tmap{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--paper-2);aspect-ratio:2/1;
  box-shadow:0 30px 70px -50px rgba(20,24,21,.5);isolation:isolate}
/* maplibre's stylesheet loads after ours and sets .maplibregl-map{position:relative}: two classes beat its one */
.tmap .tmap-canvas{position:absolute;inset:0;width:100%;height:100%}
.tmap:not(.is-ready)::after{content:'';position:absolute;inset:0;background:
  linear-gradient(100deg,var(--paper-2) 30%,#EAE7DE 50%,var(--paper-2) 70%) 0 0/300% 100%;animation:tmap-wait 1.6s linear infinite}
@keyframes tmap-wait{to{background-position:-300% 0}}
@media (max-width:1100px){.tmap{aspect-ratio:3/2}}
@media (max-width:620px){.tmap{aspect-ratio:auto;height:min(132vw,620px)}}

/* ---- the pin: a photograph in a white frame, a green bead if it can be visited ---- */
.tmap-pin,.tmap-stack{display:block;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:var(--ink);-webkit-tap-highlight-color:transparent}
.tmap-pin-img,.tmap-stack-in{position:relative;display:block;border-radius:var(--r-lg);background:var(--card);
  box-shadow:0 10px 24px -12px rgba(20,24,21,.55),0 1px 4px rgba(20,24,21,.14);
  transition:transform .26s cubic-bezier(.22,.8,.2,1),box-shadow .26s}
.tmap-pin-img{width:48px;height:48px;border:3px solid var(--card);background:var(--paper-2) center/cover no-repeat;border-radius:var(--r-lg)}
.tmap-pin.is-open .tmap-pin-img::after,.tmap-stack-img.is-open::after,.tmap-c-thumb.is-open::after{content:'';position:absolute;right:-5px;bottom:-5px;
  width:12px;height:12px;border-radius:999px;background:#38C46B;box-shadow:0 0 0 2.5px var(--card)}
.tmap-pin.is-hot .tmap-pin-img,.tmap-pin:focus-visible .tmap-pin-img,
.tmap-stack.is-hot .tmap-stack-in,.tmap-stack:focus-visible .tmap-stack-in{transform:translateY(-3px);
  box-shadow:0 18px 34px -14px rgba(20,24,21,.6),0 2px 6px rgba(20,24,21,.16)}
.tmap-pin:focus-visible,.tmap-stack:focus-visible{outline:none}
.tmap-pin:focus-visible .tmap-pin-img,.tmap-stack:focus-visible .tmap-stack-in{outline:2px solid var(--sage);outline-offset:2px}

/* the house this page is about: a little larger, and named */
.tmap-pin.is-here .tmap-pin-img{width:58px;height:58px;box-shadow:0 0 0 .75px var(--ink),0 16px 30px -12px rgba(20,24,21,.6)}
.tmap-pin-here{position:absolute;left:50%;bottom:calc(100% + 11px);transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  padding:6px 11px;border-radius:var(--r);background:var(--ink);color:var(--paper);font-size:12.5px;font-weight:500;letter-spacing:.005em;line-height:1.2;
  box-shadow:0 10px 24px -10px rgba(20,24,21,.55)}
.tmap-pin-here::after{content:'';position:absolute;left:50%;top:100%;width:12px;height:6px;margin-left:-6px;background:var(--ink);clip-path:polygon(0 0,100% 0,50% 100%)}
/* while the card describes this house, its name is in the card */
.tmap-pin.is-here.is-hot .tmap-pin-here{opacity:0}

/* ---- a stack: houses too close to tell apart, overlapping, and how many ---- */
.tmap-stack-in{display:flex;align-items:center;padding:3px}
.tmap-stack-in::after{content:'';position:absolute;left:50%;top:100%;width:12px;height:6px;margin-left:-6px;background:var(--card);clip-path:polygon(0 0,100% 0,50% 100%)}
.tmap-stack-img{position:relative;display:block;width:42px;height:42px;border-radius:var(--r);background:var(--paper-2) center/cover no-repeat;box-shadow:0 0 0 3px var(--card)}
.tmap-stack-img + .tmap-stack-img{margin-left:-12px}
.tmap-stack-n{min-width:30px;padding:0 9px 0 10px;font-size:14px;font-weight:500;color:var(--ink);text-align:center;font-variant-numeric:tabular-nums}

/* ---- the card: one element, re-worded as the pointer moves ---- */
.tmap-layer{position:absolute;inset:0;z-index:6;pointer-events:none}
.tmap-card{position:absolute;top:0;left:0;width:280px;padding:6px;pointer-events:auto;
  background:var(--card);border-radius:var(--r-lg);
  box-shadow:0 26px 60px -28px rgba(20,24,21,.5),0 2px 10px rgba(20,24,21,.08),0 0 0 1px rgba(31,38,33,.04);
  opacity:0;visibility:hidden;transition:opacity .16s ease,visibility 0s linear .16s}
.tmap-card.is-in{opacity:1;visibility:visible;transition:opacity .16s ease}
.tmap-card.is-group{width:300px}
.tmap-card.is-house:has(.tmap-c-visit){width:336px}
.tmap-card.is-group:has(.tmap-c-idesc){width:340px}
/* the spout, kept pointing at the pin however far an edge has pushed the card */
.tmap-card::after{content:'';position:absolute;left:var(--sx,50%);top:100%;width:14px;height:7px;margin-left:-7px;background:var(--card);clip-path:polygon(0 0,100% 0,50% 100%)}
.tmap-card[data-side=below]::after{top:auto;bottom:100%;clip-path:polygon(50% 0,100% 100%,0 100%)}
.tmap-card[data-side=right]::after,.tmap-card[data-side=left]::after{top:var(--sy,50%);width:7px;height:14px;margin:-7px 0 0}
.tmap-card[data-side=right]::after{left:-7px;clip-path:polygon(100% 0,100% 100%,0 50%)}
.tmap-card[data-side=left]::after{left:100%;clip-path:polygon(0 0,100% 50%,0 100%)}
/* never taller than the map: a long list scrolls inside the card */
.tmap-card{display:flex;flex-direction:column;max-height:var(--maxh,none)}
.tmap-card > *{flex:0 0 auto}
.tmap-card .tmap-c-list{flex:1 1 auto;min-height:0}

.tmap-c-main{display:block;color:inherit;border-radius:var(--r)}
.tmap-c-main:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
.tmap-c-img{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--paper-2) center/cover no-repeat}
.tmap-c-img.is-soon,.tmap-c-thumb.is-soon{display:flex;align-items:center;justify-content:center;color:var(--ink-muted)}
.tmap-c-img.is-soon svg{width:44px;height:44px;opacity:.55}
.tmap-blur{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.tmap-blur i{position:absolute;inset:-18%;background:var(--paper-2) center/cover no-repeat;filter:blur(18px) saturate(.85)}
.tmap-c-thumb .tmap-blur i{filter:blur(6px) saturate(.85)}
.tmap-c-img.is-soon .tmap-c-here{z-index:1}
.tmap-c-here{position:absolute;top:10px;left:10px;padding:5px 10px;border-radius:var(--r-sm);font-size:12px;font-weight:500;color:var(--ink);
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.tmap-c-body{display:grid;padding:12px 8px 6px}
.tmap-c-name{font-size:15.5px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.tmap-c-name i{font-style:normal;font-weight:400;color:var(--ink-muted)}
.tmap-c-about{margin-top:4px;font-size:13px;line-height:1.45;color:var(--ink-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* "141 m² · Ready to visit" beside "Open the house" is more than 280 px holds, and
   both halves refuse to break: the row used to run off the card. It wraps now, and a
   card that carries the visit badge starts wider so it rarely has to. No rule above
   it either — the card is small enough that a line across it only cut it in two. */
.tmap-c-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin-top:9px}
.tmap-c-meta{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tmap-c-visit{display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft)}
.tmap-c-visit::before{content:'';width:6px;height:6px;border-radius:999px;background:#38C46B}
/* The way in reads in the same voice as the sentence above it — same size, same
   weight, same ink — and is a link because it is underlined, not because it shouts. */
.tmap-c-go{margin-left:auto;display:inline-flex;align-items:center;font-size:13px;font-weight:400;line-height:1.45;
  color:var(--ink-muted);white-space:nowrap;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(31,38,33,.28);transition:color .18s,text-decoration-color .18s}
.tmap-c-go svg{display:none}
a.tmap-c-main:hover .tmap-c-go{color:var(--ink);text-decoration-color:currentColor}

/* a stack's card: every house in it, one line each */
.tmap-c-head{display:block;padding:9px 10px 7px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-muted)}
.tmap-c-list{display:grid;gap:2px;max-height:min(400px,56vh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.tmap-c-item{display:grid;grid-template-columns:44px minmax(0,1fr) 14px;align-items:center;gap:12px;padding:7px 8px 7px 6px;border-radius:var(--r);color:inherit;transition:background .15s}
.tmap-c-item:has(.tmap-c-idesc){align-items:start}
.tmap-c-item:has(.tmap-c-idesc) .tmap-c-thumb,.tmap-c-item:has(.tmap-c-idesc) .tmap-c-arrow{margin-top:2px}
a.tmap-c-item:hover,a.tmap-c-item:focus-visible{background:var(--paper-2);outline:none}
.tmap-c-thumb{position:relative;width:44px;height:44px;border-radius:var(--r-sm);background:var(--paper-2) center/cover no-repeat}
.tmap-c-thumb.is-open::after{right:-4px;bottom:-4px;width:10px;height:10px}
.tmap-c-thumb.is-soon{display:flex;align-items:center;justify-content:center;color:var(--ink-muted)}
.tmap-c-thumb.is-soon svg{width:20px;height:20px}
.tmap-c-itxt{display:grid;min-width:0;line-height:1.3}
.tmap-c-itxt b{font-size:14px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmap-c-itxt span{font-size:12.5px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.tmap-c-item.is-here .tmap-c-itxt span{color:var(--ink-soft)}
/* what the house is, in two lines: the same sentence its own card opens with */
.tmap-c-itxt .tmap-c-idesc{margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--ink-muted);
  white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:unset}
.tmap-c-arrow{color:var(--ink-muted);transition:color .15s,transform .2s cubic-bezier(.2,.8,.2,1)}
.tmap-c-arrow svg{width:12px;height:12px;display:block}
a.tmap-c-item:hover .tmap-c-arrow{color:var(--ink);transform:translate(1px,-1px)}

/* the partner note: a plain grey foot, a small orange light that breathes, the sentence
   and one underlined link; the same light marks the country's pins on the map */
.tmap-c-partner{display:grid;grid-template-columns:8px minmax(0,1fr);align-items:start;gap:4px 12px;margin:6px 0 0;padding:12px 14px 13px;border-radius:var(--r);
  background:var(--paper-2);color:var(--ink);text-decoration:none;transition:background .18s}
.tmap-c-plight{position:relative;width:8px;height:8px;margin-top:6px;border-radius:99px;background:#E58A2E}
.tmap-c-plight::after{content:'';position:absolute;inset:0;border-radius:99px;background:#E58A2E;animation:tmap-glow 2.2s ease-out infinite}
@keyframes tmap-glow{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(3.2);opacity:0}}
.tmap-c-ptxt{display:grid;gap:4px;min-width:0}
.tmap-c-ph{font-size:13px;line-height:1.45;color:var(--ink-soft)}
.tmap-c-pgo{justify-self:start;display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:1px;transition:border-color .2s,gap .2s}
.tmap-c-pgo svg{width:10px;height:10px}
.tmap-c-partner:hover .tmap-c-pgo{border-color:var(--ink);gap:7px}
/* a coming place: its name and "let me know" on one line */
.tmap-c-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tmap-c-line .tmap-c-go{margin-left:0;flex:0 0 auto}
/* the orange light on a pin in a partner country (the green one, a visit, wins) */
.tmap-pin.is-partner:not(.is-open) .tmap-pin-img::after,.tmap-stack-img.is-partner:not(.is-open)::after{content:'';position:absolute;right:-5px;bottom:-5px;z-index:2;
  width:12px;height:12px;border-radius:999px;background:#E58A2E;box-shadow:0 0 0 2.5px var(--card),0 0 10px 1px rgba(229,138,46,.55)}
@media (prefers-reduced-motion:reduce){.tmap-c-plight::after{animation:none;opacity:0}}

/* a card opened by a click or a tap can be put away */
.tmap-c-x{position:absolute;top:12px;right:12px;z-index:1;width:30px;height:30px;padding:0;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:var(--r);color:#fff;
  background:rgba(31,38,33,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .18s}
.tmap-c-x svg{width:11px;height:11px}
.tmap-c-x:hover{background:rgba(31,38,33,.6)}
.tmap-card.is-group .tmap-c-x,.tmap-card.is-soon .tmap-c-x{top:6px;right:6px;background:var(--paper-2);color:var(--ink-muted);backdrop-filter:none}
.tmap-card.is-group .tmap-c-x:hover{background:var(--line);color:var(--ink)}

/* on a phone the card docks along the bottom of the map, a thumbnail beside the words */
.tmap-card.is-sheet{top:auto;left:10px;right:10px;bottom:10px;width:auto;transform:translateY(10px)!important;
  transition:opacity .2s ease,transform .28s cubic-bezier(.22,.8,.2,1),visibility 0s linear .2s}
.tmap-card.is-sheet.is-in{transform:none!important;transition:opacity .2s ease,transform .28s cubic-bezier(.22,.8,.2,1)}
.tmap-card.is-sheet::after{content:none}
.tmap-card.is-sheet .tmap-c-main{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:center}
.tmap-card.is-sheet .tmap-c-img{aspect-ratio:1/1}
.tmap-card.is-sheet .tmap-c-here{top:6px;left:6px;padding:3px 7px;font-size:11px}
.tmap-card.is-sheet .tmap-c-body{padding:2px 34px 2px 0}
.tmap-card.is-sheet .tmap-c-name{font-size:15px}
.tmap-card.is-sheet .tmap-c-about{-webkit-line-clamp:1}
.tmap-card.is-sheet .tmap-c-itxt .tmap-c-idesc{-webkit-line-clamp:1;margin-top:2px}
.tmap-card.is-sheet .tmap-c-row{margin-top:8px;padding-top:8px}
.tmap-card.is-sheet .tmap-c-meta{gap:8px}
.tmap-card.is-sheet .tmap-c-list{max-height:44vh}
.tmap-card.is-sheet .tmap-c-x{top:8px;right:8px;background:var(--paper-2);color:var(--ink-muted);backdrop-filter:none}
.tmap.is-full .tmap-card.is-sheet{bottom:calc(84px + env(safe-area-inset-bottom))}

/* ---- the buttons on the map: squared, see-through ---- */
.tmap-btn{position:absolute;z-index:4;border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:500;line-height:1.2;
  padding:11px 18px;border-radius:var(--r);background:rgba(31,38,33,.4);color:#fff;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .2s}
.tmap-btn:hover{background:rgba(31,38,33,.6)}
.tmap-reset{top:16px;left:16px;font-size:13.5px;padding:10px 16px}
.tmap-full{bottom:18px;left:50%;transform:translateX(-50%)}
.tmap-expand{top:16px;right:16px;width:42px;height:42px;padding:0;display:flex;align-items:center;justify-content:center}
.tmap-expand svg{width:18px;height:18px}
.tmap.has-card .tmap-full{opacity:0;pointer-events:none}
.tmap .maplibregl-ctrl-top-right{top:66px;right:16px}
.tmap .maplibregl-ctrl-top-right .maplibregl-ctrl{margin:0}
.tmap .maplibregl-ctrl-group{background:rgba(31,38,33,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--r);box-shadow:none;overflow:hidden}
.tmap .maplibregl-ctrl-group button{width:42px;height:42px;background:transparent}
.tmap .maplibregl-ctrl-group button+button{border-top:1px solid rgba(255,255,255,.2)}
.tmap .maplibregl-ctrl-group button:hover{background:rgba(31,38,33,.3)}
.tmap .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1) brightness(2)}
.tmap .maplibregl-ctrl-attrib{background:rgba(255,255,255,.72);border-radius:var(--r-sm) 0 0 0;font-size:10.5px}
.tmap .maplibregl-ctrl-bottom-left{display:none}
.tmap .maplibregl-cooperative-gesture-screen{font-family:var(--sans);font-size:15px;background:rgba(31,38,33,.5)}
@media (max-width:620px){
  .tmap-full{display:none}
  .tmap-reset{top:12px;left:12px;padding:9px 13px;font-size:13px}
  .tmap-expand{top:12px;right:12px;width:40px;height:40px}
  .tmap .maplibregl-ctrl-top-right{display:none}
  .tmap-pin-img{width:42px;height:42px}
  .tmap-pin.is-here .tmap-pin-img{width:50px;height:50px}
  .tmap-stack-img{width:36px;height:36px}
  .tmap-stack-img + .tmap-stack-img{margin-left:-10px}
}
.tmap.is-full .maplibregl-ctrl-top-right{display:block}

/* ---- full screen, with every house along the bottom ---- */
.tmap.is-full{position:fixed;inset:12px;z-index:200;aspect-ratio:auto;height:auto}
.tmap-strip{position:absolute;left:0;right:0;bottom:0;z-index:3;display:none;gap:8px;padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  background:linear-gradient(to top,rgba(247,245,240,.96) 40%,rgba(247,245,240,0))}
.tmap-strip::-webkit-scrollbar{display:none}
.tmap.is-full .tmap-strip{display:flex}
.tmap.is-full .tmap-full{bottom:92px}
.tmap-chip{scroll-snap-align:center;flex:0 0 auto;display:flex;align-items:center;gap:10px;cursor:pointer;font:inherit;
  border:1px solid var(--line);background:var(--card);border-radius:var(--r-lg);padding:5px 14px 5px 5px;transition:border-color .2s}
.tmap-chip:hover{border-color:var(--line-2)}
.tmap-chip-img{width:36px;height:36px;border-radius:var(--r);background:var(--paper-2) center/cover no-repeat;flex:0 0 auto}
.tmap-chip-t{display:grid;text-align:left;line-height:1.2}
.tmap-chip-t b{font-weight:500;font-size:13.5px}
.tmap-chip-t em{font-style:normal;font-size:12px;color:var(--ink-muted)}
.tmap-list{margin:16px 0 0 18px;color:var(--ink-soft)}
body.tmap-locked{overflow:hidden}
@media (max-width:760px){.tmap.is-full{inset:0;border-radius:0}}
@media (prefers-reduced-motion:reduce){.tmap-pin-img,.tmap-stack-in,.tmap-card{transition:none}}
/* this page's house leading a stack: framed in ink, the stack wearing its name tag */
.tmap-stack.is-here .tmap-stack-in{box-shadow:0 0 0 .75px var(--ink),0 16px 30px -12px rgba(20,24,21,.6)}
.tmap-stack-img.is-here{z-index:1}
.tmap-stack.is-here.is-hot .tmap-pin-here{opacity:0}
.tmap-stack .tmap-pin-here{left:26px}
/* a place where the next house is coming: the same pin and card as any house, the
   photograph blurred past recognising */
.tmap-pin.is-soon .tmap-blur i,.tmap-stack-img.is-soon .tmap-blur i{filter:blur(5px) saturate(.85)}
/* the pins' own stacking stays inside the map, under the card and the buttons */
.tmap .tmap-canvas{z-index:0}
@media (max-width:620px){.tmap{height:min(118vw,560px)}}

/* ---------- visit a house (src/site/pages/Visit.tsx) ----------
   The owner's Samara reference in our brand: a large calm heading, each house as a card
   that opens its own page, the site's map with just these houses, each house on its own with its open days as cards, and the
   sign-up in a sheet over the page. */
.vs{padding-bottom:clamp(64px,8vw,120px)}
.vs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(28px,4vw,48px)}
.vs-h1{margin:0;font-weight:300;font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:1;letter-spacing:-.04em;color:var(--ink)}
.vs-intro{margin:clamp(16px,2vw,24px) 0 0;max-width:52ch;font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.55;color:var(--ink-soft)}
/* the houses as cards: the photograph opens the house's own page, the badge says when it
   can be seen, one quiet line jumps to its dates further down */
.vs-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(16px,2vw,28px)}
.vs-card-a{display:block;color:var(--ink);text-decoration:none}
.vs-card-img{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--paper-2)}
.vs-card-img .ph{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.vs-card-a:hover .vs-card-img .ph{transform:scale(1.025)}
.vs-card{position:relative}
.vs-badge{position:absolute;z-index:2;left:16px;top:16px;display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 14px;border-radius:999px;background:rgba(247,245,240,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:13.5px;color:var(--ink)}
.vs-badge i{width:7px;height:7px;border-radius:99px;background:#5E9E5A}
a.vs-badge{text-decoration:none;transition:background .2s}
a.vs-badge:hover{background:#fff}
.vs-badge.is-live i{background:#5E9E5A;animation:vs-ping 2.4s ease-out infinite}
.vs-card-render{position:absolute;left:16px;bottom:14px;font-size:11.5px;letter-spacing:.02em;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.35)}
.vs-card-b{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 4px 0}
.vs-card-b h2{margin:0;font-weight:400;font-size:clamp(1.2rem,1.6vw,1.4rem);letter-spacing:-.02em;line-height:1.2}
.vs-card-b p{margin:3px 0 0;font-size:14.5px;color:var(--ink-muted)}
.vs-card-go{flex:0 0 auto;width:26px;height:26px;margin-top:2px;color:var(--ink-muted);transition:color .2s,transform .3s}
.vs-card-go svg{width:100%;height:100%}
.vs-card-a:hover .vs-card-go{color:var(--ink);transform:translate(1px,-1px)}
.vs-card-f{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:14px 4px 0}
.vs-card-f a{font-size:15px;color:var(--sage-deep);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.vs-card-f a:hover{border-color:currentColor}
.vs-card-f a.is-quiet{color:var(--ink-muted)}
.vs .tmap-sec{padding-top:clamp(64px,8vw,120px);padding-bottom:0}
/* a house */
.vs-house{padding-top:clamp(72px,9vw,140px)}
@keyframes vs-ping{0%{box-shadow:0 0 0 0 rgba(98,112,94,.45)}70%,100%{box-shadow:0 0 0 8px rgba(98,112,94,0)}}
.vs-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 20px;border:0;border-radius:10px;background:var(--ink);color:var(--paper);font:inherit;font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .2s,transform .12s,opacity .2s}
.vs-btn:hover{background:#101410}
.vs-btn:active{transform:scale(.985)}
.vs-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.vs-btn svg,.vs-link svg{width:15px;height:15px}
.vs-btn.is-sm{height:40px;padding:0 16px;font-size:14px}
.vs-btn.is-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.25px #B4B2AB}
.vs-btn.is-ghost:hover{background:var(--paper-2)}
.vs-link{display:inline-flex;align-items:center;gap:8px;padding:0 0 3px;border:0;border-bottom:1px solid var(--line-2);background:none;font:inherit;font-size:15px;color:var(--ink);cursor:pointer;transition:border-color .2s}
.vs-link:hover{border-color:var(--ink)}
/* its open days */
/* an open day: one wide card, centred under its own quiet heading */
.vs-events{display:grid;justify-items:center;gap:clamp(16px,2vw,24px);margin-top:clamp(56px,7vw,96px)}
.vs-events-h{margin:0 0 clamp(4px,1vw,10px);font-size:clamp(1.1rem,1.5vw,1.35rem);color:var(--ink-muted);text-align:center}
.vs-event{width:100%;max-width:820px;padding:clamp(16px,2.6vw,32px);border-radius:clamp(20px,2.4vw,28px);background:var(--paper-2);box-shadow:0 1px 0 rgba(20,24,20,.04)}
.vs-event-img{position:relative}
.vs-event-img .ph{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:clamp(10px,1.2vw,14px)}
.vs-event-b{padding:clamp(20px,2.6vw,30px) 0 0}
.vs-event-b h3{margin:0;font-weight:300;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.vs-event-b p{margin:12px 0 0;max-width:62ch;font-size:clamp(15px,1.2vw,16.5px);line-height:1.55;color:var(--ink-soft)}
.vs-event-f{display:flex;align-items:center;gap:clamp(14px,1.6vw,20px);margin-top:clamp(22px,2.6vw,32px);padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--line-2)}
.vs-event .vs-date{width:clamp(52px,5vw,60px);padding:8px 0 7px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1.25px var(--ink)}
.vs-event .vs-date b{font-size:clamp(22px,2.4vw,27px)}
.vs-event .vs-when b{font-weight:400;font-size:clamp(16px,1.5vw,18.5px)}
.vs-event .vs-when b::first-letter,.vse-big::first-letter{text-transform:uppercase}
.vs-event .vs-when span{margin-top:2px;font-size:clamp(14px,1.3vw,15.5px)}
.vs-event .vs-btn{flex:0 0 auto;margin-left:auto;padding:0 26px}
.vs-left{font-style:normal;color:var(--ink-muted)}
.vs-left::before{content:"·";margin:0 8px;color:var(--line-2)}
.vs-left.is-few{color:#8A4B3B}
.vs-date{flex:0 0 auto;display:grid;justify-items:center;width:48px;padding:6px 0 5px;border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1.25px #C9C6BD}
.vs-date b{font-weight:400;font-size:19px;line-height:1.1}
.vs-date span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.vs-when{flex:1 1 auto;min-width:0;display:grid}
.vs-when b{font-weight:500;font-size:14px;color:var(--ink)}
.vs-when span{font-size:13px;color:var(--ink-muted)}
/* not near */

/* the sheet: the browser's own dialog, a centred panel on a wide screen, rising from the
   bottom on a phone */
.vs-sheet{position:fixed;inset:0;margin:auto;width:min(560px,calc(100vw - 32px));height:fit-content;max-height:min(88vh,860px);padding:0;border:0;border-radius:20px;background:var(--paper);color:var(--ink);
  box-shadow:0 40px 80px -30px rgba(20,24,21,.45);overflow:auto;overscroll-behavior:contain}
.vs-sheet::backdrop{background:rgba(20,24,21,.38);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.vs-sheet[open]{animation:vs-in .32s cubic-bezier(.2,.8,.2,1)}
.vs-sheet[open]::backdrop{animation:vs-fade .3s ease}
@keyframes vs-in{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes vs-fade{from{opacity:0}}
.vs-sh{position:relative;padding:26px 26px 24px}
.vs-sh-x{position:absolute;right:14px;top:14px;width:36px;height:36px;border:0;border-radius:99px;background:var(--paper-2);font-size:22px;line-height:1;color:var(--ink);cursor:pointer}
.vs-sh-sum{display:flex;align-items:center;gap:14px;padding:0 46px 20px 0;border-bottom:1px solid var(--line)}
.vs-sh-sum.is-req .vs-when b{font-size:16px}
.vs-sheet h2{margin:22px 0 6px;font-weight:300;font-size:26px;letter-spacing:-.02em;line-height:1.15}
.vs-step{margin:18px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.vs-step + .vs-days-wrap h2,.vs-step + .vs-form h2{margin-top:8px}
.vs-muted{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-muted)}
/* the days: a scrollable row of small calendar leaves */
/* the days: a strip that swipes, no scrollbar over them, its edges fading so it reads as
   "there is more"; a calendar tile at the end for any other day */
.vs-days-scroll{position:relative;margin:18px -26px 0}
.vs-days{display:grid;grid-auto-flow:column;grid-auto-columns:58px;gap:8px;overflow-x:auto;padding:2px 26px 4px;scroll-snap-type:x proximity;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 44px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 44px),transparent 100%)}
.vs-days::-webkit-scrollbar{display:none}
.vs-day.is-other{position:relative;grid-column:span 2;align-content:center;gap:6px;padding:10px 8px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);cursor:pointer}
.vs-day.is-other svg{width:18px;height:18px;color:var(--ink-soft)}
.vs-day.is-other span{font-size:12.5px;color:var(--ink);text-align:center;line-height:1.2}
.vs-day.is-other:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.vs-day.is-other input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.vs-day.is-other.is-off{opacity:.4;pointer-events:none}
.vs-day{display:grid;justify-items:center;gap:2px;padding:10px 0 9px;border:0;border-radius:12px;background:var(--paper-2);color:var(--ink);cursor:pointer;scroll-snap-align:start;transition:background .2s,box-shadow .2s}
.vs-day span{font-size:11.5px;color:var(--ink-muted)}
.vs-day b{font-weight:400;font-size:20px;line-height:1.15}
.vs-day.is-we span:first-child{color:var(--sage-deep)}
.vs-day:hover{background:#E9E5DB}
.vs-day.is-on{background:#fff;box-shadow:inset 0 0 0 1.25px #B4B2AB}
.vs-day:disabled{opacity:.4;cursor:default}
.vs-picked{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.vs-picked li{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);animation:vs-in .25s ease}
.vs-picked b{font-weight:500;font-size:14.5px}
.vs-seg{display:flex;gap:4px;padding:3px;border-radius:9px;background:var(--paper-2)}
.vs-seg button{height:30px;padding:0 10px;border:0;border-radius:7px;background:transparent;font:inherit;font-size:13px;color:var(--ink-soft);cursor:pointer}
.vs-seg button.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(20,24,21,.12)}
/* the details */
.vs-form{display:grid;gap:14px;margin-top:20px}
.vs-field{display:grid;gap:6px}
.vs-field > span{font-size:13.5px;color:var(--ink-soft)}
.vs-field > span i{font-style:normal;color:var(--ink-muted);font-size:12.5px}
.vs-field input,.vs-field textarea{width:100%;height:48px;padding:0 14px;border:0;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:16px;color:var(--ink);outline:0;transition:box-shadow .2s}
.vs-field textarea{height:auto;padding:12px 14px;resize:vertical}
.vs-field input:focus,.vs-field textarea:focus{box-shadow:inset 0 0 0 1.5px var(--ink)}
.vs-field.is-party{display:flex;align-items:center;justify-content:space-between}
.vs-stepper{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.vs-stepper button{width:38px;height:38px;border:0;border-radius:9px;background:var(--paper-2);font-size:20px;line-height:1;color:var(--ink);cursor:pointer}
.vs-stepper button:disabled{opacity:.35;cursor:default}
.vs-stepper output{min-width:34px;text-align:center;font-size:17px}
.vs-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.vs-consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--ink-soft);cursor:pointer}
.vs-consent input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--ink);flex:0 0 auto}
.vs-consent a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.vs-field.is-bad input{box-shadow:inset 0 0 0 1.5px #B0634E}
.vs-field.is-bad > span{color:#8A4B3B}
.vs-consent.is-bad{color:#8A4B3B}
.vs-consent.is-bad input{outline:1.5px solid #B0634E;outline-offset:1px}
.vs-err{margin:0;padding:10px 12px;border-radius:10px;background:#F4E7E3;color:#8A4B3B;font-size:14px}
.vs-sh-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.vs-days-wrap .vs-sh-foot{justify-content:flex-end}
/* the answer */
.vs-done{display:grid;justify-items:start;padding-top:10px}
.vs-tick{width:52px;height:52px;margin-top:18px}
.vs-tick circle{fill:none;stroke:var(--sage);stroke-width:1.5;stroke-dasharray:151;stroke-dashoffset:151;animation:vs-draw .6s cubic-bezier(.3,.6,.2,1) forwards}
.vs-tick path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:vs-draw .35s .45s cubic-bezier(.3,.6,.2,1) forwards}
@keyframes vs-draw{to{stroke-dashoffset:0}}
.vs-done h2{margin-top:14px}
.vs-done p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--ink-soft)}
.vs-done-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:22px}
@media (max-width:900px){
}
@media (max-width:640px){
  .vs-event-f{flex-wrap:wrap}
  .vs-event .vs-btn{width:100%;margin-left:0}
  .vs-sheet{width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0;top:auto;border-radius:20px 20px 0 0}
  .vs-sheet[open]{animation:vs-up .36s cubic-bezier(.2,.8,.2,1)}
  @keyframes vs-up{from{transform:translateY(40px);opacity:.4}}
  .vs-sh{padding:22px 18px calc(20px + env(safe-area-inset-bottom))}
  .vs-days{margin:18px -18px 0;padding:2px 18px 8px}
}
@media (prefers-reduced-motion:reduce){.vs-sheet[open],.vs-avail i.is-live{animation:none}.vs-tick circle,.vs-tick path{animation:none;stroke-dashoffset:0}}

/* a render says so, wherever it is shown */
.vs-shot figcaption em{font-style:normal;margin-left:8px;padding-left:8px;border-left:1px solid var(--line-2);color:var(--ink-muted)}
.vs-house-photo,.vs-event-img{position:relative}
.vs-render{position:absolute;left:14px;top:14px;padding:5px 9px;border-radius:7px;background:rgba(247,245,240,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:12px;color:var(--ink-soft)}

/* a house page of a house one can visit: the tour to ask for, and its next open day */
.project-visit{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:clamp(18px,2vw,26px)}
.project-visit-next{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent}
.project-visit-next:hover{color:var(--ink);border-color:currentColor}
.project-visit-next i{width:7px;height:7px;border-radius:99px;background:#5E9E5A;animation:vs-ping 2.4s ease-out infinite}
.hb-open-t .project-visit,.project-hero-head .project-visit{justify-content:center}
/* ---------- one open day (src/site/pages/VisitEvent.tsx) ----------
   Compact: two columns from the top. On the left what it is, a modest photograph, when
   and where in two short columns, the details; on the right the sign-up, in view at once.
   One screen on a laptop. */
.vse{padding-top:clamp(16px,2vw,28px);padding-bottom:clamp(40px,5vw,72px)}
.vse-back{margin:0 0 14px}
.vse-card{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,3.4vw,48px);max-width:1120px;margin:0 auto;padding:clamp(18px,2.4vw,32px);border-radius:clamp(18px,2vw,24px);background:var(--paper-2)}
.vse-main{display:grid;align-content:start;gap:14px;min-width:0}
.vse-eyebrow{margin:0;font-size:14px;color:#9A5A3C}
.vse-h1{margin:-4px 0 4px;font-weight:300;font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1.08;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.vse-img{position:relative}
.vse-img .ph{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.vse-info{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-top:6px}
.vse-info .is-wide{grid-column:1/-1}
.vse-info h2{margin:0 0 4px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.vse-big{margin:0;font-size:17px;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.vse-big::first-letter{text-transform:uppercase}
.vse-big a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2)}
.vse-big a:hover{border-color:currentColor}
.vse-muted{margin:3px 0 0;font-size:14px;line-height:1.45;color:var(--ink-muted)}
.vse-left{margin-left:10px;color:var(--sage-deep)}
.vse-left::before{content:"·";margin-right:10px;color:var(--line-2)}
.vse-left.is-few{color:#8A4B3B}
.vse-note{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:14px;line-height:1.45;color:var(--ink-soft)}
.vse-note svg{flex:0 0 16px;width:16px;height:16px;margin-top:2px;color:var(--ink-muted)}
/* the photograph links to the house; its corner says so */
a.vse-img{display:block;position:relative;color:inherit;text-decoration:none}
.vse-house{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 20px rgba(20,24,21,.16);font-size:14px;font-weight:500;color:var(--ink);transition:background .2s,transform .2s}
a.vse-img:hover .vse-house{background:#fff;transform:translateY(-1px)}
.vse-house svg{width:15px;height:15px;transition:transform .2s}
a.vse-img:hover .vse-house svg{transform:translateX(2px)}
.vse-p{margin:0 0 8px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.vse-form{align-self:start;position:sticky;top:calc(var(--hdr-h) + 16px);padding:clamp(18px,2vw,26px);border-radius:16px;background:var(--paper)}
.vse-form-h{margin:0;font-weight:400;font-size:clamp(1.3rem,1.8vw,1.55rem);letter-spacing:-.02em}
.vse-loc{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.vse-mapbtn{flex:none;gap:8px;padding:10px 15px;font-size:14px}
.vse-mapbtn svg{width:17px;height:17px}
.vse-map{max-width:1120px;margin:clamp(20px,2.4vw,32px) auto 0}
.vse-when{margin:12px 0 10px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vse-form .vs-form{margin-top:14px;gap:12px}
.vse-form .vs-done{padding-top:10px}
.vse-form .vs-sh-foot > span:empty{display:none}
.vse-form .vs-sh-foot .vs-btn{width:100%}
.vs-event-b h3 a{color:inherit;text-decoration:none}
a.vs-btn{text-decoration:none}
@media (max-width:860px){
  .vse-card{grid-template-columns:1fr}
  .vse-form{position:static}
}
.vs-inline h2{margin:22px 0 6px;font-weight:300;font-size:26px;letter-spacing:-.02em;line-height:1.15}

/* ---------- an open day on a house card ----------
   On the next-houses strip it is the badge on the photograph, a link of its own to the
   day's sign-up, with the live bead breathing; in the houses list it is a line under the
   place, the date and one word to act on. */
.rec{position:relative}
.rec-pill.is-open{z-index:2;color:var(--ink);text-decoration:none;transition:background .2s,box-shadow .2s}
.rec-pill.is-open:hover{background:#fff;box-shadow:0 4px 16px rgba(20,24,21,.12)}
.rec-pill.is-open i{animation:vs-ping 2.4s ease-out infinite}
.hrow-open{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:14px;padding:9px 14px 9px 12px;border-radius:999px;background:var(--paper-2);color:var(--ink);font-size:14.5px;text-decoration:none;transition:background .2s}
.hrow-open i{width:7px;height:7px;border-radius:99px;background:#5E9E5A;flex:0 0 auto;animation:vs-ping 2.4s ease-out infinite}
.hrow-open b{font-weight:500;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;transition:text-decoration-color .2s}
.hrow-open:hover{background:#ECE8DF}
.hrow-open:hover b{text-decoration-color:currentColor}
@media (prefers-reduced-motion:reduce){.rec-pill.is-open i,.hrow-open i{animation:none}}
/* on the open day's page the way to the house is a plain line of text with its arrow */

/* ---------- the "ready to visit" switch beside the kinds ----------
   A real switch (a track and a knob), the words with a live bead, and how many houses
   it would leave. On, the track is ink and the knob slides; the list narrows. */
.houses-filters{flex-wrap:wrap;align-items:center;gap:12px 14px}
.vis-sw{display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 16px 0 12px;border-radius:var(--r);border:1px solid var(--line);background:rgba(247,245,240,.55);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);color:var(--ink-soft);font-size:14.5px;font-weight:500;text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}
.vis-sw:hover{border-color:var(--line-2);color:var(--ink)}
.vis-sw-t{position:relative;width:34px;height:20px;border-radius:99px;background:var(--line-2);transition:background .25s}
.vis-sw-t i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(20,24,21,.25);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.vis-sw.is-on{color:var(--ink);border-color:var(--ink)}
.vis-sw.is-on .vis-sw-t{background:var(--ink)}
.vis-sw.is-on .vis-sw-t i{transform:translateX(14px)}
.vis-sw-l{display:inline-flex;align-items:center;gap:8px}
.vis-sw-l b{width:7px;height:7px;border-radius:99px;background:#5E9E5A;animation:vs-ping 2.4s ease-out infinite}
.vis-sw em{min-width:22px;height:22px;padding:0 7px;display:grid;place-items:center;border-radius:99px;background:var(--paper-2);font-style:normal;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink-muted)}
.vis-sw.is-on em{background:var(--ink);color:var(--paper)}
.vis-sw:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
.houses-none{display:grid;justify-items:center;gap:10px;padding:clamp(30px,5vw,60px) 0;text-align:center;color:var(--ink-muted);font-size:16px}
.houses-none p{margin:0}
.houses-none a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){.vis-sw-l b{animation:none}.vis-sw-t i{transition:none}}

/* the switch, on: the same green as the live bead, so "can be visited" reads as one colour */
.vis-sw.is-on{color:var(--ink);border-color:#5E9E5A;background:rgba(94,158,90,.08)}
.vis-sw.is-on .vis-sw-t{background:#5E9E5A}
.vis-sw.is-on em{background:#5E9E5A;color:#fff}

/* ---------- the open days, at the top of the visit page ----------
   One compact row each: the photograph small on the left, what and where with the day
   under it, the button on the right. A glance, not a page. */
.vs-top{padding-bottom:clamp(48px,6vw,88px)}
.vs-top-h{margin:0 0 clamp(18px,2vw,26px);font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.vs-evs{display:grid;border-top:1px solid var(--line-2)}
.vs-ev{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--line-2)}
.vs-ev-img{position:relative;display:block;overflow:hidden;border-radius:14px}
.vs-ev-img .ph{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.vs-ev:hover .vs-ev-img .ph{transform:scale(1.025)}
.vs-ev-b{display:grid;align-content:center;gap:10px;min-width:0;max-width:720px}
.vs-ev-meta{display:flex;flex-wrap:wrap;gap:4px 0;margin:0;font-size:13.5px;color:var(--ink-muted)}
.vs-ev-meta span+span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 10px;border-radius:9px;background:currentColor;vertical-align:middle;opacity:.6}
.vs-ev-meta span:first-child{color:var(--ink)}
.vs-ev-meta span:first-child::first-letter{text-transform:uppercase}
.vs-ev-b h3{margin:0;font-weight:300;font-size:clamp(1.45rem,2.2vw,1.9rem);letter-spacing:-.03em;line-height:1.12}
.vs-ev-b h3 a{color:var(--ink);text-decoration:none}
.vs-ev-b h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.vs-ev-note{margin:0;max-width:62ch;font-size:15px;line-height:1.55;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vs-ev-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:clamp(8px,1.2vw,14px)}
.vs-ev-left{font-size:14px;color:var(--ink-muted)}
.vs-ev-left.is-few{color:#8A4B3B}
.vs-ev-go{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px 0 22px;border-radius:6px;background:var(--ink);color:var(--paper);font-size:14.5px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .2s,gap .25s}
.vs-ev-go svg{width:14px;height:14px}
.vs-ev-go:hover{background:#101410;gap:13px}
.vs-ev-f > span:empty{display:none}
.vs-ev-go.is-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.25px #B4B2AB}
@media (max-width:760px){
  .vs-ev{grid-template-columns:1fr;gap:18px}
  .vs-ev-go{flex:1 1 100%;justify-content:center}
}

/* ---------- sittings: the times of an open day ----------
   In the form, a row of tiles: the time large, the places under it; the chosen one wears
   the thin ink ring of every chosen thing on the site, a full one is struck and quiet
   (it can still be chosen, for its waiting list). On the page, the same times as a list. */
.vs-slots{display:grid;gap:10px}
.vs-slots-l{font-size:13.5px;color:var(--ink-soft)}
.vs-slots-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.vs-slot{display:grid;justify-items:start;gap:2px;padding:12px 14px 11px;border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:box-shadow .2s,background .2s,transform .12s}
.vs-slot:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.vs-slot:active{transform:scale(.985)}
.vs-slot b{font-weight:400;font-size:19px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vs-slot span{font-size:12.5px;color:#4F7F4C}
.vs-slot.is-on{box-shadow:inset 0 0 0 1.5px var(--ink)}
.vs-slot.is-full b{color:var(--ink-muted);text-decoration:line-through;text-decoration-thickness:1px}
.vs-slot.is-full span{color:var(--ink-muted)}
.vs-slot:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
/* the compact open-day row: the times as small tags under the day */
/* the open day's own page: the times listed under the date */
.vse-slots{list-style:none;display:grid;gap:0;margin:10px 0 0;padding:0;border-top:1px solid var(--line-2)}
.vse-slots li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.vse-slots b{font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
.vse-slots span{color:#4F7F4C}
.vse-slots li.is-full b{color:var(--ink-muted);text-decoration:line-through}
.vse-slots li.is-full span{color:var(--ink-muted)}

/* ---------- not near either house: one quiet panel, words left, the ways to reach us right ---------- */
.vs-far{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px 40px;margin-top:clamp(48px,6vw,80px);padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,32px);border-radius:18px;background:var(--paper-2)}
.vs-far h2{margin:0;font-weight:400;font-size:clamp(1.25rem,1.8vw,1.5rem);letter-spacing:-.02em;line-height:1.2}
.vs-far p{margin:6px 0 0;max-width:56ch;font-size:14.5px;line-height:1.5;color:var(--ink-muted)}
.vs-far-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 22px;margin:0}
.vs-far-cta{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:10px;background:var(--ink);color:var(--paper);font-size:14.5px;font-weight:500;text-decoration:none;transition:background .2s}
.vs-far-cta:hover{background:#101410}
.vs-far-cta svg{width:15px;height:15px;transition:transform .25s}
.vs-far-cta:hover svg{transform:translateX(3px)}
.vs-far-alt{font-size:14.5px;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:1px}
.vs-far-alt:hover{color:var(--ink);border-color:currentColor}
@media (max-width:760px){.vs-far{grid-template-columns:1fr}.vs-far-row{justify-content:flex-start}}
.tmap-cta{margin-top:18px}
/* how many days are on (three at most), as beads beside the question */
.vs-days-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px}
.vs-days-h h2{margin-bottom:0}
.vs-days-n{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-muted);white-space:nowrap}
.vs-days-n i{width:7px;height:7px;border-radius:99px;box-shadow:inset 0 0 0 1.25px var(--line-2);transition:background .2s,box-shadow .2s}
.vs-days-n i.is-on{background:var(--ink);box-shadow:none}
.vs-days-n i:last-of-type{margin-right:4px}
.vs-days-n.is-some{color:var(--ink)}
/* the house in the request form's header: a small square of its photograph */
.vs-sh-sum.is-req{display:flex;align-items:center;gap:14px;padding-right:48px}
.vs-sh-img{flex:0 0 auto;width:60px;height:60px;border-radius:12px;overflow:hidden;background:var(--paper-2)}
.vs-sh-img .ph{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.hb-open-sub{display:block;color:var(--ink-muted)}

/* ---------- the menu's drop-downs ----------
   A group label with a small chevron; hovering or focusing it opens a quiet sheet of
   links under it, in the same paper and type as the language menu. A bridge under the
   label keeps the sheet open while the pointer travels down to it. */
.nav-dd{position:relative;display:flex}
.nav-dd-t{display:inline-flex;align-items:center;gap:6px}
.nav-dd-t svg{opacity:.55;transition:transform .25s,opacity .2s}
.nav-dd:hover .nav-dd-t svg,.nav-dd:focus-within .nav-dd-t svg{transform:rotate(180deg);opacity:.9}
.nav-dd-m{position:absolute;top:calc(100% + 10px);left:-5px;min-width:200px;padding:5px;display:grid;gap:2px;border-radius:var(--r);
  background:rgba(247,245,240,.8);border:1px solid transparent;-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);box-shadow:0 8px 28px rgba(20,24,21,.07);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s .22s;z-index:30}
.nav-dd-m::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-dd:hover .nav-dd-m,.nav-dd:focus-within .nav-dd-m{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s}
/* the sheet's links are the bar's links: same size, colour and hover, one under another */
.navpill .nav-dd-m a{display:flex;align-items:center;height:36px;padding:0 clamp(11px,1.1vw,18px);border-radius:var(--r-sm);font-size:14.5px;color:var(--ink);white-space:nowrap}
.navpill .nav-dd-m a:hover{background:rgba(31,38,33,.06)}
/* over the home photograph the bar is clear glass with white words; so is its sheet */
html:not(.hdr-solid) body.has-overlay .nav-dd-m{background:rgba(255,255,255,.14);box-shadow:none}
html:not(.hdr-solid) body.has-overlay .navpill .nav-dd-m a{color:rgba(255,255,255,.9)}
html:not(.hdr-solid) body.has-overlay .navpill .nav-dd-m a:hover{background:rgba(255,255,255,.16);color:#fff}
/* the phone menu: the same groups, each under a small grey heading */
.mnav-g{display:grid;padding:14px 0 6px;border-bottom:1px solid var(--line)}
.mnav-gh{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);padding-bottom:4px}
.mnav-links .mnav-g a{font-size:22px;padding:8px 0;border-bottom:0}

/* ---------- the catalogue's filter: a pill that slides, houses that settle ----------
   The dark pill is one element under the labels, moved to the chosen one with a long
   ease-out; the labels only change colour. After a switch the rows come in with a short
   rise and fade, each a breath after the one above (the first six; the rest are below
   the fold anyway). */
.seg{position:relative}
.seg-b{position:relative;z-index:1;transition:color .35s cubic-bezier(.22,1,.36,1)}
.seg.has-ind .seg-b.is-on{background:transparent}
.seg-ind{position:absolute;top:4px;bottom:4px;left:0;z-index:0;border-radius:var(--r-sm);background:var(--ink);pointer-events:none}
.seg.is-ready .seg-ind{transition:transform .52s cubic-bezier(.22,1,.36,1),width .52s cubic-bezier(.22,1,.36,1)}
@keyframes hrow-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.houses-rows.is-turn .hrow{animation:hrow-in .6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 55ms)}
@media (prefers-reduced-motion:reduce){.seg.is-ready .seg-ind{transition:none}.houses-rows.is-turn .hrow{animation:none}}
/* arriving from a change of language: held back until it is scrolled to the reader's place (layout.tsx LANG_PLACE) */
html.lang-hold body{visibility:hidden}