/* ASTRA MOTION page system after the film (spec §5, §9.1, §9.7–§9.9, §10.2, §4.3, §14.4; the world chain of 2026-10-28 sits in worlds.css). Loaded after the film sheets. Hidden states live only
   under html.fx; page.js adds .is-in/.is-lit/.is-done. !important only in print and the #inquiry [hidden] floor. Upper bounds .98 (E-49). */

/* E-24: UA margins in the new markup (zero specificity). */
:where(.pg,.pg-footer) :where(figure,dl,dd,h4){margin:0}
:where(.pg,.pg-footer) :where(ol,ul){margin:0;padding:0;list-style:none}
/* E-29: the JA voice on the page at (0,1,0); component rules written later win. */
:where(.pg,.pg-footer) [lang=ja],.pg-ja{font-size:var(--fs-ja);line-height:var(--lh-cjk);letter-spacing:.06em;color:var(--text-3)}
.pg-ja{margin-top:12px}

/* §14.4: without the engine there is no inquiry dialog and no motion toggle. */
html:is(:not(.js),.static-fallback) [data-inquiry]{display:none}
html:is(:not(.js),.static-fallback) #motion,html:is(:not(.js),.static-fallback) .site-header #motion{display:none}
html:is(:not(.js),.static-fallback) .pg-howto{display:none}

/* §5: page grid */
.pg-wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
@media (min-width:900px){
  .pg-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
  .pg-wrap>*{grid-column:1/-1}
}

/* §9.1 sections; E-33 neutralises the contract classes at (0,2,0) */
.pg{position:relative;isolation:isolate;overflow:clip;padding:var(--section-y) 0;background:var(--stage);border-top:1px solid var(--line-1);scroll-margin-top:var(--header-h);text-align:left}
.pg.studio-section,.pg.contact-section,.pg.work-collection{position:relative;z-index:auto;isolation:isolate;overflow:clip;margin:0;padding:var(--section-y) 0;background:var(--stage);border-top:1px solid var(--line-1);text-align:left}
.pg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--pg-light,none)}
.fx .pg::before{opacity:0;transition:opacity var(--d-7) var(--ease-std)}
.fx .pg.is-lit::before{opacity:1}
.pg-studio{--pg-light:radial-gradient(60% 50% at 0% 30%,rgba(117,191,232,.12),transparent 70%)}
/* E-32: focus. #bloom-featured keeps its legacy gold rings. */
:is(.pg,.pg-footer) :is(a,button,summary):not(.pg-feature *):focus-visible{outline:2px solid var(--focus);outline-offset:4px}
:is(.pg,.pg-feature):focus{outline:none}
/* E-34: scroll margins (Lenis reads scroll-margin-top as its offset). */
@media (max-width:899.98px){html:not(.js) :is(.pg,.world){scroll-margin-top:112px}}

