/* ═══════════════════════════════════════════════════════════════════════
   BELA VODA — shared by index.html, stay.html and property.html.

   The design system is the client's own board: a limestone ground, deep
   river-teal for everything that matters, one warm bronze accent, and two
   families — Playfair Display for headlines, Plus Jakarta Sans for
   everything read or pressed. Corners are small (2–12px), shadows are
   soft and short, and the dark band is kept for the valley and the foot
   of the page, where it reads as the river in shade.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* the river */
  --primary:   #052528;
  --primary-2: #1E3B3E;
  --teal:      #2A4E53;
  --abyss:     #122527;
  --secondary: #3D646C;
  --ice:       #C0EAF3;

  /* the stone */
  --limestone:   #F7F6F2;
  --surface:     #FAF9F5;
  --surface-low: #F5F4F0;
  --surface-mid: #EFEEEA;
  --sand:        #EBE7DF;
  --parchment:   #DCD7CC;
  --white:       #FFFFFF;

  /* the type */
  --ink:   #1B1C1A;
  --ink-2: #414849;
  /* The board's outline grey (#727879) reads at only 3.6–4.3:1 on these
     grounds, which fails small labels. It stays for hairlines and icons;
     text that uses it takes this darker step, 4.9–5.5:1. */
  --muted:   #5E6465;
  --outline: #727879;
  --outline-soft: #C1C8C8;

  /* the one warm thing. #9E8163 is 3.4:1 on limestone — fine for a rule
     or a dot, not for words. Words take -ink (4.7–5.3:1) on light ground
     and -lt (6.0:1) on the dark band. */
  --bronze:     #9E8163;
  --bronze-ink: #7A6149;
  --bronze-lt:  #B29C83;
  --tan:        #DBC3A8;
  --warn:       #93000A;

  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --shell:  1440px;
  --read:   1120px;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --band:   clamp(4rem, 8vw, 6rem);
  --head:   5rem;

  --r:      .125rem;
  --r-lg:   .25rem;
  --r-xl:   .5rem;
  --r-full: .75rem;   /* the board's "full" — a rounded square, not a circle */

  --shadow-sm: 0 1px 2px rgb(18 37 39 / .06), 0 1px 3px rgb(18 37 39 / .05);
  --shadow-md: 0 6px 18px -6px rgb(18 37 39 / .16);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--head)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition-duration:.01ms !important; animation:none !important} }

body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:var(--sans); font-size:1rem; line-height:1.625;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* height:auto is load-bearing. Every <img> carries width/height attributes
   for layout stability, and those map to a UA presentational hint of
   height:1500px. A specified height beats aspect-ratio, so without this
   line every aspect-ratio below is silently ignored and the photographs
   render at their full natural height. */
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button,input,select{font:inherit; color:inherit}
button{background:none; border:0; padding:0; cursor:pointer}
h1,h2,h3{margin:0; font-weight:400}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
::selection{background:var(--ice); color:#244C54}
:focus-visible{outline:2px solid var(--secondary); outline-offset:3px}

.skip{position:absolute; left:-9999px; z-index:300; background:var(--primary); color:var(--white); padding:12px 18px}
.skip:focus{left:14px; top:14px}

/* line icons, drawn rather than pulled from an icon font — see ICONS in
   houses.js for why */
.i, .ic svg{
  width:1.125rem; height:1.125rem; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

.shell{max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter)}

/* ── type ───────────────────────────────────────────────────────────── */
.display{
  font-family:var(--display); font-size:clamp(2.75rem, 6vw, 4.5rem);
  line-height:1.1; letter-spacing:-.02em;
}
.h-lg{font-family:var(--display); font-size:clamp(2rem, 4vw, 3rem); line-height:1.17; letter-spacing:-.01em; color:var(--primary)}
.h-md{font-family:var(--display); font-size:clamp(1.875rem, 3vw, 2.25rem); line-height:1.22; color:var(--primary)}
.h-sm{font-family:var(--display); font-size:1.75rem; line-height:1.29; color:var(--primary)}
.quote{font-family:var(--display); font-style:italic; font-size:clamp(1.25rem, 2.2vw, 1.5rem); line-height:1.6}

/* The smallest type anywhere is 11.5px — the board's 10px labels are
   raised to it. Letterspaced caps below that stop being words. */
.label, .eyebrow{
  font-family:var(--sans); font-size:.75rem; line-height:1rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
}
.eyebrow{letter-spacing:.2em; color:var(--bronze-ink)}
.eyebrow--rule{display:flex; align-items:center; gap:.75rem}
.eyebrow--rule::before{content:""; width:2rem; height:1px; background:var(--bronze); flex:none}

/* ── the logo ───────────────────────────────────────────────────────── */
.brand{display:inline-flex; align-items:center; gap:.75rem; color:var(--primary)}
.brand__logo{width:2.5rem; height:2.5rem; flex:none; display:block}
.brand__txt{display:flex; flex-direction:column}
.brand__name{
  font-family:var(--display); font-size:1.75rem; line-height:1; white-space:nowrap;
  letter-spacing:.05em; text-transform:uppercase; transition:color .2s var(--ease);
}
.brand:hover .brand__name{color:var(--teal)}
.brand__sub{
  font-size:.71875rem; line-height:1rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-top:.3rem; white-space:nowrap;
}

/* ── header ─────────────────────────────────────────────────────────── */
.top{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgb(247 246 242 / .88);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:0 1px 8px rgb(18 37 39 / .05);
}
.top__in{
  height:var(--head); max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav{display:none; align-items:center; gap:2rem}
@media (min-width:1280px){ .nav{display:flex} }
.nav a{
  font-size:.8125rem; line-height:1.125rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); transition:color .2s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--primary); font-weight:600; text-decoration:underline;
  text-underline-offset:8px; text-decoration-color:var(--bronze)}

