/* The reference logo measures 14.9991 degrees; all three streams share one clock. */
html,body{background:var(--paper)}
.logo-viewport{height:calc(100svh - 100px - env(safe-area-inset-bottom,0px));height:calc(100dvh - 100px - env(safe-area-inset-bottom,0px));width:100%;overflow:auto;-webkit-overflow-scrolling:touch;scroll-behavior:auto;overscroll-behavior:contain;touch-action:none;background:var(--paper);scrollbar-width:thin}
.logo-stage{position:relative;min-width:100%;min-height:100%;background:var(--paper)}
.site-composition{position:absolute;left:96px;top:96px;width:2300px;height:2295.99px;background:transparent;transform-origin:0 0}
.mark-layout{--axis-thickness:44px;--axis-font-size:36px;--film-height:80px;--film-slot:124px;--film-gap:40px;position:relative;width:2300px;height:2295.99px;isolation:isolate;background:transparent}
.site-composition{ -webkit-text-size-adjust:100%;text-size-adjust:100%}
.site-composition,.site-composition button{font-family:'PFCatalog',Arial,sans-serif}
.site-composition :is(.about-section,.mass-section,.contact-section,.site-footer,.work-section){min-height:0;margin:0;padding:0;border:0;background:transparent}
/* Thumbnail cycles travel along the reference logo’s 15-degree diagonal. */
.site-composition .work-section{position:absolute;left:108.313px;top:869.414px;width:2152.71px;height:var(--film-slot);margin-top:calc(var(--film-slot)/-2);transform:rotate(15deg);transform-origin:0 50%;z-index:3;overflow:visible}
.site-composition .project-grid{position:relative;display:block;height:100%;overflow:hidden}
.film-orbit{width:100%;height:100%;transform-origin:50% 50%;transform-style:preserve-3d;will-change:auto}
.film-track{position:relative;display:flex;align-items:center;width:max-content;height:100%;will-change:auto}
.film-copy{display:flex;align-items:center;flex:none;gap:var(--film-gap);padding-right:var(--film-gap);height:100%;position:relative}
.site-composition .project-grid .project-card,.site-composition .project-grid .project-card:nth-child(3n){position:relative;flex:0 0 calc(var(--film-height)*16/9);grid-column:auto;min-width:0;width:calc(var(--film-height)*16/9);height:auto;margin:0;padding:0;display:block;background:var(--paper);transform:none;box-shadow:none}
.site-composition .project-image,.site-composition .project-card:nth-child(3n) .project-image{width:100%;max-width:100%;height:auto;margin:0;aspect-ratio:16/9;border:0;background:var(--paper);transform:none;box-shadow:none;transition:scale .35s cubic-bezier(.2,.8,.2,1);transform-origin:center;scale:1}
.site-composition .project-image img{will-change:auto;backface-visibility:visible;width:100%;height:100%;display:block;object-fit:cover;filter:none;transform:none;transition:none}
.site-composition .project-image:after{content:none!important;display:none!important}
.site-composition .project-info,.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.site-composition :is(a,button):focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* Continuous text passes behind the borderless diagonal content layer. */
.site-composition .horizontal-axis{position:absolute;left:3.1414%;top:50%;width:93.5428%;height:var(--axis-thickness);margin-top:calc(var(--axis-thickness)/-2);display:block;transform:none;z-index:1;overflow:hidden;clip-path:none}
.site-composition :is(.horizontal-axis,.work-section){touch-action:none}
.horizontal-track{position:relative;display:flex;align-items:center;width:max-content;height:100%;will-change:auto}
.text-cycle{position:relative;display:flex;align-items:baseline;flex:none;width:max-content;gap:22px;padding-right:22px;white-space:nowrap;font-size:var(--axis-font-size);font-weight:700;line-height:var(--axis-thickness);color:var(--ink)}
.site-composition .text-cycle :is(.about-section,.filters-section,.mass-section,.contact-section,.contact-meta,.site-footer){position:static;display:flex;align-items:baseline;flex:none;flex-direction:row;flex-wrap:nowrap;width:auto;gap:12px;margin:0;padding:0;border:0;text-align:left;transform:none;font-size:var(--axis-font-size);font-weight:700;line-height:var(--axis-thickness);letter-spacing:0;color:var(--ink);overflow:visible}
.site-composition .about-copy{width:auto;margin:0}
.site-composition .about-copy p{display:flex;align-items:baseline;gap:12px;width:max-content;font-size:var(--axis-font-size);font-weight:700;line-height:var(--axis-thickness);letter-spacing:0;max-width:none;margin:0;color:var(--ink)}
.site-composition .about-copy strong,.site-composition .text-cycle i{font-weight:700}
.site-composition .about-line{display:inline;white-space:nowrap}
.site-composition .about-line+.about-line{margin:0}
.site-composition .filter-row{display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:12px;margin:0;border:0}
.site-composition .filter{font:700 var(--axis-font-size)/var(--axis-thickness) 'PFCatalog',Arial,sans-serif;letter-spacing:0;padding:0;border:0;background:var(--paper);color:var(--ink);white-space:nowrap;text-align:left}
.site-composition .filter.active{box-shadow:inset 0 -2px var(--ink)}
.site-composition .mass-copy{order:0;max-width:none}
.site-composition .mass-copy h2,.site-composition .contact-section h2{font-size:var(--axis-font-size);font-weight:700;line-height:var(--axis-thickness);letter-spacing:0;margin:0;white-space:nowrap}
.site-composition .hub-controls{order:0;min-width:0}
.site-composition .hub-actions{display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:12px;flex-wrap:nowrap}
.site-composition .hub-actions .button{display:inline-flex;justify-content:center;align-items:baseline;gap:8px;width:auto;height:var(--axis-thickness);flex:none;margin:0;padding:0 16px;font:700 var(--axis-font-size)/var(--axis-thickness) 'PFCatalog',Arial,sans-serif;letter-spacing:0;white-space:nowrap;background:var(--ink);color:var(--paper);border:0;box-shadow:none}
.site-composition .hub-actions .button span{font-size:var(--axis-font-size);font-weight:700;line-height:var(--axis-thickness);margin:0}
.site-composition .contact-email{display:inline;max-width:none;font-size:var(--axis-font-size);font-weight:700;line-height:var(--axis-thickness);letter-spacing:0;padding:0;border:0;box-shadow:inset 0 -1px var(--ink);white-space:nowrap;word-break:normal}
.site-composition .contact-intro{width:auto;margin:0;font-size:var(--axis-font-size);font-weight:700;line-height:var(--axis-thickness);color:var(--ink)}
.site-composition .contact-meta,.site-composition .site-footer{font-size:var(--axis-font-size);font-weight:700;line-height:var(--axis-thickness);letter-spacing:0}
/* Every matrix letter remains upright while passing underneath the films. */
.site-composition .matrix-axis{position:absolute;left:calc(49.9127% - var(--axis-thickness)/2);top:3.1469%;width:var(--axis-thickness);height:93.5315%;margin:0;background:transparent;transform:none;z-index:2;pointer-events:none}
.matrix-window{position:absolute;left:0;width:var(--axis-thickness);overflow:hidden;background:var(--paper);pointer-events:auto}
.matrix-upper{top:0;height:50%}
.matrix-lower{bottom:0;height:50%}
.matrix-track{position:relative;display:flex;flex-direction:column;width:var(--axis-thickness);will-change:auto}
.matrix-copy{flex:none;width:var(--axis-thickness);padding:0;margin:0}
.matrix-letter{display:block;width:var(--axis-thickness);height:var(--axis-thickness);font:700 var(--axis-font-size)/var(--axis-thickness) 'PFCatalog',Arial,sans-serif;text-align:center;color:var(--ink);white-space:pre;transform:none}
.word-gap{color:transparent}
.matrix-axis:focus-visible{outline:none}
.matrix-axis:focus-visible .matrix-window{outline:2px solid var(--ink);outline-offset:4px}
.logo-view-controls{position:fixed;left:50%;bottom:calc(35px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:22px;padding:0;background:transparent;border:0;box-shadow:none;font:14px/1.4 'PFCatalog',Arial,sans-serif;color:var(--ink)}
.logo-view-controls button{border:0;background:transparent;color:var(--ink);padding:5px 10px;min-height:44px;min-width:44px;font:inherit;white-space:nowrap;transition:opacity .25s,scale .25s}
.logo-view-controls #logoFit{display:grid;place-items:center;padding:6px}
.logo-fit-image{display:block;width:32px;height:32px;object-fit:contain}
.logo-view-controls button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.logo-view-hint{position:fixed;left:0;right:0;bottom:calc(8px + env(safe-area-inset-bottom,0px));margin:0;padding:0 8px;text-align:center;color:var(--muted);font:12px/18px 'PFCatalog',Arial,sans-serif;pointer-events:none}
.logo-viewport.is-dragging,.logo-viewport.is-dragging *{cursor:grabbing!important;user-select:none}
body>.elite-gate{position:fixed;left:50%;top:50%;width:min(360px,calc(100% - 48px));max-width:none;margin:0;padding:32px;transform:translate(-50%,-50%);z-index:35;border:1px solid var(--ink);background:var(--paper);text-align:center;box-shadow:0 16px 60px rgba(0,0,0,.15);font-size:16px}
body>.elite-gate label,body>.elite-gate .elite-unlock,body>.elite-gate .elite-status{font-size:16px;line-height:1.5}
body>.elite-gate .elite-key-row{justify-content:center;flex-wrap:wrap}
.gate-close{position:absolute;right:10px;top:5px;padding:5px;width:44px;height:44px;border:0;background:var(--paper);font-size:24px;line-height:1}
.detail-info .eyebrow{font-size:16px;line-height:1.5}
.detail-info>p:not(.eyebrow){font-size:18px;line-height:1.6}
/* Controls have their own space; the moving artwork never runs underneath. */
body.project-open .logo-viewport,body.elite-open .logo-viewport{overflow:hidden}
.project-view{overscroll-behavior:contain}
.close-view{width:44px;height:44px;top:calc(16px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px))}
.detail-media{aspect-ratio:16/9}
body>.elite-gate input{font:400 18px/1.5 'PFCatalog',Arial,sans-serif;min-height:44px}
body>.elite-gate .elite-unlock{min-height:44px}
@media(max-width:1024px){
  .logo-view-controls{gap:0;padding:5px;max-width:calc(100% - 16px);font-size:13px}
  .logo-view-hint{font-size:11px;white-space:nowrap}
  .logo-view-controls button{padding-inline:6px;touch-action:manipulation}
  .logo-view-controls output{min-width:32px;font-size:11px}
  .project-view-inner{display:flex;flex-direction:column;align-items:stretch;min-height:100svh;gap:24px;padding:calc(80px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px))}
  .detail-media{width:100%;margin:0;flex:none;border:0;transform:none;box-shadow:none}
  .detail-media:hover{transform:none;box-shadow:none}
  .detail-info{width:100%;min-width:0}
  .detail-info h1{font-size:32px;line-height:1.1;letter-spacing:-.025em;overflow-wrap:anywhere;margin-bottom:20px}
  .detail-info .eyebrow{margin-bottom:12px}
  .detail-info>p:not(.eyebrow){max-width:none;margin-bottom:0}
}
@media(max-width:767px){.site-composition{left:32px;top:32px}}

