/* Shared masthead + footer chrome. Page-specific layout stays in each page's
   own <style> block; only what every page repeats lives here. */
:root{
  --ink:#10261A; --ink2:#0A1A12; --sand:#F0EBE1; --paper:#FAF7F1;
  --coral:#C0522F; --coral2:#E4633C; --mute:#68736B;
  --line:rgba(16,38,26,0.14); --green:#2F7D5B; --red:#C4362B;
}

/* ── global smoothness ────────────────────────────────────────────────────── */
/* Anchor jumps (e.g. the #rent section link) ease instead of snapping.
   Respects reduced-motion below. */
html{ scroll-behavior:smooth; }

/* A quick, subtle settle-in on load/navigation rather than a hard cut. Kept
   short (0.4s) so it reads as polish, not a loading delay.
   DO NOT animate transform here. Any transform on <body> — even translateY(0)
   in the final keyframe, which `both` makes permanent — turns body into the
   containing block for position:fixed descendants. That sizes every lightbox
   overlay to the full document height instead of the viewport, so the photo
   centres itself somewhere below the fold. Opacity only. */
body{ animation:ccpFadeIn .4s ease both; }
@keyframes ccpFadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* Baseline transition for anything interactive that doesn't opt into a more
   specific animation below — color/background/border changes ease instead
   of snapping. Layout properties (width/height/display) are deliberately
   excluded so this can't introduce jank on elements that resize. */
a, button, input, .tag, [role="button"]{
  transition:color .15s ease, background-color .15s ease, border-color .15s ease,
             box-shadow .18s ease, transform .15s ease, opacity .15s ease;
}

/* Lift-on-hover for anything that acts like a clickable card (project tiles,
   rental rows, nearby-project cards, similar-rental tiles). Add this class
   alongside the element's existing inline styles. */