/* EN | SL. The current language is marked rather than linked; on a phone
   only the other one shows, because that is the only one worth pressing. */
.top__end{display:flex; align-items:center; gap:.75rem}
.langs{display:flex; align-items:center; gap:.125rem}
.langs a{padding:.375rem .5rem; border-radius:var(--r-lg); font-size:.8125rem; line-height:1.125rem;
  font-weight:600; letter-spacing:.12em; color:var(--muted); transition:color .2s var(--ease), background-color .2s var(--ease)}
.langs a:hover{color:var(--primary); background:var(--surface-mid)}
.langs a[aria-current]{color:var(--primary); background:var(--surface-mid)}

.top__cta .short{display:none}
@media (max-width:640px){ .brand__sub{display:none} }
/* On a phone the lockup and "Check Availability" do not fit on one row,
   so the name steps down and the button says the short thing. */
@media (max-width:520px){
  .top .brand__name{font-size:1.2rem}
  .top .brand__logo{width:2rem; height:2rem}
  .top__end{gap:.375rem}
  .langs a[aria-current]{display:none}
  .top__cta .long{display:none}
  .top__cta .short{display:inline}
}
/* "Rezerviraj" is longer than "Book"; at the narrowest phones the lockup
   gives up a little so the name stays on one line in both languages. */
@media (max-width:400px){
  .top .brand{gap:.5rem}
  .top .brand__name{font-size:1.05rem}
  .top .brand__logo{width:1.75rem; height:1.75rem}
  .top__cta{padding-inline:.875rem}
}

main{padding-top:var(--head)}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.75rem;
  padding:.875rem 2rem; border:1px solid transparent; border-radius:var(--r);
  background:var(--primary); color:var(--white);
  font-size:.875rem; line-height:1.25rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; text-align:center; cursor:pointer; box-shadow:var(--shadow-sm);
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover{background:var(--abyss)}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:.625rem 1.25rem; border-radius:var(--r-lg); letter-spacing:.06em;
  box-shadow:0 4px 12px -2px rgb(18 37 39 / .1)}
.btn--teal{background:var(--teal)}
.btn--teal:hover{background:var(--primary)}
.btn--soft{background:var(--surface-mid); color:var(--primary); box-shadow:none}
.btn--soft:hover{background:var(--sand)}
.btn--line{background:transparent; color:var(--ink); border-color:var(--outline); box-shadow:none}
.btn--line:hover{background:var(--surface-mid)}
.btn--block{display:flex; width:100%}
.btn[disabled]{opacity:.4; pointer-events:none}

/* ── fields: a label above a bare control, on a pale tile ───────────── */
.field{
  display:flex; flex-direction:column; justify-content:center; min-width:0;
  padding:.625rem 1rem; background:var(--surface-low); border-radius:var(--r-lg);
  transition:box-shadow .2s var(--ease);
}
.field:focus-within{box-shadow:0 0 0 2px var(--secondary)}
.field > label, .field__label{
  display:block; margin-bottom:.25rem;
  font-size:.71875rem; line-height:1rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.field input, .field select{
  width:100%; min-width:0; padding:.125rem 0; border:0; border-radius:0; background:transparent;
  font-size:.8125rem; line-height:1.375rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--primary); color-scheme:light; cursor:pointer;
}
.field input:focus, .field select:focus{outline:none}
.field__row{display:flex; align-items:center; gap:.5rem}
.field__row select{appearance:none; -webkit-appearance:none}
.field__row .i{color:var(--outline)}
.field__pair{display:flex; align-items:center; gap:.5rem}
.field__pair span{color:var(--outline); flex:none}

/* a hairline with a label sitting in it */
.rule{display:flex; align-items:center; gap:1.25rem; margin-bottom:clamp(2rem, 4vw, 3rem)}
.rule::before,.rule::after{content:""; height:1px; background:var(--parchment); flex:1}
.rule span{
  font-size:.75rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bronze-ink); white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE LANDING PAGE
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the opening: the photograph under the header, the dates on top ─── */
.splash{
  position:relative; overflow:hidden; margin-top:calc(-1 * var(--head));
  background:var(--primary); color:var(--white);
}
.splash__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:60% 50%; transform:scale(1.05);
}
/* The board's scrim ends at 40% at the top, but this photograph's sky is
   pale mist, and the small labels up there measured 3.4:1 on it. At 64%
   they clear 4.5:1 without the mountains going flat. */
.splash__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, var(--abyss), rgb(18 37 39 / .62) 50%, rgb(5 37 40 / .64));
}
.splash__in{
  position:relative; z-index:1; max-width:var(--shell); margin-inline:auto;
  min-height:92vh; min-height:92svh; display:flex; flex-direction:column; justify-content:space-between;
  padding:9rem var(--gutter) 6rem;
}
@media (min-width:768px){ .splash__in{padding-bottom:8rem} }
@media (max-width:640px){ .splash__in{padding-top:7rem; padding-bottom:3rem} }

