/* SuusStudio™ UI Design System V0.2 · Cinematic production integration */
:root{
  --ss-ui-focus:#f4d98f;
  --ss-ui-touch:48px;
  --ss-ui-text:#f5f0e9;
  --ss-ui-muted:rgba(255,255,255,.64);
  --ss-ui-line:rgba(255,255,255,.14);
}

/* Narrative order now lives canonically in src/cinematic-v4.jsx. */

/* Navigation has five primary destinations and 48px interaction targets. */
.v4-nav nav a{
  min-height:var(--ss-ui-touch);
  display:inline-flex;
  align-items:center;
  font-size:.72rem;
  letter-spacing:.1em;
}
.v4-hero-copy>a{min-height:var(--ss-ui-touch);display:inline-flex;align-items:center}

/* One clear focus system across keyboard-reachable controls. */
.v4-shell a:focus-visible,
.v4-shell button:focus-visible{
  outline:3px solid var(--ss-ui-focus);
  outline-offset:4px;
  box-shadow:0 0 0 2px #030304;
}
.v4-audit-trigger,.v4-audit>button,.v4-ai-nodes button{min-width:var(--ss-ui-touch);min-height:var(--ss-ui-touch)}

/* The internal audit only renders when ?uiAudit=1 is present. */
.v4-audit:not(.is-open){visibility:hidden;pointer-events:none}

/* Motion discipline: active-state motion stays, decorative scene sweep is removed. */
.v4-scene::after{display:none!important}
.v4-scene:not(.is-active) .v4-scene-head,
.v4-scene:not(.is-active) .v4-work-title{filter:none;opacity:.72;transform:translateY(10px)}

/* Components are allowed to respond to their own width. */
.v4-material,.v4-price,.v4-system-group article,.v4-work-scene{container-type:inline-size}
@container (max-width:360px){
  .v4-material,.v4-price,.v4-system-group article{padding:18px!important}
  .v4-material h3,.v4-price h3,.v4-system-group h4{overflow-wrap:anywhere;line-height:1.08}
}

/* Long technical labels may break, display headlines may not. */
.v4-nav a,.v4-system-group h4,.v4-capabilities span{overflow-wrap:anywhere}
.v4-scene h2,.v4-scene h3{overflow-wrap:normal;word-break:normal;hyphens:none}

@media (max-width:760px){
  body{padding-bottom:72px}
  .v4-nav nav{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    position:fixed;
    z-index:82;
    left:8px;
    right:8px;
    bottom:8px;
    gap:2px;
    padding:4px;
    overflow:hidden;
    border:1px solid var(--ss-ui-line);
    background:rgba(4,4,5,.94);
    backdrop-filter:blur(18px) saturate(130%);
    box-shadow:0 18px 60px rgba(0,0,0,.46);
  }
  .v4-nav nav a{
    width:auto;
    min-width:0;
    min-height:var(--ss-ui-touch);
    justify-content:center;
    padding:0 2px;
    font-size:.68rem;
    letter-spacing:.025em;
    white-space:nowrap;
    overflow:hidden;
  }
}

@media (max-width:400px){
  /* Release override: the React bundle loads its cinematic CSS after this file, so these narrow-mobile safeguards must win the cascade explicitly. */
  .v4-scene-head h2{
    max-width:none!important;
    font-size:clamp(2rem,9.5vw,2.55rem)!important;
    line-height:.92!important;
    letter-spacing:-.03em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }

  /* These two editorial headlines contain unusually long words. Scale the type, never amputate a letter. */
  #work .v4-scene-head h2,
  #worlds .v4-scene-head h2{
    font-size:clamp(1.72rem,8.6vw,2.15rem)!important;
    letter-spacing:-.025em!important;
  }

  .v4-world h3{font-size:clamp(2.05rem,9.5vw,2.7rem)!important;line-height:.92!important}
  .v4-work-title h3{font-size:clamp(2.25rem,10.5vw,2.85rem)!important;line-height:.91!important}
  .v4-contact>h2{font-size:clamp(3.55rem,16vw,4.45rem)!important;line-height:.74!important;letter-spacing:-.055em!important}
  .v4-contact>h3{font-size:clamp(1.8rem,8vw,2.45rem)!important;line-height:.93!important}

  /* Keep the Selected Work title clear of the persistent nav at 390px-class widths. */
  .v4-work-title{bottom:68px!important}

  /* Keep the founder identity frame prominent without letting the persistent bottom nav cover the founder headline. */
  .v4-about-photo{height:46vh!important;min-height:300px!important}
}

@media (max-width:340px){
  /* Keep all five canonical labels intact. Short WORK donates width to the longer destinations. */
  .v4-nav nav{
    grid-template-columns:.80fr 1.15fr .90fr 1fr 1.15fr!important;
    gap:1px;
    padding-inline:3px;
  }
  .v4-nav nav a{
    min-width:0;
    padding-inline:1px!important;
    font-size:.58rem!important;
    letter-spacing:0!important;
  }

  /* 320px needs a little more reserve than 390px. */
  .v4-work-title{bottom:88px!important}

  /* The 320px contact headline only needs a small optical reduction to keep the final punctuation inside the viewport. */
  .v4-contact>h2{font-size:3.38rem!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .v4-shell *, .v4-shell *::before, .v4-shell *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}