/* The client kit's rental site: one template, every client (products/lead-engine/sites/rental/, made by
   scripts/client/make-site.py). Composition from the Saltvig demo ("Field notes"): the monumental wordmark, mono
   field-note metadata, the client's photos pinned to a colour block, the rate log on a dark band. Every colour is a
   token the generator fills from clients.theme (a <style> in index.html); fonts are the kit's OFL faces.
   Units, prices, photos and texts are read live from Supabase by site.js; nothing here is per client. */

@font-face { font-family: "Kit Display"; src: url("fonts/kit-display.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Kit Sans"; src: url("fonts/kit-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Kit Mono"; src: url("fonts/kit-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kit Mono"; src: url("fonts/kit-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
img { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -100px; z-index: 100; padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }

html.site {
  /* The client's inks */
  --paper: #ECEDE4;      /* ground: salt-bleached paper */
  --sheet: #F6F6F0;      /* a print lying on it */
  --forest: #14180F;     /* ink: 16:1 on paper */
  --terrain: #2D3329;    /* second dark */
  --marram: #B5BD9A;     /* the colour block; forest on it is 9.6:1 */
  --earth: #84907F;      /* decoration only, never text */
  --signal: #E2F0B8;     /* the one bright: only on forest (15.9:1) */
  --rule-c: color-mix(in srgb, var(--forest) 22%, transparent);

  --display: "Kit Display", "Arial Narrow", Impact, sans-serif;
  --body: "Kit Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Kit Mono", ui-monospace, Menlo, monospace;

  --err: #8E2A17;

  --gx: clamp(16px, 4vw, 56px);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--paper);
  scroll-padding-top: 72px;
}
html.site body { background: var(--paper); color: var(--forest); font-family: var(--body); overflow-x: clip; }
html.site ::selection { background: var(--forest); color: var(--signal); }
html.site .skip { background: var(--forest); color: var(--signal); }
html.site :focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
/* hidden means hidden, whatever display a class sets */
html.site [hidden] { display: none !important; }

.sv-wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gx); }
.sv-mono { font-family: var(--mono); font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.02em; text-transform: uppercase; }
.sv-money { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-mask { display: inline-block; overflow: clip; overflow-clip-margin: 0.08em; vertical-align: bottom; }
.sv-mask > span { display: inline-block; }

.sv-head { font-family: var(--display); font-weight: 900; font-size: clamp(3.25rem, 11vw, 9.5rem); line-height: 0.92; letter-spacing: -0.005em; text-transform: uppercase; text-wrap: balance; }

.sv-ruled { list-style: none; padding: 0; margin: 22px 0 0; border-bottom: 1px solid var(--rule-c); }
.sv-ruled li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0 10px; border-top: 1px solid var(--rule-c); }
.sv-ruled span { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; }
.sv-ruled b { font-weight: 600; text-align: right; }

/* ---------- The one button: forest ground, signal type ---------- */
.sv-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 56px; padding: 0 18px 0 22px; background: var(--forest); color: var(--signal); font-family: var(--mono); font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; border-radius: 2px; transition: transform 160ms var(--expo), background-color 200ms ease; }
.sv-btn svg { width: 20px; height: 20px; transition: transform 400ms var(--expo); }
.sv-btn:hover svg { transform: translateX(4px); }
.sv-btn:active { transform: scale(0.98); }
.sv-btn--s { min-height: 40px; padding: 0 14px; font-size: 0.75rem; }

/* ---------- The bar ---------- */
.sv-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 12px var(--gx); background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sv-bar__mark { margin-right: auto; font-family: var(--display); font-weight: 900; font-size: 1.5rem; line-height: 1; text-transform: uppercase; text-decoration: none; letter-spacing: 0.01em; }
.sv-bar__nav { display: flex; gap: 26px; font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; }
.sv-bar__nav a { text-decoration: none; padding-block: 8px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 300ms var(--expo); }
.sv-bar__nav a:hover { background-size: 100% 1px; }
@media (max-width: 760px) { .sv-bar__nav { display: none; } .sv-bar__mark { font-size: 1.25rem; } }

/* ---------- 01 Hero ---------- */
.sv-hero { position: relative; isolation: isolate; }
.sv-topo { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: clamp(300px, 36vw, 520px); color: var(--forest); opacity: 0.45; z-index: -1; }
.sv-hero__coord { display: flex; justify-content: space-between; gap: 16px; padding: 6px var(--gx) 0; }
.sv-hero__name { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(6.5rem, 25vw, 22rem); line-height: 0.86; letter-spacing: -0.012em; padding-inline: calc(var(--gx) - 0.04em); margin-top: 4px; }
.sv-hero__name .sv-mask { overflow-clip-margin: 0.06em; padding-top: 0.04em; }
.sv-hero__block {
  position: relative; margin-top: clamp(-40px, -2vw, -12px); padding: clamp(40px, 6vw, 88px) var(--gx) clamp(56px, 8vw, 120px);
  background-color: var(--marram);
  background-image: radial-gradient(color-mix(in srgb, var(--forest) 16%, transparent) 1px, transparent 1.3px);
  background-size: 7px 7px;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start;
}
.sv-hero__note { position: relative; z-index: 2; padding-top: clamp(40px, 8vw, 130px); max-width: 26rem; }
.sv-hero__lede { font-weight: 700; font-size: clamp(1.625rem, 2.6vw, 2.375rem); line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance; }
.sv-hero__facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 18px 0 28px; }
.sv-pins { position: relative; min-height: clamp(420px, 46vw, 660px); }
.sv-pin { position: absolute; margin: 0; padding: clamp(6px, 0.8vw, 10px) clamp(6px, 0.8vw, 10px) clamp(26px, 2.4vw, 34px); background: var(--sheet); box-shadow: 0 1px 1px rgb(20 24 15 / 0.12), 0 24px 44px -22px rgb(20 24 15 / 0.55); }
.sv-pin img { display: block; width: 100%; height: auto; }
.sv-pin figcaption { position: absolute; left: clamp(8px, 0.9vw, 12px); bottom: clamp(6px, 0.7vw, 9px); font-size: 0.6875rem; }
.sv-pin--main { left: 0; top: 0; width: 70%; rotate: -2.5deg; }
.sv-pin--b { right: 0; top: -4%; width: 30%; rotate: 3deg; }
.sv-pin--c { right: 3%; top: 52%; width: 27%; rotate: -4deg; }
@media (max-width: 860px) {
  .sv-hero__block { grid-template-columns: minmax(0, 1fr); margin-top: -8px; }
  .sv-hero__note { padding-top: 0; }
  .sv-pins { min-height: 0; aspect-ratio: 1 / 0.92; }
  .sv-pin--main { width: 78%; top: 4%; }
  .sv-pin--b { width: 36%; top: 0; }
  .sv-pin--c { width: 34%; top: auto; bottom: 0; right: 4%; }
}