.hoverlift{ transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.hoverlift:hover{ transform:translateY(-4px); box-shadow:0 20px 44px -22px rgba(16,38,26,0.32); }
.hoverlift:active{ transform:translateY(-1px); }

/* Subtle photo zoom on hover. Put this on the element with overflow:hidden
   that wraps the <img> (not the <img> itself). */
.imgzoom{ overflow:hidden; }
.imgzoom img{ transition:transform .4s ease; }
.imgzoom:hover img{ transform:scale(1.06); }

/* Coral/ink CTA pills: a little lift + shadow on hover, a little compression
   on press, so buttons feel pressable rather than static. */
.btn-pop{ transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.btn-pop:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 14px 28px -14px rgba(16,38,26,0.4); }
.btn-pop:active{ transform:translateY(0); filter:brightness(0.97); }

/* Filter/sort chips: a light press effect so toggling feels responsive. */
.rent-chip, [data-tab], .fbtn{ transition:transform .12s ease, background-color .15s ease, color .15s ease, border-color .15s ease; }
.rent-chip:active, [data-tab]:active, .fbtn:active{ transform:scale(0.96); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  body{ animation:none; }
  a, button, input, .tag, [role="button"], .hoverlift, .imgzoom img, .btn-pop, .rent-chip, [data-tab], .fbtn{
    transition:none !important;
  }
}

/* ── masthead ─────────────────────────────────────────────────────────────── */
.mast{ background:var(--ink); color:var(--sand); }
.mast-in{ max-width:1360px; margin:0 auto; padding:20px 48px;
          display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.mast a{ color:inherit; text-decoration:none; }
/* The brand is the logo image, applied here rather than in markup so all 1,600-odd
   pages that carry <a class="mast-brand"> — including every journal article in
   fifteen languages — pick it up without being edited. The wordmark text stays in
   the DOM, pushed out of sight, so it remains the link's accessible name. The
   artwork is white on transparent, which is why it only ever sits on .mast. */
.mast-brand{
  display:block;
  width:96px; height:56px;   /* 418:245 artwork ratio, sized up 2026-08-14 */
  background:url(assets/logo-light.png) left center / contain no-repeat;
  text-indent:-9999px; overflow:hidden; white-space:nowrap;
}
.mast-brand:hover{ opacity:0.85; }

.mnav{ display:flex; gap:28px; font-size:15px; flex-wrap:wrap; }
.mnav a{ color:rgba(240,235,225,0.72); padding-bottom:2px; border-bottom:1px solid transparent; transition:color .12s; }
.mnav a:hover{ color:var(--sand); }
.mnav a.on{ color:var(--sand); border-bottom-color:var(--coral2); }

.mast-right{ display:flex; align-items:center; gap:16px; font-size:14.5px; flex-wrap:wrap; }

.cur{ border:1px solid rgba(240,235,225,0.22); border-radius:999px; display:flex; overflow:hidden;
      font-family:'Newsreader',serif; font-size:14px; }
.cur [data-cur]{ padding:7px 12px; color:rgba(240,235,225,0.6); background:none; border:0; cursor:pointer;
                 font:inherit; transition:background .12s,color .12s; }
.cur [data-cur]:hover{ color:var(--sand); }
.cur [data-cur].on{ background:var(--sand); color:var(--ink); font-weight:500; }

.mast-saved{ color:rgba(240,235,225,0.85); white-space:nowrap; }
.mast-saved [data-saved-count]{ font-family:'Newsreader',serif; color:var(--coral2); }
.mast-signin{ border:1px solid rgba(240,235,225,0.5); border-radius:999px; padding:8px 19px; white-space:nowrap; }
.mast-signin:hover{ background:rgba(240,235,225,0.1); }
.mast-cta{ background:var(--coral); color:#FFF3EA; border-radius:999px; padding:9px 18px; white-space:nowrap; }

/* ── save buttons on cards ────────────────────────────────────────────────── */
[data-save]{ cursor:pointer; font:inherit; }
/* span variant is used inside card links, where a <button> would be invalid nesting */
/* :not(.btn-save) — the listing rail sits on a dark card and styles its own
   save button; without this the pale pill below wins and the label vanishes
   against it on hover. */
button[data-save]:not(.btn-save), .savebtn[data-save]{
  display:inline-block; border:1px solid rgba(16,38,26,0.16); background:var(--paper); color:var(--ink);
  border-radius:999px; padding:7px 14px; font-size:12.5px; line-height:1.2; transition:.12s; }
button[data-save]:not(.btn-save):hover, .savebtn[data-save]:hover{ border-color:rgba(16,38,26,0.4); }
button[data-save]:not(.btn-save).on, .savebtn[data-save].on{ background:var(--ink); color:var(--sand); border-color:var(--ink); }

/* ── floating language switcher ───────────────────────────────────────────── */
.langfab{ position:fixed; right:22px; bottom:22px; z-index:1200; font-family:'DM Sans',sans-serif; }
.langfab-btn{ display:flex; align-items:center; gap:8px; background:var(--ink); color:var(--sand);
  border:0; border-radius:999px; padding:9px 14px 9px 10px; cursor:pointer; font:inherit; font-size:13.5px;
  box-shadow:0 10px 28px -10px rgba(10,26,18,0.6); transition:transform .12s, box-shadow .12s; }
.langfab-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 32px -10px rgba(10,26,18,0.7); }
.langfab-btn img{ width:26px; height:19px; object-fit:cover; border-radius:3px; display:block;
  box-shadow:0 0 0 1px rgba(240,235,225,0.25); }
.langfab-btn .chev{ font-size:10px; opacity:0.7; transition:transform .15s; }
.langfab[data-open="1"] .chev{ transform:rotate(180deg); }

.langfab-panel{ position:absolute; right:0; bottom:calc(100% + 10px); width:232px; max-height:min(62vh,460px);
  overflow-y:auto; background:var(--paper); border:1px solid rgba(16,38,26,0.12); border-radius:16px;
  box-shadow:0 26px 60px -22px rgba(10,26,18,0.55); padding:6px;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px) scale(0.98); transform-origin:bottom right;
  transition:opacity .16s ease, transform .16s ease, visibility .16s; }
.langfab[data-open="1"] .langfab-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); }
.langfab-panel a{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:11px;
  font-size:14.5px; color:var(--ink); text-decoration:none; }
.langfab-panel a:hover{ background:rgba(16,38,26,0.06); }
.langfab-panel a.on{ background:var(--ink); color:var(--sand); }
.langfab-panel img{ width:26px; height:19px; object-fit:cover; border-radius:3px; flex:none;
  box-shadow:0 0 0 1px rgba(16,38,26,0.14); }
.langfab-panel .code{ margin-inline-start:auto; font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; opacity:0.55; }
.langfab-head{ font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--mute);
  padding:9px 12px 7px; }
@media (max-width: 560px){ .langfab{ right:14px; bottom:14px; } .langfab-panel{ width:208px; } }

/* ── segmented tabs ───────────────────────────────────────────────────────── */
[data-tabs]{ display:flex; gap:4px; flex-wrap:wrap; }
[data-tab]{ border:0; background:none; font:inherit; cursor:pointer; border-radius:999px;
            padding:8px 20px; font-size:13.5px; color:var(--mute); transition:.12s; }
