/* ---------------------------------------------------------------------------
   horn-apartments.ch — design system
   Palette: alpine night (ink), snow-warm paper, glacier accent.
--------------------------------------------------------------------------- */

:root {
  /* The original site's green/terracotta palette, applied with restraint:
     a warm cream base, with sage and terracotta reserved for key moments
     (hero panel, apartment band, buttons) and pine green for text. */
  --ink: #223528;           /* pine — text and dark surfaces */
  --ink-soft: #35483c;
  --paper: #f7f1ea;         /* warm cream base */
  --paper-deep: #efe4d8;
  --card: #fbf7f2;          /* warm white for cards */
  --cream: #ecd3c2;         /* light terracotta for text on dark/sage */
  --terra: #c6947b;         /* the original terracotta, for buttons/badges */
  --accent: #a8613c;        /* deep clay, for accents on light surfaces */
  --accent-deep: #8c4e2f;
  --sage: #739485;
  --sage-soft: #e5ece6;
  --sage-deep: #5c7a6b;
  --line: rgba(20, 42, 32, 0.14);
  --max: 72rem;
  --radius: 18px;
  --shadow-soft: 0 10px 30px -12px rgba(18, 38, 28, 0.25);
  --shadow-lift: 0 24px 50px -20px rgba(18, 38, 28, 0.35);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em; }
a { color: inherit; }

.container {
  width: min(100% - 2.5rem, var(--max));
  margin-inline: auto;
}

section { scroll-margin-top: 4.5rem; }

.kicker {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.section-intro {
  max-width: 46rem;
  font-size: 1.125rem;
  color: var(--ink-soft);
  margin-bottom: 2.5rem;
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn svg { width: 1rem; height: 1rem; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-light {
  background: var(--terra);
  color: var(--ink);
}
.btn-light:hover { box-shadow: var(--shadow-soft); }

.btn-sage {
  background: var(--sage);
  color: var(--ink);
}
.btn-sage:hover { box-shadow: var(--shadow-soft); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: var(--paper); box-shadow: var(--shadow-soft); }

/* Header ----------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  color: #fff;
  transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.site-header.scrolled {
  background: rgba(198, 148, 123, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}

.header-inner {
  width: min(100% - 2.5rem, var(--max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.9rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.brand-mark { width: 1.6rem; height: 1.6rem; }
.brand-name { font-size: 1.02rem; white-space: nowrap; }
.brand-tld { opacity: 0.6; }
.brand-dash { opacity: 0.6; }

.site-nav {
  display: flex;
  gap: 1.4rem;
  margin-left: auto;
}
.site-nav a {
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.site-nav a:hover { opacity: 1; }

/* Hamburger toggle (mobile only, requires JS) */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.45rem;
  margin-left: 0.25rem;
  cursor: pointer;
  color: inherit;
}
.nav-toggle span {
  display: block;
  width: 1.35rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle span + span { margin-top: 5px; }
.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 47rem) {
  .js .nav-toggle { display: block; margin-left: auto; }

  /* Without JS the nav wraps below the brand and stays usable; with JS it
     collapses into a dropdown behind the hamburger. */
  .site-nav { flex-wrap: wrap; margin-left: 0; width: 100%; }

  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    flex-direction: column;
    gap: 0;
    padding: 0.25rem 1.25rem 1rem;
    background: rgba(198, 148, 123, 0.97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-soft);
    visibility: hidden;
    opacity: 0;
    translate: 0 -10px;
    transition: opacity 0.3s ease, translate 0.3s ease, visibility 0.3s;
  }
  .js .menu-open .site-nav {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
  }
  .js .site-nav a {
    color: var(--ink);
    opacity: 1;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid rgba(20, 42, 32, 0.16);
  }
  .js .site-nav a:last-child { border-bottom: 0; }

  /* While the menu is open the bar itself goes solid terracotta so the
     dropdown and header read as one surface. */
  .site-header.menu-open {
    background: rgba(198, 148, 123, 0.97);
    color: var(--ink);
  }
}

/* Hero ------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: end center;
  color: #fff;
  isolation: isolate;
  overflow: clip;
  /* The ground the photo fades in from. */
  background: #000;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-media img {
  width: 100%;
  height: 115%;
  object-fit: cover;
  object-position: 50% 35%;
  will-change: transform;
  animation:
    hero-zoom 10s ease-out forwards,
    hero-fade 3s ease-out both;
}
@keyframes hero-zoom {
  from { scale: 1.18; }
  to   { scale: 1; }
}
@keyframes hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Vignette: keeps the centre clear and darkens edges and corners */
    radial-gradient(ellipse 130% 100% at 50% 45%, transparent 35%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.92) 100%),
    linear-gradient(to bottom, rgba(18,38,28,0.45), rgba(18,38,28,0.05) 35%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.65)),
    radial-gradient(ellipse at 50% 90%, rgba(0,0,0,0.35), transparent 60%);
}

