/* Hallmark · genre: editorial · macrostructure: Photographic · H6 hero knobs: image=full-bleed, caption=lower-left, text=below
 * theme: custom · vibe: "jää-sininen, kulta, hiljainen ylellisyys" · paper: oklch(97% 0.010 230) · accent: oklch(70% 0.13 78)
 * display: Cormorant Garamond · body: Switzer · axes: light / roman-serif / chromatic-gold ~78°
 * nav: N9 edge-aligned minimal · footer: Ft1 mast-headed · section head: S2 hanging · features: F3 spec sheet
 * cta: C1 outlined chip + C4 sticky bottom bar · enrichment: none (real photography)
 * tone: soft-luxury (inferred) · audience: Seinäjoki, all ages · use: reservation
 * studied: no · context: user-provided + inferred · pre-emit critique: P5 H4 E5 S5 R5 V4
 * slop test: 58/58 · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46)
 * chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30)
 * mobile: pass (34, 49, 50–57)
 */

/* ---------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

h1, h2, dt, dd, p, dl, figure, figcaption { margin: 0; }
dl { padding: 0; }

h1, h2, .foot__wordmark, .nav__wordmark {
  font-family: var(--font-display);
  font-style: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}

a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* -------------------------------------------------------------- a11y */

.skip {
  position: absolute;
  inset-inline-start: var(--space-md);
  inset-block-start: -4rem;
  z-index: var(--z-sticky);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
}
.skip:focus-visible { inset-block-start: var(--space-md); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  /* Never transitioned — the ring must be there the instant focus lands. */
}

/* --------------------------------------------------- N9 · nav (edge-aligned) */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--page-gutter);
}

.nav__wordmark {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.nav__cta { flex: none; }

/* ------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.btn--outline {
  border-color: var(--color-ink);
  background: transparent;
  color: var(--color-ink);
}

.btn--solid {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}

.btn--sm {
  min-height: 44px;
  padding-inline: var(--space-md);
}

/* One hover signal only — the fill inverts. No lift, no scale, no shadow. */
@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover,
  .btn--solid:hover {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-paper);
  }
}

.btn:active { transform: translateY(1px); }

.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------- typographic links */

/* C3 · typographic link — underline rides the text, not the padded box. */
.link-typo {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  color: var(--color-accent-deep);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--color-accent-deep);
  text-decoration-thickness: var(--rule-hair);
  text-underline-offset: 0.24em;
  transition: color var(--dur-short) var(--ease-out),
              text-decoration-color var(--dur-short) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .link-typo:hover {
    color: var(--color-ink);
    text-decoration-color: var(--color-ink);
  }
}

.link-quiet {
  color: var(--color-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--color-rule);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .link-quiet:hover {
    color: var(--color-ink);
    text-decoration-color: var(--color-accent-deep);
  }
}

/* ------------------------------------------- H6 · photographic folds */

.fold {
  position: relative;
  isolation: isolate;
}

.fold__img {
  width: 100%;
  height: clamp(26rem, 78dvh, 46rem);
  object-fit: cover;
  /* Tuned against the actual photograph: lands on the waves, keeps the
     bench clutter out of frame at desktop widths. */
  object-position: 40% 36%;
}

.fold--short .fold__img {
  height: clamp(22rem, 62dvh, 38rem);
  object-position: center 30%;
}

/* Scrim only where the caption sits, so the photograph stays the subject. */
.fold__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-3xl) var(--page-gutter) var(--space-lg);
  background: var(--scrim-photo);
  color: var(--color-paper);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  pointer-events: none;
}

.fold__caption-line { font-weight: 500; }
.fold__caption-line--sub { font-weight: 300; letter-spacing: 0.08em; }

/* The collage is not a full-bleed photograph — it is a plate. Contain it. */
.fold--contain {
  padding: var(--space-2xl) var(--page-gutter) var(--space-lg);
}

.fold--contain .fold__img {
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 44rem;
  object-fit: contain;
  margin-inline-end: auto;
}

.fold__caption--plain {
  position: static;
  padding: var(--space-md) 0 0;
  background: none;
  color: var(--color-muted);
}

/* ------------------------------------------------------------- text bands */

.band {
  padding-inline: var(--page-gutter);
}

/* Deliberately uneven vertical rhythm — sections are not equally padded. */
.band--intro    { padding-block: var(--space-2xl) var(--space-3xl); }
.band--services { padding-block: var(--space-2xl) var(--space-3xl); }
.band--book     { padding-block: var(--space-3xl) var(--space-4xl); }

.band__title {
  max-width: 18ch;
  margin-block-end: var(--space-lg);
  font-size: var(--text-display-s);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.band__lede {
  max-width: var(--measure);
  margin-block-end: var(--space-xl);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.62;
}

.band__lede--tight { margin-block-end: var(--space-lg); }

/* --------------------------------------------- S2 · hanging section head */

.head-hang {
  padding-block-end: var(--space-xl);
}

.head-hang__title {
  max-width: 16ch;
  font-size: var(--text-2xl);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.012em;
}

/* ------------------------------------------ F3 · tabular spec sheet */

.spec {
  max-width: 54rem;
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs);
  padding-block: var(--space-lg);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.spec__key {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.2;
}

.spec__val {
  max-width: 52ch;
  color: var(--color-muted);
  font-size: var(--text-base);
}

.spec__note {
  margin-block-start: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

@media (min-width: 40rem) {
  .spec__row {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: baseline;
  }
}

/* ------------------------------------------------------------ contact list */

.contact {
  max-width: 44rem;
  margin-block-start: var(--space-2xl);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
}

.contact__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xs);
  padding-block: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
}

.contact__key {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact__val { font-size: var(--text-base); }

@media (min-width: 40rem) {
  .contact__row {
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: baseline;
  }
}

/* ---------------------------------------------- Ft1 · mast-headed footer */

.foot {
  padding: var(--space-2xl) var(--page-gutter) calc(var(--space-3xl) + env(safe-area-inset-bottom));
  border-block-start: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}

.foot__wordmark {
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}

.foot__tagline {
  margin-block-start: var(--space-xs);
  color: var(--color-ink-2);
  font-size: var(--text-base);
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  margin-block-start: var(--space-lg);
  font-size: var(--text-sm);
}

.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
}

.foot__sep { color: var(--color-rule); }

.foot__addr {
  margin-block-start: var(--space-md);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

/* -------------------------------------------- C4 · sticky booking bar */

.cta-sticky {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--page-gutter);
  padding-block-end: calc(var(--space-xs) + env(safe-area-inset-bottom));
  background: var(--color-paper);
  box-shadow: var(--shadow-hairline);
  transition: transform var(--dur-long) var(--ease-out);
}

.cta-sticky[data-visible="false"] {
  transform: translateY(105%);
  visibility: hidden;
}

.cta-sticky[data-visible="true"] {
  transform: translateY(0);
  visibility: visible;
}

.cta-sticky__note {
  color: var(--color-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 26rem) {
  .cta-sticky__note { display: none; }
  .cta-sticky { justify-content: stretch; }
  .cta-sticky .btn { flex: 1; }
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .cta-sticky[data-visible="false"] { transform: none; opacity: 0; }
  .cta-sticky[data-visible="true"]  { transform: none; opacity: 1; }
  .btn:hover, .btn:active { transform: none; }
}