/* The holiday-home look: everything here is scoped to .site[data-look="holiday"]. Appended after base.css (bun run --filter @platform/sections css).

   A house rented to guests, made of the paper of a stay: the key tag on its
   string (buff card, brass eyelet, red string, the house's name written on
   it), the first page of the house book on the kitchen table and the lined
   pages of the guestbook. No stock photos: until the owner uploads their
   own, the paper carries the facts. The owner's colour (--primary, a deep
   sea-green until they pick one) fills the buttons and the house book's
   cloth spine; text on it is always --on-primary. The ground is a light
   stone, never cream. */

.site[data-look="holiday"] {
  --h-ink: var(--text);
  --h-muted: var(--muted);
  --h-rule: var(--border);
  --h-shadow: 0 1px 1px rgb(24 28 26 / 0.08), 0 22px 38px -24px rgb(24 28 26 / 0.45);
  --fs-base: 1.075rem;
  --fs-lead: clamp(1.12rem, 1.04rem + 0.35vw, 1.28rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.2vw, 3.3rem);
  --section-pad: clamp(3.5rem, 8vw, 6.5rem);
  --wrap: 72rem;
  background: var(--bg);
}
.site[data-look="holiday"] main > .s + .s { border-top: 0; }
.site[data-look="holiday"] :is(h1, h2) { font-weight: 600; line-height: 1.06; letter-spacing: -0.012em; text-wrap: balance; }
.site[data-look="holiday"] h2 { font-size: var(--fs-h2); margin: 0 0 0.5em; }
.site[data-look="holiday"] :is(p, li, dd) { hyphens: auto; }
.site[data-look="holiday"] :is(.h-k, .h-book-kind, .h-form-kind, .h-guestbook-kind) { font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.site[data-look="holiday"] .btn { border-radius: 0.4rem; min-height: 3rem; padding-inline: 1.5rem; font-weight: 600; }
.site[data-look="holiday"] .cta-alt { text-underline-offset: 0.25em; }
.site[data-look="holiday"] :is(a, button, .btn, input, textarea):focus-visible { outline: 3px solid var(--h-ink); outline-offset: 3px; }
.site[data-look="holiday"] .site-header { background: var(--bg); border-bottom: 1px solid var(--h-rule); }
.site[data-look="holiday"] .brand { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem); letter-spacing: -0.01em; hyphens: manual; }
.site[data-look="holiday"] .site-header .btn { min-height: 2.6rem; padding-inline: 1.05rem; font-size: 0.95rem; }

/* --- Hero: the key tag on its string. ------------------------------------ */
.site[data-look="holiday"] .h-hero { padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 5.5rem); overflow: hidden; }
.site[data-look="holiday"] .h-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 52rem) { .site[data-look="holiday"] .h-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(19rem, 0.9fr); min-height: min(38rem, calc(100svh - 9rem)); } }
.site[data-look="holiday"] .h-headline { font-family: var(--font-heading); font-size: clamp(2.3rem, 1.4rem + 3.3vw, 4.2rem); margin: 0 0 0.45em; max-width: 15ch; }
.site[data-look="holiday"] .h-lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 33rem; margin: 0; color: var(--h-muted); hyphens: manual; }
.site[data-look="holiday"] .h-actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.site[data-look="holiday"] .h-hero-art { position: relative; display: flex; justify-content: center; align-items: flex-start; }
.site[data-look="holiday"] .h-hero-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.3rem; }
.site[data-look="holiday"] .h-hero.has-photo .h-hero-art { display: grid; }
.site[data-look="holiday"] .h-hero.has-photo .h-tag-hang { position: relative; margin: -4.5rem 0 0 auto; width: min(80%, 19rem); }