@media(prefers-reduced-motion:reduce){.site-composition .project-image{transition:none}.site-composition .project-card:is(:hover,:focus-visible) .project-image{scale:1;transform:none}.film-orbit{transform:none!important}}

/* Bound paint to the thin rails instead of promoting entire repeated strips. */
.site-composition .project-grid,.site-composition .horizontal-axis,.matrix-window{contain:layout paint}

/* Thumbnail enlargement stays inside the diagonal rail. */
.site-composition .project-card .project-image{scale:1;transition:scale .85s cubic-bezier(.4,0,.2,1)}
.mark-layout{scale:1;transition:none}
.mark-layout.is-reading{--axis-font-size:26px}
/* Hover keeps the thumbnail geometry and image treatment unchanged. */
.site-composition .project-card:is(:hover,:focus-visible) .project-image{scale:1;box-shadow:none}
.site-composition .project-card:is(:hover,:focus-visible) .project-image img{transform:none;filter:none}


.logo-view-controls .hub-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-height:44px;margin:0;padding:5px 10px;background:transparent;color:var(--ink);border:0;font:inherit;line-height:1;white-space:nowrap;touch-action:manipulation}
.action-arrow{display:block;flex:none;width:12px;height:12px;overflow:visible}
.logo-view-controls .hub-action:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:600px){.logo-view-controls{gap:4px;font-size:12px;padding:5px}.logo-view-controls .hub-action{gap:5px;padding-inline:7px}.logo-fit-image{width:28px;height:28px}}


