/* OHHOUSE · Concept 04 v3 (2026-10-27). Loaded last. Only what changed from Concept 04 refined. */

/* ---------- 01 hero: the misted glass the circle wipes clear ---------- */
.rh { position: sticky; top: 0; z-index: 0; transform-origin: 50% 0%; will-change: transform; }
.rh-mist { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; }
.rh-mist img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; filter: blur(22px) saturate(.85) brightness(1.08); transform: scale(1.12); }
.rh-mist::after { content: ""; position: absolute; inset: 0; background: rgba(244, 242, 236, .32); }
.rh-photo { z-index: 1; }
.v3-pre .rh-mist { opacity: 1; }
.v3-pre .rh-photo { clip-path: circle(0px at 50% 45%); }
.v3-pre .bar { animation: v3-bar .9s cubic-bezier(.22,1,.36,1) 2.3s both; }
@keyframes v3-bar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.rh-logo { z-index: 3; }
.rh-clock { z-index: 3; }
.rh-veil { position: absolute; inset: 0; z-index: 4; background: var(--paper); opacity: 0; pointer-events: none; }
.rh-disc { position: fixed; left: 0; top: 0; z-index: 34; width: 0; height: 0; border-radius: 50%; background: var(--butter); opacity: 0; pointer-events: none; will-change: transform; }
.rh-mark .fl, .rh-mark .wd { fill: var(--white); }
.rh-mark .dt { fill: var(--butter); }
.rh-mark { will-change: transform; }
@media (max-width: 720px) {
  .rh-logo { bottom: calc(172px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- the sheets slide over the hero ---------- */
main > section:not(.rh), .rf { position: relative; z-index: 1; background: var(--paper); }
.intro { box-shadow: 0 -24px 60px rgba(20, 20, 19, .16); }
.in-dot { position: absolute; left: var(--m); top: 40px; width: 72px; height: 72px; border-radius: 50%; background: var(--butter); opacity: 0; }
.in-dot.on { opacity: 1; }
.in-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--butter); opacity: 0; }
.in-dot.ring::after { animation: rh-rip 2.4s cubic-bezier(.22,1,.36,1) both; }
@media (max-width: 720px) { .in-dot { width: 46px; height: 46px; top: 24px; } }
@media (prefers-reduced-motion: reduce) { .intro { box-shadow: none; } }

/* ---------- 03 section: a plain rectangular photograph, factual labels ---------- */
.sec-ph .frame { border-radius: 0; aspect-ratio: 1; }
.sec-steps li b { transition: color .4s var(--out); }
.sec-steps li.on b { color: var(--olive); }
.sec-read b { color: var(--olive); }

/* ---------- photographs: rectangles only. The brand circles stay as their own shapes ---------- */
.mask-arch, .mask-pill, .mask-circle { border-radius: 0; }
.sp0 { position: relative; }
.sp0::after { content: ""; position: absolute; right: var(--m); top: -10px; width: clamp(70px, 9vw, 130px); aspect-ratio: 1; border: 1px solid var(--olive); border-radius: 50%; pointer-events: none; }

/* ---------- the palette, in details ---------- */
::selection { background: var(--butter); color: var(--ink); }
.bar-sheet .bs-t::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--olive); margin-right: 10px; vertical-align: 1px; }
.bar-stay { border-bottom-width: 2px; }
.bar-stay:hover { border-bottom-color: var(--blue); }
.bar-menu:hover .mi i { border-color: var(--brick); }
.bar.on-photo .bar-menu:hover .mi i { border-color: var(--butter); }
.menu-nav a .n { color: var(--olive); }
.menu-k { border-top-color: var(--olive); }
.schedule { border-top-color: var(--olive); }
.schedule dt { color: var(--brick); }
.ideas-l li:nth-child(1) .mk { color: var(--olive); }
.ideas-l li:nth-child(2) .mk { color: var(--olive); }
.ideas-l li:nth-child(3) .mk { color: var(--brick); }
.ideas-l li:nth-child(4) .mk .mk-f { fill: var(--blue); }
figcaption .fn, .plan-fig .fn { color: var(--olive); }
.plan-legend button:hover { color: var(--brick); }
.sp2-q::before { content: ""; display: block; width: 28px; height: 2px; background: var(--brick); margin-bottom: 18px; }
.bb-it:nth-of-type(1) .ico, .bb-it:not(.ht):not(.road) .ico { color: var(--olive); }
.bb-it.ht .ico { color: var(--brick); }
.bb-it.road .ico { color: var(--blue); }
.bb-ground { background: repeating-linear-gradient(90deg, var(--brick) 0 9px, transparent 9px 15px, var(--brick) 15px 18px, transparent 18px 27px) !important; }
.bb-it.road { border-top-color: var(--brick); }
.rb { background: color-mix(in srgb, var(--butter) 26%, var(--paper)); }
.rb-stay { border-top-color: var(--olive); }
.rb-stay-btn:hover { background: var(--blue); border-color: var(--blue); color: var(--ink); }
.rf { margin: 0; padding-inline: var(--m); border-top: 0; }
.rf::before { content: ""; position: absolute; left: var(--m); right: var(--m); top: 0; height: 1px; background: var(--rule); }
.rf-dots { display: inline-flex; gap: 6px; }
.rf-dots i { width: 9px; height: 9px; border-radius: 50%; }
.rf-dots i:nth-child(1) { background: var(--olive); } .rf-dots i:nth-child(2) { background: var(--brick); }
.rf-dots i:nth-child(3) { background: var(--butter); } .rf-dots i:nth-child(4) { background: var(--blue); }

/* the swimmer sits on the right of a very wide photograph: on phones keep her in the frame and crop less */
@media (max-width: 720px) {
  .bleed-ph img { height: clamp(280px, 44svh, 420px); object-position: 80% 50%; }
}