@font-face{
  font-family:"Kinghood";
  src:url("assets/fonts/Kinghood.otf") format("opentype");
  font-display:swap;
}

:root{
  --wine:#8A5B49;
  --wine-dark:#6F463A;
  --green:#494C33;
  --green-dark:#373a28;
  --linen:#E6DECC;
  --taupe:#B29F88;
  --wenge:#393533;
  --ink:#292522;
  --white:#f7f3ea;
  --line:rgba(57,53,51,.20);
  --header-h:76px;
  --ease-dekor:cubic-bezier(.22,.78,.25,1);
  --hero-x:50%;
  --hero-y:54%;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--wine)}
body{
  margin:0;
  color:var(--ink);
  background:var(--linen);
  font-family:"Fahkwang","Helvetica Neue",Arial,sans-serif;
  font-weight:300;
  overflow-x:hidden;
  min-height:100svh;
}
body.is-intro{overflow:hidden}
img{display:block;max-width:100%}
button,a{font:inherit}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

h1,h2,h3{
  font-family:"Kinghood","Fahkwang","Helvetica Neue",sans-serif;
  font-weight:400;
  margin:0;
  letter-spacing:-.02em;
}
p{line-height:1.75}
.eyebrow{display:block;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;margin-bottom:18px}
.section{position:relative;min-height:calc(100svh - var(--header-h));overflow:hidden}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .72s ease,transform .72s ease}
.reveal.is-visible{opacity:1;transform:none}

/* =========================
   ENTRADA CINEMATOGRÁFICA
   ========================= */
.intro-gate{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:transparent;
  isolation:isolate;
}
.intro-gate.is-finished{visibility:hidden;pointer-events:none}
.intro-curtain{
  position:absolute;
  top:0;
  bottom:0;
  width:50.5%;
  z-index:0;
  background:var(--wine);
  transition:transform 1.45s var(--ease-dekor);
  will-change:transform;
}
.intro-curtain--left{left:0;transform-origin:left center}
.intro-curtain--right{right:0;transform-origin:right center}
.intro-brand{
  position:relative;
  z-index:2;
  width:min(78vw,640px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:42px;
  opacity:1;
  transform:translateY(-1vh) scale(1);
  transition:opacity .52s ease .14s,transform .62s var(--ease-dekor);
}
.intro-brand img{width:min(58vw,510px);max-height:190px;object-fit:contain}
.enter{
  background:none;
  border:0;
  color:var(--linen);
  letter-spacing:.34em;
  font-size:.69rem;
  padding:14px 22px;
  position:relative;
  text-transform:uppercase;
}
.enter__line{width:32px;height:1px;background:var(--linen);display:block;margin:11px auto 0;transition:width .32s ease}
.enter:hover .enter__line,.enter:focus-visible .enter__line{width:72px}
.enter:focus-visible{outline:1px solid rgba(230,222,204,.72);outline-offset:8px}
.intro-gate.is-opening .intro-brand{opacity:0;transform:translateY(-1vh) scale(.94)}
.intro-gate.is-opening .intro-curtain--left{transform:translateX(-101%)}
.intro-gate.is-opening .intro-curtain--right{transform:translateX(101%)}

/* VINILO / AUDIO */
.vinyl-control{
  position:fixed;
  top:28px;
  right:30px;
  z-index:230;
  width:82px;
  height:82px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--linen);
  display:grid;
  place-items:center;
  transition:width .35s ease,height .35s ease,top .35s ease,right .35s ease,background .35s ease,box-shadow .35s ease;
}
.vinyl-control:focus-visible{outline:1px solid var(--linen);outline-offset:6px}
.vinyl-disc{
  position:relative;
  width:62px;
  height:62px;
  border:1px solid rgba(230,222,204,.92);
  border-radius:50%;
  display:block;
  background:
    repeating-radial-gradient(circle at center,rgba(230,222,204,.14) 0 1px,transparent 1px 4px),
    rgba(230,222,204,.045);
  box-shadow:inset 0 0 0 8px rgba(230,222,204,.02);
}
.vinyl-disc__ring{position:absolute;border-radius:50%;border:1px solid rgba(230,222,204,.36);inset:10px}
.vinyl-disc__ring--2{inset:20px;border-color:rgba(230,222,204,.52)}
.vinyl-disc__label{position:absolute;inset:22px;border-radius:50%;background:var(--linen);opacity:.94}
.vinyl-disc__hole{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:var(--wine);transform:translate(-50%,-50%)}
.vinyl-control.is-playing .vinyl-disc{animation:vinylSpin 5.8s linear infinite}
.music-note{
  position:absolute;
  color:var(--linen);
  font-size:.78rem;
  opacity:0;
  pointer-events:none;
}
.music-note--1{right:7px;top:8px}
.music-note--2{right:-2px;top:31px;font-size:.68rem}
.music-note--3{right:13px;top:-1px;font-size:.58rem}
.vinyl-control.is-playing .music-note--1{animation:noteFloat 3.9s ease-in-out .2s infinite}
.vinyl-control.is-playing .music-note--2{animation:noteFloat 4.8s ease-in-out 1.7s infinite}
.vinyl-control.is-playing .music-note--3{animation:noteFloat 5.4s ease-in-out 3.1s infinite}
body:not(.is-intro) .vinyl-control{
  top:88px;
  right:18px;
  width:50px;
  height:50px;
  z-index:85;
  background:rgba(180,106,85,.88);
  box-shadow:0 10px 30px rgba(36,25,21,.16);
  backdrop-filter:blur(8px);
}
body:not(.is-intro) .vinyl-disc{width:34px;height:34px}
body:not(.is-intro) .vinyl-disc__ring{inset:6px}
body:not(.is-intro) .vinyl-disc__ring--2{inset:11px}
body:not(.is-intro) .vinyl-disc__label{inset:12px}
body:not(.is-intro) .music-note{font-size:.58rem}
@keyframes vinylSpin{to{transform:rotate(360deg)}}
@keyframes noteFloat{
  0%,18%{opacity:0;transform:translate(0,4px) scale(.8)}
  34%{opacity:.9}
  78%{opacity:.68}
  100%{opacity:0;transform:translate(11px,-28px) scale(1.08)}
}