/* §4.1: type roles */
.pg .pg-display{font:300 var(--fs-display)/var(--lh-display) var(--font-sans);letter-spacing:var(--tr-display);color:var(--text-1)}
.pg .pg-mega{font:300 var(--fs-mega)/.98 var(--font-sans);letter-spacing:-.05em;color:var(--text-1)}
:is(.pg-display,.pg-mega) em{color:var(--text-2)}
:is(.pg-display,.pg-mega)+.pg-ja{margin-top:20px}
/* Phones: the --fs-display (42px) and --fs-mega (56px) floors are wider than the column, so masked lines would re-wrap with orphans. */
@media (max-width:599.98px){.pg .pg-display{font-size:clamp(26px,8.4vw,42px)}.pg .pg-mega{font-size:clamp(36px,10.6vw,56px)}}
.slate,.pg-label{font:400 12px/1.5 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.pg-label [lang=ja]{margin-left:12px;font:400 13px/1.5 var(--font-ja);letter-spacing:.06em;text-transform:none}
.pg-lede{max-width:34em;font:400 var(--fs-lede)/1.6 var(--font-sans);color:var(--text-2);text-wrap:pretty}
.pg-body{max-width:38em;font:400 var(--fs-body)/var(--lh-body) var(--font-sans);color:var(--text-2);text-wrap:pretty}
.pg-fact{font:400 var(--fs-fact)/1.4 var(--font-sans);letter-spacing:-.015em;color:var(--text-1)}
.pg-gloss{font-size:13px;line-height:1.6;color:var(--text-3)}
/* E-30: Korean on the page; #bloom-featured (itself lang=ko) keeps its Manrope-first stack. */
.pg [lang=ko]:not(.pg-feature){font-family:var(--font-ko);word-break:keep-all;letter-spacing:-.01em}

/* §9.1: slate */
.slate{display:flex;align-items:center;gap:14px;margin-bottom:clamp(32px,4vw,56px)}
.slate-n{color:var(--text-1)}
.slate-rule{flex:0 0 clamp(48px,8vw,120px);height:1px;background:var(--line-2);transform-origin:0 50%}
.slate-ja{font:400 13px/1 var(--font-ja);letter-spacing:.06em;text-transform:none}

/* §9.1: masked headline lines (the member-name technique) */
.ln{display:block;overflow:hidden;padding:0 .04em .2em;margin-bottom:-.2em}
.ln>span{display:block}

/* §9.1: credits with end-credit leaders */
.pg-credits{margin:0}
.pg-credits>div{display:flex;align-items:baseline;gap:16px}
.pg-credits dt{flex:1;display:flex;align-items:baseline;gap:16px;font:400 12px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.pg-credits dt::after{content:"";flex:1;border-bottom:1px dotted var(--line-2);transform:translateY(-4px)}
.pg-credits dd{margin:0;font:500 var(--fs-credit)/1.2 var(--font-sans);letter-spacing:var(--tr-credit);text-transform:uppercase;color:var(--text-1)}
@media (max-width:599.98px){.pg-credits>div{display:block}.pg-credits dt::after{display:none}.pg-credits dd{margin-top:6px}}

/* §4.2 actions (.pg-button is global: the menu sheet uses it) */
.pg-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:0 28px;border:0;border-radius:var(--r-1);background:var(--text-1);color:var(--stage);font:600 15px/1 var(--font-sans);letter-spacing:0;white-space:nowrap;text-decoration:none;transition:background-color var(--d-1) var(--ease-std),transform var(--d-1) var(--ease-std),scale var(--d-0) var(--ease-std)}
@media (hover:hover) and (pointer:fine){.pg-button:hover{background:#fff;transform:translateY(-2px)}}
.pg-button:active{transform:none;background:var(--text-2)}
.pg-copy{background:none;letter-spacing:inherit}
.pg-copy{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line-3);border-radius:var(--r-pill);color:var(--text-1);white-space:nowrap;transition:border-color var(--d-1) var(--ease-std),background-color var(--d-1) var(--ease-std),opacity var(--d-1) var(--ease-std),scale var(--d-0) var(--ease-std)}
.pg-copy{gap:8px;min-width:44px;padding:0 14px;font:500 13px/1 var(--font-sans)}
@media (hover:hover) and (pointer:fine){.pg-copy:hover{border-color:var(--text-1);background:rgba(243,241,233,.06)}}
.pg-link{display:inline-flex;gap:10px;align-items:center;min-height:44px;border-bottom:1px solid var(--line-3);color:var(--text-1);font:500 14px/1 var(--font-sans);text-decoration:none;transition:border-color var(--d-1) var(--ease-std),opacity var(--d-1) var(--ease-std)}
@media (hover:hover) and (pointer:fine){.pg-link:hover{border-bottom-color:var(--text-1)}}
/* Arrow rule (§4.2): down/up moves on the page, north-east opens something */
:is(.pg-link,.pg-button) .i{transition:transform var(--d-1) var(--ease-std)}
.pg-button:focus-visible .i{transform:translate(2px,-2px)}
.pg-link:focus-visible .i:has(use[href="#i-ne"]){transform:translate(2px,-2px)}
.pg-link:focus-visible .i:has(use[href="#i-down"]){transform:translateY(2px)}
.pg-link:focus-visible .i:has(use[href="#i-up"]){transform:translateY(-2px)}
@media (hover:hover) and (pointer:fine){
  .pg-button:hover .i{transform:translate(2px,-2px)}
  .pg-link:hover .i:has(use[href="#i-ne"]){transform:translate(2px,-2px)}
  .pg-link:hover .i:has(use[href="#i-down"]){transform:translateY(2px)}
  .pg-link:hover .i:has(use[href="#i-up"]){transform:translateY(-2px)}
}
/* Press state: touch has no hover and universe.css removes the tap highlight. Small, so a swipe that starts on a control barely shows it. */
:is(.pg-link,.film-watch):active{opacity:.72}
/* Buttons, pills and icon buttons press with the individual `scale` property, so it composes with hover transforms (Motion Language v1).
   Text links keep the opacity press. */
@media (prefers-reduced-motion:no-preference){html:not(.reduced-motion) :is(.pg-button,.spine-cta,.sheet-cta,.pg-copy,.spine-skip,.dialog-close):active{scale:.97}}

/* §9.2: the past-film sentinel and the aurora line, at the top of the first section after the film (#work-collection) */
.pg-sentinel{position:absolute;top:0;left:0;width:100%;height:1px;pointer-events:none}
.pg-aurora{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--earth) 20%,var(--moon) 50%,var(--sun) 80%,transparent);opacity:.7;transform-origin:0 50%;pointer-events:none}