/* ---------- The tape ---------- */
.sv-tape { background: var(--forest); color: var(--signal); overflow: clip; padding: 14px 0; }
.sv-tape__run { display: flex; gap: 22px; align-items: center; width: max-content; white-space: nowrap; }
.sv-tape__run i { font-style: normal; color: var(--marram); }

/* ---------- 02 The houses: a staggered log ---------- */
.sv-houses { padding-block: clamp(88px, 12vw, 176px) clamp(64px, 9vw, 128px); overflow-x: clip; }
.sv-log { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 56px); margin-top: clamp(40px, 6vw, 88px); align-items: start; }
.sv-entry__plate { margin: 0 0 20px; padding: clamp(6px, 0.7vw, 10px); background: var(--sheet); box-shadow: 0 1px 1px rgb(20 24 15 / 0.1), 0 28px 50px -30px rgb(20 24 15 / 0.6); rotate: var(--r, -1.5deg); }
.sv-entry:nth-child(3n+2) .sv-entry__plate { --r: 2deg; }
.sv-entry:nth-child(3n) .sv-entry__plate { --r: -2.5deg; }
.sv-entry__plate img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.sv-entry__name { margin-top: 6px; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 5.2vw, 4.75rem); line-height: 0.86; /* FYRREHUSET fits its column at every width: measured */ }
.sv-entry__lede { margin-top: 12px; max-width: 30ch; }
@media (max-width: 860px) {
  .sv-log { grid-template-columns: minmax(0, 1fr); gap: 72px; }
  .sv-entry__plate { max-width: 440px; }
}

