/* Ring preview geometry: the header owns its height; the composition owns its gap. */
body::before{display:none!important}
.header::after{display:none}
.header{max-width:1100px;width:100%;padding:2px 5% 3px;background:#08080a}
.header .brand{display:block;width:100%;margin:0 auto;max-width:none}
.header .brand .masthead-image{display:block;width:min(520px,100%);height:auto;max-width:520px;margin:0 auto;-webkit-mask-image:none;mask-image:none}
.ring-composition{position:relative;width:min(1100px,100%);height:590px;margin:20px auto 0}
.ring-player{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
.player-wrap{width:450px;max-width:100%;background:#121214;border:1px solid #302e3a}
.player-wrap iframe{display:block;width:100%;height:316px;border:0}
.ring-slot{position:absolute;width:190px;z-index:1;text-align:center}
.ring-slot .portrait,.ring-slot .album{margin:0;text-align:center}
.ring-slot .photo-stage{position:relative;width:154px;height:154px;aspect-ratio:1;border-radius:50%;overflow:hidden;margin:0 auto;padding:0;border:0;background:#101014;line-height:0;isolation:isolate}
.ring-slot .photo-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;border-radius:50%;background:#101014;box-shadow:none;object-fit:cover;object-position:center;filter:grayscale(1)}
.ring-slot[data-ring-slot="album"] .photo-stage img{filter:none}
.ring-slot figcaption{display:block;width:190px;min-height:29px;margin:8px auto 0;color:#ddc7b0;font:italic 12px/1.2 Georgia,serif;white-space:nowrap;text-align:center}
.slot-12{left:50%;top:0;transform:translateX(-50%)}
.slot-130{right:16%;top:43px}.slot-3{right:0;top:50%;transform:translateY(-50%)}
.slot-430{right:16%;bottom:31px}.slot-6{left:50%;bottom:0;transform:translateX(-50%)}
.slot-730{left:16%;bottom:31px}.slot-9{left:0;top:50%;transform:translateY(-50%)}
.slot-1030{left:16%;top:43px}
.ring-controls{display:flex;justify-content:center;align-items:center;gap:13px;margin:24px auto 13px;color:#aaa6b4;font-size:11px}
.ring-controls a{text-decoration:underline;text-underline-offset:3px}.ring-controls button{background:transparent;border:0;color:#c9c6ff;text-decoration:underline;text-underline-offset:3px;font:inherit;padding:0}
.ring-controls button:focus-visible,.ring-controls a:focus-visible{outline:2px solid #c9c6ff;outline-offset:4px}
@media(max-width:1050px){.ring-composition{height:560px}.ring-slot{width:176px}.ring-slot .photo-stage{width:140px;height:140px}.ring-slot figcaption{width:176px}.slot-130,.slot-1030{top:55px}.slot-430,.slot-730{bottom:35px}}
@media(max-width:900px){.header{padding:3px 5px 5px}.header .brand{max-width:430px}.ring-composition{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;padding:8px 5% 7px;margin-top:18px}.ring-player{position:static;grid-column:1/-1;transform:none;order:-1;margin:0 auto}.ring-slot{position:static;width:auto;transform:none}.ring-slot .photo-stage{width:min(154px,100%);height:auto;aspect-ratio:1}.ring-slot figcaption{width:100%;min-height:29px;font-size:12px}.ring-controls{margin-top:24px}}
@media(max-width:520px){.header .brand{max-width:360px}.ring-composition{gap:10px 12px;padding-left:5%;padding-right:5%;margin-top:16px}.ring-slot .photo-stage{width:min(126px,100%)}.ring-slot figcaption{font-size:11px}.player-wrap iframe{height:316px}.ring-controls{gap:8px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.ring-controls button{transition:none}}

/* Final desktop geometry: natural masthead ratio and explicit player clearances. */
.header .brand .masthead-image{aspect-ratio:auto}
.ring-composition{height:560px;margin-top:20px}
.ring-slot .photo-stage{width:98px;height:98px}
.ring-slot figcaption{width:170px}
.slot-12{top:0}.slot-130{right:10%;top:22px}.slot-3{right:0;top:50%}
.slot-430{right:10%;bottom:10px}.slot-6{bottom:0}.slot-730{left:10%;bottom:10px}
.slot-9{left:0;top:50%}.slot-1030{left:10%;top:22px}
@media(max-width:1450px) and (min-width:901px){
 .header .brand{max-width:none}
 .header .brand .masthead-image{max-width:400px}
 .ring-composition{width:min(1050px,100%);height:516px;margin-top:18px}
 .ring-slot{width:145px}
 .ring-slot .photo-stage{width:80px;height:80px}
 .ring-slot figcaption{width:145px;font-size:11px}
 .slot-130,.slot-1030{top:18px}.slot-430,.slot-730{bottom:8px}
}
@media(max-width:900px){
 .ring-composition{height:auto;margin-top:18px}
 .ring-slot .photo-stage{width:min(154px,100%);height:auto}
}
@media(max-width:520px){.ring-composition{margin-top:16px}.ring-slot .photo-stage{width:min(126px,100%)}}