/* Prime Creation // page morphology policy v2
   This file configures layouts inside pages only. It does not own shell,
   viewport edges, activation, visibility, dock placement, or scrolling. */

:root{
  --prime-layout-gutter:clamp(.85rem,2.6vw,2.4rem);
  --prime-layout-gap:clamp(.8rem,1.8vw,1.65rem);
  --prime-layout-gap-wide:clamp(1.2rem,3.6vw,4.5rem);
  --prime-layout-min-card:clamp(13rem,22vw,18rem);
  --prime-layout-reading:72rem;
}

[data-prime-layout-config]{
  --prime-layout-columns:repeat(auto-fit,minmax(min(100%,var(--prime-layout-min,var(--prime-layout-min-card))),1fr));
  --prime-layout-rows:auto;
  --prime-layout-local-gap:var(--prime-layout-gap);
  --prime-layout-align:stretch;
  --prime-layout-justify:start;
  display:grid;
  grid-template-columns:var(--prime-layout-columns);
  grid-template-rows:var(--prime-layout-rows);
  gap:var(--prime-layout-local-gap);
  align-items:var(--prime-layout-align);
  justify-content:var(--prime-layout-justify);
  min-width:0;
  max-width:100%;
}
[data-prime-layout-config]>*{min-width:0;max-width:100%}
[data-prime-layout-config="stack"]{--prime-layout-columns:minmax(0,1fr)}
[data-prime-layout-config="pair"]{--prime-layout-columns:minmax(0,.85fr) minmax(0,1.15fr)}
[data-prime-layout-config="editorial"]{--prime-layout-columns:minmax(0,.72fr) minmax(0,1.28fr)}
[data-prime-layout-config="balanced"]{--prime-layout-columns:repeat(2,minmax(0,1fr))}
[data-prime-layout-config="cards"]{--prime-layout-min:15rem}
[data-prime-layout-config="dense"]{--prime-layout-min:11rem;--prime-layout-local-gap:clamp(.55rem,1.2vw,1rem)}

html[data-prime-viewport-authority] #main[data-app-shell]>[data-prime-viewport-module]{
  --prime-page-gutter:clamp(.9rem,3vw,3rem);
  --prime-page-gap:var(--prime-layout-gap);
}
html[data-prime-viewport-authority] #main[data-app-shell]>[data-prime-viewport-module] :where(*){min-width:0}
html[data-prime-viewport-authority] #main[data-app-shell]>[data-prime-viewport-module] :where(img,video,canvas,svg,iframe){max-width:100%}

/* Page 02 */
html[data-prime-viewport-authority] #intro .tab01-intro-zone{
  display:grid!important;
  grid-template-columns:minmax(7rem,.54fr) minmax(18rem,1.34fr) minmax(15rem,.9fr)!important;
  gap:var(--prime-layout-gap-wide)!important;
  align-items:start!important;
  width:min(calc(100% - (2 * var(--prime-page-gutter))),100rem)!important;
  margin-inline:auto!important;
}
html[data-prime-viewport-authority] #intro .tab01-services{
  width:min(calc(100% - (2 * var(--prime-page-gutter))),100rem)!important;
  margin-inline:auto!important;
}
html[data-prime-viewport-authority] #intro .service-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important}

/* Page 03 */
html[data-prime-viewport-authority] #music .music-copy,
html[data-prime-viewport-authority] #music :is(.exclusive-player,.resonance-player,.music-console){
  width:min(calc(100% - (2 * var(--prime-page-gutter))),var(--prime-layout-reading))!important;
  margin-inline:auto!important;
}

/* Page 04/05 */
html[data-prime-viewport-authority] #portfolio .portfolio-head,
html[data-prime-viewport-authority] #video .video-head{
  display:grid!important;grid-template-columns:minmax(0,1.12fr) minmax(16rem,.88fr)!important;gap:var(--prime-layout-gap-wide)!important;align-items:end!important
}
html[data-prime-viewport-authority] #video .video-grid{display:grid!important;grid-template-columns:minmax(0,1.42fr) minmax(15rem,.58fr)!important;gap:var(--prime-layout-gap)!important;align-items:stretch!important}
html[data-prime-viewport-authority] #video .video-list{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:var(--prime-layout-gap)!important}