/* =========================
   PORTADA ESTACIONAL
   V3.1 · navegación editorial premium
   ========================= */
.portal-view{
  position:relative;
  min-height:88svh;
  height:88svh;
  background:#191513;
  overflow:hidden;
}
.portal-view::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:26%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(18,14,12,0) 0%,rgba(18,14,12,.08) 32%,rgba(18,14,12,.42) 100%);
}
.portal-view__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--hero-x) var(--hero-y);
  filter:none;
  transform:none;
}
.portal-nav{
  position:absolute;
  left:50%;
  bottom:clamp(34px,5.4vh,62px);
  transform:translateX(-50%);
  width:min(1160px,calc(100% - 86px));
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  column-gap:clamp(24px,3.4vw,58px);
  row-gap:14px;
  z-index:3;
}
.portal-node{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(246,244,239,.96);
  font-family:"Fahkwang","Helvetica Neue",sans-serif;
  font-weight:300;
  font-size:clamp(.64rem,.76vw,.78rem);
  line-height:1.25;
  letter-spacing:.115em;
  text-transform:uppercase;
  white-space:nowrap;
  padding:8px 0 10px;
  text-shadow:0 2px 12px rgba(0,0,0,.68),0 1px 2px rgba(0,0,0,.9);
  transition:transform .32s var(--ease-dekor),color .28s ease,opacity .28s ease;
}
.portal-node::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:3px;
  width:0;
  height:1px;
  background:rgba(246,244,239,.9);
  transform:translateX(-50%);
  transition:width .34s var(--ease-dekor),opacity .28s ease;
  opacity:.86;
}
.portal-node:hover,.portal-node:focus-visible{
  color:#fff;
  transform:translateY(-3px);
  outline:none;
}
.portal-node:hover::after,.portal-node:focus-visible::after{width:100%}
.portal-node--shop{font-weight:400}

/* =========================
   NAVEGACIÓN POR MÓDULOS
   ========================= */
.site-header{
  height:var(--header-h);
  background:rgba(230,222,204,.96);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:190px 1fr auto;
  align-items:center;
  gap:22px;
  padding:0 32px;
  position:sticky;
  top:0;
  z-index:70;
  backdrop-filter:blur(12px);
}
body[data-view="inicio"] .site-header,
body[data-view="inicio"] .footer{display:none}
.site-brand img{height:50px;width:auto;object-fit:contain}
.desktop-nav{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.1vw,34px)}
.desktop-nav a{text-transform:uppercase;font-size:.57rem;letter-spacing:.16em;position:relative;padding:29px 0 25px;white-space:nowrap}
.desktop-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:18px;height:1px;background:var(--wine);transition:right .28s ease}
.desktop-nav a:hover::after,.desktop-nav a.is-current::after{right:0}
.header-actions{display:flex;align-items:center;gap:14px}
.shop-link{display:flex;align-items:center;gap:8px;text-transform:uppercase;font-size:.58rem;letter-spacing:.16em}
.shop-link svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3;transition:transform .25s ease,color .25s ease}
.shop-link:hover svg{transform:translateY(-3px);color:var(--wine)}
.mobile-menu-button{display:none;border:0;background:none;width:38px;height:38px}
.mobile-menu-button span{display:block;width:20px;height:1px;background:var(--wenge);margin:6px auto}
.mobile-menu{position:fixed;inset:var(--header-h) 0 auto 0;background:var(--wenge);color:var(--linen);z-index:69;padding:28px;display:none}
.mobile-menu.is-open{display:grid;gap:16px}
.mobile-menu a{font-size:1rem;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12)}