[data-tab]:hover{ color:var(--ink); }
[data-tab].on{ background:var(--coral2); color:#FFF3EA; }

/* ── shared page furniture used by the newer pages ────────────────────────── */
.pagewrap{ max-width:1360px; margin:0 auto; padding:0 48px; }
.serif{ font-family:'Newsreader',serif; font-weight:400; }
.kicker{ font-family:'Newsreader',serif; font-style:italic; font-size:22px; color:var(--coral); }
.label{ font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--mute); font-weight:500; }
.tag{ background:rgba(16,38,26,0.05); border-radius:999px; padding:5px 11px; font-size:12px; color:#2F4238; white-space:nowrap; }
.tag.key{ background:rgba(192,82,47,0.10); color:var(--coral); }

/* ── homepage "On the market" card row ────────────────────────────────────── */
/* Six compact cards across. Cards reuse .hoverlift and .imgzoom for the lift and
   photo zoom, so only layout lives here. Steps down to 3 then 2 columns rather
   than squeezing six cards onto a phone. */
.mkt-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
@media (max-width: 1240px){ .mkt-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 700px){ .mkt-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }

.mkt-card{
  background:#fff; border:1px solid rgba(16,38,26,0.09); border-radius:14px;
  overflow:hidden; color:inherit; text-decoration:none;
  display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(16,38,26,0.05);
}
.mkt-card:hover{ color:inherit; }
.mkt-card:hover .mkt-name{ color:var(--coral); }

.mkt-shot{ position:relative; height:132px; margin:4px 4px 0; border-radius:11px; flex:none; }
.mkt-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.mkt-badge{
  position:absolute; top:9px; left:9px; border-radius:999px; padding:4px 9px;
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase; pointer-events:none;
}

.mkt-body{ padding:11px 12px 13px; display:flex; flex-direction:column; flex:1; min-width:0; }
.mkt-name{
  font-family:'Newsreader',serif; font-size:16px; font-weight:600; line-height:1.2;
  transition:color .14s ease;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mkt-meta{ font-size:11.5px; color:var(--mute); line-height:1.45; margin-top:4px; }
.mkt-price{
  font-family:'Newsreader',serif; font-size:19px; font-weight:600; color:var(--red);
  line-height:1.1; margin-top:auto; padding-top:9px;
}
.mkt-price small{
  display:block; font-family:'DM Sans',sans-serif; font-size:10.5px; font-weight:400;
  color:var(--mute); margin-top:3px; letter-spacing:0;
}

.sitefoot{ background:var(--ink2); color:rgba(240,235,225,0.55); padding:34px 0; margin-top:0; }
.sitefoot .pagewrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:13.5px; }

@media (max-width: 900px){
  .mast-in, .pagewrap{ padding-left:22px; padding-right:22px; }
}

/* ── WordPress gallery blocks inside journal articles ────────────────────────
   The imported articles keep Gutenberg's own markup (figure.wp-block-gallery
   wrapping nested figure.wp-block-image), which relies on the WordPress block
   library stylesheet we deliberately do not ship. Without those rules the flex
   layout collapsed and every photo rendered as a full-width block — one article
   has a 54-image gallery, so it ran for pages. These rules give the galleries
   back their grid without pulling in the whole block library. */
[data-page="journal"] .wp-block-gallery{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:10px; margin:28px 0; padding:0; list-style:none;
}
[data-page="journal"] .wp-block-gallery figure{
  margin:0; border-radius:8px; overflow:hidden; background:rgba(16,38,26,0.06);
}
[data-page="journal"] .wp-block-gallery img{
  width:100%; height:200px; object-fit:cover; display:block; border-radius:0; margin:0;   /* the page style gives every .article img a 26px margin */
  transition:transform .5s cubic-bezier(.22,.61,.36,1), filter .3s ease;
}
[data-page="journal"] .wp-block-gallery figure:hover img{ transform:scale(1.05); filter:brightness(1.04); }
[data-page="journal"] .wp-block-gallery figcaption{
  padding:7px 9px 9px; font-size:12px; line-height:1.45; color:#6e7671; background:#fff;
}

/* a lone image keeps its proportions, capped so a portrait shot cannot take over */
[data-page="journal"] .article > figure.wp-block-image{ margin:26px 0; }
[data-page="journal"] .article > figure.wp-block-image img{
  width:100%; height:auto; max-height:560px; object-fit:cover; border-radius:10px; display:block; margin:0;
}

@media (max-width: 700px){
  [data-page="journal"] .wp-block-gallery{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; margin:22px 0; }
  [data-page="journal"] .wp-block-gallery img{ height:132px; }
}
