@charset "UTF-8";

/* =============================================================================
   Property Tours — Bootstrap-flavored theme
   Loaded AFTER bootstrap.min.css and fonts.css. Bootstrap gives the modern
   reset, buttons, and utilities; this file adds the web-font typography and
   keeps the CSS-only slideshow fit (the container query) that makes the layout
   rock-solid on rotation. No JavaScript sizing — same engine as the base theme.
   ========================================================================== */

:root {
  --font-title: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-ui:    "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --bg:     #1e1e1f;
  --edge:   rgba(255, 255, 255, 0.14);
  --title:  #f4f2ef;
  --muted:  #b9b4ac;
  --dim:    #8a857d;
  --accent: #c9a24b;   /* warm brass — a small upscale accent */

  --fade: 1.5s;
  --pan:  6.5s;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  padding: 16px;
  background:
    radial-gradient(120% 80% at 50% -10%, #2a2a2c 0%, var(--bg) 55%) fixed,
    var(--bg);
  color: var(--muted);
  font-family: var(--font-ui);
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ---- Header --------------------------------------------------------------- */
header {
  flex: 0 0 auto;
  text-align: center;
  padding: 8px 0 16px;
}
h1 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(28px, 6vw, 52px);
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: var(--title);
}
.address {
  margin: 10px 0 0;
  font-family: var(--font-ui);
  font-weight: 500;
  /* Keep the city/state on ONE line. Cap at 15px where there's room, and scale
     the font down with the viewport on narrower phones so it fits without ever
     wrapping (the line is ~526px wide at 15px — too wide for any phone). */
  font-size: min(15px, 2.6vw);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
/* A short brass divider under the title — a small modern flourish. */
.address::before {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin: 0 auto 12px;
  background: var(--accent);
  opacity: 0.85;
}

/* ---- Stage + frame (the CSS-only fit engine) ------------------------------ */
.stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No overflow:hidden here — it was clipping the frame's drop shadow on the
     tight edges. The Ken Burns zoom is still clipped by .frame's own overflow,
     and the body handles any stray horizontal overflow. */
  container-type: size;
}
.frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #000;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);   /* soft depth = modern */
}
@container (min-aspect-ratio: 4/3) { .frame { height: 100%; width: auto; } }
@container (max-aspect-ratio: 4/3) { .frame { width: 100%; height: auto; } }

.frame.loading::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120px 120px at 50% 42%, #333, transparent 70%), #1a1a1a;
}

/* ---- Slides + Ken Burns --------------------------------------------------- */
.slides { position: absolute; inset: 0; }
.slides img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Start already zoomed a touch. The still preview and the first frame of the
     Ken Burns share this exact transform, so the show begins with no jump — and
     the extra zoom means the pan never reveals the frame edge. */
  transform: scale(1.10);
  transition: opacity var(--fade) ease-in-out;
  will-change: opacity, transform;
}
.slides img.on { opacity: 1; }
.slides img.preview { opacity: 1; }

/* Ken Burns. Uses the `animation:` shorthand (iPhone Safari renders this form
   reliably) but with a LITERAL duration — NOT a var(). Desktop Safari 26.4 drops
   a shorthand that contains a var(), which killed the effect there. JS overrides
   the duration per-photo inline via style.animationDuration; 6.5s is just the
   fallback. This single form works on iPhone Safari, desktop Safari, Chrome, and
   Firefox. */
.slides img.on.kb1 { animation: kb1 6.5s linear forwards; }
.slides img.on.kb2 { animation: kb2 6.5s linear forwards; }
.slides img.on.kb3 { animation: kb3 6.5s linear forwards; }
.slides img.on.kb4 { animation: kb4 6.5s linear forwards; }
/* Each keyframe is at its LEAST zoomed (scale 1.10) exactly when it is centered
   (translate 0), and only pans out (±4%) as it zooms IN (scale 1.18) — where the
   overflow margin is far larger than the pan. So the photo always fully covers
   the frame, with no exposed edge at any moment. */
@keyframes kb1 { from { transform: scale(1.10) translate(  0%,  0%); } to { transform: scale(1.18) translate(-4%,  4%); } }
@keyframes kb2 { from { transform: scale(1.18) translate(  4%, -4%); } to { transform: scale(1.10) translate( 0%,  0%); } }
@keyframes kb3 { from { transform: scale(1.18) translate( -4%,  4%); } to { transform: scale(1.10) translate( 0%,  0%); } }
@keyframes kb4 { from { transform: scale(1.10) translate(  0%,  0%); } to { transform: scale(1.18) translate( 4%, -4%); } }

/* NOTE: The Ken Burns pan runs for everyone — we deliberately do NOT disable it
   under `prefers-reduced-motion: reduce`. This is an intentional choice for this
   site (a gentle slideshow pan), not an oversight. To respect that setting again,
   add back:  @media (prefers-reduced-motion: reduce) {
                .slides img { animation: none !important; transform: none !important; } } */

/* ---- Tap-to-start hint ---------------------------------------------------- */
.tap-hint {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(18px, 5vw, 30px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
  animation: pulse 1.6s ease-in-out infinite;
}
.tap-hint[hidden] { display: none; }
@keyframes pulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

/* ---- Portrait lock -------------------------------------------------------
   iOS Safari can't be told to lock orientation, so instead: when a phone is
   held sideways (tour.js adds body.rotated via a media query) we cover the tour
   with a "rotate upright" prompt and pause the show. Desktop never matches, so
   it never shows there. */
.rotate-notice { display: none; }
body.rotated .rotate-notice {
  display: flex;
  position: fixed; inset: 0; z-index: 9999;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  background: var(--bg);
}
body.rotated header, body.rotated .stage, body.rotated footer { visibility: hidden; }
body.rotated .slides img { animation-play-state: paused !important; }

.rotate-notice .icon {
  font-size: 46px; line-height: 1; color: var(--accent);
  animation: rotate-hint 2.6s ease-in-out infinite;
}
.rotate-notice .msg {
  font-family: var(--font-title);
  font-size: clamp(20px, 6vw, 30px);
  color: var(--title);
}
.rotate-notice .sub {
  font-family: var(--font-ui);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
@keyframes rotate-hint { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-90deg); } }

/* ---- Controls ------------------------------------------------------------- */
footer {
  flex: 0 0 auto;
  align-self: center;
  width: 100%;
  max-width: 560px;
  text-align: center;
  padding: 14px 16px 4px;
  margin-top: 16px;
}
.controls {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 0;
}
/* Restart uses Bootstrap's .btn .btn-outline-light .btn-sm .rounded-pill in the
   markup; just refine the letter-spacing to match the header. */
#restart {
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0.05em;
}
audio { height: 34px; width: 100%; max-width: 240px; min-width: 0; }

.credit {
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--dim);
  margin: 14px 0 0;
  overflow-wrap: anywhere;
  white-space: pre-line;   /* honor the newline in the credit text (two fixed lines) */
}

@media (max-width: 480px) {
  body   { padding: 10px; }
  header { padding: 4px 0 10px; }
  footer { margin-top: 10px; }
}
@media (max-height: 430px) and (orientation: landscape) {
  body { padding: 6px; }
  header { padding: 0 0 6px; }
  h1 { font-size: clamp(20px, 5vw, 30px); }
  .address { margin-top: 5px; }
  .address::before { margin-bottom: 6px; }
  footer { margin-top: 6px; padding-top: 8px; }
  .credit { display: none; }
}