/* Monster High hallway — палитра от лого: бантик, перелив, золото, слива */
:root{
  --bow:#e8008a;--bow-deep:#8c0052;--sheen-a:#7cc8e8;--sheen-b:#84a8f0;--sheen-c:#e2c4de;--gold:#d8bc6c;
  --plum:#2a0c27;--plum-2:#43236f;--orchid:#aa61a9;--night:#120712;--ink:#1d1320;--paper:#fbf7fb;--fog:#efe6f1;--mute:#6b5d70;
  --radius:18px;--shadow:0 10px 30px rgba(42,12,39,.14);
  --display:"Righteous",system-ui,sans-serif;--text:"Familjen Grotesk",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--text);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--bow-deep)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.15;letter-spacing:.01em;margin:0 0 .5em}
button{font:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}

/* служебная строка */
.tannoy{margin:0;background:linear-gradient(90deg,var(--plum-2),var(--bow-deep));color:#fff;text-align:center;font-size:14px;padding:7px 16px;letter-spacing:.04em}
.tannoy span{opacity:.85}

/* шапка */
.crest{background:var(--night);position:sticky;top:0;z-index:30;border-bottom:3px solid transparent;border-image:linear-gradient(90deg,var(--sheen-a),var(--sheen-c),var(--bow),var(--gold)) 1}
.crest__in{max-width:1320px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:18px}
.crest__mark img{width:210px}
.crest__wings{flex:1}
.crest__wings ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 2px;justify-content:center}
.crest__wings a{display:block;color:#f3e9f5;text-decoration:none;font-size:15px;font-weight:600;padding:7px 10px;border-radius:999px;letter-spacing:.02em}
.crest__wings a:hover,.crest__wings a[aria-current]{background:rgba(232,0,138,.22);color:#fff}
.crest__cta .claim img{width:190px}
.crest__burger{display:none;background:none;border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:8px 10px;color:#fff;cursor:pointer;margin-left:auto;align-items:center;gap:4px;flex-direction:column}
.crest__burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}
.crest__burger em{font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase}

/* штамп */
.claim{background:none;border:0;padding:0;cursor:pointer;display:inline-block;transition:transform .15s,filter .15s}
.claim:hover{transform:translateY(-2px);filter:drop-shadow(0 6px 12px rgba(232,0,138,.35))}
.claim:active{transform:translateY(1px)}
.claim img{width:340px}
.claim--card{display:block;width:100%;margin-top:auto}
.claim--card img{width:100%}

/* хиро */
.gate{position:relative;background:var(--night);color:#fff;overflow:hidden;min-height:520px;display:flex;align-items:center}
.gate__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.gate::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,7,18,.95) 0%,rgba(18,7,18,.7) 45%,rgba(18,7,18,.1) 100%)}
.gate__words{position:relative;z-index:2;max-width:640px;padding:60px 20px 60px max(20px,calc((100vw - 1240px)/2 + 20px))}
.gate__kick{font-family:var(--display);text-transform:uppercase;letter-spacing:.2em;color:var(--sheen-a);margin:0 0 10px}
.gate h1{font-size:clamp(34px,5vw,58px);background:linear-gradient(100deg,#fff 0%,var(--sheen-c) 35%,var(--sheen-a) 65%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.gate__lede{font-size:18px;color:#eadff0;margin:0 0 26px}
.btn-bone{display:inline-block;background:#fff;color:var(--night);text-decoration:none;font-weight:700;padding:13px 30px;border-radius:4px;letter-spacing:.04em;text-transform:uppercase;font-size:15px;border:2px solid #fff;transition:background .15s,color .15s}
.btn-bone:hover{background:transparent;color:#fff}

/* чипсы */
.band{max-width:1240px;margin:0 auto;padding:34px 20px 8px;text-align:center}
.band__h{font-size:26px;color:var(--plum)}
.chips{list-style:none;margin:18px 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chips a{display:block;background:var(--gold);color:var(--night);text-decoration:none;padding:8px 18px;border-radius:999px;font-weight:600;font-size:15px;border:2px solid var(--gold)}
.chips a:hover,.chips .chips--on{background:var(--night);color:var(--gold)}

/* ленты-заголовки */
.ribbon{background:linear-gradient(90deg,var(--plum-2),var(--orchid) 70%,var(--sheen-c));color:#fff;text-align:center;padding:10px 16px;border-radius:10px;font-size:clamp(22px,3vw,30px);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.shelf{max-width:1240px;margin:0 auto;padding:30px 20px}

/* карточки */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.grid--mini{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.lc{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;padding:0 0 14px;border:1px solid var(--fog)}
.lc[hidden]{display:none}
.lc__pic{display:block;background:#fff;aspect-ratio:1;padding:12px;overflow:hidden;min-height:0;flex:none}
.lc__pic img{width:100%;height:100%;object-fit:contain}
.lc__body{padding:4px 16px 10px}
.lc__name{font-family:var(--text);font-weight:700;font-size:17px;line-height:1.3;margin:0 0 6px}
.lc__name a{color:var(--ink);text-decoration:none}
.lc__name a:hover{color:var(--bow)}
.lc__meta{margin:0;font-size:14px;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.lc__opts{background:var(--fog);border-radius:999px;padding:1px 10px;font-size:13px}
.lc__cost{font-family:var(--display);font-size:22px;color:var(--plum);margin:6px 0 0}
.lc .claim--card{padding:0 12px}
.moons{display:inline-block;width:86px;height:15px;background:linear-gradient(90deg,var(--bow) var(--fill),#d9cbdc var(--fill));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18'%3E%3Cg fill='%23000'%3E%3Cpath d='M9 1l2.4 5.4 5.6.5-4.3 3.8 1.3 5.6L9 13.4 4 16.3l1.3-5.6L1 6.9l5.6-.5z'/%3E%3Cpath transform='translate(20)' d='M9 1l2.4 5.4 5.6.5-4.3 3.8 1.3 5.6L9 13.4 4 16.3l1.3-5.6L1 6.9l5.6-.5z'/%3E%3Cpath transform='translate(40)' d='M9 1l2.4 5.4 5.6.5-4.3 3.8 1.3 5.6L9 13.4 4 16.3l1.3-5.6L1 6.9l5.6-.5z'/%3E%3Cpath transform='translate(60)' d='M9 1l2.4 5.4 5.6.5-4.3 3.8 1.3 5.6L9 13.4 4 16.3l1.3-5.6L1 6.9l5.6-.5z'/%3E%3Cpath transform='translate(80)' d='M9 1l2.4 5.4 5.6.5-4.3 3.8 1.3 5.6L9 13.4 4 16.3l1.3-5.6L1 6.9l5.6-.5z'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18'%3E%3Cg fill='%23000'%3E%3Cpath d='M9 1l2.4 5.4 5.6.5-4.3 3.8 1.3 5.6L9 13.4 4 16.3l1.3-5.6L1 6.9l5.6-.5z'/%3E%3Cpath transform='translate(20)' d='M9 1l2.4 5.4 5.6.5-4.3 3.8 1.3 5.6L9 13.4 4 16.3l1.3-5.6L1 6.9l5.6-.5z'/%3E%3Cpath transform='translate(40)' d='M9 1l2.4 5.4 5.6.5-4.3 3.8 1.3 5.6L9 13.4 4 16.3l1.3-5.6L1 6.9l5.6-.5z'/%3E%3Cpath transform='translate(60)' d='M9 1l2.4 5.4 5.6.5-4.3 3.8 1.3 5.6L9 13.4 4 16.3l1.3-5.6L1 6.9l5.6-.5z'/%3E%3Cpath transform='translate(80)' d='M9 1l2.4 5.4 5.6.5-4.3 3.8 1.3 5.6L9 13.4 4 16.3l1.3-5.6L1 6.9l5.6-.5z'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100% no-repeat;vertical-align:-2px}

/* персонажи (fandom) */
.rollcall{max-width:1240px;margin:0 auto;padding:30px 20px}
.rollcall__p{text-align:center;max-width:720px;margin:0 auto 22px;color:var(--mute)}
.rollcall__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.ghoul{background:var(--night);color:#f1e6f3;border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px;border:2px solid transparent;background-image:linear-gradient(var(--night),var(--night)),linear-gradient(135deg,var(--sheen-a),var(--bow),var(--gold));background-origin:border-box;background-clip:padding-box,border-box}
.ghoul__name{font-size:21px;color:#fff;margin:0;text-align:center}
.ghoul__pic{display:block;background:#fff;border-radius:12px;aspect-ratio:1;padding:8px;overflow:hidden;min-height:0}
.ghoul__pic img{width:100%;height:100%;object-fit:contain}
.ghoul__intro{font-size:14px;margin:0;line-height:1.45}
.ghoul__go{margin-top:auto;color:var(--sheen-a);font-weight:700;font-size:14px}

/* кинематографичные плиты (creations) */
.slab{background:var(--night);color:#fff;display:grid;grid-template-columns:1fr 1fr;align-items:center;max-width:1240px;margin:22px auto;border-radius:6px;overflow:hidden;min-height:340px}
.slab--1{background:linear-gradient(120deg,#1b0716,var(--plum-2))}
.slab--2{background:linear-gradient(120deg,#0d1220,#26214a)}
.slab__words{padding:38px}
.slab__words h2{font-size:clamp(30px,4.4vw,52px);text-transform:uppercase;line-height:1;margin-bottom:10px}
.slab__words p{margin:0 0 20px;color:#ddd0e3}
.slab__pic{width:100%;height:100%;max-height:420px;object-fit:contain;background:#fff}

/* плитки крыльев */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tile{position:relative;display:block;border-radius:14px;overflow:hidden;background:var(--bow-deep);text-decoration:none;color:#fff;min-height:150px}
.tile img{width:100%;height:150px;object-fit:cover;opacity:.55;transition:opacity .2s}
.tile:hover img{opacity:.35}
.tile__n{position:absolute;left:14px;bottom:30px;font-family:var(--display);font-size:20px;text-shadow:0 2px 8px #000}
.tile__c{position:absolute;left:14px;bottom:10px;font-size:13px;opacity:.9}

/* отзывы */
.howls{max-width:1240px;margin:0 auto;padding:30px 20px}
.howls__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.howl{margin:0;background:#fff;border-radius:var(--radius);padding:18px 20px;border-left:5px solid var(--bow);box-shadow:var(--shadow)}
.howl blockquote{margin:6px 0 10px}
.howl blockquote p{margin:0 0 6px}
.howl__t{font-weight:700}
.howl__stars{margin:0;display:flex;gap:8px;align-items:center}
.howl figcaption{font-size:14px;color:var(--mute)}

/* about */
.bulletin{max-width:1240px;margin:20px auto;padding:34px 20px;display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:start}
.bulletin h2{grid-column:1/-1;font-size:clamp(28px,3.4vw,40px);text-transform:uppercase;color:var(--plum)}
.bulletin__cols{columns:2 300px;column-gap:28px}
.bulletin__cols p{margin:0 0 14px;break-inside:avoid}
.bulletin img{border-radius:var(--radius)}

/* FAQ */
.whispers{max-width:960px;margin:0 auto;padding:30px 20px}
.whispers h2{font-size:clamp(26px,3vw,36px);color:var(--plum)}
.whisper{border-bottom:1px solid #d9cbdc}
.whisper summary{list-style:none;cursor:pointer;padding:16px 36px 16px 0;font-weight:700;position:relative}
.whisper summary::-webkit-details-marker{display:none}
.whisper summary::after{content:"›";position:absolute;right:6px;top:10px;font-size:26px;color:var(--bow);transition:transform .2s}
.whisper[open] summary::after{transform:rotate(90deg)}
.whisper p{margin:0 0 16px;color:#3c3040}

/* финал */
.lastbell{background:#000;color:#fff;display:grid;grid-template-columns:3fr 2fr;align-items:center;gap:20px;margin-top:20px}
.lastbell div{padding:30px;text-align:center}
.lastbell p{font-size:20px}

/* крыло */
.wingtop{background:#000}
.wingtop img{width:100%;max-width:1240px;margin:0 auto;max-height:380px;object-fit:contain}
.trail{font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--mute);padding:20px 0 6px;display:flex;flex-wrap:wrap;gap:8px}
.trail a{color:var(--mute);text-decoration:none}
.trail a:hover{color:var(--bow)}
.trail i{font-style:normal}
.wing__h{font-size:clamp(30px,4vw,46px);color:var(--plum);margin-top:6px}
.wing__lede{max-width:820px;font-size:18px}
.wing__h+.wing__lede+.chips{justify-content:flex-start}
.sieve{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;padding:14px 0 22px;border-bottom:1px solid #e3d6e5;margin-bottom:22px}
.sieve label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.sieve select,.picker select{font:inherit;font-size:15px;padding:9px 34px 9px 12px;border:1px solid #cdbcd1;border-radius:8px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e8008a' stroke-width='2'/%3E%3C/svg%3E") right 12px center no-repeat;-webkit-appearance:none;appearance:none;max-width:100%}
.sieve__n{margin-left:auto;color:var(--mute);font-size:14px}
.essay{max-width:900px}
.wrap.essay{max-width:960px;padding-bottom:30px}
.essay h1{font-size:clamp(30px,4vw,44px);color:var(--plum)}
.essay h2{font-size:26px;color:var(--plum);margin-top:30px}
.essay__lede{font-size:19px}
.essay__more{font-weight:600}
.file{border-top:2px dashed #e0cfe3;padding-top:10px;scroll-margin-top:90px}

/* шкафчик */
.lk{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;padding:10px 0 30px}
.album__big{margin:0;background:#fff;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0}
.album__big img{width:100%;height:100%;object-fit:contain}
.album__ths{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
.album__th{background:#fff;border:2px solid var(--fog);border-radius:10px;padding:4px;cursor:pointer;aspect-ratio:1;overflow:hidden;min-height:0}
.album__th img{width:100%;height:100%;object-fit:contain}
.album__th--on{border-color:var(--bow)}
.lk__wing{margin:0;text-transform:uppercase;letter-spacing:.14em;font-size:13px}
.lk__wing a{text-decoration:none}
.lk h1{font-size:clamp(28px,3.4vw,40px);color:var(--plum)}
.lk__moons{display:flex;gap:8px;align-items:center;margin:0 0 8px}
.lk__cnt{color:var(--mute);font-size:14px}
.lk__cost{font-family:var(--display);font-size:34px;color:var(--bow-deep);margin:4px 0}
.lk__stock{margin:0 0 10px;color:#2f7d4f;font-weight:600;font-size:14px}
.lk__lede{font-size:18px}
.picker{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}
.picker label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:14px;flex:1 1 150px;min-width:0}
.picker select{width:100%}
.lk__claim{margin:18px 0}
.lk__list{padding-left:20px;margin:18px 0}
.lk__list li{margin-bottom:6px}
.lk__list li::marker{color:var(--bow)}
.lk__specs{display:grid;grid-template-columns:1fr;margin:0;border:1px solid #e3d6e5;border-radius:12px;overflow:hidden}
.lk__specs div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 14px}
.lk__specs div:nth-child(odd){background:var(--fog)}
.lk__specs dt{font-weight:700;color:var(--plum)}
.lk__specs dd{margin:0}
.howls--locker{padding-left:0;padding-right:0}

.passcard{display:flex;flex-wrap:wrap;gap:16px 40px;background:#fff;border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);margin:18px 0}
.office ol{padding-left:22px}

/* подвал */
#hall{padding-bottom:40px}#hall:has(> .lastbell:last-child){padding-bottom:0}
.basement{background:#000;color:#d9cfdc;padding:40px 20px 20px}
.basement__top{display:flex;align-items:center;gap:18px;max-width:1240px;margin:0 auto 26px;flex-wrap:wrap}
.basement__cry{font-family:var(--display);font-size:clamp(20px,2.6vw,28px);margin:0;background:linear-gradient(100deg,var(--sheen-c),var(--sheen-a),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.basement__cols{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.basement h2{font-family:var(--text);font-weight:700;font-size:15px;color:#fff;text-transform:uppercase;letter-spacing:.1em}
.basement ul{list-style:none;margin:0;padding:0}
.basement li{margin:0 0 8px}
.basement a{color:#d9cfdc;text-decoration:none}
.basement a:hover{color:var(--sheen-a)}
.basement address{font-style:normal;line-height:1.7}
.basement__fine{max-width:1240px;margin:26px auto 0;border-top:1px solid #2c222e;padding-top:16px;font-size:13px;color:#8f8393}

@media (max-width:1100px){
  .crest__burger{display:flex}
  .crest__wings{position:absolute;left:0;right:0;top:100%;background:var(--night);display:none;padding:10px 16px 18px;border-bottom:3px solid var(--bow)}
  .crest.halls-open .crest__wings{display:block}
  .crest__wings ul{flex-direction:column;align-items:stretch}
  .crest__wings a{font-size:17px;padding:11px 12px}
  .crest__in{position:relative;flex-wrap:wrap}
}
@media (max-width:820px){
  .slab,.lk,.bulletin,.lastbell{grid-template-columns:1fr}
  .slab__pic{max-height:320px}
  .gate{min-height:0}
  .gate::after{background:linear-gradient(180deg,rgba(18,7,18,.55),rgba(18,7,18,.95))}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap,.shelf,.band,.rollcall,.howls,.whispers,.bulletin{padding-left:16px;padding-right:16px}
  .crest__in{padding:8px 12px;gap:10px}
  .crest__mark img{width:150px}
  .crest__cta{order:3;width:100%;display:flex;justify-content:center}
  .crest__cta .claim img{width:200px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .lc__body{padding:4px 10px 8px}
  .lc__name{font-size:15px}
  .lc .claim--card{padding:0 6px}
  .rollcall__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .claim img{width:100%;max-width:340px}
  .lk__specs div{grid-template-columns:1fr;gap:2px}
  .album__ths{grid-template-columns:repeat(4,1fr)}
  .sieve__n{margin-left:0}
}