/* Desktop type and controls from Lusion's deployed stylesheet.
 * Original selector families: #header, #home-hero, #home-reel,
 * #home-featured and .project-item. Load after the local adapters.
 * Wide composition follows the source 21:9 media query, not screen width.
 */
@media (min-width:813px) {
  /* Keep native scrolling, with the source page's own progress indicator. */
  html,body {scrollbar-width:none;-ms-overflow-style:none}
  html::-webkit-scrollbar,body::-webkit-scrollbar {display:none;width:0;height:0}
  /* Source #ui suppresses native text/link dragging during pointer effects. */
  .site-header,main,.footer-section {-webkit-user-select:none;user-select:none}
  main a {-webkit-user-drag:none}
  input,textarea,[contenteditable=true] {-webkit-user-select:text;user-select:text}
  :root {
    --desktop-section-type:clamp(.875rem,1vw,2rem);
    --desktop-header-base-type:clamp(1rem,1vw,1.5rem);
    /* Fit the enlarged wordmark and controls on one row on compact desktops. */
    --desktop-header-type:min(calc(var(--desktop-header-base-type) * 1.495),calc((100vw - 2 * var(--pad) - 24px) / 34));
    --desktop-window-radius:calc(.625 * var(--desktop-header-type));
    --desktop-header-control-height:calc(2.8 * var(--desktop-header-type));
    --desktop-cta-type:clamp(.875rem,1vw,1.75rem);
    --desktop-cross-type:clamp(.875rem,1vw,2rem);
    --desktop-section-padding-y:clamp(30px,4vw,50px);
    --desktop-header-window-gap:clamp(20px,2vw,36px);
    --desktop-header-window-top:calc(var(--desktop-section-padding-y) + var(--desktop-header-control-height) + var(--desktop-header-window-gap));
  }
  body {color:#000}
  .site-header {font-size:var(--desktop-header-type);top:var(--desktop-section-padding-y)}
  .wordmark {font-size:2em;font-weight:500;letter-spacing:0;white-space:nowrap;flex-shrink:0}
  .wordmark:has(svg) {font-size:1em}
  .wordmark svg {display:block;width:7.5em;height:auto}
  .header-actions {position:relative;gap:10.5em}
  .header-actions>.pill {
    font-size:.875em;font-weight:500;line-height:1.15;gap:.625em;
    height:3.2em;min-height:0;padding:0 1.125em 0 1.625em;
    border-radius:6.25em;
  }
  .header-actions>.pill.dark {position:absolute;left:4.5em;width:9.5em;background:#2b2e3a}
  .header-actions>.pill.dark .dot {width:.3125em;height:.3125em}
  .header-actions>.pill.dark .pill-arrow {font-size:1em;width:1em;height:1em;line-height:1}
  .header-actions>.sound-button {font-size:.875em;width:3.2em;height:3.2em}
  .header-actions>.menu-button {background:#e4e6ef;color:#000}
  .header-actions .two-dots {
    position:relative;display:block;width:1.15em;height:1.15em;
    font-size:1em;letter-spacing:0;color:transparent;flex-shrink:0;
  }
  .header-actions .two-dots::before,.header-actions .two-dots::after {
    content:"";position:absolute;top:50%;width:.3125em;height:.3125em;
    border-radius:100%;background:#000;transform:translateY(-50%);
  }
  .header-actions .two-dots::before {left:.1em}
  .header-actions .two-dots::after {right:.1em}

  .homepage-dom-ready .menu-overlay {
    width:19.38em;top:calc(var(--desktop-header-window-top) - var(--desktop-section-padding-y));
    max-height:calc(100svh - var(--desktop-header-window-top) - var(--desktop-section-padding-y));
    gap:.625em;
  }
  .homepage-dom-ready .menu-panel {padding:1em .3125em;border-radius:var(--desktop-window-radius)}
  .homepage-dom-ready .menu-panel>.dom-menu-link {font-size:1.625em;padding:.6153846em 1em}
  .dom-menu-link::after {right:1.2307692em;width:.3076923em;height:.3076923em;top:calc(50% - .1538462em)}
  .homepage-dom-ready .menu-about {padding:1.25em 1.875em;border-radius:var(--desktop-window-radius)}
  .homepage-dom-ready .menu-about>.dom-roll-text {font-size:1.625em}

  /* The desktop hero is now a single 3D window below the fixed navigation. */
  .hero-title {display:none}
  .hero {
    grid-template-rows:minmax(0,1fr);
    padding-top:var(--desktop-header-window-top);
  }
  .hero-visual,.homepage-dom-ready .hero-visual {grid-row:1;min-height:0;margin-top:0;border-radius:var(--desktop-window-radius)}
  .scroll-marker-label {font-size:var(--desktop-cross-type);font-weight:500}

  .intro[data-reel-motion] {font-size:var(--desktop-section-type)}
  .homepage-dom-ready .intro[data-reel-motion] .intro-title {
    font-size:10vw;letter-spacing:-.02em;left:-.03em;line-height:1;
  }
  .homepage-dom-ready .intro[data-reel-motion] .intro-title>.intro-first {
    padding-left:calc((100% - 11 * var(--gap)) / 6 + 2 * var(--gap));
  }
  .intro[data-reel-motion] .intro-copy {font-size:clamp(1rem,1.5vw,3rem);line-height:1.4;grid-column:7/span 6}
  .homepage-dom-ready .dom-original-cta {
    font-size:var(--desktop-cta-type);font-weight:500;line-height:1.15;
  }
  .intro[data-reel-motion] .intro-copy .dom-original-cta {font-size:var(--desktop-cta-type);margin-top:3em}
  .homepage-dom-ready .dom-original-cta .dot {opacity:1}
  .homepage-dom-ready .dom-original-cta .pill-arrow {font-size:1em}

  .homepage-dom-ready .work-heading h2 {font-size:8vw;line-height:.9;letter-spacing:-.02em;position:relative;left:-.07em}
  .work {
    --desktop-work-row-gap:100px;
    row-gap:var(--desktop-work-row-gap);
    padding-bottom:calc(var(--desktop-section-padding-y) + clamp(24px,3.5vh,48px));
  }
  .work-heading p {font-family:Aeonik,Arial,sans-serif;font-size:.9vw;line-height:1.4;letter-spacing:normal;text-transform:uppercase}
  .project-card .project-meta {padding-top:0}
  .project-card .project-view {display:none}
  .project-card .project-meta .tags {
    font-family:Aeonik,Arial,sans-serif;font-size:max(12px,.9vw);font-weight:400;
    line-height:1.4;letter-spacing:normal;margin:1.5em 0 1em;
  }
  .homepage-dom-ready .project-card .project-meta h3 {
    --project-title-cap-room:.3em;
    font-size:3vw;font-weight:400;line-height:1;letter-spacing:normal;
    /* CJK fallback glyphs need more headroom above the raised word wrappers.
     * Balanced margin/padding extends the clip without moving the title ink. */
    margin:calc(0em - var(--project-title-cap-room)) 0 0;left:-.06em;
    height:calc(1em + var(--project-title-cap-room));
    padding:var(--project-title-cap-room) 0 0;overflow:hidden;
  }
  .homepage-dom-ready .project-meta h3 .project-title-button>.dom-word {bottom:.2em}
  /* The local word wrappers raise the visible glyphs above the line-box center. */
  .dom-project-title-arrow {top:calc(var(--project-title-cap-room) - .05em)}
}
@media (min-width:813px) and (max-width:900px) {
  .work {--desktop-work-row-gap:65px}
}
@media (min-width:813px) and (hover:hover) {
  .homepage-dom-ready .header-actions>.pill.dark:hover {background:#0016ec}
  .homepage-dom-ready .header-actions>.menu-button:hover {background:#fff;color:#000}
  /* The generic pill hover used to hide this dot while the source CTA expands it. */
  .homepage-dom-ready .dom-original-cta:hover .dot {opacity:1}
}
@media (min-width:813px) and (min-aspect-ratio:21/9) {
  :root {
    --pad:max(6vw,60px);
    --desktop-section-type:clamp(.525rem,1vw,1.2rem);
    --desktop-header-base-type:clamp(.6rem,1vw,.9rem);
    --desktop-cta-type:clamp(.525rem,1vw,1.05rem);
    --desktop-cross-type:clamp(.525rem,1vw,1.2rem);
  }
  .homepage-dom-ready .intro[data-reel-motion] .intro-title {font-size:6.7vw}
  .intro[data-reel-motion] .intro-copy {font-size:clamp(.6rem,1.5vw,1.8rem);grid-column:8/span 3}
  .homepage-dom-ready .work-heading h2 {font-size:5.3vw}
  .work-heading p {font-size:.6vw}
  .project-card .project-meta .tags {font-size:max(12px,.6vw)}
  .homepage-dom-ready .project-card .project-meta h3 {font-size:2vw}
  .homepage-dom-ready .contact-section,.homepage-dom-ready .footer-section {font-size:var(--desktop-section-type)}
}

/* Sentence-length video names retain the rolling effect and wrap in the grid. */
.homepage-dom-ready .project-card:has(.project-title-button) .project-meta h3{
  height:auto;min-height:calc(1.25em + var(--project-title-cap-room,0em));
  line-height:1.25;padding-right:1.6em;padding-bottom:.1em;white-space:normal;
}
.homepage-dom-ready .project-card:has(.project-title-button) .project-meta h3 .project-title-button>.dom-word{line-height:1}

/* A recognizable playback affordance above the video card's GPU surface. */
.project-card[data-video] .project-view{
  display:flex;align-items:center;justify-content:center;z-index:4;
  --project-play-size:clamp(72px,6.3vw,120px);
  width:var(--project-play-size);height:var(--project-play-size);padding:0;
  border-radius:999px;background:rgb(255 255 255 / .84);color:#000;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.92);
  transition:opacity .18s ease,transform .18s ease;
}
.project-card[data-video] .project-view svg{display:block;width:42px;height:42px;opacity:.76}
.project-card[data-video].is-project-hovered .project-view{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(hover:none){.project-card[data-video] .project-view{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){.project-card[data-video] .project-view{transition:none}}

/* Covers and title text own their hit areas; the surrounding article is inert. */
button.project-image{display:block;width:100%;padding:0;border:0;cursor:pointer;clip-path:inset(0 round var(--radius))}
button.project-image.surface-ready{overflow:hidden}
button.project-image>img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
button.project-image:focus-visible{outline-offset:-4px}
.project-title-button{position:relative;display:inline-block;width:max-content;max-width:100%;padding:0;border:0;background:transparent;font:inherit;line-height:1;letter-spacing:inherit;text-align:left;white-space:normal;vertical-align:top;cursor:pointer;will-change:transform}

.project-tags-button{width:max-content;max-width:100%;padding:0;border:0;background:transparent;text-align:left;white-space:normal;cursor:pointer}

/* Empty slots keep the portfolio grid ready for the next uploaded videos. */
.project-card-pending .project-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#e6e8f1;border:1px solid rgba(41,44,56,.06);color:#737787;font-size:clamp(14px,1vw,20px);transform:none;cursor:default}
.project-placeholder-mark{font-size:clamp(36px,3vw,58px);font-weight:400;line-height:1;color:#8d92a4}
.project-card-pending button:disabled{cursor:default;opacity:1}