@media (max-width: 900px) { .intro-copy { top: 18%; left: 6vw; max-width: 320px; }.intro-copy h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); }.site-header { padding: 22px 5vw; }.top-nav { gap: 16px; margin-right: 14px; }.nav-link { font-size: .76rem; }.sound-toggle { display: none; }.panel-inner { padding-inline: 5vw; }.about-layout, .contact-layout { grid-template-columns: 1fr; gap: 30px; }.profile-card { display: grid; grid-template-columns: 70px 1fr; column-gap: 15px; }.profile-avatar { grid-row: span 2; }.profile-name { align-self: end; margin: 0; }.profile-card dl { grid-column: 2; }.profile-note { grid-column: 1 / -1; }.contact-message { padding: 30px; }.lightbox-dialog { grid-template-columns: 1fr; min-height: 0; max-height: 92vh; overflow-y: auto; }.lightbox-image-wrap { min-height: min(60vh, 480px); max-height: 58vh; }.lightbox-caption { padding: 22px 20px 60px; }.lightbox-controls { right: 22px; bottom: 21px; } }
@media (max-width: 720px) { .room-stage { min-height: 100svh; }.room-image { object-position: center; }.room-wash { background: linear-gradient(90deg, rgba(247,241,231,.62) 0%, rgba(247,241,231,.08) 62%), linear-gradient(0deg, rgba(41,39,36,.17), transparent 34%); }.site-header { align-items: flex-start; padding: 18px 20px; }.brand-lockup strong { font-size: .9rem; }.brand-lockup small { font-size: .51rem; }.top-nav { position: absolute; top: 76px; left: 20px; right: 20px; justify-content: space-between; gap: 0; padding: 7px 12px; border: 1px solid rgba(36,52,75,.17); background: rgba(247,241,231,.42); }.nav-link { font-size: .7rem; }.intro-copy { top: 20%; left: 20px; max-width: 270px; }.eyebrow { margin-bottom: 12px; font-size: .56rem; }.intro-copy h1 { font-size: clamp(2rem, 10vw, 3rem); }.intro-note { margin-top: 16px; font-size: .86rem; line-height: 1.8; }.intro-note span { font-size: .65rem; }.room-caption { right: 20px; bottom: 26px; font-size: .55rem; }.scroll-cue { bottom: 26px; left: 52%; font-size: .52rem; }.scroll-cue i { width: 17px; }.room-hint { right: 18px; bottom: 57px; }.hotspot { width: 62px; height: 62px; }.hotspot-ping { inset: 16px; }.hotspot-label { bottom: -24px; font-size: .61rem; }.hotspot--art { left: 12%; top: 22%; }.hotspot--window { left: 68%; top: 15%; }.hotspot--laptop { left: 23%; top: 39%; }.hotspot--notebook { left: 9%; top: 65%; }.hotspot--coffee { left: 74%; top: 65%; }.hotspot--contact { left: 62%; top: 35%; }.panel-inner { padding-top: 24px; padding-bottom: 48px; }.panel-header { padding-top: 44px; }.panel-header h2 { font-size: 2.15rem; }.panel-description { font-size: .82rem; }.gallery-grid, .travel-grid, .cafe-grid { gap: 14px; }.gallery-grid--illustration { grid-template-columns: 1fr 1fr; }.gallery-card__copy strong { font-size: .93rem; }.gallery-card__meta { font-size: .6rem; }.travel-card:nth-child(even), .cafe-card:nth-child(even) { transform: translateY(10px); }.travel-card__copy strong, .cafe-card__copy strong { font-size: 1rem; }.travel-card__copy small, .cafe-card__copy em { font-size: .68rem; }.about-letter { padding: 26px 23px 30px; }.about-letter p { font-size: .9rem; }.profile-card { padding-inline: 0; }.contact-message { padding: 25px 22px 29px; }.contact-message p { font-size: 1rem; }.site-footer { flex-direction: column; padding: 14px 20px; font-size: .58rem; } }
@media (max-width: 420px) { .brand-lockup { gap: 7px; }.brand-mark { width: 27px; height: 27px; font-size: .9rem; }.brand-lockup strong { font-size: .78rem; }.brand-lockup small { font-size: .45rem; }.top-nav { top: 68px; }.nav-link { font-size: .65rem; }.intro-copy { top: 19%; }.intro-copy { max-width: 290px; }.intro-copy h1 { font-size: 1.8rem; line-height: 1.22; letter-spacing: -.04em; }.intro-copy::before { width: 310px; background: linear-gradient(90deg, rgba(247,241,231,.48), rgba(247,241,231,.08) 76%, transparent); }.intro-note { max-width: 220px; }.scroll-cue { display: none; }.room-caption { bottom: 20px; }.hotspot--art { left: 11%; top: 21%; }.hotspot--window { left: 69%; top: 16%; }.hotspot--laptop { left: 21%; top: 40%; }.hotspot--notebook { left: 8%; top: 66%; }.hotspot--coffee { left: 73%; top: 66%; }.hotspot--contact { left: 61%; top: 36%; }.lightbox { padding: 11px; }.lightbox-dialog { padding: 10px; }.lightbox-image-wrap { min-height: 46vh; }.lightbox-caption { padding: 18px 12px 56px; }.lightbox-controls { right: 14px; bottom: 18px; }.lightbox-controls button { width: 25px; height: 25px; } }

@media (max-width:720px) { .hotspot-ping { inset: auto; top: calc(50% - 12px); left: calc(50% - 12px); }.hotspot-label { white-space: normal; min-width: 95px; max-width: 155px; } }