/* Page 06 */
html[data-prime-viewport-authority] #book .pc-book-layout{
  display:grid!important;grid-template-columns:minmax(11rem,.72fr) minmax(18rem,1.28fr)!important;gap:var(--prime-layout-gap-wide)!important;align-items:center!important;
  width:min(calc(100% - (2 * var(--prime-page-gutter))),78rem)!important;margin-inline:auto!important
}

/* Page 07-10. The viewport contract chooses their top-level display mode. */
html[data-prime-viewport-authority] #sprite.sprite{grid-template-columns:minmax(16rem,.78fr) minmax(18rem,1.22fr)!important;gap:var(--prime-layout-gap-wide)!important;align-items:center!important}
html[data-prime-viewport-authority] #sprite>.radar{position:absolute!important;pointer-events:none!important}
html[data-prime-viewport-authority] #process.process{grid-template-columns:minmax(14rem,.7fr) minmax(19rem,1.3fr)!important;gap:var(--prime-layout-gap-wide)!important;align-items:start!important}
html[data-prime-viewport-authority] #studio .studio-layout{display:grid!important;grid-template-columns:minmax(16rem,.82fr) minmax(20rem,1.18fr)!important;gap:var(--prime-layout-gap-wide)!important;align-items:center!important}
html[data-prime-viewport-authority] #contact.contact{grid-template-columns:minmax(15rem,.76fr) minmax(18rem,1.24fr)!important;gap:var(--prime-layout-gap-wide)!important;align-items:center!important}
html[data-prime-viewport-authority] #contact>.contact-orbit{position:absolute!important;pointer-events:none!important}

@media(max-width:980px){
  html[data-prime-viewport-authority] #intro .tab01-intro-zone{grid-template-columns:minmax(7rem,.42fr) minmax(0,1.1fr)!important;gap:var(--prime-layout-gap)!important}
  html[data-prime-viewport-authority] #intro .tab01-intro-copy{grid-column:1/-1!important;max-width:var(--prime-layout-reading)!important}
  html[data-prime-viewport-authority] #intro .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html[data-prime-viewport-authority] #video .video-grid,
  html[data-prime-viewport-authority] #studio .studio-layout{grid-template-columns:minmax(0,1fr) minmax(14rem,.72fr)!important}
}

@media(orientation:portrait) and (max-width:760px){
  html[data-prime-viewport-authority] #main[data-app-shell]>[data-prime-viewport-module]{--prime-page-gutter:clamp(.78rem,4vw,1.25rem);--prime-layout-gap-wide:clamp(1rem,5vw,2rem)}
  html[data-prime-viewport-authority] #intro .tab01-intro-zone,
  html[data-prime-viewport-authority] #portfolio .portfolio-head,
  html[data-prime-viewport-authority] #video .video-head,
  html[data-prime-viewport-authority] #video .video-grid,
  html[data-prime-viewport-authority] #book .pc-book-layout,
  html[data-prime-viewport-authority] #sprite.sprite,
  html[data-prime-viewport-authority] #process.process,
  html[data-prime-viewport-authority] #studio .studio-layout,
  html[data-prime-viewport-authority] #contact.contact{
    grid-template-columns:minmax(0,1fr)!important;gap:var(--prime-layout-gap-wide)!important;align-items:stretch!important
  }
  html[data-prime-viewport-authority] #intro .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:470px){html[data-prime-viewport-authority] #intro .service-grid{grid-template-columns:minmax(0,1fr)!important}}

@media(orientation:landscape) and (max-height:600px){
  html[data-prime-viewport-authority] #main[data-app-shell]>[data-prime-viewport-module]{--prime-page-gutter:clamp(.6rem,2.2vw,1.4rem);--prime-layout-gap:clamp(.55rem,1.3vw,.95rem);--prime-layout-gap-wide:clamp(.75rem,2vw,1.6rem)}
  html[data-prime-viewport-authority] #sprite.sprite,
  html[data-prime-viewport-authority] #process.process,
  html[data-prime-viewport-authority] #studio .studio-layout,
  html[data-prime-viewport-authority] #contact.contact{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important;gap:var(--prime-layout-gap-wide)!important;align-items:start!important}
  html[data-prime-viewport-authority] #book .pc-book-layout{grid-template-columns:minmax(9rem,.55fr) minmax(0,1.45fr)!important;align-items:start!important}
  html[data-prime-viewport-authority] #video .video-grid{grid-template-columns:minmax(0,1.55fr) minmax(12rem,.45fr)!important}
}