.content-view{animation:viewReveal .66s var(--ease-dekor) both}
@keyframes viewReveal{
  0%{opacity:0;clip-path:inset(4% 2% 4% 2%);transform:translateY(18px)}
  100%{opacity:1;clip-path:inset(0 0 0 0);transform:none}
}
.view-back{
  position:absolute;
  top:20px;
  left:28px;
  right:auto;
  z-index:8;
  border:0;
  background:rgba(230,222,204,.74);
  color:var(--wenge);
  padding:10px 13px;
  text-transform:uppercase;
  font-size:.55rem;
  letter-spacing:.16em;
  backdrop-filter:blur(8px);
}
.view-back--light{background:rgba(230,222,204,.12);color:var(--linen);border:1px solid rgba(230,222,204,.25)}

/* HISTORIA */
.history{min-height:auto;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);background:var(--linen)}
.history__photo{min-height:72svh;overflow:hidden;background:var(--taupe)}
.history__photo img{width:100%;height:100%;object-fit:cover;object-position:center 61%;transition:transform .7s var(--ease-dekor)}
.history__photo:hover img{transform:scale(1.02)}
.history__copy{padding:clamp(42px,5vw,78px) clamp(36px,6vw,88px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.history__copy h1{font-size:clamp(3rem,5.2vw,5.6rem);line-height:.88;max-width:620px}
.history__copy p{max-width:640px;font-size:clamp(.96rem,1.15vw,1.15rem)}
.rule{width:54px;height:2px;background:var(--wine);margin:28px 0 8px}
.text-link{margin-top:18px;text-transform:uppercase;font-size:.67rem;letter-spacing:.18em;border-bottom:1px solid currentColor;padding-bottom:7px}
.text-link span{display:inline-block;margin-left:12px;transition:transform .25s ease}.text-link:hover span{transform:translateX(7px)}

/* SECTION HEADINGS */
.section-heading{max-width:1240px;margin:0 auto;padding:64px 40px 34px}
.section-heading h2{font-size:clamp(2.5rem,5vw,5rem);line-height:.98;max-width:900px}
.section-heading p{max-width:760px;font-size:1rem}
.section-heading--light{color:var(--linen)}
.section--wine{background:var(--wine);color:var(--linen)}
.section--green{background:var(--green);color:var(--linen)}

/* INSPIRACIÓN */
.inspiration{padding-bottom:72px;min-height:auto}
.editorial-grid{width:min(1240px,calc(100% - 80px));margin:0 auto;display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:auto auto;gap:18px}
.editorial-card{background:var(--linen);color:var(--ink);overflow:hidden;transition:transform .38s ease,box-shadow .38s ease}
.editorial-card:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(20,10,10,.20)}
.editorial-card--lead{grid-row:span 2}
.editorial-card__media{overflow:hidden;background:var(--taupe);height:280px}
.editorial-card--lead .editorial-card__media{height:500px}
.editorial-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .65s ease}
.editorial-card:hover .editorial-card__media img{transform:scale(1.035)}
.editorial-card__body{padding:24px 26px 28px}
.editorial-card__body span{font-size:.62rem;letter-spacing:.22em;color:var(--wine)}
.editorial-card__body h3{font-size:clamp(1.55rem,2.4vw,2.6rem);line-height:1.04;margin:12px 0}
.editorial-card__body p{font-size:.88rem;min-height:48px}
.editorial-card__body button{border:0;background:none;padding:0;color:var(--wine);text-transform:uppercase;font-size:.62rem;letter-spacing:.17em}