/* ---------- 03 Rates: the rate log on the dark band ---------- */
.sv-rates { background: var(--forest); color: var(--paper); padding-block: clamp(80px, 11vw, 160px); overflow-x: clip; }
.sv-rates .sv-head { color: var(--signal); }
.sv-rate { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); margin-top: clamp(40px, 6vw, 80px); align-items: start; }
.sv-rate__t { width: 100%; border-collapse: collapse; }
.sv-rate__t thead th { font-family: var(--mono); font-size: 0.75rem; font-weight: 400; text-transform: uppercase; text-align: left; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--paper) 35%, transparent); }
.sv-rate__t thead th:last-child, .sv-rate__t td:last-child { text-align: right; }
.sv-rate__t tbody th { font-family: var(--display); font-weight: 900; text-transform: uppercase; text-align: left; font-size: clamp(2.5rem, 5.6vw, 5rem); line-height: 0.9; padding: 18px 0 14px; }
.sv-rate__t tbody td { font-family: var(--mono); padding: 18px 0 14px 16px; vertical-align: baseline; }
.sv-rate__t tbody tr { border-bottom: 1px solid color-mix(in srgb, var(--paper) 20%, transparent); }
.sv-rate__t td.sv-money { color: var(--signal); font-size: clamp(1.25rem, 2.2vw, 1.875rem); }
.sv-rate__note { padding: 4px 0 4px 20px; border-left: 1px solid var(--signal); font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.4; }
.sv-rate__extras { margin: 32px 0 0; border-top: 1px solid color-mix(in srgb, var(--paper) 30%, transparent); }
.sv-rate__extras div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); }
.sv-rate__extras dd { margin: 0; }
.sv-rate__rule { margin-top: 18px; color: color-mix(in srgb, var(--paper) 78%, transparent); }
@media (max-width: 860px) { .sv-rate { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .sv-rate__t tbody th { font-size: 2.25rem; }
  .sv-rate__t tbody td { padding-left: 10px; }
  .sv-rate__t td.sv-money { font-size: 1.0625rem; }
}

/* ---------- 04 How to book ---------- */
.sv-how { padding-block: clamp(88px, 12vw, 168px); overflow-x: clip; }
.sv-steps { list-style: none; padding: 0; margin: clamp(40px, 6vw, 80px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--forest); }
.sv-steps li { padding: 22px clamp(16px, 2vw, 32px) 8px 0; }
.sv-steps li + li { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--rule-c); }
.sv-steps__n { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(4.5rem, 8vw, 7rem); line-height: 0.8; -webkit-text-stroke: 1.5px var(--forest); color: transparent; }
.sv-steps h3 { margin-top: 18px; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.sv-steps p { margin-top: 8px; max-width: 34ch; }
@media (max-width: 860px) { .sv-steps { grid-template-columns: minmax(0, 1fr); } .sv-steps li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule-c); } }