/* Only the selected view breathes; the toolbar's layout stays fixed. */
.logo-view-controls #logoFit[aria-pressed=true]{animation:mode-breathe 2.8s ease-in-out infinite;transform-origin:center}
@keyframes mode-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.logo-view-controls #logoFit[aria-pressed=true]{animation:none}}

/* The code field replaces Enter hub without adding another box or moving controls. */
.hub-login{position:relative;flex:none;height:44px}
.hub-login.is-entering #eliteTrigger{visibility:hidden}
.hub-inline-entry{position:absolute;inset:0;margin:0;padding:0 4px;display:flex;align-items:center;background:transparent;color:var(--ink);gap:2px}
.hub-inline-entry[hidden]{display:none!important}
.logo-view-controls .hub-inline-entry input{display:block;flex:1;min-width:0;width:0;height:44px;padding:0 2px;border:0;background:transparent;color:var(--ink);font:400 16px/44px 'PFCatalog',Arial,sans-serif;text-align:center;border-radius:0;outline:none}
.hub-inline-entry input::placeholder{color:var(--ink);opacity:.75;font-size:12px}
.hub-inline-entry input[aria-invalid=true]{box-shadow:inset 0 -2px #d25b51}
.logo-view-controls .hub-inline-entry button{display:grid;place-items:center;flex:none;width:28px;min-width:28px;height:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--ink)}