.hero-content {
  text-align: center;
  padding: 0 1.25rem;
  margin: 7rem auto 6.5rem;
  max-width: 52rem;
}
.hero-kicker {
  color: var(--cream);
  text-shadow: 0 1px 12px rgba(18,38,28,0.5);
}
.hero h1 {
  color: var(--cream);
  /* Three layers: a tight shadow to cut each letter out of the rock texture,
     a mid halo for contrast, and the original wide ambient glow. */
  text-shadow:
    0 1px 2px rgba(18,38,28,0.55),
    0 3px 10px rgba(18,38,28,0.45),
    0 6px 30px rgba(18,38,28,0.4);
  margin-bottom: 0.4em;
}
.hero-sub {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  max-width: 36rem;
  margin-inline: auto;
  margin-bottom: 2.2rem;
  text-shadow: 0 1px 14px rgba(18,38,28,0.6);
  color: rgba(255,255,255,0.92);
}

/* The text holds back while the matterhorn fades in and zooms, then rises. */
.hero-content > * {
  opacity: 0;
  translate: 0 24px;
  animation: rise 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) 1s forwards;
}
.hero-content > :nth-child(2) { animation-delay: 1.12s; }
.hero-content > :nth-child(3) { animation-delay: 1.24s; }
.hero-content > :nth-child(4) { animation-delay: 1.38s; }
@keyframes rise {
  to { opacity: 1; translate: 0 0; }
}

.scroll-cue {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  translate: -50% 0;
  width: 1.7rem;
  height: 2.8rem;
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 999px;
  display: grid;
  justify-items: center;
  padding-top: 0.5rem;
  opacity: 0;
  animation: rise 1s 1.8s forwards;
}
.scroll-cue span {
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: #fff;
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55%      { transform: translateY(10px); opacity: 0.2; }
}

/* Hero variant for subpages (house manual): full height like the homepage,
   just without a CTA button under the subtitle. ---------------------------- */

.hero--page .hero-sub {
  margin-bottom: 0.5rem;
}

/* 404 page: same hero treatment, with an oversized status code */
.hero--404 h1 {
  font-size: clamp(4.5rem, 16vw, 9rem);
  margin-bottom: 0.05em;
}
.hero--404 .hero-sub {
  margin-bottom: 2.2rem;
}
.hero-404-langs {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2.4rem;
  text-shadow: 0 1px 10px rgba(18, 38, 28, 0.5);
}

/* House manual ------------------------------------------------------------ */

.manual {
  /* Sage section, same treatment as the apartment band on the homepage */
  background: var(--sage);
  padding: 4rem 0 5.5rem;
}
.manual-inner {
  max-width: 46rem;
}

.manual-card {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0.5rem 1.5rem;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.7rem 1.8rem;
}
.manual-card + .manual-card { margin-top: 1.4rem; }

.manual-card h2 {
  font-size: 1.4rem;
  margin: 0.55rem 0 0.45em;
}
.manual-body p {
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.manual-body p:last-child { margin-bottom: 0; }

.manual-icon {
  display: inline-grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 18px;
  background: var(--cream);
  color: var(--accent-deep);
}
.manual-icon svg { width: 3rem; height: 3rem; }

/* On small screens the chip sits beside the heading in one row, and the
   paragraphs flow underneath across the full card width. */
@media (max-width: 34rem) {
  .manual-card {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.9rem 1rem;
    padding: 1.4rem 1.4rem 1.5rem;
  }
  .manual-icon { width: 3.5rem; height: 3.5rem; border-radius: 14px; }
  .manual-icon svg { width: 2.2rem; height: 2.2rem; }
  .manual-body { display: contents; }
  .manual-card h2 { margin: 0; }
  .manual-body p { grid-column: 1 / -1; margin: 0; }
}

/* Highlights ------------------------------------------------------------- */

.highlights {
  padding: 5.5rem 0 3.5rem;
}
.highlight-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.2rem 2.5rem;
}
.highlight-icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: var(--sage-soft);
  color: var(--accent);
  margin-bottom: 1rem;
}
.highlight-icon svg { width: 1.5rem; height: 1.5rem; }
.highlight h3 { font-size: 1.12rem; font-family: var(--font-body); font-weight: 600; margin-bottom: 0.35em; }
.highlight p { color: var(--ink-soft); font-size: 0.97rem; margin: 0; }

/* Apartments ------------------------------------------------------------- */