/* ---------- 05 The enquiry: still, fast, legible ---------- */
.sv-enquire { background: var(--sheet); padding-block: clamp(72px, 10vw, 140px) clamp(64px, 9vw, 120px); outline: none; border-top: 2px solid var(--forest); }
.sv-enquire__head { margin-bottom: clamp(20px, 3vw, 40px); display: grid; gap: 4px; }
.sv-enquire__head .sv-head { font-size: clamp(3rem, 8vw, 6.5rem); }
.sv-cal-src { margin-top: 14px; display: flex; gap: 10px; align-items: center; }
.sv-cal-src::before { content: ""; width: 22px; height: 12px; background: repeating-linear-gradient(135deg, var(--forest) 0 1px, transparent 1px 4px); border: 1px solid var(--rule-c); }
/* ---------- 07 Footer ---------- */
.sv-foot { background: var(--forest); color: var(--paper); padding-block: 64px 32px; }
.sv-foot__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: end; }
.sv-foot__mark { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 9vw, 7rem); line-height: 0.82; color: var(--signal); }
.sv-foot__slots { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 32px; margin: 0; }
.sv-foot__slots dd { margin: 4px 0 0; font-size: 1rem; }
.sv-foot__sig { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); font-size: 0.8125rem; color: color-mix(in srgb, var(--paper) 82%, transparent); }
.sv-foot__sig a { color: inherit; }
.sv-sig { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; opacity: 0.85; }
.sv-sig span { font-size: 0.75rem; }
.sv-sig img { height: 14px; width: auto; }
@media (max-width: 700px) { .sv-foot__in { grid-template-columns: minmax(0, 1fr); } .sv-foot__slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; } }


/* ================= Motion ================= */
/* Arrival only, once on load (transform and opacity). The demo's scroll-linked reveals are not carried over: on a client site
   nothing may wait for a scroll to appear. html.still switches the rest off. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.still) {
    /* Arrival, once: the contour lines draw, the name rises out of its mask, the prints are pinned. */
    & .sv-topo path { stroke-dasharray: 1; animation: draw 1800ms var(--expo) both; }
    & .sv-topo path:nth-child(2n) { animation-delay: 120ms; }
    & .sv-topo path:nth-child(3n) { animation-delay: 240ms; }
    & .sv-hero__name .sv-mask > span { animation: rise 1100ms var(--expo) 60ms both; }
    & .sv-pin--main { animation: pin 1200ms var(--expo) 260ms both; }
    & .sv-pin--b { animation: pin 1100ms var(--expo) 420ms both; }
    & .sv-pin--c { animation: pin 1100ms var(--expo) 540ms both; }
  }
  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes rise { from { transform: translateY(102%); } }
  @keyframes pin { from { translate: 0 -40px; rotate: 0deg; opacity: 0; } }

}

/* ================= Phase 4: what the live data needs ================= */
/* A unit without a photo yet: its initial on the colour block, never a stand-in picture. */
.sv-entry__plate--none { display: grid; place-items: center; aspect-ratio: 1; background-color: var(--marram); background-image: radial-gradient(color-mix(in srgb, var(--forest) 16%, transparent) 1px, transparent 1.3px); background-size: 7px 7px; }
.sv-entry__plate--none span { font-family: var(--display); font-weight: 900; font-size: clamp(6rem, 12vw, 10rem); line-height: 1; text-transform: uppercase; }
.sv-entry__plate img { object-fit: cover; }
.sv-strip { display: flex; gap: 8px; margin: -8px 0 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.sv-strip img { flex: 0 0 auto; width: 30%; aspect-ratio: 1; object-fit: cover; scroll-snap-align: start; }
.sv-hl { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 4px; }
.sv-hl li::before { content: "✳ "; color: var(--earth); }
.sv-log:empty::before, .sv-wait { content: ""; display: block; min-height: 320px; }
.sv-hero__block--plain { grid-template-columns: minmax(0, 1fr); }
.sv-hero__block--plain .sv-hero__note { padding-top: 0; max-width: 40rem; }

/* The enquiry form: one column of plain fields beside the month calendar of the chosen unit. */
.sv-form { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.sv-form__col { display: grid; gap: 18px; min-width: 0; }
.sv-field { display: grid; gap: 6px; min-width: 0; }
.sv-field > span:first-child, .sv-field legend { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; }
.sv-field input, .sv-field select, .sv-field textarea { width: 100%; min-height: 48px; padding: 10px 12px; background: var(--paper); border: 1px solid color-mix(in srgb, var(--forest) 55%, transparent); border-radius: 2px; }
.sv-field textarea { min-height: 120px; resize: vertical; }
.sv-field input:focus-visible, .sv-field select:focus-visible, .sv-field textarea:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; }
.sv-field [aria-invalid="true"] { border-color: var(--err); border-width: 2px; }
.sv-field small { font-size: 0.8125rem; }
.sv-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.sv-err { color: var(--err); font-weight: 600; font-size: 0.875rem; }
.sv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sv-sum { padding: 16px 18px; background: var(--forest); color: var(--paper); display: grid; gap: 4px; }
.sv-sum b { font-family: var(--mono); font-weight: 500; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--signal); }
.sv-sum small { color: color-mix(in srgb, var(--paper) 82%, transparent); }
.sv-send { justify-self: start; border: 0; cursor: pointer; }
.sv-send[disabled] { opacity: 0.55; cursor: default; }
.sv-status { min-height: 1.5em; font-weight: 600; }
.sv-status.is-err { color: var(--err); }
.sv-note { font-size: 0.8125rem; max-width: 46ch; }