/* §9.3: the studio end card (#studio, then #contact): one line, the building, the credit. The world chain carries the work. */
.pg-end{border-top:0}
.pg-end.pg-studio{padding-top:clamp(96px,11vw,176px)}
.pg-end-body .pg-credits{margin-top:var(--s-6)}
.pg-photo{position:relative}
.pg-photo-frame{position:relative;aspect-ratio:1049/1500;overflow:hidden;background:var(--stage-2)}
.pg-photo-frame img{display:block;width:100%;height:100%;object-fit:cover}
.pg-photo figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-top:16px;font:400 12px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.pg-photo figcaption [lang=ja]{font:400 13px/1.5 var(--font-ja);letter-spacing:.06em;text-transform:none}
/* The LYRA window: the page's only clip-path animation. */
.pg-photo-diamond{position:absolute;left:100%;top:0;width:10px;height:10px;margin:-19px 0 0 9px;background:var(--text-1);transform:rotate(45deg)}
.fx .pg-photo:not(.is-in) .pg-photo-frame{clip-path:polygon(20% 64.95%,44.93% 35.05%,80% 35.05%,55.27% 64.95%)}
.fx .pg-photo .pg-photo-frame{clip-path:polygon(0% 100%,0% 0%,100% 0%,100% 100%);transition:clip-path var(--d-focal) var(--ease-expo)}
.fx .pg-photo.is-done .pg-photo-frame{clip-path:none;transition:none}
.fx .pg-photo:not(.is-in) .pg-photo-frame img{opacity:.55}
.fx .pg-photo .pg-photo-frame img{transition:opacity var(--d-focal) var(--ease-std)}
.fx .pg-photo:not(.is-in) .pg-photo-diamond{transform:translate(var(--lyra-dx,0px),var(--lyra-dy,0px)) rotate(45deg) scale(var(--lyra-s,1))}
.fx .pg-photo.is-in .pg-photo-diamond{transition:transform var(--d-focal) var(--ease-expo) 120ms}
@media (max-width:899.98px){.pg-photo{max-width:320px;margin-block:var(--s-7)}}
@media (min-width:900px){
  .pg-end-grid{grid-template-rows:auto 1fr}
  .pg-photo{grid-column:1/5;grid-row:1/3;align-self:start}
  .pg-end-head{grid-column:6/13;grid-row:1}
  .pg-end-body{grid-column:6/13;grid-row:2;align-self:end}
  .pg-end-body .pg-credits{margin-top:var(--s-7)}
}
@media (min-width:1200px){.pg-photo{grid-column:1/4}.pg-end-head,.pg-end-body{grid-column:5/13}}