.apartments {
  /* Sage section, as on the original site's apartment blocks */
  background: var(--sage);
  padding: 4.5rem 0 5.5rem;
}
.apartments .kicker { color: var(--cream); }
.apartments .section-intro { color: var(--ink); }

.apt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
  gap: 2rem;
}

.apt-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--radius);
  overflow: clip;
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.35s ease;
}
.apt-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.apt-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: clip;
}
.apt-media img {
  /* Absolutely positioned so portrait photos can't stretch the 4:3 frame */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.apt-card:hover .apt-media img { scale: 1.06; }

.apt-number {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 560;
  color: #fff;
  background: rgba(18,38,28,0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
}

.apt-view-badge {
  position: absolute;
  bottom: 0.9rem;
  left: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(230, 237, 231, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}
.apt-view-badge svg { width: 0.95rem; height: 0.95rem; color: var(--accent); }

.apt-photos {
  position: absolute;
  bottom: 0.9rem;
  right: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: rgba(18,38,28,0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}
.apt-photos svg { width: 1rem; height: 1rem; }

.apt-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem 1.5rem 1.6rem;
}
.apt-meta {
  display: flex;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.apt-body h3 { margin-bottom: 0.15em; }
.apt-tagline {
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0.7em;
}
.apt-desc {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 1.3em;
}
.apt-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.apt-cta-note {
  font-size: 0.8rem;
  color: rgba(18,38,28,0.5);
}

/* House ------------------------------------------------------------------ */

/* Same treatment as the contact section — matterhorn photo under the sage
   wash — framed lower on the image so the two sections don't read as twins. */
.house {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: #fff;
  padding: 5.5rem 0;
}
.house-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.house-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchored near the peak so the tip stays in frame even on wide, short
     sections (laptops), where cover crops the image vertically. */
  object-position: center 35%;
}
.house-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(74, 100, 87, 0.8);
}
.house .kicker { color: var(--cream); }
.house-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
}
.house-text p:last-child {
  color: rgba(255,255,255,0.85);
  font-size: 1.08rem;
  margin: 0;
}
.house-figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: clip;
  box-shadow: var(--shadow-lift);
  aspect-ratio: 3 / 4;
  max-height: 30rem;
}
.house-figure img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 55rem) {
  .house-inner { grid-template-columns: 1fr; }
  .house-figure { aspect-ratio: 4 / 3; }
}

/* Location --------------------------------------------------------------- */

.location { padding: 5.5rem 0; }

.facts {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.2rem;
}
.facts li {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-soft);
}
.fact-value {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 560;
  color: var(--accent);
  line-height: 1.1;
}
.fact-label {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.map-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: clip;
  box-shadow: var(--shadow-soft);
}
.map-wrap iframe {
  display: block;
  width: 100%;
  height: clamp(18rem, 45vw, 26rem);
  border: 0;
  filter: saturate(0.85);
}
.map-cta {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(247,241,234,0.92);
}

/* Contact ---------------------------------------------------------------- */

.contact {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: #fff;
  padding: 6rem 0;
  text-align: center;
}
.contact-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.contact-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.contact-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(74, 100, 87, 0.8);
}
.contact .kicker { color: var(--cream); }
.contact-inner { max-width: 38rem; }
.contact p:not(.kicker) {
  color: rgba(255,255,255,0.85);
  margin-bottom: 2rem;
}

/* Footer ----------------------------------------------------------------- */