/* The tag hangs from a red string over a hook; the key on the same string. */
.site[data-look="holiday"] .h-tag-hang { position: relative; width: min(86%, 24rem); padding-top: 4.2rem; transform: rotate(-4deg); transform-origin: 50% 0; filter: drop-shadow(0 18px 16px rgb(24 28 26 / 0.16)); }
/* The string loops from the hook down through the eyelet, in front of the card. */
.site[data-look="holiday"] .h-string { position: absolute; z-index: 2; left: 50%; top: 0; width: 1.5rem; height: 6.05rem; margin-left: -0.75rem; border: 2px solid var(--string); border-bottom: 0; border-radius: 50% 50% 0 0 / 22% 22% 0 0; }
.site[data-look="holiday"] .h-string::before { content: ''; position: absolute; left: 50%; top: -0.45rem; width: 0.8rem; height: 0.8rem; margin-left: -0.4rem; border-radius: 50%; background: var(--h-ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); }
/* The door key on the same hook, hanging in front of the tag's shoulder. */
.site[data-look="holiday"] .h-key { position: absolute; z-index: 3; left: calc(50% + 0.15rem); top: 0.1rem; width: 2.3rem; height: auto; color: #6f685c; transform: rotate(-32deg); transform-origin: 30px 6px; filter: drop-shadow(1px 2px 1px rgb(0 0 0 / 0.25)); }
.site[data-look="holiday"] .h-tag {
  position: relative; z-index: 1; padding: 3.9rem clamp(1.3rem, 3vw, 1.9rem) 1.7rem; text-align: center;
  background: var(--tag); color: var(--on-tag);
  clip-path: polygon(22% 0, 78% 0, 100% 13%, 100% 100%, 0 100%, 0 13%);
  box-shadow: inset 0 0 0 1px var(--tag-edge);
}
/* The fibre of the card: a faint grain, no image. */
.site[data-look="holiday"] .h-tag::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgb(120 96 50 / 0.035) 0 1px, transparent 1px 5px); pointer-events: none; }
.site[data-look="holiday"] .h-eyelet { position: absolute; left: 50%; top: 1.15rem; width: 1.55rem; height: 1.55rem; margin-left: -0.775rem; border-radius: 50%; background: radial-gradient(circle, var(--bg) 0 0.32rem, var(--eyelet) 0.34rem 0.62rem, transparent 0.64rem), radial-gradient(circle at 40% 35%, #e1c47a, var(--eyelet)); }
.site[data-look="holiday"] .h-tag-name { position: relative; font-family: var(--font-heading); font-weight: 600; line-height: 1.04; margin: 0 0 0.9rem; text-wrap: balance; color: var(--on-tag); }
.site[data-look="holiday"] .h-name-l { font-size: clamp(2.5rem, 1.6rem + 3.2vw, 3.6rem); }
.site[data-look="holiday"] .h-name-m { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.8rem); }
.site[data-look="holiday"] .h-name-s { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.05rem); }
.site[data-look="holiday"] .h-tag-line { position: relative; margin: 0; padding-top: 0.8rem; border-top: 1px dashed var(--tag-edge); color: var(--tag-muted); font-size: 0.98rem; font-variant-numeric: tabular-nums; }

/* --- The house: text, and the first page of the house book. -------------- */
.site[data-look="holiday"] .h-about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 52rem) { .site[data-look="holiday"] .h-about-grid { grid-template-columns: minmax(0, 1.25fr) minmax(17rem, 0.75fr); } }
.site[data-look="holiday"] .h-about-body { max-width: 38rem; font-size: var(--fs-base); line-height: 1.65; }
.site[data-look="holiday"] .h-about-photo { display: block; width: 100%; margin-top: 2rem; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0.3rem; }
.site[data-look="holiday"] .h-book {
  position: relative; padding: 1.6rem 1.6rem 1.4rem 2.4rem; background: var(--page); color: var(--on-page);
  box-shadow: var(--h-shadow); border-radius: 0 0.25rem 0.25rem 0;
}
/* The cloth spine of the book, in the owner's colour. */
.site[data-look="holiday"] .h-book::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0.85rem; background: var(--primary); }
.site[data-look="holiday"] .h-book-kind { color: var(--page-muted); margin: 0 0 0.35rem; }
.site[data-look="holiday"] .h-book-name { font-family: var(--font-heading); font-weight: 600; font-size: 1.45rem; line-height: 1.15; margin: 0 0 1rem; padding-bottom: 0.8rem; border-bottom: 2px solid var(--page-rule); overflow-wrap: anywhere; }
.site[data-look="holiday"] .h-book-rows { margin: 0; display: grid; gap: 0; }
.site[data-look="holiday"] .h-book-rows > div { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--page-rule); }
.site[data-look="holiday"] .h-book-rows dt { color: var(--page-muted); font-size: 0.92rem; }
.site[data-look="holiday"] .h-book-rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* --- Prices: the owner's lines, dotted to the amount. --------------------- */
.site[data-look="holiday"] .h-prices-band { background: var(--surface); }
.site[data-look="holiday"] .h-prices-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 52rem) { .site[data-look="holiday"] .h-prices-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
.site[data-look="holiday"] .h-intro { color: var(--h-muted); font-size: var(--fs-lead); line-height: 1.55; margin: 0; max-width: 30rem; }
.site[data-look="holiday"] .h-prices { list-style: none; margin: 0; padding: 0; }
.site[data-look="holiday"] .h-price { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--h-rule); }
.site[data-look="holiday"] .h-price:first-child { border-top: 1px solid var(--h-rule); }
.site[data-look="holiday"] .h-price-body { flex: 1; min-width: 0; display: grid; gap: 0.2rem; }
.site[data-look="holiday"] .h-price-name { font-family: var(--font-body); font-size: 1.1rem; font-weight: 600; line-height: 1.3; margin: 0; letter-spacing: 0; text-transform: none; }
.site[data-look="holiday"] .h-price-note { color: var(--h-muted); font-size: 0.95rem; line-height: 1.45; }
.site[data-look="holiday"] .h-price-amount { flex: none; font-family: var(--font-heading); font-weight: 600; font-size: 1.3rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Photos: the owner's own. --------------------------------------------- */
.site[data-look="holiday"] .h-photos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site[data-look="holiday"] .h-photos li:first-child { grid-column: 1 / -1; }
@media (min-width: 52rem) { .site[data-look="holiday"] .h-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site[data-look="holiday"] .h-photos li:first-child { grid-column: span 2; grid-row: span 2; } }
.site[data-look="holiday"] .h-photo { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.25rem; }

/* --- The guestbook: a page with a red margin line, what guests wrote. -- */
.site[data-look="holiday"] .h-guestbook { position: relative; padding: 2.6rem clamp(1.3rem, 4vw, 3rem) 2.2rem calc(clamp(1.3rem, 4vw, 3rem) + 1.2rem); background: var(--page); color: var(--on-page); box-shadow: var(--h-shadow); border-radius: 0.2rem; }
.site[data-look="holiday"] .h-guestbook::before { content: ''; position: absolute; top: 0; bottom: 0; left: clamp(1.3rem, 4vw, 3rem); width: 0; border-left: 2px solid rgb(196 74 60 / 0.55); }
.site[data-look="holiday"] .h-guestbook-kind { position: absolute; top: 1rem; left: calc(clamp(1.3rem, 4vw, 3rem) + 1.2rem); color: var(--page-muted); }
.site[data-look="holiday"] .h-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
@media (min-width: 52rem) { .site[data-look="holiday"] .h-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); } }
.site[data-look="holiday"] .h-entry { padding-bottom: 1.2rem; border-bottom: 1px solid var(--page-line); }
.site[data-look="holiday"] .h-entry blockquote { margin: 0; }
.site[data-look="holiday"] .h-entry blockquote p { margin: 0 0 0.6rem; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.28rem); line-height: 1.5; hyphens: manual; }
.site[data-look="holiday"] .h-entry-by { margin: 0; color: var(--page-muted); }
.site[data-look="holiday"] .h-entry-by::before { content: '— '; }

