@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(210px, 24vw, 330px); 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 { outline: 1px solid #62666d; outline-offset: 12px; border-radius: 24px; }
.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: 1px solid #888; outline-offset: 2px; border-radius: 4px; }
.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: 210px; } }
@media (max-height: 380px) { .brand-header { top: 10px; width: 155px; } }

/* 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-lines { fill: none; stroke: #9ba2a8; stroke-width: .7; opacity: .14; }
.grid-signal { fill: none; stroke: #9ba2a8; stroke-width: .75; opacity: 0; animation: grid-breathe var(--duration) ease-in-out var(--delay) infinite; }
.grid-bar { stroke-width: 1; }
#orb, .orbital-frame { z-index: 1; }
.branch-position, #hint { z-index: 2; }
@keyframes grid-breathe { 0%, 38%, 72%, 100% { opacity: 0; } 54% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .grid-signal { animation: none; 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 { outline: 1px solid #aaa; outline-offset: 4px; }
.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: 1px solid #d2d4d64d; border-radius: 3px; background: #ffffffb3; 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: 20px; font-size: var(--text-size); }
.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: 1px solid #999; outline-offset: -2px; }
.gallery-empty { position: absolute; top: 50%; left: 12px; right: 12px; margin: 0; padding: 65px 15px; transform: translateY(-50%); border: 1px solid #c3c8cb44; text-align: center; 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(180px, 48vw, 235px); 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; }
}

/* Only the plus remains visible until the footer is approached. */
.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); }
.corner-footer.is-open .footer-toggle span { transform: rotate(45deg); }
.footer-panel { position: absolute; right: 0; bottom: 53px; width: min(300px, calc(100vw - 44px)); padding: 23px 25px; border: 1px solid #d8d8d85c; background: #ffffffed; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease, visibility .22s; }
.corner-footer.is-open .footer-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.footer-panel nav { display: flex; flex-direction: column; gap: 19px; }
.footer-panel a { width: fit-content; color: #777; text-decoration: none; font-size: var(--text-size); letter-spacing: .09em; line-height: 1.5; }
.footer-panel a:hover { color: #b52a28; }
.footer-toggle:focus-visible, .footer-panel a:focus-visible { outline: 1px solid #999; outline-offset: 3px; }
.brand-signature { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.brand-signature:focus-visible { outline: 1px solid #bbb; outline-offset: 8px; }
.brand-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .45s ease; }
.brand-signature.is-writing .brand-ink { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .brand-ink, .footer-panel, .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: 220px; padding: 48px 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: 1px solid #aaa; outline-offset: 4px; }

.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%; }
}