.sv-cal { display: grid; gap: 14px; }
.sv-cal__nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sv-cal__nav button { min-width: 44px; min-height: 44px; background: none; border: 1px solid var(--rule-c); border-radius: 2px; cursor: pointer; }
.sv-cal__nav button:disabled { opacity: 0.35; cursor: default; }
.sv-cal__m { font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; }
.sv-cal__g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.sv-cal__w { font-family: var(--mono); font-size: 0.6875rem; text-transform: uppercase; text-align: center; padding-bottom: 4px; }
.sv-cal__d { aspect-ratio: 1; min-height: 40px; display: grid; place-items: center; padding: 0; background: var(--paper); border: 1px solid transparent; border-radius: 2px; font-family: var(--mono); font-size: 0.875rem; cursor: pointer; }
.sv-cal__d:hover:not(:disabled) { border-color: var(--forest); }
.sv-cal__d:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; }
.sv-cal__d:disabled { opacity: 0.35; cursor: default; }
.sv-cal__d.is-busy { opacity: 1; color: color-mix(in srgb, var(--forest) 55%, transparent); text-decoration: line-through; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--forest) 22%, transparent) 0 1px, transparent 1px 5px); }
.sv-cal__d.is-in { background: var(--marram); }
.sv-cal__d.is-end { background: var(--forest); color: var(--signal); }
.sv-cal__key { display: flex; gap: 10px; align-items: center; }
.sv-cal__key::before { content: ""; width: 22px; height: 12px; background: repeating-linear-gradient(135deg, var(--forest) 0 1px, transparent 1px 4px); border: 1px solid var(--rule-c); }

.sv-done, .sv-closed { display: grid; gap: 18px; justify-items: start; padding: clamp(28px, 4vw, 48px); background: var(--paper); max-width: 44rem; border: 1px solid var(--rule-c); }
.sv-done h3, .sv-closed h3 { font-family: var(--display); font-weight: 900; font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 0.9; text-transform: uppercase; outline: none; }
@media (max-width: 860px) { .sv-form { grid-template-columns: minmax(0, 1fr); } .sv-form__cal { order: -1; } }
@media (max-width: 420px) { .sv-pair { grid-template-columns: minmax(0, 1fr); } }
/* Entries in a row end together: the ruled facts sit at the foot of each column, whatever the name's length. */
.sv-log { align-items: stretch; }
.sv-entry { display: flex; flex-direction: column; }
.sv-entry > .sv-ruled { margin-top: auto; padding-top: 22px; border-top: 0; }
.sv-entry > .sv-ruled li:first-child { border-top: 1px solid var(--rule-c); }