/* PROCESS */
.process{padding-bottom:72px;min-height:auto}
.process-panels{display:flex;gap:8px;padding:0 26px;min-height:500px}
.process-panel{position:relative;flex:1;overflow:hidden;min-width:0;background:var(--green-dark);transition:flex .55s var(--ease-dekor),transform .4s ease}
.process-panel:hover{flex:1.28;transform:translateY(-5px)}
.process-panel img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.process-panel:hover img{transform:scale(1.03)}
.process-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.62))}
.process-panel__caption{position:absolute;left:26px;right:26px;bottom:24px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.process-panel__caption span{font-size:.65rem;letter-spacing:.18em}.process-panel__caption strong{font-size:1.1rem;font-weight:300}
.process-cta{max-width:1240px;margin:34px auto 0;padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.process-cta p{max-width:680px}.process-cta a{border:1px solid rgba(230,222,204,.5);padding:14px 18px;text-transform:uppercase;font-size:.64rem;letter-spacing:.16em}

/* GALLERY */
.gallery{background:var(--linen);padding-bottom:76px;min-height:auto;overflow:hidden}
.gallery-controls{width:min(1240px,calc(100% - 80px));margin:0 auto 20px;display:flex;justify-content:flex-end;gap:8px}
.gallery-controls button{width:44px;height:44px;border:1px solid var(--wenge);background:transparent;color:var(--wenge);transition:background .2s,color .2s}
.gallery-controls button:hover{background:var(--wenge);color:var(--linen)}
.gallery-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(40px,calc((100vw - 1240px)/2));scrollbar-width:none}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-item,.video-placeholder{border:0;padding:0;flex:0 0 clamp(280px,32vw,470px);height:500px;scroll-snap-align:start;background:var(--taupe);overflow:hidden}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.gallery-item:hover img{transform:scale(1.03)}
.video-placeholder{background:var(--wine);color:var(--linen);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:34px;text-align:left}
.video-placeholder span{font-size:.65rem;letter-spacing:.20em;margin-bottom:12px}.video-placeholder strong{font-family:"Kinghood","Fahkwang",sans-serif;font-size:2rem;font-weight:400}

/* CONTACT */
.contact{display:grid;grid-template-columns:.95fr 1.05fr;min-height:auto;background:var(--wine);color:var(--linen)}
.contact__visual{overflow:hidden;min-height:72svh}.contact__visual img{width:100%;height:100%;object-fit:cover}
.contact__panel{padding:60px clamp(38px,6vw,90px)}.contact__panel h2{font-size:clamp(2.6rem,4.5vw,4.8rem);line-height:.98}.contact__panel>p{max-width:650px}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px}.field{display:flex;flex-direction:column;gap:8px}.field--wide{grid-column:1/-1}
.field label{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase}
.field input,.field select,.field textarea{width:100%;background:transparent;color:var(--linen);border:0;border-bottom:1px solid rgba(230,222,204,.48);border-radius:0;padding:12px 0;font:inherit;outline:none}
.field select option{color:var(--ink)}.field textarea{resize:vertical}.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.button{padding:14px 20px;border:1px solid var(--linen);text-transform:uppercase;font-size:.63rem;letter-spacing:.16em}.button--linen{background:var(--linen);color:var(--wine)}.button--outline{background:transparent;color:var(--linen)}
.social-links{display:flex;gap:28px;margin-top:30px;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em}.form-status{font-size:.78rem;min-height:22px}

/* FOOTER */
.footer{min-height:92px;background:var(--green-dark);color:var(--linen);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;padding:18px 38px;border-top:1px solid rgba(230,222,204,.18)}
.footer__brand img{width:130px}.footer>span{text-transform:uppercase;font-size:.58rem;letter-spacing:.18em}.footer>a:last-child{text-align:right;text-transform:uppercase;font-size:.62rem;letter-spacing:.17em}

/* MODALS */
.modal,.lightbox{position:fixed;inset:0;z-index:120;background:rgba(35,30,28,.94);color:var(--linen);display:none;align-items:center;justify-content:center;padding:40px}.modal.is-open,.lightbox.is-open{display:flex}
.modal__content{max-width:760px}.modal__content>span{font-size:.68rem;letter-spacing:.22em}.modal__content h2{font-size:clamp(3rem,7vw,6.5rem);margin:14px 0 20px}.modal__content p{font-size:1.05rem}
.modal__close,.lightbox__close{position:absolute;top:24px;right:28px;border:0;background:none;color:var(--linen);font-size:2rem;font-weight:200}.lightbox img{max-width:min(1200px,92vw);max-height:88vh;object-fit:contain}

