/* Sabban&Co website · https://sabbanand.co */
@font-face { font-family: "Inter"; src: url("./assets/Inter-ExtraLight.woff2") format("woff2"); font-style: normal; font-weight: 200; font-display: swap; }
:root { --text-size: 16px; font-size: var(--text-size); font-weight: 200; text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Inter", sans-serif; color-scheme: light; background: #f7f7f7; color: #737373; }
* { box-sizing: border-box; }
button, input, select, textarea { font: inherit; }
html, body { margin: 0; width: 100%; height: 100%; }
body { overflow: hidden; background: radial-gradient(ellipse at 51% 37%, #ffffff 0%, #f8f8f8 55%, #eeeeee 100%); }
.brand-header { position: absolute; z-index: 3; top: max(24px, env(safe-area-inset-top)); left: 50%; width: clamp(168px, 18vw, 240px); transform: translateX(-50%); pointer-events: auto; }
.brand-header img { display: block; width: 100%; height: auto; }
main { position: relative; width: 100%; height: 100%; min-height: 100svh; overflow: hidden; }
.cocotte-stage { position: absolute; z-index: 1; left: 0; right: 0; top: 140px; height: calc(100svh - 215px); --stage-height: calc(100svh - 215px); pointer-events: none; }
#orb { pointer-events: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: min(78vw, var(--stage-height), 1160px); height: min(78vw, var(--stage-height), 1160px); touch-action: none; cursor: grab; outline: none; -webkit-tap-highlight-color: transparent; }
#orb:active { cursor: grabbing; }
#orb:focus-visible { outline: 1px solid #777; outline-offset: 4px; border-radius: 24px; }
.orbital-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.main-arc, .secondary-arc { fill: none; stroke: url(#arc-fade); stroke-width: 1; vector-effect: non-scaling-stroke; }
.secondary-arc { opacity: .25; stroke-width: .6; }
.arc-ticks { fill: none; stroke: #a1a5ab; stroke-width: 1; opacity: .3; vector-effect: non-scaling-stroke; }
.branch-nav { perspective: 950px; perspective-origin: 35% 50%; position: absolute; z-index: 2; top: 50%; left: 6.25%; width: min(29vw, 390px); height: min(80svh, 680px); transform: translateY(-50%); }
.branch-wheel { transform-style: preserve-3d; position: relative; width: 100%; height: 100%; outline: none; touch-action: none; cursor: ns-resize; user-select: none; -webkit-tap-highlight-color: transparent; }
.branch-wheel:focus-visible .branch[data-centered=true] .branch-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.branch { backface-visibility: hidden; transform-style: preserve-3d; transform-origin: center; position: absolute; top: 50%; left: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; width: max-content; max-width: 100%; min-height: 44px; padding: 4px 8px; border: 0; background: transparent; color: #b3b3b3; text-align: left; white-space: nowrap; cursor: pointer; transform: translate(24px, -50%); will-change: transform, opacity; }
.branch-name { font-size: var(--text-size); line-height: 1.15; font-weight: 200; letter-spacing: .065em; }
.branch[data-centered=true] { color: #929292; }
.branch[data-centered=true] .branch-name { font-weight: 200; filter: none !important; }
.branch:hover { color: #949494; }
.branch:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 7px; }
.selection-cursor { position: absolute; z-index: 1; left: -5px; top: 50%; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid #b0b0b0; transform: translateY(-50%);  pointer-events: none; }
.branch-position { position: absolute; right: 8%; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; color: #565656; font-size: var(--text-size); font-variant-numeric: tabular-nums; pointer-events: none; }
.branch-total { color: #a4a4a4; }
.count-divider { width: 21px; height: 1px; background: #a7a7a7; transform: rotate(-55deg); }
#hint { position: fixed; bottom: max(28px, env(safe-area-inset-bottom)); left: 16px; right: 16px; margin: 0; text-align: center; color: #7e7e7e; font-size: var(--text-size); line-height: 1.5; user-select: none; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
noscript { position: fixed; bottom: 85px; font-size: var(--text-size); padding: 20px; }
@media (max-width: 1280px) { #orb { left: 58%; width: min(76vw, var(--stage-height)); height: min(76vw, var(--stage-height)); } .branch-nav { left: 4%; width: 29vw; } .branch-position { right: 5%; gap: 5px; } .count-divider { width: 12px; } }
@media (min-width: 721px) and (max-width: 900px) { #orb { left: 62%; } }
@media (max-height: 650px) { #orb { width: min(72vw, var(--stage-height)); height: min(72vw, var(--stage-height)); } .branch-nav { height: 76svh; } .branch { min-height: 32px; } #hint { bottom: 12px; max-width: none; } }
@media (max-height: 380px) { #hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .branch { will-change: auto; } }

@media (max-height: 650px) { .brand-header { top: 16px; width: 168px; } }
@media (max-height: 380px) { .brand-header { top: 10px; width: 136px; } }

/* Very faint technical grid, always behind the interactive paper and menu. */
.background-grid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; mask-image: linear-gradient(90deg, #0008, #000b 23%, #000 44%, #000 90%, #0008); }
.grid-layer { position: absolute; inset: 0; width: 100%; height: 100%; --rule-opacity: 1; opacity: 0; will-change: opacity; animation: grid-rule-fade var(--duration) ease-in-out var(--delay) infinite; }
.grid-lines { --rule-opacity: .19; fill: none; stroke: #9ba2a8; stroke-width: .7; opacity: var(--rule-opacity); }
.grid-signal { fill: none; stroke: #9ba2a8; stroke-width: .75; opacity: var(--signal-opacity, .25); }
.grid-bar { stroke-width: 1; }
#orb, .orbital-frame { z-index: 1; }
.branch-position, #hint { z-index: 2; }
@keyframes grid-rule-fade { 0%, 12%, 90%, 100% { opacity: 0; } 34%, 62% { opacity: var(--rule-opacity); } }
@media (prefers-reduced-motion: reduce) { .grid-layer { animation: none; opacity: 1; will-change: auto; } .grid-lines { opacity: var(--rule-static-opacity, .14); } .grid-signal { opacity: .025; } }

.activity-gallery { position: absolute; z-index: 2; right: 6.5%; top: 50%; width: min(24vw, 360px); transform: translateY(-50%); }
.activity-gallery[hidden], .activity-gallery [hidden] { display: none; }
.activity-gallery h2 { margin: 0 0 20px; color: #949494; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Inter", sans-serif; font-weight: 200; font-size: var(--text-size); }
/* A vertical wheel: the selected card is sharp, its neighbours recede. */
.gallery-wheel { position: relative; width: 100%; height: min(64svh, 590px); overflow: hidden; outline: none; touch-action: none; cursor: ns-resize; user-select: none; mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); }
.gallery-wheel:focus-visible .gallery-card[aria-current=true] .gallery-card-title { text-decoration: underline; text-underline-offset: 7px; }
.gallery-items { position: absolute; inset: 0; }
.gallery-card { position: absolute; display: flex; flex-direction: column; left: 50%; top: 50%; width: calc(100% - 24px); height: var(--card-height, 150px); padding: 0; border: 0; border-radius: 0; background: transparent; color: #9a9a9a; text-decoration: none; overflow: hidden; text-align: left; cursor: pointer; transform-origin: center; will-change: transform, opacity, filter; }
.gallery-card img { display: block; min-height: 0; flex: 1; width: 100%; object-fit: cover; pointer-events: none; }
.gallery-card-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; font-size: var(--text-size); line-height: 1.4; }
.gallery-card-label:empty { display: none; }
.gallery-card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-link-card .gallery-card-label { flex: 1; align-items: flex-start; flex-direction: column; justify-content: center; padding: 8px; font-size: var(--text-size); letter-spacing: .065em; }
.gallery-link-domain { font-size: var(--text-size); color: #b3b3b3; overflow-wrap: anywhere; }
.gallery-card[aria-current=true] { border-color: #bdc1c466; }
.gallery-card:focus-visible { outline: none; }
.gallery-card:focus-visible .gallery-card-title { text-decoration: underline; text-underline-offset: 7px; }
.gallery-empty { position: absolute; top: 50%; left: 12px; right: 12px; margin: 0; padding: 15px 8px; transform: translateY(-50%); text-align: left; color: #aaa; font-size: var(--text-size); letter-spacing: .025em; }
.gallery-cursor { position: absolute; right: 0; top: 50%; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 6px solid #b0b0b0; transform: translateY(-50%); pointer-events: none; }
.gallery-controls { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 6px; }
.gallery-controls button { border: 0; background: transparent; width: 44px; height: 44px; color: #aaa; font-size: var(--text-size); cursor: pointer; }
.gallery-controls button:hover { color: #888; }
.gallery-controls button:focus-visible { outline: 1px solid #aaa; outline-offset: 1px; border-radius: 50%; }
.gallery-count { color: #aaa; font-size: var(--text-size); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .gallery-card { will-change: auto; } }
.category-open #orb { left: 47%; width: min(55vw, var(--stage-height), 950px); height: min(55vw, var(--stage-height), 950px); }
.category-open .branch-position { display: none; }
@media (min-width: 721px) and (max-width: 1100px) {
  .category-open #orb { left: 47%; width: min(52vw, var(--stage-height)); height: min(52vw, var(--stage-height)); }
  .activity-gallery { right: 3.5%; width: 23vw; }
  .category-open .branch-nav { left: 2.5%; width: 25vw; }
}


.gallery-wheel[data-interactive=false] { touch-action: pan-y; cursor: default; }
@media (max-width: 720px) {
  body, body.category-open { overflow-y: auto; overflow-x: hidden; }
  main, .category-open main { display: flex; flex-direction: column; align-items: center; height: auto; min-height: 100svh; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .brand-header { position: relative; top: auto; left: auto; width: clamp(150px, 40vw, 180px); margin: max(22px, env(safe-area-inset-top)) auto 12px; transform: none; order: 0; }
  .branch-nav, .category-open .branch-nav { position: relative; left: auto; top: auto; width: 100%; height: 124px; margin: 0 auto 8px; transform: none; order: 1; perspective: 800px; perspective-origin: 50% 50%; }
  .branch-wheel { touch-action: pan-y pinch-zoom; cursor: ew-resize; -webkit-user-select: none; overscroll-behavior-x: contain; }
  .branch { left: 50%; top: 50%; align-items: center; padding: 10px 4px; min-height: 48px; max-width: 64vw; text-align: center; }
  .selection-cursor { top: auto; bottom: 13px; left: 50%; width: 22px; height: 1px; border: 0; background: #b8b8b8; transform: translateX(-50%); }
  .cocotte-stage { position: relative; left: auto; right: auto; top: auto; width: 100%; height: min(96vw, 660px); --stage-height: min(96vw, 660px); order: 2; }
  #orb, .category-open #orb { left: 50%; top: 50%; width: var(--stage-height); height: var(--stage-height); }
  #hint, .category-open #hint { display: block; position: relative; left: auto; right: auto; top: auto; bottom: auto; width: calc(100% - 48px); max-width: 390px; margin: 12px auto 20px; font-size: var(--text-size); order: 3; }
  .activity-gallery { position: relative; top: auto; right: auto; left: auto; width: calc(100% - 48px); max-width: 440px; margin: 14px auto 16px; transform: none; order: 4; }
  .activity-gallery h2 { margin-bottom: 12px; text-align: center; font-size: var(--text-size); }
  .gallery-wheel { height: min(108vw, 460px); }
  .gallery-wheel[data-interactive=false] { height: 230px; }
  .orbital-frame, .branch-position { display: none; }
  .branch-wheel:focus-visible { outline-offset: -4px; }
}

/* One click on the plus opens the contact drawer. */
.corner-footer { position: fixed; z-index: 20; right: max(22px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); }
.footer-toggle { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #8b8b8b; font-size: var(--text-size); line-height: 1; font-weight: 200; cursor: pointer; }
.footer-toggle span { position: relative; width: 18px; height: 18px; transition: transform .3s ease; }
.footer-toggle span::before, .footer-toggle span::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 1px; background: currentColor; }
.footer-toggle span::after { transform: rotate(90deg); }
.footer-toggle:focus-visible { outline: 1px solid #999; outline-offset: 3px; }
.brand-signature { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.brand-signature:focus-visible { outline: 1px solid #bbb; outline-offset: 8px; }
.brand-logo { display: block; width: 100%; height: auto; overflow: visible; }
@media (prefers-reduced-motion: reduce) { .footer-toggle span { transition: none; } }
@media (max-width: 720px) { main, .category-open main { padding-bottom: max(68px, env(safe-area-inset-bottom)); } .corner-footer { right: max(12px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); } }

/* One type size across navigation, projects and the native LEROSA pages. */
.gallery-detail { min-height: 0; padding: 0 12px; }
.gallery-back { display: flex; gap: 12px; align-items: center; border: 0; background: transparent; padding: 10px 0; color: #858585; cursor: pointer; }
.gallery-back::before { content: "←"; }
.gallery-detail-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 24px 0 0 27px; }
.gallery-detail-links a { color: #999; text-decoration: none; padding: 10px 0; line-height: 1.5; }
.gallery-detail-links a:hover, .gallery-back:hover { color: #696969; }
.gallery-detail-links a:focus-visible, .gallery-back:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 7px; }
.gallery-detail-links:empty { display: none; }
.gallery-wheel { perspective: 950px; perspective-origin: 50% 50%; }
.gallery-items { transform-style: preserve-3d; }
.gallery-wheel[data-text-only=true] .gallery-card { transform-style: preserve-3d; backface-visibility: hidden; overflow: visible; color: #b3b3b3; }
.gallery-wheel[data-text-only=true] .gallery-card[aria-current=true] { color: #929292; }
.gallery-back { letter-spacing: .065em; }

.document-page { overflow: auto; background-attachment: fixed; }
.document-page main { height: auto; min-height: 100svh; overflow: visible; display: block; padding: 0 28px 110px; }
.document-page .background-grid { position: fixed; height: 100svh; }
.document-page .brand-header { position: relative; top: auto; left: auto; transform: none; margin: max(24px, env(safe-area-inset-top)) auto 64px; }
.document-shell { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.document-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; margin: 0 0 58px; }
.document-navigation a, .document-breadcrumb { color: #999; text-decoration: none; letter-spacing: .045em; line-height: 1.6; }
.document-navigation a[aria-current=page] { color: #6b6b6b; border-bottom: 1px solid #c6c6c6; }
.document-navigation a:hover, .document-content a:hover { color: #555; }
.document-navigation a:focus-visible, .document-content a:focus-visible { outline: 1px solid #999; outline-offset: 4px; }
.document-breadcrumb { margin: 0 0 28px; }
.document-content { line-height: 1.9; color: #7c7c7c; overflow-wrap: anywhere; }
.document-content h1, .document-content h2, .document-content h3, .document-content p, .document-content li, .document-content a { font-size: var(--text-size); font-weight: 200; }
.document-content h1, .document-content h2, .document-content h3 { color: #666; letter-spacing: .065em; line-height: 1.65; margin: 40px 0 16px; }
.document-content h1 { margin-top: 0; }
.document-content p { margin: 0 0 20px; }
.document-content ul, .document-content ol { margin: 0 0 24px; padding-left: 24px; }
.document-content li { padding-left: 3px; margin-bottom: 10px; }
.document-content a { color: #777; text-underline-offset: 5px; text-decoration-color: #c3c3c3; }
@media (max-width: 720px) {
  .document-page main { padding: 0 24px 90px; }
  .document-page .brand-header { margin-bottom: 38px; }
  .document-navigation { gap: 18px 24px; margin-bottom: 40px; }
  .document-navigation .document-return { flex-basis: 100%; }
}

/* Compact day/night switch; automatic selection happens only on arrival. */
.appearance-controls { position: fixed; z-index: 20; left: max(22px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); }
.appearance-switch { display: grid; place-items: center; width: 64px; min-height: 44px; padding: 7px 0; border: 0; background: transparent; color: #999; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.appearance-track { position: relative; display: block; width: 64px; height: 30px; border-radius: 18px; background: linear-gradient(145deg, #aaa, #999); box-shadow: inset 0 1px 2px #00000012, 0 1px 4px #0000000a; }
.appearance-track svg { position: absolute; top: 7px; width: 16px; height: 16px; color: #fff; transition: opacity .2s; }
.appearance-sun { left: 7px; }
.appearance-moon { right: 7px; }
.appearance-thumb { position: absolute; left: 3px; top: 3px; width: 32px; height: 24px; background: linear-gradient(160deg, #fff, #fafafa); border-radius: 16px; box-shadow: 0 1px 3px #00000018; transform: translate3d(26px, 0, 0); transition: transform .52s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.appearance-switch[aria-checked=true] .appearance-moon, .appearance-switch[aria-checked=false] .appearance-sun { opacity: 0; }
.appearance-switch[aria-checked=false] .appearance-thumb { transform: translate3d(0, 0, 0); }
.appearance-switch:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; border-radius: 18px; }
/* Keep the explicitly requested day/night slide visible; other reduced-motion rules remain. */
@media (prefers-reduced-motion: reduce) { .appearance-track svg { transition: none; } }
@media (min-width: 721px) { #hint { left: 112px; right: 82px; } }
@media (max-width: 720px) { .appearance-controls { left: max(12px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); } }

:root[data-theme=dark] { color-scheme: dark; background: #0d0d0d; color: #aaa; }
[data-theme=dark] body { background: #0d0d0d; }
[data-theme=dark] .branch, [data-theme=dark] .gallery-wheel[data-text-only=true] .gallery-card { color: #919191; }
[data-theme=dark] .branch[data-centered=true], [data-theme=dark] .gallery-wheel[data-text-only=true] .gallery-card[aria-current=true] { color: #cecece; }
[data-theme=dark] .branch:hover, [data-theme=dark] .gallery-back:hover { color: #eee; }
[data-theme=dark] .grid-layer { animation-duration: calc(var(--duration) * 1.35); }
[data-theme=dark] .grid-lines { --rule-opacity: .14; --rule-static-opacity: .12; stroke: #666; stroke-width: .75; }
[data-theme=dark] .grid-signal { --signal-opacity: .08; stroke: #666; stroke-width: .65; }
[data-theme=dark] .grid-bar { stroke-width: .75; }
[data-theme=dark] .branch-position, [data-theme=dark] .activity-gallery h2, [data-theme=dark] .gallery-back { color: #b4b4b4; }
[data-theme=dark] #hint, [data-theme=dark] .gallery-empty, [data-theme=dark] .gallery-count, [data-theme=dark] .gallery-controls button { color: #999; }
[data-theme=dark] .footer-toggle { color: #bababa; }
[data-theme=dark] .appearance-switch { color: #999; }
[data-theme=dark] .appearance-track { background: linear-gradient(145deg, #6c6c6c, #515151); }
[data-theme=dark] .document-content { color: #b3b3b3; }
[data-theme=dark] .document-content h1, [data-theme=dark] .document-content h2, [data-theme=dark] .document-content h3, [data-theme=dark] .document-navigation a[aria-current=page] { color: #d2d2d2; }
[data-theme=dark] .document-content a, [data-theme=dark] .document-navigation a { color: #bababa; }
[data-theme=dark] .document-content a:hover, [data-theme=dark] .document-navigation a:hover { color: #eee; }

/* A restrained project preview, with true square photographs. */
.gallery-coming-soon { color: #aaa; line-height: 1.7; letter-spacing: .045em; }
.gallery-coming-soon p { margin: 0; font-size: var(--text-size); font-weight: 200; }
.gallery-coming-soon .coming-soon-title { color: #8f8f8f; margin-bottom: 14px; }
.activity-gallery[data-square=true] .gallery-coming-soon { margin-bottom: 10px; }
.activity-gallery[data-square=true] .gallery-wheel { height: min(74svh, 680px); perspective: 950px; perspective-origin: 50% 50%; mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); }
.activity-gallery[data-square=true] .gallery-card { width: var(--card-width); aspect-ratio: 1; transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; }
.activity-gallery[data-square=true] .gallery-card img { position: absolute; inset: 0; width: 100%; height: 100%; }
.activity-gallery[data-square=true] .gallery-items { transform-style: preserve-3d; }
.activity-gallery[data-square=true] .gallery-wheel { overflow: visible; }
.activity-gallery[data-square=true] .gallery-card-label { position: absolute; bottom: 0; left: 0; right: 0; background: #f5f5f5dc; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.activity-gallery[data-square=true] .gallery-placeholder { border: 1px solid #9a9a9a26; background: linear-gradient(135deg, #ffffff18, #99999906); }
.activity-gallery[data-square=true] .gallery-placeholder .gallery-card-label { inset: 0; justify-content: center; padding: 16px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: #aaa; letter-spacing: .06em; }
[data-theme=dark] .gallery-coming-soon { color: #999; }
[data-theme=dark] .gallery-coming-soon .coming-soon-title { color: #bbb; }
[data-theme=dark] .activity-gallery[data-square=true] .gallery-card-label { background: #242424dc; color: #bbb; }
[data-theme=dark] .activity-gallery[data-square=true] .gallery-placeholder .gallery-card-label { background: transparent; }
@media (max-width: 720px) {
  .gallery-coming-soon { text-align: center; padding: 8px 8px 22px; }
  .activity-gallery[data-square=true] .gallery-wheel { height: clamp(260px, 80vw, 340px); perspective: 800px; touch-action: pan-y pinch-zoom; cursor: ew-resize; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .activity-gallery[data-square=true] .gallery-cursor { right: auto; left: 50%; top: auto; bottom: 3px; width: 22px; height: 1px; border: 0; background: #b8b8b8; transform: translateX(-50%); }
  .activity-gallery[data-square=true] .gallery-coming-soon { margin-bottom: 0; }
}

/* Keep the paper visible beside the photograph as it unfolds to the left. */
@media (min-width: 721px) {
  .activity-gallery[data-square=true] { right: 4%; width: min(32vw, 440px); }
  .activity-gallery[data-square=true] .gallery-wheel { mask-image: none; }
  .activity-gallery[data-square=true] h2, .activity-gallery[data-square=true] .gallery-controls { position: relative; left: var(--photo-lane-x, 50%); transform: translateX(-50%); width: max-content; max-width: 100%; }
}
html.photo-focus-open, html.photo-focus-open body { overflow: hidden; }
#orb { transition: transform 820ms cubic-bezier(.22,.75,.18,1); }
.branch-nav, .activity-gallery, #hint { transition: opacity 360ms ease; }
.photo-expanded #orb { transform: translate(-50%, -50%) translate(var(--photo-paper-x, 0px), var(--photo-paper-y, 0px)) scale(var(--photo-paper-scale, .5)); }
.photo-expanded .branch-nav, .photo-expanded .activity-gallery, .photo-expanded #hint { opacity: 0; pointer-events: none; }
.gallery-card.photo-in-viewer { opacity: 0 !important; }
.photo-viewer { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; color: #777; touch-action: pinch-zoom; }
.photo-viewer-sheet { position: absolute; z-index: 2; transform-origin: 100% 50%; }
.photo-viewer-count { position: absolute; top: calc(100% + 8px); left: 0; width: 100%; margin: 0; color: #999; font-size: var(--text-size); font-weight: 200; line-height: 1.4; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; }
.photo-viewer::backdrop { background: transparent; }
.photo-viewer-image { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #fff; cursor: zoom-out; touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.photo-viewer-image img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.activity-gallery[data-square=true] .gallery-card:not(.gallery-placeholder)::after,
.photo-viewer-image::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid rgba(45, 45, 45, .12); pointer-events: none; }
.photo-viewer-close { position: absolute; right: -10px; top: -47px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.photo-viewer-close span { position: relative; width: 18px; height: 18px; transform: rotate(45deg); }
.photo-viewer-close span::before, .photo-viewer-close span::after { content: ""; position: absolute; top: 8px; left: 0; width: 18px; height: 1px; background: currentColor; }
.photo-viewer-close span::after { transform: rotate(90deg); }
.photo-viewer-close:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.photo-viewer-image:focus-visible { outline: 1px solid #999; outline-offset: 5px; }
.photo-viewer-image.is-magnifying { cursor: none; }
.photo-service-dots { position: fixed; z-index: 3; left: max(12px, 1.5vw, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; }
.photo-service-dot { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #a0a0a0; cursor: pointer; }
.photo-service-dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; transition: transform .25s ease, box-shadow .25s ease; }
.photo-service-dot[aria-current=true] { color: #666; }
.photo-service-dot[aria-current=true]::before { transform: scale(1.25); box-shadow: 0 0 0 4px #88888820; }
.photo-service-dot:focus-visible { outline: 1px solid currentColor; outline-offset: -5px; border-radius: 50%; }
.photo-service-dot span { position: absolute; left: 42px; top: 50%; transform: translateY(-50%); padding: 7px 10px; white-space: nowrap; font-size: var(--text-size); font-weight: 200; letter-spacing: .065em; color: #777; background: transparent; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s; }
.photo-service-dot:hover span, .photo-service-dot:focus-visible span { opacity: 1; visibility: visible; }
.photo-loupe { position: fixed; z-index: 4; isolation: isolate; overflow: hidden; border-radius: 50%; background: #fff; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; opacity: 0; visibility: hidden; box-shadow: 0 12px 32px #00000024, 0 2px 5px #00000016; transition: opacity .16s, visibility .16s; }
.photo-loupe.is-visible { opacity: 1; visibility: visible; }
.photo-loupe img { position: absolute; max-width: none; max-height: none; pointer-events: none; }
.photo-loupe::before { content: ""; position: absolute; z-index: 1; inset: 0; border: 1px solid #ffffffb3; border-radius: inherit; box-shadow: inset 2px 3px 3px #ffffffc7, inset -2px -3px 4px #3d41474d, inset 0 0 0 6px #ffffff12; }
.photo-loupe::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; background: linear-gradient(135deg, #ffffff66, #ffffff00 27%, #ffffff00 75%, #ffffff40); }
[data-theme=dark] .photo-viewer { color: #bbb; }
[data-theme=dark] .photo-service-dot { color: #858585; }
[data-theme=dark] .photo-service-dot[aria-current=true] { color: #ddd; }
[data-theme=dark] .photo-service-dot span { color: #ccc; }
@media (max-width: 720px) {
  .photo-service-dots { top: auto; bottom: max(66px, calc(env(safe-area-inset-bottom) + 56px)); left: 50%; width: min(352px, calc(100% - 16px)); flex-direction: row; transform: translateX(-50%); }
  .photo-service-dot { flex: 1; min-width: 0; }
  .photo-service-dot span { left: 50%; top: auto; bottom: 43px; transform: translateX(-50%); }
  .photo-service-dot:first-child span { left: 0; transform: none; }
  .photo-service-dot:last-child span { left: auto; right: 0; transform: none; }
}
@media (min-width: 721px) and (max-height: 480px) { .photo-service-dots { top: 24px; bottom: 84px; transform: none; } .photo-service-dot { flex: 1; min-height: 0; } }
@media (prefers-reduced-motion: reduce) { #orb, .branch-nav, .activity-gallery, #hint, .photo-loupe, .photo-service-dot::before, .photo-service-dot span { transition: none; } }

/* The story slides from behind the image; only its text rolls at the edges. */
.photo-story { --story-edge: 64px; --story-title-size: clamp(1rem, 1.08vw, 1.25rem); --story-band-height: calc(var(--story-title-size) * 1.3 + 28px); position: absolute; z-index: 1; overflow: hidden; pointer-events: none; }
.photo-story[hidden] { display: none; }
.photo-story-panel { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: rgba(255, 255, 255, .8); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); color: #949494; border: 1px solid #fff; transform: translateX(100%); opacity: 0; transition: transform 640ms cubic-bezier(.22,.75,.18,1), opacity 250ms ease; }
.photo-story-title, .photo-story-footer { flex: 0 0 var(--story-band-height); height: var(--story-band-height); }
.photo-story-title { margin: 0; padding: 18px 24px 10px; font-size: var(--story-title-size); font-weight: 300; line-height: 1.3; letter-spacing: .12em; text-align: center; }
.photo-story-footer { display: grid; place-items: center; }
.photo-story-reader { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; contain: paint; }
.photo-story-next { display: grid; place-items: center; width: 44px; height: 40px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; opacity: .8; }
.photo-story-next[hidden] { display: none; }
.photo-story-next svg { width: 14px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; animation: photo-story-cue 2.6s ease-in-out infinite; }
.photo-story-next:hover { opacity: 1; }
.photo-story-next:focus-visible { outline: 1px solid currentColor; outline-offset: -4px; }
@keyframes photo-story-cue { 0%, 100% { transform: translateY(-2px); opacity: .55; } 55% { transform: translateY(2px); opacity: 1; } }
.has-photo-story .photo-story { pointer-events: auto; }
.has-photo-story .photo-story-panel { transform: translateX(0); opacity: 1; }
/* The adjoining drawer and photo share an unbroken inner edge. */
.has-photo-story .photo-story:not(.is-stacked) .photo-story-panel { border-right: 0; }
.has-photo-story .photo-story:not(.is-stacked) ~ .photo-viewer-sheet .photo-viewer-image::after { border-left: 0; }
.photo-story-content, .photo-story-roll { font-size: clamp(.875rem, .98vw, 1.0625rem); font-weight: 300; line-height: 1.6; letter-spacing: 0; text-transform: none; text-align: left; }
.photo-story-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y pinch-zoom; -webkit-overflow-scrolling: touch; outline: none; }
.photo-story-scroll::-webkit-scrollbar { display: none; }
.photo-story-scroll:focus-visible { outline: 1px solid currentColor; outline-offset: -5px; }
.photo-story-content { width: 100%; min-width: 0; padding: 10px clamp(22px, 1.8vw, 32px) var(--story-edge); text-align: justify; text-align-last: right; overflow-wrap: anywhere; }
.photo-story-content p { margin: 0 0 1.15em; }
.photo-story-content p:last-child { margin-bottom: 0; }
.photo-story strong { color: inherit; font-weight: 600; }
.photo-story-roll { position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; }
.photo-story-line { position: absolute; top: 0; left: 0; width: 100%; display: block; transform-origin: 50% 50%; backface-visibility: hidden; }
.photo-story-word { position: absolute; display: block; white-space: pre; text-align: left; }
.photo-story.is-rolled .photo-story-content { color: transparent; text-shadow: none; }
.photo-story.is-rolled .photo-story-content::selection, .photo-story.is-rolled .photo-story-content p::selection { background: #7e6c4940; color: transparent; }
.photo-story.is-stacked .photo-story-panel { transform: translateY(-100%); }
.has-photo-story .photo-story.is-stacked .photo-story-panel { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .photo-story-panel { transition: none; } .photo-story-next svg { animation: none; } }
@media (forced-colors: active) {
  .photo-story-panel { background: Canvas; color: CanvasText; text-shadow: none; border: 1px solid CanvasText; }
  .photo-story.is-rolled .photo-story-content { color: CanvasText; }
  .photo-story-roll { display: none; }
}

/* Non-scrolling viewport: focusing the drawer must not shift its clipping area. */
html.contact-open, html.contact-open body { overflow: hidden; }
.contact-dialog { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #57534f; overflow: clip; }
.contact-dialog::backdrop { background: transparent; }
.contact-dialog[open] { display: block; }
.contact-shade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: #100c092e; opacity: 0; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: opacity .5s ease; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.contact-drawer { position: absolute; inset: 0 0 0 auto; width: min(560px, calc(100% - 48px)); height: 100%; padding: max(88px, calc(env(safe-area-inset-top) + 64px)) 48px max(32px, env(safe-area-inset-bottom)); background: #eeece9; border-left: 1px solid #ffffff66; box-shadow: -12px 0 60px #00000012, inset 1px 0 0 #ffffff24; overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .52s cubic-bezier(.22, .8, .25, 1); }
.contact-dialog.is-visible .contact-drawer { transform: translateX(0); }
.contact-dialog.is-visible .contact-shade { opacity: 1; }
.contact-content { width: 100%; margin: 0; }
.contact-heading { margin: 0 0 38px; }
.contact-heading h1 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 200; letter-spacing: .045em; line-height: 1.35; margin: 0 0 20px; }
.contact-heading h1:focus { outline: none; }
.contact-email { display: inline-block; color: inherit; text-decoration: none; font-size: 17px; line-height: 1.6; letter-spacing: .015em; text-transform: none; }
.contact-email:hover { text-decoration: underline; text-underline-offset: 5px; }
.contact-heading p { color: #706c68; font-size: 12px; letter-spacing: .09em; line-height: 1.7; margin: 30px 0 0; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; font-size: 13px; }
.contact-form label { display: flex; flex-direction: column; gap: 9px; letter-spacing: .07em; font-weight: 200; line-height: 1.5; }
.contact-form input, .contact-form textarea { width: 100%; min-width: 0; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid #92929266; border-radius: 0; background: transparent; color: #454545; font-size: 16px; text-transform: none; outline: none; box-shadow: none; }
.contact-form textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #555; }
.contact-phone, .contact-message, .contact-actions, .contact-status { grid-column: 1 / -1; }
.contact-form .contact-honey { display: none; }
.contact-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 4px; }
.contact-submit { display: flex; gap: 28px; align-items: center; min-height: 44px; border: 0; border-bottom: 1px solid #92929266; padding: 10px 0; background: transparent; color: inherit; cursor: pointer; letter-spacing: .07em; }
.contact-submit:disabled { cursor: wait; opacity: .5; }
.contact-actions a { color: #888; text-decoration: none; line-height: 1.6; overflow-wrap: anywhere; }
.contact-status { min-height: 24px; margin: 0; line-height: 1.6; letter-spacing: .025em; }
.contact-status[data-error] { color: #98514f; }
.contact-close { position: absolute; top: max(22px, env(safe-area-inset-top)); right: max(22px, env(safe-area-inset-right)); display: grid; place-items: center; width: 48px; height: 48px; border: 0; background: transparent; color: #777; cursor: pointer; }
.contact-close span { position: relative; width: 20px; height: 20px; transform: rotate(45deg); }
.contact-close span::before, .contact-close span::after { content: ""; position: absolute; left: 0; top: 9px; width: 20px; height: 1px; background: currentColor; }
.contact-close span::after { transform: rotate(90deg); }
.contact-close:focus-visible, .contact-submit:focus-visible, .contact-email:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
.contact-status:focus { outline: none; }
[data-theme=dark] .contact-dialog { color: #c5c5c5; }
[data-theme=dark] .contact-drawer { background: #191919; border-color: #ffffff1c; box-shadow: -12px 0 60px #0003, inset 1px 0 0 #ffffff08; }
[data-theme=dark] .contact-shade { background: #0000003d; }
[data-theme=dark] .contact-heading p, [data-theme=dark] .contact-actions a { color: #999; }
[data-theme=dark] .contact-form input, [data-theme=dark] .contact-form textarea { color: #eee; border-color: #a0a0a066; }
[data-theme=dark] .contact-form input:focus, [data-theme=dark] .contact-form textarea:focus { border-color: #ccc; }
[data-theme=dark] .contact-close { color: #bbb; }
[data-theme=dark] .contact-status[data-error] { color: #dca4a2; }
/* Frost the scene, not the form. Keep solid fallbacks where backdrop blur is unavailable. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .contact-drawer { background: rgba(250, 248, 245, .82); backdrop-filter: blur(24px) saturate(.85); -webkit-backdrop-filter: blur(24px) saturate(.85); }
  [data-theme=dark] .contact-drawer { background: rgba(25, 25, 25, .80); }
}
@media (max-width: 560px) {
  .contact-drawer { padding: max(76px, calc(env(safe-area-inset-top) + 60px)) 24px max(28px, env(safe-area-inset-bottom)); }
  .contact-heading { margin-bottom: 30px; }
  .contact-form { grid-template-columns: minmax(0, 1fr); gap: 21px; }
  .contact-form textarea { min-height: 105px; }
  .contact-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) { .contact-drawer, .contact-shade { transition: none; } }