.site-footer {
  background: #121412;
  color: var(--paper);
  padding: 3.5rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 2rem;
  padding-bottom: 2.5rem;
}
.site-footer h4 {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 0.7rem;
}
.site-footer p { margin: 0; color: rgba(247,241,234,0.8); font-size: 0.95rem; }
.site-footer a { color: inherit; text-decoration-color: rgba(247,241,234,0.4); }
.site-footer a[aria-current="page"] { color: #fff; font-weight: 600; }
.footer-bottom {
  border-top: 1px solid rgba(247,241,234,0.15);
  padding-top: 1.5rem;
}
.footer-bottom p { font-size: 0.85rem; color: rgba(247,241,234,0.55); margin: 0; }

/* Apartment photo gallery ------------------------------------------------- */

/* <dialog> slideshow. On small screens it goes edge to edge — every pixel
   for the photo; from tablet size up it becomes a floating window with the
   page visible behind the translucent backdrop. The track is a scroll-snap
   strip, so swiping works natively on touch screens; the arrow buttons and
   keyboard handling in main.js drive the same scroll position. */
.gallery {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: auto;
  /* Keep the bar and photos clear of notches and home indicators. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  border: 0;
  overflow: clip;
  background: #121412; /* same black as the footer */
  color: var(--paper);
  box-shadow: var(--shadow-lift);
  display: none;
  flex-direction: column;
  overscroll-behavior: contain;
}
@media (min-width: 720px) and (min-height: 600px) {
  .gallery {
    width: min(64rem, 100vw - 4rem);
    height: min(46rem, 100dvh - 4rem);
    padding: 0;
    border-radius: var(--radius);
  }
}
.gallery[open] { display: flex; }

/* Open/close animation: the window pops in with a small rise-and-scale, the
   backdrop fades. Uses @starting-style + allow-discrete so the native
   <dialog> open/close (incl. Esc) animates both ways; browsers without
   support simply open instantly. */
@media (prefers-reduced-motion: no-preference) {
  .gallery {
    opacity: 0;
    scale: 0.94;
    translate: 0 14px;
    transition:
      opacity 0.22s ease,
      scale 0.28s cubic-bezier(0.2, 0.6, 0.2, 1),
      translate 0.28s cubic-bezier(0.2, 0.6, 0.2, 1),
      display 0.28s allow-discrete,
      overlay 0.28s allow-discrete;
  }
  .gallery[open] {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
  @starting-style {
    .gallery[open] {
      opacity: 0;
      scale: 0.94;
      translate: 0 14px;
    }
  }
}
.gallery::backdrop {
  background: rgba(8, 10, 8, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
@media (prefers-reduced-motion: no-preference) {
  .gallery::backdrop {
    opacity: 0;
    transition:
      opacity 0.28s ease,
      display 0.28s allow-discrete,
      overlay 0.28s allow-discrete;
  }
  .gallery[open]::backdrop { opacity: 1; }
  @starting-style {
    .gallery[open]::backdrop { opacity: 0; }
  }
}
/* Keep the page from scrolling behind an open gallery. */
body:has(.gallery[open]) { overflow: hidden; }

.gallery-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0.9rem;
}
@media (min-width: 720px) and (min-height: 600px) {
  .gallery-bar { padding: 0.9rem 1.1rem; }
}
.gallery-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 560;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gallery-count {
  margin: 0;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: rgba(247, 241, 234, 0.75);
}
.gallery-close {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(247, 241, 234, 0.12);
  color: var(--paper);
  cursor: pointer;
}
.gallery-close:hover { background: rgba(247, 241, 234, 0.24); }
.gallery-close svg { width: 1.2rem; height: 1.2rem; }

.gallery-track {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }

.gallery-slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  padding: 0 0 0.6rem;
  object-fit: contain;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
@media (min-width: 720px) and (min-height: 600px) {
  .gallery-slide { padding: 0 1rem 1rem; }
}

.gallery-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(247, 241, 234, 0.12);
  color: var(--paper);
  cursor: pointer;
}
.gallery-nav:hover { background: rgba(247, 241, 234, 0.24); }
.gallery-nav svg { width: 1.4rem; height: 1.4rem; }
.gallery-prev { left: 0.8rem; }
.gallery-next { right: 0.8rem; }
/* On touch screens swiping is the primary gesture; keep the arrows out of
   the photo's way. */
@media (pointer: coarse) {
  .gallery-nav { display: none; }
}

/* Parallax depth ---------------------------------------------------------- */

/* Photo layers marked data-parallax are driven from main.js: each image
   drifts inside its clipped frame at its own speed while the page scrolls.
   The overscan keeps the drift from ever exposing the frame's edges, and
   only applies when the JS that moves the image is actually running. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-parallax] > img {
    /* Overscan must stay ≥ the largest data-parallax strength (60px),
       or the drift exposes the frame's edges. */
    height: calc(100% + 8rem);
    margin-top: -4rem;
    will-change: transform;
  }
  .js .apt-media[data-parallax] > img {
    /* Card photos drift less (24px), so a smaller overscan keeps the
       cover-crop from zooming the photo too far in. */
    height: calc(100% + 4rem);
    margin-top: -2rem;
  }
}

/* Scroll reveal ---------------------------------------------------------- */

/* Hidden state only applies when JS is running (html.js), so content is
   always visible without JavaScript. */
.js .reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.8s cubic-bezier(0.2, 0.6, 0.2, 1) var(--d, 0ms),
              translate 0.8s cubic-bezier(0.2, 0.6, 0.2, 1) var(--d, 0ms);
}
.js .reveal.in {
  opacity: 1;
  translate: 0 0;
}

/* Reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-media img { animation: none; }
  .hero-content > *, .scroll-cue { animation-duration: 0.01ms; animation-delay: 0s; }
  .scroll-cue span { animation: none; }
  .reveal { opacity: 1; translate: 0 0; transition: none; }
  .apt-card, .apt-media img, .btn { transition: none; }
}