/* Fine linework derived from the user's pattern references.
   These are independent decorative layers; the photographs remain intact. */
.ornament {
  display: block;
  flex: none;
  pointer-events: none;
  user-select: none;
  background-color: #ddd0b5;
  background-image: linear-gradient(118deg, #bcae91 0%, #e4d8bf 23%, #fff4de 36%, #d3c4a6 48%, #eddfc3 65%, #fff6e4 76%, #c8b99c 100%);
  background-size: 240% 200%;
  background-position: 50% 50%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.ornament-cloud { mask-image: url('/img/ornaments/cloud-line.svg?v=3'); }
.ornament-corner { mask-image: url('/img/ornaments/lattice-corner.svg?v=3'); }
.hero-corner {
  position: absolute;
  top: 132px;
  right: var(--gutter);
  width: clamp(90px, 10vw, 144px);
  aspect-ratio: 1;
  color: var(--paper);
  opacity: .92;
  transform: scaleX(-1);
}
.signature .motif-eyebrow {
  display: flex;
  align-items: center;
  gap: 25px;
}
.motif-eyebrow .ornament-cloud {
  width: clamp(102px, 10.8vw, 165px);
  height: clamp(26px, 2.7vw, 41px);
  margin-block: -6px;
  color: var(--ink);
  opacity: .94;
}
.season-cloud {
  position: absolute;
  right: 0;
  bottom: calc(100% + 22px);
  width: clamp(112px, 11vw, 170px);
  aspect-ratio: 4;
  color: var(--paper);
  opacity: .92;
}
.room-copy { padding-top: 40px; }
.room-corner {
  position: absolute;
  left: -34px;
  top: -31px;
  width: 95px;
  aspect-ratio: 1;
  color: var(--ink);
  opacity: .94;
}
.pattern-seam {
  --seam-height: 38px;
  position: relative;
  z-index: 3;
  height: var(--seam-height);
  /* Straddle both photographs with a static translucent metal ground. */
  margin-block: calc(var(--seam-height) / -2);
  background: linear-gradient(180deg, #b9ad98d9, #a99b84d9 48%, #b7ab97e0);
  box-shadow: inset 0 1px #fff8ea9c, inset 0 -1px #5b503d5c;
  padding: 5px 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.ornament-ribbon {
  height: 28px;
  width: 100%;
  color: #f0e7d9;
  mask-image: url('/img/ornaments/fan-border.svg?v=2');
  mask-repeat: repeat-x;
  mask-size: 84px 28px;
}
.pattern-seam--compact { --seam-height: 26px; padding-block: 4px; }
.pattern-seam--compact .ornament-ribbon {
  height: 18px;
  mask-size: 60px 18px;
}
.header-trim {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
  padding-block: 2px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background: #30221b26;
  transform-origin: center top;
  transition: transform .38s cubic-bezier(.22,.61,.36,1), opacity .28s;
}
.header-trim .ornament-ribbon { height: 12px; mask-size: 48px 12px; opacity: .88; }
.site-header:has(.mobile-nav[open]) .header-trim { transform: scaleY(0); opacity: 0; }
@media (max-width: 1000px) and (min-width: 761px) {
  .season-cloud { bottom: calc(100% + 14px); width: 112px; }
  .room-corner { left: -23px; top: -24px; width: 76px; }
  .room-copy { padding-top: 32px; }
}
@media (max-width: 760px) {
  .hero-corner { top: 120px; right: 22px; width: 82px; }
  .signature .motif-eyebrow { gap: 19px; }
  .motif-eyebrow .ornament-cloud { width: 92px; height: 24px; margin-block: -5px; }
  .season-cloud { position: static; width: 98px; height: 25px; margin: 0 0 17px; }
  .room-corner { top: -26px; left: -8px; width: 60px; }
  .room-copy { padding-top: 24px; padding-left: 12px; bottom: 116px; }
  .pattern-seam { --seam-height: 30px; padding-block: 4px; }
  .ornament-ribbon { height: 22px; mask-size: 70px 22px; }
  .pattern-seam--compact { --seam-height: 22px; padding-block: 3px; }
  .pattern-seam--compact .ornament-ribbon { height: 16px; mask-size: 56px 16px; }
  .header-trim { height: 14px; }
  .header-trim .ornament-ribbon { height: 10px; mask-size: 44px 10px; }
}
@media (max-width: 359px) {
  .hero-corner { right: 18px; width: 72px; }
  .signature .motif-eyebrow { gap: 14px; }
  .motif-eyebrow .ornament-cloud { width: 80px; height: 20px; }
}

/* Only small inline vectors draw their paths; every ribbon stays static. */
.line-ornament { background: none; mask-image: none; overflow: visible; }
.line-ornament.ornament-corner { height: auto; }
.line-ornament.ornament-cloud { height: auto; }
.line-ornament path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.line-ornament.reveal-pending { opacity: 0; }
.line-ornament.reveal-pending path { stroke-dashoffset: 1; }
.line-ornament.is-revealing { animation: ornament-appear 2.4s ease-out both; }
.line-ornament.is-revealing path { animation: ornament-draw 2s cubic-bezier(.22,.61,.36,1) both; }
.line-ornament.is-revealing path:nth-child(2) { animation-delay: .12s; }
.line-ornament.is-revealing path:nth-child(3) { animation-delay: .24s; }
@keyframes ornament-appear {
  from { opacity: 0; }
  to { opacity: .94; }
}
@keyframes ornament-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .line-ornament.reveal-pending, .line-ornament.is-revealing { opacity: .94; animation: none; }
  .line-ornament path { animation: none !important; stroke-dashoffset: 0 !important; }
  .header-trim { transition: none; }
}

/* Continuous rails and one background; detail comes from individual strokes. */
.header-trim--detailed { padding-block: 2px; background: transparent; }
.header-trim--detailed::before {
  content: ''; position: absolute; inset: 0; background: #c5b499;
  opacity: 0; transition: opacity .9s ease;
}
.trim-art { position: relative; display: block; max-width: none; height: 100%; overflow: visible; }
.trim-art path { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trim-rails { stroke: #e9dcc1; opacity: .16; transition: opacity .9s ease; }
.trim-detail {
  stroke: url(#nav-trim-metal); stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
  transition: opacity 1s ease var(--delay), stroke-dashoffset 1.2s ease var(--delay);
}
.is-scrolled .trim-rails, .is-scrolled .trim-detail { opacity: .94; stroke-dashoffset: 0; }
.is-scrolled .header-trim--detailed::before { opacity: .24; }
@supports (animation-timeline: scroll()) and (animation-range: 0px 240px) {
  .site-header {
    background-image: none;
    animation: nav-ground 1s linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 220px;
  }
  .trim-rails, .trim-detail, .header-trim--detailed::before {
    transition: none;
    animation: nav-rails 1s ease-out both;
    animation-timeline: scroll(root block);
    animation-range: 0px 200px;
  }
  .trim-detail {
    animation-name: nav-detail;
    animation-range: var(--entry) calc(var(--entry) + 210px);
  }
  .header-trim--detailed::before {
    animation-name: nav-trim-ground;
    animation-range: 0px 260px;
  }
}
@keyframes nav-ground { from { background-color: #30221b12; } to { background-color: #30221ba6; } }
@keyframes nav-rails { from { opacity: .16; } to { opacity: .94; } }
@keyframes nav-detail {
  from { opacity: 0; stroke-dashoffset: 1; }
  to { opacity: .94; stroke-dashoffset: 0; }
}
@keyframes nav-trim-ground { from { opacity: 0; } to { opacity: .24; } }
@media (prefers-reduced-motion: reduce) {
  .site-header, .trim-rails, .trim-detail, .header-trim--detailed::before { animation: none !important; transition: none; }
  .trim-rails, .trim-detail { opacity: .94; stroke-dashoffset: 0; }
  .header-trim--detailed::before { opacity: .24; }
}

/* Small motifs enter later than the copy and drift at their own depth. */
@supports (animation-timeline: view()) and (animation-range: entry 0px entry 180px) {
  .line-ornament {
    --ornament-lag: 20px; --depth-from: -10px; --depth-to: 12px;
    view-timeline-name: --ornament; view-timeline-axis: block;
    animation: ornament-depth 1s linear both;
    animation-timeline: --scene;
    animation-range: cover 0% cover 100%;
  }
  .hero-corner { --ornament-lag: 0px; }
  .ornament-cloud { --depth-from: -5px; --depth-to: 7px; }
  .season-cloud { --ornament-lag: 70px; }
  .room-corner { --ornament-lag: 45px; --depth-from: -7px; --depth-to: 9px; }
  .line-ornament path {
    animation: ornament-scroll-draw 1s ease-out both;
    animation-timeline: --ornament;
    animation-range: entry calc(var(--ornament-lag) + var(--path-step, 0px)) entry calc(var(--ornament-lag) + var(--path-step, 0px) + 160px);
  }
  .line-ornament path:nth-child(2) { --path-step: 25px; }
  .line-ornament path:nth-child(3) { --path-step: 45px; }
}
@keyframes ornament-depth {
  from { translate: 0 var(--depth-from); }
  to { translate: 0 var(--depth-to); }
}
@keyframes ornament-scroll-draw {
  from { opacity: 0; stroke-dashoffset: 1; }
  to { opacity: 1; stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .line-ornament { animation: none !important; translate: none; }
  .line-ornament path { animation: none !important; opacity: 1; stroke-dashoffset: 0; }
}