/* RESPONSIVE */
@media(max-width:1180px){
  .site-header{grid-template-columns:165px 1fr auto;padding:0 24px}.desktop-nav{gap:14px}.desktop-nav a{font-size:.51rem}.shop-link span{display:none}
  .portal-nav{width:min(930px,calc(100% - 52px));column-gap:clamp(18px,2.4vw,34px);bottom:30px}
  .editorial-grid{grid-template-columns:1fr 1fr}.editorial-card--lead{grid-row:auto;grid-column:1/-1;display:grid;grid-template-columns:1.2fr .8fr}.editorial-card--lead .editorial-card__media{height:380px}.process-panels{min-height:430px}
}
@media(max-width:860px){
  :root{--header-h:68px;--hero-y:50%}
  .vinyl-control{top:18px;right:18px;width:70px;height:70px}.vinyl-disc{width:54px;height:54px}
  body:not(.is-intro) .vinyl-control{top:76px;right:12px}
  .intro-brand img{width:min(76vw,460px)}
  .site-header{grid-template-columns:1fr auto;height:var(--header-h)}.site-brand img{height:44px}.desktop-nav{display:none}.mobile-menu-button{display:block}
  .portal-view{min-height:82svh;height:82svh}
  .portal-nav{width:min(620px,calc(100% - 40px));column-gap:22px;row-gap:10px;bottom:22px}
  .portal-node{font-size:.61rem;letter-spacing:.10em;padding:7px 0 9px}
  .history{grid-template-columns:1fr}.history__photo{min-height:34svh}.history__copy{padding:42px 24px 52px;min-height:auto}
  .editorial-grid{width:calc(100% - 36px);grid-template-columns:1fr}.editorial-card--lead{grid-column:auto;display:block}.editorial-card--lead .editorial-card__media{height:360px}.editorial-card__media{height:300px}.section-heading{padding:56px 22px 28px}
  .process-panels{display:grid;grid-template-columns:1fr 1fr;min-height:auto;padding:0 18px}.process-panel{height:380px}.process-panel:hover{transform:none}.process-cta{padding:0 24px;display:block}
  .gallery-controls{width:calc(100% - 36px)}.gallery-track{padding:0 18px}.gallery-item,.video-placeholder{height:420px;flex-basis:76vw}
  .contact{grid-template-columns:1fr}.contact__visual{min-height:340px}.contact__panel{padding:48px 24px 64px}.footer{grid-template-columns:1fr;gap:14px;text-align:left}.footer>a:last-child{text-align:left}
  .view-back{top:14px;left:16px;right:auto}
}
@media(max-width:540px){
  .intro-brand{gap:34px}.intro-brand img{width:78vw}.enter{font-size:.64rem}
  .portal-view__image{object-position:50% 50%}
  .portal-nav{bottom:22px;width:calc(100% - 32px);column-gap:16px;row-gap:5px;justify-content:center}
  .portal-node{font-size:.52rem;letter-spacing:.085em;padding:6px 0 7px}
  body:not(.is-intro) .vinyl-control{top:72px;right:10px;width:44px;height:44px}body:not(.is-intro) .vinyl-disc{width:30px;height:30px}
  .history__photo{min-height:300px}.history__copy h1{font-size:2.8rem}.process-panels{grid-template-columns:1fr}.process-panel{height:420px}.contact-form{grid-template-columns:1fr}.field--wide{grid-column:auto}.social-links{flex-direction:column;gap:12px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .vinyl-control.is-playing .vinyl-disc{animation:none!important}
  .music-note{display:none!important}
}


/* =========================================================
   V3.1.4 — separación definitiva Inicio / vinilo + caché limpia
   ========================================================= */
/* Cada módulo reserva su esquina izquierda para Inicio. */
.content-view{position:relative!important}
.content-view > .view-back,
.content-view > .view-back.view-back--light{
  position:absolute!important;
  top:22px!important;
  left:24px!important;
  right:auto!important;
  margin:0!important;
  z-index:48!important;
  max-width:max-content!important;
}
/* El vinilo vive siempre en la esquina opuesta y nunca invade Inicio. */
body:not(.is-intro) #audioControl.vinyl-control{
  position:fixed!important;
  top:88px!important;
  right:18px!important;
  left:auto!important;
  width:46px!important;
  height:46px!important;
  z-index:96!important;
}
body:not(.is-intro) #audioControl .vinyl-disc{width:31px!important;height:31px!important}
body:not(.is-intro) #audioControl .vinyl-disc__ring{inset:5px!important}
body:not(.is-intro) #audioControl .vinyl-disc__ring--2{inset:10px!important}
body:not(.is-intro) #audioControl .vinyl-disc__label{inset:11px!important}

@media(max-width:760px){
  .content-view > .view-back,
  .content-view > .view-back.view-back--light{
    top:14px!important;
    left:14px!important;
    right:auto!important;
    padding:8px 10px!important;
  }
  body:not(.is-intro) #audioControl.vinyl-control{
    top:72px!important;
    right:10px!important;
    left:auto!important;
    width:42px!important;
    height:42px!important;
  }
  body:not(.is-intro) #audioControl .vinyl-disc{width:28px!important;height:28px!important}
}