/* Арт и Шок · Atelier refresh A1 / 2026-11-10.
 * Visual-only, loaded after existing styles. No layout rewrites or hidden controls.
 * Principles: warm gallery surfaces, restrained motion, accessible focus, native scrolling.
 */
:root{
  --atelier-ink:var(--ink);
  --atelier-soft:#1d2226;
  --atelier-line:rgba(197,175,240,.21);
  --atelier-shadow:0 13px 37px rgba(0,0,0,.14);
}
body{background:radial-gradient(ellipse 65% 33% at 96% 2%,rgba(136,95,160,.12),transparent 76%),
  radial-gradient(ellipse 60% 32% at 4% 26%,rgba(101,78,115,.10),transparent 74%),var(--cream); color:var(--ink)}
header{box-shadow:0 3px 24px rgba(73,43,79,.05)}
#app .sectionHead h1,#app .gsEditorialHead h2{letter-spacing:-.025em}
#app .card,#app .panel,#app .badge,#app .gsPanel{
  border-color:var(--atelier-line);box-shadow:var(--atelier-shadow);
}
#app .card,#app .gsPanel{transition:transform .23s ease,box-shadow .23s ease,border-color .23s ease}
@media(hover:hover){
  #app .card:hover,#app .gsPanel:hover{transform:translateY(-2px);box-shadow:0 20px 43px rgba(64,36,72,.13);border-color:rgba(117,71,156,.25)}
}
#app .primary,#app .secondary,#app .s4aWorkItem,#app .s4aCarouselNav,
#app .gsRefThumb,nav button,header button{
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
@media(hover:hover){#app .primary:hover,#app .secondary:hover{transform:translateY(-1px)}}
#app .primary:focus-visible,#app .secondary:focus-visible,#app button:focus-visible,
#app a:focus-visible,header button:focus-visible,#app input:focus-visible,#app select:focus-visible,
#app textarea:focus-visible,.gsRefDialog button:focus-visible{
  outline:3px solid #8b5bd6;outline-offset:3px;
}
#app .gsPublic .gsHomeHero{position:relative;isolation:isolate}
#app .gsPublic .gsHomeHero:before{
  content:"";position:absolute;z-index:-1;pointer-events:none;inset:0;
  background:radial-gradient(circle at 90% 12%,rgba(219,174,215,.13),transparent 43%);
}
#app .gsPublic .homeArtworkWrap,#app .gsPublic .gsStudioPreview,
#app .s4aTeacherMediaColumn>.s4aTeacherShowcase{
  box-shadow:0 16px 39px rgba(67,40,78,.1);
}
#app .s4aTeacherShowcase{
  background:linear-gradient(137deg,rgba(31,35,40,.98),rgba(35,31,42,.96));
  border:1px solid var(--atelier-line);border-radius:17px;
}
#app .s4aShowcaseHead{gap:9px}
#app .s4aShowcaseHead h3{letter-spacing:.005em;font-family:Georgia,serif}
#app .s4aWorksTrack{
  scroll-snap-type:x mandatory;scroll-padding-inline:10px;
  overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#d2bfdc transparent;
}
#app .s4aWorkItem{
  scroll-snap-align:start;overflow:hidden;border-radius:13px;
  border:1px solid rgba(197,175,240,.20);background:#1d2025;color:#f4f1e8;
  box-shadow:0 7px 17px rgba(61,40,76,.07);transform:translateZ(0);
}
#app .s4aWorkThumb{object-fit:cover;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){
  #app .s4aWorkItem:hover{border-color:#9976c1;box-shadow:0 12px 24px rgba(61,40,76,.14)}
  #app .s4aWorkItem:hover .s4aWorkThumb{transform:scale(1.045)}
}
#app .s4aEmptyPortfolio{
  min-height:88px;padding:12px 14px;display:flex;align-items:center;gap:12px;
  border:1px dashed rgba(197,175,240,.40);border-radius:15px;
  background:linear-gradient(120deg,rgba(32,36,42,.95),rgba(39,33,47,.9));
  color:#ddd4e5;font-size:.86rem;line-height:1.45;
}
#app .s4aEmptyMark{font-size:1.55rem;color:#c5aff0;flex:none}
#app .gsArchiveHelper{
  margin:9px 0 17px;padding:12px 14px;border-radius:13px;
  background:#25212d;color:#e7dbf2;border-left:3px solid #c5aff0;
  font-size:.92rem;line-height:1.55;
}
.gsRefDialog .gsRefLoadNotice{
  background:#fff1eb;color:#6b3937;padding:11px 14px;border-radius:12px;
  max-width:650px;line-height:1.5;margin:12px 0;
}
.gsRefDialog .gsRefRetry{margin:0 0 12px;min-height:42px}
.gsRefDialog .gsRefThumb{border-radius:12px;overflow:hidden}
.gsRefDialog .gsRefThumb[aria-pressed="true"]{outline:2px solid #a877c9;outline-offset:2px}
#app .workshopCard{overflow:hidden}
#app .workshopCard .tag{letter-spacing:.02em}
#app .workshopCard .gsWorkshopPreview{overflow:hidden}
#app .workshopCard .gsWorkshopPreview img{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){#app .workshopCard .gsWorkshopPreview:hover img{transform:scale(1.025)}}
#app .s4aTeacherProfile .s4aTeacherPortrait{border-radius:15px}
#app .s4a3ArtworkImage{transition:filter .25s ease}
@media(min-width:800px){
  #app .gsPublic .gsEditorialHead h2{font-size:clamp(30px,2.8vw,44px)}
}
@media(max-width:560px){
  #app .card,#app .panel{border-radius:16px}
  #app .s4aEmptyPortfolio{min-height:75px}
  #app .s4aTeacherShowcase{padding:.65rem .55rem}
  #app .s4aWorkItem{flex-basis:136px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
}