.splash__meta{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1rem}
.splash__where{
  display:flex; align-items:center; gap:.75rem;
  font-size:.75rem; line-height:1rem; font-weight:600; letter-spacing:.25em;
  text-transform:uppercase; color:var(--limestone);   /* parchment was 3.5:1 on the mist at phone width */
}
.pulse{width:.625rem; height:.625rem; border-radius:50%; background:var(--bronze); flex:none;
  animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes pulse{50%{opacity:.45}}
.splash__geo{
  display:none; font-size:.71875rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tan); white-space:nowrap;
}
@media (min-width:640px){ .splash__geo{display:block} }

.splash__stack{
  max-width:56rem; margin-block:auto; padding:3rem 0 2rem;
  display:grid; gap:1.5rem; justify-items:start;
}
.chip{
  display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .75rem; border-radius:var(--r);
  background:rgb(255 255 255 / .1); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  font-size:.71875rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
.chip .i{width:15px; height:15px; color:var(--bronze-lt)}
.splash h1{max-width:48rem; line-height:1.08; letter-spacing:-.025em}
.splash__quote{max-width:42rem; color:rgb(235 231 223 / .9)}

/* the booking bar */
.book{
  display:grid; grid-template-columns:minmax(0,1fr); gap:.75rem; align-items:stretch;
  padding:.75rem; border-radius:var(--r-xl); color:var(--ink);
  background:rgb(247 246 242 / .96); -webkit-backdrop-filter:blur(32px); backdrop-filter:blur(32px);
  box-shadow:0 25px 50px -12px rgb(0 0 0 / .3);
}
@media (min-width:640px){ .book{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:768px){ .book{padding:1rem} }
@media (min-width:1024px){ .book{grid-template-columns:3fr 4fr 2fr 3fr} }
.book__go{
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  min-height:52px; padding:0 1.5rem; border-radius:var(--r-lg);
  background:var(--primary); color:var(--white);
  font-size:.875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 4px 8px -2px rgb(0 0 0 / .15); transition:background-color .2s var(--ease);
}
.book__go:hover{background:var(--abyss)}

/* ── welcome ────────────────────────────────────────────────────────── */
.welcome{background:var(--limestone); padding-block:var(--band)}
.welcome__grid{display:grid; gap:var(--gutter) 2rem; align-items:start}
@media (min-width:1024px){ .welcome__grid{grid-template-columns:5fr 7fr} }
.welcome__intro{display:grid; gap:1.5rem}
.welcome__quote{color:var(--secondary); padding-top:.5rem}

.badge{margin-top:1.5rem; display:flex; align-items:center; gap:1.25rem;
  padding:1.5rem; border-radius:var(--r-xl); background:var(--surface-mid)}
.badge__icon{width:3.5rem; height:3.5rem; flex:none; display:grid; place-items:center;
  border-radius:var(--r-full); background:var(--primary); color:var(--white)}
.badge__icon .i{width:1.5rem; height:1.5rem}
.badge__title{display:block; margin-bottom:.25rem; font-size:.71875rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--primary)}
.badge p{font-size:.875rem; line-height:1.375rem; color:var(--ink-2)}

.welcome__story{display:grid; gap:2rem}
@media (min-width:1024px){ .welcome__story{padding-left:2rem} }
.welcome__txt p{font-size:1.125rem; line-height:1.875rem}
.welcome__txt p + p{margin-top:1.5rem; color:var(--ink-2)}
.dropcap::first-letter{
  float:left; margin:.3rem .45rem 0 0; font-family:var(--display);
  font-size:3.6rem; line-height:.85; color:var(--primary);
}
.stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; padding-top:1rem}
@media (min-width:640px){ .stats{grid-template-columns:repeat(4,minmax(0,1fr))} }
.stat{padding:1.25rem; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-sm)}
.stat b{display:block; margin-bottom:.5rem; font-family:var(--display); font-size:2.25rem;
  line-height:1; font-weight:500; color:var(--primary)}