/* --- Asking for dates: the request card. ---------------------------------- */
.site[data-look="holiday"] .h-request-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 52rem) { .site[data-look="holiday"] .h-request.has-form .h-request-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.site[data-look="holiday"] .h-lines { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.site[data-look="holiday"] .h-lines li { display: grid; gap: 0.15rem; }
.site[data-look="holiday"] .h-k { color: var(--h-muted); }
.site[data-look="holiday"] .h-lines a { font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }
.site[data-look="holiday"] .h-form { position: relative; padding: 2.4rem clamp(1.3rem, 4vw, 2.2rem) 1.8rem; background: var(--page); color: var(--on-page); box-shadow: var(--h-shadow); border-top: 0.45rem solid var(--primary); border-radius: 0 0 0.3rem 0.3rem; display: grid; gap: 0.35rem; }
.site[data-look="holiday"] .h-form-kind { position: absolute; top: 0.9rem; left: clamp(1.3rem, 4vw, 2.2rem); margin: 0; color: var(--page-muted); }
.site[data-look="holiday"] .h-form label { font-weight: 600; font-size: 0.95rem; margin-top: 0.55rem; }
.site[data-look="holiday"] .h-form :is(input, textarea) { width: 100%; }
.site[data-look="holiday"] .h-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.site[data-look="holiday"] .h-dates > div { display: grid; gap: 0.35rem; min-width: 0; }
.site[data-look="holiday"] .h-guests { max-width: 8rem; }
.site[data-look="holiday"] .h-form .btn { margin-top: 0.9rem; justify-self: start; }
.site[data-look="holiday"] .h-not-booked { margin: 0.4rem 0 0; color: var(--page-muted); font-size: 0.92rem; }

/* --- The registration number, closing every page. ------------------------- */
.site[data-look="holiday"] .h-registration { margin: 0; padding: 1rem 0; border-top: 1px solid var(--h-rule); color: var(--h-muted); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.site[data-look="holiday"] .h-registration .wrap { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .site[data-look="holiday"] .h-tag-hang { animation: h-sway 5s ease-in-out 0.4s 1 both; }
  @keyframes h-sway { 0% { transform: rotate(-7deg); } 35% { transform: rotate(-2.5deg); } 70% { transform: rotate(-5deg); } 100% { transform: rotate(-4deg); } }
}