/* Desktop follows the reference: full-bleed surfaces, a centered 1136px catalogue. */
.desktop-links,.hero-controls,.rail-controls{display:none}
@media(min-width:700px){
 :root{--catalog-width:1136px;--catalog-gutter:max(20px,calc((100% - var(--catalog-width))/2))}
 html[data-skin] .mobile-site{max-width:none;width:100%;border:0;padding-bottom:0;box-shadow:none}
 html[data-skin] .topbar{height:68px;padding:0 28px;gap:28px}
 .desktop-links{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:600}
 .desktop-links a:hover{color:var(--accent)}
 .topbar .menu-icon{display:none}
 html[data-skin] .hero{height:clamp(320px,24vw,380px);isolation:isolate;background:#080d12}
 .hero:before{display:none}
 html[data-skin] .hero .hero-art{width:100%;height:100%;inset:0;object-fit:cover;object-position:var(--asset-position,center 22%)!important;mask-image:none}
 html[data-skin] .hero-gradient{background:linear-gradient(0deg,#03070de8, #03070d66 32%,transparent 64%)}
 html[data-skin] .hero-caption{width:100%;left:0;top:auto;bottom:14px;transform:none;padding:0 24px;text-align:center}
 html[data-skin] .hero #hero-title{font-size:30px;line-height:1.12;letter-spacing:-.015em;margin:0 auto 8px;max-width:780px;text-shadow:0 2px 10px #000}
 html[data-skin] .hero p{font-size:16px;line-height:1.4;margin:0 auto 10px;max-width:650px;text-shadow:0 2px 8px #000}
 html[data-skin] .claim{width:390px;max-width:100%}
 .hero-controls{display:flex;position:absolute;left:24px;right:24px;top:45%;justify-content:space-between;pointer-events:none}
 .hero-controls button{pointer-events:auto}
 .hero-controls button,.rail-controls button{width:34px;height:34px;background:#080d1499;border:1px solid #ffffff30;border-radius:50%;font-size:20px;color:#fff}
 .hero-controls button:hover,.rail-controls button:hover{border-color:var(--accent);color:var(--accent)}
 .rail-controls{display:flex;gap:6px;margin-left:auto;margin-right:12px}
 .rail-controls button:disabled{opacity:.25;cursor:default}
 html[data-skin] .main-tabs{height:54px;width:calc(100% - 40px);max-width:1136px;margin:0 auto;background-repeat:repeat-x;background-size:390px 48px;justify-content:space-between;gap:0;padding-inline:12px}
 html[data-skin] .main-tabs a{flex:1;min-width:0;justify-content:center;gap:12px;font-size:22px;letter-spacing:.025em}html[data-skin] .main-tabs a span{width:34px;height:34px;flex:0 0 34px}
 html[data-skin] .surface--catalog{display:block;padding:0 0 32px}
 html[data-skin] .shelf{padding:18px var(--catalog-gutter) 16px}
 .shelf-heading{height:32px;margin-bottom:10px;padding-inline:12px}
 .shelf-heading h2,.latest>h2,.project-promo>h2{font-size:24px}
 .rail{gap:14px;padding:4px 12px 12px;scroll-padding-inline:12px}
 html[data-skin] .skin-card{width:208px;height:309.72px}
 html[data-skin] .skin-card-title{font-size:29px}
 html[data-skin] .skin-index{font-size:29px}
 html[data-skin] .art-item,html[data-skin] .art-card{width:160px}
 html[data-skin] .art-card{height:220px}
 html[data-skin] .small-banner{width:260px;height:156px}
 .card-meta{font-size:12px;margin-top:7px}
 html[data-skin] .streak{width:calc(100% - 40px);max-width:1112px;margin:18px auto 28px;min-height:140px}
 html[data-skin] .latest{padding:0 var(--catalog-gutter) 28px}
 html[data-skin] .latest .recent{width:320px;min-height:108px}
 html[data-skin] .latest .recent img{width:66px;height:86px}
 html[data-skin] .project-promo{padding:0 var(--catalog-gutter)}
 html[data-skin] .project-promo .vip-banner{min-height:250px;margin:0 12px 28px;padding:26px 26px 72px;background-size:auto,auto 100%}
 html[data-skin] .project-promo .project-copy{max-width:380px}
 html[data-skin] .project-promo .project-copy h3{font-size:36px}
 html[data-skin] .project-promo .promo-bottom{left:26px;right:auto;width:300px}
 html[data-skin] .activity{width:calc(100% - 40px);max-width:1112px;margin:0 auto}
 html[data-skin] .activity-row{min-height:62px;padding-inline:18px}
 html[data-skin] footer{display:block}
 html[data-skin] footer .surface--footer{padding:36px var(--catalog-gutter) 24px;display:grid;grid-template-columns:1fr 1fr;gap:22px 32px;align-items:center}
 html[data-skin] footer .footer-wordmark{grid-column:1/-1;font-size:48px;margin:0 0 12px;text-align:left;padding-left:12px}
 html[data-skin] footer .support{grid-column:2;grid-row:2/5;margin:0 12px;height:192px}
 html[data-skin] footer .presentation{margin:0 12px}
 html[data-skin] footer .tools{margin:0 12px;justify-content:flex-start;font-size:22px;gap:12px}
 html[data-skin] footer .formats{margin:0 12px;justify-content:flex-start}
 html[data-skin] .final-scene{position:relative;isolation:isolate;width:100%;height:660px;margin:0;overflow:hidden;background:#03090d}
 .final-scene:before{content:'';position:absolute;inset:-25px;z-index:-1;background:var(--footer-image) center/cover;filter:blur(35px) brightness(.3)}
 html[data-skin] .final-scene img{width:auto;max-width:100%;height:100%;margin-inline:auto;aspect-ratio:auto;object-fit:contain;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
 .footer-badges{justify-content:center;gap:50px;padding-top:24px}
 .footer-actions{padding-inline:var(--catalog-gutter)}
 html[data-skin] .bottom-nav{display:none}
 dialog{width:min(680px,90vw);padding:40px 28px 28px}
 dialog .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
 dialog .gallery img{height:220px}
 dialog #dialog-body>img{max-height:65vh;object-fit:contain}
}
@media(min-width:1000px){
 html[data-skin] .streak{text-align:left;padding:26px 28px 26px 134px;min-height:136px}
 html[data-skin] .streak .streak-icon{position:absolute;left:36px;top:36px;margin:0}
 html[data-skin] .streak-top{position:absolute;right:18px;top:10px;gap:12px}
 html[data-skin] .streak h2{margin:12px 0 8px;font-size:24px}
 html[data-skin] .streak p{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.rail{scroll-behavior:auto}}

.desktop-card{display:none}
@media(min-width:700px){.desktop-card{display:block}}

/* Full-width materials dissolve into the page at the empty desktop edges. */
@media(min-width:700px){
 html[data-skin] .main-tabs{width:100%;max-width:none;margin:0;padding-inline:var(--catalog-gutter)}
 html[data-skin] .topbar{padding-inline:max(28px,calc((100% - var(--catalog-width))/2 + 12px))}
 html[data-skin] .topbar,
 html[data-skin] .main-tabs,
 html[data-skin] main>.surface--catalog,
 html[data-skin] main>.ornament,
 html[data-skin] main>footer{position:relative}
 html[data-skin] .topbar::after,
 html[data-skin] .main-tabs::after,
 html[data-skin] main>.surface--catalog::after,
 html[data-skin] main>.ornament::after,
 html[data-skin] main>footer::after{
  content:'';position:absolute;inset:0;z-index:6;pointer-events:none;
  background-image:linear-gradient(to right,#080b0f,rgba(8,11,15,.65) 30%,transparent),linear-gradient(to left,#080b0f,rgba(8,11,15,.65) 30%,transparent);
  background-size:max(0px,calc((100% - var(--catalog-width))/2)) 100%;
  background-position:left top,right top;background-repeat:no-repeat;
 }
}
/* Studio block follows the mobile reading order on desktop as well. */
@media(min-width:700px){
 html[data-skin] footer .surface--footer{display:flex;flex-direction:column;align-items:center;gap:0;padding:36px calc(var(--catalog-gutter) + 12px) 28px}
 html[data-skin] footer .footer-wordmark{width:100%;max-width:1112px;text-align:center;padding:0;margin:0 0 32px}
 html[data-skin] footer .support{width:100%;max-width:1112px;flex:none;margin:0 0 28px}
 html[data-skin] footer .presentation{width:100%;max-width:1112px;margin:0 0 28px}
 html[data-skin] footer .tools{width:100%;max-width:1112px;justify-content:center;margin:0 0 22px;gap:14px 20px}
 html[data-skin] footer .formats{width:100%;max-width:1112px;justify-content:center;margin:0;gap:12px 16px}
}

/* Art viewer: only the artwork and one unobtrusive close control. */
html:has(dialog[open]){overflow:hidden}
html[data-skin] dialog.art-viewer{
 position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;
 margin:0;padding:64px 24px 32px;border:0;border-radius:0;outline:0;
 background:transparent;box-shadow:none;overflow:hidden;
}
html[data-skin] dialog.art-viewer::backdrop{background:rgba(4,7,12,.86);backdrop-filter:blur(12px)}
html[data-skin] dialog.art-viewer #dialog-body{width:100%;height:100%;display:grid;place-items:center}
html[data-skin] dialog.art-viewer .art-canvas>img{
 display:block;width:auto;height:auto;max-width:min(1600px,100%);max-height:calc(100dvh - 144px);
 min-width:0;min-height:0;object-fit:contain;margin:0;border:0;border-radius:2px;
 box-shadow:0 12px 70px color-mix(in srgb,var(--accent) 18%,transparent),0 16px 60px #0004;animation:art-reveal .2s ease-out;
}
html[data-skin] dialog.art-viewer .close{
 position:absolute;top:max(12px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));
 width:40px;height:40px;display:grid;place-items:center;padding:0;
 border:1px solid #ffffff26;border-radius:50%;background:#ffffff0d;color:#fff;
 font:20px/1 Arial,sans-serif;cursor:pointer;
}
html[data-skin] dialog.art-viewer .close:hover{background:#ffffff20}
html[data-skin] dialog.art-viewer .close:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:699px){html[data-skin] dialog.art-viewer{padding:64px 12px 24px}}
@keyframes art-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){html[data-skin] dialog.art-viewer img{animation:none}}

html[data-skin] dialog.art-viewer .art-canvas{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0;min-width:0;max-width:100%;max-height:100%}
html[data-skin] dialog.art-viewer figcaption{align-self:stretch;color:#ffffffa6;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-align:left;padding-left:2px}

/* Placement crops belong to the asset catalogue, never to modal source selection. */
html[data-skin] .small-banner{background-image:linear-gradient(transparent,#060c16c9),var(--asset-image);background-position:center,var(--asset-position,center);background-size:cover;background-repeat:no-repeat}
html[data-skin] .project-promo .vip-banner{background-image:linear-gradient(90deg,#101927ee,#10192755),var(--asset-image);background-position:center,var(--asset-position);background-size:auto,var(--asset-size);background-repeat:no-repeat}
html[data-skin] .art-card img{object-fit:var(--asset-fit,cover);object-position:var(--asset-position,center)}
html[data-skin] .gallery-item{padding:0;background:transparent;text-align:left;color:inherit}
html[data-skin] .gallery-item img{object-fit:contain}