.stat span{display:block; font-size:.71875rem; line-height:1rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.welcome__act{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; padding-top:1rem}
.welcome__note{font-size:.875rem; font-style:italic; color:var(--muted)}

/* ── the four houses ────────────────────────────────────────────────── */
.houses{background:var(--surface-low); padding-block:var(--band)}
.sec-head{display:flex; flex-direction:column; gap:1.5rem; margin-bottom:3rem}
@media (min-width:768px){ .sec-head{flex-direction:row; align-items:flex-end; justify-content:space-between} }
.sec-head__txt{display:grid; gap:.75rem}
.sec-head__txt p:last-child{max-width:36rem; color:var(--ink-2)}

.hgrid{display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem}
@media (min-width:768px){ .hgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .hgrid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.hcard{display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-xl);
  background:var(--surface); box-shadow:var(--shadow-sm); transition:box-shadow .3s var(--ease)}
.hcard:hover{box-shadow:var(--shadow-md)}
.hcard__shot{display:block; position:relative; height:16rem; overflow:hidden; background:var(--surface-mid)}
.hcard__shot img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.hcard:hover .hcard__shot img{transform:scale(1.05)}
.hcard__body{flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:1rem; padding:1.5rem}
.hcard__name{margin-bottom:.25rem}
.hcard__name a:hover{color:var(--teal)}
.hcard__note{font-size:.875rem; line-height:1.375rem; color:var(--ink-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.hcard__foot{display:grid; gap:.75rem; padding-top:1rem}
.hcard__meta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.375rem .75rem;
  font-size:.875rem; line-height:1.375rem; color:var(--muted)}
.hcard__meta > span{display:inline-flex; align-items:center; gap:.375rem; white-space:nowrap}
.hcard__meta svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
.hcard__rate{font-weight:600; color:var(--primary)}
.hcard .btn{padding:.625rem 1rem; font-size:.75rem; letter-spacing:.06em}

/* ── the valley: the dark band ──────────────────────────────────────── */
.valley{position:relative; overflow:hidden; padding-block:var(--band); background:var(--abyss); color:var(--white)}
.valley__lines{position:absolute; right:-5rem; bottom:-5rem; width:24rem; height:24rem;
  color:var(--primary-2); opacity:.7; pointer-events:none}
.valley__in{position:relative; z-index:1}
.eyebrow--ice{color:var(--ice); letter-spacing:.25em; margin-bottom:1.5rem}
.eyebrow--ice::before{width:1.5rem; background:var(--ice)}
.valley__lead{max-width:56rem; margin-bottom:4rem}
.valley__lead h2{line-height:1.2; margin-bottom:2rem}
.valley__lede{font-style:normal; color:rgb(235 231 223 / .9)}

.pillars{display:grid; gap:1.5rem; padding-top:1rem}
@media (min-width:768px){ .pillars{grid-template-columns:repeat(3,minmax(0,1fr))} }
.pillar{display:grid; gap:1rem; align-content:start; padding:2rem; border-radius:var(--r-xl);
  background:rgb(30 59 62 / .5); transition:background-color .3s var(--ease)}
.pillar:hover{background:rgb(30 59 62 / .7)}
.pillar__icon{width:3rem; height:3rem; display:grid; place-items:center; border-radius:var(--r-lg); background:var(--teal)}
.pillar__icon .i{width:1.5rem; height:1.5rem}
.pillar__when{display:block; margin-bottom:.25rem; font-size:.75rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--bronze-lt)}
.pillar h3{color:var(--white)}
.pillar p{font-size:.875rem; line-height:1.6; color:rgb(220 215 204 / .85)}
.pillar .pillar__fact{padding-top:.5rem; font-size:.75rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ice)}

/* ── instagram: four still photographs, not a feed ──────────────────── */
.social{background:var(--surface); padding-block:var(--band)}
.social__head{display:flex; flex-direction:column; gap:1rem; margin-bottom:2.5rem}
@media (min-width:768px){ .social__head{flex-direction:row; align-items:flex-end; justify-content:space-between} }
.social__head .label{display:block; margin-bottom:.5rem; letter-spacing:.2em}
.social__at{display:inline-flex; align-items:center; gap:.5rem; font-size:.8125rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--teal); transition:color .2s var(--ease)}
.social__at:hover{color:var(--primary)}
.social__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
@media (min-width:768px){ .social__grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.social__tile{position:relative; display:block; aspect-ratio:1/1; overflow:hidden;
  border-radius:var(--r-lg); background:var(--surface-mid)}
.social__tile img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.social__tile:hover img{transform:scale(1.05)}
.social__cap{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:1rem;
  background:linear-gradient(to top, rgb(18 37 39 / .82), transparent 65%);
  font-size:.71875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--white);
  opacity:0; transition:opacity .3s var(--ease);
}
.social__tile:hover .social__cap, .social__tile:focus-visible .social__cap{opacity:1}
/* no hover on a phone, so the captions simply show */
@media (hover:none){ .social__cap{opacity:1} }

/* ── the email list ─────────────────────────────────────────────────── */
.signup{background:var(--sand); padding-block:var(--band); text-align:center}
.signup__in{max-width:800px; margin-inline:auto; padding-inline:var(--gutter); display:grid; gap:1.5rem; justify-items:center}
.signup__icon{width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:var(--r-full);
  background:var(--surface); color:var(--bronze-ink); box-shadow:var(--shadow-sm)}
.signup__icon .i{width:1.25rem; height:1.25rem}
.signup__words{display:grid; gap:.75rem}
.signup .quote{max-width:36rem; margin-inline:auto; color:var(--ink-2)}
.signup form{width:100%; max-width:28rem; padding-top:1rem}
.signup__box{display:flex; flex-direction:column; gap:.5rem; padding:.375rem; border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--shadow-sm); transition:box-shadow .2s var(--ease)}
.signup__box:focus-within{box-shadow:0 0 0 2px var(--secondary)}
@media (min-width:640px){ .signup__box{flex-direction:row} }
.signup input{flex:1; min-width:0; padding:.75rem 1rem; border:0; background:transparent;
  font-size:.875rem; color:var(--primary)}
.signup input::placeholder{color:var(--muted)}
.signup input:focus{outline:none}
.signup button{padding:.75rem 1.5rem; border-radius:var(--r); background:var(--primary); color:var(--white);
  font-size:.875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  box-shadow:var(--shadow-sm); transition:background-color .2s var(--ease)}