@media(hover:hover) and (pointer:fine){.site-composition .project-grid .project-card:is(:hover,:focus-visible) .project-image{scale:1.24;z-index:1}}
@media(prefers-reduced-motion:reduce){.site-composition .project-card .project-image{transition:none}}

/* White/black themes preserve original thumbnail and embedded-video colors. */
:root{--paper:#fff;--ink:#151515;--muted:#595959;color-scheme:light}
:root.night-mode{--paper:#000;--ink:#fff;--muted:#b5b5b5;--soft:#000;--line:#444;color-scheme:dark}
html.night-mode .logo-fit-image{filter:invert(1)}
.site-composition :is(a,button):focus-visible{outline-color:var(--ink)}
.logo-view-controls #nightMode[aria-pressed=true]{font-weight:700}
@media(hover:hover) and (pointer:fine){.logo-view-controls button:hover{scale:1.06;opacity:.7}}
body:is(.project-open,.elite-open) .logo-view-controls,body:is(.project-open,.elite-open) .logo-view-hint{visibility:hidden}
.project-view,.elite-room{inset:auto;left:0;top:0;min-height:0;max-width:none;max-height:none;background-color:var(--paper);color:var(--ink)}
.project-view-inner{min-height:100%;}
.elite-room{background-image:none}
.elite-room .elite-console-inner{min-height:100%}
@media(max-width:600px){.logo-view-controls{gap:14px;padding:0;font-size:13px}}

.elite-room{--acid:var(--ink)}
.elite-room:before{display:none}
.elite-room :is(.elite-console-head h2,.elite-close,.elite-kicker,.soundcloud-room label,.soundcloud-controls small,.soundcloud-controls a,.mass-chat,.mass-chat-empty,.mass-chat-note,.mass-chat-form input,.mass-chat-form textarea,.soundcloud-room input){color:var(--ink)}
.elite-room :is(.elite-close,.soundcloud-room,.soundcloud-room input,.soundcloud-controls a,.mass-chat,.mass-chat-head,.mass-chat-form input,.mass-chat-form textarea){border-color:var(--line)}
.elite-room :is(.room-mode.active,.soundcloud-room button,.soundcloud-controls button,.mass-chat-form button){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.elite-room .mass-chat{background:var(--paper);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}

/* Compact, proportional project typography on both desktop and mobile. */
.detail-info h1{font-size:clamp(24px,2.2vw,32px);font-weight:700;line-height:1.15;letter-spacing:-.025em;margin:0 0 20px;overflow-wrap:anywhere}
.detail-info .eyebrow{font-size:14px;line-height:1.5;letter-spacing:.08em;margin-bottom:14px}
.detail-info>p:not(.eyebrow){font-size:16px;line-height:1.6}
.logo-view-controls #nightMode{display:grid;place-items:center;padding:6px}
.theme-icon{display:block;width:32px;height:32px}
@media(max-width:600px){.theme-icon{width:28px;height:28px}}

/* The occluding strip is exactly thumbnail height: no border, outline, or halo. */
.site-composition .work-section:before{content:'';position:absolute;left:0;right:0;top:50%;height:var(--film-height);transform:translateY(-50%);background:var(--paper);border:0;box-shadow:none;pointer-events:none}
.site-composition .project-grid{z-index:1}
.site-composition .project-card.is-magnifying .project-image{scale:1.24;z-index:1}
@media(prefers-reduced-motion:reduce){.site-composition .project-card.is-magnifying .project-image{scale:1;transition:none}}

/* Project descriptions remain readable in either theme and at every zoom. */
.project-view{background:var(--paper)!important;touch-action:pan-x pan-y pinch-zoom;scroll-behavior:auto;overflow-anchor:none}
.project-view-inner{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.detail-info{min-width:0}
.detail-info #detailDescription{display:block;visibility:visible;opacity:1;color:var(--ink);font:400 16px/1.6 'PFCatalog',Arial,sans-serif;max-width:46ch;margin:0 auto;overflow-wrap:break-word;white-space:normal}
@media(max-width:1024px){.project-view-inner{min-height:100%;padding-bottom:48px}.detail-info #detailDescription{max-width:46ch}}

/* The logo control gently floats the complete three-axis artwork together. */
.mark-layout{transform-origin:center}
@media(hover:hover) and (pointer:fine){.mark-layout.is-logo-hovered{animation:artifact-float 3.2s ease-in-out infinite}}
@keyframes artifact-float{0%,100%{transform:translate(0,0) rotate(0);scale:1}50%{transform:translate(12px,-10px) rotate(.3deg);scale:1.015}}
@media(prefers-reduced-motion:reduce){.mark-layout.is-logo-hovered{animation:none}}

/* A minimal mail link shares the baseline and spacing of the social links. */
.site-composition .contact-meta .contact-email{display:inline-flex;align-self:center;align-items:center;justify-content:center;width:var(--axis-thickness);height:var(--axis-thickness);padding:5px;box-shadow:none;border:0}
.email-icon{display:block;width:100%;height:auto;overflow:visible}
.logo-viewport,.logo-viewport .mark-layout{user-select:none;-webkit-user-select:none;overflow-anchor:none}
.logo-viewport img{-webkit-user-drag:none}