/* §9.4: pieces the world chain reuses (worlds.css): the award line, the projector gate and the award-film note floors. */
.pg-award{display:flex;align-items:center;gap:14px;color:var(--gold)}
.pg-award>span{display:grid;gap:4px;min-width:0}
.pg-award strong{font:600 17px/1.5 var(--font-ko);letter-spacing:-.01em;color:var(--text-warm)}
.pg-award .pg-gloss{font-family:var(--font-sans)}
.pg-gate{--tick:linear-gradient(var(--line-3),var(--line-3));position:relative;padding:12px;background:var(--tick) 0 0/16px 1px,var(--tick) 0 0/1px 16px,var(--tick) 100% 0/16px 1px,var(--tick) 100% 0/1px 16px,var(--tick) 0 100%/16px 1px,var(--tick) 0 100%/1px 16px,var(--tick) 100% 100%/16px 1px,var(--tick) 100% 100%/1px 16px;background-repeat:no-repeat}
/* §4.3 floors (E-31: every row prefixed with .pg-feature). */
.pg-feature :is(.film-poster-caption,.film-play-prompt,.note-label){font-size:12px}
.pg-feature :is(.note-spoiler,.film-new-tab,.film-player-source,.film-player-status){font-size:13px}
.pg-feature .film-watch>span:not([aria-hidden]):not(.film-action-label){font-size:13px}
@media (max-width:899.98px){
  .pg-gate{padding:0;background:none;margin-inline:calc(var(--gutter)*-1)}
  .pg-feature .pg-frame{border-inline-width:0}
}
/* Projector gate (transform only). */
.fx .pg-gate::before,.fx .pg-gate::after{content:"";position:absolute;left:12px;right:12px;height:calc(50% - 11px);z-index:6;background:var(--stage);pointer-events:none;transition:transform var(--d-6) var(--ease-wipe) 150ms}
.fx .pg-gate::before{top:12px;transform-origin:50% 0}
.fx .pg-gate::after{bottom:12px;transform-origin:50% 100%}
.fx .pg-gate.is-in::before,.fx .pg-gate.is-in::after{transform:scaleY(0)}
@media (max-width:899.98px){.fx .pg-gate::before,.fx .pg-gate::after{left:0;right:0;height:50.5%}.fx .pg-gate::before{top:0}.fx .pg-gate::after{bottom:0}}

/* §9.7: 05 Contact (house lights up) */
.pg-house{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 60% at 50% 100%,rgba(255,242,218,.10),transparent 70%),var(--stage-2)}
.fx .pg-house{transition:opacity var(--d-house) var(--ease-std)}
.fx .pg-contact:not(.is-lit) .pg-house{opacity:0}
.pg-contact-main,.pg-howto{margin-top:var(--s-8)}
.pg-contact-actions{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;margin-top:var(--s-6)}
.pg-mailrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pg-copy-status{font-size:13px;line-height:1.5;color:var(--text-3)}
.pg-copy-status [lang=ja]{font-size:inherit;line-height:inherit;letter-spacing:.04em;color:inherit}
/* CP-22: a copied address answers in the pill itself (page.js swaps #i-copy for #i-check). The check draws its own stroke, the one
   stroke-dash animation on the page: stroke-dash* inherit through <use> into the pathLength=1 path and exist only under .is-copied. */