.signup button:hover{background:var(--abyss)}
.signup__note{display:block; margin-top:.75rem; font-size:.71875rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.msg{min-height:1.4em; margin-top:.5rem; font-size:.875rem; font-style:italic; color:var(--ink-2)}
.msg.bad{color:var(--warn)}

/* ── contact ────────────────────────────────────────────────────────── */
.contact{background:var(--surface-low); padding-block:var(--band)}
.contact__in{max-width:56rem; margin-inline:auto; display:grid; gap:2rem}
.contact__head{text-align:center; display:grid; gap:.5rem}
.contact__head .eyebrow{letter-spacing:.25em}
.contact__head p:last-child{color:var(--ink-2)}
.lines{display:grid; gap:1rem; padding:1.5rem; border-radius:var(--r-xl); background:var(--surface); box-shadow:var(--shadow-sm)}
@media (min-width:640px){ .lines{gap:1.5rem; padding:2.5rem} }
.lines li{display:flex; flex-direction:column; gap:.5rem; padding:1rem 1.5rem; border-radius:var(--r-lg); background:var(--white)}
@media (min-width:640px){ .lines li{flex-direction:row; align-items:center; justify-content:space-between} }
.lines li > span:first-child{font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.lines a, .lines .v{font-size:1.125rem; line-height:1.75rem; overflow-wrap:anywhere}
.lines a{font-weight:500; color:var(--primary); transition:color .2s var(--ease)}
.lines a:hover{color:var(--teal)}
.lines a.wa{display:inline-flex; align-items:center; gap:.375rem; color:var(--teal)}
.lines a.wa:hover{color:var(--primary)}
.lines li.soon{background:rgb(235 231 223 / .6)}
.lines li.soon > span:first-child{color:var(--primary)}
.lines li.soon .v{display:inline-flex; align-items:center; gap:.5rem; font-size:1rem; font-weight:500; color:var(--primary)}
.live{width:.5rem; height:.5rem; border-radius:50%; background:#047857; flex:none}

/* ── footer ─────────────────────────────────────────────────────────── */
.foot{background:var(--abyss); color:#F2F1ED}
.foot__in{max-width:var(--shell); margin-inline:auto; padding:var(--band) var(--gutter) 3.5rem}
.foot__grid{display:grid; gap:2.5rem var(--gutter); margin-bottom:var(--band)}
@media (min-width:768px){ .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .foot__grid{grid-template-columns:5fr 3fr 4fr} }
.foot__brand{display:flex; flex-direction:column; justify-content:space-between; gap:2rem}
@media (min-width:1024px){ .foot__brand{padding-right:2rem} }
.foot .brand{color:var(--white)}
.foot .brand__logo{width:2.25rem; height:2.25rem; opacity:.92}
.foot .brand__name{font-size:1.75rem; letter-spacing:.1em}
.foot .brand:hover .brand__name{color:var(--ice)}
.foot__blurb{max-width:28rem; padding-top:1rem; color:rgb(220 215 204 / .85)}
.foot__label{display:block; margin-bottom:.5rem; font-size:.75rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tan)}
.foot__addr{font-size:.875rem; line-height:1.6; color:rgb(235 231 223 / .9)}
.foot__col{display:grid; gap:1.25rem; align-content:start}
.foot__col .foot__label{margin:0}
.foot__links{display:grid; gap:.625rem; justify-items:start}
.foot__links a{display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem;
  color:rgb(235 231 223 / .9); transition:color .2s var(--ease)}
.foot__links a:hover{color:var(--white)}
.foot__links .i{color:var(--bronze)}
.foot__gap{padding-top:1rem}
.foot__estate{display:grid; gap:.375rem; justify-items:start}
.foot__estate a{font-size:.875rem; color:rgb(220 215 204 / .8); transition:color .2s var(--ease)}
.foot__estate a:hover{color:var(--white)}

.gazette{display:flex; flex-direction:column; justify-content:space-between; gap:1.25rem;
  padding:2rem; border-radius:var(--r-xl); background:rgb(30 59 62 / .4)}
.gazette .foot__label{color:var(--bronze-lt)}
.gazette h3{font-family:var(--display); font-size:1.75rem; line-height:1.29; color:var(--white); margin:.25rem 0 .75rem}
.gazette p{font-size:.875rem; line-height:1.6; color:rgb(220 215 204 / .8)}
.gazette__field{position:relative}
.gazette input{width:100%; padding:.75rem 3.25rem .75rem 1rem; border:0; border-radius:var(--r-lg);
  background:rgb(255 255 255 / .06); color:var(--white); font-size:.875rem; transition:background-color .2s var(--ease)}
.gazette input::placeholder{color:rgb(220 215 204 / .6)}
.gazette input:focus{outline:none; background:rgb(255 255 255 / .11); box-shadow:0 0 0 2px var(--ice)}
.gazette button{position:absolute; right:.5rem; top:.5rem; bottom:.5rem; padding:0 .75rem;
  display:grid; place-items:center; color:#F8DEC2; transition:color .2s var(--ease)}
.gazette button:hover{color:var(--white)}
.gazette button .i{width:1.25rem; height:1.25rem}
.gazette__note{display:block; margin-top:.75rem; font-size:.71875rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:rgb(193 200 200 / .85)}
.gazette .msg{color:rgb(220 215 204 / .9)}
.gazette .msg.bad{color:#FFB4AB}

.foot__base{display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:2rem; border-top:1px solid rgb(255 255 255 / .08)}
@media (min-width:768px){ .foot__base{flex-direction:row} }
.foot__c{font-size:.875rem; line-height:1.4rem; text-align:center; color:rgb(193 200 200 / .85)}
@media (min-width:768px){ .foot__c{text-align:left} }
.foot__nav{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.5rem}
.foot__nav a{font-size:.8125rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--outline-soft); transition:color .2s var(--ease)}
.foot__nav a:hover{color:var(--white)}

/* ═══════════════════════════════════════════════════════════════════════
   THE COLLECTION — dates first, across all four houses at once.
   Type a stay and the collection answers: which houses are free, what each
   one actually costs for those nights, and why the others are not. The
   thing a four-house owner can do that a platform listing cannot.
   ═══════════════════════════════════════════════════════════════════════ */
.sec{padding:clamp(2.5rem, 5vw, 4.5rem) var(--gutter)}
.sec > *{max-width:var(--read); margin-inline:auto}
.sec--wide > *{max-width:calc(var(--shell) - 2 * var(--gutter))}

.stay__head{display:grid; gap:.75rem; margin-bottom:2rem}
.stay__head p:last-child{max-width:40rem; color:var(--ink-2)}

.finder{margin-bottom:clamp(2rem, 4vw, 3rem); padding:.75rem; border-radius:var(--r-xl);
  background:var(--white); box-shadow:0 12px 32px -14px rgb(18 37 39 / .22)}
@media (min-width:768px){ .finder{padding:1rem} }
.finder__row{display:grid; grid-template-columns:minmax(0,1fr); gap:.75rem}
@media (min-width:640px){ .finder__row{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .finder__row{grid-template-columns:repeat(3,minmax(0,1fr)) auto} }
.finder__clear{padding:.75rem 1.5rem; border:1px solid var(--outline); border-radius:var(--r-lg);
  font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  transition:background-color .2s var(--ease)}
.finder__clear:hover{background:var(--surface-mid)}
.finder__said{margin-top:.875rem; min-height:1.5em; text-align:center; font-size:.9375rem; font-style:italic; color:var(--ink-2)}

/* Every card is a subgrid sharing its row's tracks, so the photographs,
   the names, the specs, the paragraphs and the buttons all sit on the
   same lines across the row — however uneven the copy is. Without subgrid
   support the paragraph takes the slack and the button still drops to the
   bottom of its card, which is the part people notice. */
.grid{display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem}
@media (min-width:700px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1200px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.card{display:flex; flex-direction:column; grid-row:span 5; overflow:hidden;
  border-radius:var(--r-xl); background:var(--white); box-shadow:var(--shadow-sm); transition:box-shadow .3s var(--ease)}
.card:hover{box-shadow:var(--shadow-md)}
.card > :not(.card__shot){margin-inline:1.5rem}
.card__note{flex:1}
@supports (grid-template-rows: subgrid){
  .card{display:grid; grid-template-rows:subgrid; row-gap:0}
  .card__note{flex:none}
}
.card__shot{display:block; overflow:hidden; background:var(--surface-mid)}
.card__shot img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .7s var(--ease)}
.card:hover .card__shot img{transform:scale(1.05)}
.card__head{padding-top:1.5rem; align-self:start}
.card__name{font-family:var(--display); font-size:1.625rem; line-height:1.25; color:var(--primary)}
.card__name a:hover{color:var(--teal)}
.card__spec{margin-top:.375rem; font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.card__note{margin-top:.75rem; font-size:.875rem; line-height:1.375rem; color:var(--ink-2); align-self:start}
.card__verdict{margin-top:1rem; font-size:.75rem; line-height:1.6; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--secondary)}
.card__verdict:empty{margin-top:0}
.card__total{margin-top:.125rem; font-family:var(--display); font-size:1.75rem; font-weight:400; line-height:1.2;
  letter-spacing:0; text-transform:none; color:var(--primary); font-variant-numeric:tabular-nums}
.card > .btn{margin-top:1.25rem; margin-bottom:1.5rem; align-self:end; padding-inline:1rem;
  font-size:.8125rem; letter-spacing:.06em}

/* a card the dates rule out — kept visible, and told why. The photograph
   and the name fade; the reason stays at full contrast so it can be read. */
.card.out .card__shot img{filter:saturate(.3); opacity:.6}
.card.out .card__name, .card.out .card__spec, .card.out .card__note{color:var(--muted)}
.card.out .card__verdict{text-transform:none; letter-spacing:0; font-weight:400; font-style:italic;
  font-size:.875rem; color:var(--ink-2)}
.card.out > .btn{background:var(--surface-mid); color:var(--primary); box-shadow:none}
.card.out > .btn:hover{background:var(--sand)}

/* ═══════════════════════════════════════════════════════════════════════
   THE HOUSE PAGE — the Airbnb listing anatomy, in this typeface.
   Photo mosaic, title row, host line, amenities with icons, a booking card
   that follows you down the page, then reviews. The shapes people already
   know how to read, wearing the site's clothes.
   ═══════════════════════════════════════════════════════════════════════ */
.back{display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.5rem;
  font-size:.75rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
  transition:color .2s var(--ease)}
.back:hover{color:var(--primary)}

/* ── the photo mosaic: one large, four small ─────────────────────────── */
.mosaic-wrap{position:relative; overflow:hidden; border-radius:var(--r-xl)}
.mosaic{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr)); gap:8px; aspect-ratio:2/1;
}
.mosaic button{display:block; padding:0; overflow:hidden; background:var(--surface-mid); cursor:zoom-in}
.mosaic button:first-child{grid-column:span 2; grid-row:span 2}
.mosaic img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.mosaic button:hover img{transform:scale(1.05)}
.mosaic__more{position:absolute; right:14px; bottom:14px; padding:.625rem 1rem; border-radius:var(--r-lg);
  background:rgb(255 255 255 / .95); color:var(--primary); box-shadow:var(--shadow-md);
  font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase}
.mosaic__more:hover{background:var(--white)}
/* fewer than five photographs: even tiles, no hero, nothing repeated */
.mosaic--few{grid-template-rows:auto; aspect-ratio:3/1.15}
.mosaic--few button:first-child{grid-column:span 2; grid-row:span 1}
@media (max-width:760px){
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr)); aspect-ratio:4/3; gap:5px}
  .mosaic button:first-child{grid-column:span 2; grid-row:span 1}
  .mosaic button:nth-child(n+4){display:none}
}

/* ── the title row ──────────────────────────────────────────────────── */
.lead{margin-top:clamp(1.5rem, 3vw, 2.5rem)}
.lead h1{font-family:var(--display); font-size:clamp(2.25rem, 4.4vw, 3.25rem); line-height:1.12; letter-spacing:-.01em; color:var(--primary)}
.lead__facts{display:flex; flex-wrap:wrap; align-items:center; gap:.375rem .875rem; margin-top:.875rem;
  font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.lead__facts .dot{color:var(--outline)}
.lead__stars{display:inline-flex; align-items:center; gap:.4rem; color:var(--primary)}
.lead__stars svg{width:14px; height:14px; fill:var(--bronze)}

/* ── two columns: the house on the left, the booking card on the right ─ */
.listing{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr);
  gap:clamp(2rem, 4vw, 4.5rem); align-items:start;
  margin-top:clamp(1.75rem, 3vw, 2.75rem); padding-top:clamp(1.75rem, 3vw, 3rem);
  border-top:1px solid var(--parchment);
}
@media (max-width:920px){ .listing{grid-template-columns:minmax(0,1fr)} }

.host{display:flex; align-items:center; gap:1rem; padding-bottom:1.5rem; border-bottom:1px solid var(--parchment)}
.host__ring{width:3.25rem; height:3.25rem; flex:none; display:grid; place-items:center;
  border-radius:var(--r-full); background:var(--primary); color:var(--white);
  font-family:var(--display); font-size:1.375rem; line-height:1}