.pg-copy.is-copied{border-color:var(--text-1)}
@media (prefers-reduced-motion:no-preference){html.fx:not(.reduced-motion) .pg-copy.is-copied .i{stroke-dasharray:1;animation:pg-check var(--d-2) var(--ease-expo) both}}
@keyframes pg-check{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.pg-howto>div{padding-top:20px;border-top:1px solid var(--line-1)}
.pg-howto dt{font:400 12px/1.5 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.pg-howto dd{margin-top:12px;max-width:34em;font-size:14px;line-height:1.7;color:var(--text-2)}
.pg-howto dd [lang=ja]{display:block;margin-top:8px;font-size:13px;line-height:1.8}
@media (max-width:899.98px){.pg-contact-actions{flex-direction:column;align-items:stretch}.pg-contact-actions .pg-button{width:100%}}
@media (min-width:900px){.pg-contact-main{grid-column:1/8}.pg-howto{grid-column:8/13;align-self:end}}
@media (min-width:1200px){.pg-contact .pg-mega{grid-column:1/11}.pg-contact .pg-mega+.pg-ja{grid-column:1/9}.pg-howto{grid-column:9/13}}

/* §9.8: footer and end card */
.pg-footer{position:relative;overflow:clip;padding:var(--s-9) 0 0;background:var(--stage);border-top:1px solid var(--line-1)}
.pg-footer-grid{display:grid;row-gap:40px}
.pg-footer .brand{min-height:44px;font-size:13px;letter-spacing:.16em;color:var(--text-1);transition:opacity var(--d-1) var(--ease-std)}
.pg-footer .brand svg{width:27px;height:27px}
.pg-footer-brand p{margin-top:16px;font-size:14px;line-height:1.6;color:var(--text-2)}
.pg-footer-brand [lang=ja]{margin-top:6px;font-size:13px;line-height:1.8}
.pg-footer-nav{columns:2;column-gap:var(--grid-gap)}
.pg-footer-nav a,.pg-footer-meta a{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;line-height:1.3;color:var(--text-2);text-decoration:none;break-inside:avoid;transition:color var(--d-1) var(--ease-std),opacity var(--d-1) var(--ease-std)}
:is(.pg-footer-nav,.pg-footer-meta) a:hover{color:var(--text-1)}
.pg-footer-meta a .i{transition:transform var(--d-1) var(--ease-std)}
.pg-footer-meta a:is(:hover,:focus-visible) .i{transform:translateY(-2px)}
/* Press (text links, as §4.2): the brand and every footer link dim. */
.pg-footer :is(.brand,.pg-footer-nav a,.pg-footer-meta a):active{opacity:.72}
.pg-footer-meta p{margin-top:12px;font-size:12px;line-height:1.5;color:var(--text-3)}
@media (min-width:900px){.pg-footer-brand{grid-column:1/5}.pg-footer-nav{grid-column:5/9}.pg-footer-meta{grid-column:9/13}}
/* Centred by flex so any overflow is clipped evenly on both sides. */
.pg-endcard{display:flex;justify-content:center;margin:var(--s-8) 0 -1.5vw;font:300 clamp(56px,14.5vw,280px)/.8 var(--font-sans);letter-spacing:-.06em;color:#151b24;white-space:nowrap;text-align:center;user-select:none;-webkit-user-select:none}

/* §10.2: inquiry dialog skin and the §4.3 dialog floors. Complete under #inquiry: /music loads no universe.css and
   music.css resets every margin and padding, so the same skin renders on both pages. No glass: the backdrop is flat. */
#inquiry{width:min(590px,calc(100vw - 32px));max-height:88svh;overflow:auto;margin:auto;padding:clamp(24px,3vw,40px);background:var(--panel);border:1px solid var(--line-1);border-radius:0;color:var(--text-1);overscroll-behavior:contain}
#inquiry::backdrop{background:rgba(5,7,10,.86);backdrop-filter:none;-webkit-backdrop-filter:none}
#inquiry [hidden]{display:none!important}
#inquiry .dialog-close{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;font-size:18px;line-height:1;color:var(--text-3);cursor:pointer;transition:color var(--d-1) var(--ease-std),scale var(--d-0) var(--ease-std)}
#inquiry .dialog-close:focus-visible{color:var(--text-1)}
#inquiry .eyebrow{display:flex;align-items:center;gap:14px;font:400 12px/1.5 var(--font-mono);letter-spacing:.16em;color:var(--text-3)}
#inquiry .eyebrow::before{content:'';flex:0 0 48px;height:1px;background:var(--line-2)}
#inquiry h2{margin-top:20px;font:400 clamp(28px,3vw,36px)/1.15 var(--font-sans);letter-spacing:-.025em}
#inquiry .jp{margin-top:10px;font-size:13px;line-height:var(--lh-cjk);letter-spacing:.06em;color:var(--text-3)}
.dialog-intro{margin-top:14px;font-size:14px;line-height:1.7;color:var(--text-2)}
.dialog-intro span{display:block;margin-top:2px;font-size:13px;color:var(--text-3)}
#inquiry form{display:grid;gap:20px;margin-top:28px}
#inquiry label{display:block;font-size:13px;color:var(--text-2)}
#inquiry label>span{margin-left:10px;font-size:13px;color:var(--text-3)}
#inquiry :is(input,select,textarea){display:block;width:100%;margin-top:8px;padding:12px 0;font:400 14px/1.5 var(--font-sans);color:var(--text-1);background:transparent;border:0;border-bottom:1px solid var(--line-2);border-radius:0;transition:border-color var(--d-1) var(--ease-std)}
#inquiry :is(input,select,textarea):focus-visible{border-bottom-color:var(--text-1)}
#inquiry :is(a,button,input,select,textarea):focus-visible{outline:2px solid var(--focus);outline-offset:6px}
#inquiry textarea{resize:vertical}
#inquiry select{appearance:none;padding-right:24px}
#inquiry label:has(select){position:relative}
#inquiry label:has(select)::after{content:'';position:absolute;right:4px;bottom:22px;width:7px;height:7px;border-right:1px solid var(--text-2);border-bottom:1px solid var(--text-2);transform:rotate(45deg);pointer-events:none}
@supports (appearance:base-select){
  #inquiry select,#inquiry select::picker(select){appearance:base-select}
  #inquiry select::picker-icon{display:none}
  #inquiry select::picker(select){padding:6px 0;background:var(--panel);border:1px solid var(--line-2);border-radius:0;color:var(--text-1)}
  #inquiry option{padding:10px 16px}
}
@supports not (appearance:base-select){#inquiry option{background:var(--panel);color:var(--text-1)}}
#inquiry .delivery-note{font-size:13px;line-height:1.7;color:var(--text-3)}
#inquiry :is(.delivery-note,#draft-ready>p)>span{display:block;margin-top:2px;font-size:12px;color:var(--text-3)}
/* The submit and draft buttons are .pg-buttons (hover, press and focus come with the class), 52px tall in the panel. */
#inquiry .pg-button{min-height:52px;padding:0 24px;font-size:14px}
#inquiry #draft-ready{margin-top:28px}
#inquiry #draft-ready h3{font:600 20px/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--text-1)}
#inquiry #draft-ready h3::before{content:'';display:block;width:48px;height:1px;margin-bottom:16px;background:var(--line-2);transform-origin:0 50%}
#inquiry #draft-ready>p{margin:14px 0}
#inquiry #draft-ready>p:not(.delivery-note){font-size:13px;line-height:1.8;color:var(--text-2)}
#inquiry #draft-email{margin-top:4px}
#inquiry #draft-download{display:flex;align-items:center;gap:12px;width:max-content;min-height:44px;margin-top:12px;padding:0;border-bottom:1px solid var(--line-3);color:var(--text-1);font:500 14px/1 var(--font-sans);text-decoration:none;transition:border-color var(--d-1) var(--ease-std),opacity var(--d-1) var(--ease-std)}
@media (hover:hover) and (pointer:fine){
  #inquiry .dialog-close:hover{color:var(--text-1)}
  #inquiry #draft-download:hover{border-bottom-color:var(--text-1)}
}
/* Press: the draft link dims like a text link; the close button presses with the buttons (§4.2 scale list). */
#inquiry #draft-download:active{opacity:.72}
/* AM-10: two columns from 900px, so the submit button sits inside the first view at 1440x900. Name and Email pair up. */
@media (min-width:900px){#inquiry{width:min(720px,calc(100vw - 64px))}#inquiry form{grid-template-columns:1fr 1fr;column-gap:24px}#inquiry form>:not(label:nth-of-type(-n+2)){grid-column:1/-1}}
/* iOS Safari zooms the page into any focused control under 16px; restated after the skin at equal specificity. */
@media (pointer:coarse){#inquiry :is(input,select,textarea){font-size:16px}}
/* Motion (Language v1): page.js (K) grows the pressed CTA into the panel. The backdrop fades in at --d-3 and out at --d-2;
   on close the content goes first and the empty panel folds back into the CTA in --d-2 (page.js K), fading only in its
   last --d-0. The exit sits behind @supports (overlay:auto):
   without overlay, a delayed display would paint the closed dialog outside the top layer. Exiting layers never hit-test. */
html.fx #inquiry[open]::backdrop{transition:opacity var(--d-3) var(--ease-std)}
@starting-style{html.fx #inquiry[open]::backdrop{opacity:0}}
html.fx #inquiry:not([open])>*{opacity:0;transition:none}
#inquiry.is-growing>*{pointer-events:none}
@supports (overlay:auto){
  html.fx #inquiry:not([open]){opacity:0;pointer-events:none;transition:opacity var(--d-0) var(--ease-std) var(--d-1),overlay var(--d-2) allow-discrete,display var(--d-2) allow-discrete}
  html.fx #inquiry:not([open])::backdrop{opacity:0;pointer-events:none;transition:opacity var(--d-2) var(--ease-std),overlay var(--d-2) allow-discrete,display var(--d-2) allow-discrete}
}
html.fx #draft-ready:not([hidden]) h3::before{animation:rule-in var(--d-6) var(--ease-expo) both}
@keyframes rule-in{from{transform:scaleX(0)}}

/* §9.9 reveal catalogue */
.fx [data-reveal=slate] .slate-rule{transition:transform var(--d-6) var(--ease-expo)}
.fx [data-reveal=slate]>:not(.slate-rule){transition:opacity var(--d-3) var(--ease-std) 150ms}
.fx [data-reveal=slate]:not(.is-in) .slate-rule{transform:scaleX(0)}
.fx [data-reveal=slate]:not(.is-in)>:not(.slate-rule){opacity:0}
.fx [data-reveal=lines] .ln>span{transition:transform var(--d-5) var(--ease-expo)}
.fx [data-reveal=lines] .ln:nth-child(2)>span{transition-delay:var(--st-line)}
.fx [data-reveal=lines] .ln:nth-child(3)>span{transition-delay:calc(var(--st-line)*2)}
.fx [data-reveal=lines] .ln:nth-child(4)>span{transition-delay:calc(var(--st-line)*3)}
.fx [data-reveal=lines]:not(.is-in) .ln>span{transform:translate3d(0,112%,0)}
/* One beat per section, released by the headline's .is-in (no markup, no script): slate rule, label 150ms, lines 90ms
   apart, the JA line after the last line (420ms), then the body (480ms). Adjacent siblings only; any other order shows at once. */
.fx [data-reveal=lines]+.pg-ja{transition:opacity var(--d-4) var(--ease-std) calc(var(--st-line)*3 + 150ms)}
.fx [data-reveal=lines]:not(.is-in)+.pg-ja{opacity:0}
.fx .pg-contact [data-reveal=lines]~:is(.pg-contact-main,.pg-howto){transition:opacity var(--d-4) var(--ease-std) calc(var(--st-group)*4),translate var(--d-4) var(--ease-expo) calc(var(--st-group)*4)}
.fx .pg-contact [data-reveal=lines]:not(.is-in)~:is(.pg-contact-main,.pg-howto){opacity:0;translate:0 16px}
.fx [data-reveal=stagger]>*{transition:opacity var(--d-4) var(--ease-expo),transform var(--d-4) var(--ease-expo)}
.fx [data-reveal=stagger]>:nth-child(2){transition-delay:var(--st-group)}
.fx [data-reveal=stagger]>:nth-child(3){transition-delay:calc(var(--st-group)*2)}
.fx [data-reveal=stagger]>:nth-child(4){transition-delay:calc(var(--st-group)*3)}
.fx [data-reveal=stagger]:not(.is-per-item)>:nth-child(5){transition-delay:calc(var(--st-group)*3)}
/* CP-06: a list taller than 80% of the viewport (page.js .is-per-item) reveals row by row; rows that arrive together
   get --row-i 0..4 inline (360ms at most). Declared after the nth-child delays, which have the same specificity. */
.fx [data-reveal=stagger].is-per-item>*{transition-delay:calc(120ms + var(--row-i,0)*60ms)}
.fx [data-reveal=stagger]:not(.is-in):not(.is-per-item)>*{opacity:0;transform:translate3d(0,24px,0)}
.fx [data-reveal=stagger].is-per-item:not(.is-in)>:not(.is-in){opacity:0;transform:translate3d(0,24px,0)}
.fx [data-reveal=fade]{transition:opacity var(--d-4) var(--ease-expo),transform var(--d-4) var(--ease-expo)}
.fx [data-reveal=fade]:not(.is-in){opacity:0;transform:translate3d(0,16px,0)}
.fx [data-reveal=aurora]{transition:transform var(--d-7) var(--ease-expo)}
.fx [data-reveal=aurora]:not(.is-in){transform:scaleX(0)}
.fx [data-reveal=endcard]{transition:opacity var(--d-6) var(--ease-expo),transform var(--d-6) var(--ease-expo)}
.fx .pg-endcard:not(.is-in){opacity:0;transform:translateY(40px)}

@media print{
  [data-reveal],[data-reveal] *{opacity:1!important;transform:none!important;clip-path:none!important}
  .pg-photo-diamond{transform:rotate(45deg)!important}
  .pg-gate::before,.pg-gate::after{content:none!important}
  .pg::before,.pg-house{opacity:1!important}
  [data-reveal]~*,[data-reveal=stagger]>*{opacity:1!important;translate:none!important;transform:none!important}
}

/* House surfaces (Motion Language v1), shared by the homepage and /music. em is upright DM Serif Display everywhere
   (/music has no universe.css global em rule). Lenis adds lenis-smooth only while it is easing, so iframes stay clickable at rest. */
::selection{background:var(--text-1);color:var(--stage)}
html{scrollbar-color:var(--line-3) var(--stage)}
:where(input,textarea){caret-color:var(--text-1)}
:where(.pg,.pg-footer,dialog,.studio-bridge) em{font-family:inherit;font-weight:inherit;font-style:normal;color:var(--text-2)}
:where([lang=ja]){line-break:strict}
.pg :is(h3,h4):not(:has(.ln)){text-wrap:balance}
html.lenis.lenis-smooth iframe{pointer-events:none}