.host__who{display:block; font-size:.8125rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--primary)}
.host__sub{display:block; font-size:.9375rem; color:var(--ink-2); margin-top:.125rem}

.about-house{padding:1.5rem 0; border-bottom:1px solid var(--parchment)}
.about-house p{font-size:1.0625rem; line-height:1.75; color:var(--ink-2)}
.about-house p:first-child{color:var(--ink)}
.about-house p + p{margin-top:1em}

.amen{padding:1.5rem 0; border-bottom:1px solid var(--parchment)}
.amen h2, .revs h2, .rules h2{font-family:var(--display); font-size:1.75rem; line-height:1.29; color:var(--primary); margin-bottom:1.25rem}
.amen__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.875rem 1.5rem}
@media (max-width:560px){ .amen__grid{grid-template-columns:minmax(0,1fr)} }
.amen__grid li{display:flex; align-items:flex-start; gap:.75rem; font-size:.9375rem; color:var(--ink-2)}
.amen__grid svg{width:21px; height:21px; flex:none; margin-top:1px; fill:none; stroke:var(--primary);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}

/* ── the booking card, which follows you down ───────────────────────── */
.bookcard{position:sticky; top:calc(var(--head) + 1.25rem); padding:clamp(1.25rem, 2.2vw, 1.75rem);
  border:1px solid var(--parchment); border-radius:var(--r-xl); background:var(--white);
  box-shadow:0 14px 36px -16px rgb(18 37 39 / .22)}
@media (max-width:920px){ .bookcard{position:static} }
.bookcard__top{display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem}
.bookcard__rate{font-family:var(--display); font-size:1.875rem; color:var(--primary)}
.bookcard__unit{font-size:.8125rem; color:var(--muted)}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:1.25rem}
@media (max-width:420px){ .fields{grid-template-columns:1fr} }
.bookcard .field.wide{margin-top:.5rem}
.bookcard .btn{width:100%; margin-top:1rem}
.bookcard__msg{margin-top:1rem; font-size:.9375rem; line-height:1.6; color:var(--ink-2)}
.bookcard__msg.no{color:var(--warn)}
.bookcard__rows{margin-top:1.125rem; border-top:1px solid var(--parchment)}
.bookcard__rows li{display:flex; justify-content:space-between; gap:.875rem; padding:.7rem 0;
  border-bottom:1px solid var(--parchment); font-size:.9375rem; color:var(--ink-2)}
.bookcard__rows li b{font-weight:600; color:var(--primary); font-variant-numeric:tabular-nums; white-space:nowrap}
.bookcard__total{display:flex; justify-content:space-between; align-items:baseline; gap:.875rem; padding-top:1rem}
.bookcard__total span{font-size:.75rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.bookcard__total b{font-family:var(--display); font-size:1.875rem; font-weight:400; color:var(--primary); font-variant-numeric:tabular-nums}
.bookcard__fine{margin-top:.875rem; font-size:.8125rem; line-height:1.55; color:var(--muted)}

/* ── reviews ────────────────────────────────────────────────────────── */
.revs{padding:1.5rem 0; border-bottom:1px solid var(--parchment)}
.revs__head{display:flex; align-items:baseline; flex-wrap:wrap; gap:.875rem; margin-bottom:1.5rem}
.revs__score{display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:600; color:var(--primary)}
.revs__score svg{width:16px; height:16px; fill:var(--bronze)}
.revs__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem 2rem}
@media (max-width:640px){ .revs__grid{grid-template-columns:minmax(0,1fr)} }
.rev__who{display:flex; align-items:center; gap:.75rem}
.rev__ring{width:2.5rem; height:2.5rem; flex:none; display:grid; place-items:center; border-radius:var(--r-full);
  background:var(--surface-mid); color:var(--primary); font-size:.875rem; font-weight:600}
.rev__name{display:block; font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--primary)}
.rev__when{display:block; font-size:.8125rem; font-style:italic; color:var(--muted); margin-top:.125rem}
.rev__stars{display:flex; gap:3px; margin-top:.75rem}
.rev__stars svg{width:12px; height:12px; fill:var(--bronze)}
.rev__text{margin-top:.5rem; font-size:.9375rem; line-height:1.65; color:var(--ink-2)}

.rules{padding:1.5rem 0}
.rules__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem 2rem}
@media (max-width:700px){ .rules__grid{grid-template-columns:minmax(0,1fr)} }
.rules__grid h3{margin-bottom:.625rem; font-size:.75rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.rules__grid li{padding:.2rem 0; font-size:.9375rem; color:var(--ink-2)}
.tlink{color:var(--teal); text-decoration:underline; text-underline-offset:3px}
.tlink:hover{color:var(--primary)}

/* ── the season table, so the year is legible without guessing ──────── */
.maprow{display:grid; gap:2rem 3.5rem}
@media (min-width:820px){ .maprow{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)} }
.rates{border-top:1px solid var(--parchment)}
.rates li{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.625rem 1.25rem; align-items:baseline;
  padding:.75rem 0; border-bottom:1px solid var(--parchment)}
.rates .s{font-size:1rem; color:var(--ink-2)}
.rates .w{font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:right; white-space:nowrap}
.rates .r{font-size:.9375rem; font-weight:600; color:var(--primary); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.rates li.on .s, .rates li.on .r{color:var(--secondary)}
.rates li.on .s{font-weight:600}
.taken{margin-top:.75rem}
.taken li{padding:.3rem 0; font-size:.9375rem; color:var(--ink-2); font-variant-numeric:tabular-nums}
.fine{margin-top:1.25rem; font-size:.9375rem; line-height:1.6; font-style:italic; color:var(--muted)}

/* ── the other houses, at the foot of a property page ───────────────── */
.others{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem}
@media (max-width:760px){ .others{grid-template-columns:minmax(0,1fr)} }
.other > a{display:block; overflow:hidden; border-radius:var(--r-xl); background:var(--surface-mid)}
.other img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform 1s var(--ease)}
.other > a:hover img{transform:scale(1.04)}
.other h3{margin-top:.875rem; font-family:var(--display); font-size:1.375rem; line-height:1.3; color:var(--primary)}
.other h3 a:hover{color:var(--teal)}
.other p{margin-top:.25rem; font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

/* ── lightbox ───────────────────────────────────────────────────────── */
.lb{position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center;
  padding:clamp(14px, 4vw, 56px); background:rgb(18 37 39 / .97)}
.lb.on{display:flex}
.lb img{max-width:100%; max-height:86vh; object-fit:contain; border-radius:var(--r-lg)}
.lb__x,.lb__p,.lb__n{position:absolute; width:46px; height:46px; display:grid; place-items:center;
  border:1px solid rgb(255 255 255 / .3); border-radius:var(--r-lg); color:var(--white);
  transition:background-color .2s var(--ease), color .2s var(--ease)}
.lb__x:hover,.lb__p:hover,.lb__n:hover{background:var(--white); color:var(--primary)}
.lb__x{top:clamp(14px, 3vw, 26px); right:clamp(14px, 3vw, 26px); font-size:19px; line-height:1}
.lb__p{left:clamp(10px, 2vw, 26px); top:50%; margin-top:-23px}
.lb__n{right:clamp(10px, 2vw, 26px); top:50%; margin-top:-23px}
.lb__p svg,.lb__n svg{width:15px; height:15px}
.lb__cap{position:absolute; left:0; right:0; bottom:clamp(14px, 3vw, 28px); text-align:center;
  font-size:.8125rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgb(255